@proximus/lavender 2.0.0-alpha.114 → 2.0.0-alpha.115

package/dist/lavender.es.js

@@ -9836,7 +9836,7 @@ let Separator = _Separator;
 if (!customElements.get("px-separator")) {
   customElements.define("px-separator", Separator);
 }
-const styles$z = ':host *{box-sizing:border-box}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}dialog{box-shadow:none;padding:0;margin:auto 0 0;border:0;width:100%;animation:dialog-fade-in-bottom .3s;border-radius:var(--px-radius-main) var(--px-radius-main) 0 0;background-color:var(--px-color-background-surface-light)}#container{display:grid;grid-template:"header close" auto "content content" 1fr "footer footer" auto / 1fr auto;column-gap:var(--px-spacing-l-mobile);padding:var(--px-padding-l-mobile);max-height:90dvh}#header{grid-area:header;margin-bottom:var(--px-spacing-l-mobile)}#close{grid-area:close}#content{grid-area:content;overflow:hidden;overflow-y:auto}#footer{grid-area:footer;margin-top:var(--px-spacing-l-mobile)}@media screen and (min-width: 48rem){#container{column-gap:var(--px-spacing-l-tablet);padding:var(--px-padding-l-tablet)}#header{margin-bottom:var(--px-spacing-l-tablet)}#footer{margin-top:var(--px-spacing-l-tablet)}}@media screen and (min-width: 64.0625rem){#container{column-gap:var(--px-spacing-l-laptop);padding:var(--px-padding-l-laptop);max-width:var(--px-content-wrapper-max-width-laptop);margin:0 auto}#header{margin-bottom:var(--px-spacing-l-laptop)}#footer{margin-top:var(--px-spacing-l-laptop)}:host([showfrom="right"]) dialog{width:75%;height:100%;margin:0 0 0 auto;animation:dialog-fade-in-right .3s;border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}:host([showfrom="right"]) #container{max-height:100%;height:100%;margin:0 auto 0 0}:host([showfrom="left"]) dialog{width:75%;height:100%;margin:0 auto 0 0;animation:dialog-fade-in-left .3s;border-radius:0 var(--px-radius-main) var(--px-radius-main) 0}:host([showfrom="left"]) #container{margin:0 0 0 auto}}@media screen and (min-width: 90.0625rem){#container{column-gap:var(--px-spacing-l-desktop);padding:var(--px-padding-l-desktop)}#header{margin-bottom:var(--px-spacing-l-desktop)}#footer{margin-top:var(--px-spacing-l-desktop)}}@keyframes dialog-fade-in-right{0%{margin-right:-1080px}to{margin-right:0}}@keyframes dialog-fade-in-left{0%{margin-left:-1080px}to{margin-left:0}}@keyframes dialog-fade-in-bottom{0%{margin-bottom:-200px}to{margin-bottom:0}}';
+const styles$z = ':host *{box-sizing:border-box}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}dialog{box-shadow:none;padding:0;margin:auto 0 0;border:0;width:100%;animation:dialog-fade-in-bottom .3s;border-radius:var(--px-radius-main) var(--px-radius-main) 0 0;background-color:var(--px-color-background-surface-light)}#container{display:grid;grid-template:"header close" auto "content content" 1fr "footer footer" auto / 1fr auto;column-gap:var(--px-spacing-l-mobile);padding:var(--px-padding-l-mobile);max-height:90dvh}#header{grid-area:header;margin-bottom:var(--px-spacing-l-mobile)}#close{grid-area:close}#content{grid-area:content;overflow:hidden;overflow-y:auto}#footer{grid-area:footer;margin-top:var(--px-spacing-l-mobile)}:host([fullscreen]) #container{height:90dvh}@media screen and (max-width: 47.938rem){:host([fullscreen--mobile]) #container{height:90dvh}}@media screen and (min-width: 48rem) and (max-width: 64rem){:host([fullscreen--tablet]) #container{height:90dvh}}@media screen and (min-width: 48rem){#container{column-gap:var(--px-spacing-l-tablet);padding:var(--px-padding-l-tablet)}#header{margin-bottom:var(--px-spacing-l-tablet)}#footer{margin-top:var(--px-spacing-l-tablet)}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){:host([fullscreen--laptop]:not([showfrom="left"]):not([showfrom="right"])) #container{height:90dvh}}@media screen and (min-width: 64.0625rem){#container{column-gap:var(--px-spacing-l-laptop);padding:var(--px-padding-l-laptop);max-width:var(--px-content-wrapper-max-width-laptop);margin:0 auto}#header{margin-bottom:var(--px-spacing-l-laptop)}#footer{margin-top:var(--px-spacing-l-laptop)}:host([showfrom="right"]) dialog,:host([showfrom="left"]) dialog{width:75%;height:100%}:host([showfrom="right"]) #container,:host([showfrom="left"]) #container{max-height:100%;height:100%}:host([showfrom="right"]) dialog{margin:0 0 0 auto;animation:dialog-fade-in-right .3s;border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}:host([showfrom="right"]) #container{margin:0 auto 0 0}:host([showfrom="left"]) dialog{margin:0 auto 0 0;animation:dialog-fade-in-left .3s;border-radius:0 var(--px-radius-main) var(--px-radius-main) 0}:host([showfrom="left"]) #container{margin:0 0 0 auto}:host([showfrom="right"][fullscreen]) #container,:host([showfrom="left"][fullscreen]) #container{height:100%}}@media screen and (min-width: 90.0625rem){#container{column-gap:var(--px-spacing-l-desktop);padding:var(--px-padding-l-desktop)}#header{margin-bottom:var(--px-spacing-l-desktop)}#footer{margin-top:var(--px-spacing-l-desktop)}:host([fullscreen--desktop]:not([showfrom="left"]):not([showfrom="right"])) #container{height:90dvh}}@keyframes dialog-fade-in-right{0%{margin-right:-1080px}to{margin-right:0}}@keyframes dialog-fade-in-left{0%{margin-left:-1080px}to{margin-left:0}}@keyframes dialog-fade-in-bottom{0%{margin-bottom:-200px}to{margin-bottom:0}}';
 const styleSheet$u = new CSSStyleSheet();
 styleSheet$u.replaceSync(styles$z);
 const HIDE_EVENT = "px.lavender.drawer.hide";
@@ -9905,7 +9905,17 @@ class Drawer extends HTMLElement {
     );
   }
   static get observedAttributes() {
-    return ["open", "close-button-aria-label", "openedby", "closedby"];
+    return [
+      "open",
+      "close-button-aria-label",
+      "openedby",
+      "closedby",
+      "fullscreen",
+      "fullscreen--mobile",
+      "fullscreen--tablet",
+      "fullscreen--laptop",
+      "fullscreen--desktop"
+    ];
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     var _a, _b, _c;
@@ -10062,6 +10072,56 @@ class Drawer extends HTMLElement {
   set closedby(value) {
     this.setAttribute("closedby", value);
   }
+  get fullscreen() {
+    return this.hasAttribute("fullscreen");
+  }
+  set fullscreen(value) {
+    if (value) {
+      this.setAttribute("fullscreen", "");
+    } else {
+      this.removeAttribute("fullscreen");
+    }
+  }
+  get fullscreenMobile() {
+    return this.hasAttribute("fullscreen--mobile");
+  }
+  set fullscreenMobile(value) {
+    if (value) {
+      this.setAttribute("fullscreen--mobile", "");
+    } else {
+      this.removeAttribute("fullscreen--mobile");
+    }
+  }
+  get fullscreenTablet() {
+    return this.hasAttribute("fullscreen--tablet");
+  }
+  set fullscreenTablet(value) {
+    if (value) {
+      this.setAttribute("fullscreen--tablet", "");
+    } else {
+      this.removeAttribute("fullscreen--tablet");
+    }
+  }
+  get fullscreenLaptop() {
+    return this.hasAttribute("fullscreen--laptop");
+  }
+  set fullscreenLaptop(value) {
+    if (value) {
+      this.setAttribute("fullscreen--laptop", "");
+    } else {
+      this.removeAttribute("fullscreen--laptop");
+    }
+  }
+  get fullscreenDesktop() {
+    return this.hasAttribute("fullscreen--desktop");
+  }
+  set fullscreenDesktop(value) {
+    if (value) {
+      this.setAttribute("fullscreen--desktop", "");
+    } else {
+      this.removeAttribute("fullscreen--desktop");
+    }
+  }
 }
 if (!customElements.get("px-drawer")) {
   customElements.define("px-drawer", Drawer);