@libs-ui/components-popover 0.2.304 → 0.2.306-10
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 +30 -16
- package/fesm2022/libs-ui-components-popover.mjs +50 -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,20 +407,21 @@ 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;
|
|
419
423
|
this.mouseEnter = this.initObservable(nativeEl, 'mouseenter');
|
|
424
|
+
this.initObservable(nativeEl, 'click').subscribe();
|
|
420
425
|
this.mouseClick = this.initObservable(nativeEl, getEventNameHandleClick);
|
|
421
426
|
this.mouseWheel = this.initObservable(window, 'wheel');
|
|
422
427
|
this.windowResize = this.initObservable(window, 'resize');
|
|
@@ -435,7 +440,7 @@ class LibsUiComponentsPopoverComponent {
|
|
|
435
440
|
this.addPopoverContent();
|
|
436
441
|
});
|
|
437
442
|
this.mouseClick.subscribe(() => {
|
|
438
|
-
this.firstClick.update(val => this.ignoreShowPopover() ? false : !val);
|
|
443
|
+
this.firstClick.update((val) => (this.ignoreShowPopover() ? false : !val));
|
|
439
444
|
this.outEvent.emit('click');
|
|
440
445
|
if (!this.mode().startsWith('click')) {
|
|
441
446
|
return;
|
|
@@ -449,6 +454,9 @@ class LibsUiComponentsPopoverComponent {
|
|
|
449
454
|
this.windowResize.pipe(debounceTime(500)).subscribe(this.updatePopoverOverlayPosition.bind(this));
|
|
450
455
|
}
|
|
451
456
|
// #region FUNCTIONS
|
|
457
|
+
get FunctionsControl() {
|
|
458
|
+
return this.functionsControl;
|
|
459
|
+
}
|
|
452
460
|
async updatePopoverOverlay() {
|
|
453
461
|
const timer = setTimeout(() => {
|
|
454
462
|
clearTimeout(timer);
|
|
@@ -477,12 +485,17 @@ class LibsUiComponentsPopoverComponent {
|
|
|
477
485
|
case 'right':
|
|
478
486
|
case 'left':
|
|
479
487
|
case 'bottom':
|
|
480
|
-
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) {
|
|
481
492
|
this.updatePopoverOverlay();
|
|
482
493
|
}
|
|
483
494
|
break;
|
|
484
495
|
case 'top':
|
|
485
|
-
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) {
|
|
486
499
|
this.updatePopoverOverlay();
|
|
487
500
|
}
|
|
488
501
|
break;
|
|
@@ -496,7 +509,7 @@ class LibsUiComponentsPopoverComponent {
|
|
|
496
509
|
return this.elementRef.nativeElement.firstElementChild || this.elementRef.nativeElement;
|
|
497
510
|
}
|
|
498
511
|
initObservable(el, eventName) {
|
|
499
|
-
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));
|
|
500
513
|
}
|
|
501
514
|
async addPopoverContent(nativeEl) {
|
|
502
515
|
if (this.popoverOverlayComponent || this.ignoreShowPopover() || !this.config()) {
|
|
@@ -511,7 +524,7 @@ class LibsUiComponentsPopoverComponent {
|
|
|
511
524
|
const flagsMouses = {
|
|
512
525
|
isMouseEnter: true,
|
|
513
526
|
isMouseEnterContent: false,
|
|
514
|
-
isContainerHasScroll: nativeEl.offsetHeight < nativeEl.scrollHeight
|
|
527
|
+
isContainerHasScroll: nativeEl.offsetHeight < nativeEl.scrollHeight,
|
|
515
528
|
};
|
|
516
529
|
const nativeElContainer = instance.ElementRef.nativeElement;
|
|
517
530
|
const mouseEnterContent = this.initObservable(nativeElContainer, 'mouseenter');
|
|
@@ -563,8 +576,11 @@ class LibsUiComponentsPopoverComponent {
|
|
|
563
576
|
}));
|
|
564
577
|
}
|
|
565
578
|
handlerMouseLeaveRemovePopoverOverlay(obs, flagsMouses, flagKeyChangeValue, flagKeyCheck, outEvent) {
|
|
566
|
-
this.subsEventPopup.add(obs
|
|
567
|
-
|
|
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))) {
|
|
568
584
|
return;
|
|
569
585
|
}
|
|
570
586
|
set(flagsMouses, flagKeyChangeValue, false);
|
|
@@ -580,7 +596,7 @@ class LibsUiComponentsPopoverComponent {
|
|
|
580
596
|
}
|
|
581
597
|
getDefaultConfigs() {
|
|
582
598
|
const configValue = this.config() || {};
|
|
583
|
-
if (
|
|
599
|
+
if (isNil(configValue.content) || (configValue.content === this.contentInnerHtml() && this.contentInnerHtml() !== this.Element.innerHTML)) {
|
|
584
600
|
configValue.content = this.Element.innerHTML;
|
|
585
601
|
}
|
|
586
602
|
this.contentInnerHtml.set(this.Element.innerHTML);
|
|
@@ -596,7 +612,7 @@ class LibsUiComponentsPopoverComponent {
|
|
|
596
612
|
if (!configValue.position) {
|
|
597
613
|
configValue.position = {
|
|
598
614
|
mode: 'center',
|
|
599
|
-
distance: 0
|
|
615
|
+
distance: 0,
|
|
600
616
|
};
|
|
601
617
|
}
|
|
602
618
|
return configValue;
|