@proximus/lavender-dropdown 1.4.10-beta.2 → 1.4.10-beta.4
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/Dropdown.d.ts +3 -0
- package/dist/index.es.js +42 -26
- package/package.json +1 -1
package/dist/Dropdown.d.ts
CHANGED
|
@@ -17,6 +17,7 @@ export declare class Dropdown extends WithExtraAttributes {
|
|
|
17
17
|
showPopover: () => void;
|
|
18
18
|
hidePopover: () => void;
|
|
19
19
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
20
|
+
updatePopoverHeight(newValue?: string): void;
|
|
20
21
|
private initPopover;
|
|
21
22
|
private get popoverId();
|
|
22
23
|
private get anchorName();
|
|
@@ -29,4 +30,6 @@ export declare class Dropdown extends WithExtraAttributes {
|
|
|
29
30
|
set usePolyfill(value: boolean);
|
|
30
31
|
get manualToggle(): boolean;
|
|
31
32
|
set manualToggle(value: boolean);
|
|
33
|
+
get popoverHeight(): string;
|
|
34
|
+
set popoverHeight(value: string);
|
|
32
35
|
}
|
package/dist/index.es.js
CHANGED
|
@@ -1,35 +1,35 @@
|
|
|
1
1
|
var $ = (o) => {
|
|
2
2
|
throw TypeError(o);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var g = (o, e, t) => (
|
|
4
|
+
var m = (o, e, t) => e.has(o) || $("Cannot " + t);
|
|
5
|
+
var g = (o, e, t) => (m(o, e, "read from private field"), t ? t.call(o) : e.get(o)), d = (o, e, t) => e.has(o) ? $("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(o) : e.set(o, t), u = (o, e, t, r) => (m(o, e, "write to private field"), r ? r.call(o, t) : e.set(o, t), t), v = (o, e, t) => (m(o, e, "access private method"), t);
|
|
6
6
|
import { WithExtraAttributes as T, log as k } from "@proximus/lavender-common";
|
|
7
|
-
const
|
|
7
|
+
const N = ':host{position:relative}::slotted([slot="popover"]){position:fixed;border-radius:var(--px-radius-main, 8px);background:var(--px-color-background-container-light-default, #fff);box-shadow:0 20px 25px -5px #25252514;margin:0;padding:var(--px-padding-xs-mobile) 0;border:0;right:0;width:auto;max-height:var(--px-popover-max-height)}:host([grow]) ::slotted([slot="trigger"]):after{right:0;padding-right:var(--px-padding-xs-mobile)}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="bottom-right"]) ::slotted([slot="popover"]){left:auto}@media screen and (max-width: 47.938rem){::slotted([slot="trigger"]){display:block;width:100%}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}}@media screen and (min-width: 48rem){::slotted([slot="popover"]){padding-block:var(--px-padding-s-desktop);right:auto;width:auto}}', C = [
|
|
8
8
|
"top-left",
|
|
9
9
|
"top-right",
|
|
10
10
|
"bottom-left",
|
|
11
11
|
"bottom-right"
|
|
12
12
|
];
|
|
13
|
-
function x(o, e, t = "bottom-left",
|
|
14
|
-
"anchorName" in document.documentElement.style &&
|
|
15
|
-
var
|
|
13
|
+
function x(o, e, t = "bottom-left", r, s = !1) {
|
|
14
|
+
"anchorName" in document.documentElement.style && s === !1 || e.addEventListener("toggle", () => {
|
|
15
|
+
var b, f;
|
|
16
16
|
if (!o || !e)
|
|
17
17
|
return;
|
|
18
|
-
const i = o.getBoundingClientRect(),
|
|
19
|
-
(
|
|
18
|
+
const i = o.getBoundingClientRect(), P = ((b = window.visualViewport) == null ? void 0 : b.height) ?? window.innerHeight, l = ((f = window.visualViewport) == null ? void 0 : f.width) ?? window.innerWidth, p = r.getPropertyValue("--px-padding-s-mobile") || "16px", E = parseInt(
|
|
19
|
+
(r.getPropertyValue("--px-icon-size-xs-desktop") || "24").replace("px", "")
|
|
20
20
|
);
|
|
21
|
-
["top-left", "top-right"].includes(t) ? (e.style.bottom = `calc( ${p} + ${
|
|
21
|
+
["top-left", "top-right"].includes(t) ? (e.style.bottom = `calc( ${p} + ${P - i.top - window.scrollY}px)`, e.style.top = "auto", t === "top-left" ? e.style.left = l < 768 ? `${p}px` : `${i.left}px` : e.style.right = l < 768 ? `${p}px` : `${l - i.right}px`) : (e.style.top = `${i.bottom + window.scrollY}px`, t === "bottom-left" ? e.style.left = l < 768 ? `${p}px` : `${i.left}px` : e.style.right = l < 768 ? `${p}px` : `${l - i.right - E}px`);
|
|
22
22
|
});
|
|
23
23
|
}
|
|
24
24
|
const y = new CSSStyleSheet();
|
|
25
|
-
y.replaceSync(
|
|
25
|
+
y.replaceSync(N);
|
|
26
26
|
const c = "bottom-left";
|
|
27
|
-
var
|
|
27
|
+
var n, A, h, a, w;
|
|
28
28
|
class S extends T {
|
|
29
29
|
constructor() {
|
|
30
30
|
super(y);
|
|
31
|
-
d(this, h);
|
|
32
31
|
d(this, n);
|
|
32
|
+
d(this, h);
|
|
33
33
|
d(this, a);
|
|
34
34
|
this.template = () => `
|
|
35
35
|
<style>${this.css}</style>
|
|
@@ -40,9 +40,9 @@ class S extends T {
|
|
|
40
40
|
this.isAboutToClose || this.$popoverElement.showPopover();
|
|
41
41
|
}, this.hidePopover = () => {
|
|
42
42
|
this.$popoverElement.hidePopover();
|
|
43
|
-
},
|
|
43
|
+
}, u(this, h, () => {
|
|
44
44
|
this.$popoverElement.matches(":popover-open") && (this.isAboutToClose = !0, this.manualToggle || (this.$trigger.ariaExpanded = "false"));
|
|
45
|
-
}),
|
|
45
|
+
}), u(this, a, () => {
|
|
46
46
|
this.$popoverElement.matches(":popover-open") || setTimeout(() => {
|
|
47
47
|
this.isAboutToClose = !1;
|
|
48
48
|
});
|
|
@@ -58,7 +58,7 @@ class S extends T {
|
|
|
58
58
|
anchor-name: ${this.anchorName};
|
|
59
59
|
}
|
|
60
60
|
:host([anchoralignment="bottom-left"]) {
|
|
61
|
-
::slotted([
|
|
61
|
+
::slotted([popover]) {
|
|
62
62
|
position-anchor: ${this.anchorName};
|
|
63
63
|
top: anchor(${this.anchorName} bottom);
|
|
64
64
|
left: anchor(${this.anchorName} left);
|
|
@@ -92,7 +92,8 @@ class S extends T {
|
|
|
92
92
|
"id",
|
|
93
93
|
"anchoralignment",
|
|
94
94
|
"use-polyfill",
|
|
95
|
-
"manual-toggle"
|
|
95
|
+
"manual-toggle",
|
|
96
|
+
"popover-height"
|
|
96
97
|
];
|
|
97
98
|
}
|
|
98
99
|
connectedCallback() {
|
|
@@ -107,9 +108,9 @@ class S extends T {
|
|
|
107
108
|
this.usePolyfill
|
|
108
109
|
);
|
|
109
110
|
}
|
|
110
|
-
attributeChangedCallback(t,
|
|
111
|
+
attributeChangedCallback(t, r, s) {
|
|
111
112
|
var i;
|
|
112
|
-
if (
|
|
113
|
+
if (r !== s)
|
|
113
114
|
switch (t) {
|
|
114
115
|
case "id":
|
|
115
116
|
this.initPopover();
|
|
@@ -124,15 +125,24 @@ class S extends T {
|
|
|
124
125
|
);
|
|
125
126
|
break;
|
|
126
127
|
case "manual-toggle":
|
|
127
|
-
|
|
128
|
+
s != null && ((i = this.$trigger) == null || i.removeAttribute("aria-expanded"));
|
|
129
|
+
break;
|
|
130
|
+
case "popover-height":
|
|
131
|
+
this.updatePopoverHeight(s);
|
|
128
132
|
break;
|
|
129
133
|
default:
|
|
130
|
-
super.attributeChangedCallback(t,
|
|
134
|
+
super.attributeChangedCallback(t, r, s);
|
|
131
135
|
break;
|
|
132
136
|
}
|
|
133
137
|
}
|
|
138
|
+
updatePopoverHeight(t) {
|
|
139
|
+
t ? this.$popoverElement.style.setProperty(
|
|
140
|
+
"--px-popover-max-height",
|
|
141
|
+
t
|
|
142
|
+
) : this.$popoverElement.style.removeProperty("--px-popover-max-height");
|
|
143
|
+
}
|
|
134
144
|
initPopover() {
|
|
135
|
-
this.$trigger && (this.$trigger.setAttribute("popovertarget", this.popoverId), this.$trigger.setAttribute("aria-controls", this.getAttribute("id")), this.hasAttribute("manual-toggle") || this.$trigger.setAttribute("aria-expanded", "false"), this.$popoverElement.setAttribute("id", this.popoverId), this.$popoverElement.setAttribute("popover", ""), this.$style.innerHTML = this.css,
|
|
145
|
+
this.$trigger && (this.$trigger.setAttribute("popovertarget", this.popoverId), this.$trigger.setAttribute("aria-controls", this.getAttribute("id")), this.hasAttribute("manual-toggle") || this.$trigger.setAttribute("aria-expanded", "false"), this.$popoverElement.setAttribute("id", this.popoverId), this.$popoverElement.setAttribute("popover", ""), this.$style.innerHTML = this.css, v(this, n, A).call(this), v(this, n, w).call(this));
|
|
136
146
|
}
|
|
137
147
|
get popoverId() {
|
|
138
148
|
return `${this.getAttribute("id")}-popover`;
|
|
@@ -153,7 +163,7 @@ class S extends T {
|
|
|
153
163
|
return this.getAttribute("anchoralignment") || c;
|
|
154
164
|
}
|
|
155
165
|
set anchorAlignment(t) {
|
|
156
|
-
|
|
166
|
+
C.includes(t) ? this.setAttribute("anchoralignment", t) : (k(
|
|
157
167
|
`Invalid anchor alignment value: ${t}. Using default ${c}.`
|
|
158
168
|
), this.setAttribute("anchoralignment", c));
|
|
159
169
|
}
|
|
@@ -169,13 +179,19 @@ class S extends T {
|
|
|
169
179
|
set manualToggle(t) {
|
|
170
180
|
t ? this.setAttribute("manual-toggle", "") : this.removeAttribute("manual-toggle");
|
|
171
181
|
}
|
|
182
|
+
get popoverHeight() {
|
|
183
|
+
return this.getAttribute("popover-height");
|
|
184
|
+
}
|
|
185
|
+
set popoverHeight(t) {
|
|
186
|
+
t ? this.setAttribute("popover-height", t) : this.removeAttribute("popover-height");
|
|
187
|
+
}
|
|
172
188
|
}
|
|
173
|
-
|
|
189
|
+
n = new WeakSet(), A = function() {
|
|
174
190
|
this.isAboutToClose = !1, this.manualToggle || this.$trigger.removeEventListener("click", this.triggerPopoverDisplay), this.$popoverElement.removeEventListener(
|
|
175
191
|
"beforetoggle",
|
|
176
|
-
g(this,
|
|
192
|
+
g(this, h)
|
|
177
193
|
), this.$popoverElement.removeEventListener("toggle", g(this, a));
|
|
178
|
-
},
|
|
194
|
+
}, h = new WeakMap(), a = new WeakMap(), /**
|
|
179
195
|
* Handles the manual display of the popover when the trigger is clicked.
|
|
180
196
|
* This is necessary for cases where the trigger is not a button or input element.
|
|
181
197
|
* This method adds event listeners to the trigger element to toggle the popover.
|
|
@@ -183,7 +199,7 @@ h = new WeakSet(), A = function() {
|
|
|
183
199
|
* race conditions when the popover is toggled and the trigger click event is fired.
|
|
184
200
|
*/
|
|
185
201
|
w = function() {
|
|
186
|
-
this.$trigger && (this.manualToggle || this.$trigger.addEventListener("click", this.triggerPopoverDisplay), this.$popoverElement.addEventListener("beforetoggle", g(this,
|
|
202
|
+
this.$trigger && !["button", "input"].includes(this.$trigger.localName) && (this.manualToggle || this.$trigger.addEventListener("click", this.triggerPopoverDisplay), this.$popoverElement.addEventListener("beforetoggle", g(this, h)), this.$popoverElement.addEventListener("toggle", g(this, a)));
|
|
187
203
|
};
|
|
188
204
|
customElements.get("px-dropdown") || customElements.define("px-dropdown", S);
|
|
189
205
|
export {
|