@oiz/stzh-components 3.0.0-beta1 → 3.0.0-beta2

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

@@ -150,16 +150,18 @@
     display: none;
   }
 }
-:host ::slotted([slot=logo]) {
-  height: 2.375rem;
-}
 
-.stzh-pagebottom {
+.stzh-pagebottom__wrapper {
+  display: grid;
+}
+.stzh-pagebottom__left {
   display: flex;
   flex-direction: column;
+  flex-wrap: wrap;
+  row-gap: var(--stzh-space-xsmall);
 }
 @media screen and (min-width: 600px) {
-  .stzh-pagebottom {
+  .stzh-pagebottom__left {
     flex-direction: row;
   }
 }
@@ -174,18 +176,57 @@
     line-height: var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height));
   }
 }
+.stzh-pagebottom__sticky-actions {
+  margin-left: auto;
+  margin-top: var(--stzh-space-medium);
+  --stzh-button-white-space: nowrap;
+}
 @media screen and (min-width: 600px) {
-  .stzh-pagebottom__logo {
-    margin-left: auto;
+  .stzh-pagebottom__sticky-actions {
+    margin-top: 0;
   }
 }
-.stzh-pagebottom__logo-link:not(:empty) {
-  display: block;
-  margin-top: var(--stzh-space-xlarge);
+.stzh-pagebottom__print, .stzh-pagebottom__share-wrapper {
+  flex-shrink: 0;
+}
+.stzh-pagebottom__share-wrapper {
+  margin-left: -0.625rem;
 }
 @media screen and (min-width: 600px) {
-  .stzh-pagebottom__logo-link:not(:empty) {
-    margin-top: 0;
-    margin-left: var(--stzh-space-xlarge);
+  .stzh-pagebottom__share-wrapper {
+    margin-left: 0;
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-pagebottom__print {
+    margin-right: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pagebottom__print {
+    margin-right: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 900px) and (min-width: 600px) {
+  .stzh-pagebottom__print {
+    margin-right: var(--stzh-space-xxxxlarge);
+  }
+}
+@media screen and (min-width: 900px) and (min-width: 900px) {
+  .stzh-pagebottom__print {
+    margin-right: var(--stzh-space-xxxxlarge);
+  }
+}
+@media screen and (min-width: 900px) and (min-width: 1260px) {
+  .stzh-pagebottom__print {
+    margin-right: var(--stzh-space-xbig);
+  }
+}
+.stzh-pagebottom:has(.stzh-pagebottom__sticky-actions:not(:empty)) .stzh-pagebottom__wrapper {
+  grid-template-columns: auto;
+}
+@media screen and (min-width: 600px) {
+  .stzh-pagebottom:has(.stzh-pagebottom__sticky-actions:not(:empty)) .stzh-pagebottom__wrapper {
+    grid-template-columns: minmax(0, 1fr) calc(6.875rem + 2.75rem + var(--stzh-space-small) + var(--stzh-space-medium));
   }
 }

package/dist/collection/components/stzh-pagebottom/stzh-pagebottom.e2e.js

@@ -3,7 +3,8 @@ import { visualDiff } from "../../../.build/test/utils";
 const URL = "components-pagebottom";
 const STORIES = [
   "default",
-  "with-logo",
+  "with-print",
+  "with-print-and-sticky-actions"
 ];
 test.describe("pagebottom", () => {
   STORIES.forEach((storyId) => {

package/dist/collection/components/stzh-pagebottom/stzh-pagebottom.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-pagebottom.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-pagebottom/stzh-pagebottom.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,uBAAuB,CAAC;AAEpC,MAAM,OAAO,GAAG;EACd,SAAS;EACT,WAAW;CACZ,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC/B,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACtD,MAAM,UAAU,CAAC;QACf,OAAO;QACP,IAAI;QACJ,GAAG,EAAE,GAAG;OACT,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../.build/test/utils\";\n\nconst URL = \"components-pagebottom\";\n\nconst STORIES = [\n  \"default\",\n  \"with-logo\",\n];\n\ntest.describe(\"pagebottom\", () => {\n  STORIES.forEach((storyId) => {\n    test(`story ${storyId} visual diff`, async ({ page }) => {\n      await visualDiff({\n        storyId,\n        page,\n        url: URL\n      });\n    });\n  });\n});\n"]}
+{"version":3,"file":"stzh-pagebottom.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-pagebottom/stzh-pagebottom.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,uBAAuB,CAAC;AAEpC,MAAM,OAAO,GAAG;EACd,SAAS;EACT,YAAY;EACZ,+BAA+B;CAChC,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC/B,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACtD,MAAM,UAAU,CAAC;QACf,OAAO;QACP,IAAI;QACJ,GAAG,EAAE,GAAG;OACT,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../.build/test/utils\";\n\nconst URL = \"components-pagebottom\";\n\nconst STORIES = [\n  \"default\",\n  \"with-print\",\n  \"with-print-and-sticky-actions\"\n];\n\ntest.describe(\"pagebottom\", () => {\n  STORIES.forEach((storyId) => {\n    test(`story ${storyId} visual diff`, async ({ page }) => {\n      await visualDiff({\n        storyId,\n        page,\n        url: URL\n      });\n    });\n  });\n});\n"]}

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

@@ -1,28 +1,35 @@
 import { Host, h, } from "@stencil/core";
-import { hasSlot } from "../../utils/utils";
 /**
  * @slot logo - Slot for a logo image
  */
 export class StzhPagebottom {
   constructor() {
+    this.localization = undefined;
     this.shareTitle = "";
     this.shareUrl = undefined;
     this.shareServices = undefined;
-    this.shareDisabled = false;
+    this.shareDisabled = undefined;
     this.shareMailSubject = undefined;
     this.shareMailBody = undefined;
     this.logoHref = "https://www.stadt-zuerich.ch";
-    this.logoAnalyticsId = undefined;
+    this.withPrint = undefined;
+    this.printAnalyticsId = undefined;
+  }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "pagebottom");
+    }
   }
   render() {
-    const logoUsed = hasSlot(this.element, "logo");
+    // const printUsed: boolean = hasSlot(this.element, "print");
+    // const logoUsed: boolean = hasSlot(this.element, "logo");
     const classes = {
       "stzh-pagebottom": true
     };
-    return (h(Host, null, h("div", { class: classes }, !this.shareDisabled &&
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-pagebottom__wrapper" }, h("div", { class: "stzh-pagebottom__left" }, this.withPrint &&
+      h("div", { class: "stzh-pagebottom__print" }, h("stzh-print", null, h("stzh-button", { label: this.localization.printLabel, variant: "tertiary-plain", size: "small", noPaddingLeft: true, noPaddingRight: true, analyticsId: this.printAnalyticsId }))), !this.shareDisabled &&
       h("div", { class: "stzh-pagebottom__share-wrapper" }, this.shareTitle &&
-        h("div", { class: "stzh-pagebottom__share-title" }, this.shareTitle), h("stzh-share", { url: this.shareUrl, services: this.shareServices, mailSubject: this.shareMailSubject, mailBody: this.shareMailBody })), logoUsed &&
-      h("div", { class: "stzh-pagebottom__logo" }, h("a", { href: this.logoHref, class: "stzh-pagebottom__logo-link", "s-object-id": this.logoAnalyticsId || "Footer Logo" }, h("slot", { name: "logo" }))))));
+        h("div", { class: "stzh-pagebottom__share-title" }, this.shareTitle), h("stzh-share", { url: this.shareUrl, services: this.shareServices, mailSubject: this.shareMailSubject, mailBody: this.shareMailBody }))), h("div", { class: "stzh-pagebottom__sticky-actions" }, h("slot", { name: "sticky-actions" }))))));
   }
   static get is() { return "stzh-pagebottom"; }
   static get encapsulation() { return "scoped"; }
@@ -38,6 +45,27 @@ export class StzhPagebottom {
   }
   static get properties() {
     return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhPagebottomLocalizedText",
+          "resolved": "StzhLocaleComponent & { printLabel: string; }",
+          "references": {
+            "StzhPagebottomLocalizedText": {
+              "location": "import",
+              "path": "./stzh-pagebottom.localization",
+              "id": "src/components/stzh-pagebottom/stzh-pagebottom.localization.ts::StzhPagebottomLocalizedText"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings."
+        }
+      },
       "shareTitle": {
         "type": "string",
         "mutable": false,
@@ -111,8 +139,7 @@ export class StzhPagebottom {
           "text": "Whether to show share"
         },
         "attribute": "share-disabled",
-        "reflect": false,
-        "defaultValue": "false"
+        "reflect": true
       },
       "shareMailSubject": {
         "type": "string",
@@ -166,7 +193,24 @@ export class StzhPagebottom {
         "reflect": false,
         "defaultValue": "\"https://www.stadt-zuerich.ch\""
       },
-      "logoAnalyticsId": {
+      "withPrint": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to show print button"
+        },
+        "attribute": "with-print",
+        "reflect": true
+      },
+      "printAnalyticsId": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -178,9 +222,9 @@ export class StzhPagebottom {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "For Adobe Analytics.\nWill be rendered as value of `s-object-id` attribute to the logo link element.\nDefault value will be \"Footer Logo\""
+          "text": "For Adobe Analytics.\nWill be rendered as value of `s-object-id` attribute of the print button element."
         },
-        "attribute": "logo-analytics-id",
+        "attribute": "print-analytics-id",
         "reflect": false
       }
     };

package/dist/collection/components/stzh-pagebottom/stzh-pagebottom.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-pagebottom.js","sourceRoot":"","sources":["../../../../src/components/stzh-pagebottom/stzh-pagebottom.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,GACL,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C;;GAEG;AAMH,MAAM,OAAO,cAAc;;sBAEI,EAAE;;;yBAYE,KAAK;;;oBASX,8BAA8B;;;EAWzD,MAAM;IACJ,MAAM,QAAQ,GAAY,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAExD,MAAM,OAAO,GAAG;MACd,iBAAiB,EAAE,IAAI;KACxB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QAChB,CAAC,IAAI,CAAC,aAAa;UAClB,WAAK,KAAK,EAAC,gCAAgC;YACxC,IAAI,CAAC,UAAU;cACd,WAAK,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,UAAU,CAAO;YAEnE,kBACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,QAAQ,EAAE,IAAI,CAAC,aAAa,GAChB,CACV;QAGP,QAAQ;UACP,WAAK,KAAK,EAAC,uBAAuB;YAChC,SACE,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAC,4BAA4B,iBACrB,IAAI,CAAC,eAAe,IAAI,aAAa;cAElD,YAAM,IAAI,EAAC,MAAM,GAAQ,CACvB,CACA,CAEJ,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot logo - Slot for a logo image\n */\n@Component({\n  tag: \"stzh-pagebottom\",\n  styleUrl: \"stzh-pagebottom.scss\",\n  scoped: true\n})\nexport class StzhPagebottom {\n  /** Share Title */\n  @Prop() shareTitle: string = \"\";\n\n  /** URL of current site (uses full URL by default) */\n  @Prop() shareUrl: string;\n\n  /**\n   * Array of enabled share buttons.\n   * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n   */\n  @Prop() shareServices: ShareService[] | string;\n\n  /** Whether to show share */\n  @Prop() shareDisabled: boolean = false;\n\n  /** Overwrite share mail subject translation */\n  @Prop() shareMailSubject: string;\n\n  /** Overwrite share mail body translation */\n  @Prop() shareMailBody: string;\n\n  /** Logo href */\n  @Prop() logoHref: string = \"https://www.stadt-zuerich.ch\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the logo link element.\n   * Default value will be \"Footer Logo\"\n   */\n  @Prop() logoAnalyticsId: string;\n\n  @Element() element: HTMLStzhPagebottomElement;\n\n  render() {\n    const logoUsed: boolean = hasSlot(this.element, \"logo\");\n\n    const classes = {\n      \"stzh-pagebottom\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {!this.shareDisabled &&\n            <div class=\"stzh-pagebottom__share-wrapper\">\n              {this.shareTitle &&\n                <div class=\"stzh-pagebottom__share-title\">{this.shareTitle}</div>\n              }\n              <stzh-share\n                url={this.shareUrl}\n                services={this.shareServices}\n                mailSubject={this.shareMailSubject}\n                mailBody={this.shareMailBody}\n              ></stzh-share>\n            </div>\n          }\n\n          {logoUsed &&\n            <div class=\"stzh-pagebottom__logo\">\n              <a\n                href={this.logoHref}\n                class=\"stzh-pagebottom__logo-link\"\n                s-object-id={this.logoAnalyticsId || \"Footer Logo\"}\n              >\n                <slot name=\"logo\"></slot>\n              </a>\n            </div>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-pagebottom.js","sourceRoot":"","sources":["../../../../src/components/stzh-pagebottom/stzh-pagebottom.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB;;GAEG;AAMH,MAAM,OAAO,cAAc;;;sBAKI,EAAE;;;;;;oBAqBJ,8BAA8B;;;;EAoBzD,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;KACrG;EACH,CAAC;EAED,MAAM;IACJ,6DAA6D;IAC7D,2DAA2D;IAE3D,MAAM,OAAO,GAAG;MACd,iBAAiB,EAAE,IAAI;KACxB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,WAAK,KAAK,EAAC,0BAA0B;UACnC,WAAK,KAAK,EAAC,uBAAuB;YAC/B,IAAI,CAAC,SAAS;cACb,WAAK,KAAK,EAAC,wBAAwB;gBACjC;kBACE,mBACE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,UAAU,EACnC,OAAO,EAAC,gBAAgB,EACxB,IAAI,EAAC,OAAO,EACZ,aAAa,EAAE,IAAI,EACnB,cAAc,EAAE,IAAI,EACpB,WAAW,EAAE,IAAI,CAAC,gBAAgB,GACrB,CACJ,CACT;YAGP,CAAC,IAAI,CAAC,aAAa;cAClB,WAAK,KAAK,EAAC,gCAAgC;gBACxC,IAAI,CAAC,UAAU;kBACd,WAAK,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,UAAU,CAAO;gBAEnE,kBACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,QAAQ,EAAE,IAAI,CAAC,aAAa,GAChB,CACV,CAEJ;UAEN,WAAK,KAAK,EAAC,iCAAiC;YAC1C,YAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACF,CAaF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\n// import { hasSlot } from \"../../utils/utils\";\n\nimport { StzhPagebottomLocalizedText } from \"./stzh-pagebottom.localization\";\n\n/**\n * @slot logo - Slot for a logo image\n */\n@Component({\n  tag: \"stzh-pagebottom\",\n  styleUrl: \"stzh-pagebottom.scss\",\n  scoped: true\n})\nexport class StzhPagebottom {\n  /**  Translation strings. */\n  @Prop() localization: StzhPagebottomLocalizedText;\n\n  /** Share Title */\n  @Prop() shareTitle: string = \"\";\n\n  /** URL of current site (uses full URL by default) */\n  @Prop() shareUrl: string;\n\n  /**\n   * Array of enabled share buttons.\n   * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n   */\n  @Prop() shareServices: ShareService[] | string;\n\n  /** Whether to show share */\n  @Prop({ reflect: true }) shareDisabled: boolean;\n\n  /** Overwrite share mail subject translation */\n  @Prop() shareMailSubject: string;\n\n  /** Overwrite share mail body translation */\n  @Prop() shareMailBody: string;\n\n  /** Logo href */\n  @Prop() logoHref: string = \"https://www.stadt-zuerich.ch\";\n\n  /** Whether to show print button */\n  @Prop({ reflect: true }) withPrint: boolean;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute of the print button element.\n   */\n  @Prop() printAnalyticsId: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the logo link element.\n   * Default value will be \"Footer Logo\"\n   */\n  // @Prop() logoAnalyticsId: string;\n\n  @Element() element: HTMLStzhPagebottomElement;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pagebottom\");\n    }\n  }\n\n  render() {\n    // const printUsed: boolean = hasSlot(this.element, \"print\");\n    // const logoUsed: boolean = hasSlot(this.element, \"logo\");\n\n    const classes = {\n      \"stzh-pagebottom\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-pagebottom__wrapper\">\n            <div class=\"stzh-pagebottom__left\">\n              {this.withPrint &&\n                <div class=\"stzh-pagebottom__print\">\n                  <stzh-print>\n                    <stzh-button\n                      label={this.localization.printLabel}\n                      variant=\"tertiary-plain\"\n                      size=\"small\"\n                      noPaddingLeft={true}\n                      noPaddingRight={true}\n                      analyticsId={this.printAnalyticsId}\n                    ></stzh-button>\n                  </stzh-print>\n                </div>\n              }\n\n              {!this.shareDisabled &&\n                <div class=\"stzh-pagebottom__share-wrapper\">\n                  {this.shareTitle &&\n                    <div class=\"stzh-pagebottom__share-title\">{this.shareTitle}</div>\n                  }\n                  <stzh-share\n                    url={this.shareUrl}\n                    services={this.shareServices}\n                    mailSubject={this.shareMailSubject}\n                    mailBody={this.shareMailBody}\n                  ></stzh-share>\n                </div>\n              }\n            </div>\n\n            <div class=\"stzh-pagebottom__sticky-actions\">\n              <slot name=\"sticky-actions\"></slot>\n            </div>\n          </div>\n\n          {/* {logoUsed &&\n            <div class=\"stzh-pagebottom__logo\">\n              <a\n                href={this.logoHref}\n                class=\"stzh-pagebottom__logo-link\"\n                s-object-id={this.logoAnalyticsId || \"Footer Logo\"}\n              >\n                <slot name=\"logo\"></slot>\n              </a>\n            </div>\n          } */}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=stzh-pagebottom.localization.js.map

package/dist/collection/components/stzh-pagebottom/stzh-pagebottom.localization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-pagebottom.localization.js","sourceRoot":"","sources":["../../../../src/components/stzh-pagebottom/stzh-pagebottom.localization.ts"],"names":[],"mappings":"","sourcesContent":["import { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nexport type StzhPagebottomLocalizedText = StzhLocaleComponent & {\n  printLabel: string\n}\n"]}

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

@@ -7,15 +7,72 @@ import { getFigmaLink } from '../../../figma';
 const COMPONENT_NAME = 'stzh-pagebottom';
 const story = createComponentStory(COMPONENT_NAME);
 
+const SUBTEMPLATE_DUMMY_TEXT = `
+<div style="opacity: 0.2">
+  <stzh-pagetitle>
+    <stzh-heading slot="heading">Page heading</stzh-heading>
+  </stzh-pagetitle>
+
+  <stzh-vspace></stzh-vspace>
+
+  <stzh-text>
+    <p><b>Scroll down to see more</b></p>
+
+    <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+
+    <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+
+    <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+
+    <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
+
+    <p>Nostrud amet laboris exercitation voluptate fugiat proident culpa consequat commodo minim ut officia dolor ad. Ut ipsum officia ipsum officia aute ad ullamco minim adipisicing commodo consectetur ut est aliqua. Magna est incididunt nisi labore ipsum minim occaecat consectetur labore nulla. Enim reprehenderit culpa excepteur enim esse ad.</p>
+
+    <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+
+    <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+
+    <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+
+    <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+
+    <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+
+    <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+
+    <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
+  </stzh-text>
+
+  <stzh-vspace curve="large"></stzh-vspace>
+</div>
+`;
+
 const TEMPLATE = `
 <stzh-pagebottom></stzh-pagebottom>
 `;
 
-const TEMPLATE_WITH_LOGO = `
-<stzh-pagebottom>
-  <img slot="logo" src="media/logo/stzh-company.svg" loading="lazy" alt="A company of the city of Zurich, go to homepage" />
-</stzh-pagebottom>
-`;
+const TEMPLATE_WITH_STICKY_ACTIONS = ({ _hideText = true } = {}) => {
+  return `
+<div>
+  ${!_hideText ? SUBTEMPLATE_DUMMY_TEXT : ''}
+
+  <stzh-pagebottom>
+    <stzh-sticky-actions slot="sticky-actions">
+      <stzh-button slot="chat" variant="secondary" label="Chat" size="small" icon="text-message"></stzh-button>
+      <stzh-scrollup slot="scrollup">
+        <stzh-button variant="secondary" icon="arrow-up" size="small" icon-only></stzh-button>
+      </stzh-scrollup>
+    </stzh-sticky-actions>
+  </stzh-pagebottom>
+</div>
+`
+};
+
+// const TEMPLATE_WITH_LOGO = `
+// <stzh-pagebottom>
+//   <img slot="logo" src="media/logo/stzh-company.svg" loading="lazy" alt="A company of the city of Zurich, go to homepage" />
+// </stzh-pagebottom>
+// `;
 
 export default {
   title: 'Components/Pagebottom',
@@ -44,7 +101,28 @@ export const Default = {
   args: {}
 }
 
-export const WithLogo = {
-  render: (args) => story(args, TEMPLATE_WITH_LOGO),
-  args: {}
-};
+export const WithPrint = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    'with-print': true
+  }
+}
+
+export const WithPrintAndStickyActions = {
+  render: (args) => story(args, TEMPLATE_WITH_STICKY_ACTIONS()),
+  args: {
+    'with-print': true
+  }
+}
+
+export const WithPrintAndStickyActionsScrollDemo = {
+  render: (args) => story(args, TEMPLATE_WITH_STICKY_ACTIONS({ _hideText: false })),
+  args: {
+    'with-print': true
+  }
+}
+
+// export const WithLogo = {
+//   render: (args) => story(args, TEMPLATE_WITH_LOGO),
+//   args: {}
+// };

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

@@ -8,43 +8,45 @@ const COMPONENT_NAME = 'stzh-scrollup';
 const story = createComponentStory(COMPONENT_NAME);
 
 const SUBTEMPLATE_DUMMY_TEXT = `
-<stzh-text style="opacity: 0.2">
-  <p><b>Scroll down to see scroll up link</b></p>
+<div style="opacity: 0.2">
+  <stzh-text>
+    <p><b>Scroll down to see scroll up link</b></p>
 
-  <stzh-heading id="mainPageHeading">Example main page heading</stzh-heading>
+    <stzh-heading id="mainPageHeading">Example main page heading</stzh-heading>
 
-  <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+    <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
 
-  <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+    <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
 
-  <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+    <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
 
-  <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
+    <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
 
-  <p>Nostrud amet laboris exercitation voluptate fugiat proident culpa consequat commodo minim ut officia dolor ad. Ut ipsum officia ipsum officia aute ad ullamco minim adipisicing commodo consectetur ut est aliqua. Magna est incididunt nisi labore ipsum minim occaecat consectetur labore nulla. Enim reprehenderit culpa excepteur enim esse ad.</p>
+    <p>Nostrud amet laboris exercitation voluptate fugiat proident culpa consequat commodo minim ut officia dolor ad. Ut ipsum officia ipsum officia aute ad ullamco minim adipisicing commodo consectetur ut est aliqua. Magna est incididunt nisi labore ipsum minim occaecat consectetur labore nulla. Enim reprehenderit culpa excepteur enim esse ad.</p>
 
-  <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+    <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
 
-  <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+    <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
 
-  <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+    <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
 
-  <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+    <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
 
-  <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+    <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
 
-  <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+    <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
 
-  <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
-</stzh-text>
+    <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
+  </stzh-text>
+
+  <stzh-vspace></stzh-vspace>
+</div>
 `;
 
 const TEMPLATE = `
 <div>
   ${SUBTEMPLATE_DUMMY_TEXT}
 
-  <stzh-vspace></stzh-vspace>
-
   <stzh-scrollup>
     <stzh-link>
       Scroll up

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

@@ -152,47 +152,5 @@
   display: flex;
 }
 .stzh-share__item:not(:last-child) {
-  margin-right: var(--stzh-space-small);
-}
-.stzh-share__icon {
-  --size: var(--stzh-icon-size-xsmall);
-}
-.stzh-share__button {
-  color: var(--stzh-color-white);
-  border-radius: var(--stzh-button-border-radius);
-  display: grid;
-  place-items: center;
-  width: 2.875rem;
-  height: 1.625rem;
-  transition: background-color var(--stzh-base-transition-animation-speed);
-}
-.stzh-share__button.is-facebook {
-  background-color: #3b5998;
-}
-.stzh-share__button.is-facebook:hover {
-  background-color: #23355B;
-}
-.stzh-share__button.is-twitter {
-  background-color: #000000;
-}
-.stzh-share__button.is-twitter:hover {
-  background-color: #404040;
-}
-.stzh-share__button.is-linkedin {
-  background-color: #1485BD;
-}
-.stzh-share__button.is-linkedin:hover {
-  background-color: #0C4F71;
-}
-.stzh-share__button.is-xing {
-  background-color: #0E7574;
-}
-.stzh-share__button.is-xing:hover {
-  background-color: #084645;
-}
-.stzh-share__button.is-mail {
-  background-color: var(--stzh-color-primary);
-}
-.stzh-share__button.is-mail:hover {
-  background-color: var(--stzh-color-primary-hover);
+  margin-right: var(--stzh-space-xxsmall);
 }

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

@@ -17,7 +17,7 @@ export class StzhShare {
     this.mailSubject = undefined;
     this.mailBody = undefined;
     this.services = [
-      "facebook", "twitter", "linkedin", "xing", "mail"
+      "mail", "facebook", "twitter", "linkedin", "xing"
     ];
   }
   servicesWatcher(newValue) {
@@ -46,6 +46,13 @@ export class StzhShare {
     const twitterTitle = encodeURIComponent(abbreviateText(title, MAX_TWEET_LENGTH));
     const description = encodeURIComponent(getMeta("description"));
     const serviceData = {
+      "mail": {
+        popup: false,
+        blank: false,
+        url: `mailto:?subject=${mailSubject}&body=${mailBody}`,
+        text: this.localization.shareMail,
+        icon: "mail"
+      },
       "facebook": {
         popup: true,
         blank: true,
@@ -73,16 +80,9 @@ export class StzhShare {
         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, "s-object-id": serviceData[service].text }, h("stzh-icon", { class: "stzh-share__icon", name: serviceData[service].icon })))))))));
+    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, size: "small" }, h("stzh-button", { class: `stzh-share__button is-${service}`, size: "small", variant: "tertiary", iconOnly: true, href: serviceData[service].url, 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, analyticsId: serviceData[service].text, icon: serviceData[service].icon }))))))));
   }
   static get is() { return "stzh-share"; }
   static get encapsulation() { return "scoped"; }
@@ -193,7 +193,7 @@ export class StzhShare {
         },
         "attribute": "services",
         "reflect": false,
-        "defaultValue": "[\n    \"facebook\", \"twitter\", \"linkedin\", \"xing\", \"mail\"\n  ]"
+        "defaultValue": "[\n    \"mail\", \"facebook\", \"twitter\", \"linkedin\", \"xing\"\n  ]"
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-share.js","sourceRoot":"","sources":["../../../../src/components/stzh-share/stzh-share.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch\n} from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\nimport { StzhShareLocalizedText } from \"./stzh-share.localization\"\nimport { getMeta } from '../../utils/utils';\nimport { abbreviateText } from '../../utils/string-utils';\n\n// 280 - URL (always 24) = 256\nconst MAX_TWEET_LENGTH = 256;\n\n/**\n */\n@Component({\n  tag: \"stzh-share\",\n  styleUrl: \"stzh-share.scss\",\n  scoped: true\n})\nexport class StzhShare {\n  /** Translation strings */\n  @Prop() localization: StzhShareLocalizedText;\n\n  /** URL of current site (uses full URL by default) */\n  @Prop() url: string = window.location.href;\n\n  /** Overwrite mail subject translation */\n  @Prop() mailSubject: string;\n\n  /** Overwrite mail body translation */\n  @Prop() mailBody: string;\n\n  /**\n   * Array of enabled share buttons.\n   * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n   */\n  @Prop() services: ShareService[] | string = [\n    \"facebook\", \"twitter\", \"linkedin\", \"xing\", \"mail\"\n  ];\n\n  private _services: ShareService[] = [];\n\n  @Watch(\"services\")\n  servicesWatcher(newValue: ShareService[] | string) {\n    if (typeof newValue === \"string\") {\n      this._services = JSON.parse(newValue);\n    } else {\n      this._services = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShareElement;\n\n  private openPopup = (url, event) => {\n    event.preventDefault();\n    window.open(url, \"_blank\", \"width=600,height=460\");\n  }\n\n  async componentWillLoad() {\n    this.servicesWatcher(this.services);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"share\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-share\": true\n    };\n\n    const shareUrl = encodeURIComponent(this.url);\n    const mailSubject = encodeURIComponent(this.mailSubject || this.localization.mailSubject);\n    const mailBody = encodeURIComponent(\n      (this.mailBody || this.localization.mailBody)?.replace(/\\{shareUrl\\}/gi, this.url)\n    );\n\n    const title = encodeURIComponent(document.title);\n    const twitterTitle = encodeURIComponent(abbreviateText(title, MAX_TWEET_LENGTH));\n    const description = encodeURIComponent(getMeta(\"description\"));\n\n    const serviceData = {\n      \"facebook\": {\n        popup: true,\n        blank: true,\n        url: `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`,\n        text: this.localization.shareFacebook,\n        icon: \"facebook\"\n      },\n      \"twitter\": {\n        popup: true,\n        blank: true,\n        url: `https://twitter.com/intent/tweet?text=${twitterTitle}&url=${shareUrl}`,\n        text: this.localization.shareTwitter,\n        icon: \"twitter\"\n      },\n      \"linkedin\": {\n        popup: true,\n        blank: true,\n        url: `https://www.linkedin.com/shareArticle?mini=true&summary=${description}&title=${title}&url=${shareUrl}`,\n        text: this.localization.shareLinkedin,\n        icon: \"linkedin\"\n      },\n      \"xing\": {\n        popup: true,\n        blank: true,\n        url: `https://www.xing.com/spi/shares/new?url=${shareUrl}`,\n        text: this.localization.shareXing,\n        icon: \"xing\"\n      },\n      \"mail\": {\n        popup: false,\n        blank: false,\n        url: `mailto:?subject=${mailSubject}&body=${mailBody}`,\n        text: this.localization.shareMail,\n        icon: \"mail\"\n      }\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <ul class=\"stzh-share__list\">\n            {this._services.map((service) =>\n              <li class=\"stzh-share__item\">\n                <stzh-tooltip content={serviceData[service].text}>\n                  <a\n                    class={`stzh-share__button is-${service}`}\n                    href={serviceData[service].url}\n                    aria-label={serviceData[service].text}\n                    rel={serviceData[service].blank ? \"nofollow noopener noreferrer\" : \"nofollow\"}\n                    target={serviceData[service].blank ? \"_blank\" : \"_self\"}\n                    onClick={serviceData[service].popup ? (e) => this.openPopup(serviceData[service].url, e) : null}\n                    s-object-id={serviceData[service].text}\n                  >\n                    <stzh-icon class=\"stzh-share__icon\" name={serviceData[service].icon}></stzh-icon>\n                  </a>\n                </stzh-tooltip>\n              </li>\n            )}\n          </ul>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-share.js","sourceRoot":"","sources":["../../../../src/components/stzh-share/stzh-share.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,EACJ,KAAK,EACN,MAAM,eAAe,CAAC;AAIvB,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,8BAA8B;AAC9B,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAE7B;GACG;AAMH,MAAM,OAAO,SAAS;;IAqBZ,cAAS,GAAmB,EAAE,CAAC;IAa/B,cAAS,GAAG,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;MACjC,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,sBAAsB,CAAC,CAAC;IACrD,CAAC,CAAA;;eAhCqB,MAAM,CAAC,QAAQ,CAAC,IAAI;;;oBAYE;MAC1C,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM;KAClD;;EAKD,eAAe,CAAC,QAAiC;IAC/C,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACvC;SAAM;MACL,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;KAC3B;EACH,CAAC;EASD,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAEpC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;KAChG;EACH,CAAC;EAED,MAAM;;IACJ,MAAM,OAAO,GAAG;MACd,YAAY,EAAE,IAAI;KACnB,CAAC;IAEF,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9C,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC1F,MAAM,QAAQ,GAAG,kBAAkB,CACjC,MAAA,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,0CAAE,OAAO,CAAC,gBAAgB,EAAE,IAAI,CAAC,GAAG,CAAC,CACnF,CAAC;IAEF,MAAM,KAAK,GAAG,kBAAkB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACjD,MAAM,YAAY,GAAG,kBAAkB,CAAC,cAAc,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC;IACjF,MAAM,WAAW,GAAG,kBAAkB,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;IAE/D,MAAM,WAAW,GAAG;MAClB,MAAM,EAAE;QACN,KAAK,EAAE,KAAK;QACZ,KAAK,EAAE,KAAK;QACZ,GAAG,EAAE,mBAAmB,WAAW,SAAS,QAAQ,EAAE;QACtD,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,SAAS;QACjC,IAAI,EAAE,MAAM;OACb;MACD,UAAU,EAAE;QACV,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;QACX,GAAG,EAAE,gDAAgD,QAAQ,EAAE;QAC/D,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,aAAa;QACrC,IAAI,EAAE,UAAU;OACjB;MACD,SAAS,EAAE;QACT,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;QACX,GAAG,EAAE,yCAAyC,YAAY,QAAQ,QAAQ,EAAE;QAC5E,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,YAAY;QACpC,IAAI,EAAE,SAAS;OAChB;MACD,UAAU,EAAE;QACV,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;QACX,GAAG,EAAE,2DAA2D,WAAW,UAAU,KAAK,QAAQ,QAAQ,EAAE;QAC5G,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,aAAa;QACrC,IAAI,EAAE,UAAU;OACjB;MACD,MAAM,EAAE;QACN,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;QACX,GAAG,EAAE,2CAA2C,QAAQ,EAAE;QAC1D,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,SAAS;QACjC,IAAI,EAAE,MAAM;OACb;KACF,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,UAAI,KAAK,EAAC,kBAAkB,IACzB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAC9B,UAAI,KAAK,EAAC,kBAAkB;UAC1B,oBACE,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,IAAI,EAClC,IAAI,EAAC,OAAO;YAEZ,mBACE,KAAK,EAAE,yBAAyB,OAAO,EAAE,EACzC,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,EAClB,QAAQ,EAAE,IAAI,EACd,IAAI,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,GAAG,EAC9B,GAAG,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,UAAU,EAC7E,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EACvD,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAC/F,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,IAAI,EACtC,IAAI,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,IAAI,GAClB,CACF,CACZ,CACN,CACE,CACD,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch\n} from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\nimport { StzhShareLocalizedText } from \"./stzh-share.localization\"\nimport { getMeta } from '../../utils/utils';\nimport { abbreviateText } from '../../utils/string-utils';\n\n// 280 - URL (always 24) = 256\nconst MAX_TWEET_LENGTH = 256;\n\n/**\n */\n@Component({\n  tag: \"stzh-share\",\n  styleUrl: \"stzh-share.scss\",\n  scoped: true\n})\nexport class StzhShare {\n  /** Translation strings */\n  @Prop() localization: StzhShareLocalizedText;\n\n  /** URL of current site (uses full URL by default) */\n  @Prop() url: string = window.location.href;\n\n  /** Overwrite mail subject translation */\n  @Prop() mailSubject: string;\n\n  /** Overwrite mail body translation */\n  @Prop() mailBody: string;\n\n  /**\n   * Array of enabled share buttons.\n   * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n   */\n  @Prop() services: ShareService[] | string = [\n    \"mail\", \"facebook\", \"twitter\", \"linkedin\", \"xing\"\n  ];\n\n  private _services: ShareService[] = [];\n\n  @Watch(\"services\")\n  servicesWatcher(newValue: ShareService[] | string) {\n    if (typeof newValue === \"string\") {\n      this._services = JSON.parse(newValue);\n    } else {\n      this._services = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShareElement;\n\n  private openPopup = (url, event) => {\n    event.preventDefault();\n    window.open(url, \"_blank\", \"width=600,height=460\");\n  }\n\n  async componentWillLoad() {\n    this.servicesWatcher(this.services);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"share\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-share\": true\n    };\n\n    const shareUrl = encodeURIComponent(this.url);\n    const mailSubject = encodeURIComponent(this.mailSubject || this.localization.mailSubject);\n    const mailBody = encodeURIComponent(\n      (this.mailBody || this.localization.mailBody)?.replace(/\\{shareUrl\\}/gi, this.url)\n    );\n\n    const title = encodeURIComponent(document.title);\n    const twitterTitle = encodeURIComponent(abbreviateText(title, MAX_TWEET_LENGTH));\n    const description = encodeURIComponent(getMeta(\"description\"));\n\n    const serviceData = {\n      \"mail\": {\n        popup: false,\n        blank: false,\n        url: `mailto:?subject=${mailSubject}&body=${mailBody}`,\n        text: this.localization.shareMail,\n        icon: \"mail\"\n      },\n      \"facebook\": {\n        popup: true,\n        blank: true,\n        url: `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`,\n        text: this.localization.shareFacebook,\n        icon: \"facebook\"\n      },\n      \"twitter\": {\n        popup: true,\n        blank: true,\n        url: `https://twitter.com/intent/tweet?text=${twitterTitle}&url=${shareUrl}`,\n        text: this.localization.shareTwitter,\n        icon: \"twitter\"\n      },\n      \"linkedin\": {\n        popup: true,\n        blank: true,\n        url: `https://www.linkedin.com/shareArticle?mini=true&summary=${description}&title=${title}&url=${shareUrl}`,\n        text: this.localization.shareLinkedin,\n        icon: \"linkedin\"\n      },\n      \"xing\": {\n        popup: true,\n        blank: true,\n        url: `https://www.xing.com/spi/shares/new?url=${shareUrl}`,\n        text: this.localization.shareXing,\n        icon: \"xing\"\n      }\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <ul class=\"stzh-share__list\">\n            {this._services.map((service) =>\n              <li class=\"stzh-share__item\">\n                <stzh-tooltip\n                  content={serviceData[service].text}\n                  size=\"small\"\n                >\n                  <stzh-button\n                    class={`stzh-share__button is-${service}`}\n                    size=\"small\"\n                    variant=\"tertiary\"\n                    iconOnly={true}\n                    href={serviceData[service].url}\n                    rel={serviceData[service].blank ? \"nofollow noopener noreferrer\" : \"nofollow\"}\n                    target={serviceData[service].blank ? \"_blank\" : \"_self\"}\n                    onClick={serviceData[service].popup ? (e) => this.openPopup(serviceData[service].url, e) : null}\n                    analyticsId={serviceData[service].text}\n                    icon={serviceData[service].icon}\n                  ></stzh-button>\n                </stzh-tooltip>\n              </li>\n            )}\n          </ul>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.css

@@ -115,6 +115,14 @@
  */
 /* Global css (mainly used to provide sensible defaults and helper classes) */
 
+html,
+body {
+  overflow-x: hidden;
+  overflow-x: clip;
+  width: 100vw;
+  max-width: 100vw;
+}
+
 html {
   /* Enable font smoothing */
   -webkit-font-smoothing: antialiased;
@@ -1141,6 +1149,8 @@ the .has-focus class is used by the focus target */
   --stzh-tooltip-border-radius: 0px;
   --stzh-tooltip-drop-shadow: none; /* before: drop-shadow(0px 2px 10px rgba(0 0 0 / 0.16)) */
 
+  --stzh-tooltip-small-padding: 0 var(--stzh-space-xxsmall);
+
   /* Header */
   --stzh-header-logobar-background-color: var(--stzh-color-primary70);