@proximus/lavender-light 1.4.11-alpha.9 → 1.4.12-alpha.2
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.
|
@@ -3581,7 +3581,7 @@ let Paragraph = _Paragraph;
|
|
|
3581
3581
|
if (!customElements.get("px-p")) {
|
|
3582
3582
|
customElements.define("px-p", Paragraph);
|
|
3583
3583
|
}
|
|
3584
|
-
const styles$3 = '*{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{padding:var(--px-padding-m-mobile);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}::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){#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){#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){: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}}';
|
|
3584
|
+
const styles$3 = '*{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}}';
|
|
3585
3585
|
const styleSheet$1 = new CSSStyleSheet();
|
|
3586
3586
|
styleSheet$1.replaceSync(styles$3);
|
|
3587
3587
|
const CLOSE_EVENT = "px.lavender.modal.close";
|
|
@@ -4676,7 +4676,7 @@ class Section extends WithExtraAttributes {
|
|
|
4676
4676
|
if (!customElements.get("px-section")) {
|
|
4677
4677
|
customElements.define("px-section", Section);
|
|
4678
4678
|
}
|
|
4679
|
-
const styles$1 = ":host{display:block}:host *{box-sizing:border-box}button,a{display:
|
|
4679
|
+
const styles$1 = ":host{display:block;height:100%}:host *{box-sizing:border-box}button,a{display:flex;flex-direction:column;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-l);color:var(--px-color-text-neutral-default);text-align:center;cursor:pointer;padding:var(--px-padding-m-mobile) 0;height:100%}button:after,a:after{content:attr(data-label);display:block;height:0;width:auto;visibility:hidden;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none;font-weight:var(--px-font-weight-title)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}:host([current]) button,button:hover,:host([current]) a,a:hover{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default)}button{margin:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit}button[aria-expanded=true]{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);border-bottom-color:var(--px-color-background-container-primary-default)}a{text-decoration:none}@media screen and (min-width: 48rem){button,a{font-size:var(--px-text-size-label-m-tablet);padding:var(--px-padding-m-tablet) 0}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){button,a{font-size:var(--px-text-size-label-m-laptop);padding:var(--px-padding-m-laptop) 0}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media screen and (min-width: 90.0625rem){button,a{font-size:var(--px-text-size-label-m-desktop);padding:var(--px-padding-m-desktop) 0}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}";
|
|
4680
4680
|
const stylesheet$1 = new CSSStyleSheet();
|
|
4681
4681
|
stylesheet$1.replaceSync(styles$1);
|
|
4682
4682
|
class HeaderItem extends WithExtraAttributes {
|
|
@@ -5136,7 +5136,7 @@ class MDDLink extends HTMLElement {
|
|
|
5136
5136
|
if (!customElements.get("px-mdd-a")) {
|
|
5137
5137
|
customElements.define("px-mdd-a", MDDLink);
|
|
5138
5138
|
}
|
|
5139
|
-
const styles =
|
|
5139
|
+
const styles = '#navigation-container{border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}#dropdown-zone--desktop{display:none}#primary-navigation{display:none;margin:0;padding:0}#primary-navigation div,#primary-navigation px-hstack{height:100%}#panel-container{position:absolute;top:0;left:0;right:0;z-index:999}#backdrop-filter{display:none;position:absolute;z-index:998;left:0;width:100vw;height:100%;background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}@media screen and (min-width: 48rem){#dropdown-zone--desktop{display:flex;justify-content:space-between;align-items:center}#dropdown-zone--desktop ::slotted([slot="target-group"]),#dropdown-zone--desktop ::slotted([slot="user-language"]){margin-bottom:var(--px-spacing-s-tablet)}#primary-navigation{display:block}#panel-container{top:auto}::slotted([slot="header-actions"]){margin-bottom:var(--px-padding-s-tablet)}}@media screen and (min-width: 64.0625rem){#dropdown-zone--desktop ::slotted([slot="target-group"]),#dropdown-zone--desktop ::slotted([slot="user-language"]){margin-bottom:var(--px-spacing-s-laptop)}::slotted([slot="header-actions"]){margin-bottom:var(--px-padding-s-laptop)}}@media screen and (min-width: 90.0625rem){#dropdown-zone--desktop ::slotted([slot="target-group"]),#dropdown-zone--desktop ::slotted([slot="user-language"]){margin-bottom:var(--px-spacing-s-desktop)}::slotted([slot="header-actions"]){margin-bottom:var(--px-padding-s-desktop)}}';
|
|
5140
5140
|
function isObject(value) {
|
|
5141
5141
|
var type = typeof value;
|
|
5142
5142
|
return value != null && (type == "object" || type == "function");
|
|
@@ -5335,12 +5335,15 @@ class Header extends WithExtraAttributes {
|
|
|
5335
5335
|
<div>
|
|
5336
5336
|
<header>
|
|
5337
5337
|
<slot name="skip"></slot>
|
|
5338
|
-
<px-section id="navigation-container" padding-
|
|
5338
|
+
<px-section id="navigation-container" padding-bottom="none" padding-bottom--mobile="s" padding-top="s" background-color="none">
|
|
5339
5339
|
<div id="dropdown-zone--desktop">
|
|
5340
5340
|
<slot name="target-group"></slot>
|
|
5341
5341
|
<slot name="user-language"></slot>
|
|
5342
5342
|
</div>
|
|
5343
|
-
<px-hstack gap="default" wrap="wrap"
|
|
5343
|
+
<px-hstack gap="default" wrap="wrap" id="navigation-wrapper">
|
|
5344
|
+
<px-hstack align-items="center">
|
|
5345
|
+
<slot name="header-logo"></slot>
|
|
5346
|
+
</px-hstack>
|
|
5344
5347
|
<slot name="header-logo"></slot>
|
|
5345
5348
|
<nav id="primary-navigation" aria-label="${this.primaryNavigationAriaLabel}">
|
|
5346
5349
|
<div role="list">
|
|
@@ -5355,7 +5358,7 @@ class Header extends WithExtraAttributes {
|
|
|
5355
5358
|
<px-button-icon id="burger-menu" variant="naked" aria-label="${this.burgerMenuAriaLabel ?? "Open menu"}"
|
|
5356
5359
|
aria-expanded="false" hidden--tablet hidden--laptop
|
|
5357
5360
|
hidden--desktop>
|
|
5358
|
-
<px-icon name="burger_menu" from="lavender"></px-icon>
|
|
5361
|
+
<px-icon name="burger_menu" from="lavender" size="m"></px-icon>
|
|
5359
5362
|
</px-button-icon>
|
|
5360
5363
|
</px-hstack>
|
|
5361
5364
|
</px-hstack>
|
|
@@ -5613,7 +5616,7 @@ $megaDropdowns_get = function() {
|
|
|
5613
5616
|
if (!customElements.get("px-header")) {
|
|
5614
5617
|
customElements.define("px-header", Header);
|
|
5615
5618
|
}
|
|
5616
|
-
const contentHeaderCss =
|
|
5619
|
+
const contentHeaderCss = ':host{--min-height--mobile: 15.625rem;--min-height--tablet: 17.5rem;--min-height--laptop: 17.5rem;--min-height--desktop: 17.5rem}:host,:host>*{display:block;box-sizing:border-box}.content-header{position:relative;z-index:0}[min-height] .content-header-content{min-height:calc(var(--min-height--mobile) - (var(--px-spacing-l-mobile) * 2))}.content-header-content{display:flex;flex-direction:column;z-index:2;position:relative;box-sizing:border-box}.content-header-content ::slotted([slot="patch"]){margin-top:var(--px-spacing-l-mobile)}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media screen and (min-width: 48rem){.content-header-content ::slotted([slot="patch"]){flex-shrink:0}.content-header-content ::slotted([slot="patch"]),.content-header-content ::slotted([slot="patch-description"]){margin-top:var(--px-spacing-l-tablet)}[min-height] .content-header-content{min-height:calc(var(--min-height--tablet) - (var(--px-spacing-l-tablet) * 2))}}@media screen and (min-width: 64.0625rem){.content-header-content ::slotted([slot="patch"]),.content-header-content ::slotted([slot="patch-description"]){margin-top:var(--px-spacing-l-laptop)}[min-height] .content-header-content{min-height:calc(var(--min-height--laptop) - (var(--px-spacing-l-laptop) * 2))}}@media screen and (min-width: 90.0625rem){.content-header-content ::slotted([slot="patch"]),.content-header-content ::slotted([slot="patch-description"]){margin-top:var(--px-spacing-l-desktop)}[min-height] .content-header-content{min-height:calc(var(--min-height--desktop) - (var(--px-spacing-l-desktop) * 2))}}';
|
|
5617
5620
|
const gridCss = ":host{display:block;--grid-cols: initial;--grid-cols--mobile: initial;--grid-cols--tablet: initial;--grid-cols--laptop: initial;--grid-cols--desktop: initial;--justify-content: initial;--justify-items: initial;--align-content: initial;--align-items: initial}.grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items)}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media screen and (max-width: 47.938rem){.grid{grid-template-columns:repeat(var(--grid-cols--mobile, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media screen and (min-width: 48rem) and (max-width: 64rem){.grid{grid-template-columns:repeat(var(--grid-cols--tablet, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-tablet{justify-content:normal}.justify-content-start-tablet{justify-content:start}.justify-content-end-tablet{justify-content:end}.justify-content-center-tablet{justify-content:center}.justify-content-space-between-tablet{justify-content:space-between}.justify-content-space-around-tablet{justify-content:space-around}.justify-content-space-evenly-tablet{justify-content:space-evenly}.justify-content-stretch-tablet{justify-content:stretch}.justify-items-start-tablet{justify-items:start}.justify-items-end-tablet{justify-items:end}.justify-items-center-tablet{justify-items:center}.justify-items-stretch-tablet{justify-items:stretch}.align-content-normal-tablet{align-content:normal}.align-content-start-tablet{align-content:start}.align-content-end-tablet{align-content:end}.align-content-center-tablet{align-content:center}.align-content-space-between-tablet{align-content:space-between}.align-content-space-around-tablet{align-content:space-around}.align-content-space-evenly-tablet{align-content:space-evenly}.align-content-stretch-tablet{align-content:stretch}.align-items-start-tablet{align-items:start}.align-items-end-tablet{align-items:end}.align-items-center-tablet{align-items:center}.align-items-stretch-tablet{align-items:stretch}}@media screen and (min-width: 64.0625rem){.grid{grid-template-columns:repeat(var(--grid-cols--laptop, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-laptop{justify-content:normal}.justify-content-start-laptop{justify-content:start}.justify-content-end-laptop{justify-content:end}.justify-content-center-laptop{justify-content:center}.justify-content-space-between-laptop{justify-content:space-between}.justify-content-space-around-laptop{justify-content:space-around}.justify-content-space-evenly-laptop{justify-content:space-evenly}.justify-content-stretch-laptop{justify-content:stretch}.justify-items-start-laptop{justify-items:start}.justify-items-end-laptop{justify-items:end}.justify-items-center-laptop{justify-items:center}.justify-items-stretch-laptop{justify-items:stretch}.align-content-normal-laptop{align-content:normal}.align-content-start-laptop{align-content:start}.align-content-end-laptop{align-content:end}.align-content-center-laptop{align-content:center}.align-content-space-between-laptop{align-content:space-between}.align-content-space-around-laptop{align-content:space-around}.align-content-space-evenly-laptop{align-content:space-evenly}.align-content-stretch-laptop{align-content:stretch}.align-items-start-laptop{align-items:start}.align-items-end-laptop{align-items:end}.align-items-center-laptop{align-items:center}.align-items-stretch-laptop{align-items:stretch}}";
|
|
5618
5621
|
const gridStyles = new CSSStyleSheet();
|
|
5619
5622
|
gridStyles.replaceSync(gridCss);
|
|
@@ -5976,6 +5979,10 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
5976
5979
|
<px-h1><slot></slot></px-h1>
|
|
5977
5980
|
<slot name="subtitle"></slot>
|
|
5978
5981
|
</px-vstack>
|
|
5982
|
+
<px-stack gap="s" direction="row" direction--mobile="column">
|
|
5983
|
+
<slot name="patch" shrink></slot>
|
|
5984
|
+
<slot name="patch-description"></slot>
|
|
5985
|
+
</px-stack>
|
|
5979
5986
|
</div>
|
|
5980
5987
|
</px-container>
|
|
5981
5988
|
</px-grid>
|
|
@@ -6001,38 +6008,22 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
6001
6008
|
"has-gridding--mobile",
|
|
6002
6009
|
"has-gridding--tablet",
|
|
6003
6010
|
"has-gridding--laptop",
|
|
6011
|
+
"has-gridding--desktop",
|
|
6004
6012
|
"inverted"
|
|
6005
6013
|
];
|
|
6006
6014
|
}
|
|
6007
6015
|
connectedCallback() {
|
|
6008
|
-
|
|
6009
|
-
|
|
6010
|
-
|
|
6011
|
-
|
|
6012
|
-
|
|
6013
|
-
`<px-stack gap="s" direction="row" direction--mobile="column">
|
|
6014
|
-
<slot name="patch" shrink></slot>
|
|
6015
|
-
<slot name="patch-description"></slot>
|
|
6016
|
-
</px-stack>`
|
|
6017
|
-
);
|
|
6018
|
-
}
|
|
6019
|
-
if (this.$subtitleSlot) {
|
|
6020
|
-
this.$subtitleSlot.setAttribute("variant", "subtitle");
|
|
6021
|
-
}
|
|
6022
|
-
if (this.$patchDescriptionSlot) {
|
|
6023
|
-
if (this.$patchDescriptionSlot.localName === "px-p") {
|
|
6024
|
-
this.$patchDescriptionSlot.setAttribute("variant", "default");
|
|
6025
|
-
}
|
|
6026
|
-
if (this.$patchDescriptionSlot.localName === "px-p" || this.$patchDescriptionSlot.localName === "px-span") {
|
|
6027
|
-
this.$patchDescriptionSlot.setAttribute("font-size", "body-l");
|
|
6028
|
-
this.$patchDescriptionSlot.removeAttribute("font-weight");
|
|
6029
|
-
this.$patchDescriptionSlot.removeAttribute("color");
|
|
6030
|
-
}
|
|
6031
|
-
if (this.$patchDescriptionSlot.localName === "px-price") {
|
|
6032
|
-
this.$patchDescriptionSlot.setAttribute("size", "m");
|
|
6033
|
-
}
|
|
6034
|
-
}
|
|
6016
|
+
var _a, _b;
|
|
6017
|
+
this.styleSubtitleSlot = this.styleSubtitleSlot.bind(this);
|
|
6018
|
+
this.stylepatchDescriptionSlotted = this.stylepatchDescriptionSlotted.bind(this);
|
|
6019
|
+
this.styleSubtitleSlot();
|
|
6020
|
+
this.stylepatchDescriptionSlotted();
|
|
6035
6021
|
this.createGridding();
|
|
6022
|
+
(_a = this.$subtitleSlot) == null ? void 0 : _a.addEventListener("slotchange", this.styleSubtitleSlot);
|
|
6023
|
+
(_b = this.$patchDescriptionSlot) == null ? void 0 : _b.addEventListener(
|
|
6024
|
+
"slotchange",
|
|
6025
|
+
this.stylepatchDescriptionSlotted
|
|
6026
|
+
);
|
|
6036
6027
|
}
|
|
6037
6028
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
6038
6029
|
if (oldValue !== newValue) {
|
|
@@ -6065,6 +6056,7 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
6065
6056
|
case "has-gridding--mobile":
|
|
6066
6057
|
case "has-gridding--tablet":
|
|
6067
6058
|
case "has-gridding--laptop":
|
|
6059
|
+
case "has-gridding--desktop":
|
|
6068
6060
|
this.createGridding(newValue);
|
|
6069
6061
|
break;
|
|
6070
6062
|
case "inverted":
|
|
@@ -6082,6 +6074,37 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
6082
6074
|
}
|
|
6083
6075
|
}
|
|
6084
6076
|
}
|
|
6077
|
+
disconnectedCallback() {
|
|
6078
|
+
var _a, _b;
|
|
6079
|
+
(_a = this.$subtitleSlot) == null ? void 0 : _a.removeEventListener(
|
|
6080
|
+
"slotchange",
|
|
6081
|
+
this.styleSubtitleSlot
|
|
6082
|
+
);
|
|
6083
|
+
(_b = this.$patchDescriptionSlot) == null ? void 0 : _b.removeEventListener(
|
|
6084
|
+
"slotchange",
|
|
6085
|
+
this.stylepatchDescriptionSlotted
|
|
6086
|
+
);
|
|
6087
|
+
}
|
|
6088
|
+
stylepatchDescriptionSlotted() {
|
|
6089
|
+
if (this.$patchDescriptionSlotted) {
|
|
6090
|
+
if (this.$patchDescriptionSlotted.localName === "px-p") {
|
|
6091
|
+
this.$patchDescriptionSlotted.setAttribute("variant", "default");
|
|
6092
|
+
}
|
|
6093
|
+
if (this.$patchDescriptionSlotted.localName === "px-p" || this.$patchDescriptionSlotted.localName === "px-span") {
|
|
6094
|
+
this.$patchDescriptionSlotted.setAttribute("font-size", "body-l");
|
|
6095
|
+
this.$patchDescriptionSlotted.removeAttribute("font-weight");
|
|
6096
|
+
this.$patchDescriptionSlotted.removeAttribute("color");
|
|
6097
|
+
}
|
|
6098
|
+
if (this.$patchDescriptionSlotted.localName === "px-price") {
|
|
6099
|
+
this.$patchDescriptionSlotted.setAttribute("size", "m");
|
|
6100
|
+
}
|
|
6101
|
+
}
|
|
6102
|
+
}
|
|
6103
|
+
styleSubtitleSlot() {
|
|
6104
|
+
if (this.$subtitleSlotted) {
|
|
6105
|
+
this.$subtitleSlotted.setAttribute("variant", "subtitle");
|
|
6106
|
+
}
|
|
6107
|
+
}
|
|
6085
6108
|
createGridding(value) {
|
|
6086
6109
|
const breakpoints = [
|
|
6087
6110
|
{ prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
|
|
@@ -6099,6 +6122,11 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
6099
6122
|
prop: "hasGriddingLaptop",
|
|
6100
6123
|
gridAttr: "grid-cols--laptop",
|
|
6101
6124
|
attr: "col-span--laptop"
|
|
6125
|
+
},
|
|
6126
|
+
{
|
|
6127
|
+
prop: "hasGriddingDesktop",
|
|
6128
|
+
gridAttr: "grid-cols--desktop",
|
|
6129
|
+
attr: "col-span--desktop"
|
|
6102
6130
|
}
|
|
6103
6131
|
];
|
|
6104
6132
|
const spanElement = this.shadowRoot.querySelector(
|
|
@@ -6128,9 +6156,21 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
6128
6156
|
return this.shadowRoot.querySelector("px-h1");
|
|
6129
6157
|
}
|
|
6130
6158
|
get $subtitleSlot() {
|
|
6159
|
+
var _a;
|
|
6160
|
+
return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
|
|
6161
|
+
'slot[name="subtitle"]'
|
|
6162
|
+
);
|
|
6163
|
+
}
|
|
6164
|
+
get $subtitleSlotted() {
|
|
6131
6165
|
return this.querySelector('[slot="subtitle"]');
|
|
6132
6166
|
}
|
|
6133
6167
|
get $patchDescriptionSlot() {
|
|
6168
|
+
var _a;
|
|
6169
|
+
return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
|
|
6170
|
+
'slot[name="patch-description"]'
|
|
6171
|
+
);
|
|
6172
|
+
}
|
|
6173
|
+
get $patchDescriptionSlotted() {
|
|
6134
6174
|
return this.querySelector('[slot="patch-description"]');
|
|
6135
6175
|
}
|
|
6136
6176
|
get $overlapSlot() {
|
|
@@ -6247,6 +6287,16 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
6247
6287
|
this.removeAttribute("has-gridding--laptop");
|
|
6248
6288
|
}
|
|
6249
6289
|
}
|
|
6290
|
+
get hasGriddingDesktop() {
|
|
6291
|
+
return this.hasAttribute("has-gridding--desktop");
|
|
6292
|
+
}
|
|
6293
|
+
set hasGriddingDesktop(value) {
|
|
6294
|
+
if (value) {
|
|
6295
|
+
this.setAttribute("has-gridding--desktop", "");
|
|
6296
|
+
} else {
|
|
6297
|
+
this.removeAttribute("has-gridding--desktop");
|
|
6298
|
+
}
|
|
6299
|
+
}
|
|
6250
6300
|
get inverted() {
|
|
6251
6301
|
return this.hasAttribute("inverted");
|
|
6252
6302
|
}
|