npm - adp-web-components - Versions diffs - 0.3.18 → 0.3.20 - Mend

adp-web-components 0.3.18 → 0.3.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (364) hide show

package/dist/templates/production-host/vehicle-service-history.html CHANGED Viewed

@@ -1,9 +1,23 @@
 <!doctype html>
+<!--
+  HOST INTEGRATION TEMPLATE — deliberately plain.
+  This is a copy-paste starting point for an integrator, not a demo. It loads the
+  package from the CDN the way a real host would and does nothing else: no
+  harness, no Tailwind, no Alpine, no theming. Anything added here is something
+  the integrator would have to delete.
+  `{{ADP_WEB_COMPONENTS_VERSION}}` and `{{VEHICLE_LOOKUP_BASE_URL}}` are meant to
+  be substituted. Demos that exercise the component live under
+  src/templates/vehicle-lookup/.
+-->
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vehicle service history host</title>
+    <meta name="adp-publish" content="false" />
   </head>
   <body>
     <label for="vin">VIN</label>

package/dist/types/components/form-elements/branch-date-dropdown.d.ts ADDED Viewed

@@ -0,0 +1,74 @@
+import { BranchSlotDay } from './branch-slot-dropdown';
+export interface BranchDateDropdownCopy {
+    date: string;
+    time: string;
+    slots: string;
+    empty: string;
+    error: string;
+    retry: string;
+    back: string;
+    noTimes: string;
+    closed: string;
+}
+/** Which half of the sliding track is in view. */
+export type BranchDateStep = 'date' | 'time';
+/**
+ * Panel half of `branch-date-picker`.
+ *
+ * Two panes on one horizontal track — a month grid, then that day's times —
+ * rather than the two stacked sections `branch-slot-dropdown` uses. Only one
+ * decision is on screen at a time, which is the point of the date-picker
+ * variant: a customer who has met a month calendar before recognises step one
+ * immediately, and step two arrives already scoped to the day they picked.
+ *
+ * Mounted on `document.body` by `shift-portal` and positioned through the
+ * `--branch-date-*` variables the picker sets, exactly as the slot panel is.
+ */
+export declare class BranchDateDropdown {
+    name?: string;
+    isOpen: boolean;
+    direction: string;
+    status: 'idle' | 'loading' | 'ready' | 'empty' | 'error';
+    /** Bookable days, already de-duplicated, sorted and rule-marked by the picker. */
+    days: BranchSlotDay[];
+    /** The month on screen, as `YYYY-MM`. */
+    monthKey: string;
+    /** `1` when the last month change went forward, `-1` back. Drives the slide. */
+    monthDirection: number;
+    canGoPrev: boolean;
+    canGoNext: boolean;
+    step: BranchDateStep;
+    activeDate: string;
+    selectedRaw: string;
+    today: string;
+    /** `0` Sunday … `6` Saturday — resolved from the locale by the picker. */
+    weekStart: number;
+    idleText?: string;
+    copy: BranchDateDropdownCopy;
+    formatDay: (date: string, options: Intl.DateTimeFormatOptions) => string;
+    formatMonth: (monthKey: string) => string;
+    formatWeekday: (weekday: number) => string;
+    displayTime: (raw: string) => string;
+    handleMonth: (delta: number) => void;
+    handleDate: (date: string) => void;
+    handleTime: (raw: string) => void;
+    handleBack: () => void;
+    handleRetry: () => void;
+    /** Tapping the sheet scrim. Unused above 600px, where the scrim is hidden. */
+    handleDismiss?: () => void;
+    setElementRef?: (el: HTMLElement | null) => void;
+    private containerEl;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private get dayMap();
+    /**
+     * The visible month as a flat list of ISO dates, padded with nulls so the
+     * first of the month lands under its own weekday column.
+     */
+    private monthCells;
+    private renderMessage;
+    private renderSkeleton;
+    private renderCalendarPane;
+    private renderTimePane;
+    render(): any;
+}

package/dist/types/components/form-elements/branch-date-picker.d.ts ADDED Viewed

@@ -0,0 +1,174 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { FormHook } from "../../features/form-hook/form-hook";
+import { FormElement, FormInputLocalization } from "../../features/form-hook/index";
+import { LanguageKeys } from "../../features/multi-lingual/index";
+import { BranchSlotDay } from './branch-slot-dropdown';
+import { BranchDateStep } from './branch-date-dropdown';
+import { BranchSlotSelection } from './branch-slot-picker';
+type Status = 'idle' | 'loading' | 'ready' | 'empty' | 'error';
+/**
+ * Branch-aware booking slot field, month-calendar variant.
+ *
+ * Same contract and same data as `branch-slot-picker` — the same endpoint, the
+ * same `slotChange` payload, the same standalone-without-a-form behaviour. The
+ * difference is entirely in the panel: a month grid first, then that day's
+ * times, on a sliding track. Customers who have never used a horizontal day
+ * strip have used a month calendar, and the second step arrives already scoped
+ * to one day rather than sitting under the first.
+ *
+ * The two are meant to be interchangeable, so a deployment can pick whichever
+ * its audience reads faster without anything downstream changing.
+ */
+export declare class BranchDatePicker implements FormElement {
+    /** Field name. Only meaningful when `form` is supplied. */
+    name: string;
+    /** Optional — omit for standalone use and listen to `slotChange` instead. */
+    form?: FormHook<any>;
+    /** Full URL of the calendar endpoint, e.g. `https://…/api/public/calendar`. */
+    calendarApi: string;
+    /** Integration ids. The field stays idle until all four are present. */
+    companyId: string;
+    branchId: string;
+    departmentId: string;
+    brandId: string;
+    /** How far ahead to ask. The endpoint caps its own response at 15 days. */
+    daysAhead: number;
+    /**
+     * Weekdays the branch never books on, `0` Sunday … `6` Saturday. Accepts an
+     * array or a `"5,6"` string. Matching days stay on the grid, struck through,
+     * rather than being dropped — see `~lib/slot-day-rules`.
+     */
+    disabledWeekdays?: string | number[];
+    /** One-off blackout dates as `YYYY-MM-DD`, same accepted shapes as above. */
+    disabledDates?: string | string[];
+    /**
+     * First column of the grid, `0` Sunday … `6` Saturday. Left unset it comes
+     * from the active locale, which is right far more often than any constant.
+     */
+    weekStartsOn?: number;
+    /** Gap between the trigger and the panel, matching shift-select's default. */
+    gap: number;
+    /**
+     * Floor for the panel width on desktop. The panel is portaled to `<body>` and
+     * positioned fixed, so it is free to be wider than the field — and than the
+     * form around it — which is the point: seven columns stop reading as a
+     * calendar much below this, and form fields are routinely narrower.
+     */
+    minPanelWidth: number;
+    /** Tallest the panel may get before its panes scroll. Also capped to the viewport. */
+    maxPanelHeight: number;
+    label?: string;
+    wrapperId: string;
+    wrapperClass: string;
+    isRequired: boolean;
+    isDisabled: boolean;
+    language: LanguageKeys;
+    localization?: FormInputLocalization;
+    /** Preselects a slot, in the same `YYYY-MM-DDTHH:mm` form the field emits. */
+    defaultValue?: string;
+    status: Status;
+    days: BranchSlotDay[];
+    selectedDate: string;
+    selectedRaw: string;
+    isOpen: boolean;
+    dropdownAncestorClasses: string;
+    /**
+     * The day whose times are on the second pane. Kept apart from `selectedDate`
+     * so browsing the calendar and then dismissing the panel leaves the committed
+     * selection untouched.
+     */
+    draftDate: string;
+    step: BranchDateStep;
+    /** Month on screen as `YYYY-MM`, and which way the last change travelled. */
+    monthKey: string;
+    monthDirection: number;
+    /** Fires on every confirmed day+time selection. The standalone contract. */
+    slotChange: EventEmitter<BranchSlotSelection>;
+    el: HTMLElement;
+    /**
+     * The response as it arrived, before the disable rules are layered on. Kept so
+     * a rule change re-decorates without a refetch.
+     */
+    private fetchedDays;
+    private abortController?;
+    private dropdownEl;
+    private lockedScrollY;
+    private boundKeyDown;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    onOpenChange(isOpen: boolean): void;
+    /**
+     * Pinning the body position rather than just hiding overflow: on iOS,
+     * `overflow: hidden` alone still lets the page rubber-band behind the sheet.
+     */
+    private lockScroll;
+    private releaseScroll;
+    onRulesChange(): void;
+    onTargetChange(): void;
+    /** FormElement contract. */
+    reset(newValue?: unknown): void;
+    getValue(): string;
+    /** Lets a host force a refetch, e.g. after a token refresh. */
+    refresh(): Promise<void>;
+    openDropdown(): Promise<void>;
+    closeDropdown(): Promise<void>;
+    private get isRtl();
+    private get copy();
+    private get intlLocales();
+    /**
+     * `0` Sunday … `6` Saturday. `getWeekInfo` is the only thing that knows the
+     * region's answer; it is missing on older WebViews, hence the guard and the
+     * Monday default the rest of Intl assumes.
+     */
+    private get weekStart();
+    private pad;
+    private get todayIso();
+    /** `2026-08-13 09:00 AM` → minutes since midnight. */
+    private minutesOf;
+    private toFormValue;
+    private displayTime;
+    private formatDay;
+    private formatMonth;
+    /** 7 January 2024 was a Sunday, so it indexes weekdays without a lookup table. */
+    private formatWeekday;
+    private queryUrl;
+    /**
+     * Overlapping work periods of equal priority make the endpoint emit the same
+     * slot more than once, and a merged response is not necessarily ordered. Both
+     * are fixed here rather than in the panel, so anything reading `days` gets
+     * clean data.
+     */
+    private normalise;
+    /** Layers the disable rules over the response without discarding anything. */
+    private applyDayRules;
+    private firstOpenDay;
+    private lastOpenDay;
+    private load;
+    private setDropdownRef;
+    private getTriggerEl;
+    private isTriggerInView;
+    /**
+     * Below this width the panel is a bottom sheet pinned to the viewport, so it
+     * is not anchored to anything and none of the positioning below applies. Kept
+     * in sync with the media query in branch-date-dropdown.css.
+     */
+    private get isSheet();
+    /** Anchor to the trigger, flip up when space below is short. */
+    private adjustDropdownPosition;
+    private handleResize;
+    private handleScroll;
+    private handleKeyDown;
+    private closeOnOutsideClick;
+    private toggle;
+    private get monthBounds();
+    /** Months with nothing bookable in them are not worth walking into. */
+    private handleMonth;
+    private handleDate;
+    private handleBack;
+    private handleTime;
+    /** What the trigger shows: the committed slot, or why it cannot be opened. */
+    private triggerText;
+    render(): any;
+}
+export {};

package/dist/types/components/form-elements/branch-slot-dropdown.d.ts CHANGED Viewed

@@ -2,6 +2,12 @@
 export interface BranchSlotDay {
     date: string;
     times: string[];
+    /**
+     * Returned by the branch but not bookable — a blackout date or a weekday the
+     * deployment never takes bookings on. Rendered greyed rather than removed so
+     * the customer sees the day exists.
+     */
+    disabled?: boolean;
 }
 export interface BranchSlotDropdownCopy {
     day: string;

package/dist/types/components/form-elements/branch-slot-picker.d.ts CHANGED Viewed

@@ -37,8 +37,26 @@ export declare class BranchSlotPicker implements FormElement {
     brandId: string;
     /** How far ahead to ask. The endpoint caps its own response at 15 days. */
     daysAhead: number;
+    /**
+     * Weekdays the branch never books on, `0` Sunday … `6` Saturday. Accepts an
+     * array or a `"5,6"` string. Matching days stay visible but unselectable —
+     * see `~lib/slot-day-rules` for why they are not simply dropped.
+     */
+    disabledWeekdays?: string | number[];
+    /** One-off blackout dates as `YYYY-MM-DD`, same accepted shapes as above. */
+    disabledDates?: string | string[];
     /** Gap between the trigger and the panel, matching shift-select's default. */
     gap: number;
+    /**
+     * Floor for the panel width on desktop. The panel is portaled to `<body>` and
+     * positioned fixed, so it is free to be wider than the field — and than the
+     * form around it — which is the point: a two-column form gives the field
+     * ~320px, which squeezed the day strip and the time grid into something that
+     * read as clipped. Capped to the viewport at open time.
+     */
+    minPanelWidth: number;
+    /** Tallest the panel may get before it scrolls. Also capped to the viewport. */
+    maxPanelHeight: number;
     label?: string;
     wrapperId: string;
     wrapperClass: string;
@@ -63,6 +81,11 @@ export declare class BranchSlotPicker implements FormElement {
     /** Fires on every confirmed day+time selection. The standalone contract. */
     slotChange: EventEmitter<BranchSlotSelection>;
     el: HTMLElement;
+    /**
+     * The response as it arrived, before the disable rules are layered on. Kept so
+     * a rule change re-decorates without a refetch.
+     */
+    private fetchedDays;
     private abortController?;
     private dropdownEl;
     private lockedScrollY;
@@ -77,6 +100,7 @@ export declare class BranchSlotPicker implements FormElement {
      */
     private lockScroll;
     private releaseScroll;
+    onRulesChange(): void;
     onTargetChange(): void;
     /** FormElement contract. */
     reset(newValue?: unknown): void;
@@ -102,6 +126,9 @@ export declare class BranchSlotPicker implements FormElement {
      * panel, so anything reading `days` gets clean data.
      */
     private normalise;
+    /** Layers the disable rules over the response without discarding anything. */
+    private applyDayRules;
+    private firstOpenDay;
     private load;
     private setDropdownRef;
     private getTriggerEl;

package/dist/types/components/forms/defaults/mappers.d.ts CHANGED Viewed

@@ -63,21 +63,27 @@ export declare const getFormMappers: (extraMappers?: Record<string, (prop: any)
         props: any;
     }) => any;
     /**
-     * Branch-aware booking slot. Unlike `time` below — which builds a fixed ladder
-     * from min/max/span and is therefore identical at every branch on every day —
-     * this asks the branch's own calendar what is actually open.
-     *
-     * The branch comes from the `companyBranchId` field's selected option, whose
-     * `meta` is the whole branch record, so company / department / brand need no
-     * extra configuration. Department resolves against the branch's own list
-     * rather than being hardcoded: asking a branch for a department it does not
-     * have returns an empty calendar.
+     * Branch-aware booking slot, day-strip variant. Unlike `time` below — which
+     * builds a fixed ladder from min/max/span and is therefore identical at every
+     * branch on every day — this asks the branch's own calendar what is actually
+     * open.
      */
     bookingSlot: ({ form, language, props }: {
         form: any;
         language: any;
         props: any;
     }) => any;
+    /**
+     * The same booking slot, month-calendar variant: a date picker that slides to
+     * that day's times. Identical data, identical submitted value — the two are
+     * interchangeable, so a deployment can run whichever its audience reads
+     * faster without anything downstream changing.
+     */
+    bookingDate: ({ form, language, props }: {
+        form: any;
+        language: any;
+        props: any;
+    }) => any;
     time: ({ language, props }: {
         language: any;
         props: any;

package/dist/types/components/vehicle-lookup/components/claimable-item-popover.d.ts CHANGED Viewed

@@ -14,12 +14,21 @@ type ClaimableItemPopoverProps = {
     popoverHeight: number;
     target: PopoverTarget;
     fadingOut: boolean;
-    contentFading: boolean;
+    /** Held for the length of a hover-to-hover cross-fade; drives which layer is opaque. */
+    swapping: boolean;
+    /** The previously hovered item, rendered underneath while it fades out. */
+    outgoingItem?: VehicleServiceItemDTO;
+    /** Bumped on every item change so the vdom mounts a fresh layer instead of patching the old one. */
+    layerKey: number;
+    /** Cross-fade + resize duration, in ms. Drives the CSS transitions and the outgoing-layer timer. */
+    swapMs: number;
     bodyContentHeight: number;
     claim: (item: VehicleServiceItemDTO) => void;
     locale: ComponentLocale<typeof dynamicClaimSchema>;
     onMouseEnter: () => void;
     onMouseLeave: () => void;
+    /** Handed back so the owner can promote it into the top layer when a host ancestor would clip it. */
+    rootRef: (element: HTMLElement) => void;
 };
 export declare const ClaimableItemPopover: FunctionalComponent<ClaimableItemPopoverProps>;
 export {};

package/dist/types/components/vehicle-lookup/components/claimable-trace-modal.d.ts CHANGED Viewed

@@ -10,6 +10,9 @@ type ClaimableTraceModalProps = {
     traceHtml?: string;
     locale: ComponentLocale<typeof dynamicClaimSchema>;
     onClose: () => void;
+    /** Handed back so the owner can showModal()/close() it — see openTraceModal. */
+    dialogRef: (element: HTMLDialogElement) => void;
+    onCancel: (event: Event) => void;
 };
 export declare const ClaimableTraceModal: FunctionalComponent<ClaimableTraceModalProps>;
 export {};

package/dist/types/components/vehicle-lookup/vehicle-claimable-items.d.ts CHANGED Viewed

@@ -53,7 +53,9 @@ export declare class VehicleClaimableItems implements MultiLingual, VehicleInfoL
     popoverTarget: PopoverTarget;
     popoverHeight: number;
     popoverBodyContentHeight: number;
-    popoverContentFading: boolean;
+    popoverSwapping: boolean;
+    outgoingClaimItem?: VehicleServiceItemDTO;
+    popoverLayerKey: number;
     popoverFadingOut: boolean;
     showTraceModal: boolean;
     traceModalFadingOut: boolean;
@@ -62,12 +64,14 @@ export declare class VehicleClaimableItems implements MultiLingual, VehicleInfoL
     traceHtml?: string;
     claimForm: VehicleItemClaimForm;
     private traceAbortController?;
-    private traceCloseListener?;
+    private traceDialogEl?;
+    private releaseTraceFallbacks?;
     private traceFadeOutTimeoutRef;
     private popoverAnchorEl;
+    private popoverEl?;
     private popoverCloseTimeoutRef;
     private popoverHideTimeoutRef;
-    private popoverContentSwapTimeoutRef;
+    private popoverSwapEndTimeoutRef;
     private progressBar;
     private claimableItemsBox;
     private tabAnimationTimeoutRef;
@@ -96,11 +100,15 @@ export declare class VehicleClaimableItems implements MultiLingual, VehicleInfoL
     private activateClaimItem;
     private printLastClaimResponse;
     updatePopoverLocation: () => void;
+    private onViewportChange;
     private measurePopoverHeight;
+    private currentPopoverInner;
     private measurePopoverContentHeight;
     private static readonly POPOVER_CLOSE_DELAY_MS;
     private static readonly POPOVER_FADE_OUT_MS;
-    private static readonly POPOVER_CONTENT_FADE_MS;
+    /** Cross-fade + resize duration. Handed to the popover as --popover-swap, so this one number
+     *  drives both the CSS transitions and the timer that drops the outgoing layer. */
+    private static readonly POPOVER_SWAP_MS;
     private static readonly TRACE_FADE_OUT_MS;
     setClaimableItemPopover: (showPopover: boolean, claimableItem?: VehicleServiceItemDTO, anchorEl?: HTMLElement) => void;
     private onPopoverMouseEnter;
@@ -108,6 +116,8 @@ export declare class VehicleClaimableItems implements MultiLingual, VehicleInfoL
     openTrace(): Promise<void>;
     private openTraceModal;
     private closeTraceModal;
+    /** Escape would drop the panel out of the top layer in one frame; close it through the fade. */
+    private onTraceCancel;
     completeClaim(response: any): Promise<void>;
     handleClaim: (documents: File[], payload: ItemClaimDTO) => Promise<void>;
     handleDevClaim: (documents: File[]) => Promise<void>;

package/dist/types/components/vehicle-lookup/vehicle-item-claim-form.d.ts CHANGED Viewed

@@ -6,7 +6,6 @@ import { ItemClaimDTO } from '../../global/types/generated/vehicle-lookup/item-c
 export declare class VehicleItemClaimForm implements ImageViewerInterface {
     expandedImage?: string;
     originalImage: HTMLImageElement;
-    onImageViewerToggles(newValue: string | null): void;
     vin?: string;
     item?: VehicleServiceItemDTO;
     maximumDocumentFileSizeInMb: number;
@@ -20,6 +19,7 @@ export declare class VehicleItemClaimForm implements ImageViewerInterface {
     isOpened: boolean;
     isLoading: boolean;
     compact: boolean;
+    claimLabelWidth: number;
     claimError: string;
     confirmationStates: Record<string, boolean>;
     errors: Record<string, {
@@ -28,13 +28,23 @@ export declare class VehicleItemClaimForm implements ImageViewerInterface {
     }>;
     inputs: Record<string, any>;
     el: HTMLElement;
-    private closeModalListenerRef;
+    private dialogEl?;
+    private releaseEscapeFallback?;
     /** Full-mode stage padding (18px × 2) — the voucher must fit inside it to stay full-size. */
     private static readonly STAGE_PADDING;
     private voucherResizeObserver?;
     private observedVoucherEl?;
     private suppressMeasure;
-    private onWindowKeyDown;
+    private idleClaimLabelEl?;
+    private busyClaimLabelEl?;
+    private claimLabelResizeObserver?;
+    private observedClaimLabels;
+    private releaseOpenFallbacks;
+    /**
+     * Escape reaches a modal dialog as a cancel event. Always prevented: the platform would drop the
+     * card out of the top layer in one frame, and close() needs the fade-out to run first.
+     */
+    private onDialogCancel;
     private onWindowResize;
     open(): Promise<void>;
     onIsLoadingChange(newValue: boolean): void;
@@ -48,6 +58,16 @@ export declare class VehicleItemClaimForm implements ImageViewerInterface {
     showError(message: string): Promise<void>;
     private dismissError;
     componentDidRender(): void;
+    /**
+     * The claim button grows from CLAIM to PROCESSING and shrinks back. A width that follows its own
+     * content never fires a transition — the box is simply laid out at the new size — so the active
+     * caption is measured and the width set explicitly, which is a value change the browser will
+     * animate. Both captions stay mounted and stacked in one cell so the one being measured is always
+     * laid out, and so the check icon does not mount and unmount underneath the swap.
+     */
+    private measureClaimLabel;
+    private observeClaimLabels;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     /**
      * Vertical compact is MEASURED, never a fixed media query: render full-size,