@lmfaole/basics 0.2.1 → 0.4.0

package/components/basic-alert/index.js

@@ -0,0 +1,189 @@
+const ElementBase = globalThis.Element ?? class {};
+const HTMLElementBase = globalThis.HTMLElement ?? class {};
+const HTMLButtonElementBase = globalThis.HTMLButtonElement ?? class {};
+
+export const ALERT_TAG_NAME = "basic-alert";
+
+const DEFAULT_LABEL = "Alert";
+const DEFAULT_LIVE = "assertive";
+const TITLE_SELECTOR = "[data-alert-title]";
+const CLOSE_SELECTOR = "[data-alert-close]";
+const MANAGED_LABEL_ATTRIBUTE = "data-basic-alert-managed-label";
+const MANAGED_LABELLEDBY_ATTRIBUTE = "data-basic-alert-managed-labelledby";
+
+let nextAlertInstanceId = 1;
+
+function collectOwnedElements(root, scope, selector) {
+    return Array.from(scope.querySelectorAll(selector)).filter(
+        (element) => element instanceof HTMLElementBase && element.closest(ALERT_TAG_NAME) === root,
+    );
+}
+
+export function normalizeAlertLabel(value) {
+    return value?.trim() || DEFAULT_LABEL;
+}
+
+export function normalizeAlertLive(value) {
+    const normalized = value?.trim().toLowerCase();
+    return normalized === "polite" ? "polite" : DEFAULT_LIVE;
+}
+
+export function getAlertRoleForLive(value) {
+    return normalizeAlertLive(value) === "polite" ? "status" : "alert";
+}
+
+export function normalizeAlertOpen(value, hidden = false) {
+    if (hidden) {
+        return false;
+    }
+
+    if (value == null) {
+        return true;
+    }
+
+    const normalized = value.trim().toLowerCase();
+    return normalized === "" || normalized === "true" || normalized === "1";
+}
+
+export class AlertElement extends HTMLElementBase {
+    static observedAttributes = ["data-label", "data-live", "data-open", "hidden"];
+
+    #instanceId = `${ALERT_TAG_NAME}-${nextAlertInstanceId++}`;
+    #title = null;
+    #closeButtons = [];
+    #eventsBound = false;
+
+    connectedCallback() {
+        if (!this.#eventsBound) {
+            this.addEventListener("click", this.#handleClick);
+            this.#eventsBound = true;
+        }
+
+        this.#sync();
+    }
+
+    disconnectedCallback() {
+        if (!this.#eventsBound) {
+            return;
+        }
+
+        this.removeEventListener("click", this.#handleClick);
+        this.#eventsBound = false;
+    }
+
+    attributeChangedCallback() {
+        this.#sync();
+    }
+
+    show() {
+        this.hidden = false;
+        this.toggleAttribute("data-open", true);
+        this.#sync();
+        return true;
+    }
+
+    hide() {
+        this.hidden = true;
+        this.toggleAttribute("data-open", false);
+        this.#sync();
+        return true;
+    }
+
+    #handleClick = (event) => {
+        if (!(event.target instanceof ElementBase)) {
+            return;
+        }
+
+        const closeButton = event.target.closest(CLOSE_SELECTOR);
+
+        if (
+            closeButton instanceof HTMLElementBase
+            && closeButton.closest(ALERT_TAG_NAME) === this
+        ) {
+            event.preventDefault();
+            this.hide();
+        }
+    };
+
+    #sync() {
+        const nextTitle = collectOwnedElements(this, this, TITLE_SELECTOR)[0] ?? null;
+
+        this.#title = nextTitle instanceof HTMLElementBase ? nextTitle : null;
+        this.#closeButtons = collectOwnedElements(this, this, CLOSE_SELECTOR);
+        this.#applyState();
+    }
+
+    #applyState() {
+        for (const button of this.#closeButtons) {
+            if (button instanceof HTMLButtonElementBase && !button.hasAttribute("type")) {
+                button.type = "button";
+            }
+        }
+
+        const open = normalizeAlertOpen(this.getAttribute("data-open"), this.hidden);
+        const baseId = this.id || this.#instanceId;
+
+        if (this.#title instanceof HTMLElementBase && !this.#title.id) {
+            this.#title.id = `${baseId}-title`;
+        }
+
+        this.hidden = !open;
+        this.toggleAttribute("data-open", open);
+        this.setAttribute("role", getAlertRoleForLive(this.getAttribute("data-live")));
+        this.setAttribute("aria-live", normalizeAlertLive(this.getAttribute("data-live")));
+        this.setAttribute("aria-atomic", "true");
+        this.#syncAccessibleLabel();
+    }
+
+    #syncAccessibleLabel() {
+        const nextLabel = normalizeAlertLabel(this.getAttribute("data-label"));
+        const hasManagedLabel = this.hasAttribute(MANAGED_LABEL_ATTRIBUTE);
+        const hasManagedLabelledBy = this.hasAttribute(MANAGED_LABELLEDBY_ATTRIBUTE);
+
+        if (hasManagedLabel && this.getAttribute("aria-label") !== nextLabel) {
+            this.removeAttribute("aria-label");
+            this.removeAttribute(MANAGED_LABEL_ATTRIBUTE);
+        }
+
+        if (this.#title?.id) {
+            if (this.hasAttribute(MANAGED_LABEL_ATTRIBUTE)) {
+                this.removeAttribute("aria-label");
+                this.removeAttribute(MANAGED_LABEL_ATTRIBUTE);
+            }
+
+            if (!this.hasAttribute("aria-labelledby") || hasManagedLabelledBy) {
+                this.setAttribute("aria-labelledby", this.#title.id);
+                this.setAttribute(MANAGED_LABELLEDBY_ATTRIBUTE, "");
+            }
+
+            return;
+        }
+
+        if (hasManagedLabelledBy) {
+            this.removeAttribute("aria-labelledby");
+            this.removeAttribute(MANAGED_LABELLEDBY_ATTRIBUTE);
+        }
+
+        const hasOwnAriaLabel = this.hasAttribute("aria-label") && !this.hasAttribute(MANAGED_LABEL_ATTRIBUTE);
+        const hasOwnLabelledBy = this.hasAttribute("aria-labelledby");
+
+        if (hasOwnAriaLabel || hasOwnLabelledBy) {
+            return;
+        }
+
+        this.setAttribute("aria-label", nextLabel);
+        this.setAttribute(MANAGED_LABEL_ATTRIBUTE, "");
+    }
+}
+
+export function defineAlert(registry = globalThis.customElements) {
+    if (!registry?.get || !registry?.define) {
+        return AlertElement;
+    }
+
+    if (!registry.get(ALERT_TAG_NAME)) {
+        registry.define(ALERT_TAG_NAME, AlertElement);
+    }
+
+    return AlertElement;
+}

package/components/basic-alert/register.d.ts

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

package/components/basic-alert/register.js

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

package/components/basic-dialog/index.js

@@ -38,6 +38,25 @@ export function normalizeDialogLabel(value) {
     return value?.trim() || DEFAULT_LABEL;
 }
 
+function isDialogBackdropClick(event, dialog) {
+    if (event.target !== dialog) {
+        return false;
+    }
+
+    const { clientX, clientY } = event;
+
+    if (!Number.isFinite(clientX) || !Number.isFinite(clientY)) {
+        return false;
+    }
+
+    const bounds = dialog.getBoundingClientRect();
+
+    return clientX < bounds.left
+        || clientX > bounds.right
+        || clientY < bounds.top
+        || clientY > bounds.bottom;
+}
+
 export class DialogElement extends HTMLElementBase {
     static observedAttributes = ["data-backdrop-close", "data-label"];
 
@@ -142,8 +161,9 @@ export class DialogElement extends HTMLElementBase {
         }
 
         if (
-            event.target === this.#panel
+            this.#panel instanceof HTMLDialogElementBase
             && normalizeDialogBackdropClose(this.getAttribute("data-backdrop-close"))
+            && isDialogBackdropClick(event, this.#panel)
         ) {
             this.close();
         }

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

@@ -0,0 +1,69 @@
+import type { TableElement } from "../basic-table";
+
+export const SUMMARY_TABLE_TAG_NAME: "basic-summary-table";
+
+/**
+ * Normalizes configured summary columns from a comma-separated one-based list.
+ */
+export function normalizeSummaryColumns(
+    value?: string | null,
+): number[];
+
+/**
+ * Normalizes the generated footer row label back to `"Totalt"`.
+ */
+export function normalizeSummaryTotalLabel(
+    value?: string | null,
+): string;
+
+/**
+ * Normalizes the optional `Intl.NumberFormat` locale.
+ */
+export function normalizeSummaryLocale(
+    value?: string | null,
+): string | undefined;
+
+/**
+ * Parses common formatted number strings such as `1,200.50` or `1 200,50`.
+ */
+export function parseSummaryNumber(
+    value?: string | number | null,
+): number | null;
+
+/**
+ * Formats a summary value for footer display.
+ */
+export function formatSummaryNumber(
+    value: number,
+    options?: {
+        locale?: string;
+        fractionDigits?: number;
+    },
+): string;
+
+/**
+ * Custom element that upgrades a regular summary table with generated footer
+ * totals.
+ *
+ * Attributes:
+ * - `data-caption`: optional generated `<caption>` text when the table has none
+ * - `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-headers`: enables generated row headers in tbody rows
+ * - `data-row-header-column`: one-based body column used for row headers
+ * - `data-summary-columns`: optional comma-separated one-based columns to total
+ * - `data-total-label`: label text used for the generated footer row
+ * - `data-locale`: optional locale used to format footer totals
+ */
+export class SummaryTableElement extends TableElement {
+    static observedAttributes: string[];
+    refresh(): void;
+}
+
+/**
+ * Registers the `basic-summary-table` custom element if it is not already defined.
+ */
+export function defineSummaryTable(
+    registry?: CustomElementRegistry,
+): typeof SummaryTableElement;