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

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

@@ -1,153 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { fetchTranslations } from "../../utils/translation-utils";
-/**
- * @slot - Slot for `stzh-servicecard` elements
- * @slot description - Slot for description
- */
-export class StzhServicecardList {
-  constructor() {
-    /** Whether sorting should be disabled */
-    this.sortableDisabled = false;
-    /** Whether collapse/expand toggle link */
-    this.showToggleLink = false;
-    /** HTML attribute that is used by the `toArray()` of sortable method */
-    this.sortableDataIdAttribute = "data-id";
-    this.allCollapsed = false;
-    this.collapseClick = () => {
-      const cards = Array.from(this.element.querySelectorAll("stzh-servicecard"));
-      cards.forEach(card => {
-        if (card.collapsible) {
-          card.collapsed = !this.allCollapsed;
-        }
-      });
-      this.allCollapsed = !this.allCollapsed;
-    };
-    this.updateCollapsedState = () => {
-      const cards = Array.from(this.element.querySelectorAll("stzh-servicecard"));
-      this.allCollapsed = !cards.some(card => !card.collapsed);
-    };
-  }
-  collapseListener() {
-    this.updateCollapsedState();
-  }
-  async componentWillLoad() {
-    if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, "servicecard-list");
-    }
-  }
-  componentDidLoad() {
-    this.updateCollapsedState();
-  }
-  render() {
-    const classes = {
-      "stzh-servicecard-list": true
-    };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-servicecard-list__header" }, h("div", { class: "stzh-servicecard-list__description" }, h("slot", { name: "description" })), this.showToggleLink &&
-      h("stzh-link", { class: "stzh-servicecard-list__switch", icon: this.allCollapsed ? "list-expanded" : "list-shrinked", label: this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll, onClick: this.collapseClick })), h("stzh-sortable", { disabled: this.sortableDisabled, dataIdAttribute: this.sortableDataIdAttribute }, h("div", { class: "stzh-servicecard-list__cards", role: "list" }, h("slot", null))))));
-  }
-  static get is() { return "stzh-servicecard-list"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["stzh-servicecard-list.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["stzh-servicecard-list.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "localization": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "StzhServicecardListLocalizedText",
-          "resolved": "StzhLocaleComponent & { expandAll: string; collapseAll: string; }",
-          "references": {
-            "StzhServicecardListLocalizedText": {
-              "location": "import",
-              "path": "./stzh-servicecard-list.localization"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Translation strings"
-        }
-      },
-      "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": false,
-        "defaultValue": "false"
-      },
-      "showToggleLink": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether collapse/expand toggle link"
-        },
-        "attribute": "show-toggle-link",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "sortableDataIdAttribute": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "HTML attribute that is used by the `toArray()` of sortable method"
-        },
-        "attribute": "sortable-data-id-attribute",
-        "reflect": false,
-        "defaultValue": "\"data-id\""
-      }
-    };
-  }
-  static get states() {
-    return {
-      "allCollapsed": {}
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get listeners() {
-    return [{
-        "name": "stzhCollapse",
-        "method": "collapseListener",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}

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

@@ -1,115 +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/ServicecardList',
-  component: 'stzh-servicecard-list',
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component: readme
-      }
-    },
-    design: {
-      type: 'figma',
-      url: getFigmaLink('servicecard-list'),
-      allowFullscreen: true
-    }
-  },
-  decorators: [
-    withDesign
-  ]
-};
-
-const actions = `[
-  {
-    "id": "message",
-    "onlyCollapseText": true,
-    "icon": "mail",
-    "badge": "3",
-    "label": "Messages"
-  }
-]`;
-
-const actions2 = `[
-  {
-    "id": "add",
-    "icon": "plus",
-    "label": "Add address"
-  },
-  {
-    "id": "edit",
-    "icon": "edit",
-    "label": "Edit"
-  },
-  {
-    "id": "delete",
-    "icon": "delete",
-    "label": "Remove"
-  },
-  {
-    "id": "message",
-    "onlyCollapseText": true,
-    "icon": "mail",
-    "badge": "3",
-    "label": "Messages"
-  }
-]`;
-
-const Template = (args) => (
-  <stzh-servicecard-list {...args}>
-    <stzh-text slot="description">
-      Services are shown here, which you marked with <stzh-icon name="star-filled"></stzh-icon>
-    </stzh-text>
-    <stzh-servicecard collapsible starrable heading="Lorem ipsum 1" subtitle="Dolor si 1" actions={actions}>
-      <div slot="left">Content Left</div>
-      <div slot="right">Content Right</div>
-    </stzh-servicecard>
-    <stzh-servicecard collapsible heading="Lorem ipsum 2" subtitle='["Dolor si 2", "Dolor si 2.1", "Dolor si 2.2"]' subtitle-interactive actions={actions2}>
-      <div slot="left">Content Left</div>
-      <table slot="middle">
-        <tr>
-          <th>Cell Label</th>
-          <td>Cell Value</td>
-        </tr>
-        <tr>
-          <th>Cell Label</th>
-          <td>Cell Value</td>
-        </tr>
-        <tr>
-          <th>Cell Label</th>
-          <td>Cell Value</td>
-        </tr>
-      </table>
-      <div slot="right">Content Right</div>
-    </stzh-servicecard>
-    <stzh-servicecard collapsible starrable heading="Lorem ipsum 3" subtitle="Dolor si 3">
-      <div slot="left">Content Left</div>
-      <stzh-button label="Button Right 1" slot="right" fullwidth></stzh-button>
-      <stzh-popover slot="right">
-        <stzh-button label="Button Right 2" fullwidth icon="angle-up" icon-position="right"></stzh-button>
-        <stzh-menu slot="content">
-          <stzh-menu-item label="Test"></stzh-menu-item>
-        </stzh-menu>
-      </stzh-popover>
-    </stzh-servicecard>
-    <stzh-servicecard collapsible starrable heading="Lorem ipsum 4">
-      <div slot="left">Content Left</div>
-      <stzh-section slot="middle">
-        Content Middle Section 1
-      </stzh-section>
-      <stzh-section slot="middle">
-        Content Middle Section 2
-      </stzh-section>
-      <stzh-button label="Button Right" slot="right" fullwidth></stzh-button>
-    </stzh-servicecard>
-  </stzh-servicecard-list>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  'show-toggle-Link': true
-};

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

@@ -1,99 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { f as fetchTranslations } from './translation-utils.js';
-import { d as defineCustomElement$5 } from './stzh-badge2.js';
-import { d as defineCustomElement$4 } from './stzh-icon2.js';
-import { d as defineCustomElement$3 } from './stzh-link2.js';
-import { d as defineCustomElement$2 } from './stzh-sortable2.js';
-
-const stzhServicecardListCss = ".sc-stzh-servicecard-list-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-servicecard-list-h{display:none}.sc-stzh-servicecard-list-h *.sc-stzh-servicecard-list,.sc-stzh-servicecard-list-h *.sc-stzh-servicecard-list::before,.sc-stzh-servicecard-list-h *.sc-stzh-servicecard-list::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>*:not(:last-child):not([slot]){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>*:not(:last-child):not([slot]){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>*:not(:last-child):not([slot]){margin-bottom:var(--stzh-space-xlarge)}}.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>[slot=description] stzh-icon{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>stzh-text[slot=description]{--color:inherit}.stzh-servicecard-list__header.sc-stzh-servicecard-list{margin-bottom:var(--stzh-space-medium);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}@media screen and (min-width: 1024px){.stzh-servicecard-list__header.sc-stzh-servicecard-list{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-servicecard-list__header.sc-stzh-servicecard-list{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 800px){.stzh-servicecard-list__header.sc-stzh-servicecard-list{-ms-flex-direction:row;flex-direction:row}}.stzh-servicecard-list__description.sc-stzh-servicecard-list{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);color:var(--stzh-base-lead-color)}@media screen and (min-width: 1024px){.stzh-servicecard-list__description.sc-stzh-servicecard-list{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-servicecard-list__description.sc-stzh-servicecard-list:not(:empty){margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 800px){.stzh-servicecard-list__description.sc-stzh-servicecard-list:not(:empty){margin-bottom:0}}.stzh-servicecard-list__switch.sc-stzh-servicecard-list{--color:var(--stzh-base-lead-color);-ms-flex-item-align:end;align-self:end}";
-
-const StzhServicecardList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    /** Whether sorting should be disabled */
-    this.sortableDisabled = false;
-    /** Whether collapse/expand toggle link */
-    this.showToggleLink = false;
-    /** HTML attribute that is used by the `toArray()` of sortable method */
-    this.sortableDataIdAttribute = "data-id";
-    this.allCollapsed = false;
-    this.collapseClick = () => {
-      const cards = Array.from(this.element.querySelectorAll("stzh-servicecard"));
-      cards.forEach(card => {
-        if (card.collapsible) {
-          card.collapsed = !this.allCollapsed;
-        }
-      });
-      this.allCollapsed = !this.allCollapsed;
-    };
-    this.updateCollapsedState = () => {
-      const cards = Array.from(this.element.querySelectorAll("stzh-servicecard"));
-      this.allCollapsed = !cards.some(card => !card.collapsed);
-    };
-  }
-  collapseListener() {
-    this.updateCollapsedState();
-  }
-  async componentWillLoad() {
-    if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, "servicecard-list");
-    }
-  }
-  componentDidLoad() {
-    this.updateCollapsedState();
-  }
-  render() {
-    const classes = {
-      "stzh-servicecard-list": true
-    };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-servicecard-list__header" }, h("div", { class: "stzh-servicecard-list__description" }, h("slot", { name: "description" })), this.showToggleLink &&
-      h("stzh-link", { class: "stzh-servicecard-list__switch", icon: this.allCollapsed ? "list-expanded" : "list-shrinked", label: this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll, onClick: this.collapseClick })), h("stzh-sortable", { disabled: this.sortableDisabled, dataIdAttribute: this.sortableDataIdAttribute }, h("div", { class: "stzh-servicecard-list__cards", role: "list" }, h("slot", null))))));
-  }
-  get element() { return this; }
-  static get style() { return stzhServicecardListCss; }
-}, [6, "stzh-servicecard-list", {
-    "localization": [16],
-    "sortableDisabled": [4, "sortable-disabled"],
-    "showToggleLink": [516, "show-toggle-link"],
-    "sortableDataIdAttribute": [1, "sortable-data-id-attribute"],
-    "allCollapsed": [32]
-  }, [[0, "stzhCollapse", "collapseListener"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["stzh-servicecard-list", "stzh-badge", "stzh-icon", "stzh-link", "stzh-sortable"];
-  components.forEach(tagName => { switch (tagName) {
-    case "stzh-servicecard-list":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, StzhServicecardList$1);
-      }
-      break;
-    case "stzh-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "stzh-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "stzh-link":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "stzh-sortable":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const StzhServicecardList = StzhServicecardList$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { StzhServicecardList, defineCustomElement };