@clr/angular 18.0.0-beta.1 → 18.0.0-beta.10

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 (132) hide show
  1. package/fesm2022/clr-angular-accordion.mjs +1 -1
  2. package/fesm2022/clr-angular-accordion.mjs.map +1 -1
  3. package/fesm2022/clr-angular-button.mjs +6 -6
  4. package/fesm2022/clr-angular-button.mjs.map +1 -1
  5. package/fesm2022/clr-angular-data-datagrid.mjs +27 -35
  6. package/fesm2022/clr-angular-data-datagrid.mjs.map +1 -1
  7. package/fesm2022/clr-angular-data-tree-view.mjs +3 -3
  8. package/fesm2022/clr-angular-data-tree-view.mjs.map +1 -1
  9. package/fesm2022/clr-angular-data.mjs +11 -9116
  10. package/fesm2022/clr-angular-data.mjs.map +1 -1
  11. package/fesm2022/clr-angular-emphasis-alert.mjs +2 -2
  12. package/fesm2022/clr-angular-emphasis-alert.mjs.map +1 -1
  13. package/fesm2022/clr-angular-emphasis.mjs +12 -778
  14. package/fesm2022/clr-angular-emphasis.mjs.map +1 -1
  15. package/fesm2022/clr-angular-forms-checkbox.mjs +13 -44
  16. package/fesm2022/clr-angular-forms-checkbox.mjs.map +1 -1
  17. package/fesm2022/clr-angular-forms-combobox.mjs +420 -90
  18. package/fesm2022/clr-angular-forms-combobox.mjs.map +1 -1
  19. package/fesm2022/clr-angular-forms-common.mjs +62 -57
  20. package/fesm2022/clr-angular-forms-common.mjs.map +1 -1
  21. package/fesm2022/clr-angular-forms-datalist.mjs +2 -14
  22. package/fesm2022/clr-angular-forms-datalist.mjs.map +1 -1
  23. package/fesm2022/clr-angular-forms-datepicker.mjs +20 -28
  24. package/fesm2022/clr-angular-forms-datepicker.mjs.map +1 -1
  25. package/fesm2022/clr-angular-forms-file-input.mjs +78 -62
  26. package/fesm2022/clr-angular-forms-file-input.mjs.map +1 -1
  27. package/fesm2022/clr-angular-forms-input.mjs +4 -18
  28. package/fesm2022/clr-angular-forms-input.mjs.map +1 -1
  29. package/fesm2022/clr-angular-forms-number-input.mjs +2 -14
  30. package/fesm2022/clr-angular-forms-number-input.mjs.map +1 -1
  31. package/fesm2022/clr-angular-forms-password.mjs +2 -14
  32. package/fesm2022/clr-angular-forms-password.mjs.map +1 -1
  33. package/fesm2022/clr-angular-forms-radio.mjs +13 -44
  34. package/fesm2022/clr-angular-forms-radio.mjs.map +1 -1
  35. package/fesm2022/clr-angular-forms-range.mjs +3 -16
  36. package/fesm2022/clr-angular-forms-range.mjs.map +1 -1
  37. package/fesm2022/clr-angular-forms-select.mjs +3 -16
  38. package/fesm2022/clr-angular-forms-select.mjs.map +1 -1
  39. package/fesm2022/clr-angular-forms-textarea.mjs +4 -17
  40. package/fesm2022/clr-angular-forms-textarea.mjs.map +1 -1
  41. package/fesm2022/clr-angular-forms.mjs +68 -8560
  42. package/fesm2022/clr-angular-forms.mjs.map +1 -1
  43. package/fesm2022/clr-angular-icon.mjs +10 -0
  44. package/fesm2022/clr-angular-icon.mjs.map +1 -1
  45. package/fesm2022/clr-angular-layout-nav.mjs +27 -25
  46. package/fesm2022/clr-angular-layout-nav.mjs.map +1 -1
  47. package/fesm2022/clr-angular-layout-tabs.mjs +1 -1
  48. package/fesm2022/clr-angular-layout-tabs.mjs.map +1 -1
  49. package/fesm2022/clr-angular-layout.mjs +15 -2057
  50. package/fesm2022/clr-angular-layout.mjs.map +1 -1
  51. package/fesm2022/clr-angular-modal.mjs +4 -5
  52. package/fesm2022/clr-angular-modal.mjs.map +1 -1
  53. package/fesm2022/clr-angular-popover-common.mjs +151 -85
  54. package/fesm2022/clr-angular-popover-common.mjs.map +1 -1
  55. package/fesm2022/clr-angular-popover-dropdown.mjs +7 -4
  56. package/fesm2022/clr-angular-popover-dropdown.mjs.map +1 -1
  57. package/fesm2022/clr-angular-popover-signpost.mjs +30 -15
  58. package/fesm2022/clr-angular-popover-signpost.mjs.map +1 -1
  59. package/fesm2022/clr-angular-popover-tooltip.mjs +7 -7
  60. package/fesm2022/clr-angular-popover-tooltip.mjs.map +1 -1
  61. package/fesm2022/clr-angular-popover.mjs +12 -2242
  62. package/fesm2022/clr-angular-popover.mjs.map +1 -1
  63. package/fesm2022/clr-angular-stepper.mjs +5 -5
  64. package/fesm2022/clr-angular-stepper.mjs.map +1 -1
  65. package/fesm2022/clr-angular-utils.mjs +20 -485
  66. package/fesm2022/clr-angular-utils.mjs.map +1 -1
  67. package/fesm2022/clr-angular-wizard.mjs +434 -223
  68. package/fesm2022/clr-angular-wizard.mjs.map +1 -1
  69. package/fesm2022/clr-angular.mjs +94 -38740
  70. package/fesm2022/clr-angular.mjs.map +1 -1
  71. package/package.json +10 -5
  72. package/popover/common/README.md +14 -12
  73. package/schematics/collection.json +14 -0
  74. package/schematics/ng-update/index.d.ts +2 -0
  75. package/schematics/ng-update/index.js +69 -0
  76. package/schematics/ng-update/index.js.map +1 -0
  77. package/schematics/ng-update/migrations/css-migration.d.ts +6 -0
  78. package/schematics/ng-update/migrations/css-migration.js +177 -0
  79. package/schematics/ng-update/migrations/css-migration.js.map +1 -0
  80. package/schematics/ng-update/migrations/import-migration.d.ts +4 -0
  81. package/schematics/ng-update/migrations/import-migration.js +187 -0
  82. package/schematics/ng-update/migrations/import-migration.js.map +1 -0
  83. package/schematics/ng-update/migrations/template-migration.d.ts +6 -0
  84. package/schematics/ng-update/migrations/template-migration.js +261 -0
  85. package/schematics/ng-update/migrations/template-migration.js.map +1 -0
  86. package/schematics/ng-update/replacements/css-replacements.d.ts +17 -0
  87. package/schematics/ng-update/replacements/css-replacements.js +74 -0
  88. package/schematics/ng-update/replacements/css-replacements.js.map +1 -0
  89. package/schematics/ng-update/replacements/import-replacements.d.ts +13 -0
  90. package/schematics/ng-update/replacements/import-replacements.js +108 -0
  91. package/schematics/ng-update/replacements/import-replacements.js.map +1 -0
  92. package/schematics/ng-update/replacements/symbol-replacements.d.ts +12 -0
  93. package/schematics/ng-update/replacements/symbol-replacements.js +67 -0
  94. package/schematics/ng-update/replacements/symbol-replacements.js.map +1 -0
  95. package/schematics/ng-update/replacements/template-replacements.d.ts +19 -0
  96. package/schematics/ng-update/replacements/template-replacements.js +57 -0
  97. package/schematics/ng-update/replacements/template-replacements.js.map +1 -0
  98. package/schematics/ng-update/tests/test-helpers.d.ts +6 -0
  99. package/schematics/ng-update/tests/test-helpers.js +34 -0
  100. package/schematics/ng-update/tests/test-helpers.js.map +1 -0
  101. package/schematics/ng-update/utils/file-visitor.d.ts +8 -0
  102. package/schematics/ng-update/utils/file-visitor.js +44 -0
  103. package/schematics/ng-update/utils/file-visitor.js.map +1 -0
  104. package/schematics/ng-update/utils/regexp-utils.d.ts +16 -0
  105. package/schematics/ng-update/utils/regexp-utils.js +34 -0
  106. package/schematics/ng-update/utils/regexp-utils.js.map +1 -0
  107. package/schematics/vitest.config.d.ts +2 -0
  108. package/schematics/vitest.config.js +17 -0
  109. package/schematics/vitest.config.js.map +1 -0
  110. package/types/clr-angular-accordion.d.ts +1 -1
  111. package/types/clr-angular-button.d.ts +1 -1
  112. package/types/clr-angular-data-datagrid.d.ts +23 -33
  113. package/types/clr-angular-data-tree-view.d.ts +10 -1
  114. package/types/clr-angular-data.d.ts +4 -2136
  115. package/types/clr-angular-emphasis.d.ts +4 -220
  116. package/types/clr-angular-forms-combobox.d.ts +64 -11
  117. package/types/clr-angular-forms-common.d.ts +9 -9
  118. package/types/clr-angular-forms-datepicker.d.ts +8 -1
  119. package/types/clr-angular-forms-file-input.d.ts +6 -3
  120. package/types/clr-angular-forms.d.ts +26 -2062
  121. package/types/clr-angular-layout-nav.d.ts +6 -2
  122. package/types/clr-angular-layout-tabs.d.ts +1 -1
  123. package/types/clr-angular-layout.d.ts +6 -463
  124. package/types/clr-angular-popover-common.d.ts +38 -13
  125. package/types/clr-angular-popover-dropdown.d.ts +2 -1
  126. package/types/clr-angular-popover-signpost.d.ts +15 -7
  127. package/types/clr-angular-popover-tooltip.d.ts +1 -1
  128. package/types/clr-angular-popover.d.ts +7 -559
  129. package/types/clr-angular-stepper.d.ts +1 -1
  130. package/types/clr-angular-utils.d.ts +13 -175
  131. package/types/clr-angular-wizard.d.ts +92 -35
  132. package/types/clr-angular.d.ts +22 -10238
@@ -1,25 +1,15 @@
1
1
  import * as i0 from '@angular/core';
2
- import { NgModule, Directive, Injectable, Optional, Input, HostBinding, Component, DOCUMENT, PLATFORM_ID, HostListener, Inject, ViewChild, InjectionToken, ContentChild, ElementRef, ViewContainerRef, ContentChildren, EventEmitter, Output } from '@angular/core';
3
- import { ClrBreadcrumbsModule as ClrBreadcrumbsModule$1 } from '@clr/angular/layout/breadcrumbs';
4
- import { ClrMainContainerModule as ClrMainContainerModule$1 } from '@clr/angular/layout/main-container';
5
- import * as i1 from '@clr/angular/layout/nav';
6
- import { ClrNavigationModule as ClrNavigationModule$1, ResponsiveNavCodes as ResponsiveNavCodes$1 } from '@clr/angular/layout/nav';
7
- import { ClrTabsModule as ClrTabsModule$1 } from '@clr/angular/layout/tabs';
8
- import { ClrVerticalNavModule as ClrVerticalNavModule$1 } from '@clr/angular/layout/vertical-nav';
9
- import * as i4 from '@angular/common';
10
- import { CommonModule, isPlatformBrowser } from '@angular/common';
11
- import * as i5 from '@clr/angular/icon';
12
- import { ClrIcon, ClarityIcons, timesIcon, ellipsisHorizontalIcon, angleIcon, angleDoubleIcon } from '@clr/angular/icon';
13
- import * as i1$1 from '@clr/angular/utils';
14
- import { WillyWonka, OompaLoompa, commonStringsDefault, LARGE_BREAKPOINT, ClrStandaloneCdkTrapFocus, IF_ACTIVE_ID, TemplateRefContainer, IF_ACTIVE_ID_PROVIDER, ClrKeyFocus, IfActiveService, ClrConditionalModule, ClrTemplateRefModule, ClrKeyFocusModule, IfExpandService, uniqueIdFactory, ClrFocusOnViewInitModule, ClrHostWrappingModule } from '@clr/angular/utils';
15
- import { ReplaySubject, Subject, fromEvent } from 'rxjs';
16
- import { filter, startWith, takeUntil } from 'rxjs/operators';
17
- import * as i1$2 from '@angular/router';
18
- import { RouterModule } from '@angular/router';
19
- import { ClrDropdownModule } from '@clr/angular/popover/dropdown';
20
- import * as i2 from '@clr/angular/popover/common';
21
- import { ClrPopoverHostDirective } from '@clr/angular/popover/common';
22
- import { trigger, state, style, transition, animate } from '@angular/animations';
2
+ import { NgModule } from '@angular/core';
3
+ import { ClrBreadcrumbsModule } from '@clr/angular/layout/breadcrumbs';
4
+ export * from '@clr/angular/layout/breadcrumbs';
5
+ import { ClrMainContainerModule } from '@clr/angular/layout/main-container';
6
+ export * from '@clr/angular/layout/main-container';
7
+ import { ClrNavigationModule } from '@clr/angular/layout/nav';
8
+ export * from '@clr/angular/layout/nav';
9
+ import { ClrTabsModule } from '@clr/angular/layout/tabs';
10
+ export * from '@clr/angular/layout/tabs';
11
+ import { ClrVerticalNavModule } from '@clr/angular/layout/vertical-nav';
12
+ export * from '@clr/angular/layout/vertical-nav';
23
13
 
24
14
  /*
25
15
  * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
@@ -29,2048 +19,16 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
29
19
  */
30
20
  class ClrLayoutModule {
31
21
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
32
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: ClrLayoutModule, exports: [ClrMainContainerModule$1, ClrNavigationModule$1, ClrTabsModule$1, ClrVerticalNavModule$1, ClrBreadcrumbsModule$1] }); }
33
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrLayoutModule, imports: [ClrMainContainerModule$1, ClrNavigationModule$1, ClrTabsModule$1, ClrVerticalNavModule$1, ClrBreadcrumbsModule$1] }); }
22
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: ClrLayoutModule, exports: [ClrMainContainerModule, ClrNavigationModule, ClrTabsModule, ClrVerticalNavModule, ClrBreadcrumbsModule] }); }
23
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrLayoutModule, imports: [ClrMainContainerModule, ClrNavigationModule, ClrTabsModule, ClrVerticalNavModule, ClrBreadcrumbsModule] }); }
34
24
  }
35
25
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrLayoutModule, decorators: [{
36
26
  type: NgModule,
37
27
  args: [{
38
- exports: [ClrMainContainerModule$1, ClrNavigationModule$1, ClrTabsModule$1, ClrVerticalNavModule$1, ClrBreadcrumbsModule$1],
28
+ exports: [ClrMainContainerModule, ClrNavigationModule, ClrTabsModule, ClrVerticalNavModule, ClrBreadcrumbsModule],
39
29
  }]
40
30
  }] });
41
31
 
42
- /*
43
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
44
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
45
- * This software is released under MIT license.
46
- * The full license information can be found in LICENSE in the root directory of this project.
47
- */
48
- class ClrMainContainer {
49
- constructor(elRef, responsiveNavService) {
50
- this.elRef = elRef;
51
- this.responsiveNavService = responsiveNavService;
52
- }
53
- ngOnInit() {
54
- this._classList = this.elRef.nativeElement.classList;
55
- this._subscription = this.responsiveNavService.navControl.subscribe({
56
- next: (message) => {
57
- this.processMessage(message);
58
- },
59
- });
60
- }
61
- processMessage(message) {
62
- let navClass = ResponsiveNavCodes$1.NAV_CLASS_HAMBURGER_MENU;
63
- if (message.controlCode === ResponsiveNavCodes$1.NAV_CLOSE_ALL) {
64
- this._classList.remove(ResponsiveNavCodes$1.NAV_CLASS_HAMBURGER_MENU);
65
- this._classList.remove(ResponsiveNavCodes$1.NAV_CLASS_OVERFLOW_MENU);
66
- }
67
- else if (message.navLevel === ResponsiveNavCodes$1.NAV_LEVEL_1) {
68
- this.controlNav(message.controlCode, navClass);
69
- }
70
- else if (message.navLevel === ResponsiveNavCodes$1.NAV_LEVEL_2) {
71
- navClass = ResponsiveNavCodes$1.NAV_CLASS_OVERFLOW_MENU;
72
- this.controlNav(message.controlCode, navClass);
73
- }
74
- }
75
- controlNav(controlCode, navClass) {
76
- if (controlCode === ResponsiveNavCodes$1.NAV_OPEN) {
77
- this._classList.add(navClass);
78
- }
79
- else if (controlCode === ResponsiveNavCodes$1.NAV_CLOSE) {
80
- this._classList.remove(navClass);
81
- }
82
- else if (controlCode === ResponsiveNavCodes$1.NAV_TOGGLE) {
83
- this._classList.toggle(navClass);
84
- }
85
- }
86
- ngOnDestroy() {
87
- this._subscription.unsubscribe();
88
- }
89
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrMainContainer, deps: [{ token: i0.ElementRef }, { token: i1.ResponsiveNavigationService }], target: i0.ɵɵFactoryTarget.Directive }); }
90
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrMainContainer, isStandalone: false, selector: "clr-main-container", host: { properties: { "class.main-container": "true" } }, ngImport: i0 }); }
91
- }
92
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrMainContainer, decorators: [{
93
- type: Directive,
94
- args: [{
95
- selector: 'clr-main-container',
96
- host: { '[class.main-container]': 'true' },
97
- standalone: false,
98
- }]
99
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.ResponsiveNavigationService }] });
100
-
101
- /*
102
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
103
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
104
- * This software is released under MIT license.
105
- * The full license information can be found in LICENSE in the root directory of this project.
106
- */
107
- const CLR_LAYOUT_DIRECTIVES = [ClrMainContainer];
108
- class ClrMainContainerModule {
109
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrMainContainerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
110
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: ClrMainContainerModule, declarations: [ClrMainContainer], imports: [CommonModule, ClrIcon], exports: [ClrMainContainer] }); }
111
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrMainContainerModule, imports: [CommonModule, ClrIcon] }); }
112
- }
113
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrMainContainerModule, decorators: [{
114
- type: NgModule,
115
- args: [{
116
- imports: [CommonModule, ClrIcon],
117
- declarations: [CLR_LAYOUT_DIRECTIVES],
118
- exports: [CLR_LAYOUT_DIRECTIVES],
119
- }]
120
- }] });
121
-
122
- /*
123
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
124
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
125
- * This software is released under MIT license.
126
- * The full license information can be found in LICENSE in the root directory of this project.
127
- */
128
-
129
- /*
130
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
131
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
132
- * This software is released under MIT license.
133
- * The full license information can be found in LICENSE in the root directory of this project.
134
- */
135
- class MainContainerWillyWonka extends WillyWonka {
136
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MainContainerWillyWonka, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
137
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: MainContainerWillyWonka, isStandalone: false, selector: "clr-main-container", usesInheritance: true, ngImport: i0 }); }
138
- }
139
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MainContainerWillyWonka, decorators: [{
140
- type: Directive,
141
- args: [{
142
- selector: 'clr-main-container',
143
- standalone: false,
144
- }]
145
- }] });
146
-
147
- /*
148
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
149
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
150
- * This software is released under MIT license.
151
- * The full license information can be found in LICENSE in the root directory of this project.
152
- */
153
- class ResponsiveNavCodes {
154
- static { this.NAV_LEVEL_1 = 1; }
155
- static { this.NAV_LEVEL_2 = 2; }
156
- static { this.NAV_CLOSE_ALL = 'NAV_CLOSE_ALL'; }
157
- static { this.NAV_OPEN = 'NAV_OPEN'; }
158
- static { this.NAV_CLOSE = 'NAV_CLOSE'; }
159
- static { this.NAV_TOGGLE = 'NAV_TOGGLE'; }
160
- static { this.NAV_CLASS_HAMBURGER_MENU = 'open-hamburger-menu'; }
161
- static { this.NAV_CLASS_OVERFLOW_MENU = 'open-overflow-menu'; }
162
- static { this.NAV_CLASS_TRIGGER_1 = 'header-hamburger-trigger'; }
163
- static { this.NAV_CLASS_TRIGGER_2 = 'header-overflow-trigger'; }
164
- static { this.NAV_CLASS_LEVEL_1 = 'clr-nav-level-1'; }
165
- static { this.NAV_CLASS_LEVEL_2 = 'clr-nav-level-2'; }
166
- }
167
-
168
- /*
169
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
170
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
171
- * This software is released under MIT license.
172
- * The full license information can be found in LICENSE in the root directory of this project.
173
- */
174
- class ResponsiveNavControlMessage {
175
- constructor(_controlCode, _navLevel) {
176
- this._controlCode = _controlCode;
177
- this._navLevel = _navLevel;
178
- }
179
- get controlCode() {
180
- return this._controlCode;
181
- }
182
- get navLevel() {
183
- return this._navLevel;
184
- }
185
- }
186
-
187
- /*
188
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
189
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
190
- * This software is released under MIT license.
191
- * The full license information can be found in LICENSE in the root directory of this project.
192
- */
193
- class ResponsiveNavigationService {
194
- constructor() {
195
- this.responsiveNavList = [];
196
- this.registerNavSubject = new ReplaySubject();
197
- this.controlNavSubject = new Subject();
198
- this.closeAllNavs(); // We start with all navs closed
199
- }
200
- get registeredNavs() {
201
- return this.registerNavSubject.asObservable();
202
- }
203
- get navControl() {
204
- return this.controlNavSubject.asObservable();
205
- }
206
- registerNav(navLevel) {
207
- if (!navLevel || this.isNavRegistered(navLevel)) {
208
- return;
209
- }
210
- this.responsiveNavList.push(navLevel);
211
- this.registerNavSubject.next(this.responsiveNavList);
212
- }
213
- isNavRegistered(navLevel) {
214
- if (this.responsiveNavList.indexOf(navLevel) > -1) {
215
- console.error('Multiple clr-nav-level ' + navLevel + ' attributes found. Please make sure that only one exists');
216
- return true;
217
- }
218
- return false;
219
- }
220
- unregisterNav(navLevel) {
221
- const index = this.responsiveNavList.indexOf(navLevel);
222
- if (index > -1) {
223
- this.responsiveNavList.splice(index, 1);
224
- this.registerNavSubject.next(this.responsiveNavList);
225
- }
226
- }
227
- sendControlMessage(controlCode, navLevel) {
228
- const message = new ResponsiveNavControlMessage(controlCode, navLevel);
229
- this.controlNavSubject.next(message);
230
- }
231
- closeAllNavs() {
232
- const message = new ResponsiveNavControlMessage(ResponsiveNavCodes.NAV_CLOSE_ALL, -999);
233
- this.controlNavSubject.next(message);
234
- }
235
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ResponsiveNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
236
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ResponsiveNavigationService, providedIn: 'root' }); }
237
- }
238
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ResponsiveNavigationService, decorators: [{
239
- type: Injectable,
240
- args: [{ providedIn: 'root' }]
241
- }], ctorParameters: () => [] });
242
-
243
- /*
244
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
245
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
246
- * This software is released under MIT license.
247
- * The full license information can be found in LICENSE in the root directory of this project.
248
- */
249
- class NavDetectionOompaLoompa extends OompaLoompa {
250
- constructor(cdr, willyWonka, responsiveNavService) {
251
- if (!willyWonka) {
252
- throw new Error('clr-header should only be used inside of a clr-main-container');
253
- }
254
- super(cdr, willyWonka);
255
- this.responsiveNavService = responsiveNavService;
256
- }
257
- // NavDetectionOompaLoompa is the addition of the nav levels
258
- // Since we support 2 levels, the possibilities are 0, 1 or 3 (1 + 2)
259
- get flavor() {
260
- return this.responsiveNavService.responsiveNavList.reduce((sum, navLevel) => sum + navLevel, 0);
261
- }
262
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NavDetectionOompaLoompa, deps: [{ token: i0.ChangeDetectorRef }, { token: MainContainerWillyWonka, optional: true }, { token: ResponsiveNavigationService }], target: i0.ɵɵFactoryTarget.Directive }); }
263
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: NavDetectionOompaLoompa, isStandalone: false, selector: "clr-header", usesInheritance: true, ngImport: i0 }); }
264
- }
265
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NavDetectionOompaLoompa, decorators: [{
266
- type: Directive,
267
- args: [{
268
- selector: 'clr-header',
269
- standalone: false,
270
- }]
271
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: MainContainerWillyWonka, decorators: [{
272
- type: Optional
273
- }] }, { type: ResponsiveNavigationService }] });
274
-
275
- /*
276
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
277
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
278
- * This software is released under MIT license.
279
- * The full license information can be found in LICENSE in the root directory of this project.
280
- */
281
-
282
- /*
283
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
284
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
285
- * This software is released under MIT license.
286
- * The full license information can be found in LICENSE in the root directory of this project.
287
- */
288
- class ClrHeader {
289
- constructor(responsiveNavService, commonStrings) {
290
- this.responsiveNavService = responsiveNavService;
291
- this.commonStrings = commonStrings;
292
- this.role = 'banner';
293
- this.isNavLevel1OnPage = false;
294
- this.isNavLevel2OnPage = false;
295
- this.openNavLevel = null;
296
- this.responsiveNavCodes = ResponsiveNavCodes;
297
- this._subscription = responsiveNavService.registeredNavs.subscribe({
298
- next: (navLevelList) => {
299
- this.initializeNavTriggers(navLevelList);
300
- },
301
- });
302
- this._subscription.add(responsiveNavService.navControl
303
- .pipe(filter(({ controlCode }) => controlCode === ResponsiveNavCodes.NAV_CLOSE || controlCode === ResponsiveNavCodes.NAV_CLOSE_ALL))
304
- .subscribe(() => {
305
- this.openNavLevel = null;
306
- }));
307
- }
308
- get responsiveNavCommonString() {
309
- const myCommonStrings = this.commonStrings.keys;
310
- if (this.openNavLevel !== this.responsiveNavCodes.NAV_LEVEL_1) {
311
- return myCommonStrings.responsiveNavToggleOpen;
312
- }
313
- else {
314
- return myCommonStrings.responsiveNavToggleClose;
315
- }
316
- }
317
- get responsiveOverflowCommonString() {
318
- const myCommonStrings = this.commonStrings.keys;
319
- if (this.openNavLevel !== this.responsiveNavCodes.NAV_LEVEL_2) {
320
- return myCommonStrings.responsiveNavOverflowOpen;
321
- }
322
- else {
323
- return myCommonStrings.responsiveNavOverflowClose;
324
- }
325
- }
326
- // reset triggers. handles cases when an application has different nav levels on different pages.
327
- resetNavTriggers() {
328
- this.isNavLevel1OnPage = false;
329
- this.isNavLevel2OnPage = false;
330
- }
331
- // decides which triggers to show on the header
332
- initializeNavTriggers(navList) {
333
- this.resetNavTriggers();
334
- if (navList.length > 2) {
335
- console.error('More than 2 Nav Levels detected.');
336
- return;
337
- }
338
- navList.forEach(navLevel => {
339
- if (navLevel === ResponsiveNavCodes.NAV_LEVEL_1) {
340
- this.isNavLevel1OnPage = true;
341
- }
342
- else if (navLevel === ResponsiveNavCodes.NAV_LEVEL_2) {
343
- this.isNavLevel2OnPage = true;
344
- }
345
- });
346
- }
347
- // closes the nav that is open
348
- closeOpenNav() {
349
- this.responsiveNavService.closeAllNavs();
350
- }
351
- /**
352
- * @deprecated Will be removed in with @clr/angular v15.0.0
353
- *
354
- * Use `openNav(navLevel)` instead to open the navigation and ResponsiveNavService to close it.
355
- */
356
- toggleNav(navLevel) {
357
- if (this.openNavLevel === navLevel) {
358
- this.responsiveNavService.sendControlMessage(ResponsiveNavCodes.NAV_CLOSE, navLevel);
359
- return;
360
- }
361
- this.openNav(navLevel);
362
- }
363
- openNav(navLevel) {
364
- this.openNavLevel = navLevel;
365
- this.responsiveNavService.sendControlMessage(ResponsiveNavCodes.NAV_OPEN, navLevel);
366
- }
367
- ngOnDestroy() {
368
- this._subscription.unsubscribe();
369
- }
370
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrHeader, deps: [{ token: ResponsiveNavigationService }, { token: i1$1.ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
371
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrHeader, isStandalone: false, selector: "clr-header", inputs: { role: "role" }, host: { properties: { "class.header": "true", "attr.role": "this.role" } }, ngImport: i0, template: `
372
- @if (isNavLevel1OnPage) {
373
- <button
374
- type="button"
375
- class="header-hamburger-trigger"
376
- [attr.aria-label]="responsiveNavCommonString"
377
- (click)="openNav(responsiveNavCodes.NAV_LEVEL_1)"
378
- >
379
- <span></span>
380
- </button>
381
- }
382
- <ng-content></ng-content>
383
- @if (isNavLevel2OnPage) {
384
- <button
385
- type="button"
386
- class="header-overflow-trigger"
387
- [attr.aria-label]="responsiveOverflowCommonString"
388
- (click)="openNav(responsiveNavCodes.NAV_LEVEL_2)"
389
- >
390
- <span></span>
391
- </button>
392
- }
393
- <div class="header-backdrop" (click)="closeOpenNav()"></div>
394
- `, isInline: true }); }
395
- }
396
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrHeader, decorators: [{
397
- type: Component,
398
- args: [{
399
- selector: 'clr-header',
400
- template: `
401
- @if (isNavLevel1OnPage) {
402
- <button
403
- type="button"
404
- class="header-hamburger-trigger"
405
- [attr.aria-label]="responsiveNavCommonString"
406
- (click)="openNav(responsiveNavCodes.NAV_LEVEL_1)"
407
- >
408
- <span></span>
409
- </button>
410
- }
411
- <ng-content></ng-content>
412
- @if (isNavLevel2OnPage) {
413
- <button
414
- type="button"
415
- class="header-overflow-trigger"
416
- [attr.aria-label]="responsiveOverflowCommonString"
417
- (click)="openNav(responsiveNavCodes.NAV_LEVEL_2)"
418
- >
419
- <span></span>
420
- </button>
421
- }
422
- <div class="header-backdrop" (click)="closeOpenNav()"></div>
423
- `,
424
- host: { '[class.header]': 'true' },
425
- standalone: false,
426
- }]
427
- }], ctorParameters: () => [{ type: ResponsiveNavigationService }, { type: i1$1.ClrCommonStringsService }], propDecorators: { role: [{
428
- type: Input
429
- }, {
430
- type: HostBinding,
431
- args: ['attr.role']
432
- }] } });
433
-
434
- /*
435
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
436
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
437
- * This software is released under MIT license.
438
- * The full license information can be found in LICENSE in the root directory of this project.
439
- */
440
- const createCloseButton = (document, ariaLabel) => {
441
- ClarityIcons.addIcons(timesIcon);
442
- const closeButton = document.createElement('button');
443
- closeButton.setAttribute('aria-label', ariaLabel);
444
- closeButton.setAttribute('aria-hidden', 'true');
445
- closeButton.innerHTML = `
446
- <cds-icon
447
- inner-offset="1"
448
- shape="times"
449
- size="32"
450
- ></cds-icon>
451
- `;
452
- /**
453
- * The button is hidden by default based on our Desktop-first approach.
454
- */
455
- closeButton.setAttribute('hidden', 'true');
456
- closeButton.className = 'clr-nav-close';
457
- return closeButton;
458
- };
459
- class ClrNavLevel {
460
- constructor(platformId, cdkTrapFocus, responsiveNavService, elementRef, renderer, injector) {
461
- this.cdkTrapFocus = cdkTrapFocus;
462
- this.responsiveNavService = responsiveNavService;
463
- this.elementRef = elementRef;
464
- this.renderer = renderer;
465
- this._isOpen = false;
466
- if (isPlatformBrowser(platformId)) {
467
- this._document = injector.get(DOCUMENT);
468
- }
469
- this._subscription = responsiveNavService.navControl
470
- .pipe(filter(x => x.navLevel === this.level), filter(({ controlCode }) => (controlCode === ResponsiveNavCodes.NAV_OPEN && !this.isOpen) ||
471
- (controlCode === ResponsiveNavCodes.NAV_CLOSE && this.isOpen)))
472
- .subscribe(({ controlCode }) => {
473
- if (controlCode === ResponsiveNavCodes.NAV_OPEN) {
474
- this.open();
475
- return;
476
- }
477
- this.close();
478
- });
479
- this._subscription.add(responsiveNavService.navControl
480
- .pipe(filter(({ controlCode }) => controlCode === ResponsiveNavCodes.NAV_CLOSE_ALL))
481
- .subscribe(() => this.close()));
482
- }
483
- get level() {
484
- return this._level;
485
- }
486
- // getter to access the responsive navigation codes from the template
487
- get responsiveNavCodes() {
488
- return ResponsiveNavCodes;
489
- }
490
- get isOpen() {
491
- return this._isOpen;
492
- }
493
- ngOnInit() {
494
- this.cdkTrapFocus.enabled = false;
495
- if (!this.closeButtonAriaLabel) {
496
- this.closeButtonAriaLabel =
497
- this._level === ResponsiveNavCodes.NAV_LEVEL_1
498
- ? commonStringsDefault.responsiveNavToggleClose
499
- : commonStringsDefault.responsiveNavOverflowClose;
500
- }
501
- if (this.level !== ResponsiveNavCodes.NAV_LEVEL_1 && this.level !== ResponsiveNavCodes.NAV_LEVEL_2) {
502
- console.error('Nav Level can only be 1 or 2');
503
- return;
504
- }
505
- this.responsiveNavService.registerNav(this.level);
506
- this.addNavClass(this.level);
507
- }
508
- ngAfterViewInit() {
509
- const closeButton = createCloseButton(this._document, this.closeButtonAriaLabel);
510
- this.renderer.listen(closeButton, 'click', this.close.bind(this));
511
- this.renderer.insertBefore(this.elementRef.nativeElement, closeButton, this.elementRef.nativeElement.firstChild); // Adding the button at the top of the nav
512
- if (this._document.body.clientWidth < LARGE_BREAKPOINT) {
513
- /**
514
- * Close if the document body is smaller than the large breakpoint for example:
515
- * - Refreshing the page
516
- * - Browser window size is changed when opening the applicaiton
517
- * - Browser zoom is turned on and zoomed to a size that makes the document smaller than the large breakpoint
518
- */
519
- this.close();
520
- }
521
- }
522
- ngOnDestroy() {
523
- this.responsiveNavService.unregisterNav(this.level);
524
- this._subscription.unsubscribe();
525
- }
526
- onResize(event) {
527
- const target = event.target;
528
- if (target.innerWidth < LARGE_BREAKPOINT && this.isOpen) {
529
- this.close();
530
- return;
531
- }
532
- this.showNavigation();
533
- }
534
- // TODO: Figure out whats the best way to do this. Possible methods
535
- // 1. HostListener (current solution)
536
- // 2. Directives on the .nav-link class. We discussed on moving away from class selectors but I forget the reason
537
- // why
538
- onMouseClick(target) {
539
- let current = target; // Get the element in the DOM on which the mouse was clicked
540
- const navHost = this.elementRef.nativeElement; // Get the current nav native HTML element
541
- // Start checking if current and navHost are equal.
542
- // If not traverse to the parentNode and check again.
543
- while (current) {
544
- if (current === navHost) {
545
- return;
546
- }
547
- else if (current.classList.contains('nav-link') && this._document.body.clientWidth < LARGE_BREAKPOINT) {
548
- this.close();
549
- return;
550
- }
551
- current = current.parentNode;
552
- }
553
- }
554
- addNavClass(level) {
555
- const navHostClassList = this.elementRef.nativeElement.classList;
556
- if (level === ResponsiveNavCodes.NAV_LEVEL_1) {
557
- navHostClassList.add(ResponsiveNavCodes.NAV_CLASS_LEVEL_1);
558
- }
559
- else if (level === ResponsiveNavCodes.NAV_LEVEL_2) {
560
- navHostClassList.add(ResponsiveNavCodes.NAV_CLASS_LEVEL_2);
561
- }
562
- }
563
- open() {
564
- this._isOpen = true;
565
- this.showNavigation();
566
- this.cdkTrapFocus.enabled = true;
567
- this.showCloseButton();
568
- this.responsiveNavService.sendControlMessage(ResponsiveNavCodes.NAV_OPEN, this.level);
569
- }
570
- close() {
571
- this._isOpen = false;
572
- this.hideNavigation();
573
- this.cdkTrapFocus.enabled = false;
574
- this.hideCloseButton();
575
- this.responsiveNavService.sendControlMessage(ResponsiveNavCodes.NAV_CLOSE, this.level);
576
- }
577
- hideNavigation() {
578
- this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-hidden', 'true');
579
- this.renderer.setAttribute(this.elementRef.nativeElement, 'hidden', 'true');
580
- }
581
- showNavigation() {
582
- this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-hidden', 'false');
583
- this.renderer.removeAttribute(this.elementRef.nativeElement, 'hidden');
584
- }
585
- hideCloseButton() {
586
- this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-hidden', 'true');
587
- this.renderer.setAttribute(this.elementRef.nativeElement.querySelector('.clr-nav-close'), 'hidden', 'true');
588
- }
589
- showCloseButton() {
590
- this.renderer.setAttribute(this.elementRef.nativeElement.querySelector('.clr-nav-close'), 'aria-hidden', 'false');
591
- this.renderer.removeAttribute(this.elementRef.nativeElement.querySelector('.clr-nav-close'), 'hidden');
592
- }
593
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrNavLevel, deps: [{ token: PLATFORM_ID }, { token: i1$1.ClrStandaloneCdkTrapFocus }, { token: ResponsiveNavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
594
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrNavLevel, isStandalone: false, selector: "[clr-nav-level]", inputs: { _level: ["clr-nav-level", "_level"], closeButtonAriaLabel: ["closeAriaLabel", "closeButtonAriaLabel"] }, host: { listeners: { "window:resize": "onResize($event)", "click": "onMouseClick($event.target)" } }, hostDirectives: [{ directive: i1$1.ClrStandaloneCdkTrapFocus }], ngImport: i0 }); }
595
- }
596
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrNavLevel, decorators: [{
597
- type: Directive,
598
- args: [{
599
- selector: '[clr-nav-level]',
600
- hostDirectives: [ClrStandaloneCdkTrapFocus],
601
- standalone: false,
602
- }]
603
- }], ctorParameters: () => [{ type: undefined, decorators: [{
604
- type: Inject,
605
- args: [PLATFORM_ID]
606
- }] }, { type: i1$1.ClrStandaloneCdkTrapFocus }, { type: ResponsiveNavigationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }], propDecorators: { _level: [{
607
- type: Input,
608
- args: ['clr-nav-level']
609
- }], closeButtonAriaLabel: [{
610
- type: Input,
611
- args: ['closeAriaLabel']
612
- }], onResize: [{
613
- type: HostListener,
614
- args: ['window:resize', ['$event']]
615
- }], onMouseClick: [{
616
- type: HostListener,
617
- args: ['click', ['$event.target']]
618
- }] } });
619
-
620
- /*
621
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
622
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
623
- * This software is released under MIT license.
624
- * The full license information can be found in LICENSE in the root directory of this project.
625
- */
626
- class ClrAriaCurrentLink {
627
- constructor(rla) {
628
- this.rla = rla;
629
- }
630
- ngOnInit() {
631
- this.subscription = this.rla.isActiveChange.subscribe(isActive => {
632
- this.ariaCurrent = isActive ? 'page' : undefined;
633
- });
634
- }
635
- ngOnDestroy() {
636
- this.subscription.unsubscribe();
637
- }
638
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrAriaCurrentLink, deps: [{ token: i1$2.RouterLinkActive }], target: i0.ɵɵFactoryTarget.Directive }); }
639
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrAriaCurrentLink, isStandalone: false, selector: "[clrAriaCurrentLink]", host: { properties: { "attr.aria-current": "ariaCurrent" } }, ngImport: i0 }); }
640
- }
641
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrAriaCurrentLink, decorators: [{
642
- type: Directive,
643
- args: [{
644
- selector: '[clrAriaCurrentLink]',
645
- host: { '[attr.aria-current]': 'ariaCurrent' },
646
- standalone: false,
647
- }]
648
- }], ctorParameters: () => [{ type: i1$2.RouterLinkActive }] });
649
-
650
- /*
651
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
652
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
653
- * This software is released under MIT license.
654
- * The full license information can be found in LICENSE in the root directory of this project.
655
- */
656
- const CLR_NAVIGATION_DIRECTIVES = [
657
- ClrHeader,
658
- ClrNavLevel,
659
- ClrAriaCurrentLink,
660
- NavDetectionOompaLoompa,
661
- MainContainerWillyWonka,
662
- ];
663
- class ClrNavigationModule {
664
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
665
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: ClrNavigationModule, declarations: [ClrHeader,
666
- ClrNavLevel,
667
- ClrAriaCurrentLink,
668
- NavDetectionOompaLoompa,
669
- MainContainerWillyWonka], imports: [CommonModule, ClrIcon, ClrDropdownModule], exports: [ClrHeader,
670
- ClrNavLevel,
671
- ClrAriaCurrentLink,
672
- NavDetectionOompaLoompa,
673
- MainContainerWillyWonka] }); }
674
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrNavigationModule, imports: [CommonModule, ClrIcon, ClrDropdownModule] }); }
675
- }
676
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrNavigationModule, decorators: [{
677
- type: NgModule,
678
- args: [{
679
- imports: [CommonModule, ClrIcon, ClrDropdownModule],
680
- declarations: [CLR_NAVIGATION_DIRECTIVES],
681
- exports: [CLR_NAVIGATION_DIRECTIVES],
682
- }]
683
- }] });
684
-
685
- /*
686
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
687
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
688
- * This software is released under MIT license.
689
- * The full license information can be found in LICENSE in the root directory of this project.
690
- */
691
-
692
- /*
693
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
694
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
695
- * This software is released under MIT license.
696
- * The full license information can be found in LICENSE in the root directory of this project.
697
- */
698
- var TabsLayout;
699
- (function (TabsLayout) {
700
- TabsLayout["HORIZONTAL"] = "horizontal";
701
- TabsLayout["VERTICAL"] = "vertical";
702
- })(TabsLayout || (TabsLayout = {}));
703
-
704
- /*
705
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
706
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
707
- * This software is released under MIT license.
708
- * The full license information can be found in LICENSE in the root directory of this project.
709
- */
710
- class TabsService {
711
- constructor() {
712
- this.layout = TabsLayout.HORIZONTAL;
713
- this._children = [];
714
- }
715
- get children() {
716
- return this._children;
717
- }
718
- get activeTab() {
719
- return this.children.find((tab) => {
720
- return tab.active;
721
- });
722
- }
723
- get overflowTabs() {
724
- if (this.layout === TabsLayout.VERTICAL) {
725
- return [];
726
- }
727
- else {
728
- return this.children.filter((tab) => tab.tabLink.inOverflow === true);
729
- }
730
- }
731
- register(tab) {
732
- this._children.push(tab);
733
- }
734
- unregister(tab) {
735
- const index = this.children.indexOf(tab);
736
- if (index > -1) {
737
- this.children.splice(index, 1);
738
- }
739
- }
740
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TabsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
741
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TabsService }); }
742
- }
743
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TabsService, decorators: [{
744
- type: Injectable
745
- }] });
746
-
747
- /*
748
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
749
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
750
- * This software is released under MIT license.
751
- * The full license information can be found in LICENSE in the root directory of this project.
752
- */
753
- let nbTabContentComponents = 0;
754
- class ClrTabContent {
755
- constructor(ifActiveService, id, tabsService) {
756
- this.ifActiveService = ifActiveService;
757
- this.id = id;
758
- this.tabsService = tabsService;
759
- if (!this.tabContentId) {
760
- this.tabContentId = 'clr-tab-content-' + nbTabContentComponents++;
761
- }
762
- }
763
- get active() {
764
- return this.ifActiveService.current === this.id;
765
- }
766
- get ariaLabelledBy() {
767
- return this.tabsService.children.find(tab => tab.tabLink.id === this.id)?.tabLink?.tabLinkId;
768
- }
769
- // The template must be applied on the top-down phase of view-child initialization to prevent
770
- // components in the content from initializing before a content container exists.
771
- // Some child components need their container for sizing calculations.
772
- set templateRef(value) {
773
- this.viewRef = this.tabsService.tabContentViewContainer.createEmbeddedView(value);
774
- }
775
- ngOnDestroy() {
776
- const index = this.tabsService.tabContentViewContainer.indexOf(this.viewRef);
777
- if (index > -1) {
778
- this.tabsService.tabContentViewContainer.remove(index);
779
- }
780
- }
781
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTabContent, deps: [{ token: i1$1.IfActiveService }, { token: IF_ACTIVE_ID }, { token: TabsService }], target: i0.ɵɵFactoryTarget.Component }); }
782
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrTabContent, isStandalone: false, selector: "clr-tab-content", inputs: { tabContentId: ["id", "tabContentId"] }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["tabContentProjectedRef"], descendants: true, static: true }], ngImport: i0, template: `
783
- <ng-template #tabContentProjectedRef>
784
- <section
785
- [id]="tabContentId"
786
- role="tabpanel"
787
- class="tab-content"
788
- [class.active]="active"
789
- [hidden]="!active"
790
- [attr.aria-labelledby]="ariaLabelledBy"
791
- [attr.aria-hidden]="!active"
792
- >
793
- <ng-content></ng-content>
794
- </section>
795
- </ng-template>
796
- `, isInline: true }); }
797
- }
798
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTabContent, decorators: [{
799
- type: Component,
800
- args: [{
801
- selector: 'clr-tab-content',
802
- template: `
803
- <ng-template #tabContentProjectedRef>
804
- <section
805
- [id]="tabContentId"
806
- role="tabpanel"
807
- class="tab-content"
808
- [class.active]="active"
809
- [hidden]="!active"
810
- [attr.aria-labelledby]="ariaLabelledBy"
811
- [attr.aria-hidden]="!active"
812
- >
813
- <ng-content></ng-content>
814
- </section>
815
- </ng-template>
816
- `,
817
- standalone: false,
818
- }]
819
- }], ctorParameters: () => [{ type: i1$1.IfActiveService }, { type: undefined, decorators: [{
820
- type: Inject,
821
- args: [IF_ACTIVE_ID]
822
- }] }, { type: TabsService }], propDecorators: { tabContentId: [{
823
- type: Input,
824
- args: ['id']
825
- }], templateRef: [{
826
- type: ViewChild,
827
- args: ['tabContentProjectedRef', { static: true }]
828
- }] } });
829
-
830
- /*
831
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
832
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
833
- * This software is released under MIT license.
834
- * The full license information can be found in LICENSE in the root directory of this project.
835
- */
836
- let nbTabsComponent = 0;
837
- const TABS_ID = new InjectionToken('TABS_ID');
838
- function tokenFactory() {
839
- return 'clr-tabs-' + nbTabsComponent++;
840
- }
841
- const TABS_ID_PROVIDER = {
842
- provide: TABS_ID,
843
- useFactory: tokenFactory,
844
- };
845
-
846
- /*
847
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
848
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
849
- * This software is released under MIT license.
850
- * The full license information can be found in LICENSE in the root directory of this project.
851
- */
852
- let nbTabLinkComponents = 0;
853
- class ClrTabLink {
854
- constructor(ifActiveService, id, el, viewContainerRef, tabsService, tabsId) {
855
- this.ifActiveService = ifActiveService;
856
- this.id = id;
857
- this.el = el;
858
- this.tabsService = tabsService;
859
- this.tabsId = tabsId;
860
- if (!this.tabLinkId) {
861
- this.tabLinkId = 'clr-tab-link-' + nbTabLinkComponents++;
862
- }
863
- // Tab links can be rendered in one of two places: in the main area or inside the overflow dropdown menu.
864
- // Here, we create a container so that its template can be used to create embeddedView on the fly.
865
- // See TabsService's renderView() method and how it's used in Tabs class for an example.
866
- this.templateRefContainer = viewContainerRef.createComponent(TemplateRefContainer, {
867
- projectableNodes: [[el.nativeElement]],
868
- }).instance;
869
- }
870
- get inOverflow() {
871
- return this._inOverflow && this.tabsService.layout !== TabsLayout.VERTICAL;
872
- }
873
- set inOverflow(inOverflow) {
874
- this._inOverflow = inOverflow;
875
- }
876
- get addLinkClasses() {
877
- return !this.inOverflow;
878
- }
879
- get ariaControls() {
880
- return this.tabsService.children.find(tab => tab.tabLink === this)?.tabContent?.tabContentId;
881
- }
882
- get active() {
883
- return this.ifActiveService.current === this.id;
884
- }
885
- get tabindex() {
886
- return this.active ? 0 : -1;
887
- }
888
- activate() {
889
- this.ifActiveService.current = this.id;
890
- }
891
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTabLink, deps: [{ token: i1$1.IfActiveService }, { token: IF_ACTIVE_ID }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: TabsService }, { token: TABS_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
892
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrTabLink, isStandalone: false, selector: "[clrTabLink]", inputs: { tabLinkId: ["id", "tabLinkId"], inOverflow: ["clrTabLinkInOverflow", "inOverflow"] }, host: { attributes: { "role": "tab", "type": "button" }, listeners: { "click": "activate()" }, properties: { "class.btn": "true", "id": "this.tabLinkId", "class.btn-link": "this.addLinkClasses", "class.nav-link": "this.addLinkClasses", "attr.aria-controls": "this.ariaControls", "class.active": "this.active", "attr.aria-selected": "this.active", "attr.tabindex": "this.tabindex" } }, ngImport: i0 }); }
893
- }
894
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTabLink, decorators: [{
895
- type: Directive,
896
- args: [{
897
- selector: '[clrTabLink]',
898
- host: {
899
- '[class.btn]': 'true',
900
- role: 'tab',
901
- type: 'button',
902
- },
903
- standalone: false,
904
- }]
905
- }], ctorParameters: () => [{ type: i1$1.IfActiveService }, { type: undefined, decorators: [{
906
- type: Inject,
907
- args: [IF_ACTIVE_ID]
908
- }] }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: TabsService }, { type: undefined, decorators: [{
909
- type: Inject,
910
- args: [TABS_ID]
911
- }] }], propDecorators: { tabLinkId: [{
912
- type: Input,
913
- args: ['id']
914
- }, {
915
- type: HostBinding,
916
- args: ['id']
917
- }], inOverflow: [{
918
- type: Input,
919
- args: ['clrTabLinkInOverflow']
920
- }], addLinkClasses: [{
921
- type: HostBinding,
922
- args: ['class.btn-link']
923
- }, {
924
- type: HostBinding,
925
- args: ['class.nav-link']
926
- }], ariaControls: [{
927
- type: HostBinding,
928
- args: ['attr.aria-controls']
929
- }], active: [{
930
- type: HostBinding,
931
- args: ['class.active']
932
- }, {
933
- type: HostBinding,
934
- args: ['attr.aria-selected']
935
- }], tabindex: [{
936
- type: HostBinding,
937
- args: ['attr.tabindex']
938
- }], activate: [{
939
- type: HostListener,
940
- args: ['click']
941
- }] } });
942
-
943
- /*
944
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
945
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
946
- * This software is released under MIT license.
947
- * The full license information can be found in LICENSE in the root directory of this project.
948
- */
949
- class ClrTab {
950
- constructor(ifActiveService, id, tabsService) {
951
- this.ifActiveService = ifActiveService;
952
- this.id = id;
953
- this.tabsService = tabsService;
954
- tabsService.register(this);
955
- }
956
- get active() {
957
- return this.ifActiveService.current === this.id;
958
- }
959
- ngOnDestroy() {
960
- this.tabsService.unregister(this);
961
- }
962
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTab, deps: [{ token: i1$1.IfActiveService }, { token: IF_ACTIVE_ID }, { token: TabsService }], target: i0.ɵɵFactoryTarget.Component }); }
963
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrTab, isStandalone: false, selector: "clr-tab", providers: [IF_ACTIVE_ID_PROVIDER], queries: [{ propertyName: "tabLink", first: true, predicate: ClrTabLink, descendants: true, static: true }, { propertyName: "tabContent", first: true, predicate: ClrTabContent, descendants: true, static: true }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
964
- }
965
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTab, decorators: [{
966
- type: Component,
967
- args: [{
968
- selector: 'clr-tab',
969
- template: `<ng-content></ng-content>`,
970
- providers: [IF_ACTIVE_ID_PROVIDER],
971
- standalone: false,
972
- }]
973
- }], ctorParameters: () => [{ type: i1$1.IfActiveService }, { type: undefined, decorators: [{
974
- type: Inject,
975
- args: [IF_ACTIVE_ID]
976
- }] }, { type: TabsService }], propDecorators: { tabLink: [{
977
- type: ContentChild,
978
- args: [ClrTabLink, { static: true }]
979
- }], tabContent: [{
980
- type: ContentChild,
981
- args: [ClrTabContent, { static: true }]
982
- }] } });
983
-
984
- /*
985
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
986
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
987
- * This software is released under MIT license.
988
- * The full license information can be found in LICENSE in the root directory of this project.
989
- */
990
- class ClrTabAction {
991
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTabAction, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
992
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrTabAction, isStandalone: false, selector: "[clrTabAction]", host: { attributes: { "tabindex": "0" } }, ngImport: i0 }); }
993
- }
994
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTabAction, decorators: [{
995
- type: Directive,
996
- args: [{
997
- selector: '[clrTabAction]',
998
- host: {
999
- tabindex: '0',
1000
- },
1001
- standalone: false,
1002
- }]
1003
- }] });
1004
-
1005
- /*
1006
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1007
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1008
- * This software is released under MIT license.
1009
- * The full license information can be found in LICENSE in the root directory of this project.
1010
- */
1011
- class ClrTabOverflowContent {
1012
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTabOverflowContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1013
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrTabOverflowContent, isStandalone: false, selector: "clr-tab-overflow-content", host: { properties: { "class.dropdown-menu": "true" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
1014
- }
1015
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTabOverflowContent, decorators: [{
1016
- type: Component,
1017
- args: [{
1018
- selector: 'clr-tab-overflow-content',
1019
- template: `<ng-content></ng-content>`,
1020
- host: {
1021
- '[class.dropdown-menu]': 'true',
1022
- },
1023
- standalone: false,
1024
- }]
1025
- }] });
1026
-
1027
- /*
1028
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1029
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1030
- * This software is released under MIT license.
1031
- * The full license information can be found in LICENSE in the root directory of this project.
1032
- */
1033
- class ClrTabs {
1034
- constructor(ifActiveService, popoverService, tabsService, tabsId, commonStrings) {
1035
- this.ifActiveService = ifActiveService;
1036
- this.popoverService = popoverService;
1037
- this.tabsService = tabsService;
1038
- this.tabsId = tabsId;
1039
- this.commonStrings = commonStrings;
1040
- this.tabLinkElements = [];
1041
- // in order to check focus is triggered by click
1042
- // we are using this _mousedown flag
1043
- this._mousedown = false;
1044
- this.subscriptions = [];
1045
- this._tabLinkDirectives = [];
1046
- }
1047
- get layout() {
1048
- return this.tabsService.layout;
1049
- }
1050
- set layout(layout) {
1051
- if (Object.keys(TabsLayout)
1052
- .map(key => {
1053
- return TabsLayout[key];
1054
- })
1055
- .indexOf(layout) >= 0) {
1056
- this.tabsService.layout = layout;
1057
- }
1058
- }
1059
- get tabLinkDirectives() {
1060
- return this._tabLinkDirectives;
1061
- }
1062
- get activeTabInOverflow() {
1063
- return this.tabsService.overflowTabs.indexOf(this.tabsService.activeTab) > -1;
1064
- }
1065
- get activeTabPosition() {
1066
- return this._tabLinkDirectives.findIndex(link => link.active);
1067
- }
1068
- get isCurrentInOverflow() {
1069
- return this.keyFocus.current >= this.overflowPosition;
1070
- }
1071
- get isVertical() {
1072
- return this.layout === TabsLayout.VERTICAL;
1073
- }
1074
- set tabOverflowEl(value) {
1075
- this._tabOverflowEl = value && value.nativeElement;
1076
- if (this.popoverService.open && value) {
1077
- // only when tab overflow view element is registered,
1078
- // we need to move the focus to the first item
1079
- this.keyFocus.focusCurrent();
1080
- }
1081
- }
1082
- get overflowPosition() {
1083
- return this._tabLinkDirectives.filter(link => !link.inOverflow).length;
1084
- }
1085
- set tabContentViewContainer(value) {
1086
- this.tabsService.tabContentViewContainer = value;
1087
- }
1088
- ngAfterContentInit() {
1089
- this.subscriptions.push(this.listenForTabLinkChanges());
1090
- this.subscriptions.push(this.listedForTabsActionsChanges());
1091
- if (typeof this.ifActiveService.current === 'undefined' && this.tabLinkDirectives[0]) {
1092
- this.tabLinkDirectives[0].activate();
1093
- }
1094
- // set initial current position
1095
- this.keyFocus.current = this.activeTabPosition;
1096
- }
1097
- ngOnDestroy() {
1098
- this.subscriptions.forEach(sub => {
1099
- sub.unsubscribe();
1100
- });
1101
- }
1102
- toggleOverflowOnPosition(position) {
1103
- // we need to check current position to determine
1104
- // whether we need to open the tab overflow or not
1105
- this.popoverService.open = position >= this.overflowPosition;
1106
- }
1107
- resetKeyFocusCurrentToActive(event) {
1108
- const keyFocusContainsFocus = this.keyFocus.nativeElement.contains(event.relatedTarget);
1109
- if (!keyFocusContainsFocus && this.keyFocus.current !== this.activeTabPosition) {
1110
- this.keyFocus.current = this.activeTabPosition;
1111
- }
1112
- }
1113
- toggleOverflowOnClick() {
1114
- if (this.isCurrentInOverflow && this.popoverService.open) {
1115
- this.keyFocus.moveTo(this.overflowPosition - 1);
1116
- }
1117
- else {
1118
- this.keyFocus.moveTo(this.overflowPosition);
1119
- }
1120
- // once click handler completes running,
1121
- // reset the _mousedown flag
1122
- this._mousedown = false;
1123
- }
1124
- openOverflowOnFocus() {
1125
- // This method should be called only on keyboard generated focus
1126
- // when the active tab is in the overflow
1127
- if (!this._mousedown && !this.popoverService.open) {
1128
- this.keyFocus.moveTo(this.activeTabPosition);
1129
- }
1130
- }
1131
- closeOnFocusOut(event) {
1132
- if (!this._tabOverflowEl.contains(event.relatedTarget) &&
1133
- this.popoverService.open &&
1134
- !this._mousedown) {
1135
- this.popoverService.open = false;
1136
- // if the focus is out of overflow and lands on the active tab link
1137
- // which is currently visible, set the key focus current to activeTabPosition
1138
- if (this.tabLinkElements[this.activeTabPosition] === event.relatedTarget) {
1139
- this.keyFocus.current = this.activeTabPosition;
1140
- }
1141
- }
1142
- }
1143
- closeOnEscapeKey() {
1144
- // Move current to the last visible focusable item
1145
- this.keyFocus.moveTo(this.overflowPosition - 1);
1146
- }
1147
- closeOnOutsideClick(event, tabOverflowTrigger) {
1148
- // Exit early if the event target is the trigger element itself or element that's inside the trigger element.
1149
- // This is because we have another handler on the tabOverflowTrigger element itself.
1150
- // As this handler method is on the document level so the event bubbles up to it and conflicts
1151
- // with the tabOverflowTrigger handler resulting in opening the tab overflow and closing it right away consecutively.
1152
- const isTabsAction = this.tabsActions.some(action => action.nativeElement.contains(event.target));
1153
- if (event.target === tabOverflowTrigger ||
1154
- tabOverflowTrigger.contains(event.target) ||
1155
- isTabsAction) {
1156
- return;
1157
- }
1158
- // Move current to the last visible focusable item
1159
- if (!this._tabOverflowEl.contains(event.target) && this.isCurrentInOverflow) {
1160
- this.keyFocus.moveTo(this.overflowPosition - 1);
1161
- }
1162
- }
1163
- setTabLinkElements() {
1164
- this._tabLinkDirectives = this.tabs.map(tab => tab.tabLink);
1165
- this.tabLinkElements = this._tabLinkDirectives.map(tab => tab.el.nativeElement);
1166
- if (this.tabsActions && this.tabsActions) {
1167
- this.tabLinkElements.push(...this.tabsActions.map(action => action.nativeElement));
1168
- }
1169
- }
1170
- listenForTabLinkChanges() {
1171
- return this.tabs.changes
1172
- .pipe(startWith(this.tabs.map(tab => tab.tabLink)))
1173
- .subscribe(() => this.setTabLinkElements());
1174
- }
1175
- listedForTabsActionsChanges() {
1176
- return this.tabsActions.changes.subscribe(() => this.setTabLinkElements());
1177
- }
1178
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTabs, deps: [{ token: i1$1.IfActiveService }, { token: i2.ClrPopoverService }, { token: TabsService }, { token: TABS_ID }, { token: i1$1.ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
1179
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrTabs, isStandalone: false, selector: "clr-tabs", inputs: { layout: ["clrLayout", "layout"] }, host: { properties: { "class.tabs-vertical": "this.isVertical" } }, providers: [IfActiveService, TabsService, TABS_ID_PROVIDER], queries: [{ propertyName: "tabsActions", predicate: ClrTabAction, descendants: true, read: ElementRef }, { propertyName: "tabs", predicate: ClrTab }], viewQueries: [{ propertyName: "keyFocus", first: true, predicate: ClrKeyFocus, descendants: true, static: true }, { propertyName: "tabOverflowEl", first: true, predicate: ClrTabOverflowContent, descendants: true, read: ElementRef }, { propertyName: "tabContentViewContainer", first: true, predicate: ["tabContentViewContainer"], descendants: true, read: ViewContainerRef, static: true }], hostDirectives: [{ directive: i2.ClrPopoverHostDirective }], ngImport: i0, template: `
1180
- <ul
1181
- class="nav"
1182
- role="tablist"
1183
- [clrKeyFocus]="tabLinkElements"
1184
- clrDirection="both"
1185
- (clrFocusChange)="toggleOverflowOnPosition($event)"
1186
- (focusout)="resetKeyFocusCurrentToActive($event)"
1187
- >
1188
- <!--tab links-->
1189
- @for (link of tabLinkDirectives; track link) {
1190
- @if (link.tabsId === tabsId && !link.inOverflow) {
1191
- <li role="presentation" class="nav-item">
1192
- <ng-container [ngTemplateOutlet]="link.templateRefContainer.template"></ng-container>
1193
- </li>
1194
- }
1195
- }
1196
- @if (tabsService.overflowTabs.length > 0) {
1197
- <div class="tabs-overflow bottom-right" role="presentation" [class.open]="popoverService.open">
1198
- <li role="application" class="nav-item">
1199
- <button
1200
- #tabOverflowTrigger
1201
- class="btn btn-link nav-link dropdown-toggle"
1202
- type="button"
1203
- aria-hidden="true"
1204
- [attr.tabindex]="activeTabInOverflow && !popoverService.open ? 0 : -1"
1205
- [class.active]="activeTabInOverflow"
1206
- [class.open]="popoverService.open"
1207
- (mousedown)="_mousedown = true"
1208
- (focus)="openOverflowOnFocus()"
1209
- (click)="toggleOverflowOnClick()"
1210
- [attr.title]="commonStrings.keys.more"
1211
- >
1212
- <cds-icon
1213
- shape="ellipsis-horizontal"
1214
- [status]="popoverService.open ? 'info' : null"
1215
- [attr.title]="commonStrings.keys.more"
1216
- ></cds-icon>
1217
- </button>
1218
- </li>
1219
- <!--tab links in overflow menu-->
1220
- @if (popoverService.open) {
1221
- <clr-tab-overflow-content
1222
- (document:keydown.escape)="closeOnEscapeKey()"
1223
- (document:click)="closeOnOutsideClick($event, tabOverflowTrigger)"
1224
- (focusout)="closeOnFocusOut($event)"
1225
- >
1226
- @for (link of tabLinkDirectives; track link) {
1227
- @if (link.tabsId === tabsId && link.inOverflow) {
1228
- <ng-container [ngTemplateOutlet]="link.templateRefContainer.template"></ng-container>
1229
- }
1230
- }
1231
- </clr-tab-overflow-content>
1232
- }
1233
- </div>
1234
- }
1235
- <ng-content select="clr-tabs-actions"></ng-content>
1236
- </ul>
1237
- <ng-container #tabContentViewContainer></ng-container>
1238
- `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "component", type: i1$1.ClrKeyFocus, selector: "[clrKeyFocus]", inputs: ["clrDirection", "clrFocusOnLoad", "clrKeyFocus"], outputs: ["clrFocusChange"] }, { kind: "component", type: ClrTabOverflowContent, selector: "clr-tab-overflow-content" }] }); }
1239
- }
1240
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTabs, decorators: [{
1241
- type: Component,
1242
- args: [{
1243
- selector: 'clr-tabs',
1244
- template: `
1245
- <ul
1246
- class="nav"
1247
- role="tablist"
1248
- [clrKeyFocus]="tabLinkElements"
1249
- clrDirection="both"
1250
- (clrFocusChange)="toggleOverflowOnPosition($event)"
1251
- (focusout)="resetKeyFocusCurrentToActive($event)"
1252
- >
1253
- <!--tab links-->
1254
- @for (link of tabLinkDirectives; track link) {
1255
- @if (link.tabsId === tabsId && !link.inOverflow) {
1256
- <li role="presentation" class="nav-item">
1257
- <ng-container [ngTemplateOutlet]="link.templateRefContainer.template"></ng-container>
1258
- </li>
1259
- }
1260
- }
1261
- @if (tabsService.overflowTabs.length > 0) {
1262
- <div class="tabs-overflow bottom-right" role="presentation" [class.open]="popoverService.open">
1263
- <li role="application" class="nav-item">
1264
- <button
1265
- #tabOverflowTrigger
1266
- class="btn btn-link nav-link dropdown-toggle"
1267
- type="button"
1268
- aria-hidden="true"
1269
- [attr.tabindex]="activeTabInOverflow && !popoverService.open ? 0 : -1"
1270
- [class.active]="activeTabInOverflow"
1271
- [class.open]="popoverService.open"
1272
- (mousedown)="_mousedown = true"
1273
- (focus)="openOverflowOnFocus()"
1274
- (click)="toggleOverflowOnClick()"
1275
- [attr.title]="commonStrings.keys.more"
1276
- >
1277
- <cds-icon
1278
- shape="ellipsis-horizontal"
1279
- [status]="popoverService.open ? 'info' : null"
1280
- [attr.title]="commonStrings.keys.more"
1281
- ></cds-icon>
1282
- </button>
1283
- </li>
1284
- <!--tab links in overflow menu-->
1285
- @if (popoverService.open) {
1286
- <clr-tab-overflow-content
1287
- (document:keydown.escape)="closeOnEscapeKey()"
1288
- (document:click)="closeOnOutsideClick($event, tabOverflowTrigger)"
1289
- (focusout)="closeOnFocusOut($event)"
1290
- >
1291
- @for (link of tabLinkDirectives; track link) {
1292
- @if (link.tabsId === tabsId && link.inOverflow) {
1293
- <ng-container [ngTemplateOutlet]="link.templateRefContainer.template"></ng-container>
1294
- }
1295
- }
1296
- </clr-tab-overflow-content>
1297
- }
1298
- </div>
1299
- }
1300
- <ng-content select="clr-tabs-actions"></ng-content>
1301
- </ul>
1302
- <ng-container #tabContentViewContainer></ng-container>
1303
- `,
1304
- providers: [IfActiveService, TabsService, TABS_ID_PROVIDER],
1305
- hostDirectives: [ClrPopoverHostDirective],
1306
- standalone: false,
1307
- }]
1308
- }], ctorParameters: () => [{ type: i1$1.IfActiveService }, { type: i2.ClrPopoverService }, { type: TabsService }, { type: undefined, decorators: [{
1309
- type: Inject,
1310
- args: [TABS_ID]
1311
- }] }, { type: i1$1.ClrCommonStringsService }], propDecorators: { keyFocus: [{
1312
- type: ViewChild,
1313
- args: [ClrKeyFocus, { static: true }]
1314
- }], tabsActions: [{
1315
- type: ContentChildren,
1316
- args: [ClrTabAction, { read: ElementRef, descendants: true }]
1317
- }], tabs: [{
1318
- type: ContentChildren,
1319
- args: [ClrTab]
1320
- }], layout: [{
1321
- type: Input,
1322
- args: ['clrLayout']
1323
- }], isVertical: [{
1324
- type: HostBinding,
1325
- args: ['class.tabs-vertical']
1326
- }], tabOverflowEl: [{
1327
- type: ViewChild,
1328
- args: [ClrTabOverflowContent, { read: ElementRef }]
1329
- }], tabContentViewContainer: [{
1330
- type: ViewChild,
1331
- args: ['tabContentViewContainer', { static: true, read: ViewContainerRef }]
1332
- }] } });
1333
-
1334
- /*
1335
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1336
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1337
- * This software is released under MIT license.
1338
- * The full license information can be found in LICENSE in the root directory of this project.
1339
- */
1340
- class ClrTabsActions {
1341
- constructor() {
1342
- this.position = 'right';
1343
- }
1344
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTabsActions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1345
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrTabsActions, isStandalone: false, selector: "clr-tabs-actions", inputs: { position: "position" }, host: { properties: { "class.tabs-actions": "true", "attr.position": "this.position" } }, ngImport: i0, template: `
1346
- <div class="tabs-actions-wrapper">
1347
- <ng-content></ng-content>
1348
- </div>
1349
- `, isInline: true }); }
1350
- }
1351
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTabsActions, decorators: [{
1352
- type: Component,
1353
- args: [{
1354
- selector: 'clr-tabs-actions',
1355
- template: `
1356
- <div class="tabs-actions-wrapper">
1357
- <ng-content></ng-content>
1358
- </div>
1359
- `,
1360
- host: {
1361
- '[class.tabs-actions]': 'true',
1362
- },
1363
- standalone: false,
1364
- }]
1365
- }], propDecorators: { position: [{
1366
- type: Input
1367
- }, {
1368
- type: HostBinding,
1369
- args: ['attr.position']
1370
- }] } });
1371
-
1372
- /*
1373
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1374
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1375
- * This software is released under MIT license.
1376
- * The full license information can be found in LICENSE in the root directory of this project.
1377
- */
1378
- class TabsWillyWonka extends WillyWonka {
1379
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TabsWillyWonka, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
1380
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: TabsWillyWonka, isStandalone: false, selector: "clr-tabs", usesInheritance: true, ngImport: i0 }); }
1381
- }
1382
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TabsWillyWonka, decorators: [{
1383
- type: Directive,
1384
- args: [{
1385
- selector: 'clr-tabs',
1386
- standalone: false,
1387
- }]
1388
- }] });
1389
-
1390
- /*
1391
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1392
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1393
- * This software is released under MIT license.
1394
- * The full license information can be found in LICENSE in the root directory of this project.
1395
- */
1396
- class ActiveOompaLoompa extends OompaLoompa {
1397
- constructor(cdr, willyWonka, id, ifActive) {
1398
- if (!willyWonka) {
1399
- throw new Error('clrTabLink and clr-tab-content should only be used inside of a clr-tabs');
1400
- }
1401
- super(cdr, willyWonka);
1402
- this.ifActive = ifActive;
1403
- this.id = id;
1404
- }
1405
- get flavor() {
1406
- return this.ifActive.current === this.id;
1407
- }
1408
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ActiveOompaLoompa, deps: [{ token: i0.ChangeDetectorRef }, { token: TabsWillyWonka, optional: true }, { token: IF_ACTIVE_ID }, { token: i1$1.IfActiveService }], target: i0.ɵɵFactoryTarget.Directive }); }
1409
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ActiveOompaLoompa, isStandalone: false, selector: "[clrTabLink], clr-tab-content", usesInheritance: true, ngImport: i0 }); }
1410
- }
1411
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ActiveOompaLoompa, decorators: [{
1412
- type: Directive,
1413
- args: [{
1414
- selector: '[clrTabLink], clr-tab-content',
1415
- standalone: false,
1416
- }]
1417
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TabsWillyWonka, decorators: [{
1418
- type: Optional
1419
- }] }, { type: undefined, decorators: [{
1420
- type: Inject,
1421
- args: [IF_ACTIVE_ID]
1422
- }] }, { type: i1$1.IfActiveService }] });
1423
-
1424
- /*
1425
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1426
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1427
- * This software is released under MIT license.
1428
- * The full license information can be found in LICENSE in the root directory of this project.
1429
- */
1430
- const CLR_TABS_DIRECTIVES = [
1431
- ClrTabContent,
1432
- ClrTab,
1433
- ClrTabs,
1434
- ClrTabOverflowContent,
1435
- ClrTabLink,
1436
- ClrTabAction,
1437
- ClrTabsActions,
1438
- TabsWillyWonka,
1439
- ActiveOompaLoompa,
1440
- ];
1441
- class ClrTabsModule {
1442
- constructor() {
1443
- ClarityIcons.addIcons(ellipsisHorizontalIcon);
1444
- }
1445
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1446
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: ClrTabsModule, declarations: [ClrTabContent,
1447
- ClrTab,
1448
- ClrTabs,
1449
- ClrTabOverflowContent,
1450
- ClrTabLink,
1451
- ClrTabAction,
1452
- ClrTabsActions,
1453
- TabsWillyWonka,
1454
- ActiveOompaLoompa], imports: [CommonModule, ClrConditionalModule, ClrIcon, ClrTemplateRefModule, ClrKeyFocusModule], exports: [ClrTabContent,
1455
- ClrTab,
1456
- ClrTabs,
1457
- ClrTabOverflowContent,
1458
- ClrTabLink,
1459
- ClrTabAction,
1460
- ClrTabsActions,
1461
- TabsWillyWonka,
1462
- ActiveOompaLoompa, ClrConditionalModule] }); }
1463
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTabsModule, imports: [CommonModule, ClrConditionalModule, ClrIcon, ClrTemplateRefModule, ClrKeyFocusModule, ClrConditionalModule] }); }
1464
- }
1465
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTabsModule, decorators: [{
1466
- type: NgModule,
1467
- args: [{
1468
- imports: [CommonModule, ClrConditionalModule, ClrIcon, ClrTemplateRefModule, ClrKeyFocusModule],
1469
- declarations: [CLR_TABS_DIRECTIVES],
1470
- exports: [CLR_TABS_DIRECTIVES, ClrConditionalModule],
1471
- }]
1472
- }], ctorParameters: () => [] });
1473
-
1474
- /*
1475
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1476
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1477
- * This software is released under MIT license.
1478
- * The full license information can be found in LICENSE in the root directory of this project.
1479
- */
1480
-
1481
- /*
1482
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1483
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1484
- * This software is released under MIT license.
1485
- * The full license information can be found in LICENSE in the root directory of this project.
1486
- */
1487
- class ClrVerticalNavGroupChildren {
1488
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrVerticalNavGroupChildren, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1489
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrVerticalNavGroupChildren, isStandalone: false, selector: "clr-vertical-nav-group-children", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
1490
- }
1491
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrVerticalNavGroupChildren, decorators: [{
1492
- type: Component,
1493
- args: [{
1494
- selector: 'clr-vertical-nav-group-children',
1495
- template: `<ng-content></ng-content>`,
1496
- standalone: false,
1497
- }]
1498
- }] });
1499
-
1500
- /*
1501
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1502
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1503
- * This software is released under MIT license.
1504
- * The full license information can be found in LICENSE in the root directory of this project.
1505
- */
1506
- class VerticalNavGroupService {
1507
- constructor() {
1508
- this._expandChange = new Subject();
1509
- }
1510
- get expandChange() {
1511
- return this._expandChange.asObservable();
1512
- }
1513
- expand() {
1514
- this._expandChange.next(true);
1515
- }
1516
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: VerticalNavGroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
1517
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: VerticalNavGroupService }); }
1518
- }
1519
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: VerticalNavGroupService, decorators: [{
1520
- type: Injectable
1521
- }] });
1522
-
1523
- /*
1524
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1525
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1526
- * This software is released under MIT license.
1527
- * The full license information can be found in LICENSE in the root directory of this project.
1528
- */
1529
- class VerticalNavGroupRegistrationService {
1530
- constructor() {
1531
- this.navGroupCount = 0;
1532
- }
1533
- registerNavGroup() {
1534
- this.navGroupCount++;
1535
- }
1536
- unregisterNavGroup() {
1537
- this.navGroupCount--;
1538
- }
1539
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: VerticalNavGroupRegistrationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
1540
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: VerticalNavGroupRegistrationService }); }
1541
- }
1542
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: VerticalNavGroupRegistrationService, decorators: [{
1543
- type: Injectable
1544
- }] });
1545
-
1546
- /*
1547
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1548
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1549
- * This software is released under MIT license.
1550
- * The full license information can be found in LICENSE in the root directory of this project.
1551
- */
1552
- class VerticalNavService {
1553
- constructor() {
1554
- this._animateOnCollapsed = new Subject();
1555
- this._collapsedChanged = new Subject();
1556
- this._collapsed = false;
1557
- this._collapsible = false;
1558
- }
1559
- get animateOnCollapsed() {
1560
- return this._animateOnCollapsed.asObservable();
1561
- }
1562
- get collapsedChanged() {
1563
- return this._collapsedChanged.asObservable();
1564
- }
1565
- get collapsed() {
1566
- return this._collapsed;
1567
- }
1568
- set collapsed(value) {
1569
- value = !!value;
1570
- if (this.collapsible && this._collapsed !== value) {
1571
- this.updateCollapseBehavior(value);
1572
- }
1573
- }
1574
- get collapsible() {
1575
- return this._collapsible;
1576
- }
1577
- set collapsible(value) {
1578
- value = !!value;
1579
- if (this._collapsible !== value) {
1580
- if (!value && this.collapsed) {
1581
- this.updateCollapseBehavior(false);
1582
- }
1583
- this._collapsible = value;
1584
- }
1585
- }
1586
- updateCollapseBehavior(value) {
1587
- this._animateOnCollapsed.next(value);
1588
- this._collapsed = value;
1589
- this._collapsedChanged.next(value);
1590
- }
1591
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: VerticalNavService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
1592
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: VerticalNavService }); }
1593
- }
1594
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: VerticalNavService, decorators: [{
1595
- type: Injectable
1596
- }] });
1597
-
1598
- /*
1599
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1600
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1601
- * This software is released under MIT license.
1602
- * The full license information can be found in LICENSE in the root directory of this project.
1603
- */
1604
- const EXPANDED_STATE = 'expanded';
1605
- const COLLAPSED_STATE = 'collapsed';
1606
- class ClrVerticalNavGroup {
1607
- constructor(_itemExpand, _navGroupRegistrationService, navGroupService, _navService, commonStrings) {
1608
- this._itemExpand = _itemExpand;
1609
- this._navGroupRegistrationService = _navGroupRegistrationService;
1610
- this._navService = _navService;
1611
- this.commonStrings = commonStrings;
1612
- this.expandedChange = new EventEmitter(true);
1613
- this.wasExpanded = false;
1614
- this._subscriptions = [];
1615
- this._expandAnimationState = COLLAPSED_STATE;
1616
- _navGroupRegistrationService.registerNavGroup();
1617
- // FIXME: This subscription handles a corner case
1618
- // Vertical Nav collapse requires the animation to run first and then
1619
- // remove the nodes from the DOM. If the user directly sets the input
1620
- // on the clrIfExpanded directive, we have no chance to run the animation
1621
- // and wait for it to complete. This subscription makes sure that the
1622
- // animation states are correct for that edge case.
1623
- this._subscriptions.push(_itemExpand.expandChange.subscribe(value => {
1624
- if (value && this.expandAnimationState === COLLAPSED_STATE) {
1625
- if (_navService.collapsed) {
1626
- _navService.collapsed = false;
1627
- }
1628
- this.expandAnimationState = EXPANDED_STATE;
1629
- }
1630
- else if (!value && this.expandAnimationState === EXPANDED_STATE) {
1631
- this.expandAnimationState = COLLAPSED_STATE;
1632
- }
1633
- }));
1634
- // 1. If the nav is collapsing, close the open nav group + save its state
1635
- // 2. If the nav is expanding, expand the nav group if the previous state was expanded
1636
- this._subscriptions.push(_navService.animateOnCollapsed.subscribe((goingToCollapse) => {
1637
- if (goingToCollapse && this.expanded) {
1638
- this.wasExpanded = true;
1639
- this.expandAnimationState = COLLAPSED_STATE;
1640
- }
1641
- else if (!goingToCollapse && this.wasExpanded) {
1642
- this.expandGroup();
1643
- this.wasExpanded = false;
1644
- }
1645
- }));
1646
- // If a link is clicked, expand the nav group
1647
- this._subscriptions.push(navGroupService.expandChange.subscribe((expand) => {
1648
- if (expand && !this.expanded) {
1649
- this.expandGroup();
1650
- }
1651
- }));
1652
- }
1653
- get expanded() {
1654
- return this._itemExpand.expanded;
1655
- }
1656
- set expanded(value) {
1657
- if (this._itemExpand.expanded !== value) {
1658
- this._itemExpand.expanded = value;
1659
- this.expandedChange.emit(value);
1660
- }
1661
- }
1662
- set userExpandedInput(value) {
1663
- value = !!value;
1664
- if (this.expanded !== value) {
1665
- // We have to call toggleExpand because some cases require animations to occur first
1666
- // Directly setting the Expand service value skips the animation and can result in
1667
- // nodes in the DOM but the nav group still being collapsed
1668
- this.toggleExpand();
1669
- }
1670
- }
1671
- get expandAnimationState() {
1672
- return this._expandAnimationState;
1673
- }
1674
- set expandAnimationState(value) {
1675
- if (value !== this._expandAnimationState) {
1676
- this._expandAnimationState = value;
1677
- }
1678
- }
1679
- ngAfterContentInit() {
1680
- // This makes sure that if someone marks a nav group expanded in a collapsed nav
1681
- // the expanded property is switched back to collapsed state.
1682
- if (this._navService.collapsed && this.expanded) {
1683
- this.wasExpanded = true;
1684
- this.expandAnimationState = COLLAPSED_STATE;
1685
- }
1686
- }
1687
- ngOnDestroy() {
1688
- this._subscriptions.forEach((sub) => sub.unsubscribe());
1689
- this._navGroupRegistrationService.unregisterNavGroup();
1690
- }
1691
- expandGroup() {
1692
- this.expanded = true;
1693
- // Expanded animation occurs after Expand.expand is set to true
1694
- this.expandAnimationState = EXPANDED_STATE;
1695
- }
1696
- collapseGroup() {
1697
- // If a Vertical Nav Group toggle button is clicked while the Vertical Nav is in Collapsed state,
1698
- // the Vertical Nav should be expanded first.
1699
- this.expandAnimationState = COLLAPSED_STATE;
1700
- }
1701
- // closes a group after the collapse animation
1702
- expandAnimationDone($event) {
1703
- if ($event.toState === COLLAPSED_STATE) {
1704
- this.expanded = false;
1705
- }
1706
- }
1707
- toggleExpand() {
1708
- if (this.expanded) {
1709
- this.collapseGroup();
1710
- }
1711
- else {
1712
- // If nav is collasped, first open the nav
1713
- if (this._navService.collapsed) {
1714
- this._navService.collapsed = false;
1715
- }
1716
- // then expand the nav group
1717
- this.expandGroup();
1718
- }
1719
- }
1720
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrVerticalNavGroup, deps: [{ token: i1$1.IfExpandService }, { token: VerticalNavGroupRegistrationService }, { token: VerticalNavGroupService }, { token: VerticalNavService }, { token: i1$1.ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
1721
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrVerticalNavGroup, isStandalone: false, selector: "clr-vertical-nav-group", inputs: { userExpandedInput: ["clrVerticalNavGroupExpanded", "userExpandedInput"] }, outputs: { expandedChange: "clrVerticalNavGroupExpandedChange" }, host: { properties: { "class.is-expanded": "this.expanded" }, classAttribute: "nav-group" }, providers: [IfExpandService, VerticalNavGroupService], ngImport: i0, template: "<!--\n ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n<div class=\"nav-group-content\">\n <ng-content select=\"[clrVerticalNavLink]\"></ng-content>\n <button class=\"nav-group-trigger\" type=\"button\" [attr.aria-expanded]=\"expanded\" (click)=\"toggleExpand()\">\n <ng-content select=\"[clrVerticalNavIcon]\"></ng-content>\n <div class=\"nav-group-text\">\n <ng-content></ng-content>\n </div>\n <cds-icon shape=\"angle\" class=\"nav-group-trigger-icon\" [direction]=\"expanded ? 'down' : 'right'\"></cds-icon>\n </button>\n</div>\n<!--TODO: This animation needs to be added to the clr-vertical-nav-group-children component-->\n<div class=\"nav-group-children\" [@clrExpand]=\"expandAnimationState\" (@clrExpand.done)=\"expandAnimationDone($event)\">\n <ng-content select=\"[clrIfExpanded], clr-vertical-nav-group-children\"></ng-content>\n</div>\n", dependencies: [{ kind: "component", type: i5.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }], animations: [
1722
- trigger('clrExpand', [
1723
- state(EXPANDED_STATE, style({ height: '*' })),
1724
- state(COLLAPSED_STATE, style({ height: 0, visibility: 'hidden' })),
1725
- transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, animate('0.2s ease-in-out')),
1726
- ]),
1727
- ] }); }
1728
- }
1729
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrVerticalNavGroup, decorators: [{
1730
- type: Component,
1731
- args: [{ selector: 'clr-vertical-nav-group', providers: [IfExpandService, VerticalNavGroupService], animations: [
1732
- trigger('clrExpand', [
1733
- state(EXPANDED_STATE, style({ height: '*' })),
1734
- state(COLLAPSED_STATE, style({ height: 0, visibility: 'hidden' })),
1735
- transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, animate('0.2s ease-in-out')),
1736
- ]),
1737
- ], host: { class: 'nav-group' }, standalone: false, template: "<!--\n ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n<div class=\"nav-group-content\">\n <ng-content select=\"[clrVerticalNavLink]\"></ng-content>\n <button class=\"nav-group-trigger\" type=\"button\" [attr.aria-expanded]=\"expanded\" (click)=\"toggleExpand()\">\n <ng-content select=\"[clrVerticalNavIcon]\"></ng-content>\n <div class=\"nav-group-text\">\n <ng-content></ng-content>\n </div>\n <cds-icon shape=\"angle\" class=\"nav-group-trigger-icon\" [direction]=\"expanded ? 'down' : 'right'\"></cds-icon>\n </button>\n</div>\n<!--TODO: This animation needs to be added to the clr-vertical-nav-group-children component-->\n<div class=\"nav-group-children\" [@clrExpand]=\"expandAnimationState\" (@clrExpand.done)=\"expandAnimationDone($event)\">\n <ng-content select=\"[clrIfExpanded], clr-vertical-nav-group-children\"></ng-content>\n</div>\n" }]
1738
- }], ctorParameters: () => [{ type: i1$1.IfExpandService }, { type: VerticalNavGroupRegistrationService }, { type: VerticalNavGroupService }, { type: VerticalNavService }, { type: i1$1.ClrCommonStringsService }], propDecorators: { expandedChange: [{
1739
- type: Output,
1740
- args: ['clrVerticalNavGroupExpandedChange']
1741
- }], expanded: [{
1742
- type: HostBinding,
1743
- args: ['class.is-expanded']
1744
- }], userExpandedInput: [{
1745
- type: Input,
1746
- args: ['clrVerticalNavGroupExpanded']
1747
- }] } });
1748
-
1749
- /*
1750
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1751
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1752
- * This software is released under MIT license.
1753
- * The full license information can be found in LICENSE in the root directory of this project.
1754
- */
1755
- class VerticalNavIconService {
1756
- constructor() {
1757
- this._icons = 0;
1758
- }
1759
- get hasIcons() {
1760
- return this._icons > 0;
1761
- }
1762
- registerIcon() {
1763
- this._icons++;
1764
- }
1765
- unregisterIcon() {
1766
- this._icons--;
1767
- }
1768
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: VerticalNavIconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
1769
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: VerticalNavIconService }); }
1770
- }
1771
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: VerticalNavIconService, decorators: [{
1772
- type: Injectable
1773
- }] });
1774
-
1775
- /*
1776
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1777
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1778
- * This software is released under MIT license.
1779
- * The full license information can be found in LICENSE in the root directory of this project.
1780
- */
1781
- class ClrVerticalNav {
1782
- constructor(_navService, _navIconService, _navGroupRegistrationService, commonStrings) {
1783
- this._navService = _navService;
1784
- this._navIconService = _navIconService;
1785
- this._navGroupRegistrationService = _navGroupRegistrationService;
1786
- this.commonStrings = commonStrings;
1787
- this.contentId = uniqueIdFactory();
1788
- this._collapsedChanged = new EventEmitter(true);
1789
- this._sub = _navService.collapsedChanged.subscribe(value => {
1790
- this._collapsedChanged.emit(value);
1791
- });
1792
- }
1793
- get collapsible() {
1794
- return this._navService.collapsible;
1795
- }
1796
- set collapsible(value) {
1797
- this._navService.collapsible = value;
1798
- }
1799
- get collapsed() {
1800
- return this._navService.collapsed;
1801
- }
1802
- set collapsed(value) {
1803
- this._navService.collapsed = value;
1804
- }
1805
- get hasNavGroups() {
1806
- return this._navGroupRegistrationService.navGroupCount > 0;
1807
- }
1808
- get hasIcons() {
1809
- return this._navIconService.hasIcons;
1810
- }
1811
- get ariaExpanded() {
1812
- if (!this.collapsible) {
1813
- return null;
1814
- }
1815
- return !this.collapsed ? 'true' : 'false';
1816
- }
1817
- ngOnDestroy() {
1818
- this._sub.unsubscribe();
1819
- }
1820
- toggleByButton() {
1821
- this.collapsed = !this.collapsed;
1822
- }
1823
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrVerticalNav, deps: [{ token: VerticalNavService }, { token: VerticalNavIconService }, { token: VerticalNavGroupRegistrationService }, { token: i1$1.ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
1824
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrVerticalNav, isStandalone: false, selector: "clr-vertical-nav", inputs: { toggleLabel: ["clrVerticalNavToggleLabel", "toggleLabel"], collapsible: ["clrVerticalNavCollapsible", "collapsible"], collapsed: ["clrVerticalNavCollapsed", "collapsed"] }, outputs: { _collapsedChanged: "clrVerticalNavCollapsedChange" }, host: { properties: { "class.is-collapsed": "collapsed", "class.has-nav-groups": "hasNavGroups", "class.has-icons": "hasIcons" }, classAttribute: "clr-vertical-nav" }, providers: [VerticalNavService, VerticalNavIconService, VerticalNavGroupRegistrationService], ngImport: i0, template: "<!--\n ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n@if (collapsible) {\n<button\n type=\"button\"\n class=\"nav-trigger\"\n [class.on-collapse]=\"collapsed\"\n [attr.aria-controls]=\"contentId\"\n [attr.aria-expanded]=\"ariaExpanded\"\n [attr.aria-label]=\"toggleLabel || commonStrings.keys.verticalNavToggle\"\n (click)=\"toggleByButton()\"\n>\n <cds-icon shape=\"angle-double\" class=\"nav-trigger-icon\" [direction]=\"(collapsed) ? 'right' : 'left'\"></cds-icon>\n</button>\n}\n<div [id]=\"contentId\" class=\"nav-content\">\n <ng-content></ng-content>\n @if (collapsible && collapsed) {\n <button\n type=\"button\"\n (click)=\"collapsed = false\"\n class=\"nav-btn\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n [attr.aria-controls]=\"contentId\"\n [attr.aria-label]=\"toggleLabel || commonStrings.keys.verticalNavToggle\"\n ></button>\n }\n</div>\n", dependencies: [{ kind: "component", type: i5.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }] }); }
1825
- }
1826
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrVerticalNav, decorators: [{
1827
- type: Component,
1828
- args: [{ selector: 'clr-vertical-nav', providers: [VerticalNavService, VerticalNavIconService, VerticalNavGroupRegistrationService], host: {
1829
- class: 'clr-vertical-nav',
1830
- '[class.is-collapsed]': 'collapsed',
1831
- '[class.has-nav-groups]': 'hasNavGroups',
1832
- '[class.has-icons]': 'hasIcons',
1833
- }, standalone: false, template: "<!--\n ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n@if (collapsible) {\n<button\n type=\"button\"\n class=\"nav-trigger\"\n [class.on-collapse]=\"collapsed\"\n [attr.aria-controls]=\"contentId\"\n [attr.aria-expanded]=\"ariaExpanded\"\n [attr.aria-label]=\"toggleLabel || commonStrings.keys.verticalNavToggle\"\n (click)=\"toggleByButton()\"\n>\n <cds-icon shape=\"angle-double\" class=\"nav-trigger-icon\" [direction]=\"(collapsed) ? 'right' : 'left'\"></cds-icon>\n</button>\n}\n<div [id]=\"contentId\" class=\"nav-content\">\n <ng-content></ng-content>\n @if (collapsible && collapsed) {\n <button\n type=\"button\"\n (click)=\"collapsed = false\"\n class=\"nav-btn\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n [attr.aria-controls]=\"contentId\"\n [attr.aria-label]=\"toggleLabel || commonStrings.keys.verticalNavToggle\"\n ></button>\n }\n</div>\n" }]
1834
- }], ctorParameters: () => [{ type: VerticalNavService }, { type: VerticalNavIconService }, { type: VerticalNavGroupRegistrationService }, { type: i1$1.ClrCommonStringsService }], propDecorators: { toggleLabel: [{
1835
- type: Input,
1836
- args: ['clrVerticalNavToggleLabel']
1837
- }], _collapsedChanged: [{
1838
- type: Output,
1839
- args: ['clrVerticalNavCollapsedChange']
1840
- }], collapsible: [{
1841
- type: Input,
1842
- args: ['clrVerticalNavCollapsible']
1843
- }], collapsed: [{
1844
- type: Input,
1845
- args: ['clrVerticalNavCollapsed']
1846
- }] } });
1847
-
1848
- /*
1849
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1850
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1851
- * This software is released under MIT license.
1852
- * The full license information can be found in LICENSE in the root directory of this project.
1853
- */
1854
- class ClrVerticalNavLink {
1855
- constructor(host, ref, navGroupService) {
1856
- this.destroy$ = new Subject();
1857
- // Note: since the `VerticalNavGroupService` is an optional provider, we'll setup the event
1858
- // listener only when the `[clrVerticalLink]` is located within the `clr-vertical-nav-group`.
1859
- navGroupService &&
1860
- fromEvent(host.nativeElement, 'click')
1861
- .pipe(takeUntil(this.destroy$))
1862
- .subscribe(() => {
1863
- navGroupService.expand();
1864
- ref.markForCheck();
1865
- });
1866
- }
1867
- ngOnDestroy() {
1868
- this.destroy$.next();
1869
- }
1870
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrVerticalNavLink, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: VerticalNavGroupService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
1871
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrVerticalNavLink, isStandalone: false, selector: "[clrVerticalNavLink]", host: { classAttribute: "nav-link" }, ngImport: i0, template: `
1872
- <ng-content select="[clrVerticalNavIcon]"></ng-content>
1873
- <span class="nav-text">
1874
- <ng-content></ng-content>
1875
- </span>
1876
- `, isInline: true }); }
1877
- }
1878
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrVerticalNavLink, decorators: [{
1879
- type: Component,
1880
- args: [{
1881
- selector: '[clrVerticalNavLink]',
1882
- template: `
1883
- <ng-content select="[clrVerticalNavIcon]"></ng-content>
1884
- <span class="nav-text">
1885
- <ng-content></ng-content>
1886
- </span>
1887
- `,
1888
- host: {
1889
- class: 'nav-link',
1890
- },
1891
- standalone: false,
1892
- }]
1893
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: VerticalNavGroupService, decorators: [{
1894
- type: Optional
1895
- }, {
1896
- type: Inject,
1897
- args: [VerticalNavGroupService]
1898
- }] }] });
1899
-
1900
- /*
1901
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1902
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1903
- * This software is released under MIT license.
1904
- * The full license information can be found in LICENSE in the root directory of this project.
1905
- */
1906
- class ClrVerticalNavIcon {
1907
- constructor(_verticalNavIconService) {
1908
- this._verticalNavIconService = _verticalNavIconService;
1909
- _verticalNavIconService.registerIcon();
1910
- }
1911
- ngOnDestroy() {
1912
- this._verticalNavIconService.unregisterIcon();
1913
- }
1914
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrVerticalNavIcon, deps: [{ token: VerticalNavIconService }], target: i0.ɵɵFactoryTarget.Directive }); }
1915
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrVerticalNavIcon, isStandalone: false, selector: "[clrVerticalNavIcon]", host: { classAttribute: "nav-icon" }, ngImport: i0 }); }
1916
- }
1917
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrVerticalNavIcon, decorators: [{
1918
- type: Directive,
1919
- args: [{
1920
- selector: '[clrVerticalNavIcon]',
1921
- host: { class: 'nav-icon' },
1922
- standalone: false,
1923
- }]
1924
- }], ctorParameters: () => [{ type: VerticalNavIconService }] });
1925
-
1926
- /*
1927
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1928
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1929
- * This software is released under MIT license.
1930
- * The full license information can be found in LICENSE in the root directory of this project.
1931
- */
1932
- const CLR_VERTICAL_NAV_DIRECTIVES = [
1933
- ClrVerticalNav,
1934
- ClrVerticalNavLink,
1935
- ClrVerticalNavGroup,
1936
- ClrVerticalNavGroupChildren,
1937
- ClrVerticalNavIcon,
1938
- ];
1939
- class ClrVerticalNavModule {
1940
- constructor() {
1941
- ClarityIcons.addIcons(angleIcon, angleDoubleIcon);
1942
- }
1943
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrVerticalNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1944
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: ClrVerticalNavModule, declarations: [ClrVerticalNav,
1945
- ClrVerticalNavLink,
1946
- ClrVerticalNavGroup,
1947
- ClrVerticalNavGroupChildren,
1948
- ClrVerticalNavIcon], imports: [CommonModule, ClrIcon, ClrConditionalModule, ClrFocusOnViewInitModule], exports: [ClrVerticalNav,
1949
- ClrVerticalNavLink,
1950
- ClrVerticalNavGroup,
1951
- ClrVerticalNavGroupChildren,
1952
- ClrVerticalNavIcon, ClrConditionalModule, ClrIcon, ClrFocusOnViewInitModule] }); }
1953
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrVerticalNavModule, imports: [CommonModule, ClrIcon, ClrConditionalModule, ClrFocusOnViewInitModule, ClrConditionalModule, ClrFocusOnViewInitModule] }); }
1954
- }
1955
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrVerticalNavModule, decorators: [{
1956
- type: NgModule,
1957
- args: [{
1958
- imports: [CommonModule, ClrIcon, ClrConditionalModule, ClrFocusOnViewInitModule],
1959
- declarations: [CLR_VERTICAL_NAV_DIRECTIVES],
1960
- exports: [CLR_VERTICAL_NAV_DIRECTIVES, ClrConditionalModule, ClrIcon, ClrFocusOnViewInitModule],
1961
- }]
1962
- }], ctorParameters: () => [] });
1963
-
1964
- /*
1965
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1966
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1967
- * This software is released under MIT license.
1968
- * The full license information can be found in LICENSE in the root directory of this project.
1969
- */
1970
-
1971
- /*
1972
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1973
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1974
- * This software is released under MIT license.
1975
- * The full license information can be found in LICENSE in the root directory of this project.
1976
- */
1977
- const MAX_DISPLAY_ITEMS = 3;
1978
-
1979
- /*
1980
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1981
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1982
- * This software is released under MIT license.
1983
- * The full license information can be found in LICENSE in the root directory of this project.
1984
- */
1985
- class ClrBreadcrumbItem {
1986
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrBreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1987
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrBreadcrumbItem, isStandalone: false, selector: "clr-breadcrumb-item", host: { properties: { "attr.role": "\"list-item\"" }, classAttribute: "clr-breadcrumb-item" }, ngImport: i0, template: '<ng-content />', isInline: true }); }
1988
- }
1989
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrBreadcrumbItem, decorators: [{
1990
- type: Component,
1991
- args: [{
1992
- selector: 'clr-breadcrumb-item',
1993
- template: '<ng-content />',
1994
- host: {
1995
- class: 'clr-breadcrumb-item',
1996
- '[attr.role]': '"list-item"',
1997
- },
1998
- standalone: false,
1999
- }]
2000
- }] });
2001
-
2002
- /*
2003
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
2004
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
2005
- * This software is released under MIT license.
2006
- * The full license information can be found in LICENSE in the root directory of this project.
2007
- */
2008
- class ClrBreadcrumbs {
2009
- constructor(commonStrings) {
2010
- this.commonStrings = commonStrings;
2011
- this.isExpanded = false;
2012
- this.items = [];
2013
- this.clrBreadcrumbItemClick = new EventEmitter();
2014
- this.limit = MAX_DISPLAY_ITEMS;
2015
- this.max = MAX_DISPLAY_ITEMS;
2016
- }
2017
- expand() {
2018
- this.isExpanded = true;
2019
- this.limit = this.items?.length;
2020
- }
2021
- handleItemClick(breadcrumb) {
2022
- this.clrBreadcrumbItemClick.emit(breadcrumb);
2023
- }
2024
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrBreadcrumbs, deps: [{ token: i1$1.ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
2025
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrBreadcrumbs, isStandalone: false, selector: "clr-breadcrumbs", inputs: { items: "items" }, outputs: { clrBreadcrumbItemClick: "clrBreadcrumbItemClick" }, host: { properties: { "attr.aria-label": "commonStrings.keys.breadcrumbsLabel", "attr.role": "\"navigation\"" }, classAttribute: "clr-breadcrumb" }, ngImport: i0, template: "<!--\n ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n@if (items?.length) {\n<div role=\"list\" class=\"clr-breadcrumb-menu\">\n @if (items.length > max && !isExpanded) {\n <clr-breadcrumb-item>\n <button\n [attr.aria-label]=\"commonStrings.keys.expandBreadcrumbsLabel\"\n class=\"btn btn-link btn-sm clr-breadcrumb-expand\"\n (click)=\"expand()\"\n (keydown)=\"expand()\"\n >\n <cds-icon shape=\"ellipsis-horizontal\"></cds-icon>\n </button>\n </clr-breadcrumb-item>\n } @for (breadcrumb of items | slice: -limit : items.length; track breadcrumb; let isLastItem = $last) {\n <clr-breadcrumb-item>\n @if (isLastItem) {\n <span aria-current=\"page\">{{ breadcrumb.label }}</span>\n } @else { @if (breadcrumb.routerLink) {\n <a\n [routerLink]=\"breadcrumb.routerLink\"\n [queryParams]=\"breadcrumb.queryParams\"\n [target]=\"breadcrumb.target || '_self'\"\n (click)=\"handleItemClick(breadcrumb)\"\n >\n {{ breadcrumb.label }}\n </a>\n } @if (breadcrumb.href) {\n <a [href]=\"breadcrumb.href\" [target]=\"breadcrumb.target || '_self'\" (click)=\"handleItemClick(breadcrumb)\">\n {{ breadcrumb.label }}\n </a>\n } }\n </clr-breadcrumb-item>\n }\n</div>\n}\n", styles: [":where(:root,:host),:where(:root,:host) [clr-density]{--clr-breadcrumb-item-space: var(--clr-base-gap-s)}.clr-breadcrumb-menu{display:flex;flex-wrap:wrap;align-items:center}.clr-breadcrumb-menu .clr-breadcrumb-item{display:flex;align-items:center;height:var(--clr-base-row-height-s);color:var(--cds-alias-typography-color-400);font-size:var(--clr-base-typography-font-size-inline);font-weight:var(--cds-alias-typography-secondary-font-weight);line-height:var(--clr-base-typography-line-height-16);letter-spacing:calc(-.1 * 1rem / var(--cds-global-base))}.clr-breadcrumb-menu .clr-breadcrumb-item a{text-decoration:none;text-align:center}.clr-breadcrumb-menu .clr-breadcrumb-item a:visited{color:var(--clr-link-color)}.clr-breadcrumb-menu .clr-breadcrumb-item a:visited:hover{color:var(--clr-link-hover-color)}.clr-breadcrumb-menu .clr-breadcrumb-item a:visited:active{color:var(--clr-link-active-color)}.clr-breadcrumb-menu .clr-breadcrumb-item:not(:last-child):after{content:\"/\";margin:0 var(--clr-breadcrumb-item-space)}.clr-breadcrumb-menu .clr-breadcrumb-expand{height:var(--clr-base-icon-size-l);width:var(--clr-base-icon-size-l);min-height:var(--clr-base-icon-size-l);min-width:var(--clr-base-icon-size-l);margin:0;padding:0;gap:0}\n"], dependencies: [{ kind: "component", type: i5.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ClrBreadcrumbItem, selector: "clr-breadcrumb-item" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }] }); }
2026
- }
2027
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrBreadcrumbs, decorators: [{
2028
- type: Component,
2029
- args: [{ selector: 'clr-breadcrumbs', host: {
2030
- class: 'clr-breadcrumb',
2031
- '[attr.aria-label]': 'commonStrings.keys.breadcrumbsLabel',
2032
- '[attr.role]': '"navigation"',
2033
- }, standalone: false, template: "<!--\n ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n@if (items?.length) {\n<div role=\"list\" class=\"clr-breadcrumb-menu\">\n @if (items.length > max && !isExpanded) {\n <clr-breadcrumb-item>\n <button\n [attr.aria-label]=\"commonStrings.keys.expandBreadcrumbsLabel\"\n class=\"btn btn-link btn-sm clr-breadcrumb-expand\"\n (click)=\"expand()\"\n (keydown)=\"expand()\"\n >\n <cds-icon shape=\"ellipsis-horizontal\"></cds-icon>\n </button>\n </clr-breadcrumb-item>\n } @for (breadcrumb of items | slice: -limit : items.length; track breadcrumb; let isLastItem = $last) {\n <clr-breadcrumb-item>\n @if (isLastItem) {\n <span aria-current=\"page\">{{ breadcrumb.label }}</span>\n } @else { @if (breadcrumb.routerLink) {\n <a\n [routerLink]=\"breadcrumb.routerLink\"\n [queryParams]=\"breadcrumb.queryParams\"\n [target]=\"breadcrumb.target || '_self'\"\n (click)=\"handleItemClick(breadcrumb)\"\n >\n {{ breadcrumb.label }}\n </a>\n } @if (breadcrumb.href) {\n <a [href]=\"breadcrumb.href\" [target]=\"breadcrumb.target || '_self'\" (click)=\"handleItemClick(breadcrumb)\">\n {{ breadcrumb.label }}\n </a>\n } }\n </clr-breadcrumb-item>\n }\n</div>\n}\n", styles: [":where(:root,:host),:where(:root,:host) [clr-density]{--clr-breadcrumb-item-space: var(--clr-base-gap-s)}.clr-breadcrumb-menu{display:flex;flex-wrap:wrap;align-items:center}.clr-breadcrumb-menu .clr-breadcrumb-item{display:flex;align-items:center;height:var(--clr-base-row-height-s);color:var(--cds-alias-typography-color-400);font-size:var(--clr-base-typography-font-size-inline);font-weight:var(--cds-alias-typography-secondary-font-weight);line-height:var(--clr-base-typography-line-height-16);letter-spacing:calc(-.1 * 1rem / var(--cds-global-base))}.clr-breadcrumb-menu .clr-breadcrumb-item a{text-decoration:none;text-align:center}.clr-breadcrumb-menu .clr-breadcrumb-item a:visited{color:var(--clr-link-color)}.clr-breadcrumb-menu .clr-breadcrumb-item a:visited:hover{color:var(--clr-link-hover-color)}.clr-breadcrumb-menu .clr-breadcrumb-item a:visited:active{color:var(--clr-link-active-color)}.clr-breadcrumb-menu .clr-breadcrumb-item:not(:last-child):after{content:\"/\";margin:0 var(--clr-breadcrumb-item-space)}.clr-breadcrumb-menu .clr-breadcrumb-expand{height:var(--clr-base-icon-size-l);width:var(--clr-base-icon-size-l);min-height:var(--clr-base-icon-size-l);min-width:var(--clr-base-icon-size-l);margin:0;padding:0;gap:0}\n"] }]
2034
- }], ctorParameters: () => [{ type: i1$1.ClrCommonStringsService }], propDecorators: { items: [{
2035
- type: Input
2036
- }], clrBreadcrumbItemClick: [{
2037
- type: Output
2038
- }] } });
2039
-
2040
- /*
2041
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
2042
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
2043
- * This software is released under MIT license.
2044
- * The full license information can be found in LICENSE in the root directory of this project.
2045
- */
2046
- class ClrBreadcrumbsModule {
2047
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
2048
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: ClrBreadcrumbsModule, declarations: [ClrBreadcrumbs, ClrBreadcrumbItem], imports: [CommonModule, ClrIcon, ClrHostWrappingModule, RouterModule], exports: [ClrBreadcrumbs, ClrIcon] }); }
2049
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrBreadcrumbsModule, imports: [CommonModule, ClrIcon, ClrHostWrappingModule, RouterModule] }); }
2050
- }
2051
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrBreadcrumbsModule, decorators: [{
2052
- type: NgModule,
2053
- args: [{
2054
- declarations: [ClrBreadcrumbs, ClrBreadcrumbItem],
2055
- exports: [ClrBreadcrumbs, ClrIcon],
2056
- imports: [CommonModule, ClrIcon, ClrHostWrappingModule, RouterModule],
2057
- }]
2058
- }] });
2059
-
2060
- /*
2061
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
2062
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
2063
- * This software is released under MIT license.
2064
- * The full license information can be found in LICENSE in the root directory of this project.
2065
- */
2066
-
2067
- /*
2068
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
2069
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
2070
- * This software is released under MIT license.
2071
- * The full license information can be found in LICENSE in the root directory of this project.
2072
- */
2073
-
2074
32
  /*
2075
33
  * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
2076
34
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -2082,5 +40,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
2082
40
  * Generated bundle index. Do not edit.
2083
41
  */
2084
42
 
2085
- export { CLR_LAYOUT_DIRECTIVES, CLR_NAVIGATION_DIRECTIVES, CLR_TABS_DIRECTIVES, CLR_VERTICAL_NAV_DIRECTIVES, ClrAriaCurrentLink, ClrBreadcrumbItem, ClrBreadcrumbs, ClrBreadcrumbsModule, ClrHeader, ClrLayoutModule, ClrMainContainer, ClrMainContainerModule, ClrNavLevel, ClrNavigationModule, ClrTab, ClrTabAction, ClrTabContent, ClrTabLink, ClrTabOverflowContent, ClrTabs, ClrTabsActions, ClrTabsModule, ClrVerticalNav, ClrVerticalNavGroup, ClrVerticalNavGroupChildren, ClrVerticalNavIcon, ClrVerticalNavLink, ClrVerticalNavModule, MainContainerWillyWonka, NavDetectionOompaLoompa, ResponsiveNavCodes, ResponsiveNavControlMessage, ResponsiveNavigationService, ActiveOompaLoompa as ÇlrActiveOompaLoompa, TabsWillyWonka as ÇlrTabsWillyWonka };
43
+ export { ClrLayoutModule };
2086
44
  //# sourceMappingURL=clr-angular-layout.mjs.map