@energycap/components 0.31.3 → 0.31.4-ECAP-12451-Readonly-Pageview.20220916-0845

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 }
     ]; };
@@ -8412,6 +8412,10 @@
              * Set to true when page-view is inside a dialog to adjust styles and hide breadcrumbs.
              */
             this.isDialog = false;
+            /**
+             * Set to true to enable read only mode. Only a single secondary action will be available
+             */
+            this.readonly = false;
             /**
              * Controls Overlay that masks the page view content. Only the header is not masked when the overlay is visible. Default is pending Overlay with no message
              */
@@ -8460,7 +8464,7 @@
     PageViewComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'ec-page-view',
-                    template: "<div ecOverlay\r\n    [status]=\"status?.status\"\r\n    [message]=\"status?.message\"\r\n    [displayAsMask]=\"true\"\r\n    class=\"bg-body flex-grow d-flex\">\r\n    <div id=\"PageViewScrollContainer\" \r\n            class=\"d-flex flex-column flex-grow scroll-y\" \r\n            [class.is-dialog]=\"isDialog\"\r\n            [class.fit-content]=\"fitContent\"\r\n            [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\r\n            [class.overlay-visible]=\"status?.status !== 'hasData'\"\r\n            [class.footer-visible]=\"!!footerTemplate\">\r\n        <section>\r\n            <ng-content></ng-content>    \r\n        </section>\r\n        \r\n        <footer *ngIf=\"footerTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        </footer>\r\n\r\n        <header *ngIf=\"showHeader\">\r\n        \r\n            <ol id=\"breadcrumbs\"\r\n                *ngIf=\"breadcrumbs?.length && !isDialog\">\r\n                <li *ngFor=\"let crumb of breadcrumbs; last as isLast\">\r\n                    <a *ngIf=\"crumb.url; else label\"\r\n                        [routerLink]=\"crumb.url\">\r\n                        <ng-container *ngTemplateOutlet=\"label\"></ng-container>\r\n                    </a>\r\n                    <ng-template #label>{{crumb.label}}</ng-template>\r\n                </li>\r\n            </ol>\r\n        \r\n            <div *ngIf=\"!customHeaderTemplate; else customHeaderOutlet\" class=\"titlebar\">\r\n                <app-page-title *ngIf=\"!customTitleTemplate; else customTitle\" \r\n                                [title]=\"title\"\r\n                                [subTitle]=\"subTitle\"\r\n                                [subTitleUrl]=\"subTitleUrl\"\r\n                                [titleIcon]=\"titleIcon\"\r\n                                class=\"title text-truncate\">\r\n                </app-page-title>\r\n            \r\n                <ng-template #customTitle>\r\n                    <div class=\"title\">\r\n                        <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\r\n                    </div>\r\n                </ng-template>\r\n            \r\n                <div class=\"actions\">\r\n                    <ec-button id=\"primaryAction\"\r\n                                class=\"ml-2\"\r\n                                *ngIf=\"!hidePrimaryAction && onPrimaryAction.observers?.length\"\r\n                                [disabled]=\"status?.status === 'pending'\"\r\n                                type=\"primary\"\r\n                                [label]=\"primaryActionLabel\"\r\n                                (clicked)=\"primaryAction($event)\">\r\n                    </ec-button>\r\n                    <ec-button id=\"secondaryAction\"\r\n                                class=\"ml-2\"\r\n                                *ngIf=\"!hideSecondaryAction && onSecondaryAction.observers?.length\"\r\n                                type=\"secondary\"\r\n                                [label]=\"secondaryActionLabel\"\r\n                                (clicked)=\"secondaryAction($event)\">\r\n                    </ec-button>\r\n                    <ec-dropdown id=\"moreActions\"\r\n                                    *ngIf=\"moreActions?.length\"\r\n                                    [disabled]=\"status?.status === 'pending'\"\r\n                                    class=\"ml-2\"\r\n                                    buttonType=\"secondary\"\r\n                                    [label]=\"moreActionsLabel\"\r\n                                    [items]=\"moreActions\">\r\n                    </ec-dropdown>\r\n                    <ng-container *ngTemplateOutlet=\"customActionsTemplate\"></ng-container>\r\n                </div>\r\n            </div>\r\n        \r\n            <ng-template #customHeaderOutlet>   \r\n                <div class=\"page-header\">\r\n                    <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\r\n                </div>\r\n            </ng-template>\r\n        \r\n            <ec-banner *ngIf=\"errors\"\r\n                   id=\"pageViewErrors\"\r\n                   [class.border-bottom-0]=\"!isDialog\">\r\n                <div [innerHtml]=\"errors\"></div>\r\n            </ec-banner>\r\n        </header>\r\n    </div>\r\n</div>\r\n\r\n",
+                    template: "<div ecOverlay\r\n    [status]=\"status?.status\"\r\n    [message]=\"status?.message\"\r\n    [displayAsMask]=\"true\"\r\n    class=\"bg-body flex-grow d-flex\">\r\n    <div id=\"PageViewScrollContainer\" \r\n            class=\"d-flex flex-column flex-grow scroll-y\" \r\n            [class.is-dialog]=\"isDialog\"\r\n            [class.fit-content]=\"fitContent\"\r\n            [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\r\n            [class.overlay-visible]=\"status?.status !== 'hasData'\"\r\n            [class.footer-visible]=\"!!footerTemplate\">\r\n        <section>\r\n            <ng-content></ng-content>    \r\n        </section>\r\n        \r\n        <footer *ngIf=\"footerTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        </footer>\r\n\r\n        <header *ngIf=\"showHeader\">\r\n        \r\n            <ol id=\"breadcrumbs\"\r\n                *ngIf=\"breadcrumbs?.length && !isDialog\">\r\n                <li *ngFor=\"let crumb of breadcrumbs; last as isLast\">\r\n                    <a *ngIf=\"crumb.url; else label\"\r\n                        [routerLink]=\"crumb.url\">\r\n                        <ng-container *ngTemplateOutlet=\"label\"></ng-container>\r\n                    </a>\r\n                    <ng-template #label>{{crumb.label}}</ng-template>\r\n                </li>\r\n            </ol>\r\n        \r\n            <div *ngIf=\"!customHeaderTemplate; else customHeaderOutlet\" class=\"titlebar\">\r\n                <app-page-title *ngIf=\"!customTitleTemplate; else customTitle\" \r\n                                [title]=\"title\"\r\n                                [subTitle]=\"subTitle\"\r\n                                [subTitleUrl]=\"subTitleUrl\"\r\n                                [titleIcon]=\"titleIcon\"\r\n                                class=\"title text-truncate\">\r\n                </app-page-title>\r\n            \r\n                <ng-template #customTitle>\r\n                    <div class=\"title\">\r\n                        <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\r\n                    </div>\r\n                </ng-template>\r\n            \r\n                <div class=\"actions\">\r\n                    <ec-button id=\"primaryAction\"\r\n                                class=\"ml-2\"\r\n                                *ngIf=\"!hidePrimaryAction && onPrimaryAction.observers?.length && !readonly\"\r\n                                [disabled]=\"status?.status === 'pending'\"\r\n                                type=\"primary\"\r\n                                [label]=\"primaryActionLabel\"\r\n                                (clicked)=\"primaryAction($event)\">\r\n                    </ec-button>\r\n                    <ec-button id=\"secondaryAction\"\r\n                                class=\"ml-2\"\r\n                                *ngIf=\"!hideSecondaryAction && onSecondaryAction.observers?.length\"\r\n                                type=\"secondary\"\r\n                                [label]=\"readonly ? 'Close' : secondaryActionLabel\"\r\n                                (clicked)=\"secondaryAction($event)\">\r\n                    </ec-button>\r\n                    <ec-dropdown id=\"moreActions\"\r\n                                    *ngIf=\"moreActions?.length && !readonly\"\r\n                                    [disabled]=\"status?.status === 'pending'\"\r\n                                    class=\"ml-2\"\r\n                                    buttonType=\"secondary\"\r\n                                    [label]=\"moreActionsLabel\"\r\n                                    [items]=\"moreActions\">\r\n                    </ec-dropdown>\r\n                    <ng-container *ngTemplateOutlet=\"customActionsTemplate\"></ng-container>\r\n                </div>\r\n            </div>\r\n        \r\n            <ng-template #customHeaderOutlet>   \r\n                <div class=\"page-header\">\r\n                    <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\r\n                </div>\r\n            </ng-template>\r\n        \r\n            <ec-banner *ngIf=\"errors\"\r\n                   id=\"pageViewErrors\"\r\n                   [class.border-bottom-0]=\"!isDialog\">\r\n                <div [innerHtml]=\"errors\"></div>\r\n            </ec-banner>\r\n        </header>\r\n    </div>\r\n</div>\r\n\r\n",
                     host: {
                         class: "flex-grow"
                     },
@@ -8470,6 +8474,7 @@
     PageViewComponent.ctorParameters = function () { return []; };
     PageViewComponent.propDecorators = {
         isDialog: [{ type: i0.Input }],
+        readonly: [{ type: i0.Input }],
         status: [{ type: i0.Input }],
         showHeader: [{ type: i0.Input }],
         errors: [{ type: i0.Input }],
@@ -9119,6 +9124,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 +9232,8 @@
                         FormControlLabelComponent,
                         ItemPickerComponent,
                         HelpPopoverComponent,
-                        LinkButtonComponent
+                        LinkButtonComponent,
+                        TooltipComponent
                     ],
                     imports: [
                         common.CommonModule,
@@ -9212,7 +9242,7 @@
                         i1$1.RouterModule,
                         i1.TranslateModule,
                         a11y.A11yModule,
-                        overlay.OverlayModule
+                        i1$2.OverlayModule
                     ],
                     providers: [
                         FormGroupHelper,
@@ -9282,7 +9312,8 @@
                         FormControlLabelComponent,
                         ItemPickerComponent,
                         HelpPopoverComponent,
-                        LinkButtonComponent
+                        LinkButtonComponent,
+                        TooltipComponent
                     ]
                 },] }
     ];
@@ -9397,6 +9428,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 +10603,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;