@proximus/lavender-modal 1.4.17-alpha.7 → 1.4.17-alpha.8
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 -1
- package/dist/index.es.js +21 -18
- package/package.json +1 -1
package/dist/Modal.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ import { type ButtonIcon } from '@proximus/lavender-button-icon';
|
|
|
8
8
|
import { type Icon } from '@proximus/lavender-icon';
|
|
9
9
|
export declare const statusValues: string[];
|
|
10
10
|
export declare class Modal extends HTMLElement {
|
|
11
|
+
protected static readonly template: HTMLTemplateElement;
|
|
11
12
|
private onOpenClick;
|
|
12
13
|
private onCloseClick;
|
|
13
14
|
private onDialogCancel;
|
|
@@ -15,7 +16,6 @@ export declare class Modal extends HTMLElement {
|
|
|
15
16
|
private opener;
|
|
16
17
|
private openerElement;
|
|
17
18
|
private closerElement;
|
|
18
|
-
template: string;
|
|
19
19
|
constructor();
|
|
20
20
|
connectedCallback(): void;
|
|
21
21
|
static get observedAttributes(): string[];
|
package/dist/index.es.js
CHANGED
|
@@ -4,19 +4,22 @@ import "@proximus/lavender-layout";
|
|
|
4
4
|
import "@proximus/lavender-icon";
|
|
5
5
|
import "@proximus/lavender-heading";
|
|
6
6
|
import "@proximus/lavender-paragraph";
|
|
7
|
-
import {
|
|
7
|
+
import { createTemplate as e, propertyToAttributeSetter as t, renderTemplate as n } from "@proximus/lavender-common";
|
|
8
8
|
//#region src/modal.css?inline
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
var
|
|
9
|
+
var r = "*{box-sizing:border-box}#container{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);flex-wrap:nowrap;display:flex;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;display:flex}#content-container px-vstack{flex-grow:1;max-height:100%}#media-container{display:none}::slotted(px-button-icon[slot=close-button]){top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile);position:absolute}dialog{box-shadow:none;box-sizing:border-box;max-width:calc(100% - (var(--px-spacing-s-mobile) * 2));max-height:calc(100% - (var(--px-spacing-s-mobile) * 2));background:0 0;border:0;border-radius:0;padding:0;animation:.3s ease-out forwards modalIn;transform:scale(.95)}dialog[open]{display:flex}::backdrop{-webkit-backdrop-filter:saturate(180%)blur(15px);backdrop-filter:saturate(180%)blur(15px);background:#0000004d}#content{max-height:12.5rem;overflow:auto}@media screen and (width>=48rem){dialog{max-width:calc(100% - (var(--px-spacing-s-tablet) * 2));max-height:calc(100% - (var(--px-spacing-s-tablet) * 2))}#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]){top:var(--px-padding-m-tablet);right:var(--px-padding-m-tablet);position:absolute}#content{max-height:25rem}}@media screen and (width>=64.0625rem){dialog{max-width:calc(100% - (var(--px-spacing-s-laptop) * 2));max-height:calc(100% - (var(--px-spacing-s-laptop) * 2))}#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{background-position:50%;background-repeat:no-repeat;background-size:cover;flex-shrink:0;flex-basis:25rem;display:block}}@media screen and (width>=69.875rem){#container{width:1080px}}@media screen and (width>=90.0625rem){dialog{max-width:calc(100% - (var(--px-spacing-s-desktop) * 2));max-height:calc(100% - (var(--px-spacing-s-desktop) * 2))}: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]){top:var(--px-padding-m-desktop);right:var(--px-padding-m-desktop);position:absolute}}@keyframes modalIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}", i = new CSSStyleSheet();
|
|
10
|
+
i.replaceSync(r);
|
|
11
|
+
var a = "px.lavender.modal.close", o = [
|
|
12
12
|
"",
|
|
13
13
|
"info",
|
|
14
14
|
"success",
|
|
15
15
|
"error",
|
|
16
16
|
"warning"
|
|
17
|
-
],
|
|
17
|
+
], s = class r extends HTMLElement {
|
|
18
|
+
static {
|
|
19
|
+
this.template = e("<dialog><div id=\"container\"><div id=\"content-container\"><px-vstack gap=\"default\" ><px-hstack id=\"icon-container\" gap=\"s\" align-items=\"flex-start\"><px-vstack gap=\"xs\"><px-h1 variant=\"title-l\"><slot name=\"title\"></slot></px-h1><px-p font-weight=\"title\"><slot name=\"description\"></slot></px-p></px-vstack></px-hstack><div id=\"content\"><slot name=\"content\"></slot><slot></slot></div><px-separator size=\"m\"></px-separator><px-stack\n gap=\"s\"\n justify-content=\"flex-end\"\n align-items=\"center\"\n align-items--mobile=\"stretch\"\n direction=\"row\"\n direction--mobile=\"column-reverse\"\n ><slot name=\"footer\"></slot></px-stack></px-vstack><slot name=\"close-button\"></slot></div><div id=\"media-container\"></div></div></dialog>");
|
|
20
|
+
}
|
|
18
21
|
constructor() {
|
|
19
|
-
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.
|
|
22
|
+
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.attachShadow({ mode: "open" }), n(this.shadowRoot, r.template), this.shadowRoot.adoptedStyleSheets = [i];
|
|
20
23
|
}
|
|
21
24
|
connectedCallback() {
|
|
22
25
|
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(), this.$slotDescription?.addEventListener("slotchange", this.toggleDescriptionVisibility), this.toggleCloseButtonSafeArea(), this.$slotCloseButton?.addEventListener("slotchange", this.toggleCloseButtonSafeArea);
|
|
@@ -66,7 +69,7 @@ var r = "px.lavender.modal.close", i = [
|
|
|
66
69
|
this.hasAttribute("open") ? this.show() : this.close();
|
|
67
70
|
}
|
|
68
71
|
handleStatusChange(e, t) {
|
|
69
|
-
if (
|
|
72
|
+
if (o.includes(t) ? this.$titleContainer.setAttribute("color", "neutral") : this.$titleContainer.hasAttribute("color") && this.$titleContainer.removeAttribute("color"), t === "info" ? this.$container.classList.add("info") : this.$container.classList.remove("info"), t === "success" ? this.$container.classList.add("success") : this.$container.classList.remove("success"), t === "error" ? this.$container.classList.add("error") : this.$container.classList.remove("error"), t === "warning" ? this.$container.classList.add("warning") : this.$container.classList.remove("warning"), t === null && this.$statusIcon) this.$statusIcon?.remove();
|
|
70
73
|
else if (e === null && t && !this.$statusIcon) {
|
|
71
74
|
let e = document.createElement("px-icon");
|
|
72
75
|
e.setAttribute("name", this.getIcon(t)), e.setAttribute("from", "lavender"), e.setAttribute("color", `purpose-${t}`), e.setAttribute("size", "l"), this.$iconContainer.prepend(e);
|
|
@@ -79,7 +82,7 @@ var r = "px.lavender.modal.close", i = [
|
|
|
79
82
|
this.$dialog.showModal(), document.body.style.overflow = "hidden";
|
|
80
83
|
}
|
|
81
84
|
close() {
|
|
82
|
-
this.$dialog.close(), document.body.style.overflow = "", this.dispatchEvent(new CustomEvent(
|
|
85
|
+
this.$dialog.close(), document.body.style.overflow = "", this.dispatchEvent(new CustomEvent(a, {
|
|
83
86
|
bubbles: !0,
|
|
84
87
|
composed: !0
|
|
85
88
|
}));
|
|
@@ -134,20 +137,20 @@ var r = "px.lavender.modal.close", i = [
|
|
|
134
137
|
get status() {
|
|
135
138
|
return this.getAttribute("status");
|
|
136
139
|
}
|
|
137
|
-
set status(
|
|
138
|
-
|
|
140
|
+
set status(e) {
|
|
141
|
+
t(this, "status", e);
|
|
139
142
|
}
|
|
140
143
|
get openedby() {
|
|
141
144
|
return this.getAttribute("openedby");
|
|
142
145
|
}
|
|
143
|
-
set openedby(
|
|
144
|
-
|
|
146
|
+
set openedby(e) {
|
|
147
|
+
t(this, "openedby", e);
|
|
145
148
|
}
|
|
146
149
|
get closedby() {
|
|
147
150
|
return this.getAttribute("closedby");
|
|
148
151
|
}
|
|
149
|
-
set closedby(
|
|
150
|
-
|
|
152
|
+
set closedby(e) {
|
|
153
|
+
t(this, "closedby", e);
|
|
151
154
|
}
|
|
152
155
|
get $closeButton() {
|
|
153
156
|
return this.shadowRoot.querySelector("px-button-icon");
|
|
@@ -161,8 +164,8 @@ var r = "px.lavender.modal.close", i = [
|
|
|
161
164
|
get mediaSrc() {
|
|
162
165
|
return this.getAttribute("media-src");
|
|
163
166
|
}
|
|
164
|
-
set mediaSrc(
|
|
165
|
-
|
|
167
|
+
set mediaSrc(e) {
|
|
168
|
+
t(this, "media-src", e);
|
|
166
169
|
}
|
|
167
170
|
get $container() {
|
|
168
171
|
return this.shadowRoot.querySelector("#container");
|
|
@@ -177,6 +180,6 @@ var r = "px.lavender.modal.close", i = [
|
|
|
177
180
|
return this.$dialog.open;
|
|
178
181
|
}
|
|
179
182
|
};
|
|
180
|
-
customElements.get("px-modal") || customElements.define("px-modal",
|
|
183
|
+
customElements.get("px-modal") || customElements.define("px-modal", s);
|
|
181
184
|
//#endregion
|
|
182
|
-
export {
|
|
185
|
+
export { s as Modal, o as statusValues };
|