@sekiui/elements 0.0.60 → 0.0.63

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

@@ -0,0 +1,628 @@
+import { h } from "@stencil/core";
+import { format } from "../../utils/calendar/date-utils";
+/**
+ * seki-date-picker: A date picker component with popover calendar
+ *
+ * @component DatePicker
+ * @example
+ * <seki-date-picker placeholder="Pick a date"></seki-date-picker>
+ * <seki-date-picker mode="range" placeholder="Pick a date range"></seki-date-picker>
+ */
+export class SekiDatePicker {
+    constructor() {
+        /**
+         * Selection mode: single date or date range
+         * @default 'single'
+         */
+        this.mode = 'single';
+        /**
+         * Placeholder text when no date is selected
+         */
+        this.placeholder = 'Pick a date';
+        /**
+         * Format string for displaying the date
+         * @default 'PPP'
+         */
+        this.displayFormat = 'PPP';
+        /**
+         * Whether the date picker is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the field is required
+         */
+        this.required = false;
+        /**
+         * Whether the popover is open
+         */
+        this.isOpen = false;
+        this.handleTriggerClick = () => {
+            if (this.disabled)
+                return;
+            this.isOpen = !this.isOpen;
+            if (this.isOpen) {
+                this.sekiOpen.emit();
+                requestAnimationFrame(() => {
+                    this.positionPopover();
+                });
+            }
+            else {
+                this.sekiClose.emit();
+            }
+        };
+        this.handleDateSelect = (e) => {
+            this.value = e.detail;
+            this.sekiChange.emit(e.detail);
+            this.close();
+        };
+        this.handleRangeSelect = (e) => {
+            var _a, _b;
+            this.rangeFrom = (_a = e.detail.from) !== null && _a !== void 0 ? _a : undefined;
+            this.rangeTo = (_b = e.detail.to) !== null && _b !== void 0 ? _b : undefined;
+            if (e.detail.from && e.detail.to) {
+                this.sekiChange.emit(e.detail);
+                this.close();
+            }
+        };
+    }
+    componentWillLoad() {
+        if ('attachInternals' in HTMLElement.prototype) {
+            this.internals = this.el.attachInternals();
+        }
+        this.updateFormValue();
+    }
+    updateFormValue() {
+        if (this.internals && typeof this.internals.setFormValue === 'function') {
+            const value = this.parseDate(this.value);
+            this.internals.setFormValue(value ? value.toISOString() : '');
+        }
+    }
+    parseDate(value) {
+        if (!value)
+            return null;
+        if (value instanceof Date)
+            return value;
+        const parsed = new Date(value);
+        return isNaN(parsed.getTime()) ? null : parsed;
+    }
+    formatDisplayValue() {
+        if (this.mode === 'single') {
+            const date = this.parseDate(this.value);
+            return date ? format(date, this.displayFormat) : '';
+        }
+        else {
+            const from = this.parseDate(this.rangeFrom);
+            const to = this.parseDate(this.rangeTo);
+            if (from && to) {
+                return `${format(from, 'LLL dd, y')} - ${format(to, 'LLL dd, y')}`;
+            }
+            else if (from) {
+                return `${format(from, 'LLL dd, y')} - ...`;
+            }
+            return '';
+        }
+    }
+    positionPopover() {
+        if (!this.triggerRef || !this.popoverRef)
+            return;
+        const triggerRect = this.triggerRef.getBoundingClientRect();
+        const popoverRect = this.popoverRef.getBoundingClientRect();
+        const viewport = {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        };
+        const margin = 8;
+        // Default position: below the trigger
+        let top = triggerRect.bottom + margin;
+        let left = triggerRect.left;
+        // Check if popover goes below viewport
+        if (top + popoverRect.height > viewport.height - margin) {
+            // Position above trigger
+            top = triggerRect.top - popoverRect.height - margin;
+        }
+        // Check if popover goes beyond right edge
+        if (left + popoverRect.width > viewport.width - margin) {
+            left = viewport.width - popoverRect.width - margin;
+        }
+        // Check if popover goes beyond left edge
+        if (left < margin) {
+            left = margin;
+        }
+        this.popoverRef.style.position = 'fixed';
+        this.popoverRef.style.top = `${top}px`;
+        this.popoverRef.style.left = `${left}px`;
+        this.popoverRef.style.zIndex = '1000';
+    }
+    handleKeyDown(event) {
+        var _a;
+        if (event.key === 'Escape' && this.isOpen) {
+            event.preventDefault();
+            this.close();
+            (_a = this.triggerRef) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    handleDocumentClick(event) {
+        if (!this.isOpen)
+            return;
+        const target = event.target;
+        if (!this.el.contains(target)) {
+            this.close();
+        }
+    }
+    /**
+     * Open the date picker popover
+     */
+    async open() {
+        if (this.disabled)
+            return;
+        this.isOpen = true;
+        this.sekiOpen.emit();
+        requestAnimationFrame(() => {
+            this.positionPopover();
+        });
+    }
+    /**
+     * Close the date picker popover
+     */
+    async close() {
+        this.isOpen = false;
+        this.sekiClose.emit();
+    }
+    /**
+     * Toggle the date picker popover
+     */
+    async toggle() {
+        if (this.isOpen) {
+            await this.close();
+        }
+        else {
+            await this.open();
+        }
+    }
+    render() {
+        const displayValue = this.formatDisplayValue();
+        const hasValue = !!displayValue;
+        const selectedDate = this.parseDate(this.value);
+        const rangeFrom = this.parseDate(this.rangeFrom);
+        const rangeTo = this.parseDate(this.rangeTo);
+        return (h("div", { key: 'f609291571d83414125e31ab82c4388bde7b0c03', class: "seki-date-picker" }, h("button", { key: '6669d6fca348256fa18b3c3b6f1c3c7947fcece2', type: "button", ref: el => (this.triggerRef = el), class: {
+                'seki-date-picker__trigger': true,
+                'seki-date-picker__trigger--open': this.isOpen,
+                'seki-date-picker__trigger--disabled': this.disabled,
+                'seki-date-picker__trigger--has-value': hasValue,
+            }, disabled: this.disabled, "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.ariaLabel || this.placeholder, onClick: this.handleTriggerClick }, h("svg", { key: 'ed51407cd4ce36f7476c0444668d7979afa817de', class: "seki-date-picker__icon", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { key: 'c92d1cf568fddf4f512797b947447fd46f90a360', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), h("line", { key: 'efaa31e1f77bb214e233ae0c957c57c6e4bc88ab', x1: "16", y1: "2", x2: "16", y2: "6" }), h("line", { key: 'cd83d9ca4c3cc0f45ba4568fd92a42a9ca29d99c', x1: "8", y1: "2", x2: "8", y2: "6" }), h("line", { key: '98cef77937eb9672bb534f4603aed1f020bb1a7d', x1: "3", y1: "10", x2: "21", y2: "10" })), h("span", { key: 'ac4ff6d0d736a0d6e3b2ee4c993cd705c836fd0d', class: "seki-date-picker__value" }, hasValue ? displayValue : this.placeholder)), this.isOpen && (h("div", { key: '2f34baedd3be65b2f3f6809a23750dfb53a62bca', ref: el => (this.popoverRef = el), class: "seki-date-picker__popover", role: "dialog", "aria-modal": "true", "aria-label": "Choose date" }, h("seki-calendar", { key: '79f3adea8c5a52404dcda16fd2089b34ff1ad67a', mode: this.mode, selected: selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.toISOString(), "range-from": rangeFrom === null || rangeFrom === void 0 ? void 0 : rangeFrom.toISOString(), "range-to": rangeTo === null || rangeTo === void 0 ? void 0 : rangeTo.toISOString(), "min-date": this.minDate, "max-date": this.maxDate, onSekiSelect: this.handleDateSelect, onSekiRangeSelect: this.handleRangeSelect })))));
+    }
+    static get is() { return "seki-date-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-date-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-date-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DatePickerMode",
+                    "resolved": "\"range\" | \"single\"",
+                    "references": {
+                        "DatePickerMode": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/date-picker/seki-date-picker.tsx",
+                            "id": "src/components/date-picker/seki-date-picker.tsx::DatePickerMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'single'"
+                        }],
+                    "text": "Selection mode: single date or date range"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'single'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "Date | string",
+                    "resolved": "Date | string | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected date (for single mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "rangeFrom": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "Date | string",
+                    "resolved": "Date | string | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Start of date range (for range mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "range-from"
+            },
+            "rangeTo": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "Date | string",
+                    "resolved": "Date | string | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "End of date range (for range mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "range-to"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text when no date is selected"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Pick a date'"
+            },
+            "displayFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'PPP'"
+                        }],
+                    "text": "Format string for displaying the date"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-format",
+                "defaultValue": "'PPP'"
+            },
+            "minDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date | string",
+                    "resolved": "Date | string | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum selectable date"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-date"
+            },
+            "maxDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date | string",
+                    "resolved": "Date | string | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum selectable date"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-date"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the date picker is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Form field name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA label for accessibility"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sekiChange",
+                "name": "sekiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a date is selected"
+                },
+                "complexType": {
+                    "original": "Date | DateRange",
+                    "resolved": "Date | DateRange",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        },
+                        "DateRange": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/date-picker/seki-date-picker.tsx",
+                            "id": "src/components/date-picker/seki-date-picker.tsx::DateRange"
+                        }
+                    }
+                }
+            }, {
+                "method": "sekiOpen",
+                "name": "sekiOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the popover opens"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "sekiClose",
+                "name": "sekiClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the popover closes"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Open the date picker popover",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Close the date picker popover",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle the date picker popover",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "updateFormValue"
+            }, {
+                "propName": "rangeFrom",
+                "methodName": "updateFormValue"
+            }, {
+                "propName": "rangeTo",
+                "methodName": "updateFormValue"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}