@datarailsshared/datarailsshared 1.4.123 → 1.4.124

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -2660,6 +2660,7 @@
             this.viewContainerRef = viewContainerRef;
             this.elementRef = elementRef;
             this.popoverRef = popoverRef;
+            this.popoverOpened = new i0.EventEmitter();
             this.class = '';
             this.isContentTemplate = false;
             this.popover = true;
@@ -2689,8 +2690,35 @@
             if (this.alignment === 'host') {
                 this[getAlignmentDimension(this.position)] = '100%';
             }
+            this.popoverOpened.emit();
+            this.repositionToNewContainerAndFreeze();
             this.cdr.detectChanges();
         };
+        /**
+         * Removing popover element from cdk-overlay and attach to provided container after element is positioned
+         * is required for specific case of preserving popover at same position on document while scroll (not fixed)
+         *
+         * TODO: implement more neat, transparent and Angular way solution: i.e. create another service (or extend existiong one)
+         * without attaching component to cdk Overlay and instead positioning it to element passed in directive input parameter
+         */
+        DrPopoverComponent.prototype.repositionToNewContainerAndFreeze = function () {
+            var _this = this;
+            var newContainer = !!this.freezeToContainerSelector && document.querySelector(this.freezeToContainerSelector);
+            if (newContainer) {
+                // waiting until element is positioned on overlay
+                setTimeout(function () {
+                    var element = _this.elementRef.nativeElement;
+                    if (!element.closest('.cdk-overlay-container'))
+                        return;
+                    var position = element.getBoundingClientRect();
+                    var newContainerPosition = newContainer.getBoundingClientRect();
+                    element.style.position = 'absolute';
+                    element.style.top = newContainer.scrollTop + position.top - newContainerPosition.top + "px";
+                    element.style.left = newContainerPosition.left + position.left + "px";
+                    newContainer.appendChild(element);
+                });
+            }
+        };
         return DrPopoverComponent;
     }());
     DrPopoverComponent.decorators = [
@@ -2712,6 +2740,7 @@
         { type: DrPopoverRef }
     ]; };
     DrPopoverComponent.propDecorators = {
+        popoverOpened: [{ type: i0.Output }],
         content: [{ type: i0.Input }],
         contentContext: [{ type: i0.Input }],
         class: [{ type: i0.Input }],
@@ -2719,6 +2748,7 @@
         manualClosing: [{ type: i0.Input }],
         alignment: [{ type: i0.Input }],
         position: [{ type: i0.Input }],
+        freezeToContainerSelector: [{ type: i0.Input }],
         popoverContainer: [{ type: i0.ViewChild, args: ['popoverContainer', { read: i0.ElementRef, static: true },] }],
         width: [{ type: i0.HostBinding, args: ['style.width',] }],
         height: [{ type: i0.HostBinding, args: ['style.height',] }],
@@ -2743,7 +2773,7 @@
             return popoverRef;
         };
         DrPopoverService.prototype.attachOverlayContainer = function (content, _a, overlayRef, popoverRef) {
-            var contentContext = _a.contentContext, position = _a.position, elementClass = _a.class, manualClosing = _a.manualClosing, hostRef = _a.hostRef, alignment = _a.alignment;
+            var contentContext = _a.contentContext, position = _a.position, elementClass = _a.class, manualClosing = _a.manualClosing, hostRef = _a.hostRef, alignment = _a.alignment, freezeToContainerSelector = _a.freezeToContainerSelector;
             var componentPortal = new portal.ComponentPortal(DrPopoverComponent, null, this.createInjector(popoverRef));
             var contentRef = overlayRef.attach(componentPortal);
             popoverRef.componentRef = contentRef;
@@ -2754,6 +2784,7 @@
             contentRef.instance.hostRef = hostRef;
             contentRef.instance.alignment = alignment;
             contentRef.instance.position = position;
+            contentRef.instance.freezeToContainerSelector = freezeToContainerSelector;
         };
         DrPopoverService.prototype.createOverlay = function (popoverModel) {
             var overlayConfig = this.getOverlayConfig(popoverModel);
@@ -2837,6 +2868,7 @@
             this.manualClosing = { enabled: false };
             // eslint-disable-next-line
             this.popoverClose = new i0.EventEmitter();
+            this.popoverOpened = new i0.EventEmitter();
             // eslint-disable-next-line
             this.showStateChange = new i0.EventEmitter();
         }
@@ -2867,12 +2899,16 @@
                 position: this.position,
                 contentContext: this.contentContext,
                 alignment: this.alignment,
+                freezeToContainerSelector: this.freezeToContainerSelector
             });
             popoverRef.onClose.pipe(operators.first()).subscribe(function (res) {
                 _this.closePopover();
                 _this.popoverClose.emit(res);
                 _this.showStateChange.emit({ isShown: !!_this.popoverRef });
             });
+            popoverRef.componentRef.instance.popoverOpened.pipe(operators.first()).subscribe(function () {
+                _this.popoverOpened.emit();
+            });
         };
         DrPopoverDirective.prototype.ngOnDestroy = function () {
             this.closePopover();
@@ -2897,7 +2933,9 @@
         manualClosing: [{ type: i0.Input, args: ['drPopoverManualClosing',] }],
         alignment: [{ type: i0.Input, args: ['drPopoverAlignment',] }],
         disabled: [{ type: i0.Input, args: ['drPopoverDisabled',] }],
+        freezeToContainerSelector: [{ type: i0.Input, args: ['drPopoverFreezeToContainerSelector',] }],
         popoverClose: [{ type: i0.Output, args: ['drPopoverClose',] }],
+        popoverOpened: [{ type: i0.Output, args: ['drPopoverOpened',] }],
         showStateChange: [{ type: i0.Output, args: ['drPopoverShowStateChange',] }],
         togglePopover: [{ type: i0.HostListener, args: ['click',] }]
     };