@proximus/lavender-dropdown 1.0.0-alpha.9 → 1.0.0

package/dist/Dropdown.d.ts

@@ -0,0 +1,25 @@
+import { WithExtraAttributes } from '@proximus/lavender-common';
+import { type AnchorAlignment } from './common.ts';
+export declare class Dropdown extends WithExtraAttributes {
+    #private;
+    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;
+    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

@@ -1,30 +1,49 @@
-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 = [
+var $ = (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 = [
   "top-left",
   "top-right",
   "bottom-left",
   "bottom-right"
 ];
-function b(a, t, e = "bottom-left", r) {
+function S(o, t, e = "bottom-left", r) {
   "anchorName" in document.documentElement.style || t.addEventListener("toggle", () => {
-    var l, h;
-    if (!a || !t)
+    var f, v;
+    if (!o || !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(
+    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", "")
     );
-    ["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`);
+    ["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`);
   });
 }
-const p = new CSSStyleSheet();
-p.replaceSync(m);
-const n = "bottom-left";
-class f extends c {
+const x = new CSSStyleSheet();
+x.replaceSync(k);
+const m = "bottom-left";
+var p, w, a, h, l, y;
+class T extends N {
   constructor() {
-    super(p), this.template = () => `
+    super(x);
+    c(this, p);
+    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, this.shadowRoot.innerHTML = this.template();
+  <slot name="popover"></slot>`, this.isAboutToClose = !1, d(this, a, () => {
+      this.isAboutToClose || (this.$popoverElement.togglePopover({ source: this.$trigger }), this.$trigger.ariaExpanded = "true");
+    }), d(this, h, () => {
+      this.$popoverElement.matches(":popover-open") && (this.isAboutToClose = !0, this.$trigger.ariaExpanded = "false");
+    }), d(this, l, () => {
+      this.$popoverElement.matches(":popover-open") || setTimeout(() => {
+        this.isAboutToClose = !1;
+      });
+    }), this.shadowRoot.innerHTML = this.template();
   }
   /**
    * Instance level styling for the dropdown component.
@@ -71,43 +90,25 @@ class f extends c {
     this.getAttribute("id") || this.setAttribute(
       "id",
       `px-dropdown-${Math.random().toString(36).substring(2, 15)}`
-    ), this.getAttribute("anchoralignment") || this.setAttribute("anchoralignment", n), b(
+    ), this.getAttribute("anchoralignment") || this.setAttribute("anchoralignment", m), S(
       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) {
+  attributeChangedCallback(e, r, i) {
+    switch (e) {
       case "id":
-        e !== r && this.initPopover();
+        r !== i && this.initPopover();
         break;
       default:
-        super.attributeChangedCallback(t, e, r);
+        super.attributeChangedCallback(e, r, i);
         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());
+    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));
   }
   get popoverId() {
     return `${this.getAttribute("id")}-popover`;
@@ -125,15 +126,30 @@ class f extends c {
     return this.querySelector('[slot="popover"]');
   }
   get anchorAlignment() {
-    return this.getAttribute("anchoralignment") || n;
+    return this.getAttribute("anchoralignment") || m;
   }
-  set anchorAlignment(t) {
-    u.includes(t) ? this.setAttribute("anchoralignment", t) : (console.warn(
-      `Invalid anchor alignment value: ${t}. Using default ${n}.`
-    ), this.setAttribute("anchoralignment", n));
+  set anchorAlignment(e) {
+    C.includes(e) ? this.setAttribute("anchoralignment", e) : (console.warn(
+      `Invalid anchor alignment value: ${e}. Using default ${m}.`
+    ), this.setAttribute("anchoralignment", m));
   }
 }
-customElements.get("px-dropdown") || customElements.define("px-dropdown", f);
+p = new WeakSet(), w = function() {
+  this.isAboutToClose = !1, this.$trigger.removeEventListener("click", s(this, a)), this.$popoverElement.removeEventListener(
+    "beforetoggle",
+    s(this, h)
+  ), this.$popoverElement.removeEventListener("toggle", s(this, l));
+}, a = new WeakMap(), h = new WeakMap(), l = 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)));
+};
+customElements.get("px-dropdown") || customElements.define("px-dropdown", T);
 export {
-  f as Dropdown
+  T as Dropdown
 };

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@proximus/lavender-dropdown",
-  "version": "1.0.0-alpha.9",
+  "version": "1.0.0",
   "description": "",
   "main": "dist/index.es.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -10,10 +11,13 @@
   "scripts": {
     "transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
     "clean": "rm -rf dist",
-    "build": "npm run clean && tsc && NODE_ENV=development vite build && npm run transform-package-json",
-    "test": "vitest run --coverage"
+    "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"
 }