@oiz/stzh-components 3.0.0 → 3.1.0

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

@@ -1 +1 @@
-{"file":"stzh-contact.entry.cjs.js","mappings":"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","names":["hasSlot","h","Host","Fragment","index"],"sources":["src/components/stzh-contact/stzh-contact.scss?tag=stzh-contact&encapsulation=scoped","src/components/stzh-contact/stzh-contact.tsx"],"sourcesContent":[":host {\n  --grid-template-areas: var(\n    --stzh-contact-grid-template-areas,\n    \"heading heading heading heading\"\n    \"image image image image\"\n    \"info info info info\"\n    \"availability availability availability availability\"\n    \"additional additional additional additional\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-contact-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-contact-grid-template-areas,\n      \"heading heading heading heading heading heading heading heading\"\n      \"image image image image . . . .\"\n      \"info info info info availability availability availability availability\"\n      \"additional additional additional additional additional additional additional additional\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-contact-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  ::slotted([slot=\"image\"]) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n\n.stzh-contact {\n  @include fontCurve('p1');\n  @include gridGutter;\n  display: grid;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__main-heading {\n    grid-area: heading;\n\n    &:not(:empty) {\n      @include spaceCurve('margin-bottom', 'small');\n    }\n  }\n\n  &__image-wrapper {\n    grid-area: image;\n    background-color: $colorSecondary20;\n  }\n\n  &__image {\n    position: relative;\n  }\n\n  &__info {\n    grid-area: info;\n  }\n\n  &__heading,\n  &__name,\n  &__address,\n  &__numbers,\n  &__emails,\n  &__pobox,\n  &__availability-title {\n    &:not(:empty):not(:last-child) {\n      margin-bottom: space('xsmall');\n    }\n  }\n\n  &__number,\n  &__email {\n    display: flex;\n    align-items: center;\n  }\n\n  &__heading,\n  &__name,\n  &__availability-title {\n    @include fontCurve('p1');\n    margin: 0px;\n  }\n\n  &__heading,\n  &__name.is-heading,\n  &__availability-title {\n    @include font('heavy');\n  }\n\n  &__availability {\n    grid-area: availability;\n    margin-top: space('xlarge');\n\n    @include mq($from: medium) {\n      margin-top: 0px;\n    }\n  }\n\n  &__availability-list,\n  &__availability-hour-list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  &__availability-list {\n    @include spaceCurve('gap', 'tiny');\n    display: grid;\n  }\n\n  &__availability-weekday {\n    @include fontCurve('p2');\n  }\n\n  &__availability-hours {\n    display: flex;\n    flex-wrap: wrap;\n    column-gap: space('xsmall');\n  }\n\n  &__availability-hours-separator {\n    width: 1px;\n    background-color: currentColor;\n    flex-shrink: 0;\n  }\n\n  &__additional {\n    @include spaceCurve('gap', 'regular');\n    grid-area: additional;\n    display: grid;\n\n    &:not(:empty) {\n      margin-top: space('medium');\n    }\n  }\n\n  /* Has image */\n\n  &--has-image &__image-wrapper {\n    margin-bottom: space('medium');\n  }\n\n  &--has-image &__image {\n    width: 64px;\n    height: 64px;\n\n    @include mq($from: small) {\n      width: 80px;\n      height: 80px;\n    }\n\n    @include mq($from: medium) {\n      width: 100px;\n      height: 100px;\n    }\n\n    @include mq($from: large) {\n      width: 120px;\n      height: 120px;\n    }\n\n    @include mq($from: ultra) {\n      width: 140px;\n      height: 140px;\n    }\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  ContactEmail,\n  StzhContactAvailabilityItem\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 main-heading - slot for main heading\n * @slot image - slot for image\n * @slot address - slot for address (alternative for `address` property or separate properties `street`, `streetInfo`, `postalCode` & `location`)\n * @slot pobox - slot for pobox (alternative for `pobox` property or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`)\n * @slot slot for additional (e.g. accordion with contact form, map or datalist)\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  /** Main heading */\n  @Prop() mainHeading: string;\n\n  /** Main heading level */\n  @Prop() mainHeadingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"2\";\n\n  /** Heading */\n  @Prop() heading: string;\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Name */\n  @Prop() name: string;\n\n  /** Name heading level */\n  @Prop() nameHeadingLevel: \"\" | \"1\" | \"2\" | \"3\" | \"4\" = \"\";\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  /**\n   * Numbers\n   * Array of objects that can include the attributes `label`, `number`, `text`, `href`\n   * and optionally `analyticsId` for setting `s-object-id` to the link element\n   * (for Adobe Analytics, default value is `label` and `text`).\n   */\n  @Prop() emails: ContactEmail[] | string = [];\n  private _emails: ContactEmail[] = [];\n\n  /** Pobox (alternative for pobox slot or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`) */\n  @Prop() pobox: string;\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 title level */\n  @Prop() availabilityTitleLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Availability times */\n  @Prop() availability: string | StzhContactAvailabilityItem[];\n  private _availability: StzhContactAvailabilityItem[] = [];\n  // private _availabilityDataItems: StzhDatalistItemEntry[] = [];\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  @Watch(\"emails\")\n  emailsWatcher(newValue: ContactEmail[] | string) {\n    if (typeof newValue === \"string\") {\n      this._emails = JSON.parse(newValue);\n    } else {\n      this._emails = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhFigureElement;\n\n  async componentWillLoad() {\n    this.numbersWatcher(this.numbers);\n    this.emailsWatcher(this.emails);\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    const hasAddons = hasSlot(this.element, \"addons\");\n    const hasLinks = hasSlot(this.element, \"links\");\n\n    const classes = {\n      \"stzh-contact\": true,\n      \"stzh-contact--has-image\": hasImage,\n      \"stzh-contact--has-address\": hasAddress,\n      \"stzh-contact--has-addons\": hasAddons,\n      \"stzh-contact--has-links\": hasLinks\n    };\n\n    const HeadingLevel = `h${this.headingLevel}`;\n    const NameHeadingLevel = this.nameHeadingLevel ? `h${this.nameHeadingLevel}` : 'div';\n    const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;\n\n    return (\n      <Host>\n        <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n          <div\n            class=\"stzh-contact__main-heading\"\n            itemprop={(this.type === \"Organization\" && !this.heading\n              || this.type === \"Person\" && !this.name) ? \"name\" : null}\n          >\n            {this.mainHeading\n              ? <stzh-heading level={this.mainHeadingLevel}>{this.mainHeading}</stzh-heading>\n              : <slot name=\"main-heading\"></slot>\n            }\n          </div>\n\n          <div class=\"stzh-contact__image-wrapper\">\n            <div class=\"stzh-contact__image\">\n              <slot name=\"image\"></slot>\n            </div>\n          </div>\n\n          <div class=\"stzh-contact__info\">\n            {this.heading &&\n              <HeadingLevel\n                class=\"stzh-contact__heading\"\n                itemprop={this.type === \"Organization\" || !this.name ? \"name\" : null}\n                innerHTML={this.heading}\n              ></HeadingLevel>\n            }\n\n            {this.name &&\n              <NameHeadingLevel\n                class={{\n                  \"stzh-contact__name\": true,\n                  \"is-heading\": this.nameHeadingLevel !== \"\",\n                }}\n                itemprop={this.type === \"Person\" ? \"name\" : null}\n              >\n                {this.name}\n              </NameHeadingLevel>\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                      {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.length > 0 &&\n              <div class=\"stzh-contact__numbers\">\n                {this._numbers.map((number) =>\n                  <div class=\"stzh-contact__number\">\n                    <span>{number.label}&nbsp;</span>\n                    <stzh-link\n                      size=\"inherit\"\n                      height=\"auto\"\n                      class=\"stzh-contact__number-link\"\n                      href={`${number.type}:${formatTel(number.number)}`}\n                      analyticsId={number.analyticsId || (`${number.label} ${number.number}`)}\n                      itemprop={number.type === \"fax\" ? \"faxNumber\" : \"telephone\"}\n                    >\n                      {number.number}\n                    </stzh-link>\n                  </div>\n                )}\n              </div>\n            }\n\n            {this._emails.length > 0 &&\n              <div class=\"stzh-contact__emails\">\n                {this._emails.map((email) =>\n                  <div class=\"stzh-contact__email\">\n                    <span>{email.label}&nbsp;</span>\n                    {email.href\n                      ?\n                      <stzh-link\n                        size=\"inherit\"\n                        height=\"auto\"\n                        class=\"stzh-container__email-link\"\n                        href={`mailto:${email.href}`}\n                        analyticsId={email.analyticsId || (`${email.label} ${email.text}`)}\n                        itemprop=\"email\"\n                      >\n                        {email.text}\n                      </stzh-link>\n                      :\n                      <span\n                        class=\"stzh-container__email-link\"\n                        itemprop=\"email\"\n                      >\n                        {email.text}\n                      </span>\n                    }\n                  </div>\n                )}\n              </div>\n            }\n\n            <div\n              class=\"stzh-contact__pobox\"\n              innerHTML={this.pobox}\n            >\n              {!this.pobox &&\n                <Fragment>\n                  {this.poboxHeading &&\n                    <div class=\"stzh-contact__pobox-heading\">{this.poboxHeading}</div>\n                  }\n                  {this.poboxTitle &&\n                    <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>\n                  }\n                  {this.poboxPostalCode &&\n                    <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode}&nbsp;</span>\n                  }\n                  {this.poboxLocation &&\n                    <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>\n                  }\n                  <slot name=\"pobox\"></slot>\n                </Fragment>\n              }\n            </div>\n          </div>\n\n          {this.availability &&\n            <div class=\"stzh-contact__availability\">\n              {this.availabilityTitle &&\n                <AvailabilityTitleElement\n                  class=\"stzh-contact__availability-title\"\n                >\n                  {this.availabilityTitle}\n                </AvailabilityTitleElement>\n              }\n\n              {this._availability.length > 0 &&\n                <ul class=\"stzh-contact__availability-list\">\n                  {this._availability.map((item) =>\n                    <li class=\"stzh-contact__availability-list-item\">\n                      <div class=\"stzh-contact__availability-weekday\">{item.weekday}</div>\n                      {item.hours.length > 0\n                        ?\n                        <div class=\"stzh-contact__availability-hours\">\n                          {item.hours.map((hour, index) =>\n                            <Fragment>\n                              <div class=\"stzh-contact__availability-hour\">{hour}</div>\n                              {index < item.hours.length - 1 &&\n                                <div class=\"stzh-contact__availability-hours-separator\"></div>\n                              }\n                            </Fragment>\n                          )}\n                        </div>\n                        :\n                        <div class=\"stzh-contact__availability-hours\">\n                          -\n                        </div>\n                      }\n                    </li>\n                  )}\n                </ul>\n              }\n            </div>\n          }\n\n          <div class=\"stzh-contact__additional\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-contact.entry.cjs.js","mappings":"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","names":["hasSlot","h","Host","Fragment","index"],"sources":["src/components/stzh-contact/stzh-contact.scss?tag=stzh-contact&encapsulation=scoped","src/components/stzh-contact/stzh-contact.tsx"],"sourcesContent":[":host {\n  --grid-template-areas: var(\n    --stzh-contact-grid-template-areas,\n    \"heading heading heading heading\"\n    \"image image image image\"\n    \"info info info info\"\n    \"availability availability availability availability\"\n    \"additional additional additional additional\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-contact-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-contact-grid-template-areas,\n      \"heading heading heading heading heading heading heading heading\"\n      \"image image image image . . . .\"\n      \"info info info info availability availability availability availability\"\n      \"additional additional additional additional additional additional additional additional\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-contact-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  ::slotted([slot=\"image\"]) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n\n.stzh-contact {\n  @include fontCurve('p1');\n  @include gridGutter;\n  display: grid;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__main-heading {\n    grid-area: heading;\n\n    &:not(:empty) {\n      @include spaceCurve('margin-bottom', 'small');\n    }\n  }\n\n  &__image-wrapper {\n    grid-area: image;\n    background-color: $colorSecondary20;\n  }\n\n  &__image {\n    position: relative;\n  }\n\n  &__info {\n    grid-area: info;\n  }\n\n  &__heading,\n  &__name,\n  &__address,\n  &__numbers,\n  &__emails,\n  &__pobox,\n  &__availability-title {\n    &:not(:empty):not(:last-child) {\n      margin-bottom: space('xsmall');\n    }\n  }\n\n  &__number,\n  &__email {\n    display: flex;\n    align-items: center;\n  }\n\n  &__heading,\n  &__name,\n  &__availability-title {\n    @include fontCurve('p1');\n    margin: 0px;\n  }\n\n  &__heading,\n  &__name.is-heading,\n  &__availability-title {\n    @include font('heavy');\n  }\n\n  &__availability {\n    grid-area: availability;\n    margin-top: space('xlarge');\n\n    @include mq($from: medium) {\n      margin-top: 0px;\n    }\n  }\n\n  &__availability-list,\n  &__availability-hour-list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  &__availability-list {\n    @include spaceCurve('gap', 'tiny');\n    display: grid;\n  }\n\n  &__availability-weekday {\n    @include fontCurve('p2');\n  }\n\n  &__availability-hours {\n    display: flex;\n    flex-wrap: wrap;\n    column-gap: space('xsmall');\n  }\n\n  &__availability-hours-separator {\n    width: 1px;\n    background-color: currentColor;\n    flex-shrink: 0;\n  }\n\n  &__additional {\n    @include spaceCurve('gap', 'regular');\n    grid-area: additional;\n    display: grid;\n\n    &:not(:empty) {\n      margin-top: space('medium');\n    }\n  }\n\n  /* Has image */\n\n  &--has-image &__image-wrapper {\n    margin-bottom: space('medium');\n  }\n\n  &--has-image &__image {\n    width: 64px;\n    height: 64px;\n\n    @include mq($from: small) {\n      width: 80px;\n      height: 80px;\n    }\n\n    @include mq($from: medium) {\n      width: 100px;\n      height: 100px;\n    }\n\n    @include mq($from: large) {\n      width: 120px;\n      height: 120px;\n    }\n\n    @include mq($from: ultra) {\n      width: 140px;\n      height: 140px;\n    }\n  }\n}\n","import { Component, Element, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { ContactEmail, ContactNumber, StzhContactAvailabilityItem } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nfunction formatTel(tel: string) {\n  return tel.replace(/\\s/g, \"\");\n}\n\n/**\n * @slot main-heading - slot for main heading\n * @slot image - slot for image\n * @slot address - slot for address (alternative for `address` property or separate properties `street`, `streetInfo`, `postalCode` & `location`)\n * @slot pobox - slot for pobox (alternative for `pobox` property or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`)\n * @slot slot for additional (e.g. accordion with contact form, map or datalist)\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  /** Main heading */\n  @Prop() mainHeading: string;\n\n  /** Main heading level */\n  @Prop() mainHeadingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"2\";\n\n  /** Heading */\n  @Prop() heading: string;\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Name */\n  @Prop() name: string;\n\n  /** Name heading level */\n  @Prop() nameHeadingLevel: \"\" | \"1\" | \"2\" | \"3\" | \"4\" = \"\";\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 | string[];\n  private _street: string[] = [];\n\n  /** Additional street info */\n  @Prop() streetInfo: string | string[];\n  private _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  /**\n   * Numbers\n   * Array of objects that can include the attributes `label`, `number`, `text`, `href`\n   * and optionally `analyticsId` for setting `s-object-id` to the link element\n   * (for Adobe Analytics, default value is `label` and `text`).\n   */\n  @Prop() emails: ContactEmail[] | string = [];\n  private _emails: ContactEmail[] = [];\n\n  /** Pobox (alternative for pobox slot or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`) */\n  @Prop() pobox: string;\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 title level */\n  @Prop() availabilityTitleLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Availability times */\n  @Prop() availability: string | StzhContactAvailabilityItem[];\n  private _availability: StzhContactAvailabilityItem[] = [];\n\n  // private _availabilityDataItems: StzhDatalistItemEntry[] = [];\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  @Watch(\"emails\")\n  emailsWatcher(newValue: ContactEmail[] | string) {\n    if (typeof newValue === \"string\") {\n      this._emails = JSON.parse(newValue);\n    } else {\n      this._emails = newValue;\n    }\n  }\n\n  @Watch(\"street\")\n  streetWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._street = JSON.parse(newValue);\n      } catch (noArrayException) {\n        this._street = [newValue];\n      }\n    } else if (newValue) {\n      this._street = newValue;\n    }\n  }\n\n  @Watch(\"streetInfo\")\n  streetInfoWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._streetInfo = JSON.parse(newValue);\n      } catch (noArrayException) {\n        this._streetInfo = [newValue];\n      }\n    } else if (newValue) {\n      this._streetInfo = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhFigureElement;\n\n  async componentWillLoad() {\n    this.numbersWatcher(this.numbers);\n    this.emailsWatcher(this.emails);\n    this.availabilityWatcher(this.availability);\n    this.streetWatcher(this.street);\n    this.streetInfoWatcher(this.streetInfo);\n  }\n\n  render() {\n    const hasImage = hasSlot(this.element, \"image\");\n    const hasAddress = !!this.address || hasSlot(this.element, \"address\");\n    const hasAddons = hasSlot(this.element, \"addons\");\n    const hasLinks = hasSlot(this.element, \"links\");\n\n    const classes = {\n      \"stzh-contact\": true,\n      \"stzh-contact--has-image\": hasImage,\n      \"stzh-contact--has-address\": hasAddress,\n      \"stzh-contact--has-addons\": hasAddons,\n      \"stzh-contact--has-links\": hasLinks,\n    };\n\n    const HeadingLevel = `h${this.headingLevel}`;\n    const NameHeadingLevel = this.nameHeadingLevel ? `h${this.nameHeadingLevel}` : \"div\";\n    const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;\n\n    return (\n      <Host>\n        <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n          <div\n            class=\"stzh-contact__main-heading\"\n            itemprop={\n              (this.type === \"Organization\" && !this.heading) || (this.type === \"Person\" && !this.name) ? \"name\" : null\n            }\n          >\n            {this.mainHeading ? (\n              <stzh-heading level={this.mainHeadingLevel}>{this.mainHeading}</stzh-heading>\n            ) : (\n              <slot name=\"main-heading\"></slot>\n            )}\n          </div>\n\n          <div class=\"stzh-contact__image-wrapper\">\n            <div class=\"stzh-contact__image\">\n              <slot name=\"image\"></slot>\n            </div>\n          </div>\n\n          <div class=\"stzh-contact__info\">\n            {this.heading && (\n              <HeadingLevel\n                class=\"stzh-contact__heading\"\n                itemprop={this.type === \"Organization\" || !this.name ? \"name\" : null}\n                innerHTML={this.heading}\n              ></HeadingLevel>\n            )}\n\n            {this.name && (\n              <NameHeadingLevel\n                class={{\n                  \"stzh-contact__name\": true,\n                  \"is-heading\": this.nameHeadingLevel !== \"\",\n                }}\n                itemprop={this.type === \"Person\" ? \"name\" : null}\n              >\n                {this.name}\n              </NameHeadingLevel>\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.length > 0 && (\n                    <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n                      {this._street.map((street: string) => (\n                        <Fragment>\n                          {street}\n                          <br />\n                        </Fragment>\n                      ))}\n                      {this._streetInfo.length > 0 && (\n                        <Fragment>\n                          <br />{\" \"}\n                          {this._streetInfo.map((streetInfo: string) => (\n                            <Fragment>\n                              {streetInfo}\n                              <br />\n                            </Fragment>\n                          ))}\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.length > 0 && (\n              <div class=\"stzh-contact__numbers\">\n                {this._numbers.map(number => (\n                  <div class=\"stzh-contact__number\">\n                    <span>{number.label}&nbsp;</span>\n                    <stzh-link\n                      size=\"inherit\"\n                      height=\"auto\"\n                      class=\"stzh-contact__number-link\"\n                      href={`${number.type}:${formatTel(number.number)}`}\n                      analyticsId={number.analyticsId || `${number.label} ${number.number}`}\n                      itemprop={number.type === \"fax\" ? \"faxNumber\" : \"telephone\"}\n                    >\n                      {number.number}\n                    </stzh-link>\n                  </div>\n                ))}\n              </div>\n            )}\n\n            {this._emails.length > 0 && (\n              <div class=\"stzh-contact__emails\">\n                {this._emails.map(email => (\n                  <div class=\"stzh-contact__email\">\n                    <span>{email.label}&nbsp;</span>\n                    {email.href ? (\n                      <stzh-link\n                        size=\"inherit\"\n                        height=\"auto\"\n                        class=\"stzh-container__email-link\"\n                        href={`mailto:${email.href}`}\n                        analyticsId={email.analyticsId || `${email.label} ${email.text}`}\n                        itemprop=\"email\"\n                      >\n                        {email.text}\n                      </stzh-link>\n                    ) : (\n                      <span class=\"stzh-container__email-link\" itemprop=\"email\">\n                        {email.text}\n                      </span>\n                    )}\n                  </div>\n                ))}\n              </div>\n            )}\n\n            <div class=\"stzh-contact__pobox\" innerHTML={this.pobox}>\n              {!this.pobox && (\n                <Fragment>\n                  {this.poboxHeading && <div class=\"stzh-contact__pobox-heading\">{this.poboxHeading}</div>}\n                  {this.poboxTitle && <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>}\n                  {this.poboxPostalCode && (\n                    <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode}&nbsp;</span>\n                  )}\n                  {this.poboxLocation && <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>}\n                  <slot name=\"pobox\"></slot>\n                </Fragment>\n              )}\n            </div>\n          </div>\n\n          {this.availability && (\n            <div class=\"stzh-contact__availability\">\n              {this.availabilityTitle && (\n                <AvailabilityTitleElement class=\"stzh-contact__availability-title\">\n                  {this.availabilityTitle}\n                </AvailabilityTitleElement>\n              )}\n\n              {this._availability.length > 0 && (\n                <ul class=\"stzh-contact__availability-list\">\n                  {this._availability.map(item => (\n                    <li class=\"stzh-contact__availability-list-item\">\n                      <div class=\"stzh-contact__availability-weekday\">{item.weekday}</div>\n                      {item.hours.length > 0 ? (\n                        <div class=\"stzh-contact__availability-hours\">\n                          {item.hours.map((hour, index) => (\n                            <Fragment>\n                              <div class=\"stzh-contact__availability-hour\">{hour}</div>\n                              {index < item.hours.length - 1 && (\n                                <div class=\"stzh-contact__availability-hours-separator\"></div>\n                              )}\n                            </Fragment>\n                          ))}\n                        </div>\n                      ) : (\n                        <div class=\"stzh-contact__availability-hours\">-</div>\n                      )}\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </div>\n          )}\n\n          <div class=\"stzh-contact__additional\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-92254d32.js');
 
-const stzhContainerCss = ".sc-stzh-container-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-container-h{display:none}.sc-stzh-container-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-container-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-container-h *.sc-stzh-container,.sc-stzh-container-h *.sc-stzh-container::before,.sc-stzh-container-h *.sc-stzh-container::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-container-h .has-focus.sc-stzh-container{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-container-h .stzh-fylingfocus-focused.sc-stzh-container{outline-style:none !important}.sc-stzh-container-h .stzh-fylingfocus-focused.sc-stzh-container::-moz-focus-inner{border:0 !important}.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-1.25rem;margin-right:-1.25rem}@media screen and (min-width: 600px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-2rem;margin-right:-2rem}}@media screen and (min-width: 900px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-2.5rem;margin-right:-2.5rem}}@media screen and (min-width: 1260px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-4rem;margin-right:-4rem}}@media screen and (min-width: 1600px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / -2);margin-right:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / -2)}}.sc-stzh-container-h .sc-stzh-container-s stzh-banner,.sc-stzh-container-h .sc-stzh-container-s stzh-ghettobox,.sc-stzh-container-h .sc-stzh-container-s stzh-pagetitle,.sc-stzh-container-h .sc-stzh-container-s stzh-container{position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width))}.stzh-container.sc-stzh-container{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-container.sc-stzh-container{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-container.sc-stzh-container{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-container.sc-stzh-container{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-container.sc-stzh-container{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-container--has-no-margin.sc-stzh-container{margin-left:auto;margin-right:auto}";
+const stzhContainerCss = ".sc-stzh-container-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-container-h{display:none}.sc-stzh-container-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-container-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-container-h *.sc-stzh-container,.sc-stzh-container-h *.sc-stzh-container::before,.sc-stzh-container-h *.sc-stzh-container::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-container-h .has-focus.sc-stzh-container{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-container-h .stzh-fylingfocus-focused.sc-stzh-container{outline-style:none !important}.sc-stzh-container-h .stzh-fylingfocus-focused.sc-stzh-container::-moz-focus-inner{border:0 !important}.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-1.25rem;margin-right:-1.25rem}@media screen and (min-width: 600px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-2rem;margin-right:-2rem}}@media screen and (min-width: 900px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-2.5rem;margin-right:-2.5rem}}@media screen and (min-width: 1260px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-4rem;margin-right:-4rem}}@media screen and (min-width: 1600px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / -2);margin-right:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / -2)}}.sc-stzh-container-h .sc-stzh-container-s stzh-banner,.sc-stzh-container-h .sc-stzh-container-s stzh-ghettobox,.sc-stzh-container-h .sc-stzh-container-s stzh-pagetitle,.sc-stzh-container-h .sc-stzh-container-s stzh-pagetitle-home,.sc-stzh-container-h .sc-stzh-container-s stzh-container,.sc-stzh-container-h .sc-stzh-container-s stzh-homepage-service-highlights{position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width))}.stzh-container.sc-stzh-container{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-container.sc-stzh-container{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-container.sc-stzh-container{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-container.sc-stzh-container{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-container.sc-stzh-container{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-container--has-no-margin.sc-stzh-container{margin-left:auto;margin-right:auto}";
 
 const StzhContainer = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"stzh-container.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,mhGAAmhG;;MCe/hG,aAAa;;;oBAKI,KAAK;;EAEjC,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,gBAAgB,EAAE,IAAI;MACtB,+BAA+B,EAAE,IAAI,CAAC,QAAQ;;KAE/C,CAAC;IAEF,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,OAAO,IACjBA,qBAAa,CACT,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/stzh-container/stzh-container.scss?tag=stzh-container&encapsulation=scoped","src/components/stzh-container/stzh-container.tsx"],"sourcesContent":[":host {\n  ::slotted(*) {\n    stzh-header {\n      margin-left: -$containerMargin;\n      margin-right: -$containerMargin;\n\n      @include mq($from: small) {\n        margin-left: -$containerMarginSmall;\n        margin-right: -$containerMarginSmall;\n      }\n\n      @include mq($from: medium) {\n        margin-left: -$containerMarginMedium;\n        margin-right: -$containerMarginMedium;\n      }\n\n      @include mq($from: large) {\n        margin-left: -$containerMarginLarge;\n        margin-right: -$containerMarginLarge;\n      }\n\n      @include mq($from: ultra) {\n        margin-left: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / -2);\n        margin-right: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / -2);\n      }\n    }\n\n    stzh-banner,\n    stzh-ghettobox,\n    stzh-pagetitle,\n    stzh-container {\n      position: relative;\n      left: 50%;\n      right: 50%;\n      margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n      margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n      width: calc(100vw - var(--stzh-scrollbar-width));\n      max-width: calc(100vw - var(--stzh-scrollbar-width));\n    }\n\n    // stzh-section[variant=\"highlight\"] {\n    //   --padding-left: #{$containerMargin};\n    //   --padding-right: #{$containerMargin};\n\n    //   @include mq($from: small) {\n    //     --padding-left: #{$containerMarginSmall};\n    //     --padding-right: #{$containerMarginSmall};\n    //   }\n\n    //   @include mq($from: medium) {\n    //     --padding-left: #{$containerMarginMedium};\n    //     --padding-right: #{$containerMarginMedium};\n    //   }\n\n    //   @include mq($from: large) {\n    //     --padding-left: #{space('xlarge')};\n    //     --padding-right: #{space('xlarge')};\n    //   }\n\n    //   @include mq($to: large) {\n    //     position: relative;\n    //     left: 50%;\n    //     right: 50%;\n    //     margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n    //     margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n    //     width: calc(100vw - var(--stzh-scrollbar-width));\n    //     max-width: calc(100vw - var(--stzh-scrollbar-width));\n    //   }\n    // }\n\n    // stzh-row stzh-section[variant=\"highlight\"] {\n    //   @include spaceCurve('--padding-left', 'small');\n    //   @include spaceCurve('--padding-right', 'small');\n\n    //   @include mq($to: large) {\n    //     left: initial;\n    //     right: initial;\n    //     margin-left: initial;\n    //     margin-right: initial;\n    //     width: initial;\n    //     max-width: initial;\n    //   }\n    // }\n  }\n}\n\n.stzh-container {\n  @include container;\n\n  // &--size-big {\n  //   @include container($size: \"big\");\n  // }\n\n  &--has-no-margin {\n    margin-left: auto;\n    margin-right: auto;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-container\",\n  styleUrl: \"stzh-container.scss\",\n  scoped: true\n})\nexport class StzhContainer {\n  /** Size variant */\n  // @Prop() size: \"default\" | \"big\" = \"default\";\n\n  /** Whether to prevent side margins */\n  @Prop() noMargin: boolean = false;\n\n  render() {\n    const classes = {\n      \"stzh-container\": true,\n      \"stzh-container--has-no-margin\": this.noMargin,\n      // [`stzh-container--size-${this.size}`]: !!this.size,\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-container.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,4pGAA4pG;;MCexqG,aAAa;;;oBAKI,KAAK;;EAEjC,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,gBAAgB,EAAE,IAAI;MACtB,+BAA+B,EAAE,IAAI,CAAC,QAAQ;;KAE/C,CAAC;IAEF,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,OAAO,IACjBA,qBAAa,CACT,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/stzh-container/stzh-container.scss?tag=stzh-container&encapsulation=scoped","src/components/stzh-container/stzh-container.tsx"],"sourcesContent":[":host {\n  ::slotted(*) {\n    stzh-header {\n      margin-left: -$containerMargin;\n      margin-right: -$containerMargin;\n\n      @include mq($from: small) {\n        margin-left: -$containerMarginSmall;\n        margin-right: -$containerMarginSmall;\n      }\n\n      @include mq($from: medium) {\n        margin-left: -$containerMarginMedium;\n        margin-right: -$containerMarginMedium;\n      }\n\n      @include mq($from: large) {\n        margin-left: -$containerMarginLarge;\n        margin-right: -$containerMarginLarge;\n      }\n\n      @include mq($from: ultra) {\n        margin-left: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / -2);\n        margin-right: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / -2);\n      }\n    }\n\n    stzh-banner,\n    stzh-ghettobox,\n    stzh-pagetitle,\n    stzh-pagetitle-home,\n    stzh-container,\n    stzh-homepage-service-highlights {\n      position: relative;\n      left: 50%;\n      right: 50%;\n      margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n      margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n      width: calc(100vw - var(--stzh-scrollbar-width));\n      max-width: calc(100vw - var(--stzh-scrollbar-width));\n    }\n\n    // stzh-section[variant=\"highlight\"] {\n    //   --padding-left: #{$containerMargin};\n    //   --padding-right: #{$containerMargin};\n\n    //   @include mq($from: small) {\n    //     --padding-left: #{$containerMarginSmall};\n    //     --padding-right: #{$containerMarginSmall};\n    //   }\n\n    //   @include mq($from: medium) {\n    //     --padding-left: #{$containerMarginMedium};\n    //     --padding-right: #{$containerMarginMedium};\n    //   }\n\n    //   @include mq($from: large) {\n    //     --padding-left: #{space('xlarge')};\n    //     --padding-right: #{space('xlarge')};\n    //   }\n\n    //   @include mq($to: large) {\n    //     position: relative;\n    //     left: 50%;\n    //     right: 50%;\n    //     margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n    //     margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n    //     width: calc(100vw - var(--stzh-scrollbar-width));\n    //     max-width: calc(100vw - var(--stzh-scrollbar-width));\n    //   }\n    // }\n\n    // stzh-row stzh-section[variant=\"highlight\"] {\n    //   @include spaceCurve('--padding-left', 'small');\n    //   @include spaceCurve('--padding-right', 'small');\n\n    //   @include mq($to: large) {\n    //     left: initial;\n    //     right: initial;\n    //     margin-left: initial;\n    //     margin-right: initial;\n    //     width: initial;\n    //     max-width: initial;\n    //   }\n    // }\n  }\n}\n\n.stzh-container {\n  @include container;\n\n  // &--size-big {\n  //   @include container($size: \"big\");\n  // }\n\n  &--has-no-margin {\n    margin-left: auto;\n    margin-right: auto;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-container\",\n  styleUrl: \"stzh-container.scss\",\n  scoped: true\n})\nexport class StzhContainer {\n  /** Size variant */\n  // @Prop() size: \"default\" | \"big\" = \"default\";\n\n  /** Whether to prevent side margins */\n  @Prop() noMargin: boolean = false;\n\n  render() {\n    const classes = {\n      \"stzh-container\": true,\n      \"stzh-container--has-no-margin\": this.noMargin,\n      // [`stzh-container--size-${this.size}`]: !!this.size,\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/cjs/stzh-content.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-92254d32.js');
 
-const stzhContentCss = ".sc-stzh-content-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-content-h{display:none}.sc-stzh-content-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h *.sc-stzh-content,.sc-stzh-content-h *.sc-stzh-content::before,.sc-stzh-content-h *.sc-stzh-content::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-content-h .has-focus.sc-stzh-content{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content{outline-style:none !important}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content::-moz-focus-inner{border:0 !important}.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"content content content content\")}@media screen and (min-width: 900px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"content content content content content content content content\")}}@media screen and (min-width: 1260px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content aside-right aside-right\")}}@media screen and (min-width: 1260px){[variant=shifted].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content content aside-right\"))}}@media screen and (min-width: 1260px){[variant=full].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, \"content content content content content content content content content content content content\"))}}.sc-stzh-content-h .sc-stzh-content-s>*{grid-area:content}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-cta-small-grid-template-areas:\"cta cta cta .\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-cta-grid-template-areas:\"cta cta cta cta cta . . .\";--stzh-cta-small-grid-template-areas:\"cta cta cta cta . . . .\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-text-display:grid;--stzh-text-grid-template-areas:\"text text text .\";--stzh-richtext-display:grid;--stzh-richtext-grid-template-areas:\"text text text .\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-text-grid-template-areas:\"text text text text text text . .\";--stzh-richtext-grid-template-areas:\"text text text text text text . .\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:\"list list list .\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 3 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:\"list list list list list . . .\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 5 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 5 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 5 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-eventdata{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-small-grid-template-areas:\"cta cta cta cta\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-grid-template-areas:\"cta cta cta cta cta cta cta cta\";--stzh-cta-small-grid-template-areas:\"cta cta cta cta cta cta cta cta\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:\"list list list list\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 4 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:\"list list list list list list list list\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 8 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 8 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 8 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}.stzh-content.sc-stzh-content{--stzh-content-grid-template-areas:\"content content content content content content content content content content content content\";--stzh-content-shifted-grid-template-areas:\"content content content content content content content content content content content content\";--stzh-content-full-grid-template-areas:\"content content content content content content content content content content content content\";-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas)}@media screen and (min-width: 600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(12, minmax(0, 1fr))}}";
+const stzhContentCss = ".sc-stzh-content-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-content-h{display:none}.sc-stzh-content-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h *.sc-stzh-content,.sc-stzh-content-h *.sc-stzh-content::before,.sc-stzh-content-h *.sc-stzh-content::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-content-h .has-focus.sc-stzh-content{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content{outline-style:none !important}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content::-moz-focus-inner{border:0 !important}.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"content content content content\")}@media screen and (min-width: 900px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"content content content content content content content content\")}}@media screen and (min-width: 1260px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content aside-right aside-right\")}}@media screen and (min-width: 1260px){[variant=shifted].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content content aside-right\"))}}@media screen and (min-width: 1260px){[variant=full].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, \"content content content content content content content content content content content content\"))}}.sc-stzh-content-h .sc-stzh-content-s>*{grid-area:content}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-cta-small-grid-template-areas:\"cta cta cta .\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-cta-grid-template-areas:\"cta cta cta cta cta . . .\";--stzh-cta-small-grid-template-areas:\"cta cta cta cta . . . .\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-text-display:grid;--stzh-text-grid-template-areas:\"text text text .\";--stzh-richtext-display:grid;--stzh-richtext-grid-template-areas:\"text text text .\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-text-grid-template-areas:\"text text text text text text . .\";--stzh-richtext-grid-template-areas:\"text text text text text text . .\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:\"list list list .\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 3 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:\"list list list list list . . .\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 5 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 5 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 5 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-eventdata{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-small-grid-template-areas:\"cta cta cta cta\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-grid-template-areas:\"cta cta cta cta cta cta cta cta\";--stzh-cta-small-grid-template-areas:\"cta cta cta cta cta cta cta cta\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:\"list list list list\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 4 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:\"list list list list list list list list\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 8 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 8 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 8 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}.stzh-content.sc-stzh-content{--stzh-content-grid-template-areas:\"content content content content content content content content content content content content\";--stzh-content-shifted-grid-template-areas:\"content content content content content content content content content content content content\";--stzh-content-full-grid-template-areas:\"content content content content content content content content content content content content\";-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas)}@media screen and (min-width: 600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(12, minmax(0, 1fr))}}";
 
 const StzhContent = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"stzh-content.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,27nBAA27nB;;MCgBr8nB,WAAW;;;mBAE6C,SAAS;gCAG5B,KAAK;;EAIrD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;KAClD,CAAC;IAEF,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,OAAO,IACjBA,qBAAa,CACT,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/stzh-content/stzh-content.scss?tag=stzh-content&encapsulation=scoped","src/components/stzh-content/stzh-content.tsx"],"sourcesContent":[":host {\n  --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content\");\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content content content content content\");\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas: var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content aside-right aside-right\");\n  }\n\n  &[variant=\"shifted\"] {\n    @include mq($from: large) {\n      --grid-template-areas: var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content content aside-right\"));\n    }\n  }\n\n  &[variant=\"full\"] {\n    @include mq($from: large) {\n      --grid-template-areas: var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, \"content content content content content content content content content content content content\"));\n    }\n  }\n\n  ::slotted(*) {\n    grid-area: content;\n  }\n\n  &:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) ::slotted(*) {\n    /* CTA Layout */\n\n    @include mq($from: small) {\n      --stzh-cta-small-grid-template-areas: \"cta cta cta .\";\n    }\n\n    @include mq($from: medium) {\n      --stzh-cta-grid-template-areas: \"cta cta cta cta cta . . .\";\n      --stzh-cta-small-grid-template-areas: \"cta cta cta cta . . . .\";\n    }\n\n    /* Text / Richtext Layout */\n\n    @include mq($from: small) {\n      --stzh-text-display: grid;\n      --stzh-text-grid-template-areas: \"text text text .\";\n\n      --stzh-richtext-display: grid;\n      --stzh-richtext-grid-template-areas: \"text text text .\";\n    }\n\n    @include mq($from: medium) {\n      --stzh-text-grid-template-areas: \"text text text text text text . .\";\n      --stzh-richtext-grid-template-areas: \"text text text text text text . .\";\n    }\n\n    /* Datalist Layout */\n\n    @include mq($from: small) {\n      --stzh-datalist-grid-template-areas: \"list list list .\";\n      // breakout with details element inside datalist-item\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 * #{$gridGutterSmall}) / 3 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n    }\n\n    @include mq($from: medium) {\n      --stzh-datalist-grid-template-areas: \"list list list list list . . .\";\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 5 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n    }\n\n    @include mq($from: large) {\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 5 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n    }\n\n    @include mq($from: ultra) {\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 5 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n    }\n\n    /* Reset layout inside certain components */\n\n    stzh-datalist,\n    stzh-eventdata {\n      /* Text Layout */\n\n      @include mq($from: small) {\n        --stzh-text-display: block;\n        --stzh-richtext-display: block;\n      }\n    }\n\n    stzh-section[variant=\"highlight\"],\n    stzh-ghettobox,\n    stzh-message,\n    stzh-toast,\n    stzh-tooltip,\n    stzh-popover,\n    stzh-accordion,\n    stzh-timeline,\n    stzh-twocolumns,\n    stzh-textandimage,\n    stzh-datalist stzh-datalist,\n    stzh-dialog,\n    stzh-overlay {\n      /* CTA Layout */\n\n      @include mq($from: small) {\n        --stzh-cta-small-grid-template-areas: \"cta cta cta cta\";\n      }\n\n      @include mq($from: medium) {\n        --stzh-cta-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n        --stzh-cta-small-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n      }\n\n      /* Text Layout */\n\n      @include mq($from: small) {\n        --stzh-text-display: block;\n        --stzh-richtext-display: block;\n      }\n\n      /* Datalist Layout */\n\n      @include mq($from: small) {\n        --stzh-datalist-grid-template-areas: \"list list list list\";\n        // breakout with details element inside datalist-item\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 * #{$gridGutterSmall}) / 4 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n      }\n\n      @include mq($from: medium) {\n        --stzh-datalist-grid-template-areas: \"list list list list list list list list\";\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 8 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n      }\n\n      @include mq($from: large) {\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 8 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n      }\n\n      @include mq($from: ultra) {\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 8 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n      }\n    }\n  }\n}\n\n.stzh-content {\n  // set nested content elements to be fullwidth\n  --stzh-content-grid-template-areas: \"content content content content content content content content content content content content\";\n  --stzh-content-shifted-grid-template-areas: \"content content content content content content content content content content content content\";\n  --stzh-content-full-grid-template-areas: \"content content content content content content content content content content content content\";\n\n  @include grid;\n  grid-template-areas: var(--grid-template-areas);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-content\",\n  styleUrl: \"stzh-content.scss\",\n  scoped: true\n})\nexport class StzhContent {\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"shifted\" | \"full\" = \"default\";\n\n  /** Prevent changing layout of elements within this content element */\n  @Prop({ reflect: true }) preventElementLayout = false;\n\n  @Element() element: HTMLStzhContentElement;\n\n  render() {\n    const classes = {\n      \"stzh-content\": true,\n      [`stzh-content--${this.variant}`]: !!this.variant,\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-content.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,88pBAA88pB;;MCgBx9pB,WAAW;;;mBAE6C,SAAS;gCAG5B,KAAK;;EAIrD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;KAClD,CAAC;IAEF,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,OAAO,IACjBA,qBAAa,CACT,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/stzh-content/stzh-content.scss?tag=stzh-content&encapsulation=scoped","src/components/stzh-content/stzh-content.tsx"],"sourcesContent":[":host {\n  --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content\");\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content content content content content\");\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas: var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content aside-right aside-right\");\n  }\n\n  &[variant=\"shifted\"] {\n    @include mq($from: large) {\n      --grid-template-areas: var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content content aside-right\"));\n    }\n  }\n\n  &[variant=\"full\"] {\n    @include mq($from: large) {\n      --grid-template-areas: var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, \"content content content content content content content content content content content content\"));\n    }\n  }\n\n  ::slotted(*) {\n    grid-area: content;\n  }\n\n  &:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) ::slotted(*) {\n    /* CTA Layout */\n\n    @include mq($from: small) {\n      --stzh-cta-small-grid-template-areas: \"cta cta cta .\";\n    }\n\n    @include mq($from: medium) {\n      --stzh-cta-grid-template-areas: \"cta cta cta cta cta . . .\";\n      --stzh-cta-small-grid-template-areas: \"cta cta cta cta . . . .\";\n    }\n\n    /* Text / Richtext Layout */\n\n    @include mq($from: small) {\n      --stzh-text-display: grid;\n      --stzh-text-grid-template-areas: \"text text text .\";\n\n      --stzh-richtext-display: grid;\n      --stzh-richtext-grid-template-areas: \"text text text .\";\n    }\n\n    @include mq($from: medium) {\n      --stzh-text-grid-template-areas: \"text text text text text text . .\";\n      --stzh-richtext-grid-template-areas: \"text text text text text text . .\";\n    }\n\n    /* Datalist Layout */\n\n    @include mq($from: small) {\n      --stzh-datalist-grid-template-areas: \"list list list .\";\n      // breakout with details element inside datalist-item\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 * #{$gridGutterSmall}) / 3 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n    }\n\n    @include mq($from: medium) {\n      --stzh-datalist-grid-template-areas: \"list list list list list . . .\";\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 5 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n    }\n\n    @include mq($from: large) {\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 5 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n    }\n\n    @include mq($from: ultra) {\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 5 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n    }\n\n    /* Reset layout inside certain components */\n\n    stzh-datalist,\n    stzh-eventdata {\n      /* Text Layout */\n\n      @include mq($from: small) {\n        --stzh-text-display: block;\n        --stzh-richtext-display: block;\n      }\n    }\n\n    stzh-section[variant=\"highlight\"],\n    stzh-section[variant=\"contextbox\"],\n    stzh-ghettobox,\n    stzh-message,\n    stzh-toast,\n    stzh-tooltip,\n    stzh-popover,\n    stzh-accordion,\n    stzh-timeline,\n    stzh-twocolumns,\n    stzh-textandimage,\n    stzh-datalist stzh-datalist,\n    stzh-dialog,\n    stzh-overlay {\n      /* CTA Layout */\n\n      @include mq($from: small) {\n        --stzh-cta-small-grid-template-areas: \"cta cta cta cta\";\n      }\n\n      @include mq($from: medium) {\n        --stzh-cta-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n        --stzh-cta-small-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n      }\n\n      /* Text Layout */\n\n      @include mq($from: small) {\n        --stzh-text-display: block;\n        --stzh-richtext-display: block;\n      }\n\n      /* Datalist Layout */\n\n      @include mq($from: small) {\n        --stzh-datalist-grid-template-areas: \"list list list list\";\n        // breakout with details element inside datalist-item\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 * #{$gridGutterSmall}) / 4 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n      }\n\n      @include mq($from: medium) {\n        --stzh-datalist-grid-template-areas: \"list list list list list list list list\";\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 8 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n      }\n\n      @include mq($from: large) {\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 8 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n      }\n\n      @include mq($from: ultra) {\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 8 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n      }\n    }\n  }\n}\n\n.stzh-content {\n  // set nested content elements to be fullwidth\n  --stzh-content-grid-template-areas: \"content content content content content content content content content content content content\";\n  --stzh-content-shifted-grid-template-areas: \"content content content content content content content content content content content content\";\n  --stzh-content-full-grid-template-areas: \"content content content content content content content content content content content content\";\n\n  @include grid;\n  grid-template-areas: var(--grid-template-areas);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-content\",\n  styleUrl: \"stzh-content.scss\",\n  scoped: true\n})\nexport class StzhContent {\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"shifted\" | \"full\" = \"default\";\n\n  /** Prevent changing layout of elements within this content element */\n  @Prop({ reflect: true }) preventElementLayout = false;\n\n  @Element() element: HTMLStzhContentElement;\n\n  render() {\n    const classes = {\n      \"stzh-content\": true,\n      [`stzh-content--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}