@infineon/infineon-design-system-stencil 30.0.0--canary.1626.ffb29ef0579b15bc19c3bb02e9b882c9b0e882e1.0 → 30.0.0--canary.1626.e3bcf6f890c4244274ebb8f58df2fcc338ce6629.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 (234) hide show
  1. package/dist/cjs/ifx-basic-table.cjs.entry.js +1 -1
  2. package/dist/cjs/ifx-chip_3.cjs.entry.js +7 -2
  3. package/dist/cjs/ifx-chip_3.cjs.entry.js.map +1 -1
  4. package/dist/cjs/ifx-date-picker.cjs.entry.js +4 -2
  5. package/dist/cjs/ifx-date-picker.cjs.entry.js.map +1 -1
  6. package/dist/cjs/ifx-faq.cjs.entry.js +1 -1
  7. package/dist/cjs/ifx-filter-accordion.cjs.entry.js +2 -2
  8. package/dist/cjs/ifx-filter-bar.cjs.entry.js +1 -1
  9. package/dist/cjs/ifx-filter-search.cjs.entry.js +1 -1
  10. package/dist/cjs/ifx-filter-type-group.cjs.entry.js +1 -1
  11. package/dist/cjs/ifx-list-entry.cjs.entry.js +1 -1
  12. package/dist/cjs/ifx-multiselect_2.cjs.entry.js +4 -4
  13. package/dist/cjs/ifx-navbar.cjs.entry.js +6 -4
  14. package/dist/cjs/ifx-navbar.cjs.entry.js.map +1 -1
  15. package/dist/cjs/ifx-overview-table.cjs.entry.js +1 -1
  16. package/dist/cjs/ifx-overview-table.cjs.entry.js.map +1 -1
  17. package/dist/cjs/ifx-progress-bar.cjs.entry.js +1 -1
  18. package/dist/cjs/ifx-radio-button.cjs.entry.js +2 -2
  19. package/dist/cjs/ifx-search-bar.cjs.entry.js +1 -1
  20. package/dist/cjs/ifx-search-field.cjs.entry.js +1 -1
  21. package/dist/cjs/ifx-segment.cjs.entry.js +1 -1
  22. package/dist/cjs/ifx-segmented-control.cjs.entry.js +2 -2
  23. package/dist/cjs/ifx-select.cjs.entry.js +58 -3
  24. package/dist/cjs/ifx-select.cjs.entry.js.map +1 -1
  25. package/dist/cjs/ifx-slider.cjs.entry.js +2 -2
  26. package/dist/cjs/ifx-spinner.cjs.entry.js +2 -2
  27. package/dist/cjs/ifx-status.cjs.entry.js +1 -1
  28. package/dist/cjs/ifx-step.cjs.entry.js +4 -4
  29. package/dist/cjs/ifx-stepper.cjs.entry.js +2 -2
  30. package/dist/cjs/ifx-switch.cjs.entry.js +1 -1
  31. package/dist/cjs/ifx-tab.cjs.entry.js +1 -1
  32. package/dist/cjs/ifx-table.cjs.entry.js +2 -2
  33. package/dist/cjs/ifx-tabs.cjs.entry.js +2 -2
  34. package/dist/cjs/ifx-tag.cjs.entry.js +1 -1
  35. package/dist/cjs/ifx-textarea.cjs.entry.js +2 -2
  36. package/dist/cjs/ifx-tooltip.cjs.entry.js +4 -4
  37. package/dist/cjs/infineon-design-system-stencil.cjs.js +1 -1
  38. package/dist/cjs/loader.cjs.js +1 -1
  39. package/dist/collection/components/date-picker/date-picker.css +7 -0
  40. package/dist/collection/components/date-picker/date-picker.js +3 -1
  41. package/dist/collection/components/date-picker/date-picker.js.map +1 -1
  42. package/dist/collection/components/navigation/navbar/navbar.js +6 -4
  43. package/dist/collection/components/navigation/navbar/navbar.js.map +1 -1
  44. package/dist/collection/components/overview-table/overview-table.js +1 -1
  45. package/dist/collection/components/overview-table/overview-table.js.map +1 -1
  46. package/dist/collection/components/pagination/pagination.js +7 -2
  47. package/dist/collection/components/pagination/pagination.js.map +1 -1
  48. package/dist/collection/components/progress-bar/progress-bar.js +1 -1
  49. package/dist/collection/components/radio-button/radio-button.js +2 -2
  50. package/dist/collection/components/search-bar/search-bar.js +1 -1
  51. package/dist/collection/components/search-field/search-field.js +1 -1
  52. package/dist/collection/components/segmented-control/segment/segment.js +1 -1
  53. package/dist/collection/components/segmented-control/segmented-control.js +2 -2
  54. package/dist/collection/components/select/single-select/select.css +3 -0
  55. package/dist/collection/components/select/single-select/select.js +76 -3
  56. package/dist/collection/components/select/single-select/select.js.map +1 -1
  57. package/dist/collection/components/slider/slider.js +2 -2
  58. package/dist/collection/components/spinner/spinner.js +2 -2
  59. package/dist/collection/components/status/status.js +1 -1
  60. package/dist/collection/components/stepper/step/step.js +4 -4
  61. package/dist/collection/components/stepper/stepper.js +2 -2
  62. package/dist/collection/components/switch/switch.js +1 -1
  63. package/dist/collection/components/table-advanced-version/filter-bar/filter-bar.js +1 -1
  64. package/dist/collection/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.js +2 -2
  65. package/dist/collection/components/table-advanced-version/filter-type-group/filter-search/filter-search.js +1 -1
  66. package/dist/collection/components/table-advanced-version/filter-type-group/filter-type-group.js +1 -1
  67. package/dist/collection/components/table-advanced-version/list/list-entry/list-entry.js +1 -1
  68. package/dist/collection/components/table-advanced-version/table.js +2 -2
  69. package/dist/collection/components/table-basic-version/table.js +1 -1
  70. package/dist/collection/components/tabs/tab.js +1 -1
  71. package/dist/collection/components/tabs/tabs.js +2 -2
  72. package/dist/collection/components/tag/tag.js +1 -1
  73. package/dist/collection/components/text-field/text-field.js +4 -4
  74. package/dist/collection/components/textarea/textarea.js +2 -2
  75. package/dist/collection/components/tooltip/tooltip.js +4 -4
  76. package/dist/collection/stories/setup-and-installation/faq/faq.js +1 -1
  77. package/dist/components/ifx-basic-table.js +1 -1
  78. package/dist/components/ifx-date-picker.js +4 -2
  79. package/dist/components/ifx-date-picker.js.map +1 -1
  80. package/dist/components/ifx-faq.js +1 -1
  81. package/dist/components/ifx-filter-accordion.js +2 -2
  82. package/dist/components/ifx-filter-bar.js +1 -1
  83. package/dist/components/ifx-filter-search.js +2 -2
  84. package/dist/components/ifx-filter-type-group.js +1 -1
  85. package/dist/components/ifx-list-entry.js +2 -2
  86. package/dist/components/ifx-navbar.js +6 -4
  87. package/dist/components/ifx-navbar.js.map +1 -1
  88. package/dist/components/ifx-overview-table.js +1 -1
  89. package/dist/components/ifx-overview-table.js.map +1 -1
  90. package/dist/components/ifx-pagination.js +1 -1
  91. package/dist/components/ifx-progress-bar.js +1 -1
  92. package/dist/components/ifx-radio-button.js +1 -1
  93. package/dist/components/ifx-search-bar.js +2 -2
  94. package/dist/components/ifx-search-field.js +1 -1
  95. package/dist/components/ifx-segment.js +1 -1
  96. package/dist/components/ifx-segmented-control.js +2 -2
  97. package/dist/components/ifx-select.js +1 -1
  98. package/dist/components/ifx-set-filter.js +2 -2
  99. package/dist/components/ifx-slider.js +2 -2
  100. package/dist/components/ifx-spinner.js +2 -2
  101. package/dist/components/ifx-status.js +1 -1
  102. package/dist/components/ifx-step.js +4 -4
  103. package/dist/components/ifx-stepper.js +2 -2
  104. package/dist/components/ifx-switch.js +1 -1
  105. package/dist/components/ifx-tab.js +1 -1
  106. package/dist/components/ifx-table.js +4 -4
  107. package/dist/components/ifx-tabs.js +2 -2
  108. package/dist/components/ifx-tag.js +1 -1
  109. package/dist/components/ifx-text-field.js +1 -1
  110. package/dist/components/ifx-textarea.js +2 -2
  111. package/dist/components/ifx-tooltip.js +4 -4
  112. package/dist/components/{p-07b492d8.js → p-81357e99.js} +9 -4
  113. package/dist/components/p-81357e99.js.map +1 -0
  114. package/dist/components/{p-4adbcde3.js → p-b9024e1a.js} +62 -5
  115. package/dist/components/p-b9024e1a.js.map +1 -0
  116. package/dist/components/{p-64f0fdf0.js → p-d0f74c7f.js} +3 -3
  117. package/dist/components/{p-64f0fdf0.js.map → p-d0f74c7f.js.map} +1 -1
  118. package/dist/components/{p-975b1a84.js → p-d5a199fb.js} +5 -5
  119. package/dist/components/{p-975b1a84.js.map → p-d5a199fb.js.map} +1 -1
  120. package/dist/components/{p-8ef3226f.js → p-f64f5f8d.js} +2 -2
  121. package/dist/components/{p-8ef3226f.js.map → p-f64f5f8d.js.map} +1 -1
  122. package/dist/esm/ifx-basic-table.entry.js +1 -1
  123. package/dist/esm/ifx-chip_3.entry.js +7 -2
  124. package/dist/esm/ifx-chip_3.entry.js.map +1 -1
  125. package/dist/esm/ifx-date-picker.entry.js +4 -2
  126. package/dist/esm/ifx-date-picker.entry.js.map +1 -1
  127. package/dist/esm/ifx-faq.entry.js +1 -1
  128. package/dist/esm/ifx-filter-accordion.entry.js +2 -2
  129. package/dist/esm/ifx-filter-bar.entry.js +1 -1
  130. package/dist/esm/ifx-filter-search.entry.js +1 -1
  131. package/dist/esm/ifx-filter-type-group.entry.js +1 -1
  132. package/dist/esm/ifx-list-entry.entry.js +1 -1
  133. package/dist/esm/ifx-multiselect_2.entry.js +4 -4
  134. package/dist/esm/ifx-navbar.entry.js +6 -4
  135. package/dist/esm/ifx-navbar.entry.js.map +1 -1
  136. package/dist/esm/ifx-overview-table.entry.js +1 -1
  137. package/dist/esm/ifx-overview-table.entry.js.map +1 -1
  138. package/dist/esm/ifx-progress-bar.entry.js +1 -1
  139. package/dist/esm/ifx-radio-button.entry.js +2 -2
  140. package/dist/esm/ifx-search-bar.entry.js +1 -1
  141. package/dist/esm/ifx-search-field.entry.js +1 -1
  142. package/dist/esm/ifx-segment.entry.js +1 -1
  143. package/dist/esm/ifx-segmented-control.entry.js +2 -2
  144. package/dist/esm/ifx-select.entry.js +58 -3
  145. package/dist/esm/ifx-select.entry.js.map +1 -1
  146. package/dist/esm/ifx-slider.entry.js +2 -2
  147. package/dist/esm/ifx-spinner.entry.js +2 -2
  148. package/dist/esm/ifx-status.entry.js +1 -1
  149. package/dist/esm/ifx-step.entry.js +4 -4
  150. package/dist/esm/ifx-stepper.entry.js +2 -2
  151. package/dist/esm/ifx-switch.entry.js +1 -1
  152. package/dist/esm/ifx-tab.entry.js +1 -1
  153. package/dist/esm/ifx-table.entry.js +2 -2
  154. package/dist/esm/ifx-tabs.entry.js +2 -2
  155. package/dist/esm/ifx-tag.entry.js +1 -1
  156. package/dist/esm/ifx-textarea.entry.js +2 -2
  157. package/dist/esm/ifx-tooltip.entry.js +4 -4
  158. package/dist/esm/infineon-design-system-stencil.js +1 -1
  159. package/dist/esm/loader.js +1 -1
  160. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
  161. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js.map +1 -1
  162. package/dist/infineon-design-system-stencil/{p-2afb8620.entry.js → p-02be14a9.entry.js} +2 -2
  163. package/dist/infineon-design-system-stencil/{p-c90f337e.entry.js → p-0ddf85fc.entry.js} +2 -2
  164. package/dist/infineon-design-system-stencil/p-16f9a47c.entry.js +2 -0
  165. package/dist/infineon-design-system-stencil/{p-2ea18356.entry.js → p-1f329979.entry.js} +2 -2
  166. package/dist/infineon-design-system-stencil/{p-5ab7bd95.entry.js → p-208b28b1.entry.js} +2 -2
  167. package/dist/infineon-design-system-stencil/{p-a9a1fc54.entry.js → p-25bf54c9.entry.js} +2 -2
  168. package/dist/infineon-design-system-stencil/{p-849b1812.entry.js → p-2e8c0115.entry.js} +2 -2
  169. package/dist/infineon-design-system-stencil/p-2fbad873.entry.js +2 -0
  170. package/dist/infineon-design-system-stencil/p-2fbad873.entry.js.map +1 -0
  171. package/dist/infineon-design-system-stencil/{p-1e07a44d.entry.js → p-30640970.entry.js} +2 -2
  172. package/dist/infineon-design-system-stencil/p-31e9d4f8.entry.js +2 -0
  173. package/dist/infineon-design-system-stencil/{p-18d07164.entry.js.map → p-31e9d4f8.entry.js.map} +1 -1
  174. package/dist/infineon-design-system-stencil/{p-e21ab79f.entry.js → p-336778c3.entry.js} +2 -2
  175. package/dist/infineon-design-system-stencil/{p-9f1ab459.entry.js → p-37ecac74.entry.js} +2 -2
  176. package/dist/infineon-design-system-stencil/{p-9ecb5401.entry.js → p-39697853.entry.js} +2 -2
  177. package/dist/infineon-design-system-stencil/{p-7d11833b.entry.js → p-49872432.entry.js} +2 -2
  178. package/dist/infineon-design-system-stencil/{p-4631ff84.entry.js → p-4af08129.entry.js} +2 -2
  179. package/dist/infineon-design-system-stencil/{p-4631ff84.entry.js.map → p-4af08129.entry.js.map} +1 -1
  180. package/dist/infineon-design-system-stencil/{p-45c14df8.entry.js → p-50e122c4.entry.js} +2 -2
  181. package/dist/infineon-design-system-stencil/{p-d2749c43.entry.js → p-5edfe317.entry.js} +2 -2
  182. package/dist/infineon-design-system-stencil/{p-ba22e912.entry.js → p-666e0ea0.entry.js} +2 -2
  183. package/dist/infineon-design-system-stencil/{p-9910fa06.entry.js → p-7378190d.entry.js} +2 -2
  184. package/dist/infineon-design-system-stencil/{p-b4d2f129.entry.js → p-75436967.entry.js} +2 -2
  185. package/dist/infineon-design-system-stencil/{p-661d19d6.entry.js → p-8b089cd1.entry.js} +2 -2
  186. package/dist/infineon-design-system-stencil/{p-73a92169.entry.js → p-a10f9b3c.entry.js} +2 -2
  187. package/dist/infineon-design-system-stencil/{p-e65cee48.entry.js → p-b010bfcb.entry.js} +2 -2
  188. package/dist/infineon-design-system-stencil/p-b010bfcb.entry.js.map +1 -0
  189. package/dist/infineon-design-system-stencil/{p-57671542.entry.js → p-b30b66e5.entry.js} +2 -2
  190. package/dist/infineon-design-system-stencil/{p-10ae176f.entry.js → p-bc40ad21.entry.js} +2 -2
  191. package/dist/infineon-design-system-stencil/{p-a4f220c4.entry.js → p-c2e6cbdb.entry.js} +2 -2
  192. package/dist/infineon-design-system-stencil/{p-9b77f2ec.entry.js → p-cdad5d2c.entry.js} +2 -2
  193. package/dist/infineon-design-system-stencil/{p-19565224.entry.js → p-ce9e5451.entry.js} +2 -2
  194. package/dist/infineon-design-system-stencil/{p-100ec922.entry.js → p-db4a364b.entry.js} +2 -2
  195. package/dist/infineon-design-system-stencil/{p-100ec922.entry.js.map → p-db4a364b.entry.js.map} +1 -1
  196. package/dist/infineon-design-system-stencil/p-ea74d7ab.entry.js +2 -0
  197. package/dist/infineon-design-system-stencil/{p-85e4c1c2.entry.js → p-f121e197.entry.js} +2 -2
  198. package/dist/infineon-design-system-stencil/{p-85e4c1c2.entry.js.map → p-f121e197.entry.js.map} +1 -1
  199. package/dist/types/components/select/single-select/select.d.ts +7 -0
  200. package/dist/types/components.d.ts +1 -0
  201. package/package.json +1 -1
  202. package/dist/components/p-07b492d8.js.map +0 -1
  203. package/dist/components/p-4adbcde3.js.map +0 -1
  204. package/dist/infineon-design-system-stencil/p-18d07164.entry.js +0 -2
  205. package/dist/infineon-design-system-stencil/p-6c6ddeb1.entry.js +0 -2
  206. package/dist/infineon-design-system-stencil/p-9518ef02.entry.js +0 -2
  207. package/dist/infineon-design-system-stencil/p-9518ef02.entry.js.map +0 -1
  208. package/dist/infineon-design-system-stencil/p-d868e967.entry.js +0 -2
  209. package/dist/infineon-design-system-stencil/p-e65cee48.entry.js.map +0 -1
  210. /package/dist/infineon-design-system-stencil/{p-2afb8620.entry.js.map → p-02be14a9.entry.js.map} +0 -0
  211. /package/dist/infineon-design-system-stencil/{p-c90f337e.entry.js.map → p-0ddf85fc.entry.js.map} +0 -0
  212. /package/dist/infineon-design-system-stencil/{p-d868e967.entry.js.map → p-16f9a47c.entry.js.map} +0 -0
  213. /package/dist/infineon-design-system-stencil/{p-2ea18356.entry.js.map → p-1f329979.entry.js.map} +0 -0
  214. /package/dist/infineon-design-system-stencil/{p-5ab7bd95.entry.js.map → p-208b28b1.entry.js.map} +0 -0
  215. /package/dist/infineon-design-system-stencil/{p-a9a1fc54.entry.js.map → p-25bf54c9.entry.js.map} +0 -0
  216. /package/dist/infineon-design-system-stencil/{p-849b1812.entry.js.map → p-2e8c0115.entry.js.map} +0 -0
  217. /package/dist/infineon-design-system-stencil/{p-1e07a44d.entry.js.map → p-30640970.entry.js.map} +0 -0
  218. /package/dist/infineon-design-system-stencil/{p-e21ab79f.entry.js.map → p-336778c3.entry.js.map} +0 -0
  219. /package/dist/infineon-design-system-stencil/{p-9f1ab459.entry.js.map → p-37ecac74.entry.js.map} +0 -0
  220. /package/dist/infineon-design-system-stencil/{p-9ecb5401.entry.js.map → p-39697853.entry.js.map} +0 -0
  221. /package/dist/infineon-design-system-stencil/{p-7d11833b.entry.js.map → p-49872432.entry.js.map} +0 -0
  222. /package/dist/infineon-design-system-stencil/{p-45c14df8.entry.js.map → p-50e122c4.entry.js.map} +0 -0
  223. /package/dist/infineon-design-system-stencil/{p-d2749c43.entry.js.map → p-5edfe317.entry.js.map} +0 -0
  224. /package/dist/infineon-design-system-stencil/{p-ba22e912.entry.js.map → p-666e0ea0.entry.js.map} +0 -0
  225. /package/dist/infineon-design-system-stencil/{p-9910fa06.entry.js.map → p-7378190d.entry.js.map} +0 -0
  226. /package/dist/infineon-design-system-stencil/{p-b4d2f129.entry.js.map → p-75436967.entry.js.map} +0 -0
  227. /package/dist/infineon-design-system-stencil/{p-661d19d6.entry.js.map → p-8b089cd1.entry.js.map} +0 -0
  228. /package/dist/infineon-design-system-stencil/{p-73a92169.entry.js.map → p-a10f9b3c.entry.js.map} +0 -0
  229. /package/dist/infineon-design-system-stencil/{p-57671542.entry.js.map → p-b30b66e5.entry.js.map} +0 -0
  230. /package/dist/infineon-design-system-stencil/{p-10ae176f.entry.js.map → p-bc40ad21.entry.js.map} +0 -0
  231. /package/dist/infineon-design-system-stencil/{p-a4f220c4.entry.js.map → p-c2e6cbdb.entry.js.map} +0 -0
  232. /package/dist/infineon-design-system-stencil/{p-9b77f2ec.entry.js.map → p-cdad5d2c.entry.js.map} +0 -0
  233. /package/dist/infineon-design-system-stencil/{p-19565224.entry.js.map → p-ce9e5451.entry.js.map} +0 -0
  234. /package/dist/infineon-design-system-stencil/{p-6c6ddeb1.entry.js.map → p-ea74d7ab.entry.js.map} +0 -0
package/dist/infineon-design-system-stencil/{p-85e4c1c2.entry.js → p-f121e197.entry.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{r as n,c as a,h as e,g as t}from"./p-80bb0959.js";const r=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{width:100%;display:block}.navbar__wrapper{font-family:var(--ifx-font-family);height:63px;position:sticky;z-index:1030;border-bottom:1px solid #EEEDED}.navbar__wrapper.fixed{border-bottom:none}.navbar__main-container{position:absolute;top:0;width:100%;transition:all 1s;z-index:1020}.navbar__main-container.fixed{position:fixed}.navbar__main-container.fixed .navbar__container{border-bottom:1px solid #EEEDED}.navbar__main-container.show{height:100vh;bottom:0;background-color:rgba(29, 29, 29, 0.2);transition:1s;z-index:1}.navbar__sidebar{box-sizing:border-box;position:fixed;right:-100%;top:64px;display:flex;flex-direction:column;align-items:flex-start;width:375px;height:calc(100vh - 64px);background-color:#FFFFFF;transition:right 1s;z-index:1030}.navbar__sidebar.show{right:0;transition:right 1s}.navbar__sidebar .navbar__sidebar-top-row{display:flex;padding:var(--borderRadius-none, 0px) var(--space-300, 24px) 30px var(--space-300, 24px);flex-direction:column;align-items:flex-start;gap:var(--space-200, 16px);flex:1 0 0;align-self:stretch;overflow-y:auto}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper{display:flex;padding-top:var(--space-200, 16px);flex-direction:column;align-items:flex-start;align-self:stretch;gap:16px}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper.expand{align-items:initial}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper .navbar__sidebar-top-row-item{display:flex;padding:var(--space-200, 0px) var(--space-50, 4px) var(--space-200, 0px) 0px;align-items:center;gap:var(--space-100, 8px);align-self:stretch;justify-content:space-between}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper .navbar__sidebar-top-row-item .navbar__sidebar-top-row-item-icon-wrapper ifx-icon{vertical-align:middle}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper .navbar__sidebar-top-row-item:hover{cursor:pointer}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper .navbar__sidebar-top-row-item .navbar__sidebar-top-row-item-label{color:var(--color-base-black, #1D1D1D);font-family:"Source Sans 3";font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__sidebar .navbar__sidebar-bottom-row{display:none;padding:var(--space-150, 12px) var(--space-300, 24px) var(--space-150, 12px) var(--space-200, 16px);flex-direction:column;align-items:flex-start;align-self:stretch;background:var(--color-engineering-100, #F7F7F7);border-top:1px solid var(--color-engineering-200, #EEEDED);gap:10px;max-height:160px;overflow-y:auto}.navbar__sidebar .navbar__sidebar-bottom-row.show{display:flex}.navbar__sidebar .navbar__sidebar-bottom-row .navbar__sidebar-bottom-row-item{display:flex;height:40px;padding-right:var(--space-50, 4px);align-items:center;gap:var(--space-100, 8px);flex:1 0 0}.navbar__sidebar .navbar__sidebar-bottom-row .navbar__sidebar-bottom-row-item .navbar__sidebar-bottom-row-item-label{color:var(--color-base-black, #1D1D1D);font-family:"Source Sans 3";font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__sidebar .navbar__sidebar-bottom-row .navbar__sidebar-bottom-row-item .navbar__sidebar-bottom-row-item-icon-wrapper{display:flex;align-items:center}.navbar__sidebar .navbar__sidebar-content-products,.navbar__sidebar .navbar__sidebar-content-main{display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:24px;flex:none;order:0;align-self:stretch;flex-grow:0}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-header,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-about-header,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-header,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-about-header{display:flex;flex-direction:row;align-items:center;padding:0px;gap:16px;flex:none;order:0;align-self:stretch;flex-grow:0;color:#BFBBBB}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-header span,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-about-header span,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-header span,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-about-header span{color:#1D1D1D;font-weight:600;font-size:18px;line-height:28px;display:flex;align-items:center}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu{display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:16px;flex:none;order:1;flex-grow:0;width:100%}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-products-menu-item,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-products-menu-item,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-products-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-products-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item{display:flex;flex-direction:row;align-items:center;padding:0px;flex:none;order:0;flex-grow:0}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-products-menu-item a,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-products-menu-item a,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-products-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-products-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item a{text-decoration:none;font-style:normal;font-weight:400;font-size:16px;line-height:24px;display:flex;align-items:center;color:#1D1D1D}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item{color:#BFBBBB}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item a{font-style:normal;font-weight:600;font-size:18px;line-height:28px;display:flex;align-items:center;color:#1D1D1D;flex:none;order:0;flex-grow:1}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu{align-items:normal}.navbar__container{display:flex;justify-content:space-between;align-items:center;padding:8px 40px;gap:16px;background-color:#FFFFFF;font-family:var(--ifx-font-family)}.navbar__container.expanded{justify-content:initial}.navbar__container .navbar__container-search-field-wrapper{display:none}.navbar__container .navbar__container-search-field-wrapper.show{display:flex}.navbar__container .navbar__container-left{display:flex;flex-direction:row;align-items:center;padding:0;gap:16px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left.hide{display:none}.navbar__container .navbar__container-left.expand{justify-content:initial;flex:1}.navbar__container .navbar__container-left.expand .navbar__container-left-content{align-items:initial;flex:1}.navbar__container .navbar__container-left.expand .navbar__container-left-content .navbar__container-left-content-navigation-group{justify-content:initial;flex:1}.navbar__container .navbar__container-left.expand .navbar__container-left-content .navbar__container-left-content-navigation-group .navbar__container-left-content-navigation-item-search-bar{flex:1}.navbar__container .navbar__container-left .navbar__container-left-logo{display:flex;flex-direction:row;align-items:center;padding:0px;gap:16px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-logo.hide{display:none}.navbar__container .navbar__container-left .navbar__container-left-logo h6{position:relative;margin:0;padding:0;font-style:normal;font-weight:600;font-size:16px;display:flex;align-items:center;color:#1D1D1D;flex:none;order:1;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-logo .navbar__container-left-logo-default{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:12px 0px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-logo .navbar__container-left-logo-default svg{width:91px;height:40px;flex:none;order:0;flex-grow:0;vertical-align:bottom}.navbar__container .navbar__container-left .navbar__container-left-logo .navbar__container-left-logo-divider{width:1px;height:32px;background:#EEEDED;flex:none;order:2;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;padding:0px;flex:none;order:1;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content .navbar__container-left-content-navigation-group{display:flex;flex-direction:row;align-items:center;padding:0px;gap:4px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content .navbar__container-left-content-navigation-group .navbar__container-left-content-navigation-item-search-bar{display:flex;flex-direction:row;align-items:center;padding:0px 8px;flex:none;order:5;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content .navbar__container-left-content-navigation-group .navbar__container-left-content-navigation-item{display:flex;flex-direction:row;align-items:center;padding:0px 8px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content .navbar__container-left-content-navigation-group .navbar__container-left-content-navigation-item a{display:flex;align-items:center;font-weight:400;font-size:16px;line-height:24px;color:#1D1D1D;text-decoration:none;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;padding:0;gap:8px;flex:none;order:1;flex-grow:0}.navbar__container .navbar__container-right.hide{display:none}.navbar__container .navbar__container-right.expand{justify-content:initial;flex:1}.navbar__container .navbar__container-right.expand .navbar__container-right-content{align-items:initial;flex:1}.navbar__container .navbar__container-right.expand .navbar__container-right-content .navbar__container-right-content-navigation-group{justify-content:initial;flex:1}.navbar__container .navbar__container-right.expand .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar{flex:1}.navbar__container .navbar__container-right.expand .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-search-bar-icon-wrapper{flex:1}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:4px 0px 4px 16px;border-left:1px solid #BFBBBB;gap:16px;flex:none;order:1;flex-grow:0;width:41px;height:40px}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper.hide{display:none}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__burger-icon{display:flex;align-items:center}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__burger-icon:hover{cursor:pointer}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__burger-icon.close{display:none}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__cross-icon{display:none;align-items:center}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__cross-icon.show{display:flex}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__cross-icon.show:hover{cursor:pointer}.navbar__container .navbar__container-right .navbar__container-right-content{display:flex;flex-direction:column;align-items:flex-start;padding:0px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group{position:relative;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:0px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar{display:flex;flex-direction:row;align-items:center;padding:0px 8px;gap:4px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-search-bar-icon-wrapper,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-search-bar-icon-wrapper,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-search-bar-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-search-bar-icon-wrapper.isOpen,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-search-bar-icon-wrapper.isOpen,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-search-bar-icon-wrapper.isOpen{position:absolute;top:10px}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-navigation-profile,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-navigation-profile,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-navigation-profile{position:relative;width:24px;height:24px;background:#0A8276;border-radius:100px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-navigation-profile a,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-navigation-profile a,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-navigation-profile a{position:absolute;width:22px;height:20px;left:calc(50% - 11px);top:calc(50% - 10px);font-style:normal;font-weight:600;font-size:14px;line-height:20px;text-decoration:none;display:flex;align-items:center;justify-content:center;text-align:center;color:#FFFFFF}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-icon-wrapper,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-icon-wrapper,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item a,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile a,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar a{font-style:normal;font-weight:400;font-size:14px;line-height:20px;color:#1D1D1D;text-decoration:none;display:flex;align-items:center;flex:none;order:1;flex-grow:0}@media screen and (max-width: 800px){.navbar__container{padding:0px 16px;height:64px;gap:initial}.navbar__container.expanded .navbar__container-right .navbar__burger-icon-wrapper{display:none}.navbar__container .navbar__container-left .navbar__container-left-content{display:none}.navbar__container .navbar__container-left .navbar__container-left-logo .navbar__container-left-logo-divider{display:none}.navbar__container .navbar__container-right{flex:1}.navbar__sidebar{width:0;transition:1s}}@media screen and (max-width: 500px){.navbar__sidebar.show{width:100%}}@media screen and (min-width: 500px){.navbar__sidebar.show{width:50%}}@media screen and (min-width: 800px){.navbar__wrapper{height:63px}.navbar__container{padding:0px 16px;height:63px;gap:initial}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper{display:none}.navbar__main-container.show{height:auto;background-color:inherit;transition:none}.navbar__sidebar{width:0;transition:1s}.navbar__sidebar.show{right:-100%}}@media screen and (min-width: 1024px){.navbar__wrapper{height:72px}.navbar__container{padding:0px 24px;height:72px}.navbar__container .navbar__container-left{gap:12px;display:flex}.navbar__container .navbar__container-left .navbar__container-left-content{display:flex}.navbar__container .navbar__container-left .navbar__container-left-logo-default svg{width:72.8px;height:32px}.navbar__main-container.show{height:auto;background-color:inherit;transition:none}}@media screen and (min-width: 1200px){.navbar__wrapper{height:80px}.navbar__container{padding:0px 32px;height:80px}.navbar__container .navbar__container-left .navbar__container-left-content{justify-content:inherit}.navbar__container .navbar__container-right .navbar__container-right-content{justify-content:inherit}}@media screen and (min-width: 1440px){.navbar__wrapper{height:80px}.navbar__container{padding:0px 40px;height:80px}.navbar__container .navbar__container-left .navbar__container-left-content{justify-content:center}.navbar__container .navbar__container-right .navbar__container-right-content{justify-content:inherit}}';const i=r;const o=class{constructor(e){n(this,e);this.ifxNavbarMobileMenuIsOpen=a(this,"ifxNavbarMobileMenuIsOpen",7);this.main=true;this.products=false;this.applications=false;this.design=false;this.support=false;this.about=false;this.applicationName="";this.hasLeftMenuItems=true;this.fixed=true;this.showLogoAndAppname=true;this.searchBarIsOpen=undefined;this.logoHref="";this.internalLogoHref="";this.logoHrefTarget="_self";this.internalLogoHrefTarget="_self"}addEventListenersToHandleCustomFocusState(){const n=this.el.shadowRoot.firstChild;if(!n){console.error("element not found");return}n.tabIndex=-1;const a=n.querySelectorAll("a");for(let n=0;n<a.length;n++){a[n].tabIndex=-1}const e=n.querySelector("slot");if(e){const n=e.assignedNodes();for(let a=0;a<n.length;a++){const e=n[a];if(e.nodeName==="IFX-NAVBAR-ITEM"){const n=e;const a=n===null||n===void 0?void 0:n.shadowRoot.querySelectorAll("a");for(let n=0;n<a.length;n++){a[n].tabIndex=-1}}}}}clearFirstLayerMenu(n){if(n.detail.action==="hideFirstLayer"){const a=this.getMobileMenuTop();for(let e=0;e<a.length;e++){if(!a[e].isSameNode(n.detail.component)){a[e].hideComponent()}}}if(n.detail.action==="hideSecondLayer"){const a=n.detail.parent;const e=a.children;a.toggleFirstLayerItem("remove","add");for(let a=0;a<e.length;a++){if(!e[a].isSameNode(n.detail.component)){e[a].hideComponent()}}}if(n.detail.action==="returnToSecondLayer"){const a=n.detail.parent;const e=a.children;a.toggleFirstLayerItem("add","remove");for(let a=0;a<e.length;a++){if(!e[a].isSameNode(n.detail.component)){e[a].showComponent()}}}if(n.detail.action==="show"){const a=this.el.querySelectorAll('[slot="left-item"]');for(let e=0;e<a.length;e++){if(!a[e].isSameNode(n.detail.component)){a[e].showComponent()}}}if(n.detail.action==="return"){const a=this.getMobileMenuTop();for(let e=0;e<a.length;e++){if(!a[e].isSameNode(n.detail.component)){a[e].showComponent()}}}}getWrappers(){const n=this.el.shadowRoot.querySelector(".navbar__container-right-content-navigation-item-search-bar-icon-wrapper");const a=this.el.shadowRoot.querySelector(".navbar__container-left-content-navigation-item-search-bar");const e=n.querySelector("slot");const t=a.querySelector("slot");const r=e.assignedNodes();const i=t.assignedNodes();const o=this.el.querySelector("ifx-navbar-profile");const _=this.el.querySelectorAll('[slot="left-item"]');const c=this.el.querySelectorAll('[slot="right-item"]');const b=this.el.shadowRoot.querySelector(".navbar__sidebar-top-row-wrapper");return{rightSideSlot:e,leftSideSlot:t,rightAssignedNodes:r,leftAssignedNodes:i,navbarProfile:o,leftMenuItems:_,rightMenuItems:c,topRowWrapper:b}}hideNavItems(){const{rightAssignedNodes:n,leftAssignedNodes:a,navbarProfile:e,leftMenuItems:t,rightMenuItems:r,topRowWrapper:i}=this.getWrappers();if(n.length!==0){this.searchBarIsOpen="right"}else if(a.length!==0){this.searchBarIsOpen="left"}if(e){e.hideComponent()}for(let n=0;n<t.length;n++){if(!i.classList.contains("expand")){t[n].hideComponent()}}for(let n=0;n<r.length;n++){if(i.classList.contains("expand")){if(!r[n].hideOnMobile){r[n].hideComponent()}}else{r[n].hideComponent()}}}showNavItems(){const{navbarProfile:n,leftMenuItems:a,rightMenuItems:e,topRowWrapper:t}=this.getWrappers();this.searchBarIsOpen=undefined;if(n){n.showComponent()}for(let n=0;n<a.length;n++){if(!t.classList.contains("expand")){a[n].showComponent()}}for(let n=0;n<e.length;n++){if(t.classList.contains("expand")){if(!e[n].hideOnMobile){e[n].showComponent()}}else{e[n].showComponent()}}}handleSearchBarToggle(n){if(n.detail){this.hideNavItems()}else if(!n.detail){this.showNavItems()}}toggleClass(n,a){n.classList.toggle(a)}handleSidebar(n){const a=n.currentTarget.closest(".navbar__burger-icon-wrapper");const e=a.querySelector(".navbar__burger-icon");const t=a.querySelector(".navbar__cross-icon");const r=n.currentTarget.closest(".navbar__main-container");const i=n.currentTarget.closest(".navbar__wrapper");const o=i.querySelector(".navbar__sidebar");this.toggleClass(i,"show");this.toggleClass(r,"show");this.toggleClass(o,"show");this.toggleClass(e,"close");this.toggleClass(t,"show");if(t.classList.contains("show")){this.handleBodyScroll("hide")}else{this.handleBodyScroll("show")}}handleBodyScroll(n){const a=this.el.closest("body");if(!this.fixed&&n==="hide"){a.style.overflow="hidden"}else if(n==="show"){a.style.overflow="visible"}}handleDropdownMenu(n){const a=n.currentTarget.querySelector(".navbar__dropdown-wrapper");a.classList.toggle("open");const e=n.currentTarget.querySelector("a");e.classList.toggle("open")}async setItemMenuPosition(){const n=this.el.querySelectorAll("ifx-navbar-item");const a=this.el.querySelector("ifx-navbar-profile");if(a){const n=a.querySelectorAll("ifx-navbar-item");if(n.length!==0){n.forEach((n=>{n.setMenuItemPosition();this.setMenuItemChildrenPosition(n)}))}}if(n.length!==0){for(let a=0;a<n.length;a++){const e=n[a];const t=e.querySelectorAll("ifx-navbar-item");if(t.length!==0){const n=await e.setItemSideSpecifications();if(n){t.forEach((n=>{n.setMenuItemPosition();this.setMenuItemChildrenPosition(n)}))}}}}}setMenuItemChildrenPosition(n){const a=n.querySelectorAll("ifx-navbar-item");if(a.length!==0){a.forEach((n=>{n.setMenuItemPosition();this.setMenuItemChildrenPosition(n)}))}}getMediaQueryList(){const n=window.matchMedia("(max-width: 800px)");return n}componentDidLoad(){this.setItemMenuPosition();this.addEventListenersToHandleCustomFocusState();const n=this.getMediaQueryList();if(n.matches){this.moveNavItemsToSidebar()}}handleMobileMenuBottom(n){const a=this.el.shadowRoot.querySelector(".navbar__sidebar-bottom-row");const e=n.target;const t=e.assignedNodes();if(t.length>0){a.classList.add("show")}else{a.classList.remove("show")}}handleLogoHrefAndTarget(){if(this.logoHref.trim()===""){this.internalLogoHref=undefined}else{this.internalLogoHref=this.logoHref}if(["_self","_blank","_parent"].includes(this.logoHrefTarget.trim())){this.internalLogoHrefTarget=this.logoHrefTarget}else{this.internalLogoHrefTarget="_self"}}componentWillLoad(){this.RemoveSpaceOnStorybookSnippet();const n=this.el.querySelector("ifx-navbar-menu");const a=this.el.querySelectorAll('[slot="left-item"]');if(!a.length&&!n){this.hasLeftMenuItems=false}this.handleLogoHrefAndTarget();const e=window.matchMedia("(max-width: 800px)");e.addEventListener("change",(n=>this.moveNavItemsToSidebar(n)))}getSearchBarLeftWrapper(){const n=this.el.shadowRoot.querySelector(".navbar__container-left-content-navigation-item-search-bar");return n}getMobileMenuTop(){const n=this.el.querySelectorAll('[slot="mobile-menu-top"]');return n}getMobileMenuBottom(){const n=this.el.querySelectorAll('[slot="mobile-menu-bottom"]');return n}handleBurgerIcon(){const n=this.getMobileMenuTop();const a=this.getMobileMenuBottom();if(!n.length&&!a.length){const n=this.el.shadowRoot.querySelector(".navbar__burger-icon-wrapper");this.toggleClass(n,"hide")}}moveNavItemsToSidebar(n){const a=this.el.shadowRoot.querySelector(".navbar__sidebar-top-row-wrapper");const e=this.getMediaQueryList();const t=n?n.matches:e.matches;if(t){a.classList.add("expand");const n=this.el.shadowRoot.querySelector(".navbar__cross-icon");if(n.classList.contains("show")){this.handleBodyScroll("hide")}const e=this.el.querySelector('[slot="search-bar-left"]');if(e){if(this.searchBarIsOpen){e.onNavbarMobile()}const n=this.getSearchBarLeftWrapper();n.classList.add("initial");e.setAttribute("slot","search-bar-right")}const t=this.el.querySelectorAll('[slot="left-item"]');for(let n=0;n<t.length;n++){t[n].setAttribute("slot","mobile-menu-top");t[n].moveChildComponentsIntoSubLayerMenu();if(this.searchBarIsOpen){t[n].showComponent()}}const r=this.el.querySelectorAll('[slot="right-item"]');for(let n=0;n<r.length;n++){if(r[n].tagName.toUpperCase()==="IFX-NAVBAR-PROFILE"){r[n].showLabel=false}else{if(r[n].hideOnMobile){r[n].setAttribute("slot","mobile-menu-bottom");r[n].toggleChildren("add");r[n].showLabel=true;if(this.searchBarIsOpen){r[n].showComponent()}}}}this.handleBurgerIcon()}else{a.classList.remove("expand");this.handleBodyScroll("show");const n=this.getSearchBarLeftWrapper();const e=n.classList.contains("initial");const t=this.el.querySelector('[slot="search-bar-right"]');if(e){if(this.searchBarIsOpen){t.onNavbarMobile()}t.setAttribute("slot","search-bar-left")}const r=this.getMobileMenuTop();for(let n=0;n<r.length;n++){r[n].setAttribute("slot","left-item");r[n].moveChildComponentsBackIntoNavbar()}const i=this.getMobileMenuBottom();const o=this.el.querySelector("ifx-navbar-profile");if(o){const n=o.getAttribute("show-label");o.setAttribute("show-label",n)}for(let n=0;n<i.length;n++){i[n].setAttribute("slot","right-item");i[n].toggleChildren("remove");const a=i[n].getAttribute("show-label");i[n].setAttribute("show-label",a);if(this.searchBarIsOpen){i[n].hideComponent()}}}}RemoveSpaceOnStorybookSnippet(){let n=this.el.parentElement;if(n){let a=n.closest(".css-xzp052");if(a){a.style.overflow="visible"}}}render(){return e("div",{key:"bfaff4d3716cc02eb5b0f5348a0f36dd3292a7de","aria-label":"a navigation navbar",class:`navbar__wrapper ${this.fixed?"fixed":""}`},e("div",{key:"c3048e64a54d71d258a3eb4ee68926ec3b692736",class:`navbar__main-container ${this.fixed?"fixed":""}`},e("div",{key:"85aa5b36345dc639aaa3791e8a5f4c51b8e07ff2",class:`navbar__container ${this.searchBarIsOpen?"expanded":""}`},e("div",{key:"b27efee7cc31e908fab361330de436184e939702",class:`navbar__container-left ${this.searchBarIsOpen==="left"?"expand":this.searchBarIsOpen==="right"?"hide":""}`},this.showLogoAndAppname&&e("div",{key:"52a85c268a0279c81eb02bc00a9470c875d3df38",class:`navbar__container-left-logo ${this.searchBarIsOpen==="left"?"hide":""}`},e("div",{key:"2e56d9844ed8d2d9c68a14c6132f00d168ed4bd5",class:"navbar__container-left-logo-default"},e("a",{key:"57c2a189968beeec6ba62d13d94c5a18632f346f",href:this.internalLogoHref,target:this.internalLogoHrefTarget},e("svg",{key:"a92602e8effb734c64244f442850523732c61dc5",width:"91",height:"40",viewBox:"0 0 91 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("g",{key:"8c6cc2cad1f2d87ad80c61a9176dbe8d22dc6494","clip-path":"url(#clip0_2396_2480)"},e("path",{key:"7a94c8ee2398aa0343de47398bb4fc7a7e9fcf69",d:"M67.691 26.7766C71.0884 26.7766 72.1461 23.1841 72.1461 19.8802C72.1461 15.4536 70.2871 13.1441 67.691 13.1441C64.4219 13.1441 63.2681 16.7367 63.3001 19.9443C63.3322 23.1199 64.2296 26.7766 67.691 26.7766ZM66.0244 19.8481C66.0244 18.533 66.0244 15.4536 67.691 15.4536C69.4859 15.4536 69.4218 18.5009 69.4218 19.9123C69.4218 21.2595 69.4218 24.5313 67.7551 24.5313C65.9603 24.4992 66.0244 21.2274 66.0244 19.8481ZM57.8195 26.7766C59.1976 26.7766 60.3835 26.2313 61.5053 25.0445L60.5117 23.1841C59.7425 24.018 58.9733 24.4671 58.0438 24.4671C57.2746 24.4671 56.6336 24.018 56.249 23.2482C55.9285 22.5746 55.8644 21.8048 55.8644 20.9708V20.7142H61.6335V20.1368C61.6335 17.282 61.2809 15.7102 60.3835 14.5234C59.7104 13.6253 58.7169 13.1441 57.499 13.1441C56.2169 13.1441 55.1593 13.7215 54.39 14.8442C53.5567 16.0631 53.2042 17.699 53.2042 19.9443C53.1721 24.2426 54.8708 26.7766 57.8195 26.7766ZM57.531 15.2612C58.172 15.2612 58.5566 15.614 58.813 16.1914C59.0053 16.7046 59.1015 17.5707 59.1015 18.5971H55.8644C55.8964 16.3197 56.3772 15.2612 57.531 15.2612ZM74.2614 26.4559H76.7614V16.8329C77.3703 16.0952 78.0754 15.6782 78.5882 15.6782C78.9087 15.6782 79.2292 15.7423 79.4215 15.9989C79.6138 16.2876 79.71 16.7046 79.71 17.699V26.4559H82.21V16.5442C82.21 15.6782 82.1138 14.8121 81.601 14.1706C81.1523 13.5932 80.4472 13.2404 79.5497 13.2404C78.3959 13.2404 77.2101 13.914 76.569 14.6838C76.537 14.0102 76.3126 13.3687 76.2485 13.1441L73.9089 13.7536C74.0371 14.4593 74.2294 15.3253 74.2294 16.8971V26.4559H74.2614ZM45.2236 14.6838C45.1915 14.0102 44.9672 13.3687 44.9031 13.1441L42.5634 13.7536C42.6916 14.4593 42.8839 15.3253 42.8839 16.8971V26.4238H45.3838V16.8008C45.9928 16.0631 46.6979 15.6461 47.2107 15.6461C47.5312 15.6461 47.8517 15.7102 48.044 15.9669C48.2363 16.2555 48.3325 16.6725 48.3325 17.6669V26.4238H50.8324V16.5442C50.8324 15.6782 50.7363 14.8121 50.2235 14.1706C49.7748 13.5932 49.0696 13.2404 48.1722 13.2404C47.0505 13.2404 45.8646 13.914 45.2236 14.6838ZM14.6473 9.07042C16.1216 9.07042 17.3075 7.88359 17.3075 6.40807C17.3075 4.93256 16.1216 3.74573 14.6473 3.74573C13.173 3.74573 11.9871 4.93256 11.9871 6.40807C11.9871 7.88359 13.173 9.07042 14.6473 9.07042ZM26.9227 26.4559V16.5442C26.9227 15.6782 26.8265 14.8121 26.3137 14.1706C25.865 13.5932 25.1599 13.2404 24.2625 13.2404C23.1087 13.2404 21.9228 13.914 21.2818 14.6838C21.2497 14.0102 21.0254 13.3687 20.9613 13.1441L18.6536 13.7857C18.7818 14.4913 18.9741 15.3574 18.9741 16.9291V26.4559H21.4741V16.8329C22.0831 16.0952 22.7882 15.6782 23.301 15.6782C23.6215 15.6782 23.942 15.7423 24.1343 15.9989C24.3266 16.2876 24.4227 16.7046 24.4227 17.699V26.4559H26.9227ZM38.4289 8.36474C37.4994 8.36474 36.7622 9.10249 36.7622 10.0327C36.7622 10.9629 37.4994 11.7007 38.3968 11.7007C39.3263 11.7007 40.0634 10.9629 40.0634 10.0327C40.0634 9.10249 39.3263 8.36474 38.4289 8.36474ZM13.4614 26.4559H15.9614V10.8346L13.4614 11.1554V26.4559ZM33.8777 9.90441C34.3264 9.90441 34.7751 10.0648 35.0635 10.2893L35.7687 8.33266C35.0956 7.85151 34.3584 7.62698 33.429 7.62698C32.788 7.62698 32.1149 7.78736 31.5059 8.26851C30.897 8.78173 30.256 9.80818 30.256 11.7328C30.256 12.5667 30.288 13.4328 30.288 13.4328H29.4226V15.6461H30.288V26.4238H32.8521V15.6782H34.743L35.2238 13.4649H32.8841V11.4762C32.8841 10.5139 33.2687 9.90441 33.8777 9.90441ZM37.1468 26.4559H39.6788V13.2404L37.1468 13.5611V26.4559Z",fill:"#005DA9"}),e("path",{key:"c0dad44605a4ab7652a5c2aeb9626a5c23441517",d:"M77.0816 33.5126C68.6203 36.0146 58.3321 37.1052 48.2682 37.1052C22.7239 37.1052 6.24986 29.5993 5.09604 19.6877C4.67938 15.9668 7.59599 12.3422 12.4677 9.26285C11.6023 8.62132 11.0575 7.59488 11.0254 6.44012C3.97427 10.161 0 15.0366 0 19.9764C0 30.9145 19.5188 40.1525 48.5246 39.7676C58.6205 39.6393 67.0498 38.1958 74.6778 35.6939C83.7482 32.7428 89.4532 28.5087 90.8313 26.6483C89.1968 28.1238 85.3186 31.0748 77.0816 33.5126ZM23.2687 4.38723C24.9674 3.80985 27.3712 3.0721 27.3712 3.0721C34.1339 1.21166 41.6017 0.121063 48.5566 0.185215C40.544 -0.295931 33.2365 0.185215 26.8584 1.33997C26.8584 1.33997 24.743 1.69281 22.4675 2.27018C22.4675 2.27018 21.3777 2.55887 20.7047 2.75133C20.0316 2.94379 19.1021 3.2004 19.1021 3.2004C18.4611 3.39286 17.8201 3.6174 17.1791 3.84193C17.8201 4.48346 18.2047 5.31745 18.2368 6.27974C19.3586 5.76652 21.5059 4.99668 23.2687 4.38723Z",fill:"#E30034"})),e("defs",{key:"a7958a55b7445fd2048110678b38fe05c7300f82"},e("clipPath",{key:"c79a6f7a34f82a45c309e34e0be88d25cea86104",id:"clip0_2396_2480"},e("rect",{key:"9c07484bf7ed5b8c1d7300415fd45f9c0ff2fb56",width:"91",height:"40",fill:"white"})))))),this.applicationName&&e("h6",{key:"f6fb48bc3a9c0943f0fc7aa6c7ff146fc66dd5de"},this.applicationName),this.applicationName&&this.hasLeftMenuItems&&e("div",{key:"7aec6bbe8d641fdef5c5733b195cea3b976e1aba",class:"navbar__container-left-logo-divider"})),e("div",{key:"cd0571a1fe1b5044f3b633e0c77ad8df07a23445",class:"navbar__container-left-content"},e("div",{key:"2acc943884d0d41e4caeb1d06c326e0e5cc6b465",class:"navbar__container-left-content-navigation-group"},e("slot",{key:"f25e74e969c862d6e3387a4c5fc9dc639d89c0be",name:"left-item"}),e("div",{key:"ec2fee794b580f259de9d2a3b85221aea15dff31",class:"navbar__container-left-content-navigation-item-search-bar"},e("slot",{key:"3e4aac3921f32e60d98be754d8a5db081b68d7c2",name:"search-bar-left"}))))),e("div",{key:"c9817296dadc484e2f5deac6fc059a63bee0c82a",class:`navbar__container-right ${this.searchBarIsOpen==="right"?"expand":this.searchBarIsOpen==="left"?"hide":""}`},e("div",{key:"c43875e7d6a567ad902ab76bf134bfb571f9b11b",class:"navbar__container-right-content"},e("div",{key:"6fb273e8468102db189c56beffed3a38b95532ba",class:"navbar__container-right-content-navigation-group"},e("div",{key:"849f3179ab2bc36b536ca263d793d5a84b822d33",class:"navbar__container-right-content-navigation-item-search-bar"},e("div",{key:"383800de699799a13469d5e649d4fa89fca0f611",class:`navbar__container-right-content-navigation-item-search-bar-icon-wrapper`},e("slot",{key:"513d01f698230414a048a185bd99184251c006c9",name:"search-bar-right"}))),e("slot",{key:"f95aa10b1f066b248186b0dc4aeb7bde10a49f5f",name:"right-item"}))),e("div",{key:"9940e5361efa1f86bcda6cd555241580341d9d9a",class:`navbar__burger-icon-wrapper`,onClick:this.handleSidebar.bind(this)},e("div",{key:"a118a6f7b4a5ea4e058bcac0736d79ba259f34d6",class:"navbar__burger-icon"},e("ifx-icon",{key:"4d4dc9f42176705dff980fc1c00f5b8004e13057",icon:"menu-right-24"})),e("div",{key:"395668e979d5cf235bb7b469e9e6cbf3826777e0",class:"navbar__cross-icon"},e("ifx-icon",{key:"ef2d8f9323a15d53139b60d9f24d51ca062f1c6f",icon:"cross-24"})))))),e("div",{key:"df7502d43e06d954f71e9fba225c29864f16d61d",class:"navbar__sidebar"},e("div",{key:"423b597852e55daf1e402a86b9d8f7909509ad3c",class:"navbar__sidebar-top-row"},e("div",{key:"1a81dcd2909498b456c7b9b67347ea3b64aa8478",class:"navbar__sidebar-top-row-wrapper"},e("slot",{key:"e0951d1651e1198b50b29098f2190d78616f12e7",name:"mobile-menu-top"}))),e("div",{key:"33a46bbf3b15bfb7f0c912db8f78f76c07a71791",class:"navbar__sidebar-bottom-row"},e("slot",{key:"20d041f7bcaa8319b0226ea133ec5e8c07953a80",name:"mobile-menu-bottom",onSlotchange:n=>this.handleMobileMenuBottom(n)}))))}get el(){return t(this)}};o.style=i;export{o as ifx_navbar};
2
- //# sourceMappingURL=p-85e4c1c2.entry.js.map
1
+ import{r as n,c as a,h as e,g as t}from"./p-80bb0959.js";const r=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{width:100%;display:block}.navbar__wrapper{font-family:var(--ifx-font-family);height:63px;position:sticky;z-index:1030;border-bottom:1px solid #EEEDED}.navbar__wrapper.fixed{border-bottom:none}.navbar__main-container{position:absolute;top:0;width:100%;transition:all 1s;z-index:1020}.navbar__main-container.fixed{position:fixed}.navbar__main-container.fixed .navbar__container{border-bottom:1px solid #EEEDED}.navbar__main-container.show{height:100vh;bottom:0;background-color:rgba(29, 29, 29, 0.2);transition:1s;z-index:1}.navbar__sidebar{box-sizing:border-box;position:fixed;right:-100%;top:64px;display:flex;flex-direction:column;align-items:flex-start;width:375px;height:calc(100vh - 64px);background-color:#FFFFFF;transition:right 1s;z-index:1030}.navbar__sidebar.show{right:0;transition:right 1s}.navbar__sidebar .navbar__sidebar-top-row{display:flex;padding:var(--borderRadius-none, 0px) var(--space-300, 24px) 30px var(--space-300, 24px);flex-direction:column;align-items:flex-start;gap:var(--space-200, 16px);flex:1 0 0;align-self:stretch;overflow-y:auto}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper{display:flex;padding-top:var(--space-200, 16px);flex-direction:column;align-items:flex-start;align-self:stretch;gap:16px}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper.expand{align-items:initial}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper .navbar__sidebar-top-row-item{display:flex;padding:var(--space-200, 0px) var(--space-50, 4px) var(--space-200, 0px) 0px;align-items:center;gap:var(--space-100, 8px);align-self:stretch;justify-content:space-between}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper .navbar__sidebar-top-row-item .navbar__sidebar-top-row-item-icon-wrapper ifx-icon{vertical-align:middle}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper .navbar__sidebar-top-row-item:hover{cursor:pointer}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper .navbar__sidebar-top-row-item .navbar__sidebar-top-row-item-label{color:var(--color-base-black, #1D1D1D);font-family:"Source Sans 3";font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__sidebar .navbar__sidebar-bottom-row{display:none;padding:var(--space-150, 12px) var(--space-300, 24px) var(--space-150, 12px) var(--space-200, 16px);flex-direction:column;align-items:flex-start;align-self:stretch;background:var(--color-engineering-100, #F7F7F7);border-top:1px solid var(--color-engineering-200, #EEEDED);gap:10px;max-height:160px;overflow-y:auto}.navbar__sidebar .navbar__sidebar-bottom-row.show{display:flex}.navbar__sidebar .navbar__sidebar-bottom-row .navbar__sidebar-bottom-row-item{display:flex;height:40px;padding-right:var(--space-50, 4px);align-items:center;gap:var(--space-100, 8px);flex:1 0 0}.navbar__sidebar .navbar__sidebar-bottom-row .navbar__sidebar-bottom-row-item .navbar__sidebar-bottom-row-item-label{color:var(--color-base-black, #1D1D1D);font-family:"Source Sans 3";font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__sidebar .navbar__sidebar-bottom-row .navbar__sidebar-bottom-row-item .navbar__sidebar-bottom-row-item-icon-wrapper{display:flex;align-items:center}.navbar__sidebar .navbar__sidebar-content-products,.navbar__sidebar .navbar__sidebar-content-main{display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:24px;flex:none;order:0;align-self:stretch;flex-grow:0}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-header,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-about-header,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-header,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-about-header{display:flex;flex-direction:row;align-items:center;padding:0px;gap:16px;flex:none;order:0;align-self:stretch;flex-grow:0;color:#BFBBBB}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-header span,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-about-header span,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-header span,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-about-header span{color:#1D1D1D;font-weight:600;font-size:18px;line-height:28px;display:flex;align-items:center}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu{display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:16px;flex:none;order:1;flex-grow:0;width:100%}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-products-menu-item,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-products-menu-item,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-products-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-products-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item{display:flex;flex-direction:row;align-items:center;padding:0px;flex:none;order:0;flex-grow:0}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-products-menu-item a,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-products-menu-item a,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-products-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-products-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item a{text-decoration:none;font-style:normal;font-weight:400;font-size:16px;line-height:24px;display:flex;align-items:center;color:#1D1D1D}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item{color:#BFBBBB}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item a{font-style:normal;font-weight:600;font-size:18px;line-height:28px;display:flex;align-items:center;color:#1D1D1D;flex:none;order:0;flex-grow:1}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu{align-items:normal}.navbar__container{display:flex;justify-content:space-between;align-items:center;padding:8px 40px;gap:16px;background-color:#FFFFFF;font-family:var(--ifx-font-family)}.navbar__container.expanded{justify-content:initial}.navbar__container .navbar__container-search-field-wrapper{display:none}.navbar__container .navbar__container-search-field-wrapper.show{display:flex}.navbar__container .navbar__container-left{display:flex;flex-direction:row;align-items:center;padding:0;gap:16px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left.hide{display:none}.navbar__container .navbar__container-left.expand{justify-content:initial;flex:1}.navbar__container .navbar__container-left.expand .navbar__container-left-content{align-items:initial;flex:1}.navbar__container .navbar__container-left.expand .navbar__container-left-content .navbar__container-left-content-navigation-group{justify-content:initial;flex:1}.navbar__container .navbar__container-left.expand .navbar__container-left-content .navbar__container-left-content-navigation-group .navbar__container-left-content-navigation-item-search-bar{flex:1}.navbar__container .navbar__container-left .navbar__container-left-logo{display:flex;flex-direction:row;align-items:center;padding:0px;gap:16px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-logo.hide{display:none}.navbar__container .navbar__container-left .navbar__container-left-logo h6{position:relative;margin:0;padding:0;font-style:normal;font-weight:600;font-size:16px;display:flex;align-items:center;color:#1D1D1D;flex:none;order:1;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-logo .navbar__container-left-logo-default{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:12px 0px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-logo .navbar__container-left-logo-default svg{width:91px;height:40px;flex:none;order:0;flex-grow:0;vertical-align:bottom}.navbar__container .navbar__container-left .navbar__container-left-logo .navbar__container-left-logo-divider{width:1px;height:32px;background:#EEEDED;flex:none;order:2;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;padding:0px;flex:none;order:1;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content .navbar__container-left-content-navigation-group{display:flex;flex-direction:row;align-items:center;padding:0px;gap:4px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content .navbar__container-left-content-navigation-group .navbar__container-left-content-navigation-item-search-bar{display:flex;flex-direction:row;align-items:center;padding:0px 8px;flex:none;order:5;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content .navbar__container-left-content-navigation-group .navbar__container-left-content-navigation-item{display:flex;flex-direction:row;align-items:center;padding:0px 8px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content .navbar__container-left-content-navigation-group .navbar__container-left-content-navigation-item a{display:flex;align-items:center;font-weight:400;font-size:16px;line-height:24px;color:#1D1D1D;text-decoration:none;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;padding:0;gap:8px;flex:none;order:1;flex-grow:0}.navbar__container .navbar__container-right.hide{display:none}.navbar__container .navbar__container-right.expand{justify-content:initial;flex:1}.navbar__container .navbar__container-right.expand .navbar__container-right-content{align-items:initial;flex:1}.navbar__container .navbar__container-right.expand .navbar__container-right-content .navbar__container-right-content-navigation-group{justify-content:initial;flex:1}.navbar__container .navbar__container-right.expand .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar{flex:1}.navbar__container .navbar__container-right.expand .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-search-bar-icon-wrapper{flex:1}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:4px 0px 4px 16px;border-left:1px solid #BFBBBB;gap:16px;flex:none;order:1;flex-grow:0;width:41px;height:40px}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper.hide{display:none}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__burger-icon{display:flex;align-items:center}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__burger-icon:hover{cursor:pointer}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__burger-icon.close{display:none}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__cross-icon{display:none;align-items:center}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__cross-icon.show{display:flex}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__cross-icon.show:hover{cursor:pointer}.navbar__container .navbar__container-right .navbar__container-right-content{display:flex;flex-direction:column;align-items:flex-start;padding:0px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group{position:relative;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:0px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar{display:flex;flex-direction:row;align-items:center;padding:0px 8px;gap:4px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-search-bar-icon-wrapper,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-search-bar-icon-wrapper,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-search-bar-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-search-bar-icon-wrapper.isOpen,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-search-bar-icon-wrapper.isOpen,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-search-bar-icon-wrapper.isOpen{position:absolute;top:10px}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-navigation-profile,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-navigation-profile,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-navigation-profile{position:relative;width:24px;height:24px;background:#0A8276;border-radius:100px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-navigation-profile a,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-navigation-profile a,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-navigation-profile a{position:absolute;width:22px;height:20px;left:calc(50% - 11px);top:calc(50% - 10px);font-style:normal;font-weight:600;font-size:14px;line-height:20px;text-decoration:none;display:flex;align-items:center;justify-content:center;text-align:center;color:#FFFFFF}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-icon-wrapper,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-icon-wrapper,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item a,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile a,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar a{font-style:normal;font-weight:400;font-size:14px;line-height:20px;color:#1D1D1D;text-decoration:none;display:flex;align-items:center;flex:none;order:1;flex-grow:0}@media screen and (max-width: 800px){.navbar__container{padding:0px 16px;height:64px;gap:initial}.navbar__container.expanded .navbar__container-right .navbar__burger-icon-wrapper{display:none}.navbar__container .navbar__container-left .navbar__container-left-content{display:none}.navbar__container .navbar__container-left .navbar__container-left-logo .navbar__container-left-logo-divider{display:none}.navbar__container .navbar__container-right{flex:1}.navbar__sidebar{width:0;transition:1s}}@media screen and (max-width: 500px){.navbar__sidebar.show{width:100%}}@media screen and (min-width: 500px){.navbar__sidebar.show{width:50%}}@media screen and (min-width: 800px){.navbar__wrapper{height:63px}.navbar__container{padding:0px 16px;height:63px;gap:initial}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper{display:none}.navbar__main-container.show{height:auto;background-color:inherit;transition:none}.navbar__sidebar{width:0;transition:1s}.navbar__sidebar.show{right:-100%}}@media screen and (min-width: 1024px){.navbar__wrapper{height:72px}.navbar__container{padding:0px 24px;height:72px}.navbar__container .navbar__container-left{gap:12px;display:flex}.navbar__container .navbar__container-left .navbar__container-left-content{display:flex}.navbar__container .navbar__container-left .navbar__container-left-logo-default svg{width:72.8px;height:32px}.navbar__main-container.show{height:auto;background-color:inherit;transition:none}}@media screen and (min-width: 1200px){.navbar__wrapper{height:80px}.navbar__container{padding:0px 32px;height:80px}.navbar__container .navbar__container-left .navbar__container-left-content{justify-content:inherit}.navbar__container .navbar__container-right .navbar__container-right-content{justify-content:inherit}}@media screen and (min-width: 1440px){.navbar__wrapper{height:80px}.navbar__container{padding:0px 40px;height:80px}.navbar__container .navbar__container-left .navbar__container-left-content{justify-content:center}.navbar__container .navbar__container-right .navbar__container-right-content{justify-content:inherit}}';const i=r;const o=class{constructor(e){n(this,e);this.ifxNavbarMobileMenuIsOpen=a(this,"ifxNavbarMobileMenuIsOpen",7);this.main=true;this.products=false;this.applications=false;this.design=false;this.support=false;this.about=false;this.applicationName="";this.hasLeftMenuItems=true;this.fixed=true;this.showLogoAndAppname=true;this.searchBarIsOpen=undefined;this.logoHref="";this.internalLogoHref="";this.logoHrefTarget="_self";this.internalLogoHrefTarget="_self"}addEventListenersToHandleCustomFocusState(){const n=this.el.shadowRoot.firstChild;if(!n){console.error("element not found");return}n.tabIndex=-1;const a=n.querySelectorAll("a");for(let n=0;n<a.length;n++){a[n].tabIndex=-1}const e=n.querySelector("slot");if(e){const n=e.assignedNodes();for(let a=0;a<n.length;a++){const e=n[a];if(e.nodeName==="IFX-NAVBAR-ITEM"){const n=e;const a=n===null||n===void 0?void 0:n.shadowRoot.querySelectorAll("a");for(let n=0;n<a.length;n++){a[n].tabIndex=-1}}}}}clearFirstLayerMenu(n){if(n.detail.action==="hideFirstLayer"){const a=this.getMobileMenuTop();for(let e=0;e<a.length;e++){if(!a[e].isSameNode(n.detail.component)){a[e].hideComponent()}}}if(n.detail.action==="hideSecondLayer"){const a=n.detail.parent;const e=a.children;a.toggleFirstLayerItem("remove","add");for(let a=0;a<e.length;a++){if(!e[a].isSameNode(n.detail.component)){e[a].hideComponent()}}}if(n.detail.action==="returnToSecondLayer"){const a=n.detail.parent;const e=a.children;a.toggleFirstLayerItem("add","remove");for(let a=0;a<e.length;a++){if(!e[a].isSameNode(n.detail.component)){e[a].showComponent()}}}if(n.detail.action==="show"){const a=this.el.querySelectorAll('[slot="left-item"]');for(let e=0;e<a.length;e++){if(!a[e].isSameNode(n.detail.component)){a[e].showComponent()}}}if(n.detail.action==="return"){const a=this.getMobileMenuTop();for(let e=0;e<a.length;e++){if(!a[e].isSameNode(n.detail.component)){a[e].showComponent()}}}}getWrappers(){const n=this.el.shadowRoot.querySelector(".navbar__container-right-content-navigation-item-search-bar-icon-wrapper");const a=this.el.shadowRoot.querySelector(".navbar__container-left-content-navigation-item-search-bar");const e=n.querySelector("slot");const t=a.querySelector("slot");const r=e.assignedNodes();const i=t.assignedNodes();const o=this.el.querySelector("ifx-navbar-profile");const _=this.el.querySelectorAll('[slot="left-item"]');const c=this.el.querySelectorAll('[slot="right-item"]');const b=this.el.shadowRoot.querySelector(".navbar__sidebar-top-row-wrapper");return{rightSideSlot:e,leftSideSlot:t,rightAssignedNodes:r,leftAssignedNodes:i,navbarProfile:o,leftMenuItems:_,rightMenuItems:c,topRowWrapper:b}}hideNavItems(){const{rightAssignedNodes:n,leftAssignedNodes:a,navbarProfile:e,leftMenuItems:t,rightMenuItems:r,topRowWrapper:i}=this.getWrappers();if(n.length!==0){this.searchBarIsOpen="right"}else if(a.length!==0){this.searchBarIsOpen="left"}if(e){e.hideComponent()}for(let n=0;n<t.length;n++){if(!i.classList.contains("expand")){t[n].hideComponent()}}for(let n=0;n<r.length;n++){if(i.classList.contains("expand")){if(!r[n].hideOnMobile){r[n].hideComponent()}}else{r[n].hideComponent()}}}showNavItems(){const{navbarProfile:n,leftMenuItems:a,rightMenuItems:e,topRowWrapper:t}=this.getWrappers();this.searchBarIsOpen=undefined;if(n){n.showComponent()}for(let n=0;n<a.length;n++){if(!t.classList.contains("expand")){a[n].showComponent()}}for(let n=0;n<e.length;n++){if(t.classList.contains("expand")){if(!e[n].hideOnMobile){e[n].showComponent()}}else{e[n].showComponent()}}}handleSearchBarToggle(n){if(n.detail){this.hideNavItems()}else if(!n.detail){this.showNavItems()}}toggleClass(n,a){n.classList.toggle(a)}handleSidebar(n){const a=n.currentTarget.closest(".navbar__burger-icon-wrapper");const e=a.querySelector(".navbar__burger-icon");const t=a.querySelector(".navbar__cross-icon");const r=n.currentTarget.closest(".navbar__main-container");const i=n.currentTarget.closest(".navbar__wrapper");const o=i.querySelector(".navbar__sidebar");this.toggleClass(i,"show");this.toggleClass(r,"show");this.toggleClass(o,"show");this.toggleClass(e,"close");this.toggleClass(t,"show");if(t.classList.contains("show")){this.handleBodyScroll("hide")}else{this.handleBodyScroll("show")}}handleBodyScroll(n){const a=this.el.closest("body");if(!this.fixed&&n==="hide"){a.style.overflow="hidden"}else if(n==="show"){a.style.overflow="visible"}}handleDropdownMenu(n){const a=n.currentTarget.querySelector(".navbar__dropdown-wrapper");a.classList.toggle("open");const e=n.currentTarget.querySelector("a");e.classList.toggle("open")}async setItemMenuPosition(){const n=this.el.querySelectorAll("ifx-navbar-item");const a=this.el.querySelector("ifx-navbar-profile");if(a){const n=a.querySelectorAll("ifx-navbar-item");if(n.length!==0){n.forEach((n=>{n.setMenuItemPosition();this.setMenuItemChildrenPosition(n)}))}}if(n.length!==0){for(let a=0;a<n.length;a++){const e=n[a];const t=e.querySelectorAll("ifx-navbar-item");if(t.length!==0){const n=await e.setItemSideSpecifications();if(n){t.forEach((n=>{n.setMenuItemPosition();this.setMenuItemChildrenPosition(n)}))}}}}}setMenuItemChildrenPosition(n){const a=n.querySelectorAll("ifx-navbar-item");if(a.length!==0){a.forEach((n=>{n.setMenuItemPosition();this.setMenuItemChildrenPosition(n)}))}}getMediaQueryList(){const n=window.matchMedia("(max-width: 800px)");return n}componentDidLoad(){this.setItemMenuPosition();this.addEventListenersToHandleCustomFocusState();const n=this.getMediaQueryList();if(n.matches){this.moveNavItemsToSidebar()}}handleMobileMenuBottom(n){const a=this.el.shadowRoot.querySelector(".navbar__sidebar-bottom-row");const e=n.target;const t=e.assignedNodes();if(t.length>0){a.classList.add("show")}else{a.classList.remove("show")}}handleLogoHrefAndTarget(){if(this.logoHref.trim()===""){this.internalLogoHref=undefined}else{this.internalLogoHref=this.logoHref}if(["_self","_blank","_parent"].includes(this.logoHrefTarget.trim())){this.internalLogoHrefTarget=this.logoHrefTarget}else{this.internalLogoHrefTarget="_self"}}componentWillLoad(){this.RemoveSpaceOnStorybookSnippet();const n=this.el.querySelector("ifx-navbar-menu");const a=this.el.querySelectorAll('[slot="left-item"]');if(!a.length&&!n){this.hasLeftMenuItems=false}this.handleLogoHrefAndTarget();const e=window.matchMedia("(max-width: 800px)");e.addEventListener("change",(n=>this.moveNavItemsToSidebar(n)))}getSearchBarLeftWrapper(){const n=this.el.shadowRoot.querySelector(".navbar__container-left-content-navigation-item-search-bar");return n}getMobileMenuTop(){const n=this.el.querySelectorAll('[slot="mobile-menu-top"]');return n}getMobileMenuBottom(){const n=this.el.querySelectorAll('[slot="mobile-menu-bottom"]');return n}handleBurgerIcon(){const n=this.getMobileMenuTop();const a=this.getMobileMenuBottom();if(!n.length&&!a.length){const n=this.el.shadowRoot.querySelector(".navbar__burger-icon-wrapper");this.toggleClass(n,"hide")}}moveNavItemsToSidebar(n){const a=this.el.shadowRoot.querySelector(".navbar__sidebar-top-row-wrapper");const e=this.getMediaQueryList();const t=n?n.matches:e.matches;if(t){a.classList.add("expand");const n=this.el.shadowRoot.querySelector(".navbar__cross-icon");if(n.classList.contains("show")){this.handleBodyScroll("hide")}const e=this.el.querySelector('[slot="search-bar-left"]');if(e){if(this.searchBarIsOpen){e.onNavbarMobile()}const n=this.getSearchBarLeftWrapper();n.classList.add("initial");e.setAttribute("slot","search-bar-right")}const t=this.el.querySelectorAll('[slot="left-item"]');for(let n=0;n<t.length;n++){t[n].setAttribute("slot","mobile-menu-top");t[n].moveChildComponentsIntoSubLayerMenu();if(this.searchBarIsOpen){t[n].showComponent()}}const r=this.el.querySelectorAll('[slot="right-item"]');for(let n=0;n<r.length;n++){if(r[n].tagName.toUpperCase()==="IFX-NAVBAR-PROFILE"){r[n].showLabel=false}else{if(r[n].hideOnMobile){r[n].setAttribute("slot","mobile-menu-bottom");r[n].toggleChildren("add");r[n].showLabel=true;if(this.searchBarIsOpen){r[n].showComponent()}}}}this.handleBurgerIcon()}else{a.classList.remove("expand");this.handleBodyScroll("show");const n=this.getSearchBarLeftWrapper();const e=n.classList.contains("initial");const t=this.el.querySelector('[slot="search-bar-right"]');if(e){if(this.searchBarIsOpen){t.onNavbarMobile()}if(t){t.setAttribute("slot","search-bar-left")}}const r=this.getMobileMenuTop();for(let n=0;n<r.length;n++){r[n].setAttribute("slot","left-item");r[n].moveChildComponentsBackIntoNavbar()}const i=this.getMobileMenuBottom();const o=this.el.querySelector("ifx-navbar-profile");if(o){const n=o.getAttribute("show-label");o.setAttribute("show-label",n)}for(let n=0;n<i.length;n++){i[n].setAttribute("slot","right-item");i[n].toggleChildren("remove");const a=i[n].getAttribute("show-label");i[n].setAttribute("show-label",a);if(this.searchBarIsOpen){i[n].hideComponent()}}}}RemoveSpaceOnStorybookSnippet(){let n=this.el.parentElement;if(n){let a=n.closest(".css-xzp052");if(a){a.style.overflow="visible"}}}render(){return e("div",{key:"248ddce401726339e6d1c413313ed56ec8f117cc","aria-label":"a navigation navbar",class:`navbar__wrapper ${this.fixed?"fixed":""}`},e("div",{key:"35b5ee506267cb70afe88ea3e2b90e89e8ed103f",class:`navbar__main-container ${this.fixed?"fixed":""}`},e("div",{key:"590d5c3f49567990da4ea45fa7b61952e269706c",class:`navbar__container ${this.searchBarIsOpen?"expanded":""}`},e("div",{key:"a41432c786336eeb20bd5b28ad9553e1309f3e9c",class:`navbar__container-left ${this.searchBarIsOpen==="left"?"expand":this.searchBarIsOpen==="right"?"hide":""}`},this.showLogoAndAppname&&e("div",{key:"e87eef326a89f4a3cb96c6c437add8c1ba7014f4",class:`navbar__container-left-logo ${this.searchBarIsOpen==="left"?"hide":""}`},e("div",{key:"54fef930e38c25455b46ecad7f181317459d29ac",class:"navbar__container-left-logo-default"},e("a",{key:"2a75ee0e70da4ec850cd28540e4d85ef80416a94",href:this.internalLogoHref,target:this.internalLogoHrefTarget},e("svg",{key:"0fa5d7b99826e72d9c97de37d31bca241f6bff01",width:"91",height:"40",viewBox:"0 0 91 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("g",{key:"3ebe1716f05c1ac334a337d8763f3e9cfb0ca493","clip-path":"url(#clip0_2396_2480)"},e("path",{key:"019508d632c8d9cd437dcfb774cb31165ec7e1da",d:"M67.691 26.7766C71.0884 26.7766 72.1461 23.1841 72.1461 19.8802C72.1461 15.4536 70.2871 13.1441 67.691 13.1441C64.4219 13.1441 63.2681 16.7367 63.3001 19.9443C63.3322 23.1199 64.2296 26.7766 67.691 26.7766ZM66.0244 19.8481C66.0244 18.533 66.0244 15.4536 67.691 15.4536C69.4859 15.4536 69.4218 18.5009 69.4218 19.9123C69.4218 21.2595 69.4218 24.5313 67.7551 24.5313C65.9603 24.4992 66.0244 21.2274 66.0244 19.8481ZM57.8195 26.7766C59.1976 26.7766 60.3835 26.2313 61.5053 25.0445L60.5117 23.1841C59.7425 24.018 58.9733 24.4671 58.0438 24.4671C57.2746 24.4671 56.6336 24.018 56.249 23.2482C55.9285 22.5746 55.8644 21.8048 55.8644 20.9708V20.7142H61.6335V20.1368C61.6335 17.282 61.2809 15.7102 60.3835 14.5234C59.7104 13.6253 58.7169 13.1441 57.499 13.1441C56.2169 13.1441 55.1593 13.7215 54.39 14.8442C53.5567 16.0631 53.2042 17.699 53.2042 19.9443C53.1721 24.2426 54.8708 26.7766 57.8195 26.7766ZM57.531 15.2612C58.172 15.2612 58.5566 15.614 58.813 16.1914C59.0053 16.7046 59.1015 17.5707 59.1015 18.5971H55.8644C55.8964 16.3197 56.3772 15.2612 57.531 15.2612ZM74.2614 26.4559H76.7614V16.8329C77.3703 16.0952 78.0754 15.6782 78.5882 15.6782C78.9087 15.6782 79.2292 15.7423 79.4215 15.9989C79.6138 16.2876 79.71 16.7046 79.71 17.699V26.4559H82.21V16.5442C82.21 15.6782 82.1138 14.8121 81.601 14.1706C81.1523 13.5932 80.4472 13.2404 79.5497 13.2404C78.3959 13.2404 77.2101 13.914 76.569 14.6838C76.537 14.0102 76.3126 13.3687 76.2485 13.1441L73.9089 13.7536C74.0371 14.4593 74.2294 15.3253 74.2294 16.8971V26.4559H74.2614ZM45.2236 14.6838C45.1915 14.0102 44.9672 13.3687 44.9031 13.1441L42.5634 13.7536C42.6916 14.4593 42.8839 15.3253 42.8839 16.8971V26.4238H45.3838V16.8008C45.9928 16.0631 46.6979 15.6461 47.2107 15.6461C47.5312 15.6461 47.8517 15.7102 48.044 15.9669C48.2363 16.2555 48.3325 16.6725 48.3325 17.6669V26.4238H50.8324V16.5442C50.8324 15.6782 50.7363 14.8121 50.2235 14.1706C49.7748 13.5932 49.0696 13.2404 48.1722 13.2404C47.0505 13.2404 45.8646 13.914 45.2236 14.6838ZM14.6473 9.07042C16.1216 9.07042 17.3075 7.88359 17.3075 6.40807C17.3075 4.93256 16.1216 3.74573 14.6473 3.74573C13.173 3.74573 11.9871 4.93256 11.9871 6.40807C11.9871 7.88359 13.173 9.07042 14.6473 9.07042ZM26.9227 26.4559V16.5442C26.9227 15.6782 26.8265 14.8121 26.3137 14.1706C25.865 13.5932 25.1599 13.2404 24.2625 13.2404C23.1087 13.2404 21.9228 13.914 21.2818 14.6838C21.2497 14.0102 21.0254 13.3687 20.9613 13.1441L18.6536 13.7857C18.7818 14.4913 18.9741 15.3574 18.9741 16.9291V26.4559H21.4741V16.8329C22.0831 16.0952 22.7882 15.6782 23.301 15.6782C23.6215 15.6782 23.942 15.7423 24.1343 15.9989C24.3266 16.2876 24.4227 16.7046 24.4227 17.699V26.4559H26.9227ZM38.4289 8.36474C37.4994 8.36474 36.7622 9.10249 36.7622 10.0327C36.7622 10.9629 37.4994 11.7007 38.3968 11.7007C39.3263 11.7007 40.0634 10.9629 40.0634 10.0327C40.0634 9.10249 39.3263 8.36474 38.4289 8.36474ZM13.4614 26.4559H15.9614V10.8346L13.4614 11.1554V26.4559ZM33.8777 9.90441C34.3264 9.90441 34.7751 10.0648 35.0635 10.2893L35.7687 8.33266C35.0956 7.85151 34.3584 7.62698 33.429 7.62698C32.788 7.62698 32.1149 7.78736 31.5059 8.26851C30.897 8.78173 30.256 9.80818 30.256 11.7328C30.256 12.5667 30.288 13.4328 30.288 13.4328H29.4226V15.6461H30.288V26.4238H32.8521V15.6782H34.743L35.2238 13.4649H32.8841V11.4762C32.8841 10.5139 33.2687 9.90441 33.8777 9.90441ZM37.1468 26.4559H39.6788V13.2404L37.1468 13.5611V26.4559Z",fill:"#005DA9"}),e("path",{key:"4bbeb4d4b52452876599ec765c86c688982e0135",d:"M77.0816 33.5126C68.6203 36.0146 58.3321 37.1052 48.2682 37.1052C22.7239 37.1052 6.24986 29.5993 5.09604 19.6877C4.67938 15.9668 7.59599 12.3422 12.4677 9.26285C11.6023 8.62132 11.0575 7.59488 11.0254 6.44012C3.97427 10.161 0 15.0366 0 19.9764C0 30.9145 19.5188 40.1525 48.5246 39.7676C58.6205 39.6393 67.0498 38.1958 74.6778 35.6939C83.7482 32.7428 89.4532 28.5087 90.8313 26.6483C89.1968 28.1238 85.3186 31.0748 77.0816 33.5126ZM23.2687 4.38723C24.9674 3.80985 27.3712 3.0721 27.3712 3.0721C34.1339 1.21166 41.6017 0.121063 48.5566 0.185215C40.544 -0.295931 33.2365 0.185215 26.8584 1.33997C26.8584 1.33997 24.743 1.69281 22.4675 2.27018C22.4675 2.27018 21.3777 2.55887 20.7047 2.75133C20.0316 2.94379 19.1021 3.2004 19.1021 3.2004C18.4611 3.39286 17.8201 3.6174 17.1791 3.84193C17.8201 4.48346 18.2047 5.31745 18.2368 6.27974C19.3586 5.76652 21.5059 4.99668 23.2687 4.38723Z",fill:"#E30034"})),e("defs",{key:"a21c6e635a75ec10293b6d4ae20c0b63019a7ae3"},e("clipPath",{key:"808d498e47e27301ebeefae6088eef8cd188e166",id:"clip0_2396_2480"},e("rect",{key:"e4b647305e1c65d22924b631f1fd89267991bb9d",width:"91",height:"40",fill:"white"})))))),this.applicationName&&e("h6",{key:"051e72d0294e76ce0fc46fa52144625606348261"},this.applicationName),this.applicationName&&this.hasLeftMenuItems&&e("div",{key:"d9d8abac7274a2cd685cd6ee294644ec187cd353",class:"navbar__container-left-logo-divider"})),e("div",{key:"60da89e82807afe1495b854f23e730882ee58775",class:"navbar__container-left-content"},e("div",{key:"b97703aac25e88e1dfa3e8478fc0008da7ecc557",class:"navbar__container-left-content-navigation-group"},e("slot",{key:"a84d5abfd6a5904c736daf6cb97e60f84d26ed55",name:"left-item"}),e("div",{key:"a528a27b4cb4847bd4944063c5c05b51b5464951",class:"navbar__container-left-content-navigation-item-search-bar"},e("slot",{key:"b1fd8e5c5f398b1887ba5f0564f61d7d7c7c9540",name:"search-bar-left"}))))),e("div",{key:"d6eada0f675a738b502a54f84f76a9f261a20162",class:`navbar__container-right ${this.searchBarIsOpen==="right"?"expand":this.searchBarIsOpen==="left"?"hide":""}`},e("div",{key:"597e544e174fbf772bc913d62146e94e2819e4ef",class:"navbar__container-right-content"},e("div",{key:"93073da2eeace451f54485d80ce6cc4ff7d860f4",class:"navbar__container-right-content-navigation-group"},e("div",{key:"b318061e7fc3eed2a48d9ed561a34fbe9fa219b4",class:"navbar__container-right-content-navigation-item-search-bar"},e("div",{key:"3ae72c1a698c54908aa36dad33e69904b3f694ba",class:`navbar__container-right-content-navigation-item-search-bar-icon-wrapper`},e("slot",{key:"e0b1e1d3c1826a6791be72b5f94c3c63096d7d09",name:"search-bar-right"}))),e("slot",{key:"472088e229f7e1efdaa9365dd22f3c90c993117e",name:"right-item"}))),e("div",{key:"3f461139243e7051faba0a2e2325b3ee4e47aae9",class:`navbar__burger-icon-wrapper`,onClick:this.handleSidebar.bind(this)},e("div",{key:"79ef37f1dd6bd65199393b53edd76389ae750703",class:"navbar__burger-icon"},e("ifx-icon",{key:"9e8b3a7f02edf04b7de6e0ce9f1499b09531be61",icon:"menu-right-24"})),e("div",{key:"b1cee846315a2b56c56575d3e3e3b9a332437b58",class:"navbar__cross-icon"},e("ifx-icon",{key:"653e0efaebf0876d8abd7d1842536e878453f09d",icon:"cross-24"})))))),e("div",{key:"24e5bcc782ad2cdacd90a4cbdbdb838da719b0b4",class:"navbar__sidebar"},e("div",{key:"c5fae7de1b034bd1402a1ed824a02933d84f824a",class:"navbar__sidebar-top-row"},e("div",{key:"f92770bbc53d630400da15d1515062dee1e6a6c2",class:"navbar__sidebar-top-row-wrapper"},e("slot",{key:"a372f9a7891ceec4acdf9265d00a46931e5ce9ca",name:"mobile-menu-top"}))),e("div",{key:"4633d96eadaaa64db872a26a7a6dd28d8206843c",class:"navbar__sidebar-bottom-row"},e("slot",{key:"e35ddb59ea50fbaa03e2e18319f0b9f948d4bf18",name:"mobile-menu-bottom",onSlotchange:n=>this.handleMobileMenuBottom(n)}))))}get el(){return t(this)}};o.style=i;export{o as ifx_navbar};
2
+ //# sourceMappingURL=p-f121e197.entry.js.map
package/dist/infineon-design-system-stencil/{p-85e4c1c2.entry.js.map → p-f121e197.entry.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"names":["navbarCss","IfxNavbarStyle0","Navbar","addEventListenersToHandleCustomFocusState","element","this","el","shadowRoot","firstChild","console","error","tabIndex","aElements","querySelectorAll","i","length","slot","querySelector","assignedNodes","node","nodeName","navbarItem","clearFirstLayerMenu","event","detail","action","leftMenuItems","getMobileMenuTop","isSameNode","component","hideComponent","parent","children","toggleFirstLayerItem","showComponent","getWrappers","searchBarRightWrapper","searchBarLeftWrapper","rightSideSlot","leftSideSlot","rightAssignedNodes","leftAssignedNodes","navbarProfile","rightMenuItems","topRowWrapper","hideNavItems","searchBarIsOpen","l","classList","contains","r","hideOnMobile","showNavItems","undefined","handleSearchBarToggle","toggleClass","className","toggle","handleSidebar","sidebarIconWrapper","currentTarget","closest","sidebarIconOpen","sidebarIconClose","mainContainer","navbarWrapper","sidebarWrapper","handleBodyScroll","body","fixed","style","overflow","handleDropdownMenu","dropdownWrapper","iconWrapper","setItemMenuPosition","navbarItems","itemChildren","forEach","item","setMenuItemPosition","setMenuItemChildrenPosition","hasNestedItems","setItemSideSpecifications","subItem","getMediaQueryList","mediaQueryList","window","matchMedia","componentDidLoad","matches","moveNavItemsToSidebar","handleMobileMenuBottom","e","mobileMenuBottomWrapper","slotElement","target","nodes","add","remove","handleLogoHrefAndTarget","logoHref","trim","internalLogoHref","includes","logoHrefTarget","internalLogoHrefTarget","componentWillLoad","RemoveSpaceOnStorybookSnippet","dropdownMenu","hasLeftMenuItems","addEventListener","getSearchBarLeftWrapper","getMobileMenuBottom","handleBurgerIcon","burgerIconWrapper","crossIcon","searchBarLeft","onNavbarMobile","setAttribute","moveChildComponentsIntoSubLayerMenu","tagName","toUpperCase","showLabel","toggleChildren","leftIsInitial","searchBarRight","moveChildComponentsBackIntoNavbar","navbarProfileItem","showProfileItemLabel","getAttribute","parentElement","storybookWrapper","render","h","key","class","showLogoAndAppname","href","width","height","viewBox","fill","xmlns","d","id","applicationName","name","onClick","bind","icon","onSlotchange"],"sources":["src/components/navigation/navbar/navbar.scss?tag=ifx-navbar&encapsulation=shadow","src/components/navigation/navbar/navbar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n width: 100%;\n display: block;\n}\n\n\n.navbar__wrapper {\n font-family: var(--ifx-font-family);\n height: 63px;\n position: sticky;\n //overflow: hidden;\n z-index: 1030;\n border-bottom: 1px solid #EEEDED;\n\n &.fixed {\n border-bottom: none;\n }\n\n // border-bottom: 1px solid #EEEDED; //when fixed is false\n}\n\n.navbar__main-container {\n position: absolute;\n top: 0;\n width: 100%;\n //overflow: hidden;\n transition: all 1s;\n z-index: 1020;\n\n &.fixed {\n position: fixed;\n\n & .navbar__container {\n border-bottom: 1px solid #EEEDED;\n }\n }\n\n &.show {\n height: 100vh;\n bottom: 0;\n background-color: tokens.$ifxColorOverlayDark;\n transition: 1s;\n z-index: 1;\n }\n}\n\n.navbar__sidebar {\n box-sizing: border-box;\n position: fixed;\n right: -100%;\n top: 64px;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n // padding: 32px;\n width: 375px;\n height: calc(100vh - 64px);\n background-color: tokens.$ifxColorBaseWhite;\n transition: right 1s;\n z-index: 1030;\n\n &.show {\n right: 0;\n transition: right 1s;\n }\n\n & .navbar__sidebar-top-row { \n display: flex;\n padding: var(--borderRadius-none, 0px) var(--space-300, 24px) 30px var(--space-300, 24px);\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-200, 16px);\n flex: 1 0 0;\n align-self: stretch;\n\n overflow-y: auto;\n\n & .navbar__sidebar-top-row-wrapper { \n display: flex;\n padding-top: var(--space-200, 16px);\n flex-direction: column;\n align-items: flex-start;\n align-self: stretch;\n gap: 16px;\n\n &.expand { \n align-items: initial;\n }\n\n & .navbar__sidebar-top-row-item { \n display: flex;\n padding: var(--space-200, 0px) var(--space-50, 4px) var(--space-200, 0px) 0px;\n align-items: center;\n gap: var(--space-100, 8px);\n align-self: stretch;\n justify-content: space-between;\n\n & .navbar__sidebar-top-row-item-icon-wrapper { \n & ifx-icon { \n vertical-align: middle;\n }\n }\n \n \n &:hover { \n cursor: pointer;\n }\n \n & .navbar__sidebar-top-row-item-label { \n color: var(--color-base-black, #1D1D1D);\n font-family: \"Source Sans 3\";\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px; \n }\n \n }\n }\n\n }\n\n & .navbar__sidebar-bottom-row { \n //display: flex;\n display: none;\n padding: var(--space-150, 12px) var(--space-300, 24px) var(--space-150, 12px) var(--space-200, 16px);\n flex-direction: column;\n align-items: flex-start;\n align-self: stretch;\n background: var(--color-engineering-100, #F7F7F7);\n border-top: 1px solid var(--color-engineering-200, #EEEDED);\n gap: 10px;\n\n max-height: 160px;\n overflow-y: auto;\n\n &.show { \n display: flex;\n }\n \n\n & .navbar__sidebar-bottom-row-item { \n display: flex;\n height: 40px;\n padding-right: var(--space-50, 4px);\n align-items: center;\n gap: var(--space-100, 8px);\n flex: 1 0 0;\n \n & .navbar__sidebar-bottom-row-item-label {\n color: var(--color-base-black, #1D1D1D);\n font-family: \"Source Sans 3\";\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px; \n }\n\n & .navbar__sidebar-bottom-row-item-icon-wrapper { \n display: flex;\n align-items: center;\n }\n }\n\n }\n\n\n & .navbar__sidebar-content-products,\n & .navbar__sidebar-content-main {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n gap: 24px;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n\n & .navbar__sidebar-content-products-header,\n & .navbar__sidebar-content-about-header {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: 16px;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n color: #BFBBBB;\n\n & span {\n color: tokens.$ifxColorBaseBlack;\n font-weight: 600;\n font-size: 18px;\n line-height: 28px;\n display: flex;\n align-items: center;\n }\n }\n\n & .navbar__sidebar-content-products-menu,\n & .navbar__sidebar-content-main-menu {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n gap: 16px;\n flex: none;\n order: 1;\n flex-grow: 0;\n width: 100%;\n\n & .navbar__sidebar-content-products-menu-item,\n & .navbar__sidebar-content-main-menu-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & a {\n text-decoration: none;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 24px;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n }\n }\n\n & .navbar__sidebar-content-main-menu-item {\n color: tokens.$ifxColorEngineering300;\n\n & a {\n font-style: normal;\n font-weight: 600;\n font-size: 18px;\n line-height: 28px;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 0;\n flex-grow: 1;\n }\n }\n }\n\n & .navbar__sidebar-content-main-menu {\n align-items: normal;\n }\n }\n}\n\n.navbar__container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 40px;\n gap: 16px;\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family);\n\n &.expanded { \n justify-content: initial;\n }\n\n // &.fixed { \n // border-bottom: 1px solid #EEEDED; //when fixed is true\n // }\n\n & .navbar__container-search-field-wrapper { \n display: none;\n\n &.show { \n display: flex;\n }\n }\n\n & .navbar__container-left {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0;\n gap: 16px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n &.hide {\n display: none;\n }\n\n &.expand { \n justify-content: initial;\n flex: 1;\n & .navbar__container-left-content { \n align-items: initial;\n flex: 1;\n & .navbar__container-left-content-navigation-group { \n justify-content: initial;\n flex: 1;\n & .navbar__container-left-content-navigation-item-search-bar { \n flex: 1;\n }\n }\n }\n \n }\n\n & .navbar__container-left-logo {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: 16px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n &.hide { \n display: none;\n }\n\n & h6 {\n position: relative;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 600;\n font-size: 16px;\n //line-height: 24px;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n }\n\n & .navbar__container-left-logo-default {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 12px 0px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & svg {\n width: 91px;\n height: 40px;\n flex: none;\n order: 0;\n flex-grow: 0;\n vertical-align: bottom;\n }\n }\n\n & .navbar__container-left-logo-divider {\n width: 1px;\n height: 32px;\n background: tokens.$ifxColorEngineering200;\n flex: none;\n order: 2;\n flex-grow: 0;\n }\n }\n\n & .navbar__container-left-content {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: flex-start;\n padding: 0px;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n & .navbar__container-left-content-navigation-group {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: 4px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .navbar__container-left-content-navigation-item-search-bar {\n display: flex; //none\n flex-direction: row;\n align-items: center;\n padding: 0px 8px;\n flex: none;\n order: 5;\n flex-grow: 0;\n //width: 256px;\n //height: 40px;\n }\n\n & .navbar__container-left-content-navigation-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px 8px;\n gap: 8px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & a {\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 16px;\n line-height: 24px;\n color: tokens.$ifxColorBaseBlack;\n text-decoration: none;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n }\n }\n }\n }\n\n & .navbar__container-right {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n padding: 0;\n gap: 8px;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.hide { \n display: none;\n }\n\n &.expand { \n justify-content: initial;\n flex: 1;\n & .navbar__container-right-content { \n align-items: initial;\n flex: 1;\n & .navbar__container-right-content-navigation-group { \n justify-content: initial;\n flex: 1;\n & .navbar__container-right-content-navigation-item-search-bar { \n flex: 1;\n & .navbar__container-right-content-navigation-item-search-bar-icon-wrapper { \n flex: 1;\n }\n }\n }\n }\n \n }\n\n & .navbar__burger-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 4px 0px 4px 16px;\n border-left: 1px solid tokens.$ifxColorEngineering300;\n gap: 16px;\n flex: none;\n order: 1;\n flex-grow: 0;\n width: 41px;\n height: 40px;\n\n &.hide { \n display: none;\n }\n\n & .navbar__burger-icon {\n display: flex;\n align-items: center;\n\n &:hover { \n cursor: pointer;\n }\n\n &.close {\n display: none;\n }\n }\n\n & .navbar__cross-icon {\n display: none;\n align-items: center;\n\n &.show {\n display: flex;\n\n &:hover { \n cursor: pointer;\n }\n }\n }\n }\n\n & .navbar__container-right-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .navbar__container-right-content-navigation-group {\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n padding: 0px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .navbar__container-right-content-navigation-item,\n & .navbar__container-right-content-navigation-item-profile,\n & .navbar__container-right-content-navigation-item-search-bar {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px 8px;\n gap: 4px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .navbar__container-right-content-navigation-item-search-bar-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px;\n gap: 8px;\n flex: none;\n order: 0;\n flex-grow: 0;\n //width: 24px;\n //height: 24px;\n //max-width: 200px;\n\n &.isOpen { \n position: absolute;\n top: 10px;\n }\n }\n\n & .navbar__container-right-content-navigation-item-navigation-profile {\n position: relative;\n width: 24px;\n height: 24px;\n background: tokens.$ifxColorOcean500;\n border-radius: 100px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & a {\n position: absolute;\n width: 22px;\n height: 20px;\n left: calc(50% - 22px/2);\n top: calc(50% - 20px/2);\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: 20px;\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n & .navbar__container-right-content-navigation-item-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px;\n gap: 8px;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n & a {\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: tokens.$ifxColorBaseBlack;\n text-decoration: none;\n display: flex;\n align-items: center;\n flex: none;\n order: 1;\n flex-grow: 0;\n }\n }\n }\n }\n }\n}\n\n//burger icon exist, and left container is gone\n@media screen and (max-width: 800px) {\n .navbar__container {\n padding: 0px 16px;\n height: 64px;\n gap: initial;\n\n &.expanded { \n & .navbar__container-right {\n & .navbar__burger-icon-wrapper {\n display: none;\n }\n }\n }\n\n & .navbar__container-left {\n & .navbar__container-left-content {\n display: none;\n }\n\n & .navbar__container-left-logo {\n & .navbar__container-left-logo-divider {\n display: none;\n }\n }\n }\n\n & .navbar__container-right {\n flex: 1;\n }\n }\n\n .navbar__sidebar {\n width: 0;\n transition: 1s;\n\n // &.show {\n // width: 100%;\n // }\n\n }\n}\n\n@media screen and (max-width: 500px) {\n .navbar__sidebar {\n &.show {\n width: 100%; // 100% of viewport width\n }\n }\n}\n\n@media screen and (min-width: 500px) {\n .navbar__sidebar {\n &.show {\n width: 50%; // 100% of viewport width\n }\n }\n}\n\n//burger icon disappears\n@media screen and (min-width: 800px) {\n .navbar__wrapper {\n height: 63px;\n }\n\n .navbar__container {\n padding: 0px 16px;\n height: 63px;\n gap: initial;\n\n & .navbar__container-right {\n & .navbar__burger-icon-wrapper {\n display: none;\n }\n }\n }\n\n .navbar__main-container {\n &.show {\n height: auto;\n background-color: inherit;\n transition: none;\n }\n }\n\n .navbar__sidebar {\n width: 0;\n transition: 1s;\n &.show { \n right: -100%;\n }\n }\n\n}\n\n//left container appears\n@media screen and (min-width: 1024px) {\n .navbar__wrapper {\n height: 72px;\n }\n\n .navbar__container {\n padding: 0px 24px;\n height: 72px;\n\n & .navbar__container-left {\n gap: 12px;\n display: flex;\n\n & .navbar__container-left-content {\n display: flex;\n }\n\n & .navbar__container-left-logo-default {\n & svg {\n width: 72.8px;\n height: 32px;\n }\n }\n }\n }\n\n .navbar__main-container {\n &.show {\n height: auto;\n background-color: inherit;\n transition: none;\n }\n }\n}\n\n@media screen and (min-width: 1200px) {\n .navbar__wrapper {\n height: 80px\n }\n\n .navbar__container {\n padding: 0px 32px;\n height: 80px;\n\n & .navbar__container-left {\n & .navbar__container-left-content {\n justify-content: inherit;\n }\n }\n\n & .navbar__container-right {\n & .navbar__container-right-content {\n justify-content: inherit;\n }\n }\n }\n}\n\n@media screen and (min-width: 1440px) {\n .navbar__wrapper {\n height: 80px;\n }\n\n .navbar__container {\n padding: 0px 40px;\n height: 80px;\n\n & .navbar__container-left {\n & .navbar__container-left-content {\n justify-content: center;\n }\n }\n\n & .navbar__container-right {\n & .navbar__container-right-content {\n justify-content: inherit;\n }\n }\n }\n}","import { Component, h, Element, State, Prop, Listen, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-navbar',\n styleUrl: 'navbar.scss',\n shadow: true,\n})\n\nexport class Navbar {\n @Element() el;\n @State() main: boolean = true\n @State() products: boolean = false\n @State() applications: boolean = false\n @State() design: boolean = false\n @State() support: boolean = false\n @State() about: boolean = false\n @Prop() applicationName: string = \"\"\n @State() hasLeftMenuItems: boolean = true;\n @Prop() fixed: boolean = true;\n @Prop() showLogoAndAppname: boolean = true;\n @State() searchBarIsOpen: string;\n @Prop() logoHref: string = \"\";\n @State() internalLogoHref: string = \"\"\n @Prop() logoHrefTarget: string = '_self';\n @State() internalLogoHrefTarget: string = '_self';\n @Event() ifxNavbarMobileMenuIsOpen: EventEmitter;\n\n private addEventListenersToHandleCustomFocusState() {\n const element = this.el.shadowRoot.firstChild;\n\n if (!element) {\n console.error('element not found');\n return;\n }\n element.tabIndex = -1;\n\n // Select all a elements in the navbar and set their tabIndex to -1 to make them non-focusable\n const aElements = element.querySelectorAll('a');\n for (let i = 0; i < aElements.length; i++) {\n aElements[i].tabIndex = -1;\n }\n\n const slot = element.querySelector('slot');\n if (slot) {\n const assignedNodes = slot.assignedNodes();\n for (let i = 0; i < assignedNodes.length; i++) {\n const node = assignedNodes[i] as HTMLElement;\n if (node.nodeName === 'IFX-NAVBAR-ITEM') {\n const navbarItem = node as HTMLIfxNavbarItemElement;\n\n // Get all navigation items\n const aElements = navbarItem?.shadowRoot.querySelectorAll('a');\n for (let i = 0; i < aElements.length; i++) {\n aElements[i].tabIndex = -1;\n }\n }\n }\n }\n }\n\n @Listen('ifxNavItem') \n clearFirstLayerMenu(event: CustomEvent) { \n if(event.detail.action === 'hideFirstLayer') { \n const leftMenuItems = this.getMobileMenuTop()\n for(let i = 0; i < leftMenuItems.length; i++) { \n if(!leftMenuItems[i].isSameNode(event.detail.component)) {\n leftMenuItems[i].hideComponent()\n }\n }\n }\n\n if(event.detail.action === 'hideSecondLayer') { \n const parent = event.detail.parent;\n const children = parent.children;\n parent.toggleFirstLayerItem('remove', 'add')\n for(let i = 0; i < children.length; i++) { \n if(!children[i].isSameNode(event.detail.component)) {\n children[i].hideComponent()\n }\n }\n }\n\n if(event.detail.action === 'returnToSecondLayer') { \n const parent = event.detail.parent;\n const children = parent.children;\n parent.toggleFirstLayerItem('add', 'remove')\n for(let i = 0; i < children.length; i++) { \n if(!children[i].isSameNode(event.detail.component)) {\n children[i].showComponent()\n }\n }\n }\n\n if(event.detail.action === 'show') { \n const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]')\n for(let i = 0; i < leftMenuItems.length; i++) { \n if(!leftMenuItems[i].isSameNode(event.detail.component)) {\n leftMenuItems[i].showComponent()\n }\n }\n }\n\n if(event.detail.action === 'return') { \n const leftMenuItems = this.getMobileMenuTop()\n for(let i = 0; i < leftMenuItems.length; i++) { \n if(!leftMenuItems[i].isSameNode(event.detail.component)) {\n leftMenuItems[i].showComponent()\n }\n }\n }\n }\n\n getWrappers() {\n const searchBarRightWrapper = this.el.shadowRoot.querySelector('.navbar__container-right-content-navigation-item-search-bar-icon-wrapper')\n const searchBarLeftWrapper = this.el.shadowRoot.querySelector('.navbar__container-left-content-navigation-item-search-bar')\n const rightSideSlot = searchBarRightWrapper.querySelector('slot');\n const leftSideSlot = searchBarLeftWrapper.querySelector('slot');\n const rightAssignedNodes = rightSideSlot.assignedNodes();\n const leftAssignedNodes = leftSideSlot.assignedNodes();\n const navbarProfile = this.el.querySelector('ifx-navbar-profile');\n const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]');\n const rightMenuItems = this.el.querySelectorAll('[slot=\"right-item\"]');\n const topRowWrapper = this.el.shadowRoot.querySelector('.navbar__sidebar-top-row-wrapper')\n \n return {rightSideSlot, leftSideSlot, rightAssignedNodes, leftAssignedNodes, navbarProfile, leftMenuItems, rightMenuItems, topRowWrapper};\n }\n\n hideNavItems() {\n const { rightAssignedNodes, leftAssignedNodes, navbarProfile, leftMenuItems, rightMenuItems, topRowWrapper } = this.getWrappers();\n \n if(rightAssignedNodes.length !== 0) { \n this.searchBarIsOpen = 'right'\n } else if(leftAssignedNodes.length !== 0) {\n this.searchBarIsOpen = 'left'\n }\n\n if(navbarProfile) { \n navbarProfile.hideComponent()\n }\n \n for(let l = 0; l < leftMenuItems.length; l++) { \n if(!topRowWrapper.classList.contains('expand')) {\n leftMenuItems[l].hideComponent()\n }\n }\n \n for(let r = 0; r < rightMenuItems.length; r++) { \n if(topRowWrapper.classList.contains('expand')) {\n if(!rightMenuItems[r].hideOnMobile) { \n rightMenuItems[r].hideComponent()\n }\n } else { \n rightMenuItems[r].hideComponent()\n }\n }\n }\n\n showNavItems() {\n const { navbarProfile, leftMenuItems, rightMenuItems, topRowWrapper } = this.getWrappers();\n this.searchBarIsOpen = undefined;\n \n if(navbarProfile) {\n navbarProfile.showComponent()\n }\n \n for(let l = 0; l < leftMenuItems.length; l++) { \n if(!topRowWrapper.classList.contains('expand')) {\n leftMenuItems[l].showComponent()\n }\n }\n \n for(let r = 0; r < rightMenuItems.length; r++) { \n if(topRowWrapper.classList.contains('expand')) {\n if(!rightMenuItems[r].hideOnMobile) { \n rightMenuItems[r].showComponent()\n }\n } else { \n rightMenuItems[r].showComponent()\n }\n }\n }\n \n \n @Listen('ifxSearchBarIsOpen')\n handleSearchBarToggle(event: CustomEvent) {\n \n if(event.detail) { \n this.hideNavItems();\n } else if(!event.detail) {\n this.showNavItems();\n }\n }\n\n toggleClass(el, className) {\n el.classList.toggle(className)\n }\n\n handleSidebar(el) {\n const sidebarIconWrapper = el.currentTarget.closest('.navbar__burger-icon-wrapper');\n const sidebarIconOpen = sidebarIconWrapper.querySelector('.navbar__burger-icon')\n const sidebarIconClose = sidebarIconWrapper.querySelector('.navbar__cross-icon')\n const mainContainer = el.currentTarget.closest('.navbar__main-container');\n const navbarWrapper = el.currentTarget.closest('.navbar__wrapper')\n const sidebarWrapper = navbarWrapper.querySelector('.navbar__sidebar');\n this.toggleClass(navbarWrapper, 'show')\n this.toggleClass(mainContainer, 'show')\n this.toggleClass(sidebarWrapper, 'show')\n this.toggleClass(sidebarIconOpen, 'close')\n this.toggleClass(sidebarIconClose, 'show')\n\n if(sidebarIconClose.classList.contains('show')) { \n this.handleBodyScroll('hide')\n } else { \n this.handleBodyScroll('show')\n }\n }\n\n handleBodyScroll(action) { \n const body = this.el.closest('body')\n if(!this.fixed && action === 'hide') { \n body.style.overflow = 'hidden'\n } else if(action === 'show') { \n body.style.overflow = 'visible'\n }\n }\n\n handleDropdownMenu(el) {\n const dropdownWrapper = el.currentTarget.querySelector('.navbar__dropdown-wrapper')\n dropdownWrapper.classList.toggle('open')\n const iconWrapper = el.currentTarget.querySelector('a')\n iconWrapper.classList.toggle('open')\n }\n\n async setItemMenuPosition() { \n const navbarItems = this.el.querySelectorAll('ifx-navbar-item')\n const navbarProfile = this.el.querySelector('ifx-navbar-profile')\n\n if(navbarProfile) {\n const itemChildren = navbarProfile.querySelectorAll('ifx-navbar-item')\n if (itemChildren.length !== 0) {\n itemChildren.forEach(item => { \n item.setMenuItemPosition()\n this.setMenuItemChildrenPosition(item)\n })\n }\n }\n \n if(navbarItems.length !== 0) { \n for(let i = 0; i < navbarItems.length; i++) { \n const item = navbarItems[i];\n const itemChildren = item.querySelectorAll('ifx-navbar-item')\n if (itemChildren.length !== 0) {\n const hasNestedItems = await item.setItemSideSpecifications()\n if(hasNestedItems) { \n itemChildren.forEach(item => { \n item.setMenuItemPosition()\n this.setMenuItemChildrenPosition(item)\n })\n }\n }\n }\n }\n }\n\n setMenuItemChildrenPosition(item) {\n const itemChildren = item.querySelectorAll('ifx-navbar-item');\n if (itemChildren.length !== 0) {\n itemChildren.forEach(subItem => { \n subItem.setMenuItemPosition()\n this.setMenuItemChildrenPosition(subItem)\n })\n }\n }\n\n getMediaQueryList() { \n const mediaQueryList = window.matchMedia('(max-width: 800px)');\n return mediaQueryList;\n }\n\n componentDidLoad() {\n this.setItemMenuPosition()\n this.addEventListenersToHandleCustomFocusState();\n\n const mediaQueryList = this.getMediaQueryList()\n\n if (mediaQueryList.matches) {\n this.moveNavItemsToSidebar();\n }\n\n }\n\n handleMobileMenuBottom(e) { \n const mobileMenuBottomWrapper = this.el.shadowRoot.querySelector('.navbar__sidebar-bottom-row')\n const slotElement = e.target;\n const nodes = slotElement.assignedNodes();\n if(nodes.length > 0) { \n mobileMenuBottomWrapper.classList.add('show')\n } else { \n mobileMenuBottomWrapper.classList.remove('show')\n }\n }\n\n handleLogoHrefAndTarget(){\n if(this.logoHref.trim() === \"\") {\n this.internalLogoHref = undefined;\n }else{\n this.internalLogoHref = this.logoHref;\n }\n\n if(['_self', '_blank', '_parent'].includes(this.logoHrefTarget.trim())){\n this.internalLogoHrefTarget = this.logoHrefTarget;\n }else{\n this.internalLogoHrefTarget = '_self';\n }\n }\n\n \n componentWillLoad() {\n this.RemoveSpaceOnStorybookSnippet()\n const dropdownMenu = this.el.querySelector('ifx-navbar-menu')\n const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]')\n if (!leftMenuItems.length && !dropdownMenu) {\n this.hasLeftMenuItems = false;\n }\n this.handleLogoHrefAndTarget();\n\n const mediaQueryList = window.matchMedia('(max-width: 800px)');\n mediaQueryList.addEventListener('change', (e) => this.moveNavItemsToSidebar(e));\n }\n\n \n\n getSearchBarLeftWrapper() { \n const searchBarLeftWrapper = this.el.shadowRoot.querySelector('.navbar__container-left-content-navigation-item-search-bar')\n return searchBarLeftWrapper;\n }\n\n getMobileMenuTop() { \n const leftMenuItems = this.el.querySelectorAll('[slot=\"mobile-menu-top\"]');\n return leftMenuItems;\n }\n\n getMobileMenuBottom() { \n const rightMenuItems = this.el.querySelectorAll('[slot=\"mobile-menu-bottom\"]');\n return rightMenuItems;\n }\n\n handleBurgerIcon() { \n const leftMenuItems = this.getMobileMenuTop()\n const rightMenuItems = this.getMobileMenuBottom()\n if(!leftMenuItems.length && !rightMenuItems.length) { \n const burgerIconWrapper = this.el.shadowRoot.querySelector('.navbar__burger-icon-wrapper')\n this.toggleClass(burgerIconWrapper, 'hide')\n }\n }\n \n moveNavItemsToSidebar(e?: MediaQueryListEvent) {\n const topRowWrapper = this.el.shadowRoot.querySelector('.navbar__sidebar-top-row-wrapper')\n const mediaQueryList = this.getMediaQueryList();\n const matches = e ? e.matches : mediaQueryList.matches;\n \n if (matches) {\n /* The viewport is 800px wide or less */\n topRowWrapper.classList.add('expand')\n \n //hide body scroll if sidebar was opened\n const crossIcon = this.el.shadowRoot.querySelector('.navbar__cross-icon')\n if(crossIcon.classList.contains('show')) { \n this.handleBodyScroll('hide')\n }\n \n //move search bar to right-side\n const searchBarLeft = this.el.querySelector('[slot=\"search-bar-left\"]')\n if(searchBarLeft) { \n if(this.searchBarIsOpen) { \n searchBarLeft.onNavbarMobile()\n }\n const searchBarLeftWrapper = this.getSearchBarLeftWrapper()\n searchBarLeftWrapper.classList.add('initial')\n searchBarLeft.setAttribute('slot', 'search-bar-right')\n }\n \n //left-side\n const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]')\n for(let i = 0; i < leftMenuItems.length; i++) { \n leftMenuItems[i].setAttribute('slot', 'mobile-menu-top')\n leftMenuItems[i].moveChildComponentsIntoSubLayerMenu()\n if(this.searchBarIsOpen) { \n leftMenuItems[i].showComponent()\n }\n }\n \n //right-side\n const rightMenuItems = this.el.querySelectorAll('[slot=\"right-item\"]')\n for(let i = 0; i < rightMenuItems.length; i++) { \n if(rightMenuItems[i].tagName.toUpperCase() === 'IFX-NAVBAR-PROFILE') { \n rightMenuItems[i].showLabel = false;\n } else { \n if(rightMenuItems[i].hideOnMobile) { \n rightMenuItems[i].setAttribute('slot', 'mobile-menu-bottom')\n \n rightMenuItems[i].toggleChildren('add')\n \n rightMenuItems[i].showLabel = true;\n if(this.searchBarIsOpen) { \n rightMenuItems[i].showComponent()\n }\n }\n }\n }\n \n this.handleBurgerIcon()\n\n } else {\n /* The viewport is more than 800px wide */\n topRowWrapper.classList.remove('expand')\n\n //show body scroll \n this.handleBodyScroll('show')\n\n //return search bar to its original position\n const searchBarLeftWrapper = this.getSearchBarLeftWrapper()\n const leftIsInitial = searchBarLeftWrapper.classList.contains('initial')\n const searchBarRight = this.el.querySelector('[slot=\"search-bar-right\"]')\n if(leftIsInitial) { \n if(this.searchBarIsOpen) { \n searchBarRight.onNavbarMobile()\n }\n searchBarRight.setAttribute('slot', 'search-bar-left')\n }\n\n //left-side\n const leftMenuItems = this.getMobileMenuTop()\n for(let i = 0; i < leftMenuItems.length; i++) { \n leftMenuItems[i].setAttribute('slot', 'left-item')\n leftMenuItems[i].moveChildComponentsBackIntoNavbar()\n }\n\n //right-side\n const rightMenuItems = this.getMobileMenuBottom()\n const navbarProfileItem = this.el.querySelector('ifx-navbar-profile')\n if(navbarProfileItem) { \n const showProfileItemLabel = navbarProfileItem.getAttribute('show-label');\n navbarProfileItem.setAttribute('show-label', showProfileItemLabel)\n }\n\n for(let i = 0; i < rightMenuItems.length; i++) { \n rightMenuItems[i].setAttribute('slot', 'right-item')\n\n rightMenuItems[i].toggleChildren('remove')\n \n const showLabel = rightMenuItems[i].getAttribute('show-label');\n rightMenuItems[i].setAttribute('show-label', showLabel)\n if(this.searchBarIsOpen) { \n rightMenuItems[i].hideComponent()\n }\n }\n }\n }\n\n RemoveSpaceOnStorybookSnippet() { \n let parent = this.el.parentElement;\n if(parent) { \n let storybookWrapper = parent.closest('.css-xzp052');\n if(storybookWrapper) { \n storybookWrapper.style.overflow = 'visible'\n }\n }\n }\n\n\n \n render() {\n return (\n <div aria-label='a navigation navbar' class={`navbar__wrapper ${this.fixed ? 'fixed' : \"\"}`}>\n <div class={`navbar__main-container ${this.fixed ? 'fixed' : \"\"}`}>\n <div class={`navbar__container ${this.searchBarIsOpen ? \"expanded\" : \"\"}`}>\n <div class={`navbar__container-left ${this.searchBarIsOpen === 'left' ? \"expand\" : this.searchBarIsOpen === 'right' ? 'hide' : \"\"}`}>\n {this.showLogoAndAppname &&\n <div class={`navbar__container-left-logo ${this.searchBarIsOpen === 'left' ? 'hide' : \"\"}`}>\n <div class=\"navbar__container-left-logo-default\">\n <a href={this.internalLogoHref} target = {this.internalLogoHrefTarget}>\n <svg width=\"91\" height=\"40\" viewBox=\"0 0 91 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_2396_2480)\">\n <path d=\"M67.691 26.7766C71.0884 26.7766 72.1461 23.1841 72.1461 19.8802C72.1461 15.4536 70.2871 13.1441 67.691 13.1441C64.4219 13.1441 63.2681 16.7367 63.3001 19.9443C63.3322 23.1199 64.2296 26.7766 67.691 26.7766ZM66.0244 19.8481C66.0244 18.533 66.0244 15.4536 67.691 15.4536C69.4859 15.4536 69.4218 18.5009 69.4218 19.9123C69.4218 21.2595 69.4218 24.5313 67.7551 24.5313C65.9603 24.4992 66.0244 21.2274 66.0244 19.8481ZM57.8195 26.7766C59.1976 26.7766 60.3835 26.2313 61.5053 25.0445L60.5117 23.1841C59.7425 24.018 58.9733 24.4671 58.0438 24.4671C57.2746 24.4671 56.6336 24.018 56.249 23.2482C55.9285 22.5746 55.8644 21.8048 55.8644 20.9708V20.7142H61.6335V20.1368C61.6335 17.282 61.2809 15.7102 60.3835 14.5234C59.7104 13.6253 58.7169 13.1441 57.499 13.1441C56.2169 13.1441 55.1593 13.7215 54.39 14.8442C53.5567 16.0631 53.2042 17.699 53.2042 19.9443C53.1721 24.2426 54.8708 26.7766 57.8195 26.7766ZM57.531 15.2612C58.172 15.2612 58.5566 15.614 58.813 16.1914C59.0053 16.7046 59.1015 17.5707 59.1015 18.5971H55.8644C55.8964 16.3197 56.3772 15.2612 57.531 15.2612ZM74.2614 26.4559H76.7614V16.8329C77.3703 16.0952 78.0754 15.6782 78.5882 15.6782C78.9087 15.6782 79.2292 15.7423 79.4215 15.9989C79.6138 16.2876 79.71 16.7046 79.71 17.699V26.4559H82.21V16.5442C82.21 15.6782 82.1138 14.8121 81.601 14.1706C81.1523 13.5932 80.4472 13.2404 79.5497 13.2404C78.3959 13.2404 77.2101 13.914 76.569 14.6838C76.537 14.0102 76.3126 13.3687 76.2485 13.1441L73.9089 13.7536C74.0371 14.4593 74.2294 15.3253 74.2294 16.8971V26.4559H74.2614ZM45.2236 14.6838C45.1915 14.0102 44.9672 13.3687 44.9031 13.1441L42.5634 13.7536C42.6916 14.4593 42.8839 15.3253 42.8839 16.8971V26.4238H45.3838V16.8008C45.9928 16.0631 46.6979 15.6461 47.2107 15.6461C47.5312 15.6461 47.8517 15.7102 48.044 15.9669C48.2363 16.2555 48.3325 16.6725 48.3325 17.6669V26.4238H50.8324V16.5442C50.8324 15.6782 50.7363 14.8121 50.2235 14.1706C49.7748 13.5932 49.0696 13.2404 48.1722 13.2404C47.0505 13.2404 45.8646 13.914 45.2236 14.6838ZM14.6473 9.07042C16.1216 9.07042 17.3075 7.88359 17.3075 6.40807C17.3075 4.93256 16.1216 3.74573 14.6473 3.74573C13.173 3.74573 11.9871 4.93256 11.9871 6.40807C11.9871 7.88359 13.173 9.07042 14.6473 9.07042ZM26.9227 26.4559V16.5442C26.9227 15.6782 26.8265 14.8121 26.3137 14.1706C25.865 13.5932 25.1599 13.2404 24.2625 13.2404C23.1087 13.2404 21.9228 13.914 21.2818 14.6838C21.2497 14.0102 21.0254 13.3687 20.9613 13.1441L18.6536 13.7857C18.7818 14.4913 18.9741 15.3574 18.9741 16.9291V26.4559H21.4741V16.8329C22.0831 16.0952 22.7882 15.6782 23.301 15.6782C23.6215 15.6782 23.942 15.7423 24.1343 15.9989C24.3266 16.2876 24.4227 16.7046 24.4227 17.699V26.4559H26.9227ZM38.4289 8.36474C37.4994 8.36474 36.7622 9.10249 36.7622 10.0327C36.7622 10.9629 37.4994 11.7007 38.3968 11.7007C39.3263 11.7007 40.0634 10.9629 40.0634 10.0327C40.0634 9.10249 39.3263 8.36474 38.4289 8.36474ZM13.4614 26.4559H15.9614V10.8346L13.4614 11.1554V26.4559ZM33.8777 9.90441C34.3264 9.90441 34.7751 10.0648 35.0635 10.2893L35.7687 8.33266C35.0956 7.85151 34.3584 7.62698 33.429 7.62698C32.788 7.62698 32.1149 7.78736 31.5059 8.26851C30.897 8.78173 30.256 9.80818 30.256 11.7328C30.256 12.5667 30.288 13.4328 30.288 13.4328H29.4226V15.6461H30.288V26.4238H32.8521V15.6782H34.743L35.2238 13.4649H32.8841V11.4762C32.8841 10.5139 33.2687 9.90441 33.8777 9.90441ZM37.1468 26.4559H39.6788V13.2404L37.1468 13.5611V26.4559Z\" fill=\"#005DA9\" />\n <path d=\"M77.0816 33.5126C68.6203 36.0146 58.3321 37.1052 48.2682 37.1052C22.7239 37.1052 6.24986 29.5993 5.09604 19.6877C4.67938 15.9668 7.59599 12.3422 12.4677 9.26285C11.6023 8.62132 11.0575 7.59488 11.0254 6.44012C3.97427 10.161 0 15.0366 0 19.9764C0 30.9145 19.5188 40.1525 48.5246 39.7676C58.6205 39.6393 67.0498 38.1958 74.6778 35.6939C83.7482 32.7428 89.4532 28.5087 90.8313 26.6483C89.1968 28.1238 85.3186 31.0748 77.0816 33.5126ZM23.2687 4.38723C24.9674 3.80985 27.3712 3.0721 27.3712 3.0721C34.1339 1.21166 41.6017 0.121063 48.5566 0.185215C40.544 -0.295931 33.2365 0.185215 26.8584 1.33997C26.8584 1.33997 24.743 1.69281 22.4675 2.27018C22.4675 2.27018 21.3777 2.55887 20.7047 2.75133C20.0316 2.94379 19.1021 3.2004 19.1021 3.2004C18.4611 3.39286 17.8201 3.6174 17.1791 3.84193C17.8201 4.48346 18.2047 5.31745 18.2368 6.27974C19.3586 5.76652 21.5059 4.99668 23.2687 4.38723Z\" fill=\"#E30034\" />\n </g>\n <defs>\n <clipPath id=\"clip0_2396_2480\">\n <rect width=\"91\" height=\"40\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </a>\n </div>\n {this.applicationName && <h6>{this.applicationName}</h6>}\n {this.applicationName && this.hasLeftMenuItems &&\n <div class=\"navbar__container-left-logo-divider\"></div>}\n </div>}\n <div class=\"navbar__container-left-content\">\n <div class=\"navbar__container-left-content-navigation-group\">\n <slot name='left-item' />\n <div class=\"navbar__container-left-content-navigation-item-search-bar\">\n <slot name='search-bar-left' />\n </div>\n </div>\n </div>\n </div>\n <div class={`navbar__container-right ${this.searchBarIsOpen === 'right' ? \"expand\" : this.searchBarIsOpen === 'left' ? 'hide' : \"\"}`}>\n <div class=\"navbar__container-right-content\">\n <div class=\"navbar__container-right-content-navigation-group\">\n <div class=\"navbar__container-right-content-navigation-item-search-bar\">\n <div class={`navbar__container-right-content-navigation-item-search-bar-icon-wrapper`}>\n <slot name='search-bar-right' />\n </div>\n </div>\n <slot name='right-item' />\n </div>\n </div>\n\n {/* MOBILE MENU BUTTON */}\n <div class={`navbar__burger-icon-wrapper`} onClick={this.handleSidebar.bind(this)}>\n <div class=\"navbar__burger-icon\">\n <ifx-icon icon=\"menu-right-24\"></ifx-icon>\n </div>\n <div class=\"navbar__cross-icon\">\n <ifx-icon icon=\"cross-24\"></ifx-icon>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n {/* SIDEBAR */}\n <div class=\"navbar__sidebar\">\n {/* left side ifx-navbar-item */}\n <div class=\"navbar__sidebar-top-row\">\n <div class=\"navbar__sidebar-top-row-wrapper\">\n <slot name='mobile-menu-top' />\n </div>\n </div>\n\n {/* right side ifx-navbar-item */}\n <div class=\"navbar__sidebar-bottom-row\">\n <slot name='mobile-menu-bottom' onSlotchange={(e) => this.handleMobileMenuBottom(e)} />\n </div>\n \n </div>\n </div>\n );\n }\n}"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["navbarCss","IfxNavbarStyle0","Navbar","addEventListenersToHandleCustomFocusState","element","this","el","shadowRoot","firstChild","console","error","tabIndex","aElements","querySelectorAll","i","length","slot","querySelector","assignedNodes","node","nodeName","navbarItem","clearFirstLayerMenu","event","detail","action","leftMenuItems","getMobileMenuTop","isSameNode","component","hideComponent","parent","children","toggleFirstLayerItem","showComponent","getWrappers","searchBarRightWrapper","searchBarLeftWrapper","rightSideSlot","leftSideSlot","rightAssignedNodes","leftAssignedNodes","navbarProfile","rightMenuItems","topRowWrapper","hideNavItems","searchBarIsOpen","l","classList","contains","r","hideOnMobile","showNavItems","undefined","handleSearchBarToggle","toggleClass","className","toggle","handleSidebar","sidebarIconWrapper","currentTarget","closest","sidebarIconOpen","sidebarIconClose","mainContainer","navbarWrapper","sidebarWrapper","handleBodyScroll","body","fixed","style","overflow","handleDropdownMenu","dropdownWrapper","iconWrapper","setItemMenuPosition","navbarItems","itemChildren","forEach","item","setMenuItemPosition","setMenuItemChildrenPosition","hasNestedItems","setItemSideSpecifications","subItem","getMediaQueryList","mediaQueryList","window","matchMedia","componentDidLoad","matches","moveNavItemsToSidebar","handleMobileMenuBottom","e","mobileMenuBottomWrapper","slotElement","target","nodes","add","remove","handleLogoHrefAndTarget","logoHref","trim","internalLogoHref","includes","logoHrefTarget","internalLogoHrefTarget","componentWillLoad","RemoveSpaceOnStorybookSnippet","dropdownMenu","hasLeftMenuItems","addEventListener","getSearchBarLeftWrapper","getMobileMenuBottom","handleBurgerIcon","burgerIconWrapper","crossIcon","searchBarLeft","onNavbarMobile","setAttribute","moveChildComponentsIntoSubLayerMenu","tagName","toUpperCase","showLabel","toggleChildren","leftIsInitial","searchBarRight","moveChildComponentsBackIntoNavbar","navbarProfileItem","showProfileItemLabel","getAttribute","parentElement","storybookWrapper","render","h","key","class","showLogoAndAppname","href","width","height","viewBox","fill","xmlns","d","id","applicationName","name","onClick","bind","icon","onSlotchange"],"sources":["src/components/navigation/navbar/navbar.scss?tag=ifx-navbar&encapsulation=shadow","src/components/navigation/navbar/navbar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n width: 100%;\n display: block;\n}\n\n\n.navbar__wrapper {\n font-family: var(--ifx-font-family);\n height: 63px;\n position: sticky;\n //overflow: hidden;\n z-index: 1030;\n border-bottom: 1px solid #EEEDED;\n\n &.fixed {\n border-bottom: none;\n }\n\n // border-bottom: 1px solid #EEEDED; //when fixed is false\n}\n\n.navbar__main-container {\n position: absolute;\n top: 0;\n width: 100%;\n //overflow: hidden;\n transition: all 1s;\n z-index: 1020;\n\n &.fixed {\n position: fixed;\n\n & .navbar__container {\n border-bottom: 1px solid #EEEDED;\n }\n }\n\n &.show {\n height: 100vh;\n bottom: 0;\n background-color: tokens.$ifxColorOverlayDark;\n transition: 1s;\n z-index: 1;\n }\n}\n\n.navbar__sidebar {\n box-sizing: border-box;\n position: fixed;\n right: -100%;\n top: 64px;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n // padding: 32px;\n width: 375px;\n height: calc(100vh - 64px);\n background-color: tokens.$ifxColorBaseWhite;\n transition: right 1s;\n z-index: 1030;\n\n &.show {\n right: 0;\n transition: right 1s;\n }\n\n & .navbar__sidebar-top-row { \n display: flex;\n padding: var(--borderRadius-none, 0px) var(--space-300, 24px) 30px var(--space-300, 24px);\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-200, 16px);\n flex: 1 0 0;\n align-self: stretch;\n\n overflow-y: auto;\n\n & .navbar__sidebar-top-row-wrapper { \n display: flex;\n padding-top: var(--space-200, 16px);\n flex-direction: column;\n align-items: flex-start;\n align-self: stretch;\n gap: 16px;\n\n &.expand { \n align-items: initial;\n }\n\n & .navbar__sidebar-top-row-item { \n display: flex;\n padding: var(--space-200, 0px) var(--space-50, 4px) var(--space-200, 0px) 0px;\n align-items: center;\n gap: var(--space-100, 8px);\n align-self: stretch;\n justify-content: space-between;\n\n & .navbar__sidebar-top-row-item-icon-wrapper { \n & ifx-icon { \n vertical-align: middle;\n }\n }\n \n \n &:hover { \n cursor: pointer;\n }\n \n & .navbar__sidebar-top-row-item-label { \n color: var(--color-base-black, #1D1D1D);\n font-family: \"Source Sans 3\";\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px; \n }\n \n }\n }\n\n }\n\n & .navbar__sidebar-bottom-row { \n //display: flex;\n display: none;\n padding: var(--space-150, 12px) var(--space-300, 24px) var(--space-150, 12px) var(--space-200, 16px);\n flex-direction: column;\n align-items: flex-start;\n align-self: stretch;\n background: var(--color-engineering-100, #F7F7F7);\n border-top: 1px solid var(--color-engineering-200, #EEEDED);\n gap: 10px;\n\n max-height: 160px;\n overflow-y: auto;\n\n &.show { \n display: flex;\n }\n \n\n & .navbar__sidebar-bottom-row-item { \n display: flex;\n height: 40px;\n padding-right: var(--space-50, 4px);\n align-items: center;\n gap: var(--space-100, 8px);\n flex: 1 0 0;\n \n & .navbar__sidebar-bottom-row-item-label {\n color: var(--color-base-black, #1D1D1D);\n font-family: \"Source Sans 3\";\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px; \n }\n\n & .navbar__sidebar-bottom-row-item-icon-wrapper { \n display: flex;\n align-items: center;\n }\n }\n\n }\n\n\n & .navbar__sidebar-content-products,\n & .navbar__sidebar-content-main {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n gap: 24px;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n\n & .navbar__sidebar-content-products-header,\n & .navbar__sidebar-content-about-header {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: 16px;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n color: #BFBBBB;\n\n & span {\n color: tokens.$ifxColorBaseBlack;\n font-weight: 600;\n font-size: 18px;\n line-height: 28px;\n display: flex;\n align-items: center;\n }\n }\n\n & .navbar__sidebar-content-products-menu,\n & .navbar__sidebar-content-main-menu {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n gap: 16px;\n flex: none;\n order: 1;\n flex-grow: 0;\n width: 100%;\n\n & .navbar__sidebar-content-products-menu-item,\n & .navbar__sidebar-content-main-menu-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & a {\n text-decoration: none;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 24px;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n }\n }\n\n & .navbar__sidebar-content-main-menu-item {\n color: tokens.$ifxColorEngineering300;\n\n & a {\n font-style: normal;\n font-weight: 600;\n font-size: 18px;\n line-height: 28px;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 0;\n flex-grow: 1;\n }\n }\n }\n\n & .navbar__sidebar-content-main-menu {\n align-items: normal;\n }\n }\n}\n\n.navbar__container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 40px;\n gap: 16px;\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family);\n\n &.expanded { \n justify-content: initial;\n }\n\n // &.fixed { \n // border-bottom: 1px solid #EEEDED; //when fixed is true\n // }\n\n & .navbar__container-search-field-wrapper { \n display: none;\n\n &.show { \n display: flex;\n }\n }\n\n & .navbar__container-left {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0;\n gap: 16px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n &.hide {\n display: none;\n }\n\n &.expand { \n justify-content: initial;\n flex: 1;\n & .navbar__container-left-content { \n align-items: initial;\n flex: 1;\n & .navbar__container-left-content-navigation-group { \n justify-content: initial;\n flex: 1;\n & .navbar__container-left-content-navigation-item-search-bar { \n flex: 1;\n }\n }\n }\n \n }\n\n & .navbar__container-left-logo {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: 16px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n &.hide { \n display: none;\n }\n\n & h6 {\n position: relative;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 600;\n font-size: 16px;\n //line-height: 24px;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n }\n\n & .navbar__container-left-logo-default {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 12px 0px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & svg {\n width: 91px;\n height: 40px;\n flex: none;\n order: 0;\n flex-grow: 0;\n vertical-align: bottom;\n }\n }\n\n & .navbar__container-left-logo-divider {\n width: 1px;\n height: 32px;\n background: tokens.$ifxColorEngineering200;\n flex: none;\n order: 2;\n flex-grow: 0;\n }\n }\n\n & .navbar__container-left-content {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: flex-start;\n padding: 0px;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n & .navbar__container-left-content-navigation-group {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: 4px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .navbar__container-left-content-navigation-item-search-bar {\n display: flex; //none\n flex-direction: row;\n align-items: center;\n padding: 0px 8px;\n flex: none;\n order: 5;\n flex-grow: 0;\n //width: 256px;\n //height: 40px;\n }\n\n & .navbar__container-left-content-navigation-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px 8px;\n gap: 8px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & a {\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 16px;\n line-height: 24px;\n color: tokens.$ifxColorBaseBlack;\n text-decoration: none;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n }\n }\n }\n }\n\n & .navbar__container-right {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n padding: 0;\n gap: 8px;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.hide { \n display: none;\n }\n\n &.expand { \n justify-content: initial;\n flex: 1;\n & .navbar__container-right-content { \n align-items: initial;\n flex: 1;\n & .navbar__container-right-content-navigation-group { \n justify-content: initial;\n flex: 1;\n & .navbar__container-right-content-navigation-item-search-bar { \n flex: 1;\n & .navbar__container-right-content-navigation-item-search-bar-icon-wrapper { \n flex: 1;\n }\n }\n }\n }\n \n }\n\n & .navbar__burger-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 4px 0px 4px 16px;\n border-left: 1px solid tokens.$ifxColorEngineering300;\n gap: 16px;\n flex: none;\n order: 1;\n flex-grow: 0;\n width: 41px;\n height: 40px;\n\n &.hide { \n display: none;\n }\n\n & .navbar__burger-icon {\n display: flex;\n align-items: center;\n\n &:hover { \n cursor: pointer;\n }\n\n &.close {\n display: none;\n }\n }\n\n & .navbar__cross-icon {\n display: none;\n align-items: center;\n\n &.show {\n display: flex;\n\n &:hover { \n cursor: pointer;\n }\n }\n }\n }\n\n & .navbar__container-right-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .navbar__container-right-content-navigation-group {\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n padding: 0px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .navbar__container-right-content-navigation-item,\n & .navbar__container-right-content-navigation-item-profile,\n & .navbar__container-right-content-navigation-item-search-bar {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px 8px;\n gap: 4px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .navbar__container-right-content-navigation-item-search-bar-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px;\n gap: 8px;\n flex: none;\n order: 0;\n flex-grow: 0;\n //width: 24px;\n //height: 24px;\n //max-width: 200px;\n\n &.isOpen { \n position: absolute;\n top: 10px;\n }\n }\n\n & .navbar__container-right-content-navigation-item-navigation-profile {\n position: relative;\n width: 24px;\n height: 24px;\n background: tokens.$ifxColorOcean500;\n border-radius: 100px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & a {\n position: absolute;\n width: 22px;\n height: 20px;\n left: calc(50% - 22px/2);\n top: calc(50% - 20px/2);\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: 20px;\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n & .navbar__container-right-content-navigation-item-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px;\n gap: 8px;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n & a {\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: tokens.$ifxColorBaseBlack;\n text-decoration: none;\n display: flex;\n align-items: center;\n flex: none;\n order: 1;\n flex-grow: 0;\n }\n }\n }\n }\n }\n}\n\n//burger icon exist, and left container is gone\n@media screen and (max-width: 800px) {\n .navbar__container {\n padding: 0px 16px;\n height: 64px;\n gap: initial;\n\n &.expanded { \n & .navbar__container-right {\n & .navbar__burger-icon-wrapper {\n display: none;\n }\n }\n }\n\n & .navbar__container-left {\n & .navbar__container-left-content {\n display: none;\n }\n\n & .navbar__container-left-logo {\n & .navbar__container-left-logo-divider {\n display: none;\n }\n }\n }\n\n & .navbar__container-right {\n flex: 1;\n }\n }\n\n .navbar__sidebar {\n width: 0;\n transition: 1s;\n\n // &.show {\n // width: 100%;\n // }\n\n }\n}\n\n@media screen and (max-width: 500px) {\n .navbar__sidebar {\n &.show {\n width: 100%; // 100% of viewport width\n }\n }\n}\n\n@media screen and (min-width: 500px) {\n .navbar__sidebar {\n &.show {\n width: 50%; // 100% of viewport width\n }\n }\n}\n\n//burger icon disappears\n@media screen and (min-width: 800px) {\n .navbar__wrapper {\n height: 63px;\n }\n\n .navbar__container {\n padding: 0px 16px;\n height: 63px;\n gap: initial;\n\n & .navbar__container-right {\n & .navbar__burger-icon-wrapper {\n display: none;\n }\n }\n }\n\n .navbar__main-container {\n &.show {\n height: auto;\n background-color: inherit;\n transition: none;\n }\n }\n\n .navbar__sidebar {\n width: 0;\n transition: 1s;\n &.show { \n right: -100%;\n }\n }\n\n}\n\n//left container appears\n@media screen and (min-width: 1024px) {\n .navbar__wrapper {\n height: 72px;\n }\n\n .navbar__container {\n padding: 0px 24px;\n height: 72px;\n\n & .navbar__container-left {\n gap: 12px;\n display: flex;\n\n & .navbar__container-left-content {\n display: flex;\n }\n\n & .navbar__container-left-logo-default {\n & svg {\n width: 72.8px;\n height: 32px;\n }\n }\n }\n }\n\n .navbar__main-container {\n &.show {\n height: auto;\n background-color: inherit;\n transition: none;\n }\n }\n}\n\n@media screen and (min-width: 1200px) {\n .navbar__wrapper {\n height: 80px\n }\n\n .navbar__container {\n padding: 0px 32px;\n height: 80px;\n\n & .navbar__container-left {\n & .navbar__container-left-content {\n justify-content: inherit;\n }\n }\n\n & .navbar__container-right {\n & .navbar__container-right-content {\n justify-content: inherit;\n }\n }\n }\n}\n\n@media screen and (min-width: 1440px) {\n .navbar__wrapper {\n height: 80px;\n }\n\n .navbar__container {\n padding: 0px 40px;\n height: 80px;\n\n & .navbar__container-left {\n & .navbar__container-left-content {\n justify-content: center;\n }\n }\n\n & .navbar__container-right {\n & .navbar__container-right-content {\n justify-content: inherit;\n }\n }\n }\n}","import { Component, h, Element, State, Prop, Listen, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-navbar',\n styleUrl: 'navbar.scss',\n shadow: true,\n})\n\nexport class Navbar {\n @Element() el;\n @State() main: boolean = true\n @State() products: boolean = false\n @State() applications: boolean = false\n @State() design: boolean = false\n @State() support: boolean = false\n @State() about: boolean = false\n @Prop() applicationName: string = \"\"\n @State() hasLeftMenuItems: boolean = true;\n @Prop() fixed: boolean = true;\n @Prop() showLogoAndAppname: boolean = true;\n @State() searchBarIsOpen: string;\n @Prop() logoHref: string = \"\";\n @State() internalLogoHref: string = \"\"\n @Prop() logoHrefTarget: string = '_self';\n @State() internalLogoHrefTarget: string = '_self';\n @Event() ifxNavbarMobileMenuIsOpen: EventEmitter;\n\n private addEventListenersToHandleCustomFocusState() {\n const element = this.el.shadowRoot.firstChild;\n\n if (!element) {\n console.error('element not found');\n return;\n }\n element.tabIndex = -1;\n\n // Select all a elements in the navbar and set their tabIndex to -1 to make them non-focusable\n const aElements = element.querySelectorAll('a');\n for (let i = 0; i < aElements.length; i++) {\n aElements[i].tabIndex = -1;\n }\n\n const slot = element.querySelector('slot');\n if (slot) {\n const assignedNodes = slot.assignedNodes();\n for (let i = 0; i < assignedNodes.length; i++) {\n const node = assignedNodes[i] as HTMLElement;\n if (node.nodeName === 'IFX-NAVBAR-ITEM') {\n const navbarItem = node as HTMLIfxNavbarItemElement;\n\n // Get all navigation items\n const aElements = navbarItem?.shadowRoot.querySelectorAll('a');\n for (let i = 0; i < aElements.length; i++) {\n aElements[i].tabIndex = -1;\n }\n }\n }\n }\n }\n\n @Listen('ifxNavItem') \n clearFirstLayerMenu(event: CustomEvent) { \n if(event.detail.action === 'hideFirstLayer') { \n const leftMenuItems = this.getMobileMenuTop()\n for(let i = 0; i < leftMenuItems.length; i++) { \n if(!leftMenuItems[i].isSameNode(event.detail.component)) {\n leftMenuItems[i].hideComponent()\n }\n }\n }\n\n if(event.detail.action === 'hideSecondLayer') { \n const parent = event.detail.parent;\n const children = parent.children;\n parent.toggleFirstLayerItem('remove', 'add')\n for(let i = 0; i < children.length; i++) { \n if(!children[i].isSameNode(event.detail.component)) {\n children[i].hideComponent()\n }\n }\n }\n\n if(event.detail.action === 'returnToSecondLayer') { \n const parent = event.detail.parent;\n const children = parent.children;\n parent.toggleFirstLayerItem('add', 'remove')\n for(let i = 0; i < children.length; i++) { \n if(!children[i].isSameNode(event.detail.component)) {\n children[i].showComponent()\n }\n }\n }\n\n if(event.detail.action === 'show') { \n const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]')\n for(let i = 0; i < leftMenuItems.length; i++) { \n if(!leftMenuItems[i].isSameNode(event.detail.component)) {\n leftMenuItems[i].showComponent()\n }\n }\n }\n\n if(event.detail.action === 'return') { \n const leftMenuItems = this.getMobileMenuTop()\n for(let i = 0; i < leftMenuItems.length; i++) { \n if(!leftMenuItems[i].isSameNode(event.detail.component)) {\n leftMenuItems[i].showComponent()\n }\n }\n }\n }\n\n getWrappers() {\n const searchBarRightWrapper = this.el.shadowRoot.querySelector('.navbar__container-right-content-navigation-item-search-bar-icon-wrapper')\n const searchBarLeftWrapper = this.el.shadowRoot.querySelector('.navbar__container-left-content-navigation-item-search-bar')\n const rightSideSlot = searchBarRightWrapper.querySelector('slot');\n const leftSideSlot = searchBarLeftWrapper.querySelector('slot');\n const rightAssignedNodes = rightSideSlot.assignedNodes();\n const leftAssignedNodes = leftSideSlot.assignedNodes();\n const navbarProfile = this.el.querySelector('ifx-navbar-profile');\n const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]');\n const rightMenuItems = this.el.querySelectorAll('[slot=\"right-item\"]');\n const topRowWrapper = this.el.shadowRoot.querySelector('.navbar__sidebar-top-row-wrapper')\n \n return {rightSideSlot, leftSideSlot, rightAssignedNodes, leftAssignedNodes, navbarProfile, leftMenuItems, rightMenuItems, topRowWrapper};\n }\n\n hideNavItems() {\n const { rightAssignedNodes, leftAssignedNodes, navbarProfile, leftMenuItems, rightMenuItems, topRowWrapper } = this.getWrappers();\n \n if(rightAssignedNodes.length !== 0) { \n this.searchBarIsOpen = 'right'\n } else if(leftAssignedNodes.length !== 0) {\n this.searchBarIsOpen = 'left'\n }\n\n if(navbarProfile) { \n navbarProfile.hideComponent()\n }\n \n for(let l = 0; l < leftMenuItems.length; l++) { \n if(!topRowWrapper.classList.contains('expand')) {\n leftMenuItems[l].hideComponent()\n }\n }\n \n for(let r = 0; r < rightMenuItems.length; r++) { \n if(topRowWrapper.classList.contains('expand')) {\n if(!rightMenuItems[r].hideOnMobile) { \n rightMenuItems[r].hideComponent()\n }\n } else { \n rightMenuItems[r].hideComponent()\n }\n }\n }\n\n showNavItems() {\n const { navbarProfile, leftMenuItems, rightMenuItems, topRowWrapper } = this.getWrappers();\n this.searchBarIsOpen = undefined;\n \n if(navbarProfile) {\n navbarProfile.showComponent()\n }\n \n for(let l = 0; l < leftMenuItems.length; l++) { \n if(!topRowWrapper.classList.contains('expand')) {\n leftMenuItems[l].showComponent()\n }\n }\n \n for(let r = 0; r < rightMenuItems.length; r++) { \n if(topRowWrapper.classList.contains('expand')) {\n if(!rightMenuItems[r].hideOnMobile) { \n rightMenuItems[r].showComponent()\n }\n } else { \n rightMenuItems[r].showComponent()\n }\n }\n }\n \n \n @Listen('ifxSearchBarIsOpen')\n handleSearchBarToggle(event: CustomEvent) {\n \n if(event.detail) { \n this.hideNavItems();\n } else if(!event.detail) {\n this.showNavItems();\n }\n }\n\n toggleClass(el, className) {\n el.classList.toggle(className)\n }\n\n handleSidebar(el) {\n const sidebarIconWrapper = el.currentTarget.closest('.navbar__burger-icon-wrapper');\n const sidebarIconOpen = sidebarIconWrapper.querySelector('.navbar__burger-icon')\n const sidebarIconClose = sidebarIconWrapper.querySelector('.navbar__cross-icon')\n const mainContainer = el.currentTarget.closest('.navbar__main-container');\n const navbarWrapper = el.currentTarget.closest('.navbar__wrapper')\n const sidebarWrapper = navbarWrapper.querySelector('.navbar__sidebar');\n this.toggleClass(navbarWrapper, 'show')\n this.toggleClass(mainContainer, 'show')\n this.toggleClass(sidebarWrapper, 'show')\n this.toggleClass(sidebarIconOpen, 'close')\n this.toggleClass(sidebarIconClose, 'show')\n\n if(sidebarIconClose.classList.contains('show')) { \n this.handleBodyScroll('hide')\n } else { \n this.handleBodyScroll('show')\n }\n }\n\n handleBodyScroll(action) { \n const body = this.el.closest('body')\n if(!this.fixed && action === 'hide') { \n body.style.overflow = 'hidden'\n } else if(action === 'show') { \n body.style.overflow = 'visible'\n }\n }\n\n handleDropdownMenu(el) {\n const dropdownWrapper = el.currentTarget.querySelector('.navbar__dropdown-wrapper')\n dropdownWrapper.classList.toggle('open')\n const iconWrapper = el.currentTarget.querySelector('a')\n iconWrapper.classList.toggle('open')\n }\n\n async setItemMenuPosition() { \n const navbarItems = this.el.querySelectorAll('ifx-navbar-item')\n const navbarProfile = this.el.querySelector('ifx-navbar-profile')\n\n if(navbarProfile) {\n const itemChildren = navbarProfile.querySelectorAll('ifx-navbar-item')\n if (itemChildren.length !== 0) {\n itemChildren.forEach(item => { \n item.setMenuItemPosition()\n this.setMenuItemChildrenPosition(item)\n })\n }\n }\n \n if(navbarItems.length !== 0) { \n for(let i = 0; i < navbarItems.length; i++) { \n const item = navbarItems[i];\n const itemChildren = item.querySelectorAll('ifx-navbar-item')\n if (itemChildren.length !== 0) {\n const hasNestedItems = await item.setItemSideSpecifications()\n if(hasNestedItems) { \n itemChildren.forEach(item => { \n item.setMenuItemPosition()\n this.setMenuItemChildrenPosition(item)\n })\n }\n }\n }\n }\n }\n\n setMenuItemChildrenPosition(item) {\n const itemChildren = item.querySelectorAll('ifx-navbar-item');\n if (itemChildren.length !== 0) {\n itemChildren.forEach(subItem => { \n subItem.setMenuItemPosition()\n this.setMenuItemChildrenPosition(subItem)\n })\n }\n }\n\n getMediaQueryList() { \n const mediaQueryList = window.matchMedia('(max-width: 800px)');\n return mediaQueryList;\n }\n\n componentDidLoad() {\n this.setItemMenuPosition()\n this.addEventListenersToHandleCustomFocusState();\n\n const mediaQueryList = this.getMediaQueryList()\n\n if (mediaQueryList.matches) {\n this.moveNavItemsToSidebar();\n }\n\n }\n\n handleMobileMenuBottom(e) { \n const mobileMenuBottomWrapper = this.el.shadowRoot.querySelector('.navbar__sidebar-bottom-row')\n const slotElement = e.target;\n const nodes = slotElement.assignedNodes();\n if(nodes.length > 0) { \n mobileMenuBottomWrapper.classList.add('show')\n } else { \n mobileMenuBottomWrapper.classList.remove('show')\n }\n }\n\n handleLogoHrefAndTarget(){\n if(this.logoHref.trim() === \"\") {\n this.internalLogoHref = undefined;\n }else{\n this.internalLogoHref = this.logoHref;\n }\n\n if(['_self', '_blank', '_parent'].includes(this.logoHrefTarget.trim())){\n this.internalLogoHrefTarget = this.logoHrefTarget;\n }else{\n this.internalLogoHrefTarget = '_self';\n }\n }\n\n \n componentWillLoad() {\n this.RemoveSpaceOnStorybookSnippet()\n const dropdownMenu = this.el.querySelector('ifx-navbar-menu')\n const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]')\n if (!leftMenuItems.length && !dropdownMenu) {\n this.hasLeftMenuItems = false;\n }\n this.handleLogoHrefAndTarget();\n\n const mediaQueryList = window.matchMedia('(max-width: 800px)');\n mediaQueryList.addEventListener('change', (e) => this.moveNavItemsToSidebar(e));\n }\n\n \n\n getSearchBarLeftWrapper() { \n const searchBarLeftWrapper = this.el.shadowRoot.querySelector('.navbar__container-left-content-navigation-item-search-bar')\n return searchBarLeftWrapper;\n }\n\n getMobileMenuTop() { \n const leftMenuItems = this.el.querySelectorAll('[slot=\"mobile-menu-top\"]');\n return leftMenuItems;\n }\n\n getMobileMenuBottom() { \n const rightMenuItems = this.el.querySelectorAll('[slot=\"mobile-menu-bottom\"]');\n return rightMenuItems;\n }\n\n handleBurgerIcon() { \n const leftMenuItems = this.getMobileMenuTop()\n const rightMenuItems = this.getMobileMenuBottom()\n if(!leftMenuItems.length && !rightMenuItems.length) { \n const burgerIconWrapper = this.el.shadowRoot.querySelector('.navbar__burger-icon-wrapper')\n this.toggleClass(burgerIconWrapper, 'hide')\n }\n }\n \n moveNavItemsToSidebar(e?: MediaQueryListEvent) {\n const topRowWrapper = this.el.shadowRoot.querySelector('.navbar__sidebar-top-row-wrapper')\n const mediaQueryList = this.getMediaQueryList();\n const matches = e ? e.matches : mediaQueryList.matches;\n \n if (matches) {\n /* The viewport is 800px wide or less */\n topRowWrapper.classList.add('expand')\n \n //hide body scroll if sidebar was opened\n const crossIcon = this.el.shadowRoot.querySelector('.navbar__cross-icon')\n if(crossIcon.classList.contains('show')) { \n this.handleBodyScroll('hide')\n }\n \n //move search bar to right-side\n const searchBarLeft = this.el.querySelector('[slot=\"search-bar-left\"]')\n if(searchBarLeft) { \n if(this.searchBarIsOpen) { \n searchBarLeft.onNavbarMobile()\n }\n const searchBarLeftWrapper = this.getSearchBarLeftWrapper()\n searchBarLeftWrapper.classList.add('initial')\n searchBarLeft.setAttribute('slot', 'search-bar-right')\n }\n \n //left-side\n const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]')\n for(let i = 0; i < leftMenuItems.length; i++) { \n leftMenuItems[i].setAttribute('slot', 'mobile-menu-top')\n leftMenuItems[i].moveChildComponentsIntoSubLayerMenu()\n if(this.searchBarIsOpen) { \n leftMenuItems[i].showComponent()\n }\n }\n \n //right-side\n const rightMenuItems = this.el.querySelectorAll('[slot=\"right-item\"]')\n for(let i = 0; i < rightMenuItems.length; i++) { \n if(rightMenuItems[i].tagName.toUpperCase() === 'IFX-NAVBAR-PROFILE') { \n rightMenuItems[i].showLabel = false;\n } else { \n if(rightMenuItems[i].hideOnMobile) { \n rightMenuItems[i].setAttribute('slot', 'mobile-menu-bottom')\n \n rightMenuItems[i].toggleChildren('add')\n \n rightMenuItems[i].showLabel = true;\n if(this.searchBarIsOpen) { \n rightMenuItems[i].showComponent()\n }\n }\n }\n }\n \n this.handleBurgerIcon()\n\n } else {\n /* The viewport is more than 800px wide */\n topRowWrapper.classList.remove('expand')\n\n //show body scroll \n this.handleBodyScroll('show')\n\n //return search bar to its original position\n const searchBarLeftWrapper = this.getSearchBarLeftWrapper()\n const leftIsInitial = searchBarLeftWrapper.classList.contains('initial')\n const searchBarRight = this.el.querySelector('[slot=\"search-bar-right\"]')\n if(leftIsInitial) { \n if(this.searchBarIsOpen) { \n searchBarRight.onNavbarMobile()\n }\n if(searchBarRight) { \n searchBarRight.setAttribute('slot', 'search-bar-left')\n }\n }\n\n //left-side\n const leftMenuItems = this.getMobileMenuTop()\n for(let i = 0; i < leftMenuItems.length; i++) { \n leftMenuItems[i].setAttribute('slot', 'left-item')\n leftMenuItems[i].moveChildComponentsBackIntoNavbar()\n }\n\n //right-side\n const rightMenuItems = this.getMobileMenuBottom()\n const navbarProfileItem = this.el.querySelector('ifx-navbar-profile')\n if(navbarProfileItem) { \n const showProfileItemLabel = navbarProfileItem.getAttribute('show-label');\n navbarProfileItem.setAttribute('show-label', showProfileItemLabel)\n }\n\n for(let i = 0; i < rightMenuItems.length; i++) { \n rightMenuItems[i].setAttribute('slot', 'right-item')\n\n rightMenuItems[i].toggleChildren('remove')\n \n const showLabel = rightMenuItems[i].getAttribute('show-label');\n rightMenuItems[i].setAttribute('show-label', showLabel)\n if(this.searchBarIsOpen) { \n rightMenuItems[i].hideComponent()\n }\n }\n }\n }\n\n RemoveSpaceOnStorybookSnippet() { \n let parent = this.el.parentElement;\n if(parent) { \n let storybookWrapper = parent.closest('.css-xzp052');\n if(storybookWrapper) { \n storybookWrapper.style.overflow = 'visible'\n }\n }\n }\n\n\n \n render() {\n return (\n <div aria-label='a navigation navbar' class={`navbar__wrapper ${this.fixed ? 'fixed' : \"\"}`}>\n <div class={`navbar__main-container ${this.fixed ? 'fixed' : \"\"}`}>\n <div class={`navbar__container ${this.searchBarIsOpen ? \"expanded\" : \"\"}`}>\n <div class={`navbar__container-left ${this.searchBarIsOpen === 'left' ? \"expand\" : this.searchBarIsOpen === 'right' ? 'hide' : \"\"}`}>\n {this.showLogoAndAppname &&\n <div class={`navbar__container-left-logo ${this.searchBarIsOpen === 'left' ? 'hide' : \"\"}`}>\n <div class=\"navbar__container-left-logo-default\">\n <a href={this.internalLogoHref} target = {this.internalLogoHrefTarget}>\n <svg width=\"91\" height=\"40\" viewBox=\"0 0 91 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_2396_2480)\">\n <path d=\"M67.691 26.7766C71.0884 26.7766 72.1461 23.1841 72.1461 19.8802C72.1461 15.4536 70.2871 13.1441 67.691 13.1441C64.4219 13.1441 63.2681 16.7367 63.3001 19.9443C63.3322 23.1199 64.2296 26.7766 67.691 26.7766ZM66.0244 19.8481C66.0244 18.533 66.0244 15.4536 67.691 15.4536C69.4859 15.4536 69.4218 18.5009 69.4218 19.9123C69.4218 21.2595 69.4218 24.5313 67.7551 24.5313C65.9603 24.4992 66.0244 21.2274 66.0244 19.8481ZM57.8195 26.7766C59.1976 26.7766 60.3835 26.2313 61.5053 25.0445L60.5117 23.1841C59.7425 24.018 58.9733 24.4671 58.0438 24.4671C57.2746 24.4671 56.6336 24.018 56.249 23.2482C55.9285 22.5746 55.8644 21.8048 55.8644 20.9708V20.7142H61.6335V20.1368C61.6335 17.282 61.2809 15.7102 60.3835 14.5234C59.7104 13.6253 58.7169 13.1441 57.499 13.1441C56.2169 13.1441 55.1593 13.7215 54.39 14.8442C53.5567 16.0631 53.2042 17.699 53.2042 19.9443C53.1721 24.2426 54.8708 26.7766 57.8195 26.7766ZM57.531 15.2612C58.172 15.2612 58.5566 15.614 58.813 16.1914C59.0053 16.7046 59.1015 17.5707 59.1015 18.5971H55.8644C55.8964 16.3197 56.3772 15.2612 57.531 15.2612ZM74.2614 26.4559H76.7614V16.8329C77.3703 16.0952 78.0754 15.6782 78.5882 15.6782C78.9087 15.6782 79.2292 15.7423 79.4215 15.9989C79.6138 16.2876 79.71 16.7046 79.71 17.699V26.4559H82.21V16.5442C82.21 15.6782 82.1138 14.8121 81.601 14.1706C81.1523 13.5932 80.4472 13.2404 79.5497 13.2404C78.3959 13.2404 77.2101 13.914 76.569 14.6838C76.537 14.0102 76.3126 13.3687 76.2485 13.1441L73.9089 13.7536C74.0371 14.4593 74.2294 15.3253 74.2294 16.8971V26.4559H74.2614ZM45.2236 14.6838C45.1915 14.0102 44.9672 13.3687 44.9031 13.1441L42.5634 13.7536C42.6916 14.4593 42.8839 15.3253 42.8839 16.8971V26.4238H45.3838V16.8008C45.9928 16.0631 46.6979 15.6461 47.2107 15.6461C47.5312 15.6461 47.8517 15.7102 48.044 15.9669C48.2363 16.2555 48.3325 16.6725 48.3325 17.6669V26.4238H50.8324V16.5442C50.8324 15.6782 50.7363 14.8121 50.2235 14.1706C49.7748 13.5932 49.0696 13.2404 48.1722 13.2404C47.0505 13.2404 45.8646 13.914 45.2236 14.6838ZM14.6473 9.07042C16.1216 9.07042 17.3075 7.88359 17.3075 6.40807C17.3075 4.93256 16.1216 3.74573 14.6473 3.74573C13.173 3.74573 11.9871 4.93256 11.9871 6.40807C11.9871 7.88359 13.173 9.07042 14.6473 9.07042ZM26.9227 26.4559V16.5442C26.9227 15.6782 26.8265 14.8121 26.3137 14.1706C25.865 13.5932 25.1599 13.2404 24.2625 13.2404C23.1087 13.2404 21.9228 13.914 21.2818 14.6838C21.2497 14.0102 21.0254 13.3687 20.9613 13.1441L18.6536 13.7857C18.7818 14.4913 18.9741 15.3574 18.9741 16.9291V26.4559H21.4741V16.8329C22.0831 16.0952 22.7882 15.6782 23.301 15.6782C23.6215 15.6782 23.942 15.7423 24.1343 15.9989C24.3266 16.2876 24.4227 16.7046 24.4227 17.699V26.4559H26.9227ZM38.4289 8.36474C37.4994 8.36474 36.7622 9.10249 36.7622 10.0327C36.7622 10.9629 37.4994 11.7007 38.3968 11.7007C39.3263 11.7007 40.0634 10.9629 40.0634 10.0327C40.0634 9.10249 39.3263 8.36474 38.4289 8.36474ZM13.4614 26.4559H15.9614V10.8346L13.4614 11.1554V26.4559ZM33.8777 9.90441C34.3264 9.90441 34.7751 10.0648 35.0635 10.2893L35.7687 8.33266C35.0956 7.85151 34.3584 7.62698 33.429 7.62698C32.788 7.62698 32.1149 7.78736 31.5059 8.26851C30.897 8.78173 30.256 9.80818 30.256 11.7328C30.256 12.5667 30.288 13.4328 30.288 13.4328H29.4226V15.6461H30.288V26.4238H32.8521V15.6782H34.743L35.2238 13.4649H32.8841V11.4762C32.8841 10.5139 33.2687 9.90441 33.8777 9.90441ZM37.1468 26.4559H39.6788V13.2404L37.1468 13.5611V26.4559Z\" fill=\"#005DA9\" />\n <path d=\"M77.0816 33.5126C68.6203 36.0146 58.3321 37.1052 48.2682 37.1052C22.7239 37.1052 6.24986 29.5993 5.09604 19.6877C4.67938 15.9668 7.59599 12.3422 12.4677 9.26285C11.6023 8.62132 11.0575 7.59488 11.0254 6.44012C3.97427 10.161 0 15.0366 0 19.9764C0 30.9145 19.5188 40.1525 48.5246 39.7676C58.6205 39.6393 67.0498 38.1958 74.6778 35.6939C83.7482 32.7428 89.4532 28.5087 90.8313 26.6483C89.1968 28.1238 85.3186 31.0748 77.0816 33.5126ZM23.2687 4.38723C24.9674 3.80985 27.3712 3.0721 27.3712 3.0721C34.1339 1.21166 41.6017 0.121063 48.5566 0.185215C40.544 -0.295931 33.2365 0.185215 26.8584 1.33997C26.8584 1.33997 24.743 1.69281 22.4675 2.27018C22.4675 2.27018 21.3777 2.55887 20.7047 2.75133C20.0316 2.94379 19.1021 3.2004 19.1021 3.2004C18.4611 3.39286 17.8201 3.6174 17.1791 3.84193C17.8201 4.48346 18.2047 5.31745 18.2368 6.27974C19.3586 5.76652 21.5059 4.99668 23.2687 4.38723Z\" fill=\"#E30034\" />\n </g>\n <defs>\n <clipPath id=\"clip0_2396_2480\">\n <rect width=\"91\" height=\"40\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </a>\n </div>\n {this.applicationName && <h6>{this.applicationName}</h6>}\n {this.applicationName && this.hasLeftMenuItems &&\n <div class=\"navbar__container-left-logo-divider\"></div>}\n </div>}\n <div class=\"navbar__container-left-content\">\n <div class=\"navbar__container-left-content-navigation-group\">\n <slot name='left-item' />\n <div class=\"navbar__container-left-content-navigation-item-search-bar\">\n <slot name='search-bar-left' />\n </div>\n </div>\n </div>\n </div>\n <div class={`navbar__container-right ${this.searchBarIsOpen === 'right' ? \"expand\" : this.searchBarIsOpen === 'left' ? 'hide' : \"\"}`}>\n <div class=\"navbar__container-right-content\">\n <div class=\"navbar__container-right-content-navigation-group\">\n <div class=\"navbar__container-right-content-navigation-item-search-bar\">\n <div class={`navbar__container-right-content-navigation-item-search-bar-icon-wrapper`}>\n <slot name='search-bar-right' />\n </div>\n </div>\n <slot name='right-item' />\n </div>\n </div>\n\n {/* MOBILE MENU BUTTON */}\n <div class={`navbar__burger-icon-wrapper`} onClick={this.handleSidebar.bind(this)}>\n <div class=\"navbar__burger-icon\">\n <ifx-icon icon=\"menu-right-24\"></ifx-icon>\n </div>\n <div class=\"navbar__cross-icon\">\n <ifx-icon icon=\"cross-24\"></ifx-icon>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n {/* SIDEBAR */}\n <div class=\"navbar__sidebar\">\n {/* left side ifx-navbar-item */}\n <div class=\"navbar__sidebar-top-row\">\n <div class=\"navbar__sidebar-top-row-wrapper\">\n <slot name='mobile-menu-top' />\n </div>\n </div>\n\n {/* right side ifx-navbar-item */}\n <div class=\"navbar__sidebar-bottom-row\">\n <slot name='mobile-menu-bottom' onSlotchange={(e) => this.handleMobileMenuBottom(e)} />\n </div>\n \n </div>\n </div>\n );\n }\n}"],"mappings":"yDAAA,MAAMA,EAAY,gnsBAClB,MAAAC,EAAeD,E,MCOFE,EAAM,M,wGAEQ,K,cACI,M,kBACI,M,YACN,M,aACC,M,WACF,M,qBACQ,G,sBACG,K,WACZ,K,wBACa,K,6CAEX,G,sBACS,G,oBACH,Q,4BACS,O,CAGlC,yCAAAC,GACN,MAAMC,EAAUC,KAAKC,GAAGC,WAAWC,WAEnC,IAAKJ,EAAS,CACZK,QAAQC,MAAM,qBACd,M,CAEFN,EAAQO,UAAY,EAGpB,MAAMC,EAAYR,EAAQS,iBAAiB,KAC3C,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAAUG,OAAQD,IAAK,CACzCF,EAAUE,GAAGH,UAAY,C,CAG3B,MAAMK,EAAOZ,EAAQa,cAAc,QACnC,GAAID,EAAM,CACR,MAAME,EAAgBF,EAAKE,gBAC3B,IAAK,IAAIJ,EAAI,EAAGA,EAAII,EAAcH,OAAQD,IAAK,CAC7C,MAAMK,EAAOD,EAAcJ,GAC3B,GAAIK,EAAKC,WAAa,kBAAmB,CACvC,MAAMC,EAAaF,EAGnB,MAAMP,EAAYS,IAAU,MAAVA,SAAU,SAAVA,EAAYd,WAAWM,iBAAiB,KAC1D,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAAUG,OAAQD,IAAK,CACzCF,EAAUE,GAAGH,UAAY,C,KAQnC,mBAAAW,CAAoBC,GAClB,GAAGA,EAAMC,OAAOC,SAAW,iBAAkB,CAC3C,MAAMC,EAAgBrB,KAAKsB,mBAC3B,IAAI,IAAIb,EAAI,EAAGA,EAAIY,EAAcX,OAAQD,IAAK,CAC5C,IAAIY,EAAcZ,GAAGc,WAAWL,EAAMC,OAAOK,WAAY,CACvDH,EAAcZ,GAAGgB,e,GAKvB,GAAGP,EAAMC,OAAOC,SAAW,kBAAmB,CAC5C,MAAMM,EAASR,EAAMC,OAAOO,OAC5B,MAAMC,EAAWD,EAAOC,SACxBD,EAAOE,qBAAqB,SAAU,OACtC,IAAI,IAAInB,EAAI,EAAGA,EAAIkB,EAASjB,OAAQD,IAAK,CACvC,IAAIkB,EAASlB,GAAGc,WAAWL,EAAMC,OAAOK,WAAY,CAClDG,EAASlB,GAAGgB,e,GAKlB,GAAGP,EAAMC,OAAOC,SAAW,sBAAuB,CAChD,MAAMM,EAASR,EAAMC,OAAOO,OAC5B,MAAMC,EAAWD,EAAOC,SACxBD,EAAOE,qBAAqB,MAAO,UACnC,IAAI,IAAInB,EAAI,EAAGA,EAAIkB,EAASjB,OAAQD,IAAK,CACvC,IAAIkB,EAASlB,GAAGc,WAAWL,EAAMC,OAAOK,WAAY,CAClDG,EAASlB,GAAGoB,e,GAKlB,GAAGX,EAAMC,OAAOC,SAAW,OAAQ,CACjC,MAAMC,EAAgBrB,KAAKC,GAAGO,iBAAiB,sBAC/C,IAAI,IAAIC,EAAI,EAAGA,EAAIY,EAAcX,OAAQD,IAAK,CAC5C,IAAIY,EAAcZ,GAAGc,WAAWL,EAAMC,OAAOK,WAAY,CACvDH,EAAcZ,GAAGoB,e,GAKvB,GAAGX,EAAMC,OAAOC,SAAW,SAAU,CACnC,MAAMC,EAAgBrB,KAAKsB,mBAC3B,IAAI,IAAIb,EAAI,EAAGA,EAAIY,EAAcX,OAAQD,IAAK,CAC5C,IAAIY,EAAcZ,GAAGc,WAAWL,EAAMC,OAAOK,WAAY,CACvDH,EAAcZ,GAAGoB,e,IAMzB,WAAAC,GACE,MAAMC,EAAwB/B,KAAKC,GAAGC,WAAWU,cAAc,4EAC/D,MAAMoB,EAAuBhC,KAAKC,GAAGC,WAAWU,cAAc,8DAC9D,MAAMqB,EAAgBF,EAAsBnB,cAAc,QAC1D,MAAMsB,EAAeF,EAAqBpB,cAAc,QACxD,MAAMuB,EAAqBF,EAAcpB,gBACzC,MAAMuB,EAAoBF,EAAarB,gBACvC,MAAMwB,EAAgBrC,KAAKC,GAAGW,cAAc,sBAC5C,MAAMS,EAAgBrB,KAAKC,GAAGO,iBAAiB,sBAC/C,MAAM8B,EAAiBtC,KAAKC,GAAGO,iBAAiB,uBAChD,MAAM+B,EAAgBvC,KAAKC,GAAGC,WAAWU,cAAc,oCAEvD,MAAO,CAACqB,gBAAeC,eAAcC,qBAAoBC,oBAAmBC,gBAAehB,gBAAeiB,iBAAgBC,gB,CAG5H,YAAAC,GACE,MAAML,mBAAEA,EAAkBC,kBAAEA,EAAiBC,cAAEA,EAAahB,cAAEA,EAAaiB,eAAEA,EAAcC,cAAEA,GAAkBvC,KAAK8B,cAEpH,GAAGK,EAAmBzB,SAAW,EAAG,CAClCV,KAAKyC,gBAAkB,O,MAClB,GAAGL,EAAkB1B,SAAW,EAAG,CACxCV,KAAKyC,gBAAkB,M,CAGzB,GAAGJ,EAAe,CAChBA,EAAcZ,e,CAGhB,IAAI,IAAIiB,EAAI,EAAGA,EAAIrB,EAAcX,OAAQgC,IAAK,CAC5C,IAAIH,EAAcI,UAAUC,SAAS,UAAW,CAC9CvB,EAAcqB,GAAGjB,e,EAIrB,IAAI,IAAIoB,EAAI,EAAGA,EAAIP,EAAe5B,OAAQmC,IAAK,CAC7C,GAAGN,EAAcI,UAAUC,SAAS,UAAW,CAC7C,IAAIN,EAAeO,GAAGC,aAAc,CAClCR,EAAeO,GAAGpB,e,MAEf,CACLa,EAAeO,GAAGpB,e,GAKxB,YAAAsB,GACE,MAAMV,cAAEA,EAAahB,cAAEA,EAAaiB,eAAEA,EAAcC,cAAEA,GAAkBvC,KAAK8B,cAC7E9B,KAAKyC,gBAAkBO,UAEvB,GAAGX,EAAe,CAChBA,EAAcR,e,CAGhB,IAAI,IAAIa,EAAI,EAAGA,EAAIrB,EAAcX,OAAQgC,IAAK,CAC5C,IAAIH,EAAcI,UAAUC,SAAS,UAAW,CAC9CvB,EAAcqB,GAAGb,e,EAIrB,IAAI,IAAIgB,EAAI,EAAGA,EAAIP,EAAe5B,OAAQmC,IAAK,CAC7C,GAAGN,EAAcI,UAAUC,SAAS,UAAW,CAC7C,IAAIN,EAAeO,GAAGC,aAAc,CAClCR,EAAeO,GAAGhB,e,MAEf,CACLS,EAAeO,GAAGhB,e,GAOxB,qBAAAoB,CAAsB/B,GAEpB,GAAGA,EAAMC,OAAQ,CACfnB,KAAKwC,c,MACA,IAAItB,EAAMC,OAAQ,CACvBnB,KAAK+C,c,EAIT,WAAAG,CAAYjD,EAAIkD,GACdlD,EAAG0C,UAAUS,OAAOD,E,CAGtB,aAAAE,CAAcpD,GACZ,MAAMqD,EAAqBrD,EAAGsD,cAAcC,QAAQ,gCACpD,MAAMC,EAAkBH,EAAmB1C,cAAc,wBACzD,MAAM8C,EAAmBJ,EAAmB1C,cAAc,uBAC1D,MAAM+C,EAAgB1D,EAAGsD,cAAcC,QAAQ,2BAC/C,MAAMI,EAAgB3D,EAAGsD,cAAcC,QAAQ,oBAC/C,MAAMK,EAAiBD,EAAchD,cAAc,oBACnDZ,KAAKkD,YAAYU,EAAe,QAChC5D,KAAKkD,YAAYS,EAAe,QAChC3D,KAAKkD,YAAYW,EAAgB,QACjC7D,KAAKkD,YAAYO,EAAiB,SAClCzD,KAAKkD,YAAYQ,EAAkB,QAEnC,GAAGA,EAAiBf,UAAUC,SAAS,QAAS,CAC9C5C,KAAK8D,iBAAiB,O,KACjB,CACL9D,KAAK8D,iBAAiB,O,EAI1B,gBAAAA,CAAiB1C,GACf,MAAM2C,EAAO/D,KAAKC,GAAGuD,QAAQ,QAC7B,IAAIxD,KAAKgE,OAAS5C,IAAW,OAAQ,CACnC2C,EAAKE,MAAMC,SAAW,Q,MACjB,GAAG9C,IAAW,OAAQ,CAC3B2C,EAAKE,MAAMC,SAAW,S,EAI1B,kBAAAC,CAAmBlE,GACjB,MAAMmE,EAAkBnE,EAAGsD,cAAc3C,cAAc,6BACvDwD,EAAgBzB,UAAUS,OAAO,QACjC,MAAMiB,EAAcpE,EAAGsD,cAAc3C,cAAc,KACnDyD,EAAY1B,UAAUS,OAAO,O,CAG/B,yBAAMkB,GACJ,MAAMC,EAAcvE,KAAKC,GAAGO,iBAAiB,mBAC7C,MAAM6B,EAAgBrC,KAAKC,GAAGW,cAAc,sBAE5C,GAAGyB,EAAe,CAChB,MAAMmC,EAAenC,EAAc7B,iBAAiB,mBACpD,GAAIgE,EAAa9D,SAAW,EAAG,CAC7B8D,EAAaC,SAAQC,IACnBA,EAAKC,sBACL3E,KAAK4E,4BAA4BF,EAAK,G,EAK5C,GAAGH,EAAY7D,SAAW,EAAG,CAC3B,IAAI,IAAID,EAAI,EAAGA,EAAI8D,EAAY7D,OAAQD,IAAK,CAC1C,MAAMiE,EAAOH,EAAY9D,GACzB,MAAM+D,EAAeE,EAAKlE,iBAAiB,mBAC3C,GAAIgE,EAAa9D,SAAW,EAAG,CAC9B,MAAMmE,QAAuBH,EAAKI,4BAClC,GAAGD,EAAgB,CAClBL,EAAaC,SAAQC,IACnBA,EAAKC,sBACL3E,KAAK4E,4BAA4BF,EAAK,G,KAQhD,2BAAAE,CAA4BF,GAC1B,MAAMF,EAAeE,EAAKlE,iBAAiB,mBAC3C,GAAIgE,EAAa9D,SAAW,EAAG,CAC3B8D,EAAaC,SAAQM,IACnBA,EAAQJ,sBACR3E,KAAK4E,4BAA4BG,EAAQ,G,EAKjD,iBAAAC,GACE,MAAMC,EAAiBC,OAAOC,WAAW,sBACzC,OAAOF,C,CAGT,gBAAAG,GACEpF,KAAKsE,sBACLtE,KAAKF,4CAEL,MAAMmF,EAAiBjF,KAAKgF,oBAE5B,GAAIC,EAAeI,QAAS,CAC1BrF,KAAKsF,uB,EAKT,sBAAAC,CAAuBC,GACrB,MAAMC,EAA0BzF,KAAKC,GAAGC,WAAWU,cAAc,+BACjE,MAAM8E,EAAcF,EAAEG,OACtB,MAAMC,EAAQF,EAAY7E,gBAC1B,GAAG+E,EAAMlF,OAAS,EAAG,CACnB+E,EAAwB9C,UAAUkD,IAAI,O,KACjC,CACLJ,EAAwB9C,UAAUmD,OAAO,O,EAI7C,uBAAAC,GACE,GAAG/F,KAAKgG,SAASC,SAAW,GAAI,CAC9BjG,KAAKkG,iBAAmBlD,S,KACrB,CACHhD,KAAKkG,iBAAmBlG,KAAKgG,Q,CAG/B,GAAG,CAAC,QAAS,SAAU,WAAWG,SAASnG,KAAKoG,eAAeH,QAAQ,CACrEjG,KAAKqG,uBAAyBrG,KAAKoG,c,KAChC,CACHpG,KAAKqG,uBAAyB,O,EAKlC,iBAAAC,GACEtG,KAAKuG,gCACL,MAAMC,EAAexG,KAAKC,GAAGW,cAAc,mBAC3C,MAAMS,EAAgBrB,KAAKC,GAAGO,iBAAiB,sBAC/C,IAAKa,EAAcX,SAAW8F,EAAc,CAC1CxG,KAAKyG,iBAAmB,K,CAE1BzG,KAAK+F,0BAEL,MAAMd,EAAiBC,OAAOC,WAAW,sBACzCF,EAAeyB,iBAAiB,UAAWlB,GAAMxF,KAAKsF,sBAAsBE,I,CAK9E,uBAAAmB,GACE,MAAM3E,EAAuBhC,KAAKC,GAAGC,WAAWU,cAAc,8DAC9D,OAAOoB,C,CAGT,gBAAAV,GACE,MAAMD,EAAgBrB,KAAKC,GAAGO,iBAAiB,4BAC/C,OAAOa,C,CAGT,mBAAAuF,GACE,MAAMtE,EAAiBtC,KAAKC,GAAGO,iBAAiB,+BAChD,OAAO8B,C,CAGT,gBAAAuE,GACE,MAAMxF,EAAgBrB,KAAKsB,mBAC3B,MAAMgB,EAAiBtC,KAAK4G,sBAC5B,IAAIvF,EAAcX,SAAW4B,EAAe5B,OAAQ,CACnD,MAAMoG,EAAoB9G,KAAKC,GAAGC,WAAWU,cAAc,gCAC3DZ,KAAKkD,YAAY4D,EAAmB,O,EAIvC,qBAAAxB,CAAsBE,GACpB,MAAMjD,EAAgBvC,KAAKC,GAAGC,WAAWU,cAAc,oCACvD,MAAMqE,EAAiBjF,KAAKgF,oBAC5B,MAAMK,EAAUG,EAAIA,EAAEH,QAAUJ,EAAeI,QAE/C,GAAIA,EAAS,CAEX9C,EAAcI,UAAUkD,IAAI,UAG5B,MAAMkB,EAAY/G,KAAKC,GAAGC,WAAWU,cAAc,uBACnD,GAAGmG,EAAUpE,UAAUC,SAAS,QAAS,CACvC5C,KAAK8D,iBAAiB,O,CAIxB,MAAMkD,EAAgBhH,KAAKC,GAAGW,cAAc,4BAC5C,GAAGoG,EAAe,CAChB,GAAGhH,KAAKyC,gBAAiB,CACvBuE,EAAcC,gB,CAEhB,MAAMjF,EAAuBhC,KAAK2G,0BAClC3E,EAAqBW,UAAUkD,IAAI,WACnCmB,EAAcE,aAAa,OAAQ,mB,CAIrC,MAAM7F,EAAgBrB,KAAKC,GAAGO,iBAAiB,sBAC/C,IAAI,IAAIC,EAAI,EAAGA,EAAIY,EAAcX,OAAQD,IAAK,CAC5CY,EAAcZ,GAAGyG,aAAa,OAAQ,mBACtC7F,EAAcZ,GAAG0G,sCACjB,GAAGnH,KAAKyC,gBAAiB,CACvBpB,EAAcZ,GAAGoB,e,EAKrB,MAAMS,EAAiBtC,KAAKC,GAAGO,iBAAiB,uBAChD,IAAI,IAAIC,EAAI,EAAGA,EAAI6B,EAAe5B,OAAQD,IAAK,CAC7C,GAAG6B,EAAe7B,GAAG2G,QAAQC,gBAAkB,qBAAsB,CACnE/E,EAAe7B,GAAG6G,UAAY,K,KACzB,CACL,GAAGhF,EAAe7B,GAAGqC,aAAc,CACjCR,EAAe7B,GAAGyG,aAAa,OAAQ,sBAEvC5E,EAAe7B,GAAG8G,eAAe,OAEjCjF,EAAe7B,GAAG6G,UAAY,KAC9B,GAAGtH,KAAKyC,gBAAiB,CACvBH,EAAe7B,GAAGoB,e,IAM1B7B,KAAK6G,kB,KAEA,CAELtE,EAAcI,UAAUmD,OAAO,UAG/B9F,KAAK8D,iBAAiB,QAGtB,MAAM9B,EAAuBhC,KAAK2G,0BAClC,MAAMa,EAAgBxF,EAAqBW,UAAUC,SAAS,WAC9D,MAAM6E,EAAiBzH,KAAKC,GAAGW,cAAc,6BAC7C,GAAG4G,EAAe,CAChB,GAAGxH,KAAKyC,gBAAiB,CACvBgF,EAAeR,gB,CAEjB,GAAGQ,EAAgB,CACjBA,EAAeP,aAAa,OAAQ,kB,EAKxC,MAAM7F,EAAgBrB,KAAKsB,mBAC3B,IAAI,IAAIb,EAAI,EAAGA,EAAIY,EAAcX,OAAQD,IAAK,CAC5CY,EAAcZ,GAAGyG,aAAa,OAAQ,aACtC7F,EAAcZ,GAAGiH,mC,CAInB,MAAMpF,EAAiBtC,KAAK4G,sBAC5B,MAAMe,EAAoB3H,KAAKC,GAAGW,cAAc,sBAChD,GAAG+G,EAAmB,CACpB,MAAMC,EAAuBD,EAAkBE,aAAa,cAC5DF,EAAkBT,aAAa,aAAcU,E,CAG/C,IAAI,IAAInH,EAAI,EAAGA,EAAI6B,EAAe5B,OAAQD,IAAK,CAC7C6B,EAAe7B,GAAGyG,aAAa,OAAQ,cAErC5E,EAAe7B,GAAG8G,eAAe,UAEjC,MAAMD,EAAYhF,EAAe7B,GAAGoH,aAAa,cACjDvF,EAAe7B,GAAGyG,aAAa,aAAcI,GAC7C,GAAGtH,KAAKyC,gBAAiB,CACvBH,EAAe7B,GAAGgB,e,IAM5B,6BAAA8E,GACE,IAAI7E,EAAS1B,KAAKC,GAAG6H,cACrB,GAAGpG,EAAQ,CACT,IAAIqG,EAAmBrG,EAAO8B,QAAQ,eACtC,GAAGuE,EAAkB,CACnBA,EAAiB9D,MAAMC,SAAW,S,GAOxC,MAAA8D,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,sBAAsBC,MAAO,mBAAmBnI,KAAKgE,MAAQ,QAAU,MACrFiE,EAAA,OAAAC,IAAA,2CAAKC,MAAO,0BAA0BnI,KAAKgE,MAAQ,QAAU,MAC3DiE,EAAA,OAAAC,IAAA,2CAAKC,MAAO,qBAAqBnI,KAAKyC,gBAAkB,WAAa,MACnEwF,EAAA,OAAAC,IAAA,2CAAKC,MAAO,0BAA0BnI,KAAKyC,kBAAoB,OAAS,SAAWzC,KAAKyC,kBAAoB,QAAU,OAAS,MAC5HzC,KAAKoI,oBACJH,EAAA,OAAAC,IAAA,2CAAKC,MAAO,+BAA+BnI,KAAKyC,kBAAoB,OAAS,OAAS,MACpFwF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uCACTF,EAAA,KAAAC,IAAA,2CAAGG,KAAMrI,KAAKkG,iBAAkBP,OAAU3F,KAAKqG,wBAC7C4B,EAAA,OAAAC,IAAA,2CAAKI,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAAYC,KAAK,OAAOC,MAAM,8BAChET,EAAA,KAAAC,IAAA,uDAAa,yBACXD,EAAA,QAAAC,IAAA,2CAAMS,EAAE,6yGAA6yGF,KAAK,YAC1zGR,EAAA,QAAAC,IAAA,2CAAMS,EAAE,g3BAAg3BF,KAAK,aAE/3BR,EAAA,QAAAC,IAAA,4CACED,EAAA,YAAAC,IAAA,2CAAUU,GAAG,mBACXX,EAAA,QAAAC,IAAA,2CAAMI,MAAM,KAAKC,OAAO,KAAKE,KAAK,eAM3CzI,KAAK6I,iBAAmBZ,EAAA,MAAAC,IAAA,4CAAKlI,KAAK6I,iBAClC7I,KAAK6I,iBAAmB7I,KAAKyG,kBAC5BwB,EAAA,OAAAC,IAAA,2CAAKC,MAAM,yCAEjBF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,kCACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mDACTF,EAAA,QAAAC,IAAA,2CAAMY,KAAK,cACXb,EAAA,OAAAC,IAAA,2CAAKC,MAAM,6DACTF,EAAA,QAAAC,IAAA,2CAAMY,KAAK,wBAKnBb,EAAA,OAAAC,IAAA,2CAAKC,MAAO,2BAA2BnI,KAAKyC,kBAAoB,QAAU,SAAWzC,KAAKyC,kBAAoB,OAAS,OAAS,MAC9HwF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mCACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oDACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,8DACXF,EAAA,OAAAC,IAAA,2CAAKC,MAAO,2EACRF,EAAA,QAAAC,IAAA,2CAAMY,KAAK,uBAGfb,EAAA,QAAAC,IAAA,2CAAMY,KAAK,iBAKfb,EAAA,OAAAC,IAAA,2CAAKC,MAAO,8BAA+BY,QAAS/I,KAAKqD,cAAc2F,KAAKhJ,OAC1EiI,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uBACTF,EAAA,YAAAC,IAAA,2CAAUe,KAAK,mBAEjBhB,EAAA,OAAAC,IAAA,2CAAKC,MAAM,sBACTF,EAAA,YAAAC,IAAA,2CAAUe,KAAK,kBAQzBhB,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBAETF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,2BACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mCACTF,EAAA,QAAAC,IAAA,2CAAMY,KAAK,sBAKfb,EAAA,OAAAC,IAAA,2CAAKC,MAAM,8BACTF,EAAA,QAAAC,IAAA,2CAAMY,KAAK,qBAAqBI,aAAe1D,GAAMxF,KAAKuF,uBAAuBC,O","ignoreList":[]}
package/dist/types/components/select/single-select/select.d.ts CHANGED
@@ -53,6 +53,8 @@ export declare class Choices implements IChoicesProps, IChoicesMethods {
53
53
  options: any[] | string;
54
54
  size: string;
55
55
  selectedOption: any | null;
56
+ optionIsSelected: boolean;
57
+ private resizeObserver;
56
58
  private readonly root;
57
59
  private choice;
58
60
  private element;
@@ -76,6 +78,11 @@ export declare class Choices implements IChoicesProps, IChoicesMethods {
76
78
  clearStore(): Promise<this>;
77
79
  clearInput(): Promise<this>;
78
80
  ajax(fn: AjaxFn): Promise<this>;
81
+ handleDeleteIcon(): Promise<void>;
82
+ handleCloseButton(): void;
83
+ protected componentWillLoad(): void;
84
+ protected componentWillUpdate(): void;
85
+ addResizeObserver(): void;
79
86
  protected componentDidLoad(): void;
80
87
  protected componentDidUpdate(): void;
81
88
  protected disconnectedCallback(): void;
package/dist/types/components.d.ts CHANGED
@@ -375,6 +375,7 @@ export namespace Components {
375
375
  "fuseOptions": FuseOptions;
376
376
  "getValue": (valueOnly?: boolean) => Promise<string | Array<string>>;
377
377
  "handleChange": () => Promise<void>;
378
+ "handleDeleteIcon": () => Promise<void>;
378
379
  "hideDropdown": (blurInput?: boolean) => Promise<this>;
379
380
  "highlightAll": () => Promise<this>;
380
381
  "highlightItem": (item: HTMLElement, runEvent?: boolean) => Promise<this>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@infineon/infineon-design-system-stencil",
3
- "version": "30.0.0--canary.1626.ffb29ef0579b15bc19c3bb02e9b882c9b0e882e1.0",
3
+ "version": "30.0.0--canary.1626.e3bcf6f890c4244274ebb8f58df2fcc338ce6629.0",
4
4
  "private": false,
5
5
  "description": "Infineon design system Stencil web components",
6
6
  "homepage": "https://infineon.github.io/infineon-design-system-stencil",
package/dist/components/p-07b492d8.js.map DELETED
@@ -1 +0,0 @@
1
- {"file":"p-07b492d8.js","mappings":"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","names":[],"sources":["src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.container {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n gap: 32px;\n font-family: var(--ifx-font-family);\n\n\n & .items__per-page-wrapper {\n display: flex;\n align-items: center;\n gap: 16px;\n\n & .items__per-page-label {\n color: #1D1D1D;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px;\n }\n\n & .items__per-page-field {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n\n & ifx-select {\n width: 92px;\n }\n }\n }\n\n & .items__total-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .items__total-button {\n display: flex;\n width: 40px;\n height: 40px;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n border: 1px solid #BFBBBB;\n background: #FFF;\n }\n\n & .page__numbers-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .page__number-item {\n display: flex;\n padding: 6px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 100px;\n\n &.active {\n background-color: #0A8276;\n\n & span {\n color: #fff;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:hover:not(.active) {\n background-color: #ddd;\n\n }\n\n &:active:not(.active) {\n background-color: #575352;\n }\n\n & span {\n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n }\n }\n }\n }\n}\n\n\n.pagination {\n display: flex;\n\n & ifx-icon-button:first-of-type {\n margin-right: 12px;\n }\n\n & ifx-icon-button:last-of-type {\n margin-left: 12px;\n }\n}\n\na {\n padding: 8px;\n border-radius: 100px;\n}\n\nol {\n list-style-type: none;\n padding: 0;\n margin: 0;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\n\nli {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n\n &:hover:not(.active) {\n & a {\n background-color: #EEEDED;\n }\n }\n\n &:active:not(.active) {\n & a {\n background-color: #575352;\n color: #fff;\n }\n }\n\n &.active {\n background-color: #0A8276;\n\n & a {\n color: #fff;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n & a {\n text-decoration: none;\n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n align-items: center;\n }\n}\n\n.prev,\n.next {\n &.disabled {\n cursor: default;\n\n &:hover {\n cursor: default;\n text-decoration: none;\n }\n }\n}\n\n.prev {\n margin-right: 2.5px;\n}\n\n.next {\n margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before: true) {\n content: \"\\2026\";\n font-size: 13px;\n display: inline-block;\n\n @if($before) {\n margin-right: 6px;\n }\n\n @else {\n margin-left: 6px;\n }\n}\n\n\n// @media(max-width:460px) {\n// li {\n\n// &:first-child,\n// &.active,\n// &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n// &:last-child {\n// //display: inline-block !important;\n// display: inline-flex !important;\n// flex-direction: row;\n// }\n\n// $how-many-on-ends: 3; // 1,2,3,...,10 || 1,...,8,9,10\n// // There are >= 5 pages\n// &:first-child:nth-last-child(n+6) {\n\n// &~li {\n// // Start out with all siblings hidden\n// display: none;\n\n// // Show the last children in the list by default\n// &:nth-last-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n\n// }\n\n// // The child at the beginning of the last group shows ellipsis for the group\n// &:nth-last-child(#{$how-many-on-ends}) {\n// &:before {\n// @include ellipsis(true);\n// }\n// }\n\n// // The very beginning elements do not need to show ellipsis\n// // The very end elements do not need to show ellipsis\n// }\n\n\n// &.active,\n// &~li.active {\n\n// // Show ellipsis before and after the active element\n// &:before {\n// @include ellipsis(true);\n// }\n// &:after {\n// @include ellipsis(false);\n// }\n\n\n// // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n// &:nth-child(-n+#{$how-many-on-ends - 1}),\n// &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n// &:before, &:after {\n// display: none;\n// }\n// }\n\n// // Hide the last group if \"active\" comes before them\n// &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n// display: none;\n// }\n\n// // Show the first group together if \"active\" comes before them\n// &~li:nth-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n// }\n\n// // If \"active\" is before the last member in the group, don't show ellipsis\n// &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n// &:after {\n// display: none;\n// }\n// }\n\n\n// // The child at the end of the first group shows ellipsis for the group\n// &~li:nth-child(#{$how-many-on-ends}) {\n// &:after {\n// @include ellipsis(false);\n// }\n// }\n// }\n// }\n// }\n// }\n\n@media (min-width: 400px) {\n li {\n\n &:first-child,\n &.active-sibling,\n &.active,\n &.active+li,\n &:last-child {\n //display: inline-block!important;\n display: inline-flex !important;\n flex-direction: row;\n }\n\n // There are >= 7 pages\n &:first-child:nth-last-child(n+8) {\n $how-many-on-ends: 5; // 1,2,3,4,5,...,10 || 1,...6,7,8,9,10\n\n &~li {\n // Start out with all siblings hidden\n display: none;\n\n // Show ellipsis before the previous one\n &.active-sibling:before {\n @include ellipsis(true);\n }\n\n // Show ellipsis after the next one\n &.active+li:after {\n @include ellipsis(false);\n }\n\n // Show the last children in the list by default\n &:nth-last-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex;\n flex-direction: row;\n }\n\n // The child at the beginning of the last group shows ellipsis for the group\n &:nth-last-child(#{$how-many-on-ends}) {\n &:before {\n @include ellipsis(true);\n }\n }\n\n // The very beginning elements do not need to show ellipsis\n &:nth-child(-n+#{$how-many-on-ends - 3}),\n // The very end elements do not need to show ellipsis\n &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n // Even if it's a sibling to \"active\"\n &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n\n &:before,\n &:after {\n display: none !important;\n }\n }\n }\n\n &.active,\n &~li.active {\n\n // Hide the last group if \"active\" comes before them\n &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n display: none;\n\n // If there is overlap, the element will show, but hide it's ellipsis\n &:before {\n display: none;\n }\n }\n\n // Show the first group together if \"active\" comes before them\n &~li:nth-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex !important;\n flex-direction: row;\n }\n\n // If \"active\" is before the last member in the group, don't show ellipsis\n &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n &:after {\n display: none;\n }\n }\n\n\n // The child at the end of the first group shows ellipsis for the group\n &~li:nth-child(#{$how-many-on-ends}) {\n &:after {\n @include ellipsis(false);\n }\n }\n\n // \"active\" should never show ellipsis\n &:before,\n &:after {\n display: none;\n }\n }\n }\n }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-pagination',\n styleUrl: 'pagination.scss',\n shadow: true\n})\nexport class Pagination {\n @Element() el;\n @Event() ifxPageChange: EventEmitter;\n @Event() ifxNextPage: EventEmitter;\n @Event() ifxPrevPage: EventEmitter;\n @Prop() currentPage: number = 0;\n @State() internalPage: number = 1;\n @State() itemsPerPage: number = 10;\n @State() numberOfPages: number[] = [];\n @Prop() total: number = 1;\n\n private CLASS_DISABLED = \"disabled\"\n private CLASS_ACTIVE = \"active\"\n private CLASS_SIBLING_ACTIVE = \"active-sibling\"\n private DATA_KEY = \"pagination\";\n\n @Listen('ifxSelect')\n setItemsPerPage(e) {\n this.itemsPerPage = parseInt(e.detail.label)\n }\n\n componentDidLoad() {\n this.calculateVisiblePageIndices()\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n let leftArrow = paginationElement.querySelector('.prev')\n this.navigateSinglePage(leftArrow, true)\n\n }\n\n calculateNumberOfPages() {\n if (isNaN(this.currentPage)) {\n this.currentPage = 1;\n }\n const total = this.total <= this.itemsPerPage ? this.itemsPerPage : this.total;\n const itemsPerPage = this.itemsPerPage;\n const totalPageNumber = Math.ceil(total / itemsPerPage);\n\n if (this.currentPage <= 0) {\n this.internalPage = 1;\n } else if (this.currentPage > totalPageNumber) {\n this.internalPage = totalPageNumber;\n } else this.internalPage = this.currentPage;\n\n this.numberOfPages = Array.from({ length: totalPageNumber }, (_, index) => index + 1);\n }\n\n componentWillLoad() {\n this.calculateNumberOfPages()\n }\n\n componentDidUpdate() {\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n var listItems = paginationElement.querySelectorAll(\"li\");\n this.addEventListenersToPageItems(listItems, paginationElement)\n\n if (paginationElement.dataset[this.DATA_KEY] < this.numberOfPages) {\n paginationElement.dataset[this.DATA_KEY] = paginationElement.dataset[this.DATA_KEY];\n } else paginationElement.dataset[this.DATA_KEY] = 0;\n\n this.changePage(paginationElement, false)\n }\n\n componentWillUpdate() {\n this.calculateNumberOfPages()\n }\n\n handleEventEmission(currActive) {\n let currentPage = currActive + 1;\n let totalPages = this.numberOfPages.length;\n let prevPage = currActive === 0 ? null : currActive;\n let nextPage = currActive + 2 > totalPages ? null : currActive + 2;\n let itemsPerPage = this.itemsPerPage\n this.ifxPageChange.emit({ currentPage, totalPages, prevPage, nextPage, itemsPerPage })\n }\n\n addEventListenersToPageItems(listItems, paginationContainer) {\n listItems.forEach((item) => {\n item.addEventListener(\"click\", (e) => {\n var parent = paginationContainer;\n let listItems = parent.querySelectorAll(\"li\");\n parent.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(e.currentTarget)\n this.changePage(parent, false)\n });\n });\n }\n\n initPagination(paginationContainer) {\n var listItems = paginationContainer.querySelectorAll(\"li\");\n\n paginationContainer.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(paginationContainer.querySelector(\".active\"));\n\n paginationContainer.querySelector(\".prev\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n paginationContainer.querySelector(\".next\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n\n this.addEventListenersToPageItems(listItems, paginationContainer)\n }\n\n navigateSinglePage(e, initialValue) {\n let el = e;\n if (typeof e.target === 'object') {\n el = e.target\n }\n\n if (!el.classList.contains(this.CLASS_DISABLED)) {\n var parent = el.closest(\".pagination\");\n var currActive = parseInt(parent.dataset[this.DATA_KEY], 10);\n currActive += 1 * (el.classList.contains(\"prev\") ? -1 : 1);\n\n if (currActive === -1) {\n currActive = 0;\n }\n\n parent.dataset[this.DATA_KEY] = currActive;\n this.changePage(parent, initialValue)\n }\n }\n\n changePage(pagination, initialValue) {\n const paginationContainer = pagination;\n var listItems = paginationContainer.querySelectorAll(\"li\");\n var currActive = parseInt(paginationContainer.dataset[this.DATA_KEY], 10);\n\n listItems.forEach((item) => {\n item.classList.remove(this.CLASS_ACTIVE);\n item.classList.remove(this.CLASS_SIBLING_ACTIVE);\n });\n\n if (initialValue && this.internalPage > 1) {\n currActive = Math.floor(this.internalPage - 1);\n paginationContainer.dataset[this.DATA_KEY] = currActive;\n }\n\n this.handleEventEmission(currActive)\n\n listItems[currActive].classList.add(this.CLASS_ACTIVE);\n\n if (currActive === 0) {\n paginationContainer.querySelector(\".prev\").classList.add(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".prev\").disabled = true;\n\n } else {\n listItems[currActive - 1].classList.add(this.CLASS_SIBLING_ACTIVE);\n paginationContainer.querySelector(\".prev\").classList.remove(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".prev\").disabled = false;\n }\n\n if (currActive === (listItems.length - 1)) {\n paginationContainer.querySelector(\".next\").classList.add(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".next\").disabled = true;\n\n } else {\n paginationContainer.querySelector(\".next\").classList.remove(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".next\").disabled = false;\n }\n }\n\n calculateVisiblePageIndices() {\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n this.initPagination(paginationElement)\n }\n\n render() {\n return (\n <div aria-label='a pagination' aria-value={this.currentPage} class=\"container\">\n <div class='items__per-page-wrapper'>\n <div class='items__per-page-label'>Results per Page</div>\n <div class='items__per-page-field'>\n <ifx-select\n value='undefined'\n size='s'\n placeholder='false'\n show-search='false'\n search-placeholder-value='Search...'\n disabled={false}\n error={false}\n error-message='Error'\n label=''\n placeholder-value='Placeholder'\n options='[{\"value\":\"ten\",\"label\":\"10\",\"selected\":true}, {\"value\":\"Twenty\",\"label\":\"20\",\"selected\":false}, {\"value\":\"Thirty\",\"label\":\"30\",\"selected\":false}]' >\n </ifx-select>\n </div>\n </div>\n <div class='items__total-wrapper'>\n <div class='page__numbers-wrapper'>\n <div class=\"pagination\">\n <ifx-icon-button variant='secondary' class=\"prev\" color='primary' icon='arrow-left-24'></ifx-icon-button>\n <ol>\n {this.numberOfPages.map((item) =>\n <li class={`${this.internalPage === item ? 'active' : \"\"}`}><a href={undefined}>{item}</a></li>)}\n </ol>\n <ifx-icon-button class=\"next\" variant='secondary' color='primary' icon='arrow-right-24'></ifx-icon-button>\n </div>\n </div>\n </div>\n </div>\n );\n }\n}"],"version":3}