@oiz/stzh-components 3.2.0-beta1 → 3.2.0

package/dist/components/stzh-card-searchresult.js.map

@@ -1 +1 @@
-{"file":"stzh-card-searchresult.js","mappings":"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","names":["StzhCardSearchresult"],"sources":["src/components/stzh-card-searchresult/stzh-card-searchresult.scss?tag=stzh-card-searchresult&encapsulation=scoped","src/components/stzh-card-searchresult/stzh-card-searchresult.tsx"],"sourcesContent":[":host {\n  --service-background-color: #{$colorSecondary30};\n  --service-color: #{$colorPrimary70};\n\n  --grid-template-areas:\n    \"heading\"\n    \"description\"\n    \"meta\";\n  --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n  --grid-template-columns: minmax(0, 1fr);\n\n  display: grid;\n\n  ::slotted(img) {\n    width: 100%;\n    max-width: 100%;\n  }\n\n  &[has-image] {\n    --grid-template-areas:\n      \"image\"\n      \"heading\"\n      \"description\"\n      \"meta\";\n    --grid-template-rows: repeat(3, auto) minmax(0, 1fr);\n    --grid-template-columns: minmax(0, 1fr);\n\n    @include mq($from: small) {\n      --grid-template-areas:\n        \"heading image\"\n        \"description image\"\n        \"meta image\";\n      --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n      --grid-template-columns: minmax(0, 1fr) minmax(180px, min-content);\n    }\n  }\n\n  &[has-image][image-position=\"right\"] {\n    @include mq($to: small) {\n      --grid-template-areas:\n        \"heading image\"\n        \"description description\"\n        \"meta meta\";\n      --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n      --grid-template-columns: minmax(0, 1fr) minmax(100px, min-content);\n    }\n  }\n}\n\n.stzh-card-searchresult {\n  @include fontSize('milli');\n  position: relative;\n  display: grid;\n  background-color: $colorGrey10;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-rows: var(--grid-template-rows);\n  grid-template-columns: var(--grid-template-columns);\n  color: $colorGrey80;\n\n  &__tag,\n  &__dateline,\n  &__breadcrumb,\n  &__event-infos,\n  &__heading-link-text,\n  &__description,\n  &__meta-wrapper {\n    z-index: 1;\n    position: relative;\n  }\n\n  &__heading-wrapper,\n  &--has-description-wrapper &__description-wrapper,\n  &__meta-wrapper {\n    margin-left: space('medium');\n    margin-right: space('medium');\n    margin-bottom: space('large');\n  }\n\n  &__heading-wrapper {\n    grid-area: heading;\n    display: grid;\n    margin-top: space('xlarge');\n  }\n\n  &__image {\n    display: grid;\n    grid-area: image;\n    width: 100%;\n  }\n\n  &__description-wrapper {\n    grid-area: description;\n  }\n\n  &__meta-wrapper {\n    grid-area: meta;\n  }\n\n  &__meta {\n    overflow: hidden;\n  }\n\n  &__download {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: space('xsmall');\n    overflow: hidden;\n  }\n\n  &__download-button {\n    align-self: flex-end;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: $formInputHeightSmall;\n    height: $formInputHeightSmall;\n    color: $colorPrimary70;\n  }\n\n  &__download-heading {\n    color: $colorPrimary70;\n    text-underline-offset: $linkTextUnderlineOffset;\n    text-decoration-line: $linkTextDecorationLine;\n    text-decoration-thickness: $linkTextDecorationThickness;\n    text-decoration-skip-ink: $linkTextDecorationSkipInk;\n  }\n\n  &__tag,\n  &__topic,\n  &__service,\n  &__event-date-teaser {\n    z-index: 2;\n  }\n\n  &__tag {\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n\n  &__service,\n  &__topic {\n    @include font('heavy');\n    @include fontSize('micro');\n    position: absolute;\n    top: 0;\n    right: 0;\n    background-color: $colorSecondary30;\n    color: $colorPrimary70;\n    padding: space('xsmall') space('medium');\n    text-align: center;\n\n    @include mq($from: small) {\n      min-width: 180px;\n    }\n  }\n\n  &__service {\n    background-color: var(--service-background-color);\n    color: var(--service-color);\n  }\n\n  &__dateline {\n    @include fontSize('micro');\n    margin-bottom: space('small');\n  }\n\n  &__heading {\n    margin-top: 0px;\n    margin-bottom: space('xsmall');\n  }\n\n  &__heading-link {\n    @include font('heavy');\n    @include fontCurve('p1');\n    display: block;\n    color: $colorPrimary70;\n    text-decoration-line: none;\n  }\n\n  &__event-infos {\n    @include fontSize('micro');\n    color: $colorBlack;\n  }\n\n  &:has(#{&}__description:not(:empty)) &__event-infos {\n    margin-bottom: space('small');\n  }\n\n  &__description {\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__breadcrumb {\n    margin-bottom: space('small');\n  }\n\n  &__event-date-teaser {\n    @include fontSize('nano');\n    text-transform: uppercase;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 80px;\n    height: 80px;\n    color: $colorBlack;\n    background-color: $colorSecondary30;\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  &__event-date-teaser-day {\n    @include font('heavy');\n    @include fontSize('hecto');\n    color: $colorPrimary70;\n    margin-top: -7px;\n    margin-bottom: -7px;\n  }\n\n  &__meta-list,\n  &__download-meta-list {\n    @include fontSize('micro');\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    column-gap: space('xsmall');\n    margin-left: calc((#{space('xsmall')} + 1px) / -1);\n  }\n\n  &__meta-list-item,\n  &__download-meta-list-item {\n    display: flex;\n    align-items: center;\n    min-height: 24px;\n    gap: space('xsmall');\n\n    &::before {\n      content: '';\n      display: block;\n      width: 1px;\n      height: 16px;\n      background-color: currentColor;\n    }\n  }\n\n  /* Has link */\n\n  &--has-link &__heading-link {\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    &::before,\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      transition: background-color $baseTransitionAnimationSpeed;\n    }\n\n    &::after {\n      z-index: 10;\n    }\n  }\n\n  &--has-link:has(#{&}__heading-link:hover) &__heading-link {\n    &::before {\n      background-color: $colorSecondary10;\n    }\n  }\n\n  &--has-link:has(#{&}__heading-link:hover) &__tag {\n    --color: #{$colorSecondary60};\n  }\n\n  /* Has breadcrumb */\n\n  &--has-breadcrumb &__heading-wrapper {\n    margin-top: space('xlarge');\n  }\n\n  /* Has tag */\n\n  &--has-tag &__heading-wrapper {\n    margin-top: space('xxxlarge');\n  }\n\n  /* Has topic or service */\n\n  &--has-service &__heading-wrapper,\n  &--has-topic &__heading-wrapper {\n    margin-top: space('xxxxlarge');\n  }\n\n  &--has-service#{&}--has-image-right &__heading-wrapper,\n  &--has-topic#{&}--has-image-right &__heading-wrapper {\n    margin-top: space('xxxlarge');\n  }\n\n  /* Has image (default) */\n\n  &--has-image &__image {\n    z-index: 1;\n    position: relative;\n  }\n\n  &--has-image-default &__heading-wrapper {\n    @include mq($to: small) {\n      margin-top: space('small');\n    }\n  }\n\n  /* Has image right */\n\n  &--has-image-right &__image {\n    @include mq($to: small) {\n      margin-bottom: space('xsmall');\n    }\n  }\n\n  &--has-image-right &__service,\n  &--has-image-right &__topic {\n    position: static;\n  }\n\n  /* Has description wrapper, meta or download */\n\n  &--has-description-wrapper &__heading-wrapper,\n  &--has-meta &__heading-wrapper,\n  &--has-download &__heading-wrapper {\n    margin-bottom: 0px;\n  }\n\n  &--has-meta &__description-wrapper,\n  &--has-download &__description-wrapper {\n    margin-bottom: 0px;\n  }\n\n  &--has-meta &__description,\n  &--has-download &__description {\n    &:not(:empty) {\n      margin-bottom: space('small');\n    }\n  }\n\n  &--has-download &__meta {\n    margin-bottom: space('xsmall');\n  }\n}\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Watch, Fragment } from \"@stencil/core\";\n\nimport {\n  StzhCardSearchresultClickEvent,\n  StzhBreadcrumbItem,\n  StzhDatalistItemEntry,\n  StzhLocaleAdapter,\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot description - Description text (alternative for description property)\n * @slot image - Image\n */\n@Component({\n  tag: \"stzh-card-searchresult\",\n  styleUrl: \"stzh-card-searchresult.scss\",\n  scoped: true,\n})\nexport class StzhCardSearchresult {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\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  /** Download attribute (if href is used) */\n  @Prop() download: 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  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = \"\";\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Description text (alternative for description slot) */\n  @Prop() description: string = \"\";\n\n  /** Tag */\n  @Prop() tag: string;\n\n  /** Topic */\n  @Prop() topic: string;\n\n  /** Service */\n  @Prop() service: string;\n\n  /** Dateline */\n  @Prop() dateline: string;\n\n  /** Meta */\n  @Prop() meta: string[] | string;\n  private _meta: string[];\n\n  /** Breadcrumb items */\n  @Prop() breadcrumbItems: StzhBreadcrumbItem[] | string;\n\n  /** Datalist items */\n  @Prop() datalistItems: StzhDatalistItemEntry[] | string = [];\n\n  /** Event start date */\n  @Prop() eventDateStart: Date | string;\n\n  /** Event start date */\n  @Prop() eventDateEnd: Date | string;\n\n  /** Event location */\n  @Prop() eventLocation: string;\n\n  /** Image position */\n  @Prop({ reflect: true }) imagePosition: \"default\" | \"right\" = \"default\";\n\n  /** Download heading */\n  @Prop() downloadHeading: string;\n\n  /** Download meta */\n  @Prop() downloadMeta: string[] | string;\n  private _downloadMeta: string[];\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhCardSearchresultClickEvent>;\n\n  @Watch(\"meta\")\n  metaWatcher(newValue: string | string[]) {\n    if (!newValue) {\n      this._meta = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._meta = JSON.parse(newValue);\n      } catch (e) {\n        this._meta = [];\n      }\n    } else {\n      this._meta = newValue;\n    }\n  }\n\n  @Watch(\"downloadMeta\")\n  downloadMetaWatcher(newValue: string | string[]) {\n    if (!newValue) {\n      this._downloadMeta = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._downloadMeta = JSON.parse(newValue);\n      } catch (e) {\n        this._downloadMeta = [];\n      }\n    } else {\n      this._downloadMeta = newValue;\n    }\n  }\n\n  private headingLinkElement: HTMLAnchorElement | HTMLDivElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-card-searchresult\",\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.headingLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  async componentWillLoad() {\n    this.metaWatcher(this.meta);\n    this.downloadMetaWatcher(this.downloadMeta);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"card-searchresult\");\n    }\n\n    if (!this.dateAdapter) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n  }\n\n  render() {\n    const hasHeading = !!this.heading || hasSlot(this.element, \"heading\");\n    const hasDescription = !!this.description || hasSlot(this.element, \"description\");\n    const hasImage = hasSlot(this.element, \"image\");\n\n    const eventDateStart = this.eventDateStart && new Date(this.eventDateStart);\n    const eventDateEnd = this.eventDateEnd && new Date(this.eventDateEnd);\n\n    const classes = {\n      \"stzh-card-searchresult\": true,\n      \"stzh-card-searchresult--has-heading\": hasHeading,\n      \"stzh-card-searchresult--has-description\": hasDescription,\n      \"stzh-card-searchresult--has-description-wrapper\": hasDescription || !!eventDateStart || !!this.eventLocation,\n      \"stzh-card-searchresult--has-link\": !!this.href,\n      \"stzh-card-searchresult--has-service\": !!this.service,\n      \"stzh-card-searchresult--has-tag\": !!this.tag,\n      \"stzh-card-searchresult--has-topic\": !!this.topic,\n      \"stzh-card-searchresult--has-image\": hasImage,\n      \"stzh-card-searchresult--has-image-default\": hasImage && this.imagePosition === \"default\",\n      \"stzh-card-searchresult--has-image-right\": hasImage && this.imagePosition === \"right\",\n      \"stzh-card-searchresult--has-meta\": this._meta.length > 0,\n      \"stzh-card-searchresult--has-download\": !!this.downloadHeading || this._downloadMeta.length > 0,\n      \"stzh-card-searchresult--has-breadcrumb\": !!this.breadcrumbItems,\n    };\n\n    const Heading = `h${this.headingLevel}`;\n    const HeadingLink = this.href ? \"a\" : \"div\";\n\n    return (\n      <Host has-image={hasImage}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          {this.tag && <stzh-tag class=\"stzh-card-searchresult__tag\" label={this.tag} nonInteractive={true}></stzh-tag>}\n\n          <div class=\"stzh-card-searchresult__heading-wrapper\">\n            {this.breadcrumbItems && (\n              <stzh-breadcrumb\n                class=\"stzh-card-searchresult__breadcrumb\"\n                items={this.breadcrumbItems}\n                variant=\"teaser\"\n              ></stzh-breadcrumb>\n            )}\n\n            {this.dateline && <div class=\"stzh-card-searchresult__dateline\">{this.dateline}</div>}\n\n            <Heading class=\"stzh-card-searchresult__heading\">\n              <HeadingLink\n                ref={el => (this.headingLinkElement = el as HTMLAnchorElement | HTMLDivElement)}\n                class=\"stzh-card-searchresult__heading-link\"\n                href={this.href}\n                target={this.target}\n                download={this.download}\n                onClick={this.handleCardClick}\n              >\n                <div\n                  class=\"stzh-card-searchresult__heading-link-text\"\n                  ref={el => (this.headingTextElement = el as HTMLDivElement)}\n                >\n                  {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n                </div>\n              </HeadingLink>\n            </Heading>\n          </div>\n\n          <div class=\"stzh-card-searchresult__description-wrapper\">\n            {(eventDateStart || this.eventLocation) && (\n              <div class=\"stzh-card-searchresult__event-infos\">\n                {eventDateStart && (\n                  <div class=\"stzh-card-searchresult__event-date\">\n                    <span>{this.dateAdapter.format(eventDateStart, \"dateLong\")},&nbsp;</span>\n                    {this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, \"time\")}\n                  </div>\n                )}\n                {this.eventLocation && <div class=\"stzh-card-searchresult__event-location\">{this.eventLocation}</div>}\n              </div>\n            )}\n\n            <div class=\"stzh-card-searchresult__description\">\n              {this.description ? this.description : <slot name=\"description\"></slot>}\n            </div>\n          </div>\n\n          <div class=\"stzh-card-searchresult__image\">\n            {eventDateStart && (\n              <div class=\"stzh-card-searchresult__event-date-teaser\">\n                <div class=\"stzh-card-searchresult__event-date-teaser-day-name\">\n                  {this.localization.$globals.dayNamesShort[eventDateStart.getDay()]}\n                </div>\n                <div class=\"stzh-card-searchresult__event-date-teaser-day\">\n                  {eventDateStart.getDate() < 10 && \"0\"}\n                  {eventDateStart.getDate()}\n                </div>\n                <div class=\"stzh-card-searchresult__event-date-teaser-month\">\n                  {this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]}\n                </div>\n              </div>\n            )}\n            {this.topic && <div class=\"stzh-card-searchresult__topic\">{this.topic}</div>}\n            {this.service && <div class=\"stzh-card-searchresult__service\">{this.service}</div>}\n            <slot name=\"image\"></slot>\n          </div>\n\n          {(this._meta.length > 0 || this.datalistItems || !!this.downloadHeading || this._downloadMeta.length > 0) && (\n            <div class=\"stzh-card-searchresult__meta-wrapper\">\n              {this.datalistItems && (\n                <stzh-datalist class=\"stzh-card-searchresult__datalist\" items={this.datalistItems}></stzh-datalist>\n              )}\n\n              {this._meta.length > 0 && (\n                <div class=\"stzh-card-searchresult__meta\">\n                  <div class=\"stzh-card-searchresult__meta-list\">\n                    {this._meta.map(meta => (\n                      <Fragment>\n                        <div class=\"stzh-card-searchresult__meta-list-item\">{meta}</div>\n                      </Fragment>\n                    ))}\n                  </div>\n                </div>\n              )}\n\n              {(!!this.downloadHeading || this._downloadMeta.length > 0) && (\n                <div class=\"stzh-card-searchresult__download\">\n                  <div class=\"stzh-card-searchresult__download-data\">\n                    {this.downloadHeading && (\n                      <div class=\"stzh-card-searchresult__download-heading\">{this.downloadHeading}</div>\n                    )}\n                    {this._downloadMeta.length > 0 && (\n                      <div class=\"stzh-card-searchresult__download-meta-list\">\n                        {this._downloadMeta.map(meta => (\n                          <Fragment>\n                            <div class=\"stzh-card-searchresult__download-meta-list-item\">{meta}</div>\n                          </Fragment>\n                        ))}\n                      </div>\n                    )}\n                  </div>\n\n                  <div class=\"stzh-card-searchresult__download-button\">\n                    <stzh-icon class=\"stzh-card-searchresult__download-icon\" name=\"download\"></stzh-icon>\n                  </div>\n                </div>\n              )}\n            </div>\n          )}\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-card-searchresult.js","mappings":"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","names":["StzhCardSearchresult"],"sources":["src/components/stzh-card-searchresult/stzh-card-searchresult.scss?tag=stzh-card-searchresult&encapsulation=scoped","src/components/stzh-card-searchresult/stzh-card-searchresult.tsx"],"sourcesContent":[":host {\n  --service-background-color: #{$colorSecondary30};\n  --service-color: #{$colorPrimary70};\n\n  --grid-template-areas:\n    \"heading\"\n    \"description\"\n    \"meta\";\n  --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n  --grid-template-columns: minmax(0, 1fr);\n\n  display: grid;\n\n  ::slotted(img) {\n    width: 100%;\n    max-width: 100%;\n  }\n\n  &[has-image] {\n    --grid-template-areas:\n      \"image\"\n      \"heading\"\n      \"description\"\n      \"meta\";\n    --grid-template-rows: repeat(3, auto) minmax(0, 1fr);\n    --grid-template-columns: minmax(0, 1fr);\n\n    @include mq($from: small) {\n      --grid-template-areas:\n        \"heading image\"\n        \"description image\"\n        \"meta image\";\n      --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n      --grid-template-columns: minmax(0, 1fr) minmax(180px, min-content);\n    }\n  }\n\n  &[has-image][image-position=\"right\"] {\n    @include mq($to: small) {\n      --grid-template-areas:\n        \"heading image\"\n        \"description description\"\n        \"meta meta\";\n      --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n      --grid-template-columns: minmax(0, 1fr) minmax(100px, min-content);\n    }\n  }\n}\n\n.stzh-card-searchresult {\n  @include fontSize('milli');\n  position: relative;\n  display: grid;\n  background-color: $colorGrey10;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-rows: var(--grid-template-rows);\n  grid-template-columns: var(--grid-template-columns);\n  color: $colorGrey80;\n\n  &__tag,\n  &__dateline,\n  &__breadcrumb,\n  &__event-infos,\n  &__heading-link-text,\n  &__description,\n  &__meta-wrapper {\n    z-index: 1;\n    position: relative;\n  }\n\n  &__heading-wrapper,\n  &--has-description-wrapper &__description-wrapper,\n  &__meta-wrapper {\n    margin-left: space('medium');\n    margin-right: space('medium');\n    margin-bottom: space('large');\n  }\n\n  &__heading-wrapper {\n    grid-area: heading;\n    display: grid;\n    margin-top: space('xlarge');\n  }\n\n  &__image {\n    display: grid;\n    grid-area: image;\n    width: 100%;\n  }\n\n  &__description-wrapper {\n    grid-area: description;\n  }\n\n  &__meta-wrapper {\n    grid-area: meta;\n  }\n\n  &__meta {\n    overflow: hidden;\n  }\n\n  &__download {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: space('xsmall');\n    overflow: hidden;\n  }\n\n  &__download-button {\n    align-self: flex-end;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: $formInputHeightSmall;\n    height: $formInputHeightSmall;\n    color: $colorPrimary70;\n  }\n\n  &__download-heading {\n    color: $colorPrimary70;\n    text-underline-offset: $linkTextUnderlineOffset;\n    text-decoration-line: $linkTextDecorationLine;\n    text-decoration-thickness: $linkTextDecorationThickness;\n    text-decoration-skip-ink: $linkTextDecorationSkipInk;\n  }\n\n  &__tag,\n  &__topic,\n  &__service,\n  &__event-date-teaser {\n    z-index: 2;\n  }\n\n  &__tag {\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n\n  &__service,\n  &__topic {\n    @include font('heavy');\n    @include fontSize('micro');\n    position: absolute;\n    top: 0;\n    right: 0;\n    background-color: $colorSecondary30;\n    color: $colorPrimary70;\n    padding: space('xsmall') space('medium');\n    text-align: center;\n\n    @include mq($from: small) {\n      min-width: 180px;\n    }\n  }\n\n  &__service {\n    background-color: var(--service-background-color);\n    color: var(--service-color);\n  }\n\n  &__dateline {\n    @include fontSize('micro');\n    margin-bottom: space('small');\n  }\n\n  &__heading {\n    margin-top: 0px;\n    margin-bottom: space('xsmall');\n  }\n\n  &__heading-link {\n    @include font('heavy');\n    @include fontCurve('p1');\n    display: block;\n    color: $colorPrimary70;\n    text-decoration-line: none;\n  }\n\n  &__event-infos {\n    @include fontSize('micro');\n    color: $colorBlack;\n  }\n\n  &:has(#{&}__description:not(:empty)) &__event-infos {\n    margin-bottom: space('small');\n  }\n\n  &__description {\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__breadcrumb {\n    margin-bottom: space('small');\n  }\n\n  &__event-date-teaser {\n    @include fontSize('nano');\n    text-transform: uppercase;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 80px;\n    height: 80px;\n    color: $colorBlack;\n    background-color: $colorSecondary30;\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  &__event-date-teaser-day {\n    @include font('heavy');\n    @include fontSize('hecto');\n    color: $colorPrimary70;\n    margin-top: -7px;\n    margin-bottom: -7px;\n  }\n\n  &__meta-list,\n  &__download-meta-list {\n    @include fontSize('micro');\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    column-gap: space('xsmall');\n    margin-left: calc((#{space('xsmall')} + 1px) / -1);\n  }\n\n  &__meta-list-item,\n  &__download-meta-list-item {\n    display: flex;\n    align-items: center;\n    min-height: 24px;\n    gap: space('xsmall');\n\n    &::before {\n      content: '';\n      display: block;\n      width: 1px;\n      height: 16px;\n      background-color: currentColor;\n    }\n  }\n\n  /* Has link */\n\n  &--has-link &__heading-link {\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    &::before,\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      transition: background-color $baseTransitionAnimationSpeed;\n    }\n\n    &::after {\n      z-index: 10;\n    }\n  }\n\n  &--has-link:has(#{&}__heading-link:hover) &__heading-link {\n    &::before {\n      background-color: $colorSecondary10;\n    }\n  }\n\n  &--has-link:has(#{&}__heading-link:hover) &__tag {\n    --color: #{$colorSecondary60};\n  }\n\n  /* Has breadcrumb */\n\n  &--has-breadcrumb &__heading-wrapper {\n    margin-top: space('xlarge');\n  }\n\n  /* Has tag */\n\n  &--has-tag &__heading-wrapper {\n    margin-top: space('xxxlarge');\n  }\n\n  /* Has topic or service */\n\n  &--has-service &__heading-wrapper,\n  &--has-topic &__heading-wrapper {\n    margin-top: space('xxxxlarge');\n  }\n\n  &--has-service#{&}--has-image-right &__heading-wrapper,\n  &--has-topic#{&}--has-image-right &__heading-wrapper {\n    margin-top: space('xxxlarge');\n  }\n\n  /* Has image (default) */\n\n  &--has-image &__image {\n    z-index: 1;\n    position: relative;\n  }\n\n  &--has-image-default &__heading-wrapper {\n    @include mq($to: small) {\n      margin-top: space('small');\n    }\n  }\n\n  /* Has image right */\n\n  &--has-image-right &__image {\n    @include mq($to: small) {\n      margin-bottom: space('xsmall');\n    }\n  }\n\n  &--has-image-right &__service,\n  &--has-image-right &__topic {\n    position: static;\n  }\n\n  /* Has description wrapper, meta or download */\n\n  &--has-description-wrapper &__heading-wrapper,\n  &--has-meta &__heading-wrapper,\n  &--has-download &__heading-wrapper {\n    margin-bottom: 0px;\n  }\n\n  &--has-meta &__description-wrapper,\n  &--has-download &__description-wrapper {\n    margin-bottom: 0px;\n  }\n\n  &--has-meta &__description,\n  &--has-download &__description {\n    &:not(:empty) {\n      margin-bottom: space('small');\n    }\n  }\n\n  &--has-download &__meta {\n    margin-bottom: space('xsmall');\n  }\n\n  /* Hyphens */\n  &--hyphens &__heading {\n    hyphens: auto;\n  }\n}\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Watch, Fragment } from \"@stencil/core\";\n\nimport {\n  StzhCardSearchresultClickEvent,\n  StzhBreadcrumbItem,\n  StzhDatalistItemEntry,\n  StzhLocaleAdapter,\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot description - Description text (alternative for description property)\n * @slot image - Image\n */\n@Component({\n  tag: \"stzh-card-searchresult\",\n  styleUrl: \"stzh-card-searchresult.scss\",\n  scoped: true,\n})\nexport class StzhCardSearchresult {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\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  /** Download attribute (if href is used) */\n  @Prop() download: 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  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = \"\";\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Description text (alternative for description slot) */\n  @Prop() description: string = \"\";\n\n  /** Tag */\n  @Prop() tag: string;\n\n  /** Topic */\n  @Prop() topic: string;\n\n  /** Service */\n  @Prop() service: string;\n\n  /** Dateline */\n  @Prop() dateline: string;\n\n  /** Meta */\n  @Prop() meta: string[] | string;\n  private _meta: string[];\n\n  /** Breadcrumb items */\n  @Prop() breadcrumbItems: StzhBreadcrumbItem[] | string;\n\n  /** Datalist items */\n  @Prop() datalistItems: StzhDatalistItemEntry[] | string = [];\n\n  /** Event start date */\n  @Prop() eventDateStart: Date | string;\n\n  /** Event start date */\n  @Prop() eventDateEnd: Date | string;\n\n  /** Event location */\n  @Prop() eventLocation: string;\n\n  /** Image position */\n  @Prop({ reflect: true }) imagePosition: \"default\" | \"right\" = \"default\";\n\n  /** Download heading */\n  @Prop() downloadHeading: string;\n\n  /** Download meta */\n  @Prop() downloadMeta: string[] | string;\n  private _downloadMeta: string[];\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  /** Automatic Hyphens */\n  @Prop({ reflect: true }) hyphensEnabled: boolean = false;\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhCardSearchresultClickEvent>;\n\n  @Watch(\"meta\")\n  metaWatcher(newValue: string | string[]) {\n    if (!newValue) {\n      this._meta = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._meta = JSON.parse(newValue);\n      } catch (e) {\n        this._meta = [];\n      }\n    } else {\n      this._meta = newValue;\n    }\n  }\n\n  @Watch(\"downloadMeta\")\n  downloadMetaWatcher(newValue: string | string[]) {\n    if (!newValue) {\n      this._downloadMeta = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._downloadMeta = JSON.parse(newValue);\n      } catch (e) {\n        this._downloadMeta = [];\n      }\n    } else {\n      this._downloadMeta = newValue;\n    }\n  }\n\n  private headingLinkElement: HTMLAnchorElement | HTMLDivElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-card-searchresult\",\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.headingLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  async componentWillLoad() {\n    this.metaWatcher(this.meta);\n    this.downloadMetaWatcher(this.downloadMeta);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"card-searchresult\");\n    }\n\n    if (!this.dateAdapter) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n  }\n\n  render() {\n    const hasHeading = !!this.heading || hasSlot(this.element, \"heading\");\n    const hasDescription = !!this.description || hasSlot(this.element, \"description\");\n    const hasImage = hasSlot(this.element, \"image\");\n\n    const eventDateStart = this.eventDateStart && new Date(this.eventDateStart);\n    const eventDateEnd = this.eventDateEnd && new Date(this.eventDateEnd);\n\n    const classes = {\n      \"stzh-card-searchresult\": true,\n      \"stzh-card-searchresult--has-heading\": hasHeading,\n      \"stzh-card-searchresult--has-description\": hasDescription,\n      \"stzh-card-searchresult--has-description-wrapper\": hasDescription || !!eventDateStart || !!this.eventLocation,\n      \"stzh-card-searchresult--has-link\": !!this.href,\n      \"stzh-card-searchresult--has-service\": !!this.service,\n      \"stzh-card-searchresult--has-tag\": !!this.tag,\n      \"stzh-card-searchresult--has-topic\": !!this.topic,\n      \"stzh-card-searchresult--has-image\": hasImage,\n      \"stzh-card-searchresult--has-image-default\": hasImage && this.imagePosition === \"default\",\n      \"stzh-card-searchresult--has-image-right\": hasImage && this.imagePosition === \"right\",\n      \"stzh-card-searchresult--has-meta\": this._meta.length > 0,\n      \"stzh-card-searchresult--has-download\": !!this.downloadHeading || this._downloadMeta.length > 0,\n      \"stzh-card-searchresult--has-breadcrumb\": !!this.breadcrumbItems,\n      \"stzh-card-searchresult--hyphens\": this.hyphensEnabled,\n    };\n\n    const Heading = `h${this.headingLevel}`;\n    const HeadingLink = this.href ? \"a\" : \"div\";\n\n    return (\n      <Host has-image={hasImage}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          {this.tag && <stzh-tag class=\"stzh-card-searchresult__tag\" label={this.tag} nonInteractive={true}></stzh-tag>}\n\n          <div class=\"stzh-card-searchresult__heading-wrapper\">\n            {this.breadcrumbItems && (\n              <stzh-breadcrumb\n                class=\"stzh-card-searchresult__breadcrumb\"\n                items={this.breadcrumbItems}\n                variant=\"teaser\"\n              ></stzh-breadcrumb>\n            )}\n\n            {this.dateline && <div class=\"stzh-card-searchresult__dateline\">{this.dateline}</div>}\n\n            <Heading class=\"stzh-card-searchresult__heading\">\n              <HeadingLink\n                ref={el => (this.headingLinkElement = el as HTMLAnchorElement | HTMLDivElement)}\n                class=\"stzh-card-searchresult__heading-link\"\n                href={this.href}\n                target={this.target}\n                download={this.download}\n                onClick={this.handleCardClick}\n              >\n                <div\n                  class=\"stzh-card-searchresult__heading-link-text\"\n                  ref={el => (this.headingTextElement = el as HTMLDivElement)}\n                >\n                  {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n                </div>\n              </HeadingLink>\n            </Heading>\n          </div>\n\n          <div class=\"stzh-card-searchresult__description-wrapper\">\n            {(eventDateStart || this.eventLocation) && (\n              <div class=\"stzh-card-searchresult__event-infos\">\n                {eventDateStart && (\n                  <div class=\"stzh-card-searchresult__event-date\">\n                    <span>{this.dateAdapter.format(eventDateStart, \"dateLong\")},&nbsp;</span>\n                    {this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, \"time\")}\n                  </div>\n                )}\n                {this.eventLocation && <div class=\"stzh-card-searchresult__event-location\">{this.eventLocation}</div>}\n              </div>\n            )}\n\n            <div class=\"stzh-card-searchresult__description\">\n              {this.description ? this.description : <slot name=\"description\"></slot>}\n            </div>\n          </div>\n\n          <div class=\"stzh-card-searchresult__image\">\n            {eventDateStart && (\n              <div class=\"stzh-card-searchresult__event-date-teaser\">\n                <div class=\"stzh-card-searchresult__event-date-teaser-day-name\">\n                  {this.localization.$globals.dayNamesShort[eventDateStart.getDay()]}\n                </div>\n                <div class=\"stzh-card-searchresult__event-date-teaser-day\">\n                  {eventDateStart.getDate() < 10 && \"0\"}\n                  {eventDateStart.getDate()}\n                </div>\n                <div class=\"stzh-card-searchresult__event-date-teaser-month\">\n                  {this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]}\n                </div>\n              </div>\n            )}\n            {this.topic && <div class=\"stzh-card-searchresult__topic\">{this.topic}</div>}\n            {this.service && <div class=\"stzh-card-searchresult__service\">{this.service}</div>}\n            <slot name=\"image\"></slot>\n          </div>\n\n          {(this._meta.length > 0 || this.datalistItems || !!this.downloadHeading || this._downloadMeta.length > 0) && (\n            <div class=\"stzh-card-searchresult__meta-wrapper\">\n              {this.datalistItems && (\n                <stzh-datalist class=\"stzh-card-searchresult__datalist\" items={this.datalistItems}></stzh-datalist>\n              )}\n\n              {this._meta.length > 0 && (\n                <div class=\"stzh-card-searchresult__meta\">\n                  <div class=\"stzh-card-searchresult__meta-list\">\n                    {this._meta.map(meta => (\n                      <Fragment>\n                        <div class=\"stzh-card-searchresult__meta-list-item\">{meta}</div>\n                      </Fragment>\n                    ))}\n                  </div>\n                </div>\n              )}\n\n              {(!!this.downloadHeading || this._downloadMeta.length > 0) && (\n                <div class=\"stzh-card-searchresult__download\">\n                  <div class=\"stzh-card-searchresult__download-data\">\n                    {this.downloadHeading && (\n                      <div class=\"stzh-card-searchresult__download-heading\">{this.downloadHeading}</div>\n                    )}\n                    {this._downloadMeta.length > 0 && (\n                      <div class=\"stzh-card-searchresult__download-meta-list\">\n                        {this._downloadMeta.map(meta => (\n                          <Fragment>\n                            <div class=\"stzh-card-searchresult__download-meta-list-item\">{meta}</div>\n                          </Fragment>\n                        ))}\n                      </div>\n                    )}\n                  </div>\n\n                  <div class=\"stzh-card-searchresult__download-button\">\n                    <stzh-icon class=\"stzh-card-searchresult__download-icon\" name=\"download\"></stzh-icon>\n                  </div>\n                </div>\n              )}\n            </div>\n          )}\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-card-superteaser.js

@@ -13,7 +13,7 @@ import { d as defineCustomElement$4 } from './stzh-tag2.js';
 import { d as defineCustomElement$3 } from './stzh-text2.js';
 import { d as defineCustomElement$2 } from './stzh-tooltip2.js';
 
-const stzhCardSuperteaserCss = ".sc-stzh-card-superteaser-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-card-superteaser-h{display:none}.sc-stzh-card-superteaser-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-superteaser-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-superteaser-h *.sc-stzh-card-superteaser,.sc-stzh-card-superteaser-h *.sc-stzh-card-superteaser::before,.sc-stzh-card-superteaser-h *.sc-stzh-card-superteaser::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-card-superteaser-h .has-focus.sc-stzh-card-superteaser{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-card-superteaser-h .stzh-fylingfocus-focused.sc-stzh-card-superteaser{outline-style:none !important}.sc-stzh-card-superteaser-h .stzh-fylingfocus-focused.sc-stzh-card-superteaser::-moz-focus-inner{border:0 !important}.sc-stzh-card-superteaser-h{--service-background-color:var(--stzh-color-secondary30);--service-color:var(--stzh-color-primary70);--grid-template-areas:\"heading\"\n    \"description\"\n    \"meta\";--grid-template-rows:repeat(2, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr);display:grid}.sc-stzh-card-superteaser-h .sc-stzh-card-superteaser-s>img{width:100%;max-width:100%}[has-image].sc-stzh-card-superteaser-h{--grid-template-areas:\"image\"\n    \"heading\"\n    \"description\"\n    \"meta\";--grid-template-rows:repeat(3, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr)}[has-image][image-position=right].sc-stzh-card-superteaser-h{--grid-template-areas:\"heading heading\"\n    \"description description\"\n    \"meta image\";--grid-template-rows:repeat(2, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr) minmax(calc(6.25rem + var(--stzh-space-medium)), min-content)}.stzh-card-superteaser.sc-stzh-card-superteaser{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:grid;background-color:var(--stzh-color-grey10);grid-template-areas:var(--grid-template-areas);grid-template-rows:var(--grid-template-rows);grid-template-columns:var(--grid-template-columns);color:var(--stzh-color-grey80)}.stzh-card-superteaser__tag.sc-stzh-card-superteaser,.stzh-card-superteaser__dateline.sc-stzh-card-superteaser,.stzh-card-superteaser__breadcrumb.sc-stzh-card-superteaser,.stzh-card-superteaser__event-infos.sc-stzh-card-superteaser,.stzh-card-superteaser__heading-link-text.sc-stzh-card-superteaser,.stzh-card-superteaser__description.sc-stzh-card-superteaser,.stzh-card-superteaser__meta-wrapper.sc-stzh-card-superteaser{z-index:1;position:relative}.stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser,.stzh-card-superteaser--has-description-wrapper.sc-stzh-card-superteaser .stzh-card-superteaser__description-wrapper.sc-stzh-card-superteaser,.stzh-card-superteaser__meta-wrapper.sc-stzh-card-superteaser{margin-left:var(--stzh-space-medium);margin-right:var(--stzh-space-medium);margin-bottom:var(--stzh-space-large)}.stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser{grid-area:heading;display:grid;margin-top:var(--stzh-space-xlarge)}.stzh-card-superteaser__image.sc-stzh-card-superteaser,.stzh-card-superteaser__meta-wrapper.sc-stzh-card-superteaser{align-self:end}.stzh-card-superteaser__image.sc-stzh-card-superteaser{display:grid;grid-area:image;width:100%}.stzh-card-superteaser__description-wrapper.sc-stzh-card-superteaser{grid-area:description}.stzh-card-superteaser__meta-wrapper.sc-stzh-card-superteaser{grid-area:meta}.stzh-card-superteaser__meta.sc-stzh-card-superteaser{overflow:hidden}.stzh-card-superteaser__download.sc-stzh-card-superteaser{display:flex;justify-content:space-between;align-items:center;gap:var(--stzh-space-xsmall);overflow:hidden}.stzh-card-superteaser__download-button.sc-stzh-card-superteaser{align-self:flex-end;display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height);color:var(--stzh-color-primary70)}.stzh-card-superteaser__tag.sc-stzh-card-superteaser,.stzh-card-superteaser__topic.sc-stzh-card-superteaser,.stzh-card-superteaser__service.sc-stzh-card-superteaser,.stzh-card-superteaser__event-date-teaser.sc-stzh-card-superteaser{z-index:2}.stzh-card-superteaser__tag.sc-stzh-card-superteaser{position:absolute;left:0;top:0}.stzh-card-superteaser__service.sc-stzh-card-superteaser{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-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:absolute;top:0;right:0;background-color:var(--service-background-color);color:var(--service-color);padding:var(--stzh-space-xsmall) var(--stzh-space-medium);text-align:center}.stzh-card-superteaser__topic.sc-stzh-card-superteaser{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-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:relative;color:var(--stzh-color-primary70);margin-bottom:var(--stzh-space-xsmall)}.stzh-card-superteaser__dateline.sc-stzh-card-superteaser{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-color-black);margin-bottom:var(--stzh-space-xxsmall)}.stzh-card-superteaser__heading.sc-stzh-card-superteaser{margin-top:0px;margin-bottom:var(--stzh-space-small)}.stzh-card-superteaser__heading-link.sc-stzh-card-superteaser{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-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing);display:block;color:var(--stzh-color-primary70);-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-card-superteaser__event-infos.sc-stzh-card-superteaser{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-card-superteaser.sc-stzh-card-superteaser:has(.stzh-card-superteaser__description:not(:empty)) .stzh-card-superteaser__event-infos.sc-stzh-card-superteaser{margin-bottom:var(--stzh-space-small)}.stzh-card-superteaser__description.sc-stzh-card-superteaser:empty{display:none}.stzh-card-superteaser__breadcrumb.sc-stzh-card-superteaser{margin-bottom:var(--stzh-space-small)}.stzh-card-superteaser__event-date-teaser.sc-stzh-card-superteaser{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);text-transform:uppercase;display:flex;flex-direction:column;justify-content:center;align-items:center;width:5.5rem;height:5.5rem;color:var(--stzh-color-black);background-color:var(--stzh-color-secondary30);position:absolute;top:0;right:0}.stzh-card-superteaser__event-date-teaser-day.sc-stzh-card-superteaser{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-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing);color:var(--stzh-color-primary70);margin-top:-0.4375rem;margin-bottom:-0.4375rem}.stzh-card-superteaser__meta-list.sc-stzh-card-superteaser,.stzh-card-superteaser__download-meta-list.sc-stzh-card-superteaser{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);display:flex;align-items:center;flex-wrap:wrap;-moz-column-gap:var(--stzh-space-xsmall);column-gap:var(--stzh-space-xsmall);margin-left:calc((var(--stzh-space-xsmall) + 0.0625rem) / -1)}.stzh-card-superteaser__meta-list-item.sc-stzh-card-superteaser,.stzh-card-superteaser__download-meta-list-item.sc-stzh-card-superteaser{display:flex;align-items:center;min-height:1.5rem;gap:var(--stzh-space-xsmall)}.stzh-card-superteaser__meta-list-item.sc-stzh-card-superteaser::before,.stzh-card-superteaser__download-meta-list-item.sc-stzh-card-superteaser::before{content:\"\";display:block;width:0.0625rem;height:1rem;background-color:currentColor}.stzh-card-superteaser--has-link.sc-stzh-card-superteaser .stzh-card-superteaser__heading-link.sc-stzh-card-superteaser{border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-card-superteaser--has-link.sc-stzh-card-superteaser .stzh-card-superteaser__heading-link.sc-stzh-card-superteaser::before,.stzh-card-superteaser--has-link.sc-stzh-card-superteaser .stzh-card-superteaser__heading-link.sc-stzh-card-superteaser::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%;transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-card-superteaser--has-link.sc-stzh-card-superteaser .stzh-card-superteaser__heading-link.sc-stzh-card-superteaser::after{z-index:10}.stzh-card-superteaser--has-link.sc-stzh-card-superteaser:has(.stzh-card-superteaser__heading-link:hover) .stzh-card-superteaser__heading-link.sc-stzh-card-superteaser::before{background-color:var(--stzh-color-secondary10)}.stzh-card-superteaser--has-link.sc-stzh-card-superteaser:has(.stzh-card-superteaser__heading-link:hover) .stzh-card-superteaser__tag.sc-stzh-card-superteaser{--color:var(--stzh-color-secondary60)}.stzh-card-superteaser--has-tag.sc-stzh-card-superteaser .stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser{margin-top:var(--stzh-space-xxxlarge)}.stzh-card-superteaser--has-service.sc-stzh-card-superteaser .stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser{margin-top:var(--stzh-space-xxxxlarge)}.stzh-card-superteaser--has-service.stzh-card-superteaser--has-image-right.sc-stzh-card-superteaser .stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser{margin-top:var(--stzh-space-xxxlarge)}.stzh-card-superteaser--has-image.sc-stzh-card-superteaser .stzh-card-superteaser__image.sc-stzh-card-superteaser{z-index:1;position:relative}.stzh-card-superteaser--has-image-default.sc-stzh-card-superteaser .stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser{margin-top:var(--stzh-space-medium)}.stzh-card-superteaser--has-image-right.sc-stzh-card-superteaser .stzh-card-superteaser__image.sc-stzh-card-superteaser{margin-bottom:var(--stzh-space-large);padding-right:var(--stzh-space-medium)}.stzh-card-superteaser--has-image-right.sc-stzh-card-superteaser .stzh-card-superteaser__meta-wrapper.sc-stzh-card-superteaser{margin-right:var(--stzh-space-xsmall)}.stzh-card-superteaser--has-image-right.sc-stzh-card-superteaser .stzh-card-superteaser__service.sc-stzh-card-superteaser{position:static}.stzh-card-superteaser--has-description-wrapper.sc-stzh-card-superteaser .stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser,.stzh-card-superteaser--has-meta.sc-stzh-card-superteaser .stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser,.stzh-card-superteaser--has-download.sc-stzh-card-superteaser .stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser{margin-bottom:0px}.stzh-card-superteaser--has-meta.sc-stzh-card-superteaser .stzh-card-superteaser__description-wrapper.sc-stzh-card-superteaser,.stzh-card-superteaser--has-download.sc-stzh-card-superteaser .stzh-card-superteaser__description-wrapper.sc-stzh-card-superteaser{margin-bottom:0px}.stzh-card-superteaser--has-meta.sc-stzh-card-superteaser .stzh-card-superteaser__description.sc-stzh-card-superteaser:not(:empty),.stzh-card-superteaser--has-download.sc-stzh-card-superteaser .stzh-card-superteaser__description.sc-stzh-card-superteaser:not(:empty){margin-bottom:var(--stzh-space-small)}.stzh-card-superteaser--has-download.sc-stzh-card-superteaser .stzh-card-superteaser__meta.sc-stzh-card-superteaser{margin-bottom:var(--stzh-space-xsmall)}";
+const stzhCardSuperteaserCss = ".sc-stzh-card-superteaser-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-card-superteaser-h{display:none}.sc-stzh-card-superteaser-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-superteaser-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-superteaser-h *.sc-stzh-card-superteaser,.sc-stzh-card-superteaser-h *.sc-stzh-card-superteaser::before,.sc-stzh-card-superteaser-h *.sc-stzh-card-superteaser::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-card-superteaser-h .has-focus.sc-stzh-card-superteaser{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-card-superteaser-h .stzh-fylingfocus-focused.sc-stzh-card-superteaser{outline-style:none !important}.sc-stzh-card-superteaser-h .stzh-fylingfocus-focused.sc-stzh-card-superteaser::-moz-focus-inner{border:0 !important}.sc-stzh-card-superteaser-h{--service-background-color:var(--stzh-color-secondary30);--service-color:var(--stzh-color-primary70);--grid-template-areas:\"heading\"\n    \"description\"\n    \"meta\";--grid-template-rows:repeat(2, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr);display:grid}.sc-stzh-card-superteaser-h .sc-stzh-card-superteaser-s>img{width:100%;max-width:100%}[has-image].sc-stzh-card-superteaser-h{--grid-template-areas:\"image\"\n    \"heading\"\n    \"description\"\n    \"meta\";--grid-template-rows:repeat(3, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr)}[has-image][image-position=right].sc-stzh-card-superteaser-h{--grid-template-areas:\"heading heading\"\n    \"description description\"\n    \"meta image\";--grid-template-rows:repeat(2, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr) minmax(calc(6.25rem + var(--stzh-space-medium)), min-content)}.stzh-card-superteaser.sc-stzh-card-superteaser{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:grid;background-color:var(--stzh-color-grey10);grid-template-areas:var(--grid-template-areas);grid-template-rows:var(--grid-template-rows);grid-template-columns:var(--grid-template-columns);color:var(--stzh-color-grey80)}.stzh-card-superteaser__tag.sc-stzh-card-superteaser,.stzh-card-superteaser__dateline.sc-stzh-card-superteaser,.stzh-card-superteaser__breadcrumb.sc-stzh-card-superteaser,.stzh-card-superteaser__event-infos.sc-stzh-card-superteaser,.stzh-card-superteaser__heading-link-text.sc-stzh-card-superteaser,.stzh-card-superteaser__description.sc-stzh-card-superteaser,.stzh-card-superteaser__meta-wrapper.sc-stzh-card-superteaser{z-index:1;position:relative}.stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser,.stzh-card-superteaser--has-description-wrapper.sc-stzh-card-superteaser .stzh-card-superteaser__description-wrapper.sc-stzh-card-superteaser,.stzh-card-superteaser__meta-wrapper.sc-stzh-card-superteaser{margin-left:var(--stzh-space-medium);margin-right:var(--stzh-space-medium);margin-bottom:var(--stzh-space-large)}.stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser{grid-area:heading;display:grid;margin-top:var(--stzh-space-xlarge)}.stzh-card-superteaser__image.sc-stzh-card-superteaser,.stzh-card-superteaser__meta-wrapper.sc-stzh-card-superteaser{align-self:end}.stzh-card-superteaser__image.sc-stzh-card-superteaser{display:grid;grid-area:image;width:100%}.stzh-card-superteaser__description-wrapper.sc-stzh-card-superteaser{grid-area:description}.stzh-card-superteaser__meta-wrapper.sc-stzh-card-superteaser{grid-area:meta}.stzh-card-superteaser__meta.sc-stzh-card-superteaser{overflow:hidden}.stzh-card-superteaser__download.sc-stzh-card-superteaser{display:flex;justify-content:space-between;align-items:center;gap:var(--stzh-space-xsmall);overflow:hidden}.stzh-card-superteaser__download-button.sc-stzh-card-superteaser{align-self:flex-end;display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height);color:var(--stzh-color-primary70)}.stzh-card-superteaser__tag.sc-stzh-card-superteaser,.stzh-card-superteaser__topic.sc-stzh-card-superteaser,.stzh-card-superteaser__service.sc-stzh-card-superteaser,.stzh-card-superteaser__event-date-teaser.sc-stzh-card-superteaser{z-index:2}.stzh-card-superteaser__tag.sc-stzh-card-superteaser{position:absolute;left:0;top:0}.stzh-card-superteaser__service.sc-stzh-card-superteaser{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-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:absolute;top:0;right:0;background-color:var(--service-background-color);color:var(--service-color);padding:var(--stzh-space-xsmall) var(--stzh-space-medium);text-align:center}.stzh-card-superteaser__topic.sc-stzh-card-superteaser{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-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:relative;color:var(--stzh-color-primary70);margin-bottom:var(--stzh-space-xsmall)}.stzh-card-superteaser__dateline.sc-stzh-card-superteaser{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-color-black);margin-bottom:var(--stzh-space-xxsmall)}.stzh-card-superteaser__heading.sc-stzh-card-superteaser{margin-top:0px;margin-bottom:var(--stzh-space-small)}.stzh-card-superteaser__heading-link.sc-stzh-card-superteaser{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-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing);display:block;color:var(--stzh-color-primary70);-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-card-superteaser__event-infos.sc-stzh-card-superteaser{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-card-superteaser.sc-stzh-card-superteaser:has(.stzh-card-superteaser__description:not(:empty)) .stzh-card-superteaser__event-infos.sc-stzh-card-superteaser{margin-bottom:var(--stzh-space-small)}.stzh-card-superteaser__description.sc-stzh-card-superteaser:empty{display:none}.stzh-card-superteaser__breadcrumb.sc-stzh-card-superteaser{margin-bottom:var(--stzh-space-small)}.stzh-card-superteaser__event-date-teaser.sc-stzh-card-superteaser{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);text-transform:uppercase;display:flex;flex-direction:column;justify-content:center;align-items:center;width:5.5rem;height:5.5rem;color:var(--stzh-color-black);background-color:var(--stzh-color-secondary30);position:absolute;top:0;right:0}.stzh-card-superteaser__event-date-teaser-day.sc-stzh-card-superteaser{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-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing);color:var(--stzh-color-primary70);margin-top:-0.4375rem;margin-bottom:-0.4375rem}.stzh-card-superteaser__meta-list.sc-stzh-card-superteaser,.stzh-card-superteaser__download-meta-list.sc-stzh-card-superteaser{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);display:flex;align-items:center;flex-wrap:wrap;-moz-column-gap:var(--stzh-space-xsmall);column-gap:var(--stzh-space-xsmall);margin-left:calc((var(--stzh-space-xsmall) + 0.0625rem) / -1)}.stzh-card-superteaser__meta-list-item.sc-stzh-card-superteaser,.stzh-card-superteaser__download-meta-list-item.sc-stzh-card-superteaser{display:flex;align-items:center;min-height:1.5rem;gap:var(--stzh-space-xsmall)}.stzh-card-superteaser__meta-list-item.sc-stzh-card-superteaser::before,.stzh-card-superteaser__download-meta-list-item.sc-stzh-card-superteaser::before{content:\"\";display:block;width:0.0625rem;height:1rem;background-color:currentColor}.stzh-card-superteaser--has-link.sc-stzh-card-superteaser .stzh-card-superteaser__heading-link.sc-stzh-card-superteaser{border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-card-superteaser--has-link.sc-stzh-card-superteaser .stzh-card-superteaser__heading-link.sc-stzh-card-superteaser::before,.stzh-card-superteaser--has-link.sc-stzh-card-superteaser .stzh-card-superteaser__heading-link.sc-stzh-card-superteaser::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%;transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-card-superteaser--has-link.sc-stzh-card-superteaser .stzh-card-superteaser__heading-link.sc-stzh-card-superteaser::after{z-index:10}.stzh-card-superteaser--has-link.sc-stzh-card-superteaser:has(.stzh-card-superteaser__heading-link:hover) .stzh-card-superteaser__heading-link.sc-stzh-card-superteaser::before{background-color:var(--stzh-color-secondary10)}.stzh-card-superteaser--has-link.sc-stzh-card-superteaser:has(.stzh-card-superteaser__heading-link:hover) .stzh-card-superteaser__tag.sc-stzh-card-superteaser{--color:var(--stzh-color-secondary60)}.stzh-card-superteaser--has-tag.sc-stzh-card-superteaser .stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser{margin-top:var(--stzh-space-xxxlarge)}.stzh-card-superteaser--has-service.sc-stzh-card-superteaser .stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser{margin-top:var(--stzh-space-xxxxlarge)}.stzh-card-superteaser--has-service.stzh-card-superteaser--has-image-right.sc-stzh-card-superteaser .stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser{margin-top:var(--stzh-space-xxxlarge)}.stzh-card-superteaser--has-image.sc-stzh-card-superteaser .stzh-card-superteaser__image.sc-stzh-card-superteaser{z-index:1;position:relative}.stzh-card-superteaser--has-image-default.sc-stzh-card-superteaser .stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser{margin-top:var(--stzh-space-medium)}.stzh-card-superteaser--has-image-right.sc-stzh-card-superteaser .stzh-card-superteaser__image.sc-stzh-card-superteaser{margin-bottom:var(--stzh-space-large);padding-right:var(--stzh-space-medium)}.stzh-card-superteaser--has-image-right.sc-stzh-card-superteaser .stzh-card-superteaser__meta-wrapper.sc-stzh-card-superteaser{margin-right:var(--stzh-space-xsmall)}.stzh-card-superteaser--has-image-right.sc-stzh-card-superteaser .stzh-card-superteaser__service.sc-stzh-card-superteaser{position:static}.stzh-card-superteaser--has-description-wrapper.sc-stzh-card-superteaser .stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser,.stzh-card-superteaser--has-meta.sc-stzh-card-superteaser .stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser,.stzh-card-superteaser--has-download.sc-stzh-card-superteaser .stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser{margin-bottom:0px}.stzh-card-superteaser--has-meta.sc-stzh-card-superteaser .stzh-card-superteaser__description-wrapper.sc-stzh-card-superteaser,.stzh-card-superteaser--has-download.sc-stzh-card-superteaser .stzh-card-superteaser__description-wrapper.sc-stzh-card-superteaser{margin-bottom:0px}.stzh-card-superteaser--has-meta.sc-stzh-card-superteaser .stzh-card-superteaser__description.sc-stzh-card-superteaser:not(:empty),.stzh-card-superteaser--has-download.sc-stzh-card-superteaser .stzh-card-superteaser__description.sc-stzh-card-superteaser:not(:empty){margin-bottom:var(--stzh-space-small)}.stzh-card-superteaser--has-download.sc-stzh-card-superteaser .stzh-card-superteaser__meta.sc-stzh-card-superteaser{margin-bottom:var(--stzh-space-xsmall)}.stzh-card-superteaser--hyphens.sc-stzh-card-superteaser .stzh-card-superteaser__heading.sc-stzh-card-superteaser{-webkit-hyphens:auto;hyphens:auto}";
 
 const StzhCardSuperteaser$1 = /*@__PURE__*/ proxyCustomElement(class StzhCardSuperteaser extends HTMLElement {
   constructor() {
@@ -24,7 +24,7 @@ const StzhCardSuperteaser$1 = /*@__PURE__*/ proxyCustomElement(class StzhCardSup
       this.stzhClick.emit({
         component: "stzh-card-superteaser",
         originalEvent,
-        href: this.href
+        href: this.href,
       });
     };
     this.localization = undefined;
@@ -49,6 +49,7 @@ const StzhCardSuperteaser$1 = /*@__PURE__*/ proxyCustomElement(class StzhCardSup
     this.downloadHeading = undefined;
     this.downloadMeta = undefined;
     this.dateAdapter = undefined;
+    this.hyphensEnabled = false;
   }
   metaWatcher(newValue) {
     if (!newValue) {
@@ -102,9 +103,9 @@ const StzhCardSuperteaser$1 = /*@__PURE__*/ proxyCustomElement(class StzhCardSup
     }
   }
   render() {
-    const hasHeading = !!this.heading || hasSlot(this.element, 'heading');
-    const hasDescription = !!this.description || hasSlot(this.element, 'description');
-    const hasImage = hasSlot(this.element, 'image');
+    const hasHeading = !!this.heading || hasSlot(this.element, "heading");
+    const hasDescription = !!this.description || hasSlot(this.element, "description");
+    const hasImage = hasSlot(this.element, "image");
     const eventDateStart = this.eventDateStart && new Date(this.eventDateStart);
     const eventDateEnd = this.eventDateEnd && new Date(this.eventDateEnd);
     const classes = {
@@ -122,24 +123,11 @@ const StzhCardSuperteaser$1 = /*@__PURE__*/ proxyCustomElement(class StzhCardSup
       "stzh-card-superteaser--has-meta": this._meta.length > 0,
       "stzh-card-superteaser--has-download": !!this.downloadHeading || this._downloadMeta.length > 0,
       "stzh-card-superteaser--has-breadcrumb": !!this.breadcrumbItems,
+      "stzh-card-superteaser--hyphens": this.hyphensEnabled,
     };
     const Heading = `h${this.headingLevel}`;
     const HeadingLink = this.href ? "a" : "div";
-    return (h(Host, { "has-image": hasImage }, h("article", { class: classes, "aria-label": this.heading, role: "listitem" }, this.tag &&
-      h("stzh-tag", { class: "stzh-card-superteaser__tag", label: this.tag, nonInteractive: true }), h("div", { class: "stzh-card-superteaser__heading-wrapper" }, this.breadcrumbItems &&
-      h("stzh-breadcrumb", { class: "stzh-card-superteaser__breadcrumb", items: this.breadcrumbItems, variant: "teaser" }), this.dateline &&
-      h("div", { class: "stzh-card-superteaser__dateline" }, this.dateline), this.topic
-      && h("div", { class: "stzh-card-superteaser__topic" }, this.topic), h(Heading, { class: "stzh-card-superteaser__heading" }, h(HeadingLink, { ref: (el) => (this.headingLinkElement = el), class: "stzh-card-superteaser__heading-link", href: this.href, target: this.target, download: this.download, onClick: this.handleCardClick }, h("div", { class: "stzh-card-superteaser__heading-link-text", ref: (el) => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" }))))), h("div", { class: "stzh-card-superteaser__description-wrapper" }, (eventDateStart || this.eventLocation) &&
-      h("div", { class: "stzh-card-superteaser__event-infos" }, eventDateStart &&
-        h("div", { class: "stzh-card-superteaser__event-date" }, h("span", null, this.dateAdapter.format(eventDateStart, "dateLong"), ",\u00A0"), this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, "time")), this.eventLocation &&
-        h("div", { class: "stzh-card-superteaser__event-location" }, this.eventLocation)), h("div", { class: "stzh-card-superteaser__description" }, this.description ? this.description : h("slot", { name: "description" }))), h("div", { class: "stzh-card-superteaser__image" }, eventDateStart &&
-      h("div", { class: "stzh-card-superteaser__event-date-teaser" }, h("div", { class: "stzh-card-superteaser__event-date-teaser-day-name" }, this.localization.$globals.dayNamesShort[eventDateStart.getDay()]), h("div", { class: "stzh-card-superteaser__event-date-teaser-day" }, eventDateStart.getDate() < 10 && '0', eventDateStart.getDate()), h("div", { class: "stzh-card-superteaser__event-date-teaser-month" }, this.localization.$globals.monthNamesShort[eventDateStart.getMonth()])), this.service && h("div", { class: "stzh-card-superteaser__service" }, this.service), h("slot", { name: "image" })), (this._meta.length > 0 || this.datalistItems || !!this.downloadHeading || this._downloadMeta.length > 0) &&
-      h("div", { class: "stzh-card-superteaser__meta-wrapper" }, this.datalistItems &&
-        h("stzh-datalist", { class: "stzh-card-searchresult__datalist", items: this.datalistItems }), this._meta.length > 0 &&
-        h("div", { class: "stzh-card-superteaser__meta" }, h("div", { class: "stzh-card-superteaser__meta-list" }, this._meta.map((meta) => h(Fragment, null, h("div", { class: "stzh-card-superteaser__meta-list-item" }, meta))))), (!!this.downloadHeading || this._downloadMeta.length > 0) &&
-        h("div", { class: "stzh-card-superteaser__download" }, h("div", { class: "stzh-card-superteaser__download-data" }, this.downloadHeading &&
-          h("div", { class: "stzh-card-superteaser__download-heading" }, this.downloadHeading), this._downloadMeta.length > 0 &&
-          h("div", { class: "stzh-card-superteaser__download-meta-list" }, this._downloadMeta.map((meta) => h(Fragment, null, h("div", { class: "stzh-card-superteaser__download-meta-list-item" }, meta))))), h("div", { class: "stzh-card-superteaser__download-button" }, h("stzh-icon", { class: "stzh-card-superteaser__download-icon", name: "download" })))))));
+    return (h(Host, { "has-image": hasImage }, h("article", { class: classes, "aria-label": this.heading, role: "listitem" }, this.tag && h("stzh-tag", { class: "stzh-card-superteaser__tag", label: this.tag, nonInteractive: true }), h("div", { class: "stzh-card-superteaser__heading-wrapper" }, this.breadcrumbItems && (h("stzh-breadcrumb", { class: "stzh-card-superteaser__breadcrumb", items: this.breadcrumbItems, variant: "teaser" })), this.dateline && h("div", { class: "stzh-card-superteaser__dateline" }, this.dateline), this.topic && h("div", { class: "stzh-card-superteaser__topic" }, this.topic), h(Heading, { class: "stzh-card-superteaser__heading" }, h(HeadingLink, { ref: el => (this.headingLinkElement = el), class: "stzh-card-superteaser__heading-link", href: this.href, target: this.target, download: this.download, onClick: this.handleCardClick }, h("div", { class: "stzh-card-superteaser__heading-link-text", ref: el => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" }))))), h("div", { class: "stzh-card-superteaser__description-wrapper" }, (eventDateStart || this.eventLocation) && (h("div", { class: "stzh-card-superteaser__event-infos" }, eventDateStart && (h("div", { class: "stzh-card-superteaser__event-date" }, h("span", null, this.dateAdapter.format(eventDateStart, "dateLong"), ",\u00A0"), this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, "time"))), this.eventLocation && h("div", { class: "stzh-card-superteaser__event-location" }, this.eventLocation))), h("div", { class: "stzh-card-superteaser__description" }, this.description ? this.description : h("slot", { name: "description" }))), h("div", { class: "stzh-card-superteaser__image" }, eventDateStart && (h("div", { class: "stzh-card-superteaser__event-date-teaser" }, h("div", { class: "stzh-card-superteaser__event-date-teaser-day-name" }, this.localization.$globals.dayNamesShort[eventDateStart.getDay()]), h("div", { class: "stzh-card-superteaser__event-date-teaser-day" }, eventDateStart.getDate() < 10 && "0", eventDateStart.getDate()), h("div", { class: "stzh-card-superteaser__event-date-teaser-month" }, this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]))), this.service && h("div", { class: "stzh-card-superteaser__service" }, this.service), h("slot", { name: "image" })), (this._meta.length > 0 || this.datalistItems || !!this.downloadHeading || this._downloadMeta.length > 0) && (h("div", { class: "stzh-card-superteaser__meta-wrapper" }, this.datalistItems && (h("stzh-datalist", { class: "stzh-card-searchresult__datalist", items: this.datalistItems })), this._meta.length > 0 && (h("div", { class: "stzh-card-superteaser__meta" }, h("div", { class: "stzh-card-superteaser__meta-list" }, this._meta.map(meta => (h(Fragment, null, h("div", { class: "stzh-card-superteaser__meta-list-item" }, meta))))))), (!!this.downloadHeading || this._downloadMeta.length > 0) && (h("div", { class: "stzh-card-superteaser__download" }, h("div", { class: "stzh-card-superteaser__download-data" }, this.downloadHeading && (h("div", { class: "stzh-card-superteaser__download-heading" }, this.downloadHeading)), this._downloadMeta.length > 0 && (h("div", { class: "stzh-card-superteaser__download-meta-list" }, this._downloadMeta.map(meta => (h(Fragment, null, h("div", { class: "stzh-card-superteaser__download-meta-list-item" }, meta))))))), h("div", { class: "stzh-card-superteaser__download-button" }, h("stzh-icon", { class: "stzh-card-superteaser__download-icon", name: "download" })))))))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -169,7 +157,8 @@ const StzhCardSuperteaser$1 = /*@__PURE__*/ proxyCustomElement(class StzhCardSup
     "imagePosition": [513, "image-position"],
     "downloadHeading": [1, "download-heading"],
     "downloadMeta": [1, "download-meta"],
-    "dateAdapter": [16]
+    "dateAdapter": [16],
+    "hyphensEnabled": [516, "hyphens-enabled"]
   }, undefined, {
     "meta": ["metaWatcher"],
     "downloadMeta": ["downloadMetaWatcher"]

package/dist/components/stzh-card-superteaser.js.map

@@ -1 +1 @@
-{"file":"stzh-card-superteaser.js","mappings":"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","names":["StzhCardSuperteaser"],"sources":["src/components/stzh-card-superteaser/stzh-card-superteaser.scss?tag=stzh-card-superteaser&encapsulation=scoped","src/components/stzh-card-superteaser/stzh-card-superteaser.tsx"],"sourcesContent":[":host {\n  --service-background-color: #{$colorSecondary30};\n  --service-color: #{$colorPrimary70};\n\n  --grid-template-areas:\n    \"heading\"\n    \"description\"\n    \"meta\";\n  --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n  --grid-template-columns: minmax(0, 1fr);\n\n  display: grid;\n\n  ::slotted(img) {\n    width: 100%;\n    max-width: 100%;\n  }\n\n  &[has-image] {\n    --grid-template-areas:\n      \"image\"\n      \"heading\"\n      \"description\"\n      \"meta\";\n    --grid-template-rows: repeat(3, auto) minmax(0, 1fr);\n    --grid-template-columns: minmax(0, 1fr);\n  }\n\n  &[has-image][image-position=\"right\"] {\n    --grid-template-areas:\n      \"heading heading\"\n      \"description description\"\n      \"meta image\";\n    --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n    --grid-template-columns: minmax(0, 1fr) minmax(calc(100px + #{space('medium')}), min-content);\n  }\n}\n\n.stzh-card-superteaser {\n  @include fontSize('milli');\n  position: relative;\n  display: grid;\n  background-color: $colorGrey10;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-rows: var(--grid-template-rows);\n  grid-template-columns: var(--grid-template-columns);\n  color: $colorGrey80;\n\n  &__tag,\n  &__dateline,\n  &__breadcrumb,\n  &__event-infos,\n  &__heading-link-text,\n  &__description,\n  &__meta-wrapper {\n    z-index: 1;\n    position: relative;\n  }\n\n  &__heading-wrapper,\n  &--has-description-wrapper &__description-wrapper,\n  &__meta-wrapper {\n    margin-left: space('medium');\n    margin-right: space('medium');\n    margin-bottom: space('large');\n  }\n\n  &__heading-wrapper {\n    grid-area: heading;\n    display: grid;\n    margin-top: space('xlarge');\n  }\n\n  &__image,\n  &__meta-wrapper {\n    align-self: end;\n  }\n\n  &__image {\n    display: grid;\n    grid-area: image;\n    width: 100%;\n  }\n\n  &__description-wrapper {\n    grid-area: description;\n  }\n\n  &__meta-wrapper {\n    grid-area: meta;\n  }\n\n  &__meta {\n    overflow: hidden;\n  }\n\n  &__download {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: space('xsmall');\n    overflow: hidden;\n  }\n\n  &__download-button {\n    align-self: flex-end;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: $formInputHeightSmall;\n    height: $formInputHeightSmall;\n    color: $colorPrimary70;\n  }\n\n  // &__download-heading {\n  //   color: $colorPrimary70;\n  //   text-underline-offset: $linkTextUnderlineOffset;\n  //   text-decoration-line: $linkTextDecorationLine;\n  //   text-decoration-thickness: $linkTextDecorationThickness;\n  //   text-decoration-skip-ink: $linkTextDecorationSkipInk;\n  // }\n\n  &__tag,\n  &__topic,\n  &__service,\n  &__event-date-teaser {\n    z-index: 2;\n  }\n\n  &__tag {\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n\n  &__service {\n    @include font('heavy');\n    @include fontSize('micro');\n    position: absolute;\n    top: 0;\n    right: 0;\n    background-color: var(--service-background-color);\n    color: var(--service-color);\n    padding: space('xsmall') space('medium');\n    text-align: center;\n  }\n\n  &__topic {\n    @include font('heavy');\n    @include fontSize('micro');\n    position: relative;\n    color: $colorPrimary70;\n    margin-bottom: space('xsmall');\n  }\n\n  &__dateline {\n    @include fontSize('micro');\n    color: $colorBlack;\n    margin-bottom: space('xxsmall');\n  }\n\n  &__heading {\n    margin-top: 0px;\n    margin-bottom: space('small');\n  }\n\n  &__heading-link {\n    @include font('heavy');\n    @include fontSize('deca');\n    display: block;\n    color: $colorPrimary70;\n    text-decoration-line: none;\n  }\n\n  &__event-infos {\n    @include fontSize('micro');\n  }\n\n  &:has(#{&}__description:not(:empty)) &__event-infos {\n    margin-bottom: space('small');\n  }\n\n  &__description {\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__breadcrumb {\n    margin-bottom: space('small');\n  }\n\n  &__event-date-teaser {\n    @include fontSize('nano');\n    text-transform: uppercase;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 88px;\n    height: 88px;\n    color: $colorBlack;\n    background-color: $colorSecondary30;\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  &__event-date-teaser-day {\n    @include font('heavy');\n    @include fontSize('hecto');\n    color: $colorPrimary70;\n    margin-top: -7px;\n    margin-bottom: -7px;\n  }\n\n  &__meta-list,\n  &__download-meta-list {\n    @include fontSize('micro');\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    column-gap: space('xsmall');\n    margin-left: calc((#{space('xsmall')} + 1px) / -1);\n  }\n\n  &__meta-list-item,\n  &__download-meta-list-item {\n    display: flex;\n    align-items: center;\n    min-height: 24px;\n    gap: space('xsmall');\n\n    &::before {\n      content: '';\n      display: block;\n      width: 1px;\n      height: 16px;\n      background-color: currentColor;\n    }\n  }\n\n  /* Has link */\n\n  &--has-link &__heading-link {\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    &::before,\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      transition: background-color $baseTransitionAnimationSpeed;\n    }\n\n    &::after {\n      z-index: 10;\n    }\n  }\n\n  &--has-link:has(#{&}__heading-link:hover) &__heading-link {\n    &::before {\n      background-color: $colorSecondary10;\n    }\n  }\n\n  &--has-link:has(#{&}__heading-link:hover) &__tag {\n    --color: #{$colorSecondary60};\n  }\n\n  /* Has tag */\n\n  &--has-tag &__heading-wrapper {\n    margin-top: space('xxxlarge');\n  }\n\n  /* Has service */\n\n  &--has-service &__heading-wrapper {\n    margin-top: space('xxxxlarge');\n  }\n\n  &--has-service#{&}--has-image-right &__heading-wrapper {\n    margin-top: space('xxxlarge');\n  }\n\n  /* Has image (default) */\n\n  &--has-image &__image {\n    z-index: 1;\n    position: relative;\n  }\n\n  &--has-image-default &__heading-wrapper {\n    margin-top: space('medium');\n  }\n\n  /* Has image right */\n\n  &--has-image-right &__image {\n    margin-bottom: space('large');\n    padding-right: space('medium');\n  }\n\n  &--has-image-right &__meta-wrapper {\n    margin-right: space('xsmall');\n  }\n\n  &--has-image-right &__service {\n    position: static;\n  }\n\n  /* Has description wrapper, meta or download */\n\n  &--has-description-wrapper &__heading-wrapper,\n  &--has-meta &__heading-wrapper,\n  &--has-download &__heading-wrapper {\n    margin-bottom: 0px;\n  }\n\n  &--has-meta &__description-wrapper,\n  &--has-download &__description-wrapper {\n    margin-bottom: 0px;\n  }\n\n  &--has-meta &__description,\n  &--has-download &__description {\n    &:not(:empty) {\n      margin-bottom: space('small');\n    }\n  }\n\n  &--has-download &__meta {\n    margin-bottom: space('xsmall');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Fragment\n} from \"@stencil/core\";\n\nimport {\n  StzhCardSuperteaserClickEvent,\n  StzhBreadcrumbItem,\n  StzhDatalistItemEntry,\n  StzhLocaleAdapter\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nimport { StzhCardSuperteaserLocalizedText } from './stzh-card-superteaser.localization';\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot description - Description text (alternative for description property)\n * @slot image - Image\n */\n@Component({\n  tag: \"stzh-card-superteaser\",\n  styleUrl: \"stzh-card-superteaser.scss\",\n  scoped: true\n})\nexport class StzhCardSuperteaser {\n  /** Translation strings */\n  @Prop() localization: StzhCardSuperteaserLocalizedText;\n\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  /** Download attribute (if href is used) */\n  @Prop() download: 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  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = \"\";\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Description text (alternative for description slot) */\n  @Prop() description: string = \"\";\n\n  /** Tag */\n  @Prop() tag: string;\n\n  /** Topic */\n  @Prop() topic: string;\n\n  /** Service */\n  @Prop() service: string;\n\n  /** Dateline */\n  @Prop() dateline: string;\n\n  /** Meta */\n  @Prop() meta: string[] | string;\n  private _meta: string[];\n\n  /** Breadcrumb items */\n  @Prop() breadcrumbItems: StzhBreadcrumbItem[] | string;\n\n  /** Datalist items */\n  @Prop() datalistItems: StzhDatalistItemEntry[] | string = [];\n\n  /** Event start date */\n  @Prop() eventDateStart: Date | string;\n\n  /** Event start date */\n  @Prop() eventDateEnd: Date | string;\n\n  /** Event location */\n  @Prop() eventLocation: string;\n\n  /** Image position */\n  @Prop({ reflect: true }) imagePosition: \"default\" | \"right\" = \"default\";\n\n  /** Download heading */\n  @Prop() downloadHeading: string;\n\n  /** Download meta */\n  @Prop() downloadMeta: string[] | string;\n  private _downloadMeta: string[];\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhCardSuperteaserClickEvent>;\n\n  @Watch(\"meta\")\n  metaWatcher(newValue: string | string[]) {\n    if (!newValue) {\n      this._meta = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._meta = JSON.parse(newValue);\n      } catch (e) {\n        this._meta = [];\n      }\n    } else {\n      this._meta = newValue;\n    }\n  }\n\n  @Watch(\"downloadMeta\")\n  downloadMetaWatcher(newValue: string | string[]) {\n    if (!newValue) {\n      this._downloadMeta = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._downloadMeta = JSON.parse(newValue);\n      } catch (e) {\n        this._downloadMeta = [];\n      }\n    } else {\n      this._downloadMeta = newValue;\n    }\n  }\n\n  private headingLinkElement: HTMLAnchorElement | HTMLDivElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-card-superteaser\",\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.headingLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  async componentWillLoad() {\n    this.metaWatcher(this.meta);\n    this.downloadMetaWatcher(this.downloadMeta);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"card-superteaser\");\n    }\n\n    if (!this.dateAdapter) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n  }\n\n  render() {\n    const hasHeading = !!this.heading || hasSlot(this.element, 'heading');\n    const hasDescription = !!this.description || hasSlot(this.element, 'description');\n    const hasImage = hasSlot(this.element, 'image');\n\n    const eventDateStart = this.eventDateStart && new Date(this.eventDateStart);\n    const eventDateEnd = this.eventDateEnd && new Date(this.eventDateEnd);\n\n    const classes = {\n      \"stzh-card-superteaser\": true,\n      \"stzh-card-superteaser--has-heading\": hasHeading,\n      \"stzh-card-superteaser--has-description\": hasDescription,\n      \"stzh-card-superteaser--has-description-wrapper\": hasDescription || !!eventDateStart || !!this.eventLocation,\n      \"stzh-card-superteaser--has-link\": !!this.href,\n      \"stzh-card-superteaser--has-service\": !!this.service,\n      \"stzh-card-superteaser--has-tag\": !!this.tag,\n      \"stzh-card-superteaser--has-topic\": !!this.topic,\n      \"stzh-card-superteaser--has-image\": hasImage,\n      \"stzh-card-superteaser--has-image-default\": hasImage && this.imagePosition === \"default\",\n      \"stzh-card-superteaser--has-image-right\": hasImage && this.imagePosition === \"right\",\n      \"stzh-card-superteaser--has-meta\": this._meta.length > 0,\n      \"stzh-card-superteaser--has-download\": !!this.downloadHeading || this._downloadMeta.length > 0,\n      \"stzh-card-superteaser--has-breadcrumb\": !!this.breadcrumbItems,\n    };\n\n    const Heading = `h${this.headingLevel}`;\n    const HeadingLink = this.href ? \"a\" : \"div\";\n\n    return (\n      <Host has-image={hasImage}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          {this.tag &&\n            <stzh-tag\n              class=\"stzh-card-superteaser__tag\"\n              label={this.tag}\n              nonInteractive={true}\n            ></stzh-tag>\n          }\n\n          <div class=\"stzh-card-superteaser__heading-wrapper\">\n            {this.breadcrumbItems &&\n              <stzh-breadcrumb\n                class=\"stzh-card-superteaser__breadcrumb\"\n                items={this.breadcrumbItems}\n                variant=\"teaser\"\n              ></stzh-breadcrumb>\n            }\n\n            {this.dateline &&\n              <div class=\"stzh-card-superteaser__dateline\">{this.dateline}</div>\n            }\n\n            {this.topic\n              && <div class=\"stzh-card-superteaser__topic\">{this.topic}</div>\n            }\n\n            <Heading class=\"stzh-card-superteaser__heading\">\n              <HeadingLink\n                ref={(el) => (this.headingLinkElement = el as HTMLAnchorElement | HTMLDivElement)}\n                class=\"stzh-card-superteaser__heading-link\"\n                href={this.href}\n                target={this.target}\n                download={this.download}\n                onClick={this.handleCardClick}\n              >\n                <div\n                  class=\"stzh-card-superteaser__heading-link-text\"\n                  ref={(el) => (this.headingTextElement = el as HTMLDivElement)}\n                >\n                  {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n                </div>\n              </HeadingLink>\n            </Heading>\n          </div>\n\n          <div class=\"stzh-card-superteaser__description-wrapper\">\n            {(eventDateStart || this.eventLocation) &&\n              <div class=\"stzh-card-superteaser__event-infos\">\n                {eventDateStart &&\n                  <div class=\"stzh-card-superteaser__event-date\">\n                    <span>{this.dateAdapter.format(eventDateStart, \"dateLong\")},&nbsp;</span>\n                    {this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, \"time\")}\n                  </div>\n                }\n                {this.eventLocation &&\n                  <div class=\"stzh-card-superteaser__event-location\">\n                    {this.eventLocation}\n                  </div>\n                }\n              </div>\n            }\n\n            <div class=\"stzh-card-superteaser__description\">\n              {this.description ? this.description : <slot name=\"description\"></slot>}\n            </div>\n          </div>\n\n          <div class=\"stzh-card-superteaser__image\">\n            {eventDateStart &&\n              <div class=\"stzh-card-superteaser__event-date-teaser\">\n                <div class=\"stzh-card-superteaser__event-date-teaser-day-name\">\n                {this.localization.$globals.dayNamesShort[eventDateStart.getDay()]}\n                </div>\n                <div class=\"stzh-card-superteaser__event-date-teaser-day\">\n                  {eventDateStart.getDate() < 10 && '0'}{eventDateStart.getDate()}\n                </div>\n                <div class=\"stzh-card-superteaser__event-date-teaser-month\">\n                  {this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]}\n                </div>\n              </div>\n            }\n            {this.service && <div class=\"stzh-card-superteaser__service\">{this.service}</div>}\n            <slot name=\"image\"></slot>\n          </div>\n\n          {(this._meta.length > 0 || this.datalistItems || !!this.downloadHeading || this._downloadMeta.length > 0) &&\n            <div class=\"stzh-card-superteaser__meta-wrapper\">\n              {this.datalistItems &&\n                <stzh-datalist\n                  class=\"stzh-card-searchresult__datalist\"\n                  items={this.datalistItems}\n                >\n                </stzh-datalist>\n              }\n\n              {this._meta.length > 0 &&\n                <div class=\"stzh-card-superteaser__meta\">\n                  <div class=\"stzh-card-superteaser__meta-list\">\n                    {this._meta.map((meta) =>\n                      <Fragment>\n                        <div class=\"stzh-card-superteaser__meta-list-item\">{meta}</div>\n                      </Fragment>\n                    )}\n                  </div>\n                </div>\n              }\n\n              {(!!this.downloadHeading || this._downloadMeta.length > 0) &&\n                <div class=\"stzh-card-superteaser__download\">\n                  <div class=\"stzh-card-superteaser__download-data\">\n                    {this.downloadHeading &&\n                      <div class=\"stzh-card-superteaser__download-heading\">\n                        {this.downloadHeading}\n                      </div>\n                    }\n                    {this._downloadMeta.length > 0 &&\n                      <div class=\"stzh-card-superteaser__download-meta-list\">\n                        {this._downloadMeta.map((meta) =>\n                          <Fragment>\n                            <div class=\"stzh-card-superteaser__download-meta-list-item\">{meta}</div>\n                          </Fragment>\n                        )}\n                      </div>\n                    }\n                  </div>\n\n                  <div class=\"stzh-card-superteaser__download-button\">\n                    <stzh-icon class=\"stzh-card-superteaser__download-icon\" name=\"download\"></stzh-icon>\n                  </div>\n                </div>\n              }\n            </div>\n          }\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-card-superteaser.js","mappings":"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","names":["StzhCardSuperteaser"],"sources":["src/components/stzh-card-superteaser/stzh-card-superteaser.scss?tag=stzh-card-superteaser&encapsulation=scoped","src/components/stzh-card-superteaser/stzh-card-superteaser.tsx"],"sourcesContent":[":host {\n  --service-background-color: #{$colorSecondary30};\n  --service-color: #{$colorPrimary70};\n\n  --grid-template-areas:\n    \"heading\"\n    \"description\"\n    \"meta\";\n  --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n  --grid-template-columns: minmax(0, 1fr);\n\n  display: grid;\n\n  ::slotted(img) {\n    width: 100%;\n    max-width: 100%;\n  }\n\n  &[has-image] {\n    --grid-template-areas:\n      \"image\"\n      \"heading\"\n      \"description\"\n      \"meta\";\n    --grid-template-rows: repeat(3, auto) minmax(0, 1fr);\n    --grid-template-columns: minmax(0, 1fr);\n  }\n\n  &[has-image][image-position=\"right\"] {\n    --grid-template-areas:\n      \"heading heading\"\n      \"description description\"\n      \"meta image\";\n    --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n    --grid-template-columns: minmax(0, 1fr) minmax(calc(100px + #{space('medium')}), min-content);\n  }\n}\n\n.stzh-card-superteaser {\n  @include fontSize('milli');\n  position: relative;\n  display: grid;\n  background-color: $colorGrey10;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-rows: var(--grid-template-rows);\n  grid-template-columns: var(--grid-template-columns);\n  color: $colorGrey80;\n\n  &__tag,\n  &__dateline,\n  &__breadcrumb,\n  &__event-infos,\n  &__heading-link-text,\n  &__description,\n  &__meta-wrapper {\n    z-index: 1;\n    position: relative;\n  }\n\n  &__heading-wrapper,\n  &--has-description-wrapper &__description-wrapper,\n  &__meta-wrapper {\n    margin-left: space('medium');\n    margin-right: space('medium');\n    margin-bottom: space('large');\n  }\n\n  &__heading-wrapper {\n    grid-area: heading;\n    display: grid;\n    margin-top: space('xlarge');\n  }\n\n  &__image,\n  &__meta-wrapper {\n    align-self: end;\n  }\n\n  &__image {\n    display: grid;\n    grid-area: image;\n    width: 100%;\n  }\n\n  &__description-wrapper {\n    grid-area: description;\n  }\n\n  &__meta-wrapper {\n    grid-area: meta;\n  }\n\n  &__meta {\n    overflow: hidden;\n  }\n\n  &__download {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: space('xsmall');\n    overflow: hidden;\n  }\n\n  &__download-button {\n    align-self: flex-end;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: $formInputHeightSmall;\n    height: $formInputHeightSmall;\n    color: $colorPrimary70;\n  }\n\n  // &__download-heading {\n  //   color: $colorPrimary70;\n  //   text-underline-offset: $linkTextUnderlineOffset;\n  //   text-decoration-line: $linkTextDecorationLine;\n  //   text-decoration-thickness: $linkTextDecorationThickness;\n  //   text-decoration-skip-ink: $linkTextDecorationSkipInk;\n  // }\n\n  &__tag,\n  &__topic,\n  &__service,\n  &__event-date-teaser {\n    z-index: 2;\n  }\n\n  &__tag {\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n\n  &__service {\n    @include font('heavy');\n    @include fontSize('micro');\n    position: absolute;\n    top: 0;\n    right: 0;\n    background-color: var(--service-background-color);\n    color: var(--service-color);\n    padding: space('xsmall') space('medium');\n    text-align: center;\n  }\n\n  &__topic {\n    @include font('heavy');\n    @include fontSize('micro');\n    position: relative;\n    color: $colorPrimary70;\n    margin-bottom: space('xsmall');\n  }\n\n  &__dateline {\n    @include fontSize('micro');\n    color: $colorBlack;\n    margin-bottom: space('xxsmall');\n  }\n\n  &__heading {\n    margin-top: 0px;\n    margin-bottom: space('small');\n  }\n\n  &__heading-link {\n    @include font('heavy');\n    @include fontSize('deca');\n    display: block;\n    color: $colorPrimary70;\n    text-decoration-line: none;\n  }\n\n  &__event-infos {\n    @include fontSize('micro');\n  }\n\n  &:has(#{&}__description:not(:empty)) &__event-infos {\n    margin-bottom: space('small');\n  }\n\n  &__description {\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__breadcrumb {\n    margin-bottom: space('small');\n  }\n\n  &__event-date-teaser {\n    @include fontSize('nano');\n    text-transform: uppercase;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 88px;\n    height: 88px;\n    color: $colorBlack;\n    background-color: $colorSecondary30;\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  &__event-date-teaser-day {\n    @include font('heavy');\n    @include fontSize('hecto');\n    color: $colorPrimary70;\n    margin-top: -7px;\n    margin-bottom: -7px;\n  }\n\n  &__meta-list,\n  &__download-meta-list {\n    @include fontSize('micro');\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    column-gap: space('xsmall');\n    margin-left: calc((#{space('xsmall')} + 1px) / -1);\n  }\n\n  &__meta-list-item,\n  &__download-meta-list-item {\n    display: flex;\n    align-items: center;\n    min-height: 24px;\n    gap: space('xsmall');\n\n    &::before {\n      content: '';\n      display: block;\n      width: 1px;\n      height: 16px;\n      background-color: currentColor;\n    }\n  }\n\n  /* Has link */\n\n  &--has-link &__heading-link {\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    &::before,\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      transition: background-color $baseTransitionAnimationSpeed;\n    }\n\n    &::after {\n      z-index: 10;\n    }\n  }\n\n  &--has-link:has(#{&}__heading-link:hover) &__heading-link {\n    &::before {\n      background-color: $colorSecondary10;\n    }\n  }\n\n  &--has-link:has(#{&}__heading-link:hover) &__tag {\n    --color: #{$colorSecondary60};\n  }\n\n  /* Has tag */\n\n  &--has-tag &__heading-wrapper {\n    margin-top: space('xxxlarge');\n  }\n\n  /* Has service */\n\n  &--has-service &__heading-wrapper {\n    margin-top: space('xxxxlarge');\n  }\n\n  &--has-service#{&}--has-image-right &__heading-wrapper {\n    margin-top: space('xxxlarge');\n  }\n\n  /* Has image (default) */\n\n  &--has-image &__image {\n    z-index: 1;\n    position: relative;\n  }\n\n  &--has-image-default &__heading-wrapper {\n    margin-top: space('medium');\n  }\n\n  /* Has image right */\n\n  &--has-image-right &__image {\n    margin-bottom: space('large');\n    padding-right: space('medium');\n  }\n\n  &--has-image-right &__meta-wrapper {\n    margin-right: space('xsmall');\n  }\n\n  &--has-image-right &__service {\n    position: static;\n  }\n\n  /* Has description wrapper, meta or download */\n\n  &--has-description-wrapper &__heading-wrapper,\n  &--has-meta &__heading-wrapper,\n  &--has-download &__heading-wrapper {\n    margin-bottom: 0px;\n  }\n\n  &--has-meta &__description-wrapper,\n  &--has-download &__description-wrapper {\n    margin-bottom: 0px;\n  }\n\n  &--has-meta &__description,\n  &--has-download &__description {\n    &:not(:empty) {\n      margin-bottom: space('small');\n    }\n  }\n\n  &--has-download &__meta {\n    margin-bottom: space('xsmall');\n  }\n\n  /* Hyphens */\n  &--hyphens &__heading {\n    hyphens: auto;\n  }\n}\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Watch, Fragment } from \"@stencil/core\";\n\nimport {\n  StzhCardSuperteaserClickEvent,\n  StzhBreadcrumbItem,\n  StzhDatalistItemEntry,\n  StzhLocaleAdapter,\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nimport { StzhCardSuperteaserLocalizedText } from \"./stzh-card-superteaser.localization\";\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot description - Description text (alternative for description property)\n * @slot image - Image\n */\n@Component({\n  tag: \"stzh-card-superteaser\",\n  styleUrl: \"stzh-card-superteaser.scss\",\n  scoped: true,\n})\nexport class StzhCardSuperteaser {\n  /** Translation strings */\n  @Prop() localization: StzhCardSuperteaserLocalizedText;\n\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  /** Download attribute (if href is used) */\n  @Prop() download: 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  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = \"\";\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Description text (alternative for description slot) */\n  @Prop() description: string = \"\";\n\n  /** Tag */\n  @Prop() tag: string;\n\n  /** Topic */\n  @Prop() topic: string;\n\n  /** Service */\n  @Prop() service: string;\n\n  /** Dateline */\n  @Prop() dateline: string;\n\n  /** Meta */\n  @Prop() meta: string[] | string;\n  private _meta: string[];\n\n  /** Breadcrumb items */\n  @Prop() breadcrumbItems: StzhBreadcrumbItem[] | string;\n\n  /** Datalist items */\n  @Prop() datalistItems: StzhDatalistItemEntry[] | string = [];\n\n  /** Event start date */\n  @Prop() eventDateStart: Date | string;\n\n  /** Event start date */\n  @Prop() eventDateEnd: Date | string;\n\n  /** Event location */\n  @Prop() eventLocation: string;\n\n  /** Image position */\n  @Prop({ reflect: true }) imagePosition: \"default\" | \"right\" = \"default\";\n\n  /** Download heading */\n  @Prop() downloadHeading: string;\n\n  /** Download meta */\n  @Prop() downloadMeta: string[] | string;\n  private _downloadMeta: string[];\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  /** Automatic Hyphens */\n  @Prop({ reflect: true }) hyphensEnabled: boolean = false;\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhCardSuperteaserClickEvent>;\n\n  @Watch(\"meta\")\n  metaWatcher(newValue: string | string[]) {\n    if (!newValue) {\n      this._meta = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._meta = JSON.parse(newValue);\n      } catch (e) {\n        this._meta = [];\n      }\n    } else {\n      this._meta = newValue;\n    }\n  }\n\n  @Watch(\"downloadMeta\")\n  downloadMetaWatcher(newValue: string | string[]) {\n    if (!newValue) {\n      this._downloadMeta = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._downloadMeta = JSON.parse(newValue);\n      } catch (e) {\n        this._downloadMeta = [];\n      }\n    } else {\n      this._downloadMeta = newValue;\n    }\n  }\n\n  private headingLinkElement: HTMLAnchorElement | HTMLDivElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-card-superteaser\",\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.headingLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  async componentWillLoad() {\n    this.metaWatcher(this.meta);\n    this.downloadMetaWatcher(this.downloadMeta);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"card-superteaser\");\n    }\n\n    if (!this.dateAdapter) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n  }\n\n  render() {\n    const hasHeading = !!this.heading || hasSlot(this.element, \"heading\");\n    const hasDescription = !!this.description || hasSlot(this.element, \"description\");\n    const hasImage = hasSlot(this.element, \"image\");\n\n    const eventDateStart = this.eventDateStart && new Date(this.eventDateStart);\n    const eventDateEnd = this.eventDateEnd && new Date(this.eventDateEnd);\n\n    const classes = {\n      \"stzh-card-superteaser\": true,\n      \"stzh-card-superteaser--has-heading\": hasHeading,\n      \"stzh-card-superteaser--has-description\": hasDescription,\n      \"stzh-card-superteaser--has-description-wrapper\": hasDescription || !!eventDateStart || !!this.eventLocation,\n      \"stzh-card-superteaser--has-link\": !!this.href,\n      \"stzh-card-superteaser--has-service\": !!this.service,\n      \"stzh-card-superteaser--has-tag\": !!this.tag,\n      \"stzh-card-superteaser--has-topic\": !!this.topic,\n      \"stzh-card-superteaser--has-image\": hasImage,\n      \"stzh-card-superteaser--has-image-default\": hasImage && this.imagePosition === \"default\",\n      \"stzh-card-superteaser--has-image-right\": hasImage && this.imagePosition === \"right\",\n      \"stzh-card-superteaser--has-meta\": this._meta.length > 0,\n      \"stzh-card-superteaser--has-download\": !!this.downloadHeading || this._downloadMeta.length > 0,\n      \"stzh-card-superteaser--has-breadcrumb\": !!this.breadcrumbItems,\n      \"stzh-card-superteaser--hyphens\": this.hyphensEnabled,\n    };\n\n    const Heading = `h${this.headingLevel}`;\n    const HeadingLink = this.href ? \"a\" : \"div\";\n\n    return (\n      <Host has-image={hasImage}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          {this.tag && <stzh-tag class=\"stzh-card-superteaser__tag\" label={this.tag} nonInteractive={true}></stzh-tag>}\n\n          <div class=\"stzh-card-superteaser__heading-wrapper\">\n            {this.breadcrumbItems && (\n              <stzh-breadcrumb\n                class=\"stzh-card-superteaser__breadcrumb\"\n                items={this.breadcrumbItems}\n                variant=\"teaser\"\n              ></stzh-breadcrumb>\n            )}\n\n            {this.dateline && <div class=\"stzh-card-superteaser__dateline\">{this.dateline}</div>}\n\n            {this.topic && <div class=\"stzh-card-superteaser__topic\">{this.topic}</div>}\n\n            <Heading class=\"stzh-card-superteaser__heading\">\n              <HeadingLink\n                ref={el => (this.headingLinkElement = el as HTMLAnchorElement | HTMLDivElement)}\n                class=\"stzh-card-superteaser__heading-link\"\n                href={this.href}\n                target={this.target}\n                download={this.download}\n                onClick={this.handleCardClick}\n              >\n                <div\n                  class=\"stzh-card-superteaser__heading-link-text\"\n                  ref={el => (this.headingTextElement = el as HTMLDivElement)}\n                >\n                  {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n                </div>\n              </HeadingLink>\n            </Heading>\n          </div>\n\n          <div class=\"stzh-card-superteaser__description-wrapper\">\n            {(eventDateStart || this.eventLocation) && (\n              <div class=\"stzh-card-superteaser__event-infos\">\n                {eventDateStart && (\n                  <div class=\"stzh-card-superteaser__event-date\">\n                    <span>{this.dateAdapter.format(eventDateStart, \"dateLong\")},&nbsp;</span>\n                    {this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, \"time\")}\n                  </div>\n                )}\n                {this.eventLocation && <div class=\"stzh-card-superteaser__event-location\">{this.eventLocation}</div>}\n              </div>\n            )}\n\n            <div class=\"stzh-card-superteaser__description\">\n              {this.description ? this.description : <slot name=\"description\"></slot>}\n            </div>\n          </div>\n\n          <div class=\"stzh-card-superteaser__image\">\n            {eventDateStart && (\n              <div class=\"stzh-card-superteaser__event-date-teaser\">\n                <div class=\"stzh-card-superteaser__event-date-teaser-day-name\">\n                  {this.localization.$globals.dayNamesShort[eventDateStart.getDay()]}\n                </div>\n                <div class=\"stzh-card-superteaser__event-date-teaser-day\">\n                  {eventDateStart.getDate() < 10 && \"0\"}\n                  {eventDateStart.getDate()}\n                </div>\n                <div class=\"stzh-card-superteaser__event-date-teaser-month\">\n                  {this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]}\n                </div>\n              </div>\n            )}\n            {this.service && <div class=\"stzh-card-superteaser__service\">{this.service}</div>}\n            <slot name=\"image\"></slot>\n          </div>\n\n          {(this._meta.length > 0 || this.datalistItems || !!this.downloadHeading || this._downloadMeta.length > 0) && (\n            <div class=\"stzh-card-superteaser__meta-wrapper\">\n              {this.datalistItems && (\n                <stzh-datalist class=\"stzh-card-searchresult__datalist\" items={this.datalistItems}></stzh-datalist>\n              )}\n\n              {this._meta.length > 0 && (\n                <div class=\"stzh-card-superteaser__meta\">\n                  <div class=\"stzh-card-superteaser__meta-list\">\n                    {this._meta.map(meta => (\n                      <Fragment>\n                        <div class=\"stzh-card-superteaser__meta-list-item\">{meta}</div>\n                      </Fragment>\n                    ))}\n                  </div>\n                </div>\n              )}\n\n              {(!!this.downloadHeading || this._downloadMeta.length > 0) && (\n                <div class=\"stzh-card-superteaser__download\">\n                  <div class=\"stzh-card-superteaser__download-data\">\n                    {this.downloadHeading && (\n                      <div class=\"stzh-card-superteaser__download-heading\">{this.downloadHeading}</div>\n                    )}\n                    {this._downloadMeta.length > 0 && (\n                      <div class=\"stzh-card-superteaser__download-meta-list\">\n                        {this._downloadMeta.map(meta => (\n                          <Fragment>\n                            <div class=\"stzh-card-superteaser__download-meta-list-item\">{meta}</div>\n                          </Fragment>\n                        ))}\n                      </div>\n                    )}\n                  </div>\n\n                  <div class=\"stzh-card-superteaser__download-button\">\n                    <stzh-icon class=\"stzh-card-superteaser__download-icon\" name=\"download\"></stzh-icon>\n                  </div>\n                </div>\n              )}\n            </div>\n          )}\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}