@energycap/components 0.26.8 → 0.26.9-ECAPID-284-App-Bar-Error.20211220-1043

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 }; }
 
@@ -5390,10 +5390,74 @@
         textboxInput: [{ type: i0.ViewChild, args: ['textbox', { static: true },] }]
     };
 
+    var AvatarService = /** @class */ (function () {
+        function AvatarService() {
+        }
+        /**
+         * Return the full and abbreviated labels based on the users first name, email, or username. If the user has a first or last name use
+         * either a combination of the first and last name, or the first two characters of the name that is defined. If the user does
+         * not have a first or last name, trying using the first two characters of the email, or the first two characters of the
+         * username as a last ditch effort.
+         * @param user
+         * @returns
+         */
+        AvatarService.prototype.getAvatarLabels = function (user) {
+            var full = undefined;
+            var abbreviation = 'HI';
+            var trimmedUser = this.trimUser(user);
+            if (trimmedUser.firstName || trimmedUser.lastName) {
+                if (trimmedUser.firstName) {
+                    abbreviation = trimmedUser.firstName.slice(0, 1);
+                    full = trimmedUser.firstName;
+                    if (trimmedUser.lastName) {
+                        full += " " + trimmedUser.lastName;
+                    }
+                }
+                else {
+                    abbreviation = trimmedUser.lastName.slice(0, 1);
+                    full = trimmedUser.lastName;
+                }
+            }
+            else if (trimmedUser.email) {
+                abbreviation = trimmedUser.email.slice(0, 1);
+                full = trimmedUser.email;
+            }
+            else if (trimmedUser.username) {
+                abbreviation = trimmedUser.username.slice(0, 1);
+                full = trimmedUser.username;
+            }
+            return {
+                abbreviation: abbreviation,
+                full: full
+            };
+        };
+        /**
+         * Return a new user object that has all of the properties of the existing user
+         * with any null, undefined, or whitespace values removed
+         */
+        AvatarService.prototype.trimUser = function (user) {
+            var trimmedUser = {
+                email: (user.email || '').trim(),
+                firstName: (user.firstName || '').trim(),
+                lastName: (user.lastName || '').trim(),
+                username: (user.username || '').trim()
+            };
+            return trimmedUser;
+        };
+        return AvatarService;
+    }());
+    AvatarService.ɵprov = i0.ɵɵdefineInjectable({ factory: function AvatarService_Factory() { return new AvatarService(); }, token: AvatarService, providedIn: "root" });
+    AvatarService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+
     var AvatarComponent = /** @class */ (function () {
-        function AvatarComponent(el, renderer) {
+        function AvatarComponent(el, renderer, avatarService) {
             this.el = el;
             this.renderer = renderer;
+            this.avatarService = avatarService;
             /** Color map base on the first let of the label */
             this.colors = {
                 abcde01: 'red',
@@ -5416,49 +5480,14 @@
             this.updateColor();
         };
         /**
-         * Update the Avatar label based on the users first name, email, or username. If the user has a first or last name use
-         * either a combination of the first and last name, or the first two characters of the name that is defined. If the user does
-         * not have a first or last name, trying using the first two characters of the email, or the first two characters of the
-         * username as a last ditch effort.
+         * Update the Avatar label
+         *
          */
         AvatarComponent.prototype.updateLabel = function () {
             if (this.user) {
-                var trimmedUser = this.trimUser(this.user);
-                if (trimmedUser.firstName || trimmedUser.lastName) {
-                    if (trimmedUser.firstName) {
-                        this.label = trimmedUser.firstName.slice(0, 1);
-                        this.user.userMenuTitle = trimmedUser.firstName;
-                        if (trimmedUser.lastName) {
-                            this.user.userMenuTitle += " " + trimmedUser.lastName;
-                        }
-                    }
-                    else {
-                        this.label = trimmedUser.lastName.slice(0, 1);
-                        this.user.userMenuTitle = trimmedUser.lastName;
-                    }
-                }
-                else if (trimmedUser.email) {
-                    this.label = trimmedUser.email.slice(0, 1);
-                    this.user.userMenuTitle = trimmedUser.email;
-                }
-                else if (trimmedUser.username) {
-                    this.label = trimmedUser.username.slice(0, 1);
-                    this.user.userMenuTitle = trimmedUser.username;
-                }
+                this.label = this.avatarService.getAvatarLabels(this.user).abbreviation;
             }
         };
-        /** Return a new user object that has all of the properties of the existing user
-         * with any null, undefined, or whitespace values removed
-         */
-        AvatarComponent.prototype.trimUser = function (user) {
-            var trimmedUser = {
-                email: (user.email || '').trim(),
-                firstName: (user.firstName || '').trim(),
-                lastName: (user.lastName || '').trim(),
-                username: (user.username || '').trim()
-            };
-            return trimmedUser;
-        };
         /**
          * Sets the color of the Avatar based on the first letter of the label. If the label is HI or is not
          * a letter, default to gray.
@@ -5489,14 +5518,16 @@
     ];
     AvatarComponent.ctorParameters = function () { return [
         { type: i0.ElementRef },
-        { type: i0.Renderer2 }
+        { type: i0.Renderer2 },
+        { type: AvatarService }
     ]; };
     AvatarComponent.propDecorators = {
         user: [{ type: i0.Input }]
     };
 
     var AppBarComponent = /** @class */ (function () {
-        function AppBarComponent() {
+        function AppBarComponent(avatarService) {
+            this.avatarService = avatarService;
             this.user = {};
             this.userMenuItems = [];
             this.userMenuWidth = 0;
@@ -5504,15 +5535,23 @@
             this.userMenuTabindex = 0;
             this.iconPath = '/assets/images/icon.svg';
         }
+        AppBarComponent.prototype.ngOnChanges = function () {
+            if (this.user) {
+                this.userMenuTitle = this.avatarService.getAvatarLabels(this.user).full;
+            }
+        };
         return AppBarComponent;
     }());
     AppBarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'ec-app-bar',
-                    template: "<section class=\"logo-container\">\r\n  <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\r\n</section>\r\n\r\n<section class=\"title-container\">\r\n  <ng-content select=\".app-bar-title\"></ng-content>\r\n</section>\r\n\r\n<section class=\"actions-container\">\r\n  <ng-content select=\".app-bar-actions\"></ng-content>\r\n  <ec-dropdown id=\"AppBarUserMenu\"\r\n               *ngIf=\"userMenuItems.length; else avatar\"\r\n               [menuTitle]=\"user?.userMenuTitle\"\r\n               [items]=\"userMenuItems\"\r\n               [buttonCustomTemplate]=\"avatar\"\r\n               [showArrow]=\"false\"\r\n               [menuWidth]=\"userMenuWidth\"\r\n               [menuMinWidth]=\"userMenuMinWidth\"\r\n               [tabindex]=\"userMenuTabindex\"></ec-dropdown>\r\n</section>\r\n\r\n<ng-template #avatar>\r\n  <div class=\"p-1\">\r\n    <ec-avatar [user]=\"user\"></ec-avatar>\r\n  </div>\r\n</ng-template>",
+                    template: "<section class=\"logo-container\">\r\n  <img src=\"{{iconPath}}\"\r\n       alt=\"EnergyCAP Platform\">\r\n</section>\r\n\r\n<section class=\"title-container\">\r\n  <ng-content select=\".app-bar-title\"></ng-content>\r\n</section>\r\n\r\n<section class=\"actions-container\">\r\n  <ng-content select=\".app-bar-actions\"></ng-content>\r\n  <ec-dropdown id=\"AppBarUserMenu\"\r\n               *ngIf=\"userMenuItems.length; else avatar\"\r\n               [menuTitle]=\"userMenuTitle\"\r\n               [items]=\"userMenuItems\"\r\n               [buttonCustomTemplate]=\"avatar\"\r\n               [showArrow]=\"false\"\r\n               [menuWidth]=\"userMenuWidth\"\r\n               [menuMinWidth]=\"userMenuMinWidth\"\r\n               [tabindex]=\"userMenuTabindex\"></ec-dropdown>\r\n</section>\r\n\r\n<ng-template #avatar>\r\n  <div class=\"p-1\">\r\n    <ec-avatar [user]=\"user\"></ec-avatar>\r\n  </div>\r\n</ng-template>",
                     styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{align-items:center;background-color:#fff;display:flex;height:3rem;padding:0 .75rem 0 1rem;position:relative;width:100%;z-index:40}:host ::ng-deep .app-bar-actions{align-items:center;display:flex;justify-content:flex-end;margin-right:.25rem}section{flex:1 1}.logo-container img{height:2rem;width:2rem}.title-container{text-align:center}.actions-container{display:flex;justify-content:flex-end}"]
                 },] }
     ];
+    AppBarComponent.ctorParameters = function () { return [
+        { type: AvatarService }
+    ]; };
     AppBarComponent.propDecorators = {
         user: [{ type: i0.Input }],
         userMenuItems: [{ type: i0.Input }],
@@ -6389,22 +6428,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 +8127,8 @@
                         forms.ReactiveFormsModule,
                         i1$1.RouterModule,
                         i1.TranslateModule,
-                        a11y.A11yModule
+                        a11y.A11yModule,
+                        overlay.OverlayModule
                     ],
                     providers: [
                         FormGroupHelper,
@@ -8800,8 +8904,9 @@
     exports.validateFormGroupValuesAreUnique = validateFormGroupValuesAreUnique;
     exports.ɵa = ResizableTableDirective;
     exports.ɵb = ResizableBase;
-    exports.ɵc = TableDetailRowComponent;
-    exports.ɵd = TelemetryService;
+    exports.ɵc = AvatarService;
+    exports.ɵd = TableDetailRowComponent;
+    exports.ɵe = TelemetryService;
 
     Object.defineProperty(exports, '__esModule', { value: true });