@livenetworks/ashlar 1.4.1 → 1.6.0

package/js/ln-icons/README.md

@@ -1,88 +0,0 @@
-# ln-icons
-
-A zero-dependency, local-first **On-Demand SVG Sprite Generator** that dynamically monitors, fetches, and compiles SVG icons at runtime.
-
-Instead of bundling thousands of heavy vector paths or requiring complex manual build steps, it intercepts standard DOM `<use>` tags, fetches vector definitions from a remote CDN, caches them in `localStorage`, and injects them into a single unified hidden SVG sprite sheet.
-
----
-
-## 🧭 Philosophy & Architecture
-
-1. **Declarative On-Demand Rendering:** Icons are declared directly in HTML. The component monitors the DOM via `MutationObserver` for `<use>` references with `#ln-` and `#lnc-` prefixes. It only fetches and compiles icons that are actively present on the page.
-2. **Dual-Prefix Routing:**
-   - **`#ln-{name}`**: Automatically routes to the [Tabler Icons](https://tabler.io/icons) library fetched from a public CDN. No configuration required.
-   - **`#lnc-{name}`**: Routes to a custom corporate CDN defined via global window settings.
-3. **Local Caching Layer:** Fetched SVG path structures are instantly cached in `localStorage` under `lni:{id}`. Subsequent visits render icons instantly with zero network roundtrips.
-
----
-
-## 📦 Minimal Blueprint
-
-### Native Tabler Icon
-```html
-<svg class="ln-icon" aria-hidden="true">
-  <use href="#ln-home"></use>
-</svg>
-```
-
-### Custom Asset Icon
-Define your custom CDN endpoint before importing the library:
-```html
-<script>
-  window.LN_ICONS_CUSTOM_CDN = "https://cdn.mycompany.com/assets/icons";
-</script>
-<script src="dist/ln-ashlar.iife.js" defer></script>
-
-<!-- Renders icon from your custom CDN -->
-<svg class="ln-icon" aria-hidden="true">
-  <use href="#lnc-corporate-logo"></use>
-</svg>
-```
-
----
-
-## 🛠️ Declarative API Contract
-
-### CSS Utility Classes
-
-Configure icon sizes and alignments using standard CSS classes:
-
-| Class | Size | Description |
-| :--- | :--- | :--- |
-| `ln-icon` | `1.25rem` | Base styles, sets `fill: none`, `stroke: currentColor`, inherits color. |
-| `ln-icon--sm` | `1rem` | Small icon, designed for inline text badges or buttons. |
-| `ln-icon--lg` | `1.5rem` | Large icon, designed for toolbar buttons. |
-| `ln-icon--xl` | `4rem` | Extra-large icon, designed for empty state illustrations. |
-| `ln-chevron` | — | Automatically rotates `90deg` when an ancestor `.is-active` class is toggled. |
-
-### Global Configuration (`window`)
-
-Configure these properties before script initialization:
-
-| Variable | Default | Description |
-| :--- | :--- | :--- |
-| `LN_ICONS_CDN` | `https://cdn.jsdelivr.net/npm/@tabler/icons@3.31.0/icons/outline` | Base CDN URL for Tabler Icons. |
-| `LN_ICONS_CUSTOM_CDN` | `null` | Base CDN URL for custom `#lnc-` prefixed SVG resources. |
-
----
-
-## ⚡ Dynamic Interaction Flow
-
-### Automated Mutation Observability
-The loader observes the DOM continuously. When new content is injected (e.g. by `ln-ajax` or `ln-store`), any new icon `<use>` tag is intercepted, resolved, and rendered.
-
-### Dynamic Attribute Swaps
-Modifying the `href` attribute of a `<use>` element dynamically via JavaScript triggers automatic resolution of the new target icon:
-```javascript
-const useElement = document.querySelector('use');
-// Dynamically fetches and switches the icon to a checkmark
-useElement.setAttribute('href', '#ln-check');
-```
-
----
-
-## ⚠️ Common Pitfalls
-
-- **Forgetting `ln-icon` Class:** Standard SVGs default to `100%` width/height. Failing to include the `ln-icon` class will cause the icon to blow up to full viewport size.
-- **Incorrect Prefix Configuration:** Forgetting to define `window.LN_ICONS_CUSTOM_CDN` when using `#lnc-` will cause the loader to fail silently with undefined endpoint errors.
-- **Omitting `aria-hidden="true"`:** Screen readers attempt to read SVG nodes. Always decorate decorative icons with `aria-hidden="true"`, or include an `aria-label` on their parent button.

package/js/ln-icons/ln-icons.js

@@ -1 +0,0 @@
-(function(){"use strict";(function(){const h="ln-icons-sprite",a="#ln-",o="#lnc-",d=new Set,l=new Set;let c=null;const C=(window.LN_ICONS_CDN||"https://cdn.jsdelivr.net/npm/@tabler/icons@3.31.0/icons/outline").replace(/\/$/,""),g=(window.LN_ICONS_CUSTOM_CDN||"").replace(/\/$/,""),u="lni:",m="lni:v",S="1";function v(){try{if(localStorage.getItem(m)!==S){for(let t=localStorage.length-1;t>=0;t--){const n=localStorage.key(t);n&&n.indexOf(u)===0&&localStorage.removeItem(n)}localStorage.setItem(m,S)}}catch{}}v();function N(){return c||(c=document.getElementById(h),c||(c=document.createElementNS("http://www.w3.org/2000/svg","svg"),c.id=h,c.setAttribute("hidden",""),c.setAttribute("aria-hidden","true"),c.appendChild(document.createElementNS("http://www.w3.org/2000/svg","defs")),document.body.insertBefore(c,document.body.firstChild))),c}function A(t){return t.indexOf(o)===0?g+"/"+t.slice(o.length)+".svg":C+"/"+t.slice(a.length)+".svg"}function w(t,n){const e=n.match(/viewBox="([^"]+)"/),i=e?e[1]:"0 0 24 24",s=n.match(/<svg[^>]*>([\s\S]*?)<\/svg>/i),I=s?s[1].trim():"",y=n.match(/<svg([^>]*)>/i),O=y?y[1]:"",r=document.createElementNS("http://www.w3.org/2000/svg","symbol");r.id=t,r.setAttribute("viewBox",i),["fill","stroke","stroke-width","stroke-linecap","stroke-linejoin"].forEach(function(_){const b=O.match(new RegExp(_+'="([^"]*)"'));b&&r.setAttribute(_,b[1])}),r.innerHTML=I,N().querySelector("defs").appendChild(r)}function f(t){if(d.has(t)||l.has(t)||t.indexOf(o)===0&&!g)return;const n=t.slice(1);try{const e=localStorage.getItem(u+n);if(e){w(n,e),d.add(t);return}}catch{}l.add(t),fetch(A(t)).then(function(e){if(!e.ok)throw new Error(e.status);return e.text()}).then(function(e){w(n,e),d.add(t),l.delete(t);try{localStorage.setItem(u+n,e)}catch{}}).catch(function(){l.delete(t)})}function E(t){const n='use[href^="'+a+'"], use[href^="'+o+'"]',e=t.querySelectorAll?t.querySelectorAll(n):[];if(t.matches&&t.matches(n)){const i=t.getAttribute("href");i&&f(i)}Array.prototype.forEach.call(e,function(i){const s=i.getAttribute("href");s&&f(s)})}function p(){E(document),new MutationObserver(function(t){t.forEach(function(n){if(n.type==="childList")n.addedNodes.forEach(function(e){e.nodeType===1&&E(e)});else if(n.type==="attributes"&&n.attributeName==="href"){const e=n.target.getAttribute("href");e&&(e.indexOf(a)===0||e.indexOf(o)===0)&&f(e)}})}).observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["href"]})}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",p):p()})()})();

package/js/ln-table/ln-table-sort.js

@@ -1 +0,0 @@
-(function(){"use strict";function _(t,o,l){t.dispatchEvent(new CustomEvent(o,{bubbles:!0,detail:l||{}}))}function d(t,o){if(!document.body){document.addEventListener("DOMContentLoaded",function(){d(t,o)}),console.warn("["+o+'] Script loaded before <body> — add "defer" to your <script> tag');return}t()}const f={};function g(t,o){f[t]=o}function w(t){return f[t]||{ingress:o=>o,egress:o=>o}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=g,window.lnCore.getDataMapper=w);const E="ln:";function S(){return location.pathname.replace(/\/+$/,"").toLowerCase()||"/"}function p(t,o){const l=o.getAttribute("data-ln-persist"),c=l!==null&&l!==""?l:o.id;return c?E+t+":"+S()+":"+c:(console.warn('[ln-persist] Element requires id or data-ln-persist="key"',o),null)}function v(t,o){const l=p(t,o);if(!l)return null;try{const c=localStorage.getItem(l);return c!==null?JSON.parse(c):null}catch{return null}}function b(t,o,l){const c=p(t,o);if(c)try{localStorage.setItem(c,JSON.stringify(l))}catch{}}(function(){const t="lnTableSort",o="data-ln-sort",l="data-ln-sort-active";if(window[t]!==void 0)return;function c(i){a(i)}function a(i){const r=Array.from(i.querySelectorAll("table"));i.tagName==="TABLE"&&r.push(i),r.forEach(function(e){if(e[t])return;const s=Array.from(e.querySelectorAll("th["+o+"]"));s.length&&(e[t]=new u(e,s))})}function h(i,r){i.querySelectorAll("[data-ln-sort-icon]").forEach(function(s){const n=s.getAttribute("data-ln-sort-icon");r==null?s.classList.toggle("hidden",n!==null&&n!==""):s.classList.toggle("hidden",n!==r)})}function u(i,r){this.table=i,this.ths=r,this._col=-1,this._dir=null;const e=this;r.forEach(function(n,m){n[t+"Bound"]||(n[t+"Bound"]=!0,n._lnSortClick=function(A){const y=A.target.closest("button, a, input, select, textarea, [data-ln-dropdown]");y&&y!==n||e._handleClick(m,n)},n.addEventListener("click",n._lnSortClick))});const s=i.closest("[data-ln-table][data-ln-persist]");if(s){const n=v("table-sort",s);n&&n.dir&&n.col>=0&&n.col<r.length&&(this._handleClick(n.col,r[n.col]),n.dir==="desc"&&this._handleClick(n.col,r[n.col]))}return this}u.prototype._handleClick=function(i,r){let e;this._col!==i?e="asc":this._dir==="asc"?e="desc":this._dir==="desc"?e=null:e="asc",this.ths.forEach(function(n){n.removeAttribute(l),h(n,null)}),e===null?(this._col=-1,this._dir=null):(this._col=i,this._dir=e,r.setAttribute(l,e),h(r,e)),_(this.table,"ln-table:sort",{column:i,sortType:r.getAttribute(o),direction:e});const s=this.table.closest("[data-ln-table][data-ln-persist]");s&&(e===null?b("table-sort",s,null):b("table-sort",s,{col:i,dir:e}))},u.prototype.destroy=function(){this.table[t]&&(this.ths.forEach(function(i){i._lnSortClick&&(i.removeEventListener("click",i._lnSortClick),delete i._lnSortClick),delete i[t+"Bound"]}),delete this.table[t])};function C(){d(function(){new MutationObserver(function(r){r.forEach(function(e){e.type==="childList"?e.addedNodes.forEach(function(s){s.nodeType===1&&a(s)}):e.type==="attributes"&&a(e.target)})}).observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[o]})},"ln-table-sort")}window[t]=c,C(),document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){c(document.body)}):c(document.body)})()})();

package/js/ln-table/src/ln-table-sort.js

@@ -1,168 +0,0 @@
-import { guardBody, dispatch } from '../../ln-core';
-import { persistGet, persistSet } from '../../ln-core';
-
-(function () {
-	const DOM_ATTRIBUTE = 'lnTableSort';
-	const SORT_ATTR = 'data-ln-sort';
-	const SORT_ACTIVE_ATTR = 'data-ln-sort-active';
-
-	if (window[DOM_ATTRIBUTE] !== undefined) return;
-
-	// ─── Constructor ───────────────────────────────────────────
-	// Auto-initializes any <table> that contains th[data-ln-sort] headers.
-
-	function constructor(domRoot) {
-		findElements(domRoot);
-	}
-
-	// Local findElements — intentional divergence from ln-core helper: tag selector ('table') + two-arg constructor (table, ths).
-	function findElements(root) {
-		const tables = Array.from(root.querySelectorAll('table'));
-		if (root.tagName === 'TABLE') tables.push(root);
-
-		tables.forEach(function (table) {
-			if (table[DOM_ATTRIBUTE]) return;
-			const ths = Array.from(table.querySelectorAll('th[' + SORT_ATTR + ']'));
-			if (ths.length) table[DOM_ATTRIBUTE] = new _component(table, ths);
-		});
-	}
-
-	// ─── Component ─────────────────────────────────────────────
-
-	function _setSortIcon(th, dir) {
-		const icons = th.querySelectorAll('[data-ln-sort-icon]');
-		icons.forEach(function (icon) {
-			const val = icon.getAttribute('data-ln-sort-icon');
-			if (dir === null || dir === undefined) {
-				// Neutral: show the no-value icon, hide asc/desc
-				icon.classList.toggle('hidden', val !== null && val !== '');
-			} else {
-				// Show matching direction, hide others
-				icon.classList.toggle('hidden', val !== dir);
-			}
-		});
-	}
-
-	function _component(table, ths) {
-		this.table = table;
-		this.ths = ths;
-		this._col = -1;
-		this._dir = null;
-		const self = this;
-
-		ths.forEach(function (th, index) {
-			if (th[DOM_ATTRIBUTE + 'Bound']) return;
-			th[DOM_ATTRIBUTE + 'Bound'] = true;
-
-			th._lnSortClick = function (e) {
-				// Don't sort when user clicks an interactive child (filter button, etc.)
-				const interactive = e.target.closest('button, a, input, select, textarea, [data-ln-dropdown]');
-				if (interactive && interactive !== th) return;
-				self._handleClick(index, th);
-			};
-			th.addEventListener('click', th._lnSortClick);
-		});
-
-		// ─── Restore persisted sort ───────────────────────────────
-		const persistRoot = table.closest('[data-ln-table][data-ln-persist]');
-		if (persistRoot) {
-			const saved = persistGet('table-sort', persistRoot);
-			if (saved && saved.dir && saved.col >= 0 && saved.col < ths.length) {
-				// Programmatically trigger the saved sort
-				this._handleClick(saved.col, ths[saved.col]);
-				if (saved.dir === 'desc') {
-					this._handleClick(saved.col, ths[saved.col]);
-				}
-			}
-		}
-
-		return this;
-	}
-
-	_component.prototype._handleClick = function (colIndex, th) {
-		let newDir;
-
-		if (this._col !== colIndex) {
-			newDir = 'asc';
-		} else if (this._dir === 'asc') {
-			newDir = 'desc';
-		} else if (this._dir === 'desc') {
-			newDir = null;
-		} else {
-			newDir = 'asc';
-		}
-
-		this.ths.forEach(function (t) {
-			t.removeAttribute(SORT_ACTIVE_ATTR);
-			_setSortIcon(t, null);
-		});
-
-		if (newDir === null) {
-			this._col = -1;
-			this._dir = null;
-		} else {
-			this._col = colIndex;
-			this._dir = newDir;
-			th.setAttribute(SORT_ACTIVE_ATTR, newDir);
-			_setSortIcon(th, newDir);
-		}
-
-		dispatch(this.table, 'ln-table:sort', {
-			column: colIndex,
-			sortType: th.getAttribute(SORT_ATTR),
-			direction: newDir
-		});
-		const persistRoot = this.table.closest('[data-ln-table][data-ln-persist]');
-		if (persistRoot) {
-			if (newDir === null) {
-				persistSet('table-sort', persistRoot, null);
-			} else {
-				persistSet('table-sort', persistRoot, { col: colIndex, dir: newDir });
-			}
-		}
-	};
-
-	_component.prototype.destroy = function () {
-		if (!this.table[DOM_ATTRIBUTE]) return;
-		this.ths.forEach(function (th) {
-			if (th._lnSortClick) {
-				th.removeEventListener('click', th._lnSortClick);
-				delete th._lnSortClick;
-			}
-			delete th[DOM_ATTRIBUTE + 'Bound'];
-		});
-		delete this.table[DOM_ATTRIBUTE];
-	};
-
-	// ─── DOM Observer ──────────────────────────────────────────
-
-	function _domObserver() {
-		guardBody(function () {
-			const observer = new MutationObserver(function (mutations) {
-				mutations.forEach(function (mutation) {
-					if (mutation.type === 'childList') {
-						mutation.addedNodes.forEach(function (node) {
-							if (node.nodeType === 1) findElements(node);
-						});
-					} else if (mutation.type === 'attributes') {
-						findElements(mutation.target);
-					}
-				});
-			});
-			observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: [SORT_ATTR] });
-		}, 'ln-table-sort');
-	}
-
-	// ─── Init ──────────────────────────────────────────────────
-
-	window[DOM_ATTRIBUTE] = constructor;
-	_domObserver();
-
-	if (document.readyState === 'loading') {
-		document.addEventListener('DOMContentLoaded', function () {
-			constructor(document.body);
-		});
-	} else {
-		constructor(document.body);
-	}
-})();

package/scss/components/_data-table.scss

@@ -1,83 +0,0 @@
-@use '../config/mixins' as *;
-
-[data-ln-data-table] {
-	@include data-table;
-}
-
-// ─── Sort indicators ──────────────────────────────────────
-
-[data-ln-col-sort] {
-	@include data-table-sort-button;
-}
-
-th:hover [data-ln-col-sort] {
-	opacity: 0.7;
-}
-
-.ln-sort-asc [data-ln-col-sort],
-.ln-sort-desc [data-ln-col-sort] {
-	@include data-table-sort-active;
-}
-
-// Active-state icon swap — hide the neutral dual-arrow, show the
-// matching directional icon. Mixin defaults all three to "none shown,
-// asc/desc hidden"; we override per active class.
-.ln-sort-asc [data-ln-col-sort] {
-	[data-ln-sort-icon="none"] { display: none; }
-	[data-ln-sort-icon="asc"]  { display: inline-block; }
-}
-
-.ln-sort-desc [data-ln-col-sort] {
-	[data-ln-sort-icon="none"] { display: none; }
-	[data-ln-sort-icon="desc"] { display: inline-block; }
-}
-
-// ─── Filter button ────────────────────────────────────────
-
-[data-ln-col-filter] {
-	@include data-table-filter-button;
-}
-
-th:hover [data-ln-col-filter] {
-	opacity: 0.7;
-}
-
-.ln-filter-active {
-	@include data-table-filter-active;
-}
-
-// ─── Filter dropdown ──────────────────────────────────────
-
-.column-filter-dropdown {
-	@include data-table-filter-dropdown;
-}
-
-// ─── Row action buttons ─────────────────────────────────
-
-[data-ln-row-action] {
-	@include data-table-row-action;
-}
-
-[data-ln-row-action="delete"] {
-	@include data-table-row-action-delete;
-}
-
-// ─── Row interaction states ─────────────────────────────
-
-[data-ln-row] {
-	@include data-table-row;
-}
-
-.ln-row-selected {
-	@include data-table-row-selected;
-}
-
-.ln-row-focused {
-	@include data-table-row-focused;
-}
-
-// ─── Virtual-scroll spacer ──────────────────────────────
-
-.ln-data-table__spacer {
-	@include data-table-spacer-row;
-}