@oiz/stzh-components 4.12.0 → 4.12.1

package/dist/components/{p-6eURMZzo.js.map → p-DF6aCFVH.js.map}

@@ -1 +1 @@
-{"file":"p-6eURMZzo.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC;;MCnaW,sBAAsB,iBAAAA,kBAAA,CAAA,MAAA,sBAAA,SAAAC,CAAA,CAAA;AALnC,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAoBU,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;;AAGrB,QAAA,IAAO,CAAA,OAAA,GAAW,EAAE;;AAMpB,QAAA,IAAY,CAAA,YAAA,GAA0B,GAAG;;AAGzC,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;;AAGjB,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;;AAGjB,QAAA,IAAW,CAAA,WAAA,GAAkC,GAAG;AAahD,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,aAAyB,KAAI;AACtD,Y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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.scss?tag=stzh-pi-teaser-layout-item&encapsulation=scoped","src/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.tsx"],"sourcesContent":["/**\n   * @prop --stzh-pi-teaser-layout-item-image-background-color: Background color if no image is present\n */\n\n:host {\n  --image-background-color: var(\n    --stzh-pi-teaser-layout-item-image-background-color,\n    #{$colorCoolgrey10}\n  );\n  display: flex;\n  inline-size: 100%;\n  block-size: 100%;\n  container-type: size;\n\n  //Grid depending on image Position\n  &[image-position=\"top\"] {\n    --grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);\n\n    @include mq($to: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-layout-item-grid-template-areas,\n        \"image image image image \" \"text text text text \"\n      );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-layout-item-grid-template-areas,\n        \"image image image image image image image image\"\n          \"text text text text text text text text\"\n      );\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-layout-item-grid-template-areas,\n        \"image image image image image image image image image image image image\"\n          \"text text text text text text text text text text text text\"\n      );\n    }\n  }\n\n  &[image-position=\"right\"] {\n    --grid-template-no-rows: 1fr;\n\n    @include mq($to: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-layout-item-grid-template-areas,\n        \"text text image image\"\n      );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-layout-item-grid-template-areas,\n        \"text text text text text image image image\"\n      );\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-layout-item-grid-template-areas,\n        \"text text text text text text image image image image image image\"\n      );\n    }\n  }\n\n  //Grid when no image\n  &:not([has-image]) {\n    --grid-template-no-rows: 1fr;\n\n    @include mq($to: medium) {\n      --grid-template-areas-no-image: \"text text text text\";\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas-no-image: \"text text text text text text text text\";\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas-no-image: \"text text text text text text text text text text text text\";\n    }\n  }\n\n  //grid when no lead\n  &:not([has-lead]) {\n    .stzh-pi-teaser-layout-item__lead {\n      display: none;\n    }\n  }\n\n  //Font sizes for all the teaser sizes\n  &[content-size=\"XL\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"mega\");\n  }\n\n  &[content-size=\"L\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"hecto\");\n  }\n\n  &[content-size=\"M\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"deca\");\n  }\n\n  &[content-size=\"S\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"deci\");\n  }\n\n  &[content-size=\"XS\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"centi\");\n  }\n\n  &[content-size=\"S\"]:not([has-image]) .stzh-pi-teaser-layout-item__title {\n    -webkit-line-clamp: 2;\n  }\n\n  @container (max-height: 235px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        --lead-lines: 1;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        --lead-lines: 1;\n      }\n    }\n  }\n\n  @container (min-height: 236px) and (max-height:349px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 47cqh 53cqh;\n\n      &__lead {\n        --lead-lines: 2;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        --lead-lines: 2;\n      }\n    }\n  }\n\n  @container (min-height: 350px) and (max-height:549px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        --lead-lines: 3;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 550px) and (max-height: 639px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 50cqh 50cqh;\n\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 640px) and (max-height: 799px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 800px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n  }\n}\n\n.stzh-pi-teaser-layout-item {\n  @include grid;\n  display: grid;\n  height: 100%;\n  width: 100%;\n\n  grid-template-rows: var(--grid-template-no-rows, var(--grid-template-rows));\n  grid-template-areas: var(\n    --grid-template-areas-no-image,\n    var(--grid-template-areas)\n  );\n  background-color: var(--stzh-color-grey10);\n\n  &__text {\n    display: grid;\n    grid-template-rows: auto auto minmax(0, 1fr) auto; // dateline, title, lead & date\n    height: 100%;\n    min-height: 0;\n    align-content: start;\n  }\n\n  &__wrapper {\n    grid-area: text;\n    overflow: hidden;\n    padding: space(\"medium\");\n    height: 100%;\n    min-height: 0;\n  }\n\n  &__image {\n    overflow: hidden;\n    grid-area: image;\n\n    & > img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n\n  &__dateline {\n    @include font(\"title\");\n    @include fontSize(\"milli\");\n    color: var(--stzh-color-coolgrey70);\n    margin: 0;\n    align-self: start;\n  }\n\n  &__title-wrapper {\n    @include spaceCurve(\"padding-top\", \"small\");\n    @include spaceCurve(\"padding-bottom\", \"tiny\");\n  }\n\n  &__title {\n    @include font(\"title\");\n    @include wordWrap;\n    color: var(--stzh-color-black);\n    margin: 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    /* Limit the text to 3 lines */\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    /* Adds \"...\" at the end if truncated */\n    //line-height: 1.0 !important;\n    align-self: start;\n  }\n\n  &__title-link {\n    display: block;\n    font-family: inherit;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    color: var(--stzh-color-black);\n    text-decoration-line: none;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    // &::after {\n    //   content: \"\";\n    //   display: block;\n    //   position: absolute;\n    //   top: 0;\n    //   left: 0;\n    //   width: 100%;\n    //   height: 100%;\n    // }\n\n    // &::after {\n    //   z-index: 1;\n    // }\n  }\n\n  &__lead-wrapper {\n    @include spaceCurve(\"padding-bottom\", \"small\");\n  }\n\n  &__lead {\n    @include mq($to: medium) {\n      @include fontSize(\"milli\");\n    }\n\n    @include mq($from: medium) {\n      @include fontSize(\"centi\");\n    }\n\n    margin-top: 0;\n\n    color: var(--stzh-color-coolgrey70);\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: var(--lead-lines, 3);\n    line-clamp: var(--lead-lines, 3);\n    overflow: hidden;\n    /* don’t use text-overflow with multi-line clamp */\n    align-self: start;\n  }\n\n  &__date {\n    @include fontSize(\"micro\");\n    color: var(--stzh-color-coolgrey70);\n    margin: 0;\n    align-self: end;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiTeaserLayoutItemClickEvent } from \"../../../index\";\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n * @slot image - Image (rendered within ratio 2:1, hence the different slot name to prevent naming collision)\n */\n@Component({\n  tag: \"stzh-pi-teaser-layout-item\",\n  styleUrl: \"stzh-pi-teaser-layout-item.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaserLayoutItem {\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Dateline */\n  @Prop() dateline: string = \"\";\n\n  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = \"\";\n\n  /** Image source link */\n  @Prop() imageSrc: string | null;\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Lead text (alternative for lead slot) */\n  @Prop() lead: string = \"\";\n\n  /** Date */\n  @Prop() date: string = \"\";\n\n  /**Which size of teaser it is */\n  @Prop() contentSize: \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\" = \"M\";\n\n  /**Whether image is on top or on the right*/\n  @Prop() imagePosition: \"top\" | \"right\" | null;\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhPiTeaserLayoutItemClickEvent>;\n\n  private titleLinkElement: HTMLAnchorElement | HTMLButtonElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-pi-teaser-layout-item\",\n      originalEvent,\n      href: this.href,\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  renderHeading(): DocumentFragment {\n    const Heading = `h${this.headingLevel}`;\n    const TitleLink = this.href ? \"a\" : \"button\";\n    return (\n      <div class=\"stzh-pi-teaser-layout-item__title-wrapper\">\n        <Heading class=\"stzh-pi-teaser-layout-item__title\">\n          <TitleLink\n            ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n            class=\"stzh-pi-teaser-layout-item__title-link\"\n            href={this.href}\n            target={this.target}\n            onClick={this.handleCardClick}\n          >\n            <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>{this.heading}</div>\n          </TitleLink>\n        </Heading>\n      </div>\n    );\n  }\n\n  render() {\n    const hasLead = !!this.lead;\n    console.log(\"imageSrc: \", this.imageSrc, \" & imagePosition: \", this.imagePosition);\n    const hasImage = !!this.imageSrc && !!this.imagePosition;\n    console.log(\"hasImage: \", hasImage);\n    const displayLead = this.lead;\n    // ? this.truncateLead(this.lead, this.contentSize == \"XL\" || this.contentSize == \"L\" ? 260 : 160)\n    // : \"\";\n\n    const classes = {\n      \"stzh-pi-teaser-layout-item\": true,\n      \"stzh-pi-teaser-layout-item--has-lead\": hasLead,\n      \"stzh-pi-teaser-layout-item--has-image\": hasImage,\n    };\n\n    return (\n      <Host has-lead={hasLead} has-image={hasImage} image-position={this.imagePosition} content-size={this.contentSize}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          {hasImage && (\n            <div class=\"stzh-pi-teaser-layout-item__image\">\n              <img src={this.imageSrc} alt=\"Example image\" />\n            </div>\n          )}\n\n          <div class=\"stzh-pi-teaser-layout-item__wrapper\">\n            <div class={\"stzh-pi-teaser-layout-item__text\"}>\n              {this.dateline && <p class=\"stzh-pi-teaser-layout-item__dateline\">{this.dateline}</p>}\n              {this.renderHeading()}\n              <div class=\"stzh-pi-teaser-layout-item__lead-wrapper\">\n                <div class=\"stzh-pi-teaser-layout-item__lead\">{displayLead}</div>\n              </div>\n              {this.date && <div class=\"stzh-pi-teaser-layout-item__date\">{this.date}</div>}\n            </div>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DF6aCFVH.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC;;MCnaW,sBAAsB,iBAAAA,kBAAA,CAAA,MAAA,sBAAA,SAAAC,CAAA,CAAA;AALnC,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAoBU,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;;AAGrB,QAAA,IAAO,CAAA,OAAA,GAAW,EAAE;;AAMpB,QAAA,IAAY,CAAA,YAAA,GAA0B,GAAG;;AAGzC,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;;AAGjB,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;;AAGjB,QAAA,IAAW,CAAA,WAAA,GAAkC,GAAG;AAahD,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,aAAyB,KAAI;AACtD,Y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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.scss?tag=stzh-pi-teaser-layout-item&encapsulation=scoped","src/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.tsx"],"sourcesContent":["/**\n   * @prop --stzh-pi-teaser-layout-item-image-background-color: Background color if no image is present\n */\n\n:host {\n  --image-background-color: var(\n    --stzh-pi-teaser-layout-item-image-background-color,\n    #{$colorCoolgrey10}\n  );\n  display: flex;\n  inline-size: 100%;\n  block-size: 100%;\n  container-type: size;\n\n  //Grid depending on image Position\n  &[image-position=\"top\"] {\n    --grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);\n\n    @include mq($to: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-layout-item-grid-template-areas,\n        \"image image image image \" \"text text text text \"\n      );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-layout-item-grid-template-areas,\n        \"image image image image image image image image\"\n          \"text text text text text text text text\"\n      );\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-layout-item-grid-template-areas,\n        \"image image image image image image image image image image image image\"\n          \"text text text text text text text text text text text text\"\n      );\n    }\n  }\n\n  &[image-position=\"right\"] {\n    --grid-template-no-rows: 1fr;\n\n    @include mq($to: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-layout-item-grid-template-areas,\n        \"text text image image\"\n      );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-layout-item-grid-template-areas,\n        \"text text text text text image image image\"\n      );\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-layout-item-grid-template-areas,\n        \"text text text text text text image image image image image image\"\n      );\n    }\n  }\n\n  //Grid when no image\n  &:not([has-image]) {\n    --grid-template-no-rows: 1fr;\n\n    @include mq($to: medium) {\n      --grid-template-areas-no-image: \"text text text text\";\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas-no-image: \"text text text text text text text text\";\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas-no-image: \"text text text text text text text text text text text text\";\n    }\n  }\n\n  //grid when no lead\n  &:not([has-lead]) {\n    .stzh-pi-teaser-layout-item__lead {\n      display: none;\n    }\n  }\n\n  //Font sizes for all the teaser sizes\n  &[content-size=\"XL\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"mega\");\n  }\n\n  &[content-size=\"L\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"hecto\");\n  }\n\n  &[content-size=\"M\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"deca\");\n  }\n\n  &[content-size=\"S\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"deci\");\n  }\n\n  &[content-size=\"XS\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"centi\");\n  }\n\n  &[content-size=\"S\"]:not([has-image]) .stzh-pi-teaser-layout-item__title {\n    -webkit-line-clamp: 2;\n  }\n\n  @container (max-height: 235px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        --lead-lines: 1;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        --lead-lines: 1;\n      }\n    }\n  }\n\n  @container (min-height: 236px) and (max-height:349px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 47cqh 53cqh;\n\n      &__lead {\n        --lead-lines: 2;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        --lead-lines: 2;\n      }\n    }\n  }\n\n  @container (min-height: 350px) and (max-height:549px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        --lead-lines: 3;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 550px) and (max-height: 639px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 50cqh 50cqh;\n\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 640px) and (max-height: 799px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 800px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n  }\n}\n\n.stzh-pi-teaser-layout-item {\n  @include grid;\n  display: grid;\n  height: 100%;\n  width: 100%;\n\n  grid-template-rows: var(--grid-template-no-rows, var(--grid-template-rows));\n  grid-template-areas: var(\n    --grid-template-areas-no-image,\n    var(--grid-template-areas)\n  );\n  background-color: var(--stzh-color-grey10);\n\n  &__text {\n    display: grid;\n    grid-template-rows: auto auto minmax(0, 1fr) auto; // dateline, title, lead & date\n    height: 100%;\n    min-height: 0;\n    align-content: start;\n  }\n\n  &__wrapper {\n    grid-area: text;\n    overflow: hidden;\n    padding: space(\"medium\");\n    height: 100%;\n    min-height: 0;\n  }\n\n  &__image {\n    overflow: hidden;\n    grid-area: image;\n\n    & > img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n\n  &__dateline {\n    @include font(\"title\");\n    @include fontSize(\"milli\");\n    color: var(--stzh-color-coolgrey70);\n    margin: 0;\n    align-self: start;\n  }\n\n  &__title-wrapper {\n    @include spaceCurve(\"padding-top\", \"small\");\n    @include spaceCurve(\"padding-bottom\", \"tiny\");\n  }\n\n  &__title {\n    @include font(\"title\");\n    @include wordWrap;\n    color: var(--stzh-color-black);\n    margin: 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    /* Limit the text to 3 lines */\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    /* Adds \"...\" at the end if truncated */\n    //line-height: 1.0 !important;\n    align-self: start;\n  }\n\n  &__title-link {\n    display: block;\n    font-family: inherit;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    color: var(--stzh-color-black);\n    text-decoration-line: none;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    // &::after {\n    //   content: \"\";\n    //   display: block;\n    //   position: absolute;\n    //   top: 0;\n    //   left: 0;\n    //   width: 100%;\n    //   height: 100%;\n    // }\n\n    // &::after {\n    //   z-index: 1;\n    // }\n  }\n\n  &__lead-wrapper {\n    @include spaceCurve(\"padding-bottom\", \"small\");\n  }\n\n  &__lead {\n    @include mq($to: medium) {\n      @include fontSize(\"milli\");\n    }\n\n    @include mq($from: medium) {\n      @include fontSize(\"centi\");\n    }\n\n    margin-top: 0;\n\n    color: var(--stzh-color-coolgrey70);\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: var(--lead-lines, 3);\n    line-clamp: var(--lead-lines, 3);\n    overflow: hidden;\n    /* don’t use text-overflow with multi-line clamp */\n    align-self: start;\n  }\n\n  &__date {\n    @include fontSize(\"micro\");\n    color: var(--stzh-color-coolgrey70);\n    margin: 0;\n    align-self: end;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiTeaserLayoutItemClickEvent } from \"../../../index\";\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n * @slot image - Image (rendered within ratio 2:1, hence the different slot name to prevent naming collision)\n */\n@Component({\n  tag: \"stzh-pi-teaser-layout-item\",\n  styleUrl: \"stzh-pi-teaser-layout-item.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaserLayoutItem {\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Dateline */\n  @Prop() dateline: string = \"\";\n\n  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = \"\";\n\n  /** Image source link */\n  @Prop() imageSrc: string | null;\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Lead text (alternative for lead slot) */\n  @Prop() lead: string = \"\";\n\n  /** Date */\n  @Prop() date: string = \"\";\n\n  /**Which size of teaser it is */\n  @Prop() contentSize: \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\" = \"M\";\n\n  /**Whether image is on top or on the right*/\n  @Prop() imagePosition: \"top\" | \"right\" | null;\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhPiTeaserLayoutItemClickEvent>;\n\n  private titleLinkElement: HTMLAnchorElement | HTMLButtonElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-pi-teaser-layout-item\",\n      originalEvent,\n      href: this.href,\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  renderHeading(): DocumentFragment {\n    const Heading = `h${this.headingLevel}`;\n    const TitleLink = this.href ? \"a\" : \"button\";\n    return (\n      <div class=\"stzh-pi-teaser-layout-item__title-wrapper\">\n        <Heading class=\"stzh-pi-teaser-layout-item__title\">\n          <TitleLink\n            ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n            class=\"stzh-pi-teaser-layout-item__title-link\"\n            href={this.href}\n            target={this.target}\n            onClick={this.handleCardClick}\n          >\n            <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>{this.heading}</div>\n          </TitleLink>\n        </Heading>\n      </div>\n    );\n  }\n\n  render() {\n    const hasLead = !!this.lead;\n    console.log(\"imageSrc: \", this.imageSrc, \" & imagePosition: \", this.imagePosition);\n    const hasImage = !!this.imageSrc && !!this.imagePosition;\n    console.log(\"hasImage: \", hasImage);\n    const displayLead = this.lead;\n    // ? this.truncateLead(this.lead, this.contentSize == \"XL\" || this.contentSize == \"L\" ? 260 : 160)\n    // : \"\";\n\n    const classes = {\n      \"stzh-pi-teaser-layout-item\": true,\n      \"stzh-pi-teaser-layout-item--has-lead\": hasLead,\n      \"stzh-pi-teaser-layout-item--has-image\": hasImage,\n    };\n\n    return (\n      <Host has-lead={hasLead} has-image={hasImage} image-position={this.imagePosition} content-size={this.contentSize}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          {hasImage && (\n            <div class=\"stzh-pi-teaser-layout-item__image\">\n              <img src={this.imageSrc} alt=\"Example image\" />\n            </div>\n          )}\n\n          <div class=\"stzh-pi-teaser-layout-item__wrapper\">\n            <div class={\"stzh-pi-teaser-layout-item__text\"}>\n              {this.dateline && <p class=\"stzh-pi-teaser-layout-item__dateline\">{this.dateline}</p>}\n              {this.renderHeading()}\n              <div class=\"stzh-pi-teaser-layout-item__lead-wrapper\">\n                <div class=\"stzh-pi-teaser-layout-item__lead\">{displayLead}</div>\n              </div>\n              {this.date && <div class=\"stzh-pi-teaser-layout-item__date\">{this.date}</div>}\n            </div>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BeuQJv8J.js → p-DFNN4tQ9.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-X46RDuY9.js';
-import { d as defineCustomElement$1 } from './p-EnVb6m-B.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-5QD-jnDI.js';
+import { d as defineCustomElement$1 } from './p-DZ_hOgVb.js';
 
 const stzhStepperItemCss = () => `.sc-stzh-stepper-item-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-stepper-item-h,[stzh-hidden].sc-stzh-stepper-item-h{display:none}.sc-stzh-stepper-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-stepper-item-h *.sc-stzh-stepper-item,.sc-stzh-stepper-item-h *.sc-stzh-stepper-item::before,.sc-stzh-stepper-item-h *.sc-stzh-stepper-item::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-stepper-item-h .has-focus.sc-stzh-stepper-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-stepper-item-h .stzh-fylingfocus-focused.sc-stzh-stepper-item{outline-style:none !important}.sc-stzh-stepper-item-h .stzh-fylingfocus-focused.sc-stzh-stepper-item::-moz-focus-inner{border:0 !important}[hide].sc-stzh-stepper-item-h{display:none}.stzh-stepper-item.sc-stzh-stepper-item{text-align:center}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__unclickable.sc-stzh-stepper-item{appearance:none;font-family:inherit;background-color:transparent;border:none}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item{cursor:pointer}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__unclickable.sc-stzh-stepper-item{cursor:default;pointer-events:none}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{position:relative;display:inline-flex;justify-content:center;align-items:center;width:2.1875rem;height:2.1875rem;border:0.0625rem solid transparent;text-align:center;box-sizing:border-box;transition-property:color, border-color;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{width:2.625rem;height:2.625rem;margin-bottom:var(--stzh-space-large)}}@media (forced-colors: active){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{transition:none}}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{display:none;content:"";position:absolute;top:1rem;right:2.125rem;width:100vw;height:0.0625rem;z-index:-2;overflow:hidden}@media screen and (min-width: 600px){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{top:1.25rem;right:2.5625rem}}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::after,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item::after{content:"";z-index:0;position:absolute;display:block;width:100%;height:100%;top:0;left:0;transition:background-color var(--stzh-base-transition-animation-speed)}@media (forced-colors: active){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::after,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item::after{transition:none}}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{display:block;font-size:0.875rem;line-height:1.28;padding:var(--stzh-space-xxsmall) var(--stzh-space-small);letter-spacing:0.01em;transition:color var(--stzh-base-transition-animation-speed)}@media screen and (max-width: 599px){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}@media (forced-colors: active){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{transition:none}}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number.sc-stzh-stepper-item,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__icon.sc-stzh-stepper-item,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__user-icon.sc-stzh-stepper-item,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{z-index:1;position:relative;color:currentColor}@media (forced-colors: active){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number.sc-stzh-stepper-item,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__icon.sc-stzh-stepper-item,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__user-icon.sc-stzh-stepper-item,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{forced-color-adjust:preserve-parent-color}}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__icon.sc-stzh-stepper-item,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__user-icon.sc-stzh-stepper-item,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{--size:var(--stzh-icon-size-xsmall);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:currentColor}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__user-icon.sc-stzh-stepper-item{--size:var(--stzh-icon-size-small)}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item{z-index:1;appearance:none;font-family:inherit;position:absolute;top:0.1875rem;width:1.6875rem;height:1.6875rem;background-color:var(--stzh-color-grey20);border:0.0625rem solid transparent;cursor:pointer;transition-property:color, border-color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item{transition:none;color:ButtonText;border-color:ButtonBorder;background-color:ButtonFace}}.stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item:is(:hover,.sc-stzh-stepper-item:focus){border-color:var(--stzh-color-grey20);cursor:default}@media (forced-colors: active){.stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item:is(:hover,.sc-stzh-stepper-item:focus){color:HighlightText;border-color:Highlight;background-color:Highlight}}.stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item:is(:hover,.sc-stzh-stepper-item:focus)::after{background-color:var(--stzh-color-grey20)}@media (forced-colors: active){.stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item:is(:hover,.sc-stzh-stepper-item:focus)::after{background-color:Highlight}}.stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item:is(:hover,.sc-stzh-stepper-item:focus) .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{color:var(--stzh-color-primary-hover)}@media (forced-colors: active){.stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item:is(:hover,.sc-stzh-stepper-item:focus) .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{color:HighlightText}}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled.sc-stzh-stepper-item{cursor:default}@media (forced-colors: active){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled.sc-stzh-stepper-item{color:CanvasText;border-color:CanvasText;background-color:Canvas}}@media (forced-colors: active){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled.sc-stzh-stepper-item .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{color:CanvasText}}.stzh-stepper-item .stzh-stepper-item__dotted.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled.sc-stzh-stepper-item:where(:hover,.sc-stzh-stepper-item:focus){border-color:var(--stzh-base-border-color);cursor:default}@media (forced-colors: active){.stzh-stepper-item .stzh-stepper-item__dotted.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled.sc-stzh-stepper-item:where(:hover,.sc-stzh-stepper-item:focus){color:CanvasText;border-color:CanvasText;background-color:Canvas}}.stzh-stepper-item .stzh-stepper-item__dotted.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled.sc-stzh-stepper-item:where(:hover,.sc-stzh-stepper-item:focus)::after{background-color:inherit}@media (forced-colors: active){.stzh-stepper-item .stzh-stepper-item__dotted.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled.sc-stzh-stepper-item:where(:hover,.sc-stzh-stepper-item:focus)::after{background-color:Canvas}}.stzh-stepper-item .stzh-stepper-item__dotted.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled.sc-stzh-stepper-item:where(:hover,.sc-stzh-stepper-item:focus) .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{color:var(--stzh-color-primary-hover)}@media (forced-colors: active){.stzh-stepper-item .stzh-stepper-item__dotted.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled.sc-stzh-stepper-item:where(:hover,.sc-stzh-stepper-item:focus) .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{color:CanvasText}}@media screen and (min-width: 600px){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item{top:0.3125rem;width:1.9375rem;height:1.9375rem}}.stzh-stepper-item.sc-stzh-stepper-item{--base-line-color:var(--stzh-base-border-color);--base-item-text-color:var(--stzh-color-primary);--base-item-border-color:var(--stzh-color-secondary20);--base-item-background-color:var(--stzh-color-secondary20);--base-label-text-color:var(--stzh-color-grey80);--inert-item-text-color:var(--stzh-color-primary);--inert-item-border-color:var(--stzh-color-grey20);--inert-item-background-color:var(--stzh-color-grey20);--inert-label-text-color:var(--stzh-color-grey80);--hover-item-text-color:var(--base-item-text-color);--hover-item-border-color:var(--stzh-color-secondary40);--hover-item-background-color:var(--stzh-color-secondary40);--hover-label-text-color:var(--stzh-color-primary-hover)}@media (forced-colors: active){.stzh-stepper-item.sc-stzh-stepper-item{--base-line-color:CanvasText;--base-item-text-color:ButtonText;--base-item-border-color:ButtonBorder;--base-item-background-color:ButtonFace;--base-label-text-color:ButtonText;--inert-item-text-color:CanvasText;--inert-item-border-color:CanvasText;--inert-item-background-color:Canvas;--inert-label-text-color:CanvasText;--hover-item-text-color:HighlightText;--hover-item-border-color:Highlight;--hover-item-background-color:Highlight;--hover-label-text-color:Highlight}}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__unclickable.sc-stzh-stepper-item{--line-color:var(--base-line-color);--item-text-color:var(--inert-item-text-color);--item-border-color:var(--inert-item-border-color);--item-background-color:var(--inert-item-background-color);--label-text-color:var(--inert-label-text-color)}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item{--line-color:var(--base-line-color);--item-text-color:var(--base-item-text-color);--item-border-color:var(--base-item-border-color);--item-background-color:var(--base-item-background-color);--label-text-color:var(--base-label-text-color)}.stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:is(:hover,.sc-stzh-stepper-item:focus){--item-text-color:var(--hover-item-text-color);--item-border-color:var(--hover-item-border-color);--item-background-color:var(--hover-item-background-color);--label-text-color:var(--hover-label-text-color)}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{color:var(--label-text-color)}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:var(--item-text-color);border-color:var(--item-border-color);background-color:var(--item-background-color)}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{background-color:var(--line-color)}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::after{background-color:var(--item-background-color)}.stzh-stepper-item.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before,.stzh-stepper-item.stzh-stepper-item--last.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{display:block}.stzh-stepper-item.stzh-stepper-item--first.sc-stzh-stepper-item{position:relative}.stzh-stepper-item.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item{left:50%;transform:translateX(-50%)}.stzh-stepper-item.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{z-index:1}.stzh-stepper-item.stzh-stepper-item--last.sc-stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item{right:calc(100% / var(--steps) - (0.84375rem))}@media screen and (min-width: 600px){.stzh-stepper-item.stzh-stepper-item--last.sc-stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item{right:calc(100% / var(--steps) - (0.96875rem))}}.stzh-stepper-item.stzh-stepper-item--passed.sc-stzh-stepper-item{--base-line-color:var(--base-item-background-color);--base-item-text-color:var(--stzh-color-white);--base-item-border-color:var(--stzh-color-secondary60);--base-item-background-color:var(--stzh-color-secondary60);--base-label-text-color:var(--stzh-color-primary);--inert-item-text-color:var(--base-item-text-color);--inert-item-border-color:var(--base-item-border-color);--inert-item-background-color:var(--base-item-background-color);--inert-label-text-color:var(--base-item-background-color);--hover-item-text-color:var(--base-item-text-color);--hover-item-border-color:var(--stzh-color-secondary70);--hover-item-background-color:var(--stzh-color-secondary70);--hover-label-text-color:var(--stzh-color-primary-hover)}@media (forced-colors: active){.stzh-stepper-item.stzh-stepper-item--passed.sc-stzh-stepper-item{--base-item-text-color:SelectedItemText;--base-item-border-color:SelectedItem;--base-item-background-color:SelectedItem;--base-label-text-color:SelectedItem;--hover-item-text-color:HighlightText;--hover-item-border-color:Highlight;--hover-item-background-color:Highlight;--hover-label-text-color:Highlight}}.stzh-stepper-item.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-stepper-item.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__number.sc-stzh-stepper-item{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-stepper-item.stzh-stepper-item--current.sc-stzh-stepper-item{--base-line-color:var(--base-item-background-color);--base-item-text-color:var(--stzh-color-white);--base-item-border-color:var(--stzh-color-primary);--base-item-background-color:var(--stzh-color-primary);--base-label-text-color:var(--base-item-background-color);--inert-item-text-color:var(--base-item-text-color);--inert-item-border-color:var(--base-item-border-color);--inert-item-background-color:var(--base-item-background-color);--inert-label-text-color:var(--base-item-background-color);--hover-item-text-color:var(--base-item-text-color);--hover-item-border-color:var(--stzh-color-primary-hover);--hover-item-background-color:var(--stzh-color-primary-hover);--hover-label-text-color:var(--hover-item-background-color)}@media (forced-colors: active){.stzh-stepper-item.stzh-stepper-item--current.sc-stzh-stepper-item{--base-item-text-color:SelectedItemText;--base-item-border-color:SelectedItem;--base-item-background-color:SelectedItem;--base-label-text-color:SelectedItem;--hover-item-text-color:HighlightText;--hover-item-border-color:Highlight;--hover-item-background-color:Highlight;--hover-label-text-color:Highlight}}.stzh-stepper-item.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-stepper-item.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{z-index:-1;display:block}.stzh-stepper-item.stzh-stepper-item--is-disabled.sc-stzh-stepper-item{--base-item-text-color:var(--stzh-color-white);--base-item-border-color:var(--stzh-color-grey60);--base-item-background-color:var(--stzh-color-grey60);--base-label-text-color:var(--stzh-color-grey80);--inert-item-text-color:var(--base-item-text-color);--inert-item-border-color:var(--base-item-border-color);--inert-item-background-color:var(--base-item-background-color);--inert-label-text-color:var(--base-label-text-color);--hover-item-text-color:var(--base-item-text-color);--hover-item-border-color:var(--base-item-border-color);--hover-item-background-color:var(--base-item-background-color);--hover-label-text-color:var(--base-label-text-color)}@media (forced-colors: active){.stzh-stepper-item.stzh-stepper-item--is-disabled.sc-stzh-stepper-item{--base-item-text-color:GrayText;--base-item-border-color:GrayText;--base-item-background-color:Canvas;--base-label-text-color:GrayText;--hover-item-text-color:var(--base-item-text-color);--hover-item-border-color:var(--base-item-border-color);--hover-item-background-color:var(--base-item-background-color);--hover-label-text-color:var(--base-label-text-color)}}.stzh-stepper-item.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item{cursor:not-allowed}.stzh-stepper-item.stzh-stepper-item--first.sc-stzh-stepper-item{--base-line-color:var(--stzh-color-white)}@media (forced-colors: active){.stzh-stepper-item.stzh-stepper-item--first.sc-stzh-stepper-item{--base-line-color:Canvas}}.stzh-stepper-item.stzh-stepper-item--first.stzh-stepper-item--dotted.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{display:none}.stzh-stepper-item.stzh-stepper-item--first.stzh-stepper-item--dotted.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{position:relative;z-index:0;top:0.3125rem;width:1.6875rem;height:1.6875rem;margin-bottom:0;border:none;background-color:transparent}@media screen and (min-width: 600px){.stzh-stepper-item.stzh-stepper-item--first.stzh-stepper-item--dotted.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{top:0.5rem;width:1.9375rem;height:1.9375rem}}.stzh-stepper-item.stzh-stepper-item--first.stzh-stepper-item--dotted.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{top:0.75rem;right:1.625rem}@media screen and (min-width: 600px){.stzh-stepper-item.stzh-stepper-item--first.stzh-stepper-item--dotted.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{top:0.8125rem;right:1.875rem}}.stzh-stepper-item.stzh-stepper-item--first.stzh-stepper-item--dotted.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::after{display:none}.stzh-stepper-item.stzh-stepper-item--first.stzh-stepper-item--dotted.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item{padding-left:0;padding-right:0}`;
 
@@ -108,6 +108,6 @@ function defineCustomElement() {
 }
 
 export { StzhStepperItem as S, defineCustomElement as d };
-//# sourceMappingURL=p-BeuQJv8J.js.map
+//# sourceMappingURL=p-DFNN4tQ9.js.map
 
-//# sourceMappingURL=p-BeuQJv8J.js.map
+//# sourceMappingURL=p-DFNN4tQ9.js.map

package/dist/components/{p-BeuQJv8J.js.map → p-DFNN4tQ9.js.map}

@@ -1 +1 @@
-{"file":"p-BeuQJv8J.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-stepper-item/stzh-stepper-item.scss?tag=stzh-stepper-item&encapsulation=scoped","src/components/stzh-stepper-item/stzh-stepper-item.tsx"],"sourcesContent":[":host {\n}\n\n:host([hide]) {\n  display: none;\n}\n\n.stzh-stepper-item {\n  text-align: center;\n\n  .stzh-stepper-item__button,\n  .stzh-stepper-item__unclickable {\n    appearance: none;\n    font-family: inherit;\n    background-color: transparent;\n    border: none;\n  }\n\n  .stzh-stepper-item__button {\n    cursor: pointer;\n  }\n\n  .stzh-stepper-item__unclickable {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  /* what we do here is:\n  add a gray line on the last element, which strikes through all previous ones,\n  add a blue line on the current step which covers all previous elements relative to itself\n  and add a white line on the first element, which gives you the illusion that it stopped. */\n\n  .stzh-stepper-item__number-block {\n    @include font(\"heavy\");\n    @include fontCurve(\"p1\");\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    width: $stepperItemSize;\n    height: $stepperItemSize;\n    border: 1px solid transparent;\n    text-align: center;\n    box-sizing: border-box;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @include mq($from: small) {\n      width: $stepperItemSmallUp;\n      height: $stepperItemSmallUp;\n      margin-bottom: space(\"large\");\n    }\n\n    @media (forced-colors: active) {\n      transition: none;\n    }\n\n    // set a line on every element, but hide it by default\n    &::before {\n      display: none;\n      content: \"\";\n      position: absolute;\n      top: 16px;\n      right: $stepperItemSize - 1px;\n      width: 100vw;\n      height: 1px;\n      z-index: -2;\n      overflow: hidden;\n\n      @include mq($from: small) {\n        top: 20px;\n        right: $stepperItemSmallUp - 1px;\n      }\n    }\n  }\n\n  .stzh-stepper-item__number-block,\n  .stzh-stepper-item__dotted {\n    &::after {\n      content: \"\";\n      z-index: 0;\n      position: absolute;\n      display: block;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      transition: background-color $baseTransitionAnimationSpeed;\n\n      @media (forced-colors: active) {\n        transition: none;\n      }\n    }\n  }\n\n  .stzh-stepper-item__label-block {\n    display: block;\n    font-size: 14px;\n    line-height: 1.28;\n    padding: space(\"xxsmall\") space(\"small\");\n    letter-spacing: 0.01em;\n    transition: color $baseTransitionAnimationSpeed;\n\n    @include mq($to: small) {\n      @include visuallyhidden;\n    }\n\n    @media (forced-colors: active) {\n      transition: none;\n    }\n  }\n\n  .stzh-stepper-item__number,\n  .stzh-stepper-item__icon,\n  .stzh-stepper-item__user-icon,\n  .stzh-stepper-item__dotted-icon {\n    z-index: 1;\n    position: relative;\n    color: currentColor;\n\n    @media (forced-colors: active) {\n      forced-color-adjust: preserve-parent-color;\n    }\n  }\n\n  .stzh-stepper-item__icon,\n  .stzh-stepper-item__user-icon,\n  .stzh-stepper-item__dotted-icon {\n    --size: #{iconSize(\"xsmall\")};\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: currentColor;\n  }\n\n  .stzh-stepper-item__user-icon {\n    --size: #{iconSize(\"small\")};\n  }\n\n  .stzh-stepper-item__dotted {\n    z-index: 1;\n    appearance: none;\n    font-family: inherit;\n    position: absolute;\n    top: 3px;\n    width: $stepperItemDottedSize;\n    height: $stepperItemDottedSize;\n    background-color: $colorGrey20;\n    border: 1px solid transparent;\n    cursor: pointer;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @media (forced-colors: active) {\n      transition: none;\n      color: ButtonText;\n      border-color: ButtonBorder;\n      background-color: ButtonFace;\n    }\n\n    &:is(:hover, :focus) {\n      border-color: $colorGrey20;\n      cursor: default;\n\n      @media (forced-colors: active) {\n        color: HighlightText;\n        border-color: Highlight;\n        background-color: Highlight;\n      }\n\n      &::after {\n        background-color: $colorGrey20;\n\n        @media (forced-colors: active) {\n          background-color: Highlight;\n        }\n      }\n\n      .stzh-stepper-item__dotted-icon {\n        color: $colorPrimaryHover;\n\n        @media (forced-colors: active) {\n          color: HighlightText;\n        }\n      }\n    }\n\n    &.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled {\n      cursor: default;\n\n      @media (forced-colors: active) {\n        color: CanvasText;\n        border-color: CanvasText;\n        background-color: Canvas;\n      }\n\n      .stzh-stepper-item__dotted-icon {\n        @media (forced-colors: active) {\n          color: CanvasText;\n        }\n      }\n\n      &:where(:hover, :focus) {\n        border-color: var(--stzh-base-border-color);\n        cursor: default;\n\n        @media (forced-colors: active) {\n          color: CanvasText;\n          border-color: CanvasText;\n          background-color: Canvas;\n        }\n\n        &::after {\n          background-color: inherit;\n\n          @media (forced-colors: active) {\n            background-color: Canvas;\n          }\n        }\n\n        .stzh-stepper-item__dotted-icon {\n          color: $colorPrimaryHover;\n\n          @media (forced-colors: active) {\n            color: CanvasText;\n          }\n        }\n      }\n    }\n\n    @include mq($from: small) {\n      top: 5px;\n      width: $stepperItemDottedSizeSmallUp;\n      height: $stepperItemDottedSizeSmallUp;\n    }\n  }\n\n  // Variant: ~default~\n  & {\n    --base-line-color: #{$baseBorderColor};\n\n    --base-item-text-color: #{$colorPrimary};\n    --base-item-border-color: #{$colorSecondary20};\n    --base-item-background-color: #{$colorSecondary20};\n    --base-label-text-color: #{$colorGrey80};\n\n    --inert-item-text-color: #{$colorPrimary};\n    --inert-item-border-color: #{$colorGrey20};\n    --inert-item-background-color: #{$colorGrey20};\n    --inert-label-text-color: #{$colorGrey80};\n\n    --hover-item-text-color: var(--base-item-text-color);\n    --hover-item-border-color: #{$colorSecondary40};\n    --hover-item-background-color: #{$colorSecondary40};\n    --hover-label-text-color: #{$colorPrimaryHover};\n\n    @media (forced-colors: active) {\n      --base-line-color: CanvasText;\n\n      --base-item-text-color: ButtonText;\n      --base-item-border-color: ButtonBorder;\n      --base-item-background-color: ButtonFace;\n      --base-label-text-color: ButtonText;\n\n      --inert-item-text-color: CanvasText;\n      --inert-item-border-color: CanvasText;\n      --inert-item-background-color: Canvas;\n      --inert-label-text-color: CanvasText;\n\n      --hover-item-text-color: HighlightText;\n      --hover-item-border-color: Highlight;\n      --hover-item-background-color: Highlight;\n      --hover-label-text-color: Highlight;\n    }\n\n    .stzh-stepper-item__unclickable {\n      --line-color: var(--base-line-color);\n\n      --item-text-color: var(--inert-item-text-color);\n      --item-border-color: var(--inert-item-border-color);\n      --item-background-color: var(--inert-item-background-color);\n      --label-text-color: var(--inert-label-text-color);\n    }\n\n    .stzh-stepper-item__button {\n      --line-color: var(--base-line-color);\n\n      --item-text-color: var(--base-item-text-color);\n      --item-border-color: var(--base-item-border-color);\n      --item-background-color: var(--base-item-background-color);\n      --label-text-color: var(--base-label-text-color);\n\n      // Add specifity with `:is` instead of `:where`\n      &:is(:hover, :focus) {\n        --item-text-color: var(--hover-item-text-color);\n        --item-border-color: var(--hover-item-border-color);\n        --item-background-color: var(--hover-item-background-color);\n        --label-text-color: var(--hover-label-text-color);\n      }\n    }\n\n    .stzh-stepper-item__label-block {\n      color: var(--label-text-color);\n    }\n\n    .stzh-stepper-item__number-block {\n      color: var(--item-text-color);\n      border-color: var(--item-border-color);\n      background-color: var(--item-background-color);\n\n      // Line\n      &::before {\n        background-color: var(--line-color);\n      }\n\n      // Background\n      &::after {\n        background-color: var(--item-background-color);\n      }\n    }\n  }\n\n  // Variant: \"first\" or \"last\"\n  &.stzh-stepper-item--first,\n  &.stzh-stepper-item--last {\n    .stzh-stepper-item__number-block {\n      &::before {\n        display: block;\n      }\n    }\n  }\n\n  // Variant: \"first\"\n  &.stzh-stepper-item--first {\n    position: relative;\n\n    .stzh-stepper-item__dotted {\n      left: 50%;\n      transform: translateX(-50%);\n    }\n\n    .stzh-stepper-item__number-block::before {\n      z-index: 1;\n    }\n  }\n\n  // Variant: \"last\"\n  &.stzh-stepper-item--last {\n    .stzh-stepper-item__dotted {\n      // position the dots based on the width divided by the elements minus half of itself\n      right: calc((100% / var(--steps)) - (#{$stepperItemDottedSize * 0.5}));\n\n      @include mq($from: small) {\n        right: calc(\n          (100% / var(--steps)) - (#{$stepperItemDottedSizeSmallUp * 0.5})\n        );\n      }\n    }\n  }\n\n  // Variant: \"passed\"\n  &.stzh-stepper-item--passed {\n    --base-line-color: var(--base-item-background-color);\n\n    --base-item-text-color: #{$colorWhite};\n    --base-item-border-color: #{$colorSecondary60};\n    --base-item-background-color: #{$colorSecondary60};\n    --base-label-text-color: #{$colorPrimary};\n\n    --inert-item-text-color: var(--base-item-text-color);\n    --inert-item-border-color: var(--base-item-border-color);\n    --inert-item-background-color: var(--base-item-background-color);\n    --inert-label-text-color: var(--base-item-background-color);\n\n    --hover-item-text-color: var(--base-item-text-color);\n    --hover-item-border-color: #{$colorSecondary70};\n    --hover-item-background-color: #{$colorSecondary70};\n    --hover-label-text-color: #{$colorPrimaryHover};\n\n    @media (forced-colors: active) {\n      --base-item-text-color: SelectedItemText;\n      --base-item-border-color: SelectedItem;\n      --base-item-background-color: SelectedItem;\n      --base-label-text-color: SelectedItem;\n\n      --hover-item-text-color: HighlightText;\n      --hover-item-border-color: Highlight;\n      --hover-item-background-color: Highlight;\n      --hover-label-text-color: Highlight;\n    }\n\n    .stzh-stepper-item__label-block {\n      @include font(\"heavy\");\n    }\n  }\n\n  // Variant: \"passed\" and not \"passed-incomplete\"\n  &.stzh-stepper-item--passed:not(.stzh-stepper-item--passed-incomplete) {\n    .stzh-stepper-item__number {\n      @include visuallyhidden;\n    }\n  }\n\n  // Variant: \"passed-incomplete\"\n  &.stzh-stepper-item--passed-incomplete {\n    //\n  }\n\n  // Variant: \"current\"\n  &.stzh-stepper-item--current {\n    --base-line-color: var(--base-item-background-color);\n\n    --base-item-text-color: #{$colorWhite};\n    --base-item-border-color: #{$colorPrimary};\n    --base-item-background-color: #{$colorPrimary};\n    --base-label-text-color: var(--base-item-background-color);\n\n    --inert-item-text-color: var(--base-item-text-color);\n    --inert-item-border-color: var(--base-item-border-color);\n    --inert-item-background-color: var(--base-item-background-color);\n    --inert-label-text-color: var(--base-item-background-color);\n\n    --hover-item-text-color: var(--base-item-text-color);\n    --hover-item-border-color: #{$colorPrimaryHover};\n    --hover-item-background-color: #{$colorPrimaryHover};\n    --hover-label-text-color: var(--hover-item-background-color);\n\n    @media (forced-colors: active) {\n      --base-item-text-color: SelectedItemText;\n      --base-item-border-color: SelectedItem;\n      --base-item-background-color: SelectedItem;\n      --base-label-text-color: SelectedItem;\n\n      --hover-item-text-color: HighlightText;\n      --hover-item-border-color: Highlight;\n      --hover-item-background-color: Highlight;\n      --hover-label-text-color: Highlight;\n    }\n\n    .stzh-stepper-item__label-block {\n      @include font(\"heavy\");\n    }\n\n    .stzh-stepper-item__number-block {\n      // Line\n      &::before {\n        z-index: -1;\n        display: block;\n      }\n    }\n  }\n\n  /* Disabled */\n  &.stzh-stepper-item--is-disabled {\n    --base-item-text-color: #{$colorWhite};\n    --base-item-border-color: #{$colorGrey60};\n    --base-item-background-color: #{$colorGrey60};\n    --base-label-text-color: #{$colorGrey80};\n\n    --inert-item-text-color: var(--base-item-text-color);\n    --inert-item-border-color: var(--base-item-border-color);\n    --inert-item-background-color: var(--base-item-background-color);\n    --inert-label-text-color: var(--base-label-text-color);\n\n    --hover-item-text-color: var(--base-item-text-color);\n    --hover-item-border-color: var(--base-item-border-color);\n    --hover-item-background-color: var(--base-item-background-color);\n    --hover-label-text-color: var(--base-label-text-color);\n\n    @media (forced-colors: active) {\n      --base-item-text-color: GrayText;\n      --base-item-border-color: GrayText;\n      --base-item-background-color: Canvas;\n      --base-label-text-color: GrayText;\n\n      --hover-item-text-color: var(--base-item-text-color);\n      --hover-item-border-color: var(--base-item-border-color);\n      --hover-item-background-color: var(--base-item-background-color);\n      --hover-label-text-color: var(--base-label-text-color);\n    }\n\n    .stzh-stepper-item__button {\n      cursor: not-allowed;\n    }\n  }\n\n  // Variant: \"first\" (line-color overwrite)\n  &.stzh-stepper-item--first {\n    --base-line-color: #{$colorWhite};\n\n    @media (forced-colors: active) {\n      --base-line-color: Canvas;\n    }\n  }\n\n  // Variant: \"first\" and \"dotted\"\n  &.stzh-stepper-item--first.stzh-stepper-item--dotted {\n    .stzh-stepper-item__label-block {\n      display: none;\n    }\n\n    // Hide number block behind dotted element\n    .stzh-stepper-item__number-block {\n      position: relative;\n      z-index: 0;\n      top: 5px;\n      width: $stepperItemDottedSize;\n      height: $stepperItemDottedSize;\n      margin-bottom: 0;\n      border: none;\n      background-color: transparent;\n\n      // Change dimensions to be still hidden\n      @include mq($from: small) {\n        top: 8px;\n        width: $stepperItemDottedSizeSmallUp;\n        height: $stepperItemDottedSizeSmallUp;\n      }\n\n      // Realign white line\n      &::before {\n        top: 12px;\n        right: 26px;\n\n        @include mq($from: small) {\n          top: 13px;\n          right: 30px;\n        }\n      }\n\n      &::after {\n        display: none;\n      }\n    }\n\n    .stzh-stepper-item__button {\n      padding-left: 0;\n      padding-right: 0;\n    }\n  }\n}\n","import { Component, Host, h, Prop, Element, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhStepperItemClickEvent, StzhStepperItemDottedClickEvent } from \"../../index\";\n\n/**\n * @slot - Slot for label (or use label prop)\n */\n@Component({\n  tag: \"stzh-stepper-item\",\n  styleUrl: \"stzh-stepper-item.scss\",\n  scoped: true,\n})\nexport class StzhStepperItem {\n  /** The label of the item. */\n  @Prop({ reflect: true }) label: string;\n\n  /** When true, it displays a not-allowed cursor on hover. Use this for steps that are not applicable. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether it's the first item (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) first: boolean = false;\n\n  /** Whether it's the last item (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) last: boolean = false;\n\n  /** True when the item index is lower than the current index (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) passed: boolean = false;\n\n  /** For passed items, this prevents displaying a checked icon when true (shows step number instead). */\n  @Prop({ reflect: true }) incomplete: boolean = false;\n\n  /** Whether it's the last item (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) current: boolean = false;\n\n  /** Whether it's a hidden item (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) hide: boolean = false;\n\n  /** Whether it's a dotted item (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) dotted: boolean = false;\n\n  /** The number of the step (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) step: number = 1;\n\n  /** Displays a custom icon instead of the step number. */\n  @Prop({ reflect: true }) icon: string = \"\";\n\n  /** When true, it displays a default cursor on hover and no click event is emitted. */\n  @Prop() clickDisabled: boolean = false;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhStepperItemClickEvent>;\n\n  /** Dotted click event */\n  @Event() stzhDottedClick: EventEmitter<StzhStepperItemDottedClickEvent>;\n\n  @Element() element: HTMLStzhStepperItemElement;\n\n  private button: HTMLButtonElement;\n  private text: HTMLElement;\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-stepper-item\",\n      originalEvent: event,\n      index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n    });\n  };\n\n  private onDottedClick = (event: MouseEvent) => {\n    this.stzhDottedClick.emit({\n      component: \"stzh-stepper-item\",\n      originalEvent: event,\n      index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-stepper-item\": true,\n      \"stzh-stepper-item--first\": this.first,\n      \"stzh-stepper-item--last\": this.last,\n      \"stzh-stepper-item--current\": this.current,\n      \"stzh-stepper-item--hide\": this.hide,\n      \"stzh-stepper-item--dotted\": this.dotted,\n      \"stzh-stepper-item--has-icon\": !!this.icon,\n      \"stzh-stepper-item--is-disabled\": this.disabled,\n      \"stzh-stepper-item--passed\": this.passed,\n      \"stzh-stepper-item--passed-incomplete\": this.passed && this.incomplete,\n    };\n\n    const dotted = (\n      <span>\n        {!this.clickDisabled ? (\n          <button class=\"stzh-stepper-item__dotted\" onClick={this.onDottedClick}>\n            <stzh-icon class=\"stzh-stepper-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n          </button>\n        ) : (\n          <div class=\"stzh-stepper-item__dotted stzh-stepper-item__dotted--disabled\">\n            <stzh-icon class=\"stzh-stepper-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n          </div>\n        )}\n      </span>\n    );\n\n    const content = (\n      <span>\n        <span class=\"stzh-stepper-item__number-block\">\n          {this.icon ? (\n            <stzh-icon class=\"stzh-stepper-item__user-icon\" name={this.icon}></stzh-icon>\n          ) : (\n            <span>\n              <span class=\"stzh-stepper-item__number\">{this.step}</span>\n              {this.passed && !this.incomplete && (\n                <stzh-icon class=\"stzh-stepper-item__icon\" name=\"checkmark\"></stzh-icon>\n              )}\n            </span>\n          )}\n        </span>\n        <span ref={el => (this.text = el as HTMLElement)} class=\"stzh-stepper-item__label-block\">\n          {this.label ? this.label : <slot></slot>}\n        </span>\n      </span>\n    );\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.last && this.dotted && dotted}\n          {this.clickDisabled ? (\n            <div class=\"stzh-stepper-item__unclickable\" aria-pressed={this.current ? \"true\" : \"false\"}>\n              {content}\n            </div>\n          ) : (\n            <button\n              ref={el => (this.button = el as HTMLButtonElement)}\n              class=\"stzh-stepper-item__button\"\n              aria-pressed={this.current ? \"true\" : \"false\"}\n              disabled={(this.dotted && this.first) || this.disabled}\n              onClick={this.onClick}\n            >\n              <span class=\"stzh-stepper-item__number-block\">\n                {this.icon ? (\n                  <stzh-icon class=\"stzh-stepper-item__user-icon\" name={this.icon}></stzh-icon>\n                ) : (\n                  <Fragment>\n                    <span class=\"stzh-stepper-item__number\">{this.step}</span>\n                    {this.passed && !this.incomplete && (\n                      <stzh-icon class=\"stzh-stepper-item__icon\" name=\"checkmark\"></stzh-icon>\n                    )}\n                  </Fragment>\n                )}\n              </span>\n              <span ref={el => (this.text = el as HTMLElement)} class=\"stzh-stepper-item__label-block\">\n                {this.label ? this.label : <slot></slot>}\n              </span>\n            </button>\n          )}\n          {this.first && this.dotted && dotted}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DFNN4tQ9.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-stepper-item/stzh-stepper-item.scss?tag=stzh-stepper-item&encapsulation=scoped","src/components/stzh-stepper-item/stzh-stepper-item.tsx"],"sourcesContent":[":host {\n}\n\n:host([hide]) {\n  display: none;\n}\n\n.stzh-stepper-item {\n  text-align: center;\n\n  .stzh-stepper-item__button,\n  .stzh-stepper-item__unclickable {\n    appearance: none;\n    font-family: inherit;\n    background-color: transparent;\n    border: none;\n  }\n\n  .stzh-stepper-item__button {\n    cursor: pointer;\n  }\n\n  .stzh-stepper-item__unclickable {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  /* what we do here is:\n  add a gray line on the last element, which strikes through all previous ones,\n  add a blue line on the current step which covers all previous elements relative to itself\n  and add a white line on the first element, which gives you the illusion that it stopped. */\n\n  .stzh-stepper-item__number-block {\n    @include font(\"heavy\");\n    @include fontCurve(\"p1\");\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    width: $stepperItemSize;\n    height: $stepperItemSize;\n    border: 1px solid transparent;\n    text-align: center;\n    box-sizing: border-box;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @include mq($from: small) {\n      width: $stepperItemSmallUp;\n      height: $stepperItemSmallUp;\n      margin-bottom: space(\"large\");\n    }\n\n    @media (forced-colors: active) {\n      transition: none;\n    }\n\n    // set a line on every element, but hide it by default\n    &::before {\n      display: none;\n      content: \"\";\n      position: absolute;\n      top: 16px;\n      right: $stepperItemSize - 1px;\n      width: 100vw;\n      height: 1px;\n      z-index: -2;\n      overflow: hidden;\n\n      @include mq($from: small) {\n        top: 20px;\n        right: $stepperItemSmallUp - 1px;\n      }\n    }\n  }\n\n  .stzh-stepper-item__number-block,\n  .stzh-stepper-item__dotted {\n    &::after {\n      content: \"\";\n      z-index: 0;\n      position: absolute;\n      display: block;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      transition: background-color $baseTransitionAnimationSpeed;\n\n      @media (forced-colors: active) {\n        transition: none;\n      }\n    }\n  }\n\n  .stzh-stepper-item__label-block {\n    display: block;\n    font-size: 14px;\n    line-height: 1.28;\n    padding: space(\"xxsmall\") space(\"small\");\n    letter-spacing: 0.01em;\n    transition: color $baseTransitionAnimationSpeed;\n\n    @include mq($to: small) {\n      @include visuallyhidden;\n    }\n\n    @media (forced-colors: active) {\n      transition: none;\n    }\n  }\n\n  .stzh-stepper-item__number,\n  .stzh-stepper-item__icon,\n  .stzh-stepper-item__user-icon,\n  .stzh-stepper-item__dotted-icon {\n    z-index: 1;\n    position: relative;\n    color: currentColor;\n\n    @media (forced-colors: active) {\n      forced-color-adjust: preserve-parent-color;\n    }\n  }\n\n  .stzh-stepper-item__icon,\n  .stzh-stepper-item__user-icon,\n  .stzh-stepper-item__dotted-icon {\n    --size: #{iconSize(\"xsmall\")};\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: currentColor;\n  }\n\n  .stzh-stepper-item__user-icon {\n    --size: #{iconSize(\"small\")};\n  }\n\n  .stzh-stepper-item__dotted {\n    z-index: 1;\n    appearance: none;\n    font-family: inherit;\n    position: absolute;\n    top: 3px;\n    width: $stepperItemDottedSize;\n    height: $stepperItemDottedSize;\n    background-color: $colorGrey20;\n    border: 1px solid transparent;\n    cursor: pointer;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @media (forced-colors: active) {\n      transition: none;\n      color: ButtonText;\n      border-color: ButtonBorder;\n      background-color: ButtonFace;\n    }\n\n    &:is(:hover, :focus) {\n      border-color: $colorGrey20;\n      cursor: default;\n\n      @media (forced-colors: active) {\n        color: HighlightText;\n        border-color: Highlight;\n        background-color: Highlight;\n      }\n\n      &::after {\n        background-color: $colorGrey20;\n\n        @media (forced-colors: active) {\n          background-color: Highlight;\n        }\n      }\n\n      .stzh-stepper-item__dotted-icon {\n        color: $colorPrimaryHover;\n\n        @media (forced-colors: active) {\n          color: HighlightText;\n        }\n      }\n    }\n\n    &.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled {\n      cursor: default;\n\n      @media (forced-colors: active) {\n        color: CanvasText;\n        border-color: CanvasText;\n        background-color: Canvas;\n      }\n\n      .stzh-stepper-item__dotted-icon {\n        @media (forced-colors: active) {\n          color: CanvasText;\n        }\n      }\n\n      &:where(:hover, :focus) {\n        border-color: var(--stzh-base-border-color);\n        cursor: default;\n\n        @media (forced-colors: active) {\n          color: CanvasText;\n          border-color: CanvasText;\n          background-color: Canvas;\n        }\n\n        &::after {\n          background-color: inherit;\n\n          @media (forced-colors: active) {\n            background-color: Canvas;\n          }\n        }\n\n        .stzh-stepper-item__dotted-icon {\n          color: $colorPrimaryHover;\n\n          @media (forced-colors: active) {\n            color: CanvasText;\n          }\n        }\n      }\n    }\n\n    @include mq($from: small) {\n      top: 5px;\n      width: $stepperItemDottedSizeSmallUp;\n      height: $stepperItemDottedSizeSmallUp;\n    }\n  }\n\n  // Variant: ~default~\n  & {\n    --base-line-color: #{$baseBorderColor};\n\n    --base-item-text-color: #{$colorPrimary};\n    --base-item-border-color: #{$colorSecondary20};\n    --base-item-background-color: #{$colorSecondary20};\n    --base-label-text-color: #{$colorGrey80};\n\n    --inert-item-text-color: #{$colorPrimary};\n    --inert-item-border-color: #{$colorGrey20};\n    --inert-item-background-color: #{$colorGrey20};\n    --inert-label-text-color: #{$colorGrey80};\n\n    --hover-item-text-color: var(--base-item-text-color);\n    --hover-item-border-color: #{$colorSecondary40};\n    --hover-item-background-color: #{$colorSecondary40};\n    --hover-label-text-color: #{$colorPrimaryHover};\n\n    @media (forced-colors: active) {\n      --base-line-color: CanvasText;\n\n      --base-item-text-color: ButtonText;\n      --base-item-border-color: ButtonBorder;\n      --base-item-background-color: ButtonFace;\n      --base-label-text-color: ButtonText;\n\n      --inert-item-text-color: CanvasText;\n      --inert-item-border-color: CanvasText;\n      --inert-item-background-color: Canvas;\n      --inert-label-text-color: CanvasText;\n\n      --hover-item-text-color: HighlightText;\n      --hover-item-border-color: Highlight;\n      --hover-item-background-color: Highlight;\n      --hover-label-text-color: Highlight;\n    }\n\n    .stzh-stepper-item__unclickable {\n      --line-color: var(--base-line-color);\n\n      --item-text-color: var(--inert-item-text-color);\n      --item-border-color: var(--inert-item-border-color);\n      --item-background-color: var(--inert-item-background-color);\n      --label-text-color: var(--inert-label-text-color);\n    }\n\n    .stzh-stepper-item__button {\n      --line-color: var(--base-line-color);\n\n      --item-text-color: var(--base-item-text-color);\n      --item-border-color: var(--base-item-border-color);\n      --item-background-color: var(--base-item-background-color);\n      --label-text-color: var(--base-label-text-color);\n\n      // Add specifity with `:is` instead of `:where`\n      &:is(:hover, :focus) {\n        --item-text-color: var(--hover-item-text-color);\n        --item-border-color: var(--hover-item-border-color);\n        --item-background-color: var(--hover-item-background-color);\n        --label-text-color: var(--hover-label-text-color);\n      }\n    }\n\n    .stzh-stepper-item__label-block {\n      color: var(--label-text-color);\n    }\n\n    .stzh-stepper-item__number-block {\n      color: var(--item-text-color);\n      border-color: var(--item-border-color);\n      background-color: var(--item-background-color);\n\n      // Line\n      &::before {\n        background-color: var(--line-color);\n      }\n\n      // Background\n      &::after {\n        background-color: var(--item-background-color);\n      }\n    }\n  }\n\n  // Variant: \"first\" or \"last\"\n  &.stzh-stepper-item--first,\n  &.stzh-stepper-item--last {\n    .stzh-stepper-item__number-block {\n      &::before {\n        display: block;\n      }\n    }\n  }\n\n  // Variant: \"first\"\n  &.stzh-stepper-item--first {\n    position: relative;\n\n    .stzh-stepper-item__dotted {\n      left: 50%;\n      transform: translateX(-50%);\n    }\n\n    .stzh-stepper-item__number-block::before {\n      z-index: 1;\n    }\n  }\n\n  // Variant: \"last\"\n  &.stzh-stepper-item--last {\n    .stzh-stepper-item__dotted {\n      // position the dots based on the width divided by the elements minus half of itself\n      right: calc((100% / var(--steps)) - (#{$stepperItemDottedSize * 0.5}));\n\n      @include mq($from: small) {\n        right: calc(\n          (100% / var(--steps)) - (#{$stepperItemDottedSizeSmallUp * 0.5})\n        );\n      }\n    }\n  }\n\n  // Variant: \"passed\"\n  &.stzh-stepper-item--passed {\n    --base-line-color: var(--base-item-background-color);\n\n    --base-item-text-color: #{$colorWhite};\n    --base-item-border-color: #{$colorSecondary60};\n    --base-item-background-color: #{$colorSecondary60};\n    --base-label-text-color: #{$colorPrimary};\n\n    --inert-item-text-color: var(--base-item-text-color);\n    --inert-item-border-color: var(--base-item-border-color);\n    --inert-item-background-color: var(--base-item-background-color);\n    --inert-label-text-color: var(--base-item-background-color);\n\n    --hover-item-text-color: var(--base-item-text-color);\n    --hover-item-border-color: #{$colorSecondary70};\n    --hover-item-background-color: #{$colorSecondary70};\n    --hover-label-text-color: #{$colorPrimaryHover};\n\n    @media (forced-colors: active) {\n      --base-item-text-color: SelectedItemText;\n      --base-item-border-color: SelectedItem;\n      --base-item-background-color: SelectedItem;\n      --base-label-text-color: SelectedItem;\n\n      --hover-item-text-color: HighlightText;\n      --hover-item-border-color: Highlight;\n      --hover-item-background-color: Highlight;\n      --hover-label-text-color: Highlight;\n    }\n\n    .stzh-stepper-item__label-block {\n      @include font(\"heavy\");\n    }\n  }\n\n  // Variant: \"passed\" and not \"passed-incomplete\"\n  &.stzh-stepper-item--passed:not(.stzh-stepper-item--passed-incomplete) {\n    .stzh-stepper-item__number {\n      @include visuallyhidden;\n    }\n  }\n\n  // Variant: \"passed-incomplete\"\n  &.stzh-stepper-item--passed-incomplete {\n    //\n  }\n\n  // Variant: \"current\"\n  &.stzh-stepper-item--current {\n    --base-line-color: var(--base-item-background-color);\n\n    --base-item-text-color: #{$colorWhite};\n    --base-item-border-color: #{$colorPrimary};\n    --base-item-background-color: #{$colorPrimary};\n    --base-label-text-color: var(--base-item-background-color);\n\n    --inert-item-text-color: var(--base-item-text-color);\n    --inert-item-border-color: var(--base-item-border-color);\n    --inert-item-background-color: var(--base-item-background-color);\n    --inert-label-text-color: var(--base-item-background-color);\n\n    --hover-item-text-color: var(--base-item-text-color);\n    --hover-item-border-color: #{$colorPrimaryHover};\n    --hover-item-background-color: #{$colorPrimaryHover};\n    --hover-label-text-color: var(--hover-item-background-color);\n\n    @media (forced-colors: active) {\n      --base-item-text-color: SelectedItemText;\n      --base-item-border-color: SelectedItem;\n      --base-item-background-color: SelectedItem;\n      --base-label-text-color: SelectedItem;\n\n      --hover-item-text-color: HighlightText;\n      --hover-item-border-color: Highlight;\n      --hover-item-background-color: Highlight;\n      --hover-label-text-color: Highlight;\n    }\n\n    .stzh-stepper-item__label-block {\n      @include font(\"heavy\");\n    }\n\n    .stzh-stepper-item__number-block {\n      // Line\n      &::before {\n        z-index: -1;\n        display: block;\n      }\n    }\n  }\n\n  /* Disabled */\n  &.stzh-stepper-item--is-disabled {\n    --base-item-text-color: #{$colorWhite};\n    --base-item-border-color: #{$colorGrey60};\n    --base-item-background-color: #{$colorGrey60};\n    --base-label-text-color: #{$colorGrey80};\n\n    --inert-item-text-color: var(--base-item-text-color);\n    --inert-item-border-color: var(--base-item-border-color);\n    --inert-item-background-color: var(--base-item-background-color);\n    --inert-label-text-color: var(--base-label-text-color);\n\n    --hover-item-text-color: var(--base-item-text-color);\n    --hover-item-border-color: var(--base-item-border-color);\n    --hover-item-background-color: var(--base-item-background-color);\n    --hover-label-text-color: var(--base-label-text-color);\n\n    @media (forced-colors: active) {\n      --base-item-text-color: GrayText;\n      --base-item-border-color: GrayText;\n      --base-item-background-color: Canvas;\n      --base-label-text-color: GrayText;\n\n      --hover-item-text-color: var(--base-item-text-color);\n      --hover-item-border-color: var(--base-item-border-color);\n      --hover-item-background-color: var(--base-item-background-color);\n      --hover-label-text-color: var(--base-label-text-color);\n    }\n\n    .stzh-stepper-item__button {\n      cursor: not-allowed;\n    }\n  }\n\n  // Variant: \"first\" (line-color overwrite)\n  &.stzh-stepper-item--first {\n    --base-line-color: #{$colorWhite};\n\n    @media (forced-colors: active) {\n      --base-line-color: Canvas;\n    }\n  }\n\n  // Variant: \"first\" and \"dotted\"\n  &.stzh-stepper-item--first.stzh-stepper-item--dotted {\n    .stzh-stepper-item__label-block {\n      display: none;\n    }\n\n    // Hide number block behind dotted element\n    .stzh-stepper-item__number-block {\n      position: relative;\n      z-index: 0;\n      top: 5px;\n      width: $stepperItemDottedSize;\n      height: $stepperItemDottedSize;\n      margin-bottom: 0;\n      border: none;\n      background-color: transparent;\n\n      // Change dimensions to be still hidden\n      @include mq($from: small) {\n        top: 8px;\n        width: $stepperItemDottedSizeSmallUp;\n        height: $stepperItemDottedSizeSmallUp;\n      }\n\n      // Realign white line\n      &::before {\n        top: 12px;\n        right: 26px;\n\n        @include mq($from: small) {\n          top: 13px;\n          right: 30px;\n        }\n      }\n\n      &::after {\n        display: none;\n      }\n    }\n\n    .stzh-stepper-item__button {\n      padding-left: 0;\n      padding-right: 0;\n    }\n  }\n}\n","import { Component, Host, h, Prop, Element, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhStepperItemClickEvent, StzhStepperItemDottedClickEvent } from \"../../index\";\n\n/**\n * @slot - Slot for label (or use label prop)\n */\n@Component({\n  tag: \"stzh-stepper-item\",\n  styleUrl: \"stzh-stepper-item.scss\",\n  scoped: true,\n})\nexport class StzhStepperItem {\n  /** The label of the item. */\n  @Prop({ reflect: true }) label: string;\n\n  /** When true, it displays a not-allowed cursor on hover. Use this for steps that are not applicable. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether it's the first item (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) first: boolean = false;\n\n  /** Whether it's the last item (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) last: boolean = false;\n\n  /** True when the item index is lower than the current index (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) passed: boolean = false;\n\n  /** For passed items, this prevents displaying a checked icon when true (shows step number instead). */\n  @Prop({ reflect: true }) incomplete: boolean = false;\n\n  /** Whether it's the last item (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) current: boolean = false;\n\n  /** Whether it's a hidden item (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) hide: boolean = false;\n\n  /** Whether it's a dotted item (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) dotted: boolean = false;\n\n  /** The number of the step (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) step: number = 1;\n\n  /** Displays a custom icon instead of the step number. */\n  @Prop({ reflect: true }) icon: string = \"\";\n\n  /** When true, it displays a default cursor on hover and no click event is emitted. */\n  @Prop() clickDisabled: boolean = false;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhStepperItemClickEvent>;\n\n  /** Dotted click event */\n  @Event() stzhDottedClick: EventEmitter<StzhStepperItemDottedClickEvent>;\n\n  @Element() element: HTMLStzhStepperItemElement;\n\n  private button: HTMLButtonElement;\n  private text: HTMLElement;\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-stepper-item\",\n      originalEvent: event,\n      index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n    });\n  };\n\n  private onDottedClick = (event: MouseEvent) => {\n    this.stzhDottedClick.emit({\n      component: \"stzh-stepper-item\",\n      originalEvent: event,\n      index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-stepper-item\": true,\n      \"stzh-stepper-item--first\": this.first,\n      \"stzh-stepper-item--last\": this.last,\n      \"stzh-stepper-item--current\": this.current,\n      \"stzh-stepper-item--hide\": this.hide,\n      \"stzh-stepper-item--dotted\": this.dotted,\n      \"stzh-stepper-item--has-icon\": !!this.icon,\n      \"stzh-stepper-item--is-disabled\": this.disabled,\n      \"stzh-stepper-item--passed\": this.passed,\n      \"stzh-stepper-item--passed-incomplete\": this.passed && this.incomplete,\n    };\n\n    const dotted = (\n      <span>\n        {!this.clickDisabled ? (\n          <button class=\"stzh-stepper-item__dotted\" onClick={this.onDottedClick}>\n            <stzh-icon class=\"stzh-stepper-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n          </button>\n        ) : (\n          <div class=\"stzh-stepper-item__dotted stzh-stepper-item__dotted--disabled\">\n            <stzh-icon class=\"stzh-stepper-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n          </div>\n        )}\n      </span>\n    );\n\n    const content = (\n      <span>\n        <span class=\"stzh-stepper-item__number-block\">\n          {this.icon ? (\n            <stzh-icon class=\"stzh-stepper-item__user-icon\" name={this.icon}></stzh-icon>\n          ) : (\n            <span>\n              <span class=\"stzh-stepper-item__number\">{this.step}</span>\n              {this.passed && !this.incomplete && (\n                <stzh-icon class=\"stzh-stepper-item__icon\" name=\"checkmark\"></stzh-icon>\n              )}\n            </span>\n          )}\n        </span>\n        <span ref={el => (this.text = el as HTMLElement)} class=\"stzh-stepper-item__label-block\">\n          {this.label ? this.label : <slot></slot>}\n        </span>\n      </span>\n    );\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.last && this.dotted && dotted}\n          {this.clickDisabled ? (\n            <div class=\"stzh-stepper-item__unclickable\" aria-pressed={this.current ? \"true\" : \"false\"}>\n              {content}\n            </div>\n          ) : (\n            <button\n              ref={el => (this.button = el as HTMLButtonElement)}\n              class=\"stzh-stepper-item__button\"\n              aria-pressed={this.current ? \"true\" : \"false\"}\n              disabled={(this.dotted && this.first) || this.disabled}\n              onClick={this.onClick}\n            >\n              <span class=\"stzh-stepper-item__number-block\">\n                {this.icon ? (\n                  <stzh-icon class=\"stzh-stepper-item__user-icon\" name={this.icon}></stzh-icon>\n                ) : (\n                  <Fragment>\n                    <span class=\"stzh-stepper-item__number\">{this.step}</span>\n                    {this.passed && !this.incomplete && (\n                      <stzh-icon class=\"stzh-stepper-item__icon\" name=\"checkmark\"></stzh-icon>\n                    )}\n                  </Fragment>\n                )}\n              </span>\n              <span ref={el => (this.text = el as HTMLElement)} class=\"stzh-stepper-item__label-block\">\n                {this.label ? this.label : <slot></slot>}\n              </span>\n            </button>\n          )}\n          {this.first && this.dotted && dotted}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-C_cxk9RY.js → p-DStLZwaI.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-X46RDuY9.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-5QD-jnDI.js';
 import { h as hasSlot } from './p-CN5apKPb.js';
-import { S as StzhInputDescription } from './p-BPjfBYp8.js';
-import { d as defineCustomElement$3 } from './p-EnVb6m-B.js';
-import { d as defineCustomElement$2 } from './p-DW10PQbf.js';
-import { d as defineCustomElement$1 } from './p-C5GxUCJA.js';
+import { S as StzhInputDescription } from './p-x2lzAuxg.js';
+import { d as defineCustomElement$3 } from './p-DZ_hOgVb.js';
+import { d as defineCustomElement$2 } from './p-BNRtW-oE.js';
+import { d as defineCustomElement$1 } from './p-CqIeGIYq.js';
 
 const stzhCheckboxCss = () => `.sc-stzh-checkbox-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-checkbox-h,[stzh-hidden].sc-stzh-checkbox-h{display:none}.sc-stzh-checkbox-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-checkbox-h *.sc-stzh-checkbox,.sc-stzh-checkbox-h *.sc-stzh-checkbox::before,.sc-stzh-checkbox-h *.sc-stzh-checkbox::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-checkbox-h .has-focus.sc-stzh-checkbox{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-checkbox-h .stzh-fylingfocus-focused.sc-stzh-checkbox{outline-style:none !important}.sc-stzh-checkbox-h .stzh-fylingfocus-focused.sc-stzh-checkbox::-moz-focus-inner{border:0 !important}.sc-stzh-checkbox-h{--label-color:var(--stzh-checkbox-label-color, var(--stzh-base-color));--label-hover-color:var(
     --stzh-checkbox-label-hover-color,
@@ -197,6 +197,6 @@ function defineCustomElement() {
 }
 
 export { StzhCheckbox as S, defineCustomElement as d };
-//# sourceMappingURL=p-C_cxk9RY.js.map
+//# sourceMappingURL=p-DStLZwaI.js.map
 
-//# sourceMappingURL=p-C_cxk9RY.js.map
+//# sourceMappingURL=p-DStLZwaI.js.map

package/dist/components/{p-C_cxk9RY.js.map → p-DStLZwaI.js.map}

@@ -1 +1 @@
-{"file":"p-C_cxk9RY.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-checkbox/stzh-checkbox.scss?tag=stzh-checkbox&encapsulation=scoped","src/components/stzh-checkbox/stzh-checkbox.tsx"],"sourcesContent":[":host {\n  --label-color: var(--stzh-checkbox-label-color, #{$baseColor});\n  --label-hover-color: var(\n    --stzh-checkbox-label-hover-color,\n    #{$colorPrimary70}\n  );\n  --label-hover-checked-color: var(\n    --stzh-checkbox-label-hover-checked-color,\n    #{$colorPrimary90}\n  );\n  --check-color: var(--stzh-checkbox-check-color, #{$colorPrimary});\n  --invalid-color: var(--stzh-checkbox-invalid-color, #{$colorError60});\n  --disabled-color: var(--stzh-checkbox-disabled-color, #{$colorGrey50});\n\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-checkbox {\n  @include input-description;\n  display: grid;\n\n  &__field-wrapper {\n    @include fontSize(\"milli\");\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    border: 2px solid $colorBlack;\n    background-color: $colorWhite;\n    width: 24px;\n    height: 24px;\n    flex-shrink: 0;\n    border-radius: $formInputBorderRadius;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: border-color $baseTransitionAnimationSpeed;\n    position: relative;\n\n    @media (forced-colors: active) {\n      transition: none;\n      border-color: ButtonBorder;\n    }\n  }\n\n  &__check {\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 100%;\n    height: 100%;\n    transform: translate(-50%, -50%) translateZ(0);\n    will-change: opacity;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n    pointer-events: none;\n\n    -webkit-mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n    mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n    -webkit-mask-repeat: no-repeat;\n    mask-repeat: no-repeat;\n    -webkit-mask-position: center;\n    mask-position: center;\n    -webkit-mask-size: contain;\n    mask-size: contain;\n\n    color: var(--check-color);\n    background-color: currentColor;\n\n    @media (forced-colors: active) {\n      transition: none;\n      forced-color-adjust: none;\n      color: Highlight;\n    }\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n    color: var(--label-color);\n    transition: color $baseTransitionAnimationSpeed;\n    display: inline-flex;\n    align-items: center;\n    gap: space(\"xsmall\");\n    margin-left: space(\"small\");\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__label > &__description-wrapper {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__label &__error,\n  &__label &__description-text {\n    display: none;\n  }\n\n  &__label &__description,\n  &__label &__description-long {\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__label &__description-long-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    line-height: 1;\n  }\n\n  &__label stzh-popover &__description-long-icon {\n    --size: var(--stzh-icon-size-small);\n    display: block;\n    line-height: 0;\n    color: $colorPrimary70;\n  }\n\n  &__label-slot {\n    display: block;\n  }\n\n  &__label-slot stzh-text {\n    display: block;\n  }\n\n  &__marker {\n    @include fontSize(\"micro\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked ~ &__label {\n    color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark &__check {\n    color: var(--label-hover-checked-color);\n  }\n\n  &__input:checked:hover ~ &__mark &__check {\n    @media (forced-colors: active) {\n      color: Highlight;\n    }\n  }\n\n  &:hover &__mark,\n  &__input:checked ~ &__mark {\n    border-color: var(--label-hover-color);\n\n    @media (forced-colors: active) {\n      border-color: Highlight;\n    }\n  }\n\n  &__input:checked:hover ~ &__mark {\n    border-color: var(--label-hover-checked-color);\n\n    @media (forced-colors: active) {\n      border-color: Highlight;\n    }\n  }\n\n  &--is-checked .stzh-checkbox__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark &__check {\n    @media (forced-colors: none) {\n      color: var(--invalid-color);\n    }\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    @media (forced-colors: none) {\n      border-color: var(--invalid-color);\n    }\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $colorGrey60;\n\n    @media (forced-colors: active) {\n      color: GrayText;\n    }\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: var(--disabled-color);\n    background-color: $colorGrey20;\n\n    @media (forced-colors: active) {\n      border-color: GrayText;\n    }\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    color: var(--disabled-color);\n\n    @media (forced-colors: active) {\n      color: GrayText;\n    }\n  }\n}\n","import { Host, Component, Prop, Event, EventEmitter, Element, h, Watch, Listen } from \"@stencil/core\";\n\nimport { StzhCheckboxChangeEvent, StzhCheckboxFocusEvent, StzhCheckboxBlurEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet checkboxCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-checkbox\",\n  styleUrl: \"stzh-checkbox.scss\",\n  scoped: true,\n})\nexport class StzhCheckbox {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the checkbox is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Use the `description-long-title` slot or the `description` property instead.\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhCheckboxChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n\n    this.stzhChange.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked,\n    });\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n    });\n  };\n\n  async componentWillLoad() {\n    this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n    this.errorWatcher(this.error);\n\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"checkbox\");\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, \"error\") || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-checkbox\": true,\n      \"stzh-checkbox--has-description\": descriptionUsed,\n      \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n      \"stzh-checkbox--has-error\": errorUsed,\n      \"stzh-checkbox--is-required\": this.required,\n      \"stzh-checkbox--is-invalid\": this.invalid || errorUsed,\n      \"stzh-checkbox--is-disabled\": this.disabled,\n      \"stzh-checkbox--is-checked\": this.checked,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-checkbox__field-wrapper\">\n            <input\n              class=\"stzh-checkbox__input\"\n              ref={el => (this.input = el as HTMLInputElement)}\n              type=\"checkbox\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              defaultChecked={this.defaultChecked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-checkbox__mark\">\n              <div class=\"stzh-checkbox__check\" aria-hidden=\"true\"></div>\n            </div>\n            <div class=\"stzh-checkbox__label\">\n              {this.label ? (\n                this.label\n              ) : (\n                <span class=\"stzh-checkbox__label-slot\">\n                  <slot></slot>\n                </span>\n              )}\n\n              {!this.hideOptional && (\n                <span class=\"stzh-checkbox__marker\">\n                  <span class=\"stzh-checkbox__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-checkbox__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n\n              {descriptionLongUsed && (\n                <StzhInputDescription\n                  classPrefix=\"stzh-checkbox\"\n                  id={`${this.inputId}-description-long`}\n                  descriptionLong={this.descriptionLong}\n                  descriptionLongTitle={this.descriptionLongTitle}\n                  descriptionLongUsed={true}\n                  moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n                  showError={false}\n                  showDescriptionText={false}\n                />\n              )}\n            </div>\n          </label>\n          {(errorUsed || descriptionUsed) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-checkbox\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLongUsed={false}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DStLZwaI.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-checkbox/stzh-checkbox.scss?tag=stzh-checkbox&encapsulation=scoped","src/components/stzh-checkbox/stzh-checkbox.tsx"],"sourcesContent":[":host {\n  --label-color: var(--stzh-checkbox-label-color, #{$baseColor});\n  --label-hover-color: var(\n    --stzh-checkbox-label-hover-color,\n    #{$colorPrimary70}\n  );\n  --label-hover-checked-color: var(\n    --stzh-checkbox-label-hover-checked-color,\n    #{$colorPrimary90}\n  );\n  --check-color: var(--stzh-checkbox-check-color, #{$colorPrimary});\n  --invalid-color: var(--stzh-checkbox-invalid-color, #{$colorError60});\n  --disabled-color: var(--stzh-checkbox-disabled-color, #{$colorGrey50});\n\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-checkbox {\n  @include input-description;\n  display: grid;\n\n  &__field-wrapper {\n    @include fontSize(\"milli\");\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    border: 2px solid $colorBlack;\n    background-color: $colorWhite;\n    width: 24px;\n    height: 24px;\n    flex-shrink: 0;\n    border-radius: $formInputBorderRadius;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: border-color $baseTransitionAnimationSpeed;\n    position: relative;\n\n    @media (forced-colors: active) {\n      transition: none;\n      border-color: ButtonBorder;\n    }\n  }\n\n  &__check {\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 100%;\n    height: 100%;\n    transform: translate(-50%, -50%) translateZ(0);\n    will-change: opacity;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n    pointer-events: none;\n\n    -webkit-mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n    mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n    -webkit-mask-repeat: no-repeat;\n    mask-repeat: no-repeat;\n    -webkit-mask-position: center;\n    mask-position: center;\n    -webkit-mask-size: contain;\n    mask-size: contain;\n\n    color: var(--check-color);\n    background-color: currentColor;\n\n    @media (forced-colors: active) {\n      transition: none;\n      forced-color-adjust: none;\n      color: Highlight;\n    }\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n    color: var(--label-color);\n    transition: color $baseTransitionAnimationSpeed;\n    display: inline-flex;\n    align-items: center;\n    gap: space(\"xsmall\");\n    margin-left: space(\"small\");\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__label > &__description-wrapper {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__label &__error,\n  &__label &__description-text {\n    display: none;\n  }\n\n  &__label &__description,\n  &__label &__description-long {\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__label &__description-long-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    line-height: 1;\n  }\n\n  &__label stzh-popover &__description-long-icon {\n    --size: var(--stzh-icon-size-small);\n    display: block;\n    line-height: 0;\n    color: $colorPrimary70;\n  }\n\n  &__label-slot {\n    display: block;\n  }\n\n  &__label-slot stzh-text {\n    display: block;\n  }\n\n  &__marker {\n    @include fontSize(\"micro\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked ~ &__label {\n    color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark &__check {\n    color: var(--label-hover-checked-color);\n  }\n\n  &__input:checked:hover ~ &__mark &__check {\n    @media (forced-colors: active) {\n      color: Highlight;\n    }\n  }\n\n  &:hover &__mark,\n  &__input:checked ~ &__mark {\n    border-color: var(--label-hover-color);\n\n    @media (forced-colors: active) {\n      border-color: Highlight;\n    }\n  }\n\n  &__input:checked:hover ~ &__mark {\n    border-color: var(--label-hover-checked-color);\n\n    @media (forced-colors: active) {\n      border-color: Highlight;\n    }\n  }\n\n  &--is-checked .stzh-checkbox__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark &__check {\n    @media (forced-colors: none) {\n      color: var(--invalid-color);\n    }\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    @media (forced-colors: none) {\n      border-color: var(--invalid-color);\n    }\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $colorGrey60;\n\n    @media (forced-colors: active) {\n      color: GrayText;\n    }\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: var(--disabled-color);\n    background-color: $colorGrey20;\n\n    @media (forced-colors: active) {\n      border-color: GrayText;\n    }\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    color: var(--disabled-color);\n\n    @media (forced-colors: active) {\n      color: GrayText;\n    }\n  }\n}\n","import { Host, Component, Prop, Event, EventEmitter, Element, h, Watch, Listen } from \"@stencil/core\";\n\nimport { StzhCheckboxChangeEvent, StzhCheckboxFocusEvent, StzhCheckboxBlurEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet checkboxCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-checkbox\",\n  styleUrl: \"stzh-checkbox.scss\",\n  scoped: true,\n})\nexport class StzhCheckbox {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the checkbox is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Use the `description-long-title` slot or the `description` property instead.\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhCheckboxChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n\n    this.stzhChange.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked,\n    });\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n    });\n  };\n\n  async componentWillLoad() {\n    this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n    this.errorWatcher(this.error);\n\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"checkbox\");\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, \"error\") || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-checkbox\": true,\n      \"stzh-checkbox--has-description\": descriptionUsed,\n      \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n      \"stzh-checkbox--has-error\": errorUsed,\n      \"stzh-checkbox--is-required\": this.required,\n      \"stzh-checkbox--is-invalid\": this.invalid || errorUsed,\n      \"stzh-checkbox--is-disabled\": this.disabled,\n      \"stzh-checkbox--is-checked\": this.checked,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-checkbox__field-wrapper\">\n            <input\n              class=\"stzh-checkbox__input\"\n              ref={el => (this.input = el as HTMLInputElement)}\n              type=\"checkbox\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              defaultChecked={this.defaultChecked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-checkbox__mark\">\n              <div class=\"stzh-checkbox__check\" aria-hidden=\"true\"></div>\n            </div>\n            <div class=\"stzh-checkbox__label\">\n              {this.label ? (\n                this.label\n              ) : (\n                <span class=\"stzh-checkbox__label-slot\">\n                  <slot></slot>\n                </span>\n              )}\n\n              {!this.hideOptional && (\n                <span class=\"stzh-checkbox__marker\">\n                  <span class=\"stzh-checkbox__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-checkbox__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n\n              {descriptionLongUsed && (\n                <StzhInputDescription\n                  classPrefix=\"stzh-checkbox\"\n                  id={`${this.inputId}-description-long`}\n                  descriptionLong={this.descriptionLong}\n                  descriptionLongTitle={this.descriptionLongTitle}\n                  descriptionLongUsed={true}\n                  moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n                  showError={false}\n                  showDescriptionText={false}\n                />\n              )}\n            </div>\n          </label>\n          {(errorUsed || descriptionUsed) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-checkbox\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLongUsed={false}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CU8kKUrp.js → p-DX8rme7W.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-X46RDuY9.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-5QD-jnDI.js';
 
 const stzhCellCss = () => `:host{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}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::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)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--cell-width:100%;max-width:100%;width:var(--cell-width);flex-basis:var(--cell-width);flex-shrink:0}:host([align=left]){margin-right:auto}:host([align=right]){margin-left:auto}:host([align=middle]){margin-left:auto;margin-right:auto}:host([align-self=start]){align-self:flex-start}:host([align-self=end]){align-self:flex-end}:host([align-self=center]){align-self:center}:host([align-self=baseline]){align-self:baseline}:host([align-self=stretch]){align-self:stretch}:host([span="1"]){--cell-width:8.3333333333%}:host([span="2"]){--cell-width:16.6666666667%}:host([span="3"]){--cell-width:25%}:host([span="4"]){--cell-width:33.3333333333%}:host([span="5"]){--cell-width:41.6666666667%}:host([span="6"]){--cell-width:50%}:host([span="7"]){--cell-width:58.3333333333%}:host([span="8"]){--cell-width:66.6666666667%}:host([span="9"]){--cell-width:75%}:host([span="10"]){--cell-width:83.3333333333%}:host([span="11"]){--cell-width:91.6666666667%}:host([span="12"]){--cell-width:100%}@media screen and (min-width: 600px){:host([span-small="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 600px){:host([span-small="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 600px){:host([span-small="3"]){--cell-width:25%}}@media screen and (min-width: 600px){:host([span-small="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 600px){:host([span-small="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 600px){:host([span-small="6"]){--cell-width:50%}}@media screen and (min-width: 600px){:host([span-small="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 600px){:host([span-small="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 600px){:host([span-small="9"]){--cell-width:75%}}@media screen and (min-width: 600px){:host([span-small="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 600px){:host([span-small="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 600px){:host([span-small="12"]){--cell-width:100%}}@media screen and (min-width: 900px){:host([span-medium="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 900px){:host([span-medium="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 900px){:host([span-medium="3"]){--cell-width:25%}}@media screen and (min-width: 900px){:host([span-medium="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 900px){:host([span-medium="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 900px){:host([span-medium="6"]){--cell-width:50%}}@media screen and (min-width: 900px){:host([span-medium="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 900px){:host([span-medium="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 900px){:host([span-medium="9"]){--cell-width:75%}}@media screen and (min-width: 900px){:host([span-medium="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 900px){:host([span-medium="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 900px){:host([span-medium="12"]){--cell-width:100%}}@media screen and (min-width: 1260px){:host([span-large="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="3"]){--cell-width:25%}}@media screen and (min-width: 1260px){:host([span-large="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="6"]){--cell-width:50%}}@media screen and (min-width: 1260px){:host([span-large="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="9"]){--cell-width:75%}}@media screen and (min-width: 1260px){:host([span-large="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="12"]){--cell-width:100%}}@media screen and (min-width: 1600px){:host([span-ultra="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra="3"]){--cell-width:25%}}@media screen and (min-width: 1600px){:host([span-ultra="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra="6"]){--cell-width:50%}}@media screen and (min-width: 1600px){:host([span-ultra="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra="9"]){--cell-width:75%}}@media screen and (min-width: 1600px){:host([span-ultra="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra="12"]){--cell-width:100%}}.stzh-cell{height:100%;padding-left:calc(var(--stzh-grid-gutter) / 2);padding-right:calc(var(--stzh-grid-gutter) / 2)}@media screen and (min-width: 600px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-small) / 2);padding-right:calc(var(--stzh-grid-gutter-small) / 2)}}@media screen and (min-width: 900px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-medium) / 2);padding-right:calc(var(--stzh-grid-gutter-medium) / 2)}}@media screen and (min-width: 1260px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-large) / 2);padding-right:calc(var(--stzh-grid-gutter-large) / 2)}}@media screen and (min-width: 1600px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-ultra) / 2);padding-right:calc(var(--stzh-grid-gutter-ultra) / 2)}}`;
 
@@ -44,6 +44,6 @@ function defineCustomElement() {
 }
 
 export { StzhCell as S, defineCustomElement as d };
-//# sourceMappingURL=p-CU8kKUrp.js.map
+//# sourceMappingURL=p-DX8rme7W.js.map
 
-//# sourceMappingURL=p-CU8kKUrp.js.map
+//# sourceMappingURL=p-DX8rme7W.js.map

package/dist/components/{p-CU8kKUrp.js.map → p-DX8rme7W.js.map}

@@ -1 +1 @@
-{"file":"p-CU8kKUrp.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,srNAAsrN,CAAC;;MCYrsN,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAkB2B,QAAA,IAAK,CAAA,KAAA,GAAyC,MAAM;;AAGpD,QAAA,IAAS,CAAA,SAAA,GAAqB,MAAM;AAe9D;IAbC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AAClB,aAAA,EAAA,EAED,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-cell/stzh-cell.scss?tag=stzh-cell&encapsulation=shadow","src/components/stzh-cell/stzh-cell.tsx"],"sourcesContent":[":host {\n  // couldn't use cell-span and calcuate the with with css calc\n  // since IE was calculating the width wrongly with certain viewport widths\n  // so calculating it with sass and using the width directly\n  --cell-width: 100%;\n\n  max-width: 100%;\n  width: var(--cell-width);\n  flex-basis: var(--cell-width);\n  flex-shrink: 0;\n}\n\n/* Align variants */\n\n:host([align=\"left\"]) {\n  margin-right: auto;\n}\n\n:host([align=\"right\"]) {\n  margin-left: auto;\n}\n\n:host([align=\"middle\"]) {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Align self variants */\n\n:host([align-self=\"start\"]) {\n  align-self: flex-start;\n}\n\n:host([align-self=\"end\"]) {\n  align-self: flex-end;\n}\n\n:host([align-self=\"center\"]) {\n  align-self: center;\n}\n\n:host([align-self=\"baseline\"]) {\n  align-self: baseline;\n}\n\n:host([align-self=\"stretch\"]) {\n  align-self: stretch;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"]) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{calc(100% / ($gridCells / $i))};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) {\n        --cell-width: #{calc(100% / ($gridCells / $i))};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-cell {\n  height: 100%;\n  padding-left: calc(#{$gridGutter} / 2);\n  padding-right: calc(#{$gridGutter} / 2);\n\n  @include mq($from: small) {\n    padding-left: calc(#{$gridGutterSmall} / 2);\n    padding-right: calc(#{$gridGutterSmall} / 2);\n  }\n\n  @include mq($from: medium) {\n    padding-left: calc(#{$gridGutterMedium} / 2);\n    padding-right: calc(#{$gridGutterMedium} / 2);\n  }\n\n  @include mq($from: large) {\n    padding-left: calc(#{$gridGutterLarge} / 2);\n    padding-right: calc(#{$gridGutterLarge} / 2);\n  }\n\n  @include mq($from: ultra) {\n    padding-left: calc(#{$gridGutterUltra} / 2);\n    padding-right: calc(#{$gridGutterUltra} / 2);\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-cell\",\n  styleUrl: \"stzh-cell.scss\",\n  shadow: true,\n})\nexport class StzhCell {\n  /** Default span of each cell */\n  @Prop({ reflect: true }) span: number;\n  /** Default span of each cell above small breakpoint */\n  @Prop({ reflect: true }) spanSmall: number;\n  /** Default span of each cell above medium breakpoint */\n  @Prop({ reflect: true }) spanMedium: number;\n  /** Default span of each cell above large breakpoint */\n  @Prop({ reflect: true }) spanLarge: number;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop({ reflect: true }) spanUltra: number;\n\n  /** Controlling how cell is aligned in main axis (sets margin: auto to left/right side) */\n  @Prop({ reflect: true }) align: \"none\" | \"left\" | \"right\" | \"middle\" = \"none\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) alignSelf: Layout.AlignSelf = \"auto\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-cell\": true,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DX8rme7W.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,srNAAsrN,CAAC;;MCYrsN,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAkB2B,QAAA,IAAK,CAAA,KAAA,GAAyC,MAAM;;AAGpD,QAAA,IAAS,CAAA,SAAA,GAAqB,MAAM;AAe9D;IAbC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AAClB,aAAA,EAAA,EAED,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-cell/stzh-cell.scss?tag=stzh-cell&encapsulation=shadow","src/components/stzh-cell/stzh-cell.tsx"],"sourcesContent":[":host {\n  // couldn't use cell-span and calcuate the with with css calc\n  // since IE was calculating the width wrongly with certain viewport widths\n  // so calculating it with sass and using the width directly\n  --cell-width: 100%;\n\n  max-width: 100%;\n  width: var(--cell-width);\n  flex-basis: var(--cell-width);\n  flex-shrink: 0;\n}\n\n/* Align variants */\n\n:host([align=\"left\"]) {\n  margin-right: auto;\n}\n\n:host([align=\"right\"]) {\n  margin-left: auto;\n}\n\n:host([align=\"middle\"]) {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Align self variants */\n\n:host([align-self=\"start\"]) {\n  align-self: flex-start;\n}\n\n:host([align-self=\"end\"]) {\n  align-self: flex-end;\n}\n\n:host([align-self=\"center\"]) {\n  align-self: center;\n}\n\n:host([align-self=\"baseline\"]) {\n  align-self: baseline;\n}\n\n:host([align-self=\"stretch\"]) {\n  align-self: stretch;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"]) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{calc(100% / ($gridCells / $i))};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) {\n        --cell-width: #{calc(100% / ($gridCells / $i))};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-cell {\n  height: 100%;\n  padding-left: calc(#{$gridGutter} / 2);\n  padding-right: calc(#{$gridGutter} / 2);\n\n  @include mq($from: small) {\n    padding-left: calc(#{$gridGutterSmall} / 2);\n    padding-right: calc(#{$gridGutterSmall} / 2);\n  }\n\n  @include mq($from: medium) {\n    padding-left: calc(#{$gridGutterMedium} / 2);\n    padding-right: calc(#{$gridGutterMedium} / 2);\n  }\n\n  @include mq($from: large) {\n    padding-left: calc(#{$gridGutterLarge} / 2);\n    padding-right: calc(#{$gridGutterLarge} / 2);\n  }\n\n  @include mq($from: ultra) {\n    padding-left: calc(#{$gridGutterUltra} / 2);\n    padding-right: calc(#{$gridGutterUltra} / 2);\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-cell\",\n  styleUrl: \"stzh-cell.scss\",\n  shadow: true,\n})\nexport class StzhCell {\n  /** Default span of each cell */\n  @Prop({ reflect: true }) span: number;\n  /** Default span of each cell above small breakpoint */\n  @Prop({ reflect: true }) spanSmall: number;\n  /** Default span of each cell above medium breakpoint */\n  @Prop({ reflect: true }) spanMedium: number;\n  /** Default span of each cell above large breakpoint */\n  @Prop({ reflect: true }) spanLarge: number;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop({ reflect: true }) spanUltra: number;\n\n  /** Controlling how cell is aligned in main axis (sets margin: auto to left/right side) */\n  @Prop({ reflect: true }) align: \"none\" | \"left\" | \"right\" | \"middle\" = \"none\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) alignSelf: Layout.AlignSelf = \"auto\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-cell\": true,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-EnVb6m-B.js → p-DZ_hOgVb.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-X46RDuY9.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-5QD-jnDI.js';
 
 const stzhIconCss = () => `:host{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}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::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)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--size:var(--stzh-icon-size);--color:var(--stzh-icon-color);--vertical-align:var(--stzh-icon-vertical-align);display:inline-flex;justify-content:center;align-items:center;color:var(--color);vertical-align:var(--vertical-align);width:var(--size);height:var(--size)}@media print{:host{-webkit-print-color-adjust:exact;print-color-adjust:exact}}.stzh-icon{display:none}.stzh-icon__svg{width:var(--size);height:var(--size)}`;
 
@@ -122,6 +122,6 @@ function defineCustomElement() {
 }
 
 export { StzhIcon as S, defineCustomElement as d };
-//# sourceMappingURL=p-EnVb6m-B.js.map
+//# sourceMappingURL=p-DZ_hOgVb.js.map
 
-//# sourceMappingURL=p-EnVb6m-B.js.map
+//# sourceMappingURL=p-DZ_hOgVb.js.map

package/dist/components/{p-EnVb6m-B.js.map → p-DZ_hOgVb.js.map}

@@ -1 +1 @@
-{"file":"p-EnVb6m-B.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=shadow","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":["/**\n * @prop --size: Icon size\n * @prop --color: Icon color\n *\n * @prop --stzh-icon-size: **Global**: Default icon size. [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n * @prop --stzh-icon-color: **Global**: Icon color\n * @prop --stzh-icon-vertical-align: **Global**: Icon vertical alignment\n */\n\n:host {\n  --size: #{iconSize()};\n  --color: #{$iconColor};\n  --vertical-align: #{$iconVerticalAlign};\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: var(--color);\n  vertical-align: var(--vertical-align);\n  width: var(--size);\n  height: var(--size);\n\n  @media print {\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\n}\n\n.stzh-icon {\n  display: none;\n\n  &__svg {\n    width: var(--size);\n    height: var(--size);\n  }\n}\n","import { Component, Host, h, Prop, Watch, State, Element } from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n// Shared cache for all instances to store fetched SVG icons\nconst iconCache = new Map<string, Promise<string>>();\n\n@Component({\n  tag: \"stzh-icon\",\n  styleUrl: \"stzh-icon.scss\",\n  shadow: true,\n})\nexport class StzhIcon {\n  /**\n   * Icon which should be displayed\n   * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n   */\n  @Prop() name: string = \"\";\n\n  /**\n   * Hidden icon title for screenreader\n   * (usually not needed when e.g. inside links or buttons that have text)\n   */\n  @Prop({ attribute: \"a11y-title\" }) a11yTitle: string = \"\";\n\n  @Element() element: HTMLStzhIconElement;\n\n  @State() svgHtml: string = \"\";\n  @State() iconDisplay: string = \"none\";\n\n  @Watch(\"name\")\n  async nameWatcher(name: string) {\n    this.iconDisplay = \"none\";\n\n    if (name) {\n      if (iconCache.has(name)) {\n        this.svgHtml = await iconCache.get(name)!;\n        this.updateAccessibilityAttributes();\n        this.showIcon();\n      } else {\n        const fetchSvgPromise = fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`)\n          .then(response => {\n            if (response.status === 200) {\n              return response.text();\n            }\n            throw new Error(\"Failed to fetch icon\");\n          })\n          .then(svgString => {\n            const parser = new DOMParser();\n            const svgDoc = parser.parseFromString(svgString, \"image/svg+xml\");\n            const svgElement = svgDoc.documentElement as unknown as SVGElement;\n            svgElement.classList.add(\"stzh-icon__svg\");\n\n            return svgElement.outerHTML;\n          });\n\n        iconCache.set(name, fetchSvgPromise);\n\n        this.svgHtml = await fetchSvgPromise;\n        this.updateAccessibilityAttributes();\n        this.showIcon();\n      }\n    } else {\n      this.svgElement = null;\n      this.svgHtml = \"\";\n    }\n  }\n\n  @Watch(\"a11yTitle\")\n  a11yTitleWatcher(a11yTitle: string) {\n    if (!this.svgElement) return;\n\n    this.svgElement.setAttribute(\"aria-hidden\", a11yTitle ? \"false\" : \"true\");\n    this.svgElement.setAttribute(\"focusable\", a11yTitle ? \"true\" : \"false\");\n    this.svgElement.setAttribute(\"aria-labelledby\", a11yTitle ? `${this.iconId}-title` : null);\n\n    let title = this.svgElement.querySelector(\"title\");\n\n    if (!title) {\n      title = document.createElement(\"title\");\n      title.id = `${this.iconId}-title`;\n      this.svgElement.appendChild(title);\n    }\n\n    title.innerHTML = a11yTitle;\n    this.svgHtml = this.svgElement.outerHTML;\n  }\n\n  private svgElement: SVGElement | null;\n  private iconId: string;\n\n  async componentWillLoad() {\n    this.iconId = `stzh-icon-${iconCounter++}`;\n    await this.nameWatcher(this.name);\n  }\n\n  private updateAccessibilityAttributes() {\n    this.a11yTitleWatcher(this.a11yTitle);\n  }\n\n  private showIcon() {\n    // for some obscure reason we need to delay showing the icon in safari,\n    // otherwise the icon doesn't show up randomly\n    // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)\n    window.setTimeout(() => {\n      this.iconDisplay = \"contents\";\n    }, 0);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"stzh-icon\" style={{ display: this.iconDisplay }} innerHTML={this.svgHtml}></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DZ_hOgVb.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=shadow","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":["/**\n * @prop --size: Icon size\n * @prop --color: Icon color\n *\n * @prop --stzh-icon-size: **Global**: Default icon size. [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n * @prop --stzh-icon-color: **Global**: Icon color\n * @prop --stzh-icon-vertical-align: **Global**: Icon vertical alignment\n */\n\n:host {\n  --size: #{iconSize()};\n  --color: #{$iconColor};\n  --vertical-align: #{$iconVerticalAlign};\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: var(--color);\n  vertical-align: var(--vertical-align);\n  width: var(--size);\n  height: var(--size);\n\n  @media print {\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\n}\n\n.stzh-icon {\n  display: none;\n\n  &__svg {\n    width: var(--size);\n    height: var(--size);\n  }\n}\n","import { Component, Host, h, Prop, Watch, State, Element } from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n// Shared cache for all instances to store fetched SVG icons\nconst iconCache = new Map<string, Promise<string>>();\n\n@Component({\n  tag: \"stzh-icon\",\n  styleUrl: \"stzh-icon.scss\",\n  shadow: true,\n})\nexport class StzhIcon {\n  /**\n   * Icon which should be displayed\n   * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n   */\n  @Prop() name: string = \"\";\n\n  /**\n   * Hidden icon title for screenreader\n   * (usually not needed when e.g. inside links or buttons that have text)\n   */\n  @Prop({ attribute: \"a11y-title\" }) a11yTitle: string = \"\";\n\n  @Element() element: HTMLStzhIconElement;\n\n  @State() svgHtml: string = \"\";\n  @State() iconDisplay: string = \"none\";\n\n  @Watch(\"name\")\n  async nameWatcher(name: string) {\n    this.iconDisplay = \"none\";\n\n    if (name) {\n      if (iconCache.has(name)) {\n        this.svgHtml = await iconCache.get(name)!;\n        this.updateAccessibilityAttributes();\n        this.showIcon();\n      } else {\n        const fetchSvgPromise = fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`)\n          .then(response => {\n            if (response.status === 200) {\n              return response.text();\n            }\n            throw new Error(\"Failed to fetch icon\");\n          })\n          .then(svgString => {\n            const parser = new DOMParser();\n            const svgDoc = parser.parseFromString(svgString, \"image/svg+xml\");\n            const svgElement = svgDoc.documentElement as unknown as SVGElement;\n            svgElement.classList.add(\"stzh-icon__svg\");\n\n            return svgElement.outerHTML;\n          });\n\n        iconCache.set(name, fetchSvgPromise);\n\n        this.svgHtml = await fetchSvgPromise;\n        this.updateAccessibilityAttributes();\n        this.showIcon();\n      }\n    } else {\n      this.svgElement = null;\n      this.svgHtml = \"\";\n    }\n  }\n\n  @Watch(\"a11yTitle\")\n  a11yTitleWatcher(a11yTitle: string) {\n    if (!this.svgElement) return;\n\n    this.svgElement.setAttribute(\"aria-hidden\", a11yTitle ? \"false\" : \"true\");\n    this.svgElement.setAttribute(\"focusable\", a11yTitle ? \"true\" : \"false\");\n    this.svgElement.setAttribute(\"aria-labelledby\", a11yTitle ? `${this.iconId}-title` : null);\n\n    let title = this.svgElement.querySelector(\"title\");\n\n    if (!title) {\n      title = document.createElement(\"title\");\n      title.id = `${this.iconId}-title`;\n      this.svgElement.appendChild(title);\n    }\n\n    title.innerHTML = a11yTitle;\n    this.svgHtml = this.svgElement.outerHTML;\n  }\n\n  private svgElement: SVGElement | null;\n  private iconId: string;\n\n  async componentWillLoad() {\n    this.iconId = `stzh-icon-${iconCounter++}`;\n    await this.nameWatcher(this.name);\n  }\n\n  private updateAccessibilityAttributes() {\n    this.a11yTitleWatcher(this.a11yTitle);\n  }\n\n  private showIcon() {\n    // for some obscure reason we need to delay showing the icon in safari,\n    // otherwise the icon doesn't show up randomly\n    // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)\n    window.setTimeout(() => {\n      this.iconDisplay = \"contents\";\n    }, 0);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"stzh-icon\" style={{ display: this.iconDisplay }} innerHTML={this.svgHtml}></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DvMakgGn.js → p-DfpWfXtU.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-X46RDuY9.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-5QD-jnDI.js';
 import { a as api } from './p-Cpg2gH_9.js';
 import { g as getDefaultExportFromCjs } from './p-E-ZsRS8r.js';
-import { d as defineCustomElement$3 } from './p-DZquFVcX.js';
-import { d as defineCustomElement$2 } from './p-BmkW_Y9y.js';
-import { d as defineCustomElement$1 } from './p-EnVb6m-B.js';
+import { d as defineCustomElement$3 } from './p-Yktwo3G-.js';
+import { d as defineCustomElement$2 } from './p-B7_vqC4s.js';
+import { d as defineCustomElement$1 } from './p-DZ_hOgVb.js';
 
 var iframeResizer$1 = {exports: {}};
 
@@ -3115,6 +3115,6 @@ function defineCustomElement() {
 }
 
 export { StzhIframe as S, defineCustomElement as d };
-//# sourceMappingURL=p-DvMakgGn.js.map
+//# sourceMappingURL=p-DfpWfXtU.js.map
 
-//# sourceMappingURL=p-DvMakgGn.js.map
+//# sourceMappingURL=p-DfpWfXtU.js.map