@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/collection/components/pf-date-picker/pf-date-picker.js

@@ -0,0 +1,697 @@
+import { composeDescribedBy, Keys, observeAnchoredPosition, parseISODate, } from "@pitchfork-ui/core";
+import { applyControlValidity } from "../../form-validity";
+import { controlAriaLabel } from "../../control-label";
+import { placePopover } from "../../place-popover";
+import { h, Host, } from "@stencil/core";
+/**
+ * A form-associated date field: a trigger that opens `pf-calendar` in a
+ * popover.
+ *
+ * Form-associated, which the React `DatePicker` is not — it is a button and a
+ * portal, so its value reaches a surrounding `<form>` only if the consumer
+ * wires it there themselves. Here the value is submitted as `YYYY-MM-DD`,
+ * constraint validation works, and Angular's generated accessor has something
+ * to bind to.
+ *
+ * The panel is a `popover`, so light dismiss and Escape are the browser's.
+ * Unlike `pf-dropdown`, the trigger and the panel are both in *this* shadow
+ * root, so `aria-controls` resolves and is worth setting — a same-root IDREF
+ * is the one case that works, measured.
+ *
+ * @part field - the wrapper around label, control and messages.
+ * @part label - the label element.
+ * @part trigger - the button that opens the calendar.
+ * @part clear - the clear button.
+ * @part panel - the floating panel holding the calendar.
+ * @part calendar - the calendar itself.
+ * @part description - the hint text below the control.
+ * @part error - the error message below the control.
+ */
+export class PfDatePicker {
+    el;
+    internals;
+    /**
+     * Submitted under this name. Reflected, because the submission name comes
+     * from the content attribute and the generated bindings set properties.
+     */
+    name;
+    /** The selected date as `YYYY-MM-DD`, or empty. */
+    value = '';
+    /** Whether the calendar is showing. Reflected for the stylesheet. */
+    open = false;
+    /** Visible label. In the same root as the trigger, so `for` works. */
+    label;
+    /** Hint text below the control. */
+    description;
+    /** Error message. Its presence is what marks the control invalid. */
+    error;
+    placeholder = 'Select a date';
+    required = false;
+    disabled = false;
+    /** Offer a button that empties the field. */
+    allowClear = false;
+    /** Earliest selectable date, as `YYYY-MM-DD`. */
+    min;
+    /** Latest selectable date, as `YYYY-MM-DD`. */
+    max;
+    startYear;
+    endYear;
+    showOutsideDays = true;
+    /** A predicate for days that cannot be chosen; see `pf-calendar`. */
+    isDateDisabled;
+    /** Fires when a date is chosen or cleared. */
+    pfChange;
+    /** Fires whenever the calendar opens or closes, whoever caused it. */
+    pfOpenChange;
+    /** What a form reset restores; `value` has been overwritten by then. */
+    initialValue = '';
+    stopObserving;
+    componentWillLoad() {
+        this.initialValue = this.value ?? '';
+        this.syncFormState();
+    }
+    disconnectedCallback() {
+        this.stopObserving?.();
+    }
+    syncFormState() {
+        this.internals.setFormValue(this.value || null);
+        applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);
+    }
+    /** The one place an open or close is announced, whatever caused it. */
+    syncOpen(next, previous) {
+        if (next)
+            this.showPanel();
+        else
+            this.hidePanel();
+        if (next !== previous)
+            this.pfOpenChange.emit({ open: next });
+    }
+    /** Opens the calendar. */
+    async show() {
+        if (!this.disabled)
+            this.open = true;
+    }
+    /** Closes the calendar. */
+    async hide() {
+        this.open = false;
+    }
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    async getValidationMessage() {
+        return this.internals.validationMessage;
+    }
+    /** A reset restores the value the field started with, not an empty one. */
+    formResetCallback() {
+        this.value = this.initialValue;
+    }
+    get panel() {
+        return this.el.shadowRoot?.querySelector('[part="panel"]') ?? null;
+    }
+    get trigger() {
+        return this.el.shadowRoot?.querySelector('[part="trigger"]') ?? null;
+    }
+    get calendar() {
+        return (this.el.shadowRoot?.querySelector('pf-calendar') ?? null);
+    }
+    showPanel() {
+        const panel = this.panel;
+        if (this.disabled || !panel || panel.matches(':popover-open'))
+            return;
+        panel.showPopover();
+        this.stopObserving?.();
+        this.stopObserving = observeAnchoredPosition({
+            getAnchor: () => this.trigger,
+            getFloating: () => panel,
+            align: 'start',
+            matchAnchorWidth: false,
+            flip: true,
+            onChange: ({ left, top }) => placePopover(panel, left, top),
+        });
+        // Focus the grid, not the panel: the calendar owns its own tab stop, and
+        // it asks for focus through a method rather than having it reached for.
+        void this.calendar?.focusSelectedDay();
+    }
+    hidePanel() {
+        this.stopObserving?.();
+        this.stopObserving = undefined;
+        const panel = this.panel;
+        if (panel?.matches(':popover-open'))
+            panel.hidePopover();
+    }
+    /**
+     * Mirrors a browser-driven close — a light dismiss or Escape — back into
+     * `open`, which is what then announces it.
+     */
+    onToggle = (event) => {
+        const nowOpen = event.newState === 'open';
+        if (this.open !== nowOpen)
+            this.open = nowOpen;
+        if (!nowOpen)
+            this.trigger?.focus();
+    };
+    /**
+     * Listens on the calendar element itself, not on the host.
+     *
+     * Both were tried. A `@Listen('pfChange')` on the host sees the calendar's
+     * event *and* this element's own — a Stencil event is composed, so by then
+     * both have been retargeted to the host and `event.target` cannot tell them
+     * apart. Worse, `stopPropagation()` there does not help: the consumer's
+     * listener is on that same node, and stopping propagation never stops
+     * same-node listeners, so every pick reported twice. Caught by a test that
+     * counted them.
+     *
+     * On the calendar, the event is stopped before it reaches the host at all,
+     * which does not depend on listener registration order the way
+     * `stopImmediatePropagation` would.
+     */
+    bindCalendar = (element) => {
+        if (!element || element === this.boundCalendar)
+            return;
+        this.boundCalendar = element;
+        element.addEventListener('pfChange', this.onCalendarChange);
+    };
+    boundCalendar;
+    onCalendarChange = (event) => {
+        event.stopPropagation();
+        this.value = event.detail.value;
+        this.pfChange.emit({ value: this.value });
+        this.open = false;
+        this.trigger?.focus();
+    };
+    clear = (event) => {
+        event.stopPropagation();
+        if (!this.value)
+            return;
+        this.value = '';
+        this.pfChange.emit({ value: '' });
+    };
+    /**
+     * Down opens the calendar from a closed trigger, as a popup button should.
+     * Escape is the browser's while the panel is open — `popover="auto"` handles
+     * it — so there is nothing to do here for it.
+     */
+    onTriggerKeyDown = (event) => {
+        if (this.open || this.disabled)
+            return;
+        if (event.key === Keys.ArrowDown || event.key === Keys.Enter || event.key === Keys.Space) {
+            if (event.key === Keys.ArrowDown) {
+                event.preventDefault();
+                this.open = true;
+            }
+        }
+    };
+    /** `MMM D, YYYY`, matching the React component's trigger text. */
+    formatted() {
+        const date = parseISODate(this.value);
+        if (!date)
+            return '';
+        return new Intl.DateTimeFormat('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+        }).format(date);
+    }
+    render() {
+        const describedBy = composeDescribedBy(this.description && 'description', this.error && 'error');
+        const text = this.formatted();
+        return (h(Host, { key: 'e12dc3b1467bfa1b6b47ad6ecde5ff3740f84191' }, h("div", { key: 'da81455cc8034d76ee9a5632bf3d7bba8a59ca36', class: "field", part: "field" }, this.label && (h("label", { key: '7d5e93bbb12ebaec62e541e1e7ff7051ffd1d9ba', class: "label", part: "label", htmlFor: "trigger" }, this.label, this.required && (h("span", { key: '96da5bb4885737801b0934459809761016eff84b', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '7d4bb358df9ec3477847a7456aea8aaede3c6bd1', class: "row" }, h("button", { key: '6f0c8095438a87284f339c58cf2bd37ac6d6e8c3', id: "trigger", "aria-label": controlAriaLabel(this.el, this.label), part: "trigger", class: { trigger: true, 'trigger--invalid': Boolean(this.error) }, type: "button", disabled: this.disabled, "aria-haspopup": "dialog", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "panel", "aria-invalid": this.error ? 'true' : null, "aria-required": this.required ? 'true' : null, "aria-describedby": describedBy, onClick: () => {
+                if (!this.disabled)
+                    this.open = !this.open;
+            }, onKeyDown: this.onTriggerKeyDown }, h("span", { key: '7d163538c024cb22bf62556ac45fe2c6412df31b', class: { value: true, 'value--placeholder': !text } }, text || this.placeholder), h("pf-icon", { key: '0453fc920b7ae38e155a09e355b7a3d574604d14', name: "calendar" })), this.allowClear && this.value && (h("button", { key: '2e933393553ad120ee949673477b7106e94915cb', class: "clear", part: "clear", type: "button", "aria-label": "Clear selected date", disabled: this.disabled, onClick: this.clear }, h("pf-icon", { key: 'dc784a97f467297a6cb0cb691c52006fa1e32c24', name: "circle-xmark" })))), this.description && (h("p", { key: '087d6e84fc1a653b8e5b92a2bf4c8148f4d16f39', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: '292095f16e9328828a7f821b42d47827ce0d5335', class: "error", part: "error", id: "error" }, this.error))), h("div", { key: 'a3f5435249a41d602f160e195a8a551d7f40e23a', id: "panel", part: "panel", class: "panel", popover: "auto", role: "dialog", "aria-label": "Choose a date", onToggle: this.onToggle }, h("pf-calendar", { key: '8db356ae8180b9eaae81df8c560a0f8db68664f8', ref: this.bindCalendar, part: "calendar", value: this.value || undefined, min: this.min, max: this.max, startYear: this.startYear, endYear: this.endYear, showOutsideDays: this.showOutsideDays, isDateDisabled: this.isDateDisabled }))));
+    }
+    static get is() { return "pf-date-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-date-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-date-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Submitted under this name. Reflected, because the submission name comes\nfrom the content attribute and the generated bindings set properties."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected date as `YYYY-MM-DD`, or empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the calendar is showing. Reflected for the stylesheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible label. In the same root as the trigger, so `for` works."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Hint text below the control."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message. Its presence is what marks the control invalid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Select a date'"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "allowClear": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Offer a button that empties the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-clear",
+                "defaultValue": "false"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Earliest selectable date, as `YYYY-MM-DD`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Latest selectable date, as `YYYY-MM-DD`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "startYear": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "start-year"
+            },
+            "endYear": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "end-year"
+            },
+            "showOutsideDays": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-outside-days",
+                "defaultValue": "true"
+            },
+            "isDateDisabled": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(date: Date) => boolean",
+                    "resolved": "((date: Date) => boolean) | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A predicate for days that cannot be chosen; see `pf-calendar`."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfChange",
+                "name": "pfChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a date is chosen or cleared."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "pfOpenChange",
+                "name": "pfOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires whenever the calendar opens or closes, whoever caused it."
+                },
+                "complexType": {
+                    "original": "{ open: boolean }",
+                    "resolved": "{ open: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the calendar.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the calendar.",
+                    "tags": []
+                }
+            },
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getValidationMessage": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "error",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "required",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "open",
+                "methodName": "syncOpen"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=pf-date-picker.js.map