@rxap/layout 18.0.2 → 18.0.3-dev.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (182) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/README.md +1 -1
  3. package/compodoc/changelog.html +730 -0
  4. package/compodoc/components/AppsButtonComponent.html +604 -0
  5. package/compodoc/components/FooterComponent.html +487 -0
  6. package/compodoc/components/HeaderComponent.html +781 -0
  7. package/compodoc/components/LanguageSelectorComponent.html +526 -0
  8. package/compodoc/components/LayoutComponent.html +1035 -0
  9. package/compodoc/components/NavigationComponent.html +1156 -0
  10. package/compodoc/components/NavigationItemComponent.html +1328 -0
  11. package/compodoc/components/NavigationProgressBarComponent.html +550 -0
  12. package/compodoc/components/ResetButtonComponent.html +486 -0
  13. package/compodoc/components/SettingsButtonComponent.html +1416 -0
  14. package/compodoc/components/SidenavComponent.html +689 -0
  15. package/compodoc/components/SidenavToggleButtonComponent.html +517 -0
  16. package/compodoc/components/SignOutComponent.html +493 -0
  17. package/compodoc/components/ToggleWindowSidenavButtonComponent.html +549 -0
  18. package/compodoc/components/UserProfileIconComponent.html +657 -0
  19. package/compodoc/components/VersionComponent.html +524 -0
  20. package/compodoc/components/WindowContainerSidenavComponent.html +687 -0
  21. package/compodoc/dependencies.html +239 -0
  22. package/compodoc/directives/FooterDirective.html +371 -0
  23. package/compodoc/directives/SidenavFooterDirective.html +387 -0
  24. package/compodoc/directives/SidenavHeaderDirective.html +387 -0
  25. package/compodoc/fonts/ionicons.eot +0 -0
  26. package/compodoc/fonts/ionicons.svg +2090 -0
  27. package/compodoc/fonts/ionicons.ttf +0 -0
  28. package/compodoc/fonts/ionicons.woff +0 -0
  29. package/compodoc/fonts/ionicons.woff2 +0 -0
  30. package/compodoc/fonts/roboto-v15-latin-300.eot +0 -0
  31. package/compodoc/fonts/roboto-v15-latin-300.svg +314 -0
  32. package/compodoc/fonts/roboto-v15-latin-300.ttf +0 -0
  33. package/compodoc/fonts/roboto-v15-latin-300.woff +0 -0
  34. package/compodoc/fonts/roboto-v15-latin-300.woff2 +0 -0
  35. package/compodoc/fonts/roboto-v15-latin-700.eot +0 -0
  36. package/compodoc/fonts/roboto-v15-latin-700.svg +310 -0
  37. package/compodoc/fonts/roboto-v15-latin-700.ttf +0 -0
  38. package/compodoc/fonts/roboto-v15-latin-700.woff +0 -0
  39. package/compodoc/fonts/roboto-v15-latin-700.woff2 +0 -0
  40. package/compodoc/fonts/roboto-v15-latin-italic.eot +0 -0
  41. package/compodoc/fonts/roboto-v15-latin-italic.svg +323 -0
  42. package/compodoc/fonts/roboto-v15-latin-italic.ttf +0 -0
  43. package/compodoc/fonts/roboto-v15-latin-italic.woff +0 -0
  44. package/compodoc/fonts/roboto-v15-latin-italic.woff2 +0 -0
  45. package/compodoc/fonts/roboto-v15-latin-regular.eot +0 -0
  46. package/compodoc/fonts/roboto-v15-latin-regular.svg +308 -0
  47. package/compodoc/fonts/roboto-v15-latin-regular.ttf +0 -0
  48. package/compodoc/fonts/roboto-v15-latin-regular.woff +0 -0
  49. package/compodoc/fonts/roboto-v15-latin-regular.woff2 +0 -0
  50. package/compodoc/graph/dependencies.svg +24 -0
  51. package/compodoc/images/compodoc-vectorise-inverted.png +0 -0
  52. package/compodoc/images/compodoc-vectorise-inverted.svg +201 -0
  53. package/compodoc/images/compodoc-vectorise.png +0 -0
  54. package/compodoc/images/compodoc-vectorise.svg +201 -0
  55. package/compodoc/images/favicon.ico +0 -0
  56. package/compodoc/index.html +190 -0
  57. package/compodoc/injectables/AppUrlService.html +829 -0
  58. package/compodoc/injectables/AuthenticationServiceMock.html +303 -0
  59. package/compodoc/injectables/LayoutComponentService.html +848 -0
  60. package/compodoc/injectables/NavigationService.html +1081 -0
  61. package/compodoc/injectables/ReplaceRouterPathsService.html +337 -0
  62. package/compodoc/injectables/SidenavComponentService.html +408 -0
  63. package/compodoc/interfaces/ExternalApps.html +634 -0
  64. package/compodoc/interfaces/LogoConfig.html +381 -0
  65. package/compodoc/interfaces/NavigationDividerItem.html +385 -0
  66. package/compodoc/interfaces/NavigationInsertItem.html +340 -0
  67. package/compodoc/interfaces/NavigationItem.html +520 -0
  68. package/compodoc/interfaces/NavigationStatus.html +376 -0
  69. package/compodoc/js/compodoc.js +14 -0
  70. package/compodoc/js/lazy-load-graphs.js +44 -0
  71. package/compodoc/js/libs/EventDispatcher.js +5 -0
  72. package/compodoc/js/libs/bootstrap-native.js +2 -0
  73. package/compodoc/js/libs/clipboard.min.js +7 -0
  74. package/compodoc/js/libs/custom-elements-es5-adapter.js +15 -0
  75. package/compodoc/js/libs/custom-elements.min.js +38 -0
  76. package/compodoc/js/libs/d3.v3.min.js +2 -0
  77. package/compodoc/js/libs/deep-iterator.js +2 -0
  78. package/compodoc/js/libs/es6-shim.min.js +12 -0
  79. package/compodoc/js/libs/htmlparser.js +23 -0
  80. package/compodoc/js/libs/innersvg.js +9 -0
  81. package/compodoc/js/libs/lit-html.js +1 -0
  82. package/compodoc/js/libs/prism.js +46 -0
  83. package/compodoc/js/libs/promise.min.js +6 -0
  84. package/compodoc/js/libs/svg-pan-zoom.min.js +3 -0
  85. package/compodoc/js/libs/tablesort.min.js +6 -0
  86. package/compodoc/js/libs/tablesort.number.min.js +6 -0
  87. package/compodoc/js/libs/vis.min.js +47 -0
  88. package/compodoc/js/libs/zepto.min.js +2 -0
  89. package/compodoc/js/menu-wc.js +237 -0
  90. package/compodoc/js/menu-wc_es5.js +40 -0
  91. package/compodoc/js/menu.js +270 -0
  92. package/compodoc/js/routes.js +301 -0
  93. package/compodoc/js/search/lunr.min.js +6 -0
  94. package/compodoc/js/search/search-lunr.js +67 -0
  95. package/compodoc/js/search/search.js +283 -0
  96. package/compodoc/js/search/search_index.js +4 -0
  97. package/compodoc/js/sourceCode.js +58 -0
  98. package/compodoc/js/svg-pan-zoom.controls.js +53 -0
  99. package/compodoc/js/tabs.js +21 -0
  100. package/compodoc/js/tree.js +147 -0
  101. package/compodoc/license.html +731 -0
  102. package/compodoc/miscellaneous/functions.html +389 -0
  103. package/compodoc/miscellaneous/typealiases.html +256 -0
  104. package/compodoc/miscellaneous/variables.html +370 -0
  105. package/compodoc/modules.html +183 -0
  106. package/compodoc/overview.html +225 -0
  107. package/compodoc/pipes/ReplaceRouterPathsPipe.html +363 -0
  108. package/compodoc/properties.html +195 -0
  109. package/compodoc/styles/bootstrap-card.css +219 -0
  110. package/compodoc/styles/bootstrap.min.css +6 -0
  111. package/compodoc/styles/compodoc.css +1124 -0
  112. package/compodoc/styles/dark.css +121 -0
  113. package/compodoc/styles/ionicons.min.css +11 -0
  114. package/compodoc/styles/laravel.css +113 -0
  115. package/compodoc/styles/material.css +131 -0
  116. package/compodoc/styles/original.css +51 -0
  117. package/compodoc/styles/postmark.css +238 -0
  118. package/compodoc/styles/prism.css +301 -0
  119. package/compodoc/styles/readthedocs.css +117 -0
  120. package/compodoc/styles/reset.css +129 -0
  121. package/compodoc/styles/stripe.css +106 -0
  122. package/compodoc/styles/style.css +7 -0
  123. package/compodoc/styles/tablesort.css +33 -0
  124. package/compodoc/styles/vagrant.css +130 -0
  125. package/docs/.nojekyll +1 -0
  126. package/docs/assets/highlight.css +43 -0
  127. package/docs/assets/icons.js +15 -0
  128. package/docs/assets/icons.svg +1 -0
  129. package/docs/assets/main.js +59 -0
  130. package/docs/assets/navigation.js +1 -0
  131. package/docs/assets/search.js +1 -0
  132. package/docs/assets/style.css +1412 -0
  133. package/docs/classes/AppUrlService.html +13 -0
  134. package/docs/classes/AppsButtonComponent.html +9 -0
  135. package/docs/classes/AuthenticationServiceMock.html +3 -0
  136. package/docs/classes/FooterComponent.html +3 -0
  137. package/docs/classes/FooterDirective.html +8 -0
  138. package/docs/classes/HeaderComponent.html +8 -0
  139. package/docs/classes/LanguageSelectorComponent.html +3 -0
  140. package/docs/classes/LayoutComponent.html +18 -0
  141. package/docs/classes/LayoutComponentService.html +15 -0
  142. package/docs/classes/NavigationComponent.html +15 -0
  143. package/docs/classes/NavigationItemComponent.html +22 -0
  144. package/docs/classes/NavigationProgressBarComponent.html +4 -0
  145. package/docs/classes/NavigationService.html +17 -0
  146. package/docs/classes/ReplaceRouterPathsPipe.html +4 -0
  147. package/docs/classes/ReplaceRouterPathsService.html +3 -0
  148. package/docs/classes/ResetButtonComponent.html +3 -0
  149. package/docs/classes/SettingsButtonComponent.html +30 -0
  150. package/docs/classes/SidenavComponent.html +5 -0
  151. package/docs/classes/SidenavComponentService.html +5 -0
  152. package/docs/classes/SidenavFooterDirective.html +3 -0
  153. package/docs/classes/SidenavHeaderDirective.html +3 -0
  154. package/docs/classes/SidenavToggleButtonComponent.html +4 -0
  155. package/docs/classes/SignOutComponent.html +4 -0
  156. package/docs/classes/ToggleWindowSidenavButtonComponent.html +5 -0
  157. package/docs/classes/UserProfileIconComponent.html +6 -0
  158. package/docs/classes/VersionComponent.html +7 -0
  159. package/docs/classes/WindowContainerSidenavComponent.html +10 -0
  160. package/docs/documentation.json +13292 -0
  161. package/docs/functions/IsNavigationDividerItem.html +1 -0
  162. package/docs/functions/IsNavigationInsertItem.html +1 -0
  163. package/docs/functions/IsNavigationItem.html +1 -0
  164. package/docs/index.html +16 -0
  165. package/docs/interfaces/ExternalApps.html +8 -0
  166. package/docs/interfaces/LogoConfig.html +4 -0
  167. package/docs/interfaces/NavigationDividerItem.html +3 -0
  168. package/docs/interfaces/NavigationInsertItem.html +2 -0
  169. package/docs/interfaces/NavigationItem.html +6 -0
  170. package/docs/interfaces/NavigationStatus.html +2 -0
  171. package/docs/modules.html +47 -0
  172. package/docs/types/ExtractUsernameFromProfileFn.html +1 -0
  173. package/docs/types/Navigation.html +1 -0
  174. package/docs/types/NavigationWithInserts.html +1 -0
  175. package/docs/variables/EXTRACT_USERNAME_FROM_PROFILE.html +1 -0
  176. package/docs/variables/RXAP_FOOTER_COMPONENT.html +1 -0
  177. package/docs/variables/RXAP_HEADER_COMPONENT.html +1 -0
  178. package/docs/variables/RXAP_LAYOUT_APPS_GRID.html +1 -0
  179. package/docs/variables/RXAP_LOGO_CONFIG.html +1 -0
  180. package/docs/variables/RXAP_NAVIGATION_CONFIG.html +1 -0
  181. package/docs/variables/RXAP_NAVIGATION_CONFIG_INSERTS.html +1 -0
  182. package/package.json +44 -44
package/compodoc/components/NavigationItemComponent.html ADDED
@@ -0,0 +1,1328 @@
1
+ <!doctype html>
2
+ <html class="no-js" lang="">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
6
+ <title>angular-layout</title>
7
+ <meta name="description" content="">
8
+ <meta name="viewport" content="width=device-width, initial-scale=1">
9
+
10
+ <link rel="icon" type="image/x-icon" href="../images/favicon.ico">
11
+ <link rel="stylesheet" href="../styles/style.css">
12
+ <link rel="stylesheet" href="../styles/dark.css">
13
+ </head>
14
+ <body>
15
+ <script>
16
+ // Blocking script to avoid flickering dark mode
17
+ // Dark mode toggle button
18
+ var useDark = window.matchMedia('(prefers-color-scheme: dark)');
19
+ var darkModeState = useDark.matches;
20
+ var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
21
+ var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
22
+ var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
23
+
24
+ function checkToggle(check) {
25
+ for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
26
+ $darkModeToggleSwitchers[i].checked = check;
27
+ }
28
+ }
29
+
30
+ function toggleDarkMode(state) {
31
+ if (window.localStorage) {
32
+ localStorage.setItem('compodoc_darkmode-state', state);
33
+ }
34
+
35
+ checkToggle(state);
36
+
37
+ const hasClass = document.body.classList.contains('dark');
38
+
39
+ if (state) {
40
+ for (var i = 0; i < $darkModeToggles.length; i++) {
41
+ $darkModeToggles[i].classList.add('dark');
42
+ }
43
+ if (!hasClass) {
44
+ document.body.classList.add('dark');
45
+ }
46
+ } else {
47
+ for (var i = 0; i < $darkModeToggles.length; i++) {
48
+ $darkModeToggles[i].classList.remove('dark');
49
+ }
50
+ if (hasClass) {
51
+ document.body.classList.remove('dark');
52
+ }
53
+ }
54
+ }
55
+
56
+ useDark.addEventListener('change', function (evt) {
57
+ toggleDarkMode(evt.matches);
58
+ });
59
+ if (darkModeStateLocal) {
60
+ darkModeState = darkModeStateLocal === 'true';
61
+ }
62
+ toggleDarkMode(darkModeState);
63
+ </script>
64
+
65
+ <div class="navbar navbar-default navbar-fixed-top d-md-none p-0">
66
+ <div class="d-flex">
67
+ <a href="../" class="navbar-brand">angular-layout</a>
68
+ <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
69
+ </div>
70
+ </div>
71
+
72
+ <div class="xs-menu menu" id="mobile-menu">
73
+ <div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu>
74
+ </div>
75
+
76
+ <div class="container-fluid main">
77
+ <div class="row main">
78
+ <div class="d-none d-md-block menu">
79
+ <compodoc-menu mode="normal"></compodoc-menu>
80
+ </div>
81
+ <!-- START CONTENT -->
82
+ <div class="content component">
83
+ <div class="content-data">
84
+
85
+
86
+
87
+
88
+ <ol class="breadcrumb">
89
+ <li class="breadcrumb-item">Components</li>
90
+ <li class="breadcrumb-item"
91
+ >
92
+ NavigationItemComponent</li>
93
+ </ol>
94
+
95
+ <ul class="nav nav-tabs" role="tablist">
96
+ <li class="nav-item">
97
+ <a href="#info" class="nav-link active"
98
+ role="tab" id="info-tab" data-bs-toggle="tab" data-link="info">Info</a>
99
+ </li>
100
+ <li class="nav-item">
101
+ <a href="#source" class="nav-link"
102
+ role="tab" id="source-tab" data-bs-toggle="tab" data-link="source">Source</a>
103
+ </li>
104
+ <li class="nav-item">
105
+ <a href="#templateData" class="nav-link"
106
+ role="tab" id="templateData-tab" data-bs-toggle="tab" data-link="template">Template</a>
107
+ </li>
108
+ <li class="nav-item">
109
+ <a href="#styleData" class="nav-link"
110
+ role="tab" id="styleData-tab" data-bs-toggle="tab" data-link="style">Styles</a>
111
+ </li>
112
+ <li class="nav-item">
113
+ <a href="#tree" class="nav-link"
114
+ role="tab" id="tree-tab" data-bs-toggle="tab" data-link="dom-tree">DOM Tree</a>
115
+ </li>
116
+ </ul>
117
+
118
+ <div class="tab-content">
119
+ <div class="tab-pane fade active in" id="info"><p class="comment">
120
+ <h3>File</h3>
121
+ </p>
122
+ <p class="comment">
123
+ <code>src/lib/navigation/navigation-item/navigation-item.component.ts</code>
124
+ </p>
125
+
126
+
127
+
128
+
129
+ <p class="comment">
130
+ <h3>Implements</h3>
131
+ </p>
132
+ <p class="comment">
133
+ <code>OnChanges</code>
134
+ <code>OnDestroy</code>
135
+ </p>
136
+
137
+
138
+ <section data-compodoc="block-metadata">
139
+ <h3>Metadata</h3>
140
+ <table class="table table-sm table-hover metadata">
141
+ <tbody>
142
+
143
+ <tr>
144
+ <td class="col-md-3">changeDetection</td>
145
+ <td class="col-md-9"><code>ChangeDetectionStrategy.OnPush</code></td>
146
+ </tr>
147
+
148
+ <tr>
149
+ <td class="col-md-3">encapsulation</td>
150
+ <td class="col-md-9"><code>ViewEncapsulation.None</code></td>
151
+ </tr>
152
+
153
+
154
+
155
+
156
+
157
+
158
+
159
+
160
+
161
+
162
+ <tr>
163
+ <td class="col-md-3">selector</td>
164
+ <td class="col-md-9"><code>li[rxap-navigation-item]</code></td>
165
+ </tr>
166
+
167
+ <tr>
168
+ <td class="col-md-3">standalone</td>
169
+ <td class="col-md-9"><code>true</code></td>
170
+ </tr>
171
+
172
+ <tr>
173
+ <td class="col-md-3">imports</td>
174
+ <td class="col-md-9">
175
+ <code>RouterLinkActive</code>
176
+ <code>RouterLink</code>
177
+ <code>NgIf</code>
178
+ <code>MatRippleModule</code>
179
+ <code>MatIconModule</code>
180
+ <code>IconDirective</code>
181
+ <code>MatDividerModule</code>
182
+ <code><a href="../components/NavigationComponent.html" target="_self" >forwardRef(() &#x3D;&gt; NavigationComponent)</a></code>
183
+ <code>NgClass</code>
184
+ </td>
185
+ </tr>
186
+
187
+ <tr>
188
+ <td class="col-md-3">styleUrls</td>
189
+ <td class="col-md-9"><code>./navigation-item.component.scss</code></td>
190
+ </tr>
191
+
192
+
193
+
194
+ <tr>
195
+ <td class="col-md-3">templateUrl</td>
196
+ <td class="col-md-9"><code>./navigation-item.component.html</code></td>
197
+ </tr>
198
+
199
+
200
+
201
+
202
+
203
+
204
+
205
+
206
+ </tbody>
207
+ </table>
208
+ </section>
209
+
210
+ <section data-compodoc="block-index">
211
+ <h3 id="index">Index</h3>
212
+ <table class="table table-sm table-bordered index-table">
213
+ <tbody>
214
+ <tr>
215
+ <td class="col-md-4">
216
+ <h6><b>Properties</b></h6>
217
+ </td>
218
+ </tr>
219
+ <tr>
220
+ <td class="col-md-4">
221
+ <ul class="index-list">
222
+ <li>
223
+ <span class="modifier">Public</span>
224
+ <a href="#active" >active</a>
225
+ </li>
226
+ <li>
227
+ <span class="modifier">Public</span>
228
+ <a href="#children" >children</a>
229
+ </li>
230
+ <li>
231
+ <span class="modifier"></span>
232
+ <span class="modifier">Public</span>
233
+ <a href="#routerLinkActive" >routerLinkActive</a>
234
+ </li>
235
+ <li>
236
+ <span class="modifier"></span>
237
+ <span class="modifier">Public</span>
238
+ <span class="modifier">Readonly</span>
239
+ <a href="#sidenav" >sidenav</a>
240
+ </li>
241
+ </ul>
242
+ </td>
243
+ </tr>
244
+
245
+ <tr>
246
+ <td class="col-md-4">
247
+ <h6><b>Methods</b></h6>
248
+ </td>
249
+ </tr>
250
+ <tr>
251
+ <td class="col-md-4">
252
+ <ul class="index-list">
253
+ <li>
254
+ <span class="modifier">Public</span>
255
+ <a href="#asNavigationItem" >asNavigationItem</a>
256
+ </li>
257
+ <li>
258
+ <span class="modifier">Public</span>
259
+ <a href="#isNavigationDividerItem" >isNavigationDividerItem</a>
260
+ </li>
261
+ <li>
262
+ <span class="modifier">Public</span>
263
+ <a href="#isNavigationItem" >isNavigationItem</a>
264
+ </li>
265
+ </ul>
266
+ </td>
267
+ </tr>
268
+
269
+ <tr>
270
+ <td class="col-md-4">
271
+ <h6><b>Inputs</b></h6>
272
+ </td>
273
+ </tr>
274
+ <tr>
275
+ <td class="col-md-4">
276
+ <ul class="index-list">
277
+ <li>
278
+ <a href="#item" >item</a>
279
+ </li>
280
+ <li>
281
+ <a href="#level" >level</a>
282
+ </li>
283
+ </ul>
284
+ </td>
285
+ </tr>
286
+
287
+
288
+ <tr>
289
+ <td class="col-md-4">
290
+ <h6><b>HostBindings</b></h6>
291
+ </td>
292
+ </tr>
293
+ <tr>
294
+ <td class="col-md-4">
295
+ <ul class="index-list">
296
+ <li>
297
+ <a href="#class.active" >class.active</a>
298
+ </li>
299
+ </ul>
300
+ </td>
301
+ </tr>
302
+
303
+
304
+ <tr>
305
+ <td class="col-md-4">
306
+ <h6><b>Accessors</b></h6>
307
+ </td>
308
+ </tr>
309
+ <tr>
310
+ <td class="col-md-4">
311
+ <ul class="index-list">
312
+ <li>
313
+ <a href="#isActive" >isActive</a>
314
+ </li>
315
+ </ul>
316
+ </td>
317
+ </tr>
318
+ </tbody>
319
+ </table>
320
+ </section>
321
+
322
+ <section data-compodoc="block-constructor">
323
+ <h3 id="constructor">Constructor</h3>
324
+ <table class="table table-sm table-bordered">
325
+ <tbody>
326
+ <tr>
327
+ <td class="col-md-4">
328
+ <code>constructor(router: Router, sidenav: <a href="../injectables/SidenavComponentService.html" target="_self">SidenavComponentService</a>, elementRef: ElementRef, renderer: Renderer2, overlay: Overlay, viewContainerRef: ViewContainerRef)</code>
329
+ </td>
330
+ </tr>
331
+ <tr>
332
+ <td class="col-md-4">
333
+ <div class="io-line">Defined in <a href="" data-line="122" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:122</a></div>
334
+ </td>
335
+ </tr>
336
+
337
+ <tr>
338
+ <td class="col-md-4">
339
+ <div>
340
+ <b>Parameters :</b>
341
+ <table class="params">
342
+ <thead>
343
+ <tr>
344
+ <td>Name</td>
345
+ <td>Type</td>
346
+ <td>Optional</td>
347
+ </tr>
348
+ </thead>
349
+ <tbody>
350
+ <tr>
351
+ <td>router</td>
352
+
353
+ <td>
354
+ <code>Router</code>
355
+ </td>
356
+
357
+ <td>
358
+ No
359
+ </td>
360
+
361
+ </tr>
362
+ <tr>
363
+ <td>sidenav</td>
364
+
365
+ <td>
366
+ <code><a href="../injectables/SidenavComponentService.html" target="_self" >SidenavComponentService</a></code>
367
+ </td>
368
+
369
+ <td>
370
+ No
371
+ </td>
372
+
373
+ </tr>
374
+ <tr>
375
+ <td>elementRef</td>
376
+
377
+ <td>
378
+ <code>ElementRef</code>
379
+ </td>
380
+
381
+ <td>
382
+ No
383
+ </td>
384
+
385
+ </tr>
386
+ <tr>
387
+ <td>renderer</td>
388
+
389
+ <td>
390
+ <code>Renderer2</code>
391
+ </td>
392
+
393
+ <td>
394
+ No
395
+ </td>
396
+
397
+ </tr>
398
+ <tr>
399
+ <td>overlay</td>
400
+
401
+ <td>
402
+ <code>Overlay</code>
403
+ </td>
404
+
405
+ <td>
406
+ No
407
+ </td>
408
+
409
+ </tr>
410
+ <tr>
411
+ <td>viewContainerRef</td>
412
+
413
+ <td>
414
+ <code>ViewContainerRef</code>
415
+ </td>
416
+
417
+ <td>
418
+ No
419
+ </td>
420
+
421
+ </tr>
422
+ </tbody>
423
+ </table>
424
+ </div>
425
+ </td>
426
+ </tr>
427
+ </tbody>
428
+ </table>
429
+ </section>
430
+
431
+ <section data-compodoc="block-inputs">
432
+ <h3 id="inputs">Inputs</h3>
433
+ <table class="table table-sm table-bordered">
434
+ <tbody>
435
+ <tr>
436
+ <td class="col-md-4">
437
+ <a name="item"></a>
438
+ <b>item</b>
439
+ </td>
440
+ </tr>
441
+ <tr>
442
+ <td class="col-md-4">
443
+ <i>Type : </i> <code><a href="../interfaces/NavigationItem.html" target="_self" >NavigationItem</a></code>
444
+
445
+ </td>
446
+ </tr>
447
+ <tr>
448
+ <td class="col-md-4">
449
+ <i>Required : </i>&nbsp;<b>true</b>
450
+ </td>
451
+ </tr>
452
+ <tr>
453
+ <td class="col-md-2" colspan="2">
454
+ <div class="io-line">Defined in <a href="" data-line="108" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:108</a></div>
455
+ </td>
456
+ </tr>
457
+ </tbody>
458
+ </table>
459
+ <table class="table table-sm table-bordered">
460
+ <tbody>
461
+ <tr>
462
+ <td class="col-md-4">
463
+ <a name="level"></a>
464
+ <b>level</b>
465
+ </td>
466
+ </tr>
467
+ <tr>
468
+ <td class="col-md-4">
469
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
470
+
471
+ </td>
472
+ </tr>
473
+ <tr>
474
+ <td class="col-md-4">
475
+ <i>Default value : </i><code>0</code>
476
+ </td>
477
+ </tr>
478
+ <tr>
479
+ <td class="col-md-2" colspan="2">
480
+ <div class="io-line">Defined in <a href="" data-line="98" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:98</a></div>
481
+ </td>
482
+ </tr>
483
+ </tbody>
484
+ </table>
485
+ </section>
486
+
487
+ <section data-compodoc="block-properties">
488
+ <h3>HostBindings</h3> <table class="table table-sm table-bordered">
489
+ <tbody>
490
+ <tr>
491
+ <td class="col-md-4">
492
+ <a name="class.active"></a>
493
+ <span class="name">
494
+ <span ><b>class.active</b></span>
495
+ <a href="#class.active"><span class="icon ion-ios-link"></span></a>
496
+ </span>
497
+ </td>
498
+ </tr>
499
+ <tr>
500
+ <td class="col-md-4">
501
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
502
+
503
+ </td>
504
+ </tr>
505
+ <tr>
506
+ <td class="col-md-4">
507
+ <div class="io-line">Defined in <a href="" data-line="113" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:113</a></div>
508
+ </td>
509
+ </tr>
510
+
511
+
512
+ </tbody>
513
+ </table>
514
+ </section>
515
+
516
+
517
+ <section data-compodoc="block-methods">
518
+
519
+ <h3 id="methods">
520
+ Methods
521
+ </h3>
522
+ <table class="table table-sm table-bordered">
523
+ <tbody>
524
+ <tr>
525
+ <td class="col-md-4">
526
+ <a name="asNavigationItem"></a>
527
+ <span class="name">
528
+ <span class="modifier">Public</span>
529
+ <span ><b>asNavigationItem</b></span>
530
+ <a href="#asNavigationItem"><span class="icon ion-ios-link"></span></a>
531
+ </span>
532
+ </td>
533
+ </tr>
534
+ <tr>
535
+ <td class="col-md-4">
536
+ <span class="modifier-icon icon ion-ios-reset"></span>
537
+ <code>asNavigationItem(item: <a href="../undefineds/Navigation.html" target="_self">NavigationItem | NavigationDividerItem</a>)</code>
538
+ </td>
539
+ </tr>
540
+
541
+
542
+ <tr>
543
+ <td class="col-md-4">
544
+ <div class="io-line">Defined in <a href="" data-line="199"
545
+ class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:199</a></div>
546
+ </td>
547
+ </tr>
548
+
549
+
550
+ <tr>
551
+ <td class="col-md-4">
552
+
553
+ <div class="io-description">
554
+ <b>Parameters :</b>
555
+
556
+ <table class="params">
557
+ <thead>
558
+ <tr>
559
+ <td>Name</td>
560
+ <td>Type</td>
561
+ <td>Optional</td>
562
+ </tr>
563
+ </thead>
564
+ <tbody>
565
+ <tr>
566
+ <td>item</td>
567
+ <td>
568
+ <code><a href="../miscellaneous/typealiases.html#Navigation" target="_self" >NavigationItem | NavigationDividerItem</a></code>
569
+ </td>
570
+
571
+ <td>
572
+ No
573
+ </td>
574
+
575
+
576
+ </tr>
577
+ </tbody>
578
+ </table>
579
+ </div>
580
+ <div class="io-description">
581
+ <b>Returns : </b> <code><a href="../interfaces/NavigationItem.html" target="_self" >NavigationItem</a></code>
582
+
583
+ </div>
584
+ <div class="io-description">
585
+
586
+ </div>
587
+ </td>
588
+ </tr>
589
+ </tbody>
590
+ </table>
591
+ <table class="table table-sm table-bordered">
592
+ <tbody>
593
+ <tr>
594
+ <td class="col-md-4">
595
+ <a name="isNavigationDividerItem"></a>
596
+ <span class="name">
597
+ <span class="modifier">Public</span>
598
+ <span ><b>isNavigationDividerItem</b></span>
599
+ <a href="#isNavigationDividerItem"><span class="icon ion-ios-link"></span></a>
600
+ </span>
601
+ </td>
602
+ </tr>
603
+ <tr>
604
+ <td class="col-md-4">
605
+ <span class="modifier-icon icon ion-ios-reset"></span>
606
+ <code>isNavigationDividerItem(item: <a href="../undefineds/Navigation.html" target="_self">NavigationItem | NavigationDividerItem</a>)</code>
607
+ </td>
608
+ </tr>
609
+
610
+
611
+ <tr>
612
+ <td class="col-md-4">
613
+ <div class="io-line">Defined in <a href="" data-line="187"
614
+ class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:187</a></div>
615
+ </td>
616
+ </tr>
617
+
618
+
619
+ <tr>
620
+ <td class="col-md-4">
621
+
622
+ <div class="io-description">
623
+ <b>Parameters :</b>
624
+
625
+ <table class="params">
626
+ <thead>
627
+ <tr>
628
+ <td>Name</td>
629
+ <td>Type</td>
630
+ <td>Optional</td>
631
+ </tr>
632
+ </thead>
633
+ <tbody>
634
+ <tr>
635
+ <td>item</td>
636
+ <td>
637
+ <code><a href="../miscellaneous/typealiases.html#Navigation" target="_self" >NavigationItem | NavigationDividerItem</a></code>
638
+ </td>
639
+
640
+ <td>
641
+ No
642
+ </td>
643
+
644
+
645
+ </tr>
646
+ </tbody>
647
+ </table>
648
+ </div>
649
+ <div class="io-description">
650
+ <b>Returns : </b> <code><a href="../interfaces/NavigationDividerItem.html" target="_self" >NavigationDividerItem</a></code>
651
+
652
+ </div>
653
+ <div class="io-description">
654
+
655
+ </div>
656
+ </td>
657
+ </tr>
658
+ </tbody>
659
+ </table>
660
+ <table class="table table-sm table-bordered">
661
+ <tbody>
662
+ <tr>
663
+ <td class="col-md-4">
664
+ <a name="isNavigationItem"></a>
665
+ <span class="name">
666
+ <span class="modifier">Public</span>
667
+ <span ><b>isNavigationItem</b></span>
668
+ <a href="#isNavigationItem"><span class="icon ion-ios-link"></span></a>
669
+ </span>
670
+ </td>
671
+ </tr>
672
+ <tr>
673
+ <td class="col-md-4">
674
+ <span class="modifier-icon icon ion-ios-reset"></span>
675
+ <code>isNavigationItem(item: <a href="../undefineds/Navigation.html" target="_self">NavigationItem | NavigationDividerItem</a>)</code>
676
+ </td>
677
+ </tr>
678
+
679
+
680
+ <tr>
681
+ <td class="col-md-4">
682
+ <div class="io-line">Defined in <a href="" data-line="193"
683
+ class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:193</a></div>
684
+ </td>
685
+ </tr>
686
+
687
+
688
+ <tr>
689
+ <td class="col-md-4">
690
+
691
+ <div class="io-description">
692
+ <b>Parameters :</b>
693
+
694
+ <table class="params">
695
+ <thead>
696
+ <tr>
697
+ <td>Name</td>
698
+ <td>Type</td>
699
+ <td>Optional</td>
700
+ </tr>
701
+ </thead>
702
+ <tbody>
703
+ <tr>
704
+ <td>item</td>
705
+ <td>
706
+ <code><a href="../miscellaneous/typealiases.html#Navigation" target="_self" >NavigationItem | NavigationDividerItem</a></code>
707
+ </td>
708
+
709
+ <td>
710
+ No
711
+ </td>
712
+
713
+
714
+ </tr>
715
+ </tbody>
716
+ </table>
717
+ </div>
718
+ <div class="io-description">
719
+ <b>Returns : </b> <code><a href="../interfaces/NavigationItem.html" target="_self" >NavigationItem</a></code>
720
+
721
+ </div>
722
+ <div class="io-description">
723
+
724
+ </div>
725
+ </td>
726
+ </tr>
727
+ </tbody>
728
+ </table>
729
+ </section>
730
+ <section data-compodoc="block-properties">
731
+
732
+ <h3 id="inputs">
733
+ Properties
734
+ </h3>
735
+ <table class="table table-sm table-bordered">
736
+ <tbody>
737
+ <tr>
738
+ <td class="col-md-4">
739
+ <a name="active"></a>
740
+ <span class="name">
741
+ <span class="modifier">Public</span>
742
+ <span ><b>active</b></span>
743
+ <a href="#active"><span class="icon ion-ios-link"></span></a>
744
+ </span>
745
+ </td>
746
+ </tr>
747
+ <tr>
748
+ <td class="col-md-4">
749
+ <i>Default value : </i><code>signal(false)</code>
750
+ </td>
751
+ </tr>
752
+ <tr>
753
+ <td class="col-md-4">
754
+ <div class="io-line">Defined in <a href="" data-line="110" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:110</a></div>
755
+ </td>
756
+ </tr>
757
+
758
+
759
+ </tbody>
760
+ </table>
761
+ <table class="table table-sm table-bordered">
762
+ <tbody>
763
+ <tr>
764
+ <td class="col-md-4">
765
+ <a name="children"></a>
766
+ <span class="name">
767
+ <span class="modifier">Public</span>
768
+ <span ><b>children</b></span>
769
+ <a href="#children"><span class="icon ion-ios-link"></span></a>
770
+ </span>
771
+ </td>
772
+ </tr>
773
+ <tr>
774
+ <td class="col-md-4">
775
+ <i>Type : </i> <code><a href="../miscellaneous/typealiases.html#Navigation" target="_self" >Navigation | null</a></code>
776
+
777
+ </td>
778
+ </tr>
779
+ <tr>
780
+ <td class="col-md-4">
781
+ <i>Default value : </i><code>null</code>
782
+ </td>
783
+ </tr>
784
+ <tr>
785
+ <td class="col-md-4">
786
+ <div class="io-line">Defined in <a href="" data-line="102" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:102</a></div>
787
+ </td>
788
+ </tr>
789
+
790
+
791
+ </tbody>
792
+ </table>
793
+ <table class="table table-sm table-bordered">
794
+ <tbody>
795
+ <tr>
796
+ <td class="col-md-4">
797
+ <a name="routerLinkActive"></a>
798
+ <span class="name">
799
+ <span class="modifier"></span>
800
+ <span class="modifier">Public</span>
801
+ <span ><b>routerLinkActive</b></span>
802
+ <a href="#routerLinkActive"><span class="icon ion-ios-link"></span></a>
803
+ </span>
804
+ </td>
805
+ </tr>
806
+ <tr>
807
+ <td class="col-md-4">
808
+ <i>Type : </i> <code>RouterLinkActive</code>
809
+
810
+ </td>
811
+ </tr>
812
+ <tr>
813
+ <td class="col-md-4">
814
+ <b>Decorators : </b>
815
+ <br />
816
+ <code>
817
+ @ViewChild(RouterLinkActive, {static: true})<br />
818
+ </code>
819
+ </td>
820
+ </tr>
821
+ <tr>
822
+ <td class="col-md-4">
823
+ <div class="io-line">Defined in <a href="" data-line="105" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:105</a></div>
824
+ </td>
825
+ </tr>
826
+
827
+
828
+ </tbody>
829
+ </table>
830
+ <table class="table table-sm table-bordered">
831
+ <tbody>
832
+ <tr>
833
+ <td class="col-md-4">
834
+ <a name="sidenav"></a>
835
+ <span class="name">
836
+ <span class="modifier"></span>
837
+ <span class="modifier">Public</span>
838
+ <span class="modifier">Readonly</span>
839
+ <span ><b>sidenav</b></span>
840
+ <a href="#sidenav"><span class="icon ion-ios-link"></span></a>
841
+ </span>
842
+ </td>
843
+ </tr>
844
+ <tr>
845
+ <td class="col-md-4">
846
+ <i>Type : </i> <code><a href="../injectables/SidenavComponentService.html" target="_self" >SidenavComponentService</a></code>
847
+
848
+ </td>
849
+ </tr>
850
+ <tr>
851
+ <td class="col-md-4">
852
+ <b>Decorators : </b>
853
+ <br />
854
+ <code>
855
+ @Inject(SidenavComponentService)<br />
856
+ </code>
857
+ </td>
858
+ </tr>
859
+ <tr>
860
+ <td class="col-md-4">
861
+ <div class="io-line">Defined in <a href="" data-line="128" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:128</a></div>
862
+ </td>
863
+ </tr>
864
+
865
+
866
+ </tbody>
867
+ </table>
868
+ </section>
869
+
870
+ <section data-compodoc="block-accessors">
871
+ <h3 id="accessors">
872
+ Accessors
873
+ </h3>
874
+ <table class="table table-sm table-bordered">
875
+ <tbody>
876
+ <tr>
877
+ <td class="col-md-4">
878
+ <a name="isActive"></a>
879
+ <span class="name"><b>isActive</b><a href="#isActive"><span class="icon ion-ios-link"></span></a></span>
880
+ </td>
881
+ </tr>
882
+
883
+ <tr>
884
+ <td class="col-md-4">
885
+ <span class="accessor"><b>get</b><code>isActive()</code></span>
886
+ </td>
887
+ </tr>
888
+ <tr>
889
+ <td class="col-md-4">
890
+ <div class="io-line">Defined in <a href="" data-line="113" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:113</a></div>
891
+ </td>
892
+ </tr>
893
+
894
+ <tr>
895
+ <td class="col-md-4">
896
+ <span class="accessor"><b>set</b><code>isActive(value: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank">boolean</a>)</code></span>
897
+ </td>
898
+ </tr>
899
+ <tr>
900
+ <td class="col-md-4">
901
+ <div class="io-line">Defined in <a href="" data-line="117" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:117</a></div>
902
+ </td>
903
+ </tr>
904
+ <tr>
905
+ <td class="col-md-4">
906
+
907
+ <div class="io-description">
908
+ <b>Parameters :</b>
909
+ <table class="params">
910
+ <thead>
911
+ <tr>
912
+ <td>Name</td>
913
+ <td>Type</td>
914
+ <td>Optional</td>
915
+ </tr>
916
+ </thead>
917
+ <tbody>
918
+ <tr>
919
+ <td>value</td>
920
+
921
+ <td>
922
+ <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
923
+ </td>
924
+
925
+ <td>
926
+ No
927
+ </td>
928
+
929
+ </tr>
930
+ </tbody>
931
+ </table>
932
+ </div>
933
+ <div>
934
+ </div>
935
+ <div class="io-description">
936
+ <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
937
+
938
+ </div>
939
+ </td>
940
+ </tr>
941
+ </tbody>
942
+ </table>
943
+ </section>
944
+ </div>
945
+
946
+
947
+ <div class="tab-pane fade tab-source-code" id="source">
948
+ <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
949
+ ChangeDetectionStrategy,
950
+ Component,
951
+ ElementRef,
952
+ forwardRef,
953
+ HostBinding,
954
+ Inject,
955
+ Input,
956
+ OnChanges,
957
+ OnDestroy,
958
+ Renderer2,
959
+ signal,
960
+ SimpleChanges,
961
+ ViewChild,
962
+ ViewContainerRef,
963
+ ViewEncapsulation,
964
+ } from &#x27;@angular/core&#x27;;
965
+ import { Required } from &#x27;@rxap/utilities&#x27;;
966
+ import {
967
+ animate,
968
+ style,
969
+ transition,
970
+ trigger,
971
+ } from &#x27;@angular/animations&#x27;;
972
+ import {
973
+ NavigationEnd,
974
+ Router,
975
+ RouterLink,
976
+ RouterLinkActive,
977
+ } from &#x27;@angular/router&#x27;;
978
+ import {
979
+ debounceTime,
980
+ Subscription,
981
+ } from &#x27;rxjs&#x27;;
982
+ import {
983
+ filter,
984
+ startWith,
985
+ tap,
986
+ } from &#x27;rxjs/operators&#x27;;
987
+ import { Overlay } from &#x27;@angular/cdk/overlay&#x27;;
988
+ import { SidenavComponentService } from &#x27;../../sidenav/sidenav.component.service&#x27;;
989
+ import { NavigationComponent } from &#x27;../navigation.component&#x27;;
990
+ import { MatDividerModule } from &#x27;@angular/material/divider&#x27;;
991
+ import { IconDirective } from &#x27;@rxap/material-directives/icon&#x27;;
992
+ import { MatIconModule } from &#x27;@angular/material/icon&#x27;;
993
+ import { MatRippleModule } from &#x27;@angular/material/core&#x27;;
994
+ import {
995
+ NgClass,
996
+ NgIf,
997
+ } from &#x27;@angular/common&#x27;;
998
+ import {
999
+ Navigation,
1000
+ NavigationDividerItem,
1001
+ NavigationItem,
1002
+ } from &#x27;../navigation-item&#x27;;
1003
+
1004
+ @Component({
1005
+ // eslint-disable-next-line @angular-eslint/component-selector
1006
+ selector: &#x27;li[rxap-navigation-item]&#x27;,
1007
+ templateUrl: &#x27;./navigation-item.component.html&#x27;,
1008
+ styleUrls: [ &#x27;./navigation-item.component.scss&#x27; ],
1009
+ changeDetection: ChangeDetectionStrategy.OnPush,
1010
+ encapsulation: ViewEncapsulation.None,
1011
+ animations: [
1012
+ trigger(&#x27;sub-nav&#x27;, [
1013
+ transition(&#x27;:enter&#x27;, [
1014
+ style({
1015
+ display: &#x27;block&#x27;,
1016
+ height: &#x27;0&#x27;,
1017
+ overflow: &#x27;hidden&#x27;,
1018
+ }),
1019
+ animate(150, style({ height: &#x27;*&#x27; })),
1020
+ ]),
1021
+ transition(&#x27;:leave&#x27;, [
1022
+ style({ overflow: &#x27;hidden&#x27; }),
1023
+ animate(300, style({ height: &#x27;0&#x27; })),
1024
+ style({ display: &#x27;none&#x27; }),
1025
+ ]),
1026
+ ]),
1027
+ ],
1028
+ standalone: true,
1029
+ imports: [
1030
+ RouterLinkActive,
1031
+ RouterLink,
1032
+ NgIf,
1033
+ MatRippleModule,
1034
+ MatIconModule,
1035
+ IconDirective,
1036
+ MatDividerModule,
1037
+ forwardRef(() &#x3D;&gt; NavigationComponent),
1038
+ NgClass,
1039
+ ],
1040
+ })
1041
+ export class NavigationItemComponent
1042
+ implements OnChanges, OnDestroy {
1043
+
1044
+ @Input()
1045
+ public level &#x3D; 0;
1046
+
1047
+ private _isActive &#x3D; false;
1048
+
1049
+ public children: Navigation | null &#x3D; null;
1050
+
1051
+ @ViewChild(RouterLinkActive, { static: true })
1052
+ public routerLinkActive!: RouterLinkActive;
1053
+
1054
+ @Input({ required: true })
1055
+ public item!: NavigationItem;
1056
+
1057
+ public active &#x3D; signal(false);
1058
+
1059
+ @HostBinding(&#x27;class.active&#x27;)
1060
+ get isActive(): boolean {
1061
+ return this._isActive;
1062
+ }
1063
+
1064
+ set isActive(value: boolean) {
1065
+ this._isActive &#x3D; value;
1066
+ this.active.set(value);
1067
+ }
1068
+
1069
+ private readonly _subscription &#x3D; new Subscription();
1070
+
1071
+ constructor(
1072
+ @Inject(Router)
1073
+ private readonly router: Router,
1074
+ @Inject(SidenavComponentService)
1075
+ public readonly sidenav: SidenavComponentService,
1076
+ @Inject(ElementRef)
1077
+ private readonly elementRef: ElementRef,
1078
+ @Inject(Renderer2)
1079
+ private readonly renderer: Renderer2,
1080
+ @Inject(Overlay)
1081
+ private readonly overlay: Overlay,
1082
+ @Inject(ViewContainerRef)
1083
+ private readonly viewContainerRef: ViewContainerRef,
1084
+ ) {
1085
+ }
1086
+
1087
+ public ngOnChanges(changes: SimpleChanges) {
1088
+ if (changes[&#x27;item&#x27;]) {
1089
+ const item: NavigationItem &#x3D; changes[&#x27;item&#x27;].currentValue;
1090
+ this.children &#x3D;
1091
+ item.children &amp;&amp; item.children.length ? item.children : null;
1092
+ }
1093
+ }
1094
+
1095
+ public ngAfterViewInit() {
1096
+ this._subscription.add(
1097
+ this.router.events
1098
+ .pipe(
1099
+ filter((event) &#x3D;&gt; event instanceof NavigationEnd),
1100
+ debounceTime(100),
1101
+ startWith(true),
1102
+ tap(() &#x3D;&gt; {
1103
+ let isActive &#x3D; true;
1104
+ const urlParts &#x3D; this.router.url.split(&#x27;/&#x27;);
1105
+ if (urlParts[0] &#x3D;&#x3D;&#x3D; &#x27;&#x27;) {
1106
+ urlParts[0] &#x3D; &#x27;/&#x27;;
1107
+ }
1108
+ for (let i &#x3D; 0; i &lt; this.item.routerLink.length; i++) {
1109
+ if (urlParts[i] !&#x3D;&#x3D; this.item.routerLink[i]) {
1110
+ isActive &#x3D; false;
1111
+ break;
1112
+ }
1113
+ }
1114
+ this.isActive &#x3D; isActive;
1115
+ if (isActive) {
1116
+ this.renderer.addClass(this.elementRef.nativeElement, &#x27;active&#x27;);
1117
+ } else {
1118
+ this.renderer.removeClass(this.elementRef.nativeElement, &#x27;active&#x27;);
1119
+ }
1120
+ }),
1121
+ )
1122
+ .subscribe(),
1123
+ );
1124
+ }
1125
+
1126
+ public ngOnDestroy() {
1127
+ this._subscription?.unsubscribe();
1128
+ }
1129
+
1130
+ // region type save item property
1131
+
1132
+ // required to check the type of the item property in the ngFor loop
1133
+
1134
+ public isNavigationDividerItem(
1135
+ item: NavigationItem | NavigationDividerItem,
1136
+ ): item is NavigationDividerItem {
1137
+ return (item as any)[&#x27;divider&#x27;];
1138
+ }
1139
+
1140
+ public isNavigationItem(
1141
+ item: NavigationItem | NavigationDividerItem,
1142
+ ): item is NavigationItem {
1143
+ return !this.isNavigationDividerItem(item);
1144
+ }
1145
+
1146
+ public asNavigationItem(
1147
+ item: NavigationItem | NavigationDividerItem,
1148
+ ): NavigationItem {
1149
+ if (!this.isNavigationItem(item)) {
1150
+ throw new Error(&#x27;The item is not a NavigationItem&#x27;);
1151
+ }
1152
+ return item;
1153
+ }
1154
+
1155
+ // endregion
1156
+ }
1157
+ </code></pre>
1158
+ </div>
1159
+
1160
+ <div class="tab-pane fade " id="templateData">
1161
+ <pre class="line-numbers"><code class="language-html">&lt;div [ngClass]&#x3D;&quot;{
1162
+ &#x27;border-l-4 text-accent-400 border-accent-600&#x27;: active(),
1163
+ }&quot;&gt;
1164
+ &lt;a [routerLink]&#x3D;&quot;item.routerLink&quot;
1165
+ class&#x3D;&quot;h-12 pl-4 pr-5 flex flex-row justify-between items-center gap-x-4&quot;
1166
+ matRipple
1167
+ routerLinkActive
1168
+
1169
+ &gt;
1170
+ &lt;span
1171
+ [ngClass]&#x3D;&quot;{
1172
+ &#x27;pl-0&#x27;: level &#x3D;&#x3D;&#x3D; 0,
1173
+ &#x27;pl-4&#x27;: level &#x3D;&#x3D;&#x3D; 1,
1174
+ &#x27;pl-8&#x27;: level &#x3D;&#x3D;&#x3D; 2,
1175
+ &#x27;pl-12&#x27;: level &#x3D;&#x3D;&#x3D; 3
1176
+ }&quot;
1177
+ class&#x3D;&quot;grow whitespace-nowrap&quot;
1178
+ &gt;
1179
+ {{ item.label }}
1180
+ &lt;/span&gt;
1181
+ &lt;mat-icon *ngIf&#x3D;&quot;item.icon&quot; [rxapIcon]&#x3D;&quot;item.icon&quot;&gt;&lt;/mat-icon&gt;
1182
+ &lt;/a&gt;
1183
+
1184
+ &lt;ng-container *ngIf&#x3D;&quot;item.children?.length &amp;&amp; active()&quot;&gt;
1185
+
1186
+ &lt;mat-divider&gt;&lt;/mat-divider&gt;
1187
+
1188
+ &lt;ul [@sub-nav]
1189
+ [items]&#x3D;&quot;children ?? []&quot;
1190
+ [level]&#x3D;&quot;level + 1&quot;
1191
+ rxap-navigation
1192
+ &gt;
1193
+ &lt;/ul&gt;
1194
+
1195
+ &lt;mat-divider&gt;&lt;/mat-divider&gt;
1196
+
1197
+ &lt;/ng-container&gt;
1198
+ &lt;/div&gt;
1199
+ </code></pre>
1200
+ </div>
1201
+
1202
+ <div class="tab-pane fade " id="styleData">
1203
+ <p class="comment">
1204
+ <code>./navigation-item.component.scss</code>
1205
+ </p>
1206
+ <pre class="line-numbers"><code class="language-scss"></code></pre>
1207
+ </div>
1208
+
1209
+ <div class="tab-pane fade " id="tree">
1210
+ <div id="tree-container"></div>
1211
+ <div class="tree-legend">
1212
+ <div class="title">
1213
+ <b>Legend</b>
1214
+ </div>
1215
+ <div>
1216
+ <div class="color htmlelement"></div><span>Html element</span>
1217
+ </div>
1218
+ <div>
1219
+ <div class="color component"></div><span>Component</span>
1220
+ </div>
1221
+ <div>
1222
+ <div class="color directive"></div><span>Html element with directive</span>
1223
+ </div>
1224
+ </div>
1225
+ </div>
1226
+
1227
+
1228
+ </div>
1229
+
1230
+ <script src="../js/libs/vis.min.js"></script>
1231
+ <script src="../js/libs/htmlparser.js"></script>
1232
+ <script src="../js/libs/deep-iterator.js"></script>
1233
+ <script>
1234
+ var COMPONENT_TEMPLATE = '<div><div [ngClass]="{ \'border-l-4 text-accent-400 border-accent-600\': active(), }"> <a [routerLink]="item.routerLink" class="h-12 pl-4 pr-5 flex flex-row justify-between items-center gap-x-4" matRipple routerLinkActive > <span [ngClass]="{ \'pl-0\': level === 0, \'pl-4\': level === 1, \'pl-8\': level === 2, \'pl-12\': level === 3 }" class="grow whitespace-nowrap" > {{ item.label }} </span> <mat-icon *ngIf="item.icon" [rxapIcon]="item.icon"></mat-icon> </a> <ng-container *ngIf="item.children?.length && active()"> <mat-divider></mat-divider> <ul [@sub-nav] [items]="children ?? []" [level]="level + 1" rxap-navigation > </ul> <mat-divider></mat-divider> </ng-container></div></div>'
1235
+ var COMPONENTS = [{'name': 'AppsButtonComponent', 'selector': 'rxap-apps-button'},{'name': 'FooterComponent', 'selector': 'rxap-footer'},{'name': 'HeaderComponent', 'selector': 'rxap-header'},{'name': 'LanguageSelectorComponent', 'selector': 'rxap-language-selector'},{'name': 'LayoutComponent', 'selector': 'rxap-layout'},{'name': 'NavigationComponent', 'selector': 'ul[rxap-navigation]'},{'name': 'NavigationItemComponent', 'selector': 'li[rxap-navigation-item]'},{'name': 'NavigationProgressBarComponent', 'selector': 'rxap-navigation-progress-bar'},{'name': 'ResetButtonComponent', 'selector': 'rxap-reset-button'},{'name': 'SettingsButtonComponent', 'selector': 'rxap-settings-button'},{'name': 'SidenavComponent', 'selector': 'rxap-sidenav'},{'name': 'SidenavToggleButtonComponent', 'selector': 'rxap-sidenav-toggle-button'},{'name': 'SignOutComponent', 'selector': 'rxap-sign-out'},{'name': 'ToggleWindowSidenavButtonComponent', 'selector': 'rxap-toggle-window-sidenav-button'},{'name': 'UserProfileIconComponent', 'selector': 'rxap-user-profile-icon'},{'name': 'VersionComponent', 'selector': 'rxap-version'},{'name': 'WindowContainerSidenavComponent', 'selector': 'rxap-window-container-sidenav'}];
1236
+ var DIRECTIVES = [{'name': 'FooterDirective', 'selector': '[rxapFooter]'},{'name': 'SidenavFooterDirective', 'selector': '[rxapSidenavFooter]'},{'name': 'SidenavHeaderDirective', 'selector': '[rxapSidenavHeader]'}];
1237
+ var ACTUAL_COMPONENT = {'name': 'NavigationItemComponent'};
1238
+ </script>
1239
+ <script src="../js/tree.js"></script>
1240
+
1241
+
1242
+
1243
+
1244
+
1245
+
1246
+
1247
+
1248
+
1249
+
1250
+
1251
+
1252
+
1253
+
1254
+
1255
+
1256
+
1257
+ </div><div class="search-results">
1258
+ <div class="has-results">
1259
+ <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
1260
+ <ul class="search-results-list"></ul>
1261
+ </div>
1262
+ <div class="no-results">
1263
+ <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
1264
+ </div>
1265
+ </div>
1266
+ </div>
1267
+ <!-- END CONTENT -->
1268
+ </div>
1269
+ </div>
1270
+
1271
+ <label class="dark-mode-switch">
1272
+ <input type="checkbox">
1273
+ <span class="slider">
1274
+ <svg class="slider-icon" viewBox="0 0 24 24" fill="none" height="20" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg">
1275
+ <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
1276
+ </svg>
1277
+ </span>
1278
+ </label>
1279
+
1280
+ <script>
1281
+ var COMPODOC_CURRENT_PAGE_DEPTH = 1;
1282
+ var COMPODOC_CURRENT_PAGE_CONTEXT = 'component';
1283
+ var COMPODOC_CURRENT_PAGE_URL = 'NavigationItemComponent.html';
1284
+ var MAX_SEARCH_RESULTS = 15;
1285
+ </script>
1286
+
1287
+ <script>
1288
+ $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
1289
+ checkToggle(darkModeState);
1290
+ if ($darkModeToggleSwitchers.length > 0) {
1291
+ for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
1292
+ $darkModeToggleSwitchers[i].addEventListener('change', function (event) {
1293
+ darkModeState = !darkModeState;
1294
+ toggleDarkMode(darkModeState);
1295
+ });
1296
+ }
1297
+ }
1298
+ </script>
1299
+
1300
+ <script src="../js/libs/custom-elements.min.js"></script>
1301
+ <script src="../js/libs/lit-html.js"></script>
1302
+
1303
+ <script src="../js/menu-wc.js" defer></script>
1304
+ <script nomodule src="../js/menu-wc_es5.js" defer></script>
1305
+
1306
+ <script src="../js/libs/bootstrap-native.js"></script>
1307
+
1308
+ <script src="../js/libs/es6-shim.min.js"></script>
1309
+ <script src="../js/libs/EventDispatcher.js"></script>
1310
+ <script src="../js/libs/promise.min.js"></script>
1311
+ <script src="../js/libs/zepto.min.js"></script>
1312
+
1313
+ <script src="../js/compodoc.js"></script>
1314
+
1315
+ <script src="../js/tabs.js"></script>
1316
+ <script src="../js/menu.js"></script>
1317
+ <script src="../js/libs/clipboard.min.js"></script>
1318
+ <script src="../js/libs/prism.js"></script>
1319
+ <script src="../js/sourceCode.js"></script>
1320
+ <script src="../js/search/search.js"></script>
1321
+ <script src="../js/search/lunr.min.js"></script>
1322
+ <script src="../js/search/search-lunr.js"></script>
1323
+ <script src="../js/search/search_index.js"></script>
1324
+ <script src="../js/lazy-load-graphs.js"></script>
1325
+
1326
+
1327
+ </body>
1328
+ </html>