@sellmate/design-system 0.0.33 → 0.0.35

package/dist/components/{p-DobE7cC4.js.map → p-CSnKPDQz.js.map}

@@ -1 +1 @@
-{"file":"p-DobE7cC4.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;IAInB,YAAY,GAAA;AACX,QAAA,OAAO,CAAC,GAAG,CAAC,0BAA0B,EAAE;YACvC,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,SAAA,CAAC;;AAGH,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';\n\n.sd-pagination {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n gap: 8px;\n color: $grey_80;\n width: 100%;\n font-size: 12px;\n\n .prepend-btns {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  gap: 8px;\n  width: 60px;\n\n  button {\n   width: 26px;\n   height: 26px;\n   border: 0;\n   background: none;\n\n   &:hover {\n    border: 1px solid $oceanblue_70;\n    border-radius: 14px;\n   }\n  }\n }\n\n .append-btns {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  gap: 8px;\n  width: 60px;\n\n  button {\n   width: 26px;\n   height: 26px;\n   border: 0;\n   background: none;\n\n   &:hover {\n    border: 1px solid $oceanblue_70;\n    border-radius: 14px;\n   }\n  }\n }\n\n .pagination-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 14px;\n  outline: none;\n  border: none;\n  cursor: pointer;\n  height: 26px;\n  color: $grey_80;\n  width: var(--pagination-btn-width, 26px);\n\n  &--selected {\n   background-color: $oceanblue_70;\n   color: white;\n  }\n\n  &:hover {\n   border: 1px solid $oceanblue_70;\n  }\n }\n\n &--simple {\n  .pagination-info {\n   line-height: 26px;\n   display: flex;\n   flex-flow: row nowrap;\n   align-items: center;\n   gap: 8px;\n   .current-page,\n   .last-page {\n    padding: 0 2px;\n   }\n  }\n }\n}\n","import { Component, Prop, Event, EventEmitter, h, Watch, Fragment } from '@stencil/core';\n\nconst BUTTON_WIDTH: Record<number, number> = {\n 1: 26,\n 2: 36,\n 3: 42,\n 4: 50,\n 5: 58,\n};\n\nconst PER_PAGE = 10;\n\n@Component({\n tag: 'sd-pagination',\n styleUrl: 'sd-pagination.scss',\n})\nexport class SdPagination {\n @Prop() currentPage: number = 1;\n @Prop() lastPage: number = 1;\n @Prop() simple: boolean = false;\n\n @Event() pageChange!: EventEmitter<number>;\n\n @Watch('currentPage')\n @Watch('lastPage')\n onPropChange() {\n  console.log('Pagination props changed', {\n   currentPage: this.currentPage,\n   lastPage: this.lastPage,\n  });\n }\n\n private get paginationClasses() {\n  const classes = ['sd-pagination'];\n\n  if (this.simple) {\n   classes.push('sd-pagination--simple');\n  }\n  return classes.join(' ');\n }\n\n private get pageNumbers() {\n  const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;\n  const end = Math.min(start + PER_PAGE - 1, this.lastPage);\n  return Array.from({ length: end - start + 1 }, (_, i) => start + i);\n }\n\n private get buttonWidth() {\n  const lastPageNum = this.pageNumbers.at(-1) ?? 1;\n  const maxPageLength: number = lastPageNum.toString().length;\n  return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];\n }\n\n private handlePageChange(page: number) {\n  if (page < 1 || page > this.lastPage) return;\n  this.pageChange.emit(page);\n }\n\n private handleGroupChange(direction: 'forward' | 'backward') {\n  const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;\n  const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);\n  this.handlePageChange(newPage);\n }\n\n private get isFirstGroup() {\n  return this.currentPage <= PER_PAGE;\n }\n\n private get isLastGroup() {\n  const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;\n  return startPageGroup + PER_PAGE - 1 >= this.lastPage;\n }\n\n private renderPrevButtons() {\n  if (this.simple) {\n   if (this.currentPage <= 1) return null;\n\n   return (\n    <Fragment>\n     <button aria-label=\"Go to first page\" onClick={() => this.handlePageChange(1)}>\n      <sd-icon name=\"arrowLeftEnd\" size=\"12\" color=\"#222222\" />\n     </button>\n     <button\n      aria-label=\"Go to previous page\"\n      onClick={() => this.handlePageChange(this.currentPage - 1)}\n     >\n      <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#222222\" />\n     </button>\n    </Fragment>\n   );\n  }\n\n  if (!this.isFirstGroup) {\n   return (\n    <Fragment>\n     <button aria-label=\"Go to first page\" onClick={() => this.handlePageChange(1)}>\n      <sd-icon name=\"arrowLeftEnd\" size=\"12\" color=\"#222222\" />\n     </button>\n     <button\n      aria-label=\"Go to previous page group\"\n      onClick={() => this.handleGroupChange('backward')}\n     >\n      <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#222222\" />\n     </button>\n    </Fragment>\n   );\n  }\n }\n\n private renderNextButtons() {\n  if (this.simple) {\n   if (this.currentPage >= this.lastPage) return null;\n\n   return (\n    <Fragment>\n     <button\n      aria-label=\"Go to next page\"\n      onClick={() => this.handlePageChange(this.currentPage + 1)}\n     >\n      <sd-icon name=\"arrowRight\" size=\"12\" color=\"#222222\" />\n     </button>\n     <button aria-label=\"Go to last page\" onClick={() => this.handlePageChange(this.lastPage)}>\n      <sd-icon name=\"arrowRightEnd\" size=\"12\" color=\"#222222\" />\n     </button>\n    </Fragment>\n   );\n  }\n\n  if (!this.isLastGroup) {\n   return (\n    <Fragment>\n     <button aria-label=\"Go to next page group\" onClick={() => this.handleGroupChange('forward')}>\n      <sd-icon name=\"arrowRight\" size=\"12\" color=\"#222222\" />\n     </button>\n     <button aria-label=\"Go to last page\" onClick={() => this.handlePageChange(this.lastPage)}>\n      <sd-icon name=\"arrowRightEnd\" size=\"12\" color=\"#222222\" />\n     </button>\n    </Fragment>\n   );\n  }\n }\n\n render() {\n  return (\n   <div class={this.paginationClasses}>\n    <div class=\"prepend-btns\">{this.renderPrevButtons()}</div>\n\n    {this.simple ? (\n     <div class=\"pagination-info\">\n      <span class=\"current-page\">{this.currentPage}</span>\n      <span>/</span>\n      <span class=\"last-page\">{this.lastPage}</span>\n     </div>\n    ) : (\n     this.pageNumbers.map(n => (\n      <button\n       type=\"button\"\n       aria-current={this.currentPage === n ? 'page' : undefined}\n       class={{\n        'pagination-btn': true,\n        'pagination-btn--selected': this.currentPage === n,\n       }}\n       disabled={this.currentPage === n}\n       style={{\n        '--pagination-btn-width': `${this.buttonWidth}px`,\n       }}\n       onClick={() => this.handlePageChange(n)}\n      >\n       {n}\n      </button>\n     ))\n    )}\n\n    <div class=\"append-btns\">{this.renderNextButtons()}</div>\n   </div>\n  );\n }\n}\n"],"version":3}
+{"file":"p-CSnKPDQz.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';\n\n.sd-pagination {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n gap: 8px;\n color: $grey_80;\n width: 100%;\n font-size: 12px;\n\n .prepend-btns {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  gap: 8px;\n  width: 60px;\n\n  button {\n   width: 26px;\n   height: 26px;\n   border: 0;\n   background: none;\n\n   &:hover {\n    border: 1px solid $oceanblue_70;\n    border-radius: 14px;\n   }\n  }\n }\n\n .append-btns {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  gap: 8px;\n  width: 60px;\n\n  button {\n   width: 26px;\n   height: 26px;\n   border: 0;\n   background: none;\n\n   &:hover {\n    border: 1px solid $oceanblue_70;\n    border-radius: 14px;\n   }\n  }\n }\n\n .pagination-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 14px;\n  outline: none;\n  border: none;\n  cursor: pointer;\n  height: 26px;\n  color: $grey_80;\n  width: var(--pagination-btn-width, 26px);\n\n  &--selected {\n   background-color: $oceanblue_70;\n   color: white;\n  }\n\n  &:hover {\n   border: 1px solid $oceanblue_70;\n  }\n }\n\n &--simple {\n  .pagination-info {\n   line-height: 26px;\n   display: flex;\n   flex-flow: row nowrap;\n   align-items: center;\n   gap: 8px;\n   .current-page,\n   .last-page {\n    padding: 0 2px;\n   }\n  }\n }\n}\n","import { Component, Prop, Event, EventEmitter, h, Watch, Fragment } from '@stencil/core';\n\nconst BUTTON_WIDTH: Record<number, number> = {\n 1: 26,\n 2: 36,\n 3: 42,\n 4: 50,\n 5: 58,\n};\n\nconst PER_PAGE = 10;\n\n@Component({\n tag: 'sd-pagination',\n styleUrl: 'sd-pagination.scss',\n})\nexport class SdPagination {\n @Prop() currentPage: number = 1;\n @Prop() lastPage: number = 1;\n @Prop() simple: boolean = false;\n\n @Event() pageChange!: EventEmitter<number>;\n\n @Watch('currentPage')\n @Watch('lastPage')\n onPropChange() {\n  console.log('Pagination props changed', {\n   currentPage: this.currentPage,\n   lastPage: this.lastPage,\n  });\n }\n\n private get paginationClasses() {\n  const classes = ['sd-pagination'];\n\n  if (this.simple) {\n   classes.push('sd-pagination--simple');\n  }\n  return classes.join(' ');\n }\n\n private get pageNumbers() {\n  const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;\n  const end = Math.min(start + PER_PAGE - 1, this.lastPage);\n  return Array.from({ length: end - start + 1 }, (_, i) => start + i);\n }\n\n private get buttonWidth() {\n  const lastPageNum = this.pageNumbers.at(-1) ?? 1;\n  const maxPageLength: number = lastPageNum.toString().length;\n  return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];\n }\n\n private handlePageChange(page: number) {\n  if (page < 1 || page > this.lastPage) return;\n  this.pageChange.emit(page);\n }\n\n private handleGroupChange(direction: 'forward' | 'backward') {\n  const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;\n  const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);\n  this.handlePageChange(newPage);\n }\n\n private get isFirstGroup() {\n  return this.currentPage <= PER_PAGE;\n }\n\n private get isLastGroup() {\n  const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;\n  return startPageGroup + PER_PAGE - 1 >= this.lastPage;\n }\n\n private renderPrevButtons() {\n  if (this.simple) {\n   if (this.currentPage <= 1) return null;\n\n   return (\n    <Fragment>\n     <button aria-label=\"Go to first page\" onClick={() => this.handlePageChange(1)}>\n      <sd-icon name=\"arrowLeftEnd\" size=\"12\" color=\"#222222\" />\n     </button>\n     <button\n      aria-label=\"Go to previous page\"\n      onClick={() => this.handlePageChange(this.currentPage - 1)}\n     >\n      <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#222222\" />\n     </button>\n    </Fragment>\n   );\n  }\n\n  if (!this.isFirstGroup) {\n   return (\n    <Fragment>\n     <button aria-label=\"Go to first page\" onClick={() => this.handlePageChange(1)}>\n      <sd-icon name=\"arrowLeftEnd\" size=\"12\" color=\"#222222\" />\n     </button>\n     <button\n      aria-label=\"Go to previous page group\"\n      onClick={() => this.handleGroupChange('backward')}\n     >\n      <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#222222\" />\n     </button>\n    </Fragment>\n   );\n  }\n }\n\n private renderNextButtons() {\n  if (this.simple) {\n   if (this.currentPage >= this.lastPage) return null;\n\n   return (\n    <Fragment>\n     <button\n      aria-label=\"Go to next page\"\n      onClick={() => this.handlePageChange(this.currentPage + 1)}\n     >\n      <sd-icon name=\"arrowRight\" size=\"12\" color=\"#222222\" />\n     </button>\n     <button aria-label=\"Go to last page\" onClick={() => this.handlePageChange(this.lastPage)}>\n      <sd-icon name=\"arrowRightEnd\" size=\"12\" color=\"#222222\" />\n     </button>\n    </Fragment>\n   );\n  }\n\n  if (!this.isLastGroup) {\n   return (\n    <Fragment>\n     <button aria-label=\"Go to next page group\" onClick={() => this.handleGroupChange('forward')}>\n      <sd-icon name=\"arrowRight\" size=\"12\" color=\"#222222\" />\n     </button>\n     <button aria-label=\"Go to last page\" onClick={() => this.handlePageChange(this.lastPage)}>\n      <sd-icon name=\"arrowRightEnd\" size=\"12\" color=\"#222222\" />\n     </button>\n    </Fragment>\n   );\n  }\n }\n\n render() {\n  return (\n   <div class={this.paginationClasses}>\n    <div class=\"prepend-btns\">{this.renderPrevButtons()}</div>\n\n    {this.simple ? (\n     <div class=\"pagination-info\">\n      <span class=\"current-page\">{this.currentPage}</span>\n      <span>/</span>\n      <span class=\"last-page\">{this.lastPage}</span>\n     </div>\n    ) : (\n     this.pageNumbers.map(n => (\n      <button\n       type=\"button\"\n       aria-current={this.currentPage === n ? 'page' : undefined}\n       class={{\n        'pagination-btn': true,\n        'pagination-btn--selected': this.currentPage === n,\n       }}\n       disabled={this.currentPage === n}\n       style={{\n        '--pagination-btn-width': `${this.buttonWidth}px`,\n       }}\n       onClick={() => this.handlePageChange(n)}\n      >\n       {n}\n      </button>\n     ))\n    )}\n\n    <div class=\"append-btns\">{this.renderNextButtons()}</div>\n   </div>\n  );\n }\n}\n"],"version":3}

package/dist/components/{p-BZjhXFoV.js → p-CqpahWAy.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CbnL1UUF.js';
 import { r as resolveColor } from './p-BYf-ybt2.js';
-import { d as defineCustomElement$1 } from './p-X8UHtq2f.js';
+import { d as defineCustomElement$1 } from './p-GNK9vrin.js';
 
 const sdButtonCss = ".sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:\"\";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}";
 
@@ -97,6 +97,6 @@ function defineCustomElement() {
 }
 
 export { SdButton as S, defineCustomElement as d };
-//# sourceMappingURL=p-BZjhXFoV.js.map
+//# sourceMappingURL=p-CqpahWAy.js.map
 
-//# sourceMappingURL=p-BZjhXFoV.js.map
+//# sourceMappingURL=p-CqpahWAy.js.map

package/dist/components/{p-BZjhXFoV.js.map → p-CqpahWAy.js.map}

@@ -1 +1 @@
-{"file":"p-BZjhXFoV.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-button/sd-button.scss?tag=sd-button","src/components/sd-button/sd-button.tsx"],"sourcesContent":["@import 'variables';\n\n.sd-button {\n text-decoration: none;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.2s ease-in-out;\n position: relative;\n overflow: hidden;\n white-space: nowrap;\n -webkit-user-select: none;\n user-select: none;\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n &--xs {\n  padding: 0 8px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 20px;\n  min-height: 24px;\n }\n &--sm {\n  padding: 0 12px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 20px;\n  min-height: 28px;\n }\n &--md {\n  padding: 0 20px;\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 26px;\n  min-height: 34px;\n }\n &--lg {\n  padding: 0 28px;\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 30px;\n  min-height: 62px;\n }\n &--primary {\n  background-color: var(--button-color);\n  color: white;\n  transition: filter 0.2s ease;\n\n  &::before {\n   content: '';\n   position: absolute;\n   inset: 0;\n   background: #000000;\n   opacity: 0;\n   transition: opacity 0.2s ease;\n   z-index: 0;\n  }\n\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\n   opacity: 0.25;\n  }\n }\n\n &--outline {\n  background: white;\n  border: 1px solid var(--button-color);\n  color: var(--button-color);\n\n  &::before {\n   content: '';\n   position: absolute;\n   inset: 0;\n   background: var(--button-color);\n   opacity: 0;\n   transition: opacity 0.2s ease;\n   z-index: 0;\n  }\n\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\n   opacity: 0.15;\n  }\n\n  .sd-button__content {\n   position: relative;\n   z-index: 1;\n  }\n }\n &--ghost {\n  background-color: transparent;\n  color: var(--button-color);\n  border-color: transparent;\n\n  &::before {\n   content: '';\n   position: absolute;\n   inset: 0;\n   background: var(--button-color);\n   opacity: 0;\n   transition: opacity 0.2s ease;\n   z-index: 0;\n  }\n\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\n   opacity: 0.15;\n  }\n\n  .sd-button__content {\n   position: relative;\n   z-index: 1;\n  }\n }\n &--disabled {\n  border: 1px solid $grey_45;\n  background: $grey_30;\n  color: $grey_65;\n  cursor: not-allowed !important;\n }\n &--icon-only {\n  padding: 0;\n  width: fit-content;\n  height: fit-content;\n  aspect-ratio: 1 / 1;\n }\n &--no-hover {\n  &:hover::before {\n   opacity: 0 !important;\n  }\n }\n\n .sd-button__content {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n\n  z-index: 1;\n  font-weight: 500;\n }\n}\n\n// /* Focus styles */\n// .sd-button:focus-visible {\n//  outline: 2px solid $primary;\n//  outline-offset: 2px;\n// }\n\n// /* High contrast mode support */\n// @media (prefers-contrast: high) {\n//  .sd-button {\n//   border-width: 2px;\n//  }\n// }\n","import { Component, Prop, h, Element, Event, EventEmitter, Host } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\n\nexport type ButtonVariant = 'primary' | 'outline' | 'ghost';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\n\nconst ICON_SIZES: { [key in ButtonSize]: number } = {\n xs: 12,\n sm: 16,\n md: 20,\n lg: 24,\n};\n\n@Component({\n tag: 'sd-button',\n styleUrl: 'sd-button.scss',\n})\nexport class SdButton {\n @Element() el!: HTMLElement;\n\n @Prop() variant?: ButtonVariant = 'primary';\n @Prop() size: ButtonSize = 'sm';\n @Prop() color: string = '#025497';\n @Prop() label: string = '';\n @Prop() disabled: boolean = false;\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n @Prop() icon?: IconName;\n @Prop() iconColor?: string;\n @Prop() iconSize?: number;\n @Prop() iconRight?: IconName;\n @Prop() noHover: boolean = false;\n @Prop() class: string = '';\n @Event() sdClick!: EventEmitter<MouseEvent>;\n\n private handleClick = (event: MouseEvent) => {\n  if (this.disabled) {\n   event.preventDefault();\n   event.stopPropagation();\n   return;\n  }\n  this.sdClick.emit(event);\n };\n\n private getButtonClasses(): string {\n  const classes = ['sd-button'];\n\n  classes.push(`sd-button--${this.variant}`);\n  classes.push(`sd-button--${this.size}`);\n  classes.push(`sd-button--color-${this.color}`);\n\n  if (this.disabled) {\n   classes.push('sd-button--disabled');\n  }\n\n  if (!this.label && (this.icon || this.iconRight)) {\n   classes.push('sd-button--icon-only');\n  }\n\n  if (this.noHover) {\n   classes.push('sd-button--no-hover');\n  }\n\n  return classes.join(' ');\n }\n\n render() {\n  const buttonClasses = this.getButtonClasses();\n  // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)\n  const resolvedColor = resolveColor(this.color);\n\n  return (\n   <Host style={{ '--button-color': resolvedColor }}>\n    <button\n     class={`${buttonClasses} ${this.class}`}\n     type={this.type}\n     disabled={this.disabled}\n     onClick={this.handleClick}\n    >\n     <div class=\"sd-button__content\">\n      {this.icon && (\n       <sd-icon\n        class=\"sd-button__icon sd-button__icon--left\"\n        name={this.icon}\n        size={this.iconSize ? this.iconSize : ICON_SIZES[this.size!]}\n        color={\n         this.iconColor ? this.iconColor : this.variant === 'primary' ? '#fff' : resolvedColor\n        }\n       ></sd-icon>\n      )}\n\n      {this.label && <div class=\"sd-button__label\">{this.label}</div>}\n\n      {this.iconRight && (\n       <sd-icon\n        class=\"sd-button__icon sd-button__icon--right\"\n        name={this.iconRight}\n        size={ICON_SIZES[this.size!]}\n        color={this.variant === 'primary' ? '#fff' : resolvedColor}\n       ></sd-icon>\n      )}\n     </div>\n    </button>\n   </Host>\n  );\n }\n}\n"],"version":3}
+{"file":"p-CqpahWAy.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-button/sd-button.scss?tag=sd-button","src/components/sd-button/sd-button.tsx"],"sourcesContent":["@import 'variables';\n\n.sd-button {\n text-decoration: none;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.2s ease-in-out;\n position: relative;\n overflow: hidden;\n white-space: nowrap;\n -webkit-user-select: none;\n user-select: none;\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n &--xs {\n  padding: 0 8px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 20px;\n  min-height: 24px;\n }\n &--sm {\n  padding: 0 12px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 20px;\n  min-height: 28px;\n }\n &--md {\n  padding: 0 20px;\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 26px;\n  min-height: 34px;\n }\n &--lg {\n  padding: 0 28px;\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 30px;\n  min-height: 62px;\n }\n &--primary {\n  background-color: var(--button-color);\n  color: white;\n  transition: filter 0.2s ease;\n\n  &::before {\n   content: '';\n   position: absolute;\n   inset: 0;\n   background: #000000;\n   opacity: 0;\n   transition: opacity 0.2s ease;\n   z-index: 0;\n  }\n\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\n   opacity: 0.25;\n  }\n }\n\n &--outline {\n  background: white;\n  border: 1px solid var(--button-color);\n  color: var(--button-color);\n\n  &::before {\n   content: '';\n   position: absolute;\n   inset: 0;\n   background: var(--button-color);\n   opacity: 0;\n   transition: opacity 0.2s ease;\n   z-index: 0;\n  }\n\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\n   opacity: 0.15;\n  }\n\n  .sd-button__content {\n   position: relative;\n   z-index: 1;\n  }\n }\n &--ghost {\n  background-color: transparent;\n  color: var(--button-color);\n  border-color: transparent;\n\n  &::before {\n   content: '';\n   position: absolute;\n   inset: 0;\n   background: var(--button-color);\n   opacity: 0;\n   transition: opacity 0.2s ease;\n   z-index: 0;\n  }\n\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\n   opacity: 0.15;\n  }\n\n  .sd-button__content {\n   position: relative;\n   z-index: 1;\n  }\n }\n &--disabled {\n  border: 1px solid $grey_45;\n  background: $grey_30;\n  color: $grey_65;\n  cursor: not-allowed !important;\n }\n &--icon-only {\n  padding: 0;\n  width: fit-content;\n  height: fit-content;\n  aspect-ratio: 1 / 1;\n }\n &--no-hover {\n  &:hover::before {\n   opacity: 0 !important;\n  }\n }\n\n .sd-button__content {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n\n  z-index: 1;\n  font-weight: 500;\n }\n}\n\n// /* Focus styles */\n// .sd-button:focus-visible {\n//  outline: 2px solid $primary;\n//  outline-offset: 2px;\n// }\n\n// /* High contrast mode support */\n// @media (prefers-contrast: high) {\n//  .sd-button {\n//   border-width: 2px;\n//  }\n// }\n","import { Component, Prop, h, Element, Event, EventEmitter, Host } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\n\nexport type ButtonVariant = 'primary' | 'outline' | 'ghost';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\n\nconst ICON_SIZES: { [key in ButtonSize]: number } = {\n xs: 12,\n sm: 16,\n md: 20,\n lg: 24,\n};\n\n@Component({\n tag: 'sd-button',\n styleUrl: 'sd-button.scss',\n})\nexport class SdButton {\n @Element() el!: HTMLElement;\n\n @Prop() variant?: ButtonVariant = 'primary';\n @Prop() size: ButtonSize = 'sm';\n @Prop() color: string = '#025497';\n @Prop() label: string = '';\n @Prop() disabled: boolean = false;\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n @Prop() icon?: IconName;\n @Prop() iconColor?: string;\n @Prop() iconSize?: number;\n @Prop() iconRight?: IconName;\n @Prop() noHover: boolean = false;\n @Prop() class: string = '';\n @Event() sdClick!: EventEmitter<MouseEvent>;\n\n private handleClick = (event: MouseEvent) => {\n  if (this.disabled) {\n   event.preventDefault();\n   event.stopPropagation();\n   return;\n  }\n  this.sdClick.emit(event);\n };\n\n private getButtonClasses(): string {\n  const classes = ['sd-button'];\n\n  classes.push(`sd-button--${this.variant}`);\n  classes.push(`sd-button--${this.size}`);\n  classes.push(`sd-button--color-${this.color}`);\n\n  if (this.disabled) {\n   classes.push('sd-button--disabled');\n  }\n\n  if (!this.label && (this.icon || this.iconRight)) {\n   classes.push('sd-button--icon-only');\n  }\n\n  if (this.noHover) {\n   classes.push('sd-button--no-hover');\n  }\n\n  return classes.join(' ');\n }\n\n render() {\n  const buttonClasses = this.getButtonClasses();\n  // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)\n  const resolvedColor = resolveColor(this.color);\n\n  return (\n   <Host style={{ '--button-color': resolvedColor }}>\n    <button\n     class={`${buttonClasses} ${this.class}`}\n     type={this.type}\n     disabled={this.disabled}\n     onClick={this.handleClick}\n    >\n     <div class=\"sd-button__content\">\n      {this.icon && (\n       <sd-icon\n        class=\"sd-button__icon sd-button__icon--left\"\n        name={this.icon}\n        size={this.iconSize ? this.iconSize : ICON_SIZES[this.size!]}\n        color={\n         this.iconColor ? this.iconColor : this.variant === 'primary' ? '#fff' : resolvedColor\n        }\n       ></sd-icon>\n      )}\n\n      {this.label && <div class=\"sd-button__label\">{this.label}</div>}\n\n      {this.iconRight && (\n       <sd-icon\n        class=\"sd-button__icon sd-button__icon--right\"\n        name={this.iconRight}\n        size={ICON_SIZES[this.size!]}\n        color={this.variant === 'primary' ? '#fff' : resolvedColor}\n       ></sd-icon>\n      )}\n     </div>\n    </button>\n   </Host>\n  );\n }\n}\n"],"version":3}

package/dist/components/p-CrmdI2cD.js

@@ -0,0 +1,34 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CbnL1UUF.js';
+
+const sdTbodyCss = "sd-tbody{display:table-row-group}";
+
+const SdTbody = /*@__PURE__*/ proxyCustomElement(class SdTbody extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+    }
+    render() {
+        return (h(Host, { key: '2db73c5270442ed9080a645fc6ec373764475993' }, h("slot", { key: '23199e678de6d2df0fd476b14da9eb9340ac040d' })));
+    }
+    static get style() { return sdTbodyCss; }
+}, [260, "sd-tbody"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["sd-tbody"];
+    components.forEach(tagName => { switch (tagName) {
+        case "sd-tbody":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SdTbody);
+            }
+            break;
+    } });
+}
+
+export { SdTbody as S, defineCustomElement as d };
+//# sourceMappingURL=p-CrmdI2cD.js.map
+
+//# sourceMappingURL=p-CrmdI2cD.js.map

package/dist/components/p-CrmdI2cD.js.map

@@ -0,0 +1 @@
+{"file":"p-CrmdI2cD.js","mappings":";;AAAA,MAAM,UAAU,GAAG,mCAAmC;;MCMzC,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;;;;;;;IACnB,MAAM,GAAA;QACL,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-table/sd-tbody/sd-tbody.scss?tag=sd-tbody","src/components/sd-table/sd-tbody/sd-tbody.tsx"],"sourcesContent":["sd-tbody {\n display: table-row-group;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-tbody',\n styleUrl: 'sd-tbody.scss',\n})\nexport class SdTbody {\n render() {\n  return (\n   <Host>\n    <slot></slot>\n   </Host>\n  );\n }\n}\n"],"version":3}

package/dist/components/p-D-s8kK6P.js

@@ -0,0 +1,34 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CbnL1UUF.js';
+
+const sdTrCss = "sd-tr{display:table-row}";
+
+const SdTr = /*@__PURE__*/ proxyCustomElement(class SdTr extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+    }
+    render() {
+        return (h(Host, { key: 'a3a60dc016314ae086ccba52c4f1967db982553e', role: "row" }, h("slot", { key: 'ced44913de272afa61850e35b2a0d070d32b41ab' })));
+    }
+    static get style() { return sdTrCss; }
+}, [260, "sd-tr"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["sd-tr"];
+    components.forEach(tagName => { switch (tagName) {
+        case "sd-tr":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SdTr);
+            }
+            break;
+    } });
+}
+
+export { SdTr as S, defineCustomElement as d };
+//# sourceMappingURL=p-D-s8kK6P.js.map
+
+//# sourceMappingURL=p-D-s8kK6P.js.map

package/dist/components/p-D-s8kK6P.js.map

@@ -0,0 +1 @@
+{"file":"p-D-s8kK6P.js","mappings":";;AAAA,MAAM,OAAO,GAAG,0BAA0B;;MCM7B,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAAC,CAAA,CAAA;;;;;;;IAChB,MAAM,GAAA;QACL,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EAAA,EACf,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-table/sd-tr/sd-tr.scss?tag=sd-tr","src/components/sd-table/sd-tr/sd-tr.tsx"],"sourcesContent":["sd-tr {\n display: table-row;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-tr',\n styleUrl: 'sd-tr.scss',\n})\nexport class SdTr {\n render() {\n  return (\n   <Host role=\"row\">\n    <slot></slot>\n   </Host>\n  );\n }\n}\n"],"version":3}

package/dist/components/{p-zEI1HiVv.js → p-Du8-vyL0.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, d as createEvent, h } from './p-CbnL1UUF.js';
-import { d as defineCustomElement$1 } from './p-X8UHtq2f.js';
+import { d as defineCustomElement$1 } from './p-GNK9vrin.js';
 
 const sdCheckboxCss = "sd-checkbox{display:inline-block;height:20px;line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px;max-height:20px}sd-checkbox .sd-checkbox>input{display:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox:hover.sd-checkbox--indeterminate .sd-checkbox__bg{border-color:#005cc9;background:#005cc9}sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border:1px solid #0075ff;background:#d9eaff}sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border:1px solid transparent;background:#eeeeee}sd-checkbox .sd-checkbox__bg{width:16px;height:16px;border-radius:2px;border:1px solid #888888;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}sd-checkbox .sd-checkbox__label{font-size:12px;color:#333333;line-height:20px}sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:#eeeeee;border:1px solid #cccccc !important}sd-checkbox .sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg{border:1px solid #0075ff;background:#0075ff}sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg{background:white}sd-checkbox .sd-checkbox--disabled{cursor:not-allowed}sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg{background:#eeeeee;border:1px solid #cccccc !important}";
 
@@ -113,6 +113,6 @@ function defineCustomElement() {
 }
 
 export { SdCheckbox as S, defineCustomElement as d };
-//# sourceMappingURL=p-zEI1HiVv.js.map
+//# sourceMappingURL=p-Du8-vyL0.js.map
 
-//# sourceMappingURL=p-zEI1HiVv.js.map
+//# sourceMappingURL=p-Du8-vyL0.js.map

package/dist/components/{p-zEI1HiVv.js.map → p-Du8-vyL0.js.map}

@@ -1 +1 @@
-{"file":"p-zEI1HiVv.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-checkbox/sd-checkbox.scss?tag=sd-checkbox","src/components/sd-checkbox/sd-checkbox.tsx"],"sourcesContent":["@import 'variables';\n\nsd-checkbox {\n display: inline-block;\n height: 20px;\n line-height: 0;\n\n .sd-checkbox {\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  height: 20px;\n  max-height: 20px;\n\n  > input {\n   display: none;\n  }\n\n  &:hover {\n   &.sd-checkbox--checked,\n   &.sd-checkbox--indeterminate {\n    .sd-checkbox__bg {\n     border-color: $brilliantblue_80;\n     background: $brilliantblue_80;\n    }\n   }\n\n   &.sd-checkbox--unchecked {\n    .sd-checkbox__bg {\n     border: 1px solid $brilliantblue_75;\n     background: $brilliantblue_25;\n    }\n   }\n\n   &.sd-checkbox--disabled {\n    .sd-checkbox__bg {\n     border: 1px solid transparent;\n     background: $grey_20;\n    }\n   }\n  }\n\n  &__bg {\n   width: 16px;\n   height: 16px;\n   border-radius: 2px;\n   border: 1px solid $grey_65;\n   box-sizing: border-box;\n   display: inline-flex;\n   justify-content: center;\n   align-items: center;\n   overflow: hidden;\n   line-height: 0;\n  }\n\n  &__label {\n   font-size: 12px;\n   color: $grey_90;\n   line-height: 20px;\n  }\n\n  &--checked,\n  &--indeterminate {\n   &.sd-checkbox--disabled {\n    .sd-checkbox__bg {\n     background: $grey_20;\n     border: 1px solid $grey_45 !important;\n    }\n   }\n\n   .sd-checkbox__bg {\n    border: 1px solid $brilliantblue_75;\n    background: $brilliantblue_75;\n   }\n  }\n\n  &--unchecked {\n   .sd-checkbox__bg {\n    background: white;\n   }\n  }\n\n  &--disabled {\n   cursor: not-allowed;\n   .sd-checkbox__bg {\n    background: $grey_20;\n    border: 1px solid $grey_45 !important;\n   }\n  }\n }\n}\n","import { Component, Prop, h, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\n\nexport type CheckedType = boolean | any[] | null;\n\n@Component({\n tag: 'sd-checkbox',\n styleUrl: 'sd-checkbox.scss',\n})\nexport class SdCheckbox {\n @Element() el!: HTMLElement;\n\n /** 현재 선택 상태 또는 배열 형태의 값 */\n @Prop() checked!: CheckedType;\n\n /** 배열 모드에서의 개별 값 */\n @Prop() val?: any;\n\n /** 비활성화 여부 */\n @Prop() disabled: boolean = false;\n\n /** 표시할 라벨 텍스트 */\n @Prop() label: string = '';\n\n /** 내부 체크 상태 */\n @State() private isChecked: boolean | null = false;\n\n /** 값 변경 이벤트 */\n @Event() sdChange!: EventEmitter<CheckedType>;\n\n componentWillLoad() {\n  this.updateCheckedState(this.checked);\n }\n\n componentWillRender() {\n  this.updateCheckedState(this.checked);\n }\n\n @Watch('checked')\n watchValueHandler(newValue: CheckedType) {\n  this.updateCheckedState(newValue);\n }\n\n private get checkboxClasses(): string {\n  const classes = [\n   'sd-checkbox',\n   `sd-checkbox--${this.isChecked ? 'checked' : this.isChecked === null ? 'indeterminate' : 'unchecked'}`,\n  ];\n\n  if (this.disabled) {\n   classes.push('sd-checkbox--disabled');\n  }\n\n  return classes.join(' ');\n }\n\n private updateCheckedState(value: CheckedType) {\n  if (value === null) {\n   this.isChecked = null;\n  } else if (typeof value === 'boolean') {\n   this.isChecked = value;\n  } else if (Array.isArray(value)) {\n   this.isChecked = this.val !== undefined && value.includes(this.val);\n  } else {\n   this.isChecked = false;\n  }\n }\n\n private handleChange = () => {\n  if (this.disabled) return;\n\n  let newValue: CheckedType;\n\n  if (typeof this.checked === 'boolean') {\n   newValue = !this.checked;\n  } else if (Array.isArray(this.checked)) {\n   if (this.val === undefined) {\n    console.warn('A \"val\" property is required when using an array for the \"value\" property.');\n   }\n\n   const valueSet = new Set(this.checked);\n   valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);\n   newValue = Array.from(valueSet);\n  } else {\n   newValue = !this.isChecked;\n  }\n\n  this.sdChange.emit(newValue);\n };\n\n render() {\n  return (\n   <label\n    aria-checked={this.isChecked === null ? 'mixed' : this.isChecked.toString()}\n    aria-disabled={this.disabled.toString()}\n    role=\"checkbox\"\n    aria-label={this.label || 'checkbox'}\n    class={this.checkboxClasses}\n   >\n    <input\n     type=\"checkbox\"\n     value={this.val}\n     checked={!!this.isChecked}\n     disabled={this.disabled}\n     onChange={this.handleChange}\n     name={this.label || 'checkbox'}\n    />\n    <div class=\"sd-checkbox__bg\">\n     {this.isChecked !== false ? (\n      <sd-icon\n       name={this.isChecked === true ? 'check' : 'minus'}\n       size={12}\n       color={this.disabled ? '#888888' : 'white'}\n      />\n     ) : null}\n    </div>\n    {this.label && <span class=\"sd-checkbox__label\">{this.label}</span>}\n   </label>\n  );\n }\n}\n"],"version":3}
+{"file":"p-Du8-vyL0.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-checkbox/sd-checkbox.scss?tag=sd-checkbox","src/components/sd-checkbox/sd-checkbox.tsx"],"sourcesContent":["@import 'variables';\n\nsd-checkbox {\n display: inline-block;\n height: 20px;\n line-height: 0;\n\n .sd-checkbox {\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  height: 20px;\n  max-height: 20px;\n\n  > input {\n   display: none;\n  }\n\n  &:hover {\n   &.sd-checkbox--checked,\n   &.sd-checkbox--indeterminate {\n    .sd-checkbox__bg {\n     border-color: $brilliantblue_80;\n     background: $brilliantblue_80;\n    }\n   }\n\n   &.sd-checkbox--unchecked {\n    .sd-checkbox__bg {\n     border: 1px solid $brilliantblue_75;\n     background: $brilliantblue_25;\n    }\n   }\n\n   &.sd-checkbox--disabled {\n    .sd-checkbox__bg {\n     border: 1px solid transparent;\n     background: $grey_20;\n    }\n   }\n  }\n\n  &__bg {\n   width: 16px;\n   height: 16px;\n   border-radius: 2px;\n   border: 1px solid $grey_65;\n   box-sizing: border-box;\n   display: inline-flex;\n   justify-content: center;\n   align-items: center;\n   overflow: hidden;\n   line-height: 0;\n  }\n\n  &__label {\n   font-size: 12px;\n   color: $grey_90;\n   line-height: 20px;\n  }\n\n  &--checked,\n  &--indeterminate {\n   &.sd-checkbox--disabled {\n    .sd-checkbox__bg {\n     background: $grey_20;\n     border: 1px solid $grey_45 !important;\n    }\n   }\n\n   .sd-checkbox__bg {\n    border: 1px solid $brilliantblue_75;\n    background: $brilliantblue_75;\n   }\n  }\n\n  &--unchecked {\n   .sd-checkbox__bg {\n    background: white;\n   }\n  }\n\n  &--disabled {\n   cursor: not-allowed;\n   .sd-checkbox__bg {\n    background: $grey_20;\n    border: 1px solid $grey_45 !important;\n   }\n  }\n }\n}\n","import { Component, Prop, h, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\n\nexport type CheckedType = boolean | any[] | null;\n\n@Component({\n tag: 'sd-checkbox',\n styleUrl: 'sd-checkbox.scss',\n})\nexport class SdCheckbox {\n @Element() el!: HTMLElement;\n\n /** 현재 선택 상태 또는 배열 형태의 값 */\n @Prop() checked!: CheckedType;\n\n /** 배열 모드에서의 개별 값 */\n @Prop() val?: any;\n\n /** 비활성화 여부 */\n @Prop() disabled: boolean = false;\n\n /** 표시할 라벨 텍스트 */\n @Prop() label: string = '';\n\n /** 내부 체크 상태 */\n @State() private isChecked: boolean | null = false;\n\n /** 값 변경 이벤트 */\n @Event() sdChange!: EventEmitter<CheckedType>;\n\n componentWillLoad() {\n  this.updateCheckedState(this.checked);\n }\n\n componentWillRender() {\n  this.updateCheckedState(this.checked);\n }\n\n @Watch('checked')\n watchValueHandler(newValue: CheckedType) {\n  this.updateCheckedState(newValue);\n }\n\n private get checkboxClasses(): string {\n  const classes = [\n   'sd-checkbox',\n   `sd-checkbox--${this.isChecked ? 'checked' : this.isChecked === null ? 'indeterminate' : 'unchecked'}`,\n  ];\n\n  if (this.disabled) {\n   classes.push('sd-checkbox--disabled');\n  }\n\n  return classes.join(' ');\n }\n\n private updateCheckedState(value: CheckedType) {\n  if (value === null) {\n   this.isChecked = null;\n  } else if (typeof value === 'boolean') {\n   this.isChecked = value;\n  } else if (Array.isArray(value)) {\n   this.isChecked = this.val !== undefined && value.includes(this.val);\n  } else {\n   this.isChecked = false;\n  }\n }\n\n private handleChange = () => {\n  if (this.disabled) return;\n\n  let newValue: CheckedType;\n\n  if (typeof this.checked === 'boolean') {\n   newValue = !this.checked;\n  } else if (Array.isArray(this.checked)) {\n   if (this.val === undefined) {\n    console.warn('A \"val\" property is required when using an array for the \"value\" property.');\n   }\n\n   const valueSet = new Set(this.checked);\n   valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);\n   newValue = Array.from(valueSet);\n  } else {\n   newValue = !this.isChecked;\n  }\n\n  this.sdChange.emit(newValue);\n };\n\n render() {\n  return (\n   <label\n    aria-checked={this.isChecked === null ? 'mixed' : this.isChecked.toString()}\n    aria-disabled={this.disabled.toString()}\n    role=\"checkbox\"\n    aria-label={this.label || 'checkbox'}\n    class={this.checkboxClasses}\n   >\n    <input\n     type=\"checkbox\"\n     value={this.val}\n     checked={!!this.isChecked}\n     disabled={this.disabled}\n     onChange={this.handleChange}\n     name={this.label || 'checkbox'}\n    />\n    <div class=\"sd-checkbox__bg\">\n     {this.isChecked !== false ? (\n      <sd-icon\n       name={this.isChecked === true ? 'check' : 'minus'}\n       size={12}\n       color={this.disabled ? '#888888' : 'white'}\n      />\n     ) : null}\n    </div>\n    {this.label && <span class=\"sd-checkbox__label\">{this.label}</span>}\n   </label>\n  );\n }\n}\n"],"version":3}