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

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

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

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

@@ -0,0 +1,137 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Card',
+  component: 'stzh-card',
+  parameters: {
+    actions: {
+      handles: ['stzhCollapse', 'stzhStarClick', 'stzhSubtitleClick', 'stzhActionClick']
+    },
+    layout: 'padded',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('card'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-card {...args}>
+    <img slot="image" src="media/images/example.jpg" loading="lazy" alt="Example image" />
+    <div slot="content">Card Content</div>
+    <stzh-status
+      slot="meta"
+      label="complete"
+      type="success"
+      percent="50"
+    ></stzh-status>
+  </stzh-card>
+);
+
+const TemplateSelectable = (args) => (
+  <stzh-card {...args}>
+    <img slot="image" src="media/images/example.jpg" loading="lazy" alt="Example image" />
+    <div slot="content">Card Content</div>
+    <stzh-chip slot="meta" label="Tag"></stzh-chip>
+  </stzh-card>
+);
+
+const TemplateStarrable = (args) => (
+  <stzh-card {...args}>
+    <div slot="content">Card Content</div>
+  </stzh-card>
+);
+
+const headerActions = `[
+  {
+    "id": "delete",
+    "icon": "delete",
+    "label": "Action"
+  },
+  {
+    "id": "message",
+    "icon": "mail",
+    "badge": "3",
+    "label": "Messages",
+    "onlyCollapseText": true
+  }
+]`;
+
+const footerActions = `[
+  {
+    "id": "action-1",
+    "icon": "alarm-bell",
+    "label": "Lorem",
+    "badge": "3"
+  },
+  {
+    "id": "action-2",
+    "icon": "cart",
+    "label": "Ipsum"
+  },
+  {
+    "id": "action-3",
+    "icon": "delete",
+    "label": "Dolor"
+  },
+  {
+    "id": "action-4",
+    "icon": "mail",
+    "label": "Lorem"
+  },
+  {
+    "id": "action-5",
+    "icon": "clock",
+    "label": "Ipsum"
+  }
+]`;
+
+export const Default = Template.bind({});
+Default.args = {
+  heading: 'Lorem ipsum',
+  subtitle: 'Dolor si',
+  status: {
+    label: 'Test'
+  },
+  'header-actions': headerActions,
+  'footer-actions': `[
+    {
+      "id": "action-1",
+      "icon": "arrow-right",
+      "label": "Lorem",
+      "variant": "primary",
+      "iconPosition": "right"
+    }
+  ]`
+};
+
+export const Selectable = TemplateSelectable.bind({});
+Selectable.args = {
+  heading: 'Lorem ipsum',
+  subtitle: 'Dolor si',
+  selectable: true,
+  name: 'card',
+  value: '1',
+  'header-actions': headerActions
+};
+
+export const Starrable = TemplateStarrable.bind({});
+Starrable.args = {
+  heading: 'Lorem ipsum',
+  subtitle: 'Dolor si',
+  starrable: true,
+  'header-actions': headerActions,
+  'footer-actions': footerActions
+};

package/dist/collection/components/{stzh-servicecard-list/stzh-servicecard-list.css → stzh-card-list/stzh-card-list.css}

@@ -114,7 +114,7 @@
   --color: inherit;
 }
 
-.stzh-servicecard-list__header {
+.stzh-card-list__header {
   margin-bottom: var(--stzh-space-medium);
   display: flex;
   justify-content: space-between;
@@ -122,42 +122,42 @@
   align-items: flex-start;
 }
 @media screen and (min-width: 1024px) {
-  .stzh-servicecard-list__header {
+  .stzh-card-list__header {
     margin-bottom: var(--stzh-space-large);
   }
 }
 @media screen and (min-width: 1260px) {
-  .stzh-servicecard-list__header {
+  .stzh-card-list__header {
     margin-bottom: var(--stzh-space-xlarge);
   }
 }
 @media screen and (min-width: 800px) {
-  .stzh-servicecard-list__header {
+  .stzh-card-list__header {
     flex-direction: row;
   }
 }
-.stzh-servicecard-list__description {
+.stzh-card-list__description {
   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 {
+  .stzh-card-list__description {
     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:not(:empty) {
+.stzh-card-list__description:not(:empty) {
   margin-bottom: var(--stzh-space-xsmall);
 }
 @media screen and (min-width: 800px) {
-  .stzh-servicecard-list__description:not(:empty) {
+  .stzh-card-list__description:not(:empty) {
     margin-bottom: 0;
   }
 }
-.stzh-servicecard-list__switch {
+.stzh-card-list__switch {
   --color: var(--stzh-base-lead-color);
   align-self: end;
 }

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

@@ -0,0 +1,224 @@
+import { Host, h } from "@stencil/core";
+import { cloneElement } from "../../utils/utils";
+import { fetchTranslations } from "../../utils/translation-utils";
+/**
+ * @slot - Slot for `stzh-card` elements
+ * @slot description - Slot for description
+ */
+export class StzhCardList {
+  constructor() {
+    /** Whether collapse/expand toggle link */
+    this.showToggleLink = false;
+    /** Whether sorting should be disabled */
+    this.sortableDisabled = false;
+    /** HTML attribute that is used by the `toArray()` of sortable method */
+    this.sortableDataIdAttribute = "data-id";
+    /** Algorithm how the ghost element will be cloned */
+    this.sortableGhostClone = (dragElement) => {
+      const [clonedElement, clonedStzhElement, originalStzhElement] = cloneElement(dragElement);
+      if (clonedStzhElement
+        && originalStzhElement
+        && clonedStzhElement.tagName.toLowerCase() === "stzh-card") {
+        const clonedStzhElementCard = clonedStzhElement;
+        const originalStzhElementCard = originalStzhElement;
+        // copy every property that is not reflected to its attribute
+        clonedStzhElementCard.heading = originalStzhElementCard.heading;
+        clonedStzhElementCard.subtitle = originalStzhElementCard.subtitle;
+        clonedStzhElementCard.headerActions = originalStzhElementCard.headerActions;
+        clonedStzhElementCard.footerActions = originalStzhElementCard.footerActions;
+        clonedStzhElementCard.hideMovementActions = originalStzhElementCard.hideMovementActions;
+      }
+      return clonedElement;
+    };
+    this.allCollapsed = false;
+    this.collapseClick = () => {
+      const cards = Array.from(this.element.querySelectorAll("stzh-card"));
+      cards.forEach(card => {
+        if (card.collapsible) {
+          card.collapsed = !this.allCollapsed;
+        }
+      });
+      this.allCollapsed = !this.allCollapsed;
+      this.stzhCollapseAll.emit({
+        component: "stzh-card-list",
+        allCollapsed: this.allCollapsed
+      });
+    };
+    this.updateCollapsedState = () => {
+      const cards = Array.from(this.element.querySelectorAll("stzh-card"));
+      this.allCollapsed = !cards.some(card => !card.collapsed);
+    };
+  }
+  collapseListener() {
+    this.updateCollapsedState();
+  }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "card-list");
+    }
+  }
+  componentDidLoad() {
+    this.updateCollapsedState();
+  }
+  render() {
+    const classes = {
+      "stzh-card-list": true
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-card-list__header" }, h("div", { class: "stzh-card-list__description" }, h("slot", { name: "description" })), this.showToggleLink &&
+      h("stzh-link", { class: "stzh-card-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, ghostClone: this.sortableGhostClone }, h("div", { class: "stzh-card-list__cards", role: "list" }, h("slot", null))))));
+  }
+  static get is() { return "stzh-card-list"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-card-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-card-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhCardListLocalizedText",
+          "resolved": "StzhLocaleComponent & { expandAll: string; collapseAll: string; }",
+          "references": {
+            "StzhCardListLocalizedText": {
+              "location": "import",
+              "path": "./stzh-card-list.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
+      "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"
+      },
+      "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"
+      },
+      "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\""
+      },
+      "sortableGhostClone": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Function",
+          "resolved": "Function",
+          "references": {
+            "Function": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            },
+            "HTMLStzhCardElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Algorithm how the ghost element will be cloned"
+        },
+        "defaultValue": "(dragElement: HTMLElement) => {\n    const [clonedElement, clonedStzhElement, originalStzhElement] = cloneElement(dragElement);\n\n    if (\n      clonedStzhElement\n      && originalStzhElement\n      && clonedStzhElement.tagName.toLowerCase() === \"stzh-card\"\n    ) {\n      const clonedStzhElementCard: HTMLStzhCardElement = clonedStzhElement as HTMLStzhCardElement;\n      const originalStzhElementCard: HTMLStzhCardElement = originalStzhElement as HTMLStzhCardElement;\n\n      // copy every property that is not reflected to its attribute\n      clonedStzhElementCard.heading = originalStzhElementCard.heading;\n      clonedStzhElementCard.subtitle = originalStzhElementCard.subtitle;\n      clonedStzhElementCard.headerActions = originalStzhElementCard.headerActions;\n      clonedStzhElementCard.footerActions = originalStzhElementCard.footerActions;\n      clonedStzhElementCard.hideMovementActions = originalStzhElementCard.hideMovementActions;\n    }\n\n    return clonedElement;\n  }"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "allCollapsed": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhCollapseAll",
+        "name": "stzhCollapseAll",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Collapse all event"
+        },
+        "complexType": {
+          "original": "StzhCardListCollapseAllEvent",
+          "resolved": "{ component: \"stzh-card-list\"; allCollapsed: boolean; }",
+          "references": {
+            "StzhCardListCollapseAllEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+  static get listeners() {
+    return [{
+        "name": "stzhCollapse",
+        "method": "collapseListener",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,132 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/CardList',
+  component: 'stzh-card-list',
+  parameters: {
+    actions: {
+      handles: ['stzhCollapseAll']
+    },
+    layout: 'padded',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('card-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-card-list {...args}>
+    <stzh-text slot="description">
+      Services are shown here, which you marked with <stzh-icon name="star-filled"></stzh-icon>
+    </stzh-text>
+    <stzh-card collapsible starrable heading="Lorem ipsum 1" subtitle="Dolor si 1" header-actions={actions}>
+      <div slot="content">Content</div>
+    </stzh-card>
+    <stzh-card collapsible heading="Lorem ipsum 2" subtitle='["Dolor si 2", "Dolor si 2.1", "Dolor si 2.2"]' subtitle-interactive header-actions={actions2}>
+      <stzh-row slot="content" span-small="6">
+        <stzh-cell>
+          <stzh-datalist
+            items='[
+              {
+                "label": "Label",
+                "value": "Value 1",
+                "meta": "Metainfo",
+                "icon": "delete"
+              },
+              {
+                "label": "Really Long Label",
+                "value": "Value 2",
+                "meta": "Metainfo",
+                "icon": "delete"
+              },
+              {
+                "label": "Label",
+                "value": "Value 3",
+                "meta": "Metainfo"
+              }
+            ]'></stzh-datalist>
+        </stzh-cell>
+        <stzh-cell>
+        <stzh-datalist
+            items='[
+              {
+                "label": "Label",
+                "value": "Value 4",
+                "meta": "Metainfo",
+                "icon": "delete"
+              },
+              {
+                "label": "Label",
+                "value": "Value 5",
+                "icon": "delete",
+                "href": "http://example.com"
+              }
+            ]'></stzh-datalist>
+        </stzh-cell>
+      </stzh-row>
+    </stzh-card>
+    <stzh-card collapsible starrable heading="Lorem ipsum 3" subtitle="Dolor si 3" footer-actions={actions2}>
+      <div slot="content">Content</div>
+    </stzh-card>
+    <stzh-card collapsible starrable heading="Lorem ipsum 4">
+      <stzh-cspace slot="content">
+        <p>Content with Input:</p>
+        <stzh-input></stzh-input>
+        <stzh-button label="Button Right" fullwidth></stzh-button>
+      </stzh-cspace>
+    </stzh-card>
+  </stzh-card-list>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  'show-toggle-Link': true
+};

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

@@ -93,9 +93,7 @@ export class StzhCheckboxgroup {
   }
   updateCheckboxesProperty(prop, value) {
     this.checkboxes.forEach((checkbox) => {
-      if (prop === "name"
-        || (this.preventUpdateProperties.indexOf(prop) === -1
-          && checkbox.getAttribute(prop) === null)) {
+      if (prop === "name" || (this.preventUpdateProperties.indexOf(prop) === -1)) {
         checkbox[camelCase(prop)] = value;
       }
     });

package/dist/collection/components/stzh-chip-select/stzh-chip-select.js

@@ -48,7 +48,7 @@ export class StzhChipSelect {
     const classes = {
       "stzh-chip-select": true
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-chip-select__chips" }, this._data.map((data) => (h("stzh-chip", { class: "stzh-chip-select__chip", label: data.label, counter: data.counter, icon: data.icon, type: data.type, variant: data.variant, size: data.size, active: this.value === data.value, onClick: () => this.chipClick(data) })))), h("stzh-dropdown", { class: "stzh-chip-select__dropdown", items: [this.value], label: this.label, options: this._dataDropdown, onStzhChange: this.onDropdownChange }))));
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-chip-select__chips", role: "list" }, this._data.map((data) => (h("stzh-chip", { role: "listitem", class: "stzh-chip-select__chip", label: data.label, counter: data.counter, icon: data.icon, type: data.type, variant: data.variant, size: data.size, active: this.value === data.value, onClick: () => this.chipClick(data) })))), h("stzh-dropdown", { class: "stzh-chip-select__dropdown", items: [this.value], label: this.label, options: this._dataDropdown, onStzhChange: this.onDropdownChange }))));
   }
   static get is() { return "stzh-chip-select"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-cspace/stzh-cspace.css

@@ -409,6 +409,7 @@
   margin-top: var(--stzh-space-xxlarge);
   margin-bottom: var(--stzh-space-xxlarge);
 }
+:host ::slotted(stzh-datalist),
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
@@ -416,42 +417,48 @@
   margin-bottom: var(--stzh-space-large);
 }
 @media screen and (min-width: 600px) {
-  :host ::slotted(stzh-progressbar),
+  :host ::slotted(stzh-datalist),
+:host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
     margin-top: var(--stzh-space-xlarge);
   }
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(stzh-progressbar),
+  :host ::slotted(stzh-datalist),
+:host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
     margin-top: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(stzh-progressbar),
+  :host ::slotted(stzh-datalist),
+:host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
     margin-top: var(--stzh-space-xxxxlarge);
   }
 }
 @media screen and (min-width: 600px) {
-  :host ::slotted(stzh-progressbar),
+  :host ::slotted(stzh-datalist),
+:host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
     margin-bottom: var(--stzh-space-xlarge);
   }
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(stzh-progressbar),
+  :host ::slotted(stzh-datalist),
+:host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
     margin-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(stzh-progressbar),
+  :host ::slotted(stzh-datalist),
+:host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
     margin-bottom: var(--stzh-space-xxxxlarge);
@@ -512,4 +519,10 @@
 :host ::slotted(:last-child),
 :host ::slotted([no-cspace-bottom]) {
   margin-bottom: 0;
+}
+:host :has(:nth-child(1)[hidden])::slotted(:nth-child(2)) {
+  margin-top: 0;
+}
+:host :has(:nth-last-child(1)[hidden])::slotted(:nth-last-child(2)) {
+  margin-bottom: 0;
 }