@melodicdev/components 1.0.21 → 1.1.0

package/lib/components/forms/time-picker/time-picker.component.js

@@ -0,0 +1,369 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MelodicComponent } from '@melodicdev/core';
+import { computePosition, autoUpdate, offset, flip, shift } from '../../../utils/positioning/index.js';
+import { timePickerTemplate } from './time-picker.template.js';
+import { timePickerStyles } from './time-picker.styles.js';
+function pad(n) {
+    return String(n).padStart(2, '0');
+}
+function formatDisplay(value, use12Hour) {
+    if (!value)
+        return '';
+    const parts = value.split(':');
+    if (parts.length < 2)
+        return value;
+    let h = parseInt(parts[0], 10);
+    const m = parts[1];
+    const s = parts[2];
+    const timeSuffix = s ? `:${s}` : '';
+    if (!use12Hour)
+        return `${pad(h)}:${m}${timeSuffix}`;
+    const period = h >= 12 ? 'PM' : 'AM';
+    if (h === 0)
+        h = 12;
+    else if (h > 12)
+        h -= 12;
+    return `${h}:${m}${timeSuffix} ${period}`;
+}
+function clamp(val, min, max) {
+    if (val < min)
+        return max;
+    if (val > max)
+        return min;
+    return val;
+}
+/**
+ * ml-time-picker - Time input with dropdown selector
+ *
+ * @example
+ * ```html
+ * <ml-time-picker label="Start time" value="09:30"></ml-time-picker>
+ * <ml-time-picker label="Meeting" use-12-hour value="14:00"></ml-time-picker>
+ * <ml-time-picker label="Precise" step="1"></ml-time-picker>
+ * ```
+ *
+ * @fires ml:change - Emitted when the time changes. Detail: { value: string }
+ */
+let TimePickerComponent = class TimePickerComponent {
+    constructor() {
+        /** Selected time in HH:mm or HH:mm:ss format */
+        this.value = '';
+        /** Placeholder text */
+        this.placeholder = 'Select time';
+        /** Field label */
+        this.label = '';
+        /** Hint text */
+        this.hint = '';
+        /** Error message */
+        this.error = '';
+        /** Input size */
+        this.size = 'md';
+        /** Disabled state */
+        this.disabled = false;
+        /** Required state */
+        this.required = false;
+        /** Minimum selectable time (HH:mm) */
+        this.min = '';
+        /** Maximum selectable time (HH:mm) */
+        this.max = '';
+        /** Step in minutes (default 15) for the preset list. Use 1 to show seconds spinner. */
+        this.step = 15;
+        /** Use 12-hour format with AM/PM (default: true) */
+        this.twelveHour = true;
+        /** Whether the popover is open */
+        this.isOpen = false;
+        /** Current editing hour */
+        this.editHour = 0;
+        /** Current editing minute */
+        this.editMinute = 0;
+        /** Current editing second */
+        this.editSecond = 0;
+        /** AM or PM when in 12-hour mode */
+        this.editPeriod = 'AM';
+        this._cleanupAutoUpdate = null;
+        this.togglePopover = () => {
+            if (this.disabled)
+                return;
+            const popoverEl = this.getPopoverEl();
+            if (popoverEl) {
+                popoverEl.togglePopover();
+            }
+        };
+        this.incrementHour = () => {
+            if (this.use12Hour) {
+                // Cycle within the current 12-hour half (AM: 0–11, PM: 12–23)
+                const base = this.editPeriod === 'AM' ? 0 : 12;
+                const offset = (this.editHour - base + 1) % 12;
+                this.editHour = base + offset;
+            }
+            else {
+                this.editHour = clamp(this.editHour + 1, 0, 23);
+            }
+        };
+        this.decrementHour = () => {
+            if (this.use12Hour) {
+                const base = this.editPeriod === 'AM' ? 0 : 12;
+                const offset = (this.editHour - base - 1 + 12) % 12;
+                this.editHour = base + offset;
+            }
+            else {
+                this.editHour = clamp(this.editHour - 1, 0, 23);
+            }
+        };
+        this.incrementMinute = () => {
+            this.editMinute = clamp(this.editMinute + 1, 0, 59);
+        };
+        this.decrementMinute = () => {
+            this.editMinute = clamp(this.editMinute - 1, 0, 59);
+        };
+        this.incrementSecond = () => {
+            this.editSecond = clamp(this.editSecond + 1, 0, 59);
+        };
+        this.decrementSecond = () => {
+            this.editSecond = clamp(this.editSecond - 1, 0, 59);
+        };
+        this.togglePeriod = () => {
+            this.editPeriod = this.editPeriod === 'AM' ? 'PM' : 'AM';
+            const h12 = this.editHour % 12 || 12;
+            this.editHour = this.to24Hour(h12, this.editPeriod);
+        };
+        this.confirmSelection = () => {
+            let timeStr = `${pad(this.editHour)}:${pad(this.editMinute)}`;
+            if (this.showSeconds) {
+                timeStr += `:${pad(this.editSecond)}`;
+            }
+            this.commitValue(timeStr);
+            this.closePopover();
+        };
+        this.handleNowClick = () => {
+            const now = new Date();
+            this.editHour = now.getHours();
+            this.editMinute = now.getMinutes();
+            this.editSecond = now.getSeconds();
+            this.editPeriod = this.editHour >= 12 ? 'PM' : 'AM';
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Escape' && this.isOpen) {
+                event.preventDefault();
+                this.closePopover();
+            }
+            else if ((event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') && !this.isOpen) {
+                event.preventDefault();
+                this.togglePopover();
+            }
+        };
+        this.handleHourInput = (event) => {
+            const input = event.target;
+            const digits = input.value.replace(/\D/g, '').slice(0, 2);
+            if (digits === '') {
+                input.value = '';
+                return;
+            }
+            const max = this.use12Hour ? 12 : 23;
+            const min = this.use12Hour ? 1 : 0;
+            const n = Math.max(min, Math.min(parseInt(digits, 10), max));
+            input.value = String(n);
+            if (this.use12Hour) {
+                this.editHour = this.to24Hour(n, this.editPeriod);
+            }
+            else {
+                this.editHour = n;
+            }
+        };
+        this.handleMinuteInput = (event) => {
+            const input = event.target;
+            const digits = input.value.replace(/\D/g, '').slice(0, 2);
+            if (digits === '') {
+                input.value = '';
+                return;
+            }
+            const n = Math.min(parseInt(digits, 10), 59);
+            input.value = String(n);
+            this.editMinute = n;
+        };
+        this.handleSecondInput = (event) => {
+            const input = event.target;
+            const digits = input.value.replace(/\D/g, '').slice(0, 2);
+            if (digits === '') {
+                input.value = '';
+                return;
+            }
+            const n = Math.min(parseInt(digits, 10), 59);
+            input.value = String(n);
+            this.editSecond = n;
+        };
+        this.handleHourBlur = () => {
+            if (this.use12Hour) {
+                const h12 = this.editHour % 12 || 12;
+                this.editHour = this.to24Hour(h12, this.editPeriod);
+            }
+        };
+        this.handleMinuteBlur = () => {
+            // Re-render to reformat with padding
+        };
+        this.handleSecondBlur = () => {
+            // Re-render to reformat with padding
+        };
+        this.handleInputFocus = (event) => {
+            event.target.select();
+        };
+        this.handleSpinnerKeyDown = (event) => {
+            const target = event.target;
+            if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                const label = target.getAttribute('aria-label');
+                if (label === 'Hour')
+                    this.incrementHour();
+                else if (label === 'Minute')
+                    this.incrementMinute();
+                else if (label === 'Second')
+                    this.incrementSecond();
+            }
+            else if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                const label = target.getAttribute('aria-label');
+                if (label === 'Hour')
+                    this.decrementHour();
+                else if (label === 'Minute')
+                    this.decrementMinute();
+                else if (label === 'Second')
+                    this.decrementSecond();
+            }
+            else if (event.key === 'Enter') {
+                event.preventDefault();
+                this.confirmSelection();
+            }
+        };
+        this._handleToggle = (event) => {
+            const toggleEvent = event;
+            if (toggleEvent.newState === 'open') {
+                this.isOpen = true;
+                this.syncEditFromValue();
+                this.startPositioning();
+            }
+            else {
+                this.isOpen = false;
+                this._cleanupAutoUpdate?.();
+                this._cleanupAutoUpdate = null;
+                this.returnFocus();
+            }
+        };
+    }
+    get use12Hour() {
+        return this.twelveHour;
+    }
+    get showSeconds() {
+        return Number(this.step) === 1;
+    }
+    get displayValue() {
+        return formatDisplay(this.value, this.use12Hour);
+    }
+    get displayHour() {
+        if (this.use12Hour) {
+            let h = this.editHour;
+            if (h === 0)
+                h = 12;
+            else if (h > 12)
+                h -= 12;
+            return String(h);
+        }
+        return pad(this.editHour);
+    }
+    get displayMinute() {
+        return pad(this.editMinute);
+    }
+    get displaySecond() {
+        return pad(this.editSecond);
+    }
+    onCreate() {
+        const popoverEl = this.getPopoverEl();
+        if (popoverEl) {
+            popoverEl.addEventListener('toggle', this._handleToggle);
+        }
+    }
+    onDestroy() {
+        this._cleanupAutoUpdate?.();
+        const popoverEl = this.getPopoverEl();
+        if (popoverEl) {
+            popoverEl.removeEventListener('toggle', this._handleToggle);
+        }
+    }
+    to24Hour(h12, period) {
+        if (period === 'AM')
+            return h12 === 12 ? 0 : h12;
+        return h12 === 12 ? 12 : h12 + 12;
+    }
+    syncEditFromValue() {
+        if (this.value) {
+            const parts = this.value.split(':');
+            this.editHour = parseInt(parts[0], 10) || 0;
+            this.editMinute = parseInt(parts[1], 10) || 0;
+            this.editSecond = parts[2] ? parseInt(parts[2], 10) : 0;
+        }
+        else {
+            const now = new Date();
+            this.editHour = now.getHours();
+            this.editMinute = now.getMinutes();
+            this.editSecond = 0;
+        }
+        this.editPeriod = this.editHour >= 12 ? 'PM' : 'AM';
+    }
+    commitValue(timeStr) {
+        this.value = timeStr;
+        this.elementRef.dispatchEvent(new CustomEvent('ml:change', {
+            bubbles: true,
+            composed: true,
+            detail: { value: timeStr }
+        }));
+    }
+    closePopover() {
+        const popoverEl = this.getPopoverEl();
+        if (popoverEl && this.isOpen) {
+            popoverEl.hidePopover();
+        }
+    }
+    startPositioning() {
+        const triggerEl = this.getTriggerEl();
+        const popoverEl = this.getPopoverEl();
+        if (!triggerEl || !popoverEl)
+            return;
+        const update = () => this.updatePosition(triggerEl, popoverEl);
+        this._cleanupAutoUpdate?.();
+        this._cleanupAutoUpdate = autoUpdate(triggerEl, popoverEl, update);
+    }
+    updatePosition(triggerEl, popoverEl) {
+        const middleware = [offset(4), flip(), shift({ padding: 8 })];
+        const { x, y } = computePosition(triggerEl, popoverEl, {
+            placement: 'bottom-start',
+            middleware
+        });
+        popoverEl.style.left = `${x}px`;
+        popoverEl.style.top = `${y}px`;
+    }
+    returnFocus() {
+        const triggerEl = this.getTriggerEl();
+        if (triggerEl) {
+            triggerEl.focus();
+        }
+    }
+    getTriggerEl() {
+        return this.elementRef.shadowRoot?.querySelector('.ml-time-picker__trigger');
+    }
+    getPopoverEl() {
+        return this.elementRef.shadowRoot?.querySelector('.ml-time-picker__popover');
+    }
+};
+TimePickerComponent = __decorate([
+    MelodicComponent({
+        selector: 'ml-time-picker',
+        template: timePickerTemplate,
+        styles: timePickerStyles,
+        attributes: ['value', 'placeholder', 'label', 'hint', 'error', 'size', 'disabled', 'required', 'min', 'max', 'step', 'twelve-hour']
+    })
+], TimePickerComponent);
+export { TimePickerComponent };

package/lib/components/forms/time-picker/time-picker.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const timePickerStyles: () => import("@melodicdev/core").TemplateResult;
+//# sourceMappingURL=time-picker.styles.d.ts.map

package/lib/components/forms/time-picker/time-picker.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/time-picker/time-picker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDA4T5B,CAAC"}

package/lib/components/forms/time-picker/time-picker.styles.js

@@ -0,0 +1,318 @@
+import { css } from '@melodicdev/core';
+export const timePickerStyles = () => css `
+	:host {
+		display: block;
+	}
+
+	/* Label */
+	.ml-time-picker__label {
+		display: block;
+		font-size: var(--ml-text-sm);
+		font-weight: var(--ml-font-medium);
+		color: var(--ml-color-text-secondary);
+		margin-bottom: var(--ml-space-1-5);
+		line-height: var(--ml-leading-tight);
+	}
+
+	.ml-time-picker__required {
+		color: var(--ml-color-danger);
+		margin-left: var(--ml-space-0-5);
+	}
+
+	/* Trigger button */
+	.ml-time-picker__trigger {
+		display: flex;
+		align-items: center;
+		gap: var(--ml-space-2);
+		width: 100%;
+		border: var(--ml-border) solid var(--ml-color-border);
+		border-radius: var(--ml-radius-md);
+		background-color: var(--ml-color-input-bg);
+		color: var(--ml-color-text);
+		cursor: pointer;
+		font-family: var(--ml-font-sans);
+		text-align: left;
+		transition:
+			border-color var(--ml-duration-150) var(--ml-ease-in-out),
+			box-shadow var(--ml-duration-150) var(--ml-ease-in-out);
+	}
+
+	.ml-time-picker__trigger:hover:not(:disabled) {
+		border-color: var(--ml-color-border-strong);
+	}
+
+	.ml-time-picker__trigger:focus-visible {
+		outline: none;
+		border-color: var(--ml-trigger-focus-border, var(--ml-color-primary));
+		box-shadow: var(--ml-shadow-focus-ring);
+	}
+
+	.ml-time-picker--open .ml-time-picker__trigger {
+		border-color: var(--ml-trigger-focus-border, var(--ml-color-primary));
+		box-shadow: var(--ml-shadow-focus-ring);
+	}
+
+	.ml-time-picker--error .ml-time-picker__trigger {
+		border-color: var(--ml-color-danger);
+	}
+
+	.ml-time-picker--error .ml-time-picker__trigger:focus-visible,
+	.ml-time-picker--error.ml-time-picker--open .ml-time-picker__trigger {
+		box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+	}
+
+	.ml-time-picker--disabled .ml-time-picker__trigger {
+		opacity: 0.5;
+		cursor: not-allowed;
+		background-color: var(--ml-color-surface-sunken);
+	}
+
+	/* Sizes */
+	.ml-time-picker--sm .ml-time-picker__trigger {
+		padding: var(--ml-space-1-5) var(--ml-space-2-5);
+		font-size: var(--ml-text-xs);
+	}
+
+	.ml-time-picker--md .ml-time-picker__trigger {
+		padding: var(--ml-space-2) var(--ml-space-3);
+		font-size: var(--ml-text-sm);
+	}
+
+	.ml-time-picker--lg .ml-time-picker__trigger {
+		padding: var(--ml-space-2-5) var(--ml-space-3-5);
+		font-size: var(--ml-text-base);
+	}
+
+	/* Icon */
+	.ml-time-picker__icon {
+		flex-shrink: 0;
+		color: var(--ml-color-text-muted);
+	}
+
+	/* Value */
+	.ml-time-picker__value {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.ml-time-picker__value--placeholder {
+		color: var(--ml-color-text-muted);
+	}
+
+	/* Popover */
+	.ml-time-picker__popover {
+		position: fixed;
+		inset: unset;
+		margin: 0;
+		padding: var(--ml-space-4);
+		border: var(--ml-border) solid var(--ml-color-border);
+		border-radius: var(--ml-radius-lg);
+		background-color: var(--ml-color-surface);
+		box-shadow: var(--ml-shadow-lg);
+		z-index: 50;
+
+		opacity: 0;
+		transform: scale(0.95);
+		transition:
+			opacity var(--ml-duration-150) var(--ml-ease-out),
+			transform var(--ml-duration-150) var(--ml-ease-out),
+			display var(--ml-duration-150) allow-discrete;
+	}
+
+	.ml-time-picker__popover:popover-open {
+		opacity: 1;
+		transform: scale(1);
+	}
+
+	@starting-style {
+		.ml-time-picker__popover:popover-open {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+	}
+
+	/* Spinner group */
+	.ml-time-picker__spinner-group {
+		display: flex;
+		align-items: center;
+		gap: var(--ml-space-1);
+		justify-content: center;
+	}
+
+	.ml-time-picker__spinner {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--ml-space-1);
+	}
+
+	.ml-time-picker__spin-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		border: none;
+		border-radius: var(--ml-radius-md);
+		background: none;
+		color: var(--ml-color-text-muted);
+		cursor: pointer;
+		transition:
+			background-color var(--ml-duration-150) var(--ml-ease-in-out),
+			color var(--ml-duration-150) var(--ml-ease-in-out);
+	}
+
+	.ml-time-picker__spin-btn:hover {
+		background-color: var(--ml-color-surface-raised);
+		color: var(--ml-color-text);
+	}
+
+	.ml-time-picker__spin-btn:focus-visible {
+		outline: none;
+		box-shadow: var(--ml-shadow-focus-ring);
+	}
+
+	.ml-time-picker__spin-input {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 3rem;
+		height: 2.5rem;
+		font-size: var(--ml-text-xl);
+		font-weight: var(--ml-font-semibold);
+		font-family: var(--ml-font-mono, var(--ml-font-sans));
+		color: var(--ml-color-text);
+		background-color: var(--ml-color-surface-sunken);
+		border: var(--ml-border) solid transparent;
+		border-radius: var(--ml-radius-md);
+		text-align: center;
+		padding: 0;
+		outline: none;
+		-moz-appearance: textfield;
+	}
+
+	.ml-time-picker__spin-input::-webkit-outer-spin-button,
+	.ml-time-picker__spin-input::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	.ml-time-picker__spin-input:focus {
+		border-color: var(--ml-color-primary);
+		background-color: var(--ml-color-surface);
+	}
+
+	.ml-time-picker__separator {
+		font-size: var(--ml-text-xl);
+		font-weight: var(--ml-font-semibold);
+		color: var(--ml-color-text-muted);
+		padding: 0 var(--ml-space-0-5);
+		align-self: center;
+	}
+
+	/* AM/PM toggle */
+	.ml-time-picker__period {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		margin-left: var(--ml-space-2);
+	}
+
+	.ml-time-picker__period-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--ml-space-1-5) var(--ml-space-2-5);
+		border: var(--ml-border) solid var(--ml-color-border);
+		border-radius: var(--ml-radius-md);
+		background-color: var(--ml-color-surface);
+		font-family: var(--ml-font-sans);
+		font-size: var(--ml-text-sm);
+		font-weight: var(--ml-font-semibold);
+		color: var(--ml-color-text);
+		cursor: pointer;
+		transition:
+			background-color var(--ml-duration-150) var(--ml-ease-in-out),
+			border-color var(--ml-duration-150) var(--ml-ease-in-out);
+	}
+
+	.ml-time-picker__period-btn:hover {
+		background-color: var(--ml-color-surface-raised);
+		border-color: var(--ml-color-border-strong);
+	}
+
+	.ml-time-picker__period-btn:focus-visible {
+		outline: none;
+		box-shadow: var(--ml-shadow-focus-ring);
+	}
+
+	/* Footer */
+	.ml-time-picker__footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding-top: var(--ml-space-3);
+		margin-top: var(--ml-space-3);
+		border-top: var(--ml-border) solid var(--ml-color-border);
+	}
+
+	.ml-time-picker__now-btn,
+	.ml-time-picker__confirm-btn {
+		border: var(--ml-border) solid var(--ml-color-border);
+		border-radius: var(--ml-radius-md);
+		background-color: var(--ml-color-surface);
+		font-family: var(--ml-font-sans);
+		font-size: var(--ml-text-sm);
+		font-weight: var(--ml-font-medium);
+		color: var(--ml-color-text);
+		padding: var(--ml-space-1-5) var(--ml-space-3);
+		cursor: pointer;
+		transition:
+			background-color var(--ml-duration-150) var(--ml-ease-in-out),
+			border-color var(--ml-duration-150) var(--ml-ease-in-out);
+	}
+
+	.ml-time-picker__now-btn:hover,
+	.ml-time-picker__confirm-btn:hover {
+		background-color: var(--ml-color-surface-raised);
+		border-color: var(--ml-color-border-strong);
+	}
+
+	.ml-time-picker__now-btn:focus-visible,
+	.ml-time-picker__confirm-btn:focus-visible {
+		outline: none;
+		box-shadow: var(--ml-shadow-focus-ring);
+	}
+
+	.ml-time-picker__confirm-btn {
+		background-color: var(--ml-color-primary);
+		border-color: var(--ml-color-primary);
+		color: var(--ml-color-text-inverse);
+	}
+
+	.ml-time-picker__confirm-btn:hover {
+		background-color: var(--ml-color-primary-hover);
+		border-color: var(--ml-color-primary-hover);
+	}
+
+	/* Hint / Error */
+	.ml-time-picker__hint,
+	.ml-time-picker__error {
+		display: block;
+		margin-top: var(--ml-space-1-5);
+		font-size: var(--ml-text-sm);
+		line-height: var(--ml-leading-tight);
+	}
+
+	.ml-time-picker__hint {
+		color: var(--ml-color-text-muted);
+	}
+
+	.ml-time-picker__error {
+		color: var(--ml-color-danger);
+	}
+`;

package/lib/components/forms/time-picker/time-picker.template.d.ts

@@ -0,0 +1,3 @@
+import type { TimePickerComponent } from './time-picker.component.js';
+export declare function timePickerTemplate(c: TimePickerComponent): import("@melodicdev/core").TemplateResult;
+//# sourceMappingURL=time-picker.template.d.ts.map

package/lib/components/forms/time-picker/time-picker.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/time-picker/time-picker.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,mBAAmB,6CA6HxD"}