@proximus/lavender-modal 1.4.9-beta.1 → 1.4.10-alpha.10
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/dist/Modal.d.ts +1 -0
- package/dist/index.es.js +4 -4
- package/package.json +1 -1
package/dist/Modal.d.ts
CHANGED
package/dist/index.es.js
CHANGED
|
@@ -4,12 +4,12 @@ import "@proximus/lavender-layout";
|
|
|
4
4
|
import "@proximus/lavender-icon";
|
|
5
5
|
import "@proximus/lavender-heading";
|
|
6
6
|
import "@proximus/lavender-paragraph";
|
|
7
|
-
const a = '*{box-sizing:border-box}#container{display:flex;flex-wrap:nowrap;font-family:var(--px-font-family);font-size:var(--px-font-size-base);color:var(--px-color-text-neutral-default);width:inherit;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default);overflow:hidden}#container.info{border-left:5px var(--px-color-icon-brand-default) solid}#container.success{border-left:5px var(--px-color-icon-purpose-success-default) solid}#container.warning{border-left:5px var(--px-color-icon-purpose-warning-default) solid}#container.error{border-left:5px var(--px-color-icon-purpose-error-default) solid}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-mobile)))}#content-container{padding:var(--px-padding-m-mobile);flex-grow:1}#media-container{display:none}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;transform:scale(.95);animation:modalIn .3s ease-out forwards}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{max-height:12.
|
|
7
|
+
const a = '*{box-sizing:border-box}#container{display:flex;flex-wrap:nowrap;font-family:var(--px-font-family);font-size:var(--px-font-size-base);color:var(--px-color-text-neutral-default);width:inherit;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default);overflow:hidden}#container.info{border-left:5px var(--px-color-icon-brand-default) solid}#container.success{border-left:5px var(--px-color-icon-purpose-success-default) solid}#container.warning{border-left:5px var(--px-color-icon-purpose-warning-default) solid}#container.error{border-left:5px var(--px-color-icon-purpose-error-default) solid}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-mobile)))}#content-container{padding:var(--px-padding-m-mobile);flex-grow:1}#media-container{display:none}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;transform:scale(.95);animation:modalIn .3s ease-out forwards}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{max-height:12.5rem;overflow:auto}@media screen and (min-width: 48rem){#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-tablet)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-tablet);right:var(--px-padding-m-tablet)}#content{max-height:25rem}}@media screen and (min-width: 64.0625rem){#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-laptop)))}::slotted(px-button-icon[slot="close-button"]){top:var(--px-padding-m-laptop);right:var(--px-padding-m-laptop)}:host([media-src]) #container.has-close-button #icon-container{max-width:100%}:host([media-src]) #media-container{display:block;background-size:cover;background-position:center center;background-repeat:no-repeat;flex-basis:25rem;flex-shrink:0}}@media screen and (min-width: 69.875rem){#container{width:1080px}}@media screen and (min-width: 90.0625rem){:host(:not([media-src])) #container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-desktop)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-desktop);right:var(--px-padding-m-desktop)}}@keyframes modalIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}', r = new CSSStyleSheet();
|
|
8
8
|
r.replaceSync(a);
|
|
9
9
|
const l = "px.lavender.modal.close", c = ["", "info", "success", "error", "warning"];
|
|
10
10
|
class d extends HTMLElement {
|
|
11
11
|
constructor() {
|
|
12
|
-
super(), this.onOpenClick = () => this.show(), this.onCloseClick = () => this.close(), this.commandButtonCleanups = [], this.opener = null, this.openerElement = null, this.closerElement = null, this.template = `<dialog>
|
|
12
|
+
super(), this.onOpenClick = () => this.show(), this.onCloseClick = () => this.close(), this.onDialogCancel = () => this.close(), this.commandButtonCleanups = [], this.opener = null, this.openerElement = null, this.closerElement = null, this.template = `<dialog>
|
|
13
13
|
<div id="container">
|
|
14
14
|
<div id="content-container">
|
|
15
15
|
<px-vstack gap="default" >
|
|
@@ -48,7 +48,7 @@ class d extends HTMLElement {
|
|
|
48
48
|
}
|
|
49
49
|
connectedCallback() {
|
|
50
50
|
var t, e;
|
|
51
|
-
this.addEventListenersToCommandButtons(), this.toggleDescriptionVisibility = this.toggleDescriptionVisibility.bind(this), this.toggleCloseButtonSafeArea = this.toggleCloseButtonSafeArea.bind(this), this.hasAttribute("open") && this.show(), this.hasAttribute("openedby") && this.addOpenListener(), this.hasAttribute("closedby") && this.addCloseListener(this.getAttribute("closedby")), this.toggleDescriptionVisibility(), (t = this.$slotDescription) == null || t.addEventListener(
|
|
51
|
+
this.$dialog.addEventListener("cancel", this.onDialogCancel), this.addEventListenersToCommandButtons(), this.toggleDescriptionVisibility = this.toggleDescriptionVisibility.bind(this), this.toggleCloseButtonSafeArea = this.toggleCloseButtonSafeArea.bind(this), this.hasAttribute("open") && this.show(), this.hasAttribute("openedby") && this.addOpenListener(), this.hasAttribute("closedby") && this.addCloseListener(this.getAttribute("closedby")), this.toggleDescriptionVisibility(), (t = this.$slotDescription) == null || t.addEventListener(
|
|
52
52
|
"slotchange",
|
|
53
53
|
this.toggleDescriptionVisibility
|
|
54
54
|
), this.toggleCloseButtonSafeArea(), (e = this.$slotCloseButton) == null || e.addEventListener(
|
|
@@ -83,7 +83,7 @@ class d extends HTMLElement {
|
|
|
83
83
|
}
|
|
84
84
|
disconnectedCallback() {
|
|
85
85
|
var t, e;
|
|
86
|
-
(t = this.$slotDescription) == null || t.removeEventListener(
|
|
86
|
+
this.$dialog.removeEventListener("cancel", this.onDialogCancel), (t = this.$slotDescription) == null || t.removeEventListener(
|
|
87
87
|
"slotchange",
|
|
88
88
|
this.toggleDescriptionVisibility
|
|
89
89
|
), (e = this.$slotCloseButton) == null || e.removeEventListener(
|