@proximus/lavender-drawer 2.0.0-alpha.114 → 2.0.0-alpha.115
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 +10 -0
- package/dist/index.es.js +72 -32
- package/package.json +1 -1
package/dist/Drawer.d.ts
CHANGED
|
@@ -33,4 +33,14 @@ export declare class Drawer extends HTMLElement {
|
|
|
33
33
|
set openedby(value: string);
|
|
34
34
|
get closedby(): string;
|
|
35
35
|
set closedby(value: string);
|
|
36
|
+
get fullscreen(): boolean;
|
|
37
|
+
set fullscreen(value: boolean);
|
|
38
|
+
get fullscreenMobile(): boolean;
|
|
39
|
+
set fullscreenMobile(value: boolean);
|
|
40
|
+
get fullscreenTablet(): boolean;
|
|
41
|
+
set fullscreenTablet(value: boolean);
|
|
42
|
+
get fullscreenLaptop(): boolean;
|
|
43
|
+
set fullscreenLaptop(value: boolean);
|
|
44
|
+
get fullscreenDesktop(): boolean;
|
|
45
|
+
set fullscreenDesktop(value: boolean);
|
|
36
46
|
}
|
package/dist/index.es.js
CHANGED
|
@@ -3,7 +3,7 @@ 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)}@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{
|
|
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)}:host([fullscreen]) #container{height:90dvh}@media screen and (max-width: 47.938rem){:host([fullscreen--mobile]) #container{height:90dvh}}@media screen and (min-width: 48rem) and (max-width: 64rem){:host([fullscreen--tablet]) #container{height:90dvh}}@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) and (max-width: 90rem){:host([fullscreen--laptop]:not([showfrom="left"]):not([showfrom="right"])) #container{height:90dvh}}@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,:host([showfrom="left"]) dialog{width:75%;height:100%}:host([showfrom="right"]) #container,:host([showfrom="left"]) #container{max-height:100%;height:100%}:host([showfrom="right"]) dialog{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{margin:0 auto 0 0}:host([showfrom="left"]) dialog{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}:host([showfrom="right"][fullscreen]) #container,:host([showfrom="left"][fullscreen]) #container{height:100%}}@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)}:host([fullscreen--desktop]:not([showfrom="left"]):not([showfrom="right"])) #container{height:90dvh}}@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 {
|
|
@@ -41,36 +41,46 @@ 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 e;
|
|
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", (t) => {
|
|
48
|
+
t.newState === "closed" && this.hide();
|
|
49
|
+
}), this.toggleFooterVisibility(), (e = this.$slotFooter) == null || e.addEventListener(
|
|
50
50
|
"slotchange",
|
|
51
51
|
this.toggleFooterVisibility
|
|
52
52
|
);
|
|
53
53
|
}
|
|
54
54
|
static get observedAttributes() {
|
|
55
|
-
return [
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
55
|
+
return [
|
|
56
|
+
"open",
|
|
57
|
+
"close-button-aria-label",
|
|
58
|
+
"openedby",
|
|
59
|
+
"closedby",
|
|
60
|
+
"fullscreen",
|
|
61
|
+
"fullscreen--mobile",
|
|
62
|
+
"fullscreen--tablet",
|
|
63
|
+
"fullscreen--laptop",
|
|
64
|
+
"fullscreen--desktop"
|
|
65
|
+
];
|
|
66
|
+
}
|
|
67
|
+
attributeChangedCallback(e, t, o) {
|
|
68
|
+
var s, i, a;
|
|
69
|
+
switch (e) {
|
|
60
70
|
case "open":
|
|
61
71
|
o !== null ? this.show() : this.hide();
|
|
62
72
|
break;
|
|
63
73
|
case "close-button-aria-label":
|
|
64
|
-
o ? (
|
|
74
|
+
o ? (a = (i = this.$closeButton) == null ? void 0 : i.setAttribute) == null || a.call(
|
|
65
75
|
i,
|
|
66
76
|
"aria-label",
|
|
67
77
|
o || "Close drawer"
|
|
68
|
-
) : (
|
|
78
|
+
) : (s = this.$closeButton) == null || s.removeAttribute("aria-label");
|
|
69
79
|
break;
|
|
70
80
|
case "openedby":
|
|
71
|
-
if (o !==
|
|
72
|
-
if (
|
|
73
|
-
const r = document.querySelector(`#${
|
|
81
|
+
if (o !== t) {
|
|
82
|
+
if (t) {
|
|
83
|
+
const r = document.querySelector(`#${t}`);
|
|
74
84
|
r == null || r.removeEventListener("click", () => this.show());
|
|
75
85
|
}
|
|
76
86
|
this.addOpenListener();
|
|
@@ -82,19 +92,19 @@ class h extends HTMLElement {
|
|
|
82
92
|
}
|
|
83
93
|
}
|
|
84
94
|
disconnectedCallback() {
|
|
85
|
-
var
|
|
86
|
-
(
|
|
95
|
+
var e, t;
|
|
96
|
+
(e = this.$slotFooter) == null || e.removeEventListener(
|
|
87
97
|
"slotchange",
|
|
88
98
|
this.toggleFooterVisibility
|
|
89
|
-
), (
|
|
99
|
+
), (t = this.observer) == null || t.disconnect(), this.$opener && this.$opener.removeEventListener("click", () => this.show()), this.$closer && this.$closer.removeEventListener("click", () => this.hide());
|
|
90
100
|
}
|
|
91
101
|
show() {
|
|
92
|
-
var
|
|
93
|
-
(
|
|
102
|
+
var e, t;
|
|
103
|
+
(t = (e = this.$dialog).showPopover) == null || t.call(e), document.body.style.overflow = "hidden";
|
|
94
104
|
}
|
|
95
105
|
hide() {
|
|
96
|
-
var
|
|
97
|
-
(
|
|
106
|
+
var e, t;
|
|
107
|
+
(t = (e = this.$dialog).hidePopover) == null || t.call(e), document.body.style.overflow = "", this.dispatchEvent(
|
|
98
108
|
new Event(d, {
|
|
99
109
|
bubbles: !0,
|
|
100
110
|
composed: !0
|
|
@@ -113,8 +123,8 @@ class h extends HTMLElement {
|
|
|
113
123
|
}));
|
|
114
124
|
}
|
|
115
125
|
addCloseListener() {
|
|
116
|
-
var
|
|
117
|
-
this.$closer && ((
|
|
126
|
+
var e;
|
|
127
|
+
this.$closer && ((e = this.$closer) == null || e.addEventListener("click", () => {
|
|
118
128
|
this.hide();
|
|
119
129
|
}));
|
|
120
130
|
}
|
|
@@ -148,26 +158,56 @@ class h extends HTMLElement {
|
|
|
148
158
|
get $footer() {
|
|
149
159
|
return this.shadowRoot.querySelector("#footer");
|
|
150
160
|
}
|
|
151
|
-
set open(
|
|
152
|
-
|
|
161
|
+
set open(e) {
|
|
162
|
+
e ? this.setAttribute("open", "") : this.removeAttribute("open");
|
|
153
163
|
}
|
|
154
164
|
get closeButtonAriaLabel() {
|
|
155
165
|
return this.getAttribute("close-button-aria-label");
|
|
156
166
|
}
|
|
157
|
-
set closeButtonAriaLabel(
|
|
158
|
-
this.setAttribute("close-button-aria-label",
|
|
167
|
+
set closeButtonAriaLabel(e) {
|
|
168
|
+
this.setAttribute("close-button-aria-label", e);
|
|
159
169
|
}
|
|
160
170
|
get openedby() {
|
|
161
171
|
return this.getAttribute("openedby");
|
|
162
172
|
}
|
|
163
|
-
set openedby(
|
|
164
|
-
this.setAttribute("openedby",
|
|
173
|
+
set openedby(e) {
|
|
174
|
+
this.setAttribute("openedby", e);
|
|
165
175
|
}
|
|
166
176
|
get closedby() {
|
|
167
177
|
return this.getAttribute("closedby");
|
|
168
178
|
}
|
|
169
|
-
set closedby(
|
|
170
|
-
this.setAttribute("closedby",
|
|
179
|
+
set closedby(e) {
|
|
180
|
+
this.setAttribute("closedby", e);
|
|
181
|
+
}
|
|
182
|
+
get fullscreen() {
|
|
183
|
+
return this.hasAttribute("fullscreen");
|
|
184
|
+
}
|
|
185
|
+
set fullscreen(e) {
|
|
186
|
+
e ? this.setAttribute("fullscreen", "") : this.removeAttribute("fullscreen");
|
|
187
|
+
}
|
|
188
|
+
get fullscreenMobile() {
|
|
189
|
+
return this.hasAttribute("fullscreen--mobile");
|
|
190
|
+
}
|
|
191
|
+
set fullscreenMobile(e) {
|
|
192
|
+
e ? this.setAttribute("fullscreen--mobile", "") : this.removeAttribute("fullscreen--mobile");
|
|
193
|
+
}
|
|
194
|
+
get fullscreenTablet() {
|
|
195
|
+
return this.hasAttribute("fullscreen--tablet");
|
|
196
|
+
}
|
|
197
|
+
set fullscreenTablet(e) {
|
|
198
|
+
e ? this.setAttribute("fullscreen--tablet", "") : this.removeAttribute("fullscreen--tablet");
|
|
199
|
+
}
|
|
200
|
+
get fullscreenLaptop() {
|
|
201
|
+
return this.hasAttribute("fullscreen--laptop");
|
|
202
|
+
}
|
|
203
|
+
set fullscreenLaptop(e) {
|
|
204
|
+
e ? this.setAttribute("fullscreen--laptop", "") : this.removeAttribute("fullscreen--laptop");
|
|
205
|
+
}
|
|
206
|
+
get fullscreenDesktop() {
|
|
207
|
+
return this.hasAttribute("fullscreen--desktop");
|
|
208
|
+
}
|
|
209
|
+
set fullscreenDesktop(e) {
|
|
210
|
+
e ? this.setAttribute("fullscreen--desktop", "") : this.removeAttribute("fullscreen--desktop");
|
|
171
211
|
}
|
|
172
212
|
}
|
|
173
213
|
customElements.get("px-drawer") || customElements.define("px-drawer", h);
|