npm - @sellmate/design-system - Versions diffs - 0.0.42 → 0.0.44 - Mend

@sellmate/design-system 0.0.42 → 0.0.44

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 (245) hide show

package/dist/design-system/sd-date-picker.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-date-picker.entry.esm.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":[],"mappings":"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"}
1	+ {"version":3,"file":"sd-date-picker.entry.esm.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":[],"mappings":"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"}

package/dist/design-system/sd-guide.entry.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sd-guide.entry.esm.js","sources":["src/components/sd-guide/sd-guide.scss?tag=sd-guide","src/components/sd-guide/sd-guide.tsx"],"sourcesContent":["@import '../sd-button/sd-button.scss';\r\n\r\nsd-guide {\r\n display: inline-block;\r\n height: fit-content;\r\n .sd-guide {\r\n display: inline-block;\r\n .sd-button {\r\n padding: 0 16px 0 12px;\r\n border-radius: 16px;\r\n color: $grey_90 !important;\r\n display: flex;\r\n align-items: center;\r\n transition: none;\r\n\r\n .sd-button__content {\r\n color: $grey_90 !important;\r\n\r\n .sd-button__label {\r\n color: $grey_90 !important;\r\n margin-left: 4px;\r\n }\r\n }\r\n }\r\n\r\n &--active {\r\n .sd-button {\r\n border: 1px solid $green_70;\r\n .sd-button__content {\r\n .sd-button__label {\r\n color: white !important;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.sd-guide__popup {\r\n position: relative;\r\n padding: 20px 32px;\r\n border-radius: 8px;\r\n box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.1);\r\n background: white;\r\n\r\n > .sd-guide__popup__close {\r\n position: absolute;\r\n top: 12px;\r\n right: 12px;\r\n }\r\n\r\n &__header {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-bottom: 12px;\r\n\r\n .sd-guide__popup__title {\r\n margin-top: 0;\r\n font-size: 16px;\r\n font-weight: 700;\r\n line-height: 26px;\r\n color: $grey_90;\r\n }\r\n }\r\n\r\n &__list {\r\n width: 100%;\r\n padding: 0;\r\n margin: 0;\r\n\r\n &__item {\r\n display: flex;\r\n width: 100%;\r\n align-items: start;\r\n list-style: none;\r\n color: $grey_90;\r\n font-size: 12px;\r\n font-weight: 400;\r\n\r\n p {\r\n width: 100%;\r\n padding: 0;\r\n margin: 0;\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n white-space: normal;\r\n overflow-wrap: break-word;\r\n min-width: 0;\r\n }\r\n\r\n &::before {\r\n display: block;\r\n content: '-';\r\n width: 6px;\r\n color: $grey_90;\r\n font-size: 12px;\r\n font-weight: 400;\r\n margin-left: 10px;\r\n margin-right: 12px;\r\n flex-shrink: 0;\r\n }\r\n\r\n &--depth-2 {\r\n &::before {\r\n content: '•';\r\n }\r\n padding-left: 26px;\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\r\nimport colors from '../../styles/color.json';\r\n\r\ntype GuideType = 'help' | 'pdf' | 'youtube' | 'notion' | 'event';\r\n\r\nconst GUIDE_LABEL = {\r\n help: '활용 TIP',\r\n pdf: 'PDF Guide',\r\n youtube: 'Video Guide',\r\n notion: '사용법 안내',\r\n event: 'Event Button',\r\n};\r\n\r\nconst GUIDE_ICON = {\r\n help: {\r\n name: 'helpOutline',\r\n size: 20,\r\n color: colors.green_70,\r\n },\r\n pdf: { name: 'pdf', size: 20, color: colors.red_75 },\r\n youtube: { name: 'youtube', size: 20, color: colors.red_75 },\r\n notion: { name: 'notion', size: 16, color: colors.black },\r\n event: { name: 'event', size: 16, color: colors.brilliantblue_70 },\r\n} as const;\r\n\r\n@Component({\r\n tag: 'sd-guide',\r\n styleUrl: 'sd-guide.scss',\r\n})\r\nexport class SdGuide {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() type: GuideType = 'help';\r\n @Prop() label: string = '';\r\n @Prop() message: string | string[] = '';\r\n @Prop() guideUrl: string = '';\r\n @Prop() popupTitle: string = '';\r\n @Prop() popupWidth?: number;\r\n\r\n @State() popupShow: boolean = false;\r\n\r\n private guideRef?: HTMLElement;\r\n\r\n private handleClickGuide = () => {\r\n if (this.type === 'help') {\r\n this.popupShow = !this.popupShow;\r\n return;\r\n }\r\n\r\n if (this.guideUrl) {\r\n window.open(this.guideUrl, '_blank');\r\n }\r\n };\r\n\r\n private get guideClass(): string {\r\n const classes = ['sd-guide', `sd-guide--${this.type}`];\r\n\r\n if (this.popupShow) classes.push('sd-guide--active');\r\n\r\n return classes.join(' ');\r\n }\r\n\r\n closeDropdown = () => {\r\n this.popupShow = false;\r\n };\r\n\r\n render() {\r\n const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];\r\n\r\n return (\r\n <Host\r\n style={{\r\n '--sd-guide-color': GUIDE_ICON[this.type].color,\r\n }}\r\n >\r\n <sd-button\r\n ref={el => (this.guideRef = el as unknown as HTMLElement)}\r\n class={this.guideClass}\r\n variant={this.popupShow ? 'primary' : 'outline'}\r\n label={this.label || GUIDE_LABEL[this.type]}\r\n size=\"sm\"\r\n color={this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45'}\r\n icon={iconName}\r\n iconColor={this.popupShow ? 'white' : iconColor}\r\n iconSize={iconSize}\r\n noHover={this.popupShow}\r\n onSdClick={this.handleClickGuide}\r\n />\r\n {this.type === 'help' && this.popupShow && (\r\n <sd-portal\r\n open={this.popupShow}\r\n parentRef={this.guideRef}\r\n onSdClose={this.closeDropdown}\r\n offset={[0, 4]}\r\n >\r\n <div\r\n class=\"sd-guide__popup\"\r\n style={{ width: this.popupWidth ? this.popupWidth + 'px' : '426px' } as any}\r\n >\r\n <sd-button\r\n class=\"sd-guide__popup__close\"\r\n icon=\"close\"\r\n color={colors.grey_65}\r\n size=\"md\"\r\n variant=\"ghost\"\r\n noHover\r\n // buttonStyle={{ padding: '0px', minHeight: '0px' }}\r\n onSdClick={this.closeDropdown}\r\n />\r\n <div class=\"sd-guide__popup__header\">\r\n <sd-icon name=\"helpOutline\" size={24} color={colors.green_65} />\r\n <h3 class=\"sd-guide__popup__title\">{this.popupTitle || GUIDE_LABEL[this.type]}</h3>\r\n </div>\r\n <ul class=\"sd-guide__popup__list\">{this.renderListItem(this.message)}</ul>\r\n </div>\r\n </sd-portal>\r\n )}\r\n </Host>\r\n );\r\n }\r\n\r\n // 현재 2depth까지만 스타일 적용\r\n renderListItem(message: string | string[], depth: number = 0): HTMLElement[] {\r\n const listItems: HTMLElement[] = [];\r\n\r\n if (Array.isArray(message)) {\r\n const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));\r\n listItems.push(...depthMsg.flat());\r\n } else {\r\n listItems.push(this.renderLi(message, depth));\r\n }\r\n\r\n return listItems;\r\n }\r\n\r\n renderLi = (message: string, depth: number) => {\r\n const listContent = message.replace(/ /gi, ' ');\r\n return (\r\n <li class={`sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}`}>\r\n <p innerHTML={listContent}></p>\r\n </li>\r\n );\r\n };\r\n}\r\n\r\n// <sd-guide id=\"sd-guide-1\"></sd-guide>\r\n// <sd-guide id=\"sd-guide-2\" type=\"pdf\"></sd-guide>\r\n// <sd-guide id=\"sd-guide-3\" type=\"youtube\"></sd-guide>\r\n// <sd-guide id=\"sd-guide-4\" type=\"notion\"></sd-guide>\r\n// <sd-guide id=\"sd-guide-5\" type=\"event\"></sd-guide>\r\n"],"names":[],"mappings":"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"}

package/dist/design-system/sd-modal-card.entry.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sd-modal-card.entry.esm.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":[],"mappings":"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"}

package/dist/design-system/sd-popover.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-popover.entry.esm.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 console.log(this.el);\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={() => (~~console.log('click popover'), (~~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={() => (~~console.log('click popover'), (~~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":[],"mappings":";;;AAAA,MAAM,YAAY,GAAG,oEAAoE;;MCS5E,SAAS,GAAA,MAAA;;;;;IAGI,IAAI,GAAY,KAAK;IAErB,SAAS,GAAwC,QAAQ;IACzD,KAAK,GAAW,SAAS;IAEzB,IAAI,GAAa,aAAa;IAC9B,QAAQ,GAAW,EAAE;IAEtC,KAAK,GAAW,EAAE;IACD,UAAU,GAAe,IAAI;IAC7B,aAAa,GAAkB,SAAS;AAEpB,IAAA,SAAS;IAC7B,QAAQ,GAAa,EAAE;IACvB,OAAO,GAE1B,EAAE;IACA,SAAS,GAAW,EAAE;IAEtB,OAAO,GAAY,IAAI;IAEvB,QAAQ,GAAY,KAAK;IAExB,WAAW,GAAY,KAAK;IAC5B,WAAW,GAAW,EAAE;AAGjC,IAAA,gBAAgB,CAAC,QAAiB,EAAA;AACjC,QAAA,IAAI,CAAC,WAAW,GAAG,QAAQ;;IAG5B,iBAAiB,GAAA;AAChB,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI;QAE5B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS~~;AAEpC,QAAA,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC~~;;~~AAGb~~,IAAA,QAAQ;IAER,WAAW,GAAG,MAAK;AAC1B,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;AACzB,KAAC;IAED,MAAM,GAAA;QACL,QACC,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,IAAI,CAAC,KAAK,IACV,~~CAAA~~,CAAA,WAAA,EAAA,~~EACC~~,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAA4B,CAAC,EACzD,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,OAAO,~~OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,~~IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,~~CAAC~~,~~GACzE~~,KAEb,CACC,CAAA,SAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAA4B,CAAC,EACzD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,OAAO,~~OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,~~IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,~~CAAC~~,~~GAC3E,~~CACX,EAEA,IAAI,CAAC,WAAW,KAChB,0EACC,SAAS,EAAE,IAAI,CAAC,QAAQ,EACxB,SAAS,EAAE,IAAI,CAAC,WAAW,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EAAA,EAEzB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAE;AACN,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,CAAC,oBAAoB,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;gBAC5C,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;aAClC,EAAA,EAED,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAE,kDAAkD,IAAI,CAAC,SAAS,CAAA,CAAE,EAAA,EAC3E,CAAC,CAAA,YAAY,sDAAgB,CAC1B,EAEJ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,IAAI,CAAC,SAAS,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAE,EAAA,IAAI,CAAC,SAAS,CAAO,EAE5E,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,KACxB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,IACpC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,KACzB,CAAA,CAAA,KAAA,EAAA,IAAA,EAAM,OAAO,CAAO,CACpB,CAAC,CACG,CACN,EAEA,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,KACvB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAsD,mDAAA,EAAA,IAAI,CAAC,OAAO,CAAC,MAAM,CAAE,CAAA,EACrF,EAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACvB,oBAAe,MAAM,EAAA,CAAI,CACzB,CAAC,CACG,CACN,CACI,EAEL,IAAI,CAAC,QAAQ,KACb,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,+BAA+B,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EAC9E,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAW,CAClD,CACT,CACI,CACa,CACpB,CACS;;;;;;;;;;"}
1	+ {"version":3,"file":"sd-popover.entry.esm.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":[],"mappings":"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"}

package/dist/design-system/sd-table.entry.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sd-table.entry.esm.js","sources":["src/components/sd-table/sd-table.scss?tag=sd-table","src/components/sd-table/sd-table.tsx"],"sourcesContent":["@import 'variables.scss';\r\n@import 'extend.scss';\r\n\r\n.sd-table__wrapper {\r\n height: var(--table-height, auto);\r\n width: var(--table-width, 100%);\r\n color: $grey_95;\r\n\r\n .sd-table__container {\r\n width: 100%;\r\n height: auto;\r\n border: 1px solid $grey_30;\r\n border-radius: 8px;\r\n font-size: 12px;\r\n overflow: hidden;\r\n\r\n .sd-table__middle {\r\n overflow: auto;\r\n will-change: scroll-position;\r\n height: var(--table-height, auto);\r\n @extend %scrollBar;\r\n\r\n .sd-table {\r\n background-color: white;\r\n display: table;\r\n width: 100%;\r\n border-collapse: separate;\r\n border-spacing: 0;\r\n table-layout: fixed;\r\n position: relative;\r\n\r\n &--selectable {\r\n td.sd-td--selected,\r\n th.sd-th--selected {\r\n width: 52px !important;\r\n max-width: 52px !important;\r\n min-width: 52px !important;\r\n padding: 0 10px 0 24px;\r\n text-align: left;\r\n }\r\n }\r\n\r\n &--sticky-header {\r\n thead {\r\n position: sticky;\r\n top: 0;\r\n z-index: 120;\r\n }\r\n }\r\n\r\n &--sticky-column {\r\n th.sticky-left,\r\n th.sticky-right {\r\n position: sticky;\r\n background-color: $th-bg;\r\n z-index: 110 !important;\r\n }\r\n td.sticky-left,\r\n td.sticky-right {\r\n position: sticky;\r\n background-color: white;\r\n z-index: 100 !important;\r\n }\r\n\r\n .sticky-left {\r\n left: var(--sticky-left-offset, 0);\r\n }\r\n .sticky-right {\r\n right: var(--sticky-right-offset, 0);\r\n }\r\n\r\n th.sticky-cell {\r\n position: sticky;\r\n z-index: 102;\r\n background-color: $th-bg;\r\n }\r\n td.sticky-cell {\r\n position: sticky;\r\n z-index: 101;\r\n background-color: white;\r\n }\r\n }\r\n\r\n &--scrolled-left {\r\n th.sticky-left-edge,\r\n td.sticky-left-edge {\r\n overflow: visible;\r\n &:after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 100%;\r\n right: -20px;\r\n width: 20px;\r\n height: 100%;\r\n z-index: 101 !important;\r\n box-shadow: inset 12px 0 20px -25px;\r\n opacity: 1;\r\n pointer-events: none;\r\n }\r\n }\r\n }\r\n\r\n &--scrolled-right {\r\n th.sticky-right-edge,\r\n td.sticky-right-edge {\r\n overflow: visible;\r\n\r\n &:after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -20px;\r\n width: 20px;\r\n height: 100%;\r\n z-index: 101 !important;\r\n box-shadow: inset -12px 0 20px -25px;\r\n opacity: 1;\r\n pointer-events: none;\r\n }\r\n }\r\n }\r\n\r\n &--no-data {\r\n thead {\r\n opacity: 0.4;\r\n tr {\r\n th {\r\n &.sd-th {\r\n border-bottom: 1px solid rgba(225, 225, 225, 0.4) !important;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n sd-td,\r\n sd-th,\r\n .sd-th__content--label {\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n word-break: keep-all;\r\n }\r\n\r\n thead {\r\n height: 36px;\r\n\r\n sd-tr {\r\n width: 100%;\r\n\r\n sd-th {\r\n background: $th-bg;\r\n height: 36px;\r\n padding: 0 16px;\r\n font-weight: 500;\r\n vertical-align: middle;\r\n border-bottom: 1px solid $grey_30;\r\n -webkit-user-select: none;\r\n user-select: none;\r\n position: relative;\r\n\r\n &.sd-th {\r\n .sd-th__content {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: center;\r\n gap: 4px;\r\n\r\n &--left {\r\n justify-content: flex-start;\r\n }\r\n &--center {\r\n justify-content: center;\r\n }\r\n &--right {\r\n justify-content: flex-end;\r\n }\r\n }\r\n\r\n .sd-th__resizer {\r\n position: absolute;\r\n top: 50%;\r\n right: 0;\r\n transform: translateY(-50%);\r\n width: 4px;\r\n height: 16px;\r\n cursor: col-resize;\r\n z-index: 3;\r\n border-left: 1px solid $grey_45;\r\n border-right: 1px solid $grey_45;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n sd-tbody {\r\n .sd-table__loading {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: calc(var(--table-height, auto) - 36px);\r\n min-height: calc(100% - 36px);\r\n background: rgba(255, 255, 255, 0.6);\r\n z-index: 200;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n sd-tr {\r\n &:last-of-type {\r\n sd-td {\r\n border-bottom: none;\r\n }\r\n }\r\n sd-td {\r\n height: 44px;\r\n padding: 0 16px;\r\n border-bottom: 1px solid $grey_30;\r\n background: white;\r\n vertical-align: middle;\r\n\r\n &.sd-td {\r\n &--left {\r\n text-align: left;\r\n }\r\n &--center {\r\n text-align: center;\r\n }\r\n &--right {\r\n text-align: right;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n .sd-table__bottom {\r\n background: white;\r\n text-align: center;\r\n }\r\n }\r\n\r\n .sd-table__pagination {\r\n position: relative;\r\n background: $grey_05;\r\n height: 48px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 1px solid $grey_30;\r\n border-top: none;\r\n border-radius: 8px;\r\n\r\n sd-select {\r\n position: absolute;\r\n right: 10px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n\r\n .sd-select {\r\n }\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 Watch,\r\n h,\r\n EventEmitter,\r\n Host,\r\n} from '@stencil/core';\r\nimport { CheckedType } from '../sd-checkbox/sd-checkbox';\r\nimport { SelectOption } from '../sd-select/sd-select';\r\nimport { SdSelectCustomEvent } from '../../components';\r\n\r\nexport type SdTableSortDir = 'asc' | 'desc' | 'none';\r\n\r\nexport interface SdTableColumn {\r\n name: string;\r\n label: string;\r\n field: string | ((row: any) => any);\r\n align?: 'left' | 'center' | 'right';\r\n width?: string;\r\n format?: (value: any, row: any) => string;\r\n visible?: boolean;\r\n usePageMoveIcon?: boolean;\r\n tooltip?: string[];\r\n tooltipOptions?: Record<string, any>;\r\n tdClass?: string;\r\n thClass?: string;\r\n}\r\n\r\nexport interface Row {\r\n [key: string]: any;\r\n}\r\n\r\n@Component({\r\n tag: 'sd-table',\r\n styleUrl: 'sd-table.scss',\r\n})\r\nexport class SdTable {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() columns!: SdTableColumn[];\r\n @Prop({ mutable: true }) rows!: Row[];\r\n @Prop({ mutable: true }) selected: Set<Row> = new Set();\r\n @Prop() rowKey: string = 'id';\r\n @Prop() selectable: boolean = false;\r\n @Prop() resizable: boolean = false;\r\n @Prop() width?: string;\r\n @Prop() height?: string;\r\n @Prop() stickyHeader: boolean = false;\r\n @Prop() stickyColumn: { left?: number; right?: number } = { left: 0, right: 0 };\r\n @Prop() noDataLabel: string = '데이터가 없습니다.';\r\n @Prop() isLoading: boolean = false;\r\n @Prop() pagination?: {\r\n page: number;\r\n rowsPerPage: number;\r\n lastPage?: number;\r\n };\r\n @Prop() bodyCellRenderer?: (\r\n column: SdTableColumn,\r\n row: Row,\r\n ) => HTMLElement | string | null | undefined;\r\n @Prop() useInternalPagination: boolean = false;\r\n @Prop() useRowsPerPageSelect: boolean = false;\r\n @Prop() rowsPerPageOption: SelectOption[] = [\r\n { label: '10개씩 보기', value: 10 },\r\n { label: '25개씩 보기', value: 25 },\r\n { label: '50개씩 보기', value: 50 },\r\n { label: '100개씩 보기', value: 100 },\r\n ];\r\n\r\n @Event() sdSelectChange!: EventEmitter<Row[]>;\r\n @Event() sdPageChange!: EventEmitter<number>;\r\n @Event() sdRowsPerPageChange!: EventEmitter<number>;\r\n\r\n @State() currentPage: number = this.pagination?.page || 1;\r\n @State() innerRows: Row[] = [];\r\n @State() innerSelected: Set<Row> = new Set();\r\n @State() columnWidths: number[] = [];\r\n @State() scrolledLeft: boolean = false;\r\n @State() scrolledRight: boolean = false;\r\n\r\n @Watch('columns')\r\n handleColumnsChange(newCols: SdTableColumn[]) {\r\n this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));\r\n }\r\n\r\n @Watch('rows')\r\n handleRowsChange(newRows: Row[]) {\r\n this.innerRows = [...newRows];\r\n }\r\n\r\n @Watch('selected')\r\n handleSelectedChange(newSelected: Set<Row>) {\r\n this.innerSelected = new Set(newSelected);\r\n }\r\n\r\n @Watch('pagination')\r\n handlePaginationChange(\r\n newVal?: { page: number; rowsPerPage: number; lastPage?: number } | undefined,\r\n ) {\r\n if (newVal?.page && newVal.page !== this.currentPage) this.currentPage = newVal.page;\r\n }\r\n\r\n componentWillLoad() {\r\n this.innerRows = [...(this.rows || [])];\r\n this.innerSelected = new Set(this.selected);\r\n this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));\r\n }\r\n\r\n componentDidLoad() {\r\n // SSR 환경 체크\r\n if (typeof window === 'undefined') return;\r\n\r\n const middle = this.el.querySelector('.sd-table__middle');\r\n if (!middle) return;\r\n\r\n const onScroll = () => {\r\n const { scrollLeft, scrollWidth, clientWidth } = middle as HTMLElement;\r\n this.scrolledLeft = scrollLeft > 0;\r\n this.scrolledRight = scrollLeft + clientWidth < scrollWidth;\r\n };\r\n middle.addEventListener('scroll', onScroll, { passive: true });\r\n onScroll();\r\n }\r\n\r\n // ----- Derived getters -----\r\n private get visibleColumns(): SdTableColumn[] {\r\n return this.columns.filter(col => col.visible !== false);\r\n }\r\n\r\n private get paginatedRows(): Row[] {\r\n if (!this.pagination || !this.useInternalPagination) return this.innerRows;\r\n\r\n const { rowsPerPage = this.rows.length } = this.pagination || {};\r\n\r\n const result = this.innerRows.slice(\r\n (this.currentPage - 1) * rowsPerPage,\r\n this.currentPage * rowsPerPage,\r\n );\r\n\r\n return result;\r\n }\r\n\r\n private get lastPageNumber(): number {\r\n const { lastPage, rowsPerPage = this.rows.length } = this.pagination || {};\r\n\r\n return lastPage ?? Math.max(1, Math.ceil(this.rows.length / rowsPerPage));\r\n }\r\n\r\n private get sdTableClasses() {\r\n return [\r\n 'sd-table',\r\n this.stickyHeader && 'sd-table--sticky-header',\r\n this.selectable && 'sd-table--selectable',\r\n this.resizable && 'sd-table--resizable',\r\n !this.innerRows.length && 'sd-table--no-data',\r\n ((this.stickyColumn?.left ?? 0) > 0 || (this.stickyColumn?.right ?? 0) > 0) &&\r\n 'sd-table--sticky-column',\r\n this.scrolledLeft && 'sd-table--scrolled-left',\r\n this.scrolledRight && 'sd-table--scrolled-right',\r\n ]\r\n .filter(Boolean)\r\n .join(' ');\r\n }\r\n\r\n // ----- Selection -----\r\n // private isRowSelected(row: Row): boolean {\r\n // return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);\r\n // }\r\n\r\n // private updateRowSelect(row: Row) {\r\n // const selectedArray = Array.from(this.innerSelected);\r\n // const exists = this.isRowSelected(row);\r\n // const newSelected = exists\r\n // ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])\r\n // : [...selectedArray, row];\r\n\r\n // // 동일 상태면 set하지 않음 → 불필요 렌더 방지\r\n // if (newSelected.length === selectedArray.length) return;\r\n\r\n // this.innerSelected = new Set(newSelected);\r\n // this.sdSelectChange.emit(Array.from(this.innerSelected));\r\n // }\r\n\r\n private toggleSelectAll(checked: CheckedType) {\r\n if (checked) {\r\n const pageRows = new Set([...this.paginatedRows]);\r\n this.innerSelected = new Set([...this.innerSelected, ...pageRows]);\r\n } else {\r\n const currentPageKeys = this.paginatedRows.map(r => r[this.rowKey]);\r\n this.innerSelected = new Set(\r\n [...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])),\r\n );\r\n }\r\n\r\n this.sdSelectChange.emit(Array.from(this.innerSelected));\r\n }\r\n\r\n private get isAllChecked(): boolean | null {\r\n const total = this.paginatedRows.length;\r\n const selectedCount = this.paginatedRows.filter(row =>\r\n Array.from(this.innerSelected).some(\r\n selectedRow => selectedRow[this.rowKey] === row[this.rowKey],\r\n ),\r\n ).length;\r\n\r\n if (selectedCount === 0) return false; // 아무것도 안 선택됨\r\n if (selectedCount === total) return true; // 전부 선택됨\r\n return null; // 일부만 선택됨\r\n }\r\n\r\n // ----- Helpers -----\r\n private getStickyStyle(colIdx: number) {\r\n const leftOffset =\r\n this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this.selectable ? 52 : 0);\r\n const rightOffset = this.columnWidths\r\n .filter((_, i) => i >= this.visibleColumns.length - (this.stickyColumn.right || 0) && i > colIdx)\r\n .reduce((a, b) => a + b, 0);\r\n return {\r\n '--sticky-left-offset': `${leftOffset}px`,\r\n '--sticky-right-offset': `${rightOffset}px`,\r\n 'width': `${this.columnWidths[colIdx]}px`,\r\n 'minWidth': `${this.columnWidths[colIdx]}px`,\r\n 'maxWidth': `${this.columnWidths[colIdx]}px`,\r\n };\r\n }\r\n\r\n private handleResize(index: number, event: MouseEvent) {\r\n // SSR 환경 체크\r\n if (typeof document === 'undefined') return;\r\n\r\n const startX = event.clientX;\r\n const startWidth = this.columnWidths[index];\r\n\r\n const handleMouseMove = (moveEvent: MouseEvent) => {\r\n const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50);\r\n\r\n this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));\r\n };\r\n\r\n const handleMouseUp = () => {\r\n document.removeEventListener('mousemove', handleMouseMove);\r\n document.removeEventListener('mouseup', handleMouseUp);\r\n };\r\n\r\n document.addEventListener('mousemove', handleMouseMove);\r\n document.addEventListener('mouseup', handleMouseUp);\r\n }\r\n\r\n // private getCellValue(column: SdTableColumn, row: Row) {\r\n // const { field, format, name } = column;\r\n // const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];\r\n // return format ? format(value, row) : value;\r\n // }\r\n\r\n // ----- Render -----\r\n private renderHeader() {\r\n return (\r\n <thead>\r\n <sd-tr>\r\n {this.selectable && (\r\n <sd-th\r\n class={{\r\n 'sd-th': true,\r\n 'sd-th--selected': true,\r\n 'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),\r\n }}\r\n style={{\r\n '--sticky-left-offset': '0px',\r\n }}\r\n >\r\n <sd-checkbox\r\n checked={this.isAllChecked}\r\n disabled={!this.paginatedRows.length}\r\n onSdChange={(e: CustomEvent<CheckedType>) => this.toggleSelectAll(e.detail)}\r\n ></sd-checkbox>\r\n </sd-th>\r\n )}\r\n {this.visibleColumns.map((col, colIdx) => (\r\n <sd-th\r\n key={col.name}\r\n class={{\r\n 'sd-th': true,\r\n [`${col.thClass}`]: Boolean(col.thClass),\r\n 'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),\r\n 'sticky-right': Boolean(\r\n this.stickyColumn.right && colIdx >= this.visibleColumns.length - this.stickyColumn.right!,\r\n ),\r\n 'sticky-left-edge': Boolean(\r\n this.stickyColumn.left && colIdx === this.stickyColumn.left - 1,\r\n ),\r\n 'sticky-right-edge': Boolean(\r\n this.stickyColumn.right &&\r\n colIdx === this.visibleColumns.length - this.stickyColumn.right!,\r\n ),\r\n }}\r\n style={this.getStickyStyle(colIdx)}\r\n >\r\n <div class={`sd-th__content sd-th__content--${col.align || 'left'}`}>\r\n <slot name={`header-cell-${col.name}`}>\r\n <div class=\"sd-th__content--label\">{col.label}</div>\r\n </slot>\r\n\r\n {col.usePageMoveIcon && <sd-icon name=\"pageMove\" size=\"12\" color=\"#006AC1\" />}\r\n\r\n {col.tooltip && (\r\n <sd-tooltip {...col.tooltipOptions}>\r\n <div slot=\"content\">\r\n {col.tooltip.map(text => (\r\n <p>{text}</p>\r\n ))}\r\n </div>\r\n </sd-tooltip>\r\n )}\r\n </div>\r\n\r\n {this.resizable && typeof window !== 'undefined' && (\r\n <div\r\n class=\"sd-th__resizer\"\r\n onMouseDown={(evt: MouseEvent) => this.handleResize(colIdx, evt)}\r\n ></div>\r\n )}\r\n </sd-th>\r\n ))}\r\n </sd-tr>\r\n </thead>\r\n );\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div\r\n class=\"sd-table__wrapper\"\r\n style={{\r\n '--table-width': this.width,\r\n '--table-height': this.height,\r\n }}\r\n >\r\n <div class=\"sd-table__container\">\r\n <div class=\"sd-table__middle\" role=\"table\">\r\n <div part=\"table\" class={this.sdTableClasses}>\r\n {this.renderHeader()}\r\n <sd-tbody>\r\n <slot></slot>\r\n </sd-tbody>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sd-table__bottom\"></div>\r\n </div>\r\n {this.pagination && this.innerRows.length > 0 && (\r\n <div class=\"sd-table__pagination\">\r\n <sd-pagination\r\n currentPage={!this.useInternalPagination ? this.pagination.page : this.currentPage}\r\n lastPage={!this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber}\r\n onPageChange={(e: CustomEvent<number>) => {\r\n if (!this.useInternalPagination) {\r\n this.sdPageChange.emit(e.detail);\r\n } else {\r\n this.currentPage = e.detail;\r\n this.sdPageChange.emit(this.currentPage);\r\n }\r\n }}\r\n ></sd-pagination>\r\n\r\n {this.useRowsPerPageSelect && (\r\n <sd-select\r\n value={this.pagination.rowsPerPage}\r\n options={this.rowsPerPageOption}\r\n width=\"128px\"\r\n onSdChange={(e: SdSelectCustomEvent<{ value: string | number | null }>) => {\r\n const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;\r\n if (!this.useInternalPagination) {\r\n this.sdRowsPerPageChange.emit(changedRowsPerPage);\r\n } else {\r\n const newRowsPerPage = Number(e.detail.value || 0);\r\n let newLastPage = Math.max(1, Math.ceil(this.innerRows.length / newRowsPerPage));\r\n let newCurrentPage = this.currentPage;\r\n\r\n if (newCurrentPage > newLastPage) {\r\n newCurrentPage = newLastPage;\r\n }\r\n\r\n this.pagination = {\r\n page: newCurrentPage,\r\n rowsPerPage: newRowsPerPage,\r\n lastPage: newLastPage,\r\n };\r\n this.currentPage = newCurrentPage;\r\n this.sdRowsPerPageChange.emit(changedRowsPerPage);\r\n }\r\n }}\r\n ></sd-select>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/design-system/sd-tbody.sd-th.sd-tr.entry.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sd-tbody.sd-th.sd-tr.entry.esm.js","sources":["src/components/sd-table/sd-tbody/sd-tbody.scss?tag=sd-tbody","src/components/sd-table/sd-tbody/sd-tbody.tsx","src/components/sd-table/sd-th/sd-th.scss?tag=sd-th","src/components/sd-table/sd-th/sd-th.tsx","src/components/sd-table/sd-tr/sd-tr.scss?tag=sd-tr","src/components/sd-table/sd-tr/sd-tr.tsx"],"sourcesContent":["sd-tbody {\r\n display: table-row-group;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-tbody',\r\n styleUrl: 'sd-tbody.scss',\r\n})\r\nexport class SdTbody {\r\n render() {\r\n return (\r\n <Host>\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n","sd-th {\r\n display: table-cell;\r\n padding: 12px;\r\n font-weight: bold;\r\n text-align: left;\r\n border-bottom: 2px solid #ddd;\r\n background-color: #f1f1f1;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-th',\r\n styleUrl: 'sd-th.scss',\r\n})\r\nexport class SdTh {\r\n render() {\r\n return (\r\n <Host role=\"columnheader\">\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n","sd-tr {\r\n display: table-row;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-tr',\r\n styleUrl: 'sd-tr.scss',\r\n})\r\nexport class SdTr {\r\n render() {\r\n return (\r\n <Host role=\"row\">\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,mCAAmC;;MCMzC,OAAO,GAAA,MAAA;;;;IACnB,MAAM,GAAA;QACL,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;ACXV,MAAM,OAAO,GAAG,+HAA+H;;MCMlI,IAAI,GAAA,MAAA;;;;IAChB,MAAM,GAAA;QACL,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAA,EACxB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;ACXV,MAAM,OAAO,GAAG,0BAA0B;;MCM7B,IAAI,GAAA,MAAA;;;;IAChB,MAAM,GAAA;QACL,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EAAA,EACf,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;;;"}

package/dist/{cjs/resolveColor-DxvExwgo.js → esm/color-CgyTlXBV.js} RENAMED Viewed

@@ -1,5 +1,3 @@
-'use strict';
 const primary = "#051d36";
 const secondary = "#555555";
 const accent = "#9c27b0";
@@ -126,7 +124,7 @@ const grey_10 = "#f6f6f6";
 const grey_05 = "#f9f9f9";
 const white = "#ffffff";
 const black = "#000000";
-var colors$1 = {
+var colors = {
 	primary: primary,
 	secondary: secondary,
 	accent: accent,
@@ -255,18 +253,7 @@ var colors$1 = {
 	black: black
 };
-const colors = colors$1;
-// 주어진 문자열이 color.json의 키이면 매핑된 HEX를 반환하고,
-// 아닐 경우 원문 그대로를 반환합니다. 값이 falsy면 기본 색상으로 대체합니다.
-function resolveColor(input, fallback = '#025497') {
-    if (!input)
-        return fallback;
-    const mapped = colors[input];
-    return mapped || input;
-}
-exports.colors = colors$1;
-exports.resolveColor = resolveColor;
-//# sourceMappingURL=resolveColor-DxvExwgo.js.map
+export { colors as c };
+//# sourceMappingURL=color-CgyTlXBV.js.map
-//# sourceMappingURL=resolveColor-DxvExwgo.js.map
+//# sourceMappingURL=color-CgyTlXBV.js.map

package/dist/esm/color-CgyTlXBV.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"color-CgyTlXBV.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/design-system.js CHANGED Viewed

@@ -16,6 +16,6 @@ var patchBrowser = () => {
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["sd-table-backup",[[772,"sd-table-backup",{"columns":[16],"rows":[1040],"selected":[1040],"rowKey":[1,"row-key"],"selectable":[4],"resizable":[4],"width":[1],"height":[1],"stickyHeader":[4,"sticky-header"],"stickyColumn":[16],"noDataLabel":[1,"no-data-label"],"isLoading":[4,"is-loading"],"pagination":[16],"bodyCellRenderer":[16],"useInternalPagination":[4,"use-internal-pagination"],"useRowsPerPageSelect":[4,"use-rows-per-page-select"],"rowsPerPageOption":[16],"currentPage":[32],"innerRows":[32],"innerSelected":[32],"columnWidths":[32],"scrolledLeft":[32],"scrolledRight":[32]},null,{"columns":["handleColumnsChange"],"rows":["handleRowsChange"],"selected":["handleSelectedChange"],"pagination":["handlePaginationChange"]}]]],["sd-select-multiple",[[772,"sd-select-multiple",{"value":[1040],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"useCheckbox":[4,"use-checkbox"],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-select-multiple-group",[[772,"sd-select-multiple-group",{"value":[1040],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"useCheckbox":[4,"use-checkbox"],"useAll":[4,"use-all"],"allCheckedLabel":[1,"all-checked-label"],"allCheckOptionLabel":[1,"all-check-option-label"],"containerStyle":[16],"triggerStyle":[16],"dropdownStyle":[16],"optionStyle":[16],"labelStyle":[16],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-date-picker",[[770,"sd-date-picker",{"date":[1],"label":[1],"selectable":[16],"disabled":[4],"isOpen":[32],"currentDate":[32],"currentYear":[32],"currentMonth":[32]}]]],["sd-date-range-picker",[[770,"sd-date-range-picker",{"date":[16],"label":[1],"selectable":[16],"maxRange":[2,"max-range"],"disabled":[4],"isOpen":[32],"dateRange":[32],"hoverDate":[32],"prevYear":[32],"prevMonth":[32]}]]],["sd-popover",[[769,"sd-popover",{"show":[1028],"placement":[513],"color":[513],"icon":[513],"iconSize":[514,"icon-size"],"label":[1],"buttonSize":[513,"button-size"],"buttonVariant":[513,"button-variant"],"menuTitle":[513,"title"],"messages":[16],"buttons":[16],"menuClass":[1,"menu-class"],"noHover":[4,"no-hover"],"useClose":[4,"use-close"],"showPopover":[32],"slotContent":[32]},null,{"show":["watchShowHandler"]}]]],["sd-badge",[[770,"sd-badge",{"size":[1],"color":[1],"label":[1]}]]],["sd-card",[[772,"sd-card",{"bordered":[4],"class":[1]}]]],["sd-progress",[[768,"sd-progress",{"type":[1],"status":[1],"percentage":[2],"size":[2],"strokeWidth":[2,"stroke-width"],"label":[1]}]]],["sd-tag",[[769,"sd-tag",{"size":[1],"color":[1],"rounded":[4],"label":[1],"bgColor":[1,"bg-color"],"textColor":[1,"text-color"]}]]],["sd-td",[[772,"sd-td",{"name":[1],"align":[1],"tdStyle":[16],"tdClass":[1,"td-class"]}]]],["sd-loading-spinner",[[256,"sd-loading-spinner"]]],["sd-button_15",[[772,"sd-table",{"columns":[16],"rows":[1040],"selected":[1040],"rowKey":[1,"row-key"],"selectable":[4],"resizable":[4],"width":[1],"height":[1],"stickyHeader":[4,"sticky-header"],"stickyColumn":[16],"noDataLabel":[1,"no-data-label"],"isLoading":[4,"is-loading"],"pagination":[16],"bodyCellRenderer":[16],"useInternalPagination":[4,"use-internal-pagination"],"useRowsPerPageSelect":[4,"use-rows-per-page-select"],"rowsPerPageOption":[16],"currentPage":[32],"innerRows":[32],"innerSelected":[32],"columnWidths":[32],"scrolledLeft":[32],"scrolledRight":[32]},null,{"columns":["handleColumnsChange"],"rows":["handleRowsChange"],"selected":["handleSelectedChange"],"pagination":["handlePaginationChange"]}],[768,"sd-guide",{"type":[1],"label":[1],"message":[1],"guideUrl":[1,"guide-url"],"popupWidth":[2,"popup-width"],"popupShow":[32]}],[260,"sd-tbody"],[260,"sd-th"],[260,"sd-tr"],[772,"sd-select",{"value":[1032],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}],[768,"sd-tooltip",{"trigger":[1],"placement":[1],"color":[1],"type":[1],"icon":[1],"iconSize":[2,"icon-size"],"label":[1],"buttonSize":[1,"button-size"],"buttonVariant":[1,"button-variant"],"noHover":[4,"no-hover"],"useClose":[4,"use-close"],"showTooltip":[32],"slotContent":[32]}],[768,"sd-pagination",{"currentPage":[2,"current-page"],"lastPage":[2,"last-page"],"simple":[4]},null,{"currentPage":["onPropChange"],"lastPage":["onPropChange"]}],[768,"sd-select-option",{"option":[16],"index":[2],"isSelected":[4,"is-selected"],"isFocused":[4,"is-focused"],"optionStyle":[16],"disabled":[4],"useCheckbox":[4,"use-checkbox"],"isHovered":[32],"isDisabled":[64]}],[769,"sd-tooltip-portal",{"to":[1],"parentRef":[16],"offset":[16],"zIndex":[2,"z-index"],"placement":[1],"open":[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-button",{"variant":[1],"size":[1],"color":[1],"label":[1],"disabled":[4],"type":[1],"icon":[1],"iconColor":[1,"icon-color"],"iconSize":[2,"icon-size"],"iconRight":[1,"icon-right"],"noHover":[4,"no-hover"],"class":[1]}],[768,"sd-checkbox",{"checked":[4],"val":[8],"disabled":[4],"label":[1],"isChecked":[32]},null,{"checked":["watchValueHandler"]}],[772,"sd-input",{"value":[1032],"label":[1],"placeholder":[1],"disabled":[4],"clearable":[4],"width":[8],"barcode":[4],"rules":[16],"autoFocus":[4,"auto-focus"],"status":[1],"inputClass":[1,"input-class"],"readonly":[4],"inputStyle":[16],"internalValue":[32],"error":[32],"focused":[32],"hovered":[32],"getNativeElement":[64]},null,{"value":["valueChanged"],"internalValue":["internalValueChanged"]}],[772,"sd-portal",{"to":[1],"parentRef":[16],"offset":[16],"zIndex":[2,"z-index"],"open":[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-icon",{"name":[1],"size":[8],"color":[1],"rotate":[2],"label":[1],"iconStyle":[16]}]]],["sd-select-option-group",[[768,"sd-select-option-group",{"option":[16],"index":[2],"isSelected":[4,"is-selected"],"isFocused":[4,"is-focused"],"optionStyle":[16],"disabled":[4],"useCheckbox":[4,"use-checkbox"],"useIndicator":[4,"use-indicator"],"countInfo":[16],"isHovered":[32],"isDisabled":[64]}]]],["sd-date-box",[[770,"sd-date-box",{"date":[8],"disabled":[4],"selected":[4],"isStartDate":[4,"is-start-date"],"isEndDate":[4,"is-end-date"],"isToday":[4,"is-today"],"inRange":[4,"in-range"],"type":[1]}]]]], options);
+  return bootstrapLazy([["sd-table",[[772,"sd-table",{"columns":[16],"rows":[1040],"selected":[1040],"rowKey":[1,"row-key"],"selectable":[4],"resizable":[4],"width":[1],"height":[1],"stickyHeader":[4,"sticky-header"],"stickyColumn":[16],"noDataLabel":[1,"no-data-label"],"isLoading":[4,"is-loading"],"pagination":[16],"bodyCellRenderer":[16],"useInternalPagination":[4,"use-internal-pagination"],"useRowsPerPageSelect":[4,"use-rows-per-page-select"],"rowsPerPageOption":[16],"currentPage":[32],"innerRows":[32],"innerSelected":[32],"columnWidths":[32],"scrolledLeft":[32],"scrolledRight":[32]},null,{"columns":["handleColumnsChange"],"rows":["handleRowsChange"],"selected":["handleSelectedChange"],"pagination":["handlePaginationChange"]}]]],["sd-select-multiple",[[772,"sd-select-multiple",{"value":[1040],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"useCheckbox":[4,"use-checkbox"],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-select-multiple-group",[[772,"sd-select-multiple-group",{"value":[1040],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"useCheckbox":[4,"use-checkbox"],"useAll":[4,"use-all"],"allCheckedLabel":[1,"all-checked-label"],"allCheckOptionLabel":[1,"all-check-option-label"],"containerStyle":[16],"triggerStyle":[16],"dropdownStyle":[16],"optionStyle":[16],"labelStyle":[16],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-date-picker",[[770,"sd-date-picker",{"date":[1],"label":[1],"selectable":[16],"disabled":[4],"isOpen":[32],"currentDate":[32],"currentYear":[32],"currentMonth":[32]}]]],["sd-date-range-picker",[[770,"sd-date-range-picker",{"date":[16],"label":[1],"selectable":[16],"maxRange":[2,"max-range"],"disabled":[4],"isOpen":[32],"dateRange":[32],"hoverDate":[32],"prevYear":[32],"prevMonth":[32]}]]],["sd-guide",[[768,"sd-guide",{"type":[1],"label":[1],"message":[1],"guideUrl":[1,"guide-url"],"popupTitle":[1,"popup-title"],"popupWidth":[2,"popup-width"],"popupShow":[32]}]]],["sd-popover",[[769,"sd-popover",{"show":[1028],"placement":[513],"color":[513],"icon":[513],"iconSize":[514,"icon-size"],"label":[1],"buttonSize":[513,"button-size"],"buttonVariant":[513,"button-variant"],"menuTitle":[513,"title"],"messages":[16],"buttons":[16],"menuClass":[1,"menu-class"],"noHover":[4,"no-hover"],"useClose":[4,"use-close"],"showPopover":[32],"slotContent":[32]},null,{"show":["watchShowHandler"]}]]],["sd-modal-card",[[772,"sd-modal-card",{"type":[1],"system":[1],"useCloseButton":[4,"use-close-button"],"modalTitle":[1,"modal-title"],"buttonFlexDirection":[1,"button-flex-direction"],"buttonProps":[16],"message":[16],"modalClass":[1,"modal-class"]}]]],["sd-badge",[[770,"sd-badge",{"size":[1],"color":[1],"label":[1]}]]],["sd-card",[[772,"sd-card",{"bordered":[4],"class":[1]}]]],["sd-progress",[[768,"sd-progress",{"type":[1],"status":[1],"percentage":[2],"size":[2],"strokeWidth":[2,"stroke-width"],"label":[1]}]]],["sd-tag",[[769,"sd-tag",{"size":[1],"color":[1],"rounded":[4],"label":[1],"bgColor":[1,"bg-color"],"textColor":[1,"text-color"]}]]],["sd-td",[[772,"sd-td",{"name":[1],"align":[1],"tdStyle":[16],"tdClass":[1,"td-class"]}]]],["sd-date-box",[[770,"sd-date-box",{"date":[8],"disabled":[4],"selected":[4],"isStartDate":[4,"is-start-date"],"isEndDate":[4,"is-end-date"],"isToday":[4,"is-today"],"inRange":[4,"in-range"],"type":[1]}]]],["sd-tbody_3",[[260,"sd-tbody"],[260,"sd-th"],[260,"sd-tr"]]],["sd-button_12",[[772,"sd-table-backup",{"columns":[16],"rows":[1040],"selected":[1040],"rowKey":[1,"row-key"],"selectable":[4],"resizable":[4],"width":[1],"height":[1],"stickyHeader":[4,"sticky-header"],"stickyColumn":[16],"noDataLabel":[1,"no-data-label"],"isLoading":[4,"is-loading"],"pagination":[16],"bodyCellRenderer":[16],"useInternalPagination":[4,"use-internal-pagination"],"useRowsPerPageSelect":[4,"use-rows-per-page-select"],"rowsPerPageOption":[16],"useVirtualScroll":[4,"use-virtual-scroll"],"virtualRowHeight":[2,"virtual-row-height"],"virtualBufferSize":[2,"virtual-buffer-size"],"currentPage":[32],"innerRows":[32],"innerSelected":[32],"columnWidths":[32],"scrolledLeft":[32],"scrolledRight":[32],"virtualStartIndex":[32],"virtualEndIndex":[32],"scrollTopPosition":[32]},null,{"columns":["handleColumnsChange"],"rows":["handleRowsChange"],"selected":["handleSelectedChange"],"pagination":["handlePaginationChange"]}],[256,"sd-loading-spinner"],[772,"sd-select",{"value":[1032],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}],[768,"sd-tooltip",{"trigger":[1],"placement":[1],"color":[1],"type":[1],"icon":[1],"iconSize":[2,"icon-size"],"label":[1],"buttonSize":[1,"button-size"],"buttonVariant":[1,"button-variant"],"noHover":[4,"no-hover"],"useClose":[4,"use-close"],"showTooltip":[32],"slotContent":[32]}],[768,"sd-pagination",{"currentPage":[2,"current-page"],"lastPage":[2,"last-page"],"simple":[4]}],[768,"sd-select-option",{"option":[16],"index":[2],"isSelected":[4,"is-selected"],"isFocused":[4,"is-focused"],"optionStyle":[16],"disabled":[4],"useCheckbox":[4,"use-checkbox"],"isHovered":[32],"isDisabled":[64]}],[769,"sd-tooltip-portal",{"to":[1],"parentRef":[16],"offset":[16],"zIndex":[2,"z-index"],"placement":[1],"open":[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-button",{"variant":[1],"size":[1],"color":[1],"label":[1],"disabled":[4],"type":[1],"icon":[1],"iconColor":[1,"icon-color"],"iconSize":[2,"icon-size"],"iconRight":[1,"icon-right"],"noHover":[4,"no-hover"],"class":[1]}],[768,"sd-checkbox",{"checked":[4],"val":[8],"disabled":[4],"label":[1],"isChecked":[32]},null,{"checked":["watchValueHandler"]}],[772,"sd-input",{"value":[1032],"label":[1],"placeholder":[1],"disabled":[4],"clearable":[4],"width":[8],"barcode":[4],"rules":[16],"autoFocus":[4,"auto-focus"],"status":[1],"inputClass":[1,"input-class"],"readonly":[4],"inputStyle":[16],"internalValue":[32],"error":[32],"focused":[32],"hovered":[32],"getNativeElement":[64]},null,{"value":["valueChanged"],"internalValue":["internalValueChanged"]}],[772,"sd-portal",{"to":[1],"parentRef":[16],"offset":[16],"zIndex":[2,"z-index"],"open":[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-icon",{"name":[1],"size":[8],"color":[1],"rotate":[2],"label":[1],"iconStyle":[16]}]]],["sd-select-option-group",[[768,"sd-select-option-group",{"option":[16],"index":[2],"isSelected":[4,"is-selected"],"isFocused":[4,"is-focused"],"optionStyle":[16],"disabled":[4],"useCheckbox":[4,"use-checkbox"],"useIndicator":[4,"use-indicator"],"countInfo":[16],"isHovered":[32],"isDisabled":[64]}]]]], options);
 });
 //# sourceMappingURL=design-system.js.map

package/dist/esm/loader.js CHANGED Viewed

@@ -4,7 +4,7 @@ export { s as setNonce } from './index-B2T3tS5r.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["sd-table-backup",[[772,"sd-table-backup",{"columns":[16],"rows":[1040],"selected":[1040],"rowKey":[1,"row-key"],"selectable":[4],"resizable":[4],"width":[1],"height":[1],"stickyHeader":[4,"sticky-header"],"stickyColumn":[16],"noDataLabel":[1,"no-data-label"],"isLoading":[4,"is-loading"],"pagination":[16],"bodyCellRenderer":[16],"useInternalPagination":[4,"use-internal-pagination"],"useRowsPerPageSelect":[4,"use-rows-per-page-select"],"rowsPerPageOption":[16],"currentPage":[32],"innerRows":[32],"innerSelected":[32],"columnWidths":[32],"scrolledLeft":[32],"scrolledRight":[32]},null,{"columns":["handleColumnsChange"],"rows":["handleRowsChange"],"selected":["handleSelectedChange"],"pagination":["handlePaginationChange"]}]]],["sd-select-multiple",[[772,"sd-select-multiple",{"value":[1040],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"useCheckbox":[4,"use-checkbox"],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-select-multiple-group",[[772,"sd-select-multiple-group",{"value":[1040],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"useCheckbox":[4,"use-checkbox"],"useAll":[4,"use-all"],"allCheckedLabel":[1,"all-checked-label"],"allCheckOptionLabel":[1,"all-check-option-label"],"containerStyle":[16],"triggerStyle":[16],"dropdownStyle":[16],"optionStyle":[16],"labelStyle":[16],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-date-picker",[[770,"sd-date-picker",{"date":[1],"label":[1],"selectable":[16],"disabled":[4],"isOpen":[32],"currentDate":[32],"currentYear":[32],"currentMonth":[32]}]]],["sd-date-range-picker",[[770,"sd-date-range-picker",{"date":[16],"label":[1],"selectable":[16],"maxRange":[2,"max-range"],"disabled":[4],"isOpen":[32],"dateRange":[32],"hoverDate":[32],"prevYear":[32],"prevMonth":[32]}]]],["sd-popover",[[769,"sd-popover",{"show":[1028],"placement":[513],"color":[513],"icon":[513],"iconSize":[514,"icon-size"],"label":[1],"buttonSize":[513,"button-size"],"buttonVariant":[513,"button-variant"],"menuTitle":[513,"title"],"messages":[16],"buttons":[16],"menuClass":[1,"menu-class"],"noHover":[4,"no-hover"],"useClose":[4,"use-close"],"showPopover":[32],"slotContent":[32]},null,{"show":["watchShowHandler"]}]]],["sd-badge",[[770,"sd-badge",{"size":[1],"color":[1],"label":[1]}]]],["sd-card",[[772,"sd-card",{"bordered":[4],"class":[1]}]]],["sd-progress",[[768,"sd-progress",{"type":[1],"status":[1],"percentage":[2],"size":[2],"strokeWidth":[2,"stroke-width"],"label":[1]}]]],["sd-tag",[[769,"sd-tag",{"size":[1],"color":[1],"rounded":[4],"label":[1],"bgColor":[1,"bg-color"],"textColor":[1,"text-color"]}]]],["sd-td",[[772,"sd-td",{"name":[1],"align":[1],"tdStyle":[16],"tdClass":[1,"td-class"]}]]],["sd-loading-spinner",[[256,"sd-loading-spinner"]]],["sd-button_15",[[772,"sd-table",{"columns":[16],"rows":[1040],"selected":[1040],"rowKey":[1,"row-key"],"selectable":[4],"resizable":[4],"width":[1],"height":[1],"stickyHeader":[4,"sticky-header"],"stickyColumn":[16],"noDataLabel":[1,"no-data-label"],"isLoading":[4,"is-loading"],"pagination":[16],"bodyCellRenderer":[16],"useInternalPagination":[4,"use-internal-pagination"],"useRowsPerPageSelect":[4,"use-rows-per-page-select"],"rowsPerPageOption":[16],"currentPage":[32],"innerRows":[32],"innerSelected":[32],"columnWidths":[32],"scrolledLeft":[32],"scrolledRight":[32]},null,{"columns":["handleColumnsChange"],"rows":["handleRowsChange"],"selected":["handleSelectedChange"],"pagination":["handlePaginationChange"]}],[768,"sd-guide",{"type":[1],"label":[1],"message":[1],"guideUrl":[1,"guide-url"],"popupWidth":[2,"popup-width"],"popupShow":[32]}],[260,"sd-tbody"],[260,"sd-th"],[260,"sd-tr"],[772,"sd-select",{"value":[1032],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}],[768,"sd-tooltip",{"trigger":[1],"placement":[1],"color":[1],"type":[1],"icon":[1],"iconSize":[2,"icon-size"],"label":[1],"buttonSize":[1,"button-size"],"buttonVariant":[1,"button-variant"],"noHover":[4,"no-hover"],"useClose":[4,"use-close"],"showTooltip":[32],"slotContent":[32]}],[768,"sd-pagination",{"currentPage":[2,"current-page"],"lastPage":[2,"last-page"],"simple":[4]},null,{"currentPage":["onPropChange"],"lastPage":["onPropChange"]}],[768,"sd-select-option",{"option":[16],"index":[2],"isSelected":[4,"is-selected"],"isFocused":[4,"is-focused"],"optionStyle":[16],"disabled":[4],"useCheckbox":[4,"use-checkbox"],"isHovered":[32],"isDisabled":[64]}],[769,"sd-tooltip-portal",{"to":[1],"parentRef":[16],"offset":[16],"zIndex":[2,"z-index"],"placement":[1],"open":[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-button",{"variant":[1],"size":[1],"color":[1],"label":[1],"disabled":[4],"type":[1],"icon":[1],"iconColor":[1,"icon-color"],"iconSize":[2,"icon-size"],"iconRight":[1,"icon-right"],"noHover":[4,"no-hover"],"class":[1]}],[768,"sd-checkbox",{"checked":[4],"val":[8],"disabled":[4],"label":[1],"isChecked":[32]},null,{"checked":["watchValueHandler"]}],[772,"sd-input",{"value":[1032],"label":[1],"placeholder":[1],"disabled":[4],"clearable":[4],"width":[8],"barcode":[4],"rules":[16],"autoFocus":[4,"auto-focus"],"status":[1],"inputClass":[1,"input-class"],"readonly":[4],"inputStyle":[16],"internalValue":[32],"error":[32],"focused":[32],"hovered":[32],"getNativeElement":[64]},null,{"value":["valueChanged"],"internalValue":["internalValueChanged"]}],[772,"sd-portal",{"to":[1],"parentRef":[16],"offset":[16],"zIndex":[2,"z-index"],"open":[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-icon",{"name":[1],"size":[8],"color":[1],"rotate":[2],"label":[1],"iconStyle":[16]}]]],["sd-select-option-group",[[768,"sd-select-option-group",{"option":[16],"index":[2],"isSelected":[4,"is-selected"],"isFocused":[4,"is-focused"],"optionStyle":[16],"disabled":[4],"useCheckbox":[4,"use-checkbox"],"useIndicator":[4,"use-indicator"],"countInfo":[16],"isHovered":[32],"isDisabled":[64]}]]],["sd-date-box",[[770,"sd-date-box",{"date":[8],"disabled":[4],"selected":[4],"isStartDate":[4,"is-start-date"],"isEndDate":[4,"is-end-date"],"isToday":[4,"is-today"],"inRange":[4,"in-range"],"type":[1]}]]]], options);
+  return bootstrapLazy([["sd-table",[[772,"sd-table",{"columns":[16],"rows":[1040],"selected":[1040],"rowKey":[1,"row-key"],"selectable":[4],"resizable":[4],"width":[1],"height":[1],"stickyHeader":[4,"sticky-header"],"stickyColumn":[16],"noDataLabel":[1,"no-data-label"],"isLoading":[4,"is-loading"],"pagination":[16],"bodyCellRenderer":[16],"useInternalPagination":[4,"use-internal-pagination"],"useRowsPerPageSelect":[4,"use-rows-per-page-select"],"rowsPerPageOption":[16],"currentPage":[32],"innerRows":[32],"innerSelected":[32],"columnWidths":[32],"scrolledLeft":[32],"scrolledRight":[32]},null,{"columns":["handleColumnsChange"],"rows":["handleRowsChange"],"selected":["handleSelectedChange"],"pagination":["handlePaginationChange"]}]]],["sd-select-multiple",[[772,"sd-select-multiple",{"value":[1040],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"useCheckbox":[4,"use-checkbox"],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-select-multiple-group",[[772,"sd-select-multiple-group",{"value":[1040],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"useCheckbox":[4,"use-checkbox"],"useAll":[4,"use-all"],"allCheckedLabel":[1,"all-checked-label"],"allCheckOptionLabel":[1,"all-check-option-label"],"containerStyle":[16],"triggerStyle":[16],"dropdownStyle":[16],"optionStyle":[16],"labelStyle":[16],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-date-picker",[[770,"sd-date-picker",{"date":[1],"label":[1],"selectable":[16],"disabled":[4],"isOpen":[32],"currentDate":[32],"currentYear":[32],"currentMonth":[32]}]]],["sd-date-range-picker",[[770,"sd-date-range-picker",{"date":[16],"label":[1],"selectable":[16],"maxRange":[2,"max-range"],"disabled":[4],"isOpen":[32],"dateRange":[32],"hoverDate":[32],"prevYear":[32],"prevMonth":[32]}]]],["sd-guide",[[768,"sd-guide",{"type":[1],"label":[1],"message":[1],"guideUrl":[1,"guide-url"],"popupTitle":[1,"popup-title"],"popupWidth":[2,"popup-width"],"popupShow":[32]}]]],["sd-popover",[[769,"sd-popover",{"show":[1028],"placement":[513],"color":[513],"icon":[513],"iconSize":[514,"icon-size"],"label":[1],"buttonSize":[513,"button-size"],"buttonVariant":[513,"button-variant"],"menuTitle":[513,"title"],"messages":[16],"buttons":[16],"menuClass":[1,"menu-class"],"noHover":[4,"no-hover"],"useClose":[4,"use-close"],"showPopover":[32],"slotContent":[32]},null,{"show":["watchShowHandler"]}]]],["sd-modal-card",[[772,"sd-modal-card",{"type":[1],"system":[1],"useCloseButton":[4,"use-close-button"],"modalTitle":[1,"modal-title"],"buttonFlexDirection":[1,"button-flex-direction"],"buttonProps":[16],"message":[16],"modalClass":[1,"modal-class"]}]]],["sd-badge",[[770,"sd-badge",{"size":[1],"color":[1],"label":[1]}]]],["sd-card",[[772,"sd-card",{"bordered":[4],"class":[1]}]]],["sd-progress",[[768,"sd-progress",{"type":[1],"status":[1],"percentage":[2],"size":[2],"strokeWidth":[2,"stroke-width"],"label":[1]}]]],["sd-tag",[[769,"sd-tag",{"size":[1],"color":[1],"rounded":[4],"label":[1],"bgColor":[1,"bg-color"],"textColor":[1,"text-color"]}]]],["sd-td",[[772,"sd-td",{"name":[1],"align":[1],"tdStyle":[16],"tdClass":[1,"td-class"]}]]],["sd-date-box",[[770,"sd-date-box",{"date":[8],"disabled":[4],"selected":[4],"isStartDate":[4,"is-start-date"],"isEndDate":[4,"is-end-date"],"isToday":[4,"is-today"],"inRange":[4,"in-range"],"type":[1]}]]],["sd-tbody_3",[[260,"sd-tbody"],[260,"sd-th"],[260,"sd-tr"]]],["sd-button_12",[[772,"sd-table-backup",{"columns":[16],"rows":[1040],"selected":[1040],"rowKey":[1,"row-key"],"selectable":[4],"resizable":[4],"width":[1],"height":[1],"stickyHeader":[4,"sticky-header"],"stickyColumn":[16],"noDataLabel":[1,"no-data-label"],"isLoading":[4,"is-loading"],"pagination":[16],"bodyCellRenderer":[16],"useInternalPagination":[4,"use-internal-pagination"],"useRowsPerPageSelect":[4,"use-rows-per-page-select"],"rowsPerPageOption":[16],"useVirtualScroll":[4,"use-virtual-scroll"],"virtualRowHeight":[2,"virtual-row-height"],"virtualBufferSize":[2,"virtual-buffer-size"],"currentPage":[32],"innerRows":[32],"innerSelected":[32],"columnWidths":[32],"scrolledLeft":[32],"scrolledRight":[32],"virtualStartIndex":[32],"virtualEndIndex":[32],"scrollTopPosition":[32]},null,{"columns":["handleColumnsChange"],"rows":["handleRowsChange"],"selected":["handleSelectedChange"],"pagination":["handlePaginationChange"]}],[256,"sd-loading-spinner"],[772,"sd-select",{"value":[1032],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}],[768,"sd-tooltip",{"trigger":[1],"placement":[1],"color":[1],"type":[1],"icon":[1],"iconSize":[2,"icon-size"],"label":[1],"buttonSize":[1,"button-size"],"buttonVariant":[1,"button-variant"],"noHover":[4,"no-hover"],"useClose":[4,"use-close"],"showTooltip":[32],"slotContent":[32]}],[768,"sd-pagination",{"currentPage":[2,"current-page"],"lastPage":[2,"last-page"],"simple":[4]}],[768,"sd-select-option",{"option":[16],"index":[2],"isSelected":[4,"is-selected"],"isFocused":[4,"is-focused"],"optionStyle":[16],"disabled":[4],"useCheckbox":[4,"use-checkbox"],"isHovered":[32],"isDisabled":[64]}],[769,"sd-tooltip-portal",{"to":[1],"parentRef":[16],"offset":[16],"zIndex":[2,"z-index"],"placement":[1],"open":[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-button",{"variant":[1],"size":[1],"color":[1],"label":[1],"disabled":[4],"type":[1],"icon":[1],"iconColor":[1,"icon-color"],"iconSize":[2,"icon-size"],"iconRight":[1,"icon-right"],"noHover":[4,"no-hover"],"class":[1]}],[768,"sd-checkbox",{"checked":[4],"val":[8],"disabled":[4],"label":[1],"isChecked":[32]},null,{"checked":["watchValueHandler"]}],[772,"sd-input",{"value":[1032],"label":[1],"placeholder":[1],"disabled":[4],"clearable":[4],"width":[8],"barcode":[4],"rules":[16],"autoFocus":[4,"auto-focus"],"status":[1],"inputClass":[1,"input-class"],"readonly":[4],"inputStyle":[16],"internalValue":[32],"error":[32],"focused":[32],"hovered":[32],"getNativeElement":[64]},null,{"value":["valueChanged"],"internalValue":["internalValueChanged"]}],[772,"sd-portal",{"to":[1],"parentRef":[16],"offset":[16],"zIndex":[2,"z-index"],"open":[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-icon",{"name":[1],"size":[8],"color":[1],"rotate":[2],"label":[1],"iconStyle":[16]}]]],["sd-select-option-group",[[768,"sd-select-option-group",{"option":[16],"index":[2],"isSelected":[4,"is-selected"],"isFocused":[4,"is-focused"],"optionStyle":[16],"disabled":[4],"useCheckbox":[4,"use-checkbox"],"useIndicator":[4,"use-indicator"],"countInfo":[16],"isHovered":[32],"isDisabled":[64]}]]]], options);
 };
 export { defineCustomElements };

package/dist/esm/resolveColor-CswQ9y2Q.js ADDED Viewed

@@ -0,0 +1,16 @@
+import { c as colors$1 } from './color-CgyTlXBV.js';
+const colors = colors$1;
+// 주어진 문자열이 color.json의 키이면 매핑된 HEX를 반환하고,
+// 아닐 경우 원문 그대로를 반환합니다. 값이 falsy면 기본 색상으로 대체합니다.
+function resolveColor(input, fallback = '#025497') {
+    if (!input)
+        return fallback;
+    const mapped = colors[input];
+    return mapped || input;
+}
+export { resolveColor as r };
+//# sourceMappingURL=resolveColor-CswQ9y2Q.js.map
+//# sourceMappingURL=resolveColor-CswQ9y2Q.js.map

package/dist/{cjs/resolveColor-DxvExwgo.js.map → esm/resolveColor-CswQ9y2Q.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"resolveColor-~~DxvExwgo~~.js","sources":["src/utils/color/resolveColor.ts"],"sourcesContent":["import rawColors from '../../styles/color.json';\r\n\r\ntype ColorMap = Record<string, string>;\r\nconst colors: ColorMap = rawColors as ColorMap;\r\n\r\n// 주어진 문자열이 color.json의 키이면 매핑된 HEX를 반환하고,\r\n// 아닐 경우 원문 그대로를 반환합니다. 값이 falsy면 기본 색상으로 대체합니다.\r\n\r\nexport function resolveColor(\r\n input: string \| undefined \| null,\r\n fallback: string = '#025497',\r\n): string {\r\n if (!input) return fallback;\r\n const mapped = colors[input];\r\n return mapped \|\| input;\r\n}\r\n"],"names":["rawColors"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAM,MAAM,GAAaA,QAAqB;AAE9C;AACA;SAEgB,YAAY,CAC3B,KAAgC,EAChC,WAAmB,SAAS,EAAA;AAE5B,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,QAAQ;AAC3B,IAAA,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC;IAC5B,OAAO,MAAM,IAAI,KAAK;AACvB~~;;;;;~~"}
1	+ {"version":3,"file":"resolveColor-CswQ9y2Q.js","sources":["src/utils/color/resolveColor.ts"],"sourcesContent":["import rawColors from '../../styles/color.json';\r\n\r\ntype ColorMap = Record<string, string>;\r\nconst colors: ColorMap = rawColors as ColorMap;\r\n\r\n// 주어진 문자열이 color.json의 키이면 매핑된 HEX를 반환하고,\r\n// 아닐 경우 원문 그대로를 반환합니다. 값이 falsy면 기본 색상으로 대체합니다.\r\n\r\nexport function resolveColor(\r\n input: string \| undefined \| null,\r\n fallback: string = '#025497',\r\n): string {\r\n if (!input) return fallback;\r\n const mapped = colors[input];\r\n return mapped \|\| input;\r\n}\r\n"],"names":["rawColors"],"mappings":";;AAGA,MAAM,MAAM,GAAaA,QAAqB;AAE9C;AACA;SAEgB,YAAY,CAC3B,KAAgC,EAChC,WAAmB,SAAS,EAAA;AAE5B,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,QAAQ;AAC3B,IAAA,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC;IAC5B,OAAO,MAAM,IAAI,KAAK;AACvB;;;;"}

package/dist/esm/sd-badge.entry.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-B2T3tS5r.js';
-import { r as resolveColor } from './resolveColor-BYf-ybt2.js';
+import { r as resolveColor } from './resolveColor-CswQ9y2Q.js';
+import './color-CgyTlXBV.js';
 const sdBadgeCss = ".sd-badge.sc-sd-badge{display:inline-flex;align-items:center;justify-content:center}.sd-badge.sc-sd-badge .sd-badge__dot.sc-sd-badge{background:var(--sd-badge-color, #0075ff)}.sd-badge.sc-sd-badge .sd-badge__label.sc-sd-badge{margin-left:8px;font-size:12px;font-weight:500;line-height:20px;color:#333333}.sd-badge--sm.sc-sd-badge .sd-badge__dot.sc-sd-badge{width:4px;height:4px;min-width:4px;min-height:4px;border-radius:2px}.sd-badge--md.sc-sd-badge .sd-badge__dot.sc-sd-badge{width:8px;height:8px;min-width:8px;min-height:8px;border-radius:4px}";
@@ -12,7 +13,7 @@ const SdBadge = class {
     label = '';
     render() {
         const resolvedColor = resolveColor(this.color);
-        return (h(Host, { key: 'f5aec7173946083ad1ef376564a796ed8cb3cf0b' }, h("div", { key: '79f668240ed83b0e74fa7d0de8429f2b8434bdf3', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'e562c933d17047ff841624a252fb4a05cc09a5e3', class: "sd-badge__dot" }), h("div", { key: 'd7e53aa3cbc429138c38d81888ee50269d1cbb6c', class: "sd-badge__label" }, this.label))));
+        return (h(Host, { key: 'b88fba271994742a1a1d3379db44e8a307c5a308' }, h("div", { key: '961c25f3f87dc51cd670aa18706d5a5f3517f8bf', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '2de1b86cc1e714a436cb2d2810b2646a2ac4fd7c', class: "sd-badge__dot" }), h("div", { key: '89943a046b33c105155236a7e0b411dfbcd72487', class: "sd-badge__label" }, this.label))));
     }
 };
 SdBadge.style = sdBadgeCss;

package/dist/esm/sd-badge.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-badge.entry.js","sources":["src/components/sd-badge/sd-badge.scss?tag=sd-badge&encapsulation=scoped","src/components/sd-badge/sd-badge.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n.sd-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n .sd-badge__dot {\r\n background: var(--sd-badge-color, $brilliantblue_75);\r\n }\r\n .sd-badge__label {\r\n margin-left: 8px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n line-height: 20px;\r\n color: $grey_90;\r\n }\r\n\r\n &--sm {\r\n .sd-badge__dot {\r\n width: 4px;\r\n height: 4px;\r\n min-width: 4px;\r\n min-height: 4px;\r\n border-radius: 2px;\r\n }\r\n }\r\n\r\n &--md {\r\n .sd-badge__dot {\r\n width: 8px;\r\n height: 8px;\r\n min-width: 8px;\r\n min-height: 8px;\r\n border-radius: 4px;\r\n }\r\n }\r\n}\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\nimport { resolveColor } from '../../utils/color';\r\n\r\n@Component({\r\n tag: 'sd-badge',\r\n styleUrl: 'sd-badge.scss',\r\n scoped: true,\r\n})\r\nexport class SdBadge {\r\n @Prop() size: 'sm' \| 'md' = 'md';\r\n @Prop() color: string = 'brilliantblue_75';\r\n @Prop() label: string = '';\r\n\r\n render() {\r\n const resolvedColor = resolveColor(this.color);\r\n\r\n return (\r\n <Host>\r\n <div class={`sd-badge sd-badge--${this.size}`} style={{ '--sd-badge-color': resolvedColor }}>\r\n <div class=\"sd-badge__dot\"></div>\r\n <div class=\"sd-badge__label\">{this.label}</div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"~~;;;~~AAAA,MAAM,UAAU,GAAG,oiBAAoiB;;MCQ1iB,OAAO,GAAA,MAAA;;;;IACX,IAAI,GAAgB,IAAI;IACxB,KAAK,GAAW,kBAAkB;IAClC,KAAK,GAAW,EAAE;IAE1B,MAAM,GAAA;QACL,MAAM,aAAa,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;AAE9C,QAAA,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,mBAAA,EAAsB,IAAI,CAAC,IAAI,CAAE,CAAA,EAAE,KAAK,EAAE,EAAE,kBAAkB,EAAE,aAAa,EAAE,EAAA,EAC1F,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAO,CAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAE,EAAA,IAAI,CAAC,KAAK,CAAO,CAC1C,CACA;;;;;;;"}
1	+ {"version":3,"file":"sd-badge.entry.js","sources":["src/components/sd-badge/sd-badge.scss?tag=sd-badge&encapsulation=scoped","src/components/sd-badge/sd-badge.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n.sd-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n .sd-badge__dot {\r\n background: var(--sd-badge-color, $brilliantblue_75);\r\n }\r\n .sd-badge__label {\r\n margin-left: 8px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n line-height: 20px;\r\n color: $grey_90;\r\n }\r\n\r\n &--sm {\r\n .sd-badge__dot {\r\n width: 4px;\r\n height: 4px;\r\n min-width: 4px;\r\n min-height: 4px;\r\n border-radius: 2px;\r\n }\r\n }\r\n\r\n &--md {\r\n .sd-badge__dot {\r\n width: 8px;\r\n height: 8px;\r\n min-width: 8px;\r\n min-height: 8px;\r\n border-radius: 4px;\r\n }\r\n }\r\n}\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\nimport { resolveColor } from '../../utils/color';\r\n\r\n@Component({\r\n tag: 'sd-badge',\r\n styleUrl: 'sd-badge.scss',\r\n scoped: true,\r\n})\r\nexport class SdBadge {\r\n @Prop() size: 'sm' \| 'md' = 'md';\r\n @Prop() color: string = 'brilliantblue_75';\r\n @Prop() label: string = '';\r\n\r\n render() {\r\n const resolvedColor = resolveColor(this.color);\r\n\r\n return (\r\n <Host>\r\n <div class={`sd-badge sd-badge--${this.size}`} style={{ '--sd-badge-color': resolvedColor }}>\r\n <div class=\"sd-badge__dot\"></div>\r\n <div class=\"sd-badge__label\">{this.label}</div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;;;AAAA,MAAM,UAAU,GAAG,oiBAAoiB;;MCQ1iB,OAAO,GAAA,MAAA;;;;IACX,IAAI,GAAgB,IAAI;IACxB,KAAK,GAAW,kBAAkB;IAClC,KAAK,GAAW,EAAE;IAE1B,MAAM,GAAA;QACL,MAAM,aAAa,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;AAE9C,QAAA,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,mBAAA,EAAsB,IAAI,CAAC,IAAI,CAAE,CAAA,EAAE,KAAK,EAAE,EAAE,kBAAkB,EAAE,aAAa,EAAE,EAAA,EAC1F,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAO,CAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAE,EAAA,IAAI,CAAC,KAAK,CAAO,CAC1C,CACA;;;;;;;"}