adp-web-components 0.3.18 → 0.3.19

package/dist/collection/global/lib/overlay.js

@@ -0,0 +1,154 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+/**
+ * Getting an overlay out of whatever container the host page put this component in.
+ *
+ * These components are published to unknown hosts, so an overlay can end up nested in an animated
+ * modal, a slide-up footer, an accordion mid-transition or a virtualised list. Any ancestor with a
+ * `transform`, `filter`, `backdrop-filter`, `perspective`, `contain` or a `will-change` naming one
+ * of them becomes the containing block for `position: fixed`, and the overlay is laid out and
+ * clipped inside that ancestor instead of against the viewport.
+ *
+ * The browser's top layer is the only way out that does not move the element: it paints above every
+ * stacking context, is clipped by no ancestor, and ignores caging ancestors entirely — while the
+ * element stays in its shadow root, so scoped styles, refs and measurements keep working.
+ *
+ * The two flavours are not interchangeable:
+ *
+ *  - `modal` (dialog.showModal) inerts the rest of the page. Right for a claim form, fatal for a
+ *    hover card — it would make every other card unhoverable.
+ *  - `popover` (popover="manual" + showPopover) is non-modal, so the page stays interactive.
+ *
+ * Promotion is not free: the top layer cannot be overridden by a host's z-index, so a host can no
+ * longer place its own toast or nav above us. A modal should outrank those anyway, so it always
+ * promotes. A hover card should not, so it promotes only when staying put would actually clip it.
+ */
+var _a, _b;
+const cagingWillChange = /\b(transform|perspective|filter|backdrop-filter|contain)\b/;
+const cagingContain = /\b(paint|layout|strict|content)\b/;
+const isCagingStyle = (style) => {
+    if (!style)
+        return false;
+    if (style.transform && style.transform !== 'none')
+        return true;
+    if (style.perspective && style.perspective !== 'none')
+        return true;
+    if (style.filter && style.filter !== 'none')
+        return true;
+    const backdropFilter = style.backdropFilter || style.webkitBackdropFilter;
+    if (backdropFilter && backdropFilter !== 'none')
+        return true;
+    if (style.contain && cagingContain.test(style.contain))
+        return true;
+    if (style.willChange && cagingWillChange.test(style.willChange))
+        return true;
+    return false;
+};
+/**
+ * Walks up from the element, stepping out of every shadow root on the way, looking for an ancestor
+ * that would become the containing block for a `position: fixed` child.
+ */
+export const isCaged = (element) => {
+    var _a, _b;
+    if (!element || typeof getComputedStyle !== 'function')
+        return false;
+    let current = element.parentElement;
+    let root = (_a = element.getRootNode) === null || _a === void 0 ? void 0 : _a.call(element);
+    while (true) {
+        if (!current) {
+            // Out of parents: hop through the shadow boundary and keep going up the host's tree.
+            if (!(root instanceof ShadowRoot))
+                return false;
+            current = root.host;
+            root = (_b = current === null || current === void 0 ? void 0 : current.getRootNode) === null || _b === void 0 ? void 0 : _b.call(current);
+            if (!current)
+                return false;
+        }
+        if (isCagingStyle(getComputedStyle(current)))
+            return true;
+        current = current.parentElement;
+    }
+};
+export const supportsModalDialog = typeof HTMLDialogElement !== 'undefined' && typeof ((_a = HTMLDialogElement.prototype) === null || _a === void 0 ? void 0 : _a.showModal) === 'function';
+export const supportsPopover = typeof HTMLElement !== 'undefined' && typeof ((_b = HTMLElement.prototype) === null || _b === void 0 ? void 0 : _b.showPopover) === 'function';
+/**
+ * Shows a modal overlay in the top layer, falling back to the `open` attribute where <dialog> is
+ * unimplemented — WebKit only shipped it in 15.4, which on iOS means Safari, every WKWebView and
+ * every installed PWA on the device. There the overlay renders in place exactly as it did before
+ * the top layer existed: correct, just clippable.
+ *
+ * Returns whether the top layer was actually used, so callers can supply what it would have given
+ * them for free (page inerting, Escape) on the path where it did not.
+ */
+export const openModalOverlay = (dialog) => {
+    if (!dialog || dialog.open)
+        return supportsModalDialog;
+    if (supportsModalDialog) {
+        dialog.showModal();
+        return true;
+    }
+    dialog.setAttribute('open', '');
+    return false;
+};
+export const closeModalOverlay = (dialog) => {
+    if (!dialog)
+        return;
+    if (supportsModalDialog && dialog.open)
+        dialog.close();
+    else
+        dialog.removeAttribute('open');
+};
+/**
+ * Promotes a non-modal overlay, but only when an ancestor would otherwise cage it — so in the
+ * ordinary case the host keeps the ability to stack its own UI above ours.
+ *
+ * The `popover` attribute is added here rather than in markup on purpose: it carries
+ * `[popover]:not(:popover-open) { display: none }`, which would hide an overlay that never gets
+ * promoted, and a set of UA box styles that only need overriding while it is applied.
+ */
+export const promoteOverlayIfCaged = (element) => {
+    if (!element || !supportsPopover || element.hasAttribute('popover'))
+        return false;
+    if (!isCaged(element))
+        return false;
+    element.setAttribute('popover', 'manual');
+    try {
+        element.showPopover();
+        return true;
+    }
+    catch (_a) {
+        // Not connected, or already shown by something else — leave it laid out normally.
+        element.removeAttribute('popover');
+        return false;
+    }
+};
+export const demoteOverlay = (element) => {
+    if (!element || !element.hasAttribute('popover'))
+        return;
+    try {
+        element.hidePopover();
+    }
+    catch (_a) {
+        /* already hidden */
+    }
+    element.removeAttribute('popover');
+};
+/**
+ * Escape handling for the fallback path only. A modal dialog reports Escape as a `cancel` event;
+ * without `showModal` there is no such event, so the key has to be watched directly.
+ *
+ * Capture, deliberately: an overlay that stacks something of its own on top (the claim form's image
+ * viewer) listens on `document`, and a bubble-phase listener on `window` would run *after* that one
+ * had already dismissed it and cleared the state this handler checks — closing both at once.
+ * Capture at `window` runs first, so the inner overlay still owns the key.
+ */
+export const bindEscapeFallback = (handler) => {
+    const listener = (event) => {
+        if (event.key === 'Escape')
+            handler(event);
+    };
+    window.addEventListener('keydown', listener, true);
+    return () => window.removeEventListener('keydown', listener, true);
+};

package/dist/collection/templates/assets/adp-wordmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="103 520 2256 932" role="img" aria-label="ADP"><title>ADP</title><path fill="currentColor" d="m755 1406.8l-249.3-761.5-248.2 761.5v-1.1q-6.8 17-19.2 28.3-11.4 10.2-28.4 10.2-9 0-18.1-1.1-7.9-2.3-17-4.6h1.1q-64.5-20.4-47.5-72.5l258.3-785.3q5.7-18.1 19.3-30.6 14.7-12.5 34-14.7 19.2-3.4 37.4-4.6 18.1-2.2 28.3-2.2 10.2 0 28.3 2.2 18.2 1.2 37.4 3.4 15.9 2.3 30.6 17 15.9 14.8 23.8 29.5 63.5 194.9 128.1 393.2 65.7 197.2 129.2 392.1 15.8 52.1-47.6 72.5-9.1 2.3-17 4.6-6.8 1.1-15.9 1.1-15.9 0-29.5-10.2-12.4-11.3-18.1-28.3zm-164.3-244.8q0 36.3-26.1 62.3-24.9 25-61.2 25-36.2 0-61.1-25-25-26-25-62.3 0-36.3 25-61.2 24.9-26.1 61.1-26.1 36.3 0 61.2 26.1 26.1 24.9 26.1 61.2zm640.3 158.6h154.1q41.9 0 58.9-23.7 17-23.8 17-53.3v-519q0-28.3-17-52.1-17-23.8-58.9-23.8h-265.2l-1.1 738.8q0 24.9-19.3 39.7-19.3 14.7-47.6 14.7-66.8 0-66.8-54.4v-785.3q0-40.8 20.4-54.4 21.5-13.6 50.9-13.6h357q29.5 0 61.2 12.5 31.7 12.4 61.2 31.7h-1.1q29.4 21.5 45.3 56.7 15.8 34 15.8 79.3v538.3q0 91.7-61.1 137.1-29.5 21.5-61.2 34-30.6 11.3-60.1 11.3h-190.4q-19.2 0-30.6-15.9-10.2-15.8-10.2-41.9 0-56.7 48.8-56.7zm938.2-219.8h-156.3q-19.3 0-30.6-14.7-10.2-15.9-10.2-42 0-57.7 47.6-57.7h120.1q41.9 0 58.9-23.8 18.1-23.8 18.1-52.2v-185.8q0-28.3-18.1-52.1-17-23.8-58.9-23.8h-238v739.9q0 54.4-68 54.4-65.7 0-65.7-54.4v-786.4q0-40.8 20.4-54.4 20.4-13.6 49.9-13.6h330.8q28.4 0 60.1 12.5 31.7 12.4 61.2 31.7h-1.1q29.4 21.5 45.3 56.7 15.9 34 15.9 79.3v205.1q0 91.8-61.2 137.1-29.5 21.5-60.1 32.9-30.6 11.3-60.1 11.3z"/></svg>

package/dist/collection/templates/harness-theme.js

@@ -0,0 +1,44 @@
+/**
+ * Shared theme state for the showcase pages.
+ *
+ * Loaded as a plain blocking script in <head> — deliberately not a module. A
+ * module is deferred, which would let the page paint in the wrong theme before
+ * the stored choice is applied.
+ *
+ * The names map onto the daisyUI themes declared in harness.src.css; 'system'
+ * removes the attribute entirely so `prefersdark` takes over.
+ */
+(function () {
+  const KEY = 'adp-harness-theme';
+  const THEMES = { light: 'harness', dark: 'harness-dark' };
+
+  function read() {
+    // Private windows and blocked site data both throw rather than return null.
+    try {
+      return localStorage.getItem(KEY);
+    } catch {
+      return null;
+    }
+  }
+
+  function apply(theme) {
+    const resolved = theme || 'system';
+
+    if (resolved === 'system') delete document.documentElement.dataset.theme;
+    else document.documentElement.dataset.theme = THEMES[resolved] ?? resolved;
+
+    try {
+      localStorage.setItem(KEY, resolved);
+    } catch {
+      // Theme still applies for this page; it just will not survive navigation.
+    }
+  }
+
+  function current() {
+    return read() || 'system';
+  }
+
+  window.harnessTheme = { apply, current };
+
+  apply(current());
+})();

package/dist/collection/templates/harness.js

@@ -0,0 +1,264 @@
+/**
+ * adp-web-components — dev harness controls (Alpine).
+ *
+ * Provides the `harness()` Alpine data factory and stamps the standard rail
+ * markup into any `[data-harness-rail]` element, so a page describes what it is
+ * testing instead of re-implementing the same six controls:
+ *
+ *   <aside class="card border-base-300 bg-base-100 flex flex-col gap-4 border border-dashed p-4"
+ *          data-harness-rail
+ *          x-data="harness({ subject: '#subject', mocks: 'vehicle-lookup' })"></aside>
+ *
+ * A page that needs a different rail just writes its own markup against the same
+ * state — every method below is public.
+ *
+ * Control order is fixed on purpose (R5), and the language control flips page
+ * direction because half of the supported set is RTL (R6). See
+ * .shift/repos/adp/web-components/templates-design-language.md.
+ */
+
+const DEFAULTS = {
+  subject: '#subject',
+  mocks: null,
+  labels: {},
+  languages: ['en', 'ku', 'ar', 'ru'],
+  rtl: ['ar', 'ku'],
+  platforms: [
+    { label: '360', value: '360px' },
+    { label: '414', value: '414px' },
+    { label: '768', value: '768px' },
+    { label: 'Full', value: '100%' },
+  ],
+  theme: true,
+  mode: true,
+  platform: true,
+  log: true,
+  apply: (subject, data) => subject.setMockData(data),
+  select: (subject, key) => subject.fetchVin(key),
+};
+
+window.harness = function harness(options = {}) {
+  const config = { ...DEFAULTS, ...options };
+
+  return {
+    config,
+    subject: null,
+
+    languages: config.languages,
+    platforms: config.platforms,
+    show: {
+      theme: config.theme,
+      mode: config.mode,
+      platform: config.platform,
+      log: config.log,
+      fixtures: Boolean(config.mocks),
+    },
+
+    language: config.languages[0],
+    theme: window.harnessTheme?.current() ?? 'system',
+    // Development is the default: it is the only mode that works without a local
+    // API running, which is how these pages are opened most of the time.
+    mode: 'dev',
+    width: '100%',
+    fixtures: [],
+    fixture: null,
+    lines: [],
+
+    get dir() {
+      return config.rtl.includes(this.language) ? 'rtl' : 'ltr';
+    },
+
+    async init() {
+      this.subject = document.querySelector(config.subject);
+
+      if (!this.subject) return this.write('harness', `no element matches ${config.subject}`);
+
+      // Properties set before upgrade would be shadowed by the prototype
+      // accessors, and @Method members do not exist yet. Wait for both.
+      await customElements.whenDefined(this.subject.localName);
+      await this.subject.componentOnReady?.();
+
+      this.setLanguage(this.subject.language || this.language);
+      this.subject.isDev = true;
+
+      if (config.log) this.observe();
+      if (config.mocks) await this.loadFixtures();
+    },
+
+    /* ---------- controls ---------- */
+
+    setLanguage(language) {
+      this.language = language;
+      this.subject.language = language;
+
+      document.documentElement.lang = language;
+      document.documentElement.dir = this.dir;
+
+      this.write('language', `${language} · ${this.dir}`);
+    },
+
+    setTheme(theme) {
+      this.theme = theme;
+
+      // harness-theme.js owns this so the choice survives navigation. Pages that
+      // do not load it still get a working control, just not a sticky one.
+      if (window.harnessTheme) window.harnessTheme.apply(theme);
+      else if (theme === 'system') delete document.documentElement.dataset.theme;
+      else document.documentElement.dataset.theme = theme === 'dark' ? 'harness-dark' : 'harness';
+
+      this.write('theme', theme);
+    },
+
+    setMode(mode) {
+      this.mode = mode;
+      this.subject.isDev = mode === 'dev';
+
+      this.write('mode', mode === 'dev' ? 'development · mock data' : `production · ${this.subject.baseUrl || 'no base-url set'}`);
+    },
+
+    setWidth(width) {
+      this.width = width;
+      this.subject.closest('.frame')?.style.setProperty('--frame-w', width);
+
+      this.write('width', width);
+    },
+
+    /* ---------- fixtures ---------- */
+
+    async loadFixtures() {
+      let data = {};
+
+      try {
+        data = (await window.loadMockData(config.mocks)) ?? {};
+        await config.apply(this.subject, data);
+      } catch (error) {
+        this.write('fixtures', `failed to load — ${error.message}`);
+      }
+
+      // Generated from the mock keys, never hand-listed: a hardcoded list drifts
+      // the moment someone adds a scenario (R7). Labels only annotate.
+      this.fixtures = [{ value: '', label: 'Empty' }, { value: 'error', label: 'Error' }, ...Object.keys(data).map(key => ({ value: key, label: key, note: config.labels[key] }))];
+    },
+
+    run(key) {
+      this.fixture = key;
+      this.write('fetch', key === '' ? '(empty)' : key);
+
+      config.select(this.subject, key);
+    },
+
+    reload() {
+      this.run(this.fixture ?? '');
+    },
+
+    /* ---------- live events ---------- */
+
+    observe() {
+      this.subject.loadingStateChange = isLoading => this.write(isLoading ? 'loading' : 'idle', '');
+      this.subject.errorCallback = message => this.write('error', String(message));
+      this.subject.loadedResponse = response => this.write('loaded', summarise(response));
+    },
+
+    write(label, detail) {
+      // Bound with x-text, so component-supplied text is never parsed as markup.
+      this.lines.unshift({ id: `${label}-${this.lines.length}-${detail}`, label, detail: String(detail ?? '') });
+
+      if (this.lines.length > 200) this.lines.pop();
+    },
+  };
+};
+
+function summarise(response) {
+  if (!response) return '(nothing)';
+
+  const vin = response.vin ?? response.identifiers?.vin;
+  const keys = Object.keys(response).length;
+
+  return vin ? `${vin} · ${keys} keys` : `${keys} keys`;
+}
+
+/* ---------- the standard rail ---------- */
+
+const RAIL = /* html */ `
+  <div class="flex items-center justify-between gap-3">
+    <p class="eyebrow text-neutral font-bold">Harness</p>
+    <a href="/" class="btn btn-xs btn-ghost gap-1.5" aria-label="Showcase home">
+      <span class="adp-logo text-accent h-3.5 w-[34px]" aria-hidden="true"></span>
+      Home
+    </a>
+  </div>
+
+  <div class="flex flex-col gap-1.5">
+    <span class="eyebrow text-neutral" x-text="'Language · ' + dir.toUpperCase()"></span>
+    <div class="flex flex-wrap gap-1.5" role="group" aria-label="Language">
+      <template x-for="item in languages" :key="item">
+        <button type="button" class="btn btn-sm" :class="language === item ? 'btn-primary' : 'btn-outline'"
+                :aria-pressed="language === item" @click="setLanguage(item)" x-text="item.toUpperCase()"></button>
+      </template>
+    </div>
+  </div>
+
+  <template x-if="show.theme">
+    <div class="flex flex-col gap-1.5">
+      <span class="eyebrow text-neutral">Theme</span>
+      <div class="flex flex-wrap gap-1.5" role="group" aria-label="Theme">
+        <template x-for="item in ['system', 'light', 'dark']" :key="item">
+          <button type="button" class="btn btn-sm capitalize" :class="theme === item ? 'btn-primary' : 'btn-outline'"
+                  :aria-pressed="theme === item" @click="setTheme(item)" x-text="item"></button>
+        </template>
+      </div>
+    </div>
+  </template>
+
+  <template x-if="show.mode">
+    <div class="flex flex-col gap-1.5">
+      <span class="eyebrow text-neutral">Mode</span>
+      <div class="flex flex-wrap gap-1.5" role="group" aria-label="Mode">
+        <template x-for="item in [{ value: 'dev', label: 'Development' }, { value: 'prod', label: 'Production' }]" :key="item.value">
+          <button type="button" class="btn btn-sm" :class="mode === item.value ? 'btn-primary' : 'btn-outline'"
+                  :aria-pressed="mode === item.value" @click="setMode(item.value)" x-text="item.label"></button>
+        </template>
+      </div>
+    </div>
+  </template>
+
+  <template x-if="show.platform">
+    <div class="flex flex-col gap-1.5">
+      <span class="eyebrow text-neutral">Platform width</span>
+      <div class="flex flex-wrap gap-1.5" role="group" aria-label="Platform width">
+        <template x-for="item in platforms" :key="item.value">
+          <button type="button" class="btn btn-sm" :class="width === item.value ? 'btn-primary' : 'btn-outline'"
+                  :aria-pressed="width === item.value" @click="setWidth(item.value)" x-text="item.label"></button>
+        </template>
+      </div>
+    </div>
+  </template>
+
+  <template x-if="show.fixtures">
+    <div class="flex flex-col gap-1.5">
+      <span class="eyebrow text-neutral">Fixtures</span>
+      <button type="button" class="btn btn-sm btn-outline self-start" @click="reload()">Reload</button>
+      <div class="flex flex-wrap gap-1.5" role="group" aria-label="Fixtures">
+        <template x-for="item in fixtures" :key="item.value">
+          <button type="button" class="btn btn-sm font-mono font-normal" :class="fixture === item.value ? 'btn-primary' : 'btn-outline'"
+                  :aria-pressed="fixture === item.value" @click="run(item.value)">
+            <span x-text="item.label"></span>
+            <span class="opacity-70 font-sans" x-show="item.note" x-text="item.note"></span>
+          </button>
+        </template>
+      </div>
+    </div>
+  </template>
+
+  <template x-if="show.log">
+    <div class="flex flex-col gap-1.5">
+      <span class="eyebrow text-neutral">Live events</span>
+      <pre class="log m-0 p-2.5 rounded-field bg-base-200 text-base-content/70 border border-base-300"><template x-if="!lines.length"><span>waiting…</span></template><template x-for="line in lines" :key="line.id"><span><b class="text-accent" x-text="line.label"></b> <span x-text="line.detail"></span>
+</span></template></pre>
+    </div>
+  </template>
+`;
+
+document.querySelectorAll('[data-harness-rail]').forEach(rail => {
+  rail.innerHTML = RAIL;
+});

package/dist/components/branch-slot-dropdown.js

@@ -2,4 +2,4 @@
  * Built by ShiftSoftware
  * Copyright (c)
  */
-import{B as o,d as s}from"./p-CCuYl9VQ.js";const p=o,r=s;export{p as BranchSlotDropdown,r as defineCustomElement}
+import{B as o,d as s}from"./p-CKwgX_v0.js";const p=o,r=s;export{p as BranchSlotDropdown,r as defineCustomElement}

package/dist/components/branch-slot-picker.js

@@ -2,4 +2,4 @@
  * Built by ShiftSoftware
  * Copyright (c)
  */
-import{B as o,d as s}from"./p-Cg4l7ICV.js";const p=o,r=s;export{p as BranchSlotPicker,r as defineCustomElement}
+import{B as o,d as p}from"./p-BUepGDZV.js";const s=o,r=p;export{s as BranchSlotPicker,r as defineCustomElement}

package/dist/components/dead-stock-lookup.js

@@ -2,4 +2,4 @@
  * Built by ShiftSoftware
  * Copyright (c)
  */
-import{D as o,d as s}from"./p-BMnQwtNn.js";const t=o,n=s;export{t as DeadStockLookup,n as defineCustomElement}
+import{D as o,d as s}from"./p-B8hl68AM.js";const p=o,r=s;export{p as DeadStockLookup,r as defineCustomElement}

package/dist/components/distributor-lookup.js

@@ -2,4 +2,4 @@
  * Built by ShiftSoftware
  * Copyright (c)
  */
-import{D as o,d as s}from"./p-B_jDD5xI.js";const p=o,r=s;export{p as DistributorLookup,r as defineCustomElement}
+import{D as o,d as s}from"./p-Dd_Xnn2b.js";const n=o,p=s;export{n as DistributorLookup,p as defineCustomElement}

package/dist/components/flexible-container.js

@@ -2,4 +2,4 @@
  * Built by ShiftSoftware
  * Copyright (c)
  */
-import{F as o,d as s}from"./p-B0lK-5c_.js";const p=o,r=s;export{p as FlexibleContainer,r as defineCustomElement}
+import{F as o,d as s}from"./p-B7G2HjX0.js";const p=o,r=s;export{p as FlexibleContainer,r as defineCustomElement}