@oiz/stzh-components 4.9.0-beta2 → 4.9.0-beta4

package/dist/components/p-D5ySI7hb.js

@@ -0,0 +1,134 @@
+import { p as proxyCustomElement, t as transformTag, H, d as createEvent, h, e as Host } from './p-BOU3cRYl.js';
+import { d as defineCustomElement$1 } from './p-L0Qas8Vk.js';
+
+const stzhAccordionCss = () => `: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}:host[hidden],:host[stzh-hidden]{display:none}: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{}: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{--stzh-section-padding-top:0px;--stzh-section-padding-bottom:0px;--stzh-section-margin-top:0px;--stzh-section-margin-bottom:0px;--margin-left:inherit;--margin-right:inherit}.stzh-accordion{display:grid;gap:var(--stzh-space-xsmall);margin-left:var(--margin-left);margin-right:var(--margin-left)}.stzh-accordion__heading{margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-accordion__heading{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-accordion__heading{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-accordion__heading{margin-bottom:var(--stzh-space-xlarge)}}.stzh-accordion{}.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-medium) * -1)}@media screen and (min-width: 600px){.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-large) * -1)}}@media screen and (min-width: 900px){.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-xlarge) * -1)}}@media screen and (min-width: 1260px){.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-xxlarge) * -1)}}.stzh-accordion--is-nested{margin-right:calc(var(--stzh-space-medium) * -1)}@media screen and (min-width: 600px){.stzh-accordion--is-nested{margin-right:calc(var(--stzh-space-large) * -1)}}@media screen and (min-width: 900px){.stzh-accordion--is-nested{margin-right:calc(var(--stzh-space-xlarge) * -1)}}@media screen and (min-width: 1260px){.stzh-accordion--is-nested{margin-right:calc(var(--stzh-space-xxlarge) * -1)}}`;
+
+const StzhAccordion = /*@__PURE__*/ proxyCustomElement(class StzhAccordion extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.stzhVariantChange = createEvent(this, "stzhVariantChange");
+        /** Variant */
+        this.variant = "default";
+        /** Heading */
+        this.heading = "";
+        /** Whether folds are collapsible */
+        this.collapsible = true;
+        /** Whether multiple folds can be opened at once */
+        this.multiselectable = true;
+    }
+    variantWatcher(newValue) {
+        this.stzhVariantChange.emit({
+            component: "stzh-accordion",
+            value: newValue,
+        });
+    }
+    openListener(event) {
+        const accordionItemOpened = event.target;
+        const accordionOpened = accordionItemOpened.closest("stzh-accordion");
+        if (this.multiselectable ||
+            (event.detail && event.detail.component !== "stzh-accordion-item") ||
+            accordionOpened !== this.element) {
+            return;
+        }
+        const items = Array.from(accordionOpened.querySelectorAll("stzh-accordion-item"));
+        items.forEach(item => {
+            if (item !== accordionItemOpened) {
+                item.hide();
+            }
+        });
+    }
+    /** Set focus to accordion item */
+    async setItemFocus(accordionItem, action) {
+        const accordion = accordionItem.closest("stzh-accordion");
+        if (accordion !== this.element) {
+            return;
+        }
+        const items = Array.from(accordion.querySelectorAll(":scope > stzh-accordion-item")).filter(item => !item.disabled);
+        const currentIndex = items.indexOf(accordionItem);
+        if ((action === "prev" || action === "next") && currentIndex === null) {
+            action = action === "prev" ? "last" : "first";
+        }
+        if (action === "prev" && currentIndex === 0) {
+            action = "last";
+        }
+        if (action === "next" && currentIndex === items.length - 1) {
+            action = "first";
+        }
+        if (action === "prev") {
+            items[currentIndex - 1].focus();
+        }
+        else if (action === "next") {
+            items[currentIndex + 1].focus();
+        }
+        else if (action === "last") {
+            items[items.length - 1].focus();
+        }
+        else if (action === "first") {
+            items[0].focus();
+        }
+        else {
+            accordionItem.focus();
+        }
+    }
+    checkIfNested() {
+        let parentElement = this.element.parentElement;
+        while (parentElement) {
+            if (parentElement.tagName.toLowerCase() === "stzh-accordion") {
+                this.isNested = true;
+                break;
+            }
+            parentElement = parentElement.parentElement;
+        }
+    }
+    componentDidLoad() {
+        this.checkIfNested();
+    }
+    render() {
+        const classes = {
+            "stzh-accordion": true,
+            "stzh-accordion--is-nested": this.isNested,
+        };
+        return (h(Host, { key: '8ee59c77a0fc46b76aba33ed45fa424e28d31c4f' }, h("div", { key: '1029e5d27fad4849eed289f5591d338c717eaeca', class: classes }, this.heading && (h("div", { key: '7a7552fe02fb4cb59b75a2572e7c347d333b34ef', class: "stzh-accordion__heading" }, h("stzh-heading", { key: '5ec050f0ee8952d59023204f52a1b21c0aaec474', level: "2" }, this.heading))), h("slot", { key: '8a7380e0be24f4df9c1cab64c847b3d8f39f9a86' }))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "variant": ["variantWatcher"]
+    }; }
+    static get style() { return stzhAccordionCss(); }
+}, [257, "stzh-accordion", {
+        "variant": [513],
+        "heading": [513],
+        "collapsible": [4],
+        "multiselectable": [4],
+        "isNested": [32],
+        "setItemFocus": [64]
+    }, [[0, "stzhOpen", "openListener"]], {
+        "variant": ["variantWatcher"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["stzh-accordion", "stzh-heading"];
+    components.forEach(tagName => { switch (tagName) {
+        case "stzh-accordion":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), StzhAccordion);
+            }
+            break;
+        case "stzh-heading":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { StzhAccordion as S, defineCustomElement as d };
+//# sourceMappingURL=p-D5ySI7hb.js.map
+
+//# sourceMappingURL=p-D5ySI7hb.js.map

package/dist/components/p-D5ySI7hb.js.map

@@ -0,0 +1 @@
+{"file":"p-D5ySI7hb.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-accordion/stzh-accordion.scss?tag=stzh-accordion&encapsulation=shadow","src/components/stzh-accordion/stzh-accordion.tsx"],"sourcesContent":[":host {\n  // disable section paddings and margins\n  --stzh-section-padding-top: 0px;\n  --stzh-section-padding-bottom: 0px;\n  --stzh-section-margin-top: 0px;\n  --stzh-section-margin-bottom: 0px;\n\n  --margin-left: inherit;\n  --margin-right: inherit;\n}\n\n.stzh-accordion {\n  display: grid;\n  gap: space(\"xsmall\");\n  margin-left: var(--margin-left);\n  margin-right: var(--margin-left);\n\n  &__heading {\n    @include spaceCurve(\"margin-bottom\", \"small\");\n  }\n\n  /* is nested within another accordion */\n\n  &--is-nested {\n    @include spaceCurve(\"margin-left\", \"regular\", true);\n    @include spaceCurve(\"margin-right\", \"regular\", true);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhAccordionItemOpenEvent, StzhAccordionVariant, StzhAccordionVariantChangeEvent } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-accordion-item` elements\n */\n@Component({\n  tag: \"stzh-accordion\",\n  styleUrl: \"stzh-accordion.scss\",\n  shadow: true,\n})\nexport class StzhAccordion {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhAccordionVariant = \"default\";\n\n  /** Heading */\n  @Prop({ reflect: true }) heading: string = \"\";\n\n  /** Whether folds are collapsible */\n  @Prop() collapsible: boolean = true;\n\n  /** Whether multiple folds can be opened at once */\n  @Prop() multiselectable: boolean = true;\n\n  @Element() element: HTMLStzhAccordionElement;\n\n  /** Variant change event */\n  @Event() stzhVariantChange: EventEmitter<StzhAccordionVariantChangeEvent>;\n\n  @State() isNested: boolean;\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhAccordionVariant) {\n    this.stzhVariantChange.emit({\n      component: \"stzh-accordion\",\n      value: newValue,\n    });\n  }\n\n  @Listen(\"stzhOpen\")\n  openListener(event: CustomEvent<StzhAccordionItemOpenEvent>) {\n    const accordionItemOpened = event.target as HTMLStzhAccordionItemElement;\n    const accordionOpened = accordionItemOpened.closest(\"stzh-accordion\");\n\n    if (\n      this.multiselectable ||\n      (event.detail && event.detail.component !== \"stzh-accordion-item\") ||\n      accordionOpened !== this.element\n    ) {\n      return;\n    }\n\n    const items: HTMLStzhAccordionItemElement[] = Array.from(accordionOpened.querySelectorAll(\"stzh-accordion-item\"));\n    items.forEach(item => {\n      if (item !== accordionItemOpened) {\n        item.hide();\n      }\n    });\n  }\n\n  /** Set focus to accordion item */\n  @Method()\n  async setItemFocus(accordionItem: HTMLStzhAccordionItemElement, action: string) {\n    const accordion = accordionItem.closest(\"stzh-accordion\");\n\n    if (accordion !== this.element) {\n      return;\n    }\n\n    const items = (\n      Array.from(accordion.querySelectorAll(\":scope > stzh-accordion-item\")) as HTMLStzhAccordionItemElement[]\n    ).filter(item => !item.disabled);\n\n    const currentIndex = items.indexOf(accordionItem);\n\n    if ((action === \"prev\" || action === \"next\") && currentIndex === null) {\n      action = action === \"prev\" ? \"last\" : \"first\";\n    }\n\n    if (action === \"prev\" && currentIndex === 0) {\n      action = \"last\";\n    }\n\n    if (action === \"next\" && currentIndex === items.length - 1) {\n      action = \"first\";\n    }\n\n    if (action === \"prev\") {\n      items[currentIndex - 1].focus();\n    } else if (action === \"next\") {\n      items[currentIndex + 1].focus();\n    } else if (action === \"last\") {\n      items[items.length - 1].focus();\n    } else if (action === \"first\") {\n      items[0].focus();\n    } else {\n      accordionItem.focus();\n    }\n  }\n\n  private checkIfNested() {\n    let parentElement = this.element.parentElement;\n\n    while (parentElement) {\n      if (parentElement.tagName.toLowerCase() === \"stzh-accordion\") {\n        this.isNested = true;\n        break;\n      }\n      parentElement = parentElement.parentElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.checkIfNested();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-accordion\": true,\n      \"stzh-accordion--is-nested\": this.isNested,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.heading && (\n            <div class=\"stzh-accordion__heading\">\n              <stzh-heading level=\"2\">{this.heading}</stzh-heading>\n            </div>\n          )}\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-D7CIAwx_.js

@@ -0,0 +1,448 @@
+import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, F as Fragment, e as Host, t as transformTag } from './p-BOU3cRYl.js';
+import { s as setPropsIfNull, h as hasSlot, f as formatHeadingForHyphenation } from './p-CN5apKPb.js';
+import { d as defineCustomElement$9 } from './p-D3osOmCO.js';
+import { d as defineCustomElement$8 } from './p-6ax-mKBx.js';
+import { d as defineCustomElement$7 } from './p-8LohUgRI.js';
+import { d as defineCustomElement$6 } from './p-DkuigYKB.js';
+import { d as defineCustomElement$5 } from './p-Cyr0PTPI.js';
+import { d as defineCustomElement$4 } from './p-D_hdie7I.js';
+import { d as defineCustomElement$3 } from './p-Bk_CuXEU.js';
+import { d as defineCustomElement$2 } from './p-CEPvA7qH.js';
+import { d as defineCustomElement$1 } from './p-Drej3tyF.js';
+
+const stzhCardCss = () => `.sc-stzh-card-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-h,[stzh-hidden].sc-stzh-card-h{display:none}.sc-stzh-card-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-h *.sc-stzh-card,.sc-stzh-card-h *.sc-stzh-card::before,.sc-stzh-card-h *.sc-stzh-card::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-h .has-focus.sc-stzh-card{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-card-h .stzh-fylingfocus-focused.sc-stzh-card{outline-style:none !important}.sc-stzh-card-h .stzh-fylingfocus-focused.sc-stzh-card::-moz-focus-inner{border:0 !important}.sc-stzh-card-h{--border-radius:0px;--content-min-height:7.5rem;--dnd-visibility:hidden;--dnd-opacity:0;display:flex;flex-direction:column;position:relative;border-radius:var(--border-radius)}@media print{.sc-stzh-card-h{page-break-inside:avoid;break-inside:avoid}}[collapsed].sc-stzh-card-h:not([collapsed=false]){--content-min-height:none}[checked].sc-stzh-card-h:not([checked=false]){outline:0.1875rem solid var(--stzh-color-primary)}.is-ghost.sc-stzh-card-h::after,.is-ghost .sc-stzh-card-h::after{border-radius:var(--border-radius)}.is-ghost.sc-stzh-card-h,.is-ghost .sc-stzh-card-h{overflow:hidden}.is-drag.sc-stzh-card-h,.is-chosen.sc-stzh-card-h,.is-ghost.sc-stzh-card-h,.is-selected.sc-stzh-card-h,.is-drag .sc-stzh-card-h,.is-chosen .sc-stzh-card-h,.is-ghost .sc-stzh-card-h,.is-selected .sc-stzh-card-h,[is-sortable].sc-stzh-card-h:hover{--dnd-visibility:visible;--dnd-opacity:1}.sc-stzh-card-h.sc-stzh-card-s>[slot=image],.sc-stzh-card-h .sc-stzh-card-s>[slot=image]{width:100%;max-width:100%}.sc-stzh-card-h.sc-stzh-card-s>img[slot=image],.sc-stzh-card-h .sc-stzh-card-s>img[slot=image]{display:block}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h .sc-stzh-card-s>table{border:0;border-spacing:0}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h.sc-stzh-card-s>table th,.sc-stzh-card-h .sc-stzh-card-s>table th{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h.sc-stzh-card-s>table td,.sc-stzh-card-h .sc-stzh-card-s>table td,.sc-stzh-card-h.sc-stzh-card-s>table th,.sc-stzh-card-h .sc-stzh-card-s>table th{padding:0}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h.sc-stzh-card-s>table td,.sc-stzh-card-h .sc-stzh-card-s>table td{color:var(--stzh-color-black);padding-left:var(--stzh-space-xsmall)}.stzh-card.sc-stzh-card{flex-grow:1;display:flex;flex-direction:column;background-color:var(--stzh-color-grey10);border-radius:var(--border-radius)}.stzh-card--background-grey.sc-stzh-card{background-color:var(--stzh-color-grey10)}.stzh-card--background-white.sc-stzh-card{background-color:var(--stzh-color-white)}.stzh-card--background-grey.sc-stzh-card .stzh-card__card-action-popover.sc-stzh-card{--stzh-popover-background:var(--stzh-color-grey20);--stzh-popover-item-hover-bg:var(--stzh-color-grey30)}.stzh-card__content-wrapper.sc-stzh-card{position:relative;flex-grow:1;display:flex;flex-direction:column;min-height:var(--content-min-height)}.stzh-card__dnd.sc-stzh-card{--size:var(--stzh-icon-size-xsmall);position:absolute;left:0.1875rem;top:1.4375rem;display:flex;visibility:var(--dnd-visibility);opacity:var(--dnd-opacity);transition:all var(--stzh-base-transition-animation-speed);display:none}@media screen and (min-width: 900px){.stzh-card__dnd.sc-stzh-card{display:block}}@media screen and (min-width: 1260px){.stzh-card__dnd.sc-stzh-card{left:0.25rem;top:1.6875rem}}.stzh-card__header-top.sc-stzh-card{display:flex;justify-content:space-between;align-items:flex-start}.stzh-card__header-meta.sc-stzh-card:not(:empty){display:inline-flex;margin-top:var(--stzh-space-xsmall);gap:var(--stzh-space-xsmall)}.stzh-card__header-left.sc-stzh-card,.stzh-card__header-right.sc-stzh-card{display:flex}.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-small)}}.stzh-card__left.sc-stzh-card{align-self:center}.stzh-card__title-area.sc-stzh-card{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;hyphens:auto;overflow:hidden}.stzh-card__title.sc-stzh-card,.stzh-card__subtitle.sc-stzh-card{margin:0}.stzh-card__title-link.sc-stzh-card{color:inherit;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-card__title.sc-stzh-card{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);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)}.stzh-card__image-link.sc-stzh-card{display:block}.stzh-card__subtitle.sc-stzh-card{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);display:flex;align-items:center;flex-wrap:wrap;-webkit-text-decoration-line:none;text-decoration-line:none;margin-left:-0.5625em}.stzh-card__subtitle-text.sc-stzh-card{position:relative;display:inline-flex;padding-left:0.5625em}.stzh-card__subtitle-text.sc-stzh-card::after{content:",";position:absolute;left:0}.stzh-card__content.sc-stzh-card{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);flex-grow:1}.stzh-card__card-actions.sc-stzh-card{display:inline-flex;white-space:nowrap}@media screen and (max-width: 899px){.stzh-card__card-action.sc-stzh-card{--icon-text-margin:0px;--badge-icon-text-margin:0px}}.stzh-card__card-action[variant=tertiary].sc-stzh-card{--color:var(--stzh-base-color)}.stzh-card__card-action.is-button.sc-stzh-card{--icon-size:var(--stzh-icon-size-small)}.stzh-card__card-action.is-placeholder.sc-stzh-card{width:var(--stzh-space-xxlarge);height:var(--stzh-space-xxlarge)}.stzh-card__card-action-popover.sc-stzh-card{--width:auto}.stzh-card--service.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{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)}@media screen and (min-width: 900px){.stzh-card--service.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-card--service.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{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)}@media screen and (min-width: 900px){.stzh-card--service.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-card--service.sc-stzh-card .stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-card--service.sc-stzh-card .stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 900px){.stzh-card--service.sc-stzh-card .stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-card--service.sc-stzh-card .stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-xlarge);padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px) and (min-width: 600px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px) and (min-width: 900px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px) and (min-width: 1260px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding:var(--stzh-space-xxlarge)}}.stzh-card--has-header.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-xlarge);padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-medium)}.stzh-card--has-header.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-xsmall)}.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-xxlarge)}}.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-left:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-left:var(--stzh-space-xxlarge)}}.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-right:var(--stzh-space-xxlarge)}}.stzh-card--has-header.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-header.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-header.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-header.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-xxlarge)}}.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-medium)}.stzh-card--has-footer.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-medium)}.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-left:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-left:var(--stzh-space-xxlarge)}}.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-right:var(--stzh-space-xxlarge)}}.stzh-card--has-footer.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-footer.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-footer.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-card--has-tag.stzh-card--has-header.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-xxxlarge)}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__content.sc-stzh-card{transition:color var(--stzh-base-transition-animation-speed)}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card{color:var(--stzh-color-primary);-webkit-text-decoration-line:none;text-decoration-line:none;border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card::before,.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card::after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-card--has-link.sc-stzh-card .stzh-card__header-meta.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__footer-actionset.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__footer-select-button.sc-stzh-card{position:relative;z-index:2}.stzh-card--has-link.sc-stzh-card:has(.stzh-card__image-link:hover) .stzh-card__title-link.sc-stzh-card,.stzh-card--has-link.sc-stzh-card:has(.stzh-card__image-link:hover) .stzh-card__content.sc-stzh-card,.stzh-card--has-link.sc-stzh-card:has(.stzh-card__title-link:hover) .stzh-card__title-link.sc-stzh-card,.stzh-card--has-link.sc-stzh-card:has(.stzh-card__title-link:hover) .stzh-card__content.sc-stzh-card{color:var(--stzh-color-secondary60)}.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{cursor:pointer;font-family:inherit;padding:0;appearance:none;background:none;border:none;transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-color-primary)}.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card:hover,.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card:focus{color:var(--stzh-color-primary-hover)}.stzh-card--is-collapsible.sc-stzh-card .stzh-card__header.sc-stzh-card{cursor:pointer}.stzh-card--is-collapsed.sc-stzh-card .hide-when-collapsed.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__header.sc-stzh-card .hide-when-collapsed.sc-stzh-card{display:none}.stzh-card--is-collapsed.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}.stzh-card--is-collapsed.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--is-collapsed.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--is-collapsed.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--is-collapsed.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-card--is-collapsed.sc-stzh-card .stzh-card__card-action.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__card-action.sc-stzh-card{--icon-text-margin:0px;--badge-icon-text-margin:0px}.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card{color:var(--stzh-color-primary)}.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card:hover,.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card:focus{color:var(--stzh-color-primary-hover)}.stzh-card--hyphens.sc-stzh-card .stzh-card__heading.sc-stzh-card,.stzh-card--hyphens.sc-stzh-card .stzh-card__title.sc-stzh-card{hyphens:auto}.stzh-card__header.sc-stzh-card{position:relative}.stzh-card__badge.sc-stzh-card{position:absolute;left:-0.3125rem;top:-0.3125rem;z-index:1}`;
+
+const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.stzhClick = createEvent(this, "stzhClick");
+        this.stzhCollapse = createEvent(this, "stzhCollapse");
+        this.stzhSubtitleClick = createEvent(this, "stzhSubtitleClick");
+        this.stzhStarClick = createEvent(this, "stzhStarClick");
+        this.stzhHeaderActionClick = createEvent(this, "stzhHeaderActionClick");
+        /** Whether background should be grey (default) or white */
+        this.backgroundColor = "grey";
+        /** Variant */
+        this.variant = "default";
+        /** Whether card is collapsed or not */
+        this.collapsed = false;
+        /** Whether card was starred */
+        this.starred = false;
+        /**
+         * Whether card star is displayed (with tooltip and menu-item in mobile popover).
+         * The tooltip / menu-item text can be adjusted in the translations file (`actionAdd` & `actionRemove`).
+         */
+        this.starrable = false;
+        /** Whether card is selectable */
+        this.selectable = false;
+        /** Whether card is checked (if card is selectable) */
+        this.checked = false;
+        /** The name of the input element (if card is selectable) */
+        this.name = "";
+        /** The value of the input element (if card is selectable) */
+        this.value = "";
+        /** Whether the element is disabled or not (if card is selectable) */
+        this.disabled = false;
+        /** Automatic Hyphens */
+        this.hyphensEnabled = false;
+        /** Heading (or use heading slot instead) */
+        this.heading = "";
+        /** Heading level */
+        this.headingLevel = "3";
+        /** Subtitle */
+        this.subtitle = "";
+        this._subtitles = [];
+        /** Card header actions */
+        this.headerActions = [];
+        /**
+         * Card footer actions.
+         * The [`stzh-actionset`](?path=/story/components-actionset) component is used internally.
+         * You can listen to clicks with the `stzhActionClick` event.
+         */
+        this.footerActions = [];
+        /** Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click */
+        this.subtitleInteractive = false;
+        /**
+         * Whether sorting should be disabled.
+         * Has no effect if card is not inside a `cardlist` element, which has `sortableEnabled` property set to true.
+         */
+        this.sortableDisabled = false;
+        /** Whether card is collapsible (only effective if href is not set) */
+        this.collapsible = false;
+        /**
+         * Whether movement menu items should be shown.
+         * Has no effect if card is not inside a `cardlist` element, which has `sortableEnabled` property set to true.
+         */
+        this.hideMovementActions = false;
+        /** Badge */
+        this.badge = "";
+        /** Whether badge should be displayed empty */
+        this.badgeEmpty = false;
+        /** Badge type */
+        this.badgeType = "default";
+        this.nodeChange = entries => {
+            let changeInSlot = false;
+            entries.forEach(entry => {
+                if (entry.target.closest("[slot]") || entry.target.hasAttribute("slot")) {
+                    changeInSlot = true;
+                }
+            });
+            if (changeInSlot) {
+                forceUpdate(this.element);
+            }
+        };
+        this.headerClick = (event) => {
+            if (!this.collapsible) {
+                return;
+            }
+            const filterTags = [
+                "stzh-popover",
+                "stzh-tooltip",
+                "button",
+                "stzh-badge",
+                "a",
+                "input",
+                "select",
+                "textarea",
+                "iframe",
+                "details",
+                "label",
+                "area",
+            ];
+            const composedPathTags = event.composedPath().map(element => { var _a; return (_a = element.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase(); });
+            const found = composedPathTags.some(r => filterTags.includes(r));
+            if (!found) {
+                this.collapsed = !this.collapsed;
+                this.stzhCollapse.emit({
+                    component: "stzh-card",
+                    collapsed: this.collapsed,
+                });
+            }
+        };
+        this.subtitleClick = (event) => {
+            if (this.subtitleInteractive) {
+                this.stzhSubtitleClick.emit({
+                    component: "stzh-card",
+                    originalEvent: event,
+                });
+            }
+        };
+        this.starToggleClick = (event) => {
+            this.starred = !this.starred;
+            this.stzhStarClick.emit({
+                component: "stzh-card",
+                starred: this.starred,
+                originalEvent: event,
+            });
+        };
+        this.actionClick = (event, action) => {
+            this.stzhHeaderActionClick.emit({
+                component: "stzh-card",
+                action,
+                originalEvent: event,
+            });
+        };
+        this.arrowUpClick = () => {
+            const sortable = this.element.closest("stzh-sortable");
+            if (sortable) {
+                const element = this.findSortableChildElement();
+                sortable.moveItem(element, "up");
+            }
+        };
+        this.arrowDownClick = () => {
+            const sortable = this.element.closest("stzh-sortable");
+            if (sortable) {
+                const element = this.findSortableChildElement();
+                sortable.moveItem(element, "down");
+            }
+        };
+        this.updateElementInsideSortable = () => {
+            const currentSortable = this.element.closest("stzh-sortable");
+            // check if element is still inside sortable
+            if (!currentSortable) {
+                this.sortable.removeEventListener("stzhUpdate", this.updateElementInsideSortable);
+                this.sortable.removeEventListener("stzhDisable", this.updateElementInsideSortable);
+                return;
+            }
+            if (this.element) {
+                forceUpdate(this.element);
+            }
+        };
+        this.init = () => {
+            const chips = this.element.querySelectorAll('stzh-chip[slot="meta"], [slot="meta"] stzh-chip');
+            const texts = this.element.querySelectorAll('stzh-text[slot="content"], [slot="meta"] stzh-text');
+            chips.forEach(chip => {
+                setPropsIfNull(chip, {
+                    size: "small",
+                });
+            });
+            texts.forEach(text => {
+                setPropsIfNull(text, {
+                    size: "inherit",
+                });
+            });
+        };
+        this.handleMutation = entries => {
+            this.init();
+            this.nodeChange(entries);
+        };
+        this.handleSelectionChange = (event) => {
+            this.checked = event.detail.checked;
+        };
+        this.handleCardClick = (originalEvent) => {
+            this.stzhClick.emit(Object.assign({ component: "stzh-card", originalEvent }, (this.href ? { href: this.href } : {})));
+        };
+    }
+    subtitleWatcher(newValue) {
+        if (typeof newValue === "string") {
+            if (newValue === "") {
+                this._subtitles = [];
+            }
+            else {
+                try {
+                    this._subtitles = JSON.parse(newValue);
+                }
+                catch (err) {
+                    this._subtitles = [newValue];
+                }
+            }
+        }
+        else {
+            this._subtitles = newValue;
+        }
+    }
+    headerActionsWatcher(newValue) {
+        if (typeof newValue === "string") {
+            this._headerActions = JSON.parse(newValue);
+        }
+        else {
+            this._headerActions = newValue;
+        }
+    }
+    footerActionsWatcher(newValue) {
+        if (typeof newValue === "string") {
+            this._footerActions = JSON.parse(newValue);
+        }
+        else {
+            this._footerActions = newValue;
+        }
+    }
+    findSortableChildElement() {
+        const sortable = this.element.closest("stzh-sortable");
+        if (sortable) {
+            let element = this.element;
+            let sortableContainer = null;
+            if (typeof sortable.container === "function") {
+                sortableContainer = sortable.container();
+            }
+            else {
+                sortableContainer = sortable.container;
+            }
+            while (element.parentElement && element.parentElement !== sortableContainer) {
+                element = element.parentElement;
+            }
+            return element;
+        }
+    }
+    async componentWillLoad() {
+        this.subtitleWatcher(this.subtitle);
+        this.headerActionsWatcher(this.headerActions);
+        this.footerActionsWatcher(this.footerActions);
+        if (!this.localization) {
+            this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "card");
+        }
+    }
+    componentDidLoad() {
+        this.sortable = this.element.closest("stzh-sortable");
+        if (this.sortable) {
+            this.sortable.addEventListener("stzhUpdate", this.updateElementInsideSortable);
+            this.sortable.addEventListener("stzhDisable", this.updateElementInsideSortable);
+        }
+    }
+    componentDidRender() {
+        requestAnimationFrame(() => {
+            var _a, _b, _c;
+            const objectId = this.analyticsId || ((_a = this.headingTextElement) === null || _a === void 0 ? void 0 : _a.innerText);
+            if (objectId) {
+                (_b = this.imageLinkElement) === null || _b === void 0 ? void 0 : _b.setAttribute("s-object-id", objectId);
+                (_c = this.titleLinkElement) === null || _c === void 0 ? void 0 : _c.setAttribute("s-object-id", objectId);
+            }
+        });
+    }
+    connectedCallback() {
+        this.init();
+        this.observer = new MutationObserver(this.handleMutation);
+        this.observer.observe(this.element, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const imageUsed = hasSlot(this.element, "image");
+        const headingUsed = hasSlot(this.element, "heading");
+        const footerUsed = hasSlot(this.element, "footer");
+        const contentUsed = hasSlot(this.element, "content");
+        const Heading = `h${this.headingLevel}`;
+        const Subtitle = `${this.subtitleInteractive ? "button" : "span"}`;
+        const sortableChildElement = this.findSortableChildElement();
+        const isFirstItemInSortable = (sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement) &&
+            Array.from((_a = sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement) === null || _a === void 0 ? void 0 : _a.children).indexOf(sortableChildElement) === 0;
+        const isLastItemInSortable = (sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement) &&
+            Array.from((_b = sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement) === null || _b === void 0 ? void 0 : _b.children).indexOf(sortableChildElement) ===
+                ((_c = sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement) === null || _c === void 0 ? void 0 : _c.children.length) - 1;
+        const sortableEnabled = !this.sortableDisabled && this.sortable && !this.sortable.disabled;
+        const sortableActionsEnabled = sortableEnabled && !this.hideMovementActions;
+        const hasHeading = !!this.heading || headingUsed;
+        const hasHeader = hasHeading ||
+            this._subtitles.length > 0 ||
+            this._headerActions.length > 0 ||
+            this.starrable ||
+            sortableActionsEnabled ||
+            !!this.badge ||
+            this.badgeEmpty;
+        const hasFooter = footerUsed || this._footerActions.length > 0 || this.selectable;
+        const headerActionsWithBadge = this._headerActions.filter(action => !!action.badge || action.badgeEmpty);
+        const uniqueId = `--is-described-${Math.random().toString(36).slice(2, 9)}`;
+        const descriptionId = `stzh-card${uniqueId}`;
+        const classes = {
+            "stzh-card": true,
+            "stzh-card--background-grey": this.backgroundColor === "grey",
+            "stzh-card--background-white": this.backgroundColor === "white",
+            "stzh-card--has-link": !!this.href,
+            "stzh-card--has-image": imageUsed,
+            "stzh-card--has-content": contentUsed,
+            "stzh-card--has-subtitle": !!this.subtitle,
+            "stzh-card--has-subtitle-interactive": !!this.subtitle && this.subtitleInteractive,
+            "stzh-card--has-header": hasHeader,
+            "stzh-card--has-footer": hasFooter,
+            "stzh-card--is-collapsible": this.collapsible,
+            "stzh-card--is-collapsed": this.collapsed,
+            "stzh-card--is-starred": this.starred,
+            "stzh-card--is-checked": this.checked,
+            "stzh-card--is-sortable": sortableEnabled,
+            [`stzh-card--${this.variant}`]: !!this.variant,
+            "stzh-card--hyphens": this.hyphensEnabled,
+        };
+        return (h(Host, { key: 'f4111bcb50ecd2494e823f5371bf3fe6587de2ff', role: "listitem", "aria-label": this.heading, "is-sortable": sortableEnabled }, h("article", { key: '38b07f317d7a1ee6498af9b503b1ab057fb24ceb',
+            // ref={(el) => (this.mainElement = el as HTMLElement)}
+            class: classes, onClick: !this.href ? this.handleCardClick : null }, h("a", { key: '613897f0a28facc8a748775c0950bb7cde72826e', ref: el => (this.imageLinkElement = el), "aria-hidden": "true", tabindex: "-1", class: "stzh-card__image-link", href: (_d = this.href) !== null && _d !== void 0 ? _d : null, target: this.target, onClick: this.href ? this.handleCardClick : null }, h("slot", { key: '0b958e36b4fc69a7e091473b3312a511c3eeba74', name: "image" })), h("div", { key: 'c0f0f67fd6b119c001ec90b1917be28e7975b01c', class: "stzh-card__content-wrapper" }, h("stzh-icon", { key: 'cec232ef8d595e10f1d3d9c80fc3866df5777862', class: "stzh-card__dnd", name: "drag" }), h("header", { key: '6fa4a9e7ff577241c04e8c88c863704ec5293fcb', class: "stzh-card__header", onClick: this.headerClick }, (this.badge || this.badgeEmpty) && (h("stzh-badge", { key: '86890f227a4199cf1809ee7f8f83a0f1ceb2b540', class: "stzh-card__badge", label: this.badge, type: this.badgeType })), h("div", { key: '291b3e2e9d9e82af429b0f2a2cdd8e972b8feff3', class: "stzh-card__header-top" }, h("div", { key: '8eaef875634f08550c751dcd5f7d889a234255b9', class: "stzh-card__header-left" }, h("div", { key: 'b8252122e4137ea33291a3491a138e88f1e081ed', class: "stzh-card__title-area" }, hasHeading && (h(Heading, { key: 'ae5d6505d1a7da3800543cfb5523ec174aed6552', class: "stzh-card__title" }, h("a", { key: 'cc268aa3ca1953ce8a4e5eab10f8dfd1127f5a57', ref: el => (this.titleLinkElement = el), class: "stzh-card__title-link", href: (_e = this.href) !== null && _e !== void 0 ? _e : null, target: this.target, onClick: this.href ? this.handleCardClick : null, "aria-describedby": descriptionId }, h("div", { key: '0d200d1d30563f4794e2ed02ab9de6c4379447fa', ref: el => (this.headingTextElement = el) }, this.heading ? formatHeadingForHyphenation(this.heading) : h("slot", { name: "heading" }))))), h("span", { key: '666de592a17b7ac70bfd16ffc4ef1a25ae08b802', id: descriptionId, hidden: true }, (_f = this.localization) === null || _f === void 0 ? void 0 : _f.clickTitle), this._subtitles.length > 0 && (h(Subtitle, { key: '9c6d12b85a21c58cd793285eeb161949427571d6', class: "stzh-card__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-card__subtitle-text" }, subtitle))))))), h("div", { key: '080c31a59d5848c49d0d01d6bafb1db1a7e45158', class: "stzh-card__header-right" }, h("div", { key: '4324cf9c5960bf76ac00c99eb11e6cfac37d5690', class: "stzh-card__card-actions", onClick: e => e.stopPropagation() }, this.starrable && (h("stzh-tooltip", { key: 'bc0ec2198817963cd8b2d86b13f263e8f3218ad8' }, h("stzh-button", { key: 'd31daccce32d73fe5c06b895a6553e0b0a0a9fbc', class: "stzh-card__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { key: '05daf3dbdc58314c22399db3a03fa644b9ce220d', slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd))), (this._headerActions.length > 0 || this.starrable || sortableActionsEnabled) && (h("stzh-popover", { key: '3baa9eb833308bd60e63ee23ba52c63cbecd76d5', label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: {
+                "stzh-card__card-action-popover": true,
+                // "hide-medium show-when-collapsed": !this.starrable && !sortableActionsEnabled
+            } }, h("stzh-button", { key: 'ef73e96df56217cfe87fac10c49c8e14ef1645dc', class: "stzh-card__card-action is-further", variant: "tertiary", size: "tiny", icon: "more-vertical", iconOnly: true, badge: this.headerActionsBadge, badgeEmpty: headerActionsWithBadge.length > 0, badgePosition: "icon", badgeType: this.headerActionsBadgeType || ((_g = headerActionsWithBadge[0]) === null || _g === void 0 ? void 0 : _g.badgeType) || "default" }), h("stzh-menu", { key: '4e9f4844519f8ee173d8d68865e746ea8c476baa', slot: "content" }, this._headerActions.map(action => (h("stzh-menu-item", { icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: (e) => {
+                this.actionClick(e, action);
+            } }, action.label))), sortableActionsEnabled && (h(Fragment, { key: '9ca7addadf66fb794c84e80c26279b41c8849fd8' }, !isFirstItemInSortable && (h("stzh-menu-item", { key: '0590e99486ae76b973d4d5fe774399c0266b4089', icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp)), !isLastItemInSortable && (h("stzh-menu-item", { key: '9a63af7beccd748d16c57c825472d186cd965eb3', icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown)))), this.starrable && (h("stzh-menu-item", { key: '20c9341ba1b9ea06738e20f0797acd6e07ca3044', icon: this.starred ? "star-filled" : "star", onClick: this.starToggleClick }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)))))))), h("div", { key: '94369359aa8b310fc694b664eafd13f11bbdc298', class: "stzh-card__header-meta" }, h("slot", { key: '34b4394ee7a37e0909586fdf993ee0c6c6f0fd92', name: "meta" }))), h("div", { key: '181268a1df695e567b9212d406b8c545f3255b5d', class: "stzh-card__content hide-when-collapsed" }, h("slot", { key: 'b6e16b59f87414bcc2d642ef789c29eb7fecc2f1', name: "content" })), h("div", { key: 'ae98ac5996beb7d0b9c42ce30baeedb201ff02e8', class: "stzh-card__footer hide-when-collapsed" }, h("slot", { key: 'cc029d773e426c3d6d69231a957337aa3335fcf4', name: "footer" }, this._footerActions.length > 0 && (h("stzh-actionset", { key: 'c338125947edb1e8e8a7dcd08582432505f90918', class: "stzh-card__footer-actionset", actions: this._footerActions })), this.selectable && (h("stzh-button", { key: 'f2082270a7b9378c9e2c5faf00ca55308634f672', class: "stzh-card__footer-select-button", fullwidth: true, type: "radio", variant: "secondary", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, label: this.localization.select, onStzhChange: this.handleSelectionChange }))))))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "subtitle": ["subtitleWatcher"],
+        "headerActions": ["headerActionsWatcher"],
+        "footerActions": ["footerActionsWatcher"]
+    }; }
+    static get style() { return stzhCardCss(); }
+}, [262, "stzh-card", {
+        "localization": [16],
+        "backgroundColor": [513, "background-color"],
+        "variant": [513],
+        "collapsed": [1540],
+        "starred": [1540],
+        "starrable": [516],
+        "selectable": [516],
+        "checked": [516],
+        "name": [513],
+        "href": [513],
+        "target": [1],
+        "value": [1025],
+        "disabled": [516],
+        "hyphensEnabled": [516, "hyphens-enabled"],
+        "heading": [1],
+        "headingLevel": [513, "heading-level"],
+        "subtitle": [1],
+        "headerActions": [1, "header-actions"],
+        "headerActionsBadge": [1, "header-actions-badge"],
+        "headerActionsBadgeType": [1, "header-actions-badge-type"],
+        "footerActions": [1, "footer-actions"],
+        "subtitleInteractive": [4, "subtitle-interactive"],
+        "sortableDisabled": [516, "sortable-disabled"],
+        "collapsible": [516],
+        "hideMovementActions": [4, "hide-movement-actions"],
+        "analyticsId": [1, "analytics-id"],
+        "badge": [1],
+        "badgeEmpty": [516, "badge-empty"],
+        "badgeType": [513, "badge-type"]
+    }, undefined, {
+        "subtitle": ["subtitleWatcher"],
+        "headerActions": ["headerActionsWatcher"],
+        "footerActions": ["footerActionsWatcher"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["stzh-card", "stzh-actionset", "stzh-badge", "stzh-button", "stzh-icon", "stzh-menu", "stzh-menu-item", "stzh-popover", "stzh-text", "stzh-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "stzh-card":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), StzhCard);
+            }
+            break;
+        case "stzh-actionset":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$9();
+            }
+            break;
+        case "stzh-badge":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$8();
+            }
+            break;
+        case "stzh-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$7();
+            }
+            break;
+        case "stzh-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "stzh-menu":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "stzh-menu-item":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "stzh-popover":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "stzh-text":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "stzh-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { StzhCard as S, defineCustomElement as d };
+//# sourceMappingURL=p-D7CIAwx_.js.map
+
+//# sourceMappingURL=p-D7CIAwx_.js.map