@oiz/stzh-components 1.5.0-alpha → 2.0.0-beta

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

@@ -0,0 +1,351 @@
+import { Host, h } from "@stencil/core";
+import { fetchTranslations } from "../../utils/translation-utils";
+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.stzhActionClick.emit({
+        component: "stzh-actionset",
+        action
+      });
+    };
+    this.update = () => {
+      this.isSmall = media("small").matches;
+      this.isMedium = media("medium").matches;
+      if (!this.actionsElement) {
+        return;
+      }
+      Object.assign(this.actionsElement.style, {
+        width: null,
+        height: null
+      });
+      let newActionsVisible = 0;
+      if (this.variant === "overflow" && this.isMedium
+        || this.variant === "stack" && this.isSmall) {
+        this.dynamicActions = true;
+        let newActionsHeight = 0;
+        let newActionsWidth = 0;
+        // update height and width
+        Array.from(this.actionsElement.children).forEach((child) => {
+          // check which item is visible and
+          if (child.offsetTop === 0) {
+            newActionsVisible++;
+            const style = getComputedStyle(child);
+            const marginLeft = parseInt(style.marginLeft);
+            const marginRight = parseInt(style.marginRight);
+            const marginTop = parseInt(style.marginTop);
+            const marginBottom = parseInt(style.marginBottom);
+            const childWidth = child.offsetWidth + marginLeft + marginRight;
+            const childHeight = child.offsetHeight + marginTop + marginBottom;
+            if (newActionsHeight < childHeight) {
+              newActionsHeight = childHeight;
+            }
+            newActionsWidth = newActionsWidth + childWidth;
+          }
+        });
+        Object.assign(this.actionsElement.style, {
+          width: `${newActionsWidth + 1}px`,
+          height: `${newActionsHeight}px`
+        });
+      }
+      else {
+        this.dynamicActions = false;
+        if (this.variant === "overflow") {
+          newActionsVisible = 0;
+        }
+        else if (this.variant === "stack") {
+          newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;
+        }
+      }
+      this.actionsCollapsed = this._actions.slice(newActionsVisible);
+    };
+  }
+  actionsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._actions = JSON.parse(newValue);
+    }
+    else {
+      this._actions = newValue;
+    }
+  }
+  // handleLoad(e) {
+  //   console.log(e);
+  //   requestAnimationFrame(() => {
+  //   requestAnimationFrame(() => {
+  //     this.update();
+  //   });
+  //   });
+  // }
+  handleResize() {
+    if (this.debounceResize) {
+      window.cancelAnimationFrame(this.debounceResize);
+    }
+    this.debounceResize = requestAnimationFrame(this.update);
+  }
+  async componentWillLoad() {
+    this.actionsWatcher(this.actions);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "actionset");
+    }
+  }
+  componentDidLoad() {
+    this.update();
+  }
+  render() {
+    const classes = {
+      "stzh-actionset": true,
+      // "stzh-actionset--has-dynamic-actions": this.dynamicActions,
+      "stzh-actionset--has-collapsed-items": this.actionsCollapsed.length > 0,
+      [`stzh-actionset--${this.variant}`]: !!this.variant
+    };
+    const Action = (action) => (h("stzh-button", { class: {
+        "stzh-actionset__action": true,
+        "is-button": true,
+        // "show-medium": !action.onlyCollapseText,
+        // "hide-when-collapsed": !action.onlyCollapseText,
+        // "hide-text-when-collapsed": action.onlyCollapseText
+      }, role: "listitem", icon: action.icon, iconPosition: action.iconPosition, iconOnly: action.iconOnly, badge: action.badge, variant: action.variant
+        ? 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: {
+      // "show-medium": action.onlyCollapseText,
+      // "hide-when-collapsed": action.onlyCollapseText
+      } }, action.label)));
+    return (h(Host, { "has-collapsed-items": this.actionsCollapsed.length > 0 }, h("div", { class: classes }, h("div", { class: "stzh-actionset__actions", role: "list" }, h("div", { ref: (el) => (this.actionsElement = el), class: "stzh-actionset__actions-wrapper" }, this._actions.map(action => ((this.dynamicActions
+      || (!this.dynamicActions &&
+        this.actionsCollapsed.indexOf(action) === -1))
+      &&
+        (action.tooltipContent
+          ?
+            h("stzh-tooltip", { strategy: "fixed", content: action.tooltipContent }, Action(action))
+          :
+            Action(action))))), h("stzh-popover", { label: this.variant === "stack"
+        ? this.localization.furtherActions
+        : (!this.isMedium ? this.localization.actions : ""), strategy: "fixed", placement: this.popoverPlacement, class: "stzh-actionset__action-popover" }, h("stzh-button", { fullwidth: true, disabled: this.actionsCollapsed.length === 0, class: "stzh-actionset__action is-further", variant: this.popoverButtonVariant !== ""
+        ? this.popoverButtonVariant
+        : (this.variant === "stack" ? "secondary" : "tertiary"), size: this.popoverButtonSize !== ""
+        ? this.popoverButtonSize
+        : (this.variant === "stack" ? "default" : "tiny"), icon: this.variant === "stack" ? "angle-down" : "more-vertical", iconOnly: this.variant === "overflow" && this.isMedium, iconPosition: "right", label: this.variant === "stack"
+        ? 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, onClick: () => { this.actionClick(action); }
+    }, action.label)))))))));
+  }
+  static get is() { return "stzh-actionset"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-actionset.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-actionset.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhActionsetLocalizedText",
+          "resolved": "StzhLocaleComponent & { actions: string; furtherActions: string; }",
+          "references": {
+            "StzhActionsetLocalizedText": {
+              "location": "import",
+              "path": "./stzh-actionset.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"stack\" | \"overflow\"",
+          "resolved": "\"overflow\" | \"stack\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant determining what position the action buttons are"
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "\"stack\""
+      },
+      "popoverButtonVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"\" | \"default\" | \"secondary\" | \"input\" | \"tertiary\"",
+          "resolved": "\"\" | \"default\" | \"input\" | \"secondary\" | \"tertiary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Popover button variant"
+        },
+        "attribute": "popover-button-variant",
+        "reflect": true,
+        "defaultValue": "\"\""
+      },
+      "popoverButtonSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"\" | \"default\" | \"small\" | \"tiny\"",
+          "resolved": "\"\" | \"default\" | \"small\" | \"tiny\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Popover button size"
+        },
+        "attribute": "popover-button-size",
+        "reflect": true,
+        "defaultValue": "\"\""
+      },
+      "popoverPlacement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Placement",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "Placement": {
+              "location": "import",
+              "path": "@floating-ui/dom"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Popover placement"
+        },
+        "attribute": "popover-placement",
+        "reflect": true,
+        "defaultValue": "\"bottom-end\""
+      },
+      "actions": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | StzhActionsetItem[]",
+          "resolved": "StzhActionsetItem[] | string",
+          "references": {
+            "StzhActionsetItem": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Card header actions"
+        },
+        "attribute": "actions",
+        "reflect": false,
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "actionsCollapsed": {},
+      "dynamicActions": {},
+      "isSmall": {},
+      "isMedium": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhActionClick",
+        "name": "stzhActionClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Header action click event"
+        },
+        "complexType": {
+          "original": "StzhActionsetItemClickEvent",
+          "resolved": "{ component: \"stzh-actionset\"; action: StzhActionsetItem; }",
+          "references": {
+            "StzhActionsetItemClickEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "actions",
+        "methodName": "actionsWatcher"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "appload",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "DOMContentLoaded",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "load",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,72 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Actionset',
+  component: 'stzh-actionset',
+  parameters: {
+    layout: 'padded',
+    actions: {
+      handles: []
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('actionset'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-actionset {...args}></stzh-actionset>
+);
+
+const actions = `[
+  {
+    "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 Stack = Template.bind({});
+Stack.args = {
+  actions
+};
+
+export const Overflow = Template.bind({});
+Overflow.args = {
+  actions,
+  variant: "overflow"
+};

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

@@ -198,6 +198,7 @@
   line-height: var(--stzh-font-milli-text-line-height);
   letter-spacing: var(--stzh-font-curve---text-letter-spacing);
   position: relative;
+  z-index: 0;
   overflow: visible;
   display: flex;
   align-items: center;
@@ -216,6 +217,7 @@
   min-width: var(--height);
   height: var(--height);
   border-radius: var(--stzh-button-border-radius);
+  /* Hover / Focus / Checked / Disabled of Radio Type */
   /* Size variants */
   /* Badge positioning variants */
   /* Variant if button only has icon */
@@ -254,6 +256,70 @@
   top: 0;
   right: 0;
 }
+.stzh-button__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  z-index: -1;
+  opacity: 0;
+  pointer-events: none;
+}
+.stzh-button__mark {
+  border: 0.0625rem solid var(--stzh-color-grey61);
+  background-color: var(--stzh-color-white);
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+  border-radius: 50%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  transition: border-color var(--stzh-base-transition-animation-speed);
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-right: var(--stzh-space-xsmall);
+  border-color: currentColor;
+}
+.stzh-button__mark::before {
+  content: "";
+}
+.stzh-button__check {
+  background-color: currentColor;
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  opacity: 0;
+}
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-button__check {
+    background-color: ButtonText;
+  }
+}
+.stzh-button__input:checked:hover ~ .stzh-button__inner .stzh-button__mark .stzh-button__check, .stzh-button__input:checked:focus ~ .stzh-button__inner .stzh-button__mark .stzh-button__check {
+  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+.stzh-button:hover .stzh-button__mark, .stzh-button__input:focus:hover ~ .stzh-button__inner .stzh-button__mark, .stzh-button__input:checked:hover ~ .stzh-button__inner .stzh-button__mark, .stzh-button__input:checked:focus ~ .stzh-button__inner .stzh-button__mark {
+  border-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+.stzh-button__input:focus ~ .stzh-button__inner .stzh-button__mark, .stzh-button__input:checked ~ .stzh-button__inner .stzh-button__mark {
+  border-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+.stzh-button__input:checked ~ .stzh-button__inner .stzh-button__mark .stzh-button__check {
+  opacity: 1;
+}
+.stzh-button--is-disabled .stzh-button__input ~ .stzh-button__inner .stzh-button__mark .stzh-button__check {
+  color: var(--stzh-color-grey61);
+}
+.stzh-button--is-disabled .stzh-button__input ~ .stzh-button__inner .stzh-button__mark {
+  border-color: var(--stzh-color-grey5);
+}
+.stzh-button--is-disabled .stzh-button__mark {
+  background-color: var(--stzh-color-grey5);
+}
 .stzh-button--size-small, .stzh-button--size-tiny {
   font-size: var(--stzh-font-micro-font-size);
   line-height: var(--stzh-font-micro-text-line-height);

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

@@ -22,6 +22,12 @@ export class StzhButton {
     this.icon = "";
     /** Icon Position */
     this.iconPosition = "left";
+    /** Checked status (if type is radio) */
+    this.checked = false;
+    /** The name of the input element (if type is radio) */
+    this.name = "";
+    /** The value of the input element (if type is radio) */
+    this.value = "";
     /** `href` if the button should be used as link  */
     this.href = "";
     /** Target if the button is used as link (if `href` used)  */
@@ -40,6 +46,15 @@ export class StzhButton {
     this.iconOnly = false;
     /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
     this.a11yDescribedby = "";
+    this.onInput = (event) => {
+      this.checked = this.input.checked;
+      this.stzhChange.emit({
+        component: "stzh-button",
+        originalEvent: event,
+        value: this.value,
+        checked: this.checked
+      });
+    };
     this.onFocus = (event) => {
       const focusEvent = new FocusEvent("focus", {
         view: window,
@@ -86,7 +101,8 @@ export class StzhButton {
     return (h("div", { class: "stzh-button__text" }, this.label ? this.label : h("slot", null)));
   }
   renderInner(iconUsed) {
-    return (h(Fragment, null, h("div", { class: "stzh-button__inner", onClick: this.onClick }, this.iconPosition === "left" && this.renderIcon(iconUsed), this.renderContent(), this.iconPosition === "right" && this.renderIcon(iconUsed)), this.badge && (this.badgePosition === "button" || !iconUsed) &&
+    return (h(Fragment, null, h("div", { class: "stzh-button__inner", onClick: this.onClick }, this.type === "radio" &&
+      h("div", { class: "stzh-button__mark" }, h("div", { class: "stzh-button__check" })), this.iconPosition === "left" && this.renderIcon(iconUsed), this.renderContent(), this.iconPosition === "right" && this.renderIcon(iconUsed)), this.badge && (this.badgePosition === "button" || !iconUsed) &&
       h("stzh-badge", { class: "stzh-button__badge", label: this.badge, onClick: this.onClick })));
   }
   render() {
@@ -103,12 +119,16 @@ export class StzhButton {
       [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,
       [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,
       [`stzh-button--size-${this.size}`]: !!this.size,
+      [`stzh-button--type-${this.type}`]: !!this.type,
       [`stzh-button--${this.variant}`]: !!this.variant
     };
     return (h(Host, null, this.href ?
       h("a", { ref: (el) => (this.button = el), href: this.disabled ? null : this.href, target: this.target, class: classes, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))
       :
-        h("button", { ref: (el) => (this.button = el), class: classes, type: this.type, disabled: this.disabled, "aria-label": this.a11yLabel, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))));
+        this.type === "radio" ?
+          h("label", { ref: (el) => (this.button = el), class: classes, onClick: this.onClick }, h("input", { ref: (el) => (this.input = el), type: "radio", class: "stzh-button__input", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-label": this.a11yLabel, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, onInput: this.onInput }), this.renderInner(iconUsed))
+          :
+            h("button", { ref: (el) => (this.button = el), class: classes, type: this.type, disabled: this.disabled, "aria-label": this.a11yLabel, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))));
   }
   static get is() { return "stzh-button"; }
   static get encapsulation() { return "scoped"; }
@@ -268,6 +288,60 @@ export class StzhButton {
         "reflect": true,
         "defaultValue": "\"left\""
       },
+      "checked": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Checked status (if type is radio)"
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the input element (if type is radio)"
+        },
+        "attribute": "name",
+        "reflect": true,
+        "defaultValue": "\"\""
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the input element (if type is radio)"
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
       "href": {
         "type": "string",
         "mutable": false,
@@ -308,8 +382,8 @@ export class StzhButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"button\" | \"submit\" | \"reset\"",
-          "resolved": "\"button\" | \"reset\" | \"submit\"",
+          "original": "\"button\" | \"submit\" | \"reset\" | \"radio\"",
+          "resolved": "\"button\" | \"radio\" | \"reset\" | \"submit\"",
           "references": {}
         },
         "required": false,
@@ -490,6 +564,26 @@ export class StzhButton {
             }
           }
         }
+      }, {
+        "method": "stzhChange",
+        "name": "stzhChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Change event (only called if type is radio)"
+        },
+        "complexType": {
+          "original": "StzhButtonChangeEvent",
+          "resolved": "{ component: \"stzh-button\"; originalEvent: InputEvent; value: string; checked: boolean; }",
+          "references": {
+            "StzhButtonChangeEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
       }];
   }
   static get methods() {

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

@@ -9,7 +9,7 @@ export default {
   component: 'stzh-button',
   parameters: {
     actions: {
-      handles: ['click', 'stzhFocus', 'stzhBlur']
+      handles: ['click', 'stzhFocus', 'stzhBlur', 'stzhChange']
     },
     docs: {
       description: {