@energycap/components 0.27.2 → 0.27.3-ECAPID-377-Implement-Sidebar.20220121-0740

package/bundles/energycap-components.umd.js

@@ -5846,121 +5846,6 @@
         maxLength: [{ type: i0.Input }]
     };
 
-    /** Exposes the markup and styles that represent the spinner. No inputs or outputs defined because it is just a visual component*/
-    var SpinnerComponent = /** @class */ (function () {
-        function SpinnerComponent() {
-        }
-        return SpinnerComponent;
-    }());
-    SpinnerComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'ec-spinner',
-                    template: "<div class=\"spinner\">\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n</div>",
-                    styles: ["@-webkit-keyframes sk-bouncedelay{0%,80%,to{opacity:0}40%{opacity:1}}@keyframes sk-bouncedelay{0%,80%,to{opacity:0}40%{opacity:1}}.spinner{display:flex}.spinner-dot{-webkit-animation:sk-bouncedelay 1.7s ease-in-out infinite both;animation:sk-bouncedelay 1.7s ease-in-out infinite both;background-color:#0084a9;height:.75rem;margin-right:.25rem;width:.75rem}.spinner-dot:first-child{-webkit-animation-delay:-.6s;animation-delay:-.6s}.spinner-dot:nth-child(2){-webkit-animation-delay:-.4s;animation-delay:-.4s}.spinner-dot:nth-child(3){-webkit-animation-delay:-.2s;animation-delay:-.2s}:host(.spinner-small) .spinner-dot{-webkit-animation:sk-bouncedelay 1.7s ease-in-out infinite both;animation:sk-bouncedelay 1.7s ease-in-out infinite both;background-color:#0084a9;height:.5rem;margin-right:.1666666667rem;width:.5rem}:host(.spinner-small) .spinner-dot:first-child{-webkit-animation-delay:-.6s;animation-delay:-.6s}:host(.spinner-small) .spinner-dot:nth-child(2){-webkit-animation-delay:-.4s;animation-delay:-.4s}:host(.spinner-small) .spinner-dot:nth-child(3){-webkit-animation-delay:-.2s;animation-delay:-.2s}"]
-                },] }
-    ];
-
-    var SplashService = /** @class */ (function () {
-        function SplashService() {
-            /** Used to interact with the splash component
-             *  The splash component will subscribe to this and any components
-             *  that wish to bring the splash visible can use this to communicate
-             *  with the splash component.
-             */
-            this._splashVisibility = new rxjs.Subject();
-            this.splashVisibility = this._splashVisibility;
-        }
-        /**
-         * Shows the splash screen
-         */
-        SplashService.prototype.showSplash = function () {
-            this._splashVisibility.next(true);
-        };
-        /**
-         * Hides the splash screen
-         */
-        SplashService.prototype.hideSplash = function () {
-            this._splashVisibility.next(false);
-        };
-        return SplashService;
-    }());
-    SplashService.ɵprov = i0.ɵɵdefineInjectable({ factory: function SplashService_Factory() { return new SplashService(); }, token: SplashService, providedIn: "root" });
-    SplashService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    SplashService.ctorParameters = function () { return []; };
-
-    var SplashComponent = /** @class */ (function () {
-        function SplashComponent(splashService) {
-            this.splashService = splashService;
-            /** Sets the visibility of the splash display */
-            this.isVisible = true;
-            this.stopAnimation = false;
-            /** Emits when the service is destroyed */
-            this.destroyed = new rxjs.Subject();
-        }
-        SplashComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.splashService.splashVisibility.pipe(operators.takeUntil(this.destroyed), operators.tap(function (value) { return __awaiter(_this, void 0, void 0, function () {
-                var _this = this;
-                return __generator(this, function (_a) {
-                    if (value) {
-                        this.stopAnimation = false;
-                    }
-                    else {
-                        // Prevent animation from continuing after splash screen is hidden
-                        // but if we hide it then show while the timer is running, don't stop the animation after all
-                        rxjs.timer(1000).pipe(operators.takeUntil(this.splashService.splashVisibility)).subscribe(function () {
-                            _this.stopAnimation = true;
-                        });
-                    }
-                    return [2 /*return*/];
-                });
-            }); })).subscribe(function (showSplash) {
-                _this.isVisible = showSplash;
-            });
-        };
-        SplashComponent.prototype.ngOnDestroy = function () {
-            this.destroyed.next();
-            this.destroyed.unsubscribe();
-        };
-        return SplashComponent;
-    }());
-    SplashComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'ec-splash',
-                    template: "<div class=\"app-splash\"\r\n     [class.app-loaded]=\"!isVisible\">\r\n\r\n    <!-- This is the raw icon.svg file so we can animate it -->\r\n    <svg [class.d-none]=\"stopAnimation\" \r\n         xmlns=\"http://www.w3.org/2000/svg\"\r\n         width=\"50\"\r\n         height=\"50\"\r\n         viewBox=\"0 0 50 50\">\r\n        <g>\r\n            <g>\r\n                <path fill=\"#A0AD39\"\r\n                fill-rule=\"nonzero\"\r\n                d=\"M34.93,32.25 L34.93,37.25 L15.21,37.25 L15.21,32.25 L34.93,32.25 Z M28.45,22.48 L28.45,27.48 L15.21,27.48 L15.21,22.48 L28.45,22.48 Z M34.93,12.71 L34.93,17.71 L15.21,17.71 L15.21,12.71 L34.93,12.71 Z\" />\r\n                <path fill=\"#A0AD39\"\r\n                d=\"M24.99,5 C31.1,5 36.56,7.75 40.23,12.07 L44.33,9.16 C39.75,3.57 32.78,0 24.99,0 C17.2,0 10.23,3.57 5.65,9.16 L9.75,12.07 C13.42,7.75 18.88,5 24.99,5 Z\" />\r\n            </g>\r\n            <path fill=\"#17303B\"\r\n                  d=\"M40.24,37.93 C36.57,42.25 31.11,45 25,45 C18.89,45 13.43,42.25 9.76,37.93 L9.78,37.92 C6.82,34.43 5,29.94 5,25 C5,21.86 5.74,18.91 7.03,16.26 L2.89,13.33 C1.05,16.81 0,20.78 0,25 C0,31.01 2.13,36.52 5.66,40.83 L5.66,40.83 C10.24,46.42 17.21,49.99 25,49.99 C32.79,49.99 39.76,46.42 44.34,40.83 L40.24,37.93 Z\" />\r\n        </g>\r\n\r\n    </svg>\r\n</div>"
-                },] }
-    ];
-    SplashComponent.ctorParameters = function () { return [
-        { type: SplashService }
-    ]; };
-
-    var ResizableColumnComponent = /** @class */ (function () {
-        function ResizableColumnComponent(el) {
-            this.el = el;
-            this.onResize = new i0.EventEmitter();
-        }
-        ResizableColumnComponent.prototype.emitWidth = function (width) {
-            this.onResize.emit(width);
-        };
-        return ResizableColumnComponent;
-    }());
-    ResizableColumnComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'th.is-resizable',
-                    template: "<div class=\"content-wrapper\">\r\n  <div class=\"content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n<div class=\"handle\"></div>\r\n"
-                },] }
-    ];
-    ResizableColumnComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-    ResizableColumnComponent.propDecorators = {
-        onResize: [{ type: i0.Output }]
-    };
-
     var CacheService = /** @class */ (function () {
         function CacheService() {
             this.localStorageAvailable = false;
@@ -6186,6 +6071,174 @@
         id: [{ type: i0.Input }]
     };
 
+    /**
+     * Make an element resizable horizontally by wrapping it in the ResizableComponent.
+     * Default widths / limits are applied but you can optionally override them
+     * with min-width and max-width with style attributes
+     * @example
+     * <ec-resizable [style.width.px]="200"
+     *               [style.min-width.px]="75"
+     *               [style.max-width.px]="300">
+     *    <div> ... </div>
+     * </ec-resizable>
+     */
+    var ResizableComponent = /** @class */ (function (_super) {
+        __extends(ResizableComponent, _super);
+        function ResizableComponent(el, renderer, cacheService, document) {
+            var _this = _super.call(this, renderer, cacheService, document) || this;
+            _this.el = el;
+            //default rememberWidth to true for standard resizable, resizable tables default to false
+            _this.rememberWidth = true;
+            return _this;
+        }
+        /** Store the host element to reference later */
+        ResizableComponent.prototype.ngOnInit = function () {
+            this.currentEl = this.el.nativeElement;
+        };
+        /**
+         * Set the new width of the element and emit the new width to subscribers
+         */
+        ResizableComponent.prototype.setWidth = function (width) {
+            this.renderer.setStyle(this.currentEl, 'width', width + 'px');
+            this.saveWidths([width]);
+        };
+        /**Called from the base class when cached widths are available and restoring
+         * width is enabled. We only care about the first one because we only have one width
+         */
+        ResizableComponent.prototype.restoreWidths = function (widths) {
+            this.setWidth(widths[0]);
+        };
+        return ResizableComponent;
+    }(ResizableBase));
+    ResizableComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'ec-resizable',
+                    template: "<div class=\"content\">\n              <ng-content></ng-content>\n            </div>\n            <div class=\"handle\" (mousedown)=\"startDrag($event)\"></div>",
+                    styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{border-right:1px solid #d2d7d9;display:flex;max-width:480px;min-width:100px;position:relative;width:240px}:host.is-active{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}:host.is-active .handle:after{background-color:#0084a9}.handle{height:100%;padding:0 5px;position:absolute;right:-7px;top:0;width:13px;z-index:30}.handle:after{content:\"\";display:block;height:100%;position:relative;transition:background-color .3s ease}.handle:hover{cursor:col-resize}.handle:hover:after{background-color:#0084a9}.content{display:flex;overflow:hidden}.content,.content ::ng-deep>*{flex:1 1;min-height:0;min-width:0}"]
+                },] }
+    ];
+    ResizableComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.Renderer2 },
+        { type: CacheService },
+        { type: Document, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] }
+    ]; };
+
+    /** Exposes the markup and styles that represent the spinner. No inputs or outputs defined because it is just a visual component*/
+    var SpinnerComponent = /** @class */ (function () {
+        function SpinnerComponent() {
+        }
+        return SpinnerComponent;
+    }());
+    SpinnerComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'ec-spinner',
+                    template: "<div class=\"spinner\">\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n</div>",
+                    styles: ["@-webkit-keyframes sk-bouncedelay{0%,80%,to{opacity:0}40%{opacity:1}}@keyframes sk-bouncedelay{0%,80%,to{opacity:0}40%{opacity:1}}.spinner{display:flex}.spinner-dot{-webkit-animation:sk-bouncedelay 1.7s ease-in-out infinite both;animation:sk-bouncedelay 1.7s ease-in-out infinite both;background-color:#0084a9;height:.75rem;margin-right:.25rem;width:.75rem}.spinner-dot:first-child{-webkit-animation-delay:-.6s;animation-delay:-.6s}.spinner-dot:nth-child(2){-webkit-animation-delay:-.4s;animation-delay:-.4s}.spinner-dot:nth-child(3){-webkit-animation-delay:-.2s;animation-delay:-.2s}:host(.spinner-small) .spinner-dot{-webkit-animation:sk-bouncedelay 1.7s ease-in-out infinite both;animation:sk-bouncedelay 1.7s ease-in-out infinite both;background-color:#0084a9;height:.5rem;margin-right:.1666666667rem;width:.5rem}:host(.spinner-small) .spinner-dot:first-child{-webkit-animation-delay:-.6s;animation-delay:-.6s}:host(.spinner-small) .spinner-dot:nth-child(2){-webkit-animation-delay:-.4s;animation-delay:-.4s}:host(.spinner-small) .spinner-dot:nth-child(3){-webkit-animation-delay:-.2s;animation-delay:-.2s}"]
+                },] }
+    ];
+
+    var SplashService = /** @class */ (function () {
+        function SplashService() {
+            /** Used to interact with the splash component
+             *  The splash component will subscribe to this and any components
+             *  that wish to bring the splash visible can use this to communicate
+             *  with the splash component.
+             */
+            this._splashVisibility = new rxjs.Subject();
+            this.splashVisibility = this._splashVisibility;
+        }
+        /**
+         * Shows the splash screen
+         */
+        SplashService.prototype.showSplash = function () {
+            this._splashVisibility.next(true);
+        };
+        /**
+         * Hides the splash screen
+         */
+        SplashService.prototype.hideSplash = function () {
+            this._splashVisibility.next(false);
+        };
+        return SplashService;
+    }());
+    SplashService.ɵprov = i0.ɵɵdefineInjectable({ factory: function SplashService_Factory() { return new SplashService(); }, token: SplashService, providedIn: "root" });
+    SplashService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    SplashService.ctorParameters = function () { return []; };
+
+    var SplashComponent = /** @class */ (function () {
+        function SplashComponent(splashService) {
+            this.splashService = splashService;
+            /** Sets the visibility of the splash display */
+            this.isVisible = true;
+            this.stopAnimation = false;
+            /** Emits when the service is destroyed */
+            this.destroyed = new rxjs.Subject();
+        }
+        SplashComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.splashService.splashVisibility.pipe(operators.takeUntil(this.destroyed), operators.tap(function (value) { return __awaiter(_this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    if (value) {
+                        this.stopAnimation = false;
+                    }
+                    else {
+                        // Prevent animation from continuing after splash screen is hidden
+                        // but if we hide it then show while the timer is running, don't stop the animation after all
+                        rxjs.timer(1000).pipe(operators.takeUntil(this.splashService.splashVisibility)).subscribe(function () {
+                            _this.stopAnimation = true;
+                        });
+                    }
+                    return [2 /*return*/];
+                });
+            }); })).subscribe(function (showSplash) {
+                _this.isVisible = showSplash;
+            });
+        };
+        SplashComponent.prototype.ngOnDestroy = function () {
+            this.destroyed.next();
+            this.destroyed.unsubscribe();
+        };
+        return SplashComponent;
+    }());
+    SplashComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'ec-splash',
+                    template: "<div class=\"app-splash\"\r\n     [class.app-loaded]=\"!isVisible\">\r\n\r\n    <!-- This is the raw icon.svg file so we can animate it -->\r\n    <svg [class.d-none]=\"stopAnimation\" \r\n         xmlns=\"http://www.w3.org/2000/svg\"\r\n         width=\"50\"\r\n         height=\"50\"\r\n         viewBox=\"0 0 50 50\">\r\n        <g>\r\n            <g>\r\n                <path fill=\"#A0AD39\"\r\n                fill-rule=\"nonzero\"\r\n                d=\"M34.93,32.25 L34.93,37.25 L15.21,37.25 L15.21,32.25 L34.93,32.25 Z M28.45,22.48 L28.45,27.48 L15.21,27.48 L15.21,22.48 L28.45,22.48 Z M34.93,12.71 L34.93,17.71 L15.21,17.71 L15.21,12.71 L34.93,12.71 Z\" />\r\n                <path fill=\"#A0AD39\"\r\n                d=\"M24.99,5 C31.1,5 36.56,7.75 40.23,12.07 L44.33,9.16 C39.75,3.57 32.78,0 24.99,0 C17.2,0 10.23,3.57 5.65,9.16 L9.75,12.07 C13.42,7.75 18.88,5 24.99,5 Z\" />\r\n            </g>\r\n            <path fill=\"#17303B\"\r\n                  d=\"M40.24,37.93 C36.57,42.25 31.11,45 25,45 C18.89,45 13.43,42.25 9.76,37.93 L9.78,37.92 C6.82,34.43 5,29.94 5,25 C5,21.86 5.74,18.91 7.03,16.26 L2.89,13.33 C1.05,16.81 0,20.78 0,25 C0,31.01 2.13,36.52 5.66,40.83 L5.66,40.83 C10.24,46.42 17.21,49.99 25,49.99 C32.79,49.99 39.76,46.42 44.34,40.83 L40.24,37.93 Z\" />\r\n        </g>\r\n\r\n    </svg>\r\n</div>"
+                },] }
+    ];
+    SplashComponent.ctorParameters = function () { return [
+        { type: SplashService }
+    ]; };
+
+    var ResizableColumnComponent = /** @class */ (function () {
+        function ResizableColumnComponent(el) {
+            this.el = el;
+            this.onResize = new i0.EventEmitter();
+        }
+        ResizableColumnComponent.prototype.emitWidth = function (width) {
+            this.onResize.emit(width);
+        };
+        return ResizableColumnComponent;
+    }());
+    ResizableColumnComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'th.is-resizable',
+                    template: "<div class=\"content-wrapper\">\r\n  <div class=\"content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n<div class=\"handle\"></div>\r\n"
+                },] }
+    ];
+    ResizableColumnComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+    ResizableColumnComponent.propDecorators = {
+        onResize: [{ type: i0.Output }]
+    };
+
     /**
      * Add the ability to resize columns to a standard HTML table.
      * Specify a column as resizable by adding the .is-resizable class to a <th>.
@@ -8093,6 +8146,34 @@
         width: [{ type: i0.Input, args: ['ecIfViewportWidth',] }]
     };
 
+    var HighlightTextPipe = /** @class */ (function () {
+        function HighlightTextPipe() {
+        }
+        HighlightTextPipe.prototype.transform = function (value, searchText) {
+            var transformedValue = '';
+            if (value && searchText) {
+                var regex = new RegExp(this.escapeRegex(searchText), 'gi');
+                transformedValue = value.replace(regex, this.strongWrap);
+            }
+            else {
+                transformedValue = value;
+            }
+            return transformedValue;
+        };
+        HighlightTextPipe.prototype.strongWrap = function (match) {
+            return "<strong class=\"text-highlight\">" + match + "</strong>";
+        };
+        HighlightTextPipe.prototype.escapeRegex = function (value) {
+            return value.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+        };
+        return HighlightTextPipe;
+    }());
+    HighlightTextPipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'highlightText'
+                },] }
+    ];
+
     /**
      * Format a time to the user's preference for display
      */
@@ -8185,7 +8266,7 @@
     PageTitleComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-page-title',
-                    template: "<i *ngIf=\"titleIcon\"\r\n   class=\"flex-shrink mr-1 my-1 ec-icon ec-icon-md {{titleIcon}}\"></i>\r\n<div>\r\n      <h1 *ngIf=\"title\"\r\n            class=\"text-title-1 mb-0 py-1 text-truncate\">{{title}}</h1>\r\n      <p *ngIf=\"subTitle\"\r\n            class=\"text-caption-1 mb-0 mt-n1 text-truncate\">{{subTitle}}</p>\r\n</div>",
+                    template: "<i *ngIf=\"titleIcon\"\r\n   class=\"flex-shrink mr-1 my-1 ec-icon ec-icon-md {{titleIcon}}\"></i>\r\n<div class=\"text-truncate\">\r\n      <h1 *ngIf=\"title\"\r\n          class=\"text-title-1 mb-0 py-1 text-truncate\"\r\n          title=\"{{title}}\">{{title}}</h1>\r\n      <p *ngIf=\"subTitle\"\r\n         class=\"text-caption-1 mb-0 mt-n1 text-truncate\">{{subTitle}}</p>\r\n</div>",
                     host: {
                         class: 'd-flex'
                     }
@@ -8251,7 +8332,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        <section>\r\n            <ng-content></ng-content>    \r\n        </section>\r\n        \r\n        <footer>\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                                [titleIcon]=\"titleIcon\"\r\n                                class=\"title\">\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        <section>\r\n            <ng-content></ng-content>    \r\n        </section>\r\n        \r\n        <footer>\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                                [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",
                     host: {
                         class: "flex-grow"
                     },
@@ -8576,7 +8657,8 @@
                         HierarchyTreeComponent,
                         TreeComponent,
                         RelativeDatePipe,
-                        ResizableComponent
+                        ResizableComponent,
+                        HighlightTextPipe
                     ],
                     imports: [
                         common.CommonModule,
@@ -8594,7 +8676,8 @@
                         TimeDisplayPipe,
                         MockDateDisplayPipe,
                         RowCountPipe,
-                        RelativeDatePipe
+                        RelativeDatePipe,
+                        HighlightTextPipe
                     ],
                     exports: [
                         ButtonComponent,
@@ -8649,7 +8732,8 @@
                         HierarchyTreeComponent,
                         TreeComponent,
                         RelativeDatePipe,
-                        ResizableComponent
+                        ResizableComponent,
+                        HighlightTextPipe
                     ]
                 },] }
     ];
@@ -8735,59 +8819,6 @@
     }());
     ;
 
-    /**
-     * Make an element resizable horizontally by wrapping it in the ResizableComponent.
-     * Default widths / limits are applied but you can optionally override them
-     * with min-width and max-width with style attributes
-     * @example
-     * <ec-resizable [style.width.px]="200"
-     *               [style.min-width.px]="75"
-     *               [style.max-width.px]="300">
-     *    <div> ... </div>
-     * </ec-resizable>
-     */
-    var ResizableComponent = /** @class */ (function (_super) {
-        __extends(ResizableComponent, _super);
-        function ResizableComponent(el, renderer, cacheService, document) {
-            var _this = _super.call(this, renderer, cacheService, document) || this;
-            _this.el = el;
-            //default rememberWidth to true for standard resizable, resizable tables default to false
-            _this.rememberWidth = true;
-            return _this;
-        }
-        /** Store the host element to reference later */
-        ResizableComponent.prototype.ngOnInit = function () {
-            this.currentEl = this.el.nativeElement;
-        };
-        /**
-         * Set the new width of the element and emit the new width to subscribers
-         */
-        ResizableComponent.prototype.setWidth = function (width) {
-            this.renderer.setStyle(this.currentEl, 'width', width + 'px');
-            this.saveWidths([width]);
-        };
-        /**Called from the base class when cached widths are available and restoring
-         * width is enabled. We only care about the first one because we only have one width
-         */
-        ResizableComponent.prototype.restoreWidths = function (widths) {
-            this.setWidth(widths[0]);
-        };
-        return ResizableComponent;
-    }(ResizableBase));
-    ResizableComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'ec-resizable',
-                    template: "<div class=\"content\">\n              <ng-content></ng-content>\n            </div>\n            <div class=\"handle\" (mousedown)=\"startDrag($event)\"></div>",
-                    styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{border-right:1px solid #d2d7d9;display:flex;max-width:480px;min-width:100px;position:relative;width:240px}:host.is-active{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}:host.is-active .handle:after{background-color:#0084a9}.handle{height:100%;padding:0 5px;position:absolute;right:-7px;top:0;width:13px;z-index:30}.handle:after{content:\"\";display:block;height:100%;position:relative;transition:background-color .3s ease}.handle:hover{cursor:col-resize}.handle:hover:after{background-color:#0084a9}.content{display:flex;overflow:hidden}.content,.content ::ng-deep>*{flex:1 1;min-height:0;min-width:0}"]
-                },] }
-    ];
-    ResizableComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: i0.Renderer2 },
-        { type: CacheService },
-        { type: Document, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] }
-    ]; };
-
     var CustomValidators = /** @class */ (function () {
         function CustomValidators() {
         }
@@ -8882,6 +8913,10 @@
              * Default unknown save error message, override if a more specific message is needed
              */
             this.defaultUnknownSaveError = 'PageBaseUnknownSaveError_SC';
+            /**
+             * Used to opt out of hiding the splash screen when the page is loaded
+             */
+            this.skipHideSplashOnComplete = false;
             /**
              * Used to unsubscribe from observables
              */
@@ -8903,6 +8938,7 @@
             this.router = injector.get(i1$1.Router);
             this.activatedRoute = injector.get(i1$1.ActivatedRoute);
             this.dialogService = injector.get(DialogService);
+            this.splashService = injector.get(SplashService);
         }
         Object.defineProperty(PageBaseComponent.prototype, "errors", {
             get: function () {
@@ -8977,6 +9013,9 @@
                             if (this.status.status === 'pending') {
                                 this.showStatus(exports.PageStatus.Loaded);
                             }
+                            if (!this.skipHideSplashOnComplete) {
+                                this.splashService.hideSplash();
+                            }
                             this.setUpRouterSubscriptions();
                             return [3 /*break*/, 5];
                         case 4:
@@ -9387,6 +9426,13 @@
                 return new MockActivatedRoute();
             },
             deps: [],
+        },
+        {
+            provide: SplashService,
+            useFactory: function () {
+                return SpyFactory.createSpy(SplashService);
+            },
+            deps: []
         }
     ];
     /**
@@ -9831,6 +9877,7 @@
     exports.HierarchyBaseTestInjectorFactory = HierarchyBaseTestInjectorFactory;
     exports.HierarchyItem = HierarchyItem;
     exports.HierarchyTreeComponent = HierarchyTreeComponent;
+    exports.HighlightTextPipe = HighlightTextPipe;
     exports.IfViewportWidthDirective = IfViewportWidthDirective;
     exports.ItemDisplayComponent = ItemDisplayComponent;
     exports.JsonDisplayComponent = JsonDisplayComponent;