@proximus/lavender-dropdown 1.0.0-alpha.2

package/dist/index.js

@@ -0,0 +1,139 @@
+import { WithExtraAttributes as g } from "@proximus/lavender-common";
+const m = ':host{position:relative}@media screen and (max-width: 767px){{display:block;width:100%}}:host([grow]) ::slotted([slot="trigger"]):after{right:0;padding-right:var(--px-padding-xs-mobile)}::slotted([slot="popover"]){position:absolute;border-radius:var(--px-radius-main, 8px);background:var(--px-background-color-action-neutral-bare-default, #FFF);box-shadow:0 20px 25px -5px #25252514;margin:0;padding:0;border:0;padding-block:var(--px-padding-s-mobile);right:var(--px-padding-s-mobile);width:auto}@media screen and (min-width: 768px){{padding-block:var(--px-padding-s-desktop);right:auto;width:auto}}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){top:auto}@media screen and (max-width: 768px){{left:var(--px-padding-s-mobile)}}:host([anchoralignment="bottom-right"]) ::slotted([slot="popover"]){left:auto}', u = [
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right"
+];
+function b(a, t, e = "bottom-left", r) {
+  "anchorName" in document.documentElement.style || t.addEventListener("toggle", () => {
+    var h, l;
+    if (!a || !t)
+      return;
+    const o = a.getBoundingClientRect(), c = ((h = window.visualViewport) == null ? void 0 : h.height) ?? window.innerHeight, i = ((l = window.visualViewport) == null ? void 0 : l.width) ?? window.innerWidth, s = r.getPropertyValue("--px-padding-s-mobile") || "16px", d = parseInt(
+      (r.getPropertyValue("--px-icon-size-xs-desktop") || "24").replace("px", "")
+    );
+    ["top-left", "top-right"].includes(e) ? (t.style.bottom = `calc( ${s} + ${c - o.top - window.scrollY}px)`, t.style.top = "auto", e === "top-left" ? t.style.left = i < 768 ? `${s}px` : `${o.left}px` : t.style.right = i < 768 ? `${s}px` : `${i - o.right}px`) : (t.style.top = `${o.bottom + window.scrollY}px`, e === "bottom-left" ? t.style.left = i < 768 ? `${s}px` : `${o.left}px` : t.style.right = i < 768 ? `${s}px` : `${i - o.right - d}px`);
+  });
+}
+const p = new CSSStyleSheet();
+p.replaceSync(m);
+const n = "bottom-left";
+class f extends g {
+  constructor() {
+    super(p), this.template = () => `
+  <style>${this.css}</style>
+  <slot name="trigger"></slot>
+  <slot name="popover"></slot>`, this.isAboutToClose = !1, this.shadowRoot.innerHTML = this.template();
+  }
+  /**
+   * Instance level styling for the dropdown component.
+   * This is used to set the anchor name and position of the popover.
+   * @private
+   */
+  get css() {
+    return `::slotted([slot='trigger']) {
+      anchor-name: ${this.anchorName};
+    }
+    :host([anchoralignment="bottom-left"]) {
+      ::slotted([slot="popover"]) {
+        position-anchor: ${this.anchorName};
+        top: anchor(${this.anchorName} bottom);
+        left: anchor(${this.anchorName} left);
+      } 
+    }
+    :host([anchoralignment="bottom-right"]) {
+      ::slotted([slot="popover"]) {
+        position-anchor: ${this.anchorName};
+        top: anchor(${this.anchorName} bottom);
+        right: calc(anchor(${this.anchorName} right) - var(--px-icon-size-xs-desktop));
+      }
+    }
+    :host([anchoralignment="top-left"]) {
+      ::slotted([slot="popover"]) {
+        position-anchor: ${this.anchorName};
+        bottom: calc( var(--px-padding-s-mobile) + anchor(${this.anchorName} top));
+        left: anchor(${this.anchorName} left);
+      } 
+    }
+    :host([anchoralignment="top-right"]) {
+      ::slotted([slot="popover"]) {
+        position-anchor: ${this.anchorName};
+        bottom: calc( var(--px-padding-s-mobile) + anchor(${this.anchorName} top));
+        right: anchor(${this.anchorName} right);
+      }
+    }`;
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "id", "anchoralignment"];
+  }
+  connectedCallback() {
+    this.getAttribute("id") || this.setAttribute(
+      "id",
+      `px-dropdown-${Math.random().toString(36).substring(2, 15)}`
+    ), this.getAttribute("anchoralignment") || this.setAttribute("anchoralignment", n), b(
+      this.$trigger,
+      this.$popoverElement,
+      this.anchorAlignment,
+      getComputedStyle(this)
+    );
+  }
+  /**
+   * 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.
+   */
+  handleManualPopoverDisplay() {
+    this.$trigger && !["button", "input"].includes(this.$trigger.localName) && (this.$trigger.addEventListener("click", () => {
+      this.isAboutToClose || this.$popoverElement.togglePopover({ source: this.$trigger });
+    }), this.$popoverElement.addEventListener("beforetoggle", () => {
+      this.$popoverElement.matches(":popover-open") && (this.isAboutToClose = !0);
+    }), this.$popoverElement.addEventListener("toggle", () => {
+      this.$popoverElement.matches(":popover-open") || setTimeout(() => {
+        this.isAboutToClose = !1;
+      });
+    }));
+  }
+  attributeChangedCallback(t, e, r) {
+    switch (t) {
+      case "id":
+        e !== r && this.initPopover();
+        break;
+      default:
+        super.attributeChangedCallback(t, e, r);
+        break;
+    }
+  }
+  initPopover() {
+    this.$trigger && (this.$trigger.setAttribute("popovertarget", this.popoverId), this.$popoverElement.setAttribute("id", this.popoverId), this.$popoverElement.setAttribute("popover", ""), this.$style.innerHTML = this.css, this.handleManualPopoverDisplay());
+  }
+  get popoverId() {
+    return `${this.getAttribute("id")}-popover`;
+  }
+  get anchorName() {
+    return `--${this.getAttribute("id")}-anchor`;
+  }
+  get $style() {
+    return this.shadowRoot.querySelector("style");
+  }
+  get $trigger() {
+    return this.querySelector('[slot="trigger"]');
+  }
+  get $popoverElement() {
+    return this.querySelector('[slot="popover"]');
+  }
+  get anchorAlignment() {
+    return this.getAttribute("anchoralignment") || n;
+  }
+  set anchorAlignment(t) {
+    u.includes(t) ? this.setAttribute("anchoralignment", t) : (console.warn(
+      `Invalid anchor alignment value: ${t}. Using default ${n}.`
+    ), this.setAttribute("anchoralignment", n));
+  }
+}
+customElements.get("px-dropdown") || customElements.define("px-dropdown", f);
+export {
+  f as Dropdown
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@proximus/lavender-dropdown",
+  "version": "1.0.0-alpha.2",
+  "description": "",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./src/*.css": {
+      "development": "src/*.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "rm -rf dist;tsc; vite build",
+    "test": "vitest run --coverage"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "CHANGELOG.md",
+          "package.json",
+          "dist/*.js",
+          "dist/*.cjs",
+          "dist/css/**/*.css",
+          "dist/js/**/*.js",
+          "dist/*.svg",
+          "dist/*.ttf",
+          "dist/glyphmap.json",
+          "dist/*.d.ts"
+        ]
+      }
+    }
+  },
+  "gitHead": "127dc25543d5b6545c1611a6d91a6ebeb7e98fb1"
+}