@proximus/lavender-autocomplete 2.0.0-alpha.102 → 2.0.0-alpha.103

package/dist/Autocomplete.d.ts

@@ -2,6 +2,7 @@ import '@proximus/lavender-dropdown';
 import '@proximus/lavender-input';
 import { type Dropdown } from '@proximus/lavender-dropdown';
 import { type Input } from '@proximus/lavender-input';
+import { WithExtraAttributes } from '@proximus/lavender-common';
 /**
  * @summary An autocomplete input component with dropdown suggestions.
  * @attr {number} size - Visible width of the input in characters.
@@ -17,7 +18,7 @@ import { type Input } from '@proximus/lavender-input';
  * @slot status-text - Slot for the validation/status message (use `role="alert"` for errors, `role="status"` for success).
  * @slot dropdown-content - Slot for dropdown content items such as `px-autocomplete-header` and `px-autocomplete-option`.
  */
-export declare class Autocomplete extends HTMLElement {
+export declare class Autocomplete extends WithExtraAttributes {
     #private;
     static formAssociated: boolean;
     private internals;

package/dist/index.es.js

@@ -3,7 +3,7 @@ var re = (s) => {
 };
 var B = (s, e, t) => e.has(s) || re("Cannot " + t);
 var a = (s, e, t) => (B(s, e, "read from private field"), t ? t.call(s) : e.get(s)), l = (s, e, t) => e.has(s) ? re("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(s) : e.set(s, t), g = (s, e, t, i) => (B(s, e, "write to private field"), i ? i.call(s, t) : e.set(s, t), t), u = (s, e, t) => (B(s, e, "access private method"), t);
-import { WithExtraAttributes as E, log as p, PxElement as ne, iconSizeValuesKC as Se, cssTokenBreakpoints as f, paddingValues as v, gapValues as ce, boxShadowValues as Le, backgroundSizeValues as Ee, noBorderRadiusValues as De, borderRadiusValues as Te, borderSideValues as Re, borderValues as Me, gradientValues as oe, backgroundColorValues as I, borderColorValues as se, checkName as T, AttributeBreakpointHandlerDelegate as je, fontweightValues as He, fontsizeValues as Be, colorValues as Pe, isFalsy as P } from "@proximus/lavender-common";
+import { WithExtraAttributes as S, log as p, PxElement as ne, iconSizeValuesKC as Se, cssTokenBreakpoints as f, paddingValues as v, gapValues as ce, boxShadowValues as Le, backgroundSizeValues as Ee, noBorderRadiusValues as De, borderRadiusValues as Te, borderSideValues as Re, borderValues as Me, gradientValues as oe, backgroundColorValues as I, borderColorValues as se, checkName as T, AttributeBreakpointHandlerDelegate as je, fontweightValues as He, fontsizeValues as Be, colorValues as Pe, isFalsy as P } from "@proximus/lavender-common";
 const Ie = ":host .dropdown-content{background-color:var(--px-color-background-surface-default);border-radius:var(--px-radius-main);box-shadow:0 4px 6px -1px #25252514;overflow:hidden}:host([inverted]) .dropdown-content{background-color:var(--px-color-background-surface-dark)}", Fe = ':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}}', qe = [
   "top-left",
   "top-right",
@@ -25,7 +25,7 @@ const le = new CSSStyleSheet();
 le.replaceSync(Fe);
 const D = "bottom-left";
 var C, pe, k, w, de;
-class Oe extends E {
+class Oe extends S {
   constructor() {
     super(le);
     l(this, C);
@@ -384,18 +384,18 @@ const _ = class _ extends H {
 _.nativeName = "textarea";
 let q = _;
 customElements.get("px-textarea") || customElements.define("px-textarea", q);
-var L, N;
+var E, N;
 const U = class U extends H {
   constructor() {
     super();
-    l(this, L);
+    l(this, E);
   }
   template() {
     return "<select></select>";
   }
   connectedCallback() {
-    super.connectedCallback(), u(this, L, N).call(this), this.observer = new MutationObserver(() => {
-      u(this, L, N).call(this);
+    super.connectedCallback(), u(this, E, N).call(this), this.observer = new MutationObserver(() => {
+      u(this, E, N).call(this);
     }), this.observer.observe(this, {
       childList: !0,
       subtree: !0
@@ -405,7 +405,7 @@ const U = class U extends H {
     this.observer.disconnect();
   }
 };
-L = new WeakSet(), N = function() {
+E = new WeakSet(), N = function() {
   const t = Array.from(this.children).filter((i) => {
     const r = i.tagName.toLowerCase();
     return r === "option" || r === "optgroup";
@@ -449,11 +449,11 @@ let Z = J;
 customElements.get("px-fileupload") || customElements.define("px-fileupload", Z);
 const he = new CSSStyleSheet();
 he.replaceSync(Ie);
-var A, $, b, be, z, S;
-const Q = class Q extends HTMLElement {
+var A, $, b, be, z, L;
+const Q = class Q extends S {
   constructor() {
     var t;
-    super();
+    super(he);
     l(this, b);
     l(this, A);
     l(this, $);
@@ -481,11 +481,13 @@ const Q = class Q extends HTMLElement {
       let n;
       i.key === "ArrowDown" ? n = o < r.length - 1 ? o + 1 : 0 : n = o > 0 ? o - 1 : r.length - 1, r[n].focus();
     }), g(this, z, () => {
-      this.$input.value ? (this.$input.$el.setAttribute("aria-expanded", "true"), this.$dropDown.showPopover()) : (this.$input.$el.setAttribute("aria-expanded", "false"), this.$dropDown.hidePopover(), this.$input.focus()), u(this, b, S).call(this);
-    }), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [he], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
+      var i;
+      this.$input.value ? (this.$input.$el.setAttribute("aria-expanded", "true"), this.$dropDownContent.style.width = `${(i = this.$input.shadowRoot.querySelector("input")) == null ? void 0 : i.offsetWidth}px`, this.$dropDown.showPopover()) : (this.$input.$el.setAttribute("aria-expanded", "false"), this.$dropDown.hidePopover(), this.$input.focus()), u(this, b, L).call(this);
+    }), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
   }
   static get observedAttributes() {
     return [
+      ...super.observedAttributes,
       "size",
       "state",
       "extended",
@@ -496,7 +498,20 @@ const Q = class Q extends HTMLElement {
     ];
   }
   attributeChangedCallback(t, i, r) {
-    r !== null ? this.$input.setAttribute(t, r) : this.$input.removeAttribute(t);
+    switch (t) {
+      case "size":
+      case "state":
+      case "extended":
+      case "extended--mobile":
+      case "extended--tablet":
+      case "extended--laptop":
+      case "extended--desktop":
+        r !== null ? this.$input.setAttribute(t, r) : this.$input.removeAttribute(t);
+        break;
+      default:
+        super.attributeChangedCallback(t, i, r);
+        break;
+    }
   }
   connectedCallback() {
     var i, r;
@@ -511,16 +526,16 @@ const Q = class Q extends HTMLElement {
     return this.$input.value;
   }
   set value(t) {
-    this.$input.value = t, this.$input.$el.setAttribute("aria-expanded", "false"), this.$dropDown.hidePopover(), this.$input.$el.focus(), u(this, b, S).call(this);
+    this.$input.value = t, this.$input.$el.setAttribute("aria-expanded", "false"), this.$dropDown.hidePopover(), this.$input.$el.focus(), u(this, b, L).call(this);
   }
   get name() {
     return this.getAttribute("name");
   }
   formResetCallback() {
-    this.$input.value = "", u(this, b, S).call(this);
+    this.$input.value = "", u(this, b, L).call(this);
   }
   formStateRestoreCallback(t) {
-    this.$input.value = t, u(this, b, S).call(this);
+    this.$input.value = t, u(this, b, L).call(this);
   }
   get $dropDown() {
     return this.shadowRoot.querySelector("px-dropdown");
@@ -541,7 +556,7 @@ A = new WeakMap(), $ = new WeakMap(), b = new WeakSet(), be = function() {
       "px-autocomplete-option:not([disabled])"
     )
   );
-}, z = new WeakMap(), S = function() {
+}, z = new WeakMap(), L = function() {
   var t;
   if (this.name) {
     const i = new FormData();
@@ -602,7 +617,7 @@ const Ge = [
 ), We = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);width:1em;height:1em;color:var(--px-color-icon-accent-default)}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}", ge = new CSSStyleSheet();
 ge.replaceSync(We);
 var y, h, R;
-class Ye extends E {
+class Ye extends S {
   constructor(...t) {
     var i;
     super(...t, ge);
@@ -797,7 +812,7 @@ const _e = [
     void 0,
     "subgrid-gap"
   )
-], V = class V extends E {
+], V = class V extends S {
   constructor() {
     super(fe, ...Je), this.template = () => `<div class="container">
       <slot></slot>
@@ -1504,7 +1519,7 @@ const Ve = [
   "space-around",
   "space-evenly"
 ], it = ["", "default", "nowrap", "wrap", "wrap-reverse"], rt = ["", "visible", "hidden", "scroll", "auto"];
-class Y extends E {
+class Y extends S {
   constructor() {
     super(xe), this.overflowXAttributeDelegate = new je(
       this,
@@ -1899,7 +1914,7 @@ class at extends HTMLElement {
 customElements.get("px-spacer") || customElements.define("px-spacer", at);
 const nt = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", ve = new CSSStyleSheet();
 ve.replaceSync(nt);
-class ct extends E {
+class ct extends S {
   constructor() {
     super(ve), this.template = (e) => `
     <px-container border-radius="none" padding="none">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-autocomplete",
-  "version": "2.0.0-alpha.102",
+  "version": "2.0.0-alpha.103",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",