@oiz/stzh-components 0.0.1-pretest → 1.4.0-npmjstest

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

@@ -1,592 +1,592 @@
-import { Host, h, Fragment, forceUpdate } from "@stencil/core";
-import { hasSlot } 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
- */
-export class StzhServicecard {
-  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;
-    /** Heading */
-    this.heading = "";
-    /** Subtitle */
-    this.subtitle = "";
-    this._subtitles = [];
-    /** Card actions */
-    this.actions = [];
-    /** 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 movement menu items should be shown */
-    this.hideMovementActions = false;
-    this.nodeChange = (entries) => {
-      let changeInSlot = false;
-      entries.forEach((entry) => {
-        if (entry.target.closest('[slot]') || entry.target.hasAttribute('slot')) {
-          changeInSlot = true;
-        }
-      });
-      if (changeInSlot) {
-        forceUpdate(this.element);
-      }
-    };
-    this.update = () => {
-      this.mainElement.classList.remove("stzh-servicecard--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.headerClick = (event) => {
-      if (!this.collapsible) {
-        return;
-      }
-      const filterTags = ["stzh-popover", "stzh-tooltip", "button", "a", "input", "select", "textarea", "iframe", "details", "label", "area"];
-      const composedPathTags = event.composedPath().map(element => { var _a; return (_a = element.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase(); });
-      const found = composedPathTags.some(r => filterTags.includes(r));
-      if (!found) {
-        this.collapsed = !this.collapsed;
-        this.stzhCollapse.emit({
-          component: "stzh-servicecard",
-          collapsed: this.collapsed
-        });
-      }
-    };
-    this.subtitleClick = () => {
-      if (this.subtitleInteractive) {
-        this.stzhSubtitleClick.emit({
-          component: "stzh-servicecard"
-        });
-      }
-    };
-    this.starToggleClick = () => {
-      this.stzhStarClick.emit({
-        component: "stzh-servicecard",
-        starred: this.starred
-      });
-    };
-    this.actionClick = (action) => {
-      this.stzhActionClick.emit({
-        component: "stzh-servicecard",
-        action
-      });
-    };
-    this.arrowUpClick = () => {
-      const sortable = this.element.closest("stzh-sortable");
-      if (sortable) {
-        sortable.moveItem(this.element, "up");
-      }
-    };
-    this.arrowDownClick = () => {
-      const sortable = this.element.closest("stzh-sortable");
-      if (sortable) {
-        sortable.moveItem(this.element, "down");
-      }
-    };
-  }
-  handleResize() {
-    if (this.debounceResize) {
-      window.cancelAnimationFrame(this.debounceResize);
-    }
-    this.debounceResize = requestAnimationFrame(this.update);
-  }
-  subtitleWatcher(newValue) {
-    if (typeof newValue === "string") {
-      try {
-        this._subtitles = JSON.parse(newValue);
-      }
-      catch (err) {
-        this._subtitles = [newValue];
-      }
-    }
-    else {
-      this._subtitles = newValue;
-    }
-  }
-  actionsWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._actions = JSON.parse(newValue);
-    }
-    else {
-      this._actions = newValue;
-    }
-  }
-  async componentWillLoad() {
-    this.subtitleWatcher(this.subtitle);
-    this.actionsWatcher(this.actions);
-    if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, "servicecard");
-    }
-  }
-  connectedCallback() {
-    this.observer = new MutationObserver(this.nodeChange);
-    this.observer.observe(this.element, {
-      childList: true,
-      subtree: true
-    });
-  }
-  disconnectedCallback() {
-    this.observer.disconnect();
-  }
-  render() {
-    const leftUsed = hasSlot(this.element, "left");
-    const middleUsed = hasSlot(this.element, "middle");
-    const rightUsed = hasSlot(this.element, "right");
-    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,
-    };
-    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,
-        "is-button": true,
-        "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: {
-        "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" }))))));
-  }
-  static get is() { return "stzh-servicecard"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["stzh-servicecard.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["stzh-servicecard.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "localization": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "StzhServicecardLocalizedText",
-          "resolved": "StzhLocaleComponent & { actionsPopoverLabel: string; actionMoveUp: string; actionMoveDown: string; actionAdd: string; actionRemove: string; }",
-          "references": {
-            "StzhServicecardLocalizedText": {
-              "location": "import",
-              "path": "./stzh-servicecard.localization"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Translation strings"
-        }
-      },
-      "collapsed": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether card is collapsed or not"
-        },
-        "attribute": "collapsed",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "starred": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether card was starred"
-        },
-        "attribute": "starred",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "starrable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether card star is displayed"
-        },
-        "attribute": "starrable",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "heading": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Heading"
-        },
-        "attribute": "heading",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "subtitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | string[]",
-          "resolved": "string | string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Subtitle"
-        },
-        "attribute": "subtitle",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "actions": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | StzhServiceCardAction[]",
-          "resolved": "StzhServiceCardAction[] | string",
-          "references": {
-            "StzhServiceCardAction": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Card actions"
-        },
-        "attribute": "actions",
-        "reflect": false,
-        "defaultValue": "[]"
-      },
-      "subtitleInteractive": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click"
-        },
-        "attribute": "subtitle-interactive",
-        "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\""
-      },
-      "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",
-        "mutable": false,
-        "complexType": {
-          "original": "\"default\" | \"none\"",
-          "resolved": "\"default\" | \"none\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set middle column vertical spacing"
-        },
-        "attribute": "middle-vertical-spacing",
-        "reflect": true,
-        "defaultValue": "\"default\""
-      },
-      "rightVerticalSpacing": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"default\" | \"none\"",
-          "resolved": "\"default\" | \"none\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set right column vertical spacing"
-        },
-        "attribute": "right-vertical-spacing",
-        "reflect": true,
-        "defaultValue": "\"default\""
-      },
-      "sortableDisabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether sorting should be disabled"
-        },
-        "attribute": "sortable-disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "collapsible": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether card is collapsible"
-        },
-        "attribute": "collapsible",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "hideMovementActions": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether movement menu items should be shown"
-        },
-        "attribute": "hide-movement-actions",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "stzhCollapse",
-        "name": "stzhCollapse",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Collapse event"
-        },
-        "complexType": {
-          "original": "StzhServicecardCollapseEvent",
-          "resolved": "{ component: \"stzh-servicecard\"; collapsed: boolean; }",
-          "references": {
-            "StzhServicecardCollapseEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhSubtitleClick",
-        "name": "stzhSubtitleClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Subtitle click event"
-        },
-        "complexType": {
-          "original": "StzhServicecardSubtitleClickEvent",
-          "resolved": "{ component: \"stzh-servicecard\"; }",
-          "references": {
-            "StzhServicecardSubtitleClickEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhStarClick",
-        "name": "stzhStarClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Star click event"
-        },
-        "complexType": {
-          "original": "StzhServicecardStarClickEvent",
-          "resolved": "{ component: \"stzh-servicecard\"; starred: boolean; }",
-          "references": {
-            "StzhServicecardStarClickEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhActionClick",
-        "name": "stzhActionClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Action click event"
-        },
-        "complexType": {
-          "original": "StzhServicecardActionClickEvent",
-          "resolved": "{ component: \"stzh-servicecard\"; action: StzhServiceCardAction; }",
-          "references": {
-            "StzhServicecardActionClickEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "subtitle",
-        "methodName": "subtitleWatcher"
-      }, {
-        "propName": "actions",
-        "methodName": "actionsWatcher"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": true,
-        "passive": true
-      }];
-  }
-}
+import { Host, h, Fragment, forceUpdate } from "@stencil/core";
+import { hasSlot } 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
+ */
+export class StzhServicecard {
+  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;
+    /** Heading */
+    this.heading = "";
+    /** Subtitle */
+    this.subtitle = "";
+    this._subtitles = [];
+    /** Card actions */
+    this.actions = [];
+    /** 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 movement menu items should be shown */
+    this.hideMovementActions = false;
+    this.nodeChange = (entries) => {
+      let changeInSlot = false;
+      entries.forEach((entry) => {
+        if (entry.target.closest('[slot]') || entry.target.hasAttribute('slot')) {
+          changeInSlot = true;
+        }
+      });
+      if (changeInSlot) {
+        forceUpdate(this.element);
+      }
+    };
+    this.update = () => {
+      this.mainElement.classList.remove("stzh-servicecard--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.headerClick = (event) => {
+      if (!this.collapsible) {
+        return;
+      }
+      const filterTags = ["stzh-popover", "stzh-tooltip", "button", "a", "input", "select", "textarea", "iframe", "details", "label", "area"];
+      const composedPathTags = event.composedPath().map(element => { var _a; return (_a = element.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase(); });
+      const found = composedPathTags.some(r => filterTags.includes(r));
+      if (!found) {
+        this.collapsed = !this.collapsed;
+        this.stzhCollapse.emit({
+          component: "stzh-servicecard",
+          collapsed: this.collapsed
+        });
+      }
+    };
+    this.subtitleClick = () => {
+      if (this.subtitleInteractive) {
+        this.stzhSubtitleClick.emit({
+          component: "stzh-servicecard"
+        });
+      }
+    };
+    this.starToggleClick = () => {
+      this.stzhStarClick.emit({
+        component: "stzh-servicecard",
+        starred: this.starred
+      });
+    };
+    this.actionClick = (action) => {
+      this.stzhActionClick.emit({
+        component: "stzh-servicecard",
+        action
+      });
+    };
+    this.arrowUpClick = () => {
+      const sortable = this.element.closest("stzh-sortable");
+      if (sortable) {
+        sortable.moveItem(this.element, "up");
+      }
+    };
+    this.arrowDownClick = () => {
+      const sortable = this.element.closest("stzh-sortable");
+      if (sortable) {
+        sortable.moveItem(this.element, "down");
+      }
+    };
+  }
+  handleResize() {
+    if (this.debounceResize) {
+      window.cancelAnimationFrame(this.debounceResize);
+    }
+    this.debounceResize = requestAnimationFrame(this.update);
+  }
+  subtitleWatcher(newValue) {
+    if (typeof newValue === "string") {
+      try {
+        this._subtitles = JSON.parse(newValue);
+      }
+      catch (err) {
+        this._subtitles = [newValue];
+      }
+    }
+    else {
+      this._subtitles = newValue;
+    }
+  }
+  actionsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._actions = JSON.parse(newValue);
+    }
+    else {
+      this._actions = newValue;
+    }
+  }
+  async componentWillLoad() {
+    this.subtitleWatcher(this.subtitle);
+    this.actionsWatcher(this.actions);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "servicecard");
+    }
+  }
+  connectedCallback() {
+    this.observer = new MutationObserver(this.nodeChange);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    const leftUsed = hasSlot(this.element, "left");
+    const middleUsed = hasSlot(this.element, "middle");
+    const rightUsed = hasSlot(this.element, "right");
+    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,
+    };
+    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,
+        "is-button": true,
+        "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: {
+        "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" }))))));
+  }
+  static get is() { return "stzh-servicecard"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-servicecard.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-servicecard.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhServicecardLocalizedText",
+          "resolved": "StzhLocaleComponent & { actionsPopoverLabel: string; actionMoveUp: string; actionMoveDown: string; actionAdd: string; actionRemove: string; }",
+          "references": {
+            "StzhServicecardLocalizedText": {
+              "location": "import",
+              "path": "./stzh-servicecard.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
+      "collapsed": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether card is collapsed or not"
+        },
+        "attribute": "collapsed",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "starred": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether card was starred"
+        },
+        "attribute": "starred",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "starrable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether card star is displayed"
+        },
+        "attribute": "starrable",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading"
+        },
+        "attribute": "heading",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "subtitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Subtitle"
+        },
+        "attribute": "subtitle",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "actions": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | StzhServiceCardAction[]",
+          "resolved": "StzhServiceCardAction[] | string",
+          "references": {
+            "StzhServiceCardAction": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Card actions"
+        },
+        "attribute": "actions",
+        "reflect": false,
+        "defaultValue": "[]"
+      },
+      "subtitleInteractive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click"
+        },
+        "attribute": "subtitle-interactive",
+        "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\""
+      },
+      "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",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"none\"",
+          "resolved": "\"default\" | \"none\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set middle column vertical spacing"
+        },
+        "attribute": "middle-vertical-spacing",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "rightVerticalSpacing": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"none\"",
+          "resolved": "\"default\" | \"none\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set right column vertical spacing"
+        },
+        "attribute": "right-vertical-spacing",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "sortableDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether sorting should be disabled"
+        },
+        "attribute": "sortable-disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "collapsible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether card is collapsible"
+        },
+        "attribute": "collapsible",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "hideMovementActions": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether movement menu items should be shown"
+        },
+        "attribute": "hide-movement-actions",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhCollapse",
+        "name": "stzhCollapse",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Collapse event"
+        },
+        "complexType": {
+          "original": "StzhServicecardCollapseEvent",
+          "resolved": "{ component: \"stzh-servicecard\"; collapsed: boolean; }",
+          "references": {
+            "StzhServicecardCollapseEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhSubtitleClick",
+        "name": "stzhSubtitleClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Subtitle click event"
+        },
+        "complexType": {
+          "original": "StzhServicecardSubtitleClickEvent",
+          "resolved": "{ component: \"stzh-servicecard\"; }",
+          "references": {
+            "StzhServicecardSubtitleClickEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhStarClick",
+        "name": "stzhStarClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Star click event"
+        },
+        "complexType": {
+          "original": "StzhServicecardStarClickEvent",
+          "resolved": "{ component: \"stzh-servicecard\"; starred: boolean; }",
+          "references": {
+            "StzhServicecardStarClickEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhActionClick",
+        "name": "stzhActionClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Action click event"
+        },
+        "complexType": {
+          "original": "StzhServicecardActionClickEvent",
+          "resolved": "{ component: \"stzh-servicecard\"; action: StzhServiceCardAction; }",
+          "references": {
+            "StzhServicecardActionClickEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "subtitle",
+        "methodName": "subtitleWatcher"
+      }, {
+        "propName": "actions",
+        "methodName": "actionsWatcher"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": true,
+        "passive": true
+      }];
+  }
+}