adp-web-components 0.3.13 → 0.3.15

package/dist/collection/components/form-elements/branch-slot-picker.js

@@ -0,0 +1,921 @@
+/*!
+ * 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 { getInputLocalization } from "../../features/form-hook/index";
+import { FormInputLabel } from "./components/form-input-label";
+import { FormErrorMessage } from "./components/form-error-message";
+const FALLBACK_COPY = {
+    en: {
+        day: 'Pick a day',
+        time: 'Pick a time',
+        days: 'days available',
+        slots: 'slots',
+        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: {
+        day: 'اختر اليوم',
+        time: 'اختر الوقت',
+        days: 'يوماً متاحاً',
+        slots: 'موعداً',
+        idle: 'اختر الفرع أولاً',
+        empty: 'لا توجد أوقات متاحة في هذا الفرع',
+        error: 'تعذّر تحميل الأوقات المتاحة',
+        retry: 'أعد المحاولة',
+        choose: 'اختر التاريخ والوقت',
+        loading: 'جارٍ تحميل الأوقات…',
+    },
+    ku: {
+        day: 'ڕۆژێک هەڵبژێرە',
+        time: 'کاتێک هەڵبژێرە',
+        days: 'ڕۆژی بەردەست',
+        slots: 'کات',
+        idle: 'سەرەتا لقێک هەڵبژێرە',
+        empty: 'هیچ کاتێکی بەردەست نییە لەم لقەدا',
+        error: 'نەتوانرا کاتە بەردەستەکان باربکرێن',
+        retry: 'دووبارە هەوڵ بدە',
+        choose: 'بەروار و کات هەڵبژێرە',
+        loading: 'کاتەکان باردەکرێن…',
+    },
+    ru: {
+        day: 'Выберите день',
+        time: 'Выберите время',
+        days: 'дней доступно',
+        slots: 'слотов',
+        idle: 'Сначала выберите филиал',
+        empty: 'В этом филиале нет свободного времени',
+        error: 'Не удалось загрузить свободное время',
+        retry: 'Повторить',
+        choose: 'Выберите дату и время',
+        loading: 'Загрузка времени…',
+    },
+};
+/**
+ * Branch-aware booking slot field.
+ *
+ * Presents as a normal dropdown — the same `form-input-select` trigger as every
+ * other select in the form — and portals its panel onto `document.body` through
+ * `shift-portal`, exactly as `shift-select` does.
+ *
+ * Standalone by design: `form` is optional. Drop `<branch-slot-picker>` on any
+ * page, in a PWA or in a native WebView, give it the four ids, and listen to
+ * `slotChange`.
+ */
+export class BranchSlotPicker {
+    constructor() {
+        /** Field name. Only meaningful when `form` is supplied. */
+        this.name = 'bookingSlot';
+        /** 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;
+        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 being browsed in the panel. Kept apart from `selectedDate` so that
+         * opening the panel, scrubbing through days and then dismissing it leaves the
+         * committed selection untouched.
+         */
+        this.draftDate = '';
+        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 chip.
+            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.setDropdownRef = (el) => {
+            this.dropdownEl = el;
+        };
+        /** Mirrors shift-select: anchor to the trigger, flip up when space 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;
+            }
+            const width = Math.max(rect.width, 288);
+            dropdown.style.setProperty('--branch-slot-width', `${width}px`);
+            const spaceBelow = window.innerHeight - rect.bottom - this.gap * 2;
+            const spaceAbove = rect.top - this.gap * 2;
+            const openUpwards = spaceBelow < dropdown.offsetHeight && spaceAbove > spaceBelow;
+            // Cap the panel to the room that actually exists. Without this the fixed
+            // 320px runs off-screen in landscape and with the keyboard up, and there is
+            // nothing to scroll to reach it.
+            dropdown.style.setProperty('--branch-slot-max-height', `${Math.max(160, Math.min(320, openUpwards ? spaceAbove : spaceBelow))}px`);
+            const height = dropdown.offsetHeight;
+            // 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, window.innerWidth - width - this.gap));
+            dropdown.style.setProperty('--branch-slot-left', `${left}px`);
+            dropdown.style.setProperty('--branch-slot-top', `${openUpwards ? rect.top - height - this.gap : rect.bottom + this.gap}px`);
+        };
+        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();
+        };
+        this.handleDay = (date) => {
+            this.draftDate = date;
+        };
+        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}-slot-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 dropdown 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);
+    }
+    onTargetChange() {
+        // A different branch invalidates the whole selection, not just the times.
+        this.selectedDate = '';
+        this.selectedRaw = '';
+        this.draftDate = '';
+        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 = '';
+    }
+    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;
+        if (this.status === 'idle')
+            return;
+        this.draftDate = this.selectedDate || ((_a = this.days[0]) === null || _a === void 0 ? void 0 : _a.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'];
+    }
+    pad(n) {
+        return String(n).padStart(2, '0');
+    }
+    /** `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 (branch 45 returns every time twice), 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));
+    }
+    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.days = this.normalise(await response.json());
+            if (!this.days.length) {
+                this.status = 'empty';
+                return;
+            }
+            const preset = this.days.find(day => this.defaultValue && this.defaultValue.startsWith(day.date));
+            this.draftDate = (preset !== null && preset !== void 0 ? preset : this.days[0]).date;
+            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-slot-dropdown.css.
+     */
+    get isSheet() {
+        return typeof window !== 'undefined' && window.matchMedia('(max-width: 599px)').matches;
+    }
+    handleKeyDown(event) {
+        if (!this.isOpen)
+            return;
+        if (event.key === 'Escape')
+            this.isOpen = false;
+    }
+    /** 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 dropdownProps = {
+            name: this.name,
+            days: this.days,
+            copy: this.copy,
+            status: this.status,
+            isOpen: this.isOpen,
+            idleText: this.copy.idle,
+            activeDate: this.draftDate,
+            handleDay: this.handleDay,
+            handleTime: this.handleTime,
+            handleRetry: () => this.load(),
+            handleDismiss: () => (this.isOpen = false),
+            selectedRaw: this.selectedRaw,
+            formatDay: this.formatDay,
+            displayTime: this.displayTime,
+            setElementRef: this.setDropdownRef,
+            direction: this.isRtl ? 'rtl' : 'ltr',
+        };
+        return (h(Host, { key: 'f25a68a643369d3071a1d1634882d50703ede14d', translate: "no" }, h("label", { key: 'fbfdec7c4a82efc2fe6dfe8508120baab17cbe09', part: `${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: blocked }) }, h(FormInputLabel, { key: 'f8b700c24e388e90ba72735f9b6f0fc40e71779c', name: this.name, label: label, isRequired: isRequired }), h("div", { key: '7cff4cd85d9ff56544fbb3ecbc985d171fcf2c68', part: `${this.name}-container form-input-container`, class: cn('form-input-container', { open: this.isOpen, disabled: blocked }) }, h("input", { key: 'd3f6d0e49d24550a960c3deb62fcdc7a80abfa06', 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-slot-trigger" }), h("div", { key: '913e0d8268f8e2ad2f1a7a121badbe6878ef4a50', part: `${this.name}-select-icon-container form-input-select-icon-container`, class: "form-input-select-icon-container" }, h(ArrowUpIcon, { key: '380c441c1ff629206f2490d63866c62bdbe1f1eb', 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-slot-dropdown", { key: '76a27a164f1fee2c0b0f9282108556a9318f3ae9' }), h("shift-portal", { key: 'ac4ad2c23dde76bc1091fba264faed0a591ab544', tag: "branch-slot-dropdown", inheritedClasses: this.dropdownAncestorClasses, componentProps: dropdownProps })), h(FormErrorMessage, { key: 'e6fbd13c4674de5801eeabb981998da37f82183f', 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-slot-picker"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["branch-slot-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["branch-slot-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": "'bookingSlot'"
+            },
+            "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"
+            },
+            "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"
+            },
+            "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": {}
+        };
+    }
+    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": "local",
+                            "path": "/home/vsts/work/1/s/ADP.WebComponents/adp-web-components/src/components/form-elements/branch-slot-picker.tsx",
+                            "id": "src/components/form-elements/branch-slot-picker.tsx::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": "branchId",
+                "methodName": "onTargetChange"
+            }, {
+                "propName": "departmentId",
+                "methodName": "onTargetChange"
+            }, {
+                "propName": "brandId",
+                "methodName": "onTargetChange"
+            }, {
+                "propName": "companyId",
+                "methodName": "onTargetChange"
+            }];
+    }
+}