@tillsc/progressive-web-components 0.1.0 → 0.1.2

package/dist/zone-transfer.js

@@ -0,0 +1,315 @@
+// src/core/pwc-element.js
+var PwcElement = class extends HTMLElement {
+  /**
+   * List of DOM event types to bind on the host element.
+   * Subclasses may override.
+   *
+   * Example:
+   *   static events = ["click", "input"];
+   */
+  static events = [];
+  static registerCss(cssText) {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(cssText);
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+  }
+  connectedCallback() {
+    if (this._connected) return;
+    this._connected = true;
+    this._bindEvents();
+  }
+  disconnectedCallback() {
+    if (!this._connected) return;
+    this._connected = false;
+    this._unbindEvents();
+    this.onDisconnect();
+  }
+  /**
+   * Optional cleanup hook for subclasses.
+   */
+  onDisconnect() {
+  }
+  /**
+   * Bind declared events using the handleEvent pattern.
+   */
+  _bindEvents() {
+    const events = this.constructor.events ?? [];
+    for (const type of events) {
+      this.addEventListener(type, this);
+    }
+  }
+  /**
+   * Unbind all previously declared events.
+   */
+  _unbindEvents() {
+    const events = this.constructor.events ?? [];
+    for (const type of events) {
+      this.removeEventListener(type, this);
+    }
+  }
+  /**
+   * Default event handler.
+   * Subclasses are expected to override this method
+   * and route events as needed.
+   */
+  handleEvent(_event) {
+  }
+};
+
+// src/core/pwc-children-observer-element.js
+var PwcChildrenObserverElement = class extends PwcElement {
+  static observeMode = "children";
+  // "children" | "tree"
+  connectedCallback() {
+    if (this._connected) return;
+    super.connectedCallback();
+    this._startChildrenObserver();
+  }
+  disconnectedCallback() {
+    this._stopChildrenObserver();
+    super.disconnectedCallback();
+  }
+  onChildrenChanged(_mutations) {
+  }
+  /** Run fn() without triggering onChildrenChanged for the resulting DOM mutations. */
+  _withoutChildrenChangedNotification(fn) {
+    fn();
+    this._childrenObserver?.takeRecords();
+  }
+  _startChildrenObserver() {
+    const mode = this.constructor.observeMode || "children";
+    const subtree = mode === "tree";
+    this._childrenObserver = new MutationObserver((mutations) => {
+      if (!this._connected) return;
+      this.onChildrenChanged(mutations);
+    });
+    this._childrenObserver.observe(this, { childList: true, subtree });
+    this.onChildrenChanged([]);
+  }
+  _stopChildrenObserver() {
+    if (!this._childrenObserver) return;
+    this._childrenObserver.disconnect();
+    this._childrenObserver = null;
+  }
+};
+
+// src/core/utils.js
+function defineOnce(name, classDef) {
+  if (customElements.get(name)) return;
+  customElements.define(name, classDef);
+}
+
+// src/zone-transfer/zone-transfer.js
+var PwcZoneTransfer = class extends PwcChildrenObserverElement {
+  static events = ["dragstart", "dragover", "drop", "dragend", "keydown"];
+  static observeMode = "tree";
+  static zoneSelector = "pwc-zone-transfer-zone, [data-pwc-zone]";
+  static itemSelector = "pwc-zone-transfer-item, [data-pwc-item]";
+  static handleSelector = "pwc-zone-transfer-handle, [data-pwc-handle]";
+  onChildrenChanged() {
+    const items = this._items();
+    for (const item of items) {
+      if (!item.hasAttribute("draggable")) item.setAttribute("draggable", "true");
+      if (!item.hasAttribute("tabindex")) item.tabIndex = -1;
+      if (!item.hasAttribute("role")) item.setAttribute("role", "option");
+    }
+    for (const zone of this._zones()) {
+      if (!zone.hasAttribute("role")) zone.setAttribute("role", "listbox");
+      if (!zone.hasAttribute("tabindex")) zone.tabIndex = -1;
+    }
+    const active = items.find((it) => it.tabIndex === 0) || items[0] || null;
+    for (const it of items) it.tabIndex = it === active ? 0 : -1;
+  }
+  handleEvent(e) {
+    if (e.type === "dragstart") return this._onDragStart(e);
+    if (e.type === "dragover") return this._onDragOver(e);
+    if (e.type === "drop") return this._onDrop(e);
+    if (e.type === "dragend") return this._onDragEnd();
+    if (e.type === "keydown") return this._onKeyDown(e);
+  }
+  _zones() {
+    return Array.from(this.querySelectorAll(this.constructor.zoneSelector));
+  }
+  _items(zoneEl) {
+    return Array.from((zoneEl || this).querySelectorAll(this.constructor.itemSelector));
+  }
+  _onDragStart(e) {
+    const item = this._closestItem(e.target);
+    if (!item) return;
+    if (item.querySelector(this.constructor.handleSelector) && !this._closestHandle(e.target)) {
+      e.preventDefault();
+      return;
+    }
+    const zone = this._closestZone(item);
+    if (!zone) return;
+    this._drag = { item, fromZone: zone };
+    if (e.dataTransfer) e.dataTransfer.effectAllowed = "move";
+    item.classList.add("pwc-zone-transfer-dragging");
+    this._ensurePlaceholder(item);
+  }
+  _onDragOver(e) {
+    if (!this._drag?.item) return;
+    const zone = this._closestZone(e.target);
+    if (!zone) return;
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+    this._ensurePlaceholder(this._drag.item);
+    const beforeEl = this._beforeFromPointer(zone, e, this._drag.item);
+    this._movePlaceholder(zone, beforeEl);
+    this._drag.overZone = zone;
+    this._drag.overMethod = beforeEl ? "before" : "append";
+  }
+  _onDrop(e) {
+    if (!this._drag?.item) return;
+    const zone = this._closestZone(e.target);
+    if (!zone) return;
+    e.preventDefault();
+    this._applyMove(this._drag.item, this._drag.fromZone, zone, this._drag.overMethod || "append");
+    this._clearPlaceholder();
+  }
+  _onDragEnd() {
+    if (this._drag?.item) this._drag.item.classList.remove("pwc-zone-transfer-dragging");
+    this._drag = null;
+    this._clearPlaceholder();
+  }
+  _onKeyDown(e) {
+    if (e.target?.closest?.("input,textarea,select,button,[contenteditable]")) return;
+    const item = this._closestItem(e.target);
+    if (!item) return;
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      e.preventDefault();
+      const dir = e.key === "ArrowDown" ? 1 : -1;
+      if (e.ctrlKey || e.metaKey) this._keyboardReorder(item, dir);
+      else this._focusSibling(item, dir);
+      return;
+    }
+    const zone = this._zoneByHotkey(e.key);
+    if (!zone) return;
+    e.preventDefault();
+    this._keyboardMoveToZone(item, zone);
+  }
+  _keyboardReorder(item, dir) {
+    const zone = this._closestZone(item);
+    if (!zone) return;
+    const items = this._items(zone);
+    const i = items.indexOf(item);
+    if (i < 0) return;
+    const j = i + dir;
+    if (j < 0 || j >= items.length) return;
+    zone.insertBefore(item, dir > 0 ? items[j].nextElementSibling : items[j]);
+    for (const it of this._items()) it.tabIndex = it === item ? 0 : -1;
+    item.focus();
+    this._emitChange(item, zone, zone, this._indexInZone(item, zone), "before");
+  }
+  _keyboardMoveToZone(item, zone) {
+    const fromZone = this._closestZone(item);
+    if (!fromZone || fromZone === zone) return;
+    zone.appendChild(item);
+    for (const it of this._items()) it.tabIndex = it === item ? 0 : -1;
+    item.focus();
+    this._emitChange(item, fromZone, zone, this._indexInZone(item, zone), "append");
+  }
+  _zoneByHotkey(key) {
+    const zones = this._zones();
+    if (!zones.some((z) => z.hasAttribute("data-pwc-zone-key"))) return null;
+    return zones.find((z) => z.getAttribute("data-pwc-zone-key") === key) || null;
+  }
+  _emitChange(item, fromZone, toZone, index, method) {
+    this.dispatchEvent(
+      new CustomEvent("pwc-zone-transfer:change", {
+        bubbles: true,
+        detail: {
+          itemId: this._itemId(item),
+          fromZone: this._zoneName(fromZone),
+          toZone: this._zoneName(toZone),
+          index,
+          method
+        }
+      })
+    );
+  }
+  _applyMove(item, fromZone, toZone, method) {
+    if (this._placeholder?.parentNode === toZone) toZone.insertBefore(item, this._placeholder);
+    else toZone.appendChild(item);
+    for (const it of this._items()) it.tabIndex = it === item ? 0 : -1;
+    this._emitChange(item, fromZone, toZone, this._indexInZone(item, toZone), method);
+  }
+  _focusSibling(item, dir) {
+    const zone = this._closestZone(item);
+    if (!zone) return;
+    const items = this._items(zone);
+    const i = items.indexOf(item);
+    if (i < 0) return;
+    const next = items[i + dir];
+    if (!next) return;
+    item.tabIndex = -1;
+    next.tabIndex = 0;
+    next.focus();
+  }
+  _ensurePlaceholder(itemEl) {
+    if (this._placeholder?.isConnected) return;
+    this._placeholder = document.createElement("div");
+    this._placeholder.className = "pwc-zone-transfer-placeholder";
+    this._placeholder.setAttribute("aria-hidden", "true");
+    this._placeholder.style.height = `${Math.max(8, Math.round(itemEl.getBoundingClientRect().height || 0))}px`;
+  }
+  _movePlaceholder(zoneEl, beforeEl) {
+    if (!this._placeholder) return;
+    if (beforeEl && beforeEl.parentNode === zoneEl) zoneEl.insertBefore(this._placeholder, beforeEl);
+    else zoneEl.appendChild(this._placeholder);
+  }
+  _clearPlaceholder() {
+    if (this._placeholder?.parentNode) this._placeholder.parentNode.removeChild(this._placeholder);
+  }
+  _beforeFromPointer(zoneEl, e, draggedItem) {
+    const y = e.clientY;
+    for (const it of this._items(zoneEl)) {
+      if (it === draggedItem || it === this._placeholder) continue;
+      const r = it.getBoundingClientRect();
+      if (y <= r.top + r.height / 2) return it;
+    }
+    return null;
+  }
+  _closestZone(node) {
+    if (!(node instanceof Element)) return null;
+    const zone = node.closest(this.constructor.zoneSelector);
+    return zone && this.contains(zone) ? zone : null;
+  }
+  _closestItem(node) {
+    if (!(node instanceof Element)) return null;
+    const item = node.closest(this.constructor.itemSelector);
+    return item && this.contains(item) ? item : null;
+  }
+  _closestHandle(node) {
+    if (!(node instanceof Element)) return null;
+    const handle = node.closest(this.constructor.handleSelector);
+    return handle && this.contains(handle) ? handle : null;
+  }
+  _zoneName(zoneEl) {
+    if (!zoneEl) return "";
+    return zoneEl.tagName.toLowerCase() === "pwc-zone-transfer-zone" ? zoneEl.getAttribute("name") || "" : zoneEl.getAttribute("data-pwc-zone") || "";
+  }
+  _itemId(itemEl) {
+    if (!itemEl) return "";
+    return itemEl.tagName.toLowerCase() === "pwc-zone-transfer-item" ? itemEl.getAttribute("id") || itemEl.getAttribute("data-id") || "" : itemEl.getAttribute("data-pwc-item") || itemEl.getAttribute("id") || "";
+  }
+  _indexInZone(itemEl, zoneEl) {
+    return Math.max(0, this._items(zoneEl).indexOf(itemEl));
+  }
+};
+function define() {
+  defineOnce("pwc-zone-transfer", PwcZoneTransfer);
+}
+
+// src/zone-transfer/zone-transfer.css
+var zone_transfer_default = 'pwc-zone-transfer [draggable="true"] {\n    cursor: grab;\n}\n\npwc-zone-transfer .pwc-zone-transfer-dragging {\n    cursor: grabbing;\n    opacity: 0.6;\n}\n\npwc-zone-transfer .pwc-zone-transfer-placeholder {\n    opacity: 0.3;\n}';
+
+// src/zone-transfer/index.js
+function register() {
+  PwcZoneTransfer.registerCss(zone_transfer_default);
+  define();
+}
+register();
+export {
+  register
+};

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@tillsc/progressive-web-components",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Server-first web components.",
   "type": "module",
   "license": "MIT",
-  "files": [
-    "dist"
-  ],
+  "publishConfig": { "access": "public" },
+  "files": [ "dist", "src"],
   "exports": {
     "./all": "./dist/all.js",
     "./all-bs5": "./dist/all-bs5.js",
@@ -15,7 +14,8 @@
     "./modal-dialog": "./dist/modal-dialog.js",
     "./modal-dialog-bs5": "./dist/modal-dialog-bs5.js",
     "./multiselect-dual-list": "./dist/multiselect-dual-list.js",
-    "./multiselect-dual-list-bs5": "./dist/multiselect-dual-list-bs5.js"
+    "./multiselect-dual-list-bs5": "./dist/multiselect-dual-list-bs5.js",
+    "./zone-transfer": "./dist/zone-transfer.js"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/core/pwc-children-observer-element.js

@@ -0,0 +1,53 @@
+import {PwcElement} from "./pwc-element.js";
+
+/**
+ * Children observer element.
+ *
+ * Calls onChildrenChanged() on connect and on every subsequent child mutation.
+ *
+ * Modes (static observeMode):
+ * - "children": direct children only
+ * - "tree": full subtree
+ */
+export class PwcChildrenObserverElement extends PwcElement {
+  static observeMode = "children"; // "children" | "tree"
+
+  connectedCallback() {
+    if (this._connected) return;
+    super.connectedCallback();
+    this._startChildrenObserver();
+  }
+
+  disconnectedCallback() {
+    this._stopChildrenObserver();
+    super.disconnectedCallback();
+  }
+
+  onChildrenChanged(_mutations) {}
+
+  /** Run fn() without triggering onChildrenChanged for the resulting DOM mutations. */
+  _withoutChildrenChangedNotification(fn) {
+    fn();
+    this._childrenObserver?.takeRecords();
+  }
+
+  _startChildrenObserver() {
+    const mode = this.constructor.observeMode || "children";
+    const subtree = mode === "tree";
+
+    this._childrenObserver = new MutationObserver((mutations) => {
+      if (!this._connected) return;
+      this.onChildrenChanged(mutations);
+    });
+
+    this._childrenObserver.observe(this, { childList: true, subtree });
+
+    this.onChildrenChanged([]);
+  }
+
+  _stopChildrenObserver() {
+    if (!this._childrenObserver) return;
+    this._childrenObserver.disconnect();
+    this._childrenObserver = null;
+  }
+}

package/src/core/pwc-element.js

@@ -0,0 +1,76 @@
+/**
+ * Base class for progressive-web-components.
+ *
+ * Responsibilities:
+ * - Ensure idempotent lifecycle handling
+ * - Declaratively bind and unbind host-level DOM events
+ * - Provide a consistent cleanup hook
+ *
+ * This is intentionally minimal.
+ * No rendering, no templating, no magic.
+ */
+export class PwcElement extends HTMLElement {
+  /**
+   * List of DOM event types to bind on the host element.
+   * Subclasses may override.
+   *
+   * Example:
+   *   static events = ["click", "input"];
+   */
+  static events = [];
+
+  static registerCss(cssText) {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(cssText);
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+  }
+
+  connectedCallback() {
+    if (this._connected) return;
+    this._connected = true;
+
+    this._bindEvents();
+  }
+
+  disconnectedCallback() {
+    if (!this._connected) return;
+    this._connected = false;
+
+    this._unbindEvents();
+    this.onDisconnect();
+  }
+
+  /**
+   * Optional cleanup hook for subclasses.
+   */
+  onDisconnect() {}
+
+  /**
+   * Bind declared events using the handleEvent pattern.
+   */
+  _bindEvents() {
+    const events = this.constructor.events ?? [];
+    for (const type of events) {
+      this.addEventListener(type, this);
+    }
+  }
+
+  /**
+   * Unbind all previously declared events.
+   */
+  _unbindEvents() {
+    const events = this.constructor.events ?? [];
+    for (const type of events) {
+      this.removeEventListener(type, this);
+    }
+  }
+
+  /**
+   * Default event handler.
+   * Subclasses are expected to override this method
+   * and route events as needed.
+   */
+  handleEvent(_event) {
+    // intentionally empty
+  }
+}

package/src/core/pwc-sentinel-init-element.js

@@ -0,0 +1,56 @@
+import {PwcElement} from "./pwc-element.js";
+
+/**
+ * Sentinel init element.
+ *
+ * Calls onConnect() once per connection, when a sentinel appears in the light DOM.
+ * Uses a MutationObserver only until ready.
+ *
+ * Subclasses may override sentinelSelector().
+ */
+export class PwcSentinelInitElement extends PwcElement {
+  static sentinelSelector = "pwc-sentinel, [data-pwc-sentinel]";
+
+  connectedCallback() {
+    if (this._connected) return;
+    super.connectedCallback();
+
+    if (this._hasSentinel()) {
+      this.onConnect();
+      return;
+    }
+
+    this._sentinelObserver = new MutationObserver(() => {
+      if (!this._connected) return;
+      if (!this._hasSentinel()) return;
+
+      this._stopSentinelObserver();
+      this.onConnect();
+    });
+
+    // subtree:true so the sentinel can be nested (common with templates/partials)
+    this._sentinelObserver.observe(this, { childList: true, subtree: true });
+  }
+
+  disconnectedCallback() {
+    this._stopSentinelObserver();
+    super.disconnectedCallback();
+  }
+
+  /**
+   * Hook for subclasses.
+   * Called once per connection, when the sentinel is present.
+   */
+  onConnect() {}
+
+  _hasSentinel() {
+    const selector = this.constructor.sentinelSelector || PwcSentinelInitElement.sentinelSelector;
+    return Boolean(this.querySelector(selector));
+  }
+
+  _stopSentinelObserver() {
+    if (!this._sentinelObserver) return;
+    this._sentinelObserver.disconnect();
+    this._sentinelObserver = null;
+  }
+}

package/src/core/pwc-simple-init-element.js

@@ -0,0 +1,25 @@
+import {PwcElement} from "./pwc-element.js";
+
+/**
+ * Simple init element.
+ *
+ * Calls onConnect() once per connection, deferred to a microtask.
+ * Use this when a microtask is sufficient to access server-rendered children.
+ */
+export class PwcSimpleInitElement extends PwcElement {
+  connectedCallback() {
+    if (this._connected) return;
+    super.connectedCallback();
+
+    queueMicrotask(() => {
+      if (!this._connected) return;
+      this.onConnect();
+    });
+  }
+
+  /**
+   * Hook for subclasses.
+   * Called once per connection, after microtask deferral.
+   */
+  onConnect() {}
+}

package/src/core/utils.js

@@ -0,0 +1,9 @@
+export function ensureId(el, prefix = "pwc") {
+  if (!el.id) el.id = `${prefix}-${Math.random().toString(36).slice(2)}`;
+  return el.id;
+}
+
+export function defineOnce(name, classDef) {
+  if (customElements.get(name)) return;
+  customElements.define(name, classDef);
+}

package/src/dialog-opener/INTERNALS.md

@@ -0,0 +1,47 @@
+# Dialog-Opener — Internals
+
+## Architecture
+
+- `findOrCreateDialog(src)` — creates/reuses a `<pwc-modal-dialog>` (or `-bs5`), opens it,
+  places the iframe, and wires up the `this.dialog` / `this.modal` adapter.
+
+The base class never touches DOM rendering directly. Variants own the dialog creation and
+provide a uniform adapter interface (`this.modal.show()` / `this.modal.hide()`).
+
+## Flow: link click to dialog
+
+1. Click on an `<a>` inside the component is intercepted (`handleEvent`)
+2. `prepareIFrameLink()` builds the iframe URL:
+   - collects `input` values as `default` query param
+   - appends `_layout=false`
+3. `findOrCreateDialog(src)` (variant hook) creates the modal and iframe
+4. `enhanceIFrame()` waits for the iframe `load` event, then calls `iFrameLoad()`
+5. `iFrameLoad()` checks the iframe URL:
+   - If `dialog_finished_with` is present → close dialog, trigger reload or navigation
+   - Otherwise → run `moveElementsToOuterActions()`, show iframe
+
+## Move-out mechanism
+
+When `move-out` is set, buttons are **cloned** from the iframe document into the dialog footer.
+The original buttons are hidden. Clicking a cloned button triggers `click()` on the original
+inside the iframe, then hides the iframe (to show a loading state while the form submits).
+
+## Local reload
+
+When the dialog completes and `local-reload` is set:
+
+1. The completion URL is fetched via `fetch()`
+2. The response HTML is parsed with `DOMParser`
+3. The element matching `this.id` is extracted from the response
+4. Its children replace the current component's children
+5. Optionally: `history.pushState` / `replaceState` updates the URL
+6. Optionally: inline `<script>` tags are re-executed (cloned into new elements)
+7. A `pwc-dialog-opener:local-reload` custom event is dispatched
+
+If any step fails, it falls back to full page navigation.
+
+## Modal adapter pattern
+
+The base class expects `this.modal` with `.show()` and `.hide()`. Since both variants use
+`<pwc-modal-dialog>` (which is already open by the time `findOrCreateDialog` returns),
+`show()` is a no-op and `hide()` delegates to `modalDialog.close()`.