@sellmate/design-system 1.0.59 → 1.0.61

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

@@ -1,178 +1,107 @@
-import { h, Fragment, } from "@stencil/core";
-import { useDatePicker } from "../../modules/useDatePicker";
-import { addDays, today } from "../../utils/date";
+import { h, } from "@stencil/core";
+import { nanoid } from "nanoid/non-secure";
+import { DATEPICKER_SIZE_MAP, DATEPICKER_COLORS, } from "./sd-date-range-picker.config";
 export class SdDateRangePicker {
+    static CLOSE_ANIMATION_DURATION = 150;
     el;
-    value = ['', ''];
-    label;
+    value = null;
+    size = 'sm';
+    placeholder = 'YYYY-MM-DD ~ YYYY-MM-DD';
     selectable;
     maxRange;
     disabled = false;
-    placeholder = '';
+    width = '';
+    // sd-field 공통 props
+    label = '';
+    addonLabel = '';
+    hint = '';
+    errorMessage = '';
+    fieldName = '';
+    rules = [];
+    error = false;
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
     isOpen = false;
-    dateRange = this.value;
-    hoverDate = '';
-    prevYear = Number(this.dateRange[0].split('-')[0]);
-    prevMonth = Number(this.dateRange[0].split('-')[1]);
+    isAnimatingOut = false;
+    focused = false;
+    hovered = false;
     update;
     viewChange;
-    inputEl;
-    dateUtil = useDatePicker();
-    tempDateRange = ['', ''];
-    componentWillLoad() {
-        this.syncFromValue(this.value);
+    triggerRef;
+    formField;
+    closeAnimationTimer;
+    internalName = nanoid();
+    watchIsOpen(newValue) {
+        this.focused = newValue;
     }
-    onValueChange(newValue) {
-        this.dateRange = [...newValue];
+    async sdValidate() {
+        return this.formField?.sdValidate();
     }
-    syncFromValue(value) {
-        this.dateRange = [...value];
-        this.resetCalendarByDateRange(value);
+    async sdReset() {
+        return this.formField?.sdReset();
     }
-    /* ----------------------------------
-     * Calendar View Logic
-     * ---------------------------------- */
-    resetCalendarByDateRange(range) {
-        // this.dateRange = this.value;
-        const start = range[0] || today;
-        const end = range[1] || start;
-        const [startYear, startMonth] = start.split('-').map(Number);
-        const [todayYear, todayMonth] = today.split('-').map(Number);
-        if (end <= today) {
-            // A. 완전 과거 검색(당월 포함X): 좌측 = 시작월 / 우측 = 종료월
-            this.prevYear = startYear;
-            this.prevMonth = startMonth;
-        }
-        else if (start < today && end > today) {
-            // B. 과거~미래 걸침(당월 포함O): 좌측 = 오늘의 달
-            this.prevYear = todayYear;
-            this.prevMonth = todayMonth;
-        }
-        else {
-            // C. 완전 미래 검색(당월 포함X): 좌측 = 시작월
-            this.prevYear = startYear;
-            this.prevMonth = startMonth;
-        }
-    }
-    get nextYear() {
-        return this.prevMonth === 12 ? this.prevYear + 1 : this.prevYear;
-    }
-    get nextMonth() {
-        return this.prevMonth === 12 ? 1 : this.prevMonth + 1;
-    }
-    get prevCalendar() {
-        return this.dateUtil.createCalendar(this.prevYear, this.prevMonth);
-    }
-    get nextCalendar() {
-        return this.dateUtil.createCalendar(this.nextYear, this.nextMonth);
-    }
-    setPrevYear(year) {
-        this.prevYear = year;
-    }
-    setPrevMonth(month) {
-        this.prevMonth = month;
-    }
-    updateYearMonth(type) {
-        const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.prevYear, this.prevMonth, type);
-        this.setPrevYear(newYear);
-        this.setPrevMonth(newMonth);
-        this.viewChange.emit({ year: newYear, month: newMonth });
-    }
-    setHoverDate(date) {
-        this.hoverDate = date;
-    }
-    setDateRange(dateRange) {
-        this.dateRange = dateRange;
-    }
-    /* ----------------------------------
-     * UI Helpers
-     * ---------------------------------- */
-    formatDate(index, day) {
-        return this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, day);
-    }
-    getDateBoxType(date) {
-        const [start, end] = this.dateRange;
-        if (date === start)
-            return end ? 'start' : this.hoverDate < this.dateRange[0] ? 'end' : 'start';
-        if (date === end)
-            return 'end';
-        return '';
+    async sdResetValidate() {
+        return this.formField?.sdResetValidation();
     }
-    isDateInRange(date) {
-        const [start, end] = this.dateRange;
-        // 1. 날짜 범위가 완전히 선택된 경우
-        if (start && end) {
-            return date >= start && date <= end;
-        }
-        // 2. hover 상태의 날짜 범위를 확인
-        if (!this.hoverDate || !start || end) {
-            return false;
-        }
-        // 3. dateRange[0]과 hoverDate를 기준으로 범위 계산
-        const [from, to] = start <= this.hoverDate ? [start, this.hoverDate] : [this.hoverDate, start];
-        return date >= from && date <= to;
-    }
-    isDisabledDate(date) {
-        const [start, end] = this.dateRange;
-        if (this.maxRange && start && !end) {
-            const minDate = addDays(start, -this.maxRange);
-            const maxDate = addDays(start, this.maxRange);
-            return !(minDate <= date && date <= maxDate);
-        }
-        if (!this.selectable || !this.selectable[0] || !this.selectable[1]) {
-            return false;
-        }
-        return !(date >= this.selectable[0] && date <= this.selectable[1]);
+    closeDropdown() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.isAnimatingOut = true;
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.closeAnimationTimer = setTimeout(() => {
+            this.isAnimatingOut = false;
+        }, SdDateRangePicker.CLOSE_ANIMATION_DURATION);
     }
-    /* ----------------------------------
-     * Interaction
-     * ---------------------------------- */
-    openMenu() {
+    handleTriggerClick = () => {
         if (this.disabled)
             return;
-        this.tempDateRange = [...this.dateRange];
-        this.resetCalendarByDateRange(this.dateRange);
-        this.isOpen = true;
-    }
-    closeMenu = () => {
-        if (!this.dateRange[0] || !this.dateRange[1]) {
-            this.dateRange = [...this.tempDateRange];
+        if (this.isOpen) {
+            this.closeDropdown();
         }
-        this.isOpen = false;
-    };
-    handleDateClick(index, day) {
-        this.setHoverDate('');
-        const selectedDate = this.formatDate(index, day);
-        if (!this.dateRange[0] || !!this.dateRange[1] || selectedDate < this.dateRange[0]) {
-            this.setDateRange([selectedDate, '']);
-            return; // 아직 완료 아님
+        else {
+            if (this.closeAnimationTimer)
+                clearTimeout(this.closeAnimationTimer);
+            this.isAnimatingOut = false;
+            this.isOpen = true;
         }
-        const newRange = [this.dateRange[0], selectedDate];
-        this.setDateRange(newRange);
-        this.value = newRange;
-        this.update.emit?.(newRange);
-        this.isOpen = false;
+    };
+    handleSelect = (e) => {
+        this.closeDropdown();
+        this.value = e.detail;
+        const nextValue = this.value;
+        requestAnimationFrame(() => {
+            this.update.emit(nextValue);
+        });
+    };
+    handleViewChange = (e) => {
+        this.viewChange.emit(e.detail);
+    };
+    get displayText() {
+        if (!this.value || !this.value[0] || !this.value[1])
+            return '';
+        return `${this.value[0]} ~ ${this.value[1]}`;
     }
-    handleDateHover(index, day) {
-        const hoverDate = this.formatDate(index, day);
-        this.setHoverDate(hoverDate);
+    disconnectedCallback() {
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
     }
     render() {
-        return (h("div", { key: 'ed71379abf9d60bfa21c9888ba0f84f543bc0fe2', class: {
-                'sd-date-range-picker': true,
-                'sd-date-range-picker--disabled': this.disabled,
-            } }, h("sd-input", { key: 'd9b4269ee29ddf23dd80b5bcad2ded0d5edae8a6', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: 'a30448daa738ee75925974735f7a9948a47761e1', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '553abd0af76848be54788518507fbf0cc20db111', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: '152fb19e5c8dbd5e5f978b11868cc71b382255d8', class: "sd-date-range-picker__menu" }, h("div", { key: '5d290d39d6aa8cc0d3a4394ac2f1d4bc93428bb3', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'b20caad91457bda87690629aa3fc34d4d2c5a673', type: "button", name: "prev", title: "Previous", onClick: () => {
-                this.setPrevYear(this.prevYear - 1);
-                this.viewChange.emit({ year: this.prevYear, month: this.prevMonth });
-            } }, h("sd-icon", { key: '5f0e8014992b7269aed7d97a4a56263349c90afa', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'f324d84e338aa2779e471a123fc7b5220900389d', class: "header-label" }, this.prevYear), h("button", { key: '18e331eb0c8fe3cc1eba2b718433ca7f7ec17b3e', type: "button", name: "next", title: "Next", onClick: () => {
-                this.setPrevYear(this.prevYear + 1);
-                this.viewChange.emit({ year: this.prevYear, month: this.prevMonth });
-            } }, h("sd-icon", { key: '1ec935fbbb3ecbafb42df34905f62753dfd49da2', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '47af9712b96158741a3fed052f4b1eb7bca08eef', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
-            ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
-            : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index, Number(day))), type: this.getDateBoxType(this.formatDate(index, Number(day))), isToday: today === this.formatDate(index, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index, Number(day))), inRange: this.isDateInRange(this.formatDate(index, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index, Number(day)), onSdClick: () => this.handleDateClick(index, Number(day)), onSdMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
+        const sizeTokens = DATEPICKER_SIZE_MAP[this.size] ?? DATEPICKER_SIZE_MAP.md;
+        const cssVars = {
+            '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
+            '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
+            '--sd-system-color-field-border-default': DATEPICKER_COLORS.border.default,
+            '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
+            '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
+        };
+        return (h("sd-field", { key: '5c381ba40914b02d248b77852e8297ba367faed7', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, 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: 'dee79baa195056a45b0af1c106b4f8890fc370a7', class: "sd-date-range-picker", ref: el => {
+                this.triggerRef = el;
+            } }, h("sd-date-picker-trigger", { key: 'e5b46762012b35c8be2c56cbfbec22682ba7a3ed', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '47d0315e5a7baf3583286a730126ba0c4fdc1945', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-range-picker-calendar", { key: '58b8765eacd17d7f7362ed67b8919eee8e89c68f', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-range-picker"; }
-    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["sd-date-range-picker.scss"]
@@ -189,9 +118,15 @@ export class SdDateRangePicker {
                 "type": "unknown",
                 "mutable": true,
                 "complexType": {
-                    "original": "[string, string]",
-                    "resolved": "[string, string]",
-                    "references": {}
+                    "original": "DateRangeValue",
+                    "resolved": "[string, string] | null",
+                    "references": {
+                        "DateRangeValue": {
+                            "location": "local",
+                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-date-range-picker/sd-date-range-picker.tsx",
+                            "id": "src/components/sd-date-range-picker/sd-date-range-picker.tsx::DateRangeValue"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -201,18 +136,45 @@ export class SdDateRangePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "['', '']"
+                "defaultValue": "null"
             },
-            "label": {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DatePickerSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "DatePickerSize": {
+                            "location": "import",
+                            "path": "./sd-date-range-picker.config",
+                            "id": "src/components/sd-date-range-picker/sd-date-range-picker.config.ts::DatePickerSize",
+                            "referenceLocation": "DatePickerSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'sm'"
+            },
+            "placeholder": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -220,7 +182,8 @@ export class SdDateRangePicker {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "label"
+                "attribute": "placeholder",
+                "defaultValue": "'YYYY-MM-DD ~ YYYY-MM-DD'"
             },
             "selectable": {
                 "type": "unknown",
@@ -278,7 +241,27 @@ export class SdDateRangePicker {
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
-            "placeholder": {
+            "width": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "''"
+            },
+            "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -295,18 +278,210 @@ export class SdDateRangePicker {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "placeholder",
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "addonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "addon-label",
+                "defaultValue": "''"
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "''"
+            },
+            "fieldName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "field-name",
                 "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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "undefined"
+            },
+            "labelTooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-tooltip",
+                "defaultValue": "''"
+            },
+            "labelTooltipProps": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SdTooltipProps | null",
+                    "resolved": "SdTooltipProps | 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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
             }
         };
     }
     static get states() {
         return {
             "isOpen": {},
-            "dateRange": {},
-            "hoverDate": {},
-            "prevYear": {},
-            "prevMonth": {}
+            "isAnimatingOut": {},
+            "focused": {},
+            "hovered": {}
         };
     }
     static get events() {
@@ -321,9 +496,15 @@ export class SdDateRangePicker {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "[string, string]",
-                    "resolved": "[string, string]",
-                    "references": {}
+                    "original": "DateRangeValue",
+                    "resolved": "[string, string] | null",
+                    "references": {
+                        "DateRangeValue": {
+                            "location": "local",
+                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-date-range-picker/sd-date-range-picker.tsx",
+                            "id": "src/components/sd-date-range-picker/sd-date-range-picker.tsx::DateRangeValue"
+                        }
+                    }
                 }
             }, {
                 "method": "viewChange",
@@ -342,11 +523,66 @@ export class SdDateRangePicker {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "sdValidate": {
+                "complexType": {
+                    "signature": "() => Promise<boolean | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean | undefined>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdReset": {
+                "complexType": {
+                    "signature": "() => Promise<void | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void | undefined>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdResetValidate": {
+                "complexType": {
+                    "signature": "() => Promise<void | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void | undefined>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "value",
-                "methodName": "onValueChange"
+                "propName": "isOpen",
+                "methodName": "watchIsOpen"
             }];
     }
 }