npm - @sellmate/design-system - Versions diffs - 0.0.0 → 0.0.1 - Mend

@sellmate/design-system 0.0.0 → 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (96) hide show

package/dist/cjs/sd-table.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-table.entry.cjs.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":["h"],"mappings":"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"}
1	+ {"version":3,"file":"sd-table.entry.cjs.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":["h","Host"],"mappings":"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"}

package/dist/cjs/sd-tag.cjs.entry.js CHANGED Viewed

@@ -45,7 +45,7 @@ const SdTag = class {
     }
     render() {
         const tagClasses = this.getTagClasses();
-        return (index.h("span", { key: '90c0f33b8dff9bc649e29a466ed82d7fae08b853', class: tagClasses, style: {
+        return (index.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/collection/components/sd-checkbox/sd-checkbox.js CHANGED Viewed

@@ -60,7 +60,7 @@ export class SdCheckbox {
         this.sdChange.emit(newValue);
     };
     render() {
-        return (h("label", { key: 'e760e88c168373b626e88eb6928351db2d06814f', class: this.getCheckboxClasses() }, h("input", { key: '7a672f8bb2c21c0766a176e16b534900bddd4516', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: this.handleChange }), h("div", { key: '1a8dfa49a5044ac7c6e94461dd6efb94d2773d6f', class: "sd-checkbox__bg", style: this.checkboxStyle }, this.isChecked ? h("sd-icon", { name: "check", size: 12, color: this.disabled ? '#888888' : 'white' }) : null), this.label && h("span", { key: '580a836825d4e3efc3261960eaa3a08f6d259145', class: "sd-checkbox__label" }, this.label)));
+        return (h("label", { key: '9c03212ed43f1b2d654b5bc51f3b3395117726d1', class: this.getCheckboxClasses() }, h("input", { key: '767ebdd2cd5cfc55a87d08238deb2097e840d15b', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: this.handleChange }), h("div", { key: '7ff4281881ab6bf2435eb20c267913972c17de74', class: "sd-checkbox__bg", style: this.checkboxStyle }, this.isChecked ? h("sd-icon", { name: "check", size: 12, color: this.disabled ? '#888888' : 'white' }) : null), this.label && h("span", { key: 'f1ab9b7a6c2e1107229e485cb22eba652a50c56d', class: "sd-checkbox__label" }, this.label)));
     }
     static get is() { return "sd-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sd-date-picker/sd-date-picker.js CHANGED Viewed

@@ -74,9 +74,9 @@ export class SdDatePicker {
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: 'ed22c291167d6f58359965e87e675ecc389ed27d', class: "sd-date-picker" }, h("sd-input", { key: 'b6ae29a87fc173d74662d41c058d86da99ffe33f', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
+        return (h(Host, { key: 'dbd67742832c1f9678485a6fafe793b8c19395f2', class: "sd-date-picker" }, h("sd-input", { key: '26b387b4e8c33d170635fdb0125f0894a12abfa6', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
                 margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '59cadea9188e4ee1fecd9d4ee8349b5d0f961c31', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '0df7999251fc02c84b2c9f05c3aa6902763edb88', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '73a8072467283d8f661e9028cc25fbc4eaf9a9e0', class: "sd-date-picker__menu" }, h("div", { key: '10f1e2c9c630173d99546ad38852767fc3c6f1c1', class: "sd-date-picker__header" }, h("div", { key: '47637f7f0aec7e731dced3c220820994c47d30ec', class: "year-nav" }, h("button", { key: 'b495c8cff4c9bc079dda84652a9c270a172f79af', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: 'c8fd0243a74eaf2c3173f474244a5689031eca21', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '1e4b33e5989c26914239952c5382a6e17a4f5d18', class: "year-nav__current" }, this.currentYear), h("button", { key: '702317c39b7aabfe7be001551c491c01c7ab9d76', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: 'a736c37a05978a0ef22f57dbcb6d259d96cbf7d8', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: 'eab84391c34fceadd69edeca1fdb9a45bc4e175b', class: "month-nav" }, h("button", { key: '13b2e9ebfce3e0f97f39dc7cf055868110ea23b0', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '95759c06454ab5d9ccda3c69e436304b2315fe0e', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '1d9652661b313c187b0bbfce80a3458328b32e62', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '9135f7e87128d047926a52afe01da1b478aa78b0', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'e6639e131b11e75f56b8c31517b2e4ac6c7f8e94', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: 'd245002d138a3fcf536b97b5dcaaa19a6e10ce68', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '15a57a6d69c0482c151d75d9688d2cf96986553d', class: "sd-date-picker__body" }, [
+            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '3c65f96a7c80f2dbf4649d5618cdf519114e23e8', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'b78942513d1c64f769459278590a4b87f0775526', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '626fa36202c8c5f2a751ac9bf6abed5e0381723f', class: "sd-date-picker__menu" }, h("div", { key: 'bd59b131f8f93d302150f36fb4c2310ef7cdfc9f', class: "sd-date-picker__header" }, h("div", { key: '3dc8d16ecf2876d0769b9adcda02d4fe836f3268', class: "year-nav" }, h("button", { key: 'c6f3df9d9544bce27b85022752cc5eaf9587ed39', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '1d8f98c51edee251cac8bba943a343f975b8a2bd', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '61bd8e35d4c2a9df14a639dd3c819c7ed76dbeaf', class: "year-nav__current" }, this.currentYear), h("button", { key: 'd25371e346c10874320eabb4676bc0c6da7c012c', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '5f5bd27d9913d10d149519ddad9897c85112c78a', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '6d7e4d48f57505a2222c05045eb1cb06c2300d8b', class: "month-nav" }, h("button", { key: '63f6797933af76b5878367b736f23f147d6ee156', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: 'feb2ec0c59c4736c513583c0b5e402ff5a543a4f', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'bcc888f53e0d1f820597c0dd11d79742551aaa61', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'c5d24783ef37dc24eaba8097836597b7b65afbf8', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '674211cfa9f75d11e03a18fd3c5565f474315f0a', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: 'c81c81032ea7272a4fb131c5e12dca6331874399', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '5a7f23318c89e9b9e644de4dd675d51fb222aa93', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js CHANGED Viewed

@@ -137,9 +137,9 @@ export class SdDateRangePicker {
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: '8295d8910e5abf4ab0f3174a1aeaec53d3ead44a', class: "sd-date-range-picker" }, h("sd-input", { key: '99d99a57714b854b0734ddb0c76beaea8fda1450', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
+        return (h(Host, { key: '408ebfe4aa4b4efa5954c4ff17b68cdb3f1461dc', class: "sd-date-range-picker" }, h("sd-input", { key: 'd972b04328bcd480c0e894324aa72d6f53dc2d2c', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
                 margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '9d3c0a074ec21e474b10344281b76cb4992c25bf', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '3964777d0aee33ec772d7edc1041f950d191db1f', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'd83bd847e939b7f30bf8df7cb6e9bb11364d7e70', class: "sd-date-range-picker__menu" }, h("div", { key: '573bdf93913131f4adcfc4b88b977c3d1a85facb', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'f68b395aca3bb29edf1349a4816367402be6ec7a', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '3455821789ce342728019468a47ba273600afaec', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'f54edaf7115e26005ef8c90c38aeb13330109811', class: "header-label" }, this.prevYear), h("button", { key: 'd125ddcef705da622695d2b651b29f1937b32d61', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '1102774699793fdc4ba5d5d98f7def967ce15f7d', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '1bef887154291161c9f9a7f98ef5e989de606a89', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            }, onClick: () => this.openMenu() }, h("sd-icon", { key: 'cab8030f513f8c21a4ce98541d8a151f683dd5ac', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '85f7c501c761fd65e78ddad2ec7ed0f4495d820b', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '476b0c448249146fbaabd407cbecc6a1661274d1', class: "sd-date-range-picker__menu" }, h("div", { key: '253e49de7d0f59e36e52b1bd56dae17a241be915', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'f883f76c05a2c8566fa5199e6e8baa9732c19a41', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '39a777b3ce984b96eda0bfb62773626385c05e18', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '87086582b252950a153db62876a508466a96c775', class: "header-label" }, this.prevYear), h("button", { key: '155482939ac63554d2d0d959c8055f9357c9bb1b', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: 'a18971fa1aa195450bff9d650ef6fee5afe294b4', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '58584b34903ca208b611f27b8639c36edee861f4', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date ===
                 this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), type: this.getDateBoxType(this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), isToday: today ===

package/dist/collection/components/sd-icon/sd-icon.js CHANGED Viewed

@@ -20,7 +20,7 @@ export class SdIcon {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (h("i", { key: '22187dcae433b8061e080f97eb9c798a097ae10f', class: this.getIconClasses() }, h(IconComponent, { key: '0eb660cb7d46855cf4e054d33be4f2b964c3de24', color: this.color })));
+        return (h("i", { key: '30977b51dcabd6e45df3cb9e56496bc87aecb25f', class: this.getIconClasses() }, h(IconComponent, { key: 'a4f46dfd37fdcb8655a89582bd33ad1f34d0a9b7', color: this.color })));
     }
     static get is() { return "sd-icon"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/sd-input/sd-input.js CHANGED Viewed

@@ -89,11 +89,11 @@ export class SdInput {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (h(Host, { key: 'fa343c7e8ef9913c1afb641967988743561c612a', style: inputWidth }, this.label && h("div", { key: 'ad1220351663e6ad454c4a5294f9e2022003c120', class: "sd-input__label" }, this.label), h("label", { key: '2ce9645a317d709988aeb81eb6a7d8db479cd5dd', class: {
+        return (h(Host, { key: 'b01d939e0fb4b9d524fff9683686d8d253a8eecf', style: inputWidth }, this.label && h("div", { key: '346385bdc560de391146f0c0ddd018456a37a61e', class: "sd-input__label" }, this.label), h("label", { key: '4cdc9831e793411f5706c5a1e1d50bb8c43f8785', class: {
                 'sd-input': true,
                 [this.getInputStatus()]: true,
                 'sd-input--barcode': !!this.barcode,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '7b9780262267abf2872fd12b2a4124d90c3b6e4a', name: "prefix" }), h("input", { key: '3e07dfd3ba2ea08bce7e981d70c2cabd4bc3f42f', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: '98cad28b73f6b9b9d84656d47a14ed7468ae8824', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '560ec33b375822cf88e29d759eb54176e0c5a593', name: "close", color: "#888", style: { marginRight: '-4px', marginLeft: '8px', cursor: 'pointer' }, onClick: () => {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: 'ecaa663e9f7187369fdb6176914d30b5f9ba58f1', name: "prefix" }), h("input", { key: 'a2ca59d9d382b3c6b0c4d60f7d1b3f010dd2309f', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: '6d7088d2963f9abd9f67fa46362e4704170cab92', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '316af2379845fdd28d64205fe004db14af57c620', name: "close", color: "#888", style: { marginRight: '-4px', marginLeft: '8px', cursor: 'pointer' }, onClick: () => {
                 this.internalValue = '';
                 this.sdChange?.emit(this.internalValue);
                 this.sdInput?.emit(this.internalValue);

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

@@ -73,12 +73,12 @@ export class SdPagination {
         }
     }
     render() {
-        return (h("div", { key: 'bfdf84cf7017a8c03818b49e37910600d054a6a4', class: this.paginationClasses }, h("div", { key: '941b419069a4e510c4eba45a5615960b7bce091b', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: '92c957c60ffeeeda3e63539f9c3cab2a095dbc7c', class: this.paginationClasses }, h("div", { key: '52ac01ba1fc359e4115b1e2e6e36a128d8e14872', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '2e6b8a0c9be36763c5ca3d040400a4e88bfc8d44', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '3546d87c8903e81bcdc63b06dd32bd6d2499e4fc', class: "append-btns" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,11 +31,11 @@ export class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: '7eaf12e3cf5530093c0357bd928d956442ffb16c' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: '2ba62338919c55d4a94276441987a166a14bff32', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '6f0da4c5d3924d37a4e8d36623fae620bdeb9ca1', class: {
+        return (h(Fragment, { key: '9aec040a3383939f677e753d9464fb59158d5222' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: '5f81b8619b7c89c24112c179b38d741521db5172', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '0bb3e6d03cdfbba23f6db385df69779468b3cfde', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: 'b011af453bd14103d820b58d2774313d5e9855d6', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'eb94e11a4e760bae02cd55c7e77cc73344ae345c' })), h("div", { key: 'a088dc687074decb819d066b39a465879dfae3f9', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '30c845a1b50a9237f6a7f685cd65aa4211fbf82b', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'd1c94716035cd7a1349e4249f2f4042c53091f3f', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '898eab4ec36a330b530a283e97238d89d52a23c6', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '08241065cbbc872c3b29dc90a4d55e37588fc0ec', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '2b011d6fb9c0b58e43fa136ff5e1c01e98848ec7', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, h("i", { key: 'c7d1c7cbe97c30e98f20a19714af784c2baeedbb', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'b6785978514bbc0c003ac31c1558887a5a12b61a' })), h("div", { key: '90b03b3e7d35df967c85e2a118241962ef38565b', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '3891421b76a7a497c79a5b991d6ba53260689875', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '18eeae75241b756f99bd905edf202249e4bc8127', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '3babbd30d59d9de39e57c4643d8c3d51c0e83fd5', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '9416d777768cec79799e32adc68fb7efece9f46d', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '87ca1c2934cf5417baccbd257f789afdfaad3785', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get is() { return "sd-popover"; }
     static get encapsulation() { return "shadow"; }

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

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

package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js CHANGED Viewed

@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h("div", { key: 'cd4584964378612508ce0dda478f26d7e1a4bc78', class: {
+        return (h("div", { key: '5ecd5d5c8b000e6b505be3cb198396871ac5a7d8', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

package/dist/collection/components/sd-table/sd-table.css CHANGED Viewed

@@ -1393,11 +1393,11 @@ textarea {
 .sd-table__container .sd-table__middle {
   overflow: auto;
   will-change: scroll-position;
-  height: 100%;
+  height: var(--table-height, auto);
 }
 .sd-table__container .sd-table__middle .sd-table {
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate;
   border-spacing: 0;
   table-layout: fixed;
 }
@@ -1414,6 +1414,69 @@ textarea {
   top: 0;
   z-index: 2;
 }
+.sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,
+.sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right {
+  position: sticky;
+  background-color: #f5faff;
+  z-index: 200 !important;
+}
+.sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,
+.sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right {
+  position: sticky;
+  background-color: white;
+  z-index: 100 !important;
+}
+.sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left {
+  left: var(--sticky-left-offset, 0);
+}
+.sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right {
+  right: var(--sticky-right-offset, 0);
+}
+.sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell {
+  position: sticky;
+  z-index: 102;
+  background-color: #f5faff;
+}
+.sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell {
+  position: sticky;
+  z-index: 101;
+  background-color: white;
+}
+.sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,
+.sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge {
+  overflow: visible;
+}
+.sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,
+.sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 100%;
+  right: -20px;
+  width: 20px;
+  height: 100%;
+  z-index: 101 !important;
+  box-shadow: inset 12px 0 20px -25px;
+  opacity: 1;
+  pointer-events: none;
+}
+.sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,
+.sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge {
+  overflow: visible;
+}
+.sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,
+.sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -20px;
+  width: 20px;
+  height: 100%;
+  z-index: 101 !important;
+  box-shadow: inset -12px 0 20px -25px;
+  opacity: 1;
+  pointer-events: none;
+}
 .sd-table__container .sd-table__middle .sd-table--no-data thead {
   opacity: 0.4;
 }