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

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

@@ -85,6 +85,9 @@ export default {
   title: 'Components/Cta',
   component: COMPONENT_NAME,
   parameters: {
+    actions: {
+      handles: ['stzhClick', 'click', 'stzhFocus', 'stzhBlur']
+    },
     layout: 'fullscreen',
     docs: {
       description: {
@@ -130,4 +133,4 @@ export const MultipleCta = {
     href: '#',
     _multipleCtas: true,
   }
-};
+};

package/dist/collection/components/stzh-datalist/stzh-datalist.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
  */
@@ -207,6 +210,7 @@
     --columns-gap: var(--stzh-grid-gutter-ultra);
   }
 }
+:host ::slotted(.layout_column) > *:not([class*=cq-]),
 :host ::slotted(*:not([class*=cq-])) {
   display: contents;
 }
@@ -227,6 +231,7 @@
 
 /* AEM edit mode: we set list as block element (always as one column), to prevent layout breaks */
 :host(:has([class*=cq-])) {
+  --stzh-datalist-item-wrapper-display: flex;
   --list-display: block;
   --list-margin-right: 0;
 }

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

@@ -22,19 +22,34 @@ const TEMPLATE_DETAILS = `
 </stzh-datalist>
 `;
 
+// seems to be inside .layout_column > .section oder only .section sometimes in AEM
+
 const TEMPLATE_SLOTTED = `
 <stzh-datalist>
-  <div class="section link">
-    <stzh-datalist-item href="#" value="Relative link"></stzh-datalist-item>
+  <div class="layout_column">
+    <div class="section link">
+      <stzh-datalist-item href="#" value="Relative link"></stzh-datalist-item>
+    </div>
   </div>
-  <div class="section link">
-    <stzh-datalist-item href="#" value="External link" rel="external nofollow" target="_blank"></stzh-datalist-item>
+  <div class="layout_column">
+    <div class="section link">
+      <stzh-datalist-item href="#" value="External link" rel="external nofollow" target="_blank"></stzh-datalist-item>
+    </div>
   </div>
-  <div class="section link">
-    <stzh-datalist-item href="#" label="Label" value="Relative link with label"></stzh-datalist-item>
+  <div class="layout_column">
+    <div class="section link">
+      <stzh-datalist-item href="#" label="Label" value="Relative link with label"></stzh-datalist-item>
+    </div>
   </div>
-  <div class="section link">
-    <stzh-datalist-item href="#" label="Label" value="Download link" download meta='["PDF", "1 Seite", "60 KB"]'></stzh-datalist-item>
+  <div class="layout_column">
+    <div class="section link">
+      <stzh-datalist-item href="#" label="Label" value="Download link" download meta='["PDF", "1 Seite", "60 KB"]'></stzh-datalist-item>
+    </div>
+  </div>
+  <div class="layout_column">
+    <div class="section link">
+      <stzh-datalist-item href="#" label="Label" value="Download link" download meta='["PDF", "1 Seite", "60 KB"]' icon="volume-medium" icon-href="#"></stzh-datalist-item>
+    </div>
   </div>
 </stzh-datalist>
 `;
@@ -57,6 +72,10 @@ const TEMPLATE_SLOTTED_EDIT_MODE = `
     <stzh-datalist-item href="#" label="Label" value="Download link" download meta='["PDF", "1 Seite", "60 KB"]'></stzh-datalist-item>
     <div></div>
   </div>
+  <div class="section link cq-Editable-dom">
+    <stzh-datalist-item href="#" label="Label" value="Download link" download meta='["PDF", "1 Seite", "60 KB"]' icon="volume-medium" icon-href="#"></stzh-datalist-item>
+    <div></div>
+  </div>
 </stzh-datalist>
 `;
 

package/dist/collection/components/stzh-datalist-item/stzh-datalist-item.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
  */
@@ -163,6 +166,7 @@
   --action-display: flex;
   --leading-icon-color: var(--stzh-color-grey90);
   --nested-display: var(--stzh-datalist-item-nested-display, block);
+  --wrapper-display: var(--stzh-datalist-item-wrapper-display, contents);
   display: contents;
 }
 :host[href]:not([href=""]), :host[a11y-expanded], :host[a11y-controls] {
@@ -174,7 +178,8 @@
   position: relative;
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
-  display: contents;
+  display: var(--wrapper-display);
+  align-items: center;
   /* Button variant */
   /* Interactive variant */
   /* Vertical Variant */

package/dist/collection/components/stzh-datalist-item/stzh-datalist-item.js

@@ -9,12 +9,19 @@ export class StzhDatalistItem {
     this._meta = [];
     this.external = false;
     this.isPhone = false;
-    this.actionClick = (originalEvent) => {
+    this.onActionClick = (originalEvent) => {
       this.stzhItemActionClick.emit({
         component: "stzh-datalist-item",
         originalEvent
       });
     };
+    this.onClick = (event) => {
+      this.stzhClick.emit({
+        component: "stzh-datalist-item",
+        originalEvent: event,
+        href: this.href
+      });
+    };
     this.handleDirectionChange = (event) => {
       this.direction = event.detail.value;
     };
@@ -28,6 +35,7 @@ export class StzhDatalistItem {
     this.download = undefined;
     this.leadingIcon = undefined;
     this.icon = undefined;
+    this.iconPosition = "right";
     this.iconLabel = undefined;
     this.iconTooltip = undefined;
     this.iconHref = undefined;
@@ -62,32 +70,33 @@ export class StzhDatalistItem {
   }
   renderInner(isButton, hasActionButton) {
     const Item = isButton ? "button" : (this.href ? "a" : "div");
+    const Icon = () => (h(Fragment, null, (this.href || this.icon) && !hasActionButton && !isButton &&
+      h("div", { class: "stzh-datalist-item__label-icon" }, h("stzh-icon", { class: "stzh-datalist-item__icon", name: this.icon
+          ? this.icon
+          : (this.isPhone
+            ? "phone"
+            : (this.external && "external-link")) })), isButton &&
+      h("div", { class: "stzh-datalist-item__label-icon" }, h("stzh-icon", { class: "stzh-datalist-item__icon is-closed", name: this.icon ? this.icon : "plus" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-open", name: this.icon ? this.icon : "minus" }))));
     return (h(Fragment, null, this.variant === "table" &&
       h(Item, { "aria-hidden": this.label ? null : "true", tabindex: "-1", id: `${this.datalistItemId}-label`, class: {
           "stzh-datalist-item__label": true,
           "is-button": isButton,
           "is-link": !!this.href
-        }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.label), h(Item, { id: `${this.datalistItemId}-value`, class: {
+        }, href: this.href, rel: this.rel, target: this.target, download: this.download, onClick: this.onClick }, this.label), h(Item, { id: `${this.datalistItemId}-value`, class: {
         "stzh-datalist-item__value": true,
         "is-button": isButton,
         "is-link": !!this.href
       }, href: this.href, rel: this.rel, target: this.target, download: this.download, "aria-labelledby": Item !== 'div' ? `${this.variant === "table" ? `${this.datalistItemId}-label` : ''} ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null, "aria-controls": this.a11yControls || null, "aria-expanded": typeof this.a11yExpanded !== "undefined"
-        ? (this.a11yExpanded ? "true" : "false") : null }, this.variant === "default" &&
-      h("div", { class: "stzh-datalist-item__label" }, this.label), this.external && h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.externalLinkLabel), this.download && h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.downloadLinkLabel), h("div", { class: "stzh-datalist-item__value-wrapper" }, this.value
+        ? (this.a11yExpanded ? "true" : "false") : null, onClick: this.onClick }, this.variant === "default" &&
+      h("div", { class: "stzh-datalist-item__label" }, this.label), this.external && h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.externalLinkLabel), this.download && h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.downloadLinkLabel), h("div", { class: "stzh-datalist-item__value-wrapper" }, this.iconPosition === "left" && h(Icon, null), this.value
       ?
         h("stzh-text", { curve: "none", class: "stzh-datalist-item__value-text", innerHTML: this.value })
       :
-        h("stzh-text", { curve: "none", class: "stzh-datalist-item__value-text" }, h("slot", { name: "value" })), (this.href || this.icon) && !hasActionButton && !isButton &&
-      h("div", { class: "stzh-datalist-item__label-icon" }, h("stzh-icon", { class: "stzh-datalist-item__icon", name: this.icon
-          ? this.icon
-          : (this.isPhone
-            ? "phone"
-            : (this.external && "external-link")) })), isButton &&
-      h("div", { class: "stzh-datalist-item__label-icon" }, h("stzh-icon", { class: "stzh-datalist-item__icon is-closed", name: this.icon ? this.icon : "plus" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-open", name: this.icon ? this.icon : "minus" })))), h(Item, { "aria-hidden": this.statusLabel || this._meta.length > 0 ? null : "true", tabindex: "-1", id: `${this.datalistItemId}-meta`, class: {
+        h("stzh-text", { curve: "none", class: "stzh-datalist-item__value-text" }, h("slot", { name: "value" })), this.iconPosition === "right" && h(Icon, null))), h(Item, { "aria-hidden": this.statusLabel || this._meta.length > 0 ? null : "true", tabindex: "-1", id: `${this.datalistItemId}-meta`, class: {
         "stzh-datalist-item__meta": true,
         "is-button": isButton,
         "is-link": !!this.href
-      }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.statusLabel &&
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download, onClick: this.onClick }, this.statusLabel &&
       h("stzh-status", { class: "stzh-datalist-item__meta-status", label: this.statusLabel, type: this.statusType }), this._meta.length > 0 &&
       h("span", { class: "stzh-datalist-item__meta-text" }, this._meta.map((meta, index) => h(Fragment, null, h("span", { class: "stzh-datalist-item__meta-text-inner" }, meta), index + 1 !== this._meta.length &&
         h("span", { class: "stzh-datalist-item__meta-separator" }, "|")))))));
@@ -98,7 +107,7 @@ export class StzhDatalistItem {
         "stzh-datalist-item__leading": true,
         "is-button": isButton,
         "is-link": !!this.href
-      }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.leadingIcon &&
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download, onClick: this.onClick }, this.leadingIcon &&
       h("div", { class: "stzh-datalist-item__leading-icon-container" }, h("stzh-icon", { class: "stzh-datalist-item__leading-icon", name: this.leadingIcon }))));
   }
   async componentDidLoad() {
@@ -154,7 +163,7 @@ export class StzhDatalistItem {
       return (h("stzh-button", { class: {
           "stzh-datalist-item__action": true,
           "is-button": true
-        }, variant: "tertiary", size: "small", "aria-label": this.iconLabel, iconOnly: true, href: this.iconHref, icon: this.icon, onClick: this.actionClick }));
+        }, variant: "tertiary", size: "small", "aria-label": this.iconLabel, iconOnly: true, href: this.iconHref, icon: this.icon, onClick: this.onActionClick }));
     };
     return (h(Host, { role: "listitem" }, h("div", { class: classes }, this.direction === "horizontal" || this.variant === "table" ?
       h(Fragment, null, this.renderLeadingIcon(isButton), this.renderInner(isButton, hasActionButton))
@@ -307,6 +316,24 @@ export class StzhDatalistItem {
         "attribute": "icon",
         "reflect": false
       },
+      "iconPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"left\" | \"right\"",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon position"
+        },
+        "attribute": "icon-position",
+        "reflect": false,
+        "defaultValue": "\"right\""
+      },
       "iconLabel": {
         "type": "string",
         "mutable": false,
@@ -518,6 +545,27 @@ export class StzhDatalistItem {
             }
           }
         }
+      }, {
+        "method": "stzhClick",
+        "name": "stzhClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Item click event"
+        },
+        "complexType": {
+          "original": "StzhDatalistItemClickEvent",
+          "resolved": "{ component: \"stzh-datalist-item\"; originalEvent: MouseEvent; href: string; }",
+          "references": {
+            "StzhDatalistItemClickEvent": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhDatalistItemClickEvent"
+            }
+          }
+        }
       }];
   }
   static get elementRef() { return "element"; }

package/dist/collection/components/stzh-datalist-item/stzh-datalist-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-datalist-item.js","sourceRoot":"","sources":["../../../../src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Fragment,\n  State,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhDatalistItemActionClickEvent,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistVariantChangeEvent,\n  StzhDatalistVariant,\n  StzhDatalistDirection,\n  StzhStatusType\n} from \"../../index\";\n\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet datalistItemCounter = 0;\n\n/**\n * @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n */\n@Component({\n  tag: \"stzh-datalist-item\",\n  styleUrl: \"stzh-datalist-item.scss\",\n  scoped: true\n})\nexport class StzhDatalistItem {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Link */\n  @Prop({ reflect: true }) href: string;\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target (if href is used) */\n  @Prop() target: string;\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Leading icon */\n  @Prop() leadingIcon: string;\n\n  /** Icon of action button (if href is used, will only be for presentation) */\n  @Prop() icon: string;\n\n  /** Overwrite aria-label of action button (default aria label is `label` and `value`). */\n  @Prop() iconLabel: string;\n\n  /** Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. */\n  @Prop() iconTooltip: string;\n\n  /** Href of action button */\n  @Prop() iconHref: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Value (or use value slot instead) */\n  @Prop() value: string = \"\";\n\n  /** Meta */\n  @Prop({ reflect: true }) meta: string | string[] = \"\";\n  private _meta: string[] = [];\n\n  /** Status Label */\n  @Prop({ reflect: true }) statusLabel: string = \"\";\n\n  /** Status Type */\n  @Prop() statusType: StzhStatusType = \"default\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Item action click event */\n  @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n  @Element() element: HTMLStzhDatalistItemElement;\n\n  @Watch(\"meta\")\n  metaWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._meta = JSON.parse(newValue);\n      } catch (ex) {\n        this._meta = newValue === \"\" ? [] : [newValue];\n      }\n    } else {\n      this._meta = newValue;\n    }\n  }\n\n  @Watch(\"rel\")\n  externalWatcher() {\n    this.external = this.rel && this.rel.includes(\"external\");\n  }\n\n  @Watch(\"href\")\n  hrefWatcher() {\n    this.isPhone = this.href && (this.href.startsWith(\"tel:\") || this.href.startsWith(\"fax:\"));\n  }\n\n  @State() direction: StzhDatalistDirection = \"vertical\";\n  @State() variant: StzhDatalistVariant = \"default\";\n\n  private external: boolean = false;\n  private isPhone: boolean = false;\n  private datalist: HTMLStzhDatalistElement;\n  private datalistItemId: string;\n\n  private actionClick = (originalEvent: MouseEvent) => {\n    this.stzhItemActionClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent\n    });\n  }\n\n  private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n    this.direction = event.detail.value;\n  }\n\n  private handleVariantChange = (event: CustomEvent<StzhDatalistVariantChangeEvent>) => {\n    this.variant = event.detail.value;\n  }\n\n  private renderInner(isButton: boolean, hasActionButton: boolean): DocumentFragment {\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n    return (\n      <Fragment>\n        {this.variant === \"table\" &&\n          <Item\n            aria-hidden={this.label ? null : \"true\"}\n            tabindex=\"-1\"\n            id={`${this.datalistItemId}-label`}\n            class={{\n              \"stzh-datalist-item__label\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href\n            }}\n            href={this.href}\n            rel={this.rel}\n            target={this.target}\n            download={this.download}\n          >\n            {this.label}\n          </Item>\n        }\n\n        <Item\n          id={`${this.datalistItemId}-value`}\n          class={{\n            \"stzh-datalist-item__value\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          // aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n          aria-labelledby={Item !== 'div' ? `${this.variant === \"table\" ? `${this.datalistItemId}-label` : ''} ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n          aria-controls={this.a11yControls || null}\n          aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n            ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n        >\n          {this.variant === \"default\" &&\n            <div class=\"stzh-datalist-item__label\">{this.label}</div>\n          }\n\n          {this.external && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n          {this.download && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n\n          <div class=\"stzh-datalist-item__value-wrapper\">\n            {this.value\n              ?\n              <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\" innerHTML={this.value}></stzh-text>\n              :\n              <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\">\n                <slot name=\"value\"></slot>\n              </stzh-text>\n            }\n\n            {(this.href || this.icon) && !hasActionButton && !isButton &&\n              <div class=\"stzh-datalist-item__label-icon\">\n                <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon\n                  ? this.icon\n                  : (this.isPhone\n                     ? \"phone\"\n                     : (this.external && \"external-link\")\n                  )}\n                ></stzh-icon>\n              </div>\n            }\n\n            {isButton &&\n              <div class=\"stzh-datalist-item__label-icon\">\n                <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n                <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n              </div>\n            }\n          </div>\n        </Item>\n\n        <Item\n          aria-hidden={this.statusLabel || this._meta.length > 0 ? null : \"true\"}\n          tabindex=\"-1\"\n          id={`${this.datalistItemId}-meta`}\n          class={{\n            \"stzh-datalist-item__meta\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n        >\n          {this.statusLabel &&\n            <stzh-status\n              class=\"stzh-datalist-item__meta-status\"\n              label={this.statusLabel}\n              type={this.statusType}\n            ></stzh-status>\n          }\n          {this._meta.length > 0 &&\n            <span class=\"stzh-datalist-item__meta-text\">\n              {this._meta.map((meta, index) =>\n                <Fragment>\n                  <span class=\"stzh-datalist-item__meta-text-inner\">{meta}</span>\n                  {index + 1 !== this._meta.length &&\n                    <span class=\"stzh-datalist-item__meta-separator\">|</span>\n                  }\n                </Fragment>\n              )}\n            </span>\n          }\n        </Item>\n      </Fragment>\n    )\n  }\n\n  private renderLeadingIcon(isButton: boolean): HTMLElement {\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n    return (\n      <Item\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        tabindex=\"-1\"\n        class={{\n          \"stzh-datalist-item__leading\": true,\n          \"is-button\": isButton,\n          \"is-link\": !!this.href\n        }}\n        href={this.href}\n        rel={this.rel}\n        target={this.target}\n        download={this.download}\n      >\n        {this.leadingIcon &&\n          <div class=\"stzh-datalist-item__leading-icon-container\">\n            <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n          </div>\n        }\n      </Item>\n    );\n  }\n\n  async componentDidLoad() {\n    // execute connectedCallbck again, because sometimes has problem rendering\n    this.connectedCallback();\n  }\n\n  async componentWillLoad() {\n    this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n    this.metaWatcher(this.meta);\n    this.externalWatcher();\n    this.hrefWatcher();\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n    }\n  }\n\n  async connectedCallback() {\n    this.datalist = this.element.closest(\"stzh-datalist\");\n\n    if (this.datalist) {\n      this.variant = this.datalist.variant;\n      this.direction = await this.datalist.getCurrentDirection();\n\n      this.datalist?.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist?.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.datalist) {\n      this.datalist?.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist?.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n      this.datalist = null;\n    }\n  }\n\n  render() {\n    const isButton = typeof this.a11yExpanded !== \"undefined\"\n      || typeof this.a11yControls !== \"undefined\";\n\n    const hasActionButton = !!((!this.href || this.iconHref || this.iconTooltip) && this.icon);\n\n    const classes = {\n      \"stzh-datalist-item\": true,\n      \"stzh-datalist-item--is-interactive\": !!this.href || isButton,\n      \"stzh-datalist-item--is-link\": !!this.href,\n      \"stzh-datalist-item--is-button\": isButton,\n      \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n      [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction && this.variant === \"default\",\n      [`stzh-datalist-item--${this.variant}`]: !!this.variant\n    };\n\n    let ActionItem = isButton\n      ? \"button\"\n      : (hasActionButton\n        ? \"div\"\n        : \"a\"\n        );\n\n    const ActionButton = () => {\n      return (\n        <stzh-button\n          class={{\n            \"stzh-datalist-item__action\": true,\n            \"is-button\": true\n          }}\n          variant=\"tertiary\"\n          size=\"small\"\n          aria-label={this.iconLabel}\n          iconOnly={true}\n          href={this.iconHref}\n          icon={this.icon}\n          onClick={this.actionClick}\n        ></stzh-button>\n      );\n    }\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.direction === \"horizontal\" || this.variant === \"table\" ?\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              {this.renderInner(isButton, hasActionButton)}\n            </Fragment>\n            :\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              <div class=\"stzh-datalist-item__wrapper\">\n                {this.renderInner(isButton, hasActionButton)}\n              </div>\n            </Fragment>\n          }\n          <ActionItem\n            role={hasActionButton ? null : \"presentation\"}\n            aria-hidden={hasActionButton ? null : \"true\"}\n            tabindex=\"-1\"\n            class={{\n              \"stzh-datalist-item__action-list\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href && !this.iconHref\n            }}\n            href={!this.iconHref ? this.href : null}\n            rel={!this.iconHref ? this.rel : null}\n            target={!this.iconHref ? this.target : null}\n            download={!this.iconHref ? this.download : null}\n          >\n            {/* {this.href && !this.iconHref &&\n              (this.download ?\n                <div class=\"stzh-datalist-item__action is-non-interactive\">\n                  <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : \"download\"}></stzh-icon>\n                </div>\n                :\n                <div class=\"stzh-datalist-item__action is-non-interactive\">\n                  <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n                </div>\n              )\n            } */}\n\n            {/* {isButton &&\n              <div class=\"stzh-datalist-item__action is-non-interactive\">\n                <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n                <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n              </div>\n            } */}\n\n            {hasActionButton &&\n              (\n                this.iconTooltip\n                ?\n                <stzh-tooltip content={this.iconTooltip}>\n                  {ActionButton()}\n                </stzh-tooltip>\n                :\n                ActionButton()\n              )\n            }\n          </ActionItem>\n\n          <div class=\"stzh-datalist-item__spacer\"></div>\n        </div>\n\n        <div class=\"stzh-datalist-item__nested\">\n          <div class=\"stzh-datalist-item__nested-inner\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-datalist-item.js","sourceRoot":"","sources":["../../../../src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Fragment,\n  State,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhDatalistItemActionClickEvent,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistVariantChangeEvent,\n  StzhDatalistVariant,\n  StzhDatalistDirection,\n  StzhStatusType,\n  StzhDatalistItemClickEvent\n} from \"../../index\";\n\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet datalistItemCounter = 0;\n\n/**\n * @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n */\n@Component({\n  tag: \"stzh-datalist-item\",\n  styleUrl: \"stzh-datalist-item.scss\",\n  scoped: true\n})\nexport class StzhDatalistItem {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Link */\n  @Prop({ reflect: true }) href: string;\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target (if href is used) */\n  @Prop() target: string;\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Leading icon */\n  @Prop() leadingIcon: string;\n\n  /** Icon of action button (if href is used, will only be for presentation) */\n  @Prop() icon: string;\n\n  /** Icon position */\n  @Prop() iconPosition: \"left\" | \"right\" = \"right\";\n\n  /** Overwrite aria-label of action button (default aria label is `label` and `value`). */\n  @Prop() iconLabel: string;\n\n  /** Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. */\n  @Prop() iconTooltip: string;\n\n  /** Href of action button */\n  @Prop() iconHref: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Value (or use value slot instead) */\n  @Prop() value: string = \"\";\n\n  /** Meta */\n  @Prop({ reflect: true }) meta: string | string[] = \"\";\n  private _meta: string[] = [];\n\n  /** Status Label */\n  @Prop({ reflect: true }) statusLabel: string = \"\";\n\n  /** Status Type */\n  @Prop() statusType: StzhStatusType = \"default\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Item action click event */\n  @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n  /** Item click event */\n  @Event() stzhClick: EventEmitter<StzhDatalistItemClickEvent>;\n\n  @Element() element: HTMLStzhDatalistItemElement;\n\n  @Watch(\"meta\")\n  metaWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._meta = JSON.parse(newValue);\n      } catch (ex) {\n        this._meta = newValue === \"\" ? [] : [newValue];\n      }\n    } else {\n      this._meta = newValue;\n    }\n  }\n\n  @Watch(\"rel\")\n  externalWatcher() {\n    this.external = this.rel && this.rel.includes(\"external\");\n  }\n\n  @Watch(\"href\")\n  hrefWatcher() {\n    this.isPhone = this.href && (this.href.startsWith(\"tel:\") || this.href.startsWith(\"fax:\"));\n  }\n\n  @State() direction: StzhDatalistDirection = \"vertical\";\n  @State() variant: StzhDatalistVariant = \"default\";\n\n  private external: boolean = false;\n  private isPhone: boolean = false;\n  private datalist: HTMLStzhDatalistElement;\n  private datalistItemId: string;\n\n  private onActionClick = (originalEvent: MouseEvent) => {\n    this.stzhItemActionClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent: event,\n      href: this.href\n    });\n  }\n\n  private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n    this.direction = event.detail.value;\n  }\n\n  private handleVariantChange = (event: CustomEvent<StzhDatalistVariantChangeEvent>) => {\n    this.variant = event.detail.value;\n  }\n\n  private renderInner(isButton: boolean, hasActionButton: boolean): DocumentFragment {\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n    const Icon = () => (\n      <Fragment>\n        {(this.href || this.icon) && !hasActionButton && !isButton &&\n          <div class=\"stzh-datalist-item__label-icon\">\n            <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon\n              ? this.icon\n              : (this.isPhone\n                ? \"phone\"\n                : (this.external && \"external-link\")\n              )}\n            ></stzh-icon>\n          </div>\n        }\n\n        {isButton &&\n          <div class=\"stzh-datalist-item__label-icon\">\n            <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n            <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n          </div>\n        }\n      </Fragment>\n    );\n\n    return (\n      <Fragment>\n        {this.variant === \"table\" &&\n          <Item\n            aria-hidden={this.label ? null : \"true\"}\n            tabindex=\"-1\"\n            id={`${this.datalistItemId}-label`}\n            class={{\n              \"stzh-datalist-item__label\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href\n            }}\n            href={this.href}\n            rel={this.rel}\n            target={this.target}\n            download={this.download}\n            onClick={this.onClick}\n          >\n            {this.label}\n          </Item>\n        }\n\n        <Item\n          id={`${this.datalistItemId}-value`}\n          class={{\n            \"stzh-datalist-item__value\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          // aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n          aria-labelledby={Item !== 'div' ? `${this.variant === \"table\" ? `${this.datalistItemId}-label` : ''} ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n          aria-controls={this.a11yControls || null}\n          aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n            ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n          onClick={this.onClick}\n        >\n          {this.variant === \"default\" &&\n            <div class=\"stzh-datalist-item__label\">{this.label}</div>\n          }\n\n          {this.external && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n          {this.download && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n\n          <div class=\"stzh-datalist-item__value-wrapper\">\n            {this.iconPosition === \"left\" && <Icon></Icon>}\n            {this.value\n              ?\n              <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\" innerHTML={this.value}></stzh-text>\n              :\n              <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\">\n                <slot name=\"value\"></slot>\n              </stzh-text>\n            }\n            {this.iconPosition === \"right\" && <Icon></Icon>}\n          </div>\n        </Item>\n\n        <Item\n          aria-hidden={this.statusLabel || this._meta.length > 0 ? null : \"true\"}\n          tabindex=\"-1\"\n          id={`${this.datalistItemId}-meta`}\n          class={{\n            \"stzh-datalist-item__meta\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          onClick={this.onClick}\n        >\n          {this.statusLabel &&\n            <stzh-status\n              class=\"stzh-datalist-item__meta-status\"\n              label={this.statusLabel}\n              type={this.statusType}\n            ></stzh-status>\n          }\n          {this._meta.length > 0 &&\n            <span class=\"stzh-datalist-item__meta-text\">\n              {this._meta.map((meta, index) =>\n                <Fragment>\n                  <span class=\"stzh-datalist-item__meta-text-inner\">{meta}</span>\n                  {index + 1 !== this._meta.length &&\n                    <span class=\"stzh-datalist-item__meta-separator\">|</span>\n                  }\n                </Fragment>\n              )}\n            </span>\n          }\n        </Item>\n      </Fragment>\n    )\n  }\n\n  private renderLeadingIcon(isButton: boolean): HTMLElement {\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n    return (\n      <Item\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        tabindex=\"-1\"\n        class={{\n          \"stzh-datalist-item__leading\": true,\n          \"is-button\": isButton,\n          \"is-link\": !!this.href\n        }}\n        href={this.href}\n        rel={this.rel}\n        target={this.target}\n        download={this.download}\n        onClick={this.onClick}\n      >\n        {this.leadingIcon &&\n          <div class=\"stzh-datalist-item__leading-icon-container\">\n            <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n          </div>\n        }\n      </Item>\n    );\n  }\n\n  async componentDidLoad() {\n    // execute connectedCallbck again, because sometimes has problem rendering\n    this.connectedCallback();\n  }\n\n  async componentWillLoad() {\n    this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n    this.metaWatcher(this.meta);\n    this.externalWatcher();\n    this.hrefWatcher();\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n    }\n  }\n\n  async connectedCallback() {\n    this.datalist = this.element.closest(\"stzh-datalist\");\n\n    if (this.datalist) {\n      this.variant = this.datalist.variant;\n      this.direction = await this.datalist.getCurrentDirection();\n\n      this.datalist?.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist?.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.datalist) {\n      this.datalist?.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist?.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n      this.datalist = null;\n    }\n  }\n\n  render() {\n    const isButton = typeof this.a11yExpanded !== \"undefined\"\n      || typeof this.a11yControls !== \"undefined\";\n\n    const hasActionButton = !!((!this.href || this.iconHref || this.iconTooltip) && this.icon);\n\n    const classes = {\n      \"stzh-datalist-item\": true,\n      \"stzh-datalist-item--is-interactive\": !!this.href || isButton,\n      \"stzh-datalist-item--is-link\": !!this.href,\n      \"stzh-datalist-item--is-button\": isButton,\n      \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n      [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction && this.variant === \"default\",\n      [`stzh-datalist-item--${this.variant}`]: !!this.variant\n    };\n\n    let ActionItem = isButton\n      ? \"button\"\n      : (hasActionButton\n        ? \"div\"\n        : \"a\"\n        );\n\n    const ActionButton = () => {\n      return (\n        <stzh-button\n          class={{\n            \"stzh-datalist-item__action\": true,\n            \"is-button\": true\n          }}\n          variant=\"tertiary\"\n          size=\"small\"\n          aria-label={this.iconLabel}\n          iconOnly={true}\n          href={this.iconHref}\n          icon={this.icon}\n          onClick={this.onActionClick}\n        ></stzh-button>\n      );\n    }\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.direction === \"horizontal\" || this.variant === \"table\" ?\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              {this.renderInner(isButton, hasActionButton)}\n            </Fragment>\n            :\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              <div class=\"stzh-datalist-item__wrapper\">\n                {this.renderInner(isButton, hasActionButton)}\n              </div>\n            </Fragment>\n          }\n          <ActionItem\n            role={hasActionButton ? null : \"presentation\"}\n            aria-hidden={hasActionButton ? null : \"true\"}\n            tabindex=\"-1\"\n            class={{\n              \"stzh-datalist-item__action-list\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href && !this.iconHref\n            }}\n            href={!this.iconHref ? this.href : null}\n            rel={!this.iconHref ? this.rel : null}\n            target={!this.iconHref ? this.target : null}\n            download={!this.iconHref ? this.download : null}\n          >\n            {/* {this.href && !this.iconHref &&\n              (this.download ?\n                <div class=\"stzh-datalist-item__action is-non-interactive\">\n                  <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : \"download\"}></stzh-icon>\n                </div>\n                :\n                <div class=\"stzh-datalist-item__action is-non-interactive\">\n                  <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n                </div>\n              )\n            } */}\n\n            {/* {isButton &&\n              <div class=\"stzh-datalist-item__action is-non-interactive\">\n                <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n                <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n              </div>\n            } */}\n\n            {hasActionButton &&\n              (\n                this.iconTooltip\n                ?\n                <stzh-tooltip content={this.iconTooltip}>\n                  {ActionButton()}\n                </stzh-tooltip>\n                :\n                ActionButton()\n              )\n            }\n          </ActionItem>\n\n          <div class=\"stzh-datalist-item__spacer\"></div>\n        </div>\n\n        <div class=\"stzh-datalist-item__nested\">\n          <div class=\"stzh-datalist-item__nested-inner\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-datalist-item/stzh-datalist-item.stories.js

@@ -19,7 +19,7 @@ export default {
   parameters: {
     layout: 'padded',
     actions: {
-      handles: ['stzhItemActionClick', 'stzhFocus', 'stzhBlur']
+      handles: ['stzhItemActionClick', 'stzhClick', 'stzhFocus', 'stzhBlur']
     },
     docs: {
       description: {

package/dist/collection/components/stzh-datamessagelist/stzh-datamessagelist.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-datamessagelist-item/stzh-datamessagelist-item.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-datamessagelist-item/stzh-datamessagelist-item.js

@@ -13,7 +13,8 @@ export class StzhDatamessagelistItem {
     this.itemClick = (originalEvent) => {
       this.stzhClick.emit({
         component: "stzh-datamessagelist-item",
-        originalEvent
+        originalEvent,
+        href: this.href
       });
     };
     this.localization = undefined;
@@ -401,7 +402,7 @@ export class StzhDatamessagelistItem {
         },
         "complexType": {
           "original": "StzhDatamessagelistItemClickEvent",
-          "resolved": "{ component: \"stzh-datamessagelist-item\"; originalEvent: MouseEvent; }",
+          "resolved": "{ component: \"stzh-datamessagelist-item\"; originalEvent: MouseEvent; href: string; }",
           "references": {
             "StzhDatamessagelistItemClickEvent": {
               "location": "import",

package/dist/collection/components/stzh-datamessagelist-item/stzh-datamessagelist-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-datamessagelist-item.js","sourceRoot":"","sources":["../../../../src/components/stzh-datamessagelist-item/stzh-datamessagelist-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  Event,\n  EventEmitter,\n  State\n} from \"@stencil/core\";\n\nimport {\n  StzhDatamessagelistItemEntryLoadingStatus,\n  StzhDatamessagelistItemEntryMeta,\n  StzhDatamessagelistItemEntryAction,\n  StzhDatamessagelistItemEntryTag,\n  StzhDatamessagelistItemClickEvent,\n  StzhDatamessagelistItemActionClickEvent\n} from \"../../index\";\n\nimport { StzhDatamessagelistItemLocalizedText } from './stzh-datamessagelist-item.localization';\n\n/**\n */\n@Component({\n  tag: \"stzh-datamessagelist-item\",\n  styleUrl: \"stzh-datamessagelist-item.scss\",\n  scoped: true\n})\nexport class StzhDatamessagelistItem {\n  /** Translation strings */\n  @Prop() localization: StzhDatamessagelistItemLocalizedText;\n\n  /** Heading */\n  @Prop() heading: string = \"\";\n\n  /** Whether item should be displayed in unread state */\n  @Prop() unread: boolean = false;\n\n  /** URL the item should link to */\n  @Prop() href: string = \"\";\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target (if href is used) */\n  @Prop() target: string;\n\n  /** Description */\n  @Prop() description: string = \"\";\n\n  /** Icon (`arrow-right` by default or `external-link` if rel=\"*external*\" is used) */\n  @Prop() icon: string;\n\n  /** Whether item is not interactive (arrow icon and hover effect will disappear) */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Loading status */\n  @Prop() loadingStatus: StzhDatamessagelistItemEntryLoadingStatus | string;\n  private _loadingStatus: StzhDatamessagelistItemEntryLoadingStatus;\n\n  /** Meta */\n  @Prop() meta: StzhDatamessagelistItemEntryMeta[] | string;\n  private _meta: StzhDatamessagelistItemEntryMeta[];\n\n  /** Actions */\n  @Prop() actions: StzhDatamessagelistItemEntryAction[] | string;\n  private _actions: StzhDatamessagelistItemEntryAction[];\n\n  /** Tags */\n  @Prop() tags: StzhDatamessagelistItemEntryTag[] | string;\n  private _tags: StzhDatamessagelistItemEntryTag[];\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link element.\n   * Default value will be taken from `heading` prop.\n   */\n  @Prop() analyticsId: string;\n\n  /** Whether rel contains external */\n  @State() external: boolean = false;\n\n  @Element() element: HTMLStzhDatamessagelistItemElement;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhDatamessagelistItemClickEvent>;\n\n  /** Action click event */\n  @Event() stzhActionClick: EventEmitter<StzhDatamessagelistItemActionClickEvent>;\n\n  @Watch(\"rel\")\n  externalWatcher() {\n    this.external = this.rel && this.rel.includes(\"external\");\n  }\n\n  @Watch(\"loadingStatus\")\n  loadingStatusWatcher(newValue: StzhDatamessagelistItemEntryLoadingStatus | string) {\n    if (typeof newValue === \"string\") {\n      this._loadingStatus = JSON.parse(newValue);\n    } else {\n      this._loadingStatus = newValue;\n    }\n  }\n\n  @Watch(\"meta\")\n  metaWatcher(newValue: StzhDatamessagelistItemEntryMeta[] | string) {\n    if (typeof newValue === \"string\") {\n      this._meta = JSON.parse(newValue);\n    } else {\n      this._meta = newValue;\n    }\n  }\n\n  @Watch(\"actions\")\n  actionsWatcher(newValue: StzhDatamessagelistItemEntryAction[] | string) {\n    if (typeof newValue === \"string\") {\n      this._actions = JSON.parse(newValue);\n    } else {\n      this._actions = newValue;\n    }\n  }\n\n  @Watch(\"tags\")\n  tagsWatcher(newValue: StzhDatamessagelistItemEntryTag[] | string) {\n    if (typeof newValue === \"string\") {\n      this._tags = JSON.parse(newValue);\n    } else {\n      this._tags = newValue;\n    }\n  }\n\n  private actionClick = (action: StzhDatamessagelistItemEntryAction, originalEvent: MouseEvent) => {\n    this.stzhActionClick.emit({\n      component: \"stzh-datamessagelist-item\",\n      action,\n      originalEvent\n    });\n  }\n\n  private itemClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-datamessagelist-item\",\n      originalEvent\n    });\n  }\n\n  async componentWillLoad() {\n    this.loadingStatusWatcher(this.loadingStatus);\n    this.metaWatcher(this.meta);\n    this.actionsWatcher(this.actions);\n    this.tagsWatcher(this.tags);\n    this.externalWatcher();\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datamessagelist-item\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-datamessagelist-item\": true,\n      \"stzh-datamessagelist-item--is-unread\": this.unread,\n      \"stzh-datamessagelist-item--is-interactive\": !this.nonInteractive,\n    };\n\n    const HeadingLink = this.nonInteractive ? \"div\" :\n      this.href ? \"a\" : \"button\";\n\n    return (\n      <Host role=\"listitem\">\n        <article class={classes}>\n          <div class=\"stzh-datamessagelist-item__content\">\n            <div class=\"stzh-datamessagelist-item__text\">\n              <h3 class=\"stzh-datamessagelist-item__heading\">\n                <HeadingLink\n                  class=\"stzh-datamessagelist-item__heading-link\"\n                  href={this.href}\n                  rel={this.rel}\n                  target={this.target}\n                  onClick={this.itemClick}\n                  s-object-id={this.analyticsId || this.heading}\n                >\n                  {this.unread &&\n                    <span class=\"stzh-datamessagelist-item__vhidden\">\n                      {this.localization.unread},\n                    </span>\n                  }\n                  {this.heading}\n                </HeadingLink>\n              </h3>\n\n              {this.description &&\n                <div class=\"stzh-datamessagelist-item__description\">\n                  <stzh-clamp lines={2} linesMedium={1}>\n                    {this.description}\n                  </stzh-clamp>\n                </div>\n              }\n\n              {this._meta && this._meta.length > 0 &&\n                <div class=\"stzh-datamessagelist-item__meta-wrapper\">\n                  <ul class=\"stzh-datamessagelist-item__meta\">\n                    {this._meta.map((meta) =>\n                      <li class=\"stzh-datamessagelist-item__meta-item\">\n                        <span class=\"stzh-datamessagelist-item__meta-item-label\">{meta.label}</span>\n                        <span class=\"stzh-datamessagelist-item__meta-item-value\">{meta.value}</span>\n                      </li>\n                    )}\n                  </ul>\n                </div>\n              }\n            </div>\n\n            {this._loadingStatus &&\n              <stzh-status\n                class=\"stzh-datamessagelist-item__status\"\n                label={this._loadingStatus.label}\n                percent={this._loadingStatus.percent}\n                type={this._loadingStatus.type}\n                withLoadingbar={true}\n              ></stzh-status>\n            }\n\n            {this._tags && this._tags.length > 0 &&\n              <div class=\"stzh-datamessagelist-item__tags-wrapper\">\n                <div class=\"stzh-datamessagelist-item__tags\">\n                  {this._tags.map((tag) =>\n                    <stzh-chip\n                      class=\"stzh-datamessagelist-item__tag\"\n                      variant=\"tag\"\n                      size=\"small\"\n                      nonInteractive={true}\n                      inverted={tag.inverted}\n                      type={tag.type}\n                      icon={tag.icon}\n                      label={tag.label}\n                    ></stzh-chip>\n                  )}\n                </div>\n              </div>\n            }\n          </div>\n\n          <div class=\"stzh-datamessagelist-item__actions\">\n            {(this._actions && this._actions.length > 0) ?\n              <stzh-popover\n                label={this.localization.actionsPopoverLabel}\n                placement=\"bottom-end\"\n                class=\"stzh-datamessagelist-item__action-popover\"\n              >\n                <stzh-button\n                  class=\"stzh-datamessagelist-item__action-popover-button\"\n                  variant=\"tertiary\"\n                  size=\"tiny\"\n                  icon=\"more-horizontal\"\n                  iconOnly={true}\n                ></stzh-button>\n                <stzh-menu slot=\"content\">\n                  {this._actions.map((action) =>\n                    <stzh-menu-item\n                      icon={action.icon}\n                      badge={action.badge}\n                      onClick={(event) => { this.actionClick(action, event) }}\n                    >\n                      {action.label}\n                    </stzh-menu-item>\n                  )}\n                </stzh-menu>\n              </stzh-popover>\n              :\n              (\n                !this.nonInteractive &&\n                  <div class=\"stzh-datamessagelist-item__action is-non-interactive\">\n                    <stzh-icon class=\"stzh-datamessagelist-item__action-icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n                  </div>\n              )\n            }\n          </div>\n\n        </article>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-datamessagelist-item.js","sourceRoot":"","sources":["../../../../src/components/stzh-datamessagelist-item/stzh-datamessagelist-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  Event,\n  EventEmitter,\n  State\n} from \"@stencil/core\";\n\nimport {\n  StzhDatamessagelistItemEntryLoadingStatus,\n  StzhDatamessagelistItemEntryMeta,\n  StzhDatamessagelistItemEntryAction,\n  StzhDatamessagelistItemEntryTag,\n  StzhDatamessagelistItemClickEvent,\n  StzhDatamessagelistItemActionClickEvent\n} from \"../../index\";\n\nimport { StzhDatamessagelistItemLocalizedText } from './stzh-datamessagelist-item.localization';\n\n/**\n */\n@Component({\n  tag: \"stzh-datamessagelist-item\",\n  styleUrl: \"stzh-datamessagelist-item.scss\",\n  scoped: true\n})\nexport class StzhDatamessagelistItem {\n  /** Translation strings */\n  @Prop() localization: StzhDatamessagelistItemLocalizedText;\n\n  /** Heading */\n  @Prop() heading: string = \"\";\n\n  /** Whether item should be displayed in unread state */\n  @Prop() unread: boolean = false;\n\n  /** URL the item should link to */\n  @Prop() href: string = \"\";\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target (if href is used) */\n  @Prop() target: string;\n\n  /** Description */\n  @Prop() description: string = \"\";\n\n  /** Icon (`arrow-right` by default or `external-link` if rel=\"*external*\" is used) */\n  @Prop() icon: string;\n\n  /** Whether item is not interactive (arrow icon and hover effect will disappear) */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Loading status */\n  @Prop() loadingStatus: StzhDatamessagelistItemEntryLoadingStatus | string;\n  private _loadingStatus: StzhDatamessagelistItemEntryLoadingStatus;\n\n  /** Meta */\n  @Prop() meta: StzhDatamessagelistItemEntryMeta[] | string;\n  private _meta: StzhDatamessagelistItemEntryMeta[];\n\n  /** Actions */\n  @Prop() actions: StzhDatamessagelistItemEntryAction[] | string;\n  private _actions: StzhDatamessagelistItemEntryAction[];\n\n  /** Tags */\n  @Prop() tags: StzhDatamessagelistItemEntryTag[] | string;\n  private _tags: StzhDatamessagelistItemEntryTag[];\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link element.\n   * Default value will be taken from `heading` prop.\n   */\n  @Prop() analyticsId: string;\n\n  /** Whether rel contains external */\n  @State() external: boolean = false;\n\n  @Element() element: HTMLStzhDatamessagelistItemElement;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhDatamessagelistItemClickEvent>;\n\n  /** Action click event */\n  @Event() stzhActionClick: EventEmitter<StzhDatamessagelistItemActionClickEvent>;\n\n  @Watch(\"rel\")\n  externalWatcher() {\n    this.external = this.rel && this.rel.includes(\"external\");\n  }\n\n  @Watch(\"loadingStatus\")\n  loadingStatusWatcher(newValue: StzhDatamessagelistItemEntryLoadingStatus | string) {\n    if (typeof newValue === \"string\") {\n      this._loadingStatus = JSON.parse(newValue);\n    } else {\n      this._loadingStatus = newValue;\n    }\n  }\n\n  @Watch(\"meta\")\n  metaWatcher(newValue: StzhDatamessagelistItemEntryMeta[] | string) {\n    if (typeof newValue === \"string\") {\n      this._meta = JSON.parse(newValue);\n    } else {\n      this._meta = newValue;\n    }\n  }\n\n  @Watch(\"actions\")\n  actionsWatcher(newValue: StzhDatamessagelistItemEntryAction[] | string) {\n    if (typeof newValue === \"string\") {\n      this._actions = JSON.parse(newValue);\n    } else {\n      this._actions = newValue;\n    }\n  }\n\n  @Watch(\"tags\")\n  tagsWatcher(newValue: StzhDatamessagelistItemEntryTag[] | string) {\n    if (typeof newValue === \"string\") {\n      this._tags = JSON.parse(newValue);\n    } else {\n      this._tags = newValue;\n    }\n  }\n\n  private actionClick = (action: StzhDatamessagelistItemEntryAction, originalEvent: MouseEvent) => {\n    this.stzhActionClick.emit({\n      component: \"stzh-datamessagelist-item\",\n      action,\n      originalEvent\n    });\n  }\n\n  private itemClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-datamessagelist-item\",\n      originalEvent,\n      href: this.href\n    });\n  }\n\n  async componentWillLoad() {\n    this.loadingStatusWatcher(this.loadingStatus);\n    this.metaWatcher(this.meta);\n    this.actionsWatcher(this.actions);\n    this.tagsWatcher(this.tags);\n    this.externalWatcher();\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datamessagelist-item\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-datamessagelist-item\": true,\n      \"stzh-datamessagelist-item--is-unread\": this.unread,\n      \"stzh-datamessagelist-item--is-interactive\": !this.nonInteractive,\n    };\n\n    const HeadingLink = this.nonInteractive ? \"div\" :\n      this.href ? \"a\" : \"button\";\n\n    return (\n      <Host role=\"listitem\">\n        <article class={classes}>\n          <div class=\"stzh-datamessagelist-item__content\">\n            <div class=\"stzh-datamessagelist-item__text\">\n              <h3 class=\"stzh-datamessagelist-item__heading\">\n                <HeadingLink\n                  class=\"stzh-datamessagelist-item__heading-link\"\n                  href={this.href}\n                  rel={this.rel}\n                  target={this.target}\n                  onClick={this.itemClick}\n                  s-object-id={this.analyticsId || this.heading}\n                >\n                  {this.unread &&\n                    <span class=\"stzh-datamessagelist-item__vhidden\">\n                      {this.localization.unread},\n                    </span>\n                  }\n                  {this.heading}\n                </HeadingLink>\n              </h3>\n\n              {this.description &&\n                <div class=\"stzh-datamessagelist-item__description\">\n                  <stzh-clamp lines={2} linesMedium={1}>\n                    {this.description}\n                  </stzh-clamp>\n                </div>\n              }\n\n              {this._meta && this._meta.length > 0 &&\n                <div class=\"stzh-datamessagelist-item__meta-wrapper\">\n                  <ul class=\"stzh-datamessagelist-item__meta\">\n                    {this._meta.map((meta) =>\n                      <li class=\"stzh-datamessagelist-item__meta-item\">\n                        <span class=\"stzh-datamessagelist-item__meta-item-label\">{meta.label}</span>\n                        <span class=\"stzh-datamessagelist-item__meta-item-value\">{meta.value}</span>\n                      </li>\n                    )}\n                  </ul>\n                </div>\n              }\n            </div>\n\n            {this._loadingStatus &&\n              <stzh-status\n                class=\"stzh-datamessagelist-item__status\"\n                label={this._loadingStatus.label}\n                percent={this._loadingStatus.percent}\n                type={this._loadingStatus.type}\n                withLoadingbar={true}\n              ></stzh-status>\n            }\n\n            {this._tags && this._tags.length > 0 &&\n              <div class=\"stzh-datamessagelist-item__tags-wrapper\">\n                <div class=\"stzh-datamessagelist-item__tags\">\n                  {this._tags.map((tag) =>\n                    <stzh-chip\n                      class=\"stzh-datamessagelist-item__tag\"\n                      variant=\"tag\"\n                      size=\"small\"\n                      nonInteractive={true}\n                      inverted={tag.inverted}\n                      type={tag.type}\n                      icon={tag.icon}\n                      label={tag.label}\n                    ></stzh-chip>\n                  )}\n                </div>\n              </div>\n            }\n          </div>\n\n          <div class=\"stzh-datamessagelist-item__actions\">\n            {(this._actions && this._actions.length > 0) ?\n              <stzh-popover\n                label={this.localization.actionsPopoverLabel}\n                placement=\"bottom-end\"\n                class=\"stzh-datamessagelist-item__action-popover\"\n              >\n                <stzh-button\n                  class=\"stzh-datamessagelist-item__action-popover-button\"\n                  variant=\"tertiary\"\n                  size=\"tiny\"\n                  icon=\"more-horizontal\"\n                  iconOnly={true}\n                ></stzh-button>\n                <stzh-menu slot=\"content\">\n                  {this._actions.map((action) =>\n                    <stzh-menu-item\n                      icon={action.icon}\n                      badge={action.badge}\n                      onClick={(event) => { this.actionClick(action, event) }}\n                    >\n                      {action.label}\n                    </stzh-menu-item>\n                  )}\n                </stzh-menu>\n              </stzh-popover>\n              :\n              (\n                !this.nonInteractive &&\n                  <div class=\"stzh-datamessagelist-item__action is-non-interactive\">\n                    <stzh-icon class=\"stzh-datamessagelist-item__action-icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n                  </div>\n              )\n            }\n          </div>\n\n        </article>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-datatable/stzh-datatable.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
  */
@@ -378,9 +381,9 @@ stzh-datatable[disable-min-width]:not([disable-min-width=false]) {
   font-style: var(--stzh-font-style-heavy);
 }
 .stzh-datatable__cell i, .stzh-datatable__cell em {
-  font-family: var(--stzh-font-family-medium);
-  font-weight: var(--stzh-font-weight-medium);
-  font-style: var(--stzh-font-style-medium);
+  font-family: var(--stzh-font-family-medium-italic);
+  font-weight: var(--stzh-font-weight-medium-italic);
+  font-style: var(--stzh-font-style-medium-italic);
 }
 .stzh-datatable__cell.align-left {
   text-align: left;

package/dist/collection/components/stzh-datepicker/stzh-datepicker.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
  */