@oiz/stzh-components 1.4.0-npmjstest → 2.0.0-beta

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

@@ -1,592 +0,0 @@
-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.stories.js

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