@proximus/lavender-dropdown 2.0.0-alpha.111 → 2.0.0-alpha.113
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 +17 -17
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -2,27 +2,27 @@ var $ = (o) => {
|
|
|
2
2
|
throw TypeError(o);
|
|
3
3
|
};
|
|
4
4
|
var u = (o, e, t) => e.has(o) || $("Cannot " + t);
|
|
5
|
-
var g = (o, e, t) => (u(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), m = (o, e, t,
|
|
6
|
-
import { WithExtraAttributes as T, log as
|
|
7
|
-
const
|
|
5
|
+
var g = (o, e, t) => (u(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), m = (o, e, t, r) => (u(o, e, "write to private field"), r ? r.call(o, t) : e.set(o, t), t), f = (o, e, t) => (u(o, e, "access private method"), t);
|
|
6
|
+
import { WithExtraAttributes as T, log as N } from "@proximus/lavender-common";
|
|
7
|
+
const k = ':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}: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, v;
|
|
16
16
|
if (!o || !e)
|
|
17
17
|
return;
|
|
18
|
-
const i = o.getBoundingClientRect(), E = ((
|
|
19
|
-
(
|
|
18
|
+
const i = o.getBoundingClientRect(), E = ((b = window.visualViewport) == null ? void 0 : b.height) ?? window.innerHeight, l = ((v = window.visualViewport) == null ? void 0 : v.width) ?? window.innerWidth, p = r.getPropertyValue("--px-padding-s-mobile") || "16px", P = parseInt(
|
|
19
|
+
(r.getPropertyValue("--px-icon-size-xs-desktop") || "24").replace("px", "")
|
|
20
20
|
);
|
|
21
21
|
["top-left", "top-right"].includes(t) ? (e.style.bottom = `calc( ${p} + ${E - 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 - P}px`);
|
|
22
22
|
});
|
|
23
23
|
}
|
|
24
24
|
const y = new CSSStyleSheet();
|
|
25
|
-
y.replaceSync(
|
|
25
|
+
y.replaceSync(k);
|
|
26
26
|
const c = "bottom-left";
|
|
27
27
|
var h, A, n, a, w;
|
|
28
28
|
class S extends T {
|
|
@@ -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);
|
|
@@ -107,9 +107,9 @@ class S extends T {
|
|
|
107
107
|
this.usePolyfill
|
|
108
108
|
);
|
|
109
109
|
}
|
|
110
|
-
attributeChangedCallback(t,
|
|
110
|
+
attributeChangedCallback(t, r, s) {
|
|
111
111
|
var i;
|
|
112
|
-
if (
|
|
112
|
+
if (r !== s)
|
|
113
113
|
switch (t) {
|
|
114
114
|
case "id":
|
|
115
115
|
this.initPopover();
|
|
@@ -124,15 +124,15 @@ class S extends T {
|
|
|
124
124
|
);
|
|
125
125
|
break;
|
|
126
126
|
case "manual-toggle":
|
|
127
|
-
|
|
127
|
+
s != null && ((i = this.$trigger) == null || i.removeAttribute("aria-expanded"));
|
|
128
128
|
break;
|
|
129
129
|
default:
|
|
130
|
-
super.attributeChangedCallback(t,
|
|
130
|
+
super.attributeChangedCallback(t, r, s);
|
|
131
131
|
break;
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
134
|
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,
|
|
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, f(this, h, A).call(this), f(this, h, w).call(this));
|
|
136
136
|
}
|
|
137
137
|
get popoverId() {
|
|
138
138
|
return `${this.getAttribute("id")}-popover`;
|
|
@@ -153,7 +153,7 @@ class S extends T {
|
|
|
153
153
|
return this.getAttribute("anchoralignment") || c;
|
|
154
154
|
}
|
|
155
155
|
set anchorAlignment(t) {
|
|
156
|
-
|
|
156
|
+
C.includes(t) ? this.setAttribute("anchoralignment", t) : (N(
|
|
157
157
|
`Invalid anchor alignment value: ${t}. Using default ${c}.`
|
|
158
158
|
), this.setAttribute("anchoralignment", c));
|
|
159
159
|
}
|
|
@@ -183,7 +183,7 @@ h = new WeakSet(), A = function() {
|
|
|
183
183
|
* race conditions when the popover is toggled and the trigger click event is fired.
|
|
184
184
|
*/
|
|
185
185
|
w = function() {
|
|
186
|
-
this.$trigger && (this.manualToggle || this.$trigger.addEventListener("click", this.triggerPopoverDisplay), this.$popoverElement.addEventListener("beforetoggle", g(this, n)), this.$popoverElement.addEventListener("toggle", g(this, a)));
|
|
186
|
+
this.$trigger && !["button", "input"].includes(this.$trigger.localName) && (this.manualToggle || this.$trigger.addEventListener("click", this.triggerPopoverDisplay), this.$popoverElement.addEventListener("beforetoggle", g(this, n)), this.$popoverElement.addEventListener("toggle", g(this, a)));
|
|
187
187
|
};
|
|
188
188
|
customElements.get("px-dropdown") || customElements.define("px-dropdown", S);
|
|
189
189
|
export {
|