@proximus/lavender-drawer 1.4.10-beta.4 → 1.4.10
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/Drawer.d.ts +0 -11
- package/dist/index.es.js +35 -76
- package/package.json +1 -1
package/dist/Drawer.d.ts
CHANGED
|
@@ -7,7 +7,6 @@ import { type Icon } from '@proximus/lavender-icon';
|
|
|
7
7
|
export declare const HIDE_EVENT = "px.lavender.drawer.hide";
|
|
8
8
|
export declare class Drawer extends HTMLElement {
|
|
9
9
|
observer: MutationObserver;
|
|
10
|
-
private previousFocusedElement;
|
|
11
10
|
template: string;
|
|
12
11
|
constructor();
|
|
13
12
|
connectedCallback(): void;
|
|
@@ -34,14 +33,4 @@ export declare class Drawer extends HTMLElement {
|
|
|
34
33
|
set openedby(value: string);
|
|
35
34
|
get closedby(): string;
|
|
36
35
|
set closedby(value: string);
|
|
37
|
-
get fullscreen(): boolean;
|
|
38
|
-
set fullscreen(value: boolean);
|
|
39
|
-
get fullscreenMobile(): boolean;
|
|
40
|
-
set fullscreenMobile(value: boolean);
|
|
41
|
-
get fullscreenTablet(): boolean;
|
|
42
|
-
set fullscreenTablet(value: boolean);
|
|
43
|
-
get fullscreenLaptop(): boolean;
|
|
44
|
-
set fullscreenLaptop(value: boolean);
|
|
45
|
-
get fullscreenDesktop(): boolean;
|
|
46
|
-
set fullscreenDesktop(value: boolean);
|
|
47
36
|
}
|
package/dist/index.es.js
CHANGED
|
@@ -3,12 +3,12 @@ import "@proximus/lavender-layout";
|
|
|
3
3
|
import "@proximus/lavender-button-icon";
|
|
4
4
|
import "@proximus/lavender-icon";
|
|
5
5
|
import "@proximus/lavender-heading";
|
|
6
|
-
const l = ':host *{box-sizing:border-box}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}dialog{box-shadow:none;padding:0;margin:auto 0 0;border:0;width:100%;animation:dialog-fade-in-bottom .3s;border-radius:var(--px-radius-main) var(--px-radius-main) 0 0;background-color:var(--px-color-background-surface-light)}#container{display:grid;grid-template:"header close" auto "content content" 1fr "footer footer" auto / 1fr auto;column-gap:var(--px-spacing-l-mobile);padding:var(--px-padding-l-mobile);max-height:90dvh}#header{grid-area:header;margin-bottom:var(--px-spacing-l-mobile)}#close{grid-area:close}#content{grid-area:content;overflow:hidden;overflow-y:auto}#footer{grid-area:footer;margin-top:var(--px-spacing-l-mobile)}
|
|
6
|
+
const l = ':host *{box-sizing:border-box}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}dialog{box-shadow:none;padding:0;margin:auto 0 0;border:0;width:100%;animation:dialog-fade-in-bottom .3s;border-radius:var(--px-radius-main) var(--px-radius-main) 0 0;background-color:var(--px-color-background-surface-light)}#container{display:grid;grid-template:"header close" auto "content content" 1fr "footer footer" auto / 1fr auto;column-gap:var(--px-spacing-l-mobile);padding:var(--px-padding-l-mobile);max-height:90dvh}#header{grid-area:header;margin-bottom:var(--px-spacing-l-mobile)}#close{grid-area:close}#content{grid-area:content;overflow:hidden;overflow-y:auto}#footer{grid-area:footer;margin-top:var(--px-spacing-l-mobile)}@media screen and (min-width: 48rem){#container{column-gap:var(--px-spacing-l-tablet);padding:var(--px-padding-l-tablet)}#header{margin-bottom:var(--px-spacing-l-tablet)}#footer{margin-top:var(--px-spacing-l-tablet)}}@media screen and (min-width: 64.0625rem){#container{column-gap:var(--px-spacing-l-laptop);padding:var(--px-padding-l-laptop);max-width:var(--px-content-wrapper-max-width-laptop);margin:0 auto}#header{margin-bottom:var(--px-spacing-l-laptop)}#footer{margin-top:var(--px-spacing-l-laptop)}:host([showfrom="right"]) dialog{width:75%;height:100%;margin:0 0 0 auto;animation:dialog-fade-in-right .3s;border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}:host([showfrom="right"]) #container{max-height:100%;height:100%;margin:0 auto 0 0}:host([showfrom="left"]) dialog{width:75%;height:100%;margin:0 auto 0 0;animation:dialog-fade-in-left .3s;border-radius:0 var(--px-radius-main) var(--px-radius-main) 0}:host([showfrom="left"]) #container{margin:0 0 0 auto}}@media screen and (min-width: 90.0625rem){#container{column-gap:var(--px-spacing-l-desktop);padding:var(--px-padding-l-desktop)}#header{margin-bottom:var(--px-spacing-l-desktop)}#footer{margin-top:var(--px-spacing-l-desktop)}}@keyframes dialog-fade-in-right{0%{margin-right:-1080px}to{margin-right:0}}@keyframes dialog-fade-in-left{0%{margin-left:-1080px}to{margin-left:0}}@keyframes dialog-fade-in-bottom{0%{margin-bottom:-200px}to{margin-bottom:0}}', n = new CSSStyleSheet();
|
|
7
7
|
n.replaceSync(l);
|
|
8
8
|
const d = "px.lavender.drawer.hide";
|
|
9
9
|
class h extends HTMLElement {
|
|
10
10
|
constructor() {
|
|
11
|
-
super(), this.
|
|
11
|
+
super(), this.template = `<dialog popover role="dialog" aria-modal="true" >
|
|
12
12
|
<div id="container">
|
|
13
13
|
<px-vstack gap="heading-to-subtitle" id="header">
|
|
14
14
|
<px-h1 variant="title-2xl">
|
|
@@ -41,47 +41,37 @@ class h extends HTMLElement {
|
|
|
41
41
|
</dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [n];
|
|
42
42
|
}
|
|
43
43
|
connectedCallback() {
|
|
44
|
-
var
|
|
44
|
+
var t;
|
|
45
45
|
this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this), this.$opener && this.addOpenListener(), this.$closer && this.addCloseListener(), this.hasAttribute("showfrom") || this.setAttribute("showfrom", "bottom"), this.$closeButton.addEventListener("click", () => {
|
|
46
46
|
this.hide();
|
|
47
|
-
}), this.$dialog.addEventListener("toggle", (
|
|
48
|
-
|
|
49
|
-
}), this.toggleFooterVisibility(), (
|
|
47
|
+
}), this.$dialog.addEventListener("toggle", (e) => {
|
|
48
|
+
e.newState === "closed" && this.hide();
|
|
49
|
+
}), this.toggleFooterVisibility(), (t = this.$slotFooter) == null || t.addEventListener(
|
|
50
50
|
"slotchange",
|
|
51
51
|
this.toggleFooterVisibility
|
|
52
52
|
);
|
|
53
53
|
}
|
|
54
54
|
static get observedAttributes() {
|
|
55
|
-
return [
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
"fullscreen",
|
|
61
|
-
"fullscreen--mobile",
|
|
62
|
-
"fullscreen--tablet",
|
|
63
|
-
"fullscreen--laptop",
|
|
64
|
-
"fullscreen--desktop"
|
|
65
|
-
];
|
|
66
|
-
}
|
|
67
|
-
attributeChangedCallback(e, t, o) {
|
|
68
|
-
var i, r, a;
|
|
69
|
-
switch (e) {
|
|
55
|
+
return ["open", "aria-label-close-button", "openedby", "closedby"];
|
|
56
|
+
}
|
|
57
|
+
attributeChangedCallback(t, e, o) {
|
|
58
|
+
var a, i, s;
|
|
59
|
+
switch (t) {
|
|
70
60
|
case "open":
|
|
71
61
|
o !== null ? this.show() : this.hide();
|
|
72
62
|
break;
|
|
73
63
|
case "aria-label-close-button":
|
|
74
|
-
o ? (
|
|
75
|
-
|
|
64
|
+
o ? (s = (i = this.$closeButton) == null ? void 0 : i.setAttribute) == null || s.call(
|
|
65
|
+
i,
|
|
76
66
|
"aria-label",
|
|
77
67
|
o || "Close drawer"
|
|
78
|
-
) : (
|
|
68
|
+
) : (a = this.$closeButton) == null || a.removeAttribute("aria-label");
|
|
79
69
|
break;
|
|
80
70
|
case "openedby":
|
|
81
|
-
if (o !==
|
|
82
|
-
if (
|
|
83
|
-
const
|
|
84
|
-
|
|
71
|
+
if (o !== e) {
|
|
72
|
+
if (e) {
|
|
73
|
+
const r = document.querySelector(`#${e}`);
|
|
74
|
+
r == null || r.removeEventListener("click", () => this.show());
|
|
85
75
|
}
|
|
86
76
|
this.addOpenListener();
|
|
87
77
|
}
|
|
@@ -92,20 +82,19 @@ class h extends HTMLElement {
|
|
|
92
82
|
}
|
|
93
83
|
}
|
|
94
84
|
disconnectedCallback() {
|
|
95
|
-
var
|
|
96
|
-
(
|
|
85
|
+
var t, e;
|
|
86
|
+
(t = this.$slotFooter) == null || t.removeEventListener(
|
|
97
87
|
"slotchange",
|
|
98
88
|
this.toggleFooterVisibility
|
|
99
|
-
), (
|
|
89
|
+
), (e = this.observer) == null || e.disconnect(), this.$opener && this.$opener.removeEventListener("click", () => this.show()), this.$closer && this.$closer.removeEventListener("click", () => this.hide());
|
|
100
90
|
}
|
|
101
91
|
show() {
|
|
102
|
-
var t,
|
|
103
|
-
|
|
104
|
-
this.previousFocusedElement = ((t = e == null ? void 0 : e.shadowRoot) == null ? void 0 : t.activeElement) ?? e, (i = (o = this.$dialog).showPopover) == null || i.call(o), document.body.style.overflow = "hidden";
|
|
92
|
+
var t, e;
|
|
93
|
+
(e = (t = this.$dialog).showPopover) == null || e.call(t), document.body.style.overflow = "hidden";
|
|
105
94
|
}
|
|
106
95
|
hide() {
|
|
107
|
-
var
|
|
108
|
-
(
|
|
96
|
+
var t, e;
|
|
97
|
+
(e = (t = this.$dialog).hidePopover) == null || e.call(t), document.body.style.overflow = "", this.dispatchEvent(
|
|
109
98
|
new Event(d, {
|
|
110
99
|
bubbles: !0,
|
|
111
100
|
composed: !0
|
|
@@ -124,8 +113,8 @@ class h extends HTMLElement {
|
|
|
124
113
|
}));
|
|
125
114
|
}
|
|
126
115
|
addCloseListener() {
|
|
127
|
-
var
|
|
128
|
-
this.$closer && ((
|
|
116
|
+
var t;
|
|
117
|
+
this.$closer && ((t = this.$closer) == null || t.addEventListener("click", () => {
|
|
129
118
|
this.hide();
|
|
130
119
|
}));
|
|
131
120
|
}
|
|
@@ -159,56 +148,26 @@ class h extends HTMLElement {
|
|
|
159
148
|
get $footer() {
|
|
160
149
|
return this.shadowRoot.querySelector("#footer");
|
|
161
150
|
}
|
|
162
|
-
set open(
|
|
163
|
-
|
|
151
|
+
set open(t) {
|
|
152
|
+
t ? this.setAttribute("open", "") : this.removeAttribute("open");
|
|
164
153
|
}
|
|
165
154
|
get AriaLabelCloseButton() {
|
|
166
155
|
return this.getAttribute("aria-label-close-button");
|
|
167
156
|
}
|
|
168
|
-
set AriaLabelCloseButton(
|
|
169
|
-
this.setAttribute("aria-label-close-button",
|
|
157
|
+
set AriaLabelCloseButton(t) {
|
|
158
|
+
this.setAttribute("aria-label-close-button", t);
|
|
170
159
|
}
|
|
171
160
|
get openedby() {
|
|
172
161
|
return this.getAttribute("openedby");
|
|
173
162
|
}
|
|
174
|
-
set openedby(
|
|
175
|
-
this.setAttribute("openedby",
|
|
163
|
+
set openedby(t) {
|
|
164
|
+
this.setAttribute("openedby", t);
|
|
176
165
|
}
|
|
177
166
|
get closedby() {
|
|
178
167
|
return this.getAttribute("closedby");
|
|
179
168
|
}
|
|
180
|
-
set closedby(
|
|
181
|
-
this.setAttribute("closedby",
|
|
182
|
-
}
|
|
183
|
-
get fullscreen() {
|
|
184
|
-
return this.hasAttribute("fullscreen");
|
|
185
|
-
}
|
|
186
|
-
set fullscreen(e) {
|
|
187
|
-
e ? this.setAttribute("fullscreen", "") : this.removeAttribute("fullscreen");
|
|
188
|
-
}
|
|
189
|
-
get fullscreenMobile() {
|
|
190
|
-
return this.hasAttribute("fullscreen--mobile");
|
|
191
|
-
}
|
|
192
|
-
set fullscreenMobile(e) {
|
|
193
|
-
e ? this.setAttribute("fullscreen--mobile", "") : this.removeAttribute("fullscreen--mobile");
|
|
194
|
-
}
|
|
195
|
-
get fullscreenTablet() {
|
|
196
|
-
return this.hasAttribute("fullscreen--tablet");
|
|
197
|
-
}
|
|
198
|
-
set fullscreenTablet(e) {
|
|
199
|
-
e ? this.setAttribute("fullscreen--tablet", "") : this.removeAttribute("fullscreen--tablet");
|
|
200
|
-
}
|
|
201
|
-
get fullscreenLaptop() {
|
|
202
|
-
return this.hasAttribute("fullscreen--laptop");
|
|
203
|
-
}
|
|
204
|
-
set fullscreenLaptop(e) {
|
|
205
|
-
e ? this.setAttribute("fullscreen--laptop", "") : this.removeAttribute("fullscreen--laptop");
|
|
206
|
-
}
|
|
207
|
-
get fullscreenDesktop() {
|
|
208
|
-
return this.hasAttribute("fullscreen--desktop");
|
|
209
|
-
}
|
|
210
|
-
set fullscreenDesktop(e) {
|
|
211
|
-
e ? this.setAttribute("fullscreen--desktop", "") : this.removeAttribute("fullscreen--desktop");
|
|
169
|
+
set closedby(t) {
|
|
170
|
+
this.setAttribute("closedby", t);
|
|
212
171
|
}
|
|
213
172
|
}
|
|
214
173
|
customElements.get("px-drawer") || customElements.define("px-drawer", h);
|