@oiz/stzh-components 4.5.0 → 4.6.0-beta1

package/dist/components/{p-368c4aa2.js → p-02c5b1ba.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-8f01554b.js';
 import { S as StzhSocialmediastreamItemActionVariant } from './p-f5779736.js';
-import { d as defineCustomElement$3 } from './p-5a8587ab.js';
-import { d as defineCustomElement$2 } from './p-527121ef.js';
-import { d as defineCustomElement$1 } from './p-9a31aa56.js';
+import { d as defineCustomElement$3 } from './p-7c4e756c.js';
+import { d as defineCustomElement$2 } from './p-36fb6c94.js';
+import { d as defineCustomElement$1 } from './p-63c4d8c4.js';
 
 const stzhSocialmediastreamItemCss = ":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],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}: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}.stzh-socialmediastream-item{display:block;background-color:var(--stzh-color-grey10);text-decoration:none;color:var(--stzh-color-grey80);}.stzh-socialmediastream-item:visited{color:var(--stzh-color-grey80)}.stzh-socialmediastream-item:hover{background-color:var(--stzh-color-secondary10);color:var(--stzh-color-black)}.stzh-socialmediastream-item__image{position:relative}.stzh-socialmediastream-item__ratio{--background-color:var(--image-background-color)}.stzh-socialmediastream-item__image-inner-wrapper{background-color:var(--image-background-color);position:absolute;inset:0;height:100%}.stzh-socialmediastream-item__image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.stzh-socialmediastream-item__content{padding:var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);display:flex;flex-direction:column;gap:var(--stzh-space-small)}.stzh-socialmediastream-item__content-head{display:flex;align-items:center}.stzh-socialmediastream-item__content-head stzh-icon{--color:var(--stzh-color-primary)}.stzh-socialmediastream-item__content-title{width:100%;--color:var(--stzh-color-grey80)}.stzh-socialmediastream-item:hover .stzh-socialmediastream-item__content-title{--color:var(--stzh-color-black)}.stzh-socialmediastream-item__content-body{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);--color:var(--stzh-color-grey80)}.stzh-socialmediastream-item__content-body a{word-wrap:break-word;color:var(--stzh-link-color)}.stzh-socialmediastream-item__content-body a:hover{color:var(--stzh-link-hover-color)}.stzh-socialmediastream-item__content-body a+a{margin-left:var(--stzh-space-xxsmall)}.stzh-socialmediastream-item__content-footer{display:flex;align-items:center;gap:var(--stzh-space-small)}.stzh-socialmediastream-item__action{text-decoration:none;font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);color:var(--stzh-link-color);display:flex;align-items:center;gap:var(--stzh-space-xxsmall);line-height:1}.stzh-socialmediastream-item__action:hover{color:var(--stzh-link-hover-color)}.stzh-socialmediastream-item__action stzh-icon{--size:1rem}";
 const StzhSocialmediastreamItemStyle0 = stzhSocialmediastreamItemCss;
@@ -81,7 +81,7 @@ const StzhSocialmediastreamItem = /*@__PURE__*/ proxyCustomElement(class StzhSoc
         const classes = {
             "stzh-socialmediastream-item": true,
         };
-        return (h(Host, { key: 'd3be8327a8166f58d97d2b8f5c66a542b34aba0b' }, h("a", { key: '11181a4a8f10414b15da6e5a635854ef59980f84', class: classes, href: this._item.link, target: "_blank" }, this._item.image && (h("div", { key: '4ed5430702a50008b01997e411175a0554e53622', class: "stzh-socialmediastream-item__image" }, h("stzh-ratio", { key: '0bfd90a4d5cb7bdf58d9dd09d7629709ffe13274', ratio: "1:1" }), h("div", { key: '5b2101a8fbf12e22de56d8e5b35bebb45033f97b', class: "stzh-socialmediastream-item__image-inner-wrapper" }, h("img", { key: '80a813a49539eb7780a4cfc36fae537316fea182', src: this._item.image, alt: this._item.account.title })))), h("div", { key: '8fce0eb2f57cae1b403a7b2d4b022d5c7e8d748b', class: "stzh-socialmediastream-item__content" }, h("div", { key: '7949ab547abe45b67a623dc2703d27b3973cecf1', class: "stzh-socialmediastream-item__content-head" }, h("stzh-text", { key: 'e6d52db80ef508c72bbf2c6cc365e72559a98bc8', size: "nano", class: "stzh-socialmediastream-item__content-title" }, h("strong", { key: 'cb763aa9a4d827ffc1781b1972fa7a0128a34b43' }, this._item.account.title), h("br", { key: 'd602e8ea46edcfec240e129a7bc2f1424d2ab68b' }), this.dateAdapter.format(this.getParsedDate(this._item.date), "dateInput")), h("stzh-icon", { key: '7a187adf9ef4ba2335a555169c480d64eca22410', name: this.getIconName(this._item) })), h("div", { key: '9468d052b21a0dcc603aafacb7f738f48733936f', class: "stzh-socialmediastream-item__content-body", innerHTML: this._item.text }), h("div", { key: '55ae3bef43d7c3710940eea457d03c44e4179e23', class: "stzh-socialmediastream-item__content-footer 1q23" }, this._item.actions &&
+        return (h(Host, { key: 'a2db53c89224f5db81b9aabcf1ee6375294d7446' }, h("a", { key: 'ca521339ebbbb64466275bb2ae17726607ec2178', class: classes, href: this._item.link, target: "_blank" }, this._item.image && (h("div", { key: '02b7ec3cc7ab92a2ecb59167f1a32721ece3405b', class: "stzh-socialmediastream-item__image" }, h("stzh-ratio", { key: '66111e4bb0e6daea944f7410a692560e42238b43', ratio: "1:1" }), h("div", { key: 'baa7fdba65b5a6144615c5349661708f9e3efdea', class: "stzh-socialmediastream-item__image-inner-wrapper" }, h("img", { key: '029b2d40c233eca33502f3369a4d37a2587acb87', src: this._item.image, alt: this._item.account.title })))), h("div", { key: '6928ef7b63c9e7026aeecc632aa84aaf51e0826c', class: "stzh-socialmediastream-item__content" }, h("div", { key: '7100f1db4726db79982da3c801dec9a77817c0eb', class: "stzh-socialmediastream-item__content-head" }, h("stzh-text", { key: '1bc8ad7d81fb8ad0fbdecd2a28190f695121d485', size: "nano", class: "stzh-socialmediastream-item__content-title" }, h("strong", { key: 'e11d2ea1c02376b23c9badc5858b246fcd3235b9' }, this._item.account.title), h("br", { key: '5e527a82280db5b1890836f26b04aa3439376759' }), this.dateAdapter.format(this.getParsedDate(this._item.date), "dateInput")), h("stzh-icon", { key: '1774cda6ba51958bec13cd4ba724cd513ebebc32', name: this.getIconName(this._item) })), h("div", { key: 'f7900847ad81fa65f625de40e839adf32433403b', class: "stzh-socialmediastream-item__content-body", innerHTML: this._item.text }), h("div", { key: '730c56fcf7d1bfac01dd18567c15021de211d77e', class: "stzh-socialmediastream-item__content-footer 1q23" }, this._item.actions &&
             this._item.actions.map(action => (h("a", { href: action.url, title: action.title, class: "stzh-socialmediastream-item__action", target: "_blank" }, h("stzh-icon", { name: this.getActionIconName(action.variant) }), action.count))))))));
     }
     get element() { return this; }
@@ -127,4 +127,4 @@ function defineCustomElement() {
 
 export { StzhSocialmediastreamItem as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-368c4aa2.js.map
+//# sourceMappingURL=p-02c5b1ba.js.map

package/dist/components/{p-368c4aa2.js.map → p-02c5b1ba.js.map}

@@ -1 +1 @@
-{"file":"p-368c4aa2.js","mappings":"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","names":[],"sources":["src/components/CMS/stzh-socialmediastream-item/stzh-socialmediastream-item.scss?tag=stzh-socialmediastream-item","src/components/CMS/stzh-socialmediastream-item/stzh-socialmediastream-item.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-socialmediastream-item {\n  display: block;\n  background-color: var(--stzh-color-grey10);\n  text-decoration: none;\n  color: var(--stzh-color-grey80);\n\n  &:visited {\n    color: var(--stzh-color-grey80);\n  }\n\n  &:hover {\n    background-color: var(--stzh-color-secondary10);\n    color: var(--stzh-color-black);\n  }\n\n  &__image {\n    position: relative;\n  }\n\n  &__ratio {\n    --background-color: var(--image-background-color);\n  }\n\n  &__image-inner-wrapper {\n    background-color: var(--image-background-color);\n    position: absolute;\n    inset: 0;\n    height: 100%;\n  }\n\n  &__image img {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  /* Content */\n\n  &__content {\n    padding: var(--stzh-space-xsmall) var(--stzh-space-medium)\n      var(--stzh-space-small);\n    display: flex;\n    flex-direction: column;\n    gap: var(--stzh-space-small);\n  }\n\n  /* Content head */\n\n  &__content-head {\n    display: flex;\n    align-items: center;\n  }\n\n  &__content-head stzh-icon {\n    --color: var(--stzh-color-primary);\n  }\n\n  &__content-title {\n    width: 100%;\n    --color: var(--stzh-color-grey80);\n  }\n\n  &:hover &__content-title {\n    --color: var(--stzh-color-black);\n  }\n\n  /* Content Body */\n\n  &__content-body {\n    @include font(medium);\n    @include fontSize(micro);\n    --color: var(--stzh-color-grey80);\n  }\n\n  &__content-body a {\n    word-wrap: break-word;\n    color: var(--stzh-link-color);\n\n    &:hover {\n      color: var(--stzh-link-hover-color);\n    }\n  }\n\n  &__content-body a + a {\n    margin-left: space(xxsmall);\n  }\n\n  /* Content Footer and Actions */\n\n  &__content-footer {\n    display: flex;\n    align-items: center;\n    gap: var(--stzh-space-small);\n  }\n\n  &__action {\n    text-decoration: none;\n    @include fontSize(pico);\n    color: var(--stzh-link-color);\n    display: flex;\n    align-items: center;\n    gap: var(--stzh-space-xxsmall);\n    line-height: 1;\n\n    &:hover {\n      color: var(--stzh-link-hover-color);\n    }\n  }\n\n  &__action stzh-icon {\n    --size: 16px;\n  }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport {\n  StzhLocaleAdapter,\n  StzhLocaleComponent,\n  StzhSocialmediastreamItemActionVariant,\n  StzhSocialmediastreamItemData,\n} from \"../../../index\";\n\n@Component({\n  tag: \"stzh-socialmediastream-item\",\n  styleUrl: \"stzh-socialmediastream-item.scss\",\n})\nexport class StzhSocialmediastreamItem {\n  @Element() element: HTMLStzhSocialmediastreamItemElement;\n\n  /** Socialmediastream item */\n  @Prop() item: StzhSocialmediastreamItemData | string = \"\";\n  private _item: StzhSocialmediastreamItemData | undefined;\n\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  @Watch(\"item\")\n  itemWatcher(newValue: StzhSocialmediastreamItemData | string) {\n    if (!newValue) {\n      this._item = undefined;\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._item = JSON.parse(newValue);\n      } catch (e) {\n        this._item = undefined;\n      }\n    } else {\n      this._item = newValue;\n    }\n  }\n\n  private init = () => {\n    this.itemWatcher(this.item);\n  };\n\n  private getIconName(item: StzhSocialmediastreamItemData) {\n    switch (item.channel) {\n      case \"facebook\":\n        return \"facebook\";\n      case \"twitter\":\n      case \"x\":\n        return \"twitter\";\n      case \"instagram\":\n        return \"instagram\";\n      case \"youtube\":\n        return \"youtube\";\n      default:\n        return \"warning\";\n    }\n  }\n\n  private getActionIconName(variant: StzhSocialmediastreamItemActionVariant) {\n    switch (variant) {\n      case StzhSocialmediastreamItemActionVariant.comments:\n        return \"facebook-comment\";\n      case StzhSocialmediastreamItemActionVariant.likes:\n        return \"like-hand\";\n      case StzhSocialmediastreamItemActionVariant.shares:\n        return \"share\";\n    }\n  }\n\n  private getParsedDate(dateStr: string): Date | null {\n    const parsedDate = new Date(dateStr);\n    if (isNaN(parsedDate.getTime())) {\n      return null;\n    }\n    return parsedDate;\n  }\n\n  connectedCallback() {\n    this.init();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"socialmediastream-item\");\n    }\n    if (!this.dateAdapter) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals,\n      );\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-socialmediastream-item\": true,\n    };\n\n    return (\n      <Host>\n        <a class={classes} href={this._item.link} target=\"_blank\">\n          {this._item.image && (\n            <div class=\"stzh-socialmediastream-item__image\">\n              <stzh-ratio ratio=\"1:1\"></stzh-ratio>\n              <div class=\"stzh-socialmediastream-item__image-inner-wrapper\">\n                <img src={this._item.image} alt={this._item.account.title} />\n              </div>\n            </div>\n          )}\n          <div class=\"stzh-socialmediastream-item__content\">\n            <div class=\"stzh-socialmediastream-item__content-head\">\n              <stzh-text size=\"nano\" class=\"stzh-socialmediastream-item__content-title\">\n                <strong>{this._item.account.title}</strong>\n                <br />\n                {this.dateAdapter.format(this.getParsedDate(this._item.date), \"dateInput\")}\n              </stzh-text>\n              <stzh-icon name={this.getIconName(this._item)}></stzh-icon>\n            </div>\n            <div class=\"stzh-socialmediastream-item__content-body\" innerHTML={this._item.text}></div>\n            <div class=\"stzh-socialmediastream-item__content-footer 1q23\">\n              {this._item.actions &&\n                this._item.actions.map(action => (\n                  <a href={action.url} title={action.title} class=\"stzh-socialmediastream-item__action\" target=\"_blank\">\n                    <stzh-icon name={this.getActionIconName(action.variant)}></stzh-icon>\n                    {action.count}\n                  </a>\n                ))}\n            </div>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-02c5b1ba.js","mappings":";;;;;;AAAA,MAAM,4BAA4B,GAAG,ipGAAipG,CAAC;AACvrG,wCAAe,4BAA4B;;MCW9B,yBAAyB;;;;QAgC5B,SAAI,GAAG;YACb,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC7B,CAAC;oBA9BqD,EAAE;;;;IAczD,WAAW,CAAC,QAAgD;QAC1D,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;SACxB;aAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YACvC,IAAI;gBACF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;aACnC;YAAC,OAAO,CAAC,EAAE;gBACV,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;aACxB;SACF;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;SACvB;KACF;IAMO,WAAW,CAAC,IAAmC;QACrD,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,UAAU;gBACb,OAAO,UAAU,CAAC;YACpB,KAAK,SAAS,CAAC;YACf,KAAK,GAAG;gBACN,OAAO,SAAS,CAAC;YACnB,KAAK,WAAW;gBACd,OAAO,WAAW,CAAC;YACrB,KAAK,SAAS;gBACZ,OAAO,SAAS,CAAC;YACnB;gBACE,OAAO,SAAS,CAAC;SACpB;KACF;IAEO,iBAAiB,CAAC,OAA+C;QACvE,QAAQ,OAAO;YACb,KAAK,sCAAsC,CAAC,QAAQ;gBAClD,OAAO,kBAAkB,CAAC;YAC5B,KAAK,sCAAsC,CAAC,KAAK;gBAC/C,OAAO,WAAW,CAAC;YACrB,KAAK,sCAAsC,CAAC,MAAM;gBAChD,OAAO,OAAO,CAAC;SAClB;KACF;IAEO,aAAa,CAAC,OAAe;QACnC,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;QACrC,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,EAAE;YAC/B,OAAO,IAAI,CAAC;SACb;QACD,OAAO,UAAU,CAAC;KACnB;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IAED,MAAM,iBAAiB;QACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,wBAAwB,CAAC,CAAC;SACjH;QACD,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,wBAAwB,CACrE,IAAI,CAAC,YAAY,CAAC,QAAQ,EAC1B,IAAI,CAAC,YAAY,CAAC,QAAQ,CAC3B,CAAC;SACH;KACF;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,6BAA6B,EAAE,IAAI;SACpC,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,0DAAG,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAC,QAAQ,IACtD,IAAI,CAAC,KAAK,CAAC,KAAK,KACf,4DAAK,KAAK,EAAC,oCAAoC,IAC7C,mEAAY,KAAK,EAAC,KAAK,GAAc,EACrC,4DAAK,KAAK,EAAC,kDAAkD,IAC3D,4DAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,GAAI,CACzD,CACF,CACP,EACD,4DAAK,KAAK,EAAC,sCAAsC,IAC/C,4DAAK,KAAK,EAAC,2CAA2C,IACpD,kEAAW,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4CAA4C,IACvE,iEAAS,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAU,EAC3C,4DAAM,EACL,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC,CAChE,EACZ,kEAAW,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,GAAc,CACvD,EACN,4DAAK,KAAK,EAAC,2CAA2C,EAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAQ,EACzF,4DAAK,KAAK,EAAC,kDAAkD,IAC1D,IAAI,CAAC,KAAK,CAAC,OAAO;YACjB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KAC3B,SAAG,IAAI,EAAE,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,EAAC,qCAAqC,EAAC,MAAM,EAAC,QAAQ,IACnG,iBAAW,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,OAAO,CAAC,GAAc,EACpE,MAAM,CAAC,KAAK,CACX,CACL,CAAC,CACA,CACF,CACJ,CACC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/CMS/stzh-socialmediastream-item/stzh-socialmediastream-item.scss?tag=stzh-socialmediastream-item","src/components/CMS/stzh-socialmediastream-item/stzh-socialmediastream-item.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-socialmediastream-item {\n  display: block;\n  background-color: var(--stzh-color-grey10);\n  text-decoration: none;\n  color: var(--stzh-color-grey80);\n\n  &:visited {\n    color: var(--stzh-color-grey80);\n  }\n\n  &:hover {\n    background-color: var(--stzh-color-secondary10);\n    color: var(--stzh-color-black);\n  }\n\n  &__image {\n    position: relative;\n  }\n\n  &__ratio {\n    --background-color: var(--image-background-color);\n  }\n\n  &__image-inner-wrapper {\n    background-color: var(--image-background-color);\n    position: absolute;\n    inset: 0;\n    height: 100%;\n  }\n\n  &__image img {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  /* Content */\n\n  &__content {\n    padding: var(--stzh-space-xsmall) var(--stzh-space-medium)\n      var(--stzh-space-small);\n    display: flex;\n    flex-direction: column;\n    gap: var(--stzh-space-small);\n  }\n\n  /* Content head */\n\n  &__content-head {\n    display: flex;\n    align-items: center;\n  }\n\n  &__content-head stzh-icon {\n    --color: var(--stzh-color-primary);\n  }\n\n  &__content-title {\n    width: 100%;\n    --color: var(--stzh-color-grey80);\n  }\n\n  &:hover &__content-title {\n    --color: var(--stzh-color-black);\n  }\n\n  /* Content Body */\n\n  &__content-body {\n    @include font(medium);\n    @include fontSize(micro);\n    --color: var(--stzh-color-grey80);\n  }\n\n  &__content-body a {\n    word-wrap: break-word;\n    color: var(--stzh-link-color);\n\n    &:hover {\n      color: var(--stzh-link-hover-color);\n    }\n  }\n\n  &__content-body a + a {\n    margin-left: space(xxsmall);\n  }\n\n  /* Content Footer and Actions */\n\n  &__content-footer {\n    display: flex;\n    align-items: center;\n    gap: var(--stzh-space-small);\n  }\n\n  &__action {\n    text-decoration: none;\n    @include fontSize(pico);\n    color: var(--stzh-link-color);\n    display: flex;\n    align-items: center;\n    gap: var(--stzh-space-xxsmall);\n    line-height: 1;\n\n    &:hover {\n      color: var(--stzh-link-hover-color);\n    }\n  }\n\n  &__action stzh-icon {\n    --size: 16px;\n  }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport {\n  StzhLocaleAdapter,\n  StzhLocaleComponent,\n  StzhSocialmediastreamItemActionVariant,\n  StzhSocialmediastreamItemData,\n} from \"../../../index\";\n\n@Component({\n  tag: \"stzh-socialmediastream-item\",\n  styleUrl: \"stzh-socialmediastream-item.scss\",\n})\nexport class StzhSocialmediastreamItem {\n  @Element() element: HTMLStzhSocialmediastreamItemElement;\n\n  /** Socialmediastream item */\n  @Prop() item: StzhSocialmediastreamItemData | string = \"\";\n  private _item: StzhSocialmediastreamItemData | undefined;\n\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  @Watch(\"item\")\n  itemWatcher(newValue: StzhSocialmediastreamItemData | string) {\n    if (!newValue) {\n      this._item = undefined;\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._item = JSON.parse(newValue);\n      } catch (e) {\n        this._item = undefined;\n      }\n    } else {\n      this._item = newValue;\n    }\n  }\n\n  private init = () => {\n    this.itemWatcher(this.item);\n  };\n\n  private getIconName(item: StzhSocialmediastreamItemData) {\n    switch (item.channel) {\n      case \"facebook\":\n        return \"facebook\";\n      case \"twitter\":\n      case \"x\":\n        return \"twitter\";\n      case \"instagram\":\n        return \"instagram\";\n      case \"youtube\":\n        return \"youtube\";\n      default:\n        return \"warning\";\n    }\n  }\n\n  private getActionIconName(variant: StzhSocialmediastreamItemActionVariant) {\n    switch (variant) {\n      case StzhSocialmediastreamItemActionVariant.comments:\n        return \"facebook-comment\";\n      case StzhSocialmediastreamItemActionVariant.likes:\n        return \"like-hand\";\n      case StzhSocialmediastreamItemActionVariant.shares:\n        return \"share\";\n    }\n  }\n\n  private getParsedDate(dateStr: string): Date | null {\n    const parsedDate = new Date(dateStr);\n    if (isNaN(parsedDate.getTime())) {\n      return null;\n    }\n    return parsedDate;\n  }\n\n  connectedCallback() {\n    this.init();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"socialmediastream-item\");\n    }\n    if (!this.dateAdapter) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals,\n      );\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-socialmediastream-item\": true,\n    };\n\n    return (\n      <Host>\n        <a class={classes} href={this._item.link} target=\"_blank\">\n          {this._item.image && (\n            <div class=\"stzh-socialmediastream-item__image\">\n              <stzh-ratio ratio=\"1:1\"></stzh-ratio>\n              <div class=\"stzh-socialmediastream-item__image-inner-wrapper\">\n                <img src={this._item.image} alt={this._item.account.title} />\n              </div>\n            </div>\n          )}\n          <div class=\"stzh-socialmediastream-item__content\">\n            <div class=\"stzh-socialmediastream-item__content-head\">\n              <stzh-text size=\"nano\" class=\"stzh-socialmediastream-item__content-title\">\n                <strong>{this._item.account.title}</strong>\n                <br />\n                {this.dateAdapter.format(this.getParsedDate(this._item.date), \"dateInput\")}\n              </stzh-text>\n              <stzh-icon name={this.getIconName(this._item)}></stzh-icon>\n            </div>\n            <div class=\"stzh-socialmediastream-item__content-body\" innerHTML={this._item.text}></div>\n            <div class=\"stzh-socialmediastream-item__content-footer 1q23\">\n              {this._item.actions &&\n                this._item.actions.map(action => (\n                  <a href={action.url} title={action.title} class=\"stzh-socialmediastream-item__action\" target=\"_blank\">\n                    <stzh-icon name={this.getActionIconName(action.variant)}></stzh-icon>\n                    {action.count}\n                  </a>\n                ))}\n            </div>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-044c234a.js → p-109076c9.js}

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
 import { h as hasSlot } from './p-289f5de2.js';
 import { S as StzhInputDescription } from './p-a2148b9d.js';
-import { d as defineCustomElement$3 } from './p-5a8587ab.js';
-import { d as defineCustomElement$2 } from './p-6268e18b.js';
-import { d as defineCustomElement$1 } from './p-9a31aa56.js';
+import { d as defineCustomElement$3 } from './p-7c4e756c.js';
+import { d as defineCustomElement$2 } from './p-963d59bf.js';
+import { d as defineCustomElement$1 } from './p-63c4d8c4.js';
 
 const stzhCheckboxCss = ".sc-stzh-checkbox-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-checkbox-h,[stzh-hidden].sc-stzh-checkbox-h{display:none}.sc-stzh-checkbox-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-checkbox-h *.sc-stzh-checkbox,.sc-stzh-checkbox-h *.sc-stzh-checkbox::before,.sc-stzh-checkbox-h *.sc-stzh-checkbox::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-checkbox-h .has-focus.sc-stzh-checkbox{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-checkbox-h .stzh-fylingfocus-focused.sc-stzh-checkbox{outline-style:none !important}.sc-stzh-checkbox-h .stzh-fylingfocus-focused.sc-stzh-checkbox::-moz-focus-inner{border:0 !important}.sc-stzh-checkbox-h{--label-color:var(--stzh-checkbox-label-color, var(--stzh-base-color));--label-hover-color:var(\n    --stzh-checkbox-label-hover-color,\n    var(--stzh-color-primary70)\n  );--label-hover-checked-color:var(\n    --stzh-checkbox-label-hover-checked-color,\n    var(--stzh-color-primary90)\n  );--check-color:var(--stzh-checkbox-check-color, var(--stzh-color-primary));--invalid-color:var(--stzh-checkbox-invalid-color, var(--stzh-color-error60));--disabled-color:var(--stzh-checkbox-disabled-color, var(--stzh-color-grey50));display:inline-block}[disabled].sc-stzh-checkbox-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-checkbox.sc-stzh-checkbox{display:grid}.stzh-checkbox__marker-symbol.sc-stzh-checkbox{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-checkbox__marker-text.sc-stzh-checkbox{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-checkbox__description-wrapper.sc-stzh-checkbox{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox__description.sc-stzh-checkbox{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-checkbox__error.sc-stzh-checkbox{color:var(--stzh-color-error60)}.stzh-checkbox__error-list.sc-stzh-checkbox{list-style:none;margin:0;padding:0}.stzh-checkbox__description.sc-stzh-checkbox{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-checkbox__description-long.sc-stzh-checkbox{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-checkbox__description-long.sc-stzh-checkbox{margin-top:0}}.stzh-checkbox__description-long-popover.sc-stzh-checkbox{--width:auto;--max-width:27.3125rem}.stzh-checkbox__description-long-button.sc-stzh-checkbox{display:flex;justify-content:center;align-items:center;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-checkbox.sc-stzh-checkbox stzh-icon.stzh-checkbox__description-long-icon.sc-stzh-checkbox{--size:var(--stzh-icon-size-xsmall)}.stzh-checkbox--has-error.sc-stzh-checkbox .stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox--has-description.sc-stzh-checkbox .stzh-checkbox__description.sc-stzh-checkbox{margin-top:var(--stzh-space-xxxsmall)}.stzh-checkbox__field-wrapper.sc-stzh-checkbox{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:flex;-webkit-user-select:none;user-select:none;cursor:pointer}.stzh-checkbox__input.sc-stzh-checkbox{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;appearance:none;border-radius:var(--stzh-form-input-border-radius)}.stzh-checkbox__mark.sc-stzh-checkbox{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:var(--stzh-form-input-border-radius);display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed);position:relative}.stzh-checkbox__check.sc-stzh-checkbox{display:block;position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%, -50%) translateZ(0);will-change:opacity;opacity:0;transition:opacity 0.15s ease;pointer-events:none;mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath d='M10 15.172l9.192-9.193 1.415 1.414L10 18 3.636 11.636l1.414-1.414z'/%3E %3C/svg%3E\");mask-repeat:no-repeat;mask-position:center;mask-size:contain;background-color:var(--check-color)}.stzh-checkbox__label.sc-stzh-checkbox{--stzh-base-color:initial;display:inline-block;color:var(--label-color);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);line-height:1.5rem}.stzh-checkbox__label.sc-stzh-checkbox:empty{display:none}.stzh-checkbox__marker.sc-stzh-checkbox{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__label.sc-stzh-checkbox{color:var(--label-hover-color)}.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox{color:var(--label-hover-checked-color)}.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{background-color:var(--label-hover-checked-color)}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--label-hover-color)}.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--label-hover-checked-color)}.stzh-checkbox--is-checked.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{opacity:1}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{color:var(--invalid-color)}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{background-color:var(--invalid-color)}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--invalid-color)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__field-wrapper.sc-stzh-checkbox{cursor:not-allowed}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox{color:var(--stzh-color-grey60)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{color:var(--disabled-color);border-color:var(--disabled-color)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{background-color:var(--disabled-color)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__mark.sc-stzh-checkbox{background-color:var(--stzh-color-grey20)}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{background-color:var(--invalid-color)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{background-color:var(--disabled-color)}";
 const StzhCheckboxStyle0 = stzhCheckboxCss;
@@ -127,11 +127,11 @@ const StzhCheckbox = /*@__PURE__*/ proxyCustomElement(class StzhCheckbox extends
             "stzh-checkbox--is-disabled": this.disabled,
             "stzh-checkbox--is-checked": this.checked,
         };
-        return (h(Host, { key: '69135f85a8c98b7357977d1bcc894d40f6748d2e', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'c5eb48485626c99a362d702696ebc56c5f4b9f18', class: classes }, h("label", { key: '0702b60ae97eead51faa453d05834ba238fd2646', class: "stzh-checkbox__field-wrapper" }, h("input", { key: 'dc99be9c50f7d87fe3277d7d6cbe3ed0e69671af', class: "stzh-checkbox__input", ref: el => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { key: '6aa9a868e0dc70442e24cd1039f6faefb0f878b1', class: "stzh-checkbox__mark" }, h("div", { key: 'a95db0e4b2149688299e561c9d6e7d63f1bf2a25', class: "stzh-checkbox__check", "aria-hidden": "true" })), h("div", { key: 'f3fa499c7482fa3cdc75dc8a2c5b34c418af2a78', class: "stzh-checkbox__label" }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '49f150a1ed9f4a855b77e40327bdb3157aba88bd', class: "stzh-checkbox__marker" }, h("span", { key: '4dd6e8a1c4993fdc22b18a6bd424d68f942cb9c0', class: "stzh-checkbox__marker-symbol", "aria-hidden": "true" }, this.required
+        return (h(Host, { key: '405ef3c9c5c3e613e214eff95ccbb2bf244868e4', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '896827d5b531870193d71f40fcb5a8ee1ed63e6d', class: classes }, h("label", { key: 'ffe5f1ea705f59890d620dcaadfc25fa95570c25', class: "stzh-checkbox__field-wrapper" }, h("input", { key: '4a764662bdf9b4f3f58dad7af6079891fab23096', class: "stzh-checkbox__input", ref: el => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { key: '6f5530363f8a1e00f7529dfecf1bdc41ca70369c', class: "stzh-checkbox__mark" }, h("div", { key: 'e35ad44f2d7bf741ed14d30b57676a936fb1c0f1', class: "stzh-checkbox__check", "aria-hidden": "true" })), h("div", { key: 'e7a45c2e0e1117b97cd4d1f8c4c643a6c825ab28', class: "stzh-checkbox__label" }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '7568ecb3bfabcf8c80f505afc2c66aa4e193a8d3', class: "stzh-checkbox__marker" }, h("span", { key: '8cb60015dcb0001add1aa4c99273d2ceef3c56f3', class: "stzh-checkbox__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: 'c3668f8710f8ab20d4dfdbc7903a18812cb9c853', class: "stzh-checkbox__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '9d995ce3f36042512c5aae083e2203463ff9af5e', class: "stzh-checkbox__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText))))), (errorUsed || this.description || this.descriptionLong) && (h(StzhInputDescription, { key: '76c2c9f4451bd5b8833d3f873270a4c270a30e5d', classPrefix: "stzh-checkbox", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
+            : this.localization.$globals.optionalFieldText))))), (errorUsed || this.description || this.descriptionLong) && (h(StzhInputDescription, { key: 'aa8c6b17aa646e0801be413736160307160e34f2', classPrefix: "stzh-checkbox", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -188,4 +188,4 @@ function defineCustomElement() {
 
 export { StzhCheckbox as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-044c234a.js.map
+//# sourceMappingURL=p-109076c9.js.map

package/dist/components/{p-044c234a.js.map → p-109076c9.js.map}

@@ -1 +1 @@
-{"file":"p-044c234a.js","mappings":"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","names":[],"sources":["src/components/stzh-checkbox/stzh-checkbox.scss?tag=stzh-checkbox&encapsulation=scoped","src/components/stzh-checkbox/stzh-checkbox.tsx"],"sourcesContent":[":host {\n  --label-color: var(--stzh-checkbox-label-color, #{$baseColor});\n  --label-hover-color: var(\n    --stzh-checkbox-label-hover-color,\n    #{$colorPrimary70}\n  );\n  --label-hover-checked-color: var(\n    --stzh-checkbox-label-hover-checked-color,\n    #{$colorPrimary90}\n  );\n  --check-color: var(--stzh-checkbox-check-color, #{$colorPrimary});\n  --invalid-color: var(--stzh-checkbox-invalid-color, #{$colorError60});\n  --disabled-color: var(--stzh-checkbox-disabled-color, #{$colorGrey50});\n\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-checkbox {\n  @include input-description;\n  display: grid;\n\n  &__field-wrapper {\n    @include fontSize(\"milli\");\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    border: 2px solid $colorBlack;\n    background-color: $colorWhite;\n    width: 24px;\n    height: 24px;\n    flex-shrink: 0;\n    border-radius: $formInputBorderRadius;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: border-color $baseTransitionAnimationSpeed;\n    position: relative;\n  }\n\n  &__check {\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 100%;\n    height: 100%;\n    transform: translate(-50%, -50%) translateZ(0);\n    will-change: opacity;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n    pointer-events: none;\n\n    -webkit-mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n    mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n    -webkit-mask-repeat: no-repeat;\n    mask-repeat: no-repeat;\n    -webkit-mask-position: center;\n    mask-position: center;\n    -webkit-mask-size: contain;\n    mask-size: contain;\n\n    background-color: var(--check-color);\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    display: inline-block;\n    color: var(--label-color);\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space(\"small\");\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize(\"micro\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked ~ &__label {\n    color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark {\n    color: var(--label-hover-checked-color);\n  }\n\n  // icon\n  &__input:checked:hover ~ &__mark .stzh-checkbox__check {\n    background-color: var(--label-hover-checked-color);\n  }\n\n  &:hover &__mark,\n  &__input:checked ~ &__mark {\n    border-color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__mark {\n    border-color: var(--label-hover-checked-color);\n  }\n\n  &--is-checked .stzh-checkbox__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark {\n    color: var(--invalid-color);\n  }\n\n  // icon\n  &--is-invalid &__check {\n    background-color: var(--invalid-color);\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: var(--invalid-color);\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $colorGrey60;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    color: var(--disabled-color);\n    border-color: var(--disabled-color);\n  }\n\n  // icon\n  &--is-disabled &__check {\n    background-color: var(--disabled-color);\n  }\n\n  &--is-disabled &__mark {\n    background-color: $colorGrey20;\n  }\n\n  // hover styles for check icon for invalid\n  &--is-invalid &__input:checked:hover ~ &__mark .stzh-checkbox__check {\n    background-color: var(--invalid-color);\n  }\n\n  // hover styles for check icon for invalid\n  &--is-disabled &__input:checked:hover ~ &__mark .stzh-checkbox__check {\n    background-color: var(--disabled-color);\n  }\n}\n","import { Host, Component, Prop, Event, EventEmitter, Element, h, Watch, Listen } from \"@stencil/core\";\n\nimport { StzhCheckboxChangeEvent, StzhCheckboxFocusEvent, StzhCheckboxBlurEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet checkboxCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-checkbox\",\n  styleUrl: \"stzh-checkbox.scss\",\n  scoped: true,\n})\nexport class StzhCheckbox {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the checkbox is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Use the `description-long-title` slot or the `description` property instead.\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhCheckboxChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\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  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\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\n    this.stzhChange.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked,\n    });\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.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-checkbox\",\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-checkbox\",\n      originalEvent: event,\n    });\n  };\n\n  async componentWillLoad() {\n    this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n    this.errorWatcher(this.error);\n\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, \"checkbox\");\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, \"error\") || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-checkbox\": true,\n      \"stzh-checkbox--has-description\": descriptionUsed,\n      \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n      \"stzh-checkbox--has-error\": errorUsed,\n      \"stzh-checkbox--is-required\": this.required,\n      \"stzh-checkbox--is-invalid\": this.invalid || errorUsed,\n      \"stzh-checkbox--is-disabled\": this.disabled,\n      \"stzh-checkbox--is-checked\": this.checked,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-checkbox__field-wrapper\">\n            <input\n              class=\"stzh-checkbox__input\"\n              ref={el => (this.input = el as HTMLInputElement)}\n              type=\"checkbox\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              defaultChecked={this.defaultChecked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-checkbox__mark\">\n              <div class=\"stzh-checkbox__check\" aria-hidden=\"true\"></div>\n            </div>\n            <div class=\"stzh-checkbox__label\">\n              {this.label ? this.label : <slot></slot>}\n              {!this.hideOptional && (\n                <span class=\"stzh-checkbox__marker\">\n                  <span class=\"stzh-checkbox__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-checkbox__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n            </div>\n          </label>\n          {(errorUsed || this.description || this.descriptionLong) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-checkbox\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              descriptionLongTitle={this.descriptionLongTitle}\n              descriptionLongUsed={descriptionLongUsed}\n              moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-109076c9.js","mappings":"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","names":[],"sources":["src/components/stzh-checkbox/stzh-checkbox.scss?tag=stzh-checkbox&encapsulation=scoped","src/components/stzh-checkbox/stzh-checkbox.tsx"],"sourcesContent":[":host {\n  --label-color: var(--stzh-checkbox-label-color, #{$baseColor});\n  --label-hover-color: var(\n    --stzh-checkbox-label-hover-color,\n    #{$colorPrimary70}\n  );\n  --label-hover-checked-color: var(\n    --stzh-checkbox-label-hover-checked-color,\n    #{$colorPrimary90}\n  );\n  --check-color: var(--stzh-checkbox-check-color, #{$colorPrimary});\n  --invalid-color: var(--stzh-checkbox-invalid-color, #{$colorError60});\n  --disabled-color: var(--stzh-checkbox-disabled-color, #{$colorGrey50});\n\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-checkbox {\n  @include input-description;\n  display: grid;\n\n  &__field-wrapper {\n    @include fontSize(\"milli\");\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    border: 2px solid $colorBlack;\n    background-color: $colorWhite;\n    width: 24px;\n    height: 24px;\n    flex-shrink: 0;\n    border-radius: $formInputBorderRadius;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: border-color $baseTransitionAnimationSpeed;\n    position: relative;\n  }\n\n  &__check {\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 100%;\n    height: 100%;\n    transform: translate(-50%, -50%) translateZ(0);\n    will-change: opacity;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n    pointer-events: none;\n\n    -webkit-mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n    mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n    -webkit-mask-repeat: no-repeat;\n    mask-repeat: no-repeat;\n    -webkit-mask-position: center;\n    mask-position: center;\n    -webkit-mask-size: contain;\n    mask-size: contain;\n\n    background-color: var(--check-color);\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    display: inline-block;\n    color: var(--label-color);\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space(\"small\");\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize(\"micro\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked ~ &__label {\n    color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark {\n    color: var(--label-hover-checked-color);\n  }\n\n  // icon\n  &__input:checked:hover ~ &__mark .stzh-checkbox__check {\n    background-color: var(--label-hover-checked-color);\n  }\n\n  &:hover &__mark,\n  &__input:checked ~ &__mark {\n    border-color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__mark {\n    border-color: var(--label-hover-checked-color);\n  }\n\n  &--is-checked .stzh-checkbox__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark {\n    color: var(--invalid-color);\n  }\n\n  // icon\n  &--is-invalid &__check {\n    background-color: var(--invalid-color);\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: var(--invalid-color);\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $colorGrey60;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    color: var(--disabled-color);\n    border-color: var(--disabled-color);\n  }\n\n  // icon\n  &--is-disabled &__check {\n    background-color: var(--disabled-color);\n  }\n\n  &--is-disabled &__mark {\n    background-color: $colorGrey20;\n  }\n\n  // hover styles for check icon for invalid\n  &--is-invalid &__input:checked:hover ~ &__mark .stzh-checkbox__check {\n    background-color: var(--invalid-color);\n  }\n\n  // hover styles for check icon for invalid\n  &--is-disabled &__input:checked:hover ~ &__mark .stzh-checkbox__check {\n    background-color: var(--disabled-color);\n  }\n}\n","import { Host, Component, Prop, Event, EventEmitter, Element, h, Watch, Listen } from \"@stencil/core\";\n\nimport { StzhCheckboxChangeEvent, StzhCheckboxFocusEvent, StzhCheckboxBlurEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet checkboxCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-checkbox\",\n  styleUrl: \"stzh-checkbox.scss\",\n  scoped: true,\n})\nexport class StzhCheckbox {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the checkbox is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Use the `description-long-title` slot or the `description` property instead.\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhCheckboxChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\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  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\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\n    this.stzhChange.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked,\n    });\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.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-checkbox\",\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-checkbox\",\n      originalEvent: event,\n    });\n  };\n\n  async componentWillLoad() {\n    this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n    this.errorWatcher(this.error);\n\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, \"checkbox\");\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, \"error\") || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-checkbox\": true,\n      \"stzh-checkbox--has-description\": descriptionUsed,\n      \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n      \"stzh-checkbox--has-error\": errorUsed,\n      \"stzh-checkbox--is-required\": this.required,\n      \"stzh-checkbox--is-invalid\": this.invalid || errorUsed,\n      \"stzh-checkbox--is-disabled\": this.disabled,\n      \"stzh-checkbox--is-checked\": this.checked,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-checkbox__field-wrapper\">\n            <input\n              class=\"stzh-checkbox__input\"\n              ref={el => (this.input = el as HTMLInputElement)}\n              type=\"checkbox\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              defaultChecked={this.defaultChecked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-checkbox__mark\">\n              <div class=\"stzh-checkbox__check\" aria-hidden=\"true\"></div>\n            </div>\n            <div class=\"stzh-checkbox__label\">\n              {this.label ? this.label : <slot></slot>}\n              {!this.hideOptional && (\n                <span class=\"stzh-checkbox__marker\">\n                  <span class=\"stzh-checkbox__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-checkbox__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n            </div>\n          </label>\n          {(errorUsed || this.description || this.descriptionLong) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-checkbox\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              descriptionLongTitle={this.descriptionLongTitle}\n              descriptionLongUsed={descriptionLongUsed}\n              moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-0ac64574.js → p-111f7e01.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-8f01554b.js';
 import { a as addWordBreakToLinks, h as hasSlot } from './p-289f5de2.js';
-import { d as defineCustomElement$2 } from './p-17efbc57.js';
-import { d as defineCustomElement$1 } from './p-5a8587ab.js';
+import { d as defineCustomElement$2 } from './p-dd1c0c0c.js';
+import { d as defineCustomElement$1 } from './p-7c4e756c.js';
 
 const stzhLinkCss = "@charset \"UTF-8\";.sc-stzh-link-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-link-h,[stzh-hidden].sc-stzh-link-h{display:none}.sc-stzh-link-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-link-h *.sc-stzh-link,.sc-stzh-link-h *.sc-stzh-link::before,.sc-stzh-link-h *.sc-stzh-link::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-link-h .has-focus.sc-stzh-link{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-link-h .stzh-fylingfocus-focused.sc-stzh-link{outline-style:none !important}.sc-stzh-link-h .stzh-fylingfocus-focused.sc-stzh-link::-moz-focus-inner{border:0 !important}.sc-stzh-link-h{--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal;--color:var(--stzh-link-color);--text-decoration-line:var(--stzh-link-text-decoration-line);--icon-wrapper-height:var(--stzh-link-icon-wrapper-height);--icon-size:var(--stzh-link-icon-size);--height:var(--stzh-link-height, 40px);--hover-color:var(--stzh-link-hover-color);--hover-text-decoration-line:var(--stzh-link-hover-text-decoration-line);color:var(--color);display:inline-grid;width:auto;min-height:var(--height);pointer-events:var(--stzh-link-pointer-events, auto)}@media screen and (min-width: 900px){.sc-stzh-link-h{--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 900px){.sc-stzh-link-h{--height:var(--stzh-link-height, auto)}}[height=auto].sc-stzh-link-h{--height:var(--stzh-link-auto-height, auto)}[fullwidth].sc-stzh-link-h:not([fullwidth=false]){width:100%;display:grid}[variant=secondary].sc-stzh-link-h{--color:var(--stzh-link-secondary-color);--hover-color:var(--stzh-link-secondary-hover-color)}[variant=back].sc-stzh-link-h{--text-decoration-line:none;--hover-color:var(--color)}[active].sc-stzh-link-h:not([active=false]){--color:var(--hover-color)}[disabled].sc-stzh-link-h:not([disabled=false]){--color:var(--stzh-color-grey60);--hover-color:var(--stzh-color-grey60)}.sc-stzh-link-h:where([size=small]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal}.sc-stzh-link-h:where([size=inherit]){--font-size:inherit;--line-height:inherit;--letter-spacing:inherit}.stzh-link.sc-stzh-link{font-size:var(--font-size);line-height:var(--line-height);letter-spacing:var(--letter-spacing);font-family:inherit;position:relative;display:flex;align-items:center;justify-content:stretch;appearance:none;border:none;color:var(--color);transition:color var(--stzh-base-transition-animation-speed);cursor:pointer;width:100%;-webkit-text-decoration-line:none;text-decoration-line:none;background-color:transparent;padding:0;border-radius:var(--stzh-button-border-radius);text-align:left}.stzh-link.sc-stzh-link:hover{color:var(--hover-color)}@media (hover: none){.stzh-link.sc-stzh-link:hover{color:inherit}}.stzh-link.sc-stzh-link:hover .stzh-link__text.sc-stzh-link{-webkit-text-decoration-line:var(--hover-text-decoration-line);text-decoration-line:var(--hover-text-decoration-line)}.stzh-link__vhidden.sc-stzh-link{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-link__inner.sc-stzh-link{display:flex;align-items:center;justify-content:center;flex-grow:1}.stzh-link__icon-wrapper.sc-stzh-link{--stzh-icon-size:var(--icon-size);display:none;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:var(--icon-wrapper-height)}.stzh-link__text.sc-stzh-link{--stzh-base-color:initial;-webkit-text-decoration-line:var(--text-decoration-line);text-decoration-line:var(--text-decoration-line)}.stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-xxsmall)}.stzh-link__badge.sc-stzh-link{position:absolute;z-index:1;top:0;right:0}.stzh-link--has-icon.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link{display:inline-flex}.stzh-link--has-icon-only.sc-stzh-link .stzh-link__text.sc-stzh-link{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-link--badge-position-link.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link{position:static}.stzh-link__badge.sc-stzh-link,.stzh-link--badge-position-link.sc-stzh-link .stzh-link__badge.sc-stzh-link{top:calc(var(--stzh-space-xxsmall) * -1);right:calc(var(--stzh-space-large) * -1)}.stzh-link--badge-position-icon.stzh-link--has-icon.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link{position:relative}.stzh-link--badge-position-icon.stzh-link--has-icon.sc-stzh-link .stzh-link__badge.sc-stzh-link{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link+.stzh-link__text.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-small)}.stzh-link--align-left.sc-stzh-link .stzh-link__inner.sc-stzh-link{justify-content:flex-start}.stzh-link--align-right.sc-stzh-link .stzh-link__inner.sc-stzh-link{justify-content:flex-end}.stzh-link--align-center.sc-stzh-link .stzh-link__inner.sc-stzh-link{justify-content:center}.stzh-link--align-space-between.sc-stzh-link .stzh-link__inner.sc-stzh-link{justify-content:space-between}.stzh-link--is-disabled.sc-stzh-link{cursor:not-allowed}";
 const StzhLinkStyle0 = stzhLinkCss;
@@ -130,7 +130,7 @@ const StzhLink = /*@__PURE__*/ proxyCustomElement(class StzhLink extends H {
             [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,
             [`stzh-link--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: '6242e0e0c5018dce8128cf8b3b889c70882d2716', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.link = el), href: this.disabled ? null : this.href, download: this.download, rel: this.rel, target: this.target, class: classes, id: this.linkId, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, "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, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))) : (h("button", { ref: el => (this.link = el), class: classes, type: this.type, disabled: this.disabled, id: this.linkId, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, "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, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed)))));
+        return (h(Host, { key: '993f76b3eca5840278228ebee5ed438f89f9c060', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.link = el), href: this.disabled ? null : this.href, download: this.download, rel: this.rel, target: this.target, class: classes, id: this.linkId, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, "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, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))) : (h("button", { ref: el => (this.link = el), class: classes, type: this.type, disabled: this.disabled, id: this.linkId, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, "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, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed)))));
     }
     get element() { return this; }
     static get style() { return StzhLinkStyle0; }
@@ -197,4 +197,4 @@ function defineCustomElement() {
 
 export { StzhLink as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-0ac64574.js.map
+//# sourceMappingURL=p-111f7e01.js.map

package/dist/components/{p-0ac64574.js.map → p-111f7e01.js.map}

@@ -1 +1 @@
-{"file":"p-0ac64574.js","mappings":"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","names":[],"sources":["src/components/stzh-link/stzh-link.scss?tag=stzh-link&encapsulation=scoped","src/components/stzh-link/stzh-link.tsx"],"sourcesContent":["/**\n * @prop --color: Color of link\n * @prop --hover-color: Hover color of link\n * @prop --text-decoration-line: Text decoration of link\n * @prop --hover-text-decoration-line: Hover text decoration of link\n * @prop --icon-size: Size of icon next to link\n * @prop --min-height: Min height of link\n *\n * @prop --stzh-link-color: **Global**: Color of link\n * @prop --stzh-link-hover-color: **Global**: Hover color of link\n * @prop --stzh-link-text-decoration-line: **Global**: Text decoration of link\n * @prop --stzh-link-hover-text-decoration-line: **Global**: Text decoration of link\n * @prop --stzh-link-icon-size: **Global**: Size of icon next to link\n * @prop --stzh-link-text-decoration-thickness: **Global**: Text decoration thickness\n * @prop --stzh-link-text-decoration-skip-ink: **Global**: Whether to skip ink in text decoration\n * @prop --stzh-link-text-underline-offset: **Global**: Text underline offset\n */\n\n@mixin link--size-default() {\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --letter-spacing: normal;\n\n  @include mq($from: medium) {\n    --font-size: var(--stzh-font-centi-font-size);\n    --line-height: var(--stzh-font-centi-text-line-height);\n    --letter-spacing: normal;\n  }\n}\n\n@mixin link--size-small() {\n  --font-size: var(--stzh-font-micro-font-size);\n  --line-height: var(--stzh-font-micro-text-line-height);\n  --letter-spacing: normal;\n}\n\n@mixin link--size-inherit() {\n  --font-size: inherit;\n  --line-height: inherit;\n  --letter-spacing: inherit;\n}\n\n:host {\n  @include link--size-default;\n  --color: #{$linkColor};\n  --text-decoration-line: #{$linkTextDecorationLine};\n  --icon-wrapper-height: #{$linkIconWrapperHeight};\n  --icon-size: #{$linkIconSize};\n  --height: var(--stzh-link-height, 40px);\n\n  --hover-color: #{$linkHoverColor};\n  --hover-text-decoration-line: #{$linkHoverTextDecorationLine};\n\n  @include mq($from: medium) {\n    --height: var(--stzh-link-height, auto);\n  }\n\n  color: var(--color);\n  display: inline-grid;\n  width: auto;\n  min-height: var(--height);\n  pointer-events: var(--stzh-link-pointer-events, auto);\n\n  &[height=\"auto\"] {\n    --height: var(--stzh-link-auto-height, auto);\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: grid;\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$linkSecondaryColor};\n    --hover-color: #{$linkSecondaryHoverColor};\n  }\n\n  &[variant=\"back\"] {\n    --text-decoration-line: none;\n    --hover-color: var(--color);\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--hover-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey60};\n    --hover-color: #{$colorGrey60};\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include link--size-small;\n}\n\n:host(:where([size=\"inherit\"])) {\n  @include link--size-inherit;\n}\n\n//@each $breakpoint, $size in $breakpoints {\n//  @include mq($from: $breakpoint) {\n//    :host(:where([size-#{$breakpoint}=\"default\"])) {\n//      @include link--size-default;\n//    }\n//\n//    :host(:where([size-#{$breakpoint}=\"small\"])) {\n//      @include link--size-small;\n//    }\n//\n//    :host(:where([size-#{$breakpoint}=\"inherit\"])) {\n//      @include link--size-inherit;\n//    }\n//  }\n//}\n\n.stzh-link {\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  letter-spacing: var(--letter-spacing);\n  font-family: inherit;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  border: none;\n  color: var(--color);\n  transition: color $baseTransitionAnimationSpeed;\n  cursor: pointer;\n  width: 100%;\n  text-decoration-line: none;\n  background-color: transparent;\n  padding: 0;\n  border-radius: $buttonBorderRadius;\n  text-align: left;\n\n  &:hover {\n    color: var(--hover-color);\n\n    @media (hover: none) {\n      color: inherit;\n    }\n  }\n\n  &:hover &__text {\n    text-decoration-line: var(--hover-text-decoration-line);\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    --stzh-icon-size: var(--icon-size);\n\n    display: none;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: var(--icon-wrapper-height);\n  }\n\n  &__text {\n    --stzh-base-color: initial;\n\n    text-decoration-line: var(--text-decoration-line);\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: space(\"xxsmall\");\n  }\n\n  &__badge  {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  &--has-icon &__icon-wrapper {\n    display: inline-flex;\n  }\n\n  /* Variant if link only has icon */\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-link &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-link &__badge {\n    top: calc(#{space(\"xxsmall\")} * -1);\n    right: calc(#{space(\"large\")} * -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\n    &__icon-wrapper\n    + &__text:not(:empty) {\n    margin-left: space(\"small\");\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","import { Component, Host, Fragment, Element, h, Prop, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhLinkFocusEvent, StzhLinkBlurEvent, StzhLinkSize, StzhBadgeType, StzhLinkClickEvent } from \"../../index\";\n\nimport { StzhLinkLocalizedText } from \"./stzh-link.localization\";\nimport { hasSlot, addWordBreakToLinks } from \"../../utils/utils\";\n\n/**\n * @slot icon - Slot for icon element\n * @slot - Slot for label/text content\n */\n@Component({\n  tag: \"stzh-link\",\n  styleUrl: \"stzh-link.scss\",\n  scoped: true,\n})\nexport class StzhLink {\n  /** Translation strings */\n  @Prop() localization: StzhLinkLocalizedText;\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  /** Height variant (none prevent setting min-height for mikro and small breakpoint) */\n  @Prop({ reflect: true }) height: \"default\" | \"auto\" = \"default\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: StzhLinkSize = \"default\";\n\n  /** Size variant (above small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhLinkSize;\n\n  /** Size variant (above medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhLinkSize;\n\n  /** Size variant (above large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhLinkSize;\n\n  /** Size variant (above ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhLinkSize;\n\n  /** href attribute of the 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, if used as button (if no href used) */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" | \"back\" = \"default\";\n\n  /** Whether the link is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Badge text */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"link\" = \"icon\";\n\n  /** Disabled status */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Active status */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Whether only an icon is used inside the link */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Access key of link (usually a number e.g. 1) */\n  @Prop() linkAccesskey: string;\n\n  /** ID of link element */\n  @Prop() linkId: string;\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  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Aria current of link/button */\n  @Prop({ attribute: \"a11y-current\" }) a11yCurrent: 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: HTMLStzhLinkElement;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhLinkClickEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhLinkFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhLinkBlurEvent>;\n\n  private link: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n    }\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.link.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-link\",\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-link\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-link\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  private addWordBreakToLinks() {\n    const links = Array.from(this.element?.getElementsByClassName(\"stzh-link\") || []);\n    addWordBreakToLinks(links as HTMLElement[]);\n  }\n\n  private renderIcon(): HTMLInputElement {\n    return (\n      <div class=\"stzh-link__icon-wrapper\">\n        {this.icon ? <stzh-icon class=\"stzh-link__icon\" name={this.icon}></stzh-icon> : <slot name=\"icon\"></slot>}\n        {(this.badge || this.badgeEmpty) && (\n          <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        )}\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"stzh-link__text\">\n        {this.rel && this.rel.includes(\"external\") && (\n          <div class=\"stzh-link__vhidden\">{this.localization.$globals.externalLinkLabel}</div>\n        )}\n        {this.download && <div class=\"stzh-link__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        <div ref={el => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div class=\"stzh-link__inner\">\n          {this.iconPosition === \"left\" && this.renderIcon()}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon()}\n        </div>\n        {(this.badge || this.badgeEmpty) && !iconUsed && (\n          <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        )}\n      </Fragment>\n    );\n  }\n\n  async componentDidLoad() {\n    this.addWordBreakToLinks();\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.link?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-link\": true,\n      \"stzh-link--has-icon\": iconUsed,\n      \"stzh-link--has-icon-only\": this.iconOnly,\n      \"stzh-link--has-badge\": !!this.badge,\n      \"stzh-link--is-fullwidth\": this.fullwidth,\n      \"stzh-link--is-disabled\": this.disabled,\n      \"stzh-link--is-active\": this.active,\n      [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-link--${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.link = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            download={this.download}\n            rel={this.rel}\n            target={this.target}\n            class={classes}\n            id={this.linkId}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            onClick={this.onClick}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n        ) : (\n          <button\n            ref={el => (this.link = el as HTMLButtonElement)}\n            class={classes}\n            type={this.type}\n            disabled={this.disabled}\n            id={this.linkId}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            onClick={this.onClick}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-111f7e01.js","mappings":"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","names":[],"sources":["src/components/stzh-link/stzh-link.scss?tag=stzh-link&encapsulation=scoped","src/components/stzh-link/stzh-link.tsx"],"sourcesContent":["/**\n * @prop --color: Color of link\n * @prop --hover-color: Hover color of link\n * @prop --text-decoration-line: Text decoration of link\n * @prop --hover-text-decoration-line: Hover text decoration of link\n * @prop --icon-size: Size of icon next to link\n * @prop --min-height: Min height of link\n *\n * @prop --stzh-link-color: **Global**: Color of link\n * @prop --stzh-link-hover-color: **Global**: Hover color of link\n * @prop --stzh-link-text-decoration-line: **Global**: Text decoration of link\n * @prop --stzh-link-hover-text-decoration-line: **Global**: Text decoration of link\n * @prop --stzh-link-icon-size: **Global**: Size of icon next to link\n * @prop --stzh-link-text-decoration-thickness: **Global**: Text decoration thickness\n * @prop --stzh-link-text-decoration-skip-ink: **Global**: Whether to skip ink in text decoration\n * @prop --stzh-link-text-underline-offset: **Global**: Text underline offset\n */\n\n@mixin link--size-default() {\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --letter-spacing: normal;\n\n  @include mq($from: medium) {\n    --font-size: var(--stzh-font-centi-font-size);\n    --line-height: var(--stzh-font-centi-text-line-height);\n    --letter-spacing: normal;\n  }\n}\n\n@mixin link--size-small() {\n  --font-size: var(--stzh-font-micro-font-size);\n  --line-height: var(--stzh-font-micro-text-line-height);\n  --letter-spacing: normal;\n}\n\n@mixin link--size-inherit() {\n  --font-size: inherit;\n  --line-height: inherit;\n  --letter-spacing: inherit;\n}\n\n:host {\n  @include link--size-default;\n  --color: #{$linkColor};\n  --text-decoration-line: #{$linkTextDecorationLine};\n  --icon-wrapper-height: #{$linkIconWrapperHeight};\n  --icon-size: #{$linkIconSize};\n  --height: var(--stzh-link-height, 40px);\n\n  --hover-color: #{$linkHoverColor};\n  --hover-text-decoration-line: #{$linkHoverTextDecorationLine};\n\n  @include mq($from: medium) {\n    --height: var(--stzh-link-height, auto);\n  }\n\n  color: var(--color);\n  display: inline-grid;\n  width: auto;\n  min-height: var(--height);\n  pointer-events: var(--stzh-link-pointer-events, auto);\n\n  &[height=\"auto\"] {\n    --height: var(--stzh-link-auto-height, auto);\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: grid;\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$linkSecondaryColor};\n    --hover-color: #{$linkSecondaryHoverColor};\n  }\n\n  &[variant=\"back\"] {\n    --text-decoration-line: none;\n    --hover-color: var(--color);\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--hover-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey60};\n    --hover-color: #{$colorGrey60};\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include link--size-small;\n}\n\n:host(:where([size=\"inherit\"])) {\n  @include link--size-inherit;\n}\n\n//@each $breakpoint, $size in $breakpoints {\n//  @include mq($from: $breakpoint) {\n//    :host(:where([size-#{$breakpoint}=\"default\"])) {\n//      @include link--size-default;\n//    }\n//\n//    :host(:where([size-#{$breakpoint}=\"small\"])) {\n//      @include link--size-small;\n//    }\n//\n//    :host(:where([size-#{$breakpoint}=\"inherit\"])) {\n//      @include link--size-inherit;\n//    }\n//  }\n//}\n\n.stzh-link {\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  letter-spacing: var(--letter-spacing);\n  font-family: inherit;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  border: none;\n  color: var(--color);\n  transition: color $baseTransitionAnimationSpeed;\n  cursor: pointer;\n  width: 100%;\n  text-decoration-line: none;\n  background-color: transparent;\n  padding: 0;\n  border-radius: $buttonBorderRadius;\n  text-align: left;\n\n  &:hover {\n    color: var(--hover-color);\n\n    @media (hover: none) {\n      color: inherit;\n    }\n  }\n\n  &:hover &__text {\n    text-decoration-line: var(--hover-text-decoration-line);\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    --stzh-icon-size: var(--icon-size);\n\n    display: none;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: var(--icon-wrapper-height);\n  }\n\n  &__text {\n    --stzh-base-color: initial;\n\n    text-decoration-line: var(--text-decoration-line);\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: space(\"xxsmall\");\n  }\n\n  &__badge  {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  &--has-icon &__icon-wrapper {\n    display: inline-flex;\n  }\n\n  /* Variant if link only has icon */\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-link &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-link &__badge {\n    top: calc(#{space(\"xxsmall\")} * -1);\n    right: calc(#{space(\"large\")} * -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\n    &__icon-wrapper\n    + &__text:not(:empty) {\n    margin-left: space(\"small\");\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","import { Component, Host, Fragment, Element, h, Prop, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhLinkFocusEvent, StzhLinkBlurEvent, StzhLinkSize, StzhBadgeType, StzhLinkClickEvent } from \"../../index\";\n\nimport { StzhLinkLocalizedText } from \"./stzh-link.localization\";\nimport { hasSlot, addWordBreakToLinks } from \"../../utils/utils\";\n\n/**\n * @slot icon - Slot for icon element\n * @slot - Slot for label/text content\n */\n@Component({\n  tag: \"stzh-link\",\n  styleUrl: \"stzh-link.scss\",\n  scoped: true,\n})\nexport class StzhLink {\n  /** Translation strings */\n  @Prop() localization: StzhLinkLocalizedText;\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  /** Height variant (none prevent setting min-height for mikro and small breakpoint) */\n  @Prop({ reflect: true }) height: \"default\" | \"auto\" = \"default\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: StzhLinkSize = \"default\";\n\n  /** Size variant (above small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhLinkSize;\n\n  /** Size variant (above medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhLinkSize;\n\n  /** Size variant (above large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhLinkSize;\n\n  /** Size variant (above ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhLinkSize;\n\n  /** href attribute of the 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, if used as button (if no href used) */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" | \"back\" = \"default\";\n\n  /** Whether the link is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Badge text */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"link\" = \"icon\";\n\n  /** Disabled status */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Active status */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Whether only an icon is used inside the link */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Access key of link (usually a number e.g. 1) */\n  @Prop() linkAccesskey: string;\n\n  /** ID of link element */\n  @Prop() linkId: string;\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  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Aria current of link/button */\n  @Prop({ attribute: \"a11y-current\" }) a11yCurrent: 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: HTMLStzhLinkElement;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhLinkClickEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhLinkFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhLinkBlurEvent>;\n\n  private link: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n    }\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.link.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-link\",\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-link\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-link\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  private addWordBreakToLinks() {\n    const links = Array.from(this.element?.getElementsByClassName(\"stzh-link\") || []);\n    addWordBreakToLinks(links as HTMLElement[]);\n  }\n\n  private renderIcon(): HTMLInputElement {\n    return (\n      <div class=\"stzh-link__icon-wrapper\">\n        {this.icon ? <stzh-icon class=\"stzh-link__icon\" name={this.icon}></stzh-icon> : <slot name=\"icon\"></slot>}\n        {(this.badge || this.badgeEmpty) && (\n          <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        )}\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"stzh-link__text\">\n        {this.rel && this.rel.includes(\"external\") && (\n          <div class=\"stzh-link__vhidden\">{this.localization.$globals.externalLinkLabel}</div>\n        )}\n        {this.download && <div class=\"stzh-link__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        <div ref={el => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div class=\"stzh-link__inner\">\n          {this.iconPosition === \"left\" && this.renderIcon()}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon()}\n        </div>\n        {(this.badge || this.badgeEmpty) && !iconUsed && (\n          <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        )}\n      </Fragment>\n    );\n  }\n\n  async componentDidLoad() {\n    this.addWordBreakToLinks();\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.link?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-link\": true,\n      \"stzh-link--has-icon\": iconUsed,\n      \"stzh-link--has-icon-only\": this.iconOnly,\n      \"stzh-link--has-badge\": !!this.badge,\n      \"stzh-link--is-fullwidth\": this.fullwidth,\n      \"stzh-link--is-disabled\": this.disabled,\n      \"stzh-link--is-active\": this.active,\n      [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-link--${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.link = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            download={this.download}\n            rel={this.rel}\n            target={this.target}\n            class={classes}\n            id={this.linkId}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            onClick={this.onClick}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n        ) : (\n          <button\n            ref={el => (this.link = el as HTMLButtonElement)}\n            class={classes}\n            type={this.type}\n            disabled={this.disabled}\n            id={this.linkId}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            onClick={this.onClick}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-9ac321e4.js → p-12bdcf8a.js}

@@ -1,15 +1,15 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-8f01554b.js';
-import { a as printISODate, d as defineCustomElement$6 } from './p-853de15b.js';
+import { a as printISODate, d as defineCustomElement$6 } from './p-902ed395.js';
 import { h as hasSlot } from './p-289f5de2.js';
-import { d as defineCustomElement$8 } from './p-17efbc57.js';
-import { d as defineCustomElement$7 } from './p-e42121d1.js';
-import { d as defineCustomElement$5 } from './p-8254224a.js';
-import { d as defineCustomElement$4 } from './p-5a8587ab.js';
-import { d as defineCustomElement$3 } from './p-faae4632.js';
-import { d as defineCustomElement$2 } from './p-6268e18b.js';
-import { d as defineCustomElement$1 } from './p-9a31aa56.js';
+import { d as defineCustomElement$8 } from './p-dd1c0c0c.js';
+import { d as defineCustomElement$7 } from './p-4a78990f.js';
+import { d as defineCustomElement$5 } from './p-3f3349b1.js';
+import { d as defineCustomElement$4 } from './p-7c4e756c.js';
+import { d as defineCustomElement$3 } from './p-da83a0ad.js';
+import { d as defineCustomElement$2 } from './p-963d59bf.js';
+import { d as defineCustomElement$1 } from './p-63c4d8c4.js';
 
-const stzhDatepickerCss = ".sc-stzh-datepicker-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-datepicker-h,[stzh-hidden].sc-stzh-datepicker-h{display:none}.sc-stzh-datepicker-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datepicker-h *.sc-stzh-datepicker,.sc-stzh-datepicker-h *.sc-stzh-datepicker::before,.sc-stzh-datepicker-h *.sc-stzh-datepicker::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-datepicker-h .has-focus.sc-stzh-datepicker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker{outline-style:none !important}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker::-moz-focus-inner{border:0 !important}.sc-stzh-datepicker-h{--calendar-width:var(--stzh-calendar-width);width:100%}[inline].sc-stzh-datepicker-h:not([inline=false]){width:var(--calendar-width)}.stzh-datepicker__popover.sc-stzh-datepicker{--width:auto}.stzh-datepicker__calendar.sc-stzh-datepicker{margin-left:auto;margin-right:auto}.stzh-datepicker__calendar.is-inline.sc-stzh-datepicker{width:100%;margin-left:0px;margin-right:0px}.stzh-datepicker__actions.sc-stzh-datepicker{display:flex;width:var(--calendar-width);margin-left:auto;margin-right:auto}.stzh-datepicker__actions.is-inline.sc-stzh-datepicker{width:100%;margin-left:0px;margin-right:0px}.stzh-datepicker__actions.sc-stzh-datepicker:not(:empty){padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-small)}.stzh-datepicker--has-action.sc-stzh-datepicker .stzh-datepicker__popover.sc-stzh-datepicker{--content-padding:0 0 var(--stzh-space-small) 0}";
+const stzhDatepickerCss = ".sc-stzh-datepicker-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-datepicker-h,[stzh-hidden].sc-stzh-datepicker-h{display:none}.sc-stzh-datepicker-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datepicker-h *.sc-stzh-datepicker,.sc-stzh-datepicker-h *.sc-stzh-datepicker::before,.sc-stzh-datepicker-h *.sc-stzh-datepicker::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-datepicker-h .has-focus.sc-stzh-datepicker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker{outline-style:none !important}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker::-moz-focus-inner{border:0 !important}.sc-stzh-datepicker-h{--calendar-width:var(--stzh-calendar-width);width:100%;position:relative}[inline].sc-stzh-datepicker-h:not([inline=false]){width:var(--calendar-width)}.stzh-datepicker__popover.sc-stzh-datepicker{--width:auto}.stzh-datepicker__calendar.sc-stzh-datepicker{margin-left:auto;margin-right:auto}.stzh-datepicker__calendar.is-inline.sc-stzh-datepicker{width:100%;margin-left:0px;margin-right:0px}.stzh-datepicker__actions.sc-stzh-datepicker{display:flex;width:var(--calendar-width);margin-left:auto;margin-right:auto}.stzh-datepicker__actions.is-inline.sc-stzh-datepicker{width:100%;margin-left:0px;margin-right:0px}.stzh-datepicker__actions.sc-stzh-datepicker:not(:empty){padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-small)}.stzh-datepicker--has-action.sc-stzh-datepicker .stzh-datepicker__popover.sc-stzh-datepicker{--content-padding:0 0 var(--stzh-space-small) 0}";
 const StzhDatepickerStyle0 = stzhDatepickerCss;
 
 const StzhDatepicker = /*@__PURE__*/ proxyCustomElement(class StzhDatepicker extends H {
@@ -165,11 +165,11 @@ const StzhDatepicker = /*@__PURE__*/ proxyCustomElement(class StzhDatepicker ext
             "stzh-datepicker--inline": this.inline,
             "stzh-datepicker--has-action": actionUsed,
         };
-        return (h(Host, { key: 'f8eb72fe6370b350c2ae1904aa060e71407dcc3f', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '884f50ba5993b2b96760ae104d1f57b29ae28032', class: classes }, h("input", { key: '938ebd2d1d167ec210457586e6af271c84576db5', type: "hidden", name: this.name, value: this.value, defaultValue: this.defaultValue }), this.inline && (h(Fragment, { key: 'ed0b426be60042b5b0806c617d0ecdc7b0772034' }, h("stzh-calendar", { key: '2b221a540441c14c6d9d25aa743912f3eade3f60',
+        return (h(Host, { key: '20e14b196ff9412583fe70d505cdcecfe087df6e', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '8b1bec87897482374e0c84c8b2c340a961fd6dbb', class: classes }, h("input", { key: '0f839dbf214dabd77b34ca69b66c6cf8b3a261b3', type: "hidden", name: this.name, value: this.value, defaultValue: this.defaultValue }), this.inline && (h(Fragment, { key: '07d261251daeb9fe72c14354525ad9ab4c918ee1' }, h("stzh-calendar", { key: 'b26dadb8d64e70ea7dcb43de197c3ee69163eb36',
             // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}
-            value: this.calendarValue, class: "stzh-datepicker__calendar is-inline", isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { key: '6ea9c8708f984c4d2381a2bad9a097bbf58dba54', class: "stzh-datepicker__actions" }, h("slot", { key: '64cde269464550a34d561c8393d9282d8b1a9de8', name: "action" })))), !this.inline && (h("stzh-input", { key: '723e9f64d06cf61fad98cc2d33c3a62de402771f', value: this.inputValue, label: this.label, labelHidden: this.labelHidden, ref: el => (this.input = el), noAutocomplete: true, onStzhChanged: this.onInputChanged, readonly: this.readonly, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, invalid: this.invalid, required: this.required, hideOptional: this.hideOptional, size: this.size }, h("stzh-popover", { key: 'ede051690990d0857f7a8e628ed246d420b1f92c', ref: el => (this.popover = el), class: "stzh-datepicker__popover", slot: "button-right", placement: "bottom-end", strategy: "fixed", label: this.label }, h("stzh-button", { key: 'd9e363505d99b3741146da43d7129aa03c120af1', "icon-only": true, icon: "calendar", size: this.size, disabled: this.disabled, a11yLabel: this.buttonLabel }), h("div", { key: '228faca0d9d06d65f1b4c22bffa78daa65186887', slot: "content" }, h("stzh-calendar", { key: 'a9abef6995ee18d51770f2c5600135130db1d3c9',
+            value: this.calendarValue, class: "stzh-datepicker__calendar is-inline", isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { key: 'f6775141a572717789a04e7c5c5ef2158e940f12', class: "stzh-datepicker__actions" }, h("slot", { key: '23c04230a3de93ddd303b4d7b57c1f56c74a888f', name: "action" })))), !this.inline && (h("stzh-input", { key: 'c041ccdda80067c51154afb36d0ecb2eb57e7119', value: this.inputValue, label: this.label, labelHidden: this.labelHidden, ref: el => (this.input = el), noAutocomplete: true, onStzhChanged: this.onInputChanged, readonly: this.readonly, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, invalid: this.invalid, required: this.required, hideOptional: this.hideOptional, size: this.size }, h("stzh-popover", { key: '59176c120b40c0292ed26420629b676ae937be83', ref: el => (this.popover = el), class: "stzh-datepicker__popover", slot: "button-right", placement: "bottom-end", strategy: "fixed", label: this.label }, h("stzh-button", { key: 'c081f5c3472077f23336352714c01dd409f1b281', "icon-only": true, icon: "calendar", size: this.size, disabled: this.disabled, a11yLabel: this.buttonLabel }), h("div", { key: 'fd06e8dff63bf5f71d4ae74341ddd40b9fc263e7', slot: "content" }, h("stzh-calendar", { key: '32f756a68d52df096225bd7924e0ad94536afdf7',
             // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}
-            value: this.calendarValue, class: "stzh-datepicker__calendar is-popover", isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { key: '3a0060c46684de5d23bcd1459b7bcb140bde758b', class: "stzh-datepicker__actions" }, h("slot", { key: 'c31f574a17c7a7c64288cf34366cef1cdc56248f', name: "action" })))))))));
+            value: this.calendarValue, class: "stzh-datepicker__calendar is-popover", isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { key: '935174bcc6cc0fe5faaca2c1f99dd5cdffd12b81', class: "stzh-datepicker__actions" }, h("slot", { key: 'd860bd2c030b5fa0d153228dfc2c463f7d148acf', name: "action" })))))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -268,4 +268,4 @@ function defineCustomElement() {
 
 export { StzhDatepicker as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-9ac321e4.js.map
+//# sourceMappingURL=p-12bdcf8a.js.map

package/dist/components/p-12bdcf8a.js.map

@@ -0,0 +1 @@
+{"file":"p-12bdcf8a.js","mappings":"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","names":[],"sources":["src/components/stzh-datepicker/stzh-datepicker.scss?tag=stzh-datepicker&encapsulation=scoped","src/components/stzh-datepicker/stzh-datepicker.tsx"],"sourcesContent":[":host {\n  --calendar-width: #{$calendarWidth};\n\n  width: 100%;\n  position: relative;\n\n  &[inline]:not([inline=\"false\"]) {\n    width: var(--calendar-width);\n  }\n}\n\n.stzh-datepicker {\n  &__popover {\n    --width: auto;\n  }\n\n  &__calendar {\n    margin-left: auto;\n    margin-right: auto;\n\n    &.is-inline {\n      width: 100%;\n      margin-left: 0px;\n      margin-right: 0px;\n    }\n  }\n\n  &__actions {\n    display: flex;\n    width: var(--calendar-width);\n    margin-left: auto;\n    margin-right: auto;\n\n    &.is-inline {\n      width: 100%;\n      margin-left: 0px;\n      margin-right: 0px;\n    }\n\n    &:not(:empty) {\n      padding-left: space(\"small\");\n      padding-right: space(\"small\");\n    }\n  }\n\n  /* Has action */\n\n  &--has-action &__popover {\n    --content-padding: 0 0 #{space(\"small\")} 0;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n  Fragment,\n  State,\n  Listen,\n} from \"@stencil/core\";\n\nimport { StzhCalendarChangeEvent, StzhDatepickerChangeEvent } from \"../../index\";\n\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nimport { printISODate } from \"../../utils/date-utils\";\nimport { StzhLocaleAdapter } from \"../../index\";\n\nimport { StzhDatepickerLocalizedText } from \"./stzh-datepicker.localization\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot action - Slot for action below calendar (stzh-link element)\n */\n@Component({\n  tag: \"stzh-datepicker\",\n  styleUrl: \"stzh-datepicker.scss\",\n  scoped: true,\n})\nexport class StzhDatepicker {\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() calendarMin: string = \"\";\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() calendarMax: string = \"\";\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @Prop() calendarIsDateDisabled: StzhCalendarDateDisabledPredicate = () => false;\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the hidden date picker input. If a date can be parsed (via picker always), the value is in ISO format. Otherwise the value equals the manual input.  */\n  @Prop({ mutable: true }) value: string = \"\";\n  @State() calendarValue: string = \"\";\n  @State() inputValue: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Label for input field and popover */\n  @Prop() label: string = \"\";\n\n  /** Whether label is visually hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Show calendar inline */\n  @Prop({ reflect: true }) inline: boolean = false;\n\n  /**\n   * Date adapter visible date shown to the user, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  /**\n   * Date adapter for internal date passed to backend, for custom parsing/formatting.\n   * Can be `\"iso\"` (default, date in ISO format) / `\"legacy\"` (date in `d.m.Y` format)\n   * or `StzhLocaleAdapter` (must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.)\n   */\n  @Prop() internalDateAdapter: \"iso\" | \"legacy\" | StzhLocaleAdapter = \"iso\";\n  private _internalDateAdapter: StzhLocaleAdapter;\n\n  /**  Translation strings. */\n  @Prop() localization: StzhDatepickerLocalizedText;\n\n  @State() buttonLabel: string;\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  @Watch(\"localization\")\n  createDateFormatters() {\n    if (this.localization) {\n      this.dateFormatLong = new Intl.DateTimeFormat(this.localization.$locale, {\n        day: \"numeric\",\n        month: \"long\",\n        year: \"numeric\",\n      });\n    }\n  }\n\n  /** Update calendar and input when value prop has changed */\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    if (!this._internalDateAdapter) {\n      return;\n    }\n\n    const date = this._internalDateAdapter.parse(newValue, \"dateInput\");\n\n    this.calendarValue = printISODate(date);\n    this.inputValue = this.dateAdapter.format(date, \"dateInput\");\n\n    this.updateButtonAccessibleLabel();\n  }\n\n  @Watch(\"dateAdapter\")\n  dateAdapterWatcher(newValue: StzhLocaleAdapter) {\n    if (!newValue) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals,\n      );\n    }\n  }\n\n  @Watch(\"internalDateAdapter\")\n  internalDateAdapterWatcher(newValue: \"iso\" | \"legacy\" | StzhLocaleAdapter) {\n    if (newValue === \"iso\" || !newValue) {\n      this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formatsIso,\n        this.localization.$globals,\n      );\n    } else if (newValue === \"legacy\") {\n      this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formatsLegacy,\n        this.localization.$globals,\n      );\n    } else {\n      this._internalDateAdapter = newValue;\n    }\n  }\n\n  /** Set value by a JS Date object */\n  @Method()\n  async setDate(date: Date) {\n    this.value = this._internalDateAdapter.format(date, \"dateInput\");\n  }\n\n  /** Return internal popover element */\n  @Method()\n  async getPopover(): Promise<HTMLStzhPopoverElement> {\n    return this.popover;\n  }\n\n  /** Datepicker change event */\n  @Event() stzhChange: EventEmitter<StzhDatepickerChangeEvent>;\n\n  @Element() element: HTMLStzhDatepickerElement;\n\n  /**\n   * To format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong: Intl.DateTimeFormat;\n\n  private input: HTMLStzhInputElement;\n  private popover: HTMLStzhPopoverElement;\n  // private calendar: HTMLStzhCalendarElement;\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n  };\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  private onInputChanged = () => {\n    const parsedDate = this.dateAdapter.parse(this.input.value, \"dateInput\");\n\n    if (this.input.value === \"\" || parsedDate) {\n      const formattedDate = this._internalDateAdapter.format(parsedDate, \"dateInput\");\n\n      if (this.value !== formattedDate) {\n        this.value = formattedDate;\n      } else {\n        this.valueWatcher(formattedDate);\n      }\n\n      this.stzhChange.emit({\n        component: \"stzh-datepicker\",\n        value: this.value,\n        valueAsDate: parsedDate,\n      });\n    }\n  };\n\n  private onCalendarChange = (event: CustomEvent<StzhCalendarChangeEvent>) => {\n    if (event.detail.component !== \"stzh-calendar\") {\n      // Do not emit stzhChange event from year/month dropdowns\n      event.stopPropagation();\n      return;\n    }\n\n    this.value = event.detail.valueAsDate && this._internalDateAdapter.format(event.detail.valueAsDate, \"dateInput\");\n\n    this.stzhChange.emit({\n      component: \"stzh-datepicker\",\n      value: this.value,\n      valueAsDate: event.detail.valueAsDate,\n    });\n\n    if (this.popover) {\n      this.popover.hide();\n    }\n  };\n\n  private updateButtonAccessibleLabel() {\n    if (!this.localization) {\n      return;\n    }\n\n    try {\n      const valueAsDate = this._internalDateAdapter.parse(this.value, \"dateInput\");\n      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;\n    } catch (err) {\n      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}`;\n    }\n  }\n\n  connectedCallback() {\n    this.createDateFormatters();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datepicker\");\n    }\n\n    this.dateAdapterWatcher(this.dateAdapter);\n    this.internalDateAdapterWatcher(this.internalDateAdapter);\n    this.valueWatcher(this.value);\n    this.defaultValue = this.defaultValue || this.value;\n  }\n\n  render() {\n    const actionUsed = hasSlot(this.element, \"action\");\n\n    const classes = {\n      \"stzh-datepicker\": true,\n      \"stzh-datepicker--inline\": this.inline,\n      \"stzh-datepicker--has-action\": actionUsed,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <input type=\"hidden\" name={this.name} value={this.value} defaultValue={this.defaultValue} />\n\n          {this.inline && (\n            <Fragment>\n              <stzh-calendar\n                // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                value={this.calendarValue}\n                class=\"stzh-datepicker__calendar is-inline\"\n                isDateDisabled={this.calendarIsDateDisabled}\n                min={this.calendarMin}\n                max={this.calendarMax}\n                onStzhChange={this.onCalendarChange}\n              ></stzh-calendar>\n              <div class=\"stzh-datepicker__actions\">\n                <slot name=\"action\"></slot>\n              </div>\n            </Fragment>\n          )}\n\n          {!this.inline && (\n            <stzh-input\n              value={this.inputValue}\n              label={this.label}\n              labelHidden={this.labelHidden}\n              ref={el => (this.input = el as HTMLStzhInputElement)}\n              noAutocomplete\n              onStzhChanged={this.onInputChanged}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              error={this.error}\n              invalid={this.invalid}\n              required={this.required}\n              hideOptional={this.hideOptional}\n              size={this.size}\n            >\n              <stzh-popover\n                ref={el => (this.popover = el as HTMLStzhPopoverElement)}\n                class=\"stzh-datepicker__popover\"\n                slot=\"button-right\"\n                placement=\"bottom-end\"\n                strategy=\"fixed\"\n                label={this.label}\n              >\n                <stzh-button\n                  icon-only\n                  icon=\"calendar\"\n                  size={this.size}\n                  disabled={this.disabled}\n                  a11yLabel={this.buttonLabel}\n                ></stzh-button>\n                <div slot=\"content\">\n                  <stzh-calendar\n                    // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                    value={this.calendarValue}\n                    class=\"stzh-datepicker__calendar is-popover\"\n                    isDateDisabled={this.calendarIsDateDisabled}\n                    min={this.calendarMin}\n                    max={this.calendarMax}\n                    onStzhChange={this.onCalendarChange}\n                  ></stzh-calendar>\n                  <div class=\"stzh-datepicker__actions\">\n                    <slot name=\"action\"></slot>\n                  </div>\n                </div>\n              </stzh-popover>\n            </stzh-input>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}