@proximus/lavender-content-header 2.0.0-alpha.11 → 2.0.0-alpha.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +126 -130
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,57 +1,56 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { cssTokenBreakpoints as s, paddingValues as d, VerticallyExtendedElement as z, boxShadowValues as R, backgroundSizeValues as x, noBorderRadiusValues as P, borderRadiusValues as D, borderSideValues as E, borderValues as H, gradientValues as A, backgroundColorValues as p, borderColorValues as O, checkName as $, WithExtraAttributes as j, AttributeBreakpointHandlerDelegate as q, gapValues as C, PxElement as w } from "@proximus/lavender-common";
|
|
2
2
|
import "@proximus/lavender-heading";
|
|
3
|
-
const q = ":host{--min-height--mobile: 15.625em;--min-height--tablet: 17.5em;--min-height--laptop: 17.5em;--min-height--desktop: 17.5em}:host,:host>*{display:block;box-sizing:border-box}.content-header{position:relative;z-index:0}[min-height] .content-header-content{min-height:calc(var(--min-height--mobile) - (var(--px-spacing-l-mobile) * 2))}.content-header-content{display:flex;flex-direction:column;gap:var(--px-spacing-l-mobile);z-index:2;position:relative;box-sizing:border-box}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media only screen and (min-width: 48em){.content-header-content{gap:var(--px-spacing-l-desktop)}[min-height] .content-header-content{min-height:calc(var(--min-height--tablet) - (var(--px-spacing-l-tablet) * 2))}}@media only screen and (min-width: 64.0625em){.content-header-content{gap:var(--px-spacing-l-laptop)}[min-height] .content-header-content{min-height:calc(var(--min-height--laptop) - (var(--px-spacing-l-laptop) * 2))}}", G = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media only screen and (min-width: 77em){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media only screen and (min-width: 48em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media only screen and (min-width: 64.0625em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}', X = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-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:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.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:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.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)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{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)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{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)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}', T = new CSSStyleSheet();
|
|
4
|
-
|
|
5
|
-
const l = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, b = "px-padding",
|
|
3
|
+
const G = ":host{--min-height--mobile: 15.625em;--min-height--tablet: 17.5em;--min-height--laptop: 17.5em;--min-height--desktop: 17.5em}:host,:host>*{display:block;box-sizing:border-box}.content-header{position:relative;z-index:0}[min-height] .content-header-content{min-height:calc(var(--min-height--mobile) - (var(--px-spacing-l-mobile) * 2))}.content-header-content{display:flex;flex-direction:column;gap:var(--px-spacing-l-mobile);z-index:2;position:relative;box-sizing:border-box}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media only screen and (min-width: 48em){.content-header-content{gap:var(--px-spacing-l-desktop)}[min-height] .content-header-content{min-height:calc(var(--min-height--tablet) - (var(--px-spacing-l-tablet) * 2))}}@media only screen and (min-width: 64.0625em){.content-header-content{gap:var(--px-spacing-l-laptop)}[min-height] .content-header-content{min-height:calc(var(--min-height--laptop) - (var(--px-spacing-l-laptop) * 2))}}", X = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media only screen and (min-width: 77em){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media only screen and (min-width: 48em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media only screen and (min-width: 64.0625em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}', F = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-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:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.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:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.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)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{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)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{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)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}', S = new CSSStyleSheet();
|
|
4
|
+
S.replaceSync(F);
|
|
5
|
+
const l = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, b = "px-padding", _ = [
|
|
6
|
+
s(
|
|
7
|
+
"padding",
|
|
8
|
+
l,
|
|
9
|
+
d,
|
|
10
|
+
b,
|
|
11
|
+
"--container-padding"
|
|
12
|
+
),
|
|
13
|
+
s(
|
|
14
|
+
"padding-inline",
|
|
15
|
+
l,
|
|
16
|
+
d,
|
|
17
|
+
b
|
|
18
|
+
),
|
|
19
|
+
s(
|
|
20
|
+
"padding-block",
|
|
21
|
+
l,
|
|
22
|
+
d,
|
|
23
|
+
b
|
|
24
|
+
),
|
|
25
|
+
s(
|
|
26
|
+
"padding-top",
|
|
27
|
+
l,
|
|
28
|
+
d,
|
|
29
|
+
b
|
|
30
|
+
),
|
|
31
|
+
s(
|
|
32
|
+
"padding-right",
|
|
33
|
+
l,
|
|
34
|
+
d,
|
|
35
|
+
b,
|
|
36
|
+
"--container-padding-right"
|
|
37
|
+
),
|
|
38
|
+
s(
|
|
39
|
+
"padding-bottom",
|
|
40
|
+
l,
|
|
41
|
+
d,
|
|
42
|
+
b
|
|
43
|
+
),
|
|
44
|
+
s(
|
|
45
|
+
"padding-left",
|
|
46
|
+
l,
|
|
47
|
+
d,
|
|
48
|
+
b,
|
|
49
|
+
"--container-padding-left"
|
|
50
|
+
)
|
|
51
|
+
], k = class k extends z {
|
|
6
52
|
constructor() {
|
|
7
|
-
super(
|
|
8
|
-
T,
|
|
9
|
-
d(
|
|
10
|
-
"padding",
|
|
11
|
-
l,
|
|
12
|
-
s,
|
|
13
|
-
b,
|
|
14
|
-
"--container-padding"
|
|
15
|
-
),
|
|
16
|
-
d(
|
|
17
|
-
"padding-inline",
|
|
18
|
-
l,
|
|
19
|
-
s,
|
|
20
|
-
b
|
|
21
|
-
),
|
|
22
|
-
d(
|
|
23
|
-
"padding-block",
|
|
24
|
-
l,
|
|
25
|
-
s,
|
|
26
|
-
b
|
|
27
|
-
),
|
|
28
|
-
d(
|
|
29
|
-
"padding-top",
|
|
30
|
-
l,
|
|
31
|
-
s,
|
|
32
|
-
b
|
|
33
|
-
),
|
|
34
|
-
d(
|
|
35
|
-
"padding-right",
|
|
36
|
-
l,
|
|
37
|
-
s,
|
|
38
|
-
b,
|
|
39
|
-
"--container-padding-right"
|
|
40
|
-
),
|
|
41
|
-
d(
|
|
42
|
-
"padding-bottom",
|
|
43
|
-
l,
|
|
44
|
-
s,
|
|
45
|
-
b
|
|
46
|
-
),
|
|
47
|
-
d(
|
|
48
|
-
"padding-left",
|
|
49
|
-
l,
|
|
50
|
-
s,
|
|
51
|
-
b,
|
|
52
|
-
"--container-padding-left"
|
|
53
|
-
)
|
|
54
|
-
), this.template = () => `<div class="container">
|
|
53
|
+
super(S, ..._), this.template = () => `<div class="container">
|
|
55
54
|
<slot></slot>
|
|
56
55
|
<slot name="anchor-left"></slot>
|
|
57
56
|
<slot name="anchor-right"></slot>
|
|
@@ -160,7 +159,7 @@ const l = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, b
|
|
|
160
159
|
t,
|
|
161
160
|
i,
|
|
162
161
|
e,
|
|
163
|
-
|
|
162
|
+
x
|
|
164
163
|
);
|
|
165
164
|
break;
|
|
166
165
|
case "background-image":
|
|
@@ -176,7 +175,7 @@ const l = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, b
|
|
|
176
175
|
this.updateAttribute(t, i, e, R);
|
|
177
176
|
break;
|
|
178
177
|
case "anchor-offset":
|
|
179
|
-
this.updateAnchorOffset(i, e,
|
|
178
|
+
this.updateAnchorOffset(i, e, d);
|
|
180
179
|
break;
|
|
181
180
|
default:
|
|
182
181
|
super.attributeChangedCallback(t, i, e);
|
|
@@ -198,7 +197,7 @@ const l = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, b
|
|
|
198
197
|
this.$el.style.setProperty(`--${t}`, `url("${i}")`);
|
|
199
198
|
}
|
|
200
199
|
updateGradient(t, i) {
|
|
201
|
-
if (this.checkName(
|
|
200
|
+
if (this.checkName(A, i)) {
|
|
202
201
|
const e = this.splitAttrNameFromBreakpoint(t);
|
|
203
202
|
t = e.attrName;
|
|
204
203
|
const o = e.breakpoint;
|
|
@@ -267,7 +266,7 @@ const l = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, b
|
|
|
267
266
|
return { attrName: t, breakpoint: i };
|
|
268
267
|
}
|
|
269
268
|
updateAnchorOffset(t, i, e) {
|
|
270
|
-
if (
|
|
269
|
+
if (!$(e, i)) {
|
|
271
270
|
console.error(`${i} is not a valid anchor-offset value`);
|
|
272
271
|
return;
|
|
273
272
|
}
|
|
@@ -628,19 +627,19 @@ const l = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, b
|
|
|
628
627
|
this.setAttribute("inverted", t);
|
|
629
628
|
}
|
|
630
629
|
};
|
|
631
|
-
|
|
632
|
-
let u =
|
|
630
|
+
k.nativeName = "div";
|
|
631
|
+
let u = k;
|
|
633
632
|
customElements.get("px-container") || customElements.define("px-container", u);
|
|
634
|
-
const
|
|
635
|
-
|
|
636
|
-
const
|
|
633
|
+
const Z = ':host{display:block}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}', T = new CSSStyleSheet();
|
|
634
|
+
T.replaceSync(Z);
|
|
635
|
+
const W = [
|
|
637
636
|
"",
|
|
638
637
|
"default",
|
|
639
638
|
"row",
|
|
640
639
|
"row-reverse",
|
|
641
640
|
"column",
|
|
642
641
|
"column-reverse"
|
|
643
|
-
],
|
|
642
|
+
], Y = [
|
|
644
643
|
"",
|
|
645
644
|
"default",
|
|
646
645
|
"stretch",
|
|
@@ -648,7 +647,7 @@ const _ = [
|
|
|
648
647
|
"flex-end",
|
|
649
648
|
"center",
|
|
650
649
|
"baseline"
|
|
651
|
-
],
|
|
650
|
+
], J = [
|
|
652
651
|
"",
|
|
653
652
|
"default",
|
|
654
653
|
"flex-start",
|
|
@@ -657,10 +656,10 @@ const _ = [
|
|
|
657
656
|
"space-between",
|
|
658
657
|
"space-around",
|
|
659
658
|
"space-evenly"
|
|
660
|
-
],
|
|
661
|
-
class
|
|
659
|
+
], K = ["", "default", "nowrap", "wrap", "wrap-reverse"], Q = ["", "visible", "hidden", "scroll", "auto"];
|
|
660
|
+
class f extends j {
|
|
662
661
|
constructor() {
|
|
663
|
-
super(
|
|
662
|
+
super(T), this.overflowXAttributeDelegate = new q(
|
|
664
663
|
this,
|
|
665
664
|
"overflow-x",
|
|
666
665
|
(t) => t,
|
|
@@ -714,7 +713,7 @@ class k extends C {
|
|
|
714
713
|
case "gap--tablet":
|
|
715
714
|
case "gap--laptop":
|
|
716
715
|
case "gap--desktop":
|
|
717
|
-
this.updateFlexProperties(t, i, e,
|
|
716
|
+
this.updateFlexProperties(t, i, e, C);
|
|
718
717
|
break;
|
|
719
718
|
case "justify-content":
|
|
720
719
|
case "justify-content--mobile":
|
|
@@ -725,7 +724,7 @@ class k extends C {
|
|
|
725
724
|
t,
|
|
726
725
|
i,
|
|
727
726
|
e,
|
|
728
|
-
|
|
727
|
+
J
|
|
729
728
|
);
|
|
730
729
|
break;
|
|
731
730
|
case "align-items":
|
|
@@ -733,28 +732,28 @@ class k extends C {
|
|
|
733
732
|
case "align-items--tablet":
|
|
734
733
|
case "align-items--laptop":
|
|
735
734
|
case "align-items--desktop":
|
|
736
|
-
this.updateFlexProperties(t, i, e,
|
|
735
|
+
this.updateFlexProperties(t, i, e, Y);
|
|
737
736
|
break;
|
|
738
737
|
case "wrap":
|
|
739
738
|
case "wrap--mobile":
|
|
740
739
|
case "wrap--tablet":
|
|
741
740
|
case "wrap--laptop":
|
|
742
741
|
case "wrap--desktop":
|
|
743
|
-
this.updateFlexProperties(t, i, e,
|
|
742
|
+
this.updateFlexProperties(t, i, e, K);
|
|
744
743
|
break;
|
|
745
744
|
case "direction":
|
|
746
745
|
case "direction--mobile":
|
|
747
746
|
case "direction--tablet":
|
|
748
747
|
case "direction--laptop":
|
|
749
748
|
case "direction--desktop":
|
|
750
|
-
this.updateFlexProperties(t, i, e,
|
|
749
|
+
this.updateFlexProperties(t, i, e, W);
|
|
751
750
|
break;
|
|
752
751
|
case "overflow-x":
|
|
753
752
|
case "overflow-x--mobile":
|
|
754
753
|
case "overflow-x--tablet":
|
|
755
754
|
case "overflow-x--laptop":
|
|
756
755
|
case "overflow-x--desktop":
|
|
757
|
-
this.updateOverflowX(t, i, e,
|
|
756
|
+
this.updateOverflowX(t, i, e, Q);
|
|
758
757
|
break;
|
|
759
758
|
default:
|
|
760
759
|
super.attributeChangedCallback(t, i, e);
|
|
@@ -762,7 +761,7 @@ class k extends C {
|
|
|
762
761
|
}
|
|
763
762
|
}
|
|
764
763
|
updateOverflowX(t, i, e, o) {
|
|
765
|
-
if (
|
|
764
|
+
if (!$(o, e)) {
|
|
766
765
|
console.error(`${e} is not an allowed ${t} value`);
|
|
767
766
|
return;
|
|
768
767
|
}
|
|
@@ -977,8 +976,8 @@ class k extends C {
|
|
|
977
976
|
return this.shadowRoot.querySelector(".flex-container");
|
|
978
977
|
}
|
|
979
978
|
}
|
|
980
|
-
customElements.get("px-stack") || customElements.define("px-stack",
|
|
981
|
-
class
|
|
979
|
+
customElements.get("px-stack") || customElements.define("px-stack", f);
|
|
980
|
+
class U extends f {
|
|
982
981
|
constructor() {
|
|
983
982
|
super();
|
|
984
983
|
}
|
|
@@ -986,8 +985,8 @@ class K extends k {
|
|
|
986
985
|
super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
|
|
987
986
|
}
|
|
988
987
|
}
|
|
989
|
-
customElements.get("px-vstack") || customElements.define("px-vstack",
|
|
990
|
-
class
|
|
988
|
+
customElements.get("px-vstack") || customElements.define("px-vstack", U);
|
|
989
|
+
class N extends f {
|
|
991
990
|
constructor() {
|
|
992
991
|
super();
|
|
993
992
|
}
|
|
@@ -995,21 +994,21 @@ class Q extends k {
|
|
|
995
994
|
super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
|
|
996
995
|
}
|
|
997
996
|
}
|
|
998
|
-
customElements.get("px-hstack") || customElements.define("px-hstack",
|
|
999
|
-
class
|
|
997
|
+
customElements.get("px-hstack") || customElements.define("px-hstack", N);
|
|
998
|
+
class V extends HTMLElement {
|
|
1000
999
|
constructor() {
|
|
1001
1000
|
super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
|
|
1002
1001
|
}
|
|
1003
1002
|
static get observedAttributes() {
|
|
1004
|
-
return ["grow"];
|
|
1003
|
+
return ["grow", "nogap"];
|
|
1005
1004
|
}
|
|
1006
1005
|
attributeChangedCallback(t, i, e) {
|
|
1007
1006
|
t === "grow" && (this.growValue = e || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
|
|
1008
1007
|
}
|
|
1009
1008
|
connectedCallback() {
|
|
1010
|
-
this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.resizeObserver = new ResizeObserver(() => {
|
|
1009
|
+
this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.nogap && (this.resizeObserver = new ResizeObserver(() => {
|
|
1011
1010
|
this.handleSizeChange();
|
|
1012
|
-
}), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck();
|
|
1011
|
+
}), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck());
|
|
1013
1012
|
}
|
|
1014
1013
|
disconnectedCallback() {
|
|
1015
1014
|
var t;
|
|
@@ -1036,13 +1035,19 @@ class U extends HTMLElement {
|
|
|
1036
1035
|
updateParticipation() {
|
|
1037
1036
|
this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
|
|
1038
1037
|
}
|
|
1038
|
+
get nogap() {
|
|
1039
|
+
return this.hasAttribute("nogap");
|
|
1040
|
+
}
|
|
1041
|
+
set nogap(t) {
|
|
1042
|
+
t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
|
|
1043
|
+
}
|
|
1039
1044
|
}
|
|
1040
|
-
customElements.get("px-spacer") || customElements.define("px-spacer",
|
|
1041
|
-
const
|
|
1042
|
-
|
|
1043
|
-
class
|
|
1045
|
+
customElements.get("px-spacer") || customElements.define("px-spacer", V);
|
|
1046
|
+
const tt = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", L = new CSSStyleSheet();
|
|
1047
|
+
L.replaceSync(tt);
|
|
1048
|
+
class et extends j {
|
|
1044
1049
|
constructor() {
|
|
1045
|
-
super(
|
|
1050
|
+
super(L), this.template = (t) => `
|
|
1046
1051
|
<px-container border-radius="none" padding="none">
|
|
1047
1052
|
<px-vstack>
|
|
1048
1053
|
<px-container id="header-container" border-radius="none">
|
|
@@ -1239,10 +1244,10 @@ class V extends C {
|
|
|
1239
1244
|
this.$headerContainer.paddingLeft = t, this.$headerContainer.paddingRight = t, this.$bodyContainer.paddingLeft = t, this.$bodyContainer.paddingRight = t, this.$contactContainer.paddingLeft = t, this.$contactContainer.paddingRight = t, this.$footerContainer.paddingLeft = t, this.$footerContainer.paddingRight = t, this.$imageContainer.paddingLeft = t, this.$imageContainer.paddingRight = t;
|
|
1240
1245
|
}
|
|
1241
1246
|
}
|
|
1242
|
-
customElements.get("px-page") === void 0 && customElements.define("px-page",
|
|
1243
|
-
const
|
|
1244
|
-
|
|
1245
|
-
class
|
|
1247
|
+
customElements.get("px-page") === void 0 && customElements.define("px-page", et);
|
|
1248
|
+
const I = new CSSStyleSheet();
|
|
1249
|
+
I.replaceSync(X);
|
|
1250
|
+
class it extends HTMLElement {
|
|
1246
1251
|
constructor() {
|
|
1247
1252
|
super(), this.template = () => `
|
|
1248
1253
|
<px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
|
|
@@ -1258,7 +1263,7 @@ class tt extends HTMLElement {
|
|
|
1258
1263
|
<div class="content-wrapper">
|
|
1259
1264
|
<slot name="overlap"></slot>
|
|
1260
1265
|
</div>
|
|
1261
|
-
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [
|
|
1266
|
+
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [I];
|
|
1262
1267
|
}
|
|
1263
1268
|
connectedCallback() {
|
|
1264
1269
|
const t = this.querySelector('[slot="heading"]');
|
|
@@ -1530,10 +1535,10 @@ class tt extends HTMLElement {
|
|
|
1530
1535
|
this.setAttribute("border-side--laptop", t);
|
|
1531
1536
|
}
|
|
1532
1537
|
}
|
|
1533
|
-
customElements.get("px-section") || customElements.define("px-section",
|
|
1534
|
-
const
|
|
1535
|
-
|
|
1536
|
-
const
|
|
1538
|
+
customElements.get("px-section") || customElements.define("px-section", it);
|
|
1539
|
+
const ot = ":host{display:block;--grid-cols: initial;--grid-cols--mobile: initial;--grid-cols--tablet: initial;--grid-cols--laptop: initial;--grid-cols--desktop: initial;--justify-content: initial;--justify-items: initial;--align-content: initial;--align-items: initial}.grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items)}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media only screen and (max-width: 767px){.grid{grid-template-columns:repeat(var(--grid-cols--mobile, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media only screen and (min-width: 48em) and (max-width: 64em){.grid{grid-template-columns:repeat(var(--grid-cols--tablet, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-tablet{justify-content:normal}.justify-content-start-tablet{justify-content:start}.justify-content-end-tablet{justify-content:end}.justify-content-center-tablet{justify-content:center}.justify-content-space-between-tablet{justify-content:space-between}.justify-content-space-around-tablet{justify-content:space-around}.justify-content-space-evenly-tablet{justify-content:space-evenly}.justify-content-stretch-tablet{justify-content:stretch}.justify-items-start-tablet{justify-items:start}.justify-items-end-tablet{justify-items:end}.justify-items-center-tablet{justify-items:center}.justify-items-stretch-tablet{justify-items:stretch}.align-content-normal-tablet{align-content:normal}.align-content-start-tablet{align-content:start}.align-content-end-tablet{align-content:end}.align-content-center-tablet{align-content:center}.align-content-space-between-tablet{align-content:space-between}.align-content-space-around-tablet{align-content:space-around}.align-content-space-evenly-tablet{align-content:space-evenly}.align-content-stretch-tablet{align-content:stretch}.align-items-start-tablet{align-items:start}.align-items-end-tablet{align-items:end}.align-items-center-tablet{align-items:center}.align-items-stretch-tablet{align-items:stretch}}@media only screen and (min-width: 64.0625em){.grid{grid-template-columns:repeat(var(--grid-cols--laptop, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-laptop{justify-content:normal}.justify-content-start-laptop{justify-content:start}.justify-content-end-laptop{justify-content:end}.justify-content-center-laptop{justify-content:center}.justify-content-space-between-laptop{justify-content:space-between}.justify-content-space-around-laptop{justify-content:space-around}.justify-content-space-evenly-laptop{justify-content:space-evenly}.justify-content-stretch-laptop{justify-content:stretch}.justify-items-start-laptop{justify-items:start}.justify-items-end-laptop{justify-items:end}.justify-items-center-laptop{justify-items:center}.justify-items-stretch-laptop{justify-items:stretch}.align-content-normal-laptop{align-content:normal}.align-content-start-laptop{align-content:start}.align-content-end-laptop{align-content:end}.align-content-center-laptop{align-content:center}.align-content-space-between-laptop{align-content:space-between}.align-content-space-around-laptop{align-content:space-around}.align-content-space-evenly-laptop{align-content:space-evenly}.align-content-stretch-laptop{align-content:stretch}.align-items-start-laptop{align-items:start}.align-items-end-laptop{align-items:end}.align-items-center-laptop{align-items:center}.align-items-stretch-laptop{align-items:stretch}}", M = new CSSStyleSheet();
|
|
1540
|
+
M.replaceSync(ot);
|
|
1541
|
+
const rt = [
|
|
1537
1542
|
"1",
|
|
1538
1543
|
"2",
|
|
1539
1544
|
"3",
|
|
@@ -1546,7 +1551,7 @@ const it = [
|
|
|
1546
1551
|
"10",
|
|
1547
1552
|
"11",
|
|
1548
1553
|
"12"
|
|
1549
|
-
],
|
|
1554
|
+
], at = [
|
|
1550
1555
|
"",
|
|
1551
1556
|
"start",
|
|
1552
1557
|
"end",
|
|
@@ -1555,25 +1560,17 @@ const it = [
|
|
|
1555
1560
|
"space-around",
|
|
1556
1561
|
"space-evenly",
|
|
1557
1562
|
"stretch"
|
|
1558
|
-
],
|
|
1563
|
+
], nt = ["", "start", "end", "center", "stretch"], st = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .grid`, dt = "px-spacing", lt = s(
|
|
1564
|
+
"gap",
|
|
1565
|
+
st,
|
|
1566
|
+
C,
|
|
1567
|
+
dt,
|
|
1568
|
+
"--grid-gap"
|
|
1569
|
+
), v = class v extends w {
|
|
1559
1570
|
constructor() {
|
|
1560
|
-
super(
|
|
1561
|
-
B,
|
|
1562
|
-
d(
|
|
1563
|
-
"gap",
|
|
1564
|
-
at,
|
|
1565
|
-
S,
|
|
1566
|
-
nt,
|
|
1567
|
-
"--grid-gap"
|
|
1568
|
-
)
|
|
1569
|
-
), this.template = () => `<div class="grid">
|
|
1571
|
+
super(M, lt), this.template = () => `<div class="grid">
|
|
1570
1572
|
<slot></slot>
|
|
1571
|
-
</div>`, this.
|
|
1572
|
-
this,
|
|
1573
|
-
"gap",
|
|
1574
|
-
(t) => t,
|
|
1575
|
-
"--gap"
|
|
1576
|
-
), this.shadowRoot.innerHTML = this.template();
|
|
1573
|
+
</div>`, this.shadowRoot.innerHTML = this.template();
|
|
1577
1574
|
}
|
|
1578
1575
|
static get observedAttributes() {
|
|
1579
1576
|
return [
|
|
@@ -1605,7 +1602,7 @@ const it = [
|
|
|
1605
1602
|
];
|
|
1606
1603
|
}
|
|
1607
1604
|
connectedCallback() {
|
|
1608
|
-
|
|
1605
|
+
this.gap || (this.gap = "default"), this.alignItems || (this.alignItems = "stretch");
|
|
1609
1606
|
}
|
|
1610
1607
|
attributeChangedCallback(t, i, e) {
|
|
1611
1608
|
if (i !== e)
|
|
@@ -1614,7 +1611,7 @@ const it = [
|
|
|
1614
1611
|
case "grid-cols--mobile":
|
|
1615
1612
|
case "grid-cols--tablet":
|
|
1616
1613
|
case "grid-cols--laptop":
|
|
1617
|
-
this.updateAttribute(t, i, e,
|
|
1614
|
+
this.updateAttribute(t, i, e, rt);
|
|
1618
1615
|
break;
|
|
1619
1616
|
case "justify-content":
|
|
1620
1617
|
case "align-content":
|
|
@@ -1630,7 +1627,7 @@ const it = [
|
|
|
1630
1627
|
t,
|
|
1631
1628
|
i,
|
|
1632
1629
|
e,
|
|
1633
|
-
|
|
1630
|
+
at
|
|
1634
1631
|
);
|
|
1635
1632
|
break;
|
|
1636
1633
|
case "justify-items":
|
|
@@ -1647,7 +1644,7 @@ const it = [
|
|
|
1647
1644
|
t,
|
|
1648
1645
|
i,
|
|
1649
1646
|
e,
|
|
1650
|
-
|
|
1647
|
+
nt
|
|
1651
1648
|
);
|
|
1652
1649
|
break;
|
|
1653
1650
|
default:
|
|
@@ -1846,14 +1843,14 @@ const it = [
|
|
|
1846
1843
|
this.setAttribute("align-items--desktop", t);
|
|
1847
1844
|
}
|
|
1848
1845
|
};
|
|
1849
|
-
|
|
1850
|
-
let h =
|
|
1846
|
+
v.nativeName = "div";
|
|
1847
|
+
let h = v;
|
|
1851
1848
|
customElements.get("px-grid") || customElements.define("px-grid", h);
|
|
1852
|
-
const
|
|
1853
|
-
|
|
1854
|
-
const
|
|
1849
|
+
const B = new CSSStyleSheet();
|
|
1850
|
+
B.replaceSync(G);
|
|
1851
|
+
const y = class y extends w {
|
|
1855
1852
|
constructor() {
|
|
1856
|
-
super(
|
|
1853
|
+
super(B), this.template = () => `<div class="content-header">
|
|
1857
1854
|
<div class="contrast-helper"></div>
|
|
1858
1855
|
<px-section padding-block="l">
|
|
1859
1856
|
<px-grid gap="none">
|
|
@@ -1895,8 +1892,7 @@ const x = class x extends f {
|
|
|
1895
1892
|
];
|
|
1896
1893
|
}
|
|
1897
1894
|
connectedCallback() {
|
|
1898
|
-
|
|
1899
|
-
(t = super.connectedCallback) == null || t.call(this), this.$subtitleSlot && this.$subtitleSlot.setAttribute("variant", "subtitle"), this.$patchDescriptionSlot && (this.$patchDescriptionSlot.localName === "px-p" && this.$patchDescriptionSlot.setAttribute("variant", "default"), (this.$patchDescriptionSlot.localName === "px-p" || this.$patchDescriptionSlot.localName === "px-span") && (this.$patchDescriptionSlot.setAttribute("font-size", "body-l"), this.$patchDescriptionSlot.removeAttribute("font-weight"), this.$patchDescriptionSlot.removeAttribute("color")), this.$patchDescriptionSlot.localName === "px-price" && this.$patchDescriptionSlot.setAttribute("size", "m")), this.createGridding();
|
|
1895
|
+
this.$subtitleSlot && this.$subtitleSlot.setAttribute("variant", "subtitle"), this.$patchDescriptionSlot && (this.$patchDescriptionSlot.localName === "px-p" && this.$patchDescriptionSlot.setAttribute("variant", "default"), (this.$patchDescriptionSlot.localName === "px-p" || this.$patchDescriptionSlot.localName === "px-span") && (this.$patchDescriptionSlot.setAttribute("font-size", "body-l"), this.$patchDescriptionSlot.removeAttribute("font-weight"), this.$patchDescriptionSlot.removeAttribute("color")), this.$patchDescriptionSlot.localName === "px-price" && this.$patchDescriptionSlot.setAttribute("size", "m")), this.createGridding();
|
|
1900
1896
|
}
|
|
1901
1897
|
attributeChangedCallback(t, i, e) {
|
|
1902
1898
|
if (i !== e)
|
|
@@ -1905,7 +1901,7 @@ const x = class x extends f {
|
|
|
1905
1901
|
this.$section.backgroundColor = p.indexOf(e) > 0 ? e : "none";
|
|
1906
1902
|
break;
|
|
1907
1903
|
case "background-gradient":
|
|
1908
|
-
this.$section.gradient =
|
|
1904
|
+
this.$section.gradient = A.indexOf(e) > 0 ? e : "none";
|
|
1909
1905
|
break;
|
|
1910
1906
|
case "background-image":
|
|
1911
1907
|
this.$section.backgroundImage = e;
|
|
@@ -1920,7 +1916,7 @@ const x = class x extends f {
|
|
|
1920
1916
|
this.$section.backgroundImageLaptop = e;
|
|
1921
1917
|
break;
|
|
1922
1918
|
case "background-size":
|
|
1923
|
-
this.$section.backgroundSize =
|
|
1919
|
+
this.$section.backgroundSize = x.indexOf(e) > 0 ? e : "";
|
|
1924
1920
|
break;
|
|
1925
1921
|
case "background-position":
|
|
1926
1922
|
this.$section.backgroundPosition = e;
|
|
@@ -2086,8 +2082,8 @@ const x = class x extends f {
|
|
|
2086
2082
|
t ? this.setAttribute("min-height", "") : this.removeAttribute("min-height");
|
|
2087
2083
|
}
|
|
2088
2084
|
};
|
|
2089
|
-
|
|
2090
|
-
let m =
|
|
2085
|
+
y.nativeName = "div";
|
|
2086
|
+
let m = y;
|
|
2091
2087
|
customElements.get("px-content-header") || customElements.define("px-content-header", m);
|
|
2092
2088
|
export {
|
|
2093
2089
|
m as ContentHeader
|