@colijnit/corecomponents_v12 12.0.100 → 12.0.102

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -2027,21 +2027,34 @@
     ];
 
     var ImageComponent = /** @class */ (function () {
-        function ImageComponent() {
+        function ImageComponent(_sanitizer) {
+            this._sanitizer = _sanitizer;
+            this.showClass = true;
+            this.error = false;
+            this._defaultPlaceholder = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M35,18l-3-4H22l-3,4H16V36H40V18ZM24,16h6v2H24Zm2.5,18A6.5,6.5,0,1,1,33,27.5,6.51,6.51,0,0,1,26.5,34ZM38,22H36V20h2Z" fill="#484f60"/><rect x="10" y="18" width="5" height="18" fill="#484f60"/><rect x="11" y="15" width="3" height="2" fill="#484f60"/><path d="M26.5,32A4.5,4.5,0,1,1,31,27.5,4.51,4.51,0,0,1,26.5,32Z" fill="#484f60"/></svg>';
         }
+        ImageComponent.prototype.ngOnInit = function () {
+            this.innerPlaceHolder = this._sanitizer.bypassSecurityTrustHtml(this.placeHolder ? this.placeHolder : this._defaultPlaceholder);
+        };
+        ImageComponent.prototype.handleImageError = function (event) {
+            this.error = true;
+        };
         return ImageComponent;
     }());
     ImageComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-image",
-                    template: "\n        <img *ngIf=\"!!source\" [src]=\"source\">\n    ",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:inline-block}img{width:100%;height:100%;object-fit:contain}\n"]
+                    template: "\n        <ng-container *ngIf=\"!error\">\n            <img *ngIf=\"!!source\" [src]=\"source\" (error)=\"handleImageError($event)\">\n        </ng-container>\n        <ng-container *ngIf=\"error || !source\">\n            <div class=\"no-image-wrapper\">\n                <co-icon [iconData]=\"innerPlaceHolder\"></co-icon>\n                <span [textContent]=\"'geen afbeelding'\"></span>\n            </div>\n        </ng-container>\n    ",
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
-    ImageComponent.ctorParameters = function () { return []; };
+    ImageComponent.ctorParameters = function () { return [
+        { type: platformBrowser.DomSanitizer }
+    ]; };
     ImageComponent.propDecorators = {
-        source: [{ type: i0.Input }]
+        source: [{ type: i0.Input }],
+        placeHolder: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-image",] }]
     };
 
     var ImageModule = /** @class */ (function () {
@@ -2051,7 +2064,7 @@
     }());
     ImageModule.decorators = [
         { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule],
+                    imports: [common.CommonModule, IconModule],
                     declarations: [ImageComponent],
                     exports: [ImageComponent]
                 },] }
@@ -11449,6 +11462,7 @@
 
     var OverlayDirective = /** @class */ (function () {
         function OverlayDirective(elementRef) {
+            this.keepInView = false;
             this._elementRef = elementRef;
         }
         Object.defineProperty(OverlayDirective.prototype, "parent", {
@@ -11465,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);
@@ -11496,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 = [
@@ -11517,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 () {