@energycap/components 0.37.5-ECAP-18945-record-view-mask.20230905-1030 → 0.37.5-ECAP-19214-page-view-action-dropdown-z-index-fix.20230905-1633

package/fesm2020/energycap-components.mjs

@@ -5236,23 +5236,6 @@ class DialogComponent {
             this.close(new DialogResult(false));
         }
     }
-    /**
-     * Defines the width of the dialog (height is auto). Can be a number that will be converted to pixels, or xsmall(320px), small(480px), medium(640px), or large(1024px)
-     */
-    set size(value) {
-        this._size = value;
-        // If the size is a string, set the dialog class. Otherwise, clear it.
-        if (typeof value == 'string') {
-            this.dialogSizeClass = `dialog-${value}`;
-        }
-        else {
-            this.dialogSizeClass = undefined;
-        }
-    }
-    ;
-    get size() {
-        return this._size;
-    }
     constructor(componentFactoryResolver, windowService, dialogService, documentRef) {
         this.componentFactoryResolver = componentFactoryResolver;
         this.windowService = windowService;
@@ -5276,16 +5259,10 @@ class DialogComponent {
         this.displayAsPanel = false;
         this.alignToTop = false;
         this.transparentMask = false;
-        this.noMask = false;
         /**
          * Defines the width of the dialog (height is auto). Can be a number that will be converted to pixels, or xsmall(320px), small(480px), medium(640px), or large(1024px)
          */
-        this._size = 'small';
-        /**
-         * Bound to the host. The classes set the --ec-dialog-width variable to our default 'small', 'medium', etc. sizes.
-         * Undefined when the size is a number, which is used for custom sizes.
-         */
-        this.dialogSizeClass = `dialog-${this._size}`;
+        this.size = "small";
         /**
          * Emits an event when the dialog is opened
          */
@@ -5334,9 +5311,6 @@ class DialogComponent {
                 if (options.transparentMask !== undefined) {
                     this.transparentMask = options.transparentMask;
                 }
-                if (options.noMask !== undefined) {
-                    this.noMask = options.noMask;
-                }
                 if (options.canOpenDialog !== undefined) {
                     const canOpen = await options.canOpenDialog();
                     if (!canOpen) {
@@ -5437,13 +5411,10 @@ class DialogComponent {
     }
 }
 DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: WindowService }, { token: DialogService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DialogComponent, selector: "ec-dialog", inputs: { size: "size", content: "content", context: "context", options: "options", dialogOpenStartEventId: "dialogOpenStartEventId" }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "onOverlayClick($event)" }, properties: { "class": "dialogSizeClass", "style.--ec-dialog-width.px": "width", "class.is-open": "this.isOpen", "class.fade-in": "this.fadeIn", "class.fade-out": "this.fadeOut", "class.is-panel": "this.displayAsPanel", "class.is-top-aligned": "this.alignToTop", "class.is-transparent": "this.transparentMask", "class.no-mask": "this.noMask" } }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<article [style.min-width]="minWidth" cdkTrapFocus cdkTrapFocusAutoCapture><ng-template #content></ng-template></article>', isInline: true, styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panelMaskFadeIn{0%{background-color:transparent}to{background-color:var(--ec-dialog-background-color)}}:host{--ec-dialog-background-color: var(--ec-background-color-dialog);align-items:center;background-color:var(--ec-dialog-background-color);justify-content:center;position:fixed;z-index:var(--ec-z-index-dialog);inset:0;display:none}:host.is-open{display:flex}:host.fade-in{animation-name:fadeIn;animation-duration:125ms;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.fade-out{animation-name:fadeIn;animation-duration:.1s;animation-direction:reverse;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.is-panel article{position:absolute;top:0;bottom:0;right:0;max-height:none;border-right:0;border-top:0;border-bottom:0;border-radius:0;box-shadow:0 0 .5rem var(--ec-color-shadow)}:host.is-panel.fade-in{animation-name:panelMaskFadeIn;animation-duration:.25s;animation-fill-mode:forwards}:host.is-panel.fade-in article{animation-name:slideIn;animation-duration:.25s;animation-fill-mode:forwards;animation-timing-function:ease-out}:host.is-panel.fade-out{animation-name:panelMaskFadeIn;animation-direction:reverse;animation-fill-mode:forwards}:host.is-panel.fade-out article{animation-name:slideIn;animation-duration:225ms;animation-direction:reverse;animation-fill-mode:forwards;animation-timing-function:ease-in}:host.is-panel.no-mask{left:auto;width:var(--ec-dialog-width)}:host.is-top-aligned{align-items:flex-start}:host.is-top-aligned article{min-height:auto;margin-top:20vh}:host.is-transparent{--ec-dialog-background-color: transparent}article{background-color:var(--ec-background-color-body);background-clip:padding-box;box-shadow:0 0 .625rem #1a1a2333;border-radius:var(--ec-border-radius-dialog);overflow:hidden;display:flex;flex:none;min-height:9rem;max-height:90vh;max-width:90vw;width:var(--ec-dialog-width)}:host.dialog-xsmall{--ec-dialog-width: 20rem}:host.dialog-small{--ec-dialog-width: 30rem}:host.dialog-medium{--ec-dialog-width: 40rem}:host.dialog-large{--ec-dialog-width: 50rem}:host.dialog-xlarge{--ec-dialog-width: 60rem}:host.dialog-full{--ec-dialog-width: 90vw}\n"], dependencies: [{ kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
+DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DialogComponent, selector: "ec-dialog", inputs: { size: "size", content: "content", context: "context", options: "options", dialogOpenStartEventId: "dialogOpenStartEventId" }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "onOverlayClick($event)" }, properties: { "class.is-open": "this.isOpen", "class.fade-in": "this.fadeIn", "class.fade-out": "this.fadeOut", "class.is-panel": "this.displayAsPanel", "class.is-top-aligned": "this.alignToTop", "class.is-transparent": "this.transparentMask" } }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<article [style.width.px]="width" [style.min-width]="minWidth" class="dialog-{{size}}" cdkTrapFocus cdkTrapFocusAutoCapture><ng-template #content></ng-template></article>', isInline: true, styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panelMaskFadeIn{0%{background-color:transparent}to{background-color:var(--ec-dialog-background-color)}}:host{--ec-dialog-background-color: var(--ec-background-color-dialog);align-items:center;background-color:var(--ec-dialog-background-color);justify-content:center;position:fixed;z-index:var(--ec-z-index-dialog);inset:0;display:none}:host.is-open{display:flex}:host.fade-in{animation-name:fadeIn;animation-duration:125ms;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.fade-out{animation-name:fadeIn;animation-duration:.1s;animation-direction:reverse;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.is-panel article{position:absolute;top:0;bottom:0;right:0;max-height:none;border-right:0;border-top:0;border-bottom:0;border-radius:0;box-shadow:0 0 .5rem var(--ec-color-shadow)}:host.is-panel.fade-in{animation-name:panelMaskFadeIn;animation-duration:.25s;animation-fill-mode:forwards}:host.is-panel.fade-in article{animation-name:slideIn;animation-duration:.25s;animation-fill-mode:forwards;animation-timing-function:ease-out}:host.is-panel.fade-out{animation-name:panelMaskFadeIn;animation-direction:reverse;animation-fill-mode:forwards}:host.is-panel.fade-out article{animation-name:slideIn;animation-duration:225ms;animation-direction:reverse;animation-fill-mode:forwards;animation-timing-function:ease-in}:host.is-top-aligned{align-items:flex-start}:host.is-top-aligned article{min-height:auto;margin-top:20vh}:host.is-transparent{--ec-dialog-background-color: transparent}article{background-color:var(--ec-background-color-body);background-clip:padding-box;box-shadow:0 0 .625rem #1a1a2333;border-radius:var(--ec-border-radius-dialog);overflow:hidden;display:flex;flex:none;min-height:9rem;max-height:90vh;max-width:90vw}.dialog-xsmall{width:20rem}.dialog-small{width:30rem}.dialog-medium{width:40rem}.dialog-large{width:50rem}.dialog-xlarge{width:60rem}.dialog-full{width:90vw}\n"], dependencies: [{ kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-dialog', template: '<article [style.min-width]="minWidth" cdkTrapFocus cdkTrapFocusAutoCapture><ng-template #content></ng-template></article>', host: {
-                        '[class]': 'dialogSizeClass',
-                        '[style.--ec-dialog-width.px]': 'width'
-                    }, styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panelMaskFadeIn{0%{background-color:transparent}to{background-color:var(--ec-dialog-background-color)}}:host{--ec-dialog-background-color: var(--ec-background-color-dialog);align-items:center;background-color:var(--ec-dialog-background-color);justify-content:center;position:fixed;z-index:var(--ec-z-index-dialog);inset:0;display:none}:host.is-open{display:flex}:host.fade-in{animation-name:fadeIn;animation-duration:125ms;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.fade-out{animation-name:fadeIn;animation-duration:.1s;animation-direction:reverse;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.is-panel article{position:absolute;top:0;bottom:0;right:0;max-height:none;border-right:0;border-top:0;border-bottom:0;border-radius:0;box-shadow:0 0 .5rem var(--ec-color-shadow)}:host.is-panel.fade-in{animation-name:panelMaskFadeIn;animation-duration:.25s;animation-fill-mode:forwards}:host.is-panel.fade-in article{animation-name:slideIn;animation-duration:.25s;animation-fill-mode:forwards;animation-timing-function:ease-out}:host.is-panel.fade-out{animation-name:panelMaskFadeIn;animation-direction:reverse;animation-fill-mode:forwards}:host.is-panel.fade-out article{animation-name:slideIn;animation-duration:225ms;animation-direction:reverse;animation-fill-mode:forwards;animation-timing-function:ease-in}:host.is-panel.no-mask{left:auto;width:var(--ec-dialog-width)}:host.is-top-aligned{align-items:flex-start}:host.is-top-aligned article{min-height:auto;margin-top:20vh}:host.is-transparent{--ec-dialog-background-color: transparent}article{background-color:var(--ec-background-color-body);background-clip:padding-box;box-shadow:0 0 .625rem #1a1a2333;border-radius:var(--ec-border-radius-dialog);overflow:hidden;display:flex;flex:none;min-height:9rem;max-height:90vh;max-width:90vw;width:var(--ec-dialog-width)}:host.dialog-xsmall{--ec-dialog-width: 20rem}:host.dialog-small{--ec-dialog-width: 30rem}:host.dialog-medium{--ec-dialog-width: 40rem}:host.dialog-large{--ec-dialog-width: 50rem}:host.dialog-xlarge{--ec-dialog-width: 60rem}:host.dialog-full{--ec-dialog-width: 90vw}\n"] }]
+            args: [{ selector: 'ec-dialog', template: '<article [style.width.px]="width" [style.min-width]="minWidth" class="dialog-{{size}}" cdkTrapFocus cdkTrapFocusAutoCapture><ng-template #content></ng-template></article>', styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panelMaskFadeIn{0%{background-color:transparent}to{background-color:var(--ec-dialog-background-color)}}:host{--ec-dialog-background-color: var(--ec-background-color-dialog);align-items:center;background-color:var(--ec-dialog-background-color);justify-content:center;position:fixed;z-index:var(--ec-z-index-dialog);inset:0;display:none}:host.is-open{display:flex}:host.fade-in{animation-name:fadeIn;animation-duration:125ms;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.fade-out{animation-name:fadeIn;animation-duration:.1s;animation-direction:reverse;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.is-panel article{position:absolute;top:0;bottom:0;right:0;max-height:none;border-right:0;border-top:0;border-bottom:0;border-radius:0;box-shadow:0 0 .5rem var(--ec-color-shadow)}:host.is-panel.fade-in{animation-name:panelMaskFadeIn;animation-duration:.25s;animation-fill-mode:forwards}:host.is-panel.fade-in article{animation-name:slideIn;animation-duration:.25s;animation-fill-mode:forwards;animation-timing-function:ease-out}:host.is-panel.fade-out{animation-name:panelMaskFadeIn;animation-direction:reverse;animation-fill-mode:forwards}:host.is-panel.fade-out article{animation-name:slideIn;animation-duration:225ms;animation-direction:reverse;animation-fill-mode:forwards;animation-timing-function:ease-in}:host.is-top-aligned{align-items:flex-start}:host.is-top-aligned article{min-height:auto;margin-top:20vh}:host.is-transparent{--ec-dialog-background-color: transparent}article{background-color:var(--ec-background-color-body);background-clip:padding-box;box-shadow:0 0 .625rem #1a1a2333;border-radius:var(--ec-border-radius-dialog);overflow:hidden;display:flex;flex:none;min-height:9rem;max-height:90vh;max-width:90vw}.dialog-xsmall{width:20rem}.dialog-small{width:30rem}.dialog-medium{width:40rem}.dialog-large{width:50rem}.dialog-xlarge{width:60rem}.dialog-full{width:90vw}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: WindowService }, { type: DialogService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -5465,9 +5436,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }], transparentMask: [{
                 type: HostBinding,
                 args: ['class.is-transparent']
-            }], noMask: [{
-                type: HostBinding,
-                args: ['class.no-mask']
             }], onOverlayClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -8333,12 +8301,12 @@ class PageViewComponent {
     }
 }
 PageViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PageViewComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-PageViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: PageViewComponent, selector: "ec-page-view", inputs: { isDialog: "isDialog", readonly: "readonly", status: "status", showHeader: "showHeader", errors: "errors", breadcrumbs: "breadcrumbs", title: "title", titleIcon: "titleIcon", subTitle: "subTitle", subTitleUrl: "subTitleUrl", moreActionsLabel: "moreActionsLabel", moreActions: "moreActions", secondaryActionLabel: "secondaryActionLabel", hideSecondaryAction: "hideSecondaryAction", primaryActionLabel: "primaryActionLabel", hidePrimaryAction: "hidePrimaryAction", customTitleTemplate: "customTitleTemplate", customActionsTemplate: "customActionsTemplate", customHeaderTemplate: "customHeaderTemplate", footerTemplate: "footerTemplate", customErrorBannerTemplate: "customErrorBannerTemplate", stickyFooter: "stickyFooter", fitContent: "fitContent", bgContent: "bgContent" }, outputs: { onPrimaryAction: "onPrimaryAction", onSecondaryAction: "onSecondaryAction" }, host: { properties: { "class.bg-content": "this.bgContent" }, classAttribute: "flex-grow" }, ngImport: i0, template: "<div ecOverlay\r\n     [status]=\"status?.status\"\r\n     [message]=\"status?.message\"\r\n     [displayAsMask]=\"true\"\r\n     class=\"flex-grow d-flex\"\r\n     [ngClass]=\"{'bg-body': !bgContent, 'bg-content': bgContent}\">\r\n    <div id=\"PageViewScrollContainer\"\r\n         class=\"d-flex flex-column flex-grow scroll-y\"\r\n         [class.is-dialog]=\"isDialog\"\r\n         [class.fit-content]=\"fitContent\"\r\n         [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\r\n         [class.overlay-visible]=\"status?.status !== 'hasData'\"\r\n         [class.footer-visible]=\"!!footerTemplate\">\r\n        <section>\r\n            <ng-content></ng-content>\r\n        </section>\r\n\r\n        <footer *ngIf=\"footerTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        </footer>\r\n\r\n        <header *ngIf=\"showHeader\">\r\n            <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 class=\"titlebar\">\r\n                <app-page-title *ngIf=\"!customTitleTemplate; else customTitle\"\r\n                                [title]=\"title\"\r\n                                [subTitle]=\"subTitle\"\r\n                                [subTitleUrl]=\"subTitleUrl\"\r\n                                [titleIcon]=\"titleIcon\"\r\n                                class=\"title text-truncate\">\r\n                </app-page-title>\r\n\r\n                <ng-template #customTitle>\r\n                    <div class=\"title\">\r\n                        <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\r\n                    </div>\r\n                </ng-template>\r\n\r\n                <div class=\"actions\">\r\n                    <ec-button id=\"primaryAction\"\r\n                               class=\"ml-2\"\r\n                               *ngIf=\"!hidePrimaryAction && onPrimaryAction.observers?.length && !readonly\"\r\n                               [disabled]=\"status?.status === 'pending'\"\r\n                               type=\"primary\"\r\n                               [label]=\"primaryActionLabel\"\r\n                               (clicked)=\"primaryAction($event)\">\r\n                    </ec-button>\r\n                    <ec-button id=\"secondaryAction\"\r\n                               class=\"ml-2\"\r\n                               *ngIf=\"!hideSecondaryAction && onSecondaryAction.observers?.length\"\r\n                               type=\"secondary\"\r\n                               [label]=\"readonly ? 'Close' : secondaryActionLabel\"\r\n                               (clicked)=\"secondaryAction($event)\">\r\n                    </ec-button>\r\n                    <ec-dropdown id=\"moreActions\"\r\n                                 *ngIf=\"moreActions?.length && !readonly\"\r\n                                 [disabled]=\"status?.status === 'pending'\"\r\n                                 class=\"ml-2\"\r\n                                 buttonType=\"text\"\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            <div *ngIf=\"customHeaderTemplate\"\r\n                 class=\"page-header\">\r\n                <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ec-banner *ngIf=\"!customErrorBannerTemplate && errors; else customErrorBannerOutlet\"\r\n                       id=\"pageViewErrors\"\r\n                       [class.border-bottom-0]=\"!isDialog\">\r\n                <div [innerHtml]=\"errors\"></div>\r\n            </ec-banner>\r\n\r\n            <ng-template #customErrorBannerOutlet>\r\n                <ec-banner *ngIf=\"errors\"\r\n                           id=\"pageViewErrors\"\r\n                           [class.border-bottom-0]=\"!isDialog\">\r\n                    <ng-container *ngTemplateOutlet=\"customErrorBannerTemplate\"></ng-container>\r\n                </ec-banner>\r\n            </ng-template>\r\n        </header>\r\n    </div>\r\n\r\n    <ec-button *ngIf=\"isDialog && (status?.status === 'pending' || status?.status === 'error')\"\r\n               id=\"pageViewDialogClose\"\r\n               type=\"icon\"\r\n               icon=\"icon-cancel\"\r\n               (clicked)=\"closeDialog()\">\r\n    </ec-button>\r\n</div>", styles: [":host{flex:1 1;min-height:0;display:flex}header{background-color:var(--ec-background-color-body);position:sticky;top:0;order:1;padding:1rem 1.5rem .5rem;flex:none;z-index:var(--ec-z-index-sticky-header)}ol{font-size:var(--ec-font-size-label);line-height:1rem;grid-column:1/3;grid-row:1/2;list-style:none;padding:0;margin:0 0 .25rem}ol li{display:inline}ol li:not(:last-child):after{content:\" / \";display:inline;color:var(--ec-color-secondary-dark)}div[ecOverlay]{position:relative}.titlebar{display:grid;grid-template-columns:auto max-content;grid-template-rows:max-content max-content;gap:0 1rem}.title{grid-column:1/2;grid-row:2/3;align-self:center}.actions{grid-column:2/3;grid-row:2/3;display:flex;flex-direction:row-reverse}ec-banner{margin-top:1rem}section{padding:var(--ec-page-view-padding-section, .5rem 1.5rem 2rem);order:2;flex:1 0 auto;min-height:0}footer{background-color:var(--ec-background-color-body);order:3;padding:0 1.5rem;height:4.5rem;flex:none;display:flex;align-items:center}.is-dialog header{padding:0}.is-dialog .titlebar{background-color:var(--ec-background-color);padding:1rem;border-bottom:1px solid var(--ec-border-color)}.is-dialog ec-banner{margin:0}.is-dialog section{padding:var(--ec-page-view-padding-section, 1rem 1rem 1.5rem)}.sticky-footer section{padding-bottom:4.5rem}.sticky-footer footer{position:sticky;bottom:0}.fit-content section{flex:1 1;display:flex}.footer-visible section{padding-bottom:0}.overlay-visible header{z-index:var(--ec-z-index-overlay)1}.overlay-visible ec-banner{display:none}:host(.bg-content) header{background-color:var(--ec-background-color)}:host(.bg-content) section{background-color:var(--ec-background-color)}:host(.bg-content) footer{background-color:var(--ec-background-color)}#pageViewDialogClose{position:absolute;top:1rem;right:1rem;z-index:calc(var(--ec-z-index-overlay) + 1)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: PageTitleComponent, selector: "app-page-title", inputs: ["title", "titleIcon", "subTitle", "subTitleUrl"] }] });
+PageViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: PageViewComponent, selector: "ec-page-view", inputs: { isDialog: "isDialog", readonly: "readonly", status: "status", showHeader: "showHeader", errors: "errors", breadcrumbs: "breadcrumbs", title: "title", titleIcon: "titleIcon", subTitle: "subTitle", subTitleUrl: "subTitleUrl", moreActionsLabel: "moreActionsLabel", moreActions: "moreActions", secondaryActionLabel: "secondaryActionLabel", hideSecondaryAction: "hideSecondaryAction", primaryActionLabel: "primaryActionLabel", hidePrimaryAction: "hidePrimaryAction", customTitleTemplate: "customTitleTemplate", customActionsTemplate: "customActionsTemplate", customHeaderTemplate: "customHeaderTemplate", footerTemplate: "footerTemplate", customErrorBannerTemplate: "customErrorBannerTemplate", stickyFooter: "stickyFooter", fitContent: "fitContent", bgContent: "bgContent" }, outputs: { onPrimaryAction: "onPrimaryAction", onSecondaryAction: "onSecondaryAction" }, host: { properties: { "class.bg-content": "this.bgContent" }, classAttribute: "flex-grow" }, ngImport: i0, template: "<div ecOverlay\r\n     [status]=\"status?.status\"\r\n     [message]=\"status?.message\"\r\n     [displayAsMask]=\"true\"\r\n     class=\"flex-grow d-flex\"\r\n     [ngClass]=\"{'bg-body': !bgContent, 'bg-content': bgContent}\">\r\n    <div id=\"PageViewScrollContainer\"\r\n         class=\"d-flex flex-column flex-grow scroll-y\"\r\n         [class.is-dialog]=\"isDialog\"\r\n         [class.fit-content]=\"fitContent\"\r\n         [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\r\n         [class.overlay-visible]=\"status?.status !== 'hasData'\"\r\n         [class.footer-visible]=\"!!footerTemplate\">\r\n        <section>\r\n            <ng-content></ng-content>\r\n        </section>\r\n\r\n        <footer *ngIf=\"footerTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        </footer>\r\n\r\n        <header *ngIf=\"showHeader\">\r\n            <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 class=\"titlebar\">\r\n                <app-page-title *ngIf=\"!customTitleTemplate; else customTitle\"\r\n                                [title]=\"title\"\r\n                                [subTitle]=\"subTitle\"\r\n                                [subTitleUrl]=\"subTitleUrl\"\r\n                                [titleIcon]=\"titleIcon\"\r\n                                class=\"title text-truncate\">\r\n                </app-page-title>\r\n\r\n                <ng-template #customTitle>\r\n                    <div class=\"title\">\r\n                        <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\r\n                    </div>\r\n                </ng-template>\r\n\r\n                <div class=\"actions\">\r\n                    <ec-button id=\"primaryAction\"\r\n                               class=\"ml-2\"\r\n                               *ngIf=\"!hidePrimaryAction && onPrimaryAction.observers?.length && !readonly\"\r\n                               [disabled]=\"status?.status === 'pending'\"\r\n                               type=\"primary\"\r\n                               [label]=\"primaryActionLabel\"\r\n                               (clicked)=\"primaryAction($event)\">\r\n                    </ec-button>\r\n                    <ec-button id=\"secondaryAction\"\r\n                               class=\"ml-2\"\r\n                               *ngIf=\"!hideSecondaryAction && onSecondaryAction.observers?.length\"\r\n                               type=\"secondary\"\r\n                               [label]=\"readonly ? 'Close' : secondaryActionLabel\"\r\n                               (clicked)=\"secondaryAction($event)\">\r\n                    </ec-button>\r\n                    <ec-dropdown id=\"moreActions\"\r\n                                 *ngIf=\"moreActions?.length && !readonly\"\r\n                                 [disabled]=\"status?.status === 'pending'\"\r\n                                 class=\"ml-2\"\r\n                                 buttonType=\"text\"\r\n                                 [label]=\"moreActionsLabel\"\r\n                                 [items]=\"moreActions\"\r\n                                 [popupFixed]=\"true\">\r\n                    </ec-dropdown>\r\n                    <ng-container *ngTemplateOutlet=\"customActionsTemplate\"></ng-container>\r\n                </div>\r\n            </div>\r\n\r\n            <div *ngIf=\"customHeaderTemplate\"\r\n                 class=\"page-header\">\r\n                <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ec-banner *ngIf=\"!customErrorBannerTemplate && errors; else customErrorBannerOutlet\"\r\n                       id=\"pageViewErrors\"\r\n                       [class.border-bottom-0]=\"!isDialog\">\r\n                <div [innerHtml]=\"errors\"></div>\r\n            </ec-banner>\r\n\r\n            <ng-template #customErrorBannerOutlet>\r\n                <ec-banner *ngIf=\"errors\"\r\n                           id=\"pageViewErrors\"\r\n                           [class.border-bottom-0]=\"!isDialog\">\r\n                    <ng-container *ngTemplateOutlet=\"customErrorBannerTemplate\"></ng-container>\r\n                </ec-banner>\r\n            </ng-template>\r\n        </header>\r\n    </div>\r\n\r\n    <ec-button *ngIf=\"isDialog && (status?.status === 'pending' || status?.status === 'error')\"\r\n               id=\"pageViewDialogClose\"\r\n               type=\"icon\"\r\n               icon=\"icon-cancel\"\r\n               (clicked)=\"closeDialog()\">\r\n    </ec-button>\r\n</div>", styles: [":host{flex:1 1;min-height:0;display:flex}header{background-color:var(--ec-background-color-body);position:sticky;top:0;order:1;padding:1rem 1.5rem .5rem;flex:none;z-index:var(--ec-z-index-sticky-header)}ol{font-size:var(--ec-font-size-label);line-height:1rem;grid-column:1/3;grid-row:1/2;list-style:none;padding:0;margin:0 0 .25rem}ol li{display:inline}ol li:not(:last-child):after{content:\" / \";display:inline;color:var(--ec-color-secondary-dark)}div[ecOverlay]{position:relative}.titlebar{display:grid;grid-template-columns:auto max-content;grid-template-rows:max-content max-content;gap:0 1rem}.title{grid-column:1/2;grid-row:2/3;align-self:center}.actions{grid-column:2/3;grid-row:2/3;display:flex;flex-direction:row-reverse}ec-banner{margin-top:1rem}section{padding:var(--ec-page-view-padding-section, .5rem 1.5rem 2rem);order:2;flex:1 0 auto;min-height:0}footer{background-color:var(--ec-background-color-body);order:3;padding:0 1.5rem;height:4.5rem;flex:none;display:flex;align-items:center}.is-dialog header{padding:0}.is-dialog .titlebar{background-color:var(--ec-background-color);padding:1rem;border-bottom:1px solid var(--ec-border-color)}.is-dialog ec-banner{margin:0}.is-dialog section{padding:var(--ec-page-view-padding-section, 1rem 1rem 1.5rem)}.sticky-footer section{padding-bottom:4.5rem}.sticky-footer footer{position:sticky;bottom:0}.fit-content section{flex:1 1;display:flex}.footer-visible section{padding-bottom:0}.overlay-visible header{z-index:var(--ec-z-index-overlay)1}.overlay-visible ec-banner{display:none}:host(.bg-content) header{background-color:var(--ec-background-color)}:host(.bg-content) section{background-color:var(--ec-background-color)}:host(.bg-content) footer{background-color:var(--ec-background-color)}#pageViewDialogClose{position:absolute;top:1rem;right:1rem;z-index:calc(var(--ec-z-index-overlay) + 1)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: PageTitleComponent, selector: "app-page-title", inputs: ["title", "titleIcon", "subTitle", "subTitleUrl"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PageViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ec-page-view', host: {
                         class: "flex-grow"
-                    }, template: "<div ecOverlay\r\n     [status]=\"status?.status\"\r\n     [message]=\"status?.message\"\r\n     [displayAsMask]=\"true\"\r\n     class=\"flex-grow d-flex\"\r\n     [ngClass]=\"{'bg-body': !bgContent, 'bg-content': bgContent}\">\r\n    <div id=\"PageViewScrollContainer\"\r\n         class=\"d-flex flex-column flex-grow scroll-y\"\r\n         [class.is-dialog]=\"isDialog\"\r\n         [class.fit-content]=\"fitContent\"\r\n         [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\r\n         [class.overlay-visible]=\"status?.status !== 'hasData'\"\r\n         [class.footer-visible]=\"!!footerTemplate\">\r\n        <section>\r\n            <ng-content></ng-content>\r\n        </section>\r\n\r\n        <footer *ngIf=\"footerTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        </footer>\r\n\r\n        <header *ngIf=\"showHeader\">\r\n            <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 class=\"titlebar\">\r\n                <app-page-title *ngIf=\"!customTitleTemplate; else customTitle\"\r\n                                [title]=\"title\"\r\n                                [subTitle]=\"subTitle\"\r\n                                [subTitleUrl]=\"subTitleUrl\"\r\n                                [titleIcon]=\"titleIcon\"\r\n                                class=\"title text-truncate\">\r\n                </app-page-title>\r\n\r\n                <ng-template #customTitle>\r\n                    <div class=\"title\">\r\n                        <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\r\n                    </div>\r\n                </ng-template>\r\n\r\n                <div class=\"actions\">\r\n                    <ec-button id=\"primaryAction\"\r\n                               class=\"ml-2\"\r\n                               *ngIf=\"!hidePrimaryAction && onPrimaryAction.observers?.length && !readonly\"\r\n                               [disabled]=\"status?.status === 'pending'\"\r\n                               type=\"primary\"\r\n                               [label]=\"primaryActionLabel\"\r\n                               (clicked)=\"primaryAction($event)\">\r\n                    </ec-button>\r\n                    <ec-button id=\"secondaryAction\"\r\n                               class=\"ml-2\"\r\n                               *ngIf=\"!hideSecondaryAction && onSecondaryAction.observers?.length\"\r\n                               type=\"secondary\"\r\n                               [label]=\"readonly ? 'Close' : secondaryActionLabel\"\r\n                               (clicked)=\"secondaryAction($event)\">\r\n                    </ec-button>\r\n                    <ec-dropdown id=\"moreActions\"\r\n                                 *ngIf=\"moreActions?.length && !readonly\"\r\n                                 [disabled]=\"status?.status === 'pending'\"\r\n                                 class=\"ml-2\"\r\n                                 buttonType=\"text\"\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            <div *ngIf=\"customHeaderTemplate\"\r\n                 class=\"page-header\">\r\n                <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ec-banner *ngIf=\"!customErrorBannerTemplate && errors; else customErrorBannerOutlet\"\r\n                       id=\"pageViewErrors\"\r\n                       [class.border-bottom-0]=\"!isDialog\">\r\n                <div [innerHtml]=\"errors\"></div>\r\n            </ec-banner>\r\n\r\n            <ng-template #customErrorBannerOutlet>\r\n                <ec-banner *ngIf=\"errors\"\r\n                           id=\"pageViewErrors\"\r\n                           [class.border-bottom-0]=\"!isDialog\">\r\n                    <ng-container *ngTemplateOutlet=\"customErrorBannerTemplate\"></ng-container>\r\n                </ec-banner>\r\n            </ng-template>\r\n        </header>\r\n    </div>\r\n\r\n    <ec-button *ngIf=\"isDialog && (status?.status === 'pending' || status?.status === 'error')\"\r\n               id=\"pageViewDialogClose\"\r\n               type=\"icon\"\r\n               icon=\"icon-cancel\"\r\n               (clicked)=\"closeDialog()\">\r\n    </ec-button>\r\n</div>", styles: [":host{flex:1 1;min-height:0;display:flex}header{background-color:var(--ec-background-color-body);position:sticky;top:0;order:1;padding:1rem 1.5rem .5rem;flex:none;z-index:var(--ec-z-index-sticky-header)}ol{font-size:var(--ec-font-size-label);line-height:1rem;grid-column:1/3;grid-row:1/2;list-style:none;padding:0;margin:0 0 .25rem}ol li{display:inline}ol li:not(:last-child):after{content:\" / \";display:inline;color:var(--ec-color-secondary-dark)}div[ecOverlay]{position:relative}.titlebar{display:grid;grid-template-columns:auto max-content;grid-template-rows:max-content max-content;gap:0 1rem}.title{grid-column:1/2;grid-row:2/3;align-self:center}.actions{grid-column:2/3;grid-row:2/3;display:flex;flex-direction:row-reverse}ec-banner{margin-top:1rem}section{padding:var(--ec-page-view-padding-section, .5rem 1.5rem 2rem);order:2;flex:1 0 auto;min-height:0}footer{background-color:var(--ec-background-color-body);order:3;padding:0 1.5rem;height:4.5rem;flex:none;display:flex;align-items:center}.is-dialog header{padding:0}.is-dialog .titlebar{background-color:var(--ec-background-color);padding:1rem;border-bottom:1px solid var(--ec-border-color)}.is-dialog ec-banner{margin:0}.is-dialog section{padding:var(--ec-page-view-padding-section, 1rem 1rem 1.5rem)}.sticky-footer section{padding-bottom:4.5rem}.sticky-footer footer{position:sticky;bottom:0}.fit-content section{flex:1 1;display:flex}.footer-visible section{padding-bottom:0}.overlay-visible header{z-index:var(--ec-z-index-overlay)1}.overlay-visible ec-banner{display:none}:host(.bg-content) header{background-color:var(--ec-background-color)}:host(.bg-content) section{background-color:var(--ec-background-color)}:host(.bg-content) footer{background-color:var(--ec-background-color)}#pageViewDialogClose{position:absolute;top:1rem;right:1rem;z-index:calc(var(--ec-z-index-overlay) + 1)}\n"] }]
+                    }, template: "<div ecOverlay\r\n     [status]=\"status?.status\"\r\n     [message]=\"status?.message\"\r\n     [displayAsMask]=\"true\"\r\n     class=\"flex-grow d-flex\"\r\n     [ngClass]=\"{'bg-body': !bgContent, 'bg-content': bgContent}\">\r\n    <div id=\"PageViewScrollContainer\"\r\n         class=\"d-flex flex-column flex-grow scroll-y\"\r\n         [class.is-dialog]=\"isDialog\"\r\n         [class.fit-content]=\"fitContent\"\r\n         [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\r\n         [class.overlay-visible]=\"status?.status !== 'hasData'\"\r\n         [class.footer-visible]=\"!!footerTemplate\">\r\n        <section>\r\n            <ng-content></ng-content>\r\n        </section>\r\n\r\n        <footer *ngIf=\"footerTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        </footer>\r\n\r\n        <header *ngIf=\"showHeader\">\r\n            <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 class=\"titlebar\">\r\n                <app-page-title *ngIf=\"!customTitleTemplate; else customTitle\"\r\n                                [title]=\"title\"\r\n                                [subTitle]=\"subTitle\"\r\n                                [subTitleUrl]=\"subTitleUrl\"\r\n                                [titleIcon]=\"titleIcon\"\r\n                                class=\"title text-truncate\">\r\n                </app-page-title>\r\n\r\n                <ng-template #customTitle>\r\n                    <div class=\"title\">\r\n                        <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\r\n                    </div>\r\n                </ng-template>\r\n\r\n                <div class=\"actions\">\r\n                    <ec-button id=\"primaryAction\"\r\n                               class=\"ml-2\"\r\n                               *ngIf=\"!hidePrimaryAction && onPrimaryAction.observers?.length && !readonly\"\r\n                               [disabled]=\"status?.status === 'pending'\"\r\n                               type=\"primary\"\r\n                               [label]=\"primaryActionLabel\"\r\n                               (clicked)=\"primaryAction($event)\">\r\n                    </ec-button>\r\n                    <ec-button id=\"secondaryAction\"\r\n                               class=\"ml-2\"\r\n                               *ngIf=\"!hideSecondaryAction && onSecondaryAction.observers?.length\"\r\n                               type=\"secondary\"\r\n                               [label]=\"readonly ? 'Close' : secondaryActionLabel\"\r\n                               (clicked)=\"secondaryAction($event)\">\r\n                    </ec-button>\r\n                    <ec-dropdown id=\"moreActions\"\r\n                                 *ngIf=\"moreActions?.length && !readonly\"\r\n                                 [disabled]=\"status?.status === 'pending'\"\r\n                                 class=\"ml-2\"\r\n                                 buttonType=\"text\"\r\n                                 [label]=\"moreActionsLabel\"\r\n                                 [items]=\"moreActions\"\r\n                                 [popupFixed]=\"true\">\r\n                    </ec-dropdown>\r\n                    <ng-container *ngTemplateOutlet=\"customActionsTemplate\"></ng-container>\r\n                </div>\r\n            </div>\r\n\r\n            <div *ngIf=\"customHeaderTemplate\"\r\n                 class=\"page-header\">\r\n                <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ec-banner *ngIf=\"!customErrorBannerTemplate && errors; else customErrorBannerOutlet\"\r\n                       id=\"pageViewErrors\"\r\n                       [class.border-bottom-0]=\"!isDialog\">\r\n                <div [innerHtml]=\"errors\"></div>\r\n            </ec-banner>\r\n\r\n            <ng-template #customErrorBannerOutlet>\r\n                <ec-banner *ngIf=\"errors\"\r\n                           id=\"pageViewErrors\"\r\n                           [class.border-bottom-0]=\"!isDialog\">\r\n                    <ng-container *ngTemplateOutlet=\"customErrorBannerTemplate\"></ng-container>\r\n                </ec-banner>\r\n            </ng-template>\r\n        </header>\r\n    </div>\r\n\r\n    <ec-button *ngIf=\"isDialog && (status?.status === 'pending' || status?.status === 'error')\"\r\n               id=\"pageViewDialogClose\"\r\n               type=\"icon\"\r\n               icon=\"icon-cancel\"\r\n               (clicked)=\"closeDialog()\">\r\n    </ec-button>\r\n</div>", styles: [":host{flex:1 1;min-height:0;display:flex}header{background-color:var(--ec-background-color-body);position:sticky;top:0;order:1;padding:1rem 1.5rem .5rem;flex:none;z-index:var(--ec-z-index-sticky-header)}ol{font-size:var(--ec-font-size-label);line-height:1rem;grid-column:1/3;grid-row:1/2;list-style:none;padding:0;margin:0 0 .25rem}ol li{display:inline}ol li:not(:last-child):after{content:\" / \";display:inline;color:var(--ec-color-secondary-dark)}div[ecOverlay]{position:relative}.titlebar{display:grid;grid-template-columns:auto max-content;grid-template-rows:max-content max-content;gap:0 1rem}.title{grid-column:1/2;grid-row:2/3;align-self:center}.actions{grid-column:2/3;grid-row:2/3;display:flex;flex-direction:row-reverse}ec-banner{margin-top:1rem}section{padding:var(--ec-page-view-padding-section, .5rem 1.5rem 2rem);order:2;flex:1 0 auto;min-height:0}footer{background-color:var(--ec-background-color-body);order:3;padding:0 1.5rem;height:4.5rem;flex:none;display:flex;align-items:center}.is-dialog header{padding:0}.is-dialog .titlebar{background-color:var(--ec-background-color);padding:1rem;border-bottom:1px solid var(--ec-border-color)}.is-dialog ec-banner{margin:0}.is-dialog section{padding:var(--ec-page-view-padding-section, 1rem 1rem 1.5rem)}.sticky-footer section{padding-bottom:4.5rem}.sticky-footer footer{position:sticky;bottom:0}.fit-content section{flex:1 1;display:flex}.footer-visible section{padding-bottom:0}.overlay-visible header{z-index:var(--ec-z-index-overlay)1}.overlay-visible ec-banner{display:none}:host(.bg-content) header{background-color:var(--ec-background-color)}:host(.bg-content) section{background-color:var(--ec-background-color)}:host(.bg-content) footer{background-color:var(--ec-background-color)}#pageViewDialogClose{position:absolute;top:1rem;right:1rem;z-index:calc(var(--ec-z-index-overlay) + 1)}\n"] }]
         }], ctorParameters: function () { return [{ type: DialogService }]; }, propDecorators: { isDialog: [{
                 type: Input
             }], readonly: [{