@siemens/ix 2.0.0 → 2.0.2

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 (579) hide show
  1. package/components/_commonjsHelpers.js +21 -0
  2. package/components/_commonjsHelpers.js.map +1 -0
  3. package/{dist/esm/a11y-d5dd20ad.js → components/a11y.js} +2 -2
  4. package/components/a11y.js.map +1 -0
  5. package/components/animation.js +19 -0
  6. package/components/animation.js.map +1 -0
  7. package/components/anime.es.js +1311 -0
  8. package/components/anime.es.js.map +1 -0
  9. package/components/application-header.js +109 -0
  10. package/components/application-header.js.map +1 -0
  11. package/components/avatar.js +53 -0
  12. package/components/avatar.js.map +1 -0
  13. package/components/base-button.js +47 -0
  14. package/components/base-button.js.map +1 -0
  15. package/components/base-icon-button.js +18 -0
  16. package/components/base-icon-button.js.map +1 -0
  17. package/components/breadcrumb-item.js +100 -0
  18. package/components/breadcrumb-item.js.map +1 -0
  19. package/components/breakpoints.js +25 -0
  20. package/components/breakpoints.js.map +1 -0
  21. package/components/burger-menu.js +55 -0
  22. package/components/burger-menu.js.map +1 -0
  23. package/components/button.js +91 -0
  24. package/components/button.js.map +1 -0
  25. package/components/card-accordion.js +72 -0
  26. package/components/card-accordion.js.map +1 -0
  27. package/components/card-content.js +32 -0
  28. package/components/card-content.js.map +1 -0
  29. package/components/card-title.js +32 -0
  30. package/components/card-title.js.map +1 -0
  31. package/components/card.js +36 -0
  32. package/components/card.js.map +1 -0
  33. package/components/context.js +101 -0
  34. package/components/context.js.map +1 -0
  35. package/components/custom-elements.d.ts +10 -0
  36. package/components/date-picker.js +372 -0
  37. package/components/date-picker.js.map +1 -0
  38. package/components/date-time-card.js +45 -0
  39. package/components/date-time-card.js.map +1 -0
  40. package/components/default-tree-item.js +22 -0
  41. package/components/default-tree-item.js.map +1 -0
  42. package/components/divider.js +32 -0
  43. package/components/divider.js.map +1 -0
  44. package/components/dropdown-item.js +69 -0
  45. package/components/dropdown-item.js.map +1 -0
  46. package/components/dropdown.js +351 -0
  47. package/components/dropdown.js.map +1 -0
  48. package/components/filter-chip.js +56 -0
  49. package/components/filter-chip.js.map +1 -0
  50. package/components/flip-tile-state.js +20 -0
  51. package/components/flip-tile-state.js.map +1 -0
  52. package/components/floating-ui.dom.esm.js +1512 -0
  53. package/components/floating-ui.dom.esm.js.map +1 -0
  54. package/components/group-context-menu.js +73 -0
  55. package/components/group-context-menu.js.map +1 -0
  56. package/components/group-item.js +58 -0
  57. package/components/group-item.js.map +1 -0
  58. package/components/icon-button.js +99 -0
  59. package/components/icon-button.js.map +1 -0
  60. package/components/index.d.ts +27 -0
  61. package/components/index.js +101 -0
  62. package/components/index.js.map +1 -0
  63. package/components/ix-action-card.d.ts +11 -0
  64. package/components/ix-action-card.js +66 -0
  65. package/components/ix-action-card.js.map +1 -0
  66. package/components/ix-application-header.d.ts +11 -0
  67. package/components/ix-application-header.js +8 -0
  68. package/components/ix-application-header.js.map +1 -0
  69. package/components/ix-application-sidebar.d.ts +11 -0
  70. package/components/ix-application-sidebar.js +63 -0
  71. package/components/ix-application-sidebar.js.map +1 -0
  72. package/components/ix-application.d.ts +11 -0
  73. package/components/ix-application.js +128 -0
  74. package/components/ix-application.js.map +1 -0
  75. package/components/ix-avatar.d.ts +11 -0
  76. package/components/ix-avatar.js +8 -0
  77. package/components/ix-avatar.js.map +1 -0
  78. package/components/ix-basic-navigation.d.ts +11 -0
  79. package/components/ix-basic-navigation.js +132 -0
  80. package/components/ix-basic-navigation.js.map +1 -0
  81. package/components/ix-blind.d.ts +11 -0
  82. package/components/ix-blind.js +128 -0
  83. package/components/ix-blind.js.map +1 -0
  84. package/components/ix-breadcrumb-item.d.ts +11 -0
  85. package/components/ix-breadcrumb-item.js +8 -0
  86. package/components/ix-breadcrumb-item.js.map +1 -0
  87. package/components/ix-breadcrumb.d.ts +11 -0
  88. package/components/ix-breadcrumb.js +154 -0
  89. package/components/ix-breadcrumb.js.map +1 -0
  90. package/components/ix-burger-menu.d.ts +11 -0
  91. package/components/ix-burger-menu.js +8 -0
  92. package/components/ix-burger-menu.js.map +1 -0
  93. package/components/ix-button.d.ts +11 -0
  94. package/components/ix-button.js +8 -0
  95. package/components/ix-button.js.map +1 -0
  96. package/components/ix-card-accordion.d.ts +11 -0
  97. package/components/ix-card-accordion.js +8 -0
  98. package/components/ix-card-accordion.js.map +1 -0
  99. package/components/ix-card-content.d.ts +11 -0
  100. package/components/ix-card-content.js +8 -0
  101. package/components/ix-card-content.js.map +1 -0
  102. package/components/ix-card-list.d.ts +11 -0
  103. package/components/ix-card-list.js +228 -0
  104. package/components/ix-card-list.js.map +1 -0
  105. package/components/ix-card-title.d.ts +11 -0
  106. package/components/ix-card-title.js +8 -0
  107. package/components/ix-card-title.js.map +1 -0
  108. package/components/ix-card.d.ts +11 -0
  109. package/components/ix-card.js +8 -0
  110. package/components/ix-card.js.map +1 -0
  111. package/components/ix-category-filter.d.ts +11 -0
  112. package/components/ix-category-filter.js +464 -0
  113. package/components/ix-category-filter.js.map +1 -0
  114. package/components/ix-chip.d.ts +11 -0
  115. package/components/ix-chip.js +98 -0
  116. package/components/ix-chip.js.map +1 -0
  117. package/components/ix-col.d.ts +11 -0
  118. package/components/ix-col.js +96 -0
  119. package/components/ix-col.js.map +1 -0
  120. package/components/ix-content-header.d.ts +11 -0
  121. package/components/ix-content-header.js +63 -0
  122. package/components/ix-content-header.js.map +1 -0
  123. package/components/ix-content.d.ts +11 -0
  124. package/components/ix-content.js +48 -0
  125. package/components/ix-content.js.map +1 -0
  126. package/components/ix-css-grid-item.d.ts +11 -0
  127. package/components/ix-css-grid-item.js +40 -0
  128. package/components/ix-css-grid-item.js.map +1 -0
  129. package/components/ix-css-grid.d.ts +11 -0
  130. package/components/ix-css-grid.js +113 -0
  131. package/components/ix-css-grid.js.map +1 -0
  132. package/components/ix-date-picker.d.ts +11 -0
  133. package/components/ix-date-picker.js +8 -0
  134. package/components/ix-date-picker.js.map +1 -0
  135. package/components/ix-date-time-card.d.ts +11 -0
  136. package/components/ix-date-time-card.js +8 -0
  137. package/components/ix-date-time-card.js.map +1 -0
  138. package/components/ix-datetime-picker.d.ts +11 -0
  139. package/components/ix-datetime-picker.js +149 -0
  140. package/components/ix-datetime-picker.js.map +1 -0
  141. package/components/ix-divider.d.ts +11 -0
  142. package/components/ix-divider.js +8 -0
  143. package/components/ix-divider.js.map +1 -0
  144. package/components/ix-drawer.d.ts +11 -0
  145. package/components/ix-drawer.js +145 -0
  146. package/components/ix-drawer.js.map +1 -0
  147. package/components/ix-dropdown-button.d.ts +11 -0
  148. package/components/ix-dropdown-button.js +92 -0
  149. package/components/ix-dropdown-button.js.map +1 -0
  150. package/components/ix-dropdown-header.d.ts +11 -0
  151. package/components/ix-dropdown-header.js +44 -0
  152. package/components/ix-dropdown-header.js.map +1 -0
  153. package/components/ix-dropdown-item.d.ts +11 -0
  154. package/components/ix-dropdown-item.js +8 -0
  155. package/components/ix-dropdown-item.js.map +1 -0
  156. package/components/ix-dropdown-quick-actions.d.ts +11 -0
  157. package/components/ix-dropdown-quick-actions.js +35 -0
  158. package/components/ix-dropdown-quick-actions.js.map +1 -0
  159. package/components/ix-dropdown.d.ts +11 -0
  160. package/components/ix-dropdown.js +8 -0
  161. package/components/ix-dropdown.js.map +1 -0
  162. package/components/ix-empty-state.d.ts +11 -0
  163. package/components/ix-empty-state.js +65 -0
  164. package/components/ix-empty-state.js.map +1 -0
  165. package/components/ix-event-list-item.d.ts +11 -0
  166. package/components/ix-event-list-item.js +61 -0
  167. package/components/ix-event-list-item.js.map +1 -0
  168. package/components/ix-event-list.d.ts +11 -0
  169. package/components/ix-event-list.js +143 -0
  170. package/components/ix-event-list.js.map +1 -0
  171. package/components/ix-expanding-search.d.ts +11 -0
  172. package/components/ix-expanding-search.js +119 -0
  173. package/components/ix-expanding-search.js.map +1 -0
  174. package/components/ix-filter-chip.d.ts +11 -0
  175. package/components/ix-filter-chip.js +8 -0
  176. package/components/ix-filter-chip.js.map +1 -0
  177. package/components/ix-flip-tile-content.d.ts +11 -0
  178. package/components/ix-flip-tile-content.js +38 -0
  179. package/components/ix-flip-tile-content.js.map +1 -0
  180. package/components/ix-flip-tile.d.ts +11 -0
  181. package/components/ix-flip-tile.js +121 -0
  182. package/components/ix-flip-tile.js.map +1 -0
  183. package/components/ix-form-field.d.ts +11 -0
  184. package/components/ix-form-field.js +43 -0
  185. package/components/ix-form-field.js.map +1 -0
  186. package/components/ix-group-context-menu.d.ts +11 -0
  187. package/components/ix-group-context-menu.js +8 -0
  188. package/components/ix-group-context-menu.js.map +1 -0
  189. package/components/ix-group-item.d.ts +11 -0
  190. package/components/ix-group-item.js +8 -0
  191. package/components/ix-group-item.js.map +1 -0
  192. package/components/ix-group.d.ts +11 -0
  193. package/components/ix-group.js +178 -0
  194. package/components/ix-group.js.map +1 -0
  195. package/components/ix-icon-button.d.ts +11 -0
  196. package/components/ix-icon-button.js +8 -0
  197. package/components/ix-icon-button.js.map +1 -0
  198. package/components/ix-icon-toggle-button.d.ts +11 -0
  199. package/components/ix-icon-toggle-button.js +116 -0
  200. package/components/ix-icon-toggle-button.js.map +1 -0
  201. package/components/ix-input-group.d.ts +11 -0
  202. package/components/ix-input-group.js +143 -0
  203. package/components/ix-input-group.js.map +1 -0
  204. package/components/ix-key-value-list.d.ts +11 -0
  205. package/components/ix-key-value-list.js +38 -0
  206. package/components/ix-key-value-list.js.map +1 -0
  207. package/components/ix-key-value.d.ts +11 -0
  208. package/components/ix-key-value.js +47 -0
  209. package/components/ix-key-value.js.map +1 -0
  210. package/components/ix-kpi.d.ts +11 -0
  211. package/components/ix-kpi.js +69 -0
  212. package/components/ix-kpi.js.map +1 -0
  213. package/components/ix-layout-grid.d.ts +11 -0
  214. package/components/ix-layout-grid.js +47 -0
  215. package/components/ix-layout-grid.js.map +1 -0
  216. package/components/ix-link-button.d.ts +11 -0
  217. package/components/ix-link-button.js +48 -0
  218. package/components/ix-link-button.js.map +1 -0
  219. package/components/ix-map-navigation-overlay.d.ts +11 -0
  220. package/components/ix-map-navigation-overlay.js +8 -0
  221. package/components/ix-map-navigation-overlay.js.map +1 -0
  222. package/components/ix-map-navigation.d.ts +11 -0
  223. package/components/ix-map-navigation.js +226 -0
  224. package/components/ix-map-navigation.js.map +1 -0
  225. package/components/ix-menu-about-item.d.ts +11 -0
  226. package/components/ix-menu-about-item.js +38 -0
  227. package/components/ix-menu-about-item.js.map +1 -0
  228. package/components/ix-menu-about-news.d.ts +11 -0
  229. package/components/ix-menu-about-news.js +83 -0
  230. package/components/ix-menu-about-news.js.map +1 -0
  231. package/components/ix-menu-about.d.ts +11 -0
  232. package/components/ix-menu-about.js +119 -0
  233. package/components/ix-menu-about.js.map +1 -0
  234. package/components/ix-menu-avatar-item.d.ts +11 -0
  235. package/components/ix-menu-avatar-item.js +8 -0
  236. package/components/ix-menu-avatar-item.js.map +1 -0
  237. package/components/ix-menu-avatar.d.ts +11 -0
  238. package/components/ix-menu-avatar.js +77 -0
  239. package/components/ix-menu-avatar.js.map +1 -0
  240. package/components/ix-menu-category.d.ts +11 -0
  241. package/components/ix-menu-category.js +190 -0
  242. package/components/ix-menu-category.js.map +1 -0
  243. package/components/ix-menu-item.d.ts +11 -0
  244. package/components/ix-menu-item.js +8 -0
  245. package/components/ix-menu-item.js.map +1 -0
  246. package/components/ix-menu-settings-item.d.ts +11 -0
  247. package/components/ix-menu-settings-item.js +38 -0
  248. package/components/ix-menu-settings-item.js.map +1 -0
  249. package/components/ix-menu-settings.d.ts +11 -0
  250. package/components/ix-menu-settings.js +106 -0
  251. package/components/ix-menu-settings.js.map +1 -0
  252. package/components/ix-menu.d.ts +11 -0
  253. package/components/ix-menu.js +508 -0
  254. package/components/ix-menu.js.map +1 -0
  255. package/components/ix-message-bar.d.ts +11 -0
  256. package/components/ix-message-bar.js +87 -0
  257. package/components/ix-message-bar.js.map +1 -0
  258. package/components/ix-modal-content.d.ts +11 -0
  259. package/components/ix-modal-content.js +35 -0
  260. package/components/ix-modal-content.js.map +1 -0
  261. package/components/ix-modal-example.d.ts +11 -0
  262. package/components/ix-modal-example.js +58 -0
  263. package/components/ix-modal-example.js.map +1 -0
  264. package/components/ix-modal-footer.d.ts +11 -0
  265. package/components/ix-modal-footer.js +35 -0
  266. package/components/ix-modal-footer.js.map +1 -0
  267. package/components/ix-modal-header.d.ts +11 -0
  268. package/components/ix-modal-header.js +84 -0
  269. package/components/ix-modal-header.js.map +1 -0
  270. package/components/ix-modal-loading.d.ts +11 -0
  271. package/components/ix-modal-loading.js +41 -0
  272. package/components/ix-modal-loading.js.map +1 -0
  273. package/components/ix-modal.d.ts +11 -0
  274. package/components/ix-modal.js +155 -0
  275. package/components/ix-modal.js.map +1 -0
  276. package/components/ix-pagination.d.ts +11 -0
  277. package/components/ix-pagination.js +211 -0
  278. package/components/ix-pagination.js.map +1 -0
  279. package/components/ix-pill.d.ts +11 -0
  280. package/components/ix-pill.js +78 -0
  281. package/components/ix-pill.js.map +1 -0
  282. package/components/ix-push-card.d.ts +11 -0
  283. package/components/ix-push-card.js +80 -0
  284. package/components/ix-push-card.js.map +1 -0
  285. package/components/ix-row.d.ts +11 -0
  286. package/components/ix-row.js +35 -0
  287. package/components/ix-row.js.map +1 -0
  288. package/components/ix-select-item.d.ts +11 -0
  289. package/components/ix-select-item.js +8 -0
  290. package/components/ix-select-item.js.map +1 -0
  291. package/components/ix-select.d.ts +11 -0
  292. package/components/ix-select.js +8 -0
  293. package/components/ix-select.js.map +1 -0
  294. package/components/ix-slider.d.ts +11 -0
  295. package/components/ix-slider.js +192 -0
  296. package/components/ix-slider.js.map +1 -0
  297. package/components/ix-spinner.d.ts +11 -0
  298. package/components/ix-spinner.js +8 -0
  299. package/components/ix-spinner.js.map +1 -0
  300. package/components/ix-split-button-item.d.ts +11 -0
  301. package/components/ix-split-button-item.js +51 -0
  302. package/components/ix-split-button-item.js.map +1 -0
  303. package/components/ix-split-button.d.ts +11 -0
  304. package/components/ix-split-button.js +97 -0
  305. package/components/ix-split-button.js.map +1 -0
  306. package/components/ix-tab-item.d.ts +11 -0
  307. package/components/ix-tab-item.js +8 -0
  308. package/components/ix-tab-item.js.map +1 -0
  309. package/components/ix-tabs.d.ts +11 -0
  310. package/components/ix-tabs.js +8 -0
  311. package/components/ix-tabs.js.map +1 -0
  312. package/components/ix-tile.d.ts +11 -0
  313. package/components/ix-tile.js +59 -0
  314. package/components/ix-tile.js.map +1 -0
  315. package/components/ix-time-picker.d.ts +11 -0
  316. package/components/ix-time-picker.js +8 -0
  317. package/components/ix-time-picker.js.map +1 -0
  318. package/components/ix-toast-container.d.ts +11 -0
  319. package/components/ix-toast-container.js +124 -0
  320. package/components/ix-toast-container.js.map +1 -0
  321. package/components/ix-toast.d.ts +11 -0
  322. package/components/ix-toast.js +8 -0
  323. package/components/ix-toast.js.map +1 -0
  324. package/components/ix-toggle-button.d.ts +11 -0
  325. package/components/ix-toggle-button.js +105 -0
  326. package/components/ix-toggle-button.js.map +1 -0
  327. package/components/ix-toggle.d.ts +11 -0
  328. package/components/ix-toggle.js +62 -0
  329. package/components/ix-toggle.js.map +1 -0
  330. package/components/ix-tooltip.d.ts +11 -0
  331. package/components/ix-tooltip.js +8 -0
  332. package/components/ix-tooltip.js.map +1 -0
  333. package/components/ix-tree-item.d.ts +11 -0
  334. package/components/ix-tree-item.js +8 -0
  335. package/components/ix-tree-item.js.map +1 -0
  336. package/components/ix-tree.d.ts +11 -0
  337. package/components/ix-tree.js +727 -0
  338. package/components/ix-tree.js.map +1 -0
  339. package/components/ix-typography.d.ts +11 -0
  340. package/components/ix-typography.js +8 -0
  341. package/components/ix-typography.js.map +1 -0
  342. package/components/ix-upload.d.ts +11 -0
  343. package/components/ix-upload.js +147 -0
  344. package/components/ix-upload.js.map +1 -0
  345. package/components/ix-validation-tooltip.d.ts +11 -0
  346. package/components/ix-validation-tooltip.js +170 -0
  347. package/components/ix-validation-tooltip.js.map +1 -0
  348. package/components/ix-workflow-step.d.ts +11 -0
  349. package/components/ix-workflow-step.js +120 -0
  350. package/components/ix-workflow-step.js.map +1 -0
  351. package/components/ix-workflow-steps.d.ts +11 -0
  352. package/components/ix-workflow-steps.js +99 -0
  353. package/components/ix-workflow-steps.js.map +1 -0
  354. package/components/logical-filter-operator.js +35 -0
  355. package/components/logical-filter-operator.js.map +1 -0
  356. package/components/luxon.js +7828 -0
  357. package/components/luxon.js.map +1 -0
  358. package/components/map-navigation-overlay.js +89 -0
  359. package/components/map-navigation-overlay.js.map +1 -0
  360. package/components/menu-avatar-item.js +45 -0
  361. package/components/menu-avatar-item.js.map +1 -0
  362. package/components/menu-item.js +92 -0
  363. package/components/menu-item.js.map +1 -0
  364. package/components/menu-service.js +156 -0
  365. package/components/menu-service.js.map +1 -0
  366. package/components/modal.js +245 -0
  367. package/components/modal.js.map +1 -0
  368. package/components/mutation-observer.js +13 -0
  369. package/components/mutation-observer.js.map +1 -0
  370. package/components/my-component.d.ts +11 -0
  371. package/components/my-component.js +34 -0
  372. package/components/my-component.js.map +1 -0
  373. package/components/package.json +8 -0
  374. package/components/rwd.util.js +41 -0
  375. package/components/rwd.util.js.map +1 -0
  376. package/components/select-item.js +92 -0
  377. package/components/select-item.js.map +1 -0
  378. package/components/select.js +410 -0
  379. package/components/select.js.map +1 -0
  380. package/components/shadow-dom.js +21 -0
  381. package/components/shadow-dom.js.map +1 -0
  382. package/components/spinner.js +48 -0
  383. package/components/spinner.js.map +1 -0
  384. package/components/tab-item.js +87 -0
  385. package/components/tab-item.js.map +1 -0
  386. package/components/tabs.js +227 -0
  387. package/components/tabs.js.map +1 -0
  388. package/components/theme-switcher.js +123 -0
  389. package/components/theme-switcher.js.map +1 -0
  390. package/components/time-picker.js +252 -0
  391. package/components/time-picker.js.map +1 -0
  392. package/components/toast.js +105 -0
  393. package/components/toast.js.map +1 -0
  394. package/components/tooltip.js +197 -0
  395. package/components/tooltip.js.map +1 -0
  396. package/components/tree-item.js +51 -0
  397. package/components/tree-item.js.map +1 -0
  398. package/components/typed-event.js +46 -0
  399. package/components/typed-event.js.map +1 -0
  400. package/components/typography.js +76 -0
  401. package/components/typography.js.map +1 -0
  402. package/components/upload-file-state.js +19 -0
  403. package/components/upload-file-state.js.map +1 -0
  404. package/dist/cjs/{a11y-4fdcefb4.js → a11y-7e1c1b86.js} +2 -2
  405. package/dist/cjs/a11y-7e1c1b86.js.map +1 -0
  406. package/dist/cjs/ix-application-header.cjs.entry.js +15 -2
  407. package/dist/cjs/ix-application-header.cjs.entry.js.map +1 -1
  408. package/dist/cjs/ix-blind.cjs.entry.js +1 -1
  409. package/dist/cjs/ix-breadcrumb-item.cjs.entry.js +11 -4
  410. package/dist/cjs/ix-breadcrumb-item.cjs.entry.js.map +1 -1
  411. package/dist/cjs/ix-breadcrumb.cjs.entry.js +5 -2
  412. package/dist/cjs/ix-breadcrumb.cjs.entry.js.map +1 -1
  413. package/dist/cjs/ix-burger-menu.cjs.entry.js +1 -1
  414. package/dist/cjs/ix-button.cjs.entry.js +1 -1
  415. package/dist/cjs/ix-button.cjs.entry.js.map +1 -1
  416. package/dist/cjs/ix-category-filter.cjs.entry.js +1 -1
  417. package/dist/cjs/ix-category-filter.cjs.entry.js.map +1 -1
  418. package/dist/cjs/ix-drawer.cjs.entry.js +1 -1
  419. package/dist/cjs/ix-drawer.cjs.entry.js.map +1 -1
  420. package/dist/cjs/ix-dropdown.cjs.entry.js +9 -4
  421. package/dist/cjs/ix-dropdown.cjs.entry.js.map +1 -1
  422. package/dist/cjs/ix-icon-button_2.cjs.entry.js +1 -1
  423. package/dist/cjs/ix-icon-button_2.cjs.entry.js.map +1 -1
  424. package/dist/cjs/ix-icon-toggle-button.cjs.entry.js +2 -2
  425. package/dist/cjs/ix-icon-toggle-button.cjs.entry.js.map +1 -1
  426. package/dist/cjs/ix-input-group.cjs.entry.js +16 -3
  427. package/dist/cjs/ix-input-group.cjs.entry.js.map +1 -1
  428. package/dist/cjs/ix-menu.cjs.entry.js.map +1 -1
  429. package/dist/cjs/ix-modal.cjs.entry.js +2 -3
  430. package/dist/cjs/ix-modal.cjs.entry.js.map +1 -1
  431. package/dist/cjs/ix-pagination.cjs.entry.js +3 -3
  432. package/dist/cjs/ix-pagination.cjs.entry.js.map +1 -1
  433. package/dist/cjs/ix-slider.cjs.entry.js +1 -1
  434. package/dist/cjs/ix-toggle-button.cjs.entry.js +1 -1
  435. package/dist/cjs/ix-toggle.cjs.entry.js +1 -1
  436. package/dist/cjs/loader.cjs.js +1 -1
  437. package/dist/cjs/siemens-ix.cjs.js +1 -1
  438. package/dist/collection/components/application-header/application-header.js +18 -3
  439. package/dist/collection/components/application-header/application-header.js.map +1 -1
  440. package/dist/collection/components/application-header/test/application-headet.ct.js +16 -1
  441. package/dist/collection/components/application-header/test/application-headet.ct.js.map +1 -1
  442. package/dist/collection/components/breadcrumb/breadcrumb.js +4 -1
  443. package/dist/collection/components/breadcrumb/breadcrumb.js.map +1 -1
  444. package/dist/collection/components/breadcrumb-item/breadcrumb-item.css +36 -0
  445. package/dist/collection/components/breadcrumb-item/breadcrumb-item.js +14 -2
  446. package/dist/collection/components/breadcrumb-item/breadcrumb-item.js.map +1 -1
  447. package/dist/collection/components/button/button.css +18 -0
  448. package/dist/collection/components/button/test/button.ct.js +6 -0
  449. package/dist/collection/components/button/test/button.ct.js.map +1 -1
  450. package/dist/collection/components/category-filter/category-filter.css +18 -0
  451. package/dist/collection/components/drawer/drawer.css +4 -0
  452. package/dist/collection/components/dropdown/dropdown.js +9 -4
  453. package/dist/collection/components/dropdown/dropdown.js.map +1 -1
  454. package/dist/collection/components/dropdown/test/dropdown.ct.js +21 -0
  455. package/dist/collection/components/dropdown/test/dropdown.ct.js.map +1 -1
  456. package/dist/collection/components/icon-button/icon-button.css +18 -0
  457. package/dist/collection/components/icon-toggle-button/icon-toggle-button.css +18 -0
  458. package/dist/collection/components/input-group/input-group.js +16 -3
  459. package/dist/collection/components/input-group/input-group.js.map +1 -1
  460. package/dist/collection/components/input-group/tests/input-group.ct.js +86 -0
  461. package/dist/collection/components/input-group/tests/input-group.ct.js.map +1 -0
  462. package/dist/collection/components/menu/menu.js +4 -1
  463. package/dist/collection/components/menu/menu.js.map +1 -1
  464. package/dist/collection/components/modal/modal.js +1 -2
  465. package/dist/collection/components/modal/modal.js.map +1 -1
  466. package/dist/collection/components/pagination/pagination.css +18 -0
  467. package/dist/collection/components/pagination/pagination.js +1 -1
  468. package/dist/collection/components/pagination/pagination.js.map +1 -1
  469. package/dist/collection/components/pagination/test/pagination.ct.js +20 -0
  470. package/dist/collection/components/pagination/test/pagination.ct.js.map +1 -1
  471. package/dist/collection/components/utils/a11y.js +1 -1
  472. package/dist/collection/components/utils/a11y.js.map +1 -1
  473. package/dist/esm/a11y-115b6a36.js +79 -0
  474. package/dist/esm/a11y-115b6a36.js.map +1 -0
  475. package/dist/esm/ix-application-header.entry.js +15 -2
  476. package/dist/esm/ix-application-header.entry.js.map +1 -1
  477. package/dist/esm/ix-blind.entry.js +1 -1
  478. package/dist/esm/ix-breadcrumb-item.entry.js +11 -4
  479. package/dist/esm/ix-breadcrumb-item.entry.js.map +1 -1
  480. package/dist/esm/ix-breadcrumb.entry.js +5 -2
  481. package/dist/esm/ix-breadcrumb.entry.js.map +1 -1
  482. package/dist/esm/ix-burger-menu.entry.js +1 -1
  483. package/dist/esm/ix-button.entry.js +1 -1
  484. package/dist/esm/ix-button.entry.js.map +1 -1
  485. package/dist/esm/ix-category-filter.entry.js +1 -1
  486. package/dist/esm/ix-category-filter.entry.js.map +1 -1
  487. package/dist/esm/ix-drawer.entry.js +1 -1
  488. package/dist/esm/ix-drawer.entry.js.map +1 -1
  489. package/dist/esm/ix-dropdown.entry.js +9 -4
  490. package/dist/esm/ix-dropdown.entry.js.map +1 -1
  491. package/dist/esm/ix-icon-button_2.entry.js +1 -1
  492. package/dist/esm/ix-icon-button_2.entry.js.map +1 -1
  493. package/dist/esm/ix-icon-toggle-button.entry.js +2 -2
  494. package/dist/esm/ix-icon-toggle-button.entry.js.map +1 -1
  495. package/dist/esm/ix-input-group.entry.js +16 -3
  496. package/dist/esm/ix-input-group.entry.js.map +1 -1
  497. package/dist/esm/ix-menu.entry.js.map +1 -1
  498. package/dist/esm/ix-modal.entry.js +2 -3
  499. package/dist/esm/ix-modal.entry.js.map +1 -1
  500. package/dist/esm/ix-pagination.entry.js +3 -3
  501. package/dist/esm/ix-pagination.entry.js.map +1 -1
  502. package/dist/esm/ix-slider.entry.js +1 -1
  503. package/dist/esm/ix-toggle-button.entry.js +1 -1
  504. package/dist/esm/ix-toggle.entry.js +1 -1
  505. package/dist/esm/loader.js +1 -1
  506. package/dist/esm/siemens-ix.js +1 -1
  507. package/dist/siemens-ix/{p-4796a3ae.entry.js → p-042b8889.entry.js} +2 -2
  508. package/dist/siemens-ix/{p-b53bed3a.entry.js → p-228c5657.entry.js} +2 -2
  509. package/dist/siemens-ix/{p-fa0d5f4e.entry.js → p-28d29e36.entry.js} +2 -2
  510. package/dist/siemens-ix/p-2fd30d79.js +2 -0
  511. package/dist/siemens-ix/p-2fd30d79.js.map +1 -0
  512. package/dist/siemens-ix/p-302cd093.entry.js +2 -0
  513. package/dist/siemens-ix/{p-eb29049a.entry.js.map → p-302cd093.entry.js.map} +1 -1
  514. package/dist/siemens-ix/p-32265ee2.entry.js +2 -0
  515. package/dist/siemens-ix/p-32265ee2.entry.js.map +1 -0
  516. package/dist/siemens-ix/p-355f9085.entry.js +2 -0
  517. package/dist/siemens-ix/{p-74a7d191.entry.js.map → p-355f9085.entry.js.map} +1 -1
  518. package/dist/siemens-ix/p-574e3cd1.entry.js +2 -0
  519. package/dist/siemens-ix/p-574e3cd1.entry.js.map +1 -0
  520. package/dist/siemens-ix/p-59dc0873.entry.js +2 -0
  521. package/dist/siemens-ix/{p-90efad65.entry.js.map → p-59dc0873.entry.js.map} +1 -1
  522. package/dist/siemens-ix/p-7cc23245.entry.js +2 -0
  523. package/dist/siemens-ix/p-7cc23245.entry.js.map +1 -0
  524. package/dist/siemens-ix/p-9249df8d.entry.js +2 -0
  525. package/dist/siemens-ix/{p-d78cd3f4.entry.js.map → p-9249df8d.entry.js.map} +1 -1
  526. package/dist/siemens-ix/p-ad94f795.entry.js +2 -0
  527. package/dist/siemens-ix/p-ad94f795.entry.js.map +1 -0
  528. package/dist/siemens-ix/{p-0ebc6c4d.entry.js → p-b2042a15.entry.js} +2 -2
  529. package/dist/siemens-ix/p-b2042a15.entry.js.map +1 -0
  530. package/dist/siemens-ix/p-bd873b87.entry.js +2 -0
  531. package/dist/siemens-ix/p-bd873b87.entry.js.map +1 -0
  532. package/dist/siemens-ix/{p-6ae65cac.entry.js → p-c1318e16.entry.js} +2 -2
  533. package/dist/siemens-ix/p-c7e502d7.entry.js +2 -0
  534. package/dist/siemens-ix/p-c7e502d7.entry.js.map +1 -0
  535. package/dist/siemens-ix/p-dcb957d8.entry.js.map +1 -1
  536. package/dist/siemens-ix/{p-77b14ca1.entry.js → p-f304f7ce.entry.js} +2 -2
  537. package/dist/siemens-ix/p-fa7f3eef.entry.js +2 -0
  538. package/dist/siemens-ix/p-fa7f3eef.entry.js.map +1 -0
  539. package/dist/siemens-ix/siemens-ix-core.css +1 -1
  540. package/dist/siemens-ix/siemens-ix.css +12 -0
  541. package/dist/siemens-ix/siemens-ix.esm.js +1 -1
  542. package/dist/siemens-ix/siemens-ix.esm.js.map +1 -1
  543. package/dist/types/components/application-header/application-header.d.ts +1 -0
  544. package/dist/types/components/breadcrumb-item/breadcrumb-item.d.ts +2 -0
  545. package/dist/types/components/input-group/input-group.d.ts +1 -0
  546. package/dist/types/components/input-group/tests/input-group.ct.d.ts +1 -0
  547. package/dist/types/components/menu/menu.d.ts +2 -0
  548. package/dist/types/components.d.ts +2 -0
  549. package/package.json +1 -1
  550. package/scss/components/_checkboxes.scss +3 -0
  551. package/scss/components/_radiobuttons.scss +5 -0
  552. package/dist/cjs/a11y-4fdcefb4.js.map +0 -1
  553. package/dist/esm/a11y-d5dd20ad.js.map +0 -1
  554. package/dist/siemens-ix/p-0ebc6c4d.entry.js.map +0 -1
  555. package/dist/siemens-ix/p-2e75f0e4.entry.js +0 -2
  556. package/dist/siemens-ix/p-2e75f0e4.entry.js.map +0 -1
  557. package/dist/siemens-ix/p-66d7fbd9.entry.js +0 -2
  558. package/dist/siemens-ix/p-66d7fbd9.entry.js.map +0 -1
  559. package/dist/siemens-ix/p-74a7d191.entry.js +0 -2
  560. package/dist/siemens-ix/p-774eca79.entry.js +0 -2
  561. package/dist/siemens-ix/p-774eca79.entry.js.map +0 -1
  562. package/dist/siemens-ix/p-78c9489b.js +0 -2
  563. package/dist/siemens-ix/p-78c9489b.js.map +0 -1
  564. package/dist/siemens-ix/p-7a884056.entry.js +0 -2
  565. package/dist/siemens-ix/p-7a884056.entry.js.map +0 -1
  566. package/dist/siemens-ix/p-7b362f58.entry.js +0 -2
  567. package/dist/siemens-ix/p-7b362f58.entry.js.map +0 -1
  568. package/dist/siemens-ix/p-90efad65.entry.js +0 -2
  569. package/dist/siemens-ix/p-d78cd3f4.entry.js +0 -2
  570. package/dist/siemens-ix/p-d9c99b88.entry.js +0 -2
  571. package/dist/siemens-ix/p-d9c99b88.entry.js.map +0 -1
  572. package/dist/siemens-ix/p-eb29049a.entry.js +0 -2
  573. package/dist/siemens-ix/p-f7b95fd7.entry.js +0 -2
  574. package/dist/siemens-ix/p-f7b95fd7.entry.js.map +0 -1
  575. /package/dist/siemens-ix/{p-4796a3ae.entry.js.map → p-042b8889.entry.js.map} +0 -0
  576. /package/dist/siemens-ix/{p-b53bed3a.entry.js.map → p-228c5657.entry.js.map} +0 -0
  577. /package/dist/siemens-ix/{p-fa0d5f4e.entry.js.map → p-28d29e36.entry.js.map} +0 -0
  578. /package/dist/siemens-ix/{p-6ae65cac.entry.js.map → p-c1318e16.entry.js.map} +0 -0
  579. /package/dist/siemens-ix/{p-77b14ca1.entry.js.map → p-f304f7ce.entry.js.map} +0 -0
package/dist/cjs/ix-icon-button_2.cjs.entry.js CHANGED
@@ -6,7 +6,7 @@ const index = require('./index-be499a74.js');
6
6
  const baseIconButton = require('./base-icon-button-bbca2582.js');
7
7
  require('./base-button-c158438e.js');
8
8
 
9
- const iconButtonCss = ":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host(.disabled){cursor:default}*,*::after,*::before{box-sizing:border-box}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar{width:0.5rem;height:0.5rem}::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}::-webkit-scrollbar-corner{display:none}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{display:inline-flex;justify-content:center;align-items:center}:host button{width:100%;height:100%;overflow:hidden;padding:0}:host button.btn-oval{border-radius:6.25rem}:host ix-icon{color:var(--ix-icon-button-color, currentColor);margin:0}:host ix-spinner{margin:0}:host(.btn-icon-12){height:1rem;width:1rem;min-width:1rem;min-height:1rem}:host(.btn-icon-16){height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}:host(.btn-icon-32){height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host(.btn-icon-12) ix-spinner{height:12px;width:12px}:host(.btn-icon-16) ix-spinner{height:16px;width:16px}:host(.btn-icon-32) ix-spinner{height:24px;width:24px}";
9
+ const iconButtonCss = ":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host(.disabled){cursor:default}*,*::after,*::before{box-sizing:border-box}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar{width:0.5rem;height:0.5rem}::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}::-webkit-scrollbar-corner{display:none}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{display:inline-flex;justify-content:center;align-items:center}:host button{width:100%;height:100%;overflow:hidden;padding:0}:host button.btn-oval{border-radius:6.25rem}:host ix-icon{color:var(--ix-icon-button-color, currentColor);margin:0}:host ix-spinner{margin:0}:host(.btn-icon-12){height:1rem;width:1rem;min-width:1rem;min-height:1rem}:host(.btn-icon-16){height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}:host(.btn-icon-32){height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host(.btn-icon-12) ix-spinner{height:12px;width:12px}:host(.btn-icon-16) ix-spinner{height:16px;width:16px}:host(.btn-icon-32) ix-spinner{height:24px;width:24px}";
10
10
 
11
11
  const IconButton = class {
12
12
  constructor(hostRef) {
package/dist/cjs/ix-icon-button_2.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"ix-icon-button.ix-spinner.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,y5fAAy5f;;MCqBl6f,UAAU;;;mBAMgB,WAAW;;;;;gBA2BN,IAAI;;oBAU3B,KAAK;gBAKY,QAAQ;mBAO1B,KAAK;;EAOvB,gBAAgB;IACd,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;MAC1B,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;MACtD,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;MACpC,YAAY,CAAC,IAAI,GAAG,QAAQ,CAAC;MAC7B,YAAY,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;MAC3B,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;MAE3C,IAAI,CAAC,mBAAmB,GAAG,YAAY,CAAC;KACzC;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,mBAAmB,EAAE;MACtD,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,CAAC;KAClC;GACF;EAEO,gBAAgB;IACtB,OAAO;MACL,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI;KACtE,CAAC;GACH;EAED,MAAM;IACJ,MAAM,eAAe,GAAoB;MACvC,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,IAAI;MACd,QAAQ,EAAE,IAAI,CAAC,IAAI;MACnB,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;MACvC,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,SAAS,EAAE,IAAI,CAAC,KAAK;MACrB,QAAQ,EAAE,IAAI,CAAC,IAAI;MACnB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE;MACxC,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAE;KACtC,CAAC;IAEF,QACEA,QAACC,UAAI,IACH,KAAK,kCACA,IAAI,CAAC,gBAAgB,EAAE,KAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,OAGzCD,QAACE,6BAAc,oBAAK,eAAe,EAAmB,CACjD,EACP;GACH;;;;;ACzIH,MAAM,UAAU,GAAG,sjbAAsjb;;MCgB5jb,OAAO;;;mBAMyB,WAAW;gBAMpD,QAAQ;qBAKU,KAAK;;EAEzB,MAAM;IACJ,QACEF,QAACC,UAAI,IACH,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;QACpC,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QAClC,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QAC5B,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QAC9B,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QAC5B,YAAY,EAAE,IAAI,CAAC,SAAS;OAC7B,GACK,EACR;GACH;;;;;;;;","names":["h","Host","BaseIconButton"],"sources":["./src/components/icon-button/icon-button.scss?tag=ix-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx","./src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","./src/components/spinner/spinner.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import './icon-button-mixin.scss';\n\n@include base-icon-button;\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\n\nexport type IconButtonVariant = ButtonVariant;\n\n@Component({\n tag: 'ix-icon-button',\n styleUrl: 'icon-button.scss',\n shadow: true,\n})\nexport class IconButton {\n @Element() hostElement: HTMLIxIconButtonElement;\n\n /**\n * Variant of button\n */\n @Prop() variant: IconButtonVariant = 'secondary';\n\n /**\n * Button outline\n */\n @Prop() outline: boolean;\n\n /**\n * Button invisible\n */\n @Prop() ghost: boolean;\n\n /**\n * Button in oval shape\n */\n @Prop() oval: boolean;\n\n /**\n * Icon name\n */\n @Prop() icon: string;\n\n /**\n * Size of icon in button\n *\n * @deprecated Only size 32 will be removed in 3.0.0\n */\n @Prop() size: '32' | '24' | '16' | '12' = '24';\n\n /**\n * Color of icon in button\n */\n @Prop() color: string;\n\n /**\n * Disabled\n */\n @Prop() disabled = false;\n\n /**\n * Type of the button\n */\n @Prop() type: 'button' | 'submit' = 'button';\n\n /**\n * Loading button\n *\n * @since 2.0.0\n */\n @Prop() loading = false;\n\n /**\n * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n */\n submitButtonElement: HTMLButtonElement;\n\n componentDidLoad() {\n if (this.type === 'submit') {\n const submitButton = document.createElement('button');\n submitButton.style.display = 'none';\n submitButton.type = 'submit';\n submitButton.tabIndex = -1;\n this.hostElement.appendChild(submitButton);\n\n this.submitButtonElement = submitButton;\n }\n }\n\n dispatchFormEvents() {\n if (this.type === 'submit' && this.submitButtonElement) {\n this.submitButtonElement.click();\n }\n }\n\n private getIconSizeClass() {\n return {\n 'btn-icon-12': this.size === '12',\n 'btn-icon-16': this.size === '16',\n 'btn-icon-32': this.size === '32' || this.size === '24' || !this.size,\n };\n }\n\n render() {\n const baseButtonProps: BaseButtonProps = {\n variant: this.variant,\n outline: this.outline,\n ghost: this.ghost,\n iconOnly: true,\n iconOval: this.oval,\n selected: false,\n disabled: this.disabled || this.loading,\n icon: this.icon,\n iconColor: this.color,\n iconSize: this.size,\n loading: this.loading,\n onClick: () => this.dispatchFormEvents(),\n type: this.type,\n extraClasses: this.getIconSizeClass(),\n };\n\n return (\n <Host\n class={{\n ...this.getIconSizeClass(),\n disabled: this.disabled || this.loading,\n }}\n >\n <BaseIconButton {...baseButtonProps}></BaseIconButton>\n </Host>\n );\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/shadow-dom/component';\n\n@mixin ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 4px) {\n :host(.#{$host-class}) {\n @include ix-component;\n display: block;\n position: relative;\n\n width: $size;\n height: $size;\n min-width: $size;\n min-height: $size;\n max-width: $size;\n max-height: $size;\n border-radius: 100%;\n position: relative;\n animation: rotate 2s linear infinite;\n\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes clipMask {\n 0% {\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n 12.5% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n }\n 25% {\n clip-path: polygon(\n 50% 50%,\n 0 0,\n 100% 0,\n 100% 100%,\n 100% 100%,\n 100% 100%\n );\n }\n 37.5% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n }\n 50% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n 62.5% {\n clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n 75% {\n clip-path: polygon(\n 50% 50%,\n 100% 100%,\n 100% 100%,\n 100% 100%,\n 0 100%,\n 0 0\n );\n }\n 87.5% {\n clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n }\n 100% {\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n }\n }\n\n :host(.#{$host-class})::after {\n content: '';\n box-sizing: border-box;\n position: absolute;\n inset: 8.33%;\n border-radius: 100%;\n border: $track-size solid\n var(--ix-button-color, var(--theme-color-soft-text));\n animation: clipMask 3s linear infinite;\n }\n\n :host(:not(.hide-track)):host(.#{$host-class})::before {\n content: '';\n box-sizing: border-box;\n position: absolute;\n inset: 8.33%;\n border-radius: 100%;\n border: $track-size solid var(--theme-color-ghost--hover);\n }\n\n :host(.primary)::after {\n border-color: var(--theme-color-dynamic);\n }\n\n :host(.primary)::before {\n border-color: var(--theme-color-ghost--hover);\n }\n}\n\n@include ix-spinner($host-class: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($host-class: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($host-class: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($host-class: 'large', $size: 6rem, $track-size: 4px);\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Element() hostElement!: HTMLIxSpinnerElement;\n\n /**\n * Variant of spinner\n */\n @Prop() variant: 'primary' | 'secondary' = 'secondary';\n\n /**\n * Size of spinner\n */\n @Prop() size: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' =\n 'medium';\n\n /**\n * @internal\n */\n @Prop() hideTrack = false;\n\n render() {\n return (\n <Host\n class={{\n primary: this.variant === 'primary',\n 'xx-small': this.size === 'xx-small',\n 'x-small': this.size === 'x-small',\n small: this.size === 'small',\n medium: this.size === 'medium',\n large: this.size === 'large',\n 'hide-track': this.hideTrack,\n }}\n ></Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"ix-icon-button.ix-spinner.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,ungBAAungB;;MCqBhogB,UAAU;;;mBAMgB,WAAW;;;;;gBA2BN,IAAI;;oBAU3B,KAAK;gBAKY,QAAQ;mBAO1B,KAAK;;EAOvB,gBAAgB;IACd,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;MAC1B,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;MACtD,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;MACpC,YAAY,CAAC,IAAI,GAAG,QAAQ,CAAC;MAC7B,YAAY,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;MAC3B,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;MAE3C,IAAI,CAAC,mBAAmB,GAAG,YAAY,CAAC;KACzC;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,mBAAmB,EAAE;MACtD,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,CAAC;KAClC;GACF;EAEO,gBAAgB;IACtB,OAAO;MACL,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI;KACtE,CAAC;GACH;EAED,MAAM;IACJ,MAAM,eAAe,GAAoB;MACvC,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,IAAI;MACd,QAAQ,EAAE,IAAI,CAAC,IAAI;MACnB,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;MACvC,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,SAAS,EAAE,IAAI,CAAC,KAAK;MACrB,QAAQ,EAAE,IAAI,CAAC,IAAI;MACnB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE;MACxC,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAE;KACtC,CAAC;IAEF,QACEA,QAACC,UAAI,IACH,KAAK,kCACA,IAAI,CAAC,gBAAgB,EAAE,KAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,OAGzCD,QAACE,6BAAc,oBAAK,eAAe,EAAmB,CACjD,EACP;GACH;;;;;ACzIH,MAAM,UAAU,GAAG,sjbAAsjb;;MCgB5jb,OAAO;;;mBAMyB,WAAW;gBAMpD,QAAQ;qBAKU,KAAK;;EAEzB,MAAM;IACJ,QACEF,QAACC,UAAI,IACH,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;QACpC,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QAClC,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QAC5B,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QAC9B,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QAC5B,YAAY,EAAE,IAAI,CAAC,SAAS;OAC7B,GACK,EACR;GACH;;;;;;;;","names":["h","Host","BaseIconButton"],"sources":["./src/components/icon-button/icon-button.scss?tag=ix-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx","./src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","./src/components/spinner/spinner.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import './icon-button-mixin.scss';\n\n@include base-icon-button;\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\n\nexport type IconButtonVariant = ButtonVariant;\n\n@Component({\n tag: 'ix-icon-button',\n styleUrl: 'icon-button.scss',\n shadow: true,\n})\nexport class IconButton {\n @Element() hostElement: HTMLIxIconButtonElement;\n\n /**\n * Variant of button\n */\n @Prop() variant: IconButtonVariant = 'secondary';\n\n /**\n * Button outline\n */\n @Prop() outline: boolean;\n\n /**\n * Button invisible\n */\n @Prop() ghost: boolean;\n\n /**\n * Button in oval shape\n */\n @Prop() oval: boolean;\n\n /**\n * Icon name\n */\n @Prop() icon: string;\n\n /**\n * Size of icon in button\n *\n * @deprecated Only size 32 will be removed in 3.0.0\n */\n @Prop() size: '32' | '24' | '16' | '12' = '24';\n\n /**\n * Color of icon in button\n */\n @Prop() color: string;\n\n /**\n * Disabled\n */\n @Prop() disabled = false;\n\n /**\n * Type of the button\n */\n @Prop() type: 'button' | 'submit' = 'button';\n\n /**\n * Loading button\n *\n * @since 2.0.0\n */\n @Prop() loading = false;\n\n /**\n * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n */\n submitButtonElement: HTMLButtonElement;\n\n componentDidLoad() {\n if (this.type === 'submit') {\n const submitButton = document.createElement('button');\n submitButton.style.display = 'none';\n submitButton.type = 'submit';\n submitButton.tabIndex = -1;\n this.hostElement.appendChild(submitButton);\n\n this.submitButtonElement = submitButton;\n }\n }\n\n dispatchFormEvents() {\n if (this.type === 'submit' && this.submitButtonElement) {\n this.submitButtonElement.click();\n }\n }\n\n private getIconSizeClass() {\n return {\n 'btn-icon-12': this.size === '12',\n 'btn-icon-16': this.size === '16',\n 'btn-icon-32': this.size === '32' || this.size === '24' || !this.size,\n };\n }\n\n render() {\n const baseButtonProps: BaseButtonProps = {\n variant: this.variant,\n outline: this.outline,\n ghost: this.ghost,\n iconOnly: true,\n iconOval: this.oval,\n selected: false,\n disabled: this.disabled || this.loading,\n icon: this.icon,\n iconColor: this.color,\n iconSize: this.size,\n loading: this.loading,\n onClick: () => this.dispatchFormEvents(),\n type: this.type,\n extraClasses: this.getIconSizeClass(),\n };\n\n return (\n <Host\n class={{\n ...this.getIconSizeClass(),\n disabled: this.disabled || this.loading,\n }}\n >\n <BaseIconButton {...baseButtonProps}></BaseIconButton>\n </Host>\n );\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/shadow-dom/component';\n\n@mixin ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 4px) {\n :host(.#{$host-class}) {\n @include ix-component;\n display: block;\n position: relative;\n\n width: $size;\n height: $size;\n min-width: $size;\n min-height: $size;\n max-width: $size;\n max-height: $size;\n border-radius: 100%;\n position: relative;\n animation: rotate 2s linear infinite;\n\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes clipMask {\n 0% {\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n 12.5% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n }\n 25% {\n clip-path: polygon(\n 50% 50%,\n 0 0,\n 100% 0,\n 100% 100%,\n 100% 100%,\n 100% 100%\n );\n }\n 37.5% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n }\n 50% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n 62.5% {\n clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n 75% {\n clip-path: polygon(\n 50% 50%,\n 100% 100%,\n 100% 100%,\n 100% 100%,\n 0 100%,\n 0 0\n );\n }\n 87.5% {\n clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n }\n 100% {\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n }\n }\n\n :host(.#{$host-class})::after {\n content: '';\n box-sizing: border-box;\n position: absolute;\n inset: 8.33%;\n border-radius: 100%;\n border: $track-size solid\n var(--ix-button-color, var(--theme-color-soft-text));\n animation: clipMask 3s linear infinite;\n }\n\n :host(:not(.hide-track)):host(.#{$host-class})::before {\n content: '';\n box-sizing: border-box;\n position: absolute;\n inset: 8.33%;\n border-radius: 100%;\n border: $track-size solid var(--theme-color-ghost--hover);\n }\n\n :host(.primary)::after {\n border-color: var(--theme-color-dynamic);\n }\n\n :host(.primary)::before {\n border-color: var(--theme-color-ghost--hover);\n }\n}\n\n@include ix-spinner($host-class: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($host-class: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($host-class: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($host-class: 'large', $size: 6rem, $track-size: 4px);\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Element() hostElement!: HTMLIxSpinnerElement;\n\n /**\n * Variant of spinner\n */\n @Prop() variant: 'primary' | 'secondary' = 'secondary';\n\n /**\n * Size of spinner\n */\n @Prop() size: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' =\n 'medium';\n\n /**\n * @internal\n */\n @Prop() hideTrack = false;\n\n render() {\n return (\n <Host\n class={{\n primary: this.variant === 'primary',\n 'xx-small': this.size === 'xx-small',\n 'x-small': this.size === 'x-small',\n small: this.size === 'small',\n medium: this.size === 'medium',\n large: this.size === 'large',\n 'hide-track': this.hideTrack,\n }}\n ></Host>\n );\n }\n}\n"],"version":3}
package/dist/cjs/ix-icon-toggle-button.cjs.entry.js CHANGED
@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-be499a74.js');
6
6
  const baseIconButton = require('./base-icon-button-bbca2582.js');
7
- const a11y = require('./a11y-4fdcefb4.js');
7
+ const a11y = require('./a11y-7e1c1b86.js');
8
8
  require('./base-button-c158438e.js');
9
9
 
10
- const iconToggleButtonCss = ":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host(.disabled){cursor:default}*,*::after,*::before{box-sizing:border-box}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar{width:0.5rem;height:0.5rem}::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}::-webkit-scrollbar-corner{display:none}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{display:inline-flex;justify-content:center;align-items:center}:host button{width:100%;height:100%;overflow:hidden;padding:0}:host button.btn-oval{border-radius:6.25rem}:host ix-icon{color:var(--ix-icon-button-color, currentColor);margin:0}:host ix-spinner{margin:0}:host(.btn-icon-12){height:1rem;width:1rem;min-width:1rem;min-height:1rem}:host(.btn-icon-16){height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}:host(.btn-icon-32){height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host(.btn-icon-12) ix-spinner{height:12px;width:12px}:host(.btn-icon-16) ix-spinner{height:16px;width:16px}:host(.btn-icon-32) ix-spinner{height:24px;width:24px}";
10
+ const iconToggleButtonCss = ":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host(.disabled){cursor:default}*,*::after,*::before{box-sizing:border-box}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar{width:0.5rem;height:0.5rem}::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}::-webkit-scrollbar-corner{display:none}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{display:inline-flex;justify-content:center;align-items:center}:host button{width:100%;height:100%;overflow:hidden;padding:0}:host button.btn-oval{border-radius:6.25rem}:host ix-icon{color:var(--ix-icon-button-color, currentColor);margin:0}:host ix-spinner{margin:0}:host(.btn-icon-12){height:1rem;width:1rem;min-width:1rem;min-height:1rem}:host(.btn-icon-16){height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}:host(.btn-icon-32){height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host(.btn-icon-12) ix-spinner{height:12px;width:12px}:host(.btn-icon-16) ix-spinner{height:16px;width:16px}:host(.btn-icon-32) ix-spinner{height:24px;width:24px}";
11
11
 
12
12
  const IconToggleButton = class {
13
13
  constructor(hostRef) {
package/dist/cjs/ix-icon-toggle-button.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"ix-icon-toggle-button.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,y5fAAy5f;;MCgCx6f,gBAAgB;;;;mBAKM,WAAW;mBAK1B,KAAK;iBAKP,KAAK;;mBAUH,KAAK;gBAKY,IAAI;oBAKH,KAAK;mBAKd,KAAK;;EASxB,2BAA2B;IACjC,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;GACnE;EAEO,gBAAgB;IACtB,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H,CAAC;GACH;EAGD,eAAe;IACb,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE;MACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;GACF;EAGD,aAAa;IACX,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAGD,eAAe;IACb,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAED,gBAAgB;IACd,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAEO,qBAAqB;IAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACxC;EAEO,gBAAgB;IACtB,OAAO;MACL,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;KAClC,CAAC;GACH;EAED,MAAM;IACJ,MAAM,eAAe,GAAoB;MACvC,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,IAAI;MACd,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,IAAI,CAAC,OAAO;MACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;MACvC,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,QAAQ,EAAE,IAAI,CAAC,IAAI;MACnB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,EAAE;MAC3C,IAAI,EAAE,QAAQ;MACd,cAAc,EAAE;QACd,cAAc,EAAEA,gBAAW,CAAC,IAAI,CAAC,OAAO,CAAC;OAC1C;MACD,YAAY,kBACV,aAAa,EAAE,IAAI,IAChB,IAAI,CAAC,gBAAgB,EAAE,CAC3B;KACF,CAAC;IACF,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAE1D,QACEC,QAACC,UAAI,IACH,KAAK,kCACA,IAAI,CAAC,gBAAgB,EAAE,KAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,OAGzCD,QAACE,6BAAc,oBAAK,eAAe,EAAmB,CACjD,EACP;GACH;;;;;;;;;;;;","names":["a11yBoolean","h","Host","BaseIconButton"],"sources":["./src/components/icon-toggle-button/icon-toggle-button.scss?tag=ix-icon-toggle-button&encapsulation=shadow","./src/components/icon-toggle-button/icon-toggle-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import '../icon-button/icon-button-mixin.scss';\n\n@include base-icon-button;\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.0.0\n */\n@Component({\n tag: 'ix-icon-toggle-button',\n shadow: true,\n styleUrl: './icon-toggle-button.scss',\n})\nexport class IconToggleButton {\n /**\n * Button variant.\n * Important: Variant 'primary' can only be combined with either outline or ghost.\n */\n @Prop() variant: ButtonVariant = 'secondary';\n\n /**\n * Outline button\n */\n @Prop() outline = false;\n\n /**\n * Button with no background or outline\n */\n @Prop() ghost = false;\n\n /**\n * Icon name\n */\n @Prop() icon: string;\n\n /**\n * Show button as pressed\n */\n @Prop() pressed = false;\n\n /**\n * Size of icon in button\n */\n @Prop() size: '24' | '16' | '12' = '24';\n\n /**\n * Disable the button\n */\n @Prop({ reflect: true }) disabled = false;\n\n /**\n * Loading button\n */\n @Prop() loading: boolean = false;\n\n /**\n * Pressed change event\n */\n @Event() pressedChange: EventEmitter<boolean>;\n\n @Element() hostElement: HTMLIxIconToggleButtonElement;\n\n private isIllegalToggleButtonConfig() {\n return this.variant === 'primary' && (this.outline || this.ghost);\n }\n\n private logIllegalConfig() {\n console.warn(\n 'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n );\n }\n\n @Watch('variant')\n onVariantChange() {\n if (this.isIllegalToggleButtonConfig()) {\n this.logIllegalConfig();\n }\n }\n\n @Watch('ghost')\n onGhostChange() {\n this.onVariantChange();\n }\n\n @Watch('outline')\n onOutlineChange() {\n this.onVariantChange();\n }\n\n componentDidLoad() {\n this.onVariantChange();\n }\n\n private dispatchPressedChange() {\n this.pressedChange.emit(!this.pressed);\n }\n\n private getIconSizeClass() {\n return {\n 'btn-icon-12': this.size === '12',\n 'btn-icon-16': this.size === '16',\n 'btn-icon-32': this.size === '24',\n };\n }\n\n render() {\n const baseButtonProps: BaseButtonProps = {\n variant: this.variant,\n outline: this.outline,\n ghost: this.ghost,\n iconOnly: true,\n iconOval: false,\n selected: this.pressed,\n disabled: this.disabled || this.loading,\n icon: this.icon,\n iconSize: this.size,\n loading: this.loading,\n onClick: () => this.dispatchPressedChange(),\n type: 'button',\n ariaAttributes: {\n 'aria-pressed': a11yBoolean(this.pressed),\n },\n extraClasses: {\n 'icon-button': true,\n ...this.getIconSizeClass(),\n },\n };\n console.log(baseButtonProps, this.disabled, this.loading);\n\n return (\n <Host\n class={{\n ...this.getIconSizeClass(),\n disabled: this.disabled || this.loading,\n }}\n >\n <BaseIconButton {...baseButtonProps}></BaseIconButton>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"ix-icon-toggle-button.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,ungBAAungB;;MCgCtogB,gBAAgB;;;;mBAKM,WAAW;mBAK1B,KAAK;iBAKP,KAAK;;mBAUH,KAAK;gBAKY,IAAI;oBAKH,KAAK;mBAKd,KAAK;;EASxB,2BAA2B;IACjC,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;GACnE;EAEO,gBAAgB;IACtB,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H,CAAC;GACH;EAGD,eAAe;IACb,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE;MACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;GACF;EAGD,aAAa;IACX,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAGD,eAAe;IACb,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAED,gBAAgB;IACd,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAEO,qBAAqB;IAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACxC;EAEO,gBAAgB;IACtB,OAAO;MACL,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;KAClC,CAAC;GACH;EAED,MAAM;IACJ,MAAM,eAAe,GAAoB;MACvC,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,IAAI;MACd,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,IAAI,CAAC,OAAO;MACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;MACvC,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,QAAQ,EAAE,IAAI,CAAC,IAAI;MACnB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,EAAE;MAC3C,IAAI,EAAE,QAAQ;MACd,cAAc,EAAE;QACd,cAAc,EAAEA,gBAAW,CAAC,IAAI,CAAC,OAAO,CAAC;OAC1C;MACD,YAAY,kBACV,aAAa,EAAE,IAAI,IAChB,IAAI,CAAC,gBAAgB,EAAE,CAC3B;KACF,CAAC;IACF,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAE1D,QACEC,QAACC,UAAI,IACH,KAAK,kCACA,IAAI,CAAC,gBAAgB,EAAE,KAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,OAGzCD,QAACE,6BAAc,oBAAK,eAAe,EAAmB,CACjD,EACP;GACH;;;;;;;;;;;;","names":["a11yBoolean","h","Host","BaseIconButton"],"sources":["./src/components/icon-toggle-button/icon-toggle-button.scss?tag=ix-icon-toggle-button&encapsulation=shadow","./src/components/icon-toggle-button/icon-toggle-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import '../icon-button/icon-button-mixin.scss';\n\n@include base-icon-button;\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.0.0\n */\n@Component({\n tag: 'ix-icon-toggle-button',\n shadow: true,\n styleUrl: './icon-toggle-button.scss',\n})\nexport class IconToggleButton {\n /**\n * Button variant.\n * Important: Variant 'primary' can only be combined with either outline or ghost.\n */\n @Prop() variant: ButtonVariant = 'secondary';\n\n /**\n * Outline button\n */\n @Prop() outline = false;\n\n /**\n * Button with no background or outline\n */\n @Prop() ghost = false;\n\n /**\n * Icon name\n */\n @Prop() icon: string;\n\n /**\n * Show button as pressed\n */\n @Prop() pressed = false;\n\n /**\n * Size of icon in button\n */\n @Prop() size: '24' | '16' | '12' = '24';\n\n /**\n * Disable the button\n */\n @Prop({ reflect: true }) disabled = false;\n\n /**\n * Loading button\n */\n @Prop() loading: boolean = false;\n\n /**\n * Pressed change event\n */\n @Event() pressedChange: EventEmitter<boolean>;\n\n @Element() hostElement: HTMLIxIconToggleButtonElement;\n\n private isIllegalToggleButtonConfig() {\n return this.variant === 'primary' && (this.outline || this.ghost);\n }\n\n private logIllegalConfig() {\n console.warn(\n 'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n );\n }\n\n @Watch('variant')\n onVariantChange() {\n if (this.isIllegalToggleButtonConfig()) {\n this.logIllegalConfig();\n }\n }\n\n @Watch('ghost')\n onGhostChange() {\n this.onVariantChange();\n }\n\n @Watch('outline')\n onOutlineChange() {\n this.onVariantChange();\n }\n\n componentDidLoad() {\n this.onVariantChange();\n }\n\n private dispatchPressedChange() {\n this.pressedChange.emit(!this.pressed);\n }\n\n private getIconSizeClass() {\n return {\n 'btn-icon-12': this.size === '12',\n 'btn-icon-16': this.size === '16',\n 'btn-icon-32': this.size === '24',\n };\n }\n\n render() {\n const baseButtonProps: BaseButtonProps = {\n variant: this.variant,\n outline: this.outline,\n ghost: this.ghost,\n iconOnly: true,\n iconOval: false,\n selected: this.pressed,\n disabled: this.disabled || this.loading,\n icon: this.icon,\n iconSize: this.size,\n loading: this.loading,\n onClick: () => this.dispatchPressedChange(),\n type: 'button',\n ariaAttributes: {\n 'aria-pressed': a11yBoolean(this.pressed),\n },\n extraClasses: {\n 'icon-button': true,\n ...this.getIconSizeClass(),\n },\n };\n console.log(baseButtonProps, this.disabled, this.loading);\n\n return (\n <Host\n class={{\n ...this.getIconSizeClass(),\n disabled: this.disabled || this.loading,\n }}\n >\n <BaseIconButton {...baseButtonProps}></BaseIconButton>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/cjs/ix-input-group.cjs.entry.js CHANGED
@@ -32,6 +32,16 @@ const InputGroup = class {
32
32
  this.startSlotChanged();
33
33
  });
34
34
  valid ? this.onValidInput() : this.onInvalidInput();
35
+ this.observer = new MutationObserver(() => {
36
+ this.startSlotChanged();
37
+ this.endSlotChanged();
38
+ });
39
+ this.observer.observe(this.hostElement, {
40
+ subtree: true,
41
+ childList: true,
42
+ attributes: true,
43
+ characterData: true,
44
+ });
35
45
  }
36
46
  componentDidRender() {
37
47
  this.prepareInputElement();
@@ -49,13 +59,13 @@ const InputGroup = class {
49
59
  this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';
50
60
  }
51
61
  else {
52
- this.inputElement.style.paddingRight = 'none';
62
+ this.inputElement.style.paddingRight = '0.5rem';
53
63
  }
54
64
  if (this.inputPaddingLeft !== 0) {
55
65
  this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';
56
66
  }
57
67
  else {
58
- this.inputElement.style.paddingLeft = 'none';
68
+ this.inputElement.style.paddingLeft = '0.5rem';
59
69
  }
60
70
  }
61
71
  else {
@@ -70,6 +80,9 @@ const InputGroup = class {
70
80
  if (startPadding !== 0) {
71
81
  this.inputPaddingLeft = 15 + startPadding;
72
82
  }
83
+ else {
84
+ this.inputPaddingLeft = 0;
85
+ }
73
86
  if (!this.inputElement) {
74
87
  return;
75
88
  }
@@ -102,7 +115,7 @@ const InputGroup = class {
102
115
  return width;
103
116
  }
104
117
  render() {
105
- return (index.h(index.Host, null, index.h("div", { class: "group group-start" }, index.h("slot", { name: "input-start", onSlotchange: () => this.startSlotChanged() })), index.h("slot", null), index.h("div", { class: "group group-end" }, index.h("slot", { name: "input-end", onSlotchange: () => this.endSlotChanged() }))));
118
+ return (index.h(index.Host, null, index.h("div", { class: "group group-start" }, index.h("slot", { name: "input-start" })), index.h("slot", null), index.h("div", { class: "group group-end" }, index.h("slot", { name: "input-end" }))));
106
119
  }
107
120
  get hostElement() { return index.getElement(this); }
108
121
  };
package/dist/cjs/ix-input-group.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"ix-input-group.entry.cjs.js","mappings":"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","names":["getSlottedElements","h","Host"],"sources":["./src/components/input-group/input-group.scss?tag=ix-input-group&encapsulation=shadow","./src/components/input-group/input-group.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n position: relative;\n display: flex;\n width: 100%;\n flex-wrap: wrap;\n align-items: stretch;\n\n .group {\n display: flex;\n position: absolute;\n align-items: center;\n height: 100%;\n }\n\n .group-start {\n left: 0px;\n height: 2rem;\n margin-left: 0.375rem;\n color: var(--theme-color-soft-text);\n }\n\n .group-end {\n right: 0px;\n height: 2rem;\n margin-right: 0.375rem;\n color: var(--theme-color-soft-text);\n }\n\n ::slotted(*) {\n display: flex;\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n tag: 'ix-input-group',\n styleUrl: 'input-group.scss',\n shadow: true,\n})\nexport class InputGroup {\n @Element() hostElement!: HTMLIxInputGroupElement;\n\n @State() inputPaddingLeft = 0;\n @State() inputPaddingRight = 0;\n\n private get inputElement() {\n return this.hostElement.querySelector('input') as HTMLInputElement;\n }\n\n componentWillLoad() {\n const { valid } = this.inputElement.validity;\n this.inputElement.addEventListener('valid', () => {\n this.onValidInput();\n });\n this.inputElement.addEventListener('invalid', () => {\n this.onInvalidInput();\n });\n this.inputElement.addEventListener('input', () => {\n this.startSlotChanged();\n });\n\n this.inputElement.form?.addEventListener('submit', () => {\n this.startSlotChanged();\n });\n\n valid ? this.onValidInput() : this.onInvalidInput();\n }\n\n componentDidRender() {\n this.prepareInputElement();\n }\n\n private onValidInput() {\n this.startSlotChanged();\n }\n\n private onInvalidInput() {\n this.startSlotChanged();\n }\n\n private prepareInputElement() {\n if (this.inputElement) {\n this.inputElement.style.width = '100%';\n\n if (this.inputPaddingRight !== 0) {\n this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';\n } else {\n this.inputElement.style.paddingRight = 'none';\n }\n\n if (this.inputPaddingLeft !== 0) {\n this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n } else {\n this.inputElement.style.paddingLeft = 'none';\n }\n } else {\n console.warn(\n 'You used the ix-input-group without an input tag, e.g. <input class=\"form-control\" />'\n );\n }\n }\n\n private startSlotChanged() {\n const slot = this.hostElement.shadowRoot.querySelector(\n 'slot[name=\"input-start\"]'\n );\n setTimeout(() => {\n const startPadding = this.getChildrenWidth(slot);\n\n if (startPadding !== 0) {\n this.inputPaddingLeft = 15 + startPadding;\n }\n\n if (!this.inputElement) {\n return;\n }\n\n if (\n (this.inputElement.form?.classList.contains('was-validated') ||\n this.inputElement.form?.noValidate === false) &&\n !this.inputElement.validity.valid\n ) {\n this.inputElement.style.backgroundPositionX = `${this.inputPaddingLeft}px`;\n this.inputPaddingLeft += 32;\n }\n });\n }\n\n private endSlotChanged() {\n const slot = this.hostElement.shadowRoot.querySelector(\n 'slot[name=\"input-end\"]'\n );\n\n setTimeout(() => {\n this.inputPaddingRight = 15 + this.getChildrenWidth(slot);\n });\n }\n\n private getChildrenWidth(slotElement: Element) {\n if (!slotElement) {\n return 0;\n }\n\n const endElements = getSlottedElements<HTMLElement>(slotElement);\n if (endElements.length === 0) {\n return 0;\n }\n\n let width = 0;\n\n endElements.forEach((element) => {\n width += element.getBoundingClientRect().width;\n });\n\n return width;\n }\n\n render() {\n return (\n <Host>\n <div class=\"group group-start\">\n <slot\n name=\"input-start\"\n onSlotchange={() => this.startSlotChanged()}\n ></slot>\n </div>\n <slot></slot>\n <div class=\"group group-end\">\n <slot\n name=\"input-end\"\n onSlotchange={() => this.endSlotChanged()}\n ></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"ix-input-group.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,49BAA49B;;MCiBr+B,UAAU;;;4BAGO,CAAC;6BACA,CAAC;;EAE9B,IAAY,YAAY;IACtB,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,CAAqB,CAAC;GACpE;EAID,iBAAiB;;IACf,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;IAC7C,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE;MAC1C,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB,CAAC,CAAC;IACH,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,SAAS,EAAE;MAC5C,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB,CAAC,CAAC;IACH,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE;MAC1C,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB,CAAC,CAAC;IAEH,MAAA,IAAI,CAAC,YAAY,CAAC,IAAI,0CAAE,gBAAgB,CAAC,QAAQ,EAAE;MACjD,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB,CAAC,CAAC;IAEH,KAAK,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;IAEpD,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC;MACnC,IAAI,CAAC,gBAAgB,EAAE,CAAC;MACxB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB,CAAC,CAAC;IAEH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MACtC,OAAO,EAAE,IAAI;MACb,SAAS,EAAE,IAAI;MACf,UAAU,EAAE,IAAI;MAChB,aAAa,EAAE,IAAI;KACpB,CAAC,CAAC;GACJ;EAED,kBAAkB;IAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;GAC5B;EAEO,YAAY;IAClB,IAAI,CAAC,gBAAgB,EAAE,CAAC;GACzB;EAEO,cAAc;IACpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;GACzB;EAEO,mBAAmB;IACzB,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;MAEvC,IAAI,IAAI,CAAC,iBAAiB,KAAK,CAAC,EAAE;QAChC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;OACtE;WAAM;QACL,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,YAAY,GAAG,QAAQ,CAAC;OACjD;MAED,IAAI,IAAI,CAAC,gBAAgB,KAAK,CAAC,EAAE;QAC/B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;OACpE;WAAM;QACL,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,GAAG,QAAQ,CAAC;OAChD;KACF;SAAM;MACL,OAAO,CAAC,IAAI,CACV,uFAAuF,CACxF,CAAC;KACH;GACF;EAEO,gBAAgB;IACtB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CACpD,0BAA0B,CAC3B,CAAC;IAEF,UAAU,CAAC;;MACT,MAAM,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;MAEjD,IAAI,YAAY,KAAK,CAAC,EAAE;QACtB,IAAI,CAAC,gBAAgB,GAAG,EAAE,GAAG,YAAY,CAAC;OAC3C;WAAM;QACL,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;OAC3B;MAED,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACtB,OAAO;OACR;MAED,IACE,CAAC,CAAA,MAAA,IAAI,CAAC,YAAY,CAAC,IAAI,0CAAE,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC;QAC1D,CAAA,MAAA,IAAI,CAAC,YAAY,CAAC,IAAI,0CAAE,UAAU,MAAK,KAAK;QAC9C,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,EACjC;QACA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,mBAAmB,GAAG,GAAG,IAAI,CAAC,gBAAgB,IAAI,CAAC;QAC3E,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAC;OAC7B;KACF,CAAC,CAAC;GACJ;EAEO,cAAc;IACpB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CACpD,wBAAwB,CACzB,CAAC;IAEF,UAAU,CAAC;MACT,IAAI,CAAC,iBAAiB,GAAG,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;KAC3D,CAAC,CAAC;GACJ;EAEO,gBAAgB,CAAC,WAAoB;IAC3C,IAAI,CAAC,WAAW,EAAE;MAChB,OAAO,CAAC,CAAC;KACV;IAED,MAAM,WAAW,GAAGA,4BAAkB,CAAc,WAAW,CAAC,CAAC;IACjE,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;MAC5B,OAAO,CAAC,CAAC;KACV;IAED,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO;MAC1B,KAAK,IAAI,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;KAChD,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC;GACd;EAED,MAAM;IACJ,QACEC,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,mBAAmB,IAC5BA,kBAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,EACNA,qBAAa,EACbA,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,kBAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,CACD,EACP;GACH;;;;;;;","names":["getSlottedElements","h","Host"],"sources":["./src/components/input-group/input-group.scss?tag=ix-input-group&encapsulation=shadow","./src/components/input-group/input-group.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n position: relative;\n display: flex;\n width: 100%;\n flex-wrap: wrap;\n align-items: stretch;\n\n .group {\n display: flex;\n position: absolute;\n align-items: center;\n height: 100%;\n }\n\n .group-start {\n left: 0px;\n height: 2rem;\n margin-left: 0.375rem;\n color: var(--theme-color-soft-text);\n }\n\n .group-end {\n right: 0px;\n height: 2rem;\n margin-right: 0.375rem;\n color: var(--theme-color-soft-text);\n }\n\n ::slotted(*) {\n display: flex;\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n tag: 'ix-input-group',\n styleUrl: 'input-group.scss',\n shadow: true,\n})\nexport class InputGroup {\n @Element() hostElement!: HTMLIxInputGroupElement;\n\n @State() inputPaddingLeft = 0;\n @State() inputPaddingRight = 0;\n\n private get inputElement() {\n return this.hostElement.querySelector('input') as HTMLInputElement;\n }\n\n private observer: MutationObserver;\n\n componentWillLoad() {\n const { valid } = this.inputElement.validity;\n this.inputElement.addEventListener('valid', () => {\n this.onValidInput();\n });\n this.inputElement.addEventListener('invalid', () => {\n this.onInvalidInput();\n });\n this.inputElement.addEventListener('input', () => {\n this.startSlotChanged();\n });\n\n this.inputElement.form?.addEventListener('submit', () => {\n this.startSlotChanged();\n });\n\n valid ? this.onValidInput() : this.onInvalidInput();\n\n this.observer = new MutationObserver(() => {\n this.startSlotChanged();\n this.endSlotChanged();\n });\n\n this.observer.observe(this.hostElement, {\n subtree: true,\n childList: true,\n attributes: true,\n characterData: true,\n });\n }\n\n componentDidRender() {\n this.prepareInputElement();\n }\n\n private onValidInput() {\n this.startSlotChanged();\n }\n\n private onInvalidInput() {\n this.startSlotChanged();\n }\n\n private prepareInputElement() {\n if (this.inputElement) {\n this.inputElement.style.width = '100%';\n\n if (this.inputPaddingRight !== 0) {\n this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';\n } else {\n this.inputElement.style.paddingRight = '0.5rem';\n }\n\n if (this.inputPaddingLeft !== 0) {\n this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n } else {\n this.inputElement.style.paddingLeft = '0.5rem';\n }\n } else {\n console.warn(\n 'You used the ix-input-group without an input tag, e.g. <input class=\"form-control\" />'\n );\n }\n }\n\n private startSlotChanged() {\n const slot = this.hostElement.shadowRoot.querySelector(\n 'slot[name=\"input-start\"]'\n );\n\n setTimeout(() => {\n const startPadding = this.getChildrenWidth(slot);\n\n if (startPadding !== 0) {\n this.inputPaddingLeft = 15 + startPadding;\n } else {\n this.inputPaddingLeft = 0;\n }\n\n if (!this.inputElement) {\n return;\n }\n\n if (\n (this.inputElement.form?.classList.contains('was-validated') ||\n this.inputElement.form?.noValidate === false) &&\n !this.inputElement.validity.valid\n ) {\n this.inputElement.style.backgroundPositionX = `${this.inputPaddingLeft}px`;\n this.inputPaddingLeft += 32;\n }\n });\n }\n\n private endSlotChanged() {\n const slot = this.hostElement.shadowRoot.querySelector(\n 'slot[name=\"input-end\"]'\n );\n\n setTimeout(() => {\n this.inputPaddingRight = 15 + this.getChildrenWidth(slot);\n });\n }\n\n private getChildrenWidth(slotElement: Element) {\n if (!slotElement) {\n return 0;\n }\n\n const endElements = getSlottedElements<HTMLElement>(slotElement);\n if (endElements.length === 0) {\n return 0;\n }\n\n let width = 0;\n\n endElements.forEach((element) => {\n width += element.getBoundingClientRect().width;\n });\n\n return width;\n }\n\n render() {\n return (\n <Host>\n <div class=\"group group-start\">\n <slot name=\"input-start\"></slot>\n </div>\n <slot></slot>\n <div class=\"group group-end\">\n <slot name=\"input-end\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/cjs/ix-menu.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"ix-menu.entry.cjs.js","mappings":"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","names":["applicationLayoutService","useContextConsumer","ApplicationLayoutContext","menuController","convertToRemString","anime","h","Host","themeSwitcher"],"sources":["./src/components/application-sidebar/events.ts","./src/components/menu/menu.scss?tag=ix-menu&encapsulation=shadow","./src/components/menu/menu.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport class ApplicationSidebarToggleEvent extends Event {\n public constructor(public readonly force?: boolean) {\n super('application-sidebar-toggle', { bubbles: true, composed: true });\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n@import '~animate.css/animate.min';\n\n$menu-expanded-width: 16rem;\n\n:host {\n @include ix-component;\n\n display: flex;\n flex-direction: row;\n position: absolute;\n height: 100%;\n min-height: 22.75rem;\n z-index: var(--theme-z-index-sticky);\n width: auto;\n\n bottom: 0px;\n\n .tabs {\n height: 100%;\n position: relative;\n overflow-y: auto;\n pointer-events: all;\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .tabs-shadow-container {\n overflow: hidden;\n display: block;\n position: relative;\n margin-bottom: 2rem;\n }\n\n .tabs--shadow {\n opacity: 0;\n position: absolute;\n width: 100%;\n height: 0.625rem;\n\n background: linear-gradient(var(--theme-color-shadow-1), transparent);\n pointer-events: none;\n z-index: var(--theme-z-index-sticky);\n\n transition: opacity var(--theme-default-time);\n }\n .tabs--shadow-top {\n top: 0px;\n background: linear-gradient(var(--theme-color-shadow-1), transparent);\n }\n\n .tabs--shadow-bottom {\n bottom: 0px;\n background: linear-gradient(transparent, var(--theme-color-shadow-1));\n }\n\n .tabs--shadow--show {\n opacity: 1;\n }\n\n .menu {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 3.25rem;\n height: 100%;\n padding-block-end: 1rem;\n overflow: hidden;\n\n &.expanded {\n box-shadow: var(--theme-navigation--box-shadow);\n }\n\n background-color: var(--theme-nav--background);\n transition: width var(--animate-duration) ease-in-out;\n\n .burger-menu {\n margin: 0.75rem 0 1rem 0.35rem;\n }\n }\n\n .menu-overlay {\n display: none;\n position: absolute;\n width: calc(100vw - 3.25rem);\n height: 100%;\n left: 3.25rem;\n z-index: -1;\n backdrop-filter: blur(1rem);\n background-color: var(--theme-sidebar-overlay-blur);\n transition: left var(--animate-duration) ease-in-out;\n }\n\n .menu-overlay.visible {\n display: block;\n }\n\n .menu.expanded {\n width: $menu-expanded-width;\n }\n\n .menu-overlay.expanded {\n width: calc(100vw - $menu-expanded-width);\n left: $menu-expanded-width;\n }\n\n .menu-overlay-container {\n display: contents;\n }\n\n .menu-avatar {\n max-height: 3rem;\n }\n\n .avatar {\n margin-bottom: 2rem;\n }\n\n #cui-imprint {\n .cui-imprint-product-name {\n margin-bottom: $default-space;\n }\n\n .cui-imprint-product-description {\n margin-bottom: $x-large-space;\n }\n\n .cui-imprint-link-container {\n display: flex;\n align-items: center;\n }\n }\n\n .bottom-tab-divider {\n margin-top: auto;\n }\n}\n\n:host(.breakpoint-sm) {\n .menu:not(.expanded) {\n width: 0;\n }\n\n .menu {\n padding-top: 2rem;\n }\n\n .menu .burger-menu {\n display: none;\n }\n\n .menu-overlay {\n left: 0px;\n width: 100vw;\n }\n}\n\n:host(.breakpoint-lg) {\n position: relative;\n\n .menu.expanded {\n box-shadow: none;\n }\n}\n\n:host {\n ::slotted(a[href]) {\n all: unset;\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { ApplicationSidebarToggleEvent } from '../application-sidebar/events';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { convertToRemString } from '../utils/rwd.util';\nimport { themeSwitcher } from '../utils/theme-switcher';\n\n@Component({\n tag: 'ix-menu',\n styleUrl: 'menu.scss',\n shadow: true,\n})\nexport class Menu {\n @Element() hostElement!: HTMLIxMenuElement;\n\n /**\n * Is settings tab visible\n */\n @Prop({ mutable: true }) showSettings = false;\n\n /**\n * Is about tab visible\n */\n @Prop({ mutable: true }) showAbout = false;\n\n /**\n * Show toggle between light and dark variant. Only if the provided theme have implemented both!\n */\n @Prop() enableToggleTheme = false;\n\n /**\n * Is settings tab is visible\n */\n @Prop() enableSettings = true;\n\n /**\n * Internal\n */\n @Prop() enableMapExpand = false;\n\n /**\n * Should only be set if you use ix-menu standalone\n */\n @Prop() applicationName: string;\n\n /**\n * Should only be set if you use ix-menu standalone\n */\n @Prop() applicationDescription = '';\n\n /**\n * Maximum number of menu items to show in case enough vertical space is available.\n * Extra menu items will be collapsed to 'show more' menu item.\n */\n @Prop() maxVisibleMenuItems = 9;\n\n /**\n * Accessibility i18n label for the burger menu of the sidebar\n */\n @Prop() i18nExpandSidebar = 'Expand sidebar';\n\n /**\n */\n @Prop({ mutable: true, reflect: true }) expand = false;\n\n /**\n * Menu stays pinned to the left\n */\n @Prop() pinned = false;\n @Watch('pinned')\n pinnedChange(newPinned: boolean) {\n if (this.applicationLayoutContext?.host === 'map-navigation') {\n console.warn('ix-map-navigation does not support pinning of the menu');\n return;\n }\n this.setPinned(this.pinned);\n if (newPinned) {\n applicationLayoutService.disableBreakpointDetection();\n applicationLayoutService.setBreakpoint('lg');\n return;\n }\n\n applicationLayoutService.enableBreakpointDetection();\n }\n\n /**\n */\n @Prop() i18nLegal = 'About & legal information';\n\n /**\n */\n @Prop() i18nSettings = 'Settings';\n\n /**\n */\n @Prop() i18nToggleTheme = 'Toggle theme';\n\n /**\n */\n @Prop() i18nExpand = ' Expand';\n\n /**\n */\n @Prop() i18nCollapse = 'Collapse';\n\n /**\n * Menu expanded\n */\n @Event() expandChange: EventEmitter<boolean>;\n\n /**\n * Map Sidebar expanded\n */\n @Event() mapExpandChange: EventEmitter<boolean>;\n\n @State() showPinned = false;\n @State() mapExpand = true;\n @State() activeTab: HTMLIxMenuItemElement | null;\n @State() breakpoint: Breakpoint = 'lg';\n @State() itemsScrollShadowTop = false;\n @State() itemsScrollShadowBottom = false;\n @State() applicationLayoutContext: ContextType<\n typeof ApplicationLayoutContext\n >;\n private isTransitionDisabled = false;\n\n // FBC IAM workaround #488\n private readonly isVisible = (elm: HTMLElement) => {\n return (\n elm.style.display !== 'none' &&\n elm.parentElement?.parentElement?.style.display !== 'none'\n );\n };\n\n get popoverArea() {\n return this.hostElement.shadowRoot!.querySelector('#popover-area');\n }\n\n get menu() {\n return this.hostElement.shadowRoot!.querySelector('.menu');\n }\n\n get menuItemsContainer(): HTMLDivElement {\n return this.menu!.querySelector('.tabs')!;\n }\n\n get overlayContainer() {\n return this.hostElement.shadowRoot.querySelector(\n '.menu-overlay'\n ) as HTMLDivElement;\n }\n\n get menuItems() {\n return Array.from(\n this.hostElement.querySelectorAll(\n 'ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot=\"bottom\"])'\n )\n ).filter(this.isVisible);\n }\n\n get menuBottomItems() {\n return Array.from(\n this.hostElement.querySelectorAll(\n 'ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)'\n )\n ).filter(this.isVisible);\n }\n\n get homeTab() {\n return this.hostElement.querySelector('ix-menu-item.home-tab');\n }\n\n get moreItemsDropdown(): HTMLElement {\n return this.hostElement.shadowRoot!.querySelector(\n '.internal-tab ix-dropdown'\n )!;\n }\n\n get isMoreItemsDropdownEmpty(): boolean {\n return (\n this.hostElement.shadowRoot!.querySelectorAll(\n '.internal-tab ix-dropdown .appended'\n ).length === 0\n );\n }\n\n get moreItemsDropdownItems() {\n return this.hostElement.shadowRoot!.querySelectorAll(\n '.internal-tab ix-dropdown ix-menu-item'\n );\n }\n\n get activeMoreTabContainer() {\n return this.hostElement.shadowRoot!.querySelector('.active-more-tab');\n }\n\n get activeMoreTab() {\n return this.hostElement.shadowRoot!.querySelector(\n '.active-more-tab ix-menu-item'\n );\n }\n\n get aboutPopoverContainer(): HTMLElement {\n return this.hostElement.querySelector('.about-news')!;\n }\n\n get aboutNewsPopover(): HTMLIxMenuAboutNewsElement {\n return (\n document.querySelector('ix-menu-about-news') ??\n this.hostElement.querySelector('ix-menu-about-news')!\n );\n }\n\n get aboutTab(): HTMLElement {\n return this.hostElement.shadowRoot!.querySelector('#aboutAndLegal');\n }\n\n get about(): HTMLIxMenuAboutElement | null {\n return this.hostElement.querySelector('ix-menu-about');\n }\n\n get settings(): HTMLIxMenuSettingsElement | null {\n return this.hostElement.querySelector('ix-menu-settings');\n }\n\n get isSettingsEmpty(): boolean {\n return (\n Array.from(\n this.hostElement.shadowRoot!.querySelectorAll('ix-menu-settings-item')\n ).length === 0\n );\n }\n\n get tabsContainer() {\n return this.hostElement;\n }\n\n componentDidLoad() {\n requestAnimationFrame(() => {\n this.handleOverflowIndicator();\n });\n\n if (this.pinned) {\n this.pinnedChange(this.pinned);\n }\n }\n\n componentWillLoad() {\n useContextConsumer(\n this.hostElement,\n ApplicationLayoutContext,\n (ctx) => {\n this.applicationLayoutContext = ctx;\n if (ctx.hideHeader === true) {\n this.onBreakpointChange('md');\n return;\n }\n\n this.onBreakpointChange(applicationLayoutService.breakpoint);\n },\n true\n );\n\n menuController.register(this.hostElement);\n applicationLayoutService.onChange.on((breakpoint) =>\n this.onBreakpointChange(breakpoint)\n );\n this.onBreakpointChange(applicationLayoutService.breakpoint);\n }\n\n componentWillRender() {\n this.appendTabs();\n }\n\n componentDidRender() {\n this.appendFragments();\n }\n\n private setPinned(pinned: boolean) {\n this.showPinned = pinned;\n menuController.setIsPinned(pinned);\n }\n\n private onBreakpointChange(mode: Breakpoint) {\n if (!this.applicationLayoutContext && mode === 'sm') {\n return;\n }\n if (this.applicationLayoutContext?.host === 'map-navigation') {\n this.breakpoint = 'md';\n return;\n }\n if (!this.applicationLayoutContext) {\n return;\n }\n\n if (this.applicationLayoutContext.hideHeader && mode === 'sm') {\n return;\n }\n\n this.breakpoint = mode;\n\n if (this.breakpoint === 'lg') {\n this.setPinned(true);\n this.toggleMenu(true);\n return;\n }\n\n this.setPinned(false);\n this.toggleMenu(false);\n }\n\n private appendFragments() {\n this.appendAboutNewsPopover();\n }\n\n private resetActiveTab() {\n this.activeTab = null;\n }\n\n private appendTabs() {\n this.activeTab = null;\n }\n\n private getAboutPopoverVerticalPosition() {\n const heightArrow = 12;\n const offsetArrow = 6;\n const rectAbout = this.aboutTab.getBoundingClientRect();\n const offset =\n window.innerHeight -\n (rectAbout.bottom - rectAbout.height / 2 + heightArrow / 2 + offsetArrow);\n return convertToRemString(offset);\n }\n\n private appendAboutNewsPopover() {\n if (!this.aboutNewsPopover) {\n return;\n }\n\n this.aboutNewsPopover.style.bottom = this.getAboutPopoverVerticalPosition();\n\n if (!this.popoverArea?.contains(this.aboutNewsPopover)) {\n const showMore = () => {\n if (this.aboutNewsPopover?.aboutItemLabel && this.about) {\n this.about.activeTabLabel = this.aboutNewsPopover.aboutItemLabel;\n this.toggleAbout(true);\n }\n };\n\n this.aboutNewsPopover.addEventListener('showMore', showMore.bind(this));\n document.body.appendChild(this.aboutNewsPopover);\n }\n }\n\n /**\n * Toggle map sidebar expand\n * @param show\n */\n @Method()\n async toggleMapExpand(show?: boolean) {\n if (show !== undefined) {\n this.mapExpand = show;\n } else {\n this.mapExpand = !this.mapExpand;\n }\n }\n\n /**\n * Toggle menu\n * @param show\n */\n @Method()\n async toggleMenu(show?: boolean) {\n if (show !== undefined) {\n this.expand = show;\n } else {\n this.expand = !this.expand;\n }\n\n if (this.aboutNewsPopover) {\n this.aboutNewsPopover.expanded = this.expand;\n }\n\n this.expandChange.emit(this.expand);\n\n this.isTransitionDisabled = false;\n this.checkTransition();\n }\n\n /**\n * Disable transition of overlay while menu animation is running.\n */\n private checkTransition() {\n const container = this.overlayContainer;\n\n if (!container) {\n return;\n }\n\n if (this.isTransitionDisabled) {\n container.style.transitionProperty = 'left';\n } else {\n container.style.transitionProperty = 'all';\n }\n }\n\n private isOverlayVisible() {\n return this.showAbout || this.showSettings;\n }\n\n /**\n * Toggle Settings tabs\n * @param show\n */\n @Method()\n async toggleSettings(show: boolean) {\n if (!this.settings) {\n return;\n }\n\n if (!this.isOverlayVisible()) {\n this.animateOverlayFadeIn();\n }\n\n if (show) {\n this.resetOverlay();\n this.showSettings = show;\n this.settings.show = this.showSettings;\n } else {\n this.onOverlayClose();\n }\n }\n\n /**\n * Toggle About tabs\n * @param show\n */\n @Method()\n async toggleAbout(show: boolean) {\n if (!this.about) {\n return;\n }\n\n if (!this.isOverlayVisible()) {\n this.animateOverlayFadeIn();\n }\n\n if (show) {\n this.resetOverlay();\n this.showAbout = show;\n this.about.show = this.showAbout;\n } else {\n this.onOverlayClose();\n }\n }\n\n private resetOverlay() {\n this.showSettings = false;\n this.showAbout = false;\n\n if (this.settings) {\n this.settings.show = false;\n }\n\n if (this.about) {\n this.about.show = false;\n }\n }\n\n private getCollapseText() {\n return this.mapExpand ? this.i18nCollapse : this.i18nExpand;\n }\n\n private getCollapseIcon() {\n return this.mapExpand ? 'navigation-left' : 'navigation-right';\n }\n\n private isMenuItemClicked(event: Event) {\n if (event.target instanceof HTMLElement) {\n return event.target.tagName === 'IX-MENU-ITEM';\n }\n\n return false;\n }\n\n @Listen('resize', { target: 'window' })\n private handleOverflowIndicator() {\n const { clientHeight, scrollTop, scrollHeight } = this.menuItemsContainer;\n this.itemsScrollShadowTop = scrollTop > 0;\n this.itemsScrollShadowBottom =\n Math.round(scrollTop + clientHeight) < scrollHeight;\n }\n\n @Listen('close')\n onOverlayClose() {\n this.animateOverlayFadeOut(() => {\n this.resetOverlay();\n });\n }\n\n private animateOverlayFadeIn() {\n requestAnimationFrame(() => {\n anime({\n targets: this.overlayContainer,\n duration: 300,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeInSine',\n begin: () => {\n if (this.showPinned) {\n return;\n }\n\n this.toggleMenu(false);\n },\n });\n });\n }\n\n private animateOverlayFadeOut(onComplete: Function) {\n requestAnimationFrame(() => {\n anime({\n targets: this.overlayContainer,\n duration: 300,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => onComplete(),\n });\n });\n }\n\n private onMenuItemsClick(event: Event) {\n if (this.isMenuItemClicked(event)) {\n if (!this.showPinned) {\n this.toggleMenu(false);\n }\n this.onOverlayClose();\n }\n }\n\n private isHiddenFromViewport() {\n return this.breakpoint === 'sm' && this.expand === false;\n }\n\n private sidebarToggle() {\n this.mapExpandChange.emit(this.mapExpand);\n\n this.hostElement.dispatchEvent(\n new ApplicationSidebarToggleEvent(this.mapExpand)\n );\n }\n\n render() {\n return (\n <Host\n class={{\n expanded: this.expand,\n [`breakpoint-${this.breakpoint}`]: true,\n }}\n slot=\"menu\"\n >\n <aside\n class={{\n menu: true,\n expanded: this.expand,\n }}\n onClick={() => {\n this.resetActiveTab();\n }}\n >\n <ix-burger-menu\n onClick={async () => this.toggleMenu()}\n expanded={this.expand}\n ixAriaLabel={this.i18nExpandSidebar}\n pinned={this.showPinned}\n class={{\n 'burger-menu': true,\n }}\n ></ix-burger-menu>\n <div class=\"menu-avatar\">\n <slot name=\"ix-menu-avatar\"></slot>\n </div>\n\n <div\n id=\"menu-tabs\"\n style={{\n display: 'contents',\n }}\n onClick={(e) => this.onMenuItemsClick(e)}\n >\n <div class=\"tabs-top\">\n <slot name=\"home\"></slot>\n </div>\n <div class=\"tabs-shadow-container\">\n <div\n class={{\n 'tabs--shadow': true,\n 'tabs--shadow-top': true,\n 'tabs--shadow--show': this.itemsScrollShadowTop,\n }}\n ></div>\n <div class=\"tabs\" onScroll={() => this.handleOverflowIndicator()}>\n {this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (\n <slot></slot>\n ) : null}\n </div>\n <div\n class={{\n 'tabs--shadow': true,\n 'tabs--shadow-bottom': true,\n 'tabs--shadow--show': this.itemsScrollShadowBottom,\n }}\n ></div>\n </div>\n </div>\n <div class=\"bottom-tab-divider\"></div>\n {this.settings ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"settings\"\n class={{\n 'internal-tab': true,\n 'bottom-tab': true,\n active: this.showSettings,\n }}\n icon={'cogwheel'}\n onClick={async () => this.toggleSettings(!this.showSettings)}\n >\n {this.i18nSettings}\n </ix-menu-item>\n ) : null}\n <div onClick={(e) => this.onMenuItemsClick(e)}>\n <slot name=\"bottom\"></slot>\n </div>\n\n <div id=\"popover-area\"></div>\n {this.about ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"aboutAndLegal\"\n class={{\n 'internal-tab': true,\n 'bottom-tab': true,\n active: this.showAbout,\n }}\n icon={'info'}\n onClick={async () => this.toggleAbout(!this.showAbout)}\n >\n {this.i18nLegal}\n </ix-menu-item>\n ) : null}\n {this.enableToggleTheme ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"toggleTheme\"\n onClick={() => themeSwitcher.toggleMode()}\n class=\"internal-tab bottom-tab\"\n icon={'bulb'}\n >\n {this.i18nToggleTheme}\n </ix-menu-item>\n ) : null}\n {this.enableMapExpand || this.applicationLayoutContext?.sidebar ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"menu-collapse\"\n onClick={() => this.sidebarToggle()}\n class=\"internal-tab bottom-tab\"\n icon={`${this.getCollapseIcon()}`}\n >\n {this.getCollapseText()}\n </ix-menu-item>\n ) : null}\n </aside>\n <div\n class={{\n 'menu-overlay': true,\n visible: this.isOverlayVisible(),\n expanded: this.expand,\n }}\n onTransitionEnd={() => {\n this.isTransitionDisabled = true;\n this.checkTransition();\n }}\n >\n <div class={'menu-overlay-container'}>\n {this.showSettings ? <slot name=\"ix-menu-settings\"></slot> : null}\n </div>\n <div class={'menu-overlay-container'}>\n {this.showAbout ? <slot name=\"ix-menu-about\"></slot> : null}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"ix-menu.entry.cjs.js","mappings":"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","names":["applicationLayoutService","useContextConsumer","ApplicationLayoutContext","menuController","convertToRemString","anime","h","Host","themeSwitcher"],"sources":["./src/components/application-sidebar/events.ts","./src/components/menu/menu.scss?tag=ix-menu&encapsulation=shadow","./src/components/menu/menu.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport class ApplicationSidebarToggleEvent extends Event {\n public constructor(public readonly force?: boolean) {\n super('application-sidebar-toggle', { bubbles: true, composed: true });\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n@import '~animate.css/animate.min';\n\n$menu-expanded-width: 16rem;\n\n:host {\n @include ix-component;\n\n display: flex;\n flex-direction: row;\n position: absolute;\n height: 100%;\n min-height: 22.75rem;\n z-index: var(--theme-z-index-sticky);\n width: auto;\n\n bottom: 0px;\n\n .tabs {\n height: 100%;\n position: relative;\n overflow-y: auto;\n pointer-events: all;\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .tabs-shadow-container {\n overflow: hidden;\n display: block;\n position: relative;\n margin-bottom: 2rem;\n }\n\n .tabs--shadow {\n opacity: 0;\n position: absolute;\n width: 100%;\n height: 0.625rem;\n\n background: linear-gradient(var(--theme-color-shadow-1), transparent);\n pointer-events: none;\n z-index: var(--theme-z-index-sticky);\n\n transition: opacity var(--theme-default-time);\n }\n .tabs--shadow-top {\n top: 0px;\n background: linear-gradient(var(--theme-color-shadow-1), transparent);\n }\n\n .tabs--shadow-bottom {\n bottom: 0px;\n background: linear-gradient(transparent, var(--theme-color-shadow-1));\n }\n\n .tabs--shadow--show {\n opacity: 1;\n }\n\n .menu {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 3.25rem;\n height: 100%;\n padding-block-end: 1rem;\n overflow: hidden;\n\n &.expanded {\n box-shadow: var(--theme-navigation--box-shadow);\n }\n\n background-color: var(--theme-nav--background);\n transition: width var(--animate-duration) ease-in-out;\n\n .burger-menu {\n margin: 0.75rem 0 1rem 0.35rem;\n }\n }\n\n .menu-overlay {\n display: none;\n position: absolute;\n width: calc(100vw - 3.25rem);\n height: 100%;\n left: 3.25rem;\n z-index: -1;\n backdrop-filter: blur(1rem);\n background-color: var(--theme-sidebar-overlay-blur);\n transition: left var(--animate-duration) ease-in-out;\n }\n\n .menu-overlay.visible {\n display: block;\n }\n\n .menu.expanded {\n width: $menu-expanded-width;\n }\n\n .menu-overlay.expanded {\n width: calc(100vw - $menu-expanded-width);\n left: $menu-expanded-width;\n }\n\n .menu-overlay-container {\n display: contents;\n }\n\n .menu-avatar {\n max-height: 3rem;\n }\n\n .avatar {\n margin-bottom: 2rem;\n }\n\n #cui-imprint {\n .cui-imprint-product-name {\n margin-bottom: $default-space;\n }\n\n .cui-imprint-product-description {\n margin-bottom: $x-large-space;\n }\n\n .cui-imprint-link-container {\n display: flex;\n align-items: center;\n }\n }\n\n .bottom-tab-divider {\n margin-top: auto;\n }\n}\n\n:host(.breakpoint-sm) {\n .menu:not(.expanded) {\n width: 0;\n }\n\n .menu {\n padding-top: 2rem;\n }\n\n .menu .burger-menu {\n display: none;\n }\n\n .menu-overlay {\n left: 0px;\n width: 100vw;\n }\n}\n\n:host(.breakpoint-lg) {\n position: relative;\n\n .menu.expanded {\n box-shadow: none;\n }\n}\n\n:host {\n ::slotted(a[href]) {\n all: unset;\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { ApplicationSidebarToggleEvent } from '../application-sidebar/events';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { convertToRemString } from '../utils/rwd.util';\nimport { themeSwitcher } from '../utils/theme-switcher';\n\n@Component({\n tag: 'ix-menu',\n styleUrl: 'menu.scss',\n shadow: true,\n})\nexport class Menu {\n @Element() hostElement!: HTMLIxMenuElement;\n\n /**\n * Is settings tab visible\n */\n @Prop({ mutable: true }) showSettings = false;\n\n /**\n * Is about tab visible\n */\n @Prop({ mutable: true }) showAbout = false;\n\n /**\n * Show toggle between light and dark variant. Only if the provided theme have implemented both!\n */\n @Prop() enableToggleTheme = false;\n\n /**\n * Is settings tab is visible\n */\n @Prop() enableSettings = true;\n\n /**\n * Internal\n */\n @Prop() enableMapExpand = false;\n\n /**\n * Should only be set if you use ix-menu standalone\n */\n @Prop() applicationName: string;\n\n /**\n * Should only be set if you use ix-menu standalone\n */\n @Prop() applicationDescription = '';\n\n /**\n * Maximum number of menu items to show in case enough vertical space is available.\n * Extra menu items will be collapsed to 'show more' menu item.\n *\n * @deprecated - Has no effect on component. Will get removed with next major release (v3)\n */\n @Prop() maxVisibleMenuItems = 9;\n\n /**\n * Accessibility i18n label for the burger menu of the sidebar\n */\n @Prop() i18nExpandSidebar = 'Expand sidebar';\n\n /**\n */\n @Prop({ mutable: true, reflect: true }) expand = false;\n\n /**\n * Menu stays pinned to the left\n */\n @Prop() pinned = false;\n @Watch('pinned')\n pinnedChange(newPinned: boolean) {\n if (this.applicationLayoutContext?.host === 'map-navigation') {\n console.warn('ix-map-navigation does not support pinning of the menu');\n return;\n }\n this.setPinned(this.pinned);\n if (newPinned) {\n applicationLayoutService.disableBreakpointDetection();\n applicationLayoutService.setBreakpoint('lg');\n return;\n }\n\n applicationLayoutService.enableBreakpointDetection();\n }\n\n /**\n */\n @Prop() i18nLegal = 'About & legal information';\n\n /**\n */\n @Prop() i18nSettings = 'Settings';\n\n /**\n */\n @Prop() i18nToggleTheme = 'Toggle theme';\n\n /**\n */\n @Prop() i18nExpand = ' Expand';\n\n /**\n */\n @Prop() i18nCollapse = 'Collapse';\n\n /**\n * Menu expanded\n */\n @Event() expandChange: EventEmitter<boolean>;\n\n /**\n * Map Sidebar expanded\n */\n @Event() mapExpandChange: EventEmitter<boolean>;\n\n @State() showPinned = false;\n @State() mapExpand = true;\n @State() activeTab: HTMLIxMenuItemElement | null;\n @State() breakpoint: Breakpoint = 'lg';\n @State() itemsScrollShadowTop = false;\n @State() itemsScrollShadowBottom = false;\n @State() applicationLayoutContext: ContextType<\n typeof ApplicationLayoutContext\n >;\n private isTransitionDisabled = false;\n\n // FBC IAM workaround #488\n private readonly isVisible = (elm: HTMLElement) => {\n return (\n elm.style.display !== 'none' &&\n elm.parentElement?.parentElement?.style.display !== 'none'\n );\n };\n\n get popoverArea() {\n return this.hostElement.shadowRoot!.querySelector('#popover-area');\n }\n\n get menu() {\n return this.hostElement.shadowRoot!.querySelector('.menu');\n }\n\n get menuItemsContainer(): HTMLDivElement {\n return this.menu!.querySelector('.tabs')!;\n }\n\n get overlayContainer() {\n return this.hostElement.shadowRoot.querySelector(\n '.menu-overlay'\n ) as HTMLDivElement;\n }\n\n get menuItems() {\n return Array.from(\n this.hostElement.querySelectorAll(\n 'ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot=\"bottom\"])'\n )\n ).filter(this.isVisible);\n }\n\n get menuBottomItems() {\n return Array.from(\n this.hostElement.querySelectorAll(\n 'ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)'\n )\n ).filter(this.isVisible);\n }\n\n get homeTab() {\n return this.hostElement.querySelector('ix-menu-item.home-tab');\n }\n\n get moreItemsDropdown(): HTMLElement {\n return this.hostElement.shadowRoot!.querySelector(\n '.internal-tab ix-dropdown'\n )!;\n }\n\n get isMoreItemsDropdownEmpty(): boolean {\n return (\n this.hostElement.shadowRoot!.querySelectorAll(\n '.internal-tab ix-dropdown .appended'\n ).length === 0\n );\n }\n\n get moreItemsDropdownItems() {\n return this.hostElement.shadowRoot!.querySelectorAll(\n '.internal-tab ix-dropdown ix-menu-item'\n );\n }\n\n get activeMoreTabContainer() {\n return this.hostElement.shadowRoot!.querySelector('.active-more-tab');\n }\n\n get activeMoreTab() {\n return this.hostElement.shadowRoot!.querySelector(\n '.active-more-tab ix-menu-item'\n );\n }\n\n get aboutPopoverContainer(): HTMLElement {\n return this.hostElement.querySelector('.about-news')!;\n }\n\n get aboutNewsPopover(): HTMLIxMenuAboutNewsElement {\n return (\n document.querySelector('ix-menu-about-news') ??\n this.hostElement.querySelector('ix-menu-about-news')!\n );\n }\n\n get aboutTab(): HTMLElement {\n return this.hostElement.shadowRoot!.querySelector('#aboutAndLegal');\n }\n\n get about(): HTMLIxMenuAboutElement | null {\n return this.hostElement.querySelector('ix-menu-about');\n }\n\n get settings(): HTMLIxMenuSettingsElement | null {\n return this.hostElement.querySelector('ix-menu-settings');\n }\n\n get isSettingsEmpty(): boolean {\n return (\n Array.from(\n this.hostElement.shadowRoot!.querySelectorAll('ix-menu-settings-item')\n ).length === 0\n );\n }\n\n get tabsContainer() {\n return this.hostElement;\n }\n\n componentDidLoad() {\n requestAnimationFrame(() => {\n this.handleOverflowIndicator();\n });\n\n if (this.pinned) {\n this.pinnedChange(this.pinned);\n }\n }\n\n componentWillLoad() {\n useContextConsumer(\n this.hostElement,\n ApplicationLayoutContext,\n (ctx) => {\n this.applicationLayoutContext = ctx;\n if (ctx.hideHeader === true) {\n this.onBreakpointChange('md');\n return;\n }\n\n this.onBreakpointChange(applicationLayoutService.breakpoint);\n },\n true\n );\n\n menuController.register(this.hostElement);\n applicationLayoutService.onChange.on((breakpoint) =>\n this.onBreakpointChange(breakpoint)\n );\n this.onBreakpointChange(applicationLayoutService.breakpoint);\n }\n\n componentWillRender() {\n this.appendTabs();\n }\n\n componentDidRender() {\n this.appendFragments();\n }\n\n private setPinned(pinned: boolean) {\n this.showPinned = pinned;\n menuController.setIsPinned(pinned);\n }\n\n private onBreakpointChange(mode: Breakpoint) {\n if (!this.applicationLayoutContext && mode === 'sm') {\n return;\n }\n if (this.applicationLayoutContext?.host === 'map-navigation') {\n this.breakpoint = 'md';\n return;\n }\n if (!this.applicationLayoutContext) {\n return;\n }\n\n if (this.applicationLayoutContext.hideHeader && mode === 'sm') {\n return;\n }\n\n this.breakpoint = mode;\n\n if (this.breakpoint === 'lg') {\n this.setPinned(true);\n this.toggleMenu(true);\n return;\n }\n\n this.setPinned(false);\n this.toggleMenu(false);\n }\n\n private appendFragments() {\n this.appendAboutNewsPopover();\n }\n\n private resetActiveTab() {\n this.activeTab = null;\n }\n\n private appendTabs() {\n this.activeTab = null;\n }\n\n private getAboutPopoverVerticalPosition() {\n const heightArrow = 12;\n const offsetArrow = 6;\n const rectAbout = this.aboutTab.getBoundingClientRect();\n const offset =\n window.innerHeight -\n (rectAbout.bottom - rectAbout.height / 2 + heightArrow / 2 + offsetArrow);\n return convertToRemString(offset);\n }\n\n private appendAboutNewsPopover() {\n if (!this.aboutNewsPopover) {\n return;\n }\n\n this.aboutNewsPopover.style.bottom = this.getAboutPopoverVerticalPosition();\n\n if (!this.popoverArea?.contains(this.aboutNewsPopover)) {\n const showMore = () => {\n if (this.aboutNewsPopover?.aboutItemLabel && this.about) {\n this.about.activeTabLabel = this.aboutNewsPopover.aboutItemLabel;\n this.toggleAbout(true);\n }\n };\n\n this.aboutNewsPopover.addEventListener('showMore', showMore.bind(this));\n document.body.appendChild(this.aboutNewsPopover);\n }\n }\n\n /**\n * Toggle map sidebar expand\n * @param show\n */\n @Method()\n async toggleMapExpand(show?: boolean) {\n if (show !== undefined) {\n this.mapExpand = show;\n } else {\n this.mapExpand = !this.mapExpand;\n }\n }\n\n /**\n * Toggle menu\n * @param show\n */\n @Method()\n async toggleMenu(show?: boolean) {\n if (show !== undefined) {\n this.expand = show;\n } else {\n this.expand = !this.expand;\n }\n\n if (this.aboutNewsPopover) {\n this.aboutNewsPopover.expanded = this.expand;\n }\n\n this.expandChange.emit(this.expand);\n\n this.isTransitionDisabled = false;\n this.checkTransition();\n }\n\n /**\n * Disable transition of overlay while menu animation is running.\n */\n private checkTransition() {\n const container = this.overlayContainer;\n\n if (!container) {\n return;\n }\n\n if (this.isTransitionDisabled) {\n container.style.transitionProperty = 'left';\n } else {\n container.style.transitionProperty = 'all';\n }\n }\n\n private isOverlayVisible() {\n return this.showAbout || this.showSettings;\n }\n\n /**\n * Toggle Settings tabs\n * @param show\n */\n @Method()\n async toggleSettings(show: boolean) {\n if (!this.settings) {\n return;\n }\n\n if (!this.isOverlayVisible()) {\n this.animateOverlayFadeIn();\n }\n\n if (show) {\n this.resetOverlay();\n this.showSettings = show;\n this.settings.show = this.showSettings;\n } else {\n this.onOverlayClose();\n }\n }\n\n /**\n * Toggle About tabs\n * @param show\n */\n @Method()\n async toggleAbout(show: boolean) {\n if (!this.about) {\n return;\n }\n\n if (!this.isOverlayVisible()) {\n this.animateOverlayFadeIn();\n }\n\n if (show) {\n this.resetOverlay();\n this.showAbout = show;\n this.about.show = this.showAbout;\n } else {\n this.onOverlayClose();\n }\n }\n\n private resetOverlay() {\n this.showSettings = false;\n this.showAbout = false;\n\n if (this.settings) {\n this.settings.show = false;\n }\n\n if (this.about) {\n this.about.show = false;\n }\n }\n\n private getCollapseText() {\n return this.mapExpand ? this.i18nCollapse : this.i18nExpand;\n }\n\n private getCollapseIcon() {\n return this.mapExpand ? 'navigation-left' : 'navigation-right';\n }\n\n private isMenuItemClicked(event: Event) {\n if (event.target instanceof HTMLElement) {\n return event.target.tagName === 'IX-MENU-ITEM';\n }\n\n return false;\n }\n\n @Listen('resize', { target: 'window' })\n private handleOverflowIndicator() {\n const { clientHeight, scrollTop, scrollHeight } = this.menuItemsContainer;\n this.itemsScrollShadowTop = scrollTop > 0;\n this.itemsScrollShadowBottom =\n Math.round(scrollTop + clientHeight) < scrollHeight;\n }\n\n @Listen('close')\n onOverlayClose() {\n this.animateOverlayFadeOut(() => {\n this.resetOverlay();\n });\n }\n\n private animateOverlayFadeIn() {\n requestAnimationFrame(() => {\n anime({\n targets: this.overlayContainer,\n duration: 300,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeInSine',\n begin: () => {\n if (this.showPinned) {\n return;\n }\n\n this.toggleMenu(false);\n },\n });\n });\n }\n\n private animateOverlayFadeOut(onComplete: Function) {\n requestAnimationFrame(() => {\n anime({\n targets: this.overlayContainer,\n duration: 300,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => onComplete(),\n });\n });\n }\n\n private onMenuItemsClick(event: Event) {\n if (this.isMenuItemClicked(event)) {\n if (!this.showPinned) {\n this.toggleMenu(false);\n }\n this.onOverlayClose();\n }\n }\n\n private isHiddenFromViewport() {\n return this.breakpoint === 'sm' && this.expand === false;\n }\n\n private sidebarToggle() {\n this.mapExpandChange.emit(this.mapExpand);\n\n this.hostElement.dispatchEvent(\n new ApplicationSidebarToggleEvent(this.mapExpand)\n );\n }\n\n render() {\n return (\n <Host\n class={{\n expanded: this.expand,\n [`breakpoint-${this.breakpoint}`]: true,\n }}\n slot=\"menu\"\n >\n <aside\n class={{\n menu: true,\n expanded: this.expand,\n }}\n onClick={() => {\n this.resetActiveTab();\n }}\n >\n <ix-burger-menu\n onClick={async () => this.toggleMenu()}\n expanded={this.expand}\n ixAriaLabel={this.i18nExpandSidebar}\n pinned={this.showPinned}\n class={{\n 'burger-menu': true,\n }}\n ></ix-burger-menu>\n <div class=\"menu-avatar\">\n <slot name=\"ix-menu-avatar\"></slot>\n </div>\n\n <div\n id=\"menu-tabs\"\n style={{\n display: 'contents',\n }}\n onClick={(e) => this.onMenuItemsClick(e)}\n >\n <div class=\"tabs-top\">\n <slot name=\"home\"></slot>\n </div>\n <div class=\"tabs-shadow-container\">\n <div\n class={{\n 'tabs--shadow': true,\n 'tabs--shadow-top': true,\n 'tabs--shadow--show': this.itemsScrollShadowTop,\n }}\n ></div>\n <div class=\"tabs\" onScroll={() => this.handleOverflowIndicator()}>\n {this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (\n <slot></slot>\n ) : null}\n </div>\n <div\n class={{\n 'tabs--shadow': true,\n 'tabs--shadow-bottom': true,\n 'tabs--shadow--show': this.itemsScrollShadowBottom,\n }}\n ></div>\n </div>\n </div>\n <div class=\"bottom-tab-divider\"></div>\n {this.settings ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"settings\"\n class={{\n 'internal-tab': true,\n 'bottom-tab': true,\n active: this.showSettings,\n }}\n icon={'cogwheel'}\n onClick={async () => this.toggleSettings(!this.showSettings)}\n >\n {this.i18nSettings}\n </ix-menu-item>\n ) : null}\n <div onClick={(e) => this.onMenuItemsClick(e)}>\n <slot name=\"bottom\"></slot>\n </div>\n\n <div id=\"popover-area\"></div>\n {this.about ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"aboutAndLegal\"\n class={{\n 'internal-tab': true,\n 'bottom-tab': true,\n active: this.showAbout,\n }}\n icon={'info'}\n onClick={async () => this.toggleAbout(!this.showAbout)}\n >\n {this.i18nLegal}\n </ix-menu-item>\n ) : null}\n {this.enableToggleTheme ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"toggleTheme\"\n onClick={() => themeSwitcher.toggleMode()}\n class=\"internal-tab bottom-tab\"\n icon={'bulb'}\n >\n {this.i18nToggleTheme}\n </ix-menu-item>\n ) : null}\n {this.enableMapExpand || this.applicationLayoutContext?.sidebar ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"menu-collapse\"\n onClick={() => this.sidebarToggle()}\n class=\"internal-tab bottom-tab\"\n icon={`${this.getCollapseIcon()}`}\n >\n {this.getCollapseText()}\n </ix-menu-item>\n ) : null}\n </aside>\n <div\n class={{\n 'menu-overlay': true,\n visible: this.isOverlayVisible(),\n expanded: this.expand,\n }}\n onTransitionEnd={() => {\n this.isTransitionDisabled = true;\n this.checkTransition();\n }}\n >\n <div class={'menu-overlay-container'}>\n {this.showSettings ? <slot name=\"ix-menu-settings\"></slot> : null}\n </div>\n <div class={'menu-overlay-container'}>\n {this.showAbout ? <slot name=\"ix-menu-about\"></slot> : null}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/cjs/ix-modal.cjs.entry.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-be499a74.js');
6
6
  const anime_es = require('./anime.es-8822f296.js');
7
- const a11y = require('./a11y-4fdcefb4.js');
7
+ const a11y = require('./a11y-7e1c1b86.js');
8
8
  const animation = require('./animation-d5cc0bec.js');
9
9
 
10
10
  const modalCss = "::backdrop{--ix-dialog-backdrop:var(--theme-color-lightbox, #0000008c)}:focus-visible{outline:none !important}:host dialog{margin:0;left:50%}:host dialog::backdrop{-webkit-backdrop-filter:blur(2.7182817459px);backdrop-filter:blur(2.7182817459px)}:host .modal{display:flex;flex-direction:column;position:relative;border:none;border-radius:var(--theme-default-border-radius);background:var(--theme-modal--background);box-shadow:var(--theme-shadow-4);color:var(--theme-color-std-text);overflow:visible;max-height:80vh;pointer-events:all}:host .modal-size-360{width:22.5rem}:host .modal-size-480{width:30rem}:host .modal-size-600{width:37.5rem}:host .modal-size-720{width:45rem}:host .modal-size-840{width:52.5rem}:host .modal-size-full-width{width:95%}:host .modal-size-full-screen{left:0px !important;top:0px !important;transform:none !important;width:calc(100% - 28px);min-width:calc(100% - 28px);max-width:calc(100% - 28px);height:calc(100% - 28px);min-height:calc(100% - 28px);max-height:calc(100% - 28px)}:host .dialog-backdrop{display:block;position:fixed;width:100vw;height:100vh;top:0px;left:0px;pointer-events:none}:host ::slotted(ix-modal-footer){margin-top:auto}:host(.align-center) dialog{margin:0;left:50%;top:50%}:host(.no-backdrop) dialog::backdrop{background-color:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}:host(.with-icon) ::slotted(ix-modal-footer),:host(.with-icon) ::slotted(ix-modal-content){margin-left:2.5rem}";
@@ -69,8 +69,7 @@ const Modal = class {
69
69
  * Show the dialog
70
70
  */
71
71
  async showModal() {
72
- var _a;
73
- (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.showModal();
72
+ setTimeout(() => this.dialog.showModal());
74
73
  }
75
74
  /**
76
75
  * Dismiss the dialog