@proximus/lavender 2.0.0-alpha.30 → 2.0.0-alpha.34

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 _src, _internals, _template, _onResize, _Header_instances, setMDDDialogOffset_fn, togglePanel_fn, showMobileMenu_fn, hideMobileMenu_fn, hidePanel_fn, $mobileMenu_get, $navigationItems_get, $headerWrapper_get, $megaDropdowns_get, _Dropdown_instances, resetManualPopoverDisplay_fn, _onTriggerClick, _beforeToggle, _onToggle, handleManualPopoverDisplay_fn, _template2, _HeaderMobileMenu_instances, createMobileMenuPanelDropDowns_fn, _mutationObserver, _MegaDropDown_instances, $backButton_get, $title_get, $footer_get, $closeButtons_get, _Card_instances, updateMediaPosition_fn, updateMedia_fn, updateBackgroundColor_fn;
+var _src, _internals, _template, _Select_instances, updateOptions_fn, _onResize, _Header_instances, setMDDDialogOffset_fn, togglePanel_fn, showMobileMenu_fn, hideMobileMenu_fn, hidePanel_fn, $mobileMenu_get, $navigationItems_get, $headerWrapper_get, $megaDropdowns_get, _Dropdown_instances, resetManualPopoverDisplay_fn, _onTriggerClick, _beforeToggle, _onToggle, handleManualPopoverDisplay_fn, _template2, _HeaderMobileMenu_instances, createMobileMenuPanelDropDowns_fn, _mutationObserver, _MegaDropDown_instances, $backButton_get, $title_get, $footer_get, $closeButtons_get, _Card_instances, updateMediaPosition_fn, updateMedia_fn, updateBackgroundColor_fn;
 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-value)}:host([order]),::slotted([order]){order:var(--order-value)}: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: 767px){: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: 768px) and (max-width: 1024px){: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: 1025px){: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: 1025px){: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: 1441px){: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}}";
 function getSupportedPropertyNames(htmlElementName) {
   const $element = document.createElement(htmlElementName);
@@ -11830,29 +11830,40 @@ if (!customElements.get("px-textarea")) {
   customElements.define("px-textarea", TextArea);
 }
 const _Select = class _Select extends AbstractInputElement {
-  template() {
-    return '<select><slot name="options"></slot></select>';
-  }
   constructor() {
     super();
+    __privateAdd(this, _Select_instances);
+  }
+  template() {
+    return '<select><slot name="options"></slot></select>';
   }
   connectedCallback() {
     super.connectedCallback();
-    const $options = this.querySelectorAll("option");
-    if ($options.length > 0) {
-      $options.forEach(($option) => {
-        this.$el.appendChild($option);
-      });
-    }
+    __privateMethod(this, _Select_instances, updateOptions_fn).call(this);
     this.observer = new MutationObserver(() => {
-      this.$el.innerHTML = this.innerHTML;
+      __privateMethod(this, _Select_instances, updateOptions_fn).call(this);
+    });
+    this.observer.observe(this, {
+      childList: true,
+      attributes: true,
+      subtree: true
     });
-    this.observer.observe(this, { childList: true });
   }
   disconnectedCallback() {
     this.observer.disconnect();
   }
 };
+_Select_instances = new WeakSet();
+updateOptions_fn = function() {
+  const $options = this.querySelectorAll("option");
+  this.$el.querySelectorAll("option").forEach(($option) => $option.remove());
+  if ($options.length > 0) {
+    $options.forEach(($option) => {
+      const $clonedOption = $option.cloneNode(true);
+      this.$el.appendChild($clonedOption);
+    });
+  }
+};
 _Select.nativeName = "select";
 let Select = _Select;
 if (!customElements.get("px-select")) {
@@ -12939,7 +12950,7 @@ class MDDCloser extends HTMLElement {
 if (!customElements.get("px-mdd-closer")) {
   customElements.define("px-mdd-closer", MDDCloser);
 }
-const styles$9 = ":host{--mdd-dialog-offset-top: 0}dialog{border:none;width:100%;margin-inline:0;margin-top:var(--mdd-dialog-offset-top);max-width:100%;max-height:100%;background-color:var(--px-color-background-surface-default)}@keyframes slide-left-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}dialog::backdrop{background-color:#0000}@media screen and (max-width: 767px){dialog{height:100dvh;margin:0;padding:0;animation:slide-left-fade-in .3s ease-in-out}px-container{height:100dvh}px-container>px-vstack>px-button-icon{position:initial;display:none;right:0}px-container>px-vstack>px-mdd-closer{display:none}dialog::backdrop{background-color:var(--px-color-background-surface-default)}}px-container{position:relative}px-container>px-vstack>px-button-icon{position:absolute;top:2em;right:1em}#sections-container{padding-bottom:calc(var(--mdd-section-container-padding-bottom) + var(--px-spacing-default-mobile));overflow:auto}@media only screen and (min-width: 48em){#sections-container{padding-bottom:0}}#mobile-header{display:none}@media screen and (max-width: 767px){#mobile-header{display:block;padding-bottom:2em}}px-p{display:none}@media screen and (max-width: 767px){px-p{display:block;padding-bottom:2em}}#footer{display:none}@media screen and (max-width: 767px){#footer{display:block;position:absolute;bottom:0;left:0;right:0;padding:var(--px-padding-s-mobile);background-color:var(--px-color-background-container-light-default)}}";
+const styles$9 = ":host{--mdd-dialog-offset-top: 0}dialog{border:none;width:100%;margin-inline:0;margin-top:var(--mdd-dialog-offset-top);max-width:100%;max-height:100%;background-color:var(--px-color-background-surface-default)}@keyframes slide-left-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}dialog::backdrop{background-color:#0000}@media screen and (max-width: 767px){dialog{height:100dvh;margin:0;padding:0;animation:slide-left-fade-in .3s ease-in-out}px-container{height:100dvh}px-container>px-vstack>px-button-icon{position:initial;display:none;right:0}px-container>px-vstack>px-mdd-closer{display:none}dialog::backdrop{background-color:var(--px-color-background-surface-default)}}px-container{position:relative}px-container>px-vstack>px-button-icon{position:absolute;top:2em;right:1em}#sections-container{overflow:auto}@media only screen and (min-width: 48em){#sections-container{padding-bottom:0}}#mobile-header{display:none}@media screen and (max-width: 767px){#mobile-header{display:block;padding-bottom:2em}}px-p{display:none}@media screen and (max-width: 767px){px-p{display:block;padding-bottom:2em}}#footer{display:none}@media screen and (max-width: 767px){#footer{display:block;position:absolute;bottom:0;left:0;right:0;padding:var(--px-padding-s-mobile);background-color:var(--px-color-background-container-light-default)}}";
 const stylesheet$2 = new CSSStyleSheet();
 stylesheet$2.replaceSync(styles$9);
 class MegaDropDown extends HTMLElement {
@@ -13086,10 +13097,11 @@ class MegaDropDown extends HTMLElement {
     }
     if (name === "hidden" && this.internals) {
       this.internals.ariaHidden = newValue === "true" || newValue === "" ? "true" : "false";
-      const mddFooterHeight = __privateGet(this, _MegaDropDown_instances, $footer_get).offsetHeight;
+      const mddFooterHeightPx = __privateGet(this, _MegaDropDown_instances, $footer_get).offsetHeight;
+      const mddFooterHeight = mddFooterHeightPx / parseFloat(getComputedStyle(document.documentElement).fontSize);
       this.style.setProperty(
         "--mdd-section-container-padding-bottom",
-        `${mddFooterHeight}px`
+        `${mddFooterHeight}em`
       );
     }
     if (name === "close-button-aria-label") {
@@ -13191,7 +13203,7 @@ $closeButtons_get = function() {
 if (!customElements.get("px-mdd")) {
   customElements.define("px-mdd", MegaDropDown);
 }
-const styles$8 = ':host{flex-basis:25%}@media screen and (max-width: 767px){:host{width:100%;flex-basis:100%}#section-wrapper{background-color:#fff;border-radius:.5em;padding-inline:1em}::slotted(px-mdd-section-item){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}::slotted(px-mdd-section-item:last-of-type){border-bottom:none}::slotted([slot="footer"]){background-color:#fff;border-radius:.5em;padding-inline:1em;line-height:4em}}';
+const styles$8 = ':host{flex-basis:25%}@media screen and (max-width: 767px){:host{width:100%;flex-basis:100%}#section-wrapper{background-color:#fff;border-radius:.5em;padding-inline:1em}::slotted(px-mdd-section-item){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}::slotted(px-mdd-section-item:last-of-type){border-bottom:none}::slotted([slot="footer"]){background-color:#fff;border-radius:.5em;padding-inline:1em;line-height:4em}:host([title-hidden]){padding-bottom:var(--mdd-section-container-padding-bottom, 0)}}';
 const stylesheet$1 = new CSSStyleSheet();
 stylesheet$1.replaceSync(styles$8);
 class MddSection extends HTMLElement {