@proximus/lavender 2.0.0-alpha.133 → 2.0.0-alpha.134

package/dist/lavender.es.js

@@ -6,7 +6,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _host, _interactiveElement, _canSetInteractiveState, _isConnected, _showInteractiveState, _WrappedInteractiveStateController_instances, interactiveStateTargets_get, _src, _internals, _template, _Banner_instances, applyReducedPadding_fn, _Breadcrumb_instances, applyInverted_fn, _wrappedInteractiveStateController, _ButtonWrapper_instances, canSetWrappedInteractiveState_fn, _Card_instances, updateMediaPosition_fn, updateMedia_fn, updateBackgroundColor_fn, _Carousel_instances, syncItems_fn, _currentCheckedRadioIndex, _Dropdown_instances, resetManualPopoverDisplay_fn, _beforeToggle, _onToggle, handleManualPopoverDisplay_fn, _wrappedInteractiveStateController2, _LinkWrapper_instances, canSetWrappedInteractiveState_fn2, _onResize, _Header_instances, setMDDDialogOffset_fn, togglePanel_fn, showMobileMenu_fn, hideMobileMenu_fn, hidePanel_fn, $mobileMenu_get, $navigationItems_get, $headerWrapper_get, $megaDropdowns_get, _template2, _HeaderMobileMenu_instances, createMobileMenuPanelDropDowns_fn, _Select_instances, updateOptions_fn, _List_instances, syncChildren_fn, applyInverted_fn2, applyVariant_fn, _mutationObserver, _MegaDropDown_instances, $backButton_get, $title_get, $footer_get, $closeButtons_get, _CardContainer_instances, updateImageSrc_fn, applyAspectRatio_fn, syncBackgroundColor_fn, syncBorder_fn, syncDefaultBackgroundColor_fn, syncDefaultBorder_fn, syncInteractiveState_fn, hasInteractiveState_fn, syncInvertedOnChildren_fn, setOrRemove_fn, _Tabs_instances, handleInverted_fn, handleHideControls_fn, _Timeline_instances, applyInverted_fn3, _controlId, _onKeyDown, _Autocomplete_instances, options_get, _onInput, updateFormValue_fn, _AutocompleteHeader_instances, syncSlot_fn, _AutocompleteOption_instances, syncSlot_fn2;
+var _host, _interactiveElement, _canSetInteractiveState, _isConnected, _showInteractiveState, _WrappedInteractiveStateController_instances, interactiveStateTargets_get, _src, _internals, _template, _Banner_instances, applyReducedPadding_fn, _Breadcrumb_instances, applyInverted_fn, _wrappedInteractiveStateController, _ButtonWrapper_instances, canSetWrappedInteractiveState_fn, _Card_instances, updateMediaPosition_fn, updateMedia_fn, updateBackgroundColor_fn, _Carousel_instances, syncItems_fn, _currentCheckedRadioIndex, _Dropdown_instances, resetManualPopoverDisplay_fn, _beforeToggle, _onToggle, handleManualPopoverDisplay_fn, _wrappedInteractiveStateController2, _LinkWrapper_instances, canSetWrappedInteractiveState_fn2, _onResize, _Header_instances, setMDDDialogOffset_fn, togglePanel_fn, showMobileMenu_fn, hideMobileMenu_fn, hidePanel_fn, $mobileMenu_get, $navigationItems_get, $headerWrapper_get, $megaDropdowns_get, _template2, _HeaderMobileMenu_instances, createMobileMenuPanelDropDowns_fn, _Select_instances, updateOptions_fn, _List_instances, syncChildren_fn, applyInverted_fn2, applyVariant_fn, _mutationObserver, _MegaDropDown_instances, $backButton_get, $title_get, $footer_get, $closeButtons_get, _CardContainer_instances, updateImageSrc_fn, applyAspectRatio_fn, syncBackgroundColor_fn, syncBorder_fn, syncDefaultBackgroundColor_fn, syncDefaultBorder_fn, syncInteractiveState_fn, hasInteractiveState_fn, syncInvertedOnChildren_fn, setOrRemove_fn, _Tabs_instances, handleInverted_fn, handleHideControls_fn, _Timeline_instances, applyInverted_fn3, _controlId, _onClick, _onKeyDown, _Autocomplete_instances, options_get, allOptions_get, _onInput, updateFormValue_fn, _AutocompleteHeader_instances, syncSlot_fn, _AutocompleteOption_instances, syncSlot_fn2;
 const styles$Q = ':host{display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media screen and (max-width: 47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 48rem){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media screen and (min-width: 48rem) and (max-width: 64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 64.0625rem){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media screen and (min-width: 90.0625rem){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}';
 const commonStyles = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-self-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([sticky-top]),:host([sticky-bottom]){z-index:5}:host([sticky-top]){position:sticky;top:0}:host([sticky-bottom]){position:sticky;bottom:0}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (max-width: 47.938rem){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 48rem) and (max-width: 64rem){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 64.0625rem){:host([shown--sr--laptop]),::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 64.0625rem){:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}@media screen and (min-width: 90.0625rem){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}}";
 const __vite_import_meta_env__ = { "DEV": true, "VITE_COMPONENT_DEBUG": "true" };
@@ -18061,6 +18061,7 @@ const _Autocomplete = class _Autocomplete extends WithExtraAttributes {
     super(styleSheet$2);
     __privateAdd(this, _Autocomplete_instances);
     __privateAdd(this, _controlId);
+    __privateAdd(this, _onClick);
     __privateAdd(this, _onKeyDown);
     __privateAdd(this, _onInput);
     __privateSet(this, _controlId, Math.random().toString(36).substring(2, 15));
@@ -18075,6 +18076,14 @@ const _Autocomplete = class _Autocomplete extends WithExtraAttributes {
     <slot name="dropdown-content"></slot>
   </div>
 </px-dropdown>`;
+    __privateSet(this, _onClick, () => {
+      var _a2;
+      if (__privateGet(this, _Autocomplete_instances, allOptions_get).length) {
+        this.$input.$el.setAttribute("aria-expanded", "true");
+        this.$dropDownContent.style.width = `${(_a2 = this.$input.shadowRoot.querySelector("input")) == null ? void 0 : _a2.offsetWidth}px`;
+        this.$dropDown.showPopover();
+      }
+    });
     __privateSet(this, _onKeyDown, (event) => {
       if (event.key !== "ArrowDown" && event.key !== "ArrowUp") {
         return;
@@ -18156,6 +18165,7 @@ const _Autocomplete = class _Autocomplete extends WithExtraAttributes {
   connectedCallback() {
     var _a, _b;
     this.$input.addEventListener("input", __privateGet(this, _onInput));
+    this.$input.addEventListener("click", __privateGet(this, _onClick));
     this.addEventListener("keydown", __privateGet(this, _onKeyDown));
     this.$dropDownContent.style.width = `${(_a = this.$input.shadowRoot.querySelector("input")) == null ? void 0 : _a.offsetWidth}px`;
     this.$input.$el.setAttribute("role", "combobox");
@@ -18173,6 +18183,7 @@ const _Autocomplete = class _Autocomplete extends WithExtraAttributes {
   }
   disconnectedCallback() {
     this.$input.removeEventListener("input", __privateGet(this, _onInput));
+    this.$input.removeEventListener("click", __privateGet(this, _onClick));
     this.removeEventListener("keydown", __privateGet(this, _onKeyDown));
   }
   setDefaultPopoverHeight() {
@@ -18225,6 +18236,7 @@ const _Autocomplete = class _Autocomplete extends WithExtraAttributes {
   }
 };
 _controlId = new WeakMap();
+_onClick = new WeakMap();
 _onKeyDown = new WeakMap();
 _Autocomplete_instances = new WeakSet();
 options_get = function() {
@@ -18234,6 +18246,11 @@ options_get = function() {
     )
   );
 };
+allOptions_get = function() {
+  return Array.from(
+    this.querySelectorAll("px-autocomplete-option")
+  );
+};
 _onInput = new WeakMap();
 updateFormValue_fn = function() {
   var _a;
@@ -18248,7 +18265,7 @@ let Autocomplete = _Autocomplete;
 if (!customElements.get("px-autocomplete")) {
   customElements.define("px-autocomplete", Autocomplete);
 }
-const styles = ":host{display:block}px-container{height:var(--px-size-l)}px-container>button{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;width:100%;height:100%;padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:0;text-align:left;text-decoration:none;cursor:pointer}px-container>button>px-span{padding:0 var(--px-padding-s-mobile)}.autocomplete-header{overflow:hidden}.autocomplete-header px-span{min-width:0;overflow-wrap:anywhere}:host([selected]) button,button:hover{background-color:var(--px-color-background-state-hover-default)}button:focus-visible{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:calc(-1 * var(--px-focus-offset-mobile));position:relative}@media only screen and (min-width: 48rem){button>px-span{padding:0 var(--px-padding-s-tablet)}button:focus-visible{outline-width:var(--px-focus-outline-tablet);outline-offset:calc(-1 * var(--px-focus-offset-tablet))}}@media only screen and (min-width: 64.0625rem){button>px-span{padding:0 var(--px-padding-s-laptop)}button:focus-visible{outline-width:var(--px-focus-outline-laptop);outline-offset:calc(-1 * var(--px-focus-offset-laptop))}}@media only screen and (min-width: 90.0625rem){button>px-span{padding:0 var(--px-padding-s-desktop)}button:focus-visible{outline-width:var(--px-focus-outline-desktop);outline-offset:calc(-1 * var(--px-focus-offset-desktop))}}";
+const styles = ":host{display:block}.container{min-height:var(--px-size-l);display:flex}.container>button{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;width:100%;min-height:100%;display:flex;align-items:center;margin:0;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:0;text-align:left;text-decoration:none;cursor:pointer;padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile)}.autocomplete-header{overflow:hidden}.autocomplete-header px-span{min-width:0;overflow-wrap:anywhere}:host([selected]) button,button:hover{background-color:var(--px-color-background-state-hover-default)}button:focus-visible{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:calc(-1 * var(--px-focus-offset-mobile));position:relative}@media only screen and (min-width: 48rem){button{padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet)}button:focus-visible{outline-width:var(--px-focus-outline-tablet);outline-offset:calc(-1 * var(--px-focus-offset-tablet))}}@media only screen and (min-width: 64.0625rem){button{padding:var(--px-padding-xs-laptop) var(--px-padding-s-laptop)}button:focus-visible{outline-width:var(--px-focus-outline-laptop);outline-offset:calc(-1 * var(--px-focus-offset-laptop))}}@media only screen and (min-width: 90.0625rem){button{padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop)}button:focus-visible{outline-width:var(--px-focus-outline-desktop);outline-offset:calc(-1 * var(--px-focus-offset-desktop))}}";
 const styleSheet$1 = new CSSStyleSheet();
 styleSheet$1.replaceSync(styles);
 class AutocompleteHeader extends HTMLElement {
@@ -18293,7 +18310,7 @@ class AutocompleteOption extends HTMLElement {
   constructor() {
     super();
     __privateAdd(this, _AutocompleteOption_instances);
-    this.template = () => `<px-container tabindex="-1" padding="none" background-color="none"><button type="button" role="option"><px-span size="body-s"><slot></slot></px-span></button></px-container>`;
+    this.template = () => `<div tabindex="-1" class="container"><button type="button" role="option"><px-span size="body-s"><slot></slot></px-span></button></div>`;
     this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template();
     this.shadowRoot.adoptedStyleSheets = [styleSheet];