@proximus/lavender 2.0.0-alpha.121 → 2.0.0-alpha.123

package/dist/lavender.es.js

@@ -10809,7 +10809,7 @@ class Drawer extends HTMLElement {
 if (!customElements.get("px-drawer")) {
   customElements.define("px-drawer", Drawer);
 }
-const styles$x = ':host{position:relative}::slotted([slot="popover"]){position:fixed;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}}';
+const styles$x = ':host{position:relative}::slotted([slot="popover"]){position:fixed;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;max-height:var(--px-popover-max-height)}: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}}';
 const anchorAlignmentValues = [
   "top-left",
   "top-right",
@@ -10941,7 +10941,8 @@ class Dropdown extends WithExtraAttributes {
       "id",
       "anchoralignment",
       "use-polyfill",
-      "manual-toggle"
+      "manual-toggle",
+      "popover-height"
     ];
   }
   connectedCallback() {
@@ -10983,12 +10984,25 @@ class Dropdown extends WithExtraAttributes {
             (_a = this.$trigger) == null ? void 0 : _a.removeAttribute("aria-expanded");
           }
           break;
+        case "popover-height":
+          this.updatePopoverHeight(newValue);
+          break;
         default:
           super.attributeChangedCallback(name, oldValue, newValue);
           break;
       }
     }
   }
+  updatePopoverHeight(newValue) {
+    if (newValue) {
+      this.$popoverElement.style.setProperty(
+        "--px-popover-max-height",
+        newValue
+      );
+    } else {
+      this.$popoverElement.style.removeProperty("--px-popover-max-height");
+    }
+  }
   initPopover() {
     if (this.$trigger) {
       this.$trigger.setAttribute("popovertarget", this.popoverId);
@@ -11051,6 +11065,16 @@ class Dropdown extends WithExtraAttributes {
       this.removeAttribute("manual-toggle");
     }
   }
+  get popoverHeight() {
+    return this.getAttribute("popover-height");
+  }
+  set popoverHeight(value) {
+    if (value) {
+      this.setAttribute("popover-height", value);
+    } else {
+      this.removeAttribute("popover-height");
+    }
+  }
 }
 _Dropdown_instances = new WeakSet();
 resetManualPopoverDisplay_fn = function() {
@@ -13866,7 +13890,7 @@ class MddSectionItem extends HTMLElement {
 if (!customElements.get("px-mdd-section-item")) {
   customElements.define("px-mdd-section-item", MddSectionItem);
 }
-const styles$n = '*{box-sizing:border-box}#container{display:flex;flex-wrap:nowrap;font-family:var(--px-font-family);font-size:var(--px-font-size-base);color:var(--px-color-text-neutral-default);width:inherit;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default);overflow:hidden}#container.info{border-left:5px var(--px-color-icon-brand-default) solid}#container.success{border-left:5px var(--px-color-icon-purpose-success-default) solid}#container.warning{border-left:5px var(--px-color-icon-purpose-warning-default) solid}#container.error{border-left:5px var(--px-color-icon-purpose-error-default) solid}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-mobile)))}#content-container{display:flex;padding:var(--px-padding-m-mobile);flex-grow:1}#content-container px-vstack{max-height:100%}#media-container{display:none}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;transform:scale(.95);animation:modalIn .3s ease-out forwards;max-width:calc(100% - (var(--px-spacing-s-mobile) * 2));max-height:calc(100% - (var(--px-spacing-s-mobile) * 2))}dialog[open]{display:flex}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{max-height:12.5rem;overflow:auto}@media screen and (min-width: 48rem){dialog{max-width:calc(100% - (var(--px-spacing-s-tablet) * 2));max-height:calc(100% - (var(--px-spacing-s-tablet) * 2))}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-tablet)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-tablet);right:var(--px-padding-m-tablet)}#content{max-height:25rem}}@media screen and (min-width: 64.0625rem){dialog{max-width:calc(100% - (var(--px-spacing-s-laptop) * 2));max-height:calc(100% - (var(--px-spacing-s-laptop) * 2))}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-laptop)))}::slotted(px-button-icon[slot="close-button"]){top:var(--px-padding-m-laptop);right:var(--px-padding-m-laptop)}:host([media-src]) #container.has-close-button #icon-container{max-width:100%}:host([media-src]) #media-container{display:block;background-size:cover;background-position:center center;background-repeat:no-repeat;flex-basis:25rem;flex-shrink:0}}@media screen and (min-width: 69.875rem){#container{width:1080px}}@media screen and (min-width: 90.0625rem){dialog{max-width:calc(100% - (var(--px-spacing-s-desktop) * 2));max-height:calc(100% - (var(--px-spacing-s-desktop) * 2))}:host(:not([media-src])) #container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-desktop)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-desktop);right:var(--px-padding-m-desktop)}}@keyframes modalIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}';
+const styles$n = '*{box-sizing:border-box}#container{display:flex;flex-wrap:nowrap;font-family:var(--px-font-family);font-size:var(--px-font-size-base);color:var(--px-color-text-neutral-default);width:inherit;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default);overflow:hidden}#container.info{border-left:5px var(--px-color-icon-brand-default) solid}#container.success{border-left:5px var(--px-color-icon-purpose-success-default) solid}#container.warning{border-left:5px var(--px-color-icon-purpose-warning-default) solid}#container.error{border-left:5px var(--px-color-icon-purpose-error-default) solid}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-mobile)))}#content-container{display:flex;padding:var(--px-padding-m-mobile);flex-grow:1}#content-container px-vstack{max-height:100%;flex-grow:1}#media-container{display:none}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;transform:scale(.95);animation:modalIn .3s ease-out forwards;max-width:calc(100% - (var(--px-spacing-s-mobile) * 2));max-height:calc(100% - (var(--px-spacing-s-mobile) * 2))}dialog[open]{display:flex}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{max-height:12.5rem;overflow:auto}@media screen and (min-width: 48rem){dialog{max-width:calc(100% - (var(--px-spacing-s-tablet) * 2));max-height:calc(100% - (var(--px-spacing-s-tablet) * 2))}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-tablet)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-tablet);right:var(--px-padding-m-tablet)}#content{max-height:25rem}}@media screen and (min-width: 64.0625rem){dialog{max-width:calc(100% - (var(--px-spacing-s-laptop) * 2));max-height:calc(100% - (var(--px-spacing-s-laptop) * 2))}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-laptop)))}::slotted(px-button-icon[slot="close-button"]){top:var(--px-padding-m-laptop);right:var(--px-padding-m-laptop)}:host([media-src]) #container.has-close-button #icon-container{max-width:100%}:host([media-src]) #media-container{display:block;background-size:cover;background-position:center center;background-repeat:no-repeat;flex-basis:25rem;flex-shrink:0}}@media screen and (min-width: 69.875rem){#container{width:1080px}}@media screen and (min-width: 90.0625rem){dialog{max-width:calc(100% - (var(--px-spacing-s-desktop) * 2));max-height:calc(100% - (var(--px-spacing-s-desktop) * 2))}:host(:not([media-src])) #container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-desktop)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-desktop);right:var(--px-padding-m-desktop)}}@keyframes modalIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}';
 const styleSheet$m = new CSSStyleSheet();
 styleSheet$m.replaceSync(styles$n);
 const CLOSE_EVENT$1 = "px.lavender.modal.close";
@@ -17962,7 +17986,7 @@ class Typography extends HTMLElement {
 if (!customElements.get("px-typography")) {
   customElements.define("px-typography", Typography);
 }
-const styles$1 = ":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)}";
+const styles$1 = ":host .dropdown-content{background-color:var(--px-color-background-surface-default);border-radius:var(--px-radius-main);box-shadow:0 4px 6px -1px #25252514;padding:0;margin-top:calc(var(--px-focus-offset-mobile) + var(--px-focus-outline-mobile));overflow:auto}@media screen and (min-width: 48rem){:host .dropdown-content{margin-top:calc(var(--px-focus-offset-tablet) + var(--px-focus-outline-tablet))}}@media screen and (min-width: 64.0625rem){:host .dropdown-content{margin-top:calc(var(--px-focus-offset-laptop) + var(--px-focus-outline-laptop))}}@media screen and (min-width: 90.0625rem){:host .dropdown-content{margin-top:calc(var(--px-focus-offset-desktop) + var(--px-focus-outline-desktop))}}:host([inverted]) .dropdown-content{background-color:var(--px-color-background-surface-dark)}";
 const styleSheet$2 = new CSSStyleSheet();
 styleSheet$2.replaceSync(styles$1);
 const _Autocomplete = class _Autocomplete extends WithExtraAttributes {
@@ -18033,27 +18057,34 @@ const _Autocomplete = class _Autocomplete extends WithExtraAttributes {
       "extended--mobile",
       "extended--tablet",
       "extended--laptop",
-      "extended--desktop"
+      "extended--desktop",
+      "popover-height"
     ];
   }
   attributeChangedCallback(name, oldValue, newValue) {
-    switch (name) {
-      case "size":
-      case "state":
-      case "extended":
-      case "extended--mobile":
-      case "extended--tablet":
-      case "extended--laptop":
-      case "extended--desktop":
-        if (newValue !== null) {
-          this.$input.setAttribute(name, newValue);
-        } else {
-          this.$input.removeAttribute(name);
-        }
-        break;
-      default:
-        super.attributeChangedCallback(name, oldValue, newValue);
-        break;
+    if (oldValue !== newValue) {
+      switch (name) {
+        case "size":
+        case "state":
+        case "extended":
+        case "extended--mobile":
+        case "extended--tablet":
+        case "extended--laptop":
+        case "extended--desktop":
+          if (newValue !== null) {
+            this.$input.setAttribute(name, newValue);
+          } else {
+            this.$input.removeAttribute(name);
+          }
+          break;
+        case "popover-height":
+          this.setDefaultPopoverHeight();
+          this.$dropDown.popoverHeight = this.popoverHeight;
+          break;
+        default:
+          super.attributeChangedCallback(name, oldValue, newValue);
+          break;
+      }
     }
   }
   connectedCallback() {
@@ -18072,11 +18103,17 @@ const _Autocomplete = class _Autocomplete extends WithExtraAttributes {
     if (labelId) {
       this.$dropDownContent.setAttribute("aria-labelledby", labelId);
     }
+    this.setDefaultPopoverHeight();
   }
   disconnectedCallback() {
     this.$input.removeEventListener("input", __privateGet(this, _onInput));
     this.removeEventListener("keydown", __privateGet(this, _onKeyDown));
   }
+  setDefaultPopoverHeight() {
+    if (!this.popoverHeight) {
+      this.popoverHeight = "16.5rem";
+    }
+  }
   get value() {
     return this.$input.value;
   }
@@ -18110,6 +18147,16 @@ const _Autocomplete = class _Autocomplete extends WithExtraAttributes {
   get $label() {
     return this.querySelector('[slot="label"]');
   }
+  get popoverHeight() {
+    return this.getAttribute("popover-height");
+  }
+  set popoverHeight(value) {
+    if (value) {
+      this.setAttribute("popover-height", value);
+    } else {
+      this.removeAttribute("popover-height");
+    }
+  }
 };
 _controlId = new WeakMap();
 _onKeyDown = new WeakMap();