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

package/dist/collection/components/{stzh-servicecard/stzh-servicecard.js → stzh-card/stzh-card.js}

@@ -1,13 +1,13 @@
 import { Host, h, Fragment, forceUpdate } from "@stencil/core";
-import { hasSlot } from "../../utils/utils";
+import { hasSlot, setPropsIfNull } from "../../utils/utils";
 import { media } from '../../utils/media-utils';
 import { fetchTranslations } from "../../utils/translation-utils";
 /**
- * @slot left - Slot for left column for any elements
- * @slot middle - Slot for middle column for any elements
- * @slot right - Slot for right column for any elements
+ * @slot image - Slot for optional image element
+ * @slot content - Slot for content for any elements
+ * @slot meta - Slot for meta elements (status or chip)
  */
-export class StzhServicecard {
+export class StzhCard {
   constructor() {
     /** Whether card is collapsed or not */
     this.collapsed = false;
@@ -15,27 +15,37 @@ export class StzhServicecard {
     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 actions */
-    this.actions = [];
+    /** 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";
-    /** Middle column position variant (positioning behaviour on tablet) */
-    this.middleVariant = "to-right";
-    /** Set middle column vertical spacing */
-    this.middleVerticalSpacing = "default";
-    /** Set right column vertical spacing */
-    this.rightVerticalSpacing = "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) => {
@@ -53,13 +63,13 @@ export class StzhServicecard {
       if (!this.mainElement) {
         return;
       }
-      this.mainElement.classList.remove("stzh-servicecard--has-collapsed-header");
+      this.mainElement.classList.remove("stzh-card--has-collapsed-header");
       if (media('medium').matches) {
         const headerWidth = this.headerElement.clientWidth;
         const leftWidth = this.headerLeftElement.clientWidth;
         const rightWidth = this.headerRightElement.clientWidth;
         if (headerWidth - leftWidth <= rightWidth) {
-          this.mainElement.classList.add("stzh-servicecard--has-collapsed-header");
+          this.mainElement.classList.add("stzh-card--has-collapsed-header");
         }
       }
     };
@@ -73,7 +83,7 @@ export class StzhServicecard {
       if (!found) {
         this.collapsed = !this.collapsed;
         this.stzhCollapse.emit({
-          component: "stzh-servicecard",
+          component: "stzh-card",
           collapsed: this.collapsed
         });
       }
@@ -81,19 +91,19 @@ export class StzhServicecard {
     this.subtitleClick = () => {
       if (this.subtitleInteractive) {
         this.stzhSubtitleClick.emit({
-          component: "stzh-servicecard"
+          component: "stzh-card"
         });
       }
     };
     this.starToggleClick = () => {
       this.stzhStarClick.emit({
-        component: "stzh-servicecard",
+        component: "stzh-card",
         starred: this.starred
       });
     };
     this.actionClick = (action) => {
-      this.stzhActionClick.emit({
-        component: "stzh-servicecard",
+      this.stzhHeaderActionClick.emit({
+        component: "stzh-card",
         action
       });
     };
@@ -111,6 +121,34 @@ export class StzhServicecard {
         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');
+      chips.forEach((chip) => {
+        setPropsIfNull(chip, {
+          size: "small"
+        });
+      });
+    };
+    this.handleMutation = (entries) => {
+      this.init();
+      this.nodeChange(entries);
+    };
+    this.handleSelectionChange = (event) => {
+      this.checked = event.detail.checked;
+      console.log(this.element, this.checked);
+    };
   }
   handleResize() {
     if (this.debounceResize) {
@@ -131,12 +169,20 @@ export class StzhServicecard {
       this._subtitles = newValue;
     }
   }
-  actionsWatcher(newValue) {
+  headerActionsWatcher(newValue) {
     if (typeof newValue === "string") {
-      this._actions = JSON.parse(newValue);
+      this._headerActions = JSON.parse(newValue);
     }
     else {
-      this._actions = newValue;
+      this._headerActions = newValue;
+    }
+  }
+  footerActionsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._footerActions = JSON.parse(newValue);
+    }
+    else {
+      this._footerActions = newValue;
     }
   }
   findSortableChildElement() {
@@ -150,7 +196,7 @@ export class StzhServicecard {
       else {
         sortableContainer = sortable.container;
       }
-      while (element.parentElement !== sortableContainer) {
+      while (element.parentElement && element.parentElement !== sortableContainer) {
         element = element.parentElement;
       }
       return element;
@@ -158,13 +204,22 @@ export class StzhServicecard {
   }
   async componentWillLoad() {
     this.subtitleWatcher(this.subtitle);
-    this.actionsWatcher(this.actions);
+    this.headerActionsWatcher(this.headerActions);
+    this.footerActionsWatcher(this.footerActions);
     if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, "servicecard");
+      this.localization = await 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);
     }
   }
   connectedCallback() {
-    this.observer = new MutationObserver(this.nodeChange);
+    this.init();
+    this.observer = new MutationObserver(this.handleMutation);
     this.observer.observe(this.element, {
       childList: true,
       subtree: true
@@ -174,25 +229,36 @@ export class StzhServicecard {
     this.observer.disconnect();
   }
   render() {
-    const leftUsed = hasSlot(this.element, "left");
-    const middleUsed = hasSlot(this.element, "middle");
-    const rightUsed = hasSlot(this.element, "right");
+    var _a, _b, _c;
+    const imageUsed = hasSlot(this.element, "image");
+    const contentUsed = hasSlot(this.element, "content");
     const classes = {
-      "stzh-servicecard": true,
-      "stzh-servicecard--has-left": leftUsed,
-      "stzh-servicecard--has-middle": middleUsed,
-      "stzh-servicecard--has-right": rightUsed,
-      "stzh-servicecard--has-subtitle": !!this.subtitle,
-      "stzh-servicecard--has-subtitle-interactive": !!this.subtitle && this.subtitleInteractive,
-      "stzh-servicecard--is-collapsed": this.collapsed,
-      "stzh-servicecard--is-starred": this.starred,
-      [`stzh-servicecard--middle-${this.middleVariant}`]: !!this.middleVariant && middleUsed,
-      [`stzh-servicecard--type-${this.type}`]: !!this.type,
+      "stzh-card": true,
+      "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-hidden-header-border": this.hideHeaderBorder,
+      "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,
     };
     const Subtitle = `${this.subtitleInteractive ? 'button' : 'span'}`;
-    return (h(Host, { role: "listitem", "aria-label": this.heading }, h("article", { ref: (el) => (this.mainElement = el), class: classes }, h("stzh-icon", { class: "stzh-servicecard__dnd", name: "drag" }), h("header", { ref: (el) => (this.headerElement = el), class: "stzh-servicecard__header", onClick: this.headerClick }, h("div", { ref: (el) => (this.headerLeftElement = el), class: "stzh-servicecard__header-left" }, h("div", { class: "stzh-servicecard__title-area", "data-dashboardmknlist": "title" }, h("h3", { class: "stzh-servicecard__title", "data-dashboardmknlist": "dnd" }, this.heading), this._subtitles.length > 0 &&
-      h(Subtitle, { class: "stzh-servicecard__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-servicecard__subtitle-text" }, subtitle)))))), h("div", { ref: (el) => (this.headerRightElement = el), class: "stzh-servicecard__header-right" }, h("div", { class: "stzh-servicecard__card-actions" }, this._actions.map(action => (h("stzh-button", { class: {
-        "stzh-servicecard__card-action": true,
+    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 headerActions = [
+    //   ...this._headerActions
+    // ];
+    return (h(Host, { role: "listitem", "aria-label": this.heading }, h("article", { ref: (el) => (this.mainElement = el), class: classes }, h("slot", { name: "image" }), h("div", { class: "stzh-card__content-wrapper" }, h("stzh-icon", { class: "stzh-card__dnd", name: "drag" }), h("header", { ref: (el) => (this.headerElement = el), class: "stzh-card__header", onClick: this.headerClick }, h("div", { class: "stzh-card__header-top" }, h("div", { ref: (el) => (this.headerLeftElement = el), class: "stzh-card__header-left" }, h("div", { class: "stzh-card__title-area" }, h("h3", { class: "stzh-card__title" }, this.heading), this._subtitles.length > 0 &&
+      h(Subtitle, { class: "stzh-card__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-card__subtitle-text" }, subtitle)))))), h("div", { ref: (el) => (this.headerRightElement = el), class: "stzh-card__header-right" }, h("div", { class: "stzh-card__card-actions" }, this._headerActions.map(action => (h("stzh-button", { class: {
+        "stzh-card__card-action": true,
         "is-button": true,
         "show-medium": !action.onlyCollapseText,
         "hide-when-collapsed": !action.onlyCollapseText,
@@ -201,31 +267,24 @@ export class StzhServicecard {
         "show-medium": action.onlyCollapseText,
         "hide-when-collapsed": action.onlyCollapseText
       } }, action.label)))), this.starrable &&
-      h("stzh-tooltip", null, h("stzh-button", { class: "stzh-servicecard__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-servicecard__card-action-popover" }, h("stzh-button", { class: "stzh-servicecard__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._actions.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) &&
-      h(Fragment, null, h("stzh-menu-item", { icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp), h("stzh-menu-item", { icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown))))))), h("div", { class: "stzh-servicecard__columns hide-when-collapsed" }, h("div", { class: {
-        "stzh-servicecard__column": true,
-        "is-left": true
-      } }, h("slot", { name: "left" })), h("div", { class: {
-        "stzh-servicecard__column": true,
-        "is-middle": true,
-        "has-no-spacing": this.middleVerticalSpacing === "none"
-      } }, h("slot", { name: "middle" })), h("div", { class: {
-        "stzh-servicecard__column": true,
-        "is-right": true,
-        "has-no-spacing": this.rightVerticalSpacing === "none"
-      } }, h("slot", { name: "right" }))))));
+      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-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 }))))));
   }
-  static get is() { return "stzh-servicecard"; }
+  static get is() { return "stzh-card"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
-      "$": ["stzh-servicecard.scss"]
+      "$": ["stzh-card.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["stzh-servicecard.css"]
+      "$": ["stzh-card.css"]
     };
   }
   static get properties() {
@@ -234,12 +293,12 @@ export class StzhServicecard {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "StzhServicecardLocalizedText",
-          "resolved": "StzhLocaleComponent & { actionsPopoverLabel: string; actionMoveUp: string; actionMoveDown: string; actionAdd: string; actionRemove: string; }",
+          "original": "StzhCardLocalizedText",
+          "resolved": "StzhLocaleComponent & { select: string; actionsPopoverLabel: string; actionMoveUp: string; actionMoveDown: string; actionAdd: string; actionRemove: string; }",
           "references": {
-            "StzhServicecardLocalizedText": {
+            "StzhCardLocalizedText": {
               "location": "import",
-              "path": "./stzh-servicecard.localization"
+              "path": "./stzh-card.localization"
             }
           }
         },
@@ -304,6 +363,96 @@ export class StzhServicecard {
         "reflect": true,
         "defaultValue": "false"
       },
+      "selectable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether card is selectable"
+        },
+        "attribute": "selectable",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether card is checked (if card is selectable)"
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the input element (if card is selectable)"
+        },
+        "attribute": "name",
+        "reflect": true,
+        "defaultValue": "\"\""
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the input element (if card is selectable)"
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the element is disabled or not (if card is selectable)"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "heading": {
         "type": "string",
         "mutable": false,
@@ -340,14 +489,14 @@ export class StzhServicecard {
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "actions": {
+      "headerActions": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string | StzhServiceCardAction[]",
-          "resolved": "StzhServiceCardAction[] | string",
+          "original": "string | StzhCardHeaderAction[]",
+          "resolved": "StzhCardHeaderAction[] | string",
           "references": {
-            "StzhServiceCardAction": {
+            "StzhCardHeaderAction": {
               "location": "import",
               "path": "../../index"
             }
@@ -357,9 +506,32 @@ export class StzhServicecard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Card actions"
+          "text": "Card header actions"
         },
-        "attribute": "actions",
+        "attribute": "header-actions",
+        "reflect": false,
+        "defaultValue": "[]"
+      },
+      "footerActions": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | StzhActionsetItem[]",
+          "resolved": "StzhActionsetItem[] | string",
+          "references": {
+            "StzhActionsetItem": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Card footer actions"
+        },
+        "attribute": "footer-actions",
         "reflect": false,
         "defaultValue": "[]"
       },
@@ -399,61 +571,43 @@ export class StzhServicecard {
         "reflect": true,
         "defaultValue": "\"default\""
       },
-      "middleVariant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"to-right\" | \"to-left\"",
-          "resolved": "\"to-left\" | \"to-right\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Middle column position variant (positioning behaviour on tablet)"
-        },
-        "attribute": "middle-variant",
-        "reflect": true,
-        "defaultValue": "\"to-right\""
-      },
-      "middleVerticalSpacing": {
-        "type": "string",
+      "sortableDisabled": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "\"default\" | \"none\"",
-          "resolved": "\"default\" | \"none\"",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set middle column vertical spacing"
+          "text": "Whether sorting should be disabled"
         },
-        "attribute": "middle-vertical-spacing",
+        "attribute": "sortable-disabled",
         "reflect": true,
-        "defaultValue": "\"default\""
+        "defaultValue": "false"
       },
-      "rightVerticalSpacing": {
-        "type": "string",
+      "collapsible": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "\"default\" | \"none\"",
-          "resolved": "\"default\" | \"none\"",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set right column vertical spacing"
+          "text": "Whether card is collapsible"
         },
-        "attribute": "right-vertical-spacing",
+        "attribute": "collapsible",
         "reflect": true,
-        "defaultValue": "\"default\""
+        "defaultValue": "false"
       },
-      "sortableDisabled": {
+      "hideHeaderBorder": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -465,13 +619,13 @@ export class StzhServicecard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether sorting should be disabled"
+          "text": "Whether to hide header separation border"
         },
-        "attribute": "sortable-disabled",
+        "attribute": "hide-header-border",
         "reflect": true,
         "defaultValue": "false"
       },
-      "collapsible": {
+      "hideFooterBorder": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -483,9 +637,9 @@ export class StzhServicecard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether card is collapsible"
+          "text": "Whether to hide footer separation border"
         },
-        "attribute": "collapsible",
+        "attribute": "hide-footer-border",
         "reflect": true,
         "defaultValue": "false"
       },
@@ -521,10 +675,10 @@ export class StzhServicecard {
           "text": "Collapse event"
         },
         "complexType": {
-          "original": "StzhServicecardCollapseEvent",
-          "resolved": "{ component: \"stzh-servicecard\"; collapsed: boolean; }",
+          "original": "StzhCardCollapseEvent",
+          "resolved": "{ component: \"stzh-card\"; collapsed: boolean; }",
           "references": {
-            "StzhServicecardCollapseEvent": {
+            "StzhCardCollapseEvent": {
               "location": "import",
               "path": "../../index"
             }
@@ -541,10 +695,10 @@ export class StzhServicecard {
           "text": "Subtitle click event"
         },
         "complexType": {
-          "original": "StzhServicecardSubtitleClickEvent",
-          "resolved": "{ component: \"stzh-servicecard\"; }",
+          "original": "StzhCardSubtitleClickEvent",
+          "resolved": "{ component: \"stzh-card\"; }",
           "references": {
-            "StzhServicecardSubtitleClickEvent": {
+            "StzhCardSubtitleClickEvent": {
               "location": "import",
               "path": "../../index"
             }
@@ -561,30 +715,30 @@ export class StzhServicecard {
           "text": "Star click event"
         },
         "complexType": {
-          "original": "StzhServicecardStarClickEvent",
-          "resolved": "{ component: \"stzh-servicecard\"; starred: boolean; }",
+          "original": "StzhCardStarClickEvent",
+          "resolved": "{ component: \"stzh-card\"; starred: boolean; }",
           "references": {
-            "StzhServicecardStarClickEvent": {
+            "StzhCardStarClickEvent": {
               "location": "import",
               "path": "../../index"
             }
           }
         }
       }, {
-        "method": "stzhActionClick",
-        "name": "stzhActionClick",
+        "method": "stzhHeaderActionClick",
+        "name": "stzhHeaderActionClick",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Action click event"
+          "text": "Header action click event"
         },
         "complexType": {
-          "original": "StzhServicecardActionClickEvent",
-          "resolved": "{ component: \"stzh-servicecard\"; action: StzhServiceCardAction; }",
+          "original": "StzhCardHeaderActionClickEvent",
+          "resolved": "{ component: \"stzh-card\"; action: StzhCardHeaderAction; }",
           "references": {
-            "StzhServicecardActionClickEvent": {
+            "StzhCardHeaderActionClickEvent": {
               "location": "import",
               "path": "../../index"
             }
@@ -598,8 +752,11 @@ export class StzhServicecard {
         "propName": "subtitle",
         "methodName": "subtitleWatcher"
       }, {
-        "propName": "actions",
-        "methodName": "actionsWatcher"
+        "propName": "headerActions",
+        "methodName": "headerActionsWatcher"
+      }, {
+        "propName": "footerActions",
+        "methodName": "footerActionsWatcher"
       }];
   }
   static get listeners() {
@@ -607,7 +764,7 @@ export class StzhServicecard {
         "name": "resize",
         "method": "handleResize",
         "target": "window",
-        "capture": true,
+        "capture": false,
         "passive": true
       }];
   }