@colijnit/corecomponents_v12 12.1.4 → 12.1.5

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -5898,6 +5898,7 @@
             this.keepInView = false;
             this.inheritWidth = false;
             this.rightAlign = false;
+            this.fullSize = false;
             this.handleScroll = function (event) {
                 _this._checkAndPlaceElement();
             };
@@ -5956,11 +5957,18 @@
         OverlayDirective.prototype._checkAndPlaceElement = function () {
             if (this._elementRef && this._elementRef.nativeElement && this._parent && this._parent.nativeElement) {
                 var elementRect = this._elementRef.nativeElement.getBoundingClientRect();
-                var parentRect = this._parent.nativeElement.getBoundingClientRect();
+                var parentBoundingRect = this._parent.nativeElement.getBoundingClientRect();
+                var parentRect = {
+                    bottom: this._parent.nativeElement.offsetTop + parentBoundingRect.height,
+                    right: this._parent.nativeElement.offsetLeft + parentBoundingRect.width,
+                    left: this._parent.nativeElement.offsetLeft,
+                    top: this._parent.nativeElement.offsetTop
+                };
                 this._placeElement(window.innerHeight, window.innerWidth, parentRect, elementRect);
             }
         };
         OverlayDirective.prototype._placeElement = function (bottom, right, parentRect, elementRect) {
+            this._elementRef.nativeElement.style.position = "fixed";
             if (bottom < parentRect.bottom + elementRect.height) { // make sure it fits at the bottom
                 this._elementRef.nativeElement.style.top = (parentRect.top - elementRect.height) + "px";
                 this._elementRef.nativeElement.classList.add('top');
@@ -5975,18 +5983,23 @@
             if (this.rightAlign) {
                 this._elementRef.nativeElement.style.left = (parentRect.right - elementRect.width) + "px";
             }
+            else if (this.fullSize) {
+                this._elementRef.nativeElement.style.left = "0px";
+            }
             else {
                 this._elementRef.nativeElement.style.left = parentRect.left + "px";
             }
             if (this.keepInView) {
-                if (elementRect.right > window.innerWidth) {
+                var viewToKeepIn = this.view ? this.view : window;
+                var viewWidth = viewToKeepIn.innerWidth || viewToKeepIn.clientWidth;
+                if (elementRect.right > viewWidth) {
                     //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";
+                    if (((viewWidth - elementRect.width) > 0) && !this.fullSize) {
+                        this._elementRef.nativeElement.style.left = (viewWidth - elementRect.width) + "px";
                     }
                     else { //resize so it fits into view
-                        this._elementRef.nativeElement.style.width = window.innerWidth + "px";
-                        this._elementRef.nativeElement.style.left = 0;
+                        this._elementRef.nativeElement.style.width = viewWidth + "px";
+                        this._elementRef.nativeElement.style.left = viewToKeepIn.offsetLeft + "px";
                     }
                 }
             }
@@ -6003,9 +6016,11 @@
     ]; };
     OverlayDirective.propDecorators = {
         parent: [{ type: i0.Input, args: ["overlay",] }],
+        view: [{ type: i0.Input }],
         keepInView: [{ type: i0.Input }],
         inheritWidth: [{ type: i0.Input }],
-        rightAlign: [{ type: i0.Input }]
+        rightAlign: [{ type: i0.Input }],
+        fullSize: [{ type: i0.Input }]
     };
 
     var OverlayParentDirective = /** @class */ (function () {
@@ -11037,6 +11052,7 @@
             _this.multiselect = false;
             _this.displayField = 'description';
             _this.searchDisabled = false;
+            _this.closeAfterOptionChosen = true;
             _this.isSelectOpen = false;
             _this.state = 'default';
             _this.selectedModels = [];
@@ -11151,6 +11167,9 @@
                 }
                 else {
                     this.selectedModel = option[this.displayField];
+                    if (this.closeAfterOptionChosen) {
+                        this.toggleSelect();
+                    }
                 }
             }
             this.model = option;
@@ -11220,6 +11239,7 @@
         label: [{ type: i0.Input }],
         customCssClass: [{ type: i0.Input }],
         searchDisabled: [{ type: i0.Input }],
+        closeAfterOptionChosen: [{ type: i0.Input }],
         showClass: [{ type: i0.HostBinding, args: ['class.co-list-of-values',] }]
     };