@xplortech/apollo-core 2.11.0 → 2.12.0

package/dist/esm/xpl-input-time.entry.js

@@ -0,0 +1,194 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-ukZKsqqq.js';
+
+function format12Hour(time) {
+    const [hours, minutes] = time.split(':');
+    const ampm = Number(hours) >= 12 ? 'PM' : 'AM';
+    const hours12 = Number(hours) % 12 || 12;
+    return [hours12.toString(), minutes, ampm];
+}
+function format12HourToString(time) {
+    const [hours, minutes, ampm] = format12Hour(time);
+    return `${hours}:${minutes} ${ampm}`;
+}
+function normalizeTime(input) {
+    if (!input || input.trim() === '' || input.replace(/[^0-9]/g, '').length === 0) {
+        return null;
+    }
+    let str = input.trim().toLowerCase();
+    str = str.replace(/(\d)\s+(am|pm)/g, '$1$2');
+    if (/^\d{1,2}(am|pm)?$/.test(str)) {
+        str = str.replace(/(am|pm)?$/, ':00$1');
+    }
+    if (/^\d{1,2}$/.test(str)) {
+        str = `${str}:00`;
+    }
+    if (/^\d{1,2}:\d{1}$/.test(str)) {
+        str = `${str}0`;
+    }
+    const [hours, minutesAndAmPm] = str.split(':');
+    const minutes = minutesAndAmPm.replace(/[^0-9]/g, '');
+    const isAM = str.includes('am');
+    const isPM = str.includes('pm');
+    if (isPM || isAM) {
+        if (isAM) {
+            return `${(Number(hours) % 12).toString().padStart(2, '0')}:${minutes}`;
+        }
+        return `${(Number(hours) % 12) + 12}:${minutes}`;
+    }
+    return `${hours.padStart(2, '0')}:${minutes}`;
+}
+function generateTimeOptions(step, min, max, timeFormat) {
+    const toMinutes = (time) => {
+        const [hours, minutes] = time.split(':').map(Number);
+        return hours * 60 + minutes;
+    };
+    const fromMinutes = (total) => {
+        const hours = Math.floor(total / 60)
+            .toString()
+            .padStart(2, '0');
+        const minutes = (total % 60).toString().padStart(2, '0');
+        return `${hours}:${minutes}`;
+    };
+    const minMinutes = toMinutes(min.toString());
+    const maxMinutes = toMinutes(max.toString());
+    const options = [];
+    for (let t = minMinutes; t <= maxMinutes; t += step) {
+        options.push(fromMinutes(t));
+    }
+    return options.map((option) => {
+        const label = timeFormat === '12h' ? format12HourToString(option) : option;
+        return {
+            label,
+            value: option,
+        };
+    });
+}
+
+const InputTime = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange", 7);
+        this.hasErrorStateChanged = createEvent(this, "hasErrorStateChanged", 7);
+        this.max = '23:59';
+        this.min = '00:00';
+        this.step = 30;
+        this.mode = 'single';
+        this.timeFormat = '24h';
+        this.allowCustomOption = false;
+        this.showOptions = false;
+        this.options = [];
+        this.handleInput = (ev) => {
+            const target = ev.target;
+            const allowedChars = target.value?.replace(/[^0-9:apmAPM]/g, '');
+            this.value = allowedChars;
+        };
+        this.handleFocus = () => {
+            this.showOptions = true;
+        };
+        this.handleBlur = () => {
+            const normalized = normalizeTime(this.value ?? '');
+            this.value = normalized ?? undefined;
+        };
+        this.handleClick = () => {
+            this.showOptions = true;
+        };
+    }
+    onValueChange(newValue) {
+        this.valueChange.emit(newValue);
+        this.updateState(newValue);
+    }
+    updateState(newValue) {
+        this.formattedValue = this.formatDisplayedTime(newValue);
+        this.amPm = this.formatDisplayedAmPm(newValue);
+        this.validateValue();
+    }
+    formatDisplayedTime(time) {
+        if (!time) {
+            return '';
+        }
+        if (this.timeFormat === '12h' && time.includes(':')) {
+            const [hours, minutes] = format12Hour(time);
+            return `${hours}:${minutes}`;
+        }
+        return time;
+    }
+    formatDisplayedAmPm(time) {
+        if (!time || this.timeFormat !== '12h') {
+            return '';
+        }
+        const [, , amPm] = format12Hour(time);
+        return amPm;
+    }
+    validateValue() {
+        if (!this.value) {
+            this.hasErrorState = this.required ? 'required' : null;
+            return;
+        }
+        if (!this.value.includes(':') ||
+            this.value.trim().length < 4 ||
+            this.value.trim().length > 5) {
+            this.hasErrorState = 'Invalid time format, must be HH:MM';
+            return;
+        }
+        const min = String(this.min ?? '00:00');
+        const max = String(this.max ?? '23:59');
+        if (this.value < min || this.value > max) {
+            this.hasErrorState = 'Out of range';
+            return;
+        }
+        if (!this.allowCustomOption) {
+            if (!this.options.some((option) => option.value === this.value)) {
+                this.hasErrorState = 'Invalid option';
+                return;
+            }
+        }
+        this.hasErrorState = null;
+    }
+    onHasErrorStateChanged(newValue) {
+        this.hasErrorStateChanged.emit(newValue);
+    }
+    componentDidLoad() {
+        if (this.mode === 'range') {
+            console.warn('Range mode is not supported for time inputs at this time.');
+        }
+        this.dropdown?.addEventListener('isOpenChange', (e) => {
+            this.showOptions = e.detail;
+        });
+    }
+    componentWillLoad() {
+        this.options = this.getOptions();
+        if (!this.value) {
+            return;
+        }
+        this.updateState(this.value);
+    }
+    getOptions() {
+        return generateTimeOptions(this.step, String(this.min ?? '00:00'), String(this.max ?? '23:59'), this.timeFormat ?? '24h').map(({ label, value }) => ({
+            label,
+            value,
+            onClick: () => {
+                this.value = value;
+                this.showOptions = false;
+            },
+        }));
+    }
+    render() {
+        return (h(Host, { key: '61190dc5c00042aa095367bcce600a4d759bdbca', class: {
+                'xpl-input-time': true,
+                [`xpl-input-time--mode-${this.mode}`]: true,
+                'xpl-input-time--error': !!this.hasErrorState,
+            } }, h("xpl-input", { key: '8793e06e961f53794df33d0015280930a43d1a90', pre: h("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : undefined, type: "text", _id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, onInput: this.handleInput, value: this.formattedValue, onFocusEvent: this.handleFocus, onBlurEvent: this.handleBlur, onClick: this.handleClick }), !this.readonly && !this.disabled && (h("xpl-dropdown", { key: '7c88be365f26e1eecb6c731acb9d1c87d96973dd', options: this.options, isOpen: this.showOptions, ref: (el) => {
+                this.dropdown = el ?? undefined;
+            }, class: "xpl-input-time__dropdown" }))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }],
+        "hasErrorState": [{
+                "onHasErrorStateChanged": 0
+            }]
+    }; }
+};
+
+export { InputTime as xpl_input_time };