@proximus/lavender-modal 1.4.14-beta.3 → 1.4.14

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 CHANGED
@@ -36,23 +36,23 @@ export declare class Modal extends HTMLElement {
36
36
  toggleDescriptionVisibility(): void;
37
37
  toggleCloseButtonSafeArea(): void;
38
38
  get $slottedCloseButton(): HTMLSlotElement;
39
- get $slotCloseButton(): HTMLSlotElement | null;
39
+ get $slotCloseButton(): HTMLSlotElement;
40
40
  get $slottedDescription(): HTMLSlotElement;
41
- get $slotDescription(): HTMLSlotElement | null;
41
+ get $slotDescription(): HTMLSlotElement;
42
42
  get $descriptionContainer(): HTMLParagraphElement;
43
43
  get $titleContainer(): HTMLHeadingElement;
44
44
  get $opener(): HTMLButtonElement;
45
- get status(): string | null;
46
- set status(value: string | null);
47
- get openedby(): string | null;
48
- set openedby(value: string | null);
49
- get closedby(): string | null;
50
- set closedby(value: string | null);
45
+ get status(): string;
46
+ set status(value: string);
47
+ get openedby(): string;
48
+ set openedby(value: string);
49
+ get closedby(): string;
50
+ set closedby(value: string);
51
51
  get $closeButton(): ButtonIcon;
52
52
  get $statusIcon(): Icon;
53
53
  get $mediaContainer(): HTMLDivElement;
54
- get mediaSrc(): string | null;
55
- set mediaSrc(value: string | null);
54
+ get mediaSrc(): string;
55
+ set mediaSrc(value: string);
56
56
  get $container(): Element;
57
57
  get $iconContainer(): Element;
58
58
  get $dialog(): HTMLDialogElement;
package/dist/index.es.js CHANGED
@@ -4,179 +4,242 @@ import "@proximus/lavender-layout";
4
4
  import "@proximus/lavender-icon";
5
5
  import "@proximus/lavender-heading";
6
6
  import "@proximus/lavender-paragraph";
7
- import { propertyToAttributeSetter as e } from "@proximus/lavender-common";
8
- //#region src/modal.css?inline
9
- var t = "*{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)}}", n = new CSSStyleSheet();
10
- n.replaceSync(t);
11
- var r = "px.lavender.modal.close", i = [
12
- "",
13
- "info",
14
- "success",
15
- "error",
16
- "warning"
17
- ], a = class extends HTMLElement {
18
- 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.template = "<dialog>\n <div id=\"container\">\n <div id=\"content-container\">\n <px-vstack gap=\"default\" >\n <px-hstack id=\"icon-container\" gap=\"s\" align-items=\"flex-start\">\n <px-vstack gap=\"xs\">\n <px-h1 variant=\"title-l\">\n <slot name=\"title\"></slot>\n </px-h1>\n <px-p font-weight=\"title\">\n <slot name=\"description\"></slot>\n </px-p>\n </px-vstack>\n </px-hstack>\n <div id=\"content\">\n <slot name=\"content\"></slot>\n <slot></slot>\n </div>\n <px-separator size=\"m\"></px-separator>\n <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 >\n <slot name=\"footer\"></slot>\n </px-stack>\n </px-vstack>\n <slot name=\"close-button\"></slot>\n </div>\n <div id=\"media-container\">\n </div>\n </div>\n </dialog>", this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [n];
20
- }
21
- connectedCallback() {
22
- 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);
23
- }
24
- static get observedAttributes() {
25
- return [
26
- "open",
27
- "status",
28
- "media-src",
29
- "openedby",
30
- "closedby",
31
- "id"
32
- ];
33
- }
34
- attributeChangedCallback(e, t, n) {
35
- switch (e) {
36
- case "open":
37
- this.isConnected && this.handleOpenChange();
38
- break;
39
- case "status":
40
- this.handleStatusChange(t, n);
41
- break;
42
- case "media-src":
43
- this.updateMediaSrc(n);
44
- break;
45
- case "openedby":
46
- this.isConnected && this.addOpenListener();
47
- break;
48
- case "closedby":
49
- this.isConnected && this.addCloseListener(n);
50
- break;
51
- case "id": this.addEventListenersToCommandButtons();
52
- }
53
- }
54
- disconnectedCallback() {
55
- this.$dialog.removeEventListener("cancel", this.onDialogCancel), this.$slotDescription?.removeEventListener("slotchange", this.toggleDescriptionVisibility), this.$slotCloseButton?.removeEventListener("slotchange", this.toggleCloseButtonSafeArea), this.removeCommandButtonListeners(), this.removeOpenListener(), this.removeCloseListener();
56
- }
57
- addEventListenersToCommandButtons() {
58
- this.removeCommandButtonListeners(), this.id && document.querySelectorAll(`[commandfor="${this.id}"]`).forEach((e) => {
59
- e.getAttribute("command") === "show-modal" ? (e.addEventListener("click", this.onOpenClick), this.commandButtonCleanups.push(() => e.removeEventListener("click", this.onOpenClick))) : e.getAttribute("command") === "close" && (e.addEventListener("click", this.onCloseClick), this.commandButtonCleanups.push(() => e.removeEventListener("click", this.onCloseClick)));
60
- });
61
- }
62
- removeCommandButtonListeners() {
63
- this.commandButtonCleanups.forEach((e) => e()), this.commandButtonCleanups = [];
64
- }
65
- handleOpenChange() {
66
- this.hasAttribute("open") ? this.show() : this.close();
67
- }
68
- handleStatusChange(e, t) {
69
- if (i.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
- else if (e === null && t && !this.$statusIcon) {
71
- let e = document.createElement("px-icon");
72
- e.setAttribute("name", this.getIcon(t)), e.setAttribute("from", "lavender"), e.setAttribute("color", `purpose-${t}`), e.setAttribute("size", "l"), this.$iconContainer.prepend(e);
73
- } else this.$statusIcon?.setAttribute("name", this.getIcon(t)), this.$statusIcon?.setAttribute("color", `purpose-${t}`);
74
- }
75
- getIcon(e) {
76
- return e === "success" ? "checkmark_fill" : e === "warning" ? "exclamation_mark_fill" : e === "error" ? "minus_fill" : "information_fill";
77
- }
78
- show() {
79
- this.$dialog.showModal(), document.body.style.overflow = "hidden";
80
- }
81
- close() {
82
- this.$dialog.close(), document.body.style.overflow = "", this.dispatchEvent(new CustomEvent(r, {
83
- bubbles: !0,
84
- composed: !0
85
- }));
86
- }
87
- updateMediaSrc(e) {
88
- this.$mediaContainer.style.backgroundImage = `url(${e})`;
89
- }
90
- addOpenListener() {
91
- this.removeOpenListener(), this.$opener ? (this.openerElement = this.$opener, this.openerElement.addEventListener("click", this.onOpenClick)) : (this.opener?.disconnect(), this.opener = new MutationObserver(() => {
92
- this.$opener && (this.opener.disconnect(), this.opener = null, this.addOpenListener());
93
- }), this.opener.observe(document.body, {
94
- childList: !0,
95
- subtree: !0
96
- }));
97
- }
98
- removeOpenListener() {
99
- this.opener?.disconnect(), this.opener = null, this.openerElement?.removeEventListener("click", this.onOpenClick), this.openerElement = null;
100
- }
101
- addCloseListener(e) {
102
- e === "none" && this.$dialog?.setAttribute("closedby", "none"), this.removeCloseListener(), e && e !== "none" && (this.closerElement = document.querySelector(`#${e}`), this.closerElement?.addEventListener("click", this.onCloseClick));
103
- }
104
- removeCloseListener() {
105
- this.closerElement?.removeEventListener("click", this.onCloseClick), this.closerElement = null;
106
- }
107
- toggleDescriptionVisibility() {
108
- this.$slottedDescription ? this.$descriptionContainer.style.display = "block" : this.$descriptionContainer.style.display = "none";
109
- }
110
- toggleCloseButtonSafeArea() {
111
- this.$slottedCloseButton ? this.$container?.classList.add("has-close-button") : this.$container?.classList.contains("has-close-button") && this.$container?.classList.remove("has-close-button");
112
- }
113
- get $slottedCloseButton() {
114
- return this.querySelector("[slot=\"close-button\"]");
115
- }
116
- get $slotCloseButton() {
117
- return this.shadowRoot.querySelector("slot[name=\"close-button\"]");
118
- }
119
- get $slottedDescription() {
120
- return this.querySelector("[slot=\"description\"]");
121
- }
122
- get $slotDescription() {
123
- return this.shadowRoot.querySelector("slot[name=\"description\"]");
124
- }
125
- get $descriptionContainer() {
126
- return this.shadowRoot.querySelector("px-p[font-weight=\"title\"]");
127
- }
128
- get $titleContainer() {
129
- return this.shadowRoot.querySelector("px-h1");
130
- }
131
- get $opener() {
132
- return document.querySelector(`px-button#${this.getAttribute("openedby")}`);
133
- }
134
- get status() {
135
- return this.getAttribute("status");
136
- }
137
- set status(t) {
138
- e(this, "status", t);
139
- }
140
- get openedby() {
141
- return this.getAttribute("openedby");
142
- }
143
- set openedby(t) {
144
- e(this, "openedby", t);
145
- }
146
- get closedby() {
147
- return this.getAttribute("closedby");
148
- }
149
- set closedby(t) {
150
- e(this, "closedby", t);
151
- }
152
- get $closeButton() {
153
- return this.shadowRoot.querySelector("px-button-icon");
154
- }
155
- get $statusIcon() {
156
- return this.$iconContainer.querySelector("#icon-container > px-icon");
157
- }
158
- get $mediaContainer() {
159
- return this.shadowRoot.querySelector("#media-container");
160
- }
161
- get mediaSrc() {
162
- return this.getAttribute("media-src");
163
- }
164
- set mediaSrc(t) {
165
- e(this, "media-src", t);
166
- }
167
- get $container() {
168
- return this.shadowRoot.querySelector("#container");
169
- }
170
- get $iconContainer() {
171
- return this.shadowRoot.querySelector("#icon-container");
172
- }
173
- get $dialog() {
174
- return this.shadowRoot.querySelector("dialog");
175
- }
176
- get open() {
177
- return this.$dialog.open;
178
- }
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{display:flex;padding:var(--px-padding-m-mobile);flex-grow:1}#content-container px-vstack{max-height:100%;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;max-width:calc(100% - (var(--px-spacing-s-mobile) * 2));max-height:calc(100% - (var(--px-spacing-s-mobile) * 2))}dialog[open]{display:flex}::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){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"]){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){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{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){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"]){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
+ r.replaceSync(a);
9
+ const l = "px.lavender.modal.close", c = ["", "info", "success", "error", "warning"];
10
+ class d extends HTMLElement {
11
+ constructor() {
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
+ <div id="container">
14
+ <div id="content-container">
15
+ <px-vstack gap="default" >
16
+ <px-hstack id="icon-container" gap="s" align-items="flex-start">
17
+ <px-vstack gap="xs">
18
+ <px-h1 variant="title-l">
19
+ <slot name="title"></slot>
20
+ </px-h1>
21
+ <px-p font-weight="title">
22
+ <slot name="description"></slot>
23
+ </px-p>
24
+ </px-vstack>
25
+ </px-hstack>
26
+ <div id="content">
27
+ <slot name="content"></slot>
28
+ <slot></slot>
29
+ </div>
30
+ <px-separator size="m"></px-separator>
31
+ <px-stack
32
+ gap="s"
33
+ justify-content="flex-end"
34
+ align-items="center"
35
+ align-items--mobile="stretch"
36
+ direction="row"
37
+ direction--mobile="column-reverse"
38
+ >
39
+ <slot name="footer"></slot>
40
+ </px-stack>
41
+ </px-vstack>
42
+ <slot name="close-button"></slot>
43
+ </div>
44
+ <div id="media-container">
45
+ </div>
46
+ </div>
47
+ </dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [r];
48
+ }
49
+ connectedCallback() {
50
+ var t, e;
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
+ "slotchange",
53
+ this.toggleDescriptionVisibility
54
+ ), this.toggleCloseButtonSafeArea(), (e = this.$slotCloseButton) == null || e.addEventListener(
55
+ "slotchange",
56
+ this.toggleCloseButtonSafeArea
57
+ );
58
+ }
59
+ static get observedAttributes() {
60
+ return ["open", "status", "media-src", "openedby", "closedby", "id"];
61
+ }
62
+ attributeChangedCallback(t, e, o) {
63
+ switch (t) {
64
+ case "open":
65
+ this.isConnected && this.handleOpenChange();
66
+ break;
67
+ case "status":
68
+ this.handleStatusChange(e, o);
69
+ break;
70
+ case "media-src":
71
+ this.updateMediaSrc(o);
72
+ break;
73
+ case "openedby":
74
+ this.isConnected && this.addOpenListener();
75
+ break;
76
+ case "closedby":
77
+ this.isConnected && this.addCloseListener(o);
78
+ break;
79
+ case "id":
80
+ this.addEventListenersToCommandButtons();
81
+ break;
82
+ }
83
+ }
84
+ disconnectedCallback() {
85
+ var t, e;
86
+ this.$dialog.removeEventListener("cancel", this.onDialogCancel), (t = this.$slotDescription) == null || t.removeEventListener(
87
+ "slotchange",
88
+ this.toggleDescriptionVisibility
89
+ ), (e = this.$slotCloseButton) == null || e.removeEventListener(
90
+ "slotchange",
91
+ this.toggleCloseButtonSafeArea
92
+ ), this.removeCommandButtonListeners(), this.removeOpenListener(), this.removeCloseListener();
93
+ }
94
+ addEventListenersToCommandButtons() {
95
+ this.removeCommandButtonListeners(), this.id && document.querySelectorAll(`[commandfor="${this.id}"]`).forEach((t) => {
96
+ t.getAttribute("command") === "show-modal" ? (t.addEventListener("click", this.onOpenClick), this.commandButtonCleanups.push(
97
+ () => t.removeEventListener("click", this.onOpenClick)
98
+ )) : t.getAttribute("command") === "close" && (t.addEventListener("click", this.onCloseClick), this.commandButtonCleanups.push(
99
+ () => t.removeEventListener("click", this.onCloseClick)
100
+ ));
101
+ });
102
+ }
103
+ removeCommandButtonListeners() {
104
+ this.commandButtonCleanups.forEach((t) => t()), this.commandButtonCleanups = [];
105
+ }
106
+ handleOpenChange() {
107
+ this.hasAttribute("open") ? this.show() : this.close();
108
+ }
109
+ handleStatusChange(t, e) {
110
+ var o, s, n;
111
+ if (c.includes(e) ? this.$titleContainer.setAttribute("color", "neutral") : this.$titleContainer.hasAttribute("color") && this.$titleContainer.removeAttribute("color"), e === "info" ? this.$container.classList.add("info") : this.$container.classList.remove("info"), e === "success" ? this.$container.classList.add("success") : this.$container.classList.remove("success"), e === "error" ? this.$container.classList.add("error") : this.$container.classList.remove("error"), e === "warning" ? this.$container.classList.add("warning") : this.$container.classList.remove("warning"), e === null && this.$statusIcon)
112
+ (o = this.$statusIcon) == null || o.remove();
113
+ else if (t === null && e && !this.$statusIcon) {
114
+ const i = document.createElement("px-icon");
115
+ i.setAttribute("name", this.getIcon(e)), i.setAttribute("from", "lavender"), i.setAttribute("color", `purpose-${e}`), i.setAttribute("size", "l"), this.$iconContainer.prepend(i);
116
+ } else
117
+ (s = this.$statusIcon) == null || s.setAttribute("name", this.getIcon(e)), (n = this.$statusIcon) == null || n.setAttribute("color", `purpose-${e}`);
118
+ }
119
+ getIcon(t) {
120
+ return t === "success" ? "checkmark_fill" : t === "warning" ? "exclamation_mark_fill" : t === "error" ? "minus_fill" : "information_fill";
121
+ }
122
+ show() {
123
+ this.$dialog.showModal(), document.body.style.overflow = "hidden";
124
+ }
125
+ close() {
126
+ this.$dialog.close(), document.body.style.overflow = "", this.dispatchEvent(
127
+ new CustomEvent(l, {
128
+ bubbles: !0,
129
+ composed: !0
130
+ })
131
+ );
132
+ }
133
+ updateMediaSrc(t) {
134
+ this.$mediaContainer.style.backgroundImage = `url(${t})`;
135
+ }
136
+ addOpenListener() {
137
+ var t;
138
+ this.removeOpenListener(), this.$opener ? (this.openerElement = this.$opener, this.openerElement.addEventListener("click", this.onOpenClick)) : ((t = this.opener) == null || t.disconnect(), this.opener = new MutationObserver(() => {
139
+ this.$opener && (this.opener.disconnect(), this.opener = null, this.addOpenListener());
140
+ }), this.opener.observe(document.body, {
141
+ childList: !0,
142
+ subtree: !0
143
+ }));
144
+ }
145
+ removeOpenListener() {
146
+ var t, e;
147
+ (t = this.opener) == null || t.disconnect(), this.opener = null, (e = this.openerElement) == null || e.removeEventListener("click", this.onOpenClick), this.openerElement = null;
148
+ }
149
+ addCloseListener(t) {
150
+ var e, o;
151
+ t === "none" && ((e = this.$dialog) == null || e.setAttribute("closedby", "none")), this.removeCloseListener(), t && t !== "none" && (this.closerElement = document.querySelector(`#${t}`), (o = this.closerElement) == null || o.addEventListener("click", this.onCloseClick));
152
+ }
153
+ removeCloseListener() {
154
+ var t;
155
+ (t = this.closerElement) == null || t.removeEventListener("click", this.onCloseClick), this.closerElement = null;
156
+ }
157
+ toggleDescriptionVisibility() {
158
+ this.$slottedDescription ? this.$descriptionContainer.style.display = "block" : this.$descriptionContainer.style.display = "none";
159
+ }
160
+ toggleCloseButtonSafeArea() {
161
+ var t, e, o;
162
+ this.$slottedCloseButton ? (t = this.$container) == null || t.classList.add("has-close-button") : (e = this.$container) != null && e.classList.contains("has-close-button") && ((o = this.$container) == null || o.classList.remove("has-close-button"));
163
+ }
164
+ get $slottedCloseButton() {
165
+ return this.querySelector('[slot="close-button"]');
166
+ }
167
+ get $slotCloseButton() {
168
+ return this.shadowRoot.querySelector(
169
+ 'slot[name="close-button"]'
170
+ );
171
+ }
172
+ get $slottedDescription() {
173
+ return this.querySelector('[slot="description"]');
174
+ }
175
+ get $slotDescription() {
176
+ return this.shadowRoot.querySelector(
177
+ 'slot[name="description"]'
178
+ );
179
+ }
180
+ get $descriptionContainer() {
181
+ return this.shadowRoot.querySelector(
182
+ 'px-p[font-weight="title"]'
183
+ );
184
+ }
185
+ get $titleContainer() {
186
+ return this.shadowRoot.querySelector("px-h1");
187
+ }
188
+ get $opener() {
189
+ return document.querySelector(
190
+ `px-button#${this.getAttribute("openedby")}`
191
+ );
192
+ }
193
+ get status() {
194
+ return this.getAttribute("status");
195
+ }
196
+ set status(t) {
197
+ this.setAttribute("status", t);
198
+ }
199
+ get openedby() {
200
+ return this.getAttribute("openedby");
201
+ }
202
+ set openedby(t) {
203
+ this.setAttribute("openedby", t);
204
+ }
205
+ get closedby() {
206
+ return this.getAttribute("closedby");
207
+ }
208
+ set closedby(t) {
209
+ this.setAttribute("closedby", t);
210
+ }
211
+ get $closeButton() {
212
+ return this.shadowRoot.querySelector("px-button-icon");
213
+ }
214
+ get $statusIcon() {
215
+ return this.$iconContainer.querySelector(
216
+ "#icon-container > px-icon"
217
+ );
218
+ }
219
+ get $mediaContainer() {
220
+ return this.shadowRoot.querySelector("#media-container");
221
+ }
222
+ get mediaSrc() {
223
+ return this.getAttribute("media-src");
224
+ }
225
+ set mediaSrc(t) {
226
+ t === null ? this.removeAttribute("media-src") : this.setAttribute("media-src", t);
227
+ }
228
+ get $container() {
229
+ return this.shadowRoot.querySelector("#container");
230
+ }
231
+ get $iconContainer() {
232
+ return this.shadowRoot.querySelector("#icon-container");
233
+ }
234
+ get $dialog() {
235
+ return this.shadowRoot.querySelector("dialog");
236
+ }
237
+ get open() {
238
+ return this.$dialog.open;
239
+ }
240
+ }
241
+ customElements.get("px-modal") || customElements.define("px-modal", d);
242
+ export {
243
+ d as Modal,
244
+ c as statusValues
179
245
  };
180
- customElements.get("px-modal") || customElements.define("px-modal", a);
181
- //#endregion
182
- export { a as Modal, i as statusValues };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-modal",
3
- "version": "1.4.14-beta.3",
3
+ "version": "1.4.14",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",