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

adp-web-components 0.3.19 → 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 (346) hide show

package/dist/collection/components/form-elements/branch-date-picker.js ADDED Viewed

@@ -0,0 +1,1197 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import { Host, h } from "@stencil/core";
+import cn from "../../global/lib/cn";
+import { ArrowUpIcon } from "../../global/assets/arrow-up-icon";
+import getCustomClassesForPortal from "../../global/lib/get-custom-classes-for-portal";
+import { isDayBlocked, parseDateList, parseWeekdayList } from "../../global/lib/slot-day-rules";
+import { getInputLocalization } from "../../features/form-hook/index";
+import { FormInputLabel } from "./components/form-input-label";
+import { FormErrorMessage } from "./components/form-error-message";
+const FALLBACK_COPY = {
+    en: {
+        date: 'Pick a date',
+        time: 'Pick a time',
+        slots: 'slots',
+        back: 'Change date',
+        noTimes: 'Nothing left on this day',
+        closed: 'Closed on this day',
+        idle: 'Choose a branch first',
+        empty: 'No times available at this branch',
+        error: "Couldn't load available times",
+        retry: 'Try again',
+        choose: 'Choose date & time',
+        loading: 'Loading times…',
+    },
+    ar: {
+        date: 'اختر التاريخ',
+        time: 'اختر الوقت',
+        slots: 'موعداً',
+        back: 'تغيير التاريخ',
+        noTimes: 'لا توجد مواعيد في هذا اليوم',
+        closed: 'مغلق في هذا اليوم',
+        idle: 'اختر الفرع أولاً',
+        empty: 'لا توجد أوقات متاحة في هذا الفرع',
+        error: 'تعذّر تحميل الأوقات المتاحة',
+        retry: 'أعد المحاولة',
+        choose: 'اختر التاريخ والوقت',
+        loading: 'جارٍ تحميل الأوقات…',
+    },
+    ku: {
+        date: 'بەروارێک هەڵبژێرە',
+        time: 'کاتێک هەڵبژێرە',
+        slots: 'کات',
+        back: 'گۆڕینی بەروار',
+        noTimes: 'هیچ کاتێک نەماوە لەم ڕۆژەدا',
+        closed: 'داخراوە لەم ڕۆژەدا',
+        idle: 'سەرەتا لقێک هەڵبژێرە',
+        empty: 'هیچ کاتێکی بەردەست نییە لەم لقەدا',
+        error: 'نەتوانرا کاتە بەردەستەکان باربکرێن',
+        retry: 'دووبارە هەوڵ بدە',
+        choose: 'بەروار و کات هەڵبژێرە',
+        loading: 'کاتەکان باردەکرێن…',
+    },
+    ru: {
+        date: 'Выберите дату',
+        time: 'Выберите время',
+        slots: 'слотов',
+        back: 'Сменить дату',
+        noTimes: 'На этот день ничего не осталось',
+        closed: 'В этот день закрыто',
+        idle: 'Сначала выберите филиал',
+        empty: 'В этом филиале нет свободного времени',
+        error: 'Не удалось загрузить свободное время',
+        retry: 'Повторить',
+        choose: 'Выберите дату и время',
+        loading: 'Загрузка времени…',
+    },
+};
+/**
+ * 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 class BranchDatePicker {
+    constructor() {
+        /** Field name. Only meaningful when `form` is supplied. */
+        this.name = 'bookingDate';
+        /** How far ahead to ask. The endpoint caps its own response at 15 days. */
+        this.daysAhead = 30;
+        /** Gap between the trigger and the panel, matching shift-select's default. */
+        this.gap = 8;
+        /**
+         * 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.
+         */
+        this.minPanelWidth = 380;
+        /** Tallest the panel may get before its panes scroll. Also capped to the viewport. */
+        this.maxPanelHeight = 460;
+        this.isRequired = false;
+        this.isDisabled = false;
+        this.language = 'en';
+        this.localization = {};
+        this.status = 'idle';
+        this.days = [];
+        this.selectedDate = '';
+        this.selectedRaw = '';
+        this.isOpen = false;
+        this.dropdownAncestorClasses = '';
+        /**
+         * 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.
+         */
+        this.draftDate = '';
+        this.step = 'date';
+        /** Month on screen as `YYYY-MM`, and which way the last change travelled. */
+        this.monthKey = '';
+        this.monthDirection = 1;
+        /**
+         * The response as it arrived, before the disable rules are layered on. Kept so
+         * a rule change re-decorates without a refetch.
+         */
+        this.fetchedDays = [];
+        this.dropdownEl = null;
+        this.lockedScrollY = 0;
+        this.boundKeyDown = (event) => this.handleKeyDown(event);
+        this.displayTime = (raw) => {
+            const total = this.minutesOf(raw);
+            const date = new Date(2000, 0, 1, Math.floor(total / 60), total % 60);
+            return new Intl.DateTimeFormat(this.intlLocales, { hour: 'numeric', minute: '2-digit' }).format(date);
+        };
+        this.formatDay = (date, options) => {
+            // Midday, not midnight: a midnight Date in a negative-offset zone rolls back
+            // a day, which silently mislabels every cell.
+            const [y, m, d] = date.split('-').map(x => parseInt(x, 10));
+            return new Intl.DateTimeFormat(this.intlLocales, options).format(new Date(y, m - 1, d, 12));
+        };
+        this.formatMonth = (monthKey) => {
+            if (!monthKey)
+                return '';
+            const [y, m] = monthKey.split('-').map(x => parseInt(x, 10));
+            return new Intl.DateTimeFormat(this.intlLocales, { month: 'long', year: 'numeric' }).format(new Date(y, m - 1, 1, 12));
+        };
+        /** 7 January 2024 was a Sunday, so it indexes weekdays without a lookup table. */
+        this.formatWeekday = (weekday) => {
+            return new Intl.DateTimeFormat(this.intlLocales, { weekday: 'short' }).format(new Date(2024, 0, 7 + weekday, 12));
+        };
+        this.setDropdownRef = (el) => {
+            this.dropdownEl = el;
+        };
+        /** Anchor to the trigger, flip up when space below is short. */
+        this.adjustDropdownPosition = () => {
+            const dropdown = this.dropdownEl;
+            const trigger = this.getTriggerEl();
+            if (!dropdown || !trigger)
+                return;
+            // Sheet mode is viewport-anchored; CSS owns it entirely.
+            if (this.isSheet)
+                return;
+            const rect = trigger.getBoundingClientRect();
+            // Scrolled out of sight — a panel floating over unrelated content is worse
+            // than no panel.
+            if (!this.isTriggerInView(rect)) {
+                this.isOpen = false;
+                return;
+            }
+            // clientWidth, not innerWidth: innerWidth includes the classic scrollbar, so
+            // measuring against it pushes the panel a scrollbar's width off the edge.
+            const viewportWidth = document.documentElement.clientWidth;
+            const width = Math.round(Math.min(Math.max(rect.width, this.minPanelWidth), viewportWidth - this.gap * 2));
+            dropdown.style.setProperty('--branch-date-width', `${width}px`);
+            const spaceBelow = window.innerHeight - rect.bottom - this.gap * 2;
+            const spaceAbove = rect.top - this.gap * 2;
+            const openUpwards = dropdown.offsetHeight > spaceBelow && spaceAbove > spaceBelow;
+            // The body is a constant height, so this only ever clips it in a viewport
+            // too short to hold the calendar — the panes scroll inside what is left.
+            const room = Math.max(220, Math.min(this.maxPanelHeight, openUpwards ? spaceAbove : spaceBelow));
+            dropdown.style.setProperty('--branch-date-max-height', `${room}px`);
+            // Keep it on-screen horizontally — the panel has a min-width, so a field
+            // near the right edge would otherwise hang off it.
+            const left = Math.max(this.gap, Math.min(rect.left, viewportWidth - width - this.gap));
+            dropdown.style.setProperty('--branch-date-left', `${left}px`);
+            // Pinned by whichever edge touches the field. Anchoring upwards by `bottom`
+            // rather than `top` means the animated body height cannot drag the panel
+            // across the trigger as it grows.
+            if (openUpwards) {
+                dropdown.style.setProperty('--branch-date-top', 'auto');
+                dropdown.style.setProperty('--branch-date-bottom', `${window.innerHeight - rect.top + this.gap}px`);
+            }
+            else {
+                dropdown.style.setProperty('--branch-date-top', `${rect.bottom + this.gap}px`);
+                dropdown.style.setProperty('--branch-date-bottom', 'auto');
+            }
+        };
+        this.handleResize = () => {
+            if (this.isOpen)
+                this.adjustDropdownPosition();
+        };
+        this.handleScroll = (event) => {
+            if (!this.isOpen)
+                return;
+            // The sheet does not move with the page, and the page is locked anyway.
+            if (this.isSheet)
+                return;
+            const target = event.target;
+            if (this.dropdownEl && (this.dropdownEl === target || this.dropdownEl.contains(target)))
+                return;
+            this.adjustDropdownPosition();
+        };
+        this.closeOnOutsideClick = (event) => {
+            const path = event.composedPath();
+            if (path.includes(this.el))
+                return;
+            if (this.dropdownEl && path.includes(this.dropdownEl))
+                return;
+            this.isOpen = false;
+        };
+        this.toggle = () => {
+            if (this.isOpen)
+                this.isOpen = false;
+            else if (this.status === 'error')
+                this.load();
+            else
+                this.openDropdown();
+        };
+        /** Months with nothing bookable in them are not worth walking into. */
+        this.handleMonth = (delta) => {
+            if (!this.monthKey)
+                return;
+            const [year, month] = this.monthKey.split('-').map(part => parseInt(part, 10));
+            const moved = new Date(year, month - 1 + delta, 1, 12);
+            const next = `${moved.getFullYear()}-${this.pad(moved.getMonth() + 1)}`;
+            const { min, max } = this.monthBounds;
+            if (next < min || next > max)
+                return;
+            this.monthDirection = delta < 0 ? -1 : 1;
+            this.monthKey = next;
+        };
+        this.handleDate = (date) => {
+            var _a;
+            if ((_a = this.days.find(day => day.date === date)) === null || _a === void 0 ? void 0 : _a.disabled)
+                return;
+            this.draftDate = date;
+            this.step = 'time';
+        };
+        this.handleBack = () => {
+            this.step = 'date';
+            // Coming back from a day in another month should land on that day's month,
+            // not on whatever the calendar was last scrolled to.
+            if (this.draftDate)
+                this.monthKey = this.draftDate.slice(0, 7);
+        };
+        this.handleTime = (raw) => {
+            this.selectedDate = raw.split(' ')[0];
+            this.selectedRaw = raw;
+            this.isOpen = false;
+            // The form pulls values — it calls getValue() on every subscribed element at
+            // submit time — so there is nothing to push. This only fires the public
+            // event, which is what standalone hosts listen to.
+            this.slotChange.emit({ date: this.selectedDate, raw, value: this.toFormValue(raw) });
+        };
+    }
+    componentWillLoad() {
+        var _a;
+        (_a = this.form) === null || _a === void 0 ? void 0 : _a.subscribe(this.name, this);
+        this.load();
+    }
+    componentDidLoad() {
+        document.addEventListener('click', this.closeOnOutsideClick);
+        document.addEventListener('keydown', this.boundKeyDown);
+        window.addEventListener('resize', this.handleResize);
+        window.addEventListener('scroll', this.handleScroll, true);
+        // The panel is portaled out of the form, so theme classes have to travel
+        // with it or it renders unstyled against the host page.
+        this.dropdownAncestorClasses = `${this.name}-date-picker ${getCustomClassesForPortal(this.el)}`;
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+        (_b = this.form) === null || _b === void 0 ? void 0 : _b.unsubscribe(this.name);
+        document.removeEventListener('click', this.closeOnOutsideClick);
+        document.removeEventListener('keydown', this.boundKeyDown);
+        window.removeEventListener('resize', this.handleResize);
+        window.removeEventListener('scroll', this.handleScroll, true);
+        // A teardown while the sheet is open would otherwise leave the page frozen.
+        this.releaseScroll();
+    }
+    onOpenChange(isOpen) {
+        // Only the sheet needs this. An anchored panel repositions on scroll and
+        // freezing the page under it would be wrong.
+        if (!this.isSheet)
+            return;
+        if (isOpen)
+            this.lockScroll();
+        else
+            this.releaseScroll();
+    }
+    /**
+     * Pinning the body position rather than just hiding overflow: on iOS,
+     * `overflow: hidden` alone still lets the page rubber-band behind the sheet.
+     */
+    lockScroll() {
+        if (document.body.style.position === 'fixed')
+            return;
+        this.lockedScrollY = window.scrollY;
+        Object.assign(document.body.style, { position: 'fixed', top: `-${this.lockedScrollY}px`, left: '0', right: '0', width: '100%' });
+    }
+    releaseScroll() {
+        if (document.body.style.position !== 'fixed')
+            return;
+        Object.assign(document.body.style, { position: '', top: '', left: '', right: '', width: '' });
+        window.scrollTo(0, this.lockedScrollY);
+    }
+    onRulesChange() {
+        var _a, _b, _c, _d;
+        this.days = this.applyDayRules(this.fetchedDays);
+        // The committed slot may have just become unbookable, and a draft pointing
+        // at a now-blocked day would leave the times pane empty with no way back.
+        if (this.selectedDate && ((_a = this.days.find(day => day.date === this.selectedDate)) === null || _a === void 0 ? void 0 : _a.disabled)) {
+            this.selectedDate = '';
+            this.selectedRaw = '';
+        }
+        if (!this.draftDate || ((_b = this.days.find(day => day.date === this.draftDate)) === null || _b === void 0 ? void 0 : _b.disabled)) {
+            this.draftDate = (_d = (_c = this.firstOpenDay()) === null || _c === void 0 ? void 0 : _c.date) !== null && _d !== void 0 ? _d : '';
+            this.step = 'date';
+        }
+        if (this.status === 'ready' && !this.days.some(day => !day.disabled))
+            this.status = 'empty';
+        else if (this.status === 'empty' && this.days.some(day => !day.disabled))
+            this.status = 'ready';
+    }
+    onTargetChange() {
+        // A different branch invalidates the whole selection, not just the times.
+        this.selectedDate = '';
+        this.selectedRaw = '';
+        this.draftDate = '';
+        this.step = 'date';
+        this.isOpen = false;
+        this.load();
+    }
+    /** FormElement contract. */
+    reset(newValue) {
+        var _a;
+        this.defaultValue = (_a = newValue) !== null && _a !== void 0 ? _a : '';
+        this.selectedDate = '';
+        this.selectedRaw = '';
+        this.draftDate = '';
+        this.step = 'date';
+    }
+    getValue() {
+        return this.selectedRaw ? this.toFormValue(this.selectedRaw) : this.defaultValue || '';
+    }
+    /** Lets a host force a refetch, e.g. after a token refresh. */
+    async refresh() {
+        this.load();
+    }
+    async openDropdown() {
+        var _a, _b, _c, _d;
+        if (this.status === 'idle')
+            return;
+        const landing = (_d = (_b = (_a = this.days.find(day => day.date === this.selectedDate && !day.disabled)) === null || _a === void 0 ? void 0 : _a.date) !== null && _b !== void 0 ? _b : (_c = this.firstOpenDay()) === null || _c === void 0 ? void 0 : _c.date) !== null && _d !== void 0 ? _d : '';
+        this.draftDate = landing;
+        this.monthKey = landing.slice(0, 7);
+        // Reopening a committed slot lands on the times, where the change is most
+        // likely to be; a first open has nothing to show there yet.
+        this.step = this.selectedRaw ? 'time' : 'date';
+        this.adjustDropdownPosition();
+        this.isOpen = true;
+    }
+    async closeDropdown() {
+        this.isOpen = false;
+    }
+    get isRtl() {
+        return this.language === 'ar' || this.language === 'ku';
+    }
+    get copy() {
+        var _a;
+        return (_a = FALLBACK_COPY[this.language]) !== null && _a !== void 0 ? _a : FALLBACK_COPY.en;
+    }
+    get intlLocales() {
+        // An array lets Intl fall back on its own when a locale is unavailable —
+        // ckb has patchy support in older Android WebViews.
+        if (this.language === 'ar')
+            return ['ar-IQ', 'ar', 'en-GB'];
+        if (this.language === 'ku')
+            return ['ckb-IQ', 'ckb', 'ar-IQ', 'en-GB'];
+        if (this.language === 'ru')
+            return ['ru-RU', 'en-GB'];
+        return ['en-GB'];
+    }
+    /**
+     * `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.
+     */
+    get weekStart() {
+        var _a, _b;
+        if (this.weekStartsOn !== undefined && this.weekStartsOn !== null)
+            return ((+this.weekStartsOn % 7) + 7) % 7;
+        try {
+            const locale = new Intl.Locale(this.intlLocales[0]);
+            const info = (_b = (_a = locale.getWeekInfo) === null || _a === void 0 ? void 0 : _a.call(locale)) !== null && _b !== void 0 ? _b : locale.weekInfo;
+            // ISO numbering: 1 is Monday, 7 is Sunday.
+            if (info === null || info === void 0 ? void 0 : info.firstDay)
+                return info.firstDay % 7;
+        }
+        catch (_c) {
+            /* fall through to the default */
+        }
+        return 1;
+    }
+    pad(n) {
+        return String(n).padStart(2, '0');
+    }
+    get todayIso() {
+        const now = new Date();
+        return `${now.getFullYear()}-${this.pad(now.getMonth() + 1)}-${this.pad(now.getDate())}`;
+    }
+    /** `2026-08-13 09:00 AM` → minutes since midnight. */
+    minutesOf(raw) {
+        var _a, _b;
+        const parts = raw.split(' ');
+        const clock = (_a = parts[1]) !== null && _a !== void 0 ? _a : '00:00';
+        const meridiem = ((_b = parts[2]) !== null && _b !== void 0 ? _b : '').toUpperCase();
+        const [h, m] = clock.split(':').map(x => parseInt(x, 10) || 0);
+        let hour = h % 12;
+        if (meridiem === 'PM')
+            hour += 12;
+        return hour * 60 + m;
+    }
+    toFormValue(raw) {
+        const date = raw.split(' ')[0];
+        const total = this.minutesOf(raw);
+        return `${date}T${this.pad(Math.floor(total / 60))}:${this.pad(total % 60)}`;
+    }
+    queryUrl() {
+        if (!this.calendarApi || !this.companyId || !this.branchId || !this.departmentId || !this.brandId)
+            return null;
+        const from = new Date();
+        const to = new Date();
+        to.setDate(to.getDate() + this.daysAhead);
+        const iso = (d) => `${d.getFullYear()}-${this.pad(d.getMonth() + 1)}-${this.pad(d.getDate())}`;
+        const qs = new URLSearchParams({
+            from: iso(from),
+            to: iso(to),
+            companyId: this.companyId,
+            branchId: this.branchId,
+            departmentId: this.departmentId,
+            brandId: this.brandId,
+        });
+        return `${this.calendarApi}${this.calendarApi.includes('?') ? '&' : '?'}${qs.toString()}`;
+    }
+    /**
+     * 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.
+     */
+    normalise(raw) {
+        return raw
+            .filter(entry => entry && entry.Date && Array.isArray(entry.Times) && entry.Times.length)
+            .map(entry => ({
+            date: entry.Date,
+            times: Array.from(new Set(entry.Times)).sort((a, b) => this.minutesOf(a) - this.minutesOf(b)),
+        }))
+            .sort((a, b) => a.date.localeCompare(b.date));
+    }
+    /** Layers the disable rules over the response without discarding anything. */
+    applyDayRules(days) {
+        const weekdays = parseWeekdayList(this.disabledWeekdays);
+        const dates = parseDateList(this.disabledDates);
+        if (!weekdays.length && !dates.length)
+            return days.map(day => (Object.assign(Object.assign({}, day), { disabled: false })));
+        return days.map(day => (Object.assign(Object.assign({}, day), { disabled: isDayBlocked(day.date, weekdays, dates) })));
+    }
+    firstOpenDay() {
+        return this.days.find(day => !day.disabled);
+    }
+    lastOpenDay() {
+        return [...this.days].reverse().find(day => !day.disabled);
+    }
+    async load() {
+        var _a;
+        const url = this.queryUrl();
+        (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+        if (!url) {
+            this.status = 'idle';
+            this.days = [];
+            return;
+        }
+        this.abortController = new AbortController();
+        this.status = 'loading';
+        try {
+            const response = await fetch(url, {
+                signal: this.abortController.signal,
+                headers: { 'Accept-Language': this.language },
+            });
+            if (!response.ok)
+                throw new Error(`calendar ${response.status}`);
+            this.fetchedDays = this.normalise(await response.json());
+            this.days = this.applyDayRules(this.fetchedDays);
+            const firstOpen = this.firstOpenDay();
+            // Every day blocked reads to a customer exactly as no days at all, so it
+            // gets the empty copy rather than a month of dead cells.
+            if (!firstOpen) {
+                this.status = 'empty';
+                return;
+            }
+            const preset = this.days.find(day => !day.disabled && this.defaultValue && this.defaultValue.startsWith(day.date));
+            this.draftDate = (preset !== null && preset !== void 0 ? preset : firstOpen).date;
+            this.monthKey = this.draftDate.slice(0, 7);
+            this.status = 'ready';
+        }
+        catch (error) {
+            if ((error === null || error === void 0 ? void 0 : error.name) === 'AbortError')
+                return;
+            this.status = 'error';
+        }
+    }
+    getTriggerEl() {
+        return this.el.getElementsByClassName('form-input-select')[0];
+    }
+    isTriggerInView(rect) {
+        return rect.bottom > 0 && rect.top < window.innerHeight && rect.right > 0 && rect.left < window.innerWidth;
+    }
+    /**
+     * 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.
+     */
+    get isSheet() {
+        return typeof window !== 'undefined' && window.matchMedia('(max-width: 599px)').matches;
+    }
+    handleKeyDown(event) {
+        if (!this.isOpen)
+            return;
+        // Escape steps back through the panel before it dismisses it — the times
+        // pane is a drill-down, so leaving the field entirely would overshoot.
+        if (event.key !== 'Escape')
+            return;
+        if (this.step === 'time')
+            this.step = 'date';
+        else
+            this.isOpen = false;
+    }
+    get monthBounds() {
+        var _a, _b, _c, _d;
+        return {
+            min: ((_b = (_a = this.firstOpenDay()) === null || _a === void 0 ? void 0 : _a.date) !== null && _b !== void 0 ? _b : '').slice(0, 7),
+            max: ((_d = (_c = this.lastOpenDay()) === null || _c === void 0 ? void 0 : _c.date) !== null && _d !== void 0 ? _d : '').slice(0, 7),
+        };
+    }
+    /** What the trigger shows: the committed slot, or why it cannot be opened. */
+    triggerText() {
+        if (this.status === 'idle')
+            return this.copy.idle;
+        if (this.status === 'loading')
+            return this.copy.loading;
+        if (this.status === 'empty')
+            return this.copy.empty;
+        if (this.status === 'error')
+            return this.copy.error;
+        if (!this.selectedRaw)
+            return '';
+        const day = this.formatDay(this.selectedDate, { weekday: 'short', day: 'numeric', month: 'short' });
+        return `${day} · ${this.displayTime(this.selectedRaw)}`;
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        // Inside a form, required/disabled/error come from the form's own state, so
+        // this field validates and reports exactly like every other one. Standalone,
+        // there is no form to ask and the props stand on their own.
+        const state = (_a = this.form) === null || _a === void 0 ? void 0 : _a.getInputState(this.name);
+        const localised = this.form ? getInputLocalization(this, state === null || state === void 0 ? void 0 : state.meta, state === null || state === void 0 ? void 0 : state.errorMessage) : null;
+        const label = (localised === null || localised === void 0 ? void 0 : localised.label) || ((_c = (_b = this.localization) === null || _b === void 0 ? void 0 : _b[this.language]) === null || _c === void 0 ? void 0 : _c.label) || this.label;
+        const placeholder = (localised === null || localised === void 0 ? void 0 : localised.placeholder) || ((_e = (_d = this.localization) === null || _d === void 0 ? void 0 : _d[this.language]) === null || _e === void 0 ? void 0 : _e.placeholder) || this.copy.choose;
+        const isRequired = (state === null || state === void 0 ? void 0 : state.isRequired) || this.isRequired;
+        // Idle/loading/empty cannot be opened; error can, because the trigger then
+        // doubles as the retry affordance.
+        const blocked = this.isDisabled || (state === null || state === void 0 ? void 0 : state.disabled) || this.status === 'idle' || this.status === 'loading' || this.status === 'empty';
+        const { min, max } = this.monthBounds;
+        const dropdownProps = {
+            name: this.name,
+            days: this.days,
+            copy: this.copy,
+            status: this.status,
+            isOpen: this.isOpen,
+            idleText: this.copy.idle,
+            step: this.step,
+            today: this.todayIso,
+            weekStart: this.weekStart,
+            monthKey: this.monthKey,
+            monthDirection: this.monthDirection,
+            canGoPrev: !!this.monthKey && this.monthKey > min,
+            canGoNext: !!this.monthKey && this.monthKey < max,
+            activeDate: this.draftDate,
+            selectedRaw: this.selectedRaw,
+            handleMonth: this.handleMonth,
+            handleDate: this.handleDate,
+            handleTime: this.handleTime,
+            handleBack: this.handleBack,
+            handleRetry: () => this.load(),
+            handleDismiss: () => (this.isOpen = false),
+            formatDay: this.formatDay,
+            formatMonth: this.formatMonth,
+            formatWeekday: this.formatWeekday,
+            displayTime: this.displayTime,
+            setElementRef: this.setDropdownRef,
+            direction: this.isRtl ? 'rtl' : 'ltr',
+        };
+        return (h(Host, { key: '6cf14a9b79e19272e42b5ab2fbefd14a57787bc5', translate: "no" }, h("label", { key: '6cce5fb1d4dcaed2265d1e7816f6cd820d0d5d3b', part: `${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: blocked }) }, h(FormInputLabel, { key: 'c43d00c631b979b4f5674772b9faa1cd9b95be9a', name: this.name, label: label, isRequired: isRequired }), h("div", { key: '177a6ba1c45531a41cc35fe8ac3b790f1c2022d9', part: `${this.name}-container form-input-container`, class: cn('form-input-container', { open: this.isOpen, disabled: blocked }) }, h("input", { key: '18ae12a635aa249ca3f17f2667e451d5fa508d52', type: "text", readOnly: true, disabled: blocked, value: this.triggerText(), placeholder: placeholder, onClick: this.toggle, part: `${this.name}-input-select form-input-select`, class: "form-input-style form-input-select branch-date-trigger" }), h("div", { key: '6990d22fb601d9253db9c5d94c0aaa45383b1441', part: `${this.name}-select-icon-container form-input-select-icon-container`, class: "form-input-select-icon-container" }, h(ArrowUpIcon, { key: '9728f5b499eb506ada107b7cb8eccaa7017bbf85', part: `${this.name}-arrow-icon select-arrow`, class: "form-input-select-icon pointer-events-none! arrow cursor-pointer" })),
+        // Stencil only bundles a lazily-portaled component if it also sees
+        // the tag in a template. Same guard shift-select uses.
+        // @ts-ignore
+        false && h("branch-date-dropdown", { key: '67ac2f94834ed15cc40f3c20796779f2d930ab21' }), h("shift-portal", { key: '670754237059fb71f55834b5f25b4575d8094383', tag: "branch-date-dropdown", inheritedClasses: this.dropdownAncestorClasses, componentProps: dropdownProps })), h(FormErrorMessage, { key: '6813b316028e062a518cbd05eaf69b7a114ab36c', name: this.name, isError: !!(state === null || state === void 0 ? void 0 : state.isError), errorMessage: (localised === null || localised === void 0 ? void 0 : localised.errorTextMessage) || '' }))));
+    }
+    static get is() { return "branch-date-picker"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["branch-date-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["branch-date-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field name. Only meaningful when `form` is supplied."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "'bookingDate'"
+            },
+            "form": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormHook<any>",
+                    "resolved": "FormHook<any>",
+                    "references": {
+                        "FormHook": {
+                            "location": "import",
+                            "path": "~features/form-hook/form-hook",
+                            "id": "src/features/form-hook/form-hook.ts::FormHook",
+                            "referenceLocation": "FormHook"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional \u2014 omit for standalone use and listen to `slotChange` instead."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "calendarApi": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full URL of the calendar endpoint, e.g. `https://\u2026/api/public/calendar`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "calendar-api"
+            },
+            "companyId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Integration ids. The field stays idle until all four are present."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "company-id"
+            },
+            "branchId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "branch-id"
+            },
+            "departmentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "department-id"
+            },
+            "brandId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "brand-id"
+            },
+            "daysAhead": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How far ahead to ask. The endpoint caps its own response at 15 days."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "days-ahead",
+                "defaultValue": "30"
+            },
+            "disabledWeekdays": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number[]",
+                    "resolved": "number[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Weekdays the branch never books on, `0` Sunday \u2026 `6` Saturday. Accepts an\narray or a `\"5,6\"` string. Matching days stay on the grid, struck through,\nrather than being dropped \u2014 see `~lib/slot-day-rules`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled-weekdays"
+            },
+            "disabledDates": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "One-off blackout dates as `YYYY-MM-DD`, same accepted shapes as above."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled-dates"
+            },
+            "weekStartsOn": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "First column of the grid, `0` Sunday \u2026 `6` Saturday. Left unset it comes\nfrom the active locale, which is right far more often than any constant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "week-starts-on"
+            },
+            "gap": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Gap between the trigger and the panel, matching shift-select's default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap",
+                "defaultValue": "8"
+            },
+            "minPanelWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Floor for the panel width on desktop. The panel is portaled to `<body>` and\npositioned fixed, so it is free to be wider than the field \u2014 and than the\nform around it \u2014 which is the point: seven columns stop reading as a\ncalendar much below this, and form fields are routinely narrower."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-panel-width",
+                "defaultValue": "380"
+            },
+            "maxPanelHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tallest the panel may get before its panes scroll. Also capped to the viewport."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-panel-height",
+                "defaultValue": "460"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "wrapperId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "wrapper-id"
+            },
+            "wrapperClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "wrapper-class"
+            },
+            "isRequired": {
+                "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-required",
+                "defaultValue": "false"
+            },
+            "isDisabled": {
+                "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-disabled",
+                "defaultValue": "false"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LanguageKeys",
+                    "resolved": "\"ar\" | \"en\" | \"ku\" | \"ru\"",
+                    "references": {
+                        "LanguageKeys": {
+                            "location": "import",
+                            "path": "~features/multi-lingual",
+                            "id": "src/features/multi-lingual/index.ts::LanguageKeys",
+                            "referenceLocation": "LanguageKeys"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "language",
+                "defaultValue": "'en'"
+            },
+            "localization": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormInputLocalization",
+                    "resolved": "T",
+                    "references": {
+                        "FormInputLocalization": {
+                            "location": "import",
+                            "path": "~features/form-hook",
+                            "id": "src/features/form-hook/index.ts::FormInputLocalization",
+                            "referenceLocation": "FormInputLocalization"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "defaultValue": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Preselects a slot, in the same `YYYY-MM-DDTHH:mm` form the field emits."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-value"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "status": {},
+            "days": {},
+            "selectedDate": {},
+            "selectedRaw": {},
+            "isOpen": {},
+            "dropdownAncestorClasses": {},
+            "draftDate": {},
+            "step": {},
+            "monthKey": {},
+            "monthDirection": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "slotChange",
+                "name": "slotChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires on every confirmed day+time selection. The standalone contract."
+                },
+                "complexType": {
+                    "original": "BranchSlotSelection",
+                    "resolved": "BranchSlotSelection",
+                    "references": {
+                        "BranchSlotSelection": {
+                            "location": "import",
+                            "path": "./branch-slot-picker",
+                            "id": "src/components/form-elements/branch-slot-picker.tsx::BranchSlotSelection",
+                            "referenceLocation": "BranchSlotSelection"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Lets a host force a refetch, e.g. after a token refresh.",
+                    "tags": []
+                }
+            },
+            "openDropdown": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "closeDropdown": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isOpen",
+                "methodName": "onOpenChange"
+            }, {
+                "propName": "disabledWeekdays",
+                "methodName": "onRulesChange"
+            }, {
+                "propName": "disabledDates",
+                "methodName": "onRulesChange"
+            }, {
+                "propName": "branchId",
+                "methodName": "onTargetChange"
+            }, {
+                "propName": "departmentId",
+                "methodName": "onTargetChange"
+            }, {
+                "propName": "brandId",
+                "methodName": "onTargetChange"
+            }, {
+                "propName": "companyId",
+                "methodName": "onTargetChange"
+            }];
+    }
+}