@otto-de/b2b-core-components 1.9.0-beta.2 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (348) hide show
  1. package/dist/b2b-core-components/b2b-core-components.css +1 -1
  2. package/dist/b2b-core-components/b2b-core-components.esm.js +1 -1
  3. package/dist/b2b-core-components/icons/b2b_icon-ellipsis.svg +2 -2
  4. package/dist/b2b-core-components/icons/b2b_icon-trend-left.svg +12 -0
  5. package/dist/b2b-core-components/icons/b2b_icon-trend-right.svg +12 -0
  6. package/dist/b2b-core-components/p-13fa3a4b.entry.js +1 -0
  7. package/dist/b2b-core-components/p-14877996.entry.js +1 -0
  8. package/dist/b2b-core-components/p-14ddd82d.entry.js +1 -0
  9. package/dist/b2b-core-components/p-1c910821.entry.js +1 -0
  10. package/dist/b2b-core-components/p-234c9f55.entry.js +1 -0
  11. package/dist/b2b-core-components/p-248aecd5.entry.js +1 -0
  12. package/dist/b2b-core-components/p-2ba2b197.entry.js +1 -0
  13. package/dist/b2b-core-components/p-2da63e79.entry.js +1 -0
  14. package/dist/b2b-core-components/{p-a4c859d6.entry.js → p-2f9dfb71.entry.js} +1 -1
  15. package/dist/b2b-core-components/p-32baa768.entry.js +1 -0
  16. package/dist/b2b-core-components/p-3770da05.entry.js +1 -0
  17. package/dist/b2b-core-components/{p-d92add70.entry.js → p-3819c303.entry.js} +1 -1
  18. package/dist/b2b-core-components/p-4442a592.entry.js +1 -0
  19. package/dist/b2b-core-components/p-4667ced4.entry.js +1 -0
  20. package/dist/b2b-core-components/p-4835ee48.entry.js +1 -0
  21. package/dist/b2b-core-components/{p-6463d394.entry.js → p-5cce2644.entry.js} +1 -1
  22. package/dist/b2b-core-components/p-5e0def0d.entry.js +1 -0
  23. package/dist/b2b-core-components/p-6855efb8.entry.js +1 -0
  24. package/dist/b2b-core-components/p-699c3c91.js +1 -0
  25. package/dist/b2b-core-components/{p-75cff1be.entry.js → p-6a6d2b46.entry.js} +1 -1
  26. package/dist/b2b-core-components/p-6e7aff80.entry.js +1 -0
  27. package/dist/b2b-core-components/{p-024220fb.entry.js → p-6f18a232.entry.js} +1 -1
  28. package/dist/b2b-core-components/p-6f991dbb.entry.js +1 -0
  29. package/dist/b2b-core-components/p-753858f9.entry.js +1 -0
  30. package/dist/b2b-core-components/p-7a1a5afc.entry.js +1 -0
  31. package/dist/b2b-core-components/p-7cc4b76a.entry.js +1 -0
  32. package/dist/b2b-core-components/p-7d0a8bb5.entry.js +1 -0
  33. package/dist/b2b-core-components/p-808eb548.entry.js +1 -0
  34. package/dist/b2b-core-components/{p-5c18c291.js → p-844e306b.js} +2 -2
  35. package/dist/b2b-core-components/{p-af7e9d0b.entry.js → p-8e3fb1f8.entry.js} +1 -1
  36. package/dist/b2b-core-components/p-98d0d2ff.js +1 -0
  37. package/dist/b2b-core-components/p-a1313d78.entry.js +1 -0
  38. package/dist/b2b-core-components/p-acd597e0.entry.js +1 -0
  39. package/dist/b2b-core-components/p-b27d0a36.entry.js +1 -0
  40. package/dist/b2b-core-components/p-b315985b.entry.js +1 -0
  41. package/dist/b2b-core-components/p-b36f0e3b.entry.js +1 -0
  42. package/dist/b2b-core-components/p-b74ef511.entry.js +1 -0
  43. package/dist/b2b-core-components/p-b82636f4.entry.js +1 -0
  44. package/dist/b2b-core-components/p-bf601862.entry.js +1 -0
  45. package/dist/b2b-core-components/{p-a635b768.entry.js → p-bf7a6f93.entry.js} +1 -1
  46. package/dist/b2b-core-components/p-c812257d.entry.js +1 -0
  47. package/dist/b2b-core-components/p-d5f6f1ec.entry.js +1 -0
  48. package/dist/b2b-core-components/p-dd0771f1.entry.js +1 -0
  49. package/dist/b2b-core-components/p-dfce95eb.entry.js +1 -0
  50. package/dist/b2b-core-components/{p-2b0b7edf.entry.js → p-dff862c4.entry.js} +1 -1
  51. package/dist/b2b-core-components/p-e10d8020.entry.js +1 -0
  52. package/dist/b2b-core-components/p-e3b360a8.entry.js +1 -0
  53. package/dist/b2b-core-components/p-f2da9141.entry.js +1 -0
  54. package/dist/b2b-core-components/p-fcd25ead.entry.js +1 -0
  55. package/dist/cjs/b2b-alert.cjs.entry.js +2 -2
  56. package/dist/cjs/b2b-anchor.cjs.entry.js +4 -4
  57. package/dist/cjs/b2b-breadcrumb-item.cjs.entry.js +2 -2
  58. package/dist/cjs/b2b-breadcrumb.cjs.entry.js +2 -2
  59. package/dist/cjs/b2b-button_2.cjs.entry.js +5 -3
  60. package/dist/cjs/b2b-card.cjs.entry.js +2 -2
  61. package/dist/cjs/b2b-checkbox-group.cjs.entry.js +2 -2
  62. package/dist/cjs/b2b-checkbox.cjs.entry.js +93 -0
  63. package/dist/cjs/b2b-chip-component_2.cjs.entry.js +73 -0
  64. package/dist/cjs/b2b-core-components.cjs.js +2 -2
  65. package/dist/cjs/b2b-dropdown.cjs.entry.js +2 -2
  66. package/dist/cjs/b2b-grid-col.cjs.entry.js +1 -1
  67. package/dist/cjs/b2b-grid-row.cjs.entry.js +1 -1
  68. package/dist/cjs/b2b-grid.cjs.entry.js +1 -1
  69. package/dist/cjs/b2b-headline.cjs.entry.js +2 -2
  70. package/dist/cjs/b2b-icon.cjs.entry.js +4 -2
  71. package/dist/cjs/b2b-input-group_2.cjs.entry.js +4 -4
  72. package/dist/cjs/b2b-input-label.cjs.entry.js +1 -1
  73. package/dist/cjs/b2b-input_2.cjs.entry.js +3 -3
  74. package/dist/cjs/b2b-label.cjs.entry.js +2 -2
  75. package/dist/cjs/b2b-modal.cjs.entry.js +2 -2
  76. package/dist/cjs/b2b-multiselect-dropdown.cjs.entry.js +166 -0
  77. package/dist/cjs/b2b-pagination.cjs.entry.js +2 -2
  78. package/dist/cjs/b2b-paragraph.cjs.entry.js +2 -2
  79. package/dist/cjs/b2b-progress-bar.cjs.entry.js +42 -0
  80. package/dist/cjs/b2b-radio-button.cjs.entry.js +2 -2
  81. package/dist/cjs/b2b-radio-group.cjs.entry.js +2 -2
  82. package/dist/cjs/b2b-required-separator.cjs.entry.js +2 -2
  83. package/dist/cjs/b2b-rounded-icon.cjs.entry.js +2 -2
  84. package/dist/cjs/b2b-scrollable-container.cjs.entry.js +2 -2
  85. package/dist/cjs/b2b-search.cjs.entry.js +1 -1
  86. package/dist/cjs/b2b-separator.cjs.entry.js +2 -2
  87. package/dist/cjs/b2b-tab-group.cjs.entry.js +1 -1
  88. package/dist/cjs/b2b-tab-panel.cjs.entry.js +2 -2
  89. package/dist/cjs/b2b-tab.cjs.entry.js +2 -2
  90. package/dist/cjs/b2b-table-cell_2.cjs.entry.js +157 -0
  91. package/dist/cjs/b2b-table-row.cjs.entry.js +23 -24
  92. package/dist/cjs/b2b-table-rowgroup.cjs.entry.js +44 -41
  93. package/dist/cjs/b2b-table.cjs.entry.js +32 -11
  94. package/dist/cjs/b2b-textarea.cjs.entry.js +2 -2
  95. package/dist/cjs/b2b-toggle-button.cjs.entry.js +2 -2
  96. package/dist/cjs/b2b-toggle-chip.cjs.entry.js +59 -0
  97. package/dist/cjs/b2b-toggle-group.cjs.entry.js +2 -2
  98. package/dist/cjs/b2b-tooltip.cjs.entry.js +2 -2
  99. package/dist/cjs/b2b-wizard-icon.cjs.entry.js +2 -2
  100. package/dist/cjs/b2b-wizard-step.cjs.entry.js +2 -2
  101. package/dist/cjs/b2b-wizard.cjs.entry.js +2 -2
  102. package/dist/cjs/{index-ceb9958a.js → index-8ed011c3.js} +25 -6
  103. package/dist/cjs/loader.cjs.js +2 -2
  104. package/dist/cjs/{table.types-679aefd5.js → table.types-d3ab0872.js} +1 -0
  105. package/dist/cjs/utils-3b16cd5d.js +40 -0
  106. package/dist/collection/collection-manifest.json +4 -0
  107. package/dist/collection/components/alert/alert.css +6 -4
  108. package/dist/collection/components/anchor/anchor.css +18 -8
  109. package/dist/collection/components/anchor/anchor.js +3 -3
  110. package/dist/collection/components/breadcrumb/breadcrumb.css +6 -4
  111. package/dist/collection/components/button/button.css +32 -4
  112. package/dist/collection/components/button/button.js +20 -0
  113. package/dist/collection/components/button/button.stories.js +18 -0
  114. package/dist/collection/components/card/card.css +6 -4
  115. package/dist/collection/components/checkbox/checkbox.css +6 -4
  116. package/dist/collection/components/checkbox-group/checkbox-group.css +6 -4
  117. package/dist/collection/components/chip/chip.css +10 -6
  118. package/dist/collection/components/chip/chip.js +8 -1
  119. package/dist/collection/components/chip/chip.stories.js +0 -1
  120. package/dist/collection/components/dropdown/dropdown.css +6 -4
  121. package/dist/collection/components/headline/headline.css +6 -4
  122. package/dist/collection/components/icon/icon.css +6 -4
  123. package/dist/collection/components/icon/icon.js +1 -1
  124. package/dist/collection/components/icon/icons/b2b_icon-ellipsis.svg +2 -2
  125. package/dist/collection/components/icon/icons/b2b_icon-trend-left.svg +12 -0
  126. package/dist/collection/components/icon/icons/b2b_icon-trend-right.svg +12 -0
  127. package/dist/collection/components/icon/types.js +2 -0
  128. package/dist/collection/components/input/input.css +6 -4
  129. package/dist/collection/components/input-group/input-group.css +6 -4
  130. package/dist/collection/components/input-list/input-list.css +6 -4
  131. package/dist/collection/components/input-list/input-list.e2e.js +15 -1
  132. package/dist/collection/components/input-list/input-list.js +1 -1
  133. package/dist/collection/components/input-list/input-list.stories.js +31 -3
  134. package/dist/collection/components/label/label.css +6 -4
  135. package/dist/collection/components/modal/modal.css +6 -4
  136. package/dist/collection/components/multiselect-dropdown/multiselect-dropdown.css +293 -0
  137. package/dist/collection/components/multiselect-dropdown/multiselect-dropdown.e2e.js +101 -0
  138. package/dist/collection/components/multiselect-dropdown/multiselect-dropdown.js +304 -0
  139. package/dist/collection/components/multiselect-dropdown/multiselect-dropdown.stories.js +46 -0
  140. package/dist/collection/components/multiselect-dropdown/multiselect-option/multiselect-option.css +10 -0
  141. package/dist/collection/components/multiselect-dropdown/multiselect-option/multiselect-option.js +115 -0
  142. package/dist/collection/components/pagination/pagination.css +6 -4
  143. package/dist/collection/components/paragraph/paragraph.css +6 -4
  144. package/dist/collection/components/progress-bar/progress-bar.css +266 -0
  145. package/dist/collection/components/progress-bar/progress-bar.e2e.js +43 -0
  146. package/dist/collection/components/progress-bar/progress-bar.js +117 -0
  147. package/dist/collection/components/progress-bar/progress-bar.stories.js +54 -0
  148. package/dist/collection/components/radio/radio.css +6 -4
  149. package/dist/collection/components/radio-group/radio-group.css +6 -4
  150. package/dist/collection/components/required-separator/required-separator.css +6 -4
  151. package/dist/collection/components/rounded-icon/rounded-icon.css +6 -4
  152. package/dist/collection/components/scrollable-container/scrollable-container.css +6 -4
  153. package/dist/collection/components/separator/separator.css +6 -4
  154. package/dist/collection/components/spinner/spinner.css +6 -4
  155. package/dist/collection/components/tab/tab.css +6 -4
  156. package/dist/collection/components/tab-panel/tab-panel.css +6 -4
  157. package/dist/collection/components/table/stories.data.js +0 -1
  158. package/dist/collection/components/table/table-cell/table-cell.css +14 -7
  159. package/dist/collection/components/table/table-cell/table-cell.js +52 -4
  160. package/dist/collection/components/table/table-header/table-header.css +12 -18
  161. package/dist/collection/components/table/table-header/table-header.js +94 -15
  162. package/dist/collection/components/table/table-row/table-row.css +17 -9
  163. package/dist/collection/components/table/table-row/table-row.js +47 -22
  164. package/dist/collection/components/table/table-rowgroup/table-rowgroup.css +15 -4
  165. package/dist/collection/components/table/table-rowgroup/table-rowgroup.js +75 -11
  166. package/dist/collection/components/table/table.css +12 -7
  167. package/dist/collection/components/table/table.e2e.js +31 -5
  168. package/dist/collection/components/table/table.js +31 -10
  169. package/dist/collection/components/table/table.stories.js +52 -17
  170. package/dist/collection/components/table/utils.js +14 -0
  171. package/dist/collection/components/textarea/textarea.css +6 -4
  172. package/dist/collection/components/toggle-button/toggle-button.css +6 -4
  173. package/dist/collection/components/toggle-chip/toggle-chip.css +273 -0
  174. package/dist/collection/components/toggle-chip/toggle-chip.e2e.js +47 -0
  175. package/dist/collection/components/toggle-chip/toggle-chip.js +192 -0
  176. package/dist/collection/components/toggle-group/toggle-group.css +6 -4
  177. package/dist/collection/components/tooltip/tooltip.css +6 -4
  178. package/dist/collection/components/wizard/wizard.css +6 -4
  179. package/dist/collection/components/wizard-icon/wizard-icon.css +6 -4
  180. package/dist/collection/utils/types/table.types.js +1 -0
  181. package/dist/components/b2b-alert.js +1 -1
  182. package/dist/components/b2b-anchor.js +4 -4
  183. package/dist/components/b2b-breadcrumb-item.js +1 -1
  184. package/dist/components/b2b-breadcrumb.js +1 -1
  185. package/dist/components/b2b-card.js +1 -1
  186. package/dist/components/b2b-checkbox-group.js +1 -1
  187. package/dist/components/b2b-chip-component.js +1 -54
  188. package/dist/components/b2b-dropdown.js +1 -1
  189. package/dist/components/b2b-label.js +1 -1
  190. package/dist/components/b2b-modal.js +1 -1
  191. package/dist/components/b2b-multiselect-dropdown.d.ts +11 -0
  192. package/dist/components/b2b-multiselect-dropdown.js +225 -0
  193. package/dist/components/b2b-multiselect-option.d.ts +11 -0
  194. package/dist/components/b2b-multiselect-option.js +6 -0
  195. package/dist/components/b2b-pagination.js +1 -1
  196. package/dist/components/b2b-paragraph.js +1 -1
  197. package/dist/components/b2b-progress-bar.d.ts +11 -0
  198. package/dist/components/b2b-progress-bar.js +61 -0
  199. package/dist/components/b2b-radio-button.js +1 -1
  200. package/dist/components/b2b-radio-group.js +1 -1
  201. package/dist/components/b2b-required-separator.js +1 -1
  202. package/dist/components/b2b-scrollable-container.js +1 -1
  203. package/dist/components/b2b-tab-panel.js +1 -1
  204. package/dist/components/b2b-tab.js +1 -1
  205. package/dist/components/b2b-table-row.js +23 -23
  206. package/dist/components/b2b-table-rowgroup.js +34 -31
  207. package/dist/components/b2b-table.js +30 -10
  208. package/dist/components/b2b-textarea.js +1 -1
  209. package/dist/components/b2b-toggle-button.js +1 -1
  210. package/dist/components/b2b-toggle-chip.d.ts +11 -0
  211. package/dist/components/b2b-toggle-chip.js +80 -0
  212. package/dist/components/b2b-toggle-group.js +1 -1
  213. package/dist/components/b2b-tooltip.js +1 -1
  214. package/dist/components/b2b-wizard-step.js +1 -1
  215. package/dist/components/b2b-wizard.js +1 -1
  216. package/dist/components/button.js +4 -1
  217. package/dist/components/checkbox.js +1 -1
  218. package/dist/components/chip.js +63 -0
  219. package/dist/components/headline.js +1 -1
  220. package/dist/components/icon.js +3 -1
  221. package/dist/components/input-group.js +1 -1
  222. package/dist/components/input-list-option.js +1 -1
  223. package/dist/components/input-list.js +2 -2
  224. package/dist/components/input.js +1 -1
  225. package/dist/components/multiselect-option.js +58 -0
  226. package/dist/components/rounded-icon.js +1 -1
  227. package/dist/components/separator.js +1 -1
  228. package/dist/components/spinner.js +1 -1
  229. package/dist/components/table-cell.js +12 -3
  230. package/dist/components/table-header.js +31 -14
  231. package/dist/components/utils.js +70 -0
  232. package/dist/components/wizard-icon.js +1 -1
  233. package/dist/custom-elements.json +181 -14
  234. package/dist/esm/b2b-alert.entry.js +2 -2
  235. package/dist/esm/b2b-anchor.entry.js +4 -4
  236. package/dist/esm/b2b-breadcrumb-item.entry.js +2 -2
  237. package/dist/esm/b2b-breadcrumb.entry.js +2 -2
  238. package/dist/esm/b2b-button_2.entry.js +5 -3
  239. package/dist/esm/b2b-card.entry.js +2 -2
  240. package/dist/esm/b2b-checkbox-group.entry.js +2 -2
  241. package/dist/esm/b2b-checkbox.entry.js +89 -0
  242. package/dist/esm/b2b-chip-component_2.entry.js +68 -0
  243. package/dist/esm/b2b-core-components.js +3 -3
  244. package/dist/esm/b2b-dropdown.entry.js +2 -2
  245. package/dist/esm/b2b-grid-col.entry.js +1 -1
  246. package/dist/esm/b2b-grid-row.entry.js +1 -1
  247. package/dist/esm/b2b-grid.entry.js +1 -1
  248. package/dist/esm/b2b-headline.entry.js +2 -2
  249. package/dist/esm/b2b-icon.entry.js +4 -2
  250. package/dist/esm/b2b-input-group_2.entry.js +4 -4
  251. package/dist/esm/b2b-input-label.entry.js +1 -1
  252. package/dist/esm/b2b-input_2.entry.js +3 -3
  253. package/dist/esm/b2b-label.entry.js +2 -2
  254. package/dist/esm/b2b-modal.entry.js +2 -2
  255. package/dist/esm/b2b-multiselect-dropdown.entry.js +162 -0
  256. package/dist/esm/b2b-pagination.entry.js +2 -2
  257. package/dist/esm/b2b-paragraph.entry.js +2 -2
  258. package/dist/esm/b2b-progress-bar.entry.js +38 -0
  259. package/dist/esm/b2b-radio-button.entry.js +2 -2
  260. package/dist/esm/b2b-radio-group.entry.js +2 -2
  261. package/dist/esm/b2b-required-separator.entry.js +2 -2
  262. package/dist/esm/b2b-rounded-icon.entry.js +2 -2
  263. package/dist/esm/b2b-scrollable-container.entry.js +2 -2
  264. package/dist/esm/b2b-search.entry.js +1 -1
  265. package/dist/esm/b2b-separator.entry.js +2 -2
  266. package/dist/esm/b2b-tab-group.entry.js +1 -1
  267. package/dist/esm/b2b-tab-panel.entry.js +2 -2
  268. package/dist/esm/b2b-tab.entry.js +2 -2
  269. package/dist/esm/b2b-table-cell_2.entry.js +152 -0
  270. package/dist/esm/b2b-table-row.entry.js +23 -24
  271. package/dist/esm/b2b-table-rowgroup.entry.js +33 -30
  272. package/dist/esm/b2b-table.entry.js +32 -11
  273. package/dist/esm/b2b-textarea.entry.js +2 -2
  274. package/dist/esm/b2b-toggle-button.entry.js +2 -2
  275. package/dist/esm/b2b-toggle-chip.entry.js +55 -0
  276. package/dist/esm/b2b-toggle-group.entry.js +2 -2
  277. package/dist/esm/b2b-tooltip.entry.js +2 -2
  278. package/dist/esm/b2b-wizard-icon.entry.js +2 -2
  279. package/dist/esm/b2b-wizard-step.entry.js +2 -2
  280. package/dist/esm/b2b-wizard.entry.js +2 -2
  281. package/dist/esm/{index-f0a4762b.js → index-1916a410.js} +25 -6
  282. package/dist/esm/loader.js +3 -3
  283. package/dist/{components/table.types.js → esm/table.types-aedae1a4.js} +1 -0
  284. package/dist/esm/utils-5221c150.js +34 -0
  285. package/dist/types/components/button/button.d.ts +2 -0
  286. package/dist/types/components/button/button.stories.d.ts +1 -0
  287. package/dist/types/components/chip/chip.d.ts +1 -0
  288. package/dist/types/components/icon/types.d.ts +1 -1
  289. package/dist/types/components/input-list/input-list.stories.d.ts +2 -1
  290. package/dist/types/components/multiselect-dropdown/multiselect-dropdown.d.ts +43 -0
  291. package/dist/types/components/multiselect-dropdown/multiselect-dropdown.stories.d.ts +5 -0
  292. package/dist/types/components/multiselect-dropdown/multiselect-option/multiselect-option.d.ts +14 -0
  293. package/dist/types/components/progress-bar/progress-bar.d.ts +13 -0
  294. package/dist/types/components/progress-bar/progress-bar.stories.d.ts +9 -0
  295. package/dist/types/components/table/table-cell/table-cell.d.ts +6 -2
  296. package/dist/types/components/table/table-header/table-header.d.ts +14 -3
  297. package/dist/types/components/table/table-row/table-row.d.ts +5 -2
  298. package/dist/types/components/table/table-rowgroup/table-rowgroup.d.ts +5 -2
  299. package/dist/types/components/table/table.d.ts +6 -0
  300. package/dist/types/components/table/table.stories.d.ts +2 -1
  301. package/dist/types/components/table/utils.d.ts +2 -0
  302. package/dist/types/components/toggle-chip/toggle-chip.d.ts +21 -0
  303. package/dist/types/components.d.ts +306 -15
  304. package/dist/types/utils/interfaces/form.interface.d.ts +5 -0
  305. package/dist/types/utils/interfaces/interaction.interface.d.ts +4 -0
  306. package/dist/types/utils/types/table.types.d.ts +1 -0
  307. package/dist/web-types.json +307 -14
  308. package/package.json +2 -2
  309. package/dist/b2b-core-components/p-0034d167.entry.js +0 -1
  310. package/dist/b2b-core-components/p-0354d337.entry.js +0 -1
  311. package/dist/b2b-core-components/p-068eb8ba.entry.js +0 -1
  312. package/dist/b2b-core-components/p-0f60ff5a.entry.js +0 -1
  313. package/dist/b2b-core-components/p-220d5f79.entry.js +0 -1
  314. package/dist/b2b-core-components/p-299d5c71.entry.js +0 -1
  315. package/dist/b2b-core-components/p-2ad195d3.entry.js +0 -1
  316. package/dist/b2b-core-components/p-340f01f8.entry.js +0 -1
  317. package/dist/b2b-core-components/p-381bd00a.entry.js +0 -1
  318. package/dist/b2b-core-components/p-39f965f2.entry.js +0 -1
  319. package/dist/b2b-core-components/p-46f1d12d.entry.js +0 -1
  320. package/dist/b2b-core-components/p-50633227.entry.js +0 -1
  321. package/dist/b2b-core-components/p-57a842ba.entry.js +0 -1
  322. package/dist/b2b-core-components/p-66048f63.entry.js +0 -1
  323. package/dist/b2b-core-components/p-6814fed4.entry.js +0 -1
  324. package/dist/b2b-core-components/p-71bcb908.entry.js +0 -1
  325. package/dist/b2b-core-components/p-7a1e9ef2.entry.js +0 -1
  326. package/dist/b2b-core-components/p-7d05e787.entry.js +0 -1
  327. package/dist/b2b-core-components/p-89dc58cc.entry.js +0 -1
  328. package/dist/b2b-core-components/p-8fb5f715.entry.js +0 -1
  329. package/dist/b2b-core-components/p-a4ba259c.entry.js +0 -1
  330. package/dist/b2b-core-components/p-a7d829d8.entry.js +0 -1
  331. package/dist/b2b-core-components/p-a8043eb7.entry.js +0 -1
  332. package/dist/b2b-core-components/p-a896e061.entry.js +0 -1
  333. package/dist/b2b-core-components/p-b1064afb.js +0 -1
  334. package/dist/b2b-core-components/p-c59bffbe.entry.js +0 -1
  335. package/dist/b2b-core-components/p-c93fc43f.entry.js +0 -1
  336. package/dist/b2b-core-components/p-cfd92648.entry.js +0 -1
  337. package/dist/b2b-core-components/p-da2823f1.entry.js +0 -1
  338. package/dist/b2b-core-components/p-e8d1236b.entry.js +0 -1
  339. package/dist/b2b-core-components/p-e9f3a7af.entry.js +0 -1
  340. package/dist/b2b-core-components/p-edbe9fc0.entry.js +0 -1
  341. package/dist/b2b-core-components/p-f1625da0.entry.js +0 -1
  342. package/dist/b2b-core-components/p-f6f7c598.entry.js +0 -1
  343. package/dist/b2b-core-components/p-ff36af9f.entry.js +0 -1
  344. package/dist/cjs/b2b-checkbox_3.cjs.entry.js +0 -222
  345. package/dist/cjs/b2b-chip-component.cjs.entry.js +0 -40
  346. package/dist/esm/b2b-checkbox_3.entry.js +0 -216
  347. package/dist/esm/b2b-chip-component.entry.js +0 -36
  348. package/dist/esm/table.types-c4d9046e.js +0 -36
@@ -1,222 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-ceb9958a.js');
6
- const table_types = require('./table.types-679aefd5.js');
7
-
8
- const checkboxCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:400;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-table-hover:#e6f4ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-45);--b2b-size-headline-line-height-100:var(--b2b-size-40);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:400;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}:root{--b2b-checkbox-margin-bottom:0}.b2b-checkbox{display:block;font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);width:fit-content;margin-bottom:var(--b2b-checkbox-margin-bottom)}.b2b-checkbox__items{display:flex;justify-content:flex-start;position:relative}.b2b-checkbox__icon{position:absolute;fill:var(--b2b-color-white-100);display:none;margin-top:var(--b2b-size-7);margin-left:var(--b2b-size-1);width:var(--b2b-size-35);height:var(--b2b-size-35);z-index:1000}.b2b-checkbox__input{margin:2px 6px 3px 0;appearance:none;background-color:var(--b2b-color-white-100);border:1px solid var(--b2b-color-grey-400);border-radius:var(--b2b-size-border-radius-100);display:inline-block;position:relative;vertical-align:top;width:var(--b2b-size-40);height:var(--b2b-size-40);flex-shrink:0}.b2b-checkbox--checked .b2b-checkbox__icon{display:inline-block}.b2b-checkbox--checked .b2b-checkbox__input{border-color:var(--b2b-color-black-100);background-color:var(--b2b-color-black-100)}.b2b-checkbox b2b-input-label{display:inline;vertical-align:bottom;user-select:none}.b2b-checkbox span{display:block;font-size:var(--b2b-size-copy-50);color:var(--b2b-color-grey-300);line-height:var(--b2b-size-copy-line-height-75);user-select:none}.b2b-checkbox--error{}.b2b-checkbox--error .b2b-checkbox__input{background-color:var(--b2b-color-error-50);border:1px solid var(--b2b-color-error-100)}.b2b-checkbox--error span{color:var(--b2b-color-error-100)}.b2b-checkbox--error.b2b-checkbox--checked .b2b-checkbox__input{background-color:var(--b2b-color-error-100);border-color:var(--b2b-color-error-100)}.b2b-checkbox--disabled{pointer-events:none}.b2b-checkbox--disabled .b2b-checkbox__input{background-color:var(--b2b-color-grey-25);border-color:var(--b2b-color-grey-300)}.b2b-checkbox--standalone{margin:0}.b2b-checkbox--standalone .b2b-checkbox__input{margin:0}.b2b-checkbox--standalone .b2b-checkbox__icon{margin-top:var(--b2b-size-1)}.b2b-checkbox--indeterminate .b2b-checkbox__input{border-color:var(--b2b-color-black-100);background-color:var(--b2b-color-black-100)}.b2b-checkbox--indeterminate .b2b-checkbox__icon{margin-top:9px;margin-left:var(--b2b-size-7);display:inline-block}.b2b-checkbox--indeterminate.b2b-checkbox--standalone .b2b-checkbox__icon{margin-top:7px}.b2b-checkbox.b2b-checkbox--disabled.b2b-checkbox--checked .b2b-checkbox__input{background-color:var(--b2b-color-grey-300);border-color:var(--b2b-color-grey-300)}";
9
-
10
- const CheckboxComponent = class {
11
- constructor(hostRef) {
12
- index.registerInstance(this, hostRef);
13
- this.b2bFocus = index.createEvent(this, "b2b-focus", 7);
14
- this.b2bBlur = index.createEvent(this, "b2b-blur", 7);
15
- this.b2bChange = index.createEvent(this, "b2b-change", 7);
16
- this.handleFormData = (event) => {
17
- if (this.name != undefined && this.checked) {
18
- const value = this.value || 'on';
19
- event.formData.append(this.name, value);
20
- }
21
- };
22
- this.emitDetail = () => {
23
- this.b2bChange.emit({
24
- checked: this.checked,
25
- value: this.value,
26
- });
27
- // Dispatches the native change event because it is not propagated beyond the shadow boundary
28
- // globalThis to target the lib.dom Event and not Stencil Event
29
- const changeEvent = new globalThis.Event('change');
30
- this.hostElement.dispatchEvent(changeEvent);
31
- };
32
- this.onFocus = (ev) => {
33
- this.b2bFocus.emit(ev);
34
- };
35
- this.onBlur = (ev) => {
36
- this.b2bBlur.emit(ev);
37
- };
38
- this.onClick = (ev) => {
39
- ev.preventDefault();
40
- if (this.disabled) {
41
- return;
42
- }
43
- else if (this.indeterminate) {
44
- this.indeterminate = false;
45
- this.checked = true;
46
- }
47
- else {
48
- this.checked = !this.checked;
49
- }
50
- this.emitDetail();
51
- };
52
- this.renderIcon = () => {
53
- if (this.indeterminate) {
54
- return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", class: "b2b-checkbox__icon" }, index.h("path", { d: "M8.5 0H0.5C0.223633 0 0 0.223633 0 0.5C0 0.776367 0.223633 1 0.5 1H8.5C8.77637 1 9 0.776367 9 0.5C9 0.223633 8.77637 0 8.5 0Z", fill: "white" })));
55
- }
56
- if (this.checked) {
57
- return (index.h("svg", { class: "b2b-checkbox__icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { d: "M11.798 25.082c-.341 0-.681-.13-.942-.389l-7.132-7.115a1.334 1.334 0 0 1 1.884-1.888l6.19 6.175L26.391 7.307a1.334 1.334 0 0 1 1.884 1.888L12.74 24.693c-.26.259-.601.389-.942.389z" })));
58
- }
59
- };
60
- this.label = undefined;
61
- this.required = false;
62
- this.checked = false;
63
- this.disabled = false;
64
- this.indeterminate = undefined;
65
- this.error = undefined;
66
- this.hint = undefined;
67
- this.name = undefined;
68
- this.value = undefined;
69
- this.invalid = false;
70
- this.standalone = false;
71
- this.groupDisabled = false;
72
- }
73
- connectedCallback() {
74
- const form = this.hostElement.closest('form');
75
- if (form != null) {
76
- form.addEventListener('formdata', this.handleFormData);
77
- }
78
- }
79
- render() {
80
- return (index.h(index.Host, { onClick: this.onClick }, index.h("div", { class: {
81
- 'b2b-checkbox': true,
82
- 'b2b-checkbox--error': this.invalid && !this.disabled,
83
- 'b2b-checkbox--disabled': this.disabled || this.groupDisabled,
84
- 'b2b-checkbox--checked': this.checked,
85
- 'b2b-checkbox--standalone': this.standalone,
86
- 'b2b-checkbox--indeterminate': this.indeterminate,
87
- } }, index.h("div", { class: "b2b-checkbox-items" }, this.renderIcon(), index.h("input", { class: "b2b-checkbox__input", "aria-labelledby": this.name, type: "checkbox", name: this.name, id: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.groupDisabled, onFocus: this.onFocus, onBlur: this.onBlur }), !this.standalone && (index.h("b2b-input-label", { id: this.name, required: this.required, disabled: this.disabled }, this.label))), (this.hint !== undefined && !this.invalid) ||
88
- (this.hint !== undefined && this.disabled) ? (index.h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (index.h("span", null, this.error)) : (''))));
89
- }
90
- get hostElement() { return index.getElement(this); }
91
- };
92
- CheckboxComponent.style = checkboxCss;
93
-
94
- const tableCellCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:400;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-table-hover:#e6f4ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-45);--b2b-size-headline-line-height-100:var(--b2b-size-40);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:400;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}:host{--b2b-table-cell-text-expand-bg:var(--b2b-color-white-100);display:table-cell;padding:12px;margin:0;font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);border-bottom:1px solid var(--b2b-color-grey-200);white-space:normal}:host(.b2b-table-cell--ellipsis){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}:host(.b2b-table-cell--expand-text){position:absolute;white-space:normal;background-color:var(--b2b-table-cell-text-expand-bg);border:1px solid var(--b2b-color-grey-200);border-top:none;z-index:2000;min-width:100px}:host(.b2b-table-cell--left){text-align:left}:host(.b2b-table-cell--right){text-align:right}:host(.b2b-table-cell--center){text-align:center}:host(.b2b-table-cell--divider){border-right:1px solid var(--b2b-color-grey-200)}:host(.b2b-table-cell-color-selected){background-color:var(--b2b-color-table-selected-default)}:host(.b2b-table-cell-color-group){background-color:var(--b2b-color-table-expand-default)}";
95
-
96
- const TableCellComponent = class {
97
- constructor(hostRef) {
98
- index.registerInstance(this, hostRef);
99
- this.expandTextHoverWaitTime = 600;
100
- this.addExpandStyles = () => {
101
- this.expandTextHoverTimeoutId = setTimeout(() => {
102
- const contentLength = this.host.innerText.length;
103
- const children = this.host.children.length;
104
- if (this.useTextEllipsis && contentLength > 25 && children === 0) {
105
- this.host.style.width = `calc(${this.host.offsetWidth}px - 24px)`;
106
- this.host.classList.add('b2b-table-cell--expand-text');
107
- }
108
- }, this.expandTextHoverWaitTime);
109
- };
110
- this.removeExpandStyles = () => {
111
- this.expandTextHoverTimeoutId &&
112
- clearTimeout(this.expandTextHoverTimeoutId);
113
- this.host.classList.remove('b2b-table-cell--expand-text');
114
- };
115
- this.textWrap = true;
116
- this.size = table_types.TableSizes.EXPAND;
117
- this.align = table_types.ContentAlignment.LEFT;
118
- this.divider = false;
119
- this.color = 'default';
120
- this.useTextEllipsis = false;
121
- }
122
- componentWillRender() {
123
- this.useTextEllipsis = !this.textWrap && this.size === table_types.TableSizes.EQUAL;
124
- }
125
- render() {
126
- return (index.h(index.Host, { onMouseEnter: this.addExpandStyles, onMouseLeave: this.removeExpandStyles, class: {
127
- 'b2b-table-cell': true,
128
- ['b2b-table-cell--ellipsis']: this.useTextEllipsis,
129
- ['b2b-table-cell--' + this.align]: true,
130
- ['b2b-table-cell--divider']: this.divider,
131
- [`b2b-table-cell-color-${this.color}`]: true,
132
- }, role: "cell" }, index.h("slot", null)));
133
- }
134
- get host() { return index.getElement(this); }
135
- };
136
- TableCellComponent.style = tableCellCss;
137
-
138
- const tableHeaderCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:400;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-table-hover:#e6f4ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-45);--b2b-size-headline-line-height-100:var(--b2b-size-40);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:400;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}:host{display:table-cell;padding:12px;margin:0;white-space:nowrap;font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);font-weight:bold;border-top:1px solid var(--b2b-color-grey-200);border-bottom:2px solid var(--b2b-color-grey-300);vertical-align:middle}:host .b2b-table-header__heading{cursor:pointer;user-select:none;display:flex;height:var(--b2b-size-icon-100);line-height:var(--b2b-size-icon-100)}:host .b2b-table-header__heading--left{justify-content:start}:host .b2b-table-header__heading--right{justify-content:end;flex-direction:row-reverse}:host .b2b-table-header__heading--center{justify-content:center}:host .b2b-table-header__heading:hover,:host .b2b-table-header__heading:focus-visible{outline:none}:host .b2b-table-header__heading:hover .b2b-table-header__sort,:host .b2b-table-header__heading:focus-visible .b2b-table-header__sort{fill:var(--b2b-color-grey-300)}:host .b2b-table-header__heading:hover .b2b-table-header__sort--not-sorted,:host .b2b-table-header__heading:focus-visible .b2b-table-header__sort--not-sorted{visibility:visible}:host .b2b-table-header__heading:hover .b2b-table-header__sort--descending,:host .b2b-table-header__heading:focus-visible .b2b-table-header__sort--descending{transform:initial;transition:transform 0.4s ease}:host .b2b-table-header__heading:hover .b2b-table-header__sort--ascending,:host .b2b-table-header__heading:focus-visible .b2b-table-header__sort--ascending{transform:rotate(180deg);transition:transform 0.4s ease}:host .b2b-table-header__heading:hover .b2b-table-header__sort--left,:host .b2b-table-header__heading:focus-visible .b2b-table-header__sort--left{float:right}:host .b2b-table-header__heading:hover .b2b-table-header__sort--right,:host .b2b-table-header__heading:focus-visible .b2b-table-header__sort--right{float:right}:host .b2b-table-header__heading.b2b-table-header__sort--active .b2b-table-header__sort,:host .b2b-table-header__heading .b2b-table-header__sort--active:hover .b2b-table-header__sort{fill:var(--b2b-color-black-100)}:host .b2b-table-header__heading.b2b-table-header__sort--active .b2b-table-header__sort--descending,:host .b2b-table-header__heading .b2b-table-header__sort--active:hover .b2b-table-header__sort--descending{transform:rotate(180deg)}:host .b2b-table-header__heading.b2b-table-header__sort--active .b2b-table-header__sort--ascending,:host .b2b-table-header__heading .b2b-table-header__sort--active:hover .b2b-table-header__sort--ascending{transform:initial}:host .b2b-table-header__sort{height:var(--b2b-size-icon-100);fill:var(--b2b-color-black-100)}:host .b2b-table-header__sort--not-sorted{visibility:hidden}:host .b2b-table-header__sort--descending{transform:rotate(180deg)}:host(.b2b-table-header--divider){border-right:1px solid var(--b2b-color-grey-200)}:host(.b2b-table-header--left){padding-left:var(--b2b-size-15)}:host(.b2b-table-header--right){padding-right:var(--b2b-size-15)}:host(.b2b-table-header--fixed){position:sticky;top:0;z-index:2;background-color:var(--b2b-color-white-100)}";
139
-
140
- const TableHeaderComponent = class {
141
- constructor(hostRef) {
142
- index.registerInstance(this, hostRef);
143
- this.b2bChange = index.createEvent(this, "b2b-change", 7);
144
- this.changeSortDirection = (e) => {
145
- if ((e.type === 'keydown' && e.key === 'Enter') || e.type === 'click') {
146
- this.unSortSiblings();
147
- this.setActive();
148
- switch (this.sortDirection) {
149
- case 'not-sorted':
150
- this.sortDirection = table_types.TableSortDirections.ASC;
151
- break;
152
- case 'descending':
153
- this.sortDirection = table_types.TableSortDirections.ASC;
154
- break;
155
- case 'ascending':
156
- this.sortDirection = table_types.TableSortDirections.DESC;
157
- break;
158
- }
159
- this.b2bChange.emit(this.sortDirection);
160
- }
161
- };
162
- this.unSortSiblings = () => {
163
- const parent = this.hostElement.closest('b2b-table-row');
164
- const siblings = Array.from(parent.querySelectorAll('b2b-table-header')).filter(el => el != this.hostElement);
165
- siblings.forEach(sibling => {
166
- if (sibling.sortDirection !== undefined) {
167
- sibling.sortDirection = 'not-sorted';
168
- }
169
- });
170
- };
171
- this.setActive = () => {
172
- this.active = true;
173
- };
174
- this.setInactive = () => {
175
- this.active = false;
176
- };
177
- this.divider = false;
178
- this.fixed = false;
179
- this.sortDirection = undefined;
180
- this.sortId = undefined;
181
- this.contentAlign = table_types.ContentAlignment.LEFT;
182
- this.active = false;
183
- this.iconAlign = undefined;
184
- }
185
- componentWillRender() {
186
- switch (this.contentAlign) {
187
- case table_types.ContentAlignment.LEFT:
188
- this.iconAlign = table_types.SortIconAlignment.RIGHT;
189
- break;
190
- case table_types.ContentAlignment.RIGHT:
191
- this.iconAlign = table_types.SortIconAlignment.LEFT;
192
- break;
193
- case table_types.ContentAlignment.CENTER:
194
- this.iconAlign = table_types.SortIconAlignment.RIGHT;
195
- break;
196
- }
197
- }
198
- render() {
199
- return (index.h(index.Host, { class: {
200
- [`b2b-table-header--${this.sortDirection && this.iconAlign}`]: true,
201
- 'b2b-table-header--divider': this.divider,
202
- 'b2b-table-header--fixed': this.fixed,
203
- }, role: "columnheader", "aria-sort": this.sortDirection === 'not-sorted' ||
204
- this.sortDirection === undefined
205
- ? 'other'
206
- : this.sortDirection }, this.sortDirection !== undefined ? (index.h("div", { tabIndex: 0, class: {
207
- 'b2b-table-header__heading': true,
208
- [`b2b-table-header__heading--${this.contentAlign}`]: true,
209
- 'b2b-table-header__sort--active': this.active,
210
- }, onClick: this.changeSortDirection, onKeyDown: this.changeSortDirection, onMouseLeave: this.setInactive, onBlur: this.setInactive }, index.h("slot", null), index.h("svg", { class: {
211
- 'b2b-table-header__sort': true,
212
- [`b2b-table-header__sort--${this.sortDirection}`]: true,
213
- [`b2b-table-header__sort--${this.iconAlign}`]: true,
214
- }, viewBox: "0 0 24 24", height: "24px", width: "24px", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M19.1831 8.47552L12.8541 2.14703C12.8079 2.10065 12.7524 2.06384 12.6909 2.03839C12.5687 1.98785 12.4313 1.98785 12.3091 2.03839C12.2476 2.06384 12.1921 2.10065 12.1459 2.14703L5.81689 8.47552C5.62158 8.67084 5.62158 8.98724 5.81689 9.18256C6.01221 9.37787 6.32861 9.37787 6.52393 9.18256L12 3.70691V21.4999C12 21.7763 12.2236 21.9999 12.5 21.9999C12.7764 21.9999 13 21.7763 13 21.4999V3.70691L18.4761 9.18256C18.5737 9.28021 18.7017 9.32904 18.8296 9.32904C18.9575 9.32904 19.0854 9.28021 19.1831 9.18256C19.3784 8.98724 19.3784 8.67084 19.1831 8.47552Z" })))) : (index.h("slot", null))));
215
- }
216
- get hostElement() { return index.getElement(this); }
217
- };
218
- TableHeaderComponent.style = tableHeaderCss;
219
-
220
- exports.b2b_checkbox = CheckboxComponent;
221
- exports.b2b_table_cell = TableCellComponent;
222
- exports.b2b_table_header = TableHeaderComponent;
@@ -1,40 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-ceb9958a.js');
6
-
7
- const chipCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:400;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-table-hover:#e6f4ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-45);--b2b-size-headline-line-height-100:var(--b2b-size-40);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:400;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}:host{overflow:hidden;display:inline-flex;max-width:100%}:host .b2b-chip{white-space:nowrap;overflow:hidden;font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);background-color:var(--b2b-color-grey-50);border-radius:var(--b2b-size-50);padding:var(--b2b-size-10) var(--b2b-size-25);line-height:var(--b2b-size-copy-line-height-100);height:var(--b2b-size-70);display:inline-flex;align-items:center;cursor:default;margin-left:var(--b2b-size-20)}:host .b2b-chip__label{margin-right:var(--b2b-size-10);display:inline-block;text-overflow:ellipsis;overflow:hidden}:host .b2b-chip__clearIcon{display:flex;border:none;padding:0;background-color:transparent;fill:var(--b2b-color-grey-400);height:var(--b2b-size-copy-line-height-100);width:var(--b2b-size-50);align-items:center;justify-content:center;cursor:pointer;transform:rotate(180deg);position:relative}:host .b2b-chip__clearIcon:hover{fill:var(--b2b-color-icon-default)}:host .b2b-chip--disabled{pointer-events:none;background:var(--b2b-color-grey-25);color:var(--b2b-color-grey-400)}:host .b2b-chip--disabled__clearIcon{fill:var(--b2b-color-grey-400)}";
8
-
9
- const B2bChipComponent = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- this.b2bClose = index.createEvent(this, "b2b-close", 7);
13
- this.onClick = () => {
14
- if (this.disabled) {
15
- return;
16
- }
17
- this.b2bClose.emit({ value: this.value });
18
- };
19
- this.clearIcon = (index.h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M7.85352 3.14648C7.6582 2.95117 7.3418 2.95117 7.14648 3.14648L5.5 4.79297L3.85352 3.14648C3.6582 2.95117 3.3418 2.95117 3.14648 3.14648C2.95117 3.3418 2.95117 3.6582 3.14648 3.85352L4.79297 5.5L3.14648 7.14648C2.95117 7.3418 2.95117 7.6582 3.14648 7.85352C3.24414 7.95117 3.37207 8 3.5 8C3.62793 8 3.75586 7.95117 3.85352 7.85352L5.5 6.20703L7.14648 7.85352C7.24414 7.95117 7.37207 8 7.5 8C7.62793 8 7.75586 7.95117 7.85352 7.85352C8.04883 7.6582 8.04883 7.3418 7.85352 7.14648L6.20703 5.5L7.85352 3.85352C8.04883 3.6582 8.04883 3.3418 7.85352 3.14648ZM5.5 0C2.46729 0 0 2.46729 0 5.5C0 8.53271 2.46729 11 5.5 11C8.53271 11 11 8.53271 11 5.5C11 2.46729 8.53271 0 5.5 0ZM5.5 10C3.01855 10 1 7.98145 1 5.5C1 3.01855 3.01855 1 5.5 1C7.98145 1 10 3.01855 10 5.5C10 7.98145 7.98145 10 5.5 10Z" })));
20
- this.label = undefined;
21
- this.disabled = false;
22
- this.hasCloseButton = true;
23
- this.value = undefined;
24
- }
25
- render() {
26
- return (index.h(index.Host, null, index.h("div", { class: {
27
- 'b2b-chip': true,
28
- 'b2b-chip--disabled': this.disabled,
29
- } }, index.h("span", { class: {
30
- 'b2b-chip__label': true,
31
- } }, this.label), this.hasCloseButton && (index.h("button", { class: {
32
- 'b2b-chip__clearIcon': true,
33
- 'b2b-chip--disabled__clearIcon': this.disabled,
34
- }, onClick: this.onClick }, this.clearIcon)))));
35
- }
36
- get host() { return index.getElement(this); }
37
- };
38
- B2bChipComponent.style = chipCss;
39
-
40
- exports.b2b_chip_component = B2bChipComponent;
@@ -1,216 +0,0 @@
1
- import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f0a4762b.js';
2
- import { T as TableSizes, C as ContentAlignment, a as TableSortDirections, S as SortIconAlignment } from './table.types-c4d9046e.js';
3
-
4
- const checkboxCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:400;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-table-hover:#e6f4ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-45);--b2b-size-headline-line-height-100:var(--b2b-size-40);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:400;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}:root{--b2b-checkbox-margin-bottom:0}.b2b-checkbox{display:block;font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);width:fit-content;margin-bottom:var(--b2b-checkbox-margin-bottom)}.b2b-checkbox__items{display:flex;justify-content:flex-start;position:relative}.b2b-checkbox__icon{position:absolute;fill:var(--b2b-color-white-100);display:none;margin-top:var(--b2b-size-7);margin-left:var(--b2b-size-1);width:var(--b2b-size-35);height:var(--b2b-size-35);z-index:1000}.b2b-checkbox__input{margin:2px 6px 3px 0;appearance:none;background-color:var(--b2b-color-white-100);border:1px solid var(--b2b-color-grey-400);border-radius:var(--b2b-size-border-radius-100);display:inline-block;position:relative;vertical-align:top;width:var(--b2b-size-40);height:var(--b2b-size-40);flex-shrink:0}.b2b-checkbox--checked .b2b-checkbox__icon{display:inline-block}.b2b-checkbox--checked .b2b-checkbox__input{border-color:var(--b2b-color-black-100);background-color:var(--b2b-color-black-100)}.b2b-checkbox b2b-input-label{display:inline;vertical-align:bottom;user-select:none}.b2b-checkbox span{display:block;font-size:var(--b2b-size-copy-50);color:var(--b2b-color-grey-300);line-height:var(--b2b-size-copy-line-height-75);user-select:none}.b2b-checkbox--error{}.b2b-checkbox--error .b2b-checkbox__input{background-color:var(--b2b-color-error-50);border:1px solid var(--b2b-color-error-100)}.b2b-checkbox--error span{color:var(--b2b-color-error-100)}.b2b-checkbox--error.b2b-checkbox--checked .b2b-checkbox__input{background-color:var(--b2b-color-error-100);border-color:var(--b2b-color-error-100)}.b2b-checkbox--disabled{pointer-events:none}.b2b-checkbox--disabled .b2b-checkbox__input{background-color:var(--b2b-color-grey-25);border-color:var(--b2b-color-grey-300)}.b2b-checkbox--standalone{margin:0}.b2b-checkbox--standalone .b2b-checkbox__input{margin:0}.b2b-checkbox--standalone .b2b-checkbox__icon{margin-top:var(--b2b-size-1)}.b2b-checkbox--indeterminate .b2b-checkbox__input{border-color:var(--b2b-color-black-100);background-color:var(--b2b-color-black-100)}.b2b-checkbox--indeterminate .b2b-checkbox__icon{margin-top:9px;margin-left:var(--b2b-size-7);display:inline-block}.b2b-checkbox--indeterminate.b2b-checkbox--standalone .b2b-checkbox__icon{margin-top:7px}.b2b-checkbox.b2b-checkbox--disabled.b2b-checkbox--checked .b2b-checkbox__input{background-color:var(--b2b-color-grey-300);border-color:var(--b2b-color-grey-300)}";
5
-
6
- const CheckboxComponent = class {
7
- constructor(hostRef) {
8
- registerInstance(this, hostRef);
9
- this.b2bFocus = createEvent(this, "b2b-focus", 7);
10
- this.b2bBlur = createEvent(this, "b2b-blur", 7);
11
- this.b2bChange = createEvent(this, "b2b-change", 7);
12
- this.handleFormData = (event) => {
13
- if (this.name != undefined && this.checked) {
14
- const value = this.value || 'on';
15
- event.formData.append(this.name, value);
16
- }
17
- };
18
- this.emitDetail = () => {
19
- this.b2bChange.emit({
20
- checked: this.checked,
21
- value: this.value,
22
- });
23
- // Dispatches the native change event because it is not propagated beyond the shadow boundary
24
- // globalThis to target the lib.dom Event and not Stencil Event
25
- const changeEvent = new globalThis.Event('change');
26
- this.hostElement.dispatchEvent(changeEvent);
27
- };
28
- this.onFocus = (ev) => {
29
- this.b2bFocus.emit(ev);
30
- };
31
- this.onBlur = (ev) => {
32
- this.b2bBlur.emit(ev);
33
- };
34
- this.onClick = (ev) => {
35
- ev.preventDefault();
36
- if (this.disabled) {
37
- return;
38
- }
39
- else if (this.indeterminate) {
40
- this.indeterminate = false;
41
- this.checked = true;
42
- }
43
- else {
44
- this.checked = !this.checked;
45
- }
46
- this.emitDetail();
47
- };
48
- this.renderIcon = () => {
49
- if (this.indeterminate) {
50
- return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", class: "b2b-checkbox__icon" }, h("path", { d: "M8.5 0H0.5C0.223633 0 0 0.223633 0 0.5C0 0.776367 0.223633 1 0.5 1H8.5C8.77637 1 9 0.776367 9 0.5C9 0.223633 8.77637 0 8.5 0Z", fill: "white" })));
51
- }
52
- if (this.checked) {
53
- return (h("svg", { class: "b2b-checkbox__icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { d: "M11.798 25.082c-.341 0-.681-.13-.942-.389l-7.132-7.115a1.334 1.334 0 0 1 1.884-1.888l6.19 6.175L26.391 7.307a1.334 1.334 0 0 1 1.884 1.888L12.74 24.693c-.26.259-.601.389-.942.389z" })));
54
- }
55
- };
56
- this.label = undefined;
57
- this.required = false;
58
- this.checked = false;
59
- this.disabled = false;
60
- this.indeterminate = undefined;
61
- this.error = undefined;
62
- this.hint = undefined;
63
- this.name = undefined;
64
- this.value = undefined;
65
- this.invalid = false;
66
- this.standalone = false;
67
- this.groupDisabled = false;
68
- }
69
- connectedCallback() {
70
- const form = this.hostElement.closest('form');
71
- if (form != null) {
72
- form.addEventListener('formdata', this.handleFormData);
73
- }
74
- }
75
- render() {
76
- return (h(Host, { onClick: this.onClick }, h("div", { class: {
77
- 'b2b-checkbox': true,
78
- 'b2b-checkbox--error': this.invalid && !this.disabled,
79
- 'b2b-checkbox--disabled': this.disabled || this.groupDisabled,
80
- 'b2b-checkbox--checked': this.checked,
81
- 'b2b-checkbox--standalone': this.standalone,
82
- 'b2b-checkbox--indeterminate': this.indeterminate,
83
- } }, h("div", { class: "b2b-checkbox-items" }, this.renderIcon(), h("input", { class: "b2b-checkbox__input", "aria-labelledby": this.name, type: "checkbox", name: this.name, id: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.groupDisabled, onFocus: this.onFocus, onBlur: this.onBlur }), !this.standalone && (h("b2b-input-label", { id: this.name, required: this.required, disabled: this.disabled }, this.label))), (this.hint !== undefined && !this.invalid) ||
84
- (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : (''))));
85
- }
86
- get hostElement() { return getElement(this); }
87
- };
88
- CheckboxComponent.style = checkboxCss;
89
-
90
- const tableCellCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:400;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-table-hover:#e6f4ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-45);--b2b-size-headline-line-height-100:var(--b2b-size-40);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:400;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}:host{--b2b-table-cell-text-expand-bg:var(--b2b-color-white-100);display:table-cell;padding:12px;margin:0;font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);border-bottom:1px solid var(--b2b-color-grey-200);white-space:normal}:host(.b2b-table-cell--ellipsis){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}:host(.b2b-table-cell--expand-text){position:absolute;white-space:normal;background-color:var(--b2b-table-cell-text-expand-bg);border:1px solid var(--b2b-color-grey-200);border-top:none;z-index:2000;min-width:100px}:host(.b2b-table-cell--left){text-align:left}:host(.b2b-table-cell--right){text-align:right}:host(.b2b-table-cell--center){text-align:center}:host(.b2b-table-cell--divider){border-right:1px solid var(--b2b-color-grey-200)}:host(.b2b-table-cell-color-selected){background-color:var(--b2b-color-table-selected-default)}:host(.b2b-table-cell-color-group){background-color:var(--b2b-color-table-expand-default)}";
91
-
92
- const TableCellComponent = class {
93
- constructor(hostRef) {
94
- registerInstance(this, hostRef);
95
- this.expandTextHoverWaitTime = 600;
96
- this.addExpandStyles = () => {
97
- this.expandTextHoverTimeoutId = setTimeout(() => {
98
- const contentLength = this.host.innerText.length;
99
- const children = this.host.children.length;
100
- if (this.useTextEllipsis && contentLength > 25 && children === 0) {
101
- this.host.style.width = `calc(${this.host.offsetWidth}px - 24px)`;
102
- this.host.classList.add('b2b-table-cell--expand-text');
103
- }
104
- }, this.expandTextHoverWaitTime);
105
- };
106
- this.removeExpandStyles = () => {
107
- this.expandTextHoverTimeoutId &&
108
- clearTimeout(this.expandTextHoverTimeoutId);
109
- this.host.classList.remove('b2b-table-cell--expand-text');
110
- };
111
- this.textWrap = true;
112
- this.size = TableSizes.EXPAND;
113
- this.align = ContentAlignment.LEFT;
114
- this.divider = false;
115
- this.color = 'default';
116
- this.useTextEllipsis = false;
117
- }
118
- componentWillRender() {
119
- this.useTextEllipsis = !this.textWrap && this.size === TableSizes.EQUAL;
120
- }
121
- render() {
122
- return (h(Host, { onMouseEnter: this.addExpandStyles, onMouseLeave: this.removeExpandStyles, class: {
123
- 'b2b-table-cell': true,
124
- ['b2b-table-cell--ellipsis']: this.useTextEllipsis,
125
- ['b2b-table-cell--' + this.align]: true,
126
- ['b2b-table-cell--divider']: this.divider,
127
- [`b2b-table-cell-color-${this.color}`]: true,
128
- }, role: "cell" }, h("slot", null)));
129
- }
130
- get host() { return getElement(this); }
131
- };
132
- TableCellComponent.style = tableCellCss;
133
-
134
- const tableHeaderCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:400;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-table-hover:#e6f4ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-45);--b2b-size-headline-line-height-100:var(--b2b-size-40);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:400;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}:host{display:table-cell;padding:12px;margin:0;white-space:nowrap;font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);font-weight:bold;border-top:1px solid var(--b2b-color-grey-200);border-bottom:2px solid var(--b2b-color-grey-300);vertical-align:middle}:host .b2b-table-header__heading{cursor:pointer;user-select:none;display:flex;height:var(--b2b-size-icon-100);line-height:var(--b2b-size-icon-100)}:host .b2b-table-header__heading--left{justify-content:start}:host .b2b-table-header__heading--right{justify-content:end;flex-direction:row-reverse}:host .b2b-table-header__heading--center{justify-content:center}:host .b2b-table-header__heading:hover,:host .b2b-table-header__heading:focus-visible{outline:none}:host .b2b-table-header__heading:hover .b2b-table-header__sort,:host .b2b-table-header__heading:focus-visible .b2b-table-header__sort{fill:var(--b2b-color-grey-300)}:host .b2b-table-header__heading:hover .b2b-table-header__sort--not-sorted,:host .b2b-table-header__heading:focus-visible .b2b-table-header__sort--not-sorted{visibility:visible}:host .b2b-table-header__heading:hover .b2b-table-header__sort--descending,:host .b2b-table-header__heading:focus-visible .b2b-table-header__sort--descending{transform:initial;transition:transform 0.4s ease}:host .b2b-table-header__heading:hover .b2b-table-header__sort--ascending,:host .b2b-table-header__heading:focus-visible .b2b-table-header__sort--ascending{transform:rotate(180deg);transition:transform 0.4s ease}:host .b2b-table-header__heading:hover .b2b-table-header__sort--left,:host .b2b-table-header__heading:focus-visible .b2b-table-header__sort--left{float:right}:host .b2b-table-header__heading:hover .b2b-table-header__sort--right,:host .b2b-table-header__heading:focus-visible .b2b-table-header__sort--right{float:right}:host .b2b-table-header__heading.b2b-table-header__sort--active .b2b-table-header__sort,:host .b2b-table-header__heading .b2b-table-header__sort--active:hover .b2b-table-header__sort{fill:var(--b2b-color-black-100)}:host .b2b-table-header__heading.b2b-table-header__sort--active .b2b-table-header__sort--descending,:host .b2b-table-header__heading .b2b-table-header__sort--active:hover .b2b-table-header__sort--descending{transform:rotate(180deg)}:host .b2b-table-header__heading.b2b-table-header__sort--active .b2b-table-header__sort--ascending,:host .b2b-table-header__heading .b2b-table-header__sort--active:hover .b2b-table-header__sort--ascending{transform:initial}:host .b2b-table-header__sort{height:var(--b2b-size-icon-100);fill:var(--b2b-color-black-100)}:host .b2b-table-header__sort--not-sorted{visibility:hidden}:host .b2b-table-header__sort--descending{transform:rotate(180deg)}:host(.b2b-table-header--divider){border-right:1px solid var(--b2b-color-grey-200)}:host(.b2b-table-header--left){padding-left:var(--b2b-size-15)}:host(.b2b-table-header--right){padding-right:var(--b2b-size-15)}:host(.b2b-table-header--fixed){position:sticky;top:0;z-index:2;background-color:var(--b2b-color-white-100)}";
135
-
136
- const TableHeaderComponent = class {
137
- constructor(hostRef) {
138
- registerInstance(this, hostRef);
139
- this.b2bChange = createEvent(this, "b2b-change", 7);
140
- this.changeSortDirection = (e) => {
141
- if ((e.type === 'keydown' && e.key === 'Enter') || e.type === 'click') {
142
- this.unSortSiblings();
143
- this.setActive();
144
- switch (this.sortDirection) {
145
- case 'not-sorted':
146
- this.sortDirection = TableSortDirections.ASC;
147
- break;
148
- case 'descending':
149
- this.sortDirection = TableSortDirections.ASC;
150
- break;
151
- case 'ascending':
152
- this.sortDirection = TableSortDirections.DESC;
153
- break;
154
- }
155
- this.b2bChange.emit(this.sortDirection);
156
- }
157
- };
158
- this.unSortSiblings = () => {
159
- const parent = this.hostElement.closest('b2b-table-row');
160
- const siblings = Array.from(parent.querySelectorAll('b2b-table-header')).filter(el => el != this.hostElement);
161
- siblings.forEach(sibling => {
162
- if (sibling.sortDirection !== undefined) {
163
- sibling.sortDirection = 'not-sorted';
164
- }
165
- });
166
- };
167
- this.setActive = () => {
168
- this.active = true;
169
- };
170
- this.setInactive = () => {
171
- this.active = false;
172
- };
173
- this.divider = false;
174
- this.fixed = false;
175
- this.sortDirection = undefined;
176
- this.sortId = undefined;
177
- this.contentAlign = ContentAlignment.LEFT;
178
- this.active = false;
179
- this.iconAlign = undefined;
180
- }
181
- componentWillRender() {
182
- switch (this.contentAlign) {
183
- case ContentAlignment.LEFT:
184
- this.iconAlign = SortIconAlignment.RIGHT;
185
- break;
186
- case ContentAlignment.RIGHT:
187
- this.iconAlign = SortIconAlignment.LEFT;
188
- break;
189
- case ContentAlignment.CENTER:
190
- this.iconAlign = SortIconAlignment.RIGHT;
191
- break;
192
- }
193
- }
194
- render() {
195
- return (h(Host, { class: {
196
- [`b2b-table-header--${this.sortDirection && this.iconAlign}`]: true,
197
- 'b2b-table-header--divider': this.divider,
198
- 'b2b-table-header--fixed': this.fixed,
199
- }, role: "columnheader", "aria-sort": this.sortDirection === 'not-sorted' ||
200
- this.sortDirection === undefined
201
- ? 'other'
202
- : this.sortDirection }, this.sortDirection !== undefined ? (h("div", { tabIndex: 0, class: {
203
- 'b2b-table-header__heading': true,
204
- [`b2b-table-header__heading--${this.contentAlign}`]: true,
205
- 'b2b-table-header__sort--active': this.active,
206
- }, onClick: this.changeSortDirection, onKeyDown: this.changeSortDirection, onMouseLeave: this.setInactive, onBlur: this.setInactive }, h("slot", null), h("svg", { class: {
207
- 'b2b-table-header__sort': true,
208
- [`b2b-table-header__sort--${this.sortDirection}`]: true,
209
- [`b2b-table-header__sort--${this.iconAlign}`]: true,
210
- }, viewBox: "0 0 24 24", height: "24px", width: "24px", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M19.1831 8.47552L12.8541 2.14703C12.8079 2.10065 12.7524 2.06384 12.6909 2.03839C12.5687 1.98785 12.4313 1.98785 12.3091 2.03839C12.2476 2.06384 12.1921 2.10065 12.1459 2.14703L5.81689 8.47552C5.62158 8.67084 5.62158 8.98724 5.81689 9.18256C6.01221 9.37787 6.32861 9.37787 6.52393 9.18256L12 3.70691V21.4999C12 21.7763 12.2236 21.9999 12.5 21.9999C12.7764 21.9999 13 21.7763 13 21.4999V3.70691L18.4761 9.18256C18.5737 9.28021 18.7017 9.32904 18.8296 9.32904C18.9575 9.32904 19.0854 9.28021 19.1831 9.18256C19.3784 8.98724 19.3784 8.67084 19.1831 8.47552Z" })))) : (h("slot", null))));
211
- }
212
- get hostElement() { return getElement(this); }
213
- };
214
- TableHeaderComponent.style = tableHeaderCss;
215
-
216
- export { CheckboxComponent as b2b_checkbox, TableCellComponent as b2b_table_cell, TableHeaderComponent as b2b_table_header };