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

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

@@ -6,32 +6,6 @@ import { hasSlot } from "../../utils/utils";
  */
 export class StzhLink {
   constructor() {
-    /** Icon (use instead of icon slot) */
-    this.icon = "";
-    /** Icon Position */
-    this.iconPosition = "left";
-    /** Size variant */
-    this.size = "default";
-    /** href attribute of the link */
-    this.href = "";
-    /** target if the button is used as link (if href used)  */
-    this.target = "";
-    /** type of the button, if used as button (if no href used) */
-    this.type = "button";
-    /** Variant style */
-    this.variant = "default";
-    /** Badge text */
-    this.badge = "";
-    /** Badge position */
-    this.badgePosition = "icon";
-    /** Disabled status */
-    this.disabled = false;
-    /** Active status */
-    this.active = false;
-    /** Whether only an icon is used inside the link */
-    this.iconOnly = false;
-    /** Label */
-    this.label = "";
     this.onFocus = (event) => {
       const focusEvent = new FocusEvent("focus", {
         view: window,
@@ -56,6 +30,24 @@ export class StzhLink {
         originalEvent: event
       });
     };
+    this.icon = "";
+    this.iconPosition = "left";
+    this.size = "default";
+    this.href = "";
+    this.target = "";
+    this.type = "button";
+    this.variant = "default";
+    this.fullwidth = false;
+    this.textAlign = "default";
+    this.badge = "";
+    this.badgeType = "default";
+    this.badgeEmpty = false;
+    this.badgePosition = "icon";
+    this.disabled = false;
+    this.active = false;
+    this.iconOnly = false;
+    this.label = "";
+    this.linkAccesskey = undefined;
   }
   /** Focus link */
   async setFocus() {
@@ -65,15 +57,15 @@ export class StzhLink {
     return (h("div", { class: "stzh-link__icon-wrapper" }, this.icon ?
       h("stzh-icon", { class: "stzh-link__icon", name: this.icon })
       :
-        h("slot", { name: "icon" }), this.badge &&
-      h("stzh-badge", { class: "stzh-link__badge", label: this.badge })));
+        h("slot", { name: "icon" }), (this.badge || this.badgeEmpty) &&
+      h("stzh-badge", { class: "stzh-link__badge", label: this.badge, type: this.badgeType })));
   }
   renderContent() {
     return (h("div", { class: "stzh-link__text" }, this.label ? this.label : h("slot", null)));
   }
   renderInner(iconUsed) {
-    return (h(Fragment, null, h("div", { class: "stzh-link__inner" }, this.iconPosition === "left" && this.renderIcon(), this.renderContent(), this.iconPosition === "right" && this.renderIcon()), this.badge && !iconUsed &&
-      h("stzh-badge", { class: "stzh-link__badge", label: this.badge })));
+    return (h(Fragment, null, h("div", { class: "stzh-link__inner" }, this.iconPosition === "left" && this.renderIcon(), this.renderContent(), this.iconPosition === "right" && this.renderIcon()), (this.badge || this.badgeEmpty) && !iconUsed &&
+      h("stzh-badge", { class: "stzh-link__badge", label: this.badge, type: this.badgeType })));
   }
   render() {
     const iconUsed = hasSlot(this.element, "icon") || !!this.icon;
@@ -82,11 +74,13 @@ export class StzhLink {
       "stzh-link--has-icon": iconUsed,
       "stzh-link--has-icon-only": this.iconOnly,
       "stzh-link--has-badge": !!this.badge,
+      "stzh-link--is-fullwidth": this.fullwidth,
       "stzh-link--is-disabled": this.disabled,
       "stzh-link--is-active": this.active,
       [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,
+      [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,
       [`stzh-link--size-${this.size}`]: !!this.size,
-      [`stzh-link--${this.variant}`]: !!this.variant
+      [`stzh-link--${this.variant}`]: !!this.variant,
     };
     return (h(Host, null, this.href ?
       h("a", { ref: (el) => (this.link = el), href: this.disabled ? null : this.href, target: this.target, class: classes, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))
@@ -233,6 +227,42 @@ export class StzhLink {
         "reflect": true,
         "defaultValue": "\"default\""
       },
+      "fullwidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the link is full width"
+        },
+        "attribute": "fullwidth",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "textAlign": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"left\" | \"center\" | \"right\" | \"space-between\" | \"default\"",
+          "resolved": "\"center\" | \"default\" | \"left\" | \"right\" | \"space-between\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text alignment"
+        },
+        "attribute": "text-align",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
       "badge": {
         "type": "string",
         "mutable": false,
@@ -251,6 +281,42 @@ export class StzhLink {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "badgeType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"success\" | \"warning\" | \"error\" | \"info\"",
+          "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Badge type"
+        },
+        "attribute": "badge-type",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "badgeEmpty": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether badge should be displayed empty"
+        },
+        "attribute": "badge-empty",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "badgePosition": {
         "type": "string",
         "mutable": false,

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

@@ -2,6 +2,7 @@ import { h } from '../../utils/h';
 import readme from './readme.md';
 import { withDesign } from 'storybook-addon-designs';
 import { getFigmaLink } from '../../../figma';
+import { fullwidthCentered } from '../../utils/decorators';
 
 export default {
   title: 'Components/Link',
@@ -22,7 +23,8 @@ export default {
     }
   },
   decorators: [
-    withDesign
+    withDesign,
+    fullwidthCentered
   ]
 };
 

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

@@ -4,7 +4,6 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhList {
   constructor() {
-    /** Variant */
     this.variant = "unordered";
   }
   render() {

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

@@ -4,11 +4,8 @@ import { Host, h } from "@stencil/core";
  */
 export class StzhLoader {
   constructor() {
-    /** Size */
     this.size = "default";
-    /** Label */
     this.label = "";
-    /** Hide label text visually (still anounced for screenreaders) */
     this.hideLabel = false;
   }
   render() {

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

@@ -3,11 +3,8 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhLoadingbar {
   constructor() {
-    /** Percent */
     this.percent = 0;
-    /** Whether to hide/show percent */
     this.hidePercent = false;
-    /** Label */
     this.label = "";
   }
   render() {

package/dist/collection/components/stzh-menu-item/stzh-menu-item.js

@@ -5,20 +5,6 @@ import { hasSlot } from "../../utils/utils";
  */
 export class StzhMenuItem {
   constructor() {
-    /** Badge */
-    this.badge = "";
-    /** Icon (use instead of icon slot) */
-    this.icon = "";
-    /** Whether the button is active */
-    this.active = false;
-    /** Label */
-    this.label = "";
-    /** `href` if the button should be used as link  */
-    this.href = "";
-    /** Target if the button is used as link (if `href` used)  */
-    this.target = "";
-    /** Whether the button is disabled */
-    this.disabled = false;
     this.onFocus = (event) => {
       const focusEvent = new FocusEvent("focus", {
         view: window,
@@ -43,6 +29,16 @@ export class StzhMenuItem {
         originalEvent: event
       });
     };
+    this.badge = "";
+    this.badgeType = "default";
+    this.badgeEmpty = false;
+    this.icon = "";
+    this.active = false;
+    this.label = "";
+    this.href = "";
+    this.target = "";
+    this.disabled = false;
+    this.a11yLabel = undefined;
   }
   /** Focus menu item */
   async setFocus() {
@@ -53,8 +49,8 @@ export class StzhMenuItem {
       h("div", { class: "stzh-menu-item__icon-wrapper" }, this.icon ?
         h("stzh-icon", { class: "stzh-menu-item__icon", name: this.icon })
         :
-          h("slot", { name: "icon" }), this.badge &&
-        h("stzh-badge", { class: "stzh-menu-item__badge", label: this.badge })), h("div", { class: "stzh-menu-item__text" }, this.label ? this.label : h("slot", null))));
+          h("slot", { name: "icon" }), (this.badge || this.badgeEmpty) &&
+        h("stzh-badge", { class: "stzh-menu-item__badge", label: this.badge, type: this.badgeType })), h("div", { class: "stzh-menu-item__text" }, this.label ? this.label : h("slot", null))));
   }
   render() {
     const iconUsed = hasSlot(this.element, "icon") || !!this.icon;
@@ -102,6 +98,42 @@ export class StzhMenuItem {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "badgeType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"success\" | \"warning\" | \"error\" | \"info\"",
+          "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Badge type"
+        },
+        "attribute": "badge-type",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "badgeEmpty": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether badge should be displayed empty"
+        },
+        "attribute": "badge-empty",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "icon": {
         "type": "string",
         "mutable": false,

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

@@ -200,6 +200,11 @@
     margin-top: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  .stzh-message__link:not(:empty) {
+    margin-top: var(--stzh-space-large);
+  }
+}
 .stzh-message__description:empty + .stzh-message__link {
   margin-top: 0;
 }

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

@@ -7,29 +7,16 @@ const KEY_PREFIX_CLOSE = "stzh-components-message-close";
  */
 export class StzhMessage {
   constructor() {
-    /** Label */
+    this.onCloseButtonClick = () => {
+      this.hide();
+    };
     this.label = "";
-    /** Description (use instead of default slot) */
     this.description = "";
-    /**
-     * Close cookie name key.
-     * Component will check for the cookie (stzh-components-message-close-{name})
-     * and if not empty (message already closed before) will hide the message.
-     */
     this.closeKey = "";
-    /** Type */
     this.type = "info";
-    // high priority variants are currently not allowed to use
-    // (discussion will be resumed in relaunch, when colors are a topic)
-    // /** Prority */
-    // @Prop({ reflect: true }) priority: "default" | "high" = "default";
-    /** Whether to hide close button */
     this.hideClose = false;
-    /** Open state */
+    this.localization = undefined;
     this.open = true;
-    this.onCloseButtonClick = () => {
-      this.hide();
-    };
   }
   async show() {
     this.open = true;

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

@@ -0,0 +1,284 @@
+/**
+ * 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;
+}
+
+stzh-olmap {
+  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;
+  position: relative;
+  width: 100%;
+  height: 18.75rem;
+}
+stzh-olmap[hidden] {
+  display: none;
+}
+stzh-olmap *,
+stzh-olmap *::before,
+stzh-olmap *::after {
+  box-sizing: border-box;
+}
+@media screen and (min-width: 800px) {
+  stzh-olmap {
+    height: 25rem;
+  }
+}
+
+.stzh-olmap__map {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.stzh-olmap__map--print {
+  margin-top: var(--stzh-space-xxlarge);
+  max-width: 100%;
+  height: auto;
+}
+.stzh-olmap__print-image {
+  display: block;
+  max-width: 100%;
+}
+.stzh-olmap .ol-print,
+.stzh-olmap .ol-location,
+.stzh-olmap .ol-zoom-in,
+.stzh-olmap .ol-zoom-out {
+  font-family: var(--stzh-font-family-light);
+  font-weight: var(--stzh-font-weight-light);
+  font-style: normal;
+  font-size: var(--stzh-font-deca-font-size);
+  line-height: var(--stzh-font-deca-text-line-height);
+  letter-spacing: var(--stzh-font-deca-text-letter-spacing);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  border: none;
+  border-radius: 0;
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  transition: all var(--stzh-base-transition-animation-speed) ease;
+  background-color: var(--stzh-color-white);
+  width: 2.5rem;
+  height: 2.375rem;
+  cursor: pointer;
+}
+.stzh-olmap .ol-print stzh-icon,
+.stzh-olmap .ol-location stzh-icon,
+.stzh-olmap .ol-zoom-in stzh-icon,
+.stzh-olmap .ol-zoom-out stzh-icon {
+  --size: var(--stzh-icon-size-small);
+}
+.stzh-olmap .ol-print:hover,
+.stzh-olmap .ol-location:hover,
+.stzh-olmap .ol-zoom-in:hover,
+.stzh-olmap .ol-zoom-out:hover {
+  color: var(--stzh-color-white);
+  background: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+  border-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+.stzh-olmap .ol-layer,
+.stzh-olmap .ol-print,
+.stzh-olmap .ol-location,
+.stzh-olmap .ol-zoom {
+  position: absolute;
+  right: 0.625rem;
+  box-shadow: var(--stzh-box-shadow-popover);
+  border-radius: var(--stzh-form-input-border-radius);
+}
+@media screen and (min-width: 800px) {
+  .stzh-olmap .ol-layer,
+.stzh-olmap .ol-print,
+.stzh-olmap .ol-location,
+.stzh-olmap .ol-zoom {
+    right: 1.25rem;
+  }
+}
+.stzh-olmap .ol-layer {
+  left: 0.625rem;
+  bottom: 0.625rem;
+  right: auto;
+  padding: var(--stzh-space-xxxsmall);
+  border: none;
+}
+@media screen and (min-width: 800px) {
+  .stzh-olmap .ol-layer {
+    left: 1.25rem;
+    bottom: 1.25rem;
+  }
+}
+.stzh-olmap .ol-layer__thumbnail {
+  width: 4.6875rem;
+  height: 4.6875rem;
+  display: block;
+}
+.stzh-olmap .ol-layer__text {
+  font-family: var(--stzh-font-family-light);
+  font-weight: var(--stzh-font-weight-light);
+  font-style: normal;
+  font-size: var(--stzh-font-pico-font-size);
+  line-height: var(--stzh-font-pico-text-line-height);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  text-align: left;
+  background-color: var(--stzh-color-white);
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  padding-left: calc(var(--stzh-space-xxxsmall) + 0.0625rem);
+  padding-right: calc(var(--stzh-space-xxxsmall) + 0.0625rem);
+}
+.stzh-olmap .ol-layer:hover .ol-layer__text {
+  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+.stzh-olmap .ol-location {
+  bottom: calc(3.75rem + 7.125rem + var(--stzh-space-small) * 2);
+}
+@media screen and (min-width: 800px) {
+  .stzh-olmap .ol-location {
+    bottom: calc(4.375rem + 7.125rem + var(--stzh-space-small) * 2);
+  }
+}
+.stzh-olmap .ol-location.active {
+  background: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+  border-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+  color: var(--stzh-color-white);
+}
+.stzh-olmap .ol-zoom {
+  bottom: calc(3.75rem + 2.375rem + var(--stzh-space-small));
+  background-color: var(--stzh-color-grey13);
+}
+@media screen and (min-width: 800px) {
+  .stzh-olmap .ol-zoom {
+    bottom: calc(4.375rem + 2.375rem + var(--stzh-space-small));
+  }
+}
+.stzh-olmap .ol-zoom-in {
+  margin-bottom: 0.0625rem;
+}
+.stzh-olmap .ol-print {
+  bottom: 3.75rem;
+}
+@media screen and (min-width: 800px) {
+  .stzh-olmap .ol-print {
+    bottom: 4.375rem;
+  }
+}
+.stzh-olmap .ol-rotate,
+.stzh-olmap .ol-attribution {
+  display: none;
+}
+.stzh-olmap .ol-scale-line {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  padding: var(--stzh-space-xxsmall);
+  background: var(--stzh-color-white);
+  border-top-left-radius: var(--stzh-form-input-border-radius);
+}
+.stzh-olmap .ol-scale-line-inner {
+  font-size: var(--stzh-font-pico-font-size);
+  line-height: var(--stzh-font-pico-text-line-height);
+  border: 0.0625rem solid var(--stzh-color-grey55);
+  border-top: 0;
+  color: var(--stzh-color-grey55);
+  text-align: center;
+}