@firestitch/popover 12.2.1 → 12.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/app/class/popover-ref.d.ts +34 -34
  2. package/app/components/popover/popover.component.d.ts +6 -6
  3. package/app/components/popover-wrapper/popover-wrapper.component.d.ts +40 -40
  4. package/app/directives/popover.directive.d.ts +55 -55
  5. package/app/enums/position.d.ts +6 -6
  6. package/app/fs-popover.module.d.ts +11 -11
  7. package/app/helpers/create-injector.d.ts +4 -4
  8. package/app/helpers/create-overlay-ref.d.ts +4 -4
  9. package/app/helpers/create-position-strategy.d.ts +4 -4
  10. package/app/helpers/create-template-portal.d.ts +4 -4
  11. package/app/helpers/point-in-rect.d.ts +1 -1
  12. package/app/interfaces/popover-config.interface.d.ts +16 -16
  13. package/app/services/popover.service.d.ts +21 -21
  14. package/bundles/firestitch-popover.umd.js +1001 -1001
  15. package/esm2015/app/class/popover-ref.js +85 -85
  16. package/esm2015/app/components/popover/popover.component.js +19 -19
  17. package/esm2015/app/components/popover-wrapper/popover-wrapper.component.js +122 -122
  18. package/esm2015/app/directives/popover.directive.js +221 -221
  19. package/esm2015/app/enums/position.js +7 -7
  20. package/esm2015/app/fs-popover.module.js +37 -37
  21. package/esm2015/app/helpers/create-injector.js +8 -8
  22. package/esm2015/app/helpers/create-overlay-ref.js +11 -11
  23. package/esm2015/app/helpers/create-position-strategy.js +55 -55
  24. package/esm2015/app/helpers/create-template-portal.js +4 -4
  25. package/esm2015/app/helpers/point-in-rect.js +3 -3
  26. package/esm2015/app/interfaces/popover-config.interface.js +1 -1
  27. package/esm2015/app/services/popover.service.js +63 -63
  28. package/esm2015/firestitch-popover.js +4 -4
  29. package/esm2015/public_api.js +8 -8
  30. package/fesm2015/firestitch-popover.js +578 -578
  31. package/firestitch-popover.d.ts +5 -5
  32. package/package.json +1 -1
  33. package/public_api.d.ts +6 -6
  34. package/styles.scss +1 -1
@@ -12,610 +12,610 @@ import { guid } from '@firestitch/common';
12
12
  import * as i1 from '@angular/cdk/overlay';
13
13
  import { OverlayConfig } from '@angular/cdk/overlay';
14
14
 
15
- var Position;
16
- (function (Position) {
17
- Position["North"] = "north";
18
- Position["South"] = "south";
19
- Position["East"] = "east";
20
- Position["West"] = "west";
15
+ var Position;
16
+ (function (Position) {
17
+ Position["North"] = "north";
18
+ Position["South"] = "south";
19
+ Position["East"] = "east";
20
+ Position["West"] = "west";
21
21
  })(Position || (Position = {}));
22
22
 
23
- class FsPopoverRef {
24
- constructor(config = {}) {
25
- this._autoShow$ = new BehaviorSubject(true);
26
- this._autoClose$ = new BehaviorSubject(true);
27
- this._componentLoading$ = new BehaviorSubject(true);
28
- this._init(config);
29
- }
30
- get loadingDiameter() {
31
- return this._loadingDiameter;
32
- }
33
- get size() {
34
- return this._size;
35
- }
36
- get theme() {
37
- return this._theme;
38
- }
39
- get loading() {
40
- return this._loading;
41
- }
42
- get autoShow$() {
43
- return this._autoShow$.asObservable();
44
- }
45
- get autoShow() {
46
- return this._autoShow$.getValue();
47
- }
48
- set autoShow(value) {
49
- this._autoShow$.next(value);
50
- }
51
- get autoClose$() {
52
- return this._autoClose$.asObservable();
53
- }
54
- get autoClose() {
55
- return this._autoClose$.getValue();
56
- }
57
- set autoClose(value) {
58
- this._autoClose$.next(value);
59
- }
60
- get componentVisible$() {
61
- return combineLatest([
62
- this.autoShow$,
63
- this.componentLoading$,
64
- ]).pipe(map(([autoShow, componentLoading]) => {
65
- return autoShow || !componentLoading;
66
- }));
67
- }
68
- get componentLoading$() {
69
- return this._componentLoading$.asObservable();
70
- }
71
- get componentLoading() {
72
- return this._componentLoading$.getValue();
73
- }
74
- get wrapperClass() {
75
- return this._wrapperClass;
76
- }
77
- get maxWidth() {
78
- return this._maxWidth;
79
- }
80
- show() {
81
- setTimeout(() => {
82
- this._componentLoading$.next(false);
83
- setTimeout(() => {
84
- this.updatePosition();
85
- });
86
- });
87
- }
88
- close() {
89
- this.overlayRef.detach();
90
- this._componentLoading$.next(true);
91
- }
92
- updatePosition() {
93
- this.overlayRef.updatePosition();
94
- }
95
- _init(config) {
96
- this._wrapperClass = config.wrapperClass;
97
- this._maxWidth = config.maxWidth;
98
- this._loading = config.loading;
99
- this._loadingDiameter = config.loadingDiameter;
100
- this._size = config.size;
101
- this._theme = config.theme;
102
- this._autoShow$.next(config.autoShow);
103
- this._autoClose$.next(config.autoClose);
104
- }
23
+ class FsPopoverRef {
24
+ constructor(config = {}) {
25
+ this._autoShow$ = new BehaviorSubject(true);
26
+ this._autoClose$ = new BehaviorSubject(true);
27
+ this._componentLoading$ = new BehaviorSubject(true);
28
+ this._init(config);
29
+ }
30
+ get loadingDiameter() {
31
+ return this._loadingDiameter;
32
+ }
33
+ get size() {
34
+ return this._size;
35
+ }
36
+ get theme() {
37
+ return this._theme;
38
+ }
39
+ get loading() {
40
+ return this._loading;
41
+ }
42
+ get autoShow$() {
43
+ return this._autoShow$.asObservable();
44
+ }
45
+ get autoShow() {
46
+ return this._autoShow$.getValue();
47
+ }
48
+ set autoShow(value) {
49
+ this._autoShow$.next(value);
50
+ }
51
+ get autoClose$() {
52
+ return this._autoClose$.asObservable();
53
+ }
54
+ get autoClose() {
55
+ return this._autoClose$.getValue();
56
+ }
57
+ set autoClose(value) {
58
+ this._autoClose$.next(value);
59
+ }
60
+ get componentVisible$() {
61
+ return combineLatest([
62
+ this.autoShow$,
63
+ this.componentLoading$,
64
+ ]).pipe(map(([autoShow, componentLoading]) => {
65
+ return autoShow || !componentLoading;
66
+ }));
67
+ }
68
+ get componentLoading$() {
69
+ return this._componentLoading$.asObservable();
70
+ }
71
+ get componentLoading() {
72
+ return this._componentLoading$.getValue();
73
+ }
74
+ get wrapperClass() {
75
+ return this._wrapperClass;
76
+ }
77
+ get maxWidth() {
78
+ return this._maxWidth;
79
+ }
80
+ show() {
81
+ setTimeout(() => {
82
+ this._componentLoading$.next(false);
83
+ setTimeout(() => {
84
+ this.updatePosition();
85
+ });
86
+ });
87
+ }
88
+ close() {
89
+ this.overlayRef.detach();
90
+ this._componentLoading$.next(true);
91
+ }
92
+ updatePosition() {
93
+ this.overlayRef.updatePosition();
94
+ }
95
+ _init(config) {
96
+ this._wrapperClass = config.wrapperClass;
97
+ this._maxWidth = config.maxWidth;
98
+ this._loading = config.loading;
99
+ this._loadingDiameter = config.loadingDiameter;
100
+ this._size = config.size;
101
+ this._theme = config.theme;
102
+ this._autoShow$.next(config.autoShow);
103
+ this._autoClose$.next(config.autoClose);
104
+ }
105
105
  }
106
106
 
107
- class FsPopoverWrapperComponent extends BasePortalOutlet {
108
- constructor(popoverRef, _el, _zone, _renderer) {
109
- super();
110
- this.popoverRef = popoverRef;
111
- this._el = _el;
112
- this._zone = _zone;
113
- this._renderer = _renderer;
114
- this._updatePosition = new Subject();
115
- this._destroy$ = new Subject();
116
- this._updateClass();
117
- this.wrapperClass = this.popoverRef.wrapperClass;
118
- this.maxWidth = this.popoverRef.maxWidth;
119
- }
120
- set maxWidth(value) {
121
- this._el.nativeElement.style.maxWidth = value ? value + 'px' : void 0;
122
- }
123
- set wrapperClass(value) {
124
- this._wrapperClass = value;
125
- this._updateClass();
126
- }
127
- ngOnInit() {
128
- if (!this.popoverRef.autoShow && this.popoverRef.componentLoading) {
129
- this._watchMousePosition();
130
- }
131
- this._observeContentChanges();
132
- this._listenUpdatePositionRequests();
133
- }
134
- ngOnDestroy() {
135
- this._contentChangesObserver.disconnect();
136
- this._destroy$.next();
137
- this._destroy$.complete();
138
- }
139
- /**
140
- * Attach a TemplatePortal as content to this popover container.
141
- * @param portal Portal to be attached as the popover content.
142
- */
143
- attachTemplatePortal(portal) {
144
- if (this._portalOutlet.hasAttached()) {
145
- throw Error('Popover template already attached');
146
- }
147
- return this._portalOutlet.attachTemplatePortal(portal);
148
- }
149
- /**
150
- * Attach a ComponentPortal as content to this popover container.
151
- * @param portal Portal to be attached as the popover content.
152
- */
153
- attachComponentPortal(portal) {
154
- if (this._portalOutlet.hasAttached()) {
155
- throw Error('Popover component already attached');
156
- }
157
- return this._portalOutlet.attachComponentPortal(portal);
158
- }
159
- setTextualContent(content) {
160
- this.content = content;
161
- }
162
- updatePosition() {
163
- this._updatePosition.next();
164
- }
165
- _watchMousePosition() {
166
- const componentVisibilityChange$ = this.popoverRef.componentVisible$
167
- .pipe(filter((value) => value === true));
168
- this._zone.runOutsideAngular(() => {
169
- fromEvent(document, 'mousemove')
170
- .pipe(takeUntil(componentVisibilityChange$), takeUntil(this._destroy$))
171
- .subscribe((e) => {
172
- this.spinner.nativeElement.style.left = e.x + 'px';
173
- this.spinner.nativeElement.style.top = (e.y + 20) + 'px';
174
- });
175
- });
176
- }
177
- _updateClass() {
178
- if (this._wrapperClass) {
179
- this._renderer.addClass(this._el.nativeElement, this._wrapperClass);
180
- }
181
- }
182
- _observeContentChanges() {
183
- const config = {
184
- childList: true,
185
- subtree: true
186
- };
187
- this._contentChangesObserver = new MutationObserver(() => {
188
- this.updatePosition();
189
- });
190
- this._contentChangesObserver.observe(this._el.nativeElement, config);
191
- }
192
- _listenUpdatePositionRequests() {
193
- this._updatePosition
194
- .pipe(debounceTime(50), takeUntil(this._destroy$))
195
- .subscribe(() => {
196
- this.popoverRef.updatePosition();
197
- });
198
- }
199
- }
200
- FsPopoverWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverWrapperComponent, deps: [{ token: FsPopoverRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
201
- FsPopoverWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsPopoverWrapperComponent, selector: "fs-popover-wrapper", host: { classAttribute: "fs-popover-wrapper" }, viewQueries: [{ propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "spinner", first: true, predicate: ["spinner"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" [ngClass]=\"{\n 'theme-dark' : popoverRef.theme === 'dark',\n 'size-tiny': popoverRef.size === 'tiny',\n 'size-small': popoverRef.size === 'small',\n 'hidden': !(popoverRef.componentVisible$ | async)\n }\">\n <div class=\"mat-elevation-z4 popover-content\">\n <ng-container *ngIf=\"content\">\n {{content}}\n </ng-container>\n\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n\n <div class=\"fs-popover-arrow light\"></div>\n <div class=\"fs-popover-arrow dark\"></div>\n</div>\n\n<div class=\"loading-spinner\"\n #spinner\n *ngIf=\"popoverRef.loading && !(popoverRef.componentVisible$ | async)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"popoverRef.loadingDiameter\" [attr.height]=\"popoverRef.loadingDiameter\" viewBox=\"0 0 42 42\" stroke=\"grey\">\n <g fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(1 1)\" stroke-width=\"3\">\n <circle stroke-opacity=\".5\" cx=\"18\" cy=\"18\" r=\"18\"/>\n <path d=\"M36 18c0-9.94-8.06-18-18-18\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 18 18\" to=\"360 18 18\" dur=\"1s\" repeatCount=\"indefinite\"/>\n </path>\n </g>\n </g>\n </svg>\n</div>\n", styles: [".wrapper{padding:6px;animation:fadeIn ease .2s}.wrapper.hidden{display:none}.wrapper .popover-content{background:#fff;border-radius:4px;padding:8px;color:#1b1b1b;box-sizing:border-box;overflow:hidden}.wrapper.theme-dark .popover-content{background-color:#707070;color:#fff}.wrapper.size-small .popover-content{font-size:80%}.wrapper.size-tiny .popover-content{font-size:70%}.wrapper .fs-popover-arrow{width:0;height:0;font-size:0;line-height:0;position:absolute;z-index:200;z-index:1}.wrapper .fs-popover-arrow.dark{z-index:0}::ng-deep .fs-popover-top .fs-popover-arrow,::ng-deep .fs-popover-bottom .fs-popover-arrow{border-left:10px solid transparent;border-right:10px solid transparent}::ng-deep .fs-popover-left .fs-popover-arrow,::ng-deep .fs-popover-right .fs-popover-arrow{border-top:10px solid transparent;border-bottom:10px solid transparent}::ng-deep .fs-popover-top .fs-popover-arrow{bottom:-3px;left:calc(50% - 10px);border-top:10px solid #fff}::ng-deep .fs-popover-top .fs-popover-arrow.dark{border-top-color:#dfdfdf40;bottom:-4px}::ng-deep .fs-popover-bottom .fs-popover-arrow{top:-3px;left:calc(50% - 10px);border-bottom:10px solid #fff}::ng-deep .fs-popover-bottom .fs-popover-arrow.dark{border-bottom-color:#dfdfdf40;top:-4px}::ng-deep .fs-popover-left .fs-popover-arrow{left:-3px;top:calc(50% - 10px);border-right:10px solid #fff}::ng-deep .fs-popover-left .fs-popover-arrow.dark{border-right-color:#dfdfdf40;left:-4px}::ng-deep .fs-popover-right .fs-popover-arrow{right:-3px;top:calc(50% - 10px);border-left:10px solid #fff}::ng-deep .fs-popover-right .fs-popover-arrow.dark{border-left-color:#dfdfdf40;right:-4px}::ng-deep .fs-popover-bottom .wrapper.theme-dark .fs-popover-arrow{border-bottom-color:#707070}::ng-deep .fs-popover-left .wrapper.theme-dark .fs-popover-arrow{border-right-color:#707070}::ng-deep .fs-popover-right .wrapper.theme-dark .fs-popover-arrow{border-left-color:#707070}::ng-deep .fs-popover-top .wrapper.theme-dark .fs-popover-arrow{border-top-color:#707070}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
202
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverWrapperComponent, decorators: [{
203
- type: Component,
204
- args: [{
205
- selector: 'fs-popover-wrapper',
206
- templateUrl: 'popover-wrapper.component.html',
207
- styleUrls: ['popover-wrapper.component.scss'],
208
- changeDetection: ChangeDetectionStrategy.OnPush,
209
- host: {
210
- 'class': 'fs-popover-wrapper',
211
- },
212
- }]
213
- }], ctorParameters: function () { return [{ type: FsPopoverRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { _portalOutlet: [{
214
- type: ViewChild,
215
- args: [CdkPortalOutlet, { static: true }]
216
- }], spinner: [{
217
- type: ViewChild,
218
- args: ['spinner']
107
+ class FsPopoverWrapperComponent extends BasePortalOutlet {
108
+ constructor(popoverRef, _el, _zone, _renderer) {
109
+ super();
110
+ this.popoverRef = popoverRef;
111
+ this._el = _el;
112
+ this._zone = _zone;
113
+ this._renderer = _renderer;
114
+ this._updatePosition = new Subject();
115
+ this._destroy$ = new Subject();
116
+ this._updateClass();
117
+ this.wrapperClass = this.popoverRef.wrapperClass;
118
+ this.maxWidth = this.popoverRef.maxWidth;
119
+ }
120
+ set maxWidth(value) {
121
+ this._el.nativeElement.style.maxWidth = value ? value + 'px' : void 0;
122
+ }
123
+ set wrapperClass(value) {
124
+ this._wrapperClass = value;
125
+ this._updateClass();
126
+ }
127
+ ngOnInit() {
128
+ if (!this.popoverRef.autoShow && this.popoverRef.componentLoading) {
129
+ this._watchMousePosition();
130
+ }
131
+ this._observeContentChanges();
132
+ this._listenUpdatePositionRequests();
133
+ }
134
+ ngOnDestroy() {
135
+ this._contentChangesObserver.disconnect();
136
+ this._destroy$.next();
137
+ this._destroy$.complete();
138
+ }
139
+ /**
140
+ * Attach a TemplatePortal as content to this popover container.
141
+ * @param portal Portal to be attached as the popover content.
142
+ */
143
+ attachTemplatePortal(portal) {
144
+ if (this._portalOutlet.hasAttached()) {
145
+ throw Error('Popover template already attached');
146
+ }
147
+ return this._portalOutlet.attachTemplatePortal(portal);
148
+ }
149
+ /**
150
+ * Attach a ComponentPortal as content to this popover container.
151
+ * @param portal Portal to be attached as the popover content.
152
+ */
153
+ attachComponentPortal(portal) {
154
+ if (this._portalOutlet.hasAttached()) {
155
+ throw Error('Popover component already attached');
156
+ }
157
+ return this._portalOutlet.attachComponentPortal(portal);
158
+ }
159
+ setTextualContent(content) {
160
+ this.content = content;
161
+ }
162
+ updatePosition() {
163
+ this._updatePosition.next();
164
+ }
165
+ _watchMousePosition() {
166
+ const componentVisibilityChange$ = this.popoverRef.componentVisible$
167
+ .pipe(filter((value) => value === true));
168
+ this._zone.runOutsideAngular(() => {
169
+ fromEvent(document, 'mousemove')
170
+ .pipe(takeUntil(componentVisibilityChange$), takeUntil(this._destroy$))
171
+ .subscribe((e) => {
172
+ this.spinner.nativeElement.style.left = e.x + 'px';
173
+ this.spinner.nativeElement.style.top = (e.y + 20) + 'px';
174
+ });
175
+ });
176
+ }
177
+ _updateClass() {
178
+ if (this._wrapperClass) {
179
+ this._renderer.addClass(this._el.nativeElement, this._wrapperClass);
180
+ }
181
+ }
182
+ _observeContentChanges() {
183
+ const config = {
184
+ childList: true,
185
+ subtree: true
186
+ };
187
+ this._contentChangesObserver = new MutationObserver(() => {
188
+ this.updatePosition();
189
+ });
190
+ this._contentChangesObserver.observe(this._el.nativeElement, config);
191
+ }
192
+ _listenUpdatePositionRequests() {
193
+ this._updatePosition
194
+ .pipe(debounceTime(50), takeUntil(this._destroy$))
195
+ .subscribe(() => {
196
+ this.popoverRef.updatePosition();
197
+ });
198
+ }
199
+ }
200
+ FsPopoverWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverWrapperComponent, deps: [{ token: FsPopoverRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
201
+ FsPopoverWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsPopoverWrapperComponent, selector: "fs-popover-wrapper", host: { classAttribute: "fs-popover-wrapper" }, viewQueries: [{ propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "spinner", first: true, predicate: ["spinner"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" [ngClass]=\"{\n 'theme-dark' : popoverRef.theme === 'dark',\n 'size-tiny': popoverRef.size === 'tiny',\n 'size-small': popoverRef.size === 'small',\n 'hidden': !(popoverRef.componentVisible$ | async)\n }\">\n <div class=\"mat-elevation-z4 popover-content\">\n <ng-container *ngIf=\"content\">\n {{content}}\n </ng-container>\n\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n\n <div class=\"fs-popover-arrow light\"></div>\n <div class=\"fs-popover-arrow dark\"></div>\n</div>\n\n<div class=\"loading-spinner\"\n #spinner\n *ngIf=\"popoverRef.loading && !(popoverRef.componentVisible$ | async)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"popoverRef.loadingDiameter\" [attr.height]=\"popoverRef.loadingDiameter\" viewBox=\"0 0 42 42\" stroke=\"grey\">\n <g fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(1 1)\" stroke-width=\"3\">\n <circle stroke-opacity=\".5\" cx=\"18\" cy=\"18\" r=\"18\"/>\n <path d=\"M36 18c0-9.94-8.06-18-18-18\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 18 18\" to=\"360 18 18\" dur=\"1s\" repeatCount=\"indefinite\"/>\n </path>\n </g>\n </g>\n </svg>\n</div>\n", styles: [".wrapper{padding:6px;animation:fadeIn ease .2s}.wrapper.hidden{display:none}.wrapper .popover-content{background:#fff;border-radius:4px;padding:8px;color:#1b1b1b;box-sizing:border-box;overflow:hidden}.wrapper.theme-dark .popover-content{background-color:#707070;color:#fff}.wrapper.size-small .popover-content{font-size:80%}.wrapper.size-tiny .popover-content{font-size:70%}.wrapper .fs-popover-arrow{width:0;height:0;font-size:0;line-height:0;position:absolute;z-index:200;z-index:1}.wrapper .fs-popover-arrow.dark{z-index:0}::ng-deep .fs-popover-top .fs-popover-arrow,::ng-deep .fs-popover-bottom .fs-popover-arrow{border-left:10px solid transparent;border-right:10px solid transparent}::ng-deep .fs-popover-left .fs-popover-arrow,::ng-deep .fs-popover-right .fs-popover-arrow{border-top:10px solid transparent;border-bottom:10px solid transparent}::ng-deep .fs-popover-top .fs-popover-arrow{bottom:-3px;left:calc(50% - 10px);border-top:10px solid #fff}::ng-deep .fs-popover-top .fs-popover-arrow.dark{border-top-color:#dfdfdf40;bottom:-4px}::ng-deep .fs-popover-bottom .fs-popover-arrow{top:-3px;left:calc(50% - 10px);border-bottom:10px solid #fff}::ng-deep .fs-popover-bottom .fs-popover-arrow.dark{border-bottom-color:#dfdfdf40;top:-4px}::ng-deep .fs-popover-left .fs-popover-arrow{left:-3px;top:calc(50% - 10px);border-right:10px solid #fff}::ng-deep .fs-popover-left .fs-popover-arrow.dark{border-right-color:#dfdfdf40;left:-4px}::ng-deep .fs-popover-right .fs-popover-arrow{right:-3px;top:calc(50% - 10px);border-left:10px solid #fff}::ng-deep .fs-popover-right .fs-popover-arrow.dark{border-left-color:#dfdfdf40;right:-4px}::ng-deep .fs-popover-bottom .wrapper.theme-dark .fs-popover-arrow{border-bottom-color:#707070}::ng-deep .fs-popover-left .wrapper.theme-dark .fs-popover-arrow{border-right-color:#707070}::ng-deep .fs-popover-right .wrapper.theme-dark .fs-popover-arrow{border-left-color:#707070}::ng-deep .fs-popover-top .wrapper.theme-dark .fs-popover-arrow{border-top-color:#707070}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
202
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverWrapperComponent, decorators: [{
203
+ type: Component,
204
+ args: [{
205
+ selector: 'fs-popover-wrapper',
206
+ templateUrl: 'popover-wrapper.component.html',
207
+ styleUrls: ['popover-wrapper.component.scss'],
208
+ changeDetection: ChangeDetectionStrategy.OnPush,
209
+ host: {
210
+ 'class': 'fs-popover-wrapper',
211
+ },
212
+ }]
213
+ }], ctorParameters: function () { return [{ type: FsPopoverRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { _portalOutlet: [{
214
+ type: ViewChild,
215
+ args: [CdkPortalOutlet, { static: true }]
216
+ }], spinner: [{
217
+ type: ViewChild,
218
+ args: ['spinner']
219
219
  }] } });
220
220
 
221
- function createPopupPositionStrategy(el, overlay, position) {
222
- let overlayX = 'center';
223
- let overlayY = 'center';
224
- let originX = 'center';
225
- let originY = 'center';
226
- let offsetX = 0;
227
- let offsetY = 0;
228
- let panelClass = [];
229
- switch (position) {
230
- case Position.North:
231
- originY = 'top';
232
- overlayY = 'bottom';
233
- panelClass = ['fs-popover-top'];
234
- offsetY = -8;
235
- break;
236
- case Position.South:
237
- originY = 'bottom';
238
- overlayY = 'top';
239
- panelClass = ['fs-popover-bottom'];
240
- offsetY = 8;
241
- break;
242
- case Position.East:
243
- overlayX = 'start';
244
- originX = 'end';
245
- panelClass = ['fs-popover-left'];
246
- offsetX = 8;
247
- break;
248
- case Position.West:
249
- overlayX = 'end';
250
- originX = 'start';
251
- panelClass = ['fs-popover-right'];
252
- offsetX = -8;
253
- break;
254
- }
255
- return createBasePopupPositionStrategy(el, overlay)
256
- .withPositions([
257
- {
258
- originX: originX,
259
- originY: originY,
260
- overlayX: overlayX,
261
- overlayY: overlayY,
262
- offsetX: offsetX,
263
- offsetY: offsetY,
264
- panelClass: panelClass,
265
- }
266
- ]);
267
- }
268
- function createBasePopupPositionStrategy(el, overlay) {
269
- return overlay.position()
270
- .flexibleConnectedTo(el)
271
- .withGrowAfterOpen(true)
272
- .withFlexibleDimensions(false)
273
- .withViewportMargin(4);
221
+ function createPopupPositionStrategy(el, overlay, position) {
222
+ let overlayX = 'center';
223
+ let overlayY = 'center';
224
+ let originX = 'center';
225
+ let originY = 'center';
226
+ let offsetX = 0;
227
+ let offsetY = 0;
228
+ let panelClass = [];
229
+ switch (position) {
230
+ case Position.North:
231
+ originY = 'top';
232
+ overlayY = 'bottom';
233
+ panelClass = ['fs-popover-top'];
234
+ offsetY = -8;
235
+ break;
236
+ case Position.South:
237
+ originY = 'bottom';
238
+ overlayY = 'top';
239
+ panelClass = ['fs-popover-bottom'];
240
+ offsetY = 8;
241
+ break;
242
+ case Position.East:
243
+ overlayX = 'start';
244
+ originX = 'end';
245
+ panelClass = ['fs-popover-left'];
246
+ offsetX = 8;
247
+ break;
248
+ case Position.West:
249
+ overlayX = 'end';
250
+ originX = 'start';
251
+ panelClass = ['fs-popover-right'];
252
+ offsetX = -8;
253
+ break;
254
+ }
255
+ return createBasePopupPositionStrategy(el, overlay)
256
+ .withPositions([
257
+ {
258
+ originX: originX,
259
+ originY: originY,
260
+ overlayX: overlayX,
261
+ overlayY: overlayY,
262
+ offsetX: offsetX,
263
+ offsetY: offsetY,
264
+ panelClass: panelClass,
265
+ }
266
+ ]);
267
+ }
268
+ function createBasePopupPositionStrategy(el, overlay) {
269
+ return overlay.position()
270
+ .flexibleConnectedTo(el)
271
+ .withGrowAfterOpen(true)
272
+ .withFlexibleDimensions(false)
273
+ .withViewportMargin(4);
274
274
  }
275
275
 
276
- function createOverlayRef(el, overlay, position) {
277
- const config = {
278
- positionStrategy: createPopupPositionStrategy(el, overlay, position),
279
- scrollStrategy: overlay.scrollStrategies.reposition(),
280
- hasBackdrop: false
281
- };
282
- const overlayConfig = new OverlayConfig(config);
283
- return overlay.create(overlayConfig);
276
+ function createOverlayRef(el, overlay, position) {
277
+ const config = {
278
+ positionStrategy: createPopupPositionStrategy(el, overlay, position),
279
+ scrollStrategy: overlay.scrollStrategies.reposition(),
280
+ hasBackdrop: false
281
+ };
282
+ const overlayConfig = new OverlayConfig(config);
283
+ return overlay.create(overlayConfig);
284
284
  }
285
285
 
286
- function createInjector(popoverRef, parentInjector) {
287
- const injectionTokens = new WeakMap([
288
- [FsPopoverRef, popoverRef],
289
- ]);
290
- return new PortalInjector(parentInjector, injectionTokens);
286
+ function createInjector(popoverRef, parentInjector) {
287
+ const injectionTokens = new WeakMap([
288
+ [FsPopoverRef, popoverRef],
289
+ ]);
290
+ return new PortalInjector(parentInjector, injectionTokens);
291
291
  }
292
292
 
293
- function createTempatePortal(template, popoverRef, data) {
294
- return new TemplatePortal(template, void 0, { data: data, popover: popoverRef });
293
+ function createTempatePortal(template, popoverRef, data) {
294
+ return new TemplatePortal(template, void 0, { data: data, popover: popoverRef });
295
295
  }
296
296
 
297
- class FsPopoverService {
298
- constructor(_injector, _overlay) {
299
- this._injector = _injector;
300
- this._overlay = _overlay;
301
- }
302
- get hasActivePopover() {
303
- return !!this._activeElement;
304
- }
305
- get activeElementGUID() {
306
- return this._activeElementGUID;
307
- }
308
- setActivePopoverGUID(value) {
309
- this._activeElementGUID = value;
310
- }
311
- openPopover(el, content, data, popoverRef, position) {
312
- if (this._activeElement) {
313
- this.close(this._activeElement.popoverRef);
314
- }
315
- const overlayRef = createOverlayRef(el, this._overlay, position);
316
- const containerRef = this._openPortalPreview(FsPopoverWrapperComponent, overlayRef, popoverRef);
317
- if (content instanceof TemplateRef) {
318
- const templatePortal = createTempatePortal(content, popoverRef, data);
319
- containerRef.instance.attachTemplatePortal(templatePortal);
320
- }
321
- else {
322
- containerRef.instance.setTextualContent(content);
323
- }
324
- popoverRef.overlayRef = overlayRef;
325
- this._activeElement = {
326
- overlayRef,
327
- popoverRef,
328
- };
329
- return containerRef.location.nativeElement;
330
- }
331
- close(popoverRef = null) {
332
- if (this._activeElement.popoverRef === popoverRef) {
333
- popoverRef.close();
334
- this._activeElement = void 0;
335
- this._activeElementGUID = void 0;
336
- }
337
- }
338
- _openPortalPreview(component, overlayRef, popoverRef) {
339
- const containerPortal = new ComponentPortal(component, void 0, createInjector(popoverRef, this._injector));
340
- return overlayRef.attach(containerPortal);
341
- }
342
- }
343
- FsPopoverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverService, deps: [{ token: i0.Injector }, { token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
344
- FsPopoverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverService, providedIn: 'root' });
345
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverService, decorators: [{
346
- type: Injectable,
347
- args: [{
348
- providedIn: 'root',
349
- }]
297
+ class FsPopoverService {
298
+ constructor(_injector, _overlay) {
299
+ this._injector = _injector;
300
+ this._overlay = _overlay;
301
+ }
302
+ get hasActivePopover() {
303
+ return !!this._activeElement;
304
+ }
305
+ get activeElementGUID() {
306
+ return this._activeElementGUID;
307
+ }
308
+ setActivePopoverGUID(value) {
309
+ this._activeElementGUID = value;
310
+ }
311
+ openPopover(el, content, data, popoverRef, position) {
312
+ if (this._activeElement) {
313
+ this.close(this._activeElement.popoverRef);
314
+ }
315
+ const overlayRef = createOverlayRef(el, this._overlay, position);
316
+ const containerRef = this._openPortalPreview(FsPopoverWrapperComponent, overlayRef, popoverRef);
317
+ if (content instanceof TemplateRef) {
318
+ const templatePortal = createTempatePortal(content, popoverRef, data);
319
+ containerRef.instance.attachTemplatePortal(templatePortal);
320
+ }
321
+ else {
322
+ containerRef.instance.setTextualContent(content);
323
+ }
324
+ popoverRef.overlayRef = overlayRef;
325
+ this._activeElement = {
326
+ overlayRef,
327
+ popoverRef,
328
+ };
329
+ return containerRef.location.nativeElement;
330
+ }
331
+ close(popoverRef = null) {
332
+ if (this._activeElement.popoverRef === popoverRef) {
333
+ popoverRef.close();
334
+ this._activeElement = void 0;
335
+ this._activeElementGUID = void 0;
336
+ }
337
+ }
338
+ _openPortalPreview(component, overlayRef, popoverRef) {
339
+ const containerPortal = new ComponentPortal(component, void 0, createInjector(popoverRef, this._injector));
340
+ return overlayRef.attach(containerPortal);
341
+ }
342
+ }
343
+ FsPopoverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverService, deps: [{ token: i0.Injector }, { token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
344
+ FsPopoverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverService, providedIn: 'root' });
345
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverService, decorators: [{
346
+ type: Injectable,
347
+ args: [{
348
+ providedIn: 'root',
349
+ }]
350
350
  }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Overlay }]; } });
351
351
 
352
- function pointInRect(x1, y1, x2, y2, px, py) {
353
- return (px > x1 && px < x2) && (py > y1 && py < y2);
352
+ function pointInRect(x1, y1, x2, y2, px, py) {
353
+ return (px > x1 && px < x2) && (py > y1 && py < y2);
354
354
  }
355
355
 
356
- class FsPopoverDirective {
357
- constructor(_elRef, _popoverService, _ngZone, _router) {
358
- this._elRef = _elRef;
359
- this._popoverService = _popoverService;
360
- this._ngZone = _ngZone;
361
- this._router = _router;
362
- this._guid = guid('xxxxxxx');
363
- this.leaveDelay = 100;
364
- this.showDelay = 0;
365
- this.maxWidth = 250;
366
- this.autoShow = true;
367
- this.autoClose = true;
368
- this.loadingDiameter = 20;
369
- this.loading = true;
370
- this.indication = true;
371
- this.position = Position.South;
372
- this.theme = 'light';
373
- this.size = 'normal';
374
- this.trigger = 'mouseover';
375
- this.enabled = true;
376
- this._initialized = false;
377
- this._mouseEnter$ = fromEvent(this._elRef.nativeElement, 'mouseenter');
378
- this._mouseMove$ = fromEvent(document, 'mousemove', { passive: true });
379
- this._mouseLeave$ = fromEvent(this._elRef.nativeElement, 'mouseleave');
380
- this._popoverClosed$ = new Subject();
381
- this._destroy$ = new Subject();
382
- }
383
- get openTimer$() {
384
- return timer(this.showDelay);
385
- }
386
- get closeTimer$() {
387
- return timer(this.leaveDelay);
388
- }
389
- ngOnInit() {
390
- if (this.enabled) {
391
- this._initialize();
392
- }
393
- }
394
- ngOnChanges(changes) {
395
- var _a, _b;
396
- if (((_a = changes.enabled) === null || _a === void 0 ? void 0 : _a.currentValue) !== ((_b = changes.enabled) === null || _b === void 0 ? void 0 : _b.previousValue)) {
397
- if (this.enabled && !this._initialized) {
398
- this._initialize();
399
- }
400
- }
401
- }
402
- ngOnDestroy() {
403
- this._popoverClosed$.next();
404
- this._destroy$.next();
405
- }
406
- _closePopover() {
407
- this._popoverClosed$.next();
408
- this._ngZone.run(() => {
409
- this._wrapperElement = null;
410
- if (this._popoverService.hasActivePopover) {
411
- this._popoverService.close(this._popoverRef);
412
- }
413
- });
414
- }
415
- _initialize() {
416
- if (this._initialized) {
417
- return;
418
- }
419
- this._popoverRef = new FsPopoverRef({
420
- maxWidth: this.maxWidth,
421
- wrapperClass: this.wrapperClass,
422
- autoShow: this.autoShow,
423
- autoClose: this.autoClose,
424
- loadingDiameter: this.loadingDiameter,
425
- loading: this.loading,
426
- size: this.size,
427
- theme: this.theme,
428
- });
429
- this._ngZone.runOutsideAngular(() => {
430
- if (this.trigger === 'click') {
431
- this._listenMouseHostClick();
432
- }
433
- else {
434
- this._listenMouseHostEnter();
435
- }
436
- });
437
- this._listenRouteChange();
438
- this._initialized = true;
439
- }
440
- _listenRouteChange() {
441
- this._router.events
442
- .pipe(filter((event) => {
443
- return event instanceof NavigationEnd;
444
- }), pipe(takeUntil(this._destroy$
445
- .pipe(delay(200)))))
446
- .subscribe(() => {
447
- this._closePopover();
448
- });
449
- }
450
- _listenMouseHostClick() {
451
- fromEvent(this._elRef.nativeElement, 'click', { passive: true })
452
- .pipe(filter(() => this.enabled), tap((e) => {
453
- e.stopPropagation();
454
- this._openPopover();
455
- }), switchMap(() => this._listenMouseHostLeave$()), switchMap(() => this.closeTimer$), takeUntil(this._destroy$))
456
- .subscribe(() => {
457
- this._closePopover();
458
- });
459
- }
460
- _listenMouseHostEnter() {
461
- const actualMouseState$ = merge(this._mouseLeave$.pipe(mapTo(true)), this._mouseEnter$.pipe(mapTo(false)))
462
- .pipe(startWith(false), distinctUntilChanged());
463
- this._mouseEnter$
464
- .pipe(filter(() => this.enabled), filter(() => {
465
- return !this._wrapperElement;
466
- }), tap(() => {
467
- this._popoverService.setActivePopoverGUID(this._guid);
468
- }), switchMap(() => this.openTimer$),
469
- // we have to check that after all delays mouse still over an elemen
470
- withLatestFrom(actualMouseState$), filter(([_, mouseLeave]) => {
471
- return !mouseLeave;
472
- }), tap(() => this._openPopover()), switchMap(() => this._listenMouseHostLeave$()), switchMap(() => this.closeTimer$), tap(() => this._closePopover()), finalize(() => this._closePopover()), takeUntil(this._destroy$))
473
- .subscribe();
474
- }
475
- _openPopover() {
476
- if (this.trigger === 'mouseover' && this._popoverService.activeElementGUID !== this._guid) {
477
- return;
478
- }
479
- this._hostBounds = this._elRef.nativeElement.getBoundingClientRect();
480
- this._ngZone.run(() => {
481
- if (this.template) {
482
- this._wrapperElement = this._popoverService.openPopover(this._elRef, this.template, this.data, this._popoverRef, this.position);
483
- }
484
- else {
485
- this._wrapperElement = this._popoverService.openPopover(this._elRef, this.text, this.data, this._popoverRef, this.position);
486
- }
487
- });
488
- }
489
- _listenMouseHostLeave$() {
490
- const mouseMove$ = this._mouseMove$
491
- .pipe(debounceTime(50), filter(() => !!this._wrapperElement), filter((event) => {
492
- return this._popoverRef.autoClose && this._mouseLeftTheTargets(event);
493
- }));
494
- const mouseClick$ = fromEvent(this._elRef.nativeElement, 'click');
495
- return merge(mouseMove$, mouseClick$);
496
- //
497
- // return this._mouseLeave$
498
- // .pipe(
499
- // //
500
- // timeoutWith(200, mouseMove$),
501
- // );
502
- }
503
- // Check if mouse left target or popover rects
504
- _mouseLeftTheTargets(event) {
505
- const hostBounds = this._hostBounds;
506
- const popoverBounds = this._wrapperElement.getBoundingClientRect();
507
- const pointInHostRect = pointInRect(hostBounds.x, hostBounds.y, hostBounds.x + hostBounds.width, hostBounds.y + hostBounds.height, event.x, event.y);
508
- const pointInPopoverRect = pointInRect(popoverBounds.x, popoverBounds.y, popoverBounds.x + popoverBounds.width, popoverBounds.y + popoverBounds.height, event.x, event.y);
509
- return !pointInHostRect && !pointInPopoverRect;
510
- }
511
- }
512
- FsPopoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverDirective, deps: [{ token: i0.ElementRef }, { token: FsPopoverService }, { token: i0.NgZone }, { token: i2$1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
513
- FsPopoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsPopoverDirective, selector: "[fsPopover]", inputs: { text: "text", template: "template", data: "data", leaveDelay: "leaveDelay", showDelay: "showDelay", maxWidth: "maxWidth", wrapperClass: "wrapperClass", autoShow: "autoShow", autoClose: "autoClose", loadingDiameter: "loadingDiameter", loading: "loading", indication: "indication", position: "position", theme: "theme", size: "size", trigger: "trigger", enabled: "enabled" }, host: { properties: { "class.indication": "this.indication", "class.fs-popover-enabled": "this.enabled" }, classAttribute: "fs-popover" }, usesOnChanges: true, ngImport: i0 });
514
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverDirective, decorators: [{
515
- type: Directive,
516
- args: [{
517
- selector: '[fsPopover]',
518
- host: {
519
- 'class': 'fs-popover',
520
- },
521
- }]
522
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FsPopoverService }, { type: i0.NgZone }, { type: i2$1.Router, decorators: [{
523
- type: Optional
524
- }] }]; }, propDecorators: { text: [{
525
- type: Input
526
- }], template: [{
527
- type: Input
528
- }], data: [{
529
- type: Input
530
- }], leaveDelay: [{
531
- type: Input
532
- }], showDelay: [{
533
- type: Input
534
- }], maxWidth: [{
535
- type: Input
536
- }], wrapperClass: [{
537
- type: Input
538
- }], autoShow: [{
539
- type: Input
540
- }], autoClose: [{
541
- type: Input
542
- }], loadingDiameter: [{
543
- type: Input
544
- }], loading: [{
545
- type: Input
546
- }], indication: [{
547
- type: Input
548
- }, {
549
- type: HostBinding,
550
- args: ['class.indication']
551
- }], position: [{
552
- type: Input
553
- }], theme: [{
554
- type: Input
555
- }], size: [{
556
- type: Input
557
- }], trigger: [{
558
- type: Input
559
- }], enabled: [{
560
- type: Input
561
- }, {
562
- type: HostBinding,
563
- args: ['class.fs-popover-enabled']
356
+ class FsPopoverDirective {
357
+ constructor(_elRef, _popoverService, _ngZone, _router) {
358
+ this._elRef = _elRef;
359
+ this._popoverService = _popoverService;
360
+ this._ngZone = _ngZone;
361
+ this._router = _router;
362
+ this._guid = guid('xxxxxxx');
363
+ this.leaveDelay = 100;
364
+ this.showDelay = 0;
365
+ this.maxWidth = 250;
366
+ this.autoShow = true;
367
+ this.autoClose = true;
368
+ this.loadingDiameter = 20;
369
+ this.loading = true;
370
+ this.indication = true;
371
+ this.position = Position.South;
372
+ this.theme = 'light';
373
+ this.size = 'normal';
374
+ this.trigger = 'mouseover';
375
+ this.enabled = true;
376
+ this._initialized = false;
377
+ this._mouseEnter$ = fromEvent(this._elRef.nativeElement, 'mouseenter');
378
+ this._mouseMove$ = fromEvent(document, 'mousemove', { passive: true });
379
+ this._mouseLeave$ = fromEvent(this._elRef.nativeElement, 'mouseleave');
380
+ this._popoverClosed$ = new Subject();
381
+ this._destroy$ = new Subject();
382
+ }
383
+ get openTimer$() {
384
+ return timer(this.showDelay);
385
+ }
386
+ get closeTimer$() {
387
+ return timer(this.leaveDelay);
388
+ }
389
+ ngOnInit() {
390
+ if (this.enabled) {
391
+ this._initialize();
392
+ }
393
+ }
394
+ ngOnChanges(changes) {
395
+ var _a, _b;
396
+ if (((_a = changes.enabled) === null || _a === void 0 ? void 0 : _a.currentValue) !== ((_b = changes.enabled) === null || _b === void 0 ? void 0 : _b.previousValue)) {
397
+ if (this.enabled && !this._initialized) {
398
+ this._initialize();
399
+ }
400
+ }
401
+ }
402
+ ngOnDestroy() {
403
+ this._popoverClosed$.next();
404
+ this._destroy$.next();
405
+ }
406
+ _closePopover() {
407
+ this._popoverClosed$.next();
408
+ this._ngZone.run(() => {
409
+ this._wrapperElement = null;
410
+ if (this._popoverService.hasActivePopover) {
411
+ this._popoverService.close(this._popoverRef);
412
+ }
413
+ });
414
+ }
415
+ _initialize() {
416
+ if (this._initialized) {
417
+ return;
418
+ }
419
+ this._popoverRef = new FsPopoverRef({
420
+ maxWidth: this.maxWidth,
421
+ wrapperClass: this.wrapperClass,
422
+ autoShow: this.autoShow,
423
+ autoClose: this.autoClose,
424
+ loadingDiameter: this.loadingDiameter,
425
+ loading: this.loading,
426
+ size: this.size,
427
+ theme: this.theme,
428
+ });
429
+ this._ngZone.runOutsideAngular(() => {
430
+ if (this.trigger === 'click') {
431
+ this._listenMouseHostClick();
432
+ }
433
+ else {
434
+ this._listenMouseHostEnter();
435
+ }
436
+ });
437
+ this._listenRouteChange();
438
+ this._initialized = true;
439
+ }
440
+ _listenRouteChange() {
441
+ this._router.events
442
+ .pipe(filter((event) => {
443
+ return event instanceof NavigationEnd;
444
+ }), pipe(takeUntil(this._destroy$
445
+ .pipe(delay(200)))))
446
+ .subscribe(() => {
447
+ this._closePopover();
448
+ });
449
+ }
450
+ _listenMouseHostClick() {
451
+ fromEvent(this._elRef.nativeElement, 'click', { passive: true })
452
+ .pipe(filter(() => this.enabled), tap((e) => {
453
+ e.stopPropagation();
454
+ this._openPopover();
455
+ }), switchMap(() => this._listenMouseHostLeave$()), switchMap(() => this.closeTimer$), takeUntil(this._destroy$))
456
+ .subscribe(() => {
457
+ this._closePopover();
458
+ });
459
+ }
460
+ _listenMouseHostEnter() {
461
+ const actualMouseState$ = merge(this._mouseLeave$.pipe(mapTo(true)), this._mouseEnter$.pipe(mapTo(false)))
462
+ .pipe(startWith(false), distinctUntilChanged());
463
+ this._mouseEnter$
464
+ .pipe(filter(() => this.enabled), filter(() => {
465
+ return !this._wrapperElement;
466
+ }), tap(() => {
467
+ this._popoverService.setActivePopoverGUID(this._guid);
468
+ }), switchMap(() => this.openTimer$),
469
+ // we have to check that after all delays mouse still over an elemen
470
+ withLatestFrom(actualMouseState$), filter(([_, mouseLeave]) => {
471
+ return !mouseLeave;
472
+ }), tap(() => this._openPopover()), switchMap(() => this._listenMouseHostLeave$()), switchMap(() => this.closeTimer$), tap(() => this._closePopover()), finalize(() => this._closePopover()), takeUntil(this._destroy$))
473
+ .subscribe();
474
+ }
475
+ _openPopover() {
476
+ if (this.trigger === 'mouseover' && this._popoverService.activeElementGUID !== this._guid) {
477
+ return;
478
+ }
479
+ this._hostBounds = this._elRef.nativeElement.getBoundingClientRect();
480
+ this._ngZone.run(() => {
481
+ if (this.template) {
482
+ this._wrapperElement = this._popoverService.openPopover(this._elRef, this.template, this.data, this._popoverRef, this.position);
483
+ }
484
+ else {
485
+ this._wrapperElement = this._popoverService.openPopover(this._elRef, this.text, this.data, this._popoverRef, this.position);
486
+ }
487
+ });
488
+ }
489
+ _listenMouseHostLeave$() {
490
+ const mouseMove$ = this._mouseMove$
491
+ .pipe(debounceTime(50), filter(() => !!this._wrapperElement), filter((event) => {
492
+ return this._popoverRef.autoClose && this._mouseLeftTheTargets(event);
493
+ }));
494
+ const mouseClick$ = fromEvent(this._elRef.nativeElement, 'click');
495
+ return merge(mouseMove$, mouseClick$);
496
+ //
497
+ // return this._mouseLeave$
498
+ // .pipe(
499
+ // //
500
+ // timeoutWith(200, mouseMove$),
501
+ // );
502
+ }
503
+ // Check if mouse left target or popover rects
504
+ _mouseLeftTheTargets(event) {
505
+ const hostBounds = this._hostBounds;
506
+ const popoverBounds = this._wrapperElement.getBoundingClientRect();
507
+ const pointInHostRect = pointInRect(hostBounds.x, hostBounds.y, hostBounds.x + hostBounds.width, hostBounds.y + hostBounds.height, event.x, event.y);
508
+ const pointInPopoverRect = pointInRect(popoverBounds.x, popoverBounds.y, popoverBounds.x + popoverBounds.width, popoverBounds.y + popoverBounds.height, event.x, event.y);
509
+ return !pointInHostRect && !pointInPopoverRect;
510
+ }
511
+ }
512
+ FsPopoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverDirective, deps: [{ token: i0.ElementRef }, { token: FsPopoverService }, { token: i0.NgZone }, { token: i2$1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
513
+ FsPopoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsPopoverDirective, selector: "[fsPopover]", inputs: { text: "text", template: "template", data: "data", leaveDelay: "leaveDelay", showDelay: "showDelay", maxWidth: "maxWidth", wrapperClass: "wrapperClass", autoShow: "autoShow", autoClose: "autoClose", loadingDiameter: "loadingDiameter", loading: "loading", indication: "indication", position: "position", theme: "theme", size: "size", trigger: "trigger", enabled: "enabled" }, host: { properties: { "class.indication": "this.indication", "class.fs-popover-enabled": "this.enabled" }, classAttribute: "fs-popover" }, usesOnChanges: true, ngImport: i0 });
514
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverDirective, decorators: [{
515
+ type: Directive,
516
+ args: [{
517
+ selector: '[fsPopover]',
518
+ host: {
519
+ 'class': 'fs-popover',
520
+ },
521
+ }]
522
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FsPopoverService }, { type: i0.NgZone }, { type: i2$1.Router, decorators: [{
523
+ type: Optional
524
+ }] }]; }, propDecorators: { text: [{
525
+ type: Input
526
+ }], template: [{
527
+ type: Input
528
+ }], data: [{
529
+ type: Input
530
+ }], leaveDelay: [{
531
+ type: Input
532
+ }], showDelay: [{
533
+ type: Input
534
+ }], maxWidth: [{
535
+ type: Input
536
+ }], wrapperClass: [{
537
+ type: Input
538
+ }], autoShow: [{
539
+ type: Input
540
+ }], autoClose: [{
541
+ type: Input
542
+ }], loadingDiameter: [{
543
+ type: Input
544
+ }], loading: [{
545
+ type: Input
546
+ }], indication: [{
547
+ type: Input
548
+ }, {
549
+ type: HostBinding,
550
+ args: ['class.indication']
551
+ }], position: [{
552
+ type: Input
553
+ }], theme: [{
554
+ type: Input
555
+ }], size: [{
556
+ type: Input
557
+ }], trigger: [{
558
+ type: Input
559
+ }], enabled: [{
560
+ type: Input
561
+ }, {
562
+ type: HostBinding,
563
+ args: ['class.fs-popover-enabled']
564
564
  }] } });
565
565
 
566
- class FsPopoverComponent extends FsPopoverDirective {
567
- }
568
- FsPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
569
- FsPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsPopoverComponent, selector: "fs-popover", host: { classAttribute: "fs-popover-component" }, usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{'popover-container': enabled}\">\n <ng-content></ng-content>\n</span>\n", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
570
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverComponent, decorators: [{
571
- type: Component,
572
- args: [{
573
- selector: 'fs-popover',
574
- templateUrl: 'popover.component.html',
575
- changeDetection: ChangeDetectionStrategy.OnPush,
576
- host: {
577
- 'class': 'fs-popover-component',
578
- }
579
- }]
566
+ class FsPopoverComponent extends FsPopoverDirective {
567
+ }
568
+ FsPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
569
+ FsPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsPopoverComponent, selector: "fs-popover", host: { classAttribute: "fs-popover-component" }, usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{'popover-container': enabled}\">\n <ng-content></ng-content>\n</span>\n", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
570
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverComponent, decorators: [{
571
+ type: Component,
572
+ args: [{
573
+ selector: 'fs-popover',
574
+ templateUrl: 'popover.component.html',
575
+ changeDetection: ChangeDetectionStrategy.OnPush,
576
+ host: {
577
+ 'class': 'fs-popover-component',
578
+ }
579
+ }]
580
580
  }] });
581
581
 
582
- class FsPopoverModule {
583
- }
584
- FsPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
585
- FsPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverModule, declarations: [FsPopoverComponent,
586
- FsPopoverWrapperComponent,
587
- FsPopoverDirective], imports: [CommonModule,
588
- PortalModule], exports: [FsPopoverComponent,
589
- FsPopoverDirective] });
590
- FsPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverModule, imports: [[
591
- CommonModule,
592
- PortalModule,
593
- ]] });
594
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverModule, decorators: [{
595
- type: NgModule,
596
- args: [{
597
- imports: [
598
- CommonModule,
599
- PortalModule,
600
- ],
601
- declarations: [
602
- FsPopoverComponent,
603
- FsPopoverWrapperComponent,
604
- FsPopoverDirective,
605
- ],
606
- exports: [
607
- FsPopoverComponent,
608
- FsPopoverDirective,
609
- ],
610
- }]
582
+ class FsPopoverModule {
583
+ }
584
+ FsPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
585
+ FsPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverModule, declarations: [FsPopoverComponent,
586
+ FsPopoverWrapperComponent,
587
+ FsPopoverDirective], imports: [CommonModule,
588
+ PortalModule], exports: [FsPopoverComponent,
589
+ FsPopoverDirective] });
590
+ FsPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverModule, imports: [[
591
+ CommonModule,
592
+ PortalModule,
593
+ ]] });
594
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverModule, decorators: [{
595
+ type: NgModule,
596
+ args: [{
597
+ imports: [
598
+ CommonModule,
599
+ PortalModule,
600
+ ],
601
+ declarations: [
602
+ FsPopoverComponent,
603
+ FsPopoverWrapperComponent,
604
+ FsPopoverDirective,
605
+ ],
606
+ exports: [
607
+ FsPopoverComponent,
608
+ FsPopoverDirective,
609
+ ],
610
+ }]
611
611
  }] });
612
612
 
613
- /*
614
- * Public API Surface of fs-menu
613
+ /*
614
+ * Public API Surface of fs-menu
615
615
  */
616
616
 
617
- /**
618
- * Generated bundle index. Do not edit.
617
+ /**
618
+ * Generated bundle index. Do not edit.
619
619
  */
620
620
 
621
621
  export { FsPopoverComponent, FsPopoverDirective, FsPopoverModule, FsPopoverRef, Position };