@sellmate/design-system 0.0.26 → 0.0.27

package/hydrate/index.mjs

@@ -4922,6 +4922,26 @@ class SdInput {
     }; }
 }
 
+const sdLoadingSpinnerCss = "sd-loading-spinner{display:block}sd-loading-spinner .sd-loading-spinner{animation:sd-loading-spin 2s linear infinite;transform-origin:center center}sd-loading-spinner .sd-loading-spinner .path{animation:sd-loading-spin-path 1.5s ease-in-out infinite}@keyframes sd-loading-spin{0%{transform:rotate3d(0, 0, 1, 0deg)}25%{transform:rotate3d(0, 0, 1, 90deg)}50%{transform:rotate3d(0, 0, 1, 180deg)}75%{transform:rotate3d(0, 0, 1, 270deg)}100%{transform:rotate3d(0, 0, 1, 359deg)}}@keyframes sd-loading-spin-path{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}";
+
+class SdLoadingSpinner {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (hAsync(Host, { key: '5d1533618d656320e6a7aae01bcfcda6765f44d2' }, hAsync("svg", { key: '12387df275b92341a8a879724d56428f715a5b60', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, hAsync("circle", { key: '777d5328b6d247166fb64d3d720be714eb8c4663', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+    }
+    static get style() { return sdLoadingSpinnerCss; }
+    static get cmpMeta() { return {
+        "$flags$": 256,
+        "$tagName$": "sd-loading-spinner",
+        "$members$": undefined,
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 const sdPaginationCss = ".sd-pagination{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:8px;color:#555555;width:100%;font-size:12px}.sd-pagination .prepend-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .prepend-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .prepend-btns button:hover{border:1px solid #006ac1;border-radius:14px}.sd-pagination .append-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .append-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .append-btns button:hover{border:1px solid #006ac1;border-radius:14px}.sd-pagination .pagination-btn{display:flex;align-items:center;justify-content:center;border-radius:14px;outline:none;border:none;cursor:pointer;height:26px;color:#555555;width:var(--pagination-btn-width, 26px)}.sd-pagination .pagination-btn--selected{background-color:#006ac1;color:white}.sd-pagination .pagination-btn:hover{border:1px solid #006ac1}.sd-pagination--simple .pagination-info{line-height:26px;display:flex;flex-flow:row nowrap;align-items:center;gap:8px}.sd-pagination--simple .pagination-info .current-page,.sd-pagination--simple .pagination-info .last-page{padding:0 2px}";
 
 const BUTTON_WIDTH = {
@@ -5002,12 +5022,12 @@ class SdPagination {
         }
     }
     render() {
-        return (hAsync("div", { key: '2707331958e2c375b570590a8742655bacb1aa4d', class: this.paginationClasses }, hAsync("div", { key: 'e98573b80c04454ea0b30f6cb7fe1974028a0464', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "pagination-info" }, hAsync("span", { class: "current-page" }, this.currentPage), hAsync("span", null, "/"), hAsync("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (hAsync("div", { key: '442749b854a4033cd4eba7941ac69b0af3d70955', class: this.paginationClasses }, hAsync("div", { key: '9ae405c342ec1a812312bc2abc5759d811e806c4', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "pagination-info" }, hAsync("span", { class: "current-page" }, this.currentPage), hAsync("span", null, "/"), hAsync("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (hAsync("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)))), hAsync("div", { key: 'ccb867eccaece5ecbdcef7abe0e4d333fb169d11', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: '0ec1e8a3a815919d9c8f1a5539778b2cc541772e', class: "append-btns" }, this.renderNextButtons())));
     }
     static get watchers() { return {
         "currentPage": ["onPropChange"],
@@ -5066,11 +5086,11 @@ class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (hAsync(Fragment, { key: 'fb877e8d016d13fb33b49a1a4dbfed9fc01b1336' }, this.label ? (hAsync("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)) })) : (hAsync("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 && (hAsync("sd-tooltip-portal", { key: '02208721da61cb84086a57c823f8e31775fdbd5e', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: '3f3c4fc690dac5061bda08af37121e2b98374979', class: {
+        return (hAsync(Fragment, { key: 'cf3343eff82b136b3c1d55f3adc1ce7bd815c144' }, this.label ? (hAsync("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)) })) : (hAsync("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 && (hAsync("sd-tooltip-portal", { key: '254f14cafcc6f5dc4494360fc754656536b08a3a', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: 'f375fdf55aed6f3b8b4705fbaa3467b4c1eae7fd', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, hAsync("i", { key: '6f0df95bafc2cbf564fd0e5a133c89f03c3a924b', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '535acee0be86db4ed58d6cc1631732541f1e475e' })), hAsync("div", { key: 'd4366800a8cbd5a1f9630344a5ca4241b0eaa8dd', class: "sd-popover-menu__content" }, this.menuTitle && hAsync("div", { key: '1cd9de3129988c5d26be0ded5b03520ab591cb9a', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: '5aae57948bd5e0fd98e73a8ae504b77ce6cdbe07', class: "sd-popover-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: '814ac9ba0b2cf4367bb4cd5e688fa5433fee7126', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: 'a21ad0a5e28f8609b2f9d9accd0be5d81ed9de5b', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '10738ec0926ea5fbc0b30b5c8c08b6cc37bf47d3', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, hAsync("i", { key: '5e4eede6dc40190223ffeaa49d2bdffd32e2defd', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '47c81c26ac958b000a451dc6c81c8752d314b0e0' })), hAsync("div", { key: '13af261b03ae81c25f7b6791dec18d3948ff4e32', class: "sd-popover-menu__content" }, this.menuTitle && hAsync("div", { key: '8024032ddaca5046ff0da49cb97ea7883a07dfd5', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: '68067a6b751f77dfaab56fcfdcfd9635f057d8c3', class: "sd-popover-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: 'f49814504de9e8f84929ae85c73df5797689947e', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: 'ca1b3244636936e4ae870c201501933a82f2fc46', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '518c4817f3f6eb54883426f6dd3acb683d3d30b4', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get watchers() { return {
         "show": ["watchShowHandler"]
@@ -5221,7 +5241,7 @@ class SdPortal {
         this.sdClose.emit();
     }
     render() {
-        return hAsync("slot", { key: '4f344b083ff3a2d32d1a23f99e90687aeeb676b1' });
+        return hAsync("slot", { key: '64f974db091753e7f2d5712483d32a7c1585b37b' });
     }
     static get cmpMeta() { return {
         "$flags$": 772,
@@ -5836,11 +5856,11 @@ class SdSelectMultiple extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (hAsync(Host, { key: '8a237d4dc7f743a7685b440cd654d51629765a20', style: style }, hAsync("div", { key: 'c1240092508fbb9e9b638803171847b174da9062', class: {
+        return (hAsync(Host, { key: '4ed0861a16ef427fdd526a3993325bc47a427f9a', style: style }, hAsync("div", { key: 'c918e7e5dc13e53a20ba63bd0b9216fae24733f2', 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), hAsync("div", { key: 'b99913866f316d7eacffd9e0e71fd58baac05c34', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: '04aac623cfc31dfabda4a8e4840ea7f3c9fdbc28', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)
@@ -6341,7 +6361,7 @@ class SdSelectOption {
         }
     };
     render() {
-        return (hAsync(Host, { key: '23d87df53fa083e6c9aceb1956de51800117df9f' }, hAsync("div", { key: '569c5d35098350fa4d186ba838925de4f966c491', class: {
+        return (hAsync(Host, { key: 'b571989b755f8e39c95cab49f11ef7935e4bc8c7' }, hAsync("div", { key: 'af95f0a7ad90141eb7a9db91b0cfd0c66c7d4920', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -6427,7 +6447,7 @@ class SdSelectOptionGroup {
         }
     };
     render() {
-        return (hAsync("div", { key: '0b921cd09e8115ed3af13fc2e9f1ecaff60f2b08', class: {
+        return (hAsync("div", { key: 'eb8aac2629a851fce84ba1a17963282876a5d3c7', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -6436,10 +6456,10 @@ class SdSelectOptionGroup {
                 '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) }, hAsync("div", { key: '402a3e272f03930fe049d249c275a2acc1539bc3', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '6f8c05df6de67268636495b3d15dd5f896c8b846', 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) }, hAsync("div", { key: '3c6ce8963fa794aca439bcc03e677fdcbf5a5d91', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '28f07c5705d15dd20db627fccc8c31ba9b554bc3', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), hAsync("span", { key: '4cbe65750bace072e680c251e904688c63eb6722', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'af63ce7b9e377da8453049c49c5af28e411b9eec', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), hAsync("span", { key: 'cef2d4c2a0183dbe0cc1e97db3337f3acd40f1cd', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: '522c9419fc38e86e3c66b3c0ae9a63f78568547e', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get style() { return sdSelectOptionGroupCss; }
     static get cmpMeta() { return {
@@ -6464,13 +6484,14 @@ class SdSelectOptionGroup {
     }; }
 }
 
-const sdTableCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:auto;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;height:var(--table-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:\"\";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:\"\";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr:last-of-type td{border-bottom:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}";
+const sdTableCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:auto;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;height:var(--table-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:\"\";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:\"\";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody{position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody .sd-table__loading{position:absolute;top:0;left:0;width:100%;height:calc(var(--table-height, auto) - 36px);min-height:calc(100% - 36px);background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr:last-of-type td{border-bottom:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}";
 
 class SdTable {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.sdSelectChange = createEvent(this, "sdSelectChange");
         this.sdPageChange = createEvent(this, "sdPageChange");
+        this.sdRowsPerPageChange = createEvent(this, "sdRowsPerPageChange");
     }
     get el() { return getElement(this); }
     columns;
@@ -6484,6 +6505,7 @@ class SdTable {
     stickyHeader = false;
     stickyColumn = { left: 0, right: 0 };
     noDataLabel = '데이터가 없습니다.';
+    isLoading = false;
     pagination;
     bodyCellRenderer;
     useInternalPagination = false;
@@ -6496,6 +6518,7 @@ class SdTable {
     ];
     sdSelectChange;
     sdPageChange;
+    sdRowsPerPageChange;
     currentPage = this.pagination?.page || 1;
     innerRows = [];
     innerSelected = new Set();
@@ -6656,9 +6679,7 @@ class SdTable {
             }, style: this.getStickyStyle(colIdx) }, hAsync("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, hAsync("slot", { name: `header-cell-${col.name}` }, hAsync("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && hAsync("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (hAsync("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(colIdx, evt) }))))))));
     }
     renderBody() {
-        if (!this.paginatedRows.length)
-            return (hAsync("tbody", { part: "tbody-empty" }, hAsync("tr", null, hAsync("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, this.noDataLabel))));
-        return (hAsync("tbody", null, this.paginatedRows.map((row, rowIdx) => (hAsync("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6" }, this.selectable && (hAsync("td", { class: {
+        return (hAsync("tbody", { ...(!this.paginatedRows.length && { part: 'tbody-empty' }) }, this.isLoading && (hAsync("div", { class: "sd-table__loading" }, hAsync("sd-loading-spinner", null))), !this.paginatedRows.length ? (hAsync("tr", null, hAsync("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, hAsync("slot", { name: "no-data" }, this.noDataLabel)))) : (hAsync(hAsync.Fragment, null, this.paginatedRows.map((row, rowIdx) => (hAsync("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6" }, this.selectable && (hAsync("td", { class: {
                 'sd-td': true,
                 'sd-td--selected': true,
                 'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
@@ -6677,13 +6698,13 @@ class SdTable {
                         colIdx === this.visibleColumns.length - this.stickyColumn.right),
                     [`${column.tdClass}`]: Boolean(column.tdClass),
                 }, style: this.getStickyStyle(colIdx) }, hAsync("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (hAsync("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
-        }))))));
+        }))))))));
     }
     render() {
-        return (hAsync(Host, { key: 'b73fefde2c99c864002a2e778b02a306d4c8c32d' }, hAsync("div", { key: '4fbf588871e3b8cb92e087cbde59aa9280ba75cd', class: "sd-table__wrapper", style: {
+        return (hAsync(Host, { key: '941eac6f220c2eb336748b19d7d62421954d7b2d' }, hAsync("div", { key: '9e1753e83333aca00ff3e1b85746a1a9f14ceed3', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, hAsync("div", { key: '92d69eaf8e499fd5b3a0ebb3d77353c8285949e5', class: "sd-table__container" }, hAsync("div", { key: '590fd93058983bab3bc829e7c6ce4e058365287f', class: "sd-table__middle" }, hAsync("table", { key: 'c1fd46586bd9429377dfff9df94550cb5437b05a', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), hAsync("div", { key: '89a48072c9f6b84d062e4e127b5858657003fc87', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (hAsync("div", { key: '526c024bc5493b8a3abb4f7887ec221e38dd2937', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: 'f607579ff98e70f2c6975139a17c7fc48b940a19', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
+            } }, hAsync("div", { key: '1a1077fc7cf1056ec1756e87cb47485e96b66d60', class: "sd-table__container" }, hAsync("div", { key: '13dce57546577aef35abe3e6e2f9fe8155ee0d9c', class: "sd-table__middle" }, hAsync("table", { key: '7fbc368f33cfd222732ca45f07ab3876f4739fce', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), hAsync("div", { key: 'a96bdcb80985577f8f24d79ba0356be7926f84fc', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (hAsync("div", { key: '111c1d44684dc1f795250f2be51a31959e9c62e2', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '349f9cac77c2212e3d533c8fe62e1ab2ebbe461c', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
                 if (!this.useInternalPagination) {
                     this.sdPageChange.emit(e.detail);
                 }
@@ -6691,20 +6712,26 @@ class SdTable {
                     this.currentPage = e.detail;
                     this.sdPageChange.emit(this.currentPage);
                 }
-            } }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '683424acaf3961dcf681e8a04275cdba6bdf9928', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
-                const newRowsPerPage = Number(e.detail.value || 0);
-                let newLastPage = Math.max(1, Math.ceil(this.innerRows.length / newRowsPerPage));
-                let newCurrentPage = this.currentPage;
-                if (newCurrentPage > newLastPage) {
-                    newCurrentPage = newLastPage;
+            } }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '1a9b338efdeaa212c5f3751dae638631b60f89d8', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
+                const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;
+                if (!this.useInternalPagination) {
+                    this.sdRowsPerPageChange.emit(changedRowsPerPage);
+                }
+                else {
+                    const newRowsPerPage = Number(e.detail.value || 0);
+                    let newLastPage = Math.max(1, Math.ceil(this.innerRows.length / newRowsPerPage));
+                    let newCurrentPage = this.currentPage;
+                    if (newCurrentPage > newLastPage) {
+                        newCurrentPage = newLastPage;
+                    }
+                    this.pagination = {
+                        page: newCurrentPage,
+                        rowsPerPage: newRowsPerPage,
+                        lastPage: newLastPage,
+                    };
+                    this.currentPage = newCurrentPage;
+                    this.sdRowsPerPageChange.emit(changedRowsPerPage);
                 }
-                this.pagination = {
-                    page: newCurrentPage,
-                    rowsPerPage: newRowsPerPage,
-                    lastPage: newLastPage,
-                };
-                this.currentPage = newCurrentPage;
-                this.sdPageChange.emit(this.currentPage);
             } })))))));
     }
     static get watchers() { return {
@@ -6729,6 +6756,7 @@ class SdTable {
             "stickyHeader": [4, "sticky-header"],
             "stickyColumn": [16],
             "noDataLabel": [1, "no-data-label"],
+            "isLoading": [4, "is-loading"],
             "pagination": [16],
             "bodyCellRenderer": [16],
             "useInternalPagination": [4, "use-internal-pagination"],
@@ -6861,20 +6889,20 @@ class SdTooltip {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (hAsync(Fragment, { key: 'da480a55495b1311368ae55ef8827a54ea5de766' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (hAsync("sd-tooltip-portal", { key: '74be36575fbf97c9b51577fa5b24a4fbcfcf4c6b', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, hAsync("div", { key: '63707a51fcc66a3a0c91fc7d409d30f61c0b1f17', class: {
+        return (hAsync(Fragment, { key: '7cd7f8d9ef55457296d873107fdaac4e97256fdc' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (hAsync("sd-tooltip-portal", { key: 'a0e066f0785fea9b0b1a597abf8ced1d835873ec', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, hAsync("div", { key: '19bb31fd00cdeb8f8c19f80a6b3a4fee71455a47', class: {
                 'sd-tooltip-menu': true,
                 [`sd-tooltip-menu--${this.type}`]: true,
                 [`sd-tooltip-menu--${this.placement}`]: true,
                 'sd-tooltip-menu--with-close': this.useClose,
                 [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
-            } }, hAsync("i", { key: 'a2c557e1457c293ef4a6fb3e23a70c9ff5b0b027', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '7e7e471bb288680875fbbaa1d7b7df34b636c76f', class: {
+            } }, hAsync("i", { key: '276fd33d6abb331aa55f94591f847674a3c7a4ea', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: 'dfe808944a15600e16b52dff6e4b9381cdefaf53', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), hAsync("div", { key: 'c7f7a093907053c100fdb5f247d09d984f8cddd8', class: "sd-tooltip-menu__content", ref: el => {
+            } })), hAsync("div", { key: '1f22593facecb915ef6a7a6c4cd4abba09ffce8c', class: "sd-tooltip-menu__content", ref: el => {
                 if (el && this.slotContent && !el.hasChildNodes()) {
                     el.appendChild(this.slotContent.cloneNode(true));
                 }
-            } }, !this.slotContent && hAsync("span", { key: '14925b4653ca984bd6adf99f6297713dc8b2bafa' }, this.el.textContent)), this.useClose && (hAsync("div", { key: '1a02cee06eaaf9068396fb0b489c93e23ba5c8b7', class: "sd-tooltip-menu__close-button" }, hAsync("button", { key: '40973df40b2ec2ab887a47c7f3e466f6cae4e69f', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: 'a02e35f80ae7d3c1414577ce253a67d6dfd64bc0', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && hAsync("span", { key: '7a2c28f8a6f45327420a7fd95bfbcdc2c968524d' }, this.el.textContent)), this.useClose && (hAsync("div", { key: '61bfeb5e1aba5931ecdadd35532237124514dee3', class: "sd-tooltip-menu__close-button" }, hAsync("button", { key: '16266831474067749dff6f6acfdec1a4e881e171', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: 'fedf37e33d95da2683a37289966626f9ed3c0853', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
     static get style() { return sdTooltipCss; }
     static get cmpMeta() { return {
@@ -7049,7 +7077,7 @@ class SdTooltipPortal {
         this.sdClose.emit();
     }
     render() {
-        return hAsync("slot", { key: '641dacdeceb023695ced987731591783daa6b88e' });
+        return hAsync("slot", { key: '231704dc9edcd17203b0ecd491558f585c57f9bd' });
     }
     static get cmpMeta() { return {
         "$flags$": 777,
@@ -7079,6 +7107,7 @@ registerComponents([
   SdGuide,
   SdIcon,
   SdInput,
+  SdLoadingSpinner,
   SdPagination,
   SdPopover,
   SdPortal,

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system",
- "version": "0.0.26",
+ "version": "0.0.27",
  "description": "Sellmate Design System - Web Components Library built with Stencil",
  "keywords": [
   "web-components",
@@ -90,5 +90,5 @@
   "@stencil/react-output-target": "^1.2.0",
   "@stencil/vue-output-target": "^0.11.8"
  },
- "gitHead": "3b74ea0c149475298159d3a4c0924f7f7343b019"
+ "gitHead": "6ccff814d40142bb6af56b39e9a810373cf1bb6e"
 }