@sellmate/design-system 0.0.35 → 0.0.37

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 (153) hide show
  1. package/dist/cjs/sd-badge.cjs.entry.js +1 -1
  2. package/dist/cjs/sd-button_15.cjs.entry.js +18 -18
  3. package/dist/cjs/sd-card.cjs.entry.js +1 -1
  4. package/dist/cjs/sd-date-picker.cjs.entry.js +2 -2
  5. package/dist/cjs/sd-date-range-picker.cjs.entry.js +2 -2
  6. package/dist/cjs/sd-loading-spinner.cjs.entry.js +1 -1
  7. package/dist/cjs/sd-popover.cjs.entry.js +2 -2
  8. package/dist/cjs/sd-progress.cjs.entry.js +2 -2
  9. package/dist/cjs/sd-select-multiple.cjs.entry.js +2 -2
  10. package/dist/cjs/sd-select-option-group.cjs.entry.js +3 -3
  11. package/dist/cjs/sd-table-backup.cjs.entry.js +32 -24
  12. package/dist/cjs/sd-table-backup.entry.cjs.js.map +1 -1
  13. package/dist/cjs/sd-tag.cjs.entry.js +1 -1
  14. package/dist/cjs/sd-td.cjs.entry.js +2 -2
  15. package/dist/collection/collection-manifest.json +1 -1
  16. package/dist/collection/components/sd-badge/sd-badge.js +1 -1
  17. package/dist/collection/components/sd-card/sd-card.js +1 -1
  18. package/dist/collection/components/sd-date-picker/sd-date-picker.js +2 -2
  19. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +2 -2
  20. package/dist/collection/components/sd-guide/sd-guide.js +3 -3
  21. package/dist/collection/components/sd-icon/sd-icon.js +1 -1
  22. package/dist/collection/components/sd-input/sd-input.js +2 -2
  23. package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js +1 -1
  24. package/dist/collection/components/sd-pagination/sd-pagination.js +2 -2
  25. package/dist/collection/components/sd-popover/sd-popover.js +2 -2
  26. package/dist/collection/components/sd-portal/sd-portal.js +1 -1
  27. package/dist/collection/components/sd-progress/sd-progress.js +2 -2
  28. package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +1 -1
  29. package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +2 -2
  30. package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +3 -3
  31. package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +1 -1
  32. package/dist/collection/components/sd-table/sd-td/sd-td.js +2 -2
  33. package/dist/collection/components/sd-table/sd-th/sd-th.js +1 -1
  34. package/dist/collection/components/sd-table/sd-tr/sd-tr.js +1 -1
  35. package/dist/collection/components/sd-table-backup/sd-table-backup.css +244 -0
  36. package/dist/collection/components/sd-table-backup/sd-table-backup.js +711 -0
  37. package/dist/collection/components/sd-table-backup/sd-table-backup.js.map +1 -0
  38. package/dist/collection/components/sd-tag/sd-tag.js +1 -1
  39. package/dist/collection/components/sd-tooltip/sd-tooltip.js +4 -4
  40. package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js +1 -1
  41. package/dist/components/{p-BEDQ2CIp.js → p-BKIzbxHd.js} +5 -5
  42. package/dist/components/{p-BEDQ2CIp.js.map → p-BKIzbxHd.js.map} +1 -1
  43. package/dist/components/{p-BeBw4eSm.js → p-BKt1fz_c.js} +3 -3
  44. package/dist/components/{p-BeBw4eSm.js.map → p-BKt1fz_c.js.map} +1 -1
  45. package/dist/components/{p-Du8-vyL0.js → p-Biuws3x8.js} +3 -3
  46. package/dist/components/{p-Du8-vyL0.js.map → p-Biuws3x8.js.map} +1 -1
  47. package/dist/components/{p-CrmdI2cD.js → p-BoGQEY6a.js} +3 -3
  48. package/dist/components/{p-CrmdI2cD.js.map → p-BoGQEY6a.js.map} +1 -1
  49. package/dist/components/{p-BEq3cGoC.js → p-C3SqpMHk.js} +3 -3
  50. package/dist/components/{p-BEq3cGoC.js.map → p-C3SqpMHk.js.map} +1 -1
  51. package/dist/components/{p-B8lMIjWB.js → p-CEIyDJmm.js} +7 -7
  52. package/dist/components/{p-B8lMIjWB.js.map → p-CEIyDJmm.js.map} +1 -1
  53. package/dist/components/{p-ntW8MKYi.js → p-CZcwZjU1.js} +5 -5
  54. package/dist/components/{p-ntW8MKYi.js.map → p-CZcwZjU1.js.map} +1 -1
  55. package/dist/components/{p-BzdIpn5T.js → p-D-nkog81.js} +9 -9
  56. package/dist/components/{p-BzdIpn5T.js.map → p-D-nkog81.js.map} +1 -1
  57. package/dist/components/{p-D-s8kK6P.js → p-DMZNbNGd.js} +3 -3
  58. package/dist/components/{p-D-s8kK6P.js.map → p-DMZNbNGd.js.map} +1 -1
  59. package/dist/components/{p-ybbnPl4X.js → p-DV8AjnfD.js} +7 -7
  60. package/dist/components/{p-ybbnPl4X.js.map → p-DV8AjnfD.js.map} +1 -1
  61. package/dist/components/{p-CSnKPDQz.js → p-Dbeg4f0H.js} +5 -5
  62. package/dist/components/{p-CSnKPDQz.js.map → p-Dbeg4f0H.js.map} +1 -1
  63. package/dist/components/{p-CqpahWAy.js → p-DfLxcVkb.js} +3 -3
  64. package/dist/components/{p-CqpahWAy.js.map → p-DfLxcVkb.js.map} +1 -1
  65. package/dist/components/{p-5yzkkdZ2.js → p-bkzZLdB8.js} +3 -3
  66. package/dist/components/{p-5yzkkdZ2.js.map → p-bkzZLdB8.js.map} +1 -1
  67. package/dist/components/{p-GNK9vrin.js → p-nbx4dU8d.js} +3 -3
  68. package/dist/components/{p-GNK9vrin.js.map → p-nbx4dU8d.js.map} +1 -1
  69. package/dist/components/{p-BG0UE2wL.js → p-sZjPKctP.js} +3 -3
  70. package/dist/components/{p-BG0UE2wL.js.map → p-sZjPKctP.js.map} +1 -1
  71. package/dist/components/sd-badge.js +1 -1
  72. package/dist/components/sd-button.js +1 -1
  73. package/dist/components/sd-card.js +1 -1
  74. package/dist/components/sd-checkbox.js +1 -1
  75. package/dist/components/sd-date-picker.js +5 -5
  76. package/dist/components/sd-date-range-picker.js +5 -5
  77. package/dist/components/sd-guide.js +6 -6
  78. package/dist/components/sd-icon.js +1 -1
  79. package/dist/components/sd-input.js +1 -1
  80. package/dist/components/sd-loading-spinner.js +1 -1
  81. package/dist/components/sd-pagination.js +1 -1
  82. package/dist/components/sd-popover.js +5 -5
  83. package/dist/components/sd-portal.js +1 -1
  84. package/dist/components/sd-progress.js +2 -2
  85. package/dist/components/sd-select-multiple-group.js +5 -5
  86. package/dist/components/sd-select-multiple.js +7 -7
  87. package/dist/components/sd-select-option-group.js +1 -1
  88. package/dist/components/sd-select-option.js +1 -1
  89. package/dist/components/sd-select.js +1 -1
  90. package/dist/components/sd-table-backup.js +43 -35
  91. package/dist/components/sd-table-backup.js.map +1 -1
  92. package/dist/components/sd-table.js +13 -13
  93. package/dist/components/sd-tag.js +1 -1
  94. package/dist/components/sd-tbody.js +1 -1
  95. package/dist/components/sd-td.js +2 -2
  96. package/dist/components/sd-th.js +1 -1
  97. package/dist/components/sd-tooltip-portal.js +1 -1
  98. package/dist/components/sd-tooltip.js +1 -1
  99. package/dist/components/sd-tr.js +1 -1
  100. package/dist/design-system/design-system.esm.js +1 -1
  101. package/dist/design-system/{p-7e18d4cf.entry.js → p-01f47211.entry.js} +2 -2
  102. package/dist/design-system/{p-88745dfe.entry.js → p-0d4df4c3.entry.js} +2 -2
  103. package/dist/design-system/p-11d861ed.entry.js +2 -0
  104. package/dist/design-system/{p-d003ee3d.entry.js → p-22234255.entry.js} +2 -2
  105. package/dist/design-system/{p-78f90517.entry.js → p-3e682362.entry.js} +2 -2
  106. package/dist/design-system/p-648c4ab4.entry.js +2 -0
  107. package/dist/design-system/{p-d74bfbe4.entry.js → p-93718467.entry.js} +2 -2
  108. package/dist/design-system/{p-a72c4b0c.entry.js → p-b0f0a38e.entry.js} +2 -2
  109. package/dist/design-system/p-bbb3f844.entry.js +2 -0
  110. package/dist/design-system/{p-985be35d.entry.js.map → p-bbb3f844.entry.js.map} +1 -1
  111. package/dist/design-system/{p-01f44c51.entry.js → p-cc279370.entry.js} +2 -2
  112. package/dist/design-system/{p-8b60af66.entry.js → p-cde3982d.entry.js} +2 -2
  113. package/dist/design-system/{p-49f98f09.entry.js → p-d3bb6c6a.entry.js} +2 -2
  114. package/dist/design-system/p-fcd5eb87.entry.js +2 -0
  115. package/dist/design-system/p-fcd5eb87.entry.js.map +1 -0
  116. package/dist/design-system/sd-table-backup.entry.esm.js.map +1 -1
  117. package/dist/esm/sd-badge.entry.js +1 -1
  118. package/dist/esm/sd-button_15.entry.js +18 -18
  119. package/dist/esm/sd-card.entry.js +1 -1
  120. package/dist/esm/sd-date-picker.entry.js +2 -2
  121. package/dist/esm/sd-date-range-picker.entry.js +2 -2
  122. package/dist/esm/sd-loading-spinner.entry.js +1 -1
  123. package/dist/esm/sd-popover.entry.js +2 -2
  124. package/dist/esm/sd-progress.entry.js +2 -2
  125. package/dist/esm/sd-select-multiple.entry.js +2 -2
  126. package/dist/esm/sd-select-option-group.entry.js +3 -3
  127. package/dist/esm/sd-table-backup.entry.js +32 -24
  128. package/dist/esm/sd-table-backup.entry.js.map +1 -1
  129. package/dist/esm/sd-tag.entry.js +1 -1
  130. package/dist/esm/sd-td.entry.js +2 -2
  131. package/dist/types/components.d.ts +2 -2
  132. package/hydrate/index.js +71 -63
  133. package/hydrate/index.mjs +71 -63
  134. package/package.json +5 -3
  135. package/dist/collection/components/sd-table/sd-table-backup.js +0 -2743
  136. package/dist/collection/components/sd-table/sd-table-backup.js.map +0 -1
  137. package/dist/design-system/p-671a08a6.entry.js +0 -2
  138. package/dist/design-system/p-671a08a6.entry.js.map +0 -1
  139. package/dist/design-system/p-6a624672.entry.js +0 -2
  140. package/dist/design-system/p-985be35d.entry.js +0 -2
  141. package/dist/design-system/p-ef5ffaa2.entry.js +0 -2
  142. /package/dist/design-system/{p-7e18d4cf.entry.js.map → p-01f47211.entry.js.map} +0 -0
  143. /package/dist/design-system/{p-88745dfe.entry.js.map → p-0d4df4c3.entry.js.map} +0 -0
  144. /package/dist/design-system/{p-6a624672.entry.js.map → p-11d861ed.entry.js.map} +0 -0
  145. /package/dist/design-system/{p-d003ee3d.entry.js.map → p-22234255.entry.js.map} +0 -0
  146. /package/dist/design-system/{p-78f90517.entry.js.map → p-3e682362.entry.js.map} +0 -0
  147. /package/dist/design-system/{p-ef5ffaa2.entry.js.map → p-648c4ab4.entry.js.map} +0 -0
  148. /package/dist/design-system/{p-d74bfbe4.entry.js.map → p-93718467.entry.js.map} +0 -0
  149. /package/dist/design-system/{p-a72c4b0c.entry.js.map → p-b0f0a38e.entry.js.map} +0 -0
  150. /package/dist/design-system/{p-01f44c51.entry.js.map → p-cc279370.entry.js.map} +0 -0
  151. /package/dist/design-system/{p-8b60af66.entry.js.map → p-cde3982d.entry.js.map} +0 -0
  152. /package/dist/design-system/{p-49f98f09.entry.js.map → p-d3bb6c6a.entry.js.map} +0 -0
  153. /package/dist/types/components/{sd-table → sd-table-backup}/sd-table-backup.d.ts +0 -0
@@ -0,0 +1,711 @@
1
+ import { h, Host, } from "@stencil/core";
2
+ export class SdTable {
3
+ el;
4
+ columns;
5
+ rows;
6
+ selected = new Set();
7
+ rowKey = 'id';
8
+ selectable = false;
9
+ resizable = false;
10
+ width;
11
+ height;
12
+ stickyHeader = false;
13
+ stickyColumn = { left: 0, right: 0 };
14
+ noDataLabel = '데이터가 없습니다.';
15
+ isLoading = false;
16
+ pagination;
17
+ bodyCellRenderer;
18
+ useInternalPagination = false;
19
+ useRowsPerPageSelect = false;
20
+ rowsPerPageOption = [
21
+ { label: '10개씩 보기', value: 10 },
22
+ { label: '25개씩 보기', value: 25 },
23
+ { label: '50개씩 보기', value: 50 },
24
+ { label: '100개씩 보기', value: 100 },
25
+ ];
26
+ sdSelectChange;
27
+ sdPageChange;
28
+ sdRowsPerPageChange;
29
+ currentPage = this.pagination?.page || 1;
30
+ innerRows = [];
31
+ innerSelected = new Set();
32
+ columnWidths = [];
33
+ scrolledLeft = false;
34
+ scrolledRight = false;
35
+ handleColumnsChange(newCols) {
36
+ this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
37
+ }
38
+ handleRowsChange(newRows) {
39
+ this.innerRows = [...newRows];
40
+ }
41
+ handleSelectedChange(newSelected) {
42
+ this.innerSelected = new Set(newSelected);
43
+ }
44
+ handlePaginationChange(newVal) {
45
+ if (newVal?.page && newVal.page !== this.currentPage)
46
+ this.currentPage = newVal.page;
47
+ }
48
+ componentWillLoad() {
49
+ this.innerRows = [...(this.rows || [])];
50
+ this.innerSelected = new Set(this.selected);
51
+ this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));
52
+ if (this.pagination?.page) {
53
+ this.currentPage = this.pagination.page;
54
+ }
55
+ }
56
+ componentDidLoad() {
57
+ // SSR 환경 체크
58
+ if (typeof window === 'undefined')
59
+ return;
60
+ const middle = this.el.querySelector('.sd-table__middle');
61
+ if (!middle)
62
+ return;
63
+ const onScroll = () => {
64
+ const { scrollLeft, scrollWidth, clientWidth } = middle;
65
+ this.scrolledLeft = scrollLeft > 0;
66
+ this.scrolledRight = scrollLeft + clientWidth < scrollWidth;
67
+ };
68
+ middle.addEventListener('scroll', onScroll, { passive: true });
69
+ onScroll();
70
+ }
71
+ // ----- Derived getters -----
72
+ get visibleColumns() {
73
+ return this.columns.filter(col => col.visible !== false);
74
+ }
75
+ get paginatedRows() {
76
+ if (!this.pagination || !this.useInternalPagination)
77
+ return this.innerRows;
78
+ const { rowsPerPage = this.rows.length } = this.pagination || {};
79
+ const result = this.innerRows.slice((this.currentPage - 1) * rowsPerPage, this.currentPage * rowsPerPage);
80
+ return result;
81
+ }
82
+ get lastPageNumber() {
83
+ const { lastPage, rowsPerPage = this.rows.length } = this.pagination || {};
84
+ return lastPage ?? Math.max(1, Math.ceil(this.rows.length / rowsPerPage));
85
+ }
86
+ get sdTableClasses() {
87
+ return [
88
+ 'sd-table',
89
+ this.stickyHeader && 'sd-table--sticky-header',
90
+ this.selectable && 'sd-table--selectable',
91
+ this.resizable && 'sd-table--resizable',
92
+ !this.innerRows.length && 'sd-table--no-data',
93
+ ((this.stickyColumn?.left ?? 0) > 0 || (this.stickyColumn?.right ?? 0) > 0) &&
94
+ 'sd-table--sticky-column',
95
+ this.scrolledLeft && 'sd-table--scrolled-left',
96
+ this.scrolledRight && 'sd-table--scrolled-right',
97
+ ]
98
+ .filter(Boolean)
99
+ .join(' ');
100
+ }
101
+ // ----- Selection -----
102
+ isRowSelected(row) {
103
+ return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);
104
+ }
105
+ updateRowSelect(row) {
106
+ const selectedArray = Array.from(this.innerSelected);
107
+ const exists = this.isRowSelected(row);
108
+ const newSelected = exists
109
+ ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])
110
+ : [...selectedArray, row];
111
+ // 동일 상태면 set하지 않음 → 불필요 렌더 방지
112
+ if (newSelected.length === selectedArray.length)
113
+ return;
114
+ this.innerSelected = new Set(newSelected);
115
+ this.sdSelectChange.emit(Array.from(this.innerSelected));
116
+ }
117
+ toggleSelectAll(checked) {
118
+ if (checked) {
119
+ const pageRows = new Set([...this.paginatedRows]);
120
+ this.innerSelected = new Set([...this.innerSelected, ...pageRows]);
121
+ }
122
+ else {
123
+ const currentPageKeys = this.paginatedRows.map(r => r[this.rowKey]);
124
+ this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])));
125
+ }
126
+ this.sdSelectChange.emit(Array.from(this.innerSelected));
127
+ }
128
+ get isAllChecked() {
129
+ const total = this.paginatedRows.length;
130
+ const selectedCount = this.paginatedRows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[this.rowKey] === row[this.rowKey])).length;
131
+ if (selectedCount === 0)
132
+ return false; // 아무것도 안 선택됨
133
+ if (selectedCount === total)
134
+ return true; // 전부 선택됨
135
+ return null; // 일부만 선택됨
136
+ }
137
+ // ----- Helpers -----
138
+ getStickyStyle(colIdx) {
139
+ const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this.selectable ? 52 : 0);
140
+ const rightOffset = this.columnWidths
141
+ .filter((_, i) => i >= this.visibleColumns.length - (this.stickyColumn.right || 0) && i > colIdx)
142
+ .reduce((a, b) => a + b, 0);
143
+ return {
144
+ '--sticky-left-offset': `${leftOffset}px`,
145
+ '--sticky-right-offset': `${rightOffset}px`,
146
+ 'width': `${this.columnWidths[colIdx]}px`,
147
+ 'minWidth': `${this.columnWidths[colIdx]}px`,
148
+ 'maxWidth': `${this.columnWidths[colIdx]}px`,
149
+ };
150
+ }
151
+ handleResize(index, event) {
152
+ // SSR 환경 체크
153
+ if (typeof document === 'undefined')
154
+ return;
155
+ const startX = event.clientX;
156
+ const startWidth = this.columnWidths[index];
157
+ const handleMouseMove = (moveEvent) => {
158
+ const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50);
159
+ this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
160
+ };
161
+ const handleMouseUp = () => {
162
+ document.removeEventListener('mousemove', handleMouseMove);
163
+ document.removeEventListener('mouseup', handleMouseUp);
164
+ };
165
+ document.addEventListener('mousemove', handleMouseMove);
166
+ document.addEventListener('mouseup', handleMouseUp);
167
+ }
168
+ getCellValue(column, row) {
169
+ const { field, format, name } = column;
170
+ const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
171
+ return format ? format(value, row) : value;
172
+ }
173
+ // ----- Render -----
174
+ renderHeader() {
175
+ return (h("thead", null, h("tr", null, this.selectable && (h("th", { class: {
176
+ 'sd-th': true,
177
+ 'sd-th--selected': true,
178
+ 'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
179
+ }, style: {
180
+ '--sticky-left-offset': '0px',
181
+ } }, h("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))), this.visibleColumns.map((col, colIdx) => (h("th", { key: col.name, class: {
182
+ 'sd-th': true,
183
+ [`${col.thClass}`]: Boolean(col.thClass),
184
+ 'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),
185
+ 'sticky-right': Boolean(this.stickyColumn.right && colIdx >= this.visibleColumns.length - this.stickyColumn.right),
186
+ 'sticky-left-edge': Boolean(this.stickyColumn.left && colIdx === this.stickyColumn.left - 1),
187
+ 'sticky-right-edge': Boolean(this.stickyColumn.right &&
188
+ colIdx === this.visibleColumns.length - this.stickyColumn.right),
189
+ }, style: this.getStickyStyle(colIdx) }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(colIdx, evt) }))))))));
190
+ }
191
+ renderBody() {
192
+ return (h("tbody", { ...(!this.paginatedRows.length && { part: 'tbody-empty' }) }, this.isLoading && (h("div", { class: "sd-table__loading" }, h("sd-loading-spinner", null))), this.paginatedRows.length > 0 &&
193
+ this.paginatedRows.map((row, rowIdx) => (h("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6" }, this.selectable && (h("td", { class: {
194
+ 'sd-td': true,
195
+ 'sd-td--selected': true,
196
+ 'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
197
+ }, style: {
198
+ '--sticky-left-offset': '0px',
199
+ } }, h("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))), this.visibleColumns.map((column, colIdx) => {
200
+ const rendered = this.bodyCellRenderer?.(column, row);
201
+ return (h("td", { key: column.name, part: `td-${column.name}`, class: {
202
+ 'sd-td': true,
203
+ [`sd-td--${column.align || 'left'}`]: true,
204
+ 'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),
205
+ 'sticky-right': Boolean(this.stickyColumn.right &&
206
+ colIdx >= this.visibleColumns.length - this.stickyColumn.right),
207
+ 'sticky-left-edge': Boolean(this.stickyColumn.left && colIdx === this.stickyColumn.left - 1),
208
+ 'sticky-right-edge': Boolean(this.stickyColumn.right &&
209
+ colIdx === this.visibleColumns.length - this.stickyColumn.right),
210
+ [`${column.tdClass}`]: Boolean(column.tdClass),
211
+ }, style: this.getStickyStyle(colIdx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
212
+ }))))));
213
+ }
214
+ render() {
215
+ return (h(Host, { key: 'ee3eb5ad4f65daab37de226dad5dbb9f9a64c82d' }, h("div", { key: '3e05c9484a72cef763c46b1ebcda1832b89f8825', class: "sd-table__wrapper", style: {
216
+ '--table-width': this.width,
217
+ '--table-height': this.height,
218
+ } }, h("div", { key: 'e31f9c354d9c66eb3e4f5881ea0af7b435725977', class: "sd-table__container" }, h("div", { key: '630e1b8503fc9917b9dd19179aa08612ecd77b25', class: {
219
+ 'sd-table__middle': true,
220
+ 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
221
+ 'sd-table__middle--loading': this.isLoading,
222
+ } }, h("table", { key: 'b80c56b7445ffd197621c5040e27d05b6c97653e', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), h("div", { key: 'f6f5bcf2b67dde98c3bb2b766e834d72a2e0c9bc', class: "sd-table__bottom" }, !this.paginatedRows.length && (h("div", { key: 'a3a85d00cb08cb66af7afbf0a86a2ca9e5666870', class: "sd-table__no-data" }, h("slot", { key: 'c1610ef9b817d35e067d34746286861a24080f90', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: 'd449f2aa604b623c52cbec21dbb5f07c0c06098e', class: "sd-table__pagination" }, h("sd-pagination", { key: 'f051c1760a8742e9c793efd8f6cebacb6b51e1d8', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
223
+ if (!this.useInternalPagination) {
224
+ this.sdPageChange.emit(e.detail);
225
+ }
226
+ else {
227
+ this.currentPage = e.detail;
228
+ this.sdPageChange.emit(this.currentPage);
229
+ }
230
+ } }), this.useRowsPerPageSelect && (h("sd-select", { key: '81542b68c3019afa6e1d85d4d92ebf1ab8893646', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
231
+ const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;
232
+ if (!this.useInternalPagination) {
233
+ this.sdRowsPerPageChange.emit(changedRowsPerPage);
234
+ }
235
+ else {
236
+ const newRowsPerPage = Number(e.detail.value || 0);
237
+ let newLastPage = Math.max(1, Math.ceil(this.innerRows.length / newRowsPerPage));
238
+ let newCurrentPage = this.currentPage;
239
+ if (newCurrentPage > newLastPage) {
240
+ newCurrentPage = newLastPage;
241
+ }
242
+ this.pagination = {
243
+ page: newCurrentPage,
244
+ rowsPerPage: newRowsPerPage,
245
+ lastPage: newLastPage,
246
+ };
247
+ this.currentPage = newCurrentPage;
248
+ this.sdRowsPerPageChange.emit(changedRowsPerPage);
249
+ }
250
+ } })))))));
251
+ }
252
+ static get is() { return "sd-table-backup"; }
253
+ static get originalStyleUrls() {
254
+ return {
255
+ "$": ["sd-table-backup.scss"]
256
+ };
257
+ }
258
+ static get styleUrls() {
259
+ return {
260
+ "$": ["sd-table-backup.css"]
261
+ };
262
+ }
263
+ static get properties() {
264
+ return {
265
+ "columns": {
266
+ "type": "unknown",
267
+ "mutable": false,
268
+ "complexType": {
269
+ "original": "SdTableColumn[]",
270
+ "resolved": "SdTableColumn[]",
271
+ "references": {
272
+ "SdTableColumn": {
273
+ "location": "local",
274
+ "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-table-backup/sd-table-backup.tsx",
275
+ "id": "src/components/sd-table-backup/sd-table-backup.tsx::SdTableColumn"
276
+ }
277
+ }
278
+ },
279
+ "required": true,
280
+ "optional": false,
281
+ "docs": {
282
+ "tags": [],
283
+ "text": ""
284
+ },
285
+ "getter": false,
286
+ "setter": false
287
+ },
288
+ "rows": {
289
+ "type": "unknown",
290
+ "mutable": true,
291
+ "complexType": {
292
+ "original": "Row[]",
293
+ "resolved": "Row[]",
294
+ "references": {
295
+ "Row": {
296
+ "location": "local",
297
+ "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-table-backup/sd-table-backup.tsx",
298
+ "id": "src/components/sd-table-backup/sd-table-backup.tsx::Row"
299
+ }
300
+ }
301
+ },
302
+ "required": true,
303
+ "optional": false,
304
+ "docs": {
305
+ "tags": [],
306
+ "text": ""
307
+ },
308
+ "getter": false,
309
+ "setter": false
310
+ },
311
+ "selected": {
312
+ "type": "unknown",
313
+ "mutable": true,
314
+ "complexType": {
315
+ "original": "Set<Row>",
316
+ "resolved": "Set<Row>",
317
+ "references": {
318
+ "Set": {
319
+ "location": "global",
320
+ "id": "global::Set"
321
+ },
322
+ "Row": {
323
+ "location": "local",
324
+ "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-table-backup/sd-table-backup.tsx",
325
+ "id": "src/components/sd-table-backup/sd-table-backup.tsx::Row"
326
+ }
327
+ }
328
+ },
329
+ "required": false,
330
+ "optional": false,
331
+ "docs": {
332
+ "tags": [],
333
+ "text": ""
334
+ },
335
+ "getter": false,
336
+ "setter": false,
337
+ "defaultValue": "new Set()"
338
+ },
339
+ "rowKey": {
340
+ "type": "string",
341
+ "mutable": false,
342
+ "complexType": {
343
+ "original": "string",
344
+ "resolved": "string",
345
+ "references": {}
346
+ },
347
+ "required": false,
348
+ "optional": false,
349
+ "docs": {
350
+ "tags": [],
351
+ "text": ""
352
+ },
353
+ "getter": false,
354
+ "setter": false,
355
+ "reflect": false,
356
+ "attribute": "row-key",
357
+ "defaultValue": "'id'"
358
+ },
359
+ "selectable": {
360
+ "type": "boolean",
361
+ "mutable": false,
362
+ "complexType": {
363
+ "original": "boolean",
364
+ "resolved": "boolean",
365
+ "references": {}
366
+ },
367
+ "required": false,
368
+ "optional": false,
369
+ "docs": {
370
+ "tags": [],
371
+ "text": ""
372
+ },
373
+ "getter": false,
374
+ "setter": false,
375
+ "reflect": false,
376
+ "attribute": "selectable",
377
+ "defaultValue": "false"
378
+ },
379
+ "resizable": {
380
+ "type": "boolean",
381
+ "mutable": false,
382
+ "complexType": {
383
+ "original": "boolean",
384
+ "resolved": "boolean",
385
+ "references": {}
386
+ },
387
+ "required": false,
388
+ "optional": false,
389
+ "docs": {
390
+ "tags": [],
391
+ "text": ""
392
+ },
393
+ "getter": false,
394
+ "setter": false,
395
+ "reflect": false,
396
+ "attribute": "resizable",
397
+ "defaultValue": "false"
398
+ },
399
+ "width": {
400
+ "type": "string",
401
+ "mutable": false,
402
+ "complexType": {
403
+ "original": "string",
404
+ "resolved": "string | undefined",
405
+ "references": {}
406
+ },
407
+ "required": false,
408
+ "optional": true,
409
+ "docs": {
410
+ "tags": [],
411
+ "text": ""
412
+ },
413
+ "getter": false,
414
+ "setter": false,
415
+ "reflect": false,
416
+ "attribute": "width"
417
+ },
418
+ "height": {
419
+ "type": "string",
420
+ "mutable": false,
421
+ "complexType": {
422
+ "original": "string",
423
+ "resolved": "string | undefined",
424
+ "references": {}
425
+ },
426
+ "required": false,
427
+ "optional": true,
428
+ "docs": {
429
+ "tags": [],
430
+ "text": ""
431
+ },
432
+ "getter": false,
433
+ "setter": false,
434
+ "reflect": false,
435
+ "attribute": "height"
436
+ },
437
+ "stickyHeader": {
438
+ "type": "boolean",
439
+ "mutable": false,
440
+ "complexType": {
441
+ "original": "boolean",
442
+ "resolved": "boolean",
443
+ "references": {}
444
+ },
445
+ "required": false,
446
+ "optional": false,
447
+ "docs": {
448
+ "tags": [],
449
+ "text": ""
450
+ },
451
+ "getter": false,
452
+ "setter": false,
453
+ "reflect": false,
454
+ "attribute": "sticky-header",
455
+ "defaultValue": "false"
456
+ },
457
+ "stickyColumn": {
458
+ "type": "unknown",
459
+ "mutable": false,
460
+ "complexType": {
461
+ "original": "{ left?: number; right?: number }",
462
+ "resolved": "{ left?: number | undefined; right?: number | undefined; }",
463
+ "references": {}
464
+ },
465
+ "required": false,
466
+ "optional": false,
467
+ "docs": {
468
+ "tags": [],
469
+ "text": ""
470
+ },
471
+ "getter": false,
472
+ "setter": false,
473
+ "defaultValue": "{ left: 0, right: 0 }"
474
+ },
475
+ "noDataLabel": {
476
+ "type": "string",
477
+ "mutable": false,
478
+ "complexType": {
479
+ "original": "string",
480
+ "resolved": "string",
481
+ "references": {}
482
+ },
483
+ "required": false,
484
+ "optional": false,
485
+ "docs": {
486
+ "tags": [],
487
+ "text": ""
488
+ },
489
+ "getter": false,
490
+ "setter": false,
491
+ "reflect": false,
492
+ "attribute": "no-data-label",
493
+ "defaultValue": "'\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.'"
494
+ },
495
+ "isLoading": {
496
+ "type": "boolean",
497
+ "mutable": false,
498
+ "complexType": {
499
+ "original": "boolean",
500
+ "resolved": "boolean",
501
+ "references": {}
502
+ },
503
+ "required": false,
504
+ "optional": false,
505
+ "docs": {
506
+ "tags": [],
507
+ "text": ""
508
+ },
509
+ "getter": false,
510
+ "setter": false,
511
+ "reflect": false,
512
+ "attribute": "is-loading",
513
+ "defaultValue": "false"
514
+ },
515
+ "pagination": {
516
+ "type": "unknown",
517
+ "mutable": false,
518
+ "complexType": {
519
+ "original": "{\n page: number;\n rowsPerPage: number;\n lastPage?: number;\n }",
520
+ "resolved": "undefined | { page: number; rowsPerPage: number; lastPage?: number | undefined; }",
521
+ "references": {}
522
+ },
523
+ "required": false,
524
+ "optional": true,
525
+ "docs": {
526
+ "tags": [],
527
+ "text": ""
528
+ },
529
+ "getter": false,
530
+ "setter": false
531
+ },
532
+ "bodyCellRenderer": {
533
+ "type": "unknown",
534
+ "mutable": false,
535
+ "complexType": {
536
+ "original": "(\n column: SdTableColumn,\n row: Row,\n ) => HTMLElement | string | null | undefined",
537
+ "resolved": "((column: SdTableColumn, row: Row) => string | HTMLElement | null | undefined) | undefined",
538
+ "references": {
539
+ "SdTableColumn": {
540
+ "location": "local",
541
+ "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-table-backup/sd-table-backup.tsx",
542
+ "id": "src/components/sd-table-backup/sd-table-backup.tsx::SdTableColumn"
543
+ },
544
+ "Row": {
545
+ "location": "local",
546
+ "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-table-backup/sd-table-backup.tsx",
547
+ "id": "src/components/sd-table-backup/sd-table-backup.tsx::Row"
548
+ },
549
+ "HTMLElement": {
550
+ "location": "global",
551
+ "id": "global::HTMLElement"
552
+ }
553
+ }
554
+ },
555
+ "required": false,
556
+ "optional": true,
557
+ "docs": {
558
+ "tags": [],
559
+ "text": ""
560
+ },
561
+ "getter": false,
562
+ "setter": false
563
+ },
564
+ "useInternalPagination": {
565
+ "type": "boolean",
566
+ "mutable": false,
567
+ "complexType": {
568
+ "original": "boolean",
569
+ "resolved": "boolean",
570
+ "references": {}
571
+ },
572
+ "required": false,
573
+ "optional": false,
574
+ "docs": {
575
+ "tags": [],
576
+ "text": ""
577
+ },
578
+ "getter": false,
579
+ "setter": false,
580
+ "reflect": false,
581
+ "attribute": "use-internal-pagination",
582
+ "defaultValue": "false"
583
+ },
584
+ "useRowsPerPageSelect": {
585
+ "type": "boolean",
586
+ "mutable": false,
587
+ "complexType": {
588
+ "original": "boolean",
589
+ "resolved": "boolean",
590
+ "references": {}
591
+ },
592
+ "required": false,
593
+ "optional": false,
594
+ "docs": {
595
+ "tags": [],
596
+ "text": ""
597
+ },
598
+ "getter": false,
599
+ "setter": false,
600
+ "reflect": false,
601
+ "attribute": "use-rows-per-page-select",
602
+ "defaultValue": "false"
603
+ },
604
+ "rowsPerPageOption": {
605
+ "type": "unknown",
606
+ "mutable": false,
607
+ "complexType": {
608
+ "original": "SelectOption[]",
609
+ "resolved": "SelectOption[]",
610
+ "references": {
611
+ "SelectOption": {
612
+ "location": "import",
613
+ "path": "../sd-select/sd-select",
614
+ "id": "src/components/sd-select/sd-select.tsx::SelectOption"
615
+ }
616
+ }
617
+ },
618
+ "required": false,
619
+ "optional": false,
620
+ "docs": {
621
+ "tags": [],
622
+ "text": ""
623
+ },
624
+ "getter": false,
625
+ "setter": false,
626
+ "defaultValue": "[\n { label: '10\uAC1C\uC529 \uBCF4\uAE30', value: 10 },\n { label: '25\uAC1C\uC529 \uBCF4\uAE30', value: 25 },\n { label: '50\uAC1C\uC529 \uBCF4\uAE30', value: 50 },\n { label: '100\uAC1C\uC529 \uBCF4\uAE30', value: 100 },\n ]"
627
+ }
628
+ };
629
+ }
630
+ static get states() {
631
+ return {
632
+ "currentPage": {},
633
+ "innerRows": {},
634
+ "innerSelected": {},
635
+ "columnWidths": {},
636
+ "scrolledLeft": {},
637
+ "scrolledRight": {}
638
+ };
639
+ }
640
+ static get events() {
641
+ return [{
642
+ "method": "sdSelectChange",
643
+ "name": "sdSelectChange",
644
+ "bubbles": true,
645
+ "cancelable": true,
646
+ "composed": true,
647
+ "docs": {
648
+ "tags": [],
649
+ "text": ""
650
+ },
651
+ "complexType": {
652
+ "original": "Row[]",
653
+ "resolved": "Row[]",
654
+ "references": {
655
+ "Row": {
656
+ "location": "local",
657
+ "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-table-backup/sd-table-backup.tsx",
658
+ "id": "src/components/sd-table-backup/sd-table-backup.tsx::Row"
659
+ }
660
+ }
661
+ }
662
+ }, {
663
+ "method": "sdPageChange",
664
+ "name": "sdPageChange",
665
+ "bubbles": true,
666
+ "cancelable": true,
667
+ "composed": true,
668
+ "docs": {
669
+ "tags": [],
670
+ "text": ""
671
+ },
672
+ "complexType": {
673
+ "original": "number",
674
+ "resolved": "number",
675
+ "references": {}
676
+ }
677
+ }, {
678
+ "method": "sdRowsPerPageChange",
679
+ "name": "sdRowsPerPageChange",
680
+ "bubbles": true,
681
+ "cancelable": true,
682
+ "composed": true,
683
+ "docs": {
684
+ "tags": [],
685
+ "text": ""
686
+ },
687
+ "complexType": {
688
+ "original": "number",
689
+ "resolved": "number",
690
+ "references": {}
691
+ }
692
+ }];
693
+ }
694
+ static get elementRef() { return "el"; }
695
+ static get watchers() {
696
+ return [{
697
+ "propName": "columns",
698
+ "methodName": "handleColumnsChange"
699
+ }, {
700
+ "propName": "rows",
701
+ "methodName": "handleRowsChange"
702
+ }, {
703
+ "propName": "selected",
704
+ "methodName": "handleSelectedChange"
705
+ }, {
706
+ "propName": "pagination",
707
+ "methodName": "handlePaginationChange"
708
+ }];
709
+ }
710
+ }
711
+ //# sourceMappingURL=sd-table-backup.js.map