@sellmate/design-system 0.0.49 → 0.0.50

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 (126) hide show
  1. package/dist/cjs/design-system.cjs.js +1 -1
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/{esm/color-CgyTlXBV.js → cjs/resolveColor-DxvExwgo.js} +17 -4
  4. package/dist/cjs/{resolveColor-CauSLF0s.js.map → resolveColor-DxvExwgo.js.map} +1 -1
  5. package/dist/cjs/sd-badge.cjs.entry.js +1 -2
  6. package/dist/cjs/sd-badge.entry.cjs.js.map +1 -1
  7. package/dist/cjs/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-radio-group.sd-select.sd-select-option.sd-table-backup.sd-tooltip.sd-tooltip-portal.entry.cjs.js.map +1 -0
  8. package/dist/cjs/{sd-button_12.cjs.entry.js → sd-button_14.cjs.entry.js} +164 -14
  9. package/dist/cjs/sd-modal-card.cjs.entry.js +1 -2
  10. package/dist/cjs/sd-modal-card.entry.cjs.js.map +1 -1
  11. package/dist/cjs/sd-select-multiple.cjs.entry.js +2 -2
  12. package/dist/cjs/sd-select-option-group.cjs.entry.js +3 -3
  13. package/dist/cjs/sd-tbody_3.cjs.entry.js +3 -3
  14. package/dist/cjs/sd-td.cjs.entry.js +2 -2
  15. package/dist/collection/collection-manifest.json +1 -0
  16. package/dist/collection/components/sd-radio-group/sd-radio-group.css +76 -0
  17. package/dist/collection/components/sd-radio-group/sd-radio-group.js +214 -0
  18. package/dist/collection/components/sd-radio-group/sd-radio-group.js.map +1 -0
  19. package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +1 -1
  20. package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +2 -2
  21. package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +3 -3
  22. package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +1 -1
  23. package/dist/collection/components/sd-table/sd-td/sd-td.js +2 -2
  24. package/dist/collection/components/sd-table/sd-th/sd-th.js +1 -1
  25. package/dist/collection/components/sd-table/sd-tr/sd-tr.js +1 -1
  26. package/dist/collection/components/sd-table-backup/sd-table-backup.css +1 -1
  27. package/dist/collection/components/sd-table-backup/sd-table-backup.js +10 -4
  28. package/dist/collection/components/sd-table-backup/sd-table-backup.js.map +1 -1
  29. package/dist/collection/components/sd-tooltip/sd-tooltip.js +4 -4
  30. package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js +1 -1
  31. package/dist/components/{p-CxKXdl1J.js → p-BIw-hGVo.js} +3 -3
  32. package/dist/components/{p-CxKXdl1J.js.map → p-BIw-hGVo.js.map} +1 -1
  33. package/dist/components/{p-Dg_O2miv.js → p-BSUHSOXX.js} +3 -3
  34. package/dist/components/{p-Dg_O2miv.js.map → p-BSUHSOXX.js.map} +1 -1
  35. package/dist/components/{p-CRB0WJnC.js → p-C0CLTo3o.js} +3 -3
  36. package/dist/components/{p-CRB0WJnC.js.map → p-C0CLTo3o.js.map} +1 -1
  37. package/dist/components/{p-CePRmFej.js → p-C171iavd.js} +3 -3
  38. package/dist/components/{p-CePRmFej.js.map → p-C171iavd.js.map} +1 -1
  39. package/dist/components/{p-CVDnYikl.js → p-Cq-Qitdj.js} +7 -7
  40. package/dist/components/{p-CVDnYikl.js.map → p-Cq-Qitdj.js.map} +1 -1
  41. package/dist/components/{p-cOQWi_dD.js → p-D8f0ASS6.js} +3 -3
  42. package/dist/components/{p-cOQWi_dD.js.map → p-D8f0ASS6.js.map} +1 -1
  43. package/dist/components/{p-BAhPNR2w.js → p-X8rQBuZk.js} +5 -5
  44. package/dist/components/{p-BAhPNR2w.js.map → p-X8rQBuZk.js.map} +1 -1
  45. package/dist/components/{p-CaLViLir.js → p-_spt_8fG.js} +3 -3
  46. package/dist/components/{p-CaLViLir.js.map → p-_spt_8fG.js.map} +1 -1
  47. package/dist/components/sd-popover.js +1 -1
  48. package/dist/components/sd-radio-group.d.ts +11 -0
  49. package/dist/components/sd-radio-group.js +99 -0
  50. package/dist/components/sd-radio-group.js.map +1 -0
  51. package/dist/components/sd-select-multiple-group.js +1 -1
  52. package/dist/components/sd-select-multiple.js +3 -3
  53. package/dist/components/sd-select-option-group.js +1 -1
  54. package/dist/components/sd-select-option.js +1 -1
  55. package/dist/components/sd-select.js +1 -1
  56. package/dist/components/sd-table-backup.js +15 -9
  57. package/dist/components/sd-table-backup.js.map +1 -1
  58. package/dist/components/sd-table.js +7 -7
  59. package/dist/components/sd-tbody.js +1 -1
  60. package/dist/components/sd-td.js +2 -2
  61. package/dist/components/sd-th.js +1 -1
  62. package/dist/components/sd-tooltip-portal.js +1 -1
  63. package/dist/components/sd-tooltip.js +1 -1
  64. package/dist/components/sd-tr.js +1 -1
  65. package/dist/design-system/design-system.esm.js +1 -1
  66. package/dist/design-system/{p-0cada447.entry.js → p-1b6aec43.entry.js} +2 -2
  67. package/dist/design-system/{p-d7fe0919.entry.js → p-1e175d35.entry.js} +2 -2
  68. package/dist/design-system/p-24ef1055.entry.js +2 -0
  69. package/dist/design-system/p-24ef1055.entry.js.map +1 -0
  70. package/dist/design-system/p-4828e65b.entry.js +2 -0
  71. package/dist/design-system/{p-CgyTlXBV.js → p-BYf-ybt2.js} +2 -2
  72. package/dist/design-system/{p-BoLmB6pG.js.map → p-BYf-ybt2.js.map} +1 -1
  73. package/dist/design-system/p-a73bb448.entry.js +2 -0
  74. package/dist/design-system/p-a73bb448.entry.js.map +1 -0
  75. package/dist/design-system/p-b892a722.entry.js +2 -0
  76. package/dist/design-system/p-b892a722.entry.js.map +1 -0
  77. package/dist/design-system/{p-45bb29cf.entry.js → p-c7e8a2c0.entry.js} +2 -2
  78. package/dist/design-system/sd-badge.entry.esm.js.map +1 -1
  79. package/dist/design-system/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-radio-group.sd-select.sd-select-option.sd-table-backup.sd-tooltip.sd-tooltip-portal.entry.esm.js.map +1 -0
  80. package/dist/design-system/sd-modal-card.entry.esm.js.map +1 -1
  81. package/dist/esm/design-system.js +1 -1
  82. package/dist/esm/loader.js +1 -1
  83. package/dist/{cjs/color-Oz29vj7L.js → esm/resolveColor-BYf-ybt2.js} +14 -6
  84. package/dist/esm/{resolveColor-CswQ9y2Q.js.map → resolveColor-BYf-ybt2.js.map} +1 -1
  85. package/dist/esm/sd-badge.entry.js +1 -2
  86. package/dist/esm/sd-badge.entry.js.map +1 -1
  87. package/dist/esm/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-radio-group.sd-select.sd-select-option.sd-table-backup.sd-tooltip.sd-tooltip-portal.entry.js.map +1 -0
  88. package/dist/esm/{sd-button_12.entry.js → sd-button_14.entry.js} +163 -15
  89. package/dist/esm/sd-modal-card.entry.js +1 -2
  90. package/dist/esm/sd-modal-card.entry.js.map +1 -1
  91. package/dist/esm/sd-select-multiple.entry.js +2 -2
  92. package/dist/esm/sd-select-option-group.entry.js +3 -3
  93. package/dist/esm/sd-tbody_3.entry.js +3 -3
  94. package/dist/esm/sd-td.entry.js +2 -2
  95. package/dist/types/components/sd-radio-group/sd-radio-group.d.ts +24 -0
  96. package/dist/types/components.d.ts +59 -0
  97. package/hydrate/index.js +108 -21
  98. package/hydrate/index.mjs +108 -21
  99. package/package.json +95 -95
  100. package/dist/cjs/color-Oz29vj7L.js.map +0 -1
  101. package/dist/cjs/resolveColor-CauSLF0s.js +0 -18
  102. package/dist/cjs/sd-button.sd-checkbox.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table-backup.sd-tooltip.sd-tooltip-portal.entry.cjs.js.map +0 -1
  103. package/dist/cjs/sd-guide.cjs.entry.js +0 -85
  104. package/dist/cjs/sd-guide.entry.cjs.js.map +0 -1
  105. package/dist/design-system/p-74c0eee4.entry.js +0 -2
  106. package/dist/design-system/p-74c0eee4.entry.js.map +0 -1
  107. package/dist/design-system/p-927b3333.entry.js +0 -2
  108. package/dist/design-system/p-927b3333.entry.js.map +0 -1
  109. package/dist/design-system/p-BoLmB6pG.js +0 -2
  110. package/dist/design-system/p-CgyTlXBV.js.map +0 -1
  111. package/dist/design-system/p-bea456ad.entry.js +0 -2
  112. package/dist/design-system/p-bea456ad.entry.js.map +0 -1
  113. package/dist/design-system/p-dc6681a7.entry.js +0 -2
  114. package/dist/design-system/p-dc6681a7.entry.js.map +0 -1
  115. package/dist/design-system/p-fb4d628a.entry.js +0 -2
  116. package/dist/design-system/sd-button.sd-checkbox.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table-backup.sd-tooltip.sd-tooltip-portal.entry.esm.js.map +0 -1
  117. package/dist/design-system/sd-guide.entry.esm.js.map +0 -1
  118. package/dist/esm/color-CgyTlXBV.js.map +0 -1
  119. package/dist/esm/resolveColor-CswQ9y2Q.js +0 -16
  120. package/dist/esm/sd-button.sd-checkbox.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table-backup.sd-tooltip.sd-tooltip-portal.entry.js.map +0 -1
  121. package/dist/esm/sd-guide.entry.js +0 -83
  122. package/dist/esm/sd-guide.entry.js.map +0 -1
  123. /package/dist/design-system/{p-0cada447.entry.js.map → p-1b6aec43.entry.js.map} +0 -0
  124. /package/dist/design-system/{p-d7fe0919.entry.js.map → p-1e175d35.entry.js.map} +0 -0
  125. /package/dist/design-system/{p-fb4d628a.entry.js.map → p-4828e65b.entry.js.map} +0 -0
  126. /package/dist/design-system/{p-45bb29cf.entry.js.map → p-c7e8a2c0.entry.js.map} +0 -0
package/hydrate/index.mjs CHANGED
@@ -7023,6 +7023,86 @@ class SdProgress {
7023
7023
  }; }
7024
7024
  }
7025
7025
 
7026
+ const sdRadioGroupCss = "sd-radio-group{display:inline-block}sd-radio-group .sd-radio-group{display:flex}sd-radio-group .sd-radio-group--vertical{flex-direction:column;gap:8px}sd-radio-group .sd-radio-group--horizontal{flex-direction:row;align-items:center;gap:20px}sd-radio-group .sd-radio-group__option{width:fit-content;display:flex;align-items:center;gap:8px;font-weight:400;font-size:12px;line-height:20px;cursor:pointer}sd-radio-group .sd-radio-group__option:has(input:disabled){cursor:default}sd-radio-group .sd-radio-group__option input{position:relative;appearance:none;margin:0;width:16px;height:16px;border:1px solid #888888;border-radius:50%;cursor:pointer;accent-color:#0075ff;background-color:white}sd-radio-group .sd-radio-group__option input:checked{border-color:#0075ff;background-color:white}sd-radio-group .sd-radio-group__option input:checked::before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;border-radius:50%;background-color:#0075ff}sd-radio-group .sd-radio-group__option input:disabled{cursor:default;border-color:#cccccc;background-color:#eeeeee}sd-radio-group .sd-radio-group__option input:disabled:checked::before{background-color:#cccccc}sd-radio-group .sd-radio-group__option input:not(:disabled):hover{border-color:#0075ff;background-color:#d9eaff}sd-radio-group .sd-radio-group__label{font-size:12px;color:#333333;line-height:20px;user-select:none}sd-radio-group .sd-radio-group__option--disabled .sd-radio-group__label{color:#888888}";
7027
+
7028
+ class SdRadioGroup {
7029
+ constructor(hostRef) {
7030
+ registerInstance(this, hostRef);
7031
+ this.sdChange = createEvent(this, "sdChange");
7032
+ }
7033
+ value;
7034
+ radioOptions = [];
7035
+ direction = 'vertical';
7036
+ disabled = false;
7037
+ name;
7038
+ selectedValue;
7039
+ sdChange;
7040
+ componentWillLoad() {
7041
+ if (this.value) {
7042
+ this.selectedValue = this.value;
7043
+ }
7044
+ }
7045
+ valueChanged(newValue) {
7046
+ this.selectedValue = newValue;
7047
+ }
7048
+ handleRadioChange = (optionValue, optionDisabled) => {
7049
+ if (this.disabled || optionDisabled)
7050
+ return;
7051
+ this.selectedValue = optionValue;
7052
+ this.value = optionValue;
7053
+ this.sdChange.emit(optionValue);
7054
+ };
7055
+ isOptionSelected(option) {
7056
+ return this.selectedValue === option.value;
7057
+ }
7058
+ isOptionDisabled(option) {
7059
+ return this.disabled || !!option.disabled;
7060
+ }
7061
+ getRadioClasses(option) {
7062
+ const classes = [
7063
+ 'sd-radio-group__option',
7064
+ this.isOptionSelected(option)
7065
+ ? 'sd-radio-group__option--selected'
7066
+ : 'sd-radio-group__option--unselected',
7067
+ ];
7068
+ if (this.isOptionDisabled(option)) {
7069
+ classes.push('sd-radio-group__option--disabled');
7070
+ }
7071
+ return classes.join(' ');
7072
+ }
7073
+ getGroupClasses() {
7074
+ const classes = ['sd-radio-group', `sd-radio-group--${this.direction}`];
7075
+ return classes.join(' ');
7076
+ }
7077
+ render() {
7078
+ const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;
7079
+ return (hAsync("div", { key: 'd8f9d161395e7125bb65411ee6831e7e290900ba', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map((option, index) => {
7080
+ const isSelected = this.isOptionSelected(option);
7081
+ const isDisabled = this.isOptionDisabled(option);
7082
+ return (hAsync("label", { key: `radio-${index}`, class: this.getRadioClasses(option), role: "radio", "aria-checked": isSelected.toString(), "aria-disabled": isDisabled.toString(), "aria-label": option.label || 'radio option' }, hAsync("input", { type: "radio", name: groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && hAsync("span", { class: "sd-radio-group__label" }, option.label)));
7083
+ })));
7084
+ }
7085
+ static get watchers() { return {
7086
+ "value": ["valueChanged"]
7087
+ }; }
7088
+ static get style() { return sdRadioGroupCss; }
7089
+ static get cmpMeta() { return {
7090
+ "$flags$": 768,
7091
+ "$tagName$": "sd-radio-group",
7092
+ "$members$": {
7093
+ "value": [1544],
7094
+ "radioOptions": [1040],
7095
+ "direction": [1],
7096
+ "disabled": [4],
7097
+ "name": [1],
7098
+ "selectedValue": [32]
7099
+ },
7100
+ "$listeners$": undefined,
7101
+ "$lazyBundleId$": "-",
7102
+ "$attrsToReflect$": [["value", "value"]]
7103
+ }; }
7104
+ }
7105
+
7026
7106
  class DropdownManager {
7027
7107
  static instance;
7028
7108
  activeDropdowns = new Set();
@@ -7620,11 +7700,11 @@ class SdSelectMultiple extends BaseDropdownEvent {
7620
7700
  '--select-width': this.width || '200px',
7621
7701
  '--select-dropdown-height': this.dropdownHeight || '260px',
7622
7702
  };
7623
- return (hAsync(Host, { key: '71bf4aa9bb298ddd42fa2df53ffcaa75acd17811', style: style }, hAsync("div", { key: '9f0970babd424f097b82acab1e93d4922cd5a36e', class: {
7703
+ return (hAsync(Host, { key: '356e513b8d7e856ed22d5358027b163463d55c1d', style: style }, hAsync("div", { key: '3a75650badea618ed89899de57fbd25c020df6d0', class: {
7624
7704
  'sd-select-multiple': true,
7625
7705
  'sd-select-multiple--open': this.isOpen,
7626
7706
  'sd-select-multiple--disabled': this.disabled,
7627
- }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: '57d243584fdf590139ec3436c473d54daa477e36', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
7707
+ }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: 'e42235a132e3c13e9a996206ab7f58698ab97fe1', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
7628
7708
  }
7629
7709
  renderLabel(label) {
7630
7710
  if (!label)
@@ -8154,7 +8234,7 @@ class SdSelectOption {
8154
8234
  }
8155
8235
  };
8156
8236
  render() {
8157
- return (hAsync(Host, { key: '70eafe63e44409063337d0a43846c3be869086df' }, hAsync("div", { key: '21cafb06d87968387f9b9ec91fdd09643cded1ca', class: {
8237
+ return (hAsync(Host, { key: '7cf5b51057f8eb7ad7cf7143225bcd842e5fa231' }, hAsync("div", { key: 'ab9e02db38a0717b9aeb85890b150a6e59a9f7ee', class: {
8158
8238
  'sd-select__option': true,
8159
8239
  'sd-select__option--selected': this.isSelected,
8160
8240
  'sd-select__option--disabled': !!this.option.disabled,
@@ -8240,7 +8320,7 @@ class SdSelectOptionGroup {
8240
8320
  }
8241
8321
  };
8242
8322
  render() {
8243
- return (hAsync("div", { key: '1fb3028e6869ec0d77878dd577ad9f4f711edc38', class: {
8323
+ return (hAsync("div", { key: '2d1e55e35c77246a2df6856b2e7053cc21aabfc5', class: {
8244
8324
  'sd-select__option-group': true,
8245
8325
  'sd-select__option-group--selected': !!this.isSelected,
8246
8326
  'sd-select__option-group--disabled': !!this.option.disabled,
@@ -8249,10 +8329,10 @@ class SdSelectOptionGroup {
8249
8329
  'sd-select__option-group--group': this.option.type === 'group',
8250
8330
  'sd-select__option-group--subgroup': this.option.type === 'subgroup',
8251
8331
  'sd-select__option-group--item': this.option.type === 'item',
8252
- }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: '5d2f2564587c376d4708921e5eb68bc1d41039ab', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '0d4e839a0a091d47f0a07f8a248fbc71cf2b67a3', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
8332
+ }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: '33ce9985f9c94502d103d81b3678abdb732dfadb', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '262ec7ac68b981b5a69c21a5785c2c4ff5db7966', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
8253
8333
  e.preventDefault();
8254
8334
  this.handleClick(this.option, this.isSelected, e);
8255
- } })), hAsync("span", { key: '6ff97d5a3c84e97a4712d98f04b4cf5a5fef1895', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: '861bc3ff0ac64af5482783e7412f1ec706fe90e4', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
8335
+ } })), hAsync("span", { key: 'f9c89b082413da5914e166d53e1fd9bc269395ce', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'eaec735454f0b3c102397352d7863662fa933b24', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
8256
8336
  }
8257
8337
  static get style() { return sdSelectOptionGroupCss; }
8258
8338
  static get cmpMeta() { return {
@@ -8545,7 +8625,7 @@ let SdTable$1 = class SdTable {
8545
8625
  }; }
8546
8626
  };
8547
8627
 
8548
- const sdTableBackupCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:var(--table-container-height, auto);position:relative;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden;background:#ffffff}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;min-height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable{height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle--loading__spinner{position:absolute;top:0;left:0;width:var(--table-width, 100%);height:var(--table-container-height, 100%);min-height:var(--table-container-height, 100%);background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll{position:relative;height:var(--total-virtual-height, --table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr:not([aria-hidden=true]){width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]{padding:0;border:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]:not(.sd-table__virtual-row-spacer) td{display:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .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__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .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__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__container .sd-table__bottom .sd-table__no-data{padding-top:15%;color:#888888}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.sd-table__wrapper .sd-table__virtual-spacer,.sd-table__wrapper .sd-table__virtual-row-spacer{padding:0 !important}.sd-table__wrapper .sd-table__virtual-spacer td,.sd-table__wrapper .sd-table__virtual-row-spacer td{padding:0 !important;border:none}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton{width:100%;height:100%;background-image:repeating-linear-gradient(0deg, rgba(246, 246, 246, 0.3) 0px, rgba(225, 225, 225, 0.5) calc(var(--row-height, 44px) / 2), rgba(246, 246, 246, 0.3) var(--row-height, 44px));background-size:100% 200%;animation:skeleton-loading 1.5s ease-in-out infinite;position:relative}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton::before,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton::before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row-height, 44px) - 1px), #e1e1e1 calc(var(--row-height, 44px) - 1px), #e1e1e1 var(--row-height, 44px));pointer-events:none}.sd-table__wrapper .sd-table__skeleton-cell{width:100%;height:20px;background:linear-gradient(90deg, rgba(246, 246, 246, 0.3) 0%, rgba(225, 225, 225, 0.5) 50%, rgba(246, 246, 246, 0.3) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}";
8628
+ const sdTableBackupCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:var(--table-container-height, auto);position:relative;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden;background:#ffffff}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;min-height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable{height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle--loading__spinner{position:absolute;top:0;left:0;width:100%;height:var(--table-container-height, 100%);min-height:var(--table-container-height, 100%);background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll{position:relative;height:var(--total-virtual-height, --table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr:not([aria-hidden=true]){width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]{padding:0;border:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]:not(.sd-table__virtual-row-spacer) td{display:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .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__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .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__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__container .sd-table__bottom .sd-table__no-data{padding-top:15%;color:#888888}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.sd-table__wrapper .sd-table__virtual-spacer,.sd-table__wrapper .sd-table__virtual-row-spacer{padding:0 !important}.sd-table__wrapper .sd-table__virtual-spacer td,.sd-table__wrapper .sd-table__virtual-row-spacer td{padding:0 !important;border:none}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton{width:100%;height:100%;background-image:repeating-linear-gradient(0deg, rgba(246, 246, 246, 0.3) 0px, rgba(225, 225, 225, 0.5) calc(var(--row-height, 44px) / 2), rgba(246, 246, 246, 0.3) var(--row-height, 44px));background-size:100% 200%;animation:skeleton-loading 1.5s ease-in-out infinite;position:relative}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton::before,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton::before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row-height, 44px) - 1px), #e1e1e1 calc(var(--row-height, 44px) - 1px), #e1e1e1 var(--row-height, 44px));pointer-events:none}.sd-table__wrapper .sd-table__skeleton-cell{width:100%;height:20px;background:linear-gradient(90deg, rgba(246, 246, 246, 0.3) 0%, rgba(225, 225, 225, 0.5) 50%, rgba(246, 246, 246, 0.3) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}";
8549
8629
 
8550
8630
  class SdTable {
8551
8631
  constructor(hostRef) {
@@ -8719,6 +8799,12 @@ class SdTable {
8719
8799
  this.cachedContainerHeight = this.scrollContainer.clientHeight;
8720
8800
  this.cachedContainerWidth = this.scrollContainer.clientWidth;
8721
8801
  middle.addEventListener('scroll', this.onScroll, { passive: true });
8802
+ if (this.useVirtualScroll.vertical) {
8803
+ this.calculateVisibleRange();
8804
+ }
8805
+ if (this.useVirtualScroll.horizontal) {
8806
+ this.calculateVisibleColumnRange();
8807
+ }
8722
8808
  this.onScroll();
8723
8809
  }
8724
8810
  });
@@ -9182,16 +9268,16 @@ class SdTable {
9182
9268
  }, "aria-hidden": "true" }, hAsync("div", { class: "sd-table__skeleton-cell" })));
9183
9269
  }
9184
9270
  render() {
9185
- return (hAsync(Host, { key: '8c01d8c3b3428d0fccb37e337fd12412c7aee51a' }, hAsync("div", { key: 'be41d64f4b9daaa1440f2a89e253ce487894758e', class: "sd-table__wrapper", style: {
9271
+ return (hAsync(Host, { key: '85b4655b2ee298d535add2e43c2ef73b8c816716' }, hAsync("div", { key: '9fc71a34045a725db9fa19fec9954d1edb90f1e4', class: "sd-table__wrapper", style: {
9186
9272
  '--table-width': this.width,
9187
9273
  '--table-height': this.height,
9188
- } }, hAsync("div", { key: '580c4ca69d5374585eeacc756561e5caf2ea6e29', class: "sd-table__container", style: {
9274
+ } }, hAsync("div", { key: 'dcb78c1bac32c68bc5ac81beece5ee8ca74025ba', class: "sd-table__container", style: {
9189
9275
  '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
9190
- } }, hAsync("div", { key: '2832a6e9078923daeefa28512450950abfca0aad', class: {
9276
+ } }, hAsync("div", { key: 'e0bb087930f0cf07c06c6f5684a5b26fa5e25a02', class: {
9191
9277
  'sd-table__middle': true,
9192
9278
  'sd-table__middle--scrollable': this.paginatedRows.length > 0,
9193
9279
  'sd-table__middle--loading': this.isLoading,
9194
- } }, this.isLoading && (hAsync("div", { key: '696cc35d6d3c58dabf92aa49dbff9a7034a0ed64', class: "sd-table__middle--loading__spinner" }, hAsync("sd-loading-spinner", { key: '8cbd272006b64c4a6e10c87c58313a0792358451' }))), hAsync("table", { key: 'de78dba38361cfebe39f8c3cddb57a1c93861ff6', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), hAsync("div", { key: '662407b29c2ea446d96553dd548bec11e8179185', class: "sd-table__bottom" }, !this.paginatedRows.length && (hAsync("div", { key: '3a475142c5da9cc40f92b761923415893a1366fa', class: "sd-table__no-data" }, hAsync("slot", { key: '49e90e85516b6656c7019b4b33a50f6b36d949a8', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (hAsync("div", { key: '460a669cb3841fdc7745e4acb774729910890b42', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '971f5e41f8df09f4455cdf41f969e5f47d2aac99', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: 'ed37b8efc95ae51bf4c903a5c7c5a068ec9bfcca', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => this.changeRowsPerPage(e.detail.value) })))))));
9280
+ } }, this.isLoading && (hAsync("div", { key: '4f36b5fc670aa98774e565b000cc1623a6cae0af', class: "sd-table__middle--loading__spinner" }, hAsync("sd-loading-spinner", { key: '2e794ac56824bfad1f9f42482b75498e7f2ca70c' }))), hAsync("table", { key: 'a4017ae90c8f932c22b26d7f81c9fc13785e52d0', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), hAsync("div", { key: 'c7b008d66c47442d25a977d76b7b6dd266d7f008', class: "sd-table__bottom" }, !this.paginatedRows.length && (hAsync("div", { key: '20235f4747c2396710b44d46ea1da659156bb9ca', class: "sd-table__no-data" }, hAsync("slot", { key: '432a8669c4942eb92c4bce7f0b08cb9cb1f9f6e3', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (hAsync("div", { key: 'f9f6dc05c1004b03e10ece4c091d67ca564b1633', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: 'd7efd361091fe9725e8c79289501506a779e1111', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '401d35d85c2fc78094c267f27d74055108179f9e', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => this.changeRowsPerPage(e.detail.value) })))))));
9195
9281
  }
9196
9282
  static get watchers() { return {
9197
9283
  "columns": ["handleColumnsChange"],
@@ -9319,7 +9405,7 @@ class SdTbody {
9319
9405
  registerInstance(this, hostRef);
9320
9406
  }
9321
9407
  render() {
9322
- return (hAsync(Host, { key: 'f981fe2f39d8d1f292f018fba5f6f28f6606fc12' }, hAsync("slot", { key: 'ae556a0c16e782d1842fabc1cb54a495b88f1ce5' })));
9408
+ return (hAsync(Host, { key: 'aa5030bb9713c355685de66e15db8b702744c0bc' }, hAsync("slot", { key: '2bfed556b78fc92f8f6b4c574f976a7f0a3c36a8' })));
9323
9409
  }
9324
9410
  static get style() { return sdTbodyCss; }
9325
9411
  static get cmpMeta() { return {
@@ -9343,11 +9429,11 @@ class SdTd {
9343
9429
  tdStyle;
9344
9430
  tdClass;
9345
9431
  render() {
9346
- return (hAsync(Host, { key: '3fe3f8f4ec5b068bda0edd22ebbc5c973ae75b15', role: "cell", class: {
9432
+ return (hAsync(Host, { key: '6459518995f28a8138b3f669876c90dd24e610c2', role: "cell", class: {
9347
9433
  'sd-td': true,
9348
9434
  [`sd-td--${this.align}`]: true,
9349
9435
  [this.tdClass || '']: Boolean(this.tdClass),
9350
- }, style: this.tdStyle }, hAsync("slot", { key: 'f94a99bafb7723389304e01f809b3003deda067c' })));
9436
+ }, style: this.tdStyle }, hAsync("slot", { key: 'bf51d35dee9adb6a88b29a6c51be9f73ae1ab3b5' })));
9351
9437
  }
9352
9438
  static get style() { return sdTdCss; }
9353
9439
  static get cmpMeta() { return {
@@ -9372,7 +9458,7 @@ class SdTh {
9372
9458
  registerInstance(this, hostRef);
9373
9459
  }
9374
9460
  render() {
9375
- return (hAsync(Host, { key: '59aee067627e3ac7c23ea5d9f9401c19a00203bd', role: "columnheader" }, hAsync("slot", { key: 'ea015f9ebcdccd3e08aab46af4e2a8bcb46e4a3a' })));
9461
+ return (hAsync(Host, { key: 'a9adef2bdfd7dd0a52a55fffb40db6511db5747e', role: "columnheader" }, hAsync("slot", { key: 'd4af30df5d6a4a9140a9d10e0f3948de088f8c18' })));
9376
9462
  }
9377
9463
  static get style() { return sdThCss; }
9378
9464
  static get cmpMeta() { return {
@@ -9433,20 +9519,20 @@ class SdTooltip {
9433
9519
  : {
9434
9520
  onClick: () => (this.showTooltip = !this.showTooltip),
9435
9521
  };
9436
- return (hAsync(Fragment, { key: 'ca85f7063d836f7a33d893d262aea709e0db1d00' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (hAsync("sd-tooltip-portal", { key: 'ab8656db09fc630085a684ef124486551e33f910', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, hAsync("div", { key: 'ccd2369218d5b4dcb23280760c584f214beea932', class: {
9522
+ return (hAsync(Fragment, { key: 'ca1fc3ffdb493ee2aeb0ef9ef874a164d50a1d34' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (hAsync("sd-tooltip-portal", { key: '840728261961211b5d12e6bf6c97aa044f97f133', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, hAsync("div", { key: '80933fad7b61af35ba41f171848c431ee4b0ff0e', class: {
9437
9523
  'sd-tooltip-menu': true,
9438
9524
  [`sd-tooltip-menu--${this.type}`]: true,
9439
9525
  [`sd-tooltip-menu--${this.placement}`]: true,
9440
9526
  'sd-tooltip-menu--with-close': this.useClose,
9441
9527
  [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
9442
9528
  [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
9443
- } }, hAsync("i", { key: '077a1c19e4fa7a54a80dff168950ee0327240724', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '09d265c0412099b0bc64e6a5297011d7f4e74bb3', class: {
9529
+ } }, hAsync("i", { key: 'c166fc91a2f49840dfea98c4ca1010892e571b48', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '58a04b43a4f3333aa9e34d2c1dda7f03e9493e21', class: {
9444
9530
  [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
9445
- } })), hAsync("div", { key: '13a0d079cae19cf77c55b9aa3b8325dc1d4daf82', class: "sd-tooltip-menu__content", ref: el => {
9531
+ } })), hAsync("div", { key: 'd49d44d196c266482974beef4da124f32ec39825', class: "sd-tooltip-menu__content", ref: el => {
9446
9532
  if (el && this.slotContent && !el.hasChildNodes()) {
9447
9533
  el.appendChild(this.slotContent.cloneNode(true));
9448
9534
  }
9449
- } }, !this.slotContent && hAsync("span", { key: '79315652fc9db9aca0f06ef0f402d3302b909275' }, this.el.textContent)), this.useClose && (hAsync("div", { key: '5ab0323020a5d3f2c13d690a906fde8de9df36c9', class: "sd-tooltip-menu__close-button" }, hAsync("button", { key: 'deed089b5bb820f54471d44ff0c69e69ffcddf22', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '6c93da0c7f425ad1111b68c508476db74462e2ad', name: "close", size: "12", color: "#AAAAAA" })))))))));
9535
+ } }, !this.slotContent && hAsync("span", { key: '5543dd3bc313e033379da9b3e0c4b4f929ec899c' }, this.el.textContent)), this.useClose && (hAsync("div", { key: 'e32069afe16667a1bbfcc2e57ef6f2888fd9a5d6', class: "sd-tooltip-menu__close-button" }, hAsync("button", { key: '913909f8479496c9344df5d64ba3eb9e5a073658', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: 'ebde71b66b5b805d8ca99911ecfe9e6319a1f9be', name: "close", size: "12", color: "#AAAAAA" })))))))));
9450
9536
  }
9451
9537
  static get style() { return sdTooltipCss; }
9452
9538
  static get cmpMeta() { return {
@@ -9622,7 +9708,7 @@ class SdTooltipPortal {
9622
9708
  this.sdClose.emit();
9623
9709
  }
9624
9710
  render() {
9625
- return hAsync("slot", { key: '959737d1d7012ea468ab11bf2f1a8444e5274d4e' });
9711
+ return hAsync("slot", { key: 'b8652906919bc46c2f36710de6e65b33276bf31a' });
9626
9712
  }
9627
9713
  static get cmpMeta() { return {
9628
9714
  "$flags$": 777,
@@ -9648,7 +9734,7 @@ class SdTr {
9648
9734
  registerInstance(this, hostRef);
9649
9735
  }
9650
9736
  render() {
9651
- return (hAsync(Host, { key: '90de593581b21ca801462331e50126899946bf43', role: "row" }, hAsync("slot", { key: '58eb2f9b52a36495afe40899d45bd6d1ba62b5d4' })));
9737
+ return (hAsync(Host, { key: '18a0e95b7264b495bd15aeb7c3a704dac938e140', role: "row" }, hAsync("slot", { key: '83ac4ded200f5e7b18a01d2055859e1093e34d6c' })));
9652
9738
  }
9653
9739
  static get style() { return sdTrCss; }
9654
9740
  static get cmpMeta() { return {
@@ -9678,6 +9764,7 @@ registerComponents([
9678
9764
  SdPopover,
9679
9765
  SdPortal,
9680
9766
  SdProgress,
9767
+ SdRadioGroup,
9681
9768
  SdSelect,
9682
9769
  SdSelectMultiple,
9683
9770
  SdSelectMultipleGroup,
package/package.json CHANGED
@@ -1,95 +1,95 @@
1
- {
2
- "name": "@sellmate/design-system",
3
- "version": "0.0.49",
4
- "description": "Sellmate Design System - Web Components Library built with Stencil",
5
- "keywords": [
6
- "web-components",
7
- "stencil",
8
- "design-system",
9
- "ui-library"
10
- ],
11
- "main": "dist/index.cjs.js",
12
- "module": "dist/index.js",
13
- "types": "dist/types/index.d.ts",
14
- "collection": "dist/collection/collection-manifest.json",
15
- "collection:main": "dist/collection/index.js",
16
- "unpkg": "dist/design-system/design-system.esm.js",
17
- "exports": {
18
- ".": {
19
- "import": "./dist/design-system/design-system.esm.js",
20
- "require": "./dist/design-system/design-system.cjs.js"
21
- },
22
- "./dist/components/*": "./dist/components/*",
23
- "./loader": {
24
- "import": "./loader/index.js",
25
- "require": "./loader/index.cjs",
26
- "types": "./loader/index.d.ts"
27
- },
28
- "./hydrate": {
29
- "types": "./hydrate/index.d.ts",
30
- "import": "./hydrate/index.mjs",
31
- "require": "./hydrate/index.js",
32
- "default": "./hydrate/index.js"
33
- }
34
- },
35
- "repository": {
36
- "type": "git",
37
- "url": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system.git"
38
- },
39
- "homepage": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system/-/blob/main/README.md?ref_type=heads",
40
- "bugs": {
41
- "url": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system/-/issues"
42
- },
43
- "files": [
44
- "dist/",
45
- "loader/",
46
- "hydrate/"
47
- ],
48
- "scripts": {
49
- "build": "stencil build",
50
- "start": "stencil build --dev --watch --serve",
51
- "test": "stencil test --spec --e2e",
52
- "test.watch": "stencil test --spec --e2e --watchAll",
53
- "generate": "stencil generate",
54
- "storybook": "storybook dev -p 6006",
55
- "build-storybook": "storybook build",
56
- "chromatic": "npx chromatic --project-token=chpt_d022d502c83da77"
57
- },
58
- "devDependencies": {
59
- "@chromatic-com/storybook": "^4.1.1",
60
- "@stencil/core": "^4.39.0",
61
- "@stencil/eslint-plugin": "^1.1.0",
62
- "@stencil/sass": "^3.2.2",
63
- "@storybook/addon-a11y": "^9.1.10",
64
- "@storybook/addon-docs": "^9.1.10",
65
- "@storybook/addon-vitest": "^9.1.10",
66
- "@storybook/web-components-vite": "^9.1.10",
67
- "@types/jest": "^29.5.14",
68
- "@types/node": "^22.13.5",
69
- "@types/react": "^19.2.2",
70
- "@types/react-dom": "^19.2.2",
71
- "chromatic": "^12.2.0",
72
- "eslint": "^9.37.0",
73
- "eslint-config-prettier": "^10.1.8",
74
- "eslint-plugin-import": "^2.32.0",
75
- "eslint-plugin-jsx-a11y": "^6.10.2",
76
- "eslint-plugin-prettier": "^5.5.4",
77
- "eslint-plugin-simple-import-sort": "^12.1.1",
78
- "eslint-plugin-storybook": "^9.1.10",
79
- "jest": "^29.7.0",
80
- "jest-cli": "^29.7.0",
81
- "puppeteer": "^24.3.0"
82
- },
83
- "license": "MIT",
84
- "author": {
85
- "name": "MeeKyeong Kim",
86
- "email": "kmeijjing@gmail.com"
87
- },
88
- "publishConfig": {
89
- "access": "public"
90
- },
91
- "dependencies": {
92
- "@stencil/react-output-target": "^1.2.0",
93
- "@stencil/vue-output-target": "^0.11.8"
94
- }
95
- }
1
+ {
2
+ "name": "@sellmate/design-system",
3
+ "version": "0.0.50",
4
+ "description": "Sellmate Design System - Web Components Library built with Stencil",
5
+ "keywords": [
6
+ "web-components",
7
+ "stencil",
8
+ "design-system",
9
+ "ui-library"
10
+ ],
11
+ "main": "dist/index.cjs.js",
12
+ "module": "dist/index.js",
13
+ "types": "dist/types/index.d.ts",
14
+ "collection": "dist/collection/collection-manifest.json",
15
+ "collection:main": "dist/collection/index.js",
16
+ "unpkg": "dist/design-system/design-system.esm.js",
17
+ "exports": {
18
+ ".": {
19
+ "import": "./dist/design-system/design-system.esm.js",
20
+ "require": "./dist/design-system/design-system.cjs.js"
21
+ },
22
+ "./dist/components/*": "./dist/components/*",
23
+ "./loader": {
24
+ "import": "./loader/index.js",
25
+ "require": "./loader/index.cjs",
26
+ "types": "./loader/index.d.ts"
27
+ },
28
+ "./hydrate": {
29
+ "types": "./hydrate/index.d.ts",
30
+ "import": "./hydrate/index.mjs",
31
+ "require": "./hydrate/index.js",
32
+ "default": "./hydrate/index.js"
33
+ }
34
+ },
35
+ "repository": {
36
+ "type": "git",
37
+ "url": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system.git"
38
+ },
39
+ "homepage": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system/-/blob/main/README.md?ref_type=heads",
40
+ "bugs": {
41
+ "url": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system/-/issues"
42
+ },
43
+ "files": [
44
+ "dist/",
45
+ "loader/",
46
+ "hydrate/"
47
+ ],
48
+ "scripts": {
49
+ "build": "stencil build",
50
+ "start": "stencil build --dev --watch --serve",
51
+ "test": "stencil test --spec --e2e",
52
+ "test.watch": "stencil test --spec --e2e --watchAll",
53
+ "generate": "stencil generate",
54
+ "storybook": "storybook dev -p 6006",
55
+ "build-storybook": "storybook build",
56
+ "chromatic": "npx chromatic --project-token=chpt_d022d502c83da77"
57
+ },
58
+ "devDependencies": {
59
+ "@chromatic-com/storybook": "^4.1.1",
60
+ "@stencil/core": "^4.39.0",
61
+ "@stencil/eslint-plugin": "^1.1.0",
62
+ "@stencil/sass": "^3.2.2",
63
+ "@storybook/addon-a11y": "^9.1.10",
64
+ "@storybook/addon-docs": "^9.1.10",
65
+ "@storybook/addon-vitest": "^9.1.10",
66
+ "@storybook/web-components-vite": "^9.1.10",
67
+ "@types/jest": "^29.5.14",
68
+ "@types/node": "^22.13.5",
69
+ "@types/react": "^19.2.2",
70
+ "@types/react-dom": "^19.2.2",
71
+ "chromatic": "^12.2.0",
72
+ "eslint": "^9.37.0",
73
+ "eslint-config-prettier": "^10.1.8",
74
+ "eslint-plugin-import": "^2.32.0",
75
+ "eslint-plugin-jsx-a11y": "^6.10.2",
76
+ "eslint-plugin-prettier": "^5.5.4",
77
+ "eslint-plugin-simple-import-sort": "^12.1.1",
78
+ "eslint-plugin-storybook": "^9.1.10",
79
+ "jest": "^29.7.0",
80
+ "jest-cli": "^29.7.0",
81
+ "puppeteer": "^24.3.0"
82
+ },
83
+ "license": "MIT",
84
+ "author": {
85
+ "name": "MeeKyeong Kim",
86
+ "email": "kmeijjing@gmail.com"
87
+ },
88
+ "publishConfig": {
89
+ "access": "public"
90
+ },
91
+ "dependencies": {
92
+ "@stencil/react-output-target": "^1.2.0",
93
+ "@stencil/vue-output-target": "^0.11.8"
94
+ }
95
+ }
@@ -1 +0,0 @@
1
- {"version":3,"file":"color-Oz29vj7L.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,18 +0,0 @@
1
- 'use strict';
2
-
3
- var color = require('./color-Oz29vj7L.js');
4
-
5
- const colors = color.colors;
6
- // 주어진 문자열이 color.json의 키이면 매핑된 HEX를 반환하고,
7
- // 아닐 경우 원문 그대로를 반환합니다. 값이 falsy면 기본 색상으로 대체합니다.
8
- function resolveColor(input, fallback = '#025497') {
9
- if (!input)
10
- return fallback;
11
- const mapped = colors[input];
12
- return mapped || input;
13
- }
14
-
15
- exports.resolveColor = resolveColor;
16
- //# sourceMappingURL=resolveColor-CauSLF0s.js.map
17
-
18
- //# sourceMappingURL=resolveColor-CauSLF0s.js.map