@proximus/lavender-mega-dropdown 1.4.11-alpha.9 → 1.4.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +10 -10
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -2072,7 +2072,7 @@ class xe extends HTMLElement {
|
|
|
2072
2072
|
}
|
|
2073
2073
|
}
|
|
2074
2074
|
customElements.get("px-mdd-closer") || customElements.define("px-mdd-closer", xe);
|
|
2075
|
-
const ve = ":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-height: 17.813rem){dialog #footer{position:static}dialog::backdrop{background-color:#0006}}@media screen and (max-width: 47.9375rem){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:32px;right:16px}#sections-container{overflow:auto}@media screen and (min-width: 48rem){#sections-container{padding-bottom:0}}#mobile-header{display:none}@media screen and (max-width: 47.9375rem){#mobile-header{display:block;padding-bottom:
|
|
2075
|
+
const ve = ":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-height: 17.813rem){dialog #footer{position:static}dialog::backdrop{background-color:#0006}}@media screen and (max-width: 47.9375rem){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:32px;right:16px}#sections-container{overflow:auto}@media screen and (min-width: 48rem){#sections-container{padding-bottom:0}}#mobile-header{display:none}@media screen and (max-width: 47.9375rem){#mobile-header{display:block;padding-bottom:var(--px-spacing-page-layout-between-sections-mobile)}}px-p{display:none}@media screen and (max-width: 47.9375rem){px-p{display:block;padding-bottom:var(--px-spacing-page-layout-between-sections-mobile)}}#footer{display:none}@media screen and (max-width: 47.9375rem){#footer{display:block;position:absolute;bottom:0;left:0;right:0;padding:var(--px-padding-m-mobile) var(--px-padding-s-mobile);background-color:var(--px-color-background-container-light-default);border-top:var(--px-size-border-m) solid var(--px-color-border-main-default)}}", Rt = new CSSStyleSheet();
|
|
2076
2076
|
Rt.replaceSync(ve);
|
|
2077
2077
|
var y, p, Y, It, S, jt;
|
|
2078
2078
|
class me extends HTMLElement {
|
|
@@ -2090,7 +2090,7 @@ class me extends HTMLElement {
|
|
|
2090
2090
|
background-color="none"
|
|
2091
2091
|
>
|
|
2092
2092
|
<px-vstack>
|
|
2093
|
-
<px-hstack id="mobile-header" gap="
|
|
2093
|
+
<px-hstack id="mobile-header" gap="default" align-items="center">
|
|
2094
2094
|
<!-- Back button is only visible if the name is __lavender_mobile_menu -->
|
|
2095
2095
|
<px-button id="back-button" variant="tertiary">
|
|
2096
2096
|
<px-icon name="chevron_left" from="lavender"></px-icon>
|
|
@@ -2105,9 +2105,8 @@ class me extends HTMLElement {
|
|
|
2105
2105
|
</px-button-icon>
|
|
2106
2106
|
</px-hstack>
|
|
2107
2107
|
<px-p
|
|
2108
|
-
|
|
2108
|
+
variant="title-2xl"
|
|
2109
2109
|
color="neutral"
|
|
2110
|
-
font-weight="title"
|
|
2111
2110
|
>
|
|
2112
2111
|
<slot name="title"></slot>
|
|
2113
2112
|
</px-p>
|
|
@@ -2121,6 +2120,7 @@ class me extends HTMLElement {
|
|
|
2121
2120
|
direction--mobile="column"
|
|
2122
2121
|
direction="row"
|
|
2123
2122
|
gap="l"
|
|
2123
|
+
gap--mobile="page-layout-between-sections"
|
|
2124
2124
|
id="sections-container"
|
|
2125
2125
|
>
|
|
2126
2126
|
<slot></slot>
|
|
@@ -2170,7 +2170,7 @@ class me extends HTMLElement {
|
|
|
2170
2170
|
}
|
|
2171
2171
|
})
|
|
2172
2172
|
);
|
|
2173
|
-
}), this.getAttribute("name") === "__lavender_mobile_menu" && (n(this, p, Y).style.
|
|
2173
|
+
}), this.getAttribute("name") === "__lavender_mobile_menu" && (n(this, p, Y).style.display = "none"), this.getAttribute("name") !== "__lavender_mobile_menu" && (n(this, p, It).innerText = ((r = (e = this.closest("px-header")) == null ? void 0 : e.querySelector(
|
|
2174
2174
|
`px-header-item[for="${this.getAttribute("name")}"]`
|
|
2175
2175
|
)) == null ? void 0 : r.innerText) ?? ""), this.$slotMddFooter || (n(this, p, S).style.display = "none"), k(this, y, new MutationObserver(() => {
|
|
2176
2176
|
this.$slotMddFooter && (n(this, p, S).style.display = "block");
|
|
@@ -2246,7 +2246,7 @@ y = new WeakMap(), p = new WeakSet(), Y = function() {
|
|
|
2246
2246
|
return this.shadowRoot.querySelectorAll("px-button-icon");
|
|
2247
2247
|
};
|
|
2248
2248
|
customElements.get("px-mdd") || customElements.define("px-mdd", me);
|
|
2249
|
-
const fe = ':host{flex-basis:25%}@media screen and (max-width: 47.9375rem){:host{width:100%;flex-basis:100%}#section-wrapper{background-color
|
|
2249
|
+
const fe = ':host{flex-basis:25%}@media screen and (max-width: 47.9375rem){:host{width:100%;flex-basis:100%}#section-wrapper{background-color:var(--px-color-background-surface-light);border-radius:var(--px-radius-main);padding-inline:var(--px-padding-m-mobile)}::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:var(--px-color-background-surface-light);border-radius:var(--px-radius-main);padding-inline:var(--px-padding-m-mobile);line-height:4rem}:host([title-hidden]){padding-bottom:var(--mdd-section-container-padding-bottom, 0)}}', Pt = new CSSStyleSheet();
|
|
2250
2250
|
Pt.replaceSync(fe);
|
|
2251
2251
|
class ke extends HTMLElement {
|
|
2252
2252
|
constructor() {
|
|
@@ -2259,7 +2259,7 @@ class ke extends HTMLElement {
|
|
|
2259
2259
|
<slot></slot>
|
|
2260
2260
|
</px-vstack>
|
|
2261
2261
|
</nav>
|
|
2262
|
-
<px-vstack gap="default" gap--mobile="
|
|
2262
|
+
<px-vstack gap="default" gap--mobile="s">
|
|
2263
2263
|
<slot name="footer"></slot>
|
|
2264
2264
|
</px-vstack>
|
|
2265
2265
|
</px-vstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [Pt];
|
|
@@ -2579,19 +2579,19 @@ f = new WeakMap(), R = new WeakSet(), Dt = function() {
|
|
|
2579
2579
|
return !this.hasAttribute("disabled") && this.$el.getAttribute("aria-disabled") !== "true";
|
|
2580
2580
|
};
|
|
2581
2581
|
customElements.get("px-a-wrapper") || customElements.define("px-a-wrapper", ze);
|
|
2582
|
-
const we = '.mdd-section-item-action-container{display:inline-flex;align-items:center}a{text-decoration:none;color:inherit
|
|
2582
|
+
const we = '.mdd-section-item-action-container{display:inline-flex;align-items:center}a{text-decoration:none;color:inherit}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a:hover{text-decoration:underline;color:var(--px-color-text-state-hover-default)}button{background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;width:100%;text-align:left;font-weight:var(--px-font-weight-title)}a,button{display:block;font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media screen and (max-width: 47.9375rem){a,button{padding:var(--px-spacing-s-mobile) 0}}@media screen and (min-width: 48rem){a{display:inline-block}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a,button{font-size:var(--px-text-size-label-m-tablet)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a,button{font-size:var(--px-text-size-label-m-laptop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media screen and (min-width: 90.0625rem){a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a,button{font-size:var(--px-text-size-label-m-desktop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}', Nt = new CSSStyleSheet();
|
|
2583
2583
|
Nt.replaceSync(we);
|
|
2584
2584
|
class $e extends HTMLElement {
|
|
2585
2585
|
constructor() {
|
|
2586
2586
|
var t;
|
|
2587
2587
|
super(), this.template = `
|
|
2588
|
-
<px-hstack align-items="center">
|
|
2588
|
+
<px-hstack align-items="center" gap="default">
|
|
2589
2589
|
<span class="mdd-section-item-action-container">
|
|
2590
2590
|
<slot></slot>
|
|
2591
2591
|
<slot name="after"></slot>
|
|
2592
2592
|
</span>
|
|
2593
2593
|
<px-spacer></px-spacer>
|
|
2594
|
-
<px-icon name="chevron_right" from="lavender"></px-icon>
|
|
2594
|
+
<px-icon name="chevron_right" from="lavender" size="m"></px-icon>
|
|
2595
2595
|
</px-hstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [Nt], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.internals && (this.internals.role = "listitem");
|
|
2596
2596
|
}
|
|
2597
2597
|
static get observedAttributes() {
|