@proximus/lavender-drawer 1.4.10-alpha.1 → 1.4.10-alpha.3
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/index.es.js +27 -27
- package/package.json +1 -1
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
|
|
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 {
|
|
@@ -41,12 +41,12 @@ 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
|
);
|
|
@@ -54,9 +54,9 @@ class h extends HTMLElement {
|
|
|
54
54
|
static get observedAttributes() {
|
|
55
55
|
return ["open", "aria-label-close-button", "openedby", "closedby"];
|
|
56
56
|
}
|
|
57
|
-
attributeChangedCallback(
|
|
57
|
+
attributeChangedCallback(t, e, o) {
|
|
58
58
|
var a, i, s;
|
|
59
|
-
switch (
|
|
59
|
+
switch (t) {
|
|
60
60
|
case "open":
|
|
61
61
|
o !== null ? this.show() : this.hide();
|
|
62
62
|
break;
|
|
@@ -68,9 +68,9 @@ class h extends HTMLElement {
|
|
|
68
68
|
) : (a = this.$closeButton) == null || a.removeAttribute("aria-label");
|
|
69
69
|
break;
|
|
70
70
|
case "openedby":
|
|
71
|
-
if (o !==
|
|
72
|
-
if (
|
|
73
|
-
const r = document.querySelector(`#${
|
|
71
|
+
if (o !== e) {
|
|
72
|
+
if (e) {
|
|
73
|
+
const r = document.querySelector(`#${e}`);
|
|
74
74
|
r == null || r.removeEventListener("click", () => this.show());
|
|
75
75
|
}
|
|
76
76
|
this.addOpenListener();
|
|
@@ -82,19 +82,19 @@ class h extends HTMLElement {
|
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
disconnectedCallback() {
|
|
85
|
-
var
|
|
86
|
-
(
|
|
85
|
+
var t, e;
|
|
86
|
+
(t = this.$slotFooter) == null || t.removeEventListener(
|
|
87
87
|
"slotchange",
|
|
88
88
|
this.toggleFooterVisibility
|
|
89
|
-
), (
|
|
89
|
+
), (e = this.observer) == null || e.disconnect(), this.$opener && this.$opener.removeEventListener("click", () => this.show()), this.$closer && this.$closer.removeEventListener("click", () => this.hide());
|
|
90
90
|
}
|
|
91
91
|
show() {
|
|
92
|
-
var
|
|
93
|
-
(
|
|
92
|
+
var t, e;
|
|
93
|
+
(e = (t = this.$dialog).showPopover) == null || e.call(t), document.body.style.overflow = "hidden";
|
|
94
94
|
}
|
|
95
95
|
hide() {
|
|
96
|
-
var
|
|
97
|
-
(
|
|
96
|
+
var t, e;
|
|
97
|
+
(e = (t = this.$dialog).hidePopover) == null || e.call(t), document.body.style.overflow = "", this.dispatchEvent(
|
|
98
98
|
new Event(d, {
|
|
99
99
|
bubbles: !0,
|
|
100
100
|
composed: !0
|
|
@@ -113,8 +113,8 @@ class h extends HTMLElement {
|
|
|
113
113
|
}));
|
|
114
114
|
}
|
|
115
115
|
addCloseListener() {
|
|
116
|
-
var
|
|
117
|
-
this.$closer && ((
|
|
116
|
+
var t;
|
|
117
|
+
this.$closer && ((t = this.$closer) == null || t.addEventListener("click", () => {
|
|
118
118
|
this.hide();
|
|
119
119
|
}));
|
|
120
120
|
}
|
|
@@ -148,26 +148,26 @@ class h extends HTMLElement {
|
|
|
148
148
|
get $footer() {
|
|
149
149
|
return this.shadowRoot.querySelector("#footer");
|
|
150
150
|
}
|
|
151
|
-
set open(
|
|
152
|
-
|
|
151
|
+
set open(t) {
|
|
152
|
+
t ? this.setAttribute("open", "") : this.removeAttribute("open");
|
|
153
153
|
}
|
|
154
154
|
get AriaLabelCloseButton() {
|
|
155
155
|
return this.getAttribute("aria-label-close-button");
|
|
156
156
|
}
|
|
157
|
-
set AriaLabelCloseButton(
|
|
158
|
-
this.setAttribute("aria-label-close-button",
|
|
157
|
+
set AriaLabelCloseButton(t) {
|
|
158
|
+
this.setAttribute("aria-label-close-button", t);
|
|
159
159
|
}
|
|
160
160
|
get openedby() {
|
|
161
161
|
return this.getAttribute("openedby");
|
|
162
162
|
}
|
|
163
|
-
set openedby(
|
|
164
|
-
this.setAttribute("openedby",
|
|
163
|
+
set openedby(t) {
|
|
164
|
+
this.setAttribute("openedby", t);
|
|
165
165
|
}
|
|
166
166
|
get closedby() {
|
|
167
167
|
return this.getAttribute("closedby");
|
|
168
168
|
}
|
|
169
|
-
set closedby(
|
|
170
|
-
this.setAttribute("closedby",
|
|
169
|
+
set closedby(t) {
|
|
170
|
+
this.setAttribute("closedby", t);
|
|
171
171
|
}
|
|
172
172
|
}
|
|
173
173
|
customElements.get("px-drawer") || customElements.define("px-drawer", h);
|