@sellmate/design-system 0.0.43 → 0.0.44

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

@@ -1 +1 @@
-{"version":3,"file":"sd-pagination.js","sourceRoot":"","sources":["../../../src/components/sd-pagination/sd-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Watch, 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 @Watch('currentPage')\r\n @Watch('lastPage')\r\n onPropChange() {\r\n  console.log('Pagination props changed', {\r\n   currentPage: this.currentPage,\r\n   lastPage: this.lastPage,\r\n  });\r\n }\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":"sd-pagination.js","sourceRoot":"","sources":["../../../src/components/sd-pagination/sd-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"sd-popover.js","sourceRoot":"","sources":["../../../src/components/sd-popover/sd-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Fragment, Prop, State, Watch, h } from '@stencil/core';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\nimport { TooltipArrow } from '../assets/tooltipArrow';\r\n\r\n@Component({\r\n tag: 'sd-popover',\r\n styleUrl: 'sd-popover.scss',\r\n shadow: true,\r\n})\r\nexport class SdPopover {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop({ mutable: true }) show: boolean = false;\r\n\r\n @Prop({ reflect: true }) placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\r\n @Prop({ reflect: true }) color: string = '#01BB4B';\r\n\r\n @Prop({ reflect: true }) icon: IconName = 'helpOutline';\r\n @Prop({ reflect: true }) iconSize: number = 12;\r\n\r\n @Prop() label: string = '';\r\n @Prop({ reflect: true }) buttonSize: ButtonSize = 'sm';\r\n @Prop({ reflect: true }) buttonVariant: ButtonVariant = 'primary';\r\n\r\n @Prop({ attribute: 'title', reflect: true }) menuTitle?: string;\r\n @Prop({ reflect: true }) messages: string[] = [];\r\n @Prop({ reflect: true }) buttons: {\r\n  [key: string]: any;\r\n }[] = [];\r\n @Prop() menuClass: string = '';\r\n\r\n @Prop() noHover: boolean = true;\r\n\r\n @Prop() useClose: boolean = false;\r\n\r\n @State() showPopover: boolean = false;\r\n @State() slotContent: string = '';\r\n\r\n @Watch('show')\r\n watchShowHandler(newValue: boolean) {\r\n  this.showPopover = newValue;\r\n }\r\n\r\n componentWillLoad() {\r\n  this.showPopover = this.show;\r\n\r\n  this.slotContent = this.el.innerHTML;\r\n\r\n  console.log(this.el);\r\n }\r\n\r\n private buttonEl?: HTMLElement;\r\n\r\n private handleClose = () => {\r\n  this.showPopover = false;\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Fragment>\r\n    {this.label ? (\r\n     <sd-button\r\n      ref={el => (this.buttonEl = el as unknown as HTMLElement)}\r\n      label={this.label}\r\n      icon={this.icon}\r\n      size={this.buttonSize}\r\n      color={this.color}\r\n      variant={this.buttonVariant}\r\n      class=\"sd-popover\"\r\n      onClick={() => (console.log('click popover'), (this.showPopover = !this.showPopover))}\r\n     ></sd-button>\r\n    ) : (\r\n     <sd-icon\r\n      ref={el => (this.buttonEl = el as unknown as HTMLElement)}\r\n      name={this.icon}\r\n      size={this.iconSize}\r\n      color={this.color}\r\n      class=\"sd-popover\"\r\n      onClick={() => (console.log('click popover'), (this.showPopover = !this.showPopover))}\r\n     ></sd-icon>\r\n    )}\r\n\r\n    {this.showPopover && (\r\n     <sd-tooltip-portal\r\n      parentRef={this.buttonEl}\r\n      onSdClose={this.handleClose}\r\n      placement={this.placement}\r\n     >\r\n      <div\r\n       class={{\r\n        'sd-popover-menu': true,\r\n        [`sd-popover-menu--${this.placement}`]: true,\r\n        [this.menuClass]: !!this.menuClass,\r\n       }}\r\n      >\r\n       <i class={`sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}`}>\r\n        <TooltipArrow></TooltipArrow>\r\n       </i>\r\n\r\n       <div class=\"sd-popover-menu__content\">\r\n        {this.menuTitle && <div class=\"sd-popover-menu__title\">{this.menuTitle}</div>}\r\n\r\n        {this.messages.length > 0 && (\r\n         <div class=\"sd-popover-menu__messages\">\r\n          {this.messages.map(message => (\r\n           <div>{message}</div>\r\n          ))}\r\n         </div>\r\n        )}\r\n\r\n        {this.buttons.length > 0 && (\r\n         <div class={`sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}`}>\r\n          {this.buttons.map(button => (\r\n           <sd-button {...button} />\r\n          ))}\r\n         </div>\r\n        )}\r\n       </div>\r\n\r\n       {this.useClose && (\r\n        <button class=\"sd-popover-menu__close-button\" onClick={() => this.handleClose()}>\r\n         <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\r\n        </button>\r\n       )}\r\n      </div>\r\n     </sd-tooltip-portal>\r\n    )}\r\n   </Fragment>\r\n  );\r\n }\r\n}\r\n"]}
+{"version":3,"file":"sd-popover.js","sourceRoot":"","sources":["../../../src/components/sd-popover/sd-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Fragment, Prop, State, Watch, h } from '@stencil/core';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\nimport { TooltipArrow } from '../assets/tooltipArrow';\r\n\r\n@Component({\r\n tag: 'sd-popover',\r\n styleUrl: 'sd-popover.scss',\r\n shadow: true,\r\n})\r\nexport class SdPopover {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop({ mutable: true }) show: boolean = false;\r\n\r\n @Prop({ reflect: true }) placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\r\n @Prop({ reflect: true }) color: string = '#01BB4B';\r\n\r\n @Prop({ reflect: true }) icon: IconName = 'helpOutline';\r\n @Prop({ reflect: true }) iconSize: number = 12;\r\n\r\n @Prop() label: string = '';\r\n @Prop({ reflect: true }) buttonSize: ButtonSize = 'sm';\r\n @Prop({ reflect: true }) buttonVariant: ButtonVariant = 'primary';\r\n\r\n @Prop({ attribute: 'title', reflect: true }) menuTitle?: string;\r\n @Prop({ reflect: true }) messages: string[] = [];\r\n @Prop({ reflect: true }) buttons: {\r\n  [key: string]: any;\r\n }[] = [];\r\n @Prop() menuClass: string = '';\r\n\r\n @Prop() noHover: boolean = true;\r\n\r\n @Prop() useClose: boolean = false;\r\n\r\n @State() showPopover: boolean = false;\r\n @State() slotContent: string = '';\r\n\r\n @Watch('show')\r\n watchShowHandler(newValue: boolean) {\r\n  this.showPopover = newValue;\r\n }\r\n\r\n componentWillLoad() {\r\n  this.showPopover = this.show;\r\n\r\n  this.slotContent = this.el.innerHTML;\r\n }\r\n\r\n private buttonEl?: HTMLElement;\r\n\r\n private handleClose = () => {\r\n  this.showPopover = false;\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Fragment>\r\n    {this.label ? (\r\n     <sd-button\r\n      ref={el => (this.buttonEl = el as unknown as HTMLElement)}\r\n      label={this.label}\r\n      icon={this.icon}\r\n      size={this.buttonSize}\r\n      color={this.color}\r\n      variant={this.buttonVariant}\r\n      class=\"sd-popover\"\r\n      onClick={() => (this.showPopover = !this.showPopover)}\r\n     ></sd-button>\r\n    ) : (\r\n     <sd-icon\r\n      ref={el => (this.buttonEl = el as unknown as HTMLElement)}\r\n      name={this.icon}\r\n      size={this.iconSize}\r\n      color={this.color}\r\n      class=\"sd-popover\"\r\n      onClick={() => (this.showPopover = !this.showPopover)}\r\n     ></sd-icon>\r\n    )}\r\n\r\n    {this.showPopover && (\r\n     <sd-tooltip-portal\r\n      parentRef={this.buttonEl}\r\n      onSdClose={this.handleClose}\r\n      placement={this.placement}\r\n     >\r\n      <div\r\n       class={{\r\n        'sd-popover-menu': true,\r\n        [`sd-popover-menu--${this.placement}`]: true,\r\n        [this.menuClass]: !!this.menuClass,\r\n       }}\r\n      >\r\n       <i class={`sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}`}>\r\n        <TooltipArrow></TooltipArrow>\r\n       </i>\r\n\r\n       <div class=\"sd-popover-menu__content\">\r\n        {this.menuTitle && <div class=\"sd-popover-menu__title\">{this.menuTitle}</div>}\r\n\r\n        {this.messages.length > 0 && (\r\n         <div class=\"sd-popover-menu__messages\">\r\n          {this.messages.map(message => (\r\n           <div>{message}</div>\r\n          ))}\r\n         </div>\r\n        )}\r\n\r\n        {this.buttons.length > 0 && (\r\n         <div class={`sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}`}>\r\n          {this.buttons.map(button => (\r\n           <sd-button {...button} />\r\n          ))}\r\n         </div>\r\n        )}\r\n       </div>\r\n\r\n       {this.useClose && (\r\n        <button class=\"sd-popover-menu__close-button\" onClick={() => this.handleClose()}>\r\n         <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\r\n        </button>\r\n       )}\r\n      </div>\r\n     </sd-tooltip-portal>\r\n    )}\r\n   </Fragment>\r\n  );\r\n }\r\n}\r\n"]}

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

@@ -113,7 +113,7 @@ export class SdPortal {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: '120ce8e686e5935293738aa5a470b960dfd518c5' });
+        return h("slot", { key: 'b24b7f844564365e887dc8cee8b98e26a94961cd' });
     }
     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: '68cca90181920f534f2c1d0cf846542b938f5822', style: {
+        return (h(Host, { key: 'e5a1be5c3343e0645db107b076fac36d1a935ca7', style: {
                 '--progress-color': this.statusColor[this.status],
                 '--progress-percentage': `${this.percentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '76b37297e94712a559aa90f723fa56ec20ea591c', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: 'd2676df17ad3474f88d3c0972802a7b373b5652e', 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-select/sd-select-option/sd-select-option.js

@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h(Host, { key: '70e4b495a158c9da1b2a5d6298a5053f70b84a7b' }, h("div", { key: '6c37c08ce1cb4654bf8ea53ceb52daee1dcfe79f', class: {
+        return (h(Host, { key: 'f1874b4e539573ddaa48cb2bdc9d13ea96bf350e' }, h("div", { key: '5a3bbd66f6623a1c02d5e1295bb974e82883b8a1', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

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: '8706a1e60e18e90e05429bb838de6d3a4da6d4bc', style: style }, h("div", { key: 'fbec6760ae66d6ca43c504ab7ab6e1655d72b267', class: {
+        return (h(Host, { key: '94880c07678eb6a478c9c80de0c42c5c7724936e', style: style }, h("div", { key: '872f918214118adb99b50533c323e9de7ca27353', 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: 'b8ecf2553fc65a009cda2fabe3d4fdafdd4cf57c', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '30e44d67c6d8b81c59c798ffa4de43337de6f195', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)

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

@@ -208,11 +208,11 @@ export class SdSelectMultiple extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: '79bce82ded286fe421a1fe02a2c931c03d7d7073', style: style }, h("div", { key: '12008fb3c09ab6cd6c66ac04170e69334f4761b4', class: {
+        return (h(Host, { key: '0e488c3906b12e73abc6e6216e14b2b4e6a130c8', style: style }, h("div", { key: '714a95f446631269a19e44d098ef0dc81c7c6fd5', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: 'e1a007b915f0366ff3092c494efc9ae60ce9ee50', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '08912b8586c926107cbcaed28b73bd6eb94d47d9', class: "sd-select-multiple__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: 'c85e1e6bd6d030ff2da5009a6f72a557d026250b', style: style }, h("div", { key: '991f74b5a6bf357225e3c1b2513c1605acc5c047', class: {
+        return (h(Host, { key: 'bcafcfbb33940882bd7e22a6d197974194554968', style: style }, h("div", { key: 'a8547e4aa07d8ccdfbb7955f122eaa3955c5d30e', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,
-            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), h("div", { key: '5bc92be9cdc3768db4b79c2310f62f41ca7dec8c', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), h("div", { key: '90ba61f1d83692e2eaf430f42a1a0fd55380d774', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label, labelStyle) {
         if (!label)

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

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

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: 'f5a96627bda89ab76d03781d8a84931cfac9d4d9' }, h("div", { key: '8f96a9381579acb56b5551de90b2f1dcb02db2ef', class: "sd-table__wrapper", style: {
+        return (h(Host, { key: '9b6b47737ddd9b97c477fb029260bbdb5088593a' }, h("div", { key: '4235585df56fb9c83606e58d2b3ad6efc7b50259', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: 'acf8435ff60702d0b54477edcea0f7a92dfe66ca', class: "sd-table__container" }, h("div", { key: 'ec02d6ceb21021c1cb9605a5bda1d0f44fbbd5af', class: "sd-table__middle", role: "table" }, h("div", { key: '40544c9ab218f8931ce2add45e1d8adb83423472', part: "table", class: this.sdTableClasses }, this.renderHeader(), h("sd-tbody", { key: '706311e5a9ddddacadcf632b22a25871cc066ce3' }, h("slot", { key: 'f6c415352bb3b3f91acf5852e3b6b53bd6567238' })))), h("div", { key: '5b95f5bb444839da29ded159327c7e09f3a07a58', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (h("div", { key: 'bdfadea5466840f4185bef70e06392cbc4b9d87b', class: "sd-table__pagination" }, h("sd-pagination", { key: '0683704cd48839846201048097836b337e4cf534', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
+            } }, 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) => {
                 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: '6a555c46a088cf181b820da1b3ab312bf5e50c04', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
+            } }), this.useRowsPerPageSelect && (h("sd-select", { key: '23a648a6581bee5cf755afbb9146bf2090e6be65', 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/sd-tbody/sd-tbody.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdTbody {
     render() {
-        return (h(Host, { key: '210b6c0005314fab15c92697347a3f21dd70ef6f' }, h("slot", { key: 'ea78b27ab6c8b131d4940d1b2fea20d90e6393f3' })));
+        return (h(Host, { key: 'b94310b0ad1566cf9ccbac3ccdc5fbcdd2e53f8c' }, h("slot", { key: '382fb835aa4516adad374443556084703b8560c3' })));
     }
     static get is() { return "sd-tbody"; }
     static get originalStyleUrls() {

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

@@ -5,11 +5,11 @@ export class SdTd {
     tdStyle;
     tdClass;
     render() {
-        return (h(Host, { key: 'd97cb05ec639ea64724b4107985248e9c9e89381', role: "cell", class: {
+        return (h(Host, { key: '87c947cf0092ac524cdfed0be5f1703685a64db6', role: "cell", class: {
                 'sd-td': true,
                 [`sd-td--${this.align}`]: true,
                 [this.tdClass || '']: Boolean(this.tdClass),
-            }, style: this.tdStyle }, h("slot", { key: '685d2a07497781f3ff563cf10694a5c51eb963eb' })));
+            }, style: this.tdStyle }, h("slot", { key: '4369629e345d8cc5bb17166d6877dba421522e4d' })));
     }
     static get is() { return "sd-td"; }
     static get originalStyleUrls() {

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdTh {
     render() {
-        return (h(Host, { key: '1c1c403a374a1d575739457ea011e72cbbae2a8a', role: "columnheader" }, h("slot", { key: 'f5653df6fc113940f3c6fae07a74b43f5f116dae' })));
+        return (h(Host, { key: 'cf30b704166adc6d7de5ade8d455d34ecf575199', role: "columnheader" }, h("slot", { key: '7863306b924a749aba5ba55f70b8b3d5c205d133' })));
     }
     static get is() { return "sd-th"; }
     static get originalStyleUrls() {

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdTr {
     render() {
-        return (h(Host, { key: '2dc11b6c66458e889e231c422c06b5ddee7ae88a', role: "row" }, h("slot", { key: '66640e770921eda343e2798a0b167bae5db1fbca' })));
+        return (h(Host, { key: '2cfec32649fa440cb44f83392c439e58dcb24644', role: "row" }, h("slot", { key: '0146af3690a7a6445b65893f86e0b9e5cd1d8a02' })));
     }
     static get is() { return "sd-tr"; }
     static get originalStyleUrls() {

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

@@ -55,6 +55,20 @@
   border-spacing: 0;
   table-layout: fixed;
 }
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll {
+  position: relative;
+  height: var(--total-virtual-height, auto);
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr:not([aria-hidden=true]) {
+  width: 100%;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true] {
+  padding: 0;
+  border: none;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true] td {
+  display: none;
+}
 .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;