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

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

@@ -0,0 +1,184 @@
+import { Host, h } from "@stencil/core";
+import { fetchTranslations } from "../../utils/translation-utils";
+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") : "";
+};
+/**
+ */
+export class StzhShare {
+  constructor() {
+    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 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 (h(Host, null, h("div", { class: classes }, h("ul", { class: "stzh-share__list" }, this._services.map((service) => h("li", { class: "stzh-share__item" }, h("stzh-tooltip", { content: serviceData[service].text }, 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 }, h("stzh-icon", { class: "stzh-share__icon", name: serviceData[service].icon })))))))));
+  }
+  static get is() { return "stzh-share"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-share.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-share.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhShareLocalizedText",
+          "resolved": "StzhLocaleComponent & { mailSubject: string; mailBody: string; shareFacebook: string; shareTwitter: string; shareLinkedin: string; shareXing: string; shareMail: string; }",
+          "references": {
+            "StzhShareLocalizedText": {
+              "location": "import",
+              "path": "./stzh-share.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
+      "url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "URL of current site (uses full URL by default)"
+        },
+        "attribute": "url",
+        "reflect": false,
+        "defaultValue": "window.location.href"
+      },
+      "services": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ShareService[] | string",
+          "resolved": "ShareService[] | string",
+          "references": {
+            "ShareService": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Array of enabled share buttons.\nPossible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`"
+        },
+        "attribute": "services",
+        "reflect": false,
+        "defaultValue": "[\n    \"facebook\", \"twitter\", \"linkedin\", \"xing\", \"mail\"\n  ]"
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "services",
+        "methodName": "servicesWatcher"
+      }];
+  }
+}

package/dist/collection/components/stzh-share/stzh-share.localization.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/stzh-share/stzh-share.stories.js

@@ -0,0 +1,33 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Share',
+  component: 'stzh-share',
+  parameters: {
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('share'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-share {...args}></stzh-share>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  url: 'https://www.stadt-zuerich.ch/gud/de/index/gesundheitsversorgung/public-health/coronavirus-sars-cov-2/BliibDraa.html',
+};

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

@@ -263,6 +263,15 @@ stzh-upload *::after {
   display: none;
 }
 .stzh-upload__preview {
+  display: flex;
+  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 {
@@ -289,11 +298,6 @@ stzh-upload *::after {
 .stzh-upload__preview.dz-empty .stzh-upload__size {
   display: none;
 }
-.stzh-upload__inner {
-  height: 3.875rem;
-  display: flex;
-  align-items: center;
-}
 .stzh-upload__details {
   flex-grow: 1;
   display: flex;
@@ -312,7 +316,6 @@ stzh-upload *::after {
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  margin-left: var(--stzh-space-medium);
 }
 .stzh-upload__infos {
   font-size: var(--stzh-font-milli-font-size);
@@ -334,6 +337,12 @@ stzh-upload *::after {
   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);
@@ -373,7 +382,7 @@ stzh-upload *::after {
 .stzh-upload__extension::after {
   content: " | ";
 }
-.stzh-upload__delete {
+.stzh-upload__download, .stzh-upload__delete {
   cursor: pointer;
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -383,6 +392,13 @@ stzh-upload *::after {
   background: none;
   display: flex;
   color: var(--stzh-base-color);
+  margin-left: var(--stzh-space-xsmall);
+}
+.stzh-upload__download {
+  display: none;
+}
+.stzh-upload__download[href] {
+  display: flex;
 }
 .stzh-upload__error-message {
   font-size: var(--stzh-font-nano-font-size);

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

@@ -6,6 +6,8 @@ import Dropzone from "dropzone";
 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;
@@ -28,6 +30,7 @@ export class StzhUpload {
     this.withCredentials = false;
     this.disabled = false;
     this.invalid = false;
+    this.downloadDisabled = false;
     this.error = undefined;
     this.acceptedFiles = null;
     this.autoProcessQueue = true;
@@ -153,12 +156,12 @@ export class StzhUpload {
           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) {
@@ -196,6 +199,20 @@ export class StzhUpload {
         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;
         }
@@ -245,43 +262,44 @@ export class StzhUpload {
       },
       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>
@@ -564,6 +582,24 @@ export class StzhUpload {
         "reflect": true,
         "defaultValue": "false"
       },
+      "downloadDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether download functionality should be disabled."
+        },
+        "attribute": "download-disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "error": {
         "type": "string",
         "mutable": false,
@@ -916,7 +952,7 @@ export class StzhUpload {
         "mutable": false,
         "complexType": {
           "original": "StzhUploadLocalizedText",
-          "resolved": "StzhLocaleComponent & { description: string; button: string; cancelUpload: string; uploadCanceled: string; cancelUploadConfirmation: string; removeFile: string; maxFilesExceeded: string; serverError: string; accessError: string; responseError: string; invalidFileType: string; fileTooBig: string; fileTooBigServer: string; }",
+          "resolved": "StzhLocaleComponent & { description: string; button: string; download: string; cancelUpload: string; uploadCanceled: string; cancelUploadConfirmation: string; removeFile: string; maxFilesExceeded: string; serverError: string; accessError: string; responseError: string; invalidFileType: string; fileTooBig: string; fileTooBigServer: string; }",
           "references": {
             "StzhUploadLocalizedText": {
               "location": "import",

package/dist/collection/components/stzh-upload/stzh-upload.stories.js

@@ -64,8 +64,8 @@ ExistingFiles.args = {
   description: 'To upload files drag & drop them in this area. Allowed file formats: [txt, pdf, docx] (max. 25 MB)',
   'accepted-files': '.txt,.pdf,.docs',
   'existing-files': `[
-    { "name": "Filename.pdf", "size": 12345, "id": "upload-1" },
-    { "name": "Filename2.pdf", "size": 22345, "id": "upload-2" },
-    { "name": "Filename3.pdf", "size": 0, "id": "upload-3" }
+    { "name": "Filename.pdf", "url": "media/samples/document.pdf", "size": 12345, "id": "upload-1" },
+    { "name": "Filename2.pdf", "url": "media/samples/document.pdf", "size": 22345, "id": "upload-2" },
+    { "name": "Filename3.pdf", "url": "media/samples/document.pdf", "size": 0, "id": "upload-3" }
   ]`
 };

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

@@ -87,7 +87,7 @@ export class StzhVbzLinechip {
         "mutable": false,
         "complexType": {
           "original": "VBZ.Lines",
-          "resolved": "\"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"10\" | \"11\" | \"12\" | \"13\" | \"14\" | \"15\" | \"16\" | \"17\" | \"19\" | \"21\" | \"23\" | \"24\" | \"25\" | \"29\" | \"31\" | \"32\" | \"33\" | \"34\" | \"35\" | \"36\" | \"37\" | \"38\" | \"39\" | \"40\" | \"45\" | \"46\" | \"54\" | \"61\" | \"62\" | \"63\" | \"64\" | \"66\" | \"67\" | \"69\" | \"70\" | \"72\" | \"73\" | \"75\" | \"76\" | \"77\" | \"78\" | \"79\" | \"80\" | \"83\" | \"89\" | \"91\" | \"94\" | \"95\" | \"99\" | \"151\" | \"152\" | \"153\" | \"156\" | \"161\" | \"162\" | \"163\" | \"165\" | \"184\" | \"185\" | \"200\" | \"201\" | \"215\" | \"220\" | \"235\" | \"236\" | \"245\" | \"301\" | \"302\" | \"303\" | \"304\" | \"305\" | \"306\" | \"307\" | \"308\" | \"309\" | \"311\" | \"314\" | \"315\" | \"321\" | \"323\" | \"325\" | \"350\" | \"444\" | \"445\" | \"701\" | \"702\" | \"703\" | \"704\" | \"705\" | \"720\" | \"721\" | \"725\" | \"726\" | \"727\" | \"742\" | \"743\" | \"744\" | \"745\" | \"747\" | \"748\" | \"751\" | \"752\" | \"753\" | \"754\" | \"759\" | \"760\" | \"765\" | \"768\" | \"781\" | \"786\" | \"787\" | \"910\" | \"912\" | \"916\" | \"917\" | \"918\" | \"919\" | \"E\" | \"N\" | \"N1\" | \"N2\" | \"N4\" | \"N5\" | \"N6\" | \"N7\" | \"N8\" | \"N9\" | \"N10\" | \"N11\" | \"N12\" | \"N13\" | \"N14\" | \"N15\" | \"N16\" | \"N17\" | \"N18\" | \"N19\" | \"N30\" | \"N31\" | \"N32\" | \"N33\" | \"N34\" | \"N45\" | \"N72\" | \"N78\" | \"SN1\" | \"SN4\" | \"SN5\" | \"SN6\" | \"SN7\" | \"SN8\" | \"SN9\" | \"S2\" | \"S3\" | \"S4\" | \"S5\" | \"S6\" | \"S7\" | \"S8\" | \"S9\" | \"S10\" | \"S11\" | \"S14\" | \"S15\" | \"S16\" | \"S18\" | \"S19\" | \"S20\" | \"S21\" | \"S23\" | \"S24\" | \"S25\"",
+          "resolved": "\"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"10\" | \"11\" | \"12\" | \"13\" | \"14\" | \"15\" | \"16\" | \"17\" | \"19\" | \"20\" | \"21\" | \"23\" | \"24\" | \"25\" | \"29\" | \"31\" | \"32\" | \"33\" | \"34\" | \"35\" | \"36\" | \"37\" | \"38\" | \"39\" | \"40\" | \"45\" | \"46\" | \"54\" | \"61\" | \"62\" | \"63\" | \"64\" | \"66\" | \"67\" | \"69\" | \"70\" | \"72\" | \"73\" | \"75\" | \"76\" | \"77\" | \"78\" | \"79\" | \"80\" | \"83\" | \"89\" | \"91\" | \"94\" | \"95\" | \"99\" | \"151\" | \"152\" | \"153\" | \"156\" | \"161\" | \"162\" | \"163\" | \"165\" | \"184\" | \"185\" | \"200\" | \"201\" | \"215\" | \"220\" | \"235\" | \"236\" | \"245\" | \"301\" | \"302\" | \"303\" | \"304\" | \"305\" | \"306\" | \"307\" | \"308\" | \"309\" | \"311\" | \"314\" | \"315\" | \"317\" | \"321\" | \"323\" | \"325\" | \"350\" | \"444\" | \"445\" | \"701\" | \"702\" | \"703\" | \"704\" | \"705\" | \"720\" | \"721\" | \"725\" | \"726\" | \"727\" | \"742\" | \"743\" | \"744\" | \"745\" | \"747\" | \"748\" | \"751\" | \"752\" | \"753\" | \"754\" | \"759\" | \"760\" | \"765\" | \"768\" | \"781\" | \"786\" | \"787\" | \"910\" | \"912\" | \"916\" | \"917\" | \"918\" | \"919\" | \"E\" | \"N\" | \"N1\" | \"N2\" | \"N4\" | \"N5\" | \"N6\" | \"N7\" | \"N8\" | \"N9\" | \"N10\" | \"N11\" | \"N12\" | \"N13\" | \"N14\" | \"N15\" | \"N16\" | \"N17\" | \"N18\" | \"N19\" | \"N30\" | \"N31\" | \"N32\" | \"N33\" | \"N34\" | \"N45\" | \"N72\" | \"N78\" | \"SN1\" | \"SN4\" | \"SN5\" | \"SN6\" | \"SN7\" | \"SN8\" | \"SN9\" | \"S2\" | \"S3\" | \"S4\" | \"S5\" | \"S6\" | \"S7\" | \"S8\" | \"S9\" | \"S10\" | \"S11\" | \"S14\" | \"S15\" | \"S16\" | \"S18\" | \"S19\" | \"S20\" | \"S21\" | \"S23\" | \"S24\" | \"S25\"",
           "references": {
             "VBZ": {
               "location": "import",

package/dist/components/index.d.ts

@@ -51,6 +51,7 @@ export { StzhMetanav as StzhMetanav } from '../types/components/stzh-metanav/stz
 export { StzhOlmap as StzhOlmap } from '../types/components/stzh-olmap/stzh-olmap';
 export { StzhOverlay as StzhOverlay } from '../types/components/stzh-overlay/stzh-overlay';
 export { StzhPageSkiplinks as StzhPageSkiplinks } from '../types/components/stzh-page-skiplinks/stzh-page-skiplinks';
+export { StzhPagebottom as StzhPagebottom } from '../types/components/stzh-pagebottom/stzh-pagebottom';
 export { StzhPagetitle as StzhPagetitle } from '../types/components/stzh-pagetitle/stzh-pagetitle';
 export { StzhPopover as StzhPopover } from '../types/components/stzh-popover/stzh-popover';
 export { StzhPortalMitwirken as StzhPortalMitwirken } from '../types/components/stzh-portal-mitwirken/stzh-portal-mitwirken';
@@ -63,6 +64,7 @@ export { StzhRichtext as StzhRichtext } from '../types/components/stzh-richtext/
 export { StzhRow as StzhRow } from '../types/components/stzh-row/stzh-row';
 export { StzhSaptcha as StzhSaptcha } from '../types/components/stzh-saptcha/stzh-saptcha';
 export { StzhSection as StzhSection } from '../types/components/stzh-section/stzh-section';
+export { StzhShare as StzhShare } from '../types/components/stzh-share/stzh-share';
 export { StzhSkiplink as StzhSkiplink } from '../types/components/stzh-skiplink/stzh-skiplink';
 export { StzhSortable as StzhSortable } from '../types/components/stzh-sortable/stzh-sortable';
 export { StzhStatus as StzhStatus } from '../types/components/stzh-status/stzh-status';

package/dist/components/index.js

@@ -51,6 +51,7 @@ export { StzhMetanav, defineCustomElement as defineCustomElementStzhMetanav } fr
 export { StzhOlmap, defineCustomElement as defineCustomElementStzhOlmap } from './stzh-olmap.js';
 export { StzhOverlay, defineCustomElement as defineCustomElementStzhOverlay } from './stzh-overlay.js';
 export { StzhPageSkiplinks, defineCustomElement as defineCustomElementStzhPageSkiplinks } from './stzh-page-skiplinks.js';
+export { StzhPagebottom, defineCustomElement as defineCustomElementStzhPagebottom } from './stzh-pagebottom.js';
 export { StzhPagetitle, defineCustomElement as defineCustomElementStzhPagetitle } from './stzh-pagetitle.js';
 export { StzhPopover, defineCustomElement as defineCustomElementStzhPopover } from './stzh-popover.js';
 export { StzhPortalMitwirken, defineCustomElement as defineCustomElementStzhPortalMitwirken } from './stzh-portal-mitwirken.js';
@@ -63,6 +64,7 @@ export { StzhRichtext, defineCustomElement as defineCustomElementStzhRichtext }
 export { StzhRow, defineCustomElement as defineCustomElementStzhRow } from './stzh-row.js';
 export { StzhSaptcha, defineCustomElement as defineCustomElementStzhSaptcha } from './stzh-saptcha.js';
 export { StzhSection, defineCustomElement as defineCustomElementStzhSection } from './stzh-section.js';
+export { StzhShare, defineCustomElement as defineCustomElementStzhShare } from './stzh-share.js';
 export { StzhSkiplink, defineCustomElement as defineCustomElementStzhSkiplink } from './stzh-skiplink.js';
 export { StzhSortable, defineCustomElement as defineCustomElementStzhSortable } from './stzh-sortable.js';
 export { StzhStatus, defineCustomElement as defineCustomElementStzhStatus } from './stzh-status.js';
@@ -79,7 +81,7 @@ export { StzhVisuallyhidden, defineCustomElement as defineCustomElementStzhVisua
 export { StzhVspace, defineCustomElement as defineCustomElementStzhVspace } from './stzh-vspace.js';
 
 const name = "@oiz/stzh-components";
-const version = "2.1.0-alpha";
+const version = "2.1.0-beta";
 
 const packageName = name.substring(name.indexOf('/')+1);
 

package/dist/components/stzh-checkbox.js

@@ -6,11 +6,11 @@ import { d as defineCustomElement$3 } from './stzh-icon2.js';
 import { d as defineCustomElement$2 } from './stzh-popover2.js';
 
 const Check = `<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>
 `;
 
-const stzhCheckboxCss = ".sc-stzh-checkbox-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-checkbox-h{display:none}.sc-stzh-checkbox-h *.sc-stzh-checkbox,.sc-stzh-checkbox-h *.sc-stzh-checkbox::before,.sc-stzh-checkbox-h *.sc-stzh-checkbox::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-checkbox-h{display:inline-block;border-radius:var(--stzh-form-input-border-radius)}.sc-stzh-checkbox-h .sc-stzh-checkbox-s>stzh-text{--color:inherit}.stzh-checkbox__marker-symbol.sc-stzh-checkbox{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-checkbox__marker-text.sc-stzh-checkbox{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-checkbox__description-wrapper.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox__description.sc-stzh-checkbox{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-checkbox__error.sc-stzh-checkbox{color:var(--stzh-color-error)}.stzh-checkbox__error-list.sc-stzh-checkbox{list-style:none;margin:0;padding:0}.stzh-checkbox__description.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-checkbox__description-long.sc-stzh-checkbox{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-checkbox__description-long-popover.sc-stzh-checkbox{--width:auto;--max-width:27.3125rem}.stzh-checkbox__description-long-popover[open].sc-stzh-checkbox:not([open=false]) .stzh-checkbox__description-long-button.sc-stzh-checkbox{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox__description-long-button.sc-stzh-checkbox{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-checkbox__description-long-button.sc-stzh-checkbox:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox.sc-stzh-checkbox stzh-icon.stzh-checkbox__description-long-icon.sc-stzh-checkbox{--size:var(--stzh-icon-size-xsmall)}.stzh-checkbox--has-error.sc-stzh-checkbox .stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox--has-description.sc-stzh-checkbox .stzh-checkbox__description.sc-stzh-checkbox{margin-top:var(--stzh-space-xxsmall)}.stzh-checkbox__field-wrapper.sc-stzh-checkbox{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);position:relative;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.stzh-checkbox__input.sc-stzh-checkbox{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none}.stzh-checkbox__mark.sc-stzh-checkbox{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:var(--stzh-form-input-border-radius);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed)}.stzh-checkbox__check.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;opacity:0;color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox__check.sc-stzh-checkbox path.sc-stzh-checkbox{vector-effect:var(--stzh-base-vector-effect)}.stzh-checkbox__label.sc-stzh-checkbox{display:inline-block;color:var(--stzh-base-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);line-height:1.5rem}.stzh-checkbox__label.sc-stzh-checkbox:empty{display:none}.stzh-checkbox__marker-symbol.sc-stzh-checkbox{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:focus~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__label.sc-stzh-checkbox{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:focus:hover~.stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:focus~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-checkbox__input.sc-stzh-checkbox:focus~.stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{opacity:1}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-error)}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-error)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__field-wrapper.sc-stzh-checkbox{cursor:not-allowed}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-grey61)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-grey5)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__mark.sc-stzh-checkbox{background-color:var(--stzh-color-grey5)}";
+const stzhCheckboxCss = ".sc-stzh-checkbox-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-checkbox-h{display:none}.sc-stzh-checkbox-h *.sc-stzh-checkbox,.sc-stzh-checkbox-h *.sc-stzh-checkbox::before,.sc-stzh-checkbox-h *.sc-stzh-checkbox::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-checkbox-h{display:inline-block;border-radius:var(--stzh-form-input-border-radius)}.sc-stzh-checkbox-h .sc-stzh-checkbox-s>stzh-text{--color:inherit}.stzh-checkbox__marker-symbol.sc-stzh-checkbox{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-checkbox__marker-text.sc-stzh-checkbox{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-checkbox__description-wrapper.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox__description.sc-stzh-checkbox{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-checkbox__error.sc-stzh-checkbox{color:var(--stzh-color-error)}.stzh-checkbox__error-list.sc-stzh-checkbox{list-style:none;margin:0;padding:0}.stzh-checkbox__description.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-checkbox__description-long.sc-stzh-checkbox{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-checkbox__description-long-popover.sc-stzh-checkbox{--width:auto;--max-width:27.3125rem}.stzh-checkbox__description-long-popover[open].sc-stzh-checkbox:not([open=false]) .stzh-checkbox__description-long-button.sc-stzh-checkbox{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox__description-long-button.sc-stzh-checkbox{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-checkbox__description-long-button.sc-stzh-checkbox:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox.sc-stzh-checkbox stzh-icon.stzh-checkbox__description-long-icon.sc-stzh-checkbox{--size:var(--stzh-icon-size-xsmall)}.stzh-checkbox--has-error.sc-stzh-checkbox .stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox--has-description.sc-stzh-checkbox .stzh-checkbox__description.sc-stzh-checkbox{margin-top:var(--stzh-space-xxsmall)}.stzh-checkbox__field-wrapper.sc-stzh-checkbox{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);position:relative;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.stzh-checkbox__input.sc-stzh-checkbox{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none}.stzh-checkbox__mark.sc-stzh-checkbox{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:var(--stzh-form-input-border-radius);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed)}.stzh-checkbox__check.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;opacity:0;color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox__label.sc-stzh-checkbox{display:inline-block;color:var(--stzh-base-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);line-height:1.5rem}.stzh-checkbox__label.sc-stzh-checkbox:empty{display:none}.stzh-checkbox__marker-symbol.sc-stzh-checkbox{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:focus~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__label.sc-stzh-checkbox{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:focus:hover~.stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:focus~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-checkbox__input.sc-stzh-checkbox:focus~.stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{opacity:1}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-error)}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-error)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__field-wrapper.sc-stzh-checkbox{cursor:not-allowed}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-grey61)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-grey5)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__mark.sc-stzh-checkbox{background-color:var(--stzh-color-grey5)}";
 
 let checkboxCounter = 0;
 const StzhCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {