@proximus/lavender-modal 2.0.0-alpha.4 → 2.0.0-alpha.41

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 +21 -2
  2. package/dist/index.es.js +127 -51
  3. package/package.json +1 -1
package/dist/Modal.d.ts CHANGED
@@ -5,19 +5,38 @@ 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';
8
9
  export declare class Modal extends HTMLElement {
9
10
  template: string;
10
11
  constructor();
11
12
  connectedCallback(): void;
12
13
  static get observedAttributes(): string[];
13
14
  attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
15
+ disconnectedCallback(): void;
14
16
  handleOpenChange(): void;
15
17
  handleStatusChange(oldStatus: string, newStatus: string): void;
16
- getIcon(status: string): "checkmark_fill" | "exclamation_mark_fill" | "minus_fill";
18
+ getIcon(status: string): "checkmark_fill" | "exclamation_mark_fill" | "minus_fill" | "information_fill";
17
19
  show(): void;
18
20
  close(): void;
21
+ updateMediaSrc(src: string): void;
22
+ addOpenListener(): void;
23
+ toggleDescriptionVisibility(): void;
24
+ toggleCloseButtonSafeArea(): void;
25
+ get $slottedCloseButton(): HTMLSlotElement;
26
+ get $slotCloseButton(): HTMLSlotElement;
27
+ get $slottedDescription(): HTMLSlotElement;
28
+ get $slotDescription(): HTMLSlotElement;
29
+ get $descriptionContainer(): HTMLParagraphElement;
30
+ get $opener(): HTMLButtonElement;
31
+ get status(): string;
32
+ set status(value: string);
33
+ get openedby(): string;
34
+ set openedby(value: string);
19
35
  get $closeButton(): ButtonIcon;
20
- get $statusIcon(): ButtonIcon;
36
+ get $statusIcon(): Icon;
37
+ get $mediaContainer(): HTMLDivElement;
38
+ get mediaSrc(): string;
39
+ set mediaSrc(value: string);
21
40
  get $container(): Element;
22
41
  get $iconContainer(): Element;
23
42
  get $dialog(): HTMLDialogElement;
package/dist/index.es.js CHANGED
@@ -4,65 +4,67 @@ 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);
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
9
  const c = "px.lavender.modal.close";
10
10
  class l extends HTMLElement {
11
11
  constructor() {
12
- super(), this.template = ` <dialog>
12
+ super(), 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></slot>
28
+ </div>
29
+ <px-separator size="m"></px-separator>
30
+ <px-stack
31
+ gap="s"
32
+ justify-content="flex-end"
33
+ align-items="center"
34
+ align-items--mobile="stretch"
35
+ direction="row"
36
+ direction--mobile="column-reverse"
37
+ >
38
+ <slot name="footer"></slot>
39
+ </px-stack>
40
+ </px-vstack>
41
+ <slot name="close-button"></slot>
42
+ </div>
43
+ <div id="media-container">
44
+ </div>
43
45
  </div>
44
- </dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [a];
46
+ </dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [r];
45
47
  }
46
48
  connectedCallback() {
47
- if (this.hasAttribute("open") && this.show(), this.handleStatusChange("notnull", this.getAttribute("status")), this.hasAttribute("closedby")) {
48
- const t = document.querySelector(
49
+ var t, e;
50
+ if (this.toggleDescriptionVisibility = this.toggleDescriptionVisibility.bind(this), this.toggleCloseButtonSafeArea = this.toggleCloseButtonSafeArea.bind(this), this.hasAttribute("open") && this.show(), this.hasAttribute("closedby")) {
51
+ const o = document.querySelector(
49
52
  `#${this.getAttribute("closedby")}`
50
53
  );
51
- t == null || t.addEventListener("click", () => {
54
+ o == null || o.addEventListener("click", () => {
52
55
  this.close();
53
56
  });
54
57
  }
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
- }
58
+ this.hasAttribute("openedby") && this.addOpenListener(), this.hasAttribute("media-src") && this.updateMediaSrc(this.getAttribute("media-src")), this.toggleDescriptionVisibility(), (t = this.$slotDescription) == null || t.addEventListener(
59
+ "slotchange",
60
+ this.toggleDescriptionVisibility
61
+ ), this.toggleCloseButtonSafeArea(), (e = this.$slotCloseButton) == null || e.addEventListener(
62
+ "slotchange",
63
+ this.toggleCloseButtonSafeArea
64
+ );
63
65
  }
64
66
  static get observedAttributes() {
65
- return ["open", "status"];
67
+ return ["open", "status", "media-src", "openedby"];
66
68
  }
67
69
  attributeChangedCallback(t, e, o) {
68
70
  switch (t) {
@@ -72,23 +74,36 @@ class l extends HTMLElement {
72
74
  case "status":
73
75
  this.handleStatusChange(e, o);
74
76
  break;
77
+ case "media-src":
78
+ this.updateMediaSrc(o);
79
+ break;
80
+ case "openedby":
81
+ this.addOpenListener();
82
+ break;
75
83
  }
76
84
  }
85
+ disconnectedCallback() {
86
+ var t;
87
+ (t = this.$slotDescription) == null || t.removeEventListener(
88
+ "slotchange",
89
+ this.toggleDescriptionVisibility
90
+ );
91
+ }
77
92
  handleOpenChange() {
78
93
  this.hasAttribute("open") ? this.show() : this.close();
79
94
  }
80
95
  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)
96
+ var o, s, n;
97
+ if (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
98
  (o = this.$statusIcon) == null || o.remove();
84
99
  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);
100
+ const i = document.createElement("px-icon");
101
+ i.setAttribute("name", this.getIcon(e)), i.setAttribute("from", "lavender"), i.setAttribute("color", `purpose-${e}`), i.setAttribute("size", "l"), this.$iconContainer.prepend(i);
87
102
  } else
88
- (i = this.$statusIcon) == null || i.setAttribute("name", this.getIcon(e)), (r = this.$statusIcon) == null || r.setAttribute("color", `purpose-${e}`);
103
+ (s = this.$statusIcon) == null || s.setAttribute("name", this.getIcon(e)), (n = this.$statusIcon) == null || n.setAttribute("color", `purpose-${e}`);
89
104
  }
90
105
  getIcon(t) {
91
- return t === "success" ? "checkmark_fill" : t === "warning" ? "exclamation_mark_fill" : "minus_fill";
106
+ return t === "success" ? "checkmark_fill" : t === "warning" ? "exclamation_mark_fill" : t === "error" ? "minus_fill" : "information_fill";
92
107
  }
93
108
  show() {
94
109
  this.$dialog.showModal();
@@ -101,6 +116,58 @@ class l extends HTMLElement {
101
116
  })
102
117
  );
103
118
  }
119
+ updateMediaSrc(t) {
120
+ this.$mediaContainer.style.backgroundImage = `url(${t})`;
121
+ }
122
+ addOpenListener() {
123
+ var t, e, o;
124
+ ((t = this.$opener) == null ? void 0 : t.getAttribute("data-has-opener")) !== "true" && ((e = this.$opener) == null || e.setAttribute("data-has-opener", "true"), (o = this.$opener) == null || o.addEventListener("click", () => this.show()));
125
+ }
126
+ toggleDescriptionVisibility() {
127
+ this.$slottedDescription ? this.$descriptionContainer.style.display = "block" : this.$descriptionContainer.style.display = "none";
128
+ }
129
+ toggleCloseButtonSafeArea() {
130
+ var t, e, o;
131
+ 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"));
132
+ }
133
+ get $slottedCloseButton() {
134
+ return this.querySelector('[slot="close-button"]');
135
+ }
136
+ get $slotCloseButton() {
137
+ return this.shadowRoot.querySelector(
138
+ 'slot[name="close-button"]'
139
+ );
140
+ }
141
+ get $slottedDescription() {
142
+ return this.querySelector('[slot="description"]');
143
+ }
144
+ get $slotDescription() {
145
+ return this.shadowRoot.querySelector(
146
+ 'slot[name="description"]'
147
+ );
148
+ }
149
+ get $descriptionContainer() {
150
+ return this.shadowRoot.querySelector(
151
+ 'px-p[font-weight="title"]'
152
+ );
153
+ }
154
+ get $opener() {
155
+ return document.querySelector(
156
+ `px-button#${this.getAttribute("openedby")}`
157
+ );
158
+ }
159
+ get status() {
160
+ return this.getAttribute("status");
161
+ }
162
+ set status(t) {
163
+ this.setAttribute("status", t);
164
+ }
165
+ get openedby() {
166
+ return this.getAttribute("openedby");
167
+ }
168
+ set openedby(t) {
169
+ this.setAttribute("openedby", t);
170
+ }
104
171
  get $closeButton() {
105
172
  return this.shadowRoot.querySelector("px-button-icon");
106
173
  }
@@ -109,6 +176,15 @@ class l extends HTMLElement {
109
176
  "#icon-container > px-icon"
110
177
  );
111
178
  }
179
+ get $mediaContainer() {
180
+ return this.shadowRoot.querySelector("#media-container");
181
+ }
182
+ get mediaSrc() {
183
+ return this.getAttribute("media-src");
184
+ }
185
+ set mediaSrc(t) {
186
+ t === null ? this.removeAttribute("media-src") : this.setAttribute("media-src", t);
187
+ }
112
188
  get $container() {
113
189
  return this.shadowRoot.querySelector("#container");
114
190
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-modal",
3
- "version": "2.0.0-alpha.4",
3
+ "version": "2.0.0-alpha.41",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",