@fundamental-ngx/core 0.43.6 → 0.43.8

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 (83) hide show
  1. package/esm2020/combobox/combobox.component.mjs +1 -1
  2. package/esm2020/list/list-navigation-item/list-navigation-item.component.mjs +16 -12
  3. package/esm2020/list/list.component.mjs +22 -13
  4. package/esm2020/multi-combobox/multi-combobox.component.mjs +1 -1
  5. package/esm2020/multi-input/multi-input.component.mjs +80 -49
  6. package/esm2020/popover/index.mjs +12 -12
  7. package/esm2020/popover/popover-body/popover-body-directives/popover-body-footer.directive.mjs +4 -3
  8. package/esm2020/popover/popover-body/popover-body-directives/popover-body-header.directive.mjs +4 -3
  9. package/esm2020/popover/popover-body/popover-body.component.mjs +8 -11
  10. package/esm2020/popover/popover-body.directive.mjs +20 -0
  11. package/esm2020/popover/popover-container/popover-container.directive.mjs +4 -3
  12. package/esm2020/popover/popover-control/popover-control.component.mjs +3 -3
  13. package/esm2020/popover/popover-mobile/popover-mobile.component.mjs +10 -7
  14. package/esm2020/popover/popover-mobile/popover-mobile.module.mjs +4 -5
  15. package/esm2020/popover/popover-service/popover.service.mjs +20 -14
  16. package/esm2020/popover/popover-trigger.directive.mjs +4 -3
  17. package/esm2020/popover/popover.component.mjs +29 -16
  18. package/esm2020/popover/popover.module.mjs +20 -18
  19. package/esm2020/select/select.component.mjs +1 -1
  20. package/esm2020/table/directives/table-row.directive.mjs +6 -3
  21. package/esm2020/token/tokenizer.component.mjs +1 -1
  22. package/esm2020/upload-collection/upload-collection.component.mjs +1 -1
  23. package/esm2020/vertical-navigation/vertical-navigation.component.mjs +1 -1
  24. package/fesm2015/fundamental-ngx-core-combobox.mjs +1 -1
  25. package/fesm2015/fundamental-ngx-core-combobox.mjs.map +1 -1
  26. package/fesm2015/fundamental-ngx-core-list.mjs +76 -63
  27. package/fesm2015/fundamental-ngx-core-list.mjs.map +1 -1
  28. package/fesm2015/fundamental-ngx-core-multi-combobox.mjs +1 -1
  29. package/fesm2015/fundamental-ngx-core-multi-combobox.mjs.map +1 -1
  30. package/fesm2015/fundamental-ngx-core-multi-input.mjs +83 -53
  31. package/fesm2015/fundamental-ngx-core-multi-input.mjs.map +1 -1
  32. package/fesm2015/fundamental-ngx-core-popover.mjs +440 -399
  33. package/fesm2015/fundamental-ngx-core-popover.mjs.map +1 -1
  34. package/fesm2015/fundamental-ngx-core-select.mjs +1 -1
  35. package/fesm2015/fundamental-ngx-core-select.mjs.map +1 -1
  36. package/fesm2015/fundamental-ngx-core-table.mjs +5 -2
  37. package/fesm2015/fundamental-ngx-core-table.mjs.map +1 -1
  38. package/fesm2015/fundamental-ngx-core-token.mjs +1 -1
  39. package/fesm2015/fundamental-ngx-core-token.mjs.map +1 -1
  40. package/fesm2015/fundamental-ngx-core-upload-collection.mjs +1 -1
  41. package/fesm2015/fundamental-ngx-core-upload-collection.mjs.map +1 -1
  42. package/fesm2015/fundamental-ngx-core-vertical-navigation.mjs +1 -1
  43. package/fesm2015/fundamental-ngx-core-vertical-navigation.mjs.map +1 -1
  44. package/fesm2020/fundamental-ngx-core-combobox.mjs +1 -1
  45. package/fesm2020/fundamental-ngx-core-combobox.mjs.map +1 -1
  46. package/fesm2020/fundamental-ngx-core-list.mjs +76 -63
  47. package/fesm2020/fundamental-ngx-core-list.mjs.map +1 -1
  48. package/fesm2020/fundamental-ngx-core-multi-combobox.mjs +1 -1
  49. package/fesm2020/fundamental-ngx-core-multi-combobox.mjs.map +1 -1
  50. package/fesm2020/fundamental-ngx-core-multi-input.mjs +82 -52
  51. package/fesm2020/fundamental-ngx-core-multi-input.mjs.map +1 -1
  52. package/fesm2020/fundamental-ngx-core-popover.mjs +449 -408
  53. package/fesm2020/fundamental-ngx-core-popover.mjs.map +1 -1
  54. package/fesm2020/fundamental-ngx-core-select.mjs +1 -1
  55. package/fesm2020/fundamental-ngx-core-select.mjs.map +1 -1
  56. package/fesm2020/fundamental-ngx-core-table.mjs +5 -2
  57. package/fesm2020/fundamental-ngx-core-table.mjs.map +1 -1
  58. package/fesm2020/fundamental-ngx-core-token.mjs +1 -1
  59. package/fesm2020/fundamental-ngx-core-token.mjs.map +1 -1
  60. package/fesm2020/fundamental-ngx-core-upload-collection.mjs +1 -1
  61. package/fesm2020/fundamental-ngx-core-upload-collection.mjs.map +1 -1
  62. package/fesm2020/fundamental-ngx-core-vertical-navigation.mjs +1 -1
  63. package/fesm2020/fundamental-ngx-core-vertical-navigation.mjs.map +1 -1
  64. package/fundamental-ngx-core-v0.43.8.tgz +0 -0
  65. package/list/list-navigation-item/list-navigation-item.component.d.ts +8 -6
  66. package/list/list.component.d.ts +15 -6
  67. package/multi-input/multi-input.component.d.ts +48 -39
  68. package/package.json +3 -3
  69. package/popover/index.d.ts +11 -11
  70. package/popover/popover-body/popover-body-directives/popover-body-footer.directive.d.ts +1 -1
  71. package/popover/popover-body/popover-body-directives/popover-body-header.directive.d.ts +1 -1
  72. package/popover/popover-body/popover-body.component.d.ts +1 -1
  73. package/popover/popover-body.directive.d.ts +10 -0
  74. package/popover/popover-container/popover-container.directive.d.ts +1 -1
  75. package/popover/popover-control/popover-control.component.d.ts +1 -1
  76. package/popover/popover-mobile/popover-mobile.component.d.ts +3 -3
  77. package/popover/popover-mobile/popover-mobile.module.d.ts +5 -5
  78. package/popover/popover-service/popover.service.d.ts +6 -4
  79. package/popover/popover-trigger.directive.d.ts +1 -1
  80. package/popover/popover.component.d.ts +9 -2
  81. package/popover/popover.module.d.ts +2 -5
  82. package/schematics/add-dependencies/index.js +4 -4
  83. package/fundamental-ngx-core-v0.43.6.tgz +0 -0
@@ -1,223 +1,27 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, HostListener, Directive, HostBinding, EventEmitter, Input, Output, ElementRef, Injectable, Optional, InjectionToken, Inject, NgModule, Injector, TemplateRef, ViewContainerRef, ContentChild } from '@angular/core';
3
- import * as i2 from '@angular/common';
4
- import { CommonModule } from '@angular/common';
2
+ import { EventEmitter, Directive, Input, HostBinding, Output, inject, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, HostListener, InjectionToken, Inject, Optional, NgModule, ElementRef, Injectable, Injector, ViewContainerRef, ContentChild } from '@angular/core';
3
+ import * as i1$2 from '@angular/cdk/overlay';
4
+ import { CdkScrollable, OverlayConfig, CdkOverlayOrigin } from '@angular/cdk/overlay';
5
5
  import { ESCAPE, SPACE, ENTER, DOWN_ARROW } from '@angular/cdk/keycodes';
6
- import * as i3 from '@angular/cdk/a11y';
6
+ import * as i2 from '@angular/cdk/a11y';
7
7
  import { CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
8
- import { Subject, merge, Subscription } from 'rxjs';
9
- import * as i2$1 from '@fundamental-ngx/cdk/utils';
10
- import { KeyUtil, resizeObservable, isOdd, DynamicComponentService } from '@fundamental-ngx/cdk/utils';
8
+ import { Subject, Subscription, merge } from 'rxjs';
9
+ import * as i2$2 from '@fundamental-ngx/cdk/utils';
10
+ import { KeyUtil, resizeObservable, DynamicComponentService, isOdd } from '@fundamental-ngx/cdk/utils';
11
11
  import * as i1 from '@fundamental-ngx/core/content-density';
12
12
  import { contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';
13
- import * as i4 from '@fundamental-ngx/core/scrollbar';
14
- import { ScrollbarDirective, ScrollbarModule } from '@fundamental-ngx/core/scrollbar';
15
- import * as i1$1 from '@angular/cdk/overlay';
16
- import { OverlayConfig, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
17
- import equal from 'fast-deep-equal';
18
- import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
13
+ import { ScrollbarDirective } from '@fundamental-ngx/core/scrollbar';
14
+ import { NgIf, NgTemplateOutlet, CommonModule } from '@angular/common';
19
15
  import { takeUntil, startWith, filter, distinctUntilChanged } from 'rxjs/operators';
20
- import { GetDefaultPosition, PopoverPosition } from '@fundamental-ngx/core/shared';
21
16
  import { MobileModeBase, MobileModeControl, MOBILE_MODE_CONFIG } from '@fundamental-ngx/core/mobile-mode';
22
- import * as i1$2 from '@fundamental-ngx/core/dialog';
17
+ import * as i1$1 from '@fundamental-ngx/core/dialog';
23
18
  import { DialogModule } from '@fundamental-ngx/core/dialog';
24
- import * as i3$1 from '@fundamental-ngx/core/title';
19
+ import * as i2$1 from '@fundamental-ngx/core/title';
20
+ import { TitleModule } from '@fundamental-ngx/core/title';
25
21
  import { ButtonModule } from '@fundamental-ngx/core/button';
26
-
27
- /**
28
- * A component used to enforce a certain layout for the popover.
29
- * ```html
30
- * <fd-popover>
31
- * <fd-popover-control>Control Element</fd-popover-control>
32
- * <fd-popover-body>Popover Body</fd-popover-body>
33
- * </fd-popover>
34
- * ```
35
- */
36
- class PopoverControlComponent {
37
- /** @hidden */
38
- constructor(elRef) {
39
- this.elRef = elRef;
40
- /** @hidden */
41
- this._tabbable = false;
42
- }
43
- /** @hidden */
44
- ngAfterContentChecked() {
45
- if (this._tabbable) {
46
- this.makeTabbable();
47
- }
48
- }
49
- /** @hidden */
50
- makeTabbable() {
51
- const elemChild = this.elRef.nativeElement.children[0];
52
- if (elemChild && elemChild.getAttribute('tabindex') !== '-1') {
53
- elemChild.tabIndex = '0';
54
- }
55
- }
56
- }
57
- PopoverControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverControlComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
58
- PopoverControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: PopoverControlComponent, selector: "fd-popover-control", ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
59
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverControlComponent, decorators: [{
60
- type: Component,
61
- args: [{ selector: 'fd-popover-control', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
62
- }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
63
-
64
- /**
65
- * A component used to enforce a certain layout for the popover.
66
- * ```html
67
- * <fd-popover>
68
- * <fd-popover-control>Control Element</fd-popover-control>
69
- * <fd-popover-body>Popover Body</fd-popover-body>
70
- * </fd-popover>
71
- * ```
72
- */
73
- class PopoverBodyComponent {
74
- /** Handler escape keydown */
75
- bodyKeyupHandler(event) {
76
- if (KeyUtil.isKeyCode(event, ESCAPE) && this._closeOnEscapeKey) {
77
- // In case if popover belongs to the element inside dialog
78
- event.stopPropagation();
79
- this.onClose.next();
80
- }
81
- }
82
- /** @hidden */
83
- constructor(_elementRef, _changeDetectorRef, _contentDensityObserver) {
84
- this._elementRef = _elementRef;
85
- this._changeDetectorRef = _changeDetectorRef;
86
- this._contentDensityObserver = _contentDensityObserver;
87
- /** Whether to wrap content with fd-scrollbar directive. */
88
- this._disableScrollbar = false;
89
- /** Should fd-scrollbar have tabindex*/
90
- this._tabbableScrollbar = true;
91
- /** Whether the popover should have an arrow. */
92
- this._noArrow = true;
93
- /** Whether the popover should be focusTrapped. */
94
- this._focusTrapped = false;
95
- /**
96
- * Whether the popover should automatically move focus into the trapped region upon
97
- * initialization and return focus to the previous activeElement upon destruction.
98
- */
99
- this._focusAutoCapture = false;
100
- /** @hidden Property bind to popover's body */
101
- this._closeOnEscapeKey = false;
102
- /** @hidden Aria role for the popover body */
103
- this._bodyRole = null;
104
- /** @hidden Aria role for the popover body */
105
- this._bodyId = null;
106
- /** Classes added to arrow element */
107
- this._arrowClasses = '';
108
- /** Additional style to put margin into body component, to give a place for arrow */
109
- this._marginStyle = null;
110
- /** @hidden text rendered inside popover's body */
111
- this.text = null;
112
- /** Close event from popover body */
113
- this.onClose = new Subject();
114
- }
115
- /** @hidden */
116
- ngAfterViewInit() {
117
- if (this._scrollbar) {
118
- this._scrollbar._inPopover = true;
119
- }
120
- }
121
- /** @hidden */
122
- _setArrowStyles(position, rtl) {
123
- if (this._noArrow) {
124
- this._arrowClasses = '';
125
- return;
126
- }
127
- if (position.overlayY !== position.originY &&
128
- position.originY !== 'center' &&
129
- position.overlayY !== 'center' &&
130
- position.overlayX === position.originX) {
131
- this._arrowClasses =
132
- `fd-popover__body--${position.overlayY === 'top' ? 'below' : 'above'}` +
133
- ` fd-popover__body--arrow-${position.overlayY}` +
134
- ` fd-popover__body--arrow-x-${position.originX} `;
135
- }
136
- else if (position.overlayX !== position.originX &&
137
- position.overlayX !== 'center' &&
138
- position.originX !== 'center' &&
139
- position.originY === position.overlayY) {
140
- let overlayX = position.overlayX;
141
- if (rtl === 'rtl') {
142
- overlayX = position.overlayX === 'end' ? 'start' : 'end';
143
- }
144
- // TODO: Remove after new fundamental-styles version release.
145
- const originY = position.originY === 'bottom' ? 'end' : position.originY;
146
- // End TODO
147
- this._arrowClasses =
148
- `fd-popover__body--${overlayX === 'start' ? 'after' : 'before'}` +
149
- ` fd-popover__body--arrow-${overlayX === 'start' ? 'left' : 'right'}` +
150
- ` fd-popover__body--arrow-y-${originY} `;
151
- }
152
- else {
153
- this._arrowClasses = 'fd-popover__body--no-arrow';
154
- }
155
- this.detectChanges();
156
- }
157
- /** @hidden */
158
- detectChanges() {
159
- if (!this._changeDetectorRef['destroyed']) {
160
- this._changeDetectorRef.detectChanges();
161
- }
162
- }
163
- /** @hidden */
164
- _focusFirstTabbableElement() {
165
- if (this._focusAutoCapture) {
166
- this._cdkTrapFocus.focusTrap.focusFirstTabbableElement();
167
- }
168
- }
169
- }
170
- PopoverBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverBodyComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component });
171
- PopoverBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: PopoverBodyComponent, selector: "fd-popover-body", host: { listeners: { "keyup": "bodyKeyupHandler($event)" } }, providers: [contentDensityObserverProviders({ alwaysAddModifiers: true })], viewQueries: [{ propertyName: "_cdkTrapFocus", first: true, predicate: CdkTrapFocus, descendants: true }, { propertyName: "_scrollbar", first: true, predicate: ScrollbarDirective, descendants: true }], ngImport: i0, template: "<div\n class=\"fd-popover__body fd-popover__body--static\"\n [class.fd-popover__body--no-arrow]=\"_noArrow\"\n [class]=\"_arrowClasses + (_additionalBodyClass || '')\"\n [cdkTrapFocus]=\"_focusTrapped\"\n [style]=\"_marginStyle\"\n [style.max-width.px]=\"_maxWidth\"\n [style.min-width.px]=\"_popoverBodyMinWidth\"\n [style.width.px]=\"_popoverBodyWidth\"\n [attr.role]=\"_bodyRole\"\n [attr.id]=\"_bodyId\"\n>\n <div\n fd-scrollbar\n class=\"fd-popover__wrapper\"\n [overrideTabindex]=\"_tabbableScrollbar\"\n *ngIf=\"!_disableScrollbar; else renderer\"\n >\n <ng-container *ngTemplateOutlet=\"renderer\"></ng-container>\n </div>\n</div>\n\n<ng-template #renderer>\n <ng-content select=\"[fd-popover-body-header]\"></ng-content>\n\n <ng-content select=\"[fd-popover-body-subheader]\"></ng-content>\n\n <ng-content></ng-content>\n\n {{ text }}\n\n <ng-container *ngTemplateOutlet=\"_templateToDisplay\"></ng-container>\n\n <ng-content select=\"[fd-popover-body-footer]\"></ng-content>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-popover{-webkit-box-sizing:border-box;--fdPopover_Offset:100%;--fdPopover_Center_Offset:50%;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;padding:0;position:relative}.fd-popover:after,.fd-popover:before{box-sizing:inherit;font-size:inherit}.fd-popover__control{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-popover__control:after,.fd-popover__control:before{box-sizing:inherit;font-size:inherit}.fd-popover__control:focus-visible{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor)}.fd-popover__control.is-expanded>*,.fd-popover__control[aria-expanded=true]>*{margin-bottom:0}.fd-popover__control.is-expanded+.fd-popover__body--input-message-group,.fd-popover__control[aria-expanded=true]+.fd-popover__body--input-message-group{margin-top:0}.fd-popover__control.is-disabled,.fd-popover__control:disabled,.fd-popover__control[aria-disabled=true]{pointer-events:none}.fd-popover__wrapper{border-radius:var(--fdPopover_Border_Radius);overflow:auto;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-popover__wrapper.is-focus,.fd-popover__wrapper:focus{outline:none;z-index:5}.fd-popover__wrapper::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-popover__wrapper::-webkit-scrollbar-corner,.fd-popover__wrapper::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-popover__wrapper::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-popover__wrapper::-webkit-scrollbar-thumb:active,.fd-popover__wrapper::-webkit-scrollbar-thumb:hover{box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-popover__wrapper::-webkit-scrollbar-corner,.fd-popover__wrapper::-webkit-scrollbar-track{border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}.fd-popover__wrapper[dir=rtl]::-webkit-scrollbar-corner,.fd-popover__wrapper[dir=rtl]::-webkit-scrollbar-track,[dir=rtl] .fd-popover__wrapper::-webkit-scrollbar-corner,[dir=rtl] .fd-popover__wrapper::-webkit-scrollbar-track{border-radius:var(--fdScrollbar_Border_Radius) 0 0 var(--fdScrollbar_Border_Radius)}.fd-popover__wrapper--visible{overflow:visible!important}.fd-popover__body{--fdIcon_Button_Height:2.25rem;--fdIcon_Button_Width:2.25rem;-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapContent_Shadow2);-webkit-transition:all .125s;background:var(--sapGroup_ContentBackground);border:0;border-radius:var(--fdPopover_Border_Radius);box-shadow:var(--sapContent_Shadow2);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;opacity:1;padding:0;position:absolute;top:calc(var(--fdPopover_Offset) + .5rem);transition:all .125s;visibility:visible;white-space:nowrap;z-index:1000}.fd-popover__body:after,.fd-popover__body:before{box-sizing:inherit;content:\"\";font-size:inherit;position:absolute}.fd-popover__body:before{border-bottom:calc(.5rem - var(--fdPopover_Border_Width)) solid var(--sapGroup_ContentBackground);border-left:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;border-right:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;top:calc(-.5rem + var(--fdPopover_Border_Width));z-index:1002}.fd-popover__body:after,.fd-popover__body:before{border-top:none;display:inline-block;height:0;width:0}.fd-popover__body:after{border-bottom:.5rem solid var(--fdPopover_Border_Color);border-left:.5rem solid transparent;border-right:.5rem solid transparent;top:-.5rem;z-index:1001}.fd-popover__body>:not(.fd-popover__wrapper){overflow:hidden}.fd-popover__body ol:first-child li:first-child a:before,.fd-popover__body ol:first-child li:first-child:before,.fd-popover__body ul:first-child li:first-child a:before,.fd-popover__body ul:first-child li:first-child:before,.fd-popover__body-header>:first-child,.fd-popover__body>:first-child{border-top-left-radius:var(--fdPopover_Border_Radius);border-top-right-radius:var(--fdPopover_Border_Radius)}.fd-popover__body ol:last-child li:last-child a:before,.fd-popover__body ol:last-child li:last-child:before,.fd-popover__body ul:last-child li:last-child a:before,.fd-popover__body ul:last-child li:last-child:before,.fd-popover__body-footer>:last-child,.fd-popover__body>:last-child{border-bottom-left-radius:var(--fdPopover_Border_Radius);border-bottom-right-radius:var(--fdPopover_Border_Radius)}.fd-popover__body[class*=-compact],.fd-popover__body[class*=-condensed],[class*=-compact] .fd-popover__body:not([class*=-cozy]),[class*=-condensed] .fd-popover__body:not([class*=-cozy]){--fdIcon_Button_Height:1.625rem;--fdIcon_Button_Width:2rem}.fd-popover__body--no-arrow{box-shadow:var(--sapContent_Shadow1);top:var(--fdPopover_Offset)}.fd-popover__body--no-arrow:after,.fd-popover__body--no-arrow:before{display:none}.fd-popover__body,.fd-popover__body--left{left:0}.fd-popover__body--left[dir=rtl],.fd-popover__body[dir=rtl],[dir=rtl] .fd-popover__body,[dir=rtl] .fd-popover__body--left{left:auto;right:0}.fd-popover__body--left:before,.fd-popover__body:before{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--left:after,.fd-popover__body:after{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--left[dir=rtl]:before,.fd-popover__body[dir=rtl]:before,[dir=rtl] .fd-popover__body--left:before,[dir=rtl] .fd-popover__body:before{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--left[dir=rtl]:after,.fd-popover__body[dir=rtl]:after,[dir=rtl] .fd-popover__body--left:after,[dir=rtl] .fd-popover__body:after{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--center{-webkit-transform:translateX(calc(var(--fdPopover_Center_Offset) * -1));left:var(--fdPopover_Center_Offset);transform:translate(calc(var(--fdPopover_Center_Offset) * -1))}.fd-popover__body--center[dir=rtl],[dir=rtl] .fd-popover__body--center{-webkit-transform:translateX(var(--fdPopover_Center_Offset));left:auto;right:var(--fdPopover_Center_Offset);transform:translate(var(--fdPopover_Center_Offset))}.fd-popover__body--right{left:auto;right:0}.fd-popover__body--right[dir=rtl],[dir=rtl] .fd-popover__body--right{left:0;right:auto}.fd-popover__body--right:before{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--right:after{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--right[dir=rtl]:before,[dir=rtl] .fd-popover__body--right:before{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width));right:auto}.fd-popover__body--right[dir=rtl]:after,[dir=rtl] .fd-popover__body--right:after{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width));right:auto}.fd-popover__body--before{left:auto!important;right:var(--fdPopover_Offset)!important;top:0}.fd-popover__body--after{left:var(--fdPopover_Offset)!important;right:auto!important;top:0}.fd-popover__body--middle{-webkit-transform:translateY(calc(var(--fdPopover_Center_Offset) * -1));top:var(--fdPopover_Center_Offset);transform:translateY(calc(var(--fdPopover_Center_Offset) * -1))}.fd-popover__body--bottom{bottom:0;top:auto}.fd-popover__body--above{bottom:var(--fdPopover_Offset);top:auto}.fd-popover__body--arrow-bottom{bottom:calc(var(--fdPopover_Offset) + .5rem)!important}.fd-popover__body--arrow-bottom:before{border-bottom:none;border-left:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;border-right:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;border-top:calc(.5rem - var(--fdPopover_Border_Width)) solid var(--sapGroup_ContentBackground);display:inline-block;height:0;top:100%;width:0}.fd-popover__body--arrow-bottom:after{border-bottom:none;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-top:.5rem solid var(--fdPopover_Border_Color);display:inline-block;height:0;top:100%;width:0}.fd-popover__body--arrow-left{left:calc(var(--fdPopover_Offset) + .5rem)!important}.fd-popover__body--arrow-left:before{border-bottom:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;border-right:calc(.5rem - var(--fdPopover_Border_Width)) solid var(--sapGroup_ContentBackground);border-top:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;top:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--arrow-left:after,.fd-popover__body--arrow-left:before{border-left:none;display:inline-block;height:0;left:auto!important;right:100%!important;width:0}.fd-popover__body--arrow-left:after{border-bottom:.5rem solid transparent;border-right:.5rem solid var(--fdPopover_Border_Color);border-top:.5rem solid transparent;top:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--arrow-right{right:calc(var(--fdPopover_Offset) + .5rem)!important}.fd-popover__body--arrow-right:before{border-bottom:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;border-left:calc(.5rem - var(--fdPopover_Border_Width)) solid var(--sapGroup_ContentBackground);border-top:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;top:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--arrow-right:after,.fd-popover__body--arrow-right:before{border-right:none;display:inline-block;height:0;left:100%!important;right:auto!important;width:0}.fd-popover__body--arrow-right:after{border-bottom:.5rem solid transparent;border-left:.5rem solid var(--fdPopover_Border_Color);border-top:.5rem solid transparent;top:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--arrow-x-center:after,.fd-popover__body--arrow-x-center:before{-webkit-transform:translateX(-50%);left:50%;transform:translate(-50%)}.fd-popover__body--arrow-x-center[dir=rtl]:after,.fd-popover__body--arrow-x-center[dir=rtl]:before,[dir=rtl] .fd-popover__body--arrow-x-center:after,[dir=rtl] .fd-popover__body--arrow-x-center:before{-webkit-transform:translateX(50%);left:auto;right:50%;transform:translate(50%)}.fd-popover__body--arrow-x-end:before{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--arrow-x-end:after{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--arrow-x-end[dir=rtl]:before,[dir=rtl] .fd-popover__body--arrow-x-end:before{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width));right:auto}.fd-popover__body--arrow-x-end[dir=rtl]:after,[dir=rtl] .fd-popover__body--arrow-x-end:after{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width));right:auto}.fd-popover__body--arrow-y-center:after,.fd-popover__body--arrow-y-center:before{-webkit-transform:translateY(-50%);top:50%;transform:translateY(-50%)}.fd-popover__body--arrow-y-end:before{bottom:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width));top:auto}.fd-popover__body--arrow-y-end:after{bottom:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width));top:auto}.fd-popover__body--dropdown{width:max-content}.fd-popover__body--dropdown-fill{display:block;max-width:40rem;width:calc(100% - var(--sapGroup_BorderWidth) * 2)}.fd-popover__body--static{--fdPopover_Offset:0%;--fdPopover_Center_Offset:0%;position:relative}.fd-popover__body.is-hidden,.fd-popover__body[aria-hidden=true]{opacity:0;visibility:hidden;z-index:-1}.fd-popover__body .fd-popover__body--hidden{display:none}.fd-popover__body--input-message-group{-webkit-box-shadow:none;border:none;box-shadow:none}.fd-popover__body--inline-help{font-size:var(--sapFontSmallSize);padding:.75rem}.fd-popover__body--inline-help-icon{--fdIcon_Button_Height:1.375rem;--fdIcon_Button_Width:1.375rem}.fd-popover--input-message-group .fd-popover__body,.fd-popover--input-message-group .fd-popover__body--no-arrow{-webkit-box-shadow:none;border:none;box-shadow:none}.fd-popover--full-width{width:100%}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}fd-popover-body{max-width:100%;max-height:100%}.fd-popover-custom{display:inline-block;max-width:100%}.fd-popover-custom--disabled .fd-popover__control{cursor:auto}.fd-popover__body{max-height:100%;max-width:100%;display:flex}.fd-popover__body--hidden{display:none!important}.fd-popover__body.fd-form-message:before{width:auto;height:auto;position:relative;inset:0;border:none}.fd-popover__body>.fd-scrollbar{max-height:100%;max-width:100%;width:100%;border-radius:inherit}.fd-popover__body .fd-list{border-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-list__item:first-child{border-top-right-radius:var(--fdPopover_Border_Radius);border-top-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-list__item:last-child{border-bottom-right-radius:var(--fdPopover_Border_Radius);border-bottom-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-nested-list{border-bottom:none}.fd-popover__body .fd-nested-list__item:first-child .fd-nested-list__content{border-top-right-radius:var(--fdPopover_Border_Radius);border-top-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-nested-list__item:last-child .fd-nested-list__item:last-child .fd-nested-list__link{border-bottom-right-radius:var(--fdPopover_Border_Radius);border-bottom-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-nested-list__item:last-child .fd-nested-list__content{border-bottom-right-radius:var(--fdPopover_Border_Radius);border-bottom-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-nested-list__item:last-child .fd-nested-list__content.is-selected{border-bottom-right-radius:0;border-bottom-left-radius:0}.fd-popover__body .fd-side-nav,.fd-popover__body .fd-nested-list__item{border-right:none}.fd-popover__body .fd-side-nav:first-child,.fd-popover__body .fd-nested-list__item:first-child{border-top-right-radius:var(--fdPopover_Border_Radius);border-top-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-side-nav:last-child,.fd-popover__body .fd-nested-list__item:last-child{border-bottom-right-radius:var(--fdPopover_Border_Radius);border-bottom-left-radius:var(--fdPopover_Border_Radius)}.cdk-overlay-container{z-index:1002}.cdk-overlay-pane{max-width:100%;max-height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i4.ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible", "overrideTabindex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
172
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverBodyComponent, decorators: [{
173
- type: Component,
174
- args: [{ selector: 'fd-popover-body', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders({ alwaysAddModifiers: true })], template: "<div\n class=\"fd-popover__body fd-popover__body--static\"\n [class.fd-popover__body--no-arrow]=\"_noArrow\"\n [class]=\"_arrowClasses + (_additionalBodyClass || '')\"\n [cdkTrapFocus]=\"_focusTrapped\"\n [style]=\"_marginStyle\"\n [style.max-width.px]=\"_maxWidth\"\n [style.min-width.px]=\"_popoverBodyMinWidth\"\n [style.width.px]=\"_popoverBodyWidth\"\n [attr.role]=\"_bodyRole\"\n [attr.id]=\"_bodyId\"\n>\n <div\n fd-scrollbar\n class=\"fd-popover__wrapper\"\n [overrideTabindex]=\"_tabbableScrollbar\"\n *ngIf=\"!_disableScrollbar; else renderer\"\n >\n <ng-container *ngTemplateOutlet=\"renderer\"></ng-container>\n </div>\n</div>\n\n<ng-template #renderer>\n <ng-content select=\"[fd-popover-body-header]\"></ng-content>\n\n <ng-content select=\"[fd-popover-body-subheader]\"></ng-content>\n\n <ng-content></ng-content>\n\n {{ text }}\n\n <ng-container *ngTemplateOutlet=\"_templateToDisplay\"></ng-container>\n\n <ng-content select=\"[fd-popover-body-footer]\"></ng-content>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-popover{-webkit-box-sizing:border-box;--fdPopover_Offset:100%;--fdPopover_Center_Offset:50%;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;padding:0;position:relative}.fd-popover:after,.fd-popover:before{box-sizing:inherit;font-size:inherit}.fd-popover__control{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-popover__control:after,.fd-popover__control:before{box-sizing:inherit;font-size:inherit}.fd-popover__control:focus-visible{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor)}.fd-popover__control.is-expanded>*,.fd-popover__control[aria-expanded=true]>*{margin-bottom:0}.fd-popover__control.is-expanded+.fd-popover__body--input-message-group,.fd-popover__control[aria-expanded=true]+.fd-popover__body--input-message-group{margin-top:0}.fd-popover__control.is-disabled,.fd-popover__control:disabled,.fd-popover__control[aria-disabled=true]{pointer-events:none}.fd-popover__wrapper{border-radius:var(--fdPopover_Border_Radius);overflow:auto;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-popover__wrapper.is-focus,.fd-popover__wrapper:focus{outline:none;z-index:5}.fd-popover__wrapper::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-popover__wrapper::-webkit-scrollbar-corner,.fd-popover__wrapper::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-popover__wrapper::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-popover__wrapper::-webkit-scrollbar-thumb:active,.fd-popover__wrapper::-webkit-scrollbar-thumb:hover{box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-popover__wrapper::-webkit-scrollbar-corner,.fd-popover__wrapper::-webkit-scrollbar-track{border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}.fd-popover__wrapper[dir=rtl]::-webkit-scrollbar-corner,.fd-popover__wrapper[dir=rtl]::-webkit-scrollbar-track,[dir=rtl] .fd-popover__wrapper::-webkit-scrollbar-corner,[dir=rtl] .fd-popover__wrapper::-webkit-scrollbar-track{border-radius:var(--fdScrollbar_Border_Radius) 0 0 var(--fdScrollbar_Border_Radius)}.fd-popover__wrapper--visible{overflow:visible!important}.fd-popover__body{--fdIcon_Button_Height:2.25rem;--fdIcon_Button_Width:2.25rem;-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapContent_Shadow2);-webkit-transition:all .125s;background:var(--sapGroup_ContentBackground);border:0;border-radius:var(--fdPopover_Border_Radius);box-shadow:var(--sapContent_Shadow2);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;opacity:1;padding:0;position:absolute;top:calc(var(--fdPopover_Offset) + .5rem);transition:all .125s;visibility:visible;white-space:nowrap;z-index:1000}.fd-popover__body:after,.fd-popover__body:before{box-sizing:inherit;content:\"\";font-size:inherit;position:absolute}.fd-popover__body:before{border-bottom:calc(.5rem - var(--fdPopover_Border_Width)) solid var(--sapGroup_ContentBackground);border-left:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;border-right:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;top:calc(-.5rem + var(--fdPopover_Border_Width));z-index:1002}.fd-popover__body:after,.fd-popover__body:before{border-top:none;display:inline-block;height:0;width:0}.fd-popover__body:after{border-bottom:.5rem solid var(--fdPopover_Border_Color);border-left:.5rem solid transparent;border-right:.5rem solid transparent;top:-.5rem;z-index:1001}.fd-popover__body>:not(.fd-popover__wrapper){overflow:hidden}.fd-popover__body ol:first-child li:first-child a:before,.fd-popover__body ol:first-child li:first-child:before,.fd-popover__body ul:first-child li:first-child a:before,.fd-popover__body ul:first-child li:first-child:before,.fd-popover__body-header>:first-child,.fd-popover__body>:first-child{border-top-left-radius:var(--fdPopover_Border_Radius);border-top-right-radius:var(--fdPopover_Border_Radius)}.fd-popover__body ol:last-child li:last-child a:before,.fd-popover__body ol:last-child li:last-child:before,.fd-popover__body ul:last-child li:last-child a:before,.fd-popover__body ul:last-child li:last-child:before,.fd-popover__body-footer>:last-child,.fd-popover__body>:last-child{border-bottom-left-radius:var(--fdPopover_Border_Radius);border-bottom-right-radius:var(--fdPopover_Border_Radius)}.fd-popover__body[class*=-compact],.fd-popover__body[class*=-condensed],[class*=-compact] .fd-popover__body:not([class*=-cozy]),[class*=-condensed] .fd-popover__body:not([class*=-cozy]){--fdIcon_Button_Height:1.625rem;--fdIcon_Button_Width:2rem}.fd-popover__body--no-arrow{box-shadow:var(--sapContent_Shadow1);top:var(--fdPopover_Offset)}.fd-popover__body--no-arrow:after,.fd-popover__body--no-arrow:before{display:none}.fd-popover__body,.fd-popover__body--left{left:0}.fd-popover__body--left[dir=rtl],.fd-popover__body[dir=rtl],[dir=rtl] .fd-popover__body,[dir=rtl] .fd-popover__body--left{left:auto;right:0}.fd-popover__body--left:before,.fd-popover__body:before{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--left:after,.fd-popover__body:after{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--left[dir=rtl]:before,.fd-popover__body[dir=rtl]:before,[dir=rtl] .fd-popover__body--left:before,[dir=rtl] .fd-popover__body:before{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--left[dir=rtl]:after,.fd-popover__body[dir=rtl]:after,[dir=rtl] .fd-popover__body--left:after,[dir=rtl] .fd-popover__body:after{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--center{-webkit-transform:translateX(calc(var(--fdPopover_Center_Offset) * -1));left:var(--fdPopover_Center_Offset);transform:translate(calc(var(--fdPopover_Center_Offset) * -1))}.fd-popover__body--center[dir=rtl],[dir=rtl] .fd-popover__body--center{-webkit-transform:translateX(var(--fdPopover_Center_Offset));left:auto;right:var(--fdPopover_Center_Offset);transform:translate(var(--fdPopover_Center_Offset))}.fd-popover__body--right{left:auto;right:0}.fd-popover__body--right[dir=rtl],[dir=rtl] .fd-popover__body--right{left:0;right:auto}.fd-popover__body--right:before{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--right:after{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--right[dir=rtl]:before,[dir=rtl] .fd-popover__body--right:before{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width));right:auto}.fd-popover__body--right[dir=rtl]:after,[dir=rtl] .fd-popover__body--right:after{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width));right:auto}.fd-popover__body--before{left:auto!important;right:var(--fdPopover_Offset)!important;top:0}.fd-popover__body--after{left:var(--fdPopover_Offset)!important;right:auto!important;top:0}.fd-popover__body--middle{-webkit-transform:translateY(calc(var(--fdPopover_Center_Offset) * -1));top:var(--fdPopover_Center_Offset);transform:translateY(calc(var(--fdPopover_Center_Offset) * -1))}.fd-popover__body--bottom{bottom:0;top:auto}.fd-popover__body--above{bottom:var(--fdPopover_Offset);top:auto}.fd-popover__body--arrow-bottom{bottom:calc(var(--fdPopover_Offset) + .5rem)!important}.fd-popover__body--arrow-bottom:before{border-bottom:none;border-left:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;border-right:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;border-top:calc(.5rem - var(--fdPopover_Border_Width)) solid var(--sapGroup_ContentBackground);display:inline-block;height:0;top:100%;width:0}.fd-popover__body--arrow-bottom:after{border-bottom:none;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-top:.5rem solid var(--fdPopover_Border_Color);display:inline-block;height:0;top:100%;width:0}.fd-popover__body--arrow-left{left:calc(var(--fdPopover_Offset) + .5rem)!important}.fd-popover__body--arrow-left:before{border-bottom:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;border-right:calc(.5rem - var(--fdPopover_Border_Width)) solid var(--sapGroup_ContentBackground);border-top:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;top:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--arrow-left:after,.fd-popover__body--arrow-left:before{border-left:none;display:inline-block;height:0;left:auto!important;right:100%!important;width:0}.fd-popover__body--arrow-left:after{border-bottom:.5rem solid transparent;border-right:.5rem solid var(--fdPopover_Border_Color);border-top:.5rem solid transparent;top:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--arrow-right{right:calc(var(--fdPopover_Offset) + .5rem)!important}.fd-popover__body--arrow-right:before{border-bottom:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;border-left:calc(.5rem - var(--fdPopover_Border_Width)) solid var(--sapGroup_ContentBackground);border-top:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;top:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--arrow-right:after,.fd-popover__body--arrow-right:before{border-right:none;display:inline-block;height:0;left:100%!important;right:auto!important;width:0}.fd-popover__body--arrow-right:after{border-bottom:.5rem solid transparent;border-left:.5rem solid var(--fdPopover_Border_Color);border-top:.5rem solid transparent;top:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--arrow-x-center:after,.fd-popover__body--arrow-x-center:before{-webkit-transform:translateX(-50%);left:50%;transform:translate(-50%)}.fd-popover__body--arrow-x-center[dir=rtl]:after,.fd-popover__body--arrow-x-center[dir=rtl]:before,[dir=rtl] .fd-popover__body--arrow-x-center:after,[dir=rtl] .fd-popover__body--arrow-x-center:before{-webkit-transform:translateX(50%);left:auto;right:50%;transform:translate(50%)}.fd-popover__body--arrow-x-end:before{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--arrow-x-end:after{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--arrow-x-end[dir=rtl]:before,[dir=rtl] .fd-popover__body--arrow-x-end:before{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width));right:auto}.fd-popover__body--arrow-x-end[dir=rtl]:after,[dir=rtl] .fd-popover__body--arrow-x-end:after{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width));right:auto}.fd-popover__body--arrow-y-center:after,.fd-popover__body--arrow-y-center:before{-webkit-transform:translateY(-50%);top:50%;transform:translateY(-50%)}.fd-popover__body--arrow-y-end:before{bottom:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width));top:auto}.fd-popover__body--arrow-y-end:after{bottom:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width));top:auto}.fd-popover__body--dropdown{width:max-content}.fd-popover__body--dropdown-fill{display:block;max-width:40rem;width:calc(100% - var(--sapGroup_BorderWidth) * 2)}.fd-popover__body--static{--fdPopover_Offset:0%;--fdPopover_Center_Offset:0%;position:relative}.fd-popover__body.is-hidden,.fd-popover__body[aria-hidden=true]{opacity:0;visibility:hidden;z-index:-1}.fd-popover__body .fd-popover__body--hidden{display:none}.fd-popover__body--input-message-group{-webkit-box-shadow:none;border:none;box-shadow:none}.fd-popover__body--inline-help{font-size:var(--sapFontSmallSize);padding:.75rem}.fd-popover__body--inline-help-icon{--fdIcon_Button_Height:1.375rem;--fdIcon_Button_Width:1.375rem}.fd-popover--input-message-group .fd-popover__body,.fd-popover--input-message-group .fd-popover__body--no-arrow{-webkit-box-shadow:none;border:none;box-shadow:none}.fd-popover--full-width{width:100%}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}fd-popover-body{max-width:100%;max-height:100%}.fd-popover-custom{display:inline-block;max-width:100%}.fd-popover-custom--disabled .fd-popover__control{cursor:auto}.fd-popover__body{max-height:100%;max-width:100%;display:flex}.fd-popover__body--hidden{display:none!important}.fd-popover__body.fd-form-message:before{width:auto;height:auto;position:relative;inset:0;border:none}.fd-popover__body>.fd-scrollbar{max-height:100%;max-width:100%;width:100%;border-radius:inherit}.fd-popover__body .fd-list{border-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-list__item:first-child{border-top-right-radius:var(--fdPopover_Border_Radius);border-top-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-list__item:last-child{border-bottom-right-radius:var(--fdPopover_Border_Radius);border-bottom-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-nested-list{border-bottom:none}.fd-popover__body .fd-nested-list__item:first-child .fd-nested-list__content{border-top-right-radius:var(--fdPopover_Border_Radius);border-top-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-nested-list__item:last-child .fd-nested-list__item:last-child .fd-nested-list__link{border-bottom-right-radius:var(--fdPopover_Border_Radius);border-bottom-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-nested-list__item:last-child .fd-nested-list__content{border-bottom-right-radius:var(--fdPopover_Border_Radius);border-bottom-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-nested-list__item:last-child .fd-nested-list__content.is-selected{border-bottom-right-radius:0;border-bottom-left-radius:0}.fd-popover__body .fd-side-nav,.fd-popover__body .fd-nested-list__item{border-right:none}.fd-popover__body .fd-side-nav:first-child,.fd-popover__body .fd-nested-list__item:first-child{border-top-right-radius:var(--fdPopover_Border_Radius);border-top-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-side-nav:last-child,.fd-popover__body .fd-nested-list__item:last-child{border-bottom-right-radius:var(--fdPopover_Border_Radius);border-bottom-left-radius:var(--fdPopover_Border_Radius)}.cdk-overlay-container{z-index:1002}.cdk-overlay-pane{max-width:100%;max-height:100%}\n"] }]
175
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ContentDensityObserver }]; }, propDecorators: { _cdkTrapFocus: [{
176
- type: ViewChild,
177
- args: [CdkTrapFocus]
178
- }], _scrollbar: [{
179
- type: ViewChild,
180
- args: [ScrollbarDirective]
181
- }], bodyKeyupHandler: [{
182
- type: HostListener,
183
- args: ['keyup', ['$event']]
184
- }] } });
185
-
186
- class PopoverBodyHeaderDirective {
187
- constructor() {
188
- /** @hidden */
189
- this.fdPopoverBodyHeaderClass = true;
190
- }
191
- }
192
- PopoverBodyHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverBodyHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
193
- PopoverBodyHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]", host: { properties: { "class.fd-popover__body-header": "this.fdPopoverBodyHeaderClass" } }, ngImport: i0 });
194
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverBodyHeaderDirective, decorators: [{
195
- type: Directive,
196
- args: [{
197
- selector: '[fdPopoverBodyHeader], [fd-popover-body-header]'
198
- }]
199
- }], propDecorators: { fdPopoverBodyHeaderClass: [{
200
- type: HostBinding,
201
- args: ['class.fd-popover__body-header']
202
- }] } });
203
-
204
- class PopoverBodyFooterDirective {
205
- constructor() {
206
- /** @hidden */
207
- this.fdPopoverBodyFooterClass = true;
208
- }
209
- }
210
- PopoverBodyFooterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverBodyFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
211
- PopoverBodyFooterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]", host: { properties: { "class.fd-popover__body-footer": "this.fdPopoverBodyFooterClass" } }, ngImport: i0 });
212
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverBodyFooterDirective, decorators: [{
213
- type: Directive,
214
- args: [{
215
- selector: '[fdPopoverBodyFooter], [fd-popover-body-footer]'
216
- }]
217
- }], propDecorators: { fdPopoverBodyFooterClass: [{
218
- type: HostBinding,
219
- args: ['class.fd-popover__body-footer']
220
- }] } });
22
+ import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
23
+ import { GetDefaultPosition, PopoverPosition } from '@fundamental-ngx/core/shared';
24
+ import equal from 'fast-deep-equal';
221
25
 
222
26
  class BasePopoverClass {
223
27
  constructor() {
@@ -381,6 +185,181 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
381
185
  type: Output
382
186
  }] } });
383
187
 
188
+ class PopoverBodyDirective {
189
+ constructor() {
190
+ /**
191
+ * The template to be used as the popover's body.
192
+ **/
193
+ this.templateRef = inject(TemplateRef);
194
+ }
195
+ }
196
+ PopoverBodyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
197
+ PopoverBodyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: PopoverBodyDirective, isStandalone: true, selector: "[fdPopoverBody]", ngImport: i0 });
198
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverBodyDirective, decorators: [{
199
+ type: Directive,
200
+ args: [{
201
+ selector: '[fdPopoverBody]',
202
+ standalone: true
203
+ }]
204
+ }] });
205
+
206
+ class PopoverBodyFooterDirective {
207
+ constructor() {
208
+ /** @hidden */
209
+ this.fdPopoverBodyFooterClass = true;
210
+ }
211
+ }
212
+ PopoverBodyFooterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverBodyFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
213
+ PopoverBodyFooterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: PopoverBodyFooterDirective, isStandalone: true, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]", host: { properties: { "class.fd-popover__body-footer": "this.fdPopoverBodyFooterClass" } }, ngImport: i0 });
214
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverBodyFooterDirective, decorators: [{
215
+ type: Directive,
216
+ args: [{
217
+ selector: '[fdPopoverBodyFooter], [fd-popover-body-footer]',
218
+ standalone: true
219
+ }]
220
+ }], propDecorators: { fdPopoverBodyFooterClass: [{
221
+ type: HostBinding,
222
+ args: ['class.fd-popover__body-footer']
223
+ }] } });
224
+
225
+ class PopoverBodyHeaderDirective {
226
+ constructor() {
227
+ /** @hidden */
228
+ this.fdPopoverBodyHeaderClass = true;
229
+ }
230
+ }
231
+ PopoverBodyHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverBodyHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
232
+ PopoverBodyHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: PopoverBodyHeaderDirective, isStandalone: true, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]", host: { properties: { "class.fd-popover__body-header": "this.fdPopoverBodyHeaderClass" } }, ngImport: i0 });
233
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverBodyHeaderDirective, decorators: [{
234
+ type: Directive,
235
+ args: [{
236
+ selector: '[fdPopoverBodyHeader], [fd-popover-body-header]',
237
+ standalone: true
238
+ }]
239
+ }], propDecorators: { fdPopoverBodyHeaderClass: [{
240
+ type: HostBinding,
241
+ args: ['class.fd-popover__body-header']
242
+ }] } });
243
+
244
+ /**
245
+ * A component used to enforce a certain layout for the popover.
246
+ * ```html
247
+ * <fd-popover>
248
+ * <fd-popover-control>Control Element</fd-popover-control>
249
+ * <fd-popover-body>Popover Body</fd-popover-body>
250
+ * </fd-popover>
251
+ * ```
252
+ */
253
+ class PopoverBodyComponent {
254
+ /** Handler escape keydown */
255
+ bodyKeyupHandler(event) {
256
+ if (KeyUtil.isKeyCode(event, ESCAPE) && this._closeOnEscapeKey) {
257
+ // In case if popover belongs to the element inside dialog
258
+ event.stopPropagation();
259
+ this.onClose.next();
260
+ }
261
+ }
262
+ /** @hidden */
263
+ constructor(_elementRef, _changeDetectorRef, _contentDensityObserver) {
264
+ this._elementRef = _elementRef;
265
+ this._changeDetectorRef = _changeDetectorRef;
266
+ this._contentDensityObserver = _contentDensityObserver;
267
+ /** Whether to wrap content with fd-scrollbar directive. */
268
+ this._disableScrollbar = false;
269
+ /** Should fd-scrollbar have tabindex*/
270
+ this._tabbableScrollbar = true;
271
+ /** Whether the popover should have an arrow. */
272
+ this._noArrow = true;
273
+ /** Whether the popover should be focusTrapped. */
274
+ this._focusTrapped = false;
275
+ /**
276
+ * Whether the popover should automatically move focus into the trapped region upon
277
+ * initialization and return focus to the previous activeElement upon destruction.
278
+ */
279
+ this._focusAutoCapture = false;
280
+ /** @hidden Property bind to popover's body */
281
+ this._closeOnEscapeKey = false;
282
+ /** @hidden Aria role for the popover body */
283
+ this._bodyRole = null;
284
+ /** @hidden Aria role for the popover body */
285
+ this._bodyId = null;
286
+ /** Classes added to arrow element */
287
+ this._arrowClasses = '';
288
+ /** Additional style to put margin into body component, to give a place for arrow */
289
+ this._marginStyle = null;
290
+ /** @hidden text rendered inside popover's body */
291
+ this.text = null;
292
+ /** Close event from popover body */
293
+ this.onClose = new Subject();
294
+ }
295
+ /** @hidden */
296
+ ngAfterViewInit() {
297
+ if (this._scrollbar) {
298
+ this._scrollbar._inPopover = true;
299
+ }
300
+ }
301
+ /** @hidden */
302
+ _setArrowStyles(position, rtl) {
303
+ if (this._noArrow) {
304
+ this._arrowClasses = '';
305
+ return;
306
+ }
307
+ if (position.overlayY !== position.originY &&
308
+ position.originY !== 'center' &&
309
+ position.overlayY !== 'center' &&
310
+ position.overlayX === position.originX) {
311
+ this._arrowClasses =
312
+ `fd-popover__body--${position.overlayY === 'top' ? 'below' : 'above'}` +
313
+ ` fd-popover__body--arrow-${position.overlayY}` +
314
+ ` fd-popover__body--arrow-x-${position.originX} `;
315
+ }
316
+ else if (position.overlayX !== position.originX &&
317
+ position.overlayX !== 'center' &&
318
+ position.originX !== 'center' &&
319
+ position.originY === position.overlayY) {
320
+ let overlayX = position.overlayX;
321
+ if (rtl === 'rtl') {
322
+ overlayX = position.overlayX === 'end' ? 'start' : 'end';
323
+ }
324
+ this._arrowClasses =
325
+ `fd-popover__body--${overlayX === 'start' ? 'after' : 'before'}` +
326
+ ` fd-popover__body--arrow-${overlayX === 'start' ? 'left' : 'right'}` +
327
+ ` fd-popover__body--arrow-y-${position.originY} `;
328
+ }
329
+ else {
330
+ this._arrowClasses = 'fd-popover__body--no-arrow';
331
+ }
332
+ this.detectChanges();
333
+ }
334
+ /** @hidden */
335
+ detectChanges() {
336
+ if (!this._changeDetectorRef['destroyed']) {
337
+ this._changeDetectorRef.detectChanges();
338
+ }
339
+ }
340
+ /** @hidden */
341
+ _focusFirstTabbableElement() {
342
+ if (this._focusAutoCapture) {
343
+ this._cdkTrapFocus.focusTrap.focusFirstTabbableElement();
344
+ }
345
+ }
346
+ }
347
+ PopoverBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverBodyComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component });
348
+ PopoverBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: PopoverBodyComponent, isStandalone: true, selector: "fd-popover-body", host: { listeners: { "keyup": "bodyKeyupHandler($event)" } }, providers: [contentDensityObserverProviders({ alwaysAddModifiers: true })], viewQueries: [{ propertyName: "_cdkTrapFocus", first: true, predicate: CdkTrapFocus, descendants: true }, { propertyName: "_scrollbar", first: true, predicate: ScrollbarDirective, descendants: true }], ngImport: i0, template: "<div\n class=\"fd-popover__body fd-popover__body--static\"\n [class.fd-popover__body--no-arrow]=\"_noArrow\"\n [class]=\"_arrowClasses + (_additionalBodyClass || '')\"\n [cdkTrapFocus]=\"_focusTrapped\"\n [style]=\"_marginStyle\"\n [style.max-width.px]=\"_maxWidth\"\n [style.min-width.px]=\"_popoverBodyMinWidth\"\n [style.width.px]=\"_popoverBodyWidth\"\n [attr.role]=\"_bodyRole\"\n [attr.id]=\"_bodyId\"\n>\n <div\n fd-scrollbar\n class=\"fd-popover__wrapper\"\n [overrideTabindex]=\"_tabbableScrollbar\"\n *ngIf=\"!_disableScrollbar; else renderer\"\n >\n <ng-container *ngTemplateOutlet=\"renderer\"></ng-container>\n </div>\n</div>\n\n<ng-template #renderer>\n <ng-content select=\"[fd-popover-body-header]\"></ng-content>\n\n <ng-content select=\"[fd-popover-body-subheader]\"></ng-content>\n\n <ng-content></ng-content>\n\n {{ text }}\n\n <ng-container *ngTemplateOutlet=\"_templateToDisplay\"></ng-container>\n\n <ng-content select=\"[fd-popover-body-footer]\"></ng-content>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-popover{-webkit-box-sizing:border-box;--fdPopover_Offset:100%;--fdPopover_Center_Offset:50%;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;padding:0;position:relative}.fd-popover:after,.fd-popover:before{box-sizing:inherit;font-size:inherit}.fd-popover__control{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-popover__control:after,.fd-popover__control:before{box-sizing:inherit;font-size:inherit}.fd-popover__control:focus-visible{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor)}.fd-popover__control.is-expanded>*,.fd-popover__control[aria-expanded=true]>*{margin-bottom:0}.fd-popover__control.is-expanded+.fd-popover__body--input-message-group,.fd-popover__control[aria-expanded=true]+.fd-popover__body--input-message-group{margin-top:0}.fd-popover__control.is-disabled,.fd-popover__control:disabled,.fd-popover__control[aria-disabled=true]{pointer-events:none}.fd-popover__wrapper{border-radius:var(--fdPopover_Border_Radius);overflow:auto;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-popover__wrapper.is-focus,.fd-popover__wrapper:focus{outline:none;z-index:5}.fd-popover__wrapper::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-popover__wrapper::-webkit-scrollbar-corner,.fd-popover__wrapper::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-popover__wrapper::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-popover__wrapper::-webkit-scrollbar-thumb:active,.fd-popover__wrapper::-webkit-scrollbar-thumb:hover{box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-popover__wrapper::-webkit-scrollbar-corner,.fd-popover__wrapper::-webkit-scrollbar-track{border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}.fd-popover__wrapper[dir=rtl]::-webkit-scrollbar-corner,.fd-popover__wrapper[dir=rtl]::-webkit-scrollbar-track,[dir=rtl] .fd-popover__wrapper::-webkit-scrollbar-corner,[dir=rtl] .fd-popover__wrapper::-webkit-scrollbar-track{border-radius:var(--fdScrollbar_Border_Radius) 0 0 var(--fdScrollbar_Border_Radius)}.fd-popover__wrapper--visible{overflow:visible!important}.fd-popover__body{--fdIcon_Button_Height:2.25rem;--fdIcon_Button_Width:2.25rem;-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapContent_Shadow2);-webkit-transition:all .125s;background:var(--sapGroup_ContentBackground);border:0;border-radius:var(--fdPopover_Border_Radius);box-shadow:var(--sapContent_Shadow2);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;opacity:1;padding:0;position:absolute;top:calc(var(--fdPopover_Offset) + .5rem);transition:all .125s;visibility:visible;white-space:nowrap;z-index:1000}.fd-popover__body:after,.fd-popover__body:before{box-sizing:inherit;content:\"\";font-size:inherit;position:absolute}.fd-popover__body:before{border-bottom:calc(.5rem - var(--fdPopover_Border_Width)) solid var(--sapGroup_ContentBackground);border-left:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;border-right:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;top:calc(-.5rem + var(--fdPopover_Border_Width));z-index:1002}.fd-popover__body:after,.fd-popover__body:before{border-top:none;display:inline-block;height:0;width:0}.fd-popover__body:after{border-bottom:.5rem solid var(--fdPopover_Border_Color);border-left:.5rem solid transparent;border-right:.5rem solid transparent;top:-.5rem;z-index:1001}.fd-popover__body>:not(.fd-popover__wrapper){overflow:hidden}.fd-popover__body ol:first-child li:first-child a:before,.fd-popover__body ol:first-child li:first-child:before,.fd-popover__body ul:first-child li:first-child a:before,.fd-popover__body ul:first-child li:first-child:before,.fd-popover__body-header>:first-child,.fd-popover__body>:first-child{border-top-left-radius:var(--fdPopover_Border_Radius);border-top-right-radius:var(--fdPopover_Border_Radius)}.fd-popover__body ol:last-child li:last-child a:before,.fd-popover__body ol:last-child li:last-child:before,.fd-popover__body ul:last-child li:last-child a:before,.fd-popover__body ul:last-child li:last-child:before,.fd-popover__body-footer>:last-child,.fd-popover__body>:last-child{border-bottom-left-radius:var(--fdPopover_Border_Radius);border-bottom-right-radius:var(--fdPopover_Border_Radius)}.fd-popover__body[class*=-compact],.fd-popover__body[class*=-condensed],[class*=-compact] .fd-popover__body:not([class*=-cozy]),[class*=-condensed] .fd-popover__body:not([class*=-cozy]){--fdIcon_Button_Height:1.625rem;--fdIcon_Button_Width:2rem}.fd-popover__body--no-arrow{box-shadow:var(--sapContent_Shadow1);top:var(--fdPopover_Offset)}.fd-popover__body--no-arrow:after,.fd-popover__body--no-arrow:before{display:none}.fd-popover__body,.fd-popover__body--left{left:0}.fd-popover__body--left[dir=rtl],.fd-popover__body[dir=rtl],[dir=rtl] .fd-popover__body,[dir=rtl] .fd-popover__body--left{left:auto;right:0}.fd-popover__body--left:before,.fd-popover__body:before{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--left:after,.fd-popover__body:after{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--left[dir=rtl]:before,.fd-popover__body[dir=rtl]:before,[dir=rtl] .fd-popover__body--left:before,[dir=rtl] .fd-popover__body:before{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--left[dir=rtl]:after,.fd-popover__body[dir=rtl]:after,[dir=rtl] .fd-popover__body--left:after,[dir=rtl] .fd-popover__body:after{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--center{-webkit-transform:translateX(calc(var(--fdPopover_Center_Offset) * -1));left:var(--fdPopover_Center_Offset);transform:translate(calc(var(--fdPopover_Center_Offset) * -1))}.fd-popover__body--center[dir=rtl],[dir=rtl] .fd-popover__body--center{-webkit-transform:translateX(var(--fdPopover_Center_Offset));left:auto;right:var(--fdPopover_Center_Offset);transform:translate(var(--fdPopover_Center_Offset))}.fd-popover__body--right{left:auto;right:0}.fd-popover__body--right[dir=rtl],[dir=rtl] .fd-popover__body--right{left:0;right:auto}.fd-popover__body--right:before{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--right:after{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--right[dir=rtl]:before,[dir=rtl] .fd-popover__body--right:before{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width));right:auto}.fd-popover__body--right[dir=rtl]:after,[dir=rtl] .fd-popover__body--right:after{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width));right:auto}.fd-popover__body--before{left:auto!important;right:var(--fdPopover_Offset)!important;top:0}.fd-popover__body--after{left:var(--fdPopover_Offset)!important;right:auto!important;top:0}.fd-popover__body--middle{-webkit-transform:translateY(calc(var(--fdPopover_Center_Offset) * -1));top:var(--fdPopover_Center_Offset);transform:translateY(calc(var(--fdPopover_Center_Offset) * -1))}.fd-popover__body--bottom{bottom:0;top:auto}.fd-popover__body--above{bottom:var(--fdPopover_Offset);top:auto}.fd-popover__body--arrow-bottom{bottom:calc(var(--fdPopover_Offset) + .5rem)!important}.fd-popover__body--arrow-bottom:before{border-bottom:none;border-left:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;border-right:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;border-top:calc(.5rem - var(--fdPopover_Border_Width)) solid var(--sapGroup_ContentBackground);display:inline-block;height:0;top:100%;width:0}.fd-popover__body--arrow-bottom:after{border-bottom:none;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-top:.5rem solid var(--fdPopover_Border_Color);display:inline-block;height:0;top:100%;width:0}.fd-popover__body--arrow-left{left:calc(var(--fdPopover_Offset) + .5rem)!important}.fd-popover__body--arrow-left:before{border-bottom:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;border-right:calc(.5rem - var(--fdPopover_Border_Width)) solid var(--sapGroup_ContentBackground);border-top:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;top:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--arrow-left:after,.fd-popover__body--arrow-left:before{border-left:none;display:inline-block;height:0;left:auto!important;right:100%!important;width:0}.fd-popover__body--arrow-left:after{border-bottom:.5rem solid transparent;border-right:.5rem solid var(--fdPopover_Border_Color);border-top:.5rem solid transparent;top:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--arrow-right{right:calc(var(--fdPopover_Offset) + .5rem)!important}.fd-popover__body--arrow-right:before{border-bottom:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;border-left:calc(.5rem - var(--fdPopover_Border_Width)) solid var(--sapGroup_ContentBackground);border-top:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;top:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--arrow-right:after,.fd-popover__body--arrow-right:before{border-right:none;display:inline-block;height:0;left:100%!important;right:auto!important;width:0}.fd-popover__body--arrow-right:after{border-bottom:.5rem solid transparent;border-left:.5rem solid var(--fdPopover_Border_Color);border-top:.5rem solid transparent;top:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--arrow-x-center:after,.fd-popover__body--arrow-x-center:before{-webkit-transform:translateX(-50%);left:50%;transform:translate(-50%)}.fd-popover__body--arrow-x-center[dir=rtl]:after,.fd-popover__body--arrow-x-center[dir=rtl]:before,[dir=rtl] .fd-popover__body--arrow-x-center:after,[dir=rtl] .fd-popover__body--arrow-x-center:before{-webkit-transform:translateX(50%);left:auto;right:50%;transform:translate(50%)}.fd-popover__body--arrow-x-end:before{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--arrow-x-end:after{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--arrow-x-end[dir=rtl]:before,[dir=rtl] .fd-popover__body--arrow-x-end:before{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width));right:auto}.fd-popover__body--arrow-x-end[dir=rtl]:after,[dir=rtl] .fd-popover__body--arrow-x-end:after{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width));right:auto}.fd-popover__body--arrow-y-center:after,.fd-popover__body--arrow-y-center:before{-webkit-transform:translateY(-50%);top:50%;transform:translateY(-50%)}.fd-popover__body--arrow-y-end:before{bottom:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width));top:auto}.fd-popover__body--arrow-y-end:after{bottom:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width));top:auto}.fd-popover__body--dropdown{width:max-content}.fd-popover__body--dropdown-fill{display:block;max-width:40rem;width:calc(100% - var(--sapGroup_BorderWidth) * 2)}.fd-popover__body--static{--fdPopover_Offset:0%;--fdPopover_Center_Offset:0%;position:relative}.fd-popover__body.is-hidden,.fd-popover__body[aria-hidden=true]{opacity:0;visibility:hidden;z-index:-1}.fd-popover__body .fd-popover__body--hidden{display:none}.fd-popover__body--input-message-group{-webkit-box-shadow:none;border:none;box-shadow:none}.fd-popover__body--inline-help{font-size:var(--sapFontSmallSize);padding:.75rem}.fd-popover__body--inline-help-icon{--fdIcon_Button_Height:1.375rem;--fdIcon_Button_Width:1.375rem}.fd-popover--input-message-group .fd-popover__body,.fd-popover--input-message-group .fd-popover__body--no-arrow{-webkit-box-shadow:none;border:none;box-shadow:none}.fd-popover--full-width{width:100%}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}fd-popover-body{max-width:100%;max-height:100%}.fd-popover-custom{display:inline-block;max-width:100%}.fd-popover-custom--disabled .fd-popover__control{cursor:auto}.fd-popover__body{max-height:100%;max-width:100%;display:flex}.fd-popover__body--hidden{display:none!important}.fd-popover__body.fd-form-message:before{width:auto;height:auto;position:relative;inset:0;border:none}.fd-popover__body>.fd-scrollbar{max-height:100%;max-width:100%;width:100%;border-radius:inherit}.fd-popover__body .fd-list{border-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-list__item:first-child{border-top-right-radius:var(--fdPopover_Border_Radius);border-top-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-list__item:last-child{border-bottom-right-radius:var(--fdPopover_Border_Radius);border-bottom-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-nested-list{border-bottom:none}.fd-popover__body .fd-nested-list__item:first-child .fd-nested-list__content{border-top-right-radius:var(--fdPopover_Border_Radius);border-top-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-nested-list__item:last-child .fd-nested-list__item:last-child .fd-nested-list__link{border-bottom-right-radius:var(--fdPopover_Border_Radius);border-bottom-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-nested-list__item:last-child .fd-nested-list__content{border-bottom-right-radius:var(--fdPopover_Border_Radius);border-bottom-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-nested-list__item:last-child .fd-nested-list__content.is-selected{border-bottom-right-radius:0;border-bottom-left-radius:0}.fd-popover__body .fd-side-nav,.fd-popover__body .fd-nested-list__item{border-right:none}.fd-popover__body .fd-side-nav:first-child,.fd-popover__body .fd-nested-list__item:first-child{border-top-right-radius:var(--fdPopover_Border_Radius);border-top-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-side-nav:last-child,.fd-popover__body .fd-nested-list__item:last-child{border-bottom-right-radius:var(--fdPopover_Border_Radius);border-bottom-left-radius:var(--fdPopover_Border_Radius)}.cdk-overlay-container{z-index:1002}.cdk-overlay-pane{max-width:100%;max-height:100%}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible", "overrideTabindex"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
349
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverBodyComponent, decorators: [{
350
+ type: Component,
351
+ args: [{ selector: 'fd-popover-body', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders({ alwaysAddModifiers: true })], standalone: true, imports: [A11yModule, NgIf, CdkScrollable, ScrollbarDirective, NgTemplateOutlet], template: "<div\n class=\"fd-popover__body fd-popover__body--static\"\n [class.fd-popover__body--no-arrow]=\"_noArrow\"\n [class]=\"_arrowClasses + (_additionalBodyClass || '')\"\n [cdkTrapFocus]=\"_focusTrapped\"\n [style]=\"_marginStyle\"\n [style.max-width.px]=\"_maxWidth\"\n [style.min-width.px]=\"_popoverBodyMinWidth\"\n [style.width.px]=\"_popoverBodyWidth\"\n [attr.role]=\"_bodyRole\"\n [attr.id]=\"_bodyId\"\n>\n <div\n fd-scrollbar\n class=\"fd-popover__wrapper\"\n [overrideTabindex]=\"_tabbableScrollbar\"\n *ngIf=\"!_disableScrollbar; else renderer\"\n >\n <ng-container *ngTemplateOutlet=\"renderer\"></ng-container>\n </div>\n</div>\n\n<ng-template #renderer>\n <ng-content select=\"[fd-popover-body-header]\"></ng-content>\n\n <ng-content select=\"[fd-popover-body-subheader]\"></ng-content>\n\n <ng-content></ng-content>\n\n {{ text }}\n\n <ng-container *ngTemplateOutlet=\"_templateToDisplay\"></ng-container>\n\n <ng-content select=\"[fd-popover-body-footer]\"></ng-content>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-popover{-webkit-box-sizing:border-box;--fdPopover_Offset:100%;--fdPopover_Center_Offset:50%;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;padding:0;position:relative}.fd-popover:after,.fd-popover:before{box-sizing:inherit;font-size:inherit}.fd-popover__control{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-popover__control:after,.fd-popover__control:before{box-sizing:inherit;font-size:inherit}.fd-popover__control:focus-visible{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor)}.fd-popover__control.is-expanded>*,.fd-popover__control[aria-expanded=true]>*{margin-bottom:0}.fd-popover__control.is-expanded+.fd-popover__body--input-message-group,.fd-popover__control[aria-expanded=true]+.fd-popover__body--input-message-group{margin-top:0}.fd-popover__control.is-disabled,.fd-popover__control:disabled,.fd-popover__control[aria-disabled=true]{pointer-events:none}.fd-popover__wrapper{border-radius:var(--fdPopover_Border_Radius);overflow:auto;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-popover__wrapper.is-focus,.fd-popover__wrapper:focus{outline:none;z-index:5}.fd-popover__wrapper::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-popover__wrapper::-webkit-scrollbar-corner,.fd-popover__wrapper::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-popover__wrapper::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-popover__wrapper::-webkit-scrollbar-thumb:active,.fd-popover__wrapper::-webkit-scrollbar-thumb:hover{box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-popover__wrapper::-webkit-scrollbar-corner,.fd-popover__wrapper::-webkit-scrollbar-track{border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}.fd-popover__wrapper[dir=rtl]::-webkit-scrollbar-corner,.fd-popover__wrapper[dir=rtl]::-webkit-scrollbar-track,[dir=rtl] .fd-popover__wrapper::-webkit-scrollbar-corner,[dir=rtl] .fd-popover__wrapper::-webkit-scrollbar-track{border-radius:var(--fdScrollbar_Border_Radius) 0 0 var(--fdScrollbar_Border_Radius)}.fd-popover__wrapper--visible{overflow:visible!important}.fd-popover__body{--fdIcon_Button_Height:2.25rem;--fdIcon_Button_Width:2.25rem;-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapContent_Shadow2);-webkit-transition:all .125s;background:var(--sapGroup_ContentBackground);border:0;border-radius:var(--fdPopover_Border_Radius);box-shadow:var(--sapContent_Shadow2);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;opacity:1;padding:0;position:absolute;top:calc(var(--fdPopover_Offset) + .5rem);transition:all .125s;visibility:visible;white-space:nowrap;z-index:1000}.fd-popover__body:after,.fd-popover__body:before{box-sizing:inherit;content:\"\";font-size:inherit;position:absolute}.fd-popover__body:before{border-bottom:calc(.5rem - var(--fdPopover_Border_Width)) solid var(--sapGroup_ContentBackground);border-left:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;border-right:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;top:calc(-.5rem + var(--fdPopover_Border_Width));z-index:1002}.fd-popover__body:after,.fd-popover__body:before{border-top:none;display:inline-block;height:0;width:0}.fd-popover__body:after{border-bottom:.5rem solid var(--fdPopover_Border_Color);border-left:.5rem solid transparent;border-right:.5rem solid transparent;top:-.5rem;z-index:1001}.fd-popover__body>:not(.fd-popover__wrapper){overflow:hidden}.fd-popover__body ol:first-child li:first-child a:before,.fd-popover__body ol:first-child li:first-child:before,.fd-popover__body ul:first-child li:first-child a:before,.fd-popover__body ul:first-child li:first-child:before,.fd-popover__body-header>:first-child,.fd-popover__body>:first-child{border-top-left-radius:var(--fdPopover_Border_Radius);border-top-right-radius:var(--fdPopover_Border_Radius)}.fd-popover__body ol:last-child li:last-child a:before,.fd-popover__body ol:last-child li:last-child:before,.fd-popover__body ul:last-child li:last-child a:before,.fd-popover__body ul:last-child li:last-child:before,.fd-popover__body-footer>:last-child,.fd-popover__body>:last-child{border-bottom-left-radius:var(--fdPopover_Border_Radius);border-bottom-right-radius:var(--fdPopover_Border_Radius)}.fd-popover__body[class*=-compact],.fd-popover__body[class*=-condensed],[class*=-compact] .fd-popover__body:not([class*=-cozy]),[class*=-condensed] .fd-popover__body:not([class*=-cozy]){--fdIcon_Button_Height:1.625rem;--fdIcon_Button_Width:2rem}.fd-popover__body--no-arrow{box-shadow:var(--sapContent_Shadow1);top:var(--fdPopover_Offset)}.fd-popover__body--no-arrow:after,.fd-popover__body--no-arrow:before{display:none}.fd-popover__body,.fd-popover__body--left{left:0}.fd-popover__body--left[dir=rtl],.fd-popover__body[dir=rtl],[dir=rtl] .fd-popover__body,[dir=rtl] .fd-popover__body--left{left:auto;right:0}.fd-popover__body--left:before,.fd-popover__body:before{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--left:after,.fd-popover__body:after{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--left[dir=rtl]:before,.fd-popover__body[dir=rtl]:before,[dir=rtl] .fd-popover__body--left:before,[dir=rtl] .fd-popover__body:before{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--left[dir=rtl]:after,.fd-popover__body[dir=rtl]:after,[dir=rtl] .fd-popover__body--left:after,[dir=rtl] .fd-popover__body:after{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--center{-webkit-transform:translateX(calc(var(--fdPopover_Center_Offset) * -1));left:var(--fdPopover_Center_Offset);transform:translate(calc(var(--fdPopover_Center_Offset) * -1))}.fd-popover__body--center[dir=rtl],[dir=rtl] .fd-popover__body--center{-webkit-transform:translateX(var(--fdPopover_Center_Offset));left:auto;right:var(--fdPopover_Center_Offset);transform:translate(var(--fdPopover_Center_Offset))}.fd-popover__body--right{left:auto;right:0}.fd-popover__body--right[dir=rtl],[dir=rtl] .fd-popover__body--right{left:0;right:auto}.fd-popover__body--right:before{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--right:after{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--right[dir=rtl]:before,[dir=rtl] .fd-popover__body--right:before{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width));right:auto}.fd-popover__body--right[dir=rtl]:after,[dir=rtl] .fd-popover__body--right:after{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width));right:auto}.fd-popover__body--before{left:auto!important;right:var(--fdPopover_Offset)!important;top:0}.fd-popover__body--after{left:var(--fdPopover_Offset)!important;right:auto!important;top:0}.fd-popover__body--middle{-webkit-transform:translateY(calc(var(--fdPopover_Center_Offset) * -1));top:var(--fdPopover_Center_Offset);transform:translateY(calc(var(--fdPopover_Center_Offset) * -1))}.fd-popover__body--bottom{bottom:0;top:auto}.fd-popover__body--above{bottom:var(--fdPopover_Offset);top:auto}.fd-popover__body--arrow-bottom{bottom:calc(var(--fdPopover_Offset) + .5rem)!important}.fd-popover__body--arrow-bottom:before{border-bottom:none;border-left:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;border-right:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;border-top:calc(.5rem - var(--fdPopover_Border_Width)) solid var(--sapGroup_ContentBackground);display:inline-block;height:0;top:100%;width:0}.fd-popover__body--arrow-bottom:after{border-bottom:none;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-top:.5rem solid var(--fdPopover_Border_Color);display:inline-block;height:0;top:100%;width:0}.fd-popover__body--arrow-left{left:calc(var(--fdPopover_Offset) + .5rem)!important}.fd-popover__body--arrow-left:before{border-bottom:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;border-right:calc(.5rem - var(--fdPopover_Border_Width)) solid var(--sapGroup_ContentBackground);border-top:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;top:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--arrow-left:after,.fd-popover__body--arrow-left:before{border-left:none;display:inline-block;height:0;left:auto!important;right:100%!important;width:0}.fd-popover__body--arrow-left:after{border-bottom:.5rem solid transparent;border-right:.5rem solid var(--fdPopover_Border_Color);border-top:.5rem solid transparent;top:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--arrow-right{right:calc(var(--fdPopover_Offset) + .5rem)!important}.fd-popover__body--arrow-right:before{border-bottom:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;border-left:calc(.5rem - var(--fdPopover_Border_Width)) solid var(--sapGroup_ContentBackground);border-top:calc(.5rem - var(--fdPopover_Border_Width)) solid transparent;top:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--arrow-right:after,.fd-popover__body--arrow-right:before{border-right:none;display:inline-block;height:0;left:100%!important;right:auto!important;width:0}.fd-popover__body--arrow-right:after{border-bottom:.5rem solid transparent;border-left:.5rem solid var(--fdPopover_Border_Color);border-top:.5rem solid transparent;top:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--arrow-x-center:after,.fd-popover__body--arrow-x-center:before{-webkit-transform:translateX(-50%);left:50%;transform:translate(-50%)}.fd-popover__body--arrow-x-center[dir=rtl]:after,.fd-popover__body--arrow-x-center[dir=rtl]:before,[dir=rtl] .fd-popover__body--arrow-x-center:after,[dir=rtl] .fd-popover__body--arrow-x-center:before{-webkit-transform:translateX(50%);left:auto;right:50%;transform:translate(50%)}.fd-popover__body--arrow-x-end:before{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width))}.fd-popover__body--arrow-x-end:after{left:auto;right:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width))}.fd-popover__body--arrow-x-end[dir=rtl]:before,[dir=rtl] .fd-popover__body--arrow-x-end:before{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width));right:auto}.fd-popover__body--arrow-x-end[dir=rtl]:after,[dir=rtl] .fd-popover__body--arrow-x-end:after{left:calc(var(--fdIcon_Button_Width) * .5 - .5rem - var(--fdPopover_Border_Width));right:auto}.fd-popover__body--arrow-y-center:after,.fd-popover__body--arrow-y-center:before{-webkit-transform:translateY(-50%);top:50%;transform:translateY(-50%)}.fd-popover__body--arrow-y-end:before{bottom:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width) + var(--fdPopover_Border_Width));top:auto}.fd-popover__body--arrow-y-end:after{bottom:calc(var(--fdIcon_Button_Height) * .5 - .5rem - var(--fdPopover_Border_Width));top:auto}.fd-popover__body--dropdown{width:max-content}.fd-popover__body--dropdown-fill{display:block;max-width:40rem;width:calc(100% - var(--sapGroup_BorderWidth) * 2)}.fd-popover__body--static{--fdPopover_Offset:0%;--fdPopover_Center_Offset:0%;position:relative}.fd-popover__body.is-hidden,.fd-popover__body[aria-hidden=true]{opacity:0;visibility:hidden;z-index:-1}.fd-popover__body .fd-popover__body--hidden{display:none}.fd-popover__body--input-message-group{-webkit-box-shadow:none;border:none;box-shadow:none}.fd-popover__body--inline-help{font-size:var(--sapFontSmallSize);padding:.75rem}.fd-popover__body--inline-help-icon{--fdIcon_Button_Height:1.375rem;--fdIcon_Button_Width:1.375rem}.fd-popover--input-message-group .fd-popover__body,.fd-popover--input-message-group .fd-popover__body--no-arrow{-webkit-box-shadow:none;border:none;box-shadow:none}.fd-popover--full-width{width:100%}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}fd-popover-body{max-width:100%;max-height:100%}.fd-popover-custom{display:inline-block;max-width:100%}.fd-popover-custom--disabled .fd-popover__control{cursor:auto}.fd-popover__body{max-height:100%;max-width:100%;display:flex}.fd-popover__body--hidden{display:none!important}.fd-popover__body.fd-form-message:before{width:auto;height:auto;position:relative;inset:0;border:none}.fd-popover__body>.fd-scrollbar{max-height:100%;max-width:100%;width:100%;border-radius:inherit}.fd-popover__body .fd-list{border-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-list__item:first-child{border-top-right-radius:var(--fdPopover_Border_Radius);border-top-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-list__item:last-child{border-bottom-right-radius:var(--fdPopover_Border_Radius);border-bottom-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-nested-list{border-bottom:none}.fd-popover__body .fd-nested-list__item:first-child .fd-nested-list__content{border-top-right-radius:var(--fdPopover_Border_Radius);border-top-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-nested-list__item:last-child .fd-nested-list__item:last-child .fd-nested-list__link{border-bottom-right-radius:var(--fdPopover_Border_Radius);border-bottom-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-nested-list__item:last-child .fd-nested-list__content{border-bottom-right-radius:var(--fdPopover_Border_Radius);border-bottom-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-nested-list__item:last-child .fd-nested-list__content.is-selected{border-bottom-right-radius:0;border-bottom-left-radius:0}.fd-popover__body .fd-side-nav,.fd-popover__body .fd-nested-list__item{border-right:none}.fd-popover__body .fd-side-nav:first-child,.fd-popover__body .fd-nested-list__item:first-child{border-top-right-radius:var(--fdPopover_Border_Radius);border-top-left-radius:var(--fdPopover_Border_Radius)}.fd-popover__body .fd-side-nav:last-child,.fd-popover__body .fd-nested-list__item:last-child{border-bottom-right-radius:var(--fdPopover_Border_Radius);border-bottom-left-radius:var(--fdPopover_Border_Radius)}.cdk-overlay-container{z-index:1002}.cdk-overlay-pane{max-width:100%;max-height:100%}\n"] }]
352
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ContentDensityObserver }]; }, propDecorators: { _cdkTrapFocus: [{
353
+ type: ViewChild,
354
+ args: [CdkTrapFocus]
355
+ }], _scrollbar: [{
356
+ type: ViewChild,
357
+ args: [ScrollbarDirective]
358
+ }], bodyKeyupHandler: [{
359
+ type: HostListener,
360
+ args: ['keyup', ['$event']]
361
+ }] } });
362
+
384
363
  class PopoverContainerDirective {
385
364
  /** @hidden */
386
365
  constructor(_elmRef) {
@@ -390,28 +369,166 @@ class PopoverContainerDirective {
390
369
  /** @hidden */
391
370
  this._destroy$ = new Subject();
392
371
  }
393
- /** @hidden */
394
- ngOnInit() {
395
- resizeObservable(this._elmRef.nativeElement)
396
- .pipe(takeUntil(this._destroy$))
397
- .subscribe(() => {
398
- this.refreshPosition$.next();
372
+ /** @hidden */
373
+ ngOnInit() {
374
+ resizeObservable(this._elmRef.nativeElement)
375
+ .pipe(takeUntil(this._destroy$))
376
+ .subscribe(() => {
377
+ this.refreshPosition$.next();
378
+ });
379
+ }
380
+ /** @hidden */
381
+ ngOnDestroy() {
382
+ this._destroy$.next();
383
+ this._destroy$.complete();
384
+ }
385
+ }
386
+ PopoverContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverContainerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
387
+ PopoverContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: PopoverContainerDirective, isStandalone: true, selector: "[fdPopoverContainer]", ngImport: i0 });
388
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverContainerDirective, decorators: [{
389
+ type: Directive,
390
+ args: [{
391
+ selector: '[fdPopoverContainer]',
392
+ standalone: true
393
+ }]
394
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
395
+
396
+ /**
397
+ * A component used to enforce a certain layout for the popover.
398
+ * ```html
399
+ * <fd-popover>
400
+ * <fd-popover-control>Control Element</fd-popover-control>
401
+ * <fd-popover-body>Popover Body</fd-popover-body>
402
+ * </fd-popover>
403
+ * ```
404
+ */
405
+ class PopoverControlComponent {
406
+ /** @hidden */
407
+ constructor(elRef) {
408
+ this.elRef = elRef;
409
+ /** @hidden */
410
+ this._tabbable = false;
411
+ }
412
+ /** @hidden */
413
+ ngAfterContentChecked() {
414
+ if (this._tabbable) {
415
+ this.makeTabbable();
416
+ }
417
+ }
418
+ /** @hidden */
419
+ makeTabbable() {
420
+ const elemChild = this.elRef.nativeElement.children[0];
421
+ if (elemChild && elemChild.getAttribute('tabindex') !== '-1') {
422
+ elemChild.tabIndex = '0';
423
+ }
424
+ }
425
+ }
426
+ PopoverControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverControlComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
427
+ PopoverControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: PopoverControlComponent, isStandalone: true, selector: "fd-popover-control", ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
428
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverControlComponent, decorators: [{
429
+ type: Component,
430
+ args: [{ selector: 'fd-popover-control', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<ng-content></ng-content>\n" }]
431
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
432
+
433
+ const POPOVER_COMPONENT = new InjectionToken('PopoverInterface');
434
+
435
+ let mobilePopoverUniqueId = 0;
436
+ class PopoverMobileComponent extends MobileModeBase {
437
+ /** @hidden */
438
+ get titleId() {
439
+ return this.id + '-title';
440
+ }
441
+ /** @hidden */
442
+ constructor(elementRef, dialogService, _changeDetectorref, _popoverComponent, mobileModes) {
443
+ super(elementRef, dialogService, _popoverComponent, MobileModeControl.POPOVER, mobileModes);
444
+ this._changeDetectorref = _changeDetectorref;
445
+ /** @hidden
446
+ * from mobile class can not prefix _,
447
+ * to avoid build issues
448
+ */
449
+ this.childContent = undefined;
450
+ /** @hidden */
451
+ this.id = 'fd-popover-mobile-' + mobilePopoverUniqueId++;
452
+ /** @hidden */
453
+ this._subscriptions = new Subscription();
454
+ }
455
+ /** @hidden */
456
+ ngOnInit() {
457
+ this._listenOnPopoverOpenChange();
458
+ this.title = this.mobileConfig.title || '';
459
+ this.viewBody = this.childContent?.popoverBodyContentTemplate ?? null;
460
+ this.viewFooter = this.childContent?.popoverFooterContentTemplate ?? null;
461
+ this._changeDetectorref.markForCheck();
462
+ }
463
+ /** @hidden */
464
+ ngOnDestroy() {
465
+ this.dialogRef?.close();
466
+ super.onDestroy();
467
+ this._subscriptions.unsubscribe();
468
+ }
469
+ /** Closes the Dialog and Popover component */
470
+ close() {
471
+ this.dialogRef.close();
472
+ this._component.close();
473
+ }
474
+ /** @hidden Opens/closes the Dialog based on Popover isOpenChange events */
475
+ _listenOnPopoverOpenChange() {
476
+ this._subscriptions.add(this._component.isOpenChange.pipe(takeUntil(this._onDestroy$)).subscribe((isOpen) => {
477
+ if (isOpen) {
478
+ this._openDialog();
479
+ }
480
+ else {
481
+ this.dialogRef.hide(true);
482
+ }
483
+ }));
484
+ }
485
+ /** @hidden Opens the Dialog */
486
+ _openDialog() {
487
+ this.dialogRef = this._dialogService.open(this._dialogTemplate, {
488
+ verticalPadding: true,
489
+ horizontalPadding: true,
490
+ ...this.dialogConfig,
491
+ mobile: true,
492
+ focusTrapped: true,
493
+ escKeyCloseable: false,
494
+ backdropClickCloseable: false,
495
+ container: this._elementRef.nativeElement,
496
+ responsivePadding: true,
497
+ ariaLabelledBy: this.titleId
399
498
  });
400
499
  }
401
- /** @hidden */
402
- ngOnDestroy() {
403
- this._destroy$.next();
404
- this._destroy$.complete();
405
- }
406
500
  }
407
- PopoverContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverContainerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
408
- PopoverContainerDirectivedir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: PopoverContainerDirective, selector: "[fdPopoverContainer]", ngImport: i0 });
409
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverContainerDirective, decorators: [{
410
- type: Directive,
501
+ PopoverMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverMobileComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.DialogService }, { token: i0.ChangeDetectorRef }, { token: POPOVER_COMPONENT }, { token: MOBILE_MODE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
502
+ PopoverMobileComponentcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: PopoverMobileComponent, isStandalone: true, selector: "fd-popover-mobile", viewQueries: [{ propertyName: "_dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" data-mobile-popover>\n <fd-dialog-header>\n <h1 fd-title [id]=\"titleId\">{{ title }}</h1>\n <button fd-dialog-close-button *ngIf=\"this.mobileConfig.hasCloseButton\" (click)=\"close()\"></button>\n </fd-dialog-header>\n\n <fd-dialog-body>\n <ng-container *ngTemplateOutlet=\"viewBody\"></ng-container>\n </fd-dialog-body>\n\n <fd-dialog-footer *ngIf=\"viewFooter\">\n <ng-container *ngTemplateOutlet=\"viewFooter\"></ng-container>\n </fd-dialog-footer>\n </fd-dialog>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1$1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1$1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "component", type: i2$1.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "ngmodule", type: TitleModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
503
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverMobileComponent, decorators: [{
504
+ type: Component,
505
+ args: [{ selector: 'fd-popover-mobile', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [DialogModule, TitleModule, NgIf, CdkScrollable, ScrollbarDirective, NgTemplateOutlet], template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" data-mobile-popover>\n <fd-dialog-header>\n <h1 fd-title [id]=\"titleId\">{{ title }}</h1>\n <button fd-dialog-close-button *ngIf=\"this.mobileConfig.hasCloseButton\" (click)=\"close()\"></button>\n </fd-dialog-header>\n\n <fd-dialog-body>\n <ng-container *ngTemplateOutlet=\"viewBody\"></ng-container>\n </fd-dialog-body>\n\n <fd-dialog-footer *ngIf=\"viewFooter\">\n <ng-container *ngTemplateOutlet=\"viewFooter\"></ng-container>\n </fd-dialog-footer>\n </fd-dialog>\n</ng-template>\n" }]
506
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.DialogService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
507
+ type: Inject,
508
+ args: [POPOVER_COMPONENT]
509
+ }] }, { type: undefined, decorators: [{
510
+ type: Optional
511
+ }, {
512
+ type: Inject,
513
+ args: [MOBILE_MODE_CONFIG]
514
+ }] }]; }, propDecorators: { _dialogTemplate: [{
515
+ type: ViewChild,
516
+ args: ['dialogTemplate']
517
+ }] } });
518
+
519
+ class PopoverMobileModule {
520
+ }
521
+ PopoverMobileModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverMobileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
522
+ PopoverMobileModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: PopoverMobileModule, imports: [CommonModule, DialogModule, ButtonModule, PopoverMobileComponent], exports: [PopoverMobileComponent] });
523
+ PopoverMobileModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverMobileModule, providers: [DynamicComponentService], imports: [CommonModule, DialogModule, ButtonModule, PopoverMobileComponent] });
524
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverMobileModule, decorators: [{
525
+ type: NgModule,
411
526
  args: [{
412
- selector: '[fdPopoverContainer]'
527
+ imports: [CommonModule, DialogModule, ButtonModule, PopoverMobileComponent],
528
+ exports: [PopoverMobileComponent],
529
+ providers: [DynamicComponentService]
413
530
  }]
414
- }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
531
+ }] });
415
532
 
416
533
  const MAX_BODY_SIZE = 99999999;
417
534
  class PopoverService extends BasePopoverClass {
@@ -431,6 +548,8 @@ class PopoverService extends BasePopoverClass {
431
548
  /** @hidden */
432
549
  this._eventRef = [];
433
550
  /** @hidden */
551
+ this._stopCloseListening$ = new Subject();
552
+ /** @hidden */
434
553
  this._placementRefresh$ = new Subject();
435
554
  /** An RxJS Subject that will kill the data stream upon component’s destruction (for unsubscribing) */
436
555
  this._onDestroy$ = new Subject();
@@ -447,7 +566,12 @@ class PopoverService extends BasePopoverClass {
447
566
  * PopoverComponent and PopoverComponent instance
448
567
  */
449
568
  initialise(triggerElement, config, templateData) {
450
- this._templateData = templateData;
569
+ if (templateData instanceof TemplateRef) {
570
+ this.templateContent = templateData;
571
+ }
572
+ else {
573
+ this._templateData = templateData;
574
+ }
451
575
  this._triggerElement = triggerElement;
452
576
  if (config) {
453
577
  this.refreshConfiguration(config);
@@ -463,7 +587,7 @@ class PopoverService extends BasePopoverClass {
463
587
  }
464
588
  /** Closes the popover. */
465
589
  close(focusActiveElement = true) {
466
- if (this._overlayRef) {
590
+ if (this._overlayRef && this._overlayRef.hasAttached()) {
467
591
  this._overlayRef.dispose();
468
592
  const prevState = this.isOpen;
469
593
  this.isOpen = false;
@@ -490,6 +614,7 @@ class PopoverService extends BasePopoverClass {
490
614
  else {
491
615
  this._attachBodyComponent();
492
616
  }
617
+ this._stopCloseListening$.next();
493
618
  this._listenForPositionChange(position.positionChanges);
494
619
  if (this.fillControlMode) {
495
620
  this._listenOnResize();
@@ -501,7 +626,6 @@ class PopoverService extends BasePopoverClass {
501
626
  }
502
627
  this._detectChanges();
503
628
  this._listenOnClose();
504
- this._listenOnOutClicks();
505
629
  this._focusFirstTabbableElement();
506
630
  this._onLoad.next(this._getPopoverBody()._elementRef);
507
631
  this._overlayRef.updatePosition();
@@ -546,6 +670,7 @@ class PopoverService extends BasePopoverClass {
546
670
  this._removeTriggerListeners();
547
671
  if (this._overlayRef) {
548
672
  this._overlayRef.detach();
673
+ this._overlayRef.dispose();
549
674
  }
550
675
  }
551
676
  /**
@@ -687,15 +812,13 @@ class PopoverService extends BasePopoverClass {
687
812
  }
688
813
  /** Subscribe to close events from CDK Overlay, to throw proper events, change values */
689
814
  _listenOnClose() {
690
- const closeEvents$ = merge(this._overlayRef.detachments(), this._getPopoverBody().onClose);
691
- closeEvents$.pipe(takeUntil(this._refresh$)).subscribe(() => this.close());
815
+ const closeEvents$ = merge(this._overlayRef.detachments(), this._getPopoverBody().onClose, this._outsideClicks$());
816
+ const finalizer$ = merge(this._stopCloseListening$, this._refresh$);
817
+ closeEvents$.pipe(takeUntil(finalizer$)).subscribe(() => this.close());
692
818
  }
693
819
  /** Listener for click events */
694
- _listenOnOutClicks() {
695
- const closeEvents$ = merge(this._overlayRef.backdropClick(), this._overlayRef._outsidePointerEvents);
696
- closeEvents$
697
- .pipe(filter((event) => this._shouldClose(event)), takeUntil(this._refresh$))
698
- .subscribe(() => this.close());
820
+ _outsideClicks$() {
821
+ return merge(this._overlayRef.backdropClick(), this._overlayRef._outsidePointerEvents).pipe(filter((event) => this._shouldClose(event)));
699
822
  }
700
823
  /** @hidden */
701
824
  _shouldClose(event) {
@@ -795,116 +918,75 @@ class PopoverService extends BasePopoverClass {
795
918
  }
796
919
  }
797
920
  }
798
- PopoverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverService, deps: [{ token: i1$1.Overlay }, { token: i0.Renderer2 }, { token: i1$1.ViewportRuler }, { token: i0.Injector }, { token: i2$1.RtlService, optional: true }, { token: PopoverContainerDirective, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
921
+ PopoverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverService, deps: [{ token: i1$2.Overlay }, { token: i0.Renderer2 }, { token: i1$2.ViewportRuler }, { token: i0.Injector }, { token: i2$2.RtlService, optional: true }, { token: PopoverContainerDirective, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
799
922
  PopoverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverService });
800
923
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverService, decorators: [{
801
924
  type: Injectable
802
- }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.Renderer2 }, { type: i1$1.ViewportRuler }, { type: i0.Injector }, { type: i2$1.RtlService, decorators: [{
925
+ }], ctorParameters: function () { return [{ type: i1$2.Overlay }, { type: i0.Renderer2 }, { type: i1$2.ViewportRuler }, { type: i0.Injector }, { type: i2$2.RtlService, decorators: [{
803
926
  type: Optional
804
927
  }] }, { type: PopoverContainerDirective, decorators: [{
805
928
  type: Optional
806
929
  }] }]; } });
807
930
 
808
- const POPOVER_COMPONENT = new InjectionToken('PopoverInterface');
809
-
810
- let mobilePopoverUniqueId = 0;
811
- class PopoverMobileComponent extends MobileModeBase {
812
- /** @hidden */
813
- get titleId() {
814
- return this.id + '-title';
815
- }
816
- /** @hidden */
817
- constructor(elementRef, dialogService, _changeDetectorref, _popoverComponent, mobileModes) {
818
- super(elementRef, dialogService, _popoverComponent, MobileModeControl.POPOVER, mobileModes);
819
- this._changeDetectorref = _changeDetectorref;
820
- /** @hidden
821
- * from mobile class can not prefix _,
822
- * to avoid build issues
823
- */
824
- this.childContent = undefined;
825
- /** @hidden */
826
- this.id = 'fd-popover-mobile-' + mobilePopoverUniqueId++;
827
- /** @hidden */
828
- this._subscriptions = new Subscription();
931
+ class PopoverTriggerDirective {
932
+ /** Set reference to Popover Component */
933
+ set popover(popover) {
934
+ if (popover) {
935
+ popover.trigger = this._elementRef;
936
+ this._listenOnExpanded(popover);
937
+ }
938
+ this._setAriaAttributes(popover);
829
939
  }
830
940
  /** @hidden */
831
- ngOnInit() {
832
- this._listenOnPopoverOpenChange();
833
- this.title = this.mobileConfig.title || '';
834
- this.viewBody = this.childContent?.popoverBodyContentTemplate ?? null;
835
- this.viewFooter = this.childContent?.popoverFooterContentTemplate ?? null;
836
- this._changeDetectorref.markForCheck();
941
+ constructor(_elementRef) {
942
+ this._elementRef = _elementRef;
837
943
  }
838
944
  /** @hidden */
839
945
  ngOnDestroy() {
840
- this.dialogRef?.close();
841
- super.onDestroy();
842
- this._subscriptions.unsubscribe();
946
+ this._unsubscribeExpandedListener();
843
947
  }
844
- /** Closes the Dialog and Popover component */
845
- close() {
846
- this.dialogRef.close();
847
- this._component.close();
948
+ /** @hidden */
949
+ _listenOnExpanded(popover) {
950
+ this._unsubscribeExpandedListener();
951
+ if (popover) {
952
+ this._isExpandedSubscription = popover.isOpenChange
953
+ .pipe(startWith(popover.isOpen))
954
+ .subscribe((isOpen) => (this.ariaExpanded = isOpen));
955
+ }
848
956
  }
849
- /** @hidden Opens/closes the Dialog based on Popover isOpenChange events */
850
- _listenOnPopoverOpenChange() {
851
- this._subscriptions.add(this._component.isOpenChange.pipe(takeUntil(this._onDestroy$)).subscribe((isOpen) => {
852
- if (isOpen) {
853
- this._openDialog();
854
- }
855
- else {
856
- this.dialogRef.hide(true);
857
- }
858
- }));
957
+ /** @hidden */
958
+ _setAriaAttributes(popover) {
959
+ this.ariaHasPopup = !!popover;
960
+ this.ariaControls = popover ? popover.id : null;
859
961
  }
860
- /** @hidden Opens the Dialog */
861
- _openDialog() {
862
- this.dialogRef = this._dialogService.open(this._dialogTemplate, {
863
- verticalPadding: true,
864
- horizontalPadding: true,
865
- ...this.dialogConfig,
866
- mobile: true,
867
- focusTrapped: true,
868
- escKeyCloseable: false,
869
- backdropClickCloseable: false,
870
- container: this._elementRef.nativeElement,
871
- responsivePadding: true,
872
- ariaLabelledBy: this.titleId
873
- });
962
+ /** @hidden */
963
+ _unsubscribeExpandedListener() {
964
+ if (this._isExpandedSubscription) {
965
+ this._isExpandedSubscription.unsubscribe();
966
+ }
874
967
  }
875
968
  }
876
- PopoverMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverMobileComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.DialogService }, { token: i0.ChangeDetectorRef }, { token: POPOVER_COMPONENT }, { token: MOBILE_MODE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
877
- PopoverMobileComponentcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: PopoverMobileComponent, selector: "fd-popover-mobile", viewQueries: [{ propertyName: "_dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" data-mobile-popover>\n <fd-dialog-header>\n <h1 fd-title [id]=\"titleId\">{{ title }}</h1>\n <button fd-dialog-close-button *ngIf=\"this.mobileConfig.hasCloseButton\" (click)=\"close()\"></button>\n </fd-dialog-header>\n\n <fd-dialog-body>\n <ng-container *ngTemplateOutlet=\"viewBody\"></ng-container>\n </fd-dialog-body>\n\n <fd-dialog-footer *ngIf=\"viewFooter\">\n <ng-container *ngTemplateOutlet=\"viewFooter\"></ng-container>\n </fd-dialog-footer>\n </fd-dialog>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$2.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1$2.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1$2.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1$2.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1$2.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "component", type: i3$1.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
878
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverMobileComponent, decorators: [{
879
- type: Component,
880
- args: [{ selector: 'fd-popover-mobile', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" data-mobile-popover>\n <fd-dialog-header>\n <h1 fd-title [id]=\"titleId\">{{ title }}</h1>\n <button fd-dialog-close-button *ngIf=\"this.mobileConfig.hasCloseButton\" (click)=\"close()\"></button>\n </fd-dialog-header>\n\n <fd-dialog-body>\n <ng-container *ngTemplateOutlet=\"viewBody\"></ng-container>\n </fd-dialog-body>\n\n <fd-dialog-footer *ngIf=\"viewFooter\">\n <ng-container *ngTemplateOutlet=\"viewFooter\"></ng-container>\n </fd-dialog-footer>\n </fd-dialog>\n</ng-template>\n" }]
881
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.DialogService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
882
- type: Inject,
883
- args: [POPOVER_COMPONENT]
884
- }] }, { type: undefined, decorators: [{
885
- type: Optional
886
- }, {
887
- type: Inject,
888
- args: [MOBILE_MODE_CONFIG]
889
- }] }]; }, propDecorators: { _dialogTemplate: [{
890
- type: ViewChild,
891
- args: ['dialogTemplate']
892
- }] } });
893
-
894
- class PopoverMobileModule {
895
- }
896
- PopoverMobileModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverMobileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
897
- PopoverMobileModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: PopoverMobileModule, declarations: [PopoverMobileComponent], imports: [CommonModule, DialogModule, ButtonModule], exports: [PopoverMobileComponent] });
898
- PopoverMobileModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverMobileModule, providers: [DynamicComponentService], imports: [CommonModule, DialogModule, ButtonModule] });
899
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverMobileModule, decorators: [{
900
- type: NgModule,
969
+ PopoverTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverTriggerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
970
+ PopoverTriggerDirectivedir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: PopoverTriggerDirective, isStandalone: true, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: { popover: ["fdPopoverTrigger", "popover"] }, host: { properties: { "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-controls": "this.ariaControls", "attr.aria-expanded": "this.ariaExpanded" } }, ngImport: i0 });
971
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverTriggerDirective, decorators: [{
972
+ type: Directive,
901
973
  args: [{
902
- declarations: [PopoverMobileComponent],
903
- imports: [CommonModule, DialogModule, ButtonModule],
904
- exports: [PopoverMobileComponent],
905
- providers: [DynamicComponentService]
974
+ selector: '[fdPopoverTrigger], [fd-popover-trigger]',
975
+ standalone: true
906
976
  }]
907
- }] });
977
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { popover: [{
978
+ type: Input,
979
+ args: ['fdPopoverTrigger']
980
+ }], ariaHasPopup: [{
981
+ type: HostBinding,
982
+ args: ['attr.aria-haspopup']
983
+ }], ariaControls: [{
984
+ type: HostBinding,
985
+ args: ['attr.aria-controls']
986
+ }], ariaExpanded: [{
987
+ type: HostBinding,
988
+ args: ['attr.aria-expanded']
989
+ }] } });
908
990
 
909
991
  const FD_POPOVER_COMPONENT = new InjectionToken('FdPopoverComponent');
910
992
 
@@ -1037,19 +1119,29 @@ class PopoverComponent extends BasePopoverClass {
1037
1119
  if (!this.popoverBody) {
1038
1120
  this._popoverService.templateContent = this.templateRef;
1039
1121
  }
1040
- this._popoverService.initialise(this.trigger || this.triggerOrigin.elementRef, this, this.popoverBody
1041
- ? {
1042
- template: this.templateRef,
1043
- container: this.container,
1044
- popoverBody: this.popoverBody
1045
- }
1046
- : null);
1122
+ this._popoverService.initialise(this.trigger || this.triggerOrigin.elementRef, this, this._getPopoverBodyContent());
1047
1123
  }
1048
1124
  else {
1049
1125
  this._setupMobileMode();
1050
1126
  }
1051
1127
  this._cdr.detectChanges();
1052
1128
  }
1129
+ /**
1130
+ * Depending on a used popover body type, returns a popover body content
1131
+ **/
1132
+ _getPopoverBodyContent() {
1133
+ if (this.popoverBody) {
1134
+ return {
1135
+ template: this.templateRef,
1136
+ container: this.container,
1137
+ popoverBody: this.popoverBody
1138
+ };
1139
+ }
1140
+ if (this.popoverBodyDirective) {
1141
+ return this.popoverBodyDirective.templateRef;
1142
+ }
1143
+ return null;
1144
+ }
1053
1145
  /** @hidden Open Popover in mobile mode */
1054
1146
  async _setupMobileMode() {
1055
1147
  const injector = Injector.create({
@@ -1087,15 +1179,15 @@ class PopoverComponent extends BasePopoverClass {
1087
1179
  }
1088
1180
  }
1089
1181
  }
1090
- PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverComponent, deps: [{ token: PopoverService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i2$1.DynamicComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
1091
- PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: PopoverComponent, selector: "fd-popover", inputs: { title: "title", trigger: "trigger", fixedPosition: "fixedPosition", id: "id", mobile: "mobile", mobileConfig: "mobileConfig" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.fd-popover-custom--mobile": "mobile", "attr.id": "id" }, classAttribute: "fd-popover-custom" }, providers: [
1182
+ PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverComponent, deps: [{ token: PopoverService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i2$2.DynamicComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
1183
+ PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: PopoverComponent, isStandalone: true, selector: "fd-popover", inputs: { title: "title", trigger: "trigger", fixedPosition: "fixedPosition", id: "id", mobile: "mobile", mobileConfig: "mobileConfig" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.fd-popover-custom--mobile": "mobile", "attr.id": "id" }, classAttribute: "fd-popover-custom" }, providers: [
1092
1184
  PopoverService,
1093
1185
  {
1094
1186
  provide: FD_POPOVER_COMPONENT,
1095
1187
  useExisting: PopoverComponent
1096
1188
  },
1097
1189
  contentDensityObserverProviders()
1098
- ], queries: [{ propertyName: "popoverBody", first: true, predicate: PopoverBodyComponent, descendants: true }, { propertyName: "popoverControl", first: true, predicate: PopoverControlComponent, descendants: true }, { propertyName: "popoverBodyContentTemplate", first: true, predicate: ["popoverBodyContent"], descendants: true }, { propertyName: "popoverFooterContentTemplate", first: true, predicate: ["popoverFooterContent"], descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, read: TemplateRef }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "triggerOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"!trigger\"\n cdkOverlayOrigin\n class=\"fd-popover__control\"\n [class]=\"additionalTriggerClass\"\n (keydown)=\"triggerKeyDownHandler($event)\"\n>\n <ng-content select=\"fd-popover-control\"></ng-content>\n</div>\n\n<ng-template #templateRef>\n <ng-content select=\"fd-popover-body\"></ng-content>\n\n <ng-content></ng-content>\n</ng-template>\n\n<ng-container #container></ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1190
+ ], queries: [{ propertyName: "popoverBody", first: true, predicate: PopoverBodyComponent, descendants: true }, { propertyName: "popoverBodyDirective", first: true, predicate: PopoverBodyDirective, descendants: true }, { propertyName: "popoverControl", first: true, predicate: PopoverControlComponent, descendants: true }, { propertyName: "popoverBodyContentTemplate", first: true, predicate: ["popoverBodyContent"], descendants: true }, { propertyName: "popoverFooterContentTemplate", first: true, predicate: ["popoverFooterContent"], descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, read: TemplateRef }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "triggerOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"!trigger\"\n cdkOverlayOrigin\n class=\"fd-popover__control\"\n [class]=\"additionalTriggerClass\"\n (keydown)=\"triggerKeyDownHandler($event)\"\n>\n <ng-content select=\"fd-popover-control\"></ng-content>\n</div>\n\n<ng-template #templateRef>\n <ng-content select=\"fd-popover-body\"></ng-content>\n\n <ng-content></ng-content>\n</ng-template>\n\n<ng-container #container></ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1099
1191
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverComponent, decorators: [{
1100
1192
  type: Component,
1101
1193
  args: [{ selector: 'fd-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -1109,8 +1201,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
1109
1201
  class: 'fd-popover-custom',
1110
1202
  '[class.fd-popover-custom--mobile]': 'mobile',
1111
1203
  '[attr.id]': 'id'
1112
- }, template: "<div\n *ngIf=\"!trigger\"\n cdkOverlayOrigin\n class=\"fd-popover__control\"\n [class]=\"additionalTriggerClass\"\n (keydown)=\"triggerKeyDownHandler($event)\"\n>\n <ng-content select=\"fd-popover-control\"></ng-content>\n</div>\n\n<ng-template #templateRef>\n <ng-content select=\"fd-popover-body\"></ng-content>\n\n <ng-content></ng-content>\n</ng-template>\n\n<ng-container #container></ng-container>\n" }]
1113
- }], ctorParameters: function () { return [{ type: PopoverService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i2$1.DynamicComponentService, decorators: [{
1204
+ }, standalone: true, imports: [NgIf, CdkOverlayOrigin, NgTemplateOutlet], template: "<div\n *ngIf=\"!trigger\"\n cdkOverlayOrigin\n class=\"fd-popover__control\"\n [class]=\"additionalTriggerClass\"\n (keydown)=\"triggerKeyDownHandler($event)\"\n>\n <ng-content select=\"fd-popover-control\"></ng-content>\n</div>\n\n<ng-template #templateRef>\n <ng-content select=\"fd-popover-body\"></ng-content>\n\n <ng-content></ng-content>\n</ng-template>\n\n<ng-container #container></ng-container>\n" }]
1205
+ }], ctorParameters: function () { return [{ type: PopoverService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i2$2.DynamicComponentService, decorators: [{
1114
1206
  type: Optional
1115
1207
  }] }]; }, propDecorators: { title: [{
1116
1208
  type: Input
@@ -1136,6 +1228,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
1136
1228
  }], popoverBody: [{
1137
1229
  type: ContentChild,
1138
1230
  args: [PopoverBodyComponent]
1231
+ }], popoverBodyDirective: [{
1232
+ type: ContentChild,
1233
+ args: [PopoverBodyDirective]
1139
1234
  }], popoverControl: [{
1140
1235
  type: ContentChild,
1141
1236
  args: [PopoverControlComponent]
@@ -1150,95 +1245,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
1150
1245
  args: ['keydown', ['$event']]
1151
1246
  }] } });
1152
1247
 
1153
- class PopoverTriggerDirective {
1154
- /** Set reference to Popover Component */
1155
- set popover(popover) {
1156
- if (popover) {
1157
- popover.trigger = this._elementRef;
1158
- this._listenOnExpanded(popover);
1159
- }
1160
- this._setAriaAttributes(popover);
1161
- }
1162
- /** @hidden */
1163
- constructor(_elementRef) {
1164
- this._elementRef = _elementRef;
1165
- }
1166
- /** @hidden */
1167
- ngOnDestroy() {
1168
- this._unsubscribeExpandedListener();
1169
- }
1170
- /** @hidden */
1171
- _listenOnExpanded(popover) {
1172
- this._unsubscribeExpandedListener();
1173
- if (popover) {
1174
- this._isExpandedSubscription = popover.isOpenChange
1175
- .pipe(startWith(popover.isOpen))
1176
- .subscribe((isOpen) => (this.ariaExpanded = isOpen));
1177
- }
1178
- }
1179
- /** @hidden */
1180
- _setAriaAttributes(popover) {
1181
- this.ariaHasPopup = !!popover;
1182
- this.ariaControls = popover ? popover.id : null;
1183
- }
1184
- /** @hidden */
1185
- _unsubscribeExpandedListener() {
1186
- if (this._isExpandedSubscription) {
1187
- this._isExpandedSubscription.unsubscribe();
1188
- }
1189
- }
1190
- }
1191
- PopoverTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverTriggerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
1192
- PopoverTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: { popover: ["fdPopoverTrigger", "popover"] }, host: { properties: { "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-controls": "this.ariaControls", "attr.aria-expanded": "this.ariaExpanded" } }, ngImport: i0 });
1193
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverTriggerDirective, decorators: [{
1194
- type: Directive,
1195
- args: [{
1196
- selector: '[fdPopoverTrigger], [fd-popover-trigger]'
1197
- }]
1198
- }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { popover: [{
1199
- type: Input,
1200
- args: ['fdPopoverTrigger']
1201
- }], ariaHasPopup: [{
1202
- type: HostBinding,
1203
- args: ['attr.aria-haspopup']
1204
- }], ariaControls: [{
1205
- type: HostBinding,
1206
- args: ['attr.aria-controls']
1207
- }], ariaExpanded: [{
1208
- type: HostBinding,
1209
- args: ['attr.aria-expanded']
1210
- }] } });
1211
-
1212
1248
  class PopoverModule {
1213
1249
  }
1214
1250
  PopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1215
- PopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: PopoverModule, declarations: [PopoverControlComponent,
1251
+ PopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: PopoverModule, imports: [PopoverControlComponent,
1216
1252
  PopoverBodyComponent,
1217
1253
  PopoverBodyHeaderDirective,
1218
1254
  PopoverBodyFooterDirective,
1219
1255
  PopoverComponent,
1220
1256
  PopoverTriggerDirective,
1221
- PopoverContainerDirective], imports: [CommonModule, OverlayModule, A11yModule, ScrollbarModule], exports: [PopoverControlComponent,
1257
+ PopoverContainerDirective,
1258
+ PopoverBodyDirective], exports: [PopoverControlComponent,
1222
1259
  PopoverBodyComponent,
1223
1260
  PopoverBodyHeaderDirective,
1224
1261
  PopoverBodyFooterDirective,
1225
1262
  PopoverComponent,
1226
1263
  PopoverTriggerDirective,
1227
- PopoverContainerDirective] });
1228
- PopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverModule, imports: [CommonModule, OverlayModule, A11yModule, ScrollbarModule] });
1264
+ PopoverContainerDirective,
1265
+ PopoverBodyDirective] });
1266
+ PopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverModule, imports: [PopoverControlComponent,
1267
+ PopoverBodyComponent,
1268
+ PopoverComponent] });
1229
1269
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopoverModule, decorators: [{
1230
1270
  type: NgModule,
1231
1271
  args: [{
1232
- declarations: [
1272
+ imports: [
1233
1273
  PopoverControlComponent,
1234
1274
  PopoverBodyComponent,
1235
1275
  PopoverBodyHeaderDirective,
1236
1276
  PopoverBodyFooterDirective,
1237
1277
  PopoverComponent,
1238
1278
  PopoverTriggerDirective,
1239
- PopoverContainerDirective
1279
+ PopoverContainerDirective,
1280
+ PopoverBodyDirective
1240
1281
  ],
1241
- imports: [CommonModule, OverlayModule, A11yModule, ScrollbarModule],
1242
1282
  exports: [
1243
1283
  PopoverControlComponent,
1244
1284
  PopoverBodyComponent,
@@ -1246,7 +1286,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
1246
1286
  PopoverBodyFooterDirective,
1247
1287
  PopoverComponent,
1248
1288
  PopoverTriggerDirective,
1249
- PopoverContainerDirective
1289
+ PopoverContainerDirective,
1290
+ PopoverBodyDirective
1250
1291
  ]
1251
1292
  }]
1252
1293
  }] });
@@ -1255,5 +1296,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
1255
1296
  * Generated bundle index. Do not edit.
1256
1297
  */
1257
1298
 
1258
- export { BasePopoverClass, FD_POPOVER_COMPONENT, POPOVER_COMPONENT, PopoverBodyComponent, PopoverBodyFooterDirective, PopoverBodyHeaderDirective, PopoverComponent, PopoverContainerDirective, PopoverControlComponent, PopoverMobileComponent, PopoverMobileModule, PopoverModule, PopoverService, PopoverTriggerDirective, SELECT_CLASS_NAMES };
1299
+ export { BasePopoverClass, FD_POPOVER_COMPONENT, POPOVER_COMPONENT, PopoverBodyComponent, PopoverBodyDirective, PopoverBodyFooterDirective, PopoverBodyHeaderDirective, PopoverComponent, PopoverContainerDirective, PopoverControlComponent, PopoverMobileComponent, PopoverMobileModule, PopoverModule, PopoverService, PopoverTriggerDirective, SELECT_CLASS_NAMES };
1259
1300
  //# sourceMappingURL=fundamental-ngx-core-popover.mjs.map