npm - @sellmate/design-system - Versions diffs - 0.0.52 → 0.0.54 - Mend

@sellmate/design-system 0.0.52 → 0.0.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (361) hide show

package/dist/cjs/sd-card.entry.cjs.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"sd-card.entry.cjs.js","sources":["src/components/sd-card/sd-card.scss?tag=sd-card","src/components/sd-card/sd-card.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-card {\r\n display: block;\r\n height: fit-content;\r\n\r\n .sd-card {\r\n border-radius: 8px;\r\n background: white;\r\n\r\n &.sd-card--bordered {\r\n border: 1px solid $grey_30;\r\n }\r\n }\r\n}\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-card',\r\n styleUrl: 'sd-card.scss',\r\n})\r\nexport class SdCard {\r\n @Prop() bordered: boolean = true;\r\n @Prop() class: string = '';\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class={`sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}`}>\r\n <slot></slot>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,2JAA2J;;MCMhK,MAAM,GAAA,MAAA;;;;IACV,QAAQ,GAAY,IAAI;IACxB,KAAK,GAAW,EAAE;IAE1B,MAAM,GAAA;QACL,QACCA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,QAAA,EAAW,IAAI,CAAC,QAAQ,GAAG,mBAAmB,GAAG,EAAE,IAAI,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAC9EA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR,CACA;;;;;;;"}

package/dist/cjs/sd-date-box.entry.cjs.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"sd-date-box.entry.cjs.js","sources":["src/components/sd-date-box/sd-date-box.scss?tag=sd-date-box&encapsulation=scoped","src/components/sd-date-box/sd-date-box.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n:host(.sd-date-box) {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 38px;\r\n height: 36px;\r\n font-size: 14px;\r\n position: relative;\r\n box-sizing: border-box;\r\n text-align: center;\r\n transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);\r\n border-radius: 14px;\r\n\r\n .sd-date-box__content {\r\n width: 28px;\r\n height: 28px;\r\n border-radius: 14px;\r\n position: relative;\r\n .sd-date-box__label {\r\n position: relative;\r\n z-index: 2;\r\n user-select: none;\r\n line-height: 28px;\r\n }\r\n }\r\n\r\n &.sd-date-box--disabled {\r\n color: $grey_45;\r\n cursor: default !important;\r\n pointer-events: none;\r\n }\r\n\r\n &:not(.sd-date-box--disabled) {\r\n cursor: pointer;\r\n }\r\n\r\n &.sd-hoverable {\r\n &:hover {\r\n .sd-date-box__content {\r\n background: $brilliantblue_25;\r\n }\r\n }\r\n }\r\n\r\n &.sd-date-box--in-range {\r\n &:not(.sd-date-box--disabled) {\r\n .sd-date-box__content {\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -5px;\r\n width: calc(100% + 10px);\r\n height: 100%;\r\n background: $brilliantblue_25;\r\n }\r\n }\r\n }\r\n\r\n &.sd-date-box--type-start {\r\n .sd-date-box__content {\r\n &::before {\r\n left: auto !important;\r\n width: 19px !important;\r\n right: -5px;\r\n }\r\n }\r\n }\r\n\r\n &.sd-date-box--type-end {\r\n .sd-date-box__content {\r\n &::before {\r\n width: 19px !important;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.sd-date-box--selected,\r\n &.sd-date-box--type-start,\r\n &.sd-date-box--type-end {\r\n .sd-date-box__content {\r\n &::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: $brilliantblue_75;\r\n border-radius: 14px;\r\n z-index: 1;\r\n }\r\n\r\n .sd-date-box__label {\r\n color: white;\r\n font-weight: 700;\r\n }\r\n }\r\n }\r\n\r\n &.sd-date-box--today:not(.sd-date-box--selected) {\r\n .sd-date-box__content {\r\n &::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 28px;\r\n height: 28px;\r\n border: 1px solid $grey_30 !important;\r\n border-radius: 14px;\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\r\n\r\nexport type Type = 'start' | 'end' | '';\r\n\r\n@Component({\r\n tag: 'sd-date-box',\r\n styleUrl: 'sd-date-box.scss',\r\n scoped: true,\r\n})\r\nexport class SdDateBox {\r\n @Prop() date: number | string | null = null;\r\n @Prop() disabled: boolean = false;\r\n @Prop() selected: boolean = false;\r\n @Prop() isStartDate: boolean = false;\r\n @Prop() isEndDate: boolean = false;\r\n @Prop() isToday: boolean = false;\r\n @Prop() inRange: boolean = false;\r\n @Prop() type: Type = '';\r\n\r\n @Event() sdClick?: EventEmitter<number | string | null>;\r\n @Event() sdMouseOver?: EventEmitter<number | string | null>;\r\n\r\n private handleClickDate() {\r\n if (this.disabled) return;\r\n if (typeof this.date === 'string') return;\r\n\r\n this.sdClick?.emit(this.date);\r\n }\r\n\r\n private handleHoverDate() {\r\n if (typeof this.date === 'string') return;\r\n\r\n this.sdMouseOver?.emit(this.date);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n role=\"button\"\r\n aria-disabled={this.disabled ? 'true' : 'false'}\r\n tabindex={this.disabled ? -1 : 0}\r\n class={{\r\n 'sd-date-box': true,\r\n 'sd-hoverable': !this.disabled || !this.selected || this.type === '',\r\n 'sd-date-box--disabled': this.disabled,\r\n 'sd-date-box--selected': this.selected,\r\n 'sd-date-box--today': this.isToday,\r\n 'sd-date-box--start-date': this.isStartDate,\r\n 'sd-date-box--end-date': this.isEndDate,\r\n 'sd-date-box--in-range': this.inRange,\r\n 'sd-date-box--type-start': this.type === 'start',\r\n 'sd-date-box--type-end': this.type === 'end',\r\n }}\r\n onClick={() => this.handleClickDate()}\r\n onMouseOver={() => this.handleHoverDate()}\r\n >\r\n <div class=\"sd-date-box__content\">\r\n <div class=\"sd-date-box__label\">{this.date}</div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,w4EAAw4E;;MCSh5E,SAAS,GAAA,MAAA;;;;;;IACb,IAAI,GAA2B,IAAI;IACnC,QAAQ,GAAY,KAAK;IACzB,QAAQ,GAAY,KAAK;IACzB,WAAW,GAAY,KAAK;IAC5B,SAAS,GAAY,KAAK;IAC1B,OAAO,GAAY,KAAK;IACxB,OAAO,GAAY,KAAK;IACxB,IAAI,GAAS,EAAE;AAEd,IAAA,OAAO;AACP,IAAA,WAAW;IAEZ,eAAe,GAAA;QACtB,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;YAAE;QAEnC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGtB,eAAe,GAAA;AACtB,QAAA,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;YAAE;QAEnC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGlC,MAAM,GAAA;QACL,QACCA,OAAC,CAAAC,UAAI,EACJ,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,eAAA,EACE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,KAAK,EAAE;AACN,gBAAA,aAAa,EAAE,IAAI;AACnB,gBAAA,cAAc,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;gBACpE,uBAAuB,EAAE,IAAI,CAAC,QAAQ;gBACtC,uBAAuB,EAAE,IAAI,CAAC,QAAQ;gBACtC,oBAAoB,EAAE,IAAI,CAAC,OAAO;gBAClC,yBAAyB,EAAE,IAAI,CAAC,WAAW;gBAC3C,uBAAuB,EAAE,IAAI,CAAC,SAAS;gBACvC,uBAAuB,EAAE,IAAI,CAAC,OAAO;AACrC,gBAAA,yBAAyB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AAChD,gBAAA,uBAAuB,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;aAC5C,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,EACrC,WAAW,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,EAAA,EAEzCD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAChCA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,CAC5C,CACA;;;;;;;"}

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

@@ -1 +0,0 @@

- {"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/cjs/sd-date-range-picker.entry.cjs.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"sd-date-range-picker.entry.cjs.js","sources":["src/utils/date/addDays.ts","src/components/sd-date-range-picker/sd-date-range-picker.scss?tag=sd-date-range-picker&encapsulation=scoped","src/components/sd-date-range-picker/sd-date-range-picker.tsx"],"sourcesContent":["export const addDays = (inputDate: string, days: number) => {\r\n const [year, month, day] = inputDate.split('-').map(Number);\r\n const date = new Date(year, month - 1, day); // month는 0부터 시작하므로 -1\r\n\r\n // 날짜 계산\r\n date.setDate(date.getDate() + days);\r\n\r\n // yyyy-mm-dd 형식으로 변환\r\n const resultYear = date.getFullYear();\r\n const resultMonth = String(date.getMonth() + 1).padStart(2, '0');\r\n const resultDay = String(date.getDate()).padStart(2, '0');\r\n\r\n return `${resultYear}-${resultMonth}-${resultDay}`;\r\n};\r\n","@import 'variables';\r\n\r\n:host {\r\n &.sd-date-range-picker {\r\n width: 210px;\r\n display: inline-block;\r\n }\r\n}\r\n\r\n.sd-date-range-picker__menu {\r\n width: 609px;\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-range-picker__header {\r\n margin-bottom: 16px;\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n .header-label {\r\n margin: 0 12px;\r\n width: 40px;\r\n text-align: center;\r\n font-size: 14px;\r\n line-height: 24px;\r\n }\r\n }\r\n .sd-date-range-picker__body {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: stretch;\r\n gap: 19px;\r\n .calendar-container {\r\n width: 266px;\r\n\r\n .calendar-header {\r\n width: 100%;\r\n height: 24px;\r\n line-height: 24px;\r\n font-size: 14px;\r\n text-align: center;\r\n position: relative;\r\n padding: 0 5px;\r\n\r\n button {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n\r\n &.header-button-prev {\r\n left: 5px;\r\n }\r\n\r\n &.header-button-next {\r\n right: 5px;\r\n left: auto;\r\n }\r\n }\r\n }\r\n\r\n .calendar-days {\r\n padding: 0 5px;\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\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\r\n .calendar-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 .separator {\r\n width: 1px;\r\n background-color: $grey_35;\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Prop,\r\n State,\r\n Event,\r\n h,\r\n EventEmitter,\r\n Host,\r\n Fragment,\r\n} from '@stencil/core';\r\nimport { useDatePicker } from '../../modules/useDatePicker';\r\nimport { addDays, today } from '../../utils/date';\r\nimport { Type } from '../sd-date-box/sd-date-box';\r\n\r\n@Component({\r\n tag: 'sd-date-range-picker',\r\n styleUrl: 'sd-date-range-picker.scss',\r\n scoped: true,\r\n})\r\nexport class SdDateRangePicker {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() date: [string, string] = ['', ''];\r\n @Prop() label?: string;\r\n @Prop() selectable?: [string, string];\r\n @Prop() maxRange?: number;\r\n @Prop() disabled: boolean = false;\r\n\r\n @State() isOpen: boolean = false;\r\n @State() dateRange: [string, string] = this.date;\r\n @State() hoverDate: string = '';\r\n @State() prevYear: number = Number(this.dateRange[0].split('-')[0]);\r\n @State() prevMonth: number = Number(this.dateRange[0].split('-')[1]);\r\n\r\n @Event() sdChange!: EventEmitter<[string, string]>;\r\n\r\n private inputEl?: HTMLElement;\r\n private dateUtil = useDatePicker();\r\n private tempDateRange: [string, string] = ['', ''];\r\n\r\n componentWillLoad() {\r\n this.resetCalendarByDateRange();\r\n }\r\n\r\n private resetCalendarByDateRange() {\r\n this.dateRange = this.date;\r\n\r\n const start = this.dateRange[0] || today;\r\n const end = this.dateRange[1] || start;\r\n\r\n const [startYear, startMonth] = start.split('-').map(Number);\r\n const [todayYear, todayMonth] = today.split('-').map(Number);\r\n\r\n if (end <= today) {\r\n // A. 완전 과거 검색(당월 포함X): 좌측 = 시작월 / 우측 = 종료월\r\n this.prevYear = startYear;\r\n this.prevMonth = startMonth;\r\n } else if (start < today && end > today) {\r\n // B. 과거~미래 걸침(당월 포함O): 좌측 = 오늘의 달\r\n this.prevYear = todayYear;\r\n this.prevMonth = todayMonth;\r\n } else {\r\n // C. 완전 미래 검색(당월 포함X): 좌측 = 시작월\r\n this.prevYear = startYear;\r\n this.prevMonth = startMonth;\r\n }\r\n }\r\n\r\n private openMenu() {\r\n if (this.disabled) return;\r\n\r\n this.tempDateRange = [...this.dateRange];\r\n this.resetCalendarByDateRange();\r\n this.isOpen = true;\r\n }\r\n\r\n private get nextYear(): number {\r\n return this.prevMonth + 1 === 13 ? this.prevYear + 1 : this.prevYear;\r\n }\r\n\r\n private get nextMonth(): number {\r\n return this.prevMonth + 1 === 13 ? 1 : this.prevMonth + 1;\r\n }\r\n\r\n private get prevCalendar() {\r\n return this.dateUtil.createCalendar(this.prevYear, this.prevMonth);\r\n }\r\n\r\n private get nextCalendar() {\r\n return this.dateUtil.createCalendar(this.nextYear, this.nextMonth);\r\n }\r\n\r\n private getDateBoxType(date: string): Type {\r\n if (date === this.dateRange[0])\r\n return this.dateRange[1] ? 'start' : this.hoverDate < this.dateRange[0] ? 'end' : 'start';\r\n if (date === this.dateRange[1]) return 'end';\r\n return '';\r\n }\r\n\r\n private isDisabledDate(date: string): boolean {\r\n if (this.maxRange && this.dateRange[0] && !this.dateRange[1]) {\r\n const minDate = addDays(this.dateRange[0], -this.maxRange);\r\n const maxDate = addDays(this.dateRange[0], this.maxRange);\r\n return !(minDate <= date && date <= maxDate);\r\n }\r\n\r\n if (!this.selectable || !this.selectable[0] || !this.selectable[1]) {\r\n return false;\r\n }\r\n return !(date >= this.selectable[0] && date <= this.selectable[1]);\r\n }\r\n\r\n private isDateInRange(date: string): boolean {\r\n // 1. 날짜 범위가 완전히 선택된 경우\r\n if (this.dateRange[0] && this.dateRange[1]) {\r\n return date >= this.dateRange[0] && date <= this.dateRange[1];\r\n }\r\n\r\n // 2. hover 상태의 날짜 범위를 확인\r\n if (!this.hoverDate || !this.dateRange[0] || this.dateRange[1]) {\r\n return false;\r\n }\r\n\r\n // 3. dateRange[0]과 hoverDate를 기준으로 범위 계산\r\n const [start, end] =\r\n this.dateRange[0] <= this.hoverDate\r\n ? [this.dateRange[0], this.hoverDate]\r\n : [this.hoverDate, this.dateRange[0]];\r\n\r\n return date >= start && date <= end;\r\n }\r\n\r\n private setPrevYear(year: number) {\r\n this.prevYear = year;\r\n }\r\n\r\n private setPrevMonth(month: number) {\r\n this.prevMonth = month;\r\n }\r\n\r\n private updateYearMonth(type: 'prev' | 'next') {\r\n const { newYear, newMonth } = this.dateUtil.calculateYearMonth(\r\n this.prevYear,\r\n this.prevMonth,\r\n type,\r\n );\r\n\r\n this.setPrevYear(newYear);\r\n this.setPrevMonth(newMonth);\r\n }\r\n\r\n private setHoverDate(date: string) {\r\n this.hoverDate = date;\r\n }\r\n\r\n private setDateRange(dateRange: [string, string]) {\r\n this.dateRange = dateRange;\r\n }\r\n\r\n private handleDateClick(type: 'prev' | 'next', day: number) {\r\n this.setHoverDate('');\r\n\r\n const selectedDate =\r\n type === 'prev'\r\n ? this.dateUtil.formatDate(this.prevYear, this.prevMonth, day)\r\n : this.dateUtil.formatDate(this.nextYear, this.nextMonth, day);\r\n\r\n if (!this.dateRange[0] || !!this.dateRange[1] || selectedDate < this.dateRange[0]) {\r\n this.setDateRange([selectedDate, '']);\r\n return; // 아직 완료 아님\r\n }\r\n\r\n const newRange: [string, string] = [this.dateRange[0], selectedDate];\r\n this.setDateRange(newRange);\r\n this.sdChange.emit?.(newRange);\r\n }\r\n\r\n private handleDateHover(type: 'prev' | 'next', day: number) {\r\n const hoverDate =\r\n type === 'prev'\r\n ? this.dateUtil.formatDate(this.prevYear, this.prevMonth, day)\r\n : this.dateUtil.formatDate(this.nextYear, this.nextMonth, day);\r\n this.setHoverDate(hoverDate);\r\n }\r\n\r\n private handleClose = () => {\r\n if (!this.dateRange[0] || !this.dateRange[1]) {\r\n this.dateRange = [...this.tempDateRange];\r\n }\r\n\r\n this.isOpen = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <Host class=\"sd-date-range-picker\">\r\n <sd-input\r\n ref={el => (this.inputEl = el as unknown as HTMLElement)}\r\n value={`${this.dateRange[0]} ~ ${this.dateRange[1]}`}\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-range-picker__menu\">\r\n <div class=\"sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center\">\r\n <button\r\n type=\"button\"\r\n name=\"prev\"\r\n title=\"Previous\"\r\n onClick={() => this.setPrevYear(this.prevYear - 1)}\r\n >\r\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n\r\n <div class=\"header-label\">{this.prevYear}</div>\r\n\r\n <button\r\n type=\"button\"\r\n name=\"next\"\r\n title=\"Next\"\r\n onClick={() => this.setPrevYear(this.prevYear + 1)}\r\n >\r\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n </div>\r\n\r\n <div class=\"sd-date-range-picker__body\">\r\n {[this.prevCalendar, this.nextCalendar].map((calendar, index) => (\r\n <Fragment>\r\n {index === 1 && <div class=\"separator\"></div>}\r\n\r\n <div key={index} class=\"calendar-container\">\r\n <div class=\"calendar-header\">\r\n <button\r\n type=\"button\"\r\n name=\"month\"\r\n title=\"Month\"\r\n class={index === 0 ? 'header-button-prev' : 'header-button-next'}\r\n onClick={() => this.updateYearMonth(index === 0 ? 'prev' : 'next')}\r\n >\r\n <sd-icon name={index === 0 ? 'arrowLeft' : 'arrowRight'} size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n {index === 0\r\n ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`\r\n : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`}\r\n </div>\r\n\r\n <div class=\"calendar-days\">\r\n {['일', '월', '화', '수', '목', '금', '토'].map(day => (\r\n <sd-date-box key={day} date={day} disabled class=\"day\" />\r\n ))}\r\n </div>\r\n\r\n <div class=\"calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr\">\r\n {[...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map(\r\n (day, idx) => (\r\n <sd-date-box\r\n key={`prev${day}_${idx}`}\r\n date={!day ? '' : Number(day)}\r\n selected={this.dateRange.some(\r\n date =>\r\n date ===\r\n this.dateUtil.formatDate(\r\n index === 0 ? this.prevYear : this.nextYear,\r\n index === 0 ? this.prevMonth : this.nextMonth,\r\n Number(day),\r\n ),\r\n )}\r\n type={this.getDateBoxType(\r\n this.dateUtil.formatDate(\r\n index === 0 ? this.prevYear : this.nextYear,\r\n index === 0 ? this.prevMonth : this.nextMonth,\r\n Number(day),\r\n ),\r\n )}\r\n isToday={\r\n today ===\r\n this.dateUtil.formatDate(\r\n index === 0 ? this.prevYear : this.nextYear,\r\n index === 0 ? this.prevMonth : this.nextMonth,\r\n Number(day),\r\n )\r\n }\r\n disabled={\r\n !day\r\n ? true\r\n : this.isDisabledDate(\r\n this.dateUtil.formatDate(\r\n index === 0 ? this.prevYear : this.nextYear,\r\n index === 0 ? this.prevMonth : this.nextMonth,\r\n Number(day),\r\n ),\r\n )\r\n }\r\n inRange={this.isDateInRange(\r\n this.dateUtil.formatDate(\r\n index === 0 ? this.prevYear : this.nextYear,\r\n index === 0 ? this.prevMonth : this.nextMonth,\r\n Number(day),\r\n ),\r\n )}\r\n onClick={() => this.handleDateClick(index === 0 ? 'prev' : 'next', Number(day))}\r\n onMouseOver={() => this.handleDateHover(index === 0 ? 'prev' : 'next', Number(day))}\r\n />\r\n ),\r\n )}\r\n </div>\r\n </div>\r\n </Fragment>\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","index","Fragment"],"mappings":"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"}

package/dist/cjs/sd-modal-card.entry.cjs.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"sd-modal-card.entry.cjs.js","sources":["src/components/sd-modal-card/sd-modal-card.scss?tag=sd-modal-card","src/components/sd-modal-card/sd-modal-card.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-modal-card {\r\n display: block;\r\n .sd-modal-card {\r\n position: relative;\r\n padding: 40px 32px;\r\n border-radius: 8px;\r\n box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.2);\r\n\r\n &__close-button {\r\n position: absolute;\r\n top: 16px;\r\n right: 16px;\r\n cursor: pointer;\r\n }\r\n\r\n sd-icon.sd-modal-card__icon {\r\n display: block;\r\n width: 32px;\r\n height: 32px;\r\n margin: 0 auto 12px auto;\r\n }\r\n\r\n &__title {\r\n color: var(--point-color);\r\n font-size: 18px;\r\n font-weight: 700;\r\n line-height: 30px;\r\n text-align: center;\r\n margin: 0 0 20px 0;\r\n }\r\n\r\n &__message {\r\n color: $grey_95;\r\n font-weight: 400;\r\n font-size: 12px;\r\n line-height: 22px;\r\n text-align: center;\r\n margin: 0;\r\n }\r\n\r\n &__button-container {\r\n display: flex;\r\n margin: 32px auto 0 auto;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 8px;\r\n &.flex-column {\r\n flex-direction: column;\r\n }\r\n button.sd-modal-card__button {\r\n width: 89px;\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport { resolveColor } from '../../utils/color';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\n\r\nexport interface SdModalCardButtonProps {\r\n label: string;\r\n color: string;\r\n size: ButtonSize;\r\n variant?: ButtonVariant;\r\n class?: string;\r\n type?: 'confirm' | 'cancel';\r\n}\r\n\r\n@Component({\r\n tag: 'sd-modal-card',\r\n styleUrl: 'sd-modal-card.scss',\r\n})\r\nexport class SdModalCard {\r\n @Prop() type: 'info' | 'warning' | 'normal' = 'info';\r\n @Prop() system: 'normal' | 'positive' | 'negative' = 'normal';\r\n @Prop() useCloseButton: boolean = true;\r\n @Prop() modalTitle: string = 'normal';\r\n @Prop() buttonFlexDirection: 'row' | 'column' = 'row';\r\n @Prop() buttonProps: SdModalCardButtonProps[] = [\r\n {\r\n label: '확인',\r\n color: 'grey_80',\r\n size: 'md',\r\n },\r\n ];\r\n @Prop() message: string[] = [];\r\n @Prop()\r\n modalClass: string = '';\r\n\r\n @Event() sdClose!: EventEmitter<MouseEvent>;\r\n @Event() sdConfirm!: EventEmitter<MouseEvent>;\r\n\r\n private get pointColor(): string {\r\n if (this.type !== 'normal') {\r\n return 'grey_95';\r\n }\r\n\r\n switch (this.system) {\r\n case 'positive':\r\n return resolveColor('brilliantblue_75');\r\n case 'negative':\r\n return resolveColor('red_75');\r\n default:\r\n return resolveColor('grey_95');\r\n }\r\n }\r\n\r\n private get getModalClass(): string {\r\n let modalClass = `sd-modal-card ${this.modalClass}`;\r\n modalClass += ' ' + `sd-modal-card-${this.system}`;\r\n return modalClass;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host style={{ '--point-color': this.pointColor }}>\r\n <div class={this.getModalClass}>\r\n {this.useCloseButton && (\r\n <sd-icon\r\n class=\"sd-modal-card__close-button\"\r\n name=\"close\"\r\n size=\"20\"\r\n color=\"grey_65\"\r\n onClick={() => this.sdClose.emit()}\r\n />\r\n )}\r\n {this.type !== 'normal' && (\r\n <sd-icon\r\n class=\"sd-modal-card__icon\"\r\n name={this.type === 'info' ? 'notificationOutline' : 'warningOutline'}\r\n size=\"32\"\r\n color={this.type === 'info' ? 'brilliantblue_75' : 'red_75'}\r\n />\r\n )}\r\n <h2 class=\"sd-modal-card__title\">{this.modalTitle}</h2>\r\n <slot>\r\n <div class={`sd-modal-card__message-container`}>\r\n {this.message.map(msg => (\r\n <p class=\"sd-modal-card__message\">{msg}</p>\r\n ))}\r\n </div>\r\n </slot>\r\n <div class={`sd-modal-card__button-container flex-${this.buttonFlexDirection}`}>\r\n {this.buttonProps.map(button => (\r\n <sd-button\r\n class={'sd-modal-card__button'}\r\n variant={button.variant ? button.variant : 'outline'}\r\n label={button.label}\r\n color={button.color}\r\n size={button.size}\r\n onClick={() =>\r\n !button.type || button.type === 'confirm' ? this.sdConfirm.emit() : this.sdClose.emit()\r\n }\r\n {...(button.class && { class: button.class })}\r\n ></sd-button>\r\n ))}\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n\r\n// <div\r\n// style=\"\r\n// width: 100%;\r\n// display: flex;\r\n// justify-content: center;\r\n// align-items: center;\r\n// gap: 40px;\r\n// margin-top: 50px;\r\n// \"\r\n// >\r\n// <sd-modal-card id=\"1\"></sd-modal-card>\r\n// <sd-modal-card id=\"2\"></sd-modal-card>\r\n// <sd-modal-card id=\"3\"></sd-modal-card>\r\n// </div>\r\n// <div\r\n// style=\"\r\n// width: 100%;\r\n// display: flex;\r\n// justify-content: center;\r\n// align-items: center;\r\n// gap: 40px;\r\n// margin-top: 50px;\r\n// \"\r\n// >\r\n// <sd-modal-card id=\"4\"></sd-modal-card>\r\n// <sd-modal-card id=\"5\"></sd-modal-card>\r\n// <sd-modal-card id=\"6\"></sd-modal-card>\r\n// </div>\r\n// <div\r\n// style=\"\r\n// width: 100%;\r\n// display: flex;\r\n// justify-content: center;\r\n// align-items: center;\r\n// gap: 40px;\r\n// margin-top: 50px;\r\n// margin-bottom: 50px;\r\n// \"\r\n// >\r\n// <sd-modal-card id=\"7\"></sd-modal-card>\r\n// <sd-modal-card id=\"8\"></sd-modal-card>\r\n// <sd-modal-card id=\"9\"></sd-modal-card>\r\n// </div>\r\n// <script>\r\n// document.addEventListener('DOMContentLoaded', event => {\r\n// const modalCard1 = document.getElementById('1');\r\n// const modalCard2 = document.getElementById('2');\r\n// const modalCard3 = document.getElementById('3');\r\n// const modalCard4 = document.getElementById('4');\r\n// const modalCard5 = document.getElementById('5');\r\n// const modalCard6 = document.getElementById('6');\r\n// const modalCard7 = document.getElementById('7');\r\n// const modalCard8 = document.getElementById('8');\r\n// const modalCard9 = document.getElementById('9');\r\n// const message = [\r\n// 'Lorem ipsum dolor sit amet, consectetur adipisicing elit,',\r\n// 'incididunt ut labore et dolore magna aliqua.',\r\n// ];\r\n// const buttonProps = [\r\n// {\r\n// label: '취소',\r\n// color: 'grey_80',\r\n// size: 'md',\r\n// type: 'cancel',\r\n// },\r\n// {\r\n// label: '확인',\r\n// color: 'oceanblue_75',\r\n// size: 'md',\r\n// variant: 'primary',\r\n// },\r\n// ];\r\n// const colButtonProps = [\r\n// {\r\n// label: '확인',\r\n// color: 'oceanblue_75',\r\n// size: 'md',\r\n// variant: 'primary',\r\n// },\r\n// {\r\n// label: '취소',\r\n// color: 'grey_80',\r\n// size: 'md',\r\n// type: 'cancel',\r\n// },\r\n// ];\r\n// const handleClose = () => {\r\n// console.log('Modal closed');\r\n// };\r\n// const handleConfirm = () => {\r\n// console.log('Modal confirmed');\r\n// };\r\n// modalCard1.message = message;\r\n// modalCard2.message = message;\r\n// modalCard3.message = message;\r\n// modalCard4.message = message;\r\n// modalCard5.message = message;\r\n// modalCard6.message = message;\r\n// modalCard7.message = message;\r\n// modalCard8.message = message;\r\n// modalCard9.message = message;\r\n\r\n// modalCard4.type = 'warning';\r\n// modalCard5.type = 'warning';\r\n// modalCard6.type = 'warning';\r\n// modalCard7.type = 'normal';\r\n// modalCard8.type = 'normal';\r\n// modalCard9.type = 'normal';\r\n\r\n// modalCard8.system = 'positive';\r\n// modalCard9.system = 'negative';\r\n\r\n// modalCard2.buttonProps = buttonProps;\r\n// modalCard3.buttonProps = colButtonProps;\r\n// modalCard3.buttonFlexDirection = 'column';\r\n\r\n// const warningButtonProps = [buttonProps[0], { ...buttonProps[1], color: 'red_75' }];\r\n// const warningColButtonProps = [{ ...colButtonProps[0], color: 'red_75' }, colButtonProps[1]];\r\n// modalCard5.buttonProps = warningButtonProps;\r\n// modalCard6.buttonProps = warningColButtonProps;\r\n// modalCard6.buttonFlexDirection = 'column';\r\n\r\n// modalCard1.addEventListener('sdClose', handleClose);\r\n// modalCard2.addEventListener('sdClose', handleClose);\r\n// modalCard3.addEventListener('sdClose', handleClose);\r\n// modalCard1.addEventListener('sdConfirm', handleConfirm);\r\n// modalCard2.addEventListener('sdConfirm', handleConfirm);\r\n// modalCard3.addEventListener('sdConfirm', handleConfirm);\r\n// });\r\n// </script>\r\n"],"names":["resolveColor","h","Host"],"mappings":"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"}

package/dist/cjs/sd-popover.entry.cjs.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"sd-popover.entry.cjs.js","sources":["src/components/sd-popover/sd-popover.scss?tag=sd-popover&encapsulation=shadow","src/components/sd-popover/sd-popover.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n.sd-popover {\r\n position: relative;\r\n cursor: pointer;\r\n display: inline-block;\r\n}\r\n","import { Component, Element, Fragment, Prop, State, Watch, h } from '@stencil/core';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\nimport { TooltipArrow } from '../assets/tooltipArrow';\r\n\r\n@Component({\r\n tag: 'sd-popover',\r\n styleUrl: 'sd-popover.scss',\r\n shadow: true,\r\n})\r\nexport class SdPopover {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop({ mutable: true }) show: boolean = false;\r\n\r\n @Prop({ reflect: true }) placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\r\n @Prop({ reflect: true }) color: string = '#01BB4B';\r\n\r\n @Prop({ reflect: true }) icon: IconName = 'helpOutline';\r\n @Prop({ reflect: true }) iconSize: number = 12;\r\n\r\n @Prop() label: string = '';\r\n @Prop({ reflect: true }) buttonSize: ButtonSize = 'sm';\r\n @Prop({ reflect: true }) buttonVariant: ButtonVariant = 'primary';\r\n\r\n @Prop({ attribute: 'title', reflect: true }) menuTitle?: string;\r\n @Prop({ reflect: true }) messages: string[] = [];\r\n @Prop({ reflect: true }) buttons: {\r\n [key: string]: any;\r\n }[] = [];\r\n @Prop() menuClass: string = '';\r\n\r\n @Prop() noHover: boolean = true;\r\n\r\n @Prop() useClose: boolean = false;\r\n\r\n @State() showPopover: boolean = false;\r\n @State() slotContent: string = '';\r\n\r\n @Watch('show')\r\n watchShowHandler(newValue: boolean) {\r\n this.showPopover = newValue;\r\n }\r\n\r\n componentWillLoad() {\r\n this.showPopover = this.show;\r\n\r\n this.slotContent = this.el.innerHTML;\r\n }\r\n\r\n private buttonEl?: HTMLElement;\r\n\r\n private handleClose = () => {\r\n this.showPopover = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n {this.label ? (\r\n <sd-button\r\n ref={el => (this.buttonEl = el as unknown as HTMLElement)}\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-popover\"\r\n onClick={() => (this.showPopover = !this.showPopover)}\r\n ></sd-button>\r\n ) : (\r\n <sd-icon\r\n ref={el => (this.buttonEl = el as unknown as HTMLElement)}\r\n name={this.icon}\r\n size={this.iconSize}\r\n color={this.color}\r\n class=\"sd-popover\"\r\n onClick={() => (this.showPopover = !this.showPopover)}\r\n ></sd-icon>\r\n )}\r\n\r\n {this.showPopover && (\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-popover-menu': true,\r\n [`sd-popover-menu--${this.placement}`]: true,\r\n [this.menuClass]: !!this.menuClass,\r\n }}\r\n >\r\n <i class={`sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}`}>\r\n <TooltipArrow></TooltipArrow>\r\n </i>\r\n\r\n <div class=\"sd-popover-menu__content\">\r\n {this.menuTitle && <div class=\"sd-popover-menu__title\">{this.menuTitle}</div>}\r\n\r\n {this.messages.length > 0 && (\r\n <div class=\"sd-popover-menu__messages\">\r\n {this.messages.map(message => (\r\n <div>{message}</div>\r\n ))}\r\n </div>\r\n )}\r\n\r\n {this.buttons.length > 0 && (\r\n <div class={`sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}`}>\r\n {this.buttons.map(button => (\r\n <sd-button {...button} />\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n\r\n {this.useClose && (\r\n <button class=\"sd-popover-menu__close-button\" onClick={() => this.handleClose()}>\r\n <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\r\n </button>\r\n )}\r\n </div>\r\n </sd-tooltip-portal>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"names":["h","Fragment","TooltipArrow"],"mappings":"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"}

package/dist/cjs/sd-progress.entry.cjs.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"sd-progress.entry.cjs.js","sources":["src/components/sd-progress/sd-progress.scss?tag=sd-progress","src/components/sd-progress/sd-progress.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-progress {\r\n display: block;\r\n\r\n .sd-progress__bar {\r\n position: relative;\r\n width: 360px;\r\n height: 20px;\r\n overflow: hidden;\r\n border-radius: 4px;\r\n background-color: $grey_20;\r\n text-align: center;\r\n\r\n &__percent {\r\n width: var(--progress-percentage);\r\n height: 100%;\r\n border-radius: 4px;\r\n background-color: var(--progress-color, $brilliantblue_75);\r\n transition: all 0.5s;\r\n &.proceed {\r\n border-top-right-radius: 50%;\r\n }\r\n }\r\n &__indicator {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n height: 20px;\r\n width: 100%;\r\n background-color: $grey_20;\r\n line-height: 21px;\r\n z-index: 1;\r\n }\r\n\r\n &__indicator--left {\r\n color: var(--progress-color, $brilliantblue_75);\r\n clip-path: inset(0 0 0 var(--progress-percentage));\r\n }\r\n\r\n &__indicator--right {\r\n color: white;\r\n background-color: var(--progress-color, $brilliantblue_75);\r\n clip-path: inset(0 calc(100% - var(--progress-percentage)) 0 0);\r\n }\r\n }\r\n\r\n .sd-progress__spinner {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n svg {\r\n transform: rotate(-90deg);\r\n }\r\n\r\n &__label {\r\n margin-top: 8px;\r\n font-size: 16px;\r\n color: var(--progress-color, $brilliantblue_75);\r\n }\r\n }\r\n\r\n .sd-progress__label {\r\n margin-top: 4px;\r\n font-size: 12px;\r\n color: $grey_95;\r\n text-align: center;\r\n }\r\n}\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-progress',\r\n styleUrl: 'sd-progress.scss',\r\n})\r\nexport class SdProgress {\r\n @Prop() type: 'bar' | 'spinner' = 'bar';\r\n @Prop() status: 'default' | 'progress' | 'complete' | 'error' = 'default';\r\n @Prop() percentage: number = 0;\r\n @Prop() size: number = 80;\r\n @Prop() strokeWidth: number = 12;\r\n @Prop() label?: string;\r\n\r\n private statusColor = {\r\n default: '#aaaaaa',\r\n progress: '#0075ff',\r\n complete: '#12B553',\r\n error: '#FB4444',\r\n };\r\n\r\n render() {\r\n return (\r\n <Host\r\n style={{\r\n '--progress-color': this.statusColor[this.status],\r\n '--progress-percentage': `${this.percentage}%`,\r\n }}\r\n >\r\n {this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress()}\r\n {this.label && <div class=\"sd-progress__label\">{this.label}</div>}\r\n </Host>\r\n );\r\n }\r\n\r\n renderBarProgress() {\r\n return (\r\n <div class={`sd-progress__bar sd-progress__bar--${this.status}`}>\r\n <div\r\n class={['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ')}\r\n ></div>\r\n <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--left\">\r\n {this.percentage}%\r\n </div>\r\n <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--right\">\r\n {this.percentage}%\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n renderSpinnerProgress() {\r\n const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름\r\n const circumference = 2 * Math.PI * radius; // 원의 둘레\r\n const offset = circumference - (this.percentage / 100) * circumference; // 진행률에 따른 offset\r\n const progressBgSize = `${this.size}px`;\r\n const progressSize = `${this.size / 2}px`;\r\n\r\n return (\r\n <div class={`sd-progress__spinner sd-progress__spinner--${this.status}`}>\r\n <svg width={progressBgSize} height={progressBgSize}>\r\n <circle\r\n cx={progressSize}\r\n cy={progressSize}\r\n r={radius}\r\n stroke=\"#EEEEEE\"\r\n stroke-width={this.strokeWidth}\r\n fill=\"transparent\"\r\n />\r\n <circle\r\n cx={progressSize}\r\n cy={progressSize}\r\n r={radius}\r\n stroke={this.statusColor[this.status]}\r\n stroke-width={this.strokeWidth}\r\n fill=\"transparent\"\r\n stroke-dasharray={circumference}\r\n stroke-dashoffset={offset}\r\n stroke-linecap=\"round\"\r\n class=\"transition-all duration-500\"\r\n />\r\n </svg>\r\n <strong class=\"sd-progress__spinner__label\">{this.percentage} %</strong>\r\n </div>\r\n );\r\n }\r\n}\r\n\r\n// <sd-progress id=\"sd-progress-1\"></sd-progress>\r\n// <sd-progress id=\"sd-progress-2\" type=\"spinner\"></sd-progress>\r\n// <sd-progress id=\"sd-progress-3\" type=\"spinner\"></sd-progress>\r\n// <script>\r\n// document.addEventListener('DOMContentLoaded', event => {\r\n// progress = document.getElementById('sd-progress-1');\r\n// progress2 = document.getElementById('sd-progress-2');\r\n// progress3 = document.getElementById('sd-progress-3');\r\n// progress2.label = 'test label...';\r\n// progress3.percentage = 50;\r\n// progress3.status = 'error';\r\n// let percentage = 0;\r\n// const interval = setInterval(() => {\r\n// if (percentage >= 100) {\r\n// clearInterval(interval);\r\n// progress.status = 'complete';\r\n// progress2.status = 'complete';\r\n// return;\r\n// }\r\n// percentage += 10;\r\n// progress.status = 'progress';\r\n// progress.percentage = percentage;\r\n// progress2.status = 'progress';\r\n// progress2.percentage = percentage;\r\n// }, 500);\r\n// });\r\n// </script>\r\n"],"names":["h","Host"],"mappings":"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"}

package/dist/cjs/sd-select-multiple-group.cjs.entry.js DELETED Viewed

@@ -1,406 +0,0 @@
-'use strict';
-var index = require('./index-Bxead0A0.js');
-var selectKeyboardNavigation = require('./select-keyboard-navigation-6fO_V4En.js');
-const sdSelectMultipleGroupCss = ".sd-select-multiple-group__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple-group__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple-group__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-track{background-color:transparent}sd-select-multiple-group{display:inline-block;height:fit-content}sd-select-multiple-group .sd-select-multiple-group{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white;color:#333333}sd-select-multiple-group .sd-select-multiple-group:hover:not(.sd-select-multiple-group--disabled){background:#f6f6f6}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__label{border-right:1px solid #cccccc}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger{color:#888888}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus,sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus-visible,sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus-within{outline:none !important}sd-select-multiple-group .sd-select-multiple-group__label{font-size:12px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6}sd-select-multiple-group .sd-select-multiple-group__container{position:relative;width:100%;display:flex}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger .sd-select-multiple-group__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger .sd-select-multiple-group__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__arrow--open{transform:rotate(180deg)}.sd-select-multiple-group__dropdown{width:var(--select-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container sd-input{width:100%}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple-group__dropdown .sd-select-multiple-group__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px}";
-const SdSelectMultipleGroup = class extends selectKeyboardNavigation.BaseDropdownEvent {
-    constructor(hostRef) {
-        super();
-        index.registerInstance(this, hostRef);
-        this.sdChange = index.createEvent(this, "sdChange");
-        this.dropDownShow = index.createEvent(this, "dropDownShow");
-    }
-    get el() { return index.getElement(this); }
-    // props
-    value = null;
-    label = '';
-    options = [];
-    placeholder = '선택';
-    optionPlaceholder = '옵션이 없습니다.';
-    width = '200px';
-    dropdownHeight = '260px';
-    disabled = false;
-    clearable = false;
-    searchable = false;
-    useCheckbox = false;
-    useAll = false;
-    allCheckedLabel = '전체';
-    allCheckOptionLabel = '전체';
-    // props - custom styles
-    containerStyle = {};
-    triggerStyle = {};
-    dropdownStyle = {};
-    optionStyle = {};
-    labelStyle = {};
-    // props - custom slots
-    optionRenderer;
-    // states
-    filteredOptions = this.options;
-    isOpen = false;
-    searchText = null;
-    itemIndex = -1;
-    isScrolled = false;
-    // events
-    sdChange;
-    dropDownShow;
-    selectRef;
-    searchRef;
-    optionRef;
-    dropdownRef;
-    valueChanged() {
-        this.sdChange?.emit(this.value);
-    }
-    optionsChanged() {
-        this.filteredOptions = this.options;
-        this.filterOptions();
-    }
-    searchTextChanged() {
-        this.filterOptions();
-    }
-    async itemIndexChanged(newIndex, oldIndex) {
-        if (this.searchable) {
-            const searchInput = await this.getNativeInputElement();
-            if (this.itemIndex === -1) {
-                searchInput?.focus();
-                return;
-            }
-            else if (searchInput?.matches(':focus')) {
-                searchInput?.blur();
-            }
-        }
-        const optionElements = Array.from(this.dropdownRef?.querySelectorAll('.sd-select-multiple-group__dropdown sd-select-option-group') || []);
-        const currentItem = optionElements?.[this.itemIndex];
-        if (!currentItem || !this.isOpen)
-            return;
-        this.optionRef = currentItem;
-        const isOptionDisabled = await this.optionRef.isDisabled();
-        if (isOptionDisabled) {
-            newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
-            return;
-        }
-        this.scrollToOption(currentItem);
-    }
-    async isOpenChanged() {
-        // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
-        this.onDropdownToggle(this.isOpen);
-        const selectedOption = this.getSelectedOption();
-        if (!selectedOption) {
-            this.itemIndex = -1;
-        }
-        else {
-            this.itemIndex = this.options.indexOf(selectedOption[0]);
-        }
-        this.dropDownShow?.emit({ isOpen: this.isOpen });
-        if (this.isOpen === false)
-            return;
-        await new Promise(resolve => setTimeout(resolve, 10));
-        const optionElements = Array.from(this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-item') || []);
-        const currentItem = optionElements?.[this.itemIndex];
-        // 드롭다운이 열릴 때 검색 입력에 포커스
-        if (this.searchable) {
-            const searchInput = await this.getNativeInputElement();
-            searchInput?.focus();
-        }
-        if (!currentItem)
-            return;
-        await new Promise(resolve => setTimeout(resolve, 10)); // 추가 딜레이
-        this.scrollToOption(currentItem);
-    }
-    componentWillLoad() {
-        // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음
-        this.filteredOptions = this.options;
-        this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
-    }
-    disconnectedCallback() {
-        this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
-    }
-    handleDocumentClick(event) {
-        if (!this.selectRef?.contains(event.target)) {
-            this.isOpen = false;
-        }
-    }
-    handleDocumentKeydown(keyboardEvent) {
-        keyboardEvent.stopPropagation();
-        const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
-        if (!targetKey.includes(keyboardEvent.key))
-            return;
-        keyboardEvent.preventDefault();
-        switch (keyboardEvent.key) {
-            case 'ArrowDown':
-            case 'ArrowUp':
-                const keyboardNavigation = new selectKeyboardNavigation.SelectKeyboardNavigation(this.searchable, this.filteredOptions);
-                const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
-                this.itemIndex = nextIndex;
-                break;
-            case 'Enter':
-                const selectedOption = this.filteredOptions[this.itemIndex];
-                if (selectedOption && !selectedOption.disabled) {
-                    this.handleOptionSelection(selectedOption);
-                }
-                break;
-            case 'Escape':
-                this.isOpen = false;
-                break;
-        }
-    }
-    // event handlers
-    handleTriggerClick = (event) => {
-        event.stopPropagation();
-        if (!this.disabled) {
-            this.isOpen = !this.isOpen;
-            this.dropDownShow?.emit({ isOpen: this.isOpen });
-        }
-    };
-    handleAllOptionClick = (detail) => {
-        if (detail.isSelected) {
-            // 이미 선택된 옵션인 경우, 선택 해제
-            const filterDisabledOptions = this.filteredOptions.filter(opt => opt.type === 'item' && !opt.disabled);
-            this.value =
-                this.value?.filter(selected => !filterDisabledOptions.some(opt => opt.value === selected.value)) || this.value;
-        }
-        else {
-            // 새로운 옵션 선택
-            const valueSet = new Set([
-                ...(this.value || []),
-                ...this.filteredOptions.filter(opt => opt.type === 'item' && !opt.disabled),
-            ]);
-            this.value = Array.from(valueSet);
-        }
-    };
-    handleOptionClick = (detail) => {
-        const { option, event } = detail;
-        event.stopPropagation();
-        if (option.type === 'group')
-            this.handleGroupOptionClick(detail);
-        if (option.type === 'subgroup')
-            this.handleSubGroupOptionClick(detail);
-        if (option.type === 'item')
-            this.handleOptionSelection(option);
-    };
-    handleGroupOptionClick = (detail) => {
-        const { option, isSelected } = detail;
-        const childOptions = this.filteredOptions.filter(opt => opt.parent === option.value && !opt.disabled);
-        childOptions.forEach(subgroup => {
-            this.handleSubGroupOptionClick({
-                option: subgroup,
-                isSelected: isSelected || isSelected === null,
-            });
-        });
-    };
-    handleSubGroupOptionClick = (detail) => {
-        const { option, isSelected } = detail;
-        const childOptions = this.filteredOptions.filter(opt => opt.parent === option.value && !opt.disabled);
-        if (isSelected || isSelected === null) {
-            // 모든 자식 옵션이 선택된 경우, 모두 선택 해제
-            this.value =
-                this.value?.filter(selected => !childOptions.some(child => child.value === selected.value)) ||
-                    null;
-        }
-        else {
-            // 일부 또는 전체 자식 옵션이 선택되지 않은 경우, 모두 선택
-            const newSelections = childOptions.filter(child => !this.value?.some(selected => selected.value === child.value));
-            this.value = [...(this.value || []), ...newSelections];
-        }
-    };
-    filterOptions() {
-        if (!this.searchText || this.searchText.trim() === '') {
-            // 검색어가 없으면 전체 옵션 표시
-            this.filteredOptions = this.options;
-            return;
-        }
-        const searchTerm = this.searchText.toLowerCase();
-        const matchedOptions = new Set();
-        // 1. 직접 매칭되는 옵션들 찾기
-        this.options.forEach(option => {
-            if (option.label.toLowerCase().includes(searchTerm)) {
-                matchedOptions.add(option);
-                // 매칭된 옵션의 상위 그룹들도 포함
-                this.addParentGroups(option, matchedOptions);
-            }
-        });
-        // 2. Set을 배열로 변환하고 원본 순서 유지
-        this.filteredOptions = this.options.filter(option => matchedOptions.has(option));
-    }
-    addParentGroups(option, matchedSet) {
-        if (!option.parent)
-            return;
-        const parentOption = this.options.find(opt => opt.value === option.parent);
-        if (parentOption && !matchedSet.has(parentOption)) {
-            matchedSet.add(parentOption);
-            // 재귀적으로 상위 그룹들도 추가
-            this.addParentGroups(parentOption, matchedSet);
-        }
-    }
-    getSelectedOption() {
-        return this.options.filter(option => this.value?.includes(option));
-    }
-    handleDropdownScroll = (event) => {
-        const target = event.target;
-        const scrollTop = target.scrollTop;
-        // 스크롤이 조금이라도 되면 그림자 표시
-        this.isScrolled = scrollTop > 0;
-    };
-    async getNativeInputElement() {
-        if (this.searchRef) {
-            return this.searchRef.getNativeElement();
-        }
-        return null;
-    }
-    handleOptionSelection = (option) => {
-        if (!option || option.disabled)
-            return;
-        const isAlreadySelected = this.value?.some(opt => opt.value === option.value);
-        if (isAlreadySelected) {
-            // 이미 선택된 옵션인 경우, 선택 해제
-            this.value = this.value?.filter(opt => opt.value !== option.value) || null;
-        }
-        else {
-            // 새로운 옵션 선택
-            this.value = [...(this.value || []), option];
-        }
-    };
-    getAllItemsUnderOption(parentOption, includeDisabled = false) {
-        const filterChildrenWithParent = (option) => option.parent === parentOption.value && (includeDisabled || !option.disabled);
-        if (parentOption.type === 'subgroup') {
-            return this.filteredOptions.filter(option => filterChildrenWithParent(option) && option.type === 'item');
-        }
-        const allItems = [];
-        const childOptions = this.filteredOptions.filter(filterChildrenWithParent);
-        const subgroupOptions = childOptions.filter(option => option.type === 'subgroup');
-        subgroupOptions.forEach(subgroup => {
-            const itemsUnderSubgroup = this.filteredOptions.filter(option => option.parent === subgroup.value &&
-                option.type === 'item' &&
-                (includeDisabled ? true : !option.disabled));
-            allItems.push(...itemsUnderSubgroup);
-        });
-        const directItems = childOptions.filter(option => option.type === 'item');
-        allItems.push(...directItems);
-        return allItems;
-    }
-    isAllChildrenSelected(groupOption) {
-        const allItems = this.getAllItemsUnderOption(groupOption);
-        if (allItems.length === 0)
-            return false;
-        const selectedItems = allItems.filter(item => this.value?.some(selected => selected.value === item.value));
-        if (selectedItems.length === allItems.length)
-            return true;
-        if (selectedItems.length > 0)
-            return null;
-        return false;
-    }
-    getChildrenOptions(parentOption) {
-        const allItems = this.getAllItemsUnderOption(parentOption, true);
-        const selectedCount = allItems.filter(item => this.value?.some(val => val.value === item.value)).length;
-        return {
-            selectedCount,
-            totalCount: allItems.length,
-        };
-    }
-    isAllOptionsSelected() {
-        if (!this.value || this.value.length === 0)
-            return false;
-        const selectableItems = this.options.filter(opt => opt.type === 'item' && !opt.disabled);
-        if (selectableItems.length === 0)
-            return false;
-        const selectedValues = new Set(this.value.map(v => v.value));
-        return selectableItems.every(option => selectedValues.has(option.value));
-    }
-    getTriggerLabel() {
-        const selectedOption = this.getSelectedOption();
-        if (!selectedOption)
-            return '선택';
-        if (selectedOption.length === 0)
-            return this.placeholder;
-        const isAllChecked = this.isAllOptionsSelected();
-        return isAllChecked
-            ? this.allCheckedLabel
-            : selectedOption.map(option => option.label).join(', ');
-    }
-    closeDropdown() {
-        this.isOpen = false;
-    }
-    scrollToOption(optionElement) {
-        if (!this.dropdownRef || !optionElement)
-            return;
-        const dropdown = this.dropdownRef;
-        const optionTop = optionElement.offsetTop;
-        const optionHeight = optionElement.offsetHeight;
-        const dropdownScrollTop = dropdown.scrollTop;
-        const dropdownHeight = dropdown.clientHeight;
-        const searchContainer = dropdown.querySelector('.sd-select__search-container');
-        const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
-        const visibleTop = dropdownScrollTop + searchOffset;
-        const visibleBottom = dropdownScrollTop + dropdownHeight;
-        if (optionTop < visibleTop) {
-            dropdown.scrollTop = optionTop - searchOffset;
-        }
-        else if (optionTop + optionHeight > visibleBottom) {
-            dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;
-        }
-    }
-    render() {
-        const style = {
-            '--select-width': this.width || '200px',
-            '--select-dropdown-height': this.dropdownHeight || '260px',
-        };
-        return (index.h(index.Host, { key: '2fb8b95f341cea6870702474d549b10b46a33551', style: style }, index.h("div", { key: 'f0ffc9960ae27bc1e76e3cd59592de205ae0071d', class: {
-                'sd-select-multiple-group': true,
-                'sd-select-multiple-group--open': this.isOpen,
-                'sd-select-multiple-group--disabled': this.disabled,
-            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), index.h("div", { key: '1496b603a09001a571388baade46e4d14f19e51d', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
-    }
-    renderLabel(label, labelStyle) {
-        if (!label)
-            return null;
-        return (index.h("label", { class: "sd-select-multiple-group__label", style: labelStyle }, label));
-    }
-    renderTrigger() {
-        const selectedOption = this.getSelectedOption();
-        return (index.h("div", { class: "sd-select-multiple-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle }, index.h("span", { class: "sd-select-multiple-group__value" }, this.getTriggerLabel()), this.clearable && selectedOption?.length > 0 && !this.disabled && (index.h("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple-group__clear", onClick: event => {
-                event.stopPropagation();
-                this.value = null;
-            } })), index.h("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: {
-                'sd-select-multiple-group__arrow': true,
-                'sd-select-multiple-group__arrow--open': this.isOpen,
-            } })));
-    }
-    renderDropdown() {
-        const style = {
-            '--select-width': this.width || '200px',
-            '--select-dropdown-height': this.dropdownHeight || '260px',
-        };
-        if (this.isOpen === false)
-            return null;
-        return (index.h("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, index.h("div", { class: "sd-select-multiple-group__dropdown", style: { ...style, ...this.dropdownStyle }, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (index.h("div", { class: {
-                'sd-select-multiple-group__search-container': true,
-                'sd-select-multiple-group__search-container--scrolled': this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, index.h("sd-input", { ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdInput: event => {
-                this.searchText = String(event?.detail);
-            }, onSdFocus: () => {
-                this.itemIndex = -1;
-            }, onKeyDown: e => {
-                if (e.code === 'Enter')
-                    e.stopPropagation();
-            } }, index.h("sd-icon", { name: "search", size: 16, color: "#737373", slot: "prefix" })))), this.filteredOptions.length > 0 ? (index.h(index.Fragment, null, this.useAll && (index.h("sd-select-option-group", { option: { label: this.allCheckOptionLabel, value: '', type: 'all' }, index: 0, isSelected: this.isAllOptionsSelected(), isFocused: this.itemIndex === 0, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => this.handleAllOptionClick(detail), useCheckbox: this.useCheckbox, useIndicator: false })), this.filteredOptions.map((option, index$1) => (index.h("slot", { name: `option-${option.value}` }, index.h("sd-select-option-group", { option: option, index: index$1, isSelected: option.type === 'item'
-                ? this.value?.some(selected => selected.value === option.value)
-                : this.isAllChildrenSelected(option), isFocused: index$1 === this.itemIndex, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => {
-                if (option.type !== 'item' && !this.useCheckbox) {
-                    return;
-                }
-                this.handleOptionClick(detail);
-            }, useCheckbox: this.useCheckbox, ...(option.type !== 'item' && { countInfo: this.getChildrenOptions(option) }) })))))) : (index.h("slot", { name: "option-placeholder" }, index.h("div", { class: 'sd-select-multiple-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder))))));
-    }
-    static get watchers() { return {
-        "value": ["valueChanged"],
-        "options": ["optionsChanged"],
-        "searchText": ["searchTextChanged"],
-        "itemIndex": ["itemIndexChanged"],
-        "isOpen": ["isOpenChanged"]
-    }; }
-};
-SdSelectMultipleGroup.style = sdSelectMultipleGroupCss;
-exports.sd_select_multiple_group = SdSelectMultipleGroup;
-//# sourceMappingURL=sd-select-multiple-group.entry.cjs.js.map