adp-web-components 0.3.19 → 0.3.20

package/dist/collection/components/form-elements/branch-date-dropdown.js

@@ -0,0 +1,682 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import { Host, h } from "@stencil/core";
+import cn from "../../global/lib/cn";
+import { ChevronLeftIcon } from "../../global/assets/chevron-left-icon";
+import { ChevronRightIcon } from "../../global/assets/chevron-right-icon";
+/**
+ * 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 class BranchDateDropdown {
+    constructor() {
+        this.name = '';
+        this.isOpen = false;
+        this.direction = 'ltr';
+        this.status = 'idle';
+        /** Bookable days, already de-duplicated, sorted and rule-marked by the picker. */
+        this.days = [];
+        /** The month on screen, as `YYYY-MM`. */
+        this.monthKey = '';
+        /** `1` when the last month change went forward, `-1` back. Drives the slide. */
+        this.monthDirection = 1;
+        this.canGoPrev = false;
+        this.canGoNext = false;
+        this.step = 'date';
+        this.activeDate = '';
+        this.selectedRaw = '';
+        this.today = '';
+        /** `0` Sunday … `6` Saturday — resolved from the locale by the picker. */
+        this.weekStart = 1;
+        this.idleText = '';
+        this.containerEl = null;
+    }
+    componentDidLoad() {
+        var _a;
+        (_a = this.setElementRef) === null || _a === void 0 ? void 0 : _a.call(this, this.containerEl);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.setElementRef) === null || _a === void 0 ? void 0 : _a.call(this, null);
+    }
+    get dayMap() {
+        return this.days.reduce((map, day) => {
+            map[day.date] = day;
+            return map;
+        }, {});
+    }
+    /**
+     * 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.
+     */
+    monthCells() {
+        if (!this.monthKey)
+            return [];
+        const [year, month] = this.monthKey.split('-').map(part => parseInt(part, 10));
+        // Day 0 of the next month is the last day of this one.
+        const length = new Date(year, month, 0).getDate();
+        // Midday, so a negative-offset zone cannot roll the first back into last month.
+        const lead = (new Date(year, month - 1, 1, 12).getDay() - this.weekStart + 7) % 7;
+        const cells = new Array(lead).fill(null);
+        for (let day = 1; day <= length; day++)
+            cells.push(`${this.monthKey}-${String(day).padStart(2, '0')}`);
+        // Always six rows. Some months need five and some need six, and letting the
+        // grid choose makes the panel change height as you page through months.
+        while (cells.length < 42)
+            cells.push(null);
+        return cells;
+    }
+    renderMessage(text, isError = false) {
+        const identifier = cn(`${this.name}-date-empty-container branch-date-empty-container`, {
+            'branch-date-empty-container-error': isError,
+        });
+        return (h("div", { part: identifier, class: identifier }, h("div", null, text, isError && (h("div", null, h("button", { type: "button", class: "branch-date-retry", part: `${this.name}-date-retry branch-date-retry`, onClick: () => this.handleRetry() }, this.copy.retry))))));
+    }
+    renderSkeleton() {
+        return (h("div", { class: "branch-date-pane" }, h("div", { class: "branch-date-pane-inner" }, h("div", { class: "branch-date-monthbar" }, h("div", { class: "branch-date-skeleton branch-date-skeleton-title" })), h("div", { class: "branch-date-grid" }, Array.from({ length: 35 }).map((_, index) => (h("div", { key: index, class: "branch-date-skeleton branch-date-skeleton-cell" })))))));
+    }
+    renderCalendarPane() {
+        const map = this.dayMap;
+        const enterClass = this.monthDirection < 0 ? 'branch-date-enter-back' : 'branch-date-enter-forward';
+        return (h("div", { class: "branch-date-pane" }, h("div", { class: "branch-date-pane-inner" }, h("div", { class: "branch-date-monthbar" }, h("button", { type: "button", class: "branch-date-nav", part: `${this.name}-date-prev branch-date-nav`, disabled: !this.canGoPrev, onClick: () => this.handleMonth(-1) }, h(ChevronLeftIcon, { class: "branch-date-nav-icon" })), h("span", { key: this.monthKey, class: cn('branch-date-month', enterClass) }, this.formatMonth(this.monthKey)), h("button", { type: "button", class: "branch-date-nav", part: `${this.name}-date-next branch-date-nav`, disabled: !this.canGoNext, onClick: () => this.handleMonth(1) }, h(ChevronRightIcon, { class: "branch-date-nav-icon" }))), h("div", { class: "branch-date-dows", "aria-hidden": "true" }, Array.from({ length: 7 }).map((_, index) => (h("span", { key: index, class: "branch-date-dow" }, this.formatWeekday((this.weekStart + index) % 7))))), h("div", { key: this.monthKey, class: cn('branch-date-grid', enterClass), role: "grid", "aria-label": this.copy.date }, this.monthCells().map((date, index) => {
+            if (!date)
+                return h("span", { key: `pad-${index}`, class: "branch-date-cell-pad" });
+            const entry = map[date];
+            // Three outcomes, two of them dead ends: bookable, blocked by a rule,
+            // or never offered at all — outside the window, or a closed day.
+            const isBlocked = !!(entry === null || entry === void 0 ? void 0 : entry.disabled);
+            const isBookable = !!entry && !isBlocked;
+            const isSelected = date === this.activeDate;
+            const identifier = cn(`${this.name}-date-cell branch-date-cell`, {
+                'branch-date-cell-open': isBookable,
+                'branch-date-cell-blocked': isBlocked,
+                'branch-date-cell-off': !entry,
+                'branch-date-cell-today': date === this.today,
+                'branch-date-cell-selected': isSelected && isBookable,
+            });
+            return (h("button", { key: date, type: "button", part: identifier, class: identifier, disabled: !isBookable, "aria-disabled": isBookable ? 'false' : 'true', "aria-pressed": isSelected && isBookable ? 'true' : 'false', title: isBlocked ? this.copy.closed : undefined, onClick: () => isBookable && this.handleDate(date) }, this.formatDay(date, { day: 'numeric' })));
+        })))));
+    }
+    renderTimePane() {
+        var _a;
+        const active = this.days.find(day => day.date === this.activeDate && !day.disabled);
+        const times = (_a = active === null || active === void 0 ? void 0 : active.times) !== null && _a !== void 0 ? _a : [];
+        return (h("div", { class: "branch-date-pane" }, h("div", { class: "branch-date-pane-inner" }, h("div", { class: "branch-date-monthbar" }, h("button", { type: "button", class: "branch-date-back", part: `${this.name}-date-back branch-date-back`, onClick: () => this.handleBack() }, h(ChevronLeftIcon, { class: "branch-date-nav-icon" }), h("span", null, this.copy.back)), h("span", { class: "branch-date-count" }, times.length, " ", this.copy.slots)), h("div", { class: "branch-date-chosen" }, this.activeDate ? this.formatDay(this.activeDate, { weekday: 'long', day: 'numeric', month: 'long' }) : ''), !times.length && h("div", { class: "branch-date-notimes" }, this.copy.noTimes), h("div", { class: "branch-date-times", role: "radiogroup", "aria-label": this.copy.time }, times.map((raw, index) => {
+            const isSelected = raw === this.selectedRaw;
+            const identifier = cn(`${this.name}-date-time branch-date-time`, { 'branch-date-time-selected': isSelected });
+            return (h("button", { key: raw, type: "button", role: "radio", part: identifier, class: identifier, "aria-checked": isSelected ? 'true' : 'false',
+                // Capped, or a branch with a long ladder lands its last chip half
+                // a second after its first.
+                style: { animationDelay: `${Math.min(index, 11) * 24}ms` }, onClick: () => this.handleTime(raw) }, this.displayTime(raw)));
+        })))));
+    }
+    render() {
+        const containerIdentifiers = cn(`${this.name}-date-container branch-date-container`, {
+            'branch-date-container-open': this.isOpen,
+        });
+        const backdropIdentifiers = cn(`${this.name}-date-backdrop branch-date-backdrop`, {
+            'branch-date-backdrop-open': this.isOpen,
+        });
+        return (h(Host, { key: 'a8553c379c1b91fc804c811fe2d6c3db0e556887' }, h("div", { key: 'b29a42fa92b244a0f526c74c8f6a5b49242abf63', part: backdropIdentifiers, class: backdropIdentifiers, onClick: () => { var _a; return (_a = this.handleDismiss) === null || _a === void 0 ? void 0 : _a.call(this); } }), h("div", { key: '2cd62103a893c81881d41e968547226b9aff010f', dir: this.direction, part: containerIdentifiers, class: containerIdentifiers,
+            // Keeps a scroll gesture inside the panel instead of moving the page
+            // behind it — the panel is a child of <body>, not of the field.
+            onWheel: event => event.stopPropagation(), onTouchMove: event => event.stopPropagation(), ref: el => (this.containerEl = el) }, this.status === 'idle' && this.renderMessage(this.idleText || ''), this.status === 'loading' && this.renderSkeleton(), this.status === 'empty' && this.renderMessage(this.copy.empty), this.status === 'error' && this.renderMessage(this.copy.error, true), this.status === 'ready' && (h("div", { key: 'b9aba9a7ddf87f10715b8bf63e88951e1d54e892', class: "branch-date-body" }, h("div", { key: '394dacc1aede8c081a6dee697ced96c065eafcef', class: cn('branch-date-track', { 'branch-date-track-time': this.step === 'time' }) }, this.renderCalendarPane(), this.renderTimePane()))))));
+    }
+    static get is() { return "branch-date-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["branch-date-dropdown.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["branch-date-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "isOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-open",
+                "defaultValue": "false"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'ltr'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'idle' | 'loading' | 'ready' | 'empty' | 'error'",
+                    "resolved": "\"empty\" | \"error\" | \"idle\" | \"loading\" | \"ready\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "'idle'"
+            },
+            "days": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BranchSlotDay[]",
+                    "resolved": "BranchSlotDay[]",
+                    "references": {
+                        "BranchSlotDay": {
+                            "location": "import",
+                            "path": "./branch-slot-dropdown",
+                            "id": "src/components/form-elements/branch-slot-dropdown.tsx::BranchSlotDay",
+                            "referenceLocation": "BranchSlotDay"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Bookable days, already de-duplicated, sorted and rule-marked by the picker."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "monthKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The month on screen, as `YYYY-MM`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "month-key",
+                "defaultValue": "''"
+            },
+            "monthDirection": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`1` when the last month change went forward, `-1` back. Drives the slide."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "month-direction",
+                "defaultValue": "1"
+            },
+            "canGoPrev": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "can-go-prev",
+                "defaultValue": "false"
+            },
+            "canGoNext": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "can-go-next",
+                "defaultValue": "false"
+            },
+            "step": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BranchDateStep",
+                    "resolved": "\"date\" | \"time\"",
+                    "references": {
+                        "BranchDateStep": {
+                            "location": "local",
+                            "path": "/home/vsts/work/1/s/ADP.WebComponents/adp-web-components/src/components/form-elements/branch-date-dropdown.tsx",
+                            "id": "src/components/form-elements/branch-date-dropdown.tsx::BranchDateStep"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "'date'"
+            },
+            "activeDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-date",
+                "defaultValue": "''"
+            },
+            "selectedRaw": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-raw",
+                "defaultValue": "''"
+            },
+            "today": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "today",
+                "defaultValue": "''"
+            },
+            "weekStart": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`0` Sunday \u2026 `6` Saturday \u2014 resolved from the locale by the picker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "week-start",
+                "defaultValue": "1"
+            },
+            "idleText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "idle-text",
+                "defaultValue": "''"
+            },
+            "copy": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BranchDateDropdownCopy",
+                    "resolved": "BranchDateDropdownCopy",
+                    "references": {
+                        "BranchDateDropdownCopy": {
+                            "location": "local",
+                            "path": "/home/vsts/work/1/s/ADP.WebComponents/adp-web-components/src/components/form-elements/branch-date-dropdown.tsx",
+                            "id": "src/components/form-elements/branch-date-dropdown.tsx::BranchDateDropdownCopy"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "formatDay": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(date: string, options: Intl.DateTimeFormatOptions) => string",
+                    "resolved": "(date: string, options: DateTimeFormatOptions) => string",
+                    "references": {
+                        "Intl": {
+                            "location": "global",
+                            "id": "global::Intl"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "formatMonth": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(monthKey: string) => string",
+                    "resolved": "(monthKey: string) => string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "formatWeekday": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(weekday: number) => string",
+                    "resolved": "(weekday: number) => string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "displayTime": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(raw: string) => string",
+                    "resolved": "(raw: string) => string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "handleMonth": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(delta: number) => void",
+                    "resolved": "(delta: number) => void",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "handleDate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(date: string) => void",
+                    "resolved": "(date: string) => void",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "handleTime": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(raw: string) => void",
+                    "resolved": "(raw: string) => void",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "handleBack": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "handleRetry": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "handleDismiss": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tapping the sheet scrim. Unused above 600px, where the scrim is hidden."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "setElementRef": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(el: HTMLElement | null) => void",
+                    "resolved": "(el: HTMLElement) => void",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+}