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

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
  */
@@ -163,6 +166,7 @@
   position: relative;
   padding: var(--stzh-space-medium);
   background-color: var(--stzh-color-white);
+  /* Is interactive variant */
   /* Unread variant */
 }
 @media screen and (min-width: 900px) {
@@ -190,12 +194,6 @@
     padding-right: var(--stzh-space-xxlarge);
   }
 }
-.stzh-datamessagelist-item:hover .stzh-datamessagelist-item__action.is-non-interactive {
-  color: var(--stzh-color-primary-hover);
-}
-.stzh-datamessagelist-item:hover .stzh-datamessagelist-item__action-popover-button {
-  --color: var(--stzh-color-primary-hover);
-}
 .stzh-datamessagelist-item__vhidden {
   border: 0;
   clip: rect(0 0 0 0);
@@ -253,14 +251,20 @@
   }
 }
 .stzh-datamessagelist-item__heading-link {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
   color: inherit;
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
   transition: color var(--stzh-base-transition-animation-speed);
   border-radius: var(--stzh-button-border-radius);
-}
-.stzh-datamessagelist-item__heading-link:hover, .stzh-datamessagelist-item__heading-link:focus {
-  color: var(--stzh-color-primary-hover);
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
 }
 .stzh-datamessagelist-item__heading-link::before, .stzh-datamessagelist-item__heading-link::after {
   content: "";
@@ -277,9 +281,6 @@
 .stzh-datamessagelist-item__heading-link::after {
   z-index: 1;
 }
-.stzh-datamessagelist-item__heading-link:hover::before, .stzh-datamessagelist-item__heading-link:focus::before {
-  background-color: var(--stzh-color-old-primary4);
-}
 .stzh-datamessagelist-item__description {
   font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
   line-height: var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));
@@ -411,15 +412,27 @@
   position: relative;
   z-index: 2;
 }
-.stzh-datamessagelist-item--is-unread .stzh-datamessagelist-item__heading-link {
-  color: var(--stzh-color-primary);
+.stzh-datamessagelist-item--is-interactive:hover .stzh-datamessagelist-item__action.is-non-interactive {
+  color: var(--stzh-color-primary-hover);
+}
+.stzh-datamessagelist-item--is-interactive:hover .stzh-datamessagelist-item__action-popover-button {
+  --color: var(--stzh-color-primary-hover);
 }
-.stzh-datamessagelist-item--is-unread .stzh-datamessagelist-item__heading-link:hover, .stzh-datamessagelist-item--is-unread .stzh-datamessagelist-item__heading-link:focus {
+.stzh-datamessagelist-item--is-interactive .stzh-datamessagelist-item__heading-link:hover, .stzh-datamessagelist-item--is-interactive .stzh-datamessagelist-item__heading-link:focus {
   color: var(--stzh-color-primary-hover);
 }
+.stzh-datamessagelist-item--is-interactive .stzh-datamessagelist-item__heading-link:hover::before, .stzh-datamessagelist-item--is-interactive .stzh-datamessagelist-item__heading-link:focus::before {
+  background-color: var(--stzh-color-old-primary4);
+}
+.stzh-datamessagelist-item--is-unread .stzh-datamessagelist-item__heading-link {
+  color: var(--stzh-color-primary);
+}
 .stzh-datamessagelist-item--is-unread .stzh-datamessagelist-item__heading-link::before {
   border-left: 0.3125rem solid var(--stzh-color-primary);
 }
-.stzh-datamessagelist-item--is-unread .stzh-datamessagelist-item__heading-link:hover::before, .stzh-datamessagelist-item--is-unread .stzh-datamessagelist-item__heading-link:focus::before {
+.stzh-datamessagelist-item--is-unread.stzh-datamessagelist-item--is-interactive .stzh-datamessagelist-item__heading-link:hover, .stzh-datamessagelist-item--is-unread.stzh-datamessagelist-item--is-interactive .stzh-datamessagelist-item__heading-link:focus {
+  color: var(--stzh-color-primary-hover);
+}
+.stzh-datamessagelist-item--is-unread.stzh-datamessagelist-item--is-interactive .stzh-datamessagelist-item__heading-link:hover::before, .stzh-datamessagelist-item--is-unread.stzh-datamessagelist-item--is-interactive .stzh-datamessagelist-item__heading-link:focus::before {
   border-left-color: var(--stzh-color-primary-hover);
 }

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;
@@ -24,6 +25,7 @@ export class StzhDatamessagelistItem {
     this.target = undefined;
     this.description = "";
     this.icon = undefined;
+    this.nonInteractive = false;
     this.loadingStatus = undefined;
     this.meta = undefined;
     this.actions = undefined;
@@ -79,9 +81,12 @@ export class StzhDatamessagelistItem {
   render() {
     const classes = {
       "stzh-datamessagelist-item": true,
-      "stzh-datamessagelist-item--is-unread": this.unread
+      "stzh-datamessagelist-item--is-unread": this.unread,
+      "stzh-datamessagelist-item--is-interactive": !this.nonInteractive,
     };
-    return (h(Host, { role: "listitem" }, h("article", { class: classes }, h("div", { class: "stzh-datamessagelist-item__content" }, h("div", { class: "stzh-datamessagelist-item__text" }, h("h3", { class: "stzh-datamessagelist-item__heading" }, h("a", { class: "stzh-datamessagelist-item__heading-link", href: this.href, rel: this.rel, target: this.target, onClick: this.itemClick, "s-object-id": this.analyticsId || this.heading }, this.unread &&
+    const HeadingLink = this.nonInteractive ? "div" :
+      this.href ? "a" : "button";
+    return (h(Host, { role: "listitem" }, h("article", { class: classes }, h("div", { class: "stzh-datamessagelist-item__content" }, h("div", { class: "stzh-datamessagelist-item__text" }, h("h3", { class: "stzh-datamessagelist-item__heading" }, h(HeadingLink, { class: "stzh-datamessagelist-item__heading-link", href: this.href, rel: this.rel, target: this.target, onClick: this.itemClick, "s-object-id": this.analyticsId || this.heading }, this.unread &&
       h("span", { class: "stzh-datamessagelist-item__vhidden" }, this.localization.unread, ","), this.heading)), this.description &&
       h("div", { class: "stzh-datamessagelist-item__description" }, h("stzh-clamp", { lines: 2, linesMedium: 1 }, this.description)), this._meta && this._meta.length > 0 &&
       h("div", { class: "stzh-datamessagelist-item__meta-wrapper" }, h("ul", { class: "stzh-datamessagelist-item__meta" }, this._meta.map((meta) => h("li", { class: "stzh-datamessagelist-item__meta-item" }, h("span", { class: "stzh-datamessagelist-item__meta-item-label" }, meta.label), h("span", { class: "stzh-datamessagelist-item__meta-item-value" }, meta.value)))))), this._loadingStatus &&
@@ -89,7 +94,8 @@ export class StzhDatamessagelistItem {
       h("div", { class: "stzh-datamessagelist-item__tags-wrapper" }, h("div", { class: "stzh-datamessagelist-item__tags" }, this._tags.map((tag) => h("stzh-chip", { class: "stzh-datamessagelist-item__tag", variant: "tag", size: "small", nonInteractive: true, inverted: tag.inverted, type: tag.type, icon: tag.icon, label: tag.label }))))), h("div", { class: "stzh-datamessagelist-item__actions" }, (this._actions && this._actions.length > 0) ?
       h("stzh-popover", { label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: "stzh-datamessagelist-item__action-popover" }, h("stzh-button", { class: "stzh-datamessagelist-item__action-popover-button", variant: "tertiary", size: "tiny", icon: "more-horizontal", iconOnly: true }), h("stzh-menu", { slot: "content" }, this._actions.map((action) => h("stzh-menu-item", { icon: action.icon, badge: action.badge, onClick: (event) => { this.actionClick(action, event); } }, action.label))))
       :
-        h("div", { class: "stzh-datamessagelist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datamessagelist-item__action-icon", name: this.icon ? this.icon : (this.external ? "external-link" : "arrow-right") }))))));
+        (!this.nonInteractive &&
+          h("div", { class: "stzh-datamessagelist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datamessagelist-item__action-icon", name: this.icon ? this.icon : (this.external ? "external-link" : "arrow-right") })))))));
   }
   static get is() { return "stzh-datamessagelist-item"; }
   static get encapsulation() { return "scoped"; }
@@ -249,6 +255,24 @@ export class StzhDatamessagelistItem {
         "attribute": "icon",
         "reflect": false
       },
+      "nonInteractive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether item is not interactive (arrow icon and hover effect will disappear)"
+        },
+        "attribute": "non-interactive",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "loadingStatus": {
         "type": "string",
         "mutable": false,
@@ -378,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  /** 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    };\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                <a\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                </a>\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              <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          </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
  */
@@ -157,10 +160,11 @@
 }
 
 :host {
+  --calendar-width: var(--stzh-calendar-width);
   width: 100%;
 }
 :host[inline]:not([inline=false]) {
-  width: var(--stzh-calendar-width);
+  width: var(--calendar-width);
 }
 
 .stzh-datepicker {
@@ -169,15 +173,29 @@
 .stzh-datepicker__popover {
   --width: auto;
 }
+.stzh-datepicker__calendar {
+  margin-left: auto;
+  margin-right: auto;
+}
 .stzh-datepicker__calendar.is-inline {
   width: 100%;
+  margin-left: 0px;
+  margin-right: 0px;
 }
 .stzh-datepicker__actions {
   display: flex;
-  justify-content: flex-end;
+  width: var(--calendar-width);
+  margin-left: auto;
+  margin-right: auto;
+}
+.stzh-datepicker__actions.is-inline {
+  width: 100%;
+  margin-left: 0px;
+  margin-right: 0px;
 }
 .stzh-datepicker__actions:not(:empty) {
-  margin-right: var(--stzh-space-small);
+  padding-left: var(--stzh-space-small);
+  padding-right: var(--stzh-space-small);
 }
 .stzh-datepicker--has-action .stzh-datepicker__popover {
   --content-padding: 0 0 var(--stzh-space-small) 0;

package/dist/collection/components/stzh-daterange/stzh-daterange.css

@@ -0,0 +1,256 @@
+/**
+ * Colors
+ */
+/* Signal colors */
+/* Old colors (TODO: cleanup when not needed anymore) */
+/**
+ * Base
+ */
+/**
+ * Selection
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * Icons
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Fieldset
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Text
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Header
+ */
+/**
+ * Dialogs / Popover
+ */
+/**
+ * Overlays
+ */
+/**
+ * Accordions
+ */
+/**
+ * Timeline
+ */
+/**
+ * Buttons
+ */
+/**
+ * Ratios
+ */
+/**
+ * Pagetitle
+ */
+/**
+ * Calendar
+ */
+/**
+ * Cta
+ */
+/**
+ * Toasts
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Container
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Ratios
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-medium);
+  font-weight: var(--stzh-font-weight-medium);
+  font-style: var(--stzh-font-style-medium);
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+  /* default outline value, which will be applied to all elements receiving focus
+  the .has-focus class is used by the focus target */
+}
+:host[hidden] {
+  display: none;
+}
+:host::-moz-selection {
+  color: var(--stzh-selection-color);
+  background-color: var(--stzh-selection-background-color);
+}
+:host::selection {
+  color: var(--stzh-selection-color);
+  background-color: var(--stzh-selection-background-color);
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
+  -webkit-text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);
+          text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);
+}
+:host .has-focus {
+  outline: var(--stzh-flyingfocus-color) solid 0.125rem;
+  outline-offset: 0.125rem;
+}
+:host .stzh-fylingfocus-focused {
+  outline-style: none !important;
+}
+:host .stzh-fylingfocus-focused::-moz-focus-inner {
+  border: 0 !important;
+}
+
+:host {
+  --grid-template-areas: var(
+    --stzh-daterange-grid-template-areas,
+    "datefrom datefrom datefrom datefrom"
+    "dateto dateto dateto dateto"
+    "links links links links"
+  );
+  --grid-template-columns: var(
+    --stzh-daterange-grid-template-columns,
+    repeat(4, minmax(0, 1fr))
+  );
+}
+@media screen and (min-width: 600px) {
+  :host {
+    --grid-template-areas: var(
+      --stzh-daterange-grid-template-areas,
+      "datefrom datefrom dateto dateto"
+      "links links links links"
+    );
+  }
+}
+@media screen and (min-width: 900px) {
+  :host {
+    --grid-template-areas: var(
+      --stzh-daterange-grid-template-areas,
+      "datefrom datefrom dateto dateto links links links links"
+    );
+    --grid-template-columns: var(
+      --stzh-daterange-grid-template-columns,
+      repeat(8, minmax(0, 1fr))
+    );
+  }
+}
+
+.stzh-daterange {
+  --stzh-description-min-height: var(--stzh-fieldset-description-min-height);
+  -moz-column-gap: var(--stzh-grid-gutter);
+       column-gap: var(--stzh-grid-gutter);
+  display: grid;
+  align-items: center;
+  grid-template-areas: var(--grid-template-areas);
+  grid-template-columns: var(--grid-template-columns);
+  align-items: start;
+  border: none;
+  padding: 0;
+}
+@media screen and (min-width: 600px) {
+  .stzh-daterange {
+    -moz-column-gap: var(--stzh-grid-gutter-small);
+         column-gap: var(--stzh-grid-gutter-small);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-daterange {
+    -moz-column-gap: var(--stzh-grid-gutter-medium);
+         column-gap: var(--stzh-grid-gutter-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-daterange {
+    -moz-column-gap: var(--stzh-grid-gutter-large);
+         column-gap: var(--stzh-grid-gutter-large);
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-daterange {
+    -moz-column-gap: var(--stzh-grid-gutter-ultra);
+         column-gap: var(--stzh-grid-gutter-ultra);
+  }
+}
+.stzh-daterange__legend {
+  border: 0;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+          clip-path: inset(100%);
+  width: 0.0625rem;
+  height: 0.0625rem;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+.stzh-daterange__datefrom {
+  grid-area: datefrom;
+}
+.stzh-daterange__dateto {
+  grid-area: dateto;
+}
+.stzh-daterange__links {
+  grid-area: links;
+  align-self: center;
+}
+.stzh-daterange__links {
+  display: flex;
+  gap: var(--stzh-space-large);
+}

package/dist/collection/{patterns/appointments/appointments.e2e.js → components/stzh-daterange/stzh-daterange.e2e.js}

@@ -1,10 +1,10 @@
 import { test } from "@playwright/test";
 import { visualDiff } from "../../../.build/test/utils";
-const URL = "patterns-appointments";
+const URL = "components-daterange";
 const STORIES = [
   "default",
 ];
-test.describe("pattern: appointments", () => {
+test.describe("daterange", () => {
   STORIES.forEach((storyId) => {
     test(`story ${storyId} visual diff`, async ({ page }) => {
       await visualDiff({
@@ -15,4 +15,4 @@ test.describe("pattern: appointments", () => {
     });
   });
 });
-//# sourceMappingURL=appointments.e2e.js.map
+//# sourceMappingURL=stzh-daterange.e2e.js.map

package/dist/collection/components/stzh-daterange/stzh-daterange.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-daterange.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-daterange/stzh-daterange.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,sBAAsB,CAAC;AAEnC,MAAM,OAAO,GAAG;EACd,SAAS;CACV,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EAC9B,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACtD,MAAM,UAAU,CAAC;QACf,OAAO;QACP,IAAI;QACJ,GAAG,EAAE,GAAG;OACT,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../.build/test/utils\";\n\nconst URL = \"components-daterange\";\n\nconst STORIES = [\n  \"default\",\n];\n\ntest.describe(\"daterange\", () => {\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"]}