@oiz/stzh-components 3.1.0 → 3.2.0-beta1

package/dist/stzh-components/{p-56346206.entry.js → p-d9fa718c.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,c as e,h as t,F as a,a as i,g as r}from"./p-c7bfac7a.js";import{a as h}from"./p-a771013b.js";import{r as n,h as l}from"./p-7e304ea3.js";import{m as c,a as o,r as d}from"./p-10e2901a.js";import{d as m}from"./p-dd385618.js";import"./p-9b063923.js";import"./p-7183ba4d.js";const z=':host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-search{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;--filter-background-color:var(--stzh-search-filter-background-color, var(--stzh-color-grey10));--grid-template-areas:"filters-main filters-main filters-main filters-main" "results results results results"}stzh-search[hidden]{display:none}stzh-search::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-search::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-search *,stzh-search *::before,stzh-search *::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)}stzh-search .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-search .stzh-fylingfocus-focused{outline-style:none !important}stzh-search .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}@media screen and (min-width: 900px){stzh-search{--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" "results results results results results results results results"}}@media screen and (min-width: 1260px){stzh-search{--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" ". . results results results results results results results results . ."}}stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters="false"]))){--grid-template-areas:"filters-main filters-main filters-main filters-main" "filters-aside filters-aside filters-aside filters-aside" "results results results results"}@media screen and (min-width: 900px){stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters="false"]))){--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" "filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside" "results results results results results results results results"}}@media screen and (min-width: 1260px){stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters="false"]))){--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" "filters-aside filters-aside filters-aside filters-aside results results results results results results results results"}}@media screen and (min-width: 1260px){stzh-search:where([variant="teaser"]){--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" "results results results results results results results results results results results results"}}.stzh-search{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas);}@media screen and (min-width: 600px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-search{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-search{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-search__filters-main{grid-area:filters-main}.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xlarge);background-color:var(--filter-background-color)}@media screen and (min-width: 900px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xxxlarge)}}.stzh-search__filters-aside{grid-area:filters-aside}.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xlarge);background-color:var(--filter-background-color)}@media screen and (min-width: 900px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside:not(:empty){background-color:transparent;padding:0}}.stzh-search__filters-aside-heading{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-h4-default-text-letter-spacing);padding-bottom:var(--stzh-space-xsmall);color:var(--stzh-color-primary70);display:none}@media screen and (min-width: 600px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h4-small-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h4-large-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-search__filters-aside-heading{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{display:block}}@media screen and (min-width: 1260px){.stzh-search stzh-button.stzh-search__filters-aside-details-trigger{display:none}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-inner{position:-webkit-sticky;position:sticky;top:calc(var(--stzh-header-metabar-height, 0px) * var(--stzh-header-is-stuck, 0) + var(--stzh-space-medium));transition:top var(--stzh-base-transition-animation-speed);width:calc(100% + var(--stzh-grid-gutter-large) - var(--stzh-space-xxxxlarge))}}@media screen and (min-width: 1600px){.stzh-search__filters-aside-inner{width:calc(100% + var(--stzh-grid-gutter-ultra) - var(--stzh-space-xxxxlarge))}}.stzh-search__results-wrapper{grid-area:results;display:grid}.stzh-search__results-heading,.stzh-search__results-empty,.stzh-search__results,.stzh-search__action-more{transition-property:opacity;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-search__results-heading{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search__results-item{display:contents}.stzh-search__actions-wrapper{display:flex;justify-content:center}.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xxxlarge)}}.stzh-search__empty-text{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search__loader{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-search__loader{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__loader{margin-top:var(--stzh-space-xxxlarge)}}.stzh-search__filters-main-chips{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-search__filters-main-chips{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-main-chips{margin-top:var(--stzh-space-xxxlarge)}}.stzh-search--teaser .stzh-search__actions-wrapper{justify-content:flex-start}.stzh-search--teaser .stzh-search__filters-main:not(:empty){padding:0;background-color:transparent}.stzh-search--teaser .stzh-search__filters-aside:not(:empty){padding:0;background-color:transparent}@media screen and (max-width: 1259px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (max-width: 1259px) and (min-width: 600px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-big)}}@media screen and (max-width: 1259px) and (min-width: 900px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-big)}}@media screen and (max-width: 1259px) and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (max-width: 1259px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xlarge)}}@media screen and (max-width: 1259px) and (min-width: 900px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxlarge)}}@media screen and (max-width: 1259px) and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxlarge)}}.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-xxlarge)}}.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-aside:not(:empty){padding-top:0px}.stzh-search--has-hidden-main-filters .stzh-search__filters-main{display:none}.stzh-search--has-hidden-aside-filters .stzh-search__filters-aside{display:none}.stzh-search--has-hidden-main-filters .stzh-search__results-wrapper,.stzh-search--has-hidden-main-filters.stzh-search--teaser .stzh-search__results-wrapper{margin-top:0px}.stzh-search--is-loading .stzh-search__results-heading,.stzh-search--is-loading .stzh-search__results-empty,.stzh-search--is-loading .stzh-search__results,.stzh-search--is-loading .stzh-search__action-more{opacity:0.5}.stzh-search--is-breakout{--filter-background-color:var(--stzh-color-cobaltblue20);background-color:var(--stzh-color-white)}.stzh-search--is-breakout .stzh-search{padding-left:1.25rem;padding-right:1.25rem}@media screen and (min-width: 600px){.stzh-search--is-breakout .stzh-search{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-search--is-breakout .stzh-search{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-search--is-breakout .stzh-search{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-search--is-breakout .stzh-search{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-search--is-breakout .stzh-search__header-wrapper{background-color:var(--stzh-color-cobaltblue20)}.stzh-search--is-breakout .stzh-search__filters-main{padding-left:1.25rem;padding-right:1.25rem;position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width))}@media screen and (min-width: 600px){.stzh-search--is-breakout .stzh-search__filters-main{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-search--is-breakout .stzh-search__filters-main{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-search--is-breakout .stzh-search__filters-main{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-search--is-breakout .stzh-search__filters-main{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-search--is-breakout .stzh-search__header{margin-left:1.25rem;margin-right:1.25rem;padding-top:var(--stzh-space-xlarge);background-color:var(--stzh-color-cobaltblue20);display:flex;justify-content:space-between}@media screen and (min-width: 600px){.stzh-search--is-breakout .stzh-search__header{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-search--is-breakout .stzh-search__header{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-search--is-breakout .stzh-search__header{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-search--is-breakout .stzh-search__header{margin-left:auto;margin-right:auto;max-width:84.25rem}}@media screen and (min-width: 900px){.stzh-search--is-breakout .stzh-search__header{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search--is-breakout .stzh-search__header{padding-top:var(--stzh-space-xxxlarge)}}';function p(s,e){return`\n    <stzh-card-${s.variant==="teaser"?"superteaser":"searchresult"}\n      href="{href}"\n      dateline="{dateline}"\n      tag="{tag}"\n      topic="{topic}"\n      service="{service}"\n      event-location="{eventLocation}"\n      ${e.eventDateStart&&'event-date-start="{eventDateStart}"'}\n      ${e.eventDateEnd&&'event-date-end="{eventDateEnd}"'}\n      download-heading="{downloadHeading}"\n      meta='{meta}'\n      breadcrumb-items='{breadcrumbItems}'\n      download-meta='{downloadMeta}'\n      datalist-items='{datalistItems}'\n      ${e.imagePosition&&'image-position="{imagePosition}"'}\n      ${e.download&&'download="{download}"'}\n      style="\n        ${e.serviceBackgroundColor?"--service-background-color: {serviceBackgroundColor};":""}\n        ${e.serviceColor?"--service-color: {serviceColor};":""}\n      "\n    >\n      <div slot="heading">{heading}</div>\n      <div slot="description">{description}</div>\n      ${e.image?e.imagePosition==="right"?`<img src="${e.image}" slot="image" />`:`<stzh-ratio ${s.variant==="teaser"?'ratio="2:1"':'ratio="21:9" ratio-small="1:1"'} slot="image"><img src="${e.image}" /></stzh-ratio>`:""}\n    </stzh-card-${s.variant==="teaser"?"superteaser":"searchresult"}>\n  `}function f(s){return{layout:s.variant==="teaser"?"teasers":"searchresults"}}const g=class{constructor(t){s(this,t);this.stzhOverlayCloseClick=e(this,"stzhOverlayCloseClick",7);this._showMoreLink=false;this.fetch=async(s=false,e=false)=>{var t,a;if(this.currentController){this.currentController.abort()}if(!this.hasRequiredParams&&!s){this.loading=false;return}this.loading=true;this.error="";let i=this.api.replace(/\{lang\}/gi,this.localization.$locale);let r=this.limit.toString();this.params.set("offset",s?this.results.length.toString():"0");if(e){const s=new URLSearchParams(location.search).get("search");if(s){const e=new URLSearchParams(s).get("limit");if(e){r=e}}}this.params.set("limit",r);this.currentController=new AbortController;let n={};try{const s=await h(i,{params:this.params,signal:this.currentController.signal});n=s.data}catch(s){this.error=this.localization.error}this.resultsHeading=n.resultsHeading||"";this.totalCount=((t=n.meta)===null||t===void 0?void 0:t.total)||0;if(n.error){this.error=n.message||this.localization.error}if(n.chipResults&&n.chipResults.length){this.chipResultsHeading=(a=n.chipResultsHeading)!==null&&a!==void 0?a:"";this.chipResults=n.chipResults}else{this.chipResultsHeading="";this.chipResults=[]}if(n.results){if(s){this.results=[...this.results,...n.results.map((s=>{var e;return Object.assign(Object.assign({},s),{html:this.renderResultTemplate(s.html||((e=n.templates)===null||e===void 0?void 0:e.result),s)})}))]}else{this.results=n.results.map((s=>{var e;return Object.assign(Object.assign({},s),{html:this.renderResultTemplate(s.html||((e=n.templates)===null||e===void 0?void 0:e.result),s)})}))}}if(!e&&!this.preventUpdateUrl){const s=new URLSearchParams(location.search);const e=new URLSearchParams(this.params);e.delete("offset");e.set("limit",this.results.length.toString());s.set("search",e.toString());window.history.replaceState(null,"",`${location.pathname}?${s}`)}if(e||!this.firstFetched){this.loading=false}else{window.setTimeout((()=>{this.loading=false}),this.debounceTime)}this.firstFetched=true};this.debouncedFetch=m(this.fetch,this.debounceTime);this.handleMainFilterChange=async()=>{if(this.autofetchMainFilters){await this.updateParams();this.debouncedFetch()}};this.handleAsideFilterChange=async()=>{if(this.autofetchAsideFilters){await this.updateParams();this.debouncedFetch()}};this.handleFormSubmit=async s=>{s.preventDefault();await this.updateParams();this.fetch()};this.handleMoreClick=()=>{this.fetch(true)};this.handleMediaChange=()=>{this.isDetailsOpen=c("large").matches};this.handleFormReset=async()=>{requestAnimationFrame((()=>{requestAnimationFrame((async()=>{await this.updateParams()}))}))};this.handleOverlayCloseClick=s=>{this.stzhOverlayCloseClick.emit({component:"stzh-search",originalEvent:s})};this.localization=undefined;this.variant="default";this.breakout=false;this.autofetchMainFilters=false;this.autofetchAsideFilters=false;this.hideMainFilters=false;this.hideAsideFilters=false;this.api="";this.debounceTime=500;this.limit=6;this.initialFetch=false;this.preventUpdateUrl=false;this.templateResult=p;this.templateResultWrapperElement=function(){return"stzh-cardlist"};this.templateResultWrapperProps=f;this.resultHeadingLevel="3";this.emptyText=undefined;this.heading=undefined;this.emptyLinkHref=undefined;this.emptyLinkLabel=undefined;this.totalCount=0;this.loading=false;this.error="";this.results=[];this.chipResultsHeading=undefined;this.chipResults=[];this.resultsHeading=undefined;this.hasRequiredParams=false;this.firstFetched=false;this.initiallyFetched=false;this.isDetailsOpen=false}totalCountWatcher(){this._showMoreLink=this.totalCount>this.results.length}preventUpdateUrlWatcher(){this.updateParams()}renderResultTemplate(s,e){let t=s||(typeof this.templateResult==="function"?this.templateResult(this.element,e):this.templateResult);["href","heading","dateline","description","image","imagePosition","tag","topic","service","serviceColor","serviceBackgroundColor","meta","breadcrumbItems","eventLocation","eventDateStart","eventDateEnd","download","downloadHeading","downloadMeta","datalistItems"].forEach((s=>{const a=new RegExp(`{${s}}`,"gi");let i=e[s]||"";if(["meta","breadcrumbItems","downloadMeta","datalistItems"].includes(s)&&i){i=JSON.stringify(i)}t=t.replace(a,i)}));return t}async updateParams(s=false){const e=()=>{const s=new FormData(this.formElement);this.params=new URLSearchParams(s);this.params.set("variant",this.variant)};if(s){const s=new URLSearchParams(location.search);const e=s.get("search");if(e){this.initialFetch=true;const s=new URLSearchParams(e);[...new Set(s.keys())].forEach((e=>{const t=s.getAll(e);const a=Array.from(document.querySelectorAll(`:where(stzh-input,stzh-radiogroup,stzh-chipselect,stzh-amount,stzh-datepicker,stzh-monthyearpicker,stzh-timepicker,stzh-pagination,stzh-toggle)[name="${e}"]`));const i=Array.from(document.querySelectorAll(`:where(stzh-checkboxgroup)[name="${e}"]`));const r=Array.from(document.querySelectorAll(`:where(stzh-dropdown)[name="${e}"]`));a.forEach((s=>{s.value=t[0]}));i.forEach((s=>{s.value=t}));r.forEach((s=>{s.items=t}))}))}}await n();e();let t=true;const a=Array.from(this.element.querySelectorAll(":where(stzh-input)[required]"));const i=Array.from(this.element.querySelectorAll(":where(stzh-dropdown)[required]"));const r=Array.from(this.element.querySelectorAll(":where(stzh-monthyearpicker)[required]"));const h=Array.from(this.element.querySelectorAll(":where(stzh-amount,stzh-radiogroup,stzh-chipselect,stzh-datepicker,stzh-monthyearpicker,stzh-timepicker,stzh-pagination,stzh-toggle)[required]"));const l=Array.from(this.element.querySelectorAll(":where(stzh-checkbox)[required]"));l.forEach((e=>{const a=!e.checked;if(!s){e.invalid=a}if(a){t=false}}));a.forEach((e=>{const a=e.value===""||e.minlength&&e.minlength>e.value.length||e.maxlength&&e.maxlength<e.value.length;if(!s){e.invalid=a}if(a){t=false}}));i.forEach((e=>{const a=e.items.length===0;if(!s){e.invalid=a}if(a){t=false}}));h.forEach((e=>{const a=e.value.toString().length===0;if(!s){e.invalid=a}if(a){t=false}}));r.forEach((e=>{const a=e.value.toString().length===0;if(!s){e.invalidYear=a;e.invalidMonth=a}if(a){t=false}}));this.hasRequiredParams=t}async componentDidLoad(){await this.updateParams(true);if(this.initialFetch){await this.fetch(false,true);this.initiallyFetched=true}else{this.initiallyFetched=true}}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"search")}}connectedCallback(){o(this.handleMediaChange);this.handleMediaChange()}disconnectedCallback(){d(this.handleMediaChange)}render(){const s=l(this.element,"filters-main");const e=l(this.element,"filters-aside");let r=true;if(s){const s=this.element.querySelector("[slot='filters-main'] stzh-chipselect");const e=this.element.querySelector("[slot='filters-main'] stzh-chipgroup");if(!s&&!e){r=false}}else{r=false}const h=(this.hasRequiredParams||this.firstFetched)&&this.firstFetched&&this.initiallyFetched;const n={"stzh-search":true,"stzh-search--has-filters-main":s,"stzh-search--has-filters-aside":e,"stzh-search--has-hidden-main-filters":this.hideMainFilters,"stzh-search--has-hidden-aside-filters":this.hideAsideFilters,"stzh-search--has-results-shown":h,"stzh-search--has-error-shown":!!this.error,"stzh-search--is-loading":this.loading,[`stzh-search--${this.variant}`]:!!this.variant};const c=typeof this.templateResultWrapperElement==="function"?this.templateResultWrapperElement(this.element):this.templateResultWrapperElement;const o=typeof this.templateResultWrapperProps==="function"?this.templateResultWrapperProps(this.element):this.templateResultWrapperProps;return t(i,{"has-aside-filters":e,class:this.breakout?"stzh-search--is-breakout":""},this.breakout&&t("div",{class:"stzh-search__header-wrapper"},t("div",{class:"stzh-search__header"},t("stzh-heading",{class:"stzh-search__header-heading",curve:"h2"},this.heading),t("stzh-button",{class:"stzh-search__overlay-close",icon:"close",iconOnly:true,size:"small",variant:"tertiary",onClick:this.handleOverlayCloseClick}))),t("form",{ref:s=>this.formElement=s,novalidate:true,class:n,onSubmit:this.handleFormSubmit,onReset:this.handleFormReset},t("div",{class:"stzh-search__filters-main",onStzhChange:this.handleMainFilterChange},t("slot",{name:"filters-main"}),!r&&this.chipResults.length>0&&t("div",{class:"stzh-search__filters-main-chips"},this.chipResultsHeading&&t("stzh-text",{font:"heavy",size:"milli",color:"primary"},this.chipResultsHeading),this.chipResults[0].options?t("stzh-chipgroup",null,this.chipResults.map((s=>t("stzh-dropdown",{label:s.label,name:s.value,variant:"filter","no-search":true,"hide-optional":true,inline:true,options:s.options})))):t("stzh-chipselect",{multiple:true,name:"subject",label:this.chipResultsHeading,"label-hidden":true,data:this.chipResults.map((s=>({label:s.label,value:s.value,counter:`${s.amount}`,variant:"filter",size:"small"})))}))),e&&t(a,null,t("div",{class:"stzh-search__filters-aside",onStzhChange:this.handleAsideFilterChange},t("div",{class:"stzh-search__filters-aside-inner"},t("div",{class:"stzh-search__filters-aside-heading"},this.localization.moreFilter),t("stzh-details",{open:this.isDetailsOpen,class:"stzh-search__filters-aside-details"},t("stzh-button",{class:"stzh-search__filters-aside-details-trigger",variant:"tertiary-plain",size:"small",noPaddingLeft:true,showToggleIcon:true,iconPosition:"right",label:this.localization.moreFilter}),t("div",{slot:"content"},t("slot",{name:"filters-aside"})))))),t("div",{class:"stzh-search__results-wrapper"},h&&t(a,null,this.results.length===0?t(a,null,this.variant!=="teaser"&&this.resultsHeading&&t("stzh-heading",{class:"stzh-search__results-heading",curve:"h3",level:this.resultHeadingLevel,innerHTML:this.resultsHeading}),this.emptyText&&t("stzh-text",{class:"stzh-search__empty-text",innerHTML:this.emptyText}),this.emptyLinkLabel&&this.emptyLinkHref&&t("div",{class:"stzh-search__empty-link-wrapper"},t("stzh-link",{href:this.emptyLinkHref,label:this.emptyLinkLabel}))):t(a,null,this.variant!=="teaser"&&this.resultsHeading&&t("stzh-heading",{class:"stzh-search__results-heading",curve:"h3",level:this.resultHeadingLevel,innerHTML:this.resultsHeading}),t(c,Object.assign({class:"stzh-search__results"},o),this.results.map((s=>t("div",{class:"stzh-search__results-item",innerHTML:s.html||""})))),t("div",{class:"stzh-search__actions-wrapper"},this._showMoreLink&&t("stzh-button",{variant:"secondary",class:"stzh-search__action-more",label:this.localization.showMore,onClick:this.handleMoreClick,a11yDisabled:this.loading})))),this.error&&t("div",{class:"stzh-search__error"},t("stzh-message",{type:"error",label:this.error})),this.loading&&t("stzh-loader",{class:"stzh-search__loader"})),t("slot",null)))}get element(){return r(this)}static get watchers(){return{totalCount:["totalCountWatcher"],results:["totalCountWatcher"],preventUpdateUrl:["preventUpdateUrlWatcher"]}}};g.style=z;export{g as stzh_search};
-//# sourceMappingURL=p-56346206.entry.js.map
+import{r as s,c as e,h as t,F as a,a as i,g as r}from"./p-c7bfac7a.js";import{a as h}from"./p-a771013b.js";import{r as n,h as l}from"./p-e30a5acc.js";import{m as c,a as o,r as d}from"./p-10e2901a.js";import{d as m}from"./p-dd385618.js";import"./p-9b063923.js";import"./p-7183ba4d.js";const z=':host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-search{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;--filter-background-color:var(--stzh-search-filter-background-color, var(--stzh-color-grey10));--grid-template-areas:"filters-main filters-main filters-main filters-main" "results results results results"}stzh-search[hidden]{display:none}stzh-search::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-search::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-search *,stzh-search *::before,stzh-search *::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)}stzh-search .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-search .stzh-fylingfocus-focused{outline-style:none !important}stzh-search .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}@media screen and (min-width: 900px){stzh-search{--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" "results results results results results results results results"}}@media screen and (min-width: 1260px){stzh-search{--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" ". . results results results results results results results results . ."}}stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters="false"]))){--grid-template-areas:"filters-main filters-main filters-main filters-main" "filters-aside filters-aside filters-aside filters-aside" "results results results results"}@media screen and (min-width: 900px){stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters="false"]))){--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" "filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside" "results results results results results results results results"}}@media screen and (min-width: 1260px){stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters="false"]))){--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" "filters-aside filters-aside filters-aside filters-aside results results results results results results results results"}}@media screen and (min-width: 1260px){stzh-search:where([variant="teaser"]){--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" "results results results results results results results results results results results results"}}.stzh-search{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas);}@media screen and (min-width: 600px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-search{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-search{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-search__filters-main{grid-area:filters-main}.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xlarge);background-color:var(--filter-background-color)}@media screen and (min-width: 900px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xxxlarge)}}.stzh-search__filters-aside{grid-area:filters-aside}.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xlarge);background-color:var(--filter-background-color)}@media screen and (min-width: 900px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside:not(:empty){background-color:transparent;padding:0}}.stzh-search__filters-aside-heading{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-h4-default-text-letter-spacing);padding-bottom:var(--stzh-space-xsmall);color:var(--stzh-color-primary70);display:none}@media screen and (min-width: 600px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h4-small-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h4-large-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-search__filters-aside-heading{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{display:block}}@media screen and (min-width: 1260px){.stzh-search stzh-button.stzh-search__filters-aside-details-trigger{display:none}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-inner{position:-webkit-sticky;position:sticky;top:calc(var(--stzh-header-metabar-height, 0px) * var(--stzh-header-is-stuck, 0) + var(--stzh-space-medium));transition:top var(--stzh-base-transition-animation-speed);width:calc(100% + var(--stzh-grid-gutter-large) - var(--stzh-space-xxxxlarge))}}@media screen and (min-width: 1600px){.stzh-search__filters-aside-inner{width:calc(100% + var(--stzh-grid-gutter-ultra) - var(--stzh-space-xxxxlarge))}}.stzh-search__results-wrapper{grid-area:results;display:grid}.stzh-search__results-heading,.stzh-search__results-empty,.stzh-search__results,.stzh-search__action-more{transition-property:opacity;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-search__results-heading{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search__results-item{display:contents}.stzh-search__actions-wrapper{display:flex;justify-content:center}.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xxxlarge)}}.stzh-search__empty-text{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search__loader{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-search__loader{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__loader{margin-top:var(--stzh-space-xxxlarge)}}.stzh-search__filters-main-chips{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-search__filters-main-chips{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-main-chips{margin-top:var(--stzh-space-xxxlarge)}}.stzh-search--teaser .stzh-search__actions-wrapper{justify-content:flex-start}.stzh-search--teaser .stzh-search__filters-main:not(:empty){padding:0;background-color:transparent}.stzh-search--teaser .stzh-search__filters-aside:not(:empty){padding:0;background-color:transparent}@media screen and (max-width: 1259px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (max-width: 1259px) and (min-width: 600px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-big)}}@media screen and (max-width: 1259px) and (min-width: 900px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-big)}}@media screen and (max-width: 1259px) and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (max-width: 1259px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xlarge)}}@media screen and (max-width: 1259px) and (min-width: 900px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxlarge)}}@media screen and (max-width: 1259px) and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxlarge)}}.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-xxlarge)}}.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-aside:not(:empty){padding-top:0px}.stzh-search--has-hidden-main-filters .stzh-search__filters-main{display:none}.stzh-search--has-hidden-aside-filters .stzh-search__filters-aside{display:none}.stzh-search--has-hidden-main-filters .stzh-search__results-wrapper,.stzh-search--has-hidden-main-filters.stzh-search--teaser .stzh-search__results-wrapper{margin-top:0px}.stzh-search--is-loading .stzh-search__results-heading,.stzh-search--is-loading .stzh-search__results-empty,.stzh-search--is-loading .stzh-search__results,.stzh-search--is-loading .stzh-search__action-more{opacity:0.5}.stzh-search--is-breakout{--filter-background-color:var(--stzh-color-cobaltblue20);background-color:var(--stzh-color-white)}.stzh-search--is-breakout .stzh-search{padding-left:1.25rem;padding-right:1.25rem}@media screen and (min-width: 600px){.stzh-search--is-breakout .stzh-search{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-search--is-breakout .stzh-search{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-search--is-breakout .stzh-search{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-search--is-breakout .stzh-search{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-search--is-breakout .stzh-search__header-wrapper{background-color:var(--stzh-color-cobaltblue20)}.stzh-search--is-breakout .stzh-search__filters-main{padding-left:1.25rem;padding-right:1.25rem;position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width))}@media screen and (min-width: 600px){.stzh-search--is-breakout .stzh-search__filters-main{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-search--is-breakout .stzh-search__filters-main{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-search--is-breakout .stzh-search__filters-main{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-search--is-breakout .stzh-search__filters-main{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-search--is-breakout .stzh-search__header{margin-left:1.25rem;margin-right:1.25rem;padding-top:var(--stzh-space-xlarge);background-color:var(--stzh-color-cobaltblue20);display:flex;justify-content:space-between}@media screen and (min-width: 600px){.stzh-search--is-breakout .stzh-search__header{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-search--is-breakout .stzh-search__header{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-search--is-breakout .stzh-search__header{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-search--is-breakout .stzh-search__header{margin-left:auto;margin-right:auto;max-width:84.25rem}}@media screen and (min-width: 900px){.stzh-search--is-breakout .stzh-search__header{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search--is-breakout .stzh-search__header{padding-top:var(--stzh-space-xxxlarge)}}';function p(s,e){return`\n    <stzh-card-${s.variant==="teaser"?"superteaser":"searchresult"}\n      href="{href}"\n      dateline="{dateline}"\n      tag="{tag}"\n      topic="{topic}"\n      service="{service}"\n      event-location="{eventLocation}"\n      ${e.eventDateStart&&'event-date-start="{eventDateStart}"'}\n      ${e.eventDateEnd&&'event-date-end="{eventDateEnd}"'}\n      download-heading="{downloadHeading}"\n      meta='{meta}'\n      breadcrumb-items='{breadcrumbItems}'\n      download-meta='{downloadMeta}'\n      datalist-items='{datalistItems}'\n      ${e.imagePosition&&'image-position="{imagePosition}"'}\n      ${e.download&&'download="{download}"'}\n      style="\n        ${e.serviceBackgroundColor?"--service-background-color: {serviceBackgroundColor};":""}\n        ${e.serviceColor?"--service-color: {serviceColor};":""}\n      "\n    >\n      <div slot="heading">{heading}</div>\n      <div slot="description">{description}</div>\n      ${e.image?e.imagePosition==="right"?`<img src="${e.image}" slot="image" />`:`<stzh-ratio ${s.variant==="teaser"?'ratio="2:1"':'ratio="21:9" ratio-small="1:1"'} slot="image"><img src="${e.image}" /></stzh-ratio>`:""}\n    </stzh-card-${s.variant==="teaser"?"superteaser":"searchresult"}>\n  `}function f(s){return{layout:s.variant==="teaser"?"teasers":"searchresults"}}const g=class{constructor(t){s(this,t);this.stzhOverlayCloseClick=e(this,"stzhOverlayCloseClick",7);this._showMoreLink=false;this.fetch=async(s=false,e=false)=>{var t,a;if(this.currentController){this.currentController.abort()}if(!this.hasRequiredParams&&!s){this.loading=false;return}this.loading=true;this.error="";let i=this.api.replace(/\{lang\}/gi,this.localization.$locale);let r=this.limit.toString();this.params.set("offset",s?this.results.length.toString():"0");if(e){const s=new URLSearchParams(location.search).get("search");if(s){const e=new URLSearchParams(s).get("limit");if(e){r=e}}}this.params.set("limit",r);this.currentController=new AbortController;let n={};try{const s=await h(i,{params:this.params,signal:this.currentController.signal});n=s.data}catch(s){this.error=this.localization.error}this.resultsHeading=n.resultsHeading||"";this.totalCount=((t=n.meta)===null||t===void 0?void 0:t.total)||0;if(n.error){this.error=n.message||this.localization.error}if(n.chipResults&&n.chipResults.length){this.chipResultsHeading=(a=n.chipResultsHeading)!==null&&a!==void 0?a:"";this.chipResults=n.chipResults}else{this.chipResultsHeading="";this.chipResults=[]}if(n.results){if(s){this.results=[...this.results,...n.results.map((s=>{var e;return Object.assign(Object.assign({},s),{html:this.renderResultTemplate(s.html||((e=n.templates)===null||e===void 0?void 0:e.result),s)})}))]}else{this.results=n.results.map((s=>{var e;return Object.assign(Object.assign({},s),{html:this.renderResultTemplate(s.html||((e=n.templates)===null||e===void 0?void 0:e.result),s)})}))}}if(!e&&!this.preventUpdateUrl){const s=new URLSearchParams(location.search);const e=new URLSearchParams(this.params);e.delete("offset");e.set("limit",this.results.length.toString());s.set("search",e.toString());window.history.replaceState(null,"",`${location.pathname}?${s}`)}if(e||!this.firstFetched){this.loading=false}else{window.setTimeout((()=>{this.loading=false}),this.debounceTime)}this.firstFetched=true};this.debouncedFetch=m(this.fetch,this.debounceTime);this.handleMainFilterChange=async()=>{if(this.autofetchMainFilters){await this.updateParams();this.debouncedFetch()}};this.handleAsideFilterChange=async()=>{if(this.autofetchAsideFilters){await this.updateParams();this.debouncedFetch()}};this.handleFormSubmit=async s=>{s.preventDefault();await this.updateParams();this.fetch()};this.handleMoreClick=()=>{this.fetch(true)};this.handleMediaChange=()=>{this.isDetailsOpen=c("large").matches};this.handleFormReset=async()=>{requestAnimationFrame((()=>{requestAnimationFrame((async()=>{await this.updateParams()}))}))};this.handleOverlayCloseClick=s=>{this.stzhOverlayCloseClick.emit({component:"stzh-search",originalEvent:s})};this.localization=undefined;this.variant="default";this.breakout=false;this.autofetchMainFilters=false;this.autofetchAsideFilters=false;this.hideMainFilters=false;this.hideAsideFilters=false;this.api="";this.debounceTime=500;this.limit=6;this.initialFetch=false;this.preventUpdateUrl=false;this.templateResult=p;this.templateResultWrapperElement=function(){return"stzh-cardlist"};this.templateResultWrapperProps=f;this.resultHeadingLevel="3";this.emptyText=undefined;this.heading=undefined;this.emptyLinkHref=undefined;this.emptyLinkLabel=undefined;this.totalCount=0;this.loading=false;this.error="";this.results=[];this.chipResultsHeading=undefined;this.chipResults=[];this.resultsHeading=undefined;this.hasRequiredParams=false;this.firstFetched=false;this.initiallyFetched=false;this.isDetailsOpen=false}totalCountWatcher(){this._showMoreLink=this.totalCount>this.results.length}preventUpdateUrlWatcher(){this.updateParams()}renderResultTemplate(s,e){let t=s||(typeof this.templateResult==="function"?this.templateResult(this.element,e):this.templateResult);["href","heading","dateline","description","image","imagePosition","tag","topic","service","serviceColor","serviceBackgroundColor","meta","breadcrumbItems","eventLocation","eventDateStart","eventDateEnd","download","downloadHeading","downloadMeta","datalistItems"].forEach((s=>{const a=new RegExp(`{${s}}`,"gi");let i=e[s]||"";if(["meta","breadcrumbItems","downloadMeta","datalistItems"].includes(s)&&i){i=JSON.stringify(i)}t=t.replace(a,i)}));return t}async updateParams(s=false){const e=()=>{const s=new FormData(this.formElement);this.params=new URLSearchParams(s);this.params.set("variant",this.variant)};if(s){const s=new URLSearchParams(location.search);const e=s.get("search");if(e){this.initialFetch=true;const s=new URLSearchParams(e);[...new Set(s.keys())].forEach((e=>{const t=s.getAll(e);const a=Array.from(document.querySelectorAll(`:where(stzh-input,stzh-radiogroup,stzh-chipselect,stzh-amount,stzh-datepicker,stzh-monthyearpicker,stzh-timepicker,stzh-pagination,stzh-toggle)[name="${e}"]`));const i=Array.from(document.querySelectorAll(`:where(stzh-checkboxgroup)[name="${e}"]`));const r=Array.from(document.querySelectorAll(`:where(stzh-dropdown)[name="${e}"]`));a.forEach((s=>{s.value=t[0]}));i.forEach((s=>{s.value=t}));r.forEach((s=>{s.items=t}))}))}}await n();e();let t=true;const a=Array.from(this.element.querySelectorAll(":where(stzh-input)[required]"));const i=Array.from(this.element.querySelectorAll(":where(stzh-dropdown)[required]"));const r=Array.from(this.element.querySelectorAll(":where(stzh-monthyearpicker)[required]"));const h=Array.from(this.element.querySelectorAll(":where(stzh-amount,stzh-radiogroup,stzh-chipselect,stzh-datepicker,stzh-monthyearpicker,stzh-timepicker,stzh-pagination,stzh-toggle)[required]"));const l=Array.from(this.element.querySelectorAll(":where(stzh-checkbox)[required]"));l.forEach((e=>{const a=!e.checked;if(!s){e.invalid=a}if(a){t=false}}));a.forEach((e=>{const a=e.value===""||e.minlength&&e.minlength>e.value.length||e.maxlength&&e.maxlength<e.value.length;if(!s){e.invalid=a}if(a){t=false}}));i.forEach((e=>{const a=e.items.length===0;if(!s){e.invalid=a}if(a){t=false}}));h.forEach((e=>{const a=e.value.toString().length===0;if(!s){e.invalid=a}if(a){t=false}}));r.forEach((e=>{const a=e.value.toString().length===0;if(!s){e.invalidYear=a;e.invalidMonth=a}if(a){t=false}}));this.hasRequiredParams=t}async componentDidLoad(){await this.updateParams(true);if(this.initialFetch){await this.fetch(false,true);this.initiallyFetched=true}else{this.initiallyFetched=true}}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"search")}}connectedCallback(){o(this.handleMediaChange);this.handleMediaChange()}disconnectedCallback(){d(this.handleMediaChange)}render(){const s=l(this.element,"filters-main");const e=l(this.element,"filters-aside");let r=true;if(s){const s=this.element.querySelector("[slot='filters-main'] stzh-chipselect");const e=this.element.querySelector("[slot='filters-main'] stzh-chipgroup");if(!s&&!e){r=false}}else{r=false}const h=(this.hasRequiredParams||this.firstFetched)&&this.firstFetched&&this.initiallyFetched;const n={"stzh-search":true,"stzh-search--has-filters-main":s,"stzh-search--has-filters-aside":e,"stzh-search--has-hidden-main-filters":this.hideMainFilters,"stzh-search--has-hidden-aside-filters":this.hideAsideFilters,"stzh-search--has-results-shown":h,"stzh-search--has-error-shown":!!this.error,"stzh-search--is-loading":this.loading,[`stzh-search--${this.variant}`]:!!this.variant};const c=typeof this.templateResultWrapperElement==="function"?this.templateResultWrapperElement(this.element):this.templateResultWrapperElement;const o=typeof this.templateResultWrapperProps==="function"?this.templateResultWrapperProps(this.element):this.templateResultWrapperProps;return t(i,{"has-aside-filters":e,class:this.breakout?"stzh-search--is-breakout":""},this.breakout&&t("div",{class:"stzh-search__header-wrapper"},t("div",{class:"stzh-search__header"},t("stzh-heading",{class:"stzh-search__header-heading",curve:"h2"},this.heading),t("stzh-button",{class:"stzh-search__overlay-close",icon:"close",iconOnly:true,size:"small",variant:"tertiary",onClick:this.handleOverlayCloseClick}))),t("form",{ref:s=>this.formElement=s,novalidate:true,class:n,onSubmit:this.handleFormSubmit,onReset:this.handleFormReset},t("div",{class:"stzh-search__filters-main",onStzhChange:this.handleMainFilterChange},t("slot",{name:"filters-main"}),!r&&this.chipResults.length>0&&t("div",{class:"stzh-search__filters-main-chips"},this.chipResultsHeading&&t("stzh-text",{font:"heavy",size:"milli",color:"primary"},this.chipResultsHeading),this.chipResults[0].options?t("stzh-chipgroup",null,this.chipResults.map((s=>t("stzh-dropdown",{label:s.label,name:s.value,variant:"filter","no-search":true,"hide-optional":true,inline:true,options:s.options})))):t("stzh-chipselect",{multiple:true,name:"subject",label:this.chipResultsHeading,"label-hidden":true,data:this.chipResults.map((s=>({label:s.label,value:s.value,counter:`${s.amount}`,variant:"filter",size:"small"})))}))),e&&t(a,null,t("div",{class:"stzh-search__filters-aside",onStzhChange:this.handleAsideFilterChange},t("div",{class:"stzh-search__filters-aside-inner"},t("div",{class:"stzh-search__filters-aside-heading"},this.localization.moreFilter),t("stzh-details",{open:this.isDetailsOpen,class:"stzh-search__filters-aside-details"},t("stzh-button",{class:"stzh-search__filters-aside-details-trigger",variant:"tertiary-plain",size:"small",noPaddingLeft:true,showToggleIcon:true,iconPosition:"right",label:this.localization.moreFilter}),t("div",{slot:"content"},t("slot",{name:"filters-aside"})))))),t("div",{class:"stzh-search__results-wrapper"},h&&t(a,null,this.results.length===0?t(a,null,this.variant!=="teaser"&&this.resultsHeading&&t("stzh-heading",{class:"stzh-search__results-heading",curve:"h3",level:this.resultHeadingLevel,innerHTML:this.resultsHeading}),this.emptyText&&t("stzh-text",{class:"stzh-search__empty-text",innerHTML:this.emptyText}),this.emptyLinkLabel&&this.emptyLinkHref&&t("div",{class:"stzh-search__empty-link-wrapper"},t("stzh-link",{href:this.emptyLinkHref,label:this.emptyLinkLabel}))):t(a,null,this.variant!=="teaser"&&this.resultsHeading&&t("stzh-heading",{class:"stzh-search__results-heading",curve:"h3",level:this.resultHeadingLevel,innerHTML:this.resultsHeading}),t(c,Object.assign({class:"stzh-search__results"},o),this.results.map((s=>t("div",{class:"stzh-search__results-item",innerHTML:s.html||""})))),t("div",{class:"stzh-search__actions-wrapper"},this._showMoreLink&&t("stzh-button",{variant:"secondary",class:"stzh-search__action-more",label:this.localization.showMore,onClick:this.handleMoreClick,a11yDisabled:this.loading})))),this.error&&t("div",{class:"stzh-search__error"},t("stzh-message",{type:"error",label:this.error})),this.loading&&t("stzh-loader",{class:"stzh-search__loader"})),t("slot",null)))}get element(){return r(this)}static get watchers(){return{totalCount:["totalCountWatcher"],results:["totalCountWatcher"],preventUpdateUrl:["preventUpdateUrlWatcher"]}}};g.style=z;export{g as stzh_search};
+//# sourceMappingURL=p-d9fa718c.entry.js.map

package/dist/stzh-components/p-e30a5acc.js

@@ -0,0 +1,2 @@
+import{d as t}from"./p-9b063923.js";function e(t,e){if(e){return t.querySelector(`[slot="${e}"]`)!==null}return Array.from(s(t)).some((t=>{if(t.nodeType===t.TEXT_NODE&&t.textContent.trim()!==""){return true}if(t.nodeType===t.ELEMENT_NODE){const e=t;if(!e.hasAttribute("slot")){return true}}return false}))}function n(e,n){Object.keys(n).forEach((r=>{if(e.getAttribute(t(r))===null){e[r]=n[r]}}))}function r(t){if(!t||t.nodeType!==1){return false}return t.tagName.toLowerCase().indexOf("stzh-")===0}function i(t){const e=document.querySelector(`meta[name="${t}"],[property="${t}"]`);return e?e.getAttribute("content"):""}function s(t){const e=t.childNodes;if(t["s-sc"]){const t=[];for(let n=0;n<e.length;n++){const r=e[n]["s-nr"];if(r){t.push(r)}}return t}return Array.from(e)}function u(t){if(typeof t.checkVisibility!=="undefined"){return t.checkVisibility({checkOpacity:false,checkVisibilityCSS:false})}else{return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)}}function c(t){if(!t.getClientRects().length){return{top:0,left:0}}let e=t.getBoundingClientRect();let n=t.ownerDocument.defaultView;return{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}}async function o(){return new Promise((t=>{requestAnimationFrame((()=>{t()}))}))}var f;(function(t){t["UNKNOWN"]="UNKNOWN";t["DEV"]="DEV";t["UAT"]="UAT";t["PROD"]="PROD"})(f||(f={}));function a(){const t=window.location.href;if(t.includes("test.stadt-zuerich.ch")||t.match(/\.dev\.cmp\.szh\.loc/)){return f.DEV}else if(t.includes("integ.stadt-zuerich.ch")||t.includes("stzh-desi-unic-preview.netlify.app")||t.match(/\.uat\.cmp\.szh\.loc/)){return f.UAT}else if(t.includes("www.stadt-zuerich.ch")||t.match(/\.cmp\.szh\.loc/)){return f.PROD}else{return f.UNKNOWN}}export{f as S,i as a,u as b,a as g,e as h,r as i,c as o,o as r,n as s};
+//# sourceMappingURL=p-e30a5acc.js.map

package/dist/stzh-components/p-e30a5acc.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["hasSlot","el","name","querySelector","Array","from","childNodes","some","node","nodeType","TEXT_NODE","textContent","trim","ELEMENT_NODE","hasAttribute","setPropsIfNull","element","attributes","Object","keys","forEach","attribute","getAttribute","dashCase","isStzhElement","tagName","toLowerCase","indexOf","getMeta","meta","document","result","i","length","slot","push","isVisible","checkVisibility","checkOpacity","checkVisibilityCSS","offsetWidth","offsetHeight","getClientRects","offset","top","left","rect","getBoundingClientRect","win","ownerDocument","defaultView","pageYOffset","pageXOffset","async","raf","Promise","resolve","requestAnimationFrame","StzhEnvironmentEnum","getStzhEnvironment","url","window","location","href","includes","match","DEV","UAT","PROD","UNKNOWN"],"sources":["src/utils/utils.ts"],"sourcesContent":["import { dashCase } from \"./string-utils\";\n\n// Determines whether an element has a slot. If name is specified, the function will look for a corresponding named\n// slot, otherwise it will look for a \"default\" slot (e.g. a non-empty text node or an element with no slot attribute).\nexport function hasSlot(el: HTMLElement, name?: string) {\n  // Look for a named slot\n  if (name) {\n    return el.querySelector(`[slot=\"${name}\"]`) !== null;\n  }\n\n  // Look for a default slot\n  return Array.from(childNodes(el)).some((node) => {\n    if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== \"\") {\n      return true;\n    }\n\n    if (node.nodeType === node.ELEMENT_NODE) {\n      const el = node as HTMLElement;\n      if (!el.hasAttribute(\"slot\")) {\n        return true;\n      }\n    }\n\n    return false;\n  });\n}\n\nexport function setPropsIfNull(element: Element, attributes: any) {\n  Object.keys(attributes).forEach((attribute) => {\n    if (element.getAttribute(dashCase(attribute)) === null) {\n      element[attribute] = attributes[attribute];\n    }\n  });\n}\n\nexport function isStzhElement(element: Element) {\n  if (!element || element.nodeType !== 1) {\n    return false;\n  }\n\n  return element.tagName.toLowerCase().indexOf(\"stzh-\") === 0;\n}\n\n// returns content of <meta name=\"\" content=\"\"> tags or '' if empty/non existant\nexport function getMeta(name) {\n  const meta = document.querySelector(\n    `meta[name=\"${name}\"],[property=\"${name}\"]`\n  );\n  return meta ? meta.getAttribute(\"content\") : \"\";\n}\n\nexport function parents(node: Element | Node) {\n  const parents = [];\n\n  while (node) {\n    parents.unshift(node);\n    node = node.parentNode;\n  }\n\n  return parents;\n}\n\nexport function childNodes(node: Element) {\n  const childNodes = node.childNodes;\n\n  // check if element is stencil element without shadow dom\n  // and then detect elements that were slotted into the element\n  if (node[\"s-sc\"]) {\n    const result = [];\n\n    for (let i = 0; i < childNodes.length; i++) {\n      const slot = childNodes[i][\"s-nr\"];\n\n      if (slot) {\n        result.push(slot);\n      }\n    }\n\n    return result;\n  }\n\n  return Array.from(childNodes);\n}\n\nexport function isVisible(element: HTMLElement): boolean {\n  // @ts-ignore\n  if (typeof element.checkVisibility !== \"undefined\") {\n    // @ts-ignore\n    return element.checkVisibility({\n      checkOpacity: false,\n      checkVisibilityCSS: false,\n    });\n  } else {\n    return !!(\n      element.offsetWidth ||\n      element.offsetHeight ||\n      element.getClientRects().length\n    );\n  }\n}\n\nexport function offset(element): { top: number; left: number } {\n  if (!element.getClientRects().length) {\n    return { top: 0, left: 0 };\n  }\n\n  let rect = element.getBoundingClientRect();\n  let win = element.ownerDocument.defaultView;\n\n  return {\n    top: rect.top + win.pageYOffset,\n    left: rect.left + win.pageXOffset,\n  };\n}\n\nexport async function raf() {\n  return new Promise<void>((resolve) => {\n    requestAnimationFrame(() => {\n      resolve();\n    });\n  });\n}\n\nexport async function setTimeout(time: number) {\n  return new Promise<void>((resolve) => {\n    window.setTimeout(() => {\n      resolve();\n    }, time);\n  });\n}\n\nexport enum StzhEnvironmentEnum {\n  UNKNOWN = \"UNKNOWN\",\n  DEV = \"DEV\",\n  UAT = \"UAT\",\n  PROD = \"PROD\",\n}\n\nexport function getStzhEnvironment(): StzhEnvironmentEnum {\n  const url = window.location.href;\n  if (\n    url.includes(\"test.stadt-zuerich.ch\") ||\n    url.match(/\\.dev\\.cmp\\.szh\\.loc/)\n  ) {\n    return StzhEnvironmentEnum.DEV;\n  } else if (\n    url.includes(\"integ.stadt-zuerich.ch\") ||\n    url.includes(\"stzh-desi-unic-preview.netlify.app\") ||\n    url.match(/\\.uat\\.cmp\\.szh\\.loc/)\n  ) {\n    return StzhEnvironmentEnum.UAT;\n  } else if (\n    url.includes(\"www.stadt-zuerich.ch\") ||\n    url.match(/\\.cmp\\.szh\\.loc/)\n  ) {\n    return StzhEnvironmentEnum.PROD;\n  } else {\n    return StzhEnvironmentEnum.UNKNOWN;\n  }\n}\n\n// `extras.experimentalSlotFixes` stencil config flag resolves cloning light dom elements\n// so our own cloneElement / cloneWrappedStzhElement helpers are not needed right now\n// (used before in cardlist and sortable component).\n\n// export function children(node: Element) {\n//   return childNodes(node).map((n: any) => n.nodeType === 1);\n// }\n\n// const nativeCloneNodeFn = Node.prototype.cloneNode;\n\n// export function cloneElement(node: Element, deep: boolean) {\n//   const clonedNode = nativeCloneNodeFn.call(node, false);\n//   const srcChildNodes = childNodes(node);\n\n//   if (deep) {\n//     for (let i = 0; i < srcChildNodes.length; i++) {\n//       if (srcChildNodes[i].nodeType !== 2) {\n//         const childClone = cloneElement(srcChildNodes[i], true);\n//         clonedNode.appendChild(childClone);\n//       }\n//     }\n//   }\n\n//   return clonedNode;\n// }\n\n// // Clone an stzh-* element that is using stencil polyfilled slots (no shadow dom)\n// // and potentially wrapped in normal elements (e.g. angular component)\n// export function cloneWrappedStzhElement(elementToClone: Element): [Element, Element, Element] {\n//   let clonedElement: Element;\n//   let clonedStzhElement: Element;\n//   let originalStzhElement: Element;\n\n//   if (isStzhElement(elementToClone)) {\n//     clonedElement = cloneElement(elementToClone, true);\n//     clonedStzhElement = clonedElement;\n//     originalStzhElement = elementToClone;\n//   } else {\n//     clonedElement = elementToClone.cloneNode() as Element;\n\n//     let clonedInnerElementLast: Element = clonedElement;\n//     let originalInnerElementLast: Element = elementToClone;\n\n//     // clone inner root elements separately until we find a stzh element\n//     while (originalInnerElementLast.children.length === 1 && !isStzhElement(originalInnerElementLast.children[0])) {\n//       originalInnerElementLast = originalInnerElementLast.children[0];\n//       const clonedInnerElementCurrent = originalInnerElementLast.cloneNode() as Element;\n\n//       clonedInnerElementLast.appendChild(clonedInnerElementCurrent);\n//       clonedInnerElementLast = clonedInnerElementCurrent;\n//     }\n\n//     if (isStzhElement(originalInnerElementLast.children[0])) {\n//       clonedStzhElement = cloneElement(originalInnerElementLast.children[0], true);\n//       originalStzhElement = originalInnerElementLast.children[0];\n//       clonedInnerElementLast.appendChild(clonedStzhElement);\n//     } else {\n//       // no root stzh element found, so we give up and just deep clone the root\n//       clonedElement = cloneElement(elementToClone, true);\n//     }\n//   }\n\n//   return [clonedElement, clonedStzhElement, originalStzhElement];\n// }\n"],"mappings":"6CAIgBA,EAAQC,EAAiBC,GAEvC,GAAIA,EAAM,CACR,OAAOD,EAAGE,cAAc,UAAUD,SAAc,I,CAIlD,OAAOE,MAAMC,KAAKC,EAAWL,IAAKM,MAAMC,IACtC,GAAIA,EAAKC,WAAaD,EAAKE,WAAaF,EAAKG,YAAYC,SAAW,GAAI,CACtE,OAAO,I,CAGT,GAAIJ,EAAKC,WAAaD,EAAKK,aAAc,CACvC,MAAMZ,EAAKO,EACX,IAAKP,EAAGa,aAAa,QAAS,CAC5B,OAAO,I,EAIX,OAAO,KAAK,GAEhB,C,SAEgBC,EAAeC,EAAkBC,GAC/CC,OAAOC,KAAKF,GAAYG,SAASC,IAC/B,GAAIL,EAAQM,aAAaC,EAASF,MAAgB,KAAM,CACtDL,EAAQK,GAAaJ,EAAWI,E,IAGtC,C,SAEgBG,EAAcR,GAC5B,IAAKA,GAAWA,EAAQP,WAAa,EAAG,CACtC,OAAO,K,CAGT,OAAOO,EAAQS,QAAQC,cAAcC,QAAQ,WAAa,CAC5D,C,SAGgBC,EAAQ1B,GACtB,MAAM2B,EAAOC,SAAS3B,cACpB,cAAcD,kBAAqBA,OAErC,OAAO2B,EAAOA,EAAKP,aAAa,WAAa,EAC/C,C,SAagBhB,EAAWE,GACzB,MAAMF,EAAaE,EAAKF,WAIxB,GAAIE,EAAK,QAAS,CAChB,MAAMuB,EAAS,GAEf,IAAK,IAAIC,EAAI,EAAGA,EAAI1B,EAAW2B,OAAQD,IAAK,CAC1C,MAAME,EAAO5B,EAAW0B,GAAG,QAE3B,GAAIE,EAAM,CACRH,EAAOI,KAAKD,E,EAIhB,OAAOH,C,CAGT,OAAO3B,MAAMC,KAAKC,EACpB,C,SAEgB8B,EAAUpB,GAExB,UAAWA,EAAQqB,kBAAoB,YAAa,CAElD,OAAOrB,EAAQqB,gBAAgB,CAC7BC,aAAc,MACdC,mBAAoB,O,KAEjB,CACL,SACEvB,EAAQwB,aACRxB,EAAQyB,cACRzB,EAAQ0B,iBAAiBT,O,CAG/B,C,SAEgBU,EAAO3B,GACrB,IAAKA,EAAQ0B,iBAAiBT,OAAQ,CACpC,MAAO,CAAEW,IAAK,EAAGC,KAAM,E,CAGzB,IAAIC,EAAO9B,EAAQ+B,wBACnB,IAAIC,EAAMhC,EAAQiC,cAAcC,YAEhC,MAAO,CACLN,IAAKE,EAAKF,IAAMI,EAAIG,YACpBN,KAAMC,EAAKD,KAAOG,EAAII,YAE1B,CAEOC,eAAeC,IACpB,OAAO,IAAIC,SAAeC,IACxBC,uBAAsB,KACpBD,GAAS,GACT,GAEN,C,IAUYE,GAAZ,SAAYA,GACVA,EAAA,qBACAA,EAAA,aACAA,EAAA,aACAA,EAAA,cACD,EALD,CAAYA,MAAmB,K,SAOfC,IACd,MAAMC,EAAMC,OAAOC,SAASC,KAC5B,GACEH,EAAII,SAAS,0BACbJ,EAAIK,MAAM,wBACV,CACA,OAAOP,EAAoBQ,G,MACtB,GACLN,EAAII,SAAS,2BACbJ,EAAII,SAAS,uCACbJ,EAAIK,MAAM,wBACV,CACA,OAAOP,EAAoBS,G,MACtB,GACLP,EAAII,SAAS,yBACbJ,EAAIK,MAAM,mBACV,CACA,OAAOP,EAAoBU,I,KACtB,CACL,OAAOV,EAAoBW,O,CAE/B,Q"}

package/dist/stzh-components/{p-f4ed8d7e.entry.js → p-ef47c976.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as e,a as s,g as i}from"./p-c7bfac7a.js";const o='@charset "UTF-8";:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}: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{--font-size:var(--stzh-list-font-size, var(--stzh-font-milli-font-size));--line-height:var(--stzh-list-line-height, var(--stzh-font-milli-text-line-height));--letter-spacing:var(--stzh-list-letter-spacing, normal);counter-reset:li-counter}@media screen and (min-width: 900px){:host{--font-size:var(--stzh-list-font-size, var(--stzh-font-centi-font-size));--line-height:var(--stzh-list-line-height, var(--stzh-font-centi-text-line-height))}}:host ::slotted(stzh-list-item){--icon-checklist-visibility:hidden;counter-increment:li-counter;position:relative}:host([variant=unordered]) ::slotted(stzh-list-item){--icon-checklist-visibility:hidden;padding-left:calc(var(--stzh-space-xsmall) + var(--stzh-space-small))}:host([variant=unordered]) ::slotted(stzh-list-item)::before{content:"–"}:host([variant=ordered]) ::slotted(stzh-list-item){--icon-checklist-visibility:hidden;padding-left:calc(var(--stzh-space-large) + var(--stzh-space-small))}:host([variant=ordered]) ::slotted(stzh-list-item)::before{content:counter(li-counter) ". "}:host([variant=checklist]) ::slotted(stzh-list-item){--icon-checklist-visibility:visible;padding-left:calc(var(--stzh-icon-size-medium) + var(--stzh-space-small))}.stzh-list{font-size:var(--font-size);line-height:var(--line-height);letter-spacing:var(--letter-spacing)}';const n=class{constructor(e){t(this,e);this.variant="unordered"}render(){const t={"stzh-list":true,[`stzh-list--${this.variant}`]:!!this.variant};return e(s,null,e("div",{class:t,role:"list"},e("slot",null)))}get element(){return i(this)}};n.style=o;export{n as stzh_list};
-//# sourceMappingURL=p-f4ed8d7e.entry.js.map
+import{r as t,h as e,a as i,g as s}from"./p-c7bfac7a.js";const o='@charset "UTF-8";:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}: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{--font-size:var(--stzh-list-font-size, var(--stzh-font-milli-font-size));--line-height:var(--stzh-list-line-height, var(--stzh-font-milli-text-line-height));--letter-spacing:var(--stzh-list-letter-spacing, normal);counter-reset:li-counter}@media screen and (min-width: 900px){:host{--font-size:var(--stzh-list-font-size, var(--stzh-font-centi-font-size));--line-height:var(--stzh-list-line-height, var(--stzh-font-centi-text-line-height))}}:host ::slotted(stzh-list-item){--icon-checklist-visibility:hidden;counter-increment:li-counter;position:relative}:host([variant=unordered]) ::slotted(stzh-list-item){--icon-checklist-visibility:hidden;padding-left:calc(var(--stzh-space-xsmall) + var(--stzh-space-small))}:host([variant=unordered]) ::slotted(stzh-list-item)::before{content:"–"}:host([variant=ordered]) ::slotted(stzh-list-item){--icon-checklist-visibility:hidden;padding-left:calc(var(--stzh-space-large) + var(--stzh-space-small))}:host([variant=ordered]) ::slotted(stzh-list-item)::before{content:counter(li-counter) ". "}:host([variant=checklist]) ::slotted(stzh-list-item){--icon-checklist-visibility:visible;padding-left:calc(var(--stzh-icon-size-medium) + var(--stzh-space-small))}.stzh-list{font-size:var(--font-size);line-height:var(--line-height);letter-spacing:var(--letter-spacing)}';const n=class{constructor(e){t(this,e);this.variant="unordered"}render(){const t={"stzh-list":true,[`stzh-list--${this.variant}`]:!!this.variant};return e(i,null,e("div",{class:t,role:"list"},e("slot",null)))}get element(){return s(this)}};n.style=o;const l=`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g clip-path="url(#a)"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></svg>`;const r=":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}: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{--icon-checklist-visibility:hidden}:host::before{display:inline-block;position:absolute;left:0;top:0}.stzh-list-item__checkmark-icon{visibility:var(--icon-checklist-visibility);display:flex;justify-content:center;align-items:center;position:absolute;top:0.0625rem;left:0}.stzh-list-item__checkmark-icon svg{width:1.5em;height:1.5em;display:block}";const c=class{constructor(e){t(this,e)}render(){const t={"stzh-list-item":true};return e(i,null,e("div",{class:t,role:"listitem"},e("div",{class:"stzh-list-item__checkmark-icon",innerHTML:l}),e("div",{class:"stzh-list-item__text"},e("slot",null))))}get element(){return s(this)}};c.style=r;export{n as stzh_list,c as stzh_list_item};
+//# sourceMappingURL=p-ef47c976.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["stzhListCss","StzhList","render","classes","this","variant","h","Host","class","role","stzhListItemCss","StzhListItem","innerHTML","Checkmark"],"sources":["src/components/stzh-list/stzh-list.scss?tag=stzh-list&encapsulation=shadow","src/components/stzh-list/stzh-list.tsx","src/components/stzh-list-item/stzh-list-item.scss?tag=stzh-list-item&encapsulation=shadow","src/components/stzh-list-item/stzh-list-item.tsx"],"sourcesContent":[":host {\n  --font-size: var(--stzh-list-font-size, var(--stzh-font-milli-font-size));\n  --line-height: var(--stzh-list-line-height, var(--stzh-font-milli-text-line-height));\n  --letter-spacing: var(--stzh-list-letter-spacing, normal);\n\n  @include mq($from: medium) {\n    --font-size: var(--stzh-list-font-size, var(--stzh-font-centi-font-size));\n    --line-height: var(--stzh-list-line-height, var(--stzh-font-centi-text-line-height));\n  }\n\n  counter-reset: li-counter;\n\n  ::slotted(stzh-list-item) {\n    --icon-checklist-visibility: hidden;\n\n    counter-increment: li-counter;\n    position: relative;\n  }\n}\n\n:host([variant=\"unordered\"]) ::slotted(stzh-list-item) {\n  --icon-checklist-visibility: hidden;\n\n  padding-left: calc(#{space('xsmall')} + #{space('small')});\n\n  &::before {\n    content: '–'; // old one: \\2014\n  }\n}\n\n:host([variant=\"ordered\"]) ::slotted(stzh-list-item) {\n  --icon-checklist-visibility: hidden;\n\n  padding-left: calc(#{space('large')} + #{space('small')});\n\n  &::before {\n    content: counter(li-counter) '. ';\n  }\n}\n\n:host([variant=\"checklist\"]) ::slotted(stzh-list-item) {\n  --icon-checklist-visibility: visible;\n\n  padding-left: calc(#{iconSize('medium')} + #{space('small')});\n}\n\n.stzh-list {\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  letter-spacing: var(--letter-spacing);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for `stzh-list-item`\n */\n@Component({\n  tag: \"stzh-list\",\n  styleUrl: \"stzh-list.scss\",\n  shadow: true\n})\nexport class StzhList {\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"unordered\" | \"ordered\" | \"checklist\" = \"unordered\";\n\n  @Element() element: HTMLStzhListElement;\n\n  render() {\n    const classes = {\n      \"stzh-list\": true,\n      [`stzh-list--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host>\n        <div class={classes} role=\"list\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --icon-checklist-visibility: hidden;\n\n  &::before {\n    display: inline-block;\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n}\n\n.stzh-list-item {\n  &__checkmark-icon {\n    visibility: var(--icon-checklist-visibility);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    top: 1px;\n    left: 0;\n\n    svg {\n      width: 1.5em;\n      height: 1.5em;\n      display: block;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element\n} from \"@stencil/core\";\n\nimport Checkmark from \"./assets/checkmark.svg\";\n\n/**\n * @slot - Slot for text\n */\n@Component({\n  tag: \"stzh-list-item\",\n  styleUrl: \"stzh-list-item.scss\",\n  shadow: true\n})\nexport class StzhListItem {\n  @Element() element: HTMLStzhListItemElement;\n\n  render() {\n    const classes = {\n      \"stzh-list-item\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes} role=\"listitem\">\n          <div class=\"stzh-list-item__checkmark-icon\" innerHTML={Checkmark}></div>\n\n          <div class=\"stzh-list-item__text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAc,2xE,MCgBPC,EAAQ,M,sCAEuD,W,CAI1E,MAAAC,GACE,MAAMC,EAAU,CACd,YAAa,KACb,CAAC,cAAcC,KAAKC,aAAcD,KAAKC,SAGzC,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOL,EAASM,KAAK,QACxBH,EAAA,c,sVC/BV,MAAMI,EAAkB,+0C,MCiBXC,EAAY,M,yBAGvB,MAAAT,GACE,MAAMC,EAAU,CACd,iBAAkB,MAGpB,OACEG,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOL,EAASM,KAAK,YACxBH,EAAA,OAAKE,MAAM,iCAAiCI,UAAWC,IAEvDP,EAAA,OAAKE,MAAM,wBACTF,EAAA,e"}

package/dist/stzh-components/{p-66007952.entry.js → p-f34720e2.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,h as t,a as s,g as e}from"./p-c7bfac7a.js";import{s as n}from"./p-7e304ea3.js";import"./p-9b063923.js";const i=":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}: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{display:contents}@media print{:host{display:none}}.stzh-scrollup{display:contents}";const r=class{constructor(t){o(this,t);this.handleLinkClick=()=>{window.scrollTo({top:0,left:0,behavior:"smooth"})};this.handleSlotchange=()=>{var o;const t=((o=this.element.getRootNode())===null||o===void 0?void 0:o.host)||this.element;const s=t.querySelectorAll("stzh-link, stzh-button");s.forEach((o=>{o.addEventListener("click",this.handleLinkClick);n(o,{icon:"arrow-up"})}))}}render(){const o={"stzh-scrollup":true};return t(s,null,t("div",{class:o},t("slot",{onSlotchange:this.handleSlotchange})))}get element(){return e(this)}};r.style=i;export{r as stzh_scrollup};
-//# sourceMappingURL=p-66007952.entry.js.map
+import{r as o,h as t,a as s,g as e}from"./p-c7bfac7a.js";import{s as n}from"./p-e30a5acc.js";import"./p-9b063923.js";const i=":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}: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{display:contents}@media print{:host{display:none}}.stzh-scrollup{display:contents}";const r=class{constructor(t){o(this,t);this.handleLinkClick=()=>{window.scrollTo({top:0,left:0,behavior:"smooth"})};this.handleSlotchange=()=>{var o;const t=((o=this.element.getRootNode())===null||o===void 0?void 0:o.host)||this.element;const s=t.querySelectorAll("stzh-link, stzh-button");s.forEach((o=>{o.addEventListener("click",this.handleLinkClick);n(o,{icon:"arrow-up"})}))}}render(){const o={"stzh-scrollup":true};return t(s,null,t("div",{class:o},t("slot",{onSlotchange:this.handleSlotchange})))}get element(){return e(this)}};r.style=i;export{r as stzh_scrollup};
+//# sourceMappingURL=p-f34720e2.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["stzhScrollupCss","StzhScrollup","constructor","hostRef","this","handleLinkClick","window","scrollTo","top","left","behavior","handleSlotchange","host","_a","element","getRootNode","links","querySelectorAll","forEach","link","addEventListener","setPropsIfNull","icon","render","classes","h","Host","class","onSlotchange"],"sources":["src/components/stzh-scrollup/stzh-scrollup.scss?tag=stzh-scrollup&encapsulation=shadow","src/components/stzh-scrollup/stzh-scrollup.tsx"],"sourcesContent":[":host {\n  display: contents;\n\n  @media print {\n    display: none;\n  }\n}\n\n.stzh-scrollup {\n  display: contents;\n}\n","import { Component, Host, h, Element } from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for label\n */\n@Component({\n  tag: \"stzh-scrollup\",\n  styleUrl: \"stzh-scrollup.scss\",\n  shadow: true,\n})\nexport class StzhScrollup {\n  @Element() element: HTMLStzhScrollupElement;\n\n  private handleLinkClick = () => {\n    window.scrollTo({\n      top: 0,\n      left: 0,\n      behavior: \"smooth\",\n    });\n  };\n\n  private handleSlotchange = () => {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const links = host.querySelectorAll(\"stzh-link, stzh-button\");\n\n    links.forEach(link => {\n      link.addEventListener(\"click\", this.handleLinkClick);\n\n      setPropsIfNull(link, {\n        icon: \"arrow-up\",\n      } as HTMLStzhLinkElement | HTMLStzhButtonElement);\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-scrollup\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot onSlotchange={this.handleSlotchange}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"qHAAA,MAAMA,EAAkB,ukC,MCYXC,EAAY,MALzB,WAAAC,CAAAC,G,UAQUC,KAAAC,gBAAkB,KACxBC,OAAOC,SAAS,CACdC,IAAK,EACLC,KAAM,EACNC,SAAU,UACV,EAGIN,KAAAO,iBAAmB,K,MACzB,MAAMC,IAAOC,EAACT,KAAKU,QAAQC,iBAA4B,MAAAF,SAAA,SAAAA,EAAED,OAAQR,KAAKU,QACtE,MAAME,EAAQJ,EAAKK,iBAAiB,0BAEpCD,EAAME,SAAQC,IACZA,EAAKC,iBAAiB,QAAShB,KAAKC,iBAEpCgB,EAAeF,EAAM,CACnBG,KAAM,YACyC,GACjD,C,CAGJ,MAAAC,GACE,MAAMC,EAAU,CACd,gBAAiB,MAGnB,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,QAAMG,aAAcxB,KAAKO,oB"}

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

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

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

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

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

@@ -600,12 +600,26 @@ the .has-focus class is used by the focus target */
   --stzh-color-scienceblue: rgba(var(--stzh-color-scienceblue-rgb) / 1);
 
   /* VBZ */
-  --stzh-color-deepcerulean-rgb: 5 127 172;
-  --stzh-color-deepcerulean: rgba(var(--stzh-color-deepcerulean-rgb) / 1);
-  --stzh-color-regalblue-rgb: 3 76 103;
-  --stzh-color-regalblue: rgba(var(--stzh-color-regalblue-rgb) / 1);
-  --stzh-color-coral-rgb: 228 105 76;
-  --stzh-color-coral: rgba(var(--stzh-color-coral-rgb) / 1);
+  --stzh-color-vbz-cyan10-rgb: 235 249 255;
+  --stzh-color-vbz-cyan10: rgba(var(--stzh-color-vbz-cyan10-rgb) / 1);
+  --stzh-color-vbz-cyan20-rgb: 194 238 255;
+  --stzh-color-vbz-cyan20: rgba(var(--stzh-color-vbz-cyan20-rgb) / 1);
+  --stzh-color-vbz-cyan30-rgb: 132 220 255;
+  --stzh-color-vbz-cyan30: rgba(var(--stzh-color-vbz-cyan30-rgb) / 1);
+  --stzh-color-vbz-cyan40-rgb: 52 197 254;
+  --stzh-color-vbz-cyan40: rgba(var(--stzh-color-vbz-cyan40-rgb) / 1);
+  --stzh-color-vbz-cyan50-rgb: 0 159 223;
+  --stzh-color-vbz-cyan50: rgba(var(--stzh-color-vbz-cyan50-rgb) / 1);
+  --stzh-color-vbz-cyan60-rgb: 5 127 172;
+  --stzh-color-vbz-cyan60: rgba(var(--stzh-color-vbz-cyan60-rgb) / 1);
+  --stzh-color-vbz-cyan70-rgb: 0 102 143;
+  --stzh-color-vbz-cyan70: rgba(var(--stzh-color-vbz-cyan70-rgb) / 1);
+  --stzh-color-vbz-cyan80-rgb: 3 76 103;
+  --stzh-color-vbz-cyan80: rgba(var(--stzh-color-vbz-cyan80-rgb) / 1);
+  --stzh-color-vbz-cyan90-rgb: 0 44 61;
+  --stzh-color-vbz-cyan90: rgba(var(--stzh-color-vbz-cyan90-rgb) / 1);
+  --stzh-color-vbz-cyan100-rgb: 0 29 41;
+  --stzh-color-vbz-cyan100: rgba(var(--stzh-color-vbz-cyan100-rgb) / 1);
 
   /* PKZH */
   --stzh-color-shakespeare-rgb: 74 150 200;
@@ -1186,27 +1200,197 @@ the .has-focus class is used by the focus target */
 }
 
 .stzh-theme-vbz {
-  --stzh-color-primary-rgb: var(--stzh-color-deepcerulean-rgb);
-  --stzh-color-primary-hover-rgb: var(--stzh-color-regalblue-rgb);
+  --stzh-color-primary10-rgb: var(--stzh-color-vbz-cyan10-rgb);
+  --stzh-color-primary10: rgba(var(--stzh-color-primary10-rgb) / 1);
+  --stzh-color-primary20-rgb: var(--stzh-color-vbz-cyan20-rgb);
+  --stzh-color-primary20: rgba(var(--stzh-color-primary20-rgb) / 1);
+  --stzh-color-primary30-rgb: var(--stzh-color-vbz-cyan30-rgb);
+  --stzh-color-primary30: rgba(var(--stzh-color-primary30-rgb) / 1);
+  --stzh-color-primary40-rgb: var(--stzh-color-vbz-cyan40-rgb);
+  --stzh-color-primary40: rgba(var(--stzh-color-primary40-rgb) / 1);
+  --stzh-color-primary50-rgb: var(--stzh-color-vbz-cyan50-rgb);
+  --stzh-color-primary50: rgba(var(--stzh-color-primary50-rgb) / 1);
+  --stzh-color-primary60-rgb: var(--stzh-color-vbz-cyan60-rgb);
+  --stzh-color-primary60: rgba(var(--stzh-color-primary60-rgb) / 1);
+  --stzh-color-primary70-rgb: var(--stzh-color-vbz-cyan70-rgb);
+  --stzh-color-primary70: rgba(var(--stzh-color-primary70-rgb) / 1);
+  --stzh-color-primary80-rgb: var(--stzh-color-vbz-cyan80-rgb);
+  --stzh-color-primary80: rgba(var(--stzh-color-primary80-rgb) / 1);
+  --stzh-color-primary90-rgb: var(--stzh-color-vbz-cyan90-rgb);
+  --stzh-color-primary90: rgba(var(--stzh-color-primary90-rgb) / 1);
+  --stzh-color-primary100-rgb: var(--stzh-color-vbz-cyan100-rgb);
+  --stzh-color-primary100: rgba(var(--stzh-color-primary100-rgb) / 1);
+
+  --stzh-color-secondary10-rgb: var(--stzh-color-coolgrey10-rgb);
+  --stzh-color-secondary10: rgba(var(--stzh-color-secondary10-rgb) / 1);
+  --stzh-color-secondary20-rgb: var(--stzh-color-coolgrey20-rgb);
+  --stzh-color-secondary20: rgba(var(--stzh-color-secondary20-rgb) / 1);
+  --stzh-color-secondary30-rgb: var(--stzh-color-coolgrey30-rgb);
+  --stzh-color-secondary30: rgba(var(--stzh-color-secondary30-rgb) / 1);
+  --stzh-color-secondary40-rgb: var(--stzh-color-coolgrey40-rgb);
+  --stzh-color-secondary40: rgba(var(--stzh-color-secondary40-rgb) / 1);
+  --stzh-color-secondary50-rgb: var(--stzh-color-coolgrey50-rgb);
+  --stzh-color-secondary50: rgba(var(--stzh-color-secondary50-rgb) / 1);
+  --stzh-color-secondary60-rgb: var(--stzh-color-coolgrey60-rgb);
+  --stzh-color-secondary60: rgba(var(--stzh-color-secondary60-rgb) / 1);
+  --stzh-color-secondary70-rgb: var(--stzh-color-coolgrey70-rgb);
+  --stzh-color-secondary70: rgba(var(--stzh-color-secondary70-rgb) / 1);
+  --stzh-color-secondary80-rgb: var(--stzh-color-coolgrey80-rgb);
+  --stzh-color-secondary80: rgba(var(--stzh-color-secondary80-rgb) / 1);
+  --stzh-color-secondary90-rgb: var(--stzh-color-coolgrey90-rgb);
+  --stzh-color-secondary90: rgba(var(--stzh-color-secondary90-rgb) / 1);
+  --stzh-color-secondary100-rgb: var(--stzh-color-coolgrey100-rgb);
+  --stzh-color-secondary100: rgba(var(--stzh-color-secondary100-rgb) / 1);
 
-  --stzh-font-family-heavy: var(--stzh-font-family-bold);
-  --stzh-font-family-medium: var(--stzh-font-family-regular);
+  --stzh-color-info10-rgb: var(--stzh-color-cobaltblue10-rgb);
+  --stzh-color-info10: rgba(var(--stzh-color-info10-rgb) / 1);
+  --stzh-color-info20-rgb: var(--stzh-color-cobaltblue20-rgb);
+  --stzh-color-info20: rgba(var(--stzh-color-info20-rgb) / 1);
+  --stzh-color-info30-rgb: var(--stzh-color-cobaltblue30-rgb);
+  --stzh-color-info30: rgba(var(--stzh-color-info30-rgb) / 1);
+  --stzh-color-info40-rgb: var(--stzh-color-cobaltblue40-rgb);
+  --stzh-color-info40: rgba(var(--stzh-color-info40-rgb) / 1);
+  --stzh-color-info50-rgb: var(--stzh-color-cobaltblue50-rgb);
+  --stzh-color-info50: rgba(var(--stzh-color-info50-rgb) / 1);
+  --stzh-color-info60-rgb: var(--stzh-color-cobaltblue60-rgb);
+  --stzh-color-info60: rgba(var(--stzh-color-info60-rgb) / 1);
+  --stzh-color-info70-rgb: var(--stzh-color-cobaltblue70-rgb);
+  --stzh-color-info70: rgba(var(--stzh-color-info70-rgb) / 1);
+  --stzh-color-info80-rgb: var(--stzh-color-cobaltblue80-rgb);
+  --stzh-color-info80: rgba(var(--stzh-color-info80-rgb) / 1);
+  --stzh-color-info90-rgb: var(--stzh-color-cobaltblue90-rgb);
+  --stzh-color-info90: rgba(var(--stzh-color-info90-rgb) / 1);
+  --stzh-color-info100-rgb: var(--stzh-color-cobaltblue100-rgb);
+  --stzh-color-info100: rgba(var(--stzh-color-info100-rgb) / 1);
+
+  /* Font families */
+  --stzh-font-family-regular: 'HelveticaNeueLTW01_55Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --stzh-font-family-medium: 'HelveticaNeueLTW01_55Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --stzh-font-family-medium-italic: 'HelveticaNeueLTW05_66MediumIt', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --stzh-font-family-bold: 'HelveticaNeueLTW05_65Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --stzh-font-family-heavy: 'HelveticaNeueLTW05_65Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   --stzh-font-family-title: var(--stzh-font-family-light);
+  --stzh-font-weight-regular: normal;
+  --stzh-font-weight-medium: 400;
+  --stzh-font-weight-bold: 500;
+  --stzh-font-weight-heavy: 500;
+
+  /* Buttons */
+  --stzh-button-background-color: var(--stzh-color-primary60);
+  --stzh-button-hover-background-color: var(--stzh-color-primary80);
+  --stzh-button-disabled-background-color: var(--stzh-color-grey70);
+
+  --stzh-button-secondary-background-color: var(--stzh-color-secondary30);
+  --stzh-button-secondary-hover-background-color: var(--stzh-color-secondary40);
+  --stzh-button-secondary-disabled-background-color: var(--stzh-color-grey20);
+  --stzh-button-secondary-color: var(--stzh-color-primary70);
+  --stzh-button-secondary-hover-color: var(--stzh-color-primary80);
+  --stzh-button-secondary-disabled-color: var(--stzh-color-grey70);
+
+  --stzh-button-tertiary-background-color: var(--stzh-color-white);
+  --stzh-button-tertiary-hover-background-color: var(--stzh-color-secondary20);
+  --stzh-button-tertiary-disabled-background-color: var(--stzh-color-white);
+  --stzh-button-tertiary-color: var(--stzh-color-primary70);
+  --stzh-button-tertiary-hover-color: var(--stzh-color-primary80);
+  --stzh-button-tertiary-disabled-color: var(--stzh-color-grey70);
 
-  /** Toasts */
-  /*
-  TODO: remove font family variables if not needed anymore
+  /* Links */
+  --stzh-link-color: var(--stzh-color-primary50);
+  --stzh-link-hover-color: var(--stzh-color-primary60);
 
-  --stzh-toast-label-font-family: var(--stzh-font-family-regular);
-  --stzh-toast-label-font-weight: var(--stzh-font-weight-regular);
-  --stzh-toast-label-font-style: var(--stzh-font-style-regular);
+  /* Header */
+  --stzh-header-logobar-background-color: transparent;
 
-  --stzh-toast-background-color: var(--stzh-color-white);
-  --stzh-toast-label-color: var(--stzh-base-color);
-  --stzh-toast-close-color: var(--stzh-color-primary);
-  --stzh-toast-button-color: var(--stzh-color-primary);
-  --stzh-toast-icon-color: var(--stzh-color-primary);
-  */
+  /* Tooltip */
+  --stzh-tooltip-color: var(--stzh-color-secondary70);
+  --stzh-tooltip-background-color: var(--stzh-color-secondary10);
+  --stzh-tooltip-link-color: var(--stzh-color-primary60);
+  --stzh-tooltip-hover-link-color: var(--stzh-color-primary70);
+}
+
+/* ZVV Overrides */
+#zvv-searchmask > div {
+  margin: 0;
+  padding: 0;
+}
+
+.stzh-theme-mkz-violet {
+  --stzh-color-secondary10-rgb: var(--stzh-color-violet10-rgb);
+  --stzh-color-secondary10: rgba(var(--stzh-color-secondary10-rgb) / 1);
+  --stzh-color-secondary20-rgb: var(--stzh-color-violet20-rgb);
+  --stzh-color-secondary20: rgba(var(--stzh-color-secondary20-rgb) / 1);
+  --stzh-color-secondary30-rgb: var(--stzh-color-violet30-rgb);
+  --stzh-color-secondary30: rgba(var(--stzh-color-secondary30-rgb) / 1);
+  --stzh-color-secondary40-rgb: var(--stzh-color-violet40-rgb);
+  --stzh-color-secondary40: rgba(var(--stzh-color-secondary40-rgb) / 1);
+  --stzh-color-secondary50-rgb: var(--stzh-color-violet50-rgb);
+  --stzh-color-secondary50: rgba(var(--stzh-color-secondary50-rgb) / 1);
+  --stzh-color-secondary60-rgb: var(--stzh-color-violet60-rgb);
+  --stzh-color-secondary60: rgba(var(--stzh-color-secondary60-rgb) / 1);
+  --stzh-color-secondary70-rgb: var(--stzh-color-violet70-rgb);
+  --stzh-color-secondary70: rgba(var(--stzh-color-secondary70-rgb) / 1);
+  --stzh-color-secondary80-rgb: var(--stzh-color-violet80-rgb);
+  --stzh-color-secondary80: rgba(var(--stzh-color-secondary80-rgb) / 1);
+  --stzh-color-secondary90-rgb: var(--stzh-color-violet90-rgb);
+  --stzh-color-secondary90: rgba(var(--stzh-color-secondary90-rgb) / 1);
+  --stzh-color-secondary100-rgb: var(--stzh-color-violet100-rgb);
+  --stzh-color-secondary100: rgba(var(--stzh-color-secondary100-rgb) / 1);
+
+  /* Header */
+  --stzh-header-logobar-background-color: var(--stzh-color-secondary50);
+
+  /* Footer */
+  --stzh-footer-background-color: var(--stzh-color-secondary100);
+  --stzh-footer-background-color-menu: var(--stzh-color-secondary80);
+
+  /* Homepage Service Highlights */
+  --stzh-homepage-service-highlights-topnews-subtitle-font: var(--stzh-font-family-heavy);
+  --stzh-homepage-service-highlights-topnews-item-subtitle-color: var(--stzh-color-primary60);
+  --stzh-homepage-service-highlights-topnews-item-subtitle-highlighted-color: var(--stzh-color-primary60);
+
+  /* Tag */
+  --stzh-tag-color: var(--stzh-color-secondary60);
+}
+
+.stzh-theme-mkz-cyan {
+  --stzh-color-secondary10-rgb: var(--stzh-color-cyan10-rgb);
+  --stzh-color-secondary10: rgba(var(--stzh-color-secondary10-rgb) / 1);
+  --stzh-color-secondary20-rgb: var(--stzh-color-cyan20-rgb);
+  --stzh-color-secondary20: rgba(var(--stzh-color-secondary20-rgb) / 1);
+  --stzh-color-secondary30-rgb: var(--stzh-color-cyan30-rgb);
+  --stzh-color-secondary30: rgba(var(--stzh-color-secondary30-rgb) / 1);
+  --stzh-color-secondary40-rgb: var(--stzh-color-cyan40-rgb);
+  --stzh-color-secondary40: rgba(var(--stzh-color-secondary40-rgb) / 1);
+  --stzh-color-secondary50-rgb: var(--stzh-color-cyan50-rgb);
+  --stzh-color-secondary50: rgba(var(--stzh-color-secondary50-rgb) / 1);
+  --stzh-color-secondary60-rgb: var(--stzh-color-cyan60-rgb);
+  --stzh-color-secondary60: rgba(var(--stzh-color-secondary60-rgb) / 1);
+  --stzh-color-secondary70-rgb: var(--stzh-color-cyan70-rgb);
+  --stzh-color-secondary70: rgba(var(--stzh-color-secondary70-rgb) / 1);
+  --stzh-color-secondary80-rgb: var(--stzh-color-cyan80-rgb);
+  --stzh-color-secondary80: rgba(var(--stzh-color-secondary80-rgb) / 1);
+  --stzh-color-secondary90-rgb: var(--stzh-color-cyan90-rgb);
+  --stzh-color-secondary90: rgba(var(--stzh-color-secondary90-rgb) / 1);
+  --stzh-color-secondary100-rgb: var(--stzh-color-cyan100-rgb);
+  --stzh-color-secondary100: rgba(var(--stzh-color-secondary100-rgb) / 1);
+
+  /* Header */
+  --stzh-header-logobar-background-color: var(--stzh-color-secondary50);
+
+  /* Pagetitle */
+  --stzh-pagetitle-background-color: var(--stzh-color-secondary20);
+
+  /* Footer */
+  --stzh-footer-background-color: var(--stzh-color-secondary100);
+  --stzh-footer-background-color-menu: var(--stzh-color-secondary80);
+
+  /* Homepage Service Highlights */
+  --stzh-homepage-service-highlights-topnews-subtitle-font: var(--stzh-font-family-heavy);
+  --stzh-homepage-service-highlights-topnews-item-subtitle-color: var(--stzh-color-primary60);
+  --stzh-homepage-service-highlights-topnews-item-subtitle-highlighted-color: var(--stzh-color-primary60);
+
+  /* Tag */
+  --stzh-tag-color: var(--stzh-color-secondary60);
 }
 
 .stzh-theme-uvz {