@sellmate/design-system 1.7.3 → 1.8.0

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 (43) hide show
  1. package/dist/cjs/{sanitize-inline-html-BZCCwH_U.js → sanitize-inline-html-CRCAeQ46.js} +28 -2
  2. package/dist/cjs/sd-callout.cjs.entry.js +2 -2
  3. package/dist/cjs/sd-confirm-modal_2.cjs.entry.js +1 -1
  4. package/dist/cjs/sd-dropdown-button.cjs.entry.js +1 -1
  5. package/dist/cjs/sd-guide.cjs.entry.js +1 -1
  6. package/dist/cjs/sd-pagination_4.cjs.entry.js +0 -2
  7. package/dist/cjs/sd-table.cjs.entry.js +14 -12
  8. package/dist/collection/components/sd-callout/sd-callout.css +2 -2
  9. package/dist/collection/components/sd-table/sd-table.css +3 -2
  10. package/dist/collection/components/sd-table/sd-table.js +13 -11
  11. package/dist/collection/components/sd-table/sd-tr/sd-tr.js +0 -2
  12. package/dist/collection/utils/html/sanitize-inline-html.js +28 -2
  13. package/dist/components/p-BE4tnQ2Z.js +1 -0
  14. package/dist/components/{p-CwRItc2J.js → p-Bx9dlLbs.js} +1 -1
  15. package/dist/components/p-gqfJ-KUj.js +1 -0
  16. package/dist/components/sd-callout.js +1 -1
  17. package/dist/components/sd-confirm-modal.js +1 -1
  18. package/dist/components/sd-dropdown-button.js +1 -1
  19. package/dist/components/sd-guide.js +1 -1
  20. package/dist/components/sd-modal-container.js +1 -1
  21. package/dist/components/sd-table.js +1 -1
  22. package/dist/components/sd-tr.js +1 -1
  23. package/dist/design-system/design-system.esm.js +1 -1
  24. package/dist/design-system/{p-c73cadc7.entry.js → p-1632a28d.entry.js} +1 -1
  25. package/dist/design-system/{p-bd4e5141.entry.js → p-8528ba1e.entry.js} +1 -1
  26. package/dist/design-system/p-BE4tnQ2Z.js +1 -0
  27. package/dist/design-system/{p-969665c0.entry.js → p-aa28712a.entry.js} +1 -1
  28. package/dist/design-system/{p-54086285.entry.js → p-cf685d90.entry.js} +1 -1
  29. package/dist/design-system/{p-78c2fd6d.entry.js → p-db826b91.entry.js} +1 -1
  30. package/dist/design-system/{p-2d3d25bd.entry.js → p-eb18d812.entry.js} +1 -1
  31. package/dist/esm/{sanitize-inline-html-DopVneZA.js → sanitize-inline-html-BE4tnQ2Z.js} +28 -2
  32. package/dist/esm/sd-callout.entry.js +2 -2
  33. package/dist/esm/sd-confirm-modal_2.entry.js +1 -1
  34. package/dist/esm/sd-dropdown-button.entry.js +1 -1
  35. package/dist/esm/sd-guide.entry.js +1 -1
  36. package/dist/esm/sd-pagination_4.entry.js +0 -2
  37. package/dist/esm/sd-table.entry.js +14 -12
  38. package/hydrate/index.js +43 -17
  39. package/hydrate/index.mjs +43 -17
  40. package/package.json +1 -1
  41. package/dist/components/p-DopVneZA.js +0 -1
  42. package/dist/components/p-_zllPZMm.js +0 -1
  43. package/dist/design-system/p-DopVneZA.js +0 -1
package/hydrate/index.js CHANGED
@@ -7029,7 +7029,14 @@ const TYPE_ICON = {
7029
7029
  danger: 'warningFill',
7030
7030
  };
7031
7031
 
7032
- const ALLOWED_INLINE_TAGS = new Set(['B', 'STRONG', 'I', 'EM', 'BR', 'SPAN']);
7032
+ const ALLOWED_INLINE_TAGS = new Set(['A', 'B', 'STRONG', 'I', 'EM', 'BR', 'SPAN']);
7033
+ // 태그별 허용 속성. 미등록 태그는 COMMON_ALLOWED_ATTRS만 적용
7034
+ const ALLOWED_ATTRS_BY_TAG = {
7035
+ A: new Set(['href', 'target', 'rel', 'class']),
7036
+ };
7037
+ const COMMON_ALLOWED_ATTRS = new Set(['class']);
7038
+ // javascript:, data: 등 위험 프로토콜 차단 — 상대 URL과 안전한 스킴만 허용
7039
+ const SAFE_HREF_RE = /^(https?:|mailto:|tel:|\/|#|\.)/i;
7033
7040
  const DROP_CONTENT_TAGS = new Set([
7034
7041
  'SCRIPT',
7035
7042
  'STYLE',
@@ -7068,8 +7075,27 @@ const sanitizeNode = (node, doc) => {
7068
7075
  return;
7069
7076
  }
7070
7077
  Array.from(element.childNodes).forEach(child => sanitizeNode(child));
7071
- Array.from(element.attributes).forEach(attr => element.removeAttribute(attr.name));
7072
7078
  if (ALLOWED_INLINE_TAGS.has(tagName)) {
7079
+ // React HTML 문자열 호환: className → class 정규화
7080
+ if (element.hasAttribute('className')) {
7081
+ const val = element.getAttribute('className');
7082
+ element.removeAttribute('className');
7083
+ if (!element.hasAttribute('class')) {
7084
+ element.setAttribute('class', val);
7085
+ }
7086
+ }
7087
+ const allowedAttrs = ALLOWED_ATTRS_BY_TAG[tagName] ?? COMMON_ALLOWED_ATTRS;
7088
+ Array.from(element.attributes).forEach(attr => {
7089
+ if (!allowedAttrs.has(attr.name)) {
7090
+ element.removeAttribute(attr.name);
7091
+ }
7092
+ });
7093
+ if (tagName === 'A') {
7094
+ const href = element.getAttribute('href');
7095
+ if (href !== null && href !== '' && !SAFE_HREF_RE.test(href)) {
7096
+ element.removeAttribute('href');
7097
+ }
7098
+ }
7073
7099
  return;
7074
7100
  }
7075
7101
  const parent = element.parentNode;
@@ -7091,7 +7117,7 @@ const sanitizeInlineHtml = (value) => {
7091
7117
  return template.innerHTML;
7092
7118
  };
7093
7119
 
7094
- const sdCalloutCss = () => `@charset "UTF-8";sd-callout{display:block;width:fit-content}sd-callout .sd-callout{display:inline-flex;align-items:stretch;width:fit-content;border:var(--sd-callout-border-width) solid var(--sd-callout-border);border-radius:var(--sd-callout-radius);background-color:var(--sd-callout-bg);color:var(--sd-callout-content);overflow:hidden}sd-callout .sd-callout__title{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;gap:var(--sd-callout-title-gap);padding:8px var(--sd-callout-title-padding-x);background-color:var(--sd-callout-title-bg);color:var(--sd-callout-title-color);font-family:var(--sd-callout-title-font-family);font-size:var(--sd-callout-title-font-size);font-weight:var(--sd-callout-title-font-weight);line-height:var(--sd-callout-title-line-height);flex-shrink:0}sd-callout .sd-callout__title-text{white-space:nowrap}sd-callout .sd-callout__body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:var(--sd-callout-body-gap);padding:var(--sd-callout-body-padding-y) var(--sd-callout-body-padding-x);font-family:var(--sd-callout-body-font-family);font-size:var(--sd-callout-body-font-size);font-weight:var(--sd-callout-body-font-weight);line-height:var(--sd-callout-body-line-height)}sd-callout .sd-callout__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;justify-content:center;gap:var(--sd-callout-body-gap)}sd-callout .sd-callout__list__item{display:flex;align-items:flex-start;color:var(--sd-callout-content)}sd-callout .sd-callout__list__item p{margin:0;padding:0;flex:1;min-width:0;word-break:break-word}sd-callout .sd-callout__list__item::before{display:block;flex-shrink:0;text-align:center;color:var(--sd-callout-content);font-size:var(--sd-callout-body-font-size);font-weight:var(--sd-callout-body-font-weight);line-height:var(--sd-callout-body-line-height)}sd-callout .sd-callout__list__item--depth-1::before{content:"-";width:24px}sd-callout .sd-callout__list__item--depth-2{padding-left:32px}sd-callout .sd-callout__list__item--depth-2::before{content:"•";width:24px}`;
7120
+ const sdCalloutCss = () => `@charset "UTF-8";sd-callout{display:block;width:100%}sd-callout .sd-callout{display:inline-flex;align-items:stretch;width:inherit;border:var(--sd-callout-border-width) solid var(--sd-callout-border);border-radius:var(--sd-callout-radius);background-color:var(--sd-callout-bg);color:var(--sd-callout-content);overflow:hidden}sd-callout .sd-callout__title{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;gap:var(--sd-callout-title-gap);padding:8px var(--sd-callout-title-padding-x);background-color:var(--sd-callout-title-bg);color:var(--sd-callout-title-color);font-family:var(--sd-callout-title-font-family);font-size:var(--sd-callout-title-font-size);font-weight:var(--sd-callout-title-font-weight);line-height:var(--sd-callout-title-line-height);flex-shrink:0}sd-callout .sd-callout__title-text{white-space:nowrap}sd-callout .sd-callout__body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:var(--sd-callout-body-gap);padding:var(--sd-callout-body-padding-y) var(--sd-callout-body-padding-x);font-family:var(--sd-callout-body-font-family);font-size:var(--sd-callout-body-font-size);font-weight:var(--sd-callout-body-font-weight);line-height:var(--sd-callout-body-line-height)}sd-callout .sd-callout__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;justify-content:center;gap:var(--sd-callout-body-gap)}sd-callout .sd-callout__list__item{display:flex;align-items:flex-start;color:var(--sd-callout-content)}sd-callout .sd-callout__list__item p{margin:0;padding:0;flex:1;min-width:0;word-break:break-word}sd-callout .sd-callout__list__item::before{display:block;flex-shrink:0;text-align:center;color:var(--sd-callout-content);font-size:var(--sd-callout-body-font-size);font-weight:var(--sd-callout-body-font-weight);line-height:var(--sd-callout-body-line-height)}sd-callout .sd-callout__list__item--depth-1::before{content:"-";width:24px}sd-callout .sd-callout__list__item--depth-2{padding-left:32px}sd-callout .sd-callout__list__item--depth-2::before{content:"•";width:24px}`;
7095
7121
 
7096
7122
  class SdCallout {
7097
7123
  constructor(hostRef) {
@@ -14749,7 +14775,7 @@ const ICON_DEFAULT_COLOR = {
14749
14775
  const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
14750
14776
  const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
14751
14777
 
14752
- const sdTableCss = () => `sd-table,:host{display:block;width:100%;max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:var(--table-height, 100%);width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:var(--table-container-height, 400px);border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--use-top{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__scroll-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;top:36px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data-header-overlay{position:absolute;top:0;left:0;right:0;height:36px;background:rgba(255, 255, 255, 0.6);z-index:210;pointer-events:none}.sd-table__no-data-content{pointer-events:auto;min-height:60px;width:100%;display:flex;align-items:center;justify-content:center}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
14778
+ const sdTableCss = () => `sd-table,:host{display:block;width:100%;height:var(--table-host-height);max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:100%;width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:calc(100% - var(--pagination-height, 0px));border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--use-top{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__scroll-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;top:36px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data-header-overlay{position:absolute;top:0;left:0;right:0;height:36px;background:rgba(255, 255, 255, 0.6);z-index:210;pointer-events:none}.sd-table__no-data-content{pointer-events:auto;min-height:60px;width:100%;display:flex;align-items:center;justify-content:center}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
14753
14779
 
14754
14780
  class SdTable {
14755
14781
  constructor(hostRef) {
@@ -15555,9 +15581,11 @@ class SdTable {
15555
15581
  const isNoData = this.rowCount === 0 && !this.isLoading;
15556
15582
  const paginationHeight = this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0;
15557
15583
  const noDataTotalHeight = 36 + this.noDataBodyHeight;
15558
- const effectiveTableHeight = isNoData
15559
- ? `max(${this.height || '96px'}, ${noDataTotalHeight}px)`
15560
- : this.height || '100%';
15584
+ const hostHeight = isNoData
15585
+ ? this.height !== undefined
15586
+ ? `max(${this.height}, ${noDataTotalHeight}px)`
15587
+ : `max(${noDataTotalHeight}px, 100%)`
15588
+ : (this.height ?? '100%');
15561
15589
  const hostStyle = {
15562
15590
  '--table-radius': `${TABLE_RADIUS}px`,
15563
15591
  '--table-border-color': TABLE_BORDER.color,
@@ -15568,26 +15596,26 @@ class SdTable {
15568
15596
  '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
15569
15597
  '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
15570
15598
  '--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
15599
+ '--table-host-height': hostHeight,
15571
15600
  };
15572
- return (hAsync(Host, { key: '4596e04bd57aca00fa6378fd26ce33a06a795eaf', style: hostStyle }, hAsync("div", { key: '11a20d327410b0be659cede32917164e036e796c', class: "sd-table__container", style: {
15601
+ return (hAsync(Host, { key: '57f92f3d10b928ca964c2ac9917f7dd64991591f', style: hostStyle }, hAsync("div", { key: 'ea3de705492e1c6c7f99d251e9d6e07136c72ce1', class: "sd-table__container", style: {
15573
15602
  '--table-width': this.width,
15574
- '--table-height': effectiveTableHeight,
15575
- '--table-container-height': `calc(${effectiveTableHeight} - ${paginationHeight}px)`,
15576
- } }, hAsync("div", { key: 'f4f3acf584dc4eacdae25b11aa2b62b73ffab949', class: {
15603
+ '--pagination-height': `${paginationHeight}px`,
15604
+ } }, hAsync("div", { key: '12ef88f9b81c94980806038924b194d143d3895a', class: {
15577
15605
  'sd-table__wrapper': true,
15578
15606
  'sd-table__wrapper--use-top': this.useTop,
15579
- } }, hAsync("div", { key: 'c8ab618b9c990a22b8e9466a5bfb5f02f4de8b12', class: {
15607
+ } }, hAsync("div", { key: 'b592db122ecf7f22903c9a49ebfb36138f7e18d6', class: {
15580
15608
  'sd-table__scroll-container': true,
15581
15609
  'sd-table__scroll-container--loading': this.isLoading,
15582
15610
  'sd-table__scroll-container--no-data': isNoData,
15583
- } }, this.isLoading && (hAsync("div", { key: 'a696933a70799ba282fc743281d0af27fd691a2e', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: 'cba6ac47367ef6499bf338b9b757ee74fdd7e6c1', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: '6e22156bf5b0fb9814d9bf9cad57506758c6284b', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: 'b72f9fabcc8acb8e700ad55acc4d7aff08355a1c', class: "sd-table__no-data" }, hAsync("div", { key: '43f271a8803121362f16e8153748328658f073ec', class: "sd-table__no-data-content", ref: el => {
15611
+ } }, this.isLoading && (hAsync("div", { key: '5e6badf9334ed7390f19d3c5df7335ea0efa25c4', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '70bd57550b67c5d737bf8c6e7984703b963637f9', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: '280a829ddf5275c62a8310d3fe6914863e6b79d5', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: '35f7584702b61c076ebcf61d16fedb30390e7cca', class: "sd-table__no-data" }, hAsync("div", { key: 'a67af0bf322ebfa55fc515a63b6c299676fa4aa5', class: "sd-table__no-data-content", ref: el => {
15584
15612
  this.noDataContentEl = el;
15585
15613
  if (el)
15586
15614
  this.syncNoDataContentObserver();
15587
- } }, hAsync("slot", { key: '4b8533115bbc81962b80c9c2533fe4b44a87193c', name: "no-data" }, hAsync("span", { key: 'd94c4f7cf9eca7901b99434f712480a7b20c869a' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: 'a9a353aca09124ed8a82fcd2f8a0a7de09b234f5', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
15615
+ } }, hAsync("slot", { key: '5bc8cf68c461359358edddfa085ee4121d6a3c24', name: "no-data" }, hAsync("span", { key: '01cb29dc03a084530ef47170515066da65110aa3' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: 'e0f05c5ceab477809b0b26ddf2dc7a3fc5963076', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
15588
15616
  this.pagination.rowsPerPage > 0 &&
15589
15617
  this.rowCount > 0 &&
15590
- !this.useVirtualScroll && (hAsync("div", { key: '8afeb9398c3d7540a54b9a3660fb9685ae1cddca', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: 'e2cbb3f7414f65b81ab2d33eaec5d9f28bed6cc8', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: 'ce723544dbc7e4cc0d77ced3b685b8575cf67e6f', value: this.useInternalPagination
15618
+ !this.useVirtualScroll && (hAsync("div", { key: '6f06c639cfc61e6be21ca9b598054ad17a07b879', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '2edf2f1b0db1a34b080c82c99da5ff416fb6a325', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '427db7075794819ebe0ce11e063480e87defc8b9', value: this.useInternalPagination
15591
15619
  ? this.innerRowsPerPage
15592
15620
  : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
15593
15621
  if (!this.isRowsPerPageValue(e.detail))
@@ -17776,8 +17804,6 @@ class SdTr {
17776
17804
  return this.tableEl.getCellClassSync(this.rowKey, fieldName);
17777
17805
  }
17778
17806
  getFramePaddingStyle(field) {
17779
- if (!this._dense)
17780
- return undefined;
17781
17807
  if (!(this.tableEl?.isCellUseFrameSync?.(this.rowKey, field) ?? false))
17782
17808
  return undefined;
17783
17809
  return { padding: `${TABLE_BODY_LAYOUT.framePadding}px` };
package/hydrate/index.mjs CHANGED
@@ -7027,7 +7027,14 @@ const TYPE_ICON = {
7027
7027
  danger: 'warningFill',
7028
7028
  };
7029
7029
 
7030
- const ALLOWED_INLINE_TAGS = new Set(['B', 'STRONG', 'I', 'EM', 'BR', 'SPAN']);
7030
+ const ALLOWED_INLINE_TAGS = new Set(['A', 'B', 'STRONG', 'I', 'EM', 'BR', 'SPAN']);
7031
+ // 태그별 허용 속성. 미등록 태그는 COMMON_ALLOWED_ATTRS만 적용
7032
+ const ALLOWED_ATTRS_BY_TAG = {
7033
+ A: new Set(['href', 'target', 'rel', 'class']),
7034
+ };
7035
+ const COMMON_ALLOWED_ATTRS = new Set(['class']);
7036
+ // javascript:, data: 등 위험 프로토콜 차단 — 상대 URL과 안전한 스킴만 허용
7037
+ const SAFE_HREF_RE = /^(https?:|mailto:|tel:|\/|#|\.)/i;
7031
7038
  const DROP_CONTENT_TAGS = new Set([
7032
7039
  'SCRIPT',
7033
7040
  'STYLE',
@@ -7066,8 +7073,27 @@ const sanitizeNode = (node, doc) => {
7066
7073
  return;
7067
7074
  }
7068
7075
  Array.from(element.childNodes).forEach(child => sanitizeNode(child));
7069
- Array.from(element.attributes).forEach(attr => element.removeAttribute(attr.name));
7070
7076
  if (ALLOWED_INLINE_TAGS.has(tagName)) {
7077
+ // React HTML 문자열 호환: className → class 정규화
7078
+ if (element.hasAttribute('className')) {
7079
+ const val = element.getAttribute('className');
7080
+ element.removeAttribute('className');
7081
+ if (!element.hasAttribute('class')) {
7082
+ element.setAttribute('class', val);
7083
+ }
7084
+ }
7085
+ const allowedAttrs = ALLOWED_ATTRS_BY_TAG[tagName] ?? COMMON_ALLOWED_ATTRS;
7086
+ Array.from(element.attributes).forEach(attr => {
7087
+ if (!allowedAttrs.has(attr.name)) {
7088
+ element.removeAttribute(attr.name);
7089
+ }
7090
+ });
7091
+ if (tagName === 'A') {
7092
+ const href = element.getAttribute('href');
7093
+ if (href !== null && href !== '' && !SAFE_HREF_RE.test(href)) {
7094
+ element.removeAttribute('href');
7095
+ }
7096
+ }
7071
7097
  return;
7072
7098
  }
7073
7099
  const parent = element.parentNode;
@@ -7089,7 +7115,7 @@ const sanitizeInlineHtml = (value) => {
7089
7115
  return template.innerHTML;
7090
7116
  };
7091
7117
 
7092
- const sdCalloutCss = () => `@charset "UTF-8";sd-callout{display:block;width:fit-content}sd-callout .sd-callout{display:inline-flex;align-items:stretch;width:fit-content;border:var(--sd-callout-border-width) solid var(--sd-callout-border);border-radius:var(--sd-callout-radius);background-color:var(--sd-callout-bg);color:var(--sd-callout-content);overflow:hidden}sd-callout .sd-callout__title{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;gap:var(--sd-callout-title-gap);padding:8px var(--sd-callout-title-padding-x);background-color:var(--sd-callout-title-bg);color:var(--sd-callout-title-color);font-family:var(--sd-callout-title-font-family);font-size:var(--sd-callout-title-font-size);font-weight:var(--sd-callout-title-font-weight);line-height:var(--sd-callout-title-line-height);flex-shrink:0}sd-callout .sd-callout__title-text{white-space:nowrap}sd-callout .sd-callout__body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:var(--sd-callout-body-gap);padding:var(--sd-callout-body-padding-y) var(--sd-callout-body-padding-x);font-family:var(--sd-callout-body-font-family);font-size:var(--sd-callout-body-font-size);font-weight:var(--sd-callout-body-font-weight);line-height:var(--sd-callout-body-line-height)}sd-callout .sd-callout__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;justify-content:center;gap:var(--sd-callout-body-gap)}sd-callout .sd-callout__list__item{display:flex;align-items:flex-start;color:var(--sd-callout-content)}sd-callout .sd-callout__list__item p{margin:0;padding:0;flex:1;min-width:0;word-break:break-word}sd-callout .sd-callout__list__item::before{display:block;flex-shrink:0;text-align:center;color:var(--sd-callout-content);font-size:var(--sd-callout-body-font-size);font-weight:var(--sd-callout-body-font-weight);line-height:var(--sd-callout-body-line-height)}sd-callout .sd-callout__list__item--depth-1::before{content:"-";width:24px}sd-callout .sd-callout__list__item--depth-2{padding-left:32px}sd-callout .sd-callout__list__item--depth-2::before{content:"•";width:24px}`;
7118
+ const sdCalloutCss = () => `@charset "UTF-8";sd-callout{display:block;width:100%}sd-callout .sd-callout{display:inline-flex;align-items:stretch;width:inherit;border:var(--sd-callout-border-width) solid var(--sd-callout-border);border-radius:var(--sd-callout-radius);background-color:var(--sd-callout-bg);color:var(--sd-callout-content);overflow:hidden}sd-callout .sd-callout__title{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;gap:var(--sd-callout-title-gap);padding:8px var(--sd-callout-title-padding-x);background-color:var(--sd-callout-title-bg);color:var(--sd-callout-title-color);font-family:var(--sd-callout-title-font-family);font-size:var(--sd-callout-title-font-size);font-weight:var(--sd-callout-title-font-weight);line-height:var(--sd-callout-title-line-height);flex-shrink:0}sd-callout .sd-callout__title-text{white-space:nowrap}sd-callout .sd-callout__body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:var(--sd-callout-body-gap);padding:var(--sd-callout-body-padding-y) var(--sd-callout-body-padding-x);font-family:var(--sd-callout-body-font-family);font-size:var(--sd-callout-body-font-size);font-weight:var(--sd-callout-body-font-weight);line-height:var(--sd-callout-body-line-height)}sd-callout .sd-callout__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;justify-content:center;gap:var(--sd-callout-body-gap)}sd-callout .sd-callout__list__item{display:flex;align-items:flex-start;color:var(--sd-callout-content)}sd-callout .sd-callout__list__item p{margin:0;padding:0;flex:1;min-width:0;word-break:break-word}sd-callout .sd-callout__list__item::before{display:block;flex-shrink:0;text-align:center;color:var(--sd-callout-content);font-size:var(--sd-callout-body-font-size);font-weight:var(--sd-callout-body-font-weight);line-height:var(--sd-callout-body-line-height)}sd-callout .sd-callout__list__item--depth-1::before{content:"-";width:24px}sd-callout .sd-callout__list__item--depth-2{padding-left:32px}sd-callout .sd-callout__list__item--depth-2::before{content:"•";width:24px}`;
7093
7119
 
7094
7120
  class SdCallout {
7095
7121
  constructor(hostRef) {
@@ -14747,7 +14773,7 @@ const ICON_DEFAULT_COLOR = {
14747
14773
  const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
14748
14774
  const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
14749
14775
 
14750
- const sdTableCss = () => `sd-table,:host{display:block;width:100%;max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:var(--table-height, 100%);width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:var(--table-container-height, 400px);border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--use-top{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__scroll-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;top:36px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data-header-overlay{position:absolute;top:0;left:0;right:0;height:36px;background:rgba(255, 255, 255, 0.6);z-index:210;pointer-events:none}.sd-table__no-data-content{pointer-events:auto;min-height:60px;width:100%;display:flex;align-items:center;justify-content:center}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
14776
+ const sdTableCss = () => `sd-table,:host{display:block;width:100%;height:var(--table-host-height);max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:100%;width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:calc(100% - var(--pagination-height, 0px));border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--use-top{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__scroll-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;top:36px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data-header-overlay{position:absolute;top:0;left:0;right:0;height:36px;background:rgba(255, 255, 255, 0.6);z-index:210;pointer-events:none}.sd-table__no-data-content{pointer-events:auto;min-height:60px;width:100%;display:flex;align-items:center;justify-content:center}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
14751
14777
 
14752
14778
  class SdTable {
14753
14779
  constructor(hostRef) {
@@ -15553,9 +15579,11 @@ class SdTable {
15553
15579
  const isNoData = this.rowCount === 0 && !this.isLoading;
15554
15580
  const paginationHeight = this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0;
15555
15581
  const noDataTotalHeight = 36 + this.noDataBodyHeight;
15556
- const effectiveTableHeight = isNoData
15557
- ? `max(${this.height || '96px'}, ${noDataTotalHeight}px)`
15558
- : this.height || '100%';
15582
+ const hostHeight = isNoData
15583
+ ? this.height !== undefined
15584
+ ? `max(${this.height}, ${noDataTotalHeight}px)`
15585
+ : `max(${noDataTotalHeight}px, 100%)`
15586
+ : (this.height ?? '100%');
15559
15587
  const hostStyle = {
15560
15588
  '--table-radius': `${TABLE_RADIUS}px`,
15561
15589
  '--table-border-color': TABLE_BORDER.color,
@@ -15566,26 +15594,26 @@ class SdTable {
15566
15594
  '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
15567
15595
  '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
15568
15596
  '--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
15597
+ '--table-host-height': hostHeight,
15569
15598
  };
15570
- return (hAsync(Host, { key: '4596e04bd57aca00fa6378fd26ce33a06a795eaf', style: hostStyle }, hAsync("div", { key: '11a20d327410b0be659cede32917164e036e796c', class: "sd-table__container", style: {
15599
+ return (hAsync(Host, { key: '57f92f3d10b928ca964c2ac9917f7dd64991591f', style: hostStyle }, hAsync("div", { key: 'ea3de705492e1c6c7f99d251e9d6e07136c72ce1', class: "sd-table__container", style: {
15571
15600
  '--table-width': this.width,
15572
- '--table-height': effectiveTableHeight,
15573
- '--table-container-height': `calc(${effectiveTableHeight} - ${paginationHeight}px)`,
15574
- } }, hAsync("div", { key: 'f4f3acf584dc4eacdae25b11aa2b62b73ffab949', class: {
15601
+ '--pagination-height': `${paginationHeight}px`,
15602
+ } }, hAsync("div", { key: '12ef88f9b81c94980806038924b194d143d3895a', class: {
15575
15603
  'sd-table__wrapper': true,
15576
15604
  'sd-table__wrapper--use-top': this.useTop,
15577
- } }, hAsync("div", { key: 'c8ab618b9c990a22b8e9466a5bfb5f02f4de8b12', class: {
15605
+ } }, hAsync("div", { key: 'b592db122ecf7f22903c9a49ebfb36138f7e18d6', class: {
15578
15606
  'sd-table__scroll-container': true,
15579
15607
  'sd-table__scroll-container--loading': this.isLoading,
15580
15608
  'sd-table__scroll-container--no-data': isNoData,
15581
- } }, this.isLoading && (hAsync("div", { key: 'a696933a70799ba282fc743281d0af27fd691a2e', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: 'cba6ac47367ef6499bf338b9b757ee74fdd7e6c1', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: '6e22156bf5b0fb9814d9bf9cad57506758c6284b', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: 'b72f9fabcc8acb8e700ad55acc4d7aff08355a1c', class: "sd-table__no-data" }, hAsync("div", { key: '43f271a8803121362f16e8153748328658f073ec', class: "sd-table__no-data-content", ref: el => {
15609
+ } }, this.isLoading && (hAsync("div", { key: '5e6badf9334ed7390f19d3c5df7335ea0efa25c4', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '70bd57550b67c5d737bf8c6e7984703b963637f9', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: '280a829ddf5275c62a8310d3fe6914863e6b79d5', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: '35f7584702b61c076ebcf61d16fedb30390e7cca', class: "sd-table__no-data" }, hAsync("div", { key: 'a67af0bf322ebfa55fc515a63b6c299676fa4aa5', class: "sd-table__no-data-content", ref: el => {
15582
15610
  this.noDataContentEl = el;
15583
15611
  if (el)
15584
15612
  this.syncNoDataContentObserver();
15585
- } }, hAsync("slot", { key: '4b8533115bbc81962b80c9c2533fe4b44a87193c', name: "no-data" }, hAsync("span", { key: 'd94c4f7cf9eca7901b99434f712480a7b20c869a' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: 'a9a353aca09124ed8a82fcd2f8a0a7de09b234f5', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
15613
+ } }, hAsync("slot", { key: '5bc8cf68c461359358edddfa085ee4121d6a3c24', name: "no-data" }, hAsync("span", { key: '01cb29dc03a084530ef47170515066da65110aa3' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: 'e0f05c5ceab477809b0b26ddf2dc7a3fc5963076', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
15586
15614
  this.pagination.rowsPerPage > 0 &&
15587
15615
  this.rowCount > 0 &&
15588
- !this.useVirtualScroll && (hAsync("div", { key: '8afeb9398c3d7540a54b9a3660fb9685ae1cddca', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: 'e2cbb3f7414f65b81ab2d33eaec5d9f28bed6cc8', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: 'ce723544dbc7e4cc0d77ced3b685b8575cf67e6f', value: this.useInternalPagination
15616
+ !this.useVirtualScroll && (hAsync("div", { key: '6f06c639cfc61e6be21ca9b598054ad17a07b879', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '2edf2f1b0db1a34b080c82c99da5ff416fb6a325', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '427db7075794819ebe0ce11e063480e87defc8b9', value: this.useInternalPagination
15589
15617
  ? this.innerRowsPerPage
15590
15618
  : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
15591
15619
  if (!this.isRowsPerPageValue(e.detail))
@@ -17774,8 +17802,6 @@ class SdTr {
17774
17802
  return this.tableEl.getCellClassSync(this.rowKey, fieldName);
17775
17803
  }
17776
17804
  getFramePaddingStyle(field) {
17777
- if (!this._dense)
17778
- return undefined;
17779
17805
  if (!(this.tableEl?.isCellUseFrameSync?.(this.rowKey, field) ?? false))
17780
17806
  return undefined;
17781
17807
  return { padding: `${TABLE_BODY_LAYOUT.framePadding}px` };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sellmate/design-system",
3
- "version": "1.7.3",
3
+ "version": "1.8.0",
4
4
  "description": "Sellmate Design System - Web Components Library built with Stencil",
5
5
  "keywords": [
6
6
  "web-components",
@@ -1 +0,0 @@
1
- const t=new Set(["B","STRONG","I","EM","BR","SPAN"]),e=new Set(["SCRIPT","STYLE","IFRAME","OBJECT","EMBED","META","LINK","BASE","NOSCRIPT"]),n=r=>{if(r.nodeType===Node.COMMENT_NODE)return void r.remove();if(r.nodeType!==Node.ELEMENT_NODE)return;const o=r,u=o.tagName;if(e.has(u))return void o.remove();if(Array.from(o.childNodes).forEach((t=>n(t))),Array.from(o.attributes).forEach((t=>o.removeAttribute(t.name))),t.has(u))return;const d=o.parentNode;if(null!=d){for(;o.firstChild;)d.insertBefore(o.firstChild,o);d.removeChild(o)}},r=t=>{const e="undefined"==typeof document?null:document.createElement("template");return null==e?(t=>t.replaceAll("&","&amp;").replaceAll("<","&lt;").replaceAll(">","&gt;").replaceAll('"',"&quot;").replaceAll("'","&#39;"))(t):(e.innerHTML=t,Array.from(e.content.childNodes).forEach((t=>n(t))),e.innerHTML)};export{r as s}
@@ -1 +0,0 @@
1
- import{p as t,H as e,h as s,d as i,t as r}from"./p-pwNG5WaX.js";import{T as o}from"./p-sZMi_32I.js";import{T as l,j as a,c as n,b as h}from"./p-DGyTYauz.js";import{d}from"./p-Cye8r1MG.js";import{d as c}from"./p-DQj-S8AC.js";const p=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost()}get el(){return this}columns;selectable;stickyColumn;rowKey="";row={};separator=null;tableId="";columnWidths=[];isVisible=!0;spansVersion=0;_columns=[];_selectable=!1;_stickyColumn={left:0,right:0};_scrolledLeft=!1;_scrolledRight=!1;_dense=!1;tableEl=null;componentWillLoad(){this.row=this.row??{},this.syncTableContext(),this.columnWidths=this.columnWidths??[],this.resolveConfig(),this.columnWidths=this._columns.map((t=>t.autoWidth?0:parseInt(t.width||"120",10))),this.updateVisibilitySync()}componentDidLoad(){this.syncTableContext()}syncTableContext(){const t=this.el.closest("sd-table"),e=this.el.getRootNode(),s=e instanceof ShadowRoot?e.host:null,i=t??s;this.tableEl=i;const r=i?.getTableIdSync?.(),l=i?.getAttribute(o),a=(null!=r&&""!==r&&"undefined"!==r?r:null)??(null!=l&&""!==l&&"undefined"!==l?l:null)??"";""!==a&&a!==this.tableId&&(this.tableId=a)}resolveConfig(){const t=this.tableEl?.getConfigSync?.();this._columns=this.columns??t?.columns??[],this._selectable=this.selectable??t?.selectable??!1,this._stickyColumn=this.stickyColumn??t?.stickyColumn??{left:0,right:0},this._scrolledLeft=t?.scrolledLeft??!1,this._scrolledRight=t?.scrolledRight??!1,this._dense=t?.dense??!1,t?.columnWidths&&0===(this.columnWidths??[]).length&&(this.columnWidths=[...t.columnWidths])}async refreshConfig(){this.resolveConfig()}async bumpSpansVersion(){this.spansVersion=this.spansVersion+1}async updateVisibility(){this.updateVisibilitySync()}updateVisibilitySync(){const t=parseInt(this.rowKey,10),e=this.tableEl?.getPaginationInfoSync?.();this.isVisible=!e||t>=e.startIndex&&t<e.endIndex}async setColumnWidths(t){this.columnWidths=t}async refreshSelection(){const t=this.el.querySelector("sd-checkbox");t&&(t.value=this.isSelected())}get visibleColumns(){return this._columns.filter((t=>!1!==t.visible))}formatValue(t){return null==t?"":"number"==typeof t?t.toLocaleString():String(t)}getCellValue(t){const{field:e,format:s,name:i}=t,r="function"==typeof e?e(this.row):""!==e?this.row[e]:this.row[i];return s?s(r,this.row):this.formatValue(r)}getStickyStyle(t){if(this.tableEl?.getStickyStyleSync)return this.tableEl.getStickyStyleSync(t);const e=this.columnWidths.slice(0,t).reduce(((t,e)=>t+e),0)+(this._selectable?52:0),s=this.columnWidths.filter(((e,s)=>s>=this.visibleColumns.length-(this._stickyColumn.right||0)&&s>t)).reduce(((t,e)=>t+e),0),i=this.visibleColumns[t],r={"--sticky-left-offset":`${e}px`,"--sticky-right-offset":`${s}px`};return i?.autoWidth||(r.width=`${this.columnWidths[t]}px`,r.minWidth=`${this.columnWidths[t]}px`,r.maxWidth=`${this.columnWidths[t]}px`),r}isSelected(){return!!this.tableEl?.isRowSelectedSync&&this.tableEl.isRowSelectedSync(this.row)}handleSelect(){this.tableEl?.updateRowSelectSync&&this.tableEl.updateRowSelectSync(this.row)}getSpanFor(t){if(this.tableEl?.getSpanSync)return this.tableEl.getSpanSync(this.rowKey,"string"==typeof t.field?t.field:t.name)}isCovered(t){return!!this.tableEl?.isCoveredSync&&this.tableEl.isCoveredSync(this.rowKey,t,this._columns)}getCellClassFor(t){if(this.tableEl?.getCellClassSync)return this.tableEl.getCellClassSync(this.rowKey,"string"==typeof t.field?t.field:t.name)}getFramePaddingStyle(t){if(this._dense&&this.tableEl?.isCellUseFrameSync?.(this.rowKey,t))return{padding:`${l.framePadding}px`}}expandCellClass(t){return null==t||""===t?{}:Object.fromEntries(t.split(/\s+/).filter(Boolean).map((t=>[t,!0])))}render(){const t=this._stickyColumn.left||0,e=this._stickyColumn.right||0,r=this.visibleColumns.slice(0,t),o=this.visibleColumns.slice(t,this.visibleColumns.length-e),d=this.visibleColumns.slice(this.visibleColumns.length-e),c=this.tableEl?.hasRowspanSync?.()??!1,p=this.tableEl?.hasUseFrameInRowSync?.(this.rowKey)??!1,b=this._dense&&!p?l.dense:l.default,f={display:this.isVisible?"":"none","--table-body-height":`${b.height}px`,"--table-body-padding-y":`${b.paddingY}px`,"--table-body-padding-x":`${l.paddingX}px`,"--table-body-font-family":h.fontFamily,"--table-body-font-weight":h.fontWeight,"--table-body-font-size":`${h.fontSize}px`,"--table-body-line-height":`${h.lineHeight}px`,"--table-body-text-decoration":h.textDecoration,"--table-border-color":n.color,"--table-border-width":`${n.width}px`,"--table-separator-color":a.color,"--table-separator-width":`${a.width}px`,"--table-separator-dense-width":`${a.denseWidth}px`};return s(i,{style:f},null!=this.separator?s("tr",{class:{tr:!0,"tr--separator":!0,"tr--separator--dense":4===this.separator}},s("td",{colSpan:this.visibleColumns.length+(this._selectable?1:0),class:"td td--separator"})):s("tr",{class:{tr:!0,"tr--no-hover":c}},this._selectable&&s("td",{class:{td:!0,"td--selected":!0,"sticky-left":!0,"sticky-left-edge":0===t,"is-scrolled-left":0===t&&this._scrolledLeft},style:{"--sticky-left-offset":"0px"}},s("sd-checkbox",{value:this.isSelected(),onSdUpdate:()=>this.handleSelect()})),r.map(((e,i)=>{if(this.isCovered(i))return null;const r="string"==typeof e.field?e.field:e.name,o=this.getSpanFor(e),l=this.getCellClassFor(e);return s("td",{key:e.name,rowSpan:o?.rowspan,colSpan:o?.colspan,class:{td:!0,[`td--${e.align||"left"}`]:!0,"sticky-left":!0,"sticky-left-edge":i===t-1,"is-scrolled-left":i===t-1&&this._scrolledLeft,[`${e.tdClass}`]:Boolean(e.tdClass),...this.expandCellClass(l)},style:{...this.getStickyStyle(i),...this.getFramePaddingStyle(r)}},s("slot",{name:`${this.tableId}-${r}-${this.rowKey}`},s("span",null,this.getCellValue(e))))})),o.map(((e,i)=>{const r=t+i;if(this.isCovered(r))return null;const o="string"==typeof e.field?e.field:e.name,l=this.getSpanFor(e),a=this.getCellClassFor(e);return s("td",{key:e.name,rowSpan:l?.rowspan,colSpan:l?.colspan,class:{td:!0,[`td--${e.align||"left"}`]:!0,[`${e.tdClass}`]:Boolean(e.tdClass),...this.expandCellClass(a)},style:{...this.getStickyStyle(r),...this.getFramePaddingStyle(o)}},s("slot",{name:`${this.tableId}-${o}-${this.rowKey}`},s("span",null,this.getCellValue(e))))})),d.map(((t,i)=>{const r=this.visibleColumns.length-e+i;if(this.isCovered(r))return null;const o="string"==typeof t.field?t.field:t.name,l=this.getSpanFor(t),a=this.getCellClassFor(t);return s("td",{key:t.name,rowSpan:l?.rowspan,colSpan:l?.colspan,class:{td:!0,[`td--${t.align||"left"}`]:!0,"sticky-right":!0,"sticky-right-edge":0===i,"is-scrolled-right":0===i&&this._scrolledRight,[`${t.tdClass}`]:Boolean(t.tdClass),...this.expandCellClass(a)},style:{...this.getStickyStyle(r),...this.getFramePaddingStyle(o)}},s("slot",{name:`${this.tableId}-${o}-${this.rowKey}`},s("span",null,this.getCellValue(t))))}))))}static get style(){return'sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.tr--no-hover:hover .td{background-color:white}.tr--separator:hover .td{background-color:var(--table-separator-color, #eeeeee)}.td{display:table-cell;height:var(--table-body-height, 44px);padding:var(--table-body-padding-y, 0) var(--table-body-padding-x, 16px);border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);background:white;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.td--left{text-align:left}.td--center{text-align:center}.td--right{text-align:right}.td--selected{position:relative;width:var(--table-selectable-width, 48px) !important;max-width:var(--table-selectable-width, 48px) !important;min-width:var(--table-selectable-width, 48px) !important;text-align:center}.td--selected sd-checkbox label{position:relative}.td--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.td.sticky-left{position:sticky;background-color:white;z-index:100 !important;left:var(--sticky-left-offset, 0)}.td.sticky-right{position:sticky;background-color:white;z-index:100 !important;right:var(--sticky-right-offset, 0)}.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:0;pointer-events:none;transition:opacity 0.2s}.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:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-left-edge.is-scrolled-left{overflow:visible}.td.sticky-left-edge.is-scrolled-left:after{opacity:1}.td.sticky-right-edge.is-scrolled-right{overflow:visible}.td.sticky-right-edge.is-scrolled-right:after{opacity:1}.tr:hover .td.sticky-left,.tr:hover .td.sticky-right{background-color:#F9F9F9}.tr--no-hover:hover .td.sticky-left,.tr--no-hover:hover .td.sticky-right{background-color:white}.tr--separator:hover .td.sticky-left,.tr--separator:hover .td.sticky-right{background-color:var(--table-separator-color, #eeeeee)}.tr--separator .td--separator{height:var(--table-separator-width, 6px);padding:0;background-color:var(--table-separator-color, #eeeeee);border-bottom:none}.tr--separator--dense .td--separator{height:var(--table-separator-dense-width, 4px)}.td--divider-left{border-left:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1)}.td--divider-right{border-right:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1)}'}},[772,"sd-tr",{columns:[16],selectable:[4],stickyColumn:[16],rowKey:[1,"row-key"],row:[16],separator:[8],tableId:[32],columnWidths:[32],isVisible:[32],spansVersion:[32],_columns:[32],_selectable:[32],_stickyColumn:[32],_scrolledLeft:[32],_scrolledRight:[32],_dense:[32],refreshConfig:[64],bumpSpansVersion:[64],updateVisibility:[64],setColumnWidths:[64],refreshSelection:[64]}]);function b(){"undefined"!=typeof customElements&&["sd-tr","sd-checkbox","sd-icon"].forEach((t=>{switch(t){case"sd-tr":customElements.get(r(t))||customElements.define(r(t),p);break;case"sd-checkbox":customElements.get(r(t))||d();break;case"sd-icon":customElements.get(r(t))||c()}}))}export{p as S,b as d}
@@ -1 +0,0 @@
1
- const t=new Set(["B","STRONG","I","EM","BR","SPAN"]),e=new Set(["SCRIPT","STYLE","IFRAME","OBJECT","EMBED","META","LINK","BASE","NOSCRIPT"]),n=r=>{if(r.nodeType===Node.COMMENT_NODE)return void r.remove();if(r.nodeType!==Node.ELEMENT_NODE)return;const o=r,u=o.tagName;if(e.has(u))return void o.remove();if(Array.from(o.childNodes).forEach((t=>n(t))),Array.from(o.attributes).forEach((t=>o.removeAttribute(t.name))),t.has(u))return;const d=o.parentNode;if(null!=d){for(;o.firstChild;)d.insertBefore(o.firstChild,o);d.removeChild(o)}},r=t=>{const e="undefined"==typeof document?null:document.createElement("template");return null==e?(t=>t.replaceAll("&","&amp;").replaceAll("<","&lt;").replaceAll(">","&gt;").replaceAll('"',"&quot;").replaceAll("'","&#39;"))(t):(e.innerHTML=t,Array.from(e.content.childNodes).forEach((t=>n(t))),e.innerHTML)};export{r as s}