npm - @oiz/stzh-components - Versions diffs - 3.0.0-beta4 → 3.0.0-beta5 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (590) hide show

package/dist/cjs/stzh-card-superteaser.cjs.entry.js ADDED Viewed

@@ -0,0 +1,146 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-92254d32.js');
+const utils = require('./utils-d0fff87f.js');
+require('./string-utils-5dd70320.js');
+const stzhCardSuperteaserCss = ".sc-stzh-card-superteaser-h{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}[hidden].sc-stzh-card-superteaser-h{display:none}.sc-stzh-card-superteaser-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-superteaser-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-superteaser-h *.sc-stzh-card-superteaser,.sc-stzh-card-superteaser-h *.sc-stzh-card-superteaser::before,.sc-stzh-card-superteaser-h *.sc-stzh-card-superteaser::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)}.sc-stzh-card-superteaser-h .has-focus.sc-stzh-card-superteaser{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-card-superteaser-h .stzh-fylingfocus-focused.sc-stzh-card-superteaser{outline-style:none !important}.sc-stzh-card-superteaser-h .stzh-fylingfocus-focused.sc-stzh-card-superteaser::-moz-focus-inner{border:0 !important}.sc-stzh-card-superteaser-h{--service-background-color:var(--stzh-color-secondary30);--service-color:var(--stzh-color-primary70);--grid-template-areas:\"heading\"\n    \"description\"\n    \"meta\";--grid-template-rows:repeat(2, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr);display:grid}.sc-stzh-card-superteaser-h .sc-stzh-card-superteaser-s>img{width:100%;max-width:100%}[has-image].sc-stzh-card-superteaser-h{--grid-template-areas:\"image\"\n    \"heading\"\n    \"description\"\n    \"meta\";--grid-template-rows:repeat(3, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr)}[has-image][image-position=right].sc-stzh-card-superteaser-h{--grid-template-areas:\"heading heading\"\n    \"description description\"\n    \"meta image\";--grid-template-rows:repeat(2, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr) minmax(calc(6.25rem + var(--stzh-space-medium)), min-content)}.stzh-card-superteaser.sc-stzh-card-superteaser{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:grid;background-color:var(--stzh-color-grey10);grid-template-areas:var(--grid-template-areas);grid-template-rows:var(--grid-template-rows);grid-template-columns:var(--grid-template-columns);color:var(--stzh-color-grey80)}.stzh-card-superteaser__tag.sc-stzh-card-superteaser,.stzh-card-superteaser__dateline.sc-stzh-card-superteaser,.stzh-card-superteaser__breadcrumb.sc-stzh-card-superteaser,.stzh-card-superteaser__event-infos.sc-stzh-card-superteaser,.stzh-card-superteaser__heading-link-text.sc-stzh-card-superteaser,.stzh-card-superteaser__description.sc-stzh-card-superteaser,.stzh-card-superteaser__meta-wrapper.sc-stzh-card-superteaser{z-index:1;position:relative}.stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser,.stzh-card-superteaser--has-description-wrapper.sc-stzh-card-superteaser .stzh-card-superteaser__description-wrapper.sc-stzh-card-superteaser,.stzh-card-superteaser__meta-wrapper.sc-stzh-card-superteaser{margin-left:var(--stzh-space-medium);margin-right:var(--stzh-space-medium);margin-bottom:var(--stzh-space-large)}.stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser{grid-area:heading;display:grid;margin-top:var(--stzh-space-xlarge)}.stzh-card-superteaser__image.sc-stzh-card-superteaser,.stzh-card-superteaser__meta-wrapper.sc-stzh-card-superteaser{align-self:end}.stzh-card-superteaser__image.sc-stzh-card-superteaser{display:grid;grid-area:image;width:100%}.stzh-card-superteaser__description-wrapper.sc-stzh-card-superteaser{grid-area:description}.stzh-card-superteaser__meta-wrapper.sc-stzh-card-superteaser{grid-area:meta}.stzh-card-superteaser__meta.sc-stzh-card-superteaser{overflow:hidden}.stzh-card-superteaser__download.sc-stzh-card-superteaser{display:flex;justify-content:space-between;align-items:center;gap:var(--stzh-space-xsmall);overflow:hidden}.stzh-card-superteaser__download-button.sc-stzh-card-superteaser{align-self:flex-end;display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height);color:var(--stzh-color-primary70)}.stzh-card-superteaser__tag.sc-stzh-card-superteaser,.stzh-card-superteaser__topic.sc-stzh-card-superteaser,.stzh-card-superteaser__service.sc-stzh-card-superteaser,.stzh-card-superteaser__event-date-teaser.sc-stzh-card-superteaser{z-index:2}.stzh-card-superteaser__tag.sc-stzh-card-superteaser{position:absolute;left:0;top:0}.stzh-card-superteaser__service.sc-stzh-card-superteaser{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:absolute;top:0;right:0;background-color:var(--service-background-color);color:var(--service-color);padding:var(--stzh-space-xsmall) var(--stzh-space-medium);text-align:center}.stzh-card-superteaser__topic.sc-stzh-card-superteaser{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:relative;color:var(--stzh-color-primary70);margin-bottom:var(--stzh-space-xsmall)}.stzh-card-superteaser__dateline.sc-stzh-card-superteaser{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-color-black);margin-bottom:var(--stzh-space-xxsmall)}.stzh-card-superteaser__heading.sc-stzh-card-superteaser{margin-top:0px;margin-bottom:var(--stzh-space-small)}.stzh-card-superteaser__heading-link.sc-stzh-card-superteaser{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing);display:block;color:var(--stzh-color-primary70);-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-card-superteaser__event-infos.sc-stzh-card-superteaser{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-card-superteaser.sc-stzh-card-superteaser:has(.stzh-card-superteaser__description:not(:empty)) .stzh-card-superteaser__event-infos.sc-stzh-card-superteaser{margin-bottom:var(--stzh-space-small)}.stzh-card-superteaser__description.sc-stzh-card-superteaser:empty{display:none}.stzh-card-superteaser__breadcrumb.sc-stzh-card-superteaser{margin-bottom:var(--stzh-space-small)}.stzh-card-superteaser__event-date-teaser.sc-stzh-card-superteaser{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);text-transform:uppercase;display:flex;flex-direction:column;justify-content:center;align-items:center;width:5.5rem;height:5.5rem;color:var(--stzh-color-black);background-color:var(--stzh-color-secondary30);position:absolute;top:0;right:0}.stzh-card-superteaser__event-date-teaser-day.sc-stzh-card-superteaser{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing);color:var(--stzh-color-primary70);margin-top:-0.4375rem;margin-bottom:-0.4375rem}.stzh-card-superteaser__meta-list.sc-stzh-card-superteaser,.stzh-card-superteaser__download-meta-list.sc-stzh-card-superteaser{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);display:flex;align-items:center;flex-wrap:wrap;-moz-column-gap:var(--stzh-space-xsmall);column-gap:var(--stzh-space-xsmall);margin-left:calc((var(--stzh-space-xsmall) + 0.0625rem) / -1)}.stzh-card-superteaser__meta-list-item.sc-stzh-card-superteaser,.stzh-card-superteaser__download-meta-list-item.sc-stzh-card-superteaser{display:flex;align-items:center;min-height:1.5rem;gap:var(--stzh-space-xsmall)}.stzh-card-superteaser__meta-list-item.sc-stzh-card-superteaser::before,.stzh-card-superteaser__download-meta-list-item.sc-stzh-card-superteaser::before{content:\"\";display:block;width:0.0625rem;height:1rem;background-color:currentColor}.stzh-card-superteaser--has-link.sc-stzh-card-superteaser .stzh-card-superteaser__heading-link.sc-stzh-card-superteaser{border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-card-superteaser--has-link.sc-stzh-card-superteaser .stzh-card-superteaser__heading-link.sc-stzh-card-superteaser::before,.stzh-card-superteaser--has-link.sc-stzh-card-superteaser .stzh-card-superteaser__heading-link.sc-stzh-card-superteaser::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%;transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-card-superteaser--has-link.sc-stzh-card-superteaser .stzh-card-superteaser__heading-link.sc-stzh-card-superteaser::after{z-index:10}.stzh-card-superteaser--has-link.sc-stzh-card-superteaser:has(.stzh-card-superteaser__heading-link:hover) .stzh-card-superteaser__heading-link.sc-stzh-card-superteaser::before{background-color:var(--stzh-color-secondary10)}.stzh-card-superteaser--has-link.sc-stzh-card-superteaser:has(.stzh-card-superteaser__heading-link:hover) .stzh-card-superteaser__tag.sc-stzh-card-superteaser{--color:var(--stzh-color-secondary60)}.stzh-card-superteaser--has-tag.sc-stzh-card-superteaser .stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser{margin-top:var(--stzh-space-xxxlarge)}.stzh-card-superteaser--has-service.sc-stzh-card-superteaser .stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser{margin-top:var(--stzh-space-xxxxlarge)}.stzh-card-superteaser--has-service.stzh-card-superteaser--has-image-right.sc-stzh-card-superteaser .stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser{margin-top:var(--stzh-space-xxxlarge)}.stzh-card-superteaser--has-image.sc-stzh-card-superteaser .stzh-card-superteaser__image.sc-stzh-card-superteaser{z-index:1;position:relative}.stzh-card-superteaser--has-image-default.sc-stzh-card-superteaser .stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser{margin-top:var(--stzh-space-medium)}.stzh-card-superteaser--has-image-right.sc-stzh-card-superteaser .stzh-card-superteaser__image.sc-stzh-card-superteaser{margin-bottom:var(--stzh-space-large);padding-right:var(--stzh-space-medium)}.stzh-card-superteaser--has-image-right.sc-stzh-card-superteaser .stzh-card-superteaser__meta-wrapper.sc-stzh-card-superteaser{margin-right:var(--stzh-space-xsmall)}.stzh-card-superteaser--has-image-right.sc-stzh-card-superteaser .stzh-card-superteaser__service.sc-stzh-card-superteaser{position:static}.stzh-card-superteaser--has-description-wrapper.sc-stzh-card-superteaser .stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser,.stzh-card-superteaser--has-meta.sc-stzh-card-superteaser .stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser,.stzh-card-superteaser--has-download.sc-stzh-card-superteaser .stzh-card-superteaser__heading-wrapper.sc-stzh-card-superteaser{margin-bottom:0px}.stzh-card-superteaser--has-meta.sc-stzh-card-superteaser .stzh-card-superteaser__description-wrapper.sc-stzh-card-superteaser,.stzh-card-superteaser--has-download.sc-stzh-card-superteaser .stzh-card-superteaser__description-wrapper.sc-stzh-card-superteaser{margin-bottom:0px}.stzh-card-superteaser--has-meta.sc-stzh-card-superteaser .stzh-card-superteaser__description.sc-stzh-card-superteaser:not(:empty),.stzh-card-superteaser--has-download.sc-stzh-card-superteaser .stzh-card-superteaser__description.sc-stzh-card-superteaser:not(:empty){margin-bottom:var(--stzh-space-small)}.stzh-card-superteaser--has-download.sc-stzh-card-superteaser .stzh-card-superteaser__meta.sc-stzh-card-superteaser{margin-bottom:var(--stzh-space-xsmall)}";
+const StzhCardSuperteaser = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.stzhClick = index.createEvent(this, "stzhClick", 7);
+    this.handleCardClick = (originalEvent) => {
+      this.stzhClick.emit({
+        component: "stzh-card-superteaser",
+        originalEvent,
+        href: this.href
+      });
+    };
+    this.localization = undefined;
+    this.href = undefined;
+    this.target = undefined;
+    this.download = undefined;
+    this.analyticsId = undefined;
+    this.heading = "";
+    this.headingLevel = "3";
+    this.description = "";
+    this.tag = undefined;
+    this.topic = undefined;
+    this.service = undefined;
+    this.dateline = undefined;
+    this.meta = undefined;
+    this.breadcrumbItems = undefined;
+    this.datalistItems = [];
+    this.eventDateStart = undefined;
+    this.eventDateEnd = undefined;
+    this.eventLocation = undefined;
+    this.imagePosition = "default";
+    this.downloadHeading = undefined;
+    this.downloadMeta = undefined;
+    this.dateAdapter = undefined;
+  }
+  metaWatcher(newValue) {
+    if (!newValue) {
+      this._meta = [];
+    }
+    else if (typeof newValue === "string") {
+      try {
+        this._meta = JSON.parse(newValue);
+      }
+      catch (e) {
+        this._meta = [];
+      }
+    }
+    else {
+      this._meta = newValue;
+    }
+  }
+  downloadMetaWatcher(newValue) {
+    if (!newValue) {
+      this._downloadMeta = [];
+    }
+    else if (typeof newValue === "string") {
+      try {
+        this._downloadMeta = JSON.parse(newValue);
+      }
+      catch (e) {
+        this._downloadMeta = [];
+      }
+    }
+    else {
+      this._downloadMeta = newValue;
+    }
+  }
+  componentDidRender() {
+    requestAnimationFrame(() => {
+      var _a, _b;
+      const objectId = this.analyticsId || ((_a = this.headingTextElement) === null || _a === void 0 ? void 0 : _a.innerText);
+      if (objectId) {
+        (_b = this.headingLinkElement) === null || _b === void 0 ? void 0 : _b.setAttribute("s-object-id", objectId);
+      }
+    });
+  }
+  async componentWillLoad() {
+    this.metaWatcher(this.meta);
+    this.downloadMetaWatcher(this.downloadMeta);
+    if (!this.localization) {
+      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "card-superteaser");
+    }
+    if (!this.dateAdapter) {
+      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats, this.localization.$globals);
+    }
+  }
+  render() {
+    const hasHeading = !!this.heading || utils.hasSlot(this.element, 'heading');
+    const hasDescription = !!this.description || utils.hasSlot(this.element, 'description');
+    const hasImage = utils.hasSlot(this.element, 'image');
+    const eventDateStart = this.eventDateStart && new Date(this.eventDateStart);
+    const eventDateEnd = this.eventDateEnd && new Date(this.eventDateEnd);
+    const classes = {
+      "stzh-card-superteaser": true,
+      "stzh-card-superteaser--has-heading": hasHeading,
+      "stzh-card-superteaser--has-description": hasDescription,
+      "stzh-card-superteaser--has-description-wrapper": hasDescription || !!eventDateStart || !!this.eventLocation,
+      "stzh-card-superteaser--has-link": !!this.href,
+      "stzh-card-superteaser--has-service": !!this.service,
+      "stzh-card-superteaser--has-tag": !!this.tag,
+      "stzh-card-superteaser--has-topic": !!this.topic,
+      "stzh-card-superteaser--has-image": hasImage,
+      "stzh-card-superteaser--has-image-default": hasImage && this.imagePosition === "default",
+      "stzh-card-superteaser--has-image-right": hasImage && this.imagePosition === "right",
+      "stzh-card-superteaser--has-meta": this._meta.length > 0,
+      "stzh-card-superteaser--has-download": !!this.downloadHeading || this._downloadMeta.length > 0,
+      "stzh-card-superteaser--has-breadcrumb": !!this.breadcrumbItems,
+    };
+    const Heading = `h${this.headingLevel}`;
+    const HeadingLink = this.href ? "a" : "div";
+    return (index.h(index.Host, { "has-image": hasImage }, index.h("article", { class: classes, "aria-label": this.heading, role: "listitem" }, this.tag &&
+      index.h("stzh-tag", { class: "stzh-card-superteaser__tag", label: this.tag, nonInteractive: true }), index.h("div", { class: "stzh-card-superteaser__heading-wrapper" }, this.breadcrumbItems &&
+      index.h("stzh-breadcrumb", { class: "stzh-card-superteaser__breadcrumb", items: this.breadcrumbItems, variant: "teaser" }), this.dateline &&
+      index.h("div", { class: "stzh-card-superteaser__dateline" }, this.dateline), this.topic
+      && index.h("div", { class: "stzh-card-superteaser__topic" }, this.topic), index.h(Heading, { class: "stzh-card-superteaser__heading" }, index.h(HeadingLink, { ref: (el) => (this.headingLinkElement = el), class: "stzh-card-superteaser__heading-link", href: this.href, target: this.target, download: this.download, onClick: this.handleCardClick }, index.h("div", { class: "stzh-card-superteaser__heading-link-text", ref: (el) => (this.headingTextElement = el) }, this.heading ? this.heading : index.h("slot", { name: "heading" }))))), index.h("div", { class: "stzh-card-superteaser__description-wrapper" }, (eventDateStart || this.eventLocation) &&
+      index.h("div", { class: "stzh-card-superteaser__event-infos" }, eventDateStart &&
+        index.h("div", { class: "stzh-card-superteaser__event-date" }, index.h("span", null, this.dateAdapter.format(eventDateStart, "dateLong"), ",\u00A0"), this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, "time")), this.eventLocation &&
+        index.h("div", { class: "stzh-card-superteaser__event-location" }, this.eventLocation)), index.h("div", { class: "stzh-card-superteaser__description" }, this.description ? this.description : index.h("slot", { name: "description" }))), index.h("div", { class: "stzh-card-superteaser__image" }, eventDateStart &&
+      index.h("div", { class: "stzh-card-superteaser__event-date-teaser" }, index.h("div", { class: "stzh-card-superteaser__event-date-teaser-day-name" }, this.localization.$globals.dayNamesShort[eventDateStart.getDay()]), index.h("div", { class: "stzh-card-superteaser__event-date-teaser-day" }, eventDateStart.getDate() < 10 && '0', eventDateStart.getDate()), index.h("div", { class: "stzh-card-superteaser__event-date-teaser-month" }, this.localization.$globals.monthNamesShort[eventDateStart.getMonth()])), this.service && index.h("div", { class: "stzh-card-superteaser__service" }, this.service), index.h("slot", { name: "image" })), (this._meta.length > 0 || this.datalistItems || !!this.downloadHeading || this._downloadMeta.length > 0) &&
+      index.h("div", { class: "stzh-card-superteaser__meta-wrapper" }, this.datalistItems &&
+        index.h("stzh-datalist", { class: "stzh-card-searchresult__datalist", items: this.datalistItems }), this._meta.length > 0 &&
+        index.h("div", { class: "stzh-card-superteaser__meta" }, index.h("div", { class: "stzh-card-superteaser__meta-list" }, this._meta.map((meta) => index.h(index.Fragment, null, index.h("div", { class: "stzh-card-superteaser__meta-list-item" }, meta))))), (!!this.downloadHeading || this._downloadMeta.length > 0) &&
+        index.h("div", { class: "stzh-card-superteaser__download" }, index.h("div", { class: "stzh-card-superteaser__download-data" }, this.downloadHeading &&
+          index.h("div", { class: "stzh-card-superteaser__download-heading" }, this.downloadHeading), this._downloadMeta.length > 0 &&
+          index.h("div", { class: "stzh-card-superteaser__download-meta-list" }, this._downloadMeta.map((meta) => index.h(index.Fragment, null, index.h("div", { class: "stzh-card-superteaser__download-meta-list-item" }, meta))))), index.h("div", { class: "stzh-card-superteaser__download-button" }, index.h("stzh-icon", { class: "stzh-card-superteaser__download-icon", name: "download" })))))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "meta": ["metaWatcher"],
+    "downloadMeta": ["downloadMetaWatcher"]
+  }; }
+};
+StzhCardSuperteaser.style = stzhCardSuperteaserCss;
+exports.stzh_card_superteaser = StzhCardSuperteaser;
+//# sourceMappingURL=stzh-card-superteaser.cjs.entry.js.map

package/dist/cjs/stzh-card-superteaser.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"stzh-card-superteaser.entry.cjs.js","mappings":"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","names":["hasSlot","h","Host","Fragment"],"sources":["src/components/stzh-card-superteaser/stzh-card-superteaser.scss?tag=stzh-card-superteaser&encapsulation=scoped","src/components/stzh-card-superteaser/stzh-card-superteaser.tsx"],"sourcesContent":[":host {\n --service-background-color: #{$colorSecondary30};\n --service-color: #{$colorPrimary70};\n\n --grid-template-areas:\n \"heading\"\n \"description\"\n \"meta\";\n --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n --grid-template-columns: minmax(0, 1fr);\n\n display: grid;\n\n ::slotted(img) {\n width: 100%;\n max-width: 100%;\n }\n\n &[has-image] {\n --grid-template-areas:\n \"image\"\n \"heading\"\n \"description\"\n \"meta\";\n --grid-template-rows: repeat(3, auto) minmax(0, 1fr);\n --grid-template-columns: minmax(0, 1fr);\n }\n\n &[has-image][image-position=\"right\"] {\n --grid-template-areas:\n \"heading heading\"\n \"description description\"\n \"meta image\";\n --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n --grid-template-columns: minmax(0, 1fr) minmax(calc(100px + #{space('medium')}), min-content);\n }\n}\n\n.stzh-card-superteaser {\n @include fontSize('milli');\n position: relative;\n display: grid;\n background-color: $colorGrey10;\n grid-template-areas: var(--grid-template-areas);\n grid-template-rows: var(--grid-template-rows);\n grid-template-columns: var(--grid-template-columns);\n color: $colorGrey80;\n\n &__tag,\n &__dateline,\n &__breadcrumb,\n &__event-infos,\n &__heading-link-text,\n &__description,\n &__meta-wrapper {\n z-index: 1;\n position: relative;\n }\n\n &__heading-wrapper,\n &--has-description-wrapper &__description-wrapper,\n &__meta-wrapper {\n margin-left: space('medium');\n margin-right: space('medium');\n margin-bottom: space('large');\n }\n\n &__heading-wrapper {\n grid-area: heading;\n display: grid;\n margin-top: space('xlarge');\n }\n\n &__image,\n &__meta-wrapper {\n align-self: end;\n }\n\n &__image {\n display: grid;\n grid-area: image;\n width: 100%;\n }\n\n &__description-wrapper {\n grid-area: description;\n }\n\n &__meta-wrapper {\n grid-area: meta;\n }\n\n &__meta {\n overflow: hidden;\n }\n\n &__download {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: space('xsmall');\n overflow: hidden;\n }\n\n &__download-button {\n align-self: flex-end;\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightSmall;\n height: $formInputHeightSmall;\n color: $colorPrimary70;\n }\n\n // &__download-heading {\n // color: $colorPrimary70;\n // text-underline-offset: $linkTextUnderlineOffset;\n // text-decoration-line: $linkTextDecorationLine;\n // text-decoration-thickness: $linkTextDecorationThickness;\n // text-decoration-skip-ink: $linkTextDecorationSkipInk;\n // }\n\n &__tag,\n &__topic,\n &__service,\n &__event-date-teaser {\n z-index: 2;\n }\n\n &__tag {\n position: absolute;\n left: 0;\n top: 0;\n }\n\n &__service {\n @include font('heavy');\n @include fontSize('micro');\n position: absolute;\n top: 0;\n right: 0;\n background-color: var(--service-background-color);\n color: var(--service-color);\n padding: space('xsmall') space('medium');\n text-align: center;\n }\n\n &__topic {\n @include font('heavy');\n @include fontSize('micro');\n position: relative;\n color: $colorPrimary70;\n margin-bottom: space('xsmall');\n }\n\n &__dateline {\n @include fontSize('micro');\n color: $colorBlack;\n margin-bottom: space('xxsmall');\n }\n\n &__heading {\n margin-top: 0px;\n margin-bottom: space('small');\n }\n\n &__heading-link {\n @include font('heavy');\n @include fontSize('deca');\n display: block;\n color: $colorPrimary70;\n text-decoration-line: none;\n }\n\n &__event-infos {\n @include fontSize('micro');\n }\n\n &:has(#{&}__description:not(:empty)) &__event-infos {\n margin-bottom: space('small');\n }\n\n &__description {\n &:empty {\n display: none;\n }\n }\n\n &__breadcrumb {\n margin-bottom: space('small');\n }\n\n &__event-date-teaser {\n @include fontSize('nano');\n text-transform: uppercase;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 88px;\n height: 88px;\n color: $colorBlack;\n background-color: $colorSecondary30;\n position: absolute;\n top: 0;\n right: 0;\n }\n\n &__event-date-teaser-day {\n @include font('heavy');\n @include fontSize('hecto');\n color: $colorPrimary70;\n margin-top: -7px;\n margin-bottom: -7px;\n }\n\n &__meta-list,\n &__download-meta-list {\n @include fontSize('micro');\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n column-gap: space('xsmall');\n margin-left: calc((#{space('xsmall')} + 1px) / -1);\n }\n\n &__meta-list-item,\n &__download-meta-list-item {\n display: flex;\n align-items: center;\n min-height: 24px;\n gap: space('xsmall');\n\n &::before {\n content: '';\n display: block;\n width: 1px;\n height: 16px;\n background-color: currentColor;\n }\n }\n\n /* Has link */\n\n &--has-link &__heading-link {\n border-radius: $buttonBorderRadius;\n cursor: pointer;\n\n &::before,\n &::after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition: background-color $baseTransitionAnimationSpeed;\n }\n\n &::after {\n z-index: 10;\n }\n }\n\n &--has-link:has(#{&}__heading-link:hover) &__heading-link {\n &::before {\n background-color: $colorSecondary10;\n }\n }\n\n &--has-link:has(#{&}__heading-link:hover) &__tag {\n --color: #{$colorSecondary60};\n }\n\n /* Has tag */\n\n &--has-tag &__heading-wrapper {\n margin-top: space('xxxlarge');\n }\n\n /* Has service */\n\n &--has-service &__heading-wrapper {\n margin-top: space('xxxxlarge');\n }\n\n &--has-service#{&}--has-image-right &__heading-wrapper {\n margin-top: space('xxxlarge');\n }\n\n /* Has image (default) */\n\n &--has-image &__image {\n z-index: 1;\n position: relative;\n }\n\n &--has-image-default &__heading-wrapper {\n margin-top: space('medium');\n }\n\n /* Has image right */\n\n &--has-image-right &__image {\n margin-bottom: space('large');\n padding-right: space('medium');\n }\n\n &--has-image-right &__meta-wrapper {\n margin-right: space('xsmall');\n }\n\n &--has-image-right &__service {\n position: static;\n }\n\n /* Has description wrapper, meta or download */\n\n &--has-description-wrapper &__heading-wrapper,\n &--has-meta &__heading-wrapper,\n &--has-download &__heading-wrapper {\n margin-bottom: 0px;\n }\n\n &--has-meta &__description-wrapper,\n &--has-download &__description-wrapper {\n margin-bottom: 0px;\n }\n\n &--has-meta &__description,\n &--has-download &__description {\n &:not(:empty) {\n margin-bottom: space('small');\n }\n }\n\n &--has-download &__meta {\n margin-bottom: space('xsmall');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Fragment\n} from \"@stencil/core\";\n\nimport {\n StzhCardSuperteaserClickEvent,\n StzhBreadcrumbItem,\n StzhDatalistItemEntry,\n StzhLocaleAdapter\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nimport { StzhCardSuperteaserLocalizedText } from './stzh-card-superteaser.localization';\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot description - Description text (alternative for description property)\n * @slot image - Image\n */\n@Component({\n tag: \"stzh-card-superteaser\",\n styleUrl: \"stzh-card-superteaser.scss\",\n scoped: true\n})\nexport class StzhCardSuperteaser {\n /** Translation strings */\n @Prop() localization: StzhCardSuperteaserLocalizedText;\n\n /** Href of card */\n @Prop({ reflect: true }) href: string;\n\n /** target if the button is used as link (if href used) */\n @Prop() target: string;\n\n /** Download attribute (if href is used) */\n @Prop() download: string;\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link elements.\n * Default value will be taken from `heading` prop/slot.\n */\n @Prop() analyticsId: string;\n\n /** Heading (alternative for heading slot) */\n @Prop() heading: string = \"\";\n\n /** Heading level */\n @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n /** Description text (alternative for description slot) */\n @Prop() description: string = \"\";\n\n /** Tag */\n @Prop() tag: string;\n\n /** Topic */\n @Prop() topic: string;\n\n /** Service */\n @Prop() service: string;\n\n /** Dateline */\n @Prop() dateline: string;\n\n /** Meta */\n @Prop() meta: string[] | string;\n private _meta: string[];\n\n /** Breadcrumb items */\n @Prop() breadcrumbItems: StzhBreadcrumbItem[] | string;\n\n /** Datalist items */\n @Prop() datalistItems: StzhDatalistItemEntry[] | string = [];\n\n /** Event start date */\n @Prop() eventDateStart: Date | string;\n\n /** Event start date */\n @Prop() eventDateEnd: Date | string;\n\n /** Event location */\n @Prop() eventLocation: string;\n\n /** Image position */\n @Prop({ reflect: true }) imagePosition: \"default\" | \"right\" = \"default\";\n\n /** Download heading */\n @Prop() downloadHeading: string;\n\n /** Download meta */\n @Prop() downloadMeta: string[] | string;\n private _downloadMeta: string[];\n\n /**\n * Date adapter, for custom parsing/formatting.\n * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n */\n @Prop() dateAdapter: StzhLocaleAdapter;\n\n @Element() element: HTMLStzhListElement;\n\n /** Click event (if href is used) */\n @Event() stzhClick: EventEmitter<StzhCardSuperteaserClickEvent>;\n\n @Watch(\"meta\")\n metaWatcher(newValue: string | string[]) {\n if (!newValue) {\n this._meta = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._meta = JSON.parse(newValue);\n } catch (e) {\n this._meta = [];\n }\n } else {\n this._meta = newValue;\n }\n }\n\n @Watch(\"downloadMeta\")\n downloadMetaWatcher(newValue: string | string[]) {\n if (!newValue) {\n this._downloadMeta = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._downloadMeta = JSON.parse(newValue);\n } catch (e) {\n this._downloadMeta = [];\n }\n } else {\n this._downloadMeta = newValue;\n }\n }\n\n private headingLinkElement: HTMLAnchorElement | HTMLDivElement;\n private headingTextElement: HTMLDivElement;\n\n private handleCardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-card-superteaser\",\n originalEvent,\n href: this.href\n });\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n if (objectId) {\n this.headingLinkElement?.setAttribute(\"s-object-id\", objectId);\n }\n });\n }\n\n async componentWillLoad() {\n this.metaWatcher(this.meta);\n this.downloadMetaWatcher(this.downloadMeta);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"card-superteaser\");\n }\n\n if (!this.dateAdapter) {\n this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n this.localization.$formats,\n this.localization.$globals\n );\n }\n }\n\n render() {\n const hasHeading = !!this.heading || hasSlot(this.element, 'heading');\n const hasDescription = !!this.description || hasSlot(this.element, 'description');\n const hasImage = hasSlot(this.element, 'image');\n\n const eventDateStart = this.eventDateStart && new Date(this.eventDateStart);\n const eventDateEnd = this.eventDateEnd && new Date(this.eventDateEnd);\n\n const classes = {\n \"stzh-card-superteaser\": true,\n \"stzh-card-superteaser--has-heading\": hasHeading,\n \"stzh-card-superteaser--has-description\": hasDescription,\n \"stzh-card-superteaser--has-description-wrapper\": hasDescription || !!eventDateStart || !!this.eventLocation,\n \"stzh-card-superteaser--has-link\": !!this.href,\n \"stzh-card-superteaser--has-service\": !!this.service,\n \"stzh-card-superteaser--has-tag\": !!this.tag,\n \"stzh-card-superteaser--has-topic\": !!this.topic,\n \"stzh-card-superteaser--has-image\": hasImage,\n \"stzh-card-superteaser--has-image-default\": hasImage && this.imagePosition === \"default\",\n \"stzh-card-superteaser--has-image-right\": hasImage && this.imagePosition === \"right\",\n \"stzh-card-superteaser--has-meta\": this._meta.length > 0,\n \"stzh-card-superteaser--has-download\": !!this.downloadHeading || this._downloadMeta.length > 0,\n \"stzh-card-superteaser--has-breadcrumb\": !!this.breadcrumbItems,\n };\n\n const Heading = `h${this.headingLevel}`;\n const HeadingLink = this.href ? \"a\" : \"div\";\n\n return (\n <Host has-image={hasImage}>\n <article class={classes} aria-label={this.heading} role=\"listitem\">\n {this.tag &&\n <stzh-tag\n class=\"stzh-card-superteaser__tag\"\n label={this.tag}\n nonInteractive={true}\n ></stzh-tag>\n }\n\n <div class=\"stzh-card-superteaser__heading-wrapper\">\n {this.breadcrumbItems &&\n <stzh-breadcrumb\n class=\"stzh-card-superteaser__breadcrumb\"\n items={this.breadcrumbItems}\n variant=\"teaser\"\n ></stzh-breadcrumb>\n }\n\n {this.dateline &&\n <div class=\"stzh-card-superteaser__dateline\">{this.dateline}</div>\n }\n\n {this.topic\n && <div class=\"stzh-card-superteaser__topic\">{this.topic}</div>\n }\n\n <Heading class=\"stzh-card-superteaser__heading\">\n <HeadingLink\n ref={(el) => (this.headingLinkElement = el as HTMLAnchorElement | HTMLDivElement)}\n class=\"stzh-card-superteaser__heading-link\"\n href={this.href}\n target={this.target}\n download={this.download}\n onClick={this.handleCardClick}\n >\n <div\n class=\"stzh-card-superteaser__heading-link-text\"\n ref={(el) => (this.headingTextElement = el as HTMLDivElement)}\n >\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\n </HeadingLink>\n </Heading>\n </div>\n\n <div class=\"stzh-card-superteaser__description-wrapper\">\n {(eventDateStart || this.eventLocation) &&\n <div class=\"stzh-card-superteaser__event-infos\">\n {eventDateStart &&\n <div class=\"stzh-card-superteaser__event-date\">\n <span>{this.dateAdapter.format(eventDateStart, \"dateLong\")}, </span>\n {this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, \"time\")}\n </div>\n }\n {this.eventLocation &&\n <div class=\"stzh-card-superteaser__event-location\">\n {this.eventLocation}\n </div>\n }\n </div>\n }\n\n <div class=\"stzh-card-superteaser__description\">\n {this.description ? this.description : <slot name=\"description\"></slot>}\n </div>\n </div>\n\n <div class=\"stzh-card-superteaser__image\">\n {eventDateStart &&\n <div class=\"stzh-card-superteaser__event-date-teaser\">\n <div class=\"stzh-card-superteaser__event-date-teaser-day-name\">\n {this.localization.$globals.dayNamesShort[eventDateStart.getDay()]}\n </div>\n <div class=\"stzh-card-superteaser__event-date-teaser-day\">\n {eventDateStart.getDate() < 10 && '0'}{eventDateStart.getDate()}\n </div>\n <div class=\"stzh-card-superteaser__event-date-teaser-month\">\n {this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]}\n </div>\n </div>\n }\n {this.service && <div class=\"stzh-card-superteaser__service\">{this.service}</div>}\n <slot name=\"image\"></slot>\n </div>\n\n {(this._meta.length > 0 || this.datalistItems || !!this.downloadHeading || this._downloadMeta.length > 0) &&\n <div class=\"stzh-card-superteaser__meta-wrapper\">\n {this.datalistItems &&\n <stzh-datalist\n class=\"stzh-card-searchresult__datalist\"\n items={this.datalistItems}\n >\n </stzh-datalist>\n }\n\n {this._meta.length > 0 &&\n <div class=\"stzh-card-superteaser__meta\">\n <div class=\"stzh-card-superteaser__meta-list\">\n {this._meta.map((meta) =>\n <Fragment>\n <div class=\"stzh-card-superteaser__meta-list-item\">{meta}</div>\n </Fragment>\n )}\n </div>\n </div>\n }\n\n {(!!this.downloadHeading || this._downloadMeta.length > 0) &&\n <div class=\"stzh-card-superteaser__download\">\n <div class=\"stzh-card-superteaser__download-data\">\n {this.downloadHeading &&\n <div class=\"stzh-card-superteaser__download-heading\">\n {this.downloadHeading}\n </div>\n }\n {this._downloadMeta.length > 0 &&\n <div class=\"stzh-card-superteaser__download-meta-list\">\n {this._downloadMeta.map((meta) =>\n <Fragment>\n <div class=\"stzh-card-superteaser__download-meta-list-item\">{meta}</div>\n </Fragment>\n )}\n </div>\n }\n </div>\n\n <div class=\"stzh-card-superteaser__download-button\">\n <stzh-icon class=\"stzh-card-superteaser__download-icon\" name=\"download\"></stzh-icon>\n </div>\n </div>\n }\n </div>\n }\n </article>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/stzh-card_3.cjs.entry.js CHANGED Viewed

@@ -138,7 +138,8 @@ const StzhCard = class {
     this.handleCardClick = (originalEvent) => {
       this.stzhClick.emit({
         component: "stzh-card",
-        originalEvent
+        originalEvent,
+        href: this.href
       });
     };
     this.localization = undefined;
@@ -356,7 +357,7 @@ const StzhCard = class {
 };
 StzhCard.style = stzhCardCss;
-const stzhCardlistCss = ".sc-stzh-cardlist-h{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}[hidden].sc-stzh-cardlist-h{display:none}.sc-stzh-cardlist-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-cardlist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-cardlist-h *.sc-stzh-cardlist,.sc-stzh-cardlist-h *.sc-stzh-cardlist::before,.sc-stzh-cardlist-h *.sc-stzh-cardlist::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)}.sc-stzh-cardlist-h .has-focus.sc-stzh-cardlist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-cardlist-h .stzh-fylingfocus-focused.sc-stzh-cardlist{outline-style:none !important}.sc-stzh-cardlist-h .stzh-fylingfocus-focused.sc-stzh-cardlist::-moz-focus-inner{border:0 !important}.stzh-cardlist__cards.sc-stzh-cardlist{display:grid;gap:var(--stzh-grid-gutter)}@media screen and (min-width: 600px){.stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-grid-gutter-ultra)}}.stzh-cardlist__header.sc-stzh-cardlist{display:flex;justify-content:space-between;flex-direction:column;align-items:flex-start}@media screen and (min-width: 900px){.stzh-cardlist__header.sc-stzh-cardlist{flex-direction:row}}.stzh-cardlist__description.sc-stzh-cardlist{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);--stzh-icon-color:var(--stzh-color-primary70)}@media screen and (min-width: 900px){.stzh-cardlist__description.sc-stzh-cardlist{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-cardlist__description.sc-stzh-cardlist:not(:empty){margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-cardlist__description.sc-stzh-cardlist:not(:empty){margin-bottom:0}}.stzh-cardlist__switch.sc-stzh-cardlist{--color:inherit;align-self:end}.stzh-cardlist.sc-stzh-cardlist:has(.stzh-cardlist__description:not(:empty)) .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--has-toggle-link.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-cardlist.sc-stzh-cardlist:has(.stzh-cardlist__description:not(:empty)) .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--has-toggle-link.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-cardlist.sc-stzh-cardlist:has(.stzh-cardlist__description:not(:empty)) .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--has-toggle-link.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-cardlist.sc-stzh-cardlist:has(.stzh-cardlist__description:not(:empty)) .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--has-toggle-link.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation:not([has-lead])){row-gap:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation:not([has-lead])){row-gap:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation:not([has-lead])){row-gap:var(--stzh-space-medium)}}@media screen and (min-width: 600px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation:not([has-lead])){padding-left:calc(((100% - (var(--stzh-grid-gutter-small) * 3)) / 4) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation:not([has-lead])){grid-template-columns:repeat(2, minmax(0, 1fr));padding-left:0}}.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]){row-gap:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]){row-gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]){row-gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]){row-gap:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]){grid-template-columns:repeat(2, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]){grid-template-columns:repeat(3, minmax(0, 1fr))}}.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{row-gap:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{row-gap:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{row-gap:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media screen and (min-width: 900px){.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{grid-template-columns:repeat(3, minmax(0, 1fr))}}.stzh-cardlist--layout-searchresults.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-space-xlarge)}.stzh-cardlist--layout-fullwidth.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-cardlist--layout-fullwidth.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-cardlist--layout-fullwidth.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-fullwidth.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-space-xxlarge)}}";
+const stzhCardlistCss = ".sc-stzh-cardlist-h{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}[hidden].sc-stzh-cardlist-h{display:none}.sc-stzh-cardlist-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-cardlist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-cardlist-h *.sc-stzh-cardlist,.sc-stzh-cardlist-h *.sc-stzh-cardlist::before,.sc-stzh-cardlist-h *.sc-stzh-cardlist::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)}.sc-stzh-cardlist-h .has-focus.sc-stzh-cardlist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-cardlist-h .stzh-fylingfocus-focused.sc-stzh-cardlist{outline-style:none !important}.sc-stzh-cardlist-h .stzh-fylingfocus-focused.sc-stzh-cardlist::-moz-focus-inner{border:0 !important}.stzh-cardlist__cards.sc-stzh-cardlist{display:grid;gap:var(--stzh-grid-gutter)}@media screen and (min-width: 600px){.stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-grid-gutter-ultra)}}.stzh-cardlist__header.sc-stzh-cardlist{display:flex;justify-content:space-between;flex-direction:column;align-items:flex-start}@media screen and (min-width: 900px){.stzh-cardlist__header.sc-stzh-cardlist{flex-direction:row}}.stzh-cardlist__description.sc-stzh-cardlist{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);--stzh-icon-color:var(--stzh-color-primary70)}@media screen and (min-width: 900px){.stzh-cardlist__description.sc-stzh-cardlist{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-cardlist__description.sc-stzh-cardlist:not(:empty){margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-cardlist__description.sc-stzh-cardlist:not(:empty){margin-bottom:0}}.stzh-cardlist__switch.sc-stzh-cardlist{--color:inherit;align-self:end}.stzh-cardlist.sc-stzh-cardlist:has(.stzh-cardlist__description:not(:empty)) .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--has-toggle-link.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-cardlist.sc-stzh-cardlist:has(.stzh-cardlist__description:not(:empty)) .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--has-toggle-link.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-cardlist.sc-stzh-cardlist:has(.stzh-cardlist__description:not(:empty)) .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--has-toggle-link.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-cardlist.sc-stzh-cardlist:has(.stzh-cardlist__description:not(:empty)) .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--has-toggle-link.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation:not([has-lead])){row-gap:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation:not([has-lead])){row-gap:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation:not([has-lead])){row-gap:var(--stzh-space-medium)}}@media screen and (min-width: 600px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation:not([has-lead])){padding-left:calc(((100% - (var(--stzh-grid-gutter-small) * 3)) / 4) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation:not([has-lead])){grid-template-columns:repeat(2, minmax(0, 1fr));padding-left:0}}.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]){row-gap:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]){row-gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]){row-gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]){row-gap:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]){grid-template-columns:repeat(2, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]){grid-template-columns:repeat(3, minmax(0, 1fr))}}.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{row-gap:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{row-gap:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{row-gap:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media screen and (min-width: 900px){.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{grid-template-columns:repeat(4, minmax(0, 1fr))}}.stzh-cardlist--layout-searchresults.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-space-xlarge)}.stzh-cardlist--layout-fullwidth.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-cardlist--layout-fullwidth.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-cardlist--layout-fullwidth.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-fullwidth.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-space-xxlarge)}}";
 const StzhCardlist = class {
   constructor(hostRef) {
@@ -442,7 +443,7 @@ const StzhCardlist = class {
 };
 StzhCardlist.style = stzhCardlistCss;
-const stzhChipselectCss = ".sc-stzh-chipselect-h{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}[hidden].sc-stzh-chipselect-h{display:none}.sc-stzh-chipselect-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipselect-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipselect-h *.sc-stzh-chipselect,.sc-stzh-chipselect-h *.sc-stzh-chipselect::before,.sc-stzh-chipselect-h *.sc-stzh-chipselect::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)}.sc-stzh-chipselect-h .has-focus.sc-stzh-chipselect{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect{outline-style:none !important}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect::-moz-focus-inner{border:0 !important}[disabled].sc-stzh-chipselect-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-chipselect__marker-symbol.sc-stzh-chipselect{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-chipselect__marker-text.sc-stzh-chipselect{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-chipselect__description-wrapper.sc-stzh-chipselect{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect__description.sc-stzh-chipselect{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-chipselect__error.sc-stzh-chipselect{color:var(--stzh-color-error60)}.stzh-chipselect__error-list.sc-stzh-chipselect{list-style:none;margin:0;padding:0}.stzh-chipselect__description.sc-stzh-chipselect{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-chipselect__description-long.sc-stzh-chipselect{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-chipselect__description-long.sc-stzh-chipselect{margin-top:0}}.stzh-chipselect__description-long-popover.sc-stzh-chipselect{--width:auto;--max-width:27.3125rem}.stzh-chipselect__description-long-button.sc-stzh-chipselect{display:flex;justify-content:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-chipselect.sc-stzh-chipselect stzh-icon.stzh-chipselect__description-long-icon.sc-stzh-chipselect{--size:var(--stzh-icon-size-xsmall)}.stzh-chipselect--has-error.sc-stzh-chipselect .stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect--has-description.sc-stzh-chipselect .stzh-chipselect__description.sc-stzh-chipselect{margin-top:var(--stzh-space-xxxsmall)}.stzh-chipselect__chips.sc-stzh-chipselect{display:flex;align-items:center;flex-wrap:wrap;margin:calc(var(--stzh-space-small) / -2) calc(var(--stzh-space-xsmall) / -2);border-radius:var(--stzh-button-border-radius)}@media screen and (max-width: 899px){.stzh-chipselect__chips.sc-stzh-chipselect{display:none}}.stzh-chipselect__chip.sc-stzh-chipselect{margin:calc(var(--stzh-space-small) / 2) calc(var(--stzh-space-xsmall) / 2)}.stzh-chipselect__chip.is-focused.sc-stzh-chipselect,.stzh-chipselect__chip.is-focused[active].sc-stzh-chipselect:not([active=false]){--border-color:var(--stzh-color-primary-hover)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-chipselect__chip.is-focused.sc-stzh-chipselect,.stzh-chipselect__chip.is-focused[active].sc-stzh-chipselect:not([active=false]){--border-color:Highlight}}.stzh-chipselect__chip.is-focused[active].sc-stzh-chipselect:not([active=false]){--background-color:var(--stzh-color-primary-hover)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-chipselect__chip.is-focused[active].sc-stzh-chipselect:not([active=false]){--background-color:Canvas}}@media screen and (min-width: 900px){.stzh-chipselect__dropdown.sc-stzh-chipselect{display:none}}@media screen and (max-width: 899px){.stzh-chipselect__description-wrapper.sc-stzh-chipselect{display:none}}.stzh-chipselect--has-error.sc-stzh-chipselect .stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect--has-description.sc-stzh-chipselect .stzh-chipselect__description.sc-stzh-chipselect{margin-top:var(--stzh-space-xsmall)}";
+const stzhChipselectCss = ".sc-stzh-chipselect-h{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}[hidden].sc-stzh-chipselect-h{display:none}.sc-stzh-chipselect-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipselect-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipselect-h *.sc-stzh-chipselect,.sc-stzh-chipselect-h *.sc-stzh-chipselect::before,.sc-stzh-chipselect-h *.sc-stzh-chipselect::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)}.sc-stzh-chipselect-h .has-focus.sc-stzh-chipselect{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect{outline-style:none !important}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect::-moz-focus-inner{border:0 !important}[disabled].sc-stzh-chipselect-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-chipselect__marker-symbol.sc-stzh-chipselect{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-chipselect__marker-text.sc-stzh-chipselect{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-chipselect__description-wrapper.sc-stzh-chipselect{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect__description.sc-stzh-chipselect{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-chipselect__error.sc-stzh-chipselect{color:var(--stzh-color-error60)}.stzh-chipselect__error-list.sc-stzh-chipselect{list-style:none;margin:0;padding:0}.stzh-chipselect__description.sc-stzh-chipselect{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-chipselect__description-long.sc-stzh-chipselect{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-chipselect__description-long.sc-stzh-chipselect{margin-top:0}}.stzh-chipselect__description-long-popover.sc-stzh-chipselect{--width:auto;--max-width:27.3125rem}.stzh-chipselect__description-long-button.sc-stzh-chipselect{display:flex;justify-content:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-chipselect.sc-stzh-chipselect stzh-icon.stzh-chipselect__description-long-icon.sc-stzh-chipselect{--size:var(--stzh-icon-size-xsmall)}.stzh-chipselect--has-error.sc-stzh-chipselect .stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect--has-description.sc-stzh-chipselect .stzh-chipselect__description.sc-stzh-chipselect{margin-top:var(--stzh-space-xxxsmall)}.stzh-chipselect__label.sc-stzh-chipselect{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--stzh-heading-color);display:block;margin-bottom:var(--stzh-space-xsmall)}.stzh-chipselect__label.sc-stzh-chipselect:empty{display:none}.stzh-chipselect__marker.sc-stzh-chipselect{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-chipselect__chips.sc-stzh-chipselect{display:flex;align-items:center;flex-wrap:wrap;border-radius:var(--stzh-button-border-radius);-moz-column-gap:var(--stzh-space-medium);column-gap:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-chipselect__chips.sc-stzh-chipselect{row-gap:var(--stzh-space-medium)}}.stzh-chipselect__chip.is-focused.sc-stzh-chipselect,.stzh-chipselect__chip.is-focused[active].sc-stzh-chipselect:not([active=false]){--background-color:var(--stzh-color-secondary40)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-chipselect__chip.is-focused.sc-stzh-chipselect,.stzh-chipselect__chip.is-focused[active].sc-stzh-chipselect:not([active=false]){--background-color:Highlight}}.stzh-chipselect__chip.is-focused[active].sc-stzh-chipselect:not([active=false]){--background-color:var(--stzh-color-primary90)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-chipselect__chip.is-focused[active].sc-stzh-chipselect:not([active=false]){--background-color:Canvas}}.stzh-chipselect--has-error.sc-stzh-chipselect .stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect--has-description.sc-stzh-chipselect .stzh-chipselect__description.sc-stzh-chipselect{margin-top:var(--stzh-space-xsmall)}.stzh-chipselect--has-label-hidden.sc-stzh-chipselect .stzh-chipselect__label.sc-stzh-chipselect{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-chipselect--is-disabled.sc-stzh-chipselect .stzh-chipselect__chips.sc-stzh-chipselect,.stzh-chipselect--is-disabled.sc-stzh-chipselect .stzh-chipselect__label.sc-stzh-chipselect{cursor:not-allowed}";
 let chipselectCounter = 0;
 const StzhChipselect = class {
@@ -450,7 +451,7 @@ const StzhChipselect = class {
     index.registerInstance(this, hostRef);
     this.stzhChange = index.createEvent(this, "stzhChange", 7);
     this._data = [];
-    this._dataDropdown = [];
+    this._value = [];
     this.handleReset = async () => {
       this.value = this.defaultValue;
       // this.stzhChange.emit({
@@ -459,25 +460,37 @@ const StzhChipselect = class {
       // });
     };
     this.handleChipClick = async (data, index) => {
-      this.value = data.value;
+      if (this.multiple) {
+        if (data.value === "" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === "")) {
+          this.value = [];
+        }
+        else if (data.value !== "") {
+          this.value = this._value.includes(data.value)
+            ? this._value.filter(value => value !== data.value)
+            : [...this._value, data.value];
+        }
+      }
+      else {
+        this.value = [data.value];
+      }
       this.activeFocusOptionIndex = index;
       await this.waitForNextRender();
       this.stzhChange.emit({
         component: "stzh-chipselect",
-        value: this.value
-      });
-    };
-    this.handleDropdownChange = async (event) => {
-      this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;
-      this.activeFocusOptionIndex = this._data.findIndex(data => {
-        return data.value === this.value;
-      });
-      await this.waitForNextRender();
-      this.stzhChange.emit({
-        component: "stzh-chipselect",
-        value: this.value
+        value: this.multiple ? this._value[0] : this._value
       });
     };
+    // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {
+    //   this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;
+    //   this.activeFocusOptionIndex = this._data.findIndex(data => {
+    //     return data.value === this.value;
+    //   });
+    //   await this.waitForNextRender();
+    //   this.stzhChange.emit({
+    //     component: "stzh-chipselect",
+    //     value: this.value
+    //   })
+    // }
     this.handleKeydown = (event) => {
       let newActiveIndex = null;
       const activeOptionIndex = this.activeFocusOptionIndex;
@@ -509,6 +522,8 @@ const StzhChipselect = class {
     this.data = [];
     this.name = undefined;
     this.label = "";
+    this.labelHidden = false;
+    this.multiple = false;
     this.value = "";
     this.defaultValue = "";
     this.description = undefined;
@@ -529,6 +544,19 @@ const StzhChipselect = class {
       });
     }
   }
+  valueWatcher(newValue) {
+    if (typeof newValue === "string") {
+      try {
+        this._value = JSON.parse(newValue);
+      }
+      catch (ex) {
+        this._value = newValue ? [newValue] : [];
+      }
+    }
+    else {
+      this._value = newValue ? newValue : [];
+    }
+  }
   dataWatcher(newValue) {
     if (typeof newValue === "string") {
       this._data = JSON.parse(newValue);
@@ -536,14 +564,14 @@ const StzhChipselect = class {
     else {
       this._data = newValue;
     }
-    this._dataDropdown = this._data.map((data) => {
-      return {
-        text: data.counter
-          ? `${data.label} (${data.counter})`
-          : data.label,
-        value: data.value
-      };
-    });
+    // this._dataDropdown = this._data.map((data) => {
+    //   return {
+    //     text: data.counter
+    //       ? `${data.label} (${data.counter})`
+    //       : data.label,
+    //     value: data.value
+    //   }
+    // });
   }
   errorWatcher(newValue) {
     if (typeof newValue === "string") {
@@ -578,6 +606,7 @@ const StzhChipselect = class {
     this.id = `stzh-chipselect-${chipselectCounter++}`;
     this.dataWatcher(this.data);
     this.errorWatcher(this.error);
+    this.valueWatcher(this.value);
     this.defaultValue = this.defaultValue || this.value;
     if (!this.localization) {
       this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "chipselect");
@@ -594,16 +623,30 @@ const StzhChipselect = class {
       "stzh-chipselect--has-error": errorUsed,
       "stzh-chipselect--is-invalid": this.invalid || errorUsed,
       "stzh-chipselect--is-disabled": this.disabled,
-      "stzh-chipselect--is-required": this.required
+      "stzh-chipselect--is-required": this.required,
+      "stzh-chipselect--has-label-hidden": this.labelHidden,
     };
-    return (index.h(index.Host, { "is-invalid": this.invalid || errorUsed }, index.h("div", { class: classes }, index.h("input", { type: "hidden", name: this.name, value: this.value, defaultValue: this.defaultValue }), this._data.length > 0 &&
-      index.h(index.Fragment, null, index.h("div", { class: "stzh-chipselect__chips", role: "listbox", tabindex: "0", "aria-multiselectable": "false", "aria-activedescendant": `${this.id}-option-${this.activeFocusOptionIndex}`, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, index$1) => (index.h("stzh-chip", { role: "option", class: {
+    return (index.h(index.Host, { "is-invalid": this.invalid || errorUsed }, index.h("div", { class: classes }, this.multiple
+      ?
+        index.h(index.Fragment, null, this._value.map((value) => index.h("input", { type: "hidden", name: this.name, value: value })))
+      :
+        index.h("input", { type: "hidden", name: this.name, value: this.value }), index.h("label", { class: "stzh-chipselect__label", htmlFor: this.id }, this.label ? this.label : index.h("slot", null), !this.hideOptional &&
+      index.h("span", { class: "stzh-chipselect__marker" }, index.h("span", { class: "stzh-chipselect__marker-symbol", "aria-hidden": "true" }, this.required
+        ? this.localization.$globals.requiredFieldMarker
+        : this.localization.$globals.optionalFieldMarker), index.h("span", { class: "stzh-chipselect__marker-text" }, this.required
+        ? this.localization.$globals.requiredFieldText
+        : this.localization.$globals.optionalFieldText))), this._data.length > 0 &&
+      index.h(index.Fragment, null, index.h("div", { id: this.id, class: "stzh-chipselect__chips", role: "listbox", tabindex: "0", "aria-multiselectable": this.multiple ? "true" : "false", "aria-activedescendant": `${this.id}-option-${this.activeFocusOptionIndex}`, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, index$1) => (index.h("stzh-chip", { role: "option", class: {
           "stzh-chipselect__chip": true,
           "is-focused": this.activeFocusOptionIndex === index$1
-        }, label: data.label, counter: data.counter, icon: data.icon, type: data.type, inverted: data.inverted, variant: data.variant, size: data.size, disabled: this.disabled || data.disabled, active: this.value === data.value, "aria-selected": this.value === data.value ? "true" : "false", id: `${this.id}-option-${index$1}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data, index$1) })))), index.h(stzhInputDescription.StzhInputDescription, { classPrefix: "stzh-chipselect", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }), index.h("stzh-dropdown", { class: "stzh-chipselect__dropdown", disabled: this.disabled, error: this._error, description: this.description, descriptionLong: this.descriptionLong, required: this.required, invalid: this.invalid, items: [this.value], label: this.label, options: this._dataDropdown, hideOptional: this.hideOptional, onStzhChange: this.handleDropdownChange })))));
+        }, label: data.label, counter: data.counter, icon: data.icon, type: data.type, inverted: data.inverted, variant: data.variant, size: data.size || "small", disabled: this.disabled || data.disabled, active: this._value.includes(data.value)
+          || (!data.value && this.multiple && (this._value.length === 0 || (this._value.length === 1 && this._value[0] === ""))), "aria-selected": this._value.includes(data.value)
+          || (!data.value && this.multiple && (this._value.length === 0 || (this._value.length === 1 && this._value[0] === "")))
+          ? "true" : "false", id: `${this.id}-option-${index$1}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data, index$1) })))), index.h(stzhInputDescription.StzhInputDescription, { classPrefix: "stzh-chipselect", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
+    "value": ["valueWatcher"],
     "data": ["dataWatcher"],
     "error": ["errorWatcher"]
   }; }