@sellmate/design-system 0.0.1 → 0.0.2

package/dist/esm/sd-pagination.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sd-pagination.entry.js","sources":["src/components/sd-pagination/sd-pagination.scss?tag=sd-pagination&encapsulation=shadow","src/components/sd-pagination/sd-pagination.tsx"],"sourcesContent":["@import '../../styles/global.scss';\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, 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 shadow: true,\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"],"names":[],"mappings":"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"}