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

package/dist/stzh-components/p-1b31cd8a.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as s,a as i,g as h}from"./p-c7bfac7a.js";import{c as n,a as o,A as r,o as a,f as z,s as l,b as c}from"./p-7423c6c2.js";import{c as p}from"./p-ed63ed76.js";import{i as f}from"./p-d789f265.js";import{m as v,a as d,r as x}from"./p-10e2901a.js";import{w as g}from"./p-54bd842e.js";import{s as m,a as u}from"./p-7e2354d0.js";import"./p-9b063923.js";const w=".sc-stzh-popover-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-popover-h{display:none}.sc-stzh-popover-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-popover-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-popover-h *.sc-stzh-popover,.sc-stzh-popover-h *.sc-stzh-popover::before,.sc-stzh-popover-h *.sc-stzh-popover::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-popover-h .has-focus.sc-stzh-popover{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-popover-h .stzh-fylingfocus-focused.sc-stzh-popover{outline-style:none !important}.sc-stzh-popover-h .stzh-fylingfocus-focused.sc-stzh-popover::-moz-focus-inner{border:0 !important}.sc-stzh-popover-h{display:contents;--color:var(--stzh-color-black);--width:var(--stzh-popover-width);--min-width:var(--stzh-popover-min-width);--max-width:var(--stzh-popover-max-width);--height:auto;--min-height:initial;--max-height:initial;--padding:var(--stzh-popover-padding);--content-padding:var(--stzh-popover-content-padding);--border-radius:var(--stzh-popover-border-radius);--background-color:var(--stzh-popover-background-color);--backdrop-opacity:var(--stzh-dialog-backdrop-opacity);--backdrop-background-color:var(--stzh-dialog-backdrop-background-color)}[size=large].sc-stzh-popover-h{--content-padding:var(--stzh-popover-large-content-padding)}[variant=secondary].sc-stzh-popover-h{--background-color:var(--stzh-color-secondary20)}[variant=tooltip].sc-stzh-popover-h{--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--content-padding:var(--stzh-space-small) var(--stzh-space-large);--border-radius:var(--stzh-tooltip-border-radius)}@media screen and (min-width: 600px){[variant=tooltip].sc-stzh-popover-h{--content-padding:var(--stzh-tooltip-padding);--color:var(--stzh-color-white);--link-color:var(--stzh-color-white);--hover-link-color:var(--stzh-color-white70op);--background-color:var(--stzh-color-coolgrey60)}}.stzh-popover.sc-stzh-popover{display:contents}.stzh-popover__arrow.sc-stzh-popover{position:absolute;display:flex;color:var(--background-color)}.stzh-popover--placement-bottom.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-bottom-start.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-bottom-end.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover{top:0;transform:translateY(-0.5rem)}.stzh-popover--placement-top.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-top-start.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-top-end.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover{bottom:0;transform:translateY(0.5rem) rotate(180deg)}.stzh-popover--placement-left.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-left-start.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-left-end.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover{right:0;transform:translateX(0.75rem) rotate(90deg)}.stzh-popover--placement-right.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-right-start.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-right-end.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover{left:0;transform:translateX(-0.75rem) rotate(-90deg)}.stzh-popover__trigger.sc-stzh-popover{display:contents}.stzh-popover__content-wrapper.sc-stzh-popover{display:contents}@media screen and (max-width: 599px){.stzh-popover__content-wrapper.sc-stzh-popover{z-index:var(--stzh-z-index-dialog);display:flex;position:fixed;top:0;left:0;width:100%;height:100%;flex-direction:column;align-items:stretch;justify-content:stretch}}.stzh-popover__backdrop.sc-stzh-popover{display:contents}@media screen and (max-width: 599px){.stzh-popover__backdrop.sc-stzh-popover{z-index:1;position:absolute;display:block;top:0px;left:0px;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;text-align:center;background-color:var(--backdrop-background-color);opacity:var(--backdrop-opacity)}}.stzh-popover__content.sc-stzh-popover{display:contents}@media screen and (max-width: 599px){.stzh-popover__content.sc-stzh-popover{z-index:2;position:relative;display:flex;flex-direction:column;align-items:center;flex-grow:1;overflow:auto}}.stzh-popover__dialog.sc-stzh-popover{margin-top:auto;width:100%;overflow:visible;border-top-left-radius:0.125rem;border-top-right-radius:0.125rem;background-color:var(--background-color);touch-action:none;outline:none;border-bottom:0.125rem solid var(--stzh-color-old-grey13);color:var(--color);--stzh-base-color:var(--color);--stzh-link-color:var(--link-color);--stzh-link-hover-color:var(--hover-link-color)}@media screen and (min-width: 600px){.stzh-popover__dialog.sc-stzh-popover{z-index:var(--stzh-z-index-popover);position:absolute;display:flex;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);left:auto;right:auto;bottom:auto;border-radius:var(--border-radius);box-shadow:var(--stzh-box-shadow-popover);border:none}}.stzh-popover__content-inner.sc-stzh-popover,.stzh-popover__content-slot-wrapper.sc-stzh-popover{display:flex;flex-direction:column;width:100%}.stzh-popover__content-slot-wrapper.sc-stzh-popover{padding:var(--padding)}.stzh-popover__content-slot.sc-stzh-popover{overflow-y:auto;overflow-x:hidden;overflow-scrolling:touch;padding:var(--content-padding)}.stzh-popover__action-slot.sc-stzh-popover{display:flex;flex-direction:column}.stzh-popover__label-wrapper.sc-stzh-popover{display:flex;align-items:center;padding:var(--stzh-space-small) var(--stzh-space-large);padding-right:var(--stzh-space-medium);border-bottom:0.0625rem solid var(--stzh-base-border-color);color:var(--stzh-color-old-grey70)}@media screen and (min-width: 600px){.stzh-popover__label-wrapper.sc-stzh-popover{padding:0;border-bottom:0}}.stzh-popover__label.sc-stzh-popover{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-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));margin:0;margin-right:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-popover__label.sc-stzh-popover{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-popover__label.sc-stzh-popover{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}.stzh-popover__close.sc-stzh-popover{visibility:var(--stzh-popover-close-visibility);cursor:pointer;display:flex;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background-color:transparent;padding:0;margin-left:auto;border-radius:50%;color:var(--stzh-base-lead-color);padding:var(--stzh-space-xxsmall)}.stzh-popover__icon.sc-stzh-popover{--size:var(--stzh-icon-size-xsmall)}.stzh-popover__arrow.sc-stzh-popover{position:absolute;display:none}@media screen and (min-width: 600px){.stzh-popover__arrow.sc-stzh-popover{display:flex}}.stzh-popover__vhidden.sc-stzh-popover{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-popover--default.sc-stzh-popover .stzh-popover__close.sc-stzh-popover:focus,.stzh-popover--secondary.sc-stzh-popover .stzh-popover__close.sc-stzh-popover:focus{box-shadow:0 0 0 0.0625rem var(--stzh-color-primary)}@media screen and (min-width: 600px){.stzh-popover--default.sc-stzh-popover .stzh-popover__close.sc-stzh-popover,.stzh-popover--secondary.sc-stzh-popover .stzh-popover__close.sc-stzh-popover{position:absolute;top:0;right:0;transform:translate(30%, -30%);background-color:var(--stzh-color-old-grey5)}.stzh-popover--default.sc-stzh-popover .stzh-popover__close.sc-stzh-popover:not(:focus):not(:active),.stzh-popover--secondary.sc-stzh-popover .stzh-popover__close.sc-stzh-popover:not(:focus):not(:active){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}}@media screen and (min-width: 600px){.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__content-inner.sc-stzh-popover{flex-direction:row-reverse;align-items:flex-start}}.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__close.sc-stzh-popover{visibility:visible}@media screen and (min-width: 600px){.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__close.sc-stzh-popover{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)}}@media screen and (min-width: 600px){.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__icon.sc-stzh-popover{--size:var(--stzh-icon-size-small)}}@media screen and (min-width: 600px){@supports (filter: var(--stzh-tooltip-drop-shadow)){.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__dialog.sc-stzh-popover{box-shadow:none;filter:var(--stzh-tooltip-drop-shadow)}}}@media screen and (min-width: 600px){.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__content-slot.sc-stzh-popover{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 600px){.stzh-popover--popover-fullwidth-horizontal.sc-stzh-popover .stzh-popover__dialog.sc-stzh-popover{left:0 !important;right:0 !important;width:100%}}@media screen and (min-width: 600px){.stzh-popover--popover-fullwidth-vertical.sc-stzh-popover .stzh-popover__dialog.sc-stzh-popover{top:0 !important;bottom:0 !important;height:100%}}";const b=200;const y=300;const _=100;const k=200;function $(){const t=v("small").matches;return{keyframes:[{opacity:"0"},{opacity:"1"}],options:{duration:t?_:b,easing:"linear"}}}function j(){const t=v("small").matches;return{keyframes:[{opacity:"1"},{opacity:"0"}],options:{duration:t?k:y,easing:"linear"}}}function O(){const t=v("small").matches;return{keyframes:[{transform:t?"translateY(-8px)":"translateY(100%)"},{transform:"translateY(0px)"}],options:{duration:t?_:b,easing:"linear"}}}function C(){const t=v("small").matches;return{keyframes:[{transform:"translateY(0px)"},{transform:t?"translateY(-8px)":"translateY(100%)"}],options:{duration:t?k:y,easing:"linear"}}}const Y={ESC:27};const D="stzh-popover-open";let A=0;const P=class{constructor(s){t(this,s);this.stzhOpen=e(this,"stzhOpen",7);this.stzhOpened=e(this,"stzhOpened",7);this.stzhClose=e(this,"stzhClose",7);this.stzhClosed=e(this,"stzhClosed",7);this.initialTouchX=null;this.initialTouchY=null;this.mediaChangeHandler=()=>{const t=document.documentElement.style.getPropertyValue("--stzh-header-is-stuck");this.isHeaderStuckAndViewportMicro=!v("small").matches&&t==="1"&&this.hasStzhHeaderParent;if(this.open&&this.isBranchedOutToBody&&!this.isHeaderStuckAndViewportMicro){this.branchInFromBody()}};this.handleKeydown=t=>{if(t.keyCode===Y.ESC){this.hide()}};this.onClickTrigger=()=>{this.toggle()};this.computePosition=async()=>{if(v("small").matches){const t=[a({mainAxis:this.distance,crossAxis:this.skidding}),z({padding:5}),l({padding:5})];if(this.variant==="tooltip"){t.push(c({element:this.arrowElement,padding:5}))}const{x:e=0,y:s=0,strategy:i="absolute",placement:h,middlewareData:o}=await n(this.triggerFirstElement,this.dialogElement,{strategy:this.strategy,placement:this.placement,middleware:t});this.computedPlacement=h;Object.assign(this.dialogElement.style,{position:i,left:`${e}px`,top:`${s}px`});if(this.variant==="tooltip"){Object.assign(this.arrowElement.style,{left:e!=null?`${o.arrow.x}px`:"",top:s!=null?`${o.arrow.y}px`:""})}}else{Object.assign(this.dialogElement.style,{position:null,left:null,top:null});if(this.variant==="tooltip"){Object.assign(this.arrowElement.style,{left:null,top:null})}}};this.handleTouchStart=t=>{const e=t.changedTouches[0];this.initialTouchX=e.pageX;this.initialTouchY=e.pageY};this.handleTouchEnd=t=>{const e=t.changedTouches[0];const s=e.pageX-this.initialTouchX;const i=e.pageY-this.initialTouchY;const h=70;const n=Math.abs(i)>=h&&Math.abs(s)<=h;if(n){const e=t.target.closest(".stzh-dropdown")!==null;if(!e){this.hide()}}this.initialTouchY=null;this.initialTouchX=null};this.init=()=>{var t;let e=(t=this.triggerElement)===null||t===void 0?void 0:t.firstElementChild;if(!e){const t=Array.from(this.element.children).find((t=>!t.hasAttribute("slot")));e=t}if(e){this.triggerFirstElement=e;e.addEventListener("click",this.onClickTrigger)}};this.initializedPopover=false;this.open=false;this.placement="bottom";this.fullwidth="";this.variant="default";this.size="default";this.skidding=0;this.distance=undefined;this.label="";this.strategy="absolute";this.localization=undefined;this.computedPlacement=undefined;this.isHeaderStuckAndViewportMicro=undefined;this.isBranchedOutToBody=undefined;this.hasStzhHeaderParent=undefined}async show(){if(this.open){return}this.mediaChangeHandler();if(this.isHeaderStuckAndViewportMicro){this.branchOutToBody()}this.toggledByMethod=true;this.open=true;return g(this.element,"stzhOpened")}async hide(){if(!this.open){return}this.toggledByMethod=true;this.open=false;await g(this.element,"stzhClosed");this.mediaChangeHandler();if(this.isHeaderStuckAndViewportMicro){this.branchInFromBody()}return true}async toggle(){if(this.open){return await this.hide()}else{return await this.show()}}async update(){return await this.computePosition()}handleOutsideClick(t){if(!this.open){return}const e=t.target!==this.dialogElement&&this.dialogElement.contains(t.target)===false;const s=t.target===this.triggerElement||this.triggerElement.contains(t.target);if(e&&!s){this.hide()}}async openWatcher(t){if(!this.dialogElement){return}if(t){if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-popover"})}const t=$();const e=O();await Promise.all([m(this.contentWrapperElement),m(this.contentElement),m(this.dialogElement)]);this.dialogElement.style.willChange="transform, opacity, position, top, left, bottom, right";this.contentWrapperElement.hidden=false;await Promise.all([u(v("small").matches?this.dialogElement:this.contentWrapperElement,t.keyframes,t.options),u(v("small").matches?this.dialogElement:this.contentElement,e.keyframes,e.options)]);if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-popover"})}}else{if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-popover"})}const t=j();const e=C();await Promise.all([m(this.contentWrapperElement),m(this.contentElement),m(this.dialogElement)]);await Promise.all([u(v("small").matches?this.dialogElement:this.contentWrapperElement,t.keyframes,t.options),u(v("small").matches?this.dialogElement:this.contentElement,e.keyframes,e.options)]);this.contentWrapperElement.hidden=true;this.dialogElement.style.willChange="auto";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-popover"})}}this.toggledByMethod=false}distanceWatcher(t){if(typeof t==="number"){this.distance=t}else{this.distance=this.variant==="tooltip"?12:8}}setStzhHeaderParent(){let t=this.element.parentElement;while(t){if(t.tagName&&t.tagName.toLowerCase()==="stzh-header"){return true}t=t.parentElement}return false}branchOutToBody(){document.body.append(this.element);this.parentNode.appendChild(this.triggerElement);this.isBranchedOutToBody=true}branchInFromBody(){this.parentNode.appendChild(this.element);this.rootElement.prepend(this.triggerElement);this.isBranchedOutToBody=false}async componentWillLoad(){this.id=`stzh-popover-${A++}`;this.parentNode=this.element.parentNode;this.hasStzhHeaderParent=this.setStzhHeaderParent();this.distanceWatcher(this.distance);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"popover")}}popoverShown(){document.body.classList.add(D);const t=f(this.triggerFirstElement);this.triggerFirstElement.setAttribute(t?"a11y-expanded":"aria-expanded","true");if(this.trap){this.trap.activate()}}popoverHidden(){document.body.classList.remove(D);const t=f(this.triggerFirstElement);this.triggerFirstElement.setAttribute(t?"a11y-expanded":"aria-expanded","false");if(this.trap){this.trap.deactivate()}}componentDidRender(){this.mediaChangeHandler();const t=f(this.triggerFirstElement);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)}}componentDidUpdate(){if(this.open&&!this.initializedPopover){this.initializeAutoUpdate();this.initializeFocusTrap();this.popoverShown();this.initializedPopover=true}if(this.initializedPopover){if(this.open){this.popoverShown()}else{this.popoverHidden()}this.computePosition();if(this.trap){this.trap.updateContainerElements(this.dialogElement)}}}initializeAutoUpdate(){this.autoUpdateCleanup=o(this.triggerFirstElement,this.dialogElement,this.computePosition)}initializeFocusTrap(){this.trap=p(this.dialogElement,{fallbackFocus:this.dialogElement,clickOutsideDeactivates:true,returnFocusOnDeactivate:true})}componentDidLoad(){this.contentWrapperElement.hidden=!this.open;this.open?this.popoverShown():this.popoverHidden()}connectedCallback(){d(this.mediaChangeHandler);this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){x(this.mediaChangeHandler);if(this.observer){this.observer.disconnect()}if(this.autoUpdateCleanup){this.autoUpdateCleanup()}if(this.triggerFirstElement){this.triggerFirstElement.removeEventListener("click",this.onClickTrigger)}}render(){const t={"stzh-popover":true,[`stzh-popover--open`]:this.open,[`stzh-popover--placement-${this.computedPlacement}`]:!!this.computedPlacement,[`stzh-popover--fullwidth-${this.fullwidth}`]:!!this.fullwidth,[`stzh-popover--${this.size}`]:!!this.size,[`stzh-popover--${this.variant}`]:!!this.variant};return s(i,null,s("div",{class:t,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd,ref:t=>this.rootElement=t},s("div",{ref:t=>this.triggerElement=t,class:"stzh-popover__trigger"},s("slot",null)),s("div",{class:"stzh-popover__vhidden",id:`${this.id}-trigger-description`},this.localization.open),s("div",{ref:t=>this.contentWrapperElement=t,class:"stzh-popover__content-wrapper"},s("div",{class:"stzh-popover__backdrop"}),s("div",{ref:t=>this.contentElement=t,class:"stzh-popover__content"},s("div",{ref:t=>this.dialogElement=t,class:"stzh-popover__dialog",role:"dialog",tabindex:"-1","aria-modal":"true","aria-labelledby":this.label?`${this.id}-label`:null,"aria-hidden":this.open?"false":"true",onKeyDown:this.handleKeydown},this.variant==="tooltip"&&s("div",{class:"stzh-popover__arrow",ref:t=>this.arrowElement=t,innerHTML:r}),s("div",{class:"stzh-popover__content-inner"},s("div",{class:"stzh-popover__label-wrapper"},s("h2",{id:`${this.id}-label`,class:"stzh-popover__label"},this.label?this.label:s("slot",{name:"label"})),s("button",{class:"stzh-popover__close",onClick:()=>this.hide(),type:"button"},s("stzh-icon",{name:"close",class:"stzh-popover__icon"}),s("span",{class:"stzh-popover__vhidden"},this.localization.close))),s("div",{class:"stzh-popover__content-slot-wrapper"},s("div",{class:"stzh-popover__content-slot"},s("slot",{name:"content"})),s("div",{class:"stzh-popover__action-slot"},s("slot",{name:"action"})))))))))}get element(){return h(this)}static get watchers(){return{open:["openWatcher"],distance:["distanceWatcher"]}}};P.style=w;const T='.sc-stzh-text-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-text-h{display:none}.sc-stzh-text-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-text-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-text-h *.sc-stzh-text,.sc-stzh-text-h *.sc-stzh-text::before,.sc-stzh-text-h *.sc-stzh-text::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-text-h .has-focus.sc-stzh-text{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-text-h .stzh-fylingfocus-focused.sc-stzh-text{outline-style:none !important}.sc-stzh-text-h .stzh-fylingfocus-focused.sc-stzh-text::-moz-focus-inner{border:0 !important}.sc-stzh-text-h{--icon-size:1.25em;--icon-vertical-align:text-bottom;--color:var(--stzh-base-color);--display:var(--stzh-text-display, block);width:100%;color:var(--color);--grid-template-areas:var(\n    --stzh-text-grid-template-areas,\n    "text text text text"\n  );--grid-template-columns:var(\n    --stzh-text-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 600px){.sc-stzh-text-h{--grid-template-areas:var(\n      --stzh-text-grid-template-areas,\n      "text text text text"\n    )}}@media screen and (min-width: 900px){.sc-stzh-text-h{--grid-template-areas:var(\n      --stzh-text-grid-template-areas,\n      "text text text text text text text text"\n    );--grid-template-columns:var(\n      --stzh-text-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}.sc-stzh-text-h .sc-stzh-text-s>*:first-child{margin-top:0 !important}.sc-stzh-text-h .sc-stzh-text-s>*:last-child{margin-bottom:0 !important}.sc-stzh-text-h .sc-stzh-text-s>a,.sc-stzh-text-h .sc-stzh-text-s a{color:var(--stzh-link-color);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius);text-underline-offset:var(--stzh-link-text-underline-offset);-webkit-text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-line:var(--stzh-link-text-decoration-line);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-text-h .sc-stzh-text-s>a:hover,.sc-stzh-text-h .sc-stzh-text-s a:hover{color:var(--stzh-link-hover-color);-webkit-text-decoration-line:var(--stzh-link-hover-text-decoration-line);text-decoration-line:var(--stzh-link-hover-text-decoration-line)}@media (hover: none){.sc-stzh-text-h .sc-stzh-text-s>a:hover,.sc-stzh-text-h .sc-stzh-text-s a:hover{color:inherit}}.sc-stzh-text-h .sc-stzh-text-s>b,.sc-stzh-text-h .sc-stzh-text-s>strong,.sc-stzh-text-h .sc-stzh-text-s b,.sc-stzh-text-h .sc-stzh-text-s strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.sc-stzh-text-h .sc-stzh-text-s>i,.sc-stzh-text-h .sc-stzh-text-s>em,.sc-stzh-text-h .sc-stzh-text-s i,.sc-stzh-text-h .sc-stzh-text-s em{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}[lead].sc-stzh-text-h:not([lead=false]){--color:var(--stzh-base-lead-color)}[color=primary].sc-stzh-text-h{--color:var(--stzh-color-primary70)}[color=secondary].sc-stzh-text-h{--color:var(--stzh-color-secondary60)}[color=info].sc-stzh-text-h{--color:var(--stzh-text-info-color)}[color=inherit].sc-stzh-text-h{--color:initial}.stzh-text.sc-stzh-text{--stzh-icon-size:var(--icon-size);--stzh-icon-vertical-align:var(--icon-vertical-align);--stzh-list-font-size:"";--stzh-list-line-height:"";--stzh-list-letter-spacing:"";font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:var(--display);grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns);color:var(--color)}@media screen and (min-width: 900px){.stzh-text.sc-stzh-text{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text.sc-stzh-text{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-text.sc-stzh-text{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-text.sc-stzh-text{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-text.sc-stzh-text{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-text__text.sc-stzh-text{grid-area:text;display:flex}.stzh-text__icon.sc-stzh-text{flex-shrink:0}.stzh-text__icon.sc-stzh-text:not(:empty){margin-right:0.25em}.stzh-text__text-inner.sc-stzh-text{flex-grow:1}.stzh-text--is-lead.sc-stzh-text{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-lead-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-lead-default-lead-line-height, var(--stzh-font-milli-lead-line-height));letter-spacing:var(--stzh-font-curve-lead-default-lead-letter-spacing)}@media screen and (min-width: 1260px){.stzh-text--is-lead.sc-stzh-text{font-size:var(--stzh-font-curve-lead-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-lead-large-lead-line-height, var(--stzh-font-deci-lead-line-height));letter-spacing:var(--stzh-font-curve-lead-large-lead-letter-spacing)}}.stzh-text--font-light.sc-stzh-text{font-family:var(--stzh-font-family-light);font-weight:var(--stzh-font-weight-light);font-style:var(--stzh-font-style-light)}.stzh-text--font-regular.sc-stzh-text{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular)}.stzh-text--font-medium.sc-stzh-text{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-text--font-medium-italic.sc-stzh-text{font-family:var(--stzh-font-family-medium-italic);font-weight:var(--stzh-font-weight-medium-italic);font-style:var(--stzh-font-style-medium-italic)}.stzh-text--font-heavy.sc-stzh-text{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-text--font-title.sc-stzh-text{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title)}.stzh-text--curve-none.sc-stzh-text{font-size:inherit}.stzh-text--curve-caption.sc-stzh-text{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 900px){.stzh-text--curve-caption.sc-stzh-text{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-text--curve-lead.sc-stzh-text{font-size:var(--stzh-font-curve-lead-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-lead-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-lead-default-text-letter-spacing)}@media screen and (min-width: 1260px){.stzh-text--curve-lead.sc-stzh-text{font-size:var(--stzh-font-curve-lead-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-lead-large-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-lead-large-text-letter-spacing)}}.stzh-text--curve-p2.sc-stzh-text{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height))}@media screen and (min-width: 900px){.stzh-text--curve-p2.sc-stzh-text{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.stzh-text--curve-p1.sc-stzh-text{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-text--curve-p1.sc-stzh-text{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-text--curve-h4.sc-stzh-text{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)}@media screen and (min-width: 600px){.stzh-text--curve-h4.sc-stzh-text{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-text--curve-h4.sc-stzh-text{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-text--curve-h4.sc-stzh-text{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))}}.stzh-text--curve-h3.sc-stzh-text{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h3-default-text-letter-spacing)}@media screen and (min-width: 600px){.stzh-text--curve-h3.sc-stzh-text{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h3-small-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--curve-h3.sc-stzh-text{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-text--curve-h3.sc-stzh-text{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.stzh-text--curve-h2.sc-stzh-text{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h2-default-text-letter-spacing)}@media screen and (min-width: 600px){.stzh-text--curve-h2.sc-stzh-text{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-text--curve-h2.sc-stzh-text{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-text--curve-h2.sc-stzh-text{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-text-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-text-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h1-small-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-medium-text-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-text-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-large-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-large-text-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-large-text-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-text-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-text-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.stzh-text--curve-hero.sc-stzh-text{font-size:var(--stzh-font-curve-hero-default-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-hero-default-text-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-hero-default-text-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-text--curve-hero.sc-stzh-text{font-size:var(--stzh-font-curve-hero-small-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-hero-small-text-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-hero-small-text-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-text--curve-hero.sc-stzh-text{font-size:var(--stzh-font-curve-hero-large-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-hero-large-text-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-hero-large-text-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-text--curve-hero.sc-stzh-text{font-size:var(--stzh-font-curve-hero-ultra-font-size, var(--stzh-font-hero-font-size));line-height:var(--stzh-font-curve-hero-ultra-text-line-height, var(--stzh-font-hero-text-line-height));letter-spacing:var(--stzh-font-curve-hero-ultra-text-letter-spacing, var(--stzh-font-hero-text-letter-spacing))}}.stzh-text--curve-h1home.sc-stzh-text{font-size:var(--stzh-font-curve-h1home-default-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1home-default-text-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1home-default-text-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-text--curve-h1home.sc-stzh-text{font-size:var(--stzh-font-curve-h1home-small-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1home-small-text-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1home-small-text-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-text--curve-h1home.sc-stzh-text{font-size:var(--stzh-font-curve-h1home-medium-font-size, var(--stzh-font-peta-font-size));line-height:var(--stzh-font-curve-h1home-medium-text-line-height, var(--stzh-font-peta-text-line-height));letter-spacing:var(--stzh-font-curve-h1home-medium-text-letter-spacing, var(--stzh-font-peta-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-text--curve-h1home.sc-stzh-text{font-size:var(--stzh-font-curve-h1home-large-font-size, var(--stzh-font-exa-font-size));line-height:var(--stzh-font-curve-h1home-large-text-line-height, var(--stzh-font-exa-text-line-height));letter-spacing:var(--stzh-font-curve-h1home-large-text-letter-spacing, var(--stzh-font-exa-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-text--curve-h1home.sc-stzh-text{font-size:var(--stzh-font-curve-h1home-ultra-font-size, var(--stzh-font-zetta-font-size));line-height:var(--stzh-font-curve-h1home-ultra-text-line-height, var(--stzh-font-zetta-text-line-height));letter-spacing:var(--stzh-font-curve-h1home-ultra-text-letter-spacing, var(--stzh-font-zetta-text-letter-spacing))}}.stzh-text--size-femto.sc-stzh-text{font-size:var(--stzh-font-femto-font-size);line-height:var(--stzh-font-femto-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-text--size-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}.stzh-text--size-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-text--size-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-text--size-milli.sc-stzh-text{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-text--size-centi.sc-stzh-text{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-text--size-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-text--size-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-text--size-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}.stzh-text--size-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}.stzh-text--size-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}.stzh-text--size-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}.stzh-text--size-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}.stzh-text--size-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}.stzh-text--size-peta.sc-stzh-text{font-size:var(--stzh-font-peta-font-size);line-height:var(--stzh-font-peta-text-line-height);letter-spacing:var(--stzh-font-peta-text-letter-spacing)}.stzh-text--size-exa.sc-stzh-text{font-size:var(--stzh-font-exa-font-size);line-height:var(--stzh-font-exa-text-line-height);letter-spacing:var(--stzh-font-exa-text-letter-spacing)}.stzh-text--size-zetta.sc-stzh-text{font-size:var(--stzh-font-zetta-font-size);line-height:var(--stzh-font-zetta-text-line-height);letter-spacing:var(--stzh-font-zetta-text-letter-spacing)}@media screen and (min-width: 600px){.stzh-text--size-small-femto.sc-stzh-text{font-size:var(--stzh-font-femto-font-size);line-height:var(--stzh-font-femto-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 600px){.stzh-text--size-small-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}}@media screen and (min-width: 600px){.stzh-text--size-small-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}@media screen and (min-width: 600px){.stzh-text--size-small-milli.sc-stzh-text{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-centi.sc-stzh-text{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-peta.sc-stzh-text{font-size:var(--stzh-font-peta-font-size);line-height:var(--stzh-font-peta-text-line-height);letter-spacing:var(--stzh-font-peta-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-exa.sc-stzh-text{font-size:var(--stzh-font-exa-font-size);line-height:var(--stzh-font-exa-text-line-height);letter-spacing:var(--stzh-font-exa-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-zetta.sc-stzh-text{font-size:var(--stzh-font-zetta-font-size);line-height:var(--stzh-font-zetta-text-line-height);letter-spacing:var(--stzh-font-zetta-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-femto.sc-stzh-text{font-size:var(--stzh-font-femto-font-size);line-height:var(--stzh-font-femto-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 900px){.stzh-text--size-medium-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}}@media screen and (min-width: 900px){.stzh-text--size-medium-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}@media screen and (min-width: 900px){.stzh-text--size-medium-milli.sc-stzh-text{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-centi.sc-stzh-text{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-peta.sc-stzh-text{font-size:var(--stzh-font-peta-font-size);line-height:var(--stzh-font-peta-text-line-height);letter-spacing:var(--stzh-font-peta-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-exa.sc-stzh-text{font-size:var(--stzh-font-exa-font-size);line-height:var(--stzh-font-exa-text-line-height);letter-spacing:var(--stzh-font-exa-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-zetta.sc-stzh-text{font-size:var(--stzh-font-zetta-font-size);line-height:var(--stzh-font-zetta-text-line-height);letter-spacing:var(--stzh-font-zetta-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-femto.sc-stzh-text{font-size:var(--stzh-font-femto-font-size);line-height:var(--stzh-font-femto-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 1260px){.stzh-text--size-large-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}}@media screen and (min-width: 1260px){.stzh-text--size-large-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}@media screen and (min-width: 1260px){.stzh-text--size-large-milli.sc-stzh-text{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-centi.sc-stzh-text{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-peta.sc-stzh-text{font-size:var(--stzh-font-peta-font-size);line-height:var(--stzh-font-peta-text-line-height);letter-spacing:var(--stzh-font-peta-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-exa.sc-stzh-text{font-size:var(--stzh-font-exa-font-size);line-height:var(--stzh-font-exa-text-line-height);letter-spacing:var(--stzh-font-exa-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-zetta.sc-stzh-text{font-size:var(--stzh-font-zetta-font-size);line-height:var(--stzh-font-zetta-text-line-height);letter-spacing:var(--stzh-font-zetta-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-femto.sc-stzh-text{font-size:var(--stzh-font-femto-font-size);line-height:var(--stzh-font-femto-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-milli.sc-stzh-text{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-centi.sc-stzh-text{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-peta.sc-stzh-text{font-size:var(--stzh-font-peta-font-size);line-height:var(--stzh-font-peta-text-line-height);letter-spacing:var(--stzh-font-peta-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-exa.sc-stzh-text{font-size:var(--stzh-font-exa-font-size);line-height:var(--stzh-font-exa-text-line-height);letter-spacing:var(--stzh-font-exa-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-zetta.sc-stzh-text{font-size:var(--stzh-font-zetta-font-size);line-height:var(--stzh-font-zetta-text-line-height);letter-spacing:var(--stzh-font-zetta-text-letter-spacing)}}';const W=class{constructor(e){t(this,e);this.font="default";this.curve="default";this.lead=false;this.color="default";this.size="inherit";this.sizeSmall="inherit";this.sizeMedium="inherit";this.sizeLarge="inherit";this.sizeUltra="inherit"}render(){return s(i,null,s("div",{class:{"stzh-text":true,"stzh-text--is-lead":this.lead,[`stzh-text--font-${this.font}`]:!!this.font,[`stzh-text--curve-${this.curve}`]:!!this.curve,[`stzh-text--size-${this.size}`]:!!this.size,[`stzh-text--size-small-${this.sizeSmall}`]:!!this.sizeSmall,[`stzh-text--size-medium-${this.sizeMedium}`]:!!this.sizeMedium,[`stzh-text--size-large-${this.sizeLarge}`]:!!this.sizeLarge,[`stzh-text--size-ultra-${this.sizeUltra}`]:!!this.sizeUltra}},s("div",{class:"stzh-text__text"},s("div",{class:"stzh-text__icon"},s("slot",{name:"icon"})),s("div",{class:"stzh-text__text-inner"},s("slot",null)))))}};W.style=T;export{P as stzh_popover,W as stzh_text};
-//# sourceMappingURL=p-1b31cd8a.entry.js.map

package/dist/stzh-components/p-1b31cd8a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhPopoverCss","ANIMATION_SHOW_DURATION","ANIMATION_HIDE_DURATION","ANIMATION_SHOW_DURATION_SMALL","ANIMATION_HIDE_DURATION_SMALL","animationContentWrapperShow","isSmall","media","matches","keyframes","opacity","options","duration","easing","animationContentWrapperHide","animationDialogShow","transform","animationDialogHide","keyCode","ESC","CLASS_BODY_OPEN","popoverCounter","StzhPopover","this","initialTouchX","initialTouchY","mediaChangeHandler","isStzhHeaderStuck","document","documentElement","style","getPropertyValue","isHeaderStuckAndViewportMicro","hasStzhHeaderParent","open","isBranchedOutToBody","branchInFromBody","handleKeydown","event","hide","onClickTrigger","toggle","computePosition","async","middleware","offset","mainAxis","distance","crossAxis","skidding","flip","padding","shift","variant","push","arrow","element","arrowElement","x","y","strategy","placement","middlewareData","triggerFirstElement","dialogElement","computedPlacement","Object","assign","position","left","top","handleTouchStart","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","isYSwipe","Math","abs","isInDropdown","target","closest","init","trigger","_a","triggerElement","firstElementChild","defaultSlot","Array","from","children","find","child","hasAttribute","addEventListener","initializedPopover","show","branchOutToBody","toggledByMethod","waitForEvent","update","handleOutsideClick","isClickOutside","contains","isClickTrigger","openWatcher","newValue","stzhOpen","emit","component","animationShow","animationShowDialog","Promise","all","stopAnimations","contentWrapperElement","contentElement","willChange","hidden","animateTo","stzhOpened","stzhClose","animationHide","animationHideDialog","stzhClosed","distanceWatcher","setStzhHeaderParent","parent","parentElement","tagName","toLowerCase","body","append","parentNode","appendChild","rootElement","prepend","componentWillLoad","id","localization","window","stzhComponents","utils","fetchTranslations","popoverShown","classList","add","isStzh","isStzhElement","setAttribute","trap","activate","popoverHidden","remove","deactivate","componentDidRender","getAttribute","label","componentDidUpdate","initializeAutoUpdate","initializeFocusTrap","updateContainerElements","autoUpdateCleanup","autoUpdate","createFocusTrap","fallbackFocus","clickOutsideDeactivates","returnFocusOnDeactivate","componentDidLoad","connectedCallback","addMediaChangeListener","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","removeMediaChangeListener","disconnect","removeEventListener","render","classes","fullwidth","size","h","Host","class","onTouchStart","onTouchEnd","ref","el","role","tabindex","onKeyDown","innerHTML","Arrow","name","onClick","type","close","stzhTextCss","StzhText","lead","font","curve","sizeSmall","sizeMedium","sizeLarge","sizeUltra"],"sources":["src/components/stzh-popover/stzh-popover.scss?tag=stzh-popover&encapsulation=scoped","src/components/stzh-popover/stzh-popover.tsx","src/components/stzh-text/stzh-text.scss?tag=stzh-text&encapsulation=scoped","src/components/stzh-text/stzh-text.tsx"],"sourcesContent":["/**\n * @prop --width: Width of popover above small breakpoint\n * @prop --min-width: Minimum width of popover above small breakpoint\n * @prop --max-width: Maximum width of popover above small breakpoint\n * @prop --padding: Padding of popover\n * @prop --content-padding: Padding of popover content\n * @prop --border-radius: Border radius of popover\n * @prop --backdrop-opacity: Opacity of popover backdrop (used on mikro breakpoint)\n *\n * @prop --stzh-popover-width: **Global**: Width of popover above small breakpoint (default `223px`)\n * @prop --stzh-popover-min-width: **Global**: Minimum width of popover above small breakpoint (default `initial`)\n * @prop --stzh-popover-max-width: **Global**: Maximum width of popover above small breakpoint (default `initial`)\n * @prop --stzh-popover-padding: **Global**: Padding of popover (default `0px`)\n * @prop --stzh-popover-content-padding: **Global**: Padding of popover content (default `8px 0px`)\n * @prop --stzh-popover-border-radius: **Global**: Border radius of popover above small breakpoint (default `3px`)\n *\n * @prop --stzh-dialog-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-dialog-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  display: contents;\n\n  --color: #{$colorBlack};\n  --width: #{$popoverWidth};\n  --min-width: #{$popoverMinWidth};\n  --max-width: #{$popoverMaxWidth};\n  --height: auto;\n  --min-height: initial;\n  --max-height: initial;\n  --padding: #{$popoverPadding};\n  --content-padding: #{$popoverContentPadding};\n  --border-radius: #{$popoverBorderRadius};\n  --background-color: #{$popoverBackgroundColor};\n  --backdrop-opacity: #{$dialogBackdropOpacity};\n  --backdrop-background-color: #{$dialogBackdropBackgroundColor};\n\n  &[size=\"large\"] {\n    --content-padding: #{$popoverLargeContentPadding};\n  }\n\n  &[variant=\"secondary\"] {\n    --background-color: #{$colorSecondary20};\n  }\n\n  &[variant=\"tooltip\"] {\n    --width: #{$tooltipWidth};\n    --min-width: #{$tooltipMinWidth};\n    --max-width: #{$tooltipMaxWidth};\n    --content-padding: #{space('small')} #{space('large')};\n    --border-radius: #{$tooltipBorderRadius};\n\n    @include mq($from: small) {\n      --content-padding: #{$tooltipPadding};\n      --color: #{$colorWhite};\n      --link-color: #{$colorWhite};\n      --hover-link-color: #{$colorWhite70op};\n      --background-color: #{$colorCoolgrey60};\n    }\n  }\n}\n\n.stzh-popover {\n  @include tooltip-arrow;\n  display: contents;\n\n  &__trigger {\n    display: contents;\n  }\n\n  &__content-wrapper {\n    // position: absolute;\n    // width: 100%;\n    // height: 100%;\n    // pointer-events: none;\n    display: contents;\n\n    @include mq($to: small) {\n      z-index: $zIndexDialog;\n      display: flex;\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      flex-direction: column;\n      align-items: stretch;\n      justify-content: stretch;\n    }\n  }\n\n  &__backdrop {\n    display: contents;\n\n    @include mq($to: small) {\n      z-index: 1;\n      position: absolute;\n      display: block;\n      top: 0px;\n      left: 0px;\n      width: 100%;\n      height: 100%;\n      overflow-x: hidden;\n      overflow-y: auto;\n      text-align: center;\n      background-color: var(--backdrop-background-color);\n      opacity: var(--backdrop-opacity);\n    }\n  }\n\n  &__content {\n    // pointer-events: all;\n    display: contents;\n\n    @include mq($to: small) {\n      z-index: 2;\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      flex-grow: 1;\n      overflow: auto;\n    }\n  }\n\n  &__dialog {\n    margin-top: auto;\n    width: 100%;\n    overflow: visible;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n    background-color: var(--background-color);\n    touch-action: none;\n    outline: none;\n    border-bottom: 2px solid $colorOldGrey13;\n    color: var(--color);\n\n    --stzh-base-color: var(--color);\n    --stzh-link-color: var(--link-color);\n    // TODO: check with designer\n    --stzh-link-hover-color: var(--hover-link-color);\n\n    @include mq($from: small) {\n      z-index: $zIndexPopover;\n      position: absolute;\n      display: flex;\n      width: var(--width);\n      min-width: var(--min-width);\n      max-width: var(--max-width);\n      // max-width: calc(100vw - var(--stzh-scrollbar-width) - #{space('small')});\n      height: var(--height);\n      min-height: var(--min-height);\n      max-height: var(--max-height);\n      left: auto;\n      right: auto;\n      bottom: auto;\n      border-radius: var(--border-radius);\n      box-shadow: $boxShadowPopover;\n      border: none;\n    }\n  }\n\n  &__content-inner,\n  &__content-slot-wrapper {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  &__content-slot-wrapper {\n    padding: var(--padding);\n  }\n\n  &__content-slot {\n    overflow-y: auto;\n    overflow-x: hidden;\n    overflow-scrolling: touch;\n    padding: var(--content-padding);\n  }\n\n  &__action-slot {\n    display: flex;\n    flex-direction: column;\n\n    // &:not(:empty) {\n    //   margin: space('xsmall') space('small');\n    //   margin-bottom: space('medium');\n    // }\n  }\n\n  &__label-wrapper {\n    display: flex;\n    align-items: center;\n    padding: space('small') space('large');\n    padding-right: space('medium');\n    border-bottom: 1px solid $baseBorderColor;\n    color: $colorOldGrey70;\n\n    @include mq($from: small) {\n      padding: 0;\n      border-bottom: 0;\n    }\n  }\n\n  &__label {\n    @include font('heavy');\n    @include fontCurve('p2');\n    margin: 0;\n    margin-right: space('small');\n\n    @include mq($from: small) {\n      @include visuallyhidden;\n    }\n  }\n\n  &__close {\n    visibility: $popoverCloseVisibility;\n    cursor: pointer;\n    display: flex;\n    appearance: none;\n    font-family: inherit;\n    border: none;\n    background-color: transparent;\n    padding: 0;\n    margin-left: auto;\n    border-radius: 50%;\n    color: $baseLeadColor;\n    padding: space('xxsmall');\n  }\n\n  &__icon {\n    --size: #{iconSize('xsmall')};\n  }\n\n  &__arrow {\n    position: absolute;\n    display: none;\n\n    @include mq($from: small) {\n      display: flex;\n    }\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  /* Only non tooltip variants */\n\n  &--default &__close,\n  &--secondary &__close {\n    &:focus {\n      box-shadow: 0 0 0 1px $colorPrimary;\n    }\n\n    @include mq($from: small) {\n      @include visuallyhiddenFocusable;\n      position: absolute;\n      top: 0;\n      right: 0;\n      transform: translate(30%, -30%);\n      background-color: $colorOldGrey5;\n    }\n  }\n\n  /* Tooltip variant */\n\n  &--tooltip &__content-inner {\n    @include mq($from: small) {\n      flex-direction: row-reverse;\n      align-items: flex-start;\n    }\n  }\n\n  &--tooltip &__close {\n    visibility: visible;\n\n    @include mq($from: small) {\n      @include tooltip__close;\n    }\n  }\n\n  &--tooltip &__icon {\n    @include mq($from: small) {\n      @include tooltip__icon;\n    }\n  }\n\n  &--tooltip &__dialog {\n    @include mq($from: small) {\n      @include tooltip-dropshadow;\n    }\n  }\n\n  &--tooltip &__content-slot {\n    @include mq($from: small) {\n      @include tooltip-fontsize;\n    }\n  }\n\n  /* Has fullwidth popover */\n\n  &--popover-fullwidth-horizontal &__dialog {\n    @include mq($from: small) {\n      left: 0 !important;\n      right: 0 !important;\n      width: 100%;\n    }\n  }\n\n  &--popover-fullwidth-vertical &__dialog {\n    @include mq($from: small) {\n      top: 0 !important;\n      bottom: 0 !important;\n      height: 100%;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhPopoverClosedEvent,\n  StzhPopoverCloseEvent,\n  StzhPopoverOpenedEvent,\n  StzhPopoverOpenEvent,\n} from \"../../index\";\n\nimport { arrow, autoUpdate, computePosition, flip, offset, Placement, shift } from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../utils/media-utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, stopAnimations } from \"../../utils/animation-utils\";\n\nimport { StzhPopoverLocalizedText } from \"./stzh-popover.localization\";\n\nimport Arrow from \"../stzh-tooltip/assets/arrow.svg\";\n\nconst ANIMATION_SHOW_DURATION = 200;\nconst ANIMATION_HIDE_DURATION = 300;\nconst ANIMATION_SHOW_DURATION_SMALL = 100;\nconst ANIMATION_HIDE_DURATION_SMALL = 200;\n\nfunction animationContentWrapperShow() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [{ opacity: \"0\" }, { opacity: \"1\" }],\n    options: {\n      duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,\n      easing: \"linear\",\n    },\n  };\n}\n\nfunction animationContentWrapperHide() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [{ opacity: \"1\" }, { opacity: \"0\" }],\n    options: {\n      duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,\n      easing: \"linear\",\n    },\n  };\n}\n\nfunction animationDialogShow() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [{ transform: isSmall ? \"translateY(-8px)\" : \"translateY(100%)\" }, { transform: \"translateY(0px)\" }],\n    options: {\n      duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,\n      easing: \"linear\",\n    },\n  };\n}\n\nfunction animationDialogHide() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [{ transform: \"translateY(0px)\" }, { transform: isSmall ? \"translateY(-8px)\" : \"translateY(100%)\" }],\n    options: {\n      duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,\n      easing: \"linear\",\n    },\n  };\n}\n\nconst keyCode = {\n  ESC: 27,\n};\n\nconst CLASS_BODY_OPEN = \"stzh-popover-open\";\n\nlet popoverCounter = 0;\n\n/**\n * @slot - Trigger element for popover\n * @slot content - Any element used as popover content\n * @slot action - `stzh-button` element\n * @slot label - Label for mobile view (alternative for label property)\n */\n@Component({\n  tag: \"stzh-popover\",\n  styleUrl: \"stzh-popover.scss\",\n  scoped: true,\n})\nexport class StzhPopover {\n  /** Whether popover should be open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Default placement of popover relative to trigger element */\n  @Prop({ reflect: true }) placement: Placement = \"bottom\";\n\n  /** Whether to stretch popover to fullwith of parent */\n  @Prop({ reflect: true }) fullwidth: \"horizontal\" | \"vertical\" | \"\" = \"\";\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" | \"tooltip\" = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"large\" = \"default\";\n\n  /** Shifting of popover content */\n  @Prop() skidding: number = 0;\n\n  /** Distance from popover content to trigger. \"8\" when default variant, \"16\" when tooltip variant, arrow height (8px) + spacing (4px) = 12. */\n  @Prop() distance: number;\n\n  /** Label for mobile view (use label slot as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Position strategy */\n  @Prop() strategy: \"absolute\" | \"fixed\" = \"absolute\";\n\n  /** Translation strings. */\n  @Prop() localization: StzhPopoverLocalizedText;\n\n  @Element() element: HTMLStzhPopoverElement;\n\n  /** Popover open event */\n  @Event() stzhOpen: EventEmitter<StzhPopoverOpenEvent>;\n\n  /** Popover opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhPopoverOpenedEvent>;\n\n  /** Popover close event */\n  @Event() stzhClose: EventEmitter<StzhPopoverCloseEvent>;\n\n  /** Popover closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhPopoverClosedEvent>;\n\n  private parentNode: Node;\n\n  /** Show popover content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.mediaChangeHandler();\n    if (this.isHeaderStuckAndViewportMicro) {\n      this.branchOutToBody();\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide popover content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n\n    await waitForEvent(this.element, \"stzhClosed\");\n\n    this.mediaChangeHandler();\n    if (this.isHeaderStuckAndViewportMicro) {\n      this.branchInFromBody();\n    }\n\n    return true;\n  }\n\n  /** Toggle popover 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  @Listen(\"click\", { target: \"document\", capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (!this.open) {\n      return;\n    }\n\n    const isClickOutside =\n      event.target !== this.dialogElement && this.dialogElement.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) {\n      this.hide();\n    }\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.dialogElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-popover\",\n        });\n      }\n\n      const animationShow = animationContentWrapperShow();\n      const animationShowDialog = animationDialogShow();\n\n      await Promise.all([\n        stopAnimations(this.contentWrapperElement),\n        stopAnimations(this.contentElement),\n        stopAnimations(this.dialogElement),\n      ]);\n\n      // safari seems to need will-change,\n      // otherwise it has problems animating the element with the drop shadow\n      this.dialogElement.style.willChange = \"transform, opacity, position, top, left, bottom, right\";\n      this.contentWrapperElement.hidden = false;\n\n      await Promise.all([\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentWrapperElement,\n          animationShow.keyframes,\n          animationShow.options\n        ),\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentElement,\n          animationShowDialog.keyframes,\n          animationShowDialog.options\n        ),\n      ]);\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-popover\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-popover\",\n        });\n      }\n\n      const animationHide = animationContentWrapperHide();\n      const animationHideDialog = animationDialogHide();\n\n      await Promise.all([\n        stopAnimations(this.contentWrapperElement),\n        stopAnimations(this.contentElement),\n        stopAnimations(this.dialogElement),\n      ]);\n\n      await Promise.all([\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentWrapperElement,\n          animationHide.keyframes,\n          animationHide.options\n        ),\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentElement,\n          animationHideDialog.keyframes,\n          animationHideDialog.options\n        ),\n      ]);\n\n      this.contentWrapperElement.hidden = true;\n      this.dialogElement.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-popover\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Watch(\"distance\")\n  distanceWatcher(newValue: number) {\n    if (typeof newValue === \"number\") {\n      this.distance = newValue;\n    } else {\n      this.distance = this.variant === \"tooltip\" ? 12 : 8;\n    }\n  }\n\n  @State() computedPlacement: Placement;\n  @State() isHeaderStuckAndViewportMicro: boolean;\n  @State() isBranchedOutToBody: boolean;\n  @State() hasStzhHeaderParent: boolean;\n\n  private observer: MutationObserver;\n\n  private contentWrapperElement: HTMLElement;\n  private contentElement: HTMLElement;\n  private arrowElement: HTMLElement;\n  private rootElement: HTMLElement;\n  private triggerElement: HTMLElement;\n  private triggerFirstElement: HTMLElement;\n  private dialogElement: HTMLElement;\n  private autoUpdateCleanup: Function;\n\n  private initialTouchX: number = null;\n  private initialTouchY: number = null;\n\n  private id: string;\n  private trap: FocusTrap;\n  private toggledByMethod: boolean;\n\n  private setStzhHeaderParent(): boolean {\n    let parent = this.element.parentElement;\n    while (parent) {\n      if (parent.tagName && parent.tagName.toLowerCase() === \"stzh-header\") {\n        return true;\n      }\n      parent = parent.parentElement;\n    }\n    return false;\n  }\n\n  private mediaChangeHandler = () => {\n    const isStzhHeaderStuck = document.documentElement.style.getPropertyValue(\"--stzh-header-is-stuck\");\n    this.isHeaderStuckAndViewportMicro =\n      !media(\"small\").matches && isStzhHeaderStuck === \"1\" && this.hasStzhHeaderParent;\n\n    if (this.open && this.isBranchedOutToBody && !this.isHeaderStuckAndViewportMicro) {\n      this.branchInFromBody();\n    }\n  };\n\n  private branchOutToBody() {\n    document.body.append(this.element);\n    this.parentNode.appendChild(this.triggerElement);\n    this.isBranchedOutToBody = true;\n  }\n\n  private branchInFromBody() {\n    this.parentNode.appendChild(this.element);\n    this.rootElement.prepend(this.triggerElement);\n    this.isBranchedOutToBody = false;\n  }\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    if (event.keyCode === keyCode.ESC) {\n      this.hide();\n    }\n  };\n\n  private onClickTrigger = () => {\n    this.toggle();\n  };\n\n  private computePosition = async () => {\n    if (media(\"small\").matches) {\n      const 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      ];\n\n      if (this.variant === \"tooltip\") {\n        middleware.push(\n          arrow({\n            element: this.arrowElement,\n            padding: 5,\n          })\n        );\n      }\n\n      const {\n        x = 0,\n        y = 0,\n        strategy = \"absolute\",\n        placement,\n        middlewareData,\n      } = await computePosition(this.triggerFirstElement, this.dialogElement, {\n        strategy: this.strategy,\n        placement: this.placement,\n        middleware,\n      });\n\n      this.computedPlacement = placement;\n\n      Object.assign(this.dialogElement.style, {\n        position: strategy,\n        left: `${x}px`,\n        top: `${y}px`,\n      });\n\n      if (this.variant === \"tooltip\") {\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    } else {\n      Object.assign(this.dialogElement.style, {\n        position: null,\n        left: null,\n        top: null,\n      });\n\n      if (this.variant === \"tooltip\") {\n        Object.assign(this.arrowElement.style, {\n          left: null,\n          top: null,\n        });\n      }\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    this.initialTouchX = touch.pageX;\n    this.initialTouchY = touch.pageY;\n  };\n\n  // private handleTouchMove = (event: TouchEvent) => {\n  //   event.preventDefault()\n  // }\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n    const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n    const threshold = 70;\n\n    const isYSwipe = Math.abs(distY) >= threshold && Math.abs(distX) <= threshold;\n\n    if (isYSwipe) {\n      const isInDropdown = (event.target as HTMLElement).closest('.stzh-dropdown') !== null;\n      if (!isInDropdown){\n        this.hide();\n      }\n    }\n\n    this.initialTouchY = null;\n    this.initialTouchX = null;\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    }\n  };\n\n  async componentWillLoad() {\n    this.id = `stzh-popover-${popoverCounter++}`;\n    this.parentNode = this.element.parentNode;\n    this.hasStzhHeaderParent = this.setStzhHeaderParent();\n\n    this.distanceWatcher(this.distance);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"popover\");\n    }\n  }\n\n  private popoverShown() {\n    document.body.classList.add(CLASS_BODY_OPEN);\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    this.triggerFirstElement.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", \"true\");\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private popoverHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    this.triggerFirstElement.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", \"false\");\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n  }\n\n  componentDidRender() {\n    this.mediaChangeHandler();\n    const isStzh = isStzhElement(this.triggerFirstElement);\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  }\n\n  private initializedPopover = false\n\n  componentDidUpdate() {\n    if (this.open && !this.initializedPopover) {\n      this.initializeAutoUpdate();\n      this.initializeFocusTrap();\n      this.popoverShown();\n      this.initializedPopover = true\n    }\n\n    if (this.initializedPopover) {\n      if (this.open) {\n        this.popoverShown();\n      } else {\n        this.popoverHidden();\n      }\n\n      this.computePosition();\n      if (this.trap) {\n        this.trap.updateContainerElements(this.dialogElement);\n      }\n    }\n  }\n\n  initializeAutoUpdate() {\n    this.autoUpdateCleanup = autoUpdate(this.triggerFirstElement, this.dialogElement, this.computePosition);\n  }\n\n  initializeFocusTrap() {\n    this.trap = createFocusTrap(this.dialogElement, {\n      fallbackFocus: this.dialogElement,\n      clickOutsideDeactivates: true,\n      returnFocusOnDeactivate: true,\n    });\n  }\n\n  componentDidLoad() {\n    this.contentWrapperElement.hidden = !this.open;\n    this.open ? this.popoverShown() : this.popoverHidden();\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\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    removeMediaChangeListener(this.mediaChangeHandler);\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    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-popover\": true,\n      [`stzh-popover--open`]: this.open,\n      [`stzh-popover--placement-${this.computedPlacement}`]: !!this.computedPlacement,\n      [`stzh-popover--fullwidth-${this.fullwidth}`]: !!this.fullwidth,\n      [`stzh-popover--${this.size}`]: !!this.size,\n      [`stzh-popover--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host>\n        <div\n          class={classes}\n          onTouchStart={this.handleTouchStart}\n          onTouchEnd={this.handleTouchEnd}\n          ref={el => (this.rootElement = el as HTMLDivElement)}\n        >\n          <div ref={el => (this.triggerElement = el as HTMLDivElement)} class=\"stzh-popover__trigger\">\n            <slot></slot>\n          </div>\n          <div class=\"stzh-popover__vhidden\" id={`${this.id}-trigger-description`}>\n            {this.localization.open}\n          </div>\n          <div ref={el => (this.contentWrapperElement = el as HTMLDivElement)} class=\"stzh-popover__content-wrapper\">\n            <div class=\"stzh-popover__backdrop\"></div>\n            <div ref={el => (this.contentElement = el as HTMLDivElement)} class=\"stzh-popover__content\">\n              <div\n                ref={el => (this.dialogElement = el as HTMLDivElement)}\n                class=\"stzh-popover__dialog\"\n                role=\"dialog\"\n                tabindex=\"-1\"\n                aria-modal=\"true\"\n                aria-labelledby={this.label ? `${this.id}-label` : null}\n                aria-hidden={this.open ? \"false\" : \"true\"}\n                onKeyDown={this.handleKeydown}\n              >\n                {this.variant === \"tooltip\" && (\n                  <div\n                    class=\"stzh-popover__arrow\"\n                    ref={el => (this.arrowElement = el as HTMLDivElement)}\n                    innerHTML={Arrow}\n                  ></div>\n                )}\n                <div class=\"stzh-popover__content-inner\">\n                  <div class=\"stzh-popover__label-wrapper\">\n                    <h2 id={`${this.id}-label`} class=\"stzh-popover__label\">\n                      {this.label ? this.label : <slot name=\"label\"></slot>}\n                    </h2>\n                    <button class=\"stzh-popover__close\" onClick={() => this.hide()} type=\"button\">\n                      <stzh-icon name=\"close\" class=\"stzh-popover__icon\"></stzh-icon>\n                      <span class=\"stzh-popover__vhidden\">{this.localization.close}</span>\n                    </button>\n                  </div>\n                  <div class=\"stzh-popover__content-slot-wrapper\">\n                    <div class=\"stzh-popover__content-slot\">\n                      <slot name=\"content\"></slot>\n                    </div>\n                    <div class=\"stzh-popover__action-slot\">\n                      <slot name=\"action\"></slot>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --color: Text color (also `color` can be overwritten)\n * @prop --icon-size: Icon size\n * @prop --icon-vertical-align: Icon vertical alignment\n *\n * @prop --stzh-base-color: **Global**: Text color\n * @prop --stzh-base-lead-color: **Global**: Lead text color\n */\n\n:host {\n  --icon-size: 1.25em;\n  --icon-vertical-align: text-bottom;\n  --color: #{$baseColor};\n  --display: var(--stzh-text-display, block);\n\n  width: 100%;\n  color: var(--color);\n\n  --grid-template-areas: var(\n    --stzh-text-grid-template-areas,\n    \"text text text text\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-text-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-text-grid-template-areas,\n      \"text text text text\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-text-grid-template-areas,\n      \"text text text text text text text text\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-text-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  ::slotted(*:first-child) {\n    margin-top: 0 !important;\n  }\n\n  ::slotted(*:last-child) {\n    margin-bottom: 0 !important;\n  }\n\n  ::slotted(a),\n  ::slotted(* a) {\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    text-underline-offset: $linkTextUnderlineOffset;\n    text-decoration-line: $linkTextDecorationLine;\n    text-decoration-thickness: $linkTextDecorationThickness;\n    text-decoration-skip-ink: $linkTextDecorationSkipInk;\n\n    &:hover {\n      color: $linkHoverColor;\n      text-decoration-line: $linkHoverTextDecorationLine;\n\n      @media (hover: none) {\n        color: inherit;\n      }\n    }\n\n  }\n\n  ::slotted(b),\n  ::slotted(strong),\n  ::slotted(* b),\n  ::slotted(* strong) {\n    @include font('heavy');\n  }\n\n  ::slotted(i),\n  ::slotted(em),\n  ::slotted(* i),\n  ::slotted(* em) {\n    @include font;\n  }\n\n  &[lead]:not([lead=\"false\"]) {\n    --color: #{$baseLeadColor};\n  }\n\n  &[color=\"primary\"] {\n    --color: #{$colorPrimary70};\n  }\n\n  &[color=\"secondary\"] {\n    --color: #{$colorSecondary60};\n  }\n\n  &[color=\"info\"] {\n    --color: #{$textInfoColor};\n  }\n\n  &[color=\"inherit\"] {\n    --color: initial;\n  }\n}\n\n.stzh-text {\n  --stzh-icon-size: var(--icon-size);\n  --stzh-icon-vertical-align: var(--icon-vertical-align);\n\n  --stzh-list-font-size: \"\";\n  --stzh-list-line-height: \"\";\n  --stzh-list-letter-spacing: \"\";\n\n  // default font styling without attributes\n  @include fontCurve($textFontCurveDefault);\n  @include gridGutter;\n  display: var(--display);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  color: var(--color);\n\n  &__text {\n    grid-area: text;\n    display: flex;\n  }\n\n  &__icon {\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: 0.25em;\n    }\n  }\n\n  &__text-inner {\n    flex-grow: 1;\n  }\n\n  /* Lead variant */\n\n  &--is-lead {\n    @include font('heavy');\n    @include fontCurve('lead', 'lead');\n  }\n\n  /* Font variants */\n\n  @each $font, $value in $fonts {\n    &--font-#{$font} {\n      @include font($font);\n    }\n  }\n\n  /* Curve variants */\n\n  &--curve-none {\n    font-size: inherit;\n  }\n\n  @each $fontCurveName, $config in $fontCurves {\n    &--curve-#{$fontCurveName} {\n      @include fontCurve($fontCurveName);\n    }\n  }\n\n  /* Size variants when consumer wants to overwrite predefined font curves */\n\n  @each $size, $value in $fontSizes {\n    &--size-#{$size} {\n      @include fontSize($size);\n    }\n  }\n\n  @each $breakpoint, $size in $breakpoints {\n    @each $size, $value in $fontSizes {\n      &--size-#{$breakpoint}-#{$size} {\n        @include mq($from: $breakpoint) {\n          @include fontSize($size);\n        }\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/**\n * @slot - Slot for text and icons\n * @slot icon - Slot for icon that should be on left side of the text (not inline)\n */\n@Component({\n  tag: \"stzh-text\",\n  styleUrl: \"stzh-text.scss\",\n  scoped: true\n})\nexport class StzhText {\n  /** Font used */\n  @Prop() font: Font.Fonts = \"default\";\n\n  /** Type of curve (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Font.Curves = \"default\";\n\n  /** Whether if text is lead text */\n  @Prop({ reflect: true }) lead: boolean = false;\n\n  /** Color used */\n  @Prop({ reflect: true }) color: \"default\" | \"primary\" | \"secondary\" | \"info\" | \"inherit\" = \"default\";\n\n  /** Manually overwrite font size applied by curve attribute (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() size: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above small breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeSmall: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above medium breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeMedium: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above large breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeLarge: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above ultra breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeUltra: Font.Sizes | \"inherit\" = \"inherit\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-text\": true,\n            \"stzh-text--is-lead\": this.lead,\n            [`stzh-text--font-${this.font}`]: !!this.font,\n            [`stzh-text--curve-${this.curve}`]: !!this.curve,\n            [`stzh-text--size-${this.size}`]: !!this.size,\n            [`stzh-text--size-small-${this.sizeSmall}`]: !!this.sizeSmall,\n            [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,\n            [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,\n            [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,\n          }}\n        >\n          <div class=\"stzh-text__text\">\n            <div class=\"stzh-text__icon\">\n              <slot name=\"icon\"></slot>\n            </div>\n            <div class=\"stzh-text__text-inner\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-206ec94f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhFieldsetCss","StzhFieldset","render","classes","this","hideLegend","h","Host","class","legend","legendLevel","level","curve","legendCurve"],"sources":["src/components/stzh-fieldset/stzh-fieldset.scss?tag=stzh-fieldset&encapsulation=scoped","src/components/stzh-fieldset/stzh-fieldset.tsx"],"sourcesContent":[":host {\n  // default spacing for form and layout elements\n  ::slotted(.layout_column > .stzh-fieldset-row > .stzh-fieldset-row),\n  ::slotted(.stzh-fieldset-row > .stzh-fieldset-row),\n  ::slotted(.layout_column > .stzh-fieldset-row),\n  ::slotted(.stzh-fieldset-row),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-input),\n  ::slotted(.stzh-fieldset-row > stzh-input),\n  ::slotted(stzh-input),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-datepicker),\n  ::slotted(.stzh-fieldset-row > stzh-datepicker),\n  ::slotted(stzh-datepicker),\n  ::slotted(.stzh-fieldset-row > stzh-dropdown),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-dropdown),\n  ::slotted(stzh-dropdown),\n  ::slotted(.stzh-fieldset-row > stzh-fieldset),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-fieldset),\n  ::slotted(stzh-fieldset),\n  ::slotted(.stzh-fieldset-row > stzh-upload),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-upload),\n  ::slotted(stzh-upload),\n  ::slotted(.stzh-fieldset-row > stzh-checkbox),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-checkbox),\n  ::slotted(stzh-checkbox),\n  ::slotted(.stzh-fieldset-row > stzh-checkboxgroup),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-checkboxgroup),\n  ::slotted(stzh-checkboxgroup),\n  ::slotted(.stzh-fieldset-row > stzh-radio),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-radio),\n  ::slotted(stzh-radio),\n  ::slotted(.stzh-fieldset-row > stzh-radiogroup),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-radiogroup),\n  ::slotted(stzh-radiogroup),\n  ::slotted(.stzh-fieldset-row > stzh-row),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-row),\n  ::slotted(stzh-row),\n  ::slotted(.stzh-fieldset-row > stzh-vspace),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-vspace),\n  ::slotted(stzh-vspace),\n  ::slotted(.stzh-fieldset-row > stzh-hspace),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-hspace),\n  ::slotted(stzh-hspace),\n  ::slotted(.stzh-fieldset-row > stzh-text),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-text),\n  ::slotted(stzh-text) {\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > stzh-chipgroup,\n  & > stzh-chipgroup,\n  & > .section > stzh-chipselect,\n  & > stzh-chipselect {\n    margin-bottom: space('xlarge');\n  }\n\n  ::slotted(.stzh-fieldset-row > stzh-daterange),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-daterange),\n  ::slotted(stzh-daterange) {\n    @include mq($to: medium) {\n      margin-bottom: calc(#{$fieldsetDescriptionMinHeight} + #{spaceCurveValue('tiny')});\n    }\n  }\n\n  ::slotted(.stzh-fieldset-row > stzh-message),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-message),\n  ::slotted(stzh-message) {\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  ::slotted(.stzh-fieldset-row > stzh-actions),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-actions),\n  ::slotted(stzh-actions) {\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'big');\n  }\n\n  ::slotted(*) {\n    stzh-checkboxgroup stzh-checkbox,\n    stzh-radiogroup stzh-radio {\n      --stzh-description-min-height: none;\n    }\n  }\n\n  ::slotted(.stzh-fieldset-row > :last-child),\n  ::slotted(.layout_column > .stzh-fieldset-row > :last-child),\n  ::slotted(:last-child),\n  ::slotted(.layout_column > .stzh-fieldset-row:has(cq) > :nth-last-child(2)),\n  ::slotted(.stzh-fieldset-row:has(cq) > :nth-last-child(2)) {\n    margin-bottom: 0;\n  }\n}\n\n.stzh-fieldset {\n  // --stzh-row-row-gap: #{space('xsmall')};\n  --stzh-description-min-height: #{$fieldsetDescriptionMinHeight};\n\n  margin: 0;\n  padding: 0;\n  border: none;\n  min-inline-size: auto;\n\n  &__wrapper {\n    display: grid;\n  }\n\n  &__legend {\n    @include font('title');\n    @include fontCurve('h4');\n    color: $colorPrimary70;\n    padding: 0;\n    margin-bottom: space('large');\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  h,\n} from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/**\n * @slot - Slot for any (mostly form) elements\n */\n@Component({\n  tag: \"stzh-fieldset\",\n  styleUrl: \"stzh-fieldset.scss\",\n  scoped: true\n})\nexport class StzhFieldset {\n  /** Legend describing the field group inside the fieldset */\n  @Prop() legend: string = \"\";\n\n  /** Hide legend to show only for screenreaders */\n  @Prop() hideLegend: boolean = false;\n\n  /** Heading level inside legend */\n  @Prop() legendLevel: \"\" | \"1\" | \"2\" | \"3\" | \"4\" = \"\";\n\n  /** Type of curve to overwrite the curve inherited from `level` attribute (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n  @Prop() legendCurve: Font.Curves | \"auto\" = \"auto\";\n\n  render() {\n    const classes = {\n      \"stzh-fieldset\": true,\n      \"stzh-fieldset--hide-legend\": this.hideLegend\n    };\n\n    return (\n      <Host>\n        <fieldset class={classes}>\n          {this.legend &&\n            <legend class=\"stzh-fieldset__legend\">\n              {this.legendLevel ?\n                <stzh-heading\n                  level={this.legendLevel}\n                  curve={this.legendCurve}\n                >\n                  {this.legend}\n                </stzh-heading>\n              :\n                this.legend\n              }\n            </legend>\n          }\n          <div class=\"stzh-fieldset__wrapper\">\n            <slot></slot>\n          </div>\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAkB,sjgB,MCiBXC,EAAY,M,qCAEE,G,gBAGK,M,iBAGoB,G,iBAGN,M,CAE5C,MAAAC,GACE,MAAMC,EAAU,CACd,gBAAiB,KACjB,6BAA8BC,KAAKC,YAGrC,OACEC,EAACC,EAAI,KACHD,EAAA,YAAUE,MAAOL,GACdC,KAAKK,QACJH,EAAA,UAAQE,MAAM,yBACXJ,KAAKM,YACJJ,EAAA,gBACEK,MAAOP,KAAKM,YACZE,MAAOR,KAAKS,aAEXT,KAAKK,QAGRL,KAAKK,QAIXH,EAAA,OAAKE,MAAM,0BACTF,EAAA,e"}

package/dist/stzh-components/p-38cd406c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhArchivelistCss","StzhArchivelist","this","_showMoreLink","handleMoreClick","showItems","stepItems","itemsWatcher","newValue","_items","JSON","parse","showItemsWatcher","_initialShowItems","_itemsShown","slice","length","handleClick","item","originalEvent","stzhItemClick","emit","component","componentWillLoad","items","localization","window","stzhComponents","utils","fetchTranslations","element","render","classes","h","Host","class","role","map","href","onClick","e","dateline","label","labelClamp","Object","assign","Fragment","description","descriptionClamp","variant","size","sizeMedium","showMore"],"sources":["src/components/stzh-archivelist/stzh-archivelist.scss?tag=stzh-archivelist&encapsulation=scoped","src/components/stzh-archivelist/stzh-archivelist.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-archivelist {\n  &__list {\n    display: grid;\n    gap: space('medium');\n  }\n\n  &__item {\n    @include fontSize('milli');\n    background-color: $colorGrey10;\n    color: $colorGrey80;\n    text-decoration: none;\n    padding: space('large');\n    transition: background-color $baseTransitionAnimationSpeed;\n\n    &:hover {\n      background-color: $colorSecondary10;\n    }\n  }\n\n  &__dateline {\n    @include font('heavy');\n    @include fontSize('micro');\n    margin-bottom: space('medium');\n  }\n\n  &__label {\n    @include font('heavy');\n    color: $colorPrimary70;\n    text-decoration-line: $linkTextDecorationLine;\n  }\n\n  &__description {\n    margin-top: space('xsmall');\n  }\n\n  &__actions {\n    @include spaceCurve('margin-top', 'large');\n    display: flex;\n    justify-content: center;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Watch,\n  Event,\n  EventEmitter,\n  Element,\n  Fragment\n} from \"@stencil/core\";\n\nimport {\n  StzhArchivelistItem,\n  StzhArchivelistItemClickEvent\n} from \"../../index\";\n\nimport { StzhArchivelistLocalizedText } from \"./stzh-archivelist.localization\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-archivelist\",\n  styleUrl: \"stzh-archivelist.scss\",\n  scoped: true\n})\nexport class StzhArchivelist {\n  /** Translation strings */\n  @Prop() localization: StzhArchivelistLocalizedText;\n\n  /** Nr of entries shown */\n  @Prop({ mutable: true }) showItems: number = 9;\n  private _initialShowItems: number;\n\n  /** Nr of items loaded when more link is clicked */\n  @Prop() stepItems: number = 9;\n\n  /**\n   * Initial selected values.\n   * Array of objects with `label`, `href`, optionally: `dateline`, `description`, `labelClamp` and `descriptionClamp` attribute:\n   * `[{\"href\":\"#lorem\", \"label\": \"Label 1\"}, {\"href\":\"#lorem2\", \"label\": \"Label 2\", \"labelClamp\": { \"lines\": 2, \"linesMedium\": 1 }}]`\n   */\n  @Prop() items: StzhArchivelistItem[] | string = [];\n  private _items: StzhArchivelistItem[];\n  private _itemsShown: StzhArchivelistItem[];\n  private _showMoreLink: boolean = false;\n\n  @Element() element: HTMLStzhArchivelistElement;\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: StzhArchivelistItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._items = JSON.parse(newValue);\n    } else {\n      this._items = newValue;\n    }\n\n    this.showItemsWatcher(this._initialShowItems);\n  }\n\n  @Watch(\"showItems\")\n  showItemsWatcher(newValue: number) {\n    this._itemsShown = this._items.slice(0, newValue);\n    this._showMoreLink = newValue < this._items.length;\n  }\n\n  /** Item click event */\n  @Event() stzhItemClick: EventEmitter<StzhArchivelistItemClickEvent>;\n\n  private handleClick(item: StzhArchivelistItem, originalEvent: MouseEvent) {\n    this.stzhItemClick.emit({\n      component: \"stzh-archivelist\",\n      item,\n      originalEvent\n    })\n  }\n\n  private handleMoreClick = () => {\n    this.showItems = this.stepItems + this.showItems;\n  }\n\n  async componentWillLoad() {\n    this._initialShowItems = this.showItems;\n    this.itemsWatcher(this.items);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"archivelist\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-archivelist\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-archivelist__list\" role=\"list\">\n            {this._itemsShown.map((item) =>\n              <a\n                class=\"stzh-archivelist__item\"\n                role=\"listitem\"\n                href={item.href}\n                onClick={(e) => this.handleClick(item, e)}\n              >\n                {item.dateline &&\n                  <div class=\"stzh-archivelist__dateline\">\n                    {item.dateline}\n                  </div>\n                }\n\n                {item.label &&\n                  <div class=\"stzh-archivelist__label\">\n                    {item.labelClamp\n                      ?\n                      <stzh-clamp {...item.labelClamp}>{item.label}</stzh-clamp>\n                      :\n                      <Fragment>{item.label}</Fragment>\n                    }\n                  </div>\n                }\n\n                {item.description &&\n                  <div class=\"stzh-archivelist__description\">\n                    {item.descriptionClamp\n                      ?\n                      <stzh-clamp {...item.descriptionClamp}>{item.description}</stzh-clamp>\n                      :\n                      <Fragment>{item.description}</Fragment>\n                    }\n                  </div>\n                }\n              </a>\n            )}\n          </div>\n\n          {this._showMoreLink &&\n            <div class=\"stzh-archivelist__actions\">\n              <stzh-button\n                variant=\"secondary\"\n                size=\"small\"\n                sizeMedium=\"default\"\n                label={this.localization.showMore}\n                onClick={this.handleMoreClick}\n              ></stzh-button>\n            </div>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uEAAA,MAAMA,EAAqB,s5F,MC2BdC,EAAe,M,sEAmBlBC,KAAAC,cAAyB,MAgCzBD,KAAAE,gBAAkB,KACxBF,KAAKG,UAAYH,KAAKI,UAAYJ,KAAKG,SAAS,E,2CA/CL,E,eAIjB,E,WAOoB,E,CAQhD,YAAAE,CAAaC,GACX,UAAWA,IAAa,SAAU,CAChCN,KAAKO,OAASC,KAAKC,MAAMH,E,KACpB,CACLN,KAAKO,OAASD,C,CAGhBN,KAAKU,iBAAiBV,KAAKW,kB,CAI7B,gBAAAD,CAAiBJ,GACfN,KAAKY,YAAcZ,KAAKO,OAAOM,MAAM,EAAGP,GACxCN,KAAKC,cAAgBK,EAAWN,KAAKO,OAAOO,M,CAMtC,WAAAC,CAAYC,EAA2BC,GAC7CjB,KAAKkB,cAAcC,KAAK,CACtBC,UAAW,mBACXJ,OACAC,iB,CAQJ,uBAAMI,GACJrB,KAAKW,kBAAoBX,KAAKG,UAC9BH,KAAKK,aAAaL,KAAKsB,OAEvB,IAAKtB,KAAKuB,aAAc,CACtBvB,KAAKuB,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkB3B,KAAK4B,QAAS,c,EAI1F,MAAAC,GACE,MAAMC,EAAU,CACd,mBAAoB,MAGtB,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,OAAKE,MAAM,yBAAyBC,KAAK,QACtClC,KAAKY,YAAYuB,KAAKnB,GACrBe,EAAA,KACEE,MAAM,yBACNC,KAAK,WACLE,KAAMpB,EAAKoB,KACXC,QAAUC,GAAMtC,KAAKe,YAAYC,EAAMsB,IAEtCtB,EAAKuB,UACJR,EAAA,OAAKE,MAAM,8BACRjB,EAAKuB,UAITvB,EAAKwB,OACJT,EAAA,OAAKE,MAAM,2BACRjB,EAAKyB,WAEJV,EAAA,aAAAW,OAAAC,OAAA,GAAgB3B,EAAKyB,YAAazB,EAAKwB,OAEvCT,EAACa,EAAQ,KAAE5B,EAAKwB,QAKrBxB,EAAK6B,aACJd,EAAA,OAAKE,MAAM,iCACRjB,EAAK8B,iBAEJf,EAAA,aAAAW,OAAAC,OAAA,GAAgB3B,EAAK8B,kBAAmB9B,EAAK6B,aAE7Cd,EAACa,EAAQ,KAAE5B,EAAK6B,kBAQ3B7C,KAAKC,eACJ8B,EAAA,OAAKE,MAAM,6BACTF,EAAA,eACEgB,QAAQ,YACRC,KAAK,QACLC,WAAW,UACXT,MAAOxC,KAAKuB,aAAa2B,SACzBb,QAASrC,KAAKE,oB"}

package/dist/stzh-components/p-50c32fd1.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as s,a,g as h}from"./p-c7bfac7a.js";const e=".sc-stzh-saptcha-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-saptcha-h{display:none}.sc-stzh-saptcha-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-saptcha-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-saptcha-h *.sc-stzh-saptcha,.sc-stzh-saptcha-h *.sc-stzh-saptcha::before,.sc-stzh-saptcha-h *.sc-stzh-saptcha::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-saptcha-h .has-focus.sc-stzh-saptcha{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-saptcha-h .stzh-fylingfocus-focused.sc-stzh-saptcha{outline-style:none !important}.sc-stzh-saptcha-h .stzh-fylingfocus-focused.sc-stzh-saptcha::-moz-focus-inner{border:0 !important}.sc-stzh-saptcha-h{--color:var(--stzh-color-black);--background-color:var(--stzh-color-grey10)}.stzh-saptcha__box.sc-stzh-saptcha{padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xlarge);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium);color:var(--color);background-color:var(--background-color)}@media screen and (min-width: 600px){.stzh-saptcha__box.sc-stzh-saptcha{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-saptcha__box.sc-stzh-saptcha{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-saptcha__box.sc-stzh-saptcha{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-saptcha__box.sc-stzh-saptcha{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-saptcha__box.sc-stzh-saptcha{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-saptcha__box.sc-stzh-saptcha{padding-left:var(--stzh-space-large);padding-right:var(--stzh-space-large)}}.stzh-saptcha__info.sc-stzh-saptcha{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-saptcha__answer.sc-stzh-saptcha{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-color-primary);margin-top:var(--stzh-space-xsmall)}.stzh-saptcha__input.sc-stzh-saptcha{margin-top:var(--stzh-space-medium)}";let i=0;const c=class{constructor(s){t(this,s);this._numbers=[];this.localization=undefined;this.numbers=[];this.value="";this.name="saptcha";this.error=undefined;this.invalid=false;this.disabled=false;this.inputValue=""}valueWatcher(t){this.inputValue=t}numbersWatcher(t){if(typeof t==="string"){this._numbers=JSON.parse(t)}else{this._numbers=t}}errorWatcher(t){if(typeof t==="string"){try{this._error=JSON.parse(t)}catch(s){if(t){this._error=[t]}else{this._error=[]}}}else if(t){this._error=t}else{this._error=[]}}componentDidLoad(){this.inputValue=this.value}async componentWillLoad(){this.saptchaId=`stzh-saptcha-${i++}`;this.numbersWatcher(this.numbers);this.errorWatcher(this.error);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"saptcha")}}render(){const t={"stzh-saptcha":true};return s(a,{"is-invalid":this.invalid||this._error.length>0},s("div",{class:t},s("div",{class:"stzh-saptcha__box"},s("div",{class:"stzh-saptcha__info",id:`${this.saptchaId}-info`},this.localization.info," ",this.localization.question),s("div",{class:"stzh-saptcha__answer",id:`${this.saptchaId}-answer`},this._numbers.map(((t,a)=>s("span",{class:"stzh-saptcha__number"},t,a<this._numbers.length-1&&(a===this._numbers.length-2?this.localization.answerOr:", "))))),s("stzh-input",{class:"stzh-saptcha__input",label:this.localization.answer,name:this.name,invalid:this.invalid,error:this.error,disabled:this.disabled,value:this.inputValue,required:true,a11yDescribedby:`${this.saptchaId}-info ${this.saptchaId}-answer`}))))}get element(){return h(this)}static get watchers(){return{value:["valueWatcher"],numbers:["numbersWatcher"],error:["errorWatcher"]}}};c.style=e;export{c as stzh_saptcha};
-//# sourceMappingURL=p-50c32fd1.entry.js.map

package/dist/stzh-components/p-50c32fd1.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhSaptchaCss","saptchaCounter","StzhSaptcha","this","_numbers","valueWatcher","newValue","inputValue","numbersWatcher","JSON","parse","errorWatcher","_error","e","componentDidLoad","value","componentWillLoad","saptchaId","numbers","error","localization","window","stzhComponents","utils","fetchTranslations","element","render","classes","h","Host","invalid","length","class","id","info","question","map","number","index","answerOr","label","answer","name","disabled","required","a11yDescribedby"],"sources":["src/components/stzh-saptcha/stzh-saptcha.scss?tag=stzh-saptcha&encapsulation=scoped","src/components/stzh-saptcha/stzh-saptcha.tsx"],"sourcesContent":["/**\n * @prop --color: Color of section\n * @prop --background-color: Background color of section\n */\n\n:host {\n  --color: #{$colorBlack};\n  --background-color: #{$colorGrey10};\n}\n\n.stzh-saptcha {\n  &__box {\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'medium');\n    padding-left: space('medium');\n    padding-right: space('medium');\n    color: var(--color);\n    background-color: var(--background-color);\n\n    @include mq($from: medium) {\n      padding-left: space('large');\n      padding-right: space('large');\n    }\n  }\n\n  &__info {\n    @include fontSize('milli');\n  }\n\n  &__answer {\n    @include fontSize('regular');\n    color: $colorPrimary;\n    margin-top: space('xsmall');\n  }\n\n  &__input {\n    margin-top: space('medium');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  State\n} from \"@stencil/core\";\n\nimport { StzhSaptchaLocalizedText } from './stzh-saptcha.localization';\n\nlet saptchaCounter = 0;\n\n/**\n * @slot - Slot for content\n */\n@Component({\n  tag: \"stzh-saptcha\",\n  styleUrl: \"stzh-saptcha.scss\",\n  scoped: true\n})\nexport class StzhSaptcha {\n  /** Translation strings */\n  @Prop() localization: StzhSaptchaLocalizedText;\n\n  /** Numbers shown to user for selection */\n  @Prop() numbers: number[] | string = [];\n  private _numbers: number[] = [];\n\n  /** The value of the input element */\n  @Prop() value: string = \"\";\n\n  /** Name of input */\n  @Prop({ reflect: true }) name: string = \"saptcha\";\n\n  /** One or multiple error message */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Mutable input state updated by the value prop */\n  @State() inputValue: string = \"\";\n\n  @Element() element: HTMLStzhSaptchaElement;\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    this.inputValue = newValue;\n  }\n\n  @Watch(\"numbers\")\n  numbersWatcher(newValue: number[] | string) {\n    if (typeof newValue === \"string\") {\n      this._numbers = JSON.parse(newValue);\n    } else {\n      this._numbers = newValue;\n    }\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  private saptchaId: string;\n\n  componentDidLoad() {\n    this.inputValue = this.value;\n  }\n\n  async componentWillLoad() {\n    this.saptchaId = `stzh-saptcha-${saptchaCounter++}`;\n\n    this.numbersWatcher(this.numbers);\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'saptcha');\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-saptcha\": true\n    };\n\n    return (\n      <Host is-invalid={this.invalid || this._error.length > 0}>\n        <div class={classes}>\n          <div class=\"stzh-saptcha__box\">\n            <div class=\"stzh-saptcha__info\" id={`${this.saptchaId}-info`}>\n              {this.localization.info} {this.localization.question}\n            </div>\n            <div class=\"stzh-saptcha__answer\" id={`${this.saptchaId}-answer`}>\n              {this._numbers.map((number, index) =>\n                <span class=\"stzh-saptcha__number\">\n                  {number}\n                  {index < this._numbers.length - 1 &&\n                    (index === this._numbers.length - 2\n                      ? this.localization.answerOr\n                      : \", \")\n                  }\n                </span>\n              )}\n            </div>\n            <stzh-input\n              class=\"stzh-saptcha__input\"\n              label={this.localization.answer}\n              name={this.name}\n              invalid={this.invalid}\n              error={this.error}\n              disabled={this.disabled}\n              value={this.inputValue}\n              required\n              a11yDescribedby={`${this.saptchaId}-info ${this.saptchaId}-answer`}\n            ></stzh-input>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oDAAA,MAAMA,EAAiB,8vFCYvB,IAAIC,EAAiB,E,MAURC,EAAW,M,yBAMdC,KAAAC,SAAqB,G,yCADQ,G,WAIb,G,UAGgB,U,kCAOI,M,cAGC,M,gBAGf,E,CAK9B,YAAAC,CAAaC,GACXH,KAAKI,WAAaD,C,CAIpB,cAAAE,CAAeF,GACb,UAAWA,IAAa,SAAU,CAChCH,KAAKC,SAAWK,KAAKC,MAAMJ,E,KACtB,CACLH,KAAKC,SAAWE,C,EAKpB,YAAAK,CAAaL,GACX,UAAWA,IAAa,SAAU,CAChC,IACEH,KAAKS,OAASH,KAAKC,MAAMJ,E,CACzB,MAAOO,GACP,GAAIP,EAAU,CACZH,KAAKS,OAAS,CAACN,E,KACV,CACLH,KAAKS,OAAS,E,QAGb,GAAIN,EAAU,CACnBH,KAAKS,OAASN,C,KACT,CACLH,KAAKS,OAAS,E,EAMlB,gBAAAE,GACEX,KAAKI,WAAaJ,KAAKY,K,CAGzB,uBAAMC,GACJb,KAAKc,UAAY,gBAAgBhB,MAEjCE,KAAKK,eAAeL,KAAKe,SACzBf,KAAKQ,aAAaR,KAAKgB,OAEvB,IAAKhB,KAAKiB,aAAc,CACtBjB,KAAKiB,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkBrB,KAAKsB,QAAS,U,EAI1F,MAAAC,GACE,MAAMC,EAAU,CACd,eAAgB,MAGlB,OACEC,EAACC,EAAI,cAAa1B,KAAK2B,SAAW3B,KAAKS,OAAOmB,OAAS,GACrDH,EAAA,OAAKI,MAAOL,GACVC,EAAA,OAAKI,MAAM,qBACTJ,EAAA,OAAKI,MAAM,qBAAqBC,GAAI,GAAG9B,KAAKc,kBACzCd,KAAKiB,aAAac,KAAI,IAAG/B,KAAKiB,aAAae,UAE9CP,EAAA,OAAKI,MAAM,uBAAuBC,GAAI,GAAG9B,KAAKc,oBAC3Cd,KAAKC,SAASgC,KAAI,CAACC,EAAQC,IAC1BV,EAAA,QAAMI,MAAM,wBACTK,EACAC,EAAQnC,KAAKC,SAAS2B,OAAS,IAC7BO,IAAUnC,KAAKC,SAAS2B,OAAS,EAC9B5B,KAAKiB,aAAamB,SAClB,UAKZX,EAAA,cACEI,MAAM,sBACNQ,MAAOrC,KAAKiB,aAAaqB,OACzBC,KAAMvC,KAAKuC,KACXZ,QAAS3B,KAAK2B,QACdX,MAAOhB,KAAKgB,MACZwB,SAAUxC,KAAKwC,SACf5B,MAAOZ,KAAKI,WACZqC,SAAQ,KACRC,gBAAiB,GAAG1C,KAAKc,kBAAkBd,KAAKc,uB"}

package/dist/stzh-components/p-55349f2e.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as a,F as s,a as i,g as r}from"./p-c7bfac7a.js";import{f as n}from"./p-c7f2564a.js";import{m as d,a as o,r as h}from"./p-10e2901a.js";import"./p-7183ba4d.js";const l=':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{--meta-grid-template-areas:"filters" "search" "resultstoggle";--results-grid-template-areas:"map" "list"}@media screen and (min-width: 1260px){:host{--meta-grid-template-areas:"filters filters filters filters filters filters filters filters search search search search";--results-grid-template-areas:"map map map map map map map map list list list list"}}.stzh-geo-ref-data{position:fixed;top:0;right:0;bottom:0;left:0;z-index:899;flex-direction:column;transition:opacity ease 0.2s;display:none;opacity:0;visibility:hidden;pointer-events:none;}.stzh-geo-ref-data--is-open{display:flex;opacity:1;visibility:visible;pointer-events:inherit}.stzh-geo-ref-data__content{overflow:hidden;height:100%}.stzh-geo-ref-data--content-padding{padding-left:1.25rem;padding-right:1.25rem}@media screen and (min-width: 600px){.stzh-geo-ref-data--content-padding{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-geo-ref-data--content-padding{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-geo-ref-data--content-padding{padding-left:2rem;padding-right:2rem}}.stzh-geo-ref-data__heading{display:flex;background-color:var(--stzh-color-secondary20);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-geo-ref-data__heading{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-geo-ref-data__heading{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-geo-ref-data__heading{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-geo-ref-data__heading{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-geo-ref-data__heading{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-geo-ref-data__heading{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-geo-ref-data__meta-wrapper{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--stzh-space-large);padding-top:var(--stzh-space-small);padding-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-geo-ref-data__meta-wrapper{padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-geo-ref-data__meta-wrapper{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-geo-ref-data__meta-wrapper{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-geo-ref-data__meta-wrapper{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-geo-ref-data__meta-wrapper{-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(--meta-grid-template-areas);grid-template-columns:repeat(12, minmax(0, 1fr))}}@media screen and (min-width: 1260px) and (min-width: 600px){.stzh-geo-ref-data__meta-wrapper{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-geo-ref-data__meta-wrapper{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-geo-ref-data__meta-wrapper{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1260px) and (min-width: 1600px){.stzh-geo-ref-data__meta-wrapper{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-geo-ref-data__meta-wrapper{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-geo-ref-data__meta-wrapper{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-geo-ref-data__filters{grid-area:filters;flex:none;margin-bottom:var(--stzh-space-xxsmall)}@media screen and (min-width: 1260px){.stzh-geo-ref-data__filters-toggle{display:none}}@media screen and (max-width: 899px){.stzh-geo-ref-data__filters-toggle stzh-chip{--icon-gap:0}}.stzh-geo-ref-data__filters-content{display:none}@media screen and (min-width: 1260px){.stzh-geo-ref-data__filters-content{display:block}}.stzh-geo-ref-data__search{grid-area:search;width:100%}@media screen and (min-width: 1260px){.stzh-geo-ref-data__search{padding-left:0.75rem}}.stzh-geo-ref-data__results-toggle{grid-area:resultstoggle;flex:none;margin-bottom:var(--stzh-space-xxsmall)}@media screen and (min-width: 1260px){.stzh-geo-ref-data__results-toggle{display:none}}.stzh-geo-ref-data__results-wrapper{height:100%}@media screen and (min-width: 1260px){.stzh-geo-ref-data__results-wrapper{-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(--results-grid-template-areas);--grid-template-columns:repeat(12, minmax(0, 1fr))}}@media screen and (min-width: 1260px) and (min-width: 600px){.stzh-geo-ref-data__results-wrapper{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-geo-ref-data__results-wrapper{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-geo-ref-data__results-wrapper{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1260px) and (min-width: 1600px){.stzh-geo-ref-data__results-wrapper{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-geo-ref-data__results-wrapper{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-geo-ref-data__results-wrapper{grid-template-columns:repeat(12, minmax(0, 1fr))}}@media screen and (max-width: 1259px){.stzh-geo-ref-data__results-wrapper .inactive{visibility:hidden;height:0;position:absolute;overflow:hidden}}.stzh-geo-ref-data__results-map{grid-area:map;position:relative;height:100%}.stzh-geo-ref-data__map-controls{position:absolute;top:var(--stzh-space-small);left:var(--stzh-space-small);background-color:var(--stzh-color-white);padding:var(--stzh-space-xsmall)}.stzh-geo-ref-data__results-list{grid-area:list;padding-left:1.25rem;padding-right:1.25rem;padding-bottom:var(--stzh-space-large);overflow:auto}@media screen and (min-width: 600px){.stzh-geo-ref-data__results-list{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-geo-ref-data__results-list{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-geo-ref-data__results-list{padding-left:0;padding-right:2rem;overflow:auto}}.stzh-geo-ref-data__results-list-heading{margin-bottom:var(--stzh-space-medium)}.stzh-geo-ref-data__teaser-list{display:grid;gap:var(--stzh-space-medium);grid-template-columns:1fr}@media screen and (min-width: 600px){.stzh-geo-ref-data__teaser-list{grid-template-columns:1fr 1fr}}@media screen and (min-width: 1260px){.stzh-geo-ref-data__teaser-list{grid-template-columns:1fr}}.stzh-geo-ref-data__teaser-load-more{display:flex;justify-content:center}.stzh-poi-teaser{display:grid;grid-template-columns:minmax(0, 1fr) 11.25rem;height:11.25rem;background-color:var(--stzh-color-grey10);position:relative}.stzh-poi-teaser:hover{cursor:pointer;background-color:var(--stzh-color-secondary10)}.stzh-poi-teaser-content{padding:var(--stzh-space-medium);-webkit-hyphens:auto;hyphens:auto}.stzh-poi-teaser-content stzh-heading{margin-bottom:var(--stzh-space-xsmall)}.stzh-poi-teaser-content stzh-text{--color:var(--stzh-color-grey80)}.stzh-poi-teaser-link{position:absolute;top:0;right:0;bottom:0;left:0}.stzh-poi-teaser-image{position:relative;overflow:hidden}.stzh-poi-teaser-image-inner{position:absolute;inset:0;height:100%}.stzh-poi-teaser-image-inner img{height:11.25rem}.stzh-poi-teaser-list-item{display:flex;gap:var(--stzh-space-small);margin-top:var(--stzh-space-xxsmall)}.stzh-poi-teaser-list-item stzh-icon,.stzh-poi-teaser-list-item stzh-text{--color:var(--stzh-color-grey80)}';const p=class{constructor(a){t(this,a);this.stzhOverlayCloseClick=e(this,"stzhOverlayCloseClick",7);this.filterResults=[];this.handleOverlayCloseClick=()=>{this.isOpen=false};this.handleResize=async()=>{if(this.metaWrapperElement&&this.metaWrapperElement.clientHeight){this.mapElement.style.height=`calc(100% - ${this.metaWrapperElement.clientHeight}px)`;this.resultsListElement.style.height=`calc(100% - ${this.metaWrapperElement.clientHeight}px)`;const t=await this.mapElement.getMap();t.updateSize()}};this.mediaChangeHandler=()=>{this.isViewportLarge=d("large").matches;this.isViewportMedium=d("medium").matches};this.handleFilterChange=async t=>{if(t.detail.value.length!==0){this.filterResults=this.combinedData.filter((e=>e.tags.some((e=>t.detail.value.includes(e)))));this.filterActive=true}else{this.filterActive=false}await this.combineFilterAndSearchResults()};this.handleExtentVisibilityChange=t=>{this.showOnlyResultsForCurrentExtent=t.detail.checked};this.handleSearchChange=async t=>{if(t.detail.value!==""){if(!this.searchIndex){return}const e=this.searchIndex.search(t.detail.value);const a=e.flatMap((t=>t.result));this.searchResults=new Set(a);this.searchActive=true}else{this.searchActive=false}await this.combineFilterAndSearchResults()};this.toggleViewMode=()=>{if(this.viewmode==="map"){this.viewmode="list"}else{this.viewmode="map"}};this.heading="";this.mapDataUrl="";this.poiDataUrl="";this.baseUrlOverride="https://www.stadt-zuerich.ch";this.availableTags=[];this.resetTag=undefined;this.filterActive=false;this.searchActive=false;this.showOnlyResultsForCurrentExtent=true;this.finalResults=[];this.finalResultsPaginatedList=[];this.finalResultsPaginationOffset=0;this.viewmode="map";this.isViewportLarge=undefined;this.isViewportMedium=undefined;this.isInitialized=undefined;this.isOpen=undefined;this.isLoading=undefined}async loadMapData(){if(!this.mapDataUrl){console.log("No map data URL provided");return[]}try{const t=await fetch(this.mapDataUrl);const e=await t.text();const a=(new DOMParser).parseFromString(e,"text/xml");const s=Array.from(a.querySelectorAll("featureMember")).map((t=>{var e,a;const s=(e=t.querySelector("pos"))===null||e===void 0?void 0:e.textContent;const i=(a=t.querySelector("poi_id"))===null||a===void 0?void 0:a.textContent;const[r,n]=(s===null||s===void 0?void 0:s.split(" "))||[];return{poiid:i,lat:r,lon:n}}));return s}catch(t){console.error("Error fetching map data:",t)}}async loadPoiData(){if(!this.poiDataUrl){console.error("No POI data URL provided");return[]}try{const t=await fetch(this.poiDataUrl,{credentials:"include"});const e=await t.json();return e.items}catch(t){console.error("Error fetching POI data:",t)}}combineData(t,e){if(!t.length||!e.length){console.error("Missing data to combine");return[]}let a;let s;if(t.length<e.length){a=t;s=e}else{a=e;s=t}const i=a.map((t=>{const e=s.find((e=>e.poiid===t.poiid));return Object.assign(Object.assign({},t),e)})).sort(((t,e)=>t.title.localeCompare(e.title)));console.log("Combined Data:",i);return i}enhanceTags(t,e){return t.sort(((t,e)=>t.label.localeCompare(e.label))).map((t=>{const a=e.filter((e=>e.tags.includes(t.value))).length.toString();return Object.assign(Object.assign({},t),{counter:a,variant:"filter"})}))}buildSearchIndex(t){if(!t.length){return}this.searchIndex=new n.Document({tokenize:"forward",matcher:{"[äà]":"a","[öó]":"o","[üûúù]":"u","[éè]":"e"},document:{id:"poiid",index:["title","street","zip","description"]}});t.forEach((t=>{this.searchIndex.add(t)}))}async mapMovedPannedOrZoomed(){if(this.showOnlyResultsForCurrentExtent){const t=await this.mapElement.getVisibleMarkers();console.log("visibleMarkers",t)}}connectedCallback(){this.mediaChangeHandler();o(this.mediaChangeHandler);this.resizeObserver=new ResizeObserver(this.handleResize);this.resizeObserver.observe(this.element)}disconnectedCallback(){h(this.mediaChangeHandler);if(this.resizeObserver){this.resizeObserver.disconnect()}}async initializeAndOpenMap(){this.isLoading=true;this.isOpen=true;try{this.combinedData=this.combineData(await this.loadMapData(),await this.loadPoiData());this.enhancedTags=this.enhanceTags(this.availableTags,this.combinedData);this.buildSearchIndex(this.combinedData);const t=Object.assign(Object.assign({},this.resetTag),{counter:this.combinedData.length.toString()});if(this.resetTag){this.enhancedTags.unshift(t)}this.finalResults=this.combinedData;this.finalResultsPaginatedList=this.finalResults.slice(0,20);await this.combineFilterAndSearchResults();await this.handleResize();await this.mapElement.updateViewToFitMarkers();await this.handleResize();this.isInitialized=true}catch(t){console.error("mapException",t)}setTimeout((()=>{this.isLoading=false}),500)}async combineFilterAndSearchResults(){if(this.filterActive&&!this.searchActive){this.finalResults=this.filterResults}else if(!this.filterActive&&this.searchActive){this.finalResults=Array.from(this.searchResults).map((t=>this.combinedData.find((e=>e.poiid===t))))}else if(this.filterActive&&this.searchActive){this.finalResults=this.filterResults.filter((t=>this.searchResults.has(t.poiid)))}else{this.finalResults=this.combinedData}this.finalResultsPaginatedList=this.finalResults.slice(0,20);await this.replaceMapMarkers(this.finalResults)}loadMore(){this.finalResultsPaginationOffset++;this.finalResultsPaginatedList=this.finalResultsPaginatedList.concat(this.finalResults.slice(this.finalResultsPaginationOffset*20,this.finalResultsPaginationOffset*20+20))}async replaceMapMarkers(t){await this.mapElement.removeAllIconMarkers();t.filter((t=>!!t.lat&&!!t.lon)).forEach((t=>{this.mapElement.addIconMarker([parseFloat(t.lat),parseFloat(t.lon)],{id:t.poiid,title:t.title,text:t.description,data:t.data,imageUri:`${this.baseUrlOverride}${t.image}`,href:`${this.baseUrlOverride}${t.path}`}).catch()}));if(!this.showOnlyResultsForCurrentExtent){this.mapElement.updateViewToFitMarkers().catch()}}async handlePoiTeaserMouseEnter(t){const e=await this.mapElement.findMarkerById(t.poiid);if(e){await this.mapElement.setIconMarkerActive(e)}}async handlePoiTeaserMouseLeave(t){const e=await this.mapElement.findMarkerById(t.poiid);if(e){await this.mapElement.setIconMarkerInactive(e)}}render(){const t={"stzh-geo-ref-data":true,"stzh-geo-ref-data--is-loading":this.isLoading,"stzh-geo-ref-data--is-open":this.isOpen};return a(i,null,a("div",{class:"stzh-geo-ref-data__trigger",onClick:()=>this.initializeAndOpenMap()},a("slot",{name:"trigger"})),a("stzh-overlay",{open:this.isLoading},a("stzh-loader",{label:"Daten werden geladen..."})),a("div",{class:t},a("div",{class:"stzh-geo-ref-data__header-wrapper"},a("stzh-header",{"hide-metabar":true},a("img",{slot:"logo",src:"media/logo/stzh-default.svg",alt:"Logo City Zürich, go to homepage"})),a("div",{class:"stzh-geo-ref-data__heading stzh-geo-ref-data--content-padding"},a("stzh-heading",{class:"stzh-geo-ref-data__heading-heading",curve:"h2"},this.heading),a("stzh-button",{class:"stzh-geo-ref-data__overlay-close",icon:"close",iconOnly:true,size:"small",variant:"tertiary",onClick:this.handleOverlayCloseClick}))),a("div",{class:"stzh-geo-ref-data__content"},a("div",{class:"stzh-geo-ref-data__meta-wrapper stzh-geo-ref-data--content-padding",ref:t=>this.metaWrapperElement=t},a("div",{class:"stzh-geo-ref-data__filters"},a("div",{class:"stzh-geo-ref-data__filters-toggle"},a("stzh-chip",{label:this.isViewportMedium?"Filter":"",variant:"filter",icon:"filtering"})),a("div",{class:"stzh-geo-ref-data__filters-content"},a("stzh-chipselect",{"label-hidden":true,label:"Tags",data:this.enhancedTags,onStzhChange:this.handleFilterChange,multiple:true,defaultValue:[""]}))),a("div",{class:"stzh-geo-ref-data__search"},a("stzh-input",{size:"small",name:"stzh-datatable-search",onStzhChange:this.handleSearchChange,hideOptional:true,label:"Suche",type:"search"})),a("div",{class:"stzh-geo-ref-data__results-toggle"},a("stzh-chip",{onStzhClick:this.toggleViewMode,label:this.viewmode==="map"?"Liste":"Karte",icon:this.viewmode==="map"?"bulleted-list":"map",variant:"filter"}))),a("div",{class:"stzh-geo-ref-data__results-wrapper"},a("div",{class:`stzh-geo-ref-data__results-map ${this.viewmode==="map"?"active":"inactive"}`},a("stzh-olmap",{class:"stzh-geo-ref-data__ol-map",centerMarker:false,ref:t=>this.mapElement=t}),a("div",{class:"stzh-geo-ref-data__map-controls"},a("stzh-checkbox",{label:"Treffer an Kartenaussicht anpassen",checked:this.showOnlyResultsForCurrentExtent,hideOptional:true,onStzhChange:this.handleExtentVisibilityChange}))),a("div",{class:`stzh-geo-ref-data__results-list ${this.viewmode==="list"?"active":"inactive"}`,ref:t=>this.resultsListElement=t},this.finalResults&&a(s,null,a("stzh-text",{class:"stzh-geo-ref-data__results-list-heading"},this.finalResults.length," Treffer"),a("div",{class:"stzh-geo-ref-data__teaser-list"},this.finalResultsPaginatedList.map((t=>a("div",{class:"stzh-poi-teaser",onMouseEnter:()=>this.handlePoiTeaserMouseEnter(t),onMouseLeave:()=>this.handlePoiTeaserMouseLeave(t)},a("a",{class:"stzh-poi-teaser-link",href:this.baseUrlOverride+t.path}),a("div",{class:"stzh-poi-teaser-content"},a("stzh-heading",{curve:"lead"},t.poiname),t.description&&a("stzh-text",{size:"micro"},t.description),t.data&&t.data.length>0&&t.data.map((t=>a("div",{class:"stzh-poi-teaser-list-item"},a("stzh-icon",{name:t.icon}),a("stzh-text",{size:"micro"},t.text))))),a("div",{class:"stzh-poi-teaser-image"},a("stzh-ratio",{ratio:"1:1"}),a("div",{class:"stzh-poi-teaser-image-inner"},a("img",{src:this.baseUrlOverride+t.image,alt:"Foto von "+t.poiname}))))))),a("div",{class:"stzh-geo-ref-data__teaser-load-more"},a("stzh-button",{onStzhClick:()=>this.loadMore()},"Weitere laden"))))))))}get element(){return r(this)}};p.style=l;export{p as stzh_geo_ref_data};
-//# sourceMappingURL=p-55349f2e.entry.js.map

package/dist/stzh-components/p-55349f2e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhGeoRefDataCss","GeoRefData","this","filterResults","handleOverlayCloseClick","isOpen","handleResize","async","metaWrapperElement","clientHeight","mapElement","style","height","resultsListElement","map","getMap","updateSize","mediaChangeHandler","isViewportLarge","media","matches","isViewportMedium","handleFilterChange","e","detail","value","length","combinedData","filter","item","tags","some","tag","includes","filterActive","combineFilterAndSearchResults","handleExtentVisibilityChange","showOnlyResultsForCurrentExtent","checked","handleSearchChange","searchIndex","searchResults","search","flatSearchResults","flatMap","field","result","Set","searchActive","toggleViewMode","viewmode","loadMapData","mapDataUrl","console","log","response","fetch","rawMapData","text","parsedData","DOMParser","parseFromString","items","Array","from","querySelectorAll","pos","_a","querySelector","textContent","poiid","_b","lat","lon","split","error","loadPoiData","poiDataUrl","credentials","poiData","json","combineData","firstArray","secondArray","smallerArray","largerArray","matchingItem","find","largerArrayItem","Object","assign","sort","a","b","title","localeCompare","enhanceTags","availableTags","label","counter","toString","variant","buildSearchIndex","data","Document","tokenize","matcher","document","id","index","forEach","add","mapMovedPannedOrZoomed","visibleMarkers","getVisibleMarkers","connectedCallback","addMediaChangeListener","resizeObserver","ResizeObserver","observe","element","disconnectedCallback","removeMediaChangeListener","disconnect","initializeAndOpenMap","isLoading","enhancedTags","enhancedResetTag","resetTag","unshift","finalResults","finalResultsPaginatedList","slice","updateViewToFitMarkers","isInitialized","mapException","setTimeout","has","replaceMapMarkers","loadMore","finalResultsPaginationOffset","concat","removeAllIconMarkers","addIconMarker","parseFloat","description","imageUri","baseUrlOverride","image","href","path","catch","handlePoiTeaserMouseEnter","marker","findMarkerById","setIconMarkerActive","handlePoiTeaserMouseLeave","setIconMarkerInactive","render","classes","h","Host","class","onClick","name","open","slot","src","alt","curve","heading","icon","iconOnly","size","ref","el","onStzhChange","multiple","defaultValue","hideOptional","type","onStzhClick","centerMarker","Fragment","onMouseEnter","onMouseLeave","poiname","ratio"],"sources":["src/components/stzh-geo-ref-data/stzh-geo-ref-data.scss?tag=stzh-geo-ref-data&encapsulation=shadow","src/components/stzh-geo-ref-data/stzh-geo-ref-data.tsx"],"sourcesContent":[":host {\n  --meta-grid-template-areas: \"filters\" \"search\" \"resultstoggle\";\n  --results-grid-template-areas: \"map\" \"list\";\n\n  @include mq($from: large) {\n    --meta-grid-template-areas: \"filters filters filters filters filters filters filters filters search search search search\";\n    --results-grid-template-areas: \"map map map map map map map map list list list list\";\n  }\n\n}\n\n.stzh-geo-ref-data {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 899;\n  flex-direction: column;\n  transition: opacity ease 0.2s;\n\n  // initially hidden\n  display: none;\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n\n  &--is-open {\n    display: flex;\n    opacity: 1;\n    visibility: visible;\n    pointer-events: inherit;\n  }\n\n  &__content {\n    overflow: hidden;\n    height: 100%;\n  }\n\n  &--content-padding {\n    padding-left: $containerMargin;\n    padding-right: $containerMargin;\n\n    @include mq($from: small) {\n      padding-left: $containerMarginSmall;\n      padding-right: $containerMarginSmall;\n    }\n\n    @include mq($from: medium) {\n      padding-left: $containerMarginMedium;\n      padding-right: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      padding-left: $containerMarginSmall;\n      padding-right: $containerMarginSmall;\n    }\n  }\n\n  &__heading {\n    display: flex;\n    background-color: var(--stzh-color-secondary20);\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n  }\n\n  /** Everything meta wrapper like search, filters etc. */\n\n  &__meta-wrapper {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-end;\n    gap: space(large);\n\n    @include spaceCurve('padding-top', 'small');\n    @include spaceCurve('padding-bottom', 'small');\n\n    @include mq($from: large) {\n      @include grid;\n      grid-template-areas: var(--meta-grid-template-areas);\n      grid-template-columns: repeat(12, minmax(0, 1fr));\n    }\n  }\n\n  &__filters {\n    grid-area: filters;\n    flex: none;\n    margin-bottom: space(xxsmall);\n  }\n\n  &__filters-toggle {\n    @include mq($from: large) {\n      display: none;\n    }\n  }\n\n  &__filters-toggle stzh-chip {\n    @include mq($to: medium) {\n      --icon-gap: 0;\n    }\n  }\n\n  &__filters-content {\n    display: none;\n\n    @include mq($from: large) {\n      display: block;\n    }\n  }\n\n  &__search {\n    grid-area: search;\n    width: 100%;\n\n    @include mq($from: large) {\n      padding-left: 12px;\n    }\n  }\n\n  &__results-toggle {\n    grid-area: resultstoggle;\n    flex: none;\n    margin-bottom: space(xxsmall);\n\n    @include mq($from: large) {\n      display: none;\n    }\n  }\n\n  /** Everything with results */\n\n  &__results-wrapper {\n    height: 100%;\n\n    @include mq($from: large) {\n      @include grid;\n      grid-template-areas: var(--results-grid-template-areas);\n      --grid-template-columns: repeat(12, minmax(0, 1fr));\n    }\n  }\n\n  &__results-wrapper .inactive {\n    @include mq($to: large) {\n      visibility: hidden;\n      height: 0;\n      position: absolute;\n      overflow: hidden;\n    }\n  }\n\n  &__results-map {\n    grid-area: map;\n    position: relative;\n    height: 100%;\n  }\n\n  &__map-controls {\n    position: absolute;\n    top: space(small);\n    left: space(small);\n    background-color: var(--stzh-color-white);\n    padding: space(xsmall);\n  }\n\n  &__results-list {\n    grid-area: list;\n    padding-left: $containerMargin;\n    padding-right: $containerMargin;\n    padding-bottom: space(large);\n    overflow: auto;\n\n    @include mq($from: small) {\n      padding-left: $containerMarginSmall;\n      padding-right: $containerMarginSmall;\n    }\n\n    @include mq($from: medium) {\n      padding-left: $containerMarginMedium;\n      padding-right: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      padding-left: 0;\n      padding-right: $containerMarginSmall;\n      overflow: auto;\n    }\n  }\n\n  &__results-list-heading {\n    margin-bottom: var(--stzh-space-medium);\n  }\n\n  &__ol-map {\n  }\n\n  &__teaser-list {\n    display: grid;\n    gap: var(--stzh-space-medium);\n    grid-template-columns: 1fr;\n\n    @include mq($from: small) {\n      grid-template-columns: 1fr 1fr;\n    }\n\n    @include mq($from: large) {\n      grid-template-columns: 1fr;\n    }\n  }\n\n  &__teaser-load-more {\n    display: flex;\n    justify-content: center;\n    margin-top: space(regular);\n  }\n}\n\n/** TEMP - MOVE TO COMPONENT **/\n\n.stzh-poi-teaser {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 180px;\n  height: 180px;\n  background-color: var(--stzh-color-grey10);\n  position: relative;\n\n  &:hover {\n    cursor: pointer;\n    background-color: var(--stzh-color-secondary10);\n  }\n\n  &-content {\n    padding: var(--stzh-space-medium);\n    hyphens: auto;\n\n    stzh-heading {\n      margin-bottom: space(xsmall);\n    }\n\n    stzh-text {\n      --color: var(--stzh-color-grey80);\n    }\n  }\n\n  &-link {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n\n  &-image {\n    position: relative;\n    overflow: hidden;\n  }\n\n  &-image-inner {\n    position: absolute;\n    inset: 0;\n    height: 100%;\n  }\n\n  &-image-inner img {\n    height: 180px;\n  }\n\n  &-list-item {\n    display: flex;\n    gap: space(small);\n    margin-top: space(xxsmall);\n\n    stzh-icon, stzh-text {\n      --color: var(--stzh-color-grey80);\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport {\n  StzhAvailableTag,\n  StzhChipselectChangeEvent,\n  StzhChipselectItem,\n  StzhCombinedGeoRefData,\n  StzhGeoRefDataOverlayCloseClickEvent,\n  StzhMapGeoRefData,\n  StzhPoiGeoRefData,\n} from \"../../index\";\nimport { Document } from \"flexsearch/dist/flexsearch.bundle.min.js\";\nimport {\n  addMediaChangeListener,\n  media,\n  removeMediaChangeListener,\n} from \"../../utils/media-utils\";\n\n@Component({\n  tag: \"stzh-geo-ref-data\",\n  styleUrl: \"stzh-geo-ref-data.scss\",\n  shadow: true,\n})\nexport class GeoRefData {\n  /** Heading for the overlay. */\n  @Prop({ reflect: true }) heading: string = \"\";\n\n  /** The URL for fetching the card data */\n  @Prop({ reflect: true }) mapDataUrl: string = \"\";\n\n  /** The URL used for fetching the POI data. */\n  @Prop({ reflect: true }) poiDataUrl: string = \"\";\n\n  /** Base URL used for all external requests (map, card). */\n  @Prop() baseUrlOverride: string = \"https://www.stadt-zuerich.ch\";\n\n  /** To make sure all tags are mapped to their identificator, only these will be available. */\n  @Prop() availableTags: StzhAvailableTag[] = [];\n\n  @Prop() resetTag: StzhChipselectItem;\n\n  @State() filterActive: boolean = false;\n  @State() searchActive: boolean = false;\n  @State() showOnlyResultsForCurrentExtent: boolean = true;\n  @State() finalResults: StzhCombinedGeoRefData[] = [];\n  @State() finalResultsPaginatedList: StzhCombinedGeoRefData[] = [];\n  @State() finalResultsPaginationOffset = 0;\n\n  @State() viewmode: \"map\" | \"list\" = \"map\";\n  @State() isViewportLarge: boolean;\n  @State() isViewportMedium: boolean;\n  @State() isInitialized: boolean;\n  @State() isOpen: boolean;\n  @State() isLoading: boolean;\n\n  /** Overlay close click event */\n  @Event()\n  stzhOverlayCloseClick: EventEmitter<StzhGeoRefDataOverlayCloseClickEvent>;\n\n  private combinedData: StzhCombinedGeoRefData[];\n  private enhancedTags: StzhChipselectItem[];\n  private searchIndex: Document;\n\n  private filterResults: StzhCombinedGeoRefData[] = [];\n  private searchResults: Set<string>;\n\n  @Element() element: HTMLStzhGeoRefDataElement;\n  private mapElement: HTMLStzhOlmapElement;\n  private metaWrapperElement: HTMLDivElement;\n  private resultsListElement: HTMLDivElement;\n  private resizeObserver: ResizeObserver;\n\n  private handleOverlayCloseClick = () => {\n    this.isOpen = false;\n  };\n\n  private handleResize = async () => {\n    if (this.metaWrapperElement && this.metaWrapperElement.clientHeight) {\n      this.mapElement.style.height = `calc(100% - ${this.metaWrapperElement.clientHeight}px)`;\n      this.resultsListElement.style.height = `calc(100% - ${this.metaWrapperElement.clientHeight}px)`;\n      const map = await this.mapElement.getMap();\n      map.updateSize();\n    }\n  };\n\n  private mediaChangeHandler = () => {\n    this.isViewportLarge = media(\"large\").matches;\n    this.isViewportMedium = media(\"medium\").matches;\n  };\n\n  private async loadMapData(): Promise<StzhMapGeoRefData[]> {\n    if (!this.mapDataUrl) {\n      console.log(\"No map data URL provided\");\n      return [];\n    }\n    try {\n      // TODO: add loader\n      const response = await fetch(this.mapDataUrl);\n      const rawMapData = await response.text();\n      // console.log('Raw Map data:', rawMapData);\n      const parsedData = new DOMParser().parseFromString(\n        rawMapData,\n        \"text/xml\"\n      );\n      // console.log('Parsed Map data:', parsedData);\n\n      const items = Array.from(\n        parsedData.querySelectorAll(\"featureMember\")\n      ).map((item) => {\n        const pos = item.querySelector(\"pos\")?.textContent;\n        const poiid = item.querySelector(\"poi_id\")?.textContent;\n        const [lat, lon] = pos?.split(\" \") || [];\n\n        return { poiid, lat, lon } as StzhMapGeoRefData;\n      });\n\n      // console.log('Loaded Map Data:', items);\n      // this.mapData = items;\n      // TODO: handle empty items\n      return items;\n    } catch (error) {\n      console.error(\"Error fetching map data:\", error);\n      // TODO: add user error (toast)\n    }\n  }\n\n  private async loadPoiData() {\n    if (!this.poiDataUrl) {\n      console.error(\"No POI data URL provided\");\n      return [];\n    }\n    try {\n      const response = await fetch(this.poiDataUrl, { credentials: \"include\" });\n      // console.log('Response:', response);\n\n      const poiData = await response.json();\n      // console.log('POI data:', poiData);\n      // this.poiData = poiData.items;\n      // TODO: handle empty items\n      return poiData.items;\n    } catch (error) {\n      console.error(\"Error fetching POI data:\", error);\n      // TODO: add user error (toast)\n    }\n  }\n\n  private combineData(\n    firstArray: StzhMapGeoRefData[] | StzhPoiGeoRefData[],\n    secondArray: StzhMapGeoRefData[] | StzhPoiGeoRefData[]\n  ): StzhCombinedGeoRefData[] {\n    if (!firstArray.length || !secondArray.length) {\n      console.error(\"Missing data to combine\");\n      return [];\n    }\n    // determine which array is smaller for performance\n    let smallerArray: any[];\n    let largerArray: any[];\n\n    if (firstArray.length < secondArray.length) {\n      smallerArray = firstArray;\n      largerArray = secondArray;\n    } else {\n      smallerArray = secondArray;\n      largerArray = firstArray;\n    }\n    // combine arrays based on poiid\n    const combinedData = smallerArray\n      .map((item) => {\n        const matchingItem = largerArray.find(\n          (largerArrayItem) => largerArrayItem.poiid === item.poiid\n        );\n        return { ...item, ...matchingItem };\n      })\n      .sort((a, b) => {\n        return a.title.localeCompare(b.title); // Sorts alphabetically by the 'name' property\n      });\n    console.log(\"Combined Data:\", combinedData);\n    return combinedData;\n  }\n\n  private enhanceTags(\n    availableTags: StzhAvailableTag[],\n    combinedData: StzhCombinedGeoRefData[]\n  ): StzhChipselectItem[] {\n    return availableTags\n      .sort((a, b) => a.label.localeCompare(b.label))\n      .map((tag) => {\n        const counter = combinedData\n          .filter((item) => item.tags.includes(tag.value))\n          .length.toString();\n        return { ...tag, counter, variant: \"filter\" };\n      });\n  }\n\n  private buildSearchIndex(data: StzhCombinedGeoRefData[]) {\n    if (!data.length) {\n      return;\n    }\n    this.searchIndex = new Document({\n      tokenize: \"forward\",\n      matcher: {\n        \"[äà]\": \"a\",\n        \"[öó]\": \"o\",\n        \"[üûúù]\": \"u\",\n        \"[éè]\": \"e\",\n      },\n      document: {\n        id: \"poiid\", // TODO: move to props so that backend can define\n        index: [\"title\", \"street\", \"zip\", \"description\"], //TODO: move to props so that backend can define\n      },\n    });\n    data.forEach((item) => {\n      this.searchIndex.add(item);\n    });\n  }\n\n  @Listen(\"stzhMovePanZoom\")\n  async mapMovedPannedOrZoomed() {\n    if (this.showOnlyResultsForCurrentExtent) {\n      const visibleMarkers = await this.mapElement.getVisibleMarkers();\n      console.log(\"visibleMarkers\", visibleMarkers);\n    }\n  }\n\n  connectedCallback() {\n    this.mediaChangeHandler();\n    addMediaChangeListener(this.mediaChangeHandler);\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  private async initializeAndOpenMap() {\n    this.isLoading = true;\n    this.isOpen = true;\n\n    try {\n      this.combinedData = this.combineData(\n        await this.loadMapData(),\n        await this.loadPoiData()\n      );\n      this.enhancedTags = this.enhanceTags(\n        this.availableTags,\n        this.combinedData\n      );\n      this.buildSearchIndex(this.combinedData);\n      const enhancedResetTag = {\n        ...this.resetTag,\n        counter: this.combinedData.length.toString(),\n      };\n      if (this.resetTag) {\n        this.enhancedTags.unshift(enhancedResetTag);\n      }\n      this.finalResults = this.combinedData;\n      this.finalResultsPaginatedList = this.finalResults.slice(0, 20);\n      await this.combineFilterAndSearchResults();\n      await this.handleResize();\n      await this.mapElement.updateViewToFitMarkers();\n      await this.handleResize();\n      this.isInitialized = true;\n    } catch (mapException) {\n      console.error(\"mapException\", mapException);\n    }\n\n    setTimeout(() => {\n      this.isLoading = false;\n    }, 500);\n  }\n\n  private handleFilterChange = async (\n    e: CustomEvent<StzhChipselectChangeEvent>\n  ) => {\n    if (e.detail.value.length !== 0) {\n      this.filterResults = this.combinedData.filter((item) =>\n        item.tags.some((tag) => e.detail.value.includes(tag))\n      );\n      this.filterActive = true;\n    } else {\n      this.filterActive = false;\n    }\n    await this.combineFilterAndSearchResults();\n  };\n\n  private handleExtentVisibilityChange = (e) => {\n    this.showOnlyResultsForCurrentExtent = e.detail.checked;\n  };\n\n  private handleSearchChange = async (e: CustomEvent) => {\n    if (e.detail.value !== \"\") {\n      if (!this.searchIndex) {\n        return;\n      }\n      const searchResults = this.searchIndex.search(e.detail.value);\n      const flatSearchResults = searchResults.flatMap((field) => field.result);\n      this.searchResults = new Set(flatSearchResults);\n      this.searchActive = true;\n    } else {\n      this.searchActive = false;\n    }\n    await this.combineFilterAndSearchResults();\n  };\n\n  private async combineFilterAndSearchResults() {\n    if (this.filterActive && !this.searchActive) {\n      this.finalResults = this.filterResults;\n    } else if (!this.filterActive && this.searchActive) {\n      this.finalResults = Array.from(this.searchResults).map((poiid) =>\n        this.combinedData.find((item) => item.poiid === poiid)\n      );\n    } else if (this.filterActive && this.searchActive) {\n      this.finalResults = this.filterResults.filter((item) =>\n        this.searchResults.has(item.poiid)\n      );\n    } else {\n      this.finalResults = this.combinedData;\n    }\n\n    this.finalResultsPaginatedList = this.finalResults.slice(0, 20);\n\n    await this.replaceMapMarkers(this.finalResults);\n  }\n\n  private loadMore() {\n    this.finalResultsPaginationOffset++;\n    this.finalResultsPaginatedList = this.finalResultsPaginatedList.concat(\n      this.finalResults.slice(\n        this.finalResultsPaginationOffset * 20,\n        this.finalResultsPaginationOffset * 20 + 20\n      )\n    );\n  }\n\n  // private async handleExtendVisibility() {\n  //   if (this.showOnlyResultsForCurrentExtent) {\n  //     const visibleMarkers = await this.mapElement.getVisibleMarkers();\n  //     console.log(\"visibleMarkers\", visibleMarkers);\n  //   }\n  // }\n\n  private async replaceMapMarkers(items: StzhCombinedGeoRefData[]) {\n    await this.mapElement.removeAllIconMarkers();\n    items\n      .filter((item) => !!item.lat && !!item.lon)\n      .forEach((item) => {\n        this.mapElement\n          .addIconMarker([parseFloat(item.lat), parseFloat(item.lon)], {\n            id: item.poiid,\n            title: item.title,\n            text: item.description,\n            data: item.data,\n            imageUri: `${this.baseUrlOverride}${item.image}`,\n            href: `${this.baseUrlOverride}${item.path}`,\n          })\n          .catch();\n      });\n    if (!this.showOnlyResultsForCurrentExtent) {\n      this.mapElement.updateViewToFitMarkers().catch();\n    }\n  }\n\n  private toggleViewMode = () => {\n    if (this.viewmode === \"map\") {\n      this.viewmode = \"list\";\n    } else {\n      this.viewmode = \"map\";\n    }\n  };\n\n  private async handlePoiTeaserMouseEnter(item: StzhCombinedGeoRefData) {\n    const marker = await this.mapElement.findMarkerById(item.poiid);\n    if (marker) {\n      await this.mapElement.setIconMarkerActive(marker);\n    }\n  }\n\n  private async handlePoiTeaserMouseLeave(item: StzhCombinedGeoRefData) {\n    const marker = await this.mapElement.findMarkerById(item.poiid);\n    if (marker) {\n      await this.mapElement.setIconMarkerInactive(marker);\n    }\n  }\n\n  // render chipselect\n\n  render() {\n    const classes = {\n      \"stzh-geo-ref-data\": true,\n      \"stzh-geo-ref-data--is-loading\": this.isLoading,\n      \"stzh-geo-ref-data--is-open\": this.isOpen,\n    };\n    return (\n      <Host>\n        <div\n          class=\"stzh-geo-ref-data__trigger\"\n          onClick={() => this.initializeAndOpenMap()}\n        >\n          <slot name=\"trigger\"></slot>\n        </div>\n        <stzh-overlay open={this.isLoading}>\n          <stzh-loader label=\"Daten werden geladen...\"></stzh-loader>\n        </stzh-overlay>\n        <div class={classes}>\n          <div class=\"stzh-geo-ref-data__header-wrapper\">\n            <stzh-header hide-metabar={true}>\n              <img\n                slot=\"logo\"\n                src=\"media/logo/stzh-default.svg\"\n                alt=\"Logo City Zürich, go to homepage\"\n              />\n            </stzh-header>\n            <div class=\"stzh-geo-ref-data__heading stzh-geo-ref-data--content-padding\">\n              <stzh-heading\n                class=\"stzh-geo-ref-data__heading-heading\"\n                curve=\"h2\"\n              >\n                {this.heading}\n              </stzh-heading>\n              <stzh-button\n                class=\"stzh-geo-ref-data__overlay-close\"\n                icon=\"close\"\n                iconOnly={true}\n                size=\"small\"\n                variant=\"tertiary\"\n                onClick={this.handleOverlayCloseClick}\n              ></stzh-button>\n            </div>\n          </div>\n\n          <div class=\"stzh-geo-ref-data__content\">\n            <div\n              class=\"stzh-geo-ref-data__meta-wrapper stzh-geo-ref-data--content-padding\"\n              ref={(el) => (this.metaWrapperElement = el as HTMLDivElement)}\n            >\n              <div class=\"stzh-geo-ref-data__filters\">\n                <div class=\"stzh-geo-ref-data__filters-toggle\">\n                  <stzh-chip\n                    label={this.isViewportMedium ? \"Filter\" : \"\"}\n                    variant=\"filter\"\n                    icon=\"filtering\"\n                  ></stzh-chip>\n                </div>\n                <div class=\"stzh-geo-ref-data__filters-content\">\n                  <stzh-chipselect\n                    label-hidden={true}\n                    label=\"Tags\"\n                    data={this.enhancedTags}\n                    onStzhChange={this.handleFilterChange}\n                    multiple={true}\n                    defaultValue={[\"\"]}\n                  ></stzh-chipselect>\n                </div>\n              </div>\n              <div class=\"stzh-geo-ref-data__search\">\n                <stzh-input\n                  size=\"small\"\n                  name=\"stzh-datatable-search\"\n                  onStzhChange={this.handleSearchChange}\n                  hideOptional={true}\n                  label=\"Suche\"\n                  type=\"search\"\n                ></stzh-input>\n              </div>\n              <div class=\"stzh-geo-ref-data__results-toggle\">\n                <stzh-chip\n                  onStzhClick={this.toggleViewMode}\n                  label={this.viewmode === \"map\" ? \"Liste\" : \"Karte\"}\n                  icon={this.viewmode === \"map\" ? \"bulleted-list\" : \"map\"}\n                  variant=\"filter\"\n                ></stzh-chip>\n              </div>\n            </div>\n            <div class=\"stzh-geo-ref-data__results-wrapper\">\n              <div\n                class={`stzh-geo-ref-data__results-map ${\n                  this.viewmode === \"map\" ? \"active\" : \"inactive\"\n                }`}\n              >\n                <stzh-olmap\n                  class=\"stzh-geo-ref-data__ol-map\"\n                  centerMarker={false}\n                  ref={(el) => (this.mapElement = el as HTMLStzhOlmapElement)}\n                ></stzh-olmap>\n                <div class=\"stzh-geo-ref-data__map-controls\">\n                  <stzh-checkbox\n                    label=\"Treffer an Kartenaussicht anpassen\"\n                    checked={this.showOnlyResultsForCurrentExtent}\n                    hideOptional={true}\n                    onStzhChange={this.handleExtentVisibilityChange}\n                  ></stzh-checkbox>\n                </div>\n              </div>\n              <div\n                class={`stzh-geo-ref-data__results-list ${\n                  this.viewmode === \"list\" ? \"active\" : \"inactive\"\n                }`}\n                ref={(el) => (this.resultsListElement = el as HTMLDivElement)}\n              >\n                {this.finalResults && (\n                  <Fragment>\n                    <stzh-text class=\"stzh-geo-ref-data__results-list-heading\">\n                      {this.finalResults.length} Treffer\n                    </stzh-text>\n                    <div class=\"stzh-geo-ref-data__teaser-list\">\n                      {this.finalResultsPaginatedList.map((item) => (\n                        <div\n                          class=\"stzh-poi-teaser\"\n                          onMouseEnter={() =>\n                            this.handlePoiTeaserMouseEnter(item)\n                          }\n                          onMouseLeave={() =>\n                            this.handlePoiTeaserMouseLeave(item)\n                          }\n                        >\n                          <a\n                            class=\"stzh-poi-teaser-link\"\n                            href={this.baseUrlOverride + item.path}\n                          ></a>\n                          <div class=\"stzh-poi-teaser-content\">\n                            <stzh-heading curve=\"lead\">\n                              {item.poiname}\n                            </stzh-heading>\n                            {item.description && (\n                              <stzh-text size=\"micro\">\n                                {item.description}\n                              </stzh-text>\n                            )}\n                            {item.data &&\n                              item.data.length > 0 &&\n                              item.data.map((item) => (\n                                <div class=\"stzh-poi-teaser-list-item\">\n                                  <stzh-icon name={item.icon}></stzh-icon>\n                                  <stzh-text size=\"micro\">\n                                    {item.text}\n                                  </stzh-text>\n                                </div>\n                              ))}\n                          </div>\n                          <div class=\"stzh-poi-teaser-image\">\n                            <stzh-ratio ratio={\"1:1\"}></stzh-ratio>\n                            <div class=\"stzh-poi-teaser-image-inner\">\n                              <img\n                                src={this.baseUrlOverride + item.image}\n                                alt={\"Foto von \" + item.poiname}\n                              />\n                            </div>\n                          </div>\n                        </div>\n                      ))}\n                    </div>\n                    <div class=\"stzh-geo-ref-data__teaser-load-more\">\n                      <stzh-button onStzhClick={() => this.loadMore()}>\n                        Weitere laden\n                      </stzh-button>\n                    </div>\n                  </Fragment>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-9c643610.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as a,a as i}from"./p-c7bfac7a.js";const e=':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{--color:var(--stzh-color-black);--background-color:transparent;--heading-background-color:transparent;--padding-left:var(--stzh-section-padding-left, 0px);--padding-right:var(--stzh-section-padding-right, 0px);--padding-top:var(--stzh-section-padding-top, var(--stzh-space-large));--padding-bottom:var(--stzh-section-padding-bottom, var(--stzh-space-large));--margin-top:var(--stzh-section-margin-top, 0px);--margin-bottom:var(--stzh-section-margin-bottom, 0px);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom)}@media screen and (min-width: 600px){:host{--padding-bottom:var(--stzh-section-padding-bottom, var(--stzh-space-xlarge))}}@media screen and (min-width: 1260px){:host{--padding-bottom:var(--stzh-section-padding-bottom, var(--stzh-space-xxxlarge))}}:host ::slotted(stzh-heading){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){:host ::slotted(stzh-heading){margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-heading){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 900px){:host ::slotted(stzh-heading){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-heading){margin-bottom:var(--stzh-space-large)}}:host(:where([breakout]:not([breakout="default"]))){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))}:host(:where([background]:not([background="default"]))){--padding-bottom:var(--stzh-section-background-padding-bottom, var(--stzh-space-xlarge));--margin-top:var(--stzh-section-background-margin-top, var(--stzh-space-medium));--margin-bottom:var(--stzh-section-background-margin-bottom, var(--stzh-space-medium))}@media screen and (min-width: 600px){:host(:where([background]:not([background="default"]))){--padding-bottom:var(--stzh-section-background-padding-bottom, var(--stzh-space-xxlarge))}}@media screen and (min-width: 1260px){:host(:where([background]:not([background="default"]))){--padding-bottom:var(--stzh-section-background-padding-bottom, var(--stzh-space-xxxxlarge));--margin-top:var(--stzh-section-background-margin-top, var(--stzh-space-xxlarge));--margin-bottom:var(--stzh-section-background-margin-bottom, var(--stzh-space-xxlarge))}}:host([background=secondary]){--background-color:var(--stzh-color-secondary20)}:host([background=primary]){--background-color:var(--stzh-color-primary70)}:host([variant=highlight]){--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--padding-top:var(--stzh-space-xlarge);--padding-bottom:var(--stzh-space-xlarge);--color:var(--stzh-section-highlight-color);--background-color:var(--stzh-section-highlight-background-color);--heading-background-color:var(--stzh-color-secondary40);--stzh-section-padding-top:0px;--stzh-section-padding-bottom:0px;--stzh-section-margin-top:0px;--stzh-section-margin-bottom:0px}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-left:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-bottom:var(--stzh-space-xxxlarge)}}:host([variant=contextbox]){--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:var(--stzh-space-medium);--padding-bottom:var(--stzh-space-medium);--color:var(--stzh-section-highlight-color);--background-color:var(--stzh-section-highlight-background-color);--heading-background-color:var(--stzh-color-secondary40);--stzh-section-padding-top:0px;--stzh-section-padding-bottom:0px;--stzh-section-margin-top:0px;--stzh-section-margin-bottom:0px}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-bottom:var(--stzh-space-xxlarge)}}:host([variant=contextbox]):last-child{margin-bottom:0}:host([variant=greybox]){--background-color:var(--stzh-color-grey10);--padding-left:var(--stzh-space-xxlarge);--padding-right:var(--stzh-space-xxlarge);--padding-top:var(--stzh-space-medium);--padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 900px){:host([variant=greybox]){--padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([variant=greybox]){--padding-left:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){:host([variant=greybox]){--padding-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([variant=greybox]){--padding-right:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){:host([variant=greybox]){--padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=greybox]){--padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=greybox]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=greybox]){--padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=greybox]){--padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=greybox]){--padding-bottom:var(--stzh-space-xxlarge)}}:host([variant=greybox]):last-child{margin-bottom:0}:host([variant=poimax]){--background-color:var(--stzh-color-grey10);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:var(--stzh-space-medium);--padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){:host([variant=poimax]){--padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=poimax]){--padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=poimax]){--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=poimax]){--padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=poimax]){--padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=poimax]){--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=poimax]){--padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=poimax]){--padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=poimax]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=poimax]){--padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=poimax]){--padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=poimax]){--padding-bottom:var(--stzh-space-xxlarge)}}:host([variant=poimax]):last-child{margin-bottom:0}:host([margin-top=none]){--margin-top:0px}:host([margin-bottom=none]){--margin-bottom:0px}:host([padding-bottom=none]){--padding-bottom:0px}.stzh-section{background-color:var(--background-color)}.stzh-section__heading{display:flex;flex-direction:column;background-color:var(--heading-background-color);padding-left:var(--padding-left);padding-right:var(--padding-right)}.stzh-section__wrapper{padding-left:var(--padding-left);padding-right:var(--padding-right);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);--stzh-base-color:var(--color)}.stzh-section--is-breakout .stzh-section__outer{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-section--is-breakout .stzh-section__outer{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-section--is-breakout .stzh-section__outer{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-section--is-breakout .stzh-section__outer{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-section--is-breakout .stzh-section__outer{margin-left:auto;margin-right:auto;max-width:84.25rem}}';const n=class{constructor(a){t(this,a);this.variant="default";this.background="default";this.marginTop="default";this.marginBottom="default";this.paddingTop="default";this.paddingBottom="default";this.breakout=false}render(){return a(i,null,a("section",{class:{"stzh-section":true,[`stzh-section--is-breakout`]:this.breakout,[`stzh-section--${this.variant}`]:!!this.variant,[`stzh-section--margin-bottom-${this.marginBottom}`]:!!this.marginBottom}},a("div",{class:"stzh-section__outer"},a("div",{class:"stzh-section__heading"},a("slot",{name:"heading"})),a("div",{class:"stzh-section__wrapper"},a("slot",null)))))}};n.style=e;export{n as stzh_section};
-//# sourceMappingURL=p-9c643610.entry.js.map

package/dist/stzh-components/p-9c643610.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhSectionCss","StzhSection","render","h","Host","class","this","breakout","variant","marginBottom","name"],"sources":["src/components/stzh-section/stzh-section.scss?tag=stzh-section&encapsulation=shadow","src/components/stzh-section/stzh-section.tsx"],"sourcesContent":["/**\n * @prop --color: Color of section\n * @prop --background-color: Background color of section\n * @prop --padding-left: Left padding of section\n * @prop --padding-right: Right padding of section\n * @prop --padding-top: Top padding of section\n * @prop --padding-bottom: Bottom padding section\n *\n * @prop --stzh-section-highlight-color: **Global**: Color of section when highlight variant is used\n * @prop --stzh-section-highlight-background-color: **Global**: Background color of section when highlight variant is used\n */\n\n:host {\n  --color: #{$colorBlack};\n  --background-color: transparent;\n  --heading-background-color: transparent;\n\n  --padding-left: var(--stzh-section-padding-left, 0px);\n  --padding-right: var(--stzh-section-padding-right, 0px);\n  --padding-top: var(--stzh-section-padding-top, #{spaceCurveValue('section-inner')});\n  --padding-bottom: var(--stzh-section-padding-bottom, #{spaceCurveValue('section-inner')});\n\n  --margin-top: var(--stzh-section-margin-top, 0px);\n  --margin-bottom: var(--stzh-section-margin-bottom, 0px);\n\n  @include mq($from: small) {\n    //--padding-top: var(--stzh-section-padding-top, #{spaceCurveValue('section-inner', 'small')});\n    --padding-bottom: var(--stzh-section-padding-bottom, #{spaceCurveValue('section-inner', 'small')});\n  }\n\n  @include mq($from: large) {\n    //--padding-top: var(--stzh-section-padding-top, #{spaceCurveValue('section-inner', 'large')});\n    --padding-bottom: var(--stzh-section-padding-bottom, #{spaceCurveValue('section-inner', 'large')});\n  }\n\n  margin-top: var(--margin-top);\n  margin-bottom: var(--margin-bottom);\n\n  ::slotted(stzh-heading) {\n    @include spaceCurve('margin-top', 'tiny');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n}\n\n/* Breakout */\n\n:host(:where([breakout]:not([breakout=\"default\"]))) {\n  position: relative;\n  left: 50%;\n  right: 50%;\n  margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n  margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n  width: calc(100vw - var(--stzh-scrollbar-width));\n  max-width: calc(100vw - var(--stzh-scrollbar-width));\n}\n\n/* Background variants */\n\n:host(:where([background]:not([background=\"default\"]))) {\n  //--padding-top: var(--stzh-section-background-padding-top, #{spaceCurveValue('background-section-inner')});\n  --padding-bottom: var(--stzh-section-background-padding-bottom, #{spaceCurveValue('background-section-inner')});\n\n  --margin-top: var(--stzh-section-background-margin-top, #{spaceCurveValue('background-section-outer')});\n  --margin-bottom: var(--stzh-section-background-margin-bottom, #{spaceCurveValue('background-section-outer')});\n\n  @include mq($from: small) {\n    //--padding-top: var(--stzh-section-background-padding-top, #{spaceCurveValue('background-section-inner', 'small')});\n    --padding-bottom: var(--stzh-section-background-padding-bottom, #{spaceCurveValue('background-section-inner', 'small')});\n  }\n\n  @include mq($from: large) {\n    //--padding-top: var(--stzh-section-background-padding-top, #{spaceCurveValue('background-section-inner', 'large')});\n    --padding-bottom: var(--stzh-section-background-padding-bottom, #{spaceCurveValue('background-section-inner', 'large')});\n\n    --margin-top: var(--stzh-section-background-margin-top, #{spaceCurveValue('background-section-outer', 'large')});\n    --margin-bottom: var(--stzh-section-background-margin-bottom, #{spaceCurveValue('background-section-outer', 'large')});\n  }\n}\n\n:host([background=\"secondary\"]) {\n  --background-color: #{$colorSecondary20};\n}\n\n:host([background=\"primary\"]) {\n  --background-color: #{$colorPrimary70};\n}\n\n/* Highlight variant */\n\n:host([variant=\"highlight\"]) {\n  @include spaceCurve('--padding-left', 'small');\n  @include spaceCurve('--padding-right', 'small');\n  @include spaceCurve('--padding-top', 'medium');\n  @include spaceCurve('--padding-bottom', 'medium');\n\n  --color: #{$sectionHighlightColor};\n  --background-color: #{$sectionHighlightBackgroundColor};\n  --heading-background-color: #{$colorSecondary40};\n\n  // disable nested section paddings and margins\n  --stzh-section-padding-top: 0px;\n  --stzh-section-padding-bottom: 0px;\n  --stzh-section-margin-top: 0px;\n  --stzh-section-margin-bottom: 0px;\n}\n\n/* Contextbox variant */\n\n:host([variant=\"contextbox\"]) {\n  @include spaceCurve('--padding-left', 'regular');\n  @include spaceCurve('--padding-right', 'regular');\n  @include spaceCurve('--padding-top', 'regular');\n  @include spaceCurve('--padding-bottom', 'regular');\n\n  --color: #{$sectionHighlightColor};\n  --background-color: #{$sectionHighlightBackgroundColor};\n  --heading-background-color: #{$colorSecondary40};\n\n  // disable nested section paddings and margins\n  --stzh-section-padding-top: 0px;\n  --stzh-section-padding-bottom: 0px;\n  --stzh-section-margin-top: 0px;\n  --stzh-section-margin-bottom: 0px;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n/* Greybox variant */\n\n:host([variant=\"greybox\"]) {\n  --background-color: #{$colorGrey10};\n  @include spaceCurve('--padding-left', 'large');\n  @include spaceCurve('--padding-right', 'large');\n  @include spaceCurve('--padding-top', 'regular');\n  @include spaceCurve('--padding-bottom', 'regular');\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n:host([variant=\"poimax\"]) {\n  --background-color: #{$colorGrey10};\n  @include spaceCurve('--padding-left', 'regular');\n  @include spaceCurve('--padding-right', 'regular');\n  @include spaceCurve('--padding-top', 'regular');\n  @include spaceCurve('--padding-bottom', 'regular');\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n/* Margin variants */\n\n:host([margin-top=\"none\"]) {\n  --margin-top: 0px;\n}\n\n:host([margin-bottom=\"none\"]) {\n  --margin-bottom: 0px;\n}\n\n/* Padding variants */\n\n:host([padding-top=\"none\"]) {\n  //--padding-top: 0px;\n}\n\n:host([padding-bottom=\"none\"]) {\n  --padding-bottom: 0px;\n}\n\n.stzh-section {\n  background-color: var(--background-color);\n\n  &__heading {\n    display: flex;\n    flex-direction: column;\n    background-color: var(--heading-background-color);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n  }\n\n  &__wrapper {\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n\n    --stzh-base-color: var(--color);\n  }\n\n  &--is-breakout &__outer {\n    @include container;\n  }\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n * @slot heading - Slot for `stzh-heading` element\n */\n@Component({\n  tag: \"stzh-section\",\n  styleUrl: \"stzh-section.scss\",\n  shadow: true,\n})\nexport class StzhSection {\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"highlight\" | \"contextbox\" | \"greybox\" | \"poimax\" = \"default\";\n\n  /** Background color */\n  @Prop({ reflect: true }) background: \"default\" | \"secondary\" = \"default\";\n\n  /** Margin top spacing */\n  @Prop({ reflect: true }) marginTop: \"default\" | \"none\" = \"default\";\n\n  /** Margin bottom spacing */\n  @Prop({ reflect: true }) marginBottom: \"default\" | \"none\" = \"default\";\n\n  /** Padding top spacing */\n  @Prop({ reflect: true }) paddingTop: \"default\" | \"none\" = \"default\";\n\n  /** Padding bottom spacing */\n  @Prop({ reflect: true }) paddingBottom: \"default\" | \"none\" = \"default\";\n\n  /** Whether to breakout container */\n  @Prop({ reflect: true }) breakout: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <section\n          class={{\n            \"stzh-section\": true,\n            [`stzh-section--is-breakout`]: this.breakout,\n            [`stzh-section--${this.variant}`]: !!this.variant,\n            [`stzh-section--margin-bottom-${this.marginBottom}`]: !!this.marginBottom,\n          }}\n        >\n          <div class=\"stzh-section__outer\">\n            <div class=\"stzh-section__heading\">\n              <slot name=\"heading\"></slot>\n            </div>\n            <div class=\"stzh-section__wrapper\">\n              <slot></slot>\n            </div>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAiB,qiV,MCWVC,EAAW,M,sCAE4E,U,gBAGnC,U,eAGN,U,kBAGG,U,gBAGF,U,mBAGG,U,cAGhB,K,CAE7C,MAAAC,GACE,OACEC,EAACC,EAAI,KACHD,EAAA,WACEE,MAAO,CACL,eAAgB,KAChB,CAAC,6BAA8BC,KAAKC,SACpC,CAAC,iBAAiBD,KAAKE,aAAcF,KAAKE,QAC1C,CAAC,+BAA+BF,KAAKG,kBAAmBH,KAAKG,eAG/DN,EAAA,OAAKE,MAAM,uBACTF,EAAA,OAAKE,MAAM,yBACTF,EAAA,QAAMO,KAAK,aAEbP,EAAA,OAAKE,MAAM,yBACTF,EAAA,gB"}