@oiz/stzh-components 4.0.0-beta3 → 4.0.1-beta

package/dist/stzh-components/p-705fb85c.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as o,h as s,a as e,g as i}from"./p-ef5985a3.js";import{o as r,f as h,s as p,a,c as n,b as c,A as l}from"./p-995d3227.js";import{c as d}from"./p-f48422c4.js";import{i as v}from"./p-24caf6c1.js";import{m as z,a as f,r as m}from"./p-f4adb3cd.js";import{w as b}from"./p-70ec7e79.js";import{s as u,a as g}from"./p-2c0bec3e.js";import"./p-dae15605.js";const _=".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,[stzh-hidden].sc-stzh-popover-h{display:none}.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);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;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);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);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;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-micro-font-size);line-height:var(--stzh-font-micro-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 w=_;const y=200;const x=300;const k=100;const j=200;function $(){const t=z("small").matches;return{keyframes:[{opacity:"0"},{opacity:"1"}],options:{duration:t?k:y,easing:"linear"}}}function O(){const t=z("small").matches;return{keyframes:[{opacity:"1"},{opacity:"0"}],options:{duration:t?j:x,easing:"linear"}}}function C(){const t=z("small").matches;return{keyframes:[{transform:t?"translateY(-8px)":"translateY(100%)"},{transform:"translateY(0px)"}],options:{duration:t?k:y,easing:"linear"}}}function Y(){const t=z("small").matches;return{keyframes:[{transform:"translateY(0px)"},{transform:t?"translateY(-8px)":"translateY(100%)"}],options:{duration:t?j:x,easing:"linear"}}}const A={ESC:27};const D="stzh-popover-open";let P=0;const T=class{constructor(s){t(this,s);this.stzhOpen=o(this,"stzhOpen",7);this.stzhOpened=o(this,"stzhOpened",7);this.stzhClose=o(this,"stzhClose",7);this.stzhClosed=o(this,"stzhClosed",7);this.initialTouchX=null;this.initialTouchY=null;this.mediaChangeHandler=()=>{const t=document.documentElement.style.getPropertyValue("--stzh-header-is-stuck");this.isHeaderStuckAndViewportMicro=!z("small").matches&&t==="1"&&this.hasStzhHeaderParent;if(this.open&&this.isBranchedOutToBody&&!this.isHeaderStuckAndViewportMicro){this.branchInFromBody()}};this.handleKeydown=t=>{if(t.keyCode===A.ESC){this.hide()}};this.onClickTrigger=()=>{this.toggle()};this.computePosition=async()=>{if(z("small").matches){const t=[r({mainAxis:this.distance,crossAxis:this.skidding}),h({padding:5}),p({padding:5})];if(this.variant==="tooltip"){t.push(a({element:this.arrowElement,padding:5}))}const{x:o=0,y:s=0,strategy:e="absolute",placement:i,middlewareData:c}=await n(this.triggerFirstElement,this.dialogElement,{strategy:this.strategy,placement:this.placement,middleware:t});this.computedPlacement=i;Object.assign(this.dialogElement.style,{position:e,left:`${o}px`,top:`${s}px`});if(this.variant==="tooltip"){Object.assign(this.arrowElement.style,{left:o!=null?`${c.arrow.x}px`:"",top:s!=null?`${c.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 o=t.changedTouches[0];this.initialTouchX=o.pageX;this.initialTouchY=o.pageY};this.handleTouchEnd=t=>{const o=t.changedTouches[0];const s=o.pageX-this.initialTouchX;const e=o.pageY-this.initialTouchY;const i=70;const r=Math.abs(e)>=i&&Math.abs(s)<=i;if(r){const o=t.target.closest(".stzh-dropdown")!==null;if(!o){this.hide()}}this.initialTouchY=null;this.initialTouchX=null};this.init=()=>{var t;let o=(t=this.triggerElement)===null||t===void 0?void 0:t.firstElementChild;if(!o){const t=Array.from(this.element.children).find((t=>!t.hasAttribute("slot")));o=t}if(o){this.triggerFirstElement=o;o.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 b(this.element,"stzhOpened")}async hide(){if(!this.open){return}this.toggledByMethod=true;this.open=false;await b(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 o=t.target!==this.dialogElement&&this.dialogElement.contains(t.target)===false;const s=t.target===this.triggerElement||this.triggerElement.contains(t.target);if(o&&!s){this.hide()}}async openWatcher(t){if(!this.dialogElement){return}if(t){if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-popover"})}const t=$();const o=C();await Promise.all([u(this.contentWrapperElement),u(this.contentElement),u(this.dialogElement)]);this.dialogElement.style.willChange="transform, opacity, position, top, left, bottom, right";this.contentWrapperElement.hidden=false;await Promise.all([g(z("small").matches?this.dialogElement:this.contentWrapperElement,t.keyframes,t.options),g(z("small").matches?this.dialogElement:this.contentElement,o.keyframes,o.options)]);if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-popover"})}}else{if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-popover"})}const t=O();const o=Y();await Promise.all([u(this.contentWrapperElement),u(this.contentElement),u(this.dialogElement)]);await Promise.all([g(z("small").matches?this.dialogElement:this.contentWrapperElement,t.keyframes,t.options),g(z("small").matches?this.dialogElement:this.contentElement,o.keyframes,o.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}getChildIndex(t){let o=t.parentNode;let s=Array.prototype.indexOf.call(o.children,t);return s}insertElementAtIndex(t,o,s){let e=t.children[s];if(e){t.insertBefore(o,e)}else{t.appendChild(o)}}branchOutToBody(){this.elementIndexOnBranchout=this.getChildIndex(this.element);document.body.append(this.element);this.insertElementAtIndex(this.initialParentNode,this.triggerElement,this.elementIndexOnBranchout);this.isBranchedOutToBody=true}branchInFromBody(){this.insertElementAtIndex(this.initialParentNode,this.element,this.elementIndexOnBranchout);this.rootElement.prepend(this.triggerElement);this.isBranchedOutToBody=false}async componentWillLoad(){this.id=`stzh-popover-${P++}`;this.initialParentNode=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=v(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=v(this.triggerFirstElement);this.triggerFirstElement.setAttribute(t?"a11y-expanded":"aria-expanded","false");if(this.trap){this.trap.deactivate()}}componentDidRender(){this.mediaChangeHandler();const t=v(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=c(this.triggerFirstElement,this.dialogElement,this.computePosition)}initializeFocusTrap(){this.trap=d(this.dialogElement,{fallbackFocus:this.dialogElement,clickOutsideDeactivates:true,returnFocusOnDeactivate:true})}componentDidLoad(){this.contentWrapperElement.hidden=!this.open;this.open?this.popoverShown():this.popoverHidden()}connectedCallback(){f(this.mediaChangeHandler);this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){m(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(e,{key:"8521cbb22aed7c2385cd56b0386af2d154ef209d"},s("div",{key:"f2186f3289a6030404ccb2d8adaa7c74e20fe5e0",class:t,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd,ref:t=>this.rootElement=t},s("div",{key:"928b8693f754d85f04c174de91166314efe2ae94",ref:t=>this.triggerElement=t,class:"stzh-popover__trigger"},s("slot",{key:"f795c3f2dc1233afc6f7d0ccbd84bcad76e5f627"})),s("div",{key:"ccc30bacc84f5b19a9e89b8bb291a1aeee0ce4be",class:"stzh-popover__vhidden",id:`${this.id}-trigger-description`},this.localization.open),s("div",{key:"f287c75c0358456aea7319e4115a4f24bd384c37",ref:t=>this.contentWrapperElement=t,class:"stzh-popover__content-wrapper"},s("div",{key:"0b0b8f21d12b675beadf05e40bb65c7564833546",class:"stzh-popover__backdrop"}),s("div",{key:"70a0af4dbaf5b48449ccfa10a5fa1fb436504fcd",ref:t=>this.contentElement=t,class:"stzh-popover__content"},s("div",{key:"9b675ab1d911a0f203137333e6eec740d3a0ef82",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",{key:"7f789b76d453ae3324235dbd714531d119682c9d",class:"stzh-popover__arrow",ref:t=>this.arrowElement=t,innerHTML:l}),s("div",{key:"d9432f76db2c121d6f1a7f562dcb54f4561f7136",class:"stzh-popover__content-inner"},s("div",{key:"c637b3e086b073ab6d1b12fa632f86e194c122fa",class:"stzh-popover__label-wrapper"},s("h2",{key:"8da3651d1d65eb0ad55e1a87e7c30257ae23f318",id:`${this.id}-label`,class:"stzh-popover__label"},this.label?this.label:s("slot",{name:"label"})),s("button",{key:"4e2018d368a55a60d762926ed79f1bc818cb5986",class:"stzh-popover__close",onClick:()=>this.hide(),type:"button"},s("stzh-icon",{key:"90adb94dfdbb63f357d75e8794a12e2549f7e207",name:"close",class:"stzh-popover__icon"}),s("span",{key:"5ae8f9036cbf23428da44df276762c5282fda369",class:"stzh-popover__vhidden"},this.localization.close))),s("div",{key:"fb84f4177cbc6bbce634d39da5528949e2b05332",class:"stzh-popover__content-slot-wrapper"},s("div",{key:"d7073d5a72f4254722154153422362c367b90591",class:"stzh-popover__content-slot"},s("slot",{key:"a5539e9a5106d708078b5dc13ba5604ba7a29e80",name:"content"})),s("div",{key:"ed7bc7e70587b4bfb10688be740cb00d4c4be0ea",class:"stzh-popover__action-slot"},s("slot",{key:"11b4d0d83d19a6906dcefaa3c56281af7b2d0bea",name:"action"})))))))))}get element(){return i(this)}static get watchers(){return{open:["openWatcher"],distance:["distanceWatcher"]}}};T.style=w;export{T as stzh_popover};
+//# sourceMappingURL=p-705fb85c.entry.js.map

package/dist/stzh-components/{p-e0743aaf.entry.js.map → p-705fb85c.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stzhPopoverCss","StzhPopoverStyle0","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","getChildIndex","parentNode","index","prototype","indexOf","call","insertElementAtIndex","newElement","referenceNode","insertBefore","appendChild","elementIndexOnBranchout","body","append","initialParentNode","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","key","class","onTouchStart","onTouchEnd","ref","el","role","tabindex","onKeyDown","innerHTML","Arrow","name","onClick","type","close"],"sources":["src/components/stzh-popover/stzh-popover.scss?tag=stzh-popover&encapsulation=scoped","src/components/stzh-popover/stzh-popover.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 initialParentNode: Node;\n  private elementIndexOnBranchout: number;\n\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 getChildIndex(element) {\n    let parent = element.parentNode;\n\n    // Convert child nodes to an array and find the index of the element\n    let index = Array.prototype.indexOf.call(parent.children, element);\n\n    return index;\n  }\n\n  private insertElementAtIndex(parent, newElement, index) {\n    // Get the child element at the specified index\n    let referenceNode = parent.children[index];\n\n    // If referenceNode is null (meaning the index is out of range or at the end), append the new element\n    if (referenceNode) {\n        parent.insertBefore(newElement, referenceNode);\n    } else {\n        parent.appendChild(newElement);\n    }\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    this.elementIndexOnBranchout = this.getChildIndex(this.element);\n    document.body.append(this.element);\n    this.insertElementAtIndex(this.initialParentNode, this.triggerElement, this.elementIndexOnBranchout);\n    this.isBranchedOutToBody = true;\n  }\n\n  private branchInFromBody() {\n    this.insertElementAtIndex(this.initialParentNode, this.element, this.elementIndexOnBranchout);\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.initialParentNode = 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"],"mappings":"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"}
+{"version":3,"names":["stzhPopoverCss","StzhPopoverStyle0","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","getChildIndex","parentNode","index","prototype","indexOf","call","insertElementAtIndex","newElement","referenceNode","insertBefore","appendChild","elementIndexOnBranchout","body","append","initialParentNode","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","key","class","onTouchStart","onTouchEnd","ref","el","role","tabindex","onKeyDown","innerHTML","Arrow","name","onClick","type","close"],"sources":["src/components/stzh-popover/stzh-popover.scss?tag=stzh-popover&encapsulation=scoped","src/components/stzh-popover/stzh-popover.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 initialParentNode: Node;\n  private elementIndexOnBranchout: number;\n\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 getChildIndex(element) {\n    let parent = element.parentNode;\n\n    // Convert child nodes to an array and find the index of the element\n    let index = Array.prototype.indexOf.call(parent.children, element);\n\n    return index;\n  }\n\n  private insertElementAtIndex(parent, newElement, index) {\n    // Get the child element at the specified index\n    let referenceNode = parent.children[index];\n\n    // If referenceNode is null (meaning the index is out of range or at the end), append the new element\n    if (referenceNode) {\n        parent.insertBefore(newElement, referenceNode);\n    } else {\n        parent.appendChild(newElement);\n    }\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    this.elementIndexOnBranchout = this.getChildIndex(this.element);\n    document.body.append(this.element);\n    this.insertElementAtIndex(this.initialParentNode, this.triggerElement, this.elementIndexOnBranchout);\n    this.isBranchedOutToBody = true;\n  }\n\n  private branchInFromBody() {\n    this.insertElementAtIndex(this.initialParentNode, this.element, this.elementIndexOnBranchout);\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.initialParentNode = 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"],"mappings":"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"}

package/dist/stzh-components/{p-da065baa.entry.js → p-7467c517.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as e,a as s,g as h}from"./p-ef5985a3.js";const o=".sc-stzh-timepicker-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-timepicker-h,[stzh-hidden].sc-stzh-timepicker-h{display:none}.sc-stzh-timepicker-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-timepicker-h *.sc-stzh-timepicker,.sc-stzh-timepicker-h *.sc-stzh-timepicker::before,.sc-stzh-timepicker-h *.sc-stzh-timepicker::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-timepicker-h .has-focus.sc-stzh-timepicker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-timepicker-h .stzh-fylingfocus-focused.sc-stzh-timepicker{outline-style:none !important}.sc-stzh-timepicker-h .stzh-fylingfocus-focused.sc-stzh-timepicker::-moz-focus-inner{border:0 !important}.sc-stzh-timepicker-h{width:100%}.stzh-timepicker__dropdown.sc-stzh-timepicker{--icon-angle-size:var(--stzh-icon-size-small);--active-icon-angle-transform:rotate(0deg) translateY(-50%)}";const r=o;const n=class{constructor(e){t(this,e);this.stzhChange=i(this,"stzhChange",7);this.onRootFocus=()=>{if(this.input){this.input.focus()}};this.onDropdownChange=t=>{this.value=Array.isArray(t.detail.value)?t.detail.value[0]:t.detail.value;this.stzhChange.emit({component:"stzh-timepicker",value:this.value})};this.open=false;this.min=0;this.max=1439;this.step=15;this.name="";this.value="";this.popoverPlacement="bottom";this.label="";this.readonly=false;this.disabled=false;this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.invalid=false;this.required=false;this.hideOptional=false;this.size="default";this.a11yDescribedby="";this.localization=undefined}minMaxWatcher(){if(this.min<0||this.max<0){throw new Error(`"min/max" property can not be lower than 0 (00:00): dropdown name "${this.name}"`)}if(this.min>1440||this.max>1440){throw new Error(`"min/max" property can not be higher than 1440 (24h * 60, 24:00): dropdown name "${this.name}"`)}if(this.min>this.max){throw new Error(`"min" property (${this.min}) can not be higher than "max" property (${this.max}): dropdown name "${this.name}"`)}this.updateDropdownOptions()}updateDropdownOptions(){const t=[];for(let i=this.min;i<=this.max;i=i+this.step){let e=Math.floor(i/60);let s=i%60;let h=("00"+e).slice(-2);let o=("00"+s).slice(-2);let r=`${h}.${o}`;t.push({text:r,value:r})}this._dropdownOptions=t}async componentWillLoad(){this.minMaxWatcher();if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"timepicker")}}render(){const t={"stzh-timepicker":true};return e(s,{key:"320b994b9166354a51ebba4de7049a8f8f222691",tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},e("div",{key:"3a6fd2ecb51ac586d7a7966163e9c5270501a12f",class:t},e("stzh-dropdown",{key:"c7cf0e9c396b280401833325f6bd1ea75d8c945e",open:this.open,class:"stzh-timepicker__dropdown",iconAngle:"clock",label:this.label,ref:t=>this.input=t,onStzhChange:this.onDropdownChange,options:this._dropdownOptions,items:[this.value],required:this.required,disabled:this.disabled,description:this.description,descriptionLong:this.descriptionLong,error:this.error,popoverPlacement:this.popoverPlacement,a11yDescribedby:this.a11yDescribedby,name:this.name,size:this.size,invalid:this.invalid,hideOptional:this.hideOptional})))}get element(){return h(this)}static get watchers(){return{min:["minMaxWatcher"],max:["minMaxWatcher"]}}};n.style=r;export{n as stzh_timepicker};
-//# sourceMappingURL=p-da065baa.entry.js.map
+import{r as t,c as i,h as e,a as s,g as h}from"./p-ef5985a3.js";const o=".sc-stzh-timepicker-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-timepicker-h,[stzh-hidden].sc-stzh-timepicker-h{display:none}.sc-stzh-timepicker-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-timepicker-h *.sc-stzh-timepicker,.sc-stzh-timepicker-h *.sc-stzh-timepicker::before,.sc-stzh-timepicker-h *.sc-stzh-timepicker::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-timepicker-h .has-focus.sc-stzh-timepicker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-timepicker-h .stzh-fylingfocus-focused.sc-stzh-timepicker{outline-style:none !important}.sc-stzh-timepicker-h .stzh-fylingfocus-focused.sc-stzh-timepicker::-moz-focus-inner{border:0 !important}.sc-stzh-timepicker-h{width:100%}.stzh-timepicker__dropdown.sc-stzh-timepicker{--icon-angle-size:var(--stzh-icon-size-small);--active-icon-angle-transform:rotate(0deg) translateY(-50%)}";const r=o;const n=class{constructor(e){t(this,e);this.stzhChange=i(this,"stzhChange",7);this.onRootFocus=()=>{if(this.input){this.input.focus()}};this.onDropdownChange=t=>{this.value=Array.isArray(t.detail.value)?t.detail.value[0]:t.detail.value;this.stzhChange.emit({component:"stzh-timepicker",value:this.value})};this.open=false;this.min=0;this.max=1439;this.step=15;this.name="";this.value="";this.popoverPlacement="bottom";this.label="";this.readonly=false;this.disabled=false;this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.invalid=false;this.required=false;this.hideOptional=false;this.size="default";this.a11yDescribedby="";this.localization=undefined}minMaxWatcher(){if(this.min<0||this.max<0){throw new Error(`"min/max" property can not be lower than 0 (00:00): dropdown name "${this.name}"`)}if(this.min>1440||this.max>1440){throw new Error(`"min/max" property can not be higher than 1440 (24h * 60, 24:00): dropdown name "${this.name}"`)}if(this.min>this.max){throw new Error(`"min" property (${this.min}) can not be higher than "max" property (${this.max}): dropdown name "${this.name}"`)}this.updateDropdownOptions()}updateDropdownOptions(){const t=[];for(let i=this.min;i<=this.max;i=i+this.step){let e=Math.floor(i/60);let s=i%60;let h=("00"+e).slice(-2);let o=("00"+s).slice(-2);let r=`${h}.${o}`;t.push({text:r,value:r})}this._dropdownOptions=t}async componentWillLoad(){this.minMaxWatcher();if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"timepicker")}}render(){const t={"stzh-timepicker":true};return e(s,{key:"10abbb98d9f066a32720142c64454ae30bbb940b",tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},e("div",{key:"a5c3a9eb284e4aadcdb94bef2032cef866f5144f",class:t},e("stzh-dropdown",{key:"3e336f525c188943bb497fd829896881444a734f",open:this.open,class:"stzh-timepicker__dropdown",iconAngle:"clock",label:this.label,ref:t=>this.input=t,onStzhChange:this.onDropdownChange,options:this._dropdownOptions,items:[this.value],required:this.required,disabled:this.disabled,description:this.description,descriptionLong:this.descriptionLong,error:this.error,popoverPlacement:this.popoverPlacement,a11yDescribedby:this.a11yDescribedby,name:this.name,size:this.size,invalid:this.invalid,hideOptional:this.hideOptional})))}get element(){return h(this)}static get watchers(){return{min:["minMaxWatcher"],max:["minMaxWatcher"]}}};n.style=r;export{n as stzh_timepicker};
+//# sourceMappingURL=p-7467c517.entry.js.map