@sellmate/design-system 1.29.0 → 1.31.0

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

@@ -0,0 +1,809 @@
+import { h, } from "@stencil/core";
+import { nanoid } from "nanoid/non-secure";
+import { TIME_RANGE_PICKER_COLORS, TIME_RANGE_PICKER_SIZE_MAP, formatTimeRangeDisplay, normalizeTimeRangeValue, } from "./sd-time-range-picker.config";
+export class SdTimeRangePicker {
+    static CLOSE_ANIMATION_DURATION = 150;
+    el;
+    /** 선택된 시간 범위 [시작, 종료] (HH:mm) */
+    value = null;
+    /** 입력 필드 크기 */
+    size = 'sm';
+    /** 표시 타입: default(24시간) / midday(오전·오후) */
+    type = 'default';
+    /** 시간 미선택 시 표시할 placeholder */
+    placeholder = '00:00 ~ 23:59';
+    /** 비활성 상태 여부 */
+    disabled = false;
+    /** 값이 있을 때 지우기 버튼 표시 여부 */
+    clearable = false;
+    /** 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. */
+    useMeridiem;
+    /** 분 증감 단위 */
+    minuteStep = 1;
+    /** 범위 순서 정책. strict는 시작 시간이 종료 시간보다 늦어지지 않도록 보정합니다. */
+    rangeOrder = 'strict';
+    /** 필드 너비 (숫자면 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;
+    /** 시간 범위 선택 시 선택된 범위([시작, 종료])를 전달합니다. */
+    update;
+    /** 선택기 열림/닫힘 상태가 바뀔 때 발생합니다. */
+    dropDownShow;
+    triggerRef;
+    formField;
+    closeAnimationTimer;
+    /** 폼 연동용 name 속성 */
+    name = nanoid();
+    watchIsOpen(newValue) {
+        this.focused = newValue;
+        this.dropDownShow.emit({ isOpen: newValue });
+    }
+    valueChanged(newValue) {
+        const normalized = normalizeTimeRangeValue(newValue, this.rangeOrder);
+        if (normalized != null && JSON.stringify(normalized) !== JSON.stringify(newValue)) {
+            this.value = normalized;
+        }
+    }
+    rangeOrderChanged() {
+        this.valueChanged(this.value);
+    }
+    /** 유효성 검사를 실행합니다. */
+    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;
+        }, SdTimeRangePicker.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';
+    }
+    get displayText() {
+        return formatTimeRangeDisplay(this.value, this.effectiveUseMeridiem ? 'midday' : 'default');
+    }
+    render() {
+        const sizeTokens = TIME_RANGE_PICKER_SIZE_MAP[this.size] ?? TIME_RANGE_PICKER_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-range-picker-min-width': `${sizeTokens.minWidth}px`,
+            '--sd-system-color-field-border-default': TIME_RANGE_PICKER_COLORS.border.default,
+            '--sd-system-color-field-border-focus': TIME_RANGE_PICKER_COLORS.border.focus,
+            '--sd-system-color-field-bg-default': TIME_RANGE_PICKER_COLORS.bg.default,
+        };
+        return (h("sd-field", { key: '41f3bdb3d08a72f590a25486975962d02cb7bbb8', 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: 'b3b8e08bd44e3f96a733c7341b8ca66c343aaa9d', class: "sd-time-range-picker", ref: el => {
+                this.triggerRef = el;
+            } }, h("sd-time-picker-trigger", { key: '39c927a8a3eee331bf253d2faabe9711c2516987', displayText: this.displayText, 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: '33fd2740d81d4dea5af75ed21888e4de213de1e3', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-time-range-picker-selector", { key: '554057e0b4a0fd27d570bf9ea955c947cfc5cc50', value: this.value, useMeridiem: this.effectiveUseMeridiem, minuteStep: this.minuteStep, "range-order": this.rangeOrder, onSdUpdate: this.handleSelect })))));
+    }
+    static get is() { return "sd-time-range-picker"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-time-range-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-time-range-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "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"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimeRangePickerSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "TimeRangePickerSize": {
+                            "location": "import",
+                            "path": "./sd-time-range-picker.config",
+                            "id": "src/components/sd-time-range-picker/sd-time-range-picker.config.ts::TimeRangePickerSize",
+                            "referenceLocation": "TimeRangePickerSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC785\uB825 \uD544\uB4DC \uD06C\uAE30"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'sm'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimeRangePickerType",
+                    "resolved": "\"default\" | \"midday\"",
+                    "references": {
+                        "TimeRangePickerType": {
+                            "location": "import",
+                            "path": "./sd-time-range-picker.config",
+                            "id": "src/components/sd-time-range-picker/sd-time-range-picker.config.ts::TimeRangePickerType",
+                            "referenceLocation": "TimeRangePickerType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD45C\uC2DC \uD0C0\uC785: default(24\uC2DC\uAC04) / midday(\uC624\uC804\u00B7\uC624\uD6C4)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'default'"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC2DC\uAC04 \uBBF8\uC120\uD0DD \uC2DC \uD45C\uC2DC\uD560 placeholder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placeholder",
+                "defaultValue": "'00:00 ~ 23:59'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uAC12\uC774 \uC788\uC744 \uB54C \uC9C0\uC6B0\uAE30 \uBC84\uD2BC \uD45C\uC2DC \uC5EC\uBD80"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clearable",
+                "defaultValue": "false"
+            },
+            "useMeridiem": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC624\uC804/\uC624\uD6C4 \uC120\uD0DD \uD45C\uC2DC \uC5EC\uBD80. \uC9C0\uC815\uD558\uC9C0 \uC54A\uC73C\uBA74 type=\"midday\"\uC77C \uB54C\uB9CC \uCF1C\uC9D1\uB2C8\uB2E4."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-meridiem"
+            },
+            "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'"
+            },
+            "width": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD544\uB4DC \uB108\uBE44 (\uC22B\uC790\uBA74 px, \uBB38\uC790\uC5F4\uC774\uBA74 \uADF8\uB300\uB85C \uC801\uC6A9)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "labelWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uB808\uC774\uBE14 \uB108\uBE44"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-width",
+                "defaultValue": "''"
+            },
+            "addonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD544\uB4DC \uC6B0\uCE21 \uC5B4\uB4DC\uC628 \uB808\uC774\uBE14"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "addon-label",
+                "defaultValue": "''"
+            },
+            "addonAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FieldAddonAlign",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "FieldAddonAlign": {
+                            "location": "import",
+                            "path": "../sd-field/sd-field.config",
+                            "id": "src/components/sd-field/sd-field.config.ts::FieldAddonAlign",
+                            "referenceLocation": "FieldAddonAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC5B4\uB4DC\uC628 \uC815\uB82C \uBC29\uD5A5"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "addon-align",
+                "defaultValue": "'start'"
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD544\uB4DC \uD558\uB2E8 \uD78C\uD2B8 \uD14D\uC2A4\uD2B8"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hint",
+                "defaultValue": "''"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC5D0\uB7EC \uBA54\uC2DC\uC9C0"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "''"
+            },
+            "rules": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Rule[]",
+                    "resolved": "Rule[] | undefined",
+                    "references": {
+                        "Rule": {
+                            "location": "import",
+                            "path": "../../types/form",
+                            "id": "src/types/form.d.ts::Rule",
+                            "referenceLocation": "Rule"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC \uADDC\uCE59 \uBAA9\uB85D"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC5D0\uB7EC \uC0C1\uD0DC \uC5EC\uBD80"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'pass' | 'error'",
+                    "resolved": "\"default\" | \"error\" | \"pass\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD544\uB4DC \uC0C1\uD0DC (\uC5C6\uC73C\uBA74 error/rules \uACB0\uACFC\uB85C \uC790\uB3D9 \uACB0\uC815)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
+            "icon": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconProps",
+                    "resolved": "IconProps | undefined",
+                    "references": {
+                        "IconProps": {
+                            "location": "global",
+                            "id": "global::IconProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uB808\uC774\uBE14 \uC601\uC5ED \uC544\uC774\uCF58"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "undefined"
+            },
+            "labelTooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uB808\uC774\uBE14 \uD234\uD301 \uD14D\uC2A4\uD2B8"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-tooltip",
+                "defaultValue": "''"
+            },
+            "labelTooltipProps": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SdTooltipProps | null",
+                    "resolved": "SdTooltip | null",
+                    "references": {
+                        "SdTooltipProps": {
+                            "location": "import",
+                            "path": "../sd-tooltip/sd-tooltip.config",
+                            "id": "src/components/sd-tooltip/sd-tooltip.config.ts::SdTooltipProps",
+                            "referenceLocation": "SdTooltipProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uB808\uC774\uBE14 \uD234\uD301 \uC0C1\uC138 \uC635\uC158"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD3FC \uC5F0\uB3D9\uC6A9 name \uC18D\uC131"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "nanoid()"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "isAnimatingOut": {},
+            "focused": {},
+            "hovered": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "update",
+                "name": "sdUpdate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC2DC\uAC04 \uBC94\uC704 \uC120\uD0DD \uC2DC \uC120\uD0DD\uB41C \uBC94\uC704([\uC2DC\uC791, \uC885\uB8CC])\uB97C \uC804\uB2EC\uD569\uB2C8\uB2E4."
+                },
+                "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"
+                        }
+                    }
+                }
+            }, {
+                "method": "dropDownShow",
+                "name": "sdDropDownShow",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC120\uD0DD\uAE30 \uC5F4\uB9BC/\uB2EB\uD798 \uC0C1\uD0DC\uAC00 \uBC14\uB014 \uB54C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
+                },
+                "complexType": {
+                    "original": "{ isOpen: boolean }",
+                    "resolved": "{ isOpen: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "sdValidate": {
+                "complexType": {
+                    "signature": "() => Promise<boolean | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean | undefined>"
+                },
+                "docs": {
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC\uB97C \uC2E4\uD589\uD569\uB2C8\uB2E4.",
+                    "tags": []
+                }
+            },
+            "sdReset": {
+                "complexType": {
+                    "signature": "() => Promise<void | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void | undefined>"
+                },
+                "docs": {
+                    "text": "\uAC12\uACFC \uC720\uD6A8\uC131 \uC0C1\uD0DC\uB97C \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
+                    "tags": []
+                }
+            },
+            "sdResetValidate": {
+                "complexType": {
+                    "signature": "() => Promise<void | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void | undefined>"
+                },
+                "docs": {
+                    "text": "\uC720\uD6A8\uC131 \uC0C1\uD0DC\uB9CC \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
+                    "tags": []
+                }
+            },
+            "sdFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void | undefined>"
+                },
+                "docs": {
+                    "text": "\uC785\uB825 \uD544\uB4DC\uC5D0 \uD3EC\uCEE4\uC2A4\uB97C \uC774\uB3D9\uD569\uB2C8\uB2E4.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isOpen",
+                "methodName": "watchIsOpen"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "rangeOrder",
+                "methodName": "rangeOrderChanged"
+            }];
+    }
+}