@oiz/stzh-components 2.1.0-alpha → 2.1.0-beta

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"
+      },
+      "twitter": {
+        popup: true,
+        blank: true,
+        url: `https://twitter.com/intent/tweet?text=${abbreviateText(title, maxTweetLength)}&url=${shareUrl}`,
+        text: this.localization.shareTwitter,
+        icon: "twitter"
+      },
+      "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"
+      },
+      "xing": {
+        popup: true,
+        blank: true,
+        url: `https://www.xing.com/spi/shares/new?url=${shareUrl}`,
+        text: this.localization.shareXing,
+        icon: "xing"
+      },
+      "mail": {
+        popup: false,
+        blank: false,
+        url: `mailto:?subject=${mailSubject}&body=${mailBody}`,
+        text: this.localization.shareMail,
+        icon: "mail"
+      }
+    };
+    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

@@ -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__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{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);margin-left:var(--stzh-space-xsmall)}.stzh-upload__download{display:none}.stzh-upload__download[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__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)}";
 
 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,44 @@ 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">
+            <a class="stzh-upload__download" ${ATTR_LINK} aria-label="${this.localization.download}" title="${this.localization.download}">
+              <stzh-icon class="stzh-upload__download-icon" name="download"></stzh-icon>
+            </a>
+            <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>
       </div>

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

@@ -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/collection-manifest.json

@@ -52,6 +52,7 @@
     "./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-popover/stzh-popover.js",
     "./components/stzh-portal-mitwirken/stzh-portal-mitwirken.js",
@@ -64,6 +65,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-checkbox/assets/check.svg

@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M2 11.3333L9 18.6667L22 5.33334" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M2 11.3333L9 18.6667L22 5.33334" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" />
 </svg>

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

@@ -220,9 +220,6 @@
   opacity: 0;
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
 }
-.stzh-checkbox__check path {
-  vector-effect: var(--stzh-base-vector-effect);
-}
 .stzh-checkbox__label {
   display: inline-block;
   color: var(--stzh-base-color);

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

@@ -183,11 +183,6 @@
   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);
   color: var(--stzh-base-lead-color);
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  overflow: hidden;
 }
 @media screen and (min-width: 1024px) {
   .stzh-datamessagelist-item__description {
@@ -196,12 +191,6 @@
     letter-spacing: var(--stzh-font-curve-p1-medium-text-letter-spacing);
   }
 }
-@media screen and (min-width: 1024px) {
-  .stzh-datamessagelist-item__description {
-    -webkit-line-clamp: 1;
-    line-clamp: 1;
-  }
-}
 .stzh-datamessagelist-item__meta-wrapper {
   margin-top: var(--stzh-space-small);
 }

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

@@ -75,7 +75,7 @@ export class StzhDatamessagelistItem {
       "stzh-datamessagelist-item--is-unread": this.unread
     };
     return (h(Host, { role: "listitem" }, h("article", { class: classes }, h("div", { class: "stzh-datamessagelist-item__content" }, h("div", { class: "stzh-datamessagelist-item__text" }, h("h3", { class: "stzh-datamessagelist-item__heading" }, h("a", { class: "stzh-datamessagelist-item__heading-link", href: this.href, onClick: this.itemClick }, this.heading)), this.description &&
-      h("div", { class: "stzh-datamessagelist-item__description" }, this.description), this._meta && this._meta.length > 0 &&
+      h("div", { class: "stzh-datamessagelist-item__description" }, h("stzh-clamp", { lines: 2, linesMedium: 1 }, this.description)), this._meta && this._meta.length > 0 &&
       h("div", { class: "stzh-datamessagelist-item__meta-wrapper" }, h("ul", { class: "stzh-datamessagelist-item__meta" }, this._meta.map((meta) => h("li", { class: "stzh-datamessagelist-item__meta-item" }, h("span", { class: "stzh-datamessagelist-item__meta-item-label" }, meta.label), h("span", { class: "stzh-datamessagelist-item__meta-item-value" }, meta.value)))))), this._loadingStatus &&
       h("stzh-status", { class: "stzh-datamessagelist-item__status", label: this._loadingStatus.label, percent: this._loadingStatus.percent, type: this._loadingStatus.type, withLoadingbar: true }), this._tags && this._tags.length > 0 &&
       h("div", { class: "stzh-datamessagelist-item__tags-wrapper" }, h("div", { class: "stzh-datamessagelist-item__tags" }, this._tags.map((tag) => h("stzh-chip", { class: "stzh-datamessagelist-item__tag", variant: "tag", size: "small", type: tag.type, icon: tag.icon, label: tag.label }))))), h("div", { class: "stzh-datamessagelist-item__actions" }, this.externalHref &&

package/dist/collection/components/stzh-footer/stzh-footer.js

@@ -20,7 +20,7 @@ export class StzhFooter {
     };
     this.copyright = undefined;
     this.variant = "default";
-    this.mainUrl = "https://stadt-zuerich.ch";
+    this.mainUrl = "https://www.stadt-zuerich.ch";
     this.localization = undefined;
   }
   async componentWillLoad() {
@@ -119,7 +119,7 @@ export class StzhFooter {
         },
         "attribute": "main-url",
         "reflect": false,
-        "defaultValue": "\"https://stadt-zuerich.ch\""
+        "defaultValue": "\"https://www.stadt-zuerich.ch\""
       },
       "localization": {
         "type": "unknown",

package/dist/collection/components/stzh-header/stzh-header.js

@@ -9,7 +9,7 @@ import { media } from '../../utils/media-utils';
  */
 export class StzhHeader {
   constructor() {
-    this.href = "https://stadt-zuerich.ch";
+    this.href = "https://www.stadt-zuerich.ch";
     this.preventAppnavPlaceholder = false;
     this.hideLogo = false;
     this.paddingTop = undefined;
@@ -177,7 +177,7 @@ export class StzhHeader {
         },
         "attribute": "href",
         "reflect": false,
-        "defaultValue": "\"https://stadt-zuerich.ch\""
+        "defaultValue": "\"https://www.stadt-zuerich.ch\""
       },
       "preventAppnavPlaceholder": {
         "type": "boolean",

package/dist/collection/components/stzh-icon-sprite/stzh-icon-sprite.css

@@ -95,5 +95,9 @@
 }
 
 .stzh-icon-sprite path {
-  vector-effect: var(--stzh-base-vector-effect);
+  vector-effect: initial;
+}
+
+#stzh-icon-social-media path {
+  vector-effect: non-scaling-stroke;
 }

package/dist/collection/components/stzh-list-item/assets/checkmark.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="M2 11.3333L9 18.6667L22 5.33334" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 11.3333L9 18.6667L22 5.33334" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" />
 </svg>

package/dist/collection/components/stzh-olmap/stzh-olmap.js

@@ -125,7 +125,7 @@ export class StzhOlmap {
     this.hostname = "www.ogc.stadt-zuerich.ch";
     this.scaleControl = true;
     this.layerControl = true;
-    this.printControl = false;
+    this.printControl = true;
     this.locationControl = false;
     this.layer = "streets";
     this.zoom = 7;
@@ -669,7 +669,7 @@ export class StzhOlmap {
         },
         "attribute": "print-control",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "true"
       },
       "locationControl": {
         "type": "boolean",