npm - @sellmate/design-system - Versions diffs - 0.0.12 → 0.0.13 - Mend

@sellmate/design-system 0.0.12 → 0.0.13

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

package/dist/collection/components/sd-checkbox/sd-checkbox.js CHANGED Viewed

@@ -60,7 +60,7 @@ export class SdCheckbox {
         this.sdChange.emit(newValue);
     };
     render() {
-        return (h(Host, { key: '33dcecda70333bd89c1ca7f463dff7ab7f831d3f' }, h("label", { key: 'e4dd05930a655be5a86eeee294d8f8df5c944880', class: this.getCheckboxClasses() }, h("input", { key: '9beb8dd096c1a3de891e446e124c49cfdc3d94de', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: this.handleChange }), h("div", { key: '551540600b67521601d5e487b2aa0229390357cb', class: "sd-checkbox__bg", style: this.checkboxStyle }, this.isChecked ? (h("sd-icon", { name: "check", size: 12, color: this.disabled ? '#888888' : 'white' })) : null), this.label && h("span", { key: '56e548b559c3491051cd6a490c1a150850926389', class: "sd-checkbox__label" }, this.label))));
+        return (h(Host, { key: '6e88ca34b4464d33b0aa54880eff5821d5c612d9' }, h("label", { key: '392dc3fe13ef18eb34625b830702f390131d2bab', class: this.getCheckboxClasses() }, h("input", { key: 'ed84bc69e4928488cf1ae76e62b0cbea4ca6a636', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: this.handleChange }), h("div", { key: 'e434643d9bda619da1af184ea93b333364cc4972', class: "sd-checkbox__bg", style: this.checkboxStyle }, this.isChecked ? (h("sd-icon", { name: "check", size: 12, color: this.disabled ? '#888888' : 'white' })) : null), this.label && h("span", { key: '84d72a707e97e7b22a2c3183353bc295340ba490', class: "sd-checkbox__label" }, this.label))));
     }
     static get is() { return "sd-checkbox"; }
     static get encapsulation() { return "scoped"; }

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

@@ -74,9 +74,9 @@ export class SdDatePicker {
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: '073aefcfa73d78e3e42c27b8b14afd3756d954bd', class: "sd-date-picker" }, h("sd-input", { key: 'c46c12e0bf11cc2e5a7ae6a8e9ddfa146563163c', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
+        return (h(Host, { key: '31250b271bdfe3c4ce671e5a337e1eefbff206d4', class: "sd-date-picker" }, h("sd-input", { key: '19a53a715cf767cfaa78bcbb1177618fa3333305', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
                 margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '412b708ed864833ec83cdaecc1e9c1d7808068e3', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '87fddfdadfc39778d516369d0acd3e73b89f810d', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '87944e2df0a81a75a13c42ea8e0d9b5979ed85af', class: "sd-date-picker__menu" }, h("div", { key: 'a7c035944794022eccb1b19e54d80b7157a54107', class: "sd-date-picker__header" }, h("div", { key: 'ae4b0e6e8764501dae7415b263a846e215734d82', class: "year-nav" }, h("button", { key: 'a6831bf4ed39bd406362fd1e6f6b443acec8213f', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: 'b3f52472a598fa0779a74e0032cf25f5044d92e6', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '136e2730aefa9ce02cca085d2a8dc1ae13ede1aa', class: "year-nav__current" }, this.currentYear), h("button", { key: 'abf7c4d914ae33811339f81dd54fe600998f90c6', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '2dd8c6a58838272f24ff602ffe385f1e574c2da3', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '74123866c86d484fa1005626fca0a96e40ab12d0', class: "month-nav" }, h("button", { key: '133ab31234a32aea40919b3f1cad38b1473973ad', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '3d1bdf5ea9ad80b065863a0afac05e3d1e46e3c5', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'e833ffc8ab88463416e0d35a5b14339489905015', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '9dfa18116b469aa5cc081c3e30f95d3e3a1f7516', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '4324a57675a9119d8f47247f769a44c85e3be55b', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '5f140871bdaaa1ed75743a98b4d77d14b1f7c970', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'c2b132cbba69b74d8408199d211a50a48419c173', class: "sd-date-picker__body" }, [
+            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '7cb545aa2caf117b9681bea5a1cab5c21f5804df', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '08c8ec69c57aa9899e3c93978965883525fe635d', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '64f68877a65206743517e6db5b3221527128597b', class: "sd-date-picker__menu" }, h("div", { key: 'f527835c913d10eadf17bb8ef4b7068675c23bc2', class: "sd-date-picker__header" }, h("div", { key: 'ecd393d337e3a0ffc3915e5a02de10a0b429e744', class: "year-nav" }, h("button", { key: '72f9f4ce5f04a32d54d74666f83add668c7c91cd', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '1331873a57d9658704fc8c14ec4db51713759aa4', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '8369803e76f17dace570294b0469a8cdc889dd07', class: "year-nav__current" }, this.currentYear), h("button", { key: '2c6dde370f92cdc6b43deb159cdd44f0ff61b463', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: 'e0ada642507fadecc58cc1b19dce43a5a96d61fe', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '8bef4214917e837edf0f6d5ae6c80d2b8bc0abc7', class: "month-nav" }, h("button", { key: '1e4fef6ee5fc4da3aac9c429da37b1a5be6b4059', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '4a1537b2afb6cbd4653046416a2d0a3a0424e09e', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '39f866e69fab5c86589f039773abdc9267748242', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'cbc177a8850d37ba170eb85d9cf330af198066e4', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '530bd26b28a779b25e72fe90f4a77d8b2e2f0311', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '283742d67f2916e4fe44efea649442872681506e', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '6fe54b4404d793ca629574b2eeac9b05bff2afde', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

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

@@ -137,9 +137,9 @@ export class SdDateRangePicker {
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: 'c29f3b26096b1a1edb62bff1f04445c288f94510', class: "sd-date-range-picker" }, h("sd-input", { key: 'fed72858cd1f3a2121d385adaec9e9de9dc1bb57', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
+        return (h(Host, { key: '60ab93954c070ffbbc8c5c81d39b9e2202d682fa', class: "sd-date-range-picker" }, h("sd-input", { key: 'df6974fedf73ec6de8c0aec7bf27bd87088065bf', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
                 margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '2aa096be9c411ada92d44d87c3a4c47ab68d1f96', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'e50f39e684f3aee7e5ce8bb0315ea7c60e977617', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '9a6d640f0bca411dfbf0da87c49c74fc4f80ed67', class: "sd-date-range-picker__menu" }, h("div", { key: '7da9b5ba70b388aef2dc8925bfd8a148f1ed0c41', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'ec1056f9342e6032b57c4722fa88c4a4a30a6613', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: 'ac27149302a409ca3e078b9f99dc97ea79d199fd', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '4f4bba8fd720e05a09f77a529edfa8cd663e3e92', class: "header-label" }, this.prevYear), h("button", { key: 'deb376d80e857f44e7d5d8066bd5dc6082cd12af', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '6851c389b13c53a94bc294201da37fb6c7e2465a', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '15d26dacba9e5f2e2f97171fc7ea4fbc6769804d', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '79d0e2596a741260072d5331c13e5afb94f09b9a', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'e16e7401cd86bcb63d9278b6ddb00bd8b193fa52', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'beb8f1550889104fccb9e240588d9ec9b58a85fa', class: "sd-date-range-picker__menu" }, h("div", { key: '28cfcef75b4e5485098dff0e322cdd2725ce6abd', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '77452ba7a29869efcb59a42214927a932ed91da7', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '2a526f4f91b1814be3fd69f9ef7fe019cfa212c9', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'dd721be8b6a0040ce9d7d18f4cb4663ca8b66577', class: "header-label" }, this.prevYear), h("button", { key: '2b2d6ce769945ce408c019be1e0a9ea3e18c7ed8', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '59107ca17a8dc3f4b6c6f126fb6a8dfba9b43b4e', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: 'e11121959ec1b0d7531ae8fe654d23b10e417802', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date ===
                 this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), type: this.getDateBoxType(this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), isToday: today ===

package/dist/collection/components/sd-guide/sd-guide.js CHANGED Viewed

@@ -66,7 +66,7 @@ export class SdGuide {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = this.getGuidIcon();
-        return (h(Host, { key: '585c486de8a31b8ce09f45eefe6331737fb3e624', style: this.getGuideStyle() }, h("sd-button", { key: 'b7d53b84e674556729119b00c000efba46fcd8e0', ref: el => (this.guideRef = el), class: this.getGuideClasses(), variant: "outline", label: SdGuide.guideTitle[this.type], size: "md", color: "var(--guide-color)", icon: iconName, iconColor: iconColor, iconSize: iconSize, iconStyle: { marginRight: '4px' }, buttonStyle: {
+        return (h(Host, { key: 'd3975227833fe5304ee63c26989724bf505e4e6c', style: this.getGuideStyle() }, h("sd-button", { key: '7d9c8788d6022f718e986c1a30591f5fcf7dab91', ref: el => (this.guideRef = el), class: this.getGuideClasses(), variant: "outline", label: SdGuide.guideTitle[this.type], size: "md", color: "var(--guide-color)", icon: iconName, iconColor: iconColor, iconSize: iconSize, iconStyle: { marginRight: '4px' }, buttonStyle: {
                 height: '28px',
                 minHeight: '28px',
                 padding: '4px 12px',
@@ -76,7 +76,7 @@ export class SdGuide {
                 fontSize: '12px',
                 fontWeight: '400',
                 backgroundColor: 'var(--guide-background)',
-            }, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '8335f1cd0011db8a9e795433ed5373fb800ca932', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 24] }, h("div", { key: '5bac23fa3c20da12bf70e983a8503274b442befb', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '86f3ebd2bf06d61bc0c1e0e61cdb1bf942bc5210', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true, buttonStyle: { padding: '0px', minHeight: '0px' }, onSdClick: this.closeDropdown }), h("div", { key: 'ee8ba978a89525d88d7bdbb0f8bcd45b9f166e3c', class: "sd-guide__popup__header" }, h("sd-icon", { key: '2a2cb57fb9d280426e550559e79ac6b8f78035c5', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: 'e5d554ae090bba6245023af7530c1acf3ebd9c98', class: "sd-guide__popup__title" }, this.popupTitle || SdGuide.guideTitle[this.type])), h("ul", { key: '5a9aaaca0da567b3ac08fe2b96426a0f66ff927f', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+            }, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: 'f0b87eea6c9abe2b61d4e3a30b931b54585219ae', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 24] }, h("div", { key: 'b151630790e32f2da7f54307853d728ac08d8cfd', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'e265b60f46ed7f76e9c021d5c673d44ed02f0ee6', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true, buttonStyle: { padding: '0px', minHeight: '0px' }, onSdClick: this.closeDropdown }), h("div", { key: '50406979d5c832abb262ea121b3c1cd0fb464b77', class: "sd-guide__popup__header" }, h("sd-icon", { key: '2e0fd5798d96b58c732a88e4917a7c9d47e28901', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: 'ab6f05250c499dc741b118ddf346857f2c55969f', class: "sd-guide__popup__title" }, this.popupTitle || SdGuide.guideTitle[this.type])), h("ul", { key: '6676f25ca3f75a5fb306013ad1efc33e5ccac1c2', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

package/dist/collection/components/sd-icon/sd-icon.js CHANGED Viewed

@@ -25,7 +25,7 @@ export class SdIcon {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (h("i", { key: 'bd94fdfbe96f53ff5c15ed51826678658b92173f', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: 'c13fce9315b416b3162b98abf6f6354f61d6db68', color: this.resolvedColor })));
+        return (h("i", { key: '2618a42977f5d3340d9e2daf15b4ddda67689cf5', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: 'f8ff1fe92433c2ba82fed4223fc6e4678e52c34b', color: this.resolvedColor })));
     }
     static get is() { return "sd-icon"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/sd-input/sd-input.js CHANGED Viewed

@@ -89,11 +89,11 @@ export class SdInput {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (h(Host, { key: '7dc06031ab0de29582234116e81c97e5049f255f', style: inputWidth }, this.label && h("div", { key: '7e6e83718e8677781a25fd4626d04b9308251e31', class: "sd-input__label" }, this.label), h("label", { key: '2218eaa7cd1f9374dcf371ff73bac367f372ae71', class: {
+        return (h(Host, { key: 'd96f6ba31f2a6933ad3b079f096bbf90f9a17fb9', style: inputWidth }, this.label && h("div", { key: '02758b3e02a680f1287e9dddf1d4a7ce5c1fd9c2', class: "sd-input__label" }, this.label), h("label", { key: 'fbac7be9d0de9041dae55be4c8ed88d9fa9019de', class: {
                 'sd-input': true,
                 [this.getInputStatus()]: true,
                 'sd-input--barcode': !!this.barcode,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: 'ca4e0dd0cad6044451c4a0c44a52a714f56e79d7', name: "prefix" }), h("input", { key: '8431e475f8271b0b3aa901092a9a0c4801bf89ed', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: '514b0cae863501f5446ab6dc6318014f4aaf3f7c', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '5b09019f6186bb2a00601a2827d7e30fbf5e7594', name: "close", color: "#888", style: { marginRight: '-4px', marginLeft: '8px', cursor: 'pointer' }, onClick: () => {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '1d0b462c1b57372b864d4991109b6d7bb08f7355', name: "prefix" }), h("input", { key: '25f3186a06e7535b95eebf6aa553f5e50a091d97', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: 'cdbc64c69645c0585ad5835bfcc36af54c2de33f', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'f6088690c7d34249509dffedd2fe6b3eb280dd01', name: "close", color: "#888", style: { marginRight: '-4px', marginLeft: '8px', cursor: 'pointer' }, onClick: () => {
                 this.internalValue = '';
                 this.sdChange?.emit(this.internalValue);
                 this.sdInput?.emit(this.internalValue);

package/dist/collection/components/sd-pagination/sd-pagination.js CHANGED Viewed

@@ -73,12 +73,12 @@ export class SdPagination {
         }
     }
     render() {
-        return (h("div", { key: 'b4b8a4b6ff7ae8296a15310a9e8819589dd25164', class: this.paginationClasses }, h("div", { key: '695d69098c97c4c4e4c5416b67bc075fb4e4b181', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: 'a59ec8c79042ac6b245dc796099b18f574a59045', class: this.paginationClasses }, h("div", { key: 'd4d951dc0f5c8b5212a21eaa02389344768ad15c', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '3762f013f7772d97999373eda3723d962ec7d73b', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '90070d87eae5ba4d7e45c8b1163c6d910b202427', class: "append-btns" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sd-popover/sd-popover.js CHANGED Viewed

@@ -31,11 +31,11 @@ export class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: 'e0e3b29b38cd9e74725d7eed7e42d64eb6e9e1f6' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: 'b19a77b871760484f3a89df50fdb3fd7451d5346', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '9776d4750b4b676d8464e2612ce200c18ca19418', class: {
+        return (h(Fragment, { key: 'e058418533929563a9ea1991823ec5bf2406e5f6' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: 'debecbef44714e705bf87bded2b7a85d016faba1', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '26afb49bf9bc4c8227427a9fe93280e5435d20fc', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: '820cb08e906f5f0a03e495ceaa093239c0a06bfe', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '3e10009ce426c5699e474dad640baa0abbe62b3e' })), h("div", { key: 'cf2bd57e1fff8465e64caf92898ec784cb111eeb', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: 'b6270c6f37b6c7479adef1c1c02d090294b45096', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '0f519f8d73cb81db03daa269593a1313cef58727', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '598e1877f6239d069f237f8004cfc3a74504f1ef', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '3a3bd0400e096c18bf61f203e32adca3e508570f', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '8499cf3d5ee858eebd50fc2aa06595c0f2240cc0', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, h("i", { key: '52dd82b64d1d4ae5ec3741febb07ef553e50f42d', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'e94ac6ea51e421546a813406d1821e6f3727e7bd' })), h("div", { key: '0abdb59077846308b2ccff14339eb193f8073433', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '9b0f289d9f7dbfb09c3e0a8b4162af97aef53e73', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '6311f5e4a7ae9699d65d344f0b407b3715f2e072', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '65b7ea1a67400b1887248a615fdb1ba93928e34a', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '9032a6f6381cdf0b4bd3df689280aadb8357ffa6', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '6ac75128090091c510065cb7317478722a35de7c', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get is() { return "sd-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sd-portal/sd-portal.js CHANGED Viewed

@@ -92,7 +92,7 @@ export class SdPortal {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: 'ce83d878db1baad99ef8aad0bbb40dc679102cf7' });
+        return h("slot", { key: '2423eed047adb72c699ad363c5f756820f0ccad2' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

package/dist/collection/components/sd-select/sd-select-option/sd-select-option.css CHANGED Viewed

@@ -1359,6 +1359,12 @@ textarea {
   cursor: pointer;
 }
+:host {
+  display: block;
+  height: fit-content;
+  line-height: 0;
+}
 .sd-select__option {
   display: flex;
   padding: 4px 12px;

package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 export class SdSelectOption {
     el;
     option;
@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h("div", { key: '1346e81953991129aefcda1460f1e01a52dfa166', class: {
+        return (h(Host, { key: '706574a311653939b3ce1b3e4f0bf66a9b02d53f' }, h("div", { key: '7b3ec16c61f90fa5d262702c850bc6c28749c287', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -37,10 +37,9 @@ export class SdSelectOption {
                     : { borderColor: '#0075ff' }, onClick: e => {
                 e.preventDefault();
                 this.handleClick(e);
-            } }), h("span", { class: "sd-select__option-label" }, this.option.label))) : (this.option.label)));
+            } }), h("span", { class: "sd-select__option-label" }, this.option.label))) : (this.option.label))));
     }
     static get is() { return "sd-select-option"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["sd-select-option.scss"]

package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-select-option.js","sourceRoot":"","sources":["../../../../src/components/sd-select/sd-select-option/sd-select-option.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,SAAS,~~EAAE~~,OAAO,~~EAAE~~,KAAK,~~EAAgB~~,CAAC,~~EAAE~~,MAAM,~~EAAE~~,IAAI,~~EAAE~~,KAAK,~~EAAE~~,MAAM,eAAe,CAAC;~~AAQhG~~,MAAM,OAAO,cAAc;IACf,EAAE,CAAe;IAEpB,MAAM,CAAgB;IACtB,KAAK,CAAU;IACf,UAAU,GAAY,KAAK,CAAC;IAC5B,SAAS,GAAY,KAAK,CAAC;IAC3B,WAAW,CAA6B;IACxC,QAAQ,GAAY,KAAK,CAAC;IAC1B,WAAW,GAAY,KAAK,CAAC;IAE5B,SAAS,GAAY,KAAK,CAAC;IAGpC,KAAK,CAAC,UAAU;QACf,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;IAC/B,CAAC;IAEQ,WAAW,CAIjB;IAEK,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC3C,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC7C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK;aACL,CAAC,CAAC;QACJ,CAAC;IACF,CAAC,CAAC;IAEF,MAAM;QACL,OAAO,CACN,4DACC,KAAK,EAAE;~~gBACN~~,mBAAmB,EAAE,IAAI;~~gBACzB~~,6BAA6B,EAAE,IAAI,CAAC,UAAU;~~gBAC9C~~,6BAA6B,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;~~gBACrD~~,4BAA4B,EAAE,IAAI,CAAC,SAAS;~~gBAC5C~~,iCAAiC,EAAE,IAAI,CAAC,WAAW;~~aACnD~~,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAC3C,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAC5C,KAAK,EAAE,IAAI,CAAC,WAAW,gBACX,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CACnB,WAAK,KAAK,EAAC,qCAAqC;~~YAC~~/C,mBACC,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAC9B,aAAa,EACZ,CAAC,IAAI,CAAC,UAAU;~~oBACf~~,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE;~~oBACzB~~,CAAC,CAAC,IAAI,CAAC,SAAS;~~wBACd~~,CAAC,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE;~~wBAC1B~~,CAAC,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,EAEhC,OAAO,EAAE,CAAC,CAAC,EAAE;~~oBACZ~~,CAAC,CAAC,cAAc,EAAE,CAAC;~~oBACnB~~,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;~~gBACrB~~,CAAC,GACa;~~YACf~~,YAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAQ,CAC3D,CACN,CAAC,CAAC,CAAC,CACH,IAAI,CAAC,MAAM,CAAC,KAAK,CACjB,CACI,~~CACN~~,CAAC;IACH,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\r\nimport type { SelectOption } from '../../../types/select';\r\n\r\n@Component({\r\n tag: 'sd-select-option',\r\n styleUrl: 'sd-select-option.scss',\r\n ~~shadow: true,\r\n~~})\r\nexport class SdSelectOption {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() option!: SelectOption;\r\n @Prop() index!: number;\r\n @Prop() isSelected: boolean = false;\r\n @Prop() isFocused: boolean = false;\r\n @Prop() optionStyle?: { [key: string]: string };\r\n @Prop() disabled: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n\r\n @State() isHovered: boolean = false;\r\n\r\n @Method()\r\n async isDisabled(): Promise<boolean> {\r\n return !!this.option.disabled;\r\n }\r\n\r\n @Event() optionClick!: EventEmitter<{\r\n option: SelectOption;\r\n index: number;\r\n event: MouseEvent;\r\n }>;\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n\r\n if (!this.option.disabled && !this.disabled) {\r\n this.optionClick.emit({\r\n option: this.option,\r\n index: this.index,\r\n event,\r\n });\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <div\r\n class={{\r\n 'sd-select__option': true,\r\n 'sd-select__option--selected': this.isSelected,\r\n 'sd-select__option--disabled': !!this.option.disabled,\r\n 'sd-select__option--focused': this.isFocused,\r\n 'sd-select__option--use-checkbox': this.useCheckbox,\r\n }}\r\n onMouseEnter={() => (this.isHovered = true)}\r\n onMouseLeave={() => (this.isHovered = false)}\r\n style={this.optionStyle}\r\n data-index={this.index}\r\n onClick={this.handleClick}\r\n >\r\n {this.useCheckbox ? (\r\n <div class=\"sd-select__option__checkbox-wrapper\">\r\n <sd-checkbox\r\n checked={this.isSelected}\r\n disabled={this.option.disabled}\r\n checkboxStyle={\r\n !this.isSelected\r\n ? { borderColor: '#888' }\r\n : this.isHovered\r\n ? { borderColor: 'white' }\r\n : { borderColor: '#0075ff' }\r\n }\r\n onClick={e => {\r\n e.preventDefault();\r\n this.handleClick(e);\r\n }}\r\n ></sd-checkbox>\r\n <span class=\"sd-select__option-label\">{this.option.label}</span>\r\n </div>\r\n ) : (\r\n this.option.label\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"sd-select-option.js","sourceRoot":"","sources":["../../../../src/components/sd-select/sd-select-option/sd-select-option.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,cAAc;IACf,EAAE,CAAe;IAEpB,MAAM,CAAgB;IACtB,KAAK,CAAU;IACf,UAAU,GAAY,KAAK,CAAC;IAC5B,SAAS,GAAY,KAAK,CAAC;IAC3B,WAAW,CAA6B;IACxC,QAAQ,GAAY,KAAK,CAAC;IAC1B,WAAW,GAAY,KAAK,CAAC;IAE5B,SAAS,GAAY,KAAK,CAAC;IAGpC,KAAK,CAAC,UAAU;QACf,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;IAC/B,CAAC;IAEQ,WAAW,CAIjB;IAEK,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC3C,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC7C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK;aACL,CAAC,CAAC;QACJ,CAAC;IACF,CAAC,CAAC;IAEF,MAAM;QACL,OAAO,CACN,EAAC,IAAI;YACJ,4DACC,KAAK,EAAE;oBACN,mBAAmB,EAAE,IAAI;oBACzB,6BAA6B,EAAE,IAAI,CAAC,UAAU;oBAC9C,6BAA6B,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;oBACrD,4BAA4B,EAAE,IAAI,CAAC,SAAS;oBAC5C,iCAAiC,EAAE,IAAI,CAAC,WAAW;iBACnD,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAC3C,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAC5C,KAAK,EAAE,IAAI,CAAC,WAAW,gBACX,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CACnB,WAAK,KAAK,EAAC,qCAAqC;gBAC/C,mBACC,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAC9B,aAAa,EACZ,CAAC,IAAI,CAAC,UAAU;wBACf,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE;wBACzB,CAAC,CAAC,IAAI,CAAC,SAAS;4BACd,CAAC,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE;4BAC1B,CAAC,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,EAEhC,OAAO,EAAE,CAAC,CAAC,EAAE;wBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;oBACrB,CAAC,GACa;gBACf,YAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAQ,CAC3D,CACN,CAAC,CAAC,CAAC,CACH,IAAI,CAAC,MAAM,CAAC,KAAK,CACjB,CACI,CACA,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {\r\n Component,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n h,\r\n Host,\r\n Method,\r\n Prop,\r\n State,\r\n} from '@stencil/core';\r\nimport type { SelectOption } from '../../../types/select';\r\n\r\n@Component({\r\n tag: 'sd-select-option',\r\n styleUrl: 'sd-select-option.scss',\r\n})\r\nexport class SdSelectOption {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() option!: SelectOption;\r\n @Prop() index!: number;\r\n @Prop() isSelected: boolean = false;\r\n @Prop() isFocused: boolean = false;\r\n @Prop() optionStyle?: { [key: string]: string };\r\n @Prop() disabled: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n\r\n @State() isHovered: boolean = false;\r\n\r\n @Method()\r\n async isDisabled(): Promise<boolean> {\r\n return !!this.option.disabled;\r\n }\r\n\r\n @Event() optionClick!: EventEmitter<{\r\n option: SelectOption;\r\n index: number;\r\n event: MouseEvent;\r\n }>;\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n\r\n if (!this.option.disabled && !this.disabled) {\r\n this.optionClick.emit({\r\n option: this.option,\r\n index: this.index,\r\n event,\r\n });\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div\r\n class={{\r\n 'sd-select__option': true,\r\n 'sd-select__option--selected': this.isSelected,\r\n 'sd-select__option--disabled': !!this.option.disabled,\r\n 'sd-select__option--focused': this.isFocused,\r\n 'sd-select__option--use-checkbox': this.useCheckbox,\r\n }}\r\n onMouseEnter={() => (this.isHovered = true)}\r\n onMouseLeave={() => (this.isHovered = false)}\r\n style={this.optionStyle}\r\n data-index={this.index}\r\n onClick={this.handleClick}\r\n >\r\n {this.useCheckbox ? (\r\n <div class=\"sd-select__option__checkbox-wrapper\">\r\n <sd-checkbox\r\n checked={this.isSelected}\r\n disabled={this.option.disabled}\r\n checkboxStyle={\r\n !this.isSelected\r\n ? { borderColor: '#888' }\r\n : this.isHovered\r\n ? { borderColor: 'white' }\r\n : { borderColor: '#0075ff' }\r\n }\r\n onClick={e => {\r\n e.preventDefault();\r\n this.handleClick(e);\r\n }}\r\n ></sd-checkbox>\r\n <span class=\"sd-select__option-label\">{this.option.label}</span>\r\n </div>\r\n ) : (\r\n this.option.label\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/sd-select/sd-select.js CHANGED Viewed

@@ -17,12 +17,6 @@ export class SdSelect extends BaseDropdownEvent {
     disabled = false;
     clearable = false;
     searchable = false;
-    // props - custom styles
-    containerStyle = {};
-    triggerStyle = {};
-    dropdownStyle = {};
-    optionStyle = {};
-    labelStyle = {};
     // props - custom slots
     optionRenderer;
     // states
@@ -156,9 +150,6 @@ export class SdSelect extends BaseDropdownEvent {
             this.isOpen = false;
         }
     };
-    handleDropdownOpen = (element) => {
-        this.dropdownRef = element;
-    };
     filterOptions() {
         if (!this.searchText || this.searchText.trim() === '') {
             // 검색어가 없으면 전체 옵션 표시
@@ -209,20 +200,20 @@ export class SdSelect extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: 'c43c086134d7a179d63a7f0c0df7e62058f7625e', style: style }, h("div", { key: 'd6ef6428b1a5ec114fbf97741c93b6cbb354bec0', class: {
+        return (h(Host, { key: '34242e3aff012b7f77ae0f58fc35143d050491e7', style: style }, h("div", { key: 'f713437e9ea2463abb1306a67e89fbb212c03c84', class: {
                 'sd-select': true,
                 'sd-select--open': this.isOpen,
                 'sd-select--disabled': this.disabled,
-            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), h("div", { key: 'c6a3ec4e8705b9654fa5123b228e8f9f0d75c9dc', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '0ba8978cbfa5972c51f30d8d98760d8f72341555', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
-    renderLabel(label, labelStyle) {
+    renderLabel(label) {
         if (!label)
             return null;
-        return (h("label", { class: "sd-select__label", style: labelStyle }, label));
+        return h("label", { class: "sd-select__label" }, label);
     }
     renderTrigger() {
         const selectedOption = this.getSelectedOption();
-        return (h("div", { class: "sd-select__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle }, h("span", { class: "sd-select__value" }, selectedOption ? selectedOption.label : this.placeholder), this.clearable && selectedOption && !this.disabled && (h("sd-icon", { key: "clear-icon", name: "close", size: 10, color: "#888", class: "sd-select__clear", onClick: event => {
+        return (h("div", { class: "sd-select__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick }, h("span", { class: "sd-select__value" }, selectedOption ? selectedOption.label : this.placeholder), this.clearable && selectedOption && !this.disabled && (h("sd-icon", { key: "clear-icon", name: "close", size: 10, color: "#888", class: "sd-select__clear", onClick: event => {
                 event.stopPropagation();
                 this.value = null;
             } })), h("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen } })));
@@ -230,14 +221,14 @@ export class SdSelect extends BaseDropdownEvent {
     renderDropdown() {
         if (this.isOpen === false)
             return null;
-        return (h("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, h("div", { class: "sd-select__dropdown", style: this.dropdownStyle, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("div", { class: {
+        return (h("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, h("div", { class: "sd-select__dropdown", onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("div", { class: {
                 'sd-select__search-container': true,
                 'sd-select__search-container--scrolled': this.isScrolled,
             }, onClick: event => event.stopPropagation() }, h("sd-input", { ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdInput: event => {
                 this.searchText = String(event?.detail);
             }, onSdFocus: () => {
                 this.itemIndex = -1;
-            } }, h("sd-icon", { name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" })))), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: option.value === this.value, isFocused: index === this.itemIndex, optionStyle: this.optionStyle, onOptionClick: ({ detail }) => this.handleOptionClick(detail) }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select__option-placeholder', style: this.optionStyle }, this.optionPlaceholder))))));
+            } }, h("sd-icon", { name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" })))), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: option.value === this.value, isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.handleOptionClick(detail) }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select__option-placeholder' }, this.optionPlaceholder))))));
     }
     static get is() { return "sd-select"; }
     static get originalStyleUrls() {
@@ -456,126 +447,6 @@ export class SdSelect extends BaseDropdownEvent {
                 "attribute": "searchable",
                 "defaultValue": "false"
             },
-            "containerStyle": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SelectStyleProps['containerStyle']",
-                    "resolved": "undefined | { [key: string]: string; }",
-                    "references": {
-                        "SelectStyleProps": {
-                            "location": "local",
-                            "path": "C:/Users/KimMeeKyeong/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-select/sd-select.tsx",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectStyleProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "{}"
-            },
-            "triggerStyle": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SelectStyleProps['triggerStyle']",
-                    "resolved": "undefined | { [key: string]: string; }",
-                    "references": {
-                        "SelectStyleProps": {
-                            "location": "local",
-                            "path": "C:/Users/KimMeeKyeong/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-select/sd-select.tsx",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectStyleProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "{}"
-            },
-            "dropdownStyle": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SelectStyleProps['dropdownStyle']",
-                    "resolved": "undefined | { [key: string]: string; }",
-                    "references": {
-                        "SelectStyleProps": {
-                            "location": "local",
-                            "path": "C:/Users/KimMeeKyeong/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-select/sd-select.tsx",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectStyleProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "{}"
-            },
-            "optionStyle": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SelectStyleProps['optionStyle']",
-                    "resolved": "undefined | { [key: string]: string; }",
-                    "references": {
-                        "SelectStyleProps": {
-                            "location": "local",
-                            "path": "C:/Users/KimMeeKyeong/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-select/sd-select.tsx",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectStyleProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "{}"
-            },
-            "labelStyle": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SelectStyleProps['labelStyle']",
-                    "resolved": "undefined | { [key: string]: string; }",
-                    "references": {
-                        "SelectStyleProps": {
-                            "location": "local",
-                            "path": "C:/Users/KimMeeKyeong/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-select/sd-select.tsx",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectStyleProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "{}"
-            },
             "optionRenderer": {
                 "type": "unknown",
                 "mutable": false,

package/dist/collection/components/sd-select/sd-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-select.js","sourceRoot":"","sources":["../../../src/components/sd-select/sd-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n Component,\r\n Event,\r\n EventEmitter,\r\n Host,\r\n Prop,\r\n State,\r\n h,\r\n Element,\r\n Watch,\r\n} from '@stencil/core';\r\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\r\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\r\n\r\nexport interface SelectOption {\r\n value: string \| number;\r\n label: string;\r\n disabled?: boolean;\r\n}\r\n\r\nexport interface SelectOptionGroup extends SelectOption {\r\n type: 'group' \| 'subgroup' \| 'item';\r\n parent?: string;\r\n}\r\n\r\nexport interface SelectStyleProps {\r\n containerStyle?: { [key: string]: string };\r\n triggerStyle?: { [key: string]: string };\r\n dropdownStyle?: { [key: string]: string };\r\n optionStyle?: { [key: string]: string };\r\n labelStyle?: { [key: string]: string };\r\n}\r\n\r\nexport interface SelectEvents {\r\n sdChange: {\r\n value: string \| number \| null;\r\n option: SelectOption \| null;\r\n };\r\n dropDownShow: { isOpen: boolean };\r\n}\r\n\r\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' \| 'dropDownShow'> {\r\n sdChange: SelectOption[] \| null;\r\n}\r\n\r\n@Component({\r\n tag: 'sd-select',\r\n styleUrl: 'sd-select.scss',\r\n})\r\nexport class SdSelect extends BaseDropdownEvent {\r\n @Element() el!: HTMLElement;\r\n\r\n // props\r\n @Prop({ mutable: true }) value: string \| number \| null = null;\r\n @Prop() label: string = '';\r\n @Prop({ mutable: true }) options: SelectOption[] = [];\r\n @Prop() placeholder: string = '선택';\r\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\r\n @Prop() width: string = '200px';\r\n @Prop() dropdownHeight: string = '260px';\r\n @Prop() disabled: boolean = false;\r\n @Prop() clearable: boolean = false;\r\n @Prop() searchable: boolean = false;\r\n\r\n // props - custom styles\r\n @Prop() containerStyle: SelectStyleProps['containerStyle'] = {};\r\n @Prop() triggerStyle: SelectStyleProps['triggerStyle'] = {};\r\n @Prop() dropdownStyle: SelectStyleProps['dropdownStyle'] = {};\r\n @Prop() optionStyle: SelectStyleProps['optionStyle'] = {};\r\n @Prop() labelStyle: SelectStyleProps['labelStyle'] = {};\r\n\r\n // props - custom slots\r\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\r\n\r\n // states\r\n @State() filteredOptions = this.options;\r\n @State() isOpen: boolean = false;\r\n @State() searchText: string \| null = null;\r\n @State() itemIndex: number = -1;\r\n @State() isScrolled: boolean = false;\r\n\r\n // events\r\n @Event() sdChange?: EventEmitter<SelectEvents['sdChange']>;\r\n @Event() dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\r\n\r\n private selectRef?: HTMLElement;\r\n private searchRef?: HTMLSdInputElement;\r\n private optionRef?: HTMLSdSelectOptionElement;\r\n private dropdownRef?: HTMLElement;\r\n\r\n @Watch('value')\r\n valueChanged() {\r\n const selectedOption = this.getSelectedOption();\r\n this.sdChange?.emit({ value: selectedOption?.value \|\| null, option: selectedOption \|\| null });\r\n }\r\n\r\n @Watch('options')\r\n optionsChanged() {\r\n this.filteredOptions = this.options;\r\n this.filterOptions();\r\n }\r\n\r\n @Watch('searchText')\r\n searchTextChanged() {\r\n this.filterOptions();\r\n }\r\n\r\n @Watch('itemIndex')\r\n async itemIndexChanged(newIndex: number, oldIndex: number) {\r\n if (this.searchable) {\r\n const searchInput = await this.getNativeInputElement();\r\n if (this.itemIndex === -1) {\r\n searchInput?.focus();\r\n return;\r\n } else if (searchInput?.matches(':focus')) {\r\n searchInput?.blur();\r\n }\r\n }\r\n\r\n const optionElements =\r\n this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') \|\| [];\r\n const currentItem = optionElements?.[this.itemIndex];\r\n\r\n if (!currentItem \|\| !this.isOpen) return;\r\n\r\n this.optionRef = currentItem as HTMLSdSelectOptionElement;\r\n const isOptionDisabled = await this.optionRef.isDisabled();\r\n\r\n if (isOptionDisabled) {\r\n newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\r\n return;\r\n }\r\n\r\n this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n componentWillLoad() {\r\n // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음\r\n this.filteredOptions = this.options;\r\n this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\r\n }\r\n\r\n disconnectedCallback() {\r\n this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\r\n }\r\n\r\n @Watch('isOpen')\r\n async isOpenChanged() {\r\n // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\r\n this.onDropdownToggle(this.isOpen);\r\n\r\n const selectedOption = this.getSelectedOption();\r\n if (!selectedOption) {\r\n this.itemIndex = /* this.searchable ? / -1 / : 0 /;\r\n } else {\r\n this.itemIndex = this.options.indexOf(selectedOption);\r\n }\r\n\r\n this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n\r\n if (this.isOpen === false) return;\r\n\r\n await new Promise(resolve => setTimeout(resolve, 10));\r\n\r\n const optionElements =\r\n this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') \|\| [];\r\n\r\n const currentItem = optionElements?.[this.itemIndex];\r\n\r\n if (this.searchable) {\r\n const searchInput = await this.getNativeInputElement();\r\n searchInput?.focus();\r\n }\r\n\r\n if (!currentItem) return;\r\n\r\n await new Promise(resolve => setTimeout(resolve, 10));\r\n this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n protected handleDocumentClick(event: Event): void {\r\n if (!this.selectRef?.contains(event.target as Node)) {\r\n this.isOpen = false;\r\n }\r\n }\r\n\r\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\r\n keyboardEvent.stopPropagation();\r\n const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\r\n if (!targetKey.includes(keyboardEvent.key)) return;\r\n\r\n keyboardEvent.preventDefault();\r\n switch (keyboardEvent.key) {\r\n case 'ArrowDown':\r\n case 'ArrowUp':\r\n const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\r\n const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\r\n this.itemIndex = nextIndex;\r\n break;\r\n case 'Enter':\r\n const selectedOption = this.filteredOptions[this.itemIndex];\r\n if (selectedOption && !selectedOption.disabled) {\r\n this.value = selectedOption.value;\r\n this.searchText = null;\r\n this.isOpen = false;\r\n }\r\n break;\r\n case 'Escape':\r\n this.isOpen = false;\r\n break;\r\n }\r\n }\r\n\r\n // closeDropdown 메서드 구현 (Manager에서 호출됨)\r\n closeDropdown() {\r\n this.isOpen = false;\r\n }\r\n\r\n // event handlers\r\n handleTriggerClick = (event: Event) => {\r\n event.stopPropagation();\r\n\r\n if (!this.disabled) {\r\n this.isOpen = !this.isOpen;\r\n this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n }\r\n };\r\n\r\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\r\n const { option, event } = detail;\r\n event.stopPropagation();\r\n\r\n if (!option.disabled) {\r\n this.value = option.value;\r\n this.isOpen = false;\r\n }\r\n };\r\n\r\n handleDropdownOpen = (element: HTMLElement) => {\r\n this.dropdownRef = element;\r\n };\r\n\r\n private filterOptions() {\r\n if (!this.searchText \|\| this.searchText.trim() === '') {\r\n // 검색어가 없으면 전체 옵션 표시\r\n this.filteredOptions = this.options;\r\n } else {\r\n // 검색어가 있으면 필터링\r\n this.filteredOptions = this.options.filter(option =>\r\n option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\r\n );\r\n }\r\n }\r\n\r\n private getSelectedOption(): SelectOption \| undefined {\r\n return this.options.find(option => option.value === this.value);\r\n }\r\n\r\n private handleDropdownScroll = (event: Event) => {\r\n const target = event.target as HTMLElement;\r\n const scrollTop = target.scrollTop;\r\n\r\n // 스크롤이 조금이라도 되면 그림자 표시\r\n this.isScrolled = scrollTop > 0;\r\n };\r\n\r\n private async getNativeInputElement(): Promise<HTMLInputElement \| null> {\r\n if (this.searchRef) {\r\n return this.searchRef.getNativeElement();\r\n }\r\n return null;\r\n }\r\n\r\n private scrollToOption(optionElement: HTMLElement) {\r\n if (!this.dropdownRef \|\| !optionElement) return;\r\n\r\n const dropdown = this.dropdownRef;\r\n const optionTop = optionElement.offsetTop;\r\n const optionHeight = optionElement.offsetHeight;\r\n const dropdownScrollTop = dropdown.scrollTop;\r\n const dropdownHeight = dropdown.clientHeight;\r\n\r\n const searchContainer = dropdown.querySelector('.sd-select__search-container');\r\n const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\r\n\r\n const visibleTop = dropdownScrollTop + searchOffset;\r\n const visibleBottom = dropdownScrollTop + dropdownHeight;\r\n\r\n if (optionTop < visibleTop) {\r\n dropdown.scrollTop = optionTop - searchOffset;\r\n } else if (optionTop + optionHeight > visibleBottom) {\r\n dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;\r\n }\r\n }\r\n\r\n // render method\r\n render() {\r\n const style = {\r\n '--select-width': this.width \|\| '200px',\r\n '--select-dropdown-height': this.dropdownHeight \|\| '260px',\r\n };\r\n\r\n return (\r\n <Host style={style}>\r\n <div\r\n class={{\r\n 'sd-select': true,\r\n 'sd-select--open': this.isOpen,\r\n 'sd-select--disabled': this.disabled,\r\n }}\r\n style={this.containerStyle}\r\n ref={el => (this.selectRef = el)}\r\n >\r\n {this.renderLabel(this.label, this.labelStyle)}\r\n <div class=\"sd-select__container\">\r\n {this.renderTrigger()}\r\n {this.renderDropdown()}\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private renderLabel(label?: string, labelStyle?: { [key: string]: string }) {\r\n if (!label) return null;\r\n\r\n return (\r\n <label class=\"sd-select__label\" style={labelStyle}>\r\n {label}\r\n </label>\r\n );\r\n }\r\n\r\n private renderTrigger() {\r\n const selectedOption = this.getSelectedOption();\r\n return (\r\n <div\r\n class=\"sd-select__trigger\"\r\n tabindex={this.disabled ? -1 : 0}\r\n onClick={this.handleTriggerClick}\r\n style={this.triggerStyle}\r\n >\r\n <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\r\n {this.clearable && selectedOption && !this.disabled && (\r\n <sd-icon\r\n key=\"clear-icon\"\r\n name=\"close\"\r\n size={10}\r\n color=\"#888\"\r\n class=\"sd-select__clear\"\r\n onClick={event => {\r\n event.stopPropagation();\r\n this.value = null;\r\n }}\r\n ></sd-icon>\r\n )}\r\n\r\n <sd-icon\r\n key=\"arrow-icon\"\r\n name=\"arrowDown\"\r\n color=\"#888\"\r\n class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\r\n ></sd-icon>\r\n </div>\r\n );\r\n }\r\n\r\n private renderDropdown() {\r\n if (this.isOpen === false) return null;\r\n return (\r\n <sd-portal open={this.isOpen} parentRef={this.selectRef} onSdClose={this.closeDropdown}>\r\n <div\r\n class=\"sd-select__dropdown\"\r\n style={this.dropdownStyle}\r\n onScroll={this.handleDropdownScroll}\r\n ref={el => (this.dropdownRef = el)}\r\n >\r\n {this.searchable && (\r\n <div\r\n class={{\r\n 'sd-select__search-container': true,\r\n 'sd-select__search-container--scrolled': this.isScrolled,\r\n }}\r\n onClick={event => event.stopPropagation()}\r\n >\r\n <sd-input\r\n ref={el => (this.searchRef = el)}\r\n value={this.searchText}\r\n placeholder=\"검색\"\r\n clearable\r\n inputStyle={{ 'padding-left': '8px' }}\r\n autofocus\r\n onSdInput={event => {\r\n this.searchText = String(event?.detail);\r\n }}\r\n onSdFocus={() => {\r\n this.itemIndex = -1;\r\n }}\r\n >\r\n <sd-icon\r\n name=\"search\"\r\n size={16}\r\n color=\"#737373\"\r\n style={{ marginRight: '4px' }}\r\n slot=\"prefix\"\r\n ></sd-icon>\r\n </sd-input>\r\n </div>\r\n )}\r\n {this.filteredOptions.length > 0 ? (\r\n this.filteredOptions.map((option, index) => (\r\n <slot name={`option-${option.value}`}>\r\n <sd-select-option\r\n option={option}\r\n index={index}\r\n isSelected={option.value === this.value}\r\n isFocused={index === this.itemIndex}\r\n optionStyle={this.optionStyle}\r\n onOptionClick={({ detail }) => this.handleOptionClick(detail)}\r\n ></sd-select-option>\r\n </slot>\r\n ))\r\n ) : (\r\n <slot name=\"option-placeholder\">\r\n <div class={'sd-select__option-placeholder'} style={this.optionStyle}>\r\n {this.optionPlaceholder}\r\n </div>\r\n </slot>\r\n )}\r\n </div>\r\n </sd-portal>\r\n );\r\n }\r\n}\r\n\r\n{\r\n /\r\n <sd-select id=\"select-1\">\r\n <!-- <div slot=\"option-placeholder\">옵션이 없습니다.</div> -->\r\n </sd-select>\r\n <sd-select id=\"select-2\"> </sd-select>\r\n <sd-select id=\"select-3\" searchable clearable>\r\n <div slot=\"option-3\">test</div>\r\n </sd-select>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const select1 = document.getElementById('select-1');\r\n const select2 = document.getElementById('select-2');\r\n const select3 = document.getElementById('select-3');\r\n const select = document.querySelector('sd-select slot[name=\"option-3\"]');\r\n select1.optionPlaceholder = 'No options available';\r\n\r\n const options = [\r\n { label: 'Option 1', value: '1' },\r\n { label: 'Option 2', value: '2' },\r\n { label: 'Option 3', value: '3', disabled: true },\r\n { label: 'Option 4', value: '4' },\r\n { label: 'Option 5', value: '5' },\r\n { label: 'Option 6', value: '6' },\r\n { label: 'Option 7', value: '7', disabled: true },\r\n { label: 'Option 8', value: '8' },\r\n { label: 'Option 9', value: '9' },\r\n { label: 'Option 10', value: '10' },\r\n { label: 'Option 11', value: '11', disabled: true },\r\n { label: 'Option 12', value: '12' },\r\n { label: 'Option 13', value: '13' },\r\n { label: 'Option 14', value: '14' },\r\n { label: 'Option 15', value: '15', disabled: true },\r\n { label: 'Option 16', value: '16' },\r\n { label: 'Option 17', value: '17' },\r\n { label: 'Option 18', value: '18' },\r\n { label: 'Option 19', value: '19', disabled: true },\r\n { label: 'Option 20', value: '20' },\r\n { label: 'Option 21', value: '21' },\r\n { label: 'Option 22', value: '22' },\r\n { label: 'Option 23', value: '23', disabled: true },\r\n { label: 'Option 24', value: '24' },\r\n ];\r\n\r\n select2.options = options;\r\n select3.options = options;\r\n });\r\n </script>\r\n\r\n */\r\n}\r\n"]}
1	+ {"version":3,"file":"sd-select.js","sourceRoot":"","sources":["../../../src/components/sd-select/sd-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n Component,\r\n Event,\r\n EventEmitter,\r\n Host,\r\n Prop,\r\n State,\r\n h,\r\n Element,\r\n Watch,\r\n} from '@stencil/core';\r\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\r\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\r\n\r\nexport interface SelectOption {\r\n value: string \| number;\r\n label: string;\r\n disabled?: boolean;\r\n}\r\n\r\nexport interface SelectOptionGroup extends SelectOption {\r\n type: 'group' \| 'subgroup' \| 'item';\r\n parent?: string;\r\n}\r\n\r\nexport interface SelectStyleProps {\r\n containerStyle?: { [key: string]: string };\r\n triggerStyle?: { [key: string]: string };\r\n dropdownStyle?: { [key: string]: string };\r\n optionStyle?: { [key: string]: string };\r\n labelStyle?: { [key: string]: string };\r\n}\r\n\r\nexport interface SelectEvents {\r\n sdChange: {\r\n value: string \| number \| null;\r\n option: SelectOption \| null;\r\n };\r\n dropDownShow: { isOpen: boolean };\r\n}\r\n\r\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' \| 'dropDownShow'> {\r\n sdChange: SelectOption[] \| null;\r\n}\r\n\r\n@Component({\r\n tag: 'sd-select',\r\n styleUrl: 'sd-select.scss',\r\n})\r\nexport class SdSelect extends BaseDropdownEvent {\r\n @Element() el!: HTMLElement;\r\n\r\n // props\r\n @Prop({ mutable: true }) value: string \| number \| null = null;\r\n @Prop() label: string = '';\r\n @Prop({ mutable: true }) options: SelectOption[] = [];\r\n @Prop() placeholder: string = '선택';\r\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\r\n @Prop() width: string = '200px';\r\n @Prop() dropdownHeight: string = '260px';\r\n @Prop() disabled: boolean = false;\r\n @Prop() clearable: boolean = false;\r\n @Prop() searchable: boolean = false;\r\n\r\n // props - custom slots\r\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\r\n\r\n // states\r\n @State() filteredOptions = this.options;\r\n @State() isOpen: boolean = false;\r\n @State() searchText: string \| null = null;\r\n @State() itemIndex: number = -1;\r\n @State() isScrolled: boolean = false;\r\n\r\n // events\r\n @Event() sdChange?: EventEmitter<SelectEvents['sdChange']>;\r\n @Event() dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\r\n\r\n private selectRef?: HTMLElement;\r\n private searchRef?: HTMLSdInputElement;\r\n private optionRef?: HTMLSdSelectOptionElement;\r\n private dropdownRef?: HTMLElement;\r\n\r\n @Watch('value')\r\n valueChanged() {\r\n const selectedOption = this.getSelectedOption();\r\n this.sdChange?.emit({ value: selectedOption?.value \|\| null, option: selectedOption \|\| null });\r\n }\r\n\r\n @Watch('options')\r\n optionsChanged() {\r\n this.filteredOptions = this.options;\r\n this.filterOptions();\r\n }\r\n\r\n @Watch('searchText')\r\n searchTextChanged() {\r\n this.filterOptions();\r\n }\r\n\r\n @Watch('itemIndex')\r\n async itemIndexChanged(newIndex: number, oldIndex: number) {\r\n if (this.searchable) {\r\n const searchInput = await this.getNativeInputElement();\r\n if (this.itemIndex === -1) {\r\n searchInput?.focus();\r\n return;\r\n } else if (searchInput?.matches(':focus')) {\r\n searchInput?.blur();\r\n }\r\n }\r\n\r\n const optionElements =\r\n this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') \|\| [];\r\n const currentItem = optionElements?.[this.itemIndex];\r\n\r\n if (!currentItem \|\| !this.isOpen) return;\r\n\r\n this.optionRef = currentItem as HTMLSdSelectOptionElement;\r\n const isOptionDisabled = await this.optionRef.isDisabled();\r\n\r\n if (isOptionDisabled) {\r\n newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\r\n return;\r\n }\r\n\r\n this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n componentWillLoad() {\r\n // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음\r\n this.filteredOptions = this.options;\r\n this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\r\n }\r\n\r\n disconnectedCallback() {\r\n this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\r\n }\r\n\r\n @Watch('isOpen')\r\n async isOpenChanged() {\r\n // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\r\n this.onDropdownToggle(this.isOpen);\r\n\r\n const selectedOption = this.getSelectedOption();\r\n if (!selectedOption) {\r\n this.itemIndex = /* this.searchable ? / -1 / : 0 /;\r\n } else {\r\n this.itemIndex = this.options.indexOf(selectedOption);\r\n }\r\n\r\n this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n\r\n if (this.isOpen === false) return;\r\n\r\n await new Promise(resolve => setTimeout(resolve, 10));\r\n\r\n const optionElements =\r\n this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') \|\| [];\r\n\r\n const currentItem = optionElements?.[this.itemIndex];\r\n\r\n if (this.searchable) {\r\n const searchInput = await this.getNativeInputElement();\r\n searchInput?.focus();\r\n }\r\n\r\n if (!currentItem) return;\r\n\r\n await new Promise(resolve => setTimeout(resolve, 10));\r\n this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n protected handleDocumentClick(event: Event): void {\r\n if (!this.selectRef?.contains(event.target as Node)) {\r\n this.isOpen = false;\r\n }\r\n }\r\n\r\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\r\n keyboardEvent.stopPropagation();\r\n const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\r\n if (!targetKey.includes(keyboardEvent.key)) return;\r\n\r\n keyboardEvent.preventDefault();\r\n switch (keyboardEvent.key) {\r\n case 'ArrowDown':\r\n case 'ArrowUp':\r\n const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\r\n const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\r\n this.itemIndex = nextIndex;\r\n break;\r\n case 'Enter':\r\n const selectedOption = this.filteredOptions[this.itemIndex];\r\n if (selectedOption && !selectedOption.disabled) {\r\n this.value = selectedOption.value;\r\n this.searchText = null;\r\n this.isOpen = false;\r\n }\r\n break;\r\n case 'Escape':\r\n this.isOpen = false;\r\n break;\r\n }\r\n }\r\n\r\n // closeDropdown 메서드 구현 (Manager에서 호출됨)\r\n closeDropdown() {\r\n this.isOpen = false;\r\n }\r\n\r\n // event handlers\r\n handleTriggerClick = (event: Event) => {\r\n event.stopPropagation();\r\n\r\n if (!this.disabled) {\r\n this.isOpen = !this.isOpen;\r\n this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n }\r\n };\r\n\r\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\r\n const { option, event } = detail;\r\n event.stopPropagation();\r\n\r\n if (!option.disabled) {\r\n this.value = option.value;\r\n this.isOpen = false;\r\n }\r\n };\r\n\r\n private filterOptions() {\r\n if (!this.searchText \|\| this.searchText.trim() === '') {\r\n // 검색어가 없으면 전체 옵션 표시\r\n this.filteredOptions = this.options;\r\n } else {\r\n // 검색어가 있으면 필터링\r\n this.filteredOptions = this.options.filter(option =>\r\n option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\r\n );\r\n }\r\n }\r\n\r\n private getSelectedOption(): SelectOption \| undefined {\r\n return this.options.find(option => option.value === this.value);\r\n }\r\n\r\n private handleDropdownScroll = (event: Event) => {\r\n const target = event.target as HTMLElement;\r\n const scrollTop = target.scrollTop;\r\n\r\n // 스크롤이 조금이라도 되면 그림자 표시\r\n this.isScrolled = scrollTop > 0;\r\n };\r\n\r\n private async getNativeInputElement(): Promise<HTMLInputElement \| null> {\r\n if (this.searchRef) {\r\n return this.searchRef.getNativeElement();\r\n }\r\n return null;\r\n }\r\n\r\n private scrollToOption(optionElement: HTMLElement) {\r\n if (!this.dropdownRef \|\| !optionElement) return;\r\n\r\n const dropdown = this.dropdownRef;\r\n const optionTop = optionElement.offsetTop;\r\n const optionHeight = optionElement.offsetHeight;\r\n const dropdownScrollTop = dropdown.scrollTop;\r\n const dropdownHeight = dropdown.clientHeight;\r\n\r\n const searchContainer = dropdown.querySelector('.sd-select__search-container');\r\n const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\r\n\r\n const visibleTop = dropdownScrollTop + searchOffset;\r\n const visibleBottom = dropdownScrollTop + dropdownHeight;\r\n\r\n if (optionTop < visibleTop) {\r\n dropdown.scrollTop = optionTop - searchOffset;\r\n } else if (optionTop + optionHeight > visibleBottom) {\r\n dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;\r\n }\r\n }\r\n\r\n // render method\r\n render() {\r\n const style = {\r\n '--select-width': this.width \|\| '200px',\r\n '--select-dropdown-height': this.dropdownHeight \|\| '260px',\r\n };\r\n\r\n return (\r\n <Host style={style}>\r\n <div\r\n class={{\r\n 'sd-select': true,\r\n 'sd-select--open': this.isOpen,\r\n 'sd-select--disabled': this.disabled,\r\n }}\r\n ref={el => (this.selectRef = el)}\r\n >\r\n {this.renderLabel(this.label)}\r\n <div class=\"sd-select__container\">\r\n {this.renderTrigger()}\r\n {this.renderDropdown()}\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private renderLabel(label?: string) {\r\n if (!label) return null;\r\n\r\n return <label class=\"sd-select__label\">{label}</label>;\r\n }\r\n\r\n private renderTrigger() {\r\n const selectedOption = this.getSelectedOption();\r\n return (\r\n <div\r\n class=\"sd-select__trigger\"\r\n tabindex={this.disabled ? -1 : 0}\r\n onClick={this.handleTriggerClick}\r\n >\r\n <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\r\n {this.clearable && selectedOption && !this.disabled && (\r\n <sd-icon\r\n key=\"clear-icon\"\r\n name=\"close\"\r\n size={10}\r\n color=\"#888\"\r\n class=\"sd-select__clear\"\r\n onClick={event => {\r\n event.stopPropagation();\r\n this.value = null;\r\n }}\r\n ></sd-icon>\r\n )}\r\n\r\n <sd-icon\r\n key=\"arrow-icon\"\r\n name=\"arrowDown\"\r\n color=\"#888\"\r\n class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\r\n ></sd-icon>\r\n </div>\r\n );\r\n }\r\n\r\n private renderDropdown() {\r\n if (this.isOpen === false) return null;\r\n return (\r\n <sd-portal open={this.isOpen} parentRef={this.selectRef} onSdClose={this.closeDropdown}>\r\n <div\r\n class=\"sd-select__dropdown\"\r\n onScroll={this.handleDropdownScroll}\r\n ref={el => (this.dropdownRef = el)}\r\n >\r\n {this.searchable && (\r\n <div\r\n class={{\r\n 'sd-select__search-container': true,\r\n 'sd-select__search-container--scrolled': this.isScrolled,\r\n }}\r\n onClick={event => event.stopPropagation()}\r\n >\r\n <sd-input\r\n ref={el => (this.searchRef = el)}\r\n value={this.searchText}\r\n placeholder=\"검색\"\r\n clearable\r\n inputStyle={{ 'padding-left': '8px' }}\r\n autofocus\r\n onSdInput={event => {\r\n this.searchText = String(event?.detail);\r\n }}\r\n onSdFocus={() => {\r\n this.itemIndex = -1;\r\n }}\r\n >\r\n <sd-icon\r\n name=\"search\"\r\n size={16}\r\n color=\"#737373\"\r\n style={{ marginRight: '4px' }}\r\n slot=\"prefix\"\r\n ></sd-icon>\r\n </sd-input>\r\n </div>\r\n )}\r\n {this.filteredOptions.length > 0 ? (\r\n this.filteredOptions.map((option, index) => (\r\n <slot name={`option-${option.value}`}>\r\n <sd-select-option\r\n option={option}\r\n index={index}\r\n isSelected={option.value === this.value}\r\n isFocused={index === this.itemIndex}\r\n onOptionClick={({ detail }) => this.handleOptionClick(detail)}\r\n ></sd-select-option>\r\n </slot>\r\n ))\r\n ) : (\r\n <slot name=\"option-placeholder\">\r\n <div class={'sd-select__option-placeholder'}>{this.optionPlaceholder}</div>\r\n </slot>\r\n )}\r\n </div>\r\n </sd-portal>\r\n );\r\n }\r\n}\r\n\r\n{\r\n /\r\n <sd-select id=\"select-1\">\r\n <!-- <div slot=\"option-placeholder\">옵션이 없습니다.</div> -->\r\n </sd-select>\r\n <sd-select id=\"select-2\"> </sd-select>\r\n <sd-select id=\"select-3\" searchable clearable>\r\n <div slot=\"option-3\">test</div>\r\n </sd-select>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const select1 = document.getElementById('select-1');\r\n const select2 = document.getElementById('select-2');\r\n const select3 = document.getElementById('select-3');\r\n const select = document.querySelector('sd-select slot[name=\"option-3\"]');\r\n select1.optionPlaceholder = 'No options available';\r\n\r\n const options = [\r\n { label: 'Option 1', value: '1' },\r\n { label: 'Option 2', value: '2' },\r\n { label: 'Option 3', value: '3', disabled: true },\r\n { label: 'Option 4', value: '4' },\r\n { label: 'Option 5', value: '5' },\r\n { label: 'Option 6', value: '6' },\r\n { label: 'Option 7', value: '7', disabled: true },\r\n { label: 'Option 8', value: '8' },\r\n { label: 'Option 9', value: '9' },\r\n { label: 'Option 10', value: '10' },\r\n { label: 'Option 11', value: '11', disabled: true },\r\n { label: 'Option 12', value: '12' },\r\n { label: 'Option 13', value: '13' },\r\n { label: 'Option 14', value: '14' },\r\n { label: 'Option 15', value: '15', disabled: true },\r\n { label: 'Option 16', value: '16' },\r\n { label: 'Option 17', value: '17' },\r\n { label: 'Option 18', value: '18' },\r\n { label: 'Option 19', value: '19', disabled: true },\r\n { label: 'Option 20', value: '20' },\r\n { label: 'Option 21', value: '21' },\r\n { label: 'Option 22', value: '22' },\r\n { label: 'Option 23', value: '23', disabled: true },\r\n { label: 'Option 24', value: '24' },\r\n ];\r\n\r\n select2.options = options;\r\n select3.options = options;\r\n });\r\n </script>\r\n\r\n */\r\n}\r\n"]}