import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
import { Overlay } from '../../../display/view-overlay/view-overlay.component';
import { DialogResult } from '../../../display/dialog/dialog-types';
import * as i0 from "@angular/core";
import * as i1 from "../../../display/dialog/dialog.service";
import * as i2 from "@angular/common";
import * as i3 from "@angular/router";
import * as i4 from "@angular/cdk/scrolling";
import * as i5 from "../../../controls/button/button.component";
import * as i6 from "../../../display/view-overlay/view-overlay.component";
import * as i7 from "../../../controls/banner/banner.component";
import * as i8 from "../../../controls/dropdown/dropdown.component";
import * as i9 from "../page-title/page-title.component";
export class PageViewComponent {
    constructor(dialogService) {
        this.dialogService = dialogService;
        /**
         * Set to true when page-view is inside a dialog to adjust styles and hide breadcrumbs.
         */
        this.isDialog = false;
        /**
         * Set to true to enable read only mode. Only a single secondary action will be available
         */
        this.readonly = false;
        /**
         * Controls Overlay that masks the page view content. Only the header is not masked when the overlay is visible. Default is pending Overlay with no message
         */
        this.status = new Overlay('pending');
        /**
         * Set to false to hide the entire header, including breadcrumbs and error banner. Default is true.
         */
        this.showHeader = true;
        /**
         * Label for the actions dropdown in the header. Default is 'Actions'
         */
        this.moreActionsLabel = 'Actions';
        /**
         * Label for the secondary button in the header. Default is 'Cancel'
         */
        this.secondaryActionLabel = 'Cancel';
        this.hideSecondaryAction = false;
        /** Flag for hiding the tiny close button in the top-right corner of dialog while in pending state only */
        this.hideCloseOnPending = false;
        /**
         * Label for the primary button in the header. Default is 'Save'
         */
        this.primaryActionLabel = 'Save';
        this.hidePrimaryAction = false;
        /**
         * Pins the footer to the bottom of the view and overlays any overflowing content
         */
        this.stickyFooter = true;
        /**
         * Prevents content from overflowing the view. Content must manage overflow instead.
         */
        this.fitContent = false;
        /**
         * Disables the primary action button
         */
        this.disablePrimaryAction = false;
        /** Changes the background color for the content and overlay to white */
        this.bgContent = false;
        this.onPrimaryAction = new EventEmitter();
        this.onSecondaryAction = new EventEmitter();
    }
    primaryAction(event) {
        if (this.onPrimaryAction) {
            this.onPrimaryAction.emit(event);
        }
    }
    secondaryAction(event) {
        if (this.onSecondaryAction) {
            this.onSecondaryAction.emit(event);
        }
    }
    closeDialog() {
        this.dialogService.closeLatestDialog(new DialogResult(false));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageViewComponent, deps: [{ token: i1.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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", hideCloseOnPending: "hideCloseOnPending", primaryActionLabel: "primaryActionLabel", hidePrimaryAction: "hidePrimaryAction", customTitleTemplate: "customTitleTemplate", customActionsTemplate: "customActionsTemplate", customHeaderTemplate: "customHeaderTemplate", footerTemplate: "footerTemplate", customErrorBannerTemplate: "customErrorBannerTemplate", stickyFooter: "stickyFooter", fitContent: "fitContent", disablePrimaryAction: "disablePrimaryAction", 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         cdkScrollable>\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' || disablePrimaryAction\"\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' && !hideCloseOnPending) || 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-page-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}:not(.is-dialog)>section{z-index: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}.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;z-index:var(--ec-z-index-sticky-page-header)}.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i5.ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: i6.ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: i7.BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: i8.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: i9.PageTitleComponent, selector: "app-page-title", inputs: ["title", "titleIcon", "subTitle", "subTitleUrl"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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         cdkScrollable>\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' || disablePrimaryAction\"\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' && !hideCloseOnPending) || 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-page-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}:not(.is-dialog)>section{z-index: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}.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;z-index:var(--ec-z-index-sticky-page-header)}.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: () => [{ type: i1.DialogService }], propDecorators: { isDialog: [{
                type: Input
            }], readonly: [{
                type: Input
            }], status: [{
                type: Input
            }], showHeader: [{
                type: Input
            }], errors: [{
                type: Input
            }], breadcrumbs: [{
                type: Input
            }], title: [{
                type: Input
            }], titleIcon: [{
                type: Input
            }], subTitle: [{
                type: Input
            }], subTitleUrl: [{
                type: Input
            }], moreActionsLabel: [{
                type: Input
            }], moreActions: [{
                type: Input
            }], secondaryActionLabel: [{
                type: Input
            }], hideSecondaryAction: [{
                type: Input
            }], hideCloseOnPending: [{
                type: Input
            }], primaryActionLabel: [{
                type: Input
            }], hidePrimaryAction: [{
                type: Input
            }], customTitleTemplate: [{
                type: Input
            }], customActionsTemplate: [{
                type: Input
            }], customHeaderTemplate: [{
                type: Input
            }], footerTemplate: [{
                type: Input
            }], customErrorBannerTemplate: [{
                type: Input
            }], stickyFooter: [{
                type: Input
            }], fitContent: [{
                type: Input
            }], disablePrimaryAction: [{
                type: Input
            }], bgContent: [{
                type: HostBinding,
                args: ['class.bg-content']
            }, {
                type: Input
            }], onPrimaryAction: [{
                type: Output
            }], onSecondaryAction: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 