@synergy-design-system/components 2.31.2 → 2.32.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 (331) hide show
  1. package/code-quality/html-validate/scripts/deprecation.js +1 -0
  2. package/code-quality/html-validate/scripts/synergy-element-rules.js +7 -1
  3. package/dist/chunks/{chunk.JTSGQRUI.js → chunk.227MERHC.js} +2 -2
  4. package/dist/chunks/{chunk.7CRVMDW5.js → chunk.2LWC5VGW.js} +2 -2
  5. package/dist/chunks/{chunk.3DUL2OP4.js → chunk.2YGY6DRR.js} +2 -2
  6. package/dist/chunks/{chunk.UMTN2TU2.js → chunk.34UKMOAN.js} +6 -6
  7. package/dist/chunks/{chunk.JQDBNSFS.js → chunk.3G4ZJEZH.js} +2 -2
  8. package/dist/chunks/{chunk.B5BVIZ3W.js → chunk.3UCVZ2N3.js} +3 -3
  9. package/dist/chunks/{chunk.EFO5BI6T.js → chunk.44QQS6VO.js} +2 -2
  10. package/dist/chunks/{chunk.SMAOMVFZ.js → chunk.46QGGYGR.js} +7 -7
  11. package/dist/chunks/{chunk.WHKWCNJR.js → chunk.4EGE74LM.js} +3 -3
  12. package/dist/chunks/{chunk.DOIUTN5M.js → chunk.4PCC4RLB.js} +2 -2
  13. package/dist/chunks/{chunk.IRCX4RJL.js → chunk.55XHHV7Z.js} +2 -2
  14. package/dist/chunks/{chunk.SRK6ZYCL.js → chunk.56DHDBEB.js} +5 -5
  15. package/dist/chunks/{chunk.DX47WJSS.js → chunk.56EDYG6B.js} +2 -2
  16. package/dist/chunks/{chunk.NH4JQFOM.js → chunk.57DU3E3Z.js} +3 -1
  17. package/dist/chunks/{chunk.NH4JQFOM.js.map → chunk.57DU3E3Z.js.map} +2 -2
  18. package/dist/chunks/{chunk.TBQSOTUS.js → chunk.5C2RFLFS.js} +2 -2
  19. package/dist/chunks/{chunk.6PCADVSN.js → chunk.62CAR5MG.js} +6 -6
  20. package/dist/chunks/{chunk.WROPOFUG.js → chunk.62JHOU5H.js} +2 -2
  21. package/dist/chunks/{chunk.WROPOFUG.js.map → chunk.62JHOU5H.js.map} +1 -1
  22. package/dist/chunks/{chunk.S5N2TE2L.js → chunk.6DYKE5RE.js} +3 -1
  23. package/dist/chunks/{chunk.S5N2TE2L.js.map → chunk.6DYKE5RE.js.map} +2 -2
  24. package/dist/chunks/{chunk.XJAGZG2W.js → chunk.6JBICFHU.js} +2 -2
  25. package/dist/chunks/{chunk.6IWBHFOD.js → chunk.6VVYMYDJ.js} +9 -9
  26. package/dist/chunks/{chunk.UU7653PU.js → chunk.73DAHCC3.js} +2 -2
  27. package/dist/chunks/{chunk.4YG7EYB2.js → chunk.73KA7UX5.js} +2 -2
  28. package/dist/chunks/{chunk.NY2GAPA3.js → chunk.7AWK33AC.js} +6 -6
  29. package/dist/chunks/{chunk.XDWFPRPE.js → chunk.7DYLS7V5.js} +2 -2
  30. package/dist/chunks/{chunk.2G7DZ3GJ.js → chunk.7E7CVZ43.js} +2 -2
  31. package/dist/chunks/{chunk.4TGDH4W7.js → chunk.7GT7PLXZ.js} +8 -8
  32. package/dist/chunks/{chunk.NUIJATJY.js → chunk.7R4JCT5J.js} +2 -2
  33. package/dist/chunks/{chunk.K7A64ZY7.js → chunk.7WCAKMAK.js} +2 -2
  34. package/dist/chunks/{chunk.P3HQDPXQ.js → chunk.A4ZAJ37W.js} +2 -2
  35. package/dist/chunks/{chunk.OO6R7BWT.js → chunk.AL4FWF4H.js} +3 -3
  36. package/dist/chunks/{chunk.I7ZAFHZ3.js → chunk.AXBCLZGS.js} +2 -2
  37. package/dist/chunks/{chunk.OBWURI5H.js → chunk.BBLILCDY.js} +7 -7
  38. package/dist/chunks/{chunk.OYFNERZO.js → chunk.BQDQ2XF4.js} +2 -2
  39. package/dist/chunks/{chunk.KQQM2CWQ.js → chunk.BSMGYXJY.js} +2 -2
  40. package/dist/chunks/{chunk.LC7FBSL4.js → chunk.BU5O7KW4.js} +2 -2
  41. package/dist/chunks/{chunk.DH5KSMJS.js → chunk.BZUKUJ36.js} +18 -16
  42. package/dist/chunks/chunk.BZUKUJ36.js.map +7 -0
  43. package/dist/chunks/{chunk.SKYSXSBE.js → chunk.C3GOUZVH.js} +2 -2
  44. package/dist/chunks/{chunk.XNHQJ4X7.js → chunk.E2NPS5ZN.js} +5 -5
  45. package/dist/chunks/{chunk.SUZPXB4O.js → chunk.E3KQWTHA.js} +2 -2
  46. package/dist/chunks/{chunk.L6JQ4II4.js → chunk.EV64WMJD.js} +2 -2
  47. package/dist/chunks/{chunk.KJ5DXPFW.js → chunk.F5XNF33L.js} +2 -2
  48. package/dist/chunks/{chunk.2EJ6TB2U.js → chunk.F7AAPYYY.js} +6 -6
  49. package/dist/chunks/chunk.FWLUR33I.js +165 -0
  50. package/dist/chunks/chunk.FWLUR33I.js.map +7 -0
  51. package/dist/chunks/{chunk.ELFHYJLZ.js → chunk.G4PY4E62.js} +2 -2
  52. package/dist/chunks/{chunk.JTSBAJHO.js → chunk.G6CLSRWS.js} +2 -2
  53. package/dist/chunks/{chunk.V2NAJIXY.js → chunk.GWVD6JWM.js} +2 -2
  54. package/dist/chunks/{chunk.EJ4C4K46.js → chunk.HCLG3RID.js} +5 -5
  55. package/dist/chunks/{chunk.MQZANITC.js → chunk.HMPLHOEC.js} +2 -2
  56. package/dist/chunks/{chunk.YKQLG6R3.js → chunk.IKAS4HSG.js} +2 -2
  57. package/dist/chunks/{chunk.EISTC2GP.js → chunk.IN2KZ2JM.js} +2 -2
  58. package/dist/chunks/{chunk.GIU3H3J3.js → chunk.IPGLY3H4.js} +2 -2
  59. package/dist/chunks/{chunk.GIU3H3J3.js.map → chunk.IPGLY3H4.js.map} +1 -1
  60. package/dist/chunks/{chunk.OU4PLFYW.js → chunk.IQ23XRJD.js} +6 -6
  61. package/dist/chunks/{chunk.WTKBRIY4.js → chunk.IZUV4XRR.js} +5 -5
  62. package/dist/chunks/{chunk.ZTFYI6ZI.js → chunk.JGPSIBNQ.js} +5 -5
  63. package/dist/chunks/{chunk.BMHMFPD4.js → chunk.JJWV4MPY.js} +2 -2
  64. package/dist/chunks/{chunk.BC6YFGMY.js → chunk.JORU53XU.js} +2 -2
  65. package/dist/chunks/{chunk.TW3XHMG6.js → chunk.KR4ZPT4X.js} +10 -10
  66. package/dist/chunks/{chunk.QWSLKG3U.js → chunk.KRG4ASUB.js} +8 -8
  67. package/dist/chunks/{chunk.HFRXN2DK.js → chunk.KY7HUUUM.js} +2 -2
  68. package/dist/chunks/{chunk.XUCEJ53P.js → chunk.LMUAOSNG.js} +3 -3
  69. package/dist/chunks/{chunk.AAPLCFRS.js → chunk.LZHDDLQQ.js} +2 -2
  70. package/dist/chunks/{chunk.QPAYAMLZ.js → chunk.MTRKAUI5.js} +13 -13
  71. package/dist/chunks/{chunk.OH3PPVV4.js → chunk.MYVDDEUN.js} +3 -1
  72. package/dist/chunks/chunk.MYVDDEUN.js.map +7 -0
  73. package/dist/chunks/{chunk.IY34DPIJ.js → chunk.N5CECNHU.js} +10 -10
  74. package/dist/chunks/{chunk.LLNE7YOD.js → chunk.N634EXYZ.js} +3 -3
  75. package/dist/chunks/{chunk.XPTYP3S2.js → chunk.NGCFEEST.js} +2 -2
  76. package/dist/chunks/{chunk.RYNKWTQ6.js → chunk.NISA5CE2.js} +6 -6
  77. package/dist/chunks/{chunk.3JXNFR6T.js → chunk.NOESO6WV.js} +2 -2
  78. package/dist/chunks/{chunk.FTFMQV75.js → chunk.NXKFEIMZ.js} +6 -6
  79. package/dist/chunks/{chunk.CLTYOE3E.js → chunk.O66H6R5X.js} +2 -2
  80. package/dist/chunks/{chunk.22PGKUCU.js → chunk.O7S4ZPF7.js} +2 -2
  81. package/dist/chunks/{chunk.6YPSMCHB.js → chunk.OFOF7ZOR.js} +2 -2
  82. package/dist/chunks/{chunk.PFSSGWUF.js → chunk.OTRVRUXO.js} +3 -3
  83. package/dist/chunks/{chunk.3IVPV3E3.js → chunk.P7N2RZPB.js} +7 -7
  84. package/dist/chunks/{chunk.BO7FAKBN.js → chunk.PIC4O6Q2.js} +9 -9
  85. package/dist/chunks/{chunk.CELWLWZJ.js → chunk.QXIZDYA4.js} +2 -2
  86. package/dist/chunks/{chunk.TZUQMH6X.js → chunk.R42AFTFA.js} +9 -9
  87. package/dist/chunks/{chunk.6DPKNL3S.js → chunk.R52TN2LF.js} +2 -2
  88. package/dist/chunks/{chunk.JMBUWWA2.js → chunk.RIPTU5BC.js} +2 -2
  89. package/dist/chunks/{chunk.S5KXHITD.js → chunk.RPM55AQB.js} +2 -2
  90. package/dist/chunks/{chunk.5XVVEHBO.js → chunk.RUQMHV5V.js} +2 -2
  91. package/dist/chunks/{chunk.CITWLSAM.js → chunk.RVWB22MU.js} +2 -2
  92. package/dist/chunks/{chunk.NB47QWRL.js → chunk.RW5BBJ5K.js} +2 -2
  93. package/dist/chunks/{chunk.DZZ3B5GF.js → chunk.SBGVZBBD.js} +95 -63
  94. package/dist/chunks/chunk.SBGVZBBD.js.map +7 -0
  95. package/dist/chunks/{chunk.ZJFTAIAU.js → chunk.T7UT34YW.js} +2 -2
  96. package/dist/chunks/{chunk.6DPMTGX6.js → chunk.TEYI3WY6.js} +2 -2
  97. package/dist/chunks/{chunk.XUFDCLB4.js → chunk.ULNCAAQN.js} +2 -2
  98. package/dist/chunks/{chunk.7RJUAC42.js → chunk.V6HU7SQP.js} +2 -2
  99. package/dist/chunks/{chunk.JVSTXX5J.js → chunk.VBE5RBH5.js} +6 -6
  100. package/dist/chunks/{chunk.DJHTOGW7.js → chunk.VFOXZ66D.js} +2 -2
  101. package/dist/chunks/{chunk.SFTF4XCD.js → chunk.W22XP6SZ.js} +19 -10
  102. package/dist/chunks/chunk.W22XP6SZ.js.map +7 -0
  103. package/dist/chunks/{chunk.2LPH33ZQ.js → chunk.W24WTLHF.js} +9 -9
  104. package/dist/chunks/chunk.W24WTLHF.js.map +7 -0
  105. package/dist/chunks/{chunk.DIV5RCIM.js → chunk.W56BX5IM.js} +10 -10
  106. package/dist/chunks/{chunk.PXXI4VRP.js → chunk.WCPQBS67.js} +2 -2
  107. package/dist/chunks/{chunk.RZG7IW73.js → chunk.WIDU3JFX.js} +6 -6
  108. package/dist/chunks/{chunk.EHCS6X6N.js → chunk.XACPLHJJ.js} +4 -4
  109. package/dist/chunks/{chunk.VQG4ENGK.js → chunk.XRSPUMKG.js} +3 -3
  110. package/dist/chunks/{chunk.JDN6CDYL.js → chunk.XVFMAH3Z.js} +6 -6
  111. package/dist/chunks/{chunk.HLZPJC4B.js → chunk.YGQ7VBLW.js} +2 -2
  112. package/dist/chunks/{chunk.HE2VZIBP.js → chunk.YLY5MMDA.js} +2 -2
  113. package/dist/chunks/{chunk.LOAB2FDA.js → chunk.Z2RDB23K.js} +2 -2
  114. package/dist/chunks/{chunk.4UOOTX72.js → chunk.Z52I4QC3.js} +2 -2
  115. package/dist/chunks/{chunk.YPSUFGKY.js → chunk.ZH6J636O.js} +2 -2
  116. package/dist/components/accordion/accordion.component.js +6 -6
  117. package/dist/components/accordion/accordion.js +7 -7
  118. package/dist/components/alert/alert.component.js +13 -13
  119. package/dist/components/alert/alert.js +14 -14
  120. package/dist/components/badge/badge.component.js +8 -8
  121. package/dist/components/badge/badge.js +9 -9
  122. package/dist/components/breadcrumb/breadcrumb.component.js +9 -9
  123. package/dist/components/breadcrumb/breadcrumb.js +10 -10
  124. package/dist/components/breadcrumb-item/breadcrumb-item.component.js +2 -2
  125. package/dist/components/breadcrumb-item/breadcrumb-item.js +3 -3
  126. package/dist/components/button/button.component.js +11 -11
  127. package/dist/components/button/button.js +12 -12
  128. package/dist/components/button-group/button-group.component.js +2 -2
  129. package/dist/components/button-group/button-group.js +3 -3
  130. package/dist/components/card/card.component.js +2 -2
  131. package/dist/components/card/card.js +3 -3
  132. package/dist/components/checkbox/checkbox.component.js +8 -8
  133. package/dist/components/checkbox/checkbox.js +9 -9
  134. package/dist/components/combobox/combobox.component.js +12 -12
  135. package/dist/components/combobox/combobox.js +13 -13
  136. package/dist/components/details/details.component.js +10 -10
  137. package/dist/components/details/details.js +11 -11
  138. package/dist/components/dialog/dialog.component.js +11 -11
  139. package/dist/components/dialog/dialog.js +12 -12
  140. package/dist/components/divider/divider.component.js +2 -2
  141. package/dist/components/divider/divider.js +3 -3
  142. package/dist/components/drawer/drawer.component.d.ts +2 -0
  143. package/dist/components/drawer/drawer.component.js +11 -11
  144. package/dist/components/drawer/drawer.js +12 -12
  145. package/dist/components/dropdown/dropdown.component.js +5 -5
  146. package/dist/components/dropdown/dropdown.js +6 -6
  147. package/dist/components/file/file.component.js +12 -12
  148. package/dist/components/file/file.js +13 -13
  149. package/dist/components/header/header.component.d.ts +2 -1
  150. package/dist/components/header/header.component.js +8 -8
  151. package/dist/components/header/header.js +9 -9
  152. package/dist/components/icon/icon.component.js +4 -4
  153. package/dist/components/icon/icon.js +5 -5
  154. package/dist/components/icon/library.js +2 -2
  155. package/dist/components/icon/library.system.js +1 -1
  156. package/dist/components/icon-button/icon-button.component.js +8 -8
  157. package/dist/components/icon-button/icon-button.js +9 -9
  158. package/dist/components/input/input.component.js +11 -11
  159. package/dist/components/input/input.js +12 -12
  160. package/dist/components/menu/menu.component.js +2 -2
  161. package/dist/components/menu/menu.js +3 -3
  162. package/dist/components/menu-item/menu-item.component.js +9 -9
  163. package/dist/components/menu-item/menu-item.js +10 -10
  164. package/dist/components/menu-label/menu-label.component.js +3 -3
  165. package/dist/components/menu-label/menu-label.js +4 -4
  166. package/dist/components/nav-item/nav-item.component.js +3 -3
  167. package/dist/components/nav-item/nav-item.js +4 -4
  168. package/dist/components/optgroup/optgroup.component.js +3 -3
  169. package/dist/components/optgroup/optgroup.js +4 -4
  170. package/dist/components/option/option.component.js +7 -7
  171. package/dist/components/option/option.js +8 -8
  172. package/dist/components/popup/popup.component.js +4 -4
  173. package/dist/components/popup/popup.js +5 -5
  174. package/dist/components/prio-nav/prio-nav.component.js +12 -12
  175. package/dist/components/prio-nav/prio-nav.js +13 -13
  176. package/dist/components/progress-bar/progress-bar.component.js +4 -4
  177. package/dist/components/progress-bar/progress-bar.js +5 -5
  178. package/dist/components/progress-ring/progress-ring.component.js +4 -4
  179. package/dist/components/progress-ring/progress-ring.js +5 -5
  180. package/dist/components/radio/radio.component.js +8 -8
  181. package/dist/components/radio/radio.js +9 -9
  182. package/dist/components/radio-button/radio-button.component.js +5 -5
  183. package/dist/components/radio-button/radio-button.js +6 -6
  184. package/dist/components/radio-group/radio-group.component.js +6 -6
  185. package/dist/components/radio-group/radio-group.js +7 -7
  186. package/dist/components/range/range.component.js +9 -9
  187. package/dist/components/range/range.js +10 -10
  188. package/dist/components/range-tick/range-tick.component.js +2 -2
  189. package/dist/components/range-tick/range-tick.js +3 -3
  190. package/dist/components/resize-observer/resize-observer.component.js +2 -2
  191. package/dist/components/select/select.component.js +13 -13
  192. package/dist/components/select/select.js +14 -14
  193. package/dist/components/side-nav/side-nav.component.d.ts +58 -14
  194. package/dist/components/side-nav/side-nav.component.js +16 -14
  195. package/dist/components/side-nav/side-nav.js +17 -15
  196. package/dist/components/side-nav/side-nav.styles.js +1 -1
  197. package/dist/components/spinner/spinner.component.js +4 -4
  198. package/dist/components/spinner/spinner.js +5 -5
  199. package/dist/components/switch/switch.component.js +5 -5
  200. package/dist/components/switch/switch.js +6 -6
  201. package/dist/components/tab/tab.component.js +11 -11
  202. package/dist/components/tab/tab.js +12 -12
  203. package/dist/components/tab-group/tab-group.component.js +12 -12
  204. package/dist/components/tab-group/tab-group.js +13 -13
  205. package/dist/components/tab-panel/tab-panel.component.js +2 -2
  206. package/dist/components/tab-panel/tab-panel.js +3 -3
  207. package/dist/components/tag/tag.component.js +11 -11
  208. package/dist/components/tag/tag.js +12 -12
  209. package/dist/components/textarea/textarea.component.js +5 -5
  210. package/dist/components/textarea/textarea.js +6 -6
  211. package/dist/components/tooltip/tooltip.component.js +5 -5
  212. package/dist/components/tooltip/tooltip.js +6 -6
  213. package/dist/components/validate/utility.js +2 -2
  214. package/dist/components/validate/validate.component.js +15 -15
  215. package/dist/components/validate/validate.js +16 -16
  216. package/dist/custom-elements.json +85 -33
  217. package/dist/styles/index.css +1 -1
  218. package/dist/synergy.js +114 -114
  219. package/dist/translations/de.js +4 -2
  220. package/dist/translations/de.js.map +2 -2
  221. package/dist/translations/en.js +1 -1
  222. package/dist/utilities/defaultSettings/base.d.ts +3 -1
  223. package/dist/utilities/defaultSettings/base.js +1 -1
  224. package/dist/utilities/defaultSettings/decorator.js +3 -3
  225. package/dist/utilities/defaultSettings/functions.js +2 -2
  226. package/dist/utilities/defaultSettings/index.js +3 -3
  227. package/dist/utilities/icon-library.js +2 -2
  228. package/dist/utilities/localize.d.ts +2 -0
  229. package/dist/utilities/localize.js +2 -2
  230. package/dist/vscode.html-custom-data.json +13 -4
  231. package/package.json +3 -3
  232. package/dist/chunks/chunk.2LPH33ZQ.js.map +0 -7
  233. package/dist/chunks/chunk.DH5KSMJS.js.map +0 -7
  234. package/dist/chunks/chunk.DZZ3B5GF.js.map +0 -7
  235. package/dist/chunks/chunk.H3HTSQKK.js +0 -97
  236. package/dist/chunks/chunk.H3HTSQKK.js.map +0 -7
  237. package/dist/chunks/chunk.OH3PPVV4.js.map +0 -7
  238. package/dist/chunks/chunk.SFTF4XCD.js.map +0 -7
  239. /package/dist/chunks/{chunk.JTSGQRUI.js.map → chunk.227MERHC.js.map} +0 -0
  240. /package/dist/chunks/{chunk.7CRVMDW5.js.map → chunk.2LWC5VGW.js.map} +0 -0
  241. /package/dist/chunks/{chunk.3DUL2OP4.js.map → chunk.2YGY6DRR.js.map} +0 -0
  242. /package/dist/chunks/{chunk.UMTN2TU2.js.map → chunk.34UKMOAN.js.map} +0 -0
  243. /package/dist/chunks/{chunk.JQDBNSFS.js.map → chunk.3G4ZJEZH.js.map} +0 -0
  244. /package/dist/chunks/{chunk.B5BVIZ3W.js.map → chunk.3UCVZ2N3.js.map} +0 -0
  245. /package/dist/chunks/{chunk.EFO5BI6T.js.map → chunk.44QQS6VO.js.map} +0 -0
  246. /package/dist/chunks/{chunk.SMAOMVFZ.js.map → chunk.46QGGYGR.js.map} +0 -0
  247. /package/dist/chunks/{chunk.WHKWCNJR.js.map → chunk.4EGE74LM.js.map} +0 -0
  248. /package/dist/chunks/{chunk.DOIUTN5M.js.map → chunk.4PCC4RLB.js.map} +0 -0
  249. /package/dist/chunks/{chunk.IRCX4RJL.js.map → chunk.55XHHV7Z.js.map} +0 -0
  250. /package/dist/chunks/{chunk.SRK6ZYCL.js.map → chunk.56DHDBEB.js.map} +0 -0
  251. /package/dist/chunks/{chunk.DX47WJSS.js.map → chunk.56EDYG6B.js.map} +0 -0
  252. /package/dist/chunks/{chunk.TBQSOTUS.js.map → chunk.5C2RFLFS.js.map} +0 -0
  253. /package/dist/chunks/{chunk.6PCADVSN.js.map → chunk.62CAR5MG.js.map} +0 -0
  254. /package/dist/chunks/{chunk.XJAGZG2W.js.map → chunk.6JBICFHU.js.map} +0 -0
  255. /package/dist/chunks/{chunk.6IWBHFOD.js.map → chunk.6VVYMYDJ.js.map} +0 -0
  256. /package/dist/chunks/{chunk.UU7653PU.js.map → chunk.73DAHCC3.js.map} +0 -0
  257. /package/dist/chunks/{chunk.4YG7EYB2.js.map → chunk.73KA7UX5.js.map} +0 -0
  258. /package/dist/chunks/{chunk.NY2GAPA3.js.map → chunk.7AWK33AC.js.map} +0 -0
  259. /package/dist/chunks/{chunk.XDWFPRPE.js.map → chunk.7DYLS7V5.js.map} +0 -0
  260. /package/dist/chunks/{chunk.2G7DZ3GJ.js.map → chunk.7E7CVZ43.js.map} +0 -0
  261. /package/dist/chunks/{chunk.4TGDH4W7.js.map → chunk.7GT7PLXZ.js.map} +0 -0
  262. /package/dist/chunks/{chunk.NUIJATJY.js.map → chunk.7R4JCT5J.js.map} +0 -0
  263. /package/dist/chunks/{chunk.K7A64ZY7.js.map → chunk.7WCAKMAK.js.map} +0 -0
  264. /package/dist/chunks/{chunk.P3HQDPXQ.js.map → chunk.A4ZAJ37W.js.map} +0 -0
  265. /package/dist/chunks/{chunk.OO6R7BWT.js.map → chunk.AL4FWF4H.js.map} +0 -0
  266. /package/dist/chunks/{chunk.I7ZAFHZ3.js.map → chunk.AXBCLZGS.js.map} +0 -0
  267. /package/dist/chunks/{chunk.OBWURI5H.js.map → chunk.BBLILCDY.js.map} +0 -0
  268. /package/dist/chunks/{chunk.OYFNERZO.js.map → chunk.BQDQ2XF4.js.map} +0 -0
  269. /package/dist/chunks/{chunk.KQQM2CWQ.js.map → chunk.BSMGYXJY.js.map} +0 -0
  270. /package/dist/chunks/{chunk.LC7FBSL4.js.map → chunk.BU5O7KW4.js.map} +0 -0
  271. /package/dist/chunks/{chunk.SKYSXSBE.js.map → chunk.C3GOUZVH.js.map} +0 -0
  272. /package/dist/chunks/{chunk.XNHQJ4X7.js.map → chunk.E2NPS5ZN.js.map} +0 -0
  273. /package/dist/chunks/{chunk.SUZPXB4O.js.map → chunk.E3KQWTHA.js.map} +0 -0
  274. /package/dist/chunks/{chunk.L6JQ4II4.js.map → chunk.EV64WMJD.js.map} +0 -0
  275. /package/dist/chunks/{chunk.KJ5DXPFW.js.map → chunk.F5XNF33L.js.map} +0 -0
  276. /package/dist/chunks/{chunk.2EJ6TB2U.js.map → chunk.F7AAPYYY.js.map} +0 -0
  277. /package/dist/chunks/{chunk.ELFHYJLZ.js.map → chunk.G4PY4E62.js.map} +0 -0
  278. /package/dist/chunks/{chunk.JTSBAJHO.js.map → chunk.G6CLSRWS.js.map} +0 -0
  279. /package/dist/chunks/{chunk.V2NAJIXY.js.map → chunk.GWVD6JWM.js.map} +0 -0
  280. /package/dist/chunks/{chunk.EJ4C4K46.js.map → chunk.HCLG3RID.js.map} +0 -0
  281. /package/dist/chunks/{chunk.MQZANITC.js.map → chunk.HMPLHOEC.js.map} +0 -0
  282. /package/dist/chunks/{chunk.YKQLG6R3.js.map → chunk.IKAS4HSG.js.map} +0 -0
  283. /package/dist/chunks/{chunk.EISTC2GP.js.map → chunk.IN2KZ2JM.js.map} +0 -0
  284. /package/dist/chunks/{chunk.OU4PLFYW.js.map → chunk.IQ23XRJD.js.map} +0 -0
  285. /package/dist/chunks/{chunk.WTKBRIY4.js.map → chunk.IZUV4XRR.js.map} +0 -0
  286. /package/dist/chunks/{chunk.ZTFYI6ZI.js.map → chunk.JGPSIBNQ.js.map} +0 -0
  287. /package/dist/chunks/{chunk.BMHMFPD4.js.map → chunk.JJWV4MPY.js.map} +0 -0
  288. /package/dist/chunks/{chunk.BC6YFGMY.js.map → chunk.JORU53XU.js.map} +0 -0
  289. /package/dist/chunks/{chunk.TW3XHMG6.js.map → chunk.KR4ZPT4X.js.map} +0 -0
  290. /package/dist/chunks/{chunk.QWSLKG3U.js.map → chunk.KRG4ASUB.js.map} +0 -0
  291. /package/dist/chunks/{chunk.HFRXN2DK.js.map → chunk.KY7HUUUM.js.map} +0 -0
  292. /package/dist/chunks/{chunk.XUCEJ53P.js.map → chunk.LMUAOSNG.js.map} +0 -0
  293. /package/dist/chunks/{chunk.AAPLCFRS.js.map → chunk.LZHDDLQQ.js.map} +0 -0
  294. /package/dist/chunks/{chunk.QPAYAMLZ.js.map → chunk.MTRKAUI5.js.map} +0 -0
  295. /package/dist/chunks/{chunk.IY34DPIJ.js.map → chunk.N5CECNHU.js.map} +0 -0
  296. /package/dist/chunks/{chunk.LLNE7YOD.js.map → chunk.N634EXYZ.js.map} +0 -0
  297. /package/dist/chunks/{chunk.XPTYP3S2.js.map → chunk.NGCFEEST.js.map} +0 -0
  298. /package/dist/chunks/{chunk.RYNKWTQ6.js.map → chunk.NISA5CE2.js.map} +0 -0
  299. /package/dist/chunks/{chunk.3JXNFR6T.js.map → chunk.NOESO6WV.js.map} +0 -0
  300. /package/dist/chunks/{chunk.FTFMQV75.js.map → chunk.NXKFEIMZ.js.map} +0 -0
  301. /package/dist/chunks/{chunk.CLTYOE3E.js.map → chunk.O66H6R5X.js.map} +0 -0
  302. /package/dist/chunks/{chunk.22PGKUCU.js.map → chunk.O7S4ZPF7.js.map} +0 -0
  303. /package/dist/chunks/{chunk.6YPSMCHB.js.map → chunk.OFOF7ZOR.js.map} +0 -0
  304. /package/dist/chunks/{chunk.PFSSGWUF.js.map → chunk.OTRVRUXO.js.map} +0 -0
  305. /package/dist/chunks/{chunk.3IVPV3E3.js.map → chunk.P7N2RZPB.js.map} +0 -0
  306. /package/dist/chunks/{chunk.BO7FAKBN.js.map → chunk.PIC4O6Q2.js.map} +0 -0
  307. /package/dist/chunks/{chunk.CELWLWZJ.js.map → chunk.QXIZDYA4.js.map} +0 -0
  308. /package/dist/chunks/{chunk.TZUQMH6X.js.map → chunk.R42AFTFA.js.map} +0 -0
  309. /package/dist/chunks/{chunk.6DPKNL3S.js.map → chunk.R52TN2LF.js.map} +0 -0
  310. /package/dist/chunks/{chunk.JMBUWWA2.js.map → chunk.RIPTU5BC.js.map} +0 -0
  311. /package/dist/chunks/{chunk.S5KXHITD.js.map → chunk.RPM55AQB.js.map} +0 -0
  312. /package/dist/chunks/{chunk.5XVVEHBO.js.map → chunk.RUQMHV5V.js.map} +0 -0
  313. /package/dist/chunks/{chunk.CITWLSAM.js.map → chunk.RVWB22MU.js.map} +0 -0
  314. /package/dist/chunks/{chunk.NB47QWRL.js.map → chunk.RW5BBJ5K.js.map} +0 -0
  315. /package/dist/chunks/{chunk.ZJFTAIAU.js.map → chunk.T7UT34YW.js.map} +0 -0
  316. /package/dist/chunks/{chunk.6DPMTGX6.js.map → chunk.TEYI3WY6.js.map} +0 -0
  317. /package/dist/chunks/{chunk.XUFDCLB4.js.map → chunk.ULNCAAQN.js.map} +0 -0
  318. /package/dist/chunks/{chunk.7RJUAC42.js.map → chunk.V6HU7SQP.js.map} +0 -0
  319. /package/dist/chunks/{chunk.JVSTXX5J.js.map → chunk.VBE5RBH5.js.map} +0 -0
  320. /package/dist/chunks/{chunk.DJHTOGW7.js.map → chunk.VFOXZ66D.js.map} +0 -0
  321. /package/dist/chunks/{chunk.DIV5RCIM.js.map → chunk.W56BX5IM.js.map} +0 -0
  322. /package/dist/chunks/{chunk.PXXI4VRP.js.map → chunk.WCPQBS67.js.map} +0 -0
  323. /package/dist/chunks/{chunk.RZG7IW73.js.map → chunk.WIDU3JFX.js.map} +0 -0
  324. /package/dist/chunks/{chunk.EHCS6X6N.js.map → chunk.XACPLHJJ.js.map} +0 -0
  325. /package/dist/chunks/{chunk.VQG4ENGK.js.map → chunk.XRSPUMKG.js.map} +0 -0
  326. /package/dist/chunks/{chunk.JDN6CDYL.js.map → chunk.XVFMAH3Z.js.map} +0 -0
  327. /package/dist/chunks/{chunk.HLZPJC4B.js.map → chunk.YGQ7VBLW.js.map} +0 -0
  328. /package/dist/chunks/{chunk.HE2VZIBP.js.map → chunk.YLY5MMDA.js.map} +0 -0
  329. /package/dist/chunks/{chunk.LOAB2FDA.js.map → chunk.Z2RDB23K.js.map} +0 -0
  330. /package/dist/chunks/{chunk.4UOOTX72.js.map → chunk.Z52I4QC3.js.map} +0 -0
  331. /package/dist/chunks/{chunk.YPSUFGKY.js.map → chunk.ZH6J636O.js.map} +0 -0
@@ -753,7 +753,7 @@
753
753
  },
754
754
  {
755
755
  "name": "burger-menu",
756
- "description": "Defines the current visibility and icon of the burger-menu icon.\nThe menu button is added automatically if the component finds a syn-side-nav in non-rail mode.\nThe following values can be used:\n- hidden: The burger menu is not visible\n- open: The burger menu is visible and shows the close icon\n- closed: The burger menu is visible and shows the open icon",
756
+ "description": "Defines the current visibility and icon of the burger-menu icon.\nThe menu button is added automatically if the component finds a syn-side-nav in\nvariant=\"default\".\nThe following values can be used:\n- hidden: The burger menu is not visible\n- open: The burger menu is visible and shows the close icon\n- closed: The burger menu is visible and shows the open icon",
757
757
  "values": [
758
758
  { "name": "hidden" },
759
759
  { "name": "open" },
@@ -1777,11 +1777,11 @@
1777
1777
  },
1778
1778
  {
1779
1779
  "name": "syn-side-nav",
1780
- "description": "The <syn-side-nav /> element contains secondary navigation and fits below the header.\nIt can be used to group multiple navigation items (<syn-nav-item />s) together.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the side-nav opens.\n- **syn-after-show** - Emitted after the side-nav opens and all animations are complete.\n- **syn-hide** - Emitted when the side-nav closes.\n- **syn-after-hide** - Emitted after the side-nav closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the side-nav.\n- **hide()** - Hides the side-nav\n\n### **Slots:**\n - _default_ - The main content of the side-nav. Used for <syn-nav-item /> elements.\n- **footer** - The footer content of the side-nav. Used for <syn-nav-item /> elements. Please avoid having to many nav-items as it can massively influence the user experience.\n\n### **CSS Properties:**\n - **--side-nav-open-width** - The width of the side-nav if in open state _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The components base wrapper\n- **drawer** - The drawer that is used under the hood for creating the side-nav\n- **content-container** - The components main content container\n- **content** - The components main content\n- **footer-container** - The components footer content container (where the footer slot content is rendered)\n- **footer-divider** - The components footer divider\n- **footer** - The components footer content\n- **overlay** - The overlay that covers the screen behind the side-nav.\n- **panel** - The side-nav's panel (where the whole content is rendered).\n- **body** - The side-nav's body (where the default slot content is rendered)\n- **drawer__base** - The drawer's base wrapper",
1780
+ "description": "The <syn-side-nav /> element contains secondary navigation and fits below the header.\nIt can be used to group multiple navigation items (<syn-nav-item />s) together.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the side-nav opens.\n- **syn-after-show** - Emitted after the side-nav opens and all animations are complete.\n- **syn-hide** - Emitted when the side-nav closes.\n- **syn-after-hide** - Emitted after the side-nav closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the side-nav.\n- **hide()** - Hides the side-nav\n\n### **Slots:**\n - _default_ - The main content of the side-nav. Used for <syn-nav-item /> elements.\n- **footer** - The footer content of the side-nav. Used for <syn-nav-item /> elements. Please avoid having to many nav-items as it can massively influence the user experience.\n- **toggle-label** - The label of the toggle nav-item for variant=\"sticky\".\n- **toggle-icon** - An icon to use in lieu of the default icon for the toggle nav-item for variant=\"sticky\".\n\n### **CSS Properties:**\n - **--side-nav-open-width** - The width of the side-nav if in open state _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The components base wrapper\n- **drawer** - The drawer that is used under the hood for creating the side-nav\n- **content-container** - The components main content container\n- **content** - The components main content\n- **footer-container** - The components footer content container (where the footer slot content is rendered)\n- **footer-divider** - The components footer divider\n- **footer** - The components footer content\n- **overlay** - The overlay that covers the screen behind the side-nav.\n- **panel** - The side-nav's panel (where the whole content is rendered).\n- **body** - The side-nav's body (where the default slot content is rendered)\n- **drawer__base** - The drawer's base wrapper\n- **toggle-nav-item** - The nav-item to toggle open state for variant=\"sticky\"\n- **toggle-icon** - The icon of the toggle nav-item for variant=\"sticky\"\n- **toggle-label** - The label of the toggle nav-item for variant=\"sticky\".",
1781
1781
  "attributes": [
1782
1782
  {
1783
1783
  "name": "open",
1784
- "description": "Indicates whether or not the side-nav is open.\nYou can toggle this attribute to show and hide the side-nav, or you can use the `show()` and\n`hide()` methods and this attribute will reflect the side-nav's open state.\n\nDepending if the rail attribute is set or not, the behavior will differ.\n\n__Non rail__:\nWith `open` will show the side-nav.\nWithout `open`, the side-nav will be hidden.\n\n__Rail__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.",
1784
+ "description": "Indicates whether or not the side-nav is open.\nYou can toggle this attribute to show and hide the side-nav, or you can use the `show()` and\n`hide()` methods and this attribute will reflect the side-nav's open state.\n\nDepending on the \"variant\" attribute, the behavior will differ.\n\n__Default__:\nWith `open` will show the side-nav with an overlay.\nWithout `open`, the side-nav will be hidden.\n\n__Rail__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.\n\n__Sticky__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.",
1785
1785
  "values": []
1786
1786
  },
1787
1787
  {
@@ -1789,9 +1789,18 @@
1789
1789
  "description": "Use the rail attribute to only show the prefix of navigation items in closed state.\nThis will open on hover on the rail navigation.\nOn touch devices the navigation opens on click and shows an overlay.\n\nNote: The Rail is only an option if all Navigation Items on the first level have an Icon.\nIf this is not the case you should use a burger navigation.",
1790
1790
  "values": []
1791
1791
  },
1792
+ {
1793
+ "name": "variant",
1794
+ "description": "The variant that should be used to show the side navigation.\n\nThe following variants are supported:\n- **default** (default): Always shows the whole content and additionally an overlay.\nThis makes especially sense for applications, where you navigate to a place and stay\nthere for a longer time.\n- **rail**: Only show the prefix of navigation items in closed state.\nThis will open on hover on the rail navigation.\nOn touch devices the navigation opens on click and shows an overlay.\nNote: The rail variant is only an option if all Navigation Items on the first level\nhave an Icon.\nIf this is not the case you should use a burger navigation.\n- **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)\nand full width. This variant is only possible for non-nested navigation items.\nNote: The sticky variant is only an option if all Navigation Items on the first level\nhave an Icon and if there are only \"first level\" items.",
1795
+ "values": [
1796
+ { "name": "default" },
1797
+ { "name": "rail" },
1798
+ { "name": "sticky" }
1799
+ ]
1800
+ },
1792
1801
  {
1793
1802
  "name": "no-focus-trapping",
1794
- "description": "By default, the side-nav traps the focus if in non-rail mode and open.\nTo disable the focus trapping, set this attribute.",
1803
+ "description": "By default, the side-nav traps the focus if in variant=\"default\" and open.\nTo disable the focus trapping, set this attribute.",
1795
1804
  "values": []
1796
1805
  }
1797
1806
  ],
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "url": "https://www.sick.com"
5
5
  },
6
6
  "name": "@synergy-design-system/components",
7
- "version": "2.31.2",
7
+ "version": "2.32.0",
8
8
  "description": "",
9
9
  "repository": {
10
10
  "type": "git",
@@ -102,7 +102,7 @@
102
102
  "vendorism": "^5.0.0",
103
103
  "@synergy-design-system/eslint-config-syn": "0.1.0",
104
104
  "@synergy-design-system/stylelint-config-syn": "0.1.0",
105
- "@synergy-design-system/tokens": "2.18.1"
105
+ "@synergy-design-system/tokens": "2.19.0"
106
106
  },
107
107
  "release": {
108
108
  "branches": [
@@ -170,7 +170,7 @@
170
170
  "lit": "^3.2.1"
171
171
  },
172
172
  "peerDependencies": {
173
- "@synergy-design-system/tokens": "^2.18.1"
173
+ "@synergy-design-system/tokens": "^2.19.0"
174
174
  },
175
175
  "scripts": {
176
176
  "build": "node scripts/build.js",
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/components/header/header.component.ts"],
4
- "sourcesContent": ["/* eslint-disable @typescript-eslint/unbound-method */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit/static-html.js';\nimport { property, state } from 'lit/decorators.js';\nimport type { CSSResultGroup } from 'lit';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport styles from './header.styles.js';\nimport SynIcon from '../icon/icon.js';\nimport type SynSideNav from '../side-nav/side-nav.component.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { watch } from '../../internal/watch.js';\n\n/**\n * @summary The <syn-header /> element provides a generic application header\n * that can be used to add applications name, toolbar and primary navigation.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs\n * @status stable\n * @since 1.10.0\n *\n * @slot label - The label for the header\n * @slot logo - The logo that should be displayed. Will fall back to the SICK logo if not provided\n * @slot meta-navigation - The meta-navigation is used to add various application toolbar icons\n * Best used with `<syn-icon-button />` and `<syn-drop-down />`\n * @slot navigation - This slot can be used to add an optional horizontal navigation\n * @slot open-burger-menu-icon - An icon to use in lieu of the default burger-menu=open state.\n * The default close icon is a 'x'.\n * @slot closed-burger-menu-icon - An icon to use in lieu of the default burger-menu=closed state.\n * The default open icon is a burger menu.\n *\n * @event syn-burger-menu-closed - Emitted when the burger menu is toggled to closed\n * @event syn-burger-menu-hidden - Emitted when the burger menu is toggled to hidden\n * @event syn-burger-menu-open - Emitted when the burger menu is toggled to open\n *\n * @csspart base - The component's base wrapper\n * @csspart content - The wrapper most content items reside\n * @csspart logo - The wrapper the application logo resides in\n * @csspart label - The element wrapping the application name\n * @csspart meta-navigation - The Item wrapping the optional application menu\n * @csspart navigation - The wrapper that is holding the optional top navigation section\n * @csspart burger-menu-toggle-button - The button that toggles the burger menu\n */\nexport default class SynHeader extends SynergyElement {\n static styles: CSSResultGroup = [\n componentStyles,\n styles,\n ];\n\n static dependencies = {\n 'syn-icon': SynIcon,\n };\n\n private readonly hasSlotController = new HasSlotController(this, '[default]', 'logo', 'label', 'meta-navigation', 'navigation');\n\n private readonly localize = new LocalizeController(this);\n\n /**\n * Internal mutation observer\n */\n private mutationObserver: MutationObserver;\n\n /*\n * #587: If the side nav is animating, we should not allow to trigger the burger menu\n */\n private isSideNavAnimating = false;\n\n /**\n * The headers label. If you need to display HTML, use the `label` slot instead.\n */\n @property() label = '';\n\n /**\n * Defines the current visibility and icon of the burger-menu icon.\n * The menu button is added automatically if the component finds a syn-side-nav in non-rail mode.\n * The following values can be used:\n * - hidden: The burger menu is not visible\n * - open: The burger menu is visible and shows the close icon\n * - closed: The burger menu is visible and shows the open icon\n */\n @property({ attribute: 'burger-menu', reflect: true }) burgerMenu: 'hidden' | 'open' | 'closed' = 'hidden';\n\n /**\n * The side nav\n */\n @state() private sideNav: SynSideNav | null;\n\n private toggleBurgerMenu() {\n switch (this.burgerMenu) {\n case 'closed': this.burgerMenu = 'open'; break;\n case 'open': this.burgerMenu = 'closed'; break;\n default: break;\n }\n }\n\n private handleBurgerMenuToggle() {\n // If there is a side-nav in non-rail mode, toggle the open state!\n if (this.sideNav && !this.sideNav.rail && !this.isSideNavAnimating) {\n this.sideNav.open = !this.sideNav.open;\n }\n if (!this.isSideNavAnimating) {\n this.toggleBurgerMenu();\n }\n }\n\n /**\n * Automatically update the burger menu icon based\n * on the state of the side-nav, if one is connected.\n */\n private updateBurgerMenuBasedOnSideNav() {\n if (this.sideNav) {\n // Hide the burger menu icon if the side-nav is in rail mode\n if (this.sideNav.rail) {\n this.burgerMenu = 'hidden';\n } else {\n this.burgerMenu = this.sideNav.open ? 'open' : 'closed';\n }\n }\n }\n\n @watch('burgerMenu', { waitUntilFirstUpdate: true })\n handleBurgerMenu() {\n const myEvt: keyof GlobalEventHandlersEventMap = `syn-burger-menu-${this.burgerMenu}`;\n this.emit(myEvt);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this.mutationObserver = new MutationObserver(() => this.updateBurgerMenuBasedOnSideNav());\n }\n\n firstUpdated() {\n // Search for a side-nav and use the first found in case of the connectSideNavigation method\n // is not used by the user.\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n this.updateComplete.then(() => {\n const sideNav = document.querySelector('syn-side-nav');\n this.connectSideNavigation(sideNav);\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n // Remove observer\n this.mutationObserver.disconnect();\n }\n\n /**\n * Connect a `syn-side-nav` to add automatic interaction of the header with the side navigation\n * like showing the burger menu icon and open / close handling.\n *\n * If no side navigation is connected, the header will use the first `syn-side-nav` element it\n * finds.\n *\n * @param sideNav The side navigation to connect to the header\n */\n connectSideNavigation(sideNav: SynSideNav | null) {\n this.mutationObserver.disconnect();\n\n this.sideNav = sideNav || document.querySelector('syn-side-nav');\n if (this.sideNav) {\n // Need to call the method initially, if the side-nav is not open on connect time.\n // Otherwise the mutation observer won`t trigger the method.\n this.updateBurgerMenuBasedOnSideNav();\n this.mutationObserver.observe(this.sideNav, { attributeFilter: ['open', 'rail'], attributes: true });\n\n // #587: Make sure to not trigger the burger menu if the side nav is currently\n // animating and the user clicks on the burger menu button.\n const isAnimating = () => {\n this.isSideNavAnimating = true;\n };\n\n const isNotAnimating = () => {\n this.isSideNavAnimating = false;\n };\n\n this.sideNav.addEventListener('syn-show', isAnimating);\n this.sideNav.addEventListener('syn-hide', isAnimating);\n this.sideNav.addEventListener('syn-after-show', isNotAnimating);\n this.sideNav.addEventListener('syn-after-hide', isNotAnimating);\n }\n }\n\n render() {\n const hasNavigation = this.hasSlotController.test('navigation');\n const showBurgerMenu = this.burgerMenu !== 'hidden';\n return html`\n <header\n class=${classMap({\n header: true,\n 'header--has-burger-menu': showBurgerMenu,\n 'header--has-navigation': hasNavigation,\n })}\n part=\"base\"\n >\n <!-- .header__content -->\n <div part=\"content\" class=\"header__content\">\n\n ${showBurgerMenu\n ? html`\n <button\n aria-label=${this.localize.term(this.burgerMenu === 'closed' ? 'openMenu' : 'closeMenu')}\n class=\"header__burger-menu-toggle\"\n @click=${this.handleBurgerMenuToggle}\n part=\"burger-menu-toggle-button\"\n type=\"button\"\n >\n ${this.burgerMenu === 'open'\n ? html`\n <slot name=\"open-burger-menu-icon\">\n <syn-icon name=\"x-lg\" library=\"system\"></syn-icon>\n </slot>\n `\n : html`\n <slot name=\"closed-burger-menu-icon\">\n <syn-icon name=\"menu\" library=\"system\"></syn-icon>\n </slot>\n `}\n </button>\n `\n : ''}\n\n <div part=\"logo\" class=\"header__logo\">\n <slot name=\"logo\">\n <syn-icon name=\"logo-color\" library=\"system\" label=\"SICK Sensor Intelligence\"></syn-icon>\n </slot>\n </div>\n\n <div part=\"label\" class=\"header__label\">\n <slot name=\"label\">\n ${this.label}\n </slot>\n </div>\n\n <div part=\"meta-navigation\" class=\"header__meta-navigation\">\n <slot name=\"meta-navigation\"></slot>\n </div>\n </div>\n <!-- /.header__content -->\n\n <div part=\"navigation\" class=\"header__navigation\">\n <slot name=\"navigation\"></slot>\n </div>\n </header>\n `;\n }\n}\n"],
5
- "mappings": "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",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/components/nav-item/nav-item.component.ts"],
4
- "sourcesContent": ["import { classMap } from 'lit/directives/class-map.js';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport { html, literal } from 'lit/static-html.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport SynDivider from '../divider/divider.component.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { watch } from '../../internal/watch.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport styles from './nav-item.styles.js';\n\n/**\n * @summary Flexible button / link component that can be used to quickly build navigations.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-nav-item--docs\n * Takes one of 3 forms:\n * - button (default),\n * - link (overrides button if a 'href' is provided),\n * - or accordion (overrides all other if 'children' slot is defined).\n *\n * @status stable\n * @since 1.14.0\n *\n * @dependency syn-divider\n *\n * @event syn-show - Emitted when the navigation item:\n * - has children,\n * - and is clicked while HTML details are hidden.\n *\n * @event syn-hide - Emitted when the navigation item:\n * - has children,\n * - and is clicked while HTML details are shown.\n *\n * @event syn-blur - Emitted when the button loses focus.\n * @event syn-focus - Emitted when the button gains focus.\n *\n * @slot - The navigation item's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n * @slot children - Slot used to provide nested child navigation elements.\n * If provided, details and summary elements will be used.\n * A chevron will be shown on the right side regardless of the chevron property.\n *\n * @csspart base - The component's base wrapper including children.\n * @csspart children - The wrapper that holds the children\n * @csspart content-wrapper - The component's content wrapper.\n * @csspart content - The component's content excluding children.\n * @csspart current-indicator - The indicator used when current is set to true\n * @csspart chevron - The container that wraps the chevron.\n * @csspart details - The details element rendered when there are children available\n * @csspart divider - The components optional top divider.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n *\n * @cssproperty --indentation - Numeric value, indicating the level the item is placed at.\n * @cssproperty --indentation-stepping - The amount of pixels each level will indent.\n * @cssproperty --display-children - Display property of the children. Defaults to \"contents\"\n */\nexport default class SynNavItem extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles];\n\n static dependencies = {\n 'syn-divider': SynDivider,\n };\n\n private readonly hasSlotController = new HasSlotController(this, '[default]', 'children', 'prefix', 'suffix');\n\n private resizeObserver: ResizeObserver;\n\n private mutationObserver: MutationObserver;\n\n /**\n * The current focus state\n */\n @state() private hasFocus = false;\n\n /**\n * Only the prefix should be displayed\n */\n @state() private showPrefixOnly = false;\n\n /**\n * A nested nav-item is marked as current\n */\n @state() private currentMarkedChild = false;\n\n /**\n * The content area is multiline\n */\n @state() private isMultiLine = false;\n\n /**\n * Reference to the children slot\n */\n @query('slot[name=\"children\"]') childrenSlot: HTMLSlotElement;\n\n /**\n * Reference to the outermost button\n */\n @query('.nav-item') control: HTMLButtonElement | HTMLLinkElement | HTMLElement;\n\n /**\n * The navigation item's href target.\n * If provided, the navigation item will use an anchor tag otherwise it will use a button tag.\n *\n * If the 'children' slot is provided, the navigation item will ignore the 'href' and use\n * accordion behavior.\n */\n @property({ reflect: true, type: String }) href: string;\n\n /** Tells the browser where to open the link. Only used when `href` is present. */\n @property() target: '_blank' | '_parent' | '_self' | '_top';\n\n /**\n * When using `href`, this attribute will map to the underlying link's `rel` attribute.\n * Unlike regular links, the default is `noreferrer noopener` to prevent security exploits.\n *\n * However, if you're using `target` to point to a specific tab/window,\n * this will prevent that from working correctly.\n *\n * You can remove or change the default value by setting the attribute\n * to an empty string or a value of your choice, respectively.\n */\n @property() rel = 'noreferrer noopener';\n\n /*\n * Indicates that the navigation item is currently selected.\n * The aria-current attribute is set to \"page\" on the host if true.\n */\n @property({ reflect: true, type: Boolean }) current = false;\n\n /**\n * Disables the navigation item.\n */\n @property({ reflect: true, type: Boolean }) disabled = false;\n\n /**\n * The navigation item's orientation.\n */\n @property({ reflect: true, type: Boolean }) horizontal = false;\n\n /**\n * Appends a chevron to the right side of a navigation item.\n * Only used if `horizontal` is false.\n */\n @property({ reflect: true, type: Boolean }) chevron = false;\n\n /**\n * Reflects HTML details element state and allows control from parent.\n * Only used if `horizontal` is false and `children` is defined.\n */\n @property({ reflect: true, type: Boolean }) open = false;\n\n /**\n * Toggle to true to show a divider above the element.\n * Only available when horizontal is false.\n */\n @property({ reflect: true, type: Boolean }) divider = false;\n\n private isButton(): boolean {\n return !this.href && !this.hasSlotController.test('children');\n }\n\n private isLink(): boolean {\n return !!this.href && !this.hasSlotController.test('children');\n }\n\n private isAccordion(): boolean {\n return this.hasSlotController.test('children');\n }\n\n // eslint-disable-next-line class-methods-use-this\n private getNavItemChildren(childrenSlot: HTMLSlotElement): SynNavItem[] {\n return Array.from(\n childrenSlot?.assignedElements({\n flatten: true,\n }) as HTMLElement[]\n || [],\n )\n .map(slottedElement => (slottedElement.tagName.toLowerCase() === 'syn-nav-item' ? slottedElement as SynNavItem : Array.from(slottedElement.querySelectorAll<SynNavItem>(':scope > syn-nav-item'))))\n .flat();\n }\n\n private getAllNestedNavItems(childrenSlot: HTMLSlotElement): SynNavItem[] {\n const allNavItems = this.getNavItemChildren(childrenSlot);\n\n const nestedNavItems = allNavItems\n .map(item => item.getAllNestedNavItems(item.childrenSlot))\n .flat();\n\n return allNavItems.concat(nestedNavItems);\n }\n\n private handleCurrentMarkedChild() {\n const sideNav = this.closest('syn-side-nav');\n\n if (!this.open || !!sideNav?.rail) {\n this.currentMarkedChild = this\n .getAllNestedNavItems(this.childrenSlot)\n .some(item => item.current);\n }\n }\n\n private handleClickButton(e: MouseEvent) {\n if (this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n }\n }\n\n private handleClickSummary(e: MouseEvent) {\n e.preventDefault();\n e.stopPropagation();\n\n if (this.disabled) return;\n\n if (this.open) {\n this.hideDetails();\n } else {\n this.showDetails();\n }\n }\n\n private hideDetails() {\n this.open = false;\n this.emit('syn-hide', {\n cancelable: true,\n });\n }\n\n private showDetails() {\n this.open = true;\n this.emit('syn-show', {\n cancelable: true,\n });\n }\n\n /**\n * Automatically add the correct level of indentation for sub items if none is provided\n */\n private handleSlotChange() {\n const computedStyle = getComputedStyle(this);\n const lengthStyle = computedStyle.length;\n\n // This workaround is needed for firefox.\n // When the nav-item is used inside a custom-element with a custom-element in it\n // (e.g syn-side-nav with integrated syn-drawer), the getComputedStyle property is not yet there\n // Moving it in the next render cycle works.\n // Probably related to the firefox special behavior. See: https://caniuse.com/mdn-api_window_getcomputedstyle\n if (lengthStyle === 0) {\n setTimeout(() => {\n this.handleSlotChange();\n });\n return;\n }\n\n this.handleCurrentMarkedChild();\n\n // Use the current level of the component\n const level = computedStyle.getPropertyValue('--indentation');\n\n // We allow at most 3 levels\n const nextLevel = Math.min(parseInt(level, 10) + 1, 2);\n\n this.getNavItemChildren(this.childrenSlot)\n .forEach(item => {\n item.style.setProperty('--indentation', nextLevel.toFixed(0));\n });\n }\n\n private handleBlur() {\n this.hasFocus = false;\n this.emit('syn-blur');\n }\n\n private handleFocus() {\n this.hasFocus = true;\n this.emit('syn-focus');\n }\n\n private handleWidth(entries: ResizeObserverEntry[]) {\n entries.forEach(entry => {\n if (entry.contentRect.width < 100) {\n const hasPrefix = this.hasSlotController.test('prefix');\n this.showPrefixOnly = hasPrefix;\n } else {\n this.showPrefixOnly = false;\n }\n\n if (entry.contentRect.height > 48) {\n this.isMultiLine = true;\n } else {\n this.isMultiLine = false;\n }\n });\n }\n\n // Make sure the resize observer is disconnected when the horizontal property is set to true\n // In this case we, never want it to use prefix only mode\n @watch('horizontal', { waitUntilFirstUpdate: true })\n handleHorizontalChange() {\n if (this.horizontal) {\n this.resizeObserver.disconnect();\n } else {\n this.resizeObserver.observe(this);\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.resizeObserver = new ResizeObserver((entries) => this.handleWidth(entries));\n if (!this.horizontal) {\n this.resizeObserver.observe(this);\n }\n }\n\n firstUpdated(_changedProperties: PropertyValues) {\n super.firstUpdated(_changedProperties);\n this.mutationObserver = new MutationObserver(() => {\n if (this.childrenSlot) {\n this.handleCurrentMarkedChild();\n }\n });\n\n this.mutationObserver.observe(this, {\n attributeFilter: ['current', 'open'],\n childList: true,\n subtree: true,\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.resizeObserver?.disconnect();\n this.mutationObserver?.disconnect();\n }\n\n /**\n * Removes focus from the button.\n */\n blur() {\n this.control.blur();\n }\n\n /**\n * Simulates a click on the nav-items button, link or summary.\n */\n click() {\n this.control.click();\n }\n\n /**\n * Sets focus on the nav-item\n */\n focus(options?: FocusOptions) {\n this.control.focus(options);\n }\n\n // eslint-disable-next-line complexity\n render() {\n const isButton = this.isButton();\n const isLink = this.isLink();\n const isAccordion = this.isAccordion();\n\n const sideNav = this.closest('syn-side-nav');\n\n const showCurrentIndicatorForNested = (this.currentMarkedChild && !this.open)\n || (this.currentMarkedChild && this.open && !!sideNav?.rail && !sideNav?.open);\n\n // Defines the initial tag to use for the root component\n let tag = literal`button`;\n if (isAccordion) tag = literal`summary`;\n else if (isLink) tag = literal`a`;\n\n const hasChevron = (this.chevron || isAccordion) && !this.horizontal;\n\n // Define the click method to use\n let clickAction;\n if (isAccordion) {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n clickAction = this.handleClickSummary;\n } else if (isButton) {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n clickAction = this.handleClickButton;\n }\n\n /* eslint-disable lit/no-invalid-html */\n /* eslint-disable lit/binding-positions */\n /* eslint-disable @typescript-eslint/unbound-method */\n const root = html`\n <${tag}\n aria-controls=${ifDefined(isAccordion ? 'navigation-item-details' : undefined)}\n aria-current=${ifDefined(this.current ? 'page' : undefined)}\n aria-disabled=${this.disabled}\n @blur=${this.handleBlur}\n class=${classMap({\n 'nav-item': true,\n 'nav-item--current': this.current || showCurrentIndicatorForNested,\n 'nav-item--disabled': this.disabled,\n 'nav-item--focused': this.hasFocus,\n 'nav-item--has-content': this.hasSlotController.test('[default]'),\n 'nav-item--has-prefix': this.hasSlotController.test('prefix'),\n 'nav-item--has-suffix': this.hasSlotController.test('suffix'),\n 'nav-item--horizontal': this.horizontal,\n 'nav-item--is-link': isLink,\n 'nav-item--multi-line': this.isMultiLine,\n 'nav-item--show-prefix-only': this.showPrefixOnly,\n 'nav-item--vertical': !this.horizontal,\n 'nav-item-is-accordion': isAccordion,\n })}\n @click=${clickAction}\n ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n @focus=${this.handleFocus}\n href=${ifDefined(isLink ? this.href : undefined)}\n part=\"base\"\n role=${isLink ? 'link' : 'button'}\n rel=${ifDefined(isLink ? this.rel : undefined)}\n tabindex=${this.disabled ? '-1' : '0'}\n target=${ifDefined(isLink ? this.target : undefined)}\n >\n\n ${this.divider && !this.horizontal\n ? html`<syn-divider class=\"divider\" part=\"divider\"></syn-divider>`\n : ''\n }\n\n <div class=\"nav-item__content\" part=\"content-wrapper\">\n <slot name=\"prefix\" part=\"prefix\" class=\"nav-item__prefix\"></slot>\n\n <div part=\"content-container\" class=\"nav-item__content-container\">\n <slot part=\"content\"></slot>\n </div>\n\n <slot name=\"suffix\" part=\"suffix\" class=\"nav-item__suffix\"></slot>\n\n ${hasChevron ? html`\n <syn-icon\n class=${classMap({\n 'nav-item__chevron': true,\n 'nav-item__chevron-open': this.open,\n })}\n color=\"currentColor\"\n library=\"system\"\n name=\"chevron-down\"\n part=\"chevron\"\n /></syn-icon>`\n : ''}\n\n <div\n class=${classMap({\n 'current-indicator': true,\n 'current-indicator--disabled': this.disabled,\n 'current-indicator--visible': this.current || showCurrentIndicatorForNested,\n })}\n part=\"current-indicator\"\n >\n </div>\n </div>\n\n </${tag}>\n `;\n /* eslint-enable lit/no-invalid-html */\n /* eslint-enable lit/binding-positions */\n\n return isAccordion ? html`\n <details\n id=\"navigation-item-details\"\n ?open=${this.open}\n part=\"details\"\n >\n ${root}\n <slot\n class=\"children\"\n name=\"children\"\n part=\"children\"\n @slotchange=${this.handleSlotChange}\n ></slot>\n </details>\n ` : root;\n /* eslint-enable @typescript-eslint/unbound-method */\n }\n}\n"],
5
- "mappings": "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",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/components/side-nav/side-nav.component.ts"],
4
- "sourcesContent": ["/* eslint-disable @typescript-eslint/unbound-method */\nimport { classMap } from 'lit/directives/class-map.js';\nimport type { CSSResultGroup } from 'lit';\nimport { html } from 'lit/static-html.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport styles from './side-nav.styles.js';\nimport SynDrawer from '../drawer/drawer.component.js';\nimport SynDivider from '../divider/divider.component.js';\nimport { waitForEvent } from '../../internal/event.js';\nimport { watch } from '../../internal/watch.js';\nimport { getAnimation, setAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { unlockBodyScrolling } from '../../internal/scroll.js';\nimport { blurActiveElement } from '../../internal/closeActiveElement.js';\n\n/**\n * @summary The <syn-side-nav /> element contains secondary navigation and fits below the header.\n * It can be used to group multiple navigation items (<syn-nav-item />s) together.\n *\n * @example\n * <syn-side-nav open>\n * <syn-nav-item >Item 1</syn-nav-item>\n * <syn-nav-item divider>Item 2</syn-nav-item>\n * </syn-side-nav>\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs\n * @status stable\n * @since 1.14.0\n *\n * @dependency syn-divider\n * @dependency syn-drawer\n *\n * @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.\n * @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.\n * Please avoid having to many nav-items as it can massively influence the user experience.\n *\n * @event syn-show - Emitted when the side-nav opens.\n * @event syn-after-show - Emitted after the side-nav opens and all animations are complete.\n * @event syn-hide - Emitted when the side-nav closes.\n * @event syn-after-hide - Emitted after the side-nav closes and all animations are complete.\n *\n * @csspart base - The components base wrapper\n * @csspart drawer - The drawer that is used under the hood for creating the side-nav\n * @csspart content-container - The components main content container\n * @csspart content - The components main content\n * @csspart footer-container - The components footer content container\n (where the footer slot content is rendered)\n * @csspart footer-divider - The components footer divider\n * @csspart footer - The components footer content\n * @csspart overlay - The overlay that covers the screen behind the side-nav.\n * @csspart panel - The side-nav's panel (where the whole content is rendered).\n * @csspart body - The side-nav's body (where the default slot content is rendered)\n * @csspart drawer__base - The drawer's base wrapper\n *\n * @cssproperty --side-nav-open-width - The width of the side-nav if in open state\n *\n * @animation sideNav.showNonRail - The animation to use when showing the side-nav in non-rail mode.\n * @animation sideNav.showRail - The animation to use when showing the side-nav in rail mode.\n * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav in non-rail mode.\n * @animation sideNav.hideRail - The animation to use when hiding the side-nav in rail mode.\n * @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.\n * @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.\n */\nexport default class SynSideNav extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles];\n\n static dependencies = {\n 'syn-divider': SynDivider,\n 'syn-drawer': SynDrawer,\n };\n\n private readonly hasSlotController = new HasSlotController(this, '[default]', 'footer');\n\n private readonly localize = new LocalizeController(this);\n\n private timeout: NodeJS.Timeout;\n\n /**\n * Current animation active state\n */\n @state() private isAnimationActive = false;\n\n /**\n * Reference to the drawer\n */\n @query('.side-nav__drawer') private drawer: SynDrawer;\n\n /**\n * Indicates whether or not the side-nav is open.\n * You can toggle this attribute to show and hide the side-nav, or you can use the `show()` and\n * `hide()` methods and this attribute will reflect the side-nav's open state.\n *\n * Depending if the rail attribute is set or not, the behavior will differ.\n *\n * __Non rail__:\n * With `open` will show the side-nav.\n * Without `open`, the side-nav will be hidden.\n *\n * __Rail__:\n * With `open` will show the whole side-nav with an overlay for touch devices\n * or without an overlay for non-touch devices.\n * Without `open`, the side-nav will only show the prefix of nav-item's.\n *\n */\n @property({ reflect: true, type: Boolean }) open = false;\n\n /**\n * Use the rail attribute to only show the prefix of navigation items in closed state.\n * This will open on hover on the rail navigation.\n * On touch devices the navigation opens on click and shows an overlay.\n *\n * Note: The Rail is only an option if all Navigation Items on the first level have an Icon.\n * If this is not the case you should use a burger navigation.\n */\n @property({ reflect: true, type: Boolean }) rail = false;\n\n /**\n * By default, the side-nav traps the focus if in non-rail mode and open.\n * To disable the focus trapping, set this attribute.\n */\n @property({ attribute: 'no-focus-trapping', reflect: true, type: Boolean }) noFocusTrapping = false;\n\n private setDelayedCallback(callback: () => void) {\n clearTimeout(this.timeout);\n this.timeout = setTimeout(callback, 100);\n }\n\n private handleMouseEnter() {\n // Debounce mouse events, to avoid infinite loop of open / closing in rail mode\n this.setDelayedCallback(() => {\n this.open = true;\n });\n }\n\n private handleMouseLeave() {\n // Debounce mouse events, to avoid infinite loop of open / closing in rail mode\n this.setDelayedCallback(() => {\n this.open = false;\n });\n }\n\n private handleRequestClose() {\n if (this.open) {\n this.open = false;\n }\n }\n\n private addMouseListener() {\n this.drawer.shadowRoot!.querySelector('.drawer__panel')?.addEventListener('mouseenter', this.handleMouseEnter);\n this.drawer.shadowRoot!.querySelector('.drawer__panel')?.addEventListener('mouseleave', this.handleMouseLeave);\n }\n\n private removeMouseListener() {\n this.drawer.shadowRoot!.querySelector('.drawer__panel')?.removeEventListener('mouseenter', this.handleMouseEnter);\n this.drawer.shadowRoot!.querySelector('.drawer__panel')?.removeEventListener('mouseleave', this.handleMouseLeave);\n }\n\n private setDrawerVisibility(isVisible: boolean) {\n (this.drawer.shadowRoot!.querySelector('.drawer') as HTMLElement).hidden = !isVisible;\n this.drawer.shadowRoot!.querySelector('.drawer__panel')?.setAttribute('aria-hidden', isVisible ? 'false' : 'true');\n }\n\n private forceDrawerVisibilityForRailMode() {\n return waitForEvent(this.drawer, 'syn-after-hide').then(() => {\n this.setDrawerVisibility(true);\n this.isAnimationActive = false;\n });\n }\n\n private setDrawerAnimations() {\n const showAnimation = getAnimation(this, `sideNav.show${this.rail ? 'Rail' : 'NonRail'}`, { dir: this.localize.dir() });\n const hideAnimation = getAnimation(this, `sideNav.hide${this.rail ? 'Rail' : 'NonRail'}`, { dir: this.localize.dir() });\n const hideOverlay = getAnimation(this, 'sideNav.overlay.hide', { dir: this.localize.dir() });\n const showOverlay = getAnimation(this, 'sideNav.overlay.show', { dir: this.localize.dir() });\n\n setAnimation(this.drawer, 'drawer.showStart', showAnimation);\n setAnimation(this.drawer, 'drawer.hideStart', hideAnimation);\n setAnimation(this.drawer, 'drawer.overlay.hide', hideOverlay);\n setAnimation(this.drawer, 'drawer.overlay.show', showOverlay);\n }\n\n @watch('rail', { waitUntilFirstUpdate: true })\n handleModeChange() {\n this.setDrawerAnimations();\n\n if (this.rail) {\n this.addMouseListener();\n // Force drawer visibility for rail mode\n this.setDrawerVisibility(true);\n } else {\n this.removeMouseListener();\n // Remove forcing of drawer visibility for rail mode if not open\n if (!this.open) {\n this.setDrawerVisibility(false);\n }\n }\n }\n\n @watch('open', { waitUntilFirstUpdate: true })\n handleOpenChange() {\n if (!this.open) {\n blurActiveElement(this);\n }\n\n if (!this.rail) {\n return;\n }\n\n this.isAnimationActive = true;\n\n if (!this.open) {\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n this.forceDrawerVisibilityForRailMode();\n } else {\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n waitForEvent(this.drawer, 'syn-after-show').then(() => {\n this.isAnimationActive = false;\n });\n }\n }\n\n @watch('noFocusTrapping', { waitUntilFirstUpdate: true })\n handleFocusTrapping() {\n if (!this.rail) {\n if (this.noFocusTrapping) {\n this.drawer.modal.activateExternal();\n } else {\n this.drawer.modal.deactivateExternal();\n }\n }\n }\n\n /** Shows the side-nav. */\n async show() {\n if (this.open) {\n return undefined;\n }\n this.open = true;\n\n return waitForEvent(this.drawer, 'syn-after-show');\n }\n\n /** Hides the side-nav */\n async hide() {\n if (!this.open) {\n return undefined;\n }\n\n this.open = false;\n\n return waitForEvent(this.drawer, 'syn-after-hide');\n }\n\n constructor() {\n super();\n this.handleMouseEnter = this.handleMouseEnter.bind(this);\n this.handleMouseLeave = this.handleMouseLeave.bind(this);\n this.addEventListener('syn-initial-focus', (event) => {\n if (this.rail) {\n // We need to do this, to stop the drawer from giving focus to the panel\n event.preventDefault();\n\n // The originalTrigger needs to be removed, otherwise when closing the drawer,\n // the first focused nav-item is focused again...\n // eslint-disable-next-line @typescript-eslint/dot-notation\n this.drawer['originalTrigger'] = null;\n }\n });\n\n this.addEventListener('focusin', (event) => {\n const targetTag = (event.target as HTMLElement).tagName.toLowerCase();\n // Open the side-nav if it`s in rail mode, closed and the focused element is a nav-item\n if (targetTag === 'syn-nav-item' && this.rail && !this.open) {\n this.open = true;\n }\n });\n\n this.addEventListener('focusout', (event) => {\n const targetTag = (event.target as HTMLElement).tagName.toLowerCase();\n const relatedTargetTag = (event.relatedTarget as HTMLElement)?.tagName.toLowerCase();\n\n // Close the side-nav, if it`s in rail mode, open and the next focused element\n // is no longer a nav-item\n if (targetTag === 'syn-nav-item' && relatedTargetTag !== 'syn-nav-item' && this.rail && this.open) {\n this.open = false;\n }\n });\n }\n\n /**\n * Initial setup for first render like special rail mode handling and drawer animations.\n * */\n firstUpdated() {\n this.setDrawerAnimations();\n\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n this.drawer.updateComplete.then(() => {\n // change tabindex of drawer to make only nav-items focusable and not the panel of the drawer\n (this.drawer.shadowRoot!.querySelector('.drawer__panel') as HTMLElement).tabIndex = -1;\n });\n\n if (this.rail) {\n // Wait for the drawer`s update to be completed\n\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n this.drawer.updateComplete.then(() => {\n this.addMouseListener();\n // set initial visibility of drawer for rail mode\n this.setDrawerVisibility(true);\n });\n } else if (this.noFocusTrapping) {\n // Disable the focus trapping of the modal\n this.drawer.modal.activateExternal();\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n // Remove modal listeners\n if (this.drawer) {\n unlockBodyScrolling(this.drawer);\n this.drawer.modal.deactivate();\n }\n }\n\n render() {\n const isTouch = window.navigator.maxTouchPoints > 0 || !!('ontouchstart' in window);\n const hasFooter = this.hasSlotController.test('footer');\n\n /* eslint-disable lit/no-invalid-html */\n /* eslint-disable @typescript-eslint/unbound-method */\n return html`\n <nav\n class=${classMap({\n 'side-nav': true,\n 'side-nav--animation': this.isAnimationActive,\n 'side-nav--fix': !this.rail,\n 'side-nav--has-footer': hasFooter,\n 'side-nav--open': this.open,\n 'side-nav--rail': this.rail,\n 'side-nav--touch': isTouch,\n })}\n part=\"base\"\n >\n \n <syn-drawer\n class=\"side-nav__drawer\"\n ?contained=${this.rail}\n exportparts=\"overlay,panel,body,base:drawer__base\"\n label=${this.localize.term('sideNav')}\n no-header\n ?open=${this.open}\n part=\"drawer\"\n placement=\"start\"\n @syn-request-close=${this.handleRequestClose} \n >\n <div part=\"content-container\" class=\"side-nav__content-container\">\n <slot part=\"content\"></slot>\n </div>\n \n <footer class=\"side-nav__footer\" part=\"footer-container\" slot=\"footer\"> \n\n ${hasFooter ? html`<syn-divider part=\"footer-divider\" class=\"side-nav__footer-divider\"></syn-divider>` : ''}\n <slot name=\"footer\" part=\"footer\" ></slot> \n \n </footer>\n\n </syn-drawer>\n\n </nav>\n `;\n /* eslint-enable lit/no-invalid-html */\n /* eslint-enable @typescript-eslint/unbound-method */\n }\n}\n\n// Show animations\nsetDefaultAnimation('sideNav.showRail', {\n keyframes: [\n { width: 'var(--side-nav-rail-width)' },\n { width: 'var(--side-nav-open-width)' },\n ],\n options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('sideNav.showNonRail', {\n keyframes: [\n { opacity: 0, translate: '-100%' },\n { opacity: 1, translate: '0' },\n ],\n options: { duration: 250, easing: 'ease' },\n});\n\n// Hide animations\nsetDefaultAnimation('sideNav.hideNonRail', {\n keyframes: [\n { opacity: 1, translate: '0' },\n { opacity: 0, translate: '-100%' },\n ],\n options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('sideNav.hideRail', {\n keyframes: [\n { width: 'var(--side-nav-open-width)' },\n { width: 'var(--side-nav-rail-width)' },\n ],\n options: { duration: 250, easing: 'ease' },\n});\n\n// Overlay animations\nsetDefaultAnimation('sideNav.overlay.show', {\n keyframes: [{ opacity: 0 }, { opacity: 1 }],\n options: { duration: 250 },\n});\n\nsetDefaultAnimation('sideNav.overlay.hide', {\n keyframes: [{ opacity: 1 }, { opacity: 0 }],\n options: { duration: 250 },\n});\n"],
5
- "mappings": "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",
6
- "names": []
7
- }
@@ -1,97 +0,0 @@
1
- // src/components/side-nav/side-nav.styles.ts
2
- import { css } from "lit";
3
- var side_nav_styles_default = css`
4
- :host {
5
- --side-nav-open-width: 320px;
6
- --side-nav-rail-width: 72px;
7
-
8
- display: block;
9
- }
10
-
11
- /* Side nav should have a width, so it behave correct in an e.g. display flex context */
12
- .side-nav:not(.side-nav--rail).side-nav--open {
13
- width: var(--side-nav-open-width);
14
- }
15
-
16
- /**
17
- * Side nav should have a width, so it behave correct in an e.g. display flex context.
18
- * In rail mode the width is always the small rail width, because there should be no shrinking possible of the main content area.
19
- */
20
- .side-nav.side-nav--rail {
21
- width: var(--side-nav-rail-width);
22
- }
23
-
24
-
25
-
26
- /**
27
- * Syn-drawer styling
28
- */
29
- .side-nav__drawer {
30
- --size: var(--side-nav-open-width);
31
- }
32
-
33
- .side-nav__drawer::part(base){
34
- position: absolute;
35
- z-index: var(--syn-z-index-drawer);
36
- }
37
-
38
- .side-nav__drawer::part(body), .side-nav__drawer::part(footer) {
39
- padding: 0;
40
- }
41
-
42
- /**
43
- * Overlay
44
- */
45
- .side-nav__drawer::part(overlay){
46
- position: absolute;
47
- }
48
-
49
- /**
50
- * Fixed mode
51
- */
52
- .side-nav--fix .side-nav__drawer::part(overlay){
53
- display: block;
54
- }
55
-
56
- /**
57
- * Rail mode
58
- */
59
- :not(.side-nav--open).side-nav--rail .side-nav__drawer {
60
- --size: var(--side-nav-rail-width);
61
- }
62
-
63
- .side-nav--open.side-nav--rail.side-nav--touch .side-nav__drawer::part(overlay){
64
- display: block;
65
- }
66
-
67
- /**
68
- * Avoid multiline flickering on open and close animation
69
- */
70
- .side-nav--rail.side-nav--animation {
71
- white-space: nowrap;
72
- }
73
-
74
- /**
75
- * Hide the scrollbars in closed rail mode
76
- */
77
- :not(.side-nav--open).side-nav--rail .side-nav__drawer::part(body){
78
- overflow: hidden;
79
- }
80
-
81
- /**
82
- * Footer divider
83
- */
84
- .side-nav__footer-divider{
85
- --spacing: 0;
86
- --color: var(--syn-color-neutral-300);
87
- }
88
-
89
- :not(.side-nav--open).side-nav--rail ::slotted(syn-nav-item){
90
- --display-children: none;
91
- }
92
- `;
93
-
94
- export {
95
- side_nav_styles_default
96
- };
97
- //# sourceMappingURL=chunk.H3HTSQKK.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/components/side-nav/side-nav.styles.ts"],
4
- "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n :host {\n --side-nav-open-width: 320px;\n --side-nav-rail-width: 72px;\n\n display: block;\n }\n\n /* Side nav should have a width, so it behave correct in an e.g. display flex context */\n .side-nav:not(.side-nav--rail).side-nav--open {\n width: var(--side-nav-open-width);\n }\n \n /**\n * Side nav should have a width, so it behave correct in an e.g. display flex context.\n * In rail mode the width is always the small rail width, because there should be no shrinking possible of the main content area.\n */\n .side-nav.side-nav--rail {\n width: var(--side-nav-rail-width);\n }\n\n\n\n /**\n * Syn-drawer styling\n */\n .side-nav__drawer {\n --size: var(--side-nav-open-width);\n }\n \n .side-nav__drawer::part(base){\n position: absolute;\n z-index: var(--syn-z-index-drawer);\n }\n\n .side-nav__drawer::part(body), .side-nav__drawer::part(footer) {\n padding: 0;\n }\n\n /** \n * Overlay \n */\n .side-nav__drawer::part(overlay){\n position: absolute;\n }\n\n /**\n * Fixed mode\n */\n .side-nav--fix .side-nav__drawer::part(overlay){\n display: block;\n }\n\n /**\n * Rail mode\n */\n :not(.side-nav--open).side-nav--rail .side-nav__drawer {\n --size: var(--side-nav-rail-width);\n }\n\n .side-nav--open.side-nav--rail.side-nav--touch .side-nav__drawer::part(overlay){\n display: block;\n }\n\n /**\n * Avoid multiline flickering on open and close animation\n */\n .side-nav--rail.side-nav--animation {\n white-space: nowrap;\n }\n\n /**\n * Hide the scrollbars in closed rail mode\n */ \n :not(.side-nav--open).side-nav--rail .side-nav__drawer::part(body){\n overflow: hidden;\n }\n\n /**\n * Footer divider\n */\n .side-nav__footer-divider{\n --spacing: 0;\n --color: var(--syn-color-neutral-300);\n }\n\n :not(.side-nav--open).side-nav--rail ::slotted(syn-nav-item){\n --display-children: none;\n }\n`;\n"],
5
- "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,0BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/utilities/defaultSettings/base.ts"],
4
- "sourcesContent": ["/* eslint-disable @typescript-eslint/quotes */\n// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED file for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\n\n// Type imports\nimport type SynAccordion from \"../../components/accordion/accordion.js\";\nimport type SynAlert from \"../../components/alert/alert.js\";\nimport type SynBadge from \"../../components/badge/badge.js\";\nimport type SynButton from \"../../components/button/button.js\";\nimport type SynCheckbox from \"../../components/checkbox/checkbox.js\";\nimport type SynCombobox from \"../../components/combobox/combobox.js\";\nimport type SynDetails from \"../../components/details/details.js\";\nimport type SynFile from \"../../components/file/file.js\";\nimport type SynIconButton from \"../../components/icon-button/icon-button.js\";\nimport type SynInput from \"../../components/input/input.js\";\nimport type SynRadioButton from \"../../components/radio-button/radio-button.js\";\nimport type SynRadioGroup from \"../../components/radio-group/radio-group.js\";\nimport type SynRadio from \"../../components/radio/radio.js\";\nimport type SynRange from \"../../components/range/range.js\";\nimport type SynSelect from \"../../components/select/select.js\";\nimport type SynSwitch from \"../../components/switch/switch.js\";\nimport type SynTag from \"../../components/tag/tag.js\";\nimport type SynTextarea from \"../../components/textarea/textarea.js\";\nimport type SynValidate from \"../../components/validate/validate.js\";\nimport type SynergyElement from \"../../internal/synergy-element.js\";\nimport type { SynDefaultChangedAttribute } from \"../../events/events.js\";\n\n// Core types\n\n/**\n * Custom helper type that adds decorated properties from\n * the globalSettings helper.\n */\nexport type GlobalSettingsEnabledElement = SynergyElement & {\n __originalDecoratedClassName: string;\n overrideGlobalSettings: (\n changedProperties: SynDefaultChangedAttribute[],\n ) => void;\n};\n\n/**\n * Allows for partial recursive types\n */\nexport type RecursivePartial<T> = {\n [P in keyof T]?: T[P] extends object ? RecursivePartial<T[P]> : T[P];\n};\n\n/**\n * Allowed value for a default setting\n * Gets the value of a given attribute for a given component\n */\nexport type AllowedValueForDefaultSetting<\n Elm extends SynergyElement,\n Attr extends keyof Elm,\n> = Elm[Attr];\n\n/**\n * List of all components that have default values\n */\nexport type ComponentNamesWithDefaultValues =\n | \"SynAccordion\"\n | \"SynAlert\"\n | \"SynBadge\"\n | \"SynButton\"\n | \"SynCheckbox\"\n | \"SynCombobox\"\n | \"SynDetails\"\n | \"SynFile\"\n | \"SynIconButton\"\n | \"SynInput\"\n | \"SynRadio\"\n | \"SynRadioButton\"\n | \"SynRadioGroup\"\n | \"SynRange\"\n | \"SynSelect\"\n | \"SynSwitch\"\n | \"SynTag\"\n | \"SynTextarea\"\n | \"SynValidate\";\n\n/**\n * Extracts all available default settings for a given component\n */\nexport type ExtractSettingsForElement<C extends SynergyElement> = {\n [key in keyof SynDefaultSettings]?: key extends keyof C\n ? AllowedValueForDefaultSetting<C, key>\n : never;\n};\n\n/**\n * Default settings map for all component values that have defaults set\n */\nexport type SynDefaultSettings = {\n delimiter: {\n SynSelect?: AllowedValueForDefaultSetting<SynSelect, \"delimiter\">;\n };\n size: {\n SynAccordion?: AllowedValueForDefaultSetting<SynAccordion, \"size\">;\n SynButton?: AllowedValueForDefaultSetting<SynButton, \"size\">;\n SynCheckbox?: AllowedValueForDefaultSetting<SynCheckbox, \"size\">;\n SynCombobox?: AllowedValueForDefaultSetting<SynCombobox, \"size\">;\n SynDetails?: AllowedValueForDefaultSetting<SynDetails, \"size\">;\n SynFile?: AllowedValueForDefaultSetting<SynFile, \"size\">;\n SynIconButton?: AllowedValueForDefaultSetting<SynIconButton, \"size\">;\n SynInput?: AllowedValueForDefaultSetting<SynInput, \"size\">;\n SynRadio?: AllowedValueForDefaultSetting<SynRadio, \"size\">;\n SynRadioButton?: AllowedValueForDefaultSetting<SynRadioButton, \"size\">;\n SynRadioGroup?: AllowedValueForDefaultSetting<SynRadioGroup, \"size\">;\n SynRange?: AllowedValueForDefaultSetting<SynRange, \"size\">;\n SynSelect?: AllowedValueForDefaultSetting<SynSelect, \"size\">;\n SynSwitch?: AllowedValueForDefaultSetting<SynSwitch, \"size\">;\n SynTag?: AllowedValueForDefaultSetting<SynTag, \"size\">;\n SynTextarea?: AllowedValueForDefaultSetting<SynTextarea, \"size\">;\n };\n variant: {\n SynAlert?: AllowedValueForDefaultSetting<SynAlert, \"variant\">;\n SynBadge?: AllowedValueForDefaultSetting<SynBadge, \"variant\">;\n SynButton?: AllowedValueForDefaultSetting<SynButton, \"variant\">;\n SynValidate?: AllowedValueForDefaultSetting<SynValidate, \"variant\">;\n };\n};\n\n// Exports\n\n/**\n * Default settings for all components\n */\nexport const defaultSettings: SynDefaultSettings = {\n delimiter: {\n SynSelect: \" \",\n },\n size: {\n SynAccordion: \"medium\",\n SynButton: \"medium\",\n SynCheckbox: \"medium\",\n SynCombobox: \"medium\",\n SynDetails: \"medium\",\n SynFile: \"medium\",\n SynIconButton: \"inherit\",\n SynInput: \"medium\",\n SynRadio: \"medium\",\n SynRadioButton: \"medium\",\n SynRadioGroup: \"medium\",\n SynRange: \"medium\",\n SynSelect: \"medium\",\n SynSwitch: \"medium\",\n SynTag: \"medium\",\n SynTextarea: \"medium\",\n },\n variant: {\n SynAlert: \"primary\",\n SynBadge: \"primary\",\n SynButton: \"outline\",\n SynValidate: \"native\",\n },\n};\n\n/**\n * Initial default settings for all components\n */\nexport const INITIAL_DEFAULT_SETTINGS: SynDefaultSettings = {\n delimiter: {\n SynSelect: \" \",\n },\n size: {\n SynAccordion: \"medium\",\n SynButton: \"medium\",\n SynCheckbox: \"medium\",\n SynCombobox: \"medium\",\n SynDetails: \"medium\",\n SynFile: \"medium\",\n SynIconButton: \"inherit\",\n SynInput: \"medium\",\n SynRadio: \"medium\",\n SynRadioButton: \"medium\",\n SynRadioGroup: \"medium\",\n SynRange: \"medium\",\n SynSelect: \"medium\",\n SynSwitch: \"medium\",\n SynTag: \"medium\",\n SynTextarea: \"medium\",\n },\n variant: {\n SynAlert: \"primary\",\n SynBadge: \"primary\",\n SynButton: \"outline\",\n SynValidate: \"native\",\n },\n};\n"],
5
- "mappings": ";AAkIO,IAAM,kBAAsC;AAAA,EACjD,WAAW;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,MAAM;AAAA,IACJ,cAAc;AAAA,IACd,WAAW;AAAA,IACX,aAAa;AAAA,IACb,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,IACX,aAAa;AAAA,EACf;AACF;AAKO,IAAM,2BAA+C;AAAA,EAC1D,WAAW;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,MAAM;AAAA,IACJ,cAAc;AAAA,IACd,WAAW;AAAA,IACX,aAAa;AAAA,IACb,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,IACX,aAAa;AAAA,EACf;AACF;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/components/drawer/drawer.component.ts", "../../src/internal/string.ts"],
4
- "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { animateTo, stopAnimations } from '../../internal/animate.js';\nimport { blurActiveElement } from '../../internal/closeActiveElement.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll.js';\nimport { property, query } from 'lit/decorators.js';\nimport { uppercaseFirstLetter } from '../../internal/string.js';\nimport { waitForEvent } from '../../internal/event.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport Modal from '../../internal/modal.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIconButton from '../icon-button/icon-button.component.js';\nimport styles from './drawer.styles.js';\nimport customStyles from './drawer.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Drawers slide in from a container to expose additional options and information.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-drawer--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The drawer's main content.\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.\n * @slot header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @event syn-show - Emitted when the drawer opens.\n * @event syn-after-show - Emitted after the drawer opens and all animations are complete.\n * @event syn-hide - Emitted when the drawer closes.\n * @event syn-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event syn-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling\n * `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} syn-request-close - Emitted when the user attempts to\n * close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n * `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n * destructive behavior such as data loss.\n *\n * @csspart base - The component's base wrapper.\n * @csspart overlay - The overlay that covers the screen behind the drawer.\n * @csspart panel - The drawer's panel (where the drawer and its content are rendered).\n * @csspart header - The drawer's header. This element wraps the title and header actions.\n * @csspart header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.\n * @csspart title - The drawer's title.\n * @csspart close-button - The close button, an `<syn-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n * @csspart body - The drawer's body.\n * @csspart footer - The drawer's footer.\n *\n * @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height\n * depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.\n * @cssproperty --header-spacing - The amount of padding to use for the header.\n * @cssproperty --body-spacing - The amount of padding to use for the body.\n * @cssproperty --footer-spacing - The amount of padding to use for the footer.\n *\n * @animation drawer.showTop - The animation to use when showing a drawer with `top` placement.\n * @animation drawer.showEnd - The animation to use when showing a drawer with `end` placement.\n * @animation drawer.showBottom - The animation to use when showing a drawer with `bottom` placement.\n * @animation drawer.showStart - The animation to use when showing a drawer with `start` placement.\n * @animation drawer.hideTop - The animation to use when hiding a drawer with `top` placement.\n * @animation drawer.hideEnd - The animation to use when hiding a drawer with `end` placement.\n * @animation drawer.hideBottom - The animation to use when hiding a drawer with `bottom` placement.\n * @animation drawer.hideStart - The animation to use when hiding a drawer with `start` placement.\n * @animation drawer.denyClose - The animation to use when a request to close the drawer is denied.\n * @animation drawer.overlay.show - The animation to use when showing the drawer's overlay.\n * @animation drawer.overlay.hide - The animation to use when hiding the drawer's overlay.\n *\n * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus\n * trapping and allow third-party modals spawned from an active Synergy modal, call `modal.activateExternal()` when\n * the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Synergy's focus trapping.\n */\nexport default class SynDrawer extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n static dependencies = { 'syn-icon-button': SynIconButton };\n\n private readonly hasSlotController = new HasSlotController(this, 'footer');\n private readonly localize = new LocalizeController(this);\n private originalTrigger: HTMLElement | null;\n public modal = new Modal(this);\n private closeWatcher: CloseWatcher | null;\n\n @query('.drawer') drawer: HTMLElement;\n @query('.drawer__panel') panel: HTMLElement;\n @query('.drawer__overlay') overlay: HTMLElement;\n\n /**\n * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /**\n * The drawer's label as displayed in the header. You should always include a relevant label even when using\n * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n */\n @property({ reflect: true }) label = '';\n\n /** The direction from which the drawer will open. */\n @property({ reflect: true }) placement: 'top' | 'end' | 'bottom' | 'start' = 'end';\n\n /**\n * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n * its parent element, set this attribute and add `position: relative` to the parent.\n */\n @property({ type: Boolean, reflect: true }) contained = false;\n\n /**\n * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n * accessible way for users to dismiss the drawer.\n */\n @property({ attribute: 'no-header', type: Boolean, reflect: true }) noHeader = false;\n\n firstUpdated() {\n this.drawer.hidden = !this.open;\n\n if (this.open) {\n this.addOpenListeners();\n\n if (!this.contained) {\n this.modal.activate();\n lockBodyScrolling(this);\n }\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n unlockBodyScrolling(this);\n this.removeOpenListeners();\n }\n\n private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n const slRequestClose = this.emit('syn-request-close', {\n cancelable: true,\n detail: { source }\n });\n\n if (slRequestClose.defaultPrevented) {\n const animation = getAnimation(this, 'drawer.denyClose', { dir: this.localize.dir() });\n animateTo(this.panel, animation.keyframes, animation.options);\n return;\n }\n\n this.hide();\n }\n\n private addOpenListeners() {\n if ('CloseWatcher' in window) {\n this.closeWatcher?.destroy();\n if (!this.contained) {\n this.closeWatcher = new CloseWatcher();\n this.closeWatcher.onclose = () => this.requestClose('keyboard');\n }\n } else {\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n }\n }\n\n private removeOpenListeners() {\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n this.closeWatcher?.destroy();\n }\n\n private handleDocumentKeyDown = (event: KeyboardEvent) => {\n // Contained drawers aren't modal and don't response to the escape key\n if (this.contained) {\n return;\n }\n\n if (event.key === 'Escape' && this.modal.isActive() && this.open) {\n event.stopImmediatePropagation();\n this.requestClose('keyboard');\n }\n };\n\n @watch('open', { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open) {\n // Show\n this.emit('syn-show');\n this.addOpenListeners();\n this.originalTrigger = document.activeElement as HTMLElement;\n\n // Lock body scrolling only if the drawer isn't contained\n if (!this.contained) {\n this.modal.activate();\n lockBodyScrolling(this);\n }\n\n // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n // ourselves, and add the attribute back afterwards.\n //\n // Related: https://github.com/shoelace-style/shoelace/issues/693\n //\n const autoFocusTarget = this.querySelector('[autofocus]');\n if (autoFocusTarget) {\n autoFocusTarget.removeAttribute('autofocus');\n }\n\n await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n this.drawer.hidden = false;\n\n // Set initial focus\n requestAnimationFrame(() => {\n const slInitialFocus = this.emit('syn-initial-focus', { cancelable: true });\n\n if (!slInitialFocus.defaultPrevented) {\n // Set focus to the autofocus target and restore the attribute\n if (autoFocusTarget) {\n (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });\n } else {\n this.panel.focus({ preventScroll: true });\n }\n }\n\n // Restore the autofocus attribute\n if (autoFocusTarget) {\n autoFocusTarget.setAttribute('autofocus', '');\n }\n });\n\n const panelAnimation = getAnimation(this, `drawer.show${uppercaseFirstLetter(this.placement)}`, {\n dir: this.localize.dir()\n });\n const overlayAnimation = getAnimation(this, 'drawer.overlay.show', { dir: this.localize.dir() });\n await Promise.all([\n animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n ]);\n\n this.emit('syn-after-show');\n } else {\n // Hide\n blurActiveElement(this);\n this.emit('syn-hide');\n this.removeOpenListeners();\n\n if (!this.contained) {\n this.modal.deactivate();\n unlockBodyScrolling(this);\n }\n\n await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n const panelAnimation = getAnimation(this, `drawer.hide${uppercaseFirstLetter(this.placement)}`, {\n dir: this.localize.dir()\n });\n const overlayAnimation = getAnimation(this, 'drawer.overlay.hide', { dir: this.localize.dir() });\n\n // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n // unexpectedly. We'll unhide them after all animations have completed.\n await Promise.all([\n animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n this.overlay.hidden = true;\n }),\n animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n this.panel.hidden = true;\n })\n ]);\n\n this.drawer.hidden = true;\n\n // Now that the dialog is hidden, restore the overlay and panel for next time\n this.overlay.hidden = false;\n this.panel.hidden = false;\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (typeof trigger?.focus === 'function') {\n setTimeout(() => trigger.focus());\n }\n\n this.emit('syn-after-hide');\n }\n }\n\n @watch('contained', { waitUntilFirstUpdate: true })\n handleNoModalChange() {\n if (this.open && !this.contained) {\n this.modal.activate();\n lockBodyScrolling(this);\n }\n\n if (this.open && this.contained) {\n this.modal.deactivate();\n unlockBodyScrolling(this);\n }\n }\n\n /** Shows the drawer. */\n async show() {\n if (this.open) {\n return undefined;\n }\n\n this.open = true;\n return waitForEvent(this, 'syn-after-show');\n }\n\n /** Hides the drawer */\n async hide() {\n if (!this.open) {\n return undefined;\n }\n\n this.open = false;\n return waitForEvent(this, 'syn-after-hide');\n }\n\n render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n drawer: true,\n 'drawer--open': this.open,\n 'drawer--top': this.placement === 'top',\n 'drawer--end': this.placement === 'end',\n 'drawer--bottom': this.placement === 'bottom',\n 'drawer--start': this.placement === 'start',\n 'drawer--contained': this.contained,\n 'drawer--fixed': !this.contained,\n 'drawer--rtl': this.localize.dir() === 'rtl',\n 'drawer--has-footer': this.hasSlotController.test('footer')\n })}\n >\n <div part=\"overlay\" class=\"drawer__overlay\" @click=${() => this.requestClose('overlay')} tabindex=\"-1\"></div>\n\n <div\n part=\"panel\"\n class=\"drawer__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden=${this.open ? 'false' : 'true'}\n aria-label=${ifDefined(this.noHeader ? this.label : undefined)}\n aria-labelledby=${ifDefined(!this.noHeader ? 'title' : undefined)}\n tabindex=\"0\"\n >\n ${!this.noHeader\n ? html`\n <header part=\"header\" class=\"drawer__header\">\n <h2 part=\"title\" class=\"drawer__title\" id=\"title\">\n <!-- If there's no label, use an invisible character to prevent the header from collapsing -->\n <slot name=\"label\"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>\n </h2>\n <div part=\"header-actions\" class=\"drawer__header-actions\">\n <slot name=\"header-actions\"></slot>\n <syn-icon-button\n part=\"close-button\"\n exportparts=\"base:close-button__base\"\n class=\"drawer__close\"\n name=\"x-lg\"\n label=${this.localize.term('close')}\n library=\"system\"\n @click=${() => this.requestClose('close-button')}\n ></syn-icon-button>\n </div>\n </header>\n `\n : ''}\n\n <slot part=\"body\" class=\"drawer__body\"></slot>\n\n <footer part=\"footer\" class=\"drawer__footer\">\n <slot name=\"footer\"></slot>\n </footer>\n </div>\n </div>\n `;\n }\n}\n\n// Top\nsetDefaultAnimation('drawer.showTop', {\n keyframes: [\n { opacity: 0, translate: '0 -100%' },\n { opacity: 1, translate: '0 0' }\n ],\n options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.hideTop', {\n keyframes: [\n { opacity: 1, translate: '0 0' },\n { opacity: 0, translate: '0 -100%' }\n ],\n options: { duration: 250, easing: 'ease' }\n});\n\n// End\nsetDefaultAnimation('drawer.showEnd', {\n keyframes: [\n { opacity: 0, translate: '100%' },\n { opacity: 1, translate: '0' }\n ],\n rtlKeyframes: [\n { opacity: 0, translate: '-100%' },\n { opacity: 1, translate: '0' }\n ],\n options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.hideEnd', {\n keyframes: [\n { opacity: 1, translate: '0' },\n { opacity: 0, translate: '100%' }\n ],\n rtlKeyframes: [\n { opacity: 1, translate: '0' },\n { opacity: 0, translate: '-100%' }\n ],\n options: { duration: 250, easing: 'ease' }\n});\n\n// Bottom\nsetDefaultAnimation('drawer.showBottom', {\n keyframes: [\n { opacity: 0, translate: '0 100%' },\n { opacity: 1, translate: '0 0' }\n ],\n options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.hideBottom', {\n keyframes: [\n { opacity: 1, translate: '0 0' },\n { opacity: 0, translate: '0 100%' }\n ],\n options: { duration: 250, easing: 'ease' }\n});\n\n// Start\nsetDefaultAnimation('drawer.showStart', {\n keyframes: [\n { opacity: 0, translate: '-100%' },\n { opacity: 1, translate: '0' }\n ],\n rtlKeyframes: [\n { opacity: 0, translate: '100%' },\n { opacity: 1, translate: '0' }\n ],\n options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.hideStart', {\n keyframes: [\n { opacity: 1, translate: '0' },\n { opacity: 0, translate: '-100%' }\n ],\n rtlKeyframes: [\n { opacity: 1, translate: '0' },\n { opacity: 0, translate: '100%' }\n ],\n options: { duration: 250, easing: 'ease' }\n});\n\n// Deny close\nsetDefaultAnimation('drawer.denyClose', {\n keyframes: [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }],\n options: { duration: 250 }\n});\n\n// Overlay\nsetDefaultAnimation('drawer.overlay.show', {\n keyframes: [{ opacity: 0 }, { opacity: 1 }],\n options: { duration: 250 }\n});\n\nsetDefaultAnimation('drawer.overlay.hide', {\n keyframes: [{ opacity: 1 }, { opacity: 0 }],\n options: { duration: 250 }\n});\n", "/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\n/** Converts the first letter of a string to uppercase */\nexport function uppercaseFirstLetter(string: string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n}\n"],
5
- "mappings": "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",
6
- "names": []
7
- }