@oiz/stzh-components 2.1.0-alpha → 2.1.0

package/dist/cjs/stzh-share.cjs.entry.js

@@ -0,0 +1,113 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9fcb4305.js');
+const translationUtils = require('./translation-utils-73073e44.js');
+
+const stzhShareCss = ".sc-stzh-share-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-share-h{display:none}.sc-stzh-share-h *.sc-stzh-share,.sc-stzh-share-h *.sc-stzh-share::before,.sc-stzh-share-h *.sc-stzh-share::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-share__list.sc-stzh-share{list-style:none;margin:0;padding:0;display:-ms-flexbox;display:flex}.stzh-share__item.sc-stzh-share:not(:last-child){margin-right:var(--stzh-space-small)}.stzh-share__icon.sc-stzh-share{--size:var(--stzh-icon-size-xsmall)}.stzh-share__button.sc-stzh-share{color:var(--stzh-color-white);border-radius:var(--stzh-button-border-radius);display:grid;place-items:center;width:2.875rem;height:1.625rem}.stzh-share__button.is-facebook.sc-stzh-share{background-color:#3b5998}.stzh-share__button.is-facebook.sc-stzh-share:hover{background-color:#23355B}.stzh-share__button.is-twitter.sc-stzh-share{background-color:#1da1f2}.stzh-share__button.is-twitter.sc-stzh-share:hover{background-color:#116091}.stzh-share__button.is-linkedin.sc-stzh-share{background-color:#1485BD}.stzh-share__button.is-linkedin.sc-stzh-share:hover{background-color:#0C4F71}.stzh-share__button.is-xing.sc-stzh-share{background-color:#0E7574}.stzh-share__button.is-xing.sc-stzh-share:hover{background-color:#084645}.stzh-share__button.is-mail.sc-stzh-share{background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-share__button.is-mail.sc-stzh-share:hover{background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}";
+
+const abbreviateText = function (text, length) {
+  if (text.length <= length) {
+    return text;
+  }
+  var lastWhitespaceIndex = text.substring(0, length - 1).lastIndexOf(' ');
+  if (lastWhitespaceIndex) {
+    return text.substring(0, lastWhitespaceIndex) + '\u2026';
+  }
+  else {
+    return text.substring(0, length - 1);
+  }
+};
+// returns content of <meta name="" content=""> tags or '' if empty/non existant
+const getMeta = function (name) {
+  const meta = document.querySelector(`meta[name="${name}"],[property="${name}"]`);
+  return meta ? meta.getAttribute("content") : "";
+};
+const StzhShare = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this._services = [];
+    this.openPopup = (url, event) => {
+      event.preventDefault();
+      window.open(url, "_blank", "width=600,height=460");
+    };
+    this.localization = undefined;
+    this.url = window.location.href;
+    this.services = [
+      "facebook", "twitter", "linkedin", "xing", "mail"
+    ];
+  }
+  servicesWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._services = JSON.parse(newValue);
+    }
+    else {
+      this._services = newValue;
+    }
+  }
+  async componentWillLoad() {
+    this.servicesWatcher(this.services);
+    if (!this.localization) {
+      this.localization = await translationUtils.fetchTranslations(this.element, "share");
+    }
+  }
+  render() {
+    var _a;
+    const classes = {
+      "stzh-share": true
+    };
+    const shareUrl = encodeURIComponent(this.url);
+    const mailSubject = encodeURIComponent(this.localization.mailSubject);
+    const mailBody = encodeURIComponent((_a = this.localization.mailBody) === null || _a === void 0 ? void 0 : _a.replace(/\{shareUrl\}/gi, this.url));
+    const title = encodeURIComponent(document.title);
+    const description = encodeURIComponent(getMeta("description"));
+    // 280 - URL (always 24) = 256
+    const maxTweetLength = 256;
+    const serviceData = {
+      "facebook": {
+        popup: true,
+        blank: true,
+        url: `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`,
+        text: this.localization.shareFacebook,
+        icon: "facebook-filled"
+      },
+      "twitter": {
+        popup: true,
+        blank: true,
+        url: `https://twitter.com/intent/tweet?text=${abbreviateText(title, maxTweetLength)}&url=${shareUrl}`,
+        text: this.localization.shareTwitter,
+        icon: "twitter-filled"
+      },
+      "linkedin": {
+        popup: true,
+        blank: true,
+        url: `https://www.linkedin.com/shareArticle?mini=true&summary=${description}&title=${title}&url=${shareUrl}`,
+        text: this.localization.shareLinkedin,
+        icon: "linkedin-filled"
+      },
+      "xing": {
+        popup: true,
+        blank: true,
+        url: `https://www.xing.com/spi/shares/new?url=${shareUrl}`,
+        text: this.localization.shareXing,
+        icon: "xing-filled"
+      },
+      "mail": {
+        popup: false,
+        blank: false,
+        url: `mailto:?subject=${mailSubject}&body=${mailBody}`,
+        text: this.localization.shareMail,
+        icon: "mail-filled"
+      }
+    };
+    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("ul", { class: "stzh-share__list" }, this._services.map((service) => index.h("li", { class: "stzh-share__item" }, index.h("stzh-tooltip", { content: serviceData[service].text }, index.h("a", { class: `stzh-share__button is-${service}`, href: serviceData[service].url, "aria-label": serviceData[service].text, rel: serviceData[service].blank ? "nofollow noopener noreferrer" : "nofollow", target: serviceData[service].blank ? "_blank" : "_self", onClick: serviceData[service].popup ? (e) => this.openPopup(serviceData[service].url, e) : null }, index.h("stzh-icon", { class: "stzh-share__icon", name: serviceData[service].icon })))))))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "services": ["servicesWatcher"]
+  }; }
+};
+StzhShare.style = stzhShareCss;
+
+exports.stzh_share = StzhShare;

package/dist/cjs/stzh-upload.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-9fcb4305.js');
 const utils = require('./utils-8dc66449.js');
 const translationUtils = require('./translation-utils-73073e44.js');
 const stzhInputDescription = require('./stzh-input-description-4326b0d9.js');
-const _commonjsHelpers = require('./_commonjsHelpers-bcc1208a.js');
+const _commonjsHelpers = require('./_commonjsHelpers-dcc4cf71.js');
 
 var dropzone = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -10306,11 +10306,13 @@ window.Dropzone = Dropzone;
 
 const Dropzone = /*@__PURE__*/_commonjsHelpers.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{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.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__inner{height:3.875rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.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;margin-left:var(--stzh-space-medium)}.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__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__delete{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;padding:0;background:none;display:-ms-flexbox;display:flex;color:var(--stzh-base-color)}.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__clickarea{margin-bottom:var(--stzh-space-small)}.stzh-upload:has(.stzh-upload__preview) .stzh-upload__clickarea{margin-bottom: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;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)}";
 
 Dropzone.autoDiscover = false;
 const ATTR_NAME = "data-dz-name";
 const ATTR_TYPE = "data-dz-type";
+const ATTR_SIZE = "data-dz-size";
+const ATTR_LINK = "data-dz-link";
 const ATTR_EXTENSION = "data-dz-extension";
 const ATTR_PROGRESS_TEXT = "data-dz-progress-text";
 let uploadCounter = 0;
@@ -10344,6 +10346,7 @@ const StzhUpload = class {
     this.withCredentials = false;
     this.disabled = false;
     this.invalid = false;
+    this.downloadDisabled = false;
     this.error = undefined;
     this.acceptedFiles = null;
     this.autoProcessQueue = true;
@@ -10469,12 +10472,12 @@ const StzhUpload = class {
           file.previewTemplate = file.previewElement; // Backwards compatibility
           this.previewsContainer.appendChild(file.previewElement);
           if (file.size == 0) {
-            file.previewElement.classList.add('dz-empty');
+            file.previewElement.classList.add("dz-empty");
           }
-          for (var node of file.previewElement.querySelectorAll("[data-dz-name]")) {
+          for (var node of file.previewElement.querySelectorAll(`[${ATTR_NAME}]`)) {
             node.textContent = file.name;
           }
-          for (node of file.previewElement.querySelectorAll("[data-dz-size]")) {
+          for (node of file.previewElement.querySelectorAll(`[${ATTR_SIZE}]`)) {
             node.innerHTML = this.filesize(file.size);
           }
           if (this.options.addRemoveLinks) {
@@ -10512,6 +10515,20 @@ const StzhUpload = class {
         if (file.status === "error") {
           self.errorsElement.appendChild(file.previewElement);
         }
+        else {
+          if (!self.downloadDisabled) {
+            let fileHref = file.url || '';
+            if (file.upload) {
+              fileHref = URL.createObjectURL(file);
+            }
+            if (fileHref) {
+              for (var node of file.previewElement.querySelectorAll(`[${ATTR_LINK}]`)) {
+                node.setAttribute("href", fileHref);
+                node.setAttribute("download", file.name);
+              }
+            }
+          }
+        }
         if (file._removeLink) {
           file._removeLink.innerHTML = this.options.dictRemoveFile;
         }
@@ -10561,43 +10578,42 @@ const StzhUpload = class {
       },
       previewTemplate: `
       <div class="stzh-upload__preview">
-        <div class="stzh-upload__inner">
-          <div class="stzh-upload__image">
-            <img data-dz-thumbnail />
-          </div>
+        <div class="stzh-upload__image">
+          <img data-dz-thumbnail />
+        </div>
 
-          <div class="stzh-upload__details">
-            <div class="stzh-upload__info-wrapper-processing">
-              <div class="stzh-upload__infos">
-                <div class="stzh-upload__subtitle">
-                  <span data-dz-name></span>
-                </div>
-                <div class="stzh-upload__progress-text">
-                  <span data-dz-progress-text></span>
-                </div>
+        <div class="stzh-upload__details">
+          <div class="stzh-upload__info-wrapper-processing">
+            <div class="stzh-upload__infos">
+              <div class="stzh-upload__subtitle">
+                <span ${ATTR_NAME}></span>
               </div>
-              <div class="stzh-upload__progress">
-                <span class="stzh-upload__progress-bar" data-dz-uploadprogress></span>
+              <div class="stzh-upload__progress-text">
+                <span ${ATTR_PROGRESS_TEXT}></span>
               </div>
             </div>
-            <div class="stzh-upload__info-wrapper-complete">
-              <div class="stzh-upload__title">
-                <span data-dz-name></span>
-              </div>
-              <div class="stzh-upload__meta">
-                <span class="stzh-upload__extension" data-dz-extension></span>
-                <span class="stzh-upload__size" data-dz-size></span>
-              </div>
-              <div class="stzh-upload__error-message">
-                <span data-dz-errormessage></span>
-              </div>
+            <div class="stzh-upload__progress">
+              <span class="stzh-upload__progress-bar" data-dz-uploadprogress></span>
             </div>
-            <div class="stzh-upload__actions">
-              <button class="stzh-upload__delete" data-dz-remove aria-label="${this.localization.cancelUpload}" title="${this.localization.cancelUpload}">
-                <stzh-icon class="stzh-upload__delete-icon" name="delete"></stzh-icon>
-                <stzh-icon class="stzh-upload__delete-icon-error" name="close"></stzh-icon>
-              </button>
+          </div>
+          <div class="stzh-upload__info-wrapper-complete">
+            <div class="stzh-upload__title">
+              <a class="stzh-upload__link" ${ATTR_NAME} ${ATTR_LINK}></a>
             </div>
+            <div class="stzh-upload__meta">
+              <span class="stzh-upload__extension" ${ATTR_EXTENSION}></span>
+              <span class="stzh-upload__size" ${ATTR_SIZE}></span>
+            </div>
+            <div class="stzh-upload__error-message">
+              <span data-dz-errormessage></span>
+            </div>
+          </div>
+          <div class="stzh-upload__actions">
+            <stzh-button variant="tertiary" size="tiny" icon-only icon="download" class="stzh-upload__download" ${ATTR_LINK} aria-label="${this.localization.download}" title="${this.localization.download}"></stzh-button>
+            <stzh-button variant="tertiary" size="tiny" icon-only class="stzh-upload__delete" data-dz-remove aria-label="${this.localization.cancelUpload}" title="${this.localization.cancelUpload}">
+              <stzh-icon slot="icon" class="stzh-upload__delete-icon" name="delete"></stzh-icon>
+              <stzh-icon slot="icon" class="stzh-upload__delete-icon-error" name="close"></stzh-icon>
+            </stzh-button>
           </div>
         </div>
       </div>

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9fcb4305.js');
-const _commonjsHelpers = require('./_commonjsHelpers-bcc1208a.js');
+const _commonjsHelpers = require('./_commonjsHelpers-dcc4cf71.js');
 
 var tinycolor = _commonjsHelpers.createCommonjsModule(function (module) {
 // TinyColor v1.4.2
@@ -1487,6 +1487,10 @@ const LineColors = {
 	"19": {
 	color: "rgb(0, 0, 0)",
 	background: "rgb(255, 255, 255)"
+},
+	"20": {
+	color: "rgb(255, 255, 255)",
+	background: "rgb(142, 34, 77)"
 },
 	"21": {
 	color: "rgb(0, 0, 0)",
@@ -1761,11 +1765,15 @@ const LineColors = {
 },
 	"314": {
 	color: "rgb(0, 0, 0)",
-	background: "rgb(255, 255, 255)"
+	background: "rgb(255, 93, 85)"
 },
 	"315": {
 	color: "rgb(0, 0, 0)",
 	background: "rgb(255, 255, 255)"
+},
+	"317": {
+	color: "rgb(255, 255, 255)",
+	background: "rgb(17, 41, 111)"
 },
 	"321": {
 	color: "rgb(0, 0, 0)",
@@ -1776,8 +1784,8 @@ const LineColors = {
 	background: "rgb(255, 255, 255)"
 },
 	"325": {
-	color: "rgb(0, 0, 0)",
-	background: "rgb(255, 255, 255)"
+	color: "rgb(255, 255, 255)",
+	background: "rgb(225, 36, 114)"
 },
 	"350": {
 	color: "rgb(0, 0, 0)",

package/dist/collection/assets/i18n/de.json

@@ -61,6 +61,7 @@
   "upload": {
     "description": "Um Dateien zu uploaden, ziehen Sie die Dateien in diesen Bereich.",
     "button": "Dateien auswählen",
+    "download": "Download",
     "cancelUpload": "Upload abbrechen",
     "uploadCanceled": "Upload abgebrochen.",
     "cancelUploadConfirmation": "Sind Sie sicher, dass Sie den Upload abbrechen wollen?",
@@ -150,6 +151,15 @@
     "showTranscript": "Abschrift zeigen",
     "download": "Download"
   },
+  "share": {
+    "mailSubject": "Link-Empfehlung Website Stadt Zürich",
+    "mailBody": "Folgende Seite (Stadt Zürich) wurde Ihnen empfohlen:\n\n{shareUrl}",
+    "shareFacebook": "Bei Facebook teilen",
+    "shareTwitter": "Bei Twitter teilen",
+    "shareLinkedin": "Bei LinkedIn teilen",
+    "shareXing": "Bei XING teilen",
+    "shareMail": "Per E-Mail versenden"
+  },
   "footer": {
     "legalNoticeUrl": "rechtliche-hinweise",
     "legalNoticeText": "Rechtliche Hinweise",

package/dist/collection/assets/i18n/en.json

@@ -61,6 +61,7 @@
   "upload": {
     "description": "To upload files drag & drop them in this area.",
     "button": "Choose files",
+    "download": "Download",
     "cancelUpload": "Cancel upload",
     "uploadCanceled": "Upload canceled.",
     "cancelUploadConfirmation": "Are you sure you want to cancel this upload?",
@@ -150,6 +151,15 @@
     "showTranscript": "Show transcript",
     "download": "Download"
   },
+  "share": {
+    "mailSubject": "Recommended link City of Zurich website",
+    "mailBody": "The following website (City of Zurich) is recommended:\n\n{shareUrl}",
+    "shareFacebook": "Share on Facebook",
+    "shareTwitter": "Share on Twitter",
+    "shareLinkedin": "Share on LinkedIn",
+    "shareXing": "Share on XING",
+    "shareMail": "Send by email"
+  },
   "footer": {
     "legalNoticeUrl": "legal-notice",
     "legalNoticeText": "Legal notice",

package/dist/collection/assets/icons/mono/facebook-filled.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.742 5.03888H17.625V0.75H14.2147C10.1017 0.925875 9.258 3.246 9.1875 5.67188V7.8165H6.375V12H9.1875V23.25H13.4062V12H16.8866L17.5545 7.8165H13.4062V6.51562C13.3949 6.33049 13.4207 6.14496 13.482 5.96991C13.5434 5.79487 13.6391 5.63384 13.7635 5.49628C13.8879 5.35873 14.0386 5.24741 14.2066 5.16886C14.3746 5.09031 14.5567 5.04612 14.742 5.03888Z" fill="#4D4D4D"/>
+</svg>

package/dist/collection/assets/icons/mono/linkedin-filled.svg

@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_773_103846)">
+<path d="M1.15427 8.37411H5.72477V22.1906H1.15427V8.37411Z" fill="#4D4D4D"/>
+<path d="M17.5196 7.91699C15.5156 7.91699 14.3205 8.65536 13.0549 10.2724V8.37411H8.48439V22.1906H13.0898V14.7022C13.0898 13.1201 13.8983 11.5732 15.7264 11.5732C17.5545 11.5732 18.6443 13.1201 18.6443 14.667V22.1906H23.25V14.3509C23.25 8.90136 19.5585 7.91699 17.5196 7.91699Z" fill="#4D4D4D"/>
+<path d="M3.45714 1.65936C1.94552 1.65936 0.750015 2.74911 0.750015 4.08524C0.750015 5.42136 1.94552 6.51111 3.45714 6.51111C4.96877 6.51111 6.16427 5.42136 6.16427 4.08524C6.16427 2.74911 4.96877 1.65936 3.45714 1.65936Z" fill="#4D4D4D"/>
+</g>
+<defs>
+<clipPath id="clip0_773_103846">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/collection/assets/icons/mono/mail-filled.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.749939 5.19542V18.7858L7.59073 11.8082L0.749939 5.19542Z" fill="#4D4D4D"/>
+<path d="M1.45015 19.5H22.5497L15.6901 12.5032L12.3475 15.7345C12.1536 15.9218 11.8462 15.9218 11.6524 15.7345L8.30973 12.5032L1.45015 19.5Z" fill="#4D4D4D"/>
+<path d="M23.2499 18.7858V5.19542L16.4092 11.8082L23.2499 18.7858Z" fill="#4D4D4D"/>
+<path d="M22.5305 4.5H1.46934L11.9999 14.6796L22.5305 4.5Z" fill="#4D4D4D"/>
+</svg>

package/dist/collection/assets/icons/mono/star-filled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 18L5.625 21.75L7.125 14.625L1.875 9.75003L9 9.00003L12 2.25003L15 9.00003L22.125 9.75003L16.875 14.625L18.375 21.75L12 18Z" fill="#4D4D4D" stroke="#4D4D4D" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 18L5.625 21.75L7.125 14.625L1.875 9.75L9 9L12 2.25L15 9L22.125 9.75L16.875 14.625L18.375 21.75L12 18Z" fill="#4D4D4D" stroke="#4D4D4D" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/dist/collection/assets/icons/mono/twitter-filled.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.643 4.93701C22.808 5.30701 21.911 5.55701 20.968 5.67001C21.93 5.09401 22.668 4.18001 23.016 3.09201C22.116 3.62601 21.119 4.01401 20.058 4.22201C19.208 3.31801 17.998 2.75201 16.658 2.75201C14.086 2.75201 12 4.83801 12 7.41201C12 7.77601 12.042 8.13001 12.12 8.47201C8.247 8.27701 4.816 6.42201 2.518 3.60401C2.118 4.29401 1.888 5.09401 1.888 5.94601C1.888 7.56201 2.711 8.98901 3.96 9.82401C3.196 9.79901 2.478 9.59001 1.85 9.24101V9.30101C1.85 11.558 3.455 13.441 5.587 13.869C5.195 13.975 4.784 14.031 4.36 14.031C4.06 14.031 3.767 14.003 3.483 13.949C4.076 15.799 5.796 17.147 7.835 17.183C6.24 18.433 4.231 19.178 2.049 19.178C1.673 19.178 1.302 19.156 0.936996 19.113C2.999 20.436 5.447 21.206 8.077 21.206C16.647 21.206 21.332 14.108 21.332 7.95201C21.332 7.75201 21.327 7.55001 21.318 7.35001C22.228 6.69201 23.018 5.87301 23.641 4.94001L23.643 4.93701Z" fill="#4D4D4D"/>
+</svg>

package/dist/collection/assets/icons/mono/xing-filled.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.3495 5.80238C9.26694 5.6283 9.13785 5.48045 8.9765 5.37515C8.81515 5.26986 8.62783 5.21124 8.43525 5.20576H5.20125C5.11347 5.19957 5.02556 5.21565 4.94565 5.25249C4.86574 5.28933 4.79642 5.34574 4.74412 5.41651C4.70694 5.49443 4.69064 5.58067 4.69682 5.66679C4.703 5.75291 4.73145 5.83594 4.77937 5.90776L6.95887 9.69863V9.73388L3.54862 15.7714C3.50536 15.846 3.48257 15.9307 3.48257 16.017C3.48257 16.1033 3.50536 16.188 3.54862 16.2626C3.5903 16.3355 3.6526 16.3943 3.72767 16.4318C3.80274 16.4693 3.88723 16.4838 3.9705 16.4734H7.20487C7.39774 16.4679 7.58454 16.4048 7.7412 16.2921C7.89786 16.1795 8.01721 16.0226 8.08387 15.8415C8.08387 15.8415 11.4589 9.87413 11.5995 9.66376C11.5646 9.66376 9.3495 5.80238 9.3495 5.80238Z" fill="#4D4D4D"/>
+<path d="M22.5334 1.45013C22.5849 1.37859 22.6126 1.29266 22.6126 1.20451C22.6126 1.11635 22.5849 1.03042 22.5334 0.958882C22.4917 0.886047 22.4294 0.827172 22.3543 0.78967C22.2793 0.752168 22.1948 0.737715 22.1115 0.748132H18.8419C18.649 0.753525 18.4621 0.816561 18.3054 0.929114C18.1487 1.04167 18.0292 1.19858 17.9625 1.37963C17.9625 1.37963 10.9669 13.7704 10.7557 14.1566C10.7557 14.1919 15.3611 22.6163 15.3611 22.6163C15.4415 22.7948 15.5691 22.9479 15.7301 23.0592C15.8912 23.1705 16.0796 23.2357 16.275 23.2478H19.5094C19.5926 23.2582 19.6771 23.2437 19.7522 23.2062C19.8273 23.1687 19.8896 23.1098 19.9312 23.037C19.9661 22.9598 19.9841 22.8761 19.9841 22.7914C19.9841 22.7067 19.9661 22.623 19.9312 22.5458L15.3615 14.1919V14.1566L22.5334 1.45013Z" fill="#4D4D4D"/>
+</svg>

package/dist/collection/collection-manifest.json

@@ -14,11 +14,13 @@
     "./components/stzh-card/stzh-card.js",
     "./components/stzh-card-list/stzh-card-list.js",
     "./components/stzh-cell/stzh-cell.js",
+    "./components/stzh-chart/stzh-chart.js",
     "./components/stzh-checkbox/stzh-checkbox.js",
     "./components/stzh-checkboxgroup/stzh-checkboxgroup.js",
     "./components/stzh-chip/stzh-chip.js",
     "./components/stzh-chip-select/stzh-chip-select.js",
     "./components/stzh-clamp/stzh-clamp.js",
+    "./components/stzh-contactaddress/stzh-contactaddress.js",
     "./components/stzh-container/stzh-container.js",
     "./components/stzh-cspace/stzh-cspace.js",
     "./components/stzh-datalist/stzh-datalist.js",
@@ -52,7 +54,9 @@
     "./components/stzh-olmap/stzh-olmap.js",
     "./components/stzh-overlay/stzh-overlay.js",
     "./components/stzh-page-skiplinks/stzh-page-skiplinks.js",
+    "./components/stzh-pagebottom/stzh-pagebottom.js",
     "./components/stzh-pagetitle/stzh-pagetitle.js",
+    "./components/stzh-pagetitle-hero/stzh-pagetitle-hero.js",
     "./components/stzh-popover/stzh-popover.js",
     "./components/stzh-portal-mitwirken/stzh-portal-mitwirken.js",
     "./components/stzh-progressbar/stzh-progressbar.js",
@@ -64,6 +68,7 @@
     "./components/stzh-row/stzh-row.js",
     "./components/stzh-saptcha/stzh-saptcha.js",
     "./components/stzh-section/stzh-section.js",
+    "./components/stzh-share/stzh-share.js",
     "./components/stzh-skiplink/stzh-skiplink.js",
     "./components/stzh-sortable/stzh-sortable.js",
     "./components/stzh-status/stzh-status.js",

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

package/dist/collection/components/stzh-accordion-item/stzh-accordion-item.css

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -96,7 +99,6 @@
 
 :host {
   --trigger-size: 1.3125rem;
-  --content-padding: var(--stzh-accordion-content-padding);
   --content-background: var(--stzh-accordion-content-background);
   --icon-size: var(--stzh-icon-size-small);
 }
@@ -124,7 +126,8 @@
      -moz-appearance: none;
           appearance: none;
   background-color: transparent;
-  padding: var(--stzh-space-xsmall) var(--stzh-space-medium);
+  padding-top: var(--stzh-space-medium);
+  padding-bottom: var(--stzh-space-medium);
   border: none;
   display: flex;
   align-items: center;
@@ -146,6 +149,30 @@
 .stzh-accordion-item__button:hover, .stzh-accordion-item__button:focus {
   color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
+.stzh-accordion-item__button, .stzh-accordion-item__content-inner {
+  padding-left: var(--stzh-space-medium);
+  padding-right: var(--stzh-space-medium);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-accordion-item__button, .stzh-accordion-item__content-inner {
+    padding-left: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-accordion-item__button, .stzh-accordion-item__content-inner {
+    padding-left: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-accordion-item__button, .stzh-accordion-item__content-inner {
+    padding-right: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-accordion-item__button, .stzh-accordion-item__content-inner {
+    padding-right: var(--stzh-space-xlarge);
+  }
+}
 .stzh-accordion-item__button-text {
   flex-grow: 1;
 }
@@ -178,7 +205,28 @@
   background-color: var(--content-background);
 }
 .stzh-accordion-item__content-inner {
-  padding: var(--content-padding);
+  padding-top: var(--stzh-space-medium);
+  padding-bottom: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-accordion-item__content-inner {
+    padding-top: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-accordion-item__content-inner {
+    padding-top: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-accordion-item__content-inner {
+    padding-bottom: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-accordion-item__content-inner {
+    padding-bottom: var(--stzh-space-xxxlarge);
+  }
 }
 .stzh-accordion-item__icon-wrapper {
   align-self: flex-start;

package/dist/collection/components/stzh-accordion-item/stzh-accordion-item.js

@@ -105,10 +105,10 @@ export class StzhAccordionItem {
         });
       }
       await stopAnimations(this.bodyElement);
+      this.bodyElement.style.overflow = "hidden";
       await animateTo(this.bodyElement, shimKeyframesHeightAuto(ANIMATION_HIDE.keyframes, this.bodyElement.scrollHeight), ANIMATION_HIDE.options);
       this.bodyElement.hidden = true;
       this.bodyElement.style.height = "0px";
-      this.bodyElement.style.overflow = "hidden";
       if (this.toggledByMethod) {
         this.stzhClosed.emit({
           component: "stzh-accordion-item"

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -99,6 +102,9 @@
   flex-grow: 1;
   margin: var(--stzh-space-xxsmall);
 }
+:host[variant=cta] ::slotted([slot=primary]), :host[variant=cta] ::slotted([slot=secondary]) {
+  flex-grow: 0;
+}
 
 .stzh-actions__actions {
   display: flex;
@@ -119,7 +125,7 @@
 .stzh-actions--process .stzh-actions__actions {
   justify-content: space-between;
 }
-.stzh-actions--with-border {
+.stzh-actions--has-border {
   padding-top: var(--stzh-space-medium);
   border-top: 0.0625rem solid var(--stzh-base-border-color);
 }