@oiz/stzh-components 3.1.0 → 3.2.0-beta1

package/dist/collection/components/stzh-vbz-connection-finder/stzh-vbz-connection-finder.js

@@ -0,0 +1,26 @@
+import { h, Host } from "@stencil/core";
+/**
+ *
+ */
+export class StzhVbzConnectionFinder {
+  render() {
+    const classes = {
+      "stzh-vbz-connection-finder": true,
+    };
+    return (h(Host, null, h("div", { class: classes }, h("script", { src: "https://fpcdn.zvv.ch/cdn/v1/searchmask.min.js" }), h("div", { id: "zvv-searchmask", "data-accent-color": "#0F05A0", "data-background-color": "#ffffff", "data-font-family": "'HelveticaNeueLTW01_55Roman','Helvetica Neue','Helvetica,Arial',sans-serif;" }))));
+  }
+  static get is() { return "stzh-vbz-connection-finder"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-vbz-connection-finder.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-vbz-connection-finder.css"]
+    };
+  }
+  static get elementRef() { return "element"; }
+}
+//# sourceMappingURL=stzh-vbz-connection-finder.js.map

package/dist/collection/components/stzh-vbz-connection-finder/stzh-vbz-connection-finder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-vbz-connection-finder.js","sourceRoot":"","sources":["../../../../src/components/stzh-vbz-connection-finder/stzh-vbz-connection-finder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE5D;;GAEG;AAMH,MAAM,OAAO,uBAAuB;EAGlC,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,4BAA4B,EAAE,IAAI;KACnC,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,cAAQ,GAAG,EAAC,+CAA+C,GAAU;QACrE,WACE,EAAE,EAAC,gBAAgB,uBACD,SAAS,2BACL,SAAS,sBACd,6EAA6E,GACzF,CACH,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host } from \"@stencil/core\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-vbz-connection-finder\",\n  styleUrl: \"stzh-vbz-connection-finder.scss\",\n  scoped: true,\n})\nexport class StzhVbzConnectionFinder {\n  @Element() element: HTMLStzhVbzConnectionFinderElement;\n\n  render() {\n    const classes = {\n      \"stzh-vbz-connection-finder\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <script src=\"https://fpcdn.zvv.ch/cdn/v1/searchmask.min.js\"></script>\n          <div\n            id=\"zvv-searchmask\"\n            data-accent-color=\"#0F05A0\"\n            data-background-color=\"#ffffff\"\n            data-font-family=\"'HelveticaNeueLTW01_55Roman','Helvetica Neue','Helvetica,Arial',sans-serif;\"\n          ></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-vbz-connection-finder/stzh-vbz-connection-finder.stories.js

@@ -0,0 +1,39 @@
+import { createComponentStory } from '../../utils/story-utils';
+import { withActions } from '@storybook/addon-actions/decorator';
+import readme from './readme.md?raw';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+const COMPONENT_NAME = 'stzh-vbz-connection-finder';
+const story = createComponentStory(COMPONENT_NAME);
+
+const TEMPLATE = `
+<stzh-vbz-connection-finder></stzh-vbz-connection-finder>
+`;
+
+export default {
+  title: 'Components/VBZ/VbzConnectionFinder',
+  component: COMPONENT_NAME,
+  parameters: {
+    layout: 'fullscreen',
+    actions: {
+      handles: []
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('vbz_connectionfinder', 'EgegIml8Pz4neEpF8KLaDF'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [withActions, withDesign]
+};
+
+export const Default = {
+  render: (args) => story(args, TEMPLATE),
+  args: {}
+};

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

@@ -0,0 +1,341 @@
+/**
+ * Colors
+ */
+/* Signal colors */
+/* Old colors (TODO: cleanup when not needed anymore) */
+/**
+ * Base
+ */
+/**
+ * Selection
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * Icons
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Footer
+ */
+/**
+ * Fieldset
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Text
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Dialogs / Popover
+ */
+/**
+ * Overlays
+ */
+/**
+ * Accordions
+ */
+/**
+ * Timeline
+ */
+/**
+ * Buttons
+ */
+/**
+ * Ratios
+ */
+/**
+ * Pagetitle
+ */
+/**
+ * TopnewsMostsearched
+ */
+/**
+ * Calendar
+ */
+/**
+ * Cta
+ */
+/**
+ * Toasts
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Container
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Ratios
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-medium);
+  font-weight: var(--stzh-font-weight-medium);
+  font-style: var(--stzh-font-style-medium);
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+  /* default outline value, which will be applied to all elements receiving focus
+  the .has-focus class is used by the focus target */
+}
+:host[hidden] {
+  display: none;
+}
+:host::-moz-selection {
+  color: var(--stzh-selection-color);
+  background-color: var(--stzh-selection-background-color);
+}
+:host::selection {
+  color: var(--stzh-selection-color);
+  background-color: var(--stzh-selection-background-color);
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
+  -webkit-text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);
+          text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);
+}
+:host .has-focus {
+  outline: var(--stzh-flyingfocus-color) solid 0.125rem;
+  outline-offset: 0.125rem;
+}
+:host .stzh-fylingfocus-focused {
+  outline-style: none !important;
+}
+:host .stzh-fylingfocus-focused::-moz-focus-inner {
+  border: 0 !important;
+}
+
+/**
+* @prop --background-color: Background color of top news section
+* @prop --background-color-mostsearched: Background color of top most searched section
+*
+* @prop --stzh-vbz-intro-subtitle-font: **Global**: Font of the topnews subtitle
+* @prop --stzh-vbz-intro-topnews-item-subtitle-color: **Global**: Color of the topnews subtitle
+* @prop --stzh-vbz-intro-topnews-item-subtitle-highlighted-color: **Global**: Color of the topnews subtitle (highlighted variant)
+*/
+:host {
+  --background-color-topnews: var(--stzh-topnews-background-color);
+  --background-color-mostsearched: var(--stzh-mostsearched-background-color);
+  --topnews-item-subtitle-font: var(--stzh-vbz-intro-topnews-subtitle-font, var(--stzh-font-family-medium));
+  --topnews-item-subtitle-color: var(--stzh-vbz-intro-topnews-item-subtitle-color, var(--stzh-color-primary70));
+  --topnews-item-subtitle-highlighted-color: var(--stzh-vbz-intro-topnews-item-subtitle-highlighted-color, var(--stzh-color-primary60));
+  --grid-template-areas: "ticker ticker ticker ticker" "quicklinks quicklinks quicklinks quicklinks";
+}
+@media screen and (min-width: 900px) {
+  :host {
+    --grid-template-areas: "ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks";
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host {
+    --grid-template-areas: "ticker ticker ticker ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks quicklinks";
+  }
+}
+
+.stzh-vbz-intro {
+  -moz-column-gap: var(--stzh-grid-gutter);
+       column-gap: var(--stzh-grid-gutter);
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-areas: var(--grid-template-areas);
+  /**
+   * Quick links.
+   */
+}
+@media screen and (min-width: 600px) {
+  .stzh-vbz-intro {
+    -moz-column-gap: var(--stzh-grid-gutter-small);
+         column-gap: var(--stzh-grid-gutter-small);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-vbz-intro {
+    -moz-column-gap: var(--stzh-grid-gutter-medium);
+         column-gap: var(--stzh-grid-gutter-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-vbz-intro {
+    -moz-column-gap: var(--stzh-grid-gutter-large);
+         column-gap: var(--stzh-grid-gutter-large);
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-vbz-intro {
+    -moz-column-gap: var(--stzh-grid-gutter-ultra);
+         column-gap: var(--stzh-grid-gutter-ultra);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-vbz-intro {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-vbz-intro {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+}
+.stzh-vbz-intro__ticker, .stzh-vbz-intro__quicklinks {
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--stzh-space-medium);
+  padding-bottom: var(--stzh-space-medium);
+}
+@media screen and (min-width: 600px) {
+  .stzh-vbz-intro__ticker, .stzh-vbz-intro__quicklinks {
+    padding-top: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-vbz-intro__ticker, .stzh-vbz-intro__quicklinks {
+    padding-top: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-vbz-intro__ticker, .stzh-vbz-intro__quicklinks {
+    padding-top: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-vbz-intro__ticker, .stzh-vbz-intro__quicklinks {
+    padding-bottom: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-vbz-intro__ticker, .stzh-vbz-intro__quicklinks {
+    padding-bottom: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-vbz-intro__ticker, .stzh-vbz-intro__quicklinks {
+    padding-bottom: var(--stzh-space-xxlarge);
+  }
+}
+.stzh-vbz-intro__ticker {
+  grid-area: ticker;
+}
+@media screen and (min-width: 1600px) {
+  .stzh-vbz-intro__ticker {
+    padding-left: 0;
+  }
+}
+.stzh-vbz-intro__quicklinks {
+  grid-area: quicklinks;
+  background-color: var(--stzh-color-primary60);
+  padding-left: var(--stzh-space-large);
+  margin-left: -1.25rem;
+  padding-right: var(--stzh-space-large);
+  margin-right: -1.25rem;
+}
+@media screen and (min-width: 600px) {
+  .stzh-vbz-intro__quicklinks {
+    display: grid;
+    gap: 0 var(--stzh-space-large);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    padding-left: 2rem;
+    margin-left: -2rem;
+    padding-right: 2rem;
+    margin-right: -2rem;
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-vbz-intro__quicklinks {
+    display: flex;
+    gap: inherit;
+    grid-template-columns: inherit;
+    padding-left: 2.5rem;
+    margin-left: inherit;
+    padding-right: 2.5rem;
+    margin-right: -2.5rem;
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-vbz-intro__quicklinks {
+    padding-right: 4rem;
+    margin-right: -4rem;
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-vbz-intro__quicklinks {
+    margin-right: calc(((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) * -0.5));
+  }
+}
+.stzh-vbz-intro .stzh-vbz-intro-quicklinks__heading {
+  --color: var(--stzh-color-white);
+  margin-bottom: var(--stzh-space-xsmall);
+}
+.stzh-vbz-intro .stzh-vbz-intro-quicklink__link {
+  --text-decoration-line: none;
+  --color: var(--stzh-color-white);
+  --hover-text-decoration-line: none;
+  --hover-color: var(--stzh-color-white);
+  transition: transform 150ms ease;
+  padding-top: var(--stzh-space-xsmall);
+  padding-bottom: var(--stzh-space-xsmall);
+}
+.stzh-vbz-intro .stzh-vbz-intro-quicklink__link:hover {
+  transform: translateX(0.625rem);
+}
+@media screen and (min-width: 900px) {
+  .stzh-vbz-intro .stzh-vbz-intro-quicklink__link:hover {
+    transform: translateX(1.25rem);
+  }
+}

package/dist/collection/components/stzh-vbz-intro/stzh-vbz-intro.e2e.js

@@ -0,0 +1,16 @@
+import { test } from "@playwright/test";
+import { visualDiff } from "../../../.build/test/utils";
+const URL = "components-pagetitle";
+const STORIES = ["default"];
+test.describe("vbz intro", () => {
+  STORIES.forEach((storyId) => {
+    test(`story ${storyId} visual diff`, async ({ page }) => {
+      await visualDiff({
+        storyId,
+        page,
+        url: URL,
+      });
+    });
+  });
+});
+//# sourceMappingURL=stzh-vbz-intro.e2e.js.map

package/dist/collection/components/stzh-vbz-intro/stzh-vbz-intro.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-vbz-intro.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-vbz-intro/stzh-vbz-intro.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,sBAAsB,CAAC;AAEnC,MAAM,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC;AAE5B,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EAC9B,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACtD,MAAM,UAAU,CAAC;QACf,OAAO;QACP,IAAI;QACJ,GAAG,EAAE,GAAG;OACT,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../.build/test/utils\";\n\nconst URL = \"components-pagetitle\";\n\nconst STORIES = [\"default\"];\n\ntest.describe(\"vbz intro\", () => {\n  STORIES.forEach((storyId) => {\n    test(`story ${storyId} visual diff`, async ({ page }) => {\n      await visualDiff({\n        storyId,\n        page,\n        url: URL,\n      });\n    });\n  });\n});\n"]}

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

@@ -0,0 +1,110 @@
+import { h, Host } from "@stencil/core";
+export class StzhVbzIntro {
+  constructor() {
+    this._quicklinks = [];
+    this.init = () => {
+      this.quicklinksWatcher(this.quicklinks);
+    };
+    this.localization = undefined;
+    this.quicklinks = [];
+  }
+  quicklinksWatcher(newValue) {
+    if (!newValue) {
+      this._quicklinks = [];
+    }
+    else if (typeof newValue === "string") {
+      try {
+        this._quicklinks = JSON.parse(newValue);
+      }
+      catch (e) {
+        this._quicklinks = [];
+      }
+    }
+    else {
+      this._quicklinks = newValue;
+    }
+  }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "vbz-intro");
+    }
+  }
+  connectedCallback() {
+    this.init();
+  }
+  render() {
+    const classes = {
+      "stzh-vbz-intro": true,
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-vbz-intro__ticker" }, h("slot", { name: "ticker" })), this._quicklinks.length > 0 && (h("div", { class: "stzh-vbz-intro__quicklinks" }, h("stzh-heading", { class: "stzh-vbz-intro-quicklinks__heading" }, this.localization.quicklinksHeading), this._quicklinks.map(item => (h("div", { class: "stzh-vbz-intro-quicklink" }, h("stzh-link", { class: "stzh-vbz-intro-quicklink__link", href: item.href, icon: "arrow-right" }, item.label)))))))));
+  }
+  static get is() { return "stzh-vbz-intro"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-vbz-intro.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-vbz-intro.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhVbzIntroLocalizedText",
+          "resolved": "StzhLocaleComponent & { quicklinksHeading: string; }",
+          "references": {
+            "StzhVbzIntroLocalizedText": {
+              "location": "import",
+              "path": "./stzh-vbz-intro.localization",
+              "id": "src/components/stzh-vbz-intro/stzh-vbz-intro.localization.ts::StzhVbzIntroLocalizedText"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings."
+        }
+      },
+      "quicklinks": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhVbzQuicklink[] | string",
+          "resolved": "StzhVbzQuicklink[] | string",
+          "references": {
+            "StzhVbzQuicklink": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhVbzQuicklink"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Most searched items"
+        },
+        "attribute": "quicklinks",
+        "reflect": false,
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "quicklinks",
+        "methodName": "quicklinksWatcher"
+      }];
+  }
+}
+//# sourceMappingURL=stzh-vbz-intro.js.map

package/dist/collection/components/stzh-vbz-intro/stzh-vbz-intro.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-vbz-intro.js","sourceRoot":"","sources":["../../../../src/components/stzh-vbz-intro/stzh-vbz-intro.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AASzE,MAAM,OAAO,YAAY;;IAQf,gBAAW,GAA2B,EAAE,CAAC;IAiBzC,SAAI,GAAG,GAAG,EAAE;MAClB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAC;;sBApBgD,EAAE;;EAIpD,iBAAiB,CAAC,QAAqC;IACrD,IAAI,CAAC,QAAQ,EAAE;MACb,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;KACvB;SAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MACvC,IAAI;QACF,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;OACzC;MAAC,OAAO,CAAC,EAAE;QACV,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;OACvB;KACF;SAAM;MACL,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;KAC7B;EACH,CAAC;EAMD,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;KACpG;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;EACd,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,gBAAgB,EAAE,IAAI;KACvB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,WAAK,KAAK,EAAC,wBAAwB;UACjC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;QACL,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CAC9B,WAAK,KAAK,EAAC,4BAA4B;UACrC,oBAAc,KAAK,EAAC,oCAAoC,IACrD,IAAI,CAAC,YAAY,CAAC,iBAAiB,CACvB;UACd,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC5B,WAAK,KAAK,EAAC,0BAA0B;YACnC,iBAAW,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,aAAa,IACnF,IAAI,CAAC,KAAK,CACD,CACR,CACP,CAAC,CACE,CACP,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport { StzhMostsearchedItem, StzhVbzQuicklink } from \"../../index\";\nimport { StzhVbzIntroLocalizedText } from \"./stzh-vbz-intro.localization\";\n\n@Component({\n  tag: \"stzh-vbz-intro\",\n  styleUrl: \"stzh-vbz-intro.scss\",\n  scoped: true,\n})\nexport class StzhVbzIntro {\n  @Element() element: HTMLStzhVbzIntroElement;\n\n  /** Translation strings. */\n  @Prop() localization: StzhVbzIntroLocalizedText;\n\n  /** Most searched items */\n  @Prop() quicklinks: StzhVbzQuicklink[] | string = [];\n  private _quicklinks: StzhMostsearchedItem[] = [];\n\n  @Watch(\"quicklinks\")\n  quicklinksWatcher(newValue: StzhVbzQuicklink[] | string) {\n    if (!newValue) {\n      this._quicklinks = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._quicklinks = JSON.parse(newValue);\n      } catch (e) {\n        this._quicklinks = [];\n      }\n    } else {\n      this._quicklinks = newValue;\n    }\n  }\n\n  private init = () => {\n    this.quicklinksWatcher(this.quicklinks);\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"vbz-intro\");\n    }\n  }\n\n  connectedCallback() {\n    this.init();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-vbz-intro\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-vbz-intro__ticker\">\n            <slot name=\"ticker\"></slot>\n          </div>\n          {this._quicklinks.length > 0 && (\n            <div class=\"stzh-vbz-intro__quicklinks\">\n              <stzh-heading class=\"stzh-vbz-intro-quicklinks__heading\">\n                {this.localization.quicklinksHeading}\n              </stzh-heading>\n              {this._quicklinks.map(item => (\n                <div class=\"stzh-vbz-intro-quicklink\">\n                  <stzh-link class=\"stzh-vbz-intro-quicklink__link\" href={item.href} icon={\"arrow-right\"}>\n                    {item.label}\n                  </stzh-link>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-vbz-intro/stzh-vbz-intro.localization.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=stzh-vbz-intro.localization.js.map

package/dist/collection/components/stzh-vbz-intro/stzh-vbz-intro.localization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-vbz-intro.localization.js","sourceRoot":"","sources":["../../../../src/components/stzh-vbz-intro/stzh-vbz-intro.localization.ts"],"names":[],"mappings":"","sourcesContent":["import { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nexport type StzhVbzIntroLocalizedText = StzhLocaleComponent & {\n  quicklinksHeading: string;\n};\n"]}

package/dist/collection/components/stzh-vbz-intro/stzh-vbz-intro.stories.js

@@ -0,0 +1,75 @@
+import { createComponentStory } from '../../utils/story-utils';
+import { withActions } from '@storybook/addon-actions/decorator';
+import readme from './readme.md?raw';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+const COMPONENT_NAME = 'stzh-vbz-intro';
+const story = createComponentStory(COMPONENT_NAME);
+
+const TEMPLATE = `
+<stzh-vbz-intro>
+  <stzh-vbz-ticker slot="ticker">
+    <stzh-link slot="link" href="https://www.stadt-zuerich.ch/vbz/de/index/fahrplan/verkehrslage.html">
+      Traffic information
+    </stzh-link>
+</stzh-vbz-ticker>
+</stzh-vbz-intro>;
+`;
+
+const quicklinks = [
+  {
+    label: 'Hindernisfrei unterwegs',
+    href: '#'
+  },
+  {
+    label: 'Liniennetzpläne',
+    href: '#'
+  },
+  {
+    label: 'Haltestellen-Fahrpläne',
+    href: '#'
+  },
+  {
+    label: 'Infrastruktur Planer/Unternehmer',
+    href: '#'
+  },
+  {
+    label: 'Fundbüro',
+    href: '#'
+  },
+  {
+    label: 'Lieferanten',
+    href: '#'
+  },
+  {
+    label: 'VBZ TrafficMedia',
+    href: '#'
+  }
+];
+
+export default {
+  title: 'Components/Vbz/VbzIntro',
+  component: COMPONENT_NAME,
+  parameters: {
+    layout: 'fullwidth',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('vbz_intro', 'EgegIml8Pz4neEpF8KLaDF'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [withActions, withDesign]
+};
+
+export const Default = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    quicklinks: quicklinks
+  }
+};

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

@@ -174,12 +174,12 @@
   line-height: var(--stzh-font-nano-text-line-height);
   position: relative;
   border: none;
-  margin: 0;
+  margin: var(--stzh-space-xsmall) 0;
   padding: 0;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  border-radius: var(--stzh-button-border-radius);
+  border-radius: var(--stzh-space-xxxsmall);
   width: 2.5rem;
   height: 1.5rem;
   display: flex;
@@ -200,7 +200,7 @@
   opacity: 0;
   transition: opacity var(--stzh-base-transition-animation-speed);
   background-color: var(--stzh-color-black20op);
-  border-radius: var(--stzh-button-border-radius);
+  border-radius: var(--stzh-space-xxxsmall);
 }
 .stzh-vbz-linechip__text {
   position: relative;