@dotglitch/ngx-common 1.0.10 → 1.0.13
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/components/tooltip/tooltip.component.d.ts +1 -2
- package/directives/tooltip.directive.d.ts +1 -1
- package/esm2020/components/tooltip/tooltip.component.mjs +11 -12
- package/esm2020/directives/tooltip.directive.mjs +6 -2
- package/fesm2015/dotglitch-ngx-common.mjs +16 -14
- package/fesm2015/dotglitch-ngx-common.mjs.map +1 -1
- package/fesm2020/dotglitch-ngx-common.mjs +15 -12
- package/fesm2020/dotglitch-ngx-common.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -187,6 +187,7 @@ class TooltipComponent {
|
|
|
187
187
|
this.template = this.template || this._data?.template;
|
|
188
188
|
this.ownerCords = this.ownerCords || this._data?.ownerCords;
|
|
189
189
|
this.selfCords = this.selfCords || this._data?.selfCords;
|
|
190
|
+
this.isLockedOpen = this._data?.isLockedOpen;
|
|
190
191
|
}
|
|
191
192
|
ngOnInit() {
|
|
192
193
|
const selfY = parseInt(this.selfCords.top.replace('px', ''));
|
|
@@ -206,7 +207,7 @@ class TooltipComponent {
|
|
|
206
207
|
// TODO: resolve the event hook with the .void element
|
|
207
208
|
setTimeout(() => {
|
|
208
209
|
this.hasBootstrapped = true;
|
|
209
|
-
if (this.pointerIsOnVoid)
|
|
210
|
+
if (this.pointerIsOnVoid && !this.isLockedOpen)
|
|
210
211
|
this.dialogRef.close();
|
|
211
212
|
}, 200);
|
|
212
213
|
}
|
|
@@ -214,18 +215,16 @@ class TooltipComponent {
|
|
|
214
215
|
* Close the tooltip if these actions occur
|
|
215
216
|
*/
|
|
216
217
|
onClose() {
|
|
217
|
-
this.
|
|
218
|
-
|
|
219
|
-
onPointerLeave() {
|
|
220
|
-
this.dialogRef?.close();
|
|
218
|
+
if (!this.isLockedOpen)
|
|
219
|
+
this.dialogRef?.close();
|
|
221
220
|
}
|
|
222
|
-
closeOnVoid() {
|
|
223
|
-
|
|
224
|
-
|
|
221
|
+
closeOnVoid(force = false) {
|
|
222
|
+
if (!this.isLockedOpen || force)
|
|
223
|
+
this.dialogRef.close();
|
|
225
224
|
}
|
|
226
225
|
}
|
|
227
226
|
TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ViewContainerRef }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1.MatDialog, optional: true }, { token: i1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
228
|
-
TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TooltipComponent, isStandalone: true, selector: "ngx-tooltip", inputs: { data: "data", config: "config", ownerCords: "ownerCords", selfCords: "selfCords", template: "template" }, host: { listeners: { "window:resize": "onClose()", "window:blur": "onClose()", "pointerleave": "
|
|
227
|
+
TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TooltipComponent, isStandalone: true, selector: "ngx-tooltip", inputs: { data: "data", config: "config", ownerCords: "ownerCords", selfCords: "selfCords", template: "template" }, host: { listeners: { "window:resize": "onClose()", "window:blur": "onClose()", "pointerleave": "onClose()" } }, ngImport: i0, template: "<!-- Mouse event blocker for pointer leave -->\n<div\n *ngIf=\"coverRectCords\"\n class=\"owner-mask\"\n [style.top]=\"coverRectCords.top + 'px'\"\n [style.left]=\"coverRectCords.left + 'px'\"\n [style.height]=\"coverRectCords.height + 'px'\"\n [style.width]=\"coverRectCords.width + 'px'\"\n style=\"z-index: -1;\"\n></div>\n\n<div class=\"void\"\n (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && !isLockedOpen && closeOnVoid()\"\n (pointerleave)=\"pointerIsOnVoid = false\"\n (pointerdown)=\"hasBootstrapped && closeOnVoid(true)\"\n></div>\n\n<div class=\"container\">\n <ng-container\n *ngIf=\"isTemplate == false\"\n [ngComponentOutlet]=\"$any(template)\"\n >\n </ng-container>\n\n <ng-container\n *ngIf=\"isTemplate == true\"\n >\n <ng-container\n [ngTemplateOutlet]=\"$any(template)\"\n [ngTemplateOutletContext]=\"{ '$implicit': data, dialog: dialogRef }\"\n ></ng-container>\n </ng-container>\n</div>\n", styles: ["::ng-deep .cdk-overlay-container .ngx-tooltip{--mdc-dialog-container-color: var(--ngx-tooltip-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__surface{overflow:visible;background-color:#0000}::ng-deep .cdk-overlay-container .context-menu-backdrop.cdk-overlay-backdrop-showing{opacity:0}::ng-deep .cdk-overlay-pane.ngx-tooltip .mat-dialog-container{padding:0}:host{min-width:2px;min-height:2px;display:block}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}.container{width:100%;height:100%;background:var(--ngx-tooltip-background-color, #333);border-radius:6px;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
229
228
|
// NgIf,
|
|
230
229
|
// NgTemplateOutlet,
|
|
231
230
|
// NgComponentOutlet,
|
|
@@ -237,7 +236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
237
236
|
// NgTemplateOutlet,
|
|
238
237
|
// NgComponentOutlet,
|
|
239
238
|
CommonModule,
|
|
240
|
-
], standalone: true, template: "<!-- Mouse event blocker for pointer leave -->\n<div\n *ngIf=\"coverRectCords\"\n class=\"owner-mask\"\n [style.top]=\"coverRectCords.top + 'px'\"\n [style.left]=\"coverRectCords.left + 'px'\"\n [style.height]=\"coverRectCords.height + 'px'\"\n [style.width]=\"coverRectCords.width + 'px'\"\n style=\"z-index: -1;\"\n></div>\n\n<div class=\"void\"\n (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && !isLockedOpen && closeOnVoid()\"\n (pointerleave)=\"pointerIsOnVoid = false\"\n (pointerdown)=\"hasBootstrapped &&
|
|
239
|
+
], standalone: true, template: "<!-- Mouse event blocker for pointer leave -->\n<div\n *ngIf=\"coverRectCords\"\n class=\"owner-mask\"\n [style.top]=\"coverRectCords.top + 'px'\"\n [style.left]=\"coverRectCords.left + 'px'\"\n [style.height]=\"coverRectCords.height + 'px'\"\n [style.width]=\"coverRectCords.width + 'px'\"\n style=\"z-index: -1;\"\n></div>\n\n<div class=\"void\"\n (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && !isLockedOpen && closeOnVoid()\"\n (pointerleave)=\"pointerIsOnVoid = false\"\n (pointerdown)=\"hasBootstrapped && closeOnVoid(true)\"\n></div>\n\n<div class=\"container\">\n <ng-container\n *ngIf=\"isTemplate == false\"\n [ngComponentOutlet]=\"$any(template)\"\n >\n </ng-container>\n\n <ng-container\n *ngIf=\"isTemplate == true\"\n >\n <ng-container\n [ngTemplateOutlet]=\"$any(template)\"\n [ngTemplateOutletContext]=\"{ '$implicit': data, dialog: dialogRef }\"\n ></ng-container>\n </ng-container>\n</div>\n", styles: ["::ng-deep .cdk-overlay-container .ngx-tooltip{--mdc-dialog-container-color: var(--ngx-tooltip-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__surface{overflow:visible;background-color:#0000}::ng-deep .cdk-overlay-container .context-menu-backdrop.cdk-overlay-backdrop-showing{opacity:0}::ng-deep .cdk-overlay-pane.ngx-tooltip .mat-dialog-container{padding:0}:host{min-width:2px;min-height:2px;display:block}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}.container{width:100%;height:100%;background:var(--ngx-tooltip-background-color, #333);border-radius:6px;overflow:hidden}\n"] }]
|
|
241
240
|
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: undefined, decorators: [{
|
|
242
241
|
type: Optional
|
|
243
242
|
}, {
|
|
@@ -263,7 +262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
263
262
|
}, {
|
|
264
263
|
type: HostListener,
|
|
265
264
|
args: ["window:blur"]
|
|
266
|
-
}
|
|
265
|
+
}, {
|
|
267
266
|
type: HostListener,
|
|
268
267
|
args: ["pointerleave"]
|
|
269
268
|
}] } });
|
|
@@ -309,6 +308,8 @@ class TooltipDirective {
|
|
|
309
308
|
if (this.config.triggers.includes("click")) {
|
|
310
309
|
if (!this.dialogInstance) {
|
|
311
310
|
const el = this.viewContainer.element.nativeElement;
|
|
311
|
+
const data = this.data;
|
|
312
|
+
data.isLockedOpen = true;
|
|
312
313
|
this.dialogInstance = await openTooltip(this.dialog, this.template, this.data, el, this.config);
|
|
313
314
|
}
|
|
314
315
|
return;
|
|
@@ -367,13 +368,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
367
368
|
args: ['pointerleave', ['$event']]
|
|
368
369
|
}] } });
|
|
369
370
|
// Helper to open the context menu without using the directive.
|
|
370
|
-
const openTooltip = async (dialog, template, data, el, config) => {
|
|
371
|
+
const openTooltip = async (dialog, template, data, el, config, focusTrap = false) => {
|
|
371
372
|
const rect = await calcTooltipBounds(template, data);
|
|
372
373
|
const ownerCords = el.getBoundingClientRect();
|
|
373
374
|
const cords = getPosition(el, config, rect);
|
|
374
375
|
const specificId = crypto.randomUUID();
|
|
375
376
|
return new Promise(res => {
|
|
376
377
|
dialog.open(TooltipComponent, {
|
|
378
|
+
autoFocus: focusTrap,
|
|
379
|
+
restoreFocus: focusTrap,
|
|
377
380
|
data: {
|
|
378
381
|
data: data,
|
|
379
382
|
template: template,
|