@colijnit/corecomponents_v12 12.0.101 → 12.0.102

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -11462,6 +11462,7 @@
 
     var OverlayDirective = /** @class */ (function () {
         function OverlayDirective(elementRef) {
+            this.keepInView = false;
             this._elementRef = elementRef;
         }
         Object.defineProperty(OverlayDirective.prototype, "parent", {
@@ -11478,26 +11479,25 @@
             enumerable: false,
             configurable: true
         });
+        OverlayDirective.prototype.handleScroll = function (event) {
+            this._checkAndPlaceElement();
+        };
         OverlayDirective.prototype.ngOnDestroy = function () {
-            var _this = this;
-            window.removeEventListener("scroll", function (event) { return _this._handleScroll; });
+            // document.removeEventListener("scroll", (event) => this._handleScroll(event), false);
             this._observer.disconnect();
             this._elementRef = undefined;
             this._parent = undefined;
         };
         OverlayDirective.prototype.ngOnInit = function () {
             var _this = this;
-            window.addEventListener("scroll", function (event) { return _this._handleScroll; });
-            this._initiallyPlaceElement();
+            // document.addEventListener("scroll", (event) => this._handleScroll(event), false);
+            this._checkAndPlaceElement();
             this._observer = new ResizeObserver(function (entries) {
-                var entry = entries[0];
-                var elementRect = _this._elementRef.nativeElement.getBoundingClientRect();
-                var parentRect = _this._parent.nativeElement.getBoundingClientRect();
-                _this._placeElement(entry.contentRect.bottom, entry.contentRect.right, parentRect, elementRect);
+                _this._checkAndPlaceElement();
             });
             this._observer.observe(document.body);
         };
-        OverlayDirective.prototype._initiallyPlaceElement = function () {
+        OverlayDirective.prototype._checkAndPlaceElement = function () {
             var elementRect = this._elementRef.nativeElement.getBoundingClientRect();
             var parentRect = this._parent.nativeElement.getBoundingClientRect();
             this._placeElement(window.innerHeight, window.innerWidth, parentRect, elementRect);
@@ -11509,16 +11509,19 @@
             else {
                 this._elementRef.nativeElement.style.top = parentRect.bottom + "px";
             }
-            if (right < parentRect.left + elementRect.width) { // make sure it fits at the right
-                this._elementRef.nativeElement.style.left = (parentRect.right - elementRect.width) + "px";
-            }
-            else {
-                this._elementRef.nativeElement.style.left = parentRect.left + "px";
+            if (this.keepInView) {
+                if (elementRect.right > window.innerWidth) {
+                    //see if we can move it to the left
+                    if ((window.innerWidth - elementRect.width) > 0) {
+                        this._elementRef.nativeElement.style.left = (window.innerWidth - elementRect.width) + "px";
+                    }
+                    else { //resize so it fits into view
+                        this._elementRef.nativeElement.style.width = window.innerWidth + "px";
+                        this._elementRef.nativeElement.style.left = 0;
+                    }
+                }
             }
         };
-        OverlayDirective.prototype._handleScroll = function (event) {
-            console.log("scroll");
-        };
         return OverlayDirective;
     }());
     OverlayDirective.decorators = [
@@ -11530,7 +11533,9 @@
         { type: i0.ElementRef }
     ]; };
     OverlayDirective.propDecorators = {
-        parent: [{ type: i0.Input, args: ["overlay",] }]
+        parent: [{ type: i0.Input, args: ["overlay",] }],
+        keepInView: [{ type: i0.Input }],
+        handleScroll: [{ type: i0.HostListener, args: ["document:scroll", ["$event"],] }]
     };
 
     var OverlayParentDirective = /** @class */ (function () {