@sellmate/design-system 1.29.0 → 1.31.0

package/dist/esm/sd-time-picker-selector.entry.js

@@ -0,0 +1,177 @@
+import { r as registerInstance, c as createEvent, h } from './index-C599jhDs.js';
+import { p as parseTimeValue, c as clampTimePart, f as formatTimeValue, d as TIMEPICKER_SELECTOR } from './sd-time-picker.config-DUq29Nhs.js';
+import './component.field-DjKOoQuF.js';
+
+const sdTimePickerSelectorCss = () => `sd-time-picker-selector{display:block}sd-time-picker-selector .sd-time-picker-selector{display:flex;flex-direction:column;align-items:stretch;justify-content:center;overflow:hidden;background:var(--selector-bg);border-radius:var(--selector-radius);box-shadow:4px 8px 16px -4px rgba(34, 34, 34, 0.1), 0 0 24px -6px rgba(34, 34, 34, 0.12)}sd-time-picker-selector .sd-time-picker-selector__meridiem{display:flex;align-items:center;justify-content:center;padding:var(--selector-section-padding-y) var(--selector-section-padding-x);background:var(--selector-bg)}sd-time-picker-selector .sd-time-picker-selector__meridiem-group{display:flex;isolation:isolate}sd-time-picker-selector .sd-time-picker-selector__meridiem-button{width:61px;height:28px;border:1px solid #ccc;background:#fff;color:#555;font-size:12px;line-height:20px;font-weight:500;cursor:pointer}sd-time-picker-selector .sd-time-picker-selector__meridiem-button--first{border-radius:4px 0 0 4px;margin-right:-1px}sd-time-picker-selector .sd-time-picker-selector__meridiem-button--end{border-radius:0 4px 4px 0}sd-time-picker-selector .sd-time-picker-selector__meridiem-button--selected{z-index:1;border-color:#0075ff;color:#0075ff}sd-time-picker-selector .sd-time-picker-selector__divider{height:1px;width:100%;background:#e1e1e1}sd-time-picker-selector .sd-time-picker-selector__time{display:flex;align-items:center;justify-content:center;gap:var(--selector-time-gap);padding:var(--selector-section-padding-y) var(--selector-section-padding-x);background:var(--selector-bg)}sd-time-picker-selector .sd-time-picker-selector__column{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--selector-time-column-gap)}sd-time-picker-selector .sd-time-picker-selector__input{width:var(--selector-input-width);height:28px;box-sizing:border-box;border:1px solid #aaa;border-radius:4px;background:#fff;color:#222;font-size:12px;line-height:20px;text-align:center;outline:none}sd-time-picker-selector .sd-time-picker-selector__colon{width:var(--selector-colon-size);color:#555;font-size:16px;line-height:16px;text-align:center}`;
+
+const SdTimePickerSelector = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "sdUpdate", 7);
+    }
+    /** 선택된 시간 (HH:mm) */
+    value = null;
+    /** 오전/오후 선택 표시 여부 */
+    useMeridiem = true;
+    /** 분 증감 단위 */
+    minuteStep = 1;
+    /** 시간 변경 시 발생합니다. */
+    update;
+    valueChanged() {
+        this.syncFromValue();
+    }
+    editingPart = null;
+    inputDraft = {};
+    hour = 0;
+    minute = 0;
+    componentWillLoad() {
+        this.syncFromValue();
+    }
+    syncFromValue() {
+        const parsed = parseTimeValue(this.value);
+        this.hour = parsed.hour;
+        this.minute = parsed.minute;
+    }
+    get meridiem() {
+        return this.hour >= 12 ? 'PM' : 'AM';
+    }
+    get displayHour() {
+        if (!this.useMeridiem)
+            return this.hour;
+        const hour = this.hour % 12;
+        return hour === 0 ? 12 : hour;
+    }
+    emitNext(hour, minute) {
+        this.hour = clampTimePart(hour, 0, 23);
+        this.minute = clampTimePart(minute, 0, 59);
+        this.update.emit(formatTimeValue(this.hour, this.minute));
+    }
+    sanitizeInput(value) {
+        return value.replace(/\D/g, '').slice(0, 2);
+    }
+    setDraft(part, value) {
+        this.inputDraft = { ...this.inputDraft, [part]: value };
+    }
+    beginEdit(part, value) {
+        this.editingPart = part;
+        this.setDraft(part, String(value).padStart(2, '0'));
+    }
+    commitHourDraft(draft) {
+        const raw = clampTimePart(Number(draft), this.useMeridiem ? 1 : 0, this.useMeridiem ? 12 : 23);
+        const nextHour = this.useMeridiem
+            ? this.meridiem === 'PM'
+                ? raw === 12
+                    ? 12
+                    : raw + 12
+                : raw === 12
+                    ? 0
+                    : raw
+            : raw;
+        this.emitNext(nextHour, this.minute);
+        return raw;
+    }
+    commitMinuteDraft(draft) {
+        const minute = clampTimePart(Number(draft), 0, 59);
+        this.emitNext(this.hour, minute);
+        return minute;
+    }
+    endEdit(part) {
+        const draft = this.inputDraft[part];
+        if (part === 'hour' && draft != null && draft !== '') {
+            this.commitHourDraft(draft);
+        }
+        if (part === 'minute' && draft != null && draft !== '') {
+            this.commitMinuteDraft(draft);
+        }
+        this.editingPart = null;
+        this.inputDraft = {};
+    }
+    setMeridiem(meridiem) {
+        if (meridiem === this.meridiem)
+            return;
+        if (meridiem === 'AM') {
+            this.emitNext(this.hour - 12, this.minute);
+            return;
+        }
+        this.emitNext(this.hour + 12, this.minute);
+    }
+    changeHour(delta) {
+        this.emitNext((this.hour + delta + 24) % 24, this.minute);
+    }
+    changeMinute(delta) {
+        const next = this.minute + delta;
+        if (next > 59) {
+            this.emitNext((this.hour + 1) % 24, next - 60);
+            return;
+        }
+        if (next < 0) {
+            this.emitNext((this.hour + 23) % 24, next + 60);
+            return;
+        }
+        this.emitNext(this.hour, next);
+    }
+    handleHourInput = (event) => {
+        const target = event.target;
+        const draft = this.sanitizeInput(target.value);
+        target.value = draft;
+        this.setDraft('hour', draft);
+        if (draft === '')
+            return;
+        if (draft.length < 2)
+            return;
+        const raw = this.commitHourDraft(draft);
+        const displayDraft = Number(draft) === raw ? draft : String(raw);
+        target.value = displayDraft;
+        this.setDraft('hour', displayDraft);
+    };
+    handleMinuteInput = (event) => {
+        const target = event.target;
+        const draft = this.sanitizeInput(target.value);
+        target.value = draft;
+        this.setDraft('minute', draft);
+        if (draft === '')
+            return;
+        if (draft.length < 2)
+            return;
+        const nextMinute = this.commitMinuteDraft(draft);
+        const displayDraft = Number(draft) === nextMinute ? draft : String(nextMinute);
+        target.value = displayDraft;
+        this.setDraft('minute', displayDraft);
+        this.emitNext(this.hour, nextMinute);
+    };
+    renderMeridiemButton(label, meridiem, position) {
+        const selected = this.meridiem === meridiem;
+        return (h("button", { type: "button", class: {
+                'sd-time-picker-selector__meridiem-button': true,
+                'sd-time-picker-selector__meridiem-button--selected': selected,
+                [`sd-time-picker-selector__meridiem-button--${position}`]: true,
+            }, onClick: () => this.setMeridiem(meridiem) }, label));
+    }
+    renderColumn(type) {
+        const isHour = type === 'hour';
+        const value = isHour ? this.displayHour : this.minute;
+        const displayValue = this.editingPart === type ? (this.inputDraft[type] ?? '') : String(value).padStart(2, '0');
+        return (h("div", { class: `sd-time-picker-selector__column sd-time-picker-selector__column--${type}` }, h("sd-ghost-button", { icon: "chevronUp", size: "xs", ariaLabel: `${isHour ? '시' : '분'} 증가`, onSdClick: () => (isHour ? this.changeHour(1) : this.changeMinute(this.minuteStep)) }), h("input", { class: "sd-time-picker-selector__input", type: "text", inputmode: "numeric", value: displayValue, placeholder: "-", onFocus: () => this.beginEdit(type, value), onBlur: () => this.endEdit(type), onInput: isHour ? this.handleHourInput : this.handleMinuteInput, "aria-label": isHour ? '시' : '분' }), h("sd-ghost-button", { icon: "chevronDown", size: "xs", ariaLabel: `${isHour ? '시' : '분'} 감소`, onSdClick: () => (isHour ? this.changeHour(-1) : this.changeMinute(-this.minuteStep)) })));
+    }
+    render() {
+        const cssVars = {
+            '--selector-bg': TIMEPICKER_SELECTOR.bg,
+            '--selector-radius': `${TIMEPICKER_SELECTOR.radius}px`,
+            '--selector-section-padding-x': `${TIMEPICKER_SELECTOR.section.paddingX}px`,
+            '--selector-section-padding-y': `${TIMEPICKER_SELECTOR.section.paddingY}px`,
+            '--selector-time-gap': `${TIMEPICKER_SELECTOR.time.gap}px`,
+            '--selector-time-column-gap': `${TIMEPICKER_SELECTOR.time.column.gap}px`,
+            '--selector-input-width': `${TIMEPICKER_SELECTOR.inputWidth}px`,
+            '--selector-colon-size': `${TIMEPICKER_SELECTOR.colonSize}px`,
+        };
+        return (h("div", { key: '230eba90099f06b238a49da38bade09d5a1a168a', class: "sd-time-picker-selector", style: cssVars }, this.useMeridiem && (h("div", { key: 'a15baa49aa07b469843f15a1c381c97df6b31600', class: "sd-time-picker-selector__meridiem" }, h("div", { key: 'e1e9576461c4c9059b1d5c9f4a8528af91869316', class: "sd-time-picker-selector__meridiem-group" }, this.renderMeridiemButton('오전', 'AM', 'first'), this.renderMeridiemButton('오후', 'PM', 'end')))), this.useMeridiem && h("div", { key: 'c9c8dfbb3c724bef2d20d22ea839079c8176c1c6', class: "sd-time-picker-selector__divider" }), h("div", { key: 'd7157d6f5a38b09098fea6dc33d9ca69cf9fcd06', class: "sd-time-picker-selector__time" }, this.renderColumn('hour'), h("span", { key: '83b0ce7966cabe292eb454d103507a0504915aa7', class: "sd-time-picker-selector__colon" }, ":"), this.renderColumn('minute'))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+SdTimePickerSelector.style = sdTimePickerSelectorCss();
+
+export { SdTimePickerSelector as sd_time_picker_selector };

package/dist/esm/sd-time-picker-trigger.entry.js

@@ -0,0 +1,73 @@
+import { r as registerInstance, c as createEvent, h } from './index-C599jhDs.js';
+import { b as TIMEPICKER_SIZE_MAP, T as TIMEPICKER_COLORS } from './sd-time-picker.config-DUq29Nhs.js';
+import './component.field-DjKOoQuF.js';
+
+const sdTimePickerTriggerCss = () => `sd-time-picker-trigger{display:block;width:100%;height:100%}sd-time-picker-trigger .sd-time-picker-trigger{display:flex;align-items:center;gap:var(--trigger-gap);width:100%;height:100%;padding:0 var(--trigger-padding-x);cursor:pointer;user-select:none;overflow:hidden;border-radius:var(--trigger-radius)}sd-time-picker-trigger .sd-time-picker-trigger--disabled{cursor:not-allowed}sd-time-picker-trigger .sd-time-picker-trigger__icon,sd-time-picker-trigger .sd-time-picker-trigger__clear{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}sd-time-picker-trigger .sd-time-picker-trigger__text{flex:1;min-width:var(--trigger-text-min-width, 80px);font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}`;
+
+const SdTimePickerTrigger = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.triggerClick = createEvent(this, "sdTriggerClick", 7);
+        this.clear = createEvent(this, "sdClear", 7);
+    }
+    /** 표시할 시간 텍스트 */
+    displayText = '';
+    /** 입력 힌트 텍스트 */
+    placeholder = '00:00';
+    /** 비활성 상태 여부 */
+    disabled = false;
+    /** 지우기 버튼 표시 여부 */
+    clearable = false;
+    /** 트리거 크기 */
+    size = 'sm';
+    /** 트리거 클릭 시 발생합니다. */
+    triggerClick;
+    /** 지우기 버튼 클릭 시 발생합니다. */
+    clear;
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        this.triggerClick.emit();
+    };
+    handleClear = (event) => {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        this.clear.emit();
+    };
+    render() {
+        const sizeTokens = TIMEPICKER_SIZE_MAP[this.size] ?? TIMEPICKER_SIZE_MAP.sm;
+        const hasValue = this.displayText !== '';
+        const textMinWidth = this.size === 'md' ? 96 : 80;
+        const cssVars = {
+            '--trigger-padding-x': `${sizeTokens.paddingX}px`,
+            '--trigger-gap': `${sizeTokens.gap}px`,
+            '--trigger-icon-size': `${sizeTokens.iconSize}px`,
+            '--trigger-font-size': `${sizeTokens.fontSize}px`,
+            '--trigger-line-height': `${sizeTokens.lineHeight}px`,
+            '--trigger-font-weight': sizeTokens.fontWeight,
+            '--trigger-radius': `${sizeTokens.radius}px`,
+            '--trigger-text-min-width': `${textMinWidth}px`,
+            '--trigger-text-color': this.disabled
+                ? TIMEPICKER_COLORS.text.disabled
+                : hasValue
+                    ? TIMEPICKER_COLORS.text.default
+                    : TIMEPICKER_COLORS.text.hint,
+            '--trigger-icon-color': this.disabled
+                ? TIMEPICKER_COLORS.icon.disabled
+                : TIMEPICKER_COLORS.icon.default,
+        };
+        return (h("div", { key: '6b6bff8d9928ace4cda84a7bdb2ac6f73f0d2329', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+                'sd-time-picker-trigger': true,
+                'sd-time-picker-trigger--disabled': this.disabled,
+            }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleClick();
+                }
+            } }, h("sd-icon", { key: 'd371bf5acec8592a44c0d18e738b5ac71b556f32', name: "clockOutline", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-time-picker-trigger__icon" }), h("span", { key: '2bc0ddfef47a1e929ceafb723345e1ae9e62095b', class: "sd-time-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder), this.clearable && hasValue && !this.disabled && (h("sd-ghost-button", { key: '76763c65dd6ee64c8f1abc0c871d8c50cfaf3852', class: "sd-time-picker-trigger__clear", icon: "close", size: "xs", ariaLabel: "\uC2DC\uAC04 \uC9C0\uC6B0\uAE30", onSdClick: this.handleClear }))));
+    }
+};
+SdTimePickerTrigger.style = sdTimePickerTriggerCss();
+
+export { SdTimePickerTrigger as sd_time_picker_trigger };

package/dist/esm/sd-time-picker.config-DUq29Nhs.js

@@ -0,0 +1,148 @@
+import { f as fieldTokens } from './component.field-DjKOoQuF.js';
+
+const timepicker = {
+	border: {
+		"default": "#AAAAAA",
+		focus: "#0075FF",
+		width: "1"
+	},
+	bg: {
+		"default": "#FFFFFF",
+		disabled: "#E1E1E1"
+	},
+	icon: {
+		"default": "#888888",
+		disabled: "#BBBBBB"
+	},
+	text: {
+		"default": "#222222",
+		disabled: "#888888"
+	},
+	selector: {
+		bg: "#FFFFFF",
+		range: {
+			heading: {
+				color: "#555555",
+				gap: "16"
+			},
+			paddingXY: "24",
+			panelGap: "24",
+			section: {
+				gap: "12"
+			}
+		},
+		radius: "8",
+		section: {
+			paddingX: "16",
+			paddingY: "12"
+		},
+		time: {
+			gap: "4",
+			column: {
+				gap: "8"
+			}
+		},
+		input: {
+			width: "40"
+		},
+		colon: {
+			size: "16"
+		}
+	},
+	sm: {
+		height: "28",
+		paddingX: "12",
+		gap: "8",
+		icon: "16",
+		radius: "4"
+	},
+	md: {
+		height: "36",
+		paddingX: "16",
+		gap: "12",
+		icon: "20",
+		radius: "6"
+	}
+};
+var timepickerTokens = {
+	timepicker: timepicker
+};
+
+const sm = timepickerTokens.timepicker.sm;
+const md = timepickerTokens.timepicker.md;
+const TIMEPICKER_SIZE_MAP = {
+    sm: {
+        height: sm.height,
+        paddingX: sm.paddingX,
+        gap: sm.gap,
+        iconSize: sm.icon,
+        radius: sm.radius,
+        // TODO: component.timepicker 토큰에 typography가 추가되면 이 fallback을 교체한다.
+        fontSize: '12',
+        lineHeight: '20',
+        fontWeight: '400',
+        minWidth: '128',
+    },
+    md: {
+        height: md.height,
+        paddingX: md.paddingX,
+        gap: md.gap,
+        iconSize: md.icon,
+        radius: md.radius,
+        // TODO: component.timepicker 토큰에 typography가 추가되면 이 fallback을 교체한다.
+        fontSize: '14',
+        lineHeight: '24',
+        fontWeight: '400',
+        minWidth: '160',
+    },
+};
+const TIMEPICKER_COLORS = {
+    border: timepickerTokens.timepicker.border,
+    bg: timepickerTokens.timepicker.bg,
+    icon: timepickerTokens.timepicker.icon,
+    text: {
+        ...timepickerTokens.timepicker.text,
+        hint: fieldTokens.field.hint.color,
+    },
+};
+const TIMEPICKER_SELECTOR = {
+    bg: timepickerTokens.timepicker.selector.bg,
+    radius: timepickerTokens.timepicker.selector.radius,
+    section: timepickerTokens.timepicker.selector.section,
+    time: timepickerTokens.timepicker.selector.time,
+    inputWidth: timepickerTokens.timepicker.selector.input.width,
+    colonSize: timepickerTokens.timepicker.selector.colon.size,
+    range: timepickerTokens.timepicker.selector.range,
+};
+function clampTimePart(value, min, max) {
+    if (!Number.isFinite(value))
+        return min;
+    return Math.min(Math.max(value, min), max);
+}
+function padTimePart(value) {
+    return String(value).padStart(2, '0');
+}
+function parseTimeValue(value) {
+    const match = /^(\d{1,2}):(\d{1,2})$/.exec(value ?? '');
+    if (!match)
+        return { hour: 0, minute: 0 };
+    return {
+        hour: clampTimePart(Number(match[1]), 0, 23),
+        minute: clampTimePart(Number(match[2]), 0, 59),
+    };
+}
+function formatTimeValue(hour, minute) {
+    return `${padTimePart(clampTimePart(hour, 0, 23))}:${padTimePart(clampTimePart(minute, 0, 59))}`;
+}
+function formatTimeDisplay(value, type) {
+    if (value == null || value === '')
+        return '';
+    const { hour, minute } = parseTimeValue(value);
+    if (type === 'default')
+        return formatTimeValue(hour, minute);
+    const meridiem = hour >= 12 ? '오후' : '오전';
+    const displayHour = hour % 12 === 0 ? 12 : hour % 12;
+    return `${meridiem} ${padTimePart(displayHour)}:${padTimePart(minute)}`;
+}
+
+export { TIMEPICKER_COLORS as T, formatTimeDisplay as a, TIMEPICKER_SIZE_MAP as b, clampTimePart as c, TIMEPICKER_SELECTOR as d, formatTimeValue as f, parseTimeValue as p };

package/dist/esm/sd-time-picker.entry.js

@@ -0,0 +1,171 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-C599jhDs.js';
+import { n as nanoid } from './index-CCwNgVmC.js';
+import { f as formatTimeValue, a as formatTimeDisplay, T as TIMEPICKER_COLORS, b as TIMEPICKER_SIZE_MAP, p as parseTimeValue } from './sd-time-picker.config-DUq29Nhs.js';
+import './component.field-DjKOoQuF.js';
+
+const sdTimePickerCss = () => `sd-time-picker{display:inline-flex}sd-time-picker sd-portal{display:none}sd-time-picker .sd-time-picker{position:relative;min-width:var(--sd-time-picker-min-width);width:100%;height:100%}`;
+
+const SdTimePicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
+    }
+    static CLOSE_ANIMATION_DURATION = 150;
+    get el() { return getElement(this); }
+    /** 선택된 시간 (HH:mm) */
+    value = null;
+    /** 입력 필드 크기 */
+    size = 'sm';
+    /** 표시 타입: default(24시간) / midday(오전·오후) */
+    type = 'default';
+    /** 시간 미선택 시 표시할 placeholder */
+    placeholder = '00:00';
+    /** 비활성 상태 여부 */
+    disabled = false;
+    /** 값이 있을 때 지우기 버튼 표시 여부 */
+    clearable = false;
+    /** 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. */
+    useMeridiem;
+    /** 분 증감 단위 */
+    minuteStep = 1;
+    /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
+    width = '';
+    // sd-field 공통 props
+    /** 레이블 텍스트 */
+    label = '';
+    /** 레이블 너비 */
+    labelWidth = '';
+    /** 필드 우측 어드온 레이블 */
+    addonLabel = '';
+    /** 어드온 정렬 방향 */
+    addonAlign = 'start';
+    /** 필드 하단 힌트 텍스트 */
+    hint = '';
+    /** 에러 메시지 */
+    errorMessage = '';
+    /** 유효성 검사 규칙 목록 */
+    rules = [];
+    /** 에러 상태 여부 */
+    error = false;
+    /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
+    status;
+    /** 레이블 영역 아이콘 */
+    icon = undefined;
+    /** 레이블 툴팁 텍스트 */
+    labelTooltip = '';
+    /** 레이블 툴팁 상세 옵션 */
+    labelTooltipProps = null;
+    isOpen = false;
+    isAnimatingOut = false;
+    focused = false;
+    hovered = false;
+    /** 시간 선택 시 선택된 시간(HH:mm)을 전달합니다. */
+    update;
+    /** 선택기 열림/닫힘 상태가 바뀔 때 발생합니다. */
+    dropDownShow;
+    triggerRef;
+    formField;
+    closeAnimationTimer;
+    /** 폼 연동용 name 속성 */
+    name = nanoid();
+    watchIsOpen(newValue) {
+        this.focused = newValue;
+        this.dropDownShow.emit({ isOpen: newValue });
+    }
+    valueChanged(newValue) {
+        if (newValue == null || newValue === '')
+            return;
+        const parsed = parseTimeValue(newValue);
+        const normalized = formatTimeValue(parsed.hour, parsed.minute);
+        if (normalized !== newValue)
+            this.value = normalized;
+    }
+    /** 유효성 검사를 실행합니다. */
+    async sdValidate() {
+        return this.formField?.sdValidate();
+    }
+    /** 값과 유효성 상태를 초기화합니다. */
+    async sdReset() {
+        return this.formField?.sdReset();
+    }
+    /** 유효성 상태만 초기화합니다. */
+    async sdResetValidate() {
+        return this.formField?.sdResetValidation();
+    }
+    /** 입력 필드에 포커스를 이동합니다. */
+    async sdFocus() {
+        return this.formField?.sdFocus();
+    }
+    componentWillLoad() {
+        this.valueChanged(this.value);
+    }
+    disconnectedCallback() {
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+    }
+    closeDropdown() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.isAnimatingOut = true;
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.closeAnimationTimer = setTimeout(() => {
+            this.isAnimatingOut = false;
+        }, SdTimePicker.CLOSE_ANIMATION_DURATION);
+    }
+    handleTriggerClick = () => {
+        if (this.disabled)
+            return;
+        if (this.isOpen) {
+            this.closeDropdown();
+        }
+        else {
+            if (this.closeAnimationTimer)
+                clearTimeout(this.closeAnimationTimer);
+            this.isAnimatingOut = false;
+            this.isOpen = true;
+        }
+    };
+    handleClear = (event) => {
+        event.stopPropagation();
+        this.value = null;
+        this.update.emit(null);
+    };
+    handleSelect = (event) => {
+        event.stopPropagation();
+        this.value = event.detail;
+        this.update.emit(this.value);
+    };
+    get effectiveUseMeridiem() {
+        return this.useMeridiem ?? this.type === 'midday';
+    }
+    render() {
+        const sizeTokens = TIMEPICKER_SIZE_MAP[this.size] ?? TIMEPICKER_SIZE_MAP.sm;
+        const cssVars = {
+            '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
+            '--sd-system-size-field-md-height': `${sizeTokens.height}px`,
+            '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
+            '--sd-system-radius-field-md': `${sizeTokens.radius}px`,
+            '--sd-time-picker-min-width': `${sizeTokens.minWidth}px`,
+            '--sd-system-color-field-border-default': TIMEPICKER_COLORS.border.default,
+            '--sd-system-color-field-border-focus': TIMEPICKER_COLORS.border.focus,
+            '--sd-system-color-field-bg-default': TIMEPICKER_COLORS.bg.default,
+        };
+        return (h("sd-field", { key: 'dc433d8d452ad71bc5ea1b388399df862ca9cd04', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, status: this.status, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '258c3a0d3232e8edfe5304dd2e0fcea4060f5893', class: "sd-time-picker", ref: el => {
+                this.triggerRef = el;
+            } }, h("sd-time-picker-trigger", { key: '22af4e81d925cbdacea4e08b05aaa13cf5eb9ef8', displayText: formatTimeDisplay(this.value, this.effectiveUseMeridiem ? 'midday' : 'default'), placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, size: this.size, onSdTriggerClick: this.handleTriggerClick, onSdClear: this.handleClear })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '8c7e43950257c8a8bf3b157f69985b3284430107', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-time-picker-selector", { key: '27109beda36d1817807f6a8b6af8a7a12b4c31c6', value: this.value, useMeridiem: this.effectiveUseMeridiem, minuteStep: this.minuteStep, onSdUpdate: this.handleSelect })))));
+    }
+    static get watchers() { return {
+        "isOpen": [{
+                "watchIsOpen": 0
+            }],
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+SdTimePicker.style = sdTimePickerCss();
+
+export { SdTimePicker as sd_time_picker };