@proximus/lavender-light 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.
|
@@ -12,7 +12,7 @@ const linkCss = ':host([variant="icon-link"]){display:inline-flex}a,.link,::slot
|
|
|
12
12
|
const paragraphCss = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);margin:0}::slotted(p){margin-bottom:var(--px-spacing-xs-mobile)}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-text-neutral-inverted)}@media screen and (max-width: 47.938rem){.text-align-left--mobile{text-align:left}.text-align-center--mobile{text-align:center}.text-align-right--mobile{text-align:right}}@media screen and (min-width: 48rem){p,::slotted(p){font-size:var(--px-text-size-body-m-tablet)}::slotted(p){margin-bottom:var(--px-spacing-xs-tablet)}.text-align-left--tablet{text-align:left}.text-align-center--tablet{text-align:center}.text-align-right--tablet{text-align:right}}@media screen and (min-width: 64.0625rem){p,::slotted(p){font-size:var(--px-text-size-body-m-laptop)}::slotted(p){margin-bottom:var(--px-spacing-xs-laptop)}.text-align-left--laptop{text-align:left}.text-align-center--laptop{text-align:center}.text-align-right--laptop{text-align:right}}@media screen and (min-width: 90.0625rem){::slotted(p){margin-bottom:var(--px-spacing-xs-desktop)}}";
|
|
13
13
|
const spanCss = "span,::slotted(span){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l)}:host([inverted]) span,:host([inverted]) ::slotted(span){color:var(--px-color-text-neutral-inverted)}:host([strikethrough]) span{text-decoration:line-through}span.link{text-decoration:underline}@media screen and (min-width: 48rem){span,::slotted(span){font-size:var(--px-text-size-body-m-tablet)}}@media screen and (min-width: 64.0625rem){span,::slotted(span){font-size:var(--px-text-size-body-m-laptop)}}";
|
|
14
14
|
const commonStyles = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-self-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([sticky-top]),:host([sticky-bottom]){z-index:5}:host([sticky-top]){position:sticky;top:0}:host([sticky-bottom]){position:sticky;bottom:0}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (max-width: 47.938rem){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 48rem) and (max-width: 64rem){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 64.0625rem){:host([shown--sr--laptop]),::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}@media screen and (min-width: 90.0625rem){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}}";
|
|
15
|
-
const __vite_import_meta_env__ = { "DEV": true, "VITE_COMPONENT_DEBUG": "
|
|
15
|
+
const __vite_import_meta_env__ = { "DEV": true, "VITE_COMPONENT_DEBUG": "false" };
|
|
16
16
|
function getSupportedPropertyNames(htmlElementName) {
|
|
17
17
|
const $element = document.createElement(htmlElementName);
|
|
18
18
|
const inputPrototype = Object.getPrototypeOf($element);
|
|
@@ -3065,7 +3065,6 @@ class Icon extends WithExtraAttributes {
|
|
|
3065
3065
|
}
|
|
3066
3066
|
}
|
|
3067
3067
|
connectedCallback() {
|
|
3068
|
-
var _a;
|
|
3069
3068
|
this.role = "img";
|
|
3070
3069
|
const iconSet = document.querySelectorAll("px-icon-set");
|
|
3071
3070
|
if (!iconSet) {
|
|
@@ -3088,11 +3087,6 @@ class Icon extends WithExtraAttributes {
|
|
|
3088
3087
|
__privateGet(this, _internals).ariaHidden = "true";
|
|
3089
3088
|
this.ariaHidden = "true";
|
|
3090
3089
|
}
|
|
3091
|
-
if (((_a = this.parentElement) == null ? void 0 : _a.localName) === "px-a" && this.slot !== "before" && this.slot !== "after") {
|
|
3092
|
-
if (!this.color) {
|
|
3093
|
-
this.setAttribute("color", "inherit");
|
|
3094
|
-
}
|
|
3095
|
-
}
|
|
3096
3090
|
}
|
|
3097
3091
|
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
3098
3092
|
if (oldValue !== null && oldValue !== "") {
|
|
@@ -3581,7 +3575,7 @@ let Paragraph = _Paragraph;
|
|
|
3581
3575
|
if (!customElements.get("px-p")) {
|
|
3582
3576
|
customElements.define("px-p", Paragraph);
|
|
3583
3577
|
}
|
|
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{
|
|
3578
|
+
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}}';
|
|
3585
3579
|
const styleSheet$1 = new CSSStyleSheet();
|
|
3586
3580
|
styleSheet$1.replaceSync(styles$3);
|
|
3587
3581
|
const CLOSE_EVENT = "px.lavender.modal.close";
|
|
@@ -4918,6 +4912,9 @@ const _Link = class _Link extends PxElement {
|
|
|
4918
4912
|
`"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${linkVariantValues.join('", "')}".`
|
|
4919
4913
|
);
|
|
4920
4914
|
}
|
|
4915
|
+
if (newValue === "icon-link") {
|
|
4916
|
+
this.$iconNotBeforeAfter.setAttribute("color", "inherit");
|
|
4917
|
+
}
|
|
4921
4918
|
}
|
|
4922
4919
|
updateShape(attrName, newValue, attrValue) {
|
|
4923
4920
|
if (!checkName(attrValue, newValue)) {
|
|
@@ -5136,7 +5133,7 @@ class MDDLink extends HTMLElement {
|
|
|
5136
5133
|
if (!customElements.get("px-mdd-a")) {
|
|
5137
5134
|
customElements.define("px-mdd-a", MDDLink);
|
|
5138
5135
|
}
|
|
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}#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;margin-
|
|
5136
|
+
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}#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;margin-block:var(--px-padding-s-tablet)}#primary-navigation{display:block}#panel-container{top:auto}}@media screen and (min-width: 64.0625rem){#dropdown-zone--desktop{margin-block:var(--px-padding-s-laptop)}}@media screen and (min-width: 90.0625rem){#dropdown-zone--desktop{margin-block:var(--px-padding-s-desktop)}}";
|
|
5140
5137
|
function isObject(value) {
|
|
5141
5138
|
var type = typeof value;
|
|
5142
5139
|
return value != null && (type == "object" || type == "function");
|
|
@@ -5613,7 +5610,7 @@ $megaDropdowns_get = function() {
|
|
|
5613
5610
|
if (!customElements.get("px-header")) {
|
|
5614
5611
|
customElements.define("px-header", Header);
|
|
5615
5612
|
}
|
|
5616
|
-
const contentHeaderCss =
|
|
5613
|
+
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;gap:var(--px-spacing-l-mobile);z-index:2;position:relative;box-sizing:border-box}.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{gap:var(--px-spacing-l-desktop)}[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{gap:var(--px-spacing-l-laptop)}[min-height] .content-header-content{min-height:calc(var(--min-height--laptop) - (var(--px-spacing-l-laptop) * 2))}}";
|
|
5617
5614
|
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
5615
|
const gridStyles = new CSSStyleSheet();
|
|
5619
5616
|
gridStyles.replaceSync(gridCss);
|
|
@@ -5976,10 +5973,6 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
5976
5973
|
<px-h1><slot></slot></px-h1>
|
|
5977
5974
|
<slot name="subtitle"></slot>
|
|
5978
5975
|
</px-vstack>
|
|
5979
|
-
<px-stack gap="s" direction="row" direction--mobile="column">
|
|
5980
|
-
<slot name="patch" shrink></slot>
|
|
5981
|
-
<slot name="patch-description"></slot>
|
|
5982
|
-
</px-stack>
|
|
5983
5976
|
</div>
|
|
5984
5977
|
</px-container>
|
|
5985
5978
|
</px-grid>
|
|
@@ -6005,22 +5998,38 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
6005
5998
|
"has-gridding--mobile",
|
|
6006
5999
|
"has-gridding--tablet",
|
|
6007
6000
|
"has-gridding--laptop",
|
|
6008
|
-
"has-gridding--desktop",
|
|
6009
6001
|
"inverted"
|
|
6010
6002
|
];
|
|
6011
6003
|
}
|
|
6012
6004
|
connectedCallback() {
|
|
6013
|
-
|
|
6014
|
-
|
|
6015
|
-
|
|
6016
|
-
|
|
6017
|
-
|
|
6005
|
+
if (this.$patchDescriptionSlot) {
|
|
6006
|
+
this.shadowRoot.querySelector(
|
|
6007
|
+
".content-header-content"
|
|
6008
|
+
).insertAdjacentHTML(
|
|
6009
|
+
"beforeend",
|
|
6010
|
+
`<px-stack gap="s" direction="row" direction--mobile="column">
|
|
6011
|
+
<slot name="patch" shrink></slot>
|
|
6012
|
+
<slot name="patch-description"></slot>
|
|
6013
|
+
</px-stack>`
|
|
6014
|
+
);
|
|
6015
|
+
}
|
|
6016
|
+
if (this.$subtitleSlot) {
|
|
6017
|
+
this.$subtitleSlot.setAttribute("variant", "subtitle");
|
|
6018
|
+
}
|
|
6019
|
+
if (this.$patchDescriptionSlot) {
|
|
6020
|
+
if (this.$patchDescriptionSlot.localName === "px-p") {
|
|
6021
|
+
this.$patchDescriptionSlot.setAttribute("variant", "default");
|
|
6022
|
+
}
|
|
6023
|
+
if (this.$patchDescriptionSlot.localName === "px-p" || this.$patchDescriptionSlot.localName === "px-span") {
|
|
6024
|
+
this.$patchDescriptionSlot.setAttribute("font-size", "body-l");
|
|
6025
|
+
this.$patchDescriptionSlot.removeAttribute("font-weight");
|
|
6026
|
+
this.$patchDescriptionSlot.removeAttribute("color");
|
|
6027
|
+
}
|
|
6028
|
+
if (this.$patchDescriptionSlot.localName === "px-price") {
|
|
6029
|
+
this.$patchDescriptionSlot.setAttribute("size", "m");
|
|
6030
|
+
}
|
|
6031
|
+
}
|
|
6018
6032
|
this.createGridding();
|
|
6019
|
-
(_a = this.$subtitleSlot) == null ? void 0 : _a.addEventListener("slotchange", this.styleSubtitleSlot);
|
|
6020
|
-
(_b = this.$patchDescriptionSlot) == null ? void 0 : _b.addEventListener(
|
|
6021
|
-
"slotchange",
|
|
6022
|
-
this.stylepatchDescriptionSlotted
|
|
6023
|
-
);
|
|
6024
6033
|
}
|
|
6025
6034
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
6026
6035
|
if (oldValue !== newValue) {
|
|
@@ -6053,7 +6062,6 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
6053
6062
|
case "has-gridding--mobile":
|
|
6054
6063
|
case "has-gridding--tablet":
|
|
6055
6064
|
case "has-gridding--laptop":
|
|
6056
|
-
case "has-gridding--desktop":
|
|
6057
6065
|
this.createGridding(newValue);
|
|
6058
6066
|
break;
|
|
6059
6067
|
case "inverted":
|
|
@@ -6071,37 +6079,6 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
6071
6079
|
}
|
|
6072
6080
|
}
|
|
6073
6081
|
}
|
|
6074
|
-
disconnectedCallback() {
|
|
6075
|
-
var _a, _b;
|
|
6076
|
-
(_a = this.$subtitleSlot) == null ? void 0 : _a.removeEventListener(
|
|
6077
|
-
"slotchange",
|
|
6078
|
-
this.styleSubtitleSlot
|
|
6079
|
-
);
|
|
6080
|
-
(_b = this.$patchDescriptionSlot) == null ? void 0 : _b.removeEventListener(
|
|
6081
|
-
"slotchange",
|
|
6082
|
-
this.stylepatchDescriptionSlotted
|
|
6083
|
-
);
|
|
6084
|
-
}
|
|
6085
|
-
stylepatchDescriptionSlotted() {
|
|
6086
|
-
if (this.$patchDescriptionSlotted) {
|
|
6087
|
-
if (this.$patchDescriptionSlotted.localName === "px-p") {
|
|
6088
|
-
this.$patchDescriptionSlotted.setAttribute("variant", "default");
|
|
6089
|
-
}
|
|
6090
|
-
if (this.$patchDescriptionSlotted.localName === "px-p" || this.$patchDescriptionSlotted.localName === "px-span") {
|
|
6091
|
-
this.$patchDescriptionSlotted.setAttribute("font-size", "body-l");
|
|
6092
|
-
this.$patchDescriptionSlotted.removeAttribute("font-weight");
|
|
6093
|
-
this.$patchDescriptionSlotted.removeAttribute("color");
|
|
6094
|
-
}
|
|
6095
|
-
if (this.$patchDescriptionSlotted.localName === "px-price") {
|
|
6096
|
-
this.$patchDescriptionSlotted.setAttribute("size", "m");
|
|
6097
|
-
}
|
|
6098
|
-
}
|
|
6099
|
-
}
|
|
6100
|
-
styleSubtitleSlot() {
|
|
6101
|
-
if (this.$subtitleSlotted) {
|
|
6102
|
-
this.$subtitleSlotted.setAttribute("variant", "subtitle");
|
|
6103
|
-
}
|
|
6104
|
-
}
|
|
6105
6082
|
createGridding(value) {
|
|
6106
6083
|
const breakpoints = [
|
|
6107
6084
|
{ prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
|
|
@@ -6119,11 +6096,6 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
6119
6096
|
prop: "hasGriddingLaptop",
|
|
6120
6097
|
gridAttr: "grid-cols--laptop",
|
|
6121
6098
|
attr: "col-span--laptop"
|
|
6122
|
-
},
|
|
6123
|
-
{
|
|
6124
|
-
prop: "hasGriddingDesktop",
|
|
6125
|
-
gridAttr: "grid-cols--desktop",
|
|
6126
|
-
attr: "col-span--desktop"
|
|
6127
6099
|
}
|
|
6128
6100
|
];
|
|
6129
6101
|
const spanElement = this.shadowRoot.querySelector(
|
|
@@ -6153,21 +6125,9 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
6153
6125
|
return this.shadowRoot.querySelector("px-h1");
|
|
6154
6126
|
}
|
|
6155
6127
|
get $subtitleSlot() {
|
|
6156
|
-
var _a;
|
|
6157
|
-
return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
|
|
6158
|
-
'slot[name="subtitle"]'
|
|
6159
|
-
);
|
|
6160
|
-
}
|
|
6161
|
-
get $subtitleSlotted() {
|
|
6162
6128
|
return this.querySelector('[slot="subtitle"]');
|
|
6163
6129
|
}
|
|
6164
6130
|
get $patchDescriptionSlot() {
|
|
6165
|
-
var _a;
|
|
6166
|
-
return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
|
|
6167
|
-
'slot[name="patch-description"]'
|
|
6168
|
-
);
|
|
6169
|
-
}
|
|
6170
|
-
get $patchDescriptionSlotted() {
|
|
6171
6131
|
return this.querySelector('[slot="patch-description"]');
|
|
6172
6132
|
}
|
|
6173
6133
|
get $overlapSlot() {
|
|
@@ -6284,16 +6244,6 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
6284
6244
|
this.removeAttribute("has-gridding--laptop");
|
|
6285
6245
|
}
|
|
6286
6246
|
}
|
|
6287
|
-
get hasGriddingDesktop() {
|
|
6288
|
-
return this.hasAttribute("has-gridding--desktop");
|
|
6289
|
-
}
|
|
6290
|
-
set hasGriddingDesktop(value) {
|
|
6291
|
-
if (value) {
|
|
6292
|
-
this.setAttribute("has-gridding--desktop", "");
|
|
6293
|
-
} else {
|
|
6294
|
-
this.removeAttribute("has-gridding--desktop");
|
|
6295
|
-
}
|
|
6296
|
-
}
|
|
6297
6247
|
get inverted() {
|
|
6298
6248
|
return this.hasAttribute("inverted");
|
|
6299
6249
|
}
|