@lmfaole/basics 0.2.1 → 0.4.0

package/components/basic-summary-table/index.js

@@ -0,0 +1,536 @@
+import {
+    TableElement,
+    normalizeTableCellSpan,
+    normalizeTableRowHeaderColumn,
+} from "../basic-table/index.js";
+
+const HTMLTableElementBase = globalThis.HTMLTableElement ?? class {};
+
+export const SUMMARY_TABLE_TAG_NAME = "basic-summary-table";
+
+const DEFAULT_TOTAL_LABEL = "Totalt";
+const GENERATED_SUMMARY_ROW_ATTRIBUTE = "data-basic-summary-table-generated-row";
+const GENERATED_SUMMARY_CELL_ATTRIBUTE = "data-basic-summary-table-generated-cell";
+const GENERATED_SUMMARY_LABEL_ATTRIBUTE = "data-basic-summary-table-generated-label";
+const SUMMARY_OBSERVER_OPTIONS = {
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["data-value"],
+};
+
+export function normalizeSummaryColumns(value) {
+    if (!value?.trim()) {
+        return [];
+    }
+
+    return Array.from(
+        new Set(
+            value
+                .split(",")
+                .map((part) => Number.parseInt(part.trim(), 10))
+                .filter((column) => Number.isInteger(column) && column > 0),
+        ),
+    ).sort((left, right) => left - right);
+}
+
+export function normalizeSummaryTotalLabel(value) {
+    return value?.trim() || DEFAULT_TOTAL_LABEL;
+}
+
+export function normalizeSummaryLocale(value) {
+    return value?.trim() || undefined;
+}
+
+function findSummaryNumberMatch(value) {
+    const text = String(value ?? "").trim();
+
+    if (!text) {
+        return null;
+    }
+
+    const match = text.match(/(?:-\s*)?\d(?:[\d\s.,]*\d)?/);
+
+    if (!match || typeof match.index !== "number") {
+        return null;
+    }
+
+    return {
+        text,
+        numberText: match[0],
+        start: match.index,
+        end: match.index + match[0].length,
+    };
+}
+
+function getDecimalSeparator(value) {
+    const numberMatch = findSummaryNumberMatch(value);
+    const text = numberMatch?.numberText.trim() ?? String(value ?? "").trim();
+    const lastComma = text.lastIndexOf(",");
+    const lastDot = text.lastIndexOf(".");
+
+    if (lastComma !== -1 && lastDot !== -1) {
+        return lastComma > lastDot ? "," : ".";
+    }
+
+    if (lastComma !== -1) {
+        const digitsAfter = text.length - lastComma - 1;
+        return digitsAfter > 0 && digitsAfter <= 2 ? "," : null;
+    }
+
+    if (lastDot !== -1) {
+        const digitsAfter = text.length - lastDot - 1;
+        return digitsAfter > 0 && digitsAfter <= 2 ? "." : null;
+    }
+
+    return null;
+}
+
+function countFractionDigits(value) {
+    const numberMatch = findSummaryNumberMatch(value);
+    const text = numberMatch?.numberText.trim() ?? String(value ?? "").trim();
+
+    if (!text) {
+        return 0;
+    }
+
+    const decimalSeparator = getDecimalSeparator(text);
+
+    if (!decimalSeparator) {
+        return 0;
+    }
+
+    return text.length - text.lastIndexOf(decimalSeparator) - 1;
+}
+
+export function parseSummaryNumber(value) {
+    const numberMatch = findSummaryNumberMatch(value);
+    const text = numberMatch?.numberText.trim() ?? String(value ?? "").trim();
+
+    if (!text) {
+        return null;
+    }
+
+    const decimalSeparator = getDecimalSeparator(text);
+    let normalized = text.replace(/[^\d,.\-]/g, "");
+
+    if (!normalized || normalized === "-") {
+        return null;
+    }
+
+    if (decimalSeparator === ",") {
+        normalized = normalized.replace(/\./g, "").replace(",", ".");
+    } else if (decimalSeparator === ".") {
+        normalized = normalized.replace(/,/g, "");
+    } else {
+        normalized = normalized.replace(/[.,]/g, "");
+    }
+
+    const parsed = Number.parseFloat(normalized);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+
+export function formatSummaryNumber(value, { locale, fractionDigits = 0 } = {}) {
+    return new Intl.NumberFormat(locale, {
+        minimumFractionDigits: fractionDigits,
+        maximumFractionDigits: fractionDigits,
+    }).format(value);
+}
+
+function getSummaryAffixes(value) {
+    const numberMatch = findSummaryNumberMatch(value);
+
+    if (!numberMatch) {
+        return null;
+    }
+
+    return {
+        prefix: numberMatch.text.slice(0, numberMatch.start),
+        suffix: numberMatch.text.slice(numberMatch.end),
+    };
+}
+
+function formatSummaryValue(value, {
+    locale,
+    fractionDigits = 0,
+    prefix = "",
+    suffix = "",
+} = {}) {
+    return `${prefix}${formatSummaryNumber(value, { locale, fractionDigits })}${suffix}`;
+}
+
+function findCellAtColumnIndex(row, targetColumnIndex) {
+    let columnIndex = 0;
+
+    for (const cell of Array.from(row.cells)) {
+        const colSpan = normalizeTableCellSpan(cell.getAttribute("colspan"));
+
+        if (targetColumnIndex >= columnIndex && targetColumnIndex < columnIndex + colSpan) {
+            return cell;
+        }
+
+        columnIndex += colSpan;
+    }
+
+    return null;
+}
+
+function getTable(root) {
+    const table = root.querySelector("table");
+    return table instanceof HTMLTableElementBase && table.closest(root.tagName.toLowerCase()) === root
+        ? table
+        : null;
+}
+
+function getLogicalColumnCount(table) {
+    let maxColumns = 0;
+
+    for (const row of Array.from(table.rows)) {
+        if (row.hasAttribute(GENERATED_SUMMARY_ROW_ATTRIBUTE)) {
+            continue;
+        }
+
+        let columnCount = 0;
+
+        for (const cell of Array.from(row.cells)) {
+            columnCount += normalizeTableCellSpan(cell.getAttribute("colspan"));
+        }
+
+        maxColumns = Math.max(maxColumns, columnCount);
+    }
+
+    return maxColumns;
+}
+
+function getBodyRows(table) {
+    if (table.tBodies.length > 0) {
+        return Array.from(table.tBodies).flatMap((section) => Array.from(section.rows));
+    }
+
+    return Array.from(table.rows).filter(
+        (row) => row.parentElement?.tagName !== "THEAD" && row.parentElement?.tagName !== "TFOOT",
+    );
+}
+
+function collectSummaryColumns(table, configuredColumns, labelColumnIndex) {
+    if (configuredColumns.length > 0) {
+        return configuredColumns
+            .map((column) => column - 1)
+            .filter((column) => column >= 0 && column !== labelColumnIndex);
+    }
+
+    const inferredColumns = new Set();
+
+    for (const row of getBodyRows(table)) {
+        const logicalColumnCount = getLogicalColumnCount(table);
+
+        for (let columnIndex = 0; columnIndex < logicalColumnCount; columnIndex += 1) {
+            if (columnIndex === labelColumnIndex) {
+                continue;
+            }
+
+            const cell = findCellAtColumnIndex(row, columnIndex);
+            const rawValue = cell?.getAttribute("data-value") ?? cell?.textContent ?? "";
+
+            if (parseSummaryNumber(rawValue) !== null) {
+                inferredColumns.add(columnIndex);
+            }
+        }
+    }
+
+    return Array.from(inferredColumns).sort((left, right) => left - right);
+}
+
+function calculateSummaryTotals(table, summaryColumns) {
+    const totals = new Map();
+
+    for (const columnIndex of summaryColumns) {
+        totals.set(columnIndex, {
+            total: 0,
+            fractionDigits: 0,
+            prefix: "",
+            suffix: "",
+            affixInitialized: false,
+            affixConsistent: true,
+        });
+    }
+
+    for (const row of getBodyRows(table)) {
+        for (const columnIndex of summaryColumns) {
+            const cell = findCellAtColumnIndex(row, columnIndex);
+            const rawValue = cell?.getAttribute("data-value") ?? cell?.textContent ?? "";
+            const parsedValue = parseSummaryNumber(rawValue);
+
+            if (parsedValue === null) {
+                continue;
+            }
+
+            const current = totals.get(columnIndex);
+
+            if (!current) {
+                continue;
+            }
+
+            current.total += parsedValue;
+            current.fractionDigits = Math.max(current.fractionDigits, countFractionDigits(rawValue));
+
+            const affixes = getSummaryAffixes(cell?.textContent ?? "");
+
+            if (!affixes) {
+                continue;
+            }
+
+            if (!current.affixInitialized) {
+                current.prefix = affixes.prefix;
+                current.suffix = affixes.suffix;
+                current.affixInitialized = true;
+                continue;
+            }
+
+            if (current.prefix !== affixes.prefix || current.suffix !== affixes.suffix) {
+                current.affixConsistent = false;
+                current.prefix = "";
+                current.suffix = "";
+            }
+        }
+    }
+
+    return totals;
+}
+
+function ensureGeneratedSummaryRow(table) {
+    let tfoot = table.tFoot;
+
+    if (!tfoot) {
+        tfoot = document.createElement("tfoot");
+        table.append(tfoot);
+    }
+
+    let row = tfoot.querySelector(`tr[${GENERATED_SUMMARY_ROW_ATTRIBUTE}]`);
+
+    if (!row) {
+        row = document.createElement("tr");
+        row.setAttribute(GENERATED_SUMMARY_ROW_ATTRIBUTE, "");
+        tfoot.append(row);
+    }
+
+    return row;
+}
+
+function ensureSummaryRowCell(row, columnIndex, tagName) {
+    const expectedTagName = tagName.toUpperCase();
+    const existingCell = row.cells[columnIndex] ?? null;
+
+    if (existingCell?.tagName === expectedTagName) {
+        return existingCell;
+    }
+
+    const replacement = document.createElement(tagName);
+
+    if (existingCell) {
+        row.replaceChild(replacement, existingCell);
+        return replacement;
+    }
+
+    row.append(replacement);
+    return replacement;
+}
+
+function syncSummaryCellText(cell, text) {
+    if (cell.textContent !== text) {
+        cell.textContent = text;
+    }
+}
+
+function removeGeneratedSummaryRow(table) {
+    table.querySelector(`tr[${GENERATED_SUMMARY_ROW_ATTRIBUTE}]`)?.remove();
+}
+
+function syncSummaryFooter(table, {
+    labelColumnIndex,
+    locale,
+    summaryColumns,
+    totalLabel,
+    totals,
+}) {
+    if (summaryColumns.length === 0) {
+        removeGeneratedSummaryRow(table);
+        return false;
+    }
+
+    const logicalColumnCount = getLogicalColumnCount(table);
+    const effectiveLabelColumnIndex = Math.min(labelColumnIndex, Math.max(logicalColumnCount - 1, 0));
+    const summaryColumnSet = new Set(summaryColumns.filter((column) => column < logicalColumnCount));
+    const row = ensureGeneratedSummaryRow(table);
+
+    for (let columnIndex = 0; columnIndex < logicalColumnCount; columnIndex += 1) {
+        if (columnIndex === effectiveLabelColumnIndex) {
+            const labelCell = ensureSummaryRowCell(row, columnIndex, "th");
+
+            if (labelCell.getAttribute("scope") !== "row") {
+                labelCell.setAttribute("scope", "row");
+            }
+
+            labelCell.setAttribute(GENERATED_SUMMARY_LABEL_ATTRIBUTE, "");
+            labelCell.removeAttribute(GENERATED_SUMMARY_CELL_ATTRIBUTE);
+            labelCell.removeAttribute("data-summary-total");
+            labelCell.removeAttribute("data-summary-empty");
+            delete labelCell.dataset.value;
+            syncSummaryCellText(labelCell, totalLabel);
+            continue;
+        }
+
+        const valueCell = ensureSummaryRowCell(row, columnIndex, "td");
+        valueCell.setAttribute(GENERATED_SUMMARY_CELL_ATTRIBUTE, "");
+        valueCell.removeAttribute(GENERATED_SUMMARY_LABEL_ATTRIBUTE);
+        valueCell.removeAttribute("scope");
+
+        if (summaryColumnSet.has(columnIndex)) {
+            const summary = totals.get(columnIndex) ?? {
+                total: 0,
+                fractionDigits: 0,
+                prefix: "",
+                suffix: "",
+                affixInitialized: false,
+                affixConsistent: true,
+            };
+            const formattedValue = formatSummaryValue(summary.total, {
+                locale,
+                fractionDigits: summary.fractionDigits,
+                prefix: summary.affixConsistent ? summary.prefix : "",
+                suffix: summary.affixConsistent ? summary.suffix : "",
+            });
+
+            syncSummaryCellText(valueCell, formattedValue);
+            valueCell.dataset.value = String(summary.total);
+            valueCell.dataset.summaryTotal = "";
+            valueCell.removeAttribute("data-summary-empty");
+        } else {
+            syncSummaryCellText(valueCell, "");
+            delete valueCell.dataset.value;
+            valueCell.removeAttribute("data-summary-total");
+            valueCell.dataset.summaryEmpty = "";
+        }
+    }
+
+    while (row.cells.length > logicalColumnCount) {
+        row.deleteCell(-1);
+    }
+
+    return true;
+}
+
+export class SummaryTableElement extends TableElement {
+    static observedAttributes = [
+        ...TableElement.observedAttributes,
+        "data-locale",
+        "data-summary-columns",
+        "data-total-label",
+    ];
+
+    #summaryObserver = null;
+    #summaryObserving = false;
+    #scheduledFrame = 0;
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.#syncSummaryObserver();
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#stopSummaryObserving();
+        this.#summaryObserver = null;
+
+        if (this.#scheduledFrame !== 0 && typeof window !== "undefined") {
+            window.cancelAnimationFrame(this.#scheduledFrame);
+            this.#scheduledFrame = 0;
+        }
+    }
+
+    refresh() {
+        this.#stopSummaryObserving();
+
+        try {
+            const table = getTable(this);
+
+            if (!(table instanceof HTMLTableElementBase)) {
+                return;
+            }
+
+            const labelColumnIndex = normalizeTableRowHeaderColumn(
+                this.getAttribute("data-row-header-column"),
+            ) - 1;
+            const summaryColumns = collectSummaryColumns(
+                table,
+                normalizeSummaryColumns(this.getAttribute("data-summary-columns")),
+                labelColumnIndex,
+            );
+            const totals = calculateSummaryTotals(table, summaryColumns);
+
+            syncSummaryFooter(table, {
+                labelColumnIndex,
+                locale: normalizeSummaryLocale(this.getAttribute("data-locale")),
+                summaryColumns,
+                totalLabel: normalizeSummaryTotalLabel(this.getAttribute("data-total-label")),
+                totals,
+            });
+
+            super.refresh();
+        } finally {
+            this.#startSummaryObserving();
+        }
+    }
+
+    #scheduleRefresh() {
+        if (this.#scheduledFrame !== 0 || typeof window === "undefined") {
+            return;
+        }
+
+        this.#scheduledFrame = window.requestAnimationFrame(() => {
+            this.#scheduledFrame = 0;
+            this.refresh();
+        });
+    }
+
+    #syncSummaryObserver() {
+        if (this.#summaryObserver || typeof MutationObserver === "undefined") {
+            return;
+        }
+
+        this.#summaryObserver = new MutationObserver(() => {
+            this.#scheduleRefresh();
+        });
+
+        this.#startSummaryObserving();
+    }
+
+    #startSummaryObserving() {
+        if (!this.#summaryObserver || this.#summaryObserving) {
+            return;
+        }
+
+        this.#summaryObserver.observe(this, SUMMARY_OBSERVER_OPTIONS);
+        this.#summaryObserving = true;
+    }
+
+    #stopSummaryObserving() {
+        if (!this.#summaryObserver || !this.#summaryObserving) {
+            return;
+        }
+
+        this.#summaryObserver.disconnect();
+        this.#summaryObserving = false;
+    }
+}
+
+export function defineSummaryTable(registry = globalThis.customElements) {
+    if (!registry?.get || !registry?.define) {
+        return SummaryTableElement;
+    }
+
+    if (!registry.get(SUMMARY_TABLE_TAG_NAME)) {
+        registry.define(SUMMARY_TABLE_TAG_NAME, SummaryTableElement);
+    }
+
+    return SummaryTableElement;
+}

package/components/basic-summary-table/register.d.ts

@@ -0,0 +1 @@
+export {};

package/components/basic-summary-table/register.js

@@ -0,0 +1,3 @@
+import { defineSummaryTable } from "./index.js";
+
+defineSummaryTable();

package/components/basic-table/index.d.ts

@@ -0,0 +1,75 @@
+export const TABLE_TAG_NAME: "basic-table";
+
+/**
+ * Normalizes unsupported or empty labels back to the default `"Tabell"`.
+ */
+export function normalizeTableLabel(
+    value?: string | null,
+): string;
+
+/**
+ * Normalizes the generated caption text. Empty values disable caption generation.
+ */
+export function normalizeTableCaption(
+    value?: string | null,
+): string;
+
+/**
+ * Normalizes the generated description text. Empty values disable description generation.
+ */
+export function normalizeTableDescription(
+    value?: string | null,
+): string;
+
+/**
+ * Normalizes the root `data-row-headers` attribute into a boolean flag.
+ */
+export function normalizeTableRowHeaders(
+    value?: string | boolean | null,
+): boolean;
+
+/**
+ * Normalizes the root `data-column-headers` attribute into a boolean flag.
+ */
+export function normalizeTableColumnHeaders(
+    value?: string | boolean | null,
+): boolean;
+
+/**
+ * Normalizes invalid row-header-column values back to `1`.
+ */
+export function normalizeTableRowHeaderColumn(
+    value?: string | null,
+): number;
+
+/**
+ * Normalizes invalid `rowspan` and `colspan` values back to `1`.
+ */
+export function normalizeTableCellSpan(
+    value?: string | null,
+): number;
+
+/**
+ * Custom element that upgrades existing table markup with stronger accessible
+ * naming and header associations.
+ *
+ * Attributes:
+ * - `data-caption`: optional generated `<caption>` text when the table has none
+ * - `data-column-headers`: promotes the first row to column headers
+ * - `data-description`: optional generated description wired through `aria-describedby`
+ * - `data-label`: fallback accessible name when the table has neither a caption
+ *   nor its own label
+ * - `data-row-header-column`: one-based column index to use for generated row headers
+ * - `data-row-headers`: promotes the first cell in each body row to a row header
+ */
+export class TableElement extends HTMLElement {
+    static observedAttributes: string[];
+    refresh(): void;
+}
+
+/**
+ * Registers the `basic-table` custom element if it is not already defined.
+ */
+export function defineTable(
+    registry?: CustomElementRegistry,
+): typeof TableElement;