@ojiepermana/angular 0.1.0 → 21.0.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 (91) hide show
  1. package/README.md +41 -246
  2. package/chart/README.md +0 -0
  3. package/fesm2022/ojiepermana-angular-chart.mjs +3714 -0
  4. package/fesm2022/ojiepermana-angular-chart.mjs.map +1 -0
  5. package/fesm2022/ojiepermana-angular-component.mjs +3463 -0
  6. package/fesm2022/ojiepermana-angular-component.mjs.map +1 -0
  7. package/fesm2022/ojiepermana-angular-layout.mjs +272 -401
  8. package/fesm2022/ojiepermana-angular-layout.mjs.map +1 -1
  9. package/fesm2022/ojiepermana-angular-navigation.mjs +2225 -135
  10. package/fesm2022/ojiepermana-angular-navigation.mjs.map +1 -1
  11. package/fesm2022/ojiepermana-angular-theme.mjs +381 -1
  12. package/fesm2022/ojiepermana-angular-theme.mjs.map +1 -1
  13. package/fesm2022/ojiepermana-angular.mjs +15 -1
  14. package/fesm2022/ojiepermana-angular.mjs.map +1 -1
  15. package/package.json +49 -36
  16. package/theme/styles/etos.css +38 -0
  17. package/theme/styles/index.css +32 -8
  18. package/theme/styles/themes/brand/etos/color.css +21 -0
  19. package/theme/styles/themes/brand/etos/style.css +50 -0
  20. package/theme/styles/themes/library/_components.css +63 -0
  21. package/theme/styles/themes/library/_layers.css +15 -0
  22. package/theme/styles/themes/library/_material-overrides.css +254 -0
  23. package/theme/styles/themes/library/_tokens.css +54 -0
  24. package/theme/styles/themes/library/color/amber.css +18 -0
  25. package/theme/styles/themes/library/color/blue.css +23 -0
  26. package/theme/styles/themes/library/color/green.css +18 -0
  27. package/theme/styles/themes/library/color/index.css +9 -0
  28. package/theme/styles/themes/library/color/purple.css +18 -0
  29. package/theme/styles/themes/library/color/red.css +18 -0
  30. package/theme/styles/themes/library/style/brutal.css +47 -0
  31. package/theme/styles/themes/library/style/default.css +51 -0
  32. package/theme/styles/themes/library/style/index.css +8 -0
  33. package/theme/styles/themes/library/style/sharp.css +47 -0
  34. package/theme/styles/themes/library/style/soft.css +47 -0
  35. package/theme/styles/themes/mode/dark.css +20 -0
  36. package/theme/styles/themes/mode/index.css +6 -0
  37. package/theme/styles/themes/mode/light.css +24 -0
  38. package/theme/styles/themes/taildwind.css +109 -0
  39. package/types/ojiepermana-angular-chart.d.ts +1094 -0
  40. package/types/ojiepermana-angular-component.d.ts +1174 -0
  41. package/types/ojiepermana-angular-layout.d.ts +123 -76
  42. package/types/ojiepermana-angular-navigation.d.ts +257 -71
  43. package/types/ojiepermana-angular-theme.d.ts +170 -1
  44. package/types/ojiepermana-angular.d.ts +2 -1
  45. package/fesm2022/ojiepermana-angular-internal.mjs +0 -473
  46. package/fesm2022/ojiepermana-angular-internal.mjs.map +0 -1
  47. package/fesm2022/ojiepermana-angular-navigation-horizontal.mjs +0 -785
  48. package/fesm2022/ojiepermana-angular-navigation-horizontal.mjs.map +0 -1
  49. package/fesm2022/ojiepermana-angular-navigation-vertical.mjs +0 -1568
  50. package/fesm2022/ojiepermana-angular-navigation-vertical.mjs.map +0 -1
  51. package/fesm2022/ojiepermana-angular-shell.mjs +0 -14
  52. package/fesm2022/ojiepermana-angular-shell.mjs.map +0 -1
  53. package/fesm2022/ojiepermana-angular-theme-component.mjs +0 -235
  54. package/fesm2022/ojiepermana-angular-theme-component.mjs.map +0 -1
  55. package/fesm2022/ojiepermana-angular-theme-directive.mjs +0 -29
  56. package/fesm2022/ojiepermana-angular-theme-directive.mjs.map +0 -1
  57. package/fesm2022/ojiepermana-angular-theme-service.mjs +0 -241
  58. package/fesm2022/ojiepermana-angular-theme-service.mjs.map +0 -1
  59. package/layout/README.md +0 -144
  60. package/navigation/README.md +0 -215
  61. package/shell/README.md +0 -37
  62. package/styles/index.css +0 -2
  63. package/styles/resets.css +0 -22
  64. package/theme/README.md +0 -379
  65. package/theme/styles/adapters/material-ui/index.css +0 -205
  66. package/theme/styles/layout/horizontal.css +0 -109
  67. package/theme/styles/layout/index.css +0 -19
  68. package/theme/styles/layout/vertical.css +0 -75
  69. package/theme/styles/modes/dark.css +0 -84
  70. package/theme/styles/presets/colors/blue.css +0 -45
  71. package/theme/styles/presets/colors/brand.css +0 -52
  72. package/theme/styles/presets/colors/cyan.css +0 -45
  73. package/theme/styles/presets/colors/green.css +0 -45
  74. package/theme/styles/presets/colors/index.css +0 -7
  75. package/theme/styles/presets/colors/orange.css +0 -45
  76. package/theme/styles/presets/colors/purple.css +0 -45
  77. package/theme/styles/presets/colors/red.css +0 -45
  78. package/theme/styles/presets/styles/flat.css +0 -61
  79. package/theme/styles/presets/styles/glass.css +0 -28
  80. package/theme/styles/presets/styles/index.css +0 -2
  81. package/theme/styles/roles/index.css +0 -67
  82. package/theme/styles/tokens/foundation.css +0 -136
  83. package/theme/styles/tokens/semantic.css +0 -87
  84. package/theme/styles/utilities/index.css +0 -88
  85. package/types/ojiepermana-angular-internal.d.ts +0 -89
  86. package/types/ojiepermana-angular-navigation-horizontal.d.ts +0 -77
  87. package/types/ojiepermana-angular-navigation-vertical.d.ts +0 -260
  88. package/types/ojiepermana-angular-shell.d.ts +0 -12
  89. package/types/ojiepermana-angular-theme-component.d.ts +0 -46
  90. package/types/ojiepermana-angular-theme-directive.d.ts +0 -10
  91. package/types/ojiepermana-angular-theme-service.d.ts +0 -68
@@ -1,1568 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { inject, ChangeDetectorRef, DOCUMENT, ElementRef, Renderer2, EventEmitter, ViewChild, Output, Input, Directive, ChangeDetectionStrategy, ViewEncapsulation, Component, forwardRef } from '@angular/core';
3
- import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
4
- import { ReplaySubject, Subject, filter, takeUntil } from 'rxjs';
5
- import { NavigationService, shouldRenderNavigationItem, getNavigationItemAction, isNavigationRoutableItem } from '@ojiepermana/angular/navigation';
6
- import { trackNavigationTreeItem, NavigationItemContent, hasActiveNavigationDescendant, isNavigationTreeDescendant, NavigationTreeOutlet } from '@ojiepermana/angular/internal';
7
- import { NgClass, NgTemplateOutlet } from '@angular/common';
8
- import * as i1 from '@angular/material/tooltip';
9
- import { MatTooltipModule } from '@angular/material/tooltip';
10
-
11
- class VerticalNavigationBaseComponent {
12
- _changeDetectorRef = inject(ChangeDetectorRef);
13
- _document = inject(DOCUMENT);
14
- _elementRef = inject(ElementRef);
15
- _renderer2 = inject(Renderer2);
16
- _router = inject(Router);
17
- _navigationService = inject(NavigationService);
18
- autoCollapse = true;
19
- inner = false;
20
- mode = 'side';
21
- navigation = [];
22
- opened = true;
23
- position = 'left';
24
- transparentOverlay = false;
25
- appearanceChanged = new EventEmitter();
26
- modeChanged = new EventEmitter();
27
- openedChanged = new EventEmitter();
28
- positionChanged = new EventEmitter();
29
- _navigationContentEl;
30
- activeAsideItemId = null;
31
- onCollapsableItemCollapsed = new ReplaySubject(1);
32
- onCollapsableItemExpanded = new ReplaySubject(1);
33
- onRefreshed = new ReplaySubject(1);
34
- _animationsEnabled = false;
35
- _asideOverlay = null;
36
- _hovered = false;
37
- _mutationObserver;
38
- _overlay = null;
39
- _pendingTimeouts = [];
40
- _unsubscribeAll = new Subject();
41
- _overlayClickHandler = () => this.close();
42
- _asideOverlayClickHandler = () => this.closeAside();
43
- get hostClasses() {
44
- return {
45
- [`${this._componentPrefix}-animations-enabled`]: this._animationsEnabled,
46
- [`${this._componentPrefix}-appearance-${this.appearance}`]: true,
47
- [`${this._componentPrefix}-hover`]: this._hovered,
48
- [`${this._componentPrefix}-inner`]: this.inner,
49
- [`${this._componentPrefix}-mode-over`]: this.mode === 'over',
50
- [`${this._componentPrefix}-mode-side`]: this.mode === 'side',
51
- [`${this._componentPrefix}-opened`]: this.opened,
52
- [`${this._componentPrefix}-position-left`]: this.position === 'left',
53
- [`${this._componentPrefix}-position-right`]: this.position === 'right',
54
- };
55
- }
56
- get asideWrapperClass() {
57
- return this._asideWrapperClass;
58
- }
59
- activeAsideNavigationItem() {
60
- if (!this.activeAsideItemId) {
61
- return null;
62
- }
63
- const item = this._navigationService.getItem(this.activeAsideItemId, this.navigation);
64
- return item?.type === 'aside' ? item : null;
65
- }
66
- shouldRenderItem(item) {
67
- return shouldRenderNavigationItem(item);
68
- }
69
- onMouseenter() {
70
- this._enableAnimations();
71
- this._hovered = true;
72
- }
73
- onMouseleave() {
74
- this._enableAnimations();
75
- this._hovered = false;
76
- }
77
- ngOnChanges(changes) {
78
- if ('appearance' in changes) {
79
- this.appearanceChanged.emit(changes['appearance'].currentValue);
80
- }
81
- if ('mode' in changes) {
82
- const currentMode = changes['mode'].currentValue;
83
- const previousMode = changes['mode'].previousValue;
84
- this._disableAnimations();
85
- if (previousMode === 'over' && currentMode === 'side') {
86
- this._hideOverlay();
87
- }
88
- if (previousMode === 'side' && currentMode === 'over') {
89
- this.closeAside();
90
- if (this.opened) {
91
- this._showOverlay();
92
- }
93
- }
94
- this.modeChanged.emit(currentMode);
95
- this._setTimeout(() => {
96
- this._enableAnimations();
97
- }, 500);
98
- }
99
- if ('navigation' in changes) {
100
- this._changeDetectorRef.markForCheck();
101
- }
102
- if ('opened' in changes) {
103
- this._toggleOpened(changes['opened'].currentValue);
104
- }
105
- if ('position' in changes) {
106
- this.positionChanged.emit(changes['position'].currentValue);
107
- }
108
- }
109
- ngOnInit() {
110
- this._router.events
111
- .pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this._unsubscribeAll))
112
- .subscribe(() => {
113
- if (this.mode === 'over' && this.opened) {
114
- this.close();
115
- }
116
- if (this.mode === 'side' && this.activeAsideItemId) {
117
- this.closeAside();
118
- }
119
- });
120
- }
121
- ngAfterViewInit() {
122
- this._mutationObserver = new MutationObserver((mutations) => {
123
- mutations.forEach((mutation) => {
124
- const mutationTarget = mutation.target;
125
- if (mutation.attributeName === 'class') {
126
- if (mutationTarget.classList.contains('cdk-global-scrollblock')) {
127
- const top = parseInt(mutationTarget.style.top, 10);
128
- this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', `${Math.abs(top)}px`);
129
- }
130
- else {
131
- this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', null);
132
- }
133
- }
134
- });
135
- });
136
- this._mutationObserver.observe(this._document.documentElement, {
137
- attributes: true,
138
- attributeFilter: ['class'],
139
- });
140
- this._setTimeout(() => {
141
- if (!this._navigationContentEl) {
142
- return;
143
- }
144
- const activeItem = this._navigationContentEl.nativeElement.querySelector('.kit-navigation-item-active');
145
- if (activeItem) {
146
- activeItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
147
- }
148
- });
149
- }
150
- ngOnDestroy() {
151
- if (this._mutationObserver) {
152
- this._mutationObserver.disconnect();
153
- }
154
- // Clear all pending timeouts to prevent memory leaks
155
- for (const id of this._pendingTimeouts) {
156
- clearTimeout(id);
157
- }
158
- this._pendingTimeouts = [];
159
- // Remove overlays synchronously on destroy
160
- this._removeOverlayElement(this._overlay, this._overlayClickHandler);
161
- this._overlay = null;
162
- this._removeOverlayElement(this._asideOverlay, this._asideOverlayClickHandler);
163
- this._asideOverlay = null;
164
- this._unsubscribeAll.next();
165
- this._unsubscribeAll.complete();
166
- this.onCollapsableItemCollapsed.complete();
167
- this.onCollapsableItemExpanded.complete();
168
- this.onRefreshed.complete();
169
- }
170
- refresh() {
171
- this._changeDetectorRef.markForCheck();
172
- this.onRefreshed.next(true);
173
- }
174
- open() {
175
- if (this.opened) {
176
- return;
177
- }
178
- this._toggleOpened(true);
179
- }
180
- close() {
181
- if (!this.opened) {
182
- return;
183
- }
184
- this.closeAside();
185
- this._toggleOpened(false);
186
- }
187
- toggle() {
188
- if (this.opened) {
189
- this.close();
190
- }
191
- else {
192
- this.open();
193
- }
194
- }
195
- openAside(item) {
196
- if (item.disabled || !item.id) {
197
- return;
198
- }
199
- this.activeAsideItemId = item.id;
200
- this._showAsideOverlay();
201
- this._changeDetectorRef.markForCheck();
202
- }
203
- closeAside() {
204
- this.activeAsideItemId = null;
205
- this._hideAsideOverlay();
206
- this._changeDetectorRef.markForCheck();
207
- }
208
- toggleAside(item) {
209
- if (this.activeAsideItemId === item.id) {
210
- this.closeAside();
211
- }
212
- else {
213
- this.openAside(item);
214
- }
215
- }
216
- trackByFn(index, item) {
217
- return trackNavigationTreeItem(index, item);
218
- }
219
- _enableAnimations() {
220
- if (this._animationsEnabled) {
221
- return;
222
- }
223
- this._animationsEnabled = true;
224
- }
225
- _disableAnimations() {
226
- if (!this._animationsEnabled) {
227
- return;
228
- }
229
- this._animationsEnabled = false;
230
- }
231
- _showOverlay() {
232
- if (this._overlay) {
233
- return;
234
- }
235
- this._overlay = this._renderer2.createElement('div');
236
- if (this._overlay) {
237
- this._overlay.classList.add(`${this._componentPrefix}-overlay`);
238
- if (this.transparentOverlay) {
239
- this._overlay.classList.add(`${this._componentPrefix}-overlay-transparent`);
240
- }
241
- this._renderer2.setStyle(this._overlay, 'opacity', '0');
242
- this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._overlay);
243
- this._overlay.addEventListener('click', this._overlayClickHandler);
244
- this._setTimeout(() => {
245
- if (this._overlay) {
246
- this._renderer2.setStyle(this._overlay, 'opacity', '1');
247
- }
248
- }, 10);
249
- }
250
- }
251
- _hideOverlay() {
252
- if (!this._overlay) {
253
- return;
254
- }
255
- this._renderer2.setStyle(this._overlay, 'opacity', '0');
256
- this._setTimeout(() => {
257
- if (this._overlay) {
258
- this._overlay.removeEventListener('click', this._overlayClickHandler);
259
- if (this._overlay.parentNode) {
260
- this._overlay.parentNode.removeChild(this._overlay);
261
- }
262
- this._overlay = null;
263
- }
264
- }, 300);
265
- }
266
- _showAsideOverlay() {
267
- if (this._asideOverlay) {
268
- return;
269
- }
270
- this._asideOverlay = this._renderer2.createElement('div');
271
- if (this._asideOverlay) {
272
- this._asideOverlay.classList.add(`${this._componentPrefix}-aside-overlay`);
273
- this._renderer2.setStyle(this._asideOverlay, 'opacity', '0');
274
- this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._asideOverlay);
275
- this._asideOverlay.addEventListener('click', this._asideOverlayClickHandler);
276
- this._setTimeout(() => {
277
- if (this._asideOverlay) {
278
- this._renderer2.setStyle(this._asideOverlay, 'opacity', '1');
279
- }
280
- }, 10);
281
- }
282
- }
283
- _hideAsideOverlay() {
284
- if (!this._asideOverlay) {
285
- return;
286
- }
287
- this._renderer2.setStyle(this._asideOverlay, 'opacity', '0');
288
- this._setTimeout(() => {
289
- if (this._asideOverlay) {
290
- this._asideOverlay.removeEventListener('click', this._asideOverlayClickHandler);
291
- if (this._asideOverlay.parentNode) {
292
- this._asideOverlay.parentNode.removeChild(this._asideOverlay);
293
- }
294
- this._asideOverlay = null;
295
- }
296
- }, 300);
297
- }
298
- _setTimeout(fn, delay) {
299
- const id = setTimeout(() => {
300
- const index = this._pendingTimeouts.indexOf(id);
301
- if (index > -1) {
302
- this._pendingTimeouts.splice(index, 1);
303
- }
304
- fn();
305
- }, delay);
306
- this._pendingTimeouts.push(id);
307
- }
308
- _removeOverlayElement(overlay, clickHandler) {
309
- if (!overlay) {
310
- return;
311
- }
312
- overlay.removeEventListener('click', clickHandler);
313
- if (overlay.parentNode) {
314
- overlay.parentNode.removeChild(overlay);
315
- }
316
- }
317
- _toggleOpened(open) {
318
- this.opened = open;
319
- this._enableAnimations();
320
- if (this.mode === 'over') {
321
- if (this.opened) {
322
- this._showOverlay();
323
- }
324
- else {
325
- this._hideOverlay();
326
- }
327
- }
328
- this.openedChanged.emit(open);
329
- }
330
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
331
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: VerticalNavigationBaseComponent, isStandalone: true, inputs: { autoCollapse: "autoCollapse", inner: "inner", mode: "mode", navigation: "navigation", opened: "opened", position: "position", transparentOverlay: "transparentOverlay" }, outputs: { appearanceChanged: "appearanceChanged", modeChanged: "modeChanged", openedChanged: "openedChanged", positionChanged: "positionChanged" }, viewQueries: [{ propertyName: "_navigationContentEl", first: true, predicate: ["navigationContent"], descendants: true }], usesOnChanges: true, ngImport: i0 });
332
- }
333
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationBaseComponent, decorators: [{
334
- type: Directive
335
- }], propDecorators: { autoCollapse: [{
336
- type: Input
337
- }], inner: [{
338
- type: Input
339
- }], mode: [{
340
- type: Input
341
- }], navigation: [{
342
- type: Input
343
- }], opened: [{
344
- type: Input
345
- }], position: [{
346
- type: Input
347
- }], transparentOverlay: [{
348
- type: Input
349
- }], appearanceChanged: [{
350
- type: Output
351
- }], modeChanged: [{
352
- type: Output
353
- }], openedChanged: [{
354
- type: Output
355
- }], positionChanged: [{
356
- type: Output
357
- }], _navigationContentEl: [{
358
- type: ViewChild,
359
- args: ['navigationContent']
360
- }] } });
361
-
362
- class VerticalNavigationBasicItemComponent {
363
- _changeDetectorRef = inject(ChangeDetectorRef);
364
- _navigationComponent = inject(VerticalNavigationBaseComponent);
365
- item;
366
- isActiveMatchOptions = {
367
- paths: 'subset',
368
- queryParams: 'subset',
369
- fragment: 'ignored',
370
- matrixParams: 'ignored',
371
- };
372
- _unsubscribeAll = new Subject();
373
- /**
374
- * On init
375
- */
376
- ngOnInit() {
377
- // Set the "isActiveMatchOptions" either from item's
378
- // "isActiveMatchOptions" or the equivalent form of
379
- // item's "exactMatch" option
380
- this.isActiveMatchOptions =
381
- this.item.isActiveMatchOptions ??
382
- (this.item.exactMatch
383
- ? { paths: 'exact', queryParams: 'exact', fragment: 'ignored', matrixParams: 'ignored' }
384
- : { paths: 'subset', queryParams: 'subset', fragment: 'ignored', matrixParams: 'ignored' });
385
- // Subscribe to onRefreshed on the navigation component
386
- this._navigationComponent.onRefreshed.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
387
- // Mark for check
388
- this._changeDetectorRef.markForCheck();
389
- });
390
- }
391
- /**
392
- * On destroy
393
- */
394
- ngOnDestroy() {
395
- // Unsubscribe from all subscriptions
396
- this._unsubscribeAll.next();
397
- this._unsubscribeAll.complete();
398
- }
399
- hasAction() {
400
- return !!getNavigationItemAction(this.item);
401
- }
402
- triggerAction() {
403
- getNavigationItemAction(this.item)?.(this.item);
404
- }
405
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationBasicItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
406
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: VerticalNavigationBasicItemComponent, isStandalone: true, selector: "vertical-navigation-basic-item", inputs: { item: "item" }, ngImport: i0, template: `
407
- <!-- Item wrapper -->
408
- <div
409
- class="vertical-navigation-item-wrapper"
410
- [class.vertical-navigation-item-has-subtitle]="!!item.subtitle"
411
- [ngClass]="item.classes?.wrapper">
412
- <!-- Item with an internal link -->
413
- @if (item.link && !item.externalLink && !hasAction() && !item.disabled) {
414
- <a
415
- class="kit-navigation-item"
416
- [ngClass]="{ 'kit-navigation-item-active-forced': item.active }"
417
- [routerLink]="[item.link]"
418
- [fragment]="item.fragment"
419
- [preserveFragment]="item.preserveFragment ?? false"
420
- [queryParams]="item.queryParams ?? null"
421
- [queryParamsHandling]="item.queryParamsHandling ?? null"
422
- [routerLinkActive]="'kit-navigation-item-active'"
423
- [routerLinkActiveOptions]="isActiveMatchOptions"
424
- [matTooltip]="item.tooltip || ''">
425
- <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
426
- </a>
427
- }
428
-
429
- <!-- Item with an external link -->
430
- @if (item.link && item.externalLink && !hasAction() && !item.disabled) {
431
- <a
432
- class="kit-navigation-item"
433
- [href]="item.link"
434
- [target]="item.target || '_blank'"
435
- [matTooltip]="item.tooltip || ''">
436
- <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
437
- </a>
438
- }
439
-
440
- <!-- Item with a function -->
441
- @if (!item.link && hasAction() && !item.disabled) {
442
- <div
443
- class="kit-navigation-item"
444
- [ngClass]="{ 'kit-navigation-item-active-forced': item.active }"
445
- [matTooltip]="item.tooltip || ''"
446
- role="button"
447
- tabindex="0"
448
- (click)="triggerAction()"
449
- (keydown.enter)="triggerAction()"
450
- (keydown.space)="$event.preventDefault(); triggerAction()">
451
- <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
452
- </div>
453
- }
454
-
455
- <!-- Item with an internal link and function -->
456
- @if (item.link && !item.externalLink && hasAction() && !item.disabled) {
457
- <a
458
- class="kit-navigation-item"
459
- [ngClass]="{ 'kit-navigation-item-active-forced': item.active }"
460
- [routerLink]="[item.link]"
461
- [fragment]="item.fragment"
462
- [preserveFragment]="item.preserveFragment ?? false"
463
- [queryParams]="item.queryParams ?? null"
464
- [queryParamsHandling]="item.queryParamsHandling ?? null"
465
- [routerLinkActive]="'kit-navigation-item-active'"
466
- [routerLinkActiveOptions]="isActiveMatchOptions"
467
- [matTooltip]="item.tooltip || ''"
468
- (click)="triggerAction()">
469
- <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
470
- </a>
471
- }
472
-
473
- <!-- Item with an external link and function -->
474
- @if (item.link && item.externalLink && hasAction() && !item.disabled) {
475
- <a
476
- class="kit-navigation-item"
477
- [href]="item.link"
478
- [target]="item.target || '_blank'"
479
- [matTooltip]="item.tooltip || ''"
480
- (click)="triggerAction()">
481
- <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
482
- </a>
483
- }
484
-
485
- <!-- Item with no link and no function -->
486
- @if (!item.link && !hasAction() && !item.disabled) {
487
- <div
488
- class="kit-navigation-item"
489
- [ngClass]="{ 'kit-navigation-item-active-forced': item.active }"
490
- [matTooltip]="item.tooltip || ''">
491
- <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
492
- </div>
493
- }
494
-
495
- <!-- Item is disabled -->
496
- @if (item.disabled) {
497
- <div class="kit-navigation-item kit-navigation-item-disabled" [matTooltip]="item.tooltip || ''">
498
- <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
499
- </div>
500
- }
501
- </div>
502
-
503
- <!-- Item template -->
504
- <ng-template #itemTemplate>
505
- <navigation-item-content [item]="item" variant="vertical"></navigation-item-content>
506
- </ng-template>
507
- `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: NavigationItemContent, selector: "navigation-item-content", inputs: ["item", "level", "variant"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
508
- }
509
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationBasicItemComponent, decorators: [{
510
- type: Component,
511
- args: [{
512
- selector: 'vertical-navigation-basic-item',
513
- template: `
514
- <!-- Item wrapper -->
515
- <div
516
- class="vertical-navigation-item-wrapper"
517
- [class.vertical-navigation-item-has-subtitle]="!!item.subtitle"
518
- [ngClass]="item.classes?.wrapper">
519
- <!-- Item with an internal link -->
520
- @if (item.link && !item.externalLink && !hasAction() && !item.disabled) {
521
- <a
522
- class="kit-navigation-item"
523
- [ngClass]="{ 'kit-navigation-item-active-forced': item.active }"
524
- [routerLink]="[item.link]"
525
- [fragment]="item.fragment"
526
- [preserveFragment]="item.preserveFragment ?? false"
527
- [queryParams]="item.queryParams ?? null"
528
- [queryParamsHandling]="item.queryParamsHandling ?? null"
529
- [routerLinkActive]="'kit-navigation-item-active'"
530
- [routerLinkActiveOptions]="isActiveMatchOptions"
531
- [matTooltip]="item.tooltip || ''">
532
- <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
533
- </a>
534
- }
535
-
536
- <!-- Item with an external link -->
537
- @if (item.link && item.externalLink && !hasAction() && !item.disabled) {
538
- <a
539
- class="kit-navigation-item"
540
- [href]="item.link"
541
- [target]="item.target || '_blank'"
542
- [matTooltip]="item.tooltip || ''">
543
- <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
544
- </a>
545
- }
546
-
547
- <!-- Item with a function -->
548
- @if (!item.link && hasAction() && !item.disabled) {
549
- <div
550
- class="kit-navigation-item"
551
- [ngClass]="{ 'kit-navigation-item-active-forced': item.active }"
552
- [matTooltip]="item.tooltip || ''"
553
- role="button"
554
- tabindex="0"
555
- (click)="triggerAction()"
556
- (keydown.enter)="triggerAction()"
557
- (keydown.space)="$event.preventDefault(); triggerAction()">
558
- <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
559
- </div>
560
- }
561
-
562
- <!-- Item with an internal link and function -->
563
- @if (item.link && !item.externalLink && hasAction() && !item.disabled) {
564
- <a
565
- class="kit-navigation-item"
566
- [ngClass]="{ 'kit-navigation-item-active-forced': item.active }"
567
- [routerLink]="[item.link]"
568
- [fragment]="item.fragment"
569
- [preserveFragment]="item.preserveFragment ?? false"
570
- [queryParams]="item.queryParams ?? null"
571
- [queryParamsHandling]="item.queryParamsHandling ?? null"
572
- [routerLinkActive]="'kit-navigation-item-active'"
573
- [routerLinkActiveOptions]="isActiveMatchOptions"
574
- [matTooltip]="item.tooltip || ''"
575
- (click)="triggerAction()">
576
- <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
577
- </a>
578
- }
579
-
580
- <!-- Item with an external link and function -->
581
- @if (item.link && item.externalLink && hasAction() && !item.disabled) {
582
- <a
583
- class="kit-navigation-item"
584
- [href]="item.link"
585
- [target]="item.target || '_blank'"
586
- [matTooltip]="item.tooltip || ''"
587
- (click)="triggerAction()">
588
- <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
589
- </a>
590
- }
591
-
592
- <!-- Item with no link and no function -->
593
- @if (!item.link && !hasAction() && !item.disabled) {
594
- <div
595
- class="kit-navigation-item"
596
- [ngClass]="{ 'kit-navigation-item-active-forced': item.active }"
597
- [matTooltip]="item.tooltip || ''">
598
- <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
599
- </div>
600
- }
601
-
602
- <!-- Item is disabled -->
603
- @if (item.disabled) {
604
- <div class="kit-navigation-item kit-navigation-item-disabled" [matTooltip]="item.tooltip || ''">
605
- <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
606
- </div>
607
- }
608
- </div>
609
-
610
- <!-- Item template -->
611
- <ng-template #itemTemplate>
612
- <navigation-item-content [item]="item" variant="vertical"></navigation-item-content>
613
- </ng-template>
614
- `,
615
- encapsulation: ViewEncapsulation.None,
616
- changeDetection: ChangeDetectionStrategy.OnPush,
617
- imports: [NgClass, NgTemplateOutlet, RouterLink, RouterLinkActive, NavigationItemContent, MatTooltipModule],
618
- }]
619
- }], propDecorators: { item: [{
620
- type: Input
621
- }] } });
622
-
623
- class VerticalNavigationDividerItemComponent {
624
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationDividerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
625
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: VerticalNavigationDividerItemComponent, isStandalone: true, selector: "vertical-navigation-divider-item", ngImport: i0, template: '<div class="vertical-navigation-divider"></div>', isInline: true, styles: [".vertical-navigation-divider{height:1px;margin:12px 16px;background:rgb(var(--border))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
626
- }
627
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationDividerItemComponent, decorators: [{
628
- type: Component,
629
- args: [{ selector: 'vertical-navigation-divider-item', template: '<div class="vertical-navigation-divider"></div>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".vertical-navigation-divider{height:1px;margin:12px 16px;background:rgb(var(--border))}\n"] }]
630
- }] });
631
-
632
- class VerticalNavigationSpacerItemComponent {
633
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationSpacerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
634
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: VerticalNavigationSpacerItemComponent, isStandalone: true, selector: "vertical-navigation-spacer-item", ngImport: i0, template: '<div class="vertical-navigation-spacer"></div>', isInline: true, styles: [".vertical-navigation-spacer{flex:1 1 auto;min-height:24px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
635
- }
636
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationSpacerItemComponent, decorators: [{
637
- type: Component,
638
- args: [{ selector: 'vertical-navigation-spacer-item', template: '<div class="vertical-navigation-spacer"></div>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".vertical-navigation-spacer{flex:1 1 auto;min-height:24px}\n"] }]
639
- }] });
640
-
641
- class VerticalNavigationCollapsableItemComponent {
642
- _changeDetectorRef = inject(ChangeDetectorRef);
643
- _navigationComponent = inject(VerticalNavigationBaseComponent);
644
- _navigationService = inject(NavigationService);
645
- _router = inject(Router);
646
- autoCollapse = true;
647
- item;
648
- isCollapsed = true;
649
- treeTrackByFn = trackNavigationTreeItem;
650
- treeShouldRenderItemFn = shouldRenderNavigationItem;
651
- get isExpanded() {
652
- return !this.isCollapsed;
653
- }
654
- _unsubscribeAll = new Subject();
655
- /**
656
- * On init
657
- */
658
- ngOnInit() {
659
- // If the item has a children that has a matching url with the current url, expand...
660
- if (this._hasActiveChild(this.item)) {
661
- this.expand();
662
- }
663
- // Otherwise...
664
- else {
665
- // If the autoCollapse is on, collapse...
666
- if (this.autoCollapse) {
667
- this.collapse();
668
- }
669
- }
670
- // Listen for the onCollapsableItemCollapsed from the service
671
- this._navigationComponent.onCollapsableItemCollapsed
672
- .pipe(takeUntil(this._unsubscribeAll))
673
- .subscribe((collapsedItem) => {
674
- // Check if the collapsed item is null
675
- if (collapsedItem === null) {
676
- return;
677
- }
678
- // Collapse if this is a children of the collapsed item
679
- if (this._isChildrenOf(collapsedItem, this.item)) {
680
- this.collapse();
681
- }
682
- });
683
- // Listen for the onCollapsableItemExpanded from the service if the autoCollapse is on
684
- if (this.autoCollapse) {
685
- this._navigationComponent.onCollapsableItemExpanded
686
- .pipe(takeUntil(this._unsubscribeAll))
687
- .subscribe((expandedItem) => {
688
- // Check if the expanded item is null
689
- if (expandedItem === null) {
690
- return;
691
- }
692
- // Check if this is a parent of the expanded item
693
- if (this._isChildrenOf(this.item, expandedItem)) {
694
- return;
695
- }
696
- // Check if this has a children with a matching url with the current active url
697
- if (this._hasActiveChild(this.item)) {
698
- return;
699
- }
700
- // Check if this is the expanded item
701
- if (this.item === expandedItem) {
702
- return;
703
- }
704
- // If none of the above conditions are matched, collapse this item
705
- this.collapse();
706
- });
707
- }
708
- // Attach a listener to the NavigationEnd event
709
- this._router.events
710
- .pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this._unsubscribeAll))
711
- .subscribe(() => {
712
- // If the item has a children that has a matching url with the current url, expand...
713
- if (this._hasActiveChild(this.item)) {
714
- this.expand();
715
- }
716
- // Otherwise...
717
- else {
718
- // If the autoCollapse is on, collapse...
719
- if (this.autoCollapse) {
720
- this.collapse();
721
- }
722
- }
723
- });
724
- // Subscribe to onRefreshed on the navigation component
725
- this._navigationComponent.onRefreshed.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
726
- // Mark for check
727
- this._changeDetectorRef.markForCheck();
728
- });
729
- }
730
- /**
731
- * On destroy
732
- */
733
- ngOnDestroy() {
734
- // Unsubscribe from all subscriptions
735
- this._unsubscribeAll.next();
736
- this._unsubscribeAll.complete();
737
- }
738
- /**
739
- * Collapse
740
- */
741
- collapse() {
742
- // Return if the item is disabled
743
- if (this.item.disabled) {
744
- return;
745
- }
746
- // Return if the item is already collapsed
747
- if (this.isCollapsed) {
748
- return;
749
- }
750
- // Collapse it
751
- this.isCollapsed = true;
752
- if (this.item.id) {
753
- this._navigationService.collapseItem(this.item.id);
754
- }
755
- // Mark for check
756
- this._changeDetectorRef.markForCheck();
757
- // Execute the observable
758
- this._navigationComponent.onCollapsableItemCollapsed.next(this.item);
759
- }
760
- /**
761
- * Expand
762
- */
763
- expand() {
764
- // Return if the item is disabled
765
- if (this.item.disabled) {
766
- return;
767
- }
768
- // Return if the item is already expanded
769
- if (!this.isCollapsed) {
770
- return;
771
- }
772
- // Expand it
773
- this.isCollapsed = false;
774
- if (this.item.id) {
775
- this._navigationService.expandItem(this.item.id);
776
- }
777
- // Mark for check
778
- this._changeDetectorRef.markForCheck();
779
- // Execute the observable
780
- this._navigationComponent.onCollapsableItemExpanded.next(this.item);
781
- }
782
- /**
783
- * Toggle collapsable
784
- */
785
- toggleCollapsable() {
786
- // Toggle collapse/expand
787
- if (this.isCollapsed) {
788
- this.expand();
789
- }
790
- else {
791
- this.collapse();
792
- }
793
- }
794
- /**
795
- * Track by function for ngFor loops
796
- */
797
- trackByFn(index, item) {
798
- return trackNavigationTreeItem(index, item);
799
- }
800
- shouldRenderItem(item) {
801
- return shouldRenderNavigationItem(item);
802
- }
803
- get treeTemplateData() {
804
- return { autoCollapse: this.autoCollapse };
805
- }
806
- /**
807
- * Check if the given item has the given url in one of its children
808
- */
809
- _hasActiveChild(item) {
810
- return hasActiveNavigationDescendant(item, (child) => isNavigationRoutableItem(child) && !!child.link && this._router.isActive(child.link, child.exactMatch || false));
811
- }
812
- /**
813
- * Check if this is a children of the given item
814
- */
815
- _isChildrenOf(parent, item) {
816
- return isNavigationTreeDescendant(parent, item);
817
- }
818
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationCollapsableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
819
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: VerticalNavigationCollapsableItemComponent, isStandalone: true, selector: "vertical-navigation-collapsable-item", inputs: { autoCollapse: "autoCollapse", item: "item" }, host: { properties: { "class.vertical-navigation-item-collapsed": "isCollapsed", "class.vertical-navigation-item-expanded": "isExpanded" } }, ngImport: i0, template: `
820
- <div
821
- class="vertical-navigation-item-wrapper"
822
- [class.vertical-navigation-item-has-subtitle]="!!item.subtitle"
823
- [ngClass]="item.classes?.wrapper">
824
- <div
825
- class="kit-navigation-item"
826
- [ngClass]="{
827
- 'kit-navigation-item-disabled': item.disabled,
828
- 'kit-navigation-item-expanded': isExpanded,
829
- }"
830
- [matTooltip]="item.tooltip || ''"
831
- role="button"
832
- tabindex="0"
833
- (click)="toggleCollapsable()"
834
- (keydown.enter)="toggleCollapsable()"
835
- (keydown.space)="$event.preventDefault(); toggleCollapsable()">
836
- <navigation-item-content [item]="item" variant="vertical"></navigation-item-content>
837
- <!-- State dot -->
838
- <span class="kit-navigation-item-dot" aria-hidden="true"></span>
839
- </div>
840
- </div>
841
-
842
- <!-- Children (with CSS transition instead of animation) -->
843
- <div
844
- class="kit-navigation-item-children"
845
- [class.kit-navigation-item-children-expanded]="!isCollapsed"
846
- [class.kit-navigation-item-children-collapsed]="isCollapsed">
847
- @if (!isCollapsed) {
848
- <navigation-tree-outlet
849
- [items]="item.children"
850
- [data]="treeTemplateData"
851
- [branchTemplate]="branchItem"
852
- [leafTemplate]="leafItem"
853
- [groupTemplate]="groupItem"
854
- [dividerTemplate]="dividerItem"
855
- [spacerTemplate]="spacerItem"
856
- [trackByFn]="treeTrackByFn"
857
- [shouldRenderItemFn]="treeShouldRenderItemFn" />
858
- }
859
- </div>
860
-
861
- <ng-template #branchItem let-child let-data="data">
862
- @if (child.type === 'aside') {
863
- <vertical-navigation-aside-item [item]="child" [autoCollapse]="data?.['autoCollapse'] === true">
864
- </vertical-navigation-aside-item>
865
- } @else {
866
- <vertical-navigation-collapsable-item [item]="child" [autoCollapse]="data?.['autoCollapse'] !== false">
867
- </vertical-navigation-collapsable-item>
868
- }
869
- </ng-template>
870
-
871
- <ng-template #leafItem let-child>
872
- <vertical-navigation-basic-item [item]="child"></vertical-navigation-basic-item>
873
- </ng-template>
874
-
875
- <ng-template #groupItem let-child let-data="data">
876
- <div
877
- class="vertical-navigation-item-wrapper"
878
- [class.vertical-navigation-item-has-subtitle]="!!child.subtitle"
879
- [ngClass]="child.classes?.wrapper">
880
- <div class="kit-navigation-group-header">
881
- <navigation-item-content [item]="child" variant="vertical-group"></navigation-item-content>
882
- </div>
883
- </div>
884
- </ng-template>
885
-
886
- <ng-template #dividerItem>
887
- <vertical-navigation-divider-item></vertical-navigation-divider-item>
888
- </ng-template>
889
-
890
- <ng-template #spacerItem>
891
- <vertical-navigation-spacer-item></vertical-navigation-spacer-item>
892
- </ng-template>
893
- `, isInline: true, styles: [".kit-navigation-item-dot{margin-left:auto;width:.5rem;height:.5rem;flex-shrink:0;border-radius:9999px;background:#9ca3af;opacity:.85;transition:background-color .18s ease,transform .18s ease,opacity .18s ease}.kit-navigation-item:hover .kit-navigation-item-dot{opacity:1}.kit-navigation-item.kit-navigation-item-expanded .kit-navigation-item-dot{background:#16a34a;opacity:1;transform:scale(1.1)}.kit-navigation-item-children{overflow:hidden;max-height:0;opacity:0;transition:max-height .3s cubic-bezier(.25,.8,.25,1),opacity .3s cubic-bezier(.25,.8,.25,1)}.kit-navigation-item-children-expanded{max-height:2000px;opacity:1}.kit-navigation-item-children-collapsed{max-height:0;opacity:0}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => VerticalNavigationCollapsableItemComponent), selector: "vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i1.MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i0.forwardRef(() => NavigationItemContent), selector: "navigation-item-content", inputs: ["item", "level", "variant"] }, { kind: "component", type: i0.forwardRef(() => NavigationTreeOutlet), selector: "navigation-tree-outlet", inputs: ["items", "level", "parentKey", "data", "branchTemplate", "leafTemplate", "groupTemplate", "dividerTemplate", "spacerTemplate", "trackByFn", "shouldRenderItemFn", "hasChildrenFn", "resolveParentKeyFn"] }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationAsideItemComponent), selector: "vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "skipChildren"] }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationBasicItemComponent), selector: "vertical-navigation-basic-item", inputs: ["item"] }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationDividerItemComponent), selector: "vertical-navigation-divider-item" }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationSpacerItemComponent), selector: "vertical-navigation-spacer-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
894
- }
895
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationCollapsableItemComponent, decorators: [{
896
- type: Component,
897
- args: [{ selector: 'vertical-navigation-collapsable-item', template: `
898
- <div
899
- class="vertical-navigation-item-wrapper"
900
- [class.vertical-navigation-item-has-subtitle]="!!item.subtitle"
901
- [ngClass]="item.classes?.wrapper">
902
- <div
903
- class="kit-navigation-item"
904
- [ngClass]="{
905
- 'kit-navigation-item-disabled': item.disabled,
906
- 'kit-navigation-item-expanded': isExpanded,
907
- }"
908
- [matTooltip]="item.tooltip || ''"
909
- role="button"
910
- tabindex="0"
911
- (click)="toggleCollapsable()"
912
- (keydown.enter)="toggleCollapsable()"
913
- (keydown.space)="$event.preventDefault(); toggleCollapsable()">
914
- <navigation-item-content [item]="item" variant="vertical"></navigation-item-content>
915
- <!-- State dot -->
916
- <span class="kit-navigation-item-dot" aria-hidden="true"></span>
917
- </div>
918
- </div>
919
-
920
- <!-- Children (with CSS transition instead of animation) -->
921
- <div
922
- class="kit-navigation-item-children"
923
- [class.kit-navigation-item-children-expanded]="!isCollapsed"
924
- [class.kit-navigation-item-children-collapsed]="isCollapsed">
925
- @if (!isCollapsed) {
926
- <navigation-tree-outlet
927
- [items]="item.children"
928
- [data]="treeTemplateData"
929
- [branchTemplate]="branchItem"
930
- [leafTemplate]="leafItem"
931
- [groupTemplate]="groupItem"
932
- [dividerTemplate]="dividerItem"
933
- [spacerTemplate]="spacerItem"
934
- [trackByFn]="treeTrackByFn"
935
- [shouldRenderItemFn]="treeShouldRenderItemFn" />
936
- }
937
- </div>
938
-
939
- <ng-template #branchItem let-child let-data="data">
940
- @if (child.type === 'aside') {
941
- <vertical-navigation-aside-item [item]="child" [autoCollapse]="data?.['autoCollapse'] === true">
942
- </vertical-navigation-aside-item>
943
- } @else {
944
- <vertical-navigation-collapsable-item [item]="child" [autoCollapse]="data?.['autoCollapse'] !== false">
945
- </vertical-navigation-collapsable-item>
946
- }
947
- </ng-template>
948
-
949
- <ng-template #leafItem let-child>
950
- <vertical-navigation-basic-item [item]="child"></vertical-navigation-basic-item>
951
- </ng-template>
952
-
953
- <ng-template #groupItem let-child let-data="data">
954
- <div
955
- class="vertical-navigation-item-wrapper"
956
- [class.vertical-navigation-item-has-subtitle]="!!child.subtitle"
957
- [ngClass]="child.classes?.wrapper">
958
- <div class="kit-navigation-group-header">
959
- <navigation-item-content [item]="child" variant="vertical-group"></navigation-item-content>
960
- </div>
961
- </div>
962
- </ng-template>
963
-
964
- <ng-template #dividerItem>
965
- <vertical-navigation-divider-item></vertical-navigation-divider-item>
966
- </ng-template>
967
-
968
- <ng-template #spacerItem>
969
- <vertical-navigation-spacer-item></vertical-navigation-spacer-item>
970
- </ng-template>
971
- `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
972
- NgClass,
973
- MatTooltipModule,
974
- NavigationItemContent,
975
- NavigationTreeOutlet,
976
- forwardRef(() => VerticalNavigationAsideItemComponent),
977
- VerticalNavigationBasicItemComponent,
978
- forwardRef(() => VerticalNavigationCollapsableItemComponent),
979
- VerticalNavigationDividerItemComponent,
980
- VerticalNavigationSpacerItemComponent,
981
- ], host: {
982
- '[class.vertical-navigation-item-collapsed]': 'isCollapsed',
983
- '[class.vertical-navigation-item-expanded]': 'isExpanded',
984
- }, styles: [".kit-navigation-item-dot{margin-left:auto;width:.5rem;height:.5rem;flex-shrink:0;border-radius:9999px;background:#9ca3af;opacity:.85;transition:background-color .18s ease,transform .18s ease,opacity .18s ease}.kit-navigation-item:hover .kit-navigation-item-dot{opacity:1}.kit-navigation-item.kit-navigation-item-expanded .kit-navigation-item-dot{background:#16a34a;opacity:1;transform:scale(1.1)}.kit-navigation-item-children{overflow:hidden;max-height:0;opacity:0;transition:max-height .3s cubic-bezier(.25,.8,.25,1),opacity .3s cubic-bezier(.25,.8,.25,1)}.kit-navigation-item-children-expanded{max-height:2000px;opacity:1}.kit-navigation-item-children-collapsed{max-height:0;opacity:0}\n"] }]
985
- }], propDecorators: { autoCollapse: [{
986
- type: Input
987
- }], item: [{
988
- type: Input
989
- }] } });
990
-
991
- class VerticalNavigationAsideItemComponent {
992
- _changeDetectorRef = inject(ChangeDetectorRef);
993
- _navigationComponent = inject(VerticalNavigationBaseComponent);
994
- _router = inject(Router);
995
- activeItemId;
996
- autoCollapse = true;
997
- item;
998
- skipChildren = false;
999
- active = false;
1000
- treeTrackByFn = trackNavigationTreeItem;
1001
- treeShouldRenderItemFn = shouldRenderNavigationItem;
1002
- _unsubscribeAll = new Subject();
1003
- /**
1004
- * On changes
1005
- */
1006
- ngOnChanges(changes) {
1007
- // Active item id
1008
- if ('activeItemId' in changes) {
1009
- // Mark if active
1010
- this._markIfActive();
1011
- }
1012
- }
1013
- /**
1014
- * On init
1015
- */
1016
- ngOnInit() {
1017
- // Mark if active
1018
- this._markIfActive();
1019
- // Attach a listener to the NavigationEnd event
1020
- this._router.events
1021
- .pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this._unsubscribeAll))
1022
- .subscribe(() => {
1023
- // Mark if active
1024
- this._markIfActive();
1025
- });
1026
- // Subscribe to onRefreshed on the navigation component
1027
- this._navigationComponent.onRefreshed.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
1028
- // Mark for check
1029
- this._changeDetectorRef.markForCheck();
1030
- });
1031
- }
1032
- /**
1033
- * On destroy
1034
- */
1035
- ngOnDestroy() {
1036
- // Unsubscribe from all subscriptions
1037
- this._unsubscribeAll.next();
1038
- this._unsubscribeAll.complete();
1039
- }
1040
- /**
1041
- * Track by function for ngFor loops
1042
- */
1043
- trackByFn(index, item) {
1044
- return trackNavigationTreeItem(index, item);
1045
- }
1046
- shouldRenderItem(item) {
1047
- return shouldRenderNavigationItem(item);
1048
- }
1049
- get treeTemplateData() {
1050
- return { autoCollapse: this.autoCollapse };
1051
- }
1052
- /**
1053
- * Check if the given item has the given url in one of its children
1054
- */
1055
- _hasActiveChild(item) {
1056
- return hasActiveNavigationDescendant(item, (child) => child.type === 'basic' && !!child.link && this._router.isActive(child.link, child.exactMatch || false));
1057
- }
1058
- /**
1059
- * Decide and mark if the item is active
1060
- */
1061
- _markIfActive() {
1062
- // Check if the activeItemId is equals to this item id
1063
- this.active = this.activeItemId === this.item.id;
1064
- // If the aside has a children that is active, always mark it as active
1065
- if (this._hasActiveChild(this.item)) {
1066
- this.active = true;
1067
- }
1068
- // Mark for check
1069
- this._changeDetectorRef.markForCheck();
1070
- }
1071
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationAsideItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1072
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: VerticalNavigationAsideItemComponent, isStandalone: true, selector: "vertical-navigation-aside-item", inputs: { activeItemId: "activeItemId", autoCollapse: "autoCollapse", item: "item", skipChildren: "skipChildren" }, usesOnChanges: true, ngImport: i0, template: `
1073
- <div
1074
- class="vertical-navigation-item-wrapper"
1075
- [class.vertical-navigation-item-has-subtitle]="!!item.subtitle"
1076
- [ngClass]="item.classes?.wrapper">
1077
- <div
1078
- class="kit-navigation-item"
1079
- [ngClass]="{
1080
- 'kit-navigation-item-active': active,
1081
- 'kit-navigation-item-disabled': item.disabled,
1082
- 'kit-navigation-item-active-forced': item.active,
1083
- }"
1084
- [matTooltip]="item.tooltip || ''">
1085
- <navigation-item-content [item]="item" variant="vertical"></navigation-item-content>
1086
- </div>
1087
- </div>
1088
-
1089
- <!-- Children -->
1090
- @if (!skipChildren) {
1091
- <div class="kit-navigation-item-children">
1092
- <navigation-tree-outlet
1093
- [items]="item.children"
1094
- [data]="treeTemplateData"
1095
- [branchTemplate]="branchItem"
1096
- [leafTemplate]="leafItem"
1097
- [groupTemplate]="groupItem"
1098
- [dividerTemplate]="dividerItem"
1099
- [spacerTemplate]="spacerItem"
1100
- [trackByFn]="treeTrackByFn"
1101
- [shouldRenderItemFn]="treeShouldRenderItemFn" />
1102
- </div>
1103
- }
1104
-
1105
- <ng-template #branchItem let-child let-data="data">
1106
- @if (child.type === 'aside') {
1107
- <vertical-navigation-aside-item [item]="child" [autoCollapse]="data?.['autoCollapse'] === true">
1108
- </vertical-navigation-aside-item>
1109
- } @else {
1110
- <vertical-navigation-collapsable-item [item]="child" [autoCollapse]="data?.['autoCollapse'] !== false">
1111
- </vertical-navigation-collapsable-item>
1112
- }
1113
- </ng-template>
1114
-
1115
- <ng-template #leafItem let-child>
1116
- <vertical-navigation-basic-item [item]="child"></vertical-navigation-basic-item>
1117
- </ng-template>
1118
-
1119
- <ng-template #groupItem let-child>
1120
- <div
1121
- class="vertical-navigation-item-wrapper"
1122
- [class.vertical-navigation-item-has-subtitle]="!!child.subtitle"
1123
- [ngClass]="child.classes?.wrapper">
1124
- <div class="kit-navigation-group-header">
1125
- <navigation-item-content [item]="child" variant="vertical-group"></navigation-item-content>
1126
- </div>
1127
- </div>
1128
- </ng-template>
1129
-
1130
- <ng-template #dividerItem>
1131
- <vertical-navigation-divider-item></vertical-navigation-divider-item>
1132
- </ng-template>
1133
-
1134
- <ng-template #spacerItem>
1135
- <vertical-navigation-spacer-item></vertical-navigation-spacer-item>
1136
- </ng-template>
1137
- `, isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => VerticalNavigationAsideItemComponent), selector: "vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "skipChildren"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i1.MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i0.forwardRef(() => NavigationItemContent), selector: "navigation-item-content", inputs: ["item", "level", "variant"] }, { kind: "component", type: i0.forwardRef(() => NavigationTreeOutlet), selector: "navigation-tree-outlet", inputs: ["items", "level", "parentKey", "data", "branchTemplate", "leafTemplate", "groupTemplate", "dividerTemplate", "spacerTemplate", "trackByFn", "shouldRenderItemFn", "hasChildrenFn", "resolveParentKeyFn"] }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationBasicItemComponent), selector: "vertical-navigation-basic-item", inputs: ["item"] }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationCollapsableItemComponent), selector: "vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item"] }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationDividerItemComponent), selector: "vertical-navigation-divider-item" }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationSpacerItemComponent), selector: "vertical-navigation-spacer-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1138
- }
1139
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationAsideItemComponent, decorators: [{
1140
- type: Component,
1141
- args: [{
1142
- selector: 'vertical-navigation-aside-item',
1143
- template: `
1144
- <div
1145
- class="vertical-navigation-item-wrapper"
1146
- [class.vertical-navigation-item-has-subtitle]="!!item.subtitle"
1147
- [ngClass]="item.classes?.wrapper">
1148
- <div
1149
- class="kit-navigation-item"
1150
- [ngClass]="{
1151
- 'kit-navigation-item-active': active,
1152
- 'kit-navigation-item-disabled': item.disabled,
1153
- 'kit-navigation-item-active-forced': item.active,
1154
- }"
1155
- [matTooltip]="item.tooltip || ''">
1156
- <navigation-item-content [item]="item" variant="vertical"></navigation-item-content>
1157
- </div>
1158
- </div>
1159
-
1160
- <!-- Children -->
1161
- @if (!skipChildren) {
1162
- <div class="kit-navigation-item-children">
1163
- <navigation-tree-outlet
1164
- [items]="item.children"
1165
- [data]="treeTemplateData"
1166
- [branchTemplate]="branchItem"
1167
- [leafTemplate]="leafItem"
1168
- [groupTemplate]="groupItem"
1169
- [dividerTemplate]="dividerItem"
1170
- [spacerTemplate]="spacerItem"
1171
- [trackByFn]="treeTrackByFn"
1172
- [shouldRenderItemFn]="treeShouldRenderItemFn" />
1173
- </div>
1174
- }
1175
-
1176
- <ng-template #branchItem let-child let-data="data">
1177
- @if (child.type === 'aside') {
1178
- <vertical-navigation-aside-item [item]="child" [autoCollapse]="data?.['autoCollapse'] === true">
1179
- </vertical-navigation-aside-item>
1180
- } @else {
1181
- <vertical-navigation-collapsable-item [item]="child" [autoCollapse]="data?.['autoCollapse'] !== false">
1182
- </vertical-navigation-collapsable-item>
1183
- }
1184
- </ng-template>
1185
-
1186
- <ng-template #leafItem let-child>
1187
- <vertical-navigation-basic-item [item]="child"></vertical-navigation-basic-item>
1188
- </ng-template>
1189
-
1190
- <ng-template #groupItem let-child>
1191
- <div
1192
- class="vertical-navigation-item-wrapper"
1193
- [class.vertical-navigation-item-has-subtitle]="!!child.subtitle"
1194
- [ngClass]="child.classes?.wrapper">
1195
- <div class="kit-navigation-group-header">
1196
- <navigation-item-content [item]="child" variant="vertical-group"></navigation-item-content>
1197
- </div>
1198
- </div>
1199
- </ng-template>
1200
-
1201
- <ng-template #dividerItem>
1202
- <vertical-navigation-divider-item></vertical-navigation-divider-item>
1203
- </ng-template>
1204
-
1205
- <ng-template #spacerItem>
1206
- <vertical-navigation-spacer-item></vertical-navigation-spacer-item>
1207
- </ng-template>
1208
- `,
1209
- encapsulation: ViewEncapsulation.None,
1210
- changeDetection: ChangeDetectionStrategy.OnPush,
1211
- imports: [
1212
- NgClass,
1213
- MatTooltipModule,
1214
- NavigationItemContent,
1215
- NavigationTreeOutlet,
1216
- VerticalNavigationBasicItemComponent,
1217
- forwardRef(() => VerticalNavigationCollapsableItemComponent),
1218
- VerticalNavigationDividerItemComponent,
1219
- VerticalNavigationSpacerItemComponent,
1220
- ],
1221
- }]
1222
- }], propDecorators: { activeItemId: [{
1223
- type: Input
1224
- }], autoCollapse: [{
1225
- type: Input
1226
- }], item: [{
1227
- type: Input
1228
- }], skipChildren: [{
1229
- type: Input
1230
- }] } });
1231
-
1232
- class VerticalNavigationGroupItemComponent {
1233
- _changeDetectorRef = inject(ChangeDetectorRef);
1234
- _navigationComponent = inject(VerticalNavigationBaseComponent);
1235
- autoCollapse = true;
1236
- item;
1237
- _unsubscribeAll = new Subject();
1238
- treeTrackByFn = trackNavigationTreeItem;
1239
- treeShouldRenderItemFn = shouldRenderNavigationItem;
1240
- /**
1241
- * On init
1242
- */
1243
- ngOnInit() {
1244
- // Subscribe to onRefreshed on the navigation component
1245
- this._navigationComponent.onRefreshed.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
1246
- // Mark for check
1247
- this._changeDetectorRef.markForCheck();
1248
- });
1249
- }
1250
- /**
1251
- * On destroy
1252
- */
1253
- ngOnDestroy() {
1254
- // Unsubscribe from all subscriptions
1255
- this._unsubscribeAll.next();
1256
- this._unsubscribeAll.complete();
1257
- }
1258
- /**
1259
- * Track by function for ngFor loops
1260
- */
1261
- trackByFn(index, item) {
1262
- return trackNavigationTreeItem(index, item);
1263
- }
1264
- shouldRenderItem(item) {
1265
- return shouldRenderNavigationItem(item);
1266
- }
1267
- get treeTemplateData() {
1268
- return { autoCollapse: this.autoCollapse };
1269
- }
1270
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1271
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: VerticalNavigationGroupItemComponent, isStandalone: true, selector: "vertical-navigation-group-item", inputs: { autoCollapse: "autoCollapse", item: "item" }, ngImport: i0, template: `
1272
- <!-- Item wrapper -->
1273
- <div
1274
- class="vertical-navigation-item-wrapper"
1275
- [class.vertical-navigation-item-has-subtitle]="!!item.subtitle"
1276
- [ngClass]="item.classes?.wrapper">
1277
- <div class="kit-navigation-group-header">
1278
- <navigation-item-content [item]="item" variant="vertical-group"></navigation-item-content>
1279
- </div>
1280
- </div>
1281
-
1282
- <navigation-tree-outlet
1283
- [items]="item.children"
1284
- [data]="treeTemplateData"
1285
- [branchTemplate]="branchItem"
1286
- [leafTemplate]="leafItem"
1287
- [groupTemplate]="groupItem"
1288
- [dividerTemplate]="dividerItem"
1289
- [spacerTemplate]="spacerItem"
1290
- [trackByFn]="treeTrackByFn"
1291
- [shouldRenderItemFn]="treeShouldRenderItemFn" />
1292
-
1293
- <ng-template #branchItem let-child let-data="data">
1294
- @if (child.type === 'aside') {
1295
- <vertical-navigation-aside-item [item]="child" [autoCollapse]="data?.['autoCollapse'] === true">
1296
- </vertical-navigation-aside-item>
1297
- } @else {
1298
- <vertical-navigation-collapsable-item [item]="child" [autoCollapse]="data?.['autoCollapse'] !== false">
1299
- </vertical-navigation-collapsable-item>
1300
- }
1301
- </ng-template>
1302
-
1303
- <ng-template #leafItem let-child>
1304
- <vertical-navigation-basic-item [item]="child"></vertical-navigation-basic-item>
1305
- </ng-template>
1306
-
1307
- <ng-template #groupItem let-child>
1308
- <div
1309
- class="vertical-navigation-item-wrapper"
1310
- [class.vertical-navigation-item-has-subtitle]="!!child.subtitle"
1311
- [ngClass]="child.classes?.wrapper">
1312
- <div class="kit-navigation-group-header">
1313
- <navigation-item-content [item]="child" variant="vertical-group"></navigation-item-content>
1314
- </div>
1315
- </div>
1316
- </ng-template>
1317
-
1318
- <ng-template #dividerItem>
1319
- <vertical-navigation-divider-item></vertical-navigation-divider-item>
1320
- </ng-template>
1321
-
1322
- <ng-template #spacerItem>
1323
- <vertical-navigation-spacer-item></vertical-navigation-spacer-item>
1324
- </ng-template>
1325
- `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i0.forwardRef(() => NavigationItemContent), selector: "navigation-item-content", inputs: ["item", "level", "variant"] }, { kind: "component", type: i0.forwardRef(() => NavigationTreeOutlet), selector: "navigation-tree-outlet", inputs: ["items", "level", "parentKey", "data", "branchTemplate", "leafTemplate", "groupTemplate", "dividerTemplate", "spacerTemplate", "trackByFn", "shouldRenderItemFn", "hasChildrenFn", "resolveParentKeyFn"] }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationAsideItemComponent), selector: "vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "skipChildren"] }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationBasicItemComponent), selector: "vertical-navigation-basic-item", inputs: ["item"] }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationCollapsableItemComponent), selector: "vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item"] }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationDividerItemComponent), selector: "vertical-navigation-divider-item" }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationSpacerItemComponent), selector: "vertical-navigation-spacer-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1326
- }
1327
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationGroupItemComponent, decorators: [{
1328
- type: Component,
1329
- args: [{
1330
- selector: 'vertical-navigation-group-item',
1331
- template: `
1332
- <!-- Item wrapper -->
1333
- <div
1334
- class="vertical-navigation-item-wrapper"
1335
- [class.vertical-navigation-item-has-subtitle]="!!item.subtitle"
1336
- [ngClass]="item.classes?.wrapper">
1337
- <div class="kit-navigation-group-header">
1338
- <navigation-item-content [item]="item" variant="vertical-group"></navigation-item-content>
1339
- </div>
1340
- </div>
1341
-
1342
- <navigation-tree-outlet
1343
- [items]="item.children"
1344
- [data]="treeTemplateData"
1345
- [branchTemplate]="branchItem"
1346
- [leafTemplate]="leafItem"
1347
- [groupTemplate]="groupItem"
1348
- [dividerTemplate]="dividerItem"
1349
- [spacerTemplate]="spacerItem"
1350
- [trackByFn]="treeTrackByFn"
1351
- [shouldRenderItemFn]="treeShouldRenderItemFn" />
1352
-
1353
- <ng-template #branchItem let-child let-data="data">
1354
- @if (child.type === 'aside') {
1355
- <vertical-navigation-aside-item [item]="child" [autoCollapse]="data?.['autoCollapse'] === true">
1356
- </vertical-navigation-aside-item>
1357
- } @else {
1358
- <vertical-navigation-collapsable-item [item]="child" [autoCollapse]="data?.['autoCollapse'] !== false">
1359
- </vertical-navigation-collapsable-item>
1360
- }
1361
- </ng-template>
1362
-
1363
- <ng-template #leafItem let-child>
1364
- <vertical-navigation-basic-item [item]="child"></vertical-navigation-basic-item>
1365
- </ng-template>
1366
-
1367
- <ng-template #groupItem let-child>
1368
- <div
1369
- class="vertical-navigation-item-wrapper"
1370
- [class.vertical-navigation-item-has-subtitle]="!!child.subtitle"
1371
- [ngClass]="child.classes?.wrapper">
1372
- <div class="kit-navigation-group-header">
1373
- <navigation-item-content [item]="child" variant="vertical-group"></navigation-item-content>
1374
- </div>
1375
- </div>
1376
- </ng-template>
1377
-
1378
- <ng-template #dividerItem>
1379
- <vertical-navigation-divider-item></vertical-navigation-divider-item>
1380
- </ng-template>
1381
-
1382
- <ng-template #spacerItem>
1383
- <vertical-navigation-spacer-item></vertical-navigation-spacer-item>
1384
- </ng-template>
1385
- `,
1386
- encapsulation: ViewEncapsulation.None,
1387
- changeDetection: ChangeDetectionStrategy.OnPush,
1388
- imports: [
1389
- NgClass,
1390
- NavigationItemContent,
1391
- NavigationTreeOutlet,
1392
- forwardRef(() => VerticalNavigationAsideItemComponent),
1393
- VerticalNavigationBasicItemComponent,
1394
- forwardRef(() => VerticalNavigationCollapsableItemComponent),
1395
- VerticalNavigationDividerItemComponent,
1396
- VerticalNavigationSpacerItemComponent,
1397
- ],
1398
- }]
1399
- }], propDecorators: { autoCollapse: [{
1400
- type: Input
1401
- }], item: [{
1402
- type: Input
1403
- }] } });
1404
-
1405
- const VERTICAL_NAVIGATION_TEMPLATE = `
1406
- <div class="vertical-navigation-wrapper">
1407
- <div class="vertical-navigation-header">
1408
- <ng-content select="[verticalNavigationHeader]"></ng-content>
1409
- </div>
1410
-
1411
- <div class="vertical-navigation-content" #navigationContent>
1412
- <div class="vertical-navigation-content-header">
1413
- <ng-content select="[verticalNavigationContentHeader]"></ng-content>
1414
- </div>
1415
-
1416
- @for (item of navigation; track trackByFn($index, item)) {
1417
- @if (shouldRenderItem(item)) {
1418
- @switch (item.type) {
1419
- @case ('aside') {
1420
- <vertical-navigation-aside-item
1421
- [item]="item"
1422
- [activeItemId]="activeAsideItemId"
1423
- [autoCollapse]="autoCollapse"
1424
- [skipChildren]="true"
1425
- (click)="toggleAside(item)"
1426
- >
1427
- </vertical-navigation-aside-item>
1428
- }
1429
-
1430
- @case ('basic') {
1431
- <vertical-navigation-basic-item [item]="item">
1432
- </vertical-navigation-basic-item>
1433
- }
1434
-
1435
- @case ('collapsable') {
1436
- <vertical-navigation-collapsable-item
1437
- [item]="item"
1438
- [autoCollapse]="autoCollapse"
1439
- >
1440
- </vertical-navigation-collapsable-item>
1441
- }
1442
-
1443
- @case ('divider') {
1444
- <vertical-navigation-divider-item></vertical-navigation-divider-item>
1445
- }
1446
-
1447
- @case ('group') {
1448
- <vertical-navigation-group-item
1449
- [item]="item"
1450
- [autoCollapse]="autoCollapse"
1451
- >
1452
- </vertical-navigation-group-item>
1453
- }
1454
-
1455
- @case ('spacer') {
1456
- <vertical-navigation-spacer-item></vertical-navigation-spacer-item>
1457
- }
1458
- }
1459
- }
1460
- }
1461
-
1462
- <div class="vertical-navigation-content-footer">
1463
- <ng-content select="[verticalNavigationContentFooter]"></ng-content>
1464
- </div>
1465
- </div>
1466
-
1467
- <div class="vertical-navigation-footer">
1468
- <ng-content select="[verticalNavigationFooter]"></ng-content>
1469
- </div>
1470
- </div>
1471
-
1472
- @if (activeAsideNavigationItem(); as activeAsideItem) {
1473
- <div [class]="asideWrapperClass">
1474
- <vertical-navigation-aside-item
1475
- [item]="activeAsideItem"
1476
- [autoCollapse]="autoCollapse"
1477
- >
1478
- </vertical-navigation-aside-item>
1479
- </div>
1480
- }
1481
- `;
1482
- const VERTICAL_NAVIGATION_IMPORTS = [
1483
- VerticalNavigationAsideItemComponent,
1484
- VerticalNavigationBasicItemComponent,
1485
- VerticalNavigationCollapsableItemComponent,
1486
- VerticalNavigationDividerItemComponent,
1487
- VerticalNavigationGroupItemComponent,
1488
- VerticalNavigationSpacerItemComponent,
1489
- ];
1490
- const VERTICAL_NAVIGATION_HOST = {
1491
- '[class]': 'hostClasses',
1492
- '[style.visibility]': 'opened ? "visible" : "hidden"',
1493
- '(mouseenter)': 'onMouseenter()',
1494
- '(mouseleave)': 'onMouseleave()',
1495
- };
1496
- function provideVerticalNavigationComponent(component) {
1497
- return {
1498
- provide: VerticalNavigationBaseComponent,
1499
- useExisting: forwardRef(() => component),
1500
- };
1501
- }
1502
-
1503
- class VerticalNavigationDefaultComponent extends VerticalNavigationBaseComponent {
1504
- _componentPrefix = 'vertical-navigation';
1505
- _asideWrapperClass = 'vertical-navigation-aside-wrapper';
1506
- appearance = 'default';
1507
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationDefaultComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1508
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: VerticalNavigationDefaultComponent, isStandalone: true, selector: "vertical-navigation", inputs: { appearance: "appearance" }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" }, properties: { "class": "hostClasses", "style.visibility": "opened ? \"visible\" : \"hidden\"" } }, providers: [provideVerticalNavigationComponent(VerticalNavigationDefaultComponent)], exportAs: ["verticalNavigationDefault"], usesInheritance: true, ngImport: i0, template: "\n <div class=\"vertical-navigation-wrapper\">\n <div class=\"vertical-navigation-header\">\n <ng-content select=\"[verticalNavigationHeader]\"></ng-content>\n </div>\n\n <div class=\"vertical-navigation-content\" #navigationContent>\n <div class=\"vertical-navigation-content-header\">\n <ng-content select=\"[verticalNavigationContentHeader]\"></ng-content>\n </div>\n\n @for (item of navigation; track trackByFn($index, item)) {\n @if (shouldRenderItem(item)) {\n @switch (item.type) {\n @case ('aside') {\n <vertical-navigation-aside-item\n [item]=\"item\"\n [activeItemId]=\"activeAsideItemId\"\n [autoCollapse]=\"autoCollapse\"\n [skipChildren]=\"true\"\n (click)=\"toggleAside(item)\"\n >\n </vertical-navigation-aside-item>\n }\n\n @case ('basic') {\n <vertical-navigation-basic-item [item]=\"item\">\n </vertical-navigation-basic-item>\n }\n\n @case ('collapsable') {\n <vertical-navigation-collapsable-item\n [item]=\"item\"\n [autoCollapse]=\"autoCollapse\"\n >\n </vertical-navigation-collapsable-item>\n }\n\n @case ('divider') {\n <vertical-navigation-divider-item></vertical-navigation-divider-item>\n }\n\n @case ('group') {\n <vertical-navigation-group-item\n [item]=\"item\"\n [autoCollapse]=\"autoCollapse\"\n >\n </vertical-navigation-group-item>\n }\n\n @case ('spacer') {\n <vertical-navigation-spacer-item></vertical-navigation-spacer-item>\n }\n }\n }\n }\n\n <div class=\"vertical-navigation-content-footer\">\n <ng-content select=\"[verticalNavigationContentFooter]\"></ng-content>\n </div>\n </div>\n\n <div class=\"vertical-navigation-footer\">\n <ng-content select=\"[verticalNavigationFooter]\"></ng-content>\n </div>\n </div>\n\n @if (activeAsideNavigationItem(); as activeAsideItem) {\n <div [class]=\"asideWrapperClass\">\n <vertical-navigation-aside-item\n [item]=\"activeAsideItem\"\n [autoCollapse]=\"autoCollapse\"\n >\n </vertical-navigation-aside-item>\n </div>\n }\n", isInline: true, styles: [":root{--vertical-navigation-width: 280px}vertical-navigation{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:var(--vertical-navigation-width);min-width:var(--vertical-navigation-width);max-width:var(--vertical-navigation-width);height:100%;min-height:0;max-height:100%;z-index:200}vertical-navigation.vertical-navigation-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}vertical-navigation.vertical-navigation-animations-enabled .vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}vertical-navigation.vertical-navigation-mode-over{position:fixed;top:0;bottom:0;height:100vh;min-height:100vh;max-height:100vh}vertical-navigation.vertical-navigation-position-left.vertical-navigation-mode-side{margin-left:calc(var(--vertical-navigation-width) * -1)}vertical-navigation.vertical-navigation-position-left.vertical-navigation-mode-side.vertical-navigation-opened{margin-left:0}vertical-navigation.vertical-navigation-position-left.vertical-navigation-mode-over{left:0;transform:translate3d(-100%,0,0)}vertical-navigation.vertical-navigation-position-left.vertical-navigation-mode-over.vertical-navigation-opened{transform:translateZ(0)}vertical-navigation.vertical-navigation-position-left .vertical-navigation-wrapper{left:0}vertical-navigation.vertical-navigation-position-right.vertical-navigation-mode-side{margin-right:calc(var(--vertical-navigation-width) * -1)}vertical-navigation.vertical-navigation-position-right.vertical-navigation-mode-side.vertical-navigation-opened{margin-right:0}vertical-navigation.vertical-navigation-position-right.vertical-navigation-mode-over{right:0;transform:translate3d(100%,0,0)}vertical-navigation.vertical-navigation-position-right.vertical-navigation-mode-over.vertical-navigation-opened{transform:translateZ(0)}vertical-navigation.vertical-navigation-position-right .vertical-navigation-wrapper{right:0}vertical-navigation.vertical-navigation-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}vertical-navigation.vertical-navigation-inner .vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}vertical-navigation.vertical-navigation-inner .vertical-navigation-wrapper .vertical-navigation-content{overflow:visible!important}.vertical-navigation-wrapper{display:flex;flex-direction:column;width:100%;height:100%;z-index:10;background:var(--background)}.vertical-navigation-header{flex:0 0 auto;background:var(--background);z-index:11}.vertical-navigation-content{flex:1 1 0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;min-height:0}.vertical-navigation-content>vertical-navigation-divider-item{margin:24px 0}.vertical-navigation-footer{flex:0 0 auto;background:var(--background);z-index:11}.vertical-navigation-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:var(--vertical-navigation-width);width:var(--vertical-navigation-width);height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition-duration:.4s;transition-property:left,right;transition-timing-function:cubic-bezier(.25,.8,.25,1);background:var(--background)}.vertical-navigation-aside-wrapper>vertical-navigation-aside-item{padding:24px 0}.vertical-navigation-aside-wrapper>vertical-navigation-aside-item>.vertical-navigation-item-wrapper{display:none!important}vertical-navigation.vertical-navigation-position-right .vertical-navigation-aside-wrapper{left:auto;right:var(--vertical-navigation-width)}vertical-navigation-aside-item,vertical-navigation-basic-item,vertical-navigation-collapsable-item,vertical-navigation-divider-item,vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}vertical-navigation-group-item{display:block;-webkit-user-select:none;user-select:none}.kit-navigation-item,.kit-navigation-group-header{font-family:var(--nav-font-family)}vertical-navigation-aside-item .vertical-navigation-item-wrapper .kit-navigation-item,vertical-navigation-basic-item .vertical-navigation-item-wrapper .kit-navigation-item,vertical-navigation-collapsable-item .vertical-navigation-item-wrapper .kit-navigation-item,vertical-navigation-group-item .vertical-navigation-item-wrapper .kit-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:var(--nav-item-font-size);font-weight:var(--nav-item-font-weight);line-height:var(--nav-item-line-height);text-decoration:none;border-radius:6px;color:var(--foreground)}.kit-navigation-item.kit-navigation-item-disabled{cursor:default;opacity:.4}.kit-navigation-item-icon{margin-right:8px;opacity:.6;color:currentColor}.kit-navigation-item-subtitle{font-size:var(--nav-subtitle-font-size);font-weight:var(--nav-subtitle-font-weight);line-height:var(--nav-subtitle-line-height);opacity:.5;color:currentColor}.kit-navigation-item-badge{margin-left:auto}.kit-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:var(--nav-badge-font-size);font-weight:var(--nav-badge-font-weight);line-height:var(--nav-badge-line-height);white-space:nowrap;height:20px}vertical-navigation-aside-item>.vertical-navigation-item-wrapper,vertical-navigation-basic-item>.vertical-navigation-item-wrapper,vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper{margin-bottom:-2px}vertical-navigation-aside-item .kit-navigation-item,vertical-navigation-basic-item .kit-navigation-item,vertical-navigation-collapsable-item .kit-navigation-item{cursor:pointer}vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover{background-color:color-mix(in oklch,var(--accent) 10%,transparent)}vertical-navigation-aside-item .kit-navigation-item:hover .kit-navigation-item-icon,vertical-navigation-basic-item .kit-navigation-item:hover .kit-navigation-item-icon,vertical-navigation-collapsable-item .kit-navigation-item:hover .kit-navigation-item-icon{opacity:1}vertical-navigation-aside-item .kit-navigation-item:hover .kit-navigation-item-title,vertical-navigation-basic-item .kit-navigation-item:hover .kit-navigation-item-title,vertical-navigation-collapsable-item .kit-navigation-item:hover .kit-navigation-item-title{opacity:1}vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced{color:var(--primary);font-weight:var(--nav-item-active-font-weight)}vertical-navigation-aside-item .kit-navigation-item-active .kit-navigation-item-icon,vertical-navigation-basic-item .kit-navigation-item-active .kit-navigation-item-icon,vertical-navigation-collapsable-item .kit-navigation-item-active .kit-navigation-item-icon{opacity:1}vertical-navigation-aside-item .kit-navigation-item-active .kit-navigation-item-title,vertical-navigation-basic-item .kit-navigation-item-active .kit-navigation-item-title,vertical-navigation-collapsable-item .kit-navigation-item-active .kit-navigation-item-title{opacity:1}vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper .kit-navigation-item .kit-navigation-item-badge+.kit-navigation-item-dot{margin-left:8px}vertical-navigation-collapsable-item.vertical-navigation-item-expanded>.vertical-navigation-item-wrapper .kit-navigation-item .kit-navigation-item-icon,vertical-navigation-collapsable-item.vertical-navigation-item-expanded>.vertical-navigation-item-wrapper .kit-navigation-item .kit-navigation-item-title{opacity:1}vertical-navigation-collapsable-item>.kit-navigation-item-children>*:first-child,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>*:first-child{margin-top:6px}vertical-navigation-collapsable-item>.kit-navigation-item-children>*:last-child,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>*:last-child{margin-bottom:6px!important}vertical-navigation-collapsable-item>.kit-navigation-item-children .kit-navigation-item{padding:10px 16px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item .kit-navigation-item-icon{display:none}vertical-navigation-collapsable-item .kit-navigation-item-children{position:relative}vertical-navigation-collapsable-item>.kit-navigation-item-children{margin-left:28px!important;padding-left:20px!important;position:relative!important;padding-bottom:0!important}vertical-navigation-collapsable-item>.kit-navigation-item-children:before{content:\"\"!important;position:absolute!important;left:0!important;top:0!important;height:calc(100% - 26px)!important;width:1px!important;background:repeating-linear-gradient(to bottom,color-mix(in oklch,var(--foreground) 20%,transparent) 0,color-mix(in oklch,var(--foreground) 20%,transparent) 2px,transparent 2px,transparent 4px)!important;z-index:1!important;border-radius:0!important}vertical-navigation-collapsable-item>.kit-navigation-item-children>vertical-navigation-basic-item>.vertical-navigation-item-wrapper,vertical-navigation-collapsable-item>.kit-navigation-item-children>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-basic-item>.vertical-navigation-item-wrapper,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper{position:relative}vertical-navigation-collapsable-item>.kit-navigation-item-children>vertical-navigation-basic-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item>.kit-navigation-item-children>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-basic-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper:before{content:\"\"!important;position:absolute!important;left:-22px!important;top:50%!important;transform:translateY(-.5px)!important;width:22px!important;height:1px!important;background:repeating-linear-gradient(to right,color-mix(in oklch,var(--foreground) 20%,transparent) 0,color-mix(in oklch,var(--foreground) 20%,transparent) 2px,transparent 2px,transparent 4px)!important;z-index:2!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children{margin-left:10px!important;padding-left:15px!important;padding-bottom:0!important;position:relative!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children:before{content:\"\"!important;position:absolute!important;left:0!important;top:0!important;height:calc(100% - 26px)!important;width:1px!important;background:repeating-linear-gradient(to bottom,color-mix(in oklch,var(--foreground) 20%,transparent) 0,color-mix(in oklch,var(--foreground) 20%,transparent) 2px,transparent 2px,transparent 4px)!important;z-index:1!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>*:last-child,vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>navigation-tree-outlet>*:last-child{margin-bottom:6px!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>vertical-navigation-basic-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-basic-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper:before{content:\"\"!important;position:absolute!important;left:-17px!important;top:50%!important;transform:translateY(-.5px)!important;width:17px!important;height:1px!important;background:repeating-linear-gradient(to right,color-mix(in oklch,var(--foreground) 20%,transparent) 0,color-mix(in oklch,var(--foreground) 20%,transparent) 2px,transparent 2px,transparent 4px)!important;z-index:2!important}vertical-navigation-collapsable-item .kit-navigation-item-children{overflow:visible!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item{padding-left:8px!important;margin:0!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:72px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:88px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:104px}vertical-navigation-divider-item{margin:12px 0}vertical-navigation-group-item{position:relative;margin-top:24px}vertical-navigation-group-item:first-of-type{margin-top:0}vertical-navigation-group-item>.vertical-navigation-item-wrapper{position:relative}vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;padding:16px;margin:0;max-height:49px;background:var(--background)}vertical-navigation-group-item>.vertical-navigation-item-wrapper>vertical-navigation-basic-item:first-of-type,vertical-navigation-group-item>.vertical-navigation-item-wrapper>vertical-navigation-collapsable-item:first-of-type{margin-top:12px}vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header .kit-navigation-item-title-wrapper{flex:1}vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header .kit-navigation-item-badge,vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header .kit-navigation-item-icon{display:none!important}vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header .kit-navigation-group-title{font-size:var(--nav-group-title-font-size);font-weight:var(--nav-group-title-font-weight);letter-spacing:var(--nav-group-title-letter-spacing);text-transform:uppercase;color:var(--primary);opacity:1;line-height:var(--nav-group-title-line-height)}vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header .kit-navigation-group-subtitle{font-size:var(--nav-group-subtitle-font-size);font-weight:var(--nav-group-subtitle-font-weight);line-height:var(--nav-group-subtitle-line-height);color:var(--muted-foreground);opacity:.7;text-transform:none;letter-spacing:normal;margin-top:0}vertical-navigation-spacer-item{margin:6px 0}.vertical-navigation-overlay{position:absolute;inset:0;z-index:170;opacity:0;background-color:#0009;transition:opacity .3s cubic-bezier(.25,.8,.25,1)}.vertical-navigation-overlay+.vertical-navigation-aside-overlay{background-color:transparent}.vertical-navigation-aside-overlay{position:absolute;inset:0;z-index:169;opacity:0;background-color:#0000004d;transition:opacity .3s cubic-bezier(.25,.8,.25,1)}\n"], dependencies: [{ kind: "component", type: VerticalNavigationAsideItemComponent, selector: "vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "skipChildren"] }, { kind: "component", type: VerticalNavigationBasicItemComponent, selector: "vertical-navigation-basic-item", inputs: ["item"] }, { kind: "component", type: VerticalNavigationCollapsableItemComponent, selector: "vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item"] }, { kind: "component", type: VerticalNavigationDividerItemComponent, selector: "vertical-navigation-divider-item" }, { kind: "component", type: VerticalNavigationGroupItemComponent, selector: "vertical-navigation-group-item", inputs: ["autoCollapse", "item"] }, { kind: "component", type: VerticalNavigationSpacerItemComponent, selector: "vertical-navigation-spacer-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1509
- }
1510
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationDefaultComponent, decorators: [{
1511
- type: Component,
1512
- args: [{ selector: 'vertical-navigation', template: VERTICAL_NAVIGATION_TEMPLATE, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'verticalNavigationDefault', imports: VERTICAL_NAVIGATION_IMPORTS, host: VERTICAL_NAVIGATION_HOST, providers: [provideVerticalNavigationComponent(VerticalNavigationDefaultComponent)], styles: [":root{--vertical-navigation-width: 280px}vertical-navigation{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:var(--vertical-navigation-width);min-width:var(--vertical-navigation-width);max-width:var(--vertical-navigation-width);height:100%;min-height:0;max-height:100%;z-index:200}vertical-navigation.vertical-navigation-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}vertical-navigation.vertical-navigation-animations-enabled .vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}vertical-navigation.vertical-navigation-mode-over{position:fixed;top:0;bottom:0;height:100vh;min-height:100vh;max-height:100vh}vertical-navigation.vertical-navigation-position-left.vertical-navigation-mode-side{margin-left:calc(var(--vertical-navigation-width) * -1)}vertical-navigation.vertical-navigation-position-left.vertical-navigation-mode-side.vertical-navigation-opened{margin-left:0}vertical-navigation.vertical-navigation-position-left.vertical-navigation-mode-over{left:0;transform:translate3d(-100%,0,0)}vertical-navigation.vertical-navigation-position-left.vertical-navigation-mode-over.vertical-navigation-opened{transform:translateZ(0)}vertical-navigation.vertical-navigation-position-left .vertical-navigation-wrapper{left:0}vertical-navigation.vertical-navigation-position-right.vertical-navigation-mode-side{margin-right:calc(var(--vertical-navigation-width) * -1)}vertical-navigation.vertical-navigation-position-right.vertical-navigation-mode-side.vertical-navigation-opened{margin-right:0}vertical-navigation.vertical-navigation-position-right.vertical-navigation-mode-over{right:0;transform:translate3d(100%,0,0)}vertical-navigation.vertical-navigation-position-right.vertical-navigation-mode-over.vertical-navigation-opened{transform:translateZ(0)}vertical-navigation.vertical-navigation-position-right .vertical-navigation-wrapper{right:0}vertical-navigation.vertical-navigation-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}vertical-navigation.vertical-navigation-inner .vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}vertical-navigation.vertical-navigation-inner .vertical-navigation-wrapper .vertical-navigation-content{overflow:visible!important}.vertical-navigation-wrapper{display:flex;flex-direction:column;width:100%;height:100%;z-index:10;background:var(--background)}.vertical-navigation-header{flex:0 0 auto;background:var(--background);z-index:11}.vertical-navigation-content{flex:1 1 0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;min-height:0}.vertical-navigation-content>vertical-navigation-divider-item{margin:24px 0}.vertical-navigation-footer{flex:0 0 auto;background:var(--background);z-index:11}.vertical-navigation-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:var(--vertical-navigation-width);width:var(--vertical-navigation-width);height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition-duration:.4s;transition-property:left,right;transition-timing-function:cubic-bezier(.25,.8,.25,1);background:var(--background)}.vertical-navigation-aside-wrapper>vertical-navigation-aside-item{padding:24px 0}.vertical-navigation-aside-wrapper>vertical-navigation-aside-item>.vertical-navigation-item-wrapper{display:none!important}vertical-navigation.vertical-navigation-position-right .vertical-navigation-aside-wrapper{left:auto;right:var(--vertical-navigation-width)}vertical-navigation-aside-item,vertical-navigation-basic-item,vertical-navigation-collapsable-item,vertical-navigation-divider-item,vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}vertical-navigation-group-item{display:block;-webkit-user-select:none;user-select:none}.kit-navigation-item,.kit-navigation-group-header{font-family:var(--nav-font-family)}vertical-navigation-aside-item .vertical-navigation-item-wrapper .kit-navigation-item,vertical-navigation-basic-item .vertical-navigation-item-wrapper .kit-navigation-item,vertical-navigation-collapsable-item .vertical-navigation-item-wrapper .kit-navigation-item,vertical-navigation-group-item .vertical-navigation-item-wrapper .kit-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:var(--nav-item-font-size);font-weight:var(--nav-item-font-weight);line-height:var(--nav-item-line-height);text-decoration:none;border-radius:6px;color:var(--foreground)}.kit-navigation-item.kit-navigation-item-disabled{cursor:default;opacity:.4}.kit-navigation-item-icon{margin-right:8px;opacity:.6;color:currentColor}.kit-navigation-item-subtitle{font-size:var(--nav-subtitle-font-size);font-weight:var(--nav-subtitle-font-weight);line-height:var(--nav-subtitle-line-height);opacity:.5;color:currentColor}.kit-navigation-item-badge{margin-left:auto}.kit-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:var(--nav-badge-font-size);font-weight:var(--nav-badge-font-weight);line-height:var(--nav-badge-line-height);white-space:nowrap;height:20px}vertical-navigation-aside-item>.vertical-navigation-item-wrapper,vertical-navigation-basic-item>.vertical-navigation-item-wrapper,vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper{margin-bottom:-2px}vertical-navigation-aside-item .kit-navigation-item,vertical-navigation-basic-item .kit-navigation-item,vertical-navigation-collapsable-item .kit-navigation-item{cursor:pointer}vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover{background-color:color-mix(in oklch,var(--accent) 10%,transparent)}vertical-navigation-aside-item .kit-navigation-item:hover .kit-navigation-item-icon,vertical-navigation-basic-item .kit-navigation-item:hover .kit-navigation-item-icon,vertical-navigation-collapsable-item .kit-navigation-item:hover .kit-navigation-item-icon{opacity:1}vertical-navigation-aside-item .kit-navigation-item:hover .kit-navigation-item-title,vertical-navigation-basic-item .kit-navigation-item:hover .kit-navigation-item-title,vertical-navigation-collapsable-item .kit-navigation-item:hover .kit-navigation-item-title{opacity:1}vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced{color:var(--primary);font-weight:var(--nav-item-active-font-weight)}vertical-navigation-aside-item .kit-navigation-item-active .kit-navigation-item-icon,vertical-navigation-basic-item .kit-navigation-item-active .kit-navigation-item-icon,vertical-navigation-collapsable-item .kit-navigation-item-active .kit-navigation-item-icon{opacity:1}vertical-navigation-aside-item .kit-navigation-item-active .kit-navigation-item-title,vertical-navigation-basic-item .kit-navigation-item-active .kit-navigation-item-title,vertical-navigation-collapsable-item .kit-navigation-item-active .kit-navigation-item-title{opacity:1}vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper .kit-navigation-item .kit-navigation-item-badge+.kit-navigation-item-dot{margin-left:8px}vertical-navigation-collapsable-item.vertical-navigation-item-expanded>.vertical-navigation-item-wrapper .kit-navigation-item .kit-navigation-item-icon,vertical-navigation-collapsable-item.vertical-navigation-item-expanded>.vertical-navigation-item-wrapper .kit-navigation-item .kit-navigation-item-title{opacity:1}vertical-navigation-collapsable-item>.kit-navigation-item-children>*:first-child,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>*:first-child{margin-top:6px}vertical-navigation-collapsable-item>.kit-navigation-item-children>*:last-child,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>*:last-child{margin-bottom:6px!important}vertical-navigation-collapsable-item>.kit-navigation-item-children .kit-navigation-item{padding:10px 16px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item .kit-navigation-item-icon{display:none}vertical-navigation-collapsable-item .kit-navigation-item-children{position:relative}vertical-navigation-collapsable-item>.kit-navigation-item-children{margin-left:28px!important;padding-left:20px!important;position:relative!important;padding-bottom:0!important}vertical-navigation-collapsable-item>.kit-navigation-item-children:before{content:\"\"!important;position:absolute!important;left:0!important;top:0!important;height:calc(100% - 26px)!important;width:1px!important;background:repeating-linear-gradient(to bottom,color-mix(in oklch,var(--foreground) 20%,transparent) 0,color-mix(in oklch,var(--foreground) 20%,transparent) 2px,transparent 2px,transparent 4px)!important;z-index:1!important;border-radius:0!important}vertical-navigation-collapsable-item>.kit-navigation-item-children>vertical-navigation-basic-item>.vertical-navigation-item-wrapper,vertical-navigation-collapsable-item>.kit-navigation-item-children>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-basic-item>.vertical-navigation-item-wrapper,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper{position:relative}vertical-navigation-collapsable-item>.kit-navigation-item-children>vertical-navigation-basic-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item>.kit-navigation-item-children>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-basic-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper:before{content:\"\"!important;position:absolute!important;left:-22px!important;top:50%!important;transform:translateY(-.5px)!important;width:22px!important;height:1px!important;background:repeating-linear-gradient(to right,color-mix(in oklch,var(--foreground) 20%,transparent) 0,color-mix(in oklch,var(--foreground) 20%,transparent) 2px,transparent 2px,transparent 4px)!important;z-index:2!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children{margin-left:10px!important;padding-left:15px!important;padding-bottom:0!important;position:relative!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children:before{content:\"\"!important;position:absolute!important;left:0!important;top:0!important;height:calc(100% - 26px)!important;width:1px!important;background:repeating-linear-gradient(to bottom,color-mix(in oklch,var(--foreground) 20%,transparent) 0,color-mix(in oklch,var(--foreground) 20%,transparent) 2px,transparent 2px,transparent 4px)!important;z-index:1!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>*:last-child,vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>navigation-tree-outlet>*:last-child{margin-bottom:6px!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>vertical-navigation-basic-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-basic-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper:before{content:\"\"!important;position:absolute!important;left:-17px!important;top:50%!important;transform:translateY(-.5px)!important;width:17px!important;height:1px!important;background:repeating-linear-gradient(to right,color-mix(in oklch,var(--foreground) 20%,transparent) 0,color-mix(in oklch,var(--foreground) 20%,transparent) 2px,transparent 2px,transparent 4px)!important;z-index:2!important}vertical-navigation-collapsable-item .kit-navigation-item-children{overflow:visible!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item{padding-left:8px!important;margin:0!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:72px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:88px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:104px}vertical-navigation-divider-item{margin:12px 0}vertical-navigation-group-item{position:relative;margin-top:24px}vertical-navigation-group-item:first-of-type{margin-top:0}vertical-navigation-group-item>.vertical-navigation-item-wrapper{position:relative}vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;padding:16px;margin:0;max-height:49px;background:var(--background)}vertical-navigation-group-item>.vertical-navigation-item-wrapper>vertical-navigation-basic-item:first-of-type,vertical-navigation-group-item>.vertical-navigation-item-wrapper>vertical-navigation-collapsable-item:first-of-type{margin-top:12px}vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header .kit-navigation-item-title-wrapper{flex:1}vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header .kit-navigation-item-badge,vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header .kit-navigation-item-icon{display:none!important}vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header .kit-navigation-group-title{font-size:var(--nav-group-title-font-size);font-weight:var(--nav-group-title-font-weight);letter-spacing:var(--nav-group-title-letter-spacing);text-transform:uppercase;color:var(--primary);opacity:1;line-height:var(--nav-group-title-line-height)}vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header .kit-navigation-group-subtitle{font-size:var(--nav-group-subtitle-font-size);font-weight:var(--nav-group-subtitle-font-weight);line-height:var(--nav-group-subtitle-line-height);color:var(--muted-foreground);opacity:.7;text-transform:none;letter-spacing:normal;margin-top:0}vertical-navigation-spacer-item{margin:6px 0}.vertical-navigation-overlay{position:absolute;inset:0;z-index:170;opacity:0;background-color:#0009;transition:opacity .3s cubic-bezier(.25,.8,.25,1)}.vertical-navigation-overlay+.vertical-navigation-aside-overlay{background-color:transparent}.vertical-navigation-aside-overlay{position:absolute;inset:0;z-index:169;opacity:0;background-color:#0000004d;transition:opacity .3s cubic-bezier(.25,.8,.25,1)}\n"] }]
1513
- }], propDecorators: { appearance: [{
1514
- type: Input
1515
- }] } });
1516
-
1517
- class VerticalNavigationCompactComponent extends VerticalNavigationBaseComponent {
1518
- _componentPrefix = 'vertical-navigation-compact';
1519
- _asideWrapperClass = 'vertical-navigation-compact-aside-wrapper';
1520
- appearance = 'compact';
1521
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationCompactComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1522
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: VerticalNavigationCompactComponent, isStandalone: true, selector: "vertical-navigation-compact", inputs: { appearance: "appearance" }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" }, properties: { "class": "hostClasses", "style.visibility": "opened ? \"visible\" : \"hidden\"" } }, providers: [provideVerticalNavigationComponent(VerticalNavigationCompactComponent)], exportAs: ["verticalNavigationCompact"], usesInheritance: true, ngImport: i0, template: "\n <div class=\"vertical-navigation-wrapper\">\n <div class=\"vertical-navigation-header\">\n <ng-content select=\"[verticalNavigationHeader]\"></ng-content>\n </div>\n\n <div class=\"vertical-navigation-content\" #navigationContent>\n <div class=\"vertical-navigation-content-header\">\n <ng-content select=\"[verticalNavigationContentHeader]\"></ng-content>\n </div>\n\n @for (item of navigation; track trackByFn($index, item)) {\n @if (shouldRenderItem(item)) {\n @switch (item.type) {\n @case ('aside') {\n <vertical-navigation-aside-item\n [item]=\"item\"\n [activeItemId]=\"activeAsideItemId\"\n [autoCollapse]=\"autoCollapse\"\n [skipChildren]=\"true\"\n (click)=\"toggleAside(item)\"\n >\n </vertical-navigation-aside-item>\n }\n\n @case ('basic') {\n <vertical-navigation-basic-item [item]=\"item\">\n </vertical-navigation-basic-item>\n }\n\n @case ('collapsable') {\n <vertical-navigation-collapsable-item\n [item]=\"item\"\n [autoCollapse]=\"autoCollapse\"\n >\n </vertical-navigation-collapsable-item>\n }\n\n @case ('divider') {\n <vertical-navigation-divider-item></vertical-navigation-divider-item>\n }\n\n @case ('group') {\n <vertical-navigation-group-item\n [item]=\"item\"\n [autoCollapse]=\"autoCollapse\"\n >\n </vertical-navigation-group-item>\n }\n\n @case ('spacer') {\n <vertical-navigation-spacer-item></vertical-navigation-spacer-item>\n }\n }\n }\n }\n\n <div class=\"vertical-navigation-content-footer\">\n <ng-content select=\"[verticalNavigationContentFooter]\"></ng-content>\n </div>\n </div>\n\n <div class=\"vertical-navigation-footer\">\n <ng-content select=\"[verticalNavigationFooter]\"></ng-content>\n </div>\n </div>\n\n @if (activeAsideNavigationItem(); as activeAsideItem) {\n <div [class]=\"asideWrapperClass\">\n <vertical-navigation-aside-item\n [item]=\"activeAsideItem\"\n [autoCollapse]=\"autoCollapse\"\n >\n </vertical-navigation-aside-item>\n </div>\n }\n", isInline: true, styles: [":root{--vertical-navigation-compact-width: 280px}vertical-navigation-compact{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:var(--vertical-navigation-compact-width);min-width:var(--vertical-navigation-compact-width);max-width:var(--vertical-navigation-compact-width);height:100vh;min-height:100vh;max-height:100vh;z-index:200}vertical-navigation-compact.vertical-navigation-compact-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}vertical-navigation-compact.vertical-navigation-compact-animations-enabled .vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}vertical-navigation-compact.vertical-navigation-compact-mode-over{position:fixed;top:0;bottom:0}vertical-navigation-compact.vertical-navigation-compact-position-left.vertical-navigation-compact-mode-side{margin-left:calc(var(--vertical-navigation-compact-width) * -1)}vertical-navigation-compact.vertical-navigation-compact-position-left.vertical-navigation-compact-mode-side.vertical-navigation-compact-opened{margin-left:0}vertical-navigation-compact.vertical-navigation-compact-position-left.vertical-navigation-compact-mode-over{left:0;transform:translate3d(-100%,0,0)}vertical-navigation-compact.vertical-navigation-compact-position-left.vertical-navigation-compact-mode-over.vertical-navigation-compact-opened{transform:translateZ(0)}vertical-navigation-compact.vertical-navigation-compact-position-left .vertical-navigation-wrapper{left:0}vertical-navigation-compact.vertical-navigation-compact-position-right.vertical-navigation-compact-mode-side{margin-right:calc(var(--vertical-navigation-compact-width) * -1)}vertical-navigation-compact.vertical-navigation-compact-position-right.vertical-navigation-compact-mode-side.vertical-navigation-compact-opened{margin-right:0}vertical-navigation-compact.vertical-navigation-compact-position-right.vertical-navigation-compact-mode-over{right:0;transform:translate3d(100%,0,0)}vertical-navigation-compact.vertical-navigation-compact-position-right.vertical-navigation-compact-mode-over.vertical-navigation-compact-opened{transform:translateZ(0)}vertical-navigation-compact.vertical-navigation-compact-position-right .vertical-navigation-wrapper{right:0}vertical-navigation-compact.vertical-navigation-compact-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}vertical-navigation-compact.vertical-navigation-compact-inner .vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}vertical-navigation-compact.vertical-navigation-compact-inner .vertical-navigation-wrapper .vertical-navigation-content{overflow:visible!important}.vertical-navigation-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:100%;height:100%;overflow:hidden;z-index:10;background:rgb(var(--background));box-shadow:inset -1px 0 rgb(var(--border))}.vertical-navigation-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.vertical-navigation-content>vertical-navigation-divider-item{margin:24px 0}.vertical-navigation-content>vertical-navigation-group-item{margin-top:24px}.vertical-navigation-compact-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:var(--vertical-navigation-compact-width);width:var(--vertical-navigation-compact-width);height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition-duration:.4s;transition-property:left,right;transition-timing-function:cubic-bezier(.25,.8,.25,1);background:rgb(var(--background))}.vertical-navigation-compact-aside-wrapper>vertical-navigation-aside-item{padding:24px 0}.vertical-navigation-compact-aside-wrapper>vertical-navigation-aside-item>.vertical-navigation-compact-item-wrapper{display:none!important}vertical-navigation-compact.vertical-navigation-compact-position-right .vertical-navigation-compact-aside-wrapper{left:auto;right:var(--vertical-navigation-compact-width)}vertical-navigation-aside-item,vertical-navigation-basic-item,vertical-navigation-collapsable-item,vertical-navigation-divider-item,vertical-navigation-group-item,vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}.kit-navigation-item,.kit-navigation-group-header{font-family:var(--nav-font-family)}vertical-navigation-aside-item .vertical-navigation-compact-item-wrapper .kit-navigation-item,vertical-navigation-basic-item .vertical-navigation-compact-item-wrapper .kit-navigation-item,vertical-navigation-collapsable-item .vertical-navigation-compact-item-wrapper .kit-navigation-item,vertical-navigation-group-item .vertical-navigation-compact-item-wrapper .kit-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:var(--nav-item-font-size);font-weight:var(--nav-item-font-weight);line-height:var(--nav-item-line-height);text-decoration:none;border-radius:6px;color:rgb(var(--foreground))}.kit-navigation-item.kit-navigation-item-disabled{cursor:default;opacity:.4}.kit-navigation-item-icon{margin-right:16px;opacity:.6;color:currentColor}.kit-navigation-item-subtitle{font-size:var(--nav-subtitle-font-size);font-weight:var(--nav-subtitle-font-weight);line-height:var(--nav-subtitle-line-height);opacity:.5;color:currentColor}.kit-navigation-item-badge{margin-left:auto}.kit-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:var(--nav-badge-font-size);font-weight:var(--nav-badge-font-weight);line-height:var(--nav-badge-line-height);white-space:nowrap;height:20px}vertical-navigation-aside-item>.vertical-navigation-compact-item-wrapper,vertical-navigation-basic-item>.vertical-navigation-compact-item-wrapper,vertical-navigation-collapsable-item>.vertical-navigation-compact-item-wrapper,vertical-navigation-group-item>.vertical-navigation-compact-item-wrapper{margin:0 12px}vertical-navigation-aside-item,vertical-navigation-basic-item,vertical-navigation-collapsable-item{margin-bottom:4px}vertical-navigation-aside-item .kit-navigation-item,vertical-navigation-basic-item .kit-navigation-item,vertical-navigation-collapsable-item .kit-navigation-item{cursor:pointer}vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover{background-color:rgb(var(--accent) / .1)}vertical-navigation-aside-item .kit-navigation-item:hover .kit-navigation-item-icon,vertical-navigation-basic-item .kit-navigation-item:hover .kit-navigation-item-icon,vertical-navigation-collapsable-item .kit-navigation-item:hover .kit-navigation-item-icon{opacity:1}vertical-navigation-aside-item .kit-navigation-item:hover .kit-navigation-item-title,vertical-navigation-basic-item .kit-navigation-item:hover .kit-navigation-item-title,vertical-navigation-collapsable-item .kit-navigation-item:hover .kit-navigation-item-title{opacity:1}vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced{background-color:rgb(var(--primary));color:rgb(var(--primary-foreground));font-weight:var(--nav-item-active-font-weight)}vertical-navigation-aside-item .kit-navigation-item-active .kit-navigation-item-icon,vertical-navigation-basic-item .kit-navigation-item-active .kit-navigation-item-icon,vertical-navigation-collapsable-item .kit-navigation-item-active .kit-navigation-item-icon{opacity:1}vertical-navigation-aside-item .kit-navigation-item-active .kit-navigation-item-title,vertical-navigation-basic-item .kit-navigation-item-active .kit-navigation-item-title,vertical-navigation-collapsable-item .kit-navigation-item-active .kit-navigation-item-title{opacity:1}vertical-navigation-collapsable-item>.vertical-navigation-compact-item-wrapper .kit-navigation-item .kit-navigation-item-badge+.kit-navigation-item-dot{margin-left:8px}vertical-navigation-collapsable-item.vertical-navigation-compact-item-expanded>.vertical-navigation-compact-item-wrapper .kit-navigation-item .kit-navigation-item-icon,vertical-navigation-collapsable-item.vertical-navigation-compact-item-expanded>.vertical-navigation-compact-item-wrapper .kit-navigation-item .kit-navigation-item-title{opacity:1}vertical-navigation-collapsable-item>.kit-navigation-item-children>*:first-child{margin-top:6px}vertical-navigation-collapsable-item>.kit-navigation-item-children>*:last-child{padding-bottom:6px}vertical-navigation-collapsable-item>.kit-navigation-item-children .kit-navigation-item{padding:10px 16px}vertical-navigation-collapsable-item .kit-navigation-item-children{overflow:hidden}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item{padding-left:56px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:72px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:88px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:104px}vertical-navigation-divider-item{margin:12px 0}vertical-navigation-group-item>.vertical-navigation-compact-item-wrapper .kit-navigation-group-header .kit-navigation-item-badge,vertical-navigation-group-item>.vertical-navigation-compact-item-wrapper .kit-navigation-group-header .kit-navigation-item-icon{display:none!important}vertical-navigation-group-item>.vertical-navigation-compact-item-wrapper .kit-navigation-group-header .kit-navigation-group-title{font-size:var(--nav-group-title-font-size);font-weight:var(--nav-group-title-font-weight);letter-spacing:var(--nav-group-title-letter-spacing);text-transform:uppercase;color:rgb(var(--primary));opacity:1}vertical-navigation-group-item>.vertical-navigation-compact-item-wrapper .kit-navigation-group-header .kit-navigation-group-subtitle{font-size:var(--nav-group-subtitle-font-size);font-weight:var(--nav-group-subtitle-font-weight);line-height:var(--nav-group-subtitle-line-height);opacity:.7}vertical-navigation-spacer-item{margin:6px 0}.vertical-navigation-compact-overlay{position:absolute;inset:0;z-index:170;opacity:0;background-color:#0009;transition:opacity .3s cubic-bezier(.25,.8,.25,1)}.vertical-navigation-compact-overlay+.vertical-navigation-compact-aside-overlay{background-color:transparent}.vertical-navigation-compact-aside-overlay{position:absolute;inset:0;z-index:169;opacity:0;background-color:#0000004d;transition:opacity .3s cubic-bezier(.25,.8,.25,1)}\n"], dependencies: [{ kind: "component", type: VerticalNavigationAsideItemComponent, selector: "vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "skipChildren"] }, { kind: "component", type: VerticalNavigationBasicItemComponent, selector: "vertical-navigation-basic-item", inputs: ["item"] }, { kind: "component", type: VerticalNavigationCollapsableItemComponent, selector: "vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item"] }, { kind: "component", type: VerticalNavigationDividerItemComponent, selector: "vertical-navigation-divider-item" }, { kind: "component", type: VerticalNavigationGroupItemComponent, selector: "vertical-navigation-group-item", inputs: ["autoCollapse", "item"] }, { kind: "component", type: VerticalNavigationSpacerItemComponent, selector: "vertical-navigation-spacer-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1523
- }
1524
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationCompactComponent, decorators: [{
1525
- type: Component,
1526
- args: [{ selector: 'vertical-navigation-compact', template: VERTICAL_NAVIGATION_TEMPLATE, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'verticalNavigationCompact', imports: VERTICAL_NAVIGATION_IMPORTS, host: VERTICAL_NAVIGATION_HOST, providers: [provideVerticalNavigationComponent(VerticalNavigationCompactComponent)], styles: [":root{--vertical-navigation-compact-width: 280px}vertical-navigation-compact{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:var(--vertical-navigation-compact-width);min-width:var(--vertical-navigation-compact-width);max-width:var(--vertical-navigation-compact-width);height:100vh;min-height:100vh;max-height:100vh;z-index:200}vertical-navigation-compact.vertical-navigation-compact-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}vertical-navigation-compact.vertical-navigation-compact-animations-enabled .vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}vertical-navigation-compact.vertical-navigation-compact-mode-over{position:fixed;top:0;bottom:0}vertical-navigation-compact.vertical-navigation-compact-position-left.vertical-navigation-compact-mode-side{margin-left:calc(var(--vertical-navigation-compact-width) * -1)}vertical-navigation-compact.vertical-navigation-compact-position-left.vertical-navigation-compact-mode-side.vertical-navigation-compact-opened{margin-left:0}vertical-navigation-compact.vertical-navigation-compact-position-left.vertical-navigation-compact-mode-over{left:0;transform:translate3d(-100%,0,0)}vertical-navigation-compact.vertical-navigation-compact-position-left.vertical-navigation-compact-mode-over.vertical-navigation-compact-opened{transform:translateZ(0)}vertical-navigation-compact.vertical-navigation-compact-position-left .vertical-navigation-wrapper{left:0}vertical-navigation-compact.vertical-navigation-compact-position-right.vertical-navigation-compact-mode-side{margin-right:calc(var(--vertical-navigation-compact-width) * -1)}vertical-navigation-compact.vertical-navigation-compact-position-right.vertical-navigation-compact-mode-side.vertical-navigation-compact-opened{margin-right:0}vertical-navigation-compact.vertical-navigation-compact-position-right.vertical-navigation-compact-mode-over{right:0;transform:translate3d(100%,0,0)}vertical-navigation-compact.vertical-navigation-compact-position-right.vertical-navigation-compact-mode-over.vertical-navigation-compact-opened{transform:translateZ(0)}vertical-navigation-compact.vertical-navigation-compact-position-right .vertical-navigation-wrapper{right:0}vertical-navigation-compact.vertical-navigation-compact-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}vertical-navigation-compact.vertical-navigation-compact-inner .vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}vertical-navigation-compact.vertical-navigation-compact-inner .vertical-navigation-wrapper .vertical-navigation-content{overflow:visible!important}.vertical-navigation-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:100%;height:100%;overflow:hidden;z-index:10;background:rgb(var(--background));box-shadow:inset -1px 0 rgb(var(--border))}.vertical-navigation-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.vertical-navigation-content>vertical-navigation-divider-item{margin:24px 0}.vertical-navigation-content>vertical-navigation-group-item{margin-top:24px}.vertical-navigation-compact-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:var(--vertical-navigation-compact-width);width:var(--vertical-navigation-compact-width);height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition-duration:.4s;transition-property:left,right;transition-timing-function:cubic-bezier(.25,.8,.25,1);background:rgb(var(--background))}.vertical-navigation-compact-aside-wrapper>vertical-navigation-aside-item{padding:24px 0}.vertical-navigation-compact-aside-wrapper>vertical-navigation-aside-item>.vertical-navigation-compact-item-wrapper{display:none!important}vertical-navigation-compact.vertical-navigation-compact-position-right .vertical-navigation-compact-aside-wrapper{left:auto;right:var(--vertical-navigation-compact-width)}vertical-navigation-aside-item,vertical-navigation-basic-item,vertical-navigation-collapsable-item,vertical-navigation-divider-item,vertical-navigation-group-item,vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}.kit-navigation-item,.kit-navigation-group-header{font-family:var(--nav-font-family)}vertical-navigation-aside-item .vertical-navigation-compact-item-wrapper .kit-navigation-item,vertical-navigation-basic-item .vertical-navigation-compact-item-wrapper .kit-navigation-item,vertical-navigation-collapsable-item .vertical-navigation-compact-item-wrapper .kit-navigation-item,vertical-navigation-group-item .vertical-navigation-compact-item-wrapper .kit-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:var(--nav-item-font-size);font-weight:var(--nav-item-font-weight);line-height:var(--nav-item-line-height);text-decoration:none;border-radius:6px;color:rgb(var(--foreground))}.kit-navigation-item.kit-navigation-item-disabled{cursor:default;opacity:.4}.kit-navigation-item-icon{margin-right:16px;opacity:.6;color:currentColor}.kit-navigation-item-subtitle{font-size:var(--nav-subtitle-font-size);font-weight:var(--nav-subtitle-font-weight);line-height:var(--nav-subtitle-line-height);opacity:.5;color:currentColor}.kit-navigation-item-badge{margin-left:auto}.kit-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:var(--nav-badge-font-size);font-weight:var(--nav-badge-font-weight);line-height:var(--nav-badge-line-height);white-space:nowrap;height:20px}vertical-navigation-aside-item>.vertical-navigation-compact-item-wrapper,vertical-navigation-basic-item>.vertical-navigation-compact-item-wrapper,vertical-navigation-collapsable-item>.vertical-navigation-compact-item-wrapper,vertical-navigation-group-item>.vertical-navigation-compact-item-wrapper{margin:0 12px}vertical-navigation-aside-item,vertical-navigation-basic-item,vertical-navigation-collapsable-item{margin-bottom:4px}vertical-navigation-aside-item .kit-navigation-item,vertical-navigation-basic-item .kit-navigation-item,vertical-navigation-collapsable-item .kit-navigation-item{cursor:pointer}vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover{background-color:rgb(var(--accent) / .1)}vertical-navigation-aside-item .kit-navigation-item:hover .kit-navigation-item-icon,vertical-navigation-basic-item .kit-navigation-item:hover .kit-navigation-item-icon,vertical-navigation-collapsable-item .kit-navigation-item:hover .kit-navigation-item-icon{opacity:1}vertical-navigation-aside-item .kit-navigation-item:hover .kit-navigation-item-title,vertical-navigation-basic-item .kit-navigation-item:hover .kit-navigation-item-title,vertical-navigation-collapsable-item .kit-navigation-item:hover .kit-navigation-item-title{opacity:1}vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced{background-color:rgb(var(--primary));color:rgb(var(--primary-foreground));font-weight:var(--nav-item-active-font-weight)}vertical-navigation-aside-item .kit-navigation-item-active .kit-navigation-item-icon,vertical-navigation-basic-item .kit-navigation-item-active .kit-navigation-item-icon,vertical-navigation-collapsable-item .kit-navigation-item-active .kit-navigation-item-icon{opacity:1}vertical-navigation-aside-item .kit-navigation-item-active .kit-navigation-item-title,vertical-navigation-basic-item .kit-navigation-item-active .kit-navigation-item-title,vertical-navigation-collapsable-item .kit-navigation-item-active .kit-navigation-item-title{opacity:1}vertical-navigation-collapsable-item>.vertical-navigation-compact-item-wrapper .kit-navigation-item .kit-navigation-item-badge+.kit-navigation-item-dot{margin-left:8px}vertical-navigation-collapsable-item.vertical-navigation-compact-item-expanded>.vertical-navigation-compact-item-wrapper .kit-navigation-item .kit-navigation-item-icon,vertical-navigation-collapsable-item.vertical-navigation-compact-item-expanded>.vertical-navigation-compact-item-wrapper .kit-navigation-item .kit-navigation-item-title{opacity:1}vertical-navigation-collapsable-item>.kit-navigation-item-children>*:first-child{margin-top:6px}vertical-navigation-collapsable-item>.kit-navigation-item-children>*:last-child{padding-bottom:6px}vertical-navigation-collapsable-item>.kit-navigation-item-children .kit-navigation-item{padding:10px 16px}vertical-navigation-collapsable-item .kit-navigation-item-children{overflow:hidden}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item{padding-left:56px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:72px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:88px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:104px}vertical-navigation-divider-item{margin:12px 0}vertical-navigation-group-item>.vertical-navigation-compact-item-wrapper .kit-navigation-group-header .kit-navigation-item-badge,vertical-navigation-group-item>.vertical-navigation-compact-item-wrapper .kit-navigation-group-header .kit-navigation-item-icon{display:none!important}vertical-navigation-group-item>.vertical-navigation-compact-item-wrapper .kit-navigation-group-header .kit-navigation-group-title{font-size:var(--nav-group-title-font-size);font-weight:var(--nav-group-title-font-weight);letter-spacing:var(--nav-group-title-letter-spacing);text-transform:uppercase;color:rgb(var(--primary));opacity:1}vertical-navigation-group-item>.vertical-navigation-compact-item-wrapper .kit-navigation-group-header .kit-navigation-group-subtitle{font-size:var(--nav-group-subtitle-font-size);font-weight:var(--nav-group-subtitle-font-weight);line-height:var(--nav-group-subtitle-line-height);opacity:.7}vertical-navigation-spacer-item{margin:6px 0}.vertical-navigation-compact-overlay{position:absolute;inset:0;z-index:170;opacity:0;background-color:#0009;transition:opacity .3s cubic-bezier(.25,.8,.25,1)}.vertical-navigation-compact-overlay+.vertical-navigation-compact-aside-overlay{background-color:transparent}.vertical-navigation-compact-aside-overlay{position:absolute;inset:0;z-index:169;opacity:0;background-color:#0000004d;transition:opacity .3s cubic-bezier(.25,.8,.25,1)}\n"] }]
1527
- }], propDecorators: { appearance: [{
1528
- type: Input
1529
- }] } });
1530
-
1531
- class VerticalNavigationDenseComponent extends VerticalNavigationBaseComponent {
1532
- _componentPrefix = 'vertical-navigation-dense';
1533
- _asideWrapperClass = 'vertical-navigation-dense-aside-wrapper';
1534
- appearance = 'dense';
1535
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationDenseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1536
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: VerticalNavigationDenseComponent, isStandalone: true, selector: "vertical-navigation-dense", inputs: { appearance: "appearance" }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" }, properties: { "class": "hostClasses", "style.visibility": "opened ? \"visible\" : \"hidden\"" } }, providers: [provideVerticalNavigationComponent(VerticalNavigationDenseComponent)], exportAs: ["verticalNavigationDense"], usesInheritance: true, ngImport: i0, template: "\n <div class=\"vertical-navigation-wrapper\">\n <div class=\"vertical-navigation-header\">\n <ng-content select=\"[verticalNavigationHeader]\"></ng-content>\n </div>\n\n <div class=\"vertical-navigation-content\" #navigationContent>\n <div class=\"vertical-navigation-content-header\">\n <ng-content select=\"[verticalNavigationContentHeader]\"></ng-content>\n </div>\n\n @for (item of navigation; track trackByFn($index, item)) {\n @if (shouldRenderItem(item)) {\n @switch (item.type) {\n @case ('aside') {\n <vertical-navigation-aside-item\n [item]=\"item\"\n [activeItemId]=\"activeAsideItemId\"\n [autoCollapse]=\"autoCollapse\"\n [skipChildren]=\"true\"\n (click)=\"toggleAside(item)\"\n >\n </vertical-navigation-aside-item>\n }\n\n @case ('basic') {\n <vertical-navigation-basic-item [item]=\"item\">\n </vertical-navigation-basic-item>\n }\n\n @case ('collapsable') {\n <vertical-navigation-collapsable-item\n [item]=\"item\"\n [autoCollapse]=\"autoCollapse\"\n >\n </vertical-navigation-collapsable-item>\n }\n\n @case ('divider') {\n <vertical-navigation-divider-item></vertical-navigation-divider-item>\n }\n\n @case ('group') {\n <vertical-navigation-group-item\n [item]=\"item\"\n [autoCollapse]=\"autoCollapse\"\n >\n </vertical-navigation-group-item>\n }\n\n @case ('spacer') {\n <vertical-navigation-spacer-item></vertical-navigation-spacer-item>\n }\n }\n }\n }\n\n <div class=\"vertical-navigation-content-footer\">\n <ng-content select=\"[verticalNavigationContentFooter]\"></ng-content>\n </div>\n </div>\n\n <div class=\"vertical-navigation-footer\">\n <ng-content select=\"[verticalNavigationFooter]\"></ng-content>\n </div>\n </div>\n\n @if (activeAsideNavigationItem(); as activeAsideItem) {\n <div [class]=\"asideWrapperClass\">\n <vertical-navigation-aside-item\n [item]=\"activeAsideItem\"\n [autoCollapse]=\"autoCollapse\"\n >\n </vertical-navigation-aside-item>\n </div>\n }\n", isInline: true, styles: [":root{--vertical-navigation-dense-width: 280px}vertical-navigation-dense{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:var(--vertical-navigation-dense-width);min-width:var(--vertical-navigation-dense-width);max-width:var(--vertical-navigation-dense-width);height:100vh;min-height:100vh;max-height:100vh;z-index:200}vertical-navigation-dense.vertical-navigation-dense-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}vertical-navigation-dense.vertical-navigation-dense-animations-enabled .vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}vertical-navigation-dense.vertical-navigation-dense-mode-over{position:fixed;top:0;bottom:0}vertical-navigation-dense.vertical-navigation-dense-position-left.vertical-navigation-dense-mode-side{margin-left:calc(var(--vertical-navigation-dense-width) * -1)}vertical-navigation-dense.vertical-navigation-dense-position-left.vertical-navigation-dense-mode-side.vertical-navigation-dense-opened{margin-left:0}vertical-navigation-dense.vertical-navigation-dense-position-left.vertical-navigation-dense-mode-over{left:0;transform:translate3d(-100%,0,0)}vertical-navigation-dense.vertical-navigation-dense-position-left.vertical-navigation-dense-mode-over.vertical-navigation-dense-opened{transform:translateZ(0)}vertical-navigation-dense.vertical-navigation-dense-position-left .vertical-navigation-wrapper{left:0}vertical-navigation-dense.vertical-navigation-dense-position-right.vertical-navigation-dense-mode-side{margin-right:calc(var(--vertical-navigation-dense-width) * -1)}vertical-navigation-dense.vertical-navigation-dense-position-right.vertical-navigation-dense-mode-side.vertical-navigation-dense-opened{margin-right:0}vertical-navigation-dense.vertical-navigation-dense-position-right.vertical-navigation-dense-mode-over{right:0;transform:translate3d(100%,0,0)}vertical-navigation-dense.vertical-navigation-dense-position-right.vertical-navigation-dense-mode-over.vertical-navigation-dense-opened{transform:translateZ(0)}vertical-navigation-dense.vertical-navigation-dense-position-right .vertical-navigation-wrapper{right:0}vertical-navigation-dense.vertical-navigation-dense-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}vertical-navigation-dense.vertical-navigation-dense-inner .vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}vertical-navigation-dense.vertical-navigation-dense-inner .vertical-navigation-wrapper .vertical-navigation-content{overflow:visible!important}.vertical-navigation-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:100%;height:100%;overflow:hidden;z-index:10;background:rgb(var(--background));box-shadow:inset -1px 0 rgb(var(--border))}.vertical-navigation-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.vertical-navigation-content>vertical-navigation-divider-item{margin:24px 0}.vertical-navigation-content>vertical-navigation-group-item{margin-top:24px}.vertical-navigation-dense-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:var(--vertical-navigation-dense-width);width:var(--vertical-navigation-dense-width);height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition-duration:.4s;transition-property:left,right;transition-timing-function:cubic-bezier(.25,.8,.25,1);background:rgb(var(--background))}.vertical-navigation-dense-aside-wrapper>vertical-navigation-aside-item{padding:24px 0}.vertical-navigation-dense-aside-wrapper>vertical-navigation-aside-item>.vertical-navigation-dense-item-wrapper{display:none!important}vertical-navigation-dense.vertical-navigation-dense-position-right .vertical-navigation-dense-aside-wrapper{left:auto;right:var(--vertical-navigation-dense-width)}vertical-navigation-aside-item,vertical-navigation-basic-item,vertical-navigation-collapsable-item,vertical-navigation-divider-item,vertical-navigation-group-item,vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}.kit-navigation-item,.kit-navigation-group-header{font-family:var(--nav-font-family)}vertical-navigation-aside-item .vertical-navigation-dense-item-wrapper .kit-navigation-item,vertical-navigation-basic-item .vertical-navigation-dense-item-wrapper .kit-navigation-item,vertical-navigation-collapsable-item .vertical-navigation-dense-item-wrapper .kit-navigation-item,vertical-navigation-group-item .vertical-navigation-dense-item-wrapper .kit-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:var(--nav-item-font-size);font-weight:var(--nav-item-font-weight);line-height:var(--nav-item-line-height);text-decoration:none;border-radius:6px;color:rgb(var(--foreground))}.kit-navigation-item.kit-navigation-item-disabled{cursor:default;opacity:.4}.kit-navigation-item-icon{margin-right:16px;opacity:.6;color:currentColor}.kit-navigation-item-subtitle{font-size:var(--nav-subtitle-font-size);font-weight:var(--nav-subtitle-font-weight);line-height:var(--nav-subtitle-line-height);opacity:.5;color:currentColor}.kit-navigation-item-badge{margin-left:auto}.kit-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:var(--nav-badge-font-size);font-weight:var(--nav-badge-font-weight);line-height:var(--nav-badge-line-height);white-space:nowrap;height:20px}vertical-navigation-aside-item>.vertical-navigation-dense-item-wrapper,vertical-navigation-basic-item>.vertical-navigation-dense-item-wrapper,vertical-navigation-collapsable-item>.vertical-navigation-dense-item-wrapper,vertical-navigation-group-item>.vertical-navigation-dense-item-wrapper{margin:0 12px}vertical-navigation-aside-item,vertical-navigation-basic-item,vertical-navigation-collapsable-item{margin-bottom:4px}vertical-navigation-aside-item .kit-navigation-item,vertical-navigation-basic-item .kit-navigation-item,vertical-navigation-collapsable-item .kit-navigation-item{cursor:pointer}vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover{background-color:rgb(var(--accent) / .1)}vertical-navigation-aside-item .kit-navigation-item:hover .kit-navigation-item-icon,vertical-navigation-basic-item .kit-navigation-item:hover .kit-navigation-item-icon,vertical-navigation-collapsable-item .kit-navigation-item:hover .kit-navigation-item-icon{opacity:1}vertical-navigation-aside-item .kit-navigation-item:hover .kit-navigation-item-title,vertical-navigation-basic-item .kit-navigation-item:hover .kit-navigation-item-title,vertical-navigation-collapsable-item .kit-navigation-item:hover .kit-navigation-item-title{opacity:1}vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced{background-color:rgb(var(--primary));color:rgb(var(--primary-foreground));font-weight:var(--nav-item-active-font-weight)}vertical-navigation-aside-item .kit-navigation-item-active .kit-navigation-item-icon,vertical-navigation-basic-item .kit-navigation-item-active .kit-navigation-item-icon,vertical-navigation-collapsable-item .kit-navigation-item-active .kit-navigation-item-icon{opacity:1}vertical-navigation-aside-item .kit-navigation-item-active .kit-navigation-item-title,vertical-navigation-basic-item .kit-navigation-item-active .kit-navigation-item-title,vertical-navigation-collapsable-item .kit-navigation-item-active .kit-navigation-item-title{opacity:1}vertical-navigation-collapsable-item>.vertical-navigation-dense-item-wrapper .kit-navigation-item .kit-navigation-item-badge+.kit-navigation-item-dot{margin-left:8px}vertical-navigation-collapsable-item.vertical-navigation-dense-item-expanded>.vertical-navigation-dense-item-wrapper .kit-navigation-item .kit-navigation-item-icon,vertical-navigation-collapsable-item.vertical-navigation-dense-item-expanded>.vertical-navigation-dense-item-wrapper .kit-navigation-item .kit-navigation-item-title{opacity:1}vertical-navigation-collapsable-item>.kit-navigation-item-children>*:first-child{margin-top:6px}vertical-navigation-collapsable-item>.kit-navigation-item-children>*:last-child{padding-bottom:6px}vertical-navigation-collapsable-item>.kit-navigation-item-children .kit-navigation-item{padding:10px 16px}vertical-navigation-collapsable-item .kit-navigation-item-children{overflow:hidden}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item{padding-left:56px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:72px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:88px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:104px}vertical-navigation-divider-item{margin:12px 0}vertical-navigation-group-item>.vertical-navigation-dense-item-wrapper .kit-navigation-group-header .kit-navigation-item-badge,vertical-navigation-group-item>.vertical-navigation-dense-item-wrapper .kit-navigation-group-header .kit-navigation-item-icon{display:none!important}vertical-navigation-group-item>.vertical-navigation-dense-item-wrapper .kit-navigation-group-header .kit-navigation-group-title{font-size:var(--nav-group-title-font-size);font-weight:var(--nav-group-title-font-weight);letter-spacing:var(--nav-group-title-letter-spacing);text-transform:uppercase;color:rgb(var(--primary));opacity:1}vertical-navigation-group-item>.vertical-navigation-dense-item-wrapper .kit-navigation-group-header .kit-navigation-group-subtitle{font-size:var(--nav-group-subtitle-font-size);font-weight:var(--nav-group-subtitle-font-weight);line-height:var(--nav-group-subtitle-line-height);opacity:.7}vertical-navigation-spacer-item{margin:6px 0}.vertical-navigation-dense-overlay{position:absolute;inset:0;z-index:170;opacity:0;background-color:#0009;transition:opacity .3s cubic-bezier(.25,.8,.25,1)}.vertical-navigation-dense-overlay+.vertical-navigation-dense-aside-overlay{background-color:transparent}.vertical-navigation-dense-aside-overlay{position:absolute;inset:0;z-index:169;opacity:0;background-color:#0000004d;transition:opacity .3s cubic-bezier(.25,.8,.25,1)}\n"], dependencies: [{ kind: "component", type: VerticalNavigationAsideItemComponent, selector: "vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "skipChildren"] }, { kind: "component", type: VerticalNavigationBasicItemComponent, selector: "vertical-navigation-basic-item", inputs: ["item"] }, { kind: "component", type: VerticalNavigationCollapsableItemComponent, selector: "vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item"] }, { kind: "component", type: VerticalNavigationDividerItemComponent, selector: "vertical-navigation-divider-item" }, { kind: "component", type: VerticalNavigationGroupItemComponent, selector: "vertical-navigation-group-item", inputs: ["autoCollapse", "item"] }, { kind: "component", type: VerticalNavigationSpacerItemComponent, selector: "vertical-navigation-spacer-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1537
- }
1538
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationDenseComponent, decorators: [{
1539
- type: Component,
1540
- args: [{ selector: 'vertical-navigation-dense', template: VERTICAL_NAVIGATION_TEMPLATE, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'verticalNavigationDense', imports: VERTICAL_NAVIGATION_IMPORTS, host: VERTICAL_NAVIGATION_HOST, providers: [provideVerticalNavigationComponent(VerticalNavigationDenseComponent)], styles: [":root{--vertical-navigation-dense-width: 280px}vertical-navigation-dense{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:var(--vertical-navigation-dense-width);min-width:var(--vertical-navigation-dense-width);max-width:var(--vertical-navigation-dense-width);height:100vh;min-height:100vh;max-height:100vh;z-index:200}vertical-navigation-dense.vertical-navigation-dense-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}vertical-navigation-dense.vertical-navigation-dense-animations-enabled .vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}vertical-navigation-dense.vertical-navigation-dense-mode-over{position:fixed;top:0;bottom:0}vertical-navigation-dense.vertical-navigation-dense-position-left.vertical-navigation-dense-mode-side{margin-left:calc(var(--vertical-navigation-dense-width) * -1)}vertical-navigation-dense.vertical-navigation-dense-position-left.vertical-navigation-dense-mode-side.vertical-navigation-dense-opened{margin-left:0}vertical-navigation-dense.vertical-navigation-dense-position-left.vertical-navigation-dense-mode-over{left:0;transform:translate3d(-100%,0,0)}vertical-navigation-dense.vertical-navigation-dense-position-left.vertical-navigation-dense-mode-over.vertical-navigation-dense-opened{transform:translateZ(0)}vertical-navigation-dense.vertical-navigation-dense-position-left .vertical-navigation-wrapper{left:0}vertical-navigation-dense.vertical-navigation-dense-position-right.vertical-navigation-dense-mode-side{margin-right:calc(var(--vertical-navigation-dense-width) * -1)}vertical-navigation-dense.vertical-navigation-dense-position-right.vertical-navigation-dense-mode-side.vertical-navigation-dense-opened{margin-right:0}vertical-navigation-dense.vertical-navigation-dense-position-right.vertical-navigation-dense-mode-over{right:0;transform:translate3d(100%,0,0)}vertical-navigation-dense.vertical-navigation-dense-position-right.vertical-navigation-dense-mode-over.vertical-navigation-dense-opened{transform:translateZ(0)}vertical-navigation-dense.vertical-navigation-dense-position-right .vertical-navigation-wrapper{right:0}vertical-navigation-dense.vertical-navigation-dense-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}vertical-navigation-dense.vertical-navigation-dense-inner .vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}vertical-navigation-dense.vertical-navigation-dense-inner .vertical-navigation-wrapper .vertical-navigation-content{overflow:visible!important}.vertical-navigation-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:100%;height:100%;overflow:hidden;z-index:10;background:rgb(var(--background));box-shadow:inset -1px 0 rgb(var(--border))}.vertical-navigation-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.vertical-navigation-content>vertical-navigation-divider-item{margin:24px 0}.vertical-navigation-content>vertical-navigation-group-item{margin-top:24px}.vertical-navigation-dense-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:var(--vertical-navigation-dense-width);width:var(--vertical-navigation-dense-width);height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition-duration:.4s;transition-property:left,right;transition-timing-function:cubic-bezier(.25,.8,.25,1);background:rgb(var(--background))}.vertical-navigation-dense-aside-wrapper>vertical-navigation-aside-item{padding:24px 0}.vertical-navigation-dense-aside-wrapper>vertical-navigation-aside-item>.vertical-navigation-dense-item-wrapper{display:none!important}vertical-navigation-dense.vertical-navigation-dense-position-right .vertical-navigation-dense-aside-wrapper{left:auto;right:var(--vertical-navigation-dense-width)}vertical-navigation-aside-item,vertical-navigation-basic-item,vertical-navigation-collapsable-item,vertical-navigation-divider-item,vertical-navigation-group-item,vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}.kit-navigation-item,.kit-navigation-group-header{font-family:var(--nav-font-family)}vertical-navigation-aside-item .vertical-navigation-dense-item-wrapper .kit-navigation-item,vertical-navigation-basic-item .vertical-navigation-dense-item-wrapper .kit-navigation-item,vertical-navigation-collapsable-item .vertical-navigation-dense-item-wrapper .kit-navigation-item,vertical-navigation-group-item .vertical-navigation-dense-item-wrapper .kit-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:var(--nav-item-font-size);font-weight:var(--nav-item-font-weight);line-height:var(--nav-item-line-height);text-decoration:none;border-radius:6px;color:rgb(var(--foreground))}.kit-navigation-item.kit-navigation-item-disabled{cursor:default;opacity:.4}.kit-navigation-item-icon{margin-right:16px;opacity:.6;color:currentColor}.kit-navigation-item-subtitle{font-size:var(--nav-subtitle-font-size);font-weight:var(--nav-subtitle-font-weight);line-height:var(--nav-subtitle-line-height);opacity:.5;color:currentColor}.kit-navigation-item-badge{margin-left:auto}.kit-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:var(--nav-badge-font-size);font-weight:var(--nav-badge-font-weight);line-height:var(--nav-badge-line-height);white-space:nowrap;height:20px}vertical-navigation-aside-item>.vertical-navigation-dense-item-wrapper,vertical-navigation-basic-item>.vertical-navigation-dense-item-wrapper,vertical-navigation-collapsable-item>.vertical-navigation-dense-item-wrapper,vertical-navigation-group-item>.vertical-navigation-dense-item-wrapper{margin:0 12px}vertical-navigation-aside-item,vertical-navigation-basic-item,vertical-navigation-collapsable-item{margin-bottom:4px}vertical-navigation-aside-item .kit-navigation-item,vertical-navigation-basic-item .kit-navigation-item,vertical-navigation-collapsable-item .kit-navigation-item{cursor:pointer}vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover{background-color:rgb(var(--accent) / .1)}vertical-navigation-aside-item .kit-navigation-item:hover .kit-navigation-item-icon,vertical-navigation-basic-item .kit-navigation-item:hover .kit-navigation-item-icon,vertical-navigation-collapsable-item .kit-navigation-item:hover .kit-navigation-item-icon{opacity:1}vertical-navigation-aside-item .kit-navigation-item:hover .kit-navigation-item-title,vertical-navigation-basic-item .kit-navigation-item:hover .kit-navigation-item-title,vertical-navigation-collapsable-item .kit-navigation-item:hover .kit-navigation-item-title{opacity:1}vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced{background-color:rgb(var(--primary));color:rgb(var(--primary-foreground));font-weight:var(--nav-item-active-font-weight)}vertical-navigation-aside-item .kit-navigation-item-active .kit-navigation-item-icon,vertical-navigation-basic-item .kit-navigation-item-active .kit-navigation-item-icon,vertical-navigation-collapsable-item .kit-navigation-item-active .kit-navigation-item-icon{opacity:1}vertical-navigation-aside-item .kit-navigation-item-active .kit-navigation-item-title,vertical-navigation-basic-item .kit-navigation-item-active .kit-navigation-item-title,vertical-navigation-collapsable-item .kit-navigation-item-active .kit-navigation-item-title{opacity:1}vertical-navigation-collapsable-item>.vertical-navigation-dense-item-wrapper .kit-navigation-item .kit-navigation-item-badge+.kit-navigation-item-dot{margin-left:8px}vertical-navigation-collapsable-item.vertical-navigation-dense-item-expanded>.vertical-navigation-dense-item-wrapper .kit-navigation-item .kit-navigation-item-icon,vertical-navigation-collapsable-item.vertical-navigation-dense-item-expanded>.vertical-navigation-dense-item-wrapper .kit-navigation-item .kit-navigation-item-title{opacity:1}vertical-navigation-collapsable-item>.kit-navigation-item-children>*:first-child{margin-top:6px}vertical-navigation-collapsable-item>.kit-navigation-item-children>*:last-child{padding-bottom:6px}vertical-navigation-collapsable-item>.kit-navigation-item-children .kit-navigation-item{padding:10px 16px}vertical-navigation-collapsable-item .kit-navigation-item-children{overflow:hidden}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item{padding-left:56px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:72px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:88px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:104px}vertical-navigation-divider-item{margin:12px 0}vertical-navigation-group-item>.vertical-navigation-dense-item-wrapper .kit-navigation-group-header .kit-navigation-item-badge,vertical-navigation-group-item>.vertical-navigation-dense-item-wrapper .kit-navigation-group-header .kit-navigation-item-icon{display:none!important}vertical-navigation-group-item>.vertical-navigation-dense-item-wrapper .kit-navigation-group-header .kit-navigation-group-title{font-size:var(--nav-group-title-font-size);font-weight:var(--nav-group-title-font-weight);letter-spacing:var(--nav-group-title-letter-spacing);text-transform:uppercase;color:rgb(var(--primary));opacity:1}vertical-navigation-group-item>.vertical-navigation-dense-item-wrapper .kit-navigation-group-header .kit-navigation-group-subtitle{font-size:var(--nav-group-subtitle-font-size);font-weight:var(--nav-group-subtitle-font-weight);line-height:var(--nav-group-subtitle-line-height);opacity:.7}vertical-navigation-spacer-item{margin:6px 0}.vertical-navigation-dense-overlay{position:absolute;inset:0;z-index:170;opacity:0;background-color:#0009;transition:opacity .3s cubic-bezier(.25,.8,.25,1)}.vertical-navigation-dense-overlay+.vertical-navigation-dense-aside-overlay{background-color:transparent}.vertical-navigation-dense-aside-overlay{position:absolute;inset:0;z-index:169;opacity:0;background-color:#0000004d;transition:opacity .3s cubic-bezier(.25,.8,.25,1)}\n"] }]
1541
- }], propDecorators: { appearance: [{
1542
- type: Input
1543
- }] } });
1544
-
1545
- class VerticalNavigationThinComponent extends VerticalNavigationBaseComponent {
1546
- _componentPrefix = 'vertical-navigation-thin';
1547
- _asideWrapperClass = 'vertical-navigation-thin-aside-wrapper';
1548
- appearance = 'thin';
1549
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationThinComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1550
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: VerticalNavigationThinComponent, isStandalone: true, selector: "vertical-navigation-thin", inputs: { appearance: "appearance" }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" }, properties: { "class": "hostClasses", "style.visibility": "opened ? \"visible\" : \"hidden\"" } }, providers: [provideVerticalNavigationComponent(VerticalNavigationThinComponent)], exportAs: ["verticalNavigationThin"], usesInheritance: true, ngImport: i0, template: "\n <div class=\"vertical-navigation-wrapper\">\n <div class=\"vertical-navigation-header\">\n <ng-content select=\"[verticalNavigationHeader]\"></ng-content>\n </div>\n\n <div class=\"vertical-navigation-content\" #navigationContent>\n <div class=\"vertical-navigation-content-header\">\n <ng-content select=\"[verticalNavigationContentHeader]\"></ng-content>\n </div>\n\n @for (item of navigation; track trackByFn($index, item)) {\n @if (shouldRenderItem(item)) {\n @switch (item.type) {\n @case ('aside') {\n <vertical-navigation-aside-item\n [item]=\"item\"\n [activeItemId]=\"activeAsideItemId\"\n [autoCollapse]=\"autoCollapse\"\n [skipChildren]=\"true\"\n (click)=\"toggleAside(item)\"\n >\n </vertical-navigation-aside-item>\n }\n\n @case ('basic') {\n <vertical-navigation-basic-item [item]=\"item\">\n </vertical-navigation-basic-item>\n }\n\n @case ('collapsable') {\n <vertical-navigation-collapsable-item\n [item]=\"item\"\n [autoCollapse]=\"autoCollapse\"\n >\n </vertical-navigation-collapsable-item>\n }\n\n @case ('divider') {\n <vertical-navigation-divider-item></vertical-navigation-divider-item>\n }\n\n @case ('group') {\n <vertical-navigation-group-item\n [item]=\"item\"\n [autoCollapse]=\"autoCollapse\"\n >\n </vertical-navigation-group-item>\n }\n\n @case ('spacer') {\n <vertical-navigation-spacer-item></vertical-navigation-spacer-item>\n }\n }\n }\n }\n\n <div class=\"vertical-navigation-content-footer\">\n <ng-content select=\"[verticalNavigationContentFooter]\"></ng-content>\n </div>\n </div>\n\n <div class=\"vertical-navigation-footer\">\n <ng-content select=\"[verticalNavigationFooter]\"></ng-content>\n </div>\n </div>\n\n @if (activeAsideNavigationItem(); as activeAsideItem) {\n <div [class]=\"asideWrapperClass\">\n <vertical-navigation-aside-item\n [item]=\"activeAsideItem\"\n [autoCollapse]=\"autoCollapse\"\n >\n </vertical-navigation-aside-item>\n </div>\n }\n", isInline: true, styles: [":root{--vertical-navigation-thin-width: 280px}vertical-navigation-thin{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:var(--vertical-navigation-thin-width);min-width:var(--vertical-navigation-thin-width);max-width:var(--vertical-navigation-thin-width);height:100vh;min-height:100vh;max-height:100vh;z-index:200}vertical-navigation-thin.vertical-navigation-thin-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}vertical-navigation-thin.vertical-navigation-thin-animations-enabled .vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}vertical-navigation-thin.vertical-navigation-thin-mode-over{position:fixed;top:0;bottom:0}vertical-navigation-thin.vertical-navigation-thin-position-left.vertical-navigation-thin-mode-side{margin-left:calc(var(--vertical-navigation-thin-width) * -1)}vertical-navigation-thin.vertical-navigation-thin-position-left.vertical-navigation-thin-mode-side.vertical-navigation-thin-opened{margin-left:0}vertical-navigation-thin.vertical-navigation-thin-position-left.vertical-navigation-thin-mode-over{left:0;transform:translate3d(-100%,0,0)}vertical-navigation-thin.vertical-navigation-thin-position-left.vertical-navigation-thin-mode-over.vertical-navigation-thin-opened{transform:translateZ(0)}vertical-navigation-thin.vertical-navigation-thin-position-left .vertical-navigation-wrapper{left:0}vertical-navigation-thin.vertical-navigation-thin-position-right.vertical-navigation-thin-mode-side{margin-right:calc(var(--vertical-navigation-thin-width) * -1)}vertical-navigation-thin.vertical-navigation-thin-position-right.vertical-navigation-thin-mode-side.vertical-navigation-thin-opened{margin-right:0}vertical-navigation-thin.vertical-navigation-thin-position-right.vertical-navigation-thin-mode-over{right:0;transform:translate3d(100%,0,0)}vertical-navigation-thin.vertical-navigation-thin-position-right.vertical-navigation-thin-mode-over.vertical-navigation-thin-opened{transform:translateZ(0)}vertical-navigation-thin.vertical-navigation-thin-position-right .vertical-navigation-wrapper{right:0}vertical-navigation-thin.vertical-navigation-thin-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}vertical-navigation-thin.vertical-navigation-thin-inner .vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}vertical-navigation-thin.vertical-navigation-thin-inner .vertical-navigation-wrapper .vertical-navigation-content{overflow:visible!important}.vertical-navigation-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:100%;height:100%;overflow:hidden;z-index:10;background:rgb(var(--background));box-shadow:inset -1px 0 rgb(var(--border))}.vertical-navigation-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.vertical-navigation-content>vertical-navigation-divider-item{margin:24px 0}.vertical-navigation-content>vertical-navigation-group-item{margin-top:24px}.vertical-navigation-thin-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:var(--vertical-navigation-thin-width);width:var(--vertical-navigation-thin-width);height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition-duration:.4s;transition-property:left,right;transition-timing-function:cubic-bezier(.25,.8,.25,1);background:rgb(var(--background))}.vertical-navigation-thin-aside-wrapper>vertical-navigation-aside-item{padding:24px 0}.vertical-navigation-thin-aside-wrapper>vertical-navigation-aside-item>.vertical-navigation-thin-item-wrapper{display:none!important}vertical-navigation-thin.vertical-navigation-thin-position-right .vertical-navigation-thin-aside-wrapper{left:auto;right:var(--vertical-navigation-thin-width)}vertical-navigation-aside-item,vertical-navigation-basic-item,vertical-navigation-collapsable-item,vertical-navigation-divider-item,vertical-navigation-group-item,vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}.kit-navigation-item,.kit-navigation-group-header{font-family:var(--nav-font-family)}vertical-navigation-aside-item .vertical-navigation-thin-item-wrapper .kit-navigation-item,vertical-navigation-basic-item .vertical-navigation-thin-item-wrapper .kit-navigation-item,vertical-navigation-collapsable-item .vertical-navigation-thin-item-wrapper .kit-navigation-item,vertical-navigation-group-item .vertical-navigation-thin-item-wrapper .kit-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:var(--nav-item-font-size);font-weight:var(--nav-item-font-weight);line-height:var(--nav-item-line-height);text-decoration:none;border-radius:6px;color:rgb(var(--foreground))}.kit-navigation-item.kit-navigation-item-disabled{cursor:default;opacity:.4}.kit-navigation-item-icon{margin-right:16px;opacity:.6;color:currentColor}.kit-navigation-item-subtitle{font-size:var(--nav-subtitle-font-size);font-weight:var(--nav-subtitle-font-weight);line-height:var(--nav-subtitle-line-height);opacity:.5;color:currentColor}.kit-navigation-item-badge{margin-left:auto}.kit-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:var(--nav-badge-font-size);font-weight:var(--nav-badge-font-weight);line-height:var(--nav-badge-line-height);white-space:nowrap;height:20px}vertical-navigation-aside-item>.vertical-navigation-thin-item-wrapper,vertical-navigation-basic-item>.vertical-navigation-thin-item-wrapper,vertical-navigation-collapsable-item>.vertical-navigation-thin-item-wrapper,vertical-navigation-group-item>.vertical-navigation-thin-item-wrapper{margin:0 12px}vertical-navigation-aside-item,vertical-navigation-basic-item,vertical-navigation-collapsable-item{margin-bottom:4px}vertical-navigation-aside-item .kit-navigation-item,vertical-navigation-basic-item .kit-navigation-item,vertical-navigation-collapsable-item .kit-navigation-item{cursor:pointer}vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover{background-color:rgb(var(--accent) / .1)}vertical-navigation-aside-item .kit-navigation-item:hover .kit-navigation-item-icon,vertical-navigation-basic-item .kit-navigation-item:hover .kit-navigation-item-icon,vertical-navigation-collapsable-item .kit-navigation-item:hover .kit-navigation-item-icon{opacity:1}vertical-navigation-aside-item .kit-navigation-item:hover .kit-navigation-item-title,vertical-navigation-basic-item .kit-navigation-item:hover .kit-navigation-item-title,vertical-navigation-collapsable-item .kit-navigation-item:hover .kit-navigation-item-title{opacity:1}vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced{background-color:rgb(var(--primary));color:rgb(var(--primary-foreground));font-weight:var(--nav-item-active-font-weight)}vertical-navigation-aside-item .kit-navigation-item-active .kit-navigation-item-icon,vertical-navigation-basic-item .kit-navigation-item-active .kit-navigation-item-icon,vertical-navigation-collapsable-item .kit-navigation-item-active .kit-navigation-item-icon{opacity:1}vertical-navigation-aside-item .kit-navigation-item-active .kit-navigation-item-title,vertical-navigation-basic-item .kit-navigation-item-active .kit-navigation-item-title,vertical-navigation-collapsable-item .kit-navigation-item-active .kit-navigation-item-title{opacity:1}vertical-navigation-collapsable-item>.vertical-navigation-thin-item-wrapper .kit-navigation-item .kit-navigation-item-badge+.kit-navigation-item-dot{margin-left:8px}vertical-navigation-collapsable-item.vertical-navigation-thin-item-expanded>.vertical-navigation-thin-item-wrapper .kit-navigation-item .kit-navigation-item-icon,vertical-navigation-collapsable-item.vertical-navigation-thin-item-expanded>.vertical-navigation-thin-item-wrapper .kit-navigation-item .kit-navigation-item-title{opacity:1}vertical-navigation-collapsable-item>.kit-navigation-item-children>*:first-child{margin-top:6px}vertical-navigation-collapsable-item>.kit-navigation-item-children>*:last-child{padding-bottom:6px}vertical-navigation-collapsable-item>.kit-navigation-item-children .kit-navigation-item{padding:10px 16px}vertical-navigation-collapsable-item .kit-navigation-item-children{overflow:hidden}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item{padding-left:56px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:72px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:88px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:104px}vertical-navigation-divider-item{margin:12px 0}vertical-navigation-group-item>.vertical-navigation-thin-item-wrapper .kit-navigation-group-header .kit-navigation-item-badge,vertical-navigation-group-item>.vertical-navigation-thin-item-wrapper .kit-navigation-group-header .kit-navigation-item-icon{display:none!important}vertical-navigation-group-item>.vertical-navigation-thin-item-wrapper .kit-navigation-group-header .kit-navigation-group-title{font-size:var(--nav-group-title-font-size);font-weight:var(--nav-group-title-font-weight);letter-spacing:var(--nav-group-title-letter-spacing);text-transform:uppercase;color:rgb(var(--primary));opacity:1}vertical-navigation-group-item>.vertical-navigation-thin-item-wrapper .kit-navigation-group-header .kit-navigation-group-subtitle{font-size:var(--nav-group-subtitle-font-size);font-weight:var(--nav-group-subtitle-font-weight);line-height:var(--nav-group-subtitle-line-height);opacity:.7}vertical-navigation-spacer-item{margin:6px 0}.vertical-navigation-thin-overlay{position:absolute;inset:0;z-index:170;opacity:0;background-color:#0009;transition:opacity .3s cubic-bezier(.25,.8,.25,1)}.vertical-navigation-thin-overlay+.vertical-navigation-thin-aside-overlay{background-color:transparent}.vertical-navigation-thin-aside-overlay{position:absolute;inset:0;z-index:169;opacity:0;background-color:#0000004d;transition:opacity .3s cubic-bezier(.25,.8,.25,1)}\n"], dependencies: [{ kind: "component", type: VerticalNavigationAsideItemComponent, selector: "vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "skipChildren"] }, { kind: "component", type: VerticalNavigationBasicItemComponent, selector: "vertical-navigation-basic-item", inputs: ["item"] }, { kind: "component", type: VerticalNavigationCollapsableItemComponent, selector: "vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item"] }, { kind: "component", type: VerticalNavigationDividerItemComponent, selector: "vertical-navigation-divider-item" }, { kind: "component", type: VerticalNavigationGroupItemComponent, selector: "vertical-navigation-group-item", inputs: ["autoCollapse", "item"] }, { kind: "component", type: VerticalNavigationSpacerItemComponent, selector: "vertical-navigation-spacer-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1551
- }
1552
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationThinComponent, decorators: [{
1553
- type: Component,
1554
- args: [{ selector: 'vertical-navigation-thin', template: VERTICAL_NAVIGATION_TEMPLATE, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'verticalNavigationThin', imports: VERTICAL_NAVIGATION_IMPORTS, host: VERTICAL_NAVIGATION_HOST, providers: [provideVerticalNavigationComponent(VerticalNavigationThinComponent)], styles: [":root{--vertical-navigation-thin-width: 280px}vertical-navigation-thin{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:var(--vertical-navigation-thin-width);min-width:var(--vertical-navigation-thin-width);max-width:var(--vertical-navigation-thin-width);height:100vh;min-height:100vh;max-height:100vh;z-index:200}vertical-navigation-thin.vertical-navigation-thin-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}vertical-navigation-thin.vertical-navigation-thin-animations-enabled .vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}vertical-navigation-thin.vertical-navigation-thin-mode-over{position:fixed;top:0;bottom:0}vertical-navigation-thin.vertical-navigation-thin-position-left.vertical-navigation-thin-mode-side{margin-left:calc(var(--vertical-navigation-thin-width) * -1)}vertical-navigation-thin.vertical-navigation-thin-position-left.vertical-navigation-thin-mode-side.vertical-navigation-thin-opened{margin-left:0}vertical-navigation-thin.vertical-navigation-thin-position-left.vertical-navigation-thin-mode-over{left:0;transform:translate3d(-100%,0,0)}vertical-navigation-thin.vertical-navigation-thin-position-left.vertical-navigation-thin-mode-over.vertical-navigation-thin-opened{transform:translateZ(0)}vertical-navigation-thin.vertical-navigation-thin-position-left .vertical-navigation-wrapper{left:0}vertical-navigation-thin.vertical-navigation-thin-position-right.vertical-navigation-thin-mode-side{margin-right:calc(var(--vertical-navigation-thin-width) * -1)}vertical-navigation-thin.vertical-navigation-thin-position-right.vertical-navigation-thin-mode-side.vertical-navigation-thin-opened{margin-right:0}vertical-navigation-thin.vertical-navigation-thin-position-right.vertical-navigation-thin-mode-over{right:0;transform:translate3d(100%,0,0)}vertical-navigation-thin.vertical-navigation-thin-position-right.vertical-navigation-thin-mode-over.vertical-navigation-thin-opened{transform:translateZ(0)}vertical-navigation-thin.vertical-navigation-thin-position-right .vertical-navigation-wrapper{right:0}vertical-navigation-thin.vertical-navigation-thin-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}vertical-navigation-thin.vertical-navigation-thin-inner .vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}vertical-navigation-thin.vertical-navigation-thin-inner .vertical-navigation-wrapper .vertical-navigation-content{overflow:visible!important}.vertical-navigation-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:100%;height:100%;overflow:hidden;z-index:10;background:rgb(var(--background));box-shadow:inset -1px 0 rgb(var(--border))}.vertical-navigation-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.vertical-navigation-content>vertical-navigation-divider-item{margin:24px 0}.vertical-navigation-content>vertical-navigation-group-item{margin-top:24px}.vertical-navigation-thin-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:var(--vertical-navigation-thin-width);width:var(--vertical-navigation-thin-width);height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition-duration:.4s;transition-property:left,right;transition-timing-function:cubic-bezier(.25,.8,.25,1);background:rgb(var(--background))}.vertical-navigation-thin-aside-wrapper>vertical-navigation-aside-item{padding:24px 0}.vertical-navigation-thin-aside-wrapper>vertical-navigation-aside-item>.vertical-navigation-thin-item-wrapper{display:none!important}vertical-navigation-thin.vertical-navigation-thin-position-right .vertical-navigation-thin-aside-wrapper{left:auto;right:var(--vertical-navigation-thin-width)}vertical-navigation-aside-item,vertical-navigation-basic-item,vertical-navigation-collapsable-item,vertical-navigation-divider-item,vertical-navigation-group-item,vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}.kit-navigation-item,.kit-navigation-group-header{font-family:var(--nav-font-family)}vertical-navigation-aside-item .vertical-navigation-thin-item-wrapper .kit-navigation-item,vertical-navigation-basic-item .vertical-navigation-thin-item-wrapper .kit-navigation-item,vertical-navigation-collapsable-item .vertical-navigation-thin-item-wrapper .kit-navigation-item,vertical-navigation-group-item .vertical-navigation-thin-item-wrapper .kit-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:var(--nav-item-font-size);font-weight:var(--nav-item-font-weight);line-height:var(--nav-item-line-height);text-decoration:none;border-radius:6px;color:rgb(var(--foreground))}.kit-navigation-item.kit-navigation-item-disabled{cursor:default;opacity:.4}.kit-navigation-item-icon{margin-right:16px;opacity:.6;color:currentColor}.kit-navigation-item-subtitle{font-size:var(--nav-subtitle-font-size);font-weight:var(--nav-subtitle-font-weight);line-height:var(--nav-subtitle-line-height);opacity:.5;color:currentColor}.kit-navigation-item-badge{margin-left:auto}.kit-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:var(--nav-badge-font-size);font-weight:var(--nav-badge-font-weight);line-height:var(--nav-badge-line-height);white-space:nowrap;height:20px}vertical-navigation-aside-item>.vertical-navigation-thin-item-wrapper,vertical-navigation-basic-item>.vertical-navigation-thin-item-wrapper,vertical-navigation-collapsable-item>.vertical-navigation-thin-item-wrapper,vertical-navigation-group-item>.vertical-navigation-thin-item-wrapper{margin:0 12px}vertical-navigation-aside-item,vertical-navigation-basic-item,vertical-navigation-collapsable-item{margin-bottom:4px}vertical-navigation-aside-item .kit-navigation-item,vertical-navigation-basic-item .kit-navigation-item,vertical-navigation-collapsable-item .kit-navigation-item{cursor:pointer}vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover{background-color:rgb(var(--accent) / .1)}vertical-navigation-aside-item .kit-navigation-item:hover .kit-navigation-item-icon,vertical-navigation-basic-item .kit-navigation-item:hover .kit-navigation-item-icon,vertical-navigation-collapsable-item .kit-navigation-item:hover .kit-navigation-item-icon{opacity:1}vertical-navigation-aside-item .kit-navigation-item:hover .kit-navigation-item-title,vertical-navigation-basic-item .kit-navigation-item:hover .kit-navigation-item-title,vertical-navigation-collapsable-item .kit-navigation-item:hover .kit-navigation-item-title{opacity:1}vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced{background-color:rgb(var(--primary));color:rgb(var(--primary-foreground));font-weight:var(--nav-item-active-font-weight)}vertical-navigation-aside-item .kit-navigation-item-active .kit-navigation-item-icon,vertical-navigation-basic-item .kit-navigation-item-active .kit-navigation-item-icon,vertical-navigation-collapsable-item .kit-navigation-item-active .kit-navigation-item-icon{opacity:1}vertical-navigation-aside-item .kit-navigation-item-active .kit-navigation-item-title,vertical-navigation-basic-item .kit-navigation-item-active .kit-navigation-item-title,vertical-navigation-collapsable-item .kit-navigation-item-active .kit-navigation-item-title{opacity:1}vertical-navigation-collapsable-item>.vertical-navigation-thin-item-wrapper .kit-navigation-item .kit-navigation-item-badge+.kit-navigation-item-dot{margin-left:8px}vertical-navigation-collapsable-item.vertical-navigation-thin-item-expanded>.vertical-navigation-thin-item-wrapper .kit-navigation-item .kit-navigation-item-icon,vertical-navigation-collapsable-item.vertical-navigation-thin-item-expanded>.vertical-navigation-thin-item-wrapper .kit-navigation-item .kit-navigation-item-title{opacity:1}vertical-navigation-collapsable-item>.kit-navigation-item-children>*:first-child{margin-top:6px}vertical-navigation-collapsable-item>.kit-navigation-item-children>*:last-child{padding-bottom:6px}vertical-navigation-collapsable-item>.kit-navigation-item-children .kit-navigation-item{padding:10px 16px}vertical-navigation-collapsable-item .kit-navigation-item-children{overflow:hidden}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item{padding-left:56px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:72px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:88px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:104px}vertical-navigation-divider-item{margin:12px 0}vertical-navigation-group-item>.vertical-navigation-thin-item-wrapper .kit-navigation-group-header .kit-navigation-item-badge,vertical-navigation-group-item>.vertical-navigation-thin-item-wrapper .kit-navigation-group-header .kit-navigation-item-icon{display:none!important}vertical-navigation-group-item>.vertical-navigation-thin-item-wrapper .kit-navigation-group-header .kit-navigation-group-title{font-size:var(--nav-group-title-font-size);font-weight:var(--nav-group-title-font-weight);letter-spacing:var(--nav-group-title-letter-spacing);text-transform:uppercase;color:rgb(var(--primary));opacity:1}vertical-navigation-group-item>.vertical-navigation-thin-item-wrapper .kit-navigation-group-header .kit-navigation-group-subtitle{font-size:var(--nav-group-subtitle-font-size);font-weight:var(--nav-group-subtitle-font-weight);line-height:var(--nav-group-subtitle-line-height);opacity:.7}vertical-navigation-spacer-item{margin:6px 0}.vertical-navigation-thin-overlay{position:absolute;inset:0;z-index:170;opacity:0;background-color:#0009;transition:opacity .3s cubic-bezier(.25,.8,.25,1)}.vertical-navigation-thin-overlay+.vertical-navigation-thin-aside-overlay{background-color:transparent}.vertical-navigation-thin-aside-overlay{position:absolute;inset:0;z-index:169;opacity:0;background-color:#0000004d;transition:opacity .3s cubic-bezier(.25,.8,.25,1)}\n"] }]
1555
- }], propDecorators: { appearance: [{
1556
- type: Input
1557
- }] } });
1558
-
1559
- /**
1560
- * Vertical Navigation Components barrel export
1561
- */
1562
-
1563
- /**
1564
- * Generated bundle index. Do not edit.
1565
- */
1566
-
1567
- export { VerticalNavigationAsideItemComponent, VerticalNavigationBasicItemComponent, VerticalNavigationCollapsableItemComponent, VerticalNavigationCompactComponent, VerticalNavigationDefaultComponent, VerticalNavigationDenseComponent, VerticalNavigationDividerItemComponent, VerticalNavigationGroupItemComponent, VerticalNavigationSpacerItemComponent, VerticalNavigationThinComponent };
1568
- //# sourceMappingURL=ojiepermana-angular-navigation-vertical.mjs.map