@proximus/lavender-modal 2.0.0-alpha.6 → 2.0.0-alpha.60

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.
Files changed (3) hide show
  1. package/dist/Modal.d.ts +36 -2
  2. package/dist/index.es.js +180 -63
  3. package/package.json +1 -1
package/dist/Modal.d.ts CHANGED
@@ -5,19 +5,53 @@ import '@proximus/lavender-icon';
5
5
  import '@proximus/lavender-heading';
6
6
  import '@proximus/lavender-paragraph';
7
7
  import { type ButtonIcon } from '@proximus/lavender-button-icon';
8
+ import { type Icon } from '@proximus/lavender-icon';
9
+ export declare const statusValues: string[];
8
10
  export declare class Modal extends HTMLElement {
11
+ private onOpenClick;
12
+ private onCloseClick;
13
+ private commandButtonCleanups;
14
+ private opener;
15
+ private openerElement;
16
+ private closerElement;
9
17
  template: string;
10
18
  constructor();
11
19
  connectedCallback(): void;
12
20
  static get observedAttributes(): string[];
13
21
  attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
22
+ disconnectedCallback(): void;
23
+ addEventListenersToCommandButtons(): void;
24
+ private removeCommandButtonListeners;
14
25
  handleOpenChange(): void;
15
26
  handleStatusChange(oldStatus: string, newStatus: string): void;
16
- getIcon(status: string): "checkmark_fill" | "exclamation_mark_fill" | "minus_fill";
27
+ getIcon(status: string): "checkmark_fill" | "exclamation_mark_fill" | "minus_fill" | "information_fill";
17
28
  show(): void;
18
29
  close(): void;
30
+ updateMediaSrc(src: string): void;
31
+ addOpenListener(): void;
32
+ private removeOpenListener;
33
+ addCloseListener(value: string): void;
34
+ private removeCloseListener;
35
+ toggleDescriptionVisibility(): void;
36
+ toggleCloseButtonSafeArea(): void;
37
+ get $slottedCloseButton(): HTMLSlotElement;
38
+ get $slotCloseButton(): HTMLSlotElement;
39
+ get $slottedDescription(): HTMLSlotElement;
40
+ get $slotDescription(): HTMLSlotElement;
41
+ get $descriptionContainer(): HTMLParagraphElement;
42
+ get $titleContainer(): HTMLHeadingElement;
43
+ get $opener(): HTMLButtonElement;
44
+ get status(): string;
45
+ set status(value: string);
46
+ get openedby(): string;
47
+ set openedby(value: string);
48
+ get closedby(): string;
49
+ set closedby(value: string);
19
50
  get $closeButton(): ButtonIcon;
20
- get $statusIcon(): ButtonIcon;
51
+ get $statusIcon(): Icon;
52
+ get $mediaContainer(): HTMLDivElement;
53
+ get mediaSrc(): string;
54
+ set mediaSrc(value: string);
21
55
  get $container(): Element;
22
56
  get $iconContainer(): Element;
23
57
  get $dialog(): HTMLDialogElement;
package/dist/index.es.js CHANGED
@@ -4,65 +4,60 @@ import "@proximus/lavender-layout";
4
4
  import "@proximus/lavender-icon";
5
5
  import "@proximus/lavender-heading";
6
6
  import "@proximus/lavender-paragraph";
7
- const n = "#container{width:1080px;display:block;border:0;border-radius:var(--px-radius-main);padding:var(--px-padding-m-desktop);background-color:var(--px-color-background-surface-default)}#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}::slotted(px-button-icon){position:absolute;top:var(--px-padding-m-desktop);right:var(--px-padding-m-desktop)}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:90vh;overflow:auto}@media screen and (max-width: 1081px){#container{width:inherit;padding:var(--px-padding-m-mobile)}::slotted(px-button-icon){top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}}@keyframes modalIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}", a = new CSSStyleSheet();
8
- a.replaceSync(n);
9
- const c = "px.lavender.modal.close";
10
- class l extends HTMLElement {
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.5em;overflow:auto}@media only screen and (min-width: 48em){#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:25em}}@media only screen and (min-width: 64.0625em){#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:25em;flex-shrink:0}}@media screen and (min-width: 1118px){#container{width:1080px}}@media only screen and (min-width: 90.0625em){: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
11
  constructor() {
12
- super(), this.template = ` <dialog>
12
+ super(), this.onOpenClick = () => this.show(), this.onCloseClick = () => this.close(), this.commandButtonCleanups = [], this.opener = null, this.openerElement = null, this.closerElement = null, this.template = `<dialog>
13
13
  <div id="container">
14
- <px-vstack gap="default" >
15
- <px-hstack id="icon-container" gap="s" align-items="flex-start">
16
- ${this.getAttribute("status") ? `<px-icon size="l" name="checkmark_fill" from="lavender" color="purpose-${this.getAttribute("status")}"></px-icon>` : ""}
17
-
18
- <px-vstack gap="s">
19
- <px-h1 variant="title-l">
20
- <slot name="title"></slot>
21
- </px-h1>
22
- <px-p font-weight="title">
23
- <slot name="description"></slot>
24
- </px-p>
25
- </px-vstack>
26
- </px-hstack>
27
- <div id="content">
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>
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>
43
46
  </div>
44
- </dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [a];
47
+ </dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [r];
45
48
  }
46
49
  connectedCallback() {
47
- if (this.hasAttribute("open") && this.show(), this.handleStatusChange("notnull", this.getAttribute("status")), this.hasAttribute("closedby")) {
48
- const t = document.querySelector(
49
- `#${this.getAttribute("closedby")}`
50
- );
51
- t == null || t.addEventListener("click", () => {
52
- this.close();
53
- });
54
- }
55
- if (this.hasAttribute("openedby")) {
56
- const t = document.querySelector(
57
- `px-button#${this.getAttribute("openedby")}`
58
- );
59
- t == null || t.addEventListener("click", () => {
60
- this.show();
61
- });
62
- }
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("closedby") && this.addCloseListener(this.getAttribute("closedby")), this.hasAttribute("openedby") && this.addOpenListener(), this.hasAttribute("media-src") && this.updateMediaSrc(this.getAttribute("media-src")), 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
+ );
63
58
  }
64
59
  static get observedAttributes() {
65
- return ["open", "status"];
60
+ return ["open", "status", "media-src", "openedby", "closedby", "id"];
66
61
  }
67
62
  attributeChangedCallback(t, e, o) {
68
63
  switch (t) {
@@ -72,35 +67,147 @@ class l extends HTMLElement {
72
67
  case "status":
73
68
  this.handleStatusChange(e, o);
74
69
  break;
70
+ case "media-src":
71
+ this.updateMediaSrc(o);
72
+ break;
73
+ case "openedby":
74
+ this.addOpenListener();
75
+ break;
76
+ case "closedby":
77
+ this.addCloseListener(o);
78
+ break;
79
+ case "id":
80
+ this.addEventListenersToCommandButtons();
81
+ break;
75
82
  }
76
83
  }
84
+ disconnectedCallback() {
85
+ var t, e;
86
+ (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
+ }
77
106
  handleOpenChange() {
78
107
  this.hasAttribute("open") ? this.show() : this.close();
79
108
  }
80
109
  handleStatusChange(t, e) {
81
- var o, i, r;
82
- if (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)
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)
83
112
  (o = this.$statusIcon) == null || o.remove();
84
113
  else if (t === null && e && !this.$statusIcon) {
85
- const s = document.createElement("px-icon");
86
- s.setAttribute("name", this.getIcon(e)), s.setAttribute("from", "lavender"), s.setAttribute("color", `purpose-${e}`), this.$iconContainer.appendChild(s);
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);
87
116
  } else
88
- (i = this.$statusIcon) == null || i.setAttribute("name", this.getIcon(e)), (r = this.$statusIcon) == null || r.setAttribute("color", `purpose-${e}`);
117
+ (s = this.$statusIcon) == null || s.setAttribute("name", this.getIcon(e)), (n = this.$statusIcon) == null || n.setAttribute("color", `purpose-${e}`);
89
118
  }
90
119
  getIcon(t) {
91
- return t === "success" ? "checkmark_fill" : t === "warning" ? "exclamation_mark_fill" : "minus_fill";
120
+ return t === "success" ? "checkmark_fill" : t === "warning" ? "exclamation_mark_fill" : t === "error" ? "minus_fill" : "information_fill";
92
121
  }
93
122
  show() {
94
- this.$dialog.showModal();
123
+ this.$dialog.showModal(), document.body.style.overflow = "hidden";
95
124
  }
96
125
  close() {
97
- this.$dialog.close(), this.dispatchEvent(
98
- new CustomEvent(c, {
126
+ this.$dialog.close(), document.body.style.overflow = "", this.dispatchEvent(
127
+ new CustomEvent(l, {
99
128
  bubbles: !0,
100
129
  composed: !0
101
130
  })
102
131
  );
103
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
+ }
104
211
  get $closeButton() {
105
212
  return this.shadowRoot.querySelector("px-button-icon");
106
213
  }
@@ -109,6 +216,15 @@ class l extends HTMLElement {
109
216
  "#icon-container > px-icon"
110
217
  );
111
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
+ }
112
228
  get $container() {
113
229
  return this.shadowRoot.querySelector("#container");
114
230
  }
@@ -122,7 +238,8 @@ class l extends HTMLElement {
122
238
  return this.$dialog.open;
123
239
  }
124
240
  }
125
- customElements.get("px-modal") || customElements.define("px-modal", l);
241
+ customElements.get("px-modal") || customElements.define("px-modal", d);
126
242
  export {
127
- l as Modal
243
+ d as Modal,
244
+ c as statusValues
128
245
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-modal",
3
- "version": "2.0.0-alpha.6",
3
+ "version": "2.0.0-alpha.60",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",