@oiz/stzh-components 2.1.0 → 2.2.0

package/dist/components/stzh-tooltip2.js

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as computePosition, a as autoUpdate, A as Arrow, o as offset, f as flip, s as shift, b as arrow } from './arrow.js';
 import { c as createFocusTrap } from './focus-trap.esm.js';
+import { i as isStzhElement } from './utils.js';
 import { f as fetchTranslations } from './translation-utils.js';
 import { w as waitForEvent } from './event-utils.js';
 import { s as stopAnimations, a as animateTo } from './animation-utils.js';
 import { d as defineCustomElement$1 } from './stzh-icon2.js';
 
-const stzhTooltipCss = ".sc-stzh-tooltip-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-tooltip-h{display:none}.sc-stzh-tooltip-h *.sc-stzh-tooltip,.sc-stzh-tooltip-h *.sc-stzh-tooltip::before,.sc-stzh-tooltip-h *.sc-stzh-tooltip::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-tooltip-h{--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--padding:var(--stzh-tooltip-padding);--border-radius:var(--stzh-tooltip-border-radius)}.stzh-tooltip__arrow.sc-stzh-tooltip{position:absolute;display:-ms-flexbox;display:flex;color:var(--stzh-color-white)}.stzh-tooltip--placement-bottom.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{top:0;-webkit-transform:translateY(-0.5rem);transform:translateY(-0.5rem)}.stzh-tooltip--placement-top.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{bottom:0;-webkit-transform:translateY(0.5rem) rotate(180deg);transform:translateY(0.5rem) rotate(180deg)}.stzh-tooltip--placement-left.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{right:0;-webkit-transform:translateX(0.75rem) rotate(90deg);transform:translateX(0.75rem) rotate(90deg)}.stzh-tooltip--placement-right.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{left:0;-webkit-transform:translateX(-0.75rem) rotate(-90deg);transform:translateX(-0.75rem) rotate(-90deg)}.stzh-tooltip__content.sc-stzh-tooltip{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);position:absolute;z-index:var(--stzh-z-index-popover);-webkit-box-shadow:var(--stzh-box-shadow-popover);box-shadow:var(--stzh-box-shadow-popover);border-radius:var(--border-radius);background-color:var(--stzh-color-white);width:var(--width);min-width:var(--min-width);max-width:var(--max-width)}@supports ((-webkit-filter: var(--stzh-tooltip-drop-shadow)) or (filter: var(--stzh-tooltip-drop-shadow))){.stzh-tooltip__content.sc-stzh-tooltip{-webkit-box-shadow:none;box-shadow:none;-webkit-filter:var(--stzh-tooltip-drop-shadow);filter:var(--stzh-tooltip-drop-shadow)}}.stzh-tooltip__content-slot.sc-stzh-tooltip{padding:var(--padding)}.stzh-tooltip__close.sc-stzh-tooltip{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;padding:0;position:absolute;top:0;right:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;padding:var(--stzh-space-xxsmall);padding-bottom:var(--stzh-space-xxxsmall);color:var(--stzh-base-lead-color);border-radius:var(--stzh-button-border-radius)}.stzh-tooltip__icon.sc-stzh-tooltip{--size:var(--stzh-icon-size-xxsmall)}.stzh-tooltip__vhidden.sc-stzh-tooltip{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";
+const stzhTooltipCss = ".sc-stzh-tooltip-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-tooltip-h{display:none}.sc-stzh-tooltip-h *.sc-stzh-tooltip,.sc-stzh-tooltip-h *.sc-stzh-tooltip::before,.sc-stzh-tooltip-h *.sc-stzh-tooltip::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-tooltip-h{--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--padding:var(--stzh-tooltip-padding);--border-radius:var(--stzh-tooltip-border-radius)}.stzh-tooltip__arrow.sc-stzh-tooltip{position:absolute;display:-ms-flexbox;display:flex;color:var(--stzh-color-white)}.stzh-tooltip--placement-bottom.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{top:0;-webkit-transform:translateY(-0.5rem);transform:translateY(-0.5rem)}.stzh-tooltip--placement-top.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{bottom:0;-webkit-transform:translateY(0.5rem) rotate(180deg);transform:translateY(0.5rem) rotate(180deg)}.stzh-tooltip--placement-left.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{right:0;-webkit-transform:translateX(0.75rem) rotate(90deg);transform:translateX(0.75rem) rotate(90deg)}.stzh-tooltip--placement-right.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{left:0;-webkit-transform:translateX(-0.75rem) rotate(-90deg);transform:translateX(-0.75rem) rotate(-90deg)}.stzh-tooltip__content.sc-stzh-tooltip{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);position:absolute;z-index:var(--stzh-z-index-popover);-webkit-box-shadow:var(--stzh-box-shadow-popover);box-shadow:var(--stzh-box-shadow-popover);border-radius:var(--border-radius);background-color:var(--stzh-color-white);width:var(--width);min-width:var(--min-width);max-width:var(--max-width)}@supports ((-webkit-filter: var(--stzh-tooltip-drop-shadow)) or (filter: var(--stzh-tooltip-drop-shadow))){.stzh-tooltip__content.sc-stzh-tooltip{-webkit-box-shadow:none;box-shadow:none;-webkit-filter:var(--stzh-tooltip-drop-shadow);filter:var(--stzh-tooltip-drop-shadow)}}.stzh-tooltip__content-slot.sc-stzh-tooltip{padding:var(--padding)}.stzh-tooltip__close.sc-stzh-tooltip{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background-color:transparent;padding:0;position:absolute;top:0;right:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;padding:var(--stzh-space-xxsmall);padding-bottom:var(--stzh-space-xxxsmall);color:var(--stzh-base-lead-color);border-radius:var(--stzh-button-border-radius)}.stzh-tooltip__icon.sc-stzh-tooltip{--size:var(--stzh-icon-size-xxsmall)}.stzh-tooltip__vhidden.sc-stzh-tooltip{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";
 
 const ANIMATION_SHOW = {
   keyframes: [
@@ -173,6 +174,9 @@ const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return await this.computePosition();
   }
   async openWatcher(newValue) {
+    if (!this.contentElement) {
+      return;
+    }
     if (newValue) {
       if (this.toggledByMethod) {
         this.stzhOpen.emit({
@@ -228,8 +232,7 @@ const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return this._trigger.indexOf(trigger) > -1;
   }
   async componentWillLoad() {
-    this.labelId = `stzh-tooltip-label-${tooltipCounter}`;
-    tooltipCounter++;
+    this.id = `stzh-tooltip-${tooltipCounter++}`;
     this.triggerWatcher(this.trigger);
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, "tooltip");
@@ -237,9 +240,27 @@ const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   componentDidRender() {
     this.computePosition();
-    if (this.interactive) {
+    const isStzh = isStzhElement(this.triggerElement.firstElementChild);
+    if (this.hasTrigger("click")) {
       this.triggerElement.firstElementChild
-        .setAttribute("aria-expanded", this.open ? "true" : "false");
+        .setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", this.open ? "true" : "false");
+      if ((isStzh && !this.triggerElement.firstElementChild.getAttribute("a11y-describedby"))
+        || this.triggerElement.firstElementChild.getAttribute("aria-describedby")) {
+        this.triggerElement.firstElementChild
+          .setAttribute(isStzh ? "a11y-describedby" : "aria-describedby", `${this.id}-trigger-description`);
+      }
+      if ((isStzh && !this.triggerElement.firstElementChild.getAttribute("a11y-label"))
+        || this.triggerElement.firstElementChild.getAttribute("aria-label")) {
+        this.triggerElement.firstElementChild
+          .setAttribute(isStzh ? "a11y-label" : "aria-label", this.label);
+      }
+    }
+    else {
+      if ((isStzh && !this.triggerElement.firstElementChild.getAttribute("a11y-describedby"))
+        || this.triggerElement.firstElementChild.getAttribute("aria-describedby")) {
+        this.triggerElement.firstElementChild
+          .setAttribute(isStzh ? "a11y-describedby" : "aria-describedby", `${this.id}-content`);
+      }
     }
     if (this.trap) {
       this.open ? this.trap.activate() : this.trap.deactivate();
@@ -284,11 +305,13 @@ const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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 = {
@@ -296,8 +319,9 @@ const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       [`stzh-tooltip--open`]: this.open,
       [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-tooltip__trigger", ref: (el) => (this.triggerElement = el) }, h("slot", null)), h("div", { class: "stzh-tooltip__content", ref: (el) => (this.contentElement = el), tabindex: "-1", "aria-labelledby": this.label ? this.labelId : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.onEscKey, onMouseEnter: this.onMouseEnterTrigger, onMouseLeave: this.onMouseLeaveTrigger, onFocusin: this.onFocusTrigger, onFocusout: this.onBlurTrigger }, h("div", { class: "stzh-tooltip__arrow", ref: (el) => (this.arrowElement = el), innerHTML: Arrow }), this.label &&
-      h("h2", { id: this.labelId, class: "stzh-tooltip__vhidden" }, this.label), h("div", { class: "stzh-tooltip__content-slot" }, this.content ? this.content : h("slot", { name: "content" })), this.hasTrigger("click") &&
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-tooltip__trigger", ref: (el) => (this.triggerElement = el) }, h("slot", null)), this.hasTrigger("click") &&
+      h("div", { class: "stzh-tooltip__vhidden", id: `${this.id}-trigger-description` }, this.localization.open), h("div", { class: "stzh-tooltip__content", id: `${this.id}-content`, ref: (el) => (this.contentElement = el), tabindex: "-1", "aria-labelledby": this.label ? `${this.id}-label` : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.onEscKey, onMouseEnter: this.onMouseEnterTrigger, onMouseLeave: this.onMouseLeaveTrigger, onFocusin: this.onFocusTrigger, onFocusout: this.onBlurTrigger }, h("div", { class: "stzh-tooltip__arrow", ref: (el) => (this.arrowElement = el), innerHTML: Arrow }), this.label &&
+      h("h2", { id: `${this.id}-label`, class: "stzh-tooltip__vhidden" }, this.label), h("div", { class: "stzh-tooltip__content-slot" }, this.content ? this.content : h("slot", { name: "content" })), this.hasTrigger("click") &&
       h("button", { class: "stzh-tooltip__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { name: "close", class: "stzh-tooltip__icon" }), h("span", { class: "stzh-tooltip__vhidden" }, this.localization.close))))));
   }
   get element() { return this; }

package/dist/components/stzh-upload.js

@@ -10306,7 +10306,7 @@ window.Dropzone = Dropzone;
 
 const Dropzone = /*@__PURE__*/getDefaultExportFromCjs(dropzone);
 
-const stzhUploadCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}stzh-upload{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}stzh-upload[hidden]{display:none}stzh-upload *,stzh-upload *::before,stzh-upload *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-upload{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;position:relative;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;}.stzh-upload__marker-symbol{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-upload__marker-text{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-upload__description-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-upload__error,.stzh-upload__description{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-upload__error{color:var(--stzh-color-error)}.stzh-upload__error-list{list-style:none;margin:0;padding:0}.stzh-upload__description{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-upload__description-long{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-upload__description-long-popover{--width:auto;--max-width:27.3125rem}.stzh-upload__description-long-popover[open]:not([open=false]) .stzh-upload__description-long-button{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload__description-long-button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-upload__description-long-button:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload stzh-icon.stzh-upload__description-long-icon{--size:var(--stzh-icon-size-xsmall)}.stzh-upload--has-error .stzh-upload__error,.stzh-upload--has-description .stzh-upload__description{margin-top:var(--stzh-space-xxsmall)}.stzh-upload__label{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-h4-default-text-letter-spacing);color:var(--stzh-base-lead-color);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-upload__label{font-size:var(--stzh-font-curve-h4-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h4-medium-text-letter-spacing)}}.stzh-upload__clickarea{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);padding:var(--stzh-space-xxlarge);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;text-align:center;border:0.0625rem solid var(--stzh-base-border-color);border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAD4SURBVHgB7dlBCoMwEAXQSXqBHsUj9ChWdK2eoN6gdi/W3shjtLssWxDTmZKFFGqhphDhPxBDIOEbJAyMIpYkSay1PvJwSxPjOO7btu1oBq8t3NqPFuxj+Dk1TVOpNE0PwzBcZLLrOkMBieNYDm7LH7DTPCgowJDCZTKvk+YTtRQ4yahpJRDUNwlaUuDkeiMAAFhGalEKXJZlOVdQ+kyBs9bWKEp8Q1DfENQ3VPg+ocIHAPAAFb5HqPD/YVVBjes+BMllM5soim78s175TX3f3ykgk/bNQ8kEdx0qDpsrpd5PtuRmVD23mWumfbs5ftqHMxl+SmmmPQHYcmyn56UnaQAAAABJRU5ErkJggg==');border-image-slice:12;border-image-width:0.75rem;border-image-repeat:round;-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 1024px){.stzh-upload__clickarea{padding:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-upload__clickarea{padding:var(--stzh-space-xxxxlarge)}}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.stzh-upload__clickarea{border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIpSURBVHgB7d3BbeJAFMbxsYXFlRLYDtgKllIsC0vcEiqIU8EmB04glu2EdEAHYTvgbgv2vawdcdokni/ikP9Pwp6YyB59YCcej/SS0MrzfDQYDG6sOW1fb2qa5tt2uz2ECHbcsR33OQhcoT/70+n0uNlstt2G9LWRprmtqvCOMM/n89FWi9jOu3Yf9yHCFfszsdx+zWaz225D4ouyLG9Wq9WjfzpZlo3quj7Yjo8B/2VBTpMkOVp2e8/QcvudFEWRe8r2xnd/I+DDLi4T95Zl6tdNP21GAX112f3wa+jEW+v1ehfQ16FdT9OAaJd/bwhUjEDFCFSMQMUIVIxAxQhU5+Vfpy7QqMEJhGCjTv8ynM/n4wAJv6cPAAAAAAAAAPBVMCiq44P1qc8au5zfiH4sw7umaZ67Z0p3AbEqX3SBMpVRhMfIYgQqRqBiBCpGoGIEKkagYgQqRqBiBCpGoGIEKkagYgSqwxx7JebYfwIeJwEAAAAAAAD4UhgU1WGOvRBz7PUqXzDHXozHyGIEKkagYgQqRqBiBCr2GqhXqwmI5oHuvJFl2TigFy+y0jb3HuiTt+q6pjpNT3bL+ZKd11Ya2A8Pdj9/9DpCZVlOvMgKdUHe5pdIP6v9i2jZ7e1buvBCVUn3C0VR3KZp+vMD+6wseMm8Uq9FZB9kFeJuga/Zn4Ud+8EbyeXWtraSlwOavGcvw+FwvFwu/4QIyhJqV+jPzl5PfpZ3BVb+AjID1CfgWYnZAAAAAElFTkSuQmCC');border-image-slice:24}}.stzh-upload__button{margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-upload__button{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-upload__button{margin-top:var(--stzh-space-large)}}.stzh-upload stzh-icon.stzh-upload__delete-icon-error{display:none}.stzh-upload__preview{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border:0.0625rem solid var(--stzh-base-border-color);border-bottom:none;padding:var(--stzh-space-xsmall);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-small)}.stzh-upload__preview:not(.dz-error):last-child,.stzh-upload__errors:last-child .stzh-upload__preview:last-child{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-upload__errors .stzh-upload__preview:first-child,.stzh-upload__errors:empty+.stzh-upload__preview{border-top-left-radius:var(--stzh-button-border-radius);border-top-right-radius:var(--stzh-button-border-radius)}.stzh-upload__preview:last-child{border-bottom-left-radius:var(--stzh-button-border-radius);border-bottom-right-radius:var(--stzh-button-border-radius)}.stzh-upload:has(>.stzh-upload__preview) .stzh-upload__errors .stzh-upload__preview:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0}.stzh-upload__preview.dz-error .stzh-upload__title{color:var(--stzh-color-error)}.stzh-upload__preview.dz-error .stzh-upload__error-message{display:block}.stzh-upload__preview.dz-error .stzh-upload__meta,.stzh-upload__preview.dz-error stzh-icon.stzh-upload__delete-icon{display:none}.stzh-upload__preview.dz-error stzh-icon.stzh-upload__delete-icon-error{display:-ms-inline-flexbox;display:inline-flex}.stzh-upload__preview.dz-complete .stzh-upload__info-wrapper-processing{display:none}.stzh-upload__preview.dz-complete .stzh-upload__info-wrapper-complete{display:-ms-flexbox;display:flex}.stzh-upload__preview.dz-empty .stzh-upload__extension::after{content:\"\"}.stzh-upload__preview.dz-empty .stzh-upload__size{display:none}.stzh-upload__details{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;overflow:hidden}.stzh-upload__info-wrapper-processing,.stzh-upload__info-wrapper-complete{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.stzh-upload__info-wrapper-complete{display:none}.stzh-upload__actions{-ms-flex-negative:0;flex-shrink:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.stzh-upload__infos{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;margin-bottom:var(--stzh-space-xxsmall)}.stzh-upload__title,.stzh-upload__subtitle{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stzh-upload__title{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload__link[href]{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload__link[href]:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-upload__meta{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);letter-spacing:0.01em}.stzh-upload__size strong{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-upload__image{display:none}.stzh-upload__progress{display:block;height:0.5rem;border-radius:0.75rem;background-color:var(--stzh-color-grey13)}.stzh-upload__progress-bar{display:block;height:100%;width:0;border-radius:0.75rem;background:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload__progress-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);letter-spacing:0.01em;margin-left:var(--stzh-space-medium);font-variant-numeric:tabular-nums}.stzh-upload__extension{text-transform:uppercase}.stzh-upload__extension::after{content:\" | \"}.stzh-upload__download,.stzh-upload__delete{margin-left:var(--stzh-space-xsmall)}.stzh-upload__download[variant=tertiary][icon-only],.stzh-upload__delete[variant=tertiary][icon-only]{--color:var(--stzh-color-grey70)}.stzh-upload__download[variant=tertiary]{display:none}.stzh-upload__download[variant=tertiary][href]{display:-ms-flexbox;display:flex}.stzh-upload__error-message{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);letter-spacing:0.01em;color:var(--stzh-color-error);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);display:none}.stzh-upload.dz-started .stzh-upload__errors{margin-top:var(--stzh-space-small)}.stzh-upload:has(.stzh-upload__preview) .stzh-upload__errors{margin-top:var(--stzh-space-small)}.stzh-upload.dz-drag-hover .stzh-upload__clickarea{background-color:var(--stzh-color-primary4)}.stzh-upload.dz-drag-hover .stzh-upload__button{--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-upload--is-invalid .stzh-upload__clickarea{border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAD/SURBVHgB7dlBasJAFAbg/71supy16aI9Qm7Qo7QnsDlBvUHrCdqeKPUEXbUunY0gCPOcMQgimIWOMOL/bRJC8vgJITz4BVFX1c9ieI+nDnss4KXB3xcGdKhfRbfPHnXGHG+waRP+JzLT0VsI4RtY+QbeoyAdXHxxdw5V9SQ/Wi8sLB9LC7nT4cGJrn8RgxoKlzIqrgSD5qbxA21RuPR7AxERnSftoijcTO/H3J5yY9DcGDQ3Bs2NGz4R0a3ghp8RN/xLuKqgvm8fypTKhnjwGleoNlUkJYbtM62cQaayvaCjiZiMIQeFGELbhPnH4LC+TPscuufkORYLMUObyrQNlY5lla7HUdEAAAAASUVORK5CYII=')}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.stzh-upload--is-invalid .stzh-upload__clickarea{border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIwSURBVHgB7d1NUhNBGIfxf3dKrdJNNlaJYTFu3Zg5gTlKbjByAuAEwgn0KHKCTk4gLhCrXJiFKy3mdXomCeoCQuYFFjy/DZOhauh6CGE+uqqDlpKGwxifVmZhoqCJNmD1xatS307VQ9KLIsTBZzm48/GYZhZ1XF6cfVztipfffTY1hYONYpoWJu31HXyWj9H83EP1cV/jCRoH04eknXf/7J/HnSp/zb+dpNE4v1uFayXtTnKvvD2Pu1XuFtJgNM2Vrf5Vlvo+E25s9TFhssPYxKy63U94V25t0LYLFt6GWRxZfjGuz4KwlaRiGOLvH3k7Cr2VOl2stgnqjKDOCOqMoM4I6oygzgjqpz11aoP2vjmB5k6XuobNWX4huMjX9AIAAAAAAACAh4Kbon5yy5hnjaX43/xG3Ng8vtzPLdtnSkFxX+ilnaysy6eeTGV0wmNkZwR1RlBnBHVGUGcEdUZQZwR1RlBnBHVGUGcEdUZQZwT1wxx7T8yxvwU8TgIAAAAAAADwoHBT1A9z7B0xx94Zc+xvCY+RnRHUGUGdEdQZQZ0R1Nk6KOt/+IjNGemnbvNRIWylueSctBtms2jBTrrdg4Wwpa6dWThu17FIcdReyyc9H69r40r5I3LZq2hfLxuuF1TJO5oX7zc9YJAdvKm/uswrzWsRWXM89bgEvs/xmOq9sj4/6sbxl6TRNARVeSWrTQ70uK6L1zr/oh48l1C78/E0/38shBPVP49KLdo/+z+8SbPi8H5KCQAAAABJRU5ErkJggg==')}}.stzh-upload--has-error .stzh-upload__error,.stzh-upload--has-description .stzh-upload__description{margin-top:var(--stzh-space-small)}.stzh-upload--is-disabled .stzh-upload__clickarea{cursor:not-allowed;background-color:var(--stzh-color-grey5)}";
+const stzhUploadCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}stzh-upload{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}stzh-upload[hidden]{display:none}stzh-upload *,stzh-upload *::before,stzh-upload *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-upload{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;position:relative;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;}.stzh-upload__marker-symbol{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-upload__marker-text{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-upload__description-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-upload__error,.stzh-upload__description{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-upload__error{color:var(--stzh-color-error)}.stzh-upload__error-list{list-style:none;margin:0;padding:0}.stzh-upload__description{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-upload__description-long{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-upload__description-long-popover{--width:auto;--max-width:27.3125rem}.stzh-upload__description-long-popover[open]:not([open=false]) .stzh-upload__description-long-button{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload__description-long-button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-upload__description-long-button:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload stzh-icon.stzh-upload__description-long-icon{--size:var(--stzh-icon-size-xsmall)}.stzh-upload--has-error .stzh-upload__error,.stzh-upload--has-description .stzh-upload__description{margin-top:var(--stzh-space-xxsmall)}.stzh-upload__label{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-h4-default-text-letter-spacing);color:var(--stzh-base-lead-color);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-upload__label{font-size:var(--stzh-font-curve-h4-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h4-medium-text-letter-spacing)}}.stzh-upload__clickarea{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);padding:var(--stzh-space-xxlarge);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;text-align:center;border:0.0625rem solid var(--stzh-base-border-color);border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAD4SURBVHgB7dlBCoMwEAXQSXqBHsUj9ChWdK2eoN6gdi/W3shjtLssWxDTmZKFFGqhphDhPxBDIOEbJAyMIpYkSay1PvJwSxPjOO7btu1oBq8t3NqPFuxj+Dk1TVOpNE0PwzBcZLLrOkMBieNYDm7LH7DTPCgowJDCZTKvk+YTtRQ4yahpJRDUNwlaUuDkeiMAAFhGalEKXJZlOVdQ+kyBs9bWKEp8Q1DfENQ3VPg+ocIHAPAAFb5HqPD/YVVBjes+BMllM5soim78s175TX3f3ykgk/bNQ8kEdx0qDpsrpd5PtuRmVD23mWumfbs5ftqHMxl+SmmmPQHYcmyn56UnaQAAAABJRU5ErkJggg==');border-image-slice:12;border-image-width:0.75rem;border-image-repeat:round;-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 1024px){.stzh-upload__clickarea{padding:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-upload__clickarea{padding:var(--stzh-space-xxxxlarge)}}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.stzh-upload__clickarea{border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIpSURBVHgB7d3BbeJAFMbxsYXFlRLYDtgKllIsC0vcEiqIU8EmB04glu2EdEAHYTvgbgv2vawdcdokni/ikP9Pwp6YyB59YCcej/SS0MrzfDQYDG6sOW1fb2qa5tt2uz2ECHbcsR33OQhcoT/70+n0uNlstt2G9LWRprmtqvCOMM/n89FWi9jOu3Yf9yHCFfszsdx+zWaz225D4ouyLG9Wq9WjfzpZlo3quj7Yjo8B/2VBTpMkOVp2e8/QcvudFEWRe8r2xnd/I+DDLi4T95Zl6tdNP21GAX112f3wa+jEW+v1ehfQ16FdT9OAaJd/bwhUjEDFCFSMQMUIVIxAxQhU5+Vfpy7QqMEJhGCjTv8ynM/n4wAJv6cPAAAAAAAAAPBVMCiq44P1qc8au5zfiH4sw7umaZ67Z0p3AbEqX3SBMpVRhMfIYgQqRqBiBCpGoGIEKkagYgQqRqBiBCpGoGIEKkagYgSqwxx7JebYfwIeJwEAAAAAAAD4UhgU1WGOvRBz7PUqXzDHXozHyGIEKkagYgQqRqBiBCr2GqhXqwmI5oHuvJFl2TigFy+y0jb3HuiTt+q6pjpNT3bL+ZKd11Ya2A8Pdj9/9DpCZVlOvMgKdUHe5pdIP6v9i2jZ7e1buvBCVUn3C0VR3KZp+vMD+6wseMm8Uq9FZB9kFeJuga/Zn4Ud+8EbyeXWtraSlwOavGcvw+FwvFwu/4QIyhJqV+jPzl5PfpZ3BVb+AjID1CfgWYnZAAAAAElFTkSuQmCC');border-image-slice:24}}.stzh-upload__button{margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-upload__button{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-upload__button{margin-top:var(--stzh-space-large)}}.stzh-upload stzh-icon.stzh-upload__delete-icon-error{display:none}.stzh-upload__preview{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border:0.0625rem solid var(--stzh-base-border-color);border-bottom:none;padding:var(--stzh-space-xsmall);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-small)}.stzh-upload__preview:not(.dz-error):last-child,.stzh-upload__errors:last-child .stzh-upload__preview:last-child{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-upload__errors .stzh-upload__preview:first-child,.stzh-upload__errors:empty+.stzh-upload__preview{border-top-left-radius:var(--stzh-button-border-radius);border-top-right-radius:var(--stzh-button-border-radius)}.stzh-upload__preview:last-child{border-bottom-left-radius:var(--stzh-button-border-radius);border-bottom-right-radius:var(--stzh-button-border-radius)}.stzh-upload:has(>.stzh-upload__preview) .stzh-upload__errors .stzh-upload__preview:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0}.stzh-upload__preview.dz-error .stzh-upload__title{color:var(--stzh-color-error)}.stzh-upload__preview.dz-error .stzh-upload__error-message{display:block}.stzh-upload__preview.dz-error .stzh-upload__meta,.stzh-upload__preview.dz-error stzh-icon.stzh-upload__delete-icon{display:none}.stzh-upload__preview.dz-error stzh-icon.stzh-upload__delete-icon-error{display:-ms-inline-flexbox;display:inline-flex}.stzh-upload__preview.dz-complete .stzh-upload__info-wrapper-processing{display:none}.stzh-upload__preview.dz-complete .stzh-upload__info-wrapper-complete{display:-ms-flexbox;display:flex}.stzh-upload__preview.dz-empty .stzh-upload__extension::after{content:\"\"}.stzh-upload__preview.dz-empty .stzh-upload__size{display:none}.stzh-upload__details{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;overflow:hidden}.stzh-upload__info-wrapper-processing,.stzh-upload__info-wrapper-complete{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.stzh-upload__info-wrapper-complete{display:none}.stzh-upload__actions{-ms-flex-negative:0;flex-shrink:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.stzh-upload__infos{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;margin-bottom:var(--stzh-space-xxsmall)}.stzh-upload__title,.stzh-upload__subtitle{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stzh-upload__title{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload__link[href]{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload__link[href]:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-upload__meta{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);letter-spacing:0.01em}.stzh-upload__size strong{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-upload__image{display:none}.stzh-upload__progress{display:block;height:0.5rem;border-radius:0.75rem;background-color:var(--stzh-color-grey13)}.stzh-upload__progress-bar{display:block;height:100%;width:0;border-radius:0.75rem;background:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload__progress-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);letter-spacing:0.01em;margin-left:var(--stzh-space-medium);font-variant-numeric:tabular-nums}.stzh-upload__extension{text-transform:uppercase}.stzh-upload__extension::after{content:\" | \"}.stzh-upload__download,.stzh-upload__delete{margin-left:var(--stzh-space-xsmall)}.stzh-upload__download[variant=tertiary][icon-only],.stzh-upload__delete[variant=tertiary][icon-only]{--color:var(--stzh-color-grey70)}.stzh-upload__download[variant=tertiary]{display:none}.stzh-upload__download[variant=tertiary][href]{display:-ms-flexbox;display:flex}.stzh-upload__error-message{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);letter-spacing:0.01em;color:var(--stzh-color-error);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);display:none}.stzh-upload.dz-started .stzh-upload__errors{margin-top:var(--stzh-space-small)}.stzh-upload:has(.stzh-upload__preview) .stzh-upload__errors{margin-top:var(--stzh-space-small)}.stzh-upload.dz-drag-hover .stzh-upload__clickarea{background-color:var(--stzh-color-primary4)}.stzh-upload.dz-drag-hover .stzh-upload__button{--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-upload--is-invalid .stzh-upload__clickarea{border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAD/SURBVHgB7dlBasJAFAbg/71supy16aI9Qm7Qo7QnsDlBvUHrCdqeKPUEXbUunY0gCPOcMQgimIWOMOL/bRJC8vgJITz4BVFX1c9ieI+nDnss4KXB3xcGdKhfRbfPHnXGHG+waRP+JzLT0VsI4RtY+QbeoyAdXHxxdw5V9SQ/Wi8sLB9LC7nT4cGJrn8RgxoKlzIqrgSD5qbxA21RuPR7AxERnSftoijcTO/H3J5yY9DcGDQ3Bs2NGz4R0a3ghp8RN/xLuKqgvm8fypTKhnjwGleoNlUkJYbtM62cQaayvaCjiZiMIQeFGELbhPnH4LC+TPscuufkORYLMUObyrQNlY5lla7HUdEAAAAASUVORK5CYII=')}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.stzh-upload--is-invalid .stzh-upload__clickarea{border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIwSURBVHgB7d1NUhNBGIfxf3dKrdJNNlaJYTFu3Zg5gTlKbjByAuAEwgn0KHKCTk4gLhCrXJiFKy3mdXomCeoCQuYFFjy/DZOhauh6CGE+uqqDlpKGwxifVmZhoqCJNmD1xatS307VQ9KLIsTBZzm48/GYZhZ1XF6cfVztipfffTY1hYONYpoWJu31HXyWj9H83EP1cV/jCRoH04eknXf/7J/HnSp/zb+dpNE4v1uFayXtTnKvvD2Pu1XuFtJgNM2Vrf5Vlvo+E25s9TFhssPYxKy63U94V25t0LYLFt6GWRxZfjGuz4KwlaRiGOLvH3k7Cr2VOl2stgnqjKDOCOqMoM4I6oygzgjqpz11aoP2vjmB5k6XuobNWX4huMjX9AIAAAAAAACAh4Kbon5yy5hnjaX43/xG3Ng8vtzPLdtnSkFxX+ilnaysy6eeTGV0wmNkZwR1RlBnBHVGUGcEdUZQZwR1RlBnBHVGUGcEdUZQZwT1wxx7T8yxvwU8TgIAAAAAAADwoHBT1A9z7B0xx94Zc+xvCY+RnRHUGUGdEdQZQZ0R1Nk6KOt/+IjNGemnbvNRIWylueSctBtms2jBTrrdg4Wwpa6dWThu17FIcdReyyc9H69r40r5I3LZq2hfLxuuF1TJO5oX7zc9YJAdvKm/uswrzWsRWXM89bgEvs/xmOq9sj4/6sbxl6TRNARVeSWrTQ70uK6L1zr/oh48l1C78/E0/38shBPVP49KLdo/+z+8SbPi8H5KCQAAAABJRU5ErkJggg==')}}.stzh-upload--has-error .stzh-upload__error,.stzh-upload--has-description .stzh-upload__description{margin-top:var(--stzh-space-small)}.stzh-upload--is-disabled .stzh-upload__clickarea{cursor:not-allowed;background-color:var(--stzh-color-black8)}";
 
 Dropzone.autoDiscover = false;
 const ATTR_NAME = "data-dz-name";

package/dist/components/stzh-vbz-linechip2.js

@@ -2027,7 +2027,8 @@ const StzhVbzLinechip = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.chip.focus();
   }
   render() {
-    const lineData = LineColors[this.line] || {};
+    const lineData = LineColors[this.line]
+      || {};
     const styles = {
       color: this.global
         ? "rgb(0, 0, 0)"

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

@@ -1,24 +1,23 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { a as axios } from './index2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as axios } from './index3.js';
 import { a as createParagraphsFromBrs } from './string-utils.js';
 import { f as fetchTranslations } from './translation-utils.js';
 import { c as createGlobalAdapter } from './date-adapter.js';
+import { V as VBZ } from './index2.js';
 import { d as defineCustomElement$6 } from './stzh-badge2.js';
 import { d as defineCustomElement$5 } from './stzh-button2.js';
 import { d as defineCustomElement$4 } from './stzh-ghettobox2.js';
 import { d as defineCustomElement$3 } from './stzh-icon2.js';
 import { d as defineCustomElement$2 } from './stzh-richtext2.js';
 
-const stzhVbzMajortickerCss = ".sc-stzh-vbz-majorticker-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-vbz-majorticker-h{display:none}.sc-stzh-vbz-majorticker-h *.sc-stzh-vbz-majorticker,.sc-stzh-vbz-majorticker-h *.sc-stzh-vbz-majorticker::before,.sc-stzh-vbz-majorticker-h *.sc-stzh-vbz-majorticker::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-vbz-majorticker__ghettobox.sc-stzh-vbz-majorticker{--background-color:var(--stzh-color-coral);--stzh-base-invert-color:var(--stzh-color-black)}";
+const stzhVbzMajortickerCss = ".sc-stzh-vbz-majorticker-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-vbz-majorticker-h{display:none}.sc-stzh-vbz-majorticker-h *.sc-stzh-vbz-majorticker,.sc-stzh-vbz-majorticker-h *.sc-stzh-vbz-majorticker::before,.sc-stzh-vbz-majorticker-h *.sc-stzh-vbz-majorticker::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-vbz-majorticker__ghettobox.sc-stzh-vbz-majorticker{--background-color:var(--stzh-color-coral);--color:var(--stzh-color-black);--close-color:var(--stzh-color-black)}";
 
-const DISTURBANCE_INFORMATION = "0";
-const BASE_TYPE_GLOBAL = "GLOBAL";
-const CHANNEL_TICKER = "ticker";
-const CHANNEL_INFO_URL_FILTER = 'stadt-zuerich.ch/vbz';
 const StzhVbzMajorticker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.stzhDisturbanceFetched = createEvent(this, "stzhDisturbanceFetched", 7);
+    this.disturbance = null;
     this.onGhettoboxOpen = () => {
       this.ghettoboxShown = true;
     };
@@ -33,6 +32,14 @@ const StzhVbzMajorticker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     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;
@@ -51,14 +58,14 @@ const StzhVbzMajorticker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     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,
@@ -70,6 +77,10 @@ const StzhVbzMajorticker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
         infoUrl: infoUrl
       };
     }
+    this.stzhDisturbanceFetched.emit({
+      component: "stzh-vbz-majorticker",
+      disturbance: this.disturbance
+    });
   }
   async componentWillLoad() {
     if (!this.localization) {
@@ -90,7 +101,7 @@ const StzhVbzMajorticker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
       "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
@@ -110,7 +121,9 @@ const StzhVbzMajorticker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     "dateAdapter": [16],
     "localization": [16],
     "ghettoboxCloseTimeKey": [1, "ghettobox-close-time-key"],
-    "ghettoboxShown": [32]
+    "ghettoboxShown": [32],
+    "getGhettoboxShown": [64],
+    "getDisturbance": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -1,24 +1,16 @@
 import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
-import { a as axios } from './index2.js';
+import { a as axios } from './index3.js';
 import { f as fetchTranslations } from './translation-utils.js';
 import { c as createGlobalAdapter } from './date-adapter.js';
+import { V as VBZ } from './index2.js';
 import { d as defineCustomElement$6 } from './stzh-badge2.js';
 import { d as defineCustomElement$5 } from './stzh-icon2.js';
 import { d as defineCustomElement$4 } from './stzh-link2.js';
 import { d as defineCustomElement$3 } from './stzh-tooltip2.js';
 import { d as defineCustomElement$2 } from './stzh-vbz-linechip2.js';
 
-const stzhVbzTickerCss = ".sc-stzh-vbz-ticker-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-vbz-ticker-h{display:none}.sc-stzh-vbz-ticker-h *.sc-stzh-vbz-ticker,.sc-stzh-vbz-ticker-h *.sc-stzh-vbz-ticker::before,.sc-stzh-vbz-ticker-h *.sc-stzh-vbz-ticker::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-vbz-ticker.sc-stzh-vbz-ticker{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative}@media screen and (min-width: 1024px){.stzh-vbz-ticker.sc-stzh-vbz-ticker{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:start;align-items:flex-start}}.stzh-vbz-ticker__icon.sc-stzh-vbz-ticker{--size:var(--stzh-icon-size-small);margin-right:var(--stzh-space-xsmall)}.stzh-vbz-ticker__title.sc-stzh-vbz-ticker{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:normal;font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}@media screen and (min-width: 1024px){.stzh-vbz-ticker__title.sc-stzh-vbz-ticker{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-vbz-ticker__title-parts.sc-stzh-vbz-ticker{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:calc(var(--stzh-space-xxxsmall) / -1) 0}.stzh-vbz-ticker__title-part.sc-stzh-vbz-ticker{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;white-space:nowrap;margin:var(--stzh-space-xxxsmall) 0}.stzh-vbz-ticker__title-part.sc-stzh-vbz-ticker:not(:last-child){margin-right:var(--stzh-space-large)}.stzh-vbz-ticker__title-part--no-disturbances.sc-stzh-vbz-ticker{color:var(--stzh-color-truegreen)}.stzh-vbz-ticker__title-part--major-events.sc-stzh-vbz-ticker{color:var(--stzh-color-coral)}.stzh-vbz-ticker__title-part--disturbances.sc-stzh-vbz-ticker{color:var(--stzh-color-error)}.stzh-vbz-ticker__description.sc-stzh-vbz-ticker{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.sc-stzh-vbz-ticker{margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-vbz-ticker__description.sc-stzh-vbz-ticker{margin-top:var(--stzh-space-medium)}}.stzh-vbz-ticker__link.sc-stzh-vbz-ticker{margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-vbz-ticker__link.sc-stzh-vbz-ticker{position:absolute;top:0;right:0;margin-top:0}}.stzh-vbz-ticker__chips.sc-stzh-vbz-ticker{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.stzh-vbz-ticker__chips.sc-stzh-vbz-ticker:not(:empty){margin:calc(var(--stzh-space-xxsmall) * -1);margin-top:calc(var(--stzh-space-small) - var(--stzh-space-xxsmall))}.stzh-vbz-ticker__chip.sc-stzh-vbz-ticker{margin:var(--stzh-space-xxsmall)}.stzh-vbz-ticker__tooltip.sc-stzh-vbz-ticker{--width:20.875rem}.stzh-vbz-ticker__disturbance.sc-stzh-vbz-ticker{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-vbz-ticker__disturbance.sc-stzh-vbz-ticker:not(:first-child){margin-top:var(--stzh-space-small)}.stzh-vbz-ticker__disturbance--type0.sc-stzh-vbz-ticker .stzh-vbz-ticker__disturbance-title.sc-stzh-vbz-ticker,.stzh-vbz-ticker__disturbance--type0.sc-stzh-vbz-ticker .stzh-vbz-ticker__disturbance-icon.sc-stzh-vbz-ticker,.stzh-vbz-ticker__disturbance--type2.sc-stzh-vbz-ticker .stzh-vbz-ticker__disturbance-title.sc-stzh-vbz-ticker,.stzh-vbz-ticker__disturbance--type2.sc-stzh-vbz-ticker .stzh-vbz-ticker__disturbance-icon.sc-stzh-vbz-ticker{color:var(--stzh-color-error)}.stzh-vbz-ticker__disturbance-title.sc-stzh-vbz-ticker{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:normal;display:-ms-flexbox;display:flex}.stzh-vbz-ticker__disturbance--type0.sc-stzh-vbz-ticker .stzh-vbz-ticker__disturbance-title.sc-stzh-vbz-ticker,.stzh-vbz-ticker__disturbance--type2.sc-stzh-vbz-ticker .stzh-vbz-ticker__disturbance-title.sc-stzh-vbz-ticker{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal}.stzh-vbz-ticker__disturbance-icon.sc-stzh-vbz-ticker{--size:var(--stzh-icon-size-xsmall);margin-top:var(--stzh-space-xxxsmall);margin-right:var(--stzh-space-xsmall)}.stzh-vbz-ticker__disturbance-link.sc-stzh-vbz-ticker{margin-top:var(--stzh-space-xsmall)}";
+const stzhVbzTickerCss = ".sc-stzh-vbz-ticker-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-vbz-ticker-h{display:none}.sc-stzh-vbz-ticker-h *.sc-stzh-vbz-ticker,.sc-stzh-vbz-ticker-h *.sc-stzh-vbz-ticker::before,.sc-stzh-vbz-ticker-h *.sc-stzh-vbz-ticker::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-vbz-ticker.sc-stzh-vbz-ticker{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative}@media screen and (min-width: 1024px){.stzh-vbz-ticker.sc-stzh-vbz-ticker{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:start;align-items:flex-start}}.stzh-vbz-ticker__icon.sc-stzh-vbz-ticker{--size:var(--stzh-icon-size-small);margin-right:var(--stzh-space-xsmall)}.stzh-vbz-ticker__title.sc-stzh-vbz-ticker{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:normal;font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}@media screen and (min-width: 1024px){.stzh-vbz-ticker__title.sc-stzh-vbz-ticker{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-vbz-ticker__title-parts.sc-stzh-vbz-ticker{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:calc(var(--stzh-space-xxxsmall) / -1) 0}.stzh-vbz-ticker__title-part.sc-stzh-vbz-ticker{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;white-space:nowrap;margin:var(--stzh-space-xxxsmall) 0}.stzh-vbz-ticker__title-part.sc-stzh-vbz-ticker:not(:last-child){margin-right:var(--stzh-space-large)}.stzh-vbz-ticker__title-part--no-disturbances.sc-stzh-vbz-ticker{color:var(--stzh-color-truegreen)}.stzh-vbz-ticker__title-part--major-events.sc-stzh-vbz-ticker{color:var(--stzh-color-coral)}.stzh-vbz-ticker__title-part--disturbances.sc-stzh-vbz-ticker{color:var(--stzh-color-error)}.stzh-vbz-ticker__link.sc-stzh-vbz-ticker{margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-vbz-ticker__link.sc-stzh-vbz-ticker{position:absolute;top:0;right:0;margin-top:0}}.stzh-vbz-ticker__chips.sc-stzh-vbz-ticker{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.stzh-vbz-ticker__chips.sc-stzh-vbz-ticker:not(:empty){margin:calc(var(--stzh-space-xxsmall) * -1);margin-top:calc(var(--stzh-space-medium) - var(--stzh-space-xxsmall))}.stzh-vbz-ticker__chip.sc-stzh-vbz-ticker{margin:var(--stzh-space-xxsmall)}.stzh-vbz-ticker__tooltip.sc-stzh-vbz-ticker{--width:20.875rem}.stzh-vbz-ticker__disturbance.sc-stzh-vbz-ticker{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-vbz-ticker__disturbance.sc-stzh-vbz-ticker:not(:first-child){margin-top:var(--stzh-space-small)}.stzh-vbz-ticker__disturbance--type0.sc-stzh-vbz-ticker .stzh-vbz-ticker__disturbance-title.sc-stzh-vbz-ticker,.stzh-vbz-ticker__disturbance--type0.sc-stzh-vbz-ticker .stzh-vbz-ticker__disturbance-icon.sc-stzh-vbz-ticker,.stzh-vbz-ticker__disturbance--type2.sc-stzh-vbz-ticker .stzh-vbz-ticker__disturbance-title.sc-stzh-vbz-ticker,.stzh-vbz-ticker__disturbance--type2.sc-stzh-vbz-ticker .stzh-vbz-ticker__disturbance-icon.sc-stzh-vbz-ticker{color:var(--stzh-color-error)}.stzh-vbz-ticker__disturbance-title.sc-stzh-vbz-ticker{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:normal;display:-ms-flexbox;display:flex}.stzh-vbz-ticker__disturbance--type0.sc-stzh-vbz-ticker .stzh-vbz-ticker__disturbance-title.sc-stzh-vbz-ticker,.stzh-vbz-ticker__disturbance--type2.sc-stzh-vbz-ticker .stzh-vbz-ticker__disturbance-title.sc-stzh-vbz-ticker{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal}.stzh-vbz-ticker__disturbance-icon.sc-stzh-vbz-ticker{--size:var(--stzh-icon-size-xsmall);margin-top:var(--stzh-space-xxxsmall);margin-right:var(--stzh-space-xsmall)}.stzh-vbz-ticker__disturbance-link.sc-stzh-vbz-ticker{margin-top:var(--stzh-space-xsmall)}";
 
-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";
 const StzhVbzTicker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -26,12 +18,12 @@ const StzhVbzTicker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     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 = "";
@@ -65,13 +57,13 @@ const StzhVbzTicker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     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,
@@ -90,8 +82,8 @@ const StzhVbzTicker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       // 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] = {
@@ -102,7 +94,7 @@ const StzhVbzTicker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
               alert: false
             };
           }
-          if (message.category === DISTURBANCE_NORMAL) {
+          if (message.category === VBZ.DISTURBANCE_NORMAL) {
             lines[product.lineId].alert = true;
           }
           lines[product.lineId].disturbances.push({
@@ -144,8 +136,8 @@ const StzhVbzTicker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     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" })
       :
@@ -160,17 +152,14 @@ const StzhVbzTicker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     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" })))));
   }
   get element() { return this; }
   static get watchers() { return {

package/dist/components/utils.js

@@ -69,4 +69,4 @@ function cloneElement(elementToClone) {
   return [clonedElement, clonedStzhElement, originalStzhElement];
 }
 
-export { cloneElement as c, hasSlot as h, setPropsIfNull as s };
+export { cloneElement as c, hasSlot as h, isStzhElement as i, setPropsIfNull as s };

package/dist/esm/{animation-utils-25c74e5b.js → animation-utils-e234a5f8.js}

@@ -22,6 +22,9 @@ function prefersReducedMotion() {
 // Stops all active animations on the target element. Returns a promise that resolves after all animations are canceled.
 //
 function stopAnimations(el) {
+  if (!el) {
+    return;
+  }
   return Promise.all(el.getAnimations().map(animation => {
     return new Promise(resolve => {
       const handleAnimationEvent = requestAnimationFrame(resolve);

package/dist/esm/{app-globals-246b5e49.js → app-globals-ff581b69.js}

@@ -1,5 +1,5 @@
 const name = "@oiz/stzh-components";
-const version = "2.1.0";
+const version = "2.2.0";
 
 const packageName = name.substring(name.indexOf('/')+1);
 

package/dist/esm/{index-2915b467.js → index-011c84fe.js}

@@ -2224,4 +2224,4 @@ const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const readTask = /*@__PURE__*/ queueTask(queueDomReads, false);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
-export { Fragment as F, H, NAMESPACE as N, Host as a, bootstrapLazy as b, createEvent as c, doc as d, readTask as e, forceUpdate as f, getElement as g, h, writeTask as i, promiseResolve as p, registerInstance as r, win as w };
+export { Fragment as F, H, NAMESPACE as N, Host as a, bootstrapLazy as b, createEvent as c, doc as d, readTask as e, writeTask as f, getElement as g, h, forceUpdate as i, promiseResolve as p, registerInstance as r, win as w };

package/dist/esm/index.js

@@ -1 +1,17 @@
+// ---
+// Global window types
+// ---
+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 = {}));
 
+export { VBZ };