@oiz/stzh-components 4.3.0 → 4.3.2

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

@@ -3,12 +3,23 @@ import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
+import {
+  clickElementWithoutHrefRedirect,
+  expectIsVisible,
+  getComponentByTestId,
+  waitForElement
+} from "../../../.storybook/utils/component-test-utils";
+import { expect } from "@storybook/jest";
+import { userEvent } from "@storybook/testing-library";
 
 const COMPONENT_NAME = 'stzh-card';
 const story = createComponentStory(COMPONENT_NAME);
 
+const CARD_TEST_ID = 'CARD_TEST_ID';
+let stzhCardEl;
+
 const TEMPLATE = `
-<stzh-card>
+<stzh-card data-testid="${CARD_TEST_ID}">
   <img slot="image" src="media/images/example.jpg" loading="lazy" alt="Example image" />
   <div slot="content">Card Content</div>
   <stzh-status
@@ -21,7 +32,7 @@ const TEMPLATE = `
 `;
 
 const TEMPLATE_SELECTABLE = `
-<stzh-card>
+<stzh-card data-testid="${CARD_TEST_ID}">
   <img slot="image" src="media/images/example.jpg" loading="lazy" alt="Example image" />
   <div slot="content">Card Content</div>
   <stzh-chip slot="meta" label="Tag"></stzh-chip>
@@ -29,7 +40,7 @@ const TEMPLATE_SELECTABLE = `
 `;
 
 const TEMPLATE_STARRABLE = `
-<stzh-card>
+<stzh-card data-testid="${CARD_TEST_ID}">
   <div slot="content">Card Content</div>
 </stzh-card>
 `;
@@ -40,7 +51,7 @@ export default {
   parameters: {
     layout: 'padded',
     actions: {
-      handles: ['stzhCollapse', 'stzhClick', 'stzhStarClick', 'stzhSubtitleClick', 'stzhActionClick'],
+      handles: ['stzhCollapse', 'stzhClick', 'stzhStarClick', 'stzhSubtitleClick', 'stzhActionClick', 'stzhHeaderActionClick'],
     },
     docs: {
       description: {
@@ -55,18 +66,17 @@ export default {
   },
   decorators: [
     withActions,
-
   ],
 };
 
 const headerActions = [
   {
-    'id': 'delete',
+    'id': 'header-action-delete',
     'icon': 'delete',
-    'label': 'Action',
+    'label': 'Delete',
   },
   {
-    'id': 'message',
+    'id': 'header-action-message',
     'icon': 'mail',
     'badge': '3',
     'label': 'Messages',
@@ -105,19 +115,145 @@ const footerActions = [
 export const Default = {
   render: (args) => story(args, TEMPLATE),
   args: {
-    heading: 'Lorem ipsum',
-    subtitle: 'Dolor si',
+    heading: 'Heading',
+    subtitle: 'Subtitle',
+    headerActions: headerActions,
+    name: 'default-card',
+    footerActions: [
+      {
+        'id': 'footer-action-1',
+        'icon': 'arrow-right',
+        'label': 'Details',
+        'variant': 'default',
+        'iconPosition': 'right',
+      },
+    ],
+  },
+  play: async ({ canvasElement, step }) => {
+
+    stzhCardEl = await getComponentByTestId(canvasElement, CARD_TEST_ID);
+
+    await step('Assert attributes', async () => {
+      expect(stzhCardEl).toHaveAttribute('heading', 'Heading');
+      expect(stzhCardEl).toHaveAttribute('subtitle', 'Subtitle');
+      expect(stzhCardEl).toHaveAttribute('name', 'default-card');
+      expect(stzhCardEl).toHaveAttribute('variant', 'default');
+      expect(stzhCardEl).toHaveAttribute('role', 'listitem');
+      expect(stzhCardEl).toHaveAttribute('aria-label', 'Heading');
+      expect(stzhCardEl).toHaveAttribute('background-color', 'grey');
+      expect(stzhCardEl).toHaveAttribute('heading-level', '3');
+      expect(stzhCardEl).not.toHaveAttribute('href');
+
+      const imageLinkEl = stzhCardEl.querySelector('a.stzh-card__image-link');
+      expect(imageLinkEl).not.toHaveAttribute('href');
+      expect(imageLinkEl).not.toHaveAttribute('target');
+
+      const titleLinkEl = stzhCardEl.querySelector('a.stzh-card__title-link');
+      expect(titleLinkEl).not.toHaveAttribute('href');
+      expect(titleLinkEl).not.toHaveAttribute('target');
+    });
+
+    await step('Assert stzhClick event details (click on article element)', async () => {
+
+      let stzhClickEventDetail;
+      stzhCardEl.addEventListener('stzhClick', (ev) => {
+        stzhClickEventDetail = ev.detail;
+      });
+
+      const articleEl = stzhCardEl.querySelector('article');
+      await userEvent.click(articleEl);
+      // component is stzh-card
+      expect(stzhClickEventDetail).toHaveProperty('component', 'stzh-card');
+      // href is not existent
+      expect(stzhClickEventDetail).not.toHaveProperty('href');
+      // originalEvent is PointerEvent
+      expect(stzhClickEventDetail.originalEvent).toHaveProperty('type', 'click');
+    });
+
+    await step('Assert stzhActionClick event details (click on footer action button)', async () => {
+
+      let stzhClickEventDetail;
+      stzhCardEl.addEventListener('stzhActionClick', (ev) => {
+        stzhClickEventDetail = ev.detail;
+      });
+
+      const footerActionButtonEl = stzhCardEl.querySelector('stzh-actionset stzh-button.stzh-actionset__action');
+      await userEvent.click(footerActionButtonEl);
+
+      // component is stzh-actionset
+      expect(stzhClickEventDetail).toHaveProperty('component', 'stzh-actionset');
+      // originalEvent is PointerEvent
+      expect(stzhClickEventDetail.originalEvent).toHaveProperty('type', 'click');
+      // action id is present
+      expect(stzhClickEventDetail.action).toHaveProperty('id', 'footer-action-1');
+    });
+  },
+};
+
+export const WithHref = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    heading: 'Heading',
+    subtitle: 'Subtitle',
+    name: 'card',
+    href: 'https://www.stadt-zuerich.ch',
+    target: '_blank',
     headerActions: headerActions,
     footerActions: [
       {
-        'id': 'action-1',
+        'id': 'footer-action-1',
         'icon': 'arrow-right',
-        'label': 'Lorem',
+        'label': 'Details',
         'variant': 'default',
         'iconPosition': 'right',
       },
     ],
   },
+  play: async ({ canvasElement, step }) => {
+
+    stzhCardEl = await getComponentByTestId(canvasElement, CARD_TEST_ID);
+
+    await step('Assert attributes', async () => {
+
+      expect(stzhCardEl).toHaveAttribute('href', 'https://www.stadt-zuerich.ch');
+      expect(stzhCardEl).toHaveAttribute('target', '_blank');
+
+      const imageLinkEl = stzhCardEl.querySelector('a.stzh-card__image-link');
+      expect(imageLinkEl).toHaveAttribute('href', 'https://www.stadt-zuerich.ch');
+      expect(imageLinkEl).toHaveAttribute('target', '_blank');
+
+      const titleLinkEl = stzhCardEl.querySelector('a.stzh-card__title-link');
+      expect(titleLinkEl).toHaveAttribute('href', 'https://www.stadt-zuerich.ch');
+      expect(titleLinkEl).toHaveAttribute('target', '_blank');
+    });
+
+    await step('Assert stzhClick event details (click on image element)', async () => {
+
+      const imageLinkEl = stzhCardEl.querySelector('a.stzh-card__image-link');
+
+      const capturedStzhClickEvent = await clickElementWithoutHrefRedirect(imageLinkEl, 'stzhClick', {
+        eventTarget: stzhCardEl,
+      });
+
+      expect(capturedStzhClickEvent.detail.component).toBe('stzh-card');
+      expect(capturedStzhClickEvent.detail.href).toBe('https://www.stadt-zuerich.ch');
+    });
+
+    await step('Assert stzhActionClick event details (click on footer action button)', async () => {
+
+      let stzhClickEventDetail;
+      stzhCardEl.addEventListener('stzhActionClick', (ev) => {
+        stzhClickEventDetail = ev.detail;
+      });
+
+      const footerActionButtonEl = stzhCardEl.querySelector('stzh-actionset stzh-button.stzh-actionset__action');
+      await userEvent.click(footerActionButtonEl);
+
+      expect(stzhClickEventDetail).toHaveProperty('component', 'stzh-actionset');
+      expect(stzhClickEventDetail.originalEvent).toHaveProperty('type', 'click');
+      expect(stzhClickEventDetail.action).toHaveProperty('id', 'footer-action-1');
+    });
+  },
 };
 
 export const Selectable = {

package/dist/collection/components/{CMS/stzh-card-navigation → stzh-card-navigation}/stzh-card-navigation.e2e.js

@@ -1,6 +1,6 @@
 import { test } from "@playwright/test";
-import { visualDiff } from "../../../../.build/test/utils";
-const URL = "components-cms-cardnavigation";
+import { visualDiff } from "../../../.build/test/utils";
+const URL = "components-cardnavigation";
 const STORIES = [
     "content-navigation",
     "without-lead",

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

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-card-navigation.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-card-navigation/stzh-card-navigation.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,2BAA2B,CAAC;AAExC,MAAM,OAAO,GAAG;IACd,oBAAoB;IACnB,cAAc;IACd,cAAc;CAChB,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IACpC,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACtD,MAAM,UAAU,CAAC;gBACf,OAAO;gBACP,IAAI;gBACJ,GAAG,EAAE,GAAG;aACT,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../.build/test/utils\";\n\nconst URL = \"components-cardnavigation\";\n\nconst STORIES = [\n  \"content-navigation\",\n   \"without-lead\",\n   \"with-hyphens\"\n];\n\ntest.describe(\"card-navigation\", () => {\n  STORIES.forEach((storyId) => {\n    test(`story ${storyId} visual diff`, async ({ page }) => {\n      await visualDiff({\n        storyId,\n        page,\n        url: URL,\n      });\n    });\n  });\n});\n"]}

package/dist/collection/components/{CMS/stzh-card-navigation → stzh-card-navigation}/stzh-card-navigation.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { hasSlot } from "../../../utils/utils";
+import { hasSlot } from "../../utils/utils";
 /**
  * @slot heading - Heading text (alternative for heading property)
  * @slot lead - Lead text (alternative for lead property)
@@ -39,7 +39,7 @@ export class StzhCardNavigation {
         };
         const Heading = `h${this.headingLevel}`;
         const TitleLink = this.href ? 'a' : 'button';
-        return (h(Host, { key: '3393431bd69c151af056dc870ca2a4a2d0c5ced3', "has-lead": hasLead }, h("article", { key: '667e744cb52f37173895986baab41d8c1dd34dce', class: classes, "aria-label": this.heading, role: "listitem" }, h("div", { key: '52b9292c459198070dd755f406c931fb50867841', class: "stzh-card-navigation__wrapper" }, h(Heading, { key: '9b0db871e70bed5c44c783e3ba943139d6278396', class: "stzh-card-navigation__title" }, h(TitleLink, { key: 'b083fc0b84503e58ae4b734c9ddd72f0dea03949', ref: el => (this.titleLinkElement = el), class: "stzh-card-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, this.heading ? (h("div", { ref: el => (this.headingTextElement = el), innerHTML: this.heading })) : (h("div", { ref: el => (this.headingTextElement = el) }, h("slot", { name: "heading" }))))), h("div", { key: '30a7d08a3a7a8b815aa82bd59c9d510afe46f366', class: "stzh-card-navigation__lead" }, this.lead ? this.lead : h("slot", { name: "lead" }))), h("div", { key: '670d21d2482f625a70547823dc15abc598d6bb4b', class: "stzh-card-navigation__arrow" }, h("stzh-icon", { key: '93aa6f995119f80e954bc31b087882bd615c2ea0', class: "stzh-card-navigation__arrow-icon", name: "arrow-right" })))));
+        return (h(Host, { key: '6baeef74c234db5b0ff49edb94f8be658db8fa51', "has-lead": hasLead }, h("article", { key: '0e4c40bbe12e18da21d462e3282a41780c83a1ec', class: classes, "aria-label": this.heading, role: "listitem" }, h("div", { key: '15d760a01d78bb1ad7e20ef21a05f5724721db7b', class: "stzh-card-navigation__wrapper" }, h(Heading, { key: '866ed2ec132488eb7d7baf975f4c22cab4d9c88f', class: "stzh-card-navigation__title" }, h(TitleLink, { key: '82d857e1ba4aa79678d30eb98817a1720e3ae2c2', ref: el => (this.titleLinkElement = el), class: "stzh-card-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, this.heading ? (h("div", { ref: el => (this.headingTextElement = el), innerHTML: this.heading })) : (h("div", { ref: el => (this.headingTextElement = el) }, h("slot", { name: "heading" }))))), h("div", { key: '3bdc587f8355b46c6810838cd24fd1618477556c', class: "stzh-card-navigation__lead" }, this.lead ? this.lead : h("slot", { name: "lead" }))), h("div", { key: 'c88a378cbf902150e145d46e6bf421e550587b7e', class: "stzh-card-navigation__arrow" }, h("stzh-icon", { key: '75cc2dfb254007fb3b7b6b19ead4d4a2a2ea49d1', class: "stzh-card-navigation__arrow-icon", name: "arrow-right" })))));
     }
     static get is() { return "stzh-card-navigation"; }
     static get encapsulation() { return "scoped"; }
@@ -197,7 +197,7 @@ export class StzhCardNavigation {
                     "references": {
                         "StzhCardNavigationClickEvent": {
                             "location": "import",
-                            "path": "../../../index",
+                            "path": "../../index",
                             "id": "src/index.ts::StzhCardNavigationClickEvent"
                         }
                     }

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

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-card-navigation.js","sourceRoot":"","sources":["../../../../src/components/stzh-card-navigation/stzh-card-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nimport { StzhCardNavigationClickEvent } 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  /** 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<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      'stzh-card-navigation--hyphens': this.hyphensEnabled,\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                {this.heading ? (\n                  <div ref={el => (this.headingTextElement = el as HTMLDivElement)} innerHTML={this.heading}></div>\n                ) : (\n                  <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>\n                    <slot name=\"heading\"></slot>\n                  </div>\n                )}\n              </TitleLink>\n            </Heading>\n\n            <div class=\"stzh-card-navigation__lead\">{this.lead ? this.lead : <slot name=\"lead\"></slot>}</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/{CMS/stzh-card-navigation → stzh-card-navigation}/stzh-card-navigation.stories.js

@@ -1,8 +1,8 @@
-import { createComponentStory } from '../../../utils/story-utils';
+import { createComponentStory } from '../../utils/story-utils';
 import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
-import { getFigmaLink } from '../../../../figma';
+import { getFigmaLink } from '../../../figma';
 
 const COMPONENT_NAME = 'stzh-card-navigation';
 const story = createComponentStory(COMPONENT_NAME);
@@ -12,7 +12,7 @@ const TEMPLATE = `
 `;
 
 export default {
-  title: 'Components/CMS/CardNavigation',
+  title: 'Components/CardNavigation',
   component: COMPONENT_NAME,
   parameters: {
     layout: 'padded',

package/dist/collection/components/{CMS/stzh-card-searchresult → stzh-card-searchresult}/stzh-card-searchresult.e2e.js

@@ -1,6 +1,6 @@
 import { test } from "@playwright/test";
-import { visualDiff } from "../../../../.build/test/utils";
-const URL = "components-csm-cardsearchresult";
+import { visualDiff } from "../../../.build/test/utils";
+const URL = "components-cardsearchresult";
 const STORIES = [
     "media",
     "with-hyphens",

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

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-card-searchresult.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-card-searchresult/stzh-card-searchresult.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,6BAA6B,CAAC;AAE1C,MAAM,OAAO,GAAG;IACd,OAAO;IACP,cAAc;IACd,yBAAyB;IACzB,SAAS;IACT,SAAS;IACT,UAAU;IACV,WAAW;IACX,OAAO;IACP,8BAA8B;IAC9B,aAAa;IACb,wBAAwB;IACxB,qBAAqB;IACrB,iBAAiB;IACjB,SAAS;IACT,8BAA8B;IAC9B,eAAe;CAChB,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACtC,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACtD,MAAM,UAAU,CAAC;gBACf,OAAO;gBACP,IAAI;gBACJ,GAAG,EAAE,GAAG;aACT,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../.build/test/utils\";\n\nconst URL = \"components-cardsearchresult\";\n\nconst STORIES = [\n  \"media\",\n  \"with-hyphens\",\n  \"city-counsil-resolution\",\n  \"service\",\n  \"website\",\n  \"document\",\n  \"job-offer\",\n  \"event\",\n  \"event-with-placeholder-image\",\n  \"publication\",\n  \"publication-statistics\",\n  \"official-collection\",\n  \"business-report\",\n  \"gallery\",\n  \"forms-and-information-sheets\",\n  \"practice-pool\",\n];\n\ntest.describe(\"card-searchresult\", () => {\n  STORIES.forEach((storyId) => {\n    test(`story ${storyId} visual diff`, async ({ page }) => {\n      await visualDiff({\n        storyId,\n        page,\n        url: URL\n      });\n    });\n  });\n});\n"]}

package/dist/collection/components/{CMS/stzh-card-searchresult → stzh-card-searchresult}/stzh-card-searchresult.js

@@ -1,5 +1,5 @@
 import { Fragment, h, Host } from "@stencil/core";
-import { hasSlot } from "../../../utils/utils";
+import { hasSlot } from "../../utils/utils";
 import PlaceholderImage from "./assets/placeholder-image.svg";
 /**
  * @slot heading - Heading text (alternative for heading property)
@@ -123,7 +123,7 @@ export class StzhCardSearchresult {
         };
         const Heading = `h${this.headingLevel}`;
         const HeadingLink = this.href ? 'a' : 'div';
-        return (h(Host, { key: '9f52f014b5610e1ac66a29bd2e5f9b680e44b9a8', "has-image": hasImage }, h("article", { key: 'e9e11cb6bc606fc0b8c6b7d8b5cca62d0c822b22', class: classes, "aria-label": this.heading, role: "listitem" }, this.tag && h("stzh-tag", { key: '8d992ee6baaef8680563b01709221edda007f84c', class: "stzh-card-searchresult__tag", label: this.tag, nonInteractive: true }), h("div", { key: '47996f700bdbe2d20ad44d71dc78dac0e02d1db1', class: "stzh-card-searchresult__heading-wrapper" }, this.breadcrumbItems && (h("stzh-breadcrumb", { key: '7e94de0e8bc190c8329c6060028d3b8ecae62428', class: "stzh-card-searchresult__breadcrumb", items: this.breadcrumbItems, variant: "teaser" })), this.dateline && h("div", { key: '091936c4b313d18810af77baaf34dbcadcb42e4d', class: "stzh-card-searchresult__dateline" }, this.dateline), h(Heading, { key: 'bb3dbe0022e7da6e7d365e6112dbaee0539f4341', class: "stzh-card-searchresult__heading" }, h(HeadingLink, { key: 'f2297ebd653ffcf28921e796199bc6647a7e1b16', ref: el => (this.headingLinkElement = el), class: "stzh-card-searchresult__heading-link", href: this.href, target: this.target, download: this.download, onClick: this.handleCardClick }, this.heading ? (h("div", { class: "stzh-card-searchresult__heading-link-text", ref: el => (this.headingTextElement = el), innerHTML: this.heading })) : (h("div", { class: "stzh-card-searchresult__heading-link-text", ref: el => (this.headingTextElement = el) }, h("slot", { name: "heading" })))))), h("div", { key: '0e1e73ac59e0c0e495cc4b7adfd52ffa1cad0669', class: "stzh-card-searchresult__description-wrapper" }, (eventDateStart || this.eventLocation) && (h("div", { key: 'ccf06877404e8bbec139f2a434a804766c462b0c', class: "stzh-card-searchresult__event-infos" }, eventDateStart && (h("div", { key: 'b814cb1b0229507c988505a2d3637ee9d9e427b3', class: "stzh-card-searchresult__event-date" }, h("span", { key: '146d72fc9cf251f6b62b5d7778ffbe7c325cf3ba' }, this.dateAdapter.format(eventDateStart, 'dateLong')), this.hasProperStartAndOrEndDate(eventDateStart, eventDateEnd) && (h("span", { key: 'e92eeebe9110504d3feb3c61783d42847bda4dbe' }, ",\u00A0", this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, 'time'))))), this.eventLocation && h("div", { key: '5d9fb7738b5d3ef327bacd55512d516ab2a0e5b7', class: "stzh-card-searchresult__event-location" }, this.eventLocation))), h("div", { key: '5bec7ba382d868e0c5dbd576fc1c06be85db3586', class: "stzh-card-searchresult__description" }, this.description ? this.description : h("slot", { name: "description" }))), h("div", { key: '36ffbf77ffb8e85a96a83b059646dbaa11d193d6', class: "stzh-card-searchresult__image" }, eventDateStart && (h("div", { key: 'a5452e40e5a3f91d6ab7afb9a45a2f6fa3992774', class: "stzh-card-searchresult__event-date-teaser" }, h("div", { key: 'f319566cd791960231cb00ee24d7d530c8328699', class: "stzh-card-searchresult__event-date-teaser-day-name" }, this.localization.$globals.dayNamesShort[eventDateStart.getDay()]), h("div", { key: '16f8311595ed8baa05be82e66600e3ee3898bbb8', class: "stzh-card-searchresult__event-date-teaser-day" }, eventDateStart.getDate() < 10 && '0', eventDateStart.getDate()), h("div", { key: 'e1fb90717f9585da0d02b59673f50a6aa641522d', class: "stzh-card-searchresult__event-date-teaser-month" }, this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]))), this.topic && h("div", { key: '84d40cc8a0984359babd8f4a52c6acc393982a59', class: "stzh-card-searchresult__topic" }, this.topic), this.service && h("div", { key: '4acda86d32ad00db8f9c9b03568ec3e50e82c1e0', class: "stzh-card-searchresult__service" }, this.service), h("slot", { key: '475bd78ea0f24082f0ebdab59d0d1f09a3e30830', name: "image" }), this.placeholderImageEnabled && !hasImageSlot && (h("stzh-ratio", { key: '6860f6f83f00e8ffc1762bf28eec1794daa930e5', ratio: "21:9", "ratio-small": "1:1" }, h("div", { key: '04c4b8b687739015d5f4c8082072e8d6fbc9a407', class: "stzh-card-searchresult__image-placeholder", innerHTML: PlaceholderImage })))), (this._meta.length > 0 || this.datalistItems || !!this.downloadHeading || this._downloadMeta.length > 0) && (h("div", { key: '3c4793cf50456f1a43978d26c1f26ff5fd318e83', class: "stzh-card-searchresult__meta-wrapper" }, this.datalistItems && (h("stzh-datalist", { key: 'c25382d1831e6cd2f85af683125e35e5822a859f', class: "stzh-card-searchresult__datalist", items: this.datalistItems })), this._meta.length > 0 && (h("div", { key: '15b007d227a3bff6e26e8efd14cfa775f930d472', class: "stzh-card-searchresult__meta" }, h("div", { key: '1e29fc122bbfb0f8da2b81af7c45e2c3ea1afa51', 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", { key: '07cb7b838ccd2de4fae15ac0e9ed19342aee8d20', class: "stzh-card-searchresult__download" }, h("div", { key: 'c35e7fd55712ee790d9a6db0bc2ee97a612208a0', class: "stzh-card-searchresult__download-data" }, this.downloadHeading && (h("div", { key: 'd6d377ea87bfba938e15411de6448cfe8f24f3e1', class: "stzh-card-searchresult__download-heading" }, this.downloadHeading)), this._downloadMeta.length > 0 && (h("div", { key: '79c14ba462d51fa570beae2a61b96c1ce6533ff7', 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", { key: '2306d3b96ccf1f4187d800dc533e8295142ee305', class: "stzh-card-searchresult__download-button" }, h("stzh-icon", { key: '3744f20328018f7aa40fae4cf2298dde287ee01f', class: "stzh-card-searchresult__download-icon", name: "download" })))))))));
+        return (h(Host, { key: '6ad4d06898b0ea6d3e94748e81d3302638a12d71', "has-image": hasImage }, h("article", { key: 'ade897bba1a380aa80a2372a446cf2cb28ebad37', class: classes, "aria-label": this.heading, role: "listitem" }, this.tag && h("stzh-tag", { key: '384f159abcdd41f043dd306717a5bc46c84eaa6a', class: "stzh-card-searchresult__tag", label: this.tag, nonInteractive: true }), h("div", { key: '2c5178485689f02d40b276d3517590b9ebfdffba', class: "stzh-card-searchresult__heading-wrapper" }, this.breadcrumbItems && (h("stzh-breadcrumb", { key: 'ec640ba9f1febd69660e33388a6c48a4c9683214', class: "stzh-card-searchresult__breadcrumb", items: this.breadcrumbItems, variant: "teaser" })), this.dateline && h("div", { key: '7be07cc63c0415ac8d2736a1850ea489f9bd1594', class: "stzh-card-searchresult__dateline" }, this.dateline), h(Heading, { key: 'c0a580dfc398730a2f34b5ec9a87eb98e5bef46d', class: "stzh-card-searchresult__heading" }, h(HeadingLink, { key: '116d4e85f528b4610bb374e96d6aba9078cc3fe8', ref: el => (this.headingLinkElement = el), class: "stzh-card-searchresult__heading-link", href: this.href, target: this.target, download: this.download, onClick: this.handleCardClick }, this.heading ? (h("div", { class: "stzh-card-searchresult__heading-link-text", ref: el => (this.headingTextElement = el), innerHTML: this.heading })) : (h("div", { class: "stzh-card-searchresult__heading-link-text", ref: el => (this.headingTextElement = el) }, h("slot", { name: "heading" })))))), h("div", { key: '930549d901b4031384589221af84b30456073098', class: "stzh-card-searchresult__description-wrapper" }, (eventDateStart || this.eventLocation) && (h("div", { key: 'd4179d9c03a694044d30160e85bb2397485c2699', class: "stzh-card-searchresult__event-infos" }, eventDateStart && (h("div", { key: '2591cb7836d7ba51ef7659e87bbb4feb718dcf51', class: "stzh-card-searchresult__event-date" }, h("span", { key: '827e37a240e4ef982984ce25cc96d5a7741ebd59' }, this.dateAdapter.format(eventDateStart, 'dateLong')), this.hasProperStartAndOrEndDate(eventDateStart, eventDateEnd) && (h("span", { key: 'ab507961c5f1db052f96171adf26872e3b7b2cf7' }, ",\u00A0", this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, 'time'))))), this.eventLocation && h("div", { key: '038a9d68837838eaaf0e6e62e179bd4de6271a5d', class: "stzh-card-searchresult__event-location" }, this.eventLocation))), h("div", { key: '351bdd7e66e7e05c53a725374dbf9320088d099f', class: "stzh-card-searchresult__description" }, this.description ? this.description : h("slot", { name: "description" }))), h("div", { key: '2fa3743d7cec3fc5eae748fcf8447970162aa36d', class: "stzh-card-searchresult__image" }, eventDateStart && (h("div", { key: '3f61274d2365b1ee6ce89a8f1f9d95d2780bed7e', class: "stzh-card-searchresult__event-date-teaser" }, h("div", { key: 'a5b3242063e118a130e3dc55b7f5fea8c9cbf5bd', class: "stzh-card-searchresult__event-date-teaser-day-name" }, this.localization.$globals.dayNamesShort[eventDateStart.getDay()]), h("div", { key: '8ff38d2d75564580f5ec2d3ee9278626f06a9928', class: "stzh-card-searchresult__event-date-teaser-day" }, eventDateStart.getDate() < 10 && '0', eventDateStart.getDate()), h("div", { key: '4d192b51db436e2158d91f421b083a98d72fad84', class: "stzh-card-searchresult__event-date-teaser-month" }, this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]))), this.topic && h("div", { key: 'cd4328660085fdb8de571047c5a8090c48123b7d', class: "stzh-card-searchresult__topic" }, this.topic), this.service && h("div", { key: 'a2530097161a312eab865b9d7d649536e745434f', class: "stzh-card-searchresult__service" }, this.service), h("slot", { key: '564131288d1b98ad7bcc27b411e276fda6b24cff', name: "image" }), this.placeholderImageEnabled && !hasImageSlot && (h("stzh-ratio", { key: '1314063779440e340e611e0b4505346a63e0e93f', ratio: "21:9", "ratio-small": "1:1" }, h("div", { key: 'c7c5b6975aeae72fedf13acdea35e5808228a3fc', class: "stzh-card-searchresult__image-placeholder", innerHTML: PlaceholderImage })))), (this._meta.length > 0 || this.datalistItems || !!this.downloadHeading || this._downloadMeta.length > 0) && (h("div", { key: '1680c46a075ae0b703183d8aa8edb370ed146c50', class: "stzh-card-searchresult__meta-wrapper" }, this.datalistItems && (h("stzh-datalist", { key: 'e19675828fb638bcbd93c7c41c1fa9f4d1624687', class: "stzh-card-searchresult__datalist", items: this.datalistItems })), this._meta.length > 0 && (h("div", { key: 'ccb298045c0a99a15f690fc4a67fc74d12600341', class: "stzh-card-searchresult__meta" }, h("div", { key: '2c7e93489d01c9f4cd98b7b9033fee697c6ceb0e', 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", { key: '571cbf8dd7d20d0db84afc542dc49bbb6b83c3d3', class: "stzh-card-searchresult__download" }, h("div", { key: 'fc7c9e3f0d1069ce58772f09a98f8588be5fd91c', class: "stzh-card-searchresult__download-data" }, this.downloadHeading && (h("div", { key: '8f4fb61fa486fcdf99eaa5bd0dae1685c9b31d26', class: "stzh-card-searchresult__download-heading" }, this.downloadHeading)), this._downloadMeta.length > 0 && (h("div", { key: '82dd5efc8fa83aec6176d0a2b71c85eab48d730a', 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", { key: 'b9e1fcd20e00a1493af5becb4ed86088aeabda00', class: "stzh-card-searchresult__download-button" }, h("stzh-icon", { key: '33f035e04965cb8b14ca075e47dcad885b481ec8', class: "stzh-card-searchresult__download-icon", name: "download" })))))))));
     }
     static get is() { return "stzh-card-searchresult"; }
     static get encapsulation() { return "scoped"; }
@@ -148,7 +148,7 @@ export class StzhCardSearchresult {
                     "references": {
                         "StzhLocaleComponent": {
                             "location": "import",
-                            "path": "../../../index",
+                            "path": "../../index",
                             "id": "src/index.ts::StzhLocaleComponent"
                         }
                     }
@@ -376,7 +376,7 @@ export class StzhCardSearchresult {
                     "references": {
                         "StzhBreadcrumbItem": {
                             "location": "import",
-                            "path": "../../../index",
+                            "path": "../../index",
                             "id": "src/index.ts::StzhBreadcrumbItem"
                         }
                     }
@@ -399,7 +399,7 @@ export class StzhCardSearchresult {
                     "references": {
                         "StzhDatalistItemEntry": {
                             "location": "import",
-                            "path": "../../../index",
+                            "path": "../../index",
                             "id": "src/index.ts::StzhDatalistItemEntry"
                         }
                     }
@@ -554,7 +554,7 @@ export class StzhCardSearchresult {
                     "references": {
                         "StzhLocaleAdapter": {
                             "location": "import",
-                            "path": "../../../index",
+                            "path": "../../index",
                             "id": "src/index.ts::StzhLocaleAdapter"
                         }
                     }
@@ -603,7 +603,7 @@ export class StzhCardSearchresult {
                     "references": {
                         "StzhCardSearchresultClickEvent": {
                             "location": "import",
-                            "path": "../../../index",
+                            "path": "../../index",
                             "id": "src/index.ts::StzhCardSearchresultClickEvent"
                         }
                     }

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

@@ -0,0 +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, Element, Event, EventEmitter, Fragment, h, Host, Prop, Watch } from '@stencil/core';\n\nimport {\n  StzhBreadcrumbItem,\n  StzhCardSearchresultClickEvent,\n  StzhDatalistItemEntry,\n  StzhLocaleAdapter,\n  StzhLocaleComponent,\n} from '../../index';\n\nimport { hasSlot } from '../../utils/utils';\nimport PlaceholderImage from './assets/placeholder-image.svg';\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  /** Enable placeholder image if image slot not used */\n  @Prop() placeholderImageEnabled: boolean = false;\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  private hasProperStartAndOrEndDate(startDate: Date | undefined, endDate: Date | undefined) {\n    return !(!!startDate && startDate.getHours() === 0 && !endDate);\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 hasImageSlot = hasSlot(this.element, 'image');\n\n    const eventDateStart = this.eventDateStart && new Date(this.eventDateStart);\n    const eventDateEnd = this.eventDateEnd && new Date(this.eventDateEnd);\n    if (eventDateStart && !hasImageSlot) {\n      this.placeholderImageEnabled = true;\n    }\n\n    const hasImage = hasImageSlot || this.placeholderImageEnabled;\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                {this.heading ? (\n                  <div\n                    class=\"stzh-card-searchresult__heading-link-text\"\n                    ref={el => (this.headingTextElement = el as HTMLDivElement)}\n                    innerHTML={this.heading}\n                  ></div>\n                ) : (\n                  <div\n                    class=\"stzh-card-searchresult__heading-link-text\"\n                    ref={el => (this.headingTextElement = el as HTMLDivElement)}\n                  >\n                    <slot name=\"heading\"></slot>\n                  </div>\n                )}\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')}</span>\n                    {this.hasProperStartAndOrEndDate(eventDateStart, eventDateEnd) && (\n                      <span>,&nbsp;{this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, 'time')}</span>\n                    )}\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            {this.placeholderImageEnabled && !hasImageSlot && (\n              <stzh-ratio ratio=\"21:9\" ratio-small=\"1:1\">\n                <div class=\"stzh-card-searchresult__image-placeholder\" innerHTML={PlaceholderImage}></div>\n              </stzh-ratio>\n            )}\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/{CMS/stzh-card-searchresult → stzh-card-searchresult}/stzh-card-searchresult.stories.js

@@ -1,8 +1,8 @@
-import { createComponentStory } from '../../../utils/story-utils';
+import { createComponentStory } from '../../utils/story-utils';
 import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
-import { getFigmaLink } from '../../../../figma';
+import { getFigmaLink } from '../../../figma';
 
 const COMPONENT_NAME = 'stzh-card-searchresult';
 const story = createComponentStory(COMPONENT_NAME);
@@ -26,7 +26,7 @@ const TEMPLATE_WITH_PUBLICATION = `
 `;
 
 export default {
-  title: 'Components/CMS/CardSearchresult',
+  title: 'Components/CardSearchresult',
   component: COMPONENT_NAME,
   parameters: {
     layout: 'padded',

package/dist/collection/components/stzh-datatable/stzh-datatable.js

@@ -669,7 +669,7 @@ export class StzhDatatable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether to show table data as list on mikro breakpoint"
+                    "text": "Whether to show table data as list on medium or smaller breakpoint"
                 },
                 "attribute": "show-list",
                 "reflect": true,