@proximus/lavender-dropdown 1.0.0-alpha.10

package/dist/Dropdown.d.ts

@@ -0,0 +1,32 @@
+import { WithExtraAttributes } from '@proximus/lavender-common';
+import { type AnchorAlignment } from './common.ts';
+export declare class Dropdown extends WithExtraAttributes {
+    private template;
+    /**
+     * Instance level styling for the dropdown component.
+     * This is used to set the anchor name and position of the popover.
+     * @private
+     */
+    private get css();
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    private isAboutToClose;
+    /**
+     * 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(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    private initPopover;
+    private get popoverId();
+    private get anchorName();
+    private get $style();
+    get $trigger(): HTMLElement;
+    get $popoverElement(): HTMLElement;
+    get anchorAlignment(): AnchorAlignment;
+    set anchorAlignment(value: AnchorAlignment);
+}

package/dist/anchorPolyfill.d.ts

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

package/dist/common.d.ts

@@ -0,0 +1,2 @@
+export declare const anchorAlignmentValues: readonly ["top-left", "top-right", "bottom-left", "bottom-right"];
+export type AnchorAlignment = (typeof anchorAlignmentValues)[number];

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './Dropdown.ts';

package/dist/index.es.js

@@ -0,0 +1,139 @@
+import { WithExtraAttributes as c } from "@proximus/lavender-common";
+const m = ':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}}', 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 l, h;
+    if (!a || !t)
+      return;
+    const o = a.getBoundingClientRect(), g = ((l = window.visualViewport) == null ? void 0 : l.height) ?? window.innerHeight, i = ((h = window.visualViewport) == null ? void 0 : h.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} + ${g - 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 c {
+  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-size-icon-xs));
+      }
+    }
+    :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.$trigger.ariaExpanded = "true");
+    }), this.$popoverElement.addEventListener("beforetoggle", () => {
+      this.$popoverElement.matches(":popover-open") && (this.isAboutToClose = !0, this.$trigger.ariaExpanded = "false");
+    }), 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.$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, 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,22 @@
+{
+  "name": "@proximus/lavender-dropdown",
+  "version": "1.0.0-alpha.10",
+  "description": "",
+  "main": "dist/index.es.js",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
+    "clean": "rm -rf dist",
+    "build": "npm run clean && NODE_ENV=development vite build &&  tsc && npm run transform-package-json && npm run wc-manifest",
+    "test": "vitest run --coverage",
+    "wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js  --outdir dist"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "customElements": "dist/custom-elements.json",
+  "web-types": "./dist/web-types.json"
+}