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

package/dist/vscode-data.json

@@ -2066,7 +2066,7 @@
         },
         {
           "name": "sticky-disabled",
-          "description": "Whether sticky button is disabled.\nWill be set to true automatically on `appload` event,\nwhen more than one cta is on the page."
+          "description": "Whether sticky button is disabled.\nWill be set to true automatically on,\nwhen more than one cta is on the page."
         }
       ]
     },
@@ -3104,6 +3104,10 @@
           "name": "carousel-with-track",
           "description": "Whether indicator should be shown"
         },
+        {
+          "name": "exclude-first-image",
+          "description": "Exclude first image in lightbox images (but still use as preview image).\nOnly used when `variant=single` is used."
+        },
         {
           "name": "images",
           "description": "Images in gallery.\nArray of objects that must at least include `width`, `height` and `src` attribute:\n`[{\"width\": 2522, \"height\": 1075, \"src\": \"media/images/example.jpg\"}, {\"width\": 2050, \"height\": 1367, \"src\": \"media/images/example2.jpg\"}]`\n\nPossible other optional properties are:\n`alt`: Alternative image description\n/ `srcLightbox`: `src` for img tag inside lightbox (overwrites `src`)\n/ `srcsetLightbox`: `srcset` for img tag inside lightbox\n/ `copyright`: Copyright inside caption\n/ `heading`: Heading inside caption\n/ `headingLightbox`: Alternative heading for lightbox (overwrites `heading`)\n/ `caption`: Caption\n/ `captionLightbox`: Caption for lightbox (overwrites `caption`)\n/ `lightboxHtml`: Alternative html content for lightbox caption\n/ `hideCounter`: Whether to hide counter"
@@ -4931,14 +4935,14 @@
         "value": "The STZH pagebottom component."
       },
       "attributes": [
-        {
-          "name": "logo-analytics-id",
-          "description": "For Adobe Analytics.\nWill be rendered as value of `s-object-id` attribute to the logo link element.\nDefault value will be \"Footer Logo\""
-        },
         {
           "name": "logo-href",
           "description": "Logo href"
         },
+        {
+          "name": "print-analytics-id",
+          "description": "For Adobe Analytics.\nWill be rendered as value of `s-object-id` attribute of the print button element."
+        },
         {
           "name": "share-disabled",
           "description": "Whether to show share"
@@ -4962,6 +4966,10 @@
         {
           "name": "share-url",
           "description": "URL of current site (uses full URL by default)"
+        },
+        {
+          "name": "with-print",
+          "description": "Whether to show print button"
         }
       ]
     },
@@ -7449,6 +7457,18 @@
             }
           ]
         },
+        {
+          "name": "size",
+          "description": "Shifting of tooltip content",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
         {
           "name": "skidding",
           "description": "Shifting of tooltip content"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oiz/stzh-components",
-  "version": "3.0.0-beta1",
+  "version": "3.0.0-beta2",
   "description": "STZH Web Components Library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

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

@@ -1,52 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-92254d32.js');
-const utils = require('./utils-d0fff87f.js');
-require('./string-utils-5dd70320.js');
-
-const stzhPrintCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{display:contents}@media print{:host{display:none}}.stzh-print{display:contents}";
-
-const StzhPrint = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.handleLinkClick = () => {
-      window.print();
-    };
-    this.init = () => {
-      const links = this.element.querySelectorAll("stzh-link, stzh-button");
-      links.forEach((link) => {
-        link.addEventListener('click', this.handleLinkClick);
-        utils.setPropsIfNull(link, {
-          icon: "print"
-        });
-      });
-    };
-  }
-  connectedCallback() {
-    this.init();
-    this.observer = new MutationObserver(this.init);
-    this.observer.observe(this.element, {
-      childList: true,
-      subtree: true
-    });
-  }
-  disconnectedCallback() {
-    if (this.observer) {
-      this.observer.disconnect();
-    }
-  }
-  render() {
-    const classes = {
-      "stzh-print": true
-    };
-    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("slot", null))));
-  }
-  get element() { return index.getElement(this); }
-};
-StzhPrint.style = stzhPrintCss;
-
-exports.stzh_print = StzhPrint;
-
-//# sourceMappingURL=stzh-print.cjs.entry.js.map

package/dist/cjs/stzh-print.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"stzh-print.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,YAAY,GAAG,w2BAAw2B;;MCiBh3B,SAAS;EALtB;;IAUU,oBAAe,GAAG;MACxB,MAAM,CAAC,KAAK,EAAE,CAAC;KAChB,CAAA;IAEO,SAAI,GAAG;MACb,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC;MAEtE,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;QACjB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAErDA,oBAAc,CAAC,IAAI,EAAE;UACnB,IAAI,EAAE,OAAO;SACiC,CAAC,CAAA;OAClD,CAAC,CAAC;KACJ,CAAA;GA+BF;EA7BC,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,YAAY,EAAE,IAAI;KACnB,CAAC;IAEF,QACEC,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,OAAO,IACjBA,qBAAa,CACT,CACD,EACP;GACH;;;;;;;","names":["setPropsIfNull","h","Host"],"sources":["src/components/stzh-print/stzh-print.scss?tag=stzh-print&encapsulation=shadow","src/components/stzh-print/stzh-print.tsx"],"sourcesContent":[":host {\n  display: contents;\n\n  @media print {\n    display: none;\n  }\n}\n\n.stzh-print {\n  display: contents;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for label\n */\n@Component({\n  tag: \"stzh-print\",\n  styleUrl: \"stzh-print.scss\",\n  shadow: true\n})\nexport class StzhPrint {\n  @Element() element: HTMLStzhPrintElement;\n\n  private observer: MutationObserver;\n\n  private handleLinkClick = () => {\n    window.print();\n  }\n\n  private init = () => {\n    const links = this.element.querySelectorAll(\"stzh-link, stzh-button\");\n\n    links.forEach((link) => {\n      link.addEventListener('click', this.handleLinkClick);\n\n      setPropsIfNull(link, {\n        icon: \"print\"\n      } as HTMLStzhLinkElement | HTMLStzhButtonElement)\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-print\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"stzh-share.entry.cjs.js","mappings":"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","names":["abbreviateText","getMeta","h","Host"],"sources":["src/components/stzh-share/stzh-share.scss?tag=stzh-share&encapsulation=scoped","src/components/stzh-share/stzh-share.tsx"],"sourcesContent":[":host {\n}\n\n$shareColorFacebook: #3b5998;\n$shareColorFacebookHover: #23355B;\n$shareColorTwitter: #000000;\n$shareColorTwitterHover: #404040;\n$shareColorLinkedin: #1485BD;\n$shareColorLinkedinHover: #0C4F71;\n$shareColorXing: #0E7574;\n$shareColorXingHover: #084645;\n\n.stzh-share {\n  &__list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n  }\n\n  &__item {\n    &:not(:last-child) {\n      margin-right: space('small');\n    }\n  }\n\n  &__icon {\n    --size: #{iconSize('xsmall')};\n  }\n\n  &__button {\n    color: $colorWhite;\n    border-radius: $buttonBorderRadius;\n    display: grid;\n    place-items: center;\n    width: 46px;\n    height: 26px;\n    transition: background-color $baseTransitionAnimationSpeed;\n\n    &.is-facebook {\n      background-color: $shareColorFacebook;\n\n      &:hover {\n        background-color: $shareColorFacebookHover;\n      }\n    }\n\n    &.is-twitter {\n      background-color: $shareColorTwitter;\n\n      &:hover {\n        background-color: $shareColorTwitterHover;\n      }\n    }\n\n    &.is-linkedin {\n      background-color: $shareColorLinkedin;\n\n      &:hover {\n        background-color: $shareColorLinkedinHover;\n      }\n    }\n\n    &.is-xing {\n      background-color: $shareColorXing;\n\n      &:hover {\n        background-color: $shareColorXingHover;\n      }\n    }\n\n    &.is-mail {\n      background-color: $colorPrimary;\n\n      &:hover {\n        background-color: $colorPrimaryHover;\n      }\n    }\n  }\n}\n","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}

package/dist/collection/patterns/print/print.e2e.js

@@ -1,18 +0,0 @@
-import { test } from "@playwright/test";
-import { visualDiff } from "../../../.build/test/utils";
-const URL = "patterns-print";
-const STORIES = [
-  "default",
-];
-test.describe("pattern: print", () => {
-  STORIES.forEach((storyId) => {
-    test(`story ${storyId} visual diff`, async ({ page }) => {
-      await visualDiff({
-        storyId,
-        page,
-        url: URL
-      });
-    });
-  });
-});
-//# sourceMappingURL=print.e2e.js.map

package/dist/collection/patterns/print/print.e2e.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"print.e2e.js","sourceRoot":"","sources":["../../../../src/patterns/print/print.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,gBAAgB,CAAC;AAE7B,MAAM,OAAO,GAAG;EACd,SAAS;CACV,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EACnC,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 = \"patterns-print\";\n\nconst STORIES = [\n  \"default\",\n];\n\ntest.describe(\"pattern: print\", () => {\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/esm/stzh-print.entry.js.map

@@ -1 +0,0 @@
-{"file":"stzh-print.entry.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,w2BAAw2B;;MCiBh3B,SAAS;EALtB;;IAUU,oBAAe,GAAG;MACxB,MAAM,CAAC,KAAK,EAAE,CAAC;KAChB,CAAA;IAEO,SAAI,GAAG;MACb,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC;MAEtE,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;QACjB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAErD,cAAc,CAAC,IAAI,EAAE;UACnB,IAAI,EAAE,OAAO;SACiC,CAAC,CAAA;OAClD,CAAC,CAAC;KACJ,CAAA;GA+BF;EA7BC,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,YAAY,EAAE,IAAI;KACnB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-print/stzh-print.scss?tag=stzh-print&encapsulation=shadow","src/components/stzh-print/stzh-print.tsx"],"sourcesContent":[":host {\n  display: contents;\n\n  @media print {\n    display: none;\n  }\n}\n\n.stzh-print {\n  display: contents;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for label\n */\n@Component({\n  tag: \"stzh-print\",\n  styleUrl: \"stzh-print.scss\",\n  shadow: true\n})\nexport class StzhPrint {\n  @Element() element: HTMLStzhPrintElement;\n\n  private observer: MutationObserver;\n\n  private handleLinkClick = () => {\n    window.print();\n  }\n\n  private init = () => {\n    const links = this.element.querySelectorAll(\"stzh-link, stzh-button\");\n\n    links.forEach((link) => {\n      link.addEventListener('click', this.handleLinkClick);\n\n      setPropsIfNull(link, {\n        icon: \"print\"\n      } as HTMLStzhLinkElement | HTMLStzhButtonElement)\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-print\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-share.entry.js.map

@@ -1 +0,0 @@
-{"file":"stzh-share.entry.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,0pEAA0pE;;ACc/qE;AACA,MAAM,gBAAgB,GAAG,GAAG,CAAC;MAShB,SAAS;;;IAqBZ,cAAS,GAAmB,EAAE,CAAC;IAa/B,cAAS,GAAG,CAAC,GAAG,EAAE,KAAK;MAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,sBAAsB,CAAC,CAAC;KACpD,CAAA;;eAhCqB,MAAM,CAAC,QAAQ,CAAC,IAAI;;;oBAYE;MAC1C,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,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;GACF;EASD,MAAM,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;GACF;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,OAAC,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,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;MACD,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;KACF,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,UAAI,KAAK,EAAC,kBAAkB,IACzB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,OAAO,KAC1B,UAAI,KAAK,EAAC,kBAAkB,IAC1B,oBAAc,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,IAAI,IAC9C,SACE,KAAK,EAAE,yBAAyB,OAAO,EAAE,EACzC,IAAI,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,GAAG,gBAClB,WAAW,CAAC,OAAO,CAAC,CAAC,IAAI,EACrC,GAAG,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,KAAK,GAAG,8BAA8B,GAAG,UAAU,EAC7E,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,KAAK,GAAG,QAAQ,GAAG,OAAO,EACvD,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,IAAI,iBAClF,WAAW,CAAC,OAAO,CAAC,CAAC,IAAI,IAEtC,iBAAW,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,IAAI,GAAc,CAC/E,CACS,CACZ,CACN,CACE,CACD,CACD,EACP;GACH;;;;;;;;;;","names":[],"sources":["src/components/stzh-share/stzh-share.scss?tag=stzh-share&encapsulation=scoped","src/components/stzh-share/stzh-share.tsx"],"sourcesContent":[":host {\n}\n\n$shareColorFacebook: #3b5998;\n$shareColorFacebookHover: #23355B;\n$shareColorTwitter: #000000;\n$shareColorTwitterHover: #404040;\n$shareColorLinkedin: #1485BD;\n$shareColorLinkedinHover: #0C4F71;\n$shareColorXing: #0E7574;\n$shareColorXingHover: #084645;\n\n.stzh-share {\n  &__list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n  }\n\n  &__item {\n    &:not(:last-child) {\n      margin-right: space('small');\n    }\n  }\n\n  &__icon {\n    --size: #{iconSize('xsmall')};\n  }\n\n  &__button {\n    color: $colorWhite;\n    border-radius: $buttonBorderRadius;\n    display: grid;\n    place-items: center;\n    width: 46px;\n    height: 26px;\n    transition: background-color $baseTransitionAnimationSpeed;\n\n    &.is-facebook {\n      background-color: $shareColorFacebook;\n\n      &:hover {\n        background-color: $shareColorFacebookHover;\n      }\n    }\n\n    &.is-twitter {\n      background-color: $shareColorTwitter;\n\n      &:hover {\n        background-color: $shareColorTwitterHover;\n      }\n    }\n\n    &.is-linkedin {\n      background-color: $shareColorLinkedin;\n\n      &:hover {\n        background-color: $shareColorLinkedinHover;\n      }\n    }\n\n    &.is-xing {\n      background-color: $shareColorXing;\n\n      &:hover {\n        background-color: $shareColorXingHover;\n      }\n    }\n\n    &.is-mail {\n      background-color: $colorPrimary;\n\n      &:hover {\n        background-color: $colorPrimaryHover;\n      }\n    }\n  }\n}\n","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}

package/dist/stzh-components/p-2676b9db.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as s,a as o,c as e,F as i,g as n}from"./p-c7bfac7a.js";import{h as r}from"./p-7e304ea3.js";import"./p-9b063923.js";const h=".sc-stzh-badge-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-badge-h{display:none}.sc-stzh-badge-h *.sc-stzh-badge,.sc-stzh-badge-h *.sc-stzh-badge::before,.sc-stzh-badge-h *.sc-stzh-badge::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-badge-h .has-focus.sc-stzh-badge{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-badge-h .stzh-fylingfocus-focused.sc-stzh-badge{outline-style:none !important}.sc-stzh-badge-h .stzh-fylingfocus-focused.sc-stzh-badge::-moz-focus-inner{border:0 !important}.sc-stzh-badge-h{--color:var(--stzh-color-white);--background-color:var(--stzh-color-grey90);display:inline-flex}[type=success].sc-stzh-badge-h{--background-color:var(--stzh-color-success70)}[type=warning].sc-stzh-badge-h{--color:var(--stzh-color-black);--background-color:var(--stzh-color-warning60)}[type=error].sc-stzh-badge-h{--background-color:var(--stzh-color-error50)}[type=info].sc-stzh-badge-h{--background-color:var(--stzh-color-primary70)}.stzh-badge.sc-stzh-badge{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);box-sizing:content-box;display:inline-flex;justify-content:center;align-items:center;min-width:0.625rem;font-size:0.625rem;line-height:1.4;border-radius:0.875rem;padding:0.0625rem 0.375rem;background-color:var(--background-color);color:var(--color);text-transform:uppercase}.stzh-badge.sc-stzh-badge:empty{width:0.625rem;height:0.625rem;padding:0}";const a=class{constructor(s){t(this,s);this.label="";this.type="default"}render(){const t={"stzh-badge":true,[`stzh-badge--type-${this.type}`]:!!this.type};return s(o,null,s("div",{class:t},this.label))}};a.style=h;const c='@charset "UTF-8";.sc-stzh-button-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-button-h{display:none}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-button-h .has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button{outline-style:none !important}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button::-moz-focus-inner{border:0 !important}.sc-stzh-button-h{--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem;--color:var(--stzh-button-color, var(--stzh-color-white));--background-color:var(--stzh-button-background-color, var(--stzh-color-primary70));--border-width:0px;--border-color:transparent;--border-radius:0px;--icon-text-margin:var(--stzh-space-xsmall);--icon-toggle-color:currentColor;--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--white-space:normal;--box-shadow:none;--cursor:pointer;--hover-color:var(--stzh-button-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-button-hover-background-color, var(--stzh-color-secondary60));--hover-border-color:transparent;display:inline-grid;width:auto;min-width:var(--height);min-height:var(--height);pointer-events:var(--stzh-button-pointer-events, auto)}.sc-stzh-button-h:where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}@media print{.sc-stzh-button-h{-webkit-print-color-adjust:exact;print-color-adjust:exact}}[icon-only].sc-stzh-button-h:not([icon-only=false]){--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0;width:var(--height);height:var(--height)}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:grid}[rounded].sc-stzh-button-h:not([rounded=false]){--border-radius:var(--height)}[no-padding-left].sc-stzh-button-h:not([no-padding-left=false]){--padding-left:0px}[no-padding-right].sc-stzh-button-h:not([no-padding-right=false]){--padding-right:0px}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-button-secondary-color, var(--stzh-color-primary70));--background-color:var(--stzh-button-secondary-background-color, var(--stzh-color-secondary30));--hover-color:var(--stzh-button-secondary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--stzh-button-secondary-hover-background-color, var(--stzh-color-secondary40))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:var(--stzh-button-tertiary-background-color, transparent);--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--stzh-button-tertiary-hover-background-color, var(--stzh-color-secondary20))}[variant=tertiary-plain].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:transparent;--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--background-color)}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-button-active-color, var(--stzh-color-white));--background-color:var(--stzh-button-active-background-color, var(--stzh-color-secondary60));--hover-color:var(--stzh-button-active-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-button-active-hover-background-color, var(--stzh-color-secondary60))}[disabled].sc-stzh-button-h:not([disabled=false]),[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false]){--color:var(--stzh-button-disabled-color, var(--stzh-color-white));--background-color:var(--stzh-button-disabled-background-color, var(--stzh-color-grey70));--hover-color:var(--color);--hover-background-color:var(--background-color)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=secondary]{--color:var(--stzh-button-secondary-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-button-secondary-disabled-background-color, var(--stzh-color-grey20))}[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=input]{--color:var(--stzh-button-input-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-button-input-disabled-background-color, var(--stzh-color-grey20))}[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary-plain],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary-plain]{--color:var(--stzh-button-tertiary-disabled-color, var(--stzh-color-grey70));--background-color:var(--stzh-button-tertiary-disabled-background-color, transparent)}.sc-stzh-button-h:where([size="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--icon-size:var(--stzh-icon-size-medium)}@media screen and (min-width: 600px){.sc-stzh-button-h:where([size-small="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-small="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-small="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-small="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 900px){.sc-stzh-button-h:where([size-medium="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-medium="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-medium="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-medium="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1260px){.sc-stzh-button-h:where([size-large="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-large="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-large="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-large="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1600px){.sc-stzh-button-h:where([size-ultra="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-ultra="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-ultra="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-ultra="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{transform:translateX(0)}40%{transform:translateX(-0.5rem)}60%{transform:translateX(-0.25rem)}}.stzh-button.sc-stzh-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--font-size);line-height:var(--line-height);letter-spacing:var(--letter-spacing);position:relative;z-index:0;overflow:visible;display:flex;align-items:center;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);background-color:var(--background-color);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color, border-color;border-style:solid;border-width:var(--border-width);border-color:var(--border-color);cursor:var(--cursor);-webkit-text-decoration-line:none;text-decoration-line:none;width:100%;height:100%;border-radius:var(--border-radius);text-align:left;box-shadow:var(--box-shadow)}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__vhidden.sc-stzh-button{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-button__inner.sc-stzh-button{display:flex;align-items:center;justify-content:center;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button,.stzh-button__toggle-icon-wrapper.sc-stzh-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.stzh-button__icon-wrapper.sc-stzh-button{--stzh-icon-size:var(--icon-size);width:auto;height:1em}.stzh-button__toggle-icon-wrapper.sc-stzh-button{width:var(--icon-size);height:var(--icon-size)}.stzh-button__toggle-icon.sc-stzh-button{position:relative;display:block;width:var(--icon-toggle-size);height:var(--icon-toggle-size)}.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{position:absolute;top:50%;left:50%;content:"";display:block;width:var(--icon-toggle-size);height:0.125rem;transition-property:transform, background-color;transition-duration:500ms;transform-origin:top left;background-color:var(--icon-toggle-color)}@media (prefers-reduced-motion: reduce){.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{transition:none}}.stzh-button__toggle-icon.sc-stzh-button::before{transform:rotate(180deg) translate(-50%, -50%)}.stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(90deg) translate(-50%, -50%)}.stzh-button__text.sc-stzh-button{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;white-space:var(--white-space);text-align:center}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.stzh-button__mark.sc-stzh-button{border:0.125rem solid var(--stzh-color-black);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:""}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary70);width:1rem;height:1rem;border-radius:50%;opacity:0;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-secondary60)}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-secondary60)}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary)}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-grey10)}.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(0) translate(-50%, -50%)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{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-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}.stzh-button--default.has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.1875rem}';const l=class{constructor(s){t(this,s);this.stzhFocus=e(this,"stzhFocus",7);this.stzhBlur=e(this,"stzhBlur",7);this.stzhChange=e(this,"stzhChange",7);this.focusedByInput=false;this.handleReset=async()=>{this.checked=this.defaultChecked};this.onInput=t=>{this.checked=this.input.checked;this.stzhChange.emit({component:"stzh-button",originalEvent:t,value:this.value,checked:this.checked})};this.onRootFocus=()=>{if(!this.focusedByInput){this.button.focus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;const s=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhFocus.emit({component:"stzh-button",originalEvent:t})};this.onBlur=t=>{const s=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhBlur.emit({component:"stzh-button",originalEvent:t})};this.onClick=t=>{if(this.disabled){t.stopPropagation();t.preventDefault()}};this.localization=undefined;this.badge="";this.badgeType="default";this.badgePosition="button";this.badgeEmpty=false;this.fullwidth=false;this.rounded=false;this.size="default";this.sizeSmall=undefined;this.sizeMedium=undefined;this.sizeLarge=undefined;this.sizeUltra=undefined;this.textAlign="default";this.variant="default";this.icon="";this.iconPosition="left";this.checked=false;this.defaultChecked=undefined;this.name="";this.value="";this.href="";this.rel=undefined;this.target="";this.download=undefined;this.type="button";this.disabled=false;this.active=false;this.label="";this.effect="default";this.iconOnly=false;this.noPaddingLeft=false;this.noPaddingRight=false;this.buttonAccesskey=undefined;this.buttonId=undefined;this.showToggleIcon=false;this.a11yLabel=undefined;this.a11yDescribedby="";this.a11yExpanded=undefined;this.a11yDisabled=undefined;this.a11yControls=undefined;this.a11yCurrent=undefined;this.a11yTabindex=undefined;this.analyticsId=undefined}resetListener(t){if(t.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}renderIcon(t){return s("div",{class:"stzh-button__icon-wrapper"},this.icon&&s("stzh-icon",{class:"stzh-button__icon",name:this.icon}),!this.icon&&this.showToggleIcon&&s("div",{class:"stzh-button__toggle-icon-wrapper"},s("div",{class:"stzh-button__toggle-icon"})),!this.icon&&!this.showToggleIcon&&s("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&this.badgePosition==="icon"&&t&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType}))}renderContent(){return s("div",{class:"stzh-button__text",ref:t=>this.text=t},this.rel&&this.rel.includes("external")&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.downloadLinkLabel),this.label?this.label:s("slot",null))}renderInner(t){return s(i,null,s("div",{class:"stzh-button__inner",onClick:this.onClick},this.type==="radio"&&s("div",{class:"stzh-button__mark"},s("div",{class:"stzh-button__check"})),this.iconPosition==="left"&&this.renderIcon(t),this.renderContent(),this.iconPosition==="right"&&this.renderIcon(t)),(this.badge||this.badgeEmpty)&&(this.badgePosition==="button"||!t)&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType,onClick:this.onClick}))}async componentWillLoad(){this.defaultChecked=typeof this.defaultChecked==="boolean"?this.defaultChecked:this.checked;if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"button")}}componentDidRender(){requestAnimationFrame((()=>{var t;(t=this.button)===null||t===void 0?void 0:t.setAttribute("s-object-id",this.analyticsId||this.text.innerText)}))}render(){const t=r(this.element,"icon")||!!this.icon;const e={"stzh-button":true,"stzh-button--has-icon":t,"stzh-button--has-icon-only":this.iconOnly,"stzh-button--has-badge":!!this.badge,"stzh-button--is-rounded":this.rounded,"stzh-button--is-fullwidth":this.fullwidth,"stzh-button--is-disabled":this.disabled||this.a11yDisabled,"stzh-button--is-active":this.active,"stzh-button--is-expanded":this.a11yExpanded,[`stzh-button--effect-${this.effect}`]:!!this.effect,[`stzh-button--badge-position-${this.badgePosition}`]:!!this.badgePosition,[`stzh-button--align-${this.textAlign}`]:!!this.textAlign,[`stzh-button--type-${this.type}`]:!!this.type,[`stzh-button--${this.variant}`]:!!this.variant};return s(o,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?s("a",{ref:t=>this.button=t,href:this.disabled?null:this.href,rel:this.rel,download:this.download,target:this.target,class:e,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)):this.type==="radio"?s("label",{ref:t=>this.button=t,class:e,onClick:this.onClick},s("input",{ref:t=>this.input=t,type:"radio",class:"stzh-button__input",name:this.name,value:this.value,defaultChecked:this.defaultChecked,checked:this.checked,disabled:this.disabled,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,onInput:this.onInput}),this.renderInner(t)):s("button",{ref:t=>this.button=t,class:e,type:this.type,name:this.name,value:this.value,disabled:this.disabled,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)))}get element(){return n(this)}};l.style=c;const d=":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--size:var(--stzh-icon-size);--color:var(--stzh-icon-color);--vertical-align:var(--stzh-icon-vertical-align);display:inline-flex;justify-content:center;align-items:center;color:var(--color);vertical-align:var(--vertical-align);width:var(--size);height:var(--size)}.stzh-icon{display:none}.stzh-icon__svg{width:var(--size);height:var(--size)}";let z=0;const u=class{constructor(s){t(this,s);this.name="";this.a11yTitle="";this.svgHtml="";this.iconDisplay="none"}async nameWatcher(t){this.iconDisplay="none";if(t){const t=await fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`);if(t.status===200){const s=await t.text();const o=new DOMParser;const e=o.parseFromString(s,"image/svg+xml");this.svgElement=e.documentElement;this.svgElement.classList.add("stzh-icon__svg");window.setTimeout((()=>{this.iconDisplay="contents"}),0);this.a11yTitleWatcher(this.a11yTitle)}else{this.svgElement=null;this.svgHtml=""}}else{this.svgElement=null;this.svgHtml=""}}a11yTitleWatcher(t){this.svgElement.setAttribute("aria-hidden",t?"false":"true");this.svgElement.setAttribute("focusable",t?"true":"false");this.svgElement.setAttribute("aria-labelledby",t?`${this.iconId}-title`:null);let s=this.svgElement.querySelector("title");if(!s){s=document.createElement("title");s.id=`${this.iconId}-title`;this.svgElement.appendChild(s)}s.innerHTML=t;this.svgHtml=this.svgElement.outerHTML}async componentWillLoad(){this.iconId=`stzh-icon-${z++}`;this.nameWatcher(this.name)}render(){return s(o,null,s("div",{class:"stzh-icon",style:{display:this.iconDisplay},innerHTML:this.svgHtml}))}get element(){return n(this)}static get watchers(){return{name:["nameWatcher"],a11yTitle:["a11yTitleWatcher"]}}};u.style=d;export{a as stzh_badge,l as stzh_button,u as stzh_icon};
-//# sourceMappingURL=p-2676b9db.entry.js.map

package/dist/stzh-components/p-2676b9db.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhBadgeCss","StzhBadge","render","classes","this","type","h","Host","class","label","stzhButtonCss","StzhButton","focusedByInput","handleReset","async","checked","defaultChecked","onInput","event","input","stzhChange","emit","component","originalEvent","value","onRootFocus","button","focus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","onClick","disabled","stopPropagation","preventDefault","resetListener","target","contains","requestAnimationFrame","renderIcon","iconUsed","icon","name","showToggleIcon","badge","badgeEmpty","badgePosition","badgeType","renderContent","ref","el","text","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","renderInner","Fragment","iconPosition","componentWillLoad","stzhComponents","utils","fetchTranslations","componentDidRender","_a","setAttribute","analyticsId","innerText","hasSlot","iconOnly","rounded","fullwidth","a11yDisabled","active","a11yExpanded","effect","textAlign","variant","tabindex","href","a11yLabel","a11yDescribedby","a11yControls","a11yCurrent","id","buttonId","accessKey","buttonAccesskey","a11yTabindex","stzhIconCss","iconCounter","StzhIcon","nameWatcher","iconDisplay","response","fetch","pathMedia","status","svgString","parser","DOMParser","svgDoc","parseFromString","svgElement","documentElement","classList","add","setTimeout","a11yTitleWatcher","a11yTitle","svgHtml","iconId","title","querySelector","document","createElement","appendChild","innerHTML","outerHTML","style","display"],"sources":["src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","src/components/stzh-badge/stzh-badge.tsx","src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx","src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=shadow","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n  --color: #{$colorWhite};\n  --background-color: #{$colorGrey90};\n  display: inline-flex;\n\n  &[type=\"success\"] {\n    --background-color: #{$colorSuccess70};\n  }\n\n  &[type=\"warning\"] {\n    --color: #{$colorBlack};\n    --background-color: #{$colorWarning60};\n  }\n\n  &[type=\"error\"] {\n    --background-color: #{$colorError50};\n  }\n\n  &[type=\"info\"] {\n    --background-color: #{$colorPrimary70};\n  }\n}\n\n.stzh-badge {\n  @include badge;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { StzhBadgeType } from \"../../index\";\n\n/**\n * @slot - Slot badge content\n */\n@Component({\n  tag: \"stzh-badge\",\n  styleUrl: \"stzh-badge.scss\",\n  scoped: true\n})\nexport class StzhBadge {\n  /** Text content of the badge */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhBadgeType = \"default\";\n\n  render() {\n    const classes = {\n      \"stzh-badge\": true,\n      [`stzh-badge--type-${this.type}`]: !!this.type\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.label}\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --height: Height of button\n * @prop --padding-top: Padding top of button\n * @prop --padding-bottom: Padding bottom of button\n * @prop --padding-left: Padding left of button\n * @prop --padding-right: Padding right of button\n * @prop --border-radius: Border radius of button\n * @prop --color: Color of button\n * @prop --background-color: Background color of button\n * @prop --border-color: Border color of button\n * @prop --icon-size: Size of icon next to button\n * @prop --hover-color: Hover color of button\n * @prop --hover-background-color: Hover background color of button\n * @prop --hover-border-color: Hover border color of button\n * @prop --white-space: White space behaviour of button\n *\n * @prop --stzh-form-input-height: **Global**: Height of fields & buttons\n * @prop --stzh-form-input-small-height: **Global**: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: **Global**: Height of fields & buttons when tiny variant is used\n */\n\n@mixin button--size-default() {\n  --height: #{$formInputHeight};\n  --padding-top: calc(#{space('xsmall')} - var(--border-width));\n  --padding-bottom: calc(#{space('xsmall')} - var(--border-width));\n  --padding-left: #{space('xlarge')};\n  --padding-right: #{space('xlarge')};\n  --font-size: var(--stzh-font-centi-font-size);\n  --line-height: var(--stzh-font-centi-text-line-height);\n  --letter-spacing: normal;\n  --icon-size: #{iconSize('medium')};\n  --icon-toggle-size: 14.5px;\n\n  &:where([icon-only]:not([icon-only=\"false\"])) {\n    --icon-size: #{iconSize('large')};\n  }\n}\n\n@mixin button--size-small() {\n  --height: #{$formInputHeightSmall};\n  --padding-left: #{space('large')};\n  --padding-right: #{space('large')};\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --icon-size: #{iconSize('medium')};\n}\n\n@mixin button--size-tiny() {\n  --height: #{$formInputHeightTiny};\n  --padding-left: #{space('medium')};\n  --padding-right: #{space('medium')};\n  --padding-top: calc(#{space('xxsmall')} - var(--border-width));\n  --padding-bottom: calc(#{space('xxsmall')} - var(--border-width));\n  --font-size: var(--stzh-font-micro-font-size);\n  --line-height: var(--stzh-font-micro-text-line-height);\n  --icon-size: #{iconSize('medium')};\n}\n\n:host {\n  @include button--size-default;\n  --color: var(--stzh-button-color, #{$colorWhite});\n  --background-color: var(--stzh-button-background-color, #{$colorPrimary70});\n  --border-width: 0px;\n  --border-color: transparent;\n  --border-radius: 0px;\n  --icon-text-margin: #{space('xsmall')};\n  --icon-toggle-color: currentColor;\n  --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n  --white-space: normal;\n  --box-shadow: none;\n  --cursor: pointer;\n\n  --hover-color: var(--stzh-button-hover-color, #{$colorWhite});\n  --hover-background-color: var(--stzh-button-hover-background-color, #{$colorSecondary60});\n  --hover-border-color: transparent;\n\n  display: inline-grid;\n  width: auto;\n  min-width: var(--height);\n  min-height: var(--height);\n  pointer-events: var(--stzh-button-pointer-events, auto);\n\n  @media print {\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\n\n  &[icon-only]:not([icon-only=\"false\"]) {\n    --padding-top: 0;\n    --padding-bottom: 0;\n    --padding-left: 0;\n    --padding-right: 0;\n\n    width: var(--height);\n    height: var(--height);\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: grid;\n  }\n\n  &[rounded]:not([rounded=\"false\"]) {\n    --border-radius: var(--height);\n  }\n\n  &[no-padding-left]:not([no-padding-left=\"false\"]) {\n    --padding-left: 0px;\n  }\n\n  &[no-padding-right]:not([no-padding-right=\"false\"]) {\n    --padding-right: 0px;\n  }\n\n  &[variant=\"secondary\"] {\n    --color: var(--stzh-button-secondary-color, #{$colorPrimary70});\n    --background-color: var(--stzh-button-secondary-background-color, #{$colorSecondary30});\n\n    --hover-color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--stzh-button-secondary-hover-background-color, #{$colorSecondary40});\n  }\n\n  &[variant=\"tertiary\"] {\n    --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n    --background-color: var(--stzh-button-tertiary-background-color, transparent);\n\n    --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--stzh-button-tertiary-hover-background-color, #{$colorSecondary20});\n  }\n\n  &[variant=\"tertiary-plain\"] {\n    --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n    --background-color: transparent;\n\n    --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--background-color);\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--stzh-button-active-color, #{$colorWhite});\n    --background-color: var(--stzh-button-active-background-color, #{$colorSecondary60});\n\n    --hover-color: var(--stzh-button-active-hover-color, #{$colorWhite});\n    --hover-background-color: var(--stzh-button-active-hover-background-color, #{$colorSecondary60});\n  }\n\n  &[disabled]:not([disabled=\"false\"]),\n  &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n    --color: var(--stzh-button-disabled-color, #{$colorWhite});\n    --background-color: var(--stzh-button-disabled-background-color, #{$colorGrey70});\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"] {\n    --color: var(--stzh-button-secondary-disabled-color, #{$colorGrey80});\n    --background-color: var(--stzh-button-secondary-disabled-background-color, #{$colorGrey20});\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"] {\n    --color: var(--stzh-button-input-disabled-color, #{$colorGrey80});\n    --background-color: var(--stzh-button-input-disabled-background-color, #{$colorGrey20});\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary-plain\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary-plain\"] {\n    --color: var(--stzh-button-tertiary-disabled-color, #{$colorGrey70});\n    --background-color: var(--stzh-button-tertiary-disabled-background-color, transparent);\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include button--size-small;\n}\n\n:host(:where([size=\"tiny\"])) {\n  @include button--size-tiny;\n}\n\n@each $breakpoint, $size in $breakpoints {\n  @include mq($from: $breakpoint) {\n    :host(:where([size-#{$breakpoint}=\"default\"])) {\n      @include button--size-default;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"small\"])) {\n      @include button--size-small;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"tiny\"])) {\n      @include button--size-tiny;\n    }\n  }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n.stzh-button {\n  @include font('heavy');\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  letter-spacing: var(--letter-spacing);\n  position: relative;\n  z-index: 0;\n  overflow: visible;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  color: var(--color);\n  padding-top: var(--padding-top);\n  padding-bottom: var(--padding-bottom);\n  padding-left: var(--padding-left);\n  padding-right: var(--padding-right);\n  background-color: var(--background-color);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  border-style: solid;\n  border-width: var(--border-width);\n  border-color: var(--border-color);\n  cursor: var(--cursor);\n  text-decoration-line: none;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--border-radius);\n  text-align: left;\n  box-shadow: var(--box-shadow);\n\n  &:hover {\n    border-color: var(--hover-border-color);\n    background-color: var(--hover-background-color);\n    color: var(--hover-color);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n  }\n\n  &__icon-wrapper,\n  &__toggle-icon-wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n    width: auto;\n    height: 1em;\n  }\n\n  &__toggle-icon-wrapper {\n    width: var(--icon-size);\n    height: var(--icon-size);\n  }\n\n  &__toggle-icon {\n    position: relative;\n    display: block;\n    width: var(--icon-toggle-size);\n    height: var(--icon-toggle-size);\n\n    &::before,\n    &::after {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      content: '';\n      display: block;\n      width: var(--icon-toggle-size);\n      height: 2px;\n      transition-property: transform, background-color;\n      transition-duration: 500ms;\n      transform-origin: top left;\n      background-color: var(--icon-toggle-color);\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    }\n\n    &::before {\n      transform: rotate(180deg) translate(-50%, -50%);\n    }\n\n    &::after {\n      transform: rotate(90deg) translate(-50%, -50%);\n    }\n  }\n\n  &__text {\n    @include wordWrap;\n    white-space: var(--white-space);\n    text-align: center;\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--icon-text-margin);\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n  }\n\n  &__mark {\n    @include radio__mark();\n    width: 20px;\n    height: 20px;\n    margin-right: space('xsmall');\n    border-color: currentColor;\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  /* Hover / Focus / Checked / Disabled of Radio Type */\n\n  &__input:checked:hover ~ &__inner &__mark &__check,\n  &__input:checked:focus ~ &__inner &__mark &__check {\n    color: $colorSecondary60;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__inner &__mark,\n  &__input:checked:hover ~ &__inner &__mark,\n  &__input:checked:focus ~ &__inner &__mark {\n    border-color: $colorSecondary60;\n  }\n\n  &__input:focus ~ &__inner &__mark,\n  &__input:checked ~ &__inner &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__inner &__mark &__check {\n    opacity: 1;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark &__check {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n\n  /* Is expanded */\n\n  &--is-expanded &__toggle-icon {\n    &::before,\n    &::after {\n      transform: rotate(0) translate(-50%, -50%);\n    }\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-button &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-button &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('xsmall')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n    position: relative;\n  }\n\n  &--badge-position-icon#{&}--has-icon &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('small')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--badge-icon-text-margin);\n  }\n\n  /* Variant if button only has icon */\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Effect */\n\n  &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n  }\n\n  /* Alignment variants */\n\n  &--align-left &__inner {\n    justify-content: flex-start;\n  }\n\n  &--align-right &__inner {\n    justify-content: flex-end;\n  }\n\n  &--align-center &__inner {\n    justify-content: center;\n  }\n\n  &--align-space-between &__inner {\n    justify-content: space-between;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n\n  /* Default */\n\n  &--default.has-focus {\n    outline: var(--stzh-flyingfocus-color) solid 3px;\n  }\n}\n","import {\n  Component,\n  Host,\n  Fragment,\n  Element,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen\n} from \"@stencil/core\";\n\nimport {\n  StzhButtonFocusEvent,\n  StzhButtonBlurEvent,\n  StzhButtonChangeEvent,\n  StzhButtonSize,\n  StzhButtonVariant,\n  StzhBadgeType\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-button\",\n  styleUrl: \"stzh-button.scss\",\n  scoped: true\n})\nexport class StzhButton {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Display a badge aligned to button or icons */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"button\" = \"button\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Whether the button is rounded */\n  @Prop({ reflect: true }) rounded: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n\n  /** Size variant (abobe small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhButtonSize;\n\n  /** Size variant (abobe medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhButtonSize;\n\n  /** Size variant (abobe large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhButtonSize;\n\n  /** Size variant (abobe ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhButtonSize;\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: StzhButtonVariant = \"default\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Icon Position */\n  @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n  /** Checked status (if type is radio) */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset, if type is radio) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** The name of the input element (if type is button or radio) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element (if type is button or radio) */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Type of the button */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" | \"radio\" = \"button\";\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Effect/Animation used */\n  @Prop() effect: \"default\" | \"cta\" = \"default\";\n\n  /** Whether only an icon is used inside the button */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Whether padding left should be removed */\n  @Prop({ reflect: true }) noPaddingLeft: boolean = false;\n\n  /** Whether padding right should be removed */\n  @Prop({ reflect: true }) noPaddingRight: boolean = false;\n\n  /** Access key of button (usually a number e.g. 1) */\n  @Prop() buttonAccesskey: string;\n\n  /** ID of button element */\n  @Prop() buttonId: string;\n\n  /** Whether to show toggle icon (show minus when a11yExpanded=true, otherwise plus) */\n  @Prop({ reflect: true }) showToggleIcon: boolean = false;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria disabled of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Aria current of link/button */\n  @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhButtonElement;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n  /** Change event (only called if type is radio) */\n  @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement | HTMLLabelElement;\n  private input: HTMLInputElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  }\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-button\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.button.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-button\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-button\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  }\n\n  private renderIcon(iconUsed: boolean): HTMLInputElement {\n    return (\n      <div class=\"stzh-button__icon-wrapper\">\n        {this.icon &&\n          <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n        }\n        {!this.icon && this.showToggleIcon &&\n          <div class=\"stzh-button__toggle-icon-wrapper\">\n            <div class=\"stzh-button__toggle-icon\"></div>\n          </div>\n        }\n        {!this.icon && !this.showToggleIcon &&\n          <slot name=\"icon\"></slot>\n        }\n        {(this.badge || this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed &&\n          <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div\n        class=\"stzh-button__text\"\n        ref={(el) => (this.text = el as HTMLDivElement)}\n      >\n        {this.rel && this.rel.includes('external') && <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n        {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        {this.label ? this.label : <slot></slot>}\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div\n          class=\"stzh-button__inner\"\n          onClick={this.onClick}\n        >\n          {this.type === \"radio\" &&\n            <div class=\"stzh-button__mark\">\n              <div class=\"stzh-button__check\"></div>\n            </div>\n          }\n          {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n        </div>\n        {(this.badge || this.badgeEmpty) && (this.badgePosition === \"button\" || !iconUsed) &&\n          <stzh-badge\n            class=\"stzh-button__badge\"\n            label={this.badge}\n            type={this.badgeType}\n            onClick={this.onClick}\n          ></stzh-badge>\n        }\n      </Fragment>\n    );\n  }\n\n  async componentWillLoad() {\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"button\");\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-button\": true,\n      \"stzh-button--has-icon\": iconUsed,\n      \"stzh-button--has-icon-only\": this.iconOnly,\n      \"stzh-button--has-badge\": !!this.badge,\n      \"stzh-button--is-rounded\": this.rounded,\n      \"stzh-button--is-fullwidth\": this.fullwidth,\n      \"stzh-button--is-disabled\": this.disabled || this.a11yDisabled,\n      \"stzh-button--is-active\": this.active,\n      \"stzh-button--is-expanded\": this.a11yExpanded,\n      [`stzh-button--effect-${this.effect}`]: !!this.effect,\n      [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-button--type-${this.type}`]: !!this.type,\n      [`stzh-button--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.button = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            rel={this.rel}\n            download={this.download}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n              ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n              ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            id={this.buttonId}\n            accessKey={this.buttonAccesskey}\n            tabindex={this.a11yTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n          :\n          this.type === \"radio\" ?\n            <label\n              ref={(el) => (this.button = el as HTMLLabelElement)}\n              class={classes}\n              onClick={this.onClick}\n              >\n              <input\n                ref={(el) => (this.input = el as HTMLInputElement)}\n                type=\"radio\"\n                class=\"stzh-button__input\"\n                name={this.name}\n                value={this.value}\n                defaultChecked={this.defaultChecked}\n                checked={this.checked}\n                disabled={this.disabled}\n                aria-label={this.a11yLabel || null}\n                aria-describedby={this.a11yDescribedby || null}\n                aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n                  ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n                aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n                  ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n                aria-controls={this.a11yControls || null}\n                aria-current={this.a11yCurrent || null}\n                id={this.buttonId}\n                accessKey={this.buttonAccesskey}\n                tabindex={this.a11yTabindex}\n                onFocus={this.onFocus}\n                onBlur={this.onBlur}\n                onClick={this.onClick}\n                onInput={this.onInput}\n              />\n              {this.renderInner(iconUsed)}\n            </label>\n            :\n            <button\n              ref={(el) => (this.button = el as HTMLButtonElement)}\n              class={classes}\n              type={this.type}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n                ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n              aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n                ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n              aria-controls={this.a11yControls || null}\n              aria-current={this.a11yCurrent || null}\n              id={this.buttonId}\n              accessKey={this.buttonAccesskey}\n              tabindex={this.a11yTabindex}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onClick={this.onClick}\n            >\n              {this.renderInner(iconUsed)}\n            </button>\n        }\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --size: Icon size\n * @prop --color: Icon color\n *\n * @prop --stzh-icon-size: **Global**: Default icon size. [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n * @prop --stzh-icon-color: **Global**: Icon color\n * @prop --stzh-icon-vertical-align: **Global**: Icon vertical alignment\n */\n\n:host {\n  --size: #{iconSize()};\n  --color: #{$iconColor};\n  --vertical-align: #{$iconVerticalAlign};\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: var(--color);\n  vertical-align: var(--vertical-align);\n  width: var(--size);\n  height: var(--size);\n}\n\n.stzh-icon {\n  display: none;\n\n  &__svg {\n    width: var(--size);\n    height: var(--size);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Watch,\n  State,\n  Element\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n  tag: \"stzh-icon\",\n  styleUrl: \"stzh-icon.scss\",\n  shadow: true\n})\nexport class StzhIcon {\n  /**\n   * Icon which should be displayed\n   * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n   */\n  @Prop() name: string = \"\";\n\n  /**\n   * Hidden icon title for screenreader\n   * (usually not needed when e.g. inside links or buttons that have text)\n  */\n  @Prop({ attribute: 'a11y-title' }) a11yTitle: string = \"\";\n\n  @Element() element: HTMLStzhIconElement;\n\n  @State() svgHtml: string = \"\";\n  @State() iconDisplay: string = \"none\";\n\n  @Watch(\"name\")\n  async nameWatcher(name: string) {\n    this.iconDisplay = \"none\";\n\n    if (name) {\n      const response = await fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`);\n\n      if (response.status === 200) {\n        const svgString = await response.text();\n\n        const parser = new DOMParser();\n        const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');\n\n        this.svgElement = svgDoc.documentElement as unknown as SVGElement;\n        this.svgElement.classList.add('stzh-icon__svg');\n\n        // for some obscure reason we need to delay showing the icon in safari,\n        // otherwise the icon doesn't show up randomly\n        // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)\n        window.setTimeout(() => {\n          this.iconDisplay = \"contents\";\n        }, 0);\n\n        this.a11yTitleWatcher(this.a11yTitle);\n      } else {\n        this.svgElement = null;\n        this.svgHtml = '';\n      }\n    } else {\n      this.svgElement = null;\n      this.svgHtml = '';\n    }\n  }\n\n  @Watch(\"a11yTitle\")\n  a11yTitleWatcher(a11yTitle: string) {\n    this.svgElement.setAttribute(\"aria-hidden\", a11yTitle ? \"false\" : \"true\");\n    this.svgElement.setAttribute(\"focusable\", a11yTitle ? \"true\" : \"false\");\n    this.svgElement.setAttribute(\"aria-labelledby\", a11yTitle ? `${this.iconId}-title` : null);\n\n    let title = this.svgElement.querySelector('title');\n\n    if (!title) {\n      title = document.createElement('title');\n      title.id = `${this.iconId}-title`;\n      this.svgElement.appendChild(title);\n    }\n\n    title.innerHTML = a11yTitle;\n    this.svgHtml = this.svgElement.outerHTML;\n  }\n\n  private svgElement: SVGElement | null;\n  private iconId: string;\n\n  async componentWillLoad() {\n    this.iconId = `stzh-icon-${iconCounter++}`;\n    this.nameWatcher(this.name);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"stzh-icon\" style={{ display: this.iconDisplay }} innerHTML={this.svgHtml}></div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-2afe2028.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as i,a as o,g as e}from"./p-c7bfac7a.js";import{c as h,a as r,A as a,o as l,f as n,s as c,b as p}from"./p-a2da1df4.js";import{c as d}from"./p-ed63ed76.js";import{i as z}from"./p-7e304ea3.js";import{w as f}from"./p-54bd842e.js";import{s as u,a as m}from"./p-7e2354d0.js";import"./p-9b063923.js";const b=".sc-stzh-tooltip-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-tooltip-h{display:none}.sc-stzh-tooltip-h *.sc-stzh-tooltip,.sc-stzh-tooltip-h *.sc-stzh-tooltip::before,.sc-stzh-tooltip-h *.sc-stzh-tooltip::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-tooltip-h .has-focus.sc-stzh-tooltip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip{outline-style:none !important}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip::-moz-focus-inner{border:0 !important}.sc-stzh-tooltip-h{display:contents;--color:var(--stzh-color-white);--background-color:var(--stzh-color-coolgrey60);--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--padding:var(--stzh-tooltip-padding);--border-radius:var(--stzh-tooltip-border-radius);--link-color:var(--stzh-color-white);--hover-link-color:var(--stzh-color-white70op)}.stzh-tooltip.sc-stzh-tooltip{display:contents}.stzh-tooltip__arrow.sc-stzh-tooltip{position:absolute;display:flex;color:var(--background-color)}.stzh-tooltip--placement-bottom.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{top:0;transform:translateY(-0.5rem)}.stzh-tooltip--placement-top.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{bottom:0;transform:translateY(0.5rem) rotate(180deg)}.stzh-tooltip--placement-left.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{right:0;transform:translateX(0.75rem) rotate(90deg)}.stzh-tooltip--placement-right.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{left:0;transform:translateX(-0.75rem) rotate(-90deg)}.stzh-tooltip__trigger.sc-stzh-tooltip{display:contents}.stzh-tooltip__content.sc-stzh-tooltip{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);position:absolute;z-index:var(--stzh-z-index-popover);border-radius:var(--border-radius);background-color:var(--background-color);color:var(--color);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);display:flex;flex-direction:row-reverse;--stzh-base-color:var(--color);--stzh-link-color:var(--link-color);--stzh-link-hover-color:var(--hover-link-color)}@supports (filter: var(--stzh-tooltip-drop-shadow)){.stzh-tooltip__content.sc-stzh-tooltip{box-shadow:none;filter:var(--stzh-tooltip-drop-shadow)}}.stzh-tooltip__content-slot.sc-stzh-tooltip{padding:var(--padding)}.stzh-tooltip__close.sc-stzh-tooltip{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background-color:transparent;display:flex;width:2.75rem;height:2.75rem;flex-shrink:0;justify-content:center;align-items:center;color:var(--stzh-color-white);border-radius:var(--stzh-button-border-radius)}.stzh-tooltip__icon.sc-stzh-tooltip{--size:var(--stzh-icon-size-small)}.stzh-tooltip__vhidden.sc-stzh-tooltip{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";const v={keyframes:[{opacity:"0"},{opacity:"1"}],options:{duration:100,easing:"linear"}};const g={keyframes:[{opacity:"1"},{opacity:"0"}],options:{duration:200,easing:"linear"}};const w={ESC:27};let _=0;const y=class{constructor(i){t(this,i);this.stzhOpen=s(this,"stzhOpen",7);this.stzhOpened=s(this,"stzhOpened",7);this.stzhClose=s(this,"stzhClose",7);this.stzhClosed=s(this,"stzhClosed",7);this.toggledByMethod=false;this.isHovering=false;this.onEscKey=t=>{if(t.keyCode===w.ESC){this.hide()}};this.computePosition=async()=>{if(!this.open){return}const{x:t=0,y:s=0,strategy:i="absolute",placement:o,middlewareData:e}=await h(this.triggerFirstElement,this.contentElement,{strategy:this.strategy,placement:this.placement,middleware:[l({mainAxis:this.distance,crossAxis:this.skidding}),n({padding:5}),c({padding:5}),p({element:this.arrowElement,padding:5})]});this.middlewareData=e;this.computedPlacement=o;Object.assign(this.contentElement.style,{position:i,left:`${t}px`,top:`${s}px`});Object.assign(this.arrowElement.style,{left:t!=null?`${e.arrow.x}px`:"",top:s!=null?`${e.arrow.y}px`:""})};this.onClickTrigger=()=>{if(this.hasTrigger("click")){this.toggle()}};this.onMouseEnterTrigger=()=>{if(this.hasTrigger("hover")){this.isHovering=true;this.show()}};this.onMouseLeaveTrigger=()=>{if(this.hasTrigger("hover")){this.isHovering=false;document.addEventListener("mousemove",this.onMouseMoveDocument)}};this.onFocusTrigger=()=>{if(this.hasTrigger("focus")){this.show()}};this.onBlurTrigger=()=>{if(this.hasTrigger("focus")){this.hide()}};this.onMouseMoveDocument=t=>{const{clientX:s,clientY:i}=t;if(!this.computedPlacement){return true}const o=this.computedPlacement.split("-")[0];const e=this.middlewareData.offset;const h=this.contentElement.getBoundingClientRect();if(!e){return true}const r=o==="bottom"?e.y:0;const a=o==="top"?e.y:0;const l=o==="right"?e.x:0;const n=o==="left"?e.x:0;const c=h.top-i>r;const p=i-h.bottom>a;const d=h.left-s>l;const z=s-h.right>n;if(c||p||d||z){document.removeEventListener("mousemove",this.onMouseMoveDocument);if(!this.isHovering){this.hide()}}};this.open=false;this.label="";this.content="";this.placement="bottom";this.strategy="absolute";this.skidding=0;this.distance=12;this.interactive=false;this.trigger="hover focus";this.localization=undefined;this.computedPlacement=undefined}async show(){if(this.open){return}this.toggledByMethod=true;this.open=true;return f(this.element,"stzhOpened")}async hide(){if(!this.open){return}this.toggledByMethod=true;this.open=false;return f(this.element,"stzhClosed")}async toggle(){if(this.open){return await this.hide()}else{return await this.show()}}async update(){return await this.computePosition()}async openWatcher(t){if(!this.contentElement){return}if(t){if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-tooltip"})}await u(this.contentElement);this.contentElement.style.willChange="transform, opacity, position, top, left, bottom, right";this.contentElement.hidden=false;await m(this.contentElement,v.keyframes,v.options);if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-tooltip"})}}else{if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-tooltip"})}await u(this.contentElement);await m(this.contentElement,g.keyframes,g.options);this.contentElement.hidden=true;this.contentElement.style.willChange="auto";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-tooltip"})}}this.toggledByMethod=false}triggerWatcher(t){this._trigger=t.split(" ")}handleDocumentClick(t){if(!this.open){return}const s=t.target!==this.contentElement&&this.contentElement.contains(t.target)===false;const i=t.target===this.triggerElement||this.triggerElement.contains(t.target);if(s&&!i&&this.hasTrigger("click")){this.hide()}}hasTrigger(t){return this._trigger.indexOf(t)>-1}async componentWillLoad(){this.id=`stzh-tooltip-${_++}`;this.triggerWatcher(this.trigger);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"tooltip")}}componentDidRender(){this.computePosition();const t=z(this.triggerFirstElement);if(this.hasTrigger("click")){this.triggerFirstElement.setAttribute(t?"a11y-expanded":"aria-expanded",this.open?"true":"false");if(t&&!this.triggerFirstElement.getAttribute("a11y-describedby")||!t&&!this.triggerFirstElement.getAttribute("aria-describedby")){this.triggerFirstElement.setAttribute(t?"a11y-describedby":"aria-describedby",`${this.id}-trigger-description`)}if(t&&!this.triggerFirstElement.getAttribute("a11y-label")||!t&&!this.triggerFirstElement.getAttribute("aria-label")){this.triggerFirstElement.setAttribute(t?"a11y-label":"aria-label",this.label)}if(t&&!this.triggerFirstElement.getAttribute("analytics-id")||!t&&!this.triggerFirstElement.getAttribute("s-object-id")){this.triggerFirstElement.setAttribute(t?"analytics-id":"s-object-id",this.label)}}else{if(t&&!this.triggerFirstElement.getAttribute("a11y-describedby")||!t&&!this.triggerFirstElement.getAttribute("aria-describedby")){this.triggerFirstElement.setAttribute(t?"a11y-describedby":"aria-describedby",`${this.id}-content`)}}if(this.trap){this.open?this.trap.activate():this.trap.deactivate()}}componentDidUpdate(){if(this.trap){this.trap.updateContainerElements(this.contentElement)}}componentDidLoad(){this.autoUpdateCleanup=r(this.element,this.contentElement,this.computePosition);if(this.interactive){this.trap=d(this.contentElement,{fallbackFocus:this.contentElement,clickOutsideDeactivates:true,returnFocusOnDeactivate:true});if(this.open){this.trap.activate()}}this.contentElement.hidden=!this.open}connectedCallback(){var t;let s=(t=this.triggerElement)===null||t===void 0?void 0:t.firstElementChild;if(!s){const t=Array.from(this.element.children).find((t=>!t.hasAttribute("slot")));s=t}if(s){this.triggerFirstElement=s;s.addEventListener("click",this.onClickTrigger);s.addEventListener("mouseenter",this.onMouseEnterTrigger);s.addEventListener("mouseleave",this.onMouseLeaveTrigger);s.addEventListener("focusin",this.onFocusTrigger);s.addEventListener("focusout",this.onBlurTrigger)}}disconnectedCallback(){if(this.autoUpdateCleanup){this.autoUpdateCleanup()}if(this.triggerFirstElement){this.triggerFirstElement.removeEventListener("click",this.onClickTrigger);this.triggerFirstElement.removeEventListener("mouseenter",this.onMouseEnterTrigger);this.triggerFirstElement.removeEventListener("mouseleave",this.onMouseLeaveTrigger);this.triggerFirstElement.removeEventListener("focusin",this.onFocusTrigger);this.triggerFirstElement.removeEventListener("focusout",this.onBlurTrigger)}}render(){const t={"stzh-tooltip":true,[`stzh-tooltip--open`]:this.open,[`stzh-tooltip--placement-${this.computedPlacement}`]:!!this.computedPlacement};return i(o,null,i("div",{class:t},i("div",{class:"stzh-tooltip__trigger",ref:t=>this.triggerElement=t},i("slot",null)),this.hasTrigger("click")&&i("div",{class:"stzh-tooltip__vhidden",id:`${this.id}-trigger-description`},this.localization.open),i("div",{class:"stzh-tooltip__content",id:`${this.id}-content`,ref:t=>this.contentElement=t,tabindex:"-1","aria-labelledby":this.label?`${this.id}-label`:null,"aria-hidden":this.open?"false":"true",onKeyDown:this.onEscKey,onMouseEnter:this.onMouseEnterTrigger,onMouseLeave:this.onMouseLeaveTrigger,onFocusin:this.onFocusTrigger,onFocusout:this.onBlurTrigger},i("div",{class:"stzh-tooltip__arrow",ref:t=>this.arrowElement=t,innerHTML:a}),this.label&&i("h2",{id:`${this.id}-label`,class:"stzh-tooltip__vhidden"},this.label),this.hasTrigger("click")&&i("button",{class:"stzh-tooltip__close",onClick:()=>this.hide(),type:"button"},i("stzh-icon",{name:"close",class:"stzh-tooltip__icon"}),i("span",{class:"stzh-tooltip__vhidden"},this.localization.close)),i("stzh-text",{curve:"none",class:"stzh-tooltip__content-slot"},this.content?this.content:i("slot",{name:"content"})))))}get element(){return e(this)}static get watchers(){return{open:["openWatcher"],trigger:["triggerWatcher"]}}};y.style=b;export{y as stzh_tooltip};
-//# sourceMappingURL=p-2afe2028.entry.js.map

package/dist/stzh-components/p-2afe2028.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhTooltipCss","ANIMATION_SHOW","keyframes","opacity","options","duration","easing","ANIMATION_HIDE","keyCode","ESC","tooltipCounter","StzhTooltip","this","toggledByMethod","isHovering","onEscKey","event","hide","computePosition","async","open","x","y","strategy","placement","middlewareData","triggerFirstElement","contentElement","middleware","offset","mainAxis","distance","crossAxis","skidding","flip","padding","shift","arrow","element","arrowElement","computedPlacement","Object","assign","style","position","left","top","onClickTrigger","hasTrigger","toggle","onMouseEnterTrigger","show","onMouseLeaveTrigger","document","addEventListener","onMouseMoveDocument","onFocusTrigger","onBlurTrigger","clientX","clientY","basePlacement","split","offsetData","popperRect","getBoundingClientRect","topDistance","bottomDistance","leftDistance","rightDistance","exceedsTop","exceedsBottom","bottom","exceedsLeft","exceedsRight","right","removeEventListener","waitForEvent","update","openWatcher","newValue","stzhOpen","emit","component","stopAnimations","willChange","hidden","animateTo","stzhOpened","stzhClose","stzhClosed","triggerWatcher","_trigger","handleDocumentClick","isClickOutside","target","contains","isClickTrigger","triggerElement","trigger","indexOf","componentWillLoad","id","localization","window","stzhComponents","utils","fetchTranslations","componentDidRender","isStzh","isStzhElement","setAttribute","getAttribute","label","trap","activate","deactivate","componentDidUpdate","updateContainerElements","componentDidLoad","autoUpdateCleanup","autoUpdate","interactive","createFocusTrap","fallbackFocus","clickOutsideDeactivates","returnFocusOnDeactivate","connectedCallback","_a","firstElementChild","defaultSlot","Array","from","children","find","child","hasAttribute","disconnectedCallback","render","classes","h","Host","class","ref","el","tabindex","onKeyDown","onMouseEnter","onMouseLeave","onFocusin","onFocusout","innerHTML","Arrow","onClick","type","name","close","curve","content"],"sources":["src/components/stzh-tooltip/stzh-tooltip.scss?tag=stzh-tooltip&encapsulation=scoped","src/components/stzh-tooltip/stzh-tooltip.tsx"],"sourcesContent":["/**\n * @prop --width: Width of tooltip\n * @prop --min-width: Minimum width of tooltip\n * @prop --max-width: Maximum width of tooltip\n * @prop --padding: Padding of tooltip\n * @prop --border-radius: Border radius of tooltip\n *\n * @prop --stzh-tooltip-width: **Global**: Width of tooltip (default `auto`)\n * @prop --stzh-tooltip-min-width: **Global**: Minimum width of tooltip (default `initial`)\n * @prop --stzh-tooltip-max-width: **Global**: Maximum width of tooltip (default `334px`)\n * @prop --stzh-tooltip-padding: **Global**: Padding of tooltip (default `var(--stzh-space-small)`)\n * @prop --stzh-tooltip-border-radius: **Global**: Border radius of tooltip (default `3px`)\n * @prop --stzh-tooltip-drop-shadow: **Global**: Border radius of tooltip (default `drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.16))`)\n */\n\n:host {\n  display: contents;\n\n  --color: #{$colorWhite};\n  --background-color: #{$colorCoolgrey60};\n  --width: #{$tooltipWidth};\n  --min-width: #{$tooltipMinWidth};\n  --max-width: #{$tooltipMaxWidth};\n  --padding: #{$tooltipPadding};\n  --border-radius: #{$tooltipBorderRadius};\n  --link-color: #{$colorWhite};\n\n  --hover-link-color: #{$colorWhite70op};\n}\n\n.stzh-tooltip {\n  @include tooltip-arrow;\n  display: contents;\n\n  &__trigger {\n    display: contents;\n  }\n\n  &__content {\n    @include tooltip-fontsize;\n    @include tooltip-dropshadow;\n    position: absolute;\n    z-index: $zIndexPopover;\n    border-radius: var(--border-radius);\n    background-color: var(--background-color);\n    color: var(--color);\n    width: var(--width);\n    min-width: var(--min-width);\n    max-width: var(--max-width);\n    display: flex;\n    flex-direction: row-reverse;\n\n    --stzh-base-color: var(--color);\n    --stzh-link-color: var(--link-color);\n    // TODO: check with designer which color it should be for hover\n    --stzh-link-hover-color: var(--hover-link-color);\n  }\n\n  &__content-slot {\n    padding: var(--padding);\n  }\n\n  &__close {\n    @include tooltip__close;\n  }\n\n  &__icon {\n    @include tooltip__icon;\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n}\n","import {\n  Host,\n  Element,\n  Component,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n  Method,\n  Listen,\n  State,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhTooltipOpenEvent,\n  StzhTooltipOpenedEvent,\n  StzhTooltipCloseEvent,\n  StzhTooltipClosedEvent\n} from \"../../index\";\n\nimport {\n  arrow,\n  computePosition,\n  offset,\n  shift,\n  flip,\n  autoUpdate,\n  Placement,\n  MiddlewareData\n} from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo } from \"../../utils/animation-utils\";\n\nimport { StzhTooltipLocalizedText } from \"./stzh-tooltip.localization\";\n\nimport Arrow from \"./assets/arrow.svg\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { opacity: \"0\" },\n    { opacity: \"1\" }\n  ],\n  options: { duration: 100, easing: \"linear\" }\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { opacity: \"1\" },\n    { opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"linear\" }\n};\n\nconst keyCode = {\n  ESC: 27\n};\n\nlet tooltipCounter = 0;\n\n/**\n * @slot Trigger element inside\n * @slot content - Content of tooltip\n */\n@Component({\n  tag: \"stzh-tooltip\",\n  styleUrl: \"stzh-tooltip.scss\",\n  scoped: true\n})\nexport class StzhTooltip {\n  /** Whether tooltip should be open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Label of tooltip (used for screenreaders) */\n  @Prop() label: string = \"\";\n\n  /** Content of tooltip (use instead of content slot) */\n  @Prop() content: string = \"\";\n\n  /** Default placement of tooltip relative to trigger element */\n  @Prop() placement: Placement = \"bottom\";\n\n  /** Position strategy */\n  @Prop() strategy: \"absolute\" | \"fixed\" = \"absolute\";\n\n  /** Shifting of tooltip content */\n  @Prop() skidding: number = 0;\n\n  /** Distance from tooltip content to trigger (default: arrow height (8px) + spacing (4px) = 12) */\n  @Prop() distance: number = 12;\n\n  /** Whether tooltip is interactive */\n  @Prop() interactive: boolean = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = \"hover focus\";\n  private _trigger: string[];\n\n  /** Translation strings */\n  @Prop() localization: StzhTooltipLocalizedText;\n\n  @Element() element: HTMLStzhTooltipElement;\n\n  /** Tooltip open event */\n  @Event() stzhOpen: EventEmitter<StzhTooltipOpenEvent>;\n\n  /** Tooltip opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhTooltipOpenedEvent>;\n\n  /** Tooltip close event */\n  @Event() stzhClose: EventEmitter<StzhTooltipCloseEvent>;\n\n  /** Tooltip closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhTooltipClosedEvent>;\n\n  /** Show tooltip content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide tooltip content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  /** Toggle tooltip content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  @Method()\n  async update() {\n    return await this.computePosition();\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.contentElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n\n      await stopAnimations(this.contentElement);\n\n      // safari seems to need will-change,\n      // otherwise it has problems animating the element with the drop shadow\n      this.contentElement.style.willChange = \"transform, opacity, position, top, left, bottom, right\";\n      this.contentElement.hidden = false;\n\n      await animateTo(\n        this.contentElement,\n        ANIMATION_SHOW.keyframes,\n        ANIMATION_SHOW.options\n      );\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-tooltip\"\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n\n      await stopAnimations(this.contentElement);\n      await animateTo(\n        this.contentElement,\n        ANIMATION_HIDE.keyframes,\n        ANIMATION_HIDE.options\n      );\n\n      this.contentElement.hidden = true;\n      this.contentElement.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-tooltip\"\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Watch(\"trigger\")\n  triggerWatcher(newValue: string) {\n    this._trigger = newValue.split(\" \");\n  }\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleDocumentClick(event: MouseEvent) {\n    if (!this.open) {\n      return\n    }\n\n    const isClickOutside = event.target !== this.contentElement\n      && this.contentElement.contains(event.target as HTMLElement) === false\n\n    const isClickTrigger = event.target === this.triggerElement\n      || this.triggerElement.contains(event.target as HTMLElement)\n\n    if (isClickOutside && !isClickTrigger && this.hasTrigger(\"click\")) {\n      this.hide()\n    }\n  }\n\n  @State() computedPlacement: Placement;\n\n  private toggledByMethod: boolean = false;\n  private middlewareData: MiddlewareData;\n  private triggerElement: HTMLElement;\n  private triggerFirstElement: HTMLElement;\n  private contentElement: HTMLElement;\n  private arrowElement: HTMLElement;\n  private autoUpdateCleanup: Function;\n  private id: string;\n  private trap: FocusTrap;\n  private isHovering: boolean = false;\n\n  private hasTrigger(trigger: string) {\n    return this._trigger.indexOf(trigger) > -1;\n  }\n\n  private onEscKey = (event: KeyboardEvent) => {\n    if (event.keyCode === keyCode.ESC) {\n      this.hide()\n    }\n  }\n\n  private computePosition = async () => {\n    if (!this.open) {\n      return;\n    }\n\n    const { x = 0, y = 0, strategy = \"absolute\", placement, middlewareData }\n      = await computePosition(this.triggerFirstElement, this.contentElement, {\n        strategy: this.strategy,\n        placement: this.placement,\n        middleware: [\n          offset({\n            mainAxis: this.distance,\n            crossAxis: this.skidding\n          }),\n          flip({\n            padding: 5\n          }),\n          shift({\n            padding: 5\n          }),\n          arrow({\n            element: this.arrowElement,\n            padding: 5\n          })\n        ],\n      });\n\n    this.middlewareData = middlewareData;\n    this.computedPlacement = placement;\n\n    Object.assign(this.contentElement.style, {\n      position: strategy,\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    Object.assign(this.arrowElement.style, {\n      left: x != null ? `${middlewareData.arrow.x}px` : \"\",\n      top: y != null ? `${middlewareData.arrow.y}px` : \"\",\n    });\n  }\n\n  private onClickTrigger = () => {\n    if (this.hasTrigger(\"click\")) {\n      this.toggle();\n    }\n  }\n\n  private onMouseEnterTrigger = () => {\n    if (this.hasTrigger(\"hover\")) {\n      this.isHovering = true;\n      this.show();\n    }\n  }\n\n  private onMouseLeaveTrigger = () => {\n    if (this.hasTrigger(\"hover\")) {\n      this.isHovering = false;\n      document.addEventListener(\"mousemove\", this.onMouseMoveDocument);\n    }\n  }\n\n  private onFocusTrigger = () => {\n    if (this.hasTrigger(\"focus\")) {\n      this.show();\n    }\n  }\n\n  private onBlurTrigger = () => {\n    if (this.hasTrigger(\"focus\")) {\n      this.hide();\n    }\n  }\n\n  private onMouseMoveDocument = (event: MouseEvent) => {\n    const { clientX, clientY } = event;\n\n    if (!this.computedPlacement) {\n      return true;\n    }\n\n    const basePlacement = this.computedPlacement.split(\"-\")[0];\n    const offsetData = this.middlewareData.offset;\n    const popperRect = this.contentElement.getBoundingClientRect();\n\n    if (!offsetData) {\n      return true;\n    }\n\n    const topDistance = basePlacement === \"bottom\" ? offsetData.y : 0;\n    const bottomDistance = basePlacement === \"top\" ? offsetData.y : 0;\n    const leftDistance = basePlacement === \"right\" ? offsetData.x : 0;\n    const rightDistance = basePlacement === \"left\" ? offsetData.x : 0;\n\n    const exceedsTop =\n      popperRect.top - clientY > topDistance;\n    const exceedsBottom =\n      clientY - popperRect.bottom > bottomDistance;\n    const exceedsLeft =\n      popperRect.left - clientX > leftDistance;\n    const exceedsRight =\n      clientX - popperRect.right > rightDistance;\n\n    if (exceedsTop || exceedsBottom || exceedsLeft || exceedsRight) {\n      document.removeEventListener(\"mousemove\", this.onMouseMoveDocument);\n\n      if (!this.isHovering) {\n        this.hide();\n      }\n    }\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-tooltip-${tooltipCounter++}`;\n\n    this.triggerWatcher(this.trigger);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"tooltip\");\n    }\n  }\n\n  componentDidRender() {\n    this.computePosition();\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    if (this.hasTrigger(\"click\")) {\n      this.triggerFirstElement\n        .setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", this.open ? \"true\" : \"false\");\n\n      if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\"))\n        || (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n      ) {\n        this.triggerFirstElement\n          .setAttribute(isStzh ? \"a11y-describedby\" : \"aria-describedby\", `${this.id}-trigger-description`);\n      }\n\n      if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\"))\n        || (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n      ) {\n        this.triggerFirstElement\n          .setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n      }\n\n      if ((isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\"))\n        || (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n      ) {\n        this.triggerFirstElement\n          .setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n      }\n    } else {\n      if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\"))\n        || (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n      ) {\n        this.triggerFirstElement\n          .setAttribute(isStzh ? \"a11y-describedby\" : \"aria-describedby\", `${this.id}-content`);\n      }\n    }\n\n    if (this.trap) {\n      this.open ? this.trap.activate() : this.trap.deactivate();\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.trap) {\n      this.trap.updateContainerElements(this.contentElement);\n    }\n  }\n\n  componentDidLoad() {\n    this.autoUpdateCleanup = autoUpdate(\n      this.element,\n      this.contentElement,\n      this.computePosition\n    );\n\n    if (this.interactive) {\n      this.trap = createFocusTrap(this.contentElement, {\n        fallbackFocus: this.contentElement,\n        clickOutsideDeactivates: true,\n        returnFocusOnDeactivate: true\n      });\n\n      if (this.open) {\n        this.trap.activate();\n      }\n    }\n\n    this.contentElement.hidden = !this.open;\n  }\n\n  connectedCallback() {\n    let trigger = this.triggerElement?.firstElementChild;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children)\n        .find(child => !child.hasAttribute('slot'))\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      this.triggerFirstElement = trigger as HTMLElement;\n\n      trigger.addEventListener(\"click\", this.onClickTrigger);\n      trigger.addEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n      trigger.addEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n      trigger.addEventListener(\"focusin\", this.onFocusTrigger);\n      trigger.addEventListener(\"focusout\", this.onBlurTrigger);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n\n    if (this.triggerFirstElement) {\n      this.triggerFirstElement.removeEventListener(\"click\", this.onClickTrigger);\n      this.triggerFirstElement.removeEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n      this.triggerFirstElement.removeEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n      this.triggerFirstElement.removeEventListener(\"focusin\", this.onFocusTrigger);\n      this.triggerFirstElement.removeEventListener(\"focusout\", this.onBlurTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-tooltip\": true,\n      [`stzh-tooltip--open`]: this.open,\n      [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div\n            class=\"stzh-tooltip__trigger\"\n            ref={(el) => (this.triggerElement = el as HTMLDivElement)}\n          >\n            <slot></slot>\n          </div>\n          {this.hasTrigger(\"click\") &&\n            <div class=\"stzh-tooltip__vhidden\" id={`${this.id}-trigger-description`}>\n              {this.localization.open}\n            </div>\n          }\n          <div\n            class=\"stzh-tooltip__content\"\n            id={`${this.id}-content`}\n            ref={(el) => (this.contentElement = el as HTMLDivElement)}\n            tabindex=\"-1\"\n            aria-labelledby={this.label ? `${this.id}-label` : null}\n            aria-hidden={this.open ? \"false\" : \"true\"}\n            onKeyDown={this.onEscKey}\n            onMouseEnter={this.onMouseEnterTrigger}\n            onMouseLeave={this.onMouseLeaveTrigger}\n            onFocusin={this.onFocusTrigger}\n            onFocusout={this.onBlurTrigger}\n          >\n            <div\n              class=\"stzh-tooltip__arrow\"\n              ref={(el) => (this.arrowElement = el as HTMLDivElement)}\n              innerHTML={Arrow}\n            ></div>\n            {this.label &&\n              <h2 id={`${this.id}-label`} class=\"stzh-tooltip__vhidden\">\n                {this.label}\n              </h2>\n            }\n            {this.hasTrigger(\"click\") &&\n              <button\n                class=\"stzh-tooltip__close\"\n                onClick={() => this.hide()}\n                type=\"button\"\n              >\n                <stzh-icon name=\"close\" class=\"stzh-tooltip__icon\"></stzh-icon>\n                <span class=\"stzh-tooltip__vhidden\">{this.localization.close}</span>\n              </button>\n            }\n            <stzh-text curve=\"none\" class=\"stzh-tooltip__content-slot\">\n              {this.content ? this.content : <slot name=\"content\"></slot>}\n            </stzh-text>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}