@oiz/stzh-components 0.0.0-pretest

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

@@ -0,0 +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
+      }];
+  }
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,73 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Servicecard',
+  component: 'stzh-servicecard',
+  parameters: {
+    actions: {
+      handles: ['stzhCollapse', 'stzhStarClick', 'stzhSubtitleClick', 'stzhActionClick']
+    },
+    layout: 'padded',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('servicecard'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-servicecard {...args}>
+    <div slot="left">Content Left</div>
+    <div slot="right">Content Right</div>
+  </stzh-servicecard>
+);
+
+const TemplateThreeColumn = (args) => (
+  <stzh-servicecard {...args}>
+    <div slot="left">Content Left</div>
+    <div slot="middle">Content Middle</div>
+    <div slot="right">Content Right</div>
+  </stzh-servicecard>
+);
+
+const actions = `[
+  {
+    "id": "delete",
+    "icon": "delete",
+    "label": "Action"
+  },
+  {
+    "id": "message",
+    "onlyCollapseText": true,
+    "icon": "mail",
+    "badge": "3",
+    "label": "Messages"
+  }
+]`;
+
+export const TwoColumn = Template.bind({});
+TwoColumn.args = {
+  heading: "Lorem ipsum",
+  subtitle: "Dolor si",
+  actions
+};
+
+export const ThreeColumn = TemplateThreeColumn.bind({});
+ThreeColumn.args = {
+  heading: "Lorem ipsum",
+  subtitle: "Dolor si",
+  actions
+};
+