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