@wpmoo/ui 2.2.0 → 2.3.0

package/dist/js/moo-ui.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI moo-ui.js v2.2.0 (https://wpmoo.org/)
+ * Moo UI moo-ui.js v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
@@ -364,9 +364,9 @@ var Combobox = class _Combobox {
     const needle = normalize(this._input.value);
     let count = 0;
     this._options.forEach((option) => {
-      const matches = !needle || normalize(option.textContent).includes(needle);
-      option.hidden = !matches;
-      count += matches ? 1 : 0;
+      const matches2 = !needle || normalize(option.textContent).includes(needle);
+      option.hidden = !matches2;
+      count += matches2 ? 1 : 0;
     });
     this._syncGroupVisibility();
     this._empty.hidden = count !== 0;
@@ -4832,6 +4832,324 @@ var ImageGallery = class _ImageGallery {
   }
 };
 
+// src/js/components/consent.js
+var instances10 = /* @__PURE__ */ new WeakMap();
+var documents = /* @__PURE__ */ new WeakMap();
+var RECORD_VERSION = 1;
+var DAY_SECONDS = 86400;
+var FOCUSABLE = "button, a[href], input:not([type='hidden']), select, textarea, [tabindex]:not([tabindex='-1'])";
+function webSource(value, base) {
+  if (!value) return "";
+  try {
+    const url = new URL(value, base);
+    return url.protocol === "https:" || url.protocol === "http:" ? url.href : "";
+  } catch {
+    return "";
+  }
+}
+function matches(pattern, name) {
+  return pattern.endsWith("*") ? name.startsWith(pattern.slice(0, -1)) : name === pattern;
+}
+var ConsentManager = class _ConsentManager {
+  /** The manager bound to a [data-consent] element or to a document. */
+  static getInstance(target) {
+    if (target?.nodeType === 9) return documents.get(target) || null;
+    return target?.nodeType === 1 ? instances10.get(target) || null : null;
+  }
+  static getOrCreateInstance(element, options) {
+    return _ConsentManager.getInstance(element) || new _ConsentManager(element, options);
+  }
+  constructor(element, { reload } = {}) {
+    if (element?.nodeType !== 1 || !element.matches("[data-consent]") || !element.id) {
+      throw new TypeError("ConsentManager requires a named [data-consent] element.");
+    }
+    const existing = instances10.get(element);
+    if (existing) return existing;
+    this._element = element;
+    this._document = element.ownerDocument;
+    if (documents.has(this._document)) {
+      throw new TypeError("ConsentManager allows one consent card per document.");
+    }
+    this._window = this._document.defaultView;
+    const source = element.querySelector("script[data-consent-config]");
+    if (!source) throw new TypeError("ConsentManager requires a [data-consent-config] script.");
+    this._config = JSON.parse(source.textContent);
+    this._cookie = { name: "moo_consent", days: 365, ...this._config.cookie || {} };
+    this._categories = this._config.categories || [];
+    this._optional = this._categories.filter((category) => !category.required).map((category) => category.id);
+    this._reload = reload || (() => this._window.location.reload());
+    this._waiting = /* @__PURE__ */ new Map();
+    this._listeners = [];
+    this._trapping = false;
+    this._returnFocus = null;
+    const record = this._read();
+    this._valid = Boolean(record);
+    this._choices = this._normalize(record ? record.c : {});
+    const control = (suffix) => this._document.getElementById(`${element.id}-${suffix}`);
+    const actions = [
+      [control("accept"), () => this.acceptAll()],
+      [control("decline"), () => this.declineAll()],
+      [control("save"), () => this.save(this._switchChoices(), "save")]
+    ];
+    for (const [button, action] of actions) {
+      if (button) this._listen(button, "click", action);
+    }
+    this._listen(this._document, "click", (event) => this._onDocumentClick(event));
+    this._listen(element, "keydown", (event) => this._onKeydown(event));
+    instances10.set(element, this);
+    documents.set(this._document, this);
+    this.activate(this._document);
+    if (!this._valid) this._show();
+    this.ready = Promise.resolve(this);
+    queueMicrotask(() => this._emit("ready", { choices: this.choices, valid: this._valid, revision: this.revision }));
+  }
+  get revision() {
+    return String(this._config.revision);
+  }
+  get valid() {
+    return this._valid;
+  }
+  get choices() {
+    return { ...this._choices };
+  }
+  get isOpen() {
+    return !this._element.hidden;
+  }
+  granted(id) {
+    const category = this._categories.find((entry) => entry.id === id);
+    if (!category) return false;
+    return category.required ? true : this._valid && this._choices[id] === true;
+  }
+  /** Runs callback now if granted, otherwise on grant. Returns an unsubscribe function. */
+  whenGranted(id, callback) {
+    if (this.granted(id)) {
+      this._run(callback);
+      return () => {
+      };
+    }
+    if (!this._waiting.has(id)) this._waiting.set(id, /* @__PURE__ */ new Set());
+    this._waiting.get(id).add(callback);
+    return () => this._waiting.get(id)?.delete(callback);
+  }
+  acceptAll() {
+    return this.save(Object.fromEntries(this._optional.map((id) => [id, true])), "accept-all");
+  }
+  declineAll() {
+    return this.save({}, "decline");
+  }
+  grant(id) {
+    return this.save({ ...this._choices, [id]: true }, "grant");
+  }
+  deny(id) {
+    return this.save({ ...this._choices, [id]: false }, "deny");
+  }
+  /** Stores the choice; optional categories not named become false. */
+  save(choices, source = "save") {
+    const previous = this._valid ? this.choices : this._normalize({});
+    const wasValid = this._valid;
+    const next = this._normalize(choices);
+    this._write(next);
+    this._valid = true;
+    this._choices = next;
+    const granted = this._optional.filter((id) => next[id] && !previous[id]);
+    const revoked = wasValid ? this._optional.filter((id) => previous[id] && !next[id]) : [];
+    this.close();
+    this.activate(this._document);
+    for (const id of granted) {
+      const waiting = this._waiting.get(id);
+      this._waiting.delete(id);
+      waiting?.forEach((callback) => this._run(callback));
+    }
+    this._emit("change", { choices: this.choices, previous, granted, revoked, source });
+    if (revoked.length) {
+      revoked.forEach((id) => this._forget(id));
+      this._reload();
+    }
+    return this.choices;
+  }
+  /** Opens the card with the stored choices; traps focus until closed. */
+  open(trigger = null) {
+    this._returnFocus = trigger;
+    this._trapping = true;
+    this._show();
+    this._document.getElementById(`${this._element.id}-title`)?.focus({ preventScroll: true });
+    this._emit("open", {});
+  }
+  /** Hides the card; it stays open while no valid choice exists. */
+  close() {
+    if (!this._valid) return false;
+    const wasOpen = this.isOpen;
+    const returnFocus = this._trapping ? this._returnFocus : null;
+    this._element.hidden = true;
+    this._trapping = false;
+    this._returnFocus = null;
+    if (returnFocus?.isConnected) returnFocus.focus({ preventScroll: true });
+    if (wasOpen) this._emit("close", {});
+    return true;
+  }
+  /** Activates gated elements under root whose category is granted. */
+  activate(root = this._document) {
+    this._activateWhere(root, (id) => this.granted(id));
+  }
+  dispose() {
+    if (instances10.get(this._element) !== this) return;
+    this._listeners.forEach(([target, type, handler]) => target.removeEventListener(type, handler));
+    this._listeners = [];
+    this._waiting.clear();
+    instances10.delete(this._element);
+    documents.delete(this._document);
+  }
+  // A failing site callback must not stop the rest of a save, such as the
+  // cleanup and reload after a withdrawal; the error is still reported.
+  _run(callback) {
+    try {
+      callback(this);
+    } catch (error) {
+      if (typeof this._window.reportError === "function") this._window.reportError(error);
+      else this._window.console?.error(error);
+    }
+  }
+  _activateWhere(root, allowed) {
+    for (const element of root.querySelectorAll("[data-consent-category]")) {
+      if (allowed(element.getAttribute("data-consent-category"))) this._activateElement(element);
+    }
+    for (const placeholder of root.querySelectorAll("[data-consent-placeholder]")) {
+      if (allowed(placeholder.getAttribute("data-consent-placeholder"))) placeholder.hidden = true;
+    }
+  }
+  _listen(target, type, handler) {
+    target.addEventListener(type, handler);
+    this._listeners.push([target, type, handler]);
+  }
+  _emit(name, detail) {
+    this._document.dispatchEvent(new this._window.CustomEvent(`moo:consent:${name}`, { bubbles: true, detail }));
+  }
+  _normalize(choices) {
+    return Object.fromEntries(this._optional.map((id) => [id, choices?.[id] === true || choices?.[id] === 1]));
+  }
+  _switch(id) {
+    return this._document.getElementById(`${this._element.id}-category-${id}`);
+  }
+  _switchChoices() {
+    return Object.fromEntries(this._optional.map((id) => [id, Boolean(this._switch(id)?.checked)]));
+  }
+  _show() {
+    for (const id of this._optional) {
+      const input = this._switch(id);
+      if (input) input.checked = this.granted(id);
+    }
+    this._element.hidden = false;
+  }
+  _read() {
+    const prefix = `${this._cookie.name}=`;
+    const raw = this._document.cookie.split("; ").find((part) => part.startsWith(prefix));
+    if (!raw) return null;
+    try {
+      const record = JSON.parse(decodeURIComponent(raw.slice(prefix.length)));
+      const age = Date.now() / 1e3 - Number(record.t);
+      if (record.v !== RECORD_VERSION || record.r !== this.revision) return null;
+      if (!(age >= 0 && age < this._cookie.days * DAY_SECONDS)) return null;
+      return record;
+    } catch {
+      return null;
+    }
+  }
+  _write(choices) {
+    const record = {
+      v: RECORD_VERSION,
+      r: this.revision,
+      t: Math.floor(Date.now() / 1e3),
+      c: Object.fromEntries(Object.entries(choices).map(([id, value]) => [id, value ? 1 : 0]))
+    };
+    const secure = this._window.location.protocol === "https:" ? "; Secure" : "";
+    this._document.cookie = `${this._cookie.name}=${encodeURIComponent(JSON.stringify(record))}; Path=/; Max-Age=${this._cookie.days * DAY_SECONDS}; SameSite=Lax${secure}`;
+  }
+  _forget(id) {
+    const category = this._categories.find((entry) => entry.id === id);
+    const host = this._window.location.hostname;
+    const parts = host.split(".");
+    const domains = [""];
+    for (let index = 0; index < parts.length - 1; index += 1) domains.push(`; Domain=${parts.slice(index).join(".")}`);
+    const cookieNames = this._document.cookie.split("; ").map((part) => part.split("=")[0]).filter(Boolean);
+    for (const item of category?.storage || []) {
+      if (item.type === "cookie") {
+        for (const name of cookieNames.filter((candidate) => matches(item.name, candidate))) {
+          for (const domain of domains) this._document.cookie = `${name}=; Path=/; Max-Age=0${domain}`;
+        }
+      } else {
+        try {
+          const storage = item.type === "local" ? this._window.localStorage : this._window.sessionStorage;
+          Object.keys(storage).filter((key) => matches(item.name, key)).forEach((key) => storage.removeItem(key));
+        } catch {
+        }
+      }
+    }
+  }
+  _activateElement(element) {
+    if (element.hasAttribute("data-consent-active")) return;
+    const declared = element.getAttribute("data-consent-src");
+    const src = webSource(declared, this._document.baseURI);
+    if (declared && !src) return;
+    if (element.localName === "script") {
+      const script = this._document.createElement("script");
+      for (const { name, value } of element.attributes) {
+        if (name !== "type" && !name.startsWith("data-consent-")) script.setAttribute(name, value);
+      }
+      const type = element.getAttribute("data-consent-type");
+      if (type) script.type = type;
+      if (src) script.src = src;
+      else script.textContent = element.textContent;
+      script.setAttribute("data-consent-category", element.getAttribute("data-consent-category"));
+      script.setAttribute("data-consent-active", "");
+      element.replaceWith(script);
+      return;
+    }
+    element.setAttribute("data-consent-active", "");
+    if (src) element.setAttribute("src", src);
+    element.hidden = false;
+  }
+  _onDocumentClick(event) {
+    const control = event.target.closest?.("[data-consent-open], [data-consent-grant]");
+    if (!control || control.matches(":disabled")) return;
+    if (control.hasAttribute("data-consent-open")) {
+      if (control.getAttribute("data-consent-open") !== this._element.id) return;
+      event.preventDefault();
+      this.open(control);
+      return;
+    }
+    const id = control.getAttribute("data-consent-grant");
+    if (!this._categories.some((category) => category.id === id)) return;
+    event.preventDefault();
+    const placeholder = control.closest("[data-consent-placeholder]");
+    const scope = control.closest("[data-consent-embed]") || placeholder?.parentElement;
+    if (placeholder?.querySelector("[data-consent-remember]")?.checked || !scope) {
+      this.grant(id);
+    } else {
+      this._activateWhere(scope, (category) => category === id);
+    }
+  }
+  _onKeydown(event) {
+    if (!this._trapping) return;
+    if (event.key === "Escape") {
+      if (this.close()) event.preventDefault();
+      return;
+    }
+    if (event.key !== "Tab") return;
+    const focusable = Array.from(this._element.querySelectorAll(FOCUSABLE)).filter((control) => !control.matches(":disabled") && control.getClientRects().length > 0);
+    if (!focusable.length) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = this._document.activeElement;
+    if (event.shiftKey && (active === first || !this._element.contains(active) || active.id === `${this._element.id}-title`)) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+};
+
 // src/js/moo-ui.js
 import PasswordRequirements from "./password-requirements.js";
 async function loadChart() {
@@ -4842,6 +5160,7 @@ var MooUI = {
   PasswordRequirements,
   FloatingPanel,
   ImageGallery,
+  ConsentManager,
   loadChart,
   Combobox,
   ContextMenu,
@@ -4858,6 +5177,7 @@ var MooUI = {
 var moo_ui_default = MooUI;
 export {
   Combobox,
+  ConsentManager,
   ContextMenu,
   DataTable,
   MooDatepicker as Datepicker,