@energycap/components 0.30.3 → 0.30.4
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/bundles/energycap-components.umd.js +8 -2
- package/bundles/energycap-components.umd.js.map +1 -1
- package/bundles/energycap-components.umd.min.js +1 -1
- package/bundles/energycap-components.umd.min.js.map +1 -1
- package/energycap-components.metadata.json +1 -1
- package/energycap-components.min.css +1 -1
- package/esm2015/lib/display/dialog/dialog-group/dialog-group.component.js +1 -1
- package/esm2015/lib/display/dialog/dialog-types.js +1 -1
- package/esm2015/lib/display/dialog/dialog.component.js +8 -2
- package/fesm2015/energycap-components.js +8 -2
- package/fesm2015/energycap-components.js.map +1 -1
- package/lib/display/dialog/dialog-types.d.ts +2 -0
- package/lib/display/dialog/dialog.component.d.ts +1 -0
- package/package.json +1 -1
- package/src/styles/_global-variables.scss +1 -0
- package/src/styles/mixins/_dialog-base.scss +2 -4
|
@@ -5434,7 +5434,7 @@
|
|
|
5434
5434
|
{ type: i0.Component, args: [{
|
|
5435
5435
|
selector: 'ec-dialog-group',
|
|
5436
5436
|
template: "<ec-dialog *ngFor=\"let dialog of activeDialogEvents\"\r\n [dialogOpenStartEventId]=\"dialog.eventId\"\r\n [size]=\"dialog.options?.size\"\r\n [content]=\"dialog.content\"\r\n [context]=\"dialog.context\"\r\n [options]=\"dialog.options\"\r\n (opened)=\"dialogOpened(dialog, $event)\"\r\n (closed)=\"dialogClosed(dialog)\">\r\n</ec-dialog>",
|
|
5437
|
-
styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}ec-dialog:not(:only-child){background-color:transparent}ec-dialog:not(:only-child):last-child,ec-dialog:not(:only-child):nth-last-child(2){background-color:
|
|
5437
|
+
styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}ec-dialog:not(:only-child){--ec-dialog-background-color:transparent}ec-dialog:not(:only-child):last-child,ec-dialog:not(:only-child):nth-last-child(2){--ec-dialog-background-color:var(--ec-background-color-dialog-stacked)}"]
|
|
5438
5438
|
},] }
|
|
5439
5439
|
];
|
|
5440
5440
|
DialogGroupComponent.ctorParameters = function () { return [
|
|
@@ -5469,6 +5469,7 @@
|
|
|
5469
5469
|
this.fadeOut = false;
|
|
5470
5470
|
this.displayAsPanel = false;
|
|
5471
5471
|
this.alignToTop = false;
|
|
5472
|
+
this.transparentMask = false;
|
|
5472
5473
|
/**
|
|
5473
5474
|
* 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)
|
|
5474
5475
|
*/
|
|
@@ -5525,6 +5526,10 @@
|
|
|
5525
5526
|
}
|
|
5526
5527
|
if (options.displayAsPanel) {
|
|
5527
5528
|
this.displayAsPanel = true;
|
|
5529
|
+
this.transparentMask = true;
|
|
5530
|
+
}
|
|
5531
|
+
if (options.transparentMask !== undefined) {
|
|
5532
|
+
this.transparentMask = options.transparentMask;
|
|
5528
5533
|
}
|
|
5529
5534
|
if (!(options.canOpenDialog !== undefined)) return [3 /*break*/, 2];
|
|
5530
5535
|
return [4 /*yield*/, options.canOpenDialog()];
|
|
@@ -5645,7 +5650,7 @@
|
|
|
5645
5650
|
{ type: i0.Component, args: [{
|
|
5646
5651
|
selector: 'ec-dialog',
|
|
5647
5652
|
template: '<article [style.width.px]="width" [style.min-width]="minWidth" class="dialog-{{size}}" cdkTrapFocus cdkTrapFocusAutoCapture><ng-template #content></ng-template></article>',
|
|
5648
|
-
styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes slideIn{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideIn{0%{transform:translateX(100%)}to{transform:translateX(0)}}:host{align-items:center;background-color:var(--ec-background-color
|
|
5653
|
+
styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes slideIn{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideIn{0%{transform:translateX(100%)}to{transform:translateX(0)}}@-webkit-keyframes panelMaskFadeIn{0%{background-color:transparent}to{background-color:var(--ec-dialog-background-color)}}@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);bottom:0;display:none;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:var(--ec-z-index-dialog)}:host.is-open{display:flex}:host.fade-in{-webkit-animation-duration:125ms;-webkit-animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in-out;animation-duration:125ms;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.fade-in,:host.fade-out{-webkit-animation-name:fadeIn;animation-name:fadeIn}:host.fade-out{-webkit-animation-duration:.1s;-webkit-animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in-out;animation-direction:reverse;animation-duration:.1s;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.is-panel article{border-bottom:0;border-radius:0;border-right:0;border-top:0;bottom:0;box-shadow:0 0 .5rem var(--ec-color-shadow);max-height:none;position:absolute;right:0;top:0}:host.is-panel.fade-in{-webkit-animation-fill-mode:forwards;-webkit-animation-name:panelMaskFadeIn;animation-fill-mode:forwards;animation-name:panelMaskFadeIn}:host.is-panel.fade-in,:host.is-panel.fade-in article{-webkit-animation-duration:.25s;animation-duration:.25s}:host.is-panel.fade-in article{-webkit-animation-fill-mode:forwards;-webkit-animation-name:slideIn;-webkit-animation-timing-function:ease-out;animation-fill-mode:forwards;animation-name:slideIn;animation-timing-function:ease-out}:host.is-panel.fade-out{-webkit-animation-fill-mode:forwards;-webkit-animation-name:panelMaskFadeIn;animation-direction:reverse;animation-fill-mode:forwards;animation-name:panelMaskFadeIn}:host.is-panel.fade-out article{-webkit-animation-duration:225ms;-webkit-animation-fill-mode:forwards;-webkit-animation-name:slideIn;-webkit-animation-timing-function:ease-in;animation-direction:reverse;animation-duration:225ms;animation-fill-mode:forwards;animation-name:slideIn;animation-timing-function:ease-in}:host.is-top-aligned{align-items:flex-start}:host.is-top-aligned article{margin-top:20vh;min-height:auto}:host.is-transparent{--ec-dialog-background-color:transparent}article{background-clip:padding-box;background-color:var(--ec-background-color-body);border-radius:var(--ec-border-radius-dialog);box-shadow:0 0 .625rem rgba(26,26,35,.2);display:flex;flex:none;max-height:90vh;max-width:90vw;min-height:9rem;overflow:hidden}.dialog-xsmall{width:20rem}.dialog-small{width:30rem}.dialog-medium{width:40rem}.dialog-large{width:50rem}.dialog-xlarge{width:60rem}.dialog-full{width:90vw}"]
|
|
5649
5654
|
},] }
|
|
5650
5655
|
];
|
|
5651
5656
|
DialogComponent.ctorParameters = function () { return [
|
|
@@ -5660,6 +5665,7 @@
|
|
|
5660
5665
|
fadeOut: [{ type: i0.HostBinding, args: ['class.fade-out',] }],
|
|
5661
5666
|
displayAsPanel: [{ type: i0.HostBinding, args: ['class.is-panel',] }],
|
|
5662
5667
|
alignToTop: [{ type: i0.HostBinding, args: ['class.is-top-aligned',] }],
|
|
5668
|
+
transparentMask: [{ type: i0.HostBinding, args: ['class.is-transparent',] }],
|
|
5663
5669
|
onOverlayClick: [{ type: i0.HostListener, args: ['click', ['$event'],] }],
|
|
5664
5670
|
size: [{ type: i0.Input }],
|
|
5665
5671
|
content: [{ type: i0.Input }],
|