@energycap/components 0.27.2 → 0.27.3

package/fesm2015/energycap-components.js

@@ -5273,110 +5273,6 @@ JsonDisplayComponent.propDecorators = {
     maxLength: [{ type: Input }]
 };
 
-/** Exposes the markup and styles that represent the spinner. No inputs or outputs defined because it is just a visual component*/
-class SpinnerComponent {
-}
-SpinnerComponent.decorators = [
-    { type: 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}"]
-            },] }
-];
-
-class SplashService {
-    constructor() {
-        /** 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 Subject();
-        this.splashVisibility = this._splashVisibility;
-    }
-    /**
-     * Shows the splash screen
-     */
-    showSplash() {
-        this._splashVisibility.next(true);
-    }
-    /**
-     * Hides the splash screen
-     */
-    hideSplash() {
-        this._splashVisibility.next(false);
-    }
-}
-SplashService.ɵprov = ɵɵdefineInjectable({ factory: function SplashService_Factory() { return new SplashService(); }, token: SplashService, providedIn: "root" });
-SplashService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-SplashService.ctorParameters = () => [];
-
-class SplashComponent {
-    constructor(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 Subject();
-    }
-    ngOnInit() {
-        this.splashService.splashVisibility.pipe(takeUntil(this.destroyed), tap((value) => __awaiter(this, void 0, void 0, function* () {
-            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
-                timer(1000).pipe(takeUntil(this.splashService.splashVisibility)).subscribe(() => {
-                    this.stopAnimation = true;
-                });
-            }
-        }))).subscribe(showSplash => {
-            this.isVisible = showSplash;
-        });
-    }
-    ngOnDestroy() {
-        this.destroyed.next();
-        this.destroyed.unsubscribe();
-    }
-}
-SplashComponent.decorators = [
-    { type: 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 = () => [
-    { type: SplashService }
-];
-
-class ResizableColumnComponent {
-    constructor(el) {
-        this.el = el;
-        this.onResize = new EventEmitter();
-    }
-    emitWidth(width) {
-        this.onResize.emit(width);
-    }
-}
-ResizableColumnComponent.decorators = [
-    { type: 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 = () => [
-    { type: ElementRef }
-];
-ResizableColumnComponent.propDecorators = {
-    onResize: [{ type: Output }]
-};
-
 class CacheService {
     constructor() {
         this.localStorageAvailable = false;
@@ -5595,6 +5491,163 @@ ResizableBase.propDecorators = {
     id: [{ type: 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>
+ */
+class ResizableComponent extends ResizableBase {
+    constructor(el, renderer, cacheService, document) {
+        super(renderer, cacheService, document);
+        this.el = el;
+        //default rememberWidth to true for standard resizable, resizable tables default to false
+        this.rememberWidth = true;
+    }
+    /** Store the host element to reference later */
+    ngOnInit() {
+        this.currentEl = this.el.nativeElement;
+    }
+    /**
+     * Set the new width of the element and emit the new width to subscribers
+     */
+    setWidth(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
+     */
+    restoreWidths(widths) {
+        this.setWidth(widths[0]);
+    }
+}
+ResizableComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ec-resizable',
+                template: `<div class="content">
+              <ng-content></ng-content>
+            </div>
+            <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 = () => [
+    { type: ElementRef },
+    { type: Renderer2 },
+    { type: CacheService },
+    { type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
+];
+
+/** Exposes the markup and styles that represent the spinner. No inputs or outputs defined because it is just a visual component*/
+class SpinnerComponent {
+}
+SpinnerComponent.decorators = [
+    { type: 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}"]
+            },] }
+];
+
+class SplashService {
+    constructor() {
+        /** 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 Subject();
+        this.splashVisibility = this._splashVisibility;
+    }
+    /**
+     * Shows the splash screen
+     */
+    showSplash() {
+        this._splashVisibility.next(true);
+    }
+    /**
+     * Hides the splash screen
+     */
+    hideSplash() {
+        this._splashVisibility.next(false);
+    }
+}
+SplashService.ɵprov = ɵɵdefineInjectable({ factory: function SplashService_Factory() { return new SplashService(); }, token: SplashService, providedIn: "root" });
+SplashService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+SplashService.ctorParameters = () => [];
+
+class SplashComponent {
+    constructor(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 Subject();
+    }
+    ngOnInit() {
+        this.splashService.splashVisibility.pipe(takeUntil(this.destroyed), tap((value) => __awaiter(this, void 0, void 0, function* () {
+            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
+                timer(1000).pipe(takeUntil(this.splashService.splashVisibility)).subscribe(() => {
+                    this.stopAnimation = true;
+                });
+            }
+        }))).subscribe(showSplash => {
+            this.isVisible = showSplash;
+        });
+    }
+    ngOnDestroy() {
+        this.destroyed.next();
+        this.destroyed.unsubscribe();
+    }
+}
+SplashComponent.decorators = [
+    { type: 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 = () => [
+    { type: SplashService }
+];
+
+class ResizableColumnComponent {
+    constructor(el) {
+        this.el = el;
+        this.onResize = new EventEmitter();
+    }
+    emitWidth(width) {
+        this.onResize.emit(width);
+    }
+}
+ResizableColumnComponent.decorators = [
+    { type: 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 = () => [
+    { type: ElementRef }
+];
+ResizableColumnComponent.propDecorators = {
+    onResize: [{ type: 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>.
@@ -7529,7 +7582,7 @@ class PageTitleComponent {
 PageTitleComponent.decorators = [
     { type: 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'
                 }
@@ -7594,7 +7647,7 @@ class PageViewComponent {
 PageViewComponent.decorators = [
     { type: 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"
                 },
@@ -8057,59 +8110,6 @@ class Tag {
 }
 ;
 
-/**
- * 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>
- */
-class ResizableComponent extends ResizableBase {
-    constructor(el, renderer, cacheService, document) {
-        super(renderer, cacheService, document);
-        this.el = el;
-        //default rememberWidth to true for standard resizable, resizable tables default to false
-        this.rememberWidth = true;
-    }
-    /** Store the host element to reference later */
-    ngOnInit() {
-        this.currentEl = this.el.nativeElement;
-    }
-    /**
-     * Set the new width of the element and emit the new width to subscribers
-     */
-    setWidth(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
-     */
-    restoreWidths(widths) {
-        this.setWidth(widths[0]);
-    }
-}
-ResizableComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ec-resizable',
-                template: `<div class="content">
-              <ng-content></ng-content>
-            </div>
-            <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 = () => [
-    { type: ElementRef },
-    { type: Renderer2 },
-    { type: CacheService },
-    { type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
-];
-
 class CustomValidators {
 }
 /**
@@ -8182,6 +8182,10 @@ class PageBaseComponent {
          * 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
          */
@@ -8203,6 +8207,7 @@ class PageBaseComponent {
         this.router = injector.get(Router);
         this.activatedRoute = injector.get(ActivatedRoute);
         this.dialogService = injector.get(DialogService);
+        this.splashService = injector.get(SplashService);
     }
     get errors() {
         return this._errors;
@@ -8250,6 +8255,9 @@ class PageBaseComponent {
                 if (this.status.status === 'pending') {
                     this.showStatus(PageStatus.Loaded);
                 }
+                if (!this.skipHideSplashOnComplete) {
+                    this.splashService.hideSplash();
+                }
                 this.setUpRouterSubscriptions();
             }
             catch (error) {
@@ -8600,6 +8608,13 @@ PageBaseComponentTestInjectorFactory.CoreProviders = [
             return new MockActivatedRoute();
         },
         deps: [],
+    },
+    {
+        provide: SplashService,
+        useFactory: () => {
+            return SpyFactory.createSpy(SplashService);
+        },
+        deps: []
     }
 ];
 /**