@energycap/components 0.26.8 → 0.26.9

package/bundles/energycap-components.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/router'), require('@ngx-translate/core'), require('@angular/cdk/a11y'), require('rxjs'), require('rxjs/operators'), require('lodash'), require('moment'), require('popper.js'), require('ngx-clipboard')) :
-    typeof define === 'function' && define.amd ? define('@energycap/components', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/router', '@ngx-translate/core', '@angular/cdk/a11y', 'rxjs', 'rxjs/operators', 'lodash', 'moment', 'popper.js', 'ngx-clipboard'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.energycap = global.energycap || {}, global.energycap.components = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.router, global.i1, global.ng.cdk.a11y, global.rxjs, global.rxjs.operators, global.lodash, global.moment, global.Popper, global.ngxClipboard));
-}(this, (function (exports, common, i0, forms, i1$1, i1, a11y, rxjs, operators, lodash, moment, Popper, ngxClipboard) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/router'), require('@ngx-translate/core'), require('@angular/cdk/a11y'), require('@angular/cdk/overlay'), require('rxjs'), require('rxjs/operators'), require('lodash'), require('moment'), require('popper.js'), require('@angular/cdk/portal'), require('ngx-clipboard')) :
+    typeof define === 'function' && define.amd ? define('@energycap/components', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/router', '@ngx-translate/core', '@angular/cdk/a11y', '@angular/cdk/overlay', 'rxjs', 'rxjs/operators', 'lodash', 'moment', 'popper.js', '@angular/cdk/portal', 'ngx-clipboard'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.energycap = global.energycap || {}, global.energycap.components = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.router, global.i1, global.ng.cdk.a11y, global.ng.cdk.overlay, global.rxjs, global.rxjs.operators, global.lodash, global.moment, global.Popper, global.ng.cdk.portal, global.ngxClipboard));
+}(this, (function (exports, common, i0, forms, i1$1, i1, a11y, overlay, rxjs, operators, lodash, moment, Popper, portal, ngxClipboard) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -6389,22 +6389,86 @@
     };
 
     var PopoverComponent = /** @class */ (function () {
-        function PopoverComponent() {
+        function PopoverComponent(overlay, viewContainerRef, elementRef) {
+            this.overlay = overlay;
+            this.viewContainerRef = viewContainerRef;
+            this.elementRef = elementRef;
             this.icon = '';
             this.contentPosition = 'top-left';
+            this.iconHoverClass = '';
+            this.isVisible = false;
         }
+        PopoverComponent.prototype.ngOnDestroy = function () {
+            this.hide();
+        };
+        PopoverComponent.prototype.show = function () {
+            if (!this.isVisible) {
+                var overlayConfig = this.getOverlayConfig();
+                this.overlayRef = this.overlay.create(overlayConfig);
+                var contentPortal = new portal.TemplatePortal(this.content, this.viewContainerRef);
+                this.contentViewRef = this.overlayRef.attach(contentPortal);
+                this.isVisible = true;
+            }
+        };
+        /**
+         * Hides the popover if the mouse moves outside of the popover content
+         */
+        PopoverComponent.prototype.onMouseMove = function (event) {
+            var _a;
+            if (!this.contentRect) {
+                this.contentRect = (_a = this.contentViewRef) === null || _a === void 0 ? void 0 : _a.rootNodes[0].getBoundingClientRect();
+            }
+            if (this.contentRect) {
+                if (event.clientX > this.contentRect.right
+                    || event.clientX < this.contentRect.left
+                    || event.clientY > this.contentRect.bottom
+                    || event.clientY < this.contentRect.top) {
+                    this.hide();
+                }
+            }
+        };
+        PopoverComponent.prototype.hide = function () {
+            var _a;
+            this.contentRect = undefined;
+            (_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.dispose();
+            this.isVisible = false;
+        };
+        PopoverComponent.prototype.getOverlayConfig = function () {
+            var position = this.getPosition();
+            var positionStrategy = this.overlay.position()
+                .flexibleConnectedTo(this.elementRef)
+                .withPositions([position]);
+            var config = new overlay.OverlayConfig({
+                positionStrategy: positionStrategy
+            });
+            return config;
+        };
+        PopoverComponent.prototype.getPosition = function () {
+            var position = this.contentPosition.split('-');
+            var overlayX = (position[1] == 'left' ? 'start' : 'end');
+            var overlayY = position[0];
+            return { originX: overlayX, originY: overlayY, overlayX: overlayX, overlayY: overlayY };
+        };
         return PopoverComponent;
     }());
     PopoverComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'ec-popover',
-                    template: "<article class=\"popover-content {{contentPosition}}\">\r\n    <ng-content></ng-content>\r\n</article>\r\n<i class=\"ec-icon {{icon}} ec-icon-sm\"></i>\r\n",
-                    styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{line-height:1;padding:.5rem;position:relative;z-index:1}:host:hover{z-index:2}:host:hover .popover-content{display:block}.popover-content{border-radius:3px;box-shadow:0 3px 6px 0 rgba(26,26,35,.12);display:none;overflow:hidden;position:absolute}.popover-content.top-left{left:0;top:0}.popover-content.top-right{right:0;top:0}.popover-content.bottom-right{bottom:0;right:0}.popover-content.bottom-left{bottom:0;left:0}.ec-icon{position:relative}"]
+                    template: "<div class=\"p-2\">\r\n  <i class=\"ec-icon {{icon}} ec-icon-sm\"></i>\r\n</div>\r\n\r\n<ng-template #content>\r\n  <article class=\"popover-content\"\r\n           (document:mousemove)=\"onMouseMove($event)\">\r\n    <ng-content></ng-content>\r\n  </article>\r\n  <div class=\"p-2 {{contentPosition}}\">\r\n    <i class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\"></i>\r\n  </div>\r\n</ng-template>\r\n",
+                    styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:inline-block;line-height:1}.popover-content{border-radius:3px;box-shadow:0 3px 6px 0 rgba(26,26,35,.12);overflow:hidden;position:relative}.popover-content+div{line-height:1;position:absolute}.popover-content+div.top-left{left:0;top:0}.popover-content+div.top-right{right:0;top:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}"]
                 },] }
     ];
+    PopoverComponent.ctorParameters = function () { return [
+        { type: overlay.Overlay },
+        { type: i0.ViewContainerRef },
+        { type: i0.ElementRef }
+    ]; };
     PopoverComponent.propDecorators = {
         icon: [{ type: i0.Input }],
-        contentPosition: [{ type: i0.Input }]
+        contentPosition: [{ type: i0.Input }],
+        iconHoverClass: [{ type: i0.Input }],
+        content: [{ type: i0.ViewChild, args: ['content',] }],
+        show: [{ type: i0.HostListener, args: ['mouseover',] }]
     };
 
     var CopyButtonDirective = /** @class */ (function () {
@@ -8024,7 +8088,8 @@
                         forms.ReactiveFormsModule,
                         i1$1.RouterModule,
                         i1.TranslateModule,
-                        a11y.A11yModule
+                        a11y.A11yModule,
+                        overlay.OverlayModule
                     ],
                     providers: [
                         FormGroupHelper,