@cobdfamily/clf-core 7.0.1

package/dist/components/forms/common.js

@@ -0,0 +1,137 @@
+// Shared helpers for the form custom elements.
+//
+// - ionicPresent() -- same auto-detect as
+//   cobd-nav. Looking for <ion-app> in the DOM
+//   sidesteps the
+//   customElements-not-yet-defined race that an
+//   `customElements.get("ion-input")` check would
+//   hit under Angular Ionic's deferred bootstrap.
+//
+// - ensureBaseStyle() -- Light-DOM custom elements
+//   default to `display: inline`, which would
+//   collapse the rendered field labels + slots.
+//   Inject one global rule the first time any
+//   form element upgrades. Idempotent.
+//
+// - readBoolAttr() / readAttr() -- attribute-
+//   reading helpers that respect the HTML
+//   convention (presence-as-true for booleans,
+//   getAttribute() for strings) and default
+//   gracefully.
+export function ionicPresent() {
+    return typeof document !== "undefined"
+        && document.querySelector("ion-app") !== null;
+}
+const BASE_STYLE_ID = "cobd-forms-base-style";
+const BASE_STYLE = `
+cobd-textfield, cobd-select, cobd-textarea,
+cobd-checkbox, cobd-submit {
+    display: block;
+}
+.cobd-field-row {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cobd-spacing-xs, 4px);
+}
+.cobd-field-help,
+.cobd-field-error {
+    font-size: var(--cobd-typography-size-sm, 0.875rem);
+    line-height: var(--cobd-typography-line-default, 1.5);
+}
+.cobd-field-help {
+    color: var(--cobd-color-medium, #92949c);
+}
+.cobd-field-error {
+    color: var(--cobd-color-danger, #c5283b);
+}
+.cobd-required-asterisk {
+    color: var(--cobd-color-danger, #c5283b);
+    margin-left: 0.2em;
+    aria-hidden: true;
+}
+`;
+export function ensureBaseStyle() {
+    if (typeof document === "undefined")
+        return;
+    if (document.getElementById(BASE_STYLE_ID))
+        return;
+    const style = document.createElement("style");
+    style.id = BASE_STYLE_ID;
+    style.textContent = BASE_STYLE;
+    document.head.appendChild(style);
+}
+export function readAttr(el, name) {
+    return el.hasAttribute(name) ? el.getAttribute(name) : null;
+}
+export function readBoolAttr(el, name) {
+    // HTML boolean attrs: present (even empty) =
+    // true; absent = false. Matches the rule
+    // browsers use for `disabled`, `required`,
+    // etc.
+    return el.hasAttribute(name);
+}
+export function readFieldDef(el, fallbackIdPrefix) {
+    const name = readAttr(el, "name") ?? "";
+    const explicitId = readAttr(el, "id");
+    const id = explicitId || name
+        || `${fallbackIdPrefix}-${Math.random().toString(36).slice(2, 8)}`;
+    return {
+        id,
+        name,
+        label: readAttr(el, "label") ?? "",
+        help: readAttr(el, "help"),
+        error: readAttr(el, "error"),
+        required: readBoolAttr(el, "required"),
+    };
+}
+export function buildLabel(def) {
+    const lbl = document.createElement("label");
+    lbl.setAttribute("for", def.id);
+    lbl.className = "cobd-field-label";
+    lbl.textContent = def.label;
+    if (def.required) {
+        const star = document.createElement("span");
+        star.className = "cobd-required-asterisk";
+        star.setAttribute("aria-hidden", "true");
+        star.textContent = "*";
+        lbl.appendChild(star);
+        const sr = document.createElement("span");
+        sr.className = "sr-only";
+        sr.textContent = " (required)";
+        lbl.appendChild(sr);
+    }
+    return lbl;
+}
+export function buildHelp(def) {
+    if (!def.help)
+        return null;
+    const help = document.createElement("div");
+    help.id = `${def.id}-help`;
+    help.className = "cobd-field-help";
+    help.innerHTML = def.help;
+    return help;
+}
+export function buildError(def) {
+    // Always render the error slot (even when
+    // empty) so consumers can swap text into it
+    // at runtime without restructuring the DOM.
+    const err = document.createElement("div");
+    err.id = `${def.id}-error`;
+    err.className = "cobd-field-error";
+    err.setAttribute("role", "alert");
+    err.setAttribute("aria-live", "polite");
+    if (def.error)
+        err.innerHTML = def.error;
+    return err;
+}
+// Compose aria-describedby pointing at help +
+// error slots (whichever are present). The
+// control's aria-describedby gets this string
+// so screen readers announce them in order.
+export function describedByValue(def) {
+    const parts = [];
+    if (def.help)
+        parts.push(`${def.id}-help`);
+    parts.push(`${def.id}-error`);
+    return parts.join(" ");
+}

package/dist/components/forms/index.d.ts

@@ -0,0 +1,5 @@
+import "./textfield.js";
+import "./textarea.js";
+import "./select.js";
+import "./checkbox.js";
+import "./submit.js";

package/dist/components/forms/index.js

@@ -0,0 +1,13 @@
+// Aggregate entry: importing this module registers
+// every cobd-* form element as a side effect. For
+// tree-shaking, each element is also exported on
+// its own subpath:
+//
+//   import "@cobdfamily/clf-core/components/forms/textfield";
+//   import "@cobdfamily/clf-core/components/forms/select";
+//   ...
+import "./textfield.js";
+import "./textarea.js";
+import "./select.js";
+import "./checkbox.js";
+import "./submit.js";

package/dist/components/forms/select.d.ts

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

package/dist/components/forms/select.js

@@ -0,0 +1,132 @@
+// <cobd-select name="..." label="..." [value="..."]
+//              [help="..."] [error="..."] [required]>
+//   <option value="ferry">Ferry</option>
+//   <option value="lift">Lift</option>
+// </cobd-select>
+//
+// Select with options as Light-DOM children. The
+// child <option> elements are read on render and
+// translated to <ion-select-option> when Ionic is
+// present, kept as <option> when not.
+//
+// Form-associated like cobd-textfield.
+import { ionicPresent, ensureBaseStyle, readAttr, readFieldDef, buildLabel, buildHelp, buildError, describedByValue, } from "./common.js";
+function readOptions(host, initialValue) {
+    const out = [];
+    for (const opt of Array.from(host.querySelectorAll("option"))) {
+        const v = opt.getAttribute("value") ?? opt.textContent ?? "";
+        out.push({
+            value: v,
+            label: opt.textContent?.trim() ?? v,
+            selected: opt.hasAttribute("selected")
+                || v === initialValue,
+            disabled: opt.hasAttribute("disabled"),
+        });
+    }
+    return out;
+}
+class CobdSelect extends HTMLElement {
+    static get observedAttributes() {
+        return [
+            "name", "label", "value", "help",
+            "error", "required", "id",
+        ];
+    }
+    constructor() {
+        super();
+        this.snapshot = [];
+        this.rendered = false;
+        this.internals = this.attachInternals();
+    }
+    connectedCallback() {
+        ensureBaseStyle();
+        // Snapshot the option children once -- the
+        // render path replaceChildren()s the host,
+        // which would otherwise wipe them.
+        if (!this.rendered) {
+            this.snapshot = readOptions(this, readAttr(this, "value") ?? "");
+            this.render();
+        }
+    }
+    attributeChangedCallback() {
+        if (this.isConnected && this.rendered)
+            this.render();
+    }
+    render() {
+        const def = readFieldDef(this, "cobd-select");
+        const value = readAttr(this, "value") ?? "";
+        const options = this.snapshot.map(o => ({
+            ...o,
+            selected: o.value === value || o.selected,
+        }));
+        const row = document.createElement("div");
+        row.className = "cobd-field-row";
+        row.appendChild(buildLabel(def));
+        const control = ionicPresent()
+            ? this.buildIonSelect(def, options)
+            : this.buildPlainSelect(def, options);
+        row.appendChild(control);
+        const help = buildHelp(def);
+        if (help)
+            row.appendChild(help);
+        row.appendChild(buildError(def));
+        this.replaceChildren(row);
+        const initial = options.find(o => o.selected)?.value
+            ?? options[0]?.value ?? "";
+        this.internals.setFormValue(initial);
+        this.rendered = true;
+    }
+    buildIonSelect(def, options) {
+        const it = document.createElement("ion-select");
+        it.setAttribute("id", def.id);
+        if (def.name)
+            it.setAttribute("name", def.name);
+        it.setAttribute("label-placement", "stacked");
+        if (def.required)
+            it.setAttribute("required", "");
+        it.setAttribute("aria-describedby", describedByValue(def));
+        for (const opt of options) {
+            const o = document.createElement("ion-select-option");
+            o.setAttribute("value", opt.value);
+            if (opt.disabled)
+                o.setAttribute("disabled", "");
+            o.textContent = opt.label;
+            if (opt.selected) {
+                it.setAttribute("value", opt.value);
+            }
+            it.appendChild(o);
+        }
+        it.addEventListener("ionChange", () => this.syncFrom(it));
+        return it;
+    }
+    buildPlainSelect(def, options) {
+        const it = document.createElement("select");
+        it.id = def.id;
+        if (def.name)
+            it.name = def.name;
+        if (def.required)
+            it.required = true;
+        it.setAttribute("aria-describedby", describedByValue(def));
+        for (const opt of options) {
+            const o = document.createElement("option");
+            o.value = opt.value;
+            if (opt.disabled)
+                o.disabled = true;
+            o.textContent = opt.label;
+            if (opt.selected)
+                o.selected = true;
+            it.appendChild(o);
+        }
+        it.addEventListener("change", () => this.syncFrom(it));
+        return it;
+    }
+    syncFrom(el) {
+        const v = el.value;
+        const str = v == null ? "" : String(v);
+        this.internals.setFormValue(str);
+    }
+}
+CobdSelect.formAssociated = true;
+if (!customElements.get("cobd-select")) {
+    customElements.define("cobd-select", CobdSelect);
+}

package/dist/components/forms/submit.d.ts

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

package/dist/components/forms/submit.js

@@ -0,0 +1,78 @@
+// <cobd-submit label="Save"
+//              [action="/api/save"]
+//              [method="post"]>
+//
+// Form submit button. When the host wraps it in a
+// <form>, the button submits that form (browser
+// default). When the action/method attrs are set,
+// the element wraps itself in its own <form> so
+// the button stands alone -- useful for one-off
+// "post and go" actions where the surrounding
+// markup isn't already a form.
+//
+// Renders <ion-button> when Ionic is present, a
+// plain <button> otherwise. The element is NOT
+// form-associated for value purposes (a submit
+// button has no submittable value of its own);
+// it just provides the trigger.
+import { ionicPresent, ensureBaseStyle, readAttr, } from "./common.js";
+class CobdSubmit extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.rendered = false;
+    }
+    static get observedAttributes() {
+        return ["label", "action", "method", "color"];
+    }
+    connectedCallback() {
+        ensureBaseStyle();
+        if (!this.rendered)
+            this.render();
+    }
+    attributeChangedCallback() {
+        if (this.isConnected && this.rendered)
+            this.render();
+    }
+    render() {
+        const label = readAttr(this, "label") ?? "Submit";
+        const action = readAttr(this, "action");
+        const method = (readAttr(this, "method")
+            ?? "post").toLowerCase();
+        const color = readAttr(this, "color") ?? "primary";
+        const button = ionicPresent()
+            ? this.buildIonButton(label, color)
+            : this.buildPlainButton(label);
+        // Standalone-form mode: if `action` is set,
+        // the consumer wants this button to submit
+        // its own form (rather than a surrounding
+        // one). Wrap the button in a <form>.
+        if (action) {
+            const form = document.createElement("form");
+            form.action = action;
+            form.method = method;
+            form.appendChild(button);
+            this.replaceChildren(form);
+        }
+        else {
+            this.replaceChildren(button);
+        }
+        this.rendered = true;
+    }
+    buildIonButton(label, color) {
+        const it = document.createElement("ion-button");
+        it.setAttribute("type", "submit");
+        it.setAttribute("color", color);
+        it.setAttribute("expand", "block");
+        it.textContent = label;
+        return it;
+    }
+    buildPlainButton(label) {
+        const it = document.createElement("button");
+        it.type = "submit";
+        it.textContent = label;
+        return it;
+    }
+}
+if (!customElements.get("cobd-submit")) {
+    customElements.define("cobd-submit", CobdSubmit);
+}

package/dist/components/forms/textarea.d.ts

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

package/dist/components/forms/textarea.js

@@ -0,0 +1,95 @@
+// <cobd-textarea name="..." label="..."
+//                [value="..."] [placeholder="..."]
+//                [help="..."] [error="..."]
+//                [required] [rows="..."]>
+//
+// Same shape as <cobd-textfield>, multi-line.
+// Form-associated. Ionic auto-detect.
+import { ionicPresent, ensureBaseStyle, readAttr, readFieldDef, buildLabel, buildHelp, buildError, describedByValue, } from "./common.js";
+class CobdTextarea extends HTMLElement {
+    static get observedAttributes() {
+        return [
+            "name", "label", "value", "placeholder",
+            "help", "error", "required", "rows", "id",
+        ];
+    }
+    constructor() {
+        super();
+        this.rendered = false;
+        this.internals = this.attachInternals();
+    }
+    connectedCallback() {
+        ensureBaseStyle();
+        if (!this.rendered)
+            this.render();
+    }
+    attributeChangedCallback() {
+        if (this.isConnected && this.rendered)
+            this.render();
+    }
+    render() {
+        const def = readFieldDef(this, "cobd-textarea");
+        const value = readAttr(this, "value") ?? "";
+        const placeholder = readAttr(this, "placeholder") ?? "";
+        const rows = readAttr(this, "rows") ?? "4";
+        const row = document.createElement("div");
+        row.className = "cobd-field-row";
+        row.appendChild(buildLabel(def));
+        const control = ionicPresent()
+            ? this.buildIonTextarea(def, value, placeholder, rows)
+            : this.buildPlainTextarea(def, value, placeholder, rows);
+        row.appendChild(control);
+        const help = buildHelp(def);
+        if (help)
+            row.appendChild(help);
+        row.appendChild(buildError(def));
+        this.replaceChildren(row);
+        this.internals.setFormValue(value);
+        this.rendered = true;
+    }
+    buildIonTextarea(def, value, placeholder, rows) {
+        const it = document.createElement("ion-textarea");
+        it.setAttribute("id", def.id);
+        if (def.name)
+            it.setAttribute("name", def.name);
+        it.setAttribute("label-placement", "stacked");
+        if (value)
+            it.setAttribute("value", value);
+        if (placeholder)
+            it.setAttribute("placeholder", placeholder);
+        if (rows)
+            it.setAttribute("rows", rows);
+        if (def.required)
+            it.setAttribute("required", "");
+        it.setAttribute("aria-describedby", describedByValue(def));
+        it.addEventListener("ionInput", () => this.syncFrom(it));
+        it.addEventListener("ionChange", () => this.syncFrom(it));
+        return it;
+    }
+    buildPlainTextarea(def, value, placeholder, rows) {
+        const it = document.createElement("textarea");
+        it.id = def.id;
+        if (def.name)
+            it.name = def.name;
+        if (placeholder)
+            it.placeholder = placeholder;
+        if (rows)
+            it.rows = Number(rows);
+        if (def.required)
+            it.required = true;
+        it.value = value;
+        it.setAttribute("aria-describedby", describedByValue(def));
+        it.addEventListener("input", () => this.syncFrom(it));
+        it.addEventListener("change", () => this.syncFrom(it));
+        return it;
+    }
+    syncFrom(el) {
+        const v = el.value;
+        const str = v == null ? "" : String(v);
+        this.internals.setFormValue(str);
+    }
+}
+CobdTextarea.formAssociated = true;
+if (!customElements.get("cobd-textarea")) {
+    customElements.define("cobd-textarea", CobdTextarea);
+}

package/dist/components/forms/textfield.d.ts

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

package/dist/components/forms/textfield.js

@@ -0,0 +1,125 @@
+// <cobd-textfield name="..." label="..." [type="..."]
+//                 [value="..."] [placeholder="..."]
+//                 [help="..."] [error="..."]
+//                 [required] [maxlength="..."]>
+//
+// Attribute-driven, form-associated text input.
+// Form-Associated Custom Elements API (ElementInternals)
+// makes the element participate in <form> submission
+// natively -- the form sees `name=value` on POST as if
+// the element were a plain <input>.
+//
+// Render mode:
+//
+//   Ionic present  -> <ion-input> + custom label,
+//                     help, error slots around it.
+//   Ionic absent   -> plain <input> with the same
+//                     semantic surround.
+//
+// In both modes the element follows the cobd-* design
+// tokens via CSS variables on <html>; no inline
+// colours.
+import { ionicPresent, ensureBaseStyle, readAttr, readFieldDef, buildLabel, buildHelp, buildError, describedByValue, } from "./common.js";
+const KNOWN_TYPES = new Set([
+    "text", "email", "password", "tel", "url",
+    "number", "search",
+]);
+class CobdTextfield extends HTMLElement {
+    static get observedAttributes() {
+        return [
+            "name", "label", "type", "value",
+            "placeholder", "help", "error",
+            "required", "maxlength", "id",
+        ];
+    }
+    constructor() {
+        super();
+        this.rendered = false;
+        this.internals = this.attachInternals();
+    }
+    connectedCallback() {
+        ensureBaseStyle();
+        if (!this.rendered)
+            this.render();
+    }
+    attributeChangedCallback() {
+        if (this.isConnected && this.rendered)
+            this.render();
+    }
+    render() {
+        const def = readFieldDef(this, "cobd-textfield");
+        const type = (readAttr(this, "type") ?? "text").toLowerCase();
+        const safeType = KNOWN_TYPES.has(type) ? type : "text";
+        const value = readAttr(this, "value") ?? "";
+        const placeholder = readAttr(this, "placeholder") ?? "";
+        const maxlength = readAttr(this, "maxlength");
+        const row = document.createElement("div");
+        row.className = "cobd-field-row";
+        row.appendChild(buildLabel(def));
+        const control = ionicPresent()
+            ? this.buildIonInput(def, safeType, value, placeholder, maxlength)
+            : this.buildPlainInput(def, safeType, value, placeholder, maxlength);
+        row.appendChild(control);
+        const help = buildHelp(def);
+        if (help)
+            row.appendChild(help);
+        row.appendChild(buildError(def));
+        this.replaceChildren(row);
+        this.internals.setFormValue(value);
+        this.rendered = true;
+    }
+    buildIonInput(def, type, value, placeholder, maxlength) {
+        const it = document.createElement("ion-input");
+        it.setAttribute("id", def.id);
+        if (def.name)
+            it.setAttribute("name", def.name);
+        it.setAttribute("type", type);
+        it.setAttribute("label-placement", "stacked");
+        if (value)
+            it.setAttribute("value", value);
+        if (placeholder)
+            it.setAttribute("placeholder", placeholder);
+        if (maxlength)
+            it.setAttribute("maxlength", maxlength);
+        if (def.required)
+            it.setAttribute("required", "");
+        it.setAttribute("aria-describedby", describedByValue(def));
+        // ion-input fires ionInput / ionChange; mirror
+        // both to ElementInternals so <form> POST sees
+        // the latest value.
+        it.addEventListener("ionInput", () => this.syncValueFrom(it));
+        it.addEventListener("ionChange", () => this.syncValueFrom(it));
+        return it;
+    }
+    buildPlainInput(def, type, value, placeholder, maxlength) {
+        const it = document.createElement("input");
+        it.id = def.id;
+        if (def.name)
+            it.name = def.name;
+        it.type = type;
+        if (value)
+            it.value = value;
+        if (placeholder)
+            it.placeholder = placeholder;
+        if (maxlength)
+            it.maxLength = Number(maxlength);
+        if (def.required)
+            it.required = true;
+        it.setAttribute("aria-describedby", describedByValue(def));
+        it.addEventListener("input", () => this.syncValueFrom(it));
+        it.addEventListener("change", () => this.syncValueFrom(it));
+        return it;
+    }
+    syncValueFrom(el) {
+        // ion-input has its own `value` getter (number
+        // | string | null); HTMLInputElement is just
+        // string. Coerce uniformly.
+        const v = el.value;
+        const str = v == null ? "" : String(v);
+        this.internals.setFormValue(str);
+    }
+}
+CobdTextfield.formAssociated = true;
+if (!customElements.get("cobd-textfield")) {
+    customElements.define("cobd-textfield", CobdTextfield);
+}

package/dist/components/index.d.ts

@@ -0,0 +1,7 @@
+import "../theming/init.js";
+import "./theme-toggle.js";
+import "./font-scale-toggle.js";
+import "./cobd-nav.js";
+import "./cobd-support.js";
+import "./cobd-embed.js";
+import "./forms/index.js";

package/dist/components/index.js

@@ -0,0 +1,33 @@
+// Side-effect bundle: importing this module
+// registers every clf-core custom element AND
+// boots the theming runtime. One import = one
+// `<script type="module" src=".../components/
+// index.js">` covers the whole element surface.
+//
+// Why this exists: most CLF consumers (Hugo, WP,
+// Keycloak, Moodle, CiviCRM, static HTML) don't
+// ship a JS module pipeline. The clf-factory
+// chrome auto-loads this one bundle from the
+// CDN, with one SRI integrity attr, and every
+// element is then available globally inside
+// authored body content. Consumers with a real
+// bundler can keep importing per-element entry
+// points (`@cobdfamily/clf-core/components/
+// cobd-embed`, etc.) for tree-shaking; that
+// surface is unchanged.
+//
+// Order matters for theming/init: it has to
+// run before the toggles register, otherwise a
+// toggle that ticks at definition time
+// (touching the runtime singleton) wouldn't
+// find the state machine initialized. Putting
+// it first here is enough; everything below is
+// a side-effect import so the order of
+// definitions matches the order of imports.
+import "../theming/init.js";
+import "./theme-toggle.js";
+import "./font-scale-toggle.js";
+import "./cobd-nav.js";
+import "./cobd-support.js";
+import "./cobd-embed.js";
+import "./forms/index.js";

package/dist/components/theme-toggle.d.ts

@@ -0,0 +1,10 @@
+export declare class CobdThemeToggle extends HTMLElement {
+    private button;
+    private slotEl;
+    private path;
+    private cleanup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private cycle;
+    private render;
+}