@proximus/lavender-dropdown 1.4.10-beta.4 → 1.4.10

package/dist/Dropdown.d.ts

@@ -17,7 +17,6 @@ export declare class Dropdown extends WithExtraAttributes {
     showPopover: () => void;
     hidePopover: () => void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    updatePopoverHeight(newValue?: string): void;
     private initPopover;
     private get popoverId();
     private get anchorName();
@@ -30,6 +29,4 @@ export declare class Dropdown extends WithExtraAttributes {
     set usePolyfill(value: boolean);
     get manualToggle(): boolean;
     set manualToggle(value: boolean);
-    get popoverHeight(): string;
-    set popoverHeight(value: string);
 }

package/dist/index.es.js

@@ -1,35 +1,35 @@
 var $ = (o) => {
   throw TypeError(o);
 };
-var m = (o, e, t) => e.has(o) || $("Cannot " + t);
-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);
+var u = (o, e, t) => e.has(o) || $("Cannot " + t);
+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, s) => (u(o, e, "write to private field"), s ? s.call(o, t) : e.set(o, t), t), b = (o, e, t) => (u(o, e, "access private method"), t);
 import { WithExtraAttributes as T, log as k } from "@proximus/lavender-common";
-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 = [
+const C = ':host{position:relative}::slotted([slot="popover"]){position:absolute;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}}', N = [
   "top-left",
   "top-right",
   "bottom-left",
   "bottom-right"
 ];
-function x(o, e, t = "bottom-left", r, s = !1) {
-  "anchorName" in document.documentElement.style && s === !1 || e.addEventListener("toggle", () => {
-    var b, f;
+function x(o, e, t = "bottom-left", s, r = !1) {
+  "anchorName" in document.documentElement.style && r === !1 || e.addEventListener("toggle", () => {
+    var f, v;
     if (!o || !e)
       return;
-    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(
-      (r.getPropertyValue("--px-icon-size-xs-desktop") || "24").replace("px", "")
+    const i = o.getBoundingClientRect(), E = ((f = window.visualViewport) == null ? void 0 : f.height) ?? window.innerHeight, l = ((v = window.visualViewport) == null ? void 0 : v.width) ?? window.innerWidth, p = s.getPropertyValue("--px-padding-s-mobile") || "16px", P = parseInt(
+      (s.getPropertyValue("--px-icon-size-xs-desktop") || "24").replace("px", "")
     );
-    ["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`);
+    ["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`);
   });
 }
 const y = new CSSStyleSheet();
-y.replaceSync(N);
+y.replaceSync(C);
 const c = "bottom-left";
-var n, A, h, a, w;
+var h, A, n, a, w;
 class S extends T {
   constructor() {
     super(y);
-    d(this, n);
     d(this, h);
+    d(this, n);
     d(this, a);
     this.template = () => `
   <style>${this.css}</style>
@@ -40,9 +40,9 @@ class S extends T {
       this.isAboutToClose || this.$popoverElement.showPopover();
     }, this.hidePopover = () => {
       this.$popoverElement.hidePopover();
-    }, u(this, h, () => {
+    }, m(this, n, () => {
       this.$popoverElement.matches(":popover-open") && (this.isAboutToClose = !0, this.manualToggle || (this.$trigger.ariaExpanded = "false"));
-    }), u(this, a, () => {
+    }), m(this, a, () => {
       this.$popoverElement.matches(":popover-open") || setTimeout(() => {
         this.isAboutToClose = !1;
       });
@@ -58,7 +58,7 @@ class S extends T {
       anchor-name: ${this.anchorName};
     }
     :host([anchoralignment="bottom-left"]) {
-      ::slotted([popover]) {
+      ::slotted([slot="popover"]) {
         position-anchor: ${this.anchorName};
         top: anchor(${this.anchorName} bottom);
         left: anchor(${this.anchorName} left);
@@ -92,8 +92,7 @@ class S extends T {
       "id",
       "anchoralignment",
       "use-polyfill",
-      "manual-toggle",
-      "popover-height"
+      "manual-toggle"
     ];
   }
   connectedCallback() {
@@ -108,9 +107,9 @@ class S extends T {
       this.usePolyfill
     );
   }
-  attributeChangedCallback(t, r, s) {
+  attributeChangedCallback(t, s, r) {
     var i;
-    if (r !== s)
+    if (s !== r)
       switch (t) {
         case "id":
           this.initPopover();
@@ -125,24 +124,15 @@ class S extends T {
           );
           break;
         case "manual-toggle":
-          s != null && ((i = this.$trigger) == null || i.removeAttribute("aria-expanded"));
-          break;
-        case "popover-height":
-          this.updatePopoverHeight(s);
+          r != null && ((i = this.$trigger) == null || i.removeAttribute("aria-expanded"));
           break;
         default:
-          super.attributeChangedCallback(t, r, s);
+          super.attributeChangedCallback(t, s, r);
           break;
       }
   }
-  updatePopoverHeight(t) {
-    t ? this.$popoverElement.style.setProperty(
-      "--px-popover-max-height",
-      t
-    ) : this.$popoverElement.style.removeProperty("--px-popover-max-height");
-  }
   initPopover() {
-    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));
+    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, b(this, h, A).call(this), b(this, h, w).call(this));
   }
   get popoverId() {
     return `${this.getAttribute("id")}-popover`;
@@ -163,7 +153,7 @@ class S extends T {
     return this.getAttribute("anchoralignment") || c;
   }
   set anchorAlignment(t) {
-    C.includes(t) ? this.setAttribute("anchoralignment", t) : (k(
+    N.includes(t) ? this.setAttribute("anchoralignment", t) : (k(
       `Invalid anchor alignment value: ${t}. Using default ${c}.`
     ), this.setAttribute("anchoralignment", c));
   }
@@ -179,19 +169,13 @@ class S extends T {
   set manualToggle(t) {
     t ? this.setAttribute("manual-toggle", "") : this.removeAttribute("manual-toggle");
   }
-  get popoverHeight() {
-    return this.getAttribute("popover-height");
-  }
-  set popoverHeight(t) {
-    t ? this.setAttribute("popover-height", t) : this.removeAttribute("popover-height");
-  }
 }
-n = new WeakSet(), A = function() {
+h = new WeakSet(), A = function() {
   this.isAboutToClose = !1, this.manualToggle || this.$trigger.removeEventListener("click", this.triggerPopoverDisplay), this.$popoverElement.removeEventListener(
     "beforetoggle",
-    g(this, h)
+    g(this, n)
   ), this.$popoverElement.removeEventListener("toggle", g(this, a));
-}, h = new WeakMap(), a = new WeakMap(), /**
+}, n = new WeakMap(), a = new WeakMap(), /**
  * Handles the manual display of the popover when the trigger is clicked.
  * This is necessary for cases where the trigger is not a button or input element.
  * This method adds event listeners to the trigger element to toggle the popover.
@@ -199,7 +183,7 @@ n = new WeakSet(), A = function() {
  * race conditions when the popover is toggled and the trigger click event is fired.
  */
 w = function() {
-  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)));
+  this.$trigger && (this.manualToggle || this.$trigger.addEventListener("click", this.triggerPopoverDisplay), this.$popoverElement.addEventListener("beforetoggle", g(this, n)), this.$popoverElement.addEventListener("toggle", g(this, a)));
 };
 customElements.get("px-dropdown") || customElements.define("px-dropdown", S);
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-dropdown",
-  "version": "1.4.10-beta.4",
+  "version": "1.4.10",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",