@energycap/components 0.31.3 → 0.31.4

package/bundles/energycap-components.umd.js

@@ -2,7 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/a11y'), require('@angular/cdk/overlay'), require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/router'), require('@ngx-translate/core'), require('ngx-clipboard'), require('rxjs'), require('rxjs/operators'), require('moment'), require('popper.js'), require('lodash'), require('@angular/cdk/portal')) :
     typeof define === 'function' && define.amd ? define('@energycap/components', ['exports', '@angular/cdk/a11y', '@angular/cdk/overlay', '@angular/common', '@angular/core', '@angular/forms', '@angular/router', '@ngx-translate/core', 'ngx-clipboard', 'rxjs', 'rxjs/operators', 'moment', 'popper.js', 'lodash', '@angular/cdk/portal'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.energycap = global.energycap || {}, global.energycap.components = {}), global.ng.cdk.a11y, global.ng.cdk.overlay, global.ng.common, global.ng.core, global.ng.forms, global.ng.router, global.i1, global.ngxClipboard, global.rxjs, global.rxjs.operators, global.moment, global.Popper, global.lodash, global.ng.cdk.portal));
-}(this, (function (exports, a11y, overlay, common, i0, forms, i1$1, i1, ngxClipboard, rxjs, operators, moment, Popper, lodash, portal) { 'use strict';
+}(this, (function (exports, a11y, i1$2, common, i0, forms, i1$1, i1, ngxClipboard, rxjs, operators, moment, Popper, lodash, portal) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -4578,7 +4578,7 @@
             var positionStrategy = this.overlay.position()
                 .flexibleConnectedTo(this.elementRef)
                 .withPositions([position]);
-            var config = new overlay.OverlayConfig({
+            var config = new i1$2.OverlayConfig({
                 positionStrategy: positionStrategy
             });
             return config;
@@ -4599,7 +4599,7 @@
                 },] }
     ];
     PopoverComponent.ctorParameters = function () { return [
-        { type: overlay.Overlay },
+        { type: i1$2.Overlay },
         { type: i0.ViewContainerRef },
         { type: i0.ElementRef }
     ]; };
@@ -9119,6 +9119,30 @@
                 },] }
     ];
 
+    var TooltipComponent = /** @class */ (function () {
+        function TooltipComponent() {
+            this.position = 'top-center';
+            this.dismissible = false;
+            this.onHide = new i0.EventEmitter();
+        }
+        TooltipComponent.prototype.hide = function () {
+            var _a;
+            this.onHide.next();
+            (_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.dispose();
+        };
+        return TooltipComponent;
+    }());
+    TooltipComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'ec-tooltip',
+                    template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\">\r\n  <header *ngIf=\"title || subtitle\" class=\"mb-3\">\r\n    <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\r\n    <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\r\n  </header>\r\n  \r\n  <ng-container *ngIf=\"customContent; else textTemplate\">\r\n    <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #textTemplate>\r\n    <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\r\n  </ng-template>\r\n  \r\n  <ec-button *ngIf=\"dismissible\" id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" (clicked)=\"hide()\" style=\"--ec-button-color-icon: var(--ec-color-secondary-light);\"></ec-button>\r\n</article>",
+                    styles: [":root{--ec-color-icon:rgba(26,26,35,0.66);--ec-font-size-icon:1rem}@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color,#162f3b);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);color:var(--ec-tooltip-color,var(--ec-color-primary-light));position:relative}article:after{border:.625rem solid transparent;content:\"\";display:block;height:0;position:absolute;width:0}article.position-top-center:after,article.position-top-left:after,article.position-top-right:after{border-top-color:var(--ec-tooltip-background-color,#162f3b);bottom:-1.25rem}article.position-bottom-center:after,article.position-bottom-left:after,article.position-bottom-right:after{border-bottom-color:var(--ec-tooltip-background-color,#162f3b);top:-1.25rem}article.position-bottom-left:after,article.position-top-left:after{right:1rem}article.position-bottom-right:after,article.position-top-right:after{left:1rem}article.position-bottom-center:after,article.position-top-center:after{right:50%;transform:translateX(50%)}article.position-right-bottom:after,article.position-right-center:after,article.position-right-top:after{border-right-color:var(--ec-tooltip-background-color,#162f3b);left:-1.25rem}article.position-left-bottom:after,article.position-left-center:after,article.position-left-top:after{border-left-color:var(--ec-tooltip-background-color,#162f3b);right:-1.25rem}article.position-left-top:after,article.position-right-top:after{top:1rem}article.position-left-bottom:after,article.position-right-bottom:after{bottom:1rem}article.position-left-center:after,article.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-body-1,.text-heading-2{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{color:#82c0d3;font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{position:absolute;right:.25rem;top:.25rem}"]
+                },] }
+    ];
+    TooltipComponent.propDecorators = {
+        backgroundColor: [{ type: i0.HostBinding, args: ['style.--ec-tooltip-background-color',] }]
+    };
+
     var ComponentsModule = /** @class */ (function () {
         function ComponentsModule() {
         }
@@ -9203,7 +9227,8 @@
                         FormControlLabelComponent,
                         ItemPickerComponent,
                         HelpPopoverComponent,
-                        LinkButtonComponent
+                        LinkButtonComponent,
+                        TooltipComponent
                     ],
                     imports: [
                         common.CommonModule,
@@ -9212,7 +9237,7 @@
                         i1$1.RouterModule,
                         i1.TranslateModule,
                         a11y.A11yModule,
-                        overlay.OverlayModule
+                        i1$2.OverlayModule
                     ],
                     providers: [
                         FormGroupHelper,
@@ -9282,7 +9307,8 @@
                         FormControlLabelComponent,
                         ItemPickerComponent,
                         HelpPopoverComponent,
-                        LinkButtonComponent
+                        LinkButtonComponent,
+                        TooltipComponent
                     ]
                 },] }
     ];
@@ -9397,6 +9423,66 @@
         return (control.value && domainPattern.test(control.value) === false) ? { domain: true } : null;
     };
 
+    var TooltipService = /** @class */ (function () {
+        function TooltipService(overlay) {
+            this.overlay = overlay;
+            this.positions = {
+                'top-left': { originX: 'center', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetX: 38 },
+                'top-center': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' },
+                'top-right': { originX: 'center', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetX: -38 },
+                'bottom-left': { originX: 'center', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetX: 38 },
+                'bottom-center': { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' },
+                'bottom-right': { originX: 'center', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetX: -38 },
+                'left-top': { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'top', offsetY: -38 },
+                'left-center': { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' },
+                'left-bottom': { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'bottom', offsetY: 38 },
+                'right-top': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'top', offsetY: -38 },
+                'right-center': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' },
+                'right-bottom': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'bottom', offsetY: 38 }
+            };
+        }
+        /**
+         * Show a tooltip attached to a specified element
+         */
+        TooltipService.prototype.show = function (anchor, position, options) {
+            if (position === void 0) { position = 'top-center'; }
+            var overlayConfig = this.getOverlayConfig(anchor, this.positions[position], options === null || options === void 0 ? void 0 : options.width);
+            var overlayRef = this.overlay.create(overlayConfig);
+            var contentPortal = new portal.ComponentPortal(TooltipComponent);
+            var contentViewRef = overlayRef.attach(contentPortal);
+            contentViewRef.instance.position = position;
+            contentViewRef.instance.id = options === null || options === void 0 ? void 0 : options.id;
+            contentViewRef.instance.title = options === null || options === void 0 ? void 0 : options.title;
+            contentViewRef.instance.subtitle = options === null || options === void 0 ? void 0 : options.subtitle;
+            contentViewRef.instance.text = options === null || options === void 0 ? void 0 : options.text;
+            contentViewRef.instance.customContent = options === null || options === void 0 ? void 0 : options.customContent;
+            contentViewRef.instance.dismissible = (options === null || options === void 0 ? void 0 : options.dismissible) || false;
+            contentViewRef.instance.backgroundColor = options === null || options === void 0 ? void 0 : options.backgroundColor;
+            contentViewRef.instance.overlayRef = overlayRef;
+            return contentViewRef.instance;
+        };
+        TooltipService.prototype.getOverlayConfig = function (element, position, width) {
+            var positionStrategy = this.overlay.position()
+                .flexibleConnectedTo(element)
+                .withPositions([position]);
+            var config = new i1$2.OverlayConfig({
+                positionStrategy: positionStrategy,
+                width: width
+            });
+            return config;
+        };
+        return TooltipService;
+    }());
+    TooltipService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TooltipService_Factory() { return new TooltipService(i0.ɵɵinject(i1$2.Overlay)); }, token: TooltipService, providedIn: "root" });
+    TooltipService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    TooltipService.ctorParameters = function () { return [
+        { type: i1$2.Overlay }
+    ]; };
+
     (function (PageStatus) {
         PageStatus["Loading"] = "loading";
         PageStatus["Loaded"] = "loaded";
@@ -10512,6 +10598,8 @@
     exports.ToastEvent = ToastEvent;
     exports.ToastService = ToastService;
     exports.ToasterComponent = ToasterComponent;
+    exports.TooltipComponent = TooltipComponent;
+    exports.TooltipService = TooltipService;
     exports.TreeComponent = TreeComponent;
     exports.UnicodeStrings = UnicodeStrings;
     exports.UserPreferenceService = UserPreferenceService;