npm - @oiz/stzh-components - Versions diffs - 1.5.0-alpha → 2.0.0-beta - Mend

@oiz/stzh-components 1.5.0-alpha → 2.0.0-beta

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 (431) hide show

package/dist/esm/stzh-actionset.entry.js ADDED Viewed

@@ -0,0 +1,160 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84f71a43.js';
+import { f as fetchTranslations } from './translation-utils-2623783f.js';
+import { m as media } from './media-utils-9b041ceb.js';
+const stzhActionsetCss = ".sc-stzh-actionset-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-actionset-h{display:none}.sc-stzh-actionset-h *.sc-stzh-actionset,.sc-stzh-actionset-h *.sc-stzh-actionset::before,.sc-stzh-actionset-h *.sc-stzh-actionset::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-actionset__actions.sc-stzh-actionset{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.stzh-actionset__actions-wrapper.sc-stzh-actionset{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;overflow:hidden}.stzh-actionset__action.sc-stzh-actionset:not(:last-child){margin-right:var(--stzh-space-xsmall)}.stzh-actionset__action-popover.sc-stzh-actionset{opacity:0}.stzh-actionset--has-collapsed-items.sc-stzh-actionset .stzh-actionset__action-popover.sc-stzh-actionset{--width:auto;opacity:1}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__actions.sc-stzh-actionset{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__actions-wrapper.sc-stzh-actionset{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action.sc-stzh-actionset:not(:last-child){margin-bottom:var(--stzh-space-xsmall);margin-right:0}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action-popover.sc-stzh-actionset{margin-top:var(--stzh-space-xsmall)}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset:not(.stzh-actionset--has-collapsed-items) .stzh-actionset__action-popover.sc-stzh-actionset{display:none}}";
+const StzhActionset = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.stzhActionClick = createEvent(this, "stzhActionClick", 7);
+    /** Variant determining what position the action buttons are */
+    this.variant = "stack";
+    /** Popover button variant */
+    this.popoverButtonVariant = "";
+    /** Popover button size */
+    this.popoverButtonSize = "";
+    /** Popover placement */
+    this.popoverPlacement = "bottom-end";
+    /** Card header actions */
+    this.actions = [];
+    this._actions = [];
+    this.actionsCollapsed = [];
+    this.actionClick = (action) => {
+      this.stzhActionClick.emit({
+        component: "stzh-actionset",
+        action
+      });
+    };
+    this.update = () => {
+      this.isSmall = media("small").matches;
+      this.isMedium = media("medium").matches;
+      if (!this.actionsElement) {
+        return;
+      }
+      Object.assign(this.actionsElement.style, {
+        width: null,
+        height: null
+      });
+      let newActionsVisible = 0;
+      if (this.variant === "overflow" && this.isMedium
+        || this.variant === "stack" && this.isSmall) {
+        this.dynamicActions = true;
+        let newActionsHeight = 0;
+        let newActionsWidth = 0;
+        // update height and width
+        Array.from(this.actionsElement.children).forEach((child) => {
+          // check which item is visible and
+          if (child.offsetTop === 0) {
+            newActionsVisible++;
+            const style = getComputedStyle(child);
+            const marginLeft = parseInt(style.marginLeft);
+            const marginRight = parseInt(style.marginRight);
+            const marginTop = parseInt(style.marginTop);
+            const marginBottom = parseInt(style.marginBottom);
+            const childWidth = child.offsetWidth + marginLeft + marginRight;
+            const childHeight = child.offsetHeight + marginTop + marginBottom;
+            if (newActionsHeight < childHeight) {
+              newActionsHeight = childHeight;
+            }
+            newActionsWidth = newActionsWidth + childWidth;
+          }
+        });
+        Object.assign(this.actionsElement.style, {
+          width: `${newActionsWidth + 1}px`,
+          height: `${newActionsHeight}px`
+        });
+      }
+      else {
+        this.dynamicActions = false;
+        if (this.variant === "overflow") {
+          newActionsVisible = 0;
+        }
+        else if (this.variant === "stack") {
+          newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;
+        }
+      }
+      this.actionsCollapsed = this._actions.slice(newActionsVisible);
+    };
+  }
+  actionsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._actions = JSON.parse(newValue);
+    }
+    else {
+      this._actions = newValue;
+    }
+  }
+  // handleLoad(e) {
+  //   console.log(e);
+  //   requestAnimationFrame(() => {
+  //   requestAnimationFrame(() => {
+  //     this.update();
+  //   });
+  //   });
+  // }
+  handleResize() {
+    if (this.debounceResize) {
+      window.cancelAnimationFrame(this.debounceResize);
+    }
+    this.debounceResize = requestAnimationFrame(this.update);
+  }
+  async componentWillLoad() {
+    this.actionsWatcher(this.actions);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "actionset");
+    }
+  }
+  componentDidLoad() {
+    this.update();
+  }
+  render() {
+    const classes = {
+      "stzh-actionset": true,
+      // "stzh-actionset--has-dynamic-actions": this.dynamicActions,
+      "stzh-actionset--has-collapsed-items": this.actionsCollapsed.length > 0,
+      [`stzh-actionset--${this.variant}`]: !!this.variant
+    };
+    const Action = (action) => (h("stzh-button", { class: {
+        "stzh-actionset__action": true,
+        "is-button": true,
+        // "show-medium": !action.onlyCollapseText,
+        // "hide-when-collapsed": !action.onlyCollapseText,
+        // "hide-text-when-collapsed": action.onlyCollapseText
+      }, role: "listitem", icon: action.icon, iconPosition: action.iconPosition, iconOnly: action.iconOnly, badge: action.badge, variant: action.variant
+        ? action.variant
+        : (this.variant === "stack" ? "secondary" : "tertiary"), size: action.size
+        ? action.size
+        : (this.variant === "stack" ? "default" : "tiny"), badgePosition: "icon", onClick: () => { this.actionClick(action); } }, h("span", { class: {
+      // "show-medium": action.onlyCollapseText,
+      // "hide-when-collapsed": action.onlyCollapseText
+      } }, action.label)));
+    return (h(Host, { "has-collapsed-items": this.actionsCollapsed.length > 0 }, h("div", { class: classes }, h("div", { class: "stzh-actionset__actions", role: "list" }, h("div", { ref: (el) => (this.actionsElement = el), class: "stzh-actionset__actions-wrapper" }, this._actions.map(action => ((this.dynamicActions
+      || (!this.dynamicActions &&
+        this.actionsCollapsed.indexOf(action) === -1))
+      &&
+        (action.tooltipContent
+          ?
+            h("stzh-tooltip", { strategy: "fixed", content: action.tooltipContent }, Action(action))
+          :
+            Action(action))))), h("stzh-popover", { label: this.variant === "stack"
+        ? this.localization.furtherActions
+        : (!this.isMedium ? this.localization.actions : ""), strategy: "fixed", placement: this.popoverPlacement, class: "stzh-actionset__action-popover" }, h("stzh-button", { fullwidth: true, disabled: this.actionsCollapsed.length === 0, class: "stzh-actionset__action is-further", variant: this.popoverButtonVariant !== ""
+        ? this.popoverButtonVariant
+        : (this.variant === "stack" ? "secondary" : "tertiary"), size: this.popoverButtonSize !== ""
+        ? this.popoverButtonSize
+        : (this.variant === "stack" ? "default" : "tiny"), icon: this.variant === "stack" ? "angle-down" : "more-vertical", iconOnly: this.variant === "overflow" && this.isMedium, iconPosition: "right", label: this.variant === "stack"
+        ? this.localization.furtherActions
+        : (!this.isMedium ? this.localization.actions : "") }), h("stzh-menu", { slot: "content" }, this.actionsCollapsed.map(action => (h("stzh-menu-item", {
+      // class="hide-medium show-when-collapsed"
+      icon: action.icon, badge: action.badge, onClick: () => { this.actionClick(action); }
+    }, action.label)))))))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "actions": ["actionsWatcher"]
+  }; }
+};
+StzhActionset.style = stzhActionsetCss;
+export { StzhActionset as stzh_actionset };

package/dist/esm/stzh-appnav.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-0e6d34c6.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-84f71a43.js';
 import { s as setPropsIfNull } from './utils-68a28fce.js';
 const stzhAppnavCss = ".sc-stzh-appnav-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-appnav-h{display:none}.sc-stzh-appnav-h *.sc-stzh-appnav,.sc-stzh-appnav-h *.sc-stzh-appnav::before,.sc-stzh-appnav-h *.sc-stzh-appnav::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-appnav-h{width:100%}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link{--text-decoration:none;--hover-text-decoration:none;letter-spacing:0.01em}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__inner{-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__inner{-ms-flex-direction:row;flex-direction:row}}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--has-icon .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:0}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--has-icon .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:var(--stzh-space-xsmall)}}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:0}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:var(--stzh-space-small)}}@media screen and (max-width: 599px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__icon-wrapper{height:auto}}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>*:not(:last-child){margin-right:var(--stzh-space-xlarge)}}.stzh-appnav.sc-stzh-appnav{display:-ms-flexbox;display:flex;background-color:var(--stzh-color-white);height:4rem;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:center}@media screen and (min-width: 600px){.stzh-appnav.sc-stzh-appnav{height:3rem;text-align:left}}.stzh-appnav__items.sc-stzh-appnav{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 600px){.stzh-appnav__items.sc-stzh-appnav{-ms-flex-positive:0;flex-grow:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}}.stzh-appnav__title.sc-stzh-appnav{font-family:var(--stzh-font-family-light);font-weight:var(--stzh-font-weight-light);font-style:normal;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);color:var(--stzh-base-color);text-decoration:none;white-space:nowrap;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);display:none}@media screen and (min-width: 800px){.stzh-appnav__title.sc-stzh-appnav{display:-ms-flexbox;display:flex}}.stzh-appnav__title.sc-stzh-appnav:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-appnav__title.sc-stzh-appnav:hover .stzh-appnav__status.sc-stzh-appnav{border-color:rgba(7, 2, 80, 0.4)}.stzh-appnav__status.sc-stzh-appnav{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:0.875rem;min-width:0.625rem;font-size:0.625rem;line-height:1.4;border-radius:0.875rem;padding:0.0625rem 0.375rem;border:0.0625rem solid rgba(115, 115, 115, 0.25);color:inherit;-webkit-transform:translateY(calc(var(--stzh-space-xsmall) * -1));transform:translateY(calc(var(--stzh-space-xsmall) * -1));margin-left:var(--stzh-space-xxsmall);-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed)}";

package/dist/esm/stzh-appointments.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-0e6d34c6.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84f71a43.js';
 import { f as fetchTranslations, t as tc } from './translation-utils-2623783f.js';
 import { p as parseISODate, a as printISODate } from './date-utils-be83fff1.js';
 import { c as createGlobalAdapter } from './date-adapter-cbc340fa.js';

package/dist/esm/stzh-badge_3.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, c as createEvent, F as Fragment, g as getElement } from './index-0e6d34c6.js';
+import { r as registerInstance, h, a as Host, c as createEvent, F as Fragment, g as getElement } from './index-84f71a43.js';
 import { h as hasSlot } from './utils-68a28fce.js';
 const stzhBadgeCss = ".sc-stzh-badge-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-badge-h{display:none}.sc-stzh-badge-h *.sc-stzh-badge,.sc-stzh-badge-h *.sc-stzh-badge::before,.sc-stzh-badge-h *.sc-stzh-badge::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-badge-h{display:-ms-inline-flexbox;display:inline-flex}.stzh-badge.sc-stzh-badge{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;min-width:0.625rem;font-size:0.625rem;line-height:1.4;-webkit-box-shadow:0 0 0 0.0625rem #fff;box-shadow:0 0 0 0.0625rem #fff;border-radius:0.875rem;padding:0.0625rem 0.375rem;background-color:var(--stzh-color-shiraz);color:var(--stzh-color-white);text-transform:uppercase}";
@@ -15,13 +15,14 @@ const StzhBadge = class {
 };
 StzhBadge.style = stzhBadgeCss;
-const stzhButtonCss = "@charset \"UTF-8\";.sc-stzh-button-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-button-h{display:none}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-button-h{--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--height:var(--stzh-form-input-height);--icon-size:var(--stzh-icon-size-small);--icon-text-margin:var(--stzh-space-small);--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--padding:var(--stzh-space-xsmall) var(--stzh-space-xlarge);--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));display:inline-block;border-radius:var(--stzh-button-border-radius)}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:block}[size=small].sc-stzh-button-h{--height:var(--stzh-form-input-small-height)}[size=tiny].sc-stzh-button-h{--height:var(--stzh-form-input-tiny-height);--icon-text-margin:var(--stzh-space-xsmall);--padding:var(--stzh-space-xxsmall) var(--stzh-space-medium)}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:var(--stzh-color-white)}[variant=input].sc-stzh-button-h{--color:var(--stzh-color-grey61);--background-color:transparent;--border-color:var(--stzh-color-grey61);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:transparent;--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:transparent;--border-color:transparent;--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:var(--stzh-button-text-hover-background);--hover-border-color:transparent}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[disabled].sc-stzh-button-h:not([disabled=false]){--border-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-grey13);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:var(--stzh-color-grey13)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary]{--color:var(--stzh-color-grey25);--border-color:var(--stzh-color-grey13);--background-color:transparent;--hover-color:var(--stzh-color-grey25);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:transparent}@-webkit-keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}.sc-stzh-button-h .sc-stzh-button-s>stzh-icon,.stzh-button__icon.sc-stzh-button{--size:var(--icon-size)}.stzh-button.sc-stzh-button{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;overflow:visible;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding:var(--padding);background-color:var(--background-color);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);border:0.0625rem solid var(--border-color);cursor:pointer;text-decoration:none;width:100%;min-width:var(--height);height:var(--height);border-radius:var(--stzh-button-border-radius)}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__inner.sc-stzh-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:auto;height:1em}.stzh-button__text.sc-stzh-button{white-space:nowrap}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button--size-small.sc-stzh-button,.stzh-button--size-tiny.sc-stzh-button{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button{width:var(--height);height:var(--height);padding:0}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{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-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{-webkit-animation:stzh-button-effect-cta 1s;animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:start;justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:end;justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:center;justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:justify;justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}";
+const stzhButtonCss = "@charset \"UTF-8\";.sc-stzh-button-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-button-h{display:none}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-button-h{--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--height:var(--stzh-form-input-height);--icon-size:var(--stzh-icon-size-small);--icon-text-margin:var(--stzh-space-small);--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--padding:var(--stzh-space-xsmall) var(--stzh-space-xlarge);--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));display:inline-block;border-radius:var(--stzh-button-border-radius)}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:block}[size=small].sc-stzh-button-h{--height:var(--stzh-form-input-small-height)}[size=tiny].sc-stzh-button-h{--height:var(--stzh-form-input-tiny-height);--icon-text-margin:var(--stzh-space-xsmall);--padding:var(--stzh-space-xxsmall) var(--stzh-space-medium)}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:var(--stzh-color-white)}[variant=input].sc-stzh-button-h{--color:var(--stzh-color-grey61);--background-color:transparent;--border-color:var(--stzh-color-grey61);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:transparent;--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:transparent;--border-color:transparent;--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:var(--stzh-button-text-hover-background);--hover-border-color:transparent}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[disabled].sc-stzh-button-h:not([disabled=false]){--border-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-grey13);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:var(--stzh-color-grey13)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary]{--color:var(--stzh-color-grey25);--border-color:var(--stzh-color-grey13);--background-color:transparent;--hover-color:var(--stzh-color-grey25);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:transparent}@-webkit-keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}.sc-stzh-button-h .sc-stzh-button-s>stzh-icon,.stzh-button__icon.sc-stzh-button{--size:var(--icon-size)}.stzh-button.sc-stzh-button{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;z-index:0;overflow:visible;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding:var(--padding);background-color:var(--background-color);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);border:0.0625rem solid var(--border-color);cursor:pointer;text-decoration:none;width:100%;min-width:var(--height);height:var(--height);border-radius:var(--stzh-button-border-radius)}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__inner.sc-stzh-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:auto;height:1em}.stzh-button__text.sc-stzh-button{white-space:nowrap}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none}.stzh-button__mark.sc-stzh-button{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:50%;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:\"\"}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary, var(--stzh-color-zueriblue));width:0.5rem;height:0.5rem;border-radius:50%;opacity:0}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey61)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-grey5)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-grey5)}.stzh-button--size-small.sc-stzh-button,.stzh-button--size-tiny.sc-stzh-button{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button{width:var(--height);height:var(--height);padding:0}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{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-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{-webkit-animation:stzh-button-effect-cta 1s;animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:start;justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:end;justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:center;justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:justify;justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}";
 const StzhButton = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.stzhFocus = createEvent(this, "stzhFocus", 7);
     this.stzhBlur = createEvent(this, "stzhBlur", 7);
+    this.stzhChange = createEvent(this, "stzhChange", 7);
     /** Display a badge aligned to button or icons */
     this.badge = "";
     /** Badge position */
@@ -38,6 +39,12 @@ const StzhButton = class {
     this.icon = "";
     /** Icon Position */
     this.iconPosition = "left";
+    /** Checked status (if type is radio) */
+    this.checked = false;
+    /** The name of the input element (if type is radio) */
+    this.name = "";
+    /** The value of the input element (if type is radio) */
+    this.value = "";
     /** `href` if the button should be used as link  */
     this.href = "";
     /** Target if the button is used as link (if `href` used)  */
@@ -56,6 +63,15 @@ const StzhButton = class {
     this.iconOnly = false;
     /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
     this.a11yDescribedby = "";
+    this.onInput = (event) => {
+      this.checked = this.input.checked;
+      this.stzhChange.emit({
+        component: "stzh-button",
+        originalEvent: event,
+        value: this.value,
+        checked: this.checked
+      });
+    };
     this.onFocus = (event) => {
       const focusEvent = new FocusEvent("focus", {
         view: window,
@@ -102,7 +118,8 @@ const StzhButton = class {
     return (h("div", { class: "stzh-button__text" }, this.label ? this.label : h("slot", null)));
   }
   renderInner(iconUsed) {
-    return (h(Fragment, null, h("div", { class: "stzh-button__inner", onClick: this.onClick }, this.iconPosition === "left" && this.renderIcon(iconUsed), this.renderContent(), this.iconPosition === "right" && this.renderIcon(iconUsed)), this.badge && (this.badgePosition === "button" || !iconUsed) &&
+    return (h(Fragment, null, h("div", { class: "stzh-button__inner", onClick: this.onClick }, this.type === "radio" &&
+      h("div", { class: "stzh-button__mark" }, h("div", { class: "stzh-button__check" })), this.iconPosition === "left" && this.renderIcon(iconUsed), this.renderContent(), this.iconPosition === "right" && this.renderIcon(iconUsed)), this.badge && (this.badgePosition === "button" || !iconUsed) &&
       h("stzh-badge", { class: "stzh-button__badge", label: this.badge, onClick: this.onClick })));
   }
   render() {
@@ -119,12 +136,16 @@ const StzhButton = class {
       [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,
       [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,
       [`stzh-button--size-${this.size}`]: !!this.size,
+      [`stzh-button--type-${this.type}`]: !!this.type,
       [`stzh-button--${this.variant}`]: !!this.variant
     };
     return (h(Host, null, this.href ?
       h("a", { ref: (el) => (this.button = el), href: this.disabled ? null : this.href, target: this.target, class: classes, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))
       :
-        h("button", { ref: (el) => (this.button = el), class: classes, type: this.type, disabled: this.disabled, "aria-label": this.a11yLabel, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))));
+        this.type === "radio" ?
+          h("label", { ref: (el) => (this.button = el), class: classes, onClick: this.onClick }, h("input", { ref: (el) => (this.input = el), type: "radio", class: "stzh-button__input", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-label": this.a11yLabel, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, onInput: this.onInput }), this.renderInner(iconUsed))
+          :
+            h("button", { ref: (el) => (this.button = el), class: classes, type: this.type, disabled: this.disabled, "aria-label": this.a11yLabel, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))));
   }
   get element() { return getElement(this); }
 };

package/dist/esm/stzh-calendar.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h, r as registerInstance, c as createEvent, a as Host, g as getElement } from './index-0e6d34c6.js';
+import { h, r as registerInstance, c as createEvent, a as Host, g as getElement } from './index-84f71a43.js';
 import { i as isEqual, b as isEqualMonth, g as getViewOfMonth, c as inRange, D as DaysOfWeek, p as parseISODate, d as clamp, a as printISODate, e as addDays, s as startOfWeek, f as endOfWeek, h as setMonth, j as startOfMonth, k as endOfMonth, l as setYear } from './date-utils-be83fff1.js';
 import { f as fetchTranslations } from './translation-utils-2623783f.js';

package/dist/esm/stzh-card-list.entry.js ADDED Viewed

@@ -0,0 +1,75 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84f71a43.js';
+import { c as cloneElement } from './utils-68a28fce.js';
+import { f as fetchTranslations } from './translation-utils-2623783f.js';
+const stzhCardListCss = ".sc-stzh-card-list-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-card-list-h{display:none}.sc-stzh-card-list-h *.sc-stzh-card-list,.sc-stzh-card-list-h *.sc-stzh-card-list::before,.sc-stzh-card-list-h *.sc-stzh-card-list::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-card-list-h .sc-stzh-card-list-s>*:not(:last-child):not([slot]){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.sc-stzh-card-list-h .sc-stzh-card-list-s>*:not(:last-child):not([slot]){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sc-stzh-card-list-h .sc-stzh-card-list-s>*:not(:last-child):not([slot]){margin-bottom:var(--stzh-space-xlarge)}}.sc-stzh-card-list-h .sc-stzh-card-list-s>[slot=description] stzh-icon{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.sc-stzh-card-list-h .sc-stzh-card-list-s>stzh-text[slot=description]{--color:inherit}.stzh-card-list__header.sc-stzh-card-list{margin-bottom:var(--stzh-space-medium);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}@media screen and (min-width: 1024px){.stzh-card-list__header.sc-stzh-card-list{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-card-list__header.sc-stzh-card-list{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 800px){.stzh-card-list__header.sc-stzh-card-list{-ms-flex-direction:row;flex-direction:row}}.stzh-card-list__description.sc-stzh-card-list{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);color:var(--stzh-base-lead-color)}@media screen and (min-width: 1024px){.stzh-card-list__description.sc-stzh-card-list{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-list__description.sc-stzh-card-list:not(:empty){margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 800px){.stzh-card-list__description.sc-stzh-card-list:not(:empty){margin-bottom:0}}.stzh-card-list__switch.sc-stzh-card-list{--color:var(--stzh-base-lead-color);-ms-flex-item-align:end;align-self:end}";
+const StzhCardList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.stzhCollapseAll = createEvent(this, "stzhCollapseAll", 7);
+    /** Whether collapse/expand toggle link */
+    this.showToggleLink = false;
+    /** Whether sorting should be disabled */
+    this.sortableDisabled = false;
+    /** HTML attribute that is used by the `toArray()` of sortable method */
+    this.sortableDataIdAttribute = "data-id";
+    /** Algorithm how the ghost element will be cloned */
+    this.sortableGhostClone = (dragElement) => {
+      const [clonedElement, clonedStzhElement, originalStzhElement] = cloneElement(dragElement);
+      if (clonedStzhElement
+        && originalStzhElement
+        && clonedStzhElement.tagName.toLowerCase() === "stzh-card") {
+        const clonedStzhElementCard = clonedStzhElement;
+        const originalStzhElementCard = originalStzhElement;
+        // copy every property that is not reflected to its attribute
+        clonedStzhElementCard.heading = originalStzhElementCard.heading;
+        clonedStzhElementCard.subtitle = originalStzhElementCard.subtitle;
+        clonedStzhElementCard.headerActions = originalStzhElementCard.headerActions;
+        clonedStzhElementCard.footerActions = originalStzhElementCard.footerActions;
+        clonedStzhElementCard.hideMovementActions = originalStzhElementCard.hideMovementActions;
+      }
+      return clonedElement;
+    };
+    this.allCollapsed = false;
+    this.collapseClick = () => {
+      const cards = Array.from(this.element.querySelectorAll("stzh-card"));
+      cards.forEach(card => {
+        if (card.collapsible) {
+          card.collapsed = !this.allCollapsed;
+        }
+      });
+      this.allCollapsed = !this.allCollapsed;
+      this.stzhCollapseAll.emit({
+        component: "stzh-card-list",
+        allCollapsed: this.allCollapsed
+      });
+    };
+    this.updateCollapsedState = () => {
+      const cards = Array.from(this.element.querySelectorAll("stzh-card"));
+      this.allCollapsed = !cards.some(card => !card.collapsed);
+    };
+  }
+  collapseListener() {
+    this.updateCollapsedState();
+  }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "card-list");
+    }
+  }
+  componentDidLoad() {
+    this.updateCollapsedState();
+  }
+  render() {
+    const classes = {
+      "stzh-card-list": true
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-card-list__header" }, h("div", { class: "stzh-card-list__description" }, h("slot", { name: "description" })), this.showToggleLink &&
+      h("stzh-link", { class: "stzh-card-list__switch", icon: this.allCollapsed ? "list-expanded" : "list-shrinked", label: this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll, onClick: this.collapseClick })), h("stzh-sortable", { disabled: this.sortableDisabled, dataIdAttribute: this.sortableDataIdAttribute, ghostClone: this.sortableGhostClone }, h("div", { class: "stzh-card-list__cards", role: "list" }, h("slot", null))))));
+  }
+  get element() { return getElement(this); }
+};
+StzhCardList.style = stzhCardListCss;
+export { StzhCardList as stzh_card_list };