@rxap/layout 18.0.3-dev.0 → 18.1.0-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 (210) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +280 -1
  3. package/compodoc/changelog.html +13 -0
  4. package/compodoc/components/AppsButtonComponent.html +185 -153
  5. package/compodoc/components/BaseLayoutComponent.html +351 -0
  6. package/compodoc/components/DefaultHeaderComponent.html +545 -0
  7. package/compodoc/components/FooterComponent.html +58 -79
  8. package/compodoc/components/HeaderComponent.html +49 -294
  9. package/compodoc/components/LanguageSelectorComponent.html +6 -54
  10. package/compodoc/components/LayoutComponent.html +69 -464
  11. package/compodoc/components/MinimalLayoutComponent.html +349 -0
  12. package/compodoc/components/NavigationComponent.html +116 -312
  13. package/compodoc/components/NavigationItemComponent.html +130 -361
  14. package/compodoc/components/NavigationProgressBarComponent.html +41 -107
  15. package/compodoc/components/ReleaseInfoComponent.html +536 -0
  16. package/compodoc/components/SettingsButtonComponent.html +186 -225
  17. package/compodoc/components/SidenavComponent.html +566 -142
  18. package/compodoc/components/SidenavToggleButtonComponent.html +71 -91
  19. package/compodoc/components/SignOutComponent.html +7 -60
  20. package/compodoc/components/UserProfileIconComponent.html +97 -161
  21. package/compodoc/dependencies.html +11 -25
  22. package/compodoc/directives/FooterDirective-1.html +293 -0
  23. package/compodoc/directives/FooterDirective.html +8 -86
  24. package/compodoc/directives/HeaderDirective.html +293 -0
  25. package/compodoc/index.html +183 -1
  26. package/compodoc/injectables/ExternalAppsService.html +1274 -0
  27. package/compodoc/injectables/FooterService.html +573 -0
  28. package/compodoc/injectables/HeaderService.html +576 -0
  29. package/compodoc/injectables/LayoutService.html +899 -0
  30. package/compodoc/injectables/LogoService.html +411 -0
  31. package/compodoc/injectables/NavigationService.html +46 -57
  32. package/compodoc/interfaces/ReleaseInfoModule.html +385 -0
  33. package/compodoc/interfaces/SettingsMenuItem.html +385 -0
  34. package/compodoc/js/menu-wc.js +24 -40
  35. package/compodoc/js/menu-wc_es5.js +1 -1
  36. package/compodoc/js/search/search_index.js +2 -2
  37. package/compodoc/miscellaneous/functions.html +544 -1
  38. package/compodoc/miscellaneous/typealiases.html +40 -2
  39. package/compodoc/miscellaneous/variables.html +100 -9
  40. package/compodoc/overview.html +2 -10
  41. package/compodoc/properties.html +1 -1
  42. package/docs/assets/highlight.css +42 -0
  43. package/docs/assets/navigation.js +1 -1
  44. package/docs/assets/search.js +1 -1
  45. package/docs/classes/AppsButtonComponent.html +8 -8
  46. package/docs/classes/BaseLayoutComponent.html +2 -0
  47. package/docs/classes/DefaultHeaderComponent.html +7 -0
  48. package/docs/classes/ExternalAppsService.html +18 -0
  49. package/docs/classes/FooterComponent.html +5 -3
  50. package/docs/classes/FooterDirective.html +2 -2
  51. package/docs/classes/FooterService.html +14 -0
  52. package/docs/classes/HeaderComponent.html +6 -8
  53. package/docs/classes/HeaderDirective.html +8 -0
  54. package/docs/classes/HeaderService.html +14 -0
  55. package/docs/classes/LayoutComponent.html +4 -12
  56. package/docs/classes/LayoutService.html +20 -0
  57. package/docs/classes/LogoService.html +7 -0
  58. package/docs/classes/MinimalLayoutComponent.html +2 -0
  59. package/docs/classes/NavigationComponent.html +7 -8
  60. package/docs/classes/NavigationItemComponent.html +6 -9
  61. package/docs/classes/NavigationProgressBarComponent.html +3 -3
  62. package/docs/classes/NavigationService.html +3 -3
  63. package/docs/classes/ReleaseInfoComponent.html +6 -0
  64. package/docs/classes/SettingsButtonComponent.html +6 -11
  65. package/docs/classes/SidenavComponent.html +17 -5
  66. package/docs/classes/SidenavFooterDirective.html +2 -2
  67. package/docs/classes/SidenavHeaderDirective.html +2 -2
  68. package/docs/classes/SidenavToggleButtonComponent.html +4 -3
  69. package/docs/classes/UserProfileIconComponent.html +5 -4
  70. package/docs/documentation.json +8546 -8346
  71. package/docs/functions/IsNavigationDividerItem.html +1 -1
  72. package/docs/functions/IsNavigationInsertItem.html +1 -1
  73. package/docs/functions/IsNavigationItem.html +1 -1
  74. package/docs/functions/provideLayout.html +1 -0
  75. package/docs/functions/widthDefaultHeaderComponent.html +1 -0
  76. package/docs/functions/withFooterComponents.html +1 -0
  77. package/docs/functions/withHeaderComponents.html +1 -0
  78. package/docs/functions/withNavigationConfig.html +1 -0
  79. package/docs/functions/withNavigationInserts.html +1 -0
  80. package/docs/functions/withReleaseInfoModules.html +1 -0
  81. package/docs/functions/withSettingsMenuItems.html +1 -0
  82. package/docs/index.html +74 -2
  83. package/docs/interfaces/NavigationDividerItem.html +2 -2
  84. package/docs/interfaces/NavigationInsertItem.html +2 -2
  85. package/docs/interfaces/NavigationItem.html +2 -2
  86. package/docs/interfaces/NavigationStatus.html +2 -2
  87. package/docs/interfaces/ReleaseInfoModule.html +4 -0
  88. package/docs/interfaces/SettingsMenuItem.html +4 -0
  89. package/docs/modules.html +29 -17
  90. package/docs/types/ExternalApps.html +1 -0
  91. package/docs/types/ExtractUsernameFromProfileFn.html +1 -1
  92. package/docs/types/Navigation.html +1 -1
  93. package/docs/types/NavigationWithInserts.html +1 -1
  94. package/docs/types/SettingsMenuItemComponent.html +1 -0
  95. package/docs/variables/EXTRACT_USERNAME_FROM_PROFILE.html +1 -1
  96. package/docs/variables/RXAP_EXTERNAL_APP_FILTER.html +1 -0
  97. package/docs/variables/RXAP_FOOTER_COMPONENT.html +1 -1
  98. package/docs/variables/RXAP_HEADER_COMPONENT.html +1 -1
  99. package/docs/variables/RXAP_LAYOUT_APPS_GRID.html +1 -1
  100. package/docs/variables/RXAP_LOGO_CONFIG.html +1 -1
  101. package/docs/variables/RXAP_NAVIGATION_CONFIG.html +1 -1
  102. package/docs/variables/RXAP_NAVIGATION_CONFIG_INSERTS.html +1 -1
  103. package/docs/variables/RXAP_RELEASE_INFO_MODULE.html +1 -0
  104. package/docs/variables/RXAP_SETTINGS_MENU_ITEM.html +1 -0
  105. package/docs/variables/RXAP_SETTINGS_MENU_ITEM_COMPONENT.html +1 -0
  106. package/esm2022/index.mjs +35 -40
  107. package/esm2022/lib/base-layout/base-layout.component.mjs +16 -0
  108. package/esm2022/lib/default-header/apps-button/apps-button.component.mjs +38 -0
  109. package/esm2022/lib/default-header/default-header.component.mjs +32 -0
  110. package/esm2022/lib/default-header/settings-button/settings-button.component.mjs +73 -0
  111. package/esm2022/lib/default-header/sidenav-toggle-button/sidenav-toggle-button.component.mjs +24 -0
  112. package/esm2022/lib/default-header/user-profile-icon/user-profile-icon.component.mjs +35 -0
  113. package/esm2022/lib/external-apps.service.mjs +97 -0
  114. package/esm2022/lib/footer/footer.component.mjs +13 -13
  115. package/esm2022/lib/footer/footer.directive.mjs +30 -0
  116. package/esm2022/lib/footer.service.mjs +58 -0
  117. package/esm2022/lib/header/header.component.mjs +17 -65
  118. package/esm2022/lib/header/header.directive.mjs +30 -0
  119. package/esm2022/lib/header.service.mjs +60 -0
  120. package/esm2022/lib/layout/layout.component.mjs +33 -47
  121. package/esm2022/lib/layout.service.mjs +93 -0
  122. package/esm2022/lib/logo.service.mjs +23 -0
  123. package/esm2022/lib/minimal-layout/minimal-layout.component.mjs +14 -0
  124. package/esm2022/lib/navigation/navigation-item/navigation-item.component.mjs +30 -64
  125. package/esm2022/lib/navigation/navigation.component.mjs +22 -48
  126. package/esm2022/lib/navigation-progress-bar/navigation-progress-bar.component.mjs +23 -0
  127. package/esm2022/lib/navigation.service.mjs +141 -0
  128. package/esm2022/lib/provide.mjs +73 -0
  129. package/esm2022/lib/release-info/release-info.component.mjs +28 -0
  130. package/esm2022/lib/sidenav/sidenav.component.mjs +50 -33
  131. package/esm2022/lib/tokens.mjs +9 -1
  132. package/esm2022/lib/types.mjs +1 -1
  133. package/fesm2022/rxap-layout.mjs +845 -833
  134. package/fesm2022/rxap-layout.mjs.map +1 -1
  135. package/index.d.ts +18 -19
  136. package/lib/base-layout/base-layout.component.d.ts +5 -0
  137. package/lib/default-header/apps-button/apps-button.component.d.ts +15 -0
  138. package/lib/default-header/default-header.component.d.ts +11 -0
  139. package/lib/{header → default-header}/settings-button/settings-button.component.d.ts +6 -14
  140. package/lib/{header → default-header}/sidenav-toggle-button/sidenav-toggle-button.component.d.ts +3 -5
  141. package/lib/default-header/user-profile-icon/user-profile-icon.component.d.ts +10 -0
  142. package/lib/external-apps.service.d.ts +25 -0
  143. package/lib/footer/footer.component.d.ts +3 -3
  144. package/lib/{footer.directive.d.ts → footer/footer.directive.d.ts} +2 -4
  145. package/lib/footer.service.d.ts +32 -0
  146. package/lib/header/header.component.d.ts +6 -12
  147. package/lib/header/header.directive.d.ts +12 -0
  148. package/lib/header.service.d.ts +34 -0
  149. package/lib/layout/layout.component.d.ts +4 -17
  150. package/lib/layout.service.d.ts +26 -0
  151. package/lib/logo.service.d.ts +10 -0
  152. package/lib/minimal-layout/minimal-layout.component.d.ts +5 -0
  153. package/lib/navigation/navigation-item/navigation-item.component.d.ts +10 -18
  154. package/lib/navigation/navigation.component.d.ts +10 -15
  155. package/lib/{header/navigation-progress-bar → navigation-progress-bar}/navigation-progress-bar.component.d.ts +1 -3
  156. package/lib/{navigation/navigation.service.d.ts → navigation.service.d.ts} +4 -5
  157. package/lib/provide.d.ts +12 -0
  158. package/lib/release-info/release-info.component.d.ts +9 -0
  159. package/lib/sidenav/sidenav.component.d.ts +18 -6
  160. package/lib/tokens.d.ts +11 -3
  161. package/lib/types.d.ts +15 -4
  162. package/package.json +32 -66
  163. package/theme.css +1 -1
  164. package/docs/classes/AppUrlService.html +0 -13
  165. package/docs/classes/AuthenticationServiceMock.html +0 -3
  166. package/docs/classes/LanguageSelectorComponent.html +0 -3
  167. package/docs/classes/LayoutComponentService.html +0 -15
  168. package/docs/classes/ReplaceRouterPathsPipe.html +0 -4
  169. package/docs/classes/ReplaceRouterPathsService.html +0 -3
  170. package/docs/classes/ResetButtonComponent.html +0 -3
  171. package/docs/classes/SidenavComponentService.html +0 -5
  172. package/docs/classes/SignOutComponent.html +0 -4
  173. package/docs/classes/ToggleWindowSidenavButtonComponent.html +0 -5
  174. package/docs/classes/VersionComponent.html +0 -7
  175. package/docs/classes/WindowContainerSidenavComponent.html +0 -10
  176. package/docs/interfaces/ExternalApps.html +0 -8
  177. package/docs/interfaces/LogoConfig.html +0 -4
  178. package/esm2022/lib/app-url.service.mjs +0 -78
  179. package/esm2022/lib/authentication.service.mock.mjs +0 -13
  180. package/esm2022/lib/footer.directive.mjs +0 -40
  181. package/esm2022/lib/header/apps-button/apps-button.component.mjs +0 -46
  182. package/esm2022/lib/header/language-selector/language-selector.component.mjs +0 -35
  183. package/esm2022/lib/header/navigation-progress-bar/navigation-progress-bar.component.mjs +0 -30
  184. package/esm2022/lib/header/reset-button/reset-button.component.mjs +0 -23
  185. package/esm2022/lib/header/settings-button/settings-button.component.mjs +0 -87
  186. package/esm2022/lib/header/sidenav-toggle-button/sidenav-toggle-button.component.mjs +0 -26
  187. package/esm2022/lib/header/sign-out/sign-out.component.mjs +0 -23
  188. package/esm2022/lib/header/user-profile-icon/user-profile-icon.component.mjs +0 -45
  189. package/esm2022/lib/layout/layout.component.service.mjs +0 -77
  190. package/esm2022/lib/navigation/navigation.service.mjs +0 -145
  191. package/esm2022/lib/navigation/replace-router-paths.pipe.mjs +0 -22
  192. package/esm2022/lib/navigation/replace-router-paths.service.mjs +0 -15
  193. package/esm2022/lib/sidenav/sidenav.component.service.mjs +0 -22
  194. package/esm2022/lib/sidenav/version/version.component.mjs +0 -28
  195. package/esm2022/lib/toggle-window-sidenav-button/toggle-window-sidenav-button.component.mjs +0 -30
  196. package/esm2022/lib/window-container-sidenav/window-container-sidenav.component.mjs +0 -54
  197. package/lib/app-url.service.d.ts +0 -29
  198. package/lib/authentication.service.mock.d.ts +0 -6
  199. package/lib/header/apps-button/apps-button.component.d.ts +0 -16
  200. package/lib/header/language-selector/language-selector.component.d.ts +0 -8
  201. package/lib/header/reset-button/reset-button.component.d.ts +0 -8
  202. package/lib/header/sign-out/sign-out.component.d.ts +0 -9
  203. package/lib/header/user-profile-icon/user-profile-icon.component.d.ts +0 -15
  204. package/lib/layout/layout.component.service.d.ts +0 -25
  205. package/lib/navigation/replace-router-paths.pipe.d.ts +0 -11
  206. package/lib/navigation/replace-router-paths.service.d.ts +0 -7
  207. package/lib/sidenav/sidenav.component.service.d.ts +0 -11
  208. package/lib/sidenav/version/version.component.d.ts +0 -14
  209. package/lib/toggle-window-sidenav-button/toggle-window-sidenav-button.component.d.ts +0 -9
  210. package/lib/window-container-sidenav/window-container-sidenav.component.d.ts +0 -17
package/compodoc/directives/HeaderDirective.html ADDED
@@ -0,0 +1,293 @@
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 directive">
83
+ <div class="content-data">
84
+
85
+
86
+
87
+
88
+
89
+
90
+
91
+ <ol class="breadcrumb">
92
+ <li class="breadcrumb-item">Directives</li>
93
+ <li class="breadcrumb-item" >HeaderDirective</li>
94
+ </ol>
95
+
96
+ <ul class="nav nav-tabs" role="tablist">
97
+ <li class="nav-item">
98
+ <a href="#info"
99
+ class="nav-link"
100
+ class="nav-link active"
101
+ role="tab" id="info-tab" data-bs-toggle="tab" data-link="info">Info</a>
102
+ </li>
103
+ <li class="nav-item">
104
+ <a href="#source"
105
+ class="nav-link"
106
+
107
+ role="tab" id="source-tab" data-bs-toggle="tab" data-link="source">Source</a>
108
+ </li>
109
+ </ul>
110
+
111
+ <div class="tab-content">
112
+ <div class="tab-pane fade active in" id="info">
113
+ <p class="comment">
114
+ <h3>File</h3>
115
+ </p>
116
+ <p class="comment">
117
+ <code>src/lib/header/header.directive.ts</code>
118
+ </p>
119
+
120
+
121
+
122
+
123
+ <p class="comment">
124
+ <h3>Implements</h3>
125
+ </p>
126
+ <p class="comment">
127
+ <code>OnInit</code>
128
+ <code>OnDestroy</code>
129
+ </p>
130
+
131
+
132
+ <section data-compodoc="block-metadata">
133
+ <h3>Metadata</h3>
134
+ <table class="table table-sm table-hover metadata">
135
+ <tbody>
136
+
137
+ <tr>
138
+ <td class="col-md-3">Selector</td>
139
+ <td class="col-md-9"><code>[rxapHeader]</code></td>
140
+ </tr>
141
+
142
+ <tr>
143
+ <td class="col-md-3">Standalone</td>
144
+ <td class="col-md-9"><code>true</code></td>
145
+ </tr>
146
+
147
+
148
+
149
+ </tbody>
150
+ </table>
151
+ </section>
152
+
153
+
154
+
155
+
156
+
157
+
158
+
159
+
160
+
161
+
162
+ </div>
163
+
164
+
165
+ <div class="tab-pane fade tab-source-code" id="source">
166
+ <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { TemplatePortal } from &#x27;@angular/cdk/portal&#x27;;
167
+ import {
168
+ Directive,
169
+ inject,
170
+ OnDestroy,
171
+ OnInit,
172
+ TemplateRef,
173
+ ViewContainerRef,
174
+ } from &#x27;@angular/core&#x27;;
175
+ import { HeaderService } from &#x27;../header.service&#x27;;
176
+
177
+ @Directive({
178
+ selector: &#x27;[rxapHeader]&#x27;,
179
+ standalone: true,
180
+ })
181
+ export class HeaderDirective implements OnInit, OnDestroy {
182
+ private _portal?: TemplatePortal&lt;void&gt;;
183
+
184
+ private readonly headerService &#x3D; inject(HeaderService);
185
+ private readonly template: TemplateRef&lt;void&gt; &#x3D; inject(TemplateRef);
186
+ private readonly viewContainerRef &#x3D; inject(ViewContainerRef);
187
+
188
+ public ngOnInit() {
189
+ this._portal &#x3D; new TemplatePortal&lt;void&gt;(
190
+ this.template,
191
+ this.viewContainerRef,
192
+ );
193
+ this.headerService.pushPortal(this._portal);
194
+ }
195
+
196
+ public ngOnDestroy() {
197
+ if (this._portal) {
198
+ this.headerService.removePortal(this._portal);
199
+ }
200
+ }
201
+ }
202
+
203
+
204
+ </code></pre>
205
+ </div>
206
+
207
+ </div>
208
+
209
+
210
+
211
+
212
+
213
+
214
+
215
+
216
+
217
+
218
+
219
+
220
+
221
+
222
+ </div><div class="search-results">
223
+ <div class="has-results">
224
+ <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
225
+ <ul class="search-results-list"></ul>
226
+ </div>
227
+ <div class="no-results">
228
+ <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ <!-- END CONTENT -->
233
+ </div>
234
+ </div>
235
+
236
+ <label class="dark-mode-switch">
237
+ <input type="checkbox">
238
+ <span class="slider">
239
+ <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">
240
+ <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
241
+ </svg>
242
+ </span>
243
+ </label>
244
+
245
+ <script>
246
+ var COMPODOC_CURRENT_PAGE_DEPTH = 1;
247
+ var COMPODOC_CURRENT_PAGE_CONTEXT = 'directive';
248
+ var COMPODOC_CURRENT_PAGE_URL = 'HeaderDirective.html';
249
+ var MAX_SEARCH_RESULTS = 15;
250
+ </script>
251
+
252
+ <script>
253
+ $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
254
+ checkToggle(darkModeState);
255
+ if ($darkModeToggleSwitchers.length > 0) {
256
+ for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
257
+ $darkModeToggleSwitchers[i].addEventListener('change', function (event) {
258
+ darkModeState = !darkModeState;
259
+ toggleDarkMode(darkModeState);
260
+ });
261
+ }
262
+ }
263
+ </script>
264
+
265
+ <script src="../js/libs/custom-elements.min.js"></script>
266
+ <script src="../js/libs/lit-html.js"></script>
267
+
268
+ <script src="../js/menu-wc.js" defer></script>
269
+ <script nomodule src="../js/menu-wc_es5.js" defer></script>
270
+
271
+ <script src="../js/libs/bootstrap-native.js"></script>
272
+
273
+ <script src="../js/libs/es6-shim.min.js"></script>
274
+ <script src="../js/libs/EventDispatcher.js"></script>
275
+ <script src="../js/libs/promise.min.js"></script>
276
+ <script src="../js/libs/zepto.min.js"></script>
277
+
278
+ <script src="../js/compodoc.js"></script>
279
+
280
+ <script src="../js/tabs.js"></script>
281
+ <script src="../js/menu.js"></script>
282
+ <script src="../js/libs/clipboard.min.js"></script>
283
+ <script src="../js/libs/prism.js"></script>
284
+ <script src="../js/sourceCode.js"></script>
285
+ <script src="../js/search/search.js"></script>
286
+ <script src="../js/search/lunr.min.js"></script>
287
+ <script src="../js/search/search-lunr.js"></script>
288
+ <script src="../js/search/search_index.js"></script>
289
+ <script src="../js/lazy-load-graphs.js"></script>
290
+
291
+
292
+ </body>
293
+ </html>
package/compodoc/index.html CHANGED
@@ -91,11 +91,193 @@
91
91
  <img src="https://img.shields.io/npm/l/@rxap/layout" alt="NPM" class="img-responsive"></p>
92
92
  <ul>
93
93
  <li><a href="#installation">Installation</a></li>
94
+ <li><a href="#get-started">Get started</a></li>
95
+ <li><a href="#generators">Generators</a></li>
94
96
  </ul>
95
97
  <h1>Installation</h1>
96
98
  <p><strong>Add the package to your workspace:</strong></p>
97
99
  <b>Example :</b><div><pre class="line-numbers"><code class="language-bash">yarn add &#64;rxap/layout</code></pre></div><p><strong>Install peer dependencies:</strong></p>
98
- <b>Example :</b><div><pre class="line-numbers"><code class="language-bash">yarn add &#64;angular/animations&#64;^18.0.1 &#64;angular/cdk&#64;^18.0.0 &#64;angular/common&#64;^18.0.1 &#64;angular/core&#64;^18.0.1 &#64;angular/forms&#64;^18.0.1 &#64;angular/material&#64;^18.0.0 &#64;angular/router&#64;^18.0.1 &#64;rxap/authentication&#64;^18.0.2 &#64;rxap/authorization&#64;^18.0.2 &#64;rxap/browser-utilities&#64;^1.1.3 &#64;rxap/config&#64;^18.1.0 &#64;rxap/data-source&#64;^18.1.0 &#64;rxap/directives&#64;^18.0.2 &#64;rxap/environment&#64;^18.0.2 &#64;rxap/icon&#64;^18.0.2 &#64;rxap/material-directives&#64;^18.0.2 &#64;rxap/ngx-changelog&#64;^18.0.2 &#64;rxap/ngx-localize&#64;^18.0.2 &#64;rxap/ngx-status-check&#64;^18.0.2 &#64;rxap/ngx-theme&#64;^18.0.2 &#64;rxap/ngx-user&#64;^18.0.2 &#64;rxap/services&#64;^18.0.2 &#64;rxap/utilities&#64;^16.2.3 rxjs&#64;^7.8.1 </code></pre></div>
100
+ <b>Example :</b><div><pre class="line-numbers"><code class="language-bash">yarn add &#64;angular/animations&#64;^18.0.1 &#64;angular/cdk&#64;^18.0.0 &#64;angular/common&#64;^18.0.1 &#64;angular/core&#64;^18.0.1 &#64;angular/material&#64;^18.0.0 &#64;angular/router&#64;^18.0.1 &#64;rxap/browser-utilities&#64;^1.1.4-dev.1 &#64;rxap/config&#64;^18.1.1-dev.1 &#64;rxap/environment&#64;^18.0.3-dev.1 &#64;rxap/material-directives&#64;^18.0.3-dev.1 &#64;rxap/ngx-pub-sub&#64;^18.0.3-dev.1 &#64;rxap/ngx-theme&#64;^18.0.3-dev.1 &#64;rxap/ngx-user&#64;^18.0.3-dev.1 &#64;rxap/pattern&#64;^1.1.5-dev.1 &#64;rxap/utilities&#64;^16.2.4-dev.1 rxjs&#64;^7.8.1 </code></pre></div><p><strong>Execute the init generator:</strong></p>
101
+ <b>Example :</b><div><pre class="line-numbers"><code class="language-bash">yarn nx g &#64;rxap/layout:init</code></pre></div><h1>Get started</h1>
102
+ <h2>Layout</h2>
103
+ <p>Create a new file <code>layout.routes.ts</code> in the <code>app</code> folder. This file will contain all child routes that should be loaded within the layout component.</p>
104
+ <b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">import { LayoutComponent, provideLayout } from &#39;&#64;rxap/layout&#39;;
105
+
106
+ const ROUTES: Route[] = [
107
+ {
108
+ path: &#39;&#39;,
109
+ component: LayoutComponent,
110
+ children: [ ],
111
+ providers: [ provideLayout() ],
112
+ },
113
+ ];</code></pre></div><p>Import the layout routes into the <code>app.routes.ts</code> file.</p>
114
+ <b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">export const appRoutes: Route[] = [
115
+ {
116
+ path: &#39;&#39;,
117
+ loadChildren: () =&gt; import(&#39;./layout.routes&#39;),
118
+ },
119
+ {
120
+ path: &#39;**&#39;,
121
+ redirectTo: &#39;&#39;,
122
+ },
123
+ ];</code></pre></div><h2>Navigation</h2>
124
+ <p>Create a new file <code>app.navigation.ts</code> in the <code>app</code> folder. This file will contain the navigation items that should be displayed in the layout component.</p>
125
+ <b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">export const APP_NAVIGATION: () =&gt; NavigationWithInserts = () =&gt; [];</code></pre></div><p>Provide the app navigation in the layout routes:</p>
126
+ <b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">import {
127
+ LayoutComponent,
128
+ ProvideNavigationConfig,
129
+ withNavigationService,
130
+ } from &#39;&#64;rxap/layout&#39;;
131
+ import { APP_NAVIGATION } from &#39;./app.navigation&#39;;
132
+
133
+ const ROUTES: Route[] = [
134
+ {
135
+ path: &#39;&#39;,
136
+ component: LayoutComponent,
137
+ children: [ ],
138
+ providers: [
139
+ provideLayout(
140
+ withNavigationConfig(APP_NAVIGATION),
141
+ ),
142
+ ],
143
+ },
144
+ ];</code></pre></div><h3>Navigation Item</h3>
145
+ <p>A navigation item represents a single item in the navigation sidebar. Each item has the required properties <code>label</code> and <code>routerLink</code>. The <code>label</code> property is the text that should be displayed in the sidebar. The <code>routerLink</code> property is the path that should be navigated to when the item is clicked.</p>
146
+ <b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">const item: NavigationItem = {
147
+ label: &#39;Home&#39;,
148
+ routerLink: &#39;/&#39;,
149
+ };</code></pre></div><p>With the <code>children</code> property, a navigation item can have child items. The child items are displayed in a dropdown menu when the parent item is clicked.</p>
150
+ <b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">const item: NavigationItem = {
151
+ label: &#39;Home&#39;,
152
+ routerLink: &#39;/&#39;,
153
+ children: [
154
+ {
155
+ label: &#39;Child&#39;,
156
+ routerLink: &#39;/child&#39;,
157
+ },
158
+ ],
159
+ };</code></pre></div><h4>Icon Property</h4>
160
+ <p>With the <code>icon</code> property, the item can be assigned an icon. The icon is displayed to the left of the label. If the navigation sidebar is collapsed, only the icon is displayed.</p>
161
+ <b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">const item: NavigationItem = {
162
+ label: &#39;Home&#39;,
163
+ routerLink: &#39;/&#39;,
164
+ icon: { icon: &#39;home&#39; },
165
+ };</code></pre></div><h4>Status Property</h4>
166
+ <p>With the <code>status</code> property, a injectable token, class or function can be assigned to the item. The object must have the method <code>isVisible</code> which returns a boolean. If the method returns <code>false</code>, the item is not displayed in the navigation sidebar.</p>
167
+ <b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">&#64;Injectable()
168
+ class SetNavStatus {
169
+ isVisible(item: NavigationItem): boolean {
170
+ return false;
171
+ }
172
+ }
173
+
174
+ const item: NavigationItem = {
175
+ label: &#39;Home&#39;,
176
+ routerLink: &#39;/&#39;,
177
+ status: SetNavStatus,
178
+ };</code></pre></div><h3>Navigation Divider Item</h3>
179
+ <p>A navigation divider item is a horizontal line that separates navigation items. It is used to group items in the navigation sidebar. It is required to set the property <code>divider</code> to <code>true</code>. With the optional property <code>title</code>, a title can be defined that is displayed below the divider.</p>
180
+ <b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">const item: NavigationDividerItem = {
181
+ divider: true,
182
+ title: &#39;Group&#39;,
183
+ };</code></pre></div><h3>Navigation Insert Item (WIP)</h3>
184
+ <p>A navigation insert item is a placeholder for a navigation item that should be inserted into the navigation sidebar.
185
+ The item is used to define where a dynamic navigation should be inserted. The <code>insert</code> property is the key that is used
186
+ identify the insert item. The <code>insert</code> property is required.</p>
187
+ <b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">const item: NavigationInsertItem = {
188
+ insert: &#39;insert-key&#39;,
189
+ };</code></pre></div><h2>Header</h2>
190
+ <p>The header is composed of the components from left to right: AppsButtonComponent, SettingsButtonComponent and UserProfileIconComponent.</p>
191
+ <h3>Apps Button</h3>
192
+ <p>The apps buttons allow for a navigation between different applications. To configure the apps button, the config path
193
+ <code>navigation.apps</code> must be set with an array of object with the property <code>title</code> and ether <code>routerLink</code> or <code>href</code>. If the
194
+ property <code>href</code> is set, the link is opened in a new tab. If the property <code>routerLink</code> the router is used to navigate.</p>
195
+ <b>Example :</b><div><pre class="line-numbers"><code class="language-json">{
196
+ &quot;navigation&quot;: {
197
+ &quot;apps&quot;: [
198
+ {
199
+ &quot;title&quot;: &quot;App 1&quot;,
200
+ &quot;routerLink&quot;: [&quot;/&quot;, &quot;app1&quot;]
201
+ },
202
+ {
203
+ &quot;title&quot;: &quot;App 2&quot;,
204
+ &quot;href&quot;: &quot;https://app2.com&quot;
205
+ }
206
+ ]
207
+ }
208
+ }</code></pre></div><blockquote>
209
+ <p>If the application is in production mode, the current <code>localId</code> is appended to the url defined in the <code>href</code> property.</p>
210
+ </blockquote>
211
+ <h3>Settings Button Customization (WIP)</h3>
212
+ <p>It is possible to add custom items to the settings menu. This custom item can be a component or a configuration object.</p>
213
+ <blockquote>
214
+ </blockquote>
215
+ <h4>Configuration Object</h4>
216
+ <p>The action function is called when the item is clicked. It is possible to use the <code>inject</code> function to inject services.</p>
217
+ <b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">import {
218
+ LayoutComponent,
219
+ ProvideNavigationConfig,
220
+ withNavigationService,
221
+ } from &#39;&#64;rxap/layout&#39;;
222
+ import { APP_NAVIGATION } from &#39;./app.navigation&#39;;
223
+
224
+ const ROUTES: Route[] = [
225
+ {
226
+ path: &#39;&#39;,
227
+ component: LayoutComponent,
228
+ children: [ ],
229
+ providers: [
230
+ provideLayout(
231
+ withNavigationConfig(APP_NAVIGATION),
232
+ withSettingsMenuItems(
233
+ {
234
+ label: &#39;Custom Item&#39;,
235
+ icon: { icon: &#39;home&#39; },
236
+ action: () =&gt; inject(MatDialog).open(MyCustomDialogComponent),
237
+ }
238
+ )
239
+ ),
240
+ ],
241
+ },
242
+ ];</code></pre></div><h4>Component</h4>
243
+ <p>If a component is provided ensure the component template uses the <code>mat-menu-item</code> component:</p>
244
+ <b>Example :</b><div><pre class="line-numbers"><code class="language-angular17html">&lt;button mat-menu-item&gt;My Custom Item&lt;/button&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">import {
245
+ LayoutComponent,
246
+ ProvideNavigationConfig,
247
+ withNavigationService,
248
+ } from &#39;&#64;rxap/layout&#39;;
249
+ import { APP_NAVIGATION } from &#39;./app.navigation&#39;;
250
+
251
+ const ROUTES: Route[] = [
252
+ {
253
+ path: &#39;&#39;,
254
+ component: LayoutComponent,
255
+ children: [ ],
256
+ providers: [
257
+ provideLayout(
258
+ withNavigationConfig(APP_NAVIGATION),
259
+ withSettingsMenuItems(
260
+ MyCustomMenuItemComponent
261
+ )
262
+ ),
263
+ ],
264
+ },
265
+ ];</code></pre></div><h3>User Profile (WIP)</h3>
266
+ <p>...</p>
267
+ <h2>Dynamic Footer</h2>
268
+ <p>With the directive <code>rxapFooter</code> it is possible to define a dynamic footer. When the directive is used on a <code>&lt;ng-template&gt;</code> in a component,
269
+ that is rendered in the layout component, the template is rendered in the footer of the layout component.</p>
270
+ <b>Example :</b><div><pre class="line-numbers"><code class="language-angular17html">&lt;mat-card&gt;
271
+ ...
272
+ &lt;/mat-card&gt;
273
+ &lt;ng-template rxapFooter&gt;
274
+ &lt;button mat-button&gt;A button in the layout footer&lt;/button&gt;
275
+ &lt;/ng-template&gt;</code></pre></div><h1>Generators</h1>
276
+ <h2>init</h2>
277
+ <blockquote>
278
+ <p>Initialize the package in the workspace</p>
279
+ </blockquote>
280
+ <b>Example :</b><div><pre class="line-numbers"><code class="language-bash">yarn nx g &#64;rxap/layout:init</code></pre></div>
99
281
 
100
282
 
101
283