@energycap/components 0.37.5-ECAP-19214-page-view-action-dropdown-z-index-fix.20230905-1633 → 0.37.6-ECAP-19366-ch-create-dialog.20230911-1603
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/display/dialog/dialog-types.mjs +1 -1
- package/esm2020/lib/display/dialog/dialog.component.mjs +36 -4
- package/esm2020/lib/shared/page/page-view/page-view.component.mjs +3 -3
- package/fesm2015/energycap-components.mjs +37 -5
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +37 -5
- package/fesm2020/energycap-components.mjs.map +1 -1
- package/lib/display/dialog/dialog-types.d.ts +6 -0
- package/lib/display/dialog/dialog.component.d.ts +12 -1
- package/package.json +1 -1
- package/src/styles/mixins/_dialog-base.scss +2 -1
|
@@ -5273,6 +5273,23 @@ class DialogComponent {
|
|
|
5273
5273
|
this.close(new DialogResult(false));
|
|
5274
5274
|
}
|
|
5275
5275
|
}
|
|
5276
|
+
/**
|
|
5277
|
+
* 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)
|
|
5278
|
+
*/
|
|
5279
|
+
set size(value) {
|
|
5280
|
+
this._size = value;
|
|
5281
|
+
// If the size is a string, set the dialog class. Otherwise, clear it.
|
|
5282
|
+
if (typeof value == 'string') {
|
|
5283
|
+
this.dialogSizeClass = `dialog-${value}`;
|
|
5284
|
+
}
|
|
5285
|
+
else {
|
|
5286
|
+
this.dialogSizeClass = undefined;
|
|
5287
|
+
}
|
|
5288
|
+
}
|
|
5289
|
+
;
|
|
5290
|
+
get size() {
|
|
5291
|
+
return this._size;
|
|
5292
|
+
}
|
|
5276
5293
|
constructor(componentFactoryResolver, windowService, dialogService, documentRef) {
|
|
5277
5294
|
this.componentFactoryResolver = componentFactoryResolver;
|
|
5278
5295
|
this.windowService = windowService;
|
|
@@ -5296,10 +5313,16 @@ class DialogComponent {
|
|
|
5296
5313
|
this.displayAsPanel = false;
|
|
5297
5314
|
this.alignToTop = false;
|
|
5298
5315
|
this.transparentMask = false;
|
|
5316
|
+
this.noMask = false;
|
|
5299
5317
|
/**
|
|
5300
5318
|
* 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)
|
|
5301
5319
|
*/
|
|
5302
|
-
this.
|
|
5320
|
+
this._size = 'small';
|
|
5321
|
+
/**
|
|
5322
|
+
* Bound to the host. The classes set the --ec-dialog-width variable to our default 'small', 'medium', etc. sizes.
|
|
5323
|
+
* Undefined when the size is a number, which is used for custom sizes.
|
|
5324
|
+
*/
|
|
5325
|
+
this.dialogSizeClass = `dialog-${this._size}`;
|
|
5303
5326
|
/**
|
|
5304
5327
|
* Emits an event when the dialog is opened
|
|
5305
5328
|
*/
|
|
@@ -5350,6 +5373,9 @@ class DialogComponent {
|
|
|
5350
5373
|
if (options.transparentMask !== undefined) {
|
|
5351
5374
|
this.transparentMask = options.transparentMask;
|
|
5352
5375
|
}
|
|
5376
|
+
if (options.noMask !== undefined) {
|
|
5377
|
+
this.noMask = options.noMask;
|
|
5378
|
+
}
|
|
5353
5379
|
if (options.canOpenDialog !== undefined) {
|
|
5354
5380
|
const canOpen = yield options.canOpenDialog();
|
|
5355
5381
|
if (!canOpen) {
|
|
@@ -5453,10 +5479,13 @@ class DialogComponent {
|
|
|
5453
5479
|
}
|
|
5454
5480
|
}
|
|
5455
5481
|
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 });
|
|
5456
|
-
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.
|
|
5482
|
+
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;max-height:75vh}: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"] }] });
|
|
5457
5483
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogComponent, decorators: [{
|
|
5458
5484
|
type: Component,
|
|
5459
|
-
args: [{ selector: 'ec-dialog', template: '<article [style.
|
|
5485
|
+
args: [{ selector: 'ec-dialog', template: '<article [style.min-width]="minWidth" cdkTrapFocus cdkTrapFocusAutoCapture><ng-template #content></ng-template></article>', host: {
|
|
5486
|
+
'[class]': 'dialogSizeClass',
|
|
5487
|
+
'[style.--ec-dialog-width.px]': 'width'
|
|
5488
|
+
}, 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;max-height:75vh}: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"] }]
|
|
5460
5489
|
}], ctorParameters: function () {
|
|
5461
5490
|
return [{ type: i0.ComponentFactoryResolver }, { type: WindowService }, { type: DialogService }, { type: Document, decorators: [{
|
|
5462
5491
|
type: Inject,
|
|
@@ -5480,6 +5509,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
5480
5509
|
}], transparentMask: [{
|
|
5481
5510
|
type: HostBinding,
|
|
5482
5511
|
args: ['class.is-transparent']
|
|
5512
|
+
}], noMask: [{
|
|
5513
|
+
type: HostBinding,
|
|
5514
|
+
args: ['class.no-mask']
|
|
5483
5515
|
}], onOverlayClick: [{
|
|
5484
5516
|
type: HostListener,
|
|
5485
5517
|
args: ['click', ['$event']]
|
|
@@ -8359,12 +8391,12 @@ class PageViewComponent {
|
|
|
8359
8391
|
}
|
|
8360
8392
|
}
|
|
8361
8393
|
PageViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PageViewComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8362
|
-
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"] }] });
|
|
8394
|
+
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"] }] });
|
|
8363
8395
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PageViewComponent, decorators: [{
|
|
8364
8396
|
type: Component,
|
|
8365
8397
|
args: [{ selector: 'ec-page-view', host: {
|
|
8366
8398
|
class: "flex-grow"
|
|
8367
|
-
}, 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\"
|
|
8399
|
+
}, 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"] }]
|
|
8368
8400
|
}], ctorParameters: function () { return [{ type: DialogService }]; }, propDecorators: { isDialog: [{
|
|
8369
8401
|
type: Input
|
|
8370
8402
|
}], readonly: [{
|