adp-web-components 0.4.0 → 0.4.2

package/dist/collection/features/mocks/get-mock-files.js

@@ -5,6 +5,7 @@
 import { Build } from "@stencil/core";
 import { version } from "../../../package.json";
 import { MockFiles } from "./types";
+import { localizeMockAssets } from "./mock-assets";
 const cachedMocks = {};
 export async function getMockFile(mockFileName, externalUrl = '') {
     const fileName = MockFiles[mockFileName];
@@ -14,22 +15,26 @@ export async function getMockFile(mockFileName, externalUrl = '') {
     return response;
 }
 async function requestMockFile(mockFile, externalUrl) {
-    if (cachedMocks[mockFile])
-        return await cachedMocks[mockFile];
+    let fetchUrl = externalUrl === null || externalUrl === void 0 ? void 0 : externalUrl.trim();
     try {
-        let fetchUrl;
-        if (!!externalUrl && !!externalUrl.trim().length)
-            fetchUrl = externalUrl;
-        else if (Build.isDev)
+        if (!fetchUrl && Build.isDev)
             fetchUrl = 'http://localhost:3000/mocks/' + mockFile;
-        else
+        else if (!fetchUrl)
             fetchUrl = `https://cdn.jsdelivr.net/npm/adp-web-components@${version}/dist/mocks/${mockFile}`;
-        const fetchPromise = fetch(fetchUrl).then(res => {
+        // The same file kind exists in every generated environment. Caching by the
+        // old logical filename made an environment change resurrect the first file
+        // after toggling back into development mode.
+        if (cachedMocks[fetchUrl])
+            return await cachedMocks[fetchUrl];
+        const fetchPromise = fetch(fetchUrl)
+            .then(res => {
             if (!res.ok)
-                delete cachedMocks[mockFile];
+                delete cachedMocks[fetchUrl];
             return res.json();
-        });
-        cachedMocks[mockFile] = fetchPromise;
+        })
+            // Fixture pictures point at the CDN copy of the package; a dev build reads the dev server's.
+            .then(localizeMockAssets);
+        cachedMocks[fetchUrl] = fetchPromise;
         const result = await fetchPromise;
         const count = Object.keys(result).length;
         console.log(`✅ Loaded mock: ${mockFile} (${count} items)`);
@@ -37,11 +42,11 @@ async function requestMockFile(mockFile, externalUrl) {
             key,
             value,
         })));
-        cachedMocks[mockFile] = result;
+        cachedMocks[fetchUrl] = result;
         return result;
     }
-    catch (error) {
-        delete cachedMocks[mockFile];
+    catch (_a) {
+        delete cachedMocks[fetchUrl];
         return {};
     }
 }

package/dist/collection/features/mocks/index.js

@@ -4,3 +4,4 @@
  */
 export * from './types';
 export * from './get-mock-files';
+export * from './mock-assets';

package/dist/collection/features/mocks/mock-assets.js

@@ -0,0 +1,33 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import { Build } from "@stencil/core";
+/**
+ * The generated fixtures point their pictures (paint panels, company badges, claim documents,
+ * accessories) at the copy of `dist/mocks/assets/` on the CDN, so one URL works wherever a fixture
+ * is loaded. On the CDN those files exist only from the first release that carries them; the dev
+ * server has them right away, at `/mocks/assets/` (the build copies `features/mocks/data` there).
+ * In a dev build every such URL is rewritten to the local copy, whichever way the fixture arrived
+ * (the component's own fetch or a harness pushing `setMockData`). Prod builds leave the data alone.
+ */
+const CDN_MOCKS_PREFIX = /^https:\/\/cdn\.jsdelivr\.net\/npm\/adp-web-components@[^/]+\/dist\/mocks\//;
+const DEV_MOCKS_BASE = 'http://localhost:3000/mocks/';
+export function localizeMockAssets(value) {
+    if (!Build.isDev)
+        return value;
+    return rewrite(value);
+}
+function rewrite(value) {
+    if (typeof value === 'string')
+        return value.replace(CDN_MOCKS_PREFIX, DEV_MOCKS_BASE);
+    if (Array.isArray(value))
+        return value.map(rewrite);
+    if (value && typeof value === 'object') {
+        const copy = {};
+        for (const [key, entry] of Object.entries(value))
+            copy[key] = rewrite(entry);
+        return copy;
+    }
+    return value;
+}

package/dist/collection/features/vehicle-lookup-component/vehicle-lookup-api-integration.js

@@ -3,6 +3,7 @@
  * Copyright (c)
  */
 import { smartInvokable } from "../blazor-ref/index";
+import { localizeMockAssets } from "../mocks/index";
 import { resolveRequestHeaders } from "./request-headers";
 import validateVin from "../../global/lib/validate-vin";
 export const setVehicleLookupData = async (context, newData, headers = {}, { beforeAssignment } = {}) => {
@@ -76,7 +77,8 @@ export const getVehicleLookup = async (context, generalProps, headers = {}) => {
         }
     };
     if (context === null || context === void 0 ? void 0 : context.isDev) {
-        const newData = context === null || context === void 0 ? void 0 : context.mockData[vin];
+        // Fixture pictures point at the CDN copy of the package; a dev build reads the dev server's.
+        const newData = localizeMockAssets(context === null || context === void 0 ? void 0 : context.mockData[vin]);
         return handleResult(newData);
     }
     else {

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

@@ -0,0 +1,25 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+const ISO_CALENDAR_DATE = /^\d{4}-\d{2}-\d{2}$/;
+/**
+ * Resolves a component's optional calendar-date clock to an instant.
+ *
+ * A supplied value is always midnight UTC. Invalid values fall back to the wall
+ * clock so a malformed host attribute cannot leave date UI holding an Invalid
+ * Date. Callers that need a calendar label should use `today`, which keeps the
+ * same UTC interpretation.
+ */
+export function now(value) {
+    if (value && ISO_CALENDAR_DATE.test(value)) {
+        const resolved = new Date(`${value}T00:00:00.000Z`);
+        if (!Number.isNaN(resolved.getTime()) && resolved.toISOString().slice(0, 10) === value)
+            return resolved;
+    }
+    return new Date();
+}
+/** Resolves a component's optional clock to an ISO calendar date in UTC. */
+export function today(value) {
+    return now(value).toISOString().slice(0, 10);
+}

package/dist/collection/global/lib/decode-time-offset.js

@@ -3,7 +3,15 @@
  * Copyright (c)
  */
 import { addDays, addHours, addMinutes, addMonths, addSeconds, addYears, format, startOfDay } from "date-fns";
-export function decodeTimeOffset({ offsets, type, date = startOfDay(new Date()) }) {
+import { now } from "./clock";
+export function decodeTimeOffset({ offsets, type, date, today }) {
+    if (!date) {
+        const clock = now(today);
+        // date-fns performs calendar arithmetic in local time. Mirror an explicit
+        // UTC calendar date into local time first so a negative offset cannot roll
+        // the anchor back to the previous day.
+        date = today ? new Date(clock.getUTCFullYear(), clock.getUTCMonth(), clock.getUTCDate()) : startOfDay(clock);
+    }
     if (offsets.length > 0)
         date = addYears(date, offsets[0]);
     if (offsets.length > 1)

package/dist/collection/templates/forms/docs-content/structure.js

@@ -248,7 +248,7 @@ export const dataKeys = [
     summary:
       'A tiny rewrite language applied to the payload just before it is sent, in object-key order. Four behaviours, chosen by the shape of each entry:\n' +
       '1. value is an ARRAY — join. Each item is looked up in the payload; if there is no such key the item is used as a literal. The result is assigned to the entry key. Source fields are NOT removed.\n' +
-      '2. key starts with `parse date: ` — `payload[rest] = parse(payload[rest], <value>, new Date())` using the date-fns format in the value. Produces a Date object.\n' +
+      '2. key starts with `parse date: ` — `payload[rest] = parse(payload[rest], <value>, now(today))` using the date-fns format in the value and the form’s optional `today` clock. Produces a Date object.\n' +
       '3. key starts with `format date: ` — `payload[rest] = formatISO(payload[rest])`. The value is ignored; any non-empty string works, so write something self-documenting.\n' +
       '4. anything else — RENAME AND MOVE: `additionalData[<value>] = payload[<key>]`, then `delete payload[<key>]`.\n' +
       'Whenever this key is present and non-empty, `payload.additionalData` is set, even if it ends up `{}`.',

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

@@ -0,0 +1,282 @@
+const HTTP_PROTOCOLS = new Set(['http:', 'https:']);
+const HEADER_NAME = /^[!#$%&'*+\-.^_`|~0-9A-Za-z]+$/;
+const STORAGE_VERSION = 1;
+
+const clone = value => {
+  if (value === undefined || value === null || typeof value !== 'object') return value;
+
+  return JSON.parse(JSON.stringify(value));
+};
+
+const asObject = value => {
+  if (!value) return {};
+
+  if (typeof value === 'object' && !Array.isArray(value)) return clone(value);
+
+  if (typeof value !== 'string') return {};
+
+  try {
+    const parsed = JSON.parse(value);
+    return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? parsed : {};
+  } catch {
+    return {};
+  }
+};
+
+const urlField = (name, label, required = true) => ({
+  name,
+  label,
+  kind: 'url',
+  inputType: 'url',
+  required,
+  placeholder: 'https://api.example.invalid/',
+});
+
+const secretField = (name, label, kind, placeholder) => ({
+  name,
+  label,
+  kind,
+  inputType: 'password',
+  required: true,
+  placeholder,
+  secret: true,
+});
+
+export function connectionFields(profile, options = {}) {
+  if (profile === 'part') {
+    return [urlField('endpointUrl', 'Endpoint URL'), secretField('queryJson', 'Query JSON', 'query', '{"code":""}')];
+  }
+
+  if (profile === 'form') return [urlField('structureUrl', 'Structure URL')];
+  if (profile === 'vin-extractor') return [urlField('ocrEndpoint', 'OCR endpoint')];
+
+  const fields = [urlField('baseUrl', 'Base URL'), secretField('headersJson', 'Request headers JSON', 'headers', '{}')];
+
+  if (options.recaptcha) fields.push(secretField('recaptchaSiteKey', 'reCAPTCHA site key', 'text', 'Site key'));
+  if (options.claim) fields.push(urlField('claimEndpoint', 'Claim endpoint'));
+  if (options.unauthorizedSsc) fields.push(urlField('unauthorizedSscEndpoint', 'Manufacturer-check endpoint'));
+
+  return fields;
+}
+
+export function emptyConnectionDraft(profile, options = {}) {
+  return Object.fromEntries(connectionFields(profile, options).map(field => [field.name, field.kind === 'headers' || field.kind === 'query' ? '{}' : '']));
+}
+
+const validateUrl = value => {
+  try {
+    const url = new URL(value);
+
+    return HTTP_PROTOCOLS.has(url.protocol) && !url.username && !url.password;
+  } catch {
+    return false;
+  }
+};
+
+const parseJsonObject = (value, field, errors) => {
+  try {
+    const parsed = JSON.parse(value);
+
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) throw new Error();
+
+    return parsed;
+  } catch {
+    errors[field] = 'Enter one JSON object.';
+    return null;
+  }
+};
+
+export function validateConnection(profile, draft, options = {}) {
+  const errors = {};
+  const settings = {};
+
+  for (const field of connectionFields(profile, options)) {
+    const value = String(draft?.[field.name] ?? '').trim();
+
+    if (!value) {
+      if (field.required) errors[field.name] = `${field.label} is required.`;
+      continue;
+    }
+
+    if (field.kind === 'url') {
+      if (!validateUrl(value)) errors[field.name] = 'Enter an absolute HTTP or HTTPS URL without embedded credentials.';
+      else settings[field.name] = value;
+      continue;
+    }
+
+    if (field.kind === 'headers') {
+      const parsed = parseJsonObject(value, field.name, errors);
+
+      if (parsed) {
+        const invalidName = Object.keys(parsed).some(name => !HEADER_NAME.test(name));
+        const invalidValue = Object.values(parsed).some(header => !['string', 'number', 'boolean'].includes(typeof header));
+
+        if (invalidName || invalidValue) errors[field.name] = 'Use valid header names with string, number, or boolean values.';
+        else settings.headers = Object.fromEntries(Object.entries(parsed).map(([name, header]) => [name, String(header)]));
+      }
+      continue;
+    }
+
+    if (field.kind === 'query') {
+      const parsed = parseJsonObject(value, field.name, errors);
+      if (parsed) settings.query = parsed;
+      continue;
+    }
+
+    settings[field.name] = value;
+  }
+
+  return { ok: Object.keys(errors).length === 0, errors, settings };
+}
+
+const settingsToDraft = (profile, settings, options) => ({
+  ...emptyConnectionDraft(profile, options),
+  ...settings,
+  headersJson: JSON.stringify(settings?.headers ?? {}),
+  queryJson: JSON.stringify(settings?.query ?? {}),
+});
+
+export function connectionStorageKey(profile, pathname) {
+  return `adp-harness-connection:v${STORAGE_VERSION}:${profile}:${pathname || '/'}`;
+}
+
+export function saveConnection(storage, key, settings) {
+  storage.setItem(key, JSON.stringify({ version: STORAGE_VERSION, settings }));
+}
+
+export function loadConnection(storage, key, profile, options = {}) {
+  try {
+    const stored = JSON.parse(storage.getItem(key));
+    if (stored?.version !== STORAGE_VERSION) return null;
+
+    const validated = validateConnection(profile, settingsToDraft(profile, stored.settings, options), options);
+    return validated.ok ? validated.settings : null;
+  } catch {
+    return null;
+  }
+}
+
+export function clearConnection(storage, key) {
+  storage.removeItem(key);
+}
+
+export function connectionOptions(profile, configured) {
+  const options = configured && typeof configured === 'object' ? configured : {};
+
+  return {
+    recaptcha: profile === 'composite' || options.recaptcha === true,
+    claim: profile === 'composite' || options.claim === true,
+    unauthorizedSsc: profile === 'composite' || options.unauthorizedSsc === true,
+    targets: options.targets ?? null,
+  };
+}
+
+export function captureConnectionState(profile, subject, options = {}) {
+  if (profile === 'part') return { endpoint: clone(subject.endpoint) };
+  if (profile === 'form') return { structureUrl: subject.structureUrl || subject.getAttribute?.('structure-url') || '', fields: clone(subject.fields) };
+  if (profile === 'vin-extractor') return { endpoints: (options.targets ?? [subject]).map(target => target.ocrEndpoint || target.getAttribute?.('ocr-endpoint') || '') };
+
+  return {
+    baseUrl: subject.baseUrl ?? '',
+    headers: clone(subject.headers ?? {}),
+    requestHeadersProvider: subject.requestHeadersProvider,
+    recaptchaKey: subject.recaptchaKey ?? '',
+    claimEndPoint: subject.claimEndPoint ?? '',
+    unauthorizedSscLookupBaseUrl: subject.unauthorizedSscLookupBaseUrl ?? '',
+    childrenProps: clone(subject.childrenProps),
+  };
+}
+
+const applyCompositeSettings = (subject, settings, options) => {
+  const props = asObject(subject.childrenProps);
+
+  if (options.recaptcha || options.unauthorizedSsc) {
+    props['vehicle-ssc'] = {
+      ...(props['vehicle-ssc'] ?? {}),
+      ...(options.recaptcha ? { recaptchaKey: settings.recaptchaSiteKey } : {}),
+      ...(options.unauthorizedSsc ? { unauthorizedSscLookupBaseUrl: settings.unauthorizedSscEndpoint } : {}),
+    };
+  }
+
+  if (options.claim) {
+    props['vehicle-claimable-items'] = {
+      ...(props['vehicle-claimable-items'] ?? {}),
+      claimEndPoint: settings.claimEndpoint,
+    };
+  }
+
+  subject.childrenProps = props;
+};
+
+export function connectProfile(profile, subject, settings, options = {}) {
+  if (profile === 'part') {
+    subject.endpoint = { url: settings.endpointUrl, query: clone(settings.query) };
+    subject.isDev = false;
+    return;
+  }
+
+  if (profile === 'form') {
+    subject.structureUrl = settings.structureUrl;
+    subject.isDev = false;
+    return;
+  }
+
+  if (profile === 'vin-extractor') {
+    for (const target of options.targets ?? [subject]) target.ocrEndpoint = settings.ocrEndpoint;
+    return;
+  }
+
+  subject.baseUrl = settings.baseUrl;
+  subject.headers = clone(settings.headers);
+  subject.requestHeadersProvider = () => clone(settings.headers);
+
+  if (profile === 'composite') applyCompositeSettings(subject, settings, options);
+  else {
+    if (options.recaptcha) subject.recaptchaKey = settings.recaptchaSiteKey;
+    if (options.claim) subject.claimEndPoint = settings.claimEndpoint;
+    if (options.unauthorizedSsc) subject.unauthorizedSscLookupBaseUrl = settings.unauthorizedSscEndpoint;
+  }
+
+  subject.isDev = false;
+}
+
+export function disconnectProfile(profile, subject, baseline, options = {}) {
+  if (profile === 'part') {
+    subject.endpoint = clone(baseline.endpoint);
+    subject.isDev = true;
+    return;
+  }
+
+  if (profile === 'form') {
+    subject.structureUrl = baseline.structureUrl;
+    subject.fields = clone(baseline.fields);
+    subject.isDev = true;
+    return;
+  }
+
+  if (profile === 'vin-extractor') {
+    (options.targets ?? [subject]).forEach((target, index) => {
+      target.ocrEndpoint = baseline.endpoints[index] ?? '';
+    });
+    return;
+  }
+
+  subject.baseUrl = baseline.baseUrl;
+  subject.headers = clone(baseline.headers);
+  subject.requestHeadersProvider = baseline.requestHeadersProvider;
+  subject.recaptchaKey = baseline.recaptchaKey;
+  subject.claimEndPoint = baseline.claimEndPoint;
+  subject.unauthorizedSscLookupBaseUrl = baseline.unauthorizedSscLookupBaseUrl;
+  subject.childrenProps = clone(baseline.childrenProps);
+  subject.isDev = true;
+}
+
+export function todayChoiceAvailable(mode, connected, hasAnchor) {
+  if (connected) return mode === 'live';
+  return mode !== 'anchor' || hasAnchor;
+}
+
+export function connectionLog(action, profile) {
+  const label = profile === 'vin-extractor' ? 'VIN extractor' : profile === 'form' ? 'form' : profile === 'part' ? 'part lookup' : 'vehicle lookup';
+  return action === 'connect' ? `${label} · live settings applied · credentials withheld` : `${label} · generated settings restored`;
+}

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

@@ -0,0 +1,31 @@
+const ENVIRONMENT_NAME = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+
+/** Keep the generated index as the only authority for names, anchors and files. */
+export function environmentsFrom(index) {
+  if (!Array.isArray(index?.environments)) return [];
+
+  return index.environments
+    .filter(environment => {
+      if (!ENVIRONMENT_NAME.test(environment?.name || '') || typeof environment?.files !== 'object' || environment.files === null) return false;
+
+      return Object.values(environment.files).every(keys => Array.isArray(keys));
+    })
+    .map(environment => ({ ...environment, label: environmentLabel(environment.name) }));
+}
+
+/** Query string wins, then this tab's memory, then the first generated entry. */
+export function chooseEnvironment(environments, requested, stored) {
+  return environments.find(environment => environment.name === requested) ?? environments.find(environment => environment.name === stored) ?? environments[0] ?? null;
+}
+
+export function environmentFileUrl(siteRoot, environment, file) {
+  return new URL(`mocks/generated/${environment}/${file}.json`, siteRoot);
+}
+
+export function environmentLabel(name) {
+  return String(name)
+    .split('-')
+    .filter(Boolean)
+    .map(word => word[0].toUpperCase() + word.slice(1))
+    .join(' ');
+}