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

package/dist/collection/components/stzh-button/stzh-button.js

@@ -6,46 +6,6 @@ import { hasSlot } from "../../utils/utils";
  */
 export class StzhButton {
   constructor() {
-    /** Display a badge aligned to button or icons */
-    this.badge = "";
-    /** Badge position */
-    this.badgePosition = "button";
-    /** Whether the button is full width */
-    this.fullwidth = false;
-    /** Size variant */
-    this.size = "default";
-    /** Text alignment */
-    this.textAlign = "default";
-    /** Variant style */
-    this.variant = "default";
-    /** Icon (use instead of icon slot) */
-    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)  */
-    this.target = "";
-    /** Type of the button */
-    this.type = "button";
-    /** Whether the button is disabled */
-    this.disabled = false;
-    /** Whether the button is active */
-    this.active = false;
-    /** Label */
-    this.label = "";
-    /** Effect/Animation used */
-    this.effect = "default";
-    /** Whether only an icon is used inside the button */
-    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({
@@ -85,6 +45,29 @@ export class StzhButton {
         event.preventDefault();
       }
     };
+    this.badge = "";
+    this.badgeType = "default";
+    this.badgePosition = "button";
+    this.badgeEmpty = false;
+    this.fullwidth = false;
+    this.size = "default";
+    this.textAlign = "default";
+    this.variant = "default";
+    this.icon = "";
+    this.iconPosition = "left";
+    this.checked = false;
+    this.name = "";
+    this.value = "";
+    this.href = "";
+    this.target = "";
+    this.type = "button";
+    this.disabled = false;
+    this.active = false;
+    this.label = "";
+    this.effect = "default";
+    this.iconOnly = false;
+    this.a11yLabel = undefined;
+    this.a11yDescribedby = "";
   }
   /** Focus button */
   async setFocus() {
@@ -94,25 +77,25 @@ export class StzhButton {
     return (h("div", { class: "stzh-button__icon-wrapper" }, this.icon ?
       h("stzh-icon", { class: "stzh-button__icon", name: this.icon })
       :
-        h("slot", { name: "icon" }), this.badge && this.badgePosition === "icon" && iconUsed &&
-      h("stzh-badge", { class: "stzh-button__badge", label: this.badge })));
+        h("slot", { name: "icon" }), (this.badge || this.badgeEmpty) && this.badgePosition === "icon" && iconUsed &&
+      h("stzh-badge", { class: "stzh-button__badge", label: this.badge, type: this.badgeType })));
   }
   renderContent() {
     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.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 })));
+      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.badgeEmpty) && (this.badgePosition === "button" || !iconUsed) &&
+      h("stzh-badge", { class: "stzh-button__badge", label: this.badge, type: this.badgeType, onClick: this.onClick })));
   }
   render() {
     const iconUsed = hasSlot(this.element, "icon") || !!this.icon;
     const classes = {
       "stzh-button": true,
-      "stzh-button--fullwidth": this.fullwidth,
       "stzh-button--has-icon": iconUsed,
       "stzh-button--has-icon-only": this.iconOnly,
       "stzh-button--has-badge": !!this.badge,
+      "stzh-button--is-fullwidth": this.fullwidth,
       "stzh-button--is-disabled": this.disabled,
       "stzh-button--is-active": this.active,
       [`stzh-button--effect-${this.effect}`]: !!this.effect,
@@ -128,7 +111,7 @@ export class StzhButton {
         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))));
+            h("button", { ref: (el) => (this.button = el), class: classes, type: this.type, disabled: this.disabled, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))));
   }
   static get is() { return "stzh-button"; }
   static get encapsulation() { return "scoped"; }
@@ -162,6 +145,24 @@ export class StzhButton {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "badgeType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"success\" | \"warning\" | \"error\" | \"info\"",
+          "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Badge type"
+        },
+        "attribute": "badge-type",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
       "badgePosition": {
         "type": "string",
         "mutable": false,
@@ -180,6 +181,24 @@ export class StzhButton {
         "reflect": true,
         "defaultValue": "\"button\""
       },
+      "badgeEmpty": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether badge should be displayed empty"
+        },
+        "attribute": "badge-empty",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "fullwidth": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/stzh-calendar/stzh-calendar.js

@@ -25,30 +25,6 @@ const keyCode = {
 let calendarCounter = 0;
 export class StzhCalendar {
   constructor() {
-    /** Date value. Must be in IS0-8601 format: YYYY-MM-DD. */
-    this.value = "";
-    /**
-     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-     * This setting can be used alone or together with the max property.
-     */
-    this.min = "";
-    /**
-     * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-     * This setting can be used alone or together with the min property.
-     */
-    this.max = "";
-    /**
-     * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.
-     * Default is Monday.
-     */
-    this.firstDayOfWeek = DaysOfWeek.Monday;
-    /**
-     * Controls which days are disabled and therefore disallowed.
-     * For example, this can be used to disallow selection of weekends.
-     */
-    this.isDateDisabled = () => false;
-    this.activeFocus = false;
-    this.focusedDay = new Date();
     // private focusedDayNode: HTMLButtonElement
     this.initialTouchX = null;
     this.initialTouchY = null;
@@ -160,6 +136,14 @@ export class StzhCalendar {
         setTimeout(() => element.focus(), 0);
       }
     };
+    this.value = "";
+    this.min = "";
+    this.max = "";
+    this.firstDayOfWeek = DaysOfWeek.Monday;
+    this.localization = undefined;
+    this.isDateDisabled = () => false;
+    this.activeFocus = false;
+    this.focusedDay = new Date();
   }
   createDateFormatters() {
     if (this.localization) {

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

@@ -159,7 +159,6 @@
   border: var(--border);
   transition: box-shadow var(--stzh-base-transition-animation-speed);
   /* Interactive Subtitle */
-  /* Type Alert */
   /* Collapsed (Header) */
   /* Starred */
   /** Hidden header / footer border */
@@ -230,19 +229,14 @@
 .stzh-card__header-right {
   padding-left: var(--stzh-space-xsmall);
 }
-@media screen and (min-width: 600px) {
-  .stzh-card__header-right {
-    padding-left: var(--stzh-space-small);
-  }
-}
 @media screen and (min-width: 1024px) {
   .stzh-card__header-right {
-    padding-left: var(--stzh-space-medium);
+    padding-left: var(--stzh-space-small);
   }
 }
 @media screen and (min-width: 1260px) {
   .stzh-card__header-right {
-    padding-left: var(--stzh-space-large);
+    padding-left: var(--stzh-space-medium);
   }
 }
 .stzh-card__left {
@@ -373,12 +367,6 @@
 .stzh-card--has-subtitle-interactive .stzh-card__subtitle:hover, .stzh-card--has-subtitle-interactive .stzh-card__subtitle:focus {
   color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
-.stzh-card--type-alert .stzh-card__subtitle {
-  color: var(--stzh-color-error);
-}
-.stzh-card--type-alert .stzh-card__subtitle:hover, .stzh-card--type-alert .stzh-card__subtitle:focus {
-  color: var(--stzh-color-error);
-}
 .stzh-card--is-collapsed .hide-when-collapsed, .stzh-card--has-collapsed-header .stzh-card__header .hide-when-collapsed {
   display: none;
 }

package/dist/collection/components/stzh-card/stzh-card.js

@@ -9,45 +9,7 @@ import { fetchTranslations } from "../../utils/translation-utils";
  */
 export class StzhCard {
   constructor() {
-    /** Whether card is collapsed or not */
-    this.collapsed = false;
-    /** Whether card was starred */
-    this.starred = false;
-    /** Whether card star is displayed */
-    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;
-    /** Heading */
-    this.heading = "";
-    /** Subtitle */
-    this.subtitle = "";
     this._subtitles = [];
-    /** Card header actions */
-    this.headerActions = [];
-    /** Card footer actions */
-    this.footerActions = [];
-    /** Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click */
-    this.subtitleInteractive = false;
-    /** Type */
-    this.type = "default";
-    /** Whether sorting should be disabled */
-    this.sortableDisabled = false;
-    /** Whether card is collapsible */
-    this.collapsible = false;
-    /** Whether to hide header separation border */
-    this.hideHeaderBorder = false;
-    /** Whether to hide footer separation border */
-    this.hideFooterBorder = false;
-    /** Whether movement menu items should be shown */
-    this.hideMovementActions = false;
     this.nodeChange = (entries) => {
       let changeInSlot = false;
       entries.forEach((entry) => {
@@ -147,8 +109,26 @@ export class StzhCard {
     };
     this.handleSelectionChange = (event) => {
       this.checked = event.detail.checked;
-      console.log(this.element, this.checked);
     };
+    this.localization = undefined;
+    this.collapsed = false;
+    this.starred = false;
+    this.starrable = false;
+    this.selectable = false;
+    this.checked = false;
+    this.name = "";
+    this.value = "";
+    this.disabled = false;
+    this.heading = "";
+    this.subtitle = "";
+    this.headerActions = [];
+    this.footerActions = [];
+    this.subtitleInteractive = false;
+    this.sortableDisabled = false;
+    this.collapsible = false;
+    this.hideHeaderBorder = false;
+    this.hideFooterBorder = false;
+    this.hideMovementActions = false;
   }
   handleResize() {
     if (this.debounceResize) {
@@ -242,8 +222,7 @@ export class StzhCard {
       "stzh-card--has-hidden-footer-border": this.hideFooterBorder,
       "stzh-card--is-collapsed": this.collapsed,
       "stzh-card--is-starred": this.starred,
-      "stzh-card--is-checked": this.checked,
-      [`stzh-card--type-${this.type}`]: !!this.type,
+      "stzh-card--is-checked": this.checked
     };
     const Subtitle = `${this.subtitleInteractive ? 'button' : 'span'}`;
     const sortableChildElement = this.findSortableChildElement();
@@ -253,6 +232,11 @@ export class StzhCard {
     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 sortableActionsEnabled = !this.sortableDisabled
+      && !this.hideMovementActions
+      && this.sortable
+      && !this.sortable.disabled;
+    const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);
     // const headerActions = [
     //   ...this._headerActions
     // ];
@@ -263,15 +247,19 @@ export class StzhCard {
         "show-medium": !action.onlyCollapseText,
         "hide-when-collapsed": !action.onlyCollapseText,
         "hide-text-when-collapsed": action.onlyCollapseText
-      }, icon: action.icon, badge: action.badge, variant: "tertiary", size: "tiny", badgePosition: "icon", onClick: () => { this.actionClick(action); } }, h("span", { class: {
+      }, icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, variant: "tertiary", size: "tiny", badgePosition: "icon", onClick: () => { this.actionClick(action); } }, h("span", { class: {
         "show-medium": action.onlyCollapseText,
         "hide-when-collapsed": action.onlyCollapseText
       } }, action.label)))), this.starrable &&
-      h("stzh-tooltip", null, h("stzh-button", { class: "stzh-card__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)), h("stzh-popover", { label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: "stzh-card__card-action-popover" }, h("stzh-button", { class: "stzh-card__card-action is-further", variant: "tertiary", size: "tiny", icon: "more-vertical", iconOnly: true }), h("stzh-menu", { slot: "content" }, this.starrable &&
-      h("stzh-menu-item", { icon: this.starred ? "star-filled" : "star", onClick: this.starToggleClick }, this.starred ? this.localization.actionRemove : this.localization.actionAdd), this._headerActions.filter(action => !action.onlyCollapseText).map(action => (h("stzh-menu-item", { class: "hide-medium show-when-collapsed", icon: action.icon, badge: action.badge, onClick: () => { this.actionClick(action); } }, action.label))), (!this.sortableDisabled && !this.hideMovementActions && this.sortable && !this.sortable.disabled) &&
-      h(Fragment, null, !isFirstItemInSortable &&
-        h("stzh-menu-item", { icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp), !isLastItemInSortable &&
-        h("stzh-menu-item", { icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown))))))), h("div", { class: "stzh-card__header-meta" }, h("slot", { name: "meta" }))), h("div", { class: "stzh-card__content hide-when-collapsed" }, h("slot", { name: "content" })), h("div", { class: "stzh-card__footer hide-when-collapsed" }, this._footerActions.length > 0 &&
+      h("stzh-tooltip", null, h("stzh-button", { class: "stzh-card__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)), (nonCollapsingTextHeaderActions.length > 0 || this.starrable || sortableActionsEnabled) &&
+      h("stzh-popover", { 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", { class: "stzh-card__card-action is-further", variant: "tertiary", size: "tiny", icon: "more-vertical", iconOnly: true }), h("stzh-menu", { slot: "content" }, this.starrable &&
+        h("stzh-menu-item", { icon: this.starred ? "star-filled" : "star", onClick: this.starToggleClick }, this.starred ? this.localization.actionRemove : this.localization.actionAdd), nonCollapsingTextHeaderActions.map(action => (h("stzh-menu-item", { class: "hide-medium show-when-collapsed", icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: () => { this.actionClick(action); } }, action.label))), sortableActionsEnabled &&
+        h(Fragment, null, !isFirstItemInSortable &&
+          h("stzh-menu-item", { icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp), !isLastItemInSortable &&
+          h("stzh-menu-item", { icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown))))))), h("div", { class: "stzh-card__header-meta" }, h("slot", { name: "meta" }))), h("div", { class: "stzh-card__content hide-when-collapsed" }, h("slot", { name: "content" })), h("div", { class: "stzh-card__footer hide-when-collapsed" }, this._footerActions.length > 0 &&
       h("stzh-actionset", { actions: this._footerActions }), this.selectable &&
       h("stzh-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 }))))));
   }
@@ -357,7 +345,7 @@ export class StzhCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether card star is displayed"
+          "text": "Whether card star is displayed (with tooltip and menu-item in mobile popover).\nThe tooltip / menu-item text can be adjusted in the translations file (`actionAdd` & `actionRemove`)."
         },
         "attribute": "starrable",
         "reflect": true,
@@ -529,7 +517,7 @@ export class StzhCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Card footer actions"
+          "text": "Card footer actions.\nThe [`stzh-actionset`](?path=/story/components-actionset) component is used internally.\nYou can listen to clicks with the `stzhActionClick` event."
         },
         "attribute": "footer-actions",
         "reflect": false,
@@ -553,24 +541,6 @@ export class StzhCard {
         "reflect": false,
         "defaultValue": "false"
       },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"default\" | \"alert\"",
-          "resolved": "\"alert\" | \"default\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Type"
-        },
-        "attribute": "type",
-        "reflect": true,
-        "defaultValue": "\"default\""
-      },
       "sortableDisabled": {
         "type": "boolean",
         "mutable": false,
@@ -583,7 +553,7 @@ export class StzhCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether sorting should be disabled"
+          "text": "Whether sorting should be disabled.\nHas no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true."
         },
         "attribute": "sortable-disabled",
         "reflect": true,
@@ -655,7 +625,7 @@ export class StzhCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether movement menu items should be shown"
+          "text": "Whether movement menu items should be shown.\nHas no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true."
         },
         "attribute": "hide-movement-actions",
         "reflect": false,

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

@@ -102,16 +102,13 @@ export const Default = Template.bind({});
 Default.args = {
   heading: 'Lorem ipsum',
   subtitle: 'Dolor si',
-  status: {
-    label: 'Test'
-  },
   'header-actions': headerActions,
   'footer-actions': `[
     {
       "id": "action-1",
       "icon": "arrow-right",
       "label": "Lorem",
-      "variant": "primary",
+      "variant": "default",
       "iconPosition": "right"
     }
   ]`

package/dist/collection/components/stzh-card-list/stzh-card-list.js

@@ -7,30 +7,6 @@ import { fetchTranslations } from "../../utils/translation-utils";
  */
 export class StzhCardList {
   constructor() {
-    /** 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 => {
@@ -48,6 +24,27 @@ export class StzhCardList {
       const cards = Array.from(this.element.querySelectorAll("stzh-card"));
       this.allCollapsed = !cards.some(card => !card.collapsed);
     };
+    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.localization = undefined;
+    this.showToggleLink = false;
+    this.sortableEnabled = false;
+    this.sortableDataIdAttribute = "data-id";
+    this.allCollapsed = false;
   }
   collapseListener() {
     this.updateCollapsedState();
@@ -65,7 +62,7 @@ export class StzhCardList {
       "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))))));
+      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.sortableEnabled, dataIdAttribute: this.sortableDataIdAttribute, ghostClone: this.sortableGhostClone }, h("div", { class: "stzh-card-list__cards", role: "list" }, h("slot", null))))));
   }
   static get is() { return "stzh-card-list"; }
   static get encapsulation() { return "scoped"; }
@@ -119,7 +116,7 @@ export class StzhCardList {
         "reflect": true,
         "defaultValue": "false"
       },
-      "sortableDisabled": {
+      "sortableEnabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -131,9 +128,9 @@ export class StzhCardList {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether sorting should be disabled"
+          "text": "Whether sorting should be enabled"
         },
-        "attribute": "sortable-disabled",
+        "attribute": "sortable-enabled",
         "reflect": false,
         "defaultValue": "false"
       },
@@ -154,32 +151,6 @@ export class StzhCardList {
         "attribute": "sortable-data-id-attribute",
         "reflect": false,
         "defaultValue": "\"data-id\""
-      },
-      "sortableGhostClone": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Function",
-          "resolved": "Function",
-          "references": {
-            "Function": {
-              "location": "global"
-            },
-            "HTMLElement": {
-              "location": "global"
-            },
-            "HTMLStzhCardElement": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Algorithm how the ghost element will be cloned"
-        },
-        "defaultValue": "(dragElement: HTMLElement) => {\n    const [clonedElement, clonedStzhElement, originalStzhElement] = cloneElement(dragElement);\n\n    if (\n      clonedStzhElement\n      && originalStzhElement\n      && clonedStzhElement.tagName.toLowerCase() === \"stzh-card\"\n    ) {\n      const clonedStzhElementCard: HTMLStzhCardElement = clonedStzhElement as HTMLStzhCardElement;\n      const originalStzhElementCard: HTMLStzhCardElement = originalStzhElement as HTMLStzhCardElement;\n\n      // copy every property that is not reflected to its attribute\n      clonedStzhElementCard.heading = originalStzhElementCard.heading;\n      clonedStzhElementCard.subtitle = originalStzhElementCard.subtitle;\n      clonedStzhElementCard.headerActions = originalStzhElementCard.headerActions;\n      clonedStzhElementCard.footerActions = originalStzhElementCard.footerActions;\n      clonedStzhElementCard.hideMovementActions = originalStzhElementCard.hideMovementActions;\n    }\n\n    return clonedElement;\n  }"
       }
     };
   }

package/dist/collection/components/stzh-card-list/stzh-card-list.stories.js

@@ -116,7 +116,7 @@ const Template = (args) => (
     <stzh-card collapsible starrable heading="Lorem ipsum 3" subtitle="Dolor si 3" footer-actions={actions2}>
       <div slot="content">Content</div>
     </stzh-card>
-    <stzh-card collapsible starrable heading="Lorem ipsum 4">
+    <stzh-card collapsible heading="Lorem ipsum 4">
       <stzh-cspace slot="content">
         <p>Content with Input:</p>
         <stzh-input></stzh-input>
@@ -128,5 +128,5 @@ const Template = (args) => (
 
 export const Default = Template.bind({});
 Default.args = {
-  'show-toggle-Link': true
+  'show-toggle-link': true
 };

package/dist/collection/components/stzh-cell/stzh-cell.js

@@ -4,19 +4,12 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhCell {
   constructor() {
-    /** Default span of each cell */
     this.span = 12;
-    /** Default span of each cell above small breakpoint */
     this.spanSmall = 0;
-    /** Default span of each cell above medium breakpoint */
     this.spanMedium = 0;
-    /** Default span of each cell above large breakpoint */
     this.spanLarge = 0;
-    /** Default span of each cell above ultra breakpoint */
     this.spanUltra = 0;
-    /** Controlling how cells are positioned along a container's main axis */
     this.justifySelf = "auto";
-    /** Control how cells items are positioned along a container's cross axis */
     this.alignSelf = "auto";
   }
   render() {

package/dist/collection/components/stzh-checkbox/stzh-checkbox.js

@@ -12,24 +12,6 @@ let checkboxCounter = 0;
  */
 export class StzhCheckbox {
   constructor() {
-    /** Whether the checkbox is disabled */
-    this.disabled = false;
-    /** Name of the input element */
-    this.name = "";
-    /** Value of the input element */
-    this.value = "";
-    /** Invalid status */
-    this.invalid = false;
-    /** Required status */
-    this.required = false;
-    /** Checked status */
-    this.checked = false;
-    /** Label */
-    this.label = "";
-    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
-    this.showMarker = false;
-    /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */
-    this.a11yDescribedby = "";
     this.onInput = (event) => {
       this.checked = this.input.checked;
       this.stzhChange.emit({
@@ -63,6 +45,19 @@ export class StzhCheckbox {
         originalEvent: event
       });
     };
+    this.localization = undefined;
+    this.disabled = false;
+    this.name = "";
+    this.value = "";
+    this.invalid = false;
+    this.required = false;
+    this.checked = false;
+    this.label = "";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.showMarker = false;
+    this.error = undefined;
+    this.a11yDescribedby = "";
   }
   /** Focus input field */
   async setFocus() {