@oiz/stzh-components 3.2.0-beta1 → 3.2.0

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

@@ -36,6 +36,7 @@ export class StzhCardSearchresult {
     this.downloadHeading = undefined;
     this.downloadMeta = undefined;
     this.dateAdapter = undefined;
+    this.hyphensEnabled = false;
   }
   metaWatcher(newValue) {
     if (!newValue) {
@@ -109,6 +110,7 @@ export class StzhCardSearchresult {
       "stzh-card-searchresult--has-meta": this._meta.length > 0,
       "stzh-card-searchresult--has-download": !!this.downloadHeading || this._downloadMeta.length > 0,
       "stzh-card-searchresult--has-breadcrumb": !!this.breadcrumbItems,
+      "stzh-card-searchresult--hyphens": this.hyphensEnabled,
     };
     const Heading = `h${this.headingLevel}`;
     const HeadingLink = this.href ? "a" : "div";
@@ -536,6 +538,24 @@ export class StzhCardSearchresult {
           "tags": [],
           "text": "Date adapter, for custom parsing/formatting.\nMust be object with a `parse` function which accepts a `string` and returns a `Date`,\nand a `format` function which accepts a `Date` and returns a `string`."
         }
+      },
+      "hyphensEnabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Automatic Hyphens"
+        },
+        "attribute": "hyphens-enabled",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-card-searchresult.js","sourceRoot":"","sources":["../../../../src/components/stzh-card-searchresult/stzh-card-searchresult.tsx"],"names":[],"mappings":"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","sourcesContent":["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","sourceRoot":"","sources":["../../../../src/components/stzh-card-searchresult/stzh-card-searchresult.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/stzh-card-searchresult/stzh-card-searchresult.stories.js

@@ -44,199 +44,219 @@ export default {
       allowFullscreen: true
     }
   },
-  decorators: [
-    withActions,
-    withDesign
-  ]
+  decorators: [withActions, withDesign]
 };
 
 export const Media = {
   render: (args) => story(args, TEMPLATE),
   args: {
-    "tag": "Medienmitteilung",
-    "href": "#",
-    "dateline": "23. November 2023",
-    "heading": "Lorem ipsum dolor sit amet",
-    "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
+    tag: 'Medienmitteilung',
+    href: '#',
+    dateline: '23. November 2023',
+    heading: 'Lorem ipsum dolor sit amet',
+    description:
+      'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.'
   }
-}
+};
+
+export const WithHyphens = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    tag: 'Medienmitteilung',
+    href: '#',
+    dateline: '23. November 2023',
+    heading: 'Hochleistungskompressorumlaufschutzventil',
+    description:
+      'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
+    'hyphens-enabled': true,
+    lang: 'de'
+  }
+};
 
 export const CityCounsilResolution = {
   render: (args) => story(args, TEMPLATE),
   args: {
-    "tag": "Stadtratsbeschluss",
-    "topic": "Lorem ipsum",
-    "href": "#",
-    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
-    "meta": ["Lorem ipsum", "21.12.2022"]
+    tag: 'Stadtratsbeschluss',
+    topic: 'Lorem ipsum',
+    href: '#',
+    heading:
+      'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
+    meta: ['Lorem ipsum', '21.12.2022']
   }
-}
+};
 
 export const Service = {
   render: (args) => story(args, TEMPLATE),
   args: {
-    "style": "--service-background-color: var(--stzh-color-violet40)",
-    "service": "Lorem ipsum",
-    "href": "#",
-    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
-    "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
+    style: '--service-background-color: var(--stzh-color-violet40)',
+    service: 'Lorem ipsum',
+    href: '#',
+    heading: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr',
+    description:
+      'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.'
   }
-}
+};
 
 export const Website = {
   render: (args) => story(args, TEMPLATE),
   args: {
-    "breadcrumb-items": [
+    'breadcrumb-items': [
       {
-        "label": "Home",
-        "href": "#"
+        label: 'Home',
+        href: '#'
       },
       {
-        "label": "Lorem ipsum",
-        "href": "#"
+        label: 'Lorem ipsum',
+        href: '#'
       },
       {
-        "label": "Dolor sit amet",
-        "href": "#"
+        label: 'Dolor sit amet',
+        href: '#'
       },
       {
-        "label": "Consectetur adipiscing elit",
-        "href": "#"
+        label: 'Consectetur adipiscing elit',
+        href: '#'
       }
     ],
-    "href": "#",
-    "heading": "Lorem ipsum dolor sit amet",
-    "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
+    href: '#',
+    heading: 'Lorem ipsum dolor sit amet',
+    description:
+      'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.'
   }
-}
+};
 
 export const Document = {
   render: (args) => story(args, TEMPLATE),
   args: {
-    "tag": "Dokument",
-    "href": "#",
-    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
-    "download": "",
-    "download-meta": ["Lorem", "Ipsum", "Dolor", "Amet", "PDF", "15 MB"]
+    tag: 'Dokument',
+    href: '#',
+    heading: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr',
+    download: '',
+    'download-meta': ['Lorem', 'Ipsum', 'Dolor', 'Amet', 'PDF', '15 MB']
   }
-}
+};
 
 export const JobOffer = {
   render: (args) => story(args, TEMPLATE),
   args: {
-    "tag": "Job",
-    "href": "#",
-    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
-    "meta": ["Lorem ipsum", "12.02.2022"]
+    tag: 'Job',
+    href: '#',
+    heading: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr',
+    meta: ['Lorem ipsum', '12.02.2022']
   }
-}
+};
 
 export const Event = {
   render: (args) => story(args, TEMPLATE_WITH_IMAGE),
   args: {
-    "event-date-start": "2022-01-12T15:30:00.000Z",
-    "event-date-end": "2022-01-12T16:30:00.000Z",
-    "event-location": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
-    "tag": "Veranstaltung",
-    "href": "#",
-    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
-    "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
+    'event-date-start': '2022-01-12T15:30:00.000Z',
+    'event-date-end': '2022-01-12T16:30:00.000Z',
+    'event-location': 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr',
+    tag: 'Veranstaltung',
+    href: '#',
+    heading: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr',
+    description:
+      'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.'
   }
-}
+};
 
 export const Publication = {
   render: (args) => story(args, TEMPLATE_WITH_PUBLICATION),
   args: {
-    "tag": "Publikation",
-    "href": "#",
-    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
-    "image-position": "right",
-    "meta": ["Lorem", "Ipsum", "Dolor", "Amet", "Lorem", "February 2024", "PDF"]
+    tag: 'Publikation',
+    href: '#',
+    heading: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr',
+    'image-position': 'right',
+    meta: ['Lorem', 'Ipsum', 'Dolor', 'Amet', 'Lorem', 'February 2024', 'PDF']
   }
-}
+};
 
 export const PublicationStatistics = {
   render: (args) => story(args, TEMPLATE_WITH_PUBLICATION),
   args: {
-    "tag": "Publikation",
-    "href": "#",
-    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
-    "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.",
-    "image-position": "right",
-    "meta": ["Lorem ipsum", "22.06.2023"]
+    tag: 'Publikation',
+    href: '#',
+    heading: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr',
+    description:
+      'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.',
+    'image-position': 'right',
+    meta: ['Lorem ipsum', '22.06.2023']
   }
-}
+};
 
 export const OfficialCollection = {
   render: (args) => story(args, TEMPLATE),
   args: {
-    "tag": "Amtliche Sammlung",
-    "topic": "Lorem ipsum",
-    "href": "#",
-    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
-    "meta": ["Lorem ipsum: 21.12.2022", "Lorem ipsum: 21.12.2022"]
+    tag: 'Amtliche Sammlung',
+    topic: 'Lorem ipsum',
+    href: '#',
+    heading:
+      'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
+    meta: ['Lorem ipsum: 21.12.2022', 'Lorem ipsum: 21.12.2022']
   }
-}
+};
 
 export const BusinessReport = {
   render: (args) => story(args, TEMPLATE),
   args: {
-    "tag": "Geschäftsbericht",
-    "href": "#",
-    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
-    "download": "",
-    "download-meta": ["Lorem", "Ipsum", "PDF", "15 MB"]
+    tag: 'Geschäftsbericht',
+    href: '#',
+    heading: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr',
+    download: '',
+    'download-meta': ['Lorem', 'Ipsum', 'PDF', '15 MB']
   }
-}
+};
 
 export const Gallery = {
   render: (args) => story(args, TEMPLATE_WITH_PUBLICATION),
   args: {
-    "tag": "Bildergalerie",
-    "topic": "1948.11.14",
-    "href": "#",
-    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
-    "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
-    "image-position": "right"
+    tag: 'Bildergalerie',
+    topic: '1948.11.14',
+    href: '#',
+    heading: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr',
+    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
+    'image-position': 'right'
   }
-}
+};
 
 export const FormsAndInformationSheets = {
   render: (args) => story(args, TEMPLATE),
   args: {
-    "tag": "Formulare & Merkblätter",
-    "heading": "Lorem ipsum dolor sit amet",
-    "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.",
-    "datalist-items": [
+    tag: 'Formulare & Merkblätter',
+    heading: 'Lorem ipsum dolor sit amet',
+    description:
+      'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.',
+    'datalist-items': [
       {
-        "icon": "file",
-        "iconPosition": "left",
-        "value": "Lorem ipsum dolor sit amet (1 MB)",
-        "href": "#"
+        icon: 'file',
+        iconPosition: 'left',
+        value: 'Lorem ipsum dolor sit amet (1 MB)',
+        href: '#'
       },
       {
-        "icon": "file",
-        "iconPosition": "left",
-        "value": "Lorem ipsum dolor sit amet (1 MB)",
-        "href": "#"
+        icon: 'file',
+        iconPosition: 'left',
+        value: 'Lorem ipsum dolor sit amet (1 MB)',
+        href: '#'
       },
       {
-        "icon": "file",
-        "iconPosition": "left",
-        "value": "Lorem ipsum dolor sit amet (1 MB)",
-        "href": "#"
+        icon: 'file',
+        iconPosition: 'left',
+        value: 'Lorem ipsum dolor sit amet (1 MB)',
+        href: '#'
       }
     ]
   }
-}
+};
 
 export const PracticePool = {
   render: (args) => story(args, TEMPLATE),
   args: {
-    "tag": "Praxispool",
-    "href": "#",
-    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
-    "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.",
-    "meta": ["Lorem, Ipsum, Dolor", "Ipsum"]
+    tag: 'Praxispool',
+    href: '#',
+    heading: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr',
+    description:
+      'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.',
+    meta: ['Lorem, Ipsum, Dolor', 'Ipsum']
   }
-}
+};

package/dist/collection/components/stzh-card-superteaser/stzh-card-superteaser.css

@@ -212,6 +212,7 @@
   /* Has image (default) */
   /* Has image right */
   /* Has description wrapper, meta or download */
+  /* Hyphens */
 }
 .stzh-card-superteaser__tag, .stzh-card-superteaser__dateline, .stzh-card-superteaser__breadcrumb, .stzh-card-superteaser__event-infos, .stzh-card-superteaser__heading-link-text, .stzh-card-superteaser__description, .stzh-card-superteaser__meta-wrapper {
   z-index: 1;
@@ -437,4 +438,8 @@
 }
 .stzh-card-superteaser--has-download .stzh-card-superteaser__meta {
   margin-bottom: var(--stzh-space-xsmall);
+}
+.stzh-card-superteaser--hyphens .stzh-card-superteaser__heading {
+  -webkit-hyphens: auto;
+          hyphens: auto;
 }

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

@@ -11,7 +11,7 @@ export class StzhCardSuperteaser {
       this.stzhClick.emit({
         component: "stzh-card-superteaser",
         originalEvent,
-        href: this.href
+        href: this.href,
       });
     };
     this.localization = undefined;
@@ -36,6 +36,7 @@ export class StzhCardSuperteaser {
     this.downloadHeading = undefined;
     this.downloadMeta = undefined;
     this.dateAdapter = undefined;
+    this.hyphensEnabled = false;
   }
   metaWatcher(newValue) {
     if (!newValue) {
@@ -89,9 +90,9 @@ export class StzhCardSuperteaser {
     }
   }
   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 = {
@@ -109,24 +110,11 @@ export class StzhCardSuperteaser {
       "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" })))))))));
   }
   static get is() { return "stzh-card-superteaser"; }
   static get encapsulation() { return "scoped"; }
@@ -550,6 +538,24 @@ export class StzhCardSuperteaser {
           "tags": [],
           "text": "Date adapter, for custom parsing/formatting.\nMust be object with a `parse` function which accepts a `string` and returns a `Date`,\nand a `format` function which accepts a `Date` and returns a `string`."
         }
+      },
+      "hyphensEnabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Automatic Hyphens"
+        },
+        "attribute": "hyphens-enabled",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }