@brickclay-org/ui 0.1.84 → 0.1.85

package/fesm2022/brickclay-org-ui.mjs

@@ -4231,9 +4231,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Shared document/window listeners for `bkTooltip`.
+ *
+ * Every directive instance used to declare its own `document:mousedown`,
+ * `window:scroll` and `window:resize` host listeners. On dense screens (the ticket
+ * documents page renders several hundred tooltip hosts) a single click therefore ran
+ * several hundred handlers and — because host listeners mark their view dirty —
+ * forced a full application change-detection pass, which is what made rapid clicking
+ * lock up the page.
+ *
+ * Only a tooltip that is currently visible has anything to do, so tooltips subscribe
+ * while shown and unsubscribe when hidden. The listeners are attached outside the
+ * Angular zone: they only mutate tooltip styles through `Renderer2`, so no change
+ * detection is required.
+ */
+class BkTooltipInteractionService {
+    zone;
+    visibleTooltips = new Set();
+    listenersAttached = false;
+    constructor(zone) {
+        this.zone = zone;
+    }
+    /** Called when a tooltip becomes visible. */
+    register(tooltip) {
+        this.attachListeners();
+        this.visibleTooltips.add(tooltip);
+    }
+    /** Called when a tooltip is hidden or destroyed. */
+    unregister(tooltip) {
+        this.visibleTooltips.delete(tooltip);
+    }
+    attachListeners() {
+        if (this.listenersAttached) {
+            return;
+        }
+        this.listenersAttached = true;
+        this.zone.runOutsideAngular(() => {
+            const hideAll = () => {
+                this.forEachVisible((tooltip) => tooltip.hideOnGlobalInteraction());
+            };
+            document.addEventListener('mousedown', hideAll);
+            document.addEventListener('touchstart', hideAll);
+            window.addEventListener('scroll', () => {
+                this.forEachVisible((tooltip) => tooltip.repositionOnViewportChange());
+            });
+            window.addEventListener('resize', () => {
+                this.forEachVisible((tooltip) => tooltip.repositionOnViewportChange());
+            });
+        });
+    }
+    forEachVisible(action) {
+        if (this.visibleTooltips.size === 0) {
+            return;
+        }
+        // Copy: hiding a tooltip unregisters it while iterating.
+        for (const tooltip of Array.from(this.visibleTooltips)) {
+            action(tooltip);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTooltipInteractionService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTooltipInteractionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTooltipInteractionService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.NgZone }] });
+
 class BKTooltipDirective {
     el;
     renderer;
+    tooltipInteraction;
     tooltipContent = '';
     tooltipPosition = 'right';
     scrollable = false;
@@ -4245,9 +4313,11 @@ class BKTooltipDirective {
     isHoveringTooltip = false;
     hideTimeout = null;
     tooltipListeners = [];
-    constructor(el, renderer) {
+    isRegisteredWithInteractionService = false;
+    constructor(el, renderer, tooltipInteraction) {
         this.el = el;
         this.renderer = renderer;
+        this.tooltipInteraction = tooltipInteraction;
     }
     ngOnInit() {
         this.createTooltip();
@@ -4262,6 +4332,7 @@ class BKTooltipDirective {
             clearTimeout(this.hideTimeout);
             this.hideTimeout = null;
         }
+        this.unregisterFromInteractionService();
         this.cleanupTooltipListeners();
         this.removeTooltip();
     }
@@ -4314,6 +4385,7 @@ class BKTooltipDirective {
                 opacity: '1',
             });
             this.renderer.setStyle(document.body, 'overflow-x', 'hidden'); // ✅ temporarily lock horizontal scroll
+            this.registerWithInteractionService();
         }
     }
     onMouseLeave() {
@@ -4336,24 +4408,34 @@ class BKTooltipDirective {
     //     this.renderer.removeStyle(document.body, 'overflow-x');
     //   }
     // }
-    // Hide tooltip the instant *any* mousedown happens, not just on this host:
-    // otherwise a tooltip shown by hovering one element (e.g. a "+N" badge)
-    // can still be mid-fade — mouseleave's hide is debounced 100ms and the
-    // fade itself takes 300ms — when a click elsewhere opens something else
-    // (a dropdown panel, another tooltip's host), so the two stack visibly.
-    // Also covers CDK drag-drop, which steals the element before mouseleave fires.
-    onInteract() {
+    /** @see BkTooltipInteractionService — shared document/window listeners */
+    hideOnGlobalInteraction() {
         if (this.hideTimeout) {
             clearTimeout(this.hideTimeout);
             this.hideTimeout = null;
         }
         this.hideTooltipInstant();
     }
-    onWindowChange() {
+    /** @see BkTooltipInteractionService — shared document/window listeners */
+    repositionOnViewportChange() {
         if (this.tooltipElement?.style.visibility === 'visible') {
             this.setTooltipPosition();
         }
     }
+    registerWithInteractionService() {
+        if (this.isRegisteredWithInteractionService) {
+            return;
+        }
+        this.tooltipInteraction.register(this);
+        this.isRegisteredWithInteractionService = true;
+    }
+    unregisterFromInteractionService() {
+        if (!this.isRegisteredWithInteractionService) {
+            return;
+        }
+        this.tooltipInteraction.unregister(this);
+        this.isRegisteredWithInteractionService = false;
+    }
     isTooltipContentEmpty() {
         if (typeof this.tooltipContent === 'string') {
             return !this.tooltipContent.trim();
@@ -4385,6 +4467,7 @@ class BKTooltipDirective {
             this.renderer.removeStyle(document.body, 'overflow-x'); // ✅ restore scroll when tooltip hides
         }
         this.isHoveringTooltip = false;
+        this.unregisterFromInteractionService();
     }
     setupTooltipHoverListeners() {
         if (!this.tooltipElement)
@@ -4405,6 +4488,7 @@ class BKTooltipDirective {
                     visibility: 'visible',
                     opacity: '1',
                 });
+                this.registerWithInteractionService();
             }
         });
         // Add mouseleave listener to tooltip
@@ -4465,9 +4549,7 @@ class BKTooltipDirective {
             position: 'fixed',
             visibility: 'hidden',
             opacity: '0',
-            // Tooltips can originate inside popovers/dropdowns (z-index 10000).
-            // Keep this transient explanatory layer above its owning overlay.
-            zIndex: '11000',
+            zIndex: '9999',
             transition: 'opacity 0.3s ease, visibility 0.3s ease',
             maxWidth: '300px',
             wordBreak: 'normal', // ← only break at spaces
@@ -4690,8 +4772,8 @@ class BKTooltipDirective {
             this.renderer.setStyle(el, prop, value);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BKTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BKTooltipDirective, isStandalone: true, selector: "[bkTooltip]", inputs: { tooltipContent: ["bkTooltip", "tooltipContent"], tooltipPosition: ["bkTooltipPosition", "tooltipPosition"], scrollable: ["bkTooltipScrollable", "scrollable"], maxHeight: ["bkTooltipMaxHeight", "maxHeight"], tooltipSize: ["bkTooltipSize", "tooltipSize"], autoHeight: ["bkTooltipAutoHeight", "autoHeight"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "document:mousedown": "onInteract()", "touchstart": "onInteract()", "window:scroll": "onWindowChange()", "window:resize": "onWindowChange()" } }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BKTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: BkTooltipInteractionService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BKTooltipDirective, isStandalone: true, selector: "[bkTooltip]", inputs: { tooltipContent: ["bkTooltip", "tooltipContent"], tooltipPosition: ["bkTooltipPosition", "tooltipPosition"], scrollable: ["bkTooltipScrollable", "scrollable"], maxHeight: ["bkTooltipMaxHeight", "maxHeight"], tooltipSize: ["bkTooltipSize", "tooltipSize"], autoHeight: ["bkTooltipAutoHeight", "autoHeight"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BKTooltipDirective, decorators: [{
             type: Directive,
@@ -4699,7 +4781,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     selector: '[bkTooltip]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { tooltipContent: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: BkTooltipInteractionService }], propDecorators: { tooltipContent: [{
                 type: Input,
                 args: ['bkTooltip']
             }], tooltipPosition: [{
@@ -4723,18 +4805,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }], onMouseLeave: [{
                 type: HostListener,
                 args: ['mouseleave']
-            }], onInteract: [{
-                type: HostListener,
-                args: ['document:mousedown']
-            }, {
-                type: HostListener,
-                args: ['touchstart']
-            }], onWindowChange: [{
-                type: HostListener,
-                args: ['window:scroll']
-            }, {
-                type: HostListener,
-                args: ['window:resize']
             }] } });
 
 class BkGrid {
@@ -12770,5 +12840,5 @@ const BK_TABLE = [
  * Generated bundle index. Do not edit.
  */
 
-export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BK_TABLE, BkAvatar, BkAvatarGroup, BkAvatarUploader, BkBadge, BkBreadcrumb, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkDragHandle, BkDropdown, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkMenu, BkPagination, BkPill, BkPopover, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTable, BkTableDrag, BkTableFooter, BkTableSummary, BkTableTitle, BkTabs, BkTd, BkTextarea, BkTh, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkTrExpand, BkTreeDrag, BkValidator, BkVirtualScroll, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, NEUTRAL_APPEARANCE, POPOVER_PLACEMENTS, computePopoverPosition, containsBkTreeNode, deriveAppearance, flattenBkTreeData, getDialogBackdropAnimation, getDialogPanelAnimation, joinPlacement, moveBkTreeNode, normalizeBkTableSize, parseColor, splitPlacement };
+export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BK_TABLE, BkAvatar, BkAvatarGroup, BkAvatarUploader, BkBadge, BkBreadcrumb, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkDragHandle, BkDropdown, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkMenu, BkPagination, BkPill, BkPopover, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTable, BkTableDrag, BkTableFooter, BkTableSummary, BkTableTitle, BkTabs, BkTd, BkTextarea, BkTh, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkTooltipInteractionService, BkTrExpand, BkTreeDrag, BkValidator, BkVirtualScroll, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, NEUTRAL_APPEARANCE, POPOVER_PLACEMENTS, computePopoverPosition, containsBkTreeNode, deriveAppearance, flattenBkTreeData, getDialogBackdropAnimation, getDialogPanelAnimation, joinPlacement, moveBkTreeNode, normalizeBkTableSize, parseColor, splitPlacement };
 //# sourceMappingURL=brickclay-org-ui.mjs.map