@oiz/stzh-components 2.0.0 → 2.1.0-alpha

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

@@ -5,22 +5,12 @@ import { media } from '../../utils/media-utils';
  */
 export class StzhActionset {
   constructor() {
-    /** Variant determining what position the action buttons are */
-    this.variant = "stack";
-    /** Popover button variant */
-    this.popoverButtonVariant = "";
-    /** Popover button size */
-    this.popoverButtonSize = "";
-    /** Popover placement */
-    this.popoverPlacement = "bottom-end";
-    /** Card header actions */
-    this.actions = [];
     this._actions = [];
-    this.actionsCollapsed = [];
-    this.actionClick = (action) => {
+    this.actionClick = (action, originalEvent) => {
       this.stzhActionClick.emit({
         component: "stzh-actionset",
-        action
+        action,
+        originalEvent
       });
     };
     this.update = () => {
@@ -73,6 +63,16 @@ export class StzhActionset {
       }
       this.actionsCollapsed = this._actions.slice(newActionsVisible);
     };
+    this.localization = undefined;
+    this.variant = "stack";
+    this.popoverButtonVariant = "";
+    this.popoverButtonSize = "";
+    this.popoverPlacement = "bottom-end";
+    this.actions = [];
+    this.actionsCollapsed = [];
+    this.dynamicActions = undefined;
+    this.isSmall = undefined;
+    this.isMedium = undefined;
   }
   actionsWatcher(newValue) {
     if (typeof newValue === "string") {
@@ -114,7 +114,7 @@ export class StzhActionset {
         ? action.variant
         : (this.variant === "stack" ? "secondary" : "tertiary"), size: action.size
         ? action.size
-        : (this.variant === "stack" ? "default" : "tiny"), badgePosition: "icon", onClick: () => { this.actionClick(action); } }, h("span", { class: {
+        : (this.variant === "stack" ? "default" : "tiny"), badgePosition: "icon", onClick: (e) => { this.actionClick(action, e); } }, h("span", { class: {
       // "show-medium": action.onlyCollapseText,
       // "hide-when-collapsed": action.onlyCollapseText
       } }, action.label)));
@@ -136,7 +136,7 @@ export class StzhActionset {
         ? this.localization.furtherActions
         : (!this.isMedium ? this.localization.actions : "") }), h("stzh-menu", { slot: "content" }, this.actionsCollapsed.map(action => (h("stzh-menu-item", {
       // class="hide-medium show-when-collapsed"
-      icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: () => { this.actionClick(action); }
+      icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: (e) => { this.actionClick(action, e); }
     }, action.label)))))))));
   }
   static get is() { return "stzh-actionset"; }
@@ -203,7 +203,7 @@ export class StzhActionset {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Popover button variant"
+          "text": "Button variant of popover button (button thats holds collapsed actions)"
         },
         "attribute": "popover-button-variant",
         "reflect": true,
@@ -221,7 +221,7 @@ export class StzhActionset {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Popover button size"
+          "text": "Button size of popover button (button that holds collapsed actions)"
         },
         "attribute": "popover-button-size",
         "reflect": true,
@@ -244,7 +244,7 @@ export class StzhActionset {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Popover placement"
+          "text": "Popover placement of button that holds collapsed actions"
         },
         "attribute": "popover-placement",
         "reflect": true,
@@ -254,7 +254,7 @@ export class StzhActionset {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string | StzhActionsetItem[]",
+          "original": "StzhActionsetItem[] | string",
           "resolved": "StzhActionsetItem[] | string",
           "references": {
             "StzhActionsetItem": {
@@ -267,7 +267,7 @@ export class StzhActionset {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Card header actions"
+          "text": "Card header actions.\nArray of objects that can include the button attributes `id`, `variant`, `icon`, `size`, `iconPosition`, `iconOnly`, `label` or `badge`:\n`[{\"id\":\"action-1\", \"icon\": \"alarm-bell\", \"label\": \"Lorem\"}, {\"id\":\"action-2\", \"icon\": \"mail\", \"label\": \"Lorem\"}]`"
         },
         "attribute": "actions",
         "reflect": false,
@@ -296,7 +296,7 @@ export class StzhActionset {
         },
         "complexType": {
           "original": "StzhActionsetItemClickEvent",
-          "resolved": "{ component: \"stzh-actionset\"; action: StzhActionsetItem; }",
+          "resolved": "{ component: \"stzh-actionset\"; action: StzhActionsetItem; originalEvent: MouseEvent; }",
           "references": {
             "StzhActionsetItemClickEvent": {
               "location": "import",

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

@@ -0,0 +1,286 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Richtext
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Appnav
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Accordions
+ */
+/**
+ * Buttons
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Container
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+}
+:host[hidden] {
+  display: none;
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+}
+
+:host {
+  --columns: 1;
+  width: 100%;
+}
+
+:host([columns="1"]) {
+  --columns: 1;
+}
+
+:host([columns="2"]) {
+  --columns: 2;
+}
+
+:host([columns="3"]) {
+  --columns: 3;
+}
+
+:host([columns="4"]) {
+  --columns: 4;
+}
+
+:host([columns="5"]) {
+  --columns: 5;
+}
+
+@media screen and (min-width: 600px) {
+  :host([columns-small="1"]) {
+    --columns: 1;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([columns-small="2"]) {
+    --columns: 2;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([columns-small="3"]) {
+    --columns: 3;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([columns-small="4"]) {
+    --columns: 4;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([columns-small="5"]) {
+    --columns: 5;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([columns-smallheader="1"]) {
+    --columns: 1;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([columns-smallheader="2"]) {
+    --columns: 2;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([columns-smallheader="3"]) {
+    --columns: 3;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([columns-smallheader="4"]) {
+    --columns: 4;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([columns-smallheader="5"]) {
+    --columns: 5;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([columns-medium="1"]) {
+    --columns: 1;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([columns-medium="2"]) {
+    --columns: 2;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([columns-medium="3"]) {
+    --columns: 3;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([columns-medium="4"]) {
+    --columns: 4;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([columns-medium="5"]) {
+    --columns: 5;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([columns-large="1"]) {
+    --columns: 1;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([columns-large="2"]) {
+    --columns: 2;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([columns-large="3"]) {
+    --columns: 3;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([columns-large="4"]) {
+    --columns: 4;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([columns-large="5"]) {
+    --columns: 5;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([columns-ultra="1"]) {
+    --columns: 1;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([columns-ultra="2"]) {
+    --columns: 2;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([columns-ultra="3"]) {
+    --columns: 3;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([columns-ultra="4"]) {
+    --columns: 4;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([columns-ultra="5"]) {
+    --columns: 5;
+  }
+}
+
+.stzh-anchornav {
+  -moz-column-count: var(--columns);
+       column-count: var(--columns);
+}
+.stzh-anchornav__list {
+  margin: calc(var(--stzh-space-xxsmall) / -2);
+}
+.stzh-anchornav__item {
+  padding: calc(var(--stzh-space-xxsmall));
+}
+.stzh-anchornav--has-border {
+  padding: calc(var(--stzh-space-small)) 0;
+  border-top: 0.0625rem solid var(--stzh-base-border-color);
+  border-bottom: 0.0625rem solid var(--stzh-base-border-color);
+}

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

@@ -0,0 +1,216 @@
+import { Host, h } from "@stencil/core";
+/**
+ *
+ */
+export class StzhAnchornav {
+  constructor() {
+    this.columns = 1;
+    this.columnsSmall = 0;
+    this.columnsMedium = 0;
+    this.columnsLarge = 0;
+    this.columnsUltra = 0;
+    this.items = [];
+    this.withBorder = false;
+  }
+  appointmentsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._items = JSON.parse(newValue);
+    }
+    else {
+      this._items = newValue;
+    }
+  }
+  handleClick(item, originalEvent) {
+    this.stzhItemClick.emit({
+      component: "stzh-anchornav",
+      item,
+      originalEvent
+    });
+  }
+  async componentWillLoad() {
+    this.appointmentsWatcher(this.items);
+  }
+  render() {
+    const classes = {
+      "stzh-anchornav": true,
+      "stzh-anchornav--has-border": this.withBorder
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-anchornav__list", role: "list" }, this._items.map((item) => h("stzh-link", { class: "stzh-anchornav__item", role: "listitem", fullwidth: true, "text-align": "left", href: item.href, icon: item.icon || "angle-right", onClick: (e) => this.handleClick(item, e) }, h("stzh-clamp", { lines: 2 }, item.label)))))));
+  }
+  static get is() { return "stzh-anchornav"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-anchornav.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-anchornav.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "columns": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Columns number"
+        },
+        "attribute": "columns",
+        "reflect": true,
+        "defaultValue": "1"
+      },
+      "columnsSmall": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Columns number above small breakpoint"
+        },
+        "attribute": "columns-small",
+        "reflect": true,
+        "defaultValue": "0"
+      },
+      "columnsMedium": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Columns number above medium breakpoint"
+        },
+        "attribute": "columns-medium",
+        "reflect": true,
+        "defaultValue": "0"
+      },
+      "columnsLarge": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Columns number above large breakpoint"
+        },
+        "attribute": "columns-large",
+        "reflect": true,
+        "defaultValue": "0"
+      },
+      "columnsUltra": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Columns number above ultra breakpoint"
+        },
+        "attribute": "columns-ultra",
+        "reflect": true,
+        "defaultValue": "0"
+      },
+      "items": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhAnchornavItem[] | string",
+          "resolved": "StzhAnchornavItem[] | string",
+          "references": {
+            "StzhAnchornavItem": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Initial selected values.\nArray of objects with `label`, `href` and `icon` attribute:\n`[{\"href\":\"#lorem\", \"label\": \"Label 1\"}, {\"href\":\"#lorem2\", \"label\": \"Label 2\"}]`"
+        },
+        "attribute": "items",
+        "reflect": false,
+        "defaultValue": "[]"
+      },
+      "withBorder": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "With border separator"
+        },
+        "attribute": "with-border",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhItemClick",
+        "name": "stzhItemClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Item click event"
+        },
+        "complexType": {
+          "original": "StzhAnchornavItemClickEvent",
+          "resolved": "{ component: \"stzh-anchornav\"; item: StzhAnchornavItem; originalEvent: MouseEvent; }",
+          "references": {
+            "StzhAnchornavItemClickEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "items",
+        "methodName": "appointmentsWatcher"
+      }];
+  }
+}

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

@@ -0,0 +1,76 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { fullwidthCentered } from '../../utils/decorators';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Anchornav',
+  component: 'stzh-anchornav',
+  parameters: {
+    actions: {
+      handles: ['stzhItemClick']
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('anchornav'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    fullwidthCentered,
+    withDesign
+  ]
+}
+
+const items = `[
+  {
+    "label": "Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.",
+    "href": "#laboris"
+  },
+  {
+    "label": "Lorem Ipsum",
+    "href": "#lorem"
+  },
+  {
+    "label": "Lorem Ipsum",
+    "href": "#lorem"
+  },
+  {
+    "label": "Lorem Ipsum",
+    "href": "#lorem"
+  },
+  {
+    "label": "Lorem Ipsum",
+    "href": "#lorem"
+  },
+  {
+    "label": "Lorem Ipsum",
+    "href": "#lorem"
+  },
+  {
+    "label": "Lorem Ipsum",
+    "href": "#lorem"
+  }
+]`;
+
+const Template = (args) => (
+  <stzh-anchornav {...args}></stzh-anchornav>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  items
+};
+
+export const Multicolumn = Template.bind({});
+Multicolumn.args = {
+  items,
+  'columns-small': 2,
+  'columns-medium': 3
+};

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

@@ -5,12 +5,6 @@ import { setPropsIfNull } from "../../utils/utils";
  */
 export class StzhAppnav {
   constructor() {
-    /** App title shown on tablet/desktop */
-    this.appTitle = "";
-    /** Status displayed next to app title (only displayed if `app-title` is defined) */
-    this.appStatus = "";
-    /** Link of app title (only used if `app-title` is defined) */
-    this.appHref = "";
     this.init = () => {
       const links = this.element.querySelectorAll("stzh-link");
       links.forEach((link) => {
@@ -21,6 +15,9 @@ export class StzhAppnav {
         link.setAttribute("role", "listitem");
       });
     };
+    this.appTitle = "";
+    this.appStatus = "";
+    this.appHref = "";
   }
   connectedCallback() {
     this.init();