@oiz/stzh-components 2.7.0 → 2.8.0-beta

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

@@ -0,0 +1 @@
+{"file":"stzh-richtext.stzh-status.entry.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,s46BAAs46B;;ACQ956B,MAAM,mBAAmB,GAAG,8BAA8B,CAAC;AAC3D,MAAM,2BAA2B,GAAG,sCAAsC,CAAC;AAC3E,MAAM,mBAAmB,GAAG,8BAA8B,CAAC;AAC3D,MAAM,sBAAsB,GAAG,iCAAiC,CAAC;MAYpD,YAAY;;;;6BAK+B,IAAI;4BAGL,IAAI;gCAGlB,0CAA0C;4BAG9C,eAAe;;EAM1C,oBAAoB;IAC1B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY;MACrC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;MAEhD,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;MACxD,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;MACvD,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAAC;MAE1E,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;MACnD,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;MAEvD,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;MACjD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;MACxC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC;MAClC,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;MAE9B,YAAY,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;MACvC,YAAY,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;KACvC,CAAC,CAAC;GACJ;EAED,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;KACvE;GACF;EAED,kBAAkB;IAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAC1F,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAC7B;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,eAAe,EAAE,IAAI;KACtB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;ACvFH,MAAM,aAAa,GAAG,+oDAA+oD;;MCexpD,UAAU;;;mBAEK,CAAC;0BAGwB,KAAK;iBAGhC,EAAE;gBAG4D,SAAS;;EAI/F,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;MACnB,CAAC,qBAAqB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;KAChD,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,mBAAmB,IAC5B,WAAK,KAAK,EAAC,kBAAkB,GAAO,EACnC,IAAI,CAAC,KAAK;MACT,WAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,KAAK,CACP,CAEJ,EACL,IAAI,CAAC,cAAc;MAClB,WAAK,KAAK,EAAC,kBAAkB,IAC3B,WAAK,KAAK,EAAC,wBAAwB,EAAC,KAAK,EAAE;UACzC,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,GAAG;SAC1B,GAAQ,CACL,CAEJ,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/stzh-richtext/stzh-richtext.scss?tag=stzh-richtext&encapsulation=scoped","./src/components/stzh-richtext/stzh-richtext.tsx","./src/components/stzh-status/stzh-status.scss?tag=stzh-status&encapsulation=scoped","./src/components/stzh-status/stzh-status.tsx"],"sourcesContent":[":host {\n  @include richtext-host;\n\n  ::slotted(*) {\n    @include richtext-slotted;\n  }\n\n  &[remove-first-margin]:not([remove-first-margin=\"false\"]) ::slotted(*:first-child) {\n    margin-top: 0 !important;\n  }\n\n  &[remove-last-margin]:not([remove-last-margin=\"false\"]) ::slotted(*:last-child) {\n    margin-bottom: 0 !important;\n  }\n}\n\n.stzh-richtext {\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element\n} from \"@stencil/core\";\n\nconst CLASS_EXTERNAL_LINK = 'stzh-richtext__external-link';\nconst CLASS_EXTERNAL_ICON_WRAPPER = 'stzh-richtext__external-icon-wrapper';\nconst CLASS_EXTERNAL_ICON = 'stzh-richtext__external-icon';\nconst CLASS_EXTERNAL_VHIDDEN = 'stzh-richtext__external-vhidden';\n\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Text content that should be styled\n */\n@Component({\n  tag: \"stzh-richtext\",\n  styleUrl: \"stzh-richtext.scss\",\n  scoped: true\n})\nexport class StzhRichtext {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether first top margin of first child should be set to 0. */\n  @Prop({ reflect: true }) removeFirstMargin: boolean = true;\n\n  /** Whether last bottom margin of last child should be set to 0. */\n  @Prop({ reflect: true }) removeLastMargin: boolean = true;\n\n  /** Selector to recognize external link and attach an icon */\n  @Prop() externalLinkSelector: string = 'a[rel*=\"external\"], a.external, a.extern';\n\n  /** Icon used for marking external links */\n  @Prop() externalLinkIcon: string = 'external-link';\n\n  @Element() element: HTMLStzhRichtextElement;\n\n  private externalLinks: HTMLElement[];\n\n  private addExternalLinkIcons() {\n    this.externalLinks.forEach(externalLink => {\n      externalLink.classList.add(CLASS_EXTERNAL_LINK);\n\n      const screenreaderText = document.createElement('span');\n      screenreaderText.classList.add(CLASS_EXTERNAL_VHIDDEN);\n      screenreaderText.innerText = this.localization.$globals.externalLinkLabel;\n\n      const iconWrapper = document.createElement('span');\n      iconWrapper.classList.add(CLASS_EXTERNAL_ICON_WRAPPER);\n\n      const icon = document.createElement('stzh-icon');\n      icon.classList.add(CLASS_EXTERNAL_ICON);\n      icon.name = this.externalLinkIcon;\n      iconWrapper.appendChild(icon);\n\n      externalLink.prepend(screenreaderText);\n      externalLink.appendChild(iconWrapper);\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"richtext\");\n    }\n  }\n\n  componentDidRender() {\n    this.externalLinks = Array.from(this.element.querySelectorAll(this.externalLinkSelector));\n    this.addExternalLinkIcons();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-richtext\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --color: #{$baseColor};\n  --min-width: none;\n\n  &[with-loadingbar]:not([with-loadingbar=\"false\"]) {\n    --min-width: 160px;\n  }\n\n  &[type=\"success\"] {\n    --color: #{$colorTruegreen};\n  }\n\n  &[type=\"warning\"] {\n    --color: #{$colorWarning};\n  }\n\n  &[type=\"error\"] {\n    --color: #{$colorError};\n  }\n\n  &[type=\"info\"] {\n    --color: #{$colorZueriblue};\n  }\n}\n\n.stzh-status {\n  min-width: var(--min-width);\n  color: var(--color);\n\n  &__dot {\n    border-radius: 50%;\n    width: 12px;\n    height: 12px;\n    background-color: currentColor;\n    margin-right: space('xxsmall');\n  }\n\n  &__bar {\n    display: block;\n    height: 4px;\n    border-radius: 12px;\n    background-color: $colorGrey13;\n    margin-top: space('xxsmall');\n  }\n\n  &__bar-inner {\n    display: block;\n    height: 100%;\n    width: 0;\n    border-radius: 12px;\n    background: currentColor;\n  }\n\n  &__text {\n    @include fontSize('micro');\n    display: flex;\n    align-items: center;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n */\n@Component({\n  tag: \"stzh-status\",\n  styleUrl: \"stzh-status.scss\",\n  scoped: true\n})\nexport class StzhStatus {\n  /** Percent */\n  @Prop() percent: number = 0;\n\n  /** Whether to hide/show loadingbar */\n  @Prop({ reflect: true }) withLoadingbar: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  @Element() element: HTMLStzhStatusElement;\n\n  render() {\n    const classes = {\n      \"stzh-status\": true,\n      [`stzh-status--type-${this.type}`]: !!this.type\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-status__text\">\n            <div class=\"stzh-status__dot\"></div>\n            {this.label &&\n              <div class=\"stzh-status__label\">\n                {this.label}\n              </div>\n            }\n          </div>\n          {this.withLoadingbar &&\n            <div class=\"stzh-status__bar\">\n              <div class=\"stzh-status__bar-inner\" style={{\n                width: `${this.percent}%`\n              }}></div>\n            </div>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-row.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, a as Host } from './index-67fd55c9.js';
 
-const stzhRowCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host{width:100%}:host::after{content:\"\";display:table;clear:both}:host([span=\"1\"]) ::slotted(stzh-cell:not([span])){--cell-width:8.3333333333%}:host([span=\"2\"]) ::slotted(stzh-cell:not([span])){--cell-width:16.6666666667%}:host([span=\"3\"]) ::slotted(stzh-cell:not([span])){--cell-width:25%}:host([span=\"4\"]) ::slotted(stzh-cell:not([span])){--cell-width:33.3333333333%}:host([span=\"5\"]) ::slotted(stzh-cell:not([span])){--cell-width:41.6666666667%}:host([span=\"6\"]) ::slotted(stzh-cell:not([span])){--cell-width:50%}:host([span=\"7\"]) ::slotted(stzh-cell:not([span])){--cell-width:58.3333333333%}:host([span=\"8\"]) ::slotted(stzh-cell:not([span])){--cell-width:66.6666666667%}:host([span=\"9\"]) ::slotted(stzh-cell:not([span])){--cell-width:75%}:host([span=\"10\"]) ::slotted(stzh-cell:not([span])){--cell-width:83.3333333333%}:host([span=\"11\"]) ::slotted(stzh-cell:not([span])){--cell-width:91.6666666667%}:host([span=\"12\"]) ::slotted(stzh-cell:not([span])){--cell-width:100%}@media screen and (min-width: 600px){:host([span-small=\"1\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:8.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"2\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:16.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"3\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:25%}}@media screen and (min-width: 600px){:host([span-small=\"4\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:33.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"5\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:41.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"6\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:50%}}@media screen and (min-width: 600px){:host([span-small=\"7\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:58.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"8\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:66.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"9\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:75%}}@media screen and (min-width: 600px){:host([span-small=\"10\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:83.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"11\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:91.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"12\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:100%}}@media screen and (min-width: 800px){:host([span-smallheader=\"1\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:8.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"2\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:16.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"3\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:25%}}@media screen and (min-width: 800px){:host([span-smallheader=\"4\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:33.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"5\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:41.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"6\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:50%}}@media screen and (min-width: 800px){:host([span-smallheader=\"7\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:58.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"8\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:66.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"9\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:75%}}@media screen and (min-width: 800px){:host([span-smallheader=\"10\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:83.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"11\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:91.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"12\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:100%}}@media screen and (min-width: 1024px){:host([span-medium=\"1\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:8.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"2\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:16.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"3\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:25%}}@media screen and (min-width: 1024px){:host([span-medium=\"4\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:33.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"5\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:41.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"6\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:50%}}@media screen and (min-width: 1024px){:host([span-medium=\"7\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:58.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"8\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:66.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"9\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:75%}}@media screen and (min-width: 1024px){:host([span-medium=\"10\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:83.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"11\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:91.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"12\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:100%}}@media screen and (min-width: 1260px){:host([span-large=\"1\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:8.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"2\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:16.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"3\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:25%}}@media screen and (min-width: 1260px){:host([span-large=\"4\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:33.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"5\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:41.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"6\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:50%}}@media screen and (min-width: 1260px){:host([span-large=\"7\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:58.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"8\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:66.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"9\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:75%}}@media screen and (min-width: 1260px){:host([span-large=\"10\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:83.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"11\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:91.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"12\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:100%}}@media screen and (min-width: 1440px){:host([span-ultra=\"1\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:8.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"2\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:16.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"3\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:25%}}@media screen and (min-width: 1440px){:host([span-ultra=\"4\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:33.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"5\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:41.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"6\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:50%}}@media screen and (min-width: 1440px){:host([span-ultra=\"7\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:58.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"8\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:66.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"9\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:75%}}@media screen and (min-width: 1440px){:host([span-ultra=\"10\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:83.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"11\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:91.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"12\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:100%}}.stzh-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:start;justify-content:flex-start;margin-left:calc(var(--stzh-grid-gutter) / -2);margin-right:calc(var(--stzh-grid-gutter) / -2);}@media screen and (min-width: 600px){.stzh-row{margin-left:calc(var(--stzh-grid-gutter-small) / -2);margin-right:calc(var(--stzh-grid-gutter-small) / -2)}}@media screen and (min-width: 1024px){.stzh-row{margin-left:calc(var(--stzh-grid-gutter-medium) / -2);margin-right:calc(var(--stzh-grid-gutter-medium) / -2)}}.stzh-row--justify-end{-ms-flex-pack:end;justify-content:flex-end}.stzh-row--justify-center{-ms-flex-pack:center;justify-content:center}.stzh-row--justify-between{-ms-flex-pack:justify;justify-content:space-between}.stzh-row--justify-around{-ms-flex-pack:distribute;justify-content:space-around}.stzh-row--justify-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.stzh-row--items-end{-ms-flex-align:end;align-items:flex-end}.stzh-row--items-center{-ms-flex-align:center;align-items:center}.stzh-row--items-baseline{-ms-flex-align:baseline;align-items:baseline}.stzh-row--items-stretch{-ms-flex-align:stretch;align-items:stretch}.stzh-row--content-end{-ms-flex-line-pack:end;align-content:flex-end}.stzh-row--content-center{-ms-flex-line-pack:center;align-content:center}.stzh-row--content-between{-ms-flex-line-pack:justify;align-content:space-between}.stzh-row--content-around{-ms-flex-line-pack:distribute;align-content:space-around}.stzh-row--content-evenly{-ms-flex-line-pack:space-evenly;align-content:space-evenly}";
+const stzhRowCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host{width:100%}:host([span=\"1\"]) ::slotted(stzh-cell:not([span])){--cell-width:8.3333333333%}:host([span=\"2\"]) ::slotted(stzh-cell:not([span])){--cell-width:16.6666666667%}:host([span=\"3\"]) ::slotted(stzh-cell:not([span])){--cell-width:25%}:host([span=\"4\"]) ::slotted(stzh-cell:not([span])){--cell-width:33.3333333333%}:host([span=\"5\"]) ::slotted(stzh-cell:not([span])){--cell-width:41.6666666667%}:host([span=\"6\"]) ::slotted(stzh-cell:not([span])){--cell-width:50%}:host([span=\"7\"]) ::slotted(stzh-cell:not([span])){--cell-width:58.3333333333%}:host([span=\"8\"]) ::slotted(stzh-cell:not([span])){--cell-width:66.6666666667%}:host([span=\"9\"]) ::slotted(stzh-cell:not([span])){--cell-width:75%}:host([span=\"10\"]) ::slotted(stzh-cell:not([span])){--cell-width:83.3333333333%}:host([span=\"11\"]) ::slotted(stzh-cell:not([span])){--cell-width:91.6666666667%}:host([span=\"12\"]) ::slotted(stzh-cell:not([span])){--cell-width:100%}@media screen and (min-width: 600px){:host([span-small=\"1\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:8.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"2\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:16.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"3\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:25%}}@media screen and (min-width: 600px){:host([span-small=\"4\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:33.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"5\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:41.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"6\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:50%}}@media screen and (min-width: 600px){:host([span-small=\"7\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:58.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"8\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:66.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"9\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:75%}}@media screen and (min-width: 600px){:host([span-small=\"10\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:83.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"11\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:91.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"12\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:100%}}@media screen and (min-width: 800px){:host([span-smallheader=\"1\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:8.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"2\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:16.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"3\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:25%}}@media screen and (min-width: 800px){:host([span-smallheader=\"4\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:33.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"5\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:41.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"6\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:50%}}@media screen and (min-width: 800px){:host([span-smallheader=\"7\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:58.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"8\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:66.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"9\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:75%}}@media screen and (min-width: 800px){:host([span-smallheader=\"10\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:83.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"11\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:91.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"12\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:100%}}@media screen and (min-width: 1024px){:host([span-medium=\"1\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:8.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"2\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:16.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"3\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:25%}}@media screen and (min-width: 1024px){:host([span-medium=\"4\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:33.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"5\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:41.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"6\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:50%}}@media screen and (min-width: 1024px){:host([span-medium=\"7\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:58.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"8\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:66.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"9\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:75%}}@media screen and (min-width: 1024px){:host([span-medium=\"10\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:83.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"11\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:91.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"12\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:100%}}@media screen and (min-width: 1260px){:host([span-large=\"1\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:8.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"2\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:16.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"3\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:25%}}@media screen and (min-width: 1260px){:host([span-large=\"4\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:33.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"5\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:41.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"6\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:50%}}@media screen and (min-width: 1260px){:host([span-large=\"7\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:58.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"8\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:66.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"9\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:75%}}@media screen and (min-width: 1260px){:host([span-large=\"10\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:83.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"11\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:91.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"12\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:100%}}@media screen and (min-width: 1440px){:host([span-ultra=\"1\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:8.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"2\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:16.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"3\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:25%}}@media screen and (min-width: 1440px){:host([span-ultra=\"4\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:33.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"5\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:41.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"6\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:50%}}@media screen and (min-width: 1440px){:host([span-ultra=\"7\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:58.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"8\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:66.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"9\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:75%}}@media screen and (min-width: 1440px){:host([span-ultra=\"10\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:83.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"11\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:91.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"12\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:100%}}.stzh-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:start;justify-content:flex-start;margin-left:calc(var(--stzh-grid-gutter) / -2);margin-right:calc(var(--stzh-grid-gutter) / -2);}@media screen and (min-width: 600px){.stzh-row{margin-left:calc(var(--stzh-grid-gutter-small) / -2);margin-right:calc(var(--stzh-grid-gutter-small) / -2)}}@media screen and (min-width: 1024px){.stzh-row{margin-left:calc(var(--stzh-grid-gutter-medium) / -2);margin-right:calc(var(--stzh-grid-gutter-medium) / -2)}}.stzh-row--justify-end{-ms-flex-pack:end;justify-content:flex-end}.stzh-row--justify-center{-ms-flex-pack:center;justify-content:center}.stzh-row--justify-between{-ms-flex-pack:justify;justify-content:space-between}.stzh-row--justify-around{-ms-flex-pack:distribute;justify-content:space-around}.stzh-row--justify-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.stzh-row--items-end{-ms-flex-align:end;align-items:flex-end}.stzh-row--items-center{-ms-flex-align:center;align-items:center}.stzh-row--items-baseline{-ms-flex-align:baseline;align-items:baseline}.stzh-row--items-stretch{-ms-flex-align:stretch;align-items:stretch}.stzh-row--content-end{-ms-flex-line-pack:end;align-content:flex-end}.stzh-row--content-center{-ms-flex-line-pack:center;align-content:center}.stzh-row--content-between{-ms-flex-line-pack:justify;align-content:space-between}.stzh-row--content-around{-ms-flex-line-pack:distribute;align-content:space-around}.stzh-row--content-evenly{-ms-flex-line-pack:space-evenly;align-content:space-evenly}";
 
 const StzhRow = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"stzh-row.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,koVAAkoV;;MCiBxoV,OAAO;;;gBAEK,EAAE;qBAEG,CAAC;sBAEA,CAAC;qBAEF,CAAC;qBAED,CAAC;mBAGsB,OAAO;iBAGX,OAAO;mBAGH,OAAO;;EAE1D,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,UAAU,EAAE,IAAI;QAChB,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACrD,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;QAC/C,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;OACtD,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/stzh-row/stzh-row.scss?tag=stzh-row&encapsulation=shadow","./src/components/stzh-row/stzh-row.tsx"],"sourcesContent":[":host {\n  @include clearfix;\n  width: 100%;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"])\n      ::slotted(stzh-cell:not([span-#{$breakpoint}])) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{100% / ($gridCells / $i)};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"])\n      ::slotted(stzh-cell:not([span])) {\n        --cell-width: #{100% / ($gridCells / $i)};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-row {\n  display: flex;\n\tflex-wrap: wrap;\n\tjustify-content: flex-start;\n  margin-left: calc(#{$gridGutter} / -2);\n  margin-right: calc(#{$gridGutter} / -2);\n\n  @include mq($from: small) {\n    margin-left: calc(#{$gridGutterSmall} / -2);\n    margin-right: calc(#{$gridGutterSmall} / -2);\n  }\n\n  @include mq($from: medium) {\n    margin-left: calc(#{$gridGutterMedium} / -2);\n    margin-right: calc(#{$gridGutterMedium} / -2);\n  }\n\n  /* Justify content variants */\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n\n  /* Align content variants */\n\n  &--content-end {\n    align-content: flex-end;\n  }\n\n  &--content-center {\n    align-content: center;\n  }\n\n  &--content-between {\n    align-content: space-between;\n  }\n\n  &--content-around {\n    align-content: space-around;\n  }\n\n  &--content-evenly {\n    align-content: space-evenly;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-cell` elements\n */\n@Component({\n  tag: \"stzh-row\",\n  styleUrl: \"stzh-row.scss\",\n  shadow: true\n})\nexport class StzhRow {\n  /** Default span of each cell */\n  @Prop() span: number = 12;\n  /** Default span of each cell above small breakpoint */\n  @Prop() spanSmall: number = 0;\n  /** Default span of each cell above medium breakpoint */\n  @Prop() spanMedium: number = 0;\n  /** Default span of each cell above large breakpoint */\n  @Prop() spanLarge: number = 0;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop() spanUltra: number = 0;\n\n  /** Controlling how cells are positioned along a container's main axis */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Utilities for controlling how rows are positioned in multi-row flex containers. */\n  @Prop({ reflect: true }) content: Layout.Justify = \"start\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-row\": true,\n            [`stzh-row--justify-${this.justify}`]: !!this.justify,\n            [`stzh-row--items-${this.items}`]: !!this.items,\n            [`stzh-row--content-${this.content}`]: !!this.content\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-row.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,+kVAA+kV;;MCiBrlV,OAAO;;;gBAEK,EAAE;qBAEG,CAAC;sBAEA,CAAC;qBAEF,CAAC;qBAED,CAAC;mBAGsB,OAAO;iBAGX,OAAO;mBAGH,OAAO;;EAE1D,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,UAAU,EAAE,IAAI;QAChB,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACrD,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;QAC/C,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;OACtD,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/stzh-row/stzh-row.scss?tag=stzh-row&encapsulation=shadow","./src/components/stzh-row/stzh-row.tsx"],"sourcesContent":[":host {\n  width: 100%;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"])\n      ::slotted(stzh-cell:not([span-#{$breakpoint}])) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{100% / ($gridCells / $i)};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"])\n      ::slotted(stzh-cell:not([span])) {\n        --cell-width: #{100% / ($gridCells / $i)};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-row {\n  display: flex;\n\tflex-wrap: wrap;\n\tjustify-content: flex-start;\n  margin-left: calc(#{$gridGutter} / -2);\n  margin-right: calc(#{$gridGutter} / -2);\n\n  @include mq($from: small) {\n    margin-left: calc(#{$gridGutterSmall} / -2);\n    margin-right: calc(#{$gridGutterSmall} / -2);\n  }\n\n  @include mq($from: medium) {\n    margin-left: calc(#{$gridGutterMedium} / -2);\n    margin-right: calc(#{$gridGutterMedium} / -2);\n  }\n\n  /* Justify content variants */\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n\n  /* Align content variants */\n\n  &--content-end {\n    align-content: flex-end;\n  }\n\n  &--content-center {\n    align-content: center;\n  }\n\n  &--content-between {\n    align-content: space-between;\n  }\n\n  &--content-around {\n    align-content: space-around;\n  }\n\n  &--content-evenly {\n    align-content: space-evenly;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-cell` elements\n */\n@Component({\n  tag: \"stzh-row\",\n  styleUrl: \"stzh-row.scss\",\n  shadow: true\n})\nexport class StzhRow {\n  /** Default span of each cell */\n  @Prop() span: number = 12;\n  /** Default span of each cell above small breakpoint */\n  @Prop() spanSmall: number = 0;\n  /** Default span of each cell above medium breakpoint */\n  @Prop() spanMedium: number = 0;\n  /** Default span of each cell above large breakpoint */\n  @Prop() spanLarge: number = 0;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop() spanUltra: number = 0;\n\n  /** Controlling how cells are positioned along a container's main axis */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Utilities for controlling how rows are positioned in multi-row flex containers. */\n  @Prop({ reflect: true }) content: Layout.Justify = \"start\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-row\": true,\n            [`stzh-row--justify-${this.justify}`]: !!this.justify,\n            [`stzh-row--items-${this.items}`]: !!this.items,\n            [`stzh-row--content-${this.content}`]: !!this.content\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-section.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, a as Host } from './index-67fd55c9.js';
 
-const stzhSectionCss = ".sc-stzh-section-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-section-h{display:none}.sc-stzh-section-h *.sc-stzh-section,.sc-stzh-section-h *.sc-stzh-section::before,.sc-stzh-section-h *.sc-stzh-section::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-section-h{clear:both;--background-color:var(--stzh-section-background-color)}.sc-stzh-section-h::after{content:\"\";display:table;clear:both}[variant=highlight].sc-stzh-section-h{--stzh-base-color:var(--stzh-color-grey61);--background-color:var(--stzh-section-highlight-background-color);--highlight-horizontal-padding:var(--stzh-section-highlight-horizontal-padding);--highlight-padding:var(--stzh-space-medium) var(--highlight-horizontal-padding)}@media screen and (min-width: 600px){[variant=highlight].sc-stzh-section-h{--highlight-padding:var(--stzh-space-medium) var(--highlight-horizontal-padding) var(--stzh-space-large)}}@media screen and (min-width: 1024px){[variant=highlight].sc-stzh-section-h{--highlight-padding:var(--stzh-space-large) var(--highlight-horizontal-padding) var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){[variant=highlight].sc-stzh-section-h{--highlight-padding:var(--stzh-space-xlarge) var(--highlight-horizontal-padding) var(--stzh-space-xxlarge)}}.stzh-section--highlight.sc-stzh-section{background-color:var(--background-color);padding:var(--highlight-padding)}";
+const stzhSectionCss = ".sc-stzh-section-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-section-h{display:none}.sc-stzh-section-h *.sc-stzh-section,.sc-stzh-section-h *.sc-stzh-section::before,.sc-stzh-section-h *.sc-stzh-section::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-section-h{--background-color:var(--stzh-section-background-color)}[variant=highlight].sc-stzh-section-h{--stzh-base-color:var(--stzh-color-grey61);--background-color:var(--stzh-section-highlight-background-color);--highlight-horizontal-padding:var(--stzh-section-highlight-horizontal-padding);--highlight-padding:var(--stzh-space-medium) var(--highlight-horizontal-padding)}@media screen and (min-width: 600px){[variant=highlight].sc-stzh-section-h{--highlight-padding:var(--stzh-space-medium) var(--highlight-horizontal-padding) var(--stzh-space-large)}}@media screen and (min-width: 1024px){[variant=highlight].sc-stzh-section-h{--highlight-padding:var(--stzh-space-large) var(--highlight-horizontal-padding) var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){[variant=highlight].sc-stzh-section-h{--highlight-padding:var(--stzh-space-xlarge) var(--highlight-horizontal-padding) var(--stzh-space-xxlarge)}}.stzh-section--highlight.sc-stzh-section{background-color:var(--background-color);padding:var(--highlight-padding)}";
 
 const StzhSection = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"stzh-section.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,0pDAA0pD;;MCepqD,WAAW;;;mBAEqB,SAAS;;EAEpD,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAS,KAAK,EAAE;QACd,cAAc,EAAE,IAAI;QACpB,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI;OACxC,IACC,eAAa,CACL,CACL,EACP;GACH;;;;;;","names":[],"sources":["./src/components/stzh-section/stzh-section.scss?tag=stzh-section&encapsulation=scoped","./src/components/stzh-section/stzh-section.tsx"],"sourcesContent":[":host {\n  @include clearfix;\n  clear: both;\n\n  --background-color: #{$sectionBgColor};\n\n  /* Highlight variant */\n\n  &[variant=\"highlight\"] {\n    --stzh-base-color: #{$sectionHighlightColor};\n    --background-color: #{$sectionHighlightBgColor};\n\n    --highlight-horizontal-padding: #{$sectionHighlightHorizontalPadding};\n    --highlight-padding: #{space('medium')} var(--highlight-horizontal-padding);\n\n    @include mq($from: small) {\n      --highlight-padding: #{space('medium')} var(--highlight-horizontal-padding) #{space('large')};\n    }\n\n    @include mq($from: medium) {\n      --highlight-padding: #{space('large')} var(--highlight-horizontal-padding) #{space('xlarge')};\n    }\n\n    @include mq($from: large) {\n      --highlight-padding: #{space('xlarge')} var(--highlight-horizontal-padding) #{space('xxlarge')};\n    }\n  }\n}\n\n.stzh-section {\n  &--highlight {\n    background-color: var(--background-color);\n    padding: var(--highlight-padding);\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  h,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-section\",\n  styleUrl: \"stzh-section.scss\",\n  scoped: true\n})\nexport class StzhSection {\n  /** Variant */\n  @Prop() variant: \"default\" | \"highlight\" = \"default\";\n\n  render() {\n    return (\n      <Host>\n        <section class={{\n          'stzh-section': true,\n          [`stzh-section--${this.variant}`]: true\n        }}>\n          <slot></slot>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-section.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,+kDAA+kD;;MCezlD,WAAW;;;mBAEqB,SAAS;;EAEpD,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAS,KAAK,EAAE;QACd,cAAc,EAAE,IAAI;QACpB,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI;OACxC,IACC,eAAa,CACL,CACL,EACP;GACH;;;;;;","names":[],"sources":["./src/components/stzh-section/stzh-section.scss?tag=stzh-section&encapsulation=scoped","./src/components/stzh-section/stzh-section.tsx"],"sourcesContent":[":host {\n  --background-color: #{$sectionBgColor};\n\n  /* Highlight variant */\n\n  &[variant=\"highlight\"] {\n    --stzh-base-color: #{$sectionHighlightColor};\n    --background-color: #{$sectionHighlightBgColor};\n\n    --highlight-horizontal-padding: #{$sectionHighlightHorizontalPadding};\n    --highlight-padding: #{space('medium')} var(--highlight-horizontal-padding);\n\n    @include mq($from: small) {\n      --highlight-padding: #{space('medium')} var(--highlight-horizontal-padding) #{space('large')};\n    }\n\n    @include mq($from: medium) {\n      --highlight-padding: #{space('large')} var(--highlight-horizontal-padding) #{space('xlarge')};\n    }\n\n    @include mq($from: large) {\n      --highlight-padding: #{space('xlarge')} var(--highlight-horizontal-padding) #{space('xxlarge')};\n    }\n  }\n}\n\n.stzh-section {\n  &--highlight {\n    background-color: var(--background-color);\n    padding: var(--highlight-padding);\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  h,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-section\",\n  styleUrl: \"stzh-section.scss\",\n  scoped: true\n})\nexport class StzhSection {\n  /** Variant */\n  @Prop() variant: \"default\" | \"highlight\" = \"default\";\n\n  render() {\n    return (\n      <Host>\n        <section class={{\n          'stzh-section': true,\n          [`stzh-section--${this.variant}`]: true\n        }}>\n          <slot></slot>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,25 +1,12 @@
 import { r as registerInstance, h, a as Host, g as getElement } from './index-67fd55c9.js';
 import { f as fetchTranslations } from './translation-utils-2623783f.js';
+import { g as getMeta } from './utils-8f264f12.js';
+import { b as abbreviateText } from './string-utils-3ffa8d6b.js';
 
 const stzhShareCss = ".sc-stzh-share-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-share-h{display:none}.sc-stzh-share-h *.sc-stzh-share,.sc-stzh-share-h *.sc-stzh-share::before,.sc-stzh-share-h *.sc-stzh-share::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.stzh-share__list.sc-stzh-share{list-style:none;margin:0;padding:0;display:-ms-flexbox;display:flex}.stzh-share__item.sc-stzh-share:not(:last-child){margin-right:var(--stzh-space-small)}.stzh-share__icon.sc-stzh-share{--size:var(--stzh-icon-size-xsmall)}.stzh-share__button.sc-stzh-share{color:var(--stzh-color-white);border-radius:var(--stzh-button-border-radius);display:grid;place-items:center;width:2.875rem;height:1.625rem}.stzh-share__button.is-facebook.sc-stzh-share{background-color:#3b5998}.stzh-share__button.is-facebook.sc-stzh-share:hover{background-color:#23355B}.stzh-share__button.is-twitter.sc-stzh-share{background-color:#1da1f2}.stzh-share__button.is-twitter.sc-stzh-share:hover{background-color:#116091}.stzh-share__button.is-linkedin.sc-stzh-share{background-color:#1485BD}.stzh-share__button.is-linkedin.sc-stzh-share:hover{background-color:#0C4F71}.stzh-share__button.is-xing.sc-stzh-share{background-color:#0E7574}.stzh-share__button.is-xing.sc-stzh-share:hover{background-color:#084645}.stzh-share__button.is-mail.sc-stzh-share{background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-share__button.is-mail.sc-stzh-share:hover{background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}";
 
-const abbreviateText = function (text, length) {
-  if (text.length <= length) {
-    return text;
-  }
-  var lastWhitespaceIndex = text.substring(0, length - 1).lastIndexOf(' ');
-  if (lastWhitespaceIndex) {
-    return text.substring(0, lastWhitespaceIndex) + '\u2026';
-  }
-  else {
-    return text.substring(0, length - 1);
-  }
-};
-// returns content of <meta name="" content=""> tags or '' if empty/non existant
-const getMeta = function (name) {
-  const meta = document.querySelector(`meta[name="${name}"],[property="${name}"]`);
-  return meta ? meta.getAttribute("content") : "";
-};
+// 280 - URL (always 24) = 256
+const MAX_TWEET_LENGTH = 256;
 const StzhShare = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -57,9 +44,8 @@ const StzhShare = class {
     const mailSubject = encodeURIComponent(this.localization.mailSubject);
     const mailBody = encodeURIComponent((_a = this.localization.mailBody) === null || _a === void 0 ? void 0 : _a.replace(/\{shareUrl\}/gi, this.url));
     const title = encodeURIComponent(document.title);
+    const twitterTitle = encodeURIComponent(abbreviateText(title, MAX_TWEET_LENGTH));
     const description = encodeURIComponent(getMeta("description"));
-    // 280 - URL (always 24) = 256
-    const maxTweetLength = 256;
     const serviceData = {
       "facebook": {
         popup: true,
@@ -71,7 +57,7 @@ const StzhShare = class {
       "twitter": {
         popup: true,
         blank: true,
-        url: `https://twitter.com/intent/tweet?text=${abbreviateText(title, maxTweetLength)}&url=${shareUrl}`,
+        url: `https://twitter.com/intent/tweet?text=${twitterTitle}&url=${shareUrl}`,
         text: this.localization.shareTwitter,
         icon: "twitter-filled"
       },

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

@@ -1 +1 @@
-{"file":"stzh-share.entry.js","mappings":"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","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: #1da1f2;\n$shareColorTwitterHover: #116091;\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\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 { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhShareLocalizedText } from \"./stzh-share.localization\"\n\nconst abbreviateText = function(text, length) {\n  if (text.length <= length) {\n    return text;\n  }\n\n  var lastWhitespaceIndex = text.substring(0, length - 1).lastIndexOf(' ');\n\n  if (lastWhitespaceIndex) {\n    return text.substring(0, lastWhitespaceIndex) + '\\u2026';\n  } else {\n    return text.substring(0, length - 1);\n  }\n}\n\n// returns content of <meta name=\"\" content=\"\"> tags or '' if empty/non existant\nconst getMeta = function(name) {\n  const meta = document.querySelector(`meta[name=\"${name}\"],[property=\"${name}\"]`);\n  return meta ? meta.getAttribute(\"content\") : \"\";\n}\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  /**\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 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.localization.mailSubject);\n    const mailBody = encodeURIComponent(\n      this.localization.mailBody?.replace(/\\{shareUrl\\}/gi, this.url)\n    );\n\n    const title = encodeURIComponent(document.title);\n    const description = encodeURIComponent(getMeta(\"description\"));\n\n    // 280 - URL (always 24) = 256\n    const maxTweetLength = 256;\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-filled\"\n      },\n      \"twitter\": {\n        popup: true,\n        blank: true,\n        url: `https://twitter.com/intent/tweet?text=${abbreviateText(title, maxTweetLength)}&url=${shareUrl}`,\n        text: this.localization.shareTwitter,\n        icon: \"twitter-filled\"\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-filled\"\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-filled\"\n      },\n      \"mail\": {\n        popup: false,\n        blank: false,\n        url: `mailto:?subject=${mailSubject}&body=${mailBody}`,\n        text: this.localization.shareMail,\n        icon: \"mail-filled\"\n      }\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <ul class=\"stzh-share__list\">\n            {this._services.map((service) =>\n              <li class=\"stzh-share__item\">\n                <stzh-tooltip content={serviceData[service].text}>\n                  <a\n                    class={`stzh-share__button is-${service}`}\n                    href={serviceData[service].url}\n                    aria-label={serviceData[service].text}\n                    rel={serviceData[service].blank ? \"nofollow noopener noreferrer\" : \"nofollow\"}\n                    target={serviceData[service].blank ? \"_blank\" : \"_self\"}\n                    onClick={serviceData[service].popup ? (e) => this.openPopup(serviceData[service].url, e) : null}\n                    s-object-id={serviceData[service].text}\n                  >\n                    <stzh-icon class=\"stzh-share__icon\" name={serviceData[service].icon}></stzh-icon>\n                  </a>\n                </stzh-tooltip>\n              </li>\n            )}\n          </ul>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-share.entry.js","mappings":"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","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: #1da1f2;\n$shareColorTwitterHover: #116091;\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\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 { fetchTranslations } from \"../../utils/translation-utils\";\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  /**\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 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.localization.mailSubject);\n    const mailBody = encodeURIComponent(\n      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-filled\"\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-filled\"\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-filled\"\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-filled\"\n      },\n      \"mail\": {\n        popup: false,\n        blank: false,\n        url: `mailto:?subject=${mailSubject}&body=${mailBody}`,\n        text: this.localization.shareMail,\n        icon: \"mail-filled\"\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}