@ojiepermana/angular 22.1.14 → 22.2.1

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 (252) hide show
  1. package/README.md +8 -6
  2. package/SUPPORT.md +3 -3
  3. package/chart/README.md +1 -1
  4. package/component/README.md +2 -2
  5. package/component/calendar/README.md +3 -15
  6. package/component/drawer/README.md +1 -2
  7. package/fesm2022/ojiepermana-angular-chart-area.mjs +352 -137
  8. package/fesm2022/ojiepermana-angular-chart-bar.mjs +744 -524
  9. package/fesm2022/ojiepermana-angular-chart-core.mjs +1140 -1344
  10. package/fesm2022/ojiepermana-angular-chart-line.mjs +393 -147
  11. package/fesm2022/ojiepermana-angular-chart-pie.mjs +408 -179
  12. package/fesm2022/ojiepermana-angular-chart-primitives.mjs +1262 -920
  13. package/fesm2022/ojiepermana-angular-chart-radar.mjs +473 -205
  14. package/fesm2022/ojiepermana-angular-chart-radial.mjs +425 -182
  15. package/fesm2022/ojiepermana-angular-chart-scatter.mjs +386 -210
  16. package/fesm2022/ojiepermana-angular-chart.mjs +3 -19
  17. package/fesm2022/ojiepermana-angular-component-accordion.mjs +485 -243
  18. package/fesm2022/ojiepermana-angular-component-alert-dialog.mjs +963 -325
  19. package/fesm2022/ojiepermana-angular-component-alert.mjs +266 -103
  20. package/fesm2022/ojiepermana-angular-component-aspect-ratio.mjs +80 -35
  21. package/fesm2022/ojiepermana-angular-component-avatar.mjs +402 -135
  22. package/fesm2022/ojiepermana-angular-component-badge.mjs +109 -59
  23. package/fesm2022/ojiepermana-angular-component-breadcrumb.mjs +410 -142
  24. package/fesm2022/ojiepermana-angular-component-button-group.mjs +249 -96
  25. package/fesm2022/ojiepermana-angular-component-button.mjs +153 -75
  26. package/fesm2022/ojiepermana-angular-component-calendar.mjs +531 -418
  27. package/fesm2022/ojiepermana-angular-component-card.mjs +457 -171
  28. package/fesm2022/ojiepermana-angular-component-carousel.mjs +642 -272
  29. package/fesm2022/ojiepermana-angular-component-checkbox.mjs +312 -108
  30. package/fesm2022/ojiepermana-angular-component-collapsible.mjs +299 -115
  31. package/fesm2022/ojiepermana-angular-component-combobox.mjs +396 -183
  32. package/fesm2022/ojiepermana-angular-component-command.mjs +807 -347
  33. package/fesm2022/ojiepermana-angular-component-composer.mjs +807 -330
  34. package/fesm2022/ojiepermana-angular-component-context-menu.mjs +196 -161
  35. package/fesm2022/ojiepermana-angular-component-date-picker.mjs +650 -338
  36. package/fesm2022/ojiepermana-angular-component-dialog.mjs +710 -316
  37. package/fesm2022/ojiepermana-angular-component-drawer.mjs +1 -5
  38. package/fesm2022/ojiepermana-angular-component-dropdown-menu.mjs +1212 -646
  39. package/fesm2022/ojiepermana-angular-component-editor.mjs +987 -502
  40. package/fesm2022/ojiepermana-angular-component-empty.mjs +350 -137
  41. package/fesm2022/ojiepermana-angular-component-form.mjs +813 -434
  42. package/fesm2022/ojiepermana-angular-component-hover-card.mjs +486 -277
  43. package/fesm2022/ojiepermana-angular-component-icon.mjs +241 -140
  44. package/fesm2022/ojiepermana-angular-component-input-group.mjs +449 -176
  45. package/fesm2022/ojiepermana-angular-component-input-otp.mjs +891 -488
  46. package/fesm2022/ojiepermana-angular-component-input.mjs +86 -55
  47. package/fesm2022/ojiepermana-angular-component-item.mjs +713 -261
  48. package/fesm2022/ojiepermana-angular-component-kanban.mjs +714 -216
  49. package/fesm2022/ojiepermana-angular-component-kbd.mjs +124 -52
  50. package/fesm2022/ojiepermana-angular-component-label.mjs +82 -31
  51. package/fesm2022/ojiepermana-angular-component-menubar.mjs +479 -329
  52. package/fesm2022/ojiepermana-angular-component-native-select.mjs +167 -65
  53. package/fesm2022/ojiepermana-angular-component-navigation-menu.mjs +683 -380
  54. package/fesm2022/ojiepermana-angular-component-pagination.mjs +277 -94
  55. package/fesm2022/ojiepermana-angular-component-pillbox.mjs +1283 -607
  56. package/fesm2022/ojiepermana-angular-component-popover.mjs +291 -204
  57. package/fesm2022/ojiepermana-angular-component-progress.mjs +176 -53
  58. package/fesm2022/ojiepermana-angular-component-radio.mjs +449 -142
  59. package/fesm2022/ojiepermana-angular-component-resizable.mjs +659 -453
  60. package/fesm2022/ojiepermana-angular-component-scroll-area.mjs +117 -39
  61. package/fesm2022/ojiepermana-angular-component-segmented-control.mjs +351 -172
  62. package/fesm2022/ojiepermana-angular-component-select.mjs +475 -345
  63. package/fesm2022/ojiepermana-angular-component-separator.mjs +102 -35
  64. package/fesm2022/ojiepermana-angular-component-sheet.mjs +797 -347
  65. package/fesm2022/ojiepermana-angular-component-skeleton.mjs +62 -29
  66. package/fesm2022/ojiepermana-angular-component-slider.mjs +592 -376
  67. package/fesm2022/ojiepermana-angular-component-spinner.mjs +135 -38
  68. package/fesm2022/ojiepermana-angular-component-switch.mjs +315 -103
  69. package/fesm2022/ojiepermana-angular-component-table.mjs +440 -153
  70. package/fesm2022/ojiepermana-angular-component-tabs.mjs +590 -317
  71. package/fesm2022/ojiepermana-angular-component-textarea.mjs +85 -50
  72. package/fesm2022/ojiepermana-angular-component-timeline.mjs +609 -231
  73. package/fesm2022/ojiepermana-angular-component-toast.mjs +229 -243
  74. package/fesm2022/ojiepermana-angular-component-toggle-group.mjs +573 -288
  75. package/fesm2022/ojiepermana-angular-component-toggle.mjs +187 -78
  76. package/fesm2022/ojiepermana-angular-component-tooltip.mjs +798 -517
  77. package/fesm2022/ojiepermana-angular-component-utils-core.mjs +159 -292
  78. package/fesm2022/ojiepermana-angular-component-utils-overlay.mjs +46 -58
  79. package/fesm2022/ojiepermana-angular-component-utils-scale.mjs +76 -38
  80. package/fesm2022/ojiepermana-angular-component-utils.mjs +2 -8
  81. package/fesm2022/ojiepermana-angular-component.mjs +0 -10
  82. package/fesm2022/ojiepermana-angular-navigation-core.mjs +13 -23
  83. package/fesm2022/ojiepermana-angular-navigation-icon.mjs +35 -24
  84. package/fesm2022/ojiepermana-angular-navigation-navigation-badge-count.component-DYuysKVf.mjs +129 -0
  85. package/fesm2022/ojiepermana-angular-navigation-navigation-dockbar-menu.component-COiTaw34.mjs +812 -0
  86. package/fesm2022/{ojiepermana-angular-navigation-navigation-entry-grid.component-COQ-60DS.mjs → ojiepermana-angular-navigation-navigation-entry-grid.component-YIz0IsIb.mjs} +392 -207
  87. package/fesm2022/ojiepermana-angular-navigation-navigation-flyout-menu.component-D2vwEwBY.mjs +650 -0
  88. package/fesm2022/ojiepermana-angular-navigation-navigation-horizontal.component-B5D7yXfb.mjs +662 -0
  89. package/fesm2022/ojiepermana-angular-navigation-navigation-item.component-CUb68MZH.mjs +1219 -0
  90. package/fesm2022/ojiepermana-angular-navigation-navigation-list.component-CrK16trj.mjs +327 -0
  91. package/fesm2022/ojiepermana-angular-navigation-service.mjs +544 -724
  92. package/fesm2022/ojiepermana-angular-navigation-types.mjs +139 -56
  93. package/fesm2022/ojiepermana-angular-navigation.mjs +3256 -4
  94. package/fesm2022/ojiepermana-angular-sdk.mjs +91 -201
  95. package/fesm2022/ojiepermana-angular-theme-component-settings.mjs +1125 -737
  96. package/fesm2022/ojiepermana-angular-theme-layout-services.mjs +245 -328
  97. package/fesm2022/ojiepermana-angular-theme-layout-types.mjs +35 -38
  98. package/fesm2022/ojiepermana-angular-theme-layout-wrapper.mjs +1928 -553
  99. package/fesm2022/ojiepermana-angular-theme-layout.mjs +847 -496
  100. package/fesm2022/ojiepermana-angular-theme-page-core.mjs +288 -358
  101. package/fesm2022/ojiepermana-angular-theme-page-filter.mjs +362 -224
  102. package/fesm2022/ojiepermana-angular-theme-page-overview.mjs +88 -0
  103. package/fesm2022/ojiepermana-angular-theme-page-root.mjs +576 -254
  104. package/fesm2022/ojiepermana-angular-theme-page-side.mjs +317 -177
  105. package/fesm2022/ojiepermana-angular-theme-page-slots.mjs +256 -112
  106. package/fesm2022/ojiepermana-angular-theme-page.mjs +7 -12
  107. package/fesm2022/ojiepermana-angular-theme-shell-services.mjs +215 -326
  108. package/fesm2022/ojiepermana-angular-theme-shell-types.mjs +68 -129
  109. package/fesm2022/ojiepermana-angular-theme-shell.mjs +907 -378
  110. package/fesm2022/ojiepermana-angular-theme-styles.mjs +521 -720
  111. package/fesm2022/ojiepermana-angular-theme.mjs +0 -10
  112. package/fesm2022/ojiepermana-angular.mjs +5 -24
  113. package/navigation/README.md +69 -18
  114. package/package.json +16 -12
  115. package/sdk/README.md +1 -1
  116. package/sdk/src/writer/index.js +2 -2
  117. package/theme/README.md +1 -1
  118. package/theme/layout/README.md +2 -4
  119. package/theme/page/README.md +50 -0
  120. package/theme/styles/README.md +10 -10
  121. package/theme/styles/css/base/prefers-dark.css +1 -1
  122. package/theme/styles/css/base/status.css +1 -1
  123. package/theme/styles/css/color/amber.css +1 -1
  124. package/theme/styles/css/color/blue.css +1 -1
  125. package/theme/styles/css/color/cyan.css +1 -1
  126. package/theme/styles/css/color/emerald.css +1 -1
  127. package/theme/styles/css/color/fuchsia.css +1 -1
  128. package/theme/styles/css/color/green.css +1 -1
  129. package/theme/styles/css/color/indigo.css +1 -1
  130. package/theme/styles/css/color/lime.css +1 -1
  131. package/theme/styles/css/color/orange.css +1 -1
  132. package/theme/styles/css/color/pink.css +1 -1
  133. package/theme/styles/css/color/purple.css +1 -1
  134. package/theme/styles/css/color/red.css +1 -1
  135. package/theme/styles/css/color/rose.css +1 -1
  136. package/theme/styles/css/color/sky.css +1 -1
  137. package/theme/styles/css/color/teal.css +1 -1
  138. package/theme/styles/css/color/violet.css +1 -1
  139. package/theme/styles/css/color/yellow.css +1 -1
  140. package/theme/styles/css/neutral/gray.css +1 -1
  141. package/theme/styles/css/neutral/mauve.css +1 -1
  142. package/theme/styles/css/neutral/mist.css +1 -1
  143. package/theme/styles/css/neutral/neutral.css +1 -1
  144. package/theme/styles/css/neutral/olive.css +1 -1
  145. package/theme/styles/css/neutral/slate.css +1 -1
  146. package/theme/styles/css/neutral/stone.css +1 -1
  147. package/theme/styles/css/neutral/taupe.css +1 -1
  148. package/theme/styles/css/neutral/zinc.css +1 -1
  149. package/types/ojiepermana-angular-chart-area.d.ts +126 -63
  150. package/types/ojiepermana-angular-chart-bar.d.ts +244 -154
  151. package/types/ojiepermana-angular-chart-core.d.ts +409 -398
  152. package/types/ojiepermana-angular-chart-line.d.ts +141 -68
  153. package/types/ojiepermana-angular-chart-pie.d.ts +192 -121
  154. package/types/ojiepermana-angular-chart-primitives.d.ts +283 -214
  155. package/types/ojiepermana-angular-chart-radar.d.ts +189 -108
  156. package/types/ojiepermana-angular-chart-radial.d.ts +177 -106
  157. package/types/ojiepermana-angular-chart-scatter.d.ts +166 -110
  158. package/types/ojiepermana-angular-chart.d.ts +3 -2
  159. package/types/ojiepermana-angular-component-accordion.d.ts +135 -81
  160. package/types/ojiepermana-angular-component-alert-dialog.d.ts +271 -123
  161. package/types/ojiepermana-angular-component-alert.d.ts +69 -39
  162. package/types/ojiepermana-angular-component-aspect-ratio.d.ts +20 -12
  163. package/types/ojiepermana-angular-component-avatar.d.ts +103 -49
  164. package/types/ojiepermana-angular-component-badge.d.ts +36 -24
  165. package/types/ojiepermana-angular-component-breadcrumb.d.ts +79 -40
  166. package/types/ojiepermana-angular-component-button-group.d.ts +48 -24
  167. package/types/ojiepermana-angular-component-button.d.ts +44 -27
  168. package/types/ojiepermana-angular-component-calendar.d.ts +145 -107
  169. package/types/ojiepermana-angular-component-card.d.ts +112 -63
  170. package/types/ojiepermana-angular-component-carousel.d.ts +150 -81
  171. package/types/ojiepermana-angular-component-checkbox.d.ts +96 -38
  172. package/types/ojiepermana-angular-component-collapsible.d.ts +65 -39
  173. package/types/ojiepermana-angular-component-combobox.d.ts +100 -55
  174. package/types/ojiepermana-angular-component-command.d.ts +206 -121
  175. package/types/ojiepermana-angular-component-composer.d.ts +184 -84
  176. package/types/ojiepermana-angular-component-context-menu.d.ts +51 -41
  177. package/types/ojiepermana-angular-component-date-picker.d.ts +199 -109
  178. package/types/ojiepermana-angular-component-dialog.d.ts +200 -105
  179. package/types/ojiepermana-angular-component-drawer.d.ts +2 -1
  180. package/types/ojiepermana-angular-component-dropdown-menu.d.ts +324 -202
  181. package/types/ojiepermana-angular-component-editor.d.ts +215 -117
  182. package/types/ojiepermana-angular-component-empty.d.ts +80 -45
  183. package/types/ojiepermana-angular-component-form.d.ts +185 -121
  184. package/types/ojiepermana-angular-component-hover-card.d.ts +130 -72
  185. package/types/ojiepermana-angular-component-icon.d.ts +87 -57
  186. package/types/ojiepermana-angular-component-input-group.d.ts +93 -46
  187. package/types/ojiepermana-angular-component-input-otp.d.ts +243 -150
  188. package/types/ojiepermana-angular-component-input.d.ts +27 -17
  189. package/types/ojiepermana-angular-component-item.d.ts +160 -84
  190. package/types/ojiepermana-angular-component-kanban.d.ts +157 -62
  191. package/types/ojiepermana-angular-component-kbd.d.ts +24 -15
  192. package/types/ojiepermana-angular-component-label.d.ts +19 -11
  193. package/types/ojiepermana-angular-component-menubar.d.ts +120 -90
  194. package/types/ojiepermana-angular-component-native-select.d.ts +37 -24
  195. package/types/ojiepermana-angular-component-navigation-menu.d.ts +157 -98
  196. package/types/ojiepermana-angular-component-pagination.d.ts +78 -28
  197. package/types/ojiepermana-angular-component-pillbox.d.ts +361 -204
  198. package/types/ojiepermana-angular-component-popover.d.ts +94 -64
  199. package/types/ojiepermana-angular-component-progress.d.ts +45 -17
  200. package/types/ojiepermana-angular-component-radio.d.ts +129 -53
  201. package/types/ojiepermana-angular-component-resizable.d.ts +160 -112
  202. package/types/ojiepermana-angular-component-scroll-area.d.ts +33 -15
  203. package/types/ojiepermana-angular-component-segmented-control.d.ts +94 -50
  204. package/types/ojiepermana-angular-component-select.d.ts +94 -77
  205. package/types/ojiepermana-angular-component-separator.d.ts +26 -14
  206. package/types/ojiepermana-angular-component-sheet.d.ts +226 -116
  207. package/types/ojiepermana-angular-component-skeleton.d.ts +13 -10
  208. package/types/ojiepermana-angular-component-slider.d.ts +140 -75
  209. package/types/ojiepermana-angular-component-spinner.d.ts +31 -13
  210. package/types/ojiepermana-angular-component-switch.d.ts +97 -40
  211. package/types/ojiepermana-angular-component-table.d.ts +102 -50
  212. package/types/ojiepermana-angular-component-tabs.d.ts +174 -115
  213. package/types/ojiepermana-angular-component-textarea.d.ts +27 -17
  214. package/types/ojiepermana-angular-component-timeline.d.ts +141 -59
  215. package/types/ojiepermana-angular-component-toast.d.ts +51 -55
  216. package/types/ojiepermana-angular-component-toggle-group.d.ts +159 -88
  217. package/types/ojiepermana-angular-component-toggle.d.ts +47 -25
  218. package/types/ojiepermana-angular-component-tooltip.d.ts +222 -132
  219. package/types/ojiepermana-angular-component-utils-core.d.ts +81 -90
  220. package/types/ojiepermana-angular-component-utils-overlay.d.ts +7 -11
  221. package/types/ojiepermana-angular-component-utils-scale.d.ts +20 -12
  222. package/types/ojiepermana-angular-component-utils.d.ts +2 -2
  223. package/types/ojiepermana-angular-component.d.ts +1 -2
  224. package/types/ojiepermana-angular-navigation-core.d.ts +46 -50
  225. package/types/ojiepermana-angular-navigation-icon.d.ts +9 -12
  226. package/types/ojiepermana-angular-navigation-service.d.ts +112 -115
  227. package/types/ojiepermana-angular-navigation-types.d.ts +166 -125
  228. package/types/ojiepermana-angular-navigation.d.ts +708 -375
  229. package/types/ojiepermana-angular-sdk.d.ts +69 -71
  230. package/types/ojiepermana-angular-theme-component-settings.d.ts +120 -86
  231. package/types/ojiepermana-angular-theme-layout-services.d.ts +119 -124
  232. package/types/ojiepermana-angular-theme-layout-types.d.ts +27 -31
  233. package/types/ojiepermana-angular-theme-layout-wrapper.d.ts +446 -187
  234. package/types/ojiepermana-angular-theme-layout.d.ts +201 -113
  235. package/types/ojiepermana-angular-theme-page-core.d.ts +136 -142
  236. package/types/ojiepermana-angular-theme-page-filter.d.ts +112 -62
  237. package/types/ojiepermana-angular-theme-page-overview.d.ts +28 -0
  238. package/types/ojiepermana-angular-theme-page-root.d.ts +172 -88
  239. package/types/ojiepermana-angular-theme-page-side.d.ts +89 -49
  240. package/types/ojiepermana-angular-theme-page-slots.d.ts +58 -37
  241. package/types/ojiepermana-angular-theme-page.d.ts +7 -5
  242. package/types/ojiepermana-angular-theme-shell-services.d.ts +119 -125
  243. package/types/ojiepermana-angular-theme-shell-types.d.ts +38 -41
  244. package/types/ojiepermana-angular-theme-shell.d.ts +139 -61
  245. package/types/ojiepermana-angular-theme-styles.d.ts +184 -196
  246. package/types/ojiepermana-angular-theme.d.ts +1 -2
  247. package/types/ojiepermana-angular.d.ts +5 -5
  248. package/fesm2022/ojiepermana-angular-navigation-navigation-badge-count.component-Be3IqzG4.mjs +0 -91
  249. package/fesm2022/ojiepermana-angular-navigation-navigation-dockbar-menu.component-Bc7DWK3R.mjs +0 -522
  250. package/fesm2022/ojiepermana-angular-navigation-navigation-flyout-menu.component-DA8VPEn7.mjs +0 -404
  251. package/fesm2022/ojiepermana-angular-navigation-navigation-horizontal.component-U2TJTzlW.mjs +0 -466
  252. package/fesm2022/ojiepermana-angular-navigation-ojiepermana-angular-navigation-CIUhmytH.mjs +0 -2668
@@ -1,466 +0,0 @@
1
- import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
2
- import * as i0 from '@angular/core';
3
- import { inject, ElementRef, Injector, input, output, computed, effect, signal, afterNextRender, Component } from '@angular/core';
4
- import { cn } from '@ojiepermana/angular/component/utils/core';
5
- import { N as NavigationEntryGridComponent } from './ojiepermana-angular-navigation-navigation-entry-grid.component-COQ-60DS.mjs';
6
- import { n as navigationPanelId, N as NavigationItemComponent, a as NavigationItemContentComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-CIUhmytH.mjs';
7
- import { NAVIGATION_ADAPTER } from '@ojiepermana/angular/navigation/core';
8
-
9
- class NavigationHorizontalComponent {
10
- nav = inject(NAVIGATION_ADAPTER);
11
- host = inject(ElementRef);
12
- injector = inject(Injector);
13
- document = inject(DOCUMENT);
14
- navId = input('default', /* @ts-ignore */
15
- ...(ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []));
16
- items = input([], /* @ts-ignore */
17
- ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
18
- /** Posisi bar terhadap konten: `bottom` membuka panel ke atas; selain itu ke bawah. */
19
- position = input('top', /* @ts-ignore */
20
- ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
21
- typeStyle = input('flat', /* @ts-ignore */
22
- ...(ngDevMode ? [{ debugName: "typeStyle" }] : /* istanbul ignore next */ []));
23
- compact = input(false, /* @ts-ignore */
24
- ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
25
- itemClass = input('', /* @ts-ignore */
26
- ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
27
- /** Kelas Tailwind untuk container `<li>` group navbar. */
28
- groupClass = input('', /* @ts-ignore */
29
- ...(ngDevMode ? [{ debugName: "groupClass" }] : /* istanbul ignore next */ []));
30
- activeIds = input(new Set(), /* @ts-ignore */
31
- ...(ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []));
32
- activeUrl = input(null, /* @ts-ignore */
33
- ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
34
- iconTemplate = input(undefined, /* @ts-ignore */
35
- ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
36
- collapseTree = input('stairs', /* @ts-ignore */
37
- ...(ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []));
38
- openedIds = input([], /* @ts-ignore */
39
- ...(ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []));
40
- openedIdsChange = output();
41
- itemSelected = output();
42
- isBorderRail = computed(() => this.typeStyle() === 'border-rail', /* @ts-ignore */
43
- ...(ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []));
44
- isBottom = computed(() => this.position() === 'bottom', /* @ts-ignore */
45
- ...(ngDevMode ? [{ debugName: "isBottom" }] : /* istanbul ignore next */ []));
46
- /** Kelas tambahan untuk NavigationItem leaf di row saat style border-rail aktif. */
47
- navItemClass = computed(() => cn(this.itemClass(), this.isBorderRail() && 'rounded-none hover:bg-transparent hover:text-primary'), /* @ts-ignore */
48
- ...(ngDevMode ? [{ debugName: "navItemClass" }] : /* istanbul ignore next */ []));
49
- listClasses = computed(() => cn('flex h-full min-w-0 items-center justify-center gap-1 list-none p-0'), /* @ts-ignore */
50
- ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
51
- openPanelKey = computed(() => this.nav.currentPanelKey(this.navId()), /* @ts-ignore */
52
- ...(ngDevMode ? [{ debugName: "openPanelKey" }] : /* istanbul ignore next */ []));
53
- /**
54
- * Template method calls re-run on every check. Resolving the whole row once
55
- * per dependency change keeps a redraw from replaying an URL match — and a
56
- * `cn()` merge — for every item in the bar.
57
- */
58
- itemState = computed(() => {
59
- const activeIds = this.activeIds();
60
- const activeUrl = this.activeUrl();
61
- const navId = this.navId();
62
- const openKey = this.openPanelKey();
63
- return new Map(this.items().map((item) => {
64
- const active = this.nav.isItemActive(item, activeIds, activeUrl);
65
- const open = openKey === item.key;
66
- return [
67
- item,
68
- {
69
- active,
70
- open,
71
- panelId: navigationPanelId(navId, item),
72
- triggerClasses: this.computeTriggerClasses(item, active, open),
73
- },
74
- ];
75
- }));
76
- }, /* @ts-ignore */
77
- ...(ngDevMode ? [{ debugName: "itemState" }] : /* istanbul ignore next */ []));
78
- isItemActive(item) {
79
- return this.itemState().get(item)?.active ?? false;
80
- }
81
- isPanelOpen(item) {
82
- return this.itemState().get(item)?.open ?? false;
83
- }
84
- panelIdFor(item) {
85
- return this.itemState().get(item)?.panelId ?? navigationPanelId(this.navId(), item);
86
- }
87
- togglePanel(item) {
88
- if (!this.isPanelOpen(item)) {
89
- this.measurePanelPlacement();
90
- }
91
- this.nav.togglePanel(this.navId(), item);
92
- }
93
- constructor() {
94
- // Host `(document:click)`/`(window:resize)` bindings mark this view dirty
95
- // before the handler even runs, so every click anywhere in the app re-checked
96
- // the whole bar. Outside dismissal only matters while a panel is open, so the
97
- // listeners exist only then — and outside Angular, since they are no-ops
98
- // unless they actually close something.
99
- effect((onCleanup) => {
100
- if (this.openPanelKey() === null) {
101
- return;
102
- }
103
- const view = this.document.defaultView;
104
- const onDocumentClick = (event) => this.closeOnOutsideClick(event);
105
- const onResize = () => this.measurePanelPlacement();
106
- this.document.addEventListener('click', onDocumentClick);
107
- view?.addEventListener('resize', onResize);
108
- onCleanup(() => {
109
- this.document.removeEventListener('click', onDocumentClick);
110
- view?.removeEventListener('resize', onResize);
111
- });
112
- });
113
- }
114
- /** Klik di luar menubar/panel menutup panel mega yang sedang terbuka. */
115
- closeOnOutsideClick(event) {
116
- const target = event.target;
117
- if (target && !this.host.nativeElement.contains(target)) {
118
- this.nav.closePanel(this.navId());
119
- }
120
- }
121
- /**
122
- * Lebar & posisi kiri panel mengikuti container parent dari `Navigation`
123
- * (wrapper display:contents dilewati). `null` = pengukuran tak tersedia dan
124
- * panel jatuh ke lebar host (inset-x-0).
125
- */
126
- panelPlacement = signal(null, /* @ts-ignore */
127
- ...(ngDevMode ? [{ debugName: "panelPlacement" }] : /* istanbul ignore next */ []));
128
- measurePanelPlacement() {
129
- const hostEl = this.host.nativeElement;
130
- const navEl = hostEl.closest('[data-navigation-id]');
131
- let container = navEl?.parentElement ?? hostEl.parentElement;
132
- while (container && container.getBoundingClientRect().width <= 0 && container.parentElement) {
133
- container = container.parentElement;
134
- }
135
- const containerRect = (container ?? hostEl).getBoundingClientRect();
136
- const hostRect = hostEl.getBoundingClientRect();
137
- if (containerRect.width <= 0) {
138
- this.panelPlacement.set(null);
139
- return;
140
- }
141
- this.panelPlacement.set({
142
- left: containerRect.left - hostRect.left,
143
- width: containerRect.width,
144
- });
145
- }
146
- compactLabel(item) {
147
- return this.nav.compactLabel(item, this.compact());
148
- }
149
- titleFor(item) {
150
- return this.nav.titleFor(item, this.compact());
151
- }
152
- /** Container `<li>` group navbar; consumer atur lewat `nav-group-class` atau `item.classes.container`. */
153
- groupContainerClasses(item) {
154
- return cn(this.groupClass(), item.classes?.container);
155
- }
156
- triggerClasses(item) {
157
- return this.itemState().get(item)?.triggerClasses ?? '';
158
- }
159
- computeTriggerClasses(item, active, open) {
160
- return cn('nav-trigger nav-text group/nav inline-flex min-w-0 items-center gap-(--nav-item-gap) rounded-md transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', 'h-(--nav-item-height) px-(--nav-item-padding-x)', this.compact() && 'size-(--nav-rail-item-size) justify-center gap-0 px-0', this.isBorderRail()
161
- ? open || active
162
- ? 'rounded-none text-primary'
163
- : 'rounded-none text-foreground/80 hover:text-primary'
164
- : active
165
- ? 'bg-accent text-foreground'
166
- : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground', item.classes?.wrapper, this.itemClass());
167
- }
168
- panelClasses() {
169
- // Panel mega selebar container parent, menempel rapat tanpa gap pada sisi bar:
170
- // nav-position top membuka ke bawah (sisi atas siku), bottom membuka ke atas
171
- // (sisi bawah siku) sehingga sambungan border selalu menyatu dengan bar.
172
- // Border-rail: sisi kiri/kanan panel dibiarkan ditangani rail vertikal dari
173
- // layout; panel hanya menggambar border atas & bawah senada rail.
174
- // Panel dibiarkan pada tepi bawah bar (`top-full`) tanpa offset, sehingga border
175
- // atasnya sejajar dengan border-bottom bar (mis. yang dipasang consumer).
176
- return cn('absolute z-50 bg-popover text-popover-foreground shadow-lg',
177
- // Batasi tinggi ke viewport (dikurangi area bar) lalu scroll vertikal supaya
178
- // menu dengan item banyak tetap bisa diakses tanpa keluar layar.
179
- 'max-h-[calc(100dvh-5rem)] overflow-x-hidden overflow-y-auto overscroll-contain', this.isBottom() ? 'bottom-full' : 'top-full', !this.panelPlacement() && 'inset-x-0', this.isBorderRail()
180
- ? 'rounded-none border-y border-border'
181
- : cn('rounded-xl border border-[hsl(var(--border)/var(--section-border-opacity))]', this.isBottom() ? 'rounded-b-none' : 'rounded-t-none'));
182
- }
183
- onKeydown(event) {
184
- if (event.key === 'Escape') {
185
- const panelKey = this.nav.currentPanelKey(this.navId());
186
- this.nav.closePanel(this.navId());
187
- this.focusOpenPanelTrigger(panelKey);
188
- return;
189
- }
190
- const rootItems = this.rootFocusItems();
191
- if (rootItems.length === 0) {
192
- return;
193
- }
194
- const currentIndex = rootItems.indexOf(document.activeElement);
195
- if (currentIndex === -1) {
196
- return;
197
- }
198
- // ArrowDown membuka panel di posisi top; ArrowUp di posisi bottom (panel di atas bar).
199
- if (event.key === (this.isBottom() ? 'ArrowUp' : 'ArrowDown')) {
200
- const currentItem = rootItems[currentIndex];
201
- if (currentItem.getAttribute('aria-haspopup') === 'menu') {
202
- event.preventDefault();
203
- currentItem.click();
204
- // The panel renders under `@if`, so a microtask still runs before it
205
- // exists and the focus call finds nothing.
206
- afterNextRender({ read: () => this.focusFirstPanelItem(this.nav.currentPanelKey(this.navId())) }, { injector: this.injector });
207
- }
208
- return;
209
- }
210
- if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
211
- event.preventDefault();
212
- const direction = event.key === 'ArrowRight' ? 1 : -1;
213
- const nextIndex = (currentIndex + direction + rootItems.length) % rootItems.length;
214
- rootItems[nextIndex]?.focus();
215
- }
216
- }
217
- onPanelKeydown(event) {
218
- if (event.key !== 'Escape') {
219
- return;
220
- }
221
- event.preventDefault();
222
- const panelKey = this.nav.currentPanelKey(this.navId());
223
- this.nav.closePanel(this.navId());
224
- this.focusOpenPanelTrigger(panelKey);
225
- }
226
- rootFocusItems() {
227
- return Array.from(this.host.nativeElement.querySelectorAll('[data-navigation-root-item="true"]'));
228
- }
229
- focusOpenPanelTrigger(panelKey) {
230
- if (!panelKey) {
231
- return;
232
- }
233
- const trigger = this.host.nativeElement.querySelector(`[data-navigation-item-key="${panelKey}"] [data-navigation-root-item="true"]`);
234
- trigger?.focus();
235
- }
236
- focusFirstPanelItem(panelKey) {
237
- if (!panelKey) {
238
- return;
239
- }
240
- const panel = this.host.nativeElement.querySelector(`[data-navigation-panel="${panelKey}"]`);
241
- const item = panel?.querySelector('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])');
242
- item?.focus();
243
- }
244
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
245
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NavigationHorizontalComponent, isStandalone: true, selector: "NavigationHorizontal", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "typeStyle", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, groupClass: { classPropertyName: "groupClass", publicName: "groupClass", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
246
- <ul [class]="listClasses()" role="menubar" tabindex="-1" (keydown)="onKeydown($event)">
247
- @for (item of items(); track item.key) {
248
- @switch (item.type) {
249
- @case ('group') {
250
- <ng-container
251
- [ngTemplateOutlet]="branchTemplate"
252
- [ngTemplateOutletContext]="{ $implicit: item }"
253
- />
254
- }
255
- @case ('collapsible') {
256
- <ng-container
257
- [ngTemplateOutlet]="branchTemplate"
258
- [ngTemplateOutletContext]="{ $implicit: item }"
259
- />
260
- }
261
- @case ('mega') {
262
- <ng-container
263
- [ngTemplateOutlet]="branchTemplate"
264
- [ngTemplateOutletContext]="{ $implicit: item }"
265
- />
266
- }
267
- @default {
268
- <li
269
- NavigationItem
270
- [navId]="navId()"
271
- [item]="item"
272
- [level]="0"
273
- [orientation]="'horizontal'"
274
- [compact]="compact()"
275
- [itemClass]="navItemClass()"
276
- [activeIds]="activeIds()"
277
- [activeUrl]="activeUrl()"
278
- [iconTemplate]="iconTemplate()"
279
- [collapseTree]="collapseTree()"
280
- [openedIds]="openedIds()"
281
- (openedIdsChange)="openedIdsChange.emit($event)"
282
- (itemSelected)="itemSelected.emit($event)"
283
- ></li>
284
- }
285
- }
286
- }
287
- </ul>
288
-
289
- <ng-template #branchTemplate let-item>
290
- <li
291
- role="none"
292
- [class]="groupContainerClasses(item)"
293
- [attr.data-navigation-item-key]="item.key"
294
- >
295
- <button
296
- type="button"
297
- role="menuitem"
298
- data-navigation-root-item="true"
299
- [class]="triggerClasses(item)"
300
- [attr.aria-expanded]="isPanelOpen(item)"
301
- [attr.aria-controls]="isPanelOpen(item) ? panelIdFor(item) : null"
302
- [attr.aria-haspopup]="'menu'"
303
- [attr.aria-label]="compactLabel(item)"
304
- [attr.title]="titleFor(item)"
305
- [disabled]="item.disabled || null"
306
- (click)="togglePanel(item)"
307
- >
308
- <NavigationItemContent
309
- [item]="item"
310
- [active]="isItemActive(item)"
311
- [compact]="compact()"
312
- [orientation]="'horizontal'"
313
- [level]="0"
314
- [iconTemplate]="iconTemplate()"
315
- />
316
- </button>
317
-
318
- @if (isPanelOpen(item)) {
319
- <div
320
- [id]="panelIdFor(item)"
321
- role="menu"
322
- tabindex="-1"
323
- [class]="panelClasses()"
324
- [style.left.px]="panelPlacement()?.left"
325
- [style.width.px]="panelPlacement()?.width"
326
- [attr.data-navigation-panel]="item.key"
327
- (keydown)="onPanelKeydown($event)"
328
- >
329
- <NavigationEntryGrid
330
- [navId]="navId()"
331
- [branch]="item"
332
- [typeStyle]="typeStyle()"
333
- [itemClass]="itemClass()"
334
- [activeIds]="activeIds()"
335
- [activeUrl]="activeUrl()"
336
- [iconTemplate]="iconTemplate()"
337
- [collapseTree]="collapseTree()"
338
- [openedIds]="openedIds()"
339
- (openedIdsChange)="openedIdsChange.emit($event)"
340
- (itemSelected)="itemSelected.emit($event)"
341
- />
342
- </div>
343
- }
344
- </li>
345
- </ng-template>
346
- `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NavigationEntryGridComponent, selector: "NavigationEntryGrid", inputs: ["navId", "branch", "typeStyle", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationItemComponent, selector: "li[NavigationItem]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "tooltip-position", "collapseTree", "straightRail", "stairsRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationItemContentComponent, selector: "NavigationItemContent", inputs: ["item", "active", "compact", "orientation", "level", "iconTemplate"] }] });
347
- }
348
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationHorizontalComponent, decorators: [{
349
- type: Component,
350
- args: [{
351
- selector: 'NavigationHorizontal',
352
- imports: [
353
- NgTemplateOutlet,
354
- NavigationEntryGridComponent,
355
- NavigationItemComponent,
356
- NavigationItemContentComponent,
357
- ],
358
- host: {
359
- class: 'relative block h-full w-full',
360
- },
361
- template: `
362
- <ul [class]="listClasses()" role="menubar" tabindex="-1" (keydown)="onKeydown($event)">
363
- @for (item of items(); track item.key) {
364
- @switch (item.type) {
365
- @case ('group') {
366
- <ng-container
367
- [ngTemplateOutlet]="branchTemplate"
368
- [ngTemplateOutletContext]="{ $implicit: item }"
369
- />
370
- }
371
- @case ('collapsible') {
372
- <ng-container
373
- [ngTemplateOutlet]="branchTemplate"
374
- [ngTemplateOutletContext]="{ $implicit: item }"
375
- />
376
- }
377
- @case ('mega') {
378
- <ng-container
379
- [ngTemplateOutlet]="branchTemplate"
380
- [ngTemplateOutletContext]="{ $implicit: item }"
381
- />
382
- }
383
- @default {
384
- <li
385
- NavigationItem
386
- [navId]="navId()"
387
- [item]="item"
388
- [level]="0"
389
- [orientation]="'horizontal'"
390
- [compact]="compact()"
391
- [itemClass]="navItemClass()"
392
- [activeIds]="activeIds()"
393
- [activeUrl]="activeUrl()"
394
- [iconTemplate]="iconTemplate()"
395
- [collapseTree]="collapseTree()"
396
- [openedIds]="openedIds()"
397
- (openedIdsChange)="openedIdsChange.emit($event)"
398
- (itemSelected)="itemSelected.emit($event)"
399
- ></li>
400
- }
401
- }
402
- }
403
- </ul>
404
-
405
- <ng-template #branchTemplate let-item>
406
- <li
407
- role="none"
408
- [class]="groupContainerClasses(item)"
409
- [attr.data-navigation-item-key]="item.key"
410
- >
411
- <button
412
- type="button"
413
- role="menuitem"
414
- data-navigation-root-item="true"
415
- [class]="triggerClasses(item)"
416
- [attr.aria-expanded]="isPanelOpen(item)"
417
- [attr.aria-controls]="isPanelOpen(item) ? panelIdFor(item) : null"
418
- [attr.aria-haspopup]="'menu'"
419
- [attr.aria-label]="compactLabel(item)"
420
- [attr.title]="titleFor(item)"
421
- [disabled]="item.disabled || null"
422
- (click)="togglePanel(item)"
423
- >
424
- <NavigationItemContent
425
- [item]="item"
426
- [active]="isItemActive(item)"
427
- [compact]="compact()"
428
- [orientation]="'horizontal'"
429
- [level]="0"
430
- [iconTemplate]="iconTemplate()"
431
- />
432
- </button>
433
-
434
- @if (isPanelOpen(item)) {
435
- <div
436
- [id]="panelIdFor(item)"
437
- role="menu"
438
- tabindex="-1"
439
- [class]="panelClasses()"
440
- [style.left.px]="panelPlacement()?.left"
441
- [style.width.px]="panelPlacement()?.width"
442
- [attr.data-navigation-panel]="item.key"
443
- (keydown)="onPanelKeydown($event)"
444
- >
445
- <NavigationEntryGrid
446
- [navId]="navId()"
447
- [branch]="item"
448
- [typeStyle]="typeStyle()"
449
- [itemClass]="itemClass()"
450
- [activeIds]="activeIds()"
451
- [activeUrl]="activeUrl()"
452
- [iconTemplate]="iconTemplate()"
453
- [collapseTree]="collapseTree()"
454
- [openedIds]="openedIds()"
455
- (openedIdsChange)="openedIdsChange.emit($event)"
456
- (itemSelected)="itemSelected.emit($event)"
457
- />
458
- </div>
459
- }
460
- </li>
461
- </ng-template>
462
- `,
463
- }]
464
- }], ctorParameters: () => [], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navId", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], typeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeStyle", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], groupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupClass", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseTree", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }], openedIdsChange: [{ type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
465
-
466
- export { NavigationHorizontalComponent };