@proximus/lavender-mega-dropdown 1.4.10-beta.2 → 1.4.10-beta.4
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 +16 -15
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -376,20 +376,21 @@ class ie extends X {
|
|
|
376
376
|
}
|
|
377
377
|
}
|
|
378
378
|
connectedCallback() {
|
|
379
|
+
var r;
|
|
379
380
|
this.role = "img";
|
|
380
381
|
const e = document.querySelectorAll("px-icon-set");
|
|
381
382
|
e || console.log("<px-icon-set> component not found");
|
|
382
|
-
for (const
|
|
383
|
-
if (!
|
|
383
|
+
for (const o of e) {
|
|
384
|
+
if (!o.getAttribute("name") || !o.getAttribute("src")) {
|
|
384
385
|
console.error("Icon name or src not found");
|
|
385
386
|
continue;
|
|
386
387
|
}
|
|
387
|
-
|
|
388
|
+
o.getAttribute("name") === this.from && o.getAttribute("type") !== "font" && (k(this, m, o.getAttribute("src")), this.$el.firstElementChild.setAttribute(
|
|
388
389
|
"href",
|
|
389
390
|
`${n(this, m)}#icon-${this.name}`
|
|
390
391
|
));
|
|
391
392
|
}
|
|
392
|
-
!this.ariaLabel && n(this, b) && (n(this, b).ariaHidden = "true", this.ariaHidden = "true");
|
|
393
|
+
!this.ariaLabel && n(this, b) && (n(this, b).ariaHidden = "true", this.ariaHidden = "true"), ((r = this.parentElement) == null ? void 0 : r.localName) === "px-a" && this.slot !== "before" && this.slot !== "after" && (this.color || this.setAttribute("color", "inherit"));
|
|
393
394
|
}
|
|
394
395
|
updateAttribute(e, r, o, i) {
|
|
395
396
|
r !== null && r !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${r}`) : this.$el.classList.toggle(r)), o !== null && o !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${o}`) : this.$el.classList.toggle(o)), this.checkName(i, o) || d(
|
|
@@ -2071,7 +2072,7 @@ class xe extends HTMLElement {
|
|
|
2071
2072
|
}
|
|
2072
2073
|
}
|
|
2073
2074
|
customElements.get("px-mdd-closer") || customElements.define("px-mdd-closer", xe);
|
|
2074
|
-
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();
|
|
2075
2076
|
Rt.replaceSync(ve);
|
|
2076
2077
|
var y, p, Y, It, S, jt;
|
|
2077
2078
|
class me extends HTMLElement {
|
|
@@ -2089,7 +2090,7 @@ class me extends HTMLElement {
|
|
|
2089
2090
|
background-color="none"
|
|
2090
2091
|
>
|
|
2091
2092
|
<px-vstack>
|
|
2092
|
-
<px-hstack id="mobile-header" gap="
|
|
2093
|
+
<px-hstack id="mobile-header" gap="default" align-items="center">
|
|
2093
2094
|
<!-- Back button is only visible if the name is __lavender_mobile_menu -->
|
|
2094
2095
|
<px-button id="back-button" variant="tertiary">
|
|
2095
2096
|
<px-icon name="chevron_left" from="lavender"></px-icon>
|
|
@@ -2104,9 +2105,8 @@ class me extends HTMLElement {
|
|
|
2104
2105
|
</px-button-icon>
|
|
2105
2106
|
</px-hstack>
|
|
2106
2107
|
<px-p
|
|
2107
|
-
|
|
2108
|
+
variant="title-2xl"
|
|
2108
2109
|
color="neutral"
|
|
2109
|
-
font-weight="title"
|
|
2110
2110
|
>
|
|
2111
2111
|
<slot name="title"></slot>
|
|
2112
2112
|
</px-p>
|
|
@@ -2120,6 +2120,7 @@ class me extends HTMLElement {
|
|
|
2120
2120
|
direction--mobile="column"
|
|
2121
2121
|
direction="row"
|
|
2122
2122
|
gap="l"
|
|
2123
|
+
gap--mobile="page-layout-between-sections"
|
|
2123
2124
|
id="sections-container"
|
|
2124
2125
|
>
|
|
2125
2126
|
<slot></slot>
|
|
@@ -2169,7 +2170,7 @@ class me extends HTMLElement {
|
|
|
2169
2170
|
}
|
|
2170
2171
|
})
|
|
2171
2172
|
);
|
|
2172
|
-
}), 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(
|
|
2173
2174
|
`px-header-item[for="${this.getAttribute("name")}"]`
|
|
2174
2175
|
)) == null ? void 0 : r.innerText) ?? ""), this.$slotMddFooter || (n(this, p, S).style.display = "none"), k(this, y, new MutationObserver(() => {
|
|
2175
2176
|
this.$slotMddFooter && (n(this, p, S).style.display = "block");
|
|
@@ -2245,7 +2246,7 @@ y = new WeakMap(), p = new WeakSet(), Y = function() {
|
|
|
2245
2246
|
return this.shadowRoot.querySelectorAll("px-button-icon");
|
|
2246
2247
|
};
|
|
2247
2248
|
customElements.get("px-mdd") || customElements.define("px-mdd", me);
|
|
2248
|
-
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();
|
|
2249
2250
|
Pt.replaceSync(fe);
|
|
2250
2251
|
class ke extends HTMLElement {
|
|
2251
2252
|
constructor() {
|
|
@@ -2258,7 +2259,7 @@ class ke extends HTMLElement {
|
|
|
2258
2259
|
<slot></slot>
|
|
2259
2260
|
</px-vstack>
|
|
2260
2261
|
</nav>
|
|
2261
|
-
<px-vstack gap="default" gap--mobile="
|
|
2262
|
+
<px-vstack gap="default" gap--mobile="s">
|
|
2262
2263
|
<slot name="footer"></slot>
|
|
2263
2264
|
</px-vstack>
|
|
2264
2265
|
</px-vstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [Pt];
|
|
@@ -2408,7 +2409,7 @@ const ye = [...ut, "link-m", "link-s"], lt = [
|
|
|
2408
2409
|
updateVariant(t, e) {
|
|
2409
2410
|
t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(lt, e) || d(
|
|
2410
2411
|
`"${e}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${lt.join('", "')}".`
|
|
2411
|
-
)
|
|
2412
|
+
);
|
|
2412
2413
|
}
|
|
2413
2414
|
updateShape(t, e, r) {
|
|
2414
2415
|
if (!w(r, e)) {
|
|
@@ -2578,19 +2579,19 @@ f = new WeakMap(), R = new WeakSet(), Dt = function() {
|
|
|
2578
2579
|
return !this.hasAttribute("disabled") && this.$el.getAttribute("aria-disabled") !== "true";
|
|
2579
2580
|
};
|
|
2580
2581
|
customElements.get("px-a-wrapper") || customElements.define("px-a-wrapper", ze);
|
|
2581
|
-
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();
|
|
2582
2583
|
Nt.replaceSync(we);
|
|
2583
2584
|
class $e extends HTMLElement {
|
|
2584
2585
|
constructor() {
|
|
2585
2586
|
var t;
|
|
2586
2587
|
super(), this.template = `
|
|
2587
|
-
<px-hstack align-items="center">
|
|
2588
|
+
<px-hstack align-items="center" gap="default">
|
|
2588
2589
|
<span class="mdd-section-item-action-container">
|
|
2589
2590
|
<slot></slot>
|
|
2590
2591
|
<slot name="after"></slot>
|
|
2591
2592
|
</span>
|
|
2592
2593
|
<px-spacer></px-spacer>
|
|
2593
|
-
<px-icon name="chevron_right" from="lavender"></px-icon>
|
|
2594
|
+
<px-icon name="chevron_right" from="lavender" size="m"></px-icon>
|
|
2594
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");
|
|
2595
2596
|
}
|
|
2596
2597
|
static get observedAttributes() {
|