@proximus/lavender-modal 2.0.0-alpha.18 → 2.0.0-alpha.180

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 +37 -2
  2. package/dist/index.es.js +175 -121
  3. package/package.json +1 -1
package/dist/Modal.d.ts CHANGED
@@ -5,19 +5,54 @@ 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 onDialogCancel;
14
+ private commandButtonCleanups;
15
+ private opener;
16
+ private openerElement;
17
+ private closerElement;
9
18
  template: string;
10
19
  constructor();
11
20
  connectedCallback(): void;
12
21
  static get observedAttributes(): string[];
13
22
  attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
23
+ disconnectedCallback(): void;
24
+ addEventListenersToCommandButtons(): void;
25
+ private removeCommandButtonListeners;
14
26
  handleOpenChange(): void;
15
27
  handleStatusChange(oldStatus: string, newStatus: string): void;
16
- getIcon(status: string): "checkmark_fill" | "exclamation_mark_fill" | "minus_fill";
28
+ getIcon(status: string): "checkmark_fill" | "exclamation_mark_fill" | "minus_fill" | "information_fill";
17
29
  show(): void;
18
30
  close(): void;
31
+ updateMediaSrc(src: string): void;
32
+ addOpenListener(): void;
33
+ private removeOpenListener;
34
+ addCloseListener(value: string): void;
35
+ private removeCloseListener;
36
+ toggleDescriptionVisibility(): void;
37
+ toggleCloseButtonSafeArea(): void;
38
+ get $slottedCloseButton(): HTMLSlotElement;
39
+ get $slotCloseButton(): HTMLSlotElement | null;
40
+ get $slottedDescription(): HTMLSlotElement;
41
+ get $slotDescription(): HTMLSlotElement | null;
42
+ get $descriptionContainer(): HTMLParagraphElement;
43
+ get $titleContainer(): HTMLHeadingElement;
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);
19
51
  get $closeButton(): ButtonIcon;
20
- get $statusIcon(): ButtonIcon;
52
+ get $statusIcon(): Icon;
53
+ get $mediaContainer(): HTMLDivElement;
54
+ get mediaSrc(): string | null;
55
+ set mediaSrc(value: string | null);
21
56
  get $container(): Element;
22
57
  get $iconContainer(): Element;
23
58
  get $dialog(): HTMLDialogElement;
package/dist/index.es.js CHANGED
@@ -4,125 +4,179 @@ 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 {
11
- constructor() {
12
- super(), this.template = ` <dialog>
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>
43
- </div>
44
- </dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [a];
45
- }
46
- 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
- }
63
- }
64
- static get observedAttributes() {
65
- return ["open", "status"];
66
- }
67
- attributeChangedCallback(t, e, o) {
68
- switch (t) {
69
- case "open":
70
- this.handleOpenChange();
71
- break;
72
- case "status":
73
- this.handleStatusChange(e, o);
74
- break;
75
- }
76
- }
77
- handleOpenChange() {
78
- this.hasAttribute("open") ? this.show() : this.close();
79
- }
80
- 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)
83
- (o = this.$statusIcon) == null || o.remove();
84
- 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);
87
- } else
88
- (i = this.$statusIcon) == null || i.setAttribute("name", this.getIcon(e)), (r = this.$statusIcon) == null || r.setAttribute("color", `purpose-${e}`);
89
- }
90
- getIcon(t) {
91
- return t === "success" ? "checkmark_fill" : t === "warning" ? "exclamation_mark_fill" : "minus_fill";
92
- }
93
- show() {
94
- this.$dialog.showModal();
95
- }
96
- close() {
97
- this.$dialog.close(), this.dispatchEvent(
98
- new CustomEvent(c, {
99
- bubbles: !0,
100
- composed: !0
101
- })
102
- );
103
- }
104
- get $closeButton() {
105
- return this.shadowRoot.querySelector("px-button-icon");
106
- }
107
- get $statusIcon() {
108
- return this.$iconContainer.querySelector(
109
- "#icon-container > px-icon"
110
- );
111
- }
112
- get $container() {
113
- return this.shadowRoot.querySelector("#container");
114
- }
115
- get $iconContainer() {
116
- return this.shadowRoot.querySelector("#icon-container");
117
- }
118
- get $dialog() {
119
- return this.shadowRoot.querySelector("dialog");
120
- }
121
- get open() {
122
- return this.$dialog.open;
123
- }
124
- }
125
- customElements.get("px-modal") || customElements.define("px-modal", l);
126
- export {
127
- l as Modal
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
+ }
128
179
  };
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": "2.0.0-alpha.18",
3
+ "version": "2.0.0-alpha.180",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",