@sellmate/design-system 1.29.0 → 1.31.0

package/dist/collection/components/sd-time-range-picker/sd-time-range-picker-selector/sd-time-range-picker-selector.css

@@ -0,0 +1,102 @@
+sd-time-range-picker-selector {
+  display: block;
+}
+sd-time-range-picker-selector .sd-time-range-picker-selector {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--selector-range-panel-gap);
+  padding: var(--selector-range-padding);
+  overflow: hidden;
+  background: var(--selector-bg);
+  border-radius: var(--selector-radius);
+  box-shadow: var(--sd-system-shadow-spread-sm-x) var(--sd-system-shadow-spread-sm-y) var(--sd-system-shadow-spread-sm-blur) var(--sd-system-shadow-spread-sm-spread) var(--sd-system-shadow-spread-sm-color), var(--sd-system-shadow-spread-md-x) var(--sd-system-shadow-spread-md-y) var(--sd-system-shadow-spread-md-blur) var(--sd-system-shadow-spread-md-spread) var(--sd-system-shadow-spread-md-color);
+}
+sd-time-range-picker-selector .sd-time-range-picker-selector__panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--selector-range-section-gap);
+}
+sd-time-range-picker-selector .sd-time-range-picker-selector__heading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--selector-range-heading-gap);
+}
+sd-time-range-picker-selector .sd-time-range-picker-selector__heading-text {
+  color: var(--selector-range-heading-color);
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+}
+sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-group {
+  display: flex;
+  isolation: isolate;
+}
+sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-button {
+  width: 61px;
+  height: 28px;
+  border: var(--selector-border-width) solid var(--selector-border-default);
+  background: var(--selector-bg);
+  color: var(--selector-range-heading-color);
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 500;
+  cursor: pointer;
+}
+sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-button--first {
+  border-radius: 4px 0 0 4px;
+  margin-right: -1px;
+}
+sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-button--end {
+  border-radius: 0 4px 4px 0;
+}
+sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-button--selected {
+  z-index: 1;
+  border-color: var(--selector-border-focus);
+  color: var(--selector-border-focus);
+}
+sd-time-range-picker-selector .sd-time-range-picker-selector__divider {
+  align-self: stretch;
+  width: 1px;
+  background: var(--selector-bg-disabled);
+}
+sd-time-range-picker-selector .sd-time-range-picker-selector__time {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--selector-time-gap);
+  padding: 0 16px;
+  background: var(--selector-bg);
+}
+sd-time-range-picker-selector .sd-time-range-picker-selector__column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--selector-time-column-gap);
+}
+sd-time-range-picker-selector .sd-time-range-picker-selector__input {
+  width: var(--selector-input-width);
+  height: 28px;
+  box-sizing: border-box;
+  border: var(--selector-border-width) solid var(--selector-border-default);
+  border-radius: 4px;
+  background: var(--selector-bg);
+  color: var(--selector-text-default);
+  font-size: 12px;
+  line-height: 20px;
+  text-align: center;
+  outline: none;
+}
+sd-time-range-picker-selector .sd-time-range-picker-selector__colon {
+  width: var(--selector-colon-size);
+  color: var(--selector-range-heading-color);
+  font-size: 16px;
+  line-height: 16px;
+  text-align: center;
+}

package/dist/collection/components/sd-time-range-picker/sd-time-range-picker-selector/sd-time-range-picker-selector.js

@@ -0,0 +1,338 @@
+import { h } from "@stencil/core";
+import { TIME_RANGE_PICKER_COLORS, TIME_RANGE_PICKER_SELECTOR, formatTimeValue, parseTimeValue, } from "../sd-time-range-picker.config";
+import { clampTimePart } from "../../sd-time-picker/sd-time-picker.config";
+export class SdTimeRangePickerSelector {
+    /** 선택된 시간 범위 [시작, 종료] (HH:mm) */
+    value = null;
+    /** 오전/오후 선택 표시 여부 */
+    useMeridiem = false;
+    /** 분 증감 단위 */
+    minuteStep = 1;
+    /** 범위 순서 정책. strict는 시작 시간이 종료 시간보다 늦어지지 않도록 보정합니다. */
+    rangeOrder = 'strict';
+    /** 시간 범위 변경 시 발생합니다. */
+    update;
+    editingKey = null;
+    inputDraft = {};
+    autoAdjusted = null;
+    getRange() {
+        return this.value ?? ['00:00', '23:59'];
+    }
+    getParts(side) {
+        const [start, end] = this.getRange();
+        return parseTimeValue(side === 'start' ? start : end);
+    }
+    getMeridiem(side) {
+        return this.getParts(side).hour >= 12 ? 'PM' : 'AM';
+    }
+    getDisplayHour(side) {
+        const { hour } = this.getParts(side);
+        if (!this.useMeridiem)
+            return hour;
+        const displayHour = hour % 12;
+        return displayHour === 0 ? 12 : displayHour;
+    }
+    emitSide(side, hour, minute, direction = 'unknown') {
+        const [start, end] = this.getRange();
+        const next = formatTimeValue(hour, minute);
+        this.update.emit(this.normalizeNextRange(side === 'start' ? [next, end] : [start, next], side, direction));
+    }
+    getTimeMinutes(value) {
+        const { hour, minute } = parseTimeValue(value);
+        return hour * 60 + minute;
+    }
+    normalizeNextRange(range, changedSide, direction) {
+        if (this.rangeOrder === 'allow-cross-day')
+            return range;
+        const [start, end] = range;
+        const [currentStart, currentEnd] = this.getRange();
+        if (this.getTimeMinutes(start) <= this.getTimeMinutes(end)) {
+            const shouldKeepSynced = this.autoAdjusted?.side === changedSide &&
+                currentStart === currentEnd &&
+                start !== end &&
+                (direction === 'unknown' || this.autoAdjusted.direction === direction);
+            if (shouldKeepSynced) {
+                return changedSide === 'start' ? [start, start] : [end, end];
+            }
+            this.autoAdjusted = null;
+            return range;
+        }
+        this.autoAdjusted = {
+            side: changedSide,
+            direction: changedSide === 'start' ? 'increase' : 'decrease',
+        };
+        return changedSide === 'start' ? [start, start] : [end, end];
+    }
+    getEditingKey(side, part) {
+        return `${side}-${part}`;
+    }
+    sanitizeInput(value) {
+        return value.replace(/\D/g, '').slice(0, 2);
+    }
+    setDraft(key, value) {
+        this.inputDraft = { ...this.inputDraft, [key]: value };
+    }
+    beginEdit(side, part, value) {
+        const key = this.getEditingKey(side, part);
+        this.editingKey = key;
+        this.setDraft(key, String(value).padStart(2, '0'));
+    }
+    commitHourDraft(side, draft) {
+        const raw = clampTimePart(Number(draft), this.useMeridiem ? 1 : 0, this.useMeridiem ? 12 : 23);
+        const { minute } = this.getParts(side);
+        const meridiem = this.getMeridiem(side);
+        const nextHour = this.useMeridiem
+            ? meridiem === 'PM'
+                ? raw === 12
+                    ? 12
+                    : raw + 12
+                : raw === 12
+                    ? 0
+                    : raw
+            : raw;
+        this.emitSide(side, nextHour, minute);
+        return raw;
+    }
+    commitMinuteDraft(side, draft) {
+        const { hour } = this.getParts(side);
+        const nextMinute = clampTimePart(Number(draft), 0, 59);
+        this.emitSide(side, hour, nextMinute);
+        return nextMinute;
+    }
+    endEdit(side, part) {
+        const draft = this.inputDraft[this.getEditingKey(side, part)];
+        if (part === 'hour' && draft != null && draft !== '') {
+            this.commitHourDraft(side, draft);
+        }
+        if (part === 'minute' && draft != null && draft !== '') {
+            this.commitMinuteDraft(side, draft);
+        }
+        this.editingKey = null;
+        this.inputDraft = {};
+    }
+    setMeridiem(side, meridiem) {
+        const current = this.getMeridiem(side);
+        if (current === meridiem)
+            return;
+        const { hour, minute } = this.getParts(side);
+        this.emitSide(side, meridiem === 'AM' ? hour - 12 : hour + 12, minute);
+    }
+    changeHour(side, delta) {
+        const { hour, minute } = this.getParts(side);
+        this.emitSide(side, (hour + delta + 24) % 24, minute, delta > 0 ? 'increase' : 'decrease');
+    }
+    changeMinute(side, delta) {
+        const { hour, minute } = this.getParts(side);
+        const next = minute + delta;
+        if (next > 59) {
+            this.emitSide(side, (hour + 1) % 24, next - 60, delta > 0 ? 'increase' : 'decrease');
+            return;
+        }
+        if (next < 0) {
+            this.emitSide(side, (hour + 23) % 24, next + 60, delta > 0 ? 'increase' : 'decrease');
+            return;
+        }
+        this.emitSide(side, hour, next, delta > 0 ? 'increase' : 'decrease');
+    }
+    handleHourInput = (side, event) => {
+        const target = event.target;
+        const draft = this.sanitizeInput(target.value);
+        target.value = draft;
+        this.setDraft(this.getEditingKey(side, 'hour'), draft);
+        if (draft === '')
+            return;
+        if (draft.length < 2)
+            return;
+        const raw = this.commitHourDraft(side, draft);
+        const displayDraft = Number(draft) === raw ? draft : String(raw);
+        target.value = displayDraft;
+        this.setDraft(this.getEditingKey(side, 'hour'), displayDraft);
+    };
+    handleMinuteInput = (side, event) => {
+        const target = event.target;
+        const draft = this.sanitizeInput(target.value);
+        target.value = draft;
+        this.setDraft(this.getEditingKey(side, 'minute'), draft);
+        if (draft === '')
+            return;
+        if (draft.length < 2)
+            return;
+        const nextMinute = this.commitMinuteDraft(side, draft);
+        const displayDraft = Number(draft) === nextMinute ? draft : String(nextMinute);
+        target.value = displayDraft;
+        this.setDraft(this.getEditingKey(side, 'minute'), displayDraft);
+    };
+    renderMeridiemButton(side, label, meridiem, position) {
+        const selected = this.getMeridiem(side) === meridiem;
+        return (h("button", { type: "button", class: {
+                'sd-time-range-picker-selector__meridiem-button': true,
+                'sd-time-range-picker-selector__meridiem-button--selected': selected,
+                [`sd-time-range-picker-selector__meridiem-button--${position}`]: true,
+            }, onClick: () => this.setMeridiem(side, meridiem) }, label));
+    }
+    renderColumn(side, type) {
+        const isHour = type === 'hour';
+        const { minute } = this.getParts(side);
+        const value = isHour ? this.getDisplayHour(side) : minute;
+        const editingKey = this.getEditingKey(side, type);
+        const displayValue = this.editingKey === editingKey
+            ? (this.inputDraft[editingKey] ?? '')
+            : String(value).padStart(2, '0');
+        return (h("div", { class: "sd-time-range-picker-selector__column" }, h("sd-ghost-button", { icon: "chevronUp", size: "xs", ariaLabel: `${side === 'start' ? '시작' : '종료'} ${isHour ? '시' : '분'} 증가`, onSdClick: () => isHour ? this.changeHour(side, 1) : this.changeMinute(side, this.minuteStep) }), h("input", { class: "sd-time-range-picker-selector__input", type: "text", inputmode: "numeric", value: displayValue, placeholder: "-", onFocus: () => this.beginEdit(side, type, value), onBlur: () => this.endEdit(side, type), onInput: event => isHour ? this.handleHourInput(side, event) : this.handleMinuteInput(side, event), "aria-label": `${side === 'start' ? '시작' : '종료'} ${isHour ? '시' : '분'}` }), h("sd-ghost-button", { icon: "chevronDown", size: "xs", ariaLabel: `${side === 'start' ? '시작' : '종료'} ${isHour ? '시' : '분'} 감소`, onSdClick: () => isHour ? this.changeHour(side, -1) : this.changeMinute(side, -this.minuteStep) })));
+    }
+    renderPanel(side, title) {
+        return (h("div", { class: "sd-time-range-picker-selector__panel" }, h("div", { class: "sd-time-range-picker-selector__heading" }, h("div", { class: "sd-time-range-picker-selector__heading-text" }, title), this.useMeridiem && (h("div", { class: "sd-time-range-picker-selector__meridiem-group" }, this.renderMeridiemButton(side, '오전', 'AM', 'first'), this.renderMeridiemButton(side, '오후', 'PM', 'end')))), h("div", { class: "sd-time-range-picker-selector__time" }, this.renderColumn(side, 'hour'), h("span", { class: "sd-time-range-picker-selector__colon" }, ":"), this.renderColumn(side, 'minute'))));
+    }
+    render() {
+        const cssVars = {
+            '--selector-bg': TIME_RANGE_PICKER_SELECTOR.bg,
+            '--selector-radius': `${TIME_RANGE_PICKER_SELECTOR.radius}px`,
+            '--selector-range-padding': `${TIME_RANGE_PICKER_SELECTOR.range.paddingXY}px`,
+            '--selector-range-panel-gap': `${TIME_RANGE_PICKER_SELECTOR.range.panelGap}px`,
+            '--selector-range-section-gap': `${TIME_RANGE_PICKER_SELECTOR.range.section.gap}px`,
+            '--selector-range-heading-gap': `${TIME_RANGE_PICKER_SELECTOR.range.heading.gap}px`,
+            '--selector-range-heading-color': TIME_RANGE_PICKER_SELECTOR.range.heading.color,
+            '--selector-time-gap': `${TIME_RANGE_PICKER_SELECTOR.time.gap}px`,
+            '--selector-time-column-gap': `${TIME_RANGE_PICKER_SELECTOR.time.column.gap}px`,
+            '--selector-input-width': `${TIME_RANGE_PICKER_SELECTOR.inputWidth}px`,
+            '--selector-colon-size': `${TIME_RANGE_PICKER_SELECTOR.colonSize}px`,
+            '--selector-border-width': `${TIME_RANGE_PICKER_COLORS.border.width}px`,
+            '--selector-border-default': TIME_RANGE_PICKER_COLORS.border.default,
+            '--selector-border-focus': TIME_RANGE_PICKER_COLORS.border.focus,
+            '--selector-bg-disabled': TIME_RANGE_PICKER_COLORS.bg.disabled,
+            '--selector-text-default': TIME_RANGE_PICKER_COLORS.text.default,
+        };
+        return (h("div", { key: '2cfcf8240579a3526c40c430e1704c8b10556add', class: "sd-time-range-picker-selector", style: cssVars }, this.renderPanel('start', '시작 시간'), h("div", { key: 'c48b1c6af7897a64339ce9c1c1da9d8e4a02c612', class: "sd-time-range-picker-selector__divider" }), this.renderPanel('end', '종료 시간')));
+    }
+    static get is() { return "sd-time-range-picker-selector"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-time-range-picker-selector.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-time-range-picker-selector.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimeRangeValue",
+                    "resolved": "[string, string] | null",
+                    "references": {
+                        "TimeRangeValue": {
+                            "location": "import",
+                            "path": "../sd-time-range-picker.config",
+                            "id": "src/components/sd-time-range-picker/sd-time-range-picker.config.ts::TimeRangeValue",
+                            "referenceLocation": "TimeRangeValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC120\uD0DD\uB41C \uC2DC\uAC04 \uBC94\uC704 [\uC2DC\uC791, \uC885\uB8CC] (HH:mm)"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "useMeridiem": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC624\uC804/\uC624\uD6C4 \uC120\uD0DD \uD45C\uC2DC \uC5EC\uBD80"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-meridiem",
+                "defaultValue": "false"
+            },
+            "minuteStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uBD84 \uC99D\uAC10 \uB2E8\uC704"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "minute-step",
+                "defaultValue": "1"
+            },
+            "rangeOrder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimeRangePickerRangeOrder",
+                    "resolved": "\"allow-cross-day\" | \"strict\"",
+                    "references": {
+                        "TimeRangePickerRangeOrder": {
+                            "location": "import",
+                            "path": "../sd-time-range-picker.config",
+                            "id": "src/components/sd-time-range-picker/sd-time-range-picker.config.ts::TimeRangePickerRangeOrder",
+                            "referenceLocation": "TimeRangePickerRangeOrder"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uBC94\uC704 \uC21C\uC11C \uC815\uCC45. strict\uB294 \uC2DC\uC791 \uC2DC\uAC04\uC774 \uC885\uB8CC \uC2DC\uAC04\uBCF4\uB2E4 \uB2A6\uC5B4\uC9C0\uC9C0 \uC54A\uB3C4\uB85D \uBCF4\uC815\uD569\uB2C8\uB2E4."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "range-order",
+                "defaultValue": "'strict'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "editingKey": {},
+            "inputDraft": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "update",
+                "name": "sdUpdate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC2DC\uAC04 \uBC94\uC704 \uBCC0\uACBD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
+                },
+                "complexType": {
+                    "original": "[string, string]",
+                    "resolved": "[string, string]",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/sd-time-range-picker/sd-time-range-picker.config.js

@@ -0,0 +1,23 @@
+import { TIMEPICKER_COLORS, TIMEPICKER_SELECTOR, TIMEPICKER_SIZE_MAP, formatTimeDisplay, formatTimeValue, parseTimeValue, } from "../sd-time-picker/sd-time-picker.config";
+export { TIMEPICKER_COLORS as TIME_RANGE_PICKER_COLORS, TIMEPICKER_SELECTOR as TIME_RANGE_PICKER_SELECTOR, TIMEPICKER_SIZE_MAP as TIME_RANGE_PICKER_SIZE_MAP, formatTimeDisplay, formatTimeValue, parseTimeValue, };
+function getTimeMinutes(value) {
+    const { hour, minute } = parseTimeValue(value);
+    return hour * 60 + minute;
+}
+export function normalizeTimeRangeValue(value, rangeOrder = 'strict') {
+    if (value == null)
+        return null;
+    const normalized = value.map(item => {
+        const parsed = parseTimeValue(item);
+        return formatTimeValue(parsed.hour, parsed.minute);
+    });
+    if (rangeOrder === 'strict' && getTimeMinutes(normalized[0]) > getTimeMinutes(normalized[1])) {
+        return [normalized[0], normalized[0]];
+    }
+    return normalized;
+}
+export function formatTimeRangeDisplay(value, type) {
+    if (value == null || value[0] === '' || value[1] === '')
+        return '';
+    return `${formatTimeDisplay(value[0], type)} ~ ${formatTimeDisplay(value[1], type)}`;
+}

package/dist/collection/components/sd-time-range-picker/sd-time-range-picker.css

@@ -0,0 +1,12 @@
+sd-time-range-picker {
+  display: inline-flex;
+}
+sd-time-range-picker sd-portal {
+  display: none;
+}
+sd-time-range-picker .sd-time-range-picker {
+  position: relative;
+  min-width: var(--sd-time-range-picker-min-width);
+  width: 100%;
+  height: 100%;
+}