@proximus/lavender-drawer 1.4.1-alpha.9 → 1.4.1
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 +2 -5
- package/dist/index.es.js +33 -52
- package/package.json +1 -1
package/dist/Drawer.d.ts
CHANGED
|
@@ -11,16 +11,13 @@ export declare class Drawer extends HTMLElement {
|
|
|
11
11
|
connectedCallback(): void;
|
|
12
12
|
static get observedAttributes(): string[];
|
|
13
13
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
14
|
-
disconnectedCallback(): void;
|
|
15
14
|
show(): void;
|
|
16
15
|
hide(): void;
|
|
17
|
-
toggleFooterVisibility(): void;
|
|
18
16
|
get $closeButton(): Icon;
|
|
19
17
|
get $dialog(): HTMLDialogElement;
|
|
20
18
|
get open(): boolean;
|
|
21
|
-
get $
|
|
22
|
-
get $
|
|
23
|
-
get $footer(): HTMLElement;
|
|
19
|
+
get $buttons(): NodeListOf<Element>;
|
|
20
|
+
get $separator(): HTMLElement;
|
|
24
21
|
set open(value: boolean);
|
|
25
22
|
get ariaLabelCloseButton(): string;
|
|
26
23
|
set ariaLabelCloseButton(value: string);
|
package/dist/index.es.js
CHANGED
|
@@ -3,25 +3,25 @@ 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 n = '
|
|
6
|
+
const n = '#container{border:0;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default);box-sizing:border-box}:host([showfrom="bottom"]) #container{height:auto;margin-bottom:0;width:100%}px-button-icon{position:absolute;top:var(--px-padding-l-desktop);right:var(--px-padding-l-desktop)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;width:75%}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{overflow:auto}@media screen and (min-width: 1080px){#container{height:100%;padding:var(--px-padding-l-desktop)}:host([showfrom="right"]) px-button-icon{right:10.625em}:host([showfrom="right"]) #container{padding-right:10.625em;border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}:host([showfrom="left"]) px-button-icon{right:var(--px-padding-l-desktop)}:host([showfrom="left"]) #container{padding-left:10.625em;border-radius:0 var(--px-radius-main) var(--px-radius-main) 0}:host([showfrom="bottom"]) #container{box-sizing:border-box}:host([showfrom="left"])>dialog{margin-left:0;animation:dialog-fade-in-left .3s;height:100%}:host([showfrom="bottom"])>dialog{margin-bottom:0;margin-inline:0;width:100%;animation:dialog-fade-in-bottom .3s}:host([showfrom="right"])>dialog{margin-right:0;animation:dialog-fade-in-right .3s;height:100%}#content{max-height:calc(100dvh - 22.625em)}}@media only screen and (max-width: 67.563em){dialog{width:100%}:host([showfrom="left"])>dialog,:host([showfrom="right"])>dialog,:host([showfrom="bottom"])>dialog{margin-bottom:0;margin-inline:0;height:revert;animation:dialog-fade-in-bottom .3s}#container{width:100%;box-sizing:border-box;padding:var(--px-padding-m-mobile);border-radius:var(--px-radius-main) var(--px-radius-main) 0 0}px-button-icon{top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}#content{min-height:2.813em;max-height:50dvh}}@keyframes dialog-fade-in-right{0%{margin-right:-67.5em}to{margin-right:0}}@keyframes dialog-fade-in-left{0%{margin-left:-67.5em}to{margin-left:0}}@keyframes dialog-fade-in-bottom{0%{margin-bottom:-12.5em}to{margin-bottom:0}}', s = new CSSStyleSheet();
|
|
7
7
|
s.replaceSync(n);
|
|
8
|
-
const
|
|
9
|
-
class
|
|
8
|
+
const d = "px.lavender.drawer.hide";
|
|
9
|
+
class l extends HTMLElement {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(), this.template = `<dialog popover role="dialog" aria-modal="true" >
|
|
12
12
|
<div id="container">
|
|
13
|
-
<px-vstack gap="
|
|
14
|
-
<px-
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
13
|
+
<px-vstack gap="l" >
|
|
14
|
+
<px-vstack gap="heading-to-subtitle">
|
|
15
|
+
<px-h1 variant="title-2xl">
|
|
16
|
+
<slot name="title"></slot>
|
|
17
|
+
</px-h1>
|
|
18
|
+
<px-h2 variant="subtitle" color="neutral">
|
|
19
|
+
<slot name="subtitle"></slot>
|
|
20
|
+
</px-h2>
|
|
21
|
+
</px-vstack>
|
|
22
|
+
<div id="content">
|
|
23
|
+
<slot></slot>
|
|
24
|
+
</div>
|
|
25
25
|
<px-separator size="m"></px-separator>
|
|
26
26
|
<px-stack
|
|
27
27
|
gap="s"
|
|
@@ -34,54 +34,43 @@ class d extends HTMLElement {
|
|
|
34
34
|
<slot name="footer"></slot>
|
|
35
35
|
</px-stack>
|
|
36
36
|
</px-vstack>
|
|
37
|
-
<px-button-icon variant="secondary" size="small"
|
|
37
|
+
<px-button-icon variant="secondary" size="small">
|
|
38
38
|
<px-icon name="cross" from="lavender"></px-icon>
|
|
39
39
|
</px-button-icon>
|
|
40
40
|
</div>
|
|
41
|
-
</dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [s], this.
|
|
41
|
+
</dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [s], this.hasAttribute("showfrom") || this.setAttribute("showfrom", "bottom");
|
|
42
42
|
}
|
|
43
43
|
connectedCallback() {
|
|
44
|
-
var t;
|
|
45
44
|
if (this.hasAttribute("closedby")) {
|
|
46
|
-
const
|
|
45
|
+
const t = document.querySelector(
|
|
47
46
|
`#${this.getAttribute("closedby")}`
|
|
48
47
|
);
|
|
49
|
-
|
|
48
|
+
t == null || t.addEventListener("click", () => {
|
|
50
49
|
this.hide();
|
|
51
50
|
});
|
|
52
51
|
}
|
|
53
52
|
if (this.hasAttribute("openedby")) {
|
|
54
|
-
const
|
|
53
|
+
const t = document.querySelector(
|
|
55
54
|
`px-button#${this.getAttribute("openedby")}`
|
|
56
55
|
);
|
|
57
|
-
|
|
56
|
+
t == null || t.addEventListener("click", () => {
|
|
58
57
|
this.show();
|
|
59
58
|
});
|
|
60
59
|
}
|
|
61
60
|
this.$closeButton.addEventListener("click", () => {
|
|
62
61
|
this.hide();
|
|
63
|
-
}), this.
|
|
64
|
-
"slotchange",
|
|
65
|
-
this.toggleFooterVisibility
|
|
66
|
-
);
|
|
62
|
+
}), this.$buttons.length === 0 && this.$separator.remove();
|
|
67
63
|
}
|
|
68
64
|
static get observedAttributes() {
|
|
69
65
|
return ["open", "aria-label-close-button"];
|
|
70
66
|
}
|
|
71
67
|
attributeChangedCallback(t, e, i) {
|
|
72
|
-
var
|
|
73
|
-
t === "open" ? i !== null ? this.show() : this.hide() : t === "aria-label-close-button" && (i ? (
|
|
68
|
+
var r, o, a;
|
|
69
|
+
t === "open" ? i !== null ? this.show() : this.hide() : t === "aria-label-close-button" && (i ? (a = (o = this.$closeButton) == null ? void 0 : o.setAttribute) == null || a.call(
|
|
74
70
|
o,
|
|
75
71
|
"aria-label",
|
|
76
72
|
i || "Close drawer"
|
|
77
|
-
) : (
|
|
78
|
-
}
|
|
79
|
-
disconnectedCallback() {
|
|
80
|
-
var t;
|
|
81
|
-
(t = this.$slotFooter) == null || t.removeEventListener(
|
|
82
|
-
"slotchange",
|
|
83
|
-
this.toggleFooterVisibility
|
|
84
|
-
);
|
|
73
|
+
) : (r = this.$closeButton) == null || r.removeAttribute("aria-label"));
|
|
85
74
|
}
|
|
86
75
|
show() {
|
|
87
76
|
var t, e;
|
|
@@ -90,15 +79,12 @@ class d extends HTMLElement {
|
|
|
90
79
|
hide() {
|
|
91
80
|
var t, e;
|
|
92
81
|
(e = (t = this.$dialog).hidePopover) == null || e.call(t), this.dispatchEvent(
|
|
93
|
-
new Event(
|
|
82
|
+
new Event(d, {
|
|
94
83
|
bubbles: !0,
|
|
95
84
|
composed: !0
|
|
96
85
|
})
|
|
97
86
|
);
|
|
98
87
|
}
|
|
99
|
-
toggleFooterVisibility() {
|
|
100
|
-
this.$slottedFooter ? this.$footer.style.display = "block" : this.$footer.style.display = "none";
|
|
101
|
-
}
|
|
102
88
|
get $closeButton() {
|
|
103
89
|
return this.shadowRoot.querySelector("px-button-icon");
|
|
104
90
|
}
|
|
@@ -108,16 +94,11 @@ class d extends HTMLElement {
|
|
|
108
94
|
get open() {
|
|
109
95
|
return this.hasAttribute("open");
|
|
110
96
|
}
|
|
111
|
-
get $
|
|
112
|
-
return this.
|
|
113
|
-
'slot[name="footer"]'
|
|
114
|
-
);
|
|
115
|
-
}
|
|
116
|
-
get $slottedFooter() {
|
|
117
|
-
return this.querySelector('[slot="footer"]');
|
|
97
|
+
get $buttons() {
|
|
98
|
+
return this.querySelectorAll('[slot="footer"]');
|
|
118
99
|
}
|
|
119
|
-
get $
|
|
120
|
-
return this.shadowRoot.querySelector("
|
|
100
|
+
get $separator() {
|
|
101
|
+
return this.shadowRoot.querySelector("px-separator");
|
|
121
102
|
}
|
|
122
103
|
set open(t) {
|
|
123
104
|
t ? this.setAttribute("open", "") : this.removeAttribute("open");
|
|
@@ -129,8 +110,8 @@ class d extends HTMLElement {
|
|
|
129
110
|
this.setAttribute("aria-label-close-button", t);
|
|
130
111
|
}
|
|
131
112
|
}
|
|
132
|
-
customElements.get("px-drawer") || customElements.define("px-drawer",
|
|
113
|
+
customElements.get("px-drawer") || customElements.define("px-drawer", l);
|
|
133
114
|
export {
|
|
134
|
-
|
|
135
|
-
|
|
115
|
+
l as Drawer,
|
|
116
|
+
d as HIDE_EVENT
|
|
136
117
|
};
|