npm - @sellmate/design-system - Versions diffs - 0.0.43 → 0.0.45 - Mend

@sellmate/design-system 0.0.43 → 0.0.45

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

package/dist/cjs/sd-card.cjs.entry.js CHANGED Viewed

@@ -11,7 +11,7 @@ const SdCard = class {
     bordered = true;
     class = '';
     render() {
-        return (index.h(index.Host, { key: '8bc5c53ae7a166de72a89e407f55c19bc49d8429' }, index.h("div", { key: '891fc0291a35c110d63aeda09bdaf64e6fa45d42', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, index.h("slot", { key: '0bac0a6b5d7b1284008ba24d69a6d06dc0659bdf' }))));
+        return (index.h(index.Host, { key: 'b39b016a66f0df13d09ff3a1ce453bb5eda23b52' }, index.h("div", { key: '2a22dcc5ede4067ecbb2bbbe985d95ffaee3a3a6', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, index.h("slot", { key: 'f73cae0097be43bcd666ade2db27c585090eca75' }))));
     }
 };
 SdCard.style = sdCardCss;

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

@@ -82,7 +82,7 @@ const SdDatePicker = class {
         this.isOpen = false;
     };
     render() {
-        return (index.h(index.Host, { key: 'ceaa6b5321f565e0560feb4218205925210d0967', class: "sd-date-picker" }, index.h("sd-input", { key: '1b5e1afcbad3daf40766977edd17077d9bc18200', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", onClick: () => this.openMenu() }, index.h("sd-icon", { key: 'd61cc0a28f65c77a80ebf216a259b66b17615054', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '2e41787708d795d727edf1d21398bc70e31f41e0', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: '579adc1459a9fd6ee9313eec5a4d03b2a2e61222', class: "sd-date-picker__menu" }, index.h("div", { key: '5bae8978c6a4bb25f430f94d2c66927031a8e646', class: "sd-date-picker__header" }, index.h("div", { key: 'e4482baaa76c96740c2ff9eea4182b7bda59b974', class: "year-nav" }, index.h("button", { key: 'eb439c8147be7fe8d351c30e6b516db19ccbbc0d', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, index.h("sd-icon", { key: '7a685bd6c07cdd8eff0ac0c8e19c07f6c2d826dc', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: 'e19520fa7dd4a6f19ff30482a9291caa83471b41', class: "year-nav__current" }, this.currentYear), index.h("button", { key: '5ff3333f877ca6b7faddc4494d0c88747c29c714', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, index.h("sd-icon", { key: '2d02cf464f98aafc9a929414b88e77d0167983a5', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '6195fc68cb522b0368344057da580ff73dfe6efd', class: "month-nav" }, index.h("button", { key: 'c68a01bb06f8ac2276f678c916f41d52cc17fb69', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, index.h("sd-icon", { key: '12873470bf8ca8c1e834f7953429a3e77ca24c6d', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: 'fb0db178bc0dc078f532ca955d6007fbccabb97d', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), index.h("button", { key: 'd4871fe7e7328b060bdf9f2b56153e81d9c6a5b5', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, index.h("sd-icon", { key: 'cf8467b63261012751ca0abafde6846eb397f13f', name: "arrowRight", size: "12", color: "#CCCCCC" })))), index.h("div", { key: 'a5d9cacac573f545b1fe1c321d5971d50db6e957', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("div", { key: day, class: "day" }, day)))), index.h("div", { key: 'dc2769b821cda06b29c6f45ac2363a2df7a32d04', class: "sd-date-picker__body" }, [
+        return (index.h(index.Host, { key: '67bc480db5e0f16fa5af8bd75b6dde76d457b4dd', class: "sd-date-picker" }, index.h("sd-input", { key: 'd31e41161179efb1b961ea00f7333b048e43467a', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", onClick: () => this.openMenu() }, index.h("sd-icon", { key: '1a3c2d291628a00d217a0b20ddeb38d8590706f7', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '85b52726ad96ed74cb42e1eda4e014eb8095face', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: 'e398ac0094ef23907b7d3a7f88b37587207ade33', class: "sd-date-picker__menu" }, index.h("div", { key: '328de8581f0cb895bb3e6e3758a7adedbad302de', class: "sd-date-picker__header" }, index.h("div", { key: '633feae88e423ffa6fa6eb6841a937be3558ccc5', class: "year-nav" }, index.h("button", { key: '89c3d4593c0a2c2917003a93ac1ff0176c611d72', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, index.h("sd-icon", { key: '140655e36c73784f4704a51a89c79ae72d237218', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '3917a8caec91a855b9bf6f42b3c8e856d490817a', class: "year-nav__current" }, this.currentYear), index.h("button", { key: 'b5a7e7903594482bff30c72afaca8609b04f8aea', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, index.h("sd-icon", { key: '49364c66f35a9a5e724644963f3ab276245241af', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '153ee788090ed23b32cec5f660eeda741076b2a6', class: "month-nav" }, index.h("button", { key: '33f7a059d08bd761cc6ca083f5fd1980017e3f2d', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, index.h("sd-icon", { key: 'c641505d42a0683bea0e6b7a3db9cf6352a78d4d', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '5fb032ee2040e4abd333dc640c3998e3288662f2', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), index.h("button", { key: 'da13b27ba6f74fae110383e294be1d01e0d74eb1', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, index.h("sd-icon", { key: '223b006490c3f3a3d6d7036115da2b88e801dca7', name: "arrowRight", size: "12", color: "#CCCCCC" })))), index.h("div", { key: '1251dd00b4cb02ebddaf1aa93e1fc8a351bee10f', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("div", { key: day, class: "day" }, day)))), index.h("div", { key: '474772b41df806093a4e578b67420adb6a973018', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

package/dist/cjs/sd-date-range-picker.cjs.entry.js CHANGED Viewed

@@ -157,9 +157,9 @@ const SdDateRangePicker = class {
         this.isOpen = false;
     };
     render() {
-        return (index.h(index.Host, { key: '43de817f75cdcc0bfe2b3de2091007dc161a7c11', class: "sd-date-range-picker" }, index.h("sd-input", { key: '54ea327695939b32d678c5888dcb85aadd47735c', 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 (index.h(index.Host, { key: '01d8def2e141ae3767fb57880482845a5bfcc6ca', class: "sd-date-range-picker" }, index.h("sd-input", { key: 'f3738314482ac84517958672d2f75cdc7cd6d354', 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() }, index.h("sd-icon", { key: '08300ae0452a157ee26488f63a9352bc49ada8ba', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: 'ef0c93df45c0a9aa8aaf9b2bd2e031a1a5158806', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: '769361e46fe458b3f4674a14175677157e36240b', class: "sd-date-range-picker__menu" }, index.h("div", { key: 'f9af2fa4add883227fad96826cad0e5ef88a427c', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, index.h("button", { key: 'd7e7db3bd1941ed68b8b07237bd8a96c2d00a34e', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, index.h("sd-icon", { key: 'a2c069938f4e840e4fcca4beb69e28f56f2b8d70', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("div", { key: 'ee48baa353e0a9016090194aacf9af61245ad557', class: "header-label" }, this.prevYear), index.h("button", { key: 'e8cc4adf150736c44292f82c4cfbfc7c74f1c75e', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, index.h("sd-icon", { key: 'c06b18b0e09ff740afc7857d7c41329829068f86', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '22d12259763c47ff3cb27d41a40132ebacb6f5af', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index$1) => (index.h(index.Fragment, null, index$1 === 1 && index.h("div", { class: "separator" }), index.h("div", { key: index$1, class: "calendar-container" }, index.h("div", { class: "calendar-header" }, index.h("button", { type: "button", name: "month", title: "Month", class: index$1 === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index$1 === 0 ? 'prev' : 'next') }, index.h("sd-icon", { name: index$1 === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index$1 === 0
+            }, onClick: () => this.openMenu() }, index.h("sd-icon", { key: '2ca7e4428256374866a74bf550fd7fc825fca4c1', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '381b44e43ed021a1200854e445f113e02112b21b', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: '47f31a5136e236899ac861cdd66a0424ed9507ee', class: "sd-date-range-picker__menu" }, index.h("div", { key: '3c5c4050f4ea36e93b7cc02e0935f3898bca7523', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, index.h("button", { key: 'b5ddf46fbc15290df316697c99502a07499452fb', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, index.h("sd-icon", { key: 'fded6383fd7a90e80cba1b222a334764bcd1f4c2', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("div", { key: 'b8408d970c42fc373b5300ce91887010e78c29f9', class: "header-label" }, this.prevYear), index.h("button", { key: 'bc4c97952e8ae30ad685de8f966e5b0445e5f6a0', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, index.h("sd-icon", { key: '7dff57a2d3c44a810ab078c9418155dbadb7988d', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '9c43dd586c0f702490093204c06102186cf27ebe', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index$1) => (index.h(index.Fragment, null, index$1 === 1 && index.h("div", { class: "separator" }), index.h("div", { key: index$1, class: "calendar-container" }, index.h("div", { class: "calendar-header" }, index.h("button", { type: "button", name: "month", title: "Month", class: index$1 === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index$1 === 0 ? 'prev' : 'next') }, index.h("sd-icon", { name: index$1 === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index$1 === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), index.h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), index.h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (index.h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date ===
                 this.dateUtil.formatDate(index$1 === 0 ? this.prevYear : this.nextYear, index$1 === 0 ? this.prevMonth : this.nextMonth, Number(day))), type: this.getDateBoxType(this.dateUtil.formatDate(index$1 === 0 ? this.prevYear : this.nextYear, index$1 === 0 ? this.prevMonth : this.nextMonth, Number(day))), isToday: useDatePicker.today ===

package/dist/cjs/sd-guide.cjs.entry.js ADDED Viewed

@@ -0,0 +1,85 @@
+'use strict';
+var index = require('./index-DXo1Fhkn.js');
+var color = require('./color-Oz29vj7L.js');
+const sdGuideCss = "@charset \"UTF-8\";sd-button{display:inline-block;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:\"\";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}sd-guide{display:inline-block;height:fit-content}sd-guide .sd-guide{display:inline-block}sd-guide .sd-guide .sd-button{padding:0 16px 0 12px;border-radius:16px;color:#333333 !important;display:flex;align-items:center;transition:none}sd-guide .sd-guide .sd-button .sd-button__content{color:#333333 !important}sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label{color:#333333 !important;margin-left:4px}sd-guide .sd-guide--active .sd-button{border:1px solid #12b553}sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label{color:white !important}.sd-guide__popup{position:relative;padding:20px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:#333333;font-size:12px;font-weight:400}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:\"-\";width:6px;color:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2::before{content:\"•\"}.sd-guide__popup__list__item--depth-2{padding-left:26px}";
+const GUIDE_LABEL = {
+    help: '활용 TIP',
+    pdf: 'PDF Guide',
+    youtube: 'Video Guide',
+    notion: '사용법 안내',
+    event: 'Event Button',
+};
+const GUIDE_ICON = {
+    help: {
+        name: 'helpOutline',
+        size: 20,
+        color: color.colors.green_70,
+    },
+    pdf: { name: 'pdf', size: 20, color: color.colors.red_75 },
+    youtube: { name: 'youtube', size: 20, color: color.colors.red_75 },
+    notion: { name: 'notion', size: 16, color: color.colors.black },
+    event: { name: 'event', size: 16, color: color.colors.brilliantblue_70 },
+};
+const SdGuide = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    type = 'help';
+    label = '';
+    message = '';
+    guideUrl = '';
+    popupTitle = '';
+    popupWidth;
+    popupShow = false;
+    guideRef;
+    handleClickGuide = () => {
+        if (this.type === 'help') {
+            this.popupShow = !this.popupShow;
+            return;
+        }
+        if (this.guideUrl) {
+            window.open(this.guideUrl, '_blank');
+        }
+    };
+    get guideClass() {
+        const classes = ['sd-guide', `sd-guide--${this.type}`];
+        if (this.popupShow)
+            classes.push('sd-guide--active');
+        return classes.join(' ');
+    }
+    closeDropdown = () => {
+        this.popupShow = false;
+    };
+    render() {
+        const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
+        return (index.h(index.Host, { key: '8de1cc4591dd1294a374421965322d6a958c9797', style: {
+                '--sd-guide-color': GUIDE_ICON[this.type].color,
+            } }, index.h("sd-button", { key: '8dc820b941d8e3003f2440a4fa1ccd36be0a854e', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (index.h("sd-portal", { key: 'd8cbafa686da33b2ced3a00fe13f673ebab247e5', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: 'f5048c842dcec0414ee747f69c2033b688ba1672', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: 'a7cb87e50b7b9ff3a40742cd4881ac8c413f18a5', class: "sd-guide__popup__close", icon: "close", color: color.colors.grey_65, size: "md", variant: "ghost", noHover: true,
+            // buttonStyle={{ padding: '0px', minHeight: '0px' }}
+            onSdClick: this.closeDropdown }), index.h("div", { key: 'dd2a7ceeb8fa28c2d430a2d10778b87db5bc576d', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: '40ccb8d9fc31c7f0c68ce4fd8aacbfdf7e4cf4dc', name: "helpOutline", size: 24, color: color.colors.green_65 }), index.h("h3", { key: '55726b9de8d9cd996154700ffb0c5178face6916', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), index.h("ul", { key: '3221ed8367735883cb65c8ab66b63d977eae24dd', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+    }
+    // 현재 2depth까지만 스타일 적용
+    renderListItem(message, depth = 0) {
+        const listItems = [];
+        if (Array.isArray(message)) {
+            const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));
+            listItems.push(...depthMsg.flat());
+        }
+        else {
+            listItems.push(this.renderLi(message, depth));
+        }
+        return listItems;
+    }
+    renderLi = (message, depth) => {
+        const listContent = message.replace(/ /gi, '&nbsp;');
+        return (index.h("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, index.h("p", { innerHTML: listContent })));
+    };
+};
+SdGuide.style = sdGuideCss;
+exports.sd_guide = SdGuide;
+//# sourceMappingURL=sd-guide.entry.cjs.js.map

package/dist/cjs/sd-guide.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sd-guide.entry.cjs.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":["colors","h","Host"],"mappings":"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"}

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

@@ -0,0 +1,56 @@
+'use strict';
+var index = require('./index-DXo1Fhkn.js');
+var resolveColor = require('./resolveColor-CauSLF0s.js');
+require('./color-Oz29vj7L.js');
+const sdModalCardCss = "sd-modal-card{display:block}sd-modal-card .sd-modal-card{position:relative;padding:40px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2)}sd-modal-card .sd-modal-card__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-modal-card .sd-modal-card sd-icon.sd-modal-card__icon{display:block;width:32px;height:32px;margin:0 auto 12px auto}sd-modal-card .sd-modal-card__title{color:var(--point-color);font-size:18px;font-weight:700;line-height:30px;text-align:center;margin:0 0 20px 0}sd-modal-card .sd-modal-card__message{color:#222222;font-weight:400;font-size:12px;line-height:22px;text-align:center;margin:0}sd-modal-card .sd-modal-card__button-container{display:flex;margin:32px auto 0 auto;justify-content:center;align-items:center;gap:8px}sd-modal-card .sd-modal-card__button-container.flex-column{flex-direction:column}sd-modal-card .sd-modal-card__button-container button.sd-modal-card__button{width:89px}";
+const SdModalCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sdClose = index.createEvent(this, "sdClose");
+        this.sdConfirm = index.createEvent(this, "sdConfirm");
+    }
+    type = 'info';
+    system = 'normal';
+    useCloseButton = true;
+    modalTitle = 'normal';
+    buttonFlexDirection = 'row';
+    buttonProps = [
+        {
+            label: '확인',
+            color: 'grey_80',
+            size: 'md',
+        },
+    ];
+    message = [];
+    modalClass = '';
+    sdClose;
+    sdConfirm;
+    get pointColor() {
+        if (this.type !== 'normal') {
+            return 'grey_95';
+        }
+        switch (this.system) {
+            case 'positive':
+                return resolveColor.resolveColor('brilliantblue_75');
+            case 'negative':
+                return resolveColor.resolveColor('red_75');
+            default:
+                return resolveColor.resolveColor('grey_95');
+        }
+    }
+    get getModalClass() {
+        let modalClass = `sd-modal-card ${this.modalClass}`;
+        modalClass += ' ' + `sd-modal-card-${this.system}`;
+        return modalClass;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'a7b84787e02fd73d3df5af58011b92bd70bf5418', style: { '--point-color': this.pointColor } }, index.h("div", { key: 'ee1e08e2dca1c4192bbdf21cba148a1ad72459e1', class: this.getModalClass }, this.useCloseButton && (index.h("sd-icon", { key: 'ec9aad87db22a57f01326db6fac695eb2d4617ad', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.sdClose.emit() })), this.type !== 'normal' && (index.h("sd-icon", { key: 'ccf36cbb5ef0a793d422cee2312d338436bd6d61', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), index.h("h2", { key: '9d1e9f949bc75697960d2c44667f7cad52d976c4', class: "sd-modal-card__title" }, this.modalTitle), index.h("slot", { key: 'f2b75146e58d78ac8431a1549068e9a219be4506' }, index.h("div", { key: '75d035874b34f388c3c6acb60f4a90dae46ff7e6', class: `sd-modal-card__message-container` }, this.message.map(msg => (index.h("p", { class: "sd-modal-card__message" }, msg))))), index.h("div", { key: '39f99159776d7c107b2b3410e5681a67766b2ce8', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps.map(button => (index.h("sd-button", { class: 'sd-modal-card__button', variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onClick: () => !button.type || button.type === 'confirm' ? this.sdConfirm.emit() : this.sdClose.emit(), ...(button.class && { class: button.class }) })))))));
+    }
+};
+SdModalCard.style = sdModalCardCss;
+exports.sd_modal_card = SdModalCard;
+//# sourceMappingURL=sd-modal-card.entry.cjs.js.map

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

@@ -0,0 +1 @@

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

package/dist/cjs/sd-popover.cjs.entry.js CHANGED Viewed

@@ -32,18 +32,17 @@ const SdPopover = class {
     componentWillLoad() {
         this.showPopover = this.show;
         this.slotContent = this.el.innerHTML;
-        console.log(this.el);
     }
     buttonEl;
     handleClose = () => {
         this.showPopover = false;
     };
     render() {
-        return (index.h(index.Fragment, { key: '933a0e45b636c25278bda7f3ec231aeeadcbbf0b' }, this.label ? (index.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)) })) : (index.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 && (index.h("sd-tooltip-portal", { key: '070852610c2740a2397f63114e0f098bb58425f2', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: '4b8e62bb99d39272c0c40224895ddc36fde01cc9', class: {
+        return (index.h(index.Fragment, { key: '60031ca070a366a90f74d93908ec956076b4e8be' }, this.label ? (index.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: () => (this.showPopover = !this.showPopover) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (index.h("sd-tooltip-portal", { key: '199246e3638600c05ae9f9cab99c00540f2525ef', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: '204b3dcf316277e5b2ce4fab3273c7726f1485c7', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, index.h("i", { key: '2c5deb2e3eb7627eaefc2b66b1a0e9884fbf5591', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'f0707847886ad91eb973d559dd6f7be9f69a74fb' })), index.h("div", { key: '210e85e37075e3d00d388ae0bdbdb67589e2acaa', class: "sd-popover-menu__content" }, this.menuTitle && index.h("div", { key: '177c935306265772e14c751fbc4b10a33c904f02', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '1debeda00bee4fa53f3bee230ecb54cf07239e7a', class: "sd-popover-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: '261614e9e4cb9a2dd19edd66c758a692b6941aa0', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: 'ca9d1548006958fbac52bf223a933fba1010ce02', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '9a9fff28deb4fb2af65aa84944b2c59b9f374cff', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, index.h("i", { key: '344b1aace077490124078499dbcc08c3bc9af92d', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'be3b82a87f9292d44177927330e0b7d7b1ba2c0f' })), index.h("div", { key: 'ac1223f53514958384fa1b3e7f3bad84933436cd', class: "sd-popover-menu__content" }, this.menuTitle && index.h("div", { key: 'a191a3fa975ff94711a6bbc7ab2fdc4bea0d5f9c', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: 'a830419f35e0cdf43cf4059d1a815d4b169a4625', class: "sd-popover-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: 'd66775a5ec5899caa040e0ae53a1bce0eea3c167', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: '19f1f43ec6908e51f3f5b07268f0c59c3f1db1fe', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: 'b658485e35e837c50886da6cf911d1b9d8f81ff1', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get watchers() { return {
         "show": ["watchShowHandler"]

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

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-popover.entry.cjs.js","sources":["src/components/sd-popover/sd-popover.scss?tag=sd-popover&encapsulation=shadow","src/components/sd-popover/sd-popover.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n.sd-popover {\r\n position: relative;\r\n cursor: pointer;\r\n display: inline-block;\r\n}\r\n","import { Component, Element, Fragment, Prop, State, Watch, h } from '@stencil/core';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\nimport { TooltipArrow } from '../assets/tooltipArrow';\r\n\r\n@Component({\r\n tag: 'sd-popover',\r\n styleUrl: 'sd-popover.scss',\r\n shadow: true,\r\n})\r\nexport class SdPopover {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop({ mutable: true }) show: boolean = false;\r\n\r\n @Prop({ reflect: true }) placement: 'top' \| 'bottom' \| 'left' \| 'right' = 'bottom';\r\n @Prop({ reflect: true }) color: string = '#01BB4B';\r\n\r\n @Prop({ reflect: true }) icon: IconName = 'helpOutline';\r\n @Prop({ reflect: true }) iconSize: number = 12;\r\n\r\n @Prop() label: string = '';\r\n @Prop({ reflect: true }) buttonSize: ButtonSize = 'sm';\r\n @Prop({ reflect: true }) buttonVariant: ButtonVariant = 'primary';\r\n\r\n @Prop({ attribute: 'title', reflect: true }) menuTitle?: string;\r\n @Prop({ reflect: true }) messages: string[] = [];\r\n @Prop({ reflect: true }) buttons: {\r\n [key: string]: any;\r\n }[] = [];\r\n @Prop() menuClass: string = '';\r\n\r\n @Prop() noHover: boolean = true;\r\n\r\n @Prop() useClose: boolean = false;\r\n\r\n @State() showPopover: boolean = false;\r\n @State() slotContent: string = '';\r\n\r\n @Watch('show')\r\n watchShowHandler(newValue: boolean) {\r\n this.showPopover = newValue;\r\n }\r\n\r\n componentWillLoad() {\r\n this.showPopover = this.show;\r\n\r\n this.slotContent = this.el.innerHTML;\r\n~~\r\n 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":["h","Fragment","TooltipArrow"],"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,QACCA,QAACC,cAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,IAAI,CAAC,KAAK,IACVD,~~OAAA~~,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~~,KAEbA,OACC,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,KAChBA,gFACC,SAAS,EAAE,IAAI,CAAC,QAAQ,EACxB,SAAS,EAAE,IAAI,CAAC,WAAW,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EAAA,EAEzBA,OAAA,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,EAEDA,OAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAE,kDAAkD,IAAI,CAAC,SAAS,CAAA,CAAE,EAAA,EAC3EA,OAAC,CAAAE,yBAAY,sDAAgB,CAC1B,EAEJF,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,IAAI,CAAC,SAAS,IAAIA,OAAK,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,KACxBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,IACpC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,KACzBA,OAAA,CAAA,KAAA,EAAA,IAAA,EAAM,OAAO,CAAO,CACpB,CAAC,CACG,CACN,EAEA,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,KACvBA,OAAK,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,KACvBA,0BAAe,MAAM,EAAA,CAAI,CACzB,CAAC,CACG,CACN,CACI,EAEL,IAAI,CAAC,QAAQ,KACbA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,+BAA+B,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EAC9EA,OAAA,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.cjs.js","sources":["src/components/sd-popover/sd-popover.scss?tag=sd-popover&encapsulation=shadow","src/components/sd-popover/sd-popover.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n.sd-popover {\r\n position: relative;\r\n cursor: pointer;\r\n display: inline-block;\r\n}\r\n","import { Component, Element, Fragment, Prop, State, Watch, h } from '@stencil/core';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\nimport { TooltipArrow } from '../assets/tooltipArrow';\r\n\r\n@Component({\r\n tag: 'sd-popover',\r\n styleUrl: 'sd-popover.scss',\r\n shadow: true,\r\n})\r\nexport class SdPopover {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop({ mutable: true }) show: boolean = false;\r\n\r\n @Prop({ reflect: true }) placement: 'top' \| 'bottom' \| 'left' \| 'right' = 'bottom';\r\n @Prop({ reflect: true }) color: string = '#01BB4B';\r\n\r\n @Prop({ reflect: true }) icon: IconName = 'helpOutline';\r\n @Prop({ reflect: true }) iconSize: number = 12;\r\n\r\n @Prop() label: string = '';\r\n @Prop({ reflect: true }) buttonSize: ButtonSize = 'sm';\r\n @Prop({ reflect: true }) buttonVariant: ButtonVariant = 'primary';\r\n\r\n @Prop({ attribute: 'title', reflect: true }) menuTitle?: string;\r\n @Prop({ reflect: true }) messages: string[] = [];\r\n @Prop({ reflect: true }) buttons: {\r\n [key: string]: any;\r\n }[] = [];\r\n @Prop() menuClass: string = '';\r\n\r\n @Prop() noHover: boolean = true;\r\n\r\n @Prop() useClose: boolean = false;\r\n\r\n @State() showPopover: boolean = false;\r\n @State() slotContent: string = '';\r\n\r\n @Watch('show')\r\n watchShowHandler(newValue: boolean) {\r\n this.showPopover = newValue;\r\n }\r\n\r\n componentWillLoad() {\r\n this.showPopover = this.show;\r\n\r\n this.slotContent = this.el.innerHTML;\r\n }\r\n\r\n private buttonEl?: HTMLElement;\r\n\r\n private handleClose = () => {\r\n this.showPopover = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n {this.label ? (\r\n <sd-button\r\n ref={el => (this.buttonEl = el as unknown as HTMLElement)}\r\n label={this.label}\r\n icon={this.icon}\r\n size={this.buttonSize}\r\n color={this.color}\r\n variant={this.buttonVariant}\r\n class=\"sd-popover\"\r\n onClick={() => (this.showPopover = !this.showPopover)}\r\n ></sd-button>\r\n ) : (\r\n <sd-icon\r\n ref={el => (this.buttonEl = el as unknown as HTMLElement)}\r\n name={this.icon}\r\n size={this.iconSize}\r\n color={this.color}\r\n class=\"sd-popover\"\r\n onClick={() => (this.showPopover = !this.showPopover)}\r\n ></sd-icon>\r\n )}\r\n\r\n {this.showPopover && (\r\n <sd-tooltip-portal\r\n parentRef={this.buttonEl}\r\n onSdClose={this.handleClose}\r\n placement={this.placement}\r\n >\r\n <div\r\n class={{\r\n 'sd-popover-menu': true,\r\n [`sd-popover-menu--${this.placement}`]: true,\r\n [this.menuClass]: !!this.menuClass,\r\n }}\r\n >\r\n <i class={`sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}`}>\r\n <TooltipArrow></TooltipArrow>\r\n </i>\r\n\r\n <div class=\"sd-popover-menu__content\">\r\n {this.menuTitle && <div class=\"sd-popover-menu__title\">{this.menuTitle}</div>}\r\n\r\n {this.messages.length > 0 && (\r\n <div class=\"sd-popover-menu__messages\">\r\n {this.messages.map(message => (\r\n <div>{message}</div>\r\n ))}\r\n </div>\r\n )}\r\n\r\n {this.buttons.length > 0 && (\r\n <div class={`sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}`}>\r\n {this.buttons.map(button => (\r\n <sd-button {...button} />\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n\r\n {this.useClose && (\r\n <button class=\"sd-popover-menu__close-button\" onClick={() => this.handleClose()}>\r\n <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\r\n </button>\r\n )}\r\n </div>\r\n </sd-tooltip-portal>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"names":["h","Fragment","TooltipArrow"],"mappings":"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"}

package/dist/cjs/sd-progress.cjs.entry.js CHANGED Viewed

@@ -21,10 +21,10 @@ const SdProgress = class {
         error: '#FB4444',
     };
     render() {
-        return (index.h(index.Host, { key: '68cca90181920f534f2c1d0cf846542b938f5822', style: {
+        return (index.h(index.Host, { key: 'e5a1be5c3343e0645db107b076fac36d1a935ca7', style: {
                 '--progress-color': this.statusColor[this.status],
                 '--progress-percentage': `${this.percentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: '76b37297e94712a559aa90f723fa56ec20ea591c', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: 'd2676df17ad3474f88d3c0972802a7b373b5652e', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (index.h("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, index.h("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));

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

@@ -345,11 +345,11 @@ const SdSelectMultipleGroup = class extends selectKeyboardNavigation.BaseDropdow
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (index.h(index.Host, { key: 'c85e1e6bd6d030ff2da5009a6f72a557d026250b', style: style }, index.h("div", { key: '991f74b5a6bf357225e3c1b2513c1605acc5c047', class: {
+        return (index.h(index.Host, { key: 'bcafcfbb33940882bd7e22a6d197974194554968', style: style }, index.h("div", { key: 'a8547e4aa07d8ccdfbb7955f122eaa3955c5d30e', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,
-            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), index.h("div", { key: '5bc92be9cdc3768db4b79c2310f62f41ca7dec8c', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), index.h("div", { key: '90ba61f1d83692e2eaf430f42a1a0fd55380d774', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label, labelStyle) {
         if (!label)

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

@@ -215,11 +215,11 @@ const SdSelectMultiple = class extends selectKeyboardNavigation.BaseDropdownEven
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (index.h(index.Host, { key: '79bce82ded286fe421a1fe02a2c931c03d7d7073', style: style }, index.h("div", { key: '12008fb3c09ab6cd6c66ac04170e69334f4761b4', class: {
+        return (index.h(index.Host, { key: '0e488c3906b12e73abc6e6216e14b2b4e6a130c8', style: style }, index.h("div", { key: '714a95f446631269a19e44d098ef0dc81c7c6fd5', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), index.h("div", { key: 'e1a007b915f0366ff3092c494efc9ae60ce9ee50', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), index.h("div", { key: '08912b8586c926107cbcaed28b73bd6eb94d47d9', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)

package/dist/cjs/sd-select-option-group.cjs.entry.js CHANGED Viewed

@@ -48,7 +48,7 @@ const SdSelectOptionGroup = class {
         }
     };
     render() {
-        return (index.h("div", { key: '3bf35086c47fa2eb837105a82adccc8bb6c9d5ea', class: {
+        return (index.h("div", { key: 'e96411f172ed4ed5359fef2a124bf49df88e10ec', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -57,10 +57,10 @@ const SdSelectOptionGroup = class {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, index.h("div", { key: '6239186c53037410527408a0b6eac0cba720563e', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: '49acfb365f4b8c24c3a28e0ec4d1f75b3f0e9ac6', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, index.h("div", { key: 'fa9464cac1ee58b46b983f17882eeb847e3dc9b7', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: 'f9a7ab839d566671d6ee9e7164424d307a81f2d6', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), index.h("span", { key: '96bb75ffa1f2a69f91328f13c413ce0c9aa392c8', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: 'e91455e0536be1a32bc37146ffa98a377746c674', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), index.h("span", { key: 'ee27fb5e2d14acf898c7ce1e22b8cbffe59cec31', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: 'aaf9552da0a665ac34848ab5649d5993133394c4', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
 };
 SdSelectOptionGroup.style = sdSelectOptionGroupCss;