@oiz/stzh-components 3.8.0-beta2 → 3.8.1

package/dist/stzh-components/p-a71fafbd.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as a,F as i,a as s,g as n}from"./p-c7bfac7a.js";import{h as e}from"./p-ebd6dda5.js";import"./p-9b063923.js";const c='.sc-stzh-contact-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-contact-h,[stzh-hidden].sc-stzh-contact-h{display:none}.sc-stzh-contact-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-contact-h *.sc-stzh-contact,.sc-stzh-contact-h *.sc-stzh-contact::before,.sc-stzh-contact-h *.sc-stzh-contact::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-contact-h .has-focus.sc-stzh-contact{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-contact-h .stzh-fylingfocus-focused.sc-stzh-contact{outline-style:none !important}.sc-stzh-contact-h .stzh-fylingfocus-focused.sc-stzh-contact::-moz-focus-inner{border:0 !important}.sc-stzh-contact-h{--grid-template-areas:var(\n      --stzh-contact-grid-template-areas,\n      "heading heading heading heading" "image image image image" "info info info info" "availability availability availability availability" "additional additional additional additional"\n  );--grid-template-columns:var(\n      --stzh-contact-grid-template-columns,\n      repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 900px){.sc-stzh-contact-h{--grid-template-areas:var(\n        --stzh-contact-grid-template-areas,\n        "heading heading heading heading heading heading heading heading" "image image image image . . . ." "info info info info availability availability availability availability" "additional additional additional additional additional additional additional additional"\n    );--grid-template-columns:var(\n        --stzh-contact-grid-template-columns,\n        repeat(8, minmax(0, 1fr))\n    )}}@media print{.sc-stzh-contact-h{page-break-inside:avoid;break-inside:avoid}}.sc-stzh-contact-h .sc-stzh-contact-s>[slot=image]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}@media screen and (min-width: 900px){[has-availability=false].sc-stzh-contact-h{--grid-template-areas:var(\n        --stzh-contact-grid-template-areas,\n        "heading heading heading heading heading heading heading heading" "image image image image . . . ." "info info info info info info info info" "additional additional additional additional additional additional additional additional"\n    )}}[image-position=left].sc-stzh-contact-h{--grid-template-areas:var(\n      --stzh-contact-grid-template-areas,\n      "heading heading heading heading" "image image image image" "info info info info" "availability availability availability availability" "additional additional additional additional"\n  );--grid-template-columns:var(\n      --stzh-contact-grid-template-columns,\n      repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 900px){[image-position=left].sc-stzh-contact-h{--grid-template-areas:var(\n        --stzh-contact-grid-template-areas,\n        "heading heading heading heading heading heading heading heading" "image info info info availability availability availability availability" "additional additional additional additional additional additional additional additional"\n    );--grid-template-columns:var(\n        --stzh-contact-grid-template-columns,\n        auto repeat(7, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){[image-position=left].sc-stzh-contact-h{--grid-template-areas:var(\n        --stzh-contact-grid-template-areas,\n        "heading heading heading heading heading heading heading heading heading heading heading heading" "image info info info info info availability availability availability availability availability availability" "additional additional additional additional additional additional additional additional additional additional additional additional"\n    );--grid-template-columns:var(\n        --stzh-contact-grid-template-columns,\n        auto repeat(11, minmax(0, 1fr))\n    )}}.stzh-contact.sc-stzh-contact{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 900px){.stzh-contact.sc-stzh-contact{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-contact.sc-stzh-contact{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-contact.sc-stzh-contact{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-contact.sc-stzh-contact{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-contact.sc-stzh-contact{column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-contact__main-heading.sc-stzh-contact{grid-area:heading}.stzh-contact__main-heading.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){.stzh-contact__main-heading.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-contact__main-heading.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-small)}}.stzh-contact__image-wrapper.sc-stzh-contact{grid-area:image;background-color:var(--stzh-color-secondary20)}.stzh-contact__image.sc-stzh-contact{position:relative}.stzh-contact__info.sc-stzh-contact{grid-area:info}.stzh-contact__heading.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__name.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__address.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__numbers.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__emails.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__pobox.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__availability-title.sc-stzh-contact:not(:empty):not(:last-child){margin-bottom:var(--stzh-space-xsmall)}.stzh-contact__number.sc-stzh-contact,.stzh-contact__email.sc-stzh-contact{display:flex;align-items:center}.stzh-contact__heading.sc-stzh-contact,.stzh-contact__name.sc-stzh-contact,.stzh-contact__availability-title.sc-stzh-contact{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);margin:0px}@media screen and (min-width: 900px){.stzh-contact__heading.sc-stzh-contact,.stzh-contact__name.sc-stzh-contact,.stzh-contact__availability-title.sc-stzh-contact{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-contact__heading.sc-stzh-contact,.stzh-contact__name.is-heading.sc-stzh-contact,.stzh-contact__availability-title.sc-stzh-contact{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-contact__availability.sc-stzh-contact{grid-area:availability;margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-contact__availability.sc-stzh-contact{margin-top:0px}}.stzh-contact__availability-list.sc-stzh-contact,.stzh-contact__availability-hour-list.sc-stzh-contact{list-style:none;margin:0;padding:0}.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-xxsmall);display:grid}@media screen and (min-width: 900px){.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-small)}}.stzh-contact__availability-weekday.sc-stzh-contact{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height))}@media screen and (min-width: 900px){.stzh-contact__availability-weekday.sc-stzh-contact{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.stzh-contact__availability-hours.sc-stzh-contact{display:flex;flex-wrap:wrap;column-gap:var(--stzh-space-xsmall)}.stzh-contact__availability-hours-separator.sc-stzh-contact{width:0.0625rem;background-color:currentColor;flex-shrink:0}.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-medium);grid-area:additional;display:grid}@media screen and (min-width: 600px){.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-xxlarge)}}.stzh-contact__additional.sc-stzh-contact:not(:empty){margin-top:var(--stzh-space-medium)}.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image-wrapper.sc-stzh-contact{margin-bottom:var(--stzh-space-medium)}.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:4rem;height:4rem}@media screen and (min-width: 600px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:5rem;height:5rem}}@media screen and (min-width: 900px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:6.25rem;height:6.25rem}}@media screen and (min-width: 1260px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:7.5rem;height:7.5rem}}@media screen and (min-width: 1600px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:8.75rem;height:8.75rem}}.stzh-contact--image-position-left.sc-stzh-contact .stzh-contact__image-wrapper.sc-stzh-contact{background-color:transparent}';function h(t){return t.replace(/\s/g,"")}const o=class{constructor(a){t(this,a);this._street=[];this._streetInfo=[];this._numbers=[];this._emails=[];this._availability=[];this.type="Organization";this.mainHeading=undefined;this.mainHeadingLevel="2";this.heading=undefined;this.headingLevel="3";this.name=undefined;this.nameHeadingLevel="";this.address=undefined;this.street=undefined;this.streetInfo=undefined;this.postalCode=undefined;this.location=undefined;this.imagePosition="top";this.numbers=[];this.emails=[];this.pobox=undefined;this.poboxHeading=undefined;this.poboxTitle=undefined;this.poboxPostalCode=undefined;this.poboxLocation=undefined;this.availabilityTitle=undefined;this.availabilityTitleLevel="3";this.availability=undefined}availabilityWatcher(t){if(typeof t==="string"){this._availability=JSON.parse(t)}else{this._availability=t}}numbersWatcher(t){if(typeof t==="string"){this._numbers=JSON.parse(t)}else{this._numbers=t}}emailsWatcher(t){if(typeof t==="string"){this._emails=JSON.parse(t)}else{this._emails=t}}streetWatcher(t){if(typeof t==="string"){try{this._street=JSON.parse(t)}catch(a){this._street=[t]}}else if(t){this._street=t}}streetInfoWatcher(t){if(typeof t==="string"){try{this._streetInfo=JSON.parse(t)}catch(a){this._streetInfo=[t]}}else if(t){this._streetInfo=t}}async componentWillLoad(){this.numbersWatcher(this.numbers);this.emailsWatcher(this.emails);this.availabilityWatcher(this.availability);this.streetWatcher(this.street);this.streetInfoWatcher(this.streetInfo)}render(){const t=e(this.element,"image");const n=!!this.address||e(this.element,"address");const c=e(this.element,"addons");const o=e(this.element,"links");const l={"stzh-contact":true,"stzh-contact--has-image":t,"stzh-contact--has-address":n,"stzh-contact--has-addons":c,"stzh-contact--has-links":o,[`stzh-contact--image-position-${this.imagePosition}`]:true};const d=`h${this.headingLevel}`;const r=this.nameHeadingLevel?`h${this.nameHeadingLevel}`:"div";const m=`h${this.availabilityTitleLevel}`;return a(s,{"image-position":this.imagePosition,"has-availability":!!this.availability?"true":"false"},a("div",{class:l,itemscope:true,itemtype:`http://schema.org/${this.type}`},a("div",{class:"stzh-contact__main-heading",itemprop:this.type==="Organization"&&!this.heading||this.type==="Person"&&!this.name?"name":null},this.mainHeading?a("stzh-heading",{level:this.mainHeadingLevel},this.mainHeading):a("slot",{name:"main-heading"})),a("div",{class:"stzh-contact__image-wrapper"},a("div",{class:"stzh-contact__image"},a("slot",{name:"image"}))),a("div",{class:"stzh-contact__info"},this.heading&&a(d,{class:"stzh-contact__heading",itemprop:this.type==="Organization"||!this.name?"name":null,innerHTML:this.heading}),this.name&&a(r,{class:{"stzh-contact__name":true,"is-heading":this.nameHeadingLevel!==""},itemprop:this.type==="Person"?"name":null},this.name),a("div",{class:"stzh-contact__address",itemprop:"address",itemscope:true,itemtype:"http://schema.org/PostalAddress",innerHTML:this.address},!this.address&&a(i,null,this._street.length>0&&a("div",{class:"stzh-contact__street",itemprop:"streetAddress"},this._street.map((t=>a(i,null,t,a("br",null)))),this._streetInfo.length>0&&a(i,null,a("br",null)," ",this._streetInfo.map((t=>a(i,null,t,a("br",null)))))),this.postalCode&&a("span",{class:"stzh-contact__postal-code",itemprop:"postalCode"},this.postalCode," "),this.location&&a("span",{class:"stzh-contact__locality",itemprop:"addressLocality"},this.location),a("slot",{name:"address"}))),this._numbers.length>0&&a("div",{class:"stzh-contact__numbers"},this._numbers.map((t=>a("div",{class:"stzh-contact__number"},a("span",null,t.label," "),a("stzh-link",{size:"inherit",height:"auto",class:"stzh-contact__number-link",href:`${t.type}:${h(t.number)}`,analyticsId:t.analyticsId||`${t.label} ${t.number}`,itemprop:t.type==="fax"?"faxNumber":"telephone"},t.number))))),this._emails.length>0&&a("div",{class:"stzh-contact__emails"},this._emails.map((t=>a("div",{class:"stzh-contact__email"},a("span",null,t.label," "),t.href?a("stzh-link",{size:"inherit",height:"auto",class:"stzh-container__email-link",href:`mailto:${t.href}`,analyticsId:t.analyticsId||`${t.label} ${t.text}`,itemprop:"email"},t.text):a("span",{class:"stzh-container__email-link",itemprop:"email"},t.text))))),a("div",{class:"stzh-contact__pobox",innerHTML:this.pobox},!this.pobox&&a(i,null,this.poboxHeading&&a("div",{class:"stzh-contact__pobox-heading"},this.poboxHeading),this.poboxTitle&&a("div",{class:"stzh-contact__pobox-title"},this.poboxTitle),this.poboxPostalCode&&a("span",{class:"stzh-contact__pobox-postal-code"},this.poboxPostalCode," "),this.poboxLocation&&a("span",{class:"stzh-contact__pobox-locality"},this.poboxLocation),a("slot",{name:"pobox"})))),this.availability&&a("div",{class:"stzh-contact__availability"},this.availabilityTitle&&a(m,{class:"stzh-contact__availability-title"},this.availabilityTitle),this._availability.length>0&&a("ul",{class:"stzh-contact__availability-list"},this._availability.map((t=>a("li",{class:"stzh-contact__availability-list-item"},a("div",{class:"stzh-contact__availability-weekday"},t.weekday),t.hours.length>0&&a("div",{class:"stzh-contact__availability-hours"},t.hours.map(((s,n)=>a(i,null,a("div",{class:"stzh-contact__availability-hour"},s),n<t.hours.length-1&&a("div",{class:"stzh-contact__availability-hours-separator"})))))))))),a("div",{class:"stzh-contact__additional"},a("slot",null))))}get element(){return n(this)}static get watchers(){return{availability:["availabilityWatcher"],numbers:["numbersWatcher"],emails:["emailsWatcher"],street:["streetWatcher"],streetInfo:["streetInfoWatcher"]}}};o.style=c;export{o as stzh_contact};
-//# sourceMappingURL=p-a71fafbd.entry.js.map

package/dist/stzh-components/p-a71fafbd.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhContactCss","formatTel","tel","replace","StzhContact","this","_street","_streetInfo","_numbers","_emails","_availability","availabilityWatcher","newValue","JSON","parse","numbersWatcher","emailsWatcher","streetWatcher","noArrayException","streetInfoWatcher","componentWillLoad","numbers","emails","availability","street","streetInfo","render","hasImage","hasSlot","element","hasAddress","address","hasAddons","hasLinks","classes","imagePosition","HeadingLevel","headingLevel","NameHeadingLevel","nameHeadingLevel","AvailabilityTitleElement","availabilityTitleLevel","h","Host","class","itemscope","itemtype","type","itemprop","heading","name","mainHeading","level","mainHeadingLevel","innerHTML","Fragment","length","map","postalCode","location","number","label","size","height","href","analyticsId","email","text","pobox","poboxHeading","poboxTitle","poboxPostalCode","poboxLocation","availabilityTitle","item","weekday","hours","hour","index"],"sources":["src/components/stzh-contact/stzh-contact.scss?tag=stzh-contact&encapsulation=scoped","src/components/stzh-contact/stzh-contact.tsx"],"sourcesContent":[":host {\n  --grid-template-areas: var(\n      --stzh-contact-grid-template-areas,\n      \"heading heading heading heading\" \"image image image image\" \"info info info info\" \"availability availability availability availability\" \"additional additional additional additional\"\n  );\n\n  --grid-template-columns: var(\n      --stzh-contact-grid-template-columns,\n      #{$gridColumns}\n  );\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n        --stzh-contact-grid-template-areas,\n        \"heading heading heading heading heading heading heading heading\" \"image image image image . . . .\" \"info info info info availability availability availability availability\" \"additional additional additional additional additional additional additional additional\"\n    );\n\n    --grid-template-columns: var(\n        --stzh-contact-grid-template-columns,\n        #{$gridColumnsMedium}\n    );\n  }\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  ::slotted([slot=\"image\"]) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  &[has-availability=\"false\"] {\n    @include mq($from: medium) {\n      --grid-template-areas: var(\n          --stzh-contact-grid-template-areas,\n          \"heading heading heading heading heading heading heading heading\" \"image image image image . . . .\" \"info info info info info info info info\" \"additional additional additional additional additional additional additional additional\"\n      );\n    }\n  }\n}\n\n:host[image-position=left] {\n  --grid-template-areas: var(\n      --stzh-contact-grid-template-areas,\n      \"heading heading heading heading\" \"image image image image\" \"info info info info\" \"availability availability availability availability\" \"additional additional additional additional\"\n  );\n\n  --grid-template-columns: var(\n      --stzh-contact-grid-template-columns,\n      #{$gridColumns}\n  );\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n        --stzh-contact-grid-template-areas,\n        \"heading heading heading heading heading heading heading heading\" \"image info info info availability availability availability availability\" \"additional additional additional additional additional additional additional additional\"\n    );\n\n    --grid-template-columns: var(\n        --stzh-contact-grid-template-columns,\n        auto repeat(7, minmax(0, 1fr))\n    );\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas: var(\n        --stzh-contact-grid-template-areas,\n        \"heading heading heading heading heading heading heading heading heading heading heading heading\" \"image info info info info info availability availability availability availability availability availability\" \"additional additional additional additional additional additional additional additional additional additional additional additional\"\n    );\n\n    --grid-template-columns: var(\n        --stzh-contact-grid-template-columns,\n        auto repeat(11, minmax(0, 1fr))\n    );\n  }\n}\n\n.stzh-contact {\n  @include fontCurve('p1');\n  @include gridGutter;\n  display: grid;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__main-heading {\n    grid-area: heading;\n\n    &:not(:empty) {\n      @include spaceCurve('margin-bottom', 'tiny');\n    }\n  }\n\n  &__image-wrapper {\n    grid-area: image;\n    background-color: $colorSecondary20;\n  }\n\n  &__image {\n    position: relative;\n  }\n\n  &__info {\n    grid-area: info;\n  }\n\n  &__heading,\n  &__name,\n  &__address,\n  &__numbers,\n  &__emails,\n  &__pobox,\n  &__availability-title {\n    &:not(:empty):not(:last-child) {\n      margin-bottom: space('xsmall');\n    }\n  }\n\n  &__number,\n  &__email {\n    display: flex;\n    align-items: center;\n  }\n\n  &__heading,\n  &__name,\n  &__availability-title {\n    @include fontCurve('p1');\n    margin: 0px;\n  }\n\n  &__heading,\n  &__name.is-heading,\n  &__availability-title {\n    @include font('heavy');\n  }\n\n  &__availability {\n    grid-area: availability;\n    margin-top: space('xlarge');\n\n    @include mq($from: medium) {\n      margin-top: 0px;\n    }\n  }\n\n  &__availability-list,\n  &__availability-hour-list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  &__availability-list {\n    @include spaceCurve('gap', 'tiny');\n    display: grid;\n  }\n\n  &__availability-weekday {\n    @include fontCurve('p2');\n  }\n\n  &__availability-hours {\n    display: flex;\n    flex-wrap: wrap;\n    column-gap: space('xsmall');\n  }\n\n  &__availability-hours-separator {\n    width: 1px;\n    background-color: currentColor;\n    flex-shrink: 0;\n  }\n\n  &__additional {\n    @include spaceCurve('gap', 'regular');\n    grid-area: additional;\n    display: grid;\n\n    &:not(:empty) {\n      margin-top: space('medium');\n    }\n  }\n\n  /* Has image */\n\n  &--has-image &__image-wrapper {\n    margin-bottom: space('medium');\n  }\n\n  &--has-image &__image {\n    width: 64px;\n    height: 64px;\n\n    @include mq($from: small) {\n      width: 80px;\n      height: 80px;\n    }\n\n    @include mq($from: medium) {\n      width: 100px;\n      height: 100px;\n    }\n\n    @include mq($from: large) {\n      width: 120px;\n      height: 120px;\n    }\n\n    @include mq($from: ultra) {\n      width: 140px;\n      height: 140px;\n    }\n  }\n\n  /* image position left */\n  &--image-position-left &__image-wrapper {\n    background-color: transparent;\n  }\n}\n","import { Component, Element, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { ContactEmail, ContactNumber, StzhContactAvailabilityItem } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nfunction formatTel(tel: string) {\n  return tel.replace(/\\s/g, \"\");\n}\n\n/**\n * @slot main-heading - slot for main heading\n * @slot image - slot for image\n * @slot address - slot for address (alternative for `address` property or separate properties `street`, `streetInfo`, `postalCode` & `location`)\n * @slot pobox - slot for pobox (alternative for `pobox` property or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`)\n * @slot slot for additional (e.g. accordion with contact form, map or datalist)\n */\n@Component({\n  tag: \"stzh-contact\",\n  styleUrl: \"stzh-contact.scss\",\n  scoped: true,\n})\nexport class StzhContact {\n  /** Type */\n  @Prop() type: \"Organization\" | \"Person\" = \"Organization\";\n\n  /** Main heading */\n  @Prop() mainHeading: string;\n\n  /** Main heading level */\n  @Prop() mainHeadingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"2\";\n\n  /** Heading */\n  @Prop() heading: string;\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Name */\n  @Prop() name: string;\n\n  /** Name heading level */\n  @Prop() nameHeadingLevel: \"\" | \"1\" | \"2\" | \"3\" | \"4\" = \"\";\n\n  /** Address (alternative for address slot or separate properties `street`, `streetInfo`, `postalCode` & `location`) */\n  @Prop() address: string;\n\n  /** Street */\n  @Prop() street: string | string[];\n  private _street: string[] = [];\n\n  /** Additional street info */\n  @Prop() streetInfo: string | string[];\n  private _streetInfo: string[] = [];\n\n  /** Postal code */\n  @Prop() postalCode: string;\n\n  /** Location / city */\n  @Prop() location: string;\n\n  /** Location / city */\n  @Prop() imagePosition: \"left\" | \"top\" = \"top\";\n\n  /**\n   * Numbers\n   * Array of objects that can include the attributes `type` = `tel`|`fax`, `label`, `number`\n   * and optionally `analyticsId` for setting `s-object-id` to the link element\n   * (for Adobe Analytics, default value is `label` and `number`).\n   */\n  @Prop() numbers: ContactNumber[] | string = [];\n  private _numbers: ContactNumber[] = [];\n\n  /**\n   * Numbers\n   * Array of objects that can include the attributes `label`, `number`, `text`, `href`\n   * and optionally `analyticsId` for setting `s-object-id` to the link element\n   * (for Adobe Analytics, default value is `label` and `text`).\n   */\n  @Prop() emails: ContactEmail[] | string = [];\n  private _emails: ContactEmail[] = [];\n\n  /** Pobox (alternative for pobox slot or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`) */\n  @Prop() pobox: string;\n\n  /** Post office box heading */\n  @Prop() poboxHeading: string;\n\n  /** Post office box title */\n  @Prop() poboxTitle: string;\n\n  /** Post office box postal code */\n  @Prop() poboxPostalCode: string;\n\n  /** Post office box location / city */\n  @Prop() poboxLocation: string;\n\n  /** Availability title */\n  @Prop() availabilityTitle: string;\n\n  /** Availability title level */\n  @Prop() availabilityTitleLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Availability times */\n  @Prop() availability: string | StzhContactAvailabilityItem[];\n  private _availability: StzhContactAvailabilityItem[] = [];\n\n  // private _availabilityDataItems: StzhDatalistItemEntry[] = [];\n\n  @Watch(\"availability\")\n  availabilityWatcher(newValue: string | StzhContactAvailabilityItem[]) {\n    if (typeof newValue === \"string\") {\n      this._availability = JSON.parse(newValue);\n    } else {\n      this._availability = newValue;\n    }\n  }\n\n  @Watch(\"numbers\")\n  numbersWatcher(newValue: ContactNumber[] | string) {\n    if (typeof newValue === \"string\") {\n      this._numbers = JSON.parse(newValue);\n    } else {\n      this._numbers = newValue;\n    }\n  }\n\n  @Watch(\"emails\")\n  emailsWatcher(newValue: ContactEmail[] | string) {\n    if (typeof newValue === \"string\") {\n      this._emails = JSON.parse(newValue);\n    } else {\n      this._emails = newValue;\n    }\n  }\n\n  @Watch(\"street\")\n  streetWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._street = JSON.parse(newValue);\n      } catch (noArrayException) {\n        this._street = [newValue];\n      }\n    } else if (newValue) {\n      this._street = newValue;\n    }\n  }\n\n  @Watch(\"streetInfo\")\n  streetInfoWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._streetInfo = JSON.parse(newValue);\n      } catch (noArrayException) {\n        this._streetInfo = [newValue];\n      }\n    } else if (newValue) {\n      this._streetInfo = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhFigureElement;\n\n  async componentWillLoad() {\n    this.numbersWatcher(this.numbers);\n    this.emailsWatcher(this.emails);\n    this.availabilityWatcher(this.availability);\n    this.streetWatcher(this.street);\n    this.streetInfoWatcher(this.streetInfo);\n  }\n\n  render() {\n    const hasImage = hasSlot(this.element, \"image\");\n    const hasAddress = !!this.address || hasSlot(this.element, \"address\");\n    const hasAddons = hasSlot(this.element, \"addons\");\n    const hasLinks = hasSlot(this.element, \"links\");\n\n    const classes = {\n      \"stzh-contact\": true,\n      \"stzh-contact--has-image\": hasImage,\n      \"stzh-contact--has-address\": hasAddress,\n      \"stzh-contact--has-addons\": hasAddons,\n      \"stzh-contact--has-links\": hasLinks,\n      [`stzh-contact--image-position-${this.imagePosition}`]: true,\n    };\n\n    const HeadingLevel = `h${this.headingLevel}`;\n    const NameHeadingLevel = this.nameHeadingLevel ? `h${this.nameHeadingLevel}` : \"div\";\n    const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;\n\n    return (\n      <Host image-position={this.imagePosition} has-availability={!!this.availability ? 'true' : 'false'}>\n        <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n          <div\n            class=\"stzh-contact__main-heading\"\n            itemprop={\n              (this.type === \"Organization\" && !this.heading) || (this.type === \"Person\" && !this.name) ? \"name\" : null\n            }\n          >\n            {this.mainHeading ? (\n              <stzh-heading level={this.mainHeadingLevel}>{this.mainHeading}</stzh-heading>\n            ) : (\n              <slot name=\"main-heading\"></slot>\n            )}\n          </div>\n\n          <div class=\"stzh-contact__image-wrapper\">\n            <div class=\"stzh-contact__image\">\n              <slot name=\"image\"></slot>\n            </div>\n          </div>\n\n          <div class=\"stzh-contact__info\">\n            {this.heading && (\n              <HeadingLevel\n                class=\"stzh-contact__heading\"\n                itemprop={this.type === \"Organization\" || !this.name ? \"name\" : null}\n                innerHTML={this.heading}\n              ></HeadingLevel>\n            )}\n\n            {this.name && (\n              <NameHeadingLevel\n                class={{\n                  \"stzh-contact__name\": true,\n                  \"is-heading\": this.nameHeadingLevel !== \"\",\n                }}\n                itemprop={this.type === \"Person\" ? \"name\" : null}\n              >\n                {this.name}\n              </NameHeadingLevel>\n            )}\n\n            <div\n              class=\"stzh-contact__address\"\n              itemprop=\"address\"\n              itemscope\n              itemtype=\"http://schema.org/PostalAddress\"\n              innerHTML={this.address}\n            >\n              {!this.address && (\n                <Fragment>\n                  {this._street.length > 0 && (\n                    <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n                      {this._street.map((street: string) => (\n                        <Fragment>\n                          {street}\n                          <br />\n                        </Fragment>\n                      ))}\n                      {this._streetInfo.length > 0 && (\n                        <Fragment>\n                          <br />{\" \"}\n                          {this._streetInfo.map((streetInfo: string) => (\n                            <Fragment>\n                              {streetInfo}\n                              <br />\n                            </Fragment>\n                          ))}\n                        </Fragment>\n                      )}\n                    </div>\n                  )}\n\n                  {this.postalCode && (\n                    <span class=\"stzh-contact__postal-code\" itemprop=\"postalCode\">\n                      {this.postalCode}&nbsp;\n                    </span>\n                  )}\n\n                  {this.location && (\n                    <span class=\"stzh-contact__locality\" itemprop=\"addressLocality\">\n                      {this.location}\n                    </span>\n                  )}\n\n                  <slot name=\"address\"></slot>\n                </Fragment>\n              )}\n            </div>\n\n            {this._numbers.length > 0 && (\n              <div class=\"stzh-contact__numbers\">\n                {this._numbers.map(number => (\n                  <div class=\"stzh-contact__number\">\n                    <span>{number.label}&nbsp;</span>\n                    <stzh-link\n                      size=\"inherit\"\n                      height=\"auto\"\n                      class=\"stzh-contact__number-link\"\n                      href={`${number.type}:${formatTel(number.number)}`}\n                      analyticsId={number.analyticsId || `${number.label} ${number.number}`}\n                      itemprop={number.type === \"fax\" ? \"faxNumber\" : \"telephone\"}\n                    >\n                      {number.number}\n                    </stzh-link>\n                  </div>\n                ))}\n              </div>\n            )}\n\n            {this._emails.length > 0 && (\n              <div class=\"stzh-contact__emails\">\n                {this._emails.map(email => (\n                  <div class=\"stzh-contact__email\">\n                    <span>{email.label}&nbsp;</span>\n                    {email.href ? (\n                      <stzh-link\n                        size=\"inherit\"\n                        height=\"auto\"\n                        class=\"stzh-container__email-link\"\n                        href={`mailto:${email.href}`}\n                        analyticsId={email.analyticsId || `${email.label} ${email.text}`}\n                        itemprop=\"email\"\n                      >\n                        {email.text}\n                      </stzh-link>\n                    ) : (\n                      <span class=\"stzh-container__email-link\" itemprop=\"email\">\n                        {email.text}\n                      </span>\n                    )}\n                  </div>\n                ))}\n              </div>\n            )}\n\n            <div class=\"stzh-contact__pobox\" innerHTML={this.pobox}>\n              {!this.pobox && (\n                <Fragment>\n                  {this.poboxHeading && <div class=\"stzh-contact__pobox-heading\">{this.poboxHeading}</div>}\n                  {this.poboxTitle && <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>}\n                  {this.poboxPostalCode && (\n                    <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode}&nbsp;</span>\n                  )}\n                  {this.poboxLocation && <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>}\n                  <slot name=\"pobox\"></slot>\n                </Fragment>\n              )}\n            </div>\n          </div>\n\n          {this.availability && (\n            <div class=\"stzh-contact__availability\">\n              {this.availabilityTitle && (\n                <AvailabilityTitleElement class=\"stzh-contact__availability-title\">\n                  {this.availabilityTitle}\n                </AvailabilityTitleElement>\n              )}\n\n              {this._availability.length > 0 && (\n                <ul class=\"stzh-contact__availability-list\">\n                  {this._availability.map(item => (\n                    <li class=\"stzh-contact__availability-list-item\">\n                      <div class=\"stzh-contact__availability-weekday\">{item.weekday}</div>\n                      {item.hours.length > 0 && (\n                        <div class=\"stzh-contact__availability-hours\">\n                          {item.hours.map((hour, index) => (\n                            <Fragment>\n                              <div class=\"stzh-contact__availability-hour\">{hour}</div>\n                              {index < item.hours.length - 1 && (\n                                <div class=\"stzh-contact__availability-hours-separator\"></div>\n                              )}\n                            </Fragment>\n                          ))}\n                        </div>\n                      )}\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </div>\n          )}\n\n          <div class=\"stzh-contact__additional\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-aff2ca5f.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as s,a,g as d}from"./p-c7bfac7a.js";import{s as e}from"./p-ebd6dda5.js";import{c as o}from"./p-3d5f9ac0.js";import{c as h}from"./p-f48422c4.js";import"./p-9b063923.js";const n=".sc-stzh-dialog-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-dialog-h,[stzh-hidden].sc-stzh-dialog-h{display:none}.sc-stzh-dialog-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-dialog-h *.sc-stzh-dialog,.sc-stzh-dialog-h *.sc-stzh-dialog::before,.sc-stzh-dialog-h *.sc-stzh-dialog::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-dialog-h .has-focus.sc-stzh-dialog{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-dialog-h .stzh-fylingfocus-focused.sc-stzh-dialog{outline-style:none !important}.sc-stzh-dialog-h .stzh-fylingfocus-focused.sc-stzh-dialog::-moz-focus-inner{border:0 !important}.sc-stzh-dialog-h{--padding-top:var(--stzh-space-xxlarge);--padding-bottom:var(--stzh-space-xxlarge);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--width:100%;--backdrop-opacity:var(--stzh-dialog-backdrop-opacity);--backdrop-background-color:var(--stzh-dialog-backdrop-background-color)}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){.sc-stzh-dialog-h{--padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.sc-stzh-dialog-h{--padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.sc-stzh-dialog-h{--width:33.5rem}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--width:38.125rem}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--width:54.125rem}}@media screen and (min-width: 1600px){.sc-stzh-dialog-h{--width:55.5rem}}@media screen and (min-width: 600px){[size=small].sc-stzh-dialog-h{--width:24.6875rem}}@media screen and (min-width: 900px){[size=small].sc-stzh-dialog-h{--width:28.75rem}}@media screen and (min-width: 1260px){[size=small].sc-stzh-dialog-h{--width:32rem}}.stzh-dialog.sc-stzh-dialog{z-index:var(--stzh-z-index-dialog);display:none;position:fixed;top:0;left:0;width:100%;height:100%;flex-direction:column;align-items:stretch;justify-content:stretch}.stzh-dialog__content.sc-stzh-dialog{z-index:2;position:relative;display:flex;flex-direction:column;align-items:center;flex-grow:1;overflow:auto}.stzh-dialog__dialog.sc-stzh-dialog{position:relative;display:flex;flex-direction:column;margin:auto;border:none;background-color:var(--stzh-color-white);width:var(--width);max-width:100%;box-shadow:var(--stzh-box-shadow-overlay);height:100vh;max-height:100vh;overflow:hidden;outline:none}.stzh-dialog__dialog--fit-content.sc-stzh-dialog{width:-moz-fit-content;width:fit-content}@media screen and (min-width: 600px){.stzh-dialog__dialog.sc-stzh-dialog{height:auto}}.stzh-dialog__backdrop.sc-stzh-dialog{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;text-align:center;background-color:var(--backdrop-background-color);opacity:var(--backdrop-opacity)}.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-medium);padding-top:var(--padding-top);padding-left:var(--padding-left);padding-right:var(--padding-right)}@media screen and (min-width: 600px){.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-dialog__dialog-content.sc-stzh-dialog{padding-left:var(--padding-left);padding-right:var(--padding-right);padding-top:var(--stzh-space-large);padding-bottom:var(--stzh-space-large);overflow:auto;flex-grow:1}@media screen and (min-width: 600px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-dialog__actions.sc-stzh-dialog:not(:empty){padding:var(--stzh-space-medium) var(--padding-right) var(--padding-bottom) var(--padding-left)}.stzh-dialog__close-button.sc-stzh-dialog{position:absolute;top:var(--stzh-space-xsmall);right:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-dialog__close-button.sc-stzh-dialog{top:var(--stzh-space-large);right:var(--stzh-space-large)}}.stzh-dialog--is-open.sc-stzh-dialog{display:flex}";const l="stzh-dialog-open";let c=null;let r=0;const g=class{constructor(s){i(this,s);this.stzhOpen=t(this,"stzhOpen",7);this.stzhClose=t(this,"stzhClose",7);this.handleDialogClick=i=>{const t=i.target;if(t.dataset.stzhDialogClose){this.hide()}else{const i=t.closest("[data-stzh-dialog-close]");if(i){this.hide()}}};this.handleCloseButtonClick=()=>{this.hide()};this.init=()=>{const i=this.element.querySelector('stzh-actions[slot="actions"]');if(i){e(i,{variant:"dialog"})}};this.localization=undefined;this.closeOnEscapeKey=false;this.closeOnBackdropClick=false;this.open=false;this.stay=true;this.size="default";this.hideClose=false;this.heading="";this.a11yRole="alertdialog";this.a11yLabel="";this.closeAnalyticsId=undefined}handleOutsideClick(i){if(!this.open||!this.closeOnBackdropClick){return}const t=i.target!==this.dialogElement&&this.dialogElement.contains(i.target)===false;if(t){this.hide()}}handleKeydown(i){if(i.key==="Escape"&&c===this&&this.closeOnEscapeKey){this.hide()}}handleOpenTriggerClick(i){const t=i.target;if(t.dataset.stzhDialogTrigger===this.element.id){this.show()}else{const i=t.closest("[data-stzh-dialog-trigger]");if(i&&i.dataset.stzhDialogTrigger===this.element.id){this.show()}}}async show(){this.open=true;this.stzhOpen.emit({component:"stzh-dialog"})}async hide(){this.open=false;this.stzhClose.emit({component:"stzh-dialog"})}getSiblings(){if(!this.parentElement){return[]}return Array.from(this.parentElement.children).filter((i=>i!==this.element))}disableSiblings(){this.getSiblings().forEach((i=>{i.setAttribute("aria-hidden","true")}))}enableSiblings(){this.getSiblings().forEach((i=>{i.removeAttribute("aria-hidden")}))}dialogShown(){c=this;document.body.classList.add(l);this.disableSiblings();if(this.trap){this.trap.activate()}}dialogHidden(){document.body.classList.remove(l);this.enableSiblings();if(this.trap){this.trap.deactivate()}c=null}async componentWillLoad(){this.id=`stzh-dialog-${r}`;r++;if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"dialog")}}componentDidRender(){this.open?this.dialogShown():this.dialogHidden()}componentDidUpdate(){this.trap.updateContainerElements(this.element)}componentDidLoad(){this.trap=h(this.element,Object.assign({fallbackFocus:this.dialogElement},o()));if(this.open){this.dialogShown()}}connectedCallback(){if(!this.stay&&this.element.parentElement!==document.body){document.body.appendChild(this.element)}this.parentElement=this.element.parentElement;this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){this.dialogHidden();if(this.observer){this.observer.disconnect()}}render(){return s(a,null,s("div",{class:{"stzh-dialog":true,"stzh-dialog--is-open":this.open,"stzh-dialog--has-heading":!!this.heading,"stzh-dialog--has-close-hidden":this.hideClose,[`stzh-dialog--size-${this.size}`]:!!this.size}},s("div",{class:"stzh-dialog__backdrop"}),s("div",{class:"stzh-dialog__content"},s("div",{class:"stzh-dialog__dialog",ref:i=>this.dialogElement=i,tabindex:"-1",role:this.a11yRole,"aria-label":this.a11yLabel||null,"aria-labelledby":this.heading?`${this.id}-heading`:null,"aria-hidden":this.open?"false":"true",onClick:this.handleDialogClick},this.heading&&s("stzh-heading",{id:`${this.id}-heading`,class:"stzh-dialog__heading",level:"2"},this.heading),s("div",{class:"stzh-dialog__dialog-content"},s("slot",null)),s("div",{class:"stzh-dialog__actions"},s("slot",{name:"actions"})),!this.hideClose&&s("stzh-button",{class:"stzh-dialog__close-button",variant:"tertiary",size:"small",icon:"close",iconOnly:true,onClick:this.handleCloseButtonClick,a11yLabel:this.localization.close,analyticsId:this.closeAnalyticsId||this.localization.close})))))}get element(){return d(this)}};g.style=n;export{g as stzh_dialog};
-//# sourceMappingURL=p-aff2ca5f.entry.js.map

package/dist/stzh-components/p-aff2ca5f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhDialogCss","CLASS_BODY_OPEN","activeDialog","dialogCounter","StzhDialog","this","handleDialogClick","event","target","dataset","stzhDialogClose","hide","closest","handleCloseButtonClick","init","actions","element","querySelector","setPropsIfNull","variant","handleOutsideClick","open","closeOnBackdropClick","isClickOutside","dialogElement","contains","handleKeydown","key","closeOnEscapeKey","handleOpenTriggerClick","stzhDialogTrigger","id","show","stzhOpen","emit","component","stzhClose","getSiblings","parentElement","Array","from","children","filter","child","disableSiblings","forEach","sibling","setAttribute","enableSiblings","removeAttribute","dialogShown","document","body","classList","add","trap","activate","dialogHidden","remove","deactivate","componentWillLoad","localization","window","stzhComponents","utils","fetchTranslations","componentDidRender","componentDidUpdate","updateContainerElements","componentDidLoad","createFocusTrap","Object","assign","fallbackFocus","createBaseFocusTrapOptions","connectedCallback","stay","appendChild","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","h","Host","class","heading","hideClose","size","ref","el","tabindex","role","a11yRole","a11yLabel","onClick","level","name","icon","iconOnly","close","analyticsId","closeAnalyticsId"],"sources":["src/components/stzh-dialog/stzh-dialog.scss?tag=stzh-dialog&encapsulation=scoped","src/components/stzh-dialog/stzh-dialog.tsx"],"sourcesContent":["/**\n * @prop --width: Width of dialog\n * @prop --padding-top: Padding top of dialog\n * @prop --padding-bottom: Padding bottom of dialog\n * @prop --padding-left: Padding left of dialog\n * @prop --padding-right: Padding right of dialog\n * @prop --backdrop-opacity: Opacity of dialog backdrop\n * @prop --backdrop-background-color: Opacity of dialog background color\n *\n * @prop --stzh-dialog-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-dialog-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  @include spaceCurve('--padding-top', 'large');\n  @include spaceCurve('--padding-bottom', 'large');\n  @include spaceCurve('--padding-left', 'medium');\n  @include spaceCurve('--padding-right', 'medium');\n  --width: 100%;\n  --backdrop-opacity: #{$dialogBackdropOpacity};\n  --backdrop-background-color: #{$dialogBackdropBackgroundColor};\n\n  @include mq($from: small) {\n    --width: 536px;\n  }\n\n  @include mq($from: medium) {\n    --width: 610px; // 786 before\n  }\n\n  @include mq($from: large) {\n    --width: 866px; // 832 before\n  }\n\n  @include mq($from: ultra) {\n    --width: 888px;\n  }\n\n  &[size=\"small\"] {\n    @include mq($from: small) {\n      --width: 395px;\n    }\n\n    @include mq($from: medium) {\n      --width: 460px;\n    }\n\n    @include mq($from: large) {\n      --width: 512px;\n    }\n  }\n}\n\n.stzh-dialog {\n  z-index: $zIndexDialog;\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: stretch;\n\n  &__content {\n    z-index: 2;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__dialog {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    margin: auto;\n    border: none;\n    background-color: $colorWhite;\n    width: var(--width);\n    max-width: 100%;\n    box-shadow: $boxShadowOverlay;\n    height: 100vh;\n    max-height: 100vh;\n    overflow: hidden;\n    outline: none;\n\n    &--fit-content {\n      width: fit-content;\n    }\n\n    @include mq($from: small) {\n      height: auto;\n    }\n  }\n\n  &__backdrop {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    overflow-x: hidden;\n    overflow-y: auto;\n    text-align: center;\n    background-color: var(--backdrop-background-color);\n    opacity: var(--backdrop-opacity);\n  }\n\n  &__heading {\n    @include spaceCurve('padding-bottom', 'regular');\n    padding-top: var(--padding-top);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n  }\n\n  &__dialog-content {\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    @include spaceCurve('padding-top', 'medium');\n    @include spaceCurve('padding-bottom', 'medium');\n    overflow: auto;\n    flex-grow: 1;\n  }\n\n  &__actions {\n    &:not(:empty) {\n      padding: space('medium') var(--padding-right) var(--padding-bottom) var(--padding-left);\n    }\n  }\n\n  &__close-button {\n    position: absolute;\n    top: space('xsmall');\n    right: space('xsmall');\n\n    @include mq($from: medium) {\n      top: space('large');\n      right: space('large');\n    }\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import {\n  Host,\n  Component,\n  Element,\n  Method,\n  Listen,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n} from \"@stencil/core\";\n\nimport {\n  StzhDialogOpenEvent,\n  StzhDialogCloseEvent\n} from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { StzhDialogLocalizedText } from \"./stzh-dialog.localization\"\n\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\nconst CLASS_BODY_OPEN = \"stzh-dialog-open\";\n\nlet activeDialog: StzhDialog = null;\nlet dialogCounter = 0;\n\n/**\n * @slot actions - Slot for actions element\n * @slot - Slot for any content inside the dialog\n */\n@Component({\n  tag: \"stzh-dialog\",\n  styleUrl: \"stzh-dialog.scss\",\n  scoped: true\n})\nexport class StzhDialog {\n  /** Translation strings */\n  @Prop() localization: StzhDialogLocalizedText;\n\n  /** Close dialog when pressing ESC */\n  @Prop() closeOnEscapeKey: boolean = false;\n\n  /** Close dialog when clicking outside of it */\n  @Prop() closeOnBackdropClick: boolean = false;\n\n  /** Open status */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Heading text */\n  @Prop() heading: string = \"\";\n\n  /** Accessibility role */\n  @Prop({ attribute: \"a11y-role\" }) a11yRole: \"dialog\" | \"alertdialog\" = \"alertdialog\";\n\n  /** Accessible label for dialog (use if no heading is used) */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the close button element.\n   * Default value will be taken from translations.\n   */\n  @Prop() closeAnalyticsId: string;\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhDialogOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhDialogCloseEvent>;\n\n  @Element() element: HTMLStzhDialogElement;\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (!this.open || !this.closeOnBackdropClick) {\n      return\n    }\n\n    const isClickOutside = event.target !== this.dialogElement\n      && this.dialogElement.contains(event.target as HTMLElement) === false\n\n    if (isClickOutside) {\n      this.hide()\n    }\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeydown(event: KeyboardEvent) {\n    if (\n      event.key === \"Escape\"\n      && activeDialog === this\n      && this.closeOnEscapeKey\n    ) {\n      this.hide();\n    }\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleOpenTriggerClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (target.dataset.stzhDialogTrigger === this.element.id) {\n      this.show();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-trigger]\") as HTMLElement;\n\n      if (closest && closest.dataset.stzhDialogTrigger === this.element.id) {\n        this.show();\n      }\n    }\n  }\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-dialog\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-dialog\"\n    });\n  }\n\n  private observer: MutationObserver;\n  private id: string;\n  private trap: FocusTrap;\n  private parentElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private handleDialogClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    if (target.dataset.stzhDialogClose) {\n      this.hide();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-close]\");\n\n      if (closest) {\n        this.hide();\n      }\n    }\n  }\n\n  private handleCloseButtonClick = () => {\n    this.hide();\n  }\n\n  private init = () => {\n    const actions = this.element.querySelector('stzh-actions[slot=\"actions\"]');\n\n    if (actions) {\n      setPropsIfNull(actions, {\n        variant: \"dialog\"\n      } as HTMLStzhActionsElement)\n    }\n  }\n\n  private getSiblings() {\n    if (!this.parentElement) {\n      return [];\n    }\n\n    return Array.from(this.parentElement.children).filter(\n      (child) => child !== this.element\n    );\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    activeDialog = this;\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n\n    activeDialog = null;\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-dialog-${dialogCounter}`;\n    dialogCounter++;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"dialog\");\n    }\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions()\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.parentElement = this.element.parentElement;\n\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    this.dialogHidden();\n\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-dialog\": true,\n            \"stzh-dialog--is-open\": this.open,\n            \"stzh-dialog--has-heading\": !!this.heading,\n            \"stzh-dialog--has-close-hidden\": this.hideClose,\n            [`stzh-dialog--size-${this.size}`]: !!this.size,\n          }}\n        >\n          <div class=\"stzh-dialog__backdrop\"></div>\n          <div class=\"stzh-dialog__content\">\n            <div\n              class=\"stzh-dialog__dialog\"\n              ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role={this.a11yRole}\n              aria-label={this.a11yLabel || null}\n              aria-labelledby={this.heading ? `${this.id}-heading` : null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n              onClick={this.handleDialogClick}\n            >\n              {this.heading &&\n                <stzh-heading\n                  id={`${this.id}-heading`}\n                  class=\"stzh-dialog__heading\"\n                  level=\"2\"\n                >\n                  {this.heading}\n                </stzh-heading>\n              }\n\n              <div class=\"stzh-dialog__dialog-content\">\n                <slot></slot>\n              </div>\n\n              <div class=\"stzh-dialog__actions\">\n                <slot name=\"actions\"></slot>\n              </div>\n\n              {!this.hideClose &&\n                <stzh-button\n                  class=\"stzh-dialog__close-button\"\n                  variant=\"tertiary\"\n                  size=\"small\"\n                  icon=\"close\"\n                  iconOnly={true}\n                  onClick={this.handleCloseButtonClick}\n                  a11yLabel={this.localization.close}\n                  analyticsId={this.closeAnalyticsId || this.localization.close}\n                ></stzh-button>\n              }\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"mappings":"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"}

package/dist/stzh-components/p-c83239a9.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhGeoRefDataCss","CLASS_BODY_OPEN","GeoRefData","this","_availableTags","filterResults","handleFilterToggleClick","isFiltersContentOpen","handleApplyFilterClick","handleOverlayCloseClick","document","body","classList","remove","isOpen","urlParams","URLSearchParams","window","location","search","Array","from","keys","forEach","key","startsWith","delete","newUrl","pathname","toString","history","replaceState","appliedFilters","handleResize","async","metaWrapperElement","clientHeight","mapElement","style","height","resultsListElement","map","getMap","updateSize","mediaChangeHandler","isViewportLarge","media","matches","isViewportMedium","handleFilterChange","e","filtersArray","isArray","detail","value","length","_resetTag","filter","filterValue","noEmptyFilter","setTimeout","handleFilterResults","handleExtentVisibilityChange","showOnlyResultsForCurrentExtent","checked","setVisibleMarkers","handleSearchChange","searchIndex","searchResults","flatSearchResults","flatMap","field","result","Set","searchActive","combineFilterAndSearchResults","toggleViewMode","viewmode","availableTagsWatcher","newValue","JSON","parse","resetTagWatcher","undefined","applyFiltersFromUrl","filters","entries","slice","updateUrlWithFilters","loadMapData","mapDataUrl","response","fetch","rawMapData","text","parsedData","DOMParser","parseFromString","querySelectorAll","item","pos","_a","querySelector","textContent","poiid","_b","lat","lon","split","error","toastbarElement","toast","type","catch","loadPoiData","poiDataUrl","credentials","poiData","json","items","combineData","firstArray","secondArray","smallerArray","largerArray","matchingItem","find","largerArrayItem","Object","assign","sort","a","b","title","localeCompare","noTitleException","enhanceTags","availableTags","combinedData","label","noLabelException","tag","counter","tags","includes","noTagsException","variant","size","buildSearchIndex","data","Document","tokenize","matcher","id","searchIndexIdField","index","searchIndexFields","add","mapMovedPannedOrZoomed","visibleMarkers","getVisibleMarkers","finalResults","visibleMarker","getId","setEnhancedTags","setPaginatedResults","finalResultsPaginatedList","numberOfItemsToLoad","canLoadMore","checkDirectOpenViaUrl","idFromUrl","get","al","initializeAndOpenMap","connectedCallback","addMediaChangeListener","resizeObserver","ResizeObserver","observe","element","resetTag","disconnectedCallback","removeMediaChangeListener","disconnect","isLoading","has","set","extent","parseFloat","isNaN","updateViewToFitMarkers","isInitialized","mapException","enhancedTags","enhancedResetTag","unshift","some","filterActive","replaceMapMarkers","loadMore","finalResultsPaginationOffset","sliced","concat","removeAllIconMarkers","addIconMarker","description","imageUri","baseUrlOverride","image","href","path","handlePoiTeaserMouseEnter","marker","findMarkerById","setIconMarkerActive","handlePoiTeaserMouseLeave","setIconMarkerInactive","render","classes","h","Host","ref","el","class","onClick","name","open","sticky","slot","curve","heading","icon","iconOnly","onStzhClick","onStzhChange","multiple","defaultValue","fullwidth","hideOptional","centerMarker","writeExtentToUrlEnabled","Fragment","onMouseEnter","onMouseLeave","poiname","ratio","portrait","src","alt"],"sources":["src/components/stzh-geo-ref-data/stzh-geo-ref-data.scss?tag=stzh-geo-ref-data&encapsulation=shadow","src/components/stzh-geo-ref-data/stzh-geo-ref-data.tsx"],"sourcesContent":[":host {\n  --teaser-list-width: 480px;\n  --meta-grid-template-areas: \"filters search\";\n  --results-grid-template-areas: \"map list\";\n}\n\n.stzh-geo-ref-data {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 899;\n  flex-direction: column;\n  transition: opacity ease 0.2s;\n  background-color: var(--stzh-color-white);\n\n  // initially hidden\n  display: none;\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n\n  &--is-open {\n    display: flex;\n    opacity: 1;\n    visibility: visible;\n    pointer-events: inherit;\n  }\n\n  &__header {\n    display: none;\n\n    @include mq($from: large) {\n      display: inherit;\n    }\n  }\n\n  &__content {\n    overflow: hidden;\n    height: 100%;\n  }\n\n  &--content-padding {\n    padding-left: $containerMargin;\n    padding-right: var(--stzh-space-medium);\n\n    @include mq($from: small) {\n      padding-left: $containerMarginSmall;\n    }\n\n    @include mq($from: medium) {\n      padding-left: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      padding-left: $containerMarginSmall;\n    }\n  }\n\n  &__heading {\n    display: flex;\n    align-items: center;\n    background-color: var(--stzh-color-secondary20);\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n  }\n\n  /** Everything meta wrapper like search, filters etc. */\n\n  &__meta-wrapper {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-end;\n    gap: space(large);\n\n    @include mq($to: large) {\n      padding-top: space('medium');\n      padding-bottom: space('medium');\n    }\n\n    @include spaceCurve('padding-top', 'small');\n    @include spaceCurve('padding-bottom', 'small');\n\n    @include mq($from: large) {\n      display: grid;\n      @include gridGutter;\n      grid-template-areas: var(--meta-grid-template-areas);\n      grid-template-columns: 1fr var(--teaser-list-width);\n    }\n  }\n\n  &__filters {\n    grid-area: filters;\n    flex: none;\n    margin-bottom: space(xxsmall);\n  }\n\n  &__filters-toggle {\n    @include mq($from: large) {\n      display: none;\n    }\n  }\n\n  &__filters-toggle stzh-chip {\n    @include mq($to: medium) {\n      --icon-gap: 0;\n    }\n  }\n\n  &__list-search {\n    display: none;\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n  }\n\n  &__filters-content {\n    display: none;\n\n    &--visible {\n      padding: $containerMargin;\n\n      @include mq($to: medium) {\n        //padding: $containerMarginSmall;\n      }\n\n      @include mq($to: large) {\n        display: flex;\n        gap: space('xxlarge');\n        position: fixed;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        background-color: var(--stzh-color-white);\n        //padding: $containerMarginMedium;\n        z-index: 10;\n        flex-direction: column;\n        justify-content: space-between;\n      }\n    }\n\n    @include mq($from: large) {\n      display: block;\n    }\n  }\n\n  &__filters-apply-button {\n    display: block;\n\n    @include mq($from: large) {\n      display: none;\n    }\n  }\n\n  &__search {\n    grid-area: search;\n    width: 100%;\n\n    @include mq($from: large) {\n      width: var(--teaser-list-width);\n      padding-left: var(--stzh-space-medium);\n      padding-right: var(--stzh-space-xsmall);\n    }\n  }\n\n  &__search input {\n    @include fontSize('milli');\n  }\n\n  &__results-toggle {\n    grid-area: resultstoggle;\n    flex: none;\n    margin-bottom: space(xxsmall);\n\n    @include mq($from: large) {\n      display: none;\n    }\n  }\n\n  /** Everything with results */\n\n  &__results-wrapper {\n    height: 100%;\n\n    @include mq($from: large) {\n      display: grid;\n      @include gridGutter;\n      grid-template-areas: var(--results-grid-template-areas);\n      grid-template-columns: minmax(0, 1fr) var(--teaser-list-width);\n    }\n  }\n\n  &__results-wrapper .inactive {\n    @include mq($to: large) {\n      visibility: hidden;\n      height: 0;\n      position: absolute;\n      overflow: hidden;\n    }\n  }\n\n  &__results-map {\n    grid-area: map;\n    position: relative;\n    height: 100%;\n  }\n\n  &__map-controls {\n    position: absolute;\n    top: space(small);\n    left: space(small);\n    background-color: var(--stzh-color-white);\n    padding: space(xsmall);\n  }\n\n  &__results-list {\n    grid-area: list;\n    padding-left: $containerMargin;\n    padding-right: var(--stzh-space-medium);\n    padding-bottom: space(\"xxlarge\");\n    overflow: auto;\n    @include scrollbars;\n\n    @include mq($from: small) {\n      padding-left: $containerMarginSmall;\n    }\n\n    @include mq($from: medium) {\n      padding-left: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      width: var(--teaser-list-width);\n      padding-left: 0;\n      overflow: auto;\n    }\n  }\n\n  &__results-list-heading {\n    margin-bottom: var(--stzh-space-medium);\n  }\n\n  &__ol-map {\n  }\n\n  &__teaser-list {\n    display: grid;\n    gap: var(--stzh-space-medium);\n    grid-template-columns: 1fr;\n\n    @include mq($from: small) {\n      grid-template-columns: 1fr 1fr;\n    }\n\n    @include mq($from: large) {\n      grid-template-columns: 1fr;\n    }\n  }\n\n  &__teaser-load-more {\n    display: flex;\n    justify-content: center;\n    margin-top: space(medium);\n  }\n\n  /** no filters */\n\n  &:not(&--has-filters) &__meta-wrapper {\n    @include mq($from: large) {\n      display: none;\n    }\n  }\n\n  &:not(&--has-filters) &__filters {\n    display: none;\n  }\n\n  &:not(&--has-filters) &__list-search {\n    @include mq($from: large) {\n      display: block;\n    }\n  }\n}\n\n.stzh-poi-teaser {\n  display: flex;\n  flex-direction: column-reverse;\n  background-color: var(--stzh-color-grey10);\n  position: relative;\n\n  @include mq($from: large) {\n    flex-direction: row;\n    height: 180px;\n  }\n\n  &:hover {\n    cursor: pointer;\n    background-color: var(--stzh-color-secondary10);\n  }\n\n  &-content {\n    padding: var(--stzh-space-medium);\n    hyphens: auto;\n    flex-grow: 1;\n\n    stzh-heading {\n      margin-bottom: space(xsmall);\n      hyphens: auto;\n    }\n\n    stzh-text {\n      --color: var(--stzh-color-grey80);\n    }\n  }\n\n  &-link {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n\n  &__image-wrapper {\n    position: relative;\n  }\n\n  &__ratio {\n    display: flex;\n    height: 100%;\n  }\n\n  &__image-inner-wrapper {\n    background-color: var(--stzh-color-grey20);\n    position: absolute;\n    inset: 0;\n    height: 100%;\n  }\n\n  &__image-inner-wrapper img {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  &-list-item {\n    display: flex;\n    gap: space(small);\n    margin-top: space(xxsmall);\n\n    stzh-icon, stzh-text {\n      --color: var(--stzh-color-grey80);\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\nimport { Document } from \"flexsearch/dist/flexsearch.bundle.min.js\";\nimport {\n  StzhAvailableTag,\n  StzhChipselectChangeEvent,\n  StzhChipselectItem,\n  StzhCombinedGeoRefData,\n  StzhGeoRefDataOverlayCloseClickEvent,\n  StzhMapGeoRefData,\n  StzhPoiGeoRefData\n} from \"../../index\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../utils/media-utils\";\n\nconst CLASS_BODY_OPEN = \"stzh-overlay-open\";\n\n/**\n * @slot logo - Slot for brand logo\n */\n@Component({\n  tag: \"stzh-geo-ref-data\",\n  styleUrl: \"stzh-geo-ref-data.scss\",\n  shadow: true\n})\nexport class GeoRefData {\n  /** ID for this instance, can be used to open via URL query param \"al=<id>\" - name \"al\" for historical reasons */\n  @Prop({ reflect: true }) al: string = \"\";\n\n  /** Heading for the overlay. */\n  @Prop({ reflect: true }) heading: string = \"\";\n\n  /** The URL for fetching the card data */\n  @Prop({ reflect: true }) mapDataUrl: string = \"\";\n\n  /** The URL used for fetching the POI data. */\n  @Prop({ reflect: true }) poiDataUrl: string = \"\";\n\n  /** Base URL used for all external requests (map, card). */\n  @Prop() baseUrlOverride: string = \"https://www.stadt-zuerich.ch\";\n\n  /** To make sure all tags are mapped to their identificator, only these will be available. */\n  @Prop() availableTags: StzhAvailableTag[] | string = [];\n  private _availableTags: StzhAvailableTag[] = [];\n\n  /** Reset tag (the first one). */\n  @Prop() resetTag: StzhChipselectItem | string;\n  private _resetTag: StzhChipselectItem;\n\n  /** Fields for building the search index. */\n  @Prop()\n  searchIndexFields: string[] = [\n    \"title\",\n    \"poiname\",\n    \"street\",\n    \"zip\",\n    \"description\"\n  ];\n\n  /** Fields for building the search index. */\n  @Prop() searchIndexIdField: string = \"poiid\";\n\n  @Watch(\"availableTags\")\n  availableTagsWatcher(newValue: StzhAvailableTag[] | string) {\n    if (!newValue) {\n      this._availableTags = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._availableTags = JSON.parse(newValue);\n      } catch (e) {\n        this._availableTags = [];\n      }\n    } else {\n      this._availableTags = newValue;\n    }\n  }\n\n  @Watch(\"resetTag\")\n  resetTagWatcher(newValue: StzhChipselectItem | string) {\n    if (!newValue) {\n      this._resetTag = undefined;\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._resetTag = JSON.parse(newValue);\n      } catch (e) {\n        this._resetTag = undefined;\n      }\n    } else {\n      this._resetTag = newValue;\n    }\n  }\n\n  @State() filterActive: boolean = false;\n  @State() searchActive: boolean = false;\n  @State() showOnlyResultsForCurrentExtent: boolean = true;\n  @State() finalResults: StzhCombinedGeoRefData[] = [];\n  @State() finalResultsPaginatedList: StzhCombinedGeoRefData[] = [];\n  @State() finalResultsPaginationOffset = 0;\n\n  @State() viewmode: \"map\" | \"list\" = \"map\";\n  @State() isViewportLarge: boolean;\n  @State() isViewportMedium: boolean;\n  @State() isInitialized: boolean;\n  @State() isOpen: boolean;\n  @State() isLoading: boolean;\n  @State() numberOfItemsToLoad: number = 20;\n  @State() canLoadMore: boolean;\n  @State() appliedFilters: string[] = [\"\"];\n  @State() isFiltersContentOpen: boolean = false;\n\n  /** Overlay close click event */\n  @Event()\n  stzhOverlayCloseClick: EventEmitter<StzhGeoRefDataOverlayCloseClickEvent>;\n\n  private combinedData: StzhCombinedGeoRefData[];\n  private enhancedTags: StzhChipselectItem[];\n  private searchIndex: Document;\n\n  private filterResults: StzhCombinedGeoRefData[] = [];\n  private searchResults: Set<string>;\n\n  @Element() element: HTMLStzhGeoRefDataElement;\n  private mapElement: HTMLStzhOlmapElement;\n  private toastbarElement: HTMLStzhToastbarElement;\n  private metaWrapperElement: HTMLDivElement;\n  private resultsListElement: HTMLDivElement;\n  private resizeObserver: ResizeObserver;\n\n  private applyFiltersFromUrl() {\n    const urlParams = new URLSearchParams(window.location.search);\n\n    // Find all filter parameters from the URL\n    const filters = Array.from(urlParams.entries())\n      .filter(([key, value]) => key.startsWith(\"filters[\") && value === \"true\")\n      .map(([key]) => key.slice(8, -1)); // Extract the filter key (removing 'filters[' and ']')\n\n    // Apply filters if they exist\n    if (filters.length) {\n      this.appliedFilters = filters;\n      // Update the UI to show selected filters\n      this.updateUrlWithFilters(); // Keep the URL sync logic here\n      this.handleFilterChange({\n        detail: { value: filters }\n      } as CustomEvent<StzhChipselectChangeEvent>);\n    }\n  }\n\n  private handleFilterToggleClick = () => {\n    this.isFiltersContentOpen = true;\n  };\n\n  private handleApplyFilterClick = () => {\n    this.isFiltersContentOpen = false;\n  };\n\n  private handleOverlayCloseClick = () => {\n    // Remove the class from the body\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.isOpen = false;\n\n    // Get the current URL's query parameters\n    const urlParams = new URLSearchParams(window.location.search);\n\n    // Remove all filters (query parameters that start with \"filters[\")\n    Array.from(urlParams.keys()).forEach(key => {\n      if (key.startsWith(\"filters[\")) {\n        urlParams.delete(key);\n      }\n    });\n\n    // Remove all extent parameters (keys like \"extent[0]\", \"extent[1]\", etc.)\n    urlParams.delete(\"extent[0]\");\n    urlParams.delete(\"extent[1]\");\n    urlParams.delete(\"extent[2]\");\n    urlParams.delete(\"extent[3]\");\n\n    // Remove the al parameter\n    urlParams.delete(\"al\");\n\n    // Update the URL without reloading the page\n    const newUrl = `${window.location.pathname}?${urlParams.toString()}`;\n    history.replaceState(null, \"\", newUrl);\n\n    // Clear filters.\n    this.appliedFilters = [\"\"];\n  };\n\n  private handleResize = async () => {\n    if (this.metaWrapperElement) {\n      if (this.metaWrapperElement.clientHeight) {\n        this.mapElement.style.height = `calc(100% - ${this.metaWrapperElement.clientHeight}px)`;\n        this.resultsListElement.style.height = `calc(100% - ${this.metaWrapperElement.clientHeight}px)`;\n      } else {\n        this.mapElement.style.height = `100%`;\n        this.resultsListElement.style.height = `100%`;\n      }\n      const map = await this.mapElement.getMap();\n      map.updateSize();\n    }\n  };\n\n  private mediaChangeHandler = () => {\n    this.isViewportLarge = media(\"large\").matches;\n    this.isViewportMedium = media(\"medium\").matches;\n  };\n\n  private async loadMapData(): Promise<StzhMapGeoRefData[]> {\n    if (!this.mapDataUrl) {\n      return [];\n    }\n    try {\n      const response = await fetch(this.mapDataUrl);\n      const rawMapData = await response.text();\n      const parsedData = new DOMParser().parseFromString(rawMapData, \"text/xml\");\n      return Array.from(parsedData.querySelectorAll(\"featureMember\")).map(item => {\n        const pos = item.querySelector(\"pos\")?.textContent;\n        const poiid = item.querySelector(\"poi_id\")?.textContent;\n        const [lat, lon] = pos?.split(\" \") || [];\n\n        return { poiid, lat, lon } as StzhMapGeoRefData;\n      });\n    } catch (error) {\n      this.toastbarElement\n        .toast(\"Es ist ein Fehler beim Beziehen der Kartendaten aufgetreten.\", {\n          type: \"error\"\n        })\n        .catch();\n    }\n  }\n\n  private async loadPoiData() {\n    if (!this.poiDataUrl) {\n      return [];\n    }\n    try {\n      const response = await fetch(this.poiDataUrl, { credentials: \"include\" });\n      const poiData = await response.json();\n      return poiData.items;\n    } catch (error) {\n      this.toastbarElement\n        .toast(\"Beim Laden der POI-Daten ist ein Fehler aufgetreten.\", {\n          type: \"error\"\n        })\n        .catch();\n    }\n  }\n\n  private combineData(\n    firstArray: StzhMapGeoRefData[] | StzhPoiGeoRefData[],\n    secondArray: StzhMapGeoRefData[] | StzhPoiGeoRefData[]\n  ): StzhCombinedGeoRefData[] {\n    if (!firstArray.length || !secondArray.length) {\n      return [];\n    }\n    // determine which array is smaller for performance\n    let smallerArray: any[];\n    let largerArray: any[];\n\n    if (firstArray.length < secondArray.length) {\n      smallerArray = firstArray;\n      largerArray = secondArray;\n    } else {\n      smallerArray = secondArray;\n      largerArray = firstArray;\n    }\n    // combine arrays based on poiid\n    return smallerArray\n      .map(item => {\n        const matchingItem = largerArray.find(largerArrayItem => largerArrayItem.poiid === item.poiid);\n        return { ...item, ...matchingItem };\n      })\n      .sort((a, b) => {\n        try {\n          return a.title.localeCompare(b.title); // Sorts alphabetically by the 'name' property\n        } catch (noTitleException) {\n          return 1;\n        }\n      });\n  }\n\n  private enhanceTags(availableTags: StzhAvailableTag[], combinedData: StzhCombinedGeoRefData[]): StzhChipselectItem[] {\n    return availableTags\n      .sort((a, b) => {\n        try {\n          a.label.localeCompare(b.label);\n        } catch (noLabelException) {\n          return 1;\n        }\n      })\n      .map(tag => {\n        const counter = combinedData\n          .filter(item => {\n            try {\n              return item.tags.includes(tag.value);\n            } catch (noTagsException) {\n              return false;\n            }\n          })\n          .length.toString();\n        return { ...tag, counter, variant: \"filter\", size: \"large\" };\n      });\n  }\n\n  private buildSearchIndex(data: StzhCombinedGeoRefData[]) {\n    if (!data.length) {\n      return;\n    }\n    this.searchIndex = new Document({\n      tokenize: \"forward\",\n      matcher: {\n        \"[äà]\": \"a\",\n        \"[öó]\": \"o\",\n        \"[üûúù]\": \"u\",\n        \"[éè]\": \"e\"\n      },\n      document: {\n        id: this.searchIndexIdField,\n        index: this.searchIndexFields\n      }\n    });\n    data.forEach(item => {\n      this.searchIndex.add(item);\n    });\n  }\n\n  @Listen(\"stzhPostRender\")\n  @Listen(\"stzhMovePanZoom\")\n  async mapMovedPannedOrZoomed() {\n    await this.setVisibleMarkers();\n  }\n\n  private async setVisibleMarkers() {\n    if (this.combinedData) {\n      const visibleMarkers = await this.mapElement.getVisibleMarkers();\n      if (this.showOnlyResultsForCurrentExtent) {\n        this.finalResults = this.combinedData.filter(item =>\n          visibleMarkers.find(visibleMarker => visibleMarker.getId() === item.poiid)\n        );\n      } else {\n        this.finalResults = this.combinedData;\n      }\n      this.setEnhancedTags();\n      await this.setPaginatedResults();\n    }\n  }\n\n  private async setPaginatedResults() {\n    this.finalResultsPaginatedList = this.finalResults.slice(0, this.numberOfItemsToLoad);\n    this.canLoadMore = this.finalResults.length > this.numberOfItemsToLoad;\n  }\n\n  private async checkDirectOpenViaUrl() {\n    const urlParams = new URLSearchParams(window.location.search);\n    const idFromUrl = urlParams.get(\"al\");\n\n    if (idFromUrl && idFromUrl === this.al) {\n      await this.initializeAndOpenMap();\n    }\n  }\n\n  connectedCallback() {\n    this.mediaChangeHandler();\n    addMediaChangeListener(this.mediaChangeHandler);\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n    this.availableTagsWatcher(this.availableTags);\n    this.resetTagWatcher(this.resetTag);\n    this.checkDirectOpenViaUrl();\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  private async initializeAndOpenMap() {\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.isLoading = true;\n    this.isOpen = true;\n\n    // Write the \"al\" prop of the component to the current URL as query param if it is not already there\n    const urlParams = new URLSearchParams(window.location.search);\n    if (!urlParams.has(\"al\")) {\n      urlParams.set(\"al\", this.al);\n      const newUrl = `${window.location.pathname}?${urlParams.toString()}`;\n      history.replaceState(null, \"\", newUrl);\n    }\n\n    try {\n      this.combinedData = this.combineData(await this.loadMapData(), await this.loadPoiData());\n      this.setEnhancedTags();\n      this.applyFiltersFromUrl();\n      this.buildSearchIndex(this.combinedData);\n      this.finalResults = this.combinedData;\n      await this.setVisibleMarkers();\n      await this.combineFilterAndSearchResults();\n      await this.handleResize();\n\n      const urlParams = new URLSearchParams(window.location.search);\n      const extent = [\n        parseFloat(urlParams.get(\"extent[0]\")),\n        parseFloat(urlParams.get(\"extent[1]\")),\n        parseFloat(urlParams.get(\"extent[2]\")),\n        parseFloat(urlParams.get(\"extent[3]\"))\n      ];\n\n      if (!extent.length || isNaN(extent[0]) || isNaN(extent[1]) || isNaN(extent[2]) || isNaN(extent[3])) {\n        await this.mapElement.updateViewToFitMarkers();\n      }\n\n      await this.handleResize();\n      this.isInitialized = true;\n    } catch (mapException) {\n      this.toastbarElement\n        .toast(\"Beim Laden der Karte ist ein Fehler aufgetreten.\", {\n          type: \"error\"\n        })\n        .catch();\n    }\n\n    setTimeout(() => {\n      this.isLoading = false;\n    }, 500);\n  }\n\n  private updateUrlWithFilters() {\n    const urlParams = new URLSearchParams(window.location.search);\n\n    // Remove existing filters from URL\n    Array.from(urlParams.keys()).forEach(key => {\n      if (key.startsWith(\"filters[\")) {\n        urlParams.delete(key);\n      }\n    });\n\n    // Add the selected filters from `appliedFilters` to the URL\n    this.appliedFilters.forEach(filter => {\n      urlParams.set(`filters[${filter}]`, \"true\");\n    });\n\n    // Update the URL without reloading the page\n    const newUrl = `${window.location.pathname}?${urlParams.toString()}`;\n    history.replaceState(null, \"\", newUrl);\n  }\n\n  private setEnhancedTags() {\n    this.enhancedTags = this.enhanceTags(this._availableTags, this.finalResults);\n    const enhancedResetTag: StzhChipselectItem = {\n      ...this._resetTag,\n      counter: this.finalResults.length.toString(),\n      size: \"large\"\n    };\n    if (this._resetTag) {\n      this.enhancedTags.unshift(enhancedResetTag);\n    }\n  }\n\n  private handleFilterChange = async (e: CustomEvent<StzhChipselectChangeEvent>) => {\n    let filtersArray = Array.isArray(e.detail.value) ? e.detail.value : [e.detail.value];\n    if (filtersArray.length === 1 && filtersArray[0] === this._resetTag.value) {\n      this.appliedFilters = [];\n    } else {\n      try {\n        filtersArray = filtersArray.filter(filterValue => filterValue !== \"\");\n      } catch (noEmptyFilter) {\n        // nothing to do here\n      }\n      this.appliedFilters = filtersArray;\n    }\n    setTimeout(async () => {\n      await this.handleFilterResults();\n    });\n  };\n\n  private async handleFilterResults() {\n    // Update the component state based on the selected filters\n    if (this.appliedFilters.length !== 0) {\n      this.filterResults = this.finalResults.filter(\n        item => item.tags && item.tags.some(tag => this.appliedFilters.includes(tag))\n      );\n      this.filterActive = true;\n    } else {\n      this.filterActive = false;\n      this.filterResults = this.finalResults;\n    }\n\n    // Update the URL with the applied filters\n    this.updateUrlWithFilters();\n\n    // Combine the results from filters and search\n    await this.combineFilterAndSearchResults();\n  }\n\n  private handleExtentVisibilityChange = async e => {\n    this.showOnlyResultsForCurrentExtent = e.detail.checked;\n    await this.setVisibleMarkers();\n  };\n\n  private handleSearchChange = async (e: CustomEvent) => {\n    if (e.detail.value !== \"\") {\n      if (!this.searchIndex) {\n        return;\n      }\n      const searchResults = this.searchIndex.search(e.detail.value);\n      const flatSearchResults = searchResults.flatMap(field => field.result);\n      this.searchResults = new Set(flatSearchResults);\n      this.searchActive = true;\n    } else {\n      this.searchActive = false;\n    }\n    await this.combineFilterAndSearchResults();\n  };\n\n  private async combineFilterAndSearchResults() {\n    if (this.filterActive && !this.searchActive) {\n      this.finalResults = this.filterResults;\n    } else if (!this.filterActive && this.searchActive) {\n      this.finalResults = Array.from(this.searchResults).map(id => this.combinedData.find(item => item.poiid === id));\n    } else if (this.filterActive && this.searchActive) {\n      this.finalResults = this.filterResults.filter(item => this.searchResults.has(item.poiid));\n    } else {\n      this.finalResults = this.combinedData;\n    }\n\n    this.finalResultsPaginatedList = this.finalResults.slice(0, this.numberOfItemsToLoad);\n\n    await this.replaceMapMarkers(this.finalResults);\n  }\n\n  private loadMore() {\n    this.finalResultsPaginationOffset++;\n    const sliced = this.finalResults.slice(\n      this.finalResultsPaginationOffset * this.numberOfItemsToLoad,\n      this.finalResultsPaginationOffset * this.numberOfItemsToLoad + this.numberOfItemsToLoad\n    );\n    if (!sliced || !sliced.length || sliced.length < this.numberOfItemsToLoad) {\n      this.canLoadMore = false;\n    }\n    this.finalResultsPaginatedList = this.finalResultsPaginatedList.concat(sliced);\n  }\n\n  private async replaceMapMarkers(items: StzhCombinedGeoRefData[]) {\n    await this.mapElement.removeAllIconMarkers();\n    items\n      .filter(item => !!item.lat && !!item.lon)\n      .forEach(item => {\n        this.mapElement\n          .addIconMarker([\n            parseFloat(item.lat),\n            parseFloat(item.lon)\n          ], {\n            id: item.poiid,\n            title: item.title,\n            text: item.description,\n            data: item.data,\n            imageUri: `${this.baseUrlOverride}${item.image}`,\n            href: `${this.baseUrlOverride}${item.path}`\n          })\n          .catch();\n      });\n    if (!this.showOnlyResultsForCurrentExtent) {\n      this.mapElement.updateViewToFitMarkers().catch();\n    }\n  }\n\n  private toggleViewMode = () => {\n    if (this.viewmode === \"map\") {\n      this.viewmode = \"list\";\n    } else {\n      this.viewmode = \"map\";\n    }\n  };\n\n  private async handlePoiTeaserMouseEnter(item: StzhCombinedGeoRefData) {\n    const marker = await this.mapElement.findMarkerById(item.poiid);\n    if (marker) {\n      await this.mapElement.setIconMarkerActive(marker);\n    }\n  }\n\n  private async handlePoiTeaserMouseLeave(item: StzhCombinedGeoRefData) {\n    const marker = await this.mapElement.findMarkerById(item.poiid);\n    if (marker) {\n      await this.mapElement.setIconMarkerInactive(marker);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-geo-ref-data\": true,\n      \"stzh-geo-ref-data--is-loading\": this.isLoading,\n      \"stzh-geo-ref-data--is-open\": this.isOpen,\n      \"stzh-geo-ref-data--has-filters\": this._availableTags.length > 0\n    };\n    return (\n      <Host>\n        <stzh-toastbar ref={el => (this.toastbarElement = el as HTMLStzhToastbarElement)} />\n        <div class=\"stzh-geo-ref-data__trigger\" onClick={() => this.initializeAndOpenMap()}>\n          <slot name=\"trigger\"></slot>\n        </div>\n        <stzh-overlay open={this.isLoading}>\n          <stzh-loader label=\"Daten werden geladen...\"></stzh-loader>\n        </stzh-overlay>\n        <div class={classes}>\n          <div class=\"stzh-geo-ref-data__header-wrapper\">\n            <stzh-header class=\"stzh-geo-ref-data__header\" hide-metabar={true} sticky=\"disabled\">\n              <slot name=\"logo\" slot=\"logo\"></slot>\n            </stzh-header>\n            <div class=\"stzh-geo-ref-data__heading stzh-geo-ref-data--content-padding\">\n              <stzh-heading class=\"stzh-geo-ref-data__heading-heading\" curve=\"h2\">\n                {this.heading}\n              </stzh-heading>\n              <stzh-button\n                class=\"stzh-geo-ref-data__overlay-close\"\n                icon=\"close\"\n                iconOnly={true}\n                size=\"small\"\n                variant=\"tertiary\"\n                onClick={this.handleOverlayCloseClick}\n              ></stzh-button>\n            </div>\n          </div>\n\n          <div class=\"stzh-geo-ref-data__content\">\n            <div\n              class=\"stzh-geo-ref-data__meta-wrapper stzh-geo-ref-data--content-padding\"\n              ref={el => (this.metaWrapperElement = el as HTMLDivElement)}\n            >\n              <div class=\"stzh-geo-ref-data__filters\">\n                {this._availableTags.length > 0 && (\n                  <div class=\"stzh-geo-ref-data__filters-toggle\">\n                    <stzh-chip\n                      label={this.isViewportMedium ? \"Filter\" : \"\"}\n                      variant=\"filter\"\n                      icon=\"filtering\"\n                      onStzhClick={this.handleFilterToggleClick}\n                    ></stzh-chip>\n                  </div>\n                )}\n                <div\n                  class={{\n                    \"stzh-geo-ref-data__filters-content\": true,\n                    \"stzh-geo-ref-data__filters-content--visible\": !this.isViewportLarge && this.isFiltersContentOpen\n                  }}\n                >\n                  <stzh-chipselect\n                    label-hidden={true}\n                    label=\"Tags\"\n                    data={this.enhancedTags}\n                    onStzhChange={this.handleFilterChange}\n                    multiple={true}\n                    defaultValue={this.appliedFilters}\n                    value={this.appliedFilters}\n                  ></stzh-chipselect>\n                  <div class=\"stzh-geo-ref-data__filters-apply-button\">\n                    <stzh-button size=\"small\" fullwidth={true} onStzhClick={this.handleApplyFilterClick}>\n                      Anwenden\n                    </stzh-button>\n                  </div>\n                </div>\n              </div>\n              <div class=\"stzh-geo-ref-data__search\">\n                <stzh-input\n                  name=\"stzh-datatable-search\"\n                  onStzhChange={this.handleSearchChange}\n                  hideOptional={true}\n                  label=\"Suche\"\n                  type=\"search\"\n                ></stzh-input>\n              </div>\n              <div class=\"stzh-geo-ref-data__results-toggle\">\n                <stzh-chip\n                  onStzhClick={this.toggleViewMode}\n                  label={this.viewmode === \"map\" ? \"Liste\" : \"Karte\"}\n                  icon={this.viewmode === \"map\" ? \"bulleted-list\" : \"map\"}\n                  variant=\"filter\"\n                ></stzh-chip>\n              </div>\n            </div>\n            <div class=\"stzh-geo-ref-data__results-wrapper\">\n              <div class={`stzh-geo-ref-data__results-map ${this.viewmode === \"map\" ? \"active\" : \"inactive\"}`}>\n                <stzh-olmap\n                  class=\"stzh-geo-ref-data__ol-map\"\n                  centerMarker={false}\n                  writeExtentToUrlEnabled={this.isOpen}\n                  ref={el => (this.mapElement = el as HTMLStzhOlmapElement)}\n                ></stzh-olmap>\n                <div class=\"stzh-geo-ref-data__map-controls\">\n                  <stzh-checkbox\n                    label=\"Treffer an Kartenausschnitt anpassen\"\n                    checked={this.showOnlyResultsForCurrentExtent}\n                    hideOptional={true}\n                    onStzhChange={this.handleExtentVisibilityChange}\n                  ></stzh-checkbox>\n                </div>\n              </div>\n              <div\n                class={`stzh-geo-ref-data__results-list ${this.viewmode === \"list\" ? \"active\" : \"inactive\"}`}\n                ref={el => (this.resultsListElement = el as HTMLDivElement)}\n              >\n                {this.finalResults && (\n                  <Fragment>\n                    <div class=\"stzh-geo-ref-data__list-search\">\n                      <stzh-input\n                        name=\"stzh-datatable-search\"\n                        onStzhChange={this.handleSearchChange}\n                        hideOptional={true}\n                        label=\"Suche\"\n                        type=\"search\"\n                      ></stzh-input>\n                    </div>\n                    <stzh-text class=\"stzh-geo-ref-data__results-list-heading\">\n                      {this.finalResults.length} Treffer\n                    </stzh-text>\n                    <div class=\"stzh-geo-ref-data__teaser-list\">\n                      {this.finalResultsPaginatedList.map(item => (\n                        <div\n                          class=\"stzh-poi-teaser\"\n                          onMouseEnter={() => this.handlePoiTeaserMouseEnter(item)}\n                          onMouseLeave={() => this.handlePoiTeaserMouseLeave(item)}\n                        >\n                          <a class=\"stzh-poi-teaser-link\" href={this.baseUrlOverride + item.path}></a>\n                          <div class=\"stzh-poi-teaser-content\">\n                            <stzh-heading curve=\"lead\">{item.poiname}</stzh-heading>\n                            {item.description && <stzh-text size=\"micro\">{item.description}</stzh-text>}\n                            {item.data &&\n                              item.data.length > 0 &&\n                              item.data.map(item => (\n                                <div class=\"stzh-poi-teaser-list-item\">\n                                  <stzh-icon name={item.icon}></stzh-icon>\n                                  <stzh-text size=\"micro\">{item.text}</stzh-text>\n                                </div>\n                              ))}\n                          </div>\n                          {item.image && (\n                            <div class=\"stzh-poi-teaser__image-wrapper\">\n                              <stzh-ratio\n                                ratio={\"2:1\"}\n                                ratio-large={\"5:4\"}\n                                ratio-ultra={\"1:1\"}\n                                portrait={this.isViewportLarge}\n                                class=\"stzh-poi-teaser__ratio\"\n                              ></stzh-ratio>\n                              <div class=\"stzh-poi-teaser__image-inner-wrapper\">\n                                <img src={this.baseUrlOverride + item.image} alt={\"Foto von \" + item.poiname} />\n                              </div>\n                            </div>\n                          )}\n                        </div>\n                      ))}\n                    </div>\n                    {this.canLoadMore && (\n                      <div class=\"stzh-geo-ref-data__teaser-load-more\">\n                        <stzh-button onStzhClick={() => this.loadMore()}>Weitere laden</stzh-button>\n                      </div>\n                    )}\n                  </Fragment>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-da2c88a2.entry.js

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

package/dist/stzh-components/p-da2c88a2.entry.js.map

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