@koobiq/components 16.0.0-beta.1 → 16.0.0-beta.11

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 (479) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +2 -2
  3. package/autocomplete/_autocomplete-theme.scss +3 -10
  4. package/autocomplete/autocomplete-origin.directive.d.ts +1 -1
  5. package/autocomplete/autocomplete-trigger.directive.d.ts +6 -16
  6. package/autocomplete/autocomplete.component.d.ts +1 -1
  7. package/autocomplete/autocomplete.scss +0 -8
  8. package/badge/README.md +0 -0
  9. package/{core/styles/theming/_badges-theme.scss → badge/_badge-theme.scss} +14 -13
  10. package/badge/badge.component.d.ts +44 -0
  11. package/badge/badge.component.scss +83 -0
  12. package/badge/badge.module.d.ts +10 -0
  13. package/badge/index.d.ts +1 -0
  14. package/badge/public-api.d.ts +2 -0
  15. package/button/_button-base.scss +1 -1
  16. package/button/_button-theme.scss +35 -27
  17. package/button/button.scss +5 -2
  18. package/button-toggle/_button-toggle-theme.scss +26 -45
  19. package/button-toggle/button-toggle.component.d.ts +2 -2
  20. package/button-toggle/button-toggle.scss +40 -87
  21. package/card/_card-theme.scss +1 -1
  22. package/checkbox/README.md +1 -1
  23. package/checkbox/_checkbox-theme.scss +10 -2
  24. package/checkbox/checkbox.d.ts +2 -2
  25. package/code-block/README.md +14 -14
  26. package/code-block/_code-block-theme.scss +49 -10
  27. package/code-block/actionbar.component.scss +34 -6
  28. package/code-block/code-block.component.d.ts +2 -2
  29. package/code-block/code-block.scss +101 -27
  30. package/core/animation/index.d.ts +1 -1
  31. package/core/animation/select-animations.d.ts +1 -1
  32. package/core/common-behaviors/color.d.ts +1 -1
  33. package/core/common-behaviors/common-module.d.ts +1 -1
  34. package/core/formatters/index.d.ts +1 -1
  35. package/core/formatters/number/formatter.d.ts +56 -1
  36. package/core/forms/_forms-theme.scss +4 -4
  37. package/core/forms/_forms.scss +1 -3
  38. package/core/forms/forms.directive.d.ts +2 -2
  39. package/core/locales/en-US.d.ts +19 -1
  40. package/core/locales/es-LA.d.ts +27 -0
  41. package/core/locales/fa-IR.d.ts +28 -0
  42. package/core/locales/locale-service.d.ts +148 -3
  43. package/core/locales/pt-BR.d.ts +27 -0
  44. package/core/locales/ru-RU.d.ts +20 -1
  45. package/core/locales/zh-CN.d.ts +26 -0
  46. package/core/option/_optgroup-theme.scss +1 -1
  47. package/core/option/_option-action-theme.scss +1 -1
  48. package/core/option/_option-theme.scss +37 -14
  49. package/core/option/action.d.ts +1 -1
  50. package/core/option/action.scss +4 -5
  51. package/core/option/optgroup.d.ts +1 -1
  52. package/core/option/option.d.ts +37 -8
  53. package/core/option/option.scss +5 -50
  54. package/core/overlay/overlay-position-map.d.ts +7 -1
  55. package/core/pop-up/constants.d.ts +2 -1
  56. package/core/public-api.d.ts +1 -0
  57. package/core/select/constants.d.ts +2 -2
  58. package/core/services/theme.service.d.ts +23 -0
  59. package/core/styles/_koobiq-theme.scss +12 -1
  60. package/core/styles/_tokens.kbq.import.scss +4 -4
  61. package/core/styles/_tokens.scss +4 -4
  62. package/core/styles/_variables.scss +1 -0
  63. package/core/styles/common/_animation.scss +10 -6
  64. package/core/styles/common/_list.scss +123 -0
  65. package/core/styles/common/_overlay.scss +1 -1
  66. package/core/styles/common/_select.scss +232 -0
  67. package/core/styles/theming/_components-theming.scss +716 -102
  68. package/core/styles/theming/_theming.scss +201 -30
  69. package/core/styles/typography/_typography.scss +176 -5
  70. package/datepicker/_datepicker-theme.scss +43 -57
  71. package/datepicker/calendar-body.component.d.ts +1 -1
  72. package/datepicker/calendar-body.scss +11 -26
  73. package/datepicker/calendar-header.component.d.ts +9 -3
  74. package/datepicker/calendar-header.scss +7 -31
  75. package/datepicker/calendar.component.d.ts +4 -5
  76. package/datepicker/calendar.scss +20 -25
  77. package/datepicker/datepicker-animations.d.ts +2 -2
  78. package/datepicker/datepicker-content.scss +17 -10
  79. package/datepicker/datepicker-input.directive.d.ts +4 -4
  80. package/datepicker/datepicker-input.scss +1 -1
  81. package/datepicker/datepicker-toggle.component.d.ts +3 -3
  82. package/datepicker/datepicker.component.d.ts +2 -2
  83. package/datepicker/month-view.component.d.ts +5 -6
  84. package/dl/_dl-theme.scss +2 -56
  85. package/dl/dl.component.d.ts +1 -2
  86. package/dl/dl.scss +10 -47
  87. package/dropdown/_dropdown-theme.scss +29 -37
  88. package/dropdown/dropdown-animations.d.ts +1 -1
  89. package/dropdown/dropdown-content.directive.d.ts +1 -1
  90. package/dropdown/dropdown-item.component.d.ts +1 -1
  91. package/dropdown/dropdown-item.scss +18 -40
  92. package/dropdown/dropdown-trigger.directive.d.ts +2 -2
  93. package/dropdown/dropdown.component.d.ts +1 -1
  94. package/dropdown/dropdown.scss +16 -39
  95. package/dropdown/dropdown.types.d.ts +1 -1
  96. package/esm2022/alert/alert.component.mjs +3 -3
  97. package/esm2022/autocomplete/autocomplete-origin.directive.mjs +4 -4
  98. package/esm2022/autocomplete/autocomplete-trigger.directive.mjs +34 -31
  99. package/esm2022/autocomplete/autocomplete.component.mjs +4 -4
  100. package/esm2022/badge/badge.component.mjs +122 -0
  101. package/esm2022/badge/badge.module.mjs +40 -0
  102. package/esm2022/badge/index.mjs +2 -0
  103. package/esm2022/badge/koobiq-components-badge.mjs +5 -0
  104. package/esm2022/badge/public-api.mjs +3 -0
  105. package/esm2022/button/button.component.mjs +4 -3
  106. package/esm2022/button-toggle/button-toggle.component.mjs +15 -15
  107. package/esm2022/checkbox/checkbox.mjs +4 -4
  108. package/esm2022/code-block/actionbar.component.mjs +3 -3
  109. package/esm2022/code-block/code-block.component.mjs +11 -9
  110. package/esm2022/core/animation/index.mjs +2 -2
  111. package/esm2022/core/animation/select-animations.mjs +4 -4
  112. package/esm2022/core/common-behaviors/color.mjs +1 -1
  113. package/esm2022/core/common-behaviors/common-module.mjs +2 -2
  114. package/esm2022/core/formatters/index.mjs +10 -2
  115. package/esm2022/core/formatters/number/formatter.mjs +224 -3
  116. package/esm2022/core/forms/forms.directive.mjs +5 -5
  117. package/esm2022/core/locales/en-US.mjs +22 -4
  118. package/esm2022/core/locales/es-LA.mjs +31 -2
  119. package/esm2022/core/locales/fa-IR.mjs +30 -2
  120. package/esm2022/core/locales/locale-service.mjs +4 -4
  121. package/esm2022/core/locales/pt-BR.mjs +29 -2
  122. package/esm2022/core/locales/ru-RU.mjs +23 -2
  123. package/esm2022/core/locales/zh-CN.mjs +28 -2
  124. package/esm2022/core/option/action.mjs +8 -7
  125. package/esm2022/core/option/optgroup.mjs +3 -3
  126. package/esm2022/core/option/option.mjs +47 -10
  127. package/esm2022/core/overlay/overlay-position-map.mjs +8 -1
  128. package/esm2022/core/pop-up/constants.mjs +2 -1
  129. package/esm2022/core/pop-up/pop-up-trigger.mjs +12 -3
  130. package/esm2022/core/public-api.mjs +2 -1
  131. package/esm2022/core/select/constants.mjs +3 -3
  132. package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +3 -3
  133. package/esm2022/core/services/theme.service.mjs +60 -0
  134. package/esm2022/core/version.mjs +2 -2
  135. package/esm2022/datepicker/calendar-body.component.mjs +7 -5
  136. package/esm2022/datepicker/calendar-header.component.mjs +9 -8
  137. package/esm2022/datepicker/calendar.component.mjs +8 -17
  138. package/esm2022/datepicker/datepicker-animations.mjs +3 -3
  139. package/esm2022/datepicker/datepicker-input.directive.mjs +29 -20
  140. package/esm2022/datepicker/datepicker-toggle.component.mjs +6 -6
  141. package/esm2022/datepicker/datepicker.component.mjs +12 -12
  142. package/esm2022/datepicker/month-view.component.mjs +9 -18
  143. package/esm2022/dl/dl.component.mjs +3 -7
  144. package/esm2022/dropdown/dropdown-animations.mjs +4 -4
  145. package/esm2022/dropdown/dropdown-content.directive.mjs +3 -3
  146. package/esm2022/dropdown/dropdown-errors.mjs +6 -6
  147. package/esm2022/dropdown/dropdown-item.component.mjs +7 -6
  148. package/esm2022/dropdown/dropdown-trigger.directive.mjs +10 -9
  149. package/esm2022/dropdown/dropdown.component.mjs +9 -9
  150. package/esm2022/dropdown/dropdown.types.mjs +1 -1
  151. package/esm2022/file-upload/file-drop.mjs +43 -6
  152. package/esm2022/file-upload/file-upload.mjs +1 -1
  153. package/esm2022/file-upload/multiple-file-upload.component.mjs +13 -9
  154. package/esm2022/file-upload/single-file-upload.component.mjs +16 -13
  155. package/esm2022/form-field/cleaner.mjs +3 -3
  156. package/esm2022/form-field/form-field.mjs +12 -15
  157. package/esm2022/form-field/hint.mjs +16 -6
  158. package/esm2022/form-field/password-hint.mjs +25 -16
  159. package/esm2022/form-field/password-toggle.mjs +29 -12
  160. package/esm2022/form-field/prefix.mjs +3 -3
  161. package/esm2022/form-field/suffix.mjs +3 -3
  162. package/esm2022/form-field/validate.directive.mjs +15 -9
  163. package/esm2022/icon/icon-button.component.mjs +68 -0
  164. package/esm2022/icon/icon-item.component.mjs +27 -0
  165. package/esm2022/icon/icon.component.mjs +5 -90
  166. package/esm2022/icon/icon.module.mjs +4 -2
  167. package/esm2022/icon/public-api.mjs +3 -1
  168. package/esm2022/input/input-errors.mjs +2 -2
  169. package/esm2022/input/input-number.mjs +260 -44
  170. package/esm2022/input/input-password.mjs +5 -5
  171. package/esm2022/input/input.mjs +7 -7
  172. package/esm2022/link/link.component.mjs +14 -13
  173. package/esm2022/list/list-selection.component.mjs +23 -10
  174. package/esm2022/list/list.component.mjs +2 -2
  175. package/esm2022/list/list.module.mjs +8 -4
  176. package/esm2022/loader-overlay/loader-overlay.component.mjs +20 -19
  177. package/esm2022/modal/modal-control.service.mjs +5 -5
  178. package/esm2022/modal/modal-ref.class.mjs +1 -1
  179. package/esm2022/modal/modal.component.mjs +129 -134
  180. package/esm2022/modal/modal.module.mjs +13 -7
  181. package/esm2022/modal/modal.service.mjs +23 -23
  182. package/esm2022/modal/modal.type.mjs +1 -3
  183. package/esm2022/navbar/navbar-item.component.mjs +19 -18
  184. package/esm2022/navbar/navbar.component.mjs +20 -11
  185. package/esm2022/navbar/vertical-navbar.animation.mjs +2 -2
  186. package/esm2022/navbar/vertical-navbar.component.mjs +11 -8
  187. package/esm2022/popover/popover-animations.mjs +2 -2
  188. package/esm2022/popover/popover-confirm.component.mjs +9 -11
  189. package/esm2022/popover/popover.component.mjs +24 -24
  190. package/esm2022/progress-spinner/progress-spinner.component.mjs +3 -3
  191. package/esm2022/radio/radio.component.mjs +11 -8
  192. package/esm2022/risk-level/index.mjs +2 -0
  193. package/esm2022/risk-level/koobiq-components-risk-level.mjs +5 -0
  194. package/esm2022/risk-level/public-api.mjs +3 -0
  195. package/esm2022/risk-level/risk-level.component.mjs +40 -0
  196. package/esm2022/risk-level/risk-level.module.mjs +28 -0
  197. package/esm2022/select/select-option.directive.mjs +15 -3
  198. package/esm2022/select/select.component.mjs +47 -29
  199. package/esm2022/sidebar/sidebar-animations.mjs +2 -2
  200. package/esm2022/sidebar/sidebar.component.mjs +9 -9
  201. package/esm2022/sidepanel/sidepanel-container.component.mjs +3 -3
  202. package/esm2022/sidepanel/sidepanel-directives.mjs +8 -10
  203. package/esm2022/sidepanel/sidepanel.module.mjs +10 -4
  204. package/esm2022/splitter/splitter.component.mjs +3 -3
  205. package/esm2022/table/table.component.mjs +3 -3
  206. package/esm2022/tabs/paginated-tab-header.mjs +11 -2
  207. package/esm2022/tabs/tab-body.component.mjs +7 -7
  208. package/esm2022/tabs/tab-content.directive.mjs +3 -3
  209. package/esm2022/tabs/tab-group.component.mjs +16 -21
  210. package/esm2022/tabs/tab-header.component.mjs +2 -2
  211. package/esm2022/tabs/tab-label-wrapper.directive.mjs +4 -3
  212. package/esm2022/tabs/tab-label.directive.mjs +3 -3
  213. package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +21 -10
  214. package/esm2022/tabs/tab.component.mjs +14 -5
  215. package/esm2022/tabs/tabs-animations.mjs +2 -2
  216. package/esm2022/tabs/tabs.module.mjs +2 -6
  217. package/esm2022/tags/tag-default-options.mjs +1 -1
  218. package/esm2022/tags/tag-input.mjs +17 -15
  219. package/esm2022/tags/tag-list.component.mjs +15 -10
  220. package/esm2022/tags/tag.component.mjs +16 -16
  221. package/esm2022/textarea/textarea.component.mjs +4 -4
  222. package/esm2022/timepicker/timepicker.directive.mjs +10 -10
  223. package/esm2022/timezone/timezone-option.component.mjs +4 -4
  224. package/esm2022/timezone/timezone-select.component.mjs +5 -5
  225. package/esm2022/title/title.directive.mjs +6 -6
  226. package/esm2022/toast/toast-animations.mjs +2 -1
  227. package/esm2022/toast/toast-container.component.mjs +22 -8
  228. package/esm2022/toast/toast.component.mjs +30 -13
  229. package/esm2022/toast/toast.module.mjs +23 -8
  230. package/esm2022/toast/toast.service.mjs +2 -1
  231. package/esm2022/toast/toast.type.mjs +6 -1
  232. package/esm2022/toggle/toggle.component.mjs +4 -4
  233. package/esm2022/tooltip/tooltip.animations.mjs +2 -2
  234. package/esm2022/tooltip/tooltip.component.mjs +31 -30
  235. package/esm2022/tree/control/base-tree-control.mjs +1 -1
  236. package/esm2022/tree/control/flat-tree-control.mjs +4 -4
  237. package/esm2022/tree/control/tree-control.mjs +1 -1
  238. package/esm2022/tree/node.mjs +5 -5
  239. package/esm2022/tree/outlet.mjs +3 -3
  240. package/esm2022/tree/padding.directive.mjs +9 -9
  241. package/esm2022/tree/toggle.mjs +11 -12
  242. package/esm2022/tree/tree-base.mjs +3 -3
  243. package/esm2022/tree/tree-option.component.mjs +12 -10
  244. package/esm2022/tree/tree-selection.component.mjs +8 -6
  245. package/esm2022/tree/tree.mjs +3 -3
  246. package/esm2022/tree/tree.module.mjs +13 -4
  247. package/esm2022/tree-select/tree-select.component.mjs +28 -23
  248. package/fesm2022/koobiq-components-alert.mjs +2 -2
  249. package/fesm2022/koobiq-components-alert.mjs.map +1 -1
  250. package/fesm2022/koobiq-components-autocomplete.mjs +40 -37
  251. package/fesm2022/koobiq-components-autocomplete.mjs.map +1 -1
  252. package/fesm2022/koobiq-components-badge.mjs +166 -0
  253. package/fesm2022/koobiq-components-badge.mjs.map +1 -0
  254. package/fesm2022/koobiq-components-button-toggle.mjs +14 -14
  255. package/fesm2022/koobiq-components-button-toggle.mjs.map +1 -1
  256. package/fesm2022/koobiq-components-button.mjs +3 -2
  257. package/fesm2022/koobiq-components-button.mjs.map +1 -1
  258. package/fesm2022/koobiq-components-checkbox.mjs +3 -3
  259. package/fesm2022/koobiq-components-checkbox.mjs.map +1 -1
  260. package/fesm2022/koobiq-components-code-block.mjs +10 -9
  261. package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
  262. package/fesm2022/koobiq-components-core.mjs +535 -46
  263. package/fesm2022/koobiq-components-core.mjs.map +1 -1
  264. package/fesm2022/koobiq-components-datepicker.mjs +73 -79
  265. package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
  266. package/fesm2022/koobiq-components-dl.mjs +2 -6
  267. package/fesm2022/koobiq-components-dl.mjs.map +1 -1
  268. package/fesm2022/koobiq-components-dropdown.mjs +33 -31
  269. package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
  270. package/fesm2022/koobiq-components-file-upload.mjs +65 -21
  271. package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
  272. package/fesm2022/koobiq-components-form-field.mjs +96 -59
  273. package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
  274. package/fesm2022/koobiq-components-icon.mjs +10 -8
  275. package/fesm2022/koobiq-components-icon.mjs.map +1 -1
  276. package/fesm2022/koobiq-components-input.mjs +269 -55
  277. package/fesm2022/koobiq-components-input.mjs.map +1 -1
  278. package/fesm2022/koobiq-components-link.mjs +13 -12
  279. package/fesm2022/koobiq-components-link.mjs.map +1 -1
  280. package/fesm2022/koobiq-components-list.mjs +31 -14
  281. package/fesm2022/koobiq-components-list.mjs.map +1 -1
  282. package/fesm2022/koobiq-components-loader-overlay.mjs +19 -18
  283. package/fesm2022/koobiq-components-loader-overlay.mjs.map +1 -1
  284. package/fesm2022/koobiq-components-modal.mjs +164 -167
  285. package/fesm2022/koobiq-components-modal.mjs.map +1 -1
  286. package/fesm2022/koobiq-components-navbar.mjs +46 -37
  287. package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
  288. package/fesm2022/koobiq-components-popover.mjs +32 -33
  289. package/fesm2022/koobiq-components-popover.mjs.map +1 -1
  290. package/fesm2022/koobiq-components-progress-spinner.mjs +2 -2
  291. package/fesm2022/koobiq-components-progress-spinner.mjs.map +1 -1
  292. package/fesm2022/koobiq-components-radio.mjs +10 -7
  293. package/fesm2022/koobiq-components-radio.mjs.map +1 -1
  294. package/fesm2022/koobiq-components-risk-level.mjs +72 -0
  295. package/fesm2022/koobiq-components-risk-level.mjs.map +1 -0
  296. package/fesm2022/koobiq-components-select.mjs +60 -30
  297. package/fesm2022/koobiq-components-select.mjs.map +1 -1
  298. package/fesm2022/koobiq-components-sidebar.mjs +8 -8
  299. package/fesm2022/koobiq-components-sidebar.mjs.map +1 -1
  300. package/fesm2022/koobiq-components-sidepanel.mjs +19 -14
  301. package/fesm2022/koobiq-components-sidepanel.mjs.map +1 -1
  302. package/fesm2022/koobiq-components-splitter.mjs +2 -2
  303. package/fesm2022/koobiq-components-splitter.mjs.map +1 -1
  304. package/fesm2022/koobiq-components-table.mjs +2 -2
  305. package/fesm2022/koobiq-components-table.mjs.map +1 -1
  306. package/fesm2022/koobiq-components-tabs.mjs +74 -53
  307. package/fesm2022/koobiq-components-tabs.mjs.map +1 -1
  308. package/fesm2022/koobiq-components-tags.mjs +45 -38
  309. package/fesm2022/koobiq-components-tags.mjs.map +1 -1
  310. package/fesm2022/koobiq-components-textarea.mjs +3 -3
  311. package/fesm2022/koobiq-components-textarea.mjs.map +1 -1
  312. package/fesm2022/koobiq-components-timepicker.mjs +9 -9
  313. package/fesm2022/koobiq-components-timepicker.mjs.map +1 -1
  314. package/fesm2022/koobiq-components-timezone.mjs +7 -7
  315. package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
  316. package/fesm2022/koobiq-components-title.mjs +5 -5
  317. package/fesm2022/koobiq-components-title.mjs.map +1 -1
  318. package/fesm2022/koobiq-components-toast.mjs +71 -22
  319. package/fesm2022/koobiq-components-toast.mjs.map +1 -1
  320. package/fesm2022/koobiq-components-toggle.mjs +3 -3
  321. package/fesm2022/koobiq-components-toggle.mjs.map +1 -1
  322. package/fesm2022/koobiq-components-tooltip.mjs +31 -30
  323. package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
  324. package/fesm2022/koobiq-components-tree-select.mjs +27 -22
  325. package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
  326. package/fesm2022/koobiq-components-tree.mjs +67 -54
  327. package/fesm2022/koobiq-components-tree.mjs.map +1 -1
  328. package/file-upload/_file-upload-theme.scss +54 -40
  329. package/file-upload/file-drop.d.ts +3 -2
  330. package/file-upload/file-upload.d.ts +4 -1
  331. package/file-upload/file-upload.scss +2 -9
  332. package/file-upload/multiple-file-upload.component.d.ts +6 -5
  333. package/file-upload/multiple-file-upload.component.scss +170 -59
  334. package/file-upload/single-file-upload.component.d.ts +6 -5
  335. package/file-upload/single-file-upload.component.scss +42 -22
  336. package/form-field/_form-field-theme.scss +3 -6
  337. package/form-field/_hint-theme.scss +6 -2
  338. package/form-field/cleaner.d.ts +1 -1
  339. package/form-field/form-field.d.ts +3 -4
  340. package/form-field/form-field.scss +2 -2
  341. package/form-field/hint.d.ts +4 -1
  342. package/form-field/hint.scss +9 -1
  343. package/form-field/password-hint.d.ts +7 -3
  344. package/form-field/password-hint.scss +6 -0
  345. package/form-field/password-toggle.d.ts +13 -7
  346. package/form-field/prefix.d.ts +1 -1
  347. package/form-field/suffix.d.ts +1 -1
  348. package/form-field/validate.directive.d.ts +1 -1
  349. package/icon/_icon-button-theme.scss +129 -0
  350. package/icon/_icon-item-theme.scss +41 -0
  351. package/icon/_icon-theme.scss +1 -232
  352. package/icon/icon-button.component.d.ts +22 -0
  353. package/icon/icon-button.scss +33 -0
  354. package/icon/icon-item.component.d.ts +10 -0
  355. package/icon/icon-item.scss +18 -0
  356. package/icon/icon.component.d.ts +1 -25
  357. package/icon/icon.module.d.ts +6 -4
  358. package/icon/icon.scss +0 -41
  359. package/icon/public-api.d.ts +2 -0
  360. package/input/_input-theme.scss +2 -1
  361. package/input/input-number.d.ts +61 -10
  362. package/input/input-password.d.ts +1 -1
  363. package/input/input.d.ts +2 -2
  364. package/input/input.scss +3 -1
  365. package/link/_link-theme.scss +101 -92
  366. package/link/link.component.d.ts +4 -4
  367. package/list/_list-theme.scss +36 -17
  368. package/list/list-selection.component.d.ts +6 -2
  369. package/list/list.module.d.ts +1 -1
  370. package/list/list.scss +6 -19
  371. package/loader-overlay/_loader-overlay-theme.scss +43 -11
  372. package/loader-overlay/loader-overlay.component.d.ts +6 -5
  373. package/loader-overlay/loader-overlay.scss +56 -22
  374. package/markdown/_markdown-theme.scss +2 -2
  375. package/modal/README.md +5 -5
  376. package/modal/_modal-confirm.scss +5 -37
  377. package/modal/_modal-theme.scss +14 -52
  378. package/modal/modal-ref.class.d.ts +2 -2
  379. package/modal/modal.component.d.ts +53 -52
  380. package/modal/modal.module.d.ts +2 -1
  381. package/modal/modal.scss +50 -31
  382. package/modal/modal.type.d.ts +35 -36
  383. package/navbar/_navbar-theme.scss +2 -2
  384. package/navbar/navbar-item.component.d.ts +4 -3
  385. package/navbar/navbar.component.d.ts +5 -2
  386. package/navbar/vertical-navbar.component.d.ts +4 -2
  387. package/package.json +48 -38
  388. package/popover/README.md +14 -14
  389. package/popover/_popover-theme.scss +15 -78
  390. package/popover/popover-animations.d.ts +1 -1
  391. package/popover/popover-confirm.component.d.ts +1 -3
  392. package/popover/popover.component.d.ts +3 -3
  393. package/popover/popover.scss +60 -50
  394. package/prebuilt-themes/dark-theme.css +1 -1
  395. package/prebuilt-themes/light-theme.css +1 -1
  396. package/progress-spinner/progress-spinner.component.d.ts +2 -2
  397. package/progress-spinner/progress-spinner.scss +10 -5
  398. package/radio/_radio-theme.scss +17 -4
  399. package/radio/radio.component.d.ts +2 -2
  400. package/radio/radio.scss +13 -0
  401. package/risk-level/README.md +0 -0
  402. package/risk-level/_risk-level-theme.scss +88 -0
  403. package/risk-level/index.d.ts +1 -0
  404. package/risk-level/public-api.d.ts +2 -0
  405. package/risk-level/risk-level.component.d.ts +18 -0
  406. package/risk-level/risk-level.component.scss +26 -0
  407. package/risk-level/risk-level.module.d.ts +10 -0
  408. package/select/_select-theme.scss +12 -4
  409. package/select/select-option.directive.d.ts +2 -0
  410. package/select/select.component.d.ts +15 -12
  411. package/select/select.scss +6 -190
  412. package/sidebar/sidebar-animations.d.ts +1 -1
  413. package/sidebar/sidebar.component.d.ts +3 -3
  414. package/sidepanel/_sidepanel-theme.scss +11 -41
  415. package/sidepanel/sidepanel-directives.d.ts +0 -2
  416. package/sidepanel/sidepanel.scss +33 -35
  417. package/splitter/_splitter-theme.scss +1 -0
  418. package/splitter/splitter.component.d.ts +1 -1
  419. package/table/_table-theme.scss +1 -1
  420. package/table/table.component.d.ts +1 -1
  421. package/tabs/_tabs-common.scss +28 -147
  422. package/tabs/_tabs-theme.scss +81 -175
  423. package/tabs/paginated-tab-header.d.ts +1 -0
  424. package/tabs/tab-body.component.d.ts +1 -1
  425. package/tabs/tab-content.directive.d.ts +1 -1
  426. package/tabs/tab-group.component.d.ts +5 -8
  427. package/tabs/tab-group.scss +10 -10
  428. package/tabs/tab-header.scss +2 -24
  429. package/tabs/tab-label-wrapper.directive.d.ts +1 -1
  430. package/tabs/tab-label.directive.d.ts +1 -1
  431. package/tabs/tab-nav-bar/tab-nav-bar.d.ts +4 -2
  432. package/tabs/tab-nav-bar/tab-nav-bar.scss +9 -16
  433. package/tabs/tab.component.d.ts +1 -1
  434. package/tabs/tabs-animations.d.ts +1 -1
  435. package/tabs/tabs.module.d.ts +1 -1
  436. package/tags/_tag-theme.scss +1 -25
  437. package/tags/tag-default-options.d.ts +4 -0
  438. package/tags/tag-input.d.ts +2 -2
  439. package/tags/tag-list.component.d.ts +3 -2
  440. package/tags/tag-list.scss +26 -16
  441. package/tags/tag.component.d.ts +6 -6
  442. package/textarea/textarea.component.d.ts +1 -1
  443. package/timepicker/timepicker.directive.d.ts +2 -2
  444. package/timezone/timezone-option.component.d.ts +1 -1
  445. package/timezone/timezone-select.component.d.ts +1 -1
  446. package/title/title.directive.d.ts +1 -1
  447. package/toast/_toast-theme.scss +21 -33
  448. package/toast/toast-animations.d.ts +1 -0
  449. package/toast/toast-container.component.d.ts +7 -3
  450. package/toast/toast-container.component.scss +2 -1
  451. package/toast/toast.component.d.ts +6 -1
  452. package/toast/toast.component.scss +41 -34
  453. package/toast/toast.module.d.ts +1 -1
  454. package/toast/toast.service.d.ts +2 -0
  455. package/toast/toast.type.d.ts +8 -5
  456. package/toggle/_toggle-theme.scss +9 -1
  457. package/toggle/toggle.component.d.ts +1 -1
  458. package/toggle/toggle.scss +5 -2
  459. package/tooltip/tooltip.animations.d.ts +1 -1
  460. package/tooltip/tooltip.component.d.ts +5 -5
  461. package/tree/_tree-theme.scss +46 -34
  462. package/tree/control/base-tree-control.d.ts +1 -1
  463. package/tree/control/tree-control.d.ts +1 -1
  464. package/tree/node.d.ts +1 -1
  465. package/tree/outlet.d.ts +1 -1
  466. package/tree/padding.directive.d.ts +1 -1
  467. package/tree/toggle.d.ts +3 -3
  468. package/tree/tree-base.d.ts +1 -1
  469. package/tree/tree-option.component.d.ts +1 -2
  470. package/tree/tree-option.scss +40 -27
  471. package/tree/tree-selection.component.d.ts +1 -1
  472. package/tree/tree.d.ts +1 -1
  473. package/tree/tree.module.d.ts +2 -1
  474. package/tree-select/_tree-select-theme.scss +13 -3
  475. package/tree-select/tree-select.component.d.ts +6 -4
  476. package/tree-select/tree-select.scss +5 -194
  477. package/core/styles/theming/_badges.scss +0 -57
  478. package/core/styles/theming/prebuilt/light-theme.scss +0 -20
  479. package/list/_list-base.scss +0 -54
package/fesm2022/koobiq-components-navbar.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import * as i2 from '@angular/cdk/a11y';
1
+ import * as i1 from '@angular/cdk/a11y';
2
2
  import { A11yModule } from '@angular/cdk/a11y';
3
3
  import { PlatformModule } from '@angular/cdk/platform';
4
4
  import * as i6 from '@angular/common';
@@ -19,7 +19,7 @@ import { merge, Subject, EMPTY } from 'rxjs';
19
19
  import { takeUntil, startWith, debounceTime, take } from 'rxjs/operators';
20
20
  import { FocusKeyManager } from '@koobiq/cdk/a11y';
21
21
  import { trigger, state, style, transition, animate } from '@angular/animations';
22
- import { VerticalNavbarSizeStatesCollapsedWidth, VerticalNavbarSizeStatesExpandedWidth } from '@koobiq/tokens-koobiq/web';
22
+ import { VerticalNavbarSizeStatesCollapsedWidth, VerticalNavbarSizeStatesExpandedWidth } from '@koobiq/design-tokens/web';
23
23
 
24
24
  class KbqFocusableComponent {
25
25
  get tabIndex() {
@@ -34,15 +34,18 @@ class KbqFocusableComponent {
34
34
  get optionBlurChanges() {
35
35
  return merge(...this.focusableItems.map((option) => option.onBlur));
36
36
  }
37
- constructor(changeDetectorRef) {
37
+ constructor(changeDetectorRef, elementRef, focusMonitor) {
38
38
  this.changeDetectorRef = changeDetectorRef;
39
+ this.focusMonitor = focusMonitor;
39
40
  this._tabIndex = 0;
40
41
  this.destroyed = new Subject();
42
+ this.focusMonitorSubscription = this.focusMonitor.monitor(elementRef).subscribe((focusOrigin) => {
43
+ this.keyManager.setFocusOrigin(focusOrigin);
44
+ });
41
45
  }
42
46
  ngAfterContentInit() {
43
47
  this.keyManager = new FocusKeyManager(this.focusableItems)
44
48
  .withTypeAhead();
45
- this.keyManager.setFocusOrigin('keyboard');
46
49
  this.keyManager.tabOut
47
50
  .pipe(takeUntil(this.destroyed))
48
51
  .subscribe(() => {
@@ -63,6 +66,10 @@ class KbqFocusableComponent {
63
66
  ngOnDestroy() {
64
67
  this.destroyed.next();
65
68
  this.destroyed.complete();
69
+ if (this.focusMonitorSubscription) {
70
+ this.focusMonitorSubscription.unsubscribe();
71
+ this.focusMonitorSubscription = null;
72
+ }
66
73
  }
67
74
  focus() {
68
75
  if (this.focusableItems.length === 0) {
@@ -110,12 +117,12 @@ class KbqFocusableComponent {
110
117
  hasFocusedItem() {
111
118
  return this.focusableItems.some((item) => item.hasFocus);
112
119
  }
113
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqFocusableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
120
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqFocusableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Directive }); }
114
121
  /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqFocusableComponent, inputs: { tabIndex: "tabIndex" }, queries: [{ propertyName: "focusableItems", predicate: i0.forwardRef(function () { return KbqNavbarFocusableItem; }), descendants: true }], ngImport: i0 }); }
115
122
  }
116
123
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqFocusableComponent, decorators: [{
117
124
  type: Directive
118
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { focusableItems: [{
125
+ }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.FocusMonitor }]; }, propDecorators: { focusableItems: [{
119
126
  type: ContentChildren,
120
127
  args: [forwardRef(() => KbqNavbarFocusableItem), { descendants: true }]
121
128
  }], tabIndex: [{
@@ -148,8 +155,8 @@ class KbqNavbar extends KbqFocusableComponent {
148
155
  .filter((item) => item.icon && item.title && item.collapsable)
149
156
  .reverse();
150
157
  }
151
- constructor(elementRef, changeDetectorRef) {
152
- super(changeDetectorRef);
158
+ constructor(elementRef, changeDetectorRef, focusMonitor) {
159
+ super(changeDetectorRef, elementRef, focusMonitor);
153
160
  this.elementRef = elementRef;
154
161
  this.resizeStream = new Subject();
155
162
  this.resizeDebounceInterval = 100;
@@ -232,8 +239,8 @@ class KbqNavbar extends KbqFocusableComponent {
232
239
  }
233
240
  });
234
241
  }
235
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbar, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
236
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqNavbar, selector: "kbq-navbar", host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "onKeyDown($event)", "window:resize": "resizeStream.next($event)" }, properties: { "attr.tabindex": "tabIndex" }, classAttribute: "kbq-navbar" }, queries: [{ propertyName: "rectangleElements", predicate: i0.forwardRef(function () { return KbqNavbarRectangleElement; }), descendants: true }, { propertyName: "navbarItems", predicate: i0.forwardRef(function () { return KbqNavbarItem; }), descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-content select="[kbq-navbar-container], kbq-navbar-container"></ng-content>`, isInline: true, styles: [".kbq-navbar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar-container{display:flex;flex-shrink:0;flex-direction:row;justify-content:space-between;align-items:center;position:relative}\n", ".kbq-navbar-title,.kbq-navbar-subtitle{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;padding-left:var(--kbq-navbar-item-size-padding, 16px);padding-right:var(--kbq-navbar-item-size-padding, 16px)}.kbq-navbar-item .kbq-badge{position:absolute}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px)}.kbq-navbar-item.kbq-horizontal .kbq-icon{min-width:16px;min-height:16px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title+.kbq-icon{margin-left:var(--kbq-navbar-size-right-icon-margin, 2px)}.kbq-navbar-item.kbq-horizontal .kbq-icon+.kbq-navbar-item__container{margin-left:var(--kbq-navbar-size-icon-margin, 6px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{top:8px;right:8px}.kbq-navbar-item.kbq-vertical{height:var(--kbq-navbar-item-size-height-vertical, 56px)}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center;min-width:24px;min-height:24px}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-icon+.kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title+.kbq-icon{padding-left:var(--kbq-vertical-navbar-size-icon-margin, 16px)}.kbq-navbar-item.kbq-vertical.kbq-navbar-item_button{padding-left:12px;padding-right:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded .kbq-badge{top:16px;right:16px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{top:4px;right:4px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__title{display:none}.kbq-navbar-item.kbq-navbar-item_button .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item .kbq-navbar-item__overlay,.kbq-navbar-brand .kbq-navbar-item__overlay,.kbq-navbar-toggle .kbq-navbar-item__overlay{position:absolute;inset:0}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", ".kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;align-items:center}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px);padding-right:var(--kbq-navbar-brand-size-margin-right, 24px)}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-left:var(--kbq-navbar-brand-size-padding, 12px);padding-right:0}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{flex-direction:column;justify-content:center;align-items:center;min-height:var(--kbq-navbar-item-size-height-vertical, 56px);min-width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:flex;align-items:center;height:var(--kbq-navbar-item-size-height-vertical, 56px);padding-left:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded{align-items:unset}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:8px 12px}.kbq-navbar-divider.kbq-horizontal{width:1px;height:28px;margin-left:8px;margin-right:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
242
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbar, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
243
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqNavbar, selector: "kbq-navbar", host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "onKeyDown($event)", "window:resize": "resizeStream.next($event)" }, properties: { "attr.tabindex": "tabIndex" }, classAttribute: "kbq-navbar" }, queries: [{ propertyName: "rectangleElements", predicate: i0.forwardRef(function () { return KbqNavbarRectangleElement; }), descendants: true }, { propertyName: "navbarItems", predicate: i0.forwardRef(function () { return KbqNavbarItem; }), descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-content select="[kbq-navbar-container], kbq-navbar-container"></ng-content>`, isInline: true, styles: [".kbq-navbar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar-container{display:flex;flex-shrink:0;flex-direction:row;justify-content:space-between;align-items:center;position:relative}\n", ".kbq-navbar-title,.kbq-navbar-subtitle{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;padding-left:var(--kbq-navbar-item-size-padding, 16px);padding-right:var(--kbq-navbar-item-size-padding, 16px)}.kbq-navbar-item .kbq-badge{position:absolute}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px)}.kbq-navbar-item.kbq-horizontal .kbq-icon{min-width:16px;min-height:16px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title+.kbq-icon{margin-left:var(--kbq-navbar-size-right-icon-margin, 2px)}.kbq-navbar-item.kbq-horizontal .kbq-icon+.kbq-navbar-item__container{margin-left:var(--kbq-navbar-size-icon-margin, 6px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{top:8px;right:8px}.kbq-navbar-item.kbq-vertical{height:var(--kbq-navbar-item-size-height-vertical, 56px)}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center;min-width:24px;min-height:24px}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-icon+.kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title+.kbq-icon{padding-left:var(--kbq-vertical-navbar-size-icon-margin, 16px)}.kbq-navbar-item.kbq-vertical.kbq-navbar-item_button{padding-left:12px;padding-right:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded .kbq-badge{top:16px;right:16px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{top:4px;right:4px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__title{display:none}.kbq-navbar-item.kbq-navbar-item_button .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item .kbq-navbar-item__overlay,.kbq-navbar-brand .kbq-navbar-item__overlay,.kbq-navbar-toggle .kbq-navbar-item__overlay{position:absolute;inset:0}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", ".kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;align-items:center}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px);padding-right:var(--kbq-navbar-brand-size-margin-right, 12px)}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-left:var(--kbq-navbar-brand-size-padding, 12px);padding-right:0}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{flex-direction:column;justify-content:center;align-items:center;min-height:var(--kbq-navbar-item-size-height-vertical, 56px);min-width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:flex;align-items:center;height:var(--kbq-navbar-item-size-height-vertical, 56px);padding-left:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded{align-items:unset}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:8px 12px}.kbq-navbar-divider.kbq-horizontal{width:1px;height:28px;margin-left:8px;margin-right:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
237
244
  }
238
245
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbar, decorators: [{
239
246
  type: Component,
@@ -244,8 +251,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
244
251
  '(blur)': 'blur()',
245
252
  '(keydown)': 'onKeyDown($event)',
246
253
  '(window:resize)': 'resizeStream.next($event)'
247
- }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-navbar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar-container{display:flex;flex-shrink:0;flex-direction:row;justify-content:space-between;align-items:center;position:relative}\n", ".kbq-navbar-title,.kbq-navbar-subtitle{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;padding-left:var(--kbq-navbar-item-size-padding, 16px);padding-right:var(--kbq-navbar-item-size-padding, 16px)}.kbq-navbar-item .kbq-badge{position:absolute}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px)}.kbq-navbar-item.kbq-horizontal .kbq-icon{min-width:16px;min-height:16px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title+.kbq-icon{margin-left:var(--kbq-navbar-size-right-icon-margin, 2px)}.kbq-navbar-item.kbq-horizontal .kbq-icon+.kbq-navbar-item__container{margin-left:var(--kbq-navbar-size-icon-margin, 6px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{top:8px;right:8px}.kbq-navbar-item.kbq-vertical{height:var(--kbq-navbar-item-size-height-vertical, 56px)}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center;min-width:24px;min-height:24px}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-icon+.kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title+.kbq-icon{padding-left:var(--kbq-vertical-navbar-size-icon-margin, 16px)}.kbq-navbar-item.kbq-vertical.kbq-navbar-item_button{padding-left:12px;padding-right:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded .kbq-badge{top:16px;right:16px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{top:4px;right:4px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__title{display:none}.kbq-navbar-item.kbq-navbar-item_button .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item .kbq-navbar-item__overlay,.kbq-navbar-brand .kbq-navbar-item__overlay,.kbq-navbar-toggle .kbq-navbar-item__overlay{position:absolute;inset:0}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", ".kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;align-items:center}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px);padding-right:var(--kbq-navbar-brand-size-margin-right, 24px)}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-left:var(--kbq-navbar-brand-size-padding, 12px);padding-right:0}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{flex-direction:column;justify-content:center;align-items:center;min-height:var(--kbq-navbar-item-size-height-vertical, 56px);min-width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:flex;align-items:center;height:var(--kbq-navbar-item-size-height-vertical, 56px);padding-left:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded{align-items:unset}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:8px 12px}.kbq-navbar-divider.kbq-horizontal{width:1px;height:28px;margin-left:8px;margin-right:8px}\n"] }]
248
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { rectangleElements: [{
254
+ }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-navbar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar-container{display:flex;flex-shrink:0;flex-direction:row;justify-content:space-between;align-items:center;position:relative}\n", ".kbq-navbar-title,.kbq-navbar-subtitle{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;padding-left:var(--kbq-navbar-item-size-padding, 16px);padding-right:var(--kbq-navbar-item-size-padding, 16px)}.kbq-navbar-item .kbq-badge{position:absolute}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px)}.kbq-navbar-item.kbq-horizontal .kbq-icon{min-width:16px;min-height:16px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title+.kbq-icon{margin-left:var(--kbq-navbar-size-right-icon-margin, 2px)}.kbq-navbar-item.kbq-horizontal .kbq-icon+.kbq-navbar-item__container{margin-left:var(--kbq-navbar-size-icon-margin, 6px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{top:8px;right:8px}.kbq-navbar-item.kbq-vertical{height:var(--kbq-navbar-item-size-height-vertical, 56px)}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center;min-width:24px;min-height:24px}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-icon+.kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title+.kbq-icon{padding-left:var(--kbq-vertical-navbar-size-icon-margin, 16px)}.kbq-navbar-item.kbq-vertical.kbq-navbar-item_button{padding-left:12px;padding-right:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded .kbq-badge{top:16px;right:16px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{top:4px;right:4px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__title{display:none}.kbq-navbar-item.kbq-navbar-item_button .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item .kbq-navbar-item__overlay,.kbq-navbar-brand .kbq-navbar-item__overlay,.kbq-navbar-toggle .kbq-navbar-item__overlay{position:absolute;inset:0}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", ".kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;align-items:center}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px);padding-right:var(--kbq-navbar-brand-size-margin-right, 12px)}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-left:var(--kbq-navbar-brand-size-padding, 12px);padding-right:0}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{flex-direction:column;justify-content:center;align-items:center;min-height:var(--kbq-navbar-item-size-height-vertical, 56px);min-width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:flex;align-items:center;height:var(--kbq-navbar-item-size-height-vertical, 56px);padding-left:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded{align-items:unset}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:8px 12px}.kbq-navbar-divider.kbq-horizontal{width:1px;height:28px;margin-left:8px;margin-right:8px}\n"] }]
255
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }]; }, propDecorators: { rectangleElements: [{
249
256
  type: ContentChildren,
250
257
  args: [forwardRef(() => KbqNavbarRectangleElement), { descendants: true }]
251
258
  }], navbarItems: [{
@@ -269,8 +276,9 @@ class KbqVerticalNavbar extends KbqFocusableComponent {
269
276
  this._expanded = coerceBooleanProperty(value);
270
277
  this.updateExpandedStateForItems();
271
278
  }
272
- constructor(changeDetectorRef) {
273
- super(changeDetectorRef);
279
+ constructor(elementRef, changeDetectorRef, focusMonitor) {
280
+ super(changeDetectorRef, elementRef, focusMonitor);
281
+ this.elementRef = elementRef;
274
282
  this.animationDone = new Subject();
275
283
  this._expanded = false;
276
284
  this.updateExpandedStateForItems = () => {
@@ -322,7 +330,7 @@ class KbqVerticalNavbar extends KbqFocusableComponent {
322
330
  this.keyManager.onKeydown(event);
323
331
  }
324
332
  }
325
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqVerticalNavbar, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
333
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqVerticalNavbar, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
326
334
  /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqVerticalNavbar, selector: "kbq-vertical-navbar", inputs: { expanded: "expanded" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "onKeyDown($event)" }, properties: { "attr.tabindex": "tabIndex" }, classAttribute: "kbq-vertical-navbar" }, queries: [{ propertyName: "bento", first: true, predicate: i0.forwardRef(function () { return KbqNavbarBento; }), descendants: true }, { propertyName: "rectangleElements", predicate: i0.forwardRef(function () { return KbqNavbarRectangleElement; }), descendants: true }, { propertyName: "items", predicate: i0.forwardRef(function () { return KbqNavbarItem; }), descendants: true }], exportAs: ["KbqVerticalNavbar"], usesInheritance: true, ngImport: i0, template: `
327
335
  <div class="kbq-vertical-navbar__container"
328
336
  [@toggle]="expanded"
@@ -333,7 +341,7 @@ class KbqVerticalNavbar extends KbqFocusableComponent {
333
341
  <ng-content select="[kbq-navbar-container], kbq-navbar-container"></ng-content>
334
342
  <ng-content select="[kbq-navbar-toggle], kbq-navbar-toggle"></ng-content>
335
343
  </div>
336
- `, isInline: true, styles: [".kbq-vertical-navbar{position:relative;min-width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px);height:100%}.kbq-vertical-navbar .kbq-navbar-container{flex-direction:column;align-items:unset}.kbq-vertical-navbar .kbq-vertical-navbar__container{display:flex;flex-direction:column;justify-content:space-between;position:absolute;z-index:998;height:100%}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-collapsed{width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px)}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-expanded{width:var(--kbq-vertical-navbar-size-states-expanded-width, 240px)}\n", ".kbq-navbar-title,.kbq-navbar-subtitle{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;padding-left:var(--kbq-navbar-item-size-padding, 16px);padding-right:var(--kbq-navbar-item-size-padding, 16px)}.kbq-navbar-item .kbq-badge{position:absolute}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px)}.kbq-navbar-item.kbq-horizontal .kbq-icon{min-width:16px;min-height:16px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title+.kbq-icon{margin-left:var(--kbq-navbar-size-right-icon-margin, 2px)}.kbq-navbar-item.kbq-horizontal .kbq-icon+.kbq-navbar-item__container{margin-left:var(--kbq-navbar-size-icon-margin, 6px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{top:8px;right:8px}.kbq-navbar-item.kbq-vertical{height:var(--kbq-navbar-item-size-height-vertical, 56px)}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center;min-width:24px;min-height:24px}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-icon+.kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title+.kbq-icon{padding-left:var(--kbq-vertical-navbar-size-icon-margin, 16px)}.kbq-navbar-item.kbq-vertical.kbq-navbar-item_button{padding-left:12px;padding-right:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded .kbq-badge{top:16px;right:16px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{top:4px;right:4px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__title{display:none}.kbq-navbar-item.kbq-navbar-item_button .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item .kbq-navbar-item__overlay,.kbq-navbar-brand .kbq-navbar-item__overlay,.kbq-navbar-toggle .kbq-navbar-item__overlay{position:absolute;inset:0}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", ".kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;align-items:center}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px);padding-right:var(--kbq-navbar-brand-size-margin-right, 24px)}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-left:var(--kbq-navbar-brand-size-padding, 12px);padding-right:0}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{flex-direction:column;justify-content:center;align-items:center;min-height:var(--kbq-navbar-item-size-height-vertical, 56px);min-width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:flex;align-items:center;height:var(--kbq-navbar-item-size-height-vertical, 56px);padding-left:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded{align-items:unset}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:8px 12px}.kbq-navbar-divider.kbq-horizontal{width:1px;height:28px;margin-left:8px;margin-right:8px}\n"], animations: [toggleVerticalNavbarAnimation()], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
344
+ `, isInline: true, styles: [".kbq-vertical-navbar{position:relative;min-width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px);height:100%}.kbq-vertical-navbar .kbq-navbar-container{flex-direction:column;align-items:unset}.kbq-vertical-navbar .kbq-vertical-navbar__container{display:flex;flex-direction:column;justify-content:space-between;position:absolute;z-index:998;height:100%}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-collapsed{width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px)}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-expanded{width:var(--kbq-vertical-navbar-size-states-expanded-width, 240px)}\n", ".kbq-navbar-title,.kbq-navbar-subtitle{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;padding-left:var(--kbq-navbar-item-size-padding, 16px);padding-right:var(--kbq-navbar-item-size-padding, 16px)}.kbq-navbar-item .kbq-badge{position:absolute}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px)}.kbq-navbar-item.kbq-horizontal .kbq-icon{min-width:16px;min-height:16px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title+.kbq-icon{margin-left:var(--kbq-navbar-size-right-icon-margin, 2px)}.kbq-navbar-item.kbq-horizontal .kbq-icon+.kbq-navbar-item__container{margin-left:var(--kbq-navbar-size-icon-margin, 6px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{top:8px;right:8px}.kbq-navbar-item.kbq-vertical{height:var(--kbq-navbar-item-size-height-vertical, 56px)}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center;min-width:24px;min-height:24px}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-icon+.kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title+.kbq-icon{padding-left:var(--kbq-vertical-navbar-size-icon-margin, 16px)}.kbq-navbar-item.kbq-vertical.kbq-navbar-item_button{padding-left:12px;padding-right:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded .kbq-badge{top:16px;right:16px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{top:4px;right:4px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__title{display:none}.kbq-navbar-item.kbq-navbar-item_button .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item .kbq-navbar-item__overlay,.kbq-navbar-brand .kbq-navbar-item__overlay,.kbq-navbar-toggle .kbq-navbar-item__overlay{position:absolute;inset:0}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", ".kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;align-items:center}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px);padding-right:var(--kbq-navbar-brand-size-margin-right, 12px)}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-left:var(--kbq-navbar-brand-size-padding, 12px);padding-right:0}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{flex-direction:column;justify-content:center;align-items:center;min-height:var(--kbq-navbar-item-size-height-vertical, 56px);min-width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:flex;align-items:center;height:var(--kbq-navbar-item-size-height-vertical, 56px);padding-left:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded{align-items:unset}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:8px 12px}.kbq-navbar-divider.kbq-horizontal{width:1px;height:28px;margin-left:8px;margin-right:8px}\n"], animations: [toggleVerticalNavbarAnimation()], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
337
345
  }
338
346
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqVerticalNavbar, decorators: [{
339
347
  type: Component,
@@ -353,8 +361,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
353
361
  '(focus)': 'focus()',
354
362
  '(blur)': 'blur()',
355
363
  '(keydown)': 'onKeyDown($event)'
356
- }, animations: [toggleVerticalNavbarAnimation()], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-vertical-navbar{position:relative;min-width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px);height:100%}.kbq-vertical-navbar .kbq-navbar-container{flex-direction:column;align-items:unset}.kbq-vertical-navbar .kbq-vertical-navbar__container{display:flex;flex-direction:column;justify-content:space-between;position:absolute;z-index:998;height:100%}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-collapsed{width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px)}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-expanded{width:var(--kbq-vertical-navbar-size-states-expanded-width, 240px)}\n", ".kbq-navbar-title,.kbq-navbar-subtitle{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;padding-left:var(--kbq-navbar-item-size-padding, 16px);padding-right:var(--kbq-navbar-item-size-padding, 16px)}.kbq-navbar-item .kbq-badge{position:absolute}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px)}.kbq-navbar-item.kbq-horizontal .kbq-icon{min-width:16px;min-height:16px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title+.kbq-icon{margin-left:var(--kbq-navbar-size-right-icon-margin, 2px)}.kbq-navbar-item.kbq-horizontal .kbq-icon+.kbq-navbar-item__container{margin-left:var(--kbq-navbar-size-icon-margin, 6px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{top:8px;right:8px}.kbq-navbar-item.kbq-vertical{height:var(--kbq-navbar-item-size-height-vertical, 56px)}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center;min-width:24px;min-height:24px}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-icon+.kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title+.kbq-icon{padding-left:var(--kbq-vertical-navbar-size-icon-margin, 16px)}.kbq-navbar-item.kbq-vertical.kbq-navbar-item_button{padding-left:12px;padding-right:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded .kbq-badge{top:16px;right:16px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{top:4px;right:4px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__title{display:none}.kbq-navbar-item.kbq-navbar-item_button .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item .kbq-navbar-item__overlay,.kbq-navbar-brand .kbq-navbar-item__overlay,.kbq-navbar-toggle .kbq-navbar-item__overlay{position:absolute;inset:0}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", ".kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;align-items:center}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px);padding-right:var(--kbq-navbar-brand-size-margin-right, 24px)}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-left:var(--kbq-navbar-brand-size-padding, 12px);padding-right:0}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{flex-direction:column;justify-content:center;align-items:center;min-height:var(--kbq-navbar-item-size-height-vertical, 56px);min-width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:flex;align-items:center;height:var(--kbq-navbar-item-size-height-vertical, 56px);padding-left:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded{align-items:unset}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:8px 12px}.kbq-navbar-divider.kbq-horizontal{width:1px;height:28px;margin-left:8px;margin-right:8px}\n"] }]
357
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { rectangleElements: [{
364
+ }, animations: [toggleVerticalNavbarAnimation()], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-vertical-navbar{position:relative;min-width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px);height:100%}.kbq-vertical-navbar .kbq-navbar-container{flex-direction:column;align-items:unset}.kbq-vertical-navbar .kbq-vertical-navbar__container{display:flex;flex-direction:column;justify-content:space-between;position:absolute;z-index:998;height:100%}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-collapsed{width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px)}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-expanded{width:var(--kbq-vertical-navbar-size-states-expanded-width, 240px)}\n", ".kbq-navbar-title,.kbq-navbar-subtitle{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;padding-left:var(--kbq-navbar-item-size-padding, 16px);padding-right:var(--kbq-navbar-item-size-padding, 16px)}.kbq-navbar-item .kbq-badge{position:absolute}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px)}.kbq-navbar-item.kbq-horizontal .kbq-icon{min-width:16px;min-height:16px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title+.kbq-icon{margin-left:var(--kbq-navbar-size-right-icon-margin, 2px)}.kbq-navbar-item.kbq-horizontal .kbq-icon+.kbq-navbar-item__container{margin-left:var(--kbq-navbar-size-icon-margin, 6px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{top:8px;right:8px}.kbq-navbar-item.kbq-vertical{height:var(--kbq-navbar-item-size-height-vertical, 56px)}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center;min-width:24px;min-height:24px}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-icon+.kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title+.kbq-icon{padding-left:var(--kbq-vertical-navbar-size-icon-margin, 16px)}.kbq-navbar-item.kbq-vertical.kbq-navbar-item_button{padding-left:12px;padding-right:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded .kbq-badge{top:16px;right:16px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{top:4px;right:4px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__title{display:none}.kbq-navbar-item.kbq-navbar-item_button .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item .kbq-navbar-item__overlay,.kbq-navbar-brand .kbq-navbar-item__overlay,.kbq-navbar-toggle .kbq-navbar-item__overlay{position:absolute;inset:0}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", ".kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;align-items:center}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px);padding-right:var(--kbq-navbar-brand-size-margin-right, 12px)}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-left:var(--kbq-navbar-brand-size-padding, 12px);padding-right:0}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{flex-direction:column;justify-content:center;align-items:center;min-height:var(--kbq-navbar-item-size-height-vertical, 56px);min-width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:flex;align-items:center;height:var(--kbq-navbar-item-size-height-vertical, 56px);padding-left:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded{align-items:unset}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:8px 12px}.kbq-navbar-divider.kbq-horizontal{width:1px;height:28px;margin-left:8px;margin-right:8px}\n"] }]
365
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }]; }, propDecorators: { rectangleElements: [{
358
366
  type: ContentChildren,
359
367
  args: [forwardRef(() => KbqNavbarRectangleElement), { descendants: true }]
360
368
  }], items: [{
@@ -489,7 +497,7 @@ class KbqNavbarBrand {
489
497
  this.destroyed.complete();
490
498
  }
491
499
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarBrand, deps: [{ token: KbqVerticalNavbar, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
492
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqNavbarBrand, selector: "kbq-navbar-brand, [kbq-navbar-brand]", host: { properties: { "class.kbq-hovered": "hovered" }, classAttribute: "kbq-navbar-brand" }, queries: [{ propertyName: "logo", first: true, predicate: KbqNavbarLogo, descendants: true }, { propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true }], exportAs: ["mcNavbarBrand"], ngImport: i0, template: `
500
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqNavbarBrand, selector: "kbq-navbar-brand, [kbq-navbar-brand]", host: { properties: { "class.kbq-hovered": "hovered" }, classAttribute: "kbq-navbar-brand" }, queries: [{ propertyName: "logo", first: true, predicate: KbqNavbarLogo, descendants: true }, { propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true }], exportAs: ["kbqNavbarBrand"], ngImport: i0, template: `
493
501
  <ng-content></ng-content>
494
502
  <div class="kbq-navbar-item__overlay"></div>
495
503
  `, isInline: true }); }
@@ -498,7 +506,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
498
506
  type: Component,
499
507
  args: [{
500
508
  selector: 'kbq-navbar-brand, [kbq-navbar-brand]',
501
- exportAs: 'mcNavbarBrand',
509
+ exportAs: 'kbqNavbarBrand',
502
510
  template: `
503
511
  <ng-content></ng-content>
504
512
  <div class="kbq-navbar-item__overlay"></div>
@@ -621,8 +629,8 @@ class KbqNavbarFocusableItem {
621
629
  getLabel() {
622
630
  return this.title?.text || '';
623
631
  }
624
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarFocusableItem, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2.FocusMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
625
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqNavbarFocusableItem, selector: "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-brand, [kbq-navbar-brand], kbq-navbar-toggle", inputs: { disabled: "disabled" }, host: { listeners: { "focus": "onFocusHandler()", "blur": "blur()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null", "class.kbq-navbar-item_button": "button" }, classAttribute: "kbq-navbar-focusable-item" }, queries: [{ propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true }, { propertyName: "button", first: true, predicate: KbqButton, descendants: true }], ngImport: i0 }); }
632
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarFocusableItem, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
633
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqNavbarFocusableItem, selector: "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-brand, [kbq-navbar-brand], kbq-navbar-toggle", inputs: { disabled: "disabled" }, host: { listeners: { "focus": "onFocusHandler()", "blur": "blur()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null", "class.kbq-navbar-item_button": "button", "class.kbq-disabled": "disabled" }, classAttribute: "kbq-navbar-focusable-item" }, queries: [{ propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true }, { propertyName: "button", first: true, predicate: KbqButton, descendants: true }], ngImport: i0 }); }
626
634
  }
627
635
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarFocusableItem, decorators: [{
628
636
  type: Directive,
@@ -633,11 +641,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
633
641
  '[attr.disabled]': 'disabled || null',
634
642
  class: 'kbq-navbar-focusable-item',
635
643
  '[class.kbq-navbar-item_button]': 'button',
644
+ '[class.kbq-disabled]': 'disabled',
636
645
  '(focus)': 'onFocusHandler()',
637
646
  '(blur)': 'blur()'
638
647
  }
639
648
  }]
640
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2.FocusMonitor }, { type: i0.NgZone }]; }, propDecorators: { title: [{
649
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }, { type: i0.NgZone }]; }, propDecorators: { title: [{
641
650
  type: ContentChild,
642
651
  args: [KbqNavbarTitle]
643
652
  }], button: [{
@@ -704,13 +713,11 @@ class KbqNavbarItem extends KbqTooltipTrigger {
704
713
  this.initListeners();
705
714
  }
706
715
  }
707
- get collapsed() {
708
- return this._collapsed;
709
- }
710
716
  set collapsed(value) {
711
717
  if (this._collapsed !== value) {
712
718
  this._collapsed = value;
713
719
  this.updateTooltip();
720
+ this.updateCollapsedState();
714
721
  }
715
722
  }
716
723
  get croppedText() {
@@ -734,7 +741,7 @@ class KbqNavbarItem extends KbqTooltipTrigger {
734
741
  if (this._disabled !== undefined) {
735
742
  return this._disabled;
736
743
  }
737
- return (!this.collapsed && !this.hasCroppedText) || !this.title;
744
+ return (!this.isCollapsed && !this.hasCroppedText) || !this.title;
738
745
  }
739
746
  set disabled(value) {
740
747
  this._disabled = coerceBooleanProperty(value);
@@ -743,10 +750,10 @@ class KbqNavbarItem extends KbqTooltipTrigger {
743
750
  return !!this.dropdownTrigger;
744
751
  }
745
752
  get showVerticalDropDownAngle() {
746
- return !this.bento && this.hasDropDownTrigger && this.rectangleElement.vertical && !this.collapsed;
753
+ return !this.bento && this.hasDropDownTrigger && this.rectangleElement.vertical && !this.isCollapsed;
747
754
  }
748
755
  get showHorizontalDropDownAngle() {
749
- return this.hasDropDownTrigger && this.rectangleElement.horizontal && !this.collapsed;
756
+ return this.hasDropDownTrigger && this.rectangleElement.horizontal && !this.isCollapsed;
750
757
  }
751
758
  get hasCroppedText() {
752
759
  return !!(this.title?.isOverflown || this.subTitle?.isOverflown);
@@ -775,10 +782,10 @@ class KbqNavbarItem extends KbqTooltipTrigger {
775
782
  this.updateTooltip();
776
783
  }
777
784
  updateTooltip() {
778
- if (this.collapsed) {
785
+ if (this.isCollapsed) {
779
786
  this.content = `${this.titleText}\n ${this.subTitleText || ''}`;
780
787
  }
781
- else if (!this.collapsed && this.hasCroppedText) {
788
+ else if (!this.isCollapsed && this.hasCroppedText) {
782
789
  this.content = this.croppedText;
783
790
  }
784
791
  if (this.rectangleElement.vertical) {
@@ -801,14 +808,18 @@ class KbqNavbarItem extends KbqTooltipTrigger {
801
808
  $event.preventDefault();
802
809
  }
803
810
  }
811
+ updateCollapsedState() {
812
+ Promise.resolve()
813
+ .then(() => this.isCollapsed = this._collapsed);
814
+ }
804
815
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarItem, deps: [{ token: KbqNavbarRectangleElement }, { token: KbqNavbarFocusableItem }, { token: i0.ChangeDetectorRef }, { token: i3.Overlay }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.ScrollDispatcher }, { token: i0.ViewContainerRef }, { token: KBQ_TOOLTIP_SCROLL_STRATEGY }, { token: i4.Directionality, optional: true }, { token: i5.KbqDropdownTrigger, optional: true }, { token: KbqNavbarBento, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
805
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqNavbarItem, selector: "kbq-navbar-item, [kbq-navbar-item]", inputs: { collapsedText: "collapsedText", trigger: ["mcTrigger", "trigger"], collapsed: "collapsed", collapsable: "collapsable" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.kbq-navbar-item_collapsed": "collapsed" }, classAttribute: "kbq-navbar-item" }, queries: [{ propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true }, { propertyName: "subTitle", first: true, predicate: KbqNavbarSubTitle, descendants: true }, { propertyName: "icon", first: true, predicate: KbqIcon, descendants: true }], exportAs: ["mcNavbarItem"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<div class=\"kbq-navbar-item__container\" *ngIf=\"title\">\n <div class=\"kbq-navbar-item__title\">\n <ng-content select=\"kbq-navbar-title, [kbq-navbar-title]\"></ng-content>\n <ng-content select=\"kbq-navbar-subtitle, [kbq-navbar-subtitle]\"></ng-content>\n </div>\n\n <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"mc-angle-right-M_24\" *ngIf=\"showVerticalDropDownAngle\"></i>\n <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"mc-angle-down-S_16\" *ngIf=\"showHorizontalDropDownAngle\"></i>\n\n</div>\n\n<ng-content></ng-content>\n\n<div class=\"kbq-navbar-item__overlay\"></div>\n", dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
816
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqNavbarItem, selector: "kbq-navbar-item, [kbq-navbar-item]", inputs: { collapsedText: "collapsedText", trigger: ["kbqTrigger", "trigger"], collapsable: "collapsable" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.kbq-navbar-item_collapsed": "isCollapsed" }, classAttribute: "kbq-navbar-item" }, queries: [{ propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true }, { propertyName: "subTitle", first: true, predicate: KbqNavbarSubTitle, descendants: true }, { propertyName: "icon", first: true, predicate: KbqIcon, descendants: true }], exportAs: ["kbqNavbarItem"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<div class=\"kbq-navbar-item__container\" *ngIf=\"title\">\n <div class=\"kbq-navbar-item__title\">\n <ng-content select=\"kbq-navbar-title, [kbq-navbar-title]\"></ng-content>\n <ng-content select=\"kbq-navbar-subtitle, [kbq-navbar-subtitle]\"></ng-content>\n </div>\n\n <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"mc-angle-right-M_24\" *ngIf=\"showVerticalDropDownAngle\"></i>\n <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"mc-angle-down-S_16\" *ngIf=\"showHorizontalDropDownAngle\"></i>\n\n</div>\n\n<ng-content></ng-content>\n\n<div class=\"kbq-navbar-item__overlay\"></div>\n", dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
806
817
  }
807
818
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarItem, decorators: [{
808
819
  type: Component,
809
- args: [{ selector: 'kbq-navbar-item, [kbq-navbar-item]', exportAs: 'mcNavbarItem', host: {
820
+ args: [{ selector: 'kbq-navbar-item, [kbq-navbar-item]', exportAs: 'kbqNavbarItem', host: {
810
821
  class: 'kbq-navbar-item',
811
- '[class.kbq-navbar-item_collapsed]': 'collapsed',
822
+ '[class.kbq-navbar-item_collapsed]': 'isCollapsed',
812
823
  '(keydown)': 'onKeyDown($event)'
813
824
  }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<div class=\"kbq-navbar-item__container\" *ngIf=\"title\">\n <div class=\"kbq-navbar-item__title\">\n <ng-content select=\"kbq-navbar-title, [kbq-navbar-title]\"></ng-content>\n <ng-content select=\"kbq-navbar-subtitle, [kbq-navbar-subtitle]\"></ng-content>\n </div>\n\n <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"mc-angle-right-M_24\" *ngIf=\"showVerticalDropDownAngle\"></i>\n <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"mc-angle-down-S_16\" *ngIf=\"showHorizontalDropDownAngle\"></i>\n\n</div>\n\n<ng-content></ng-content>\n\n<div class=\"kbq-navbar-item__overlay\"></div>\n" }]
814
825
  }], ctorParameters: function () { return [{ type: KbqNavbarRectangleElement }, { type: KbqNavbarFocusableItem }, { type: i0.ChangeDetectorRef }, { type: i3.Overlay }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.ScrollDispatcher }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
@@ -833,9 +844,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
833
844
  type: Input
834
845
  }], trigger: [{
835
846
  type: Input,
836
- args: ['mcTrigger']
837
- }], collapsed: [{
838
- type: Input
847
+ args: ['kbqTrigger']
839
848
  }], collapsable: [{
840
849
  type: Input
841
850
  }] } });