@proximus/lavender-dropdown 1.0.1 → 1.0.2

package/dist/Dropdown.d.ts

@@ -22,4 +22,6 @@ export declare class Dropdown extends WithExtraAttributes {
     get $popoverElement(): HTMLElement;
     get anchorAlignment(): AnchorAlignment;
     set anchorAlignment(value: AnchorAlignment);
+    get usePolyfill(): boolean;
+    set usePolyfill(value: boolean);
 }

package/dist/anchorPolyfill.d.ts

@@ -1,2 +1,2 @@
 import { AnchorAlignment } from './common';
-export declare function anchorPolyfill($trigger: HTMLElement, $popoverElement: HTMLElement, anchorAlignment: AnchorAlignment, computedStyle: CSSStyleDeclaration): void;
+export declare function anchorPolyfill($trigger: HTMLElement, $popoverElement: HTMLElement, anchorAlignment: AnchorAlignment, computedStyle: CSSStyleDeclaration, usePolyfill?: boolean): void;

package/dist/index.es.js

@@ -1,45 +1,45 @@
-var $ = (o) => {
+var x = (o) => {
   throw TypeError(o);
 };
-var u = (o, t, e) => t.has(o) || $("Cannot " + e);
-var s = (o, t, e) => (u(o, t, "read from private field"), e ? e.call(o) : t.get(o)), c = (o, t, e) => t.has(o) ? $("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(o) : t.set(o, e), d = (o, t, e, r) => (u(o, t, "write to private field"), r ? r.call(o, e) : t.set(o, e), e), b = (o, t, e) => (u(o, t, "access private method"), e);
-import { WithExtraAttributes as N } from "@proximus/lavender-common";
-const k = ':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: 767px){::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: 768px){::slotted([slot="popover"]){padding-block:var(--px-padding-s-desktop);right:auto;width:auto}}', C = [
+var b = (o, t, e) => t.has(o) || x("Cannot " + e);
+var s = (o, t, e) => (b(o, t, "read from private field"), e ? e.call(o) : t.get(o)), c = (o, t, e) => t.has(o) ? x("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(o) : t.set(o, e), u = (o, t, e, i) => (b(o, t, "write to private field"), i ? i.call(o, e) : t.set(o, e), e), f = (o, t, e) => (b(o, t, "access private method"), e);
+import { WithExtraAttributes as C } from "@proximus/lavender-common";
+const P = ':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: 767px){::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: 768px){::slotted([slot="popover"]){padding-block:var(--px-padding-s-desktop);right:auto;width:auto}}', S = [
   "top-left",
   "top-right",
   "bottom-left",
   "bottom-right"
 ];
-function S(o, t, e = "bottom-left", r) {
-  "anchorName" in document.documentElement.style || t.addEventListener("toggle", () => {
-    var f, v;
+function y(o, t, e = "bottom-left", i, d = !1) {
+  "anchorName" in document.documentElement.style && d === !1 || t.addEventListener("toggle", () => {
+    var v, $;
     if (!o || !t)
       return;
-    const i = o.getBoundingClientRect(), A = ((f = window.visualViewport) == null ? void 0 : f.height) ?? window.innerHeight, n = ((v = window.visualViewport) == null ? void 0 : v.width) ?? window.innerWidth, g = r.getPropertyValue("--px-padding-s-mobile") || "16px", E = parseInt(
-      (r.getPropertyValue("--px-icon-size-xs-desktop") || "24").replace("px", "")
+    const r = o.getBoundingClientRect(), N = ((v = window.visualViewport) == null ? void 0 : v.height) ?? window.innerHeight, n = (($ = window.visualViewport) == null ? void 0 : $.width) ?? window.innerWidth, g = i.getPropertyValue("--px-padding-s-mobile") || "16px", k = parseInt(
+      (i.getPropertyValue("--px-icon-size-xs-desktop") || "24").replace("px", "")
     );
-    ["top-left", "top-right"].includes(e) ? (t.style.bottom = `calc( ${g} + ${A - i.top - window.scrollY}px)`, t.style.top = "auto", e === "top-left" ? t.style.left = n < 768 ? `${g}px` : `${i.left}px` : t.style.right = n < 768 ? `${g}px` : `${n - i.right}px`) : (t.style.top = `${i.bottom + window.scrollY}px`, e === "bottom-left" ? t.style.left = n < 768 ? `${g}px` : `${i.left}px` : t.style.right = n < 768 ? `${g}px` : `${n - i.right - E}px`);
+    ["top-left", "top-right"].includes(e) ? (t.style.bottom = `calc( ${g} + ${N - r.top - window.scrollY}px)`, t.style.top = "auto", e === "top-left" ? t.style.left = n < 768 ? `${g}px` : `${r.left}px` : t.style.right = n < 768 ? `${g}px` : `${n - r.right}px`) : (t.style.top = `${r.bottom + window.scrollY}px`, e === "bottom-left" ? t.style.left = n < 768 ? `${g}px` : `${r.left}px` : t.style.right = n < 768 ? `${g}px` : `${n - r.right - k}px`);
   });
 }
-const x = new CSSStyleSheet();
-x.replaceSync(k);
+const w = new CSSStyleSheet();
+w.replaceSync(P);
 const m = "bottom-left";
-var p, w, a, h, l, y;
-class T extends N {
+var p, A, l, a, h, E;
+class T extends C {
   constructor() {
-    super(x);
+    super(w);
     c(this, p);
+    c(this, l);
     c(this, a);
     c(this, h);
-    c(this, l);
     this.template = () => `
   <style>${this.css}</style>
   <slot name="trigger"></slot>
-  <slot name="popover"></slot>`, this.isAboutToClose = !1, d(this, a, () => {
+  <slot name="popover"></slot>`, this.isAboutToClose = !1, u(this, l, () => {
       this.isAboutToClose || (this.$popoverElement.togglePopover({ source: this.$trigger }), this.$trigger.ariaExpanded = "true");
-    }), d(this, h, () => {
+    }), u(this, a, () => {
       this.$popoverElement.matches(":popover-open") && (this.isAboutToClose = !0, this.$trigger.ariaExpanded = "false");
-    }), d(this, l, () => {
+    }), u(this, h, () => {
       this.$popoverElement.matches(":popover-open") || setTimeout(() => {
         this.isAboutToClose = !1;
       });
@@ -84,31 +84,47 @@ class T extends N {
     }`;
   }
   static get observedAttributes() {
-    return [...super.observedAttributes, "id", "anchoralignment"];
+    return [
+      ...super.observedAttributes,
+      "id",
+      "anchoralignment",
+      "use-polyfill"
+    ];
   }
   connectedCallback() {
     this.getAttribute("id") || this.setAttribute(
       "id",
       `px-dropdown-${Math.random().toString(36).substring(2, 15)}`
-    ), this.getAttribute("anchoralignment") || this.setAttribute("anchoralignment", m), S(
+    ), this.getAttribute("anchoralignment") || this.setAttribute("anchoralignment", m), y(
       this.$trigger,
       this.$popoverElement,
       this.anchorAlignment,
-      getComputedStyle(this)
+      getComputedStyle(this),
+      this.usePolyfill
     );
   }
-  attributeChangedCallback(e, r, i) {
-    switch (e) {
-      case "id":
-        r !== i && this.initPopover();
-        break;
-      default:
-        super.attributeChangedCallback(e, r, i);
-        break;
-    }
+  attributeChangedCallback(e, i, d) {
+    if (i !== d)
+      switch (e) {
+        case "id":
+          this.initPopover();
+          break;
+        case "use-polyfill":
+          y(
+            this.$trigger,
+            this.$popoverElement,
+            this.anchorAlignment,
+            getComputedStyle(this),
+            this.usePolyfill
+          );
+          break;
+        default:
+          super.attributeChangedCallback(e, i, d);
+          break;
+      }
   }
   initPopover() {
-    this.$trigger && (this.$trigger.setAttribute("popovertarget", this.popoverId), this.$trigger.setAttribute("aria-controls", this.popoverId), this.$trigger.setAttribute("aria-expanded", "false"), this.$popoverElement.setAttribute("id", this.popoverId), this.$popoverElement.setAttribute("popover", ""), this.$style.innerHTML = this.css, b(this, p, w).call(this), b(this, p, y).call(this));
+    this.$trigger && (this.$trigger.setAttribute("popovertarget", this.popoverId), this.$trigger.setAttribute("aria-controls", this.popoverId), this.$trigger.setAttribute("aria-expanded", "false"), this.$popoverElement.setAttribute("id", this.popoverId), this.$popoverElement.setAttribute("popover", ""), this.$style.innerHTML = this.css, f(this, p, A).call(this), f(this, p, E).call(this));
   }
   get popoverId() {
     return `${this.getAttribute("id")}-popover`;
@@ -129,25 +145,31 @@ class T extends N {
     return this.getAttribute("anchoralignment") || m;
   }
   set anchorAlignment(e) {
-    C.includes(e) ? this.setAttribute("anchoralignment", e) : (console.warn(
+    S.includes(e) ? this.setAttribute("anchoralignment", e) : (console.warn(
       `Invalid anchor alignment value: ${e}. Using default ${m}.`
     ), this.setAttribute("anchoralignment", m));
   }
+  get usePolyfill() {
+    return this.hasAttribute("use-polyfill");
+  }
+  set usePolyfill(e) {
+    e ? this.setAttribute("use-polyfill", "") : this.removeAttribute("use-polyfill");
+  }
 }
-p = new WeakSet(), w = function() {
-  this.isAboutToClose = !1, this.$trigger.removeEventListener("click", s(this, a)), this.$popoverElement.removeEventListener(
+p = new WeakSet(), A = function() {
+  this.isAboutToClose = !1, this.$trigger.removeEventListener("click", s(this, l)), this.$popoverElement.removeEventListener(
     "beforetoggle",
-    s(this, h)
-  ), this.$popoverElement.removeEventListener("toggle", s(this, l));
-}, a = new WeakMap(), h = new WeakMap(), l = new WeakMap(), /**
+    s(this, a)
+  ), this.$popoverElement.removeEventListener("toggle", s(this, h));
+}, l = new WeakMap(), a = new WeakMap(), h = 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.
  * It also manages the state of whether the popover is about to close or not to avoid
  * race conditions when the popover is toggled and the trigger click event is fired.
  */
-y = function() {
-  this.$trigger && !["button", "input"].includes(this.$trigger.localName) && (this.$trigger.addEventListener("click", s(this, a)), this.$popoverElement.addEventListener("beforetoggle", s(this, h)), this.$popoverElement.addEventListener("toggle", s(this, l)));
+E = function() {
+  this.$trigger && !["button", "input"].includes(this.$trigger.localName) && (this.$trigger.addEventListener("click", s(this, l)), this.$popoverElement.addEventListener("beforetoggle", s(this, a)), this.$popoverElement.addEventListener("toggle", s(this, h)));
 };
 customElements.get("px-dropdown") || customElements.define("px-dropdown", T);
 export {

package/package.json

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