@xplor-education/core-stencil-components 2.0.0

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

@@ -0,0 +1,647 @@
+import { Host, h } from "@stencil/core";
+export class XplorTimePicker {
+    constructor() {
+        /** Time value in HH:mm:ss 24-hour format */
+        this.value = '';
+        this.label = '';
+        this.placeholder = 'Select time';
+        this.clearable = false;
+        /** Auto-fill current time on focus if value is empty */
+        this.prefill = false;
+        this.bgColor = 'white';
+        this.showSeconds = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.error = '';
+        this.hideDetails = 'auto';
+        this.required = false;
+        this.isOpen = false;
+        this.inputText = '';
+        this.hours = 12;
+        this.minutes = 0;
+        this.seconds = 0;
+        this.period = 'AM';
+        this.lastGoodValue = '';
+        this.toggleDropdown = () => {
+            if (this.disabled || this.readonly)
+                return;
+            this.isOpen = !this.isOpen;
+        };
+        this.handleInputFocus = (event) => {
+            this.xplorFocus.emit(event);
+            if (this.prefill && !this.value) {
+                const now = new Date();
+                this.hours = now.getHours() % 12 || 12;
+                this.minutes = now.getMinutes();
+                this.seconds = now.getSeconds();
+                this.period = now.getHours() >= 12 ? 'PM' : 'AM';
+                this.emitChange();
+            }
+        };
+        this.handleInputBlur = (event) => {
+            this.xplorBlur.emit(event);
+            if (this.inputText.trim() === '') {
+                return;
+            }
+            const ok = this.parseInputText(this.inputText);
+            if (ok) {
+                this.emitChange();
+            }
+            else {
+                // Revert to last good value
+                this.inputText = this.lastGoodValue;
+            }
+        };
+        this.handleInputChange = (event) => {
+            const input = event.target;
+            this.inputText = input.value;
+        };
+        this.handleClear = (event) => {
+            event.stopPropagation();
+            this.value = '';
+            this.inputText = '';
+            this.lastGoodValue = '';
+            this.hours = 12;
+            this.minutes = 0;
+            this.seconds = 0;
+            this.period = 'AM';
+            this.timeChange.emit('');
+            this.xplorClear.emit();
+        };
+        this.incrementHours = () => {
+            this.hours = this.hours >= 12 ? 1 : this.hours + 1;
+            this.emitChange();
+        };
+        this.decrementHours = () => {
+            this.hours = this.hours <= 1 ? 12 : this.hours - 1;
+            this.emitChange();
+        };
+        this.incrementMinutes = () => {
+            if (this.minutes >= 59) {
+                this.minutes = 0;
+                this.incrementHours();
+            }
+            else {
+                this.minutes++;
+                this.emitChange();
+            }
+        };
+        this.decrementMinutes = () => {
+            if (this.minutes <= 0) {
+                this.minutes = 59;
+                this.decrementHours();
+            }
+            else {
+                this.minutes--;
+                this.emitChange();
+            }
+        };
+        this.incrementSeconds = () => {
+            if (this.seconds >= 59) {
+                this.seconds = 0;
+                this.incrementMinutes();
+            }
+            else {
+                this.seconds++;
+                this.emitChange();
+            }
+        };
+        this.decrementSeconds = () => {
+            if (this.seconds <= 0) {
+                this.seconds = 59;
+                this.decrementMinutes();
+            }
+            else {
+                this.seconds--;
+                this.emitChange();
+            }
+        };
+        this.togglePeriod = () => {
+            this.period = this.period === 'AM' ? 'PM' : 'AM';
+            this.emitChange();
+        };
+    }
+    componentWillLoad() {
+        if (this.value) {
+            this.parseValueToState(this.value);
+            this.inputText = this.formatDisplayTime();
+            this.lastGoodValue = this.inputText;
+        }
+    }
+    handleDocumentClick(event) {
+        const target = event.target;
+        if (!this.el.contains(target)) {
+            this.isOpen = false;
+        }
+    }
+    /** Parse HH:mm:ss (24h) into component state */
+    parseValueToState(val) {
+        if (!val)
+            return;
+        const parts = val.split(':');
+        let h = parseInt(parts[0], 10) || 0;
+        const m = parseInt(parts[1], 10) || 0;
+        const s = parseInt(parts[2], 10) || 0;
+        this.period = h >= 12 ? 'PM' : 'AM';
+        if (h === 0) {
+            h = 12;
+        }
+        else if (h > 12) {
+            h -= 12;
+        }
+        this.hours = h;
+        this.minutes = m;
+        this.seconds = s;
+    }
+    /** Convert current state to HH:mm:ss (24h) */
+    stateToValue() {
+        let h = this.hours;
+        if (this.period === 'AM' && h === 12)
+            h = 0;
+        else if (this.period === 'PM' && h !== 12)
+            h += 12;
+        const hStr = String(h).padStart(2, '0');
+        const mStr = String(this.minutes).padStart(2, '0');
+        const sStr = String(this.seconds).padStart(2, '0');
+        return `${hStr}:${mStr}:${sStr}`;
+    }
+    /** Format for display: "12:00 PM" or "12:00:00 PM" */
+    formatDisplayTime() {
+        const h = this.hours;
+        const m = String(this.minutes).padStart(2, '0');
+        if (this.showSeconds) {
+            const s = String(this.seconds).padStart(2, '0');
+            return `${h}:${m}:${s} ${this.period}`;
+        }
+        return `${h}:${m} ${this.period}`;
+    }
+    /** Port of Vue handleOnBlur time parsing logic */
+    parseInputText(text) {
+        const raw = text.trim();
+        if (!raw)
+            return false;
+        // Handle bare am/pm
+        if (raw.toLowerCase() === 'am' || raw.toLowerCase() === 'pm') {
+            this.hours = 12;
+            this.minutes = 0;
+            this.seconds = 0;
+            this.period = raw.toLowerCase() === 'pm' ? 'PM' : 'AM';
+            return true;
+        }
+        // Detect AM/PM suffix
+        let suffix = 'am';
+        if (raw.toLowerCase().indexOf('p') !== -1) {
+            suffix = 'pm';
+        }
+        // Strip am/pm text
+        const sanitised = raw.replace(/(\s*)(pm|am|p|a)/gi, '').trim();
+        const withColons = sanitised.replace(/\./g, ':');
+        const splits = withColons.split(':');
+        let hour;
+        let minute = 0;
+        let second = 0;
+        if (splits.length === 1) {
+            // No colons: interpret based on length
+            const num = sanitised.trim();
+            if (num.length === 3) {
+                hour = parseInt(num.substring(0, 1), 10);
+                minute = parseInt(num.substring(1, 3), 10);
+            }
+            else if (num.length === 4) {
+                hour = parseInt(num.substring(0, 2), 10);
+                minute = parseInt(num.substring(2, 4), 10);
+            }
+            else if (num.length === 6) {
+                hour = parseInt(num.substring(0, 2), 10);
+                minute = parseInt(num.substring(2, 4), 10);
+                second = parseInt(num.substring(4, 6), 10);
+            }
+            else {
+                hour = parseInt(num, 10);
+            }
+        }
+        else if (splits.length === 2) {
+            hour = parseInt(splits[0].trim(), 10);
+            minute = parseInt(splits[1].trim(), 10);
+        }
+        else if (splits.length === 3) {
+            hour = parseInt(splits[0].trim(), 10);
+            minute = parseInt(splits[1].trim(), 10);
+            second = parseInt(splits[2].trim(), 10);
+        }
+        else {
+            return false;
+        }
+        if (isNaN(hour) || hour < 0)
+            return false;
+        if (isNaN(minute))
+            minute = 0;
+        if (isNaN(second))
+            second = 0;
+        // Handle minute overflow
+        if (minute >= 60) {
+            hour += Math.floor(minute / 60);
+            minute = minute % 60;
+        }
+        // Normalize hour and determine AM/PM
+        if (hour >= 12) {
+            suffix = 'pm';
+            if (hour >= 24) {
+                hour = hour % 24;
+                suffix = hour >= 12 ? 'pm' : 'am';
+            }
+            if (hour > 12) {
+                hour -= 12;
+            }
+        }
+        if (hour === 0) {
+            hour = 12;
+            suffix = 'am';
+        }
+        // Clamp seconds
+        if (second >= 60)
+            second = 59;
+        this.hours = hour;
+        this.minutes = minute;
+        this.seconds = second;
+        this.period = suffix === 'pm' ? 'PM' : 'AM';
+        return true;
+    }
+    emitChange() {
+        const val = this.stateToValue();
+        this.value = val;
+        this.inputText = this.formatDisplayTime();
+        this.lastGoodValue = this.inputText;
+        this.timeChange.emit(val);
+    }
+    renderChevronUp() {
+        return (h("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "18 15 12 9 6 15" })));
+    }
+    renderChevronDown() {
+        return (h("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "6 9 12 15 18 9" })));
+    }
+    render() {
+        const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);
+        const clockIcon = (h("svg", { key: 'ed28bf3f52630c4da2ad6a8e870bb8c3a4f3d190', class: "time-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("circle", { key: '8bc107ea8c5b9762965b64c12393466f4373fd89', cx: "12", cy: "12", r: "10" }), h("polyline", { key: 'ff49c4901b312dc15e6bd09dca83b5413112fb75', points: "12 6 12 12 16 14" })));
+        return (h(Host, { key: 'c096645386cd430139108770b6808647fbaadf70' }, h("div", { key: '64c8c4afd184aef1b2e4ca8b8d4f63363470081a', class: {
+                'time-picker': true,
+                'time-picker--disabled': this.disabled,
+                'time-picker--error': !!this.error,
+                'time-picker--open': this.isOpen,
+            } }, this.label && (h("label", { key: '0e7bcf1942c56009e2396a777288529b6f5f53a1', class: "time-picker__label" }, this.label, this.required && h("span", { key: '034692f862e15e2719759706a2b487d208cf379d', class: "time-picker__required" }, "*"))), h("div", { key: '6cfa2b11f58478a9fc7cdae83408331980a6760d', class: "time-picker__field" }, h("input", { key: '4ac1c82ccc1ab5f7dc0441544495ffca40077045', type: "text", class: "time-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", { key: '223f64d070ee70d5930bbcf416c5790bb4338adc', class: "time-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (h("button", { key: '41282f7c47134fce27192eb28402a9f2d5cf1c87', type: "button", class: "time-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), h("button", { key: 'd0f1150c1acf001eb6b5861ae4acf2d340f76f95', type: "button", class: "time-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open time picker" }, clockIcon))), showDetails && (h("div", { key: '70610a25a848c840e606f6a1b93558e057aede46', class: "time-picker__details" }, this.error && h("div", { key: 'c7e4ae629d26c606b2c06a4c8998748ce5942a80', class: "time-picker__error-message" }, this.error))), this.isOpen && (h("div", { key: '0a17052ddf4e3af3e1b5f324b817a8db63729484', class: "time-picker__dropdown" }, h("div", { key: '6cfba596b82f570ac55c6fcb4e0b3e5eecf2a107', class: "time-picker__columns" }, h("div", { key: '61c18caf8b91ecd1f0afd11f26183ba371272065', class: "time-picker__column" }, h("button", { key: '96b264a2bd6f40dd39cbca273c7c884b6ec4d6c6', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementHours, "aria-label": "Increase hours" }, this.renderChevronUp()), h("div", { key: '89b079611ff601cec4e247be6a86941333c71857', class: "time-picker__value" }, String(this.hours).padStart(2, '0')), h("button", { key: '332143c42d2cb34039a4b5efb7dae27c1e7b5d90', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementHours, "aria-label": "Decrease hours" }, this.renderChevronDown())), h("div", { key: '852197ee83d55ed901492f9bb124639154f2ae52', class: "time-picker__separator" }, ":"), h("div", { key: 'b5e99a034ccce887449004989d584207bbb3b191', class: "time-picker__column" }, h("button", { key: 'dc19cd280092e3e8f22e3ef9f4c45eda87a0cdef', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementMinutes, "aria-label": "Increase minutes" }, this.renderChevronUp()), h("div", { key: '5f7086f5917eefa76612e0ca083fb62bddf2bb98', class: "time-picker__value" }, String(this.minutes).padStart(2, '0')), h("button", { key: '047266d75f4fb274e9046a1524104bda6786fa24', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementMinutes, "aria-label": "Decrease minutes" }, this.renderChevronDown())), this.showSeconds && [
+            h("div", { key: 'e4d548f5010bc56ca617be43bcd7e7e098909d5d', class: "time-picker__separator" }, ":"),
+            h("div", { key: '20ff897d25fa596d82e4a28e0d9784272e0eecfb', class: "time-picker__column" }, h("button", { key: '0a0f99b92f2b341233b7c51f0a66c2af96e82756', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementSeconds, "aria-label": "Increase seconds" }, this.renderChevronUp()), h("div", { key: '6b8a50efc2fa8417ba5b8b2cdc0463f6fe56a3cb', class: "time-picker__value" }, String(this.seconds).padStart(2, '0')), h("button", { key: '10870c306b1a9491aab977290a1f257bbd72aa63', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementSeconds, "aria-label": "Decrease seconds" }, this.renderChevronDown()))
+        ], h("div", { key: '8c5b9eab81c3710418f051cbde691bed9cfe7f3f', class: "time-picker__column time-picker__column--period" }, h("button", { key: '728512b9552f759f48238c33a99e4bff23c821e8', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronUp()), h("div", { key: 'b7721c167f5bd7c7162eed89ecd47f77979557b6', class: "time-picker__value time-picker__value--period" }, this.period), h("button", { key: 'aa075ac24108e4f29b34574abb68b9b19a8d5a61', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronDown()))))))));
+    }
+    static get is() { return "xplor-time-picker"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-time-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-time-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": "Time value in HH:mm:ss 24-hour 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 time'"
+            },
+            "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"
+            },
+            "prefill": {
+                "type": "boolean",
+                "attribute": "prefill",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-fill current time on focus if value is empty"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "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'"
+            },
+            "showSeconds": {
+                "type": "boolean",
+                "attribute": "show-seconds",
+                "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"
+            },
+            "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"
+            },
+            "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": {},
+            "hours": {},
+            "minutes": {},
+            "seconds": {},
+            "period": {},
+            "lastGoodValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "timeChange",
+                "name": "timeChange",
+                "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-time-picker.js.map