@libs-ui/components-popover 0.2.306 → 0.2.308-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.
- package/defines/constants.define.d.ts +1 -1
- package/esm2022/defines/constants.define.mjs +2 -2
- package/esm2022/interfaces/flag-mouse.interface.mjs +1 -1
- package/esm2022/interfaces/function-control.interface.mjs +1 -1
- package/esm2022/interfaces/index.mjs +1 -1
- package/esm2022/interfaces/popover.interface.mjs +1 -1
- package/esm2022/interfaces/popover.type.mjs +1 -1
- package/esm2022/overlay/overlay.component.mjs +21 -19
- package/esm2022/popover.component.mjs +29 -16
- package/fesm2022/libs-ui-components-popover.mjs +49 -34
- package/fesm2022/libs-ui-components-popover.mjs.map +1 -1
- package/interfaces/function-control.interface.d.ts +1 -1
- package/package.json +5 -5
- package/popover.component.d.ts +1 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, viewChild, inject, ElementRef,
|
|
2
|
+
import { signal, viewChild, inject, ElementRef, ChangeDetectionStrategy, Component, input, output, effect, untracked } from '@angular/core';
|
|
3
3
|
import { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';
|
|
4
4
|
import { UtilsUrlSearchParams, get, cloneIBoundingClientRect, cloneDeep, getViewport, getEventNameHandleClick, checkMouseOverInContainer, set, isNil } from '@libs-ui/utils';
|
|
5
5
|
import { Subject, interval, take, takeUntil, Subscription, fromEvent } from 'rxjs';
|
|
@@ -53,7 +53,7 @@ class LibsUiComponentsPopoverOverlayComponent {
|
|
|
53
53
|
this.config.set(cloneDeep(config));
|
|
54
54
|
this.container().nativeElement.style.opacity = 0;
|
|
55
55
|
if (this.config().widthByParent) {
|
|
56
|
-
this.config.update(config => ({ ...config, width: rectOrigin.width - (config?.parentBorderWidth || 0) * 2 }));
|
|
56
|
+
this.config.update((config) => ({ ...config, width: rectOrigin.width - (config?.parentBorderWidth || 0) * 2 }));
|
|
57
57
|
}
|
|
58
58
|
let viewPort = getViewport();
|
|
59
59
|
let rectFrame = undefined;
|
|
@@ -68,7 +68,7 @@ class LibsUiComponentsPopoverOverlayComponent {
|
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
if (this.config().maxHeight === null) {
|
|
71
|
-
this.config.update(config => ({ ...config, maxHeight: viewPort.height - rectOrigin.top - 44 }));
|
|
71
|
+
this.config.update((config) => ({ ...config, maxHeight: viewPort.height - rectOrigin.top - 44 }));
|
|
72
72
|
}
|
|
73
73
|
clearTimeout(this.timeout());
|
|
74
74
|
this.setVariableCss();
|
|
@@ -78,7 +78,9 @@ class LibsUiComponentsPopoverOverlayComponent {
|
|
|
78
78
|
rectContent.top += rectFrame.top;
|
|
79
79
|
rectContent.left += rectFrame.left;
|
|
80
80
|
}
|
|
81
|
-
interval(250)
|
|
81
|
+
interval(250)
|
|
82
|
+
.pipe(take(4), takeUntil(this.onDestroy))
|
|
83
|
+
.subscribe(() => {
|
|
82
84
|
const rect = cloneIBoundingClientRect(this.container().nativeElement.getBoundingClientRect());
|
|
83
85
|
if (rectFrame) {
|
|
84
86
|
rect.top += rectFrame.top;
|
|
@@ -108,7 +110,7 @@ class LibsUiComponentsPopoverOverlayComponent {
|
|
|
108
110
|
}, 50));
|
|
109
111
|
}
|
|
110
112
|
loopDirection(rectOrigin, rectContent, direction, isLast, viewPort) {
|
|
111
|
-
return new Promise(resolve => {
|
|
113
|
+
return new Promise((resolve) => {
|
|
112
114
|
const positionMode = this.config().position?.mode || 'start';
|
|
113
115
|
const { position } = this.config();
|
|
114
116
|
let result = this.setPosition(direction, rectOrigin, rectContent, viewPort, isLast);
|
|
@@ -118,21 +120,21 @@ class LibsUiComponentsPopoverOverlayComponent {
|
|
|
118
120
|
if (!this.config().ignoreArrow && position.autoUpdatePosition) {
|
|
119
121
|
position.distance = position.mode === 'end' ? position.autoUpdatePosition.endDistance : position.autoUpdatePosition.startDistance;
|
|
120
122
|
}
|
|
121
|
-
this.config.update(config => ({ ...config }));
|
|
123
|
+
this.config.update((config) => ({ ...config }));
|
|
122
124
|
}
|
|
123
125
|
result = this.setPosition(direction, rectOrigin, rectContent, viewPort, isLast);
|
|
124
126
|
}
|
|
125
127
|
if (!result && positionMode === 'center') {
|
|
126
128
|
if (position) {
|
|
127
129
|
position.mode = position.mode === 'start' ? 'end' : 'start';
|
|
128
|
-
this.config.update(config => ({ ...config }));
|
|
130
|
+
this.config.update((config) => ({ ...config }));
|
|
129
131
|
}
|
|
130
132
|
result = this.setPosition(direction, rectOrigin, rectContent, viewPort, isLast);
|
|
131
133
|
}
|
|
132
134
|
if (!result) {
|
|
133
135
|
if (position) {
|
|
134
136
|
position.mode = positionMode;
|
|
135
|
-
this.config.update(config => ({ ...config }));
|
|
137
|
+
this.config.update((config) => ({ ...config }));
|
|
136
138
|
}
|
|
137
139
|
return resolve(false);
|
|
138
140
|
}
|
|
@@ -169,7 +171,7 @@ class LibsUiComponentsPopoverOverlayComponent {
|
|
|
169
171
|
if (configValue.position?.mode === 'end') {
|
|
170
172
|
left = rectOrigin.left + rectOrigin.width - rectContent.width + (configValue.position.distance || 0);
|
|
171
173
|
}
|
|
172
|
-
left +=
|
|
174
|
+
left += configValue.parentBorderWidth || 0;
|
|
173
175
|
this.arrowLeft.set(positionLeft - left);
|
|
174
176
|
this.arrowTop.set(-6);
|
|
175
177
|
this.top.set(top);
|
|
@@ -179,7 +181,7 @@ class LibsUiComponentsPopoverOverlayComponent {
|
|
|
179
181
|
}
|
|
180
182
|
if (isLast) {
|
|
181
183
|
if (this.config) {
|
|
182
|
-
this.config.update(config => ({ ...config, maxHeight: viewPort.height - rectOrigin.top - rectOrigin.height }));
|
|
184
|
+
this.config.update((config) => ({ ...config, maxHeight: viewPort.height - rectOrigin.top - rectOrigin.height }));
|
|
183
185
|
}
|
|
184
186
|
this.left.set(this.getLeftPositionIsLast(isLast, left >= 0 ? left : 0, viewPort, rectOrigin, rectContent, halfSquare));
|
|
185
187
|
return true;
|
|
@@ -213,7 +215,7 @@ class LibsUiComponentsPopoverOverlayComponent {
|
|
|
213
215
|
}
|
|
214
216
|
if (isLast) {
|
|
215
217
|
if (this.config) {
|
|
216
|
-
this.config.update(config => ({ ...config, maxHeight: viewPort.height }));
|
|
218
|
+
this.config.update((config) => ({ ...config, maxHeight: viewPort.height }));
|
|
217
219
|
}
|
|
218
220
|
this.left.set(this.getLeftPositionIsLast(isLast, left >= 0 ? left : 0, viewPort, rectOrigin, rectContent, halfSquare));
|
|
219
221
|
return true;
|
|
@@ -221,7 +223,7 @@ class LibsUiComponentsPopoverOverlayComponent {
|
|
|
221
223
|
return false;
|
|
222
224
|
case 'left':
|
|
223
225
|
positionTop = rectOrigin.top + rectOrigin.height / 2 - halfSquare;
|
|
224
|
-
positionLeft = rectOrigin.left -
|
|
226
|
+
positionLeft = rectOrigin.left - halfSquare * 2 - distanceArrow;
|
|
225
227
|
top = positionTop - rectContent.height / 2 + halfSquare;
|
|
226
228
|
left = positionLeft - rectContent.width + halfSquare;
|
|
227
229
|
if (configValue.ignoreArrow) {
|
|
@@ -247,14 +249,14 @@ class LibsUiComponentsPopoverOverlayComponent {
|
|
|
247
249
|
}
|
|
248
250
|
if (isLast) {
|
|
249
251
|
if (this.config) {
|
|
250
|
-
this.config.update(config => ({ ...config, maxHeight: viewPort.height }));
|
|
252
|
+
this.config.update((config) => ({ ...config, maxHeight: viewPort.height }));
|
|
251
253
|
}
|
|
252
254
|
this.left.set(this.getLeftPositionIsLast(isLast, left >= 0 ? left : 0, viewPort, rectOrigin, rectContent, halfSquare));
|
|
253
255
|
return true;
|
|
254
256
|
}
|
|
255
257
|
return false;
|
|
256
258
|
case 'top':
|
|
257
|
-
positionTop = rectOrigin.top -
|
|
259
|
+
positionTop = rectOrigin.top - halfSquare * 2 - distanceArrow;
|
|
258
260
|
positionLeft = rectOrigin.left + rectOrigin.width / 2 - halfSquare;
|
|
259
261
|
top = positionTop - rectContent.height + halfSquare;
|
|
260
262
|
left = positionLeft - rectContent.width / 2 + halfSquare;
|
|
@@ -268,7 +270,7 @@ class LibsUiComponentsPopoverOverlayComponent {
|
|
|
268
270
|
if (configValue.position && configValue.position?.mode === 'end') {
|
|
269
271
|
left = rectOrigin.left + rectOrigin.width - rectContent.width + (configValue.position.distance || 0);
|
|
270
272
|
}
|
|
271
|
-
left +=
|
|
273
|
+
left += configValue.parentBorderWidth || 0;
|
|
272
274
|
this.arrowLeft.set(positionLeft - left);
|
|
273
275
|
this.arrowTop.set(rectContent.height);
|
|
274
276
|
this.top.set(top);
|
|
@@ -277,7 +279,7 @@ class LibsUiComponentsPopoverOverlayComponent {
|
|
|
277
279
|
return true;
|
|
278
280
|
}
|
|
279
281
|
if (isLast) {
|
|
280
|
-
this.config.update(config => ({ ...config, maxHeight: viewPort.height - (viewPort.height - rectOrigin.top) }));
|
|
282
|
+
this.config.update((config) => ({ ...config, maxHeight: viewPort.height - (viewPort.height - rectOrigin.top) }));
|
|
281
283
|
top = 0;
|
|
282
284
|
this.left.set(this.getLeftPositionIsLast(isLast, left >= 0 ? left : 0, viewPort, rectOrigin, rectContent, halfSquare));
|
|
283
285
|
return true;
|
|
@@ -299,7 +301,7 @@ class LibsUiComponentsPopoverOverlayComponent {
|
|
|
299
301
|
}
|
|
300
302
|
setVariableCss() {
|
|
301
303
|
const configValue = this.config();
|
|
302
|
-
this.ContainerElement.style.setProperty('--libs-ui-popover-overlay-time-animation-time', `${configValue.animationConfig?.time || .4}s`);
|
|
304
|
+
this.ContainerElement.style.setProperty('--libs-ui-popover-overlay-time-animation-time', `${configValue.animationConfig?.time || 0.4}s`);
|
|
303
305
|
this.ContainerElement.style.setProperty('--libs-ui-popover-overlay-time-animation-distance', `${this.currentDirection() === 'top' ? '-' : ''}${configValue.animationConfig?.distance || 12}px`);
|
|
304
306
|
}
|
|
305
307
|
getLeftPositionIsLast(isLast, currentLeft, viewPort, rectOrigin, rectContent, halfSquare) {
|
|
@@ -314,11 +316,11 @@ class LibsUiComponentsPopoverOverlayComponent {
|
|
|
314
316
|
this.onDestroy.complete();
|
|
315
317
|
}
|
|
316
318
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsPopoverOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
317
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsPopoverOverlayComponent, isStandalone: true, selector: "libs_ui-components-popover-overlay", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: "<div
|
|
319
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsPopoverOverlayComponent, isStandalone: true, selector: "libs_ui-components-popover-overlay", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #container\n class=\"libs-ui-popover-overlay {{ config().classInclude || '' }}\"\n [class.libs-ui-popover-overlay-white-theme]=\"config().whiteTheme\"\n [class.libs-ui-popover-overlay-animation-move]=\"config().animationConfig\"\n [ngStyle]=\"config().ngStyles || {}\"\n [style.width]=\"config().width ? config().width + 'px' : 'auto'\"\n [style.maxWidth.px]=\"config().maxWidth\"\n [style.maxHeight.px]=\"config().maxHeight\"\n [style.top.px]=\"top()\"\n [style.left.px]=\"left()\"\n [style.zIndex]=\"config().zIndex || 10\">\n @if (config()) {\n @if (!config().ignoreArrow) {\n <div class=\"relative\">\n <svg\n [class]=\"'libs-ui-popover-overlay-arrow ' + arrowClass() + (config().whiteTheme ? ' libs-ui-popover-overlay-white-theme ' : '')\"\n [style.top.px]=\"arrowTop()\"\n [style.left.px]=\"arrowLeft()\"\n [attr.direction]=\"outEvent | async\">\n <polygon points=\"0,0 6,6 12,0\" />\n Sorry, your browser does not support inline SVG.\n </svg>\n </div>\n }\n @if (config().template; as templateConfig) {\n <div\n LibsUiComponentsScrollOverlayDirective\n class=\"libs-ui-popover-overlay-body {{ config().classIncludeOverlayBody || '' }}\"\n [attr.isTemplate]=\"true\"\n [style.max-height]=\"config().maxHeight + 'px'\">\n <ng-container *ngTemplateOutlet=\"templateConfig; context: { itemContext: config().itemContext }\" />\n </div>\n } @else {\n <div\n class=\"libs-ui-popover-overlay-body libs-ui-font-h7r {{ config().classIncludeOverlayBody || '' }}\"\n LibsUiComponentsScrollOverlayDirective\n [options]=\"config().scrollOverlayOptions\"\n [style.maxHeight.px]=\"config().maxHeight\"\n [style.paddingTop.px]=\"config().paddingTop ?? 8\"\n [style.paddingRight.px]=\"config().paddingRight ?? 8\"\n [style.paddingLeft.px]=\"config().paddingLeft ?? 8\"\n [style.paddingBottom.px]=\"config().paddingBottom ?? 8\"\n [innerHtml]=\"config().content || ' ' | translate\"></div>\n }\n }\n</div>\n", styles: ["@-webkit-keyframes animation-move{0%{transform:translateY(var(--libs-ui-popover-overlay-time-animation-distance))}to{transform:translateY(0)}}@keyframes animation-move{0%{transform:translateY(var(--libs-ui-popover-overlay-time-animation-distance))}to{transform:translateY(0)}}.libs-ui-popover-overlay{position:fixed;background-color:#071631;border-radius:8px;z-index:1000;top:-10000px;left:-10000px}.libs-ui-popover-overlay-animation-move{animation:animation-move ease var(--libs-ui-popover-overlay-time-animation-time)}.libs-ui-popover-overlay .libs-ui-popover-overlay-arrow{position:absolute;width:12px;height:6px;fill:#071631}.libs-ui-popover-overlay .libs-ui-popover-overlay-arrow[direction=bottom]{transform:rotate(180deg)}.libs-ui-popover-overlay .libs-ui-popover-overlay-arrow[direction=left]{transform:rotate(270deg)}.libs-ui-popover-overlay .libs-ui-popover-overlay-arrow[direction=right]{transform:rotate(90deg)}.libs-ui-popover-overlay .libs-ui-popover-overlay-white-theme{fill:#fff}.libs-ui-popover-overlay .libs-ui-popover-overlay-body{color:#fff;word-break:break-word}.libs-ui-popover-overlay .libs-ui-popover-overlay-body[isTemplate=true]{font-size:inherit}.libs-ui-popover-overlay.libs-ui-popover-overlay-white-theme{background-color:#fff;box-shadow:0 1px 1px #00143305,0 4px 16px #0014331a}.libs-ui-popover-overlay.libs-ui-popover-overlay-white-theme .libs-ui-popover-overlay-body{color:#071631}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
318
320
|
}
|
|
319
321
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsPopoverOverlayComponent, decorators: [{
|
|
320
322
|
type: Component,
|
|
321
|
-
args: [{ selector: 'libs_ui-components-popover-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, NgStyle, AsyncPipe, LibsUiComponentsScrollOverlayDirective, NgTemplateOutlet], template: "<div
|
|
323
|
+
args: [{ selector: 'libs_ui-components-popover-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, NgStyle, AsyncPipe, LibsUiComponentsScrollOverlayDirective, NgTemplateOutlet], template: "<div\n #container\n class=\"libs-ui-popover-overlay {{ config().classInclude || '' }}\"\n [class.libs-ui-popover-overlay-white-theme]=\"config().whiteTheme\"\n [class.libs-ui-popover-overlay-animation-move]=\"config().animationConfig\"\n [ngStyle]=\"config().ngStyles || {}\"\n [style.width]=\"config().width ? config().width + 'px' : 'auto'\"\n [style.maxWidth.px]=\"config().maxWidth\"\n [style.maxHeight.px]=\"config().maxHeight\"\n [style.top.px]=\"top()\"\n [style.left.px]=\"left()\"\n [style.zIndex]=\"config().zIndex || 10\">\n @if (config()) {\n @if (!config().ignoreArrow) {\n <div class=\"relative\">\n <svg\n [class]=\"'libs-ui-popover-overlay-arrow ' + arrowClass() + (config().whiteTheme ? ' libs-ui-popover-overlay-white-theme ' : '')\"\n [style.top.px]=\"arrowTop()\"\n [style.left.px]=\"arrowLeft()\"\n [attr.direction]=\"outEvent | async\">\n <polygon points=\"0,0 6,6 12,0\" />\n Sorry, your browser does not support inline SVG.\n </svg>\n </div>\n }\n @if (config().template; as templateConfig) {\n <div\n LibsUiComponentsScrollOverlayDirective\n class=\"libs-ui-popover-overlay-body {{ config().classIncludeOverlayBody || '' }}\"\n [attr.isTemplate]=\"true\"\n [style.max-height]=\"config().maxHeight + 'px'\">\n <ng-container *ngTemplateOutlet=\"templateConfig; context: { itemContext: config().itemContext }\" />\n </div>\n } @else {\n <div\n class=\"libs-ui-popover-overlay-body libs-ui-font-h7r {{ config().classIncludeOverlayBody || '' }}\"\n LibsUiComponentsScrollOverlayDirective\n [options]=\"config().scrollOverlayOptions\"\n [style.maxHeight.px]=\"config().maxHeight\"\n [style.paddingTop.px]=\"config().paddingTop ?? 8\"\n [style.paddingRight.px]=\"config().paddingRight ?? 8\"\n [style.paddingLeft.px]=\"config().paddingLeft ?? 8\"\n [style.paddingBottom.px]=\"config().paddingBottom ?? 8\"\n [innerHtml]=\"config().content || ' ' | translate\"></div>\n }\n }\n</div>\n", styles: ["@-webkit-keyframes animation-move{0%{transform:translateY(var(--libs-ui-popover-overlay-time-animation-distance))}to{transform:translateY(0)}}@keyframes animation-move{0%{transform:translateY(var(--libs-ui-popover-overlay-time-animation-distance))}to{transform:translateY(0)}}.libs-ui-popover-overlay{position:fixed;background-color:#071631;border-radius:8px;z-index:1000;top:-10000px;left:-10000px}.libs-ui-popover-overlay-animation-move{animation:animation-move ease var(--libs-ui-popover-overlay-time-animation-time)}.libs-ui-popover-overlay .libs-ui-popover-overlay-arrow{position:absolute;width:12px;height:6px;fill:#071631}.libs-ui-popover-overlay .libs-ui-popover-overlay-arrow[direction=bottom]{transform:rotate(180deg)}.libs-ui-popover-overlay .libs-ui-popover-overlay-arrow[direction=left]{transform:rotate(270deg)}.libs-ui-popover-overlay .libs-ui-popover-overlay-arrow[direction=right]{transform:rotate(90deg)}.libs-ui-popover-overlay .libs-ui-popover-overlay-white-theme{fill:#fff}.libs-ui-popover-overlay .libs-ui-popover-overlay-body{color:#fff;word-break:break-word}.libs-ui-popover-overlay .libs-ui-popover-overlay-body[isTemplate=true]{font-size:inherit}.libs-ui-popover-overlay.libs-ui-popover-overlay-white-theme{background-color:#fff;box-shadow:0 1px 1px #00143305,0 4px 16px #0014331a}.libs-ui-popover-overlay.libs-ui-popover-overlay-white-theme .libs-ui-popover-overlay-body{color:#071631}\n"] }]
|
|
322
324
|
}] });
|
|
323
325
|
|
|
324
326
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
@@ -345,11 +347,11 @@ class LibsUiComponentsPopoverComponent {
|
|
|
345
347
|
// #region INPUT
|
|
346
348
|
debugId = input();
|
|
347
349
|
flagMouse = input({ isMouseEnter: false, isMouseEnterContent: false, isContainerHasScroll: false }, {
|
|
348
|
-
transform: (value) => value ? value : { isMouseEnter: false, isMouseEnterContent: false, isContainerHasScroll: false }
|
|
350
|
+
transform: (value) => (value ? value : { isMouseEnter: false, isMouseEnterContent: false, isContainerHasScroll: false }),
|
|
349
351
|
});
|
|
350
352
|
type = input('other');
|
|
351
353
|
mode = input('hover');
|
|
352
|
-
config = input({}, { transform: (value) => value ? value : {} });
|
|
354
|
+
config = input({}, { transform: (value) => (value ? value : {}) });
|
|
353
355
|
ignoreShowPopover = input();
|
|
354
356
|
elementRefCustom = input();
|
|
355
357
|
initEventInElementRefCustom = input(false);
|
|
@@ -383,7 +385,9 @@ class LibsUiComponentsPopoverComponent {
|
|
|
383
385
|
this.Element.classList.add('cursor-pointer');
|
|
384
386
|
}
|
|
385
387
|
if (this.classInclude()) {
|
|
386
|
-
this.classInclude()
|
|
388
|
+
this.classInclude()
|
|
389
|
+
?.split(' ')
|
|
390
|
+
.forEach((className) => {
|
|
387
391
|
if (!className) {
|
|
388
392
|
return;
|
|
389
393
|
}
|
|
@@ -403,16 +407,16 @@ class LibsUiComponentsPopoverComponent {
|
|
|
403
407
|
});
|
|
404
408
|
}
|
|
405
409
|
ngOnInit() {
|
|
406
|
-
this.outEventPopoverContent.subscribe(direction => this.directionPopover.set(direction));
|
|
410
|
+
this.outEventPopoverContent.subscribe((direction) => this.directionPopover.set(direction));
|
|
407
411
|
this.functionsControl = {
|
|
408
412
|
removePopoverOverlay: this.removePopoverOverlay.bind(this),
|
|
409
413
|
updatePopoverOverlayPosition: this.updatePopoverOverlayPosition.bind(this),
|
|
410
414
|
getRectContainer: async () => (this.elementRefCustom() || this.Element).getBoundingClientRect(),
|
|
411
|
-
getRectContent: async () =>
|
|
415
|
+
getRectContent: async () => this.popoverOverlayComponent?.instance?.ContainerElement?.getBoundingClientRect(),
|
|
412
416
|
showPopover: this.addPopoverContent.bind(this),
|
|
413
417
|
updatePopoverOverlay: this.updatePopoverOverlay.bind(this),
|
|
414
418
|
};
|
|
415
|
-
this.outFunctionsControl.emit(this.
|
|
419
|
+
this.outFunctionsControl.emit(this.FunctionsControl);
|
|
416
420
|
}
|
|
417
421
|
ngAfterContentInit() {
|
|
418
422
|
const nativeEl = this.Element;
|
|
@@ -436,7 +440,7 @@ class LibsUiComponentsPopoverComponent {
|
|
|
436
440
|
this.addPopoverContent();
|
|
437
441
|
});
|
|
438
442
|
this.mouseClick.subscribe(() => {
|
|
439
|
-
this.firstClick.update(val => this.ignoreShowPopover() ? false : !val);
|
|
443
|
+
this.firstClick.update((val) => (this.ignoreShowPopover() ? false : !val));
|
|
440
444
|
this.outEvent.emit('click');
|
|
441
445
|
if (!this.mode().startsWith('click')) {
|
|
442
446
|
return;
|
|
@@ -450,6 +454,9 @@ class LibsUiComponentsPopoverComponent {
|
|
|
450
454
|
this.windowResize.pipe(debounceTime(500)).subscribe(this.updatePopoverOverlayPosition.bind(this));
|
|
451
455
|
}
|
|
452
456
|
// #region FUNCTIONS
|
|
457
|
+
get FunctionsControl() {
|
|
458
|
+
return this.functionsControl;
|
|
459
|
+
}
|
|
453
460
|
async updatePopoverOverlay() {
|
|
454
461
|
const timer = setTimeout(() => {
|
|
455
462
|
clearTimeout(timer);
|
|
@@ -478,12 +485,17 @@ class LibsUiComponentsPopoverComponent {
|
|
|
478
485
|
case 'right':
|
|
479
486
|
case 'left':
|
|
480
487
|
case 'bottom':
|
|
481
|
-
if (
|
|
488
|
+
if (rectListView.top + rectListView.height > viewPort.height ||
|
|
489
|
+
rectListView.top < rectContainer.top + rectContainer.height ||
|
|
490
|
+
rectListView.top - (rectContainer.top + rectContainer.height) > distanceListViewAndContainer ||
|
|
491
|
+
rectListView.left + rectListView.width > viewPort.width) {
|
|
482
492
|
this.updatePopoverOverlay();
|
|
483
493
|
}
|
|
484
494
|
break;
|
|
485
495
|
case 'top':
|
|
486
|
-
if (
|
|
496
|
+
if (rectContainer.top - (rectListView.top + rectListView.height) > distanceListViewAndContainer ||
|
|
497
|
+
rectListView.top + rectListView.height + distanceListViewAndContainer > rectContainer.top + 2 ||
|
|
498
|
+
rectListView.left + rectListView.width > viewPort.width) {
|
|
487
499
|
this.updatePopoverOverlay();
|
|
488
500
|
}
|
|
489
501
|
break;
|
|
@@ -497,7 +509,7 @@ class LibsUiComponentsPopoverComponent {
|
|
|
497
509
|
return this.elementRef.nativeElement.firstElementChild || this.elementRef.nativeElement;
|
|
498
510
|
}
|
|
499
511
|
initObservable(el, eventName) {
|
|
500
|
-
return fromEvent(el, eventName).pipe(tap(e => !this.ignoreStopPropagationEvent() && e.stopPropagation()), takeUntil$1(this.onDestroy));
|
|
512
|
+
return fromEvent(el, eventName).pipe(tap((e) => !this.ignoreStopPropagationEvent() && e.stopPropagation()), takeUntil$1(this.onDestroy));
|
|
501
513
|
}
|
|
502
514
|
async addPopoverContent(nativeEl) {
|
|
503
515
|
if (this.popoverOverlayComponent || this.ignoreShowPopover() || !this.config()) {
|
|
@@ -512,7 +524,7 @@ class LibsUiComponentsPopoverComponent {
|
|
|
512
524
|
const flagsMouses = {
|
|
513
525
|
isMouseEnter: true,
|
|
514
526
|
isMouseEnterContent: false,
|
|
515
|
-
isContainerHasScroll: nativeEl.offsetHeight < nativeEl.scrollHeight
|
|
527
|
+
isContainerHasScroll: nativeEl.offsetHeight < nativeEl.scrollHeight,
|
|
516
528
|
};
|
|
517
529
|
const nativeElContainer = instance.ElementRef.nativeElement;
|
|
518
530
|
const mouseEnterContent = this.initObservable(nativeElContainer, 'mouseenter');
|
|
@@ -564,8 +576,11 @@ class LibsUiComponentsPopoverComponent {
|
|
|
564
576
|
}));
|
|
565
577
|
}
|
|
566
578
|
handlerMouseLeaveRemovePopoverOverlay(obs, flagsMouses, flagKeyChangeValue, flagKeyCheck, outEvent) {
|
|
567
|
-
this.subsEventPopup.add(obs
|
|
568
|
-
|
|
579
|
+
this.subsEventPopup.add(obs
|
|
580
|
+
.pipe(tap(() => this.outEvent.emit(outEvent)), debounceTime(getPopoverTimerDestroyInQueryUrl() || this.config()?.timerDestroy || 0))
|
|
581
|
+
.subscribe((e) => {
|
|
582
|
+
if (outEvent === 'mouseleave-element' &&
|
|
583
|
+
(checkMouseOverInContainer(e, this.Element) || checkMouseOverInContainer({ clientX: e.clientX + 2, clientY: e.clientY + 2 }, this.Element) || checkMouseOverInContainer({ clientX: e.clientX - 2, clientY: e.clientY - 2 }, this.Element))) {
|
|
569
584
|
return;
|
|
570
585
|
}
|
|
571
586
|
set(flagsMouses, flagKeyChangeValue, false);
|
|
@@ -581,7 +596,7 @@ class LibsUiComponentsPopoverComponent {
|
|
|
581
596
|
}
|
|
582
597
|
getDefaultConfigs() {
|
|
583
598
|
const configValue = this.config() || {};
|
|
584
|
-
if (
|
|
599
|
+
if (isNil(configValue.content) || (configValue.content === this.contentInnerHtml() && this.contentInnerHtml() !== this.Element.innerHTML)) {
|
|
585
600
|
configValue.content = this.Element.innerHTML;
|
|
586
601
|
}
|
|
587
602
|
this.contentInnerHtml.set(this.Element.innerHTML);
|
|
@@ -597,7 +612,7 @@ class LibsUiComponentsPopoverComponent {
|
|
|
597
612
|
if (!configValue.position) {
|
|
598
613
|
configValue.position = {
|
|
599
614
|
mode: 'center',
|
|
600
|
-
distance: 0
|
|
615
|
+
distance: 0,
|
|
601
616
|
};
|
|
602
617
|
}
|
|
603
618
|
return configValue;
|