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

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 +45 -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,1503 +1,12 @@
1
+ import { ClrDropdownModule } from '@clr/angular/popover/dropdown';
2
+ export * from '@clr/angular/popover/dropdown';
3
+ export * from '@clr/angular/popover/common';
1
4
  import * as i0 from '@angular/core';
2
- import { PLATFORM_ID, SkipSelf, Optional, Inject, Injectable, Input, Component, HostBinding, ContentChildren, HostListener, Directive, NgModule, ElementRef, InjectionToken, EventEmitter, Output, DOCUMENT, ContentChild, ViewChild } from '@angular/core';
3
- import * as i2 from '@clr/angular/popover/common';
4
- import { ClrPopoverHostDirective as ClrPopoverHostDirective$1, ClrPopoverType as ClrPopoverType$1, ClrPopoverPosition as ClrPopoverPosition$1, DROPDOWN_POSITIONS as DROPDOWN_POSITIONS$1, POPOVER_HOST_ANCHOR as POPOVER_HOST_ANCHOR$1, ClrPopoverContent as ClrPopoverContent$1, ClrIfOpen as ClrIfOpen$1, SIGNPOST_POSITIONS as SIGNPOST_POSITIONS$1, ÇlrClrPopoverModuleNext as _lrClrPopoverModuleNext, TOOLTIP_POSITIONS as TOOLTIP_POSITIONS$1 } from '@clr/angular/popover/common';
5
- import * as i1 from '@clr/angular/utils';
6
- import { uniqueIdFactory, ArrowKeyDirection, Linkers, wrapObservable, customFocusableItemProvider, FOCUS_SERVICE_PROVIDER, FocusableItem, BASIC_FOCUSABLE_ITEM_PROVIDER, preventArrowKeyScroll, ClrPosition, normalizeKey, Keys, ClrFocusOnViewInitModule } from '@clr/angular/utils';
7
- import { isPlatformBrowser, CommonModule } from '@angular/common';
8
- import { ReplaySubject, of, Subject, merge, fromEvent } from 'rxjs';
9
- import { map, filter } from 'rxjs/operators';
10
- import * as i3 from '@clr/angular/icon';
11
- import { ClrIcon, ClarityIcons, windowCloseIcon, infoCircleIcon } from '@clr/angular/icon';
12
- import { hasModifierKey } from '@angular/cdk/keycodes';
13
- import * as i1$1 from '@angular/cdk/overlay';
14
- import { OverlayConfig } from '@angular/cdk/overlay';
15
- import { DomPortal } from '@angular/cdk/portal';
16
- import { ClrDropdownModule as ClrDropdownModule$1 } from '@clr/angular/popover/dropdown';
17
- import { ClrSignpostModule as ClrSignpostModule$1 } from '@clr/angular/popover/signpost';
18
- import { ClrTooltipModule as ClrTooltipModule$1 } from '@clr/angular/popover/tooltip';
19
-
20
- /*
21
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
22
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
23
- * This software is released under MIT license.
24
- * The full license information can be found in LICENSE in the root directory of this project.
25
- */
26
- class DropdownFocusHandler {
27
- constructor(renderer, parent, popoverService, focusService, platformId) {
28
- this.renderer = renderer;
29
- this.parent = parent;
30
- this.popoverService = popoverService;
31
- this.focusService = focusService;
32
- this.platformId = platformId;
33
- this.id = uniqueIdFactory();
34
- this._unlistenFuncs = [];
35
- this.resetChildren();
36
- this.moveToFirstItemWhenOpen();
37
- }
38
- get trigger() {
39
- return this._trigger;
40
- }
41
- set trigger(el) {
42
- this._trigger = el;
43
- if (this.parent) {
44
- this._unlistenFuncs.push(this.renderer.listen(el, 'keydown.arrowright', event => this.popoverService.toggleWithEvent(event)));
45
- }
46
- else {
47
- this._unlistenFuncs.push(this.renderer.listen(el, 'keydown.arrowup', event => this.popoverService.toggleWithEvent(event)));
48
- this._unlistenFuncs.push(this.renderer.listen(el, 'keydown.arrowdown', event => this.popoverService.toggleWithEvent(event)));
49
- }
50
- }
51
- get container() {
52
- return this._container;
53
- }
54
- set container(el) {
55
- this._container = el;
56
- // whether root container or not, tab key should always toggle (i.e. close) the container
57
- this._unlistenFuncs.push(this.renderer.listen(el, 'keydown.tab', event => this.popoverService.toggleWithEvent(event)), this.renderer.listen(el, 'keydown.shift.tab', event => this.popoverService.toggleWithEvent(event)));
58
- // All containers are registered to the focus service.
59
- this.focusService.registerContainer(el);
60
- if (this.parent) {
61
- // if it's a nested container, pressing escape has the same effect as pressing left key, which closes the current
62
- // popup and moves up to its parent. Here, we stop propagation so that the parent container
63
- // doesn't receive the escape keydown
64
- this._unlistenFuncs.push(this.renderer.listen(el, 'keydown.escape', event => {
65
- this.focusService.move(ArrowKeyDirection.LEFT);
66
- event.stopPropagation();
67
- }));
68
- }
69
- }
70
- ngOnDestroy() {
71
- this._unlistenFuncs.forEach((unlisten) => unlisten());
72
- this.focusService.detachListeners(this.container);
73
- }
74
- /**
75
- * If the dropdown was opened by clicking on the trigger, we automatically move to the first item
76
- */
77
- moveToFirstItemWhenOpen() {
78
- const subscription = this.popoverService.openChange.subscribe(open => {
79
- if (open && this.popoverService.openEvent) {
80
- // Even if we properly waited for ngAfterViewInit, the container still wouldn't be attached to the DOM.
81
- // So setTimeout is the only way to wait for the container to be ready to move focus to first item.
82
- setTimeout(() => {
83
- this.focusService.moveTo(this);
84
- if (this.parent) {
85
- this.focusService.move(ArrowKeyDirection.RIGHT);
86
- }
87
- else {
88
- this.focusService.move(ArrowKeyDirection.DOWN);
89
- }
90
- });
91
- }
92
- });
93
- this._unlistenFuncs.push(() => subscription.unsubscribe());
94
- }
95
- focus() {
96
- if (this.trigger && isPlatformBrowser(this.platformId)) {
97
- this.trigger.focus();
98
- }
99
- }
100
- blur() {
101
- if (this.trigger && isPlatformBrowser(this.platformId)) {
102
- this.trigger.blur();
103
- }
104
- }
105
- activate() {
106
- if (isPlatformBrowser(this.platformId)) {
107
- this.trigger.click();
108
- }
109
- }
110
- resetChildren() {
111
- this.children = new ReplaySubject(1);
112
- if (this.parent) {
113
- this.right = this.openAndGetChildren().pipe(map(all => all[0]));
114
- }
115
- else {
116
- this.down = this.openAndGetChildren().pipe(map(all => all[0]));
117
- this.up = this.openAndGetChildren().pipe(map(all => all[all.length - 1]));
118
- }
119
- }
120
- addChildren(children) {
121
- Linkers.linkVertical(children);
122
- if (this.parent) {
123
- Linkers.linkParent(children, this.closeAndGetThis(), ArrowKeyDirection.LEFT);
124
- }
125
- this.children.next(children);
126
- }
127
- openAndGetChildren() {
128
- return wrapObservable(this.children, () => (this.popoverService.open = true));
129
- }
130
- closeAndGetThis() {
131
- return wrapObservable(of(this), () => (this.popoverService.open = false));
132
- }
133
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DropdownFocusHandler, deps: [{ token: i0.Renderer2 }, { token: DropdownFocusHandler, optional: true, skipSelf: true }, { token: i2.ClrPopoverService }, { token: i1.FocusService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
134
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DropdownFocusHandler }); }
135
- }
136
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DropdownFocusHandler, decorators: [{
137
- type: Injectable
138
- }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: DropdownFocusHandler, decorators: [{
139
- type: SkipSelf
140
- }, {
141
- type: Optional
142
- }] }, { type: i2.ClrPopoverService }, { type: i1.FocusService }, { type: undefined, decorators: [{
143
- type: Inject,
144
- args: [PLATFORM_ID]
145
- }] }] });
146
- const DROPDOWN_FOCUS_HANDLER_PROVIDER = customFocusableItemProvider(DropdownFocusHandler);
147
-
148
- /*
149
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
150
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
151
- * This software is released under MIT license.
152
- * The full license information can be found in LICENSE in the root directory of this project.
153
- */
154
- class RootDropdownService {
155
- constructor() {
156
- this._changes = new Subject();
157
- }
158
- get changes() {
159
- return this._changes.asObservable();
160
- }
161
- closeMenus() {
162
- this._changes.next(false);
163
- }
164
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RootDropdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
165
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RootDropdownService }); }
166
- }
167
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RootDropdownService, decorators: [{
168
- type: Injectable
169
- }] });
170
- function clrRootDropdownFactory(existing) {
171
- return existing || new RootDropdownService();
172
- }
173
- const ROOT_DROPDOWN_PROVIDER = {
174
- provide: RootDropdownService,
175
- useFactory: clrRootDropdownFactory,
176
- deps: [[new Optional(), new SkipSelf(), RootDropdownService]],
177
- };
178
-
179
- /*
180
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
181
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
182
- * This software is released under MIT license.
183
- * The full license information can be found in LICENSE in the root directory of this project.
184
- */
185
- class ClrDropdown {
186
- constructor(parent, popoverService, focusHandler, cdr, dropdownService) {
187
- this.parent = parent;
188
- this.popoverService = popoverService;
189
- this.focusHandler = focusHandler;
190
- this.isMenuClosable = true;
191
- this.subscriptions = [];
192
- this.subscriptions.push(dropdownService.changes.subscribe(value => (popoverService.open = value)));
193
- this.subscriptions.push(popoverService.openChange.subscribe(() => cdr.markForCheck()));
194
- }
195
- ngOnDestroy() {
196
- this.subscriptions.forEach(sub => sub.unsubscribe());
197
- }
198
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDropdown, deps: [{ token: ClrDropdown, optional: true, skipSelf: true }, { token: i2.ClrPopoverService }, { token: DropdownFocusHandler }, { token: i0.ChangeDetectorRef }, { token: RootDropdownService }], target: i0.ɵɵFactoryTarget.Component }); }
199
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrDropdown, isStandalone: false, selector: "clr-dropdown", inputs: { isMenuClosable: ["clrCloseMenuOnItemClick", "isMenuClosable"] }, host: { properties: { "class.dropdown": "true", "class.open": "popoverService.open" } }, providers: [ROOT_DROPDOWN_PROVIDER, FOCUS_SERVICE_PROVIDER, DROPDOWN_FOCUS_HANDLER_PROVIDER], hostDirectives: [{ directive: i2.ClrPopoverHostDirective }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
200
- }
201
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDropdown, decorators: [{
202
- type: Component,
203
- args: [{
204
- selector: 'clr-dropdown',
205
- template: `<ng-content></ng-content>`,
206
- host: {
207
- '[class.dropdown]': 'true',
208
- '[class.open]': 'popoverService.open',
209
- },
210
- providers: [ROOT_DROPDOWN_PROVIDER, FOCUS_SERVICE_PROVIDER, DROPDOWN_FOCUS_HANDLER_PROVIDER],
211
- hostDirectives: [ClrPopoverHostDirective$1],
212
- standalone: false,
213
- }]
214
- }], ctorParameters: () => [{ type: ClrDropdown, decorators: [{
215
- type: SkipSelf
216
- }, {
217
- type: Optional
218
- }] }, { type: i2.ClrPopoverService }, { type: DropdownFocusHandler }, { type: i0.ChangeDetectorRef }, { type: RootDropdownService }], propDecorators: { isMenuClosable: [{
219
- type: Input,
220
- args: ['clrCloseMenuOnItemClick']
221
- }] } });
222
-
223
- /*
224
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
225
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
226
- * This software is released under MIT license.
227
- * The full license information can be found in LICENSE in the root directory of this project.
228
- */
229
- class ClrDropdownMenu {
230
- constructor(parentHost, nested, focusHandler, elementRef, popoverService, popoverContent) {
231
- this.focusHandler = focusHandler;
232
- this.elementRef = elementRef;
233
- this.popoverService = popoverService;
234
- this.popoverContent = popoverContent;
235
- if (!parentHost) {
236
- throw new Error('clr-dropdown-menu should only be used inside of a clr-dropdown');
237
- }
238
- popoverContent.scrollToClose = true;
239
- popoverContent.contentType = ClrPopoverType$1.DROPDOWN;
240
- popoverContent.contentAt = nested ? ClrPopoverPosition$1.RIGHT_TOP : ClrPopoverPosition$1.BOTTOM_LEFT;
241
- popoverService.panelClass.push('clr-dropdown-container');
242
- }
243
- /*
244
- * Fallback to hide when *clrIfOpen is not being used
245
- */
246
- get isOffScreen() {
247
- return !this.popoverService.open;
248
- }
249
- set position(position) {
250
- if (!position) {
251
- return;
252
- }
253
- const posIndex = DROPDOWN_POSITIONS$1.indexOf(position);
254
- if (posIndex === -1) {
255
- return;
256
- }
257
- // set the popover values based on menu position
258
- this.popoverContent.contentAt = DROPDOWN_POSITIONS$1[posIndex];
259
- }
260
- ngAfterContentInit() {
261
- this.focusHandler.container = this.elementRef.nativeElement;
262
- this.items.changes.subscribe(() => this.focusHandler.addChildren(this.items.toArray()));
263
- // I saw this on GitHub as a solution to avoid code duplication because of missed QueryList changes
264
- this.items.notifyOnChanges();
265
- }
266
- ngOnDestroy() {
267
- this.focusHandler.resetChildren();
268
- }
269
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDropdownMenu, deps: [{ token: POPOVER_HOST_ANCHOR$1, optional: true }, { token: ClrDropdownMenu, optional: true, skipSelf: true }, { token: DropdownFocusHandler }, { token: i0.ElementRef }, { token: i2.ClrPopoverService }, { token: i2.ClrPopoverContent }], target: i0.ɵɵFactoryTarget.Component }); }
270
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrDropdownMenu, isStandalone: false, selector: "clr-dropdown-menu", inputs: { position: ["clrPosition", "position"] }, host: { properties: { "class.dropdown-menu": "true", "attr.role": "\"menu\"", "class.is-off-screen": "this.isOffScreen" } }, queries: [{ propertyName: "items", predicate: FocusableItem }], hostDirectives: [{ directive: i2.ClrPopoverContent }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
271
- }
272
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDropdownMenu, decorators: [{
273
- type: Component,
274
- args: [{
275
- selector: 'clr-dropdown-menu',
276
- template: `<ng-content></ng-content>`,
277
- host: {
278
- '[class.dropdown-menu]': 'true',
279
- '[attr.role]': '"menu"',
280
- },
281
- standalone: false,
282
- hostDirectives: [ClrPopoverContent$1],
283
- }]
284
- }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
285
- type: Optional
286
- }, {
287
- type: Inject,
288
- args: [POPOVER_HOST_ANCHOR$1]
289
- }] }, { type: ClrDropdownMenu, decorators: [{
290
- type: Optional
291
- }, {
292
- type: SkipSelf
293
- }] }, { type: DropdownFocusHandler }, { type: i0.ElementRef }, { type: i2.ClrPopoverService }, { type: i2.ClrPopoverContent }], propDecorators: { items: [{
294
- type: ContentChildren,
295
- args: [FocusableItem]
296
- }], isOffScreen: [{
297
- type: HostBinding,
298
- args: ['class.is-off-screen']
299
- }], position: [{
300
- type: Input,
301
- args: ['clrPosition']
302
- }] } });
303
-
304
- /*
305
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
306
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
307
- * This software is released under MIT license.
308
- * The full license information can be found in LICENSE in the root directory of this project.
309
- */
310
- class ClrDropdownTrigger {
311
- constructor(dropdown, popoverService, el, focusHandler) {
312
- this.popoverService = popoverService;
313
- this.isRootLevelToggle = true;
314
- // if the containing dropdown has a parent, then this is not the root level one
315
- if (dropdown.parent) {
316
- this.isRootLevelToggle = false;
317
- }
318
- focusHandler.trigger = el.nativeElement;
319
- popoverService.anchorElementRef = el;
320
- }
321
- get active() {
322
- return this.popoverService.open;
323
- }
324
- onDropdownTriggerClick(event) {
325
- this.popoverService.toggleWithEvent(event);
326
- }
327
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDropdownTrigger, deps: [{ token: ClrDropdown }, { token: i2.ClrPopoverService }, { token: i0.ElementRef }, { token: DropdownFocusHandler }], target: i0.ɵɵFactoryTarget.Directive }); }
328
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrDropdownTrigger, isStandalone: false, selector: "[clrDropdownTrigger],[clrDropdownToggle]", host: { listeners: { "click": "onDropdownTriggerClick($event)" }, properties: { "class.dropdown-toggle": "isRootLevelToggle", "class.dropdown-item": "!isRootLevelToggle", "class.expandable": "!isRootLevelToggle", "class.active": "active", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "active" } }, ngImport: i0 }); }
329
- }
330
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDropdownTrigger, decorators: [{
331
- type: Directive,
332
- args: [{
333
- // We support both selectors for legacy reasons
334
- selector: '[clrDropdownTrigger],[clrDropdownToggle]',
335
- host: {
336
- '[class.dropdown-toggle]': 'isRootLevelToggle',
337
- '[class.dropdown-item]': '!isRootLevelToggle',
338
- '[class.expandable]': '!isRootLevelToggle',
339
- '[class.active]': 'active',
340
- '[attr.aria-haspopup]': '"menu"',
341
- '[attr.aria-expanded]': 'active',
342
- },
343
- standalone: false,
344
- }]
345
- }], ctorParameters: () => [{ type: ClrDropdown }, { type: i2.ClrPopoverService }, { type: i0.ElementRef }, { type: DropdownFocusHandler }], propDecorators: { onDropdownTriggerClick: [{
346
- type: HostListener,
347
- args: ['click', ['$event']]
348
- }] } });
349
-
350
- /*
351
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
352
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
353
- * This software is released under MIT license.
354
- * The full license information can be found in LICENSE in the root directory of this project.
355
- */
356
- class ClrDropdownItem {
357
- constructor(dropdown, _dropdownService, focusableItem, el, renderer) {
358
- this.dropdown = dropdown;
359
- this._dropdownService = _dropdownService;
360
- this.focusableItem = focusableItem;
361
- this.el = el;
362
- this.renderer = renderer;
363
- }
364
- get disabled() {
365
- return this.focusableItem.disabled;
366
- }
367
- set disabled(value) {
368
- // Empty string attribute evaluates to false but should disable the item, so we need to add a special case for it.
369
- this.focusableItem.disabled = !!value || value === '';
370
- }
371
- /**
372
- * Let you overwrite the focusable auto increment id.
373
- */
374
- get dropdownItemId() {
375
- return this.focusableItem.id;
376
- }
377
- set dropdownItemId(value) {
378
- this.focusableItem.id = value;
379
- }
380
- onDropdownItemClick() {
381
- // Move focus back to the root dropdown trigger.
382
- // This is done BEFORE the dropdown is closed so that focus gets moved properly if a modal is opened.
383
- if (this.dropdown.isMenuClosable && !this.disabled && this.dropdown.popoverService.open) {
384
- const rootDropdown = this.findRootDropdown();
385
- rootDropdown.focusHandler.focus();
386
- }
387
- // Ensure that the dropdown is closed after custom dropdown item click event handlers have run.
388
- setTimeout(() => {
389
- if (this.dropdown.isMenuClosable && !this.disabled) {
390
- this._dropdownService.closeMenus();
391
- }
392
- });
393
- }
394
- onSpaceKeydown($event) {
395
- this.stopImmediatePropagationIfDisabled($event);
396
- }
397
- onEnterKeydown($event) {
398
- this.stopImmediatePropagationIfDisabled($event);
399
- }
400
- stopImmediatePropagationIfDisabled($event) {
401
- if (this.disabled) {
402
- $event.preventDefault(); // prevent click event
403
- $event.stopImmediatePropagation();
404
- }
405
- }
406
- findRootDropdown() {
407
- let rootDropdown = this.dropdown;
408
- while (rootDropdown.parent) {
409
- rootDropdown = rootDropdown.parent;
410
- }
411
- return rootDropdown;
412
- }
413
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDropdownItem, deps: [{ token: ClrDropdown }, { token: RootDropdownService }, { token: i1.FocusableItem }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
414
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrDropdownItem, isStandalone: false, selector: "[clrDropdownItem]", inputs: { disabled: ["clrDisabled", "disabled"], dropdownItemId: ["id", "dropdownItemId"] }, host: { listeners: { "click": "onDropdownItemClick()", "keydown.space": "onSpaceKeydown($event)", "keydown.enter": "onEnterKeydown($event)" }, properties: { "class.disabled": "disabled", "class.dropdown-item": "true", "attr.role": "\"menuitem\"", "attr.aria-disabled": "disabled", "attr.id": "dropdownItemId" } }, providers: [BASIC_FOCUSABLE_ITEM_PROVIDER], ngImport: i0 }); }
415
- }
416
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDropdownItem, decorators: [{
417
- type: Directive,
418
- args: [{
419
- selector: '[clrDropdownItem]',
420
- host: {
421
- '[class.disabled]': 'disabled',
422
- '[class.dropdown-item]': 'true',
423
- '[attr.role]': '"menuitem"',
424
- '[attr.aria-disabled]': 'disabled',
425
- '[attr.id]': 'dropdownItemId',
426
- },
427
- providers: [BASIC_FOCUSABLE_ITEM_PROVIDER],
428
- standalone: false,
429
- }]
430
- }], ctorParameters: () => [{ type: ClrDropdown }, { type: RootDropdownService }, { type: i1.FocusableItem }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { disabled: [{
431
- type: Input,
432
- args: ['clrDisabled']
433
- }], dropdownItemId: [{
434
- type: Input,
435
- args: ['id']
436
- }], onDropdownItemClick: [{
437
- type: HostListener,
438
- args: ['click']
439
- }], onSpaceKeydown: [{
440
- type: HostListener,
441
- args: ['keydown.space', ['$event']]
442
- }], onEnterKeydown: [{
443
- type: HostListener,
444
- args: ['keydown.enter', ['$event']]
445
- }] } });
446
-
447
- /*
448
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
449
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
450
- * This software is released under MIT license.
451
- * The full license information can be found in LICENSE in the root directory of this project.
452
- */
453
- const CLR_MENU_POSITIONS = [
454
- 'bottom-left',
455
- 'bottom-right',
456
- 'left-bottom',
457
- 'left-top',
458
- 'right-bottom',
459
- 'right-top',
460
- 'top-left',
461
- 'top-right',
462
- ];
463
-
464
- /*
465
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
466
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
467
- * This software is released under MIT license.
468
- * The full license information can be found in LICENSE in the root directory of this project.
469
- */
470
- const CLR_DROPDOWN_DIRECTIVES = [ClrDropdown, ClrDropdownMenu, ClrDropdownTrigger, ClrDropdownItem];
471
- class ClrDropdownModule {
472
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
473
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: ClrDropdownModule, declarations: [ClrDropdown, ClrDropdownMenu, ClrDropdownTrigger, ClrDropdownItem], imports: [CommonModule, ClrIcon, ClrIfOpen$1], exports: [ClrDropdown, ClrDropdownMenu, ClrDropdownTrigger, ClrDropdownItem, ClrIfOpen$1, ClrIcon] }); }
474
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDropdownModule, imports: [CommonModule, ClrIcon] }); }
475
- }
476
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDropdownModule, decorators: [{
477
- type: NgModule,
478
- args: [{
479
- imports: [CommonModule, ClrIcon, ClrIfOpen$1],
480
- declarations: [CLR_DROPDOWN_DIRECTIVES],
481
- exports: [CLR_DROPDOWN_DIRECTIVES, ClrIfOpen$1, ClrIcon],
482
- }]
483
- }] });
484
-
485
- /*
486
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
487
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
488
- * This software is released under MIT license.
489
- * The full license information can be found in LICENSE in the root directory of this project.
490
- */
491
-
492
- /*
493
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
494
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
495
- * This software is released under MIT license.
496
- * The full license information can be found in LICENSE in the root directory of this project.
497
- */
498
- // Popovers might need to ignore click events on an element
499
- // (eg: popover opens on focus on an input field. Clicks should be ignored in this case)
500
- class ClrPopoverService {
501
- constructor() {
502
- this.panelClass = [];
503
- this._open = false;
504
- this._openChange = new Subject();
505
- this._openEventChange = new Subject();
506
- this._positionChange = new Subject();
507
- this._resetPositions = new Subject();
508
- this._updatePosition = new Subject();
509
- this._popoverVisible = new Subject();
510
- }
511
- get openChange() {
512
- return this._openChange.asObservable();
513
- }
514
- get popoverVisible() {
515
- return this._popoverVisible.asObservable();
516
- }
517
- get openEvent() {
518
- return this._openEvent;
519
- }
520
- set openEvent(event) {
521
- this._openEvent = event;
522
- this._openEventChange.next(event);
523
- }
524
- get open() {
525
- return this._open;
526
- }
527
- set open(value) {
528
- value = !!value;
529
- if (this._open !== value) {
530
- this._open = value;
531
- this._openChange.next(value);
532
- }
533
- }
534
- get resetPositionsChange() {
535
- return this._resetPositions.asObservable();
536
- }
537
- positionChange(position) {
538
- this._positionChange.next(position);
539
- }
540
- updatePositionChange() {
541
- return this._updatePosition.asObservable();
542
- }
543
- getPositionChange() {
544
- return this._positionChange.asObservable();
545
- }
546
- getEventChange() {
547
- return this._openEventChange.asObservable();
548
- }
549
- /**
550
- * Sometimes, we need to remember the event that triggered the toggling to avoid loops.
551
- * This is for instance the case of components that open on a click, but close on a click outside.
552
- */
553
- toggleWithEvent(event) {
554
- preventArrowKeyScroll(event);
555
- this.openEvent = event;
556
- this.open = !this.open;
557
- }
558
- popoverVisibleEmit(visible) {
559
- this._popoverVisible.next(visible);
560
- }
561
- resetPositions() {
562
- this._resetPositions.next();
563
- }
564
- updatePosition() {
565
- this._updatePosition.next();
566
- }
567
- focusCloseButton() {
568
- this.closeButtonRef.nativeElement?.focus();
569
- }
570
- focusAnchor() {
571
- this.anchorElementRef?.nativeElement?.focus({ preventScroll: true });
572
- }
573
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
574
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverService }); }
575
- }
576
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverService, decorators: [{
577
- type: Injectable
578
- }] });
579
-
580
- /*
581
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
582
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
583
- * This software is released under MIT license.
584
- * The full license information can be found in LICENSE in the root directory of this project.
585
- */
586
- var ClrPopoverType;
587
- (function (ClrPopoverType) {
588
- ClrPopoverType[ClrPopoverType["SIGNPOST"] = 0] = "SIGNPOST";
589
- ClrPopoverType[ClrPopoverType["TOOLTIP"] = 1] = "TOOLTIP";
590
- ClrPopoverType[ClrPopoverType["DROPDOWN"] = 2] = "DROPDOWN";
591
- ClrPopoverType[ClrPopoverType["DEFAULT"] = 3] = "DEFAULT";
592
- })(ClrPopoverType || (ClrPopoverType = {}));
593
- var ClrPopoverPosition;
594
- (function (ClrPopoverPosition) {
595
- ClrPopoverPosition["TOP_RIGHT"] = "top-right";
596
- ClrPopoverPosition["TOP_MIDDLE"] = "top-middle";
597
- ClrPopoverPosition["TOP_LEFT"] = "top-left";
598
- ClrPopoverPosition["RIGHT"] = "right";
599
- ClrPopoverPosition["RIGHT_TOP"] = "right-top";
600
- ClrPopoverPosition["RIGHT_MIDDLE"] = "right-middle";
601
- ClrPopoverPosition["RIGHT_BOTTOM"] = "right-bottom";
602
- ClrPopoverPosition["LEFT"] = "left";
603
- ClrPopoverPosition["LEFT_TOP"] = "left-top";
604
- ClrPopoverPosition["LEFT_MIDDLE"] = "left-middle";
605
- ClrPopoverPosition["LEFT_BOTTOM"] = "left-bottom";
606
- ClrPopoverPosition["BOTTOM_RIGHT"] = "bottom-right";
607
- ClrPopoverPosition["BOTTOM_MIDDLE"] = "bottom-middle";
608
- ClrPopoverPosition["BOTTOM_LEFT"] = "bottom-left";
609
- })(ClrPopoverPosition || (ClrPopoverPosition = {}));
610
- const TOOLTIP_POSITIONS = [
611
- ClrPopoverPosition.RIGHT, // default. must be at index 0
612
- ClrPopoverPosition.LEFT,
613
- ClrPopoverPosition.BOTTOM_RIGHT,
614
- ClrPopoverPosition.BOTTOM_LEFT,
615
- ClrPopoverPosition.TOP_RIGHT,
616
- ClrPopoverPosition.TOP_LEFT,
617
- ];
618
- const DROPDOWN_POSITIONS = [
619
- ClrPopoverPosition.BOTTOM_LEFT, // default. must be at index 0
620
- ClrPopoverPosition.BOTTOM_RIGHT,
621
- ClrPopoverPosition.TOP_LEFT,
622
- ClrPopoverPosition.TOP_RIGHT,
623
- ClrPopoverPosition.RIGHT_TOP,
624
- ClrPopoverPosition.RIGHT_BOTTOM,
625
- ClrPopoverPosition.LEFT_TOP,
626
- ClrPopoverPosition.LEFT_BOTTOM,
627
- ];
628
- const SIGNPOST_POSITIONS = [
629
- ClrPopoverPosition.RIGHT_MIDDLE, // default. must be at index 0
630
- ClrPopoverPosition.RIGHT_TOP,
631
- ClrPopoverPosition.RIGHT_BOTTOM,
632
- ClrPopoverPosition.TOP_RIGHT,
633
- ClrPopoverPosition.TOP_LEFT,
634
- ClrPopoverPosition.TOP_MIDDLE,
635
- ClrPopoverPosition.BOTTOM_RIGHT,
636
- ClrPopoverPosition.BOTTOM_MIDDLE,
637
- ClrPopoverPosition.BOTTOM_LEFT,
638
- ClrPopoverPosition.LEFT_BOTTOM,
639
- ClrPopoverPosition.LEFT_MIDDLE,
640
- ClrPopoverPosition.LEFT_TOP,
641
- ];
642
- function getPositionsArray(type) {
643
- switch (type) {
644
- case ClrPopoverType.TOOLTIP:
645
- return TOOLTIP_POSITIONS;
646
- case ClrPopoverType.DROPDOWN:
647
- return DROPDOWN_POSITIONS;
648
- case ClrPopoverType.SIGNPOST:
649
- case ClrPopoverType.DEFAULT:
650
- default:
651
- return SIGNPOST_POSITIONS;
652
- }
653
- }
654
- function getConnectedPositions(type) {
655
- const result = [];
656
- getPositionsArray(type).forEach(position => {
657
- result.push(mapPopoverKeyToPosition(position, type));
658
- });
659
- return result;
660
- }
661
- const POPOVER_OFFSETS = {
662
- [ClrPopoverType.SIGNPOST]: 16,
663
- [ClrPopoverType.TOOLTIP]: 21,
664
- [ClrPopoverType.DROPDOWN]: 2,
665
- [ClrPopoverType.DEFAULT]: 0,
666
- };
667
- function getOffset(key, type) {
668
- const offset = POPOVER_OFFSETS[type] || 0;
669
- switch (key) {
670
- // TOP
671
- case ClrPopoverPosition.TOP_LEFT:
672
- case ClrPopoverPosition.TOP_MIDDLE:
673
- case ClrPopoverPosition.TOP_RIGHT:
674
- return {
675
- offsetY: -offset,
676
- offsetX: 0,
677
- };
678
- // LEFT
679
- case ClrPopoverPosition.LEFT_TOP:
680
- case ClrPopoverPosition.LEFT_MIDDLE:
681
- case ClrPopoverPosition.LEFT:
682
- case ClrPopoverPosition.LEFT_BOTTOM:
683
- return {
684
- offsetY: 0,
685
- offsetX: -offset,
686
- };
687
- // RIGHT
688
- case ClrPopoverPosition.RIGHT_TOP:
689
- case ClrPopoverPosition.RIGHT_MIDDLE:
690
- case ClrPopoverPosition.RIGHT:
691
- case ClrPopoverPosition.RIGHT_BOTTOM:
692
- return {
693
- offsetY: 0,
694
- offsetX: offset,
695
- };
696
- // BOTTOM and DEFAULT
697
- case ClrPopoverPosition.BOTTOM_RIGHT:
698
- case ClrPopoverPosition.BOTTOM_MIDDLE:
699
- case ClrPopoverPosition.BOTTOM_LEFT:
700
- default:
701
- return {
702
- offsetY: offset,
703
- offsetX: 0,
704
- };
705
- }
706
- }
707
- const STANDARD_ANCHORS = {
708
- // TOP
709
- [ClrPopoverPosition.TOP_RIGHT]: { anchor: ClrPosition.TOP_CENTER, content: ClrPosition.BOTTOM_LEFT },
710
- [ClrPopoverPosition.TOP_MIDDLE]: { anchor: ClrPosition.TOP_CENTER, content: ClrPosition.BOTTOM_CENTER },
711
- [ClrPopoverPosition.TOP_LEFT]: { anchor: ClrPosition.TOP_CENTER, content: ClrPosition.BOTTOM_RIGHT },
712
- // LEFT
713
- [ClrPopoverPosition.LEFT]: { anchor: ClrPosition.LEFT_CENTER, content: ClrPosition.RIGHT_TOP },
714
- [ClrPopoverPosition.LEFT_TOP]: { anchor: ClrPosition.LEFT_CENTER, content: ClrPosition.RIGHT_BOTTOM },
715
- [ClrPopoverPosition.LEFT_MIDDLE]: { anchor: ClrPosition.LEFT_CENTER, content: ClrPosition.RIGHT_CENTER },
716
- [ClrPopoverPosition.LEFT_BOTTOM]: { anchor: ClrPosition.LEFT_CENTER, content: ClrPosition.RIGHT_TOP },
717
- // RIGHT
718
- [ClrPopoverPosition.RIGHT]: { anchor: ClrPosition.RIGHT_CENTER, content: ClrPosition.LEFT_TOP },
719
- [ClrPopoverPosition.RIGHT_TOP]: { anchor: ClrPosition.RIGHT_CENTER, content: ClrPosition.LEFT_BOTTOM },
720
- [ClrPopoverPosition.RIGHT_MIDDLE]: { anchor: ClrPosition.RIGHT_CENTER, content: ClrPosition.LEFT_CENTER },
721
- [ClrPopoverPosition.RIGHT_BOTTOM]: { anchor: ClrPosition.RIGHT_CENTER, content: ClrPosition.LEFT_TOP },
722
- // BOTTOM
723
- [ClrPopoverPosition.BOTTOM_RIGHT]: { anchor: ClrPosition.BOTTOM_CENTER, content: ClrPosition.TOP_LEFT },
724
- [ClrPopoverPosition.BOTTOM_MIDDLE]: { anchor: ClrPosition.BOTTOM_CENTER, content: ClrPosition.TOP_CENTER },
725
- [ClrPopoverPosition.BOTTOM_LEFT]: { anchor: ClrPosition.BOTTOM_CENTER, content: ClrPosition.TOP_RIGHT },
726
- };
727
- const DROPDOWN_ANCHORS = {
728
- // TOP
729
- [ClrPopoverPosition.TOP_RIGHT]: { anchor: ClrPosition.TOP_RIGHT, content: ClrPosition.BOTTOM_RIGHT },
730
- [ClrPopoverPosition.TOP_LEFT]: { anchor: ClrPosition.TOP_LEFT, content: ClrPosition.BOTTOM_LEFT },
731
- // LEFT
732
- [ClrPopoverPosition.LEFT_TOP]: { anchor: ClrPosition.LEFT_TOP, content: ClrPosition.TOP_RIGHT },
733
- [ClrPopoverPosition.LEFT_BOTTOM]: { anchor: ClrPosition.LEFT_BOTTOM, content: ClrPosition.BOTTOM_RIGHT },
734
- // RIGHT
735
- [ClrPopoverPosition.RIGHT_TOP]: { anchor: ClrPosition.RIGHT_TOP, content: ClrPosition.LEFT_TOP },
736
- [ClrPopoverPosition.RIGHT_BOTTOM]: { anchor: ClrPosition.RIGHT_BOTTOM, content: ClrPosition.LEFT_BOTTOM },
737
- // BOTTOM
738
- [ClrPopoverPosition.BOTTOM_RIGHT]: { anchor: ClrPosition.BOTTOM_LEFT, content: ClrPosition.TOP_RIGHT },
739
- [ClrPopoverPosition.BOTTOM_LEFT]: { anchor: ClrPosition.BOTTOM_RIGHT, content: ClrPosition.TOP_LEFT },
740
- };
741
- function mapPopoverKeyToPosition(key, type) {
742
- let offset = getOffset(key, type);
743
- const defaultPosition = { anchor: ClrPosition.BOTTOM_LEFT, content: ClrPosition.TOP_LEFT };
744
- const { anchor, content } = (type === ClrPopoverType.DROPDOWN ? DROPDOWN_ANCHORS[key] : STANDARD_ANCHORS[key]) ?? defaultPosition;
745
- return {
746
- ...getAnchorPosition(anchor),
747
- ...getContentPosition(content),
748
- ...offset,
749
- panelClass: key,
750
- };
751
- }
752
- function getAnchorPosition(key) {
753
- switch (key) {
754
- // TOP Positions
755
- case ClrPosition.TOP_LEFT:
756
- return {
757
- originX: 'start',
758
- originY: 'top',
759
- };
760
- case ClrPosition.TOP_CENTER:
761
- return {
762
- originX: 'center',
763
- originY: 'top',
764
- };
765
- case ClrPosition.TOP_RIGHT:
766
- return {
767
- originX: 'end',
768
- originY: 'top',
769
- };
770
- // LEFT Positions
771
- case ClrPosition.LEFT_TOP:
772
- return {
773
- originX: 'start',
774
- originY: 'top',
775
- };
776
- case ClrPosition.LEFT_CENTER:
777
- return {
778
- originX: 'start',
779
- originY: 'center',
780
- };
781
- case ClrPosition.LEFT_BOTTOM:
782
- return {
783
- originX: 'start',
784
- originY: 'bottom',
785
- };
786
- // RIGHT Positions
787
- case ClrPosition.RIGHT_TOP:
788
- return {
789
- originX: 'end',
790
- originY: 'top',
791
- };
792
- case ClrPosition.RIGHT_CENTER:
793
- return {
794
- originX: 'end',
795
- originY: 'center',
796
- };
797
- case ClrPosition.RIGHT_BOTTOM:
798
- return {
799
- originX: 'end',
800
- originY: 'bottom',
801
- };
802
- // BOTTOM positions and default
803
- case ClrPosition.BOTTOM_LEFT:
804
- return {
805
- originX: 'end',
806
- originY: 'bottom',
807
- };
808
- case ClrPosition.BOTTOM_CENTER:
809
- return {
810
- originX: 'center',
811
- originY: 'bottom',
812
- };
813
- case ClrPosition.BOTTOM_RIGHT:
814
- default:
815
- return {
816
- originX: 'start',
817
- originY: 'bottom',
818
- };
819
- }
820
- }
821
- function getContentPosition(key) {
822
- switch (key) {
823
- // TOP Positions
824
- case ClrPosition.TOP_LEFT:
825
- return {
826
- overlayX: 'start',
827
- overlayY: 'top',
828
- };
829
- case ClrPosition.TOP_CENTER:
830
- return {
831
- overlayX: 'center',
832
- overlayY: 'top',
833
- };
834
- case ClrPosition.TOP_RIGHT:
835
- return {
836
- overlayX: 'end',
837
- overlayY: 'top',
838
- };
839
- // LEFT Positions
840
- case ClrPosition.LEFT_TOP:
841
- return {
842
- overlayX: 'start',
843
- overlayY: 'top',
844
- };
845
- case ClrPosition.LEFT_CENTER:
846
- return {
847
- overlayX: 'start',
848
- overlayY: 'center',
849
- };
850
- case ClrPosition.LEFT_BOTTOM:
851
- return {
852
- overlayX: 'start',
853
- overlayY: 'bottom',
854
- };
855
- // RIGHT Positions
856
- case ClrPosition.RIGHT_TOP:
857
- return {
858
- overlayX: 'end',
859
- overlayY: 'top',
860
- };
861
- case ClrPosition.RIGHT_CENTER:
862
- return {
863
- overlayX: 'end',
864
- overlayY: 'center',
865
- };
866
- case ClrPosition.RIGHT_BOTTOM:
867
- return {
868
- overlayX: 'end',
869
- overlayY: 'bottom',
870
- };
871
- // BOTTOM positions and default
872
- case ClrPosition.BOTTOM_LEFT:
873
- return {
874
- overlayX: 'start',
875
- overlayY: 'bottom',
876
- };
877
- case ClrPosition.BOTTOM_CENTER:
878
- return {
879
- overlayX: 'center',
880
- overlayY: 'bottom',
881
- };
882
- case ClrPosition.BOTTOM_RIGHT:
883
- default:
884
- return {
885
- overlayX: 'end',
886
- overlayY: 'bottom',
887
- };
888
- }
889
- }
890
-
891
- /*
892
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
893
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
894
- * This software is released under MIT license.
895
- * The full license information can be found in LICENSE in the root directory of this project.
896
- */
897
- /** @dynamic */
898
- class ClrPopoverContent {
899
- constructor(element, container, template, overlayContainer, parent, overlay, popoverService, zone, platformId) {
900
- this.container = container;
901
- this.template = template;
902
- this.parent = parent;
903
- this.overlay = overlay;
904
- this.popoverService = popoverService;
905
- this.zone = zone;
906
- this.platformId = platformId;
907
- this._outsideClickClose = true;
908
- this._scrollToClose = false;
909
- this.popoverType = ClrPopoverType.DEFAULT;
910
- this._availablePositions = [];
911
- this._position = ClrPopoverPosition.BOTTOM_LEFT;
912
- this.scrollableParents = [];
913
- this.subscriptions = [];
914
- this.preferredPositionIsSet = false;
915
- this.availablePositionsAreSet = false;
916
- this._preferredPosition = {
917
- originX: 'start',
918
- originY: 'top',
919
- overlayX: 'end',
920
- overlayY: 'top',
921
- panelClass: ClrPopoverPosition.LEFT_TOP,
922
- };
923
- popoverService.panelClass.push('clr-popover-content');
924
- overlayContainer.getContainerElement().classList.add('clr-overlay-container');
925
- if (!template) {
926
- this.elementRef = element;
927
- }
928
- }
929
- set open(value) {
930
- this.popoverService.open = !!value;
931
- }
932
- get contentAt() {
933
- return this.preferredPositionIsSet ? this._preferredPosition : this._position;
934
- }
935
- set contentAt(position) {
936
- if (typeof position === 'string') {
937
- if (!position || Object.values(ClrPopoverPosition).indexOf(position) === -1) {
938
- return;
939
- }
940
- // set the popover values based on menu position
941
- this._position = position;
942
- this.popoverService.positionChange(this._position);
943
- }
944
- else {
945
- this.preferredPositionIsSet = true;
946
- this._preferredPosition = position;
947
- }
948
- }
949
- set availablePositions(positions) {
950
- this.availablePositionsAreSet = true;
951
- this._availablePositions = positions;
952
- }
953
- set contentType(type) {
954
- this.popoverType = type;
955
- if (!this.availablePositionsAreSet) {
956
- this._availablePositions = getConnectedPositions(type);
957
- }
958
- }
959
- get outsideClickClose() {
960
- return this._outsideClickClose;
961
- }
962
- set outsideClickClose(clickToClose) {
963
- this._outsideClickClose = !!clickToClose;
964
- }
965
- get scrollToClose() {
966
- return this._scrollToClose;
967
- }
968
- set scrollToClose(scrollToClose) {
969
- this._scrollToClose = !!scrollToClose;
970
- }
971
- get positionStrategy() {
972
- return this.overlay
973
- .position()
974
- .flexibleConnectedTo(this.popoverService.anchorElementRef)
975
- .setOrigin(this.popoverService.anchorElementRef)
976
- .withPush(true)
977
- .withPositions([this.preferredPosition, ...this._availablePositions])
978
- .withFlexibleDimensions(true);
979
- }
980
- get preferredPosition() {
981
- if (this.preferredPositionIsSet) {
982
- return this._preferredPosition;
983
- }
984
- // Default position is "bottom-left"
985
- return mapPopoverKeyToPosition(this._position, this.popoverType);
986
- }
987
- ngAfterViewInit() {
988
- if (this.popoverService.open) {
989
- this.showOverlay();
990
- }
991
- this.openCloseSubscription = this.popoverService.openChange.subscribe(change => {
992
- if (change) {
993
- this.showOverlay();
994
- }
995
- else {
996
- this.closePopover();
997
- }
998
- });
999
- }
1000
- ngOnDestroy() {
1001
- this.removeOverlay();
1002
- this.openCloseSubscription?.unsubscribe();
1003
- }
1004
- _createOverlayRef() {
1005
- this.overlayRef = this.overlay.create(new OverlayConfig({
1006
- // This is where we can pass externally facing inputs into the angular overlay API, and essentially proxy behaviors our users want directly to the CDK if they have them.
1007
- positionStrategy: this.positionStrategy,
1008
- // the scrolling behaviour is controlled by this popover content directive
1009
- scrollStrategy: this.overlay.scrollStrategies.noop(),
1010
- panelClass: this.popoverService.panelClass,
1011
- hasBackdrop: false,
1012
- }));
1013
- this.subscriptions.push(merge(this.popoverService.resetPositionsChange, this.popoverService.getPositionChange()).subscribe(() => {
1014
- this.resetPosition();
1015
- }), this.popoverService.updatePositionChange().subscribe(() => {
1016
- this.overlayRef?.updatePosition();
1017
- }), this.overlayRef.keydownEvents().subscribe(event => {
1018
- if (event && event.key && normalizeKey(event.key) === Keys.Escape && !hasModifierKey(event)) {
1019
- event.preventDefault();
1020
- this.closePopover();
1021
- }
1022
- }), this.overlayRef.outsidePointerEvents().subscribe(event => {
1023
- // web components (cds-icon) register as outside pointer events, so if the event target is inside the content panel return early
1024
- if (this.elementRef && this.elementRef.nativeElement.contains(event.target)) {
1025
- return;
1026
- }
1027
- // Check if the same element that opened the popover is the same element triggering the outside pointer events (toggle button)
1028
- const isToggleButton = this.popoverService.openEvent &&
1029
- (this.popoverService.openEvent.target.contains(event.target) ||
1030
- this.popoverService.openEvent.target.parentElement.contains(event.target) ||
1031
- this.popoverService.openEvent.target === event.target);
1032
- if (isToggleButton) {
1033
- event.stopPropagation();
1034
- }
1035
- if (this._outsideClickClose || isToggleButton) {
1036
- this.closePopover();
1037
- }
1038
- }));
1039
- }
1040
- resetPosition() {
1041
- if (this.overlayRef) {
1042
- this.overlayRef.updatePositionStrategy(this.positionStrategy);
1043
- this.overlayRef.updatePosition();
1044
- }
1045
- }
1046
- closePopover() {
1047
- if (!this.overlayRef) {
1048
- return;
1049
- }
1050
- this.removeOverlay();
1051
- this.popoverService.open = false;
1052
- const shouldFocusTrigger = this.popoverType !== ClrPopoverType.TOOLTIP &&
1053
- (document.activeElement === document.body ||
1054
- document.activeElement === this.popoverService.anchorElementRef?.nativeElement);
1055
- if (shouldFocusTrigger) {
1056
- this.popoverService.focusAnchor();
1057
- }
1058
- }
1059
- showOverlay() {
1060
- if (!this.overlayRef) {
1061
- this._createOverlayRef();
1062
- }
1063
- if (!this.view && this.template) {
1064
- this.view = this.container.createEmbeddedView(this.template);
1065
- if (!this.elementRef) {
1066
- const [rootNode] = this.view.rootNodes;
1067
- this.elementRef = new ElementRef(rootNode); // So we know where/what to set close focus on
1068
- }
1069
- }
1070
- if (!this.domPortal) {
1071
- this.domPortal = new DomPortal(this.elementRef);
1072
- this.overlayRef.attach(this.domPortal);
1073
- }
1074
- this.popoverService?.anchorElementRef?.nativeElement.scrollIntoView({
1075
- behavior: 'instant',
1076
- block: 'nearest',
1077
- inline: 'nearest',
1078
- });
1079
- this.setupIntersectionObserver();
1080
- setTimeout(() => {
1081
- // Get Scrollable Parents
1082
- this.listenToMouseEvents();
1083
- this.popoverService.popoverVisibleEmit(true);
1084
- if (this.elementRef?.nativeElement?.focus) {
1085
- this.elementRef.nativeElement.focus();
1086
- }
1087
- });
1088
- }
1089
- removeOverlay() {
1090
- this.subscriptions.forEach(s => s.unsubscribe());
1091
- this.subscriptions = [];
1092
- if (this.overlayRef?.hasAttached()) {
1093
- this.overlayRef.detach();
1094
- this.overlayRef.dispose();
1095
- }
1096
- if (this.domPortal?.isAttached) {
1097
- this.domPortal.detach();
1098
- }
1099
- if (this.view) {
1100
- this.view.destroy();
1101
- }
1102
- this.overlayRef = null;
1103
- this.domPortal = null;
1104
- if (this.template) {
1105
- this.elementRef = null;
1106
- }
1107
- this.view = null;
1108
- this.intersectionObserver?.disconnect();
1109
- this.intersectionObserver = null;
1110
- this.popoverService.popoverVisibleEmit(false);
1111
- }
1112
- getScrollableParents(node) {
1113
- let parent = node;
1114
- const overflowScrollKeys = ['auto', 'scroll', 'clip'];
1115
- const scrollableParents = [window.document];
1116
- while (parent && !(parent instanceof HTMLHtmlElement)) {
1117
- if (parent instanceof ShadowRoot) {
1118
- parent = parent.host;
1119
- }
1120
- const { overflowY, overflowX } = window.getComputedStyle(parent);
1121
- if (overflowScrollKeys.includes(overflowY) || overflowScrollKeys.includes(overflowX)) {
1122
- scrollableParents.push(parent);
1123
- }
1124
- parent = parent.parentNode;
1125
- }
1126
- return scrollableParents;
1127
- }
1128
- /**
1129
- * Uses IntersectionObserver to detect when the anchor leaves the screen.
1130
- * This handles the "Close on Scroll" logic much cheaper than getBoundingClientRect.
1131
- */
1132
- setupIntersectionObserver() {
1133
- if (!this.popoverService.anchorElementRef || this.intersectionObserver) {
1134
- return;
1135
- }
1136
- this.intersectionObserver = new IntersectionObserver(entries => {
1137
- entries.forEach(entry => {
1138
- // If the anchor is no longer visible (scrolled out of view)
1139
- if (!entry.isIntersecting && this.popoverService.open) {
1140
- this.zone.run(() => this.closePopover());
1141
- }
1142
- });
1143
- }, { root: null, threshold: 0.8 });
1144
- this.intersectionObserver.observe(this.popoverService.anchorElementRef.nativeElement);
1145
- }
1146
- //Align the popover on scrolling
1147
- listenToMouseEvents() {
1148
- if (!isPlatformBrowser(this.platformId)) {
1149
- return;
1150
- }
1151
- const anchor = this.getRootPopover(this)?.popoverService?.anchorElementRef?.nativeElement;
1152
- const scrollableParents = this.getScrollableParents(anchor);
1153
- this.zone.runOutsideAngular(() => {
1154
- this.subscriptions.push(merge(...scrollableParents.map(parent => fromEvent(parent, 'scroll', { passive: true }))).subscribe(() => {
1155
- if (this._scrollToClose) {
1156
- this.zone.run(() => this.closePopover());
1157
- return;
1158
- }
1159
- this.overlayRef?.updatePosition();
1160
- }));
1161
- });
1162
- }
1163
- getRootPopover(popover) {
1164
- if (popover && popover.parent) {
1165
- return this.getRootPopover(popover.parent);
1166
- }
1167
- return popover;
1168
- }
1169
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverContent, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.TemplateRef, optional: true }, { token: i1$1.OverlayContainer }, { token: ClrPopoverContent, optional: true, skipSelf: true }, { token: i1$1.Overlay }, { token: ClrPopoverService }, { token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
1170
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrPopoverContent, isStandalone: true, selector: "[clrPopoverContent]", inputs: { open: ["clrPopoverContent", "open"], contentAt: ["clrPopoverContentAt", "contentAt"], availablePositions: ["clrPopoverContentAvailablePositions", "availablePositions"], contentType: ["clrPopoverContentType", "contentType"], outsideClickClose: ["clrPopoverContentOutsideClickToClose", "outsideClickClose"], scrollToClose: ["clrPopoverContentScrollToClose", "scrollToClose"] }, ngImport: i0 }); }
1171
- }
1172
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverContent, decorators: [{
1173
- type: Directive,
1174
- args: [{
1175
- selector: '[clrPopoverContent]',
1176
- }]
1177
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.TemplateRef, decorators: [{
1178
- type: Optional
1179
- }] }, { type: i1$1.OverlayContainer }, { type: ClrPopoverContent, decorators: [{
1180
- type: Optional
1181
- }, {
1182
- type: SkipSelf
1183
- }] }, { type: i1$1.Overlay }, { type: ClrPopoverService, decorators: [{
1184
- type: Inject,
1185
- args: [ClrPopoverService]
1186
- }] }, { type: i0.NgZone }, { type: undefined, decorators: [{
1187
- type: Inject,
1188
- args: [PLATFORM_ID]
1189
- }] }], propDecorators: { open: [{
1190
- type: Input,
1191
- args: ['clrPopoverContent']
1192
- }], contentAt: [{
1193
- type: Input,
1194
- args: ['clrPopoverContentAt']
1195
- }], availablePositions: [{
1196
- type: Input,
1197
- args: ['clrPopoverContentAvailablePositions']
1198
- }], contentType: [{
1199
- type: Input,
1200
- args: ['clrPopoverContentType']
1201
- }], outsideClickClose: [{
1202
- type: Input,
1203
- args: ['clrPopoverContentOutsideClickToClose']
1204
- }], scrollToClose: [{
1205
- type: Input,
1206
- args: ['clrPopoverContentScrollToClose']
1207
- }] } });
1208
-
1209
- /*
1210
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1211
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1212
- * This software is released under MIT license.
1213
- * The full license information can be found in LICENSE in the root directory of this project.
1214
- */
1215
- class ClrPopoverAnchor {
1216
- constructor(popoverService, element) {
1217
- popoverService.anchorElementRef = element;
1218
- }
1219
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverAnchor, deps: [{ token: ClrPopoverService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
1220
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrPopoverAnchor, isStandalone: false, selector: "[clrPopoverAnchor]", host: { properties: { "class.clr-anchor": "true" } }, ngImport: i0 }); }
1221
- }
1222
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverAnchor, decorators: [{
1223
- type: Directive,
1224
- args: [{
1225
- selector: '[clrPopoverAnchor]',
1226
- host: {
1227
- '[class.clr-anchor]': 'true',
1228
- },
1229
- standalone: false,
1230
- }]
1231
- }], ctorParameters: () => [{ type: ClrPopoverService }, { type: i0.ElementRef }] });
1232
-
1233
- /*
1234
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1235
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1236
- * This software is released under MIT license.
1237
- * The full license information can be found in LICENSE in the root directory of this project.
1238
- */
1239
- const POPOVER_HOST_ANCHOR = new InjectionToken('POPOVER_HOST_ANCHOR');
1240
-
1241
- /*
1242
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1243
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1244
- * This software is released under MIT license.
1245
- * The full license information can be found in LICENSE in the root directory of this project.
1246
- */
1247
- class ClrStopEscapePropagationDirective {
1248
- constructor(popoverService) {
1249
- this.popoverService = popoverService;
1250
- this.lastOpenChange = null;
1251
- }
1252
- ngOnInit() {
1253
- this.subscription = this.popoverService.openChange.subscribe(open => {
1254
- this.lastOpenChange = open;
1255
- });
1256
- }
1257
- ngOnDestroy() {
1258
- this.subscription?.unsubscribe();
1259
- }
1260
- onEscapeKey(event) {
1261
- if (this.lastOpenChange !== null) {
1262
- if (this.lastOpenChange === false) {
1263
- event.stopPropagation();
1264
- }
1265
- this.lastOpenChange = null;
1266
- }
1267
- }
1268
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrStopEscapePropagationDirective, deps: [{ token: ClrPopoverService }], target: i0.ɵɵFactoryTarget.Directive }); }
1269
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrStopEscapePropagationDirective, isStandalone: true, host: { listeners: { "keyup.escape": "onEscapeKey($event)" } }, ngImport: i0 }); }
1270
- }
1271
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrStopEscapePropagationDirective, decorators: [{
1272
- type: Directive,
1273
- args: [{
1274
- standalone: true,
1275
- }]
1276
- }], ctorParameters: () => [{ type: ClrPopoverService }], propDecorators: { onEscapeKey: [{
1277
- type: HostListener,
1278
- args: ['keyup.escape', ['$event']]
1279
- }] } });
1280
-
1281
- /*
1282
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1283
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1284
- * This software is released under MIT license.
1285
- * The full license information can be found in LICENSE in the root directory of this project.
1286
- */
1287
- class ClrPopoverHostDirective {
1288
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverHostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1289
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrPopoverHostDirective, isStandalone: true, providers: [ClrPopoverService, { provide: POPOVER_HOST_ANCHOR, useExisting: ElementRef }], hostDirectives: [{ directive: ClrStopEscapePropagationDirective }], ngImport: i0 }); }
1290
- }
1291
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverHostDirective, decorators: [{
1292
- type: Directive,
1293
- args: [{
1294
- standalone: true,
1295
- providers: [ClrPopoverService, { provide: POPOVER_HOST_ANCHOR, useExisting: ElementRef }],
1296
- hostDirectives: [ClrStopEscapePropagationDirective],
1297
- }]
1298
- }] });
1299
-
1300
- /*
1301
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1302
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1303
- * This software is released under MIT license.
1304
- * The full license information can be found in LICENSE in the root directory of this project.
1305
- */
1306
- /**********
1307
- *
1308
- * @class ClrIfOpen
1309
- *
1310
- * @description
1311
- * A structural directive that controls whether or not the associated TemplateRef is instantiated or not.
1312
- * It makes use of a Component instance level service: ClrPopoverService to maintain state between itself and the component
1313
- * using it in the component template.
1314
- *
1315
- */
1316
- class ClrIfOpen {
1317
- constructor(popoverService, template, container) {
1318
- this.popoverService = popoverService;
1319
- this.template = template;
1320
- this.container = container;
1321
- /**********
1322
- * @property openChange
1323
- *
1324
- * @description
1325
- * An event emitter that emits when the open property is set to allow for 2way binding when the directive is
1326
- * used with de-structured / de-sugared syntax.
1327
- */
1328
- this.openChange = new EventEmitter(false);
1329
- this.subscriptions = [];
1330
- this.subscriptions.push(popoverService.openChange.subscribe(change => {
1331
- // OPEN before overlay is built
1332
- if (change) {
1333
- container.createEmbeddedView(template);
1334
- this.openChange.emit(change);
1335
- }
1336
- }), popoverService.popoverVisible.subscribe(change => {
1337
- // CLOSE after overlay is destroyed
1338
- if (!change) {
1339
- container.clear();
1340
- this.openChange.emit(change);
1341
- }
1342
- }));
1343
- }
1344
- /**
1345
- * @description
1346
- * A property that gets/sets ClrPopoverService.open with value.
1347
- */
1348
- get open() {
1349
- return this.popoverService.open;
1350
- }
1351
- set open(value) {
1352
- this.popoverService.open = value;
1353
- }
1354
- ngOnDestroy() {
1355
- this.subscriptions.forEach(sub => sub.unsubscribe());
1356
- }
1357
- /**
1358
- * @description
1359
- * Function that takes a boolean value and either created an embedded view for the associated ViewContainerRef or,
1360
- * Clears all views from the ViewContainerRef
1361
- *
1362
- * @param value
1363
- */
1364
- updateView(value) {
1365
- if (value) {
1366
- this.container.createEmbeddedView(this.template);
1367
- }
1368
- else {
1369
- this.container.clear();
1370
- }
1371
- }
1372
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrIfOpen, deps: [{ token: ClrPopoverService }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
1373
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrIfOpen, isStandalone: true, selector: "[clrIfOpen]", inputs: { open: ["clrIfOpen", "open"] }, outputs: { openChange: "clrIfOpenChange" }, ngImport: i0 }); }
1374
- }
1375
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrIfOpen, decorators: [{
1376
- type: Directive,
1377
- args: [{
1378
- selector: '[clrIfOpen]',
1379
- }]
1380
- }], ctorParameters: () => [{ type: ClrPopoverService }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }], propDecorators: { openChange: [{
1381
- type: Output,
1382
- args: ['clrIfOpenChange']
1383
- }], open: [{
1384
- type: Input,
1385
- args: ['clrIfOpen']
1386
- }] } });
1387
-
1388
- /*
1389
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1390
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1391
- * This software is released under MIT license.
1392
- * The full license information can be found in LICENSE in the root directory of this project.
1393
- */
1394
- class ClrPopoverCloseButton {
1395
- constructor(elementRef, popoverService) {
1396
- this.elementRef = elementRef;
1397
- this.popoverService = popoverService;
1398
- this.closeChange = new EventEmitter();
1399
- this.subscriptions = [];
1400
- this.subscriptions.push(popoverService.openChange.pipe(filter(value => !value)).subscribe(() => {
1401
- this.closeChange.next();
1402
- }));
1403
- }
1404
- handleClick(event) {
1405
- this.popoverService.toggleWithEvent(event);
1406
- this.popoverService.focusAnchor();
1407
- }
1408
- ngAfterViewInit() {
1409
- this.popoverService.closeButtonRef = this.elementRef;
1410
- }
1411
- ngOnDestroy() {
1412
- this.subscriptions.forEach(sub => sub.unsubscribe());
1413
- }
1414
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverCloseButton, deps: [{ token: i0.ElementRef }, { token: ClrPopoverService }], target: i0.ɵɵFactoryTarget.Directive }); }
1415
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrPopoverCloseButton, isStandalone: false, selector: "[clrPopoverCloseButton]", outputs: { closeChange: "clrPopoverOnCloseChange" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class.clr-smart-close-button": "true" } }, ngImport: i0 }); }
1416
- }
1417
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverCloseButton, decorators: [{
1418
- type: Directive,
1419
- args: [{
1420
- selector: '[clrPopoverCloseButton]',
1421
- host: {
1422
- '[class.clr-smart-close-button]': 'true',
1423
- },
1424
- standalone: false,
1425
- }]
1426
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ClrPopoverService }], propDecorators: { closeChange: [{
1427
- type: Output,
1428
- args: ['clrPopoverOnCloseChange']
1429
- }], handleClick: [{
1430
- type: HostListener,
1431
- args: ['click', ['$event']]
1432
- }] } });
1433
-
1434
- /*
1435
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1436
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1437
- * This software is released under MIT license.
1438
- * The full license information can be found in LICENSE in the root directory of this project.
1439
- */
1440
- class ClrPopoverOpenCloseButton {
1441
- constructor(popoverService) {
1442
- this.popoverService = popoverService;
1443
- this.openCloseChange = new EventEmitter();
1444
- this.subscriptions = [];
1445
- this.subscriptions.push(popoverService.openChange.subscribe(change => {
1446
- this.openCloseChange.next(change);
1447
- }));
1448
- }
1449
- handleClick(event) {
1450
- this.popoverService.toggleWithEvent(event);
1451
- }
1452
- ngOnDestroy() {
1453
- this.subscriptions.forEach(sub => sub.unsubscribe());
1454
- }
1455
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverOpenCloseButton, deps: [{ token: ClrPopoverService }], target: i0.ɵɵFactoryTarget.Directive }); }
1456
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrPopoverOpenCloseButton, isStandalone: false, selector: "[clrPopoverOpenCloseButton]", outputs: { openCloseChange: "clrPopoverOpenCloseChange" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class.clr-smart-open-close": "true" } }, ngImport: i0 }); }
1457
- }
1458
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverOpenCloseButton, decorators: [{
1459
- type: Directive,
1460
- args: [{
1461
- selector: '[clrPopoverOpenCloseButton]',
1462
- host: {
1463
- '[class.clr-smart-open-close]': 'true',
1464
- },
1465
- standalone: false,
1466
- }]
1467
- }], ctorParameters: () => [{ type: ClrPopoverService }], propDecorators: { openCloseChange: [{
1468
- type: Output,
1469
- args: ['clrPopoverOpenCloseChange']
1470
- }], handleClick: [{
1471
- type: HostListener,
1472
- args: ['click', ['$event']]
1473
- }] } });
1474
-
1475
- /*
1476
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1477
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1478
- * This software is released under MIT license.
1479
- * The full license information can be found in LICENSE in the root directory of this project.
1480
- */
1481
- class ClrPopoverModuleNext {
1482
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverModuleNext, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1483
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverModuleNext, declarations: [ClrPopoverAnchor, ClrPopoverCloseButton, ClrPopoverOpenCloseButton], imports: [ClrPopoverContent, ClrIfOpen], exports: [ClrPopoverAnchor, ClrPopoverCloseButton, ClrPopoverOpenCloseButton, ClrPopoverContent, ClrIfOpen] }); }
1484
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverModuleNext }); }
1485
- }
1486
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverModuleNext, decorators: [{
1487
- type: NgModule,
1488
- args: [{
1489
- imports: [ClrPopoverContent, ClrIfOpen],
1490
- declarations: [ClrPopoverAnchor, ClrPopoverCloseButton, ClrPopoverOpenCloseButton],
1491
- exports: [ClrPopoverAnchor, ClrPopoverCloseButton, ClrPopoverOpenCloseButton, ClrPopoverContent, ClrIfOpen],
1492
- }]
1493
- }] });
1494
-
1495
- /*
1496
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1497
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1498
- * This software is released under MIT license.
1499
- * The full license information can be found in LICENSE in the root directory of this project.
1500
- */
5
+ import { NgModule } from '@angular/core';
6
+ import { ClrSignpostModule } from '@clr/angular/popover/signpost';
7
+ export * from '@clr/angular/popover/signpost';
8
+ import { ClrTooltipModule } from '@clr/angular/popover/tooltip';
9
+ export * from '@clr/angular/popover/tooltip';
1501
10
 
1502
11
  /*
1503
12
  * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
@@ -1507,745 +16,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
1507
16
  */
1508
17
  class ClrPopoverModule {
1509
18
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1510
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverModule, exports: [ClrDropdownModule$1, ClrSignpostModule$1, ClrTooltipModule$1] }); }
1511
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverModule, imports: [ClrDropdownModule$1, ClrSignpostModule$1, ClrTooltipModule$1] }); }
19
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverModule, exports: [ClrDropdownModule, ClrSignpostModule, ClrTooltipModule] }); }
20
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverModule, imports: [ClrDropdownModule, ClrSignpostModule, ClrTooltipModule] }); }
1512
21
  }
1513
22
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrPopoverModule, decorators: [{
1514
23
  type: NgModule,
1515
24
  args: [{
1516
- exports: [ClrDropdownModule$1, ClrSignpostModule$1, ClrTooltipModule$1],
1517
- }]
1518
- }] });
1519
-
1520
- /*
1521
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1522
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1523
- * This software is released under MIT license.
1524
- * The full license information can be found in LICENSE in the root directory of this project.
1525
- */
1526
- class SignpostFocusManager {
1527
- set triggerEl(value) {
1528
- this._triggerEl = value;
1529
- }
1530
- focusTrigger() {
1531
- if (this._triggerEl) {
1532
- this._triggerEl.focus();
1533
- }
1534
- }
1535
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SignpostFocusManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
1536
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SignpostFocusManager }); }
1537
- }
1538
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SignpostFocusManager, decorators: [{
1539
- type: Injectable
1540
- }] });
1541
-
1542
- /*
1543
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1544
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1545
- * This software is released under MIT license.
1546
- * The full license information can be found in LICENSE in the root directory of this project.
1547
- */
1548
- class SignpostIdService {
1549
- constructor() {
1550
- this._id = new Subject();
1551
- }
1552
- get id() {
1553
- return this._id.asObservable();
1554
- }
1555
- setId(id) {
1556
- this._id.next(id);
1557
- }
1558
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SignpostIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
1559
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SignpostIdService }); }
1560
- }
1561
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SignpostIdService, decorators: [{
1562
- type: Injectable
1563
- }] });
1564
-
1565
- /*
1566
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1567
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1568
- * This software is released under MIT license.
1569
- * The full license information can be found in LICENSE in the root directory of this project.
1570
- */
1571
- /*********
1572
- *
1573
- * @description
1574
- * A Directive added to the ClrSignpost Trigger button that will call the ClrSignpost.toggle() function to hide/show the
1575
- * ClrSignpostContent.
1576
- *
1577
- */
1578
- class ClrSignpostTrigger {
1579
- constructor(popoverService, el, signpostIdService, signpostFocusManager, document, platformId) {
1580
- this.popoverService = popoverService;
1581
- this.el = el;
1582
- this.signpostIdService = signpostIdService;
1583
- this.signpostFocusManager = signpostFocusManager;
1584
- this.platformId = platformId;
1585
- this.ariaExpanded = false;
1586
- this.subscriptions = [];
1587
- this.document = document;
1588
- }
1589
- ngOnInit() {
1590
- this.popoverService.anchorElementRef = this.el;
1591
- this.signpostFocusManager.triggerEl = this.el.nativeElement;
1592
- this.subscriptions.push(this.popoverService.openChange.subscribe((isOpen) => {
1593
- this.ariaExpanded = isOpen;
1594
- const prevIsOpen = this.isOpen;
1595
- this.isOpen = isOpen;
1596
- // openChange fires false on initialization because signpost starts as closed by default
1597
- // but we shouldn't focus on that initial false value
1598
- // we should focus back only if it's closed after being opened
1599
- if (!this.isOpen && prevIsOpen) {
1600
- this.focusOnClose();
1601
- }
1602
- }), this.signpostIdService.id.subscribe(idChange => (this.ariaControl = idChange)));
1603
- }
1604
- ngOnDestroy() {
1605
- this.subscriptions.forEach((sub) => sub.unsubscribe());
1606
- }
1607
- /**********
1608
- *
1609
- * @description
1610
- * click handler for the ClrSignpost trigger button used to hide/show ClrSignpostContent.
1611
- */
1612
- onSignpostTriggerClick(event) {
1613
- this.popoverService.toggleWithEvent(event);
1614
- }
1615
- focusOnClose() {
1616
- if (!isPlatformBrowser(this.platformId)) {
1617
- return;
1618
- }
1619
- // we have to set the focus back on the trigger only if the focus is reset back to the body element
1620
- // if the focus is on another element, we are not allowed to move that focus back to this trigger again.
1621
- if (!this.isOpen && this.document.activeElement === this.document.body) {
1622
- this.signpostFocusManager.focusTrigger();
1623
- }
1624
- }
1625
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrSignpostTrigger, deps: [{ token: i2.ClrPopoverService }, { token: i0.ElementRef }, { token: SignpostIdService }, { token: SignpostFocusManager }, { token: DOCUMENT }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
1626
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrSignpostTrigger, isStandalone: false, selector: "[clrSignpostTrigger]", host: { listeners: { "click": "onSignpostTriggerClick($event)" }, properties: { "attr.aria-expanded": "ariaExpanded", "attr.aria-controls": "ariaControl", "class.active": "isOpen" }, classAttribute: "signpost-trigger" }, ngImport: i0 }); }
1627
- }
1628
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrSignpostTrigger, decorators: [{
1629
- type: Directive,
1630
- args: [{
1631
- selector: '[clrSignpostTrigger]',
1632
- host: {
1633
- class: 'signpost-trigger',
1634
- '[attr.aria-expanded]': 'ariaExpanded',
1635
- '[attr.aria-controls]': 'ariaControl',
1636
- '[class.active]': 'isOpen',
1637
- },
1638
- standalone: false,
1639
- }]
1640
- }], ctorParameters: () => [{ type: i2.ClrPopoverService }, { type: i0.ElementRef }, { type: SignpostIdService }, { type: SignpostFocusManager }, { type: undefined, decorators: [{
1641
- type: Inject,
1642
- args: [DOCUMENT]
1643
- }] }, { type: undefined, decorators: [{
1644
- type: Inject,
1645
- args: [PLATFORM_ID]
1646
- }] }], propDecorators: { onSignpostTriggerClick: [{
1647
- type: HostListener,
1648
- args: ['click', ['$event']]
1649
- }] } });
1650
-
1651
- /*
1652
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1653
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1654
- * This software is released under MIT license.
1655
- * The full license information can be found in LICENSE in the root directory of this project.
1656
- */
1657
- /*********
1658
- *
1659
- * @class ClrSignpost
1660
- *
1661
- * @description
1662
- * Class used to configure and control the state of a ClrSignpost and its associated ClrSignpostContent.
1663
- * It supports the clrPosition with a 'right-middle' default.
1664
- *
1665
- */
1666
- class ClrSignpost {
1667
- constructor(commonStrings) {
1668
- this.commonStrings = commonStrings;
1669
- /**********
1670
- * @property useCustomTrigger
1671
- *
1672
- * @description
1673
- * Flag used to determine if we need to use the default trigger or a user supplied trigger element.
1674
- *
1675
- */
1676
- this.useCustomTrigger = false;
1677
- }
1678
- /**********
1679
- * @property signPostTrigger
1680
- *
1681
- * @description
1682
- * Uses ContentChild to check for a user supplied element with the ClrSignpostTrigger on it.
1683
- *
1684
- */
1685
- set customTrigger(trigger) {
1686
- this.useCustomTrigger = !!trigger;
1687
- }
1688
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrSignpost, deps: [{ token: i1.ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
1689
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrSignpost, isStandalone: false, selector: "clr-signpost", inputs: { signpostTriggerAriaLabel: ["clrSignpostTriggerAriaLabel", "signpostTriggerAriaLabel"] }, host: { properties: { "class.signpost": "true" } }, providers: [SignpostFocusManager, SignpostIdService], queries: [{ propertyName: "customTrigger", first: true, predicate: ClrSignpostTrigger, descendants: true }], hostDirectives: [{ directive: i2.ClrPopoverHostDirective }], ngImport: i0, template: `
1690
- @if (!useCustomTrigger) {
1691
- <button
1692
- type="button"
1693
- class="signpost-action btn btn-sm btn-icon btn-link"
1694
- clrSignpostTrigger
1695
- [attr.aria-label]="signpostTriggerAriaLabel || commonStrings.keys.signpostToggle"
1696
- >
1697
- <cds-icon shape="info-circle" [attr.title]="commonStrings.keys.info"></cds-icon>
1698
- </button>
1699
- }
1700
-
1701
- <ng-content></ng-content>
1702
- `, isInline: true, dependencies: [{ kind: "component", type: i3.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: ClrSignpostTrigger, selector: "[clrSignpostTrigger]" }] }); }
1703
- }
1704
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrSignpost, decorators: [{
1705
- type: Component,
1706
- args: [{
1707
- selector: 'clr-signpost',
1708
- template: `
1709
- @if (!useCustomTrigger) {
1710
- <button
1711
- type="button"
1712
- class="signpost-action btn btn-sm btn-icon btn-link"
1713
- clrSignpostTrigger
1714
- [attr.aria-label]="signpostTriggerAriaLabel || commonStrings.keys.signpostToggle"
1715
- >
1716
- <cds-icon shape="info-circle" [attr.title]="commonStrings.keys.info"></cds-icon>
1717
- </button>
1718
- }
1719
-
1720
- <ng-content></ng-content>
1721
- `,
1722
- host: { '[class.signpost]': 'true' },
1723
- providers: [SignpostFocusManager, SignpostIdService],
1724
- hostDirectives: [ClrPopoverHostDirective$1],
1725
- standalone: false,
1726
- }]
1727
- }], ctorParameters: () => [{ type: i1.ClrCommonStringsService }], propDecorators: { signpostTriggerAriaLabel: [{
1728
- type: Input,
1729
- args: ['clrSignpostTriggerAriaLabel']
1730
- }], customTrigger: [{
1731
- type: ContentChild,
1732
- args: [ClrSignpostTrigger]
1733
- }] } });
1734
-
1735
- /*
1736
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1737
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1738
- * This software is released under MIT license.
1739
- * The full license information can be found in LICENSE in the root directory of this project.
1740
- */
1741
- class ClrSignpostContent {
1742
- constructor(parentHost, element, commonStrings, signpostIdService, signpostFocusManager, platformId, document, popoverService, popoverContent) {
1743
- this.element = element;
1744
- this.commonStrings = commonStrings;
1745
- this.signpostFocusManager = signpostFocusManager;
1746
- this.platformId = platformId;
1747
- this.document = document;
1748
- this.popoverService = popoverService;
1749
- this.popoverContent = popoverContent;
1750
- this.signpostContentId = uniqueIdFactory();
1751
- this._position = ClrPopoverPosition$1.RIGHT_MIDDLE;
1752
- if (!parentHost) {
1753
- throw new Error('clr-signpost-content should only be used inside of a clr-signpost');
1754
- }
1755
- // Defaults
1756
- signpostIdService.setId(this.signpostContentId);
1757
- popoverService.panelClass.push('clr-signpost-container');
1758
- popoverContent.contentType = ClrPopoverType$1.SIGNPOST;
1759
- }
1760
- /*********
1761
- *
1762
- * @description
1763
- * A setter for the position of the ClrSignpostContent popover. This is a combination of the following:
1764
- * - anchorPoint - where on the trigger to anchor the ClrSignpostContent
1765
- * - popoverPoint - where on the ClrSignpostContent container to align with the anchorPoint
1766
- * - offsetY - where on the Y axis to align the ClrSignpostContent so it meets specs
1767
- * - offsetX - where on the X axis to align the ClrSignpostContent so it meets specs
1768
- * There are 12 possible positions to place a ClrSignpostContent container:
1769
- * - top-left
1770
- * - top-middle
1771
- * - top-right
1772
- * - right-top
1773
- * - right-middle
1774
- * - right-bottom
1775
- * - bottom-right
1776
- * - bottom-middle
1777
- * - bottom-left
1778
- * - left-bottom
1779
- * - left-middle
1780
- * - left-top
1781
- *
1782
- * I think of it as follows for 'top-left' -> CONTAINER_SIDE-SIDE_POSITION. In this case CONTAINER_SIDE is 'top'
1783
- * meaning the top of the trigger icon (above the icon that hides/shows) the ClrSignpostContent. And, SIDE_POSITION
1784
- * is 'left' meaning two things: 1) the ClrSignpostContent container extends to the left and 2) the 'arrow/pointer'
1785
- * linking the SignpostContent to the trigger points down at the horizontal center of the trigger icon.
1786
- *
1787
- * @param newPosition
1788
- */
1789
- get position() {
1790
- return this._position;
1791
- }
1792
- set position(position) {
1793
- const posIndex = SIGNPOST_POSITIONS$1.indexOf(position);
1794
- this._position = position && posIndex > -1 ? SIGNPOST_POSITIONS$1[posIndex] : ClrPopoverPosition$1.RIGHT_MIDDLE;
1795
- this.popoverContent.contentAt = this._position;
1796
- }
1797
- /*
1798
- * Fallback to hide when *clrIfOpen is not being used
1799
- */
1800
- get isOffScreen() {
1801
- return !this.popoverService.open;
1802
- }
1803
- /**********
1804
- *
1805
- * @description
1806
- * Close function that uses the signpost instance to toggle the state of the content popover.
1807
- *
1808
- */
1809
- close() {
1810
- this.popoverService.open = false;
1811
- }
1812
- ngAfterViewInit() {
1813
- this.popoverService.closeButtonRef = this.closeButton;
1814
- this.closeButton.nativeElement.focus();
1815
- }
1816
- onKeyDown(event) {
1817
- if (event.key === 'Tab') {
1818
- const focusableElements = this.getFocusableElements(this.element.nativeElement);
1819
- // take the first element when SHIFT+TAB or last when only TAB
1820
- const focusableElementIndex = event.shiftKey ? 0 : focusableElements.length - 1;
1821
- if (document.activeElement === focusableElements[focusableElementIndex]) {
1822
- event.preventDefault();
1823
- this.popoverService.open = false;
1824
- }
1825
- }
1826
- }
1827
- ngOnDestroy() {
1828
- if (isPlatformBrowser(this.platformId) && this.element.nativeElement.contains(this.document.activeElement)) {
1829
- this.signpostFocusManager.focusTrigger();
1830
- }
1831
- }
1832
- getFocusableElements(element) {
1833
- return Array.from(element.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
1834
- }
1835
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrSignpostContent, deps: [{ token: POPOVER_HOST_ANCHOR$1, optional: true }, { token: i0.ElementRef }, { token: i1.ClrCommonStringsService }, { token: SignpostIdService }, { token: SignpostFocusManager }, { token: PLATFORM_ID }, { token: DOCUMENT }, { token: i2.ClrPopoverService }, { token: i2.ClrPopoverContent }], target: i0.ɵɵFactoryTarget.Component }); }
1836
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrSignpostContent, isStandalone: false, selector: "clr-signpost-content", inputs: { signpostCloseAriaLabel: ["clrSignpostCloseAriaLabel", "signpostCloseAriaLabel"], position: ["clrPosition", "position"] }, host: { attributes: { "role": "dialog" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.signpost-content": "true", "id": "signpostContentId", "class.is-off-screen": "this.isOffScreen" } }, viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: i2.ClrPopoverContent }], ngImport: i0, template: `
1837
- <div class="signpost-wrap">
1838
- <div class="popover-pointer"></div>
1839
- <div class="signpost-content-header">
1840
- <ng-content select="clr-signpost-title"></ng-content>
1841
- <button
1842
- #closeButton
1843
- type="button"
1844
- [attr.aria-label]="signpostCloseAriaLabel || commonStrings.keys.signpostClose"
1845
- class="signpost-action close"
1846
- (click)="close()"
1847
- [attr.aria-controls]="signpostContentId"
1848
- >
1849
- <cds-icon shape="window-close" [attr.title]="commonStrings.keys.close"></cds-icon>
1850
- </button>
1851
- </div>
1852
- <div class="signpost-content-body" tabindex="0">
1853
- <ng-content></ng-content>
1854
- </div>
1855
- </div>
1856
- `, isInline: true, dependencies: [{ kind: "component", type: i3.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }] }); }
1857
- }
1858
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrSignpostContent, decorators: [{
1859
- type: Component,
1860
- args: [{
1861
- selector: 'clr-signpost-content',
1862
- template: `
1863
- <div class="signpost-wrap">
1864
- <div class="popover-pointer"></div>
1865
- <div class="signpost-content-header">
1866
- <ng-content select="clr-signpost-title"></ng-content>
1867
- <button
1868
- #closeButton
1869
- type="button"
1870
- [attr.aria-label]="signpostCloseAriaLabel || commonStrings.keys.signpostClose"
1871
- class="signpost-action close"
1872
- (click)="close()"
1873
- [attr.aria-controls]="signpostContentId"
1874
- >
1875
- <cds-icon shape="window-close" [attr.title]="commonStrings.keys.close"></cds-icon>
1876
- </button>
1877
- </div>
1878
- <div class="signpost-content-body" tabindex="0">
1879
- <ng-content></ng-content>
1880
- </div>
1881
- </div>
1882
- `,
1883
- host: {
1884
- '[class.signpost-content]': 'true',
1885
- '[id]': 'signpostContentId',
1886
- role: 'dialog',
1887
- },
1888
- standalone: false,
1889
- hostDirectives: [ClrPopoverContent$1],
1890
- }]
1891
- }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
1892
- type: Optional
1893
- }, {
1894
- type: Inject,
1895
- args: [POPOVER_HOST_ANCHOR$1]
1896
- }] }, { type: i0.ElementRef }, { type: i1.ClrCommonStringsService }, { type: SignpostIdService }, { type: SignpostFocusManager }, { type: undefined, decorators: [{
1897
- type: Inject,
1898
- args: [PLATFORM_ID]
1899
- }] }, { type: Document, decorators: [{
1900
- type: Inject,
1901
- args: [DOCUMENT]
1902
- }] }, { type: i2.ClrPopoverService }, { type: i2.ClrPopoverContent }], propDecorators: { signpostCloseAriaLabel: [{
1903
- type: Input,
1904
- args: ['clrSignpostCloseAriaLabel']
1905
- }], closeButton: [{
1906
- type: ViewChild,
1907
- args: ['closeButton', { read: ElementRef }]
1908
- }], position: [{
1909
- type: Input,
1910
- args: ['clrPosition']
1911
- }], isOffScreen: [{
1912
- type: HostBinding,
1913
- args: ['class.is-off-screen']
1914
- }], onKeyDown: [{
1915
- type: HostListener,
1916
- args: ['keydown', ['$event']]
1917
- }] } });
1918
-
1919
- /*
1920
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1921
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1922
- * This software is released under MIT license.
1923
- * The full license information can be found in LICENSE in the root directory of this project.
1924
- */
1925
- class ClrSignpostTitle {
1926
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrSignpostTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1927
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrSignpostTitle, isStandalone: false, selector: "clr-signpost-title", host: { properties: { "class.signpost-title": "true" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
1928
- }
1929
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrSignpostTitle, decorators: [{
1930
- type: Component,
1931
- args: [{
1932
- selector: 'clr-signpost-title',
1933
- template: `<ng-content></ng-content>`,
1934
- host: { '[class.signpost-title]': 'true' },
1935
- standalone: false,
1936
- }]
1937
- }] });
1938
-
1939
- /*
1940
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1941
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1942
- * This software is released under MIT license.
1943
- * The full license information can be found in LICENSE in the root directory of this project.
1944
- */
1945
- const CLR_SIGNPOST_DIRECTIVES = [
1946
- ClrSignpost,
1947
- ClrSignpostContent,
1948
- ClrSignpostTrigger,
1949
- ClrSignpostTitle,
1950
- ];
1951
- class ClrSignpostModule {
1952
- constructor() {
1953
- ClarityIcons.addIcons(windowCloseIcon, infoCircleIcon);
1954
- }
1955
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrSignpostModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1956
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: ClrSignpostModule, declarations: [ClrSignpost,
1957
- ClrSignpostContent,
1958
- ClrSignpostTrigger,
1959
- ClrSignpostTitle], imports: [CommonModule, ClrIcon, ClrFocusOnViewInitModule, _lrClrPopoverModuleNext, ClrIfOpen$1], exports: [ClrSignpost,
1960
- ClrSignpostContent,
1961
- ClrSignpostTrigger,
1962
- ClrSignpostTitle, ClrIfOpen$1] }); }
1963
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrSignpostModule, imports: [CommonModule, ClrIcon, ClrFocusOnViewInitModule, _lrClrPopoverModuleNext] }); }
1964
- }
1965
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrSignpostModule, decorators: [{
1966
- type: NgModule,
1967
- args: [{
1968
- imports: [CommonModule, ClrIcon, ClrFocusOnViewInitModule, _lrClrPopoverModuleNext, ClrIfOpen$1],
1969
- declarations: [CLR_SIGNPOST_DIRECTIVES],
1970
- exports: [CLR_SIGNPOST_DIRECTIVES, ClrIfOpen$1],
1971
- }]
1972
- }], ctorParameters: () => [] });
1973
-
1974
- /*
1975
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1976
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1977
- * This software is released under MIT license.
1978
- * The full license information can be found in LICENSE in the root directory of this project.
1979
- */
1980
-
1981
- /*
1982
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
1983
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
1984
- * This software is released under MIT license.
1985
- * The full license information can be found in LICENSE in the root directory of this project.
1986
- */
1987
- class TooltipIdService {
1988
- constructor() {
1989
- this._id = new Subject();
1990
- }
1991
- get id() {
1992
- return this._id.asObservable();
1993
- }
1994
- updateId(id) {
1995
- this._id.next(id);
1996
- }
1997
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TooltipIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
1998
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TooltipIdService }); }
1999
- }
2000
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TooltipIdService, decorators: [{
2001
- type: Injectable
2002
- }] });
2003
-
2004
- /*
2005
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
2006
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
2007
- * This software is released under MIT license.
2008
- * The full license information can be found in LICENSE in the root directory of this project.
2009
- */
2010
- class TooltipMouseService {
2011
- constructor(popoverService) {
2012
- this.popoverService = popoverService;
2013
- this.mouseOutDelay = 100;
2014
- }
2015
- onMouseEnterTrigger() {
2016
- this.mouseOverTrigger = true;
2017
- this.popoverService.open = true;
2018
- }
2019
- onMouseLeaveTrigger() {
2020
- this.mouseOverTrigger = false;
2021
- this.hideIfMouseOut();
2022
- }
2023
- onMouseEnterContent() {
2024
- this.mouseOverContent = true;
2025
- }
2026
- onMouseLeaveContent() {
2027
- this.mouseOverContent = false;
2028
- this.hideIfMouseOut();
2029
- }
2030
- hideIfMouseOut() {
2031
- // A zero timeout is used so that the code has a chance to update
2032
- // the `mouseOverContent` property after the user moves the mouse from the trigger to the content.
2033
- setTimeout(() => {
2034
- if (!this.mouseOverTrigger && !this.mouseOverContent) {
2035
- this.popoverService.open = false;
2036
- }
2037
- }, this.mouseOutDelay);
2038
- }
2039
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TooltipMouseService, deps: [{ token: i2.ClrPopoverService }], target: i0.ɵɵFactoryTarget.Injectable }); }
2040
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TooltipMouseService }); }
2041
- }
2042
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TooltipMouseService, decorators: [{
2043
- type: Injectable
2044
- }], ctorParameters: () => [{ type: i2.ClrPopoverService }] });
2045
-
2046
- /*
2047
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
2048
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
2049
- * This software is released under MIT license.
2050
- * The full license information can be found in LICENSE in the root directory of this project.
2051
- */
2052
- class ClrTooltip {
2053
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2054
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrTooltip, isStandalone: false, selector: "clr-tooltip", host: { properties: { "class.clr-tooltip-container": "true" } }, providers: [TooltipIdService, TooltipMouseService], hostDirectives: [{ directive: i2.ClrPopoverHostDirective }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
2055
- }
2056
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTooltip, decorators: [{
2057
- type: Component,
2058
- args: [{
2059
- selector: 'clr-tooltip',
2060
- template: `<ng-content></ng-content>`,
2061
- host: {
2062
- '[class.clr-tooltip-container]': 'true',
2063
- },
2064
- providers: [TooltipIdService, TooltipMouseService],
2065
- hostDirectives: [ClrPopoverHostDirective$1],
2066
- standalone: false,
2067
- }]
2068
- }] });
2069
-
2070
- /*
2071
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
2072
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
2073
- * This software is released under MIT license.
2074
- * The full license information can be found in LICENSE in the root directory of this project.
2075
- */
2076
- class ClrTooltipTrigger {
2077
- constructor(popoverService, tooltipIdService, tooltipMouseService, element) {
2078
- this.popoverService = popoverService;
2079
- this.tooltipMouseService = tooltipMouseService;
2080
- this.subs = [];
2081
- // The aria-described by comes from the id of content. It
2082
- this.subs.push(tooltipIdService.id.subscribe(tooltipId => (this.ariaDescribedBy = tooltipId)));
2083
- popoverService.anchorElementRef = element;
2084
- }
2085
- ngOnDestroy() {
2086
- this.subs.forEach(sub => sub.unsubscribe());
2087
- }
2088
- showTooltip() {
2089
- this.popoverService.open = true;
2090
- }
2091
- hideTooltip() {
2092
- this.popoverService.open = false;
2093
- }
2094
- onMouseEnter() {
2095
- this.tooltipMouseService.onMouseEnterTrigger();
2096
- }
2097
- onMouseLeave() {
2098
- this.tooltipMouseService.onMouseLeaveTrigger();
2099
- }
2100
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTooltipTrigger, deps: [{ token: i2.ClrPopoverService }, { token: TooltipIdService }, { token: TooltipMouseService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
2101
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrTooltipTrigger, isStandalone: false, selector: "[clrTooltipTrigger]", host: { attributes: { "tabindex": "0" }, listeners: { "focus": "showTooltip()", "blur": "hideTooltip()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class.tooltip-trigger": "true", "attr.aria-describedby": "ariaDescribedBy", "attr.role": "\"button\"" } }, ngImport: i0 }); }
2102
- }
2103
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTooltipTrigger, decorators: [{
2104
- type: Directive,
2105
- args: [{
2106
- selector: '[clrTooltipTrigger]',
2107
- host: {
2108
- tabindex: '0',
2109
- '[class.tooltip-trigger]': 'true',
2110
- '[attr.aria-describedby]': 'ariaDescribedBy',
2111
- '[attr.role]': '"button"',
2112
- },
2113
- standalone: false,
2114
- }]
2115
- }], ctorParameters: () => [{ type: i2.ClrPopoverService }, { type: TooltipIdService }, { type: TooltipMouseService }, { type: i0.ElementRef }], propDecorators: { showTooltip: [{
2116
- type: HostListener,
2117
- args: ['focus']
2118
- }], hideTooltip: [{
2119
- type: HostListener,
2120
- args: ['blur']
2121
- }], onMouseEnter: [{
2122
- type: HostListener,
2123
- args: ['mouseenter']
2124
- }], onMouseLeave: [{
2125
- type: HostListener,
2126
- args: ['mouseleave']
2127
- }] } });
2128
-
2129
- /*
2130
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
2131
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
2132
- * This software is released under MIT license.
2133
- * The full license information can be found in LICENSE in the root directory of this project.
2134
- */
2135
- const SIZES = ['xs', 'sm', 'md', 'lg'];
2136
- const defaultPosition = ClrPopoverPosition$1.RIGHT;
2137
- const defaultSize = 'sm';
2138
- class ClrTooltipContent {
2139
- constructor(parentHost, tooltipIdService, el, renderer, popoverService, tooltipMouseService, popoverContent) {
2140
- this.tooltipIdService = tooltipIdService;
2141
- this.el = el;
2142
- this.renderer = renderer;
2143
- this.tooltipMouseService = tooltipMouseService;
2144
- this.popoverContent = popoverContent;
2145
- popoverService.panelClass.push('clr-tooltip-container');
2146
- popoverContent.contentType = ClrPopoverType$1.TOOLTIP;
2147
- popoverContent.scrollToClose = true;
2148
- if (!parentHost) {
2149
- throw new Error('clr-tooltip-content should only be used inside of a clr-tooltip');
2150
- }
2151
- // Set the default id in case consumer does not supply a custom id.
2152
- this.id = uniqueIdFactory();
2153
- }
2154
- get id() {
2155
- return this._id;
2156
- }
2157
- set id(value) {
2158
- const id = value || '';
2159
- this._id = id;
2160
- this.tooltipIdService.updateId(id);
2161
- }
2162
- get position() {
2163
- return this._position;
2164
- }
2165
- set position(value) {
2166
- const posIndex = TOOLTIP_POSITIONS$1.indexOf(value);
2167
- this._position = value && posIndex > -1 ? TOOLTIP_POSITIONS$1[posIndex] : defaultPosition;
2168
- this.popoverContent.contentAt = this._position;
2169
- }
2170
- get size() {
2171
- return this._size;
2172
- }
2173
- set size(value) {
2174
- const oldSize = this._size;
2175
- const newSize = SIZES.includes(value) ? value : defaultSize;
2176
- this._size = newSize;
2177
- this.updateCssClass({ oldClass: `tooltip-${oldSize}`, newClass: `tooltip-${newSize}` });
2178
- }
2179
- ngOnInit() {
2180
- this.size = this.size || defaultSize;
2181
- this.position = this.position || defaultPosition;
2182
- }
2183
- onMouseEnter() {
2184
- this.tooltipMouseService.onMouseEnterContent();
2185
- }
2186
- onMouseLeave() {
2187
- this.tooltipMouseService.onMouseLeaveContent();
2188
- }
2189
- updateCssClass({ oldClass, newClass }) {
2190
- this.renderer.removeClass(this.el.nativeElement, oldClass);
2191
- this.renderer.addClass(this.el.nativeElement, newClass);
2192
- }
2193
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTooltipContent, deps: [{ token: POPOVER_HOST_ANCHOR$1, optional: true }, { token: TooltipIdService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.ClrPopoverService }, { token: TooltipMouseService }, { token: i2.ClrPopoverContent }], target: i0.ɵɵFactoryTarget.Component }); }
2194
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrTooltipContent, isStandalone: false, selector: "clr-tooltip-content", inputs: { id: "id", position: ["clrPosition", "position"], size: ["clrSize", "size"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class.tooltip-content": "true", "style.opacity": "1", "attr.role": "\"tooltip\"", "id": "id" } }, hostDirectives: [{ directive: i2.ClrPopoverContent }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
2195
- }
2196
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTooltipContent, decorators: [{
2197
- type: Component,
2198
- args: [{
2199
- selector: 'clr-tooltip-content',
2200
- template: `<ng-content></ng-content>`,
2201
- host: {
2202
- '[class.tooltip-content]': 'true',
2203
- '[style.opacity]': '1',
2204
- '[attr.role]': '"tooltip"',
2205
- '[id]': 'id',
2206
- },
2207
- standalone: false,
2208
- hostDirectives: [ClrPopoverContent$1],
2209
- }]
2210
- }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
2211
- type: Optional
2212
- }, {
2213
- type: Inject,
2214
- args: [POPOVER_HOST_ANCHOR$1]
2215
- }] }, { type: TooltipIdService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.ClrPopoverService }, { type: TooltipMouseService }, { type: i2.ClrPopoverContent }], propDecorators: { id: [{
2216
- type: Input
2217
- }], position: [{
2218
- type: Input,
2219
- args: ['clrPosition']
2220
- }], size: [{
2221
- type: Input,
2222
- args: ['clrSize']
2223
- }], onMouseEnter: [{
2224
- type: HostListener,
2225
- args: ['mouseenter']
2226
- }], onMouseLeave: [{
2227
- type: HostListener,
2228
- args: ['mouseleave']
2229
- }] } });
2230
-
2231
- /*
2232
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
2233
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
2234
- * This software is released under MIT license.
2235
- * The full license information can be found in LICENSE in the root directory of this project.
2236
- */
2237
- const CLR_TOOLTIP_DIRECTIVES = [ClrTooltip, ClrTooltipTrigger, ClrTooltipContent];
2238
- class ClrTooltipModule {
2239
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
2240
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: ClrTooltipModule, declarations: [ClrTooltip, ClrTooltipTrigger, ClrTooltipContent], imports: [CommonModule, ClrIcon, _lrClrPopoverModuleNext], exports: [ClrTooltip, ClrTooltipTrigger, ClrTooltipContent, ClrIfOpen$1, ClrIcon] }); }
2241
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTooltipModule, imports: [CommonModule, ClrIcon, _lrClrPopoverModuleNext] }); }
2242
- }
2243
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrTooltipModule, decorators: [{
2244
- type: NgModule,
2245
- args: [{
2246
- imports: [CommonModule, ClrIcon, _lrClrPopoverModuleNext],
2247
- declarations: [CLR_TOOLTIP_DIRECTIVES],
2248
- exports: [CLR_TOOLTIP_DIRECTIVES, ClrIfOpen$1, ClrIcon],
25
+ exports: [ClrDropdownModule, ClrSignpostModule, ClrTooltipModule],
2249
26
  }]
2250
27
  }] });
2251
28
 
@@ -2256,16 +33,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
2256
33
  * The full license information can be found in LICENSE in the root directory of this project.
2257
34
  */
2258
35
 
2259
- /*
2260
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
2261
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
2262
- * This software is released under MIT license.
2263
- * The full license information can be found in LICENSE in the root directory of this project.
2264
- */
2265
-
2266
36
  /**
2267
37
  * Generated bundle index. Do not edit.
2268
38
  */
2269
39
 
2270
- export { CLR_DROPDOWN_DIRECTIVES, CLR_MENU_POSITIONS, CLR_SIGNPOST_DIRECTIVES, CLR_TOOLTIP_DIRECTIVES, ClrDropdown, ClrDropdownItem, ClrDropdownMenu, ClrDropdownModule, ClrDropdownTrigger, ClrIfOpen, ClrPopoverAnchor, ClrPopoverContent, ClrPopoverHostDirective, ClrPopoverModule, ClrPopoverPosition, ClrPopoverService, ClrPopoverType, ClrSignpost, ClrSignpostContent, ClrSignpostModule, ClrSignpostTitle, ClrSignpostTrigger, ClrStopEscapePropagationDirective, ClrTooltip, ClrTooltipContent, ClrTooltipModule, ClrTooltipTrigger, DROPDOWN_POSITIONS, POPOVER_HOST_ANCHOR, SIGNPOST_POSITIONS, TOOLTIP_POSITIONS, getAnchorPosition, getConnectedPositions, getContentPosition, getPositionsArray, mapPopoverKeyToPosition, ClrPopoverCloseButton as ÇlrClrPopoverCloseButton, ClrPopoverModuleNext as ÇlrClrPopoverModuleNext, ClrPopoverOpenCloseButton as ÇlrClrPopoverOpenCloseButton };
40
+ export { ClrPopoverModule };
2271
41
  //# sourceMappingURL=clr-angular-popover.mjs.map