@oiz/stzh-components 3.1.0 → 3.2.0-beta1

package/dist/esm/stzh-vbz-carousel.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, a as Host, g as getElement } from './index-e3050b18.js';
 
-const stzhVbzCarouselCss = ".sc-stzh-vbz-carousel-h{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}[hidden].sc-stzh-vbz-carousel-h{display:none}.sc-stzh-vbz-carousel-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-vbz-carousel-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-vbz-carousel-h *.sc-stzh-vbz-carousel,.sc-stzh-vbz-carousel-h *.sc-stzh-vbz-carousel::before,.sc-stzh-vbz-carousel-h *.sc-stzh-vbz-carousel::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)}.sc-stzh-vbz-carousel-h .has-focus.sc-stzh-vbz-carousel{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-vbz-carousel-h .stzh-fylingfocus-focused.sc-stzh-vbz-carousel{outline-style:none !important}.sc-stzh-vbz-carousel-h .stzh-fylingfocus-focused.sc-stzh-vbz-carousel::-moz-focus-inner{border:0 !important}.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s>stzh-ratio,.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s stzh-ratio{--ratio:585/328}@media screen and (min-width: 600px){.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s>stzh-ratio,.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s stzh-ratio{--ratio:1025/330}}@media screen and (min-width: 900px){.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s>stzh-ratio,.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s stzh-ratio{--ratio:1440/555}}@media screen and (min-width: 1260px){.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s>stzh-ratio,.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s stzh-ratio{--ratio:2880/1120}}";
+const stzhVbzCarouselCss = ".sc-stzh-vbz-carousel-h{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}[hidden].sc-stzh-vbz-carousel-h{display:none}.sc-stzh-vbz-carousel-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-vbz-carousel-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-vbz-carousel-h *.sc-stzh-vbz-carousel,.sc-stzh-vbz-carousel-h *.sc-stzh-vbz-carousel::before,.sc-stzh-vbz-carousel-h *.sc-stzh-vbz-carousel::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)}.sc-stzh-vbz-carousel-h .has-focus.sc-stzh-vbz-carousel{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-vbz-carousel-h .stzh-fylingfocus-focused.sc-stzh-vbz-carousel{outline-style:none !important}.sc-stzh-vbz-carousel-h .stzh-fylingfocus-focused.sc-stzh-vbz-carousel::-moz-focus-inner{border:0 !important}.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s>stzh-ratio,.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s stzh-ratio{--ratio:16/9;--max-height:42.5rem;--overflow:hidden}@media screen and (min-width: 600px){.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s>stzh-ratio,.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s stzh-ratio{--ratio:21/9}}@media screen and (min-width: 900px){.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s>stzh-ratio,.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s stzh-ratio{--ratio:21/9}}@media screen and (min-width: 1260px){.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s>stzh-ratio,.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s stzh-ratio{--ratio:21/9}}";
 
 const StzhVbzCarousel = class {
   constructor(hostRef) {

package/dist/esm/stzh-vbz-carousel.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-vbz-carousel.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,86DAA86D;;MCoB57D,eAAe;;;IAYlB,yBAAoB,GAAG,CAAC,KAA6D;MAC3F,IAAI,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE;QAC5B,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB;KACF,CAAA;2BAdiC,IAAI;;EAM9B,WAAW;IACjB,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;GAC5B;EAQD,MAAM,iBAAiB;IACvB,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAEhE,IAAI,IAAI,CAAC,WAAW,EAAE;MACvB,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,cAAc,EAAE,CAAC;MAEzD,IAAI,WAAW,EAAE;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB;WAAM;QACL,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,wBAAwB,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;OACxF;KACF;GACF;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,wBAAwB,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;KAC3F;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,mBAAmB,EAAE,IAAI;KAC1B,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,qBACE,MAAM,EAAE,IAAI,EACZ,cAAc,EAAE,IAAI,EACpB,gBAAgB,EAAE,IAAI,EACtB,oBAAoB,EAAE,IAAI,EAC1B,mBAAmB,EAAE,IAAI,EACzB,QAAQ,QACR,eAAe,EAAE,IAAI,CAAC,eAAe,IAErC,eAAa,CACC,CACZ,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-vbz-carousel/stzh-vbz-carousel.scss?tag=stzh-vbz-carousel&encapsulation=scoped","src/components/stzh-vbz-carousel/stzh-vbz-carousel.tsx"],"sourcesContent":[":host {\n  ::slotted(stzh-ratio),\n  ::slotted(*) stzh-ratio {\n    --ratio: #{585 / 328};\n\n    @include mq($from: small) {\n      --ratio: #{1025 / 330};\n    }\n\n    @include mq($from: medium) {\n      --ratio: #{1440 / 555};\n    }\n\n    @include mq($from: large) {\n      --ratio: #{2880 / 1120};\n    }\n  }\n}\n\n.stzh-vbz-carousel {\n\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\nimport {\n  StzhVbzMajortickerDisturbanceFetchedEvent,\n} from \"../../index\";\n\n/**\n * @slot - Slot any element\n */\n@Component({\n  tag: \"stzh-vbz-carousel\",\n  styleUrl: \"stzh-vbz-carousel.scss\",\n  scoped: true\n})\nexport class StzhVbzCarousel {\n  /** Timeout delay in milliseconds used for autoplay */\n  @Prop() autoplayTimeout: number = 9000;\n\n  @Element() element: HTMLStzhFigureElement;\n\n  private majorTicker: HTMLStzhVbzMajortickerElement;\n\n  private hideElement() {\n    this.element.hidden = true;\n  }\n\n  private onDisturbanceFetched = (event: CustomEvent<StzhVbzMajortickerDisturbanceFetchedEvent>) => {\n    if (event.detail.disturbance) {\n      this.hideElement();\n    }\n  }\n\n  async connectedCallback() {\n\t\tthis.majorTicker = document.querySelector(\"stzh-vbz-majorticker\");\n\n    if (this.majorTicker) {\n\t\t\tconst disturbance = await this.majorTicker.getDisturbance();\n\n      if (disturbance) {\n        this.hideElement();\n      } else {\n        this.majorTicker.addEventListener(\"stzhDisturbanceFetched\", this.onDisturbanceFetched);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.majorTicker) {\n      this.majorTicker.removeEventListener(\"stzhDisturbanceFetched\", this.onDisturbanceFetched);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-vbz-carousel\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <stzh-carousel\n            noPeek={true}\n            nonInteractive={true}\n            preventMouseDrag={true}\n            preventAutoplayPause={true}\n            preventAutoplayStop={true}\n            autoplay\n            autoplayTimeout={this.autoplayTimeout}\n          >\n            <slot></slot>\n          </stzh-carousel>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-vbz-carousel.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,q8DAAq8D;;MCoBn9D,eAAe;;;IAYlB,yBAAoB,GAAG,CAAC,KAA6D;MAC3F,IAAI,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE;QAC5B,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB;KACF,CAAA;2BAdiC,IAAI;;EAM9B,WAAW;IACjB,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;GAC5B;EAQD,MAAM,iBAAiB;IACvB,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAEhE,IAAI,IAAI,CAAC,WAAW,EAAE;MACvB,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,cAAc,EAAE,CAAC;MAEzD,IAAI,WAAW,EAAE;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB;WAAM;QACL,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,wBAAwB,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;OACxF;KACF;GACF;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,wBAAwB,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;KAC3F;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,mBAAmB,EAAE,IAAI;KAC1B,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,qBACE,MAAM,EAAE,IAAI,EACZ,cAAc,EAAE,IAAI,EACpB,gBAAgB,EAAE,IAAI,EACtB,oBAAoB,EAAE,IAAI,EAC1B,mBAAmB,EAAE,IAAI,EACzB,QAAQ,QACR,eAAe,EAAE,IAAI,CAAC,eAAe,IAErC,eAAa,CACC,CACZ,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-vbz-carousel/stzh-vbz-carousel.scss?tag=stzh-vbz-carousel&encapsulation=scoped","src/components/stzh-vbz-carousel/stzh-vbz-carousel.tsx"],"sourcesContent":[":host {\n  ::slotted(stzh-ratio),\n  ::slotted(*) stzh-ratio {\n    --ratio: #{16 / 9};\n    --max-height: 680px;\n    --overflow: hidden;\n\n    @include mq($from: small) {\n      --ratio: #{21 / 9};\n    }\n\n    @include mq($from: medium) {\n      --ratio: #{21 / 9};\n    }\n\n    @include mq($from: large) {\n      --ratio: #{21 / 9};\n    }\n  }\n}\n\n.stzh-vbz-carousel {\n\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\nimport {\n  StzhVbzMajortickerDisturbanceFetchedEvent,\n} from \"../../index\";\n\n/**\n * @slot - Slot any element\n */\n@Component({\n  tag: \"stzh-vbz-carousel\",\n  styleUrl: \"stzh-vbz-carousel.scss\",\n  scoped: true\n})\nexport class StzhVbzCarousel {\n  /** Timeout delay in milliseconds used for autoplay */\n  @Prop() autoplayTimeout: number = 9000;\n\n  @Element() element: HTMLStzhFigureElement;\n\n  private majorTicker: HTMLStzhVbzMajortickerElement;\n\n  private hideElement() {\n    this.element.hidden = true;\n  }\n\n  private onDisturbanceFetched = (event: CustomEvent<StzhVbzMajortickerDisturbanceFetchedEvent>) => {\n    if (event.detail.disturbance) {\n      this.hideElement();\n    }\n  }\n\n  async connectedCallback() {\n\t\tthis.majorTicker = document.querySelector(\"stzh-vbz-majorticker\");\n\n    if (this.majorTicker) {\n\t\t\tconst disturbance = await this.majorTicker.getDisturbance();\n\n      if (disturbance) {\n        this.hideElement();\n      } else {\n        this.majorTicker.addEventListener(\"stzhDisturbanceFetched\", this.onDisturbanceFetched);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.majorTicker) {\n      this.majorTicker.removeEventListener(\"stzhDisturbanceFetched\", this.onDisturbanceFetched);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-vbz-carousel\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <stzh-carousel\n            noPeek={true}\n            nonInteractive={true}\n            preventMouseDrag={true}\n            preventAutoplayPause={true}\n            preventAutoplayStop={true}\n            autoplay\n            autoplayTimeout={this.autoplayTimeout}\n          >\n            <slot></slot>\n          </stzh-carousel>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-vbz-connection-finder.entry.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-e3050b18.js';
+
+const stzhVbzConnectionFinderCss = ".sc-stzh-vbz-connection-finder-h{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}[hidden].sc-stzh-vbz-connection-finder-h{display:none}.sc-stzh-vbz-connection-finder-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-vbz-connection-finder-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-vbz-connection-finder-h *.sc-stzh-vbz-connection-finder,.sc-stzh-vbz-connection-finder-h *.sc-stzh-vbz-connection-finder::before,.sc-stzh-vbz-connection-finder-h *.sc-stzh-vbz-connection-finder::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)}.sc-stzh-vbz-connection-finder-h .has-focus.sc-stzh-vbz-connection-finder{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-vbz-connection-finder-h .stzh-fylingfocus-focused.sc-stzh-vbz-connection-finder{outline-style:none !important}.sc-stzh-vbz-connection-finder-h .stzh-fylingfocus-focused.sc-stzh-vbz-connection-finder::-moz-focus-inner{border:0 !important}.sc-stzh-vbz-connection-finder-h{width:100%}.stzh-vbz-connection-finder.sc-stzh-vbz-connection-finder{padding-top:var(--stzh-space-xlarge);padding-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-vbz-connection-finder.sc-stzh-vbz-connection-finder{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-vbz-connection-finder.sc-stzh-vbz-connection-finder{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-vbz-connection-finder.sc-stzh-vbz-connection-finder{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-vbz-connection-finder.sc-stzh-vbz-connection-finder{padding-bottom:var(--stzh-space-xxxlarge)}}";
+
+const StzhVbzConnectionFinder = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  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;" }))));
+  }
+  get element() { return getElement(this); }
+};
+StzhVbzConnectionFinder.style = stzhVbzConnectionFinderCss;
+
+export { StzhVbzConnectionFinder as stzh_vbz_connection_finder };
+
+//# sourceMappingURL=stzh-vbz-connection-finder.entry.js.map

package/dist/esm/stzh-vbz-connection-finder.entry.js.map

@@ -0,0 +1 @@
+{"file":"stzh-vbz-connection-finder.entry.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,ooEAAooE;;MCU1pE,uBAAuB;;;;EAGlC,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,4BAA4B,EAAE,IAAI;KACnC,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,cAAQ,GAAG,EAAC,+CAA+C,GAAU,EACrE,WACE,EAAE,EAAC,gBAAgB,uBACD,SAAS,2BACL,SAAS,sBACd,6EAA6E,GACzF,CACH,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-vbz-connection-finder/stzh-vbz-connection-finder.scss?tag=stzh-vbz-connection-finder&encapsulation=scoped","src/components/stzh-vbz-connection-finder/stzh-vbz-connection-finder.tsx"],"sourcesContent":[":host {\n  width: 100%;\n}\n\n.stzh-vbz-connection-finder {\n  @include spaceCurve('padding-top', 'medium');\n  @include spaceCurve('padding-bottom', 'medium');\n}\n\n\n","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"],"version":3}

package/dist/esm/stzh-vbz-intro.entry.js

@@ -0,0 +1,54 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-e3050b18.js';
+
+const stzhVbzIntroCss = ".sc-stzh-vbz-intro-h{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}[hidden].sc-stzh-vbz-intro-h{display:none}.sc-stzh-vbz-intro-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-vbz-intro-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-vbz-intro-h *.sc-stzh-vbz-intro,.sc-stzh-vbz-intro-h *.sc-stzh-vbz-intro::before,.sc-stzh-vbz-intro-h *.sc-stzh-vbz-intro::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)}.sc-stzh-vbz-intro-h .has-focus.sc-stzh-vbz-intro{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-vbz-intro-h .stzh-fylingfocus-focused.sc-stzh-vbz-intro{outline-style:none !important}.sc-stzh-vbz-intro-h .stzh-fylingfocus-focused.sc-stzh-vbz-intro::-moz-focus-inner{border:0 !important}.sc-stzh-vbz-intro-h{--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){.sc-stzh-vbz-intro-h{--grid-template-areas:\"ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks\"}}@media screen and (min-width: 1260px){.sc-stzh-vbz-intro-h{--grid-template-areas:\"ticker ticker ticker ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks quicklinks\"}}.stzh-vbz-intro.sc-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)}@media screen and (min-width: 600px){.stzh-vbz-intro.sc-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.sc-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.sc-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.sc-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.sc-stzh-vbz-intro{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-vbz-intro.sc-stzh-vbz-intro{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-vbz-intro__ticker.sc-stzh-vbz-intro,.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{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.sc-stzh-vbz-intro,.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-vbz-intro__ticker.sc-stzh-vbz-intro,.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-vbz-intro__ticker.sc-stzh-vbz-intro,.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-vbz-intro__ticker.sc-stzh-vbz-intro,.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-vbz-intro__ticker.sc-stzh-vbz-intro,.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-vbz-intro__ticker.sc-stzh-vbz-intro,.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-vbz-intro__ticker.sc-stzh-vbz-intro{grid-area:ticker}@media screen and (min-width: 1600px){.stzh-vbz-intro__ticker.sc-stzh-vbz-intro{padding-left:0}}.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{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.sc-stzh-vbz-intro{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.sc-stzh-vbz-intro{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.sc-stzh-vbz-intro{padding-right:4rem;margin-right:-4rem}}@media screen and (min-width: 1600px){.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{margin-right:calc(((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) * -0.5))}}.stzh-vbz-intro.sc-stzh-vbz-intro .stzh-vbz-intro-quicklinks__heading.sc-stzh-vbz-intro{--color:var(--stzh-color-white);margin-bottom:var(--stzh-space-xsmall)}.stzh-vbz-intro.sc-stzh-vbz-intro .stzh-vbz-intro-quicklink__link.sc-stzh-vbz-intro{--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.sc-stzh-vbz-intro .stzh-vbz-intro-quicklink__link.sc-stzh-vbz-intro:hover{transform:translateX(0.625rem)}@media screen and (min-width: 900px){.stzh-vbz-intro.sc-stzh-vbz-intro .stzh-vbz-intro-quicklink__link.sc-stzh-vbz-intro:hover{transform:translateX(1.25rem)}}";
+
+const StzhVbzIntro = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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)))))))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "quicklinks": ["quicklinksWatcher"]
+  }; }
+};
+StzhVbzIntro.style = stzhVbzIntroCss;
+
+export { StzhVbzIntro as stzh_vbz_intro };
+
+//# sourceMappingURL=stzh-vbz-intro.entry.js.map

package/dist/esm/stzh-vbz-intro.entry.js.map

@@ -0,0 +1 @@
+{"file":"stzh-vbz-intro.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,swMAAswM;;MCSjxM,YAAY;;;IAQf,gBAAW,GAA2B,EAAE,CAAC;IAiBzC,SAAI,GAAG;MACb,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KACzC,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;GACF;EAMD,MAAM,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;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;GACb;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,gBAAgB,EAAE,IAAI;KACvB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,wBAAwB,IACjC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EACL,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,KAC1B,WAAK,KAAK,EAAC,4BAA4B,IACrC,oBAAc,KAAK,EAAC,oCAAoC,IACrD,IAAI,CAAC,YAAY,CAAC,iBAAiB,CACvB,EACd,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,KACxB,WAAK,KAAK,EAAC,0BAA0B,IACnC,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,EACP;GACH;;;;;;;;;;","names":[],"sources":["src/components/stzh-vbz-intro/stzh-vbz-intro.scss?tag=stzh-vbz-intro&encapsulation=scoped","src/components/stzh-vbz-intro/stzh-vbz-intro.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color of top news section\n * @prop --background-color-mostsearched: Background color of top most searched section\n *\n * @prop --stzh-vbz-intro-subtitle-font: **Global**: Font of the topnews subtitle\n * @prop --stzh-vbz-intro-topnews-item-subtitle-color: **Global**: Color of the topnews subtitle\n * @prop --stzh-vbz-intro-topnews-item-subtitle-highlighted-color: **Global**: Color of the topnews subtitle (highlighted variant)\n */\n\n:host {\n  --background-color-topnews: #{$topnewsBackgroundColor};\n  --background-color-mostsearched: #{$mostsearchedBackgroundColor};\n  --topnews-item-subtitle-font: var(--stzh-vbz-intro-topnews-subtitle-font, #{$topnewsSubtitleFont});\n  --topnews-item-subtitle-color: var(--stzh-vbz-intro-topnews-item-subtitle-color, #{$colorPrimary70});\n  --topnews-item-subtitle-highlighted-color: var(--stzh-vbz-intro-topnews-item-subtitle-highlighted-color, #{$colorPrimary60});\n\n  --grid-template-areas: \"ticker ticker ticker ticker\" \"quicklinks quicklinks quicklinks quicklinks\";\n\n  @include mq($from: medium) {\n    --grid-template-areas: \"ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks\";\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas: \"ticker ticker ticker ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks quicklinks\";\n  }\n}\n\n.stzh-vbz-intro {\n  @include grid;\n  grid-template-areas: var(--grid-template-areas);\n\n  &__ticker,\n  &__quicklinks {\n    display: flex;\n    flex-direction: column;\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n  }\n\n  &__ticker {\n    grid-area: ticker;\n\n    @include mq($from: ultra) {\n      padding-left: 0;\n    }\n  }\n\n  /**\n   * Quick links.\n   */\n  &__quicklinks {\n    grid-area: quicklinks;\n    background-color: var(--stzh-color-primary60);\n    padding-left: space('large');\n    margin-left: $containerMargin * -1;\n    padding-right: space('large');\n    margin-right: $containerMargin * -1;\n\n    @include mq($from: small) {\n      display: grid;\n      gap: 0 space('large');\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      padding-left: $containerMarginSmall;\n      margin-left: $containerMarginSmall * -1;\n      padding-right: $containerMarginSmall;\n      margin-right: $containerMarginSmall * -1;\n    }\n\n    @include mq($from: medium) {\n      display: flex;\n      gap: inherit;\n      grid-template-columns: inherit;\n      padding-left: $containerMarginMedium;\n      margin-left: inherit;\n      padding-right: $containerMarginMedium;\n      margin-right: $containerMarginMedium * -1;\n    }\n\n    @include mq($from: large) {\n      padding-right: $containerMarginLarge;\n      margin-right: $containerMarginLarge * -1;\n    }\n\n    @include mq($from: ultra) {\n      margin-right: calc(((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) * -0.5));\n    }\n  }\n\n  .stzh-vbz-intro-quicklinks__heading {\n    --color: var(--stzh-color-white);\n    margin-bottom: space('xsmall');\n  }\n\n  .stzh-vbz-intro-quicklink__link {\n    --text-decoration-line: none;\n    --color: var(--stzh-color-white);\n    --hover-text-decoration-line: none;\n    --hover-color: var(--stzh-color-white);\n\n    transition: transform 150ms ease;\n    padding-top: space('xsmall');\n    padding-bottom: space('xsmall');\n\n    &:hover, {\n      transform: translateX(10px);\n\n      @include mq($from: medium) {\n        transform: translateX(20px);\n      }\n    }\n  }\n}\n","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"],"version":3}

package/dist/esm/stzh-vbz-linechip.entry.js

@@ -1978,7 +1978,7 @@ const LineColors = {
 	S25: S25
 };
 
-const stzhVbzLinechipCss = ".sc-stzh-vbz-linechip-h{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}[hidden].sc-stzh-vbz-linechip-h{display:none}.sc-stzh-vbz-linechip-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-vbz-linechip-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-vbz-linechip-h *.sc-stzh-vbz-linechip,.sc-stzh-vbz-linechip-h *.sc-stzh-vbz-linechip::before,.sc-stzh-vbz-linechip-h *.sc-stzh-vbz-linechip::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)}.sc-stzh-vbz-linechip-h .has-focus.sc-stzh-vbz-linechip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-vbz-linechip-h .stzh-fylingfocus-focused.sc-stzh-vbz-linechip{outline-style:none !important}.sc-stzh-vbz-linechip-h .stzh-fylingfocus-focused.sc-stzh-vbz-linechip::-moz-focus-inner{border:0 !important}.sc-stzh-vbz-linechip-h{display:inline-block}.stzh-vbz-linechip.sc-stzh-vbz-linechip{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);position:relative;border:none;margin:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--stzh-button-border-radius);width:2.5rem;height:1.5rem;display:flex;justify-content:center;align-items:center}.stzh-vbz-linechip.sc-stzh-vbz-linechip::before{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity var(--stzh-base-transition-animation-speed);background-color:var(--stzh-color-black20op);border-radius:var(--stzh-button-border-radius)}.stzh-vbz-linechip__text.sc-stzh-vbz-linechip{position:relative}.stzh-vbz-linechip__global-icon.sc-stzh-vbz-linechip{--size:var(--stzh-icon-size-xxsmall)}.stzh-vbz-linechip__alert.sc-stzh-vbz-linechip{position:absolute;top:-0.3125rem;right:-0.3125rem;color:var(--stzh-color-error60);background-color:var(--stzh-color-white);border-radius:100%;display:flex}.stzh-vbz-linechip__alert-icon.sc-stzh-vbz-linechip{--size:var(--stzh-icon-size-xsmall)}.stzh-vbz-linechip.sc-stzh-vbz-linechip:hover::before,.stzh-vbz-linechip.sc-stzh-vbz-linechip:focus::before,.stzh-vbz-linechip--is-active.sc-stzh-vbz-linechip::before{opacity:1}.stzh-vbz-linechip--is-dark.sc-stzh-vbz-linechip::before{background-color:var(--stzh-color-white20op)}.stzh-vbz-linechip--bg-white.sc-stzh-vbz-linechip{border:0.0625rem solid var(--stzh-color-black)}";
+const stzhVbzLinechipCss = ".sc-stzh-vbz-linechip-h{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}[hidden].sc-stzh-vbz-linechip-h{display:none}.sc-stzh-vbz-linechip-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-vbz-linechip-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-vbz-linechip-h *.sc-stzh-vbz-linechip,.sc-stzh-vbz-linechip-h *.sc-stzh-vbz-linechip::before,.sc-stzh-vbz-linechip-h *.sc-stzh-vbz-linechip::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)}.sc-stzh-vbz-linechip-h .has-focus.sc-stzh-vbz-linechip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-vbz-linechip-h .stzh-fylingfocus-focused.sc-stzh-vbz-linechip{outline-style:none !important}.sc-stzh-vbz-linechip-h .stzh-fylingfocus-focused.sc-stzh-vbz-linechip::-moz-focus-inner{border:0 !important}.sc-stzh-vbz-linechip-h{display:inline-block}.stzh-vbz-linechip.sc-stzh-vbz-linechip{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);position:relative;border:none;margin:var(--stzh-space-xsmall) 0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--stzh-space-xxxsmall);width:2.5rem;height:1.5rem;display:flex;justify-content:center;align-items:center}.stzh-vbz-linechip.sc-stzh-vbz-linechip::before{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity var(--stzh-base-transition-animation-speed);background-color:var(--stzh-color-black20op);border-radius:var(--stzh-space-xxxsmall)}.stzh-vbz-linechip__text.sc-stzh-vbz-linechip{position:relative}.stzh-vbz-linechip__global-icon.sc-stzh-vbz-linechip{--size:var(--stzh-icon-size-xxsmall)}.stzh-vbz-linechip__alert.sc-stzh-vbz-linechip{position:absolute;top:-0.3125rem;right:-0.3125rem;color:var(--stzh-color-error60);background-color:var(--stzh-color-white);border-radius:100%;display:flex}.stzh-vbz-linechip__alert-icon.sc-stzh-vbz-linechip{--size:var(--stzh-icon-size-xsmall)}.stzh-vbz-linechip.sc-stzh-vbz-linechip:hover::before,.stzh-vbz-linechip.sc-stzh-vbz-linechip:focus::before,.stzh-vbz-linechip--is-active.sc-stzh-vbz-linechip::before{opacity:1}.stzh-vbz-linechip--is-dark.sc-stzh-vbz-linechip::before{background-color:var(--stzh-color-white20op)}.stzh-vbz-linechip--bg-white.sc-stzh-vbz-linechip{border:0.0625rem solid var(--stzh-color-black)}";
 
 const StzhVbzLinechip = class {
   constructor(hostRef) {