@oiz/stzh-components 2.11.0-beta1 → 2.11.0

package/dist/components/stzh-cell.js

@@ -8,10 +8,10 @@ const StzhCell$1 = /*@__PURE__*/ proxyCustomElement(class StzhCell extends HTMLE
     this.__registerHost();
     this.__attachShadow();
     this.span = 12;
-    this.spanSmall = 0;
-    this.spanMedium = 0;
-    this.spanLarge = 0;
-    this.spanUltra = 0;
+    this.spanSmall = undefined;
+    this.spanMedium = undefined;
+    this.spanLarge = undefined;
+    this.spanUltra = undefined;
     this.align = "none";
     this.alignSelf = "auto";
   }
@@ -22,11 +22,11 @@ const StzhCell$1 = /*@__PURE__*/ proxyCustomElement(class StzhCell extends HTMLE
   }
   static get style() { return stzhCellCss; }
 }, [1, "stzh-cell", {
-    "span": [2],
-    "spanSmall": [2, "span-small"],
-    "spanMedium": [2, "span-medium"],
-    "spanLarge": [2, "span-large"],
-    "spanUltra": [2, "span-ultra"],
+    "span": [514],
+    "spanSmall": [514, "span-small"],
+    "spanMedium": [514, "span-medium"],
+    "spanLarge": [514, "span-large"],
+    "spanUltra": [514, "span-ultra"],
     "align": [513],
     "alignSelf": [513, "align-self"]
   }]);

package/dist/components/stzh-cell.js.map

@@ -1 +1 @@
-{"file":"stzh-cell.js","mappings":";;AAAA,MAAM,WAAW,GAAG,omPAAomP;;MCiB3mPA,UAAQ;;;;;gBAEI,EAAE;qBAEG,CAAC;sBAEA,CAAC;qBAEF,CAAC;qBAED,CAAC;iBAG0C,MAAM;qBAGtB,MAAM;;EAE7D,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;OAClB,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhCell"],"sources":["src/components/stzh-cell/stzh-cell.scss?tag=stzh-cell&encapsulation=shadow","src/components/stzh-cell/stzh-cell.tsx"],"sourcesContent":[":host {\n  // couldn't use cell-span and calcuate the with with css calc\n  // since IE was calculating the width wrongly with certain viewport widths\n  // so calculating it with sass and using the width directly\n  --cell-width: 100%;\n\n  max-width: 100%;\n  width: var(--cell-width);\n  flex-basis: var(--cell-width);\n  flex-shrink: 0;\n}\n\n/* Align variants */\n\n:host([align=\"left\"]) {\n  margin-right: auto;\n}\n\n:host([align=\"right\"]) {\n  margin-left: auto;\n}\n\n:host([align=\"middle\"]) {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Align self variants */\n\n:host([align-self=\"start\"]) {\n  align-self: flex-start;\n}\n\n:host([align-self=\"end\"]) {\n  align-self: flex-end;\n}\n\n:host([align-self=\"center\"]) {\n  align-self: center;\n}\n\n:host([align-self=\"baseline\"]) {\n  align-self: baseline;\n}\n\n:host([align-self=\"stretch\"]) {\n  align-self: stretch;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"]) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{100% / ($gridCells / $i)};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) {\n        --cell-width: #{100% / ($gridCells / $i)};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-cell {\n  height: 100%;\n  padding-left: calc(#{$gridGutter} / 2);\n  padding-right: calc(#{$gridGutter} / 2);\n\n  @include mq($from: small) {\n    padding-left: calc(#{$gridGutterSmall} / 2);\n    padding-right: calc(#{$gridGutterSmall} / 2);\n  }\n\n  @include mq($from: medium) {\n    padding-left: calc(#{$gridGutterMedium} / 2);\n    padding-right: calc(#{$gridGutterMedium} / 2);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-cell\",\n  styleUrl: \"stzh-cell.scss\",\n  shadow: true\n})\nexport class StzhCell {\n  /** Default span of each cell */\n  @Prop() span: number = 12;\n  /** Default span of each cell above small breakpoint */\n  @Prop() spanSmall: number = 0;\n  /** Default span of each cell above medium breakpoint */\n  @Prop() spanMedium: number = 0;\n  /** Default span of each cell above large breakpoint */\n  @Prop() spanLarge: number = 0;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop() spanUltra: number = 0;\n\n  /** Controlling how cell is aligned in main axis (sets margin: auto to left/right side) */\n  @Prop({ reflect: true }) align: \"none\" | \"left\" | \"right\" | \"middle\" = \"none\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) alignSelf: Layout.AlignSelf = \"auto\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-cell\": true\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-cell.js","mappings":";;AAAA,MAAM,WAAW,GAAG,omPAAomP;;MCiB3mPA,UAAQ;;;;;gBAEqB,EAAE;;;;;iBAW6B,MAAM;qBAGtB,MAAM;;EAE7D,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;OAClB,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhCell"],"sources":["src/components/stzh-cell/stzh-cell.scss?tag=stzh-cell&encapsulation=shadow","src/components/stzh-cell/stzh-cell.tsx"],"sourcesContent":[":host {\n  // couldn't use cell-span and calcuate the with with css calc\n  // since IE was calculating the width wrongly with certain viewport widths\n  // so calculating it with sass and using the width directly\n  --cell-width: 100%;\n\n  max-width: 100%;\n  width: var(--cell-width);\n  flex-basis: var(--cell-width);\n  flex-shrink: 0;\n}\n\n/* Align variants */\n\n:host([align=\"left\"]) {\n  margin-right: auto;\n}\n\n:host([align=\"right\"]) {\n  margin-left: auto;\n}\n\n:host([align=\"middle\"]) {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Align self variants */\n\n:host([align-self=\"start\"]) {\n  align-self: flex-start;\n}\n\n:host([align-self=\"end\"]) {\n  align-self: flex-end;\n}\n\n:host([align-self=\"center\"]) {\n  align-self: center;\n}\n\n:host([align-self=\"baseline\"]) {\n  align-self: baseline;\n}\n\n:host([align-self=\"stretch\"]) {\n  align-self: stretch;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"]) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{100% / ($gridCells / $i)};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) {\n        --cell-width: #{100% / ($gridCells / $i)};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-cell {\n  height: 100%;\n  padding-left: calc(#{$gridGutter} / 2);\n  padding-right: calc(#{$gridGutter} / 2);\n\n  @include mq($from: small) {\n    padding-left: calc(#{$gridGutterSmall} / 2);\n    padding-right: calc(#{$gridGutterSmall} / 2);\n  }\n\n  @include mq($from: medium) {\n    padding-left: calc(#{$gridGutterMedium} / 2);\n    padding-right: calc(#{$gridGutterMedium} / 2);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-cell\",\n  styleUrl: \"stzh-cell.scss\",\n  shadow: true\n})\nexport class StzhCell {\n  /** Default span of each cell */\n  @Prop({ reflect: true }) span: number = 12;\n  /** Default span of each cell above small breakpoint */\n  @Prop({ reflect: true }) spanSmall: number;\n  /** Default span of each cell above medium breakpoint */\n  @Prop({ reflect: true }) spanMedium: number;\n  /** Default span of each cell above large breakpoint */\n  @Prop({ reflect: true }) spanLarge: number;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop({ reflect: true }) spanUltra: number;\n\n  /** Controlling how cell is aligned in main axis (sets margin: auto to left/right side) */\n  @Prop({ reflect: true }) align: \"none\" | \"left\" | \"right\" | \"middle\" = \"none\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) alignSelf: Layout.AlignSelf = \"auto\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-cell\": true\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-clamp2.js

@@ -33,8 +33,9 @@ const StzhClamp = /*@__PURE__*/ proxyCustomElement(class StzhClamp extends HTMLE
     this.handleMutaton = () => {
       this.update();
     };
-    this.handleExpandClick = () => {
+    this.handleExpandClick = async () => {
       this.expanded = !this.expanded;
+      await this.waitForNextRender();
       this.stzhExpand.emit({
         component: "stzh-clamp",
         expanded: this.expanded
@@ -54,6 +55,9 @@ const StzhClamp = /*@__PURE__*/ proxyCustomElement(class StzhClamp extends HTMLE
     this.textCloneElement.innerHTML = this.textElement.innerHTML;
     this.updateClamped();
   }
+  waitForNextRender() {
+    return new Promise(resolve => this.renderPromiseResolve = resolve);
+  }
   async componentWillLoad() {
     if (!this.localization) {
       this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "clamp");
@@ -67,6 +71,9 @@ const StzhClamp = /*@__PURE__*/ proxyCustomElement(class StzhClamp extends HTMLE
     });
   }
   componentDidRender() {
+    if (this.renderPromiseResolve) {
+      this.renderPromiseResolve();
+    }
     this.update();
   }
   connectedCallback() {

package/dist/components/stzh-clamp2.js.map

@@ -1 +1 @@
-{"file":"stzh-clamp2.js","mappings":"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","names":[],"sources":["src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":["/**\n * @prop --current-lines: Currently clamped lines number (can be used instead of `lines-{BREAKPOINT}` attributes)\n */\n\nstzh-clamp {\n  @include host;\n  --current-lines: var(--lines, 0);\n\n  @include mq($from: small) {\n    --current-lines: var(--lines-small, var(--lines, 0));\n  }\n\n  @include mq($from: medium) {\n    --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n  }\n\n  @include mq($from: large) {\n    --current-lines: var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0))));\n  }\n\n  @include mq($from: ultra) {\n    --current-lines: var(--lines-ultra, var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0)))));\n  }\n\n  width: 100%;\n  color: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.stzh-clamp {\n  position: relative;\n\n  &__text {\n    @include wordWrap;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n\n    & > *:first-child {\n      margin-top: 0 !important;\n    }\n\n    & > *:last-child {\n      margin-bottom: 0 !important;\n    }\n\n    &.is-clone {\n      position: absolute;\n      visibility: hidden;\n      opacity: 0;\n      top: 0;\n      left: 0;\n      width: 100%;\n    }\n  }\n\n  &__trigger {\n    margin-top: space('xxsmall');\n  }\n\n  &--is-not-expanded &__text,\n  &__text.is-clone {\n    -webkit-line-clamp: var(--current-lines);\n    line-clamp: var(--current-lines);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Method,\n  Element,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhClampClampEvent,\n  StzhClampExpandEvent\n} from \"../../index\";\n\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-clamp\",\n  styleUrl: \"stzh-clamp.scss\"\n})\nexport class StzhClamp {\n  /** Translation strings */\n  @Prop() localization: StzhClampLocalizedText;\n\n  /** Line number */\n  @Prop() lines: number = 1;\n  /** Line number above small breakpoint */\n  @Prop() linesSmall: number = 0;\n  /** Line number above medium breakpoint */\n  @Prop() linesMedium: number = 0;\n  /** Line number above large breakpoint */\n  @Prop() linesLarge: number = 0;\n  /** Line number above ultra breakpoint */\n  @Prop() linesUltra: number = 0;\n\n  /** Whether clamping is expanded */\n  @Prop() showExpandLink: boolean = false;\n\n  /** Whether clamping is expanded */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /** Whether the text is currently clamped (readonly) */\n  @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n  @Element() element: HTMLStzhClampElement;\n\n  /** Event when clamping state changed */\n  @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n  /** Event when expanding state changed */\n  @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n  @Method()\n  async update() {\n    this.textCloneElement.innerHTML = this.textElement.innerHTML;\n    this.updateClamped();\n  }\n\n  private textElement: HTMLElement;\n  private textCloneElement: HTMLElement;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private mutationObserver: MutationObserver;\n\n  private updateClamped = () => {\n    if (!this.textCloneElement) {\n      return;\n    }\n\n    const beforeClamped = this.clamped;\n    this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n    if (beforeClamped !== this.clamped) {\n      this.stzhClamp.emit({\n        component: \"stzh-clamp\",\n        clamped: this.clamped\n      });\n    }\n  }\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateClamped);\n  }\n\n  private handleMutaton = () => {\n    this.update();\n  }\n\n  private handleExpandClick = () => {\n    this.expanded = !this.expanded;\n\n    this.stzhExpand.emit({\n      component: \"stzh-clamp\",\n      expanded: this.expanded\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"clamp\");\n    }\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(this.handleMutaton);\n    this.mutationObserver.observe(this.textElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  componentDidRender() {\n    this.update();\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-clamp\": true,\n      \"stzh-clamp--is-not-expanded\": !this.expanded\n    };\n\n    return (\n      <Host\n        style={{\n          '--lines': this.lines ? this.lines.toString() : null,\n          '--lines-small': this.linesSmall ? this.linesSmall.toString() : null,\n          '--lines-medium': this.linesMedium ? this.linesMedium.toString() : null,\n          '--lines-large': this.linesLarge ? this.linesLarge.toString() : null,\n          '--lines-ultra': this.linesUltra ? this.linesUltra.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div\n            ref={(el) => (this.textElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text\"\n          >\n            <slot></slot>\n          </div>\n\n          <div\n            ref={(el) => (this.textCloneElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text is-clone\"\n            aria-hidden=\"true\"\n          ></div>\n\n          {this.showExpandLink && this.clamped &&\n            <stzh-link\n              class=\"stzh-clamp__trigger\"\n              a11yTabindex=\"-1\"\n              aria-hidden=\"true\"\n              onClick={this.handleExpandClick}\n            >\n              {!this.expanded ? this.localization.showMore : this.localization.showLess}\n            </stzh-link>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-clamp2.js","mappings":";;;;;AAAA,MAAM,YAAY,GAAG,iuFAAiuF;;MCyBzuF,SAAS;;;;;;IA8CZ,kBAAa,GAAG;MACtB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;QAC1B,OAAO;OACR;MAED,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC;MACnC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC;MAEvF,IAAI,aAAa,KAAK,IAAI,CAAC,OAAO,EAAE;QAClC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;UAClB,SAAS,EAAE,YAAY;UACvB,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;OACJ;KACF,CAAA;IAEO,iBAAY,GAAG;MACrB,IAAI,IAAI,CAAC,cAAc,EAAE;QACvB,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;OAClD;MAED,IAAI,CAAC,cAAc,GAAG,qBAAqB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KACjE,CAAA;IAEO,kBAAa,GAAG;MACtB,IAAI,CAAC,MAAM,EAAE,CAAC;KACf,CAAA;IAEO,sBAAiB,GAAG;MAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;MAC/B,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC;MAE/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,YAAY;QACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,CAAC,CAAC;KACJ,CAAA;;iBA7EuB,CAAC;sBAEI,CAAC;uBAEA,CAAC;sBAEF,CAAC;sBAED,CAAC;0BAGI,KAAK;oBAGqB,KAAK;mBAGN,KAAK;;EAWhE,MAAM,MAAM;IACV,IAAI,CAAC,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;IAC7D,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EAgDD,iBAAiB;IACf,OAAO,IAAI,OAAO,CAAC,OAAO,IAAI,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC,CAAC;GACpE;EAED,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;KAChG;GACF;EAED,gBAAgB;IACd,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACjE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MAC9C,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,oBAAoB,EAAE;MAC7B,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;IAED,IAAI,CAAC,MAAM,EAAE,CAAC;GACf;EAED,iBAAiB;IACf,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC5D,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GAC3C;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;KAClC;IAED,IAAI,IAAI,CAAC,gBAAgB,EAAE;MACzB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;KACpC;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,YAAY,EAAE,IAAI;MAClB,6BAA6B,EAAE,CAAC,IAAI,CAAC,QAAQ;KAC9C,CAAC;IAEF,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,SAAS,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,IAAI;QACpD,eAAe,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,GAAG,IAAI;QACpE,gBAAgB,EAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,GAAG,IAAI;QACvE,eAAe,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,GAAG,IAAI;QACpE,eAAe,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,GAAG,IAAI;OACrE,IAED,WAAK,KAAK,EAAE,OAAO,IACjB,WACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,EACtD,KAAK,EAAC,kBAAkB,IAExB,eAAa,CACT,EAEN,WACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,gBAAgB,GAAG,EAAoB,CAAC,EAC3D,KAAK,EAAC,2BAA2B,iBACrB,MAAM,GACb,EAEN,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO;MAClC,iBACE,KAAK,EAAC,qBAAqB,EAC3B,YAAY,EAAC,IAAI,iBACL,MAAM,EAClB,OAAO,EAAE,IAAI,CAAC,iBAAiB,IAE9B,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAC/D,CAEV,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":["/**\n * @prop --current-lines: Currently clamped lines number (can be used instead of `lines-{BREAKPOINT}` attributes)\n */\n\nstzh-clamp {\n  @include host;\n  --current-lines: var(--lines, 0);\n\n  @include mq($from: small) {\n    --current-lines: var(--lines-small, var(--lines, 0));\n  }\n\n  @include mq($from: medium) {\n    --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n  }\n\n  @include mq($from: large) {\n    --current-lines: var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0))));\n  }\n\n  @include mq($from: ultra) {\n    --current-lines: var(--lines-ultra, var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0)))));\n  }\n\n  width: 100%;\n  color: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.stzh-clamp {\n  position: relative;\n\n  &__text {\n    @include wordWrap;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n\n    & > *:first-child {\n      margin-top: 0 !important;\n    }\n\n    & > *:last-child {\n      margin-bottom: 0 !important;\n    }\n\n    &.is-clone {\n      position: absolute;\n      visibility: hidden;\n      opacity: 0;\n      top: 0;\n      left: 0;\n      width: 100%;\n    }\n  }\n\n  &__trigger {\n    margin-top: space('xxsmall');\n  }\n\n  &--is-not-expanded &__text,\n  &__text.is-clone {\n    -webkit-line-clamp: var(--current-lines);\n    line-clamp: var(--current-lines);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Method,\n  Element,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhClampClampEvent,\n  StzhClampExpandEvent\n} from \"../../index\";\n\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-clamp\",\n  styleUrl: \"stzh-clamp.scss\"\n})\nexport class StzhClamp {\n  /** Translation strings */\n  @Prop() localization: StzhClampLocalizedText;\n\n  /** Line number */\n  @Prop() lines: number = 1;\n  /** Line number above small breakpoint */\n  @Prop() linesSmall: number = 0;\n  /** Line number above medium breakpoint */\n  @Prop() linesMedium: number = 0;\n  /** Line number above large breakpoint */\n  @Prop() linesLarge: number = 0;\n  /** Line number above ultra breakpoint */\n  @Prop() linesUltra: number = 0;\n\n  /** Whether expand link is shown */\n  @Prop() showExpandLink: boolean = false;\n\n  /** Whether clamping is expanded */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /** Whether the text is currently clamped (readonly) */\n  @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n  @Element() element: HTMLStzhClampElement;\n\n  /** Event when clamping state changed */\n  @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n  /** Event when expanding state changed */\n  @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n  @Method()\n  async update() {\n    this.textCloneElement.innerHTML = this.textElement.innerHTML;\n    this.updateClamped();\n  }\n\n  private textElement: HTMLElement;\n  private textCloneElement: HTMLElement;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private mutationObserver: MutationObserver;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private updateClamped = () => {\n    if (!this.textCloneElement) {\n      return;\n    }\n\n    const beforeClamped = this.clamped;\n    this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n    if (beforeClamped !== this.clamped) {\n      this.stzhClamp.emit({\n        component: \"stzh-clamp\",\n        clamped: this.clamped\n      });\n    }\n  }\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateClamped);\n  }\n\n  private handleMutaton = () => {\n    this.update();\n  }\n\n  private handleExpandClick = async () => {\n    this.expanded = !this.expanded;\n    await this.waitForNextRender();\n\n    this.stzhExpand.emit({\n      component: \"stzh-clamp\",\n      expanded: this.expanded\n    });\n  }\n\n  waitForNextRender() {\n    return new Promise(resolve => this.renderPromiseResolve = resolve);\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"clamp\");\n    }\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(this.handleMutaton);\n    this.mutationObserver.observe(this.textElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n\n    this.update();\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-clamp\": true,\n      \"stzh-clamp--is-not-expanded\": !this.expanded\n    };\n\n    return (\n      <Host\n        style={{\n          '--lines': this.lines ? this.lines.toString() : null,\n          '--lines-small': this.linesSmall ? this.linesSmall.toString() : null,\n          '--lines-medium': this.linesMedium ? this.linesMedium.toString() : null,\n          '--lines-large': this.linesLarge ? this.linesLarge.toString() : null,\n          '--lines-ultra': this.linesUltra ? this.linesUltra.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div\n            ref={(el) => (this.textElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text\"\n          >\n            <slot></slot>\n          </div>\n\n          <div\n            ref={(el) => (this.textCloneElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text is-clone\"\n            aria-hidden=\"true\"\n          ></div>\n\n          {this.showExpandLink && this.clamped &&\n            <stzh-link\n              class=\"stzh-clamp__trigger\"\n              a11yTabindex=\"-1\"\n              aria-hidden=\"true\"\n              onClick={this.handleExpandClick}\n            >\n              {!this.expanded ? this.localization.showMore : this.localization.showLess}\n            </stzh-link>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-contact.js

@@ -26,6 +26,7 @@ const StzhContact$1 = /*@__PURE__*/ proxyCustomElement(class StzhContact extends
     this.heading = undefined;
     this.mainHeading = undefined;
     this.name = undefined;
+    this.address = undefined;
     this.street = undefined;
     this.streetInfo = undefined;
     this.postalCode = undefined;
@@ -67,21 +68,23 @@ const StzhContact$1 = /*@__PURE__*/ proxyCustomElement(class StzhContact extends
   }
   render() {
     const hasImage = hasSlot(this.element, "image");
+    const hasAddress = !!this.address || hasSlot(this.element, "address");
     const classes = {
       "stzh-contact": true,
       "stzh-contact--has-image": hasImage,
+      "stzh-contact--has-address": hasAddress,
       "stzh-contact--has-border": this.withBorder
     };
     return (h(Host, null, h("div", { class: classes, itemscope: true, itemtype: `http://schema.org/${this.type}` }, h("div", { class: "stzh-contact__image" }, h("slot", { name: "image" })), h("div", { class: "stzh-contact__wrapper" }, this.mainHeading &&
       h("stzh-heading", { level: "3", class: "stzh-contact__main-heading", itemprop: (this.type === "Organization" && !this.heading
           || this.type === "Person" && !this.name) ? "name" : null, innerHTML: this.mainHeading }), h("div", { class: "stzh-contact__inner-wrapper" }, h("div", { class: "stzh-contact__info" }, this.heading &&
       h("stzh-heading", { level: "4", class: "stzh-contact__heading", itemprop: this.type === "Organization" || !this.name ? "name" : null, innerHTML: this.heading }), this.name &&
-      h("div", { class: "stzh-contact__name", itemprop: this.type === "Person" ? "name" : null }, this.name), (this.street || this.postalCode || this.location) &&
-      h("div", { class: "stzh-contact__address", itemprop: "address", itemscope: true, itemtype: "http://schema.org/PostalAddress" }, this.street &&
+      h("div", { class: "stzh-contact__name", itemprop: this.type === "Person" ? "name" : null }, this.name), h("div", { class: "stzh-contact__address", itemprop: "address", itemscope: true, itemtype: "http://schema.org/PostalAddress", innerHTML: this.address }, !this.address &&
+      h(Fragment, null, this.street &&
         h("div", { class: "stzh-contact__street", itemprop: "streetAddress" }, this.street, this.streetInfo &&
           h(Fragment, null, h("br", null), " ", this.streetInfo)), this.postalCode &&
         h("span", { class: "stzh-contact__postal-code", itemprop: "postalCode" }, this.postalCode, "\u00A0"), this.location &&
-        h("span", { class: "stzh-contact__locality", itemprop: "addressLocality" }, this.location)), this._numbers.map((number) => h("div", { class: "stzh-contact__number" }, h("span", null, number.label, "\u00A0"), h("span", { itemprop: number.type === "fax" ? "faxNumber" : "telephone" }, h("a", { class: "stzh-contact__number-link", href: `${number.type}:${formatTel(number.number)}`, "s-object-id": number.analyticsId || (`${number.label} ${number.number}`) }, number.number)))), (this.poBoxHeading || this.poboxTitle || this.poboxPostalCode || this.poboxLocation) &&
+        h("span", { class: "stzh-contact__locality", itemprop: "addressLocality" }, this.location), h("slot", { name: "address" }))), this._numbers.map((number) => h("div", { class: "stzh-contact__number" }, h("span", null, number.label, "\u00A0"), h("span", { itemprop: number.type === "fax" ? "faxNumber" : "telephone" }, h("a", { class: "stzh-contact__number-link", href: `${number.type}:${formatTel(number.number)}`, "s-object-id": number.analyticsId || (`${number.label} ${number.number}`) }, number.number)))), (this.poBoxHeading || this.poboxTitle || this.poboxPostalCode || this.poboxLocation) &&
       h("div", { class: "stzh-contact__pobox" }, h("div", { class: "stzh-contact__pobox-heading" }, this.poBoxHeading), h("div", { class: "stzh-contact__pobox-title" }, this.poboxTitle), h("span", { class: "stzh-contact__pobox-postal-code" }, this.poboxPostalCode, "\u00A0"), h("span", { class: "stzh-contact__pobox-locality" }, this.poboxLocation))), this.availability &&
       h("div", { class: "stzh-contact__availability" }, this.availabilityTitle &&
         h("stzh-heading", { level: "4", class: "stzh-contact__availability-title" }, this.availabilityTitle), h("stzh-datalist", { hideBorder: true, directionSmall: "vertical", items: this.availabilityDataItems })))))));
@@ -97,6 +100,7 @@ const StzhContact$1 = /*@__PURE__*/ proxyCustomElement(class StzhContact extends
     "heading": [1],
     "mainHeading": [1, "main-heading"],
     "name": [1],
+    "address": [1],
     "street": [1],
     "streetInfo": [1, "street-info"],
     "postalCode": [1, "postal-code"],

package/dist/components/stzh-contact.js.map

@@ -1 +1 @@
-{"file":"stzh-contact.js","mappings":";;;;;;;;;;;;AAAA,MAAM,cAAc,GAAG,s1JAAs1J;;ACkB72J,SAAS,SAAS,CAAC,GAAW;EAC5B,OAAO,GAAG,CAAC,OAAO,CAAC,KAAK,EAAC,EAAE,CAAC,CAAC;AAC/B,CAAC;MASYA,aAAW;;;;IAgCd,aAAQ,GAAoB,EAAE,CAAC;IAmB/B,kBAAa,GAAkC,EAAE,CAAC;IAClD,0BAAqB,GAA4B,EAAE,CAAC;gBAlDlB,cAAc;;;;;;;;mBA6BZ,EAAE;;;;;;;sBAwBhB,KAAK;;EAGnC,mBAAmB,CAAC,QAAgD;IAClE,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KAC3C;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;IAED,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,MAAM;QAC7D,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;QAC7B,KAAK,EAAE,IAAI,CAAC,OAAO;OACpB,CAAC,CAAC,CAAC;KACL;GACF;EAGD,cAAc,CAAC,QAAkC;IAC/C,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACtC;SAAM;MACL,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;KAC1B;GACF;EAID,MAAM,iBAAiB;IACrB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GAC7C;EAED,MAAM;IACJ,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,yBAAyB,EAAE,QAAQ;MACnC,0BAA0B,EAAE,IAAI,CAAC,UAAU;KAC5C,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,EAAE,SAAS,QAAC,QAAQ,EAAE,qBAAqB,IAAI,CAAC,IAAI,EAAE,IACvE,WAAK,KAAK,EAAC,qBAAqB,IAC9B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EAEN,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,WAAW;MACf,oBACE,KAAK,EAAC,GAAG,EACT,KAAK,EAAC,4BAA4B,EAClC,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,CAAC,IAAI,CAAC,OAAO;aACnD,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,IAAI,EAC1D,SAAS,EAAE,IAAI,CAAC,WAAW,GACb,EAGlB,WAAK,KAAK,EAAC,6BAA6B,IACtC,WAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,OAAO;MACX,oBACE,KAAK,EAAC,GAAG,EACT,KAAK,EAAC,uBAAuB,EAC7B,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,IAAI,EACpE,SAAS,EAAE,IAAI,CAAC,OAAO,GACT,EAGjB,IAAI,CAAC,IAAI;MACR,WACE,KAAK,EAAC,oBAAoB,EAC1B,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,MAAM,GAAG,IAAI,IAE/C,IAAI,CAAC,IAAI,CACN,EAGP,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ;MAC/C,WACE,KAAK,EAAC,uBAAuB,EAC7B,QAAQ,EAAC,SAAS,EAClB,SAAS,QACT,QAAQ,EAAC,iCAAiC,IAEzC,IAAI,CAAC,MAAM;QACV,WAAK,KAAK,EAAC,sBAAsB,EAAC,QAAQ,EAAC,eAAe,IACvD,IAAI,CAAC,MAAM,EAEX,IAAI,CAAC,UAAU;UACd,EAAC,QAAQ,QACP,aAAM,OAAE,IAAI,CAAC,UAAU,CACd,CAET,EAGP,IAAI,CAAC,UAAU;QACd,YAAM,KAAK,EAAC,2BAA2B,EAAC,QAAQ,EAAC,YAAY,IAC1D,IAAI,CAAC,UAAU,WACX,EAGR,IAAI,CAAC,QAAQ;QACZ,YAAM,KAAK,EAAC,wBAAwB,EAAC,QAAQ,EAAC,iBAAiB,IAC5D,IAAI,CAAC,QAAQ,CACT,CAEL,EAGP,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,MAAM,KACxB,WAAK,KAAK,EAAC,sBAAsB,IAC/B,gBAAO,MAAM,CAAC,KAAK,WAAc,EACjC,YAAM,QAAQ,EAAE,MAAM,CAAC,IAAI,KAAK,KAAK,GAAG,WAAW,GAAG,WAAW,IAC/D,SACE,KAAK,EAAC,2BAA2B,EACjC,IAAI,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,iBACrC,MAAM,CAAC,WAAW,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC,IAEtE,MAAM,CAAC,MAAM,CACZ,CACC,CACH,CACP,EAEA,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,aAAa;MAClF,WAAK,KAAK,EAAC,qBAAqB,IAC9B,WAAK,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,YAAY,CAAO,EAClE,WAAK,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,UAAU,CAAO,EAC9D,YAAM,KAAK,EAAC,iCAAiC,IAAE,IAAI,CAAC,eAAe,WAAc,EACjF,YAAM,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,aAAa,CAAQ,CAClE,CAEJ,EAEL,IAAI,CAAC,YAAY;MAChB,WAAK,KAAK,EAAC,4BAA4B,IACpC,IAAI,CAAC,iBAAiB;QACrB,oBACE,KAAK,EAAC,GAAG,EACT,KAAK,EAAC,kCAAkC,IAEvC,IAAI,CAAC,iBAAiB,CACV,EAGjB,qBACE,UAAU,EAAE,IAAI,EAChB,cAAc,EAAE,UAAU,EAC1B,KAAK,EAAE,IAAI,CAAC,qBAAqB,GAClB,CACb,CAEJ,CACF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhContact"],"sources":["src/components/stzh-contact/stzh-contact.scss?tag=stzh-contact&encapsulation=scoped","src/components/stzh-contact/stzh-contact.tsx"],"sourcesContent":[":host {\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  ::slotted([slot=\"image\"]) {\n    width: 88px;\n    height: 88px;\n    top: 0;\n    left: 0;\n    border-radius: 50%;\n    object-fit: cover;\n    margin-bottom: space('xlarge');\n\n    @include mq($from: smallheader) {\n      @include spaceCurve('margin-right', 'medium');\n      margin-bottom: 0;\n    }\n\n    @include mq($from: large) {\n      width: 196px;\n      height: 196px;\n    }\n  }\n}\n\n.stzh-contact {\n  @include fontCurve('p1');\n\n  &,\n  &__inner-wrapper {\n    display: flex;\n    flex-direction: column;\n\n    @include mq($from: smallheader) {\n      flex-direction: row;\n    }\n  }\n\n  &__wrapper {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__image {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n\t&__pobox {\n    @include spaceCurve('margin-top', 'small')\n  }\n\n  &__main-heading {\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  &__number-link {\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n\n    &:hover,\n    &:focus {\n      color: $linkHoverColor;\n    }\n  }\n\n  &__info {\n    flex-grow: 1;\n\n    @include mq($from: smallheader) {\n\t\t\tflex-basis: 45%;\n\t\t}\n  }\n\n  &__availability-title {\n    margin-bottom: space('xsmall');\n  }\n\n  &__availability {\n    margin-top: space('xlarge');\n\n    @include mq($from: smallheader) {\n      @include spaceCurve('margin-left', 'medium');\n      margin-top: 0;\n\t\t\tflex-basis: 55%;\n    }\n  }\n\n  /* Has border */\n\n  &--has-border {\n    padding-bottom: space('xlarge');\n    border-bottom: 1px solid $baseBorderColor;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Fragment,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  ContactNumber,\n  StzhContactAvailabilityItem,\n  StzhDatalistItemEntry\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nfunction formatTel(tel: string) {\n  return tel.replace(/\\s/g,'');\n}\n\n/**\n */\n@Component({\n  tag: \"stzh-contact\",\n  styleUrl: \"stzh-contact.scss\",\n  scoped: true\n})\nexport class StzhContact {\n  /** Type */\n  @Prop() type: \"Organization\" | \"Person\" = \"Organization\";\n\n  /** Heading */\n  @Prop() heading: string;\n\n  /** Main heading */\n  @Prop() mainHeading: string;\n\n  /** Name */\n  @Prop() name: string;\n\n  /** Street */\n  @Prop() street: string;\n\n  /** Additional street info */\n  @Prop() streetInfo: string;\n\n  /** Postal code */\n  @Prop() postalCode: string;\n\n  /** Location / city */\n  @Prop() location: string;\n\n  /**\n   * Numbers\n   * Array of objects that can include the attributes `type` = `tel`|`fax`, `label`, `number`\n   * and optionally `analyticsId` for setting `s-object-id` to the link element\n   * (for Adobe Analytics, default value is `label` and `number`).\n   */\n  @Prop() numbers: ContactNumber[] | string = [];\n  private _numbers: ContactNumber[] = [];\n\n  /** Post office box heading */\n  @Prop() poBoxHeading: string;\n\n  /** Post office box title */\n  @Prop() poboxTitle: string;\n\n  /** Post office box postal code */\n  @Prop() poboxPostalCode: string;\n\n  /** Post office box location / city */\n  @Prop() poboxLocation: string;\n\n  /** Availability title */\n  @Prop() availabilityTitle: string;\n\n  /** Availability times */\n  @Prop() availability: string | StzhContactAvailabilityItem[];\n  private _availability: StzhContactAvailabilityItem[] = [];\n  private availabilityDataItems: StzhDatalistItemEntry[] = [];\n\n  /** Whether to display border or not */\n  @Prop() withBorder: boolean = false;\n\n  @Watch(\"availability\")\n  availabilityWatcher(newValue: string | StzhContactAvailabilityItem[]) {\n    if (typeof newValue === \"string\") {\n      this._availability = JSON.parse(newValue);\n    } else {\n      this._availability = newValue;\n    }\n\n    if (this._availability) {\n      this.availabilityDataItems = this._availability.map((item) => ({\n        value: item.hours.join(' | '),\n        label: item.weekday\n      }));\n    }\n  }\n\n  @Watch(\"numbers\")\n  numbersWatcher(newValue: ContactNumber[] | string) {\n    if (typeof newValue === \"string\") {\n      this._numbers = JSON.parse(newValue);\n    } else {\n      this._numbers = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhFigureElement;\n\n  async componentWillLoad() {\n    this.numbersWatcher(this.numbers);\n    this.availabilityWatcher(this.availability);\n  }\n\n  render() {\n    const hasImage = hasSlot(this.element, \"image\");\n\n    const classes = {\n      \"stzh-contact\": true,\n      \"stzh-contact--has-image\": hasImage,\n      \"stzh-contact--has-border\": this.withBorder\n    };\n\n    return (\n      <Host>\n        <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n          <div class=\"stzh-contact__image\">\n            <slot name=\"image\"></slot>\n          </div>\n\n          <div class=\"stzh-contact__wrapper\">\n            {this.mainHeading &&\n              <stzh-heading\n                level=\"3\"\n                class=\"stzh-contact__main-heading\"\n                itemprop={(this.type === \"Organization\" && !this.heading\n                  || this.type === \"Person\" && !this.name) ? \"name\" : null}\n                innerHTML={this.mainHeading}\n              ></stzh-heading>\n            }\n\n            <div class=\"stzh-contact__inner-wrapper\">\n              <div class=\"stzh-contact__info\">\n                {this.heading &&\n                  <stzh-heading\n                    level=\"4\"\n                    class=\"stzh-contact__heading\"\n                    itemprop={this.type === \"Organization\" || !this.name ? \"name\" : null}\n                    innerHTML={this.heading}\n                  ></stzh-heading>\n                }\n\n                {this.name &&\n                  <div\n                    class=\"stzh-contact__name\"\n                    itemprop={this.type === \"Person\" ? \"name\" : null}\n                  >\n                    {this.name}\n                  </div>\n                }\n\n                {(this.street || this.postalCode || this.location) &&\n                  <div\n                    class=\"stzh-contact__address\"\n                    itemprop=\"address\"\n                    itemscope\n                    itemtype=\"http://schema.org/PostalAddress\"\n                  >\n                    {this.street &&\n                      <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n                        {this.street}\n\n                        {this.streetInfo &&\n                          <Fragment>\n                            <br /> {this.streetInfo}\n                          </Fragment>\n                        }\n                      </div>\n                    }\n\n                    {this.postalCode &&\n                      <span class=\"stzh-contact__postal-code\" itemprop=\"postalCode\">\n                        {this.postalCode}&nbsp;\n                      </span>\n                    }\n\n                    {this.location &&\n                      <span class=\"stzh-contact__locality\" itemprop=\"addressLocality\">\n                        {this.location}\n                      </span>\n                    }\n                  </div>\n                }\n\n                {this._numbers.map((number) =>\n                  <div class=\"stzh-contact__number\">\n                    <span>{number.label}&nbsp;</span>\n                    <span itemprop={number.type === \"fax\" ? \"faxNumber\" : \"telephone\"}>\n                      <a\n                        class=\"stzh-contact__number-link\"\n                        href={`${number.type}:${formatTel(number.number)}`}\n                        s-object-id={number.analyticsId || (`${number.label} ${number.number}`)}\n                      >\n                        {number.number}\n                      </a>\n                    </span>\n                  </div>\n                )}\n\n                {(this.poBoxHeading || this.poboxTitle || this.poboxPostalCode || this.poboxLocation) &&\n                  <div class=\"stzh-contact__pobox\">\n                    <div class=\"stzh-contact__pobox-heading\">{this.poBoxHeading}</div>\n                    <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>\n                    <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode}&nbsp;</span>\n                    <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>\n                  </div>\n                }\n              </div>\n\n              {this.availability &&\n                <div class=\"stzh-contact__availability\">\n                  {this.availabilityTitle &&\n                    <stzh-heading\n                      level=\"4\"\n                      class=\"stzh-contact__availability-title\"\n                    >\n                      {this.availabilityTitle}\n                    </stzh-heading>\n                  }\n\n                  <stzh-datalist\n                    hideBorder={true}\n                    directionSmall={\"vertical\"}\n                    items={this.availabilityDataItems}\n                  ></stzh-datalist>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-contact.js","mappings":"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","names":["StzhContact"],"sources":["src/components/stzh-contact/stzh-contact.scss?tag=stzh-contact&encapsulation=scoped","src/components/stzh-contact/stzh-contact.tsx"],"sourcesContent":[":host {\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  ::slotted([slot=\"image\"]) {\n    width: 88px;\n    height: 88px;\n    top: 0;\n    left: 0;\n    border-radius: 50%;\n    object-fit: cover;\n    margin-bottom: space('xlarge');\n\n    @include mq($from: smallheader) {\n      @include spaceCurve('margin-right', 'medium');\n      margin-bottom: 0;\n    }\n\n    @include mq($from: large) {\n      width: 196px;\n      height: 196px;\n    }\n  }\n}\n\n.stzh-contact {\n  @include fontCurve('p1');\n\n  &,\n  &__inner-wrapper {\n    display: flex;\n    flex-direction: column;\n\n    @include mq($from: smallheader) {\n      flex-direction: row;\n    }\n  }\n\n  &__wrapper {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__image {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n\t&__pobox {\n    @include spaceCurve('margin-top', 'small')\n  }\n\n  &__main-heading {\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  &__number-link {\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n\n    &:hover,\n    &:focus {\n      color: $linkHoverColor;\n    }\n  }\n\n  &__info {\n    flex-grow: 1;\n\n    @include mq($from: smallheader) {\n\t\t\tflex-basis: 45%;\n\t\t}\n  }\n\n  &__availability-title {\n    margin-bottom: space('xsmall');\n  }\n\n  &__availability {\n    margin-top: space('xlarge');\n\n    @include mq($from: smallheader) {\n      @include spaceCurve('margin-left', 'medium');\n      margin-top: 0;\n\t\t\tflex-basis: 55%;\n    }\n  }\n\n  /* Has border */\n\n  &--has-border {\n    padding-bottom: space('xlarge');\n    border-bottom: 1px solid $baseBorderColor;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Fragment,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  ContactNumber,\n  StzhContactAvailabilityItem,\n  StzhDatalistItemEntry\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nfunction formatTel(tel: string) {\n  return tel.replace(/\\s/g,'');\n}\n\n/**\n * @slot image - slot for image\n * @slot address - slot for address (alternative for `address` property or separate properties `street`, `streetInfo`, `postalCode` & `location`)\n */\n@Component({\n  tag: \"stzh-contact\",\n  styleUrl: \"stzh-contact.scss\",\n  scoped: true\n})\nexport class StzhContact {\n  /** Type */\n  @Prop() type: \"Organization\" | \"Person\" = \"Organization\";\n\n  /** Heading */\n  @Prop() heading: string;\n\n  /** Main heading */\n  @Prop() mainHeading: string;\n\n  /** Name */\n  @Prop() name: string;\n\n  /** Address (alternative for address slot or separate properties `street`, `streetInfo`, `postalCode` & `location`) */\n  @Prop() address: string;\n\n  /** Street */\n  @Prop() street: string;\n\n  /** Additional street info */\n  @Prop() streetInfo: string;\n\n  /** Postal code */\n  @Prop() postalCode: string;\n\n  /** Location / city */\n  @Prop() location: string;\n\n  /**\n   * Numbers\n   * Array of objects that can include the attributes `type` = `tel`|`fax`, `label`, `number`\n   * and optionally `analyticsId` for setting `s-object-id` to the link element\n   * (for Adobe Analytics, default value is `label` and `number`).\n   */\n  @Prop() numbers: ContactNumber[] | string = [];\n  private _numbers: ContactNumber[] = [];\n\n  /** Post office box heading */\n  @Prop() poBoxHeading: string;\n\n  /** Post office box title */\n  @Prop() poboxTitle: string;\n\n  /** Post office box postal code */\n  @Prop() poboxPostalCode: string;\n\n  /** Post office box location / city */\n  @Prop() poboxLocation: string;\n\n  /** Availability title */\n  @Prop() availabilityTitle: string;\n\n  /** Availability times */\n  @Prop() availability: string | StzhContactAvailabilityItem[];\n  private _availability: StzhContactAvailabilityItem[] = [];\n  private availabilityDataItems: StzhDatalistItemEntry[] = [];\n\n  /** Whether to display border or not */\n  @Prop() withBorder: boolean = false;\n\n  @Watch(\"availability\")\n  availabilityWatcher(newValue: string | StzhContactAvailabilityItem[]) {\n    if (typeof newValue === \"string\") {\n      this._availability = JSON.parse(newValue);\n    } else {\n      this._availability = newValue;\n    }\n\n    if (this._availability) {\n      this.availabilityDataItems = this._availability.map((item) => ({\n        value: item.hours.join(' | '),\n        label: item.weekday\n      }));\n    }\n  }\n\n  @Watch(\"numbers\")\n  numbersWatcher(newValue: ContactNumber[] | string) {\n    if (typeof newValue === \"string\") {\n      this._numbers = JSON.parse(newValue);\n    } else {\n      this._numbers = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhFigureElement;\n\n  async componentWillLoad() {\n    this.numbersWatcher(this.numbers);\n    this.availabilityWatcher(this.availability);\n  }\n\n  render() {\n    const hasImage = hasSlot(this.element, \"image\");\n    const hasAddress = !!this.address || hasSlot(this.element, \"address\");\n\n    const classes = {\n      \"stzh-contact\": true,\n      \"stzh-contact--has-image\": hasImage,\n      \"stzh-contact--has-address\": hasAddress,\n      \"stzh-contact--has-border\": this.withBorder\n    };\n\n    return (\n      <Host>\n        <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n          <div class=\"stzh-contact__image\">\n            <slot name=\"image\"></slot>\n          </div>\n\n          <div class=\"stzh-contact__wrapper\">\n            {this.mainHeading &&\n              <stzh-heading\n                level=\"3\"\n                class=\"stzh-contact__main-heading\"\n                itemprop={(this.type === \"Organization\" && !this.heading\n                  || this.type === \"Person\" && !this.name) ? \"name\" : null}\n                innerHTML={this.mainHeading}\n              ></stzh-heading>\n            }\n\n            <div class=\"stzh-contact__inner-wrapper\">\n              <div class=\"stzh-contact__info\">\n                {this.heading &&\n                  <stzh-heading\n                    level=\"4\"\n                    class=\"stzh-contact__heading\"\n                    itemprop={this.type === \"Organization\" || !this.name ? \"name\" : null}\n                    innerHTML={this.heading}\n                  ></stzh-heading>\n                }\n\n                {this.name &&\n                  <div\n                    class=\"stzh-contact__name\"\n                    itemprop={this.type === \"Person\" ? \"name\" : null}\n                  >\n                    {this.name}\n                  </div>\n                }\n\n                <div\n                  class=\"stzh-contact__address\"\n                  itemprop=\"address\"\n                  itemscope\n                  itemtype=\"http://schema.org/PostalAddress\"\n                  innerHTML={this.address}\n                >\n                  {!this.address && \n                    <Fragment>\n                      {this.street &&\n                        <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n                          {this.street}\n\n                          {this.streetInfo &&\n                            <Fragment>\n                              <br /> {this.streetInfo}\n                            </Fragment>\n                          }\n                        </div>\n                      }\n\n                      {this.postalCode &&\n                        <span class=\"stzh-contact__postal-code\" itemprop=\"postalCode\">\n                          {this.postalCode}&nbsp;\n                        </span>\n                      }\n\n                      {this.location &&\n                        <span class=\"stzh-contact__locality\" itemprop=\"addressLocality\">\n                          {this.location}\n                        </span>\n                      }\n\n                      <slot name=\"address\"></slot>\n                    </Fragment>\n                  }\n                </div>\n\n                {this._numbers.map((number) =>\n                  <div class=\"stzh-contact__number\">\n                    <span>{number.label}&nbsp;</span>\n                    <span itemprop={number.type === \"fax\" ? \"faxNumber\" : \"telephone\"}>\n                      <a\n                        class=\"stzh-contact__number-link\"\n                        href={`${number.type}:${formatTel(number.number)}`}\n                        s-object-id={number.analyticsId || (`${number.label} ${number.number}`)}\n                      >\n                        {number.number}\n                      </a>\n                    </span>\n                  </div>\n                )}\n\n                {(this.poBoxHeading || this.poboxTitle || this.poboxPostalCode || this.poboxLocation) &&\n                  <div class=\"stzh-contact__pobox\">\n                    <div class=\"stzh-contact__pobox-heading\">{this.poBoxHeading}</div>\n                    <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>\n                    <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode}&nbsp;</span>\n                    <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>\n                  </div>\n                }\n              </div>\n\n              {this.availability &&\n                <div class=\"stzh-contact__availability\">\n                  {this.availabilityTitle &&\n                    <stzh-heading\n                      level=\"4\"\n                      class=\"stzh-contact__availability-title\"\n                    >\n                      {this.availabilityTitle}\n                    </stzh-heading>\n                  }\n\n                  <stzh-datalist\n                    hideBorder={true}\n                    directionSmall={\"vertical\"}\n                    items={this.availabilityDataItems}\n                  ></stzh-datalist>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-cspace.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const stzhCspaceCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{}:host ::slotted(stzh-input),:host ::slotted(stzh-datepicker),:host ::slotted(stzh-dropdown),:host ::slotted(stzh-langnav),:host ::slotted(stzh-fieldset),:host ::slotted(stzh-actions),:host ::slotted(stzh-upload),:host ::slotted(stzh-saptcha),:host ::slotted(stzh-checkboxgroup),:host ::slotted(stzh-radiogroup),:host ::slotted(stzh-message){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(h1),:host ::slotted(stzh-heading[level=\"1\"]),:host ::slotted(h2),:host ::slotted(stzh-heading[level=\"2\"]){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(h1),:host ::slotted(stzh-heading[level=\"1\"]),:host ::slotted(h2),:host ::slotted(stzh-heading[level=\"2\"]){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(h1),:host ::slotted(stzh-heading[level=\"1\"]),:host ::slotted(h2),:host ::slotted(stzh-heading[level=\"2\"]){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(h1),:host ::slotted(stzh-heading[level=\"1\"]),:host ::slotted(h2),:host ::slotted(stzh-heading[level=\"2\"]){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(h1),:host ::slotted(stzh-heading[level=\"1\"]),:host ::slotted(h2),:host ::slotted(stzh-heading[level=\"2\"]){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(h3),:host ::slotted(stzh-heading[level=\"3\"]),:host ::slotted(h4),:host ::slotted(stzh-heading[level=\"4\"]){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(h3),:host ::slotted(stzh-heading[level=\"3\"]),:host ::slotted(h4),:host ::slotted(stzh-heading[level=\"4\"]){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(h3),:host ::slotted(stzh-heading[level=\"3\"]),:host ::slotted(h4),:host ::slotted(stzh-heading[level=\"4\"]){margin-top:var(--stzh-space-xxxlarge)}}:host ::slotted(p),:host ::slotted(stzh-text),:host ::slotted(ul),:host ::slotted(ol),:host ::slotted(dl),:host ::slotted(stzh-list){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host ::slotted(p),:host ::slotted(stzh-text),:host ::slotted(ul),:host ::slotted(ol),:host ::slotted(dl),:host ::slotted(stzh-list){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(p),:host ::slotted(stzh-text),:host ::slotted(ul),:host ::slotted(ol),:host ::slotted(dl),:host ::slotted(stzh-list){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){:host ::slotted(p),:host ::slotted(stzh-text),:host ::slotted(ul),:host ::slotted(ol),:host ::slotted(dl),:host ::slotted(stzh-list){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(p),:host ::slotted(stzh-text),:host ::slotted(ul),:host ::slotted(ol),:host ::slotted(dl),:host ::slotted(stzh-list){margin-bottom:var(--stzh-space-large)}}:host ::slotted(stzh-text[curve=hero]),:host ::slotted(stzh-heading[curve=hero]){margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=hero]),:host ::slotted(stzh-heading[curve=hero]){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=hero]),:host ::slotted(stzh-heading[curve=hero]){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-top:var(--stzh-space-xxxxlarge)}}:host ::slotted(stzh-text[curve=h3]),:host ::slotted(stzh-heading[curve=h3]),:host ::slotted(stzh-text[curve=h4]),:host ::slotted(stzh-heading[curve=h4]){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=h3]),:host ::slotted(stzh-heading[curve=h3]),:host ::slotted(stzh-text[curve=h4]),:host ::slotted(stzh-heading[curve=h4]){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=h3]),:host ::slotted(stzh-heading[curve=h3]),:host ::slotted(stzh-text[curve=h4]),:host ::slotted(stzh-heading[curve=h4]){margin-top:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-text[curve=p1]),:host ::slotted(stzh-text[curve=p2]),:host ::slotted(stzh-heading[curve=p1]),:host ::slotted(stzh-heading[curve=p2]){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=p1]),:host ::slotted(stzh-text[curve=p2]),:host ::slotted(stzh-heading[curve=p1]),:host ::slotted(stzh-heading[curve=p2]){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=p1]),:host ::slotted(stzh-text[curve=p2]),:host ::slotted(stzh-heading[curve=p1]),:host ::slotted(stzh-heading[curve=p2]){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=p1]),:host ::slotted(stzh-text[curve=p2]),:host ::slotted(stzh-heading[curve=p1]),:host ::slotted(stzh-heading[curve=p2]){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=p1]),:host ::slotted(stzh-text[curve=p2]),:host ::slotted(stzh-heading[curve=p1]),:host ::slotted(stzh-heading[curve=p2]){margin-bottom:var(--stzh-space-large)}}:host ::slotted(.section),:host ::slotted(stzh-accordion),:host ::slotted(stzh-anchornav),:host ::slotted(stzh-audio),:host ::slotted(stzh-iframe),:host ::slotted(stzh-youtube),:host ::slotted(stzh-microsite-teaserlist),:host ::slotted(stzh-textandimage),:host ::slotted(stzh-figure),:host ::slotted(stzh-panorama),:host ::slotted(stzh-chart),:host ::slotted(stzh-sitemap),:host ::slotted(stzh-section),:host ::slotted(stzh-hr),:host ::slotted(stzh-vbz-ticker){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host ::slotted(.section),:host ::slotted(stzh-accordion),:host ::slotted(stzh-anchornav),:host ::slotted(stzh-audio),:host ::slotted(stzh-iframe),:host ::slotted(stzh-youtube),:host ::slotted(stzh-microsite-teaserlist),:host ::slotted(stzh-textandimage),:host ::slotted(stzh-figure),:host ::slotted(stzh-panorama),:host ::slotted(stzh-chart),:host ::slotted(stzh-sitemap),:host ::slotted(stzh-section),:host ::slotted(stzh-hr),:host ::slotted(stzh-vbz-ticker){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.section),:host ::slotted(stzh-accordion),:host ::slotted(stzh-anchornav),:host ::slotted(stzh-audio),:host ::slotted(stzh-iframe),:host ::slotted(stzh-youtube),:host ::slotted(stzh-microsite-teaserlist),:host ::slotted(stzh-textandimage),:host ::slotted(stzh-figure),:host ::slotted(stzh-panorama),:host ::slotted(stzh-chart),:host ::slotted(stzh-sitemap),:host ::slotted(stzh-section),:host ::slotted(stzh-hr),:host ::slotted(stzh-vbz-ticker){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.section),:host ::slotted(stzh-accordion),:host ::slotted(stzh-anchornav),:host ::slotted(stzh-audio),:host ::slotted(stzh-iframe),:host ::slotted(stzh-youtube),:host ::slotted(stzh-microsite-teaserlist),:host ::slotted(stzh-textandimage),:host ::slotted(stzh-figure),:host ::slotted(stzh-panorama),:host ::slotted(stzh-chart),:host ::slotted(stzh-sitemap),:host ::slotted(stzh-section),:host ::slotted(stzh-hr),:host ::slotted(stzh-vbz-ticker){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.section),:host ::slotted(stzh-accordion),:host ::slotted(stzh-anchornav),:host ::slotted(stzh-audio),:host ::slotted(stzh-iframe),:host ::slotted(stzh-youtube),:host ::slotted(stzh-microsite-teaserlist),:host ::slotted(stzh-textandimage),:host ::slotted(stzh-figure),:host ::slotted(stzh-panorama),:host ::slotted(stzh-chart),:host ::slotted(stzh-sitemap),:host ::slotted(stzh-section),:host ::slotted(stzh-hr),:host ::slotted(stzh-vbz-ticker){margin-bottom:var(--stzh-space-xxxxlarge)}}:host ::slotted(stzh-olmap),:host ::slotted(stzh-anchornav){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-olmap),:host ::slotted(stzh-anchornav){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-olmap),:host ::slotted(stzh-anchornav){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-olmap),:host ::slotted(stzh-anchornav){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-olmap),:host ::slotted(stzh-anchornav){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-contact),:host ::slotted(stzh-card){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host ::slotted(stzh-contact),:host ::slotted(stzh-card){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-contact),:host ::slotted(stzh-card){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-contact),:host ::slotted(stzh-card){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-contact),:host ::slotted(stzh-card){margin-bottom:var(--stzh-space-xlarge)}}:host ::slotted(stzh-table),:host ::slotted(stzh-datatable){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-table),:host ::slotted(stzh-datatable){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-table),:host ::slotted(stzh-datatable){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-table),:host ::slotted(stzh-datatable){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-table),:host ::slotted(stzh-datatable){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-pagetitle){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-pagetitle){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-pagetitle){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-pagetitle){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-pagetitle){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-pagebottom){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-pagebottom){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-pagebottom){margin-top:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-progressbar){margin-top:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){:host ::slotted(stzh-progressbar){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-progressbar){margin-top:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-progressbar){margin-top:var(--stzh-space-xbig)}}:host ::slotted(stzh-pagination){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}:host ::slotted(stzh-actions){margin-top:var(--stzh-space-xxlarge)}:host ::slotted(stzh-actions)[variant=process]{margin-top:var(--stzh-space-large)}:host ::slotted(stzh-fieldset){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(stzh-fieldset)[legend]{margin-top:var(--stzh-space-xxlarge)}:host ::slotted(stzh-heading[level=\"4\"]+stzh-datalist),:host ::slotted(stzh-heading[curve=h4]+stzh-datalist){margin-top:0}:host ::slotted(.cspace-y-curve-tiny){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-tiny){margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-tiny){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-tiny){margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-tiny){margin-bottom:var(--stzh-space-medium)}}:host ::slotted(.cspace-t-curve-tiny){margin-top:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-t-curve-tiny){margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-t-curve-tiny){margin-top:var(--stzh-space-medium)}}:host ::slotted(.cspace-b-curve-tiny){margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-b-curve-tiny){margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-b-curve-tiny){margin-bottom:var(--stzh-space-medium)}}:host ::slotted(.cspace-y-curve-small){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-small){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-small){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-small){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-small){margin-bottom:var(--stzh-space-large)}}:host ::slotted(.cspace-t-curve-small){margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-t-curve-small){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-t-curve-small){margin-top:var(--stzh-space-large)}}:host ::slotted(.cspace-b-curve-small){margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-b-curve-small){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-b-curve-small){margin-bottom:var(--stzh-space-large)}}:host ::slotted(.cspace-y-curve-regular){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-regular){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-regular){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-regular){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-regular){margin-bottom:var(--stzh-space-xlarge)}}:host ::slotted(.cspace-t-curve-regular){margin-top:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-t-curve-regular){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-t-curve-regular){margin-top:var(--stzh-space-xlarge)}}:host ::slotted(.cspace-b-curve-regular){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-b-curve-regular){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-b-curve-regular){margin-bottom:var(--stzh-space-xlarge)}}:host ::slotted(.cspace-y-curve-medium){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-medium){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-medium){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-medium){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-medium){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(.cspace-t-curve-medium){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-t-curve-medium){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-t-curve-medium){margin-top:var(--stzh-space-xxxlarge)}}:host ::slotted(.cspace-b-curve-medium){margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-b-curve-medium){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-b-curve-medium){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(.cspace-y-curve-large){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-large){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-large){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-large){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-large){margin-bottom:var(--stzh-space-xxxxlarge)}}:host ::slotted(.cspace-t-curve-large){margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-t-curve-large){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-t-curve-large){margin-top:var(--stzh-space-xxxxlarge)}}:host ::slotted(.cspace-b-curve-large){margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-b-curve-large){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-b-curve-large){margin-bottom:var(--stzh-space-xxxxlarge)}}:host ::slotted(.cspace-y-curve-big){margin-top:var(--stzh-space-xxxlarge);margin-bottom:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){:host ::slotted(.cspace-y-curve-big){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-big){margin-top:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-big){margin-top:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){:host ::slotted(.cspace-y-curve-big){margin-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-big){margin-bottom:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-big){margin-bottom:var(--stzh-space-xbig)}}:host ::slotted(.cspace-t-curve-big){margin-top:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){:host ::slotted(.cspace-t-curve-big){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-t-curve-big){margin-top:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-t-curve-big){margin-top:var(--stzh-space-xbig)}}:host ::slotted(.cspace-b-curve-big){margin-bottom:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){:host ::slotted(.cspace-b-curve-big){margin-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-b-curve-big){margin-bottom:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-b-curve-big){margin-bottom:var(--stzh-space-xbig)}}:host ::slotted(.cspace-y-curve-huge){margin-top:var(--stzh-space-xxxxlarge);margin-bottom:var(--stzh-space-xxxxlarge)}@media screen and (min-width: 600px){:host ::slotted(.cspace-y-curve-huge){margin-top:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-huge){margin-top:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-huge){margin-top:var(--stzh-space-huge)}}@media screen and (min-width: 600px){:host ::slotted(.cspace-y-curve-huge){margin-bottom:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-huge){margin-bottom:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-huge){margin-bottom:var(--stzh-space-huge)}}:host ::slotted(.cspace-t-curve-huge){margin-top:var(--stzh-space-xxxxlarge)}@media screen and (min-width: 600px){:host ::slotted(.cspace-t-curve-huge){margin-top:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-t-curve-huge){margin-top:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-t-curve-huge){margin-top:var(--stzh-space-huge)}}:host ::slotted(.cspace-b-curve-huge){margin-bottom:var(--stzh-space-xxxxlarge)}@media screen and (min-width: 600px){:host ::slotted(.cspace-b-curve-huge){margin-bottom:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-b-curve-huge){margin-bottom:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-b-curve-huge){margin-bottom:var(--stzh-space-huge)}}:host ::slotted(.small\\:cspace-y-xxxsmall){margin-top:var(--stzh-space-xxxsmall);margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.small\\:cspace-t-xxxsmall){margin-top:var(--stzh-space-xxxsmall)}:host ::slotted(.small\\:cspace-b-xxxsmall){margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.small\\:cspace-y-xxsmall){margin-top:var(--stzh-space-xxsmall);margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.small\\:cspace-t-xxsmall){margin-top:var(--stzh-space-xxsmall)}:host ::slotted(.small\\:cspace-b-xxsmall){margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.small\\:cspace-y-xsmall){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.small\\:cspace-t-xsmall){margin-top:var(--stzh-space-xsmall)}:host ::slotted(.small\\:cspace-b-xsmall){margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.small\\:cspace-y-small){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}:host ::slotted(.small\\:cspace-t-small){margin-top:var(--stzh-space-small)}:host ::slotted(.small\\:cspace-b-small){margin-bottom:var(--stzh-space-small)}:host ::slotted(.small\\:cspace-y-medium){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}:host ::slotted(.small\\:cspace-t-medium){margin-top:var(--stzh-space-medium)}:host ::slotted(.small\\:cspace-b-medium){margin-bottom:var(--stzh-space-medium)}:host ::slotted(.small\\:cspace-y-large){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(.small\\:cspace-t-large){margin-top:var(--stzh-space-large)}:host ::slotted(.small\\:cspace-b-large){margin-bottom:var(--stzh-space-large)}:host ::slotted(.small\\:cspace-y-xlarge){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.small\\:cspace-t-xlarge){margin-top:var(--stzh-space-xlarge)}:host ::slotted(.small\\:cspace-b-xlarge){margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.small\\:cspace-y-xxlarge){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.small\\:cspace-t-xxlarge){margin-top:var(--stzh-space-xxlarge)}:host ::slotted(.small\\:cspace-b-xxlarge){margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.small\\:cspace-y-xxxlarge){margin-top:var(--stzh-space-xxxlarge);margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.small\\:cspace-t-xxxlarge){margin-top:var(--stzh-space-xxxlarge)}:host ::slotted(.small\\:cspace-b-xxxlarge){margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.small\\:cspace-y-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge);margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.small\\:cspace-t-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge)}:host ::slotted(.small\\:cspace-b-xxxxlarge){margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.small\\:cspace-y-big){margin-top:var(--stzh-space-big);margin-bottom:var(--stzh-space-big)}:host ::slotted(.small\\:cspace-t-big){margin-top:var(--stzh-space-big)}:host ::slotted(.small\\:cspace-b-big){margin-bottom:var(--stzh-space-big)}:host ::slotted(.small\\:cspace-y-xbig){margin-top:var(--stzh-space-xbig);margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.small\\:cspace-t-xbig){margin-top:var(--stzh-space-xbig)}:host ::slotted(.small\\:cspace-b-xbig){margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.small\\:cspace-y-huge){margin-top:var(--stzh-space-huge);margin-bottom:var(--stzh-space-huge)}:host ::slotted(.small\\:cspace-t-huge){margin-top:var(--stzh-space-huge)}:host ::slotted(.small\\:cspace-b-huge){margin-bottom:var(--stzh-space-huge)}:host ::slotted(.small\\:cspace-y-xhuge){margin-top:var(--stzh-space-xhuge);margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.small\\:cspace-t-xhuge){margin-top:var(--stzh-space-xhuge)}:host ::slotted(.small\\:cspace-b-xhuge){margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.small\\:cspace-y-none){margin-top:var(--stzh-space-none);margin-bottom:var(--stzh-space-none)}:host ::slotted(.small\\:cspace-t-none){margin-top:var(--stzh-space-none)}:host ::slotted(.small\\:cspace-b-none){margin-bottom:var(--stzh-space-none)}:host ::slotted(.small\\:cspace-y-default){margin-top:var(--stzh-space-default);margin-bottom:var(--stzh-space-default)}:host ::slotted(.small\\:cspace-t-default){margin-top:var(--stzh-space-default)}:host ::slotted(.small\\:cspace-b-default){margin-bottom:var(--stzh-space-default)}:host ::slotted(.smallheader\\:cspace-y-xxxsmall){margin-top:var(--stzh-space-xxxsmall);margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.smallheader\\:cspace-t-xxxsmall){margin-top:var(--stzh-space-xxxsmall)}:host ::slotted(.smallheader\\:cspace-b-xxxsmall){margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.smallheader\\:cspace-y-xxsmall){margin-top:var(--stzh-space-xxsmall);margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.smallheader\\:cspace-t-xxsmall){margin-top:var(--stzh-space-xxsmall)}:host ::slotted(.smallheader\\:cspace-b-xxsmall){margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.smallheader\\:cspace-y-xsmall){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.smallheader\\:cspace-t-xsmall){margin-top:var(--stzh-space-xsmall)}:host ::slotted(.smallheader\\:cspace-b-xsmall){margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.smallheader\\:cspace-y-small){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}:host ::slotted(.smallheader\\:cspace-t-small){margin-top:var(--stzh-space-small)}:host ::slotted(.smallheader\\:cspace-b-small){margin-bottom:var(--stzh-space-small)}:host ::slotted(.smallheader\\:cspace-y-medium){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}:host ::slotted(.smallheader\\:cspace-t-medium){margin-top:var(--stzh-space-medium)}:host ::slotted(.smallheader\\:cspace-b-medium){margin-bottom:var(--stzh-space-medium)}:host ::slotted(.smallheader\\:cspace-y-large){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(.smallheader\\:cspace-t-large){margin-top:var(--stzh-space-large)}:host ::slotted(.smallheader\\:cspace-b-large){margin-bottom:var(--stzh-space-large)}:host ::slotted(.smallheader\\:cspace-y-xlarge){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.smallheader\\:cspace-t-xlarge){margin-top:var(--stzh-space-xlarge)}:host ::slotted(.smallheader\\:cspace-b-xlarge){margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.smallheader\\:cspace-y-xxlarge){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.smallheader\\:cspace-t-xxlarge){margin-top:var(--stzh-space-xxlarge)}:host ::slotted(.smallheader\\:cspace-b-xxlarge){margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.smallheader\\:cspace-y-xxxlarge){margin-top:var(--stzh-space-xxxlarge);margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.smallheader\\:cspace-t-xxxlarge){margin-top:var(--stzh-space-xxxlarge)}:host ::slotted(.smallheader\\:cspace-b-xxxlarge){margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.smallheader\\:cspace-y-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge);margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.smallheader\\:cspace-t-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge)}:host ::slotted(.smallheader\\:cspace-b-xxxxlarge){margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.smallheader\\:cspace-y-big){margin-top:var(--stzh-space-big);margin-bottom:var(--stzh-space-big)}:host ::slotted(.smallheader\\:cspace-t-big){margin-top:var(--stzh-space-big)}:host ::slotted(.smallheader\\:cspace-b-big){margin-bottom:var(--stzh-space-big)}:host ::slotted(.smallheader\\:cspace-y-xbig){margin-top:var(--stzh-space-xbig);margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.smallheader\\:cspace-t-xbig){margin-top:var(--stzh-space-xbig)}:host ::slotted(.smallheader\\:cspace-b-xbig){margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.smallheader\\:cspace-y-huge){margin-top:var(--stzh-space-huge);margin-bottom:var(--stzh-space-huge)}:host ::slotted(.smallheader\\:cspace-t-huge){margin-top:var(--stzh-space-huge)}:host ::slotted(.smallheader\\:cspace-b-huge){margin-bottom:var(--stzh-space-huge)}:host ::slotted(.smallheader\\:cspace-y-xhuge){margin-top:var(--stzh-space-xhuge);margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.smallheader\\:cspace-t-xhuge){margin-top:var(--stzh-space-xhuge)}:host ::slotted(.smallheader\\:cspace-b-xhuge){margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.smallheader\\:cspace-y-none){margin-top:var(--stzh-space-none);margin-bottom:var(--stzh-space-none)}:host ::slotted(.smallheader\\:cspace-t-none){margin-top:var(--stzh-space-none)}:host ::slotted(.smallheader\\:cspace-b-none){margin-bottom:var(--stzh-space-none)}:host ::slotted(.smallheader\\:cspace-y-default){margin-top:var(--stzh-space-default);margin-bottom:var(--stzh-space-default)}:host ::slotted(.smallheader\\:cspace-t-default){margin-top:var(--stzh-space-default)}:host ::slotted(.smallheader\\:cspace-b-default){margin-bottom:var(--stzh-space-default)}:host ::slotted(.medium\\:cspace-y-xxxsmall){margin-top:var(--stzh-space-xxxsmall);margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.medium\\:cspace-t-xxxsmall){margin-top:var(--stzh-space-xxxsmall)}:host ::slotted(.medium\\:cspace-b-xxxsmall){margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.medium\\:cspace-y-xxsmall){margin-top:var(--stzh-space-xxsmall);margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.medium\\:cspace-t-xxsmall){margin-top:var(--stzh-space-xxsmall)}:host ::slotted(.medium\\:cspace-b-xxsmall){margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.medium\\:cspace-y-xsmall){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.medium\\:cspace-t-xsmall){margin-top:var(--stzh-space-xsmall)}:host ::slotted(.medium\\:cspace-b-xsmall){margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.medium\\:cspace-y-small){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}:host ::slotted(.medium\\:cspace-t-small){margin-top:var(--stzh-space-small)}:host ::slotted(.medium\\:cspace-b-small){margin-bottom:var(--stzh-space-small)}:host ::slotted(.medium\\:cspace-y-medium){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}:host ::slotted(.medium\\:cspace-t-medium){margin-top:var(--stzh-space-medium)}:host ::slotted(.medium\\:cspace-b-medium){margin-bottom:var(--stzh-space-medium)}:host ::slotted(.medium\\:cspace-y-large){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(.medium\\:cspace-t-large){margin-top:var(--stzh-space-large)}:host ::slotted(.medium\\:cspace-b-large){margin-bottom:var(--stzh-space-large)}:host ::slotted(.medium\\:cspace-y-xlarge){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.medium\\:cspace-t-xlarge){margin-top:var(--stzh-space-xlarge)}:host ::slotted(.medium\\:cspace-b-xlarge){margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.medium\\:cspace-y-xxlarge){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.medium\\:cspace-t-xxlarge){margin-top:var(--stzh-space-xxlarge)}:host ::slotted(.medium\\:cspace-b-xxlarge){margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.medium\\:cspace-y-xxxlarge){margin-top:var(--stzh-space-xxxlarge);margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.medium\\:cspace-t-xxxlarge){margin-top:var(--stzh-space-xxxlarge)}:host ::slotted(.medium\\:cspace-b-xxxlarge){margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.medium\\:cspace-y-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge);margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.medium\\:cspace-t-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge)}:host ::slotted(.medium\\:cspace-b-xxxxlarge){margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.medium\\:cspace-y-big){margin-top:var(--stzh-space-big);margin-bottom:var(--stzh-space-big)}:host ::slotted(.medium\\:cspace-t-big){margin-top:var(--stzh-space-big)}:host ::slotted(.medium\\:cspace-b-big){margin-bottom:var(--stzh-space-big)}:host ::slotted(.medium\\:cspace-y-xbig){margin-top:var(--stzh-space-xbig);margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.medium\\:cspace-t-xbig){margin-top:var(--stzh-space-xbig)}:host ::slotted(.medium\\:cspace-b-xbig){margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.medium\\:cspace-y-huge){margin-top:var(--stzh-space-huge);margin-bottom:var(--stzh-space-huge)}:host ::slotted(.medium\\:cspace-t-huge){margin-top:var(--stzh-space-huge)}:host ::slotted(.medium\\:cspace-b-huge){margin-bottom:var(--stzh-space-huge)}:host ::slotted(.medium\\:cspace-y-xhuge){margin-top:var(--stzh-space-xhuge);margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.medium\\:cspace-t-xhuge){margin-top:var(--stzh-space-xhuge)}:host ::slotted(.medium\\:cspace-b-xhuge){margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.medium\\:cspace-y-none){margin-top:var(--stzh-space-none);margin-bottom:var(--stzh-space-none)}:host ::slotted(.medium\\:cspace-t-none){margin-top:var(--stzh-space-none)}:host ::slotted(.medium\\:cspace-b-none){margin-bottom:var(--stzh-space-none)}:host ::slotted(.medium\\:cspace-y-default){margin-top:var(--stzh-space-default);margin-bottom:var(--stzh-space-default)}:host ::slotted(.medium\\:cspace-t-default){margin-top:var(--stzh-space-default)}:host ::slotted(.medium\\:cspace-b-default){margin-bottom:var(--stzh-space-default)}:host ::slotted(.large\\:cspace-y-xxxsmall){margin-top:var(--stzh-space-xxxsmall);margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.large\\:cspace-t-xxxsmall){margin-top:var(--stzh-space-xxxsmall)}:host ::slotted(.large\\:cspace-b-xxxsmall){margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.large\\:cspace-y-xxsmall){margin-top:var(--stzh-space-xxsmall);margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.large\\:cspace-t-xxsmall){margin-top:var(--stzh-space-xxsmall)}:host ::slotted(.large\\:cspace-b-xxsmall){margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.large\\:cspace-y-xsmall){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.large\\:cspace-t-xsmall){margin-top:var(--stzh-space-xsmall)}:host ::slotted(.large\\:cspace-b-xsmall){margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.large\\:cspace-y-small){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}:host ::slotted(.large\\:cspace-t-small){margin-top:var(--stzh-space-small)}:host ::slotted(.large\\:cspace-b-small){margin-bottom:var(--stzh-space-small)}:host ::slotted(.large\\:cspace-y-medium){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}:host ::slotted(.large\\:cspace-t-medium){margin-top:var(--stzh-space-medium)}:host ::slotted(.large\\:cspace-b-medium){margin-bottom:var(--stzh-space-medium)}:host ::slotted(.large\\:cspace-y-large){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(.large\\:cspace-t-large){margin-top:var(--stzh-space-large)}:host ::slotted(.large\\:cspace-b-large){margin-bottom:var(--stzh-space-large)}:host ::slotted(.large\\:cspace-y-xlarge){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.large\\:cspace-t-xlarge){margin-top:var(--stzh-space-xlarge)}:host ::slotted(.large\\:cspace-b-xlarge){margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.large\\:cspace-y-xxlarge){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.large\\:cspace-t-xxlarge){margin-top:var(--stzh-space-xxlarge)}:host ::slotted(.large\\:cspace-b-xxlarge){margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.large\\:cspace-y-xxxlarge){margin-top:var(--stzh-space-xxxlarge);margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.large\\:cspace-t-xxxlarge){margin-top:var(--stzh-space-xxxlarge)}:host ::slotted(.large\\:cspace-b-xxxlarge){margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.large\\:cspace-y-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge);margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.large\\:cspace-t-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge)}:host ::slotted(.large\\:cspace-b-xxxxlarge){margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.large\\:cspace-y-big){margin-top:var(--stzh-space-big);margin-bottom:var(--stzh-space-big)}:host ::slotted(.large\\:cspace-t-big){margin-top:var(--stzh-space-big)}:host ::slotted(.large\\:cspace-b-big){margin-bottom:var(--stzh-space-big)}:host ::slotted(.large\\:cspace-y-xbig){margin-top:var(--stzh-space-xbig);margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.large\\:cspace-t-xbig){margin-top:var(--stzh-space-xbig)}:host ::slotted(.large\\:cspace-b-xbig){margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.large\\:cspace-y-huge){margin-top:var(--stzh-space-huge);margin-bottom:var(--stzh-space-huge)}:host ::slotted(.large\\:cspace-t-huge){margin-top:var(--stzh-space-huge)}:host ::slotted(.large\\:cspace-b-huge){margin-bottom:var(--stzh-space-huge)}:host ::slotted(.large\\:cspace-y-xhuge){margin-top:var(--stzh-space-xhuge);margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.large\\:cspace-t-xhuge){margin-top:var(--stzh-space-xhuge)}:host ::slotted(.large\\:cspace-b-xhuge){margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.large\\:cspace-y-none){margin-top:var(--stzh-space-none);margin-bottom:var(--stzh-space-none)}:host ::slotted(.large\\:cspace-t-none){margin-top:var(--stzh-space-none)}:host ::slotted(.large\\:cspace-b-none){margin-bottom:var(--stzh-space-none)}:host ::slotted(.large\\:cspace-y-default){margin-top:var(--stzh-space-default);margin-bottom:var(--stzh-space-default)}:host ::slotted(.large\\:cspace-t-default){margin-top:var(--stzh-space-default)}:host ::slotted(.large\\:cspace-b-default){margin-bottom:var(--stzh-space-default)}:host ::slotted(.ultra\\:cspace-y-xxxsmall){margin-top:var(--stzh-space-xxxsmall);margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.ultra\\:cspace-t-xxxsmall){margin-top:var(--stzh-space-xxxsmall)}:host ::slotted(.ultra\\:cspace-b-xxxsmall){margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.ultra\\:cspace-y-xxsmall){margin-top:var(--stzh-space-xxsmall);margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.ultra\\:cspace-t-xxsmall){margin-top:var(--stzh-space-xxsmall)}:host ::slotted(.ultra\\:cspace-b-xxsmall){margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.ultra\\:cspace-y-xsmall){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.ultra\\:cspace-t-xsmall){margin-top:var(--stzh-space-xsmall)}:host ::slotted(.ultra\\:cspace-b-xsmall){margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.ultra\\:cspace-y-small){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}:host ::slotted(.ultra\\:cspace-t-small){margin-top:var(--stzh-space-small)}:host ::slotted(.ultra\\:cspace-b-small){margin-bottom:var(--stzh-space-small)}:host ::slotted(.ultra\\:cspace-y-medium){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}:host ::slotted(.ultra\\:cspace-t-medium){margin-top:var(--stzh-space-medium)}:host ::slotted(.ultra\\:cspace-b-medium){margin-bottom:var(--stzh-space-medium)}:host ::slotted(.ultra\\:cspace-y-large){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(.ultra\\:cspace-t-large){margin-top:var(--stzh-space-large)}:host ::slotted(.ultra\\:cspace-b-large){margin-bottom:var(--stzh-space-large)}:host ::slotted(.ultra\\:cspace-y-xlarge){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.ultra\\:cspace-t-xlarge){margin-top:var(--stzh-space-xlarge)}:host ::slotted(.ultra\\:cspace-b-xlarge){margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.ultra\\:cspace-y-xxlarge){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.ultra\\:cspace-t-xxlarge){margin-top:var(--stzh-space-xxlarge)}:host ::slotted(.ultra\\:cspace-b-xxlarge){margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.ultra\\:cspace-y-xxxlarge){margin-top:var(--stzh-space-xxxlarge);margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.ultra\\:cspace-t-xxxlarge){margin-top:var(--stzh-space-xxxlarge)}:host ::slotted(.ultra\\:cspace-b-xxxlarge){margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.ultra\\:cspace-y-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge);margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.ultra\\:cspace-t-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge)}:host ::slotted(.ultra\\:cspace-b-xxxxlarge){margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.ultra\\:cspace-y-big){margin-top:var(--stzh-space-big);margin-bottom:var(--stzh-space-big)}:host ::slotted(.ultra\\:cspace-t-big){margin-top:var(--stzh-space-big)}:host ::slotted(.ultra\\:cspace-b-big){margin-bottom:var(--stzh-space-big)}:host ::slotted(.ultra\\:cspace-y-xbig){margin-top:var(--stzh-space-xbig);margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.ultra\\:cspace-t-xbig){margin-top:var(--stzh-space-xbig)}:host ::slotted(.ultra\\:cspace-b-xbig){margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.ultra\\:cspace-y-huge){margin-top:var(--stzh-space-huge);margin-bottom:var(--stzh-space-huge)}:host ::slotted(.ultra\\:cspace-t-huge){margin-top:var(--stzh-space-huge)}:host ::slotted(.ultra\\:cspace-b-huge){margin-bottom:var(--stzh-space-huge)}:host ::slotted(.ultra\\:cspace-y-xhuge){margin-top:var(--stzh-space-xhuge);margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.ultra\\:cspace-t-xhuge){margin-top:var(--stzh-space-xhuge)}:host ::slotted(.ultra\\:cspace-b-xhuge){margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.ultra\\:cspace-y-none){margin-top:var(--stzh-space-none);margin-bottom:var(--stzh-space-none)}:host ::slotted(.ultra\\:cspace-t-none){margin-top:var(--stzh-space-none)}:host ::slotted(.ultra\\:cspace-b-none){margin-bottom:var(--stzh-space-none)}:host ::slotted(.ultra\\:cspace-y-default){margin-top:var(--stzh-space-default);margin-bottom:var(--stzh-space-default)}:host ::slotted(.ultra\\:cspace-t-default){margin-top:var(--stzh-space-default)}:host ::slotted(.ultra\\:cspace-b-default){margin-bottom:var(--stzh-space-default)}:host ::slotted(.cspace-y-0){margin-top:0;margin-bottom:0}:host ::slotted(.cspace-t-0),:host ::slotted([no-cspace-top]){margin-top:0}:host ::slotted(.cspace-b-0),:host ::slotted([no-cspace-bottom]){margin-bottom:0}:host ::slotted(.small\\:cspace-y-0){margin-top:0;margin-bottom:0}:host ::slotted(.small\\:cspace-t-0){margin-top:0}:host ::slotted(.small\\:cspace-b-0){margin-bottom:0}:host ::slotted(.smallheader\\:cspace-y-0){margin-top:0;margin-bottom:0}:host ::slotted(.smallheader\\:cspace-t-0){margin-top:0}:host ::slotted(.smallheader\\:cspace-b-0){margin-bottom:0}:host ::slotted(.medium\\:cspace-y-0){margin-top:0;margin-bottom:0}:host ::slotted(.medium\\:cspace-t-0){margin-top:0}:host ::slotted(.medium\\:cspace-b-0){margin-bottom:0}:host ::slotted(.large\\:cspace-y-0){margin-top:0;margin-bottom:0}:host ::slotted(.large\\:cspace-t-0){margin-top:0}:host ::slotted(.large\\:cspace-b-0){margin-bottom:0}:host ::slotted(.ultra\\:cspace-y-0){margin-top:0;margin-bottom:0}:host ::slotted(.ultra\\:cspace-t-0){margin-top:0}:host ::slotted(.ultra\\:cspace-b-0){margin-bottom:0}:host([remove-first-margin]:not([remove-first-margin=false])) ::slotted(:first-child){margin-top:0 !important}:host([remove-last-margin]:not([remove-last-margin=false])) ::slotted(:last-child){margin-bottom:0 !important}";
+const stzhCspaceCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{}:host ::slotted(stzh-input),:host ::slotted(stzh-datepicker),:host ::slotted(stzh-dropdown),:host ::slotted(stzh-langnav),:host ::slotted(stzh-fieldset),:host ::slotted(stzh-actions),:host ::slotted(stzh-upload),:host ::slotted(stzh-saptcha),:host ::slotted(stzh-checkboxgroup),:host ::slotted(stzh-radiogroup),:host ::slotted(stzh-message){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(h1),:host ::slotted(stzh-heading[level=\"1\"]),:host ::slotted(h2),:host ::slotted(stzh-heading[level=\"2\"]){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(h1),:host ::slotted(stzh-heading[level=\"1\"]),:host ::slotted(h2),:host ::slotted(stzh-heading[level=\"2\"]){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(h1),:host ::slotted(stzh-heading[level=\"1\"]),:host ::slotted(h2),:host ::slotted(stzh-heading[level=\"2\"]){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(h1),:host ::slotted(stzh-heading[level=\"1\"]),:host ::slotted(h2),:host ::slotted(stzh-heading[level=\"2\"]){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(h1),:host ::slotted(stzh-heading[level=\"1\"]),:host ::slotted(h2),:host ::slotted(stzh-heading[level=\"2\"]){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(h3),:host ::slotted(stzh-heading[level=\"3\"]),:host ::slotted(h4),:host ::slotted(stzh-heading[level=\"4\"]){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(h3),:host ::slotted(stzh-heading[level=\"3\"]),:host ::slotted(h4),:host ::slotted(stzh-heading[level=\"4\"]){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(h3),:host ::slotted(stzh-heading[level=\"3\"]),:host ::slotted(h4),:host ::slotted(stzh-heading[level=\"4\"]){margin-top:var(--stzh-space-xxxlarge)}}:host ::slotted(p),:host ::slotted(stzh-text),:host ::slotted(ul),:host ::slotted(ol),:host ::slotted(dl),:host ::slotted(stzh-list){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host ::slotted(p),:host ::slotted(stzh-text),:host ::slotted(ul),:host ::slotted(ol),:host ::slotted(dl),:host ::slotted(stzh-list){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(p),:host ::slotted(stzh-text),:host ::slotted(ul),:host ::slotted(ol),:host ::slotted(dl),:host ::slotted(stzh-list){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){:host ::slotted(p),:host ::slotted(stzh-text),:host ::slotted(ul),:host ::slotted(ol),:host ::slotted(dl),:host ::slotted(stzh-list){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(p),:host ::slotted(stzh-text),:host ::slotted(ul),:host ::slotted(ol),:host ::slotted(dl),:host ::slotted(stzh-list){margin-bottom:var(--stzh-space-large)}}:host ::slotted(stzh-text[curve=hero]),:host ::slotted(stzh-heading[curve=hero]){margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=hero]),:host ::slotted(stzh-heading[curve=hero]){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=hero]),:host ::slotted(stzh-heading[curve=hero]){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-top:var(--stzh-space-xxxxlarge)}}:host ::slotted(stzh-text[curve=h3]),:host ::slotted(stzh-heading[curve=h3]),:host ::slotted(stzh-text[curve=h4]),:host ::slotted(stzh-heading[curve=h4]){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=h3]),:host ::slotted(stzh-heading[curve=h3]),:host ::slotted(stzh-text[curve=h4]),:host ::slotted(stzh-heading[curve=h4]){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=h3]),:host ::slotted(stzh-heading[curve=h3]),:host ::slotted(stzh-text[curve=h4]),:host ::slotted(stzh-heading[curve=h4]){margin-top:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-text[curve=p1]),:host ::slotted(stzh-text[curve=p2]),:host ::slotted(stzh-heading[curve=p1]),:host ::slotted(stzh-heading[curve=p2]){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=p1]),:host ::slotted(stzh-text[curve=p2]),:host ::slotted(stzh-heading[curve=p1]),:host ::slotted(stzh-heading[curve=p2]){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=p1]),:host ::slotted(stzh-text[curve=p2]),:host ::slotted(stzh-heading[curve=p1]),:host ::slotted(stzh-heading[curve=p2]){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=p1]),:host ::slotted(stzh-text[curve=p2]),:host ::slotted(stzh-heading[curve=p1]),:host ::slotted(stzh-heading[curve=p2]){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=p1]),:host ::slotted(stzh-text[curve=p2]),:host ::slotted(stzh-heading[curve=p1]),:host ::slotted(stzh-heading[curve=p2]){margin-bottom:var(--stzh-space-large)}}:host ::slotted(.section),:host ::slotted(stzh-accordion),:host ::slotted(stzh-anchornav),:host ::slotted(stzh-audio),:host ::slotted(stzh-iframe),:host ::slotted(stzh-youtube),:host ::slotted(stzh-microsite-teaserlist),:host ::slotted(stzh-textandimage),:host ::slotted(stzh-figure),:host ::slotted(stzh-gallery),:host ::slotted(stzh-panorama),:host ::slotted(stzh-chart),:host ::slotted(stzh-sitemap),:host ::slotted(stzh-section),:host ::slotted(stzh-hr),:host ::slotted(stzh-vbz-ticker){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host ::slotted(.section),:host ::slotted(stzh-accordion),:host ::slotted(stzh-anchornav),:host ::slotted(stzh-audio),:host ::slotted(stzh-iframe),:host ::slotted(stzh-youtube),:host ::slotted(stzh-microsite-teaserlist),:host ::slotted(stzh-textandimage),:host ::slotted(stzh-figure),:host ::slotted(stzh-gallery),:host ::slotted(stzh-panorama),:host ::slotted(stzh-chart),:host ::slotted(stzh-sitemap),:host ::slotted(stzh-section),:host ::slotted(stzh-hr),:host ::slotted(stzh-vbz-ticker){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.section),:host ::slotted(stzh-accordion),:host ::slotted(stzh-anchornav),:host ::slotted(stzh-audio),:host ::slotted(stzh-iframe),:host ::slotted(stzh-youtube),:host ::slotted(stzh-microsite-teaserlist),:host ::slotted(stzh-textandimage),:host ::slotted(stzh-figure),:host ::slotted(stzh-gallery),:host ::slotted(stzh-panorama),:host ::slotted(stzh-chart),:host ::slotted(stzh-sitemap),:host ::slotted(stzh-section),:host ::slotted(stzh-hr),:host ::slotted(stzh-vbz-ticker){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.section),:host ::slotted(stzh-accordion),:host ::slotted(stzh-anchornav),:host ::slotted(stzh-audio),:host ::slotted(stzh-iframe),:host ::slotted(stzh-youtube),:host ::slotted(stzh-microsite-teaserlist),:host ::slotted(stzh-textandimage),:host ::slotted(stzh-figure),:host ::slotted(stzh-gallery),:host ::slotted(stzh-panorama),:host ::slotted(stzh-chart),:host ::slotted(stzh-sitemap),:host ::slotted(stzh-section),:host ::slotted(stzh-hr),:host ::slotted(stzh-vbz-ticker){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.section),:host ::slotted(stzh-accordion),:host ::slotted(stzh-anchornav),:host ::slotted(stzh-audio),:host ::slotted(stzh-iframe),:host ::slotted(stzh-youtube),:host ::slotted(stzh-microsite-teaserlist),:host ::slotted(stzh-textandimage),:host ::slotted(stzh-figure),:host ::slotted(stzh-gallery),:host ::slotted(stzh-panorama),:host ::slotted(stzh-chart),:host ::slotted(stzh-sitemap),:host ::slotted(stzh-section),:host ::slotted(stzh-hr),:host ::slotted(stzh-vbz-ticker){margin-bottom:var(--stzh-space-xxxxlarge)}}:host ::slotted(stzh-olmap),:host ::slotted(stzh-anchornav){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-olmap),:host ::slotted(stzh-anchornav){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-olmap),:host ::slotted(stzh-anchornav){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-olmap),:host ::slotted(stzh-anchornav){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-olmap),:host ::slotted(stzh-anchornav){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-contact),:host ::slotted(stzh-card){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host ::slotted(stzh-contact),:host ::slotted(stzh-card){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-contact),:host ::slotted(stzh-card){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-contact),:host ::slotted(stzh-card){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-contact),:host ::slotted(stzh-card){margin-bottom:var(--stzh-space-xlarge)}}:host ::slotted(stzh-table),:host ::slotted(stzh-datatable){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-table),:host ::slotted(stzh-datatable){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-table),:host ::slotted(stzh-datatable){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-table),:host ::slotted(stzh-datatable){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-table),:host ::slotted(stzh-datatable){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-pagetitle){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-pagetitle){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-pagetitle){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-pagetitle){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-pagetitle){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-pagebottom){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-pagebottom){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-pagebottom){margin-top:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-progressbar){margin-top:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){:host ::slotted(stzh-progressbar){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-progressbar){margin-top:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-progressbar){margin-top:var(--stzh-space-xbig)}}:host ::slotted(stzh-pagination){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}:host ::slotted(stzh-actions){margin-top:var(--stzh-space-xxlarge)}:host ::slotted(stzh-actions)[variant=process]{margin-top:var(--stzh-space-large)}:host ::slotted(stzh-fieldset){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(stzh-fieldset)[legend]{margin-top:var(--stzh-space-xxlarge)}:host ::slotted(stzh-heading[level=\"4\"]+stzh-datalist),:host ::slotted(stzh-heading[curve=h4]+stzh-datalist){margin-top:0}:host ::slotted(.cspace-y-curve-tiny){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-tiny){margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-tiny){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-tiny){margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-tiny){margin-bottom:var(--stzh-space-medium)}}:host ::slotted(.cspace-t-curve-tiny){margin-top:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-t-curve-tiny){margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-t-curve-tiny){margin-top:var(--stzh-space-medium)}}:host ::slotted(.cspace-b-curve-tiny){margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-b-curve-tiny){margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-b-curve-tiny){margin-bottom:var(--stzh-space-medium)}}:host ::slotted(.cspace-y-curve-small){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-small){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-small){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-small){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-small){margin-bottom:var(--stzh-space-large)}}:host ::slotted(.cspace-t-curve-small){margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-t-curve-small){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-t-curve-small){margin-top:var(--stzh-space-large)}}:host ::slotted(.cspace-b-curve-small){margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-b-curve-small){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-b-curve-small){margin-bottom:var(--stzh-space-large)}}:host ::slotted(.cspace-y-curve-regular){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-regular){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-regular){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-regular){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-regular){margin-bottom:var(--stzh-space-xlarge)}}:host ::slotted(.cspace-t-curve-regular){margin-top:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-t-curve-regular){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-t-curve-regular){margin-top:var(--stzh-space-xlarge)}}:host ::slotted(.cspace-b-curve-regular){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-b-curve-regular){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-b-curve-regular){margin-bottom:var(--stzh-space-xlarge)}}:host ::slotted(.cspace-y-curve-medium){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-medium){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-medium){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-medium){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-medium){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(.cspace-t-curve-medium){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-t-curve-medium){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-t-curve-medium){margin-top:var(--stzh-space-xxxlarge)}}:host ::slotted(.cspace-b-curve-medium){margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-b-curve-medium){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-b-curve-medium){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(.cspace-y-curve-large){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-large){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-large){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-large){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-large){margin-bottom:var(--stzh-space-xxxxlarge)}}:host ::slotted(.cspace-t-curve-large){margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-t-curve-large){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-t-curve-large){margin-top:var(--stzh-space-xxxxlarge)}}:host ::slotted(.cspace-b-curve-large){margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-b-curve-large){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-b-curve-large){margin-bottom:var(--stzh-space-xxxxlarge)}}:host ::slotted(.cspace-y-curve-big){margin-top:var(--stzh-space-xxxlarge);margin-bottom:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){:host ::slotted(.cspace-y-curve-big){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-big){margin-top:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-big){margin-top:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){:host ::slotted(.cspace-y-curve-big){margin-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-big){margin-bottom:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-big){margin-bottom:var(--stzh-space-xbig)}}:host ::slotted(.cspace-t-curve-big){margin-top:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){:host ::slotted(.cspace-t-curve-big){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-t-curve-big){margin-top:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-t-curve-big){margin-top:var(--stzh-space-xbig)}}:host ::slotted(.cspace-b-curve-big){margin-bottom:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){:host ::slotted(.cspace-b-curve-big){margin-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-b-curve-big){margin-bottom:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-b-curve-big){margin-bottom:var(--stzh-space-xbig)}}:host ::slotted(.cspace-y-curve-huge){margin-top:var(--stzh-space-xxxxlarge);margin-bottom:var(--stzh-space-xxxxlarge)}@media screen and (min-width: 600px){:host ::slotted(.cspace-y-curve-huge){margin-top:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-huge){margin-top:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-huge){margin-top:var(--stzh-space-huge)}}@media screen and (min-width: 600px){:host ::slotted(.cspace-y-curve-huge){margin-bottom:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-huge){margin-bottom:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-huge){margin-bottom:var(--stzh-space-huge)}}:host ::slotted(.cspace-t-curve-huge){margin-top:var(--stzh-space-xxxxlarge)}@media screen and (min-width: 600px){:host ::slotted(.cspace-t-curve-huge){margin-top:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-t-curve-huge){margin-top:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-t-curve-huge){margin-top:var(--stzh-space-huge)}}:host ::slotted(.cspace-b-curve-huge){margin-bottom:var(--stzh-space-xxxxlarge)}@media screen and (min-width: 600px){:host ::slotted(.cspace-b-curve-huge){margin-bottom:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-b-curve-huge){margin-bottom:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-b-curve-huge){margin-bottom:var(--stzh-space-huge)}}:host ::slotted(.small\\:cspace-y-xxxsmall){margin-top:var(--stzh-space-xxxsmall);margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.small\\:cspace-t-xxxsmall){margin-top:var(--stzh-space-xxxsmall)}:host ::slotted(.small\\:cspace-b-xxxsmall){margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.small\\:cspace-y-xxsmall){margin-top:var(--stzh-space-xxsmall);margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.small\\:cspace-t-xxsmall){margin-top:var(--stzh-space-xxsmall)}:host ::slotted(.small\\:cspace-b-xxsmall){margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.small\\:cspace-y-xsmall){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.small\\:cspace-t-xsmall){margin-top:var(--stzh-space-xsmall)}:host ::slotted(.small\\:cspace-b-xsmall){margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.small\\:cspace-y-small){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}:host ::slotted(.small\\:cspace-t-small){margin-top:var(--stzh-space-small)}:host ::slotted(.small\\:cspace-b-small){margin-bottom:var(--stzh-space-small)}:host ::slotted(.small\\:cspace-y-medium){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}:host ::slotted(.small\\:cspace-t-medium){margin-top:var(--stzh-space-medium)}:host ::slotted(.small\\:cspace-b-medium){margin-bottom:var(--stzh-space-medium)}:host ::slotted(.small\\:cspace-y-large){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(.small\\:cspace-t-large){margin-top:var(--stzh-space-large)}:host ::slotted(.small\\:cspace-b-large){margin-bottom:var(--stzh-space-large)}:host ::slotted(.small\\:cspace-y-xlarge){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.small\\:cspace-t-xlarge){margin-top:var(--stzh-space-xlarge)}:host ::slotted(.small\\:cspace-b-xlarge){margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.small\\:cspace-y-xxlarge){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.small\\:cspace-t-xxlarge){margin-top:var(--stzh-space-xxlarge)}:host ::slotted(.small\\:cspace-b-xxlarge){margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.small\\:cspace-y-xxxlarge){margin-top:var(--stzh-space-xxxlarge);margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.small\\:cspace-t-xxxlarge){margin-top:var(--stzh-space-xxxlarge)}:host ::slotted(.small\\:cspace-b-xxxlarge){margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.small\\:cspace-y-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge);margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.small\\:cspace-t-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge)}:host ::slotted(.small\\:cspace-b-xxxxlarge){margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.small\\:cspace-y-big){margin-top:var(--stzh-space-big);margin-bottom:var(--stzh-space-big)}:host ::slotted(.small\\:cspace-t-big){margin-top:var(--stzh-space-big)}:host ::slotted(.small\\:cspace-b-big){margin-bottom:var(--stzh-space-big)}:host ::slotted(.small\\:cspace-y-xbig){margin-top:var(--stzh-space-xbig);margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.small\\:cspace-t-xbig){margin-top:var(--stzh-space-xbig)}:host ::slotted(.small\\:cspace-b-xbig){margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.small\\:cspace-y-huge){margin-top:var(--stzh-space-huge);margin-bottom:var(--stzh-space-huge)}:host ::slotted(.small\\:cspace-t-huge){margin-top:var(--stzh-space-huge)}:host ::slotted(.small\\:cspace-b-huge){margin-bottom:var(--stzh-space-huge)}:host ::slotted(.small\\:cspace-y-xhuge){margin-top:var(--stzh-space-xhuge);margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.small\\:cspace-t-xhuge){margin-top:var(--stzh-space-xhuge)}:host ::slotted(.small\\:cspace-b-xhuge){margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.small\\:cspace-y-none){margin-top:var(--stzh-space-none);margin-bottom:var(--stzh-space-none)}:host ::slotted(.small\\:cspace-t-none){margin-top:var(--stzh-space-none)}:host ::slotted(.small\\:cspace-b-none){margin-bottom:var(--stzh-space-none)}:host ::slotted(.small\\:cspace-y-default){margin-top:var(--stzh-space-default);margin-bottom:var(--stzh-space-default)}:host ::slotted(.small\\:cspace-t-default){margin-top:var(--stzh-space-default)}:host ::slotted(.small\\:cspace-b-default){margin-bottom:var(--stzh-space-default)}:host ::slotted(.smallheader\\:cspace-y-xxxsmall){margin-top:var(--stzh-space-xxxsmall);margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.smallheader\\:cspace-t-xxxsmall){margin-top:var(--stzh-space-xxxsmall)}:host ::slotted(.smallheader\\:cspace-b-xxxsmall){margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.smallheader\\:cspace-y-xxsmall){margin-top:var(--stzh-space-xxsmall);margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.smallheader\\:cspace-t-xxsmall){margin-top:var(--stzh-space-xxsmall)}:host ::slotted(.smallheader\\:cspace-b-xxsmall){margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.smallheader\\:cspace-y-xsmall){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.smallheader\\:cspace-t-xsmall){margin-top:var(--stzh-space-xsmall)}:host ::slotted(.smallheader\\:cspace-b-xsmall){margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.smallheader\\:cspace-y-small){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}:host ::slotted(.smallheader\\:cspace-t-small){margin-top:var(--stzh-space-small)}:host ::slotted(.smallheader\\:cspace-b-small){margin-bottom:var(--stzh-space-small)}:host ::slotted(.smallheader\\:cspace-y-medium){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}:host ::slotted(.smallheader\\:cspace-t-medium){margin-top:var(--stzh-space-medium)}:host ::slotted(.smallheader\\:cspace-b-medium){margin-bottom:var(--stzh-space-medium)}:host ::slotted(.smallheader\\:cspace-y-large){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(.smallheader\\:cspace-t-large){margin-top:var(--stzh-space-large)}:host ::slotted(.smallheader\\:cspace-b-large){margin-bottom:var(--stzh-space-large)}:host ::slotted(.smallheader\\:cspace-y-xlarge){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.smallheader\\:cspace-t-xlarge){margin-top:var(--stzh-space-xlarge)}:host ::slotted(.smallheader\\:cspace-b-xlarge){margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.smallheader\\:cspace-y-xxlarge){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.smallheader\\:cspace-t-xxlarge){margin-top:var(--stzh-space-xxlarge)}:host ::slotted(.smallheader\\:cspace-b-xxlarge){margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.smallheader\\:cspace-y-xxxlarge){margin-top:var(--stzh-space-xxxlarge);margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.smallheader\\:cspace-t-xxxlarge){margin-top:var(--stzh-space-xxxlarge)}:host ::slotted(.smallheader\\:cspace-b-xxxlarge){margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.smallheader\\:cspace-y-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge);margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.smallheader\\:cspace-t-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge)}:host ::slotted(.smallheader\\:cspace-b-xxxxlarge){margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.smallheader\\:cspace-y-big){margin-top:var(--stzh-space-big);margin-bottom:var(--stzh-space-big)}:host ::slotted(.smallheader\\:cspace-t-big){margin-top:var(--stzh-space-big)}:host ::slotted(.smallheader\\:cspace-b-big){margin-bottom:var(--stzh-space-big)}:host ::slotted(.smallheader\\:cspace-y-xbig){margin-top:var(--stzh-space-xbig);margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.smallheader\\:cspace-t-xbig){margin-top:var(--stzh-space-xbig)}:host ::slotted(.smallheader\\:cspace-b-xbig){margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.smallheader\\:cspace-y-huge){margin-top:var(--stzh-space-huge);margin-bottom:var(--stzh-space-huge)}:host ::slotted(.smallheader\\:cspace-t-huge){margin-top:var(--stzh-space-huge)}:host ::slotted(.smallheader\\:cspace-b-huge){margin-bottom:var(--stzh-space-huge)}:host ::slotted(.smallheader\\:cspace-y-xhuge){margin-top:var(--stzh-space-xhuge);margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.smallheader\\:cspace-t-xhuge){margin-top:var(--stzh-space-xhuge)}:host ::slotted(.smallheader\\:cspace-b-xhuge){margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.smallheader\\:cspace-y-none){margin-top:var(--stzh-space-none);margin-bottom:var(--stzh-space-none)}:host ::slotted(.smallheader\\:cspace-t-none){margin-top:var(--stzh-space-none)}:host ::slotted(.smallheader\\:cspace-b-none){margin-bottom:var(--stzh-space-none)}:host ::slotted(.smallheader\\:cspace-y-default){margin-top:var(--stzh-space-default);margin-bottom:var(--stzh-space-default)}:host ::slotted(.smallheader\\:cspace-t-default){margin-top:var(--stzh-space-default)}:host ::slotted(.smallheader\\:cspace-b-default){margin-bottom:var(--stzh-space-default)}:host ::slotted(.medium\\:cspace-y-xxxsmall){margin-top:var(--stzh-space-xxxsmall);margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.medium\\:cspace-t-xxxsmall){margin-top:var(--stzh-space-xxxsmall)}:host ::slotted(.medium\\:cspace-b-xxxsmall){margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.medium\\:cspace-y-xxsmall){margin-top:var(--stzh-space-xxsmall);margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.medium\\:cspace-t-xxsmall){margin-top:var(--stzh-space-xxsmall)}:host ::slotted(.medium\\:cspace-b-xxsmall){margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.medium\\:cspace-y-xsmall){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.medium\\:cspace-t-xsmall){margin-top:var(--stzh-space-xsmall)}:host ::slotted(.medium\\:cspace-b-xsmall){margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.medium\\:cspace-y-small){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}:host ::slotted(.medium\\:cspace-t-small){margin-top:var(--stzh-space-small)}:host ::slotted(.medium\\:cspace-b-small){margin-bottom:var(--stzh-space-small)}:host ::slotted(.medium\\:cspace-y-medium){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}:host ::slotted(.medium\\:cspace-t-medium){margin-top:var(--stzh-space-medium)}:host ::slotted(.medium\\:cspace-b-medium){margin-bottom:var(--stzh-space-medium)}:host ::slotted(.medium\\:cspace-y-large){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(.medium\\:cspace-t-large){margin-top:var(--stzh-space-large)}:host ::slotted(.medium\\:cspace-b-large){margin-bottom:var(--stzh-space-large)}:host ::slotted(.medium\\:cspace-y-xlarge){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.medium\\:cspace-t-xlarge){margin-top:var(--stzh-space-xlarge)}:host ::slotted(.medium\\:cspace-b-xlarge){margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.medium\\:cspace-y-xxlarge){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.medium\\:cspace-t-xxlarge){margin-top:var(--stzh-space-xxlarge)}:host ::slotted(.medium\\:cspace-b-xxlarge){margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.medium\\:cspace-y-xxxlarge){margin-top:var(--stzh-space-xxxlarge);margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.medium\\:cspace-t-xxxlarge){margin-top:var(--stzh-space-xxxlarge)}:host ::slotted(.medium\\:cspace-b-xxxlarge){margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.medium\\:cspace-y-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge);margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.medium\\:cspace-t-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge)}:host ::slotted(.medium\\:cspace-b-xxxxlarge){margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.medium\\:cspace-y-big){margin-top:var(--stzh-space-big);margin-bottom:var(--stzh-space-big)}:host ::slotted(.medium\\:cspace-t-big){margin-top:var(--stzh-space-big)}:host ::slotted(.medium\\:cspace-b-big){margin-bottom:var(--stzh-space-big)}:host ::slotted(.medium\\:cspace-y-xbig){margin-top:var(--stzh-space-xbig);margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.medium\\:cspace-t-xbig){margin-top:var(--stzh-space-xbig)}:host ::slotted(.medium\\:cspace-b-xbig){margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.medium\\:cspace-y-huge){margin-top:var(--stzh-space-huge);margin-bottom:var(--stzh-space-huge)}:host ::slotted(.medium\\:cspace-t-huge){margin-top:var(--stzh-space-huge)}:host ::slotted(.medium\\:cspace-b-huge){margin-bottom:var(--stzh-space-huge)}:host ::slotted(.medium\\:cspace-y-xhuge){margin-top:var(--stzh-space-xhuge);margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.medium\\:cspace-t-xhuge){margin-top:var(--stzh-space-xhuge)}:host ::slotted(.medium\\:cspace-b-xhuge){margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.medium\\:cspace-y-none){margin-top:var(--stzh-space-none);margin-bottom:var(--stzh-space-none)}:host ::slotted(.medium\\:cspace-t-none){margin-top:var(--stzh-space-none)}:host ::slotted(.medium\\:cspace-b-none){margin-bottom:var(--stzh-space-none)}:host ::slotted(.medium\\:cspace-y-default){margin-top:var(--stzh-space-default);margin-bottom:var(--stzh-space-default)}:host ::slotted(.medium\\:cspace-t-default){margin-top:var(--stzh-space-default)}:host ::slotted(.medium\\:cspace-b-default){margin-bottom:var(--stzh-space-default)}:host ::slotted(.large\\:cspace-y-xxxsmall){margin-top:var(--stzh-space-xxxsmall);margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.large\\:cspace-t-xxxsmall){margin-top:var(--stzh-space-xxxsmall)}:host ::slotted(.large\\:cspace-b-xxxsmall){margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.large\\:cspace-y-xxsmall){margin-top:var(--stzh-space-xxsmall);margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.large\\:cspace-t-xxsmall){margin-top:var(--stzh-space-xxsmall)}:host ::slotted(.large\\:cspace-b-xxsmall){margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.large\\:cspace-y-xsmall){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.large\\:cspace-t-xsmall){margin-top:var(--stzh-space-xsmall)}:host ::slotted(.large\\:cspace-b-xsmall){margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.large\\:cspace-y-small){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}:host ::slotted(.large\\:cspace-t-small){margin-top:var(--stzh-space-small)}:host ::slotted(.large\\:cspace-b-small){margin-bottom:var(--stzh-space-small)}:host ::slotted(.large\\:cspace-y-medium){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}:host ::slotted(.large\\:cspace-t-medium){margin-top:var(--stzh-space-medium)}:host ::slotted(.large\\:cspace-b-medium){margin-bottom:var(--stzh-space-medium)}:host ::slotted(.large\\:cspace-y-large){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(.large\\:cspace-t-large){margin-top:var(--stzh-space-large)}:host ::slotted(.large\\:cspace-b-large){margin-bottom:var(--stzh-space-large)}:host ::slotted(.large\\:cspace-y-xlarge){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.large\\:cspace-t-xlarge){margin-top:var(--stzh-space-xlarge)}:host ::slotted(.large\\:cspace-b-xlarge){margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.large\\:cspace-y-xxlarge){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.large\\:cspace-t-xxlarge){margin-top:var(--stzh-space-xxlarge)}:host ::slotted(.large\\:cspace-b-xxlarge){margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.large\\:cspace-y-xxxlarge){margin-top:var(--stzh-space-xxxlarge);margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.large\\:cspace-t-xxxlarge){margin-top:var(--stzh-space-xxxlarge)}:host ::slotted(.large\\:cspace-b-xxxlarge){margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.large\\:cspace-y-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge);margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.large\\:cspace-t-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge)}:host ::slotted(.large\\:cspace-b-xxxxlarge){margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.large\\:cspace-y-big){margin-top:var(--stzh-space-big);margin-bottom:var(--stzh-space-big)}:host ::slotted(.large\\:cspace-t-big){margin-top:var(--stzh-space-big)}:host ::slotted(.large\\:cspace-b-big){margin-bottom:var(--stzh-space-big)}:host ::slotted(.large\\:cspace-y-xbig){margin-top:var(--stzh-space-xbig);margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.large\\:cspace-t-xbig){margin-top:var(--stzh-space-xbig)}:host ::slotted(.large\\:cspace-b-xbig){margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.large\\:cspace-y-huge){margin-top:var(--stzh-space-huge);margin-bottom:var(--stzh-space-huge)}:host ::slotted(.large\\:cspace-t-huge){margin-top:var(--stzh-space-huge)}:host ::slotted(.large\\:cspace-b-huge){margin-bottom:var(--stzh-space-huge)}:host ::slotted(.large\\:cspace-y-xhuge){margin-top:var(--stzh-space-xhuge);margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.large\\:cspace-t-xhuge){margin-top:var(--stzh-space-xhuge)}:host ::slotted(.large\\:cspace-b-xhuge){margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.large\\:cspace-y-none){margin-top:var(--stzh-space-none);margin-bottom:var(--stzh-space-none)}:host ::slotted(.large\\:cspace-t-none){margin-top:var(--stzh-space-none)}:host ::slotted(.large\\:cspace-b-none){margin-bottom:var(--stzh-space-none)}:host ::slotted(.large\\:cspace-y-default){margin-top:var(--stzh-space-default);margin-bottom:var(--stzh-space-default)}:host ::slotted(.large\\:cspace-t-default){margin-top:var(--stzh-space-default)}:host ::slotted(.large\\:cspace-b-default){margin-bottom:var(--stzh-space-default)}:host ::slotted(.ultra\\:cspace-y-xxxsmall){margin-top:var(--stzh-space-xxxsmall);margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.ultra\\:cspace-t-xxxsmall){margin-top:var(--stzh-space-xxxsmall)}:host ::slotted(.ultra\\:cspace-b-xxxsmall){margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.ultra\\:cspace-y-xxsmall){margin-top:var(--stzh-space-xxsmall);margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.ultra\\:cspace-t-xxsmall){margin-top:var(--stzh-space-xxsmall)}:host ::slotted(.ultra\\:cspace-b-xxsmall){margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.ultra\\:cspace-y-xsmall){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.ultra\\:cspace-t-xsmall){margin-top:var(--stzh-space-xsmall)}:host ::slotted(.ultra\\:cspace-b-xsmall){margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.ultra\\:cspace-y-small){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}:host ::slotted(.ultra\\:cspace-t-small){margin-top:var(--stzh-space-small)}:host ::slotted(.ultra\\:cspace-b-small){margin-bottom:var(--stzh-space-small)}:host ::slotted(.ultra\\:cspace-y-medium){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}:host ::slotted(.ultra\\:cspace-t-medium){margin-top:var(--stzh-space-medium)}:host ::slotted(.ultra\\:cspace-b-medium){margin-bottom:var(--stzh-space-medium)}:host ::slotted(.ultra\\:cspace-y-large){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(.ultra\\:cspace-t-large){margin-top:var(--stzh-space-large)}:host ::slotted(.ultra\\:cspace-b-large){margin-bottom:var(--stzh-space-large)}:host ::slotted(.ultra\\:cspace-y-xlarge){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.ultra\\:cspace-t-xlarge){margin-top:var(--stzh-space-xlarge)}:host ::slotted(.ultra\\:cspace-b-xlarge){margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.ultra\\:cspace-y-xxlarge){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.ultra\\:cspace-t-xxlarge){margin-top:var(--stzh-space-xxlarge)}:host ::slotted(.ultra\\:cspace-b-xxlarge){margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.ultra\\:cspace-y-xxxlarge){margin-top:var(--stzh-space-xxxlarge);margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.ultra\\:cspace-t-xxxlarge){margin-top:var(--stzh-space-xxxlarge)}:host ::slotted(.ultra\\:cspace-b-xxxlarge){margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.ultra\\:cspace-y-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge);margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.ultra\\:cspace-t-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge)}:host ::slotted(.ultra\\:cspace-b-xxxxlarge){margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.ultra\\:cspace-y-big){margin-top:var(--stzh-space-big);margin-bottom:var(--stzh-space-big)}:host ::slotted(.ultra\\:cspace-t-big){margin-top:var(--stzh-space-big)}:host ::slotted(.ultra\\:cspace-b-big){margin-bottom:var(--stzh-space-big)}:host ::slotted(.ultra\\:cspace-y-xbig){margin-top:var(--stzh-space-xbig);margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.ultra\\:cspace-t-xbig){margin-top:var(--stzh-space-xbig)}:host ::slotted(.ultra\\:cspace-b-xbig){margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.ultra\\:cspace-y-huge){margin-top:var(--stzh-space-huge);margin-bottom:var(--stzh-space-huge)}:host ::slotted(.ultra\\:cspace-t-huge){margin-top:var(--stzh-space-huge)}:host ::slotted(.ultra\\:cspace-b-huge){margin-bottom:var(--stzh-space-huge)}:host ::slotted(.ultra\\:cspace-y-xhuge){margin-top:var(--stzh-space-xhuge);margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.ultra\\:cspace-t-xhuge){margin-top:var(--stzh-space-xhuge)}:host ::slotted(.ultra\\:cspace-b-xhuge){margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.ultra\\:cspace-y-none){margin-top:var(--stzh-space-none);margin-bottom:var(--stzh-space-none)}:host ::slotted(.ultra\\:cspace-t-none){margin-top:var(--stzh-space-none)}:host ::slotted(.ultra\\:cspace-b-none){margin-bottom:var(--stzh-space-none)}:host ::slotted(.ultra\\:cspace-y-default){margin-top:var(--stzh-space-default);margin-bottom:var(--stzh-space-default)}:host ::slotted(.ultra\\:cspace-t-default){margin-top:var(--stzh-space-default)}:host ::slotted(.ultra\\:cspace-b-default){margin-bottom:var(--stzh-space-default)}:host ::slotted(.cspace-y-0){margin-top:0;margin-bottom:0}:host ::slotted(.cspace-t-0),:host ::slotted([no-cspace-top]){margin-top:0}:host ::slotted(.cspace-b-0),:host ::slotted([no-cspace-bottom]){margin-bottom:0}:host ::slotted(.small\\:cspace-y-0){margin-top:0;margin-bottom:0}:host ::slotted(.small\\:cspace-t-0){margin-top:0}:host ::slotted(.small\\:cspace-b-0){margin-bottom:0}:host ::slotted(.smallheader\\:cspace-y-0){margin-top:0;margin-bottom:0}:host ::slotted(.smallheader\\:cspace-t-0){margin-top:0}:host ::slotted(.smallheader\\:cspace-b-0){margin-bottom:0}:host ::slotted(.medium\\:cspace-y-0){margin-top:0;margin-bottom:0}:host ::slotted(.medium\\:cspace-t-0){margin-top:0}:host ::slotted(.medium\\:cspace-b-0){margin-bottom:0}:host ::slotted(.large\\:cspace-y-0){margin-top:0;margin-bottom:0}:host ::slotted(.large\\:cspace-t-0){margin-top:0}:host ::slotted(.large\\:cspace-b-0){margin-bottom:0}:host ::slotted(.ultra\\:cspace-y-0){margin-top:0;margin-bottom:0}:host ::slotted(.ultra\\:cspace-t-0){margin-top:0}:host ::slotted(.ultra\\:cspace-b-0){margin-bottom:0}:host([remove-first-margin]:not([remove-first-margin=false])) ::slotted(:first-child){margin-top:0 !important}:host([remove-last-margin]:not([remove-last-margin=false])) ::slotted(:last-child){margin-bottom:0 !important}";
 
 const StzhCspace$1 = /*@__PURE__*/ proxyCustomElement(class StzhCspace extends HTMLElement {
   constructor() {

package/dist/components/stzh-cspace.js.map

@@ -1 +1 @@
-{"file":"stzh-cspace.js","mappings":";;AAAA,MAAM,aAAa,GAAG,+n7CAA+n7C;;MCexo7CA,YAAU;;;;;6BAEiC,IAAI;4BAGL,IAAI;;EAEzD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;KACpB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhCspace"],"sources":["src/components/stzh-cspace/stzh-cspace.scss?tag=stzh-cspace&encapsulation=shadow","src/components/stzh-cspace/stzh-cspace.tsx"],"sourcesContent":[":host {\n  ::slotted(stzh-input),\n  ::slotted(stzh-datepicker),\n  ::slotted(stzh-dropdown),\n  ::slotted(stzh-langnav),\n  ::slotted(stzh-fieldset),\n  ::slotted(stzh-actions),\n  ::slotted(stzh-upload),\n  ::slotted(stzh-saptcha),\n  ::slotted(stzh-checkboxgroup),\n  ::slotted(stzh-radiogroup),\n  ::slotted(stzh-message) {\n    margin-top: space('large');\n    margin-bottom: space('large');\n  }\n\n  ::slotted(h1),\n  ::slotted(stzh-heading[level=\"1\"]),\n  ::slotted(h2),\n  ::slotted(stzh-heading[level=\"2\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(h3),\n  ::slotted(stzh-heading[level=\"3\"]),\n  ::slotted(h4),\n  ::slotted(stzh-heading[level=\"4\"]) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  ::slotted(p),\n  ::slotted(stzh-text),\n  ::slotted(ul),\n  ::slotted(ol),\n  ::slotted(dl),\n  ::slotted(stzh-list) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  ::slotted(stzh-text[curve=\"hero\"]),\n  ::slotted(stzh-heading[curve=\"hero\"]) {\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-text[curve=\"h1\"]),\n  ::slotted(stzh-heading[curve=\"h1\"]),\n  ::slotted(stzh-text[curve=\"h2\"]),\n  ::slotted(stzh-heading[curve=\"h2\"]) {\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-text[curve=\"h1\"]),\n  ::slotted(stzh-heading[curve=\"h1\"]),\n  ::slotted(stzh-text[curve=\"h2\"]),\n  ::slotted(stzh-heading[curve=\"h2\"]) {\n    @include spaceCurve('margin-top', 'large');\n  }\n\n  ::slotted(stzh-text[curve=\"h3\"]),\n  ::slotted(stzh-heading[curve=\"h3\"]),\n  ::slotted(stzh-text[curve=\"h4\"]),\n  ::slotted(stzh-heading[curve=\"h4\"]) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  ::slotted(stzh-text[curve=\"p1\"]),\n  ::slotted(stzh-text[curve=\"p2\"]),\n  ::slotted(stzh-heading[curve=\"p1\"]),\n  ::slotted(stzh-heading[curve=\"p2\"]) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  ::slotted(.section),\n  ::slotted(stzh-accordion), // TODO: design missing default spacing, we gonna use the most common one\n  ::slotted(stzh-anchornav),\n  ::slotted(stzh-audio), // TOOD: design is using small curve as default spacing, but large looks better\n  ::slotted(stzh-iframe),\n  ::slotted(stzh-youtube),\n  ::slotted(stzh-microsite-teaserlist),\n  ::slotted(stzh-textandimage),\n  ::slotted(stzh-figure),\n  ::slotted(stzh-panorama),\n  ::slotted(stzh-chart),\n  ::slotted(stzh-sitemap),\n  ::slotted(stzh-section),\n  ::slotted(stzh-hr),\n  ::slotted(stzh-vbz-ticker) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  ::slotted(stzh-olmap),\n  ::slotted(stzh-anchornav) {\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-contact),\n  ::slotted(stzh-card) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  ::slotted(stzh-table),\n  ::slotted(stzh-datatable) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-pagetitle) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-pagebottom) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  ::slotted(stzh-progressbar) {\n    @include spaceCurve('margin-top', 'big');\n  }\n\n  ::slotted(stzh-pagination) {\n    margin-top: space('medium');\n    margin-bottom: space('medium');\n  }\n\n  ::slotted(stzh-actions) {\n    margin-top: space('xxlarge');\n\n    &[variant=\"process\"] {\n      margin-top: space('large');\n    }\n  }\n\n  ::slotted(stzh-fieldset) {\n    margin-top: space('large');\n    margin-bottom: space('large');\n\n    &[legend] {\n      margin-top: space('xxlarge');\n    }\n  }\n\n  ::slotted(stzh-heading[level=\"4\"] + stzh-datalist),\n  ::slotted(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    ::slotted(.cspace-y-curve-#{$spaceCurve}) {\n      @include spaceCurve('margin-top', $spaceCurve);\n      @include spaceCurve('margin-bottom', $spaceCurve);\n    }\n\n    ::slotted(.cspace-t-curve-#{$spaceCurve}) {\n      @include spaceCurve('margin-top', $spaceCurve);\n    }\n\n    ::slotted(.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        ::slotted(.#{$breakpoint}\\:cspace-y-#{$space}) {\n          margin-top: #{$value};\n          margin-bottom: #{$value};\n        }\n\n        ::slotted(.#{$breakpoint}\\:cspace-t-#{$space}) {\n          margin-top: #{$value};\n        }\n\n        ::slotted(.#{$breakpoint}\\:cspace-b-#{$space}) {\n          margin-bottom: #{$value};\n        }\n      } @else {\n        ::slotted(.cspace-y-#{$space}) {\n          margin-top: #{$value};\n          margin-bottom: #{$value};\n        }\n\n        ::slotted(.cspace-t-#{$space}) {\n          margin-top: #{$value};\n        }\n\n        ::slotted(.cspace-b-#{$space}) {\n          margin-bottom: #{$value};\n        }\n      }\n    }\n  }\n\n  ::slotted(.cspace-y-0) {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  ::slotted(.cspace-t-0),\n  ::slotted([no-cspace-top]) { // TODO: remove attribute\n    margin-top: 0;\n  }\n\n  ::slotted(.cspace-b-0),\n  ::slotted([no-cspace-bottom]) { // TODO: remove attribute\n    margin-bottom: 0;\n  }\n\n  @each $breakpoint, $size in $breakpoints {\n    ::slotted(.#{$breakpoint}\\:cspace-y-0) {\n      margin-top: 0;\n      margin-bottom: 0;\n    }\n\n    ::slotted(.#{$breakpoint}\\:cspace-t-0) {\n      margin-top: 0;\n    }\n\n    ::slotted(.#{$breakpoint}\\:cspace-b-0) {\n      margin-bottom: 0;\n    }\n  }\n}\n\n// Remove edge margin\n\n:host([remove-first-margin]:not([remove-first-margin=\"false\"])) {\n  ::slotted(:first-child) {\n    margin-top: 0 !important;\n  }\n}\n\n:host([remove-last-margin]:not([remove-last-margin=\"false\"])) {\n  ::slotted(:last-child) {\n    margin-bottom: 0 !important;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\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  shadow: true\n})\nexport class StzhCspace {\n  /** Whether first top margin of first child component should be set to 0. */\n  @Prop({ reflect: true }) removeFirstMargin: boolean = true;\n\n  /** Whether last bottom margin of last child component should be set to 0. */\n  @Prop({ reflect: true }) removeLastMargin: boolean = true;\n\n  render() {\n    const classes = {\n      \"stzh-cspace\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-cspace.js","mappings":";;AAAA,MAAM,aAAa,GAAG,qx7CAAqx7C;;MCe9x7CA,YAAU;;;;;6BAEiC,IAAI;4BAGL,IAAI;;EAEzD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;KACpB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhCspace"],"sources":["src/components/stzh-cspace/stzh-cspace.scss?tag=stzh-cspace&encapsulation=shadow","src/components/stzh-cspace/stzh-cspace.tsx"],"sourcesContent":[":host {\n  ::slotted(stzh-input),\n  ::slotted(stzh-datepicker),\n  ::slotted(stzh-dropdown),\n  ::slotted(stzh-langnav),\n  ::slotted(stzh-fieldset),\n  ::slotted(stzh-actions),\n  ::slotted(stzh-upload),\n  ::slotted(stzh-saptcha),\n  ::slotted(stzh-checkboxgroup),\n  ::slotted(stzh-radiogroup),\n  ::slotted(stzh-message) {\n    margin-top: space('large');\n    margin-bottom: space('large');\n  }\n\n  ::slotted(h1),\n  ::slotted(stzh-heading[level=\"1\"]),\n  ::slotted(h2),\n  ::slotted(stzh-heading[level=\"2\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(h3),\n  ::slotted(stzh-heading[level=\"3\"]),\n  ::slotted(h4),\n  ::slotted(stzh-heading[level=\"4\"]) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  ::slotted(p),\n  ::slotted(stzh-text),\n  ::slotted(ul),\n  ::slotted(ol),\n  ::slotted(dl),\n  ::slotted(stzh-list) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  ::slotted(stzh-text[curve=\"hero\"]),\n  ::slotted(stzh-heading[curve=\"hero\"]) {\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-text[curve=\"h1\"]),\n  ::slotted(stzh-heading[curve=\"h1\"]),\n  ::slotted(stzh-text[curve=\"h2\"]),\n  ::slotted(stzh-heading[curve=\"h2\"]) {\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-text[curve=\"h1\"]),\n  ::slotted(stzh-heading[curve=\"h1\"]),\n  ::slotted(stzh-text[curve=\"h2\"]),\n  ::slotted(stzh-heading[curve=\"h2\"]) {\n    @include spaceCurve('margin-top', 'large');\n  }\n\n  ::slotted(stzh-text[curve=\"h3\"]),\n  ::slotted(stzh-heading[curve=\"h3\"]),\n  ::slotted(stzh-text[curve=\"h4\"]),\n  ::slotted(stzh-heading[curve=\"h4\"]) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  ::slotted(stzh-text[curve=\"p1\"]),\n  ::slotted(stzh-text[curve=\"p2\"]),\n  ::slotted(stzh-heading[curve=\"p1\"]),\n  ::slotted(stzh-heading[curve=\"p2\"]) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  ::slotted(.section),\n  ::slotted(stzh-accordion), // TODO: design missing default spacing, we gonna use the most common one\n  ::slotted(stzh-anchornav),\n  ::slotted(stzh-audio), // TOOD: design is using small curve as default spacing, but large looks better\n  ::slotted(stzh-iframe),\n  ::slotted(stzh-youtube),\n  ::slotted(stzh-microsite-teaserlist),\n  ::slotted(stzh-textandimage),\n  ::slotted(stzh-figure),\n  ::slotted(stzh-gallery),\n  ::slotted(stzh-panorama),\n  ::slotted(stzh-chart),\n  ::slotted(stzh-sitemap),\n  ::slotted(stzh-section),\n  ::slotted(stzh-hr),\n  ::slotted(stzh-vbz-ticker) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  ::slotted(stzh-olmap),\n  ::slotted(stzh-anchornav) {\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-contact),\n  ::slotted(stzh-card) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  ::slotted(stzh-table),\n  ::slotted(stzh-datatable) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-pagetitle) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-pagebottom) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  ::slotted(stzh-progressbar) {\n    @include spaceCurve('margin-top', 'big');\n  }\n\n  ::slotted(stzh-pagination) {\n    margin-top: space('medium');\n    margin-bottom: space('medium');\n  }\n\n  ::slotted(stzh-actions) {\n    margin-top: space('xxlarge');\n\n    &[variant=\"process\"] {\n      margin-top: space('large');\n    }\n  }\n\n  ::slotted(stzh-fieldset) {\n    margin-top: space('large');\n    margin-bottom: space('large');\n\n    &[legend] {\n      margin-top: space('xxlarge');\n    }\n  }\n\n  ::slotted(stzh-heading[level=\"4\"] + stzh-datalist),\n  ::slotted(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    ::slotted(.cspace-y-curve-#{$spaceCurve}) {\n      @include spaceCurve('margin-top', $spaceCurve);\n      @include spaceCurve('margin-bottom', $spaceCurve);\n    }\n\n    ::slotted(.cspace-t-curve-#{$spaceCurve}) {\n      @include spaceCurve('margin-top', $spaceCurve);\n    }\n\n    ::slotted(.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        ::slotted(.#{$breakpoint}\\:cspace-y-#{$space}) {\n          margin-top: #{$value};\n          margin-bottom: #{$value};\n        }\n\n        ::slotted(.#{$breakpoint}\\:cspace-t-#{$space}) {\n          margin-top: #{$value};\n        }\n\n        ::slotted(.#{$breakpoint}\\:cspace-b-#{$space}) {\n          margin-bottom: #{$value};\n        }\n      } @else {\n        ::slotted(.cspace-y-#{$space}) {\n          margin-top: #{$value};\n          margin-bottom: #{$value};\n        }\n\n        ::slotted(.cspace-t-#{$space}) {\n          margin-top: #{$value};\n        }\n\n        ::slotted(.cspace-b-#{$space}) {\n          margin-bottom: #{$value};\n        }\n      }\n    }\n  }\n\n  ::slotted(.cspace-y-0) {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  ::slotted(.cspace-t-0),\n  ::slotted([no-cspace-top]) { // TODO: remove attribute\n    margin-top: 0;\n  }\n\n  ::slotted(.cspace-b-0),\n  ::slotted([no-cspace-bottom]) { // TODO: remove attribute\n    margin-bottom: 0;\n  }\n\n  @each $breakpoint, $size in $breakpoints {\n    ::slotted(.#{$breakpoint}\\:cspace-y-0) {\n      margin-top: 0;\n      margin-bottom: 0;\n    }\n\n    ::slotted(.#{$breakpoint}\\:cspace-t-0) {\n      margin-top: 0;\n    }\n\n    ::slotted(.#{$breakpoint}\\:cspace-b-0) {\n      margin-bottom: 0;\n    }\n  }\n}\n\n// Remove edge margin\n\n:host([remove-first-margin]:not([remove-first-margin=\"false\"])) {\n  ::slotted(:first-child) {\n    margin-top: 0 !important;\n  }\n}\n\n:host([remove-last-margin]:not([remove-last-margin=\"false\"])) {\n  ::slotted(:last-child) {\n    margin-bottom: 0 !important;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\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  shadow: true\n})\nexport class StzhCspace {\n  /** Whether first top margin of first child component should be set to 0. */\n  @Prop({ reflect: true }) removeFirstMargin: boolean = true;\n\n  /** Whether last bottom margin of last child component should be set to 0. */\n  @Prop({ reflect: true }) removeLastMargin: boolean = true;\n\n  render() {\n    const classes = {\n      \"stzh-cspace\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-figure2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { h as hasSlot } from './utils.js';
 
-const stzhFigureCss = ".sc-stzh-figure-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-figure-h{display:none}.sc-stzh-figure-h *.sc-stzh-figure,.sc-stzh-figure-h *.sc-stzh-figure::before,.sc-stzh-figure-h *.sc-stzh-figure::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-figure-h .has-focus.sc-stzh-figure{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-figure-h .stzh-fylingfocus-focused.sc-stzh-figure{outline-style:none !important}.sc-stzh-figure-h .stzh-fylingfocus-focused.sc-stzh-figure::-moz-focus-inner{border:0 !important}.sc-stzh-figure-h .sc-stzh-figure-s>*{max-width:100%}.sc-stzh-figure-h[fullwidth]:not([fullwidth=false]) .sc-stzh-figure-s>*{width:100%}.stzh-figure.sc-stzh-figure{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:0}.stzh-figure__element.sc-stzh-figure{display:-ms-flexbox;display:flex}@media print{.stzh-figure__element.sc-stzh-figure{page-break-inside:avoid;-moz-column-break-inside:avoid;-webkit-column-break-inside:avoid;break-inside:avoid}}.stzh-figure__caption-wrapper.sc-stzh-figure{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));display:-ms-flexbox;display:flex}@media screen and (min-width: 1024px){.stzh-figure__caption-wrapper.sc-stzh-figure{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-figure__counter.sc-stzh-figure:not(:empty){margin-right:var(--stzh-space-xsmall)}.stzh-figure__counter.sc-stzh-figure,.stzh-figure__heading.sc-stzh-figure{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-figure__caption-text.sc-stzh-figure:not(:empty)+.stzh-figure__copyright.sc-stzh-figure:not(:empty){margin-left:var(--stzh-space-xxsmall)}.stzh-figure__copyright.sc-stzh-figure{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-femto-font-size);line-height:var(--stzh-font-femto-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-figure--has-caption.sc-stzh-figure .stzh-figure__caption-wrapper.sc-stzh-figure{margin-top:var(--stzh-space-small)}";
+const stzhFigureCss = ".sc-stzh-figure-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-figure-h{display:none}.sc-stzh-figure-h *.sc-stzh-figure,.sc-stzh-figure-h *.sc-stzh-figure::before,.sc-stzh-figure-h *.sc-stzh-figure::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-figure-h .has-focus.sc-stzh-figure{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-figure-h .stzh-fylingfocus-focused.sc-stzh-figure{outline-style:none !important}.sc-stzh-figure-h .stzh-fylingfocus-focused.sc-stzh-figure::-moz-focus-inner{border:0 !important}.sc-stzh-figure-h{--caption-opacity:1}.sc-stzh-figure-h .sc-stzh-figure-s>*{max-width:100%}.sc-stzh-figure-h[fullwidth]:not([fullwidth=false]) .sc-stzh-figure-s>*{width:100%}.stzh-figure.sc-stzh-figure{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:0}.stzh-figure__element.sc-stzh-figure{display:-ms-flexbox;display:flex}@media print{.stzh-figure__element.sc-stzh-figure{page-break-inside:avoid;-moz-column-break-inside:avoid;-webkit-column-break-inside:avoid;break-inside:avoid}}.stzh-figure__caption-wrapper.sc-stzh-figure{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));display:-ms-flexbox;display:flex;opacity:var(--caption-opacity);-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 1024px){.stzh-figure__caption-wrapper.sc-stzh-figure{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-figure__counter.sc-stzh-figure:not(:empty){margin-right:var(--stzh-space-xsmall)}.stzh-figure__counter.sc-stzh-figure,.stzh-figure__heading.sc-stzh-figure{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-figure__caption-text.sc-stzh-figure:not(:empty)+.stzh-figure__copyright.sc-stzh-figure:not(:empty){margin-left:var(--stzh-space-xxsmall)}.stzh-figure__copyright.sc-stzh-figure{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-femto-font-size);line-height:var(--stzh-font-femto-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-figure--has-caption.sc-stzh-figure .stzh-figure__caption-wrapper.sc-stzh-figure{margin-top:var(--stzh-space-small)}";
 
 const StzhFigure = /*@__PURE__*/ proxyCustomElement(class StzhFigure extends HTMLElement {
   constructor() {

package/dist/components/stzh-figure2.js.map

@@ -1 +1 @@
-{"file":"stzh-figure2.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,yvFAAyvF;;MCsBlwF,UAAU;;;;mBAEK,EAAE;qBAGA,EAAE;mBAGJ,EAAE;mBAGF,EAAE;qBAGkB,IAAI;;EAIlD,MAAM;IACJ,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACzD,MAAM,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;IAC7D,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACzD,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IAEzD,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;MACnB,0BAA0B,EACxB,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe;WAC9B,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB;WACrC,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe;WACjC,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe;KACvC,CAAC;IAEF,QACE,EAAC,IAAI,QACH,cAAQ,KAAK,EAAE,OAAO,IACpB,WAAK,KAAK,EAAC,sBAAsB,IAC/B,eAAa,CACT,EACN,kBAAY,KAAK,EAAC,8BAA8B,IAC9C,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,EACN,WAAK,KAAK,EAAC,mBAAmB,IAC5B,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,EACN,WAAK,KAAK,EAAC,sBAAsB,IAC/B,YAAM,KAAK,EAAC,2BAA2B,IACpC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACtD,EACP,YAAM,KAAK,EAAC,wBAAwB,IACjC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC5D,CACH,CACF,CACK,CACN,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-figure/stzh-figure.scss?tag=stzh-figure&encapsulation=scoped","src/components/stzh-figure/stzh-figure.tsx"],"sourcesContent":[":host {\n  ::slotted(*) {\n    max-width: 100%;\n  }\n}\n\n:host([fullwidth]:not([fullwidth=\"false\"])) ::slotted(*) {\n  width: 100%;\n}\n\n.stzh-figure {\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n\n  &__element {\n    display: flex;\n\n    @media print {\n      page-break-inside: avoid;\n      break-inside: avoid;\n    }\n  }\n\n  &__caption-wrapper {\n    @include fontCurve('caption');\n    display: flex;\n  }\n\n  &__counter {\n    &:not(:empty) {\n      margin-right: space('xsmall');\n    }\n  }\n\n  &__counter,\n  &__heading {\n    @include font('heavy');\n  }\n\n  &__caption-text:not(:empty) + &__copyright:not(:empty) {\n    margin-left: space('xxsmall');\n  }\n\n  &__copyright {\n    @include font('medium');\n    @include fontSize('femto');\n  }\n\n  /* Has caption content */\n\n  &--has-caption &__caption-wrapper {\n    margin-top: space('small');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for e.g. image or video\n * @slot caption - Slot for a caption as alternative for attribute\n * @slot copyright - Slot for a copyright as alternative for attribute\n * @slot counter - Slot for a counter as alternative for attribute\n * @slot heading - Slot for a heading as alternative for attribute\n */\n@Component({\n  tag: \"stzh-figure\",\n  styleUrl: \"stzh-figure.scss\",\n  scoped: true\n})\nexport class StzhFigure {\n  /** Caption */\n  @Prop() caption: string = \"\";\n\n  /** Copyright */\n  @Prop() copyright: string = \"\";\n\n  /** Counter */\n  @Prop() counter: string = \"\";\n\n  /** Heading */\n  @Prop() heading: string = \"\";\n\n  /** Whether to stretch slotted content to fullwidth */\n  @Prop({ reflect: true }) fullwidth: boolean = true;\n\n  @Element() element: HTMLStzhFigureElement;\n\n  render() {\n    const captionSlotUsed = hasSlot(this.element, 'caption');\n    const copyrightSlotUsed = hasSlot(this.element, 'copyright');\n    const counterSlotUsed = hasSlot(this.element, 'counter');\n    const headingSlotUsed = hasSlot(this.element, 'heading');\n\n    const classes = {\n      \"stzh-figure\": true,\n      \"stzh-figure--has-caption\":\n        !!this.caption || captionSlotUsed\n        || !!this.copyright || copyrightSlotUsed\n        || !!this.counter || counterSlotUsed\n        || !!this.heading || headingSlotUsed\n    };\n\n    return (\n      <Host>\n        <figure class={classes}>\n          <div class=\"stzh-figure__element\">\n            <slot></slot>\n          </div>\n          <figcaption class=\"stzh-figure__caption-wrapper\">\n            <div class=\"stzh-figure__counter\">\n              {this.counter ? this.counter : <slot name=\"counter\"></slot>}\n            </div>\n            <div class=\"stzh-figure__text\">\n              <div class=\"stzh-figure__heading\">\n                {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n              </div>\n              <div class=\"stzh-figure__caption\">\n                <span class=\"stzh-figure__caption-text\">\n                  {this.caption ? this.caption : <slot name=\"caption\"></slot>}\n                </span>\n                <span class=\"stzh-figure__copyright\">\n                  {this.copyright ? this.copyright : <slot name=\"copyright\"></slot>}\n                </span>\n              </div>\n            </div>\n          </figcaption>\n        </figure>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-figure2.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,o8FAAo8F;;MCsB78F,UAAU;;;;mBAEK,EAAE;qBAGA,EAAE;mBAGJ,EAAE;mBAGF,EAAE;qBAGkB,IAAI;;EAIlD,MAAM;IACJ,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACzD,MAAM,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;IAC7D,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACzD,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IAEzD,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;MACnB,0BAA0B,EACxB,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe;WAC9B,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB;WACrC,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe;WACjC,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe;KACvC,CAAC;IAEF,QACE,EAAC,IAAI,QACH,cAAQ,KAAK,EAAE,OAAO,IACpB,WAAK,KAAK,EAAC,sBAAsB,IAC/B,eAAa,CACT,EACN,kBAAY,KAAK,EAAC,8BAA8B,IAC9C,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,EACN,WAAK,KAAK,EAAC,mBAAmB,IAC5B,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,EACN,WAAK,KAAK,EAAC,sBAAsB,IAC/B,YAAM,KAAK,EAAC,2BAA2B,IACpC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACtD,EACP,YAAM,KAAK,EAAC,wBAAwB,IACjC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC5D,CACH,CACF,CACK,CACN,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-figure/stzh-figure.scss?tag=stzh-figure&encapsulation=scoped","src/components/stzh-figure/stzh-figure.tsx"],"sourcesContent":[":host {\n  --caption-opacity: 1;\n\n  ::slotted(*) {\n    max-width: 100%;\n  }\n}\n\n:host([fullwidth]:not([fullwidth=\"false\"])) ::slotted(*) {\n  width: 100%;\n}\n\n.stzh-figure {\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n\n  &__element {\n    display: flex;\n\n    @media print {\n      page-break-inside: avoid;\n      break-inside: avoid;\n    }\n  }\n\n  &__caption-wrapper {\n    @include fontCurve('caption');\n    display: flex;\n    opacity: var(--caption-opacity);\n    transition: opacity $baseTransitionAnimationSpeed;\n  }\n\n  &__counter {\n    &:not(:empty) {\n      margin-right: space('xsmall');\n    }\n  }\n\n  &__counter,\n  &__heading {\n    @include font('heavy');\n  }\n\n  &__caption-text:not(:empty) + &__copyright:not(:empty) {\n    margin-left: space('xxsmall');\n  }\n\n  &__copyright {\n    @include font('medium');\n    @include fontSize('femto');\n  }\n\n  /* Has caption content */\n\n  &--has-caption &__caption-wrapper {\n    margin-top: space('small');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for e.g. image or video\n * @slot caption - Slot for a caption as alternative for attribute\n * @slot copyright - Slot for a copyright as alternative for attribute\n * @slot counter - Slot for a counter as alternative for attribute\n * @slot heading - Slot for a heading as alternative for attribute\n */\n@Component({\n  tag: \"stzh-figure\",\n  styleUrl: \"stzh-figure.scss\",\n  scoped: true\n})\nexport class StzhFigure {\n  /** Caption */\n  @Prop() caption: string = \"\";\n\n  /** Copyright */\n  @Prop() copyright: string = \"\";\n\n  /** Counter */\n  @Prop() counter: string = \"\";\n\n  /** Heading */\n  @Prop() heading: string = \"\";\n\n  /** Whether to stretch slotted content to fullwidth */\n  @Prop({ reflect: true }) fullwidth: boolean = true;\n\n  @Element() element: HTMLStzhFigureElement;\n\n  render() {\n    const captionSlotUsed = hasSlot(this.element, 'caption');\n    const copyrightSlotUsed = hasSlot(this.element, 'copyright');\n    const counterSlotUsed = hasSlot(this.element, 'counter');\n    const headingSlotUsed = hasSlot(this.element, 'heading');\n\n    const classes = {\n      \"stzh-figure\": true,\n      \"stzh-figure--has-caption\":\n        !!this.caption || captionSlotUsed\n        || !!this.copyright || copyrightSlotUsed\n        || !!this.counter || counterSlotUsed\n        || !!this.heading || headingSlotUsed\n    };\n\n    return (\n      <Host>\n        <figure class={classes}>\n          <div class=\"stzh-figure__element\">\n            <slot></slot>\n          </div>\n          <figcaption class=\"stzh-figure__caption-wrapper\">\n            <div class=\"stzh-figure__counter\">\n              {this.counter ? this.counter : <slot name=\"counter\"></slot>}\n            </div>\n            <div class=\"stzh-figure__text\">\n              <div class=\"stzh-figure__heading\">\n                {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n              </div>\n              <div class=\"stzh-figure__caption\">\n                <span class=\"stzh-figure__caption-text\">\n                  {this.caption ? this.caption : <slot name=\"caption\"></slot>}\n                </span>\n                <span class=\"stzh-figure__copyright\">\n                  {this.copyright ? this.copyright : <slot name=\"copyright\"></slot>}\n                </span>\n              </div>\n            </div>\n          </figcaption>\n        </figure>\n      </Host>\n    );\n  }\n}\n"],"version":3}