@oiz/stzh-components 3.0.0-beta1 → 3.0.0-beta2

package/dist/cjs/stzh-cspace.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-cspace.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,ux+FAAux+F;;MCkBhy+F,UAAU;;;IAoBb,SAAI,GAAG;MACb,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;QACrB,OAAO;OACR;MAED,IAAI,IAAI,CAAC,mBAAmB,KAAK,UAAU,EAAE;QAC3C,MAAM,sBAAsB,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC9D,IAAI,CAAC,mBAAmB,KAAK,MAAM;YAC/B,4BAA4B;YAC5B,sKAAsK,CAC3K,CAAC;QAEF,sBAAsB,CAAC,OAAO,CAAC,CAAC,gBAAgB;UAC9CA,oBAAc,CAAC,gBAAgB,EAAE;YAC/B,iBAAiB,EAAE,KAAK;YACxB,gBAAgB,EAAE,KAAK;WAC2B,CAAC,CAAA;SACtD,CAAC,CAAC;OACJ;KACF,CAAA;;;+BA/B8E,QAAQ;;EAKvF,0BAA0B;IACxB,IAAI,CAAC,IAAI,EAAE,CAAC;GACb;EA0BD,kBAAkB;IAChB,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MACtC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjD;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAGD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;KACpB,CAAC;IAEF,QACEC,QAACC,UAAI,+BACsB,OAAO,IAAI,CAAC,iBAAiB,KAAK,SAAS,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,4BAC5E,OAAO,IAAI,CAAC,gBAAgB,KAAK,SAAS,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,IAEjGD,iBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,EACnD,KAAK,EAAE,OAAO,IAEdA,qBAAa,CACT,CACD,EACP;GACH;;;;;;;;;;","names":["setPropsIfNull","h","Host"],"sources":["src/components/stzh-cspace/stzh-cspace.scss?tag=stzh-cspace","src/components/stzh-cspace/stzh-cspace.tsx"],"sourcesContent":["stzh-cspace {\n  @include host;\n  color: inherit;\n  font-weight: inherit;\n  font-family: inherit;\n  letter-spacing: inherit;\n\n  // Remove edge margin\n\n  &[has-hidden-first-margin] > .stzh-cspace {\n    & > :first-child {\n      margin-top: 0 !important;\n    }\n\n    & > .section:first-child > *:first-child {\n      margin-top: 0 !important;\n    }\n  }\n\n  &[has-hidden-last-margin] > .stzh-cspace {\n    & > :last-child {\n      margin-bottom: 0 !important;\n    }\n\n    & > .section:last-child > *:last-child {\n      margin-bottom: 0 !important;\n    }\n  }\n}\n\nstzh-cspace > .stzh-cspace {\n  display: grid;\n  // display: flex;\n  // flex-direction: column;\n  // align-items: flex-start;\n\n  & > .section > h1,\n  & > h1,\n  & > .section > :where(stzh-heading[level=\"1\"]),\n  & > :where(stzh-heading[level=\"1\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > h2,\n  & > h2,\n  & > .section > :where(stzh-heading[level=\"2\"]),\n  & > :where(stzh-heading[level=\"2\"]) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > h3,\n  & > h3,\n  & > .section > :where(stzh-heading[level=\"3\"]),\n  & > :where(stzh-heading[level=\"3\"]) {\n    @include spaceCurve('margin-top', 'tiny');\n    @include spaceCurve('margin-bottom', 'tiny');\n\n    @include mq($from: large) {\n      margin-top: space('xsmall');\n    }\n  }\n\n  & > .section > h4,\n  & > h4,\n  & > .section > :where(stzh-heading[level=\"4\"]),\n  & > :where(stzh-heading[level=\"4\"]) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > p,\n  & > p,\n  & > .section > stzh-text,\n  & > stzh-text,\n  & > .section > ul,\n  & > ul,\n  & > .section > ol,\n  & > ol,\n  & > .section > dl,\n  & > dl,\n  & > .section > stzh-list,\n  & > stzh-list {\n    @include spaceCurve('margin-bottom', 'regular');\n    margin-top: 0;\n  }\n\n  & > .section > :where(stzh-text[curve=\"hero\"]),\n  & > :where(stzh-text[curve=\"hero\"]),\n  & > .section > :where(stzh-heading[curve=\"hero\"]),\n  & > :where(stzh-heading[curve=\"hero\"]) {\n    @include spaceCurve('margin-bottom', 'medium');\n    margin-top: 0;\n  }\n\n  & > .section > :where(stzh-text[curve=\"h1\"]),\n  & > :where(stzh-text[curve=\"h1\"]),\n  & > .section > :where(stzh-heading[curve=\"h1\"]),\n  & > :where(stzh-heading[curve=\"h1\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > :where(stzh-text[curve=\"h2\"]),\n  & > :where(stzh-text[curve=\"h2\"]),\n  & > .section > :where(stzh-heading[curve=\"h2\"]),\n  & > :where(stzh-heading[curve=\"h2\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  & > .section > :where(stzh-text[curve=\"h3\"]),\n  & > :where(stzh-text[curve=\"h3\"]),\n  & > .section > :where(stzh-heading[curve=\"h3\"]),\n  & > :where(stzh-heading[curve=\"h3\"]) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > :where(stzh-text[curve=\"h4\"]),\n  & > :where(stzh-text[curve=\"h4\"]),\n  & > .section > :where(stzh-heading[curve=\"h4\"]),\n  & > :where(stzh-heading[curve=\"h4\"]) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > :where(stzh-text[curve=\"p1\"]),\n  & > :where(stzh-text[curve=\"p1\"]),\n  & > .section > :where(stzh-heading[curve=\"p1\"]),\n  & > :where(stzh-heading[curve=\"p1\"]) {\n    @include spaceCurve('margin-bottom', 'regular');\n    margin-top: 0;\n  }\n\n  & > .section > :where(stzh-text[curve=\"p2\"]),\n  & > :where(stzh-text[curve=\"p2\"]),\n  & > .section > :where(stzh-heading[curve=\"p2\"]),\n  & > :where(stzh-heading[curve=\"p2\"]) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  & > .section > stzh-input, // DONE\n  & > stzh-input, // DONE\n  & > .section > stzh-datepicker, // DONE\n  & > stzh-datepicker, // DONE\n  & > .section > stzh-dropdown, // DONE\n  & > stzh-dropdown, // DONE\n  & > .section > stzh-upload, // DONE\n  & > stzh-upload, // DONE\n  & > .section > stzh-checkbox, // DONE\n  & > stzh-checkbox, // DONE\n  & > .section > stzh-checkboxgroup, // DONE\n  & > stzh-checkboxgroup, // DONE\n  & > .section > stzh-radio, // DONE\n  & > stzh-radio, // DONE\n  & > .section > stzh-radiogroup, // DONE\n  & > stzh-radiogroup { // DONE\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > stzh-message, // DONE\n  & > stzh-message { // DONE\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-contact, // DONE\n  & > stzh-contact, // DONE\n  & > .section > stzh-accordion, // DONE\n  & > stzh-accordion, // DONE\n  & > .section > stzh-anchornav, // DONE\n  & > stzh-anchornav, // DONE\n  & > .section > stzh-audio, // DONE\n  & > stzh-audio, // DONE\n  & > .section > stzh-microsite-teaserlist,\n  & > stzh-microsite-teaserlist,\n  & > .section > stzh-gallery, // DONE\n  & > stzh-gallery, // DONE\n  & > .section > stzh-panorama,\n  & > stzh-panorama,\n  & > .section > stzh-chart,\n  & > stzh-chart,\n  & > .section > stzh-sitemap,\n  & > stzh-sitemap,\n  & > .section > stzh-hr,\n  & > stzh-hr,\n  & > .section > stzh-archivelist,\n  & > stzh-archivelist,\n  & > .section > stzh-figure, // DONE\n  & > stzh-figure, // DONE\n  & > stzh-iframe, // DONE\n  & > .section > stzh-youtube, // DONE\n  & > stzh-youtube, // DONE\n  & > .section > stzh-eventinfo,\n  & > stzh-eventinfo,\n  & > .section > stzh-vbz-ticker,\n  & > stzh-vbz-ticker {\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-textandimage, // DONE\n  & > stzh-textandimage { // DONE\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-section[variant=\"highlight\"], // DONE\n  & > stzh-section[variant=\"highlight\"] { // DONE\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-pagetitle, // DONE\n  & > stzh-pagetitle { // DONE\n    @include spaceCurve('margin-bottom', 'big');\n  }\n\n  & > .section > stzh-richtext[has-hidden-last-margin], // DONE\n  & > stzh-richtext[has-hidden-last-margin] { // DONE\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-cta, // DONE\n  & > stzh-cta { // DONE\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-olmap,\n  & > stzh-olmap {\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-breadcrumb, // DONE\n  & > stzh-breadcrumb { // DONE\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-card,\n  & > stzh-card {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-table, // DONE\n  & > stzh-table, // DONE\n  & > .section > stzh-datatable, // DONE\n  & > stzh-datatable { // DONE\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-pagebottom,\n  & > stzh-pagebottom {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  & > .section > stzh-progressbar,\n  & > stzh-progressbar {\n    @include spaceCurve('margin-top', 'big');\n  }\n\n  & > .section > stzh-pagination, // DONE\n  & > stzh-pagination { // DONE\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-actions, // DONE\n  & > stzh-actions { // DONE\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'big');\n  }\n\n  & > .section > stzh-saptcha, // DONE\n  & > stzh-saptcha { // DONE\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-fieldset, // DONE\n  & > stzh-fieldset { // DONE\n    @include spaceCurve('margin-bottom', 'tiny');\n\n    &[legend] {\n      @include spaceCurve('margin-top', 'regular');\n    }\n  }\n\n  // & > stzh-heading[level=\"4\"] + stzh-datalist,\n  // & > stzh-heading[curve=\"h4\"] + stzh-datalist {\n  //   margin-top: 0;\n  // }\n\n  /* Utility classes for applying spacing curves */\n\n  @each $spaceCurve, $value in $spaceCurves {\n    $defaultSize: map-get($value, 'size');\n    $breakpointSizes: map-get($value, 'sizes');\n\n    & > .section > .cspace-y-curve-#{$spaceCurve},\n    & > .cspace-y-curve-#{$spaceCurve} {\n      @include spaceCurve('margin-top', $spaceCurve);\n      @include spaceCurve('margin-bottom', $spaceCurve);\n    }\n\n    & > .section > .cspace-t-curve-#{$spaceCurve},\n    & > .cspace-t-curve-#{$spaceCurve} {\n      @include spaceCurve('margin-top', $spaceCurve);\n    }\n\n    & > .section > .cspace-b-curve-#{$spaceCurve},\n    & > .cspace-b-curve-#{$spaceCurve} {\n      @include spaceCurve('margin-bottom', $spaceCurve);\n    }\n  }\n\n  /* Utility classes for applying spacing values */\n\n  @each $breakpoint, $size in $breakpoints {\n    @each $space, $value in $spaceSizes {\n      @if $breakpoint {\n        & > .section > .#{$breakpoint}\\:cspace-y-#{$space},\n        & > .#{$breakpoint}\\:cspace-y-#{$space} {\n          margin-top: #{$value};\n          margin-bottom: #{$value};\n        }\n\n        & > .section > .#{$breakpoint}\\:cspace-t-#{$space},\n        & > .#{$breakpoint}\\:cspace-t-#{$space} {\n          margin-top: #{$value};\n        }\n\n        & > .section > .#{$breakpoint}\\:cspace-b-#{$space},\n        & > .#{$breakpoint}\\:cspace-b-#{$space} {\n          margin-bottom: #{$value};\n        }\n      } @else {\n        & > .section > .cspace-y-#{$space},\n        & > .cspace-y-#{$space} {\n          margin-top: #{$value};\n          margin-bottom: #{$value};\n        }\n\n        & > .section > .cspace-t-#{$space},\n        & > .cspace-t-#{$space} {\n          margin-top: #{$value};\n        }\n\n        & > .section > .cspace-b-#{$space},\n        & > .cspace-b-#{$space} {\n          margin-bottom: #{$value};\n        }\n      }\n    }\n  }\n\n  & > .section > .cspace-y-0,\n  & > .cspace-y-0 {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  & > .section > .cspace-t-0,\n  & > .cspace-t-0 {\n    margin-top: 0;\n  }\n\n  & > .section > .cspace-b-0,\n  & > .cspace-b-0 {\n    margin-bottom: 0;\n  }\n\n  @each $breakpoint, $size in $breakpoints {\n    & > .section > .#{$breakpoint}\\:cspace-y-0,\n    & > .#{$breakpoint}\\:cspace-y-0 {\n      margin-top: 0;\n      margin-bottom: 0;\n    }\n\n    & > .section > .#{$breakpoint}\\:cspace-t-0,\n    & > .#{$breakpoint}\\:cspace-t-0 {\n      margin-top: 0;\n    }\n\n    & > .section > .#{$breakpoint}\\:cspace-b-0,\n    & > .#{$breakpoint}\\:cspace-b-0 {\n      margin-bottom: 0;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-cspace\",\n  styleUrl: \"stzh-cspace.scss\"\n})\nexport class StzhCspace {\n  /** Whether first top margin of first child component should be set to 0. */\n  @Prop({ reflect: true }) removeFirstMargin: boolean;\n\n  /** Whether last bottom margin of last child component should be set to 0. */\n  @Prop({ reflect: true }) removeLastMargin: boolean;\n\n  /** Whether removing first/last margin should be automatically prevented for nested cspace/richtext */\n  @Prop({ reflect: true }) preventRemoveNested: \"direct\" | \"deep\" | \"disabled\" = \"direct\";\n\n  @Element() element: HTMLStzhCspaceElement;\n\n  @Watch(\"preventRemoveNested\")\n  preventRemoveNestedWatcher() {\n    this.init();\n  }\n\n  private observer: MutationObserver;\n  private rootElement: HTMLElement;\n\n  private init = () => {\n    if (!this.rootElement) {\n      return;\n    }\n\n    if (this.preventRemoveNested !== \"disabled\") {\n      const nestedCspaceOrRichtext = this.rootElement.querySelectorAll(\n        this.preventRemoveNested === \"deep\"\n          ? \"stzh-cspace, stzh-richtext\"\n          : \":scope > stzh-cspace, :scope > .section > stzh-cspace, stzh-show > stzh-cspace, :scope > stzh-richtext, :scope > .section > stzh-richtext, stzh-show > stzh-richtext\"\n      );\n\n      nestedCspaceOrRichtext.forEach((cspaceOrRichtext) => {  \n        setPropsIfNull(cspaceOrRichtext, {\n          removeFirstMargin: false,\n          removeLastMargin: false,\n        } as HTMLStzhCspaceElement | HTMLStzhRichtextElement)\n      });\n    }\n  }\n\n  componentDidRender() {\n    this.init();\n\n    this.observer.observe(this.rootElement, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  connectedCallback() {\n    this.observer = new MutationObserver(this.init);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n\n  render() {\n    const classes = {\n      \"stzh-cspace\": true\n    };\n\n    return (\n      <Host\n        has-hidden-first-margin={typeof this.removeFirstMargin === \"boolean\" ? this.removeFirstMargin : true}\n        has-hidden-last-margin={typeof this.removeLastMargin === \"boolean\" ? this.removeLastMargin : true}\n      >\n        <div\n          ref={(el) => (this.rootElement = el as HTMLElement)}\n          class={classes}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-cspace.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,kp/FAAkp/F;;MCkB3p/F,UAAU;;;IAoBb,SAAI,GAAG;MACb,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;QACrB,OAAO;OACR;MAED,IAAI,IAAI,CAAC,mBAAmB,KAAK,UAAU,EAAE;QAC3C,MAAM,sBAAsB,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC9D,IAAI,CAAC,mBAAmB,KAAK,MAAM;YAC/B,4BAA4B;YAC5B,sKAAsK,CAC3K,CAAC;QAEF,sBAAsB,CAAC,OAAO,CAAC,CAAC,gBAAgB;UAC9CA,oBAAc,CAAC,gBAAgB,EAAE;YAC/B,iBAAiB,EAAE,KAAK;YACxB,gBAAgB,EAAE,KAAK;WAC2B,CAAC,CAAA;SACtD,CAAC,CAAC;OACJ;KACF,CAAA;;;+BA/B8E,QAAQ;;EAKvF,0BAA0B;IACxB,IAAI,CAAC,IAAI,EAAE,CAAC;GACb;EA0BD,kBAAkB;IAChB,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MACtC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjD;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAGD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;KACpB,CAAC;IAEF,QACEC,QAACC,UAAI,+BACsB,OAAO,IAAI,CAAC,iBAAiB,KAAK,SAAS,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,4BAC5E,OAAO,IAAI,CAAC,gBAAgB,KAAK,SAAS,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,IAEjGD,iBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,EACnD,KAAK,EAAE,OAAO,IAEdA,qBAAa,CACT,CACD,EACP;GACH;;;;;;;;;;","names":["setPropsIfNull","h","Host"],"sources":["src/components/stzh-cspace/stzh-cspace.scss?tag=stzh-cspace","src/components/stzh-cspace/stzh-cspace.tsx"],"sourcesContent":["stzh-cspace {\n  @include host;\n  color: inherit;\n  font-weight: inherit;\n  font-family: inherit;\n  letter-spacing: inherit;\n\n  // Remove edge margin\n\n  &[has-hidden-first-margin] > .stzh-cspace {\n    & > :first-child {\n      margin-top: 0 !important;\n    }\n\n    & > .section:first-child > *:first-child {\n      margin-top: 0 !important;\n    }\n  }\n\n  &[has-hidden-last-margin] > .stzh-cspace {\n    & > :last-child {\n      margin-bottom: 0 !important;\n    }\n\n    & > .section:last-child > *:last-child {\n      margin-bottom: 0 !important;\n    }\n  }\n}\n\nstzh-cspace > .stzh-cspace {\n  display: grid;\n  // display: flex;\n  // flex-direction: column;\n  // align-items: flex-start;\n\n  & > .section > h1,\n  & > h1,\n  & > .section > :where(stzh-heading[level=\"1\"]),\n  & > :where(stzh-heading[level=\"1\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > h2,\n  & > h2,\n  & > .section > :where(stzh-heading[level=\"2\"]),\n  & > :where(stzh-heading[level=\"2\"]) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > h3,\n  & > h3,\n  & > .section > :where(stzh-heading[level=\"3\"]),\n  & > :where(stzh-heading[level=\"3\"]) {\n    @include spaceCurve('margin-top', 'tiny');\n    @include spaceCurve('margin-bottom', 'tiny');\n\n    @include mq($from: large) {\n      margin-top: space('xsmall');\n    }\n  }\n\n  & > .section > h4,\n  & > h4,\n  & > .section > :where(stzh-heading[level=\"4\"]),\n  & > :where(stzh-heading[level=\"4\"]) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > p,\n  & > p,\n  & > .section > stzh-text,\n  & > stzh-text,\n  & > .section > ul,\n  & > ul,\n  & > .section > ol,\n  & > ol,\n  & > .section > dl,\n  & > dl,\n  & > .section > stzh-list,\n  & > stzh-list {\n    @include spaceCurve('margin-bottom', 'regular');\n    margin-top: 0;\n  }\n\n  & > .section > :where(stzh-text[curve=\"hero\"]),\n  & > :where(stzh-text[curve=\"hero\"]),\n  & > .section > :where(stzh-heading[curve=\"hero\"]),\n  & > :where(stzh-heading[curve=\"hero\"]) {\n    @include spaceCurve('margin-bottom', 'medium');\n    margin-top: 0;\n  }\n\n  & > .section > :where(stzh-text[curve=\"h1\"]),\n  & > :where(stzh-text[curve=\"h1\"]),\n  & > .section > :where(stzh-heading[curve=\"h1\"]),\n  & > :where(stzh-heading[curve=\"h1\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > :where(stzh-text[curve=\"h2\"]),\n  & > :where(stzh-text[curve=\"h2\"]),\n  & > .section > :where(stzh-heading[curve=\"h2\"]),\n  & > :where(stzh-heading[curve=\"h2\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  & > .section > :where(stzh-text[curve=\"h3\"]),\n  & > :where(stzh-text[curve=\"h3\"]),\n  & > .section > :where(stzh-heading[curve=\"h3\"]),\n  & > :where(stzh-heading[curve=\"h3\"]) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > :where(stzh-text[curve=\"h4\"]),\n  & > :where(stzh-text[curve=\"h4\"]),\n  & > .section > :where(stzh-heading[curve=\"h4\"]),\n  & > :where(stzh-heading[curve=\"h4\"]) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > :where(stzh-text[curve=\"p1\"]),\n  & > :where(stzh-text[curve=\"p1\"]),\n  & > .section > :where(stzh-heading[curve=\"p1\"]),\n  & > :where(stzh-heading[curve=\"p1\"]) {\n    @include spaceCurve('margin-bottom', 'regular');\n    margin-top: 0;\n  }\n\n  & > .section > :where(stzh-text[curve=\"p2\"]),\n  & > :where(stzh-text[curve=\"p2\"]),\n  & > .section > :where(stzh-heading[curve=\"p2\"]),\n  & > :where(stzh-heading[curve=\"p2\"]) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  & > .section > stzh-input, // DONE\n  & > stzh-input, // DONE\n  & > .section > stzh-datepicker, // DONE\n  & > stzh-datepicker, // DONE\n  & > .section > stzh-dropdown, // DONE\n  & > stzh-dropdown, // DONE\n  & > .section > stzh-upload, // DONE\n  & > stzh-upload, // DONE\n  & > .section > stzh-checkbox, // DONE\n  & > stzh-checkbox, // DONE\n  & > .section > stzh-checkboxgroup, // DONE\n  & > stzh-checkboxgroup, // DONE\n  & > .section > stzh-radio, // DONE\n  & > stzh-radio, // DONE\n  & > .section > stzh-radiogroup, // DONE\n  & > stzh-radiogroup { // DONE\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > stzh-message, // DONE\n  & > stzh-message { // DONE\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-contact, // DONE\n  & > stzh-contact, // DONE\n  & > .section > stzh-accordion, // DONE\n  & > stzh-accordion, // DONE\n  & > .section > stzh-anchornav, // DONE\n  & > stzh-anchornav, // DONE\n  & > .section > stzh-audio, // DONE\n  & > stzh-audio, // DONE\n  & > .section > stzh-microsite-teaserlist,\n  & > stzh-microsite-teaserlist,\n  & > .section > stzh-gallery, // DONE\n  & > stzh-gallery, // DONE\n  & > .section > stzh-panorama,\n  & > stzh-panorama,\n  & > .section > stzh-chart,\n  & > stzh-chart,\n  & > .section > stzh-sitemap,\n  & > stzh-sitemap,\n  & > .section > stzh-hr,\n  & > stzh-hr,\n  & > .section > stzh-archivelist,\n  & > stzh-archivelist,\n  & > .section > stzh-figure, // DONE\n  & > stzh-figure, // DONE\n  & > stzh-iframe, // DONE\n  & > .section > stzh-youtube, // DONE\n  & > stzh-youtube, // DONE\n  & > .section > stzh-eventinfo,\n  & > stzh-eventinfo,\n  & > .section > stzh-vbz-ticker,\n  & > stzh-vbz-ticker {\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-textandimage, // DONE\n  & > stzh-textandimage { // DONE\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-section[variant=\"highlight\"], // DONE\n  & > stzh-section[variant=\"highlight\"] { // DONE\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-pagetitle, // DONE\n  & > stzh-pagetitle { // DONE\n    @include spaceCurve('margin-bottom', 'big');\n  }\n\n  & > .section > stzh-richtext[has-hidden-last-margin], // DONE\n  & > stzh-richtext[has-hidden-last-margin] { // DONE\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-cta, // DONE\n  & > stzh-cta { // DONE\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-olmap,\n  & > stzh-olmap {\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-breadcrumb, // DONE\n  & > stzh-breadcrumb { // DONE\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-card,\n  & > stzh-card {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-table, // DONE\n  & > stzh-table, // DONE\n  & > .section > stzh-datatable, // DONE\n  & > stzh-datatable { // DONE\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-pagebottom,\n  & > stzh-pagebottom {\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-progressbar,\n  & > stzh-progressbar {\n    @include spaceCurve('margin-top', 'big');\n  }\n\n  & > .section > stzh-pagination, // DONE\n  & > stzh-pagination { // DONE\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-actions, // DONE\n  & > stzh-actions { // DONE\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'big');\n  }\n\n  & > .section > stzh-saptcha, // DONE\n  & > stzh-saptcha { // DONE\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-fieldset, // DONE\n  & > stzh-fieldset { // DONE\n    @include spaceCurve('margin-bottom', 'tiny');\n\n    &[legend] {\n      @include spaceCurve('margin-top', 'regular');\n    }\n  }\n\n  // & > stzh-heading[level=\"4\"] + stzh-datalist,\n  // & > stzh-heading[curve=\"h4\"] + stzh-datalist {\n  //   margin-top: 0;\n  // }\n\n  /* Utility classes for applying spacing curves */\n\n  @each $spaceCurve, $value in $spaceCurves {\n    $defaultSize: map-get($value, 'size');\n    $breakpointSizes: map-get($value, 'sizes');\n\n    & > .section > .cspace-y-curve-#{$spaceCurve},\n    & > .cspace-y-curve-#{$spaceCurve} {\n      @include spaceCurve('margin-top', $spaceCurve);\n      @include spaceCurve('margin-bottom', $spaceCurve);\n    }\n\n    & > .section > .cspace-t-curve-#{$spaceCurve},\n    & > .cspace-t-curve-#{$spaceCurve} {\n      @include spaceCurve('margin-top', $spaceCurve);\n    }\n\n    & > .section > .cspace-b-curve-#{$spaceCurve},\n    & > .cspace-b-curve-#{$spaceCurve} {\n      @include spaceCurve('margin-bottom', $spaceCurve);\n    }\n  }\n\n  /* Utility classes for applying spacing values */\n\n  @each $breakpoint, $size in $breakpoints {\n    @each $space, $value in $spaceSizes {\n      @if $breakpoint {\n        & > .section > .#{$breakpoint}\\:cspace-y-#{$space},\n        & > .#{$breakpoint}\\:cspace-y-#{$space} {\n          margin-top: #{$value};\n          margin-bottom: #{$value};\n        }\n\n        & > .section > .#{$breakpoint}\\:cspace-t-#{$space},\n        & > .#{$breakpoint}\\:cspace-t-#{$space} {\n          margin-top: #{$value};\n        }\n\n        & > .section > .#{$breakpoint}\\:cspace-b-#{$space},\n        & > .#{$breakpoint}\\:cspace-b-#{$space} {\n          margin-bottom: #{$value};\n        }\n      } @else {\n        & > .section > .cspace-y-#{$space},\n        & > .cspace-y-#{$space} {\n          margin-top: #{$value};\n          margin-bottom: #{$value};\n        }\n\n        & > .section > .cspace-t-#{$space},\n        & > .cspace-t-#{$space} {\n          margin-top: #{$value};\n        }\n\n        & > .section > .cspace-b-#{$space},\n        & > .cspace-b-#{$space} {\n          margin-bottom: #{$value};\n        }\n      }\n    }\n  }\n\n  & > .section > .cspace-y-0,\n  & > .cspace-y-0 {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  & > .section > .cspace-t-0,\n  & > .cspace-t-0 {\n    margin-top: 0;\n  }\n\n  & > .section > .cspace-b-0,\n  & > .cspace-b-0 {\n    margin-bottom: 0;\n  }\n\n  @each $breakpoint, $size in $breakpoints {\n    & > .section > .#{$breakpoint}\\:cspace-y-0,\n    & > .#{$breakpoint}\\:cspace-y-0 {\n      margin-top: 0;\n      margin-bottom: 0;\n    }\n\n    & > .section > .#{$breakpoint}\\:cspace-t-0,\n    & > .#{$breakpoint}\\:cspace-t-0 {\n      margin-top: 0;\n    }\n\n    & > .section > .#{$breakpoint}\\:cspace-b-0,\n    & > .#{$breakpoint}\\:cspace-b-0 {\n      margin-bottom: 0;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-cspace\",\n  styleUrl: \"stzh-cspace.scss\"\n})\nexport class StzhCspace {\n  /** Whether first top margin of first child component should be set to 0. */\n  @Prop({ reflect: true }) removeFirstMargin: boolean;\n\n  /** Whether last bottom margin of last child component should be set to 0. */\n  @Prop({ reflect: true }) removeLastMargin: boolean;\n\n  /** Whether removing first/last margin should be automatically prevented for nested cspace/richtext */\n  @Prop({ reflect: true }) preventRemoveNested: \"direct\" | \"deep\" | \"disabled\" = \"direct\";\n\n  @Element() element: HTMLStzhCspaceElement;\n\n  @Watch(\"preventRemoveNested\")\n  preventRemoveNestedWatcher() {\n    this.init();\n  }\n\n  private observer: MutationObserver;\n  private rootElement: HTMLElement;\n\n  private init = () => {\n    if (!this.rootElement) {\n      return;\n    }\n\n    if (this.preventRemoveNested !== \"disabled\") {\n      const nestedCspaceOrRichtext = this.rootElement.querySelectorAll(\n        this.preventRemoveNested === \"deep\"\n          ? \"stzh-cspace, stzh-richtext\"\n          : \":scope > stzh-cspace, :scope > .section > stzh-cspace, stzh-show > stzh-cspace, :scope > stzh-richtext, :scope > .section > stzh-richtext, stzh-show > stzh-richtext\"\n      );\n\n      nestedCspaceOrRichtext.forEach((cspaceOrRichtext) => {  \n        setPropsIfNull(cspaceOrRichtext, {\n          removeFirstMargin: false,\n          removeLastMargin: false,\n        } as HTMLStzhCspaceElement | HTMLStzhRichtextElement)\n      });\n    }\n  }\n\n  componentDidRender() {\n    this.init();\n\n    this.observer.observe(this.rootElement, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  connectedCallback() {\n    this.observer = new MutationObserver(this.init);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n\n  render() {\n    const classes = {\n      \"stzh-cspace\": true\n    };\n\n    return (\n      <Host\n        has-hidden-first-margin={typeof this.removeFirstMargin === \"boolean\" ? this.removeFirstMargin : true}\n        has-hidden-last-margin={typeof this.removeLastMargin === \"boolean\" ? this.removeLastMargin : true}\n      >\n        <div\n          ref={(el) => (this.rootElement = el as HTMLElement)}\n          class={classes}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/stzh-cta.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-92254d32.js');
 const utils = require('./utils-d0fff87f.js');
 require('./string-utils-5dd70320.js');
 
-const stzhCtaCss = ".sc-stzh-cta-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-cta-h{display:none}.sc-stzh-cta-h *.sc-stzh-cta,.sc-stzh-cta-h *.sc-stzh-cta::before,.sc-stzh-cta-h *.sc-stzh-cta::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-cta-h .has-focus.sc-stzh-cta{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-cta-h .stzh-fylingfocus-focused.sc-stzh-cta{outline-style:none !important}.sc-stzh-cta-h .stzh-fylingfocus-focused.sc-stzh-cta::-moz-focus-inner{border:0 !important}.sc-stzh-cta-h{--stzh-flyingfocus-color:var(--stzh-color-white);--background-color:var(--stzh-cta-background-color);--heading-color:var(--stzh-color-primary70);--lead-color:var(--stzh-color-white);--sticky-background-color:var(--background-color);--button-color:var(--stzh-color-white);--button-background-color:var(--stzh-color-primary70);--button-border-radius:var(--stzh-button-border-radius);--hover-button-color:var(--stzh-color-white);--hover-button-background-color:var(--stzh-color-secondary60);--stuck-background-color:var(--stzh-color-grey10);--stuck-heading-color:var(--stzh-color-primary70);--stuck-lead-color:var(--stzh-base-color);--stuck-sticky-background-color:var(--background-color);--grid-template-areas:var(\n    --stzh-cta-grid-template-areas,\n    \"cta cta cta cta\"\n  );--grid-template-columns:var(\n    --stzh-cta-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 900px){.sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );--grid-template-columns:var(\n      --stzh-cta-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){.sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );--grid-template-columns:var(\n      --stzh-cta-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}[size=small].sc-stzh-cta-h{--button-background-color:transparent;--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--stuck-background-color:var(--background-color)}@media screen and (min-width: 600px){[size=small].sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-small-grid-template-areas,\n      \"cta cta cta cta\"\n    )}}@media screen and (min-width: 900px){[size=small].sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-small-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    )}}@keyframes stzh-cta-effect{0%,20%,50%,80%,100%{transform:translateX(0)}40%{transform:translateX(-0.5rem)}60%{transform:translateX(-0.25rem)}}.stzh-cta.sc-stzh-cta{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 600px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-cta__wrapper.sc-stzh-cta{grid-area:cta;background-color:var(--background-color);transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])){background-color:var(--stuck-background-color)}.stzh-cta__heading.sc-stzh-cta,.stzh-cta__lead.sc-stzh-cta{transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xlarge);margin-right:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing);color:var(--heading-color)}@media screen and (min-width: 600px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])) .stzh-cta__heading.sc-stzh-cta{color:var(--stuck-heading-color)}.stzh-cta__lead.sc-stzh-cta{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));color:var(--lead-color)}@media screen and (min-width: 900px){.stzh-cta__lead.sc-stzh-cta{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-bottom:var(--stzh-space-xxlarge)}}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])) .stzh-cta__lead.sc-stzh-cta{color:var(--stuck-lead-color)}.stzh-cta__button.sc-stzh-cta{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);width:100%;display:flex;align-items:center;justify-content:space-between;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;text-decoration:none;border-radius:var(--button-border-radius);color:var(--button-color);background-color:var(--button-background-color);gap:var(--stzh-space-xsmall);transition-property:width, height, min-height, color, background-color, font-size, padding;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-cta__button.sc-stzh-cta{width:auto}}.stzh-cta__button.sc-stzh-cta:hover{color:var(--hover-button-color);background-color:var(--hover-button-background-color)}.stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}@media screen and (min-width: 900px){.stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}.stzh-cta__button-text.sc-stzh-cta{display:block}.stzh-cta__button-icon.sc-stzh-cta{--size:var(--stzh-icon-size-medium)}.stzh-cta__button.sc-stzh-cta:hover .stzh-cta__button-icon.sc-stzh-cta{animation:stzh-cta-effect 1s}.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--padding-top:var(--stzh-space-large);--padding-bottom:var(--stzh-space-large);--background-color:var(--sticky-background-color);--stuck-background-color:var(--stuck-sticky-background-color);--stuck-padding-left:0px;--stuck-padding-right:0px;display:block}@media screen and (min-width: 900px){.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__sticky.sc-stzh-cta{--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__sticky.sc-stzh-cta{--padding-right:var(--stzh-space-xxxlarge)}}.stzh-cta__buttons.sc-stzh-cta{display:flex;gap:var(--stzh-space-medium)}.stzh-cta--has-lead.sc-stzh-cta .stzh-cta__heading.sc-stzh-cta{margin-bottom:0}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{padding:var(--stzh-space-xsmall) var(--stzh-space-xlarge);min-height:var(--stzh-form-input-height)}@media screen and (max-width: 599px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__button-icon.sc-stzh-cta{display:none}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{min-height:var(--stzh-form-input-small-height)}@media screen and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{min-height:var(--stzh-form-input-height)}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{margin-top:calc(var(--padding-top) / -1);margin-bottom:calc(var(--padding-bottom) / -1)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{width:100%;max-width:100%;gap:var(--stzh-space-medium)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button.is-placeholder.sc-stzh-cta{width:auto;max-width:none;visibility:hidden;position:absolute;pointer-events:none}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta:not(.is-placeholder){width:var(--button-width, auto)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button-icon.sc-stzh-cta{--size:var(--stzh-icon-size-large)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxlarge);--padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xlarge);--padding-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-cta--is-not-loaded.sc-stzh-cta{visibility:hidden}.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__heading.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__lead.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{transition-duration:0ms}";
+const stzhCtaCss = ".sc-stzh-cta-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-cta-h{display:none}.sc-stzh-cta-h *.sc-stzh-cta,.sc-stzh-cta-h *.sc-stzh-cta::before,.sc-stzh-cta-h *.sc-stzh-cta::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-cta-h .has-focus.sc-stzh-cta{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-cta-h .stzh-fylingfocus-focused.sc-stzh-cta{outline-style:none !important}.sc-stzh-cta-h .stzh-fylingfocus-focused.sc-stzh-cta::-moz-focus-inner{border:0 !important}.sc-stzh-cta-h{--stzh-flyingfocus-color:var(--stzh-color-white);--background-color:var(--stzh-cta-background-color);--heading-color:var(--stzh-color-primary70);--lead-color:var(--stzh-color-white);--sticky-background-color:var(--background-color);--button-color:var(--stzh-color-white);--button-background-color:var(--stzh-color-primary70);--button-border-radius:var(--stzh-button-border-radius);--hover-button-color:var(--stzh-color-white);--hover-button-background-color:var(--stzh-color-secondary60);--stuck-background-color:var(--stzh-color-grey10);--stuck-heading-color:var(--stzh-color-primary70);--stuck-lead-color:var(--stzh-base-color);--stuck-sticky-background-color:var(--background-color);--grid-template-areas:var(\n    --stzh-cta-grid-template-areas,\n    \"cta cta cta cta\"\n  );--grid-template-columns:var(\n    --stzh-cta-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 900px){.sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );--grid-template-columns:var(\n      --stzh-cta-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){.sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );--grid-template-columns:var(\n      --stzh-cta-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}[size=small].sc-stzh-cta-h{--button-background-color:transparent;--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--stuck-background-color:var(--background-color)}@media screen and (min-width: 600px){[size=small].sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-small-grid-template-areas,\n      \"cta cta cta cta\"\n    )}}@media screen and (min-width: 900px){[size=small].sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-small-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    )}}@keyframes stzh-cta-effect{0%,20%,50%,80%,100%{transform:translateX(0)}40%{transform:translateX(-0.5rem)}60%{transform:translateX(-0.25rem)}}.stzh-cta.sc-stzh-cta{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 600px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-cta__wrapper.sc-stzh-cta{grid-area:cta;background-color:var(--background-color);transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])){background-color:var(--stuck-background-color)}.stzh-cta__heading.sc-stzh-cta,.stzh-cta__lead.sc-stzh-cta{transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xlarge);margin-right:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing);color:var(--heading-color)}@media screen and (min-width: 600px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])) .stzh-cta__heading.sc-stzh-cta{color:var(--stuck-heading-color)}.stzh-cta__lead.sc-stzh-cta{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));color:var(--lead-color)}@media screen and (min-width: 900px){.stzh-cta__lead.sc-stzh-cta{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-bottom:var(--stzh-space-xxlarge)}}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])) .stzh-cta__lead.sc-stzh-cta{color:var(--stuck-lead-color)}.stzh-cta__button.sc-stzh-cta{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);width:100%;display:flex;align-items:center;justify-content:space-between;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;text-decoration:none;border-radius:var(--button-border-radius);color:var(--button-color);background-color:var(--button-background-color);gap:var(--stzh-space-xsmall);transition-property:width, height, min-height, color, background-color, font-size, padding;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-cta__button.sc-stzh-cta{width:auto}}.stzh-cta__button.sc-stzh-cta:hover{color:var(--hover-button-color);background-color:var(--hover-button-background-color)}.stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}@media screen and (min-width: 900px){.stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}.stzh-cta__button-text.sc-stzh-cta{display:block}.stzh-cta__button-icon.sc-stzh-cta{--size:var(--stzh-icon-size-medium)}.stzh-cta__button.sc-stzh-cta:hover .stzh-cta__button-icon.sc-stzh-cta{animation:stzh-cta-effect 1s}.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--padding-top:var(--stzh-space-large);--padding-bottom:var(--stzh-space-large);--background-color:var(--sticky-background-color);--stuck-background-color:var(--stuck-sticky-background-color);--stuck-padding-left:0px;--stuck-padding-right:0px;display:block}@media screen and (min-width: 900px){.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__sticky.sc-stzh-cta{--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__sticky.sc-stzh-cta{--padding-right:var(--stzh-space-xxxlarge)}}.stzh-cta__buttons.sc-stzh-cta{display:flex;gap:var(--stzh-space-medium)}.stzh-cta--has-lead.sc-stzh-cta .stzh-cta__heading.sc-stzh-cta{margin-bottom:0}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{padding:var(--stzh-space-xsmall) var(--stzh-space-xlarge);min-height:var(--stzh-form-input-height)}@media screen and (max-width: 599px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__button-icon.sc-stzh-cta{display:none}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{min-height:var(--stzh-form-input-small-height)}@media screen and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{min-height:var(--stzh-form-input-height)}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{margin-top:calc(var(--padding-top) / -1);margin-bottom:calc(var(--padding-bottom) / -1)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{width:100%;max-width:100%;gap:var(--stzh-space-medium)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button.is-placeholder.sc-stzh-cta{width:auto;max-width:none;visibility:hidden;position:absolute;pointer-events:none}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta:not(.is-placeholder){width:var(--button-width, auto)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button-icon.sc-stzh-cta{--size:var(--stzh-icon-size-large)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxlarge);--padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xlarge);--padding-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-cta--is-not-loaded.sc-stzh-cta{visibility:hidden}.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__heading.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__lead.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{transition-duration:0ms}";
 
 var counter = 0;
 const StzhCta = class {

package/dist/cjs/stzh-cta.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-cta.entry.cjs.js","mappings":"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","names":["h","hasSlot","Host"],"sources":["src/components/stzh-cta/stzh-cta.scss?tag=stzh-cta&encapsulation=scoped","src/components/stzh-cta/stzh-cta.tsx"],"sourcesContent":[":host {\n  --stzh-flyingfocus-color: #{$colorWhite};\n\n  --background-color: #{$ctaBackgroundColor};\n  --heading-color: #{$colorPrimary70};\n  --lead-color: #{$colorWhite};\n  --sticky-background-color: var(--background-color);\n  --button-color: #{$colorWhite};\n  --button-background-color: #{$colorPrimary70};\n  --button-border-radius: #{$buttonBorderRadius};\n\n  --hover-button-color: #{$colorWhite};\n  --hover-button-background-color: #{$colorSecondary60};\n\n  --stuck-background-color: #{$colorGrey10};\n  --stuck-heading-color: #{$colorPrimary70};\n  --stuck-lead-color: #{$baseColor};\n  --stuck-sticky-background-color: var(--background-color);\n\n  --grid-template-areas: var(\n    --stzh-cta-grid-template-areas,\n    \"cta cta cta cta\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-cta-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-cta-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas: var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-cta-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    );\n  }\n\n  &[size=\"small\"] {\n    --button-background-color: transparent;\n\n    --hover-button-color: var(--button-color);\n    --hover-button-background-color: var(--button-background-color);\n\n    --stuck-background-color: var(--background-color);\n\n    @include mq($from: small) {\n      --grid-template-areas: var(\n        --stzh-cta-small-grid-template-areas,\n        \"cta cta cta cta\"\n      );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(\n        --stzh-cta-small-grid-template-areas,\n        \"cta cta cta cta cta cta cta cta\"\n      );\n    }\n  }\n}\n\n@keyframes stzh-cta-effect {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n.stzh-cta {\n  @include font('heavy');\n  @include gridGutter;\n  display: grid;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__wrapper {\n    grid-area: cta;\n    background-color: var(--background-color);\n    transition-property: background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) {\n    background-color: var(--stuck-background-color);\n  }\n\n  &__heading,\n  &__lead {\n    transition-property: color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    &:not(:empty) {\n      @include spaceCurve('margin-left', 'medium');\n      @include spaceCurve('margin-right', 'medium');\n      @include spaceCurve('margin-bottom', 'medium');\n\n      @include mq($from: small) {\n        margin-bottom: space('xxlarge');\n      }\n\n      @include mq($from: medium) {\n        margin-bottom: space('xxxlarge');\n      }\n\n      @include mq($from: large) {\n        margin-bottom: space('xxxxlarge');\n      }\n    }\n  }\n\n  &__heading {\n    @include fontCurve('h2', 'heading');\n    color: var(--heading-color);\n  }\n\n  &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) &__heading {\n    color: var(--stuck-heading-color);\n  }\n\n  &__lead {\n    @include fontCurve('p2');\n    color: var(--lead-color);\n\n    &:not(:empty) {\n      @include spaceCurve('padding-top', 'regular');\n      @include spaceCurve('padding-bottom', 'regular');\n    }\n  }\n\n  &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) &__lead {\n    color: var(--stuck-lead-color);\n  }\n\n  &__button {\n    @include font('heavy');\n    @include fontSize('centi');\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    appearance: none;\n    border: none;\n    text-decoration: none;\n    border-radius: var(--button-border-radius);\n    color: var(--button-color);\n    background-color: var(--button-background-color);\n    gap: space('xsmall');\n    transition-property: width, height, min-height, color, background-color, font-size, padding;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @include mq($from: small) {\n      width: auto;\n    }\n\n    &:hover {\n      color: var(--hover-button-color);\n      background-color: var(--hover-button-background-color);\n    }\n  }\n\n  &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button {\n    @include fontSize('milli');\n\n    @include mq($from: medium) {\n      @include fontSize('centi');\n    }\n  }\n\n  &__button-text {\n    display: block;\n  }\n\n  &__button-icon {\n    --size: #{iconSize('medium')};\n  }\n\n  &__button:hover &__button-icon {\n\t\tanimation: stzh-cta-effect 1s;\n  }\n\n  &__sticky {\n    @include spaceCurve('--padding-left', 'medium');\n    @include spaceCurve('--padding-right', 'medium');\n    --padding-top: #{space('large')};\n    --padding-bottom: #{space('large')};\n    --background-color: var(--sticky-background-color);\n    --stuck-background-color: var(--stuck-sticky-background-color);\n    --stuck-padding-left: 0px;\n    --stuck-padding-right: 0px;\n\n    display: block;\n  }\n\n  &__buttons {\n    display: flex;\n    gap: space('medium');\n  }\n\n  /* Has lead variant */\n\n  &--has-lead &__heading {\n    margin-bottom: 0;\n  }\n\n  /* Default variant; has heading, lead or multiple buttons */\n\n  &--size-default &__wrapper {\n    @include spaceCurve('padding-top', 'large');\n    @include spaceCurve('padding-bottom', 'large');\n  }\n\n  &--size-default &__button {\n    padding: space('xsmall') space('xlarge');\n    min-height: $formInputHeight;\n  }\n\n  &--size-default &__button-icon {\n    @include mq($to: small) {\n      display: none;\n    }\n  }\n\n  &--size-default &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button {\n    min-height: $formInputHeightSmall;\n\n    @include mq($from: medium) {\n      min-height: $formInputHeight;\n    }\n  }\n\n  &--size-default &__sticky {\n    margin-top: calc(var(--padding-top) / -1);\n    margin-bottom: calc(var(--padding-bottom) / -1);\n  }\n\n  /* Small variant; has no heading, lead or multiple buttons */\n\n  &--size-small &__button {\n    width: 100%;\n    max-width: 100%;\n    gap: space('medium');\n\n    &.is-placeholder {\n      width: auto;\n      max-width: none;\n      visibility: hidden;\n      position: absolute;\n      pointer-events: none;\n    }\n  }\n\n  &--size-small &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button:not(.is-placeholder) {\n    width: var(--button-width, auto);\n  }\n  \n  &--size-small &__button-icon {\n    --size: #{iconSize('large')};\n  }\n\n  &--size-small &__sticky {\n    @include spaceCurve('--padding-top', 'large');\n    @include spaceCurve('--padding-bottom', 'large');\n\n    &[is-stuck]:not([is-stuck=\"false\"]) {\n      @include spaceCurve('--padding-top', 'medium');\n      @include spaceCurve('--padding-bottom', 'medium');\n    }\n  }\n\n  /* Not loaded */\n\n  &--is-not-loaded {\n    visibility: hidden;\n  }\n\n  &--is-not-loaded &__heading,\n  &--is-not-loaded &__lead,\n  &--is-not-loaded &__button {\n    transition-duration: 0ms;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n  StzhCtaFocusEvent,\n  StzhCtaBlurEvent\n} from \"../../index\"; \n\nimport { hasSlot } from \"../../utils/utils\";\n\nvar counter = 0;\n\n/**\n * @slot heading - Slot for heading as alternative for attribute\n * @slot lead - Slot for lead as alternative for attribute\n * @slot label - Slot for button label as alternative for attribute\n */\n@Component({\n  tag: \"stzh-cta\",\n  styleUrl: \"stzh-cta.scss\",\n  scoped: true\n})\nexport class StzhCta {\n  /** Heading */\n  @Prop() heading: string = \"\";\n\n  /** Lead */\n  @Prop() lead: string = \"\";\n\n  /** Button Label */\n  @Prop() label: string = \"\";\n\n  /** Button link */\n  @Prop() href: string = \"\";\n\n  /**\n   *  Whether sticky button is disabled.\n   *  Will be set to true automatically on `appload` event,\n   *  when more than one cta is on the page.\n   */\n  @Prop() stickyDisabled: boolean = true;\n\n  @State() loaded: boolean = false;\n\n  @Element() element: HTMLStzhCtaElement;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhCtaFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhCtaBlurEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement;\n  private placeholderButton: HTMLElement;\n  private debounceResize: number;\n  private focusedByInput: boolean = false;\n  private placeholderButtonResizeObserver: ResizeObserver;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.button.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-cta\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-cta\",\n      originalEvent: event\n    });\n  }\n\n  private handlePlaceholderButtonResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateButtonWidthByResize);\n  }\n\n  private updateButtonWidthByResize = () => {\n    if (!this.placeholderButton) {\n      return;\n    }\n\n    const { width } = this.placeholderButton.getBoundingClientRect();\n    this.element.style.setProperty(\"--button-width\", `${width}px`);\n  }\n\n  componentDidLoad() {\n    this.stickyDisabled = counter > 1;\n\n    this.placeholderButtonResizeObserver = new ResizeObserver(this.handlePlaceholderButtonResize);\n    if (this.placeholderButton) {\n      this.placeholderButtonResizeObserver.observe(this.placeholderButton);\n    }\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        this.updateButtonWidthByResize();\n\n        window.setTimeout(() => {\n          this.loaded = true;\n        }, 250);\n      });\n    });\n  }\n\n  componentDidRender() {\n    if (this.placeholderButton && this.placeholderButtonResizeObserver) {\n      this.placeholderButtonResizeObserver.observe(this.placeholderButton);\n    }\n  }\n\n  connectedCallback() {\n    counter = counter + 1;\n  }\n\n  disconnectedCallback() {\n    // current no way of sending events in disconnected callback, so we just decrease the counter now,\n    // but the user has to set stickyDisabled=false by himself\n    counter = counter - 1;\n\n    this.placeholderButtonResizeObserver?.disconnect();\n  }\n\n  private renderButtons(size: \"default\" | \"small\") {\n    return (\n      <div class=\"stzh-cta__buttons\">\n        {size === \"small\" &&\n          <div \n            class=\"stzh-cta__button is-placeholder\"\n            ref={(el) => (this.placeholderButton = el as HTMLElement)}\n          >\n            <span class=\"stzh-cta__button-text\">{this.label}</span>\n            <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n          </div>\n        }\n\n        {this.href\n          ?\n          <a\n            class=\"stzh-cta__button\"\n            href={this.href}\n            ref={(el) => (this.button = el as HTMLAnchorElement)}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            <span class=\"stzh-cta__button-text\">{this.label}</span>\n            <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n          </a>\n          :\n          <button\n            class=\"stzh-cta__button\"\n            ref={(el) => (this.button = el as HTMLButtonElement)}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            <span class=\"stzh-cta__button-text\">{this.label}</span>\n            <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n          </button>\n        }\n      </div>\n    );\n  }\n\n  render() {\n    const headingSlotUsed = hasSlot(this.element, 'heading');\n    const leadSlotUsed = hasSlot(this.element, 'lead');\n\n    const hasHeading = !!this.heading || headingSlotUsed;\n    const hasLead = !!this.lead || leadSlotUsed;\n    const hasHeadingOrLead = hasHeading || hasLead;\n\n    const size = !hasHeadingOrLead\n      ? \"small\"\n      : \"default\";\n\n    const classes = {\n      \"stzh-cta\": true,\n      \"stzh-cta--is-sticky-disabled\": this.stickyDisabled,\n      \"stzh-cta--is-not-loaded\": !this.loaded,\n      \"stzh-cta--has-heading\": hasHeading,\n      \"stzh-cta--has-lead\": hasLead,\n      [`stzh-cta--size-${size}`]: !!size,\n    };\n\n    return (\n      <Host size={size} tabindex=\"-1\" onFocus={this.onRootFocus}>\n        <article class={classes} data-stzh-sticky-width-container>\n          <div class=\"stzh-cta__wrapper\">\n            <div class=\"stzh-cta__heading\">\n              {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n            </div>\n            <div class=\"stzh-cta__lead\">\n              {this.lead ? this.lead : <slot name=\"lead\"></slot>}\n            </div>\n            <stzh-sticky\n              name=\"cta\"\n              class=\"stzh-cta__sticky\"\n              position=\"fixed\"\n              bleeding\n              disableStickyBottom={this.stickyDisabled}\n              disableStickyTop={true}\n            >\n              {this.renderButtons(size)}\n            </stzh-sticky>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-cta.entry.cjs.js","mappings":"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","names":["h","hasSlot","Host"],"sources":["src/components/stzh-cta/stzh-cta.scss?tag=stzh-cta&encapsulation=scoped","src/components/stzh-cta/stzh-cta.tsx"],"sourcesContent":[":host {\n  --stzh-flyingfocus-color: #{$colorWhite};\n\n  --background-color: #{$ctaBackgroundColor};\n  --heading-color: #{$colorPrimary70};\n  --lead-color: #{$colorWhite};\n  --sticky-background-color: var(--background-color);\n  --button-color: #{$colorWhite};\n  --button-background-color: #{$colorPrimary70};\n  --button-border-radius: #{$buttonBorderRadius};\n\n  --hover-button-color: #{$colorWhite};\n  --hover-button-background-color: #{$colorSecondary60};\n\n  --stuck-background-color: #{$colorGrey10};\n  --stuck-heading-color: #{$colorPrimary70};\n  --stuck-lead-color: #{$baseColor};\n  --stuck-sticky-background-color: var(--background-color);\n\n  --grid-template-areas: var(\n    --stzh-cta-grid-template-areas,\n    \"cta cta cta cta\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-cta-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-cta-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas: var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-cta-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    );\n  }\n\n  &[size=\"small\"] {\n    --button-background-color: transparent;\n\n    --hover-button-color: var(--button-color);\n    --hover-button-background-color: var(--button-background-color);\n\n    --stuck-background-color: var(--background-color);\n\n    @include mq($from: small) {\n      --grid-template-areas: var(\n        --stzh-cta-small-grid-template-areas,\n        \"cta cta cta cta\"\n      );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(\n        --stzh-cta-small-grid-template-areas,\n        \"cta cta cta cta cta cta cta cta\"\n      );\n    }\n  }\n}\n\n@keyframes stzh-cta-effect {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n.stzh-cta {\n  @include font('heavy');\n  @include gridGutter;\n  display: grid;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__wrapper {\n    grid-area: cta;\n    background-color: var(--background-color);\n    transition-property: background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) {\n    background-color: var(--stuck-background-color);\n  }\n\n  &__heading,\n  &__lead {\n    transition-property: color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    &:not(:empty) {\n      @include spaceCurve('margin-left', 'medium');\n      @include spaceCurve('margin-right', 'medium');\n      @include spaceCurve('margin-bottom', 'medium');\n\n      @include mq($from: small) {\n        margin-bottom: space('xxlarge');\n      }\n\n      @include mq($from: medium) {\n        margin-bottom: space('xxxlarge');\n      }\n\n      @include mq($from: large) {\n        margin-bottom: space('xxxxlarge');\n      }\n    }\n  }\n\n  &__heading {\n    @include fontCurve('h2', 'heading');\n    color: var(--heading-color);\n  }\n\n  &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) &__heading {\n    color: var(--stuck-heading-color);\n  }\n\n  &__lead {\n    @include fontCurve('p2');\n    color: var(--lead-color);\n\n    &:not(:empty) {\n      @include spaceCurve('padding-top', 'regular');\n      @include spaceCurve('padding-bottom', 'regular');\n    }\n  }\n\n  &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) &__lead {\n    color: var(--stuck-lead-color);\n  }\n\n  &__button {\n    @include font('heavy');\n    @include fontSize('centi');\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    appearance: none;\n    border: none;\n    text-decoration: none;\n    border-radius: var(--button-border-radius);\n    color: var(--button-color);\n    background-color: var(--button-background-color);\n    gap: space('xsmall');\n    transition-property: width, height, min-height, color, background-color, font-size, padding;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @include mq($from: small) {\n      width: auto;\n    }\n\n    &:hover {\n      color: var(--hover-button-color);\n      background-color: var(--hover-button-background-color);\n    }\n  }\n\n  &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button {\n    @include fontSize('milli');\n\n    @include mq($from: medium) {\n      @include fontSize('centi');\n    }\n  }\n\n  &__button-text {\n    display: block;\n  }\n\n  &__button-icon {\n    --size: #{iconSize('medium')};\n  }\n\n  &__button:hover &__button-icon {\n\t\tanimation: stzh-cta-effect 1s;\n  }\n\n  &__sticky {\n    @include spaceCurve('--padding-left', 'medium');\n    @include spaceCurve('--padding-right', 'medium');\n    --padding-top: #{space('large')};\n    --padding-bottom: #{space('large')};\n    --background-color: var(--sticky-background-color);\n    --stuck-background-color: var(--stuck-sticky-background-color);\n    --stuck-padding-left: 0px;\n    --stuck-padding-right: 0px;\n\n    display: block;\n  }\n\n  &__buttons {\n    display: flex;\n    gap: space('medium');\n  }\n\n  /* Has lead variant */\n\n  &--has-lead &__heading {\n    margin-bottom: 0;\n  }\n\n  /* Default variant; has heading, lead or multiple buttons */\n\n  &--size-default &__wrapper {\n    @include spaceCurve('padding-top', 'large');\n    @include spaceCurve('padding-bottom', 'large');\n  }\n\n  &--size-default &__button {\n    padding: space('xsmall') space('xlarge');\n    min-height: $formInputHeight;\n  }\n\n  &--size-default &__button-icon {\n    @include mq($to: small) {\n      display: none;\n    }\n  }\n\n  &--size-default &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button {\n    min-height: $formInputHeightSmall;\n\n    @include mq($from: medium) {\n      min-height: $formInputHeight;\n    }\n  }\n\n  &--size-default &__sticky {\n    margin-top: calc(var(--padding-top) / -1);\n    margin-bottom: calc(var(--padding-bottom) / -1);\n  }\n\n  /* Small variant; has no heading, lead or multiple buttons */\n\n  &--size-small &__button {\n    width: 100%;\n    max-width: 100%;\n    gap: space('medium');\n\n    &.is-placeholder {\n      width: auto;\n      max-width: none;\n      visibility: hidden;\n      position: absolute;\n      pointer-events: none;\n    }\n  }\n\n  &--size-small &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button:not(.is-placeholder) {\n    width: var(--button-width, auto);\n  }\n\n  &--size-small &__button-icon {\n    --size: #{iconSize('large')};\n  }\n\n  &--size-small &__sticky {\n    @include spaceCurve('--padding-top', 'large');\n    @include spaceCurve('--padding-bottom', 'large');\n\n    &[is-stuck]:not([is-stuck=\"false\"]) {\n      @include spaceCurve('--padding-top', 'medium');\n      @include spaceCurve('--padding-bottom', 'medium');\n    }\n  }\n\n  /* Not loaded */\n\n  &--is-not-loaded {\n    visibility: hidden;\n  }\n\n  &--is-not-loaded &__wrapper,\n  &--is-not-loaded &__heading,\n  &--is-not-loaded &__lead,\n  &--is-not-loaded &__button {\n    transition-duration: 0ms;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n  StzhCtaFocusEvent,\n  StzhCtaBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nvar counter = 0;\n\n/**\n * @slot heading - Slot for heading as alternative for attribute\n * @slot lead - Slot for lead as alternative for attribute\n * @slot label - Slot for button label as alternative for attribute\n */\n@Component({\n  tag: \"stzh-cta\",\n  styleUrl: \"stzh-cta.scss\",\n  scoped: true\n})\nexport class StzhCta {\n  /** Heading */\n  @Prop() heading: string = \"\";\n\n  /** Lead */\n  @Prop() lead: string = \"\";\n\n  /** Button Label */\n  @Prop() label: string = \"\";\n\n  /** Button link */\n  @Prop() href: string = \"\";\n\n  /**\n   *  Whether sticky button is disabled.\n   *  Will be set to true automatically on,\n   *  when more than one cta is on the page.\n   */\n  @Prop() stickyDisabled: boolean = true;\n\n  @State() loaded: boolean = false;\n\n  @Element() element: HTMLStzhCtaElement;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhCtaFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhCtaBlurEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement;\n  private placeholderButton: HTMLElement;\n  private debounceResize: number;\n  private focusedByInput: boolean = false;\n  private placeholderButtonResizeObserver: ResizeObserver;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.button.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-cta\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-cta\",\n      originalEvent: event\n    });\n  }\n\n  private handlePlaceholderButtonResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateButtonWidthByResize);\n  }\n\n  private updateButtonWidthByResize = () => {\n    if (!this.placeholderButton) {\n      return;\n    }\n\n    const { width } = this.placeholderButton.getBoundingClientRect();\n    this.element.style.setProperty(\"--button-width\", `${width}px`);\n  }\n\n  componentDidLoad() {\n    this.stickyDisabled = counter > 1;\n\n    this.placeholderButtonResizeObserver = new ResizeObserver(this.handlePlaceholderButtonResize);\n    if (this.placeholderButton) {\n      this.placeholderButtonResizeObserver.observe(this.placeholderButton);\n    }\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        this.updateButtonWidthByResize();\n\n        window.setTimeout(() => {\n          this.loaded = true;\n        }, 250);\n      });\n    });\n  }\n\n  componentDidRender() {\n    if (this.placeholderButton && this.placeholderButtonResizeObserver) {\n      this.placeholderButtonResizeObserver.observe(this.placeholderButton);\n    }\n  }\n\n  connectedCallback() {\n    counter = counter + 1;\n  }\n\n  disconnectedCallback() {\n    // current no way of sending events in disconnected callback, so we just decrease the counter now,\n    // but the user has to set stickyDisabled=false by himself\n    counter = counter - 1;\n\n    this.placeholderButtonResizeObserver?.disconnect();\n  }\n\n  private renderButtons(size: \"default\" | \"small\") {\n    return (\n      <div class=\"stzh-cta__buttons\">\n        {size === \"small\" &&\n          <div\n            class=\"stzh-cta__button is-placeholder\"\n            ref={(el) => (this.placeholderButton = el as HTMLElement)}\n          >\n            <span class=\"stzh-cta__button-text\">{this.label}</span>\n            <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n          </div>\n        }\n\n        {this.href\n          ?\n          <a\n            class=\"stzh-cta__button\"\n            href={this.href}\n            ref={(el) => (this.button = el as HTMLAnchorElement)}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            <span class=\"stzh-cta__button-text\">{this.label}</span>\n            <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n          </a>\n          :\n          <button\n            class=\"stzh-cta__button\"\n            ref={(el) => (this.button = el as HTMLButtonElement)}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            <span class=\"stzh-cta__button-text\">{this.label}</span>\n            <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n          </button>\n        }\n      </div>\n    );\n  }\n\n  render() {\n    const headingSlotUsed = hasSlot(this.element, 'heading');\n    const leadSlotUsed = hasSlot(this.element, 'lead');\n\n    const hasHeading = !!this.heading || headingSlotUsed;\n    const hasLead = !!this.lead || leadSlotUsed;\n    const hasHeadingOrLead = hasHeading || hasLead;\n\n    const size = !hasHeadingOrLead\n      ? \"small\"\n      : \"default\";\n\n    const classes = {\n      \"stzh-cta\": true,\n      \"stzh-cta--is-sticky-disabled\": this.stickyDisabled,\n      \"stzh-cta--is-not-loaded\": !this.loaded,\n      \"stzh-cta--has-heading\": hasHeading,\n      \"stzh-cta--has-lead\": hasLead,\n      [`stzh-cta--size-${size}`]: !!size,\n    };\n\n    return (\n      <Host size={size} tabindex=\"-1\" onFocus={this.onRootFocus}>\n        <article class={classes} data-stzh-sticky-width-container>\n          <div class=\"stzh-cta__wrapper\">\n            <div class=\"stzh-cta__heading\">\n              {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n            </div>\n            <div class=\"stzh-cta__lead\">\n              {this.lead ? this.lead : <slot name=\"lead\"></slot>}\n            </div>\n            <stzh-sticky\n              name=\"cta\"\n              class=\"stzh-cta__sticky\"\n              position=\"fixed\"\n              bleeding\n              disableStickyBottom={this.stickyDisabled}\n              disableStickyTop={true}\n            >\n              {this.renderButtons(size)}\n            </stzh-sticky>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/stzh-gallery.cjs.entry.js

@@ -9507,6 +9507,7 @@ const StzhGallery = class {
     this.carouselDisabled = false;
     this.carouselAutoplay = false;
     this.carouselAutoplayTimeout = 3000;
+    this.excludeFirstImage = false;
   }
   async openLightbox(index = 0) {
     this.lightbox.loadAndOpen(index);
@@ -9529,7 +9530,8 @@ const StzhGallery = class {
       this._images = newValue;
     }
     this.showItemsWatcher(this._initialShowItems);
-    this._imagesLightboxDataSource = this._images.map((image, index) => {
+    const lightboxImages = this.excludeFirstImage ? this._images.slice(1) : this._images;
+    this._imagesLightboxDataSource = lightboxImages.map((image, index) => {
       let captionHtml = "";
       const { lightboxHtml, heading, headingLightbox, caption, captionLightbox, copyright, hideCounter } = image;
       if (lightboxHtml) {
@@ -9539,7 +9541,7 @@ const StzhGallery = class {
         captionHtml = `
           <div class="pswp__caption-wrapper">
             <div class="pswp__heading-wrapper">
-              <div class="pswp__caption-counter">${!hideCounter ? `${index + 1}/${this._images.length}` : ""}</div>
+              <div class="pswp__caption-counter">${!hideCounter ? `${index + 1}/${lightboxImages.length}` : ""}</div>
               <div class="pswp__caption-heading">${headingLightbox || heading || ""}</div>
             </div>
             <div class="pswp__caption">
@@ -9561,7 +9563,7 @@ const StzhGallery = class {
     });
   }
   initLightbox() {
-    if (this._images.length === 0) {
+    if (this._imagesLightboxDataSource.length === 0) {
       return;
     }
     this.lightbox = new PhotoSwipeLightbox({
@@ -9662,13 +9664,13 @@ const StzhGallery = class {
       return thumbEl;
     });
     this.lightbox.addFilter('numItems', () => {
-      return this._images.length;
+      return this._imagesLightboxDataSource.length;
     });
     this.lightbox.on("afterInit", () => {
       firstHidden = this.lightbox.pswp.currSlide.data.element;
       lastHidden = this.lightbox.pswp.currSlide.data.element;
       hideHiddenDuringAnimation(firstHidden);
-      if (this._images.length === 1) {
+      if (this._imagesLightboxDataSource.length === 1) {
         this.lightbox.pswp.element.classList.add("pswp--one-image");
       }
     });
@@ -9724,7 +9726,7 @@ const StzhGallery = class {
       // verticallyCenterImage: false,
       // when the caption x position is less than this value, it'll get class pswp__dynamic-caption--on-hor-edge. You may use it to apply different styling, such as horizontal padding.
       // horizontalEdgeThreshold: 20
-      // a ratio defines the amount of horizontal empty space before the mobile caption switches to an "overlap" layout. 
+      // a ratio defines the amount of horizontal empty space before the mobile caption switches to an "overlap" layout.
       // For example, if it's set to 0.3 - the caption will start overlapping the image when more than 30% of horizontal space is not occupied by an image. If you set it to 0 - the caption will always overlap. If you set it to 1 - the caption will constantly shift the image (unless it's taller than the viewport).
       mobileCaptionOverlapRatio: 1
     });
@@ -9758,8 +9760,8 @@ const StzhGallery = class {
     }
   }
   renderFigure(image, index$1) {
-    const total = this._images.length;
-    return (index.h("stzh-figure", { class: "stzh-gallery__slide", caption: image.caption, heading: image.heading, counter: !image.hideCounter
+    const total = this._imagesLightboxDataSource.length;
+    return (index.h("stzh-figure", { class: "stzh-gallery__slide", caption: image.caption, heading: image.heading, counter: (!image.hideCounter && !(this.variant === "single" && this.excludeFirstImage))
         ? `${index$1 + 1}/${total}`
         : "" }, index.h("stzh-ratio", { ratio: this.ratio, ratioSmall: this.ratioSmall, ratioMedium: this.ratioMedium, ratioLarge: this.ratioLarge, ratioUltra: this.ratioUltra, onClick: (event) => {
         event.preventDefault();
@@ -9780,12 +9782,13 @@ const StzhGallery = class {
       index.h(index.Fragment, null, this.renderFigure(this._images[0], 0)), (this.variant === "grid" && this._images.length > 0) &&
       index.h(index.Fragment, null, index.h("div", { class: "stzh-gallery__list" }, this._imagesShown.map((image, index) => this.renderFigure(image, index))), this._showMoreLink &&
         index.h("div", { class: "stzh-gallery__list-actions" }, index.h("stzh-button", { label: this.localization.showMore, onClick: this.handleMoreClick }))), (this.variant === "carousel" && this._images.length > 1) &&
-      index.h("stzh-carousel", { ref: (el) => (this.carouselElement = el), disabled: this.carouselDisabled, autoplay: this.carouselAutoplay, autoplayTimeout: this.carouselAutoplayTimeout, withTrack: this.carouselWithTrack }, index.h("stzh-ratio", { ref: (el) => (this.carouselActionsElement = el), slot: "actions", class: "stzh-gallery__carousel-actions", ratio: this.ratio, ratioSmall: this.ratioSmall, ratioMedium: this.ratioMedium, ratioLarge: this.ratioLarge, ratioUltra: this.ratioUltra }, index.h("div", null, index.h("stzh-button", { class: "stzh-carousel-action-previous", "data-stzh-carousel-previous": true, variant: "secondary", size: "small", icon: "angle-left", label: this.localization.arrowPrevTitle, "icon-only": true }), index.h("stzh-button", { class: "stzh-carousel-action-next", "data-stzh-carousel-next": true, variant: "secondary", size: "small", icon: "angle-right", label: this.localization.arrowNextTitle, "icon-only": true })), index.h("stzh-hspace", { justify: "end", items: "end", size: "xsmall" }, index.h("stzh-button", { variant: "secondary", size: "small", icon: "expand", label: this.localization.openLightbox, "icon-only": true, onClick: this.openCurrentCarouselSlide }))), this._images.map((image, index) => this.renderFigure(image, index))), index.h("slot", null))));
+      index.h("stzh-carousel", { ref: (el) => (this.carouselElement = el), disabled: this.carouselDisabled, autoplay: this.carouselAutoplay, autoplayTimeout: this.carouselAutoplayTimeout, withTrack: this.carouselWithTrack }, index.h("stzh-ratio", { ref: (el) => (this.carouselActionsElement = el), slot: "actions", class: "stzh-gallery__carousel-actions", ratio: this.ratio, ratioSmall: this.ratioSmall, ratioMedium: this.ratioMedium, ratioLarge: this.ratioLarge, ratioUltra: this.ratioUltra }, index.h("div", null, index.h("stzh-button", { class: "stzh-carousel-action-previous", "data-stzh-carousel-previous": true, variant: "secondary", size: "small", icon: "angle-left", label: this.localization.arrowPrevTitle, "icon-only": true }), index.h("stzh-button", { class: "stzh-carousel-action-next", "data-stzh-carousel-next": true, variant: "secondary", size: "small", icon: "angle-right", label: this.localization.arrowNextTitle, "icon-only": true })), index.h("stzh-hspace", { justify: "end", items: "end", size: "xsmall" }, index.h("stzh-button", { variant: "secondary", size: "small", icon: "expand", "icon-only": true, label: this.localization.openLightbox, onClick: this.openCurrentCarouselSlide }))), this._images.map((image, index) => this.renderFigure(image, index))), index.h("slot", null))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
     "showItems": ["showItemsWatcher"],
-    "images": ["imagesWatcher"]
+    "images": ["imagesWatcher"],
+    "excludeFirstImage": ["imagesWatcher"]
   }; }
 };
 StzhGallery.style = stzhGalleryCss;