@teipublisher/pb-components 2.26.1-next.2 → 3.0.0-next-4.1

package/src/authority/reconciliation.js

@@ -1,5 +1,4 @@
-/* eslint-disable class-methods-use-this */
-import { Registry } from './registry.js'
+import { Registry } from './registry.js';
 
 // Todo:
 // - strings <- types
@@ -7,26 +6,28 @@ import { Registry } from './registry.js'
 // - test with other providers, inside custom connector
 // - documentation
 
-async function getServiceManifest (endpoint) {
-	const response = await fetch(endpoint);
-	const data = await response.json();
+async function getServiceManifest(endpoint) {
+  const response = await fetch(endpoint);
+  const data = await response.json();
   return data;
 }
 
 export class ReconciliationService extends Registry {
   constructor(configElem) {
-    super(configElem)
+    super(configElem);
     this.endpoint = configElem.getAttribute('endpoint');
     this.debug = configElem.getAttribute('debug');
-    getServiceManifest(this.endpoint).then((result) => {
+    getServiceManifest(this.endpoint).then(result => {
       this.ORConfig = result;
       if (this.debug) {
         console.log(
-          'OpenReconcile connector for register \'%s\' at endpoint <%s>. Using config: %o',
-          this._register, this.endpoint, this.ORConfig
+          "OpenReconcile connector for register '%s' at endpoint <%s>. Using config: %o",
+          this._register,
+          this.endpoint,
+          this.ORConfig,
         );
       }
-    })
+    });
   }
 
   /**
@@ -37,57 +38,54 @@ export class ReconciliationService extends Registry {
   async query(key) {
     const results = [];
     const paramsObj = {
-                        q1: {
-                          query: key
-                        }
-                      };
+      q1: {
+        query: key,
+      },
+    };
 
-    return new Promise((resolve) => {
-        fetch(this.endpoint, {
-            method: 'POST',
-            headers: {
-              'Accept': 'application/json',
-              'Content-Type': 'application/x-www-form-urlencoded'
-            },
-            body: "queries=".concat(JSON.stringify(paramsObj))
-        })
-        .then((response) => response.json())
-        .then((json) => {
-            json.q1.result.forEach((item) => {
-              if (this.ORConfig.view) {
-                this.view = this.ORConfig.view.url.replace('{{id}}', item.id);
-              } else {
-                this.view = item.id;
-              }
-              if (item.description) {
-                this.description = item.description;
-              } else if (item.type) {
-                this.description = item.type.map(t => t.name.toString() ).join(', ')
-              } else {
-                this.description = ""
-              }
-              const result = {
-                  register: this._register,
-                  id: (this._prefix ? `${this._prefix}-${item.id}` : item.id),
-                  label: item.name,
-                  link: this.view,
-                  details: this.description,
-                  provider: 'OpenReconcile'
-              };
-              results.push(result);
-            });
-            if (this.debug) {
-              console.log(
-                  'OpenReconcile results: %o',
-                  results
-              );
+    return new Promise(resolve => {
+      fetch(this.endpoint, {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: 'queries='.concat(JSON.stringify(paramsObj)),
+      })
+        .then(response => response.json())
+        .then(json => {
+          json.q1.result.forEach(item => {
+            if (this.ORConfig.view) {
+              this.view = this.ORConfig.view.url.replace('{{id}}', item.id);
+            } else {
+              this.view = item.id;
             }
-            resolve({
-                totalItems: json.q1.result.length,
-                items: results,
-            });
-        })
-    })
+            if (item.description) {
+              this.description = item.description;
+            } else if (item.type) {
+              this.description = item.type.map(t => t.name.toString()).join(', ');
+            } else {
+              this.description = '';
+            }
+            const result = {
+              register: this._register,
+              id: this._prefix ? `${this._prefix}-${item.id}` : item.id,
+              label: item.name,
+              link: this.view,
+              details: this.description,
+              provider: 'OpenReconcile',
+            };
+            results.push(result);
+          });
+          if (this.debug) {
+            console.log('OpenReconcile results: %o', results);
+          }
+          resolve({
+            totalItems: json.q1.result.length,
+            items: results,
+          });
+        });
+    });
   }
 
   /**
@@ -103,7 +101,7 @@ export class ReconciliationService extends Registry {
       return Promise.resolve({});
     }
     if (!this.ORConfig.preview) {
-      container.innerHTML = 'no \'preview\' information in endpoint\'s manifest';
+      container.innerHTML = "no 'preview' information in endpoint's manifest";
       return Promise.resolve();
     }
 
@@ -111,14 +109,14 @@ export class ReconciliationService extends Registry {
       const rawid = this._prefix ? id.substring(this._prefix.length + 1) : id;
       const url = this.ORConfig.preview.url.replace('{{id}}', encodeURIComponent(rawid));
       fetch(url)
-      .then(response => response.text())
-      .then((output) => {
-        container.innerHTML = output;
-        resolve({
-          id: this._prefix ? `${this._prefix}-${rawid}` : rawid
-        });
-      })
-      .catch(() => reject());
+        .then(response => response.text())
+        .then(output => {
+          container.innerHTML = output;
+          resolve({
+            id: this._prefix ? `${this._prefix}-${rawid}` : rawid,
+          });
+        })
+        .catch(() => reject());
     });
   }
 }

package/src/authority/registry.js

@@ -29,11 +29,11 @@ export class Registry {
   set name(name) {
     this._register = name;
   }
-  
+
   get editable() {
     return false;
   }
-  
+
   /**
    * Query the authority and return a RegistryResult.
    *
@@ -69,11 +69,11 @@ export class Registry {
 
   /**
    * Retrieve a raw JSON record for the given key as returned by the endpoint.
-   * 
+   *
    * @param {string} key the key to look up
    * @returns {Promise<any>} promise resolving to the JSON record returned by the endpoint
    */
   async getRecord(key) {
-      return Promise.reject();
+    return Promise.reject();
   }
 }

package/src/docs/demo-utils.js

@@ -0,0 +1,91 @@
+// Shared helpers to make demo hydration consistent across pages
+
+export async function ready(tags = []) {
+  if (!Array.isArray(tags)) tags = [tags];
+  await Promise.all(tags.map(t => customElements.whenDefined(t)));
+}
+
+export function stampIfNeeded(snippet) {
+  if (!snippet) return null;
+  const template = snippet.querySelector('template');
+  if (!template) return snippet;
+  if (!template.dataset.stamped) {
+    const clone = template.content.cloneNode(true);
+    template.dataset.stamped = 'true';
+    snippet.appendChild(clone);
+  }
+  return snippet;
+}
+
+export function firePageReady(detail = {}) {
+  const { endpoint = '.', apiVersion = '1.0.0', template = null } = detail;
+  requestAnimationFrame(() => {
+    document.dispatchEvent(
+      new CustomEvent('pb-page-ready', {
+        detail: { endpoint, apiVersion, template },
+      }),
+    );
+  });
+}
+
+export async function syncPbSelect(host) {
+  if (!host) return;
+  await host.updateComplete;
+  const root = host.shadowRoot;
+  if (!root) return;
+  if (host.hasAttribute('multi')) {
+    const values = Array.isArray(host.values) ? host.values : [];
+    root.querySelectorAll('input[type="checkbox"]').forEach(box => {
+      box.checked = values.includes(box.value);
+    });
+  } else {
+    const sel = root.querySelector('select');
+    if (sel) sel.value = host.value ?? '';
+  }
+  host.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+}
+
+export function wireFormOutput(form, output) {
+  const render = () => {
+    output.textContent = new URLSearchParams(new FormData(form)).toString();
+  };
+  form.addEventListener('submit', ev => {
+    ev.preventDefault();
+    render();
+  });
+  return render;
+}
+
+function findOutput(root, form) {
+  const selector = form.dataset.demoOutput || form.getAttribute('data-demo-output');
+  if (selector) {
+    return root.querySelector(selector) || form.querySelector(selector);
+  }
+  const fallback = form.parentElement;
+  if (fallback) {
+    const sibling = fallback.querySelector('code[id], pre[id], span[id]');
+    if (sibling) return sibling;
+  }
+  return null;
+}
+
+export function autoWireForms(root) {
+  const forms = root.querySelectorAll('form');
+  forms.forEach(form => {
+    if (form.dataset.demoWired) return;
+    const output = findOutput(root, form);
+    if (!output) {
+      form.dataset.demoWired = 'skip';
+      return;
+    }
+    const render = () => {
+      output.textContent = new URLSearchParams(new FormData(form)).toString();
+    };
+    form.addEventListener('submit', ev => {
+      ev.preventDefault();
+      render();
+    });
+    form.dataset.demoWired = 'true';
+    render();
+  });
+}