@proximus/lavender-header 1.0.0-alpha.2 → 1.0.0-alpha.3
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.js +261 -270
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -1,26 +1,15 @@
|
|
|
1
|
-
import { PxElement as g,
|
|
1
|
+
import { PxElement as g, boxShadowValues as y, noBorderRadiusValues as A, borderRadiusValues as $, borderValues as S, paddingValues as z, gradientValues as L, backgroundColorValues as b, WithFlexAttributes as c } from "@proximus/lavender-common";
|
|
2
2
|
import "@proximus/lavender-layout";
|
|
3
|
-
const w = '.container{font-family:var(--px-font-family);background-color:var(--background-color);background:var(--background-gradient);border-radius:var(--px-radius-main);padding:var(--px-padding-m);box-sizing:border-box}:host([inverted]) .container{background-color:var( --background-color, var(--px-color-bg-container-rich-default) )}.padding-2xs{padding:var(--px-padding-2xs)}.padding-xs{padding:var(--px-padding-xs)}.padding-s{padding:var(--px-padding-s)}.padding-m{padding:var(--px-padding-m)}.padding-l{padding:var(--px-padding-l)}.padding-xl{padding:var(--px-padding-xl)}.padding-none{padding:var(--px-padding-none)}.padding-block-2xs{padding-block:var(--px-padding-2xs)}.padding-block-xs{padding-block:var(--px-padding-xs)}.padding-block-s{padding-block:var(--px-padding-s)}.padding-block-m{padding-block:var(--px-padding-m)}.padding-block-l{padding-block:var(--px-padding-l)}.padding-block-xl{padding-block:var(--px-padding-xl)}.padding-block-none{padding-block:var(--px-padding-none)}.padding-inline-2xs{padding-inline:var(--px-padding-2xs)}.padding-inline-xs{padding-inline:var(--px-padding-xs)}.padding-inline-s{padding-inline:var(--px-padding-s)}.padding-inline-m{padding-inline:var(--px-padding-m)}.padding-inline-l{padding-inline:var(--px-padding-l)}.padding-inline-xl{padding-inline:var(--px-padding-xl)}.padding-inline-none{padding-inline:var(--px-padding-none)}.padding-top-2xs{padding-top:var(--px-padding-2xs)}.padding-top-xs{padding-top:var(--px-padding-xs)}.padding-top-s{padding-top:var(--px-padding-s)}.padding-top-m{padding-top:var(--px-padding-m)}.padding-top-l{padding-top:var(--px-padding-l)}.padding-top-xl{padding-top:var(--px-padding-xl)}.padding-top-none{padding-top:var(--px-padding-none)}.padding-right-2xs{padding-right:var(--px-padding-2xs)}.padding-right-xs{padding-right:var(--px-padding-xs)}.padding-right-s{padding-right:var(--px-padding-s)}.padding-right-m{padding-right:var(--px-padding-m)}.padding-right-l{padding-right:var(--px-padding-l)}.padding-right-xl{padding-right:var(--px-padding-xl)}.padding-right-none{padding-right:var(--px-padding-none)}.padding-bottom-2xs{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs{padding-bottom:var(--px-padding-xs)}.padding-bottom-s{padding-bottom:var(--px-padding-s)}.padding-bottom-m{padding-bottom:var(--px-padding-m)}.padding-bottom-l{padding-bottom:var(--px-padding-l)}.padding-bottom-xl{padding-bottom:var(--px-padding-xl)}.padding-bottom-none{padding-bottom:var(--px-padding-none)}.padding-left-2xs{padding-left:var(--px-padding-2xs)}.padding-left-xs{padding-left:var(--px-padding-xs)}.padding-left-s{padding-left:var(--px-padding-s)}.padding-left-m{padding-left:var(--px-padding-m)}.padding-left-l{padding-left:var(--px-padding-l)}.padding-left-xl{padding-left:var(--px-padding-xl)}.padding-left-none{padding-left:var(--px-padding-none)}.border-none{border:none}.border-s{border:var(--px-border-s) solid var(--px-color-border-main-default)}.border-m{border:var(--px-border-m) solid var(--px-color-border-main-default)}.border-l{border:var(--px-border-l) solid var(--px-color-border-main-default)}:host([inverted]) .border{border:var(--px-border-m) solid var(--px-color-border-main-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:var(--px-shadow-none)}.box-shadow-s{box-shadow:var(--px-shadow-s)}.box-shadow-m{box-shadow:var(--px-shadow-m)}.box-shadow-l{box-shadow:var(--px-shadow-l)}.box-shadow-xl{box-shadow:var(--px-shadow-xl)}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:2}::slotted([slot="anchor-right"]){right:var(--px-padding-m)}::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-none ::slotted([slot="anchor-right"]){right:var(--px-padding-none)}.padding-none ::slotted([slot="anchor-left"]){left:var(--px-padding-none)}.padding-2xs ::slotted([slot="anchor-right"]){right:var(--px-padding-2xs)}.padding-2xs ::slotted([slot="anchor-left"]){left:var(--px-padding-2xs)}.padding-xs ::slotted([slot="anchor-right"]){right:var(--px-padding-xs)}.padding-xs ::slotted([slot="anchor-left"]){left:var(--px-padding-xs)}.padding-s ::slotted([slot="anchor-right"]){right:var(--px-padding-s)}.padding-s ::slotted([slot="anchor-left"]){left:var(--px-padding-s)}.padding-m ::slotted([slot="anchor-right"]){right:var(--px-padding-m)}.padding-m ::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-l ::slotted([slot="anchor-right"]){right:var(--px-padding-l)}.padding-l ::slotted([slot="anchor-left"]){left:var(--px-padding-l)}.padding-xl ::slotted([slot="anchor-right"]){right:var(--px-padding-xl)}.padding-xl ::slotted([slot="anchor-left"]){left:var(--px-padding-xl)}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:1}@media only screen and (max-width: 640px){.container{background-color:var(--background-color--mobile, var(--background-color));background-image:var( --background-gradient--mobile, var(--background-gradient) )}.padding-l{padding:var(--px-padding-l-mobile)}.padding-xl{padding:var(--px-padding-xl-mobile)}.padding-top-l{padding-top:var(--px-padding-l-mobile)}.padding-top-xl{padding-top:var(--px-padding-xl-mobile)}.padding-right-l{padding-right:var(--px-padding-l-mobile)}.padding-right-xl{padding-right:var(--px-padding-xl-mobile)}.padding-bottom-l{padding-bottom:var(--px-padding-l-mobile)}.padding-bottom-xl{padding-bottom:var(--px-padding-xl-mobile)}.padding-left-l{padding-left:var(--px-padding-l-mobile)}.padding-left-xl{padding-left:var(--px-padding-xl-mobile)}.padding-2xs--mobile{padding:var(--px-padding-2xs)}.padding-xs--mobile{padding:var(--px-padding-xs)}.padding-s--mobile{padding:var(--px-padding-s)}.padding-m--mobile{padding:var(--px-padding-m)}.padding-l--mobile{padding:var(--px-padding-l-mobile)}.padding-xl--mobile{padding:var(--px-padding-xl-mobile)}.padding-none--mobile{padding:var(--px-padding-none)}.padding-block-2xs--mobile{padding-block:var(--px-padding-2xs)}.padding-block-xs--mobile{padding-block:var(--px-padding-xs)}.padding-block-s--mobile{padding-block:var(--px-padding-s)}.padding-block-m--mobile{padding-block:var(--px-padding-m)}.padding-block-l--mobile{padding-block:var(--px-padding-l-mobile)}.padding-block-xl--mobile{padding-block:var(--px-padding-xl-mobile)}.padding-block-none--mobile{padding-block:var(--px-padding-none)}.padding-inline-2xs--mobile{padding-inline:var(--px-padding-2xs)}.padding-inline-xs--mobile{padding-inline:var(--px-padding-xs)}.padding-inline-s--mobile{padding-inline:var(--px-padding-s)}.padding-inline-m--mobile{padding-inline:var(--px-padding-m)}.padding-inline-l--mobile{padding-inline:var(--px-padding-l-mobile)}.padding-inline-xl--mobile{padding-inline:var(--px-padding-xl-mobile)}.padding-inline-none--mobile{padding-inline:var(--px-padding-none)}.padding-top-2xs--mobile{padding-top:var(--px-padding-2xs)}.padding-top-xs--mobile{padding-top:var(--px-padding-xs)}.padding-top-s--mobile{padding-top:var(--px-padding-s)}.padding-top-m--mobile{padding-top:var(--px-padding-m)}.padding-top-l--mobile{padding-top:var(--px-padding-l-mobile)}.padding-top-xl--mobile{padding-top:var(--px-padding-xl-mobile)}.padding-top-none--mobile{padding-top:var(--px-padding-none)}.padding-right-2xs--mobile{padding-right:var(--px-padding-2xs)}.padding-right-xs--mobile{padding-right:var(--px-padding-xs)}.padding-right-s--mobile{padding-right:var(--px-padding-s)}.padding-right-m--mobile{padding-right:var(--px-padding-m)}.padding-right-l--mobile{padding-right:var(--px-padding-l-mobile)}.padding-right-xl--mobile{padding-right:var(--px-padding-xl-mobile)}.padding-right-none--mobile{padding-right:var(--px-padding-none)}.padding-bottom-2xs--mobile{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs--mobile{padding-bottom:var(--px-padding-xs)}.padding-bottom-s--mobile{padding-bottom:var(--px-padding-s)}.padding-bottom-m--mobile{padding-bottom:var(--px-padding-m)}.padding-bottom-l--mobile{padding-bottom:var(--px-padding-l-mobile)}.padding-bottom-xl--mobile{padding-bottom:var(--px-padding-xl-mobile)}.padding-bottom-none--mobile{padding-bottom:var(--px-padding-none)}.padding-left-2xs--mobile{padding-left:var(--px-padding-2xs)}.padding-left-xs--mobile{padding-left:var(--px-padding-xs)}.padding-left-s--mobile{padding-left:var(--px-padding-s)}.padding-left-m--mobile{padding-left:var(--px-padding-m)}.padding-left-l--mobile{padding-left:var(--px-padding-l-mobile)}.padding-left-xl--mobile{padding-left:var(--px-padding-xl-mobile)}.padding-left-none--mobile{padding-left:var(--px-padding-none)}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-border-s) * -1);left:calc(var(--px-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-border-m) * -1);left:calc(var(--px-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-border-l) * -1);left:calc(var(--px-border-l) * -1)}@media only screen and (min-width: 768px) and (max-width: 1024px){.container{background-color:var(--background-color--tablet, var(--background-color));background-image:var( --background-gradient--tablet, var(--background-gradient) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.padding-2xs--tablet{padding:var(--px-padding-2xs)}.padding-xs--tablet{padding:var(--px-padding-xs)}.padding-s--tablet{padding:var(--px-padding-s)}.padding-m--tablet{padding:var(--px-padding-m)}.padding-l--tablet{padding:var(--px-padding-l)}.padding-xl--tablet{padding:var(--px-padding-xl)}.padding-none--tablet{padding:var(--px-padding-none)}.padding-block-2xs--tablet{padding-block:var(--px-padding-2xs)}.padding-block-xs--tablet{padding-block:var(--px-padding-xs)}.padding-block-s--tablet{padding-block:var(--px-padding-s)}.padding-block-m--tablet{padding-block:var(--px-padding-m)}.padding-block-l--tablet{padding-block:var(--px-padding-l)}.padding-block-xl--tablet{padding-block:var(--px-padding-xl)}.padding-block-none--tablet{padding-block:var(--px-padding-none)}.padding-inline-2xs--tablet{padding-inline:var(--px-padding-2xs)}.padding-inline-xs--tablet{padding-inline:var(--px-padding-xs)}.padding-inline-s--tablet{padding-inline:var(--px-padding-s)}.padding-inline-m--tablet{padding-inline:var(--px-padding-m)}.padding-inline-l--tablet{padding-inline:var(--px-padding-l)}.padding-inline-xl--tablet{padding-inline:var(--px-padding-xl)}.padding-inline-none--tablet{padding-inline:var(--px-padding-none)}.padding-top-2xs--tablet{padding-top:var(--px-padding-2xs)}.padding-top-xs--tablet{padding-top:var(--px-padding-xs)}.padding-top-s--tablet{padding-top:var(--px-padding-s)}.padding-top-m--tablet{padding-top:var(--px-padding-m)}.padding-top-l--tablet{padding-top:var(--px-padding-l)}.padding-top-xl--tablet{padding-top:var(--px-padding-xl)}.padding-top-none--tablet{padding-top:var(--px-padding-none)}.padding-right-2xs--tablet{padding-right:var(--px-padding-2xs)}.padding-right-xs--tablet{padding-right:var(--px-padding-xs)}.padding-right-s--tablet{padding-right:var(--px-padding-s)}.padding-right-m--tablet{padding-right:var(--px-padding-m)}.padding-right-l--tablet{padding-right:var(--px-padding-l)}.padding-right-xl--tablet{padding-right:var(--px-padding-xl)}.padding-right-none--tablet{padding-right:var(--px-padding-none)}.padding-bottom-2xs--tablet{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs--tablet{padding-bottom:var(--px-padding-xs)}.padding-bottom-s--tablet{padding-bottom:var(--px-padding-s)}.padding-bottom-m--tablet{padding-bottom:var(--px-padding-m)}.padding-bottom-l--tablet{padding-bottom:var(--px-padding-l)}.padding-bottom-xl--tablet{padding-bottom:var(--px-padding-xl)}.padding-bottom-none--tablet{padding-bottom:var(--px-padding-none)}.padding-left-2xs--tablet{padding-left:var(--px-padding-2xs)}.padding-left-xs--tablet{padding-left:var(--px-padding-xs)}.padding-left-s--tablet{padding-left:var(--px-padding-s)}.padding-left-m--tablet{padding-left:var(--px-padding-m)}.padding-left-l--tablet{padding-left:var(--px-padding-l)}.padding-left-xl--tablet{padding-left:var(--px-padding-xl)}.padding-left-none--tablet{padding-left:var(--px-padding-none)}}@media only screen and (min-width: 1025px){.container{background-color:var(--background-color--laptop, var(--background-color));background-image:var( --background-gradient--laptop, var(--background-gradient) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}.padding-2xs--laptop{padding:var(--px-padding-2xs)}.padding-xs--laptop{padding:var(--px-padding-xs)}.padding-s--laptop{padding:var(--px-padding-s)}.padding-m--laptop{padding:var(--px-padding-m)}.padding-l--laptop{padding:var(--px-padding-l)}.padding-xl--laptop{padding:var(--px-padding-xl)}.padding-none--laptop{padding:var(--px-padding-none)}.padding-block-2xs--laptop{padding-block:var(--px-padding-2xs)}.padding-block-xs--laptop{padding-block:var(--px-padding-xs)}.padding-block-s--laptop{padding-block:var(--px-padding-s)}.padding-block-m--laptop{padding-block:var(--px-padding-m)}.padding-block-l--laptop{padding-block:var(--px-padding-l)}.padding-block-xl--laptop{padding-block:var(--px-padding-xl)}.padding-block-none--laptop{padding-block:var(--px-padding-none)}.padding-inline-2xs--laptop{padding-inline:var(--px-padding-2xs)}.padding-inline-xs--laptop{padding-inline:var(--px-padding-xs)}.padding-inline-s--laptop{padding-inline:var(--px-padding-s)}.padding-inline-m--laptop{padding-inline:var(--px-padding-m)}.padding-inline-l--laptop{padding-inline:var(--px-padding-l)}.padding-inline-xl--laptop{padding-inline:var(--px-padding-xl)}.padding-inline-none--laptop{padding-inline:var(--px-padding-none)}.padding-top-2xs--laptop{padding-top:var(--px-padding-2xs)}.padding-top-xs--laptop{padding-top:var(--px-padding-xs)}.padding-top-s--laptop{padding-top:var(--px-padding-s)}.padding-top-m--laptop{padding-top:var(--px-padding-m)}.padding-top-l--laptop{padding-top:var(--px-padding-l)}.padding-top-xl--laptop{padding-top:var(--px-padding-xl)}.padding-top-none--laptop{padding-top:var(--px-padding-none)}.padding-right-2xs--laptop{padding-right:var(--px-padding-2xs)}.padding-right-xs--laptop{padding-right:var(--px-padding-xs)}.padding-right-s--laptop{padding-right:var(--px-padding-s)}.padding-right-m--laptop{padding-right:var(--px-padding-m)}.padding-right-l--laptop{padding-right:var(--px-padding-l)}.padding-right-xl--laptop{padding-right:var(--px-padding-xl)}.padding-right-none--laptop{padding-right:var(--px-padding-none)}.padding-bottom-2xs--laptop{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs--laptop{padding-bottom:var(--px-padding-xs)}.padding-bottom-s--laptop{padding-bottom:var(--px-padding-s)}.padding-bottom-m--laptop{padding-bottom:var(--px-padding-m)}.padding-bottom-l--laptop{padding-bottom:var(--px-padding-l)}.padding-bottom-xl--laptop{padding-bottom:var(--px-padding-xl)}.padding-bottom-none--laptop{padding-bottom:var(--px-padding-none)}.padding-left-2xs--laptop{padding-left:var(--px-padding-2xs)}.padding-left-xs--laptop{padding-left:var(--px-padding-xs)}.padding-left-s--laptop{padding-left:var(--px-padding-s)}.padding-left-m--laptop{padding-left:var(--px-padding-m)}.padding-left-l--laptop{padding-left:var(--px-padding-l)}.padding-left-xl--laptop{padding-left:var(--px-padding-xl)}.padding-left-none--laptop{padding-left:var(--px-padding-none)}}', u = new CSSStyleSheet();
|
|
4
|
-
u.replaceSync(
|
|
5
|
-
const
|
|
3
|
+
const C = '.container{font-family:var(--px-font-family);background-color:var(--background-color);background-image:var(--background-image);background:var(--background-gradient);border-radius:var(--px-radius-main);padding:var(--px-padding-m);box-sizing:border-box}:host([inverted]) .container{background-color:var( --background-color, var(--px-color-bg-container-default-inverted) )}.padding-2xs{padding:var(--px-padding-2xs)}.padding-xs{padding:var(--px-padding-xs)}.padding-s{padding:var(--px-padding-s)}.padding-m{padding:var(--px-padding-m)}.padding-l{padding:var(--px-padding-l)}.padding-xl{padding:var(--px-padding-xl)}.padding-none{padding:var(--px-padding-none)}.padding-block-2xs{padding-block:var(--px-padding-2xs)}.padding-block-xs{padding-block:var(--px-padding-xs)}.padding-block-s{padding-block:var(--px-padding-s)}.padding-block-m{padding-block:var(--px-padding-m)}.padding-block-l{padding-block:var(--px-padding-l)}.padding-block-xl{padding-block:var(--px-padding-xl)}.padding-block-none{padding-block:var(--px-padding-none)}.padding-inline-2xs{padding-inline:var(--px-padding-2xs)}.padding-inline-xs{padding-inline:var(--px-padding-xs)}.padding-inline-s{padding-inline:var(--px-padding-s)}.padding-inline-m{padding-inline:var(--px-padding-m)}.padding-inline-l{padding-inline:var(--px-padding-l)}.padding-inline-xl{padding-inline:var(--px-padding-xl)}.padding-inline-none{padding-inline:var(--px-padding-none)}.padding-top-2xs{padding-top:var(--px-padding-2xs)}.padding-top-xs{padding-top:var(--px-padding-xs)}.padding-top-s{padding-top:var(--px-padding-s)}.padding-top-m{padding-top:var(--px-padding-m)}.padding-top-l{padding-top:var(--px-padding-l)}.padding-top-xl{padding-top:var(--px-padding-xl)}.padding-top-none{padding-top:var(--px-padding-none)}.padding-right-2xs{padding-right:var(--px-padding-2xs)}.padding-right-xs{padding-right:var(--px-padding-xs)}.padding-right-s{padding-right:var(--px-padding-s)}.padding-right-m{padding-right:var(--px-padding-m)}.padding-right-l{padding-right:var(--px-padding-l)}.padding-right-xl{padding-right:var(--px-padding-xl)}.padding-right-none{padding-right:var(--px-padding-none)}.padding-bottom-2xs{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs{padding-bottom:var(--px-padding-xs)}.padding-bottom-s{padding-bottom:var(--px-padding-s)}.padding-bottom-m{padding-bottom:var(--px-padding-m)}.padding-bottom-l{padding-bottom:var(--px-padding-l)}.padding-bottom-xl{padding-bottom:var(--px-padding-xl)}.padding-bottom-none{padding-bottom:var(--px-padding-none)}.padding-left-2xs{padding-left:var(--px-padding-2xs)}.padding-left-xs{padding-left:var(--px-padding-xs)}.padding-left-s{padding-left:var(--px-padding-s)}.padding-left-m{padding-left:var(--px-padding-m)}.padding-left-l{padding-left:var(--px-padding-l)}.padding-left-xl{padding-left:var(--px-padding-xl)}.padding-left-none{padding-left:var(--px-padding-none)}.border-none{border:none}.border-s{border:var(--px-border-s) solid var(--px-color-border-main-default)}.border-m{border:var(--px-border-m) solid var(--px-color-border-main-default)}.border-l{border:var(--px-border-l) solid var(--px-color-border-main-default)}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--px-color-border-main-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:var(--px-shadow-none)}.box-shadow-s{box-shadow:var(--px-shadow-s)}.box-shadow-m{box-shadow:var(--px-shadow-m)}.box-shadow-l{box-shadow:var(--px-shadow-l)}.box-shadow-xl{box-shadow:var(--px-shadow-xl)}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:2}::slotted([slot="anchor-right"]){right:var(--px-padding-m)}::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-none ::slotted([slot="anchor-right"]){right:var(--px-padding-none)}.padding-none ::slotted([slot="anchor-left"]){left:var(--px-padding-none)}.padding-2xs ::slotted([slot="anchor-right"]){right:var(--px-padding-2xs)}.padding-2xs ::slotted([slot="anchor-left"]){left:var(--px-padding-2xs)}.padding-xs ::slotted([slot="anchor-right"]){right:var(--px-padding-xs)}.padding-xs ::slotted([slot="anchor-left"]){left:var(--px-padding-xs)}.padding-s ::slotted([slot="anchor-right"]){right:var(--px-padding-s)}.padding-s ::slotted([slot="anchor-left"]){left:var(--px-padding-s)}.padding-m ::slotted([slot="anchor-right"]){right:var(--px-padding-m)}.padding-m ::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-l ::slotted([slot="anchor-right"]){right:var(--px-padding-l)}.padding-l ::slotted([slot="anchor-left"]){left:var(--px-padding-l)}.padding-xl ::slotted([slot="anchor-right"]){right:var(--px-padding-xl)}.padding-xl ::slotted([slot="anchor-left"]){left:var(--px-padding-xl)}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:1}@media only screen and (max-width: 640px){.container{background-color:var(--background-color--mobile, var(--background-color));background-image:var( --background-image--mobile, var( --background-image, var(--background-gradient--mobile, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.padding-l{padding:var(--px-padding-l-mobile)}.padding-xl{padding:var(--px-padding-xl-mobile)}.padding-top-l{padding-top:var(--px-padding-l-mobile)}.padding-top-xl{padding-top:var(--px-padding-xl-mobile)}.padding-right-l{padding-right:var(--px-padding-l-mobile)}.padding-right-xl{padding-right:var(--px-padding-xl-mobile)}.padding-bottom-l{padding-bottom:var(--px-padding-l-mobile)}.padding-bottom-xl{padding-bottom:var(--px-padding-xl-mobile)}.padding-left-l{padding-left:var(--px-padding-l-mobile)}.padding-left-xl{padding-left:var(--px-padding-xl-mobile)}.padding-2xs--mobile{padding:var(--px-padding-2xs)}.padding-xs--mobile{padding:var(--px-padding-xs)}.padding-s--mobile{padding:var(--px-padding-s)}.padding-m--mobile{padding:var(--px-padding-m)}.padding-l--mobile{padding:var(--px-padding-l-mobile)}.padding-xl--mobile{padding:var(--px-padding-xl-mobile)}.padding-none--mobile{padding:var(--px-padding-none)}.padding-block-2xs--mobile{padding-block:var(--px-padding-2xs)}.padding-block-xs--mobile{padding-block:var(--px-padding-xs)}.padding-block-s--mobile{padding-block:var(--px-padding-s)}.padding-block-m--mobile{padding-block:var(--px-padding-m)}.padding-block-l--mobile{padding-block:var(--px-padding-l-mobile)}.padding-block-xl--mobile{padding-block:var(--px-padding-xl-mobile)}.padding-block-none--mobile{padding-block:var(--px-padding-none)}.padding-inline-2xs--mobile{padding-inline:var(--px-padding-2xs)}.padding-inline-xs--mobile{padding-inline:var(--px-padding-xs)}.padding-inline-s--mobile{padding-inline:var(--px-padding-s)}.padding-inline-m--mobile{padding-inline:var(--px-padding-m)}.padding-inline-l--mobile{padding-inline:var(--px-padding-l-mobile)}.padding-inline-xl--mobile{padding-inline:var(--px-padding-xl-mobile)}.padding-inline-none--mobile{padding-inline:var(--px-padding-none)}.padding-top-2xs--mobile{padding-top:var(--px-padding-2xs)}.padding-top-xs--mobile{padding-top:var(--px-padding-xs)}.padding-top-s--mobile{padding-top:var(--px-padding-s)}.padding-top-m--mobile{padding-top:var(--px-padding-m)}.padding-top-l--mobile{padding-top:var(--px-padding-l-mobile)}.padding-top-xl--mobile{padding-top:var(--px-padding-xl-mobile)}.padding-top-none--mobile{padding-top:var(--px-padding-none)}.padding-right-2xs--mobile{padding-right:var(--px-padding-2xs)}.padding-right-xs--mobile{padding-right:var(--px-padding-xs)}.padding-right-s--mobile{padding-right:var(--px-padding-s)}.padding-right-m--mobile{padding-right:var(--px-padding-m)}.padding-right-l--mobile{padding-right:var(--px-padding-l-mobile)}.padding-right-xl--mobile{padding-right:var(--px-padding-xl-mobile)}.padding-right-none--mobile{padding-right:var(--px-padding-none)}.padding-bottom-2xs--mobile{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs--mobile{padding-bottom:var(--px-padding-xs)}.padding-bottom-s--mobile{padding-bottom:var(--px-padding-s)}.padding-bottom-m--mobile{padding-bottom:var(--px-padding-m)}.padding-bottom-l--mobile{padding-bottom:var(--px-padding-l-mobile)}.padding-bottom-xl--mobile{padding-bottom:var(--px-padding-xl-mobile)}.padding-bottom-none--mobile{padding-bottom:var(--px-padding-none)}.padding-left-2xs--mobile{padding-left:var(--px-padding-2xs)}.padding-left-xs--mobile{padding-left:var(--px-padding-xs)}.padding-left-s--mobile{padding-left:var(--px-padding-s)}.padding-left-m--mobile{padding-left:var(--px-padding-m)}.padding-left-l--mobile{padding-left:var(--px-padding-l-mobile)}.padding-left-xl--mobile{padding-left:var(--px-padding-xl-mobile)}.padding-left-none--mobile{padding-left:var(--px-padding-none)}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-border-s) * -1);left:calc(var(--px-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-border-m) * -1);left:calc(var(--px-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-border-l) * -1);left:calc(var(--px-border-l) * -1)}@media only screen and (min-width: 768px) and (max-width: 1024px){.container{background-color:var(--background-color--tablet, var(--background-color));background-image:var( --background-image--tablet, var( --background-image, var(--background-gradient--tablet, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.padding-2xs--tablet{padding:var(--px-padding-2xs)}.padding-xs--tablet{padding:var(--px-padding-xs)}.padding-s--tablet{padding:var(--px-padding-s)}.padding-m--tablet{padding:var(--px-padding-m)}.padding-l--tablet{padding:var(--px-padding-l)}.padding-xl--tablet{padding:var(--px-padding-xl)}.padding-none--tablet{padding:var(--px-padding-none)}.padding-block-2xs--tablet{padding-block:var(--px-padding-2xs)}.padding-block-xs--tablet{padding-block:var(--px-padding-xs)}.padding-block-s--tablet{padding-block:var(--px-padding-s)}.padding-block-m--tablet{padding-block:var(--px-padding-m)}.padding-block-l--tablet{padding-block:var(--px-padding-l)}.padding-block-xl--tablet{padding-block:var(--px-padding-xl)}.padding-block-none--tablet{padding-block:var(--px-padding-none)}.padding-inline-2xs--tablet{padding-inline:var(--px-padding-2xs)}.padding-inline-xs--tablet{padding-inline:var(--px-padding-xs)}.padding-inline-s--tablet{padding-inline:var(--px-padding-s)}.padding-inline-m--tablet{padding-inline:var(--px-padding-m)}.padding-inline-l--tablet{padding-inline:var(--px-padding-l)}.padding-inline-xl--tablet{padding-inline:var(--px-padding-xl)}.padding-inline-none--tablet{padding-inline:var(--px-padding-none)}.padding-top-2xs--tablet{padding-top:var(--px-padding-2xs)}.padding-top-xs--tablet{padding-top:var(--px-padding-xs)}.padding-top-s--tablet{padding-top:var(--px-padding-s)}.padding-top-m--tablet{padding-top:var(--px-padding-m)}.padding-top-l--tablet{padding-top:var(--px-padding-l)}.padding-top-xl--tablet{padding-top:var(--px-padding-xl)}.padding-top-none--tablet{padding-top:var(--px-padding-none)}.padding-right-2xs--tablet{padding-right:var(--px-padding-2xs)}.padding-right-xs--tablet{padding-right:var(--px-padding-xs)}.padding-right-s--tablet{padding-right:var(--px-padding-s)}.padding-right-m--tablet{padding-right:var(--px-padding-m)}.padding-right-l--tablet{padding-right:var(--px-padding-l)}.padding-right-xl--tablet{padding-right:var(--px-padding-xl)}.padding-right-none--tablet{padding-right:var(--px-padding-none)}.padding-bottom-2xs--tablet{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs--tablet{padding-bottom:var(--px-padding-xs)}.padding-bottom-s--tablet{padding-bottom:var(--px-padding-s)}.padding-bottom-m--tablet{padding-bottom:var(--px-padding-m)}.padding-bottom-l--tablet{padding-bottom:var(--px-padding-l)}.padding-bottom-xl--tablet{padding-bottom:var(--px-padding-xl)}.padding-bottom-none--tablet{padding-bottom:var(--px-padding-none)}.padding-left-2xs--tablet{padding-left:var(--px-padding-2xs)}.padding-left-xs--tablet{padding-left:var(--px-padding-xs)}.padding-left-s--tablet{padding-left:var(--px-padding-s)}.padding-left-m--tablet{padding-left:var(--px-padding-m)}.padding-left-l--tablet{padding-left:var(--px-padding-l)}.padding-left-xl--tablet{padding-left:var(--px-padding-xl)}.padding-left-none--tablet{padding-left:var(--px-padding-none)}}@media only screen and (min-width: 1025px){.container{background-color:var(--background-color--laptop, var(--background-color));background-image:var( --background-image--laptop, var( --background-image, var(--background-gradient--laptop, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}.padding-2xs--laptop{padding:var(--px-padding-2xs)}.padding-xs--laptop{padding:var(--px-padding-xs)}.padding-s--laptop{padding:var(--px-padding-s)}.padding-m--laptop{padding:var(--px-padding-m)}.padding-l--laptop{padding:var(--px-padding-l)}.padding-xl--laptop{padding:var(--px-padding-xl)}.padding-none--laptop{padding:var(--px-padding-none)}.padding-block-2xs--laptop{padding-block:var(--px-padding-2xs)}.padding-block-xs--laptop{padding-block:var(--px-padding-xs)}.padding-block-s--laptop{padding-block:var(--px-padding-s)}.padding-block-m--laptop{padding-block:var(--px-padding-m)}.padding-block-l--laptop{padding-block:var(--px-padding-l)}.padding-block-xl--laptop{padding-block:var(--px-padding-xl)}.padding-block-none--laptop{padding-block:var(--px-padding-none)}.padding-inline-2xs--laptop{padding-inline:var(--px-padding-2xs)}.padding-inline-xs--laptop{padding-inline:var(--px-padding-xs)}.padding-inline-s--laptop{padding-inline:var(--px-padding-s)}.padding-inline-m--laptop{padding-inline:var(--px-padding-m)}.padding-inline-l--laptop{padding-inline:var(--px-padding-l)}.padding-inline-xl--laptop{padding-inline:var(--px-padding-xl)}.padding-inline-none--laptop{padding-inline:var(--px-padding-none)}.padding-top-2xs--laptop{padding-top:var(--px-padding-2xs)}.padding-top-xs--laptop{padding-top:var(--px-padding-xs)}.padding-top-s--laptop{padding-top:var(--px-padding-s)}.padding-top-m--laptop{padding-top:var(--px-padding-m)}.padding-top-l--laptop{padding-top:var(--px-padding-l)}.padding-top-xl--laptop{padding-top:var(--px-padding-xl)}.padding-top-none--laptop{padding-top:var(--px-padding-none)}.padding-right-2xs--laptop{padding-right:var(--px-padding-2xs)}.padding-right-xs--laptop{padding-right:var(--px-padding-xs)}.padding-right-s--laptop{padding-right:var(--px-padding-s)}.padding-right-m--laptop{padding-right:var(--px-padding-m)}.padding-right-l--laptop{padding-right:var(--px-padding-l)}.padding-right-xl--laptop{padding-right:var(--px-padding-xl)}.padding-right-none--laptop{padding-right:var(--px-padding-none)}.padding-bottom-2xs--laptop{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs--laptop{padding-bottom:var(--px-padding-xs)}.padding-bottom-s--laptop{padding-bottom:var(--px-padding-s)}.padding-bottom-m--laptop{padding-bottom:var(--px-padding-m)}.padding-bottom-l--laptop{padding-bottom:var(--px-padding-l)}.padding-bottom-xl--laptop{padding-bottom:var(--px-padding-xl)}.padding-bottom-none--laptop{padding-bottom:var(--px-padding-none)}.padding-left-2xs--laptop{padding-left:var(--px-padding-2xs)}.padding-left-xs--laptop{padding-left:var(--px-padding-xs)}.padding-left-s--laptop{padding-left:var(--px-padding-s)}.padding-left-m--laptop{padding-left:var(--px-padding-m)}.padding-left-l--laptop{padding-left:var(--px-padding-l)}.padding-left-xl--laptop{padding-left:var(--px-padding-xl)}.padding-left-none--laptop{padding-left:var(--px-padding-none)}}', u = new CSSStyleSheet();
|
|
4
|
+
u.replaceSync(C);
|
|
5
|
+
const w = ["anchor-right", "anchor-left", "anchor-full"], T = ["", "cover", "contain", "default"], p = class p extends g {
|
|
6
6
|
constructor() {
|
|
7
7
|
super(u), this.template = () => `<div class="container">
|
|
8
8
|
<slot name="anchor-left"></slot>
|
|
9
9
|
<slot name="anchor-right"></slot>
|
|
10
10
|
<slot name="anchor-full"></slot>
|
|
11
11
|
<slot></slot>
|
|
12
|
-
</div>`, this.
|
|
13
|
-
this.hasAttribute("background-image") && this.loadImg("background-image", this.getAttribute("background-image")), this.hasAttribute("background-image--mobile") && this.loadImg(
|
|
14
|
-
"background-image--mobile",
|
|
15
|
-
this.getAttribute("background-image--mobile")
|
|
16
|
-
), this.hasAttribute("background-image--tablet") && this.loadImg(
|
|
17
|
-
"background-image--tablet",
|
|
18
|
-
this.getAttribute("background-image--tablet")
|
|
19
|
-
), this.hasAttribute("background-image--laptop") && this.loadImg(
|
|
20
|
-
"background-image--laptop",
|
|
21
|
-
this.getAttribute("background-image--laptop")
|
|
22
|
-
);
|
|
23
|
-
}, this.shadowRoot.innerHTML = this.template();
|
|
12
|
+
</div>`, this.shadowRoot.innerHTML = this.template();
|
|
24
13
|
}
|
|
25
14
|
static get observedAttributes() {
|
|
26
15
|
return [
|
|
@@ -77,6 +66,177 @@ const I = ["anchor-right", "anchor-left", "anchor-full"], C = ["", "cover", "con
|
|
|
77
66
|
"inverted"
|
|
78
67
|
];
|
|
79
68
|
}
|
|
69
|
+
connectedCallback() {
|
|
70
|
+
var a, e, d, i;
|
|
71
|
+
super.connectedCallback(), this.backgroundColor || (this.backgroundColor = "container-default");
|
|
72
|
+
const t = this.querySelector("[slot]");
|
|
73
|
+
t && w.includes(t.getAttribute("slot")) && this.shadowRoot.querySelector(".container").classList.toggle("anchored"), ((a = this.parentElement) == null ? void 0 : a.getAttribute("align-items")) === "stretch" && (((e = this.parentElement) == null ? void 0 : e.getAttribute("direction")) === "column" ? this.$el.style.width = "100%" : this.$el.style.height = "100%"), (((d = this.parentElement) == null ? void 0 : d.localName) === "px-grid-item" || ((i = this.parentElement) == null ? void 0 : i.localName) === "px-a") && (this.$el.style.height = "100%");
|
|
74
|
+
}
|
|
75
|
+
attributeChangedCallback(t, a, e) {
|
|
76
|
+
if (a !== e)
|
|
77
|
+
switch (t) {
|
|
78
|
+
case "padding":
|
|
79
|
+
case "padding-block":
|
|
80
|
+
case "padding-inline":
|
|
81
|
+
case "padding-top":
|
|
82
|
+
case "padding-right":
|
|
83
|
+
case "padding-bottom":
|
|
84
|
+
case "padding-left":
|
|
85
|
+
case "padding--mobile":
|
|
86
|
+
case "padding-block--mobile":
|
|
87
|
+
case "padding-inline--mobile":
|
|
88
|
+
case "padding-top--mobile":
|
|
89
|
+
case "padding-right--mobile":
|
|
90
|
+
case "padding-bottom--mobile":
|
|
91
|
+
case "padding-left--mobile":
|
|
92
|
+
case "padding--tablet":
|
|
93
|
+
case "padding-block--tablet":
|
|
94
|
+
case "padding-inline--tablet":
|
|
95
|
+
case "padding-top--tablet":
|
|
96
|
+
case "padding-right--tablet":
|
|
97
|
+
case "padding-bottom--tablet":
|
|
98
|
+
case "padding-left--tablet":
|
|
99
|
+
case "padding--laptop":
|
|
100
|
+
case "padding-block--laptop":
|
|
101
|
+
case "padding-inline--laptop":
|
|
102
|
+
case "padding-top--laptop":
|
|
103
|
+
case "padding-right--laptop":
|
|
104
|
+
case "padding-bottom--laptop":
|
|
105
|
+
case "padding-left--laptop":
|
|
106
|
+
this.updateAttribute(t, a, e, z);
|
|
107
|
+
break;
|
|
108
|
+
case "border":
|
|
109
|
+
this.updateAttribute(t, a, e, S);
|
|
110
|
+
break;
|
|
111
|
+
case "border-radius":
|
|
112
|
+
this.updateAttribute(
|
|
113
|
+
t,
|
|
114
|
+
a,
|
|
115
|
+
e,
|
|
116
|
+
$
|
|
117
|
+
);
|
|
118
|
+
break;
|
|
119
|
+
case "no-border-radius":
|
|
120
|
+
case "no-border-radius--mobile":
|
|
121
|
+
case "no-border-radius--tablet":
|
|
122
|
+
case "no-border-radius--laptop":
|
|
123
|
+
this.updateNoBorderRadius(
|
|
124
|
+
t,
|
|
125
|
+
a,
|
|
126
|
+
e,
|
|
127
|
+
A
|
|
128
|
+
);
|
|
129
|
+
break;
|
|
130
|
+
case "background-color":
|
|
131
|
+
case "background-color--mobile":
|
|
132
|
+
case "background-color--tablet":
|
|
133
|
+
case "background-color--laptop":
|
|
134
|
+
this.updateBackgroundColor(t, e);
|
|
135
|
+
break;
|
|
136
|
+
case "background-gradient":
|
|
137
|
+
case "background-gradient--mobile":
|
|
138
|
+
case "background-gradient--tablet":
|
|
139
|
+
case "background-gradient--laptop":
|
|
140
|
+
this.updateGradient(t, e);
|
|
141
|
+
break;
|
|
142
|
+
case "background-size":
|
|
143
|
+
this.updateAttribute(
|
|
144
|
+
t,
|
|
145
|
+
a,
|
|
146
|
+
e,
|
|
147
|
+
T
|
|
148
|
+
);
|
|
149
|
+
break;
|
|
150
|
+
case "background-image":
|
|
151
|
+
case "background-image--mobile":
|
|
152
|
+
case "background-image--tablet":
|
|
153
|
+
case "background-image--laptop":
|
|
154
|
+
this.updateBackgroundImg(t, e);
|
|
155
|
+
break;
|
|
156
|
+
case "background-position":
|
|
157
|
+
e !== null && e !== "" && (this.$el.style.backgroundPosition = e);
|
|
158
|
+
break;
|
|
159
|
+
case "box-shadow":
|
|
160
|
+
this.updateAttribute(t, a, e, y);
|
|
161
|
+
break;
|
|
162
|
+
default:
|
|
163
|
+
super.attributeChangedCallback(t, a, e);
|
|
164
|
+
break;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
updateBackgroundImg(t, a) {
|
|
168
|
+
this.$el.style.setProperty(`--${t}`, `url("${a}")`);
|
|
169
|
+
}
|
|
170
|
+
updateGradient(t, a) {
|
|
171
|
+
if (this.checkName(L, a)) {
|
|
172
|
+
const e = this.splitAttrNameFromBreakpoint(t);
|
|
173
|
+
t = e.attrName;
|
|
174
|
+
const d = e.breakpoint;
|
|
175
|
+
this.$el.style.setProperty(
|
|
176
|
+
`--${t}${d}`,
|
|
177
|
+
`linear-gradient(var(--px-color-bg-gradient-${a}))`
|
|
178
|
+
);
|
|
179
|
+
} else
|
|
180
|
+
console.error(
|
|
181
|
+
`${a} is not an allowed background-gradient value for ${this.$el}`
|
|
182
|
+
);
|
|
183
|
+
}
|
|
184
|
+
updateBackgroundColor(t, a) {
|
|
185
|
+
if (this.checkName(b, a)) {
|
|
186
|
+
const e = this.splitAttrNameFromBreakpoint(t), d = e.breakpoint;
|
|
187
|
+
this.$el.style.setProperty(
|
|
188
|
+
`--${e.attrName}${d}`,
|
|
189
|
+
`var(--px-color-bg-${a}-default)`
|
|
190
|
+
), this.$el.style.setProperty(
|
|
191
|
+
`--${e.attrName}-inverted${d}`,
|
|
192
|
+
`var(--px-color-bg-${a}-inverted)`
|
|
193
|
+
);
|
|
194
|
+
} else
|
|
195
|
+
console.error(
|
|
196
|
+
`${a} is not an allowed ${t} value for ${this.$el}`
|
|
197
|
+
);
|
|
198
|
+
}
|
|
199
|
+
updateNoBorderRadius(t, a, e, d) {
|
|
200
|
+
if (!this.checkName(d, e))
|
|
201
|
+
console.error(
|
|
202
|
+
`${e} is not an allowed ${t} value for ${this.$el}`
|
|
203
|
+
);
|
|
204
|
+
else {
|
|
205
|
+
const i = this.splitAttrNameFromBreakpoint(t), r = i.breakpoint;
|
|
206
|
+
a !== null && a !== "" && this.$el.classList.toggle(
|
|
207
|
+
`${i.attrName}-${a}${r}`
|
|
208
|
+
), e !== null && e !== "" && this.$el.classList.toggle(
|
|
209
|
+
`${i.attrName}-${e}${r}`
|
|
210
|
+
);
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
updateAttribute(t, a, e, d) {
|
|
214
|
+
if (!this.checkName(d, e))
|
|
215
|
+
console.error(
|
|
216
|
+
`${e} is not an allowed ${t} value for ${this.$el}`
|
|
217
|
+
);
|
|
218
|
+
else {
|
|
219
|
+
const i = this.splitAttrNameFromBreakpoint(t), r = i.breakpoint;
|
|
220
|
+
a !== null && a !== "" && this.$el.classList.toggle(
|
|
221
|
+
`${i.attrName}-${a}${r}`
|
|
222
|
+
), e !== null && e !== "" && this.$el.classList.toggle(
|
|
223
|
+
`${i.attrName}-${e}${r}`
|
|
224
|
+
);
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
splitAttrNameFromBreakpoint(t) {
|
|
228
|
+
let a = "";
|
|
229
|
+
if (["--mobile", "--tablet", "--laptop"].some(
|
|
230
|
+
(e) => t.includes(e)
|
|
231
|
+
)) {
|
|
232
|
+
const e = t.split("--");
|
|
233
|
+
t = e[0], a = `--${e[1]}`;
|
|
234
|
+
}
|
|
235
|
+
return { attrName: t, breakpoint: a };
|
|
236
|
+
}
|
|
237
|
+
checkName(t, a) {
|
|
238
|
+
return t.includes(a);
|
|
239
|
+
}
|
|
80
240
|
get padding() {
|
|
81
241
|
return this.getAttribute("padding");
|
|
82
242
|
}
|
|
@@ -281,28 +441,28 @@ const I = ["anchor-right", "anchor-left", "anchor-full"], C = ["", "cover", "con
|
|
|
281
441
|
set noBorderRadiusLaptop(t) {
|
|
282
442
|
this.setAttribute("no-border-radius--laptop", t);
|
|
283
443
|
}
|
|
284
|
-
get
|
|
444
|
+
get backgroundColor() {
|
|
285
445
|
return this.getAttribute("background-color");
|
|
286
446
|
}
|
|
287
|
-
set
|
|
447
|
+
set backgroundColor(t) {
|
|
288
448
|
this.setAttribute("background-color", t);
|
|
289
449
|
}
|
|
290
|
-
get
|
|
450
|
+
get backgroundColorMobile() {
|
|
291
451
|
return this.getAttribute("background-color--mobile");
|
|
292
452
|
}
|
|
293
|
-
set
|
|
453
|
+
set backgroundColorMobile(t) {
|
|
294
454
|
this.setAttribute("background-color--mobile", t);
|
|
295
455
|
}
|
|
296
|
-
get
|
|
456
|
+
get backgroundColorTablet() {
|
|
297
457
|
return this.getAttribute("background-color--tablet");
|
|
298
458
|
}
|
|
299
|
-
set
|
|
459
|
+
set backgroundColorTablet(t) {
|
|
300
460
|
this.setAttribute("background-color--tablet", t);
|
|
301
461
|
}
|
|
302
|
-
get
|
|
462
|
+
get backgroundColorLaptop() {
|
|
303
463
|
return this.getAttribute("background-color--laptop");
|
|
304
464
|
}
|
|
305
|
-
set
|
|
465
|
+
set backgroundColorLaptop(t) {
|
|
306
466
|
this.setAttribute("background-color--laptop", t);
|
|
307
467
|
}
|
|
308
468
|
get gradient() {
|
|
@@ -329,46 +489,46 @@ const I = ["anchor-right", "anchor-left", "anchor-full"], C = ["", "cover", "con
|
|
|
329
489
|
set gradientLaptop(t) {
|
|
330
490
|
this.setAttribute("background-gradient--laptop", t);
|
|
331
491
|
}
|
|
332
|
-
get
|
|
492
|
+
get backgroundImage() {
|
|
333
493
|
return this.getAttribute("background-image");
|
|
334
494
|
}
|
|
335
|
-
set
|
|
495
|
+
set backgroundImage(t) {
|
|
336
496
|
this.setAttribute("background-image", t);
|
|
337
497
|
}
|
|
338
|
-
get
|
|
498
|
+
get backgroundImageMobile() {
|
|
339
499
|
return this.getAttribute("background-image--mobile");
|
|
340
500
|
}
|
|
341
|
-
set
|
|
501
|
+
set backgroundImageMobile(t) {
|
|
342
502
|
this.setAttribute("background-image--mobile", t);
|
|
343
503
|
}
|
|
344
|
-
get
|
|
504
|
+
get backgroundImageTablet() {
|
|
345
505
|
return this.getAttribute("background-image--tablet");
|
|
346
506
|
}
|
|
347
|
-
set
|
|
507
|
+
set backgroundImageTablet(t) {
|
|
348
508
|
this.setAttribute("background-image--tablet", t);
|
|
349
509
|
}
|
|
350
|
-
get
|
|
510
|
+
get backgroundImageLaptop() {
|
|
351
511
|
return this.getAttribute("background-image--laptop");
|
|
352
512
|
}
|
|
353
|
-
set
|
|
513
|
+
set backgroundImageLaptop(t) {
|
|
354
514
|
this.setAttribute("background-image--laptop", t);
|
|
355
515
|
}
|
|
356
|
-
get
|
|
516
|
+
get backgroundSize() {
|
|
357
517
|
return this.getAttribute("background-size");
|
|
358
518
|
}
|
|
359
|
-
set
|
|
519
|
+
set backgroundSize(t) {
|
|
360
520
|
this.setAttribute("background-size", t);
|
|
361
521
|
}
|
|
362
|
-
get
|
|
522
|
+
get backgroundPosition() {
|
|
363
523
|
return this.getAttribute("background-position");
|
|
364
524
|
}
|
|
365
|
-
set
|
|
525
|
+
set backgroundPosition(t) {
|
|
366
526
|
this.setAttribute("background-position", t);
|
|
367
527
|
}
|
|
368
|
-
get
|
|
528
|
+
get boxShadow() {
|
|
369
529
|
return this.getAttribute("box-shadow");
|
|
370
530
|
}
|
|
371
|
-
set
|
|
531
|
+
set boxShadow(t) {
|
|
372
532
|
this.setAttribute("box-shadow", t);
|
|
373
533
|
}
|
|
374
534
|
get inverted() {
|
|
@@ -377,183 +537,14 @@ const I = ["anchor-right", "anchor-left", "anchor-full"], C = ["", "cover", "con
|
|
|
377
537
|
set inverted(t) {
|
|
378
538
|
this.setAttribute("inverted", t);
|
|
379
539
|
}
|
|
380
|
-
connectedCallback() {
|
|
381
|
-
var a, i, e, d;
|
|
382
|
-
super.connectedCallback(), this.style.setProperty(
|
|
383
|
-
"--background-color",
|
|
384
|
-
"var(--px-color-bg-container-rich-inverted)"
|
|
385
|
-
);
|
|
386
|
-
const t = this.querySelector("[slot]");
|
|
387
|
-
t && I.includes(t.getAttribute("slot")) && this.shadowRoot.querySelector(".container").classList.toggle("anchored"), ((a = this.parentElement) == null ? void 0 : a.getAttribute("align-items")) === "stretch" && (((i = this.parentElement) == null ? void 0 : i.getAttribute("direction")) === "column" ? this.$el.style.width = "100%" : this.$el.style.height = "100%"), (((e = this.parentElement) == null ? void 0 : e.localName) === "px-grid-item" || ((d = this.parentElement) == null ? void 0 : d.localName) === "px-a") && (this.$el.style.height = "100%"), (this.hasAttribute("background-image") || this.hasAttribute("background-image--mobile") || this.hasAttribute("background-image--tablet") || this.hasAttribute("background-image--laptop")) && window.addEventListener("resize", this.onWindowResize);
|
|
388
|
-
}
|
|
389
|
-
disconnectedCallback() {
|
|
390
|
-
window.removeEventListener("resize", this.onWindowResize);
|
|
391
|
-
}
|
|
392
|
-
attributeChangedCallback(t, a, i) {
|
|
393
|
-
if (a !== i)
|
|
394
|
-
switch (t) {
|
|
395
|
-
case "padding":
|
|
396
|
-
case "padding-block":
|
|
397
|
-
case "padding-inline":
|
|
398
|
-
case "padding-top":
|
|
399
|
-
case "padding-right":
|
|
400
|
-
case "padding-bottom":
|
|
401
|
-
case "padding-left":
|
|
402
|
-
case "padding--mobile":
|
|
403
|
-
case "padding-block--mobile":
|
|
404
|
-
case "padding-inline--mobile":
|
|
405
|
-
case "padding-top--mobile":
|
|
406
|
-
case "padding-right--mobile":
|
|
407
|
-
case "padding-bottom--mobile":
|
|
408
|
-
case "padding-left--mobile":
|
|
409
|
-
case "padding--tablet":
|
|
410
|
-
case "padding-block--tablet":
|
|
411
|
-
case "padding-inline--tablet":
|
|
412
|
-
case "padding-top--tablet":
|
|
413
|
-
case "padding-right--tablet":
|
|
414
|
-
case "padding-bottom--tablet":
|
|
415
|
-
case "padding-left--tablet":
|
|
416
|
-
case "padding--laptop":
|
|
417
|
-
case "padding-block--laptop":
|
|
418
|
-
case "padding-inline--laptop":
|
|
419
|
-
case "padding-top--laptop":
|
|
420
|
-
case "padding-right--laptop":
|
|
421
|
-
case "padding-bottom--laptop":
|
|
422
|
-
case "padding-left--laptop":
|
|
423
|
-
this.updateAttribute(t, a, i, z);
|
|
424
|
-
break;
|
|
425
|
-
case "border":
|
|
426
|
-
this.updateAttribute(t, a, i, S);
|
|
427
|
-
break;
|
|
428
|
-
case "border-radius":
|
|
429
|
-
this.updateAttribute(
|
|
430
|
-
t,
|
|
431
|
-
a,
|
|
432
|
-
i,
|
|
433
|
-
$
|
|
434
|
-
);
|
|
435
|
-
break;
|
|
436
|
-
case "no-border-radius":
|
|
437
|
-
case "no-border-radius--mobile":
|
|
438
|
-
case "no-border-radius--tablet":
|
|
439
|
-
case "no-border-radius--laptop":
|
|
440
|
-
this.updateNoBorderRadius(
|
|
441
|
-
t,
|
|
442
|
-
a,
|
|
443
|
-
i,
|
|
444
|
-
A
|
|
445
|
-
);
|
|
446
|
-
break;
|
|
447
|
-
case "background-color":
|
|
448
|
-
case "background-color--mobile":
|
|
449
|
-
case "background-color--tablet":
|
|
450
|
-
case "background-color--laptop":
|
|
451
|
-
this.updateBgColor(t, i);
|
|
452
|
-
break;
|
|
453
|
-
case "background-gradient":
|
|
454
|
-
case "background-gradient--mobile":
|
|
455
|
-
case "background-gradient--tablet":
|
|
456
|
-
case "background-gradient--laptop":
|
|
457
|
-
this.updateGradient(t, i);
|
|
458
|
-
break;
|
|
459
|
-
case "background-size":
|
|
460
|
-
this.updateAttribute(t, a, i, C);
|
|
461
|
-
break;
|
|
462
|
-
case "background-image":
|
|
463
|
-
case "background-image--mobile":
|
|
464
|
-
case "background-image--tablet":
|
|
465
|
-
case "background-image--laptop":
|
|
466
|
-
i !== "" && (this.$el.classList.toggle("bgimg"), this.loadImg(t, i));
|
|
467
|
-
break;
|
|
468
|
-
case "background-position":
|
|
469
|
-
i !== null && i !== "" && (this.$el.style.backgroundPosition = i);
|
|
470
|
-
break;
|
|
471
|
-
case "box-shadow":
|
|
472
|
-
this.updateAttribute(t, a, i, y);
|
|
473
|
-
break;
|
|
474
|
-
default:
|
|
475
|
-
super.attributeChangedCallback(t, a, i);
|
|
476
|
-
break;
|
|
477
|
-
}
|
|
478
|
-
}
|
|
479
|
-
loadImg(t, a) {
|
|
480
|
-
t === "background-image" ? this.$el.style.backgroundImage = `url("${a}")` : window.matchMedia("only screen and (max-width: 767px)").matches && t === "background-image--mobile" ? this.$el.style.backgroundImage = `url("${a}")` : window.matchMedia(
|
|
481
|
-
"only screen and (min-width: 768px) and (max-width: 1024px)"
|
|
482
|
-
).matches && t === "background-image--tablet" ? this.$el.style.backgroundImage = `url("${a}")` : window.matchMedia("only screen and (min-width: 1025px)").matches && t === "background-image--laptop" && (this.$el.style.backgroundImage = `url("${a}")`);
|
|
483
|
-
}
|
|
484
|
-
updateGradient(t, a) {
|
|
485
|
-
if (this.checkName(L, a)) {
|
|
486
|
-
const i = this.splitAttrNameFromBreakpoint(t);
|
|
487
|
-
t = i.attrName;
|
|
488
|
-
const e = i.breakpoint;
|
|
489
|
-
this.$el.style.setProperty(
|
|
490
|
-
`--${t}${e}`,
|
|
491
|
-
`linear-gradient(var(--px-color-bg-gradient-${a}))`
|
|
492
|
-
);
|
|
493
|
-
} else
|
|
494
|
-
console.error(
|
|
495
|
-
`${a} is not an allowed background-gradient value for ${this.$el}`
|
|
496
|
-
);
|
|
497
|
-
}
|
|
498
|
-
updateBgColor(t, a) {
|
|
499
|
-
if (this.checkName(b, a)) {
|
|
500
|
-
const i = this.splitAttrNameFromBreakpoint(t);
|
|
501
|
-
t = i.attrName;
|
|
502
|
-
const e = i.breakpoint, d = this.getAttribute("inverted") !== null ? "inverted" : "default";
|
|
503
|
-
this.$el.style.setProperty(
|
|
504
|
-
`--${t}${e}`,
|
|
505
|
-
`var(--px-color-bg-${a}-${d})`
|
|
506
|
-
);
|
|
507
|
-
} else
|
|
508
|
-
console.error(
|
|
509
|
-
`${a} is not an allowed ${t} value for ${this.$el}`
|
|
510
|
-
);
|
|
511
|
-
}
|
|
512
|
-
updateNoBorderRadius(t, a, i, e) {
|
|
513
|
-
if (!this.checkName(e, i))
|
|
514
|
-
console.error(
|
|
515
|
-
`${i} is not an allowed ${t} value for ${this.$el}`
|
|
516
|
-
);
|
|
517
|
-
else {
|
|
518
|
-
const d = this.splitAttrNameFromBreakpoint(t);
|
|
519
|
-
t = d.attrName;
|
|
520
|
-
const o = d.breakpoint;
|
|
521
|
-
a !== null && a !== "" && this.$el.classList.toggle(`${t}-${a}${o}`), i !== null && i !== "" && this.$el.classList.toggle(`${t}-${i}${o}`);
|
|
522
|
-
}
|
|
523
|
-
}
|
|
524
|
-
updateAttribute(t, a, i, e) {
|
|
525
|
-
if (!this.checkName(e, i))
|
|
526
|
-
console.error(
|
|
527
|
-
`${i} is not an allowed ${t} value for ${this.$el}`
|
|
528
|
-
);
|
|
529
|
-
else {
|
|
530
|
-
const d = this.splitAttrNameFromBreakpoint(t);
|
|
531
|
-
t = d.attrName;
|
|
532
|
-
const o = d.breakpoint;
|
|
533
|
-
a !== null && a !== "" && this.$el.classList.toggle(`${t}-${a}${o}`), i !== null && i !== "" && this.$el.classList.toggle(`${t}-${i}${o}`);
|
|
534
|
-
}
|
|
535
|
-
}
|
|
536
|
-
splitAttrNameFromBreakpoint(t) {
|
|
537
|
-
let a = "";
|
|
538
|
-
if (["--mobile", "--tablet", "--laptop"].some(
|
|
539
|
-
(i) => t.includes(i)
|
|
540
|
-
)) {
|
|
541
|
-
const i = t.split("--");
|
|
542
|
-
t = i[0], a = `--${i[1]}`;
|
|
543
|
-
}
|
|
544
|
-
return { attrName: t, breakpoint: a };
|
|
545
|
-
}
|
|
546
|
-
checkName(t, a) {
|
|
547
|
-
return t.includes(a);
|
|
548
|
-
}
|
|
549
540
|
};
|
|
550
541
|
p.nativeName = "div";
|
|
551
|
-
let
|
|
552
|
-
customElements.define("px-container",
|
|
553
|
-
const T = ".btn{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:700;gap:var(--px-spacing-between-icon-horizontal);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-default)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-primary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch)[disabled],.btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch).extended{width:100%}.btn:not(.secondary,.tertiary,.patch).alternative{border-radius:var(--px-radius-button-small)}.btn.secondary{color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-secondary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn.secondary.loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn.secondary.extended{width:100%}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-txt-primary-default);border-radius:var(--px-radius-pill);padding:var(--px-padding-2xs) 0}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-color-bg-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs) var(--px-padding-s)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-default)}.btn.tertiary.loading{color:var(--px-color-txt-primary-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-color-bg-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}@media only screen and (min-width: 768px){.btn{font-size:var(--px-text-size-base-tablet)}.btn:not(.secondary,.tertiary,.patch){min-height:var(--px-size-action-desktop)}.btn.secondary{min-height:var(--px-size-action-desktop)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}}@media only screen and (min-width: 1441px){.btn{font-size:var(--px-text-size-base-desktop)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset);outline-width:var(--px-outline)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}", R = 'a,.link,::slotted(a){font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:500;color:var(--px-color-txt-body-default)}a:hover,.link:hover{color:var(--px-color-txt-hover-default)}a:focus,.link:focus{outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-text-to-icon-compact-horizontal)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-txt-hover-default)}a.no-style{color:inherit;text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-bg-container-weak-default);padding:var(--px-padding-xs)}a.skip-link:focus{left:auto;z-index:999}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-txt-body-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-txt-hover-inverted)}:host([inverted]) a:focus,:host([inverted]) .link:focus{outline-color:var(--px-color-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-txt-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-bg-container-weak-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1441px){a,.link,::slotted(a){font-size:var(--px-text-size-base-desktop)}a:focus,.link:focus{outline-offset:var(--px-offset);outline-width:var(--px-outline)}}', B = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s);height:1.625rem;border:var(--px-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:700;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);text-align:center;background-color:var(--px-color-bg-promo-default);color:var(--px-color-txt-primary-inverted)}.patch,.patch *{box-sizing:border-box}@media only screen and (min-width: 768px){.patch{font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1025px){.patch{font-size:var(--px-text-size-base-desktop)}}:host([inverted]) .patch{background-color:var(--px-color-bg-promo-inverted);color:var(--px-color-txt-primary-inverted)}.bottom-right{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}.bottom-left{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}:host([inverted]) .info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}.black-friday{background-color:var(--px-color-bg-container-rich-default);color:var(--px-color-txt-body-inverted)}:host([inverted]) .black-friday{background-color:var(--px-color-bg-container-rich-inverted);color:var(--px-color-txt-body-default)}.eco{background-color:var(--px-color-bg-success-default);color:var(--px-color-txt-body-inverted)}:host([inverted]) .eco{background-color:var(--px-color-bg-success-inverted);color:var(--px-color-txt-inverted-default)}.greyed{background-color:var(--px-color-bg-action-disabled-default);color:var(--px-color-icon-disabled-default)}:host([inverted]) .greyed{background-color:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-icon-disabled-inverted)}", h = new CSSStyleSheet(), x = new CSSStyleSheet(), v = new CSSStyleSheet();
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
v.replaceSync(
|
|
542
|
+
let o = p;
|
|
543
|
+
customElements.define("px-container", o);
|
|
544
|
+
const B = ".btn{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:700;gap:var(--px-spacing-between-icon-horizontal);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-default)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-primary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch)[disabled],.btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch).extended{width:100%}.btn:not(.secondary,.tertiary,.patch).alternative{border-radius:var(--px-radius-button-small)}.btn.secondary{color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-secondary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn.secondary.loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn.secondary.extended{width:100%}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-txt-primary-default);border-radius:var(--px-radius-pill);padding:var(--px-padding-2xs) 0}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-color-bg-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs) var(--px-padding-s)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-default)}.btn.tertiary.loading{color:var(--px-color-txt-primary-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-color-bg-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}@media only screen and (min-width: 768px){.btn{font-size:var(--px-text-size-base-tablet)}.btn:not(.secondary,.tertiary,.patch){min-height:var(--px-size-action-desktop)}.btn.secondary{min-height:var(--px-size-action-desktop)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}}@media only screen and (min-width: 1441px){.btn{font-size:var(--px-text-size-base-desktop)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset);outline-width:var(--px-outline)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}", R = 'a,.link,::slotted(a){font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:500;color:var(--px-color-txt-body-default)}a:hover,.link:hover{color:var(--px-color-txt-hover-default)}a:focus,.link:focus{outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-text-to-icon-compact-horizontal)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-txt-hover-default)}a.no-style{color:inherit;text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-bg-container-weak-default);padding:var(--px-padding-xs)}a.skip-link:focus{left:auto;z-index:999}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-txt-body-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-txt-hover-inverted)}:host([inverted]) a:focus,:host([inverted]) .link:focus{outline-color:var(--px-color-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-txt-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-bg-container-weak-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1441px){a,.link,::slotted(a){font-size:var(--px-text-size-base-desktop)}a:focus,.link:focus{outline-offset:var(--px-offset);outline-width:var(--px-outline)}}', E = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s);height:1.625rem;border:var(--px-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:700;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);text-align:center;background-color:var(--px-color-bg-promo-default);color:var(--px-color-txt-primary-inverted)}.patch,.patch *{box-sizing:border-box}@media only screen and (min-width: 768px){.patch{font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1025px){.patch{font-size:var(--px-text-size-base-desktop)}}:host([inverted]) .patch{background-color:var(--px-color-bg-promo-inverted);color:var(--px-color-txt-primary-inverted)}.bottom-right{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}.bottom-left{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}:host([inverted]) .info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}.black-friday{background-color:var(--px-color-bg-container-rich-default);color:var(--px-color-txt-body-inverted)}:host([inverted]) .black-friday{background-color:var(--px-color-bg-container-rich-inverted);color:var(--px-color-txt-body-default)}.eco{background-color:var(--px-color-bg-success-default);color:var(--px-color-txt-body-inverted)}:host([inverted]) .eco{background-color:var(--px-color-bg-success-inverted);color:var(--px-color-txt-inverted-default)}.greyed{background-color:var(--px-color-bg-action-disabled-default);color:var(--px-color-icon-disabled-default)}:host([inverted]) .greyed{background-color:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-icon-disabled-inverted)}", x = new CSSStyleSheet(), h = new CSSStyleSheet(), v = new CSSStyleSheet();
|
|
545
|
+
x.replaceSync(B);
|
|
546
|
+
h.replaceSync(R);
|
|
547
|
+
v.replaceSync(E);
|
|
557
548
|
const M = [
|
|
558
549
|
"",
|
|
559
550
|
"default",
|
|
@@ -566,7 +557,7 @@ const M = [
|
|
|
566
557
|
"patch-eco"
|
|
567
558
|
], l = class l extends g {
|
|
568
559
|
constructor() {
|
|
569
|
-
super(
|
|
560
|
+
super(x, h, v), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
|
|
570
561
|
const t = document.createElement(this.nativeName);
|
|
571
562
|
t.classList.add("btn"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
572
563
|
}
|
|
@@ -585,20 +576,20 @@ const M = [
|
|
|
585
576
|
super.connectedCallback();
|
|
586
577
|
const t = this.querySelectorAll("px-icon");
|
|
587
578
|
t && t.forEach((a) => {
|
|
588
|
-
const
|
|
579
|
+
const e = a.getAttribute("size"), d = a.getAttribute("color");
|
|
589
580
|
a && (a.addEventListener("click", () => {
|
|
590
581
|
this.$el.focus();
|
|
591
|
-
}),
|
|
582
|
+
}), e || a.setAttribute("size", "xs"), d || a.setAttribute("color", "inherit"));
|
|
592
583
|
});
|
|
593
584
|
}
|
|
594
|
-
attributeChangedCallback(t, a,
|
|
595
|
-
if (a !==
|
|
585
|
+
attributeChangedCallback(t, a, e) {
|
|
586
|
+
if (a !== e)
|
|
596
587
|
switch (t) {
|
|
597
588
|
case "variant":
|
|
598
|
-
this.updateVariant(a,
|
|
589
|
+
this.updateVariant(a, e, M);
|
|
599
590
|
break;
|
|
600
591
|
case "state":
|
|
601
|
-
this.updateState(a,
|
|
592
|
+
this.updateState(a, e);
|
|
602
593
|
break;
|
|
603
594
|
case "extended":
|
|
604
595
|
this.updateExtended();
|
|
@@ -607,10 +598,10 @@ const M = [
|
|
|
607
598
|
this.updateLoading();
|
|
608
599
|
break;
|
|
609
600
|
case "shape":
|
|
610
|
-
this.updateShape(a,
|
|
601
|
+
this.updateShape(a, e);
|
|
611
602
|
break;
|
|
612
603
|
default:
|
|
613
|
-
super.attributeChangedCallback(t, a,
|
|
604
|
+
super.attributeChangedCallback(t, a, e);
|
|
614
605
|
break;
|
|
615
606
|
}
|
|
616
607
|
}
|
|
@@ -620,20 +611,20 @@ const M = [
|
|
|
620
611
|
checkClass(t) {
|
|
621
612
|
if (t.startsWith("patch-")) {
|
|
622
613
|
const a = t.split(/-(.*)/s);
|
|
623
|
-
for (const
|
|
624
|
-
|
|
614
|
+
for (const e of a)
|
|
615
|
+
e != "" && this.$el.classList.toggle(e);
|
|
625
616
|
} else
|
|
626
617
|
this.$el.classList.toggle(t);
|
|
627
618
|
}
|
|
628
619
|
_toggleClass(t, a) {
|
|
629
620
|
t !== null && t !== "" && t !== "default" && this.checkClass(t), a !== null && a !== "" && a !== "default" && this.checkClass(a);
|
|
630
621
|
}
|
|
631
|
-
updateVariant(t, a,
|
|
632
|
-
a === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, a), this.checkName(
|
|
622
|
+
updateVariant(t, a, e) {
|
|
623
|
+
a === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, a), this.checkName(e, a) || console.error(`Bad "variant" value for ${this.$el}`);
|
|
633
624
|
}
|
|
634
625
|
updateState(t, a) {
|
|
635
|
-
const
|
|
636
|
-
this._toggleClass(t, a), this.checkName(
|
|
626
|
+
const e = ["", "default", "success", "error"];
|
|
627
|
+
this._toggleClass(t, a), this.checkName(e, a) || console.error(`Bad "sate" value for ${this.$el}`);
|
|
637
628
|
}
|
|
638
629
|
updateExtended() {
|
|
639
630
|
this.$el.classList.toggle("extended");
|
|
@@ -643,14 +634,14 @@ const M = [
|
|
|
643
634
|
t && (t.getAttribute("size") || t.setAttribute("size", "xs")), this.$el.classList.toggle("loading");
|
|
644
635
|
}
|
|
645
636
|
updateShape(t, a) {
|
|
646
|
-
const
|
|
637
|
+
const e = [
|
|
647
638
|
"",
|
|
648
639
|
"default",
|
|
649
640
|
"bottom-right",
|
|
650
641
|
"bottom-left",
|
|
651
642
|
"alternative"
|
|
652
643
|
];
|
|
653
|
-
this._toggleClass(t, a), this.checkName(
|
|
644
|
+
this._toggleClass(t, a), this.checkName(e, a) || console.error(`Bad "shape" value for ${this.$el}`);
|
|
654
645
|
}
|
|
655
646
|
get variant() {
|
|
656
647
|
return this.getAttribute("variant");
|
|
@@ -692,12 +683,12 @@ const M = [
|
|
|
692
683
|
l.nativeName = "button";
|
|
693
684
|
let n = l;
|
|
694
685
|
customElements.get("px-button") || customElements.define("px-button", n);
|
|
695
|
-
const
|
|
696
|
-
m.replaceSync(
|
|
686
|
+
const I = ":host,:host *{box-sizing:border-box}:host .content-wrapper{margin-inline:1rem;max-width:1200px}@media only screen and (min-width: 1232px){:host .content-wrapper{margin-inline:auto}}", m = new CSSStyleSheet();
|
|
687
|
+
m.replaceSync(I);
|
|
697
688
|
class P extends HTMLElement {
|
|
698
689
|
constructor() {
|
|
699
690
|
super(), this.template = () => `
|
|
700
|
-
<px-container border-radius="none" padding="none" background-color="${this.
|
|
691
|
+
<px-container border-radius="none" padding="none" background-color="${this.backgroundColor}">
|
|
701
692
|
<div class="content-wrapper">
|
|
702
693
|
<px-vstack gap="under-display-vertical">
|
|
703
694
|
<slot name="heading"></slot>
|
|
@@ -730,48 +721,48 @@ class P extends HTMLElement {
|
|
|
730
721
|
get $container() {
|
|
731
722
|
return this.shadowRoot.querySelector("px-container");
|
|
732
723
|
}
|
|
733
|
-
attributeChangedCallback(t, a,
|
|
734
|
-
if (a !==
|
|
724
|
+
attributeChangedCallback(t, a, e) {
|
|
725
|
+
if (a !== e)
|
|
735
726
|
switch (t) {
|
|
736
727
|
case "background-color":
|
|
737
|
-
this.$container.
|
|
728
|
+
this.$container.backgroundColor = b.indexOf(e) > 0 ? e : "container-none";
|
|
738
729
|
break;
|
|
739
730
|
case "background-gradient":
|
|
740
731
|
this.$container.gradient = this.gradient;
|
|
741
732
|
break;
|
|
742
733
|
case "background-image":
|
|
743
|
-
this.$container.
|
|
734
|
+
this.$container.backgroundImage = e;
|
|
744
735
|
break;
|
|
745
736
|
case "background-image--mobile":
|
|
746
|
-
this.$container.
|
|
737
|
+
this.$container.backgroundImageMobile = e;
|
|
747
738
|
break;
|
|
748
739
|
case "background-image--tablet":
|
|
749
|
-
this.$container.
|
|
740
|
+
this.$container.backgroundImageTablet = e;
|
|
750
741
|
break;
|
|
751
742
|
case "background-image--laptop":
|
|
752
|
-
this.$container.
|
|
743
|
+
this.$container.backgroundImageLaptop = e;
|
|
753
744
|
break;
|
|
754
745
|
case "background-size":
|
|
755
|
-
this.$container.
|
|
746
|
+
this.$container.backgroundSize = e;
|
|
756
747
|
break;
|
|
757
748
|
case "background-position":
|
|
758
|
-
this.$container.
|
|
749
|
+
this.$container.backgroundPosition = e;
|
|
759
750
|
break;
|
|
760
751
|
case "padding-block":
|
|
761
|
-
this.$container.paddingBlock =
|
|
752
|
+
this.$container.paddingBlock = e;
|
|
762
753
|
break;
|
|
763
754
|
case "padding-top":
|
|
764
|
-
this.$container.paddingTop =
|
|
755
|
+
this.$container.paddingTop = e;
|
|
765
756
|
break;
|
|
766
757
|
case "padding-bottom":
|
|
767
|
-
this.$container.paddingBottom =
|
|
758
|
+
this.$container.paddingBottom = e;
|
|
768
759
|
break;
|
|
769
760
|
}
|
|
770
761
|
}
|
|
771
|
-
get
|
|
762
|
+
get backgroundColor() {
|
|
772
763
|
return this.getAttribute("background-color") || "container-none";
|
|
773
764
|
}
|
|
774
|
-
set
|
|
765
|
+
set backgroundColor(t) {
|
|
775
766
|
this.setAttribute("background-color", t);
|
|
776
767
|
}
|
|
777
768
|
get gradient() {
|
|
@@ -780,40 +771,40 @@ class P extends HTMLElement {
|
|
|
780
771
|
set gradient(t) {
|
|
781
772
|
this.setAttribute("background-gradient", t);
|
|
782
773
|
}
|
|
783
|
-
get
|
|
774
|
+
get backgroundImage() {
|
|
784
775
|
return this.getAttribute("background-image");
|
|
785
776
|
}
|
|
786
|
-
set
|
|
777
|
+
set backgroundImage(t) {
|
|
787
778
|
this.setAttribute("background-image", t);
|
|
788
779
|
}
|
|
789
|
-
get
|
|
780
|
+
get backgroundImageMobile() {
|
|
790
781
|
return this.getAttribute("background-image--mobile");
|
|
791
782
|
}
|
|
792
|
-
set
|
|
783
|
+
set backgroundImageMobile(t) {
|
|
793
784
|
this.setAttribute("background-image--mobile", t);
|
|
794
785
|
}
|
|
795
|
-
get
|
|
786
|
+
get backgroundImageTablet() {
|
|
796
787
|
return this.getAttribute("background-image--tablet");
|
|
797
788
|
}
|
|
798
|
-
set
|
|
789
|
+
set backgroundImageTablet(t) {
|
|
799
790
|
this.setAttribute("background-image--tablet", t);
|
|
800
791
|
}
|
|
801
|
-
get
|
|
792
|
+
get backgroundImageLaptop() {
|
|
802
793
|
return this.getAttribute("background-image--laptop");
|
|
803
794
|
}
|
|
804
|
-
set
|
|
795
|
+
set backgroundImageLaptop(t) {
|
|
805
796
|
this.setAttribute("background-image--laptop", t);
|
|
806
797
|
}
|
|
807
|
-
get
|
|
798
|
+
get backgroundSize() {
|
|
808
799
|
return this.getAttribute("background-size");
|
|
809
800
|
}
|
|
810
|
-
set
|
|
801
|
+
set backgroundSize(t) {
|
|
811
802
|
this.setAttribute("background-size", t);
|
|
812
803
|
}
|
|
813
|
-
get
|
|
804
|
+
get backgroundPosition() {
|
|
814
805
|
return this.getAttribute("background-position");
|
|
815
806
|
}
|
|
816
|
-
set
|
|
807
|
+
set backgroundPosition(t) {
|
|
817
808
|
this.setAttribute("background-position", t);
|
|
818
809
|
}
|
|
819
810
|
get paddingBlock() {
|
|
@@ -850,8 +841,8 @@ class q extends c {
|
|
|
850
841
|
connectedCallback() {
|
|
851
842
|
this.setAttribute("slot", "header-entries"), this.$button && this.setupButtonA11y();
|
|
852
843
|
}
|
|
853
|
-
attributeChangedCallback(t, a,
|
|
854
|
-
super.attributeChangedCallback(t, a,
|
|
844
|
+
attributeChangedCallback(t, a, e) {
|
|
845
|
+
super.attributeChangedCallback(t, a, e), t === "href" && this.$button && e ? this.shadowRoot.innerHTML = this.template() : t === "for" && this.$a && e && (this.shadowRoot.innerHTML = this.template(), this.setupButtonA11y());
|
|
855
846
|
}
|
|
856
847
|
setupButtonA11y() {
|
|
857
848
|
this.$button.setAttribute("tabindex", "0"), this.$button.role = "menuitem", this.$button.ariaExpanded = "false", this.$button.ariaHasPopup = "menu";
|
|
@@ -885,12 +876,12 @@ class H extends c {
|
|
|
885
876
|
var t;
|
|
886
877
|
super(f), this.template = `
|
|
887
878
|
<div id="navigation-items-container">
|
|
888
|
-
<px-section padding-block
|
|
889
|
-
<px-hstack gap
|
|
879
|
+
<px-section padding-block--mobile="s" padding-block="none" background-color="container-none">
|
|
880
|
+
<px-hstack gap--tablet="2rem" gap="3rem" wrap="wrap" align-items="center">
|
|
890
881
|
<slot name="header-logo"></slot>
|
|
891
882
|
<slot name="header-entries"></slot>
|
|
892
883
|
<px-spacer></px-spacer>
|
|
893
|
-
<px-hstack gap
|
|
884
|
+
<px-hstack gap--mobile="none" gap="1rem">
|
|
894
885
|
<slot name="header-actions"></slot>
|
|
895
886
|
<px-button-icon>
|
|
896
887
|
<px-icon name="burger_menu" from="lavender"></px-icon
|
|
@@ -911,14 +902,14 @@ class H extends c {
|
|
|
911
902
|
const a = t.target.closest(
|
|
912
903
|
"px-header-item"
|
|
913
904
|
);
|
|
914
|
-
a && a.for && (this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((
|
|
915
|
-
|
|
905
|
+
a && a.for && (this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((e) => {
|
|
906
|
+
e.checked = !1;
|
|
916
907
|
}), t.target.checked = !0, this.i11yEnableActions(!1), this.togglePanel(t.target.for));
|
|
917
908
|
}), this.shadowRoot.addEventListener("click", (t) => {
|
|
918
909
|
t.target.closest("px-button-icon") && (this.$backdropFilter.style.display = "block", this.$burgerMenu.setAttribute("tabindex", "0"), this.togglePanel("__lavender_mobile_menu"));
|
|
919
910
|
}), this.addEventListener("section-item-click", (t) => {
|
|
920
|
-
this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((
|
|
921
|
-
|
|
911
|
+
this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((e) => {
|
|
912
|
+
e.checked = !1;
|
|
922
913
|
}), t.detail.for !== "__lavender_mobile_menu" && (this.querySelector(
|
|
923
914
|
`px-header-item[for="${t.detail.for}"]`
|
|
924
915
|
).checked = !0), this.i11yEnableActions(!1), this.togglePanel(t.detail.for);
|
|
@@ -935,10 +926,10 @@ class H extends c {
|
|
|
935
926
|
<span slot="title">Menu</span>
|
|
936
927
|
<px-mdd-section>
|
|
937
928
|
${[...this.$navigationItems].map(
|
|
938
|
-
(
|
|
929
|
+
(e) => `<px-mdd-section-item for="${e.getAttribute("for")}">${e.innerText}</px-mdd-section-item>`
|
|
939
930
|
).join("")}
|
|
940
931
|
${[...this.$actionLinks].map(
|
|
941
|
-
(
|
|
932
|
+
(e) => `<px-a href="${e.href}" slot="footer">${e.innerText}</px-a>`
|
|
942
933
|
).join("")}
|
|
943
934
|
</px-mdd>
|
|
944
935
|
`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-header",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.3",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"exports": {
|
|
@@ -36,5 +36,5 @@
|
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "15a3f7932429caa1756aee628a5d57f95a9e4282"
|
|
40
40
|
}
|