@xplor-education/core-stencil-components 2.0.0

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

@@ -0,0 +1,694 @@
+import { Host, h } from "@stencil/core";
+export class XplorDatePicker {
+    constructor() {
+        /** Selected date in YYYY-MM-DD format */
+        this.value = '';
+        this.label = '';
+        this.placeholder = 'Select date';
+        /** 'date' or 'month' */
+        this.type = 'date';
+        /** For month type: select start or end of month */
+        this.monthType = 'start';
+        /** 'input' shows text input, 'text' shows clickable text */
+        this.display = 'input';
+        /** Date display format: 'short' (DD/MM/YYYY), 'long' (1 Jan 2025), 'iso' (YYYY-MM-DD) */
+        this.dateFormat = 'short';
+        this.min = '';
+        this.max = '';
+        this.readonly = false;
+        this.disabled = false;
+        this.clearable = false;
+        this.closeOnSelect = true;
+        this.bgColor = 'white';
+        this.color = '#008480';
+        this.startWeekOnSunday = true;
+        this.error = '';
+        this.hideDetails = 'auto';
+        this.required = false;
+        this.isOpen = false;
+        this.inputText = '';
+        this.dropdownPosition = 'bottom';
+        this.toggleDropdown = () => {
+            if (this.disabled || this.readonly)
+                return;
+            this.updateDropdownPosition();
+            this.isOpen = !this.isOpen;
+        };
+        this.handleInputFocus = (event) => {
+            this.xplorFocus.emit(event);
+        };
+        this.handleInputBlur = (event) => {
+            this.xplorBlur.emit(event);
+            // Try to parse typed text
+            const parsed = this.parseInputText(this.inputText);
+            if (parsed && this.isDateInRange(parsed)) {
+                this.value = parsed;
+                this.inputText = this.formatDateForDisplay(parsed);
+                this.dateChange.emit(parsed);
+            }
+            else if (this.value) {
+                // Revert to current value display
+                this.inputText = this.formatDateForDisplay(this.value);
+            }
+            else {
+                this.inputText = '';
+            }
+        };
+        this.handleInputChange = (event) => {
+            const input = event.target;
+            this.inputText = input.value;
+        };
+        this.handleDateSelected = (event) => {
+            event.stopPropagation();
+            const iso = event.detail;
+            if (!this.isDateInRange(iso))
+                return;
+            if (this.type === 'month') {
+                const d = this.parseISODate(iso);
+                if (d) {
+                    let finalDate;
+                    if (this.monthType === 'end') {
+                        finalDate = new Date(d.getFullYear(), d.getMonth() + 1, 0);
+                    }
+                    else {
+                        finalDate = new Date(d.getFullYear(), d.getMonth(), 1);
+                    }
+                    const finalIso = this.toISO(finalDate);
+                    this.value = finalIso;
+                    this.inputText = this.formatDateForDisplay(finalIso);
+                    this.dateChange.emit(finalIso);
+                }
+            }
+            else {
+                this.value = iso;
+                this.inputText = this.formatDateForDisplay(iso);
+                this.dateChange.emit(iso);
+            }
+            if (this.closeOnSelect) {
+                this.isOpen = false;
+            }
+        };
+        this.handleClear = (event) => {
+            event.stopPropagation();
+            this.value = '';
+            this.inputText = '';
+            this.dateChange.emit('');
+            this.xplorClear.emit();
+        };
+        this.handleTextClick = () => {
+            if (this.disabled || this.readonly)
+                return;
+            this.updateDropdownPosition();
+            this.isOpen = !this.isOpen;
+        };
+    }
+    componentWillLoad() {
+        if (this.value) {
+            this.inputText = this.formatDateForDisplay(this.value);
+        }
+    }
+    handleDocumentClick(event) {
+        const target = event.target;
+        if (!this.el.contains(target)) {
+            this.isOpen = false;
+        }
+    }
+    /** Parse YYYY-MM-DD safely without UTC shift */
+    parseISODate(iso) {
+        if (!iso)
+            return null;
+        const d = new Date(iso + 'T00:00:00');
+        return isNaN(d.getTime()) ? null : d;
+    }
+    formatDateForDisplay(iso) {
+        const date = this.parseISODate(iso);
+        if (!date)
+            return iso;
+        if (this.type === 'month') {
+            return new Intl.DateTimeFormat('en-AU', { month: 'long', year: 'numeric' }).format(date);
+        }
+        switch (this.dateFormat) {
+            case 'long':
+                return new Intl.DateTimeFormat('en-AU', { day: 'numeric', month: 'short', year: 'numeric' }).format(date);
+            case 'iso':
+                return iso;
+            case 'short':
+            default:
+                return new Intl.DateTimeFormat('en-AU', { day: '2-digit', month: '2-digit', year: 'numeric' }).format(date);
+        }
+    }
+    toISO(date) {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+    /** Parse user-typed text into YYYY-MM-DD */
+    parseInputText(text) {
+        const trimmed = text.trim();
+        if (!trimmed)
+            return null;
+        // Try DD/MM/YYYY
+        const slashMatch = trimmed.match(/^(\d{1,2})[/\-.](\d{1,2})[/\-.](\d{4})$/);
+        if (slashMatch) {
+            const day = parseInt(slashMatch[1], 10);
+            const month = parseInt(slashMatch[2], 10);
+            const year = parseInt(slashMatch[3], 10);
+            const d = new Date(year, month - 1, day);
+            if (d.getFullYear() === year && d.getMonth() === month - 1 && d.getDate() === day) {
+                return this.toISO(d);
+            }
+        }
+        // Try YYYY-MM-DD
+        const isoMatch = trimmed.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
+        if (isoMatch) {
+            const year = parseInt(isoMatch[1], 10);
+            const month = parseInt(isoMatch[2], 10);
+            const day = parseInt(isoMatch[3], 10);
+            const d = new Date(year, month - 1, day);
+            if (d.getFullYear() === year && d.getMonth() === month - 1 && d.getDate() === day) {
+                return this.toISO(d);
+            }
+        }
+        // Try natural string via Date.parse
+        const d = new Date(trimmed);
+        if (!isNaN(d.getTime())) {
+            return this.toISO(d);
+        }
+        return null;
+    }
+    isDateInRange(iso) {
+        if (!iso)
+            return true;
+        if (this.min && iso < this.min)
+            return false;
+        if (this.max && iso > this.max)
+            return false;
+        return true;
+    }
+    updateDropdownPosition() {
+        const rect = this.el.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        this.dropdownPosition = spaceBelow < 350 ? 'top' : 'bottom';
+    }
+    render() {
+        const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);
+        const calendarIcon = (h("svg", { key: '9a8e37792f14af7af7f14ec86602b5c9bfb28b56', class: "date-picker__icon-svg", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { key: 'bfbc6e0022ea0c4d5d9ebd49636d9d8b32c2d32c', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), h("line", { key: '0d1fd4f951edd7bf388709e4db248d1421c67832', x1: "16", y1: "2", x2: "16", y2: "6" }), h("line", { key: '0995228bc198c5a09de2c9213a4713c2b3e3f054', x1: "8", y1: "2", x2: "8", y2: "6" }), h("line", { key: 'c938471721e6e72b25cbc7d46ddf823f5a37bfe5', x1: "3", y1: "10", x2: "21", y2: "10" })));
+        return (h(Host, { key: '5acf3baf9f4d5cece68b25339a68a05f572a1bb9' }, h("div", { key: 'b1c2d84e87ab4d99a1af317397c6b442fbb49f93', class: {
+                'date-picker': true,
+                'date-picker--disabled': this.disabled,
+                'date-picker--error': !!this.error,
+                'date-picker--open': this.isOpen,
+            } }, this.label && (h("label", { key: '94d43b8d44f60806824f4ef72fe4cb0113441351', class: "date-picker__label" }, this.label, this.required && h("span", { key: '2ae8a33b2a46d7e81a990368390f52c167879013', class: "date-picker__required" }, "*"))), this.display === 'text' ? (h("div", { class: "date-picker__text-display", onClick: this.handleTextClick }, h("span", { class: "date-picker__text-value" }, this.value ? this.formatDateForDisplay(this.value) : this.placeholder), calendarIcon)) : (h("div", { class: "date-picker__field" }, h("input", { type: "text", class: "date-picker__input", value: this.inputText, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onInput: this.handleInputChange, style: { backgroundColor: this.bgColor } }), h("div", { class: "date-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (h("button", { type: "button", class: "date-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), h("button", { type: "button", class: "date-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open calendar" }, calendarIcon)))), showDetails && (h("div", { key: 'eff419a0def4d85e0df8e3182132eeeb57454cef', class: "date-picker__details" }, this.error && h("div", { key: '554878b0d415e16dd8715f58db0da94259a2e3c8', class: "date-picker__error-message" }, this.error))), this.isOpen && (h("div", { key: '75ec84dd8849b3007cb4f99b73098e52b458a476', class: {
+                'date-picker__dropdown': true,
+                'date-picker__dropdown--top': this.dropdownPosition === 'top',
+            } }, h("xplor-inline-date-picker", { key: '74c870356063103474e60245888b8b2ae67fcd1a', selectedDate: this.value, min: this.min, max: this.max, readonly: this.readonly, color: this.color, startWeekOnSunday: this.startWeekOnSunday, onDateSelected: this.handleDateSelected }))))));
+    }
+    static get is() { return "xplor-date-picker"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-date-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-date-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected date in YYYY-MM-DD format"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Select date'"
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "'date' | 'month'",
+                    "resolved": "\"date\" | \"month\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "'date' or 'month'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'date'"
+            },
+            "monthType": {
+                "type": "string",
+                "attribute": "month-type",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "For month type: select start or end of month"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'start'"
+            },
+            "display": {
+                "type": "string",
+                "attribute": "display",
+                "mutable": false,
+                "complexType": {
+                    "original": "'input' | 'text'",
+                    "resolved": "\"input\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "'input' shows text input, 'text' shows clickable text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'input'"
+            },
+            "dateFormat": {
+                "type": "string",
+                "attribute": "date-format",
+                "mutable": false,
+                "complexType": {
+                    "original": "'short' | 'long' | 'iso'",
+                    "resolved": "\"iso\" | \"long\" | \"short\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Date display format: 'short' (DD/MM/YYYY), 'long' (1 Jan 2025), 'iso' (YYYY-MM-DD)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'short'"
+            },
+            "min": {
+                "type": "string",
+                "attribute": "min",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "max": {
+                "type": "string",
+                "attribute": "max",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "clearable": {
+                "type": "boolean",
+                "attribute": "clearable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "closeOnSelect": {
+                "type": "boolean",
+                "attribute": "close-on-select",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "bgColor": {
+                "type": "string",
+                "attribute": "bg-color",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'white'"
+            },
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'#008480'"
+            },
+            "startWeekOnSunday": {
+                "type": "boolean",
+                "attribute": "start-week-on-sunday",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "error": {
+                "type": "string",
+                "attribute": "error",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "hideDetails": {
+                "type": "any",
+                "attribute": "hide-details",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | 'auto'",
+                    "resolved": "\"auto\" | boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'auto'"
+            },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "inputText": {},
+            "dropdownPosition": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dateChange",
+                "name": "dateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "xplorFocus",
+                "name": "xplorFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xplorBlur",
+                "name": "xplorBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xplorClear",
+                "name": "xplorClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=xplor-date-picker.js.map