@energycap/components 0.27.2 → 0.27.3-ECAPID-377-Nav-Item-Test.20220125-1644

package/bundles/energycap-components.umd.js

@@ -2653,6 +2653,12 @@
              * Item currently highlighted by keyboard navigation
              */
             this.highlightedItem = null;
+            /**
+             * Tells the menu to maintain the selected/lastSelected item. Turning this off is useful for
+             * action type menus that are displayed on the screen at all times and you do not
+             * want the item to be selected when clicked.
+             */
+            this.maintainSelectedItem = true;
             /**
              * Emitted when `selected` is changed. Emits the referenced object.
              *
@@ -2676,6 +2682,9 @@
              */
             this.lastSelected = null;
         }
+        MenuComponent.prototype.onRouterLinkActivated = function (event) {
+            // this.selectItem(event.event, event.item);
+        };
         /**
          * Sets & displays the interalized template based on
          * the set template.
@@ -2755,8 +2764,14 @@
                 else {
                     this.onSelection(item);
                 }
-                this.selected = item;
-                this.lastSelected = item;
+                if (this.maintainSelectedItem) {
+                    this.selected = item;
+                    this.lastSelected = item;
+                }
+                else {
+                    this.selected = null;
+                    this.lastSelected = null;
+                }
             }
         };
         /**
@@ -2977,7 +2992,7 @@
     MenuComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'ec-menu',
-                    template: "<nav>\r\n    <div class=\"parent\"\r\n         [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n        <header id=\"{{id}}_header\"\r\n                class=\"item-wrapper\"\r\n                [class.is-selected]=\"highlightedItemIndex === -1\"\r\n                *ngIf=\"parent\"\r\n                (click)=\"back($event)\">\r\n            <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n            <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n        </header>\r\n\r\n        <ul id=\"{{id}}_list\">\r\n            <li *ngFor=\"let item of items; index as i\"\r\n                id=\"{{item.id || id + '_item' + i}}\"\r\n                class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n                [attr.disabled]=\"item.disabled\"\r\n                [hidden]=\"item.hidden\"\r\n                ecNavItemActive=\"is-selected\"\r\n                [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n                [ecNavItemActiveUrl]=\"item.url\"\r\n                [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n                (routerLinkActivated)=\"selectItem($event, item)\"\r\n                [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked}\"\r\n                (click)=\"selectItem($event, item)\">\r\n\r\n                <a *ngIf=\"item.url && !item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   class=\"item-wrapper\"\r\n                   [routerLink]=\"item.url\"\r\n                   [queryParams]=\"item.queryParams || null\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <a *ngIf=\"item.url && item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   class=\"item-wrapper\"\r\n                   href=\"{{item.url}}\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <div *ngIf=\"!item.url\"\r\n                     class=\"item-wrapper\">\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </div>\r\n            </li>\r\n        </ul>\r\n\r\n        <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n    </div>\r\n\r\n    <!-- Child menu (Rendered to the right) -->\r\n    <ec-menu *ngIf=\"selected?.items\"\r\n             id=\"{{id}}_child\"\r\n             class=\"child\"\r\n             [parent]=\"selected\"\r\n             [items]=\"selected?.items\"\r\n             [showNoItems]=\"true\"\r\n             [templateType]=\"templateType\"\r\n             [enableKeyNav]=\"true\"\r\n             (selectedChanged)=\"onSelection($event)\"\r\n             (menuClosed)=\"toggleChildMenu(false)\">\r\n    </ec-menu>\r\n</nav>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n             let-item>\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n             let-item>\r\n\r\n    <i class=\"ec-icon icon-check ec-icon-sm\" *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n    <i class=\"ec-icon {{item.icon}} ml-2\" *ngIf=\"item.icon\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n             let-item>\r\n\r\n    <i class=\"ec-icon {{item.icon}}\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>",
+                    template: "<nav>\r\n    <div class=\"parent\"\r\n         [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n        <header id=\"{{id}}_header\"\r\n                class=\"item-wrapper\"\r\n                [class.is-selected]=\"highlightedItemIndex === -1\"\r\n                *ngIf=\"parent\"\r\n                (click)=\"back($event)\">\r\n            <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n            <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n        </header>\r\n\r\n        <ul id=\"{{id}}_list\">\r\n            <li *ngFor=\"let item of items; index as i\"\r\n                id=\"{{item.id || id + '_item' + i}}\"\r\n                class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n                [attr.disabled]=\"item.disabled\"\r\n                [hidden]=\"item.hidden\"\r\n                ecNavItemActive=\"is-selected\"\r\n                [ecNavItemCurrentItem]=\"item\"\r\n                [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n                [ecNavItemActiveUrl]=\"item.url\"\r\n                [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n                (routerLinkActivated)=\"onRouterLinkActivated($event)\"\r\n                [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked}\"\r\n                (click)=\"selectItem($event, item)\">\r\n\r\n                <a *ngIf=\"item.url && !item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   class=\"item-wrapper\"\r\n                   [routerLink]=\"item.url\"\r\n                   [queryParams]=\"item.queryParams || null\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <a *ngIf=\"item.url && item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   class=\"item-wrapper\"\r\n                   href=\"{{item.url}}\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <div *ngIf=\"!item.url\"\r\n                     class=\"item-wrapper\">\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </div>\r\n            </li>\r\n        </ul>\r\n\r\n        <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n    </div>\r\n\r\n    <!-- Child menu (Rendered to the right) -->\r\n    <ec-menu *ngIf=\"selected?.items\"\r\n             id=\"{{id}}_child\"\r\n             class=\"child\"\r\n             [parent]=\"selected\"\r\n             [items]=\"selected?.items\"\r\n             [showNoItems]=\"true\"\r\n             [templateType]=\"templateType\"\r\n             [enableKeyNav]=\"true\"\r\n             (selectedChanged)=\"onSelection($event)\"\r\n             (menuClosed)=\"toggleChildMenu(false)\">\r\n    </ec-menu>\r\n</nav>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n             let-item>\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n             let-item>\r\n\r\n    <i class=\"ec-icon icon-check ec-icon-sm\" *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n    <i class=\"ec-icon {{item.icon}} ml-2\" *ngIf=\"item.icon\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n             let-item>\r\n\r\n    <i class=\"ec-icon {{item.icon}}\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\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{background-color:#fff;display:block;font-size:.875rem;font-weight:400}:host.open>nav>.child,:host.open>nav>.parent{height:100%;left:0;position:absolute;right:0;top:0;transition:transform .25s ease}:host.open>nav>.parent{transform:translateX(0)}:host.open>nav>.child{transform:translateX(100%)}:host.open-active>nav>.parent{transform:translateX(-100%)}:host.open-active>nav>.child{transform:translateX(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{height:100%;overflow:hidden}.parent,nav{display:flex;position:relative}.parent{flex:auto;flex-direction:column;max-width:100%}.parent>header{background-color:#dee2e4;color:rgba(26,26,35,.66);cursor:pointer}.parent>header.is-highlighted,.parent>header.is-selected{background-color:#d9edf2}.parent>header:hover{background-color:#bfe0e9}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{flex:auto;height:100%;list-style:none;margin:0;overflow-y:auto;padding:0}ul li{cursor:pointer}ul li.is-highlighted,ul li.is-selected{background-color:#d9edf2}ul li:hover{background-color:#bfe0e9}ul li:focus{background-color:rgba(26,26,35,.38);outline:none}ul li:active{background-color:#0084a9;color:#fff}ul li.is-disabled,ul li:disabled{color:rgba(26,26,35,.66);cursor:default;opacity:.65}ul li a{border-bottom:0;color:inherit;text-decoration:none}ul li.heading{background-color:#dee2e4;color:rgba(26,26,35,.66)}ul li.heading .item-wrapper{cursor:default}ul li.divider{border-bottom:1px solid #d2d7d9}ul li.is-disabled,ul li.is-readonly{background-color:transparent;color:inherit;cursor:default}ul li.is-checked .icon-check{opacity:1}.item-wrapper{color:inherit;cursor:inherit;display:flex;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{flex:none;margin-top:.125rem}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:.25rem}.item-wrapper .icon-check{opacity:0}.no-data-message{color:rgba(26,26,35,.38);display:none;font-size:1rem;margin-bottom:0;padding:1rem;text-align:center}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li{white-space:nowrap}:host-context(ec-tree) li.is-highlighted,:host-context(ec-tree) li.is-selected{font-weight:700}:host-context(ec-tree) li.is-highlighted:not(:hover),:host-context(ec-tree) li.is-selected:not(:hover){background-color:transparent}"]
                 },] }
     ];
@@ -3000,6 +3015,7 @@
         noDataText: [{ type: i0.Input }],
         enableKeyNav: [{ type: i0.Input }],
         highlightedItem: [{ type: i0.Input }],
+        maintainSelectedItem: [{ type: i0.Input }],
         selectedChanged: [{ type: i0.Output }],
         menuClosed: [{ type: i0.Output }],
         labelTemplate: [{ type: i0.ViewChild, args: ['label', { static: true },] }],
@@ -3806,7 +3822,7 @@
             if (this._url && this.classValue) {
                 if (this.router.isActive(this._url, this._exact)) {
                     this.renderer.addClass(this.el.nativeElement, this.classValue);
-                    this.routerLinkActivated.emit(new Event('routerLinkActivated'));
+                    this.routerLinkActivated.emit({ event: new Event('routerLinkActivated'), item: this.currentItem });
                 }
                 else {
                     this.renderer.removeClass(this.el.nativeElement, this.classValue);
@@ -3830,6 +3846,7 @@
         classValue: [{ type: i0.Input, args: ['ecNavItemActive',] }],
         exact: [{ type: i0.Input, args: ['ecNavItemActiveExactMatch',] }],
         queryParams: [{ type: i0.Input, args: ['ecNavItemActiveQueryParams',] }],
+        currentItem: [{ type: i0.Input, args: ['ecNavItemCurrentItem',] }],
         url: [{ type: i0.Input, args: ['ecNavItemActiveUrl',] }],
         routerLinkActivated: [{ type: i0.Output }]
     };
@@ -5846,121 +5863,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 +6088,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 +8163,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 +8283,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 +8349,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 +8674,8 @@
                         HierarchyTreeComponent,
                         TreeComponent,
                         RelativeDatePipe,
-                        ResizableComponent
+                        ResizableComponent,
+                        HighlightTextPipe
                     ],
                     imports: [
                         common.CommonModule,
@@ -8594,7 +8693,8 @@
                         TimeDisplayPipe,
                         MockDateDisplayPipe,
                         RowCountPipe,
-                        RelativeDatePipe
+                        RelativeDatePipe,
+                        HighlightTextPipe
                     ],
                     exports: [
                         ButtonComponent,
@@ -8649,7 +8749,8 @@
                         HierarchyTreeComponent,
                         TreeComponent,
                         RelativeDatePipe,
-                        ResizableComponent
+                        ResizableComponent,
+                        HighlightTextPipe
                     ]
                 },] }
     ];
@@ -8735,59 +8836,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 +8930,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 +8955,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 +9030,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 +9443,13 @@
                 return new MockActivatedRoute();
             },
             deps: [],
+        },
+        {
+            provide: SplashService,
+            useFactory: function () {
+                return SpyFactory.createSpy(SplashService);
+            },
+            deps: []
         }
     ];
     /**
@@ -9831,6 +9894,7 @@
     exports.HierarchyBaseTestInjectorFactory = HierarchyBaseTestInjectorFactory;
     exports.HierarchyItem = HierarchyItem;
     exports.HierarchyTreeComponent = HierarchyTreeComponent;
+    exports.HighlightTextPipe = HighlightTextPipe;
     exports.IfViewportWidthDirective = IfViewportWidthDirective;
     exports.ItemDisplayComponent = ItemDisplayComponent;
     exports.JsonDisplayComponent = JsonDisplayComponent;