@oiz/stzh-components 2.1.0 → 2.2.0

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

@@ -184,6 +184,7 @@ stzh-upload *::after {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   padding: 0;
   border: none;
   background-color: transparent;
@@ -442,5 +443,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

@@ -40,7 +40,8 @@ export class StzhVbzLinechip {
     this.chip.focus();
   }
   render() {
-    const lineData = LineColors[this.line] || {};
+    const lineData = LineColors[this.line]
+      || {};
     const styles = {
       color: this.global
         ? "rgb(0, 0, 0)"
@@ -87,7 +88,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

@@ -26,7 +26,7 @@ const Template = (args) => (
       <img
         slot="logo"
         src="media/logo/stzh-default.svg"
-        alt="Logo Stadt Zürich"
+        alt="Logo City Zürich, go to homepage"
       ></img>
 
       <nav slot="nav" id="anchorNavMeta">
@@ -100,24 +100,25 @@ const Template = (args) => (
                 </stzh-message>
 
                 <stzh-fieldset legend="Name, E-Mail and Password">
-                  <stzh-dropdown
+                  <stzh-radiogroup
                     show-marker
                     name="salutation"
-                    no-search
-                    label="Salutation"
-                    options='[
-                      { "text": "Mrs.", "value": "mrs" },
-                      { "text": "Mr.", "value": "mr" }
-                    ]'
-                  ></stzh-dropdown>
+                    legend="Salutation"
+                    direction="horizontal"
+                    required
+                  >
+                    <stzh-radio value="mrs">Mrs.</stzh-radio>
+                    <stzh-radio value="mr">Mr</stzh-radio>
+                  </stzh-radiogroup>
 
                   <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/pages/example.stories.js

@@ -27,7 +27,7 @@ const Template = (args) => (
       <img
         slot="logo"
         src="media/logo/stzh-default.svg"
-        alt="Logo Stadt Zürich"
+        alt="Logo City Zürich, go to homepage"
       ></img>
 
       <nav slot="nav" id="anchorNavMeta">

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

@@ -61,7 +61,7 @@ const TemplateServices = (args) => (
       <img
         slot="logo"
         src="media/logo/stzh-default.svg"
-        alt="Logo Stadt Zürich"
+        alt="Logo City Zürich, go to homepage"
       ></img>
 
       <nav slot="nav" id="anchorNavMeta">
@@ -256,7 +256,7 @@ const TemplateMessages = (args) => (
       <img
         slot="logo"
         src="media/logo/stzh-default.svg"
-        alt="Logo Stadt Zürich"
+        alt="Logo City Zürich, go to homepage"
       ></img>
 
       <nav slot="nav" id="anchorNavMeta">
@@ -518,7 +518,7 @@ const TemplateActivities = (args) => (
       <img
         slot="logo"
         src="media/logo/stzh-default.svg"
-        alt="Logo Stadt Zürich"
+        alt="Logo City Zürich, go to homepage"
       ></img>
 
       <nav slot="nav" id="anchorNavMeta">

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
 };