@oiz/stzh-components 2.1.0 → 2.2.0-beta

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

@@ -0,0 +1,78 @@
+import { Host, h, } from "@stencil/core";
+import { hasSlot } from "../../utils/utils";
+/**
+ * @slot left - Slot for left column content
+ * @slot right - Slot for right column content
+ */
+export class StzhTextandimage {
+  constructor() {
+    this.floating = false;
+    this.size = "default";
+  }
+  render() {
+    const leftSlotUsed = hasSlot(this.element, "left");
+    const rightSlotUsed = hasSlot(this.element, "right");
+    const classes = {
+      "stzh-textandimage": true,
+      "stzh-textandimage--has-left": leftSlotUsed,
+      "stzh-textandimage--has-right": rightSlotUsed,
+      "stzh-textandimage--is-floating": this.floating,
+      [`stzh-textandimage--size-${this.size}`]: !!this.size
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-textandimage__left" }, h("slot", { name: "left" }), this.floating && h("slot", { name: "right" })), !this.floating &&
+      h("div", { class: "stzh-textandimage__right" }, h("slot", { name: "right" })))));
+  }
+  static get is() { return "stzh-textandimage"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-textandimage.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-textandimage.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "floating": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to float left content"
+        },
+        "attribute": "floating",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"small\" | \"large\"",
+          "resolved": "\"default\" | \"large\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size variant"
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}

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

@@ -0,0 +1,56 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Textandimage',
+  component: 'stzh-textandimage',
+  parameters: {
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('textandimage'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-textandimage {...args}>
+    <div slot="left">
+      <stzh-figure caption="Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna.">
+        <img src="media/images/example2.jpg" loading="lazy" alt="Example image" />
+      </stzh-figure>
+    </div>
+    <div slot="right">
+      <stzh-richtext>
+        <p>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.</p>
+        <ul>
+          <li>Laboris laborum aute id laboris esse aliquip nisi anim velit</li>
+          <li>
+            Minim sunt eiusmod do laborum
+            <ul>
+              <li>Laboris laborum aute</li>
+              <li>Laboris esse aliquip</li>
+            </ul>
+          </li>
+        </ul>
+        <p><strong>Laboris laborum aute</strong> id laboris culpa esse <b>aliquip nisi anim</b> velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
+        <p>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.</p>
+        <p>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.</p>
+      </stzh-richtext>
+    </div>
+  </stzh-textandimage>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};

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

@@ -289,11 +289,12 @@
   color: var(--stzh-color-grey61);
 }
 .stzh-toggle--is-disabled .stzh-toggle__input ~ .stzh-toggle__mark .stzh-toggle__check {
-  border-color: var(--stzh-color-grey25);
+  border-color: var(--stzh-color-grey13);
 }
 .stzh-toggle--is-disabled .stzh-toggle__input:checked ~ .stzh-toggle__mark {
   background-color: var(--stzh-color-black8);
 }
 .stzh-toggle--is-disabled .stzh-toggle__input:checked ~ .stzh-toggle__mark .stzh-toggle__check {
   background-color: var(--stzh-color-grey25);
+  border-color: var(--stzh-color-grey25);
 }

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { arrow, computePosition, offset, shift, flip, autoUpdate } from "@floating-ui/dom";
 import { createFocusTrap } from "focus-trap";
+import { isStzhElement } from "../../utils/utils";
 import { fetchTranslations } from "../../utils/translation-utils";
 import { waitForEvent } from "../../utils/event-utils";
 import { stopAnimations, animateTo } from "../../utils/animation-utils";
@@ -223,8 +224,7 @@ export class StzhTooltip {
     return this._trigger.indexOf(trigger) > -1;
   }
   async componentWillLoad() {
-    this.labelId = `stzh-tooltip-label-${tooltipCounter}`;
-    tooltipCounter++;
+    this.labelId = `stzh-tooltip-label-${tooltipCounter++}`;
     this.triggerWatcher(this.trigger);
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, "tooltip");
@@ -233,8 +233,9 @@ export class StzhTooltip {
   componentDidRender() {
     this.computePosition();
     if (this.interactive) {
+      const isStzh = isStzhElement(this.triggerElement.firstElementChild);
       this.triggerElement.firstElementChild
-        .setAttribute("aria-expanded", this.open ? "true" : "false");
+        .setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", this.open ? "true" : "false");
     }
     if (this.trap) {
       this.open ? this.trap.activate() : this.trap.deactivate();
@@ -279,11 +280,13 @@ export class StzhTooltip {
     if (this.autoUpdateCleanup) {
       this.autoUpdateCleanup();
     }
-    this.triggerElement.firstElementChild.removeEventListener("click", this.onClickTrigger);
-    this.triggerElement.firstElementChild.removeEventListener("mouseenter", this.onMouseEnterTrigger);
-    this.triggerElement.firstElementChild.removeEventListener("mouseleave", this.onMouseLeaveTrigger);
-    this.triggerElement.firstElementChild.removeEventListener("focusin", this.onFocusTrigger);
-    this.triggerElement.firstElementChild.removeEventListener("focusout", this.onBlurTrigger);
+    if (this.triggerElement && this.triggerElement.firstElementChild) {
+      this.triggerElement.firstElementChild.removeEventListener("click", this.onClickTrigger);
+      this.triggerElement.firstElementChild.removeEventListener("mouseenter", this.onMouseEnterTrigger);
+      this.triggerElement.firstElementChild.removeEventListener("mouseleave", this.onMouseLeaveTrigger);
+      this.triggerElement.firstElementChild.removeEventListener("focusin", this.onFocusTrigger);
+      this.triggerElement.firstElementChild.removeEventListener("focusout", this.onBlurTrigger);
+    }
   }
   render() {
     const classes = {

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

@@ -442,5 +442,5 @@ stzh-upload *::after {
 }
 .stzh-upload--is-disabled .stzh-upload__clickarea {
   cursor: not-allowed;
-  background-color: var(--stzh-color-grey5);
+  background-color: var(--stzh-color-black8);
 }

package/dist/collection/components/stzh-vbz-linechip/stzh-vbz-linechip.js

@@ -87,7 +87,7 @@ export class StzhVbzLinechip {
         "mutable": false,
         "complexType": {
           "original": "VBZ.Lines",
-          "resolved": "\"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"10\" | \"11\" | \"12\" | \"13\" | \"14\" | \"15\" | \"16\" | \"17\" | \"19\" | \"20\" | \"21\" | \"23\" | \"24\" | \"25\" | \"29\" | \"31\" | \"32\" | \"33\" | \"34\" | \"35\" | \"36\" | \"37\" | \"38\" | \"39\" | \"40\" | \"45\" | \"46\" | \"54\" | \"61\" | \"62\" | \"63\" | \"64\" | \"66\" | \"67\" | \"69\" | \"70\" | \"72\" | \"73\" | \"75\" | \"76\" | \"77\" | \"78\" | \"79\" | \"80\" | \"83\" | \"89\" | \"91\" | \"94\" | \"95\" | \"99\" | \"151\" | \"152\" | \"153\" | \"156\" | \"161\" | \"162\" | \"163\" | \"165\" | \"184\" | \"185\" | \"200\" | \"201\" | \"215\" | \"220\" | \"235\" | \"236\" | \"245\" | \"301\" | \"302\" | \"303\" | \"304\" | \"305\" | \"306\" | \"307\" | \"308\" | \"309\" | \"311\" | \"314\" | \"315\" | \"317\" | \"321\" | \"323\" | \"325\" | \"350\" | \"444\" | \"445\" | \"701\" | \"702\" | \"703\" | \"704\" | \"705\" | \"720\" | \"721\" | \"725\" | \"726\" | \"727\" | \"742\" | \"743\" | \"744\" | \"745\" | \"747\" | \"748\" | \"751\" | \"752\" | \"753\" | \"754\" | \"759\" | \"760\" | \"765\" | \"768\" | \"781\" | \"786\" | \"787\" | \"910\" | \"912\" | \"916\" | \"917\" | \"918\" | \"919\" | \"E\" | \"N\" | \"N1\" | \"N2\" | \"N4\" | \"N5\" | \"N6\" | \"N7\" | \"N8\" | \"N9\" | \"N10\" | \"N11\" | \"N12\" | \"N13\" | \"N14\" | \"N15\" | \"N16\" | \"N17\" | \"N18\" | \"N19\" | \"N30\" | \"N31\" | \"N32\" | \"N33\" | \"N34\" | \"N45\" | \"N72\" | \"N78\" | \"SN1\" | \"SN4\" | \"SN5\" | \"SN6\" | \"SN7\" | \"SN8\" | \"SN9\" | \"S2\" | \"S3\" | \"S4\" | \"S5\" | \"S6\" | \"S7\" | \"S8\" | \"S9\" | \"S10\" | \"S11\" | \"S14\" | \"S15\" | \"S16\" | \"S18\" | \"S19\" | \"S20\" | \"S21\" | \"S23\" | \"S24\" | \"S25\"",
+          "resolved": "\"2\" | \"4\" | \"5\" | \"3\" | \"6\" | \"7\" | \"8\" | \"9\" | \"10\" | \"11\" | \"12\" | \"13\" | \"14\" | \"15\" | \"16\" | \"17\" | \"19\" | \"20\" | \"21\" | \"23\" | \"24\" | \"25\" | \"29\" | \"31\" | \"32\" | \"33\" | \"34\" | \"35\" | \"36\" | \"37\" | \"38\" | \"39\" | \"40\" | \"45\" | \"46\" | \"54\" | \"61\" | \"62\" | \"63\" | \"64\" | \"66\" | \"67\" | \"69\" | \"70\" | \"72\" | \"73\" | \"75\" | \"76\" | \"77\" | \"78\" | \"79\" | \"80\" | \"83\" | \"89\" | \"91\" | \"94\" | \"95\" | \"99\" | \"151\" | \"152\" | \"153\" | \"156\" | \"161\" | \"162\" | \"163\" | \"165\" | \"184\" | \"185\" | \"200\" | \"201\" | \"215\" | \"220\" | \"235\" | \"236\" | \"245\" | \"301\" | \"302\" | \"303\" | \"304\" | \"305\" | \"306\" | \"307\" | \"308\" | \"309\" | \"311\" | \"314\" | \"315\" | \"317\" | \"321\" | \"323\" | \"325\" | \"350\" | \"444\" | \"445\" | \"701\" | \"702\" | \"703\" | \"704\" | \"705\" | \"720\" | \"721\" | \"725\" | \"726\" | \"727\" | \"742\" | \"743\" | \"744\" | \"745\" | \"747\" | \"748\" | \"751\" | \"752\" | \"753\" | \"754\" | \"759\" | \"760\" | \"765\" | \"768\" | \"781\" | \"786\" | \"787\" | \"910\" | \"912\" | \"916\" | \"917\" | \"918\" | \"919\" | \"E\" | \"N\" | \"N1\" | \"N2\" | \"N4\" | \"N5\" | \"N6\" | \"N7\" | \"N8\" | \"N9\" | \"N10\" | \"N11\" | \"N12\" | \"N13\" | \"N14\" | \"N15\" | \"N16\" | \"N17\" | \"N18\" | \"N19\" | \"N30\" | \"N31\" | \"N32\" | \"N33\" | \"N34\" | \"N45\" | \"N72\" | \"N78\" | \"SN1\" | \"SN4\" | \"SN5\" | \"SN6\" | \"SN7\" | \"SN8\" | \"SN9\" | \"S2\" | \"S3\" | \"S4\" | \"S5\" | \"S6\" | \"S7\" | \"S8\" | \"S9\" | \"S10\" | \"S11\" | \"S14\" | \"S15\" | \"S16\" | \"S18\" | \"S19\" | \"S20\" | \"S21\" | \"S23\" | \"S24\" | \"S25\"",
           "references": {
             "VBZ": {
               "location": "import",

package/dist/collection/components/stzh-vbz-majorticker/stzh-vbz-majorticker.css

@@ -99,5 +99,6 @@
 
 .stzh-vbz-majorticker__ghettobox {
   --background-color: var(--stzh-color-coral);
-  --stzh-base-invert-color: var(--stzh-color-black);
+  --color: var(--stzh-color-black);
+  --close-color: var(--stzh-color-black);
 }

package/dist/collection/components/stzh-vbz-majorticker/stzh-vbz-majorticker.js

@@ -1,17 +1,14 @@
 import { Host, h } from "@stencil/core";
-import axios from 'axios';
-import { createParagraphsFromBrs } from '../../utils/string-utils';
+import axios from "axios";
+import { createParagraphsFromBrs } from "../../utils/string-utils";
 import { fetchTranslations } from "../../utils/translation-utils";
 import { createGlobalAdapter } from "../../utils/date-adapter";
-const DISTURBANCE_INFORMATION = "0";
-const BASE_TYPE_GLOBAL = "GLOBAL";
-const CHANNEL_TICKER = "ticker";
-const CHANNEL_INFO_URL_FILTER = 'stadt-zuerich.ch/vbz';
+import { VBZ } from "../../index";
 /**
- *
  */
 export class StzhVbzMajorticker {
   constructor() {
+    this.disturbance = null;
     this.onGhettoboxOpen = () => {
       this.ghettoboxShown = true;
     };
@@ -26,6 +23,14 @@ export class StzhVbzMajorticker {
     this.ghettoboxCloseTimeKey = undefined;
     this.ghettoboxShown = true;
   }
+  /** Return whether ghettobox is shown (if has not been closed before) */
+  async getGhettoboxShown() {
+    return this.ghettoboxShown;
+  }
+  /** Return fetched disturbance */
+  async getDisturbance() {
+    return this.disturbance;
+  }
   async apiWatcher(newValue) {
     if (!newValue) {
       return;
@@ -44,14 +49,14 @@ export class StzhVbzMajorticker {
     else {
       this._data = newValue;
     }
-    const bigDisturbance = (_b = (_a = this._data) === null || _a === void 0 ? void 0 : _a.Message) === null || _b === void 0 ? void 0 : _b.find(message => message.category === DISTURBANCE_INFORMATION && message.baseType === BASE_TYPE_GLOBAL);
+    const bigDisturbance = (_b = (_a = this._data) === null || _a === void 0 ? void 0 : _a.Message) === null || _b === void 0 ? void 0 : _b.find(message => message.category === VBZ.DISTURBANCE_INFORMATION && message.baseType === VBZ.BASE_TYPE_GLOBAL);
     if (bigDisturbance) {
       const urls = bigDisturbance.channel
-        .filter(channel => channel.name === CHANNEL_TICKER && channel.url)
+        .filter(channel => channel.name === VBZ.CHANNEL_TICKER && channel.url)
         .map(channel => channel.url)
         .reduce((a, b) => a.concat(b), []);
       const infoUrl = urls
-        .find(url => url.url.indexOf(CHANNEL_INFO_URL_FILTER) !== -1);
+        .find(url => url.url.indexOf(VBZ.CHANNEL_INFO_URL_FILTER) !== -1);
       this.disturbance = {
         id: bigDisturbance.id,
         head: bigDisturbance.head,
@@ -63,6 +68,10 @@ export class StzhVbzMajorticker {
         infoUrl: infoUrl
       };
     }
+    this.stzhDisturbanceFetched.emit({
+      component: "stzh-vbz-majorticker",
+      disturbance: this.disturbance
+    });
   }
   async componentWillLoad() {
     if (!this.localization) {
@@ -83,7 +92,7 @@ export class StzhVbzMajorticker {
       "stzh-vbz-majorticker": true
     };
     return (h(Host, { hidden: !this.disturbance || !this.ghettoboxShown }, h("div", { class: classes }, this.disturbance &&
-      h("stzh-ghettobox", { onStzhOpen: this.onGhettoboxOpen, onStzhClose: this.onGhettoboxClose, class: "stzh-vbz-majorticker__ghettobox", closeTimeKey: this.ghettoboxCloseTimeKey, mainTitle: this.disturbance.head, publishDate: this.disturbance.startDate }, h("stzh-richtext", { innerHTML: this.disturbance.text }), this.disturbance.infoUrl ?
+      h("stzh-ghettobox", { onStzhOpen: this.onGhettoboxOpen, onStzhClose: this.onGhettoboxClose, class: "stzh-vbz-majorticker__ghettobox", hideClose: true, closeTimeKey: this.ghettoboxCloseTimeKey, mainTitle: this.disturbance.head, publishDate: this.disturbance.startDate }, h("stzh-richtext", { innerHTML: this.disturbance.text }), this.disturbance.infoUrl ?
         h("stzh-button", { slot: "button", href: this.disturbance.infoUrl.url }, this.disturbance.infoUrl.name)
         :
           h("stzh-button", { slot: "button", target: "_blank", href: this.moreInfoLink
@@ -116,7 +125,7 @@ export class StzhVbzMajorticker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "API URL(`{lang}` are replaced in the URL)"
+          "text": "API URL (`{lang}` is replaced in the URL)"
         },
         "attribute": "api",
         "reflect": false,
@@ -222,6 +231,69 @@ export class StzhVbzMajorticker {
       "ghettoboxShown": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "stzhDisturbanceFetched",
+        "name": "stzhDisturbanceFetched",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event when major disturbance was fetched"
+        },
+        "complexType": {
+          "original": "StzhVbzMajortickerDisturbanceFetchedEvent",
+          "resolved": "{ component: \"stzh-vbz-majorticker\"; disturbance: StzhVbzMajortickerDisturbance; }",
+          "references": {
+            "StzhVbzMajortickerDisturbanceFetchedEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getGhettoboxShown": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Return whether ghettobox is shown (if has not been closed before)",
+          "tags": []
+        }
+      },
+      "getDisturbance": {
+        "complexType": {
+          "signature": "() => Promise<StzhVbzMajortickerDisturbance>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "StzhVbzMajortickerDisturbance": {
+              "location": "import",
+              "path": "../../index"
+            }
+          },
+          "return": "Promise<StzhVbzMajortickerDisturbance>"
+        },
+        "docs": {
+          "text": "Return fetched disturbance",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{

package/dist/collection/components/stzh-vbz-ticker/stzh-vbz-ticker.css

@@ -152,21 +152,6 @@
 .stzh-vbz-ticker__title-part--disturbances {
   color: var(--stzh-color-error);
 }
-.stzh-vbz-ticker__description {
-  font-size: var(--stzh-font-micro-font-size);
-  line-height: var(--stzh-font-micro-text-line-height);
-  margin-top: var(--stzh-space-xsmall);
-}
-@media screen and (min-width: 1024px) {
-  .stzh-vbz-ticker__description {
-    margin-top: var(--stzh-space-small);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-vbz-ticker__description {
-    margin-top: var(--stzh-space-medium);
-  }
-}
 .stzh-vbz-ticker__link {
   margin-top: var(--stzh-space-small);
 }
@@ -184,7 +169,7 @@
 }
 .stzh-vbz-ticker__chips:not(:empty) {
   margin: calc(var(--stzh-space-xxsmall) * -1);
-  margin-top: calc(var(--stzh-space-small) - var(--stzh-space-xxsmall));
+  margin-top: calc(var(--stzh-space-medium) - var(--stzh-space-xxsmall));
 }
 .stzh-vbz-ticker__chip {
   margin: var(--stzh-space-xxsmall);

package/dist/collection/components/stzh-vbz-ticker/stzh-vbz-ticker.js

@@ -2,15 +2,7 @@ import { Host, h, Fragment } from "@stencil/core";
 import axios from 'axios';
 import { fetchTranslations } from "../../utils/translation-utils";
 import { createGlobalAdapter } from "../../utils/date-adapter";
-const CHANNEL_TICKER = "ticker";
-const CHANNEL_INFO_URL_FILTER = 'stadt-zuerich.ch/vbz';
-const BASE_TYPE_GLOBAL = "GLOBAL";
-const DISTURBANCE_GLOBAL = "__global__";
-const DISTURBANCE_INFORMATION = "0";
-const DISTURBANCE_CONSTRUCTION = "1";
-const DISTURBANCE_NORMAL = "2";
-const DISTURBANCE_EVENT = "4";
-const DISTURBANCE_BUS = "5";
+import { VBZ } from "../../index";
 /**
  * @slot link - Optional link to traffic situation
  */
@@ -19,12 +11,12 @@ export class StzhVbzTicker {
     this.globalDisturbances = [];
     this.lines = [];
     this.counter = {
-      [`${DISTURBANCE_GLOBAL}`]: 0,
-      [`${DISTURBANCE_INFORMATION}`]: 0,
-      [`${DISTURBANCE_CONSTRUCTION}`]: 0,
-      [`${DISTURBANCE_NORMAL}`]: 0,
-      [`${DISTURBANCE_EVENT}`]: 0,
-      [`${DISTURBANCE_BUS}`]: 0
+      [`${VBZ.DISTURBANCE_GLOBAL}`]: 0,
+      [`${VBZ.DISTURBANCE_INFORMATION}`]: 0,
+      [`${VBZ.DISTURBANCE_CONSTRUCTION}`]: 0,
+      [`${VBZ.DISTURBANCE_NORMAL}`]: 0,
+      [`${VBZ.DISTURBANCE_EVENT}`]: 0,
+      [`${VBZ.DISTURBANCE_BUS}`]: 0
     };
     this.api = "https://fpbe.zvv.ch/restproxy/himsearch?format=json&accessId=unic&channels=ticker&additionalfields=tickers:VBZ&orderBy=LMOD_DESC&lang={lang}";
     this.data = "";
@@ -58,13 +50,13 @@ export class StzhVbzTicker {
     const lines = {};
     (_b = (_a = this._data) === null || _a === void 0 ? void 0 : _a.Message) === null || _b === void 0 ? void 0 : _b.forEach(message => {
       const urls = message.channel
-        .filter(channel => channel.name === CHANNEL_TICKER && channel.url)
+        .filter(channel => channel.name === VBZ.CHANNEL_TICKER && channel.url)
         .map(channel => channel.url)
         .reduce((a, b) => a.concat(b), []);
       const infoUrl = urls
-        .find(url => url.url.indexOf(CHANNEL_INFO_URL_FILTER) !== -1);
-      if (message.baseType === BASE_TYPE_GLOBAL) {
-        this.counter[DISTURBANCE_GLOBAL]++;
+        .find(url => url.url.indexOf(VBZ.CHANNEL_INFO_URL_FILTER) !== -1);
+      if (message.baseType === VBZ.BASE_TYPE_GLOBAL) {
+        this.counter[VBZ.DISTURBANCE_GLOBAL]++;
         this.globalDisturbances.push({
           id: message.id,
           head: message.head,
@@ -83,8 +75,8 @@ export class StzhVbzTicker {
       // don't add to lines if no line/product has been linked to
       // or if it is a information disturbance or global
       if (message.affectedProduct
-        && message.category !== DISTURBANCE_INFORMATION
-        && message.baseType !== BASE_TYPE_GLOBAL) {
+        && message.category !== VBZ.DISTURBANCE_INFORMATION
+        && message.baseType !== VBZ.BASE_TYPE_GLOBAL) {
         message.affectedProduct.forEach(product => {
           if (typeof lines[product.lineId] === "undefined") {
             lines[product.lineId] = {
@@ -95,7 +87,7 @@ export class StzhVbzTicker {
               alert: false
             };
           }
-          if (message.category === DISTURBANCE_NORMAL) {
+          if (message.category === VBZ.DISTURBANCE_NORMAL) {
             lines[product.lineId].alert = true;
           }
           lines[product.lineId].disturbances.push({
@@ -137,8 +129,8 @@ export class StzhVbzTicker {
     return (h("div", { class: {
         "stzh-vbz-ticker__disturbance": true,
         [`stzh-vbz-ticker__disturbance--type${disturbance.category}`]: !!disturbance.category
-      } }, disturbance.category === DISTURBANCE_NORMAL
-      || disturbance.baseType === BASE_TYPE_GLOBAL
+      } }, disturbance.category === VBZ.DISTURBANCE_NORMAL
+      || disturbance.baseType === VBZ.BASE_TYPE_GLOBAL
       ?
         h("stzh-icon", { name: "warning-big", class: "stzh-vbz-ticker__disturbance-icon" })
       :
@@ -153,17 +145,14 @@ export class StzhVbzTicker {
     const classes = {
       "stzh-vbz-ticker": true
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-vbz-ticker__text" }, h("div", { class: "stzh-vbz-ticker__title" }, h("div", { class: "stzh-vbz-ticker__title-parts" }, this.lines.length === 0 && this.counter[DISTURBANCE_GLOBAL] === 0 &&
-      h("div", { class: "stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--no-disturbances" }, h("stzh-icon", { class: "stzh-vbz-ticker__icon", name: "checkmark-circle" }), this.localization.noDisturbances), this.counter[DISTURBANCE_GLOBAL] > 0 &&
-      h("div", { class: "stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--major-events" }, h("stzh-icon", { class: "stzh-vbz-ticker__icon", name: "important-warning" }), this.localization.majorEventTitle), this.counter[DISTURBANCE_NORMAL] > 0 &&
-      h("div", { class: "stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--disturbances" }, h("stzh-icon", { class: "stzh-vbz-ticker__icon", name: "warning" }), this.localization.disturbanceTitle), (this.counter[DISTURBANCE_CONSTRUCTION] > 0
-      || this.counter[DISTURBANCE_EVENT] > 0
-      || this.counter[DISTURBANCE_BUS] > 0) &&
-      h("div", { class: "stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--others" }, h("stzh-icon", { class: "stzh-vbz-ticker__icon", name: "construction" }), this.localization.othersTitle))), (this.lines.length > 0 || this.counter[DISTURBANCE_GLOBAL] > 0) &&
-      h(Fragment, null, h("div", { class: "stzh-vbz-ticker__description" }, this.counter[DISTURBANCE_GLOBAL] > 0
-        ? this.localization.globalDisturbance
-        : this.localization.affectedLines), h("div", { class: "stzh-vbz-ticker__chips", role: "list" }, this.counter[DISTURBANCE_GLOBAL] > 0 &&
-        h("div", { class: "stzh-vbz-ticker__chip", role: "listitem" }, h("stzh-tooltip", { class: "stzh-vbz-ticker__tooltip" }, h("stzh-vbz-linechip", { global: true }), h("div", { class: "stzh-vbz-ticker__tooltip-content", slot: "content" }, this.globalDisturbances.map((disturbance) => this.renderDisturbance(disturbance))))), this.lines.map((line) => h("div", { class: "stzh-vbz-ticker__chip", role: "listitem" }, h("stzh-tooltip", { class: "stzh-vbz-ticker__tooltip" }, h("stzh-vbz-linechip", { line: line.line, alert: line.alert }), h("div", { class: "stzh-vbz-ticker__tooltip-content", slot: "content" }, line.disturbances.map((disturbance) => this.renderDisturbance(disturbance))))))))), h("div", { class: "stzh-vbz-ticker__link" }, h("slot", { name: "link" })))));
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-vbz-ticker__text" }, h("div", { class: "stzh-vbz-ticker__title" }, h("div", { class: "stzh-vbz-ticker__title-parts" }, this.lines.length === 0 && this.counter[VBZ.DISTURBANCE_GLOBAL] === 0 &&
+      h("div", { class: "stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--no-disturbances" }, h("stzh-icon", { class: "stzh-vbz-ticker__icon", name: "checkmark-circle" }), this.localization.noDisturbances), this.counter[VBZ.DISTURBANCE_NORMAL] > 0 &&
+      h("div", { class: "stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--disturbances" }, h("stzh-icon", { class: "stzh-vbz-ticker__icon", name: "warning" }), this.counter[VBZ.DISTURBANCE_GLOBAL] > 0 ?
+        this.localization.furtherDisturbanceTitle : this.localization.disturbanceTitle), (this.counter[VBZ.DISTURBANCE_CONSTRUCTION] > 0
+      || this.counter[VBZ.DISTURBANCE_EVENT] > 0
+      || this.counter[VBZ.DISTURBANCE_BUS] > 0) &&
+      h("div", { class: "stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--others" }, h("stzh-icon", { class: "stzh-vbz-ticker__icon", name: "construction" }), this.localization.constructionsTitle))), (this.lines.length > 0 || this.counter[VBZ.DISTURBANCE_GLOBAL] > 0) &&
+      h(Fragment, null, h("div", { class: "stzh-vbz-ticker__chips", role: "list" }, this.lines.map((line) => h("div", { class: "stzh-vbz-ticker__chip", role: "listitem" }, h("stzh-tooltip", { class: "stzh-vbz-ticker__tooltip" }, h("stzh-vbz-linechip", { line: line.line, alert: line.alert }), h("div", { class: "stzh-vbz-ticker__tooltip-content", slot: "content" }, line.disturbances.map((disturbance) => this.renderDisturbance(disturbance))))))))), h("div", { class: "stzh-vbz-ticker__link" }, h("slot", { name: "link" })))));
   }
   static get is() { return "stzh-vbz-ticker"; }
   static get encapsulation() { return "scoped"; }
@@ -191,7 +180,7 @@ export class StzhVbzTicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "API URL(`{lang}` are replaced in the URL)"
+          "text": "API URL (`{lang}` is replaced in the URL)"
         },
         "attribute": "api",
         "reflect": false,
@@ -258,7 +247,7 @@ export class StzhVbzTicker {
         "mutable": false,
         "complexType": {
           "original": "StzhVbzTickerLocalizedText",
-          "resolved": "StzhLocaleComponent & { moreInfo: string; noDisturbances: string; globalDisturbance: string; affectedLines: string; constructionSite: string; event: string; disturbance: string; railReplacementBus: string; majorEvent: string; majorEventTitle: string; disturbanceTitle: string; othersTitle: string; }",
+          "resolved": "StzhLocaleComponent & { moreInfo: string; noDisturbances: string; globalDisturbance: string; affectedLines: string; constructionSite: string; event: string; disturbance: string; railReplacementBus: string; majorEvent: string; majorEventTitle: string; disturbanceTitle: string; furtherDisturbanceTitle: string; constructionsTitle: string; }",
           "references": {
             "StzhVbzTickerLocalizedText": {
               "location": "import",

package/dist/collection/index.js

@@ -1,6 +1,18 @@
 // ---
 // Global window types
 // ---
+export var VBZ;
+(function (VBZ) {
+  VBZ.BASE_TYPE_GLOBAL = "GLOBAL";
+  VBZ.CHANNEL_TICKER = "ticker";
+  VBZ.CHANNEL_INFO_URL_FILTER = "stadt-zuerich.ch/vbz";
+  VBZ.DISTURBANCE_GLOBAL = "__global__";
+  VBZ.DISTURBANCE_INFORMATION = "0";
+  VBZ.DISTURBANCE_CONSTRUCTION = "1";
+  VBZ.DISTURBANCE_NORMAL = "2";
+  VBZ.DISTURBANCE_EVENT = "4";
+  VBZ.DISTURBANCE_BUS = "5";
+})(VBZ || (VBZ = {}));
 // ---
 // Stencil component types
 // ---

package/dist/collection/pages/egov.stories.js

@@ -114,10 +114,11 @@ const Template = (args) => (
                   <stzh-input show-marker name="title" label="Title" description="Helptext"></stzh-input>
 
                   <stzh-row>
-                    <stzh-cell span="6">
+                    <stzh-cell span-small="6">
                       <stzh-input show-marker name="first_name" label="First Name" required></stzh-input>
                     </stzh-cell>
-                    <stzh-cell span="6">
+                    <stzh-cell span-small="6">
+                      <stzh-vspace size="large" size-small="none"></stzh-vspace>
                       <stzh-input show-marker name="last_name" label="Last Name" required></stzh-input>
                     </stzh-cell>
                   </stzh-row>
@@ -144,7 +145,7 @@ const Template = (args) => (
                   </stzh-checkboxgroup>
 
                   <stzh-row>
-                    <stzh-cell span="6">
+                    <stzh-cell span-small="6">
                       <stzh-input
                         show-marker
                         name="floating_1"
@@ -159,7 +160,8 @@ const Template = (args) => (
                         </stzh-richtext>
                       </stzh-input>
                     </stzh-cell>
-                    <stzh-cell span="6">
+                    <stzh-cell span-small="6">
+                      <stzh-vspace size="large" size-small="none"></stzh-vspace>
                       <stzh-input show-marker name="floating_2" label="Floating Label"></stzh-input>
                     </stzh-cell>
                   </stzh-row>
@@ -208,7 +210,7 @@ const Template = (args) => (
                   </stzh-checkboxgroup>
 
                   <stzh-row>
-                    <stzh-cell span="6">
+                    <stzh-cell span-small="6">
                       <stzh-input
                         show-marker
                         required
@@ -219,7 +221,8 @@ const Template = (args) => (
                         error='["Please enter a valid email address."]'
                       ></stzh-input>
                     </stzh-cell>
-                    <stzh-cell span="6">
+                    <stzh-cell span-small="6">
+                      <stzh-vspace size="large" size-small="none"></stzh-vspace>
                       <stzh-input show-marker required name="phone" label="Phone"></stzh-input>
                     </stzh-cell>
                   </stzh-row>

package/dist/collection/patterns/appointments.stories.js

@@ -1,8 +1,9 @@
 import { h } from '../utils/h';
-import { Default as Appointments } from '../components/stzh-appointments/stzh-appointments.stories'
 import { withDesign } from 'storybook-addon-designs';
 import { getFigmaLink } from '../../figma';
 
+import { Default as Appointments } from '../components/stzh-appointments/stzh-appointments.stories'
+
 export default {
   title: 'Patterns/Appointments',
   parameters: {
@@ -27,7 +28,7 @@ const Template = (args) => (
       <stzh-section variant="highlight">
         <stzh-heading level="2" with-border>Select Date</stzh-heading>
         <stzh-vspace curve="medium"></stzh-vspace>
-        <Appointments {...args.appointments}></Appointments>
+        <Appointments {...Appointments.args}></Appointments>
         <stzh-vspace size="xlarge"></stzh-vspace>
         <stzh-actions variant="process" with-border>
           <stzh-button slot="primary" href="#" variant="primary">Next Step</stzh-button>
@@ -39,5 +40,4 @@ const Template = (args) => (
 
 export const Default = Template.bind({});
 Default.args = {
-  appointments: Appointments.args
 };