@sellmate/design-system 0.0.41 → 0.0.43

package/dist/cjs/sd-button_15.cjs.entry.js

@@ -3334,7 +3334,8 @@ const SdTooltipPortal = class {
     }
     // 외부 클릭 감지
     handleMouseDown(e) {
-        this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target));
+        this.isInsideClick = !!((this.wrapper && this.wrapper.contains(e.target)) ||
+            (this.parentRef && this.parentRef.contains(e.target)));
     }
     handleWindowClick(e) {
         if (this.isInsideClick) {
@@ -3346,7 +3347,7 @@ const SdTooltipPortal = class {
         this.sdClose.emit();
     }
     render() {
-        return index.h("slot", { key: '1b2a35d58c663c18354bdf4fae5e8a1d18433273' });
+        return index.h("slot", { key: '918c09f6f9b248a6ba08e622c375b63adb36d0c3' });
     }
 };
 

package/dist/cjs/sd-date-picker.cjs.entry.js

@@ -82,9 +82,7 @@ const SdDatePicker = class {
         this.isOpen = false;
     };
     render() {
-        return (index.h(index.Host, { key: 'ceaa6b5321f565e0560feb4218205925210d0967', class: "sd-date-picker" }, index.h("sd-input", { key: '199da34a78585e13d7ffc0bbf1513c93651acf74', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
-                margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, index.h("sd-icon", { key: '739e14ea2d9b2ef07d6bee9dabc5418c62cbcac9', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: 'e9c650f8587e3b8e3b45a37beaf798175cf083c9', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: 'c92dc3a6577ef1f1104fba608da9b24c27334589', class: "sd-date-picker__menu" }, index.h("div", { key: 'f18df2f6ae3321dc01f357de000f85bc56a10df5', class: "sd-date-picker__header" }, index.h("div", { key: 'df670b08cbd4906f8c27d0d56670a0b3244bab3c', class: "year-nav" }, index.h("button", { key: '3afa36ad5454a9a6eda9cba37046c3cc9bdff03b', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, index.h("sd-icon", { key: '6ed5623aa69d2e1b7e3718315b1f225d6a22937e', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '366930f143f1f4e3fa76f7af9d1d97f7630cee49', class: "year-nav__current" }, this.currentYear), index.h("button", { key: '926fe9e7ae702c5f05818cf38d8ed40a05408fb4', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, index.h("sd-icon", { key: 'ef62197919a3e54a8e225724f5f7a96544185298', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: 'bb0919c817685da0e2351474455dbce7f3d5d7f9', class: "month-nav" }, index.h("button", { key: '44c0fa106782d0cb108fb3baaaa80b1fb420107e', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, index.h("sd-icon", { key: '09d58c3bbfdf8e81612b1ff0e6c51cbae5c126a6', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '584aa3b2c28d1fc86b72dc8ebe1d078daee097dd', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), index.h("button", { key: '70985e1842a4a28f47a9cc9b02cace868997ec3d', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, index.h("sd-icon", { key: 'ab80855e8828808d81a299ace7003b876454bd97', name: "arrowRight", size: "12", color: "#CCCCCC" })))), index.h("div", { key: '23f41a8b2a86e6564e301e835d16f07807c3bb70', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("div", { key: day, class: "day" }, day)))), index.h("div", { key: 'b85483286fba4b1ebb3b7333162f6729fb8e058d', class: "sd-date-picker__body" }, [
+        return (index.h(index.Host, { key: 'ceaa6b5321f565e0560feb4218205925210d0967', class: "sd-date-picker" }, index.h("sd-input", { key: '1b5e1afcbad3daf40766977edd17077d9bc18200', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", onClick: () => this.openMenu() }, index.h("sd-icon", { key: 'd61cc0a28f65c77a80ebf216a259b66b17615054', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '2e41787708d795d727edf1d21398bc70e31f41e0', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: '579adc1459a9fd6ee9313eec5a4d03b2a2e61222', class: "sd-date-picker__menu" }, index.h("div", { key: '5bae8978c6a4bb25f430f94d2c66927031a8e646', class: "sd-date-picker__header" }, index.h("div", { key: 'e4482baaa76c96740c2ff9eea4182b7bda59b974', class: "year-nav" }, index.h("button", { key: 'eb439c8147be7fe8d351c30e6b516db19ccbbc0d', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, index.h("sd-icon", { key: '7a685bd6c07cdd8eff0ac0c8e19c07f6c2d826dc', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: 'e19520fa7dd4a6f19ff30482a9291caa83471b41', class: "year-nav__current" }, this.currentYear), index.h("button", { key: '5ff3333f877ca6b7faddc4494d0c88747c29c714', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, index.h("sd-icon", { key: '2d02cf464f98aafc9a929414b88e77d0167983a5', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '6195fc68cb522b0368344057da580ff73dfe6efd', class: "month-nav" }, index.h("button", { key: 'c68a01bb06f8ac2276f678c916f41d52cc17fb69', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, index.h("sd-icon", { key: '12873470bf8ca8c1e834f7953429a3e77ca24c6d', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: 'fb0db178bc0dc078f532ca955d6007fbccabb97d', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), index.h("button", { key: 'd4871fe7e7328b060bdf9f2b56153e81d9c6a5b5', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, index.h("sd-icon", { key: 'cf8467b63261012751ca0abafde6846eb397f13f', name: "arrowRight", size: "12", color: "#CCCCCC" })))), index.h("div", { key: 'a5d9cacac573f545b1fe1c321d5971d50db6e957', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("div", { key: day, class: "day" }, day)))), index.h("div", { key: 'dc2769b821cda06b29c6f45ac2363a2df7a32d04', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

package/dist/cjs/sd-date-picker.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-date-picker.entry.cjs.js","sources":["src/components/sd-date-picker/sd-date-picker.scss?tag=sd-date-picker&encapsulation=scoped","src/components/sd-date-picker/sd-date-picker.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n:host {\r\n &.sd-date-picker {\r\n  width: 160px;\r\n  display: inline-block;\r\n }\r\n}\r\n\r\n.sd-date-picker__menu {\r\n width: 304px;\r\n box-sizing: border-box;\r\n border-radius: 8px;\r\n padding: 24px 19px;\r\n box-shadow: 2px 2px 12px 2px #00000033;\r\n background: white;\r\n\r\n .sd-date-picker__header {\r\n  display: flex;\r\n  flex-flow: row nowrap;\r\n  align-items: center;\r\n  gap: 20px;\r\n  font-size: 14px;\r\n  padding: 0 5px;\r\n  height: 24px;\r\n  line-height: 24px;\r\n\r\n  .year-nav,\r\n  .month-nav {\r\n   display: flex;\r\n   flex-flow: row nowrap;\r\n   align-items: center;\r\n   gap: 12px;\r\n\r\n   button {\r\n    background: none;\r\n    border: none;\r\n    cursor: pointer;\r\n    margin: 0;\r\n    padding: 0;\r\n   }\r\n  }\r\n\r\n  .year-nav {\r\n   &__current {\r\n    width: 40px;\r\n    text-align: center;\r\n   }\r\n  }\r\n\r\n  .month-nav {\r\n   &__current {\r\n    width: 100px;\r\n    text-align: center;\r\n   }\r\n  }\r\n }\r\n .sd-date-picker__days {\r\n  margin-top: 8px;\r\n  display: grid;\r\n  grid-template-columns: repeat(7, minmax(0, 1fr));\r\n  column-gap: 10px;\r\n  padding: 0 5px;\r\n\r\n  .day {\r\n   width: 28px;\r\n   height: 20px;\r\n   font-size: 12px;\r\n   line-height: 20px;\r\n   text-align: center;\r\n   color: $grey_65;\r\n  }\r\n }\r\n .sd-date-picker__body {\r\n  margin-top: 12px;\r\n  display: grid;\r\n  grid-template-columns: repeat(7, minmax(0, 1fr));\r\n }\r\n}\r\n","import { Component, Element, Prop, State, Event, h, EventEmitter, Host } from '@stencil/core';\r\nimport { useDatePicker } from '../../modules/useDatePicker';\r\nimport { today } from '../../utils/date';\r\n\r\n@Component({\r\n tag: 'sd-date-picker',\r\n styleUrl: 'sd-date-picker.scss',\r\n scoped: true,\r\n})\r\nexport class SdDatePicker {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() date: string | null = null;\r\n @Prop() label?: string;\r\n @Prop() selectable?: [string, string];\r\n @Prop() disabled: boolean = false;\r\n\r\n @State() isOpen: boolean = false;\r\n @State() currentDate: string | null = null;\r\n @State() currentYear!: number;\r\n @State() currentMonth!: number;\r\n\r\n @Event() sdChange!: EventEmitter<string | null>;\r\n\r\n componentWillLoad() {\r\n  this.setCalendar();\r\n }\r\n\r\n private dateUtil = useDatePicker();\r\n private inputEl?: HTMLElement;\r\n\r\n private setCalendar() {\r\n  const base = this.date || today;\r\n  const [year, month] = base.split('-').map(Number);\r\n  this.currentYear = year;\r\n  this.currentMonth = month;\r\n  this.currentDate = this.date;\r\n }\r\n\r\n private openMenu() {\r\n  if (this.disabled) return;\r\n\r\n  this.setCalendar();\r\n  this.isOpen = true;\r\n }\r\n\r\n private get calendar() {\r\n  return this.dateUtil.createCalendar(this.currentYear, this.currentMonth);\r\n }\r\n\r\n private setCurrentYear(year: number) {\r\n  this.currentYear = year;\r\n }\r\n\r\n private setCurrentMonth(month: number) {\r\n  this.currentMonth = month;\r\n }\r\n\r\n private setCurrentDate(date: string | null) {\r\n  this.currentDate = date;\r\n }\r\n\r\n private handleUpdateMonth(type: 'prev' | 'next') {\r\n  const { newYear, newMonth } = this.dateUtil.calculateYearMonth(\r\n   this.currentYear,\r\n   this.currentMonth,\r\n   type,\r\n  );\r\n  this.setCurrentYear(newYear);\r\n  this.setCurrentMonth(newMonth);\r\n }\r\n\r\n private handleDateClick(day: number) {\r\n  if (!day) return;\r\n\r\n  const date = this.dateUtil.formatDate(this.currentYear, this.currentMonth, day);\r\n  this.setCurrentDate(date);\r\n  this.isOpen = false;\r\n  this.sdChange.emit?.(date);\r\n }\r\n\r\n private isDisabledDate(date: string): boolean {\r\n  if (!this.selectable) return false;\r\n\r\n  const [startSelectable, endSelectable] = this.selectable;\r\n\r\n  if (startSelectable && endSelectable) {\r\n   return date < startSelectable || date > endSelectable;\r\n  }\r\n\r\n  if (startSelectable) {\r\n   return date < startSelectable;\r\n  }\r\n\r\n  if (endSelectable) {\r\n   return date > endSelectable;\r\n  }\r\n\r\n  return false;\r\n }\r\n\r\n private handleClose = () => {\r\n  this.isOpen = false;\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Host class=\"sd-date-picker\">\r\n    <sd-input\r\n     ref={el => (this.inputEl = el as unknown as HTMLElement)}\r\n     value={this.date}\r\n     label={this.label}\r\n     inside-label\r\n     readonly\r\n     disabled={this.disabled}\r\n     inputClass=\"text-center\"\r\n     inputStyle={{\r\n      margin: '0 0 0 8px',\r\n     }}\r\n     onClick={() => this.openMenu()}\r\n    >\r\n     <sd-icon\r\n      slot=\"prefix\"\r\n      name=\"date\"\r\n      size=\"16\"\r\n      color=\"#737373\"\r\n      class=\"date-icon\"\r\n      onClick={() => this.openMenu()}\r\n     ></sd-icon>\r\n    </sd-input>\r\n\r\n    {this.isOpen && (\r\n     <sd-portal open={this.isOpen} parentRef={this.inputEl} onSdClose={this.handleClose}>\r\n      <div class=\"sd-date-picker__menu\">\r\n       <div class=\"sd-date-picker__header\">\r\n        {/* Year Navigation */}\r\n        <div class=\"year-nav\">\r\n         <button\r\n          type=\"button\"\r\n          name=\"prev-year\"\r\n          title=\"Previous Year\"\r\n          onClick={() => this.setCurrentYear(this.currentYear - 1)}\r\n         >\r\n          <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n         <span class=\"year-nav__current\">{this.currentYear}</span>\r\n         <button\r\n          type=\"button\"\r\n          name=\"next-year\"\r\n          title=\"Next Year\"\r\n          onClick={() => this.setCurrentYear(this.currentYear + 1)}\r\n         >\r\n          <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n        </div>\r\n\r\n        {/* Month Navigation */}\r\n        <div class=\"month-nav\">\r\n         <button\r\n          type=\"button\"\r\n          name=\"prev-month\"\r\n          title=\"Previous       \"\r\n          onClick={() => this.handleUpdateMonth('prev')}\r\n         >\r\n          <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n         <span class=\"month-nav__current\">{this.currentMonth}월</span>\r\n         <button\r\n          type=\"button\"\r\n          name=\"next-month\"\r\n          title=\"Next Month\"\r\n          onClick={() => this.handleUpdateMonth('next')}\r\n         >\r\n          <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n        </div>\r\n       </div>\r\n\r\n       <div class=\"sd-date-picker__days\">\r\n        {['일', '월', '화', '수', '목', '금', '토'].map(day => (\r\n         <div key={day} class=\"day\">\r\n          {day}\r\n         </div>\r\n        ))}\r\n       </div>\r\n\r\n       <div class=\"sd-date-picker__body\">\r\n        {[\r\n         ...this.calendar.prevMonthDays,\r\n         ...this.calendar.days,\r\n         ...this.calendar.afterMonthDays,\r\n        ].map((day, idx) => {\r\n         const formattedDate = this.dateUtil.formatDate(\r\n          this.currentYear,\r\n          this.currentMonth,\r\n          Number(day),\r\n         );\r\n\r\n         return (\r\n          <sd-date-box\r\n           key={`${day}_${idx}`}\r\n           date={!day ? '' : Number(day)}\r\n           selected={this.currentDate === formattedDate}\r\n           isToday={today === formattedDate}\r\n           disabled={!day ? true : this.isDisabledDate(formattedDate)}\r\n           onClick={\r\n            !this.isDisabledDate(formattedDate) && day\r\n             ? () => this.handleDateClick(Number(day))\r\n             : undefined\r\n           }\r\n          />\r\n         );\r\n        })}\r\n       </div>\r\n      </div>\r\n     </sd-portal>\r\n    )}\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"names":["useDatePicker","today","h","Host"],"mappings":"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"}
+{"version":3,"file":"sd-date-picker.entry.cjs.js","sources":["src/components/sd-date-picker/sd-date-picker.scss?tag=sd-date-picker&encapsulation=scoped","src/components/sd-date-picker/sd-date-picker.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n:host {\r\n &.sd-date-picker {\r\n  width: 160px;\r\n  display: inline-block;\r\n }\r\n}\r\n\r\n.sd-date-picker__menu {\r\n width: 304px;\r\n box-sizing: border-box;\r\n border-radius: 8px;\r\n padding: 24px 19px;\r\n box-shadow: 2px 2px 12px 2px #00000033;\r\n background: white;\r\n\r\n .sd-date-picker__header {\r\n  display: flex;\r\n  flex-flow: row nowrap;\r\n  align-items: center;\r\n  gap: 20px;\r\n  font-size: 14px;\r\n  padding: 0 5px;\r\n  height: 24px;\r\n  line-height: 24px;\r\n\r\n  .year-nav,\r\n  .month-nav {\r\n   display: flex;\r\n   flex-flow: row nowrap;\r\n   align-items: center;\r\n   gap: 12px;\r\n\r\n   button {\r\n    background: none;\r\n    border: none;\r\n    cursor: pointer;\r\n    margin: 0;\r\n    padding: 0;\r\n   }\r\n  }\r\n\r\n  .year-nav {\r\n   &__current {\r\n    width: 40px;\r\n    text-align: center;\r\n   }\r\n  }\r\n\r\n  .month-nav {\r\n   &__current {\r\n    width: 100px;\r\n    text-align: center;\r\n   }\r\n  }\r\n }\r\n .sd-date-picker__days {\r\n  margin-top: 8px;\r\n  display: grid;\r\n  grid-template-columns: repeat(7, minmax(0, 1fr));\r\n  column-gap: 10px;\r\n  padding: 0 5px;\r\n\r\n  .day {\r\n   width: 28px;\r\n   height: 20px;\r\n   font-size: 12px;\r\n   line-height: 20px;\r\n   text-align: center;\r\n   color: $grey_65;\r\n  }\r\n }\r\n .sd-date-picker__body {\r\n  margin-top: 12px;\r\n  display: grid;\r\n  grid-template-columns: repeat(7, minmax(0, 1fr));\r\n }\r\n}\r\n","import { Component, Element, Prop, State, Event, h, EventEmitter, Host } from '@stencil/core';\r\nimport { useDatePicker } from '../../modules/useDatePicker';\r\nimport { today } from '../../utils/date';\r\n\r\n@Component({\r\n tag: 'sd-date-picker',\r\n styleUrl: 'sd-date-picker.scss',\r\n scoped: true,\r\n})\r\nexport class SdDatePicker {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() date: string | null = null;\r\n @Prop() label?: string;\r\n @Prop() selectable?: [string, string];\r\n @Prop() disabled: boolean = false;\r\n\r\n @State() isOpen: boolean = false;\r\n @State() currentDate: string | null = null;\r\n @State() currentYear!: number;\r\n @State() currentMonth!: number;\r\n\r\n @Event() sdChange!: EventEmitter<string | null>;\r\n\r\n componentWillLoad() {\r\n  this.setCalendar();\r\n }\r\n\r\n private dateUtil = useDatePicker();\r\n private inputEl?: HTMLElement;\r\n\r\n private setCalendar() {\r\n  const base = this.date || today;\r\n  const [year, month] = base.split('-').map(Number);\r\n  this.currentYear = year;\r\n  this.currentMonth = month;\r\n  this.currentDate = this.date;\r\n }\r\n\r\n private openMenu() {\r\n  if (this.disabled) return;\r\n\r\n  this.setCalendar();\r\n  this.isOpen = true;\r\n }\r\n\r\n private get calendar() {\r\n  return this.dateUtil.createCalendar(this.currentYear, this.currentMonth);\r\n }\r\n\r\n private setCurrentYear(year: number) {\r\n  this.currentYear = year;\r\n }\r\n\r\n private setCurrentMonth(month: number) {\r\n  this.currentMonth = month;\r\n }\r\n\r\n private setCurrentDate(date: string | null) {\r\n  this.currentDate = date;\r\n }\r\n\r\n private handleUpdateMonth(type: 'prev' | 'next') {\r\n  const { newYear, newMonth } = this.dateUtil.calculateYearMonth(\r\n   this.currentYear,\r\n   this.currentMonth,\r\n   type,\r\n  );\r\n  this.setCurrentYear(newYear);\r\n  this.setCurrentMonth(newMonth);\r\n }\r\n\r\n private handleDateClick(day: number) {\r\n  if (!day) return;\r\n\r\n  const date = this.dateUtil.formatDate(this.currentYear, this.currentMonth, day);\r\n  this.setCurrentDate(date);\r\n  this.isOpen = false;\r\n  this.sdChange.emit?.(date);\r\n }\r\n\r\n private isDisabledDate(date: string): boolean {\r\n  if (!this.selectable) return false;\r\n\r\n  const [startSelectable, endSelectable] = this.selectable;\r\n\r\n  if (startSelectable && endSelectable) {\r\n   return date < startSelectable || date > endSelectable;\r\n  }\r\n\r\n  if (startSelectable) {\r\n   return date < startSelectable;\r\n  }\r\n\r\n  if (endSelectable) {\r\n   return date > endSelectable;\r\n  }\r\n\r\n  return false;\r\n }\r\n\r\n private handleClose = () => {\r\n  this.isOpen = false;\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Host class=\"sd-date-picker\">\r\n    <sd-input\r\n     ref={el => (this.inputEl = el as unknown as HTMLElement)}\r\n     value={this.date}\r\n     label={this.label}\r\n     inside-label\r\n     readonly\r\n     disabled={this.disabled}\r\n     inputClass=\"text-center\"\r\n     onClick={() => this.openMenu()}\r\n    >\r\n     <sd-icon\r\n      slot=\"prefix\"\r\n      name=\"date\"\r\n      size=\"16\"\r\n      color=\"#737373\"\r\n      class=\"date-icon\"\r\n      onClick={() => this.openMenu()}\r\n     ></sd-icon>\r\n    </sd-input>\r\n\r\n    {this.isOpen && (\r\n     <sd-portal open={this.isOpen} parentRef={this.inputEl} onSdClose={this.handleClose}>\r\n      <div class=\"sd-date-picker__menu\">\r\n       <div class=\"sd-date-picker__header\">\r\n        {/* Year Navigation */}\r\n        <div class=\"year-nav\">\r\n         <button\r\n          type=\"button\"\r\n          name=\"prev-year\"\r\n          title=\"Previous Year\"\r\n          onClick={() => this.setCurrentYear(this.currentYear - 1)}\r\n         >\r\n          <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n         <span class=\"year-nav__current\">{this.currentYear}</span>\r\n         <button\r\n          type=\"button\"\r\n          name=\"next-year\"\r\n          title=\"Next Year\"\r\n          onClick={() => this.setCurrentYear(this.currentYear + 1)}\r\n         >\r\n          <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n        </div>\r\n\r\n        {/* Month Navigation */}\r\n        <div class=\"month-nav\">\r\n         <button\r\n          type=\"button\"\r\n          name=\"prev-month\"\r\n          title=\"Previous       \"\r\n          onClick={() => this.handleUpdateMonth('prev')}\r\n         >\r\n          <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n         <span class=\"month-nav__current\">{this.currentMonth}월</span>\r\n         <button\r\n          type=\"button\"\r\n          name=\"next-month\"\r\n          title=\"Next Month\"\r\n          onClick={() => this.handleUpdateMonth('next')}\r\n         >\r\n          <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n        </div>\r\n       </div>\r\n\r\n       <div class=\"sd-date-picker__days\">\r\n        {['일', '월', '화', '수', '목', '금', '토'].map(day => (\r\n         <div key={day} class=\"day\">\r\n          {day}\r\n         </div>\r\n        ))}\r\n       </div>\r\n\r\n       <div class=\"sd-date-picker__body\">\r\n        {[\r\n         ...this.calendar.prevMonthDays,\r\n         ...this.calendar.days,\r\n         ...this.calendar.afterMonthDays,\r\n        ].map((day, idx) => {\r\n         const formattedDate = this.dateUtil.formatDate(\r\n          this.currentYear,\r\n          this.currentMonth,\r\n          Number(day),\r\n         );\r\n\r\n         return (\r\n          <sd-date-box\r\n           key={`${day}_${idx}`}\r\n           date={!day ? '' : Number(day)}\r\n           selected={this.currentDate === formattedDate}\r\n           isToday={today === formattedDate}\r\n           disabled={!day ? true : this.isDisabledDate(formattedDate)}\r\n           onClick={\r\n            !this.isDisabledDate(formattedDate) && day\r\n             ? () => this.handleDateClick(Number(day))\r\n             : undefined\r\n           }\r\n          />\r\n         );\r\n        })}\r\n       </div>\r\n      </div>\r\n     </sd-portal>\r\n    )}\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"names":["useDatePicker","today","h","Host"],"mappings":"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"}

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

@@ -74,9 +74,7 @@ export class SdDatePicker {
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: 'ceaa6b5321f565e0560feb4218205925210d0967', class: "sd-date-picker" }, h("sd-input", { key: '199da34a78585e13d7ffc0bbf1513c93651acf74', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
-                margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '739e14ea2d9b2ef07d6bee9dabc5418c62cbcac9', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'e9c650f8587e3b8e3b45a37beaf798175cf083c9', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'c92dc3a6577ef1f1104fba608da9b24c27334589', class: "sd-date-picker__menu" }, h("div", { key: 'f18df2f6ae3321dc01f357de000f85bc56a10df5', class: "sd-date-picker__header" }, h("div", { key: 'df670b08cbd4906f8c27d0d56670a0b3244bab3c', class: "year-nav" }, h("button", { key: '3afa36ad5454a9a6eda9cba37046c3cc9bdff03b', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '6ed5623aa69d2e1b7e3718315b1f225d6a22937e', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '366930f143f1f4e3fa76f7af9d1d97f7630cee49', class: "year-nav__current" }, this.currentYear), h("button", { key: '926fe9e7ae702c5f05818cf38d8ed40a05408fb4', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: 'ef62197919a3e54a8e225724f5f7a96544185298', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: 'bb0919c817685da0e2351474455dbce7f3d5d7f9', class: "month-nav" }, h("button", { key: '44c0fa106782d0cb108fb3baaaa80b1fb420107e', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '09d58c3bbfdf8e81612b1ff0e6c51cbae5c126a6', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '584aa3b2c28d1fc86b72dc8ebe1d078daee097dd', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '70985e1842a4a28f47a9cc9b02cace868997ec3d', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'ab80855e8828808d81a299ace7003b876454bd97', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '23f41a8b2a86e6564e301e835d16f07807c3bb70', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'b85483286fba4b1ebb3b7333162f6729fb8e058d', class: "sd-date-picker__body" }, [
+        return (h(Host, { key: 'ceaa6b5321f565e0560feb4218205925210d0967', class: "sd-date-picker" }, h("sd-input", { key: '1b5e1afcbad3daf40766977edd17077d9bc18200', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", onClick: () => this.openMenu() }, h("sd-icon", { key: 'd61cc0a28f65c77a80ebf216a259b66b17615054', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '2e41787708d795d727edf1d21398bc70e31f41e0', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '579adc1459a9fd6ee9313eec5a4d03b2a2e61222', class: "sd-date-picker__menu" }, h("div", { key: '5bae8978c6a4bb25f430f94d2c66927031a8e646', class: "sd-date-picker__header" }, h("div", { key: 'e4482baaa76c96740c2ff9eea4182b7bda59b974', class: "year-nav" }, h("button", { key: 'eb439c8147be7fe8d351c30e6b516db19ccbbc0d', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '7a685bd6c07cdd8eff0ac0c8e19c07f6c2d826dc', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'e19520fa7dd4a6f19ff30482a9291caa83471b41', class: "year-nav__current" }, this.currentYear), h("button", { key: '5ff3333f877ca6b7faddc4494d0c88747c29c714', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '2d02cf464f98aafc9a929414b88e77d0167983a5', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '6195fc68cb522b0368344057da580ff73dfe6efd', class: "month-nav" }, h("button", { key: 'c68a01bb06f8ac2276f678c916f41d52cc17fb69', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '12873470bf8ca8c1e834f7953429a3e77ca24c6d', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'fb0db178bc0dc078f532ca955d6007fbccabb97d', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'd4871fe7e7328b060bdf9f2b56153e81d9c6a5b5', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'cf8467b63261012751ca0abafde6846eb397f13f', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: 'a5d9cacac573f545b1fe1c321d5971d50db6e957', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'dc2769b821cda06b29c6f45ac2363a2df7a32d04', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

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

@@ -1 +1 @@
-{"version":3,"file":"sd-date-picker.js","sourceRoot":"","sources":["../../../src/components/sd-date-picker/sd-date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, State, Event, h, EventEmitter, Host } from '@stencil/core';\r\nimport { useDatePicker } from '../../modules/useDatePicker';\r\nimport { today } from '../../utils/date';\r\n\r\n@Component({\r\n tag: 'sd-date-picker',\r\n styleUrl: 'sd-date-picker.scss',\r\n scoped: true,\r\n})\r\nexport class SdDatePicker {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() date: string | null = null;\r\n @Prop() label?: string;\r\n @Prop() selectable?: [string, string];\r\n @Prop() disabled: boolean = false;\r\n\r\n @State() isOpen: boolean = false;\r\n @State() currentDate: string | null = null;\r\n @State() currentYear!: number;\r\n @State() currentMonth!: number;\r\n\r\n @Event() sdChange!: EventEmitter<string | null>;\r\n\r\n componentWillLoad() {\r\n  this.setCalendar();\r\n }\r\n\r\n private dateUtil = useDatePicker();\r\n private inputEl?: HTMLElement;\r\n\r\n private setCalendar() {\r\n  const base = this.date || today;\r\n  const [year, month] = base.split('-').map(Number);\r\n  this.currentYear = year;\r\n  this.currentMonth = month;\r\n  this.currentDate = this.date;\r\n }\r\n\r\n private openMenu() {\r\n  if (this.disabled) return;\r\n\r\n  this.setCalendar();\r\n  this.isOpen = true;\r\n }\r\n\r\n private get calendar() {\r\n  return this.dateUtil.createCalendar(this.currentYear, this.currentMonth);\r\n }\r\n\r\n private setCurrentYear(year: number) {\r\n  this.currentYear = year;\r\n }\r\n\r\n private setCurrentMonth(month: number) {\r\n  this.currentMonth = month;\r\n }\r\n\r\n private setCurrentDate(date: string | null) {\r\n  this.currentDate = date;\r\n }\r\n\r\n private handleUpdateMonth(type: 'prev' | 'next') {\r\n  const { newYear, newMonth } = this.dateUtil.calculateYearMonth(\r\n   this.currentYear,\r\n   this.currentMonth,\r\n   type,\r\n  );\r\n  this.setCurrentYear(newYear);\r\n  this.setCurrentMonth(newMonth);\r\n }\r\n\r\n private handleDateClick(day: number) {\r\n  if (!day) return;\r\n\r\n  const date = this.dateUtil.formatDate(this.currentYear, this.currentMonth, day);\r\n  this.setCurrentDate(date);\r\n  this.isOpen = false;\r\n  this.sdChange.emit?.(date);\r\n }\r\n\r\n private isDisabledDate(date: string): boolean {\r\n  if (!this.selectable) return false;\r\n\r\n  const [startSelectable, endSelectable] = this.selectable;\r\n\r\n  if (startSelectable && endSelectable) {\r\n   return date < startSelectable || date > endSelectable;\r\n  }\r\n\r\n  if (startSelectable) {\r\n   return date < startSelectable;\r\n  }\r\n\r\n  if (endSelectable) {\r\n   return date > endSelectable;\r\n  }\r\n\r\n  return false;\r\n }\r\n\r\n private handleClose = () => {\r\n  this.isOpen = false;\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Host class=\"sd-date-picker\">\r\n    <sd-input\r\n     ref={el => (this.inputEl = el as unknown as HTMLElement)}\r\n     value={this.date}\r\n     label={this.label}\r\n     inside-label\r\n     readonly\r\n     disabled={this.disabled}\r\n     inputClass=\"text-center\"\r\n     inputStyle={{\r\n      margin: '0 0 0 8px',\r\n     }}\r\n     onClick={() => this.openMenu()}\r\n    >\r\n     <sd-icon\r\n      slot=\"prefix\"\r\n      name=\"date\"\r\n      size=\"16\"\r\n      color=\"#737373\"\r\n      class=\"date-icon\"\r\n      onClick={() => this.openMenu()}\r\n     ></sd-icon>\r\n    </sd-input>\r\n\r\n    {this.isOpen && (\r\n     <sd-portal open={this.isOpen} parentRef={this.inputEl} onSdClose={this.handleClose}>\r\n      <div class=\"sd-date-picker__menu\">\r\n       <div class=\"sd-date-picker__header\">\r\n        {/* Year Navigation */}\r\n        <div class=\"year-nav\">\r\n         <button\r\n          type=\"button\"\r\n          name=\"prev-year\"\r\n          title=\"Previous Year\"\r\n          onClick={() => this.setCurrentYear(this.currentYear - 1)}\r\n         >\r\n          <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n         <span class=\"year-nav__current\">{this.currentYear}</span>\r\n         <button\r\n          type=\"button\"\r\n          name=\"next-year\"\r\n          title=\"Next Year\"\r\n          onClick={() => this.setCurrentYear(this.currentYear + 1)}\r\n         >\r\n          <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n        </div>\r\n\r\n        {/* Month Navigation */}\r\n        <div class=\"month-nav\">\r\n         <button\r\n          type=\"button\"\r\n          name=\"prev-month\"\r\n          title=\"Previous       \"\r\n          onClick={() => this.handleUpdateMonth('prev')}\r\n         >\r\n          <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n         <span class=\"month-nav__current\">{this.currentMonth}월</span>\r\n         <button\r\n          type=\"button\"\r\n          name=\"next-month\"\r\n          title=\"Next Month\"\r\n          onClick={() => this.handleUpdateMonth('next')}\r\n         >\r\n          <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n        </div>\r\n       </div>\r\n\r\n       <div class=\"sd-date-picker__days\">\r\n        {['일', '월', '화', '수', '목', '금', '토'].map(day => (\r\n         <div key={day} class=\"day\">\r\n          {day}\r\n         </div>\r\n        ))}\r\n       </div>\r\n\r\n       <div class=\"sd-date-picker__body\">\r\n        {[\r\n         ...this.calendar.prevMonthDays,\r\n         ...this.calendar.days,\r\n         ...this.calendar.afterMonthDays,\r\n        ].map((day, idx) => {\r\n         const formattedDate = this.dateUtil.formatDate(\r\n          this.currentYear,\r\n          this.currentMonth,\r\n          Number(day),\r\n         );\r\n\r\n         return (\r\n          <sd-date-box\r\n           key={`${day}_${idx}`}\r\n           date={!day ? '' : Number(day)}\r\n           selected={this.currentDate === formattedDate}\r\n           isToday={today === formattedDate}\r\n           disabled={!day ? true : this.isDisabledDate(formattedDate)}\r\n           onClick={\r\n            !this.isDisabledDate(formattedDate) && day\r\n             ? () => this.handleDateClick(Number(day))\r\n             : undefined\r\n           }\r\n          />\r\n         );\r\n        })}\r\n       </div>\r\n      </div>\r\n     </sd-portal>\r\n    )}\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"]}
+{"version":3,"file":"sd-date-picker.js","sourceRoot":"","sources":["../../../src/components/sd-date-picker/sd-date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, State, Event, h, EventEmitter, Host } from '@stencil/core';\r\nimport { useDatePicker } from '../../modules/useDatePicker';\r\nimport { today } from '../../utils/date';\r\n\r\n@Component({\r\n tag: 'sd-date-picker',\r\n styleUrl: 'sd-date-picker.scss',\r\n scoped: true,\r\n})\r\nexport class SdDatePicker {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() date: string | null = null;\r\n @Prop() label?: string;\r\n @Prop() selectable?: [string, string];\r\n @Prop() disabled: boolean = false;\r\n\r\n @State() isOpen: boolean = false;\r\n @State() currentDate: string | null = null;\r\n @State() currentYear!: number;\r\n @State() currentMonth!: number;\r\n\r\n @Event() sdChange!: EventEmitter<string | null>;\r\n\r\n componentWillLoad() {\r\n  this.setCalendar();\r\n }\r\n\r\n private dateUtil = useDatePicker();\r\n private inputEl?: HTMLElement;\r\n\r\n private setCalendar() {\r\n  const base = this.date || today;\r\n  const [year, month] = base.split('-').map(Number);\r\n  this.currentYear = year;\r\n  this.currentMonth = month;\r\n  this.currentDate = this.date;\r\n }\r\n\r\n private openMenu() {\r\n  if (this.disabled) return;\r\n\r\n  this.setCalendar();\r\n  this.isOpen = true;\r\n }\r\n\r\n private get calendar() {\r\n  return this.dateUtil.createCalendar(this.currentYear, this.currentMonth);\r\n }\r\n\r\n private setCurrentYear(year: number) {\r\n  this.currentYear = year;\r\n }\r\n\r\n private setCurrentMonth(month: number) {\r\n  this.currentMonth = month;\r\n }\r\n\r\n private setCurrentDate(date: string | null) {\r\n  this.currentDate = date;\r\n }\r\n\r\n private handleUpdateMonth(type: 'prev' | 'next') {\r\n  const { newYear, newMonth } = this.dateUtil.calculateYearMonth(\r\n   this.currentYear,\r\n   this.currentMonth,\r\n   type,\r\n  );\r\n  this.setCurrentYear(newYear);\r\n  this.setCurrentMonth(newMonth);\r\n }\r\n\r\n private handleDateClick(day: number) {\r\n  if (!day) return;\r\n\r\n  const date = this.dateUtil.formatDate(this.currentYear, this.currentMonth, day);\r\n  this.setCurrentDate(date);\r\n  this.isOpen = false;\r\n  this.sdChange.emit?.(date);\r\n }\r\n\r\n private isDisabledDate(date: string): boolean {\r\n  if (!this.selectable) return false;\r\n\r\n  const [startSelectable, endSelectable] = this.selectable;\r\n\r\n  if (startSelectable && endSelectable) {\r\n   return date < startSelectable || date > endSelectable;\r\n  }\r\n\r\n  if (startSelectable) {\r\n   return date < startSelectable;\r\n  }\r\n\r\n  if (endSelectable) {\r\n   return date > endSelectable;\r\n  }\r\n\r\n  return false;\r\n }\r\n\r\n private handleClose = () => {\r\n  this.isOpen = false;\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Host class=\"sd-date-picker\">\r\n    <sd-input\r\n     ref={el => (this.inputEl = el as unknown as HTMLElement)}\r\n     value={this.date}\r\n     label={this.label}\r\n     inside-label\r\n     readonly\r\n     disabled={this.disabled}\r\n     inputClass=\"text-center\"\r\n     onClick={() => this.openMenu()}\r\n    >\r\n     <sd-icon\r\n      slot=\"prefix\"\r\n      name=\"date\"\r\n      size=\"16\"\r\n      color=\"#737373\"\r\n      class=\"date-icon\"\r\n      onClick={() => this.openMenu()}\r\n     ></sd-icon>\r\n    </sd-input>\r\n\r\n    {this.isOpen && (\r\n     <sd-portal open={this.isOpen} parentRef={this.inputEl} onSdClose={this.handleClose}>\r\n      <div class=\"sd-date-picker__menu\">\r\n       <div class=\"sd-date-picker__header\">\r\n        {/* Year Navigation */}\r\n        <div class=\"year-nav\">\r\n         <button\r\n          type=\"button\"\r\n          name=\"prev-year\"\r\n          title=\"Previous Year\"\r\n          onClick={() => this.setCurrentYear(this.currentYear - 1)}\r\n         >\r\n          <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n         <span class=\"year-nav__current\">{this.currentYear}</span>\r\n         <button\r\n          type=\"button\"\r\n          name=\"next-year\"\r\n          title=\"Next Year\"\r\n          onClick={() => this.setCurrentYear(this.currentYear + 1)}\r\n         >\r\n          <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n        </div>\r\n\r\n        {/* Month Navigation */}\r\n        <div class=\"month-nav\">\r\n         <button\r\n          type=\"button\"\r\n          name=\"prev-month\"\r\n          title=\"Previous       \"\r\n          onClick={() => this.handleUpdateMonth('prev')}\r\n         >\r\n          <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n         <span class=\"month-nav__current\">{this.currentMonth}월</span>\r\n         <button\r\n          type=\"button\"\r\n          name=\"next-month\"\r\n          title=\"Next Month\"\r\n          onClick={() => this.handleUpdateMonth('next')}\r\n         >\r\n          <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n        </div>\r\n       </div>\r\n\r\n       <div class=\"sd-date-picker__days\">\r\n        {['일', '월', '화', '수', '목', '금', '토'].map(day => (\r\n         <div key={day} class=\"day\">\r\n          {day}\r\n         </div>\r\n        ))}\r\n       </div>\r\n\r\n       <div class=\"sd-date-picker__body\">\r\n        {[\r\n         ...this.calendar.prevMonthDays,\r\n         ...this.calendar.days,\r\n         ...this.calendar.afterMonthDays,\r\n        ].map((day, idx) => {\r\n         const formattedDate = this.dateUtil.formatDate(\r\n          this.currentYear,\r\n          this.currentMonth,\r\n          Number(day),\r\n         );\r\n\r\n         return (\r\n          <sd-date-box\r\n           key={`${day}_${idx}`}\r\n           date={!day ? '' : Number(day)}\r\n           selected={this.currentDate === formattedDate}\r\n           isToday={today === formattedDate}\r\n           disabled={!day ? true : this.isDisabledDate(formattedDate)}\r\n           onClick={\r\n            !this.isDisabledDate(formattedDate) && day\r\n             ? () => this.handleDateClick(Number(day))\r\n             : undefined\r\n           }\r\n          />\r\n         );\r\n        })}\r\n       </div>\r\n      </div>\r\n     </sd-portal>\r\n    )}\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"]}

package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js

@@ -131,7 +131,8 @@ export class SdTooltipPortal {
     }
     // 외부 클릭 감지
     handleMouseDown(e) {
-        this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target));
+        this.isInsideClick = !!((this.wrapper && this.wrapper.contains(e.target)) ||
+            (this.parentRef && this.parentRef.contains(e.target)));
     }
     handleWindowClick(e) {
         if (this.isInsideClick) {
@@ -143,7 +144,7 @@ export class SdTooltipPortal {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: '1b2a35d58c663c18354bdf4fae5e8a1d18433273' });
+        return h("slot", { key: '918c09f6f9b248a6ba08e622c375b63adb36d0c3' });
     }
     static get is() { return "sd-tooltip-portal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-tooltip-portal.js","sourceRoot":"","sources":["../../../src/components/sd-tooltip-portal/sd-tooltip-portal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-tooltip-portal',\r\n shadow: true,\r\n})\r\nexport class SdTooltipPortal {\r\n @Element() el!: HTMLElement;\r\n @Prop() to: HTMLElement | string = 'body';\r\n @Prop() parentRef: HTMLElement | null = null;\r\n @Prop() offset: [number, number] = [0, 0];\r\n @Prop() zIndex: number = 9999;\r\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\r\n @Prop() open: boolean = false;\r\n\r\n @Event() sdClose!: EventEmitter<void>;\r\n\r\n private container?: HTMLElement;\r\n private wrapper?: HTMLElement;\r\n private rafId?: number;\r\n private isInsideClick = false;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n private mutationObserver?: MutationObserver;\r\n\r\n private static readonly ARROW_SIZE = 11.2;\r\n\r\n componentDidLoad() {\r\n  this.container = this.resolveContainer();\r\n  this.createWrapper();\r\n  this.moveSlotContent();\r\n\r\n  // DOM이 완전히 렌더링된 후 위치 계산\r\n  requestAnimationFrame(() => {\r\n   this.updatePosition();\r\n   if (this.wrapper) {\r\n    this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시\r\n   }\r\n  });\r\n\r\n  this.observeParent();\r\n }\r\n\r\n componentDidRender() {\r\n  if (!this.wrapper) return;\r\n\r\n  // this.wrapper.style.display = this.open ? 'block' : 'none';\r\n  // if (this.open) this.updatePosition();\r\n\r\n  if (this.open) {\r\n   this.wrapper.style.display = 'block';\r\n   // RAF를 사용해서 다음 프레임에 위치 업데이트\r\n   requestAnimationFrame(() => {\r\n    this.updatePosition();\r\n    if (this.wrapper) {\r\n     this.wrapper.style.visibility = 'visible';\r\n    }\r\n   });\r\n  } else {\r\n   this.wrapper.style.display = 'none';\r\n   this.wrapper.style.visibility = 'hidden';\r\n  }\r\n }\r\n\r\n disconnectedCallback() {\r\n  if (this.rafId) cancelAnimationFrame(this.rafId);\r\n  this.unobserveParent();\r\n  this.wrapper?.remove();\r\n }\r\n\r\n private resolveContainer(): HTMLElement {\r\n  const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\r\n  return el instanceof HTMLElement ? el : document.body;\r\n }\r\n\r\n private createWrapper() {\r\n  this.wrapper = document.createElement('div');\r\n  Object.assign(this.wrapper.style, {\r\n   position: 'absolute',\r\n   zIndex: this.zIndex.toString(),\r\n   transition: 'opacity 0.4s',\r\n   top: '-9999px',\r\n   left: '-9999px',\r\n  });\r\n  this.container!.appendChild(this.wrapper);\r\n }\r\n\r\n private moveSlotContent() {\r\n  if (!this.wrapper) return;\r\n  const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\r\n  nodes.forEach(n => this.wrapper!.appendChild(n));\r\n }\r\n\r\n // 위치 갱신 (scroll / resize)\r\n @Listen('scroll', { target: 'window' })\r\n @Listen('resize', { target: 'window' })\r\n updatePosition() {\r\n  if (this.rafId) cancelAnimationFrame(this.rafId);\r\n\r\n  this.rafId = requestAnimationFrame(() => {\r\n   if (!this.parentRef || !this.wrapper) return;\r\n\r\n   const rect = this.parentRef.getBoundingClientRect();\r\n   if (!rect.width && !rect.height) return; // 요소가 보이지 않는 경우\r\n\r\n   const [offsetX, offsetY] = this.offset;\r\n   const ARROW_SIZE = SdTooltipPortal.ARROW_SIZE;\r\n\r\n   let top = 0;\r\n   let left = 0;\r\n\r\n   switch (this.placement) {\r\n    case 'top':\r\n     top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;\r\n     left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n     break;\r\n\r\n    case 'bottom':\r\n     top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;\r\n     left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n     break;\r\n\r\n    case 'left':\r\n     top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n     left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;\r\n     break;\r\n\r\n    case 'right':\r\n     top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n     left = rect.right + window.scrollX + offsetX + ARROW_SIZE;\r\n     break;\r\n   }\r\n\r\n   Object.assign(this.wrapper!.style, {\r\n    top: `${top}px`,\r\n    left: `${left}px`,\r\n   });\r\n  });\r\n }\r\n\r\n // parentRef의 이동 / 크기변경 감지\r\n private observeParent() {\r\n  if (!this.parentRef) return;\r\n\r\n  this.resizeObserver = new ResizeObserver(() => this.updatePosition());\r\n  this.resizeObserver.observe(this.parentRef);\r\n\r\n  this.mutationObserver = new MutationObserver(() => this.updatePosition());\r\n  this.mutationObserver.observe(document.body, {\r\n   childList: true,\r\n   subtree: true,\r\n  });\r\n }\r\n\r\n private unobserveParent() {\r\n  this.resizeObserver?.disconnect();\r\n  this.mutationObserver?.disconnect();\r\n }\r\n\r\n // 외부 클릭 감지\r\n @Listen('mousedown', { target: 'window' })\r\n handleMouseDown(e: MouseEvent) {\r\n  this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target as Node));\r\n }\r\n\r\n @Listen('click', { target: 'window' })\r\n handleWindowClick(e: MouseEvent) {\r\n  if (this.isInsideClick) {\r\n   this.isInsideClick = false;\r\n   return;\r\n  }\r\n  if (this.wrapper?.contains(e.target as Node)) return;\r\n  this.sdClose.emit();\r\n }\r\n\r\n render() {\r\n  return <slot></slot>;\r\n }\r\n}\r\n"]}
+{"version":3,"file":"sd-tooltip-portal.js","sourceRoot":"","sources":["../../../src/components/sd-tooltip-portal/sd-tooltip-portal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-tooltip-portal',\r\n shadow: true,\r\n})\r\nexport class SdTooltipPortal {\r\n @Element() el!: HTMLElement;\r\n @Prop() to: HTMLElement | string = 'body';\r\n @Prop() parentRef: HTMLElement | null = null;\r\n @Prop() offset: [number, number] = [0, 0];\r\n @Prop() zIndex: number = 9999;\r\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\r\n @Prop() open: boolean = false;\r\n\r\n @Event() sdClose!: EventEmitter<void>;\r\n\r\n private container?: HTMLElement;\r\n private wrapper?: HTMLElement;\r\n private rafId?: number;\r\n private isInsideClick = false;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n private mutationObserver?: MutationObserver;\r\n\r\n private static readonly ARROW_SIZE = 11.2;\r\n\r\n componentDidLoad() {\r\n  this.container = this.resolveContainer();\r\n  this.createWrapper();\r\n  this.moveSlotContent();\r\n\r\n  // DOM이 완전히 렌더링된 후 위치 계산\r\n  requestAnimationFrame(() => {\r\n   this.updatePosition();\r\n   if (this.wrapper) {\r\n    this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시\r\n   }\r\n  });\r\n\r\n  this.observeParent();\r\n }\r\n\r\n componentDidRender() {\r\n  if (!this.wrapper) return;\r\n\r\n  // this.wrapper.style.display = this.open ? 'block' : 'none';\r\n  // if (this.open) this.updatePosition();\r\n\r\n  if (this.open) {\r\n   this.wrapper.style.display = 'block';\r\n   // RAF를 사용해서 다음 프레임에 위치 업데이트\r\n   requestAnimationFrame(() => {\r\n    this.updatePosition();\r\n    if (this.wrapper) {\r\n     this.wrapper.style.visibility = 'visible';\r\n    }\r\n   });\r\n  } else {\r\n   this.wrapper.style.display = 'none';\r\n   this.wrapper.style.visibility = 'hidden';\r\n  }\r\n }\r\n\r\n disconnectedCallback() {\r\n  if (this.rafId) cancelAnimationFrame(this.rafId);\r\n  this.unobserveParent();\r\n  this.wrapper?.remove();\r\n }\r\n\r\n private resolveContainer(): HTMLElement {\r\n  const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\r\n  return el instanceof HTMLElement ? el : document.body;\r\n }\r\n\r\n private createWrapper() {\r\n  this.wrapper = document.createElement('div');\r\n  Object.assign(this.wrapper.style, {\r\n   position: 'absolute',\r\n   zIndex: this.zIndex.toString(),\r\n   transition: 'opacity 0.4s',\r\n   top: '-9999px',\r\n   left: '-9999px',\r\n  });\r\n  this.container!.appendChild(this.wrapper);\r\n }\r\n\r\n private moveSlotContent() {\r\n  if (!this.wrapper) return;\r\n  const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\r\n  nodes.forEach(n => this.wrapper!.appendChild(n));\r\n }\r\n\r\n // 위치 갱신 (scroll / resize)\r\n @Listen('scroll', { target: 'window' })\r\n @Listen('resize', { target: 'window' })\r\n updatePosition() {\r\n  if (this.rafId) cancelAnimationFrame(this.rafId);\r\n\r\n  this.rafId = requestAnimationFrame(() => {\r\n   if (!this.parentRef || !this.wrapper) return;\r\n\r\n   const rect = this.parentRef.getBoundingClientRect();\r\n   if (!rect.width && !rect.height) return; // 요소가 보이지 않는 경우\r\n\r\n   const [offsetX, offsetY] = this.offset;\r\n   const ARROW_SIZE = SdTooltipPortal.ARROW_SIZE;\r\n\r\n   let top = 0;\r\n   let left = 0;\r\n\r\n   switch (this.placement) {\r\n    case 'top':\r\n     top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;\r\n     left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n     break;\r\n\r\n    case 'bottom':\r\n     top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;\r\n     left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n     break;\r\n\r\n    case 'left':\r\n     top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n     left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;\r\n     break;\r\n\r\n    case 'right':\r\n     top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n     left = rect.right + window.scrollX + offsetX + ARROW_SIZE;\r\n     break;\r\n   }\r\n\r\n   Object.assign(this.wrapper!.style, {\r\n    top: `${top}px`,\r\n    left: `${left}px`,\r\n   });\r\n  });\r\n }\r\n\r\n // parentRef의 이동 / 크기변경 감지\r\n private observeParent() {\r\n  if (!this.parentRef) return;\r\n\r\n  this.resizeObserver = new ResizeObserver(() => this.updatePosition());\r\n  this.resizeObserver.observe(this.parentRef);\r\n\r\n  this.mutationObserver = new MutationObserver(() => this.updatePosition());\r\n  this.mutationObserver.observe(document.body, {\r\n   childList: true,\r\n   subtree: true,\r\n  });\r\n }\r\n\r\n private unobserveParent() {\r\n  this.resizeObserver?.disconnect();\r\n  this.mutationObserver?.disconnect();\r\n }\r\n\r\n // 외부 클릭 감지\r\n @Listen('mousedown', { target: 'window' })\r\n handleMouseDown(e: MouseEvent) {\r\n  this.isInsideClick = !!(\r\n   (this.wrapper && this.wrapper.contains(e.target as Node)) ||\r\n   (this.parentRef && this.parentRef.contains(e.target as Node))\r\n  );\r\n }\r\n\r\n @Listen('click', { target: 'window' })\r\n handleWindowClick(e: MouseEvent) {\r\n  if (this.isInsideClick) {\r\n   this.isInsideClick = false;\r\n   return;\r\n  }\r\n  if (this.wrapper?.contains(e.target as Node)) return;\r\n  this.sdClose.emit();\r\n }\r\n\r\n render() {\r\n  return <slot></slot>;\r\n }\r\n}\r\n"]}

package/dist/components/{p-CO0qaUid.js → p-4n8y_ubX.js}

@@ -140,7 +140,8 @@ const SdTooltipPortal = /*@__PURE__*/ proxyCustomElement(class SdTooltipPortal e
     }
     // 외부 클릭 감지
     handleMouseDown(e) {
-        this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target));
+        this.isInsideClick = !!((this.wrapper && this.wrapper.contains(e.target)) ||
+            (this.parentRef && this.parentRef.contains(e.target)));
     }
     handleWindowClick(e) {
         if (this.isInsideClick) {
@@ -152,7 +153,7 @@ const SdTooltipPortal = /*@__PURE__*/ proxyCustomElement(class SdTooltipPortal e
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: '1b2a35d58c663c18354bdf4fae5e8a1d18433273' });
+        return h("slot", { key: '918c09f6f9b248a6ba08e622c375b63adb36d0c3' });
     }
 }, [769, "sd-tooltip-portal", {
         "to": [1],
@@ -177,6 +178,6 @@ function defineCustomElement() {
 }
 
 export { SdTooltipPortal as S, defineCustomElement as d };
-//# sourceMappingURL=p-CO0qaUid.js.map
+//# sourceMappingURL=p-4n8y_ubX.js.map
 
-//# sourceMappingURL=p-CO0qaUid.js.map
+//# sourceMappingURL=p-4n8y_ubX.js.map

package/dist/components/p-4n8y_ubX.js.map

@@ -0,0 +1 @@
+{"file":"p-4n8y_ubX.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tooltip-portal/sd-tooltip-portal.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-tooltip-portal',\r\n shadow: true,\r\n})\r\nexport class SdTooltipPortal {\r\n @Element() el!: HTMLElement;\r\n @Prop() to: HTMLElement | string = 'body';\r\n @Prop() parentRef: HTMLElement | null = null;\r\n @Prop() offset: [number, number] = [0, 0];\r\n @Prop() zIndex: number = 9999;\r\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\r\n @Prop() open: boolean = false;\r\n\r\n @Event() sdClose!: EventEmitter<void>;\r\n\r\n private container?: HTMLElement;\r\n private wrapper?: HTMLElement;\r\n private rafId?: number;\r\n private isInsideClick = false;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n private mutationObserver?: MutationObserver;\r\n\r\n private static readonly ARROW_SIZE = 11.2;\r\n\r\n componentDidLoad() {\r\n  this.container = this.resolveContainer();\r\n  this.createWrapper();\r\n  this.moveSlotContent();\r\n\r\n  // DOM이 완전히 렌더링된 후 위치 계산\r\n  requestAnimationFrame(() => {\r\n   this.updatePosition();\r\n   if (this.wrapper) {\r\n    this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시\r\n   }\r\n  });\r\n\r\n  this.observeParent();\r\n }\r\n\r\n componentDidRender() {\r\n  if (!this.wrapper) return;\r\n\r\n  // this.wrapper.style.display = this.open ? 'block' : 'none';\r\n  // if (this.open) this.updatePosition();\r\n\r\n  if (this.open) {\r\n   this.wrapper.style.display = 'block';\r\n   // RAF를 사용해서 다음 프레임에 위치 업데이트\r\n   requestAnimationFrame(() => {\r\n    this.updatePosition();\r\n    if (this.wrapper) {\r\n     this.wrapper.style.visibility = 'visible';\r\n    }\r\n   });\r\n  } else {\r\n   this.wrapper.style.display = 'none';\r\n   this.wrapper.style.visibility = 'hidden';\r\n  }\r\n }\r\n\r\n disconnectedCallback() {\r\n  if (this.rafId) cancelAnimationFrame(this.rafId);\r\n  this.unobserveParent();\r\n  this.wrapper?.remove();\r\n }\r\n\r\n private resolveContainer(): HTMLElement {\r\n  const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\r\n  return el instanceof HTMLElement ? el : document.body;\r\n }\r\n\r\n private createWrapper() {\r\n  this.wrapper = document.createElement('div');\r\n  Object.assign(this.wrapper.style, {\r\n   position: 'absolute',\r\n   zIndex: this.zIndex.toString(),\r\n   transition: 'opacity 0.4s',\r\n   top: '-9999px',\r\n   left: '-9999px',\r\n  });\r\n  this.container!.appendChild(this.wrapper);\r\n }\r\n\r\n private moveSlotContent() {\r\n  if (!this.wrapper) return;\r\n  const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\r\n  nodes.forEach(n => this.wrapper!.appendChild(n));\r\n }\r\n\r\n // 위치 갱신 (scroll / resize)\r\n @Listen('scroll', { target: 'window' })\r\n @Listen('resize', { target: 'window' })\r\n updatePosition() {\r\n  if (this.rafId) cancelAnimationFrame(this.rafId);\r\n\r\n  this.rafId = requestAnimationFrame(() => {\r\n   if (!this.parentRef || !this.wrapper) return;\r\n\r\n   const rect = this.parentRef.getBoundingClientRect();\r\n   if (!rect.width && !rect.height) return; // 요소가 보이지 않는 경우\r\n\r\n   const [offsetX, offsetY] = this.offset;\r\n   const ARROW_SIZE = SdTooltipPortal.ARROW_SIZE;\r\n\r\n   let top = 0;\r\n   let left = 0;\r\n\r\n   switch (this.placement) {\r\n    case 'top':\r\n     top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;\r\n     left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n     break;\r\n\r\n    case 'bottom':\r\n     top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;\r\n     left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n     break;\r\n\r\n    case 'left':\r\n     top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n     left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;\r\n     break;\r\n\r\n    case 'right':\r\n     top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n     left = rect.right + window.scrollX + offsetX + ARROW_SIZE;\r\n     break;\r\n   }\r\n\r\n   Object.assign(this.wrapper!.style, {\r\n    top: `${top}px`,\r\n    left: `${left}px`,\r\n   });\r\n  });\r\n }\r\n\r\n // parentRef의 이동 / 크기변경 감지\r\n private observeParent() {\r\n  if (!this.parentRef) return;\r\n\r\n  this.resizeObserver = new ResizeObserver(() => this.updatePosition());\r\n  this.resizeObserver.observe(this.parentRef);\r\n\r\n  this.mutationObserver = new MutationObserver(() => this.updatePosition());\r\n  this.mutationObserver.observe(document.body, {\r\n   childList: true,\r\n   subtree: true,\r\n  });\r\n }\r\n\r\n private unobserveParent() {\r\n  this.resizeObserver?.disconnect();\r\n  this.mutationObserver?.disconnect();\r\n }\r\n\r\n // 외부 클릭 감지\r\n @Listen('mousedown', { target: 'window' })\r\n handleMouseDown(e: MouseEvent) {\r\n  this.isInsideClick = !!(\r\n   (this.wrapper && this.wrapper.contains(e.target as Node)) ||\r\n   (this.parentRef && this.parentRef.contains(e.target as Node))\r\n  );\r\n }\r\n\r\n @Listen('click', { target: 'window' })\r\n handleWindowClick(e: MouseEvent) {\r\n  if (this.isInsideClick) {\r\n   this.isInsideClick = false;\r\n   return;\r\n  }\r\n  if (this.wrapper?.contains(e.target as Node)) return;\r\n  this.sdClose.emit();\r\n }\r\n\r\n render() {\r\n  return <slot></slot>;\r\n }\r\n}\r\n"],"version":3}

package/dist/components/{p-BiFL1Pnf.js → p-C5VIAyqc.js}

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h, F as Fragment } from './p-CbnL1UUF.js';
 import { T as TooltipArrow } from './p-wA4KCOG0.js';
 import { d as defineCustomElement$3 } from './p-CXuU0Q0J.js';
 import { d as defineCustomElement$2 } from './p-DdLgl05o.js';
-import { d as defineCustomElement$1 } from './p-CO0qaUid.js';
+import { d as defineCustomElement$1 } from './p-4n8y_ubX.js';
 
 const sdTooltipCss = "sd-tooltip [slot=content]{display:none}sd-tooltip .sd-tooltip{position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__content p{margin:0}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}";
 
@@ -116,6 +116,6 @@ function defineCustomElement() {
 }
 
 export { SdTooltip as S, defineCustomElement as d };
-//# sourceMappingURL=p-BiFL1Pnf.js.map
+//# sourceMappingURL=p-C5VIAyqc.js.map
 
-//# sourceMappingURL=p-BiFL1Pnf.js.map
+//# sourceMappingURL=p-C5VIAyqc.js.map

package/dist/components/{p-BiFL1Pnf.js.map → p-C5VIAyqc.js.map}

@@ -1 +1 @@
-{"file":"p-BiFL1Pnf.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tooltip/sd-tooltip.scss?tag=sd-tooltip","src/components/sd-tooltip/sd-tooltip.tsx"],"sourcesContent":["sd-tooltip {\r\n [slot='content'] {\r\n  display: none;\r\n }\r\n\r\n .sd-tooltip {\r\n  position: relative;\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n }\r\n}\r\n\r\n.sd-tooltip-menu {\r\n width: fit-content;\r\n padding: 8px 16px;\r\n border-radius: 4px;\r\n font-size: 12px;\r\n position: relative;\r\n box-sizing: border-box;\r\n display: flex;\r\n align-items: start;\r\n justify-content: center;\r\n gap: 12px;\r\n\r\n &--with-close {\r\n  padding-right: 12px !important;\r\n }\r\n\r\n &__arrow {\r\n  position: absolute;\r\n  display: flex;\r\n  width: 9.6px;\r\n  height: 7.2px;\r\n  svg {\r\n   width: 100%;\r\n   height: 100%;\r\n  }\r\n  &--top {\r\n   bottom: -7.2px;\r\n   left: 50%;\r\n   transform: translateX(-50%);\r\n  }\r\n  &--bottom {\r\n   top: -7.2px;\r\n   left: 50%;\r\n   transform: translateX(-50%) rotate(180deg);\r\n  }\r\n  &--left {\r\n   right: -7.2px;\r\n   top: 50%;\r\n   transform: translateY(-50%) rotate(-90deg);\r\n  }\r\n  &--right {\r\n   left: -7.2px;\r\n   top: 50%;\r\n   transform: translateY(-50%) rotate(90deg);\r\n  }\r\n }\r\n\r\n &__content {\r\n  line-height: 20px;\r\n  font-weight: 500;\r\n\r\n  p {\r\n   margin: 0;\r\n  }\r\n }\r\n\r\n &__close-button {\r\n  padding-top: 4px;\r\n  display: flex;\r\n  button {\r\n   padding: 0;\r\n   background: none;\r\n   border: none;\r\n   cursor: pointer;\r\n  }\r\n }\r\n}\r\n","import { Component, Element, Fragment, Prop, State, h } from '@stencil/core';\r\nimport { HTMLStencilElement } from '@stencil/core/internal';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\nimport { TooltipArrow } from '../assets/tooltipArrow';\r\n\r\n@Component({\r\n tag: 'sd-tooltip',\r\n styleUrl: 'sd-tooltip.scss',\r\n})\r\nexport class SdTooltip {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() trigger: 'hover' | 'click' = 'hover';\r\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\r\n @Prop() color: string = '#01BB4B';\r\n @Prop() type: 'default' | 'caution' | 'notice' | 'accent' = 'default';\r\n\r\n @Prop() icon: IconName = 'helpOutline';\r\n @Prop() iconSize: number = 12;\r\n\r\n @Prop() label: string = '';\r\n @Prop() buttonSize: ButtonSize = 'sm';\r\n @Prop() buttonVariant: ButtonVariant = 'primary';\r\n\r\n @Prop() noHover: boolean = true;\r\n\r\n @Prop() useClose: boolean = false;\r\n\r\n @State() showTooltip: boolean = false;\r\n @State() slotContent: HTMLElement | null = null;\r\n\r\n private static readonly COLOR_OF_TYPE = {\r\n  default: { background: 'oceanblue_85', text: 'white' },\r\n  caution: { background: 'red_20', text: 'red_70' },\r\n  notice: { background: 'orange_10', text: 'orange_65' },\r\n  accent: { background: 'brilliantblue_20', text: 'brilliantblue_75' },\r\n };\r\n\r\n private buttonEl?: HTMLStencilElement;\r\n\r\n private handleClose = () => {\r\n  this.showTooltip = false;\r\n };\r\n\r\n // 현재 tooltip popover가 조건부 렌더링이여서 초기 slot이 렌더링 되지 않은 시점에\r\n // 데이터 매핑에 실패 (light dom에 저장된 slot내용을 shadow dom을 찾지못해 매핑 실패)\r\n // 따라서 slot내용을 받은 후에 복제하여 state에 저장\r\n componentWillLoad() {\r\n  const contentEl = this.el.querySelector('[slot=\"content\"]');\r\n  if (contentEl) {\r\n   this.slotContent = contentEl.cloneNode(true) as HTMLElement;\r\n  }\r\n }\r\n\r\n render() {\r\n  const handleTrigger =\r\n   this.trigger === 'hover'\r\n    ? {\r\n       onMouseEnter: () => (this.showTooltip = true),\r\n       onMouseLeave: () => (this.showTooltip = false),\r\n      }\r\n    : {\r\n       onClick: () => (this.showTooltip = !this.showTooltip),\r\n      };\r\n\r\n  return (\r\n   <Fragment>\r\n    {this.label ? (\r\n     <sd-button\r\n      ref={el => (this.buttonEl = el)}\r\n      label={this.label}\r\n      icon={this.icon}\r\n      size={this.buttonSize}\r\n      color={this.color}\r\n      variant={this.buttonVariant}\r\n      class=\"sd-tooltip\"\r\n      {...handleTrigger}\r\n     ></sd-button>\r\n    ) : (\r\n     <sd-icon\r\n      ref={el => (this.buttonEl = el)}\r\n      name={this.icon}\r\n      size={this.iconSize}\r\n      color={this.color}\r\n      class=\"sd-tooltip\"\r\n      {...handleTrigger}\r\n     ></sd-icon>\r\n    )}\r\n\r\n    {this.showTooltip && (\r\n     <sd-tooltip-portal\r\n      parentRef={this.buttonEl}\r\n      onSdClose={() => this.handleClose()}\r\n      placement={this.placement}\r\n     >\r\n      <div\r\n       class={{\r\n        'sd-tooltip-menu': true,\r\n        [`sd-tooltip-menu--${this.type}`]: true,\r\n        [`sd-tooltip-menu--${this.placement}`]: true,\r\n        'sd-tooltip-menu--with-close': this.useClose,\r\n        [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\r\n        [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,\r\n       }}\r\n      >\r\n       <i class={`sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}`}>\r\n        <TooltipArrow\r\n         class={{\r\n          [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\r\n         }}\r\n        ></TooltipArrow>\r\n       </i>\r\n\r\n       <div\r\n        class=\"sd-tooltip-menu__content\"\r\n        ref={el => {\r\n         if (el && this.slotContent && !el.hasChildNodes()) {\r\n          el.appendChild(this.slotContent.cloneNode(true));\r\n         }\r\n        }}\r\n       >\r\n        {!this.slotContent && <span>{this.el.textContent}</span>}\r\n       </div>\r\n\r\n       {this.useClose && (\r\n        <div class=\"sd-tooltip-menu__close-button\">\r\n         <button\r\n          type=\"button\"\r\n          aria-label=\"Close tooltip\"\r\n          title=\"Close tooltip\"\r\n          onClick={() => this.handleClose()}\r\n         >\r\n          <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\r\n         </button>\r\n        </div>\r\n       )}\r\n      </div>\r\n     </sd-tooltip-portal>\r\n    )}\r\n   </Fragment>\r\n  );\r\n }\r\n}\r\n"],"version":3}
+{"file":"p-C5VIAyqc.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tooltip/sd-tooltip.scss?tag=sd-tooltip","src/components/sd-tooltip/sd-tooltip.tsx"],"sourcesContent":["sd-tooltip {\r\n [slot='content'] {\r\n  display: none;\r\n }\r\n\r\n .sd-tooltip {\r\n  position: relative;\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n }\r\n}\r\n\r\n.sd-tooltip-menu {\r\n width: fit-content;\r\n padding: 8px 16px;\r\n border-radius: 4px;\r\n font-size: 12px;\r\n position: relative;\r\n box-sizing: border-box;\r\n display: flex;\r\n align-items: start;\r\n justify-content: center;\r\n gap: 12px;\r\n\r\n &--with-close {\r\n  padding-right: 12px !important;\r\n }\r\n\r\n &__arrow {\r\n  position: absolute;\r\n  display: flex;\r\n  width: 9.6px;\r\n  height: 7.2px;\r\n  svg {\r\n   width: 100%;\r\n   height: 100%;\r\n  }\r\n  &--top {\r\n   bottom: -7.2px;\r\n   left: 50%;\r\n   transform: translateX(-50%);\r\n  }\r\n  &--bottom {\r\n   top: -7.2px;\r\n   left: 50%;\r\n   transform: translateX(-50%) rotate(180deg);\r\n  }\r\n  &--left {\r\n   right: -7.2px;\r\n   top: 50%;\r\n   transform: translateY(-50%) rotate(-90deg);\r\n  }\r\n  &--right {\r\n   left: -7.2px;\r\n   top: 50%;\r\n   transform: translateY(-50%) rotate(90deg);\r\n  }\r\n }\r\n\r\n &__content {\r\n  line-height: 20px;\r\n  font-weight: 500;\r\n\r\n  p {\r\n   margin: 0;\r\n  }\r\n }\r\n\r\n &__close-button {\r\n  padding-top: 4px;\r\n  display: flex;\r\n  button {\r\n   padding: 0;\r\n   background: none;\r\n   border: none;\r\n   cursor: pointer;\r\n  }\r\n }\r\n}\r\n","import { Component, Element, Fragment, Prop, State, h } from '@stencil/core';\r\nimport { HTMLStencilElement } from '@stencil/core/internal';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\nimport { TooltipArrow } from '../assets/tooltipArrow';\r\n\r\n@Component({\r\n tag: 'sd-tooltip',\r\n styleUrl: 'sd-tooltip.scss',\r\n})\r\nexport class SdTooltip {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() trigger: 'hover' | 'click' = 'hover';\r\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\r\n @Prop() color: string = '#01BB4B';\r\n @Prop() type: 'default' | 'caution' | 'notice' | 'accent' = 'default';\r\n\r\n @Prop() icon: IconName = 'helpOutline';\r\n @Prop() iconSize: number = 12;\r\n\r\n @Prop() label: string = '';\r\n @Prop() buttonSize: ButtonSize = 'sm';\r\n @Prop() buttonVariant: ButtonVariant = 'primary';\r\n\r\n @Prop() noHover: boolean = true;\r\n\r\n @Prop() useClose: boolean = false;\r\n\r\n @State() showTooltip: boolean = false;\r\n @State() slotContent: HTMLElement | null = null;\r\n\r\n private static readonly COLOR_OF_TYPE = {\r\n  default: { background: 'oceanblue_85', text: 'white' },\r\n  caution: { background: 'red_20', text: 'red_70' },\r\n  notice: { background: 'orange_10', text: 'orange_65' },\r\n  accent: { background: 'brilliantblue_20', text: 'brilliantblue_75' },\r\n };\r\n\r\n private buttonEl?: HTMLStencilElement;\r\n\r\n private handleClose = () => {\r\n  this.showTooltip = false;\r\n };\r\n\r\n // 현재 tooltip popover가 조건부 렌더링이여서 초기 slot이 렌더링 되지 않은 시점에\r\n // 데이터 매핑에 실패 (light dom에 저장된 slot내용을 shadow dom을 찾지못해 매핑 실패)\r\n // 따라서 slot내용을 받은 후에 복제하여 state에 저장\r\n componentWillLoad() {\r\n  const contentEl = this.el.querySelector('[slot=\"content\"]');\r\n  if (contentEl) {\r\n   this.slotContent = contentEl.cloneNode(true) as HTMLElement;\r\n  }\r\n }\r\n\r\n render() {\r\n  const handleTrigger =\r\n   this.trigger === 'hover'\r\n    ? {\r\n       onMouseEnter: () => (this.showTooltip = true),\r\n       onMouseLeave: () => (this.showTooltip = false),\r\n      }\r\n    : {\r\n       onClick: () => (this.showTooltip = !this.showTooltip),\r\n      };\r\n\r\n  return (\r\n   <Fragment>\r\n    {this.label ? (\r\n     <sd-button\r\n      ref={el => (this.buttonEl = el)}\r\n      label={this.label}\r\n      icon={this.icon}\r\n      size={this.buttonSize}\r\n      color={this.color}\r\n      variant={this.buttonVariant}\r\n      class=\"sd-tooltip\"\r\n      {...handleTrigger}\r\n     ></sd-button>\r\n    ) : (\r\n     <sd-icon\r\n      ref={el => (this.buttonEl = el)}\r\n      name={this.icon}\r\n      size={this.iconSize}\r\n      color={this.color}\r\n      class=\"sd-tooltip\"\r\n      {...handleTrigger}\r\n     ></sd-icon>\r\n    )}\r\n\r\n    {this.showTooltip && (\r\n     <sd-tooltip-portal\r\n      parentRef={this.buttonEl}\r\n      onSdClose={() => this.handleClose()}\r\n      placement={this.placement}\r\n     >\r\n      <div\r\n       class={{\r\n        'sd-tooltip-menu': true,\r\n        [`sd-tooltip-menu--${this.type}`]: true,\r\n        [`sd-tooltip-menu--${this.placement}`]: true,\r\n        'sd-tooltip-menu--with-close': this.useClose,\r\n        [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\r\n        [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,\r\n       }}\r\n      >\r\n       <i class={`sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}`}>\r\n        <TooltipArrow\r\n         class={{\r\n          [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\r\n         }}\r\n        ></TooltipArrow>\r\n       </i>\r\n\r\n       <div\r\n        class=\"sd-tooltip-menu__content\"\r\n        ref={el => {\r\n         if (el && this.slotContent && !el.hasChildNodes()) {\r\n          el.appendChild(this.slotContent.cloneNode(true));\r\n         }\r\n        }}\r\n       >\r\n        {!this.slotContent && <span>{this.el.textContent}</span>}\r\n       </div>\r\n\r\n       {this.useClose && (\r\n        <div class=\"sd-tooltip-menu__close-button\">\r\n         <button\r\n          type=\"button\"\r\n          aria-label=\"Close tooltip\"\r\n          title=\"Close tooltip\"\r\n          onClick={() => this.handleClose()}\r\n         >\r\n          <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\r\n         </button>\r\n        </div>\r\n       )}\r\n      </div>\r\n     </sd-tooltip-portal>\r\n    )}\r\n   </Fragment>\r\n  );\r\n }\r\n}\r\n"],"version":3}

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

@@ -87,9 +87,7 @@ const SdDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdDatePicker exten
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: 'ceaa6b5321f565e0560feb4218205925210d0967', class: "sd-date-picker" }, h("sd-input", { key: '199da34a78585e13d7ffc0bbf1513c93651acf74', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
-                margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '739e14ea2d9b2ef07d6bee9dabc5418c62cbcac9', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'e9c650f8587e3b8e3b45a37beaf798175cf083c9', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'c92dc3a6577ef1f1104fba608da9b24c27334589', class: "sd-date-picker__menu" }, h("div", { key: 'f18df2f6ae3321dc01f357de000f85bc56a10df5', class: "sd-date-picker__header" }, h("div", { key: 'df670b08cbd4906f8c27d0d56670a0b3244bab3c', class: "year-nav" }, h("button", { key: '3afa36ad5454a9a6eda9cba37046c3cc9bdff03b', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '6ed5623aa69d2e1b7e3718315b1f225d6a22937e', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '366930f143f1f4e3fa76f7af9d1d97f7630cee49', class: "year-nav__current" }, this.currentYear), h("button", { key: '926fe9e7ae702c5f05818cf38d8ed40a05408fb4', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: 'ef62197919a3e54a8e225724f5f7a96544185298', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: 'bb0919c817685da0e2351474455dbce7f3d5d7f9', class: "month-nav" }, h("button", { key: '44c0fa106782d0cb108fb3baaaa80b1fb420107e', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '09d58c3bbfdf8e81612b1ff0e6c51cbae5c126a6', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '584aa3b2c28d1fc86b72dc8ebe1d078daee097dd', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '70985e1842a4a28f47a9cc9b02cace868997ec3d', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'ab80855e8828808d81a299ace7003b876454bd97', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '23f41a8b2a86e6564e301e835d16f07807c3bb70', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'b85483286fba4b1ebb3b7333162f6729fb8e058d', class: "sd-date-picker__body" }, [
+        return (h(Host, { key: 'ceaa6b5321f565e0560feb4218205925210d0967', class: "sd-date-picker" }, h("sd-input", { key: '1b5e1afcbad3daf40766977edd17077d9bc18200', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", onClick: () => this.openMenu() }, h("sd-icon", { key: 'd61cc0a28f65c77a80ebf216a259b66b17615054', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '2e41787708d795d727edf1d21398bc70e31f41e0', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '579adc1459a9fd6ee9313eec5a4d03b2a2e61222', class: "sd-date-picker__menu" }, h("div", { key: '5bae8978c6a4bb25f430f94d2c66927031a8e646', class: "sd-date-picker__header" }, h("div", { key: 'e4482baaa76c96740c2ff9eea4182b7bda59b974', class: "year-nav" }, h("button", { key: 'eb439c8147be7fe8d351c30e6b516db19ccbbc0d', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '7a685bd6c07cdd8eff0ac0c8e19c07f6c2d826dc', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'e19520fa7dd4a6f19ff30482a9291caa83471b41', class: "year-nav__current" }, this.currentYear), h("button", { key: '5ff3333f877ca6b7faddc4494d0c88747c29c714', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '2d02cf464f98aafc9a929414b88e77d0167983a5', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '6195fc68cb522b0368344057da580ff73dfe6efd', class: "month-nav" }, h("button", { key: 'c68a01bb06f8ac2276f678c916f41d52cc17fb69', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '12873470bf8ca8c1e834f7953429a3e77ca24c6d', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'fb0db178bc0dc078f532ca955d6007fbccabb97d', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'd4871fe7e7328b060bdf9f2b56153e81d9c6a5b5', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'cf8467b63261012751ca0abafde6846eb397f13f', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: 'a5d9cacac573f545b1fe1c321d5971d50db6e957', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'dc2769b821cda06b29c6f45ac2363a2df7a32d04', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

package/dist/components/sd-date-picker.js.map

@@ -1 +1 @@
-{"file":"sd-date-picker.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,s2DAAs2D;;MCSj3DA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;;IAGhB,IAAI,GAAkB,IAAI;AAC1B,IAAA,KAAK;AACL,IAAA,UAAU;IACV,QAAQ,GAAY,KAAK;IAExB,MAAM,GAAY,KAAK;IACvB,WAAW,GAAkB,IAAI;AACjC,IAAA,WAAW;AACX,IAAA,YAAY;AAEZ,IAAA,QAAQ;IAEjB,iBAAiB,GAAA;QAChB,IAAI,CAAC,WAAW,EAAE;;IAGX,QAAQ,GAAG,aAAa,EAAE;AAC1B,IAAA,OAAO;IAEP,WAAW,GAAA;AAClB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,KAAK;AAC/B,QAAA,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC;AACjD,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,QAAA,IAAI,CAAC,YAAY,GAAG,KAAK;AACzB,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI;;IAGrB,QAAQ,GAAA;QACf,IAAI,IAAI,CAAC,QAAQ;YAAE;QAEnB,IAAI,CAAC,WAAW,EAAE;AAClB,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI;;AAGnB,IAAA,IAAY,QAAQ,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC;;AAGjE,IAAA,cAAc,CAAC,IAAY,EAAA;AAClC,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;;AAGhB,IAAA,eAAe,CAAC,KAAa,EAAA;AACpC,QAAA,IAAI,CAAC,YAAY,GAAG,KAAK;;AAGlB,IAAA,cAAc,CAAC,IAAmB,EAAA;AACzC,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;;AAGhB,IAAA,iBAAiB,CAAC,IAAqB,EAAA;QAC9C,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,kBAAkB,CAC7D,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,YAAY,EACjB,IAAI,CACJ;AACD,QAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC;AAC5B,QAAA,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC;;AAGvB,IAAA,eAAe,CAAC,GAAW,EAAA;AAClC,QAAA,IAAI,CAAC,GAAG;YAAE;AAEV,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,CAAC;AAC/E,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;AACzB,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;QACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC;;AAGnB,IAAA,cAAc,CAAC,IAAY,EAAA;QAClC,IAAI,CAAC,IAAI,CAAC,UAAU;AAAE,YAAA,OAAO,KAAK;QAElC,MAAM,CAAC,eAAe,EAAE,aAAa,CAAC,GAAG,IAAI,CAAC,UAAU;AAExD,QAAA,IAAI,eAAe,IAAI,aAAa,EAAE;AACrC,YAAA,OAAO,IAAI,GAAG,eAAe,IAAI,IAAI,GAAG,aAAa;;QAGtD,IAAI,eAAe,EAAE;YACpB,OAAO,IAAI,GAAG,eAAe;;QAG9B,IAAI,aAAa,EAAE;YAClB,OAAO,IAAI,GAAG,aAAa;;AAG5B,QAAA,OAAO,KAAK;;IAGL,WAAW,GAAG,MAAK;AAC1B,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACpB,KAAC;IAED,MAAM,GAAA;AACL,QAAA,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAC3B,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAA4B,CAAC,EACxD,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EAEjB,cAAA,EAAA,IAAA,EAAA,QAAQ,QACR,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAC,aAAa,EACxB,UAAU,EAAE;AACX,gBAAA,MAAM,EAAE,WAAW;aACnB,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,EAAA,EAE9B,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,SAAS,EACf,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,GACpB,CACD,EAEV,IAAI,CAAC,MAAM,KACX,kEAAW,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,EAAA,EACjF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAChC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EAElC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAAA,EACpB,CACC,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,EAAA,EAExD,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CAC9C,EACT,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,WAAW,CAAQ,EACzD,CACC,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,EAAA,EAExD,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CAC/C,CACJ,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACrB,CACC,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,YAAY,EACjB,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAA,EAE7C,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CAC9C,EACT,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAAE,IAAI,CAAC,YAAY,EAAS,QAAA,CAAA,EAC5D,CACC,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,YAAY,EACjB,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAA,EAE7C,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAG,CAAA,CAC/C,CACJ,CACD,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,sBAAsB,IAC/B,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,KAC3C,CAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,KAAK,EAAA,EACxB,GAAG,CACC,CACN,CAAC,CACG,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAC/B,EAAA;AACA,YAAA,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa;AAC9B,YAAA,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI;AACrB,YAAA,GAAG,IAAI,CAAC,QAAQ,CAAC,cAAc;AAC/B,SAAA,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,KAAI;YAClB,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,CAC7C,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,YAAY,EACjB,MAAM,CAAC,GAAG,CAAC,CACX;AAED,YAAA,QACC,CAAA,CAAA,aAAA,EAAA,EACC,GAAG,EAAE,CAAA,EAAG,GAAG,CAAI,CAAA,EAAA,GAAG,CAAE,CAAA,EACpB,IAAI,EAAE,CAAC,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC,GAAG,CAAC,EAC7B,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,aAAa,EAC5C,OAAO,EAAE,KAAK,KAAK,aAAa,EAChC,QAAQ,EAAE,CAAC,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,EAC1D,OAAO,EACN,CAAC,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,IAAI;AACtC,sBAAE,MAAM,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,CAAC;AACxC,sBAAE,SAAS,EAEZ,CAAA;AAEJ,SAAC,CAAC,CACG,CACD,CACK,CACZ,CACK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SdDatePicker","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-date-picker/sd-date-picker.scss?tag=sd-date-picker&encapsulation=scoped","src/components/sd-date-picker/sd-date-picker.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n:host {\r\n &.sd-date-picker {\r\n  width: 160px;\r\n  display: inline-block;\r\n }\r\n}\r\n\r\n.sd-date-picker__menu {\r\n width: 304px;\r\n box-sizing: border-box;\r\n border-radius: 8px;\r\n padding: 24px 19px;\r\n box-shadow: 2px 2px 12px 2px #00000033;\r\n background: white;\r\n\r\n .sd-date-picker__header {\r\n  display: flex;\r\n  flex-flow: row nowrap;\r\n  align-items: center;\r\n  gap: 20px;\r\n  font-size: 14px;\r\n  padding: 0 5px;\r\n  height: 24px;\r\n  line-height: 24px;\r\n\r\n  .year-nav,\r\n  .month-nav {\r\n   display: flex;\r\n   flex-flow: row nowrap;\r\n   align-items: center;\r\n   gap: 12px;\r\n\r\n   button {\r\n    background: none;\r\n    border: none;\r\n    cursor: pointer;\r\n    margin: 0;\r\n    padding: 0;\r\n   }\r\n  }\r\n\r\n  .year-nav {\r\n   &__current {\r\n    width: 40px;\r\n    text-align: center;\r\n   }\r\n  }\r\n\r\n  .month-nav {\r\n   &__current {\r\n    width: 100px;\r\n    text-align: center;\r\n   }\r\n  }\r\n }\r\n .sd-date-picker__days {\r\n  margin-top: 8px;\r\n  display: grid;\r\n  grid-template-columns: repeat(7, minmax(0, 1fr));\r\n  column-gap: 10px;\r\n  padding: 0 5px;\r\n\r\n  .day {\r\n   width: 28px;\r\n   height: 20px;\r\n   font-size: 12px;\r\n   line-height: 20px;\r\n   text-align: center;\r\n   color: $grey_65;\r\n  }\r\n }\r\n .sd-date-picker__body {\r\n  margin-top: 12px;\r\n  display: grid;\r\n  grid-template-columns: repeat(7, minmax(0, 1fr));\r\n }\r\n}\r\n","import { Component, Element, Prop, State, Event, h, EventEmitter, Host } from '@stencil/core';\r\nimport { useDatePicker } from '../../modules/useDatePicker';\r\nimport { today } from '../../utils/date';\r\n\r\n@Component({\r\n tag: 'sd-date-picker',\r\n styleUrl: 'sd-date-picker.scss',\r\n scoped: true,\r\n})\r\nexport class SdDatePicker {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() date: string | null = null;\r\n @Prop() label?: string;\r\n @Prop() selectable?: [string, string];\r\n @Prop() disabled: boolean = false;\r\n\r\n @State() isOpen: boolean = false;\r\n @State() currentDate: string | null = null;\r\n @State() currentYear!: number;\r\n @State() currentMonth!: number;\r\n\r\n @Event() sdChange!: EventEmitter<string | null>;\r\n\r\n componentWillLoad() {\r\n  this.setCalendar();\r\n }\r\n\r\n private dateUtil = useDatePicker();\r\n private inputEl?: HTMLElement;\r\n\r\n private setCalendar() {\r\n  const base = this.date || today;\r\n  const [year, month] = base.split('-').map(Number);\r\n  this.currentYear = year;\r\n  this.currentMonth = month;\r\n  this.currentDate = this.date;\r\n }\r\n\r\n private openMenu() {\r\n  if (this.disabled) return;\r\n\r\n  this.setCalendar();\r\n  this.isOpen = true;\r\n }\r\n\r\n private get calendar() {\r\n  return this.dateUtil.createCalendar(this.currentYear, this.currentMonth);\r\n }\r\n\r\n private setCurrentYear(year: number) {\r\n  this.currentYear = year;\r\n }\r\n\r\n private setCurrentMonth(month: number) {\r\n  this.currentMonth = month;\r\n }\r\n\r\n private setCurrentDate(date: string | null) {\r\n  this.currentDate = date;\r\n }\r\n\r\n private handleUpdateMonth(type: 'prev' | 'next') {\r\n  const { newYear, newMonth } = this.dateUtil.calculateYearMonth(\r\n   this.currentYear,\r\n   this.currentMonth,\r\n   type,\r\n  );\r\n  this.setCurrentYear(newYear);\r\n  this.setCurrentMonth(newMonth);\r\n }\r\n\r\n private handleDateClick(day: number) {\r\n  if (!day) return;\r\n\r\n  const date = this.dateUtil.formatDate(this.currentYear, this.currentMonth, day);\r\n  this.setCurrentDate(date);\r\n  this.isOpen = false;\r\n  this.sdChange.emit?.(date);\r\n }\r\n\r\n private isDisabledDate(date: string): boolean {\r\n  if (!this.selectable) return false;\r\n\r\n  const [startSelectable, endSelectable] = this.selectable;\r\n\r\n  if (startSelectable && endSelectable) {\r\n   return date < startSelectable || date > endSelectable;\r\n  }\r\n\r\n  if (startSelectable) {\r\n   return date < startSelectable;\r\n  }\r\n\r\n  if (endSelectable) {\r\n   return date > endSelectable;\r\n  }\r\n\r\n  return false;\r\n }\r\n\r\n private handleClose = () => {\r\n  this.isOpen = false;\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Host class=\"sd-date-picker\">\r\n    <sd-input\r\n     ref={el => (this.inputEl = el as unknown as HTMLElement)}\r\n     value={this.date}\r\n     label={this.label}\r\n     inside-label\r\n     readonly\r\n     disabled={this.disabled}\r\n     inputClass=\"text-center\"\r\n     inputStyle={{\r\n      margin: '0 0 0 8px',\r\n     }}\r\n     onClick={() => this.openMenu()}\r\n    >\r\n     <sd-icon\r\n      slot=\"prefix\"\r\n      name=\"date\"\r\n      size=\"16\"\r\n      color=\"#737373\"\r\n      class=\"date-icon\"\r\n      onClick={() => this.openMenu()}\r\n     ></sd-icon>\r\n    </sd-input>\r\n\r\n    {this.isOpen && (\r\n     <sd-portal open={this.isOpen} parentRef={this.inputEl} onSdClose={this.handleClose}>\r\n      <div class=\"sd-date-picker__menu\">\r\n       <div class=\"sd-date-picker__header\">\r\n        {/* Year Navigation */}\r\n        <div class=\"year-nav\">\r\n         <button\r\n          type=\"button\"\r\n          name=\"prev-year\"\r\n          title=\"Previous Year\"\r\n          onClick={() => this.setCurrentYear(this.currentYear - 1)}\r\n         >\r\n          <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n         <span class=\"year-nav__current\">{this.currentYear}</span>\r\n         <button\r\n          type=\"button\"\r\n          name=\"next-year\"\r\n          title=\"Next Year\"\r\n          onClick={() => this.setCurrentYear(this.currentYear + 1)}\r\n         >\r\n          <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n        </div>\r\n\r\n        {/* Month Navigation */}\r\n        <div class=\"month-nav\">\r\n         <button\r\n          type=\"button\"\r\n          name=\"prev-month\"\r\n          title=\"Previous       \"\r\n          onClick={() => this.handleUpdateMonth('prev')}\r\n         >\r\n          <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n         <span class=\"month-nav__current\">{this.currentMonth}월</span>\r\n         <button\r\n          type=\"button\"\r\n          name=\"next-month\"\r\n          title=\"Next Month\"\r\n          onClick={() => this.handleUpdateMonth('next')}\r\n         >\r\n          <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n        </div>\r\n       </div>\r\n\r\n       <div class=\"sd-date-picker__days\">\r\n        {['일', '월', '화', '수', '목', '금', '토'].map(day => (\r\n         <div key={day} class=\"day\">\r\n          {day}\r\n         </div>\r\n        ))}\r\n       </div>\r\n\r\n       <div class=\"sd-date-picker__body\">\r\n        {[\r\n         ...this.calendar.prevMonthDays,\r\n         ...this.calendar.days,\r\n         ...this.calendar.afterMonthDays,\r\n        ].map((day, idx) => {\r\n         const formattedDate = this.dateUtil.formatDate(\r\n          this.currentYear,\r\n          this.currentMonth,\r\n          Number(day),\r\n         );\r\n\r\n         return (\r\n          <sd-date-box\r\n           key={`${day}_${idx}`}\r\n           date={!day ? '' : Number(day)}\r\n           selected={this.currentDate === formattedDate}\r\n           isToday={today === formattedDate}\r\n           disabled={!day ? true : this.isDisabledDate(formattedDate)}\r\n           onClick={\r\n            !this.isDisabledDate(formattedDate) && day\r\n             ? () => this.handleDateClick(Number(day))\r\n             : undefined\r\n           }\r\n          />\r\n         );\r\n        })}\r\n       </div>\r\n      </div>\r\n     </sd-portal>\r\n    )}\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"version":3}
+{"file":"sd-date-picker.js","mappings":"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","names":["SdDatePicker","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-date-picker/sd-date-picker.scss?tag=sd-date-picker&encapsulation=scoped","src/components/sd-date-picker/sd-date-picker.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n:host {\r\n &.sd-date-picker {\r\n  width: 160px;\r\n  display: inline-block;\r\n }\r\n}\r\n\r\n.sd-date-picker__menu {\r\n width: 304px;\r\n box-sizing: border-box;\r\n border-radius: 8px;\r\n padding: 24px 19px;\r\n box-shadow: 2px 2px 12px 2px #00000033;\r\n background: white;\r\n\r\n .sd-date-picker__header {\r\n  display: flex;\r\n  flex-flow: row nowrap;\r\n  align-items: center;\r\n  gap: 20px;\r\n  font-size: 14px;\r\n  padding: 0 5px;\r\n  height: 24px;\r\n  line-height: 24px;\r\n\r\n  .year-nav,\r\n  .month-nav {\r\n   display: flex;\r\n   flex-flow: row nowrap;\r\n   align-items: center;\r\n   gap: 12px;\r\n\r\n   button {\r\n    background: none;\r\n    border: none;\r\n    cursor: pointer;\r\n    margin: 0;\r\n    padding: 0;\r\n   }\r\n  }\r\n\r\n  .year-nav {\r\n   &__current {\r\n    width: 40px;\r\n    text-align: center;\r\n   }\r\n  }\r\n\r\n  .month-nav {\r\n   &__current {\r\n    width: 100px;\r\n    text-align: center;\r\n   }\r\n  }\r\n }\r\n .sd-date-picker__days {\r\n  margin-top: 8px;\r\n  display: grid;\r\n  grid-template-columns: repeat(7, minmax(0, 1fr));\r\n  column-gap: 10px;\r\n  padding: 0 5px;\r\n\r\n  .day {\r\n   width: 28px;\r\n   height: 20px;\r\n   font-size: 12px;\r\n   line-height: 20px;\r\n   text-align: center;\r\n   color: $grey_65;\r\n  }\r\n }\r\n .sd-date-picker__body {\r\n  margin-top: 12px;\r\n  display: grid;\r\n  grid-template-columns: repeat(7, minmax(0, 1fr));\r\n }\r\n}\r\n","import { Component, Element, Prop, State, Event, h, EventEmitter, Host } from '@stencil/core';\r\nimport { useDatePicker } from '../../modules/useDatePicker';\r\nimport { today } from '../../utils/date';\r\n\r\n@Component({\r\n tag: 'sd-date-picker',\r\n styleUrl: 'sd-date-picker.scss',\r\n scoped: true,\r\n})\r\nexport class SdDatePicker {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() date: string | null = null;\r\n @Prop() label?: string;\r\n @Prop() selectable?: [string, string];\r\n @Prop() disabled: boolean = false;\r\n\r\n @State() isOpen: boolean = false;\r\n @State() currentDate: string | null = null;\r\n @State() currentYear!: number;\r\n @State() currentMonth!: number;\r\n\r\n @Event() sdChange!: EventEmitter<string | null>;\r\n\r\n componentWillLoad() {\r\n  this.setCalendar();\r\n }\r\n\r\n private dateUtil = useDatePicker();\r\n private inputEl?: HTMLElement;\r\n\r\n private setCalendar() {\r\n  const base = this.date || today;\r\n  const [year, month] = base.split('-').map(Number);\r\n  this.currentYear = year;\r\n  this.currentMonth = month;\r\n  this.currentDate = this.date;\r\n }\r\n\r\n private openMenu() {\r\n  if (this.disabled) return;\r\n\r\n  this.setCalendar();\r\n  this.isOpen = true;\r\n }\r\n\r\n private get calendar() {\r\n  return this.dateUtil.createCalendar(this.currentYear, this.currentMonth);\r\n }\r\n\r\n private setCurrentYear(year: number) {\r\n  this.currentYear = year;\r\n }\r\n\r\n private setCurrentMonth(month: number) {\r\n  this.currentMonth = month;\r\n }\r\n\r\n private setCurrentDate(date: string | null) {\r\n  this.currentDate = date;\r\n }\r\n\r\n private handleUpdateMonth(type: 'prev' | 'next') {\r\n  const { newYear, newMonth } = this.dateUtil.calculateYearMonth(\r\n   this.currentYear,\r\n   this.currentMonth,\r\n   type,\r\n  );\r\n  this.setCurrentYear(newYear);\r\n  this.setCurrentMonth(newMonth);\r\n }\r\n\r\n private handleDateClick(day: number) {\r\n  if (!day) return;\r\n\r\n  const date = this.dateUtil.formatDate(this.currentYear, this.currentMonth, day);\r\n  this.setCurrentDate(date);\r\n  this.isOpen = false;\r\n  this.sdChange.emit?.(date);\r\n }\r\n\r\n private isDisabledDate(date: string): boolean {\r\n  if (!this.selectable) return false;\r\n\r\n  const [startSelectable, endSelectable] = this.selectable;\r\n\r\n  if (startSelectable && endSelectable) {\r\n   return date < startSelectable || date > endSelectable;\r\n  }\r\n\r\n  if (startSelectable) {\r\n   return date < startSelectable;\r\n  }\r\n\r\n  if (endSelectable) {\r\n   return date > endSelectable;\r\n  }\r\n\r\n  return false;\r\n }\r\n\r\n private handleClose = () => {\r\n  this.isOpen = false;\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Host class=\"sd-date-picker\">\r\n    <sd-input\r\n     ref={el => (this.inputEl = el as unknown as HTMLElement)}\r\n     value={this.date}\r\n     label={this.label}\r\n     inside-label\r\n     readonly\r\n     disabled={this.disabled}\r\n     inputClass=\"text-center\"\r\n     onClick={() => this.openMenu()}\r\n    >\r\n     <sd-icon\r\n      slot=\"prefix\"\r\n      name=\"date\"\r\n      size=\"16\"\r\n      color=\"#737373\"\r\n      class=\"date-icon\"\r\n      onClick={() => this.openMenu()}\r\n     ></sd-icon>\r\n    </sd-input>\r\n\r\n    {this.isOpen && (\r\n     <sd-portal open={this.isOpen} parentRef={this.inputEl} onSdClose={this.handleClose}>\r\n      <div class=\"sd-date-picker__menu\">\r\n       <div class=\"sd-date-picker__header\">\r\n        {/* Year Navigation */}\r\n        <div class=\"year-nav\">\r\n         <button\r\n          type=\"button\"\r\n          name=\"prev-year\"\r\n          title=\"Previous Year\"\r\n          onClick={() => this.setCurrentYear(this.currentYear - 1)}\r\n         >\r\n          <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n         <span class=\"year-nav__current\">{this.currentYear}</span>\r\n         <button\r\n          type=\"button\"\r\n          name=\"next-year\"\r\n          title=\"Next Year\"\r\n          onClick={() => this.setCurrentYear(this.currentYear + 1)}\r\n         >\r\n          <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n        </div>\r\n\r\n        {/* Month Navigation */}\r\n        <div class=\"month-nav\">\r\n         <button\r\n          type=\"button\"\r\n          name=\"prev-month\"\r\n          title=\"Previous       \"\r\n          onClick={() => this.handleUpdateMonth('prev')}\r\n         >\r\n          <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n         <span class=\"month-nav__current\">{this.currentMonth}월</span>\r\n         <button\r\n          type=\"button\"\r\n          name=\"next-month\"\r\n          title=\"Next Month\"\r\n          onClick={() => this.handleUpdateMonth('next')}\r\n         >\r\n          <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n         </button>\r\n        </div>\r\n       </div>\r\n\r\n       <div class=\"sd-date-picker__days\">\r\n        {['일', '월', '화', '수', '목', '금', '토'].map(day => (\r\n         <div key={day} class=\"day\">\r\n          {day}\r\n         </div>\r\n        ))}\r\n       </div>\r\n\r\n       <div class=\"sd-date-picker__body\">\r\n        {[\r\n         ...this.calendar.prevMonthDays,\r\n         ...this.calendar.days,\r\n         ...this.calendar.afterMonthDays,\r\n        ].map((day, idx) => {\r\n         const formattedDate = this.dateUtil.formatDate(\r\n          this.currentYear,\r\n          this.currentMonth,\r\n          Number(day),\r\n         );\r\n\r\n         return (\r\n          <sd-date-box\r\n           key={`${day}_${idx}`}\r\n           date={!day ? '' : Number(day)}\r\n           selected={this.currentDate === formattedDate}\r\n           isToday={today === formattedDate}\r\n           disabled={!day ? true : this.isDisabledDate(formattedDate)}\r\n           onClick={\r\n            !this.isDisabledDate(formattedDate) && day\r\n             ? () => this.handleDateClick(Number(day))\r\n             : undefined\r\n           }\r\n          />\r\n         );\r\n        })}\r\n       </div>\r\n      </div>\r\n     </sd-portal>\r\n    )}\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/sd-popover.js

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h, F as Fragment } from './p-CbnL1UUF.js';
 import { T as TooltipArrow } from './p-wA4KCOG0.js';
 import { d as defineCustomElement$4 } from './p-CXuU0Q0J.js';
 import { d as defineCustomElement$3 } from './p-DdLgl05o.js';
-import { d as defineCustomElement$2 } from './p-CO0qaUid.js';
+import { d as defineCustomElement$2 } from './p-4n8y_ubX.js';
 
 const sdPopoverCss = ".sd-popover{position:relative;cursor:pointer;display:inline-block}";
 

package/dist/components/sd-table-backup.js

@@ -8,8 +8,8 @@ import { d as defineCustomElement$7 } from './p-DEpODYm6.js';
 import { d as defineCustomElement$6 } from './p-DkdbagIN.js';
 import { d as defineCustomElement$5 } from './p-zBDALS_T.js';
 import { d as defineCustomElement$4 } from './p-CgMn3XX-.js';
-import { d as defineCustomElement$3 } from './p-BiFL1Pnf.js';
-import { d as defineCustomElement$2 } from './p-CO0qaUid.js';
+import { d as defineCustomElement$3 } from './p-C5VIAyqc.js';
+import { d as defineCustomElement$2 } from './p-4n8y_ubX.js';
 
 const sdTableBackupCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:var(--table-height, auto);position:relative;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden;background:#ffffff}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position}.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable{height:var(--table-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--loading{overflow:hidden !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:\"\";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:\"\";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody .sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;min-height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__container .sd-table__bottom .sd-table__no-data{padding-top:15%;color:#888888}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}";
 

package/dist/components/sd-table.js

@@ -9,8 +9,8 @@ import { d as defineCustomElement$8 } from './p-zBDALS_T.js';
 import { d as defineCustomElement$7 } from './p-CgMn3XX-.js';
 import { d as defineCustomElement$6 } from './p-D1PUeI-N.js';
 import { d as defineCustomElement$5 } from './p-CgvMD0f4.js';
-import { d as defineCustomElement$4 } from './p-BiFL1Pnf.js';
-import { d as defineCustomElement$3 } from './p-CO0qaUid.js';
+import { d as defineCustomElement$4 } from './p-C5VIAyqc.js';
+import { d as defineCustomElement$3 } from './p-4n8y_ubX.js';
 import { d as defineCustomElement$2 } from './p-vpG6iign.js';
 
 const sdTableCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:auto;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;height:var(--table-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:\"\";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:\"\";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody .sd-table__loading{position:absolute;top:0;left:0;width:100%;height:calc(var(--table-height, auto) - 36px);min-height:calc(100% - 36px);background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr:last-of-type sd-td{border-bottom:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}";

package/dist/components/sd-tooltip-portal.js

@@ -1,4 +1,4 @@
-import { S as SdTooltipPortal$1, d as defineCustomElement$1 } from './p-CO0qaUid.js';
+import { S as SdTooltipPortal$1, d as defineCustomElement$1 } from './p-4n8y_ubX.js';
 
 const SdTooltipPortal = SdTooltipPortal$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-tooltip.js

@@ -1,4 +1,4 @@
-import { S as SdTooltip$1, d as defineCustomElement$1 } from './p-BiFL1Pnf.js';
+import { S as SdTooltip$1, d as defineCustomElement$1 } from './p-C5VIAyqc.js';
 
 const SdTooltip = SdTooltip$1;
 const defineCustomElement = defineCustomElement$1;