@sellmate/design-system 0.0.0 → 0.0.2

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

@@ -1 +1 @@
-{"version":3,"file":"sd-table.entry.js","sources":["src/components/sd-table/sd-table.scss?tag=sd-table","src/components/sd-table/sd-table.tsx"],"sourcesContent":["@import '../../styles/global.scss';\r\n\r\n.sd-table__container {\r\n width: 100%;\r\n border: 1px solid $grey_30;\r\n border-radius: 8px;\r\n font-size: 12px;\r\n overflow: hidden;\r\n\r\n .sd-table__middle {\r\n  overflow: auto;\r\n  will-change: scroll-position;\r\n  height: 100%;\r\n  @extend %scrollBar;\r\n\r\n  .sd-table {\r\n   width: 100%;\r\n   border-collapse: collapse;\r\n   border-spacing: 0;\r\n   table-layout: fixed;\r\n\r\n   &--selectable {\r\n    td.sd-td--selected,\r\n    th.sd-th--selected {\r\n     width: 52px !important;\r\n     max-width: 52px !important;\r\n     min-width: 52px !important;\r\n     padding: 0 10px 0 24px;\r\n     text-align: left;\r\n    }\r\n   }\r\n\r\n   &--sticky-header {\r\n    thead {\r\n     position: sticky;\r\n     top: 0;\r\n     z-index: 2;\r\n    }\r\n   }\r\n\r\n   &--no-data {\r\n    thead {\r\n     opacity: 0.4;\r\n     tr {\r\n      th {\r\n       &.sd-th {\r\n        border-bottom: 1px solid rgba(225, 225, 225, 0.4) !important;\r\n       }\r\n      }\r\n     }\r\n    }\r\n   }\r\n\r\n   td,\r\n   th,\r\n   .sd-th__content--label {\r\n    overflow: hidden;\r\n    white-space: nowrap;\r\n    text-overflow: ellipsis;\r\n    word-break: keep-all;\r\n   }\r\n\r\n   thead {\r\n    height: 36px;\r\n\r\n    tr {\r\n     width: 100%;\r\n\r\n     th {\r\n      background: $th-bg;\r\n      height: 36px;\r\n      padding: 0 16px;\r\n      font-weight: 500;\r\n      vertical-align: middle;\r\n      border-bottom: 1px solid $grey_30;\r\n      -webkit-user-select: none;\r\n      user-select: none;\r\n      position: relative;\r\n\r\n      &.sd-th {\r\n       .sd-th__content {\r\n        display: flex;\r\n        flex-flow: row nowrap;\r\n        align-items: center;\r\n        gap: 4px;\r\n\r\n\r\n        &--left {\r\n         justify-content: flex-start;\r\n        }\r\n        &--center {\r\n         justify-content: center;\r\n        }\r\n        &--right {\r\n         justify-content: flex-end;\r\n        }\r\n       }\r\n\r\n       .sd-th__resizer {\r\n        position: absolute;\r\n        top: 50%;\r\n        right: 0;\r\n        transform: translateY(-50%);\r\n        width: 4px;\r\n        height: 16px;\r\n        cursor: col-resize;\r\n        z-index: 3;\r\n        border-left: 1px solid $grey_45;\r\n        border-right: 1px solid $grey_45;\r\n       }\r\n      }\r\n     }\r\n    }\r\n   }\r\n\r\n   tbody {\r\n    tr {\r\n     &:last-of-type {\r\n      td {\r\n       border-bottom: none;\r\n      }\r\n     }\r\n     td {\r\n      height: 44px;\r\n      padding: 0 16px;\r\n      border-bottom: 1px solid $grey_30;\r\n      background: white;\r\n      vertical-align: middle;\r\n\r\n      &.sd-td {\r\n       &--left {\r\n        text-align: left;\r\n       }\r\n       &--center {\r\n        text-align: center;\r\n       }\r\n       &--right {\r\n        text-align: right;\r\n       }\r\n      }\r\n     }\r\n    }\r\n   }\r\n  }\r\n }\r\n\r\n .sd-table__bottom {\r\n  background: white;\r\n  text-align: center;\r\n }\r\n}\r\n\r\n.sd-table__pagination {\r\n background: $grey_05;\r\n height: 48px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 1px solid $grey_30;\r\n border-top: none;\r\n border-radius: 8px;\r\n}\r\n","import { Component, Element, Prop, State, Event, Watch, h, EventEmitter } from '@stencil/core';\r\n\r\nexport type SdTableSortDir = 'asc' | 'desc' | 'none';\r\n\r\nexport interface SdTableColumn {\r\n name: string;\r\n label: string;\r\n field: string | ((row: any) => any);\r\n align?: 'left' | 'center' | 'right';\r\n width?: string;\r\n format?: (value: any, row: any) => string;\r\n visible?: boolean;\r\n usePageMoveIcon?: boolean;\r\n tooltip?: string[];\r\n tooltipOptions?: { [key: string]: any };\r\n}\r\n\r\nexport interface Row {\r\n [key: string]: any;\r\n}\r\n\r\n@Component({\r\n tag: 'sd-table',\r\n styleUrl: 'sd-table.scss',\r\n})\r\nexport class SdTable {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() columns: SdTableColumn[] = [];\r\n @Prop({ mutable: true }) rows: Row[] = [];\r\n @Prop({ mutable: true }) selected: Set<Row> = new Set();\r\n @Prop() rowKey: string = 'id';\r\n @Prop() selectable: boolean = false;\r\n @Prop() resizable: boolean = false;\r\n @Prop() stickyHeader: boolean = false;\r\n @Prop() noDataLabel: string = '데이터가 없습니다.';\r\n @Prop() pagination?: {\r\n  page: number;\r\n  rowsPerPage: number;\r\n  lastPage?: number;\r\n };\r\n @Prop() bodyCellRenderer?: (\r\n  column: SdTableColumn,\r\n  row: Row,\r\n ) => HTMLElement | string | null | undefined;\r\n\r\n @Event() sdSelectChange!: EventEmitter<Row[]>;\r\n @Event() sdPageChange!: EventEmitter<number>;\r\n\r\n @State() currentPage: number = this.pagination?.page || 1;\r\n @State() innerRows: { [key: string]: any }[] = this.rows;\r\n @State() innerSelected: Set<{ [key: string]: any }> = new Set(this.selected);\r\n @State() columnWidths: number[] = [];\r\n\r\n @Watch('columns')\r\n watchColumns(newCols: SdTableColumn[]) {\r\n  this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));\r\n }\r\n\r\n @Watch('selected')\r\n watchSelected(newSelected: Set<Row>) {\r\n  this.innerSelected = new Set(newSelected);\r\n }\r\n\r\n @Watch('pagination')\r\n watchPagination(newVal: { page: number; rowsPerPage: number; lastPage?: number } | undefined) {\r\n  if (newVal?.page && newVal.page !== this.currentPage) this.currentPage = newVal.page;\r\n }\r\n\r\n componentWillLoad() {\r\n  this.innerRows = [...this.rows];\r\n  this.innerSelected = new Set(this.selected);\r\n  this.columnWidths = this.columns.map(c => parseInt(c.width || '120', 10));\r\n }\r\n\r\n private get paginatedRows(): { [key: string]: any }[] {\r\n  if (!this.pagination) return this.innerRows;\r\n\r\n  const { rowsPerPage = this.rows.length } = this.pagination || {};\r\n\r\n  const result = this.innerRows.slice(\r\n   (this.currentPage - 1) * rowsPerPage,\r\n   this.currentPage * rowsPerPage,\r\n  );\r\n\r\n  return result;\r\n }\r\n\r\n private get lastPageNumber(): number {\r\n  const { lastPage, rowsPerPage = this.rows.length } = this.pagination || {};\r\n\r\n  return lastPage ?? Math.max(1, Math.ceil(this.rows.length / rowsPerPage));\r\n }\r\n\r\n private get sdTableClasses() {\r\n  return [\r\n   'sd-table',\r\n   this.stickyHeader && 'sd-table--sticky-header',\r\n   this.selectable && 'sd-table--selectable',\r\n   this.resizable && 'sd-table--resizable',\r\n   !this.innerRows.length && 'sd-table--no-data',\r\n  ]\r\n   .filter(Boolean)\r\n   .join(' ');\r\n }\r\n\r\n private get visibleColumns(): SdTableColumn[] {\r\n  return this.columns.filter(col => col.visible !== false);\r\n }\r\n\r\n private updateRowSelect(row: Row) {\r\n  const selectedArray = Array.from(this.innerSelected);\r\n  const exists = this.isRowSelected(row);\r\n  const newSelected = exists\r\n   ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])\r\n   : [...selectedArray, row];\r\n\r\n  // 동일 상태면 set하지 않음 → 불필요 렌더 방지\r\n  if (newSelected.length === selectedArray.length) return;\r\n\r\n  this.innerSelected = new Set(newSelected);\r\n  this.sdSelectChange.emit(Array.from(this.innerSelected));\r\n }\r\n\r\n private get isAllChecked(): boolean | null {\r\n  const total = this.paginatedRows.length;\r\n  const selectedCount = this.paginatedRows.filter(row =>\r\n   Array.from(this.innerSelected).some(\r\n    selectedRow => selectedRow[this.rowKey] === row[this.rowKey],\r\n   ),\r\n  ).length;\r\n\r\n  if (selectedCount === 0) return false; // 아무것도 안 선택됨\r\n  if (selectedCount === total) return true; // 전부 선택됨\r\n  return null; // 일부만 선택됨\r\n }\r\n\r\n private get selectedKeyMap(): Map<any, boolean> {\r\n  return new Map(Array.from(this.innerSelected).map(r => [r[this.rowKey], true]));\r\n }\r\n\r\n private isRowSelected(row: Row): boolean {\r\n  return this.selectedKeyMap.has(row[this.rowKey]);\r\n }\r\n\r\n private toggleSelectAll(checked: boolean | any[]) {\r\n  if (checked) {\r\n   const pageRows = new Set([...this.paginatedRows]);\r\n   this.innerSelected = new Set([...this.innerSelected, ...pageRows]);\r\n  } else {\r\n   const currentPageKeys = this.paginatedRows.map(r => r[this.rowKey]);\r\n   this.innerSelected = new Set(\r\n    [...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])),\r\n   );\r\n  }\r\n\r\n  this.sdSelectChange.emit(Array.from(this.innerSelected));\r\n }\r\n\r\n private handleResize(index: number, event: MouseEvent) {\r\n  const startX = event.clientX;\r\n  const startWidth = this.columnWidths[index];\r\n\r\n  const handleMouseMove = (moveEvent: MouseEvent) => {\r\n   const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50);\r\n\r\n   this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));\r\n  };\r\n\r\n  const handleMouseUp = () => {\r\n   document.removeEventListener('mousemove', handleMouseMove);\r\n   document.removeEventListener('mouseup', handleMouseUp);\r\n  };\r\n\r\n  document.addEventListener('mousemove', handleMouseMove);\r\n  document.addEventListener('mouseup', handleMouseUp);\r\n }\r\n\r\n private renderHeader() {\r\n  return (\r\n   <thead>\r\n    <tr>\r\n     {this.selectable && (\r\n      <th\r\n       class=\"sd-th sd-th--selected\"\r\n       style={{\r\n        width: '52px',\r\n        minWidth: '52px',\r\n        maxWidth: '52px',\r\n       }}\r\n      >\r\n       <sd-checkbox\r\n        checked={this.isAllChecked}\r\n        disabled={!this.paginatedRows.length}\r\n        onSdChange={(e: CustomEvent<boolean | any[]>) => this.toggleSelectAll(e.detail)}\r\n       ></sd-checkbox>\r\n      </th>\r\n     )}\r\n     {this.visibleColumns.map((col, colIdx) => (\r\n      <th\r\n       class=\"sd-th\"\r\n       key={col.name}\r\n       style={{\r\n        minWidth: `${this.columnWidths[colIdx] as number}px`,\r\n        maxWidth: `${this.columnWidths[colIdx] as number}px`,\r\n        width: `${this.columnWidths[colIdx] as number}px`,\r\n       }}\r\n      >\r\n       <div class={`sd-th__content sd-th__content--${col.align || 'left'}`}>\r\n        <div class=\"sd-th__content--label\">{col.label}</div>\r\n\r\n        {col.usePageMoveIcon && <sd-icon name=\"pageMove\" size=\"12\" color=\"#006AC1\" />}\r\n\r\n        {col.tooltip && (\r\n         <sd-tooltip {...col.tooltipOptions}>\r\n          {col.tooltip.map(text => (\r\n           <div>{text}</div>\r\n          ))}\r\n         </sd-tooltip>\r\n         // TODO: sd-tooltip 추가 예정\r\n         //  <div></div>\r\n        )}\r\n       </div>\r\n\r\n       {this.resizable && (\r\n        <div\r\n         class=\"sd-th__resizer\"\r\n         onMouseDown={(evt: MouseEvent) => this.handleResize(colIdx, evt)}\r\n        ></div>\r\n       )}\r\n      </th>\r\n     ))}\r\n    </tr>\r\n   </thead>\r\n  );\r\n }\r\n\r\n private getRowData = (column: SdTableColumn, row: Row) => {\r\n  const { field, format, name } = column;\r\n\r\n  // 기본 필드 선택\r\n  const value = field ? (typeof field === 'string' ? row[field] : field(row)) : row[name];\r\n\r\n  // 포맷 적용\r\n  return format ? format(value, row) : value;\r\n };\r\n\r\n private renderBody() {\r\n  if (!this.paginatedRows.length)\r\n   return (\r\n    <tbody part=\"tbody-empty\">\r\n     <tr>\r\n      <td colSpan={this.visibleColumns.length + (this.selectable ? 1 : 0)}>{this.noDataLabel}</td>\r\n     </tr>\r\n    </tbody>\r\n   );\r\n\r\n  return (\r\n   <tbody>\r\n    {this.paginatedRows.map(row => (\r\n     <tr key={row[this.rowKey]} class=\"hover:bg-Grey_Lighten-6\">\r\n      {this.selectable && (\r\n       <td class=\"sd-td sd-td--selected\">\r\n        <sd-checkbox\r\n         checked={this.isRowSelected(row)}\r\n         disabled={!this.paginatedRows.length}\r\n         onSdChange={() => this.updateRowSelect(row)}\r\n        ></sd-checkbox>\r\n       </td>\r\n      )}\r\n      {this.visibleColumns.map(column => {\r\n       const rendered = this.bodyCellRenderer?.(column, row);\r\n\r\n       return (\r\n        <td\r\n         key={column.name}\r\n         part={`td-${column.name}`}\r\n         class={`sd-td sd-td--${column.align || 'left'}`}\r\n        >\r\n         {rendered ? (\r\n          typeof rendered === 'string' ? (\r\n           <span innerHTML={rendered}></span>\r\n          ) : (\r\n           rendered\r\n          )\r\n         ) : (\r\n          this.getRowData(column, row)\r\n         )}\r\n        </td>\r\n       );\r\n      })}\r\n     </tr>\r\n    ))}\r\n   </tbody>\r\n  );\r\n }\r\n\r\n render() {\r\n  return (\r\n   <>\r\n    <div class={`sd-table__container`}>\r\n     <div class=\"sd-table__middle\">\r\n      <table part=\"table\" class={this.sdTableClasses}>\r\n       {this.renderHeader()}\r\n\r\n       {this.renderBody()}\r\n      </table>\r\n     </div>\r\n\r\n     <div class=\"sd-table__bottom\"></div>\r\n    </div>\r\n    {this.pagination && this.innerRows.length > 0 && (\r\n     <div class=\"sd-table__pagination\">\r\n      <sd-pagination\r\n       currentPage={this.currentPage}\r\n       lastPage={this.lastPageNumber}\r\n       onPageChange={(e: CustomEvent<number>) => {\r\n        this.currentPage = e.detail;\r\n        this.sdPageChange.emit(this.currentPage);\r\n       }}\r\n      ></sd-pagination>\r\n     </div>\r\n    )}\r\n   </>\r\n  );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sd-table.entry.js","sources":["src/components/sd-table/sd-table.scss?tag=sd-table","src/components/sd-table/sd-table.tsx"],"sourcesContent":["@import '../../styles/global.scss';\r\n\r\n.sd-table__container {\r\n width: 100%;\r\n border: 1px solid $grey_30;\r\n border-radius: 8px;\r\n font-size: 12px;\r\n overflow: hidden;\r\n\r\n .sd-table__middle {\r\n  overflow: auto;\r\n  will-change: scroll-position;\r\n  height: var(--table-height, auto);\r\n  @extend %scrollBar;\r\n\r\n  .sd-table {\r\n   width: 100%;\r\n   border-collapse: separate;\r\n   border-spacing: 0;\r\n   table-layout: fixed;\r\n\r\n   &--selectable {\r\n    td.sd-td--selected,\r\n    th.sd-th--selected {\r\n     width: 52px !important;\r\n     max-width: 52px !important;\r\n     min-width: 52px !important;\r\n     padding: 0 10px 0 24px;\r\n     text-align: left;\r\n    }\r\n   }\r\n\r\n   &--sticky-header {\r\n    thead {\r\n     position: sticky;\r\n     top: 0;\r\n     z-index: 2;\r\n    }\r\n   }\r\n\r\n   &--sticky-column {\r\n    th.sticky-left,\r\n    th.sticky-right {\r\n     position: sticky;\r\n     background-color: $th-bg;\r\n     z-index: 200 !important;\r\n    }\r\n    td.sticky-left,\r\n    td.sticky-right {\r\n     position: sticky;\r\n     background-color: white;\r\n     z-index: 100 !important;\r\n    }\r\n\r\n    .sticky-left {\r\n     left: var(--sticky-left-offset, 0);\r\n    }\r\n    .sticky-right {\r\n     right: var(--sticky-right-offset, 0);\r\n    }\r\n\r\n    th.sticky-cell {\r\n     position: sticky;\r\n     z-index: 102;\r\n     background-color: $th-bg;\r\n    }\r\n    td.sticky-cell {\r\n     position: sticky;\r\n     z-index: 101;\r\n     background-color: white;\r\n    }\r\n   }\r\n\r\n   &--scrolled-left {\r\n    th.sticky-left-edge,\r\n    td.sticky-left-edge {\r\n     overflow: visible;\r\n     &:after {\r\n      content: '';\r\n      position: absolute;\r\n      top: 0;\r\n      left: 100%;\r\n      right: -20px;\r\n      width: 20px;\r\n      height: 100%;\r\n      z-index: 101 !important;\r\n      box-shadow: inset 12px 0 20px -25px;\r\n      opacity: 1;\r\n      pointer-events: none;\r\n     }\r\n    }\r\n   }\r\n\r\n   &--scrolled-right {\r\n    th.sticky-right-edge,\r\n    td.sticky-right-edge {\r\n     overflow: visible;\r\n\r\n     &:after {\r\n      content: '';\r\n      position: absolute;\r\n      top: 0;\r\n      left: -20px;\r\n      width: 20px;\r\n      height: 100%;\r\n      z-index: 101 !important;\r\n      box-shadow: inset -12px 0 20px -25px;\r\n      opacity: 1;\r\n      pointer-events: none;\r\n     }\r\n    }\r\n   }\r\n\r\n   &--no-data {\r\n    thead {\r\n     opacity: 0.4;\r\n     tr {\r\n      th {\r\n       &.sd-th {\r\n        border-bottom: 1px solid rgba(225, 225, 225, 0.4) !important;\r\n       }\r\n      }\r\n     }\r\n    }\r\n   }\r\n\r\n   td,\r\n   th,\r\n   .sd-th__content--label {\r\n    overflow: hidden;\r\n    white-space: nowrap;\r\n    text-overflow: ellipsis;\r\n    word-break: keep-all;\r\n   }\r\n\r\n   thead {\r\n    height: 36px;\r\n\r\n    tr {\r\n     width: 100%;\r\n\r\n     th {\r\n      background: $th-bg;\r\n      height: 36px;\r\n      padding: 0 16px;\r\n      font-weight: 500;\r\n      vertical-align: middle;\r\n      border-bottom: 1px solid $grey_30;\r\n      -webkit-user-select: none;\r\n      user-select: none;\r\n      position: relative;\r\n\r\n      &.sd-th {\r\n       .sd-th__content {\r\n        display: flex;\r\n        flex-flow: row nowrap;\r\n        align-items: center;\r\n        gap: 4px;\r\n\r\n        &--left {\r\n         justify-content: flex-start;\r\n        }\r\n        &--center {\r\n         justify-content: center;\r\n        }\r\n        &--right {\r\n         justify-content: flex-end;\r\n        }\r\n       }\r\n\r\n       .sd-th__resizer {\r\n        position: absolute;\r\n        top: 50%;\r\n        right: 0;\r\n        transform: translateY(-50%);\r\n        width: 4px;\r\n        height: 16px;\r\n        cursor: col-resize;\r\n        z-index: 3;\r\n        border-left: 1px solid $grey_45;\r\n        border-right: 1px solid $grey_45;\r\n       }\r\n      }\r\n     }\r\n    }\r\n   }\r\n\r\n   tbody {\r\n    tr {\r\n     &:last-of-type {\r\n      td {\r\n       border-bottom: none;\r\n      }\r\n     }\r\n     td {\r\n      height: 44px;\r\n      padding: 0 16px;\r\n      border-bottom: 1px solid $grey_30;\r\n      background: white;\r\n      vertical-align: middle;\r\n\r\n      &.sd-td {\r\n       &--left {\r\n        text-align: left;\r\n       }\r\n       &--center {\r\n        text-align: center;\r\n       }\r\n       &--right {\r\n        text-align: right;\r\n       }\r\n      }\r\n     }\r\n    }\r\n   }\r\n  }\r\n }\r\n\r\n .sd-table__bottom {\r\n  background: white;\r\n  text-align: center;\r\n }\r\n}\r\n\r\n.sd-table__pagination {\r\n background: $grey_05;\r\n height: 48px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 1px solid $grey_30;\r\n border-top: none;\r\n border-radius: 8px;\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Prop,\r\n State,\r\n Event,\r\n Watch,\r\n h,\r\n EventEmitter,\r\n Host,\r\n} from '@stencil/core';\r\n\r\nexport type SdTableSortDir = 'asc' | 'desc' | 'none';\r\n\r\nexport interface SdTableColumn {\r\n name: string;\r\n label: string;\r\n field: string | ((row: any) => any);\r\n align?: 'left' | 'center' | 'right';\r\n width?: string;\r\n format?: (value: any, row: any) => string;\r\n visible?: boolean;\r\n usePageMoveIcon?: boolean;\r\n tooltip?: string[];\r\n tooltipOptions?: Record<string, any>;\r\n}\r\n\r\nexport interface Row {\r\n [key: string]: any;\r\n}\r\n\r\n@Component({\r\n tag: 'sd-table',\r\n styleUrl: 'sd-table.scss',\r\n})\r\nexport class SdTable {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() columns: SdTableColumn[] = [];\r\n @Prop({ mutable: true }) rows: Row[] = [];\r\n @Prop({ mutable: true }) selected: Set<Row> = new Set();\r\n @Prop() rowKey: string = 'id';\r\n @Prop() selectable: boolean = false;\r\n @Prop() resizable: boolean = false;\r\n @Prop() height?: number;\r\n @Prop() stickyHeader: boolean = false;\r\n @Prop() stickyColumn: { left?: number; right?: number } = { left: 0, right: 0 };\r\n @Prop() noDataLabel: string = '데이터가 없습니다.';\r\n @Prop() pagination?: {\r\n  page: number;\r\n  rowsPerPage: number;\r\n  lastPage?: number;\r\n };\r\n @Prop() bodyCellRenderer?: (\r\n  column: SdTableColumn,\r\n  row: Row,\r\n ) => HTMLElement | string | null | undefined;\r\n\r\n @Event() sdSelectChange!: EventEmitter<Row[]>;\r\n @Event() sdPageChange!: EventEmitter<number>;\r\n\r\n @State() currentPage: number = this.pagination?.page || 1;\r\n @State() innerRows: Row[] = [];\r\n @State() innerSelected: Set<Row> = new Set();\r\n @State() columnWidths: number[] = [];\r\n @State() scrolledLeft: boolean = false;\r\n @State() scrolledRight: boolean = false;\r\n\r\n @Watch('columns')\r\n handleColumnsChange(newCols: SdTableColumn[]) {\r\n  this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));\r\n }\r\n\r\n @Watch('rows')\r\n handleRowsChange(newRows: Row[]) {\r\n  this.innerRows = [...newRows];\r\n }\r\n\r\n @Watch('selected')\r\n handleSelectedChange(newSelected: Set<Row>) {\r\n  this.innerSelected = new Set(newSelected);\r\n }\r\n\r\n @Watch('pagination')\r\n handlePaginationChange(\r\n  newVal?: { page: number; rowsPerPage: number; lastPage?: number } | undefined,\r\n ) {\r\n  if (newVal?.page && newVal.page !== this.currentPage) this.currentPage = newVal.page;\r\n }\r\n\r\n componentWillLoad() {\r\n  this.innerRows = [...this.rows];\r\n  this.innerSelected = new Set(this.selected);\r\n  this.columnWidths = this.columns.map(c => parseInt(c.width || '120', 10));\r\n }\r\n\r\n componentDidLoad() {\r\n  const middle = this.el.querySelector('.sd-table__middle');\r\n  if (!middle) return;\r\n\r\n  const onScroll = () => {\r\n   const { scrollLeft, scrollWidth, clientWidth } = middle as HTMLElement;\r\n   this.scrolledLeft = scrollLeft > 0;\r\n   this.scrolledRight = scrollLeft + clientWidth < scrollWidth;\r\n  };\r\n  middle.addEventListener('scroll', onScroll, { passive: true });\r\n  onScroll();\r\n }\r\n\r\n // ----- Derived getters -----\r\n private get visibleColumns(): SdTableColumn[] {\r\n  return this.columns.filter(col => col.visible !== false);\r\n }\r\n\r\n private get paginatedRows(): Row[] {\r\n  if (!this.pagination) return this.innerRows;\r\n\r\n  const { rowsPerPage = this.rows.length } = this.pagination || {};\r\n\r\n  const result = this.innerRows.slice(\r\n   (this.currentPage - 1) * rowsPerPage,\r\n   this.currentPage * rowsPerPage,\r\n  );\r\n\r\n  return result;\r\n }\r\n\r\n private get lastPageNumber(): number {\r\n  const { lastPage, rowsPerPage = this.rows.length } = this.pagination || {};\r\n\r\n  return lastPage ?? Math.max(1, Math.ceil(this.rows.length / rowsPerPage));\r\n }\r\n\r\n private get sdTableClasses() {\r\n  return [\r\n   'sd-table',\r\n   this.stickyHeader && 'sd-table--sticky-header',\r\n   this.selectable && 'sd-table--selectable',\r\n   this.resizable && 'sd-table--resizable',\r\n   !this.innerRows.length && 'sd-table--no-data',\r\n   ((this.stickyColumn?.left ?? 0) > 0 || (this.stickyColumn?.right ?? 0) > 0) &&\r\n    'sd-table--sticky-column',\r\n   this.scrolledLeft && 'sd-table--scrolled-left',\r\n   this.scrolledRight && 'sd-table--scrolled-right',\r\n  ]\r\n   .filter(Boolean)\r\n   .join(' ');\r\n }\r\n\r\n // ----- Selection -----\r\n private isRowSelected(row: Row): boolean {\r\n  return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);\r\n }\r\n\r\n private updateRowSelect(row: Row) {\r\n  const selectedArray = Array.from(this.innerSelected);\r\n  const exists = this.isRowSelected(row);\r\n  const newSelected = exists\r\n   ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])\r\n   : [...selectedArray, row];\r\n\r\n  // 동일 상태면 set하지 않음 → 불필요 렌더 방지\r\n  if (newSelected.length === selectedArray.length) return;\r\n\r\n  this.innerSelected = new Set(newSelected);\r\n  this.sdSelectChange.emit(Array.from(this.innerSelected));\r\n }\r\n\r\n private toggleSelectAll(checked: boolean | any[]) {\r\n  if (checked) {\r\n   const pageRows = new Set([...this.paginatedRows]);\r\n   this.innerSelected = new Set([...this.innerSelected, ...pageRows]);\r\n  } else {\r\n   const currentPageKeys = this.paginatedRows.map(r => r[this.rowKey]);\r\n   this.innerSelected = new Set(\r\n    [...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])),\r\n   );\r\n  }\r\n\r\n  this.sdSelectChange.emit(Array.from(this.innerSelected));\r\n }\r\n\r\n private get isAllChecked(): boolean | null {\r\n  const total = this.paginatedRows.length;\r\n  const selectedCount = this.paginatedRows.filter(row =>\r\n   Array.from(this.innerSelected).some(\r\n    selectedRow => selectedRow[this.rowKey] === row[this.rowKey],\r\n   ),\r\n  ).length;\r\n\r\n  if (selectedCount === 0) return false; // 아무것도 안 선택됨\r\n  if (selectedCount === total) return true; // 전부 선택됨\r\n  return null; // 일부만 선택됨\r\n }\r\n\r\n // ----- Helpers -----\r\n private getStickyStyle(colIdx: number) {\r\n  const leftOffset =\r\n   this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this.selectable ? 52 : 0);\r\n  const rightOffset = this.columnWidths\r\n   .filter((_, i) => i >= this.visibleColumns.length - (this.stickyColumn.right || 0) && i > colIdx)\r\n   .reduce((a, b) => a + b, 0);\r\n  return {\r\n   '--sticky-left-offset': `${leftOffset}px`,\r\n   '--sticky-right-offset': `${rightOffset}px`,\r\n   'width': `${this.columnWidths[colIdx]}px`,\r\n   'minWidth': `${this.columnWidths[colIdx]}px`,\r\n   'maxWidth': `${this.columnWidths[colIdx]}px`,\r\n  };\r\n }\r\n\r\n private handleResize(index: number, event: MouseEvent) {\r\n  const startX = event.clientX;\r\n  const startWidth = this.columnWidths[index];\r\n\r\n  const handleMouseMove = (moveEvent: MouseEvent) => {\r\n   const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50);\r\n\r\n   this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));\r\n  };\r\n\r\n  const handleMouseUp = () => {\r\n   document.removeEventListener('mousemove', handleMouseMove);\r\n   document.removeEventListener('mouseup', handleMouseUp);\r\n  };\r\n\r\n  document.addEventListener('mousemove', handleMouseMove);\r\n  document.addEventListener('mouseup', handleMouseUp);\r\n }\r\n\r\n private getCellValue(column: SdTableColumn, row: Row) {\r\n  const { field, format, name } = column;\r\n  const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];\r\n  return format ? format(value, row) : value;\r\n }\r\n\r\n // ----- Render -----\r\n private renderHeader() {\r\n  return (\r\n   <thead>\r\n    <tr>\r\n     {this.selectable && (\r\n      <th\r\n       class=\"sd-th sd-th--selected\"\r\n       style={{\r\n        width: '52px',\r\n        minWidth: '52px',\r\n        maxWidth: '52px',\r\n       }}\r\n      >\r\n       <sd-checkbox\r\n        checked={this.isAllChecked}\r\n        disabled={!this.paginatedRows.length}\r\n        onSdChange={(e: CustomEvent<boolean | any[]>) => this.toggleSelectAll(e.detail)}\r\n       ></sd-checkbox>\r\n      </th>\r\n     )}\r\n     {this.visibleColumns.map((col, colIdx) => (\r\n      <th\r\n       key={col.name}\r\n       class={{\r\n        'sd-th': true,\r\n        'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),\r\n        'sticky-right': Boolean(\r\n         this.stickyColumn.right && colIdx >= this.visibleColumns.length - this.stickyColumn.right!,\r\n        ),\r\n        'sticky-left-edge': Boolean(\r\n         this.stickyColumn.left && colIdx === this.stickyColumn.left - 1,\r\n        ),\r\n        'sticky-right-edge': Boolean(\r\n         this.stickyColumn.right &&\r\n          colIdx === this.visibleColumns.length - this.stickyColumn.right!,\r\n        ),\r\n       }}\r\n       style={this.getStickyStyle(colIdx)}\r\n      >\r\n       <div class={`sd-th__content sd-th__content--${col.align || 'left'}`}>\r\n        <div class=\"sd-th__content--label\">{col.label}</div>\r\n\r\n        {col.usePageMoveIcon && <sd-icon name=\"pageMove\" size=\"12\" color=\"#006AC1\" />}\r\n\r\n        {col.tooltip && (\r\n         <sd-tooltip {...col.tooltipOptions}>\r\n          {col.tooltip.map(text => (\r\n           <div>{text}</div>\r\n          ))}\r\n         </sd-tooltip>\r\n        )}\r\n       </div>\r\n\r\n       {this.resizable && (\r\n        <div\r\n         class=\"sd-th__resizer\"\r\n         onMouseDown={(evt: MouseEvent) => this.handleResize(colIdx, evt)}\r\n        ></div>\r\n       )}\r\n      </th>\r\n     ))}\r\n    </tr>\r\n   </thead>\r\n  );\r\n }\r\n\r\n private renderBody() {\r\n  if (!this.paginatedRows.length)\r\n   return (\r\n    <tbody part=\"tbody-empty\">\r\n     <tr>\r\n      <td colSpan={this.visibleColumns.length + (this.selectable ? 1 : 0)}>{this.noDataLabel}</td>\r\n     </tr>\r\n    </tbody>\r\n   );\r\n\r\n  return (\r\n   <tbody>\r\n    {this.paginatedRows.map(row => (\r\n     <tr key={row[this.rowKey]} class=\"hover:bg-Grey_Lighten-6\">\r\n      {this.selectable && (\r\n       <td class=\"sd-td sd-td--selected\">\r\n        <sd-checkbox\r\n         checked={this.isRowSelected(row)}\r\n         disabled={!this.paginatedRows.length}\r\n         onSdChange={() => this.updateRowSelect(row)}\r\n        ></sd-checkbox>\r\n       </td>\r\n      )}\r\n      {this.visibleColumns.map((column, colIdx) => {\r\n       const rendered = this.bodyCellRenderer?.(column, row);\r\n\r\n       return (\r\n        <td\r\n         key={column.name}\r\n         part={`td-${column.name}`}\r\n         class={{\r\n          'sd-td': true,\r\n          [`sd-td--${column.align || 'left'}`]: true,\r\n          'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),\r\n          'sticky-right': Boolean(\r\n           this.stickyColumn.right &&\r\n            colIdx >= this.visibleColumns.length - this.stickyColumn.right!,\r\n          ),\r\n          'sticky-left-edge': Boolean(\r\n           this.stickyColumn.left && colIdx === this.stickyColumn.left - 1,\r\n          ),\r\n          'sticky-right-edge': Boolean(\r\n           this.stickyColumn.right &&\r\n            colIdx === this.visibleColumns.length - this.stickyColumn.right!,\r\n          ),\r\n         }}\r\n         style={this.getStickyStyle(colIdx)}\r\n        >\r\n         {rendered ? (\r\n          typeof rendered === 'string' ? (\r\n           <span innerHTML={rendered}></span>\r\n          ) : (\r\n           rendered\r\n          )\r\n         ) : (\r\n          this.getCellValue(column, row)\r\n         )}\r\n        </td>\r\n       );\r\n      })}\r\n     </tr>\r\n    ))}\r\n   </tbody>\r\n  );\r\n }\r\n\r\n render() {\r\n  return (\r\n   <Host>\r\n    <div class=\"sd-table__container\">\r\n     <div\r\n      class=\"sd-table__middle\"\r\n      style={{\r\n       '--table-height': this.height ? `${this.height}px` : 'auto',\r\n      }}\r\n     >\r\n      <table part=\"table\" class={this.sdTableClasses}>\r\n       {this.renderHeader()}\r\n\r\n       {this.renderBody()}\r\n      </table>\r\n     </div>\r\n\r\n     <div class=\"sd-table__bottom\"></div>\r\n    </div>\r\n    {this.pagination && this.innerRows.length > 0 && (\r\n     <div class=\"sd-table__pagination\">\r\n      <sd-pagination\r\n       currentPage={this.currentPage}\r\n       lastPage={this.lastPageNumber}\r\n       onPageChange={(e: CustomEvent<number>) => {\r\n        this.currentPage = e.detail;\r\n        this.sdPageChange.emit(this.currentPage);\r\n       }}\r\n      ></sd-pagination>\r\n     </div>\r\n    )}\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/sd-tag.entry.js

@@ -43,7 +43,7 @@ const SdTag = class {
     }
     render() {
         const tagClasses = this.getTagClasses();
-        return (h("span", { key: '90c0f33b8dff9bc649e29a466ed82d7fae08b853', class: tagClasses, style: {
+        return (h("span", { key: '374871546ce076a1f2f7100887df320260d7388c', class: tagClasses, style: {
                 '--tag-bg-color': this.bgColor,
                 '--tag-text-color': this.textColor,
             }, "aria-label": this.label || 'tag' }, this.renderContent()));

package/dist/esm/sd-tooltip-portal.entry.js

@@ -0,0 +1,156 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-F7bQTYmD.js';
+
+const SdTooltipPortal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sdClose = createEvent(this, "sdClose");
+    }
+    get el() { return getElement(this); }
+    to = 'body';
+    parentRef = null;
+    offset = [0, 0];
+    zIndex = 9999;
+    placement = 'bottom';
+    open = false;
+    sdClose;
+    container;
+    wrapper;
+    rafId;
+    isInsideClick = false;
+    resizeObserver;
+    mutationObserver;
+    static ARROW_SIZE = 11.2;
+    componentDidLoad() {
+        this.container = this.resolveContainer();
+        this.createWrapper();
+        this.moveSlotContent();
+        // DOM이 완전히 렌더링된 후 위치 계산
+        requestAnimationFrame(() => {
+            this.updatePosition();
+            if (this.wrapper) {
+                this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시
+            }
+        });
+        this.observeParent();
+    }
+    componentDidRender() {
+        if (!this.wrapper)
+            return;
+        // this.wrapper.style.display = this.open ? 'block' : 'none';
+        // if (this.open) this.updatePosition();
+        if (this.open) {
+            this.wrapper.style.display = 'block';
+            // RAF를 사용해서 다음 프레임에 위치 업데이트
+            requestAnimationFrame(() => {
+                this.updatePosition();
+                if (this.wrapper) {
+                    this.wrapper.style.visibility = 'visible';
+                }
+            });
+        }
+        else {
+            this.wrapper.style.display = 'none';
+            this.wrapper.style.visibility = 'hidden';
+        }
+    }
+    disconnectedCallback() {
+        if (this.rafId)
+            cancelAnimationFrame(this.rafId);
+        this.unobserveParent();
+        this.wrapper?.remove();
+    }
+    resolveContainer() {
+        const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
+        return el instanceof HTMLElement ? el : document.body;
+    }
+    createWrapper() {
+        this.wrapper = document.createElement('div');
+        Object.assign(this.wrapper.style, {
+            position: 'absolute',
+            zIndex: this.zIndex.toString(),
+            transition: 'opacity 0.4s',
+            top: '-9999px',
+            left: '-9999px',
+        });
+        this.container.appendChild(this.wrapper);
+    }
+    moveSlotContent() {
+        if (!this.wrapper)
+            return;
+        const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);
+        nodes.forEach(n => this.wrapper.appendChild(n));
+    }
+    // 위치 갱신 (scroll / resize)
+    updatePosition() {
+        if (this.rafId)
+            cancelAnimationFrame(this.rafId);
+        this.rafId = requestAnimationFrame(() => {
+            if (!this.parentRef || !this.wrapper)
+                return;
+            const rect = this.parentRef.getBoundingClientRect();
+            if (!rect.width && !rect.height)
+                return; // 요소가 보이지 않는 경우
+            const [offsetX, offsetY] = this.offset;
+            const ARROW_SIZE = SdTooltipPortal.ARROW_SIZE;
+            let top = 0;
+            let left = 0;
+            switch (this.placement) {
+                case 'top':
+                    top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;
+                    left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
+                    break;
+                case 'bottom':
+                    top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;
+                    left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
+                    break;
+                case 'left':
+                    top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
+                    left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;
+                    break;
+                case 'right':
+                    top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
+                    left = rect.right + window.scrollX + offsetX + ARROW_SIZE;
+                    break;
+            }
+            Object.assign(this.wrapper.style, {
+                top: `${top}px`,
+                left: `${left}px`,
+            });
+        });
+    }
+    // parentRef의 이동 / 크기변경 감지
+    observeParent() {
+        if (!this.parentRef)
+            return;
+        this.resizeObserver = new ResizeObserver(() => this.updatePosition());
+        this.resizeObserver.observe(this.parentRef);
+        this.mutationObserver = new MutationObserver(() => this.updatePosition());
+        this.mutationObserver.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    unobserveParent() {
+        this.resizeObserver?.disconnect();
+        this.mutationObserver?.disconnect();
+    }
+    // 외부 클릭 감지
+    handleMouseDown(e) {
+        this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target));
+    }
+    handleWindowClick(e) {
+        if (this.isInsideClick) {
+            this.isInsideClick = false;
+            return;
+        }
+        if (this.wrapper?.contains(e.target))
+            return;
+        this.sdClose.emit();
+    }
+    render() {
+        return h("slot", { key: 'ea3fc7fd112d453f3f58f6a736f583e75896b74c' });
+    }
+};
+
+export { SdTooltipPortal as sd_tooltip_portal };
+//# sourceMappingURL=sd-tooltip-portal.entry.js.map

package/dist/esm/sd-tooltip-portal.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-tooltip-portal.entry.js","sources":["src/components/sd-tooltip-portal/sd-tooltip-portal.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-tooltip-portal',\r\n shadow: true,\r\n})\r\nexport class SdTooltipPortal {\r\n @Element() el!: HTMLElement;\r\n @Prop() to: HTMLElement | string = 'body';\r\n @Prop() parentRef: HTMLElement | null = null;\r\n @Prop() offset: [number, number] = [0, 0];\r\n @Prop() zIndex: number = 9999;\r\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\r\n @Prop() open: boolean = false;\r\n\r\n @Event() sdClose!: EventEmitter<void>;\r\n\r\n private container?: HTMLElement;\r\n private wrapper?: HTMLElement;\r\n private rafId?: number;\r\n private isInsideClick = false;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n private mutationObserver?: MutationObserver;\r\n\r\n private static readonly ARROW_SIZE = 11.2;\r\n\r\n componentDidLoad() {\r\n  this.container = this.resolveContainer();\r\n  this.createWrapper();\r\n  this.moveSlotContent();\r\n\r\n  // DOM이 완전히 렌더링된 후 위치 계산\r\n  requestAnimationFrame(() => {\r\n   this.updatePosition();\r\n   if (this.wrapper) {\r\n    this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시\r\n   }\r\n  });\r\n\r\n  this.observeParent();\r\n }\r\n\r\n componentDidRender() {\r\n  if (!this.wrapper) return;\r\n\r\n  // this.wrapper.style.display = this.open ? 'block' : 'none';\r\n  // if (this.open) this.updatePosition();\r\n\r\n  if (this.open) {\r\n   this.wrapper.style.display = 'block';\r\n   // RAF를 사용해서 다음 프레임에 위치 업데이트\r\n   requestAnimationFrame(() => {\r\n    this.updatePosition();\r\n    if (this.wrapper) {\r\n     this.wrapper.style.visibility = 'visible';\r\n    }\r\n   });\r\n  } else {\r\n   this.wrapper.style.display = 'none';\r\n   this.wrapper.style.visibility = 'hidden';\r\n  }\r\n }\r\n\r\n disconnectedCallback() {\r\n  if (this.rafId) cancelAnimationFrame(this.rafId);\r\n  this.unobserveParent();\r\n  this.wrapper?.remove();\r\n }\r\n\r\n private resolveContainer(): HTMLElement {\r\n  const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\r\n  return el instanceof HTMLElement ? el : document.body;\r\n }\r\n\r\n private createWrapper() {\r\n  this.wrapper = document.createElement('div');\r\n  Object.assign(this.wrapper.style, {\r\n   position: 'absolute',\r\n   zIndex: this.zIndex.toString(),\r\n   transition: 'opacity 0.4s',\r\n   top: '-9999px',\r\n   left: '-9999px',\r\n  });\r\n  this.container!.appendChild(this.wrapper);\r\n }\r\n\r\n private moveSlotContent() {\r\n  if (!this.wrapper) return;\r\n  const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\r\n  nodes.forEach(n => this.wrapper!.appendChild(n));\r\n }\r\n\r\n // 위치 갱신 (scroll / resize)\r\n @Listen('scroll', { target: 'window' })\r\n @Listen('resize', { target: 'window' })\r\n updatePosition() {\r\n  if (this.rafId) cancelAnimationFrame(this.rafId);\r\n\r\n  this.rafId = requestAnimationFrame(() => {\r\n   if (!this.parentRef || !this.wrapper) return;\r\n\r\n   const rect = this.parentRef.getBoundingClientRect();\r\n   if (!rect.width && !rect.height) return; // 요소가 보이지 않는 경우\r\n\r\n   const [offsetX, offsetY] = this.offset;\r\n   const ARROW_SIZE = SdTooltipPortal.ARROW_SIZE;\r\n\r\n   let top = 0;\r\n   let left = 0;\r\n\r\n   switch (this.placement) {\r\n    case 'top':\r\n     top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;\r\n     left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n     break;\r\n\r\n    case 'bottom':\r\n     top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;\r\n     left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n     break;\r\n\r\n    case 'left':\r\n     top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n     left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;\r\n     break;\r\n\r\n    case 'right':\r\n     top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n     left = rect.right + window.scrollX + offsetX + ARROW_SIZE;\r\n     break;\r\n   }\r\n\r\n   Object.assign(this.wrapper!.style, {\r\n    top: `${top}px`,\r\n    left: `${left}px`,\r\n   });\r\n  });\r\n }\r\n\r\n // parentRef의 이동 / 크기변경 감지\r\n private observeParent() {\r\n  if (!this.parentRef) return;\r\n\r\n  this.resizeObserver = new ResizeObserver(() => this.updatePosition());\r\n  this.resizeObserver.observe(this.parentRef);\r\n\r\n  this.mutationObserver = new MutationObserver(() => this.updatePosition());\r\n  this.mutationObserver.observe(document.body, {\r\n   childList: true,\r\n   subtree: true,\r\n  });\r\n }\r\n\r\n private unobserveParent() {\r\n  this.resizeObserver?.disconnect();\r\n  this.mutationObserver?.disconnect();\r\n }\r\n\r\n // 외부 클릭 감지\r\n @Listen('mousedown', { target: 'window' })\r\n handleMouseDown(e: MouseEvent) {\r\n  this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target as Node));\r\n }\r\n\r\n @Listen('click', { target: 'window' })\r\n handleWindowClick(e: MouseEvent) {\r\n  if (this.isInsideClick) {\r\n   this.isInsideClick = false;\r\n   return;\r\n  }\r\n  if (this.wrapper?.contains(e.target as Node)) return;\r\n  this.sdClose.emit();\r\n }\r\n\r\n render() {\r\n  return <slot></slot>;\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/types/components/assets/event/Event16.d.ts

@@ -0,0 +1 @@
+export declare const Event16: (props: SVGProps) => any;

package/dist/types/components/assets/event/index.d.ts

@@ -0,0 +1,3 @@
+export declare const event: {
+    16: (props: SVGProps) => any;
+};

package/dist/types/components/assets/index.d.ts

@@ -1,4 +1,7 @@
 export declare const Icons: {
+    youtube: {
+        20: (props: SVGProps) => any;
+    };
     search: {
         8: (props: SVGProps) => any;
         10: (props: SVGProps) => any;
@@ -7,6 +10,17 @@ export declare const Icons: {
         20: (props: SVGProps) => any;
         24: (props: SVGProps) => any;
     };
+    pdf: {
+        8: (props: SVGProps) => any;
+        10: (props: SVGProps) => any;
+        12: (props: SVGProps) => any;
+        16: (props: SVGProps) => any;
+        20: (props: SVGProps) => any;
+        24: (props: SVGProps) => any;
+    };
+    notion: {
+        16: (props: SVGProps) => any;
+    };
     pageMove: {
         12: (props: SVGProps) => any;
     };
@@ -18,6 +32,9 @@ export declare const Icons: {
         20: (props: SVGProps) => any;
         24: (props: SVGProps) => any;
     };
+    event: {
+        16: (props: SVGProps) => any;
+    };
     date: {
         16: (props: SVGProps) => any;
     };

package/dist/types/components/assets/notion/Notion16.d.ts

@@ -0,0 +1 @@
+export declare const Notion16: (props: SVGProps) => any;

package/dist/types/components/assets/notion/index.d.ts

@@ -0,0 +1,3 @@
+export declare const notion: {
+    16: (props: SVGProps) => any;
+};

package/dist/types/components/assets/pdf/Pdf10.d.ts

@@ -0,0 +1 @@
+export declare const Pdf10: (props: SVGProps) => any;

package/dist/types/components/assets/pdf/Pdf12.d.ts

@@ -0,0 +1 @@
+export declare const Pdf12: (props: SVGProps) => any;

package/dist/types/components/assets/pdf/Pdf16.d.ts

@@ -0,0 +1 @@
+export declare const Pdf16: (props: SVGProps) => any;

package/dist/types/components/assets/pdf/Pdf20.d.ts

@@ -0,0 +1 @@
+export declare const Pdf20: (props: SVGProps) => any;

package/dist/types/components/assets/pdf/Pdf24.d.ts

@@ -0,0 +1 @@
+export declare const Pdf24: (props: SVGProps) => any;

package/dist/types/components/assets/pdf/Pdf8.d.ts

@@ -0,0 +1 @@
+export declare const Pdf8: (props: SVGProps) => any;

package/dist/types/components/assets/pdf/index.d.ts

@@ -0,0 +1,8 @@
+export declare const pdf: {
+    8: (props: SVGProps) => any;
+    10: (props: SVGProps) => any;
+    12: (props: SVGProps) => any;
+    16: (props: SVGProps) => any;
+    20: (props: SVGProps) => any;
+    24: (props: SVGProps) => any;
+};

package/dist/types/components/assets/youtube/Youtube20.d.ts

@@ -0,0 +1 @@
+export declare const Youtube20: (props: SVGProps) => any;

package/dist/types/components/assets/youtube/index.d.ts

@@ -0,0 +1,3 @@
+export declare const youtube: {
+    20: (props: SVGProps) => any;
+};

package/dist/types/components/sd-button/sd-button.d.ts

@@ -10,8 +10,12 @@ export declare class SdButton {
     disabled: boolean;
     type: 'button' | 'submit' | 'reset';
     icon?: IconName;
+    iconColor?: string;
+    iconSize?: number;
     iconRight?: IconName;
     noHover: boolean;
+    buttonStyle: StyleProps;
+    iconStyle: StyleProps;
     sdClick: EventEmitter<MouseEvent>;
     private handleClick;
     private getButtonClasses;

package/dist/types/components/sd-guide/sd-guide.d.ts

@@ -0,0 +1,25 @@
+export declare class SdGuide {
+    el: HTMLElement;
+    type: 'help' | 'pdf' | 'youtube' | 'notion' | 'event';
+    popupTitle: string;
+    message: string | string[];
+    guideUrl: string;
+    popupWidth?: number;
+    popupShow: boolean;
+    private guideRef?;
+    static guideTitle: {
+        help: string;
+        pdf: string;
+        youtube: string;
+        notion: string;
+        event: string;
+    };
+    private handleClickGuide;
+    private getGuideClasses;
+    private getGuideStyle;
+    private getGuidIcon;
+    closeDropdown: () => void;
+    render(): any;
+    renderListItem(message: string | string[], depth?: number): HTMLElement[];
+    renderLi: (message: string, depth: number) => any;
+}

package/dist/types/components/sd-icon/sd-icon.d.ts

@@ -9,6 +9,8 @@ export declare class SdIcon {
     rotate?: 0 | 90 | 180 | 270;
     /** 접근성을 위한 라벨 */
     label?: string;
+    iconStyle: StyleProps;
     private getIconClasses;
+    private get resolvedColor();
     render(): any;
 }

package/dist/types/components/sd-table/sd-table.d.ts

@@ -10,9 +10,7 @@ export interface SdTableColumn {
     visible?: boolean;
     usePageMoveIcon?: boolean;
     tooltip?: string[];
-    tooltipOptions?: {
-        [key: string]: any;
-    };
+    tooltipOptions?: Record<string, any>;
 }
 export interface Row {
     [key: string]: any;
@@ -25,7 +23,12 @@ export declare class SdTable {
     rowKey: string;
     selectable: boolean;
     resizable: boolean;
+    height?: number;
     stickyHeader: boolean;
+    stickyColumn: {
+        left?: number;
+        right?: number;
+    };
     noDataLabel: string;
     pagination?: {
         page: number;
@@ -36,33 +39,33 @@ export declare class SdTable {
     sdSelectChange: EventEmitter<Row[]>;
     sdPageChange: EventEmitter<number>;
     currentPage: number;
-    innerRows: {
-        [key: string]: any;
-    }[];
-    innerSelected: Set<{
-        [key: string]: any;
-    }>;
+    innerRows: Row[];
+    innerSelected: Set<Row>;
     columnWidths: number[];
-    watchColumns(newCols: SdTableColumn[]): void;
-    watchSelected(newSelected: Set<Row>): void;
-    watchPagination(newVal: {
+    scrolledLeft: boolean;
+    scrolledRight: boolean;
+    handleColumnsChange(newCols: SdTableColumn[]): void;
+    handleRowsChange(newRows: Row[]): void;
+    handleSelectedChange(newSelected: Set<Row>): void;
+    handlePaginationChange(newVal?: {
         page: number;
         rowsPerPage: number;
         lastPage?: number;
     } | undefined): void;
     componentWillLoad(): void;
+    componentDidLoad(): void;
+    private get visibleColumns();
     private get paginatedRows();
     private get lastPageNumber();
     private get sdTableClasses();
-    private get visibleColumns();
-    private updateRowSelect;
-    private get isAllChecked();
-    private get selectedKeyMap();
     private isRowSelected;
+    private updateRowSelect;
     private toggleSelectAll;
+    private get isAllChecked();
+    private getStickyStyle;
     private handleResize;
+    private getCellValue;
     private renderHeader;
-    private getRowData;
     private renderBody;
     render(): any;
 }