@sellmate/design-system 0.0.50 → 0.0.52

package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdLoadingSpinner {
     render() {
-        return (h(Host, { key: 'd064701b25e190fc5b7feefb542cbc7d30afc3f3' }, h("svg", { key: 'ec37a9ebea3e5b48817c687fae543186bb3cf29a', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, h("circle", { key: '0b61caa65955019ddb08ed52a51718cf3f55a6e3', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (h(Host, { key: '7538c9986c448d666ea1993324d8fd811c2ba289' }, h("svg", { key: '7e254a0b15ecda3e480582c336b33b1020715125', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, h("circle", { key: '8a6356ba2e8d42c9d1c789ba5676ca6f7485cda1', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
     static get is() { return "sd-loading-spinner"; }
     static get originalStyleUrls() {

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

@@ -67,12 +67,12 @@ export class SdPagination {
         }
     }
     render() {
-        return (h("div", { key: 'c8c241301297c8281d02643f5a31c97f77706fff', class: this.paginationClasses }, h("div", { key: '12ca5b852a648b168928934729d2215f6648bcc1', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: 'e3abf3098a37fe058088304eefcfa9b6abbdbcaa', class: this.paginationClasses }, h("div", { key: '19db1f5ed8fd2ab9b4f6793b474bf4dd3f48f21c', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '0ff537ba6e5985be1e055f5b9eab5dd86dd11624', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '63096633349b138d679b2a735d0e8d246dfde312', class: "append-btns" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

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

@@ -30,11 +30,11 @@ export class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: '596dfc584e73c7d7093e15a91046e14b7801138a' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-tooltip-portal", { key: '9bf784d6946cd5fd8b6ecfd3a6e9d976f44a2a90', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '409afdeee8e96ce019594cd2aaa16034e4339a35', class: {
+        return (h(Fragment, { key: '8c7efcbf49754c518a6a9cf492b300c07ef980f5' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-tooltip-portal", { key: 'c61e5138ebba94a31d621ff1b3439d3c37ceb629', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'c88706aa4e7aec4a105459e429a8cfa9313c7aa8', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: '2ff3545fb7b13c11d4f128616a68f0a230087447', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '3da84311b01c95d92b91327ce66e49e1d0243b37' })), h("div", { key: 'aa861155d8c9194dffafd8b834e58108995f33ed', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '534c0871ff6b909c87eba179be23c7e2fa4ce0e9', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'a601e50189ca95fa007e68edf64c1a0aa1e990d0', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '63ee5c3dcdf167e0b35b5ed96a516b91ff007355', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '6f8f0a6dfd113603105652686b5426e3a0313d4e', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '9f1aedb7e6e9e519fa890856ea9c185e393f5f43', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, h("i", { key: 'f79cb7d4784bc70d89ed5a3d5fa63af3ffb94921', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'e5e6148d67858f972b00ec55e174685cd87c6608' })), h("div", { key: '17d4f8a35d85bf48a6155bf0581f37530c5ea492', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '26d5195b0cde90c8b9251622180021eb33027f6b', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'd1eca72d7d97d16a6caa6a9094c93555ea0cbd53', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '2c8258470a30a604398f680b5d02527303d3b6c7', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '480f0a2b1e9aa0f6d31257f1a13fe441c3685e2b', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '73d77f0e344a86c4a81c0aab4289b6fb5d3603c2', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get is() { return "sd-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -113,7 +113,7 @@ export class SdPortal {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: '2f6a1908864a2b5bbe86127fbf41b6b44a599666' });
+        return h("slot", { key: 'a2227a90c04b58d7f8c468ebc84f0627055d4da8' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

package/dist/collection/components/sd-progress/sd-progress.js

@@ -13,10 +13,10 @@ export class SdProgress {
         error: '#FB4444',
     };
     render() {
-        return (h(Host, { key: 'fa4a0bdd1e76231bc3ff349c5e94a18f1d747bf4', style: {
+        return (h(Host, { key: 'd491ac2f5e734f653a991afa1c9e25ceb9947335', style: {
                 '--progress-color': this.statusColor[this.status],
                 '--progress-percentage': `${this.percentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '2c356835e29ec88765f0be0efbe9ee416f1e27ea', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '0741e3f5492c4f870cc9657e27d3d1a1d73bee10', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, h("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));

package/dist/collection/components/sd-radio-group/sd-radio-group.js

@@ -46,7 +46,7 @@ export class SdRadioGroup {
     }
     render() {
         const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;
-        return (h("div", { key: 'd8f9d161395e7125bb65411ee6831e7e290900ba', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map((option, index) => {
+        return (h("div", { key: 'f817ced0e784c418c09c6c3e1cd6d9e045d32598', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map((option, index) => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (h("label", { key: `radio-${index}`, class: this.getRadioClasses(option), role: "radio", "aria-checked": isSelected.toString(), "aria-disabled": isDisabled.toString(), "aria-label": option.label || 'radio option' }, h("input", { type: "radio", name: groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-group__label" }, option.label)));

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

@@ -200,11 +200,11 @@ export class SdSelect extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: '94880c07678eb6a478c9c80de0c42c5c7724936e', style: style }, h("div", { key: '872f918214118adb99b50533c323e9de7ca27353', class: {
+        return (h(Host, { key: 'a99d2903e6156a30aa834dea2344829edbde67cb', style: style }, h("div", { key: '39862875a121d9add2c0101d81e223d475d14abb', class: {
                 'sd-select': true,
                 'sd-select--open': this.isOpen,
                 'sd-select--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '30e44d67c6d8b81c59c798ffa4de43337de6f195', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '6a7e4ffc442e4edfe508e60c8b578f8c8fb5e409', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)

package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js

@@ -338,11 +338,11 @@ export class SdSelectMultipleGroup extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: 'bcafcfbb33940882bd7e22a6d197974194554968', style: style }, h("div", { key: 'a8547e4aa07d8ccdfbb7955f122eaa3955c5d30e', class: {
+        return (h(Host, { key: '2fb8b95f341cea6870702474d549b10b46a33551', style: style }, h("div", { key: 'f0ffc9960ae27bc1e76e3cd59592de205ae0071d', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,
-            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), h("div", { key: '90ba61f1d83692e2eaf430f42a1a0fd55380d774', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), h("div", { key: '1496b603a09001a571388baade46e4d14f19e51d', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label, labelStyle) {
         if (!label)

package/dist/collection/components/sd-table/sd-table.js

@@ -185,10 +185,10 @@ export class SdTable {
             }, style: this.getStickyStyle(colIdx) }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(colIdx, evt) }))))))));
     }
     render() {
-        return (h(Host, { key: '9b6b47737ddd9b97c477fb029260bbdb5088593a' }, h("div", { key: '4235585df56fb9c83606e58d2b3ad6efc7b50259', class: "sd-table__wrapper", style: {
+        return (h(Host, { key: 'a1b686469dfc58d9c57cdc975aac423cf9404012' }, h("div", { key: '8707550d614eac9649b0bb7f9842e21ebe032c45', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: 'ea92597b3cba31951da90d3d42a7783ef043248a', class: "sd-table__container" }, h("div", { key: '95b5ef2432643b3c1386f52344e91d17dd6ba726', class: "sd-table__middle", role: "table" }, h("div", { key: '1e834ed7ce963ff0e3bc0c22c7b5d8dcd02d754d', part: "table", class: this.sdTableClasses }, this.renderHeader(), h("sd-tbody", { key: 'f7cf5c3d5e430f4259b2dae2660c38b0b0f6d17e' }, h("slot", { key: 'b21b99f21baaf9431ce653e680a59531cc275c26' })))), h("div", { key: '3fb77951c1e27c6feb13411aa56b4ac907135e24', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (h("div", { key: 'e74003c49fa592869346f28dfd10ef6acd6a64e9', class: "sd-table__pagination" }, h("sd-pagination", { key: '0284aa186f53cac17cecc45770afce1cb1675c36', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
+            } }, h("div", { key: 'df9ac71cdf2decd79714a66177ec65524ce35d5a', class: "sd-table__container" }, h("div", { key: 'c4225356f08b883c82038426d923446f85edeb2b', class: "sd-table__middle", role: "table" }, h("div", { key: '3a75336a77e732a5de56d057429f072a2c946042', part: "table", class: this.sdTableClasses }, this.renderHeader(), h("sd-tbody", { key: 'c1aa8c874dfb96e411fb0b66134c5ab098629d87' }, h("slot", { key: 'f2e40bf5c0fea78af06e3cc8be3568d21e9c4f8d' })))), h("div", { key: 'a5e9382c17261d4f11e4ab9be2b26e6154677a03', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (h("div", { key: 'f96b29f77f639184d674b3ea3ae7e28e620db1fb', class: "sd-table__pagination" }, h("sd-pagination", { key: 'e21505112e7b31904c1fde0985443f2e43544a2e', 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);
                 }
@@ -196,7 +196,7 @@ export class SdTable {
                     this.currentPage = e.detail;
                     this.sdPageChange.emit(this.currentPage);
                 }
-            } }), this.useRowsPerPageSelect && (h("sd-select", { key: '23a648a6581bee5cf755afbb9146bf2090e6be65', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
+            } }), this.useRowsPerPageSelect && (h("sd-select", { key: '32890039f67ebda027e336a31ab790141ec2c7c2', 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);

package/dist/collection/components/sd-table-backup/sd-table-backup.js

@@ -634,16 +634,16 @@ export class SdTable {
             }, "aria-hidden": "true" }, h("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (h(Host, { key: '85b4655b2ee298d535add2e43c2ef73b8c816716' }, h("div", { key: '9fc71a34045a725db9fa19fec9954d1edb90f1e4', class: "sd-table__wrapper", style: {
+        return (h(Host, { key: '1c762116fd35be7070aea38b052f8f619176cd32' }, h("div", { key: '4201639381ebbe400ab124e1ab0e2badd3ffba9e', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: 'dcb78c1bac32c68bc5ac81beece5ee8ca74025ba', class: "sd-table__container", style: {
+            } }, h("div", { key: 'c17c7b76ab6f33faf605ad2c4f023f5f0411c847', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, h("div", { key: 'e0bb087930f0cf07c06c6f5684a5b26fa5e25a02', class: {
+            } }, h("div", { key: 'd7b1e53fbbe6c8c282b6455a113aa1fb7abf0f13', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (h("div", { key: '4f36b5fc670aa98774e565b000cc1623a6cae0af', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '2e794ac56824bfad1f9f42482b75498e7f2ca70c' }))), h("table", { key: 'a4017ae90c8f932c22b26d7f81c9fc13785e52d0', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), h("div", { key: 'c7b008d66c47442d25a977d76b7b6dd266d7f008', class: "sd-table__bottom" }, !this.paginatedRows.length && (h("div", { key: '20235f4747c2396710b44d46ea1da659156bb9ca', class: "sd-table__no-data" }, h("slot", { key: '432a8669c4942eb92c4bce7f0b08cb9cb1f9f6e3', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: 'f9f6dc05c1004b03e10ece4c091d67ca564b1633', class: "sd-table__pagination" }, h("sd-pagination", { key: 'd7efd361091fe9725e8c79289501506a779e1111', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: '401d35d85c2fc78094c267f27d74055108179f9e', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (h("div", { key: '3c8d66915131a8388d19c2d6101716d709f29c4a', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '5bd2eb67b7f16929dc4829d3ed069ee7b976f4bf' }))), h("table", { key: 'be2d1b31673397a7aebeff85827d40343970aac0', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), h("div", { key: 'f6436dc02163f34d3f9efcd6bc312561e88f3d08', class: "sd-table__bottom" }, !this.paginatedRows.length && (h("div", { key: 'b0f27e8d1b7343619c356bc0d9c074e4dbe91ff0', class: "sd-table__no-data" }, h("slot", { key: '0ea8e9e5624ce063c88b71de32ab7c4607344af9', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '271d506c6f9e98a6f4e69364be977e299fa4f794', class: "sd-table__pagination" }, h("sd-pagination", { key: '1bff466793f04d5c76b9682fa546a66f9546cf0a', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: '51731aabcbfd68cf606423e008fcc89995419803', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get is() { return "sd-table-backup"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-tag/sd-tag.css

@@ -8,6 +8,7 @@
 
 .sd-tag {
   display: inline-flex;
+  width: 100%;
   align-items: center;
   justify-content: center;
   gap: 8px;
@@ -22,6 +23,13 @@
   user-select: none;
   box-sizing: border-box;
 }
+.sd-tag__content {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .sd-tag--custom-color {
   background: var(--tag-bg-color);
   color: var(--tag-text-color);

package/dist/collection/components/sd-tag/sd-tag.js

@@ -37,7 +37,7 @@ export class SdTag {
     }
     render() {
         const tagClasses = this.getTagClasses();
-        return (h("span", { key: '982a1d00b05ea1978c001d0898b8d95a57f92ff5', class: tagClasses, style: {
+        return (h("span", { key: '3ab30b01fbf0c25426e7903ed05372399c380a01', class: tagClasses, style: {
                 '--tag-bg-color': this.bgColor,
                 '--tag-text-color': this.textColor,
             }, "aria-label": this.label || 'tag' }, this.renderContent()));

package/dist/collection/components/sd-toggle/sd-toggle.css

@@ -0,0 +1,59 @@
+sd-toggle {
+  display: inline-block;
+  height: 20px;
+  line-height: 0;
+}
+sd-toggle .sd-toggle {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 20px;
+}
+sd-toggle .sd-toggle > input {
+  display: none;
+}
+sd-toggle .sd-toggle__label {
+  font-size: 12px;
+  color: #333333;
+  line-height: 20px;
+}
+sd-toggle .sd-toggle__track {
+  width: 36px;
+  height: 20px;
+  border-radius: 12px;
+  background: #cccccc;
+  position: relative;
+  transition: background-color 0.2s ease;
+}
+sd-toggle .sd-toggle__thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: white;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  transition: transform 0.2s ease;
+}
+sd-toggle .sd-toggle--checked .sd-toggle__track {
+  background: #0075ff;
+}
+sd-toggle .sd-toggle--checked .sd-toggle__thumb {
+  transform: translateX(16px);
+}
+sd-toggle .sd-toggle--disabled {
+  cursor: not-allowed;
+}
+sd-toggle .sd-toggle--disabled.sd-toggle--checked .sd-toggle__track {
+  background: #bbdaff;
+}
+sd-toggle .sd-toggle--disabled.sd-toggle--unchecked .sd-toggle__track {
+  background: #eeeeee;
+}
+sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--checked .sd-toggle__track {
+  background: #005cc9;
+}
+sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--unchecked .sd-toggle__track {
+  background: #bbbbbb;
+}

package/dist/collection/components/sd-toggle/sd-toggle.js

@@ -0,0 +1,133 @@
+import { h } from "@stencil/core";
+export class SdToggle {
+    value = false;
+    label = '';
+    disabled = false;
+    isChecked = false;
+    sdChange;
+    componentWillLoad() {
+        this.updateCheckedState(this.value);
+    }
+    componentWillRender() {
+        this.updateCheckedState(this.value);
+    }
+    updateCheckedState(value) {
+        this.isChecked = value;
+    }
+    get toggleClasses() {
+        const classes = ['sd-toggle', this.isChecked ? 'sd-toggle--checked' : 'sd-toggle--unchecked'];
+        if (this.disabled) {
+            classes.push('sd-toggle--disabled');
+        }
+        return classes.join(' ');
+    }
+    handleChange = () => {
+        if (this.disabled)
+            return;
+        const newValue = !this.value;
+        this.value = newValue;
+        this.sdChange.emit(newValue);
+    };
+    render() {
+        return (h("label", { key: '8b196fae6d8931cdd39c7eea51a7f1f843f4cb75', "aria-checked": this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "switch", "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: '4a60ce883411cb2a598d003ff264fe6659d0df02', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: 'c0fb2edfb1a2854c31fb6eb0a4e4169e2e409db2', class: "sd-toggle__label" }, this.label), h("div", { key: 'c9f78f892be478cbd1232722487471eae53bee8a', class: "sd-toggle__track" }, h("div", { key: 'b6388556a0d6f4b9f74e6e2684ded4cde93d6384', class: "sd-toggle__thumb" }))));
+    }
+    static get is() { return "sd-toggle"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-toggle.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-toggle.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isChecked": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sdChange",
+                "name": "sdChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=sd-toggle.js.map

package/dist/collection/components/sd-toggle/sd-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-toggle.js","sourceRoot":"","sources":["../../../src/components/sd-toggle/sd-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAM/E,MAAM,OAAO,QAAQ;IACoB,KAAK,GAAY,KAAK,CAAC;IAEvD,KAAK,GAAW,EAAE,CAAC;IAEnB,QAAQ,GAAY,KAAK,CAAC;IAEjB,SAAS,GAAY,KAAK,CAAC;IAEnC,QAAQ,CAAyB;IAE1C,iBAAiB;QAChB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,mBAAmB;QAClB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAEO,kBAAkB,CAAC,KAAc;QACxC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACxB,CAAC;IAED,IAAY,aAAa;QACxB,MAAM,OAAO,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC;QAE9F,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;QACrC,CAAC;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAEO,YAAY,GAAG,GAAG,EAAE;QAC3B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM;QACL,OAAO,CACN,8EACe,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,mBACxB,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,EACvC,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,KAAK,IAAI,QAAQ,EAClC,KAAK,EAAE,IAAI,CAAC,aAAa;YAEzB,8DACC,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,GACzB;YACD,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAQ;YACjE,4DAAK,KAAK,EAAC,kBAAkB;gBAC5B,4DAAK,KAAK,EAAC,kBAAkB,GAAO,CAC/B,CACC,CACR,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-toggle',\r\n styleUrl: 'sd-toggle.scss',\r\n})\r\nexport class SdToggle {\r\n @Prop({ mutable: true, reflect: true }) value: boolean = false;\r\n\r\n @Prop() label: string = '';\r\n\r\n @Prop() disabled: boolean = false;\r\n\r\n @State() private isChecked: boolean = false;\r\n\r\n @Event() sdChange!: EventEmitter<boolean>;\r\n\r\n componentWillLoad() {\r\n  this.updateCheckedState(this.value);\r\n }\r\n\r\n componentWillRender() {\r\n  this.updateCheckedState(this.value);\r\n }\r\n\r\n private updateCheckedState(value: boolean) {\r\n  this.isChecked = value;\r\n }\r\n\r\n private get toggleClasses(): string {\r\n  const classes = ['sd-toggle', this.isChecked ? 'sd-toggle--checked' : 'sd-toggle--unchecked'];\r\n\r\n  if (this.disabled) {\r\n   classes.push('sd-toggle--disabled');\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n private handleChange = () => {\r\n  if (this.disabled) return;\r\n\r\n  const newValue = !this.value;\r\n  this.value = newValue;\r\n  this.sdChange.emit(newValue);\r\n };\r\n\r\n render() {\r\n  return (\r\n   <label\r\n    aria-checked={this.isChecked.toString()}\r\n    aria-disabled={this.disabled.toString()}\r\n    role=\"switch\"\r\n    aria-label={this.label || 'toggle'}\r\n    class={this.toggleClasses}\r\n   >\r\n    <input\r\n     type=\"checkbox\"\r\n     checked={this.isChecked}\r\n     disabled={this.disabled}\r\n     onInput={this.handleChange}\r\n    />\r\n    {this.label && <span class=\"sd-toggle__label\">{this.label}</span>}\r\n    <div class=\"sd-toggle__track\">\r\n     <div class=\"sd-toggle__thumb\"></div>\r\n    </div>\r\n   </label>\r\n  );\r\n }\r\n}\r\n"]}

package/dist/collection/components/sd-tooltip/sd-tooltip.js

@@ -43,20 +43,20 @@ export class SdTooltip {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (h(Fragment, { key: 'ca1fc3ffdb493ee2aeb0ef9ef874a164d50a1d34' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '840728261961211b5d12e6bf6c97aa044f97f133', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '80933fad7b61af35ba41f171848c431ee4b0ff0e', class: {
+        return (h(Fragment, { key: '44ccb9c1a2e9113160ccb516e62fbd175e139f50' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '83f82f27164df34a1a8e0d1d8975b4f89a82691a', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '544085a133cdbbe707ec0c2be35a9a42cd2372bc', 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,
-            } }, h("i", { key: 'c166fc91a2f49840dfea98c4ca1010892e571b48', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '58a04b43a4f3333aa9e34d2c1dda7f03e9493e21', class: {
+            } }, h("i", { key: '4b335754d346d6ae244e83ccdcae25edf05a306a', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '567fc901e95b918fb0883f9c241836a10e1e58e9', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), h("div", { key: 'd49d44d196c266482974beef4da124f32ec39825', class: "sd-tooltip-menu__content", ref: el => {
+            } })), h("div", { key: '1475d6f5d76f4e3860e2524cb571eb2704460203', class: "sd-tooltip-menu__content", ref: el => {
                 if (el && this.slotContent && !el.hasChildNodes()) {
                     el.appendChild(this.slotContent.cloneNode(true));
                 }
-            } }, !this.slotContent && h("span", { key: '5543dd3bc313e033379da9b3e0c4b4f929ec899c' }, this.el.textContent)), this.useClose && (h("div", { key: 'e32069afe16667a1bbfcc2e57ef6f2888fd9a5d6', class: "sd-tooltip-menu__close-button" }, h("button", { key: '913909f8479496c9344df5d64ba3eb9e5a073658', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: 'ebde71b66b5b805d8ca99911ecfe9e6319a1f9be', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && h("span", { key: 'f821b0aa74de05c7728b06a2bd78367e43703684' }, this.el.textContent)), this.useClose && (h("div", { key: '2068c369ef957cb25b9ec74e22e2c78f9ffa6232', class: "sd-tooltip-menu__close-button" }, h("button", { key: 'f61156a86ce1b3fd4f2fb97e507711f9602ac157', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: '3ba6f3f4dc5379eb2d13aecb9ec1d5d6fdf20dec', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
     static get is() { return "sd-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js

@@ -144,7 +144,7 @@ export class SdTooltipPortal {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: 'b8652906919bc46c2f36710de6e65b33276bf31a' });
+        return h("slot", { key: '912ff6aba4bae810c40c95325ffb1109ddcfddbb' });
     }
     static get is() { return "sd-tooltip-portal"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/{p-BozMKCTh.js → p-1SxxSEqq.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment } from './p-TFWJruz2.js';
-import { d as defineCustomElement$1 } from './p-D2aGA3BX.js';
+import { d as defineCustomElement$1 } from './p-BsyfatBe.js';
 
 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}";
 
@@ -78,12 +78,12 @@ const SdPagination = /*@__PURE__*/ proxyCustomElement(class SdPagination extends
         }
     }
     render() {
-        return (h("div", { key: 'c8c241301297c8281d02643f5a31c97f77706fff', class: this.paginationClasses }, h("div", { key: '12ca5b852a648b168928934729d2215f6648bcc1', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: 'e3abf3098a37fe058088304eefcfa9b6abbdbcaa', class: this.paginationClasses }, h("div", { key: '19db1f5ed8fd2ab9b4f6793b474bf4dd3f48f21c', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '0ff537ba6e5985be1e055f5b9eab5dd86dd11624', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '63096633349b138d679b2a735d0e8d246dfde312', class: "append-btns" }, this.renderNextButtons())));
     }
     static get style() { return sdPaginationCss; }
 }, [768, "sd-pagination", {
@@ -111,6 +111,6 @@ function defineCustomElement() {
 }
 
 export { SdPagination as S, defineCustomElement as d };
-//# sourceMappingURL=p-BozMKCTh.js.map
+//# sourceMappingURL=p-1SxxSEqq.js.map
 
-//# sourceMappingURL=p-BozMKCTh.js.map
+//# sourceMappingURL=p-1SxxSEqq.js.map

package/dist/components/{p-BozMKCTh.js.map → p-1SxxSEqq.js.map}

@@ -1 +1 @@
-{"file":"p-BozMKCTh.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-pagination/sd-pagination.scss?tag=sd-pagination","src/components/sd-pagination/sd-pagination.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n.sd-pagination {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n color: $grey_80;\r\n width: 100%;\r\n font-size: 12px;\r\n\r\n .prepend-btns {\r\n  display: flex;\r\n  flex-flow: row nowrap;\r\n  align-items: center;\r\n  gap: 8px;\r\n  width: 60px;\r\n\r\n  button {\r\n   width: 26px;\r\n   height: 26px;\r\n   border: 0;\r\n   background: none;\r\n\r\n   &:hover {\r\n    border: 1px solid $oceanblue_70;\r\n    border-radius: 14px;\r\n   }\r\n  }\r\n }\r\n\r\n .append-btns {\r\n  display: flex;\r\n  flex-flow: row nowrap;\r\n  align-items: center;\r\n  gap: 8px;\r\n  width: 60px;\r\n\r\n  button {\r\n   width: 26px;\r\n   height: 26px;\r\n   border: 0;\r\n   background: none;\r\n\r\n   &:hover {\r\n    border: 1px solid $oceanblue_70;\r\n    border-radius: 14px;\r\n   }\r\n  }\r\n }\r\n\r\n .pagination-btn {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 14px;\r\n  outline: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  height: 26px;\r\n  color: $grey_80;\r\n  width: var(--pagination-btn-width, 26px);\r\n\r\n  &--selected {\r\n   background-color: $oceanblue_70;\r\n   color: white;\r\n  }\r\n\r\n  &:hover {\r\n   border: 1px solid $oceanblue_70;\r\n  }\r\n }\r\n\r\n &--simple {\r\n  .pagination-info {\r\n   line-height: 26px;\r\n   display: flex;\r\n   flex-flow: row nowrap;\r\n   align-items: center;\r\n   gap: 8px;\r\n   .current-page,\r\n   .last-page {\r\n    padding: 0 2px;\r\n   }\r\n  }\r\n }\r\n}\r\n","import { Component, Prop, Event, EventEmitter, h, Fragment } from '@stencil/core';\r\n\r\nconst BUTTON_WIDTH: Record<number, number> = {\r\n 1: 26,\r\n 2: 36,\r\n 3: 42,\r\n 4: 50,\r\n 5: 58,\r\n};\r\n\r\nconst PER_PAGE = 10;\r\n\r\n@Component({\r\n tag: 'sd-pagination',\r\n styleUrl: 'sd-pagination.scss',\r\n})\r\nexport class SdPagination {\r\n @Prop() currentPage: number = 1;\r\n @Prop() lastPage: number = 1;\r\n @Prop() simple: boolean = false;\r\n\r\n @Event() pageChange!: EventEmitter<number>;\r\n\r\n private get paginationClasses() {\r\n  const classes = ['sd-pagination'];\r\n\r\n  if (this.simple) {\r\n   classes.push('sd-pagination--simple');\r\n  }\r\n  return classes.join(' ');\r\n }\r\n\r\n private get pageNumbers() {\r\n  const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;\r\n  const end = Math.min(start + PER_PAGE - 1, this.lastPage);\r\n  return Array.from({ length: end - start + 1 }, (_, i) => start + i);\r\n }\r\n\r\n private get buttonWidth() {\r\n  const lastPageNum = this.pageNumbers.at(-1) ?? 1;\r\n  const maxPageLength: number = lastPageNum.toString().length;\r\n  return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];\r\n }\r\n\r\n private handlePageChange(page: number) {\r\n  if (page < 1 || page > this.lastPage) return;\r\n  this.pageChange.emit(page);\r\n }\r\n\r\n private handleGroupChange(direction: 'forward' | 'backward') {\r\n  const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;\r\n  const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);\r\n  this.handlePageChange(newPage);\r\n }\r\n\r\n private get isFirstGroup() {\r\n  return this.currentPage <= PER_PAGE;\r\n }\r\n\r\n private get isLastGroup() {\r\n  const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;\r\n  return startPageGroup + PER_PAGE - 1 >= this.lastPage;\r\n }\r\n\r\n private renderPrevButtons() {\r\n  if (this.simple) {\r\n   if (this.currentPage <= 1) return null;\r\n\r\n   return (\r\n    <Fragment>\r\n     <button aria-label=\"Go to first page\" onClick={() => this.handlePageChange(1)}>\r\n      <sd-icon name=\"arrowLeftEnd\" size=\"12\" color=\"#222222\" />\r\n     </button>\r\n     <button\r\n      aria-label=\"Go to previous page\"\r\n      onClick={() => this.handlePageChange(this.currentPage - 1)}\r\n     >\r\n      <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#222222\" />\r\n     </button>\r\n    </Fragment>\r\n   );\r\n  }\r\n\r\n  if (!this.isFirstGroup) {\r\n   return (\r\n    <Fragment>\r\n     <button aria-label=\"Go to first page\" onClick={() => this.handlePageChange(1)}>\r\n      <sd-icon name=\"arrowLeftEnd\" size=\"12\" color=\"#222222\" />\r\n     </button>\r\n     <button\r\n      aria-label=\"Go to previous page group\"\r\n      onClick={() => this.handleGroupChange('backward')}\r\n     >\r\n      <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#222222\" />\r\n     </button>\r\n    </Fragment>\r\n   );\r\n  }\r\n }\r\n\r\n private renderNextButtons() {\r\n  if (this.simple) {\r\n   if (this.currentPage >= this.lastPage) return null;\r\n\r\n   return (\r\n    <Fragment>\r\n     <button\r\n      aria-label=\"Go to next page\"\r\n      onClick={() => this.handlePageChange(this.currentPage + 1)}\r\n     >\r\n      <sd-icon name=\"arrowRight\" size=\"12\" color=\"#222222\" />\r\n     </button>\r\n     <button aria-label=\"Go to last page\" onClick={() => this.handlePageChange(this.lastPage)}>\r\n      <sd-icon name=\"arrowRightEnd\" size=\"12\" color=\"#222222\" />\r\n     </button>\r\n    </Fragment>\r\n   );\r\n  }\r\n\r\n  if (!this.isLastGroup) {\r\n   return (\r\n    <Fragment>\r\n     <button aria-label=\"Go to next page group\" onClick={() => this.handleGroupChange('forward')}>\r\n      <sd-icon name=\"arrowRight\" size=\"12\" color=\"#222222\" />\r\n     </button>\r\n     <button aria-label=\"Go to last page\" onClick={() => this.handlePageChange(this.lastPage)}>\r\n      <sd-icon name=\"arrowRightEnd\" size=\"12\" color=\"#222222\" />\r\n     </button>\r\n    </Fragment>\r\n   );\r\n  }\r\n }\r\n\r\n render() {\r\n  return (\r\n   <div class={this.paginationClasses}>\r\n    <div class=\"prepend-btns\">{this.renderPrevButtons()}</div>\r\n\r\n    {this.simple ? (\r\n     <div class=\"pagination-info\">\r\n      <span class=\"current-page\">{this.currentPage}</span>\r\n      <span>/</span>\r\n      <span class=\"last-page\">{this.lastPage}</span>\r\n     </div>\r\n    ) : (\r\n     this.pageNumbers.map(n => (\r\n      <button\r\n       type=\"button\"\r\n       aria-current={this.currentPage === n ? 'page' : undefined}\r\n       class={{\r\n        'pagination-btn': true,\r\n        'pagination-btn--selected': this.currentPage === n,\r\n       }}\r\n       disabled={this.currentPage === n}\r\n       style={{\r\n        '--pagination-btn-width': `${this.buttonWidth}px`,\r\n       }}\r\n       onClick={() => this.handlePageChange(n)}\r\n      >\r\n       {n}\r\n      </button>\r\n     ))\r\n    )}\r\n\r\n    <div class=\"append-btns\">{this.renderNextButtons()}</div>\r\n   </div>\r\n  );\r\n }\r\n}\r\n"],"version":3}
+{"file":"p-1SxxSEqq.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,ovCAAovC;;ACE5wC,MAAM,YAAY,GAA2B;AAC5C,IAAA,CAAC,EAAE,EAAE;AACL,IAAA,CAAC,EAAE,EAAE;AACL,IAAA,CAAC,EAAE,EAAE;AACL,IAAA,CAAC,EAAE,EAAE;AACL,IAAA,CAAC,EAAE,EAAE;CACL;AAED,MAAM,QAAQ,GAAG,EAAE;MAMN,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;IAChB,WAAW,GAAW,CAAC;IACvB,QAAQ,GAAW,CAAC;IACpB,MAAM,GAAY,KAAK;AAEtB,IAAA,UAAU;AAEnB,IAAA,IAAY,iBAAiB,GAAA;AAC5B,QAAA,MAAM,OAAO,GAAG,CAAC,eAAe,CAAC;AAEjC,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AAChB,YAAA,OAAO,CAAC,IAAI,CAAC,uBAAuB,CAAC;;AAEtC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;AAGzB,IAAA,IAAY,WAAW,GAAA;QACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,QAAQ,GAAG,CAAC;AAC1E,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,QAAQ,GAAG,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC;QACzD,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,GAAG,KAAK,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC;;AAGpE,IAAA,IAAY,WAAW,GAAA;AACtB,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAChD,MAAM,aAAa,GAAW,WAAW,CAAC,QAAQ,EAAE,CAAC,MAAM;QAC3D,OAAO,YAAY,CAAC,aAAa,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC;;AAG9C,IAAA,gBAAgB,CAAC,IAAY,EAAA;QACpC,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ;YAAE;AACtC,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;AAGnB,IAAA,iBAAiB,CAAC,SAAiC,EAAA;AAC1D,QAAA,MAAM,KAAK,GAAG,SAAS,KAAK,SAAS,GAAG,QAAQ,GAAG,GAAS;QAC5D,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,KAAK,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC;AAC9E,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC;;AAG/B,IAAA,IAAY,YAAY,GAAA;AACvB,QAAA,OAAO,IAAI,CAAC,WAAW,IAAI,QAAQ;;AAGpC,IAAA,IAAY,WAAW,GAAA;QACtB,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,QAAQ,GAAG,CAAC;QACnF,OAAO,cAAc,GAAG,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ;;IAG9C,iBAAiB,GAAA;AACxB,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AAChB,YAAA,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC;AAAE,gBAAA,OAAO,IAAI;YAEtC,QACC,EAAC,QAAQ,EAAA,IAAA,EACR,CAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EAAmB,kBAAkB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAA,EAC5E,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CACjD,EACT,CAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EACY,qBAAqB,EAChC,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,EAAA,EAE1D,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CAC9C,CACC;;AAIb,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACvB,QACC,EAAC,QAAQ,EAAA,IAAA,EACR,CAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EAAmB,kBAAkB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAA,EAC5E,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CACjD,EACT,CAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EACY,2BAA2B,EACtC,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAA,EAEjD,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CAC9C,CACC;;;IAKN,iBAAiB,GAAA;AACxB,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AAChB,YAAA,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ;AAAE,gBAAA,OAAO,IAAI;YAElD,QACC,EAAC,QAAQ,EAAA,IAAA,EACR,CAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EACY,iBAAiB,EAC5B,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,EAAA,EAE1D,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CAC/C,EACT,CAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EAAmB,iBAAiB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAA,EACvF,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CAClD,CACC;;AAIb,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACtB,QACC,EAAC,QAAQ,EAAA,IAAA,EACR,CAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EAAmB,uBAAuB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,EAAA,EAC1F,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CAC/C,EACT,CAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EAAmB,iBAAiB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAA,EACvF,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CAClD,CACC;;;IAKd,MAAM,GAAA;AACL,QAAA,QACC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,iBAAiB,EAAE,CAAO,EAEzD,IAAI,CAAC,MAAM,IACX,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC3B,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAQ,EACpD,CAAc,CAAA,MAAA,EAAA,IAAA,EAAA,GAAA,CAAA,EACd,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EAAE,IAAI,CAAC,QAAQ,CAAQ,CACzC,KAEN,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,KACrB,cACC,IAAI,EAAC,QAAQ,EACC,cAAA,EAAA,IAAI,CAAC,WAAW,KAAK,CAAC,GAAG,MAAM,GAAG,SAAS,EACzD,KAAK,EAAE;AACN,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,0BAA0B,EAAE,IAAI,CAAC,WAAW,KAAK,CAAC;aAClD,EACD,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,CAAC,EAChC,KAAK,EAAE;AACN,gBAAA,wBAAwB,EAAE,CAAA,EAAG,IAAI,CAAC,WAAW,CAAI,EAAA,CAAA;AACjD,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAEtC,EAAA,CAAC,CACM,CACT,CAAC,CACF,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAE,EAAA,IAAI,CAAC,iBAAiB,EAAE,CAAO,CACpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-pagination/sd-pagination.scss?tag=sd-pagination","src/components/sd-pagination/sd-pagination.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n.sd-pagination {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n color: $grey_80;\r\n width: 100%;\r\n font-size: 12px;\r\n\r\n .prepend-btns {\r\n  display: flex;\r\n  flex-flow: row nowrap;\r\n  align-items: center;\r\n  gap: 8px;\r\n  width: 60px;\r\n\r\n  button {\r\n   width: 26px;\r\n   height: 26px;\r\n   border: 0;\r\n   background: none;\r\n\r\n   &:hover {\r\n    border: 1px solid $oceanblue_70;\r\n    border-radius: 14px;\r\n   }\r\n  }\r\n }\r\n\r\n .append-btns {\r\n  display: flex;\r\n  flex-flow: row nowrap;\r\n  align-items: center;\r\n  gap: 8px;\r\n  width: 60px;\r\n\r\n  button {\r\n   width: 26px;\r\n   height: 26px;\r\n   border: 0;\r\n   background: none;\r\n\r\n   &:hover {\r\n    border: 1px solid $oceanblue_70;\r\n    border-radius: 14px;\r\n   }\r\n  }\r\n }\r\n\r\n .pagination-btn {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 14px;\r\n  outline: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  height: 26px;\r\n  color: $grey_80;\r\n  width: var(--pagination-btn-width, 26px);\r\n\r\n  &--selected {\r\n   background-color: $oceanblue_70;\r\n   color: white;\r\n  }\r\n\r\n  &:hover {\r\n   border: 1px solid $oceanblue_70;\r\n  }\r\n }\r\n\r\n &--simple {\r\n  .pagination-info {\r\n   line-height: 26px;\r\n   display: flex;\r\n   flex-flow: row nowrap;\r\n   align-items: center;\r\n   gap: 8px;\r\n   .current-page,\r\n   .last-page {\r\n    padding: 0 2px;\r\n   }\r\n  }\r\n }\r\n}\r\n","import { Component, Prop, Event, EventEmitter, h, Fragment } from '@stencil/core';\r\n\r\nconst BUTTON_WIDTH: Record<number, number> = {\r\n 1: 26,\r\n 2: 36,\r\n 3: 42,\r\n 4: 50,\r\n 5: 58,\r\n};\r\n\r\nconst PER_PAGE = 10;\r\n\r\n@Component({\r\n tag: 'sd-pagination',\r\n styleUrl: 'sd-pagination.scss',\r\n})\r\nexport class SdPagination {\r\n @Prop() currentPage: number = 1;\r\n @Prop() lastPage: number = 1;\r\n @Prop() simple: boolean = false;\r\n\r\n @Event() pageChange!: EventEmitter<number>;\r\n\r\n private get paginationClasses() {\r\n  const classes = ['sd-pagination'];\r\n\r\n  if (this.simple) {\r\n   classes.push('sd-pagination--simple');\r\n  }\r\n  return classes.join(' ');\r\n }\r\n\r\n private get pageNumbers() {\r\n  const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;\r\n  const end = Math.min(start + PER_PAGE - 1, this.lastPage);\r\n  return Array.from({ length: end - start + 1 }, (_, i) => start + i);\r\n }\r\n\r\n private get buttonWidth() {\r\n  const lastPageNum = this.pageNumbers.at(-1) ?? 1;\r\n  const maxPageLength: number = lastPageNum.toString().length;\r\n  return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];\r\n }\r\n\r\n private handlePageChange(page: number) {\r\n  if (page < 1 || page > this.lastPage) return;\r\n  this.pageChange.emit(page);\r\n }\r\n\r\n private handleGroupChange(direction: 'forward' | 'backward') {\r\n  const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;\r\n  const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);\r\n  this.handlePageChange(newPage);\r\n }\r\n\r\n private get isFirstGroup() {\r\n  return this.currentPage <= PER_PAGE;\r\n }\r\n\r\n private get isLastGroup() {\r\n  const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;\r\n  return startPageGroup + PER_PAGE - 1 >= this.lastPage;\r\n }\r\n\r\n private renderPrevButtons() {\r\n  if (this.simple) {\r\n   if (this.currentPage <= 1) return null;\r\n\r\n   return (\r\n    <Fragment>\r\n     <button aria-label=\"Go to first page\" onClick={() => this.handlePageChange(1)}>\r\n      <sd-icon name=\"arrowLeftEnd\" size=\"12\" color=\"#222222\" />\r\n     </button>\r\n     <button\r\n      aria-label=\"Go to previous page\"\r\n      onClick={() => this.handlePageChange(this.currentPage - 1)}\r\n     >\r\n      <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#222222\" />\r\n     </button>\r\n    </Fragment>\r\n   );\r\n  }\r\n\r\n  if (!this.isFirstGroup) {\r\n   return (\r\n    <Fragment>\r\n     <button aria-label=\"Go to first page\" onClick={() => this.handlePageChange(1)}>\r\n      <sd-icon name=\"arrowLeftEnd\" size=\"12\" color=\"#222222\" />\r\n     </button>\r\n     <button\r\n      aria-label=\"Go to previous page group\"\r\n      onClick={() => this.handleGroupChange('backward')}\r\n     >\r\n      <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#222222\" />\r\n     </button>\r\n    </Fragment>\r\n   );\r\n  }\r\n }\r\n\r\n private renderNextButtons() {\r\n  if (this.simple) {\r\n   if (this.currentPage >= this.lastPage) return null;\r\n\r\n   return (\r\n    <Fragment>\r\n     <button\r\n      aria-label=\"Go to next page\"\r\n      onClick={() => this.handlePageChange(this.currentPage + 1)}\r\n     >\r\n      <sd-icon name=\"arrowRight\" size=\"12\" color=\"#222222\" />\r\n     </button>\r\n     <button aria-label=\"Go to last page\" onClick={() => this.handlePageChange(this.lastPage)}>\r\n      <sd-icon name=\"arrowRightEnd\" size=\"12\" color=\"#222222\" />\r\n     </button>\r\n    </Fragment>\r\n   );\r\n  }\r\n\r\n  if (!this.isLastGroup) {\r\n   return (\r\n    <Fragment>\r\n     <button aria-label=\"Go to next page group\" onClick={() => this.handleGroupChange('forward')}>\r\n      <sd-icon name=\"arrowRight\" size=\"12\" color=\"#222222\" />\r\n     </button>\r\n     <button aria-label=\"Go to last page\" onClick={() => this.handlePageChange(this.lastPage)}>\r\n      <sd-icon name=\"arrowRightEnd\" size=\"12\" color=\"#222222\" />\r\n     </button>\r\n    </Fragment>\r\n   );\r\n  }\r\n }\r\n\r\n render() {\r\n  return (\r\n   <div class={this.paginationClasses}>\r\n    <div class=\"prepend-btns\">{this.renderPrevButtons()}</div>\r\n\r\n    {this.simple ? (\r\n     <div class=\"pagination-info\">\r\n      <span class=\"current-page\">{this.currentPage}</span>\r\n      <span>/</span>\r\n      <span class=\"last-page\">{this.lastPage}</span>\r\n     </div>\r\n    ) : (\r\n     this.pageNumbers.map(n => (\r\n      <button\r\n       type=\"button\"\r\n       aria-current={this.currentPage === n ? 'page' : undefined}\r\n       class={{\r\n        'pagination-btn': true,\r\n        'pagination-btn--selected': this.currentPage === n,\r\n       }}\r\n       disabled={this.currentPage === n}\r\n       style={{\r\n        '--pagination-btn-width': `${this.buttonWidth}px`,\r\n       }}\r\n       onClick={() => this.handlePageChange(n)}\r\n      >\r\n       {n}\r\n      </button>\r\n     ))\r\n    )}\r\n\r\n    <div class=\"append-btns\">{this.renderNextButtons()}</div>\r\n   </div>\r\n  );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/{p-_spt_8fG.js → p-9kN1E6Ra.js}

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, d as createEvent, h, c as Host } from './p-TFWJruz2.js';
 import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-BpNH68jy.js';
-import { d as defineCustomElement$5 } from './p-D2YMmHfl.js';
-import { d as defineCustomElement$4 } from './p-D2aGA3BX.js';
-import { d as defineCustomElement$3 } from './p-RZm_wGW3.js';
-import { d as defineCustomElement$2 } from './p-LziGti_p.js';
-import { d as defineCustomElement$1 } from './p-BIw-hGVo.js';
+import { d as defineCustomElement$5 } from './p-CkKxyn_K.js';
+import { d as defineCustomElement$4 } from './p-BsyfatBe.js';
+import { d as defineCustomElement$3 } from './p-C6tAa8Q4.js';
+import { d as defineCustomElement$2 } from './p-Dgxczhd0.js';
+import { d as defineCustomElement$1 } from './p-DyGUXuvD.js';
 
 const sdSelectCss = ".sd-select__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select__dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select{display:flex;width:var(--select-width, 200px);height:28px;position:relative;color:#333333;cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}.sd-select:hover:not(.sd-select--disabled){background:#f6f6f6}.sd-select.sd-select--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select.sd-select--disabled .sd-select__label{border-right:1px solid #cccccc}.sd-select.sd-select--disabled .sd-select__trigger{color:#888888}.sd-select.sd-select--disabled .sd-select__trigger:focus,.sd-select.sd-select--disabled .sd-select__trigger:focus-visible,.sd-select.sd-select--disabled .sd-select__trigger:focus-within{outline:none !important}.sd-select__label{font-size:12px;line-height:20px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6;display:inline-block;white-space:nowrap}.sd-select__container{position:relative;width:100%;display:flex}.sd-select__container .sd-select__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.sd-select__container .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}.sd-select__container .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}.sd-select__container .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}.sd-select__container .sd-select__arrow--open{transform:rotate(180deg)}.sd-select__dropdown{width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;display:flex;flex-direction:column}.sd-select__dropdown .sd-select__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}.sd-select__dropdown .sd-select__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select__dropdown .sd-select__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px;text-align:left}";
 
@@ -212,11 +212,11 @@ const SdSelect = /*@__PURE__*/ proxyCustomElement(class SdSelect extends BaseDro
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: '94880c07678eb6a478c9c80de0c42c5c7724936e', style: style }, h("div", { key: '872f918214118adb99b50533c323e9de7ca27353', class: {
+        return (h(Host, { key: 'a99d2903e6156a30aa834dea2344829edbde67cb', style: style }, h("div", { key: '39862875a121d9add2c0101d81e223d475d14abb', class: {
                 'sd-select': true,
                 'sd-select--open': this.isOpen,
                 'sd-select--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '30e44d67c6d8b81c59c798ffa4de43337de6f195', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '6a7e4ffc442e4edfe508e60c8b578f8c8fb5e409', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)
@@ -318,6 +318,6 @@ function defineCustomElement() {
 }
 
 export { SdSelect as S, defineCustomElement as d };
-//# sourceMappingURL=p-_spt_8fG.js.map
+//# sourceMappingURL=p-9kN1E6Ra.js.map
 
-//# sourceMappingURL=p-_spt_8fG.js.map
+//# sourceMappingURL=p-9kN1E6Ra.js.map