@oiz/stzh-components 3.0.0-beta3 → 3.0.0-beta5

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

@@ -34,13 +34,6 @@ const TEMPLATE_STARRABLE = `
 </stzh-card>
 `;
 
-const TEMPLATE_PUBLICATION = `
-<stzh-card>
-  <img slot="image" src="media/images/example.jpg" loading="lazy" alt="Example image" />
-  <div slot="content">Card Content</div>
-</stzh-card>
-`;
-
 export default {
   title: 'Components/Card',
   component: COMPONENT_NAME,
@@ -149,13 +142,3 @@ export const Starrable = {
     footerActions: footerActions
   }
 };
-
-export const Publication = {
-  render: (args) => story(args, TEMPLATE_PUBLICATION),
-  args: {
-    heading: 'Lorem ipsum',
-    author: 'Max Mustermann',
-    date: '2019-11-20',
-    tag: 'Lorem ipsum'
-  }
-};

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -9,7 +9,8 @@ export class StzhCardNavigation {
     this.handleCardClick = (originalEvent) => {
       this.stzhClick.emit({
         component: "stzh-card-navigation",
-        originalEvent
+        originalEvent,
+        href: this.href
       });
     };
     this.href = undefined;
@@ -172,7 +173,7 @@ export class StzhCardNavigation {
         },
         "complexType": {
           "original": "StzhCardNavigationClickEvent",
-          "resolved": "{ component: \"stzh-card-navigation\"; originalEvent: MouseEvent; }",
+          "resolved": "{ component: \"stzh-card-navigation\"; originalEvent: MouseEvent; href: string; }",
           "references": {
             "StzhCardNavigationClickEvent": {
               "location": "import",

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-card-navigation.js","sourceRoot":"","sources":["../../../../src/components/stzh-card-navigation/stzh-card-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,EACJ,KAAK,GAEN,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C;;;GAGG;AAMH,MAAM,OAAO,kBAAkB;;IA+BrB,oBAAe,GAAG,CAAC,aAAyB,EAAE,EAAE;MACtD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,sBAAsB;QACjC,aAAa;OACd,CAAC,CAAC;IACL,CAAC,CAAA;;;;mBArByB,EAAE;wBAGkB,GAAG;gBAG1B,EAAE;;EAiBzB,kBAAkB;IAChB,qBAAqB,CAAC,GAAG,EAAE;;MACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,kBAAkB,0CAAE,SAAS,CAAA,CAAC;MAExE,IAAI,QAAQ,EAAE;QACZ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;OAC9D;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAE7D,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;MAC5B,gCAAgC,EAAE,OAAO;KAC1C,CAAC;IAEF,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;IACxC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;IAE7C,OAAO,CACL,EAAC,IAAI,gBAAW,OAAO;MACrB,eAAS,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,UAAU;QAChE,WAAK,KAAK,EAAC,+BAA+B;UACxC,EAAC,OAAO,IAAC,KAAK,EAAC,6BAA6B;YAC1C,EAAC,SAAS,IACR,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,EAA2C,CAAC,EAClF,KAAK,EAAC,kCAAkC,EACxC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,eAAe;cAE7B,WAAK,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,IAC/D,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,CACI,CACJ;UAEV,WAAK,KAAK,EAAC,4BAA4B,IACpC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,MAAM,GAAQ,CAC9C,CACF;QAEN,WAAK,KAAK,EAAC,6BAA6B;UACtC,iBAAW,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,aAAa,GAAa,CAC/E,CACE,CACL,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n  StzhCardNavigationClickEvent\n} from \"../../index\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n */\n@Component({\n  tag: \"stzh-card-navigation\",\n  styleUrl: \"stzh-card-navigation.scss\",\n  scoped: true\n})\nexport class StzhCardNavigation {\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = \"\";\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Lead text (alternative for lead slot) */\n  @Prop() lead: string = \"\";\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhCardNavigationClickEvent>;\n\n  private titleLinkElement: HTMLAnchorElement | HTMLButtonElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-card-navigation\",\n      originalEvent\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  render() {\n    const hasLead = !!this.lead || hasSlot(this.element, 'lead');\n\n    const classes = {\n      \"stzh-card-navigation\": true,\n      \"stzh-card-navigation--has-lead\": hasLead,\n    };\n\n    const Heading = `h${this.headingLevel}`;\n    const TitleLink = this.href ? \"a\" : \"button\";\n\n    return (\n      <Host has-lead={hasLead}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          <div class=\"stzh-card-navigation__wrapper\">\n            <Heading class=\"stzh-card-navigation__title\">\n              <TitleLink\n                ref={(el) => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n                class=\"stzh-card-navigation__title-link\"\n                href={this.href}\n                target={this.target}\n                onClick={this.handleCardClick}\n              >\n                <div ref={(el) => (this.headingTextElement = el as HTMLDivElement)}>\n                  {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n                </div>\n              </TitleLink>\n            </Heading>\n\n            <div class=\"stzh-card-navigation__lead\">\n              {this.lead ? this.lead : <slot name=\"lead\"></slot>}\n            </div>\n          </div>\n\n          <div class=\"stzh-card-navigation__arrow\">\n            <stzh-icon class=\"stzh-card-navigation__arrow-icon\" name=\"arrow-right\"></stzh-icon>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-card-navigation.js","sourceRoot":"","sources":["../../../../src/components/stzh-card-navigation/stzh-card-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,EACJ,KAAK,GAEN,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C;;;GAGG;AAMH,MAAM,OAAO,kBAAkB;;IA+BrB,oBAAe,GAAG,CAAC,aAAyB,EAAE,EAAE;MACtD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,sBAAsB;QACjC,aAAa;QACb,IAAI,EAAE,IAAI,CAAC,IAAI;OAChB,CAAC,CAAC;IACL,CAAC,CAAA;;;;mBAtByB,EAAE;wBAGkB,GAAG;gBAG1B,EAAE;;EAkBzB,kBAAkB;IAChB,qBAAqB,CAAC,GAAG,EAAE;;MACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,kBAAkB,0CAAE,SAAS,CAAA,CAAC;MAExE,IAAI,QAAQ,EAAE;QACZ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;OAC9D;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAE7D,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;MAC5B,gCAAgC,EAAE,OAAO;KAC1C,CAAC;IAEF,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;IACxC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;IAE7C,OAAO,CACL,EAAC,IAAI,gBAAW,OAAO;MACrB,eAAS,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,UAAU;QAChE,WAAK,KAAK,EAAC,+BAA+B;UACxC,EAAC,OAAO,IAAC,KAAK,EAAC,6BAA6B;YAC1C,EAAC,SAAS,IACR,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,EAA2C,CAAC,EAClF,KAAK,EAAC,kCAAkC,EACxC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,eAAe;cAE7B,WAAK,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,IAC/D,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,CACI,CACJ;UAEV,WAAK,KAAK,EAAC,4BAA4B,IACpC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,MAAM,GAAQ,CAC9C,CACF;QAEN,WAAK,KAAK,EAAC,6BAA6B;UACtC,iBAAW,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,aAAa,GAAa,CAC/E,CACE,CACL,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n  StzhCardNavigationClickEvent\n} from \"../../index\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n */\n@Component({\n  tag: \"stzh-card-navigation\",\n  styleUrl: \"stzh-card-navigation.scss\",\n  scoped: true\n})\nexport class StzhCardNavigation {\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = \"\";\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Lead text (alternative for lead slot) */\n  @Prop() lead: string = \"\";\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhCardNavigationClickEvent>;\n\n  private titleLinkElement: HTMLAnchorElement | HTMLButtonElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-card-navigation\",\n      originalEvent,\n      href: this.href\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  render() {\n    const hasLead = !!this.lead || hasSlot(this.element, 'lead');\n\n    const classes = {\n      \"stzh-card-navigation\": true,\n      \"stzh-card-navigation--has-lead\": hasLead,\n    };\n\n    const Heading = `h${this.headingLevel}`;\n    const TitleLink = this.href ? \"a\" : \"button\";\n\n    return (\n      <Host has-lead={hasLead}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          <div class=\"stzh-card-navigation__wrapper\">\n            <Heading class=\"stzh-card-navigation__title\">\n              <TitleLink\n                ref={(el) => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n                class=\"stzh-card-navigation__title-link\"\n                href={this.href}\n                target={this.target}\n                onClick={this.handleCardClick}\n              >\n                <div ref={(el) => (this.headingTextElement = el as HTMLDivElement)}>\n                  {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n                </div>\n              </TitleLink>\n            </Heading>\n\n            <div class=\"stzh-card-navigation__lead\">\n              {this.lead ? this.lead : <slot name=\"lead\"></slot>}\n            </div>\n          </div>\n\n          <div class=\"stzh-card-navigation__arrow\">\n            <stzh-icon class=\"stzh-card-navigation__arrow-icon\" name=\"arrow-right\"></stzh-icon>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */
@@ -157,14 +160,13 @@
 }
 
 :host {
-  --tag-right-background-color: var(--stzh-color-secondary30);
-  --tag-right-color: var(--stzh-color-primary70);
+  --service-background-color: var(--stzh-color-secondary30);
+  --service-color: var(--stzh-color-primary70);
   --grid-template-areas:
     "heading"
     "description"
-    "meta"
-    "download";
-  --grid-template-rows: repeat(3, auto);
+    "meta";
+  --grid-template-rows: repeat(2, auto) minmax(0, 1fr);
   --grid-template-columns: minmax(0, 1fr);
   display: grid;
 }
@@ -177,9 +179,8 @@
     "image"
     "heading"
     "description"
-    "meta"
-    "download";
-  --grid-template-rows: repeat(4, auto);
+    "meta";
+  --grid-template-rows: repeat(3, auto) minmax(0, 1fr);
   --grid-template-columns: minmax(0, 1fr);
 }
 @media screen and (min-width: 600px) {
@@ -187,9 +188,8 @@
     --grid-template-areas:
       "heading image"
       "description image"
-      "meta image"
-      "download image";
-    --grid-template-rows: repeat(3, auto);
+      "meta image";
+    --grid-template-rows: repeat(2, auto) minmax(0, 1fr);
     --grid-template-columns: minmax(0, 1fr) minmax(11.25rem, min-content);
   }
 }
@@ -198,9 +198,8 @@
     --grid-template-areas:
       "heading image"
       "description description"
-      "meta meta"
-      "download download";
-    --grid-template-rows: repeat(3, auto);
+      "meta meta";
+    --grid-template-rows: repeat(2, auto) minmax(0, 1fr);
     --grid-template-columns: minmax(0, 1fr) minmax(6.25rem, min-content);
   }
 }
@@ -217,17 +216,18 @@
   grid-template-columns: var(--grid-template-columns);
   color: var(--stzh-color-grey80);
   /* Has link */
-  /* Has tag right */
   /* Has breadcrumb */
+  /* Has tag */
+  /* Has topic or service */
   /* Has image (default) */
   /* Has image right */
   /* Has description wrapper, meta or download */
 }
-.stzh-card-searchresult__tag-left, .stzh-card-searchresult__dateline, .stzh-card-searchresult__breadcrumb, .stzh-card-searchresult__event-infos, .stzh-card-searchresult__heading-link-text, .stzh-card-searchresult__description, .stzh-card-searchresult__meta, .stzh-card-searchresult__download {
+.stzh-card-searchresult__tag, .stzh-card-searchresult__dateline, .stzh-card-searchresult__breadcrumb, .stzh-card-searchresult__event-infos, .stzh-card-searchresult__heading-link-text, .stzh-card-searchresult__description, .stzh-card-searchresult__meta-wrapper {
   z-index: 1;
   position: relative;
 }
-.stzh-card-searchresult__heading-wrapper, .stzh-card-searchresult__description-wrapper, .stzh-card-searchresult__meta, .stzh-card-searchresult__download {
+.stzh-card-searchresult__heading-wrapper, .stzh-card-searchresult--has-description-wrapper .stzh-card-searchresult__description-wrapper, .stzh-card-searchresult__meta-wrapper {
   margin-left: var(--stzh-space-medium);
   margin-right: var(--stzh-space-medium);
   margin-bottom: var(--stzh-space-large);
@@ -235,7 +235,7 @@
 .stzh-card-searchresult__heading-wrapper {
   grid-area: heading;
   display: grid;
-  margin-top: var(--stzh-space-xxxlarge);
+  margin-top: var(--stzh-space-xlarge);
 }
 .stzh-card-searchresult__image {
   display: grid;
@@ -245,12 +245,13 @@
 .stzh-card-searchresult__description-wrapper {
   grid-area: description;
 }
-.stzh-card-searchresult__meta {
+.stzh-card-searchresult__meta-wrapper {
   grid-area: meta;
+}
+.stzh-card-searchresult__meta {
   overflow: hidden;
 }
 .stzh-card-searchresult__download {
-  grid-area: download;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -275,15 +276,15 @@
   -webkit-text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);
           text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);
 }
-.stzh-card-searchresult__tag-left, .stzh-card-searchresult__tag-right, .stzh-card-searchresult__event-date-teaser {
+.stzh-card-searchresult__tag, .stzh-card-searchresult__topic, .stzh-card-searchresult__service, .stzh-card-searchresult__event-date-teaser {
   z-index: 2;
 }
-.stzh-card-searchresult__tag-left {
+.stzh-card-searchresult__tag {
   position: absolute;
   left: 0;
   top: 0;
 }
-.stzh-card-searchresult__tag-right {
+.stzh-card-searchresult__service, .stzh-card-searchresult__topic {
   font-family: var(--stzh-font-family-heavy);
   font-weight: var(--stzh-font-weight-heavy);
   font-style: var(--stzh-font-style-heavy);
@@ -292,16 +293,20 @@
   position: absolute;
   top: 0;
   right: 0;
-  background-color: var(--tag-right-background-color);
-  color: var(--tag-right-color);
+  background-color: var(--stzh-color-secondary30);
+  color: var(--stzh-color-primary70);
   padding: var(--stzh-space-xsmall) var(--stzh-space-medium);
   text-align: center;
 }
 @media screen and (min-width: 600px) {
-  .stzh-card-searchresult__tag-right {
+  .stzh-card-searchresult__service, .stzh-card-searchresult__topic {
     min-width: 11.25rem;
   }
 }
+.stzh-card-searchresult__service {
+  background-color: var(--service-background-color);
+  color: var(--service-color);
+}
 .stzh-card-searchresult__dateline {
   font-size: var(--stzh-font-micro-font-size);
   line-height: var(--stzh-font-micro-text-line-height);
@@ -315,14 +320,21 @@
   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-milli-font-size);
-  line-height: var(--stzh-font-milli-text-line-height);
-  letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+  font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
+  line-height: var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));
+  letter-spacing: var(--stzh-font-curve-p1-default-text-letter-spacing);
   display: block;
   color: var(--stzh-color-primary70);
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
 }
+@media screen and (min-width: 900px) {
+  .stzh-card-searchresult__heading-link {
+    font-size: var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));
+    line-height: var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));
+    letter-spacing: var(--stzh-font-curve-p1-medium-text-letter-spacing);
+  }
+}
 .stzh-card-searchresult__event-infos {
   font-size: var(--stzh-font-micro-font-size);
   line-height: var(--stzh-font-micro-text-line-height);
@@ -379,7 +391,6 @@
   align-items: center;
   min-height: 1.5rem;
   gap: var(--stzh-space-xsmall);
-  white-space: nowrap;
 }
 .stzh-card-searchresult__meta-list-item::before, .stzh-card-searchresult__download-meta-list-item::before {
   content: "";
@@ -408,15 +419,21 @@
 .stzh-card-searchresult--has-link:has(.stzh-card-searchresult__heading-link:hover) .stzh-card-searchresult__heading-link::before {
   background-color: var(--stzh-color-secondary10);
 }
-.stzh-card-searchresult--has-link:has(.stzh-card-searchresult__heading-link:hover) .stzh-card-searchresult__tag-left {
+.stzh-card-searchresult--has-link:has(.stzh-card-searchresult__heading-link:hover) .stzh-card-searchresult__tag {
   --color: var(--stzh-color-secondary60);
 }
-.stzh-card-searchresult--has-tag-right .stzh-card-searchresult__heading-wrapper {
-  margin-top: var(--stzh-space-big);
-}
 .stzh-card-searchresult--has-breadcrumb .stzh-card-searchresult__heading-wrapper {
   margin-top: var(--stzh-space-xlarge);
 }
+.stzh-card-searchresult--has-tag .stzh-card-searchresult__heading-wrapper {
+  margin-top: var(--stzh-space-xxxlarge);
+}
+.stzh-card-searchresult--has-service .stzh-card-searchresult__heading-wrapper, .stzh-card-searchresult--has-topic .stzh-card-searchresult__heading-wrapper {
+  margin-top: var(--stzh-space-xxxxlarge);
+}
+.stzh-card-searchresult--has-service.stzh-card-searchresult--has-image-right .stzh-card-searchresult__heading-wrapper, .stzh-card-searchresult--has-topic.stzh-card-searchresult--has-image-right .stzh-card-searchresult__heading-wrapper {
+  margin-top: var(--stzh-space-xxxlarge);
+}
 .stzh-card-searchresult--has-image .stzh-card-searchresult__image {
   z-index: 1;
   position: relative;
@@ -431,7 +448,7 @@
     margin-bottom: var(--stzh-space-xsmall);
   }
 }
-.stzh-card-searchresult--has-image-right .stzh-card-searchresult__tag-right {
+.stzh-card-searchresult--has-image-right .stzh-card-searchresult__service, .stzh-card-searchresult--has-image-right .stzh-card-searchresult__topic {
   position: static;
 }
 .stzh-card-searchresult--has-description-wrapper .stzh-card-searchresult__heading-wrapper, .stzh-card-searchresult--has-meta .stzh-card-searchresult__heading-wrapper, .stzh-card-searchresult--has-download .stzh-card-searchresult__heading-wrapper {

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

@@ -10,7 +10,8 @@ export class StzhCardSearchresult {
     this.handleCardClick = (originalEvent) => {
       this.stzhClick.emit({
         component: "stzh-card-searchresult",
-        originalEvent
+        originalEvent,
+        href: this.href
       });
     };
     this.localization = undefined;
@@ -21,11 +22,13 @@ export class StzhCardSearchresult {
     this.heading = "";
     this.headingLevel = "3";
     this.description = "";
-    this.tagLeft = undefined;
-    this.tagRight = undefined;
+    this.tag = undefined;
+    this.topic = undefined;
+    this.service = undefined;
     this.dateline = undefined;
     this.meta = undefined;
     this.breadcrumbItems = undefined;
+    this.datalistItems = [];
     this.eventDateStart = undefined;
     this.eventDateEnd = undefined;
     this.eventLocation = undefined;
@@ -50,22 +53,6 @@ export class StzhCardSearchresult {
       this._meta = newValue;
     }
   }
-  breadcrumbItemsWatcher(newValue) {
-    if (!newValue) {
-      this._breadcrumbItems = [];
-    }
-    else if (typeof newValue === "string") {
-      try {
-        this._breadcrumbItems = JSON.parse(newValue);
-      }
-      catch (e) {
-        this._breadcrumbItems = [];
-      }
-    }
-    else {
-      this._breadcrumbItems = newValue;
-    }
-  }
   downloadMetaWatcher(newValue) {
     if (!newValue) {
       this._downloadMeta = [];
@@ -93,7 +80,6 @@ export class StzhCardSearchresult {
   }
   async componentWillLoad() {
     this.metaWatcher(this.meta);
-    this.breadcrumbItemsWatcher(this.breadcrumbItems);
     this.downloadMetaWatcher(this.downloadMeta);
     if (!this.localization) {
       this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "card-searchresult");
@@ -114,28 +100,32 @@ export class StzhCardSearchresult {
       "stzh-card-searchresult--has-description": hasDescription,
       "stzh-card-searchresult--has-description-wrapper": hasDescription || !!eventDateStart || !!this.eventLocation,
       "stzh-card-searchresult--has-link": !!this.href,
-      "stzh-card-searchresult--has-tag-right": !!this.tagRight,
+      "stzh-card-searchresult--has-service": !!this.service,
+      "stzh-card-searchresult--has-tag": !!this.tag,
+      "stzh-card-searchresult--has-topic": !!this.topic,
       "stzh-card-searchresult--has-image": hasImage,
       "stzh-card-searchresult--has-image-default": hasImage && this.imagePosition === "default",
       "stzh-card-searchresult--has-image-right": hasImage && this.imagePosition === "right",
       "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.length > 0,
+      "stzh-card-searchresult--has-breadcrumb": !!this.breadcrumbItems,
     };
     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.tagLeft &&
-      h("stzh-tag", { class: "stzh-card-searchresult__tag-left", label: this.tagLeft, nonInteractive: true }), h("div", { class: "stzh-card-searchresult__heading-wrapper" }, this._breadcrumbItems.length > 0 &&
-      h("stzh-breadcrumb", { class: "stzh-card-searchresult__breadcrumb", items: this._breadcrumbItems, variant: "teaser" }), this.dateline &&
+    return (h(Host, { "has-image": hasImage }, h("article", { class: classes, "aria-label": this.heading, role: "listitem" }, this.tag &&
+      h("stzh-tag", { class: "stzh-card-searchresult__tag", label: this.tag, nonInteractive: true }), h("div", { class: "stzh-card-searchresult__heading-wrapper" }, this.breadcrumbItems &&
+      h("stzh-breadcrumb", { class: "stzh-card-searchresult__breadcrumb", items: this.breadcrumbItems, variant: "teaser" }), this.dateline &&
       h("div", { class: "stzh-card-searchresult__dateline" }, this.dateline), h(Heading, { class: "stzh-card-searchresult__heading" }, h(HeadingLink, { ref: (el) => (this.headingLinkElement = el), class: "stzh-card-searchresult__heading-link", href: this.href, target: this.target, download: this.download, onClick: this.handleCardClick }, h("div", { class: "stzh-card-searchresult__heading-link-text", ref: (el) => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" }))))), h("div", { class: "stzh-card-searchresult__description-wrapper" }, (eventDateStart || this.eventLocation) &&
       h("div", { class: "stzh-card-searchresult__event-infos" }, eventDateStart &&
         h("div", { class: "stzh-card-searchresult__event-date" }, h("span", null, this.dateAdapter.format(eventDateStart, "dateLong"), ",\u00A0"), this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, "time")), this.eventLocation &&
         h("div", { class: "stzh-card-searchresult__event-location" }, this.eventLocation)), h("div", { class: "stzh-card-searchresult__description" }, this.description ? this.description : h("slot", { name: "description" }))), h("div", { class: "stzh-card-searchresult__image" }, eventDateStart &&
-      h("div", { class: "stzh-card-searchresult__event-date-teaser" }, h("div", { class: "stzh-card-searchresult__event-date-teaser-day-name" }, this.localization.$globals.dayNamesShort[eventDateStart.getDay()]), h("div", { class: "stzh-card-searchresult__event-date-teaser-day" }, eventDateStart.getDate() < 10 && '0', eventDateStart.getDate()), h("div", { class: "stzh-card-searchresult__event-date-teaser-month" }, this.localization.$globals.monthNamesShort[eventDateStart.getMonth()])), this.tagRight && h("div", { class: "stzh-card-searchresult__tag-right" }, this.tagRight), h("slot", { name: "image" })), this._meta.length > 0 &&
-      h("div", { class: "stzh-card-searchresult__meta" }, h("div", { class: "stzh-card-searchresult__meta-list" }, this._meta.map((meta) => h(Fragment, null, h("div", { class: "stzh-card-searchresult__meta-list-item" }, meta))))), (!!this.downloadHeading || this._downloadMeta.length > 0) &&
-      h("div", { class: "stzh-card-searchresult__download" }, h("div", { class: "stzh-card-searchresult__download-data" }, this.downloadHeading &&
-        h("div", { class: "stzh-card-searchresult__download-heading" }, this.downloadHeading), this._downloadMeta.length > 0 &&
-        h("div", { class: "stzh-card-searchresult__download-meta-list" }, this._downloadMeta.map((meta) => h(Fragment, null, h("div", { class: "stzh-card-searchresult__download-meta-list-item" }, meta))))), h("div", { class: "stzh-card-searchresult__download-button" }, h("stzh-icon", { class: "stzh-card-searchresult__download-icon", name: "download" }))))));
+      h("div", { class: "stzh-card-searchresult__event-date-teaser" }, h("div", { class: "stzh-card-searchresult__event-date-teaser-day-name" }, this.localization.$globals.dayNamesShort[eventDateStart.getDay()]), h("div", { class: "stzh-card-searchresult__event-date-teaser-day" }, eventDateStart.getDate() < 10 && '0', eventDateStart.getDate()), h("div", { class: "stzh-card-searchresult__event-date-teaser-month" }, this.localization.$globals.monthNamesShort[eventDateStart.getMonth()])), this.topic && h("div", { class: "stzh-card-searchresult__topic" }, this.topic), this.service && h("div", { class: "stzh-card-searchresult__service" }, this.service), h("slot", { name: "image" })), (this._meta.length > 0 || this.datalistItems || (!!this.downloadHeading || this._downloadMeta.length > 0)) &&
+      h("div", { class: "stzh-card-searchresult__meta-wrapper" }, this.datalistItems &&
+        h("stzh-datalist", { class: "stzh-card-searchresult__datalist", items: this.datalistItems }), this._meta.length > 0 &&
+        h("div", { class: "stzh-card-searchresult__meta" }, h("div", { class: "stzh-card-searchresult__meta-list" }, this._meta.map((meta) => h(Fragment, null, h("div", { class: "stzh-card-searchresult__meta-list-item" }, meta))))), (!!this.downloadHeading || this._downloadMeta.length > 0) &&
+        h("div", { class: "stzh-card-searchresult__download" }, h("div", { class: "stzh-card-searchresult__download-data" }, this.downloadHeading &&
+          h("div", { class: "stzh-card-searchresult__download-heading" }, this.downloadHeading), this._downloadMeta.length > 0 &&
+          h("div", { class: "stzh-card-searchresult__download-meta-list" }, this._downloadMeta.map((meta) => h(Fragment, null, h("div", { class: "stzh-card-searchresult__download-meta-list-item" }, meta))))), h("div", { class: "stzh-card-searchresult__download-button" }, h("stzh-icon", { class: "stzh-card-searchresult__download-icon", name: "download" })))))));
   }
   static get is() { return "stzh-card-searchresult"; }
   static get encapsulation() { return "scoped"; }
@@ -155,13 +145,13 @@ export class StzhCardSearchresult {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "StzhCardSearchresultLocalizedText",
+          "original": "StzhLocaleComponent",
           "resolved": "{ $locale: \"de\" | \"en\"; $formats: StzhLocaleFormats; $formatsIso: StzhLocaleFormats; $formatsLegacy: StzhLocaleFormats; $globals: StzhLocaleGlobals; }",
           "references": {
-            "StzhCardSearchresultLocalizedText": {
+            "StzhLocaleComponent": {
               "location": "import",
-              "path": "./stzh-card-searchresult.localization",
-              "id": "src/components/stzh-card-searchresult/stzh-card-searchresult.localization.ts::StzhCardSearchresultLocalizedText"
+              "path": "../../utils/translation-utils",
+              "id": "src/utils/translation-utils.ts::StzhLocaleComponent"
             }
           }
         },
@@ -294,7 +284,24 @@ export class StzhCardSearchresult {
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "tagLeft": {
+      "tag": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tag"
+        },
+        "attribute": "tag",
+        "reflect": false
+      },
+      "topic": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -306,12 +313,12 @@ export class StzhCardSearchresult {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Tag left"
+          "text": "Topic"
         },
-        "attribute": "tag-left",
+        "attribute": "topic",
         "reflect": false
       },
-      "tagRight": {
+      "service": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -323,9 +330,9 @@ export class StzhCardSearchresult {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Tag right"
+          "text": "Service"
         },
-        "attribute": "tag-right",
+        "attribute": "service",
         "reflect": false
       },
       "dateline": {
@@ -385,6 +392,30 @@ export class StzhCardSearchresult {
         "attribute": "breadcrumb-items",
         "reflect": false
       },
+      "datalistItems": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhDatalistItemEntry[] | string",
+          "resolved": "StzhDatalistItemEntry[] | string",
+          "references": {
+            "StzhDatalistItemEntry": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhDatalistItemEntry"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Datalist items"
+        },
+        "attribute": "datalist-items",
+        "reflect": false,
+        "defaultValue": "[]"
+      },
       "eventDateStart": {
         "type": "string",
         "mutable": false,
@@ -534,7 +565,7 @@ export class StzhCardSearchresult {
         },
         "complexType": {
           "original": "StzhCardSearchresultClickEvent",
-          "resolved": "{ component: \"stzh-card-searchresult\"; originalEvent: MouseEvent; }",
+          "resolved": "{ component: \"stzh-card-searchresult\"; originalEvent: MouseEvent; href: string; }",
           "references": {
             "StzhCardSearchresultClickEvent": {
               "location": "import",
@@ -550,9 +581,6 @@ export class StzhCardSearchresult {
     return [{
         "propName": "meta",
         "methodName": "metaWatcher"
-      }, {
-        "propName": "breadcrumbItems",
-        "methodName": "breadcrumbItemsWatcher"
       }, {
         "propName": "downloadMeta",
         "methodName": "downloadMetaWatcher"

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 {\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  StzhCardSearchresultClickEvent,\n  StzhBreadcrumbItem,\n  StzhLocaleAdapter\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nimport { StzhCardSearchresultLocalizedText } from './stzh-card-searchresult.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-searchresult\",\n  styleUrl: \"stzh-card-searchresult.scss\",\n  scoped: true\n})\nexport class StzhCardSearchresult {\n  /** Translation strings */\n  @Prop() localization: StzhCardSearchresultLocalizedText;\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 left */\n  @Prop() tagLeft: string;\n\n  /** Tag right */\n  @Prop() tagRight: 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  private _breadcrumbItems: StzhBreadcrumbItem[];\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(\"breadcrumbItems\")\n  breadcrumbItemsWatcher(newValue: string | StzhBreadcrumbItem[]) {\n    if (!newValue) {\n      this._breadcrumbItems = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._breadcrumbItems = JSON.parse(newValue);\n      } catch (e) {\n        this._breadcrumbItems = [];\n      }\n    } else {\n      this._breadcrumbItems = 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    });\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.breadcrumbItemsWatcher(this.breadcrumbItems);\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-tag-right\": !!this.tagRight,\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.length > 0,\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.tagLeft &&\n            <stzh-tag\n              class=\"stzh-card-searchresult__tag-left\"\n              label={this.tagLeft}\n              nonInteractive={true}\n            ></stzh-tag>\n          }\n\n          <div class=\"stzh-card-searchresult__heading-wrapper\">\n            {this._breadcrumbItems.length > 0 &&\n              <stzh-breadcrumb\n                class=\"stzh-card-searchresult__breadcrumb\"\n                items={this._breadcrumbItems}\n                variant=\"teaser\"\n              ></stzh-breadcrumb>\n            }\n\n            {this.dateline &&\n              <div class=\"stzh-card-searchresult__dateline\">{this.dateline}</div>\n            }\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 &&\n                  <div class=\"stzh-card-searchresult__event-location\">\n                    {this.eventLocation}\n                  </div>\n                }\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'}{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.tagRight && <div class=\"stzh-card-searchresult__tag-right\">{this.tagRight}</div>}\n            <slot name=\"image\"></slot>\n          </div>\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\">\n                    {this.downloadHeading}\n                  </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        </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 {\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  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 &&\n            <stzh-tag\n              class=\"stzh-card-searchresult__tag\"\n              label={this.tag}\n              nonInteractive={true}\n            ></stzh-tag>\n          }\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 &&\n              <div class=\"stzh-card-searchresult__dateline\">{this.dateline}</div>\n            }\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 &&\n                  <div class=\"stzh-card-searchresult__event-location\">\n                    {this.eventLocation}\n                  </div>\n                }\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'}{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\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-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\">\n                        {this.downloadHeading}\n                      </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"]}