@sellmate/design-system 1.0.75 → 1.0.76

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 (173) hide show
  1. package/dist/cjs/design-system.cjs.js +1 -1
  2. package/dist/cjs/index.cjs.js +5 -0
  3. package/dist/cjs/loader.cjs.js +1 -1
  4. package/dist/cjs/sd-button_4.cjs.entry.js +2 -2
  5. package/dist/cjs/sd-ghost-button.cjs.entry.js +10 -5
  6. package/dist/cjs/sd-modal-container.cjs.entry.js +76 -68
  7. package/dist/cjs/sd-pagination_5.cjs.entry.js +889 -0
  8. package/dist/cjs/sd-radio-button.cjs.entry.js +6 -1
  9. package/dist/cjs/sd-select-v2-list-item_4.cjs.entry.js +65 -5
  10. package/dist/cjs/sd-switch.cjs.entry.js +1 -1
  11. package/dist/cjs/sd-table.cjs.entry.js +167 -20
  12. package/dist/cjs/sd-tabs.cjs.entry.js +1 -1
  13. package/dist/cjs/sd-tag.cjs.entry.js +2 -2
  14. package/dist/cjs/sd-td.cjs.entry.js +53 -1
  15. package/dist/cjs/sd-text-link.cjs.entry.js +3 -3
  16. package/dist/cjs/sd-textarea.cjs.entry.js +1 -1
  17. package/dist/cjs/sd-toast-container.cjs.entry.js +1 -1
  18. package/dist/cjs/sd-toast.cjs.entry.js +2 -2
  19. package/dist/cjs/sd-toggle.cjs.entry.js +1 -1
  20. package/dist/collection/components/sd-ghost-button/sd-ghost-button.js +10 -5
  21. package/dist/collection/components/sd-modal-container/sd-modal-container.js +77 -71
  22. package/dist/collection/components/sd-radio-button/sd-radio-button.js +6 -1
  23. package/dist/collection/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.js +103 -3
  24. package/dist/collection/components/sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.js +2 -2
  25. package/dist/collection/components/sd-select-v2/sd-select-v2.js +82 -4
  26. package/dist/collection/components/sd-switch/sd-switch.js +1 -1
  27. package/dist/collection/components/sd-table/sd-table.css +1 -1
  28. package/dist/collection/components/sd-table/sd-table.js +170 -21
  29. package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +7 -2
  30. package/dist/collection/components/sd-table/sd-td/sd-td.js +91 -1
  31. package/dist/collection/components/sd-table/sd-thead/sd-thead.js +9 -4
  32. package/dist/collection/components/sd-table/sd-tr/sd-tr.css +8 -0
  33. package/dist/collection/components/sd-table/sd-tr/sd-tr.js +62 -12
  34. package/dist/collection/components/sd-tabs/sd-tabs.js +1 -1
  35. package/dist/collection/components/sd-tag/sd-tag.js +2 -2
  36. package/dist/collection/components/sd-text-link/sd-text-link.js +3 -3
  37. package/dist/collection/components/sd-textarea/sd-textarea.js +1 -1
  38. package/dist/collection/components/sd-toast/sd-toast.js +2 -2
  39. package/dist/collection/components/sd-toast-container/sd-toast-container.js +1 -1
  40. package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
  41. package/dist/collection/components/sd-tooltip/sd-tooltip.js +2 -2
  42. package/dist/collection/utils/modal.js +5 -0
  43. package/dist/components/index.js +1 -1
  44. package/dist/components/{p-BALOEavB.js → p-6AvsuYqF.js} +1 -1
  45. package/dist/components/{p-CTwEbxRN.js → p-6PsyRF61.js} +1 -1
  46. package/dist/components/{p-DEBakAhm.js → p-7DKZPPev.js} +1 -1
  47. package/dist/components/p-BBD_1E3n.js +1 -0
  48. package/dist/components/p-BQvugXhH.js +1 -0
  49. package/dist/components/p-BRfPoWUn.js +1 -0
  50. package/dist/components/{p-CHFGWh0m.js → p-C-BOe23n.js} +1 -1
  51. package/dist/components/p-C7h8lwnU.js +1 -0
  52. package/dist/components/{p-SDBnyM8D.js → p-CUg9NH6y.js} +1 -1
  53. package/dist/components/{p-C3dI7f7C.js → p-CgMyz4NQ.js} +1 -1
  54. package/dist/components/p-Csfj4h1A.js +1 -0
  55. package/dist/components/{p-Bp0B8tcl.js → p-DAC3TaZV.js} +1 -1
  56. package/dist/components/p-DfOYYI9m.js +1 -0
  57. package/dist/components/{p-H-9uoufd.js → p-d4UB2UF7.js} +1 -1
  58. package/dist/components/p-eEC3ITv0.js +1 -0
  59. package/dist/components/{p-CWEeXx2E.js → p-nVHDJc9g.js} +1 -1
  60. package/dist/components/{p-D8fG9Yt7.js → p-rnbt1m4L.js} +1 -1
  61. package/dist/components/sd-action-modal.js +1 -1
  62. package/dist/components/sd-barcode-input.js +1 -1
  63. package/dist/components/sd-chip.js +1 -1
  64. package/dist/components/sd-confirm-modal.js +1 -1
  65. package/dist/components/sd-date-picker-calendar.js +1 -1
  66. package/dist/components/sd-date-picker.js +1 -1
  67. package/dist/components/sd-date-range-picker-calendar.js +1 -1
  68. package/dist/components/sd-date-range-picker.js +1 -1
  69. package/dist/components/sd-field.js +1 -1
  70. package/dist/components/sd-file-picker.js +1 -1
  71. package/dist/components/sd-ghost-button.js +1 -1
  72. package/dist/components/sd-guide.js +1 -1
  73. package/dist/components/sd-input.js +1 -1
  74. package/dist/components/sd-modal-container.js +1 -1
  75. package/dist/components/sd-number-input.js +1 -1
  76. package/dist/components/sd-popover.js +1 -1
  77. package/dist/components/sd-radio-button.js +1 -1
  78. package/dist/components/sd-select-dropdown.js +1 -1
  79. package/dist/components/sd-select-group.js +1 -1
  80. package/dist/components/sd-select-multiple-group.js +1 -1
  81. package/dist/components/sd-select-multiple.js +1 -1
  82. package/dist/components/sd-select-search-input.js +1 -1
  83. package/dist/components/sd-select-v2-listbox.js +1 -1
  84. package/dist/components/sd-select-v2-trigger.js +1 -1
  85. package/dist/components/sd-select-v2.js +1 -1
  86. package/dist/components/sd-select.js +1 -1
  87. package/dist/components/sd-switch.js +1 -1
  88. package/dist/components/sd-table.js +1 -1
  89. package/dist/components/sd-tabs.js +1 -1
  90. package/dist/components/sd-tag.js +1 -1
  91. package/dist/components/sd-tbody.js +1 -1
  92. package/dist/components/sd-td.js +1 -1
  93. package/dist/components/sd-text-link.js +1 -1
  94. package/dist/components/sd-textarea.js +1 -1
  95. package/dist/components/sd-thead.js +1 -1
  96. package/dist/components/sd-toast-container.js +1 -1
  97. package/dist/components/sd-toast.js +1 -1
  98. package/dist/components/sd-toggle.js +1 -1
  99. package/dist/components/sd-tooltip.js +1 -1
  100. package/dist/components/sd-tr.js +1 -1
  101. package/dist/design-system/design-system.esm.js +1 -1
  102. package/dist/design-system/index.esm.js +1 -1
  103. package/dist/design-system/p-0e1b27cc.entry.js +1 -0
  104. package/dist/design-system/p-11029f6e.entry.js +1 -0
  105. package/dist/design-system/{p-cc62c180.entry.js → p-140b40ab.entry.js} +1 -1
  106. package/dist/design-system/p-34f7345b.entry.js +1 -0
  107. package/dist/design-system/p-363c9451.entry.js +1 -0
  108. package/dist/design-system/{p-fdcfaa7c.entry.js → p-506f2b68.entry.js} +1 -1
  109. package/dist/design-system/{p-8200b5f2.entry.js → p-531a6a82.entry.js} +1 -1
  110. package/dist/design-system/p-55b65a41.entry.js +1 -0
  111. package/dist/design-system/{p-d1dfa0e1.entry.js → p-68d0d67e.entry.js} +1 -1
  112. package/dist/design-system/p-7fe3a466.entry.js +1 -0
  113. package/dist/design-system/{p-05a1c092.entry.js → p-9466cd93.entry.js} +1 -1
  114. package/dist/design-system/{p-33bec0e3.entry.js → p-b683f2fe.entry.js} +1 -1
  115. package/dist/design-system/p-c521e731.entry.js +1 -0
  116. package/dist/design-system/{p-16a15368.entry.js → p-c9eb70f5.entry.js} +1 -1
  117. package/dist/design-system/p-d1846df9.entry.js +1 -0
  118. package/dist/design-system/{p-2d154fe0.entry.js → p-fdb52620.entry.js} +1 -1
  119. package/dist/esm/design-system.js +1 -1
  120. package/dist/esm/index.js +5 -0
  121. package/dist/esm/loader.js +1 -1
  122. package/dist/esm/sd-button_4.entry.js +2 -2
  123. package/dist/esm/sd-ghost-button.entry.js +10 -5
  124. package/dist/esm/sd-modal-container.entry.js +76 -68
  125. package/dist/esm/sd-pagination_5.entry.js +883 -0
  126. package/dist/esm/sd-radio-button.entry.js +6 -1
  127. package/dist/esm/sd-select-v2-list-item_4.entry.js +65 -5
  128. package/dist/esm/sd-switch.entry.js +1 -1
  129. package/dist/esm/sd-table.entry.js +168 -21
  130. package/dist/esm/sd-tabs.entry.js +1 -1
  131. package/dist/esm/sd-tag.entry.js +2 -2
  132. package/dist/esm/sd-td.entry.js +53 -1
  133. package/dist/esm/sd-text-link.entry.js +3 -3
  134. package/dist/esm/sd-textarea.entry.js +1 -1
  135. package/dist/esm/sd-toast-container.entry.js +1 -1
  136. package/dist/esm/sd-toast.entry.js +2 -2
  137. package/dist/esm/sd-toggle.entry.js +1 -1
  138. package/dist/types/components/sd-ghost-button/sd-ghost-button.d.ts +1 -0
  139. package/dist/types/components/sd-modal-container/sd-modal-container.config.d.ts +1 -1
  140. package/dist/types/components/sd-modal-container/sd-modal-container.d.ts +6 -4
  141. package/dist/types/components/sd-radio-button/sd-radio-button.d.ts +1 -0
  142. package/dist/types/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.d.ts +9 -0
  143. package/dist/types/components/sd-select-v2/sd-select-v2.d.ts +4 -0
  144. package/dist/types/components/sd-table/sd-table.d.ts +17 -0
  145. package/dist/types/components/sd-table/sd-td/sd-td.d.ts +8 -0
  146. package/dist/types/components/sd-table/sd-tr/sd-tr.d.ts +4 -0
  147. package/dist/types/components.d.ts +52 -0
  148. package/hydrate/index.js +481 -141
  149. package/hydrate/index.mjs +481 -141
  150. package/package.json +1 -1
  151. package/dist/cjs/sd-pagination_2.cjs.entry.js +0 -427
  152. package/dist/cjs/sd-tbody.cjs.entry.js +0 -66
  153. package/dist/cjs/sd-thead.cjs.entry.js +0 -179
  154. package/dist/cjs/sd-tr.cjs.entry.js +0 -171
  155. package/dist/components/p-Bbs5Ws0k.js +0 -1
  156. package/dist/components/p-CgL8_FSD.js +0 -1
  157. package/dist/components/p-DuMkBStM.js +0 -1
  158. package/dist/components/p-vQDL-PZ8.js +0 -1
  159. package/dist/design-system/p-380198bc.entry.js +0 -1
  160. package/dist/design-system/p-6b537e2f.entry.js +0 -1
  161. package/dist/design-system/p-6e90fb80.entry.js +0 -1
  162. package/dist/design-system/p-7b77c65c.entry.js +0 -1
  163. package/dist/design-system/p-8f88bd67.entry.js +0 -1
  164. package/dist/design-system/p-ba5fea6f.entry.js +0 -1
  165. package/dist/design-system/p-be54d6bd.entry.js +0 -1
  166. package/dist/design-system/p-c3379a6e.entry.js +0 -1
  167. package/dist/design-system/p-dc07d618.entry.js +0 -1
  168. package/dist/design-system/p-ef09409c.entry.js +0 -1
  169. package/dist/design-system/p-f8237991.entry.js +0 -1
  170. package/dist/esm/sd-pagination_2.entry.js +0 -424
  171. package/dist/esm/sd-tbody.entry.js +0 -64
  172. package/dist/esm/sd-thead.entry.js +0 -177
  173. package/dist/esm/sd-tr.entry.js +0 -169
@@ -1 +0,0 @@
1
- import{r as e,c as t,h as s}from"./p-Bp7ytJz5.js";var i={default:"#888888",disabled:"#BBBBBB"},l={fontWeight:"400",fontSize:"12",lineHeight:"20"},r={default:"#222222",disabled:"#888888"},c={depth1:"12",depth2:"20",depth3:"28"},d={default:{fontWeight:"400",fontSize:"12",lineHeight:"20"},selected:{fontWeight:"700"}},o={default:"#FFFFFF",hover:"#0075FF"},h={default:"#222222",hover:"#FFFFFF",disabled:"#888888",selected:"#0075FF"},n={bg:{default:"#EFF6FF"},border:{color:"#E1E1E1",width:"1"}};const a="12",g="8",u={fontSize:l.fontSize,lineHeight:l.lineHeight,fontWeight:l.fontWeight},v={icon:{default:i.default,disabled:i.disabled},text:{default:r.default,disabled:r.disabled}},m="4",p="12",f={depth1:c.depth1,depth2:c.depth2,depth3:c.depth3},b="8",x={fontSize:d.default.fontSize,lineHeight:d.default.lineHeight,fontWeight:d.default.fontWeight,selectedFontWeight:d.selected.fontWeight},_={bg:{default:o.default,hover:o.hover},content:{default:h.default,hover:h.hover,disabled:h.disabled,selected:h.selected},depth1:{bg:n.bg.default,border:n.border.color,borderWidth:n.border.width},depth2:{bg:{middle:{bg:"#F6F6F6"}}.middle.bg}};function k(e){return e.reduce(((e,t)=>t.children?e+k(t.children):e+1),0)}function w(e,t){const s=t.toLowerCase();return e.reduce(((e,i)=>{const l=i.label.toLowerCase().includes(s);if(i.children){const s=w(i.children,t);s.length>0?e.push({...i,children:s}):l&&e.push({...i,children:[]})}else l&&e.push({...i});return e}),[])}const y=class{constructor(s){e(this,s),this.listItemClick=t(this,"sdListItemClick",7)}option;depth=1;isSelected=!1;isFocused=!1;useCheckbox=!1;countInfo;listItemClick;get isGroup(){return!!this.option.children}get isSelectable(){return!this.isGroup||this.useCheckbox}get depthKey(){return this.depth<=1?"depth1":2===this.depth?"depth2":"depth3"}get paddingLeft(){return`${f[this.depthKey]}px`}handleClick=e=>{e.stopPropagation(),!this.option.disabled&&this.isSelectable&&this.listItemClick.emit(this.option)};handleCheckboxClick=e=>{e.stopPropagation()};handleCheckboxUpdate=e=>{e.stopPropagation(),!this.option.disabled&&this.isSelectable&&this.listItemClick.emit(this.option)};render(){const e=this.isGroup,t=e&&1===this.depth,i=e&&2===this.depth,l={"--list-item-padding-y":`${m}px`,"--list-item-padding-left":this.paddingLeft,"--list-item-padding-right":`${p}px`,"--list-item-gap":`${b}px`,"--list-item-font-size":`${x.fontSize}px`,"--list-item-line-height":`${x.lineHeight}px`,"--list-item-font-weight":x.fontWeight,"--list-item-bg":t?_.depth1.bg:i?_.depth2.bg:_.bg.default,"--list-item-bg-hover":_.bg.hover,"--list-item-color":_.content.default,"--list-item-color-hover":_.content.hover,"--list-item-color-disabled":_.content.disabled,"--list-item-color-selected":_.content.selected,"--list-item-font-weight-selected":x.selectedFontWeight};return t&&(l["--list-item-border-top"]=`${_.depth1.borderWidth}px solid ${_.depth1.border}`),s("div",{key:"62974a8d1442730ca752b3fc11f151c4a5be4ad1",class:{"sd-select-v2-list-item":!0,"sd-select-v2-list-item--group":e,"sd-select-v2-list-item--depth1-group":t,"sd-select-v2-list-item--depth2-group":i,"sd-select-v2-list-item--selected":!0===this.isSelected,"sd-select-v2-list-item--indeterminate":null===this.isSelected,"sd-select-v2-list-item--focused":this.isFocused,"sd-select-v2-list-item--selectable":this.isSelectable&&!this.option.disabled,"sd-select-v2-list-item--disabled":!!this.option.disabled},style:l,onClick:this.handleClick},this.useCheckbox&&s("sd-checkbox",{key:"cf29df3617e45f3b9415b8da1beed7ba5918b8cd",value:null===this.isSelected?null:!!this.isSelected,disabled:this.option.disabled,inverse:this.isFocused&&!1!==this.isSelected,class:"sd-select-v2-list-item__checkbox",onClick:this.handleCheckboxClick,onSdUpdate:this.handleCheckboxUpdate}),s("span",{key:"478e566c74c0078ef72b90d836f67156e905bbac",class:"sd-select-v2-list-item__label"},this.option.label),this.countInfo&&s("span",{key:"0cde990cb1fff4898581c8c7d321c8669dfac226",class:"sd-select-v2-list-item__count"},"(",this.countInfo.selected,"/",this.countInfo.total,")"))}};y.style="sd-select-v2-list-item{display:block}sd-select-v2-list-item .sd-select-v2-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-v2-list-item .sd-select-v2-list-item--selectable{cursor:pointer}sd-select-v2-list-item .sd-select-v2-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-v2-list-item .sd-select-v2-list-item--depth2-group{font-weight:500}sd-select-v2-list-item .sd-select-v2-list-item--focused.sd-select-v2-list-item--selectable:not(.sd-select-v2-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--selected:not(.sd-select-v2-list-item--group){font-weight:var(--list-item-font-weight-selected);color:var(--list-item-color-selected)}sd-select-v2-list-item .sd-select-v2-list-item--selected.sd-select-v2-list-item--focused{color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-v2-list-item .sd-select-v2-list-item__label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-list-item .sd-select-v2-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-v2-list-item .sd-select-v2-list-item--group.sd-select-v2-list-item--focused .sd-select-v2-list-item__count{color:#ffffff}sd-select-v2-list-item .sd-select-v2-list-item__checkbox{flex-shrink:0}";const F=class{constructor(s){e(this,s),this.searchFilter=t(this,"sdSearchFilter",7),this.searchFocus=t(this,"sdSearchFocus",7)}isScrolled=!1;searchText="";searchFilter;searchFocus;inputEl;debounceTimer;focusRafId;componentDidLoad(){requestAnimationFrame((()=>{this.focusRafId=requestAnimationFrame((()=>{this.inputEl?.focus()}))}))}async sdFocus(){this.inputEl?.focus()}handleInput=e=>{this.searchText=e.target.value,this.debounceTimer&&clearTimeout(this.debounceTimer),this.debounceTimer=setTimeout((()=>{this.searchFilter.emit(this.searchText)}),1e3)};handleClear=e=>{e.stopPropagation(),this.searchText="",this.debounceTimer&&clearTimeout(this.debounceTimer),this.searchFilter.emit(""),this.inputEl?.focus()};disconnectedCallback(){this.focusRafId&&cancelAnimationFrame(this.focusRafId),this.debounceTimer&&clearTimeout(this.debounceTimer)}render(){return s("div",{key:"75c6b01fbe256bca732553a27711fa7197535688",class:{"sd-select-v2-list-item-search":!0,"sd-select-v2-list-item-search--scrolled":this.isScrolled}},s("div",{key:"b66cd053b89942f3de55feecdd0eee79b863eb0d",class:"sd-select-v2-list-item-search__inner"},s("sd-icon",{key:"bed6f00452187d1087b6bb4653c04e8babeaa277",name:"search",size:16,color:"grey_70",class:"sd-select-v2-list-item-search__icon"}),s("input",{key:"4c29192547fcf9ec2563b7d843b8e77a3eb900b1",ref:e=>{this.inputEl=e},type:"text",class:"sd-select-v2-list-item-search__input",placeholder:"검색어 입력",value:this.searchText,onInput:this.handleInput,onFocus:()=>this.searchFocus.emit()}),s("button",{key:"55f94ce6eb29cec10897259b894c3460d766268e",type:"button",class:{"sd-select-v2-list-item-search__clear":!0,"sd-select-v2-list-item-search__clear--hidden":!this.searchText},onClick:this.handleClear,tabindex:this.searchText?0:-1,"aria-hidden":this.searchText?"false":"true"},s("sd-icon",{key:"a7332ec5ecebf522797bb6db1fdc385c0dfa1abe",name:"close",size:12,color:"#888888"}))))}};F.style="sd-select-v2-list-item-search{display:block}sd-select-v2-list-item-search .sd-select-v2-list-item-search{padding:4px 8px;position:sticky;top:0;z-index:1;background:white}sd-select-v2-list-item-search .sd-select-v2-list-item-search--scrolled{box-shadow:0 2px 4px rgba(0, 0, 0, 0.08)}sd-select-v2-list-item-search .sd-select-v2-list-item-search__inner{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #CCCCCC;border-radius:4px;background:white}sd-select-v2-list-item-search .sd-select-v2-list-item-search__inner:focus-within{border-color:#0075FF}sd-select-v2-list-item-search .sd-select-v2-list-item-search__icon{flex-shrink:0}sd-select-v2-list-item-search .sd-select-v2-list-item-search__input{flex:1;border:none;outline:none;font-size:12px;line-height:20px;color:#222222;background:transparent;min-width:0}sd-select-v2-list-item-search .sd-select-v2-list-item-search__input::placeholder{color:#AAAAAA}sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:2px;border:none;background:transparent;cursor:pointer;border-radius:2px}sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear:hover{background:#F0F0F0}sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear--hidden{visibility:hidden;pointer-events:none}";const S=class{constructor(s){e(this,s),this.optionSelect=t(this,"sdOptionSelect",7)}type="default";options=[];value=null;emitValue=!1;triggerWidth="200px";maxWidth="640px";maxHeight="260px";searchKeyword="";isScrolled=!1;focusedIndex=-1;optionSelect;listEl;lastScrolledIndex=-1;keydownAttached=!1;suppressHover=!1;get isDepth(){return"default_depth"===this.type||"multi_depth"===this.type}get isMulti(){return"multi"===this.type||"multi_depth"===this.type}get showSearch(){return(this.isDepth?k(this.options):this.options.length)>=11}get filteredOptions(){if(!this.searchKeyword)return this.options;if(this.isDepth)return w(this.options,this.searchKeyword);const e=this.searchKeyword.toLowerCase();return this.options.filter((t=>t.label.toLowerCase().includes(e)))}get isEmpty(){return this.isDepth?0===k(this.filteredOptions)&&0===this.filteredOptions.length:0===this.filteredOptions.length}getSelectedValues(){return this.value&&Array.isArray(this.value)?this.emitValue?new Set(this.value):new Set(this.value.map((e=>e.value))):new Set}isOptionSelected(e){return this.isMulti?this.getSelectedValues().has(e.value):this.emitValue||null==this.value||"object"!=typeof this.value||Array.isArray(this.value)?this.value===e.value:this.value.value===e.value}getGroupSelectionState(e){if(!this.isMulti||!e.children)return!1;const t=this.getSelectedValues();if(0===t.size)return!1;const s=this.collectVisibleLeaves(e);if(0===s.length)return!1;const i=s.filter((e=>t.has(e.value))).length;return 0!==i&&(i===s.length||null)}getCountInfo(e){if(!this.isMulti||!e.children)return;const t=this.getSelectedValues(),s=this.collectVisibleLeaves(e);return{selected:s.filter((e=>t.has(e.value))).length,total:s.length}}findOriginalOption(e,t){for(const s of t){if(s.value===e)return s;if(s.children){const t=this.findOriginalOption(e,s.children);if(t)return t}}}collectLeaves(e){return e.children?e.children.flatMap((e=>this.collectLeaves(e))):[e]}collectVisibleLeaves(e){if(e.disabled)return[];if(!e.children)return[e];if(0===e.children.length){const t=this.findOriginalOption(e.value,this.options);return t?this.collectLeaves(t).filter((e=>!e.disabled)):[]}return e.children.flatMap((e=>this.collectVisibleLeaves(e)))}get navigableOptions(){const e=[],t=s=>{for(const i of s){const s=!!i.children;(!s||this.isMulti)&&!i.disabled&&e.push(i),s&&i.children&&i.children.length>0&&t(i.children)}};return t(this.filteredOptions),e}isOptionFocused(e){if(this.focusedIndex<0)return!1;const t=this.navigableOptions[this.focusedIndex];return!!t&&t.value===e.value}resetFocusOnFilter(){this.focusedIndex=this.navigableOptions.length>0?0:-1,this.suppressHover&&(document.removeEventListener("mousemove",this.releaseHoverSuppress,!0),this.suppressHover=!1)}handleSearchFilter=e=>{this.searchKeyword=e.detail};handleScroll=e=>{this.isScrolled=e.target.scrollTop>0};emitOptionSelect(e){this.optionSelect.emit({option:e,leaves:this.collectVisibleLeaves(e)})}handleOptionClick=e=>{e.stopPropagation(),this.emitOptionSelect(e.detail)};handleOptionHover=e=>{if(this.suppressHover)return;const t=this.navigableOptions.findIndex((t=>t.value===e.value));t>=0&&(this.focusedIndex=t)};releaseHoverSuppress=()=>{this.suppressHover=!1,document.removeEventListener("mousemove",this.releaseHoverSuppress,!0)};handleKeyDown=e=>{const t=this.navigableOptions;if("ArrowDown"===e.key){if(0===t.length)return;e.preventDefault(),e.stopPropagation(),this.focusedIndex=this.focusedIndex<0?0:(this.focusedIndex+1)%t.length,this.beginHoverSuppression()}else if("ArrowUp"===e.key){if(0===t.length)return;e.preventDefault(),e.stopPropagation(),this.focusedIndex=this.focusedIndex<=0?t.length-1:this.focusedIndex-1,this.beginHoverSuppression()}else if("Enter"===e.key){if(this.focusedIndex<0||this.focusedIndex>=t.length)return;e.preventDefault(),e.stopPropagation(),this.emitOptionSelect(t[this.focusedIndex])}};beginHoverSuppression(){this.suppressHover||(this.suppressHover=!0,document.addEventListener("mousemove",this.releaseHoverSuppress,!0))}scrollFocusedIntoView(){const e=this.listEl,t=e?.querySelector(".sd-select-v2-list-item--focused");if(!e||!t)return;const s=e.getBoundingClientRect(),i=t.getBoundingClientRect();i.top<s.top?e.scrollTop+=i.top-s.top:i.bottom>s.bottom&&(e.scrollTop+=i.bottom-s.bottom)}connectedCallback(){this.keydownAttached||(document.addEventListener("keydown",this.handleKeyDown,!0),this.keydownAttached=!0)}disconnectedCallback(){this.keydownAttached&&(document.removeEventListener("keydown",this.handleKeyDown,!0),this.keydownAttached=!1),this.suppressHover&&(document.removeEventListener("mousemove",this.releaseHoverSuppress,!0),this.suppressHover=!1)}componentDidRender(){this.focusedIndex!==this.lastScrolledIndex&&(this.lastScrolledIndex=this.focusedIndex,this.focusedIndex>=0&&this.scrollFocusedIntoView())}renderOptions(e,t=1){return e.map((e=>{const i=!!e.children;return[s("sd-select-v2-list-item",{option:e,depth:t,isSelected:i?this.getGroupSelectionState(e):this.isOptionSelected(e),isFocused:this.isOptionFocused(e),useCheckbox:this.isMulti,countInfo:this.getCountInfo(e),onSdListItemClick:this.handleOptionClick,onMouseEnter:()=>this.handleOptionHover(e)}),i&&e.children?this.renderOptions(e.children,t+1):null]}))}render(){return s("div",{key:"d4d80ebd565436cd929961a2f9ce50adf92c124b",class:"sd-select-v2-listbox",style:{"--listbox-trigger-width":this.triggerWidth,"--listbox-max-width":this.maxWidth,"--listbox-max-height":this.maxHeight,"--listbox-radius":"4px"}},this.showSearch&&s("sd-select-v2-list-item-search",{key:"bd549975fe6187aa7e77e718c8d2ba4a6d6e33de",isScrolled:this.isScrolled,onSdSearchFilter:this.handleSearchFilter}),s("div",{key:"4ac6a1512781942fef3e42d6ca32762962df1836",class:"sd-select-v2-listbox__list",onScroll:this.handleScroll,ref:e=>{this.listEl=e}},this.isEmpty?s("div",{class:"sd-select-v2-listbox__empty"},"표시할 항목이 없습니다."):this.isDepth?this.renderOptions(this.filteredOptions):this.filteredOptions.map((e=>s("sd-select-v2-list-item",{option:e,depth:1,isSelected:this.isOptionSelected(e),isFocused:this.isOptionFocused(e),useCheckbox:this.isMulti,onSdListItemClick:this.handleOptionClick,onMouseEnter:()=>this.handleOptionHover(e)})))))}static get watchers(){return{searchKeyword:[{resetFocusOnFilter:0}]}}};S.style=":host{display:block}:host .sd-select-v2-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}:host .sd-select-v2-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}:host .sd-select-v2-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}";const C=class{constructor(s){e(this,s),this.triggerClick=t(this,"sdTriggerClick",7),this.triggerFocus=t(this,"sdTriggerFocus",7),this.triggerBlur=t(this,"sdTriggerBlur",7)}displayText="";placeholder="선택";disabled=!1;isOpen=!1;triggerClick;triggerFocus;triggerBlur;triggerEl;async sdFocus(){this.disabled||this.triggerEl?.focus()}handleClick=()=>{this.disabled||this.triggerClick.emit()};handleFocus=()=>{this.triggerFocus.emit()};handleBlur=()=>{this.triggerBlur.emit()};render(){const e=!!this.displayText;return s("div",{key:"7c4f60c972c17b5954cbf0d0cc7ee38c8e6c16a3",ref:e=>{this.triggerEl=e},tabindex:this.disabled?-1:0,class:{"sd-select-v2-trigger":!0,"sd-select-v2-trigger--open":this.isOpen,"sd-select-v2-trigger--disabled":this.disabled},style:{"--trigger-padding-x":`${a}px`,"--trigger-gap":`${g}px`,"--trigger-font-size":`${u.fontSize}px`,"--trigger-line-height":`${u.lineHeight}px`,"--trigger-font-weight":u.fontWeight,"--trigger-color":this.disabled?v.text.disabled:e?v.text.default:v.icon.default,"--trigger-icon-color":this.disabled?v.icon.disabled:v.icon.default},onClick:this.handleClick,onFocus:this.handleFocus,onBlur:this.handleBlur},s("div",{key:"de5f5a44626fce29c5a83cf0a14dd03352d40b57",class:"sd-select-v2-trigger__content"},s("span",{key:"a36a013e9ef359160c2b9d24b42ee6f228aca302",class:"sd-select-v2-trigger__text"},e?this.displayText:this.placeholder),s("sd-icon",{key:"4bfcfce96fbe2008517ee26d7802d4492292faa5",name:"chevronDown",size:12,color:"var(--trigger-icon-color)",class:{"sd-select-v2-trigger__icon":!0,"sd-select-v2-trigger__icon--open":this.isOpen}})))}};C.style="sd-select-v2-trigger{display:block;width:100%;height:100%}sd-select-v2-trigger .sd-select-v2-trigger{display:flex;width:100%;height:100%;cursor:pointer;user-select:none;overflow:hidden;border-radius:3px}sd-select-v2-trigger .sd-select-v2-trigger--disabled{cursor:not-allowed}sd-select-v2-trigger .sd-select-v2-trigger__content{display:flex;align-items:center;gap:var(--trigger-gap);flex:1;padding:0 var(--trigger-padding-x);min-width:0}sd-select-v2-trigger .sd-select-v2-trigger__text{flex:1;font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-trigger .sd-select-v2-trigger__icon{flex-shrink:0;transition:transform 0.2s ease}sd-select-v2-trigger .sd-select-v2-trigger__icon--open{transform:rotate(180deg)}";export{y as sd_select_v2_list_item,F as sd_select_v2_list_item_search,S as sd_select_v2_listbox,C as sd_select_v2_trigger}
@@ -1 +0,0 @@
1
- import{r as t,a as s,h as i}from"./p-Bp7ytJz5.js";import{u as a,r as e,s as o,i as n,a as d}from"./p-DRVnqiWc.js";let l=0;const r=class{constructor(s){t(this,s)}get el(){return s(this)}autoRemove=!1;entry;isVisible=!1;backdropVisible=!1;layerRef;async open(t,s){const i="modal-"+ ++l,a=this.createConfirmModal(i,t);return this.attachModalEventListeners(i,a),this.mountEntry({id:i,modalEl:a,modalRef:s,persistent:!!t.persistent,closing:!1}),i}async openLoading(t,s){const i="modal-"+ ++l,a=this.createLoadingModal(i,t);return this.attachLoadingModalEventListeners(i,a),this.mountEntry({id:i,modalEl:a,modalRef:s,persistent:!!t.persistent,closing:!1}),i}async createCustom(t,s,i){const a="modal-"+ ++l;return t.setAttribute("data-modal-id",a),t.classList.add("sd-modal-container__modal"),this.attachModalEventListeners(a,t),this.mountEntry({id:a,modalEl:t,modalRef:i,persistent:!!s.persistent,closing:!1}),a}componentDidRender(){if(!this.entry||this.entry.closing||!this.layerRef)return;if(this.entry.modalEl.isConnected)return;const{id:t,modalEl:s}=this.entry;this.layerRef.appendChild(s),this.waitForModalReady(s).then((()=>{requestAnimationFrame((()=>{this.entry&&this.entry.id===t&&!this.entry.closing&&s.isConnected&&(this.backdropVisible=!0,s.classList.add("sd-modal-container__modal--visible"))}))}))}disconnectedCallback(){this.entry?.dismissTimerId&&clearTimeout(this.entry.dismissTimerId),this.entry&&a(this.entry.id)}async dismissById(t,s){this.entry?.id===t&&this.requestDismiss(s)}async update(t,s){this.entry&&this.entry.id===t&&!this.entry.closing&&("sd-loading-modal"!==this.entry.modalEl.tagName.toLowerCase()?this.applyProps(this.entry.modalEl,s):this.applyLoadingProps(this.entry.modalEl,s))}mountEntry(t){if(this.entry)throw new Error("[sd-modal-container] This instance already manages an active modal.");this.entry=t,this.backdropVisible=!1,this.isVisible=!0,e({id:t.id,persistent:t.persistent,requestClose:()=>this.dispatchClose(),shake:()=>this.shakeModal(t.modalEl),setZIndex:t=>{this.el.style.setProperty("--sd-modal-container-z-index",String(t))}})}attachModalEventListeners(t,s){s.addEventListener("sdOk",(()=>this.requestDismiss("confirm"))),s.addEventListener("sdCancel",(()=>this.requestDismiss("cancel"))),s.addEventListener("sdClose",(()=>this.requestDismiss("close")))}attachLoadingModalEventListeners(t,s){s.addEventListener("sdClick",(()=>{this.entry?.modalRef._triggerClick?.()}))}dispatchClose(){this.entry?.modalEl.dispatchEvent(new CustomEvent("sdClose"))}requestDismiss(t){const s=this.entry;if(!s||s.closing)return;s.modalEl.classList.remove("sd-modal-container__modal--visible");const i=setTimeout((()=>{this.finalizeDismiss(s.id)}),350);o(s.id,!1),this.entry={...s,closing:!0,dismissTimerId:i},this.backdropVisible=!1,"confirm"===t?s.modalRef._triggerOk():"cancel"===t?s.modalRef._triggerCancel():"close"===t&&s.modalRef._triggerClose()}finalizeDismiss(t){const s=this.entry;s&&s.id===t&&(s.dismissTimerId&&clearTimeout(s.dismissTimerId),s.modalEl.remove(),a(t),s.modalRef._triggerDismissed(),this.entry=void 0,this.backdropVisible=!1,this.isVisible=!1,this.autoRemove&&this.el.remove())}createConfirmModal(t,s){const i=document.createElement("sd-confirm-modal");return i.setAttribute("data-modal-id",t),i.classList.add("sd-modal-container__modal"),this.applyProps(i,s),i}createLoadingModal(t,s){const i=document.createElement("sd-loading-modal");return i.setAttribute("data-modal-id",t),i.classList.add("sd-modal-container__modal"),this.applyLoadingProps(i,s),i}applyLoadingProps(t,s){this.hasOwnProp(s,"state")&&this.setAttr(t,"state",s.state),this.hasOwnProp(s,"message")&&this.setAttr(t,"message",s.message),this.hasOwnProp(s,"useButton")&&(s.useButton?t.setAttribute("use-button",""):t.removeAttribute("use-button")),this.hasOwnProp(s,"buttonLabel")&&this.setAttr(t,"button-label",s.buttonLabel),this.hasOwnProp(s,"width")&&this.setAttr(t,"width",null!=s.width?String(s.width):void 0),this.hasOwnProp(s,"height")&&this.setAttr(t,"height",null!=s.height?String(s.height):void 0)}applyProps(t,s){this.hasOwnProp(s,"type")&&this.setAttr(t,"type",s.type),this.hasOwnProp(s,"title")&&this.setAttr(t,"modal-title",s.title),this.hasOwnProp(s,"titleClass")&&this.setAttr(t,"title-class",s.titleClass),this.hasOwnProp(s,"mainButtonLabel")&&this.setAttr(t,"main-button-label",s.mainButtonLabel),this.hasOwnProp(s,"mainButtonName")&&this.setAttr(t,"main-button-name",s.mainButtonName),this.hasOwnProp(s,"subButtonLabel")&&this.setAttr(t,"sub-button-label",s.subButtonLabel),this.hasOwnProp(s,"tagPreset")&&this.setAttr(t,"tag-preset",s.tagPreset),this.hasOwnProp(s,"tagLabel")&&this.setAttr(t,"tag-label",s.tagLabel),this.hasOwnProp(s,"slotLabel")&&this.setAttr(t,"slot-label",s.slotLabel),this.hasOwnProp(s,"topMessage")&&(t.topMessage=s.topMessage??[]),this.hasOwnProp(s,"bottomMessage")&&(t.bottomMessage=s.bottomMessage??[]),this.hasOwnProp(s,"tagContents")&&(t.tagContents=s.tagContents)}handleBackdropClick=()=>{this.entry&&n(this.entry.id)&&d(this.entry.id)};shakeModal(t){const s="sd-modal-container__modal--shake";t.classList.remove(s),t.addEventListener("animationend",(()=>t.classList.remove(s)),{once:!0}),requestAnimationFrame((()=>{t.classList.add(s)}))}waitForModalReady(t){const s=t.componentOnReady;return"function"==typeof s?s.call(t).then((()=>{})):new Promise((t=>{requestAnimationFrame((()=>{requestAnimationFrame((()=>t()))}))}))}hasOwnProp(t,s){return Object.prototype.hasOwnProperty.call(t,s)}setAttr(t,s,i){null!=i&&t.setAttribute(s,i)}render(){return this.isVisible&&this.entry?i("div",{class:"sd-modal-container"},i("div",{class:"sd-modal-container__layer","data-modal-id":this.entry.id,ref:t=>{this.layerRef=t}},i("div",{class:{"sd-modal-container__backdrop":!0,"sd-modal-container__backdrop--visible":this.backdropVisible},onClick:this.handleBackdropClick}))):null}};r.style="sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 997);pointer-events:none}sd-modal-container .sd-modal-container__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out;pointer-events:none}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1;pointer-events:auto}sd-modal-container .sd-modal-container__modal{position:relative;z-index:1;opacity:0;transform:scale(0);pointer-events:auto;transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}";export{r as sd_modal_container}
@@ -1,424 +0,0 @@
1
- import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-Bp7ytJz5.js';
2
- import { n as nanoid } from './index-CCwNgVmC.js';
3
-
4
- const pagination = {
5
- height: "24",
6
- paddingX: "6",
7
- radius: "6",
8
- gap: "12",
9
- move: {
10
- gap: "4"
11
- },
12
- icon: "12",
13
- typography: {
14
- "default": {
15
- fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
16
- fontSize: "12",
17
- fontWeight: "500",
18
- lineHeight: "20"},
19
- selected: {
20
- fontWeight: "700"}
21
- },
22
- item: {
23
- bg: {
24
- hover: "#EEEEEE",
25
- selected: "#E6F1FF"
26
- },
27
- content: {
28
- "default": "#555555",
29
- hover: "#004290",
30
- selected: "#004290"
31
- }
32
- }
33
- };
34
- var paginationTokens = {
35
- pagination: pagination
36
- };
37
-
38
- const PAGINATION_LAYOUT = {
39
- height: `${paginationTokens.pagination.height}px`,
40
- paddingX: `${paginationTokens.pagination.paddingX}px`,
41
- radius: `${paginationTokens.pagination.radius}px`,
42
- gap: `${paginationTokens.pagination.gap}px`,
43
- moveGap: `${paginationTokens.pagination.move.gap}px`,
44
- iconSize: Number(paginationTokens.pagination.icon),
45
- };
46
- const PAGINATION_TYPOGRAPHY = {
47
- fontFamily: paginationTokens.pagination.typography.default.fontFamily,
48
- fontSize: `${paginationTokens.pagination.typography.default.fontSize}px`,
49
- lineHeight: `${paginationTokens.pagination.typography.default.lineHeight}px`,
50
- fontWeightDefault: paginationTokens.pagination.typography.default.fontWeight,
51
- fontWeightSelected: paginationTokens.pagination.typography.selected.fontWeight,
52
- };
53
- const PAGINATION_COLORS = {
54
- contentDefault: paginationTokens.pagination.item.content.default,
55
- contentHover: paginationTokens.pagination.item.content.hover,
56
- contentSelected: paginationTokens.pagination.item.content.selected,
57
- bgHover: paginationTokens.pagination.item.bg.hover,
58
- bgSelected: paginationTokens.pagination.item.bg.selected,
59
- // TODO: 토큰 반영 후 교체 — nav 화살표 색상은 현재 토큰에 없음
60
- iconDefault: '#888888',
61
- };
62
-
63
- const sdPaginationCss = () => `sd-pagination{display:inline-flex}.sd-pagination{display:inline-flex;align-items:center;gap:var(--sd-pagination-gap);font-family:var(--sd-pagination-font-family)}.sd-pagination__group{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap);min-width:calc(var(--sd-pagination-height) * 2 + var(--sd-pagination-move-gap))}.sd-pagination__group--prev{justify-content:flex-end}.sd-pagination__group--next{justify-content:flex-start}.sd-pagination__numbers{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap)}.sd-pagination__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-height);height:var(--sd-pagination-height);padding:0;background:transparent;border:0;border-radius:var(--sd-pagination-radius);cursor:pointer;outline:none}.sd-pagination__nav:hover{background-color:var(--sd-pagination-bg-hover)}.sd-pagination__item{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-item-width);height:var(--sd-pagination-height);padding:0 var(--sd-pagination-padding-x);background:transparent;border:0;border-radius:var(--sd-pagination-radius);color:var(--sd-pagination-content);font-size:var(--sd-pagination-font-size);font-weight:var(--sd-pagination-font-weight-default);line-height:var(--sd-pagination-line-height);cursor:pointer;outline:none;box-sizing:border-box}.sd-pagination__item:hover{background-color:var(--sd-pagination-bg-hover);color:var(--sd-pagination-content-hover)}.sd-pagination__item--selected{background-color:var(--sd-pagination-bg-selected);color:var(--sd-pagination-content-selected);font-weight:var(--sd-pagination-font-weight-selected)}.sd-pagination__item--selected:hover{background-color:var(--sd-pagination-bg-selected);color:var(--sd-pagination-content-selected)}.sd-pagination__info{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap);height:var(--sd-pagination-height);padding:0 var(--sd-pagination-padding-x);color:var(--sd-pagination-content);font-size:var(--sd-pagination-font-size);font-weight:var(--sd-pagination-font-weight-default);line-height:var(--sd-pagination-line-height)}.sd-pagination__current{color:var(--sd-pagination-content-selected);font-weight:var(--sd-pagination-font-weight-selected)}`;
64
-
65
- const PER_PAGE = 10;
66
- const BUTTON_WIDTH = {
67
- 1: 24,
68
- 2: 34,
69
- 3: 40,
70
- 4: 48,
71
- 5: 56,
72
- };
73
- const SdPagination = class {
74
- constructor(hostRef) {
75
- registerInstance(this, hostRef);
76
- this.pageChange = createEvent(this, "sdPageChange", 7);
77
- }
78
- currentPage = 1;
79
- lastPage = 1;
80
- simple = false;
81
- pageChange;
82
- get pageNumbers() {
83
- const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
84
- const end = Math.min(start + PER_PAGE - 1, this.lastPage);
85
- return Array.from({ length: end - start + 1 }, (_, i) => start + i);
86
- }
87
- get buttonWidth() {
88
- const lastPageNum = this.pageNumbers.at(-1) ?? 1;
89
- const maxPageLength = lastPageNum.toString().length;
90
- return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];
91
- }
92
- get isFirstGroup() {
93
- return this.currentPage <= PER_PAGE;
94
- }
95
- get isLastGroup() {
96
- const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
97
- return startPageGroup + PER_PAGE - 1 >= this.lastPage;
98
- }
99
- handlePageChange = (page) => {
100
- if (page < 1 || page > this.lastPage)
101
- return;
102
- this.currentPage = page;
103
- this.pageChange.emit(page);
104
- };
105
- handleGroupChange = (direction) => {
106
- const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;
107
- const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);
108
- this.handlePageChange(newPage);
109
- };
110
- renderNavButton(iconName, ariaLabel, onClick) {
111
- return (h("button", { type: "button", class: "sd-pagination__nav", "aria-label": ariaLabel, onClick: onClick }, h("sd-icon", { name: iconName, size: PAGINATION_LAYOUT.iconSize, color: PAGINATION_COLORS.iconDefault })));
112
- }
113
- renderPrevButtons() {
114
- if (this.simple) {
115
- if (this.currentPage <= 1)
116
- return null;
117
- return (h(Fragment, null, this.renderNavButton('chevronLeftEnd', 'Go to first page', () => this.handlePageChange(1)), this.renderNavButton('chevronLeft', 'Go to previous page', () => this.handlePageChange(this.currentPage - 1))));
118
- }
119
- if (this.isFirstGroup)
120
- return null;
121
- return (h(Fragment, null, this.renderNavButton('chevronLeftEnd', 'Go to first page', () => this.handlePageChange(1)), this.renderNavButton('chevronLeft', 'Go to previous page group', () => this.handleGroupChange('backward'))));
122
- }
123
- renderNextButtons() {
124
- if (this.simple) {
125
- if (this.currentPage >= this.lastPage)
126
- return null;
127
- return (h(Fragment, null, this.renderNavButton('chevronRight', 'Go to next page', () => this.handlePageChange(this.currentPage + 1)), this.renderNavButton('chevronRightEnd', 'Go to last page', () => this.handlePageChange(this.lastPage))));
128
- }
129
- if (this.isLastGroup)
130
- return null;
131
- return (h(Fragment, null, this.renderNavButton('chevronRight', 'Go to next page group', () => this.handleGroupChange('forward')), this.renderNavButton('chevronRightEnd', 'Go to last page', () => this.handlePageChange(this.lastPage))));
132
- }
133
- render() {
134
- const cssVars = {
135
- '--sd-pagination-height': PAGINATION_LAYOUT.height,
136
- '--sd-pagination-padding-x': PAGINATION_LAYOUT.paddingX,
137
- '--sd-pagination-radius': PAGINATION_LAYOUT.radius,
138
- '--sd-pagination-gap': PAGINATION_LAYOUT.gap,
139
- '--sd-pagination-move-gap': PAGINATION_LAYOUT.moveGap,
140
- '--sd-pagination-font-family': PAGINATION_TYPOGRAPHY.fontFamily,
141
- '--sd-pagination-font-size': PAGINATION_TYPOGRAPHY.fontSize,
142
- '--sd-pagination-line-height': PAGINATION_TYPOGRAPHY.lineHeight,
143
- '--sd-pagination-font-weight-default': PAGINATION_TYPOGRAPHY.fontWeightDefault,
144
- '--sd-pagination-font-weight-selected': PAGINATION_TYPOGRAPHY.fontWeightSelected,
145
- '--sd-pagination-content': PAGINATION_COLORS.contentDefault,
146
- '--sd-pagination-content-hover': PAGINATION_COLORS.contentHover,
147
- '--sd-pagination-content-selected': PAGINATION_COLORS.contentSelected,
148
- '--sd-pagination-bg-hover': PAGINATION_COLORS.bgHover,
149
- '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
150
- '--sd-pagination-item-width': `${this.buttonWidth}px`,
151
- };
152
- return (h("div", { key: '386fdd2d1c0b5a7284c299201f19fd3384670ab1', class: {
153
- 'sd-pagination': true,
154
- 'sd-pagination--simple': this.simple,
155
- }, style: cssVars }, h("div", { key: 'cd73997ae59f87b70c31e88fd5b4246bd6044bd0', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
156
- 'sd-pagination__item': true,
157
- 'sd-pagination__item--selected': this.currentPage === n,
158
- }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '86389ea83d2965efdd938d2f9b2e2c3469f05fe8', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
159
- }
160
- };
161
- SdPagination.style = sdPaginationCss();
162
-
163
- const sdSelectV2Css = () => `sd-select-v2{display:inline-flex}sd-select-v2 sd-portal{display:none}sd-select-v2 .sd-select-v2{position:relative;width:100%;height:100%}`;
164
-
165
- const SdSelectV2 = class {
166
- constructor(hostRef) {
167
- registerInstance(this, hostRef);
168
- this.update = createEvent(this, "sdUpdate", 7);
169
- this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
170
- }
171
- static VIEWPORT_PADDING = 20;
172
- static PORTAL_OFFSET_Y = 4;
173
- static CLOSE_ANIMATION_DURATION = 150;
174
- get el() { return getElement(this); }
175
- type = 'default';
176
- value = null;
177
- options = [];
178
- placeholder = '선택';
179
- maxDropdownWidth = '640px';
180
- dropdownHeight = '260px';
181
- disabled = false;
182
- label = '';
183
- labelWidth = '';
184
- addonLabel = '';
185
- addonAlign = 'start';
186
- error = false;
187
- hint = '';
188
- errorMessage = '';
189
- rules = [];
190
- icon = undefined;
191
- labelTooltip = '';
192
- labelTooltipProps = null;
193
- emitValue = false;
194
- width = '';
195
- isOpen = false;
196
- isAnimatingOut = false;
197
- triggerWidth = '200px';
198
- resolvedDropdownHeight = '260px';
199
- resolvedMaxDropdownWidth = '640px';
200
- focused = false;
201
- hovered = false;
202
- update;
203
- dropDownShow;
204
- async sdFocus() {
205
- if (this.disabled)
206
- return;
207
- await this.triggerComponentRef?.sdFocus();
208
- }
209
- async sdOpen() {
210
- // sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
211
- await new Promise(resolve => setTimeout(resolve, 0));
212
- if (this.disabled || this.isOpen)
213
- return;
214
- this.prepareDropdownGeometry();
215
- if (this.closeAnimationTimer)
216
- clearTimeout(this.closeAnimationTimer);
217
- this.isAnimatingOut = false;
218
- this.isOpen = true;
219
- }
220
- triggerRef;
221
- triggerComponentRef;
222
- closeAnimationTimer;
223
- name = nanoid();
224
- triggerHasFocus = false;
225
- watchIsOpen(newValue) {
226
- this.syncFocusedState(newValue);
227
- this.dropDownShow.emit({ isOpen: newValue });
228
- }
229
- get isMulti() {
230
- return this.type === 'multi' || this.type === 'multi_depth';
231
- }
232
- get displayText() {
233
- if (this.isMulti) {
234
- if (!Array.isArray(this.value) || this.value.length === 0)
235
- return '';
236
- const flat = this.flattenOptions(this.options);
237
- return this.value
238
- .map(item => {
239
- if (item != null && typeof item === 'object') {
240
- const opt = item;
241
- return opt.label ?? flat.find(o => o.value === opt.value)?.label ?? '';
242
- }
243
- return flat.find(o => o.value === item)?.label ?? '';
244
- })
245
- .filter(Boolean)
246
- .join(', ');
247
- }
248
- if (this.value == null)
249
- return '';
250
- if (!this.emitValue && typeof this.value === 'object' && !Array.isArray(this.value)) {
251
- return this.value.label ?? '';
252
- }
253
- const flat = this.flattenOptions(this.options);
254
- const found = flat.find(o => o.value === this.value);
255
- return found?.label ?? '';
256
- }
257
- flattenOptions(options) {
258
- return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
259
- }
260
- getSelectedOptions() {
261
- const val = this.value;
262
- if (!val || !Array.isArray(val))
263
- return [];
264
- if (this.emitValue) {
265
- return val
266
- .map(v => this.findOriginalOption(v, this.options))
267
- .filter((o) => !!o);
268
- }
269
- return val;
270
- }
271
- toMultiValue(options) {
272
- return this.emitValue ? options.map(o => o.value) : options;
273
- }
274
- parsePixelValue(value, fallback) {
275
- const parsed = Number.parseFloat(value);
276
- return Number.isFinite(parsed) ? parsed : fallback;
277
- }
278
- updateDropdownViewportConstraints() {
279
- if (!this.triggerRef)
280
- return;
281
- const triggerRect = this.triggerRef.getBoundingClientRect();
282
- const viewportPadding = SdSelectV2.VIEWPORT_PADDING;
283
- const offsetY = SdSelectV2.PORTAL_OFFSET_Y;
284
- const preferredHeight = this.parsePixelValue(this.dropdownHeight, 260);
285
- const preferredWidth = this.parsePixelValue(this.maxDropdownWidth, 640);
286
- const availableBelow = Math.max(window.innerHeight - triggerRect.bottom - viewportPadding - offsetY, 0);
287
- const availableAbove = Math.max(triggerRect.top - viewportPadding - offsetY, 0);
288
- const availableHeight = Math.max(availableBelow, availableAbove);
289
- const availableWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
290
- this.resolvedDropdownHeight = `${Math.min(preferredHeight, availableHeight)}px`;
291
- this.resolvedMaxDropdownWidth = `${Math.min(preferredWidth, availableWidth)}px`;
292
- }
293
- handleViewportResize = () => {
294
- if (!this.isOpen)
295
- return;
296
- this.updateDropdownViewportConstraints();
297
- };
298
- findOriginalOption(value, options) {
299
- for (const opt of options) {
300
- if (opt.value === value)
301
- return opt;
302
- if (opt.children) {
303
- const found = this.findOriginalOption(value, opt.children);
304
- if (found)
305
- return found;
306
- }
307
- }
308
- return undefined;
309
- }
310
- closeDropdown() {
311
- if (!this.isOpen)
312
- return;
313
- this.isOpen = false;
314
- this.isAnimatingOut = true;
315
- if (this.closeAnimationTimer)
316
- clearTimeout(this.closeAnimationTimer);
317
- this.closeAnimationTimer = setTimeout(() => {
318
- this.isAnimatingOut = false;
319
- }, SdSelectV2.CLOSE_ANIMATION_DURATION);
320
- }
321
- prepareDropdownGeometry() {
322
- if (this.triggerRef) {
323
- this.triggerWidth = `${this.triggerRef.offsetWidth}px`;
324
- }
325
- this.updateDropdownViewportConstraints();
326
- }
327
- syncFocusedState(isOpen = this.isOpen) {
328
- this.focused = isOpen || this.triggerHasFocus;
329
- }
330
- handleTriggerFocus = () => {
331
- this.triggerHasFocus = true;
332
- this.syncFocusedState();
333
- };
334
- handleTriggerBlur = () => {
335
- this.triggerHasFocus = false;
336
- this.syncFocusedState();
337
- };
338
- handleTriggerClick = () => {
339
- if (this.isOpen) {
340
- this.closeDropdown();
341
- return;
342
- }
343
- this.prepareDropdownGeometry();
344
- if (this.closeAnimationTimer)
345
- clearTimeout(this.closeAnimationTimer);
346
- this.isAnimatingOut = false;
347
- this.isOpen = true;
348
- };
349
- emitUpdate(value) {
350
- this.update.emit(value);
351
- }
352
- handleOptionSelect = (detail) => {
353
- const { option, leaves } = detail;
354
- if (this.isMulti) {
355
- this.handleMultiSelect(option, leaves);
356
- }
357
- else {
358
- this.closeDropdown();
359
- this.value = this.emitValue ? option.value : option;
360
- const nextValue = this.value;
361
- requestAnimationFrame(() => {
362
- this.emitUpdate(nextValue);
363
- });
364
- }
365
- };
366
- handleMultiSelect(option, leaves) {
367
- const selected = this.getSelectedOptions();
368
- const isGroup = !!option.children;
369
- let newSelected;
370
- if (isGroup) {
371
- const allSelected = leaves.every(l => selected.some(s => s.value === l.value));
372
- if (allSelected) {
373
- const leafValues = new Set(leaves.map(l => l.value));
374
- newSelected = selected.filter(s => !leafValues.has(s.value));
375
- }
376
- else {
377
- const existing = new Set(selected.map(s => s.value));
378
- const toAdd = leaves.filter(l => !existing.has(l.value));
379
- newSelected = [...selected, ...toAdd];
380
- }
381
- }
382
- else {
383
- const exists = selected.some(s => s.value === option.value);
384
- newSelected = exists ? selected.filter(s => s.value !== option.value) : [...selected, option];
385
- }
386
- this.value = this.toMultiValue(newSelected);
387
- this.emitUpdate(this.value);
388
- }
389
- connectedCallback() {
390
- window.addEventListener('resize', this.handleViewportResize);
391
- }
392
- disconnectedCallback() {
393
- window.removeEventListener('resize', this.handleViewportResize);
394
- if (this.closeAnimationTimer)
395
- clearTimeout(this.closeAnimationTimer);
396
- }
397
- render() {
398
- const portalProps = {
399
- open: this.isOpen,
400
- parentRef: this.triggerRef,
401
- viewportPadding: SdSelectV2.VIEWPORT_PADDING,
402
- onSdClose: () => {
403
- this.closeDropdown();
404
- },
405
- };
406
- return (h("sd-field", { key: '76b432c04fa0f9fca70e63e9c7d16ed768fc9dd1', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
407
- this.hovered = true;
408
- }, onMouseLeave: () => {
409
- this.hovered = false;
410
- } }, h("div", { key: 'dba3a313b7e0171a441540877aacdc7d5c2e7f04', class: "sd-select-v2", ref: el => {
411
- this.triggerRef = el;
412
- } }, h("sd-select-v2-trigger", { key: '7790357558f174eb70b15ed72574f738b062c479', ref: el => {
413
- this.triggerComponentRef = el;
414
- }, displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '672f3583b24e363b74d184d13866ee19a78b04d9', ...portalProps }, h("sd-select-v2-listbox", { key: 'f71d95ad06c74356e4d5ce94da7e720c002390b6', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
415
- }
416
- static get watchers() { return {
417
- "isOpen": [{
418
- "watchIsOpen": 0
419
- }]
420
- }; }
421
- };
422
- SdSelectV2.style = sdSelectV2Css();
423
-
424
- export { SdPagination as sd_pagination, SdSelectV2 as sd_select_v2 };
@@ -1,64 +0,0 @@
1
- import { r as registerInstance, a as getElement, h, H as Host } from './index-Bp7ytJz5.js';
2
- import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
3
-
4
- const sdTbodyCss = () => `:host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}.tbody--empty .tbody__no-data-row{display:table-row}.tbody--empty .tbody__no-data-cell{display:table-cell;padding:0;border-bottom:none}`;
5
-
6
- const SdTbody = class {
7
- constructor(hostRef) {
8
- registerInstance(this, hostRef);
9
- }
10
- get el() { return getElement(this); }
11
- rows = [];
12
- tableId = '';
13
- topSpacerHeight = 0;
14
- bottomSpacerHeight = 0;
15
- tableEl = null;
16
- handleRowsChange(newRows) {
17
- const safeRows = newRows ?? [];
18
- if (this.tableEl?.setRowCountSync) {
19
- this.tableEl.setRowCountSync(safeRows.length);
20
- }
21
- }
22
- componentWillLoad() {
23
- this.syncTableContext();
24
- this.rows = this.rows ?? [];
25
- if (this.tableEl?.setRowCountSync) {
26
- this.tableEl.setRowCountSync(this.rows.length);
27
- }
28
- this.el.setSpacersSync = (top, bottom) => {
29
- this.topSpacerHeight = top;
30
- this.bottomSpacerHeight = bottom;
31
- };
32
- }
33
- componentDidLoad() {
34
- this.syncTableContext();
35
- }
36
- syncTableContext() {
37
- const table = this.el.closest('sd-table');
38
- this.tableEl = table;
39
- const fromMethod = table?.getTableIdSync?.();
40
- const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
41
- const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
42
- (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
43
- '';
44
- if (resolvedTableId && resolvedTableId !== this.tableId) {
45
- this.tableId = resolvedTableId;
46
- }
47
- }
48
- render() {
49
- const hasRows = this.rows.length > 0;
50
- return (h(Host, { key: 'e4c64dbf97185bbc6eaec4b883c65dc8ebd34ece', slot: `${this.tableId}-body` }, h("tbody", { key: 'b2fb886684a5a6055d3af659bba75dd9bc801b73', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
51
- this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
52
- h("slot", null),
53
- this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
54
- ]) : (h("tr", { class: "tbody__no-data-row" }, h("td", { class: "tbody__no-data-cell", colSpan: 100 }, h("slot", { name: "no-data" })))))));
55
- }
56
- static get watchers() { return {
57
- "rows": [{
58
- "handleRowsChange": 0
59
- }]
60
- }; }
61
- };
62
- SdTbody.style = sdTbodyCss();
63
-
64
- export { SdTbody as sd_tbody };