@firestitch/popover 18.0.0 → 18.0.2
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.
- package/app/class/popover-ref.d.ts +2 -0
- package/app/components/popover/popover.component.d.ts +1 -1
- package/app/components/popover-wrapper/popover-wrapper.component.d.ts +4 -3
- package/app/directives/popover.directive.d.ts +10 -11
- package/app/fs-popover.module.d.ts +2 -5
- package/app/helpers/create-injector.d.ts +1 -2
- package/app/interfaces/popover-config.interface.d.ts +1 -0
- package/app/services/popover.service.d.ts +1 -3
- package/esm2022/app/class/popover-ref.mjs +6 -1
- package/esm2022/app/components/popover/popover.component.mjs +4 -4
- package/esm2022/app/components/popover-wrapper/popover-wrapper.component.mjs +25 -23
- package/esm2022/app/directives/popover.directive.mjs +21 -29
- package/esm2022/app/fs-popover.module.mjs +4 -15
- package/esm2022/app/helpers/create-injector.mjs +9 -6
- package/esm2022/app/helpers/create-position-strategy.mjs +49 -45
- package/esm2022/app/interfaces/popover-config.interface.mjs +1 -1
- package/esm2022/app/services/popover.service.mjs +6 -11
- package/esm2022/public_api.mjs +1 -1
- package/fesm2022/firestitch-popover.mjs +124 -130
- package/fesm2022/firestitch-popover.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,24 +1,12 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ChangeDetectionStrategy, ViewChild, TemplateRef, Injectable, Directive,
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
import * as i3 from '@angular/cdk/portal';
|
|
6
|
-
import { BasePortalOutlet, CdkPortalOutlet, PortalInjector, TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
|
|
7
|
-
import * as i2$1 from '@angular/router';
|
|
8
|
-
import { NavigationEnd } from '@angular/router';
|
|
2
|
+
import { inject, ElementRef, NgZone, Renderer2, Component, ChangeDetectionStrategy, ViewChild, Injector, TemplateRef, Injectable, Directive, Input, HostBinding, NgModule } from '@angular/core';
|
|
3
|
+
import { Router, NavigationEnd } from '@angular/router';
|
|
4
|
+
import { guid } from '@firestitch/common';
|
|
9
5
|
import { BehaviorSubject, combineLatest, Subject, fromEvent, timer, pipe, merge } from 'rxjs';
|
|
10
6
|
import { map, filter, takeUntil, debounceTime, delay, tap, switchMap, mapTo, startWith, distinctUntilChanged, withLatestFrom, finalize } from 'rxjs/operators';
|
|
11
|
-
import {
|
|
12
|
-
import
|
|
13
|
-
import {
|
|
14
|
-
|
|
15
|
-
var Position;
|
|
16
|
-
(function (Position) {
|
|
17
|
-
Position["North"] = "north";
|
|
18
|
-
Position["South"] = "south";
|
|
19
|
-
Position["East"] = "east";
|
|
20
|
-
Position["West"] = "west";
|
|
21
|
-
})(Position || (Position = {}));
|
|
7
|
+
import { OverlayConfig, Overlay } from '@angular/cdk/overlay';
|
|
8
|
+
import { BasePortalOutlet, CdkPortalOutlet, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
|
|
9
|
+
import { NgClass, AsyncPipe } from '@angular/common';
|
|
22
10
|
|
|
23
11
|
class FsPopoverRef {
|
|
24
12
|
overlayRef;
|
|
@@ -26,6 +14,7 @@ class FsPopoverRef {
|
|
|
26
14
|
_autoClose$ = new BehaviorSubject(true);
|
|
27
15
|
_componentLoading$ = new BehaviorSubject(true);
|
|
28
16
|
_maxWidth;
|
|
17
|
+
_maxHeight;
|
|
29
18
|
_wrapperClass;
|
|
30
19
|
_loadingDiameter;
|
|
31
20
|
_loading;
|
|
@@ -84,6 +73,9 @@ class FsPopoverRef {
|
|
|
84
73
|
get maxWidth() {
|
|
85
74
|
return this._maxWidth;
|
|
86
75
|
}
|
|
76
|
+
get maxHeight() {
|
|
77
|
+
return this._maxHeight;
|
|
78
|
+
}
|
|
87
79
|
show() {
|
|
88
80
|
setTimeout(() => {
|
|
89
81
|
this._componentLoading$.next(false);
|
|
@@ -102,6 +94,7 @@ class FsPopoverRef {
|
|
|
102
94
|
_init(config) {
|
|
103
95
|
this._wrapperClass = config.wrapperClass;
|
|
104
96
|
this._maxWidth = config.maxWidth;
|
|
97
|
+
this._maxHeight = config.maxHeight;
|
|
105
98
|
this._loading = config.loading;
|
|
106
99
|
this._loadingDiameter = config.loadingDiameter;
|
|
107
100
|
this._size = config.size;
|
|
@@ -111,11 +104,23 @@ class FsPopoverRef {
|
|
|
111
104
|
}
|
|
112
105
|
}
|
|
113
106
|
|
|
107
|
+
var Position;
|
|
108
|
+
(function (Position) {
|
|
109
|
+
Position["North"] = "north";
|
|
110
|
+
Position["South"] = "south";
|
|
111
|
+
Position["East"] = "east";
|
|
112
|
+
Position["West"] = "west";
|
|
113
|
+
})(Position || (Position = {}));
|
|
114
|
+
|
|
115
|
+
function pointInRect(x1, y1, x2, y2, px, py) {
|
|
116
|
+
return (px > x1 && px < x2) && (py > y1 && py < y2);
|
|
117
|
+
}
|
|
118
|
+
|
|
114
119
|
class FsPopoverWrapperComponent extends BasePortalOutlet {
|
|
115
|
-
popoverRef;
|
|
116
|
-
_el;
|
|
117
|
-
_zone;
|
|
118
|
-
_renderer;
|
|
120
|
+
popoverRef = inject(FsPopoverRef);
|
|
121
|
+
_el = inject(ElementRef);
|
|
122
|
+
_zone = inject(NgZone);
|
|
123
|
+
_renderer = inject(Renderer2);
|
|
119
124
|
_portalOutlet;
|
|
120
125
|
spinner;
|
|
121
126
|
content;
|
|
@@ -123,18 +128,18 @@ class FsPopoverWrapperComponent extends BasePortalOutlet {
|
|
|
123
128
|
_contentChangesObserver;
|
|
124
129
|
_updatePosition = new Subject();
|
|
125
130
|
_destroy$ = new Subject();
|
|
126
|
-
constructor(
|
|
131
|
+
constructor() {
|
|
127
132
|
super();
|
|
128
|
-
this.popoverRef = popoverRef;
|
|
129
|
-
this._el = _el;
|
|
130
|
-
this._zone = _zone;
|
|
131
|
-
this._renderer = _renderer;
|
|
132
133
|
this._updateClass();
|
|
133
134
|
this.wrapperClass = this.popoverRef.wrapperClass;
|
|
134
135
|
this.maxWidth = this.popoverRef.maxWidth;
|
|
136
|
+
this.maxHeight = this.popoverRef.maxHeight;
|
|
135
137
|
}
|
|
136
138
|
set maxWidth(value) {
|
|
137
|
-
this._el.nativeElement.style.maxWidth = value ? value
|
|
139
|
+
this._el.nativeElement.style.maxWidth = value ? `${value}px` : void 0;
|
|
140
|
+
}
|
|
141
|
+
set maxHeight(value) {
|
|
142
|
+
this._el.nativeElement.style.setProperty('--fs-popover-max-height', value ? `${value}px` : null);
|
|
138
143
|
}
|
|
139
144
|
set wrapperClass(value) {
|
|
140
145
|
this._wrapperClass = value;
|
|
@@ -180,13 +185,13 @@ class FsPopoverWrapperComponent extends BasePortalOutlet {
|
|
|
180
185
|
}
|
|
181
186
|
_watchMousePosition() {
|
|
182
187
|
const componentVisibilityChange$ = this.popoverRef.componentVisible$
|
|
183
|
-
.pipe(filter((value) => value
|
|
188
|
+
.pipe(filter((value) => value));
|
|
184
189
|
this._zone.runOutsideAngular(() => {
|
|
185
190
|
fromEvent(document, 'mousemove')
|
|
186
191
|
.pipe(takeUntil(componentVisibilityChange$), takeUntil(this._destroy$))
|
|
187
192
|
.subscribe((e) => {
|
|
188
|
-
this.spinner.nativeElement.style.left = e.x
|
|
189
|
-
this.spinner.nativeElement.style.top =
|
|
193
|
+
this.spinner.nativeElement.style.left = `${e.x}px`;
|
|
194
|
+
this.spinner.nativeElement.style.top = `${e.y + 20}px`;
|
|
190
195
|
});
|
|
191
196
|
});
|
|
192
197
|
}
|
|
@@ -198,7 +203,7 @@ class FsPopoverWrapperComponent extends BasePortalOutlet {
|
|
|
198
203
|
_observeContentChanges() {
|
|
199
204
|
const config = {
|
|
200
205
|
childList: true,
|
|
201
|
-
subtree: true
|
|
206
|
+
subtree: true,
|
|
202
207
|
};
|
|
203
208
|
this._contentChangesObserver = new MutationObserver(() => {
|
|
204
209
|
this.updatePosition();
|
|
@@ -212,15 +217,19 @@ class FsPopoverWrapperComponent extends BasePortalOutlet {
|
|
|
212
217
|
this.popoverRef.updatePosition();
|
|
213
218
|
});
|
|
214
219
|
}
|
|
215
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverWrapperComponent, deps: [
|
|
216
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
220
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
221
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsPopoverWrapperComponent, isStandalone: true, 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 @if (content) {\n {{content}}\n }\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@if (popoverRef.loading && !(popoverRef.componentVisible$ | async)) {\n <div class=\"loading-spinner\"\n #spinner\n >\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}\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:auto;max-height:var(--fs-popover-max-height, calc(100vh - 100px) )}.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"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
217
222
|
}
|
|
218
223
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverWrapperComponent, decorators: [{
|
|
219
224
|
type: Component,
|
|
220
225
|
args: [{ selector: 'fs-popover-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
221
226
|
'class': 'fs-popover-wrapper',
|
|
222
|
-
},
|
|
223
|
-
|
|
227
|
+
}, standalone: true, imports: [
|
|
228
|
+
NgClass,
|
|
229
|
+
CdkPortalOutlet,
|
|
230
|
+
AsyncPipe,
|
|
231
|
+
], 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 @if (content) {\n {{content}}\n }\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@if (popoverRef.loading && !(popoverRef.componentVisible$ | async)) {\n <div class=\"loading-spinner\"\n #spinner\n >\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}\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:auto;max-height:var(--fs-popover-max-height, calc(100vh - 100px) )}.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"] }]
|
|
232
|
+
}], ctorParameters: () => [], propDecorators: { _portalOutlet: [{
|
|
224
233
|
type: ViewChild,
|
|
225
234
|
args: [CdkPortalOutlet, { static: true }]
|
|
226
235
|
}], spinner: [{
|
|
@@ -228,57 +237,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
228
237
|
args: ['spinner']
|
|
229
238
|
}] } });
|
|
230
239
|
|
|
240
|
+
const POSITIONS = {
|
|
241
|
+
[Position.North]: {
|
|
242
|
+
originX: 'center',
|
|
243
|
+
originY: 'top',
|
|
244
|
+
overlayX: 'center',
|
|
245
|
+
overlayY: 'bottom',
|
|
246
|
+
offsetX: 0,
|
|
247
|
+
offsetY: -8,
|
|
248
|
+
panelClass: ['fs-popover-top'],
|
|
249
|
+
},
|
|
250
|
+
[Position.South]: {
|
|
251
|
+
originX: 'center',
|
|
252
|
+
originY: 'bottom',
|
|
253
|
+
overlayX: 'center',
|
|
254
|
+
overlayY: 'top',
|
|
255
|
+
offsetX: 0,
|
|
256
|
+
offsetY: 8,
|
|
257
|
+
panelClass: ['fs-popover-bottom'],
|
|
258
|
+
},
|
|
259
|
+
[Position.East]: {
|
|
260
|
+
originX: 'end',
|
|
261
|
+
originY: 'center',
|
|
262
|
+
overlayX: 'start',
|
|
263
|
+
overlayY: 'center',
|
|
264
|
+
offsetX: 8,
|
|
265
|
+
offsetY: 0,
|
|
266
|
+
panelClass: ['fs-popover-left'],
|
|
267
|
+
},
|
|
268
|
+
[Position.West]: {
|
|
269
|
+
originX: 'start',
|
|
270
|
+
originY: 'center',
|
|
271
|
+
overlayX: 'end',
|
|
272
|
+
overlayY: 'center',
|
|
273
|
+
offsetX: -8,
|
|
274
|
+
offsetY: 0,
|
|
275
|
+
panelClass: ['fs-popover-right'],
|
|
276
|
+
},
|
|
277
|
+
};
|
|
278
|
+
const FALLBACKS = {
|
|
279
|
+
[Position.South]: Position.North,
|
|
280
|
+
[Position.North]: Position.South,
|
|
281
|
+
[Position.East]: Position.West,
|
|
282
|
+
[Position.West]: Position.East,
|
|
283
|
+
};
|
|
231
284
|
function createPopupPositionStrategy(el, overlay, position) {
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
let originX = 'center';
|
|
235
|
-
let originY = 'center';
|
|
236
|
-
let offsetX = 0;
|
|
237
|
-
let offsetY = 0;
|
|
238
|
-
let panelClass = [];
|
|
239
|
-
switch (position) {
|
|
240
|
-
case Position.North:
|
|
241
|
-
originY = 'top';
|
|
242
|
-
overlayY = 'bottom';
|
|
243
|
-
panelClass = ['fs-popover-top'];
|
|
244
|
-
offsetY = -8;
|
|
245
|
-
break;
|
|
246
|
-
case Position.South:
|
|
247
|
-
originY = 'bottom';
|
|
248
|
-
overlayY = 'top';
|
|
249
|
-
panelClass = ['fs-popover-bottom'];
|
|
250
|
-
offsetY = 8;
|
|
251
|
-
break;
|
|
252
|
-
case Position.East:
|
|
253
|
-
overlayX = 'start';
|
|
254
|
-
originX = 'end';
|
|
255
|
-
panelClass = ['fs-popover-left'];
|
|
256
|
-
offsetX = 8;
|
|
257
|
-
break;
|
|
258
|
-
case Position.West:
|
|
259
|
-
overlayX = 'end';
|
|
260
|
-
originX = 'start';
|
|
261
|
-
panelClass = ['fs-popover-right'];
|
|
262
|
-
offsetX = -8;
|
|
263
|
-
break;
|
|
264
|
-
}
|
|
285
|
+
const primary = POSITIONS[position];
|
|
286
|
+
const fallback = POSITIONS[FALLBACKS[position]];
|
|
265
287
|
return createBasePopupPositionStrategy(el, overlay)
|
|
266
|
-
.withPositions([
|
|
267
|
-
{
|
|
268
|
-
originX: originX,
|
|
269
|
-
originY: originY,
|
|
270
|
-
overlayX: overlayX,
|
|
271
|
-
overlayY: overlayY,
|
|
272
|
-
offsetX: offsetX,
|
|
273
|
-
offsetY: offsetY,
|
|
274
|
-
panelClass: panelClass,
|
|
275
|
-
}
|
|
276
|
-
]);
|
|
288
|
+
.withPositions([primary, fallback]);
|
|
277
289
|
}
|
|
278
290
|
function createBasePopupPositionStrategy(el, overlay) {
|
|
279
291
|
return overlay.position()
|
|
280
292
|
.flexibleConnectedTo(el)
|
|
281
293
|
.withGrowAfterOpen(true)
|
|
294
|
+
.withPush(true)
|
|
282
295
|
.withFlexibleDimensions(false)
|
|
283
296
|
.withViewportMargin(4);
|
|
284
297
|
}
|
|
@@ -294,10 +307,13 @@ function createOverlayRef(el, overlay, position) {
|
|
|
294
307
|
}
|
|
295
308
|
|
|
296
309
|
function createInjector(popoverRef, parentInjector) {
|
|
297
|
-
const
|
|
298
|
-
|
|
299
|
-
]
|
|
300
|
-
return
|
|
310
|
+
const providers = [
|
|
311
|
+
{ provide: FsPopoverRef, useValue: popoverRef },
|
|
312
|
+
];
|
|
313
|
+
return Injector.create({
|
|
314
|
+
providers,
|
|
315
|
+
parent: parentInjector,
|
|
316
|
+
});
|
|
301
317
|
}
|
|
302
318
|
|
|
303
319
|
function createTempatePortal(template, popoverRef, data) {
|
|
@@ -305,14 +321,10 @@ function createTempatePortal(template, popoverRef, data) {
|
|
|
305
321
|
}
|
|
306
322
|
|
|
307
323
|
class FsPopoverService {
|
|
308
|
-
_injector;
|
|
309
|
-
_overlay;
|
|
324
|
+
_injector = inject(Injector);
|
|
325
|
+
_overlay = inject(Overlay);
|
|
310
326
|
_activeElement;
|
|
311
327
|
_activeElementGUID;
|
|
312
|
-
constructor(_injector, _overlay) {
|
|
313
|
-
this._injector = _injector;
|
|
314
|
-
this._overlay = _overlay;
|
|
315
|
-
}
|
|
316
328
|
get hasActivePopover() {
|
|
317
329
|
return !!this._activeElement;
|
|
318
330
|
}
|
|
@@ -353,7 +365,7 @@ class FsPopoverService {
|
|
|
353
365
|
const containerPortal = new ComponentPortal(component, void 0, createInjector(popoverRef, this._injector));
|
|
354
366
|
return overlayRef.attach(containerPortal);
|
|
355
367
|
}
|
|
356
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverService, deps: [
|
|
368
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
357
369
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverService, providedIn: 'root' });
|
|
358
370
|
}
|
|
359
371
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverService, decorators: [{
|
|
@@ -361,24 +373,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
361
373
|
args: [{
|
|
362
374
|
providedIn: 'root',
|
|
363
375
|
}]
|
|
364
|
-
}]
|
|
365
|
-
|
|
366
|
-
function pointInRect(x1, y1, x2, y2, px, py) {
|
|
367
|
-
return (px > x1 && px < x2) && (py > y1 && py < y2);
|
|
368
|
-
}
|
|
376
|
+
}] });
|
|
369
377
|
|
|
370
378
|
class FsPopoverDirective {
|
|
371
|
-
_elRef;
|
|
372
|
-
_popoverService;
|
|
373
|
-
_ngZone;
|
|
374
|
-
_router;
|
|
375
|
-
_guid = guid('xxxxxxx');
|
|
376
379
|
text;
|
|
377
380
|
template;
|
|
378
381
|
data;
|
|
379
382
|
leaveDelay = 100;
|
|
380
383
|
showDelay = 0;
|
|
381
384
|
maxWidth = 250;
|
|
385
|
+
maxHeight;
|
|
382
386
|
wrapperClass;
|
|
383
387
|
autoShow = true;
|
|
384
388
|
autoClose = true;
|
|
@@ -399,11 +403,12 @@ class FsPopoverDirective {
|
|
|
399
403
|
_mouseLeave$;
|
|
400
404
|
_popoverClosed$ = new Subject();
|
|
401
405
|
_destroy$ = new Subject();
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
406
|
+
_elRef = inject(ElementRef);
|
|
407
|
+
_popoverService = inject(FsPopoverService);
|
|
408
|
+
_ngZone = inject(NgZone);
|
|
409
|
+
_router = inject(Router, { optional: true });
|
|
410
|
+
_guid = guid('xxxxxxx');
|
|
411
|
+
constructor() {
|
|
407
412
|
this._mouseEnter$ = fromEvent(this._elRef.nativeElement, 'mouseenter');
|
|
408
413
|
this._mouseMove$ = fromEvent(document, 'mousemove', { passive: true });
|
|
409
414
|
this._mouseLeave$ = fromEvent(this._elRef.nativeElement, 'mouseleave');
|
|
@@ -445,6 +450,7 @@ class FsPopoverDirective {
|
|
|
445
450
|
}
|
|
446
451
|
this._popoverRef = new FsPopoverRef({
|
|
447
452
|
maxWidth: this.maxWidth,
|
|
453
|
+
maxHeight: this.maxHeight,
|
|
448
454
|
wrapperClass: this.wrapperClass,
|
|
449
455
|
autoShow: this.autoShow,
|
|
450
456
|
autoClose: this.autoClose,
|
|
@@ -505,12 +511,7 @@ class FsPopoverDirective {
|
|
|
505
511
|
}
|
|
506
512
|
this._hostBounds = this._elRef.nativeElement.getBoundingClientRect();
|
|
507
513
|
this._ngZone.run(() => {
|
|
508
|
-
|
|
509
|
-
this._wrapperElement = this._popoverService.openPopover(this._elRef, this.template, this.data, this._popoverRef, this.position);
|
|
510
|
-
}
|
|
511
|
-
else {
|
|
512
|
-
this._wrapperElement = this._popoverService.openPopover(this._elRef, this.text, this.data, this._popoverRef, this.position);
|
|
513
|
-
}
|
|
514
|
+
this._wrapperElement = this.template ? this._popoverService.openPopover(this._elRef, this.template, this.data, this._popoverRef, this.position) : this._popoverService.openPopover(this._elRef, this.text, this.data, this._popoverRef, this.position);
|
|
514
515
|
});
|
|
515
516
|
}
|
|
516
517
|
_listenMouseHostLeave$() {
|
|
@@ -535,8 +536,8 @@ class FsPopoverDirective {
|
|
|
535
536
|
const pointInPopoverRect = pointInRect(popoverBounds.x, popoverBounds.y, popoverBounds.x + popoverBounds.width, popoverBounds.y + popoverBounds.height, event.x, event.y);
|
|
536
537
|
return !pointInHostRect && !pointInPopoverRect;
|
|
537
538
|
}
|
|
538
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverDirective, deps: [
|
|
539
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", 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 });
|
|
539
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
540
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsPopoverDirective, isStandalone: true, selector: "[fsPopover]", inputs: { text: "text", template: "template", data: "data", leaveDelay: "leaveDelay", showDelay: "showDelay", maxWidth: "maxWidth", maxHeight: "maxHeight", 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 });
|
|
540
541
|
}
|
|
541
542
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverDirective, decorators: [{
|
|
542
543
|
type: Directive,
|
|
@@ -545,10 +546,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
545
546
|
host: {
|
|
546
547
|
'class': 'fs-popover',
|
|
547
548
|
},
|
|
549
|
+
standalone: true,
|
|
548
550
|
}]
|
|
549
|
-
}], ctorParameters: () => [
|
|
550
|
-
type: Optional
|
|
551
|
-
}] }], propDecorators: { text: [{
|
|
551
|
+
}], ctorParameters: () => [], propDecorators: { text: [{
|
|
552
552
|
type: Input
|
|
553
553
|
}], template: [{
|
|
554
554
|
type: Input
|
|
@@ -560,6 +560,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
560
560
|
type: Input
|
|
561
561
|
}], maxWidth: [{
|
|
562
562
|
type: Input
|
|
563
|
+
}], maxHeight: [{
|
|
564
|
+
type: Input
|
|
563
565
|
}], wrapperClass: [{
|
|
564
566
|
type: Input
|
|
565
567
|
}], autoShow: [{
|
|
@@ -592,35 +594,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
592
594
|
|
|
593
595
|
class FsPopoverComponent extends FsPopoverDirective {
|
|
594
596
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
595
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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", dependencies: [{ kind: "directive", type:
|
|
597
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsPopoverComponent, isStandalone: true, 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", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
596
598
|
}
|
|
597
599
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverComponent, decorators: [{
|
|
598
600
|
type: Component,
|
|
599
601
|
args: [{ selector: 'fs-popover', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
600
602
|
'class': 'fs-popover-component',
|
|
601
|
-
}, template: "<span [ngClass]=\"{'popover-container': enabled}\">\n <ng-content></ng-content>\n</span>\n" }]
|
|
603
|
+
}, standalone: true, imports: [NgClass], template: "<span [ngClass]=\"{'popover-container': enabled}\">\n <ng-content></ng-content>\n</span>\n" }]
|
|
602
604
|
}] });
|
|
603
605
|
|
|
604
606
|
class FsPopoverModule {
|
|
605
607
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
606
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverModule,
|
|
607
|
-
|
|
608
|
-
FsPopoverDirective], imports: [CommonModule,
|
|
609
|
-
PortalModule], exports: [FsPopoverComponent,
|
|
608
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverModule, imports: [FsPopoverComponent,
|
|
609
|
+
FsPopoverDirective], exports: [FsPopoverComponent,
|
|
610
610
|
FsPopoverDirective] });
|
|
611
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverModule
|
|
612
|
-
PortalModule] });
|
|
611
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverModule });
|
|
613
612
|
}
|
|
614
613
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverModule, decorators: [{
|
|
615
614
|
type: NgModule,
|
|
616
615
|
args: [{
|
|
617
616
|
imports: [
|
|
618
|
-
CommonModule,
|
|
619
|
-
PortalModule,
|
|
620
|
-
],
|
|
621
|
-
declarations: [
|
|
622
617
|
FsPopoverComponent,
|
|
623
|
-
FsPopoverWrapperComponent,
|
|
624
618
|
FsPopoverDirective,
|
|
625
619
|
],
|
|
626
620
|
exports: [
|