npm - @oiz/stzh-components - Versions diffs - 1.5.0-alpha → 2.0.0 - Mend

@oiz/stzh-components 1.5.0-alpha → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (515) hide show

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

@@ -1,614 +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 = () => {
-      if (!this.mainElement) {
-        return;
-      }
-      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) {
-        const element = this.findSortableChildElement();
-        sortable.moveItem(element, "up");
-      }
-    };
-    this.arrowDownClick = () => {
-      const sortable = this.element.closest("stzh-sortable");
-      if (sortable) {
-        const element = this.findSortableChildElement();
-        sortable.moveItem(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;
-    }
-  }
-  findSortableChildElement() {
-    const sortable = this.element.closest("stzh-sortable");
-    if (sortable) {
-      let element = this.element;
-      let sortableContainer = null;
-      if (typeof sortable.container === "function") {
-        sortableContainer = sortable.container();
-      }
-      else {
-        sortableContainer = sortable.container;
-      }
-      while (element.parentElement !== sortableContainer) {
-        element = element.parentElement;
-      }
-      return element;
-    }
-  }
-  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 DELETED Viewed

@@ -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
-};