@oiz/stzh-components 3.1.0 → 3.2.0-beta1

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

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,a as o,g as n,F as s}from"./p-c7bfac7a.js";import{w as a}from"./p-54bd842e.js";import{s as r,a as h,b as c}from"./p-7e2354d0.js";import{h as d}from"./p-e30a5acc.js";import"./p-9b063923.js";const l=":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--stzh-section-padding-top:0px;--stzh-section-padding-bottom:0px;--stzh-section-margin-top:0px;--stzh-section-margin-bottom:0px;--margin-left:inherit;--margin-right:inherit}.stzh-accordion{display:grid;gap:var(--stzh-space-xsmall);margin-left:var(--margin-left);margin-right:var(--margin-left);}.stzh-accordion__heading{margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-accordion__heading{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-accordion__heading{margin-bottom:var(--stzh-space-large)}}.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-medium) * -1);margin-right:calc(var(--stzh-space-medium) * -1)}@media screen and (min-width: 600px){.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-large) * -1)}}@media screen and (min-width: 900px){.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-xlarge) * -1)}}@media screen and (min-width: 1260px){.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-xxlarge) * -1)}}@media screen and (min-width: 600px){.stzh-accordion--is-nested{margin-right:calc(var(--stzh-space-large) * -1)}}@media screen and (min-width: 900px){.stzh-accordion--is-nested{margin-right:calc(var(--stzh-space-xlarge) * -1)}}@media screen and (min-width: 1260px){.stzh-accordion--is-nested{margin-right:calc(var(--stzh-space-xxlarge) * -1)}}";const m=class{constructor(e){t(this,e);this.stzhVariantChange=i(this,"stzhVariantChange",7);this.variant="default";this.heading="";this.collapsible=true;this.multiselectable=true;this.isNested=undefined}variantWatcher(t){this.stzhVariantChange.emit({component:"stzh-accordion",value:t})}openListener(t){const i=t.target;const e=i.closest("stzh-accordion");if(this.multiselectable||t.detail&&t.detail.component!=="stzh-accordion-item"||e!==this.element){return}const o=Array.from(e.querySelectorAll("stzh-accordion-item"));o.forEach((t=>{if(t!==i){t.hide()}}))}async setItemFocus(t,i){const e=t.closest("stzh-accordion");if(e!==this.element){return}const o=Array.from(e.querySelectorAll(":scope > stzh-accordion-item")).filter((t=>!t.disabled));const n=o.indexOf(t);if((i==="prev"||i==="next")&&n===null){i=i==="prev"?"last":"first"}if(i==="prev"&&n===0){i="last"}if(i==="next"&&n===o.length-1){i="first"}if(i==="prev"){o[n-1].focus()}else if(i==="next"){o[n+1].focus()}else if(i==="last"){o[o.length-1].focus()}else if(i==="first"){o[0].focus()}else{t.focus()}}checkIfNested(){let t=this.element.parentElement;while(t){if(t.tagName.toLowerCase()==="stzh-accordion"){this.isNested=true;break}t=t.parentElement}}componentDidLoad(){this.checkIfNested()}render(){const t={"stzh-accordion":true,"stzh-accordion--is-nested":this.isNested};return e(o,null,e("div",{class:t},this.heading&&e("div",{class:"stzh-accordion__heading"},e("stzh-heading",{level:"2"},this.heading)),e("slot",null)))}get element(){return n(this)}static get watchers(){return{variant:["variantWatcher"]}}};m.style=l;const z=':host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--trigger-size:1.125rem;--trigger-color:currentColor;--content-background:var(--stzh-accordion-content-background);--icon-size:var(--stzh-icon-size);--button-color:var(--stzh-color-primary70);--button-background-color:var(--stzh-color-secondary30);--hover-button-color:var(--button-color);--hover-button-background-color:var(--stzh-color-secondary40);--hover-trigger-color:var(--trigger-color)}@media print{:host{page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid}}@media (forced-colors: active), (-ms-high-contrast: active){:host{--trigger-color:CanvasText;--hover-trigger-color:CanvasText}}:host(:where([is-variant="table"])){--trigger-size:var(--stzh-icon-size);--content-background:var(--stzh-color-grey10);--button-background-color:var(--stzh-color-grey20);--trigger-color:var(--stzh-color-black);--hover-button-background-color:var(--stzh-color-grey30)}@media (forced-colors: active), (-ms-high-contrast: active){:host(:where([is-variant="table"])){--trigger-color:CanvasText;--hover-trigger-color:CanvasText}}:host(:where([disabled]:not([disabled="false"]))){--button-color:var(--stzh-color-grey80);--button-background-color:var(--stzh-color-grey20);--trigger-color:var(--stzh-color-grey80);--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--hover-trigger-color:var(--trigger-color)}.stzh-accordion-item{}.stzh-accordion-item__heading{position:relative;margin:0}.stzh-accordion-item__button{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);font-family:inherit;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;align-items:center;min-height:3.75rem;color:var(--button-color);background-color:var(--button-background-color);text-align:left;border:none;transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed);cursor:pointer}@media screen and (min-width: 900px){.stzh-accordion-item__button{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-accordion-item__button{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-accordion-item__button{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__button{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-accordion-item__button{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-accordion-item__button{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__button{padding-bottom:var(--stzh-space-xxlarge)}}@media (prefers-reduced-motion: reduce){.stzh-accordion-item__button{transition:none}}.stzh-accordion-item__button:hover{color:var(--hover-button-color);background-color:var(--hover-button-background-color)}.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-right:var(--stzh-space-xxlarge)}}.stzh-accordion-item__button-text{flex-grow:1}.stzh-accordion-item__button-icon.is-default{position:relative;display:block;width:var(--trigger-size);height:var(--trigger-size);margin-left:var(--stzh-space-medium)}.stzh-accordion-item__button-icon.is-default::before,.stzh-accordion-item__button-icon.is-default::after{position:absolute;top:50%;left:50%;content:"";display:block;width:var(--trigger-size);height:0.15625rem;transition-property:transform, background-color;transition-duration:500ms;transform-origin:top left;background-color:var(--trigger-color)}@media (prefers-reduced-motion: reduce){.stzh-accordion-item__button-icon.is-default::before,.stzh-accordion-item__button-icon.is-default::after{transition:none}}.stzh-accordion-item__button-icon.is-default::before{transform:rotate(180deg) translate(-50%, -50%)}.stzh-accordion-item__button-icon.is-default::after{transform:rotate(90deg) translate(-50%, -50%)}.stzh-accordion-item__button-icon.is-table{--size:var(--trigger-size);transition-property:transform, color;transition-duration:500ms;color:var(--trigger-color)}@media (prefers-reduced-motion: reduce){.stzh-accordion-item__button-icon.is-table{transition:none}}.stzh-accordion-item__button:hover .stzh-accordion-item__button-icon.is-default::before,.stzh-accordion-item__button:hover .stzh-accordion-item__button-icon.is-default::after{background-color:var(--hover-trigger-color)}.stzh-accordion-item__button:hover .stzh-accordion-item__button-icon.is-table{color:var(--hover-trigger-color)}.stzh-accordion-item__content{overflow:hidden;background-color:var(--content-background)}@media print{.stzh-accordion-item__content{height:auto !important;overflow:visible !important;display:block !important}}.stzh-accordion-item__content-inner{padding-top:var(--stzh-space-xlarge);padding-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-accordion-item__content-inner{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__content-inner{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-accordion-item__icon-wrapper{--stzh-icon-size:var(--icon-size);align-self:flex-start}.stzh-accordion-item__badge{position:absolute;right:-0.3125rem;top:-0.3125rem}.stzh-accordion-item__description{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 900px){.stzh-accordion-item__description{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-accordion-item__heading-text,.stzh-accordion-item__description,.stzh-accordion-item__subtitle{display:block}.stzh-accordion-item__subtitle{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height))}@media screen and (min-width: 900px){.stzh-accordion-item__subtitle{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.stzh-accordion-item--has-icon .stzh-accordion-item__icon-wrapper{margin-right:var(--stzh-space-xsmall)}.stzh-accordion-item--title .stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__heading-text{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-accordion-item--title .stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__heading-text{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 900px){.stzh-accordion-item--title .stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__heading-text{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-accordion-item--title .stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__heading-text{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.stzh-accordion-item--title .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text{margin-top:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-accordion-item--title .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text{margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-accordion-item--title .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 900px){.stzh-accordion-item--title .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text{margin-top:var(--stzh-space-xsmall)}}.stzh-accordion-item--is-open .stzh-accordion-item__button-icon.is-default::before,.stzh-accordion-item--is-open .stzh-accordion-item__button-icon.is-default::after{transform:rotate(0) translate(-50%, -50%)}.stzh-accordion-item--is-open .stzh-accordion-item__button-icon.is-table{transform:rotate(180deg)}.stzh-accordion-item--table .stzh-accordion-item__button,.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}.stzh-accordion-item__button{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);min-height:3.5rem}.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 600px){.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-accordion-item--table .stzh-accordion-item__heading-text{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-accordion-item--is-disabled .stzh-accordion-item__button{cursor:not-allowed}';const g={keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:300,easing:"linear"}};const p={keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:300,easing:"linear"}};let f=0;const u=class{constructor(e){t(this,e);this.stzhOpen=i(this,"stzhOpen",7);this.stzhOpened=i(this,"stzhOpened",7);this.stzhClose=i(this,"stzhClose",7);this.stzhClosed=i(this,"stzhClosed",7);this.stzhFocus=i(this,"stzhFocus",7);this.stzhBlur=i(this,"stzhBlur",7);this.toggledByMethod=false;this.focusedByInput=false;this.shiftPressed=false;this.handleVariantChange=t=>{this.variantWatcher(this.variant)};this.handleHeaderClick=()=>{if(typeof this.collapsible!=="undefined"){if(this.collapsible){this.toggle()}else if(!this.open){this.show()}}else if(!this.accordion||this.accordion.collapsible){this.toggle()}else if(!this.open){this.show()}};this.onRootFocus=()=>{if(!this.focusedByInput){this.buttonElement.focus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;if(this.shiftPressed){this.rootTabindex=-1}this.stzhFocus.emit({component:"stzh-accordion-item",originalEvent:t})};this.onBlur=t=>{this.rootTabindex=0;this.stzhBlur.emit({component:"stzh-accordion-item",originalEvent:t})};this.onButtonKeydown=t=>{let i=null;if(t.key==="ArrowDown"){i="next"}else if(t.key==="ArrowUp"){i="prev"}else if(t.key==="Home"){i="first"}else if(t.key==="End"){i="last"}else if(t.key==="PageDown"&&t.ctrlKey){i="next"}else if(t.key==="PageUp"&&t.ctrlKey){i="prev"}if(t.key==="Shift"){this.rootTabindex=-1}if(i){t.preventDefault();this.accordion.setItemFocus(this.element,i)}};this.onContentKeydown=t=>{if(!t.ctrlKey){return}let i=null;if(t.key==="PageDown"){i="next"}else if(t.key==="PageUp"){i="prev"}if(i){t.preventDefault();this.accordion.setItemFocus(this.element,i)}};this.variant=undefined;this.collapsible=undefined;this.open=false;this.disabled=false;this.heading="";this.subtitle="";this.description="";this.icon="";this.badge="";this.badgeEmpty=false;this.badgeType="default";this.headingLevel="3";this.analyticsId=undefined;this.rootTabindex=0;this._variant=undefined}variantWatcher(t){if(typeof t!=="undefined"){this._variant=t}else if(this.accordion){this._variant=this.accordion.variant}}async openWatcher(t){if(!this.bodyElement){return}if(t){if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-accordion-item"})}await r(this.bodyElement);this.bodyElement.hidden=false;await h(this.bodyElement,c(g.keyframes,{height:this.bodyElement.scrollHeight}),g.options);this.bodyElement.style.height="auto";this.bodyElement.style.overflow="visible";if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-accordion-item"})}}else{if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-accordion-item"})}await r(this.bodyElement);this.bodyElement.style.overflow="hidden";await h(this.bodyElement,c(p.keyframes,{height:this.bodyElement.scrollHeight}),p.options);this.bodyElement.hidden=true;this.bodyElement.style.height="0px";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-accordion-item"})}}this.toggledByMethod=false}async show(){if(this.open||this.disabled){return}this.toggledByMethod=true;this.open=true;return a(this.element,"stzhOpened")}async hide(){if(!this.open||this.disabled){return}this.toggledByMethod=true;this.open=false;return a(this.element,"stzhClosed")}async toggle(){if(this.open){return await this.hide()}else{return await this.show()}}handleKeydown(t){if(t.key==="Shift"){this.shiftPressed=true}}handleKeyup(t){if(t.key==="Shift"){this.shiftPressed=false}}componentWillLoad(){this.accordionItemId=`stzh-accordion-item-${f++}`}componentDidLoad(){this.bodyElement.hidden=!this.open;this.bodyElement.style.height=this.open?"auto":"0px";this.bodyElement.style.overflow=this.open?"visible":"hidden"}async connectedCallback(){this.accordion=this.element.closest("stzh-accordion");if(this.accordion){this.accordion.addEventListener("stzhVariantChange",this.handleVariantChange)}this.variantWatcher(this.variant)}disconnectedCallback(){if(this.accordion){this.accordion.removeEventListener("stzhVariantChange",this.handleVariantChange);this.accordion=null}}render(){const t=d(this.element,"icon")||!!this.icon;const i=`h${this.headingLevel}`;const n={"stzh-accordion-item":true,"stzh-accordion-item--has-icon":t,"stzh-accordion-item--has-description":!!this.description,"stzh-accordion-item--has-subtitle":!!this.subtitle,"stzh-accordion-item--is-open":this.open,"stzh-accordion-item--is-disabled":this.disabled,[`stzh-accordion-item--${this._variant}`]:!!this._variant};return e(o,{tabindex:this.disabled?null:this.rootTabindex,onFocus:this.onRootFocus,"is-variant":this._variant},e("div",{class:n},e(i,{id:`${this.accordionItemId}-header`,class:"stzh-accordion-item__heading",onClick:this.handleHeaderClick},e("button",{ref:t=>this.buttonElement=t,class:"stzh-accordion-item__button","aria-controls":`${this.accordionItemId}-content`,"aria-expanded":`${this.open?"true":"false"}`,disabled:this.disabled,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onButtonKeydown,type:"button","s-object-id":this.analyticsId||this.heading},e("span",{class:"stzh-accordion-item__icon-wrapper"},this.icon?e("stzh-icon",{class:"stzh-accordion-item__icon",name:this.icon}):e("slot",{name:"icon"})),e("span",{class:"stzh-accordion-item__button-text"},e("span",{class:"stzh-accordion-item__subtitle"},this.subtitle),e("span",{class:"stzh-accordion-item__heading-text"},this.heading),e("span",{class:"stzh-accordion-item__description"},this.description)),this._variant==="table"?e("stzh-icon",{name:"angle-down",class:"stzh-accordion-item__button-icon is-table"}):e("span",{class:"stzh-accordion-item__button-icon is-default"}),(this.badge||this.badgeEmpty)&&e("stzh-badge",{class:"stzh-accordion-item__badge",label:this.badge,type:this.badgeType}))),e("div",{id:`${this.accordionItemId}-content`,ref:t=>this.bodyElement=t,class:"stzh-accordion-item__content","aria-labelledby":`${this.accordionItemId}-header`,role:"region",onKeyDown:this.onContentKeydown},e("div",{class:"stzh-accordion-item__content-inner"},e("slot",null)))))}get element(){return n(this)}static get watchers(){return{variant:["variantWatcher"],open:["openWatcher"]}}};u.style=z;const v=".sc-stzh-pagination-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-pagination-h{display:none}.sc-stzh-pagination-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagination-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagination-h *.sc-stzh-pagination,.sc-stzh-pagination-h *.sc-stzh-pagination::before,.sc-stzh-pagination-h *.sc-stzh-pagination::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-pagination-h .has-focus.sc-stzh-pagination{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pagination-h .stzh-fylingfocus-focused.sc-stzh-pagination{outline-style:none !important}.sc-stzh-pagination-h .stzh-fylingfocus-focused.sc-stzh-pagination::-moz-focus-inner{border:0 !important}.sc-stzh-pagination-h{--justify-content:inherit;--padding-left:calc(var(--stzh-form-input-height) + var(--stzh-space-medium))}[width=full].sc-stzh-pagination-h{--justify-content:space-between;--padding-left:0}.stzh-pagination.sc-stzh-pagination{position:relative;display:flex;align-items:center;gap:var(--stzh-space-medium);padding-left:var(--padding-left);justify-content:var(--justify-content)}.stzh-pagination__input.sc-stzh-pagination{--text-align:center;--input-width:var(--stzh-form-input-height);--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;position:absolute;top:0;left:0}.stzh-pagination__total.sc-stzh-pagination{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);color:var(--stzh-color-grey70)}.stzh-pagination--size-small.sc-stzh-pagination{padding-left:calc(var(--stzh-form-input-small-height) + var(--stzh-space-medium))}.stzh-pagination--size-small.sc-stzh-pagination .stzh-pagination__input.sc-stzh-pagination{--input-width:var(--stzh-form-input-small-height)}";const b=class{constructor(e){t(this,e);this.stzhChange=i(this,"stzhChange",7);this.gotoPage=t=>{const i=this.value;if(t>=1&&t<=this.total){this.value=t}else if(t>this.total){this.value=this.total}else{this.value=1}if(i!==this.value){this.stzhChange.emit({component:"stzh-pagination",page:Number(this.value)})}};this.onRootFocus=()=>{if(this.input){this.input.focus()}};this.onInputChange=t=>{const i=Number(t.detail.value)||1;this.gotoPage(i)};this.total=1;this.name="";this.value=1;this.label="";this.labelHidden=false;this.readonly=false;this.disabled=false;this.allowManualInput=true;this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.invalid=false;this.required=false;this.size="default";this.width="default";this.a11yDescribedby="";this.localization=undefined}async prev(){this.gotoPage(this.value-1)}async next(){this.gotoPage(this.value+1)}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"pagination")}}render(){var t;const i={"stzh-pagination":true,[`stzh-pagination--size-${this.size}`]:!!this.size};return e(o,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus,width:this.width},e("div",{class:i},this.allowManualInput?e(s,null,e("stzh-input",{class:"stzh-pagination__input",type:"number",min:1,max:this.total,label:this.label||this.localization.label,labelHidden:true,ref:t=>this.input=t,onStzhChange:this.onInputChange,value:((t=this.value)===null||t===void 0?void 0:t.toString())||"",required:this.required,disabled:this.disabled,description:this.description,descriptionLong:this.descriptionLong,error:this.error,a11yDescribedby:this.a11yDescribedby,name:this.name,size:this.size,invalid:this.invalid,hideOptional:true,noAutocomplete:true}),e("div",{class:"stzh-pagination__total"},this.localization.totalLabel.replace(/\{total\}/gi,this.total.toString()))):e("div",{class:"stzh-pagination__total"},this.value," ",this.localization.totalLabel.replace(/\{total\}/gi,this.total.toString())),e("stzh-buttongroup",null,e("stzh-button",{variant:"tertiary",icon:"angle-left","icon-only":true,size:this.size,a11yDisabled:this.value<=1,a11yDescribedby:this.a11yDescribedby,a11yLabel:`${this.label||this.localization.label}, ${this.localization.prevLabel}, ${this.localization.selectedPageLabel} ${this.value}`,disabled:this.disabled,onClick:()=>this.prev()}),e("stzh-button",{variant:"tertiary",icon:"angle-right","icon-only":true,size:this.size,a11yDisabled:this.value>=this.total,a11yDescribedby:this.a11yDescribedby,a11yLabel:`${this.label||this.localization.label}, ${this.localization.nextLabel}, ${this.localization.selectedPageLabel} ${this.value}`,disabled:this.disabled,onClick:()=>this.next()}))))}get element(){return n(this)}};b.style=v;export{m as stzh_accordion,u as stzh_accordion_item,b as stzh_pagination};
+//# sourceMappingURL=p-9bc12eff.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["stzhAccordionCss","StzhAccordion","variantWatcher","newValue","this","stzhVariantChange","emit","component","value","openListener","event","accordionItemOpened","target","accordionOpened","closest","multiselectable","detail","element","items","Array","from","querySelectorAll","forEach","item","hide","setItemFocus","accordionItem","action","accordion","filter","disabled","currentIndex","indexOf","length","focus","checkIfNested","parentElement","tagName","toLowerCase","isNested","componentDidLoad","render","classes","h","Host","class","heading","level","stzhAccordionItemCss","ANIMATION_SHOW","keyframes","height","opacity","options","duration","easing","ANIMATION_HIDE","accordionItemCounter","StzhAccordionItem","toggledByMethod","focusedByInput","shiftPressed","handleVariantChange","_event","variant","handleHeaderClick","collapsible","toggle","open","show","onRootFocus","buttonElement","onFocus","rootTabindex","stzhFocus","originalEvent","onBlur","stzhBlur","onButtonKeydown","key","ctrlKey","preventDefault","onContentKeydown","_variant","openWatcher","bodyElement","stzhOpen","stopAnimations","hidden","animateTo","shimKeyframesAutoValues","scrollHeight","style","overflow","stzhOpened","stzhClose","stzhClosed","waitForEvent","handleKeydown","handleKeyup","componentWillLoad","accordionItemId","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","hasIcon","hasSlot","icon","Heading","headingLevel","description","subtitle","tabindex","id","onClick","ref","el","onKeyDown","type","analyticsId","name","badge","badgeEmpty","label","badgeType","role","stzhPaginationCss","StzhPagination","gotoPage","newPage","previous","total","stzhChange","page","Number","input","onInputChange","prev","next","localization","window","stzhComponents","utils","fetchTranslations","size","width","allowManualInput","Fragment","min","max","labelHidden","onStzhChange","_a","toString","required","descriptionLong","error","a11yDescribedby","invalid","hideOptional","noAutocomplete","totalLabel","replace","a11yDisabled","a11yLabel","prevLabel","selectedPageLabel","nextLabel"],"sources":["src/components/stzh-accordion/stzh-accordion.scss?tag=stzh-accordion&encapsulation=shadow","src/components/stzh-accordion/stzh-accordion.tsx","src/components/stzh-accordion-item/stzh-accordion-item.scss?tag=stzh-accordion-item&encapsulation=shadow","src/components/stzh-accordion-item/stzh-accordion-item.tsx","src/components/stzh-pagination/stzh-pagination.scss?tag=stzh-pagination&encapsulation=scoped","src/components/stzh-pagination/stzh-pagination.tsx"],"sourcesContent":[":host {\n  // disable section paddings and margins\n  --stzh-section-padding-top: 0px;\n  --stzh-section-padding-bottom: 0px;\n  --stzh-section-margin-top: 0px;\n  --stzh-section-margin-bottom: 0px;\n\n  --margin-left: inherit;\n  --margin-right: inherit;\n}\n\n.stzh-accordion {\n  display: grid;\n  gap: space('xsmall');\n  margin-left: var(--margin-left);\n  margin-right: var(--margin-left);\n\n  &__heading {\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  /* is nested within another accordion */\n\n  &--is-nested {\n    @include spaceCurve('margin-left', 'regular', true);\n    @include spaceCurve('margin-right', 'regular', true);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhAccordionItemOpenEvent, StzhAccordionVariant, StzhAccordionVariantChangeEvent } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-accordion-item` elements\n */\n@Component({\n  tag: \"stzh-accordion\",\n  styleUrl: \"stzh-accordion.scss\",\n  shadow: true,\n})\nexport class StzhAccordion {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhAccordionVariant = \"default\";\n\n  /** Heading */\n  @Prop({ reflect: true }) heading: string = \"\";\n\n  /** Whether folds are collapsible */\n  @Prop() collapsible: boolean = true;\n\n  /** Whether multiple folds can be opened at once */\n  @Prop() multiselectable: boolean = true;\n\n  @Element() element: HTMLStzhAccordionElement;\n\n  /** Variant change event */\n  @Event() stzhVariantChange: EventEmitter<StzhAccordionVariantChangeEvent>;\n\n  @State() isNested: boolean;\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhAccordionVariant) {\n    this.stzhVariantChange.emit({\n      component: \"stzh-accordion\",\n      value: newValue,\n    });\n  }\n\n  @Listen(\"stzhOpen\")\n  openListener(event: CustomEvent<StzhAccordionItemOpenEvent>) {\n    const accordionItemOpened = event.target as HTMLStzhAccordionItemElement;\n    const accordionOpened = accordionItemOpened.closest(\"stzh-accordion\");\n\n    if (\n      this.multiselectable ||\n      (event.detail && event.detail.component !== \"stzh-accordion-item\") ||\n      accordionOpened !== this.element\n    ) {\n      return;\n    }\n\n    const items: HTMLStzhAccordionItemElement[] = Array.from(accordionOpened.querySelectorAll(\"stzh-accordion-item\"));\n    items.forEach(item => {\n      if (item !== accordionItemOpened) {\n        item.hide();\n      }\n    });\n  }\n\n  /** Set focus to accordion item */\n  @Method()\n  async setItemFocus(accordionItem: HTMLStzhAccordionItemElement, action: string) {\n    const accordion = accordionItem.closest(\"stzh-accordion\");\n\n    if (accordion !== this.element) {\n      return;\n    }\n\n    const items = (\n      Array.from(accordion.querySelectorAll(\":scope > stzh-accordion-item\")) as HTMLStzhAccordionItemElement[]\n    ).filter(item => !item.disabled);\n\n    const currentIndex = items.indexOf(accordionItem);\n\n    if ((action === \"prev\" || action === \"next\") && currentIndex === null) {\n      action = action === \"prev\" ? \"last\" : \"first\";\n    }\n\n    if (action === \"prev\" && currentIndex === 0) {\n      action = \"last\";\n    }\n\n    if (action === \"next\" && currentIndex === items.length - 1) {\n      action = \"first\";\n    }\n\n    if (action === \"prev\") {\n      items[currentIndex - 1].focus();\n    } else if (action === \"next\") {\n      items[currentIndex + 1].focus();\n    } else if (action === \"last\") {\n      items[items.length - 1].focus();\n    } else if (action === \"first\") {\n      items[0].focus();\n    } else {\n      accordionItem.focus();\n    }\n  }\n\n  private checkIfNested() {\n    let parentElement = this.element.parentElement;\n\n    while (parentElement) {\n      if (parentElement.tagName.toLowerCase() === \"stzh-accordion\") {\n        this.isNested = true;\n        break;\n      }\n      parentElement = parentElement.parentElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.checkIfNested();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-accordion\": true,\n      \"stzh-accordion--is-nested\": this.isNested,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.heading && (\n            <div class=\"stzh-accordion__heading\">\n              <stzh-heading level=\"2\">{this.heading}</stzh-heading>\n            </div>\n          )}\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --content-background: Content background\n *\n * @prop --stzh-accordion-content-background: **Global**: Content background\n */\n\n:host {\n  --trigger-size: 18px;\n  --trigger-color: currentColor;\n  --content-background: #{$accordionContentBackground};\n  --icon-size: #{iconSize()};\n  --button-color: #{$colorPrimary70};\n  --button-background-color: #{$colorSecondary30};\n\n  --hover-button-color: var(--button-color);\n  --hover-button-background-color: #{$colorSecondary40};\n  --hover-trigger-color: var(--trigger-color);\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  @include highContrast() {\n    --trigger-color: CanvasText;\n\n    --hover-trigger-color: CanvasText;\n  }\n}\n\n/* Table */\n:host(:where([is-variant=\"table\"])) {\n  --trigger-size: #{iconSize()};\n  --content-background: #{$colorGrey10};\n  --button-background-color: #{$colorGrey20};\n  --trigger-color: #{$colorBlack};\n\n  --hover-button-background-color: #{$colorGrey30};\n\n  @include highContrast() {\n    --trigger-color: CanvasText;\n\n    --hover-trigger-color: CanvasText;\n  }\n}\n\n/* Disabled */\n\n:host(:where([disabled]:not([disabled=\"false\"]))) {\n  --button-color: #{$colorGrey80};\n  --button-background-color: #{$colorGrey20};\n  --trigger-color: #{$colorGrey80};\n\n  --hover-button-color: var(--button-color);\n  --hover-button-background-color: var(--button-background-color);\n  --hover-trigger-color: var(--trigger-color);\n}\n\n.stzh-accordion-item {\n  &__heading {\n    position: relative;\n    margin: 0;\n  }\n\n  &__button {\n    @include fontCurve('p1');\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n    font-family: inherit;\n    width: 100%;\n    appearance: none;\n    display: flex;\n    align-items: center;\n    min-height: 60px;\n    color: var(--button-color);\n    background-color: var(--button-background-color);\n    text-align: left;\n    border: none;\n    transition-property: background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    cursor: pointer;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n\n    &:hover {\n      color: var(--hover-button-color);\n      background-color: var(--hover-button-background-color);\n    }\n  }\n\n  &__button,\n  &__content-inner {\n    @include spaceCurve('padding-left', 'regular');\n    @include spaceCurve('padding-right', 'regular');\n  }\n\n  &__button-text {\n    flex-grow: 1;\n  }\n\n  &__button-icon {\n    &.is-default {\n      position: relative;\n      display: block;\n      width: var(--trigger-size);\n      height: var(--trigger-size);\n      margin-left: space('medium');\n\n      &::before,\n      &::after {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        content: '';\n        display: block;\n        width: var(--trigger-size);\n        height: 2.5px;\n        transition-property: transform, background-color;\n        transition-duration: 500ms;\n        transform-origin: top left;\n        background-color: var(--trigger-color);\n\n        @media (prefers-reduced-motion: reduce) {\n          transition: none;\n        }\n      }\n\n      &::before {\n        transform: rotate(180deg) translate(-50%, -50%);\n      }\n\n      &::after {\n        transform: rotate(90deg) translate(-50%, -50%);\n      }\n    }\n\n    &.is-table {\n      --size: var(--trigger-size);\n\n      transition-property: transform, color;\n      transition-duration: 500ms;\n      color: var(--trigger-color);\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    }\n  }\n\n  &__button:hover &__button-icon {\n    &.is-default {\n      &::before,\n      &::after {\n        background-color: var(--hover-trigger-color);\n      }\n    }\n\n    &.is-table {\n      color: var(--hover-trigger-color);\n    }\n  }\n\n  &__content {\n    overflow: hidden;\n    background-color: var(--content-background);\n\n    @media print {\n      height: auto !important;\n      overflow: visible !important;\n      display: block !important;\n    }\n  }\n\n  &__content-inner {\n    @include spaceCurve('padding-top', 'medium');\n    @include spaceCurve('padding-bottom', 'medium');\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    align-self: flex-start;\n  }\n\n  &__badge {\n    position: absolute;\n    right: -5px;\n    top: -5px;\n  }\n\n  &__description {\n    @include fontCurve('caption');\n  }\n\n  &__heading-text,\n  &__description,\n  &__subtitle {\n    display: block;\n  }\n\n  &__subtitle {\n    @include fontCurve('p2');\n  }\n\n  /* Has icon */\n\n  &--has-icon &__icon-wrapper {\n    margin-right: space('xsmall');\n  }\n\n  /* Title Variant / Subtitle */\n\n  &--title &__heading-text,\n  &--has-subtitle &__heading-text {\n    @include font('title');\n    @include fontCurve('h3', 'heading');\n  }\n\n  &--title &__subtitle:not(:empty) + &__heading-text,\n  &--has-subtitle &__subtitle:not(:empty) + &__heading-text {\n    @include spaceCurve('margin-top', 'tiny');\n\n    @include mq($from: medium) {\n      margin-top: space('xsmall');\n    }\n  }\n\n  /* Open */\n\n  &--is-open &__button-icon {\n    &.is-default {\n      &::before,\n      &::after {\n        transform: rotate(0) translate(-50%, -50%);\n      }\n    }\n\n    &.is-table {\n      transform: rotate(180deg);\n    }\n  }\n\n  /* Table Variant */\n\n  &--table &__button,\n  &--table &__content-inner {\n    padding-left: space('medium');\n    padding-right: space('medium');\n  }\n\n  &__button {\n    @include fontSize('milli');\n    padding-top: space('medium');\n    padding-bottom: space('medium');\n    min-height: 56px;\n  }\n\n  &--table &__content-inner {\n    @include spaceCurve('padding-top', 'tiny');\n    @include spaceCurve('padding-bottom', 'regular');\n  }\n\n  &--table &__heading-text {\n    @include font('heavy');\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Method,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhAccordionItemOpenEvent,\n  StzhAccordionItemOpenedEvent,\n  StzhAccordionItemCloseEvent,\n  StzhAccordionItemClosedEvent,\n  StzhAccordionItemFocusEvent,\n  StzhAccordionItemBlurEvent,\n  StzhAccordionVariantChangeEvent,\n  StzhAccordionVariant,\n  StzhBadgeType\n} from \"../../index\";\n\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo, shimKeyframesAutoValues } from \"../../utils/animation-utils\";\nimport { hasSlot } from \"../../utils/utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 300, easing: \"linear\" }\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 300, easing: \"linear\" }\n};\n\nlet accordionItemCounter = 0;\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-accordion-item\",\n  styleUrl: \"stzh-accordion-item.scss\",\n  shadow: true\n})\nexport class StzhAccordionItem {\n  /** Variant (overwrites variant from accordion parent) */\n  @Prop() variant: StzhAccordionVariant;\n\n  /** Whether fold is collapsible (overwrites collapsible from accordion parent) */\n  @Prop() collapsible: boolean;\n\n  /** Whether fold is open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Whether fold disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Heading title */\n  @Prop() heading: string = \"\";\n\n  /** Subtitle */\n  @Prop() subtitle: string = \"\";\n\n  /** Description */\n  @Prop() description: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Badge */\n  @Prop() badge: string = \"\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Heading level, for accessibility, no visual impact */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `heading` prop.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhAccordionItemElement;\n\n  /** Open event */\n  @Event() stzhOpen: EventEmitter<StzhAccordionItemOpenEvent>;\n\n  /** Opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhAccordionItemOpenedEvent>;\n\n  /** Close event */\n  @Event() stzhClose: EventEmitter<StzhAccordionItemCloseEvent>;\n\n  /** Closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhAccordionItemClosedEvent>;\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhAccordionVariant) {\n    if (typeof newValue !== \"undefined\") {\n      this._variant = newValue;\n    } else if (this.accordion) {\n      this._variant = this.accordion.variant;\n    }\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.bodyElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.hidden = false;\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.bodyElement.scrollHeight\n        }),\n        ANIMATION_SHOW.options\n      );\n\n      this.bodyElement.style.height = \"auto\";\n      this.bodyElement.style.overflow = \"visible\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.style.overflow = \"hidden\";\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.bodyElement.scrollHeight\n        }),\n        ANIMATION_HIDE.options\n      );\n\n      this.bodyElement.hidden = true;\n      this.bodyElement.style.height = \"0px\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  /** Show accordion item content */\n  @Method()\n  async show() {\n    if (this.open || this.disabled) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide accordion item content */\n  @Method()\n  async hide() {\n    if (!this.open || this.disabled) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  /** Toggle accordion item 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  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhAccordionItemFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhAccordionItemBlurEvent>;\n\n  @Listen(\"keydown\", { target: \"document\", capture: true })\n  handleKeydown(event: KeyboardEvent) {\n    if (event.key === \"Shift\") {\n      this.shiftPressed = true;\n    }\n  }\n\n  @Listen(\"keyup\", { target: \"document\", capture: true })\n  handleKeyup(event: KeyboardEvent) {\n    if (event.key === \"Shift\") {\n      this.shiftPressed = false;\n    }\n  }\n\n  @State() rootTabindex: number = 0;\n  @State() _variant: StzhAccordionVariant;\n\n  private toggledByMethod: boolean = false;\n  private bodyElement: HTMLDivElement;\n  private buttonElement: HTMLButtonElement;\n  private accordionItemId: string;\n  private accordion: HTMLStzhAccordionElement;\n  private focusedByInput: boolean = false;\n  private shiftPressed: boolean = false;\n\n  private handleVariantChange = (_event: CustomEvent<StzhAccordionVariantChangeEvent>) => {\n    this.variantWatcher(this.variant);\n  }\n\n  private handleHeaderClick = () => {\n    if (typeof this.collapsible !== \"undefined\") {\n      if (this.collapsible) {\n        this.toggle();\n      } else if (!this.open) {\n        this.show();\n      }\n    } else if (!this.accordion || this.accordion.collapsible) {\n      this.toggle();\n    } else if (!this.open) {\n      this.show();\n    }\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.buttonElement.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    if (this.shiftPressed) { // user presses currently shift\n      this.rootTabindex = -1;\n    }\n\n    this.stzhFocus.emit({\n      component: \"stzh-accordion-item\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    this.rootTabindex = 0;\n\n    this.stzhBlur.emit({\n      component: \"stzh-accordion-item\",\n      originalEvent: event\n    });\n  }\n\n  private onButtonKeydown = (event: KeyboardEvent) => {\n    let action = null;\n\n    if (event.key === \"ArrowDown\") {\n      action = \"next\";\n    } else if (event.key === \"ArrowUp\") {\n      action = \"prev\";\n    } else if (event.key === \"Home\") {\n      action = \"first\";\n    } else if (event.key === \"End\") {\n      action = \"last\";\n    } else if (event.key === \"PageDown\" && event.ctrlKey) {\n      action = \"next\";\n    } else if (event.key === \"PageUp\" && event.ctrlKey) {\n      action = \"prev\";\n    }\n\n    if (event.key === \"Shift\") {\n      this.rootTabindex = -1;\n    }\n\n    if (action) {\n      event.preventDefault();\n      this.accordion.setItemFocus(this.element, action);\n    }\n  }\n\n  private onContentKeydown = (event: KeyboardEvent) => {\n    if (!event.ctrlKey) {\n      return;\n    }\n\n    let action = null;\n\n    if (event.key === \"PageDown\") {\n      action = \"next\";\n    } else if (event.key === \"PageUp\") {\n      action = \"prev\";\n    }\n\n    if (action) {\n      event.preventDefault();\n      this.accordion.setItemFocus(this.element, action);\n    }\n  }\n\n  componentWillLoad() {\n    this.accordionItemId = `stzh-accordion-item-${accordionItemCounter++}`;\n  }\n\n  componentDidLoad() {\n    this.bodyElement.hidden = !this.open;\n    this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n    this.bodyElement.style.overflow = this.open ? \"visible\" : \"hidden\";\n  }\n\n  async connectedCallback() {\n    this.accordion = this.element.closest(\"stzh-accordion\");\n\n    if (this.accordion) {\n      this.accordion.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n    }\n\n    this.variantWatcher(this.variant);\n  }\n\n  disconnectedCallback() {\n    if (this.accordion) {\n      this.accordion.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n      this.accordion = null;\n    }\n  }\n\n  render() {\n    const hasIcon = hasSlot(this.element, \"icon\") || !!this.icon;\n\n    const Heading = `h${this.headingLevel}`;\n    const classes = {\n      \"stzh-accordion-item\": true,\n      \"stzh-accordion-item--has-icon\": hasIcon,\n      \"stzh-accordion-item--has-description\": !!this.description,\n      \"stzh-accordion-item--has-subtitle\": !!this.subtitle,\n      \"stzh-accordion-item--is-open\": this.open,\n      \"stzh-accordion-item--is-disabled\": this.disabled,\n      [`stzh-accordion-item--${this._variant}`]: !!this._variant,\n    };\n\n    return (\n      <Host\n        tabindex={this.disabled ? null : this.rootTabindex}\n        onFocus={this.onRootFocus}\n        is-variant={this._variant}\n      >\n        <div class={classes}>\n          <Heading\n            id={`${this.accordionItemId}-header`}\n            class=\"stzh-accordion-item__heading\"\n            onClick={this.handleHeaderClick}\n          >\n            <button\n              ref={(el) => (this.buttonElement = el as HTMLButtonElement)}\n              class=\"stzh-accordion-item__button\"\n              aria-controls={`${this.accordionItemId}-content`}\n              aria-expanded={`${this.open ? \"true\" : \"false\"}`}\n              disabled={this.disabled}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onKeyDown={this.onButtonKeydown}\n              type=\"button\"\n              s-object-id={this.analyticsId || this.heading}\n            >\n              <span class=\"stzh-accordion-item__icon-wrapper\">\n                {this.icon ?\n                  <stzh-icon class=\"stzh-accordion-item__icon\" name={this.icon}></stzh-icon>\n                  :\n                  <slot name=\"icon\"></slot>\n                }\n              </span>\n              <span class=\"stzh-accordion-item__button-text\">\n                <span class=\"stzh-accordion-item__subtitle\">\n                  {this.subtitle}\n                </span>\n                <span class=\"stzh-accordion-item__heading-text\">\n                  {this.heading}\n                </span>\n                <span class=\"stzh-accordion-item__description\">\n                  {this.description}\n                </span>\n              </span>\n              {this._variant === \"table\"\n                ?\n                <stzh-icon name=\"angle-down\" class=\"stzh-accordion-item__button-icon is-table\"></stzh-icon>\n                :\n                <span class=\"stzh-accordion-item__button-icon is-default\"></span>\n              }\n\n              {(this.badge || this.badgeEmpty) &&\n                <stzh-badge\n                  class=\"stzh-accordion-item__badge\"\n                  label={this.badge}\n                  type={this.badgeType}\n                ></stzh-badge>\n              }\n            </button>\n          </Heading>\n          <div\n            id={`${this.accordionItemId}-content`}\n            ref={(el) => (this.bodyElement = el as HTMLDivElement)}\n            class=\"stzh-accordion-item__content\"\n            aria-labelledby={`${this.accordionItemId}-header`}\n            role=\"region\"\n            onKeyDown={this.onContentKeydown}\n          >\n            <div class=\"stzh-accordion-item__content-inner\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --justify-content: inherit;\n  --padding-left: calc(#{$formInputHeight} + #{space('medium')});\n\n\n  &[width=full] {\n    --justify-content: space-between;\n    --padding-left: 0;\n  }\n}\n\n.stzh-pagination {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: space('medium');\n  padding-left: var(--padding-left);\n  justify-content: var(--justify-content);\n\n  &__input {\n    --text-align: center;\n    --input-width: #{$formInputHeight};\n    --padding-top: 0px;\n    --padding-bottom: 0px;\n    --padding-left: 0px;\n    --padding-right: 0px;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  &__total {\n    @include fontSize('nano');\n    color: $colorGrey70;\n  }\n\n  &--size-small {\n    padding-left: calc(#{$formInputHeightSmall} + #{space('medium')});\n  }\n\n  &--size-small &__input {\n    --input-width: #{$formInputHeightSmall};\n  }\n\n  &--width-full {\n\n  }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Method, Prop } from \"@stencil/core\";\n\nimport { StzhInputChangeEvent, StzhPaginationChangeEvent } from \"../../index\";\n\nimport { StzhPaginationLocalizedText } from \"./stzh-pagination.localization\";\n\n/**\n */\n@Component({\n  tag: \"stzh-pagination\",\n  styleUrl: \"stzh-pagination.scss\",\n  scoped: true,\n})\nexport class StzhPagination {\n  /** Total pages available. */\n  @Prop() total: number = 1;\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Current page. */\n  @Prop({ mutable: true }) value: number = 1;\n\n  /** Label for dropdown */\n  @Prop() label: string = \"\";\n\n  /** Whether label is hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the current page is mutable via input */\n  @Prop({ reflect: true }) allowManualInput: boolean = true;\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Width variant */\n  @Prop({ reflect: true }) width: \"default\" | \"full\" = \"default\";\n\n  /** Id of the element which describes the input */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /**  Translation strings. */\n  @Prop() localization: StzhPaginationLocalizedText;\n\n  /** Pagination change event */\n  @Event() stzhChange: EventEmitter<StzhPaginationChangeEvent>;\n\n  @Element() element: HTMLStzhPaginationElement;\n\n  /** Set current page to previous */\n  @Method()\n  async prev() {\n    this.gotoPage(this.value - 1);\n  }\n\n  /** Set current page to next */\n  @Method()\n  async next() {\n    this.gotoPage(this.value + 1);\n  }\n\n  private input: HTMLStzhInputElement;\n\n  private gotoPage = (newPage: number) => {\n    const previous = this.value;\n\n    if (newPage >= 1 && newPage <= this.total) {\n      this.value = newPage;\n    } else if (newPage > this.total) {\n      this.value = this.total;\n    } else {\n      this.value = 1;\n    }\n\n    if (previous !== this.value) {\n      this.stzhChange.emit({\n        component: \"stzh-pagination\",\n        page: Number(this.value),\n      });\n    }\n  };\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  private onInputChange = (event: CustomEvent<StzhInputChangeEvent>) => {\n    const newPage = Number(event.detail.value) || 1;\n    this.gotoPage(newPage);\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pagination\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-pagination\": true,\n      [`stzh-pagination--size-${this.size}`]: !!this.size,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus} width={this.width}>\n        <div class={classes}>\n          {this.allowManualInput ? (\n            <Fragment>\n              <stzh-input\n                class=\"stzh-pagination__input\"\n                type=\"number\"\n                min={1}\n                max={this.total}\n                label={this.label || this.localization.label}\n                labelHidden={true}\n                ref={el => (this.input = el as HTMLStzhInputElement)}\n                onStzhChange={this.onInputChange}\n                value={this.value?.toString() || \"\"}\n                required={this.required}\n                disabled={this.disabled}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                error={this.error}\n                a11yDescribedby={this.a11yDescribedby}\n                name={this.name}\n                size={this.size}\n                invalid={this.invalid}\n                hideOptional={true}\n                noAutocomplete={true}\n              ></stzh-input>\n              <div class=\"stzh-pagination__total\">\n                {this.localization.totalLabel.replace(/\\{total\\}/gi, this.total.toString())}\n              </div>\n            </Fragment>\n          ) : (\n            <div class=\"stzh-pagination__total\">\n              {this.value} {this.localization.totalLabel.replace(/\\{total\\}/gi, this.total.toString())}\n            </div>\n          )}\n          <stzh-buttongroup>\n            <stzh-button\n              variant=\"tertiary\"\n              icon=\"angle-left\"\n              icon-only\n              size={this.size}\n              a11yDisabled={this.value <= 1}\n              a11yDescribedby={this.a11yDescribedby}\n              a11yLabel={`${this.label || this.localization.label}, ${this.localization.prevLabel}, ${\n                this.localization.selectedPageLabel\n              } ${this.value}`}\n              disabled={this.disabled}\n              onClick={() => this.prev()}\n            ></stzh-button>\n            <stzh-button\n              variant=\"tertiary\"\n              icon=\"angle-right\"\n              icon-only\n              size={this.size}\n              a11yDisabled={this.value >= this.total}\n              a11yDescribedby={this.a11yDescribedby}\n              a11yLabel={`${this.label || this.localization.label}, ${this.localization.nextLabel}, ${\n                this.localization.selectedPageLabel\n              } ${this.value}`}\n              disabled={this.disabled}\n              onClick={() => this.next()}\n            ></stzh-button>\n          </stzh-buttongroup>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yNAAA,MAAMA,EAAmB,80E,MCYZC,EAAa,M,2FAEiC,U,aAGd,G,iBAGZ,K,qBAGI,K,wBAUnC,cAAAC,CAAeC,GACbC,KAAKC,kBAAkBC,KAAK,CAC1BC,UAAW,iBACXC,MAAOL,G,CAKX,YAAAM,CAAaC,GACX,MAAMC,EAAsBD,EAAME,OAClC,MAAMC,EAAkBF,EAAoBG,QAAQ,kBAEpD,GACEV,KAAKW,iBACJL,EAAMM,QAAUN,EAAMM,OAAOT,YAAc,uBAC5CM,IAAoBT,KAAKa,QACzB,CACA,M,CAGF,MAAMC,EAAwCC,MAAMC,KAAKP,EAAgBQ,iBAAiB,wBAC1FH,EAAMI,SAAQC,IACZ,GAAIA,IAASZ,EAAqB,CAChCY,EAAKC,M,KAOX,kBAAMC,CAAaC,EAA6CC,GAC9D,MAAMC,EAAYF,EAAcZ,QAAQ,kBAExC,GAAIc,IAAcxB,KAAKa,QAAS,CAC9B,M,CAGF,MAAMC,EACJC,MAAMC,KAAKQ,EAAUP,iBAAiB,iCACtCQ,QAAON,IAASA,EAAKO,WAEvB,MAAMC,EAAeb,EAAMc,QAAQN,GAEnC,IAAKC,IAAW,QAAUA,IAAW,SAAWI,IAAiB,KAAM,CACrEJ,EAASA,IAAW,OAAS,OAAS,O,CAGxC,GAAIA,IAAW,QAAUI,IAAiB,EAAG,CAC3CJ,EAAS,M,CAGX,GAAIA,IAAW,QAAUI,IAAiBb,EAAMe,OAAS,EAAG,CAC1DN,EAAS,O,CAGX,GAAIA,IAAW,OAAQ,CACrBT,EAAMa,EAAe,GAAGG,O,MACnB,GAAIP,IAAW,OAAQ,CAC5BT,EAAMa,EAAe,GAAGG,O,MACnB,GAAIP,IAAW,OAAQ,CAC5BT,EAAMA,EAAMe,OAAS,GAAGC,O,MACnB,GAAIP,IAAW,QAAS,CAC7BT,EAAM,GAAGgB,O,KACJ,CACLR,EAAcQ,O,EAIV,aAAAC,GACN,IAAIC,EAAgBhC,KAAKa,QAAQmB,cAEjC,MAAOA,EAAe,CACpB,GAAIA,EAAcC,QAAQC,gBAAkB,iBAAkB,CAC5DlC,KAAKmC,SAAW,KAChB,K,CAEFH,EAAgBA,EAAcA,a,EAIlC,gBAAAI,GACEpC,KAAK+B,e,CAGP,MAAAM,GACE,MAAMC,EAAU,CACd,iBAAkB,KAClB,4BAA6BtC,KAAKmC,UAGpC,OACEI,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACTtC,KAAK0C,SACJH,EAAA,OAAKE,MAAM,2BACTF,EAAA,gBAAcI,MAAM,KAAK3C,KAAK0C,UAGlCH,EAAA,c,mGCnIV,MAAMK,EAAuB,ysbC8B7B,MAAMC,EAAiB,CACrBC,UAAW,CACT,CAAEC,OAAQ,IAAKC,QAAS,KACxB,CAAED,OAAQ,OAAQC,QAAS,MAE7BC,QAAS,CAAEC,SAAU,IAAKC,OAAQ,WAGpC,MAAMC,EAAiB,CACrBN,UAAW,CACT,CAAEC,OAAQ,OAAQC,QAAS,KAC3B,CAAED,OAAQ,IAAKC,QAAS,MAE1BC,QAAS,CAAEC,SAAU,IAAKC,OAAQ,WAGpC,IAAIE,EAAuB,E,MAWdC,EAAiB,M,uPA2LpBtD,KAAAuD,gBAA2B,MAK3BvD,KAAAwD,eAA0B,MAC1BxD,KAAAyD,aAAwB,MAExBzD,KAAA0D,oBAAuBC,IAC7B3D,KAAKF,eAAeE,KAAK4D,QAAQ,EAG3B5D,KAAA6D,kBAAoB,KAC1B,UAAW7D,KAAK8D,cAAgB,YAAa,CAC3C,GAAI9D,KAAK8D,YAAa,CACpB9D,KAAK+D,Q,MACA,IAAK/D,KAAKgE,KAAM,CACrBhE,KAAKiE,M,OAEF,IAAKjE,KAAKwB,WAAaxB,KAAKwB,UAAUsC,YAAa,CACxD9D,KAAK+D,Q,MACA,IAAK/D,KAAKgE,KAAM,CACrBhE,KAAKiE,M,GAIDjE,KAAAkE,YAAc,KACpB,IAAKlE,KAAKwD,eAAgB,CACxBxD,KAAKmE,cAAcrC,O,CAGrB9B,KAAKwD,eAAiB,KAAK,EAGrBxD,KAAAoE,QAAW9D,IACjBN,KAAKwD,eAAiB,KAEtB,GAAIxD,KAAKyD,aAAc,CACrBzD,KAAKqE,cAAgB,C,CAGvBrE,KAAKsE,UAAUpE,KAAK,CAClBC,UAAW,sBACXoE,cAAejE,GACf,EAGIN,KAAAwE,OAAUlE,IAChBN,KAAKqE,aAAe,EAEpBrE,KAAKyE,SAASvE,KAAK,CACjBC,UAAW,sBACXoE,cAAejE,GACf,EAGIN,KAAA0E,gBAAmBpE,IACzB,IAAIiB,EAAS,KAEb,GAAIjB,EAAMqE,MAAQ,YAAa,CAC7BpD,EAAS,M,MACJ,GAAIjB,EAAMqE,MAAQ,UAAW,CAClCpD,EAAS,M,MACJ,GAAIjB,EAAMqE,MAAQ,OAAQ,CAC/BpD,EAAS,O,MACJ,GAAIjB,EAAMqE,MAAQ,MAAO,CAC9BpD,EAAS,M,MACJ,GAAIjB,EAAMqE,MAAQ,YAAcrE,EAAMsE,QAAS,CACpDrD,EAAS,M,MACJ,GAAIjB,EAAMqE,MAAQ,UAAYrE,EAAMsE,QAAS,CAClDrD,EAAS,M,CAGX,GAAIjB,EAAMqE,MAAQ,QAAS,CACzB3E,KAAKqE,cAAgB,C,CAGvB,GAAI9C,EAAQ,CACVjB,EAAMuE,iBACN7E,KAAKwB,UAAUH,aAAarB,KAAKa,QAASU,E,GAItCvB,KAAA8E,iBAAoBxE,IAC1B,IAAKA,EAAMsE,QAAS,CAClB,M,CAGF,IAAIrD,EAAS,KAEb,GAAIjB,EAAMqE,MAAQ,WAAY,CAC5BpD,EAAS,M,MACJ,GAAIjB,EAAMqE,MAAQ,SAAU,CACjCpD,EAAS,M,CAGX,GAAIA,EAAQ,CACVjB,EAAMuE,iBACN7E,KAAKwB,UAAUH,aAAarB,KAAKa,QAASU,E,+DArRU,M,cAGX,M,aAGnB,G,cAGC,G,iBAGG,G,UAGP,G,WAGC,G,gBAGuB,M,eAGK,U,kBAGW,I,6CAqJ/B,E,wBA7HhC,cAAAzB,CAAeC,GACb,UAAWA,IAAa,YAAa,CACnCC,KAAK+E,SAAWhF,C,MACX,GAAIC,KAAKwB,UAAW,CACzBxB,KAAK+E,SAAW/E,KAAKwB,UAAUoC,O,EAKnC,iBAAMoB,CAAYjF,GAChB,IAAKC,KAAKiF,YAAa,CACrB,M,CAGF,GAAIlF,EAAU,CACZ,GAAIC,KAAKuD,gBAAiB,CACxBvD,KAAKkF,SAAShF,KAAK,CACjBC,UAAW,uB,OAITgF,EAAenF,KAAKiF,aAC1BjF,KAAKiF,YAAYG,OAAS,YAEpBC,EACJrF,KAAKiF,YACLK,EAAwBzC,EAAeC,UAAW,CAChDC,OAAQ/C,KAAKiF,YAAYM,eAE3B1C,EAAeI,SAGjBjD,KAAKiF,YAAYO,MAAMzC,OAAS,OAChC/C,KAAKiF,YAAYO,MAAMC,SAAW,UAElC,GAAIzF,KAAKuD,gBAAiB,CACxBvD,KAAK0F,WAAWxF,KAAK,CACnBC,UAAW,uB,MAGV,CACL,GAAIH,KAAKuD,gBAAiB,CACxBvD,KAAK2F,UAAUzF,KAAK,CAClBC,UAAW,uB,OAITgF,EAAenF,KAAKiF,aAC1BjF,KAAKiF,YAAYO,MAAMC,SAAW,eAE5BJ,EACJrF,KAAKiF,YACLK,EAAwBlC,EAAeN,UAAW,CAChDC,OAAQ/C,KAAKiF,YAAYM,eAE3BnC,EAAeH,SAGjBjD,KAAKiF,YAAYG,OAAS,KAC1BpF,KAAKiF,YAAYO,MAAMzC,OAAS,MAEhC,GAAI/C,KAAKuD,gBAAiB,CACxBvD,KAAK4F,WAAW1F,KAAK,CACnBC,UAAW,uB,EAKjBH,KAAKuD,gBAAkB,K,CAKzB,UAAMU,GACJ,GAAIjE,KAAKgE,MAAQhE,KAAK0B,SAAU,CAC9B,M,CAGF1B,KAAKuD,gBAAkB,KACvBvD,KAAKgE,KAAO,KACZ,OAAO6B,EAAa7F,KAAKa,QAAS,a,CAKpC,UAAMO,GACJ,IAAKpB,KAAKgE,MAAQhE,KAAK0B,SAAU,CAC/B,M,CAGF1B,KAAKuD,gBAAkB,KACvBvD,KAAKgE,KAAO,MACZ,OAAO6B,EAAa7F,KAAKa,QAAS,a,CAKpC,YAAMkD,GACJ,GAAI/D,KAAKgE,KAAM,CACb,aAAahE,KAAKoB,M,KACb,CACL,aAAapB,KAAKiE,M,EAWtB,aAAA6B,CAAcxF,GACZ,GAAIA,EAAMqE,MAAQ,QAAS,CACzB3E,KAAKyD,aAAe,I,EAKxB,WAAAsC,CAAYzF,GACV,GAAIA,EAAMqE,MAAQ,QAAS,CACzB3E,KAAKyD,aAAe,K,EA6GxB,iBAAAuC,GACEhG,KAAKiG,gBAAkB,uBAAuB5C,K,CAGhD,gBAAAjB,GACEpC,KAAKiF,YAAYG,QAAUpF,KAAKgE,KAChChE,KAAKiF,YAAYO,MAAMzC,OAAS/C,KAAKgE,KAAO,OAAS,MACrDhE,KAAKiF,YAAYO,MAAMC,SAAWzF,KAAKgE,KAAO,UAAY,Q,CAG5D,uBAAMkC,GACJlG,KAAKwB,UAAYxB,KAAKa,QAAQH,QAAQ,kBAEtC,GAAIV,KAAKwB,UAAW,CAClBxB,KAAKwB,UAAU2E,iBAAiB,oBAAqBnG,KAAK0D,oB,CAG5D1D,KAAKF,eAAeE,KAAK4D,Q,CAG3B,oBAAAwC,GACE,GAAIpG,KAAKwB,UAAW,CAClBxB,KAAKwB,UAAU6E,oBAAoB,oBAAqBrG,KAAK0D,qBAC7D1D,KAAKwB,UAAY,I,EAIrB,MAAAa,GACE,MAAMiE,EAAUC,EAAQvG,KAAKa,QAAS,WAAab,KAAKwG,KAExD,MAAMC,EAAU,IAAIzG,KAAK0G,eACzB,MAAMpE,EAAU,CACd,sBAAuB,KACvB,gCAAiCgE,EACjC,yCAA0CtG,KAAK2G,YAC/C,sCAAuC3G,KAAK4G,SAC5C,+BAAgC5G,KAAKgE,KACrC,mCAAoChE,KAAK0B,SACzC,CAAC,wBAAwB1B,KAAK+E,cAAe/E,KAAK+E,UAGpD,OACExC,EAACC,EAAI,CACHqE,SAAU7G,KAAK0B,SAAW,KAAO1B,KAAKqE,aACtCD,QAASpE,KAAKkE,YAAW,aACblE,KAAK+E,UAEjBxC,EAAA,OAAKE,MAAOH,GACVC,EAACkE,EAAO,CACNK,GAAI,GAAG9G,KAAKiG,yBACZxD,MAAM,+BACNsE,QAAS/G,KAAK6D,mBAEdtB,EAAA,UACEyE,IAAMC,GAAQjH,KAAKmE,cAAgB8C,EACnCxE,MAAM,8BAA6B,gBACpB,GAAGzC,KAAKiG,0BAAyB,gBACjC,GAAGjG,KAAKgE,KAAO,OAAS,UACvCtC,SAAU1B,KAAK0B,SACf0C,QAASpE,KAAKoE,QACdI,OAAQxE,KAAKwE,OACb0C,UAAWlH,KAAK0E,gBAChByC,KAAK,SAAQ,cACAnH,KAAKoH,aAAepH,KAAK0C,SAEtCH,EAAA,QAAME,MAAM,qCACTzC,KAAKwG,KACJjE,EAAA,aAAWE,MAAM,4BAA4B4E,KAAMrH,KAAKwG,OAExDjE,EAAA,QAAM8E,KAAK,UAGf9E,EAAA,QAAME,MAAM,oCACVF,EAAA,QAAME,MAAM,iCACTzC,KAAK4G,UAERrE,EAAA,QAAME,MAAM,qCACTzC,KAAK0C,SAERH,EAAA,QAAME,MAAM,oCACTzC,KAAK2G,cAGT3G,KAAK+E,WAAa,QAEjBxC,EAAA,aAAW8E,KAAK,aAAa5E,MAAM,8CAEnCF,EAAA,QAAME,MAAM,iDAGZzC,KAAKsH,OAAStH,KAAKuH,aACnBhF,EAAA,cACEE,MAAM,6BACN+E,MAAOxH,KAAKsH,MACZH,KAAMnH,KAAKyH,cAKnBlF,EAAA,OACEuE,GAAI,GAAG9G,KAAKiG,0BACZe,IAAMC,GAAQjH,KAAKiF,YAAcgC,EACjCxE,MAAM,+BAA8B,kBACnB,GAAGzC,KAAKiG,yBACzByB,KAAK,SACLR,UAAWlH,KAAK8E,kBAEhBvC,EAAA,OAAKE,MAAM,sCACTF,EAAA,gB,wHCtcd,MAAMoF,EAAoB,0xE,MCabC,EAAc,M,gEAuEjB5H,KAAA6H,SAAYC,IAClB,MAAMC,EAAW/H,KAAKI,MAEtB,GAAI0H,GAAW,GAAKA,GAAW9H,KAAKgI,MAAO,CACzChI,KAAKI,MAAQ0H,C,MACR,GAAIA,EAAU9H,KAAKgI,MAAO,CAC/BhI,KAAKI,MAAQJ,KAAKgI,K,KACb,CACLhI,KAAKI,MAAQ,C,CAGf,GAAI2H,IAAa/H,KAAKI,MAAO,CAC3BJ,KAAKiI,WAAW/H,KAAK,CACnBC,UAAW,kBACX+H,KAAMC,OAAOnI,KAAKI,Q,GAKhBJ,KAAAkE,YAAc,KACpB,GAAIlE,KAAKoI,MAAO,CACdpI,KAAKoI,MAAMtG,O,GAIP9B,KAAAqI,cAAiB/H,IACvB,MAAMwH,EAAUK,OAAO7H,EAAMM,OAAOR,QAAU,EAC9CJ,KAAK6H,SAASC,EAAQ,E,WAhGA,E,UAGgB,G,WAGC,E,WAGjB,G,iBAGO,M,cAGc,M,cAGA,M,sBAGQ,K,4FAYT,M,cAGC,M,UAGQ,U,WAGA,U,qBAGc,G,4BAYnE,UAAMQ,GACJtI,KAAK6H,SAAS7H,KAAKI,MAAQ,E,CAK7B,UAAMmI,GACJvI,KAAK6H,SAAS7H,KAAKI,MAAQ,E,CAmC7B,uBAAM4F,GACJ,IAAKhG,KAAKwI,aAAc,CACtBxI,KAAKwI,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkB5I,KAAKa,QAAS,a,EAI1F,MAAAwB,G,MACE,MAAMC,EAAU,CACd,kBAAmB,KACnB,CAAC,yBAAyBtC,KAAK6I,UAAW7I,KAAK6I,MAGjD,OACEtG,EAACC,EAAI,CAACqE,SAAU7G,KAAK0B,SAAW,KAAO,KAAM0C,QAASpE,KAAKkE,YAAa4E,MAAO9I,KAAK8I,OAClFvG,EAAA,OAAKE,MAAOH,GACTtC,KAAK+I,iBACJxG,EAACyG,EAAQ,KACPzG,EAAA,cACEE,MAAM,yBACN0E,KAAK,SACL8B,IAAK,EACLC,IAAKlJ,KAAKgI,MACVR,MAAOxH,KAAKwH,OAASxH,KAAKwI,aAAahB,MACvC2B,YAAa,KACbnC,IAAKC,GAAOjH,KAAKoI,MAAQnB,EACzBmC,aAAcpJ,KAAKqI,cACnBjI,QAAOiJ,EAAArJ,KAAKI,SAAK,MAAAiJ,SAAA,SAAAA,EAAEC,aAAc,GACjCC,SAAUvJ,KAAKuJ,SACf7H,SAAU1B,KAAK0B,SACfiF,YAAa3G,KAAK2G,YAClB6C,gBAAiBxJ,KAAKwJ,gBACtBC,MAAOzJ,KAAKyJ,MACZC,gBAAiB1J,KAAK0J,gBACtBrC,KAAMrH,KAAKqH,KACXwB,KAAM7I,KAAK6I,KACXc,QAAS3J,KAAK2J,QACdC,aAAc,KACdC,eAAgB,OAElBtH,EAAA,OAAKE,MAAM,0BACRzC,KAAKwI,aAAasB,WAAWC,QAAQ,cAAe/J,KAAKgI,MAAMsB,cAIpE/G,EAAA,OAAKE,MAAM,0BACRzC,KAAKI,MAAK,IAAGJ,KAAKwI,aAAasB,WAAWC,QAAQ,cAAe/J,KAAKgI,MAAMsB,aAGjF/G,EAAA,wBACEA,EAAA,eACEqB,QAAQ,WACR4C,KAAK,aAAY,iBAEjBqC,KAAM7I,KAAK6I,KACXmB,aAAchK,KAAKI,OAAS,EAC5BsJ,gBAAiB1J,KAAK0J,gBACtBO,UAAW,GAAGjK,KAAKwH,OAASxH,KAAKwI,aAAahB,UAAUxH,KAAKwI,aAAa0B,cACxElK,KAAKwI,aAAa2B,qBAChBnK,KAAKI,QACTsB,SAAU1B,KAAK0B,SACfqF,QAAS,IAAM/G,KAAKsI,SAEtB/F,EAAA,eACEqB,QAAQ,WACR4C,KAAK,cAAa,iBAElBqC,KAAM7I,KAAK6I,KACXmB,aAAchK,KAAKI,OAASJ,KAAKgI,MACjC0B,gBAAiB1J,KAAK0J,gBACtBO,UAAW,GAAGjK,KAAKwH,OAASxH,KAAKwI,aAAahB,UAAUxH,KAAKwI,aAAa4B,cACxEpK,KAAKwI,aAAa2B,qBAChBnK,KAAKI,QACTsB,SAAU1B,KAAK0B,SACfqF,QAAS,IAAM/G,KAAKuI,W"}

package/dist/stzh-components/{p-7754870d.entry.js → p-9c1b3929.entry.js}

@@ -1,4 +1,4 @@
-import{r as t,c as s,h as i,a as e,g as n}from"./p-c7bfac7a.js";import{h as r}from"./p-7e304ea3.js";import"./p-9b063923.js";
+import{r as t,c as s,h as i,a as e,g as n}from"./p-c7bfac7a.js";import{h as r}from"./p-e30a5acc.js";import"./p-9b063923.js";
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -29,4 +29,4 @@ import{r as t,c as s,h as i,a as e,g as n}from"./p-c7bfac7a.js";import{h as r}fr
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */}function ui(t){return di({...t,state:!0})}var ci=Symbol("@vidstack/media-provider-discovery");var fi=class extends hi{constructor(){super();this._disconnectDisposal=new G;this._logger=void 0;this.loading="visible";this._attemptingAutoplay=false;this.controllerQueue=new Yt;this._store=Ts();this._state=as(this._store);this.connectedQueue=Zt(this);this.mediaQueue=new Yt;this.screenOrientationController=new Xt(this);this.fullscreenController=new It(this,this.screenOrientationController);xt(this,"vds-media-provider-connect",{register:ci});const t=Kt(this,{target:this,threshold:0},(s=>{if(!/(visible|lazy)/.test(this.loading)){t.hostDisconnected();return}if(s[0]?.isIntersecting){this.startLoadingMedia();t.hostDisconnected()}}))}connectedCallback(){super.connectedCallback();this._logMediaEvents();window.requestAnimationFrame((()=>{if(ft(this.canLoadPoster)){this.canLoadPoster=true}}))}firstUpdated(t){super.firstUpdated(t);this.dispatchEvent(st("vds-fullscreen-support-change",{detail:this.canFullscreen}));if(this.canLoad||this.loading==="eager"){window?.requestAnimationFrame((()=>{this.startLoadingMedia()}))}else if(this.loading==="idle"){ps((()=>{this.startLoadingMedia()}))}}render(){return M`<slot @slotchange="${this.handleDefaultSlotChange}"></slot>`}disconnectedCallback(){this._updateMediaStoreOnDisconnect(this._store);this.mediaQueue.destroy();this._disconnectDisposal.empty();super.disconnectedCallback();ls((()=>{ls((()=>{if(!this.isConnected)this.destroy()}))}))}_updateMediaStoreOnDisconnect(t){t.paused.set(true);t.playing.set(false);t.seeking.set(false);t.waiting.set(false);t.fullscreen.set(false)}destroy(){if(this.isConnected)this.disconnectedCallback();this.dispatchEvent(st("vds-destroy"))}_logMediaEvents(){}get volume(){return this._getVolume()}set volume(t){this.mediaQueue.queue("volume",(()=>{const s=this.volume;const i=jt(0,t,1);if(s!==i){this._setVolume(i);this.requestUpdate("volume",s)}}))}get paused(){return this._getPaused()}set paused(t){this.mediaQueue.queue("paused",(()=>{if(this.paused===t)return;try{if(!t){this.play()}else{this.pause()}this.requestUpdate("paused",!t)}catch(t){this._logger?.error("paused-change-fail",t)}}))}get currentTime(){return this._getCurrentTime()}set currentTime(t){this.mediaQueue.queue("current-time",(()=>{const s=this.currentTime;if(s!==t){this._setCurrentTime(t);this.requestUpdate("currentTime",s)}}))}get muted(){return this._getMuted()}set muted(t){this.mediaQueue.queue("muted",(()=>{const s=this.muted;if(s!==t){this._setMuted(t);this.requestUpdate("muted",s)}}))}get poster(){return this.state.poster}set poster(t){const s=this.poster;if(s!==t){this.dispatchEvent(st("vds-poster-change",{detail:t}));this.requestUpdate("poster",s)}}get loop(){return this.state.loop}set loop(t){const s=this.loop;if(s!==t){this.dispatchEvent(st("vds-loop-change",{detail:t}));this.requestUpdate("loop",s)}}get controls(){return this.state.controls}set controls(t){const s=this.controls;if(s!==t){this.dispatchEvent(st("vds-controls-change",{detail:t}));this.requestUpdate("controls",s)}}get canLoad(){return this.state.canLoad}startLoadingMedia(){if(this.state.canPlay)return;this.dispatchEvent(st("vds-can-load"))}_throwIfNotReadyForPlayback(){if(!this.state.canPlay){throw Error(`Media is not ready - wait for \`vds-can-play\` event.`)}}async _resetPlaybackIfEnded(){if(!this.state.ended||this.state.currentTime===0)return;return this._setCurrentTime(0)}_throwIfNotVideoView(){if(this.state.viewType!=="video"){throw Error("Player is currently not in a video view.")}}async _handleMediaReady({event:t,duration:s}){if(this.state.canPlay)return;this.dispatchEvent(st("vds-can-play",{triggerEvent:t,detail:{duration:s}}));this.mediaQueue.start();await this._attemptAutoplay()}_handleCurrentSrcChange(t,s){if(this.state.currentSrc===t)return;this.mediaQueue.stop();this.dispatchEvent(st("vds-current-src-change",{detail:t,triggerEvent:s}))}get autoplay(){return this.state.autoplay}set autoplay(t){if(this.autoplay!==t){this.dispatchEvent(st("vds-autoplay-change",{detail:t}));this.requestUpdate("autoplay",!t)}this._attemptAutoplay()}get _canAttemptAutoplay(){return this.state.canPlay&&this.state.autoplay&&!this.state.started}async _attemptAutoplay(){if(!this._canAttemptAutoplay)return;this._attemptingAutoplay=true;try{await this.play();this.dispatchEvent(st("vds-autoplay",{detail:{muted:this.muted}}))}catch(t){this.dispatchEvent(st("vds-autoplay-fail",{detail:{muted:this.muted,error:t}}));this.requestUpdate()}this._attemptingAutoplay=false}get controller(){return this._controller}get logLevel(){return this._controller?.logLevel??"silent"}set logLevel(t){}get idleDelay(){return this._controller?.idleDelay??0}set idleDelay(t){this.controllerQueue.queue("idle-delay",(()=>{this._controller.idleDelay=t}))}attachMediaController(t,s){this._controller=t;this._store=t._store;this._state=t.state;this.controllerQueue.start();s((()=>{this.controllerQueue.destroy();this._store=Ts();this._state=as(this._store);if(this._controller){hs(this._controller._store,this._store);this._updateMediaStoreOnDisconnect(this._controller._store)}this._controller=void 0}))}dispatchEvent(t){if(!this._controller&&t.type.startsWith("vds-")&&t.type!=="vds-destroy"){this.controllerQueue.queue(t.type,(()=>{super.dispatchEvent(t)}));return false}return super.dispatchEvent(t)}store(){return this._store}get state(){return this._state}get canFullscreen(){return this.fullscreenController.isSupported}get fullscreen(){return this.fullscreenController.isFullscreen}get fullscreenOrientation(){return this.fullscreenController.screenOrientationLock}set fullscreenOrientation(t){const s=this.fullscreenController.screenOrientationLock;if(s!==t){this.fullscreenController.screenOrientationLock=t;this.requestUpdate("fullscreen-orientation",s)}}enterFullscreen(){return this.fullscreenController.enterFullscreen()}exitFullscreen(){return this.fullscreenController.exitFullscreen()}};Vs([di({type:Number})],fi.prototype,"volume",1);Vs([di({type:Boolean})],fi.prototype,"paused",1);Vs([di({type:Number})],fi.prototype,"currentTime",1);Vs([di({type:Boolean})],fi.prototype,"muted",1);Vs([di()],fi.prototype,"poster",1);Vs([di({type:Boolean})],fi.prototype,"loop",1);Vs([di({type:Boolean})],fi.prototype,"controls",1);Vs([ui()],fi.prototype,"canLoadPoster",2);Vs([di({attribute:"loading"})],fi.prototype,"loading",2);Vs([di({type:Boolean})],fi.prototype,"autoplay",1);Vs([di({attribute:"log-level"})],fi.prototype,"logLevel",1);Vs([di({attribute:"idle-delay",type:Number})],fi.prototype,"idleDelay",1);Vs([di({attribute:"fullscreen-orientation"})],fi.prototype,"fullscreenOrientation",1);var vi=class{constructor(t,s){this._host=t;this._mediaStore=s;this._idle=false;this._mediaPaused=false;this._idlingPaused=false;this._disposal=new G;this.delay=2e3;t.addController(this)}get paused(){return this._idlingPaused||this._mediaPaused}set paused(t){this._idlingPaused=t;this._handleIdleChange()}hostConnected(){this._disposal.add(this._mediaStore.paused.subscribe((t=>{this._mediaPaused=t;this._handleIdleChange()})));const t=["pointerdown","pointermove","focus","keydown"];t.forEach((t=>{const s=X(this._host,t,this._handleIdleChange.bind(this));this._disposal.add(s)}))}hostDisconnected(){this._disposal.empty();this._stopIdleTimer()}_handleIdleChange(){if(this.paused){this._stopIdleTimer()}else{this._startIdleTimer()}}_startIdleTimer(){this._stopIdleTimer();this._idleTimeout=window.setTimeout((()=>{this._dispatchIdleChange(!this.paused)}),this.delay)}_stopIdleTimer(){window.clearTimeout(this._idleTimeout);this._dispatchIdleChange(false)}_dispatchIdleChange(t){if(this._idle!==t){this._host.dispatchEvent(st("vds-user-idle-change",{detail:t}));this._idle=t}}};var pi=class{constructor(t){this._host=t;this._disconnectDisposal=new G;this.providerQueue=new Yt;this.providerDisposal=new G;this._logController=void 0;this._logger=void 0;this._providerContext=xs.provide(this._host);this._mediaStoreProvider=Ds.provide(this._host);this.state=as(this._store);this._userIdleController=new vi(this._host,this._store);this._handleIdleChange=Q(this._host,"vds-user-idle-change",(t=>{this._store.userIdle.set(t.detail);this._satisfyMediaRequest("userIdle",t)}));this._pendingMediaRequests={loading:[],play:[],pause:[],volume:[],fullscreen:[],seeked:[],seeking:[],userIdle:[]};this._handleStartLoadingRequest=Q(this._host,"vds-start-loading",this._createMediaRequestHandler("loading",(t=>{if(this.state.canLoad)return;this._pendingMediaRequests.loading.push(t);this._provider.startLoadingMedia()})));this._handleMuteRequest=Q(this._host,"vds-mute-request",this._createMediaRequestHandler("muted",(t=>{if(this.state.muted)return;this._pendingMediaRequests.volume.push(t);this.provider.muted=true})));this._handleUnmuteRequest=Q(this._host,"vds-unmute-request",this._createMediaRequestHandler("muted",(t=>{if(!this.state.muted)return;this._pendingMediaRequests.volume.push(t);this.provider.muted=false;if(this.state.volume===0){this._pendingMediaRequests.volume.push(t);this.provider.volume=.25}})));this._handlePlayRequest=Q(this._host,"vds-play-request",this._createMediaRequestHandler("paused",(t=>{if(!this.state.paused)return;this._pendingMediaRequests.play.push(t);this.provider.paused=false})));this._handlePauseRequest=Q(this._host,"vds-pause-request",this._createMediaRequestHandler("paused",(t=>{if(this.state.paused)return;this._pendingMediaRequests.pause.push(t);this.provider.paused=true})));this._isSeekingRequestPending=false;this._handleSeekingRequest=Q(this._host,"vds-seeking-request",this._createMediaRequestHandler("seeking",(t=>{this._stopWaiting();this._pendingMediaRequests.seeking.push(t);this._isSeekingRequestPending=true;this._store.seeking.set(true)})));this._handleSeekRequest=Q(this._host,"vds-seek-request",this._createMediaRequestHandler("seeking",(t=>{if(this.store.ended){this._isReplay=true}this._pendingMediaRequests.seeked.push(t);this._isSeekingRequestPending=false;let s=t.detail;if(this.state.duration-t.detail<.25){s=this.state.duration}this.provider.currentTime=s})));this._handleVolumeChangeRequest=Q(this._host,"vds-volume-change-request",this._createMediaRequestHandler("volume",(t=>{const s=t.detail;if(this.state.volume===s)return;this._pendingMediaRequests.volume.push(t);this.provider.volume=s;if(s>0&&this.state.muted){this._pendingMediaRequests.volume.push(t);this.provider.muted=false}})));this._handleEnterFullscreenRequest=Q(this._host,"vds-enter-fullscreen-request",this._createMediaRequestHandler("fullscreen",(async t=>{if(this.state.fullscreen)return;const s=t.detail??"media";if(s==="media"&&this._host.canFullscreen){this._pendingMediaRequests.fullscreen.push(t);await(this._host.enterFullscreen?.())}else if(this.provider){this._pendingMediaRequests.fullscreen.push(t);await this.provider.enterFullscreen()}})));this._handleExitFullscreenRequest=Q(this._host,"vds-exit-fullscreen-request",this._createMediaRequestHandler("fullscreen",(async t=>{if(!this.state.fullscreen)return;const s=t.detail??"media";if(s==="media"&&this._host.canFullscreen){this._pendingMediaRequests.fullscreen.push(t);await(this._host.exitFullscreen?.())}else if(this.provider){this._pendingMediaRequests.fullscreen.push(t);await this.provider.exitFullscreen()}})));this._handleResumeIdlingRequest=Q(this._host,"vds-resume-user-idle-request",(t=>{if(!this._mediaRequestEventGateway(t))return;this._pendingMediaRequests.userIdle.push(t);this._userIdleController.paused=false}));this._handlePauseIdlingRequest=Q(this._host,"vds-pause-user-idle-request",(t=>{if(!this._mediaRequestEventGateway(t))return;this._pendingMediaRequests.userIdle.push(t);this._userIdleController.paused=true}));this._handleShowPosterRequest=Q(this._host,"vds-show-poster-request",this._createMediaRequestHandler("poster",(()=>{this._provider.canLoadPoster=true})));this._handleHidePosterRequest=Q(this._host,"vds-hide-poster-request",this._createMediaRequestHandler("poster",(()=>{this._provider.canLoadPoster=false})));this._handleLoopRequest=this._createMediaRequestHandler("loop",(()=>{window.requestAnimationFrame((async()=>{try{this._isLooping=true;this._isReplay=true;await this._provider.play()}catch(t){this._isReplay=false;this._isLooping=false}}))}));this._handleFullscreenChange=Q(this._host,"vds-fullscreen-change",(t=>{this._store.fullscreen.set(t.detail);if(t.target!==this._host)return;this._satisfyMediaRequest("fullscreen",t);this._provider?.dispatchEvent(st("vds-fullscreen-change",{detail:t.detail,triggerEvent:t}))}));this._handleFullscreenError=Q(this._host,"vds-fullscreen-error",(t=>{if(t.target!==this._host)return;this._satisfyMediaRequest("fullscreen",t);this._provider?.dispatchEvent(st("vds-fullscreen-error",{detail:t.detail,triggerEvent:t}))}));this._isReplay=false;this._isLooping=false;this._firingWaiting=false;this._mediaEvents=[];this._handleSeeking=Y((t=>{this._mediaEvents.push(t);this._store.seeking.set(true);this._store.currentTime.set(t.detail);this._satisfyMediaRequest("seeking",t)}),150,{leading:true});this._fireWaiting=K((()=>{if(!this._originalWaitingEvent)return;this._firingWaiting=true;const t=st("vds-waiting",this._originalWaitingEvent);this._mediaEvents.push(t);this._store.waiting.set(true);this._store.playing.set(false);this._provider?.dispatchEvent(t);this._originalWaitingEvent=void 0;this._firingWaiting=false}),300);this._skipInitialSrcChange=true;kt(t,ci,((t,s)=>{this.attachMediaProvider(t,s)}));t.addController({hostConnected:()=>{if(!this.state.canPlay){this._host.setAttribute("aria-busy","true")}},hostDisconnected:()=>{this._clearMediaStateTracking();this._clearPendingMediaRequests();this.providerQueue.destroy();this.providerDisposal.empty();this._skipInitialSrcChange=true;this._disconnectDisposal.empty()}})}get logLevel(){return this._logController?.logLevel??"silent"}set logLevel(t){}get provider(){return this._provider}attachMediaProvider(t,s){if(!vt(this.provider)||this.provider===t)return;this._handleMediaProviderDisconnect();this._provider=t;this._providerContext.value.set(t);hs(this._provider._store,this._store);this._attachMediaEventListeners();t.attachMediaController(this,(t=>this._disconnectDisposal.add(t)));this._flushMediaProviderConnectedQueue();s(this._handleMediaProviderDisconnect.bind(this))}_handleMediaProviderDisconnect(){if(vt(this.provider))return;this._stopWaiting();this.providerQueue.destroy();this.providerDisposal.empty();this._provider=void 0;this._providerContext.value.set(void 0);As(this._store);this._store.viewType.set("unknown")}_flushMediaProviderConnectedQueue(){this.providerQueue.start();this.providerDisposal.add((()=>{this.providerQueue.stop()}))}get store(){return this._mediaStoreProvider.value}get _store(){return this._mediaStoreProvider.value}get idleDelay(){return this._userIdleController.delay}set idleDelay(t){this._userIdleController.delay=t}_clearPendingMediaRequests(){Gt(this._pendingMediaRequests).forEach((t=>{this._pendingMediaRequests[t]=[]}))}_satisfyMediaRequest(t,s){const i=this._pendingMediaRequests[t].shift();if(i){s.requestEvent=i;et(s,i)}}_mediaRequestEventGateway(t){t.stopPropagation();return true}_createMediaRequestHandler(t,s){return i=>{if(!this._mediaRequestEventGateway(i))return;if(this._provider){s(i);return}this.providerQueue.queue(t,(()=>{s(i)}))}}_attachMediaEventListeners(){if(!this._provider)return;const t={"vds-can-load":this._handleCanLoad,"vds-load-start":this._handleLoadStart,"vds-loaded-data":this._handleLoadedData,"vds-loaded-metadata":this._handleLoadedMetadata,"vds-can-play":this._handleCanPlay,"vds-can-play-through":this._handleCanPlayThrough,"vds-current-src-change":this._handleCurrentSrcChange,"vds-autoplay":this._handleAutoplay,"vds-autoplay-fail":this._handleAutoplayFail,"vds-loop-request":this._handleLoopRequest,"vds-play":this._handlePlay,"vds-play-fail":this._handlePlayFail,"vds-playing":this._handlePlaying,"vds-pause":this._handlePause,"vds-time-update":this._handleTimeUpdate,"vds-volume-change":this._handleVolumeChange,"vds-seeking":this._handleSeeking,"vds-seeked":this._handleSeeked,"vds-waiting":this._handleWaiting,"vds-ended":this._handleEnded,"vds-autoplay-change":this._handleAutoplayChange,"vds-error":this._handleError,"vds-fullscreen-support-change":this._handleFullscreenSupportChange,"vds-poster-change":this._handlePosterChange,"vds-loop-change":this._handleLoopChange,"vds-playsinline-change":this._handlePlaysinlineChange,"vds-controls-change":this._handleControlsChange,"vds-media-type-change":this._handleMediaTypeChange,"vds-view-type-change":this._handleViewTypeChange,"vds-duration-change":this._handleDurationChange,"vds-progress":this._handleProgress,"vds-src-change":this._handleSrcChange};for(const s of Gt(t)){const i=t[s].bind(this);this.providerDisposal.add(X(this._provider,s,i))}}_clearMediaStateTracking(){this._isReplay=false;this._isLooping=false;this._firingWaiting=false;this._originalWaitingEvent=void 0;this._mediaEvents=[]}_findLastMediaEvent(t){return this._mediaEvents[this._mediaEvents.map((t=>t.type)).lastIndexOf(t)]}_handleCanLoad(t){this._store.canLoad.set(true);this._mediaEvents.push(t);this._satisfyMediaRequest("loading",t)}_updateMetadata(t){this._store.currentSrc.set(t.currentSrc);this._store.mediaType.set(t.mediaType);this._store.viewType.set(t.viewType)}_handleLoadStart(t){this._updateMetadata(t.detail);this._mediaEvents.push(t);et(t,this._findLastMediaEvent("vds-src-change"));et(t,this._findLastMediaEvent("vds-can-load"))}_handleLoadedData(t){this._mediaEvents.push(t);et(t,this._findLastMediaEvent("vds-load-start"))}_handleLoadedMetadata(t){this._updateMetadata(t.detail);this._mediaEvents.push(t);et(t,this._findLastMediaEvent("vds-load-start"))}_handleCanPlay(t){this._mediaEvents.push(t);if(t.triggerEvent?.type!=="loadedmetadata"){et(t,this._findLastMediaEvent("vds-loaded-metadata"))}this._store.canPlay.set(true);this._store.duration.set(t.detail.duration);this._host.setAttribute("aria-busy","false")}_handleCanPlayThrough(t){this._store.canPlay.set(true);this._store.duration.set(t.detail.duration);et(t,this._findLastMediaEvent("vds-can-play"))}_handleAutoplay(t){this._mediaEvents.push(t);et(t,this._findLastMediaEvent("vds-play"));et(t,this._findLastMediaEvent("vds-can-play"));this._store.autoplayError.set(void 0)}_handleAutoplayFail(t){et(t,this._findLastMediaEvent("vds-play-fail"));et(t,this._findLastMediaEvent("vds-can-play"));this._store.autoplayError.set(t.detail);this._clearMediaStateTracking()}_handlePlay(t){if(this._isLooping||!this.state.paused){t.stopImmediatePropagation();return}this._mediaEvents.push(t);et(t,this._findLastMediaEvent("vds-waiting"));this._satisfyMediaRequest("play",t);this._store.paused.set(false);this._store.autoplayError.set(void 0);if(this.state.ended||this._isReplay){this._isReplay=false;this._store.ended.set(false);const s=st("vds-replay",{triggerEvent:t});this._provider?.dispatchEvent(s)}}_handlePlayFail(t){this._mediaEvents.push(t);this._stopWaiting();et(t,this._findLastMediaEvent("vds-play"));this._store.paused.set(true);this._store.playing.set(false);this._satisfyMediaRequest("play",t);this._clearMediaStateTracking()}_handlePlaying(t){this._mediaEvents.push(t);const s=this._findLastMediaEvent("vds-play");if(s){et(t,this._findLastMediaEvent("vds-waiting"));et(t,s)}else{et(t,this._findLastMediaEvent("vds-seeked"))}this._stopWaiting();this._clearMediaStateTracking();this._store.paused.set(false);this._store.playing.set(true);this._store.seeking.set(false);this._store.ended.set(false);if(this._isLooping){t.stopImmediatePropagation();this._isLooping=false;return}if(!this.state.started){this._store.started.set(true);this._provider?.dispatchEvent(st("vds-started",{triggerEvent:t}))}}_handlePause(t){if(this._isLooping){t.stopImmediatePropagation();return}et(t,this._findLastMediaEvent("vds-seeked"));this._satisfyMediaRequest("pause",t);this._store.paused.set(true);this._store.playing.set(false);this._store.seeking.set(false);this._stopWaiting();this._clearMediaStateTracking()}_handleTimeUpdate(t){const{currentTime:s,played:i}=t.detail;this._store.currentTime.set(s);this._store.played.set(i);this._store.waiting.set(false)}_handleVolumeChange(t){this._store.volume.set(t.detail.volume);this._store.muted.set(t.detail.muted||t.detail.volume===0);this._satisfyMediaRequest("volume",t)}_handleSeeked(t){if(this._isSeekingRequestPending){this._store.seeking.set(true);t.stopImmediatePropagation()}else if(this.state.seeking){this._mediaEvents.push(t);et(t,this._findLastMediaEvent("vds-waiting"));et(t,this._findLastMediaEvent("vds-seeking"));if(this.state.paused){this._stopWaiting()}this._store.seeking.set(false);if(t.detail!==this.state.duration){this._store.ended.set(false)}this._store.currentTime.set(t.detail);this._satisfyMediaRequest("seeked",t)}}_stopWaiting(){this._fireWaiting.cancel();this._store.waiting.set(false)}_handleWaiting(t){if(this._firingWaiting)return;t.stopImmediatePropagation();this._originalWaitingEvent=t;this._fireWaiting()}_handleEnded(t){if(this._isLooping){t.stopImmediatePropagation();return}this._stopWaiting();this._store.paused.set(true);this._store.playing.set(false);this._store.seeking.set(false);this._store.ended.set(true);this._clearMediaStateTracking()}_handleAutoplayChange(t){this._store.autoplay.set(t.detail)}_handleCurrentSrcChange(t){this._store.currentSrc.set(t.detail);if(this._skipInitialSrcChange){this._skipInitialSrcChange=false;return}this._clearMediaStateTracking();Fs(this._store);this._host.setAttribute("aria-busy","true")}_handleError(t){this._store.error.set(t.detail)}_handleFullscreenSupportChange(t){this._store.canFullscreen.set(t.detail)}_handlePosterChange(t){this._store.poster.set(t.detail)}_handleLoopChange(t){this._store.loop.set(t.detail)}_handlePlaysinlineChange(t){this._store.playsinline.set(t.detail)}_handleControlsChange(t){this._store.controls.set(t.detail)}_handleMediaTypeChange(t){this._store.mediaType.set(t.detail)}_handleDurationChange(t){const s=t.detail;this._store.duration.set(!isNaN(s)?s:0)}_handleProgress(t){const{buffered:s,seekable:i}=t.detail;const e=s.length===0?0:s.end(s.length-1);const n=i.length===0?0:i.end(i.length-1);this._store.buffered.set(s);this._store.bufferedAmount.set(e);this._store.seekable.set(i);this._store.seekableAmount.set(n)}_handleSrcChange(t){this._store.src.set(t.detail)}_handleViewTypeChange(t){this._store.viewType.set(t.detail)}};var gi=class{constructor(t,s,i){this._host=t;this._store=s;this._mediaProps=i;this._disposal=new G;this._host.addController({hostConnected:this._hostConnected.bind(this),hostDisconnected:this._hostDisconnected.bind(this)})}_hostConnected(){ps((()=>{for(const t of this._mediaProps){const s=this._store[t];if(s){const i=this._getMediaAttrName(t);const e=s.subscribe((s=>{window?.requestAnimationFrame((()=>{this._handleValueChange(t,i,s)}))}));this._disposal.add(e)}}}))}_hostDisconnected(){for(const t of this._mediaProps){this._handleDisconnect(t,this._getMediaAttrName(t))}this._disposal.empty()}_getMediaAttrName(t){return _s(t)}};var mi=class extends gi{_handleValueChange(t,s,i){window.requestAnimationFrame((()=>{us(this._host,s,gt(i)||pt(i)?String(i):!!i)}))}_handleDisconnect(t,s){this._host.removeAttribute(s)}};function _i(...t){return new mi(...t)}var zi=class extends gi{_handleValueChange(t,s,i){window.requestAnimationFrame((()=>{this._host.style.setProperty(this._getCssPropName(s),gt(i)||pt(i)?String(i):null)}))}_getCssPropName(t){return`--vds-${t}`}_handleDisconnect(t,s){this._host.style.setProperty(this._getCssPropName(s),null)}};function yi(...t){return new zi(...t)}var bi=Symbol("@vidstack/media-discovery");var wi=class extends hi{constructor(){super();this.controller=new pi(this);this.__mediaFullscreen=false;this.__mediaIsVideoView=false;this.__mediaPlaysinline=false;this.screenOrientationController=new Xt(this);this.fullscreenController=new It(this,this.screenOrientationController);xt(this,"vds-media-connect",{register:bi});qs(this,"fullscreen",(t=>{this.__mediaFullscreen=t}));qs(this,"viewType",(t=>{this.__mediaIsVideoView=t==="video"}));qs(this,"playsinline",(t=>{this.__mediaPlaysinline=t}));this._bindMediaAttributes();this._bindMediaCSSProperties()}static get styles(){return[Hs`:host{display:inline-block;position:relative;contain:content}:host([hidden]){display:none}`]}get provider(){return this.controller.provider}update(t){us(this,"hide-ui",this._shouldHideMediaUI());super.update(t)}render(){return M`<slot></slot>`}get canFullscreen(){return this.fullscreenController.isSupported}get fullscreen(){return this.fullscreenController.isFullscreen}get fullscreenOrientation(){return this.fullscreenController.screenOrientationLock}set fullscreenOrientation(t){const s=this.fullscreenController.screenOrientationLock;if(s!==t){this.fullscreenController.screenOrientationLock=t;this.requestUpdate("fullscreen-orientation",s)}}enterFullscreen(){return this.fullscreenController.enterFullscreen()}exitFullscreen(){return this.fullscreenController.exitFullscreen()}_bindMediaAttributes(){_i(this,this.controller.store,["autoplay","autoplayError","canLoad","canPlay","canFullscreen","ended","error","fullscreen","userIdle","loop","mediaType","muted","paused","playing","playsinline","seeking","started","viewType","waiting"])}_bindMediaCSSProperties(){yi(this,this.controller.store,["bufferedAmount","currentTime","duration","seekableAmount"])}_shouldHideMediaUI(){return St&&this.__mediaIsVideoView&&(!this.__mediaPlaysinline||this.__mediaFullscreen)}};Vs([ui()],wi.prototype,"__mediaFullscreen",2);Vs([ui()],wi.prototype,"__mediaIsVideoView",2);Vs([ui()],wi.prototype,"__mediaPlaysinline",2);Vs([di({attribute:"fullscreen-orientation"})],wi.prototype,"fullscreenOrientation",1);ds("vds-media",wi);var ki=/\.(m4a|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|aac|oga|spx)($|\?)/i;var xi=/\.(mp4|og[gv]|webm|mov|m4v|avi)($|\?)/i;function Ei(t){if(ki.test(t))return"audio";if(xi.test(t))return"video";return"unknown"}var Ci=class extends fi{constructor(){super(...arguments);this.preload="metadata";this._timeRAF=void 0;this._hasMediaElementConnected=false;this._mediaElementDisposal=new G;this._isMediaWaiting=false;this._ignoreNextAbortEvent=false;this._ignoreNextEmptiedEvent=false}get mediaElement(){return this._mediaElement}disconnectedCallback(){this._isMediaWaiting=false;super.disconnectedCallback();this._cancelTimeUpdates()}destroy(){if(this.mediaElement){this.mediaElement.pause();this.mediaElement.src="";this.mediaElement.innerHTML="";this.mediaElement.load()}super.destroy()}_cancelTimeUpdates(){if(pt(this._timeRAF))window.cancelAnimationFrame(this._timeRAF);this._timeRAF=void 0}_requestTimeUpdates(){if(!ft(this._timeRAF))return;this._requestTimeUpdate()}_requestTimeUpdate(){const t=this.mediaElement?.currentTime??0;if(this.state.currentTime!==t){this._updateCurrentTime(t)}this._timeRAF=window.requestAnimationFrame((()=>{if(ft(this._timeRAF))return;this._requestTimeUpdate()}))}_updateCurrentTime(t,s){this.dispatchEvent(st("vds-time-update",{detail:{currentTime:Math.min(t,this.mediaElement?.duration??0),played:this.mediaElement.played},triggerEvent:s}))}handleDefaultSlotChange(){this._handleMediaElementDisconnect();this._handleMediaElementConnect()}get _canMediaElementConnect(){return this.canLoad&&!vt(this.mediaElement)&&!this._hasMediaElementConnected}_findSlottedMediaElement(){const t=vs(this)[0];const s=t?.tagName??"";if(!/^(audio|video)$/i.test(s));this._mediaElement=t??void 0}_handleMediaElementConnect(){window.requestAnimationFrame((()=>{this._findSlottedMediaElement();if(!this._canMediaElementConnect)return;const t=this.mediaElement;if(t.hasAttribute("loop")){this.loop=true}t.removeAttribute("loop");t.removeAttribute("poster");us(t,"controls",this.controls);if(!this.state.canFullscreen&&this.fullscreenController.isSupported){this.dispatchEvent(st("vds-fullscreen-support-change",{detail:this.canFullscreen}))}this._attachMediaEventListeners();this._observePlaysinline();this._observeMediaSources();if(this.canLoadPoster&&this.poster.length>0&&t.getAttribute("poster")!==this.poster){t.setAttribute("poster",this.poster)}this._startPreloadingMedia();this._hasMediaElementConnected=true;this._disconnectDisposal.add(this._handleMediaElementDisconnect.bind(this))}))}_handleMediaElementDisconnect(){this._cancelTimeUpdates();window.requestAnimationFrame((()=>{this._mediaElementDisposal.empty();this._mediaElement=void 0}));if(this._hasMediaElementConnected&&false){this._logger?.infoGroup("Media element disconnected").labelledLog("Media Element",this.mediaElement).dispatch()}this._hasMediaElementConnected=false}startLoadingMedia(){super.startLoadingMedia();this._handleMediaElementConnect()}_startPreloadingMedia(){if(this.state.canPlay)return;this.mediaElement.setAttribute("preload",this.preload);const t=this.mediaElement.networkState>=1;this._ignoreNextAbortEvent=t;this._ignoreNextEmptiedEvent=t;this.mediaElement.load();setTimeout((()=>{this._ignoreNextAbortEvent=false;this._ignoreNextEmptiedEvent=false}),0)}_observePlaysinline(){const t=()=>this.mediaElement.hasAttribute("playsinline");this._handlePlaysinlineChange(t());const s=new MutationObserver((()=>this._handlePlaysinlineChange(t())));s.observe(this.mediaElement,{attributeFilter:["playsinline"]});this._mediaElementDisposal.add((()=>s.disconnect()))}_handlePlaysinlineChange(t){this.dispatchEvent(st("vds-playsinline-change",{detail:t}))}_observeMediaSources(){this._handleSrcChange(this._getMediaSources());const t=new MutationObserver((()=>this._handleSrcChange(this._getMediaSources())));t.observe(this.mediaElement,{attributeFilter:["src"],subtree:true});this._mediaElementDisposal.add((()=>t.disconnect()))}_handleSrcChange(t){const s=this.state.src;if(!os(s,t)){this.dispatchEvent(st("vds-src-change",{detail:t}))}}_getMediaSources(){const t=[this.mediaElement?.src,...Array.from(this.mediaElement?.querySelectorAll("source")??[]).map((t=>t.src))].filter(Boolean);return Array.from(new Set(t))}_getMediaMetadata(){return{src:this.state.src,currentSrc:this.mediaElement.currentSrc,duration:this.mediaElement.duration||0,poster:this.mediaElement.poster,mediaType:this._getMediaType(),viewType:this.state.viewType}}_attachMediaEventListeners(){if(vt(this.mediaElement))return;const t={abort:this._handleAbort,canplay:this._handleCanPlay,canplaythrough:this._handleCanPlayThrough,durationchange:this._handleDurationChange,emptied:this._handleEmptied,ended:this._handleEnded,error:this._handleError,loadeddata:this._handleLoadedData,loadedmetadata:this._handleLoadedMetadata,loadstart:this._handleLoadStart,pause:this._handlePause,play:this._handlePlay,playing:this._handlePlaying,progress:this._handleProgress,ratechange:this._handleRateChange,seeked:this._handleSeeked,seeking:this._handleSeeking,stalled:this._handleStalled,suspend:this._handleSuspend,volumechange:this._handleVolumeChange,waiting:this._handleWaiting};Gt(t).forEach((s=>{const i=t[s].bind(this);const e=X(this.mediaElement,s,(async t=>{await i(t)}));this._mediaElementDisposal.add(e)}))}_handleAbort(t){if(this._ignoreNextAbortEvent)return;this.dispatchEvent(st("vds-abort",{triggerEvent:t}));this._handleCurrentSrcChange("",t)}_handleCanPlay(t){this._handleMediaReady({event:t,duration:this.mediaElement.duration})}_handleCanPlayThrough(t){if(this.state.started)return;this.dispatchEvent(st("vds-can-play-through",{triggerEvent:t,detail:{duration:this.mediaElement.duration}}))}_handleLoadStart(t){this._handleCurrentSrcChange(this.mediaElement.currentSrc,t);if(this.mediaElement.currentSrc===""){this._handleAbort();return}this.dispatchEvent(st("vds-load-start",{triggerEvent:t,detail:this._getMediaMetadata()}))}_handleEmptied(t){if(this._ignoreNextEmptiedEvent)return;this.dispatchEvent(st("vds-emptied",{triggerEvent:t}))}_handleLoadedData(t){this.dispatchEvent(st("vds-loaded-data",{triggerEvent:t}))}_handleLoadedMetadata(t){this.dispatchEvent(st("vds-volume-change",{detail:{volume:this.mediaElement.volume,muted:this.mediaElement.muted}}));this.dispatchEvent(st("vds-loaded-metadata",{triggerEvent:t,detail:this._getMediaMetadata()}))}_determineMediaType(t){this.dispatchEvent(st("vds-media-type-change",{detail:this._getMediaType(),triggerEvent:t}))}_handlePlay(t){const s=st("vds-play",{triggerEvent:t});s.autoplay=this._attemptingAutoplay;this.dispatchEvent(s)}_handlePause(t){if(this.mediaElement.readyState===1&&!this._isMediaWaiting){return}this._isMediaWaiting=false;this._cancelTimeUpdates();this.dispatchEvent(st("vds-pause",{triggerEvent:t}))}_handlePlaying(t){this._isMediaWaiting=false;const s=st("vds-playing",{triggerEvent:t});this.dispatchEvent(s);this._requestTimeUpdates()}_handleDurationChange(t){if(this.mediaElement.ended){this._updateCurrentTime(this.mediaElement.duration,t)}this.dispatchEvent(st("vds-duration-change",{detail:this.mediaElement.duration,triggerEvent:t}))}_handleProgress(t){this.dispatchEvent(st("vds-progress",{triggerEvent:t,detail:{buffered:this.mediaElement.buffered,seekable:this.mediaElement.seekable}}))}_handleRateChange(t){throw Error("Not implemented")}_handleSeeking(t){this.dispatchEvent(st("vds-seeking",{detail:this.mediaElement.currentTime,triggerEvent:t}))}_handleSeeked(t){const s=st("vds-seeked",{detail:this.mediaElement.currentTime,triggerEvent:t});this.dispatchEvent(s);const i=this.mediaElement.currentTime;if(Math.trunc(i)===Math.trunc(this.mediaElement.duration)&&Ut(this.mediaElement.duration)>Ut(i)){this._updateCurrentTime(this.mediaElement.duration,t);if(!this.mediaElement.ended){try{this.play()}catch(t){}}}}_handleStalled(t){this.dispatchEvent(st("vds-stalled",{triggerEvent:t}));if(this.mediaElement.readyState<3){this._isMediaWaiting=true;this.dispatchEvent(st("vds-waiting",{triggerEvent:t}))}}_handleVolumeChange(t){this.dispatchEvent(st("vds-volume-change",{detail:{volume:this.mediaElement.volume,muted:this.mediaElement.muted},triggerEvent:t}))}_handleWaiting(t){if(this.mediaElement.readyState<3){this._isMediaWaiting=true;this.dispatchEvent(st("vds-waiting",{triggerEvent:t}))}}_handleSuspend(t){const s=st("vds-suspend",{triggerEvent:t});this.dispatchEvent(s)}_handleEnded(t){this._cancelTimeUpdates();this._updateCurrentTime(this.mediaElement.duration,t);const s=st("vds-end",{triggerEvent:t});this.dispatchEvent(s);if(this.state.loop){this._handleLoop()}else{this.dispatchEvent(st("vds-ended",{triggerEvent:t}))}}_handleLoop(){const t=vt(this.controls);if(t){this.mediaElement.controls=false}this.dispatchEvent(st("vds-loop-request"))}_handleError(t){const s=this.mediaElement.error;if(!s)return;this.dispatchEvent(st("vds-error",{detail:{message:s.message,code:s.code,mediaError:s},triggerEvent:t}))}_getPaused(){return this.mediaElement?.paused??true}_getVolume(){return this.mediaElement?.volume??1}_setVolume(t){this.mediaElement.volume=t}_getCurrentTime(){return this.mediaElement?.currentTime??0}_setCurrentTime(t){if(this.mediaElement.currentTime!==t){this.mediaElement.currentTime=t}}_getMuted(){return this.mediaElement?.muted??false}_setMuted(t){this.mediaElement.muted=t}async play(){try{this._throwIfNotReadyForPlayback();await this._resetPlaybackIfEnded();return this.mediaElement?.play()}catch(t){const s=st("vds-play-fail");s.autoplay=this._attemptingAutoplay;s.error=t;throw t}}async pause(){return this.mediaElement?.pause()}_getMediaType(){return Ei(this.state.currentSrc)}};Vs([di()],Ci.prototype,"preload",2);var Si=class extends Ci{static get styles(){return[Hs`:host{display:inline-block}:host([hidden]){display:none}`]}connectedCallback(){super.connectedCallback();this.dispatchEvent(st("vds-view-type-change",{detail:"audio"}))}};ds("vds-audio",Si);var Mi=Hs`:host{display:table;contain:content;user-select:none;cursor:pointer;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}:host(:focus){outline:0}:host(:focus-visible){outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}:host(.focus-visible){outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}`;var $i=class extends hi{constructor(){super();this.pressed=false;this.disabled=false;this._handleButtonClickCapture=Q(this,"click",(t=>{if(this.disabled){t.preventDefault();t.stopImmediatePropagation()}}),{capture:true});Ht(this);["pointerup","keydown"].forEach((t=>{Q(this,t,(t=>{if(this.disabled||gs(t)&&!ms(t)){return}this._handleButtonClick(t)}))}))}static get styles(){return[Mi]}static get parts(){return[]}connectedCallback(){super.connectedCallback();cs(this,"tabindex","0");cs(this,"role","button");this._updateAriaPressedAttr()}updated(t){if(t.has("pressed")){this._updateAriaPressedAttr()}}_updateAriaPressedAttr(){us(this,"aria-pressed",this.pressed?"true":"false")}render(){return this._renderDefaultSlot()}_renderDefaultSlot(){return M`<slot></slot>`}_handleButtonClick(t){this.pressed=!this.pressed}};Vs([di({type:Boolean})],$i.prototype,"pressed",2);Vs([di({type:Boolean,reflect:true})],$i.prototype,"disabled",2);var Ti=class{constructor(t){if(t){this._target=t;this._createLogger(t);this._requests=Zt(t)}else{this._requests=new Yt}}startLoading(t){this._dispatchRequest("vds-start-loading",{triggerEvent:t})}play(t){this._dispatchRequest("vds-play-request",{triggerEvent:t})}pause(t){this._dispatchRequest("vds-pause-request",{triggerEvent:t})}mute(t){this._dispatchRequest("vds-mute-request",{triggerEvent:t})}unmute(t){this._dispatchRequest("vds-unmute-request",{triggerEvent:t})}enterFullscreen(t,s){this._dispatchRequest("vds-enter-fullscreen-request",{triggerEvent:s,detail:t})}exitFullscreen(t,s){this._dispatchRequest("vds-exit-fullscreen-request",{triggerEvent:s,detail:t})}seeking(t,s){this._dispatchRequest("vds-seeking-request",{detail:t,triggerEvent:s})}seek(t,s){this._dispatchRequest("vds-seek-request",{detail:t,triggerEvent:s})}changeVolume(t,s){this._dispatchRequest("vds-volume-change-request",{detail:t,triggerEvent:s})}resumeUserIdle(t){this._dispatchRequest("vds-resume-user-idle-request",{triggerEvent:t})}pauseUserIdle(t){this._dispatchRequest("vds-pause-user-idle-request",{triggerEvent:t})}showPoster(t){this._dispatchRequest("vds-show-poster-request",{triggerEvent:t})}hidePoster(t){this._dispatchRequest("vds-hide-poster-request",{triggerEvent:t})}setTarget(t){if(this._target===t)return;this._target=t;if(t){this._createLogger(t);this._requests.start()}else{this._requests.stop()}}_dispatchRequest(t,s){this._requests.queue(t,(()=>{const i=st(t,{...s,bubbles:true,composed:true});this._target?.dispatchEvent(i)}))}_createLogger(t){}};var Pi=class extends $i{constructor(){super();this._mediaRemote=new Ti(this);qs(this,"paused",(t=>{this.pressed=!t;us(this,"paused",t)}))}connectedCallback(){super.connectedCallback();cs(this,"aria-label","Play")}_handleButtonClick(t){if(this.disabled)return;if(this.pressed){this._mediaRemote.pause(t)}else{this._mediaRemote.play(t)}}};ds("vds-play-button",Pi);var Fi=class extends $i{constructor(){super();this._mediaRemote=new Ti(this);this._volume=1;this._muted=false;qs(this,"volume",(t=>{this._volume=t;this._handleMutedChange()}));qs(this,"muted",(t=>{this._muted=t;this._handleMutedChange()}))}connectedCallback(){super.connectedCallback();cs(this,"aria-label","Mute")}_handleMutedChange(){const t=this._muted||this._volume===0;this.pressed=t;us(this,"muted",t)}_handleButtonClick(t){if(this.disabled)return;if(this.pressed){this._mediaRemote.unmute(t)}else{this._mediaRemote.mute(t)}}};ds("vds-mute-button",Fi);function Ai(){const t=is(false);const s=is(false);return{value:is(50),pointerValue:is(0),min:is(0),max:is(100),dragging:t,pointing:s,interactive:es([t,s],(([t,s])=>t||s))}}var Di=ot(Ai);var qi=Hs`*{box-sizing:border-box;touch-action:none}:host{display:block;contain:layout;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}:host(:focus){outline:0}:host(:focus-visible){outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}:host(.focus-visible){outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}`;var Oi=(t=>{t[t["Left"]=-1]="Left";t[t["ArrowLeft"]=-1]="ArrowLeft";t[t["Up"]=-1]="Up";t[t["ArrowUp"]=-1]="ArrowUp";t[t["Right"]=1]="Right";t[t["ArrowRight"]=1]="ArrowRight";t[t["Down"]=1]="Down";t[t["ArrowDown"]=1]="ArrowDown";return t})(Oi||{});var Li=class extends hi{constructor(){super();this._sliderStoreProvider=Di.provide(this);this.disabled=false;this.value=50;this._step=1;this._keyboardStep=1;this.shiftKeyMultiplier=5;this.customValueText=false;this._mediaRemote=new Ti(this);this._disconnectDisposal=new G;this._handlePointerEnter=Q(this,"pointerenter",(()=>{if(this.disabled)return;this.setAttribute("pointing","");this.store.pointing.set(true)}));this._handlePointerMove=Q(this,"pointermove",(t=>{if(this.disabled||this.isDragging)return;const s=this._getValueBasedOnThumbPosition(t);this.store.pointerValue.set(s);this._dispatchPointerValueChange(t)}));this._handlePointerLeave=Q(this,"pointerleave",(()=>{if(this.disabled)return;this.removeAttribute("pointing");this.store.pointing.set(false)}));this._handlePointerDown=Q(this,"pointerdown",(t=>{if(this.disabled)return;this._startDragging(t);this._onDrag(t)}));this._handleKeydown=Q(this,"keydown",(t=>{if(this.disabled)return;const{key:s,shiftKey:i}=t;const e=Object.keys(Oi).includes(s);if(!e)return;const n=!i?this.keyboardStep:this.keyboardStep*this.shiftKeyMultiplier;const r=Number(Oi[s]);const h=n*r;const a=(this.value+h)/this.step;const o=this.step*a;this.value=this._getClampedValue(o);this._dispatchValueChange(t)}));this._handleFillValueChange=Q(this,"vds-slider-value-change",this._updateFillCSSProps.bind(this));this._handlePointerValueChange=Q(this,"vds-slider-pointer-value-change",this._updatePointerCSSProps.bind(this));this._onDrag=ks((t=>{if(this.disabled||!this.isDragging)return;const s=this._getValueBasedOnThumbPosition(t);this.store.pointerValue.set(s);this._dispatchPointerValueChange(t)}));this._handleDocumentPointerUp=Q(this,"pointerup",(t=>{if(this.disabled||!this.isDragging)return;this._stopDragging(t)}),{target:document});this._handleDocumentTouchMove=Q(this,"touchmove",(t=>{if(this.disabled||!this.isDragging)return;t.preventDefault()}),{target:document,passive:false});this._handleDocumentPointerMove=Q(this,"pointermove",(t=>{if(this.disabled||!this.isDragging)return;this._onDrag(t)}),{target:document});this._lastDispatchedValue=this.value;this._dispatchValueChange=ks((t=>{if(this.value===this._lastDispatchedValue)return;this.dispatchEvent(st("vds-slider-value-change",{detail:this.value,triggerEvent:t}));this._lastDispatchedValue=this.value}));this._lastDispatchedPointerValue=this.pointerValue;this._dispatchPointerValueChange=ks((t=>{if(this.pointerValue===this._lastDispatchedPointerValue)return;const s=["vds-slider-pointer-value-change",this.isDragging&&"vds-slider-drag-value-change"];s.forEach((s=>{if(s){this.dispatchEvent(st(s,{detail:this.pointerValue,triggerEvent:t}))}}));this._lastDispatchedPointerValue=this.pointerValue}));Ht(this)}static get styles(){return[qi]}static get parts(){return[]}get store(){return this._sliderStoreProvider.value}get min(){return ns(this.store.min)}set min(t){this.store.min.set(t)}get max(){return ns(this.store.max)}set max(t){this.store.max.set(t)}get step(){return this._step}set step(t){this._step=t}get keyboardStep(){return this._keyboardStep}set keyboardStep(t){this._keyboardStep=t}get isDragging(){return ns(this.store.dragging)}get fillRate(){const t=this.max-this.min,s=this.value-this.min;return t>0?s/t:0}get fillPercent(){return this.fillRate*100}get pointerValue(){return ns(this.store.pointerValue)}get pointerRate(){const t=this.max-this.min,s=this.pointerValue-this.min;return t>0?s/t:0}get pointerPercent(){return this.pointerRate*100}connectedCallback(){super.connectedCallback();this._setupAriaAttrs();this._updateFillCSSProps();this._updatePointerCSSProps();this._disconnectDisposal.add(this.store.interactive.subscribe((t=>{us(this,"interactive",t)})))}willUpdate(t){if(t.has("value")||t.has("min")||t.has("max")){this.value=this._getClampedValue(this.value);this.store.value.set(this.value);this._updateFillCSSProps();this._dispatchValueChange()}if(t.has("disabled")&&this.disabled){this.store.dragging.set(false);this.store.pointing.set(false);this.removeAttribute("dragging");this.removeAttribute("pointing");this.removeAttribute("interactive");us(this,"aria-disabled",this.disabled)}if(!this.customValueText){this._updateAriaValueAttrs()}super.willUpdate(t)}disconnectedCallback(){this._onDrag.cancel();this._disconnectDisposal.empty();super.disconnectedCallback()}_updateFillCSSProps(){fs(this,"fill-value",`${this.value}`);fs(this,"fill-rate",`${this.fillRate}`);fs(this,"fill-percent",`${this.fillPercent}%`)}_updatePointerCSSProps(){fs(this,"pointer-value",`${this.pointerValue}`);fs(this,"pointer-rate",`${this.pointerRate}`);fs(this,"pointer-percent",`${this.pointerPercent}%`)}render(){return this._renderSlider()}_renderSlider(){return M`${this._renderDefaultSlot()}`}_renderDefaultSlot(){return M`<slot></slot>`}_setupAriaAttrs(){cs(this,"role","slider");cs(this,"tabindex","0");cs(this,"aria-orientation","horizontal");cs(this,"autocomplete","off")}_updateAriaValueAttrs(){this.setAttribute("aria-valuemin",this._getValueMin());this.setAttribute("aria-valuenow",this._getValueNow());this.setAttribute("aria-valuemax",this._getValueMax());this.setAttribute("aria-valuetext",this._getValueText())}_getValueMin(){return String(this.min)}_getValueNow(){return String(this.value)}_getValueMax(){return String(this.max)}_getValueText(){return`${Rt(this.value/this.max*100,2)}%`}_startDragging(t){if(this.isDragging)return;this.store.dragging.set(true);this.setAttribute("dragging","");const s=this._getValueBasedOnThumbPosition(t);this.store.pointerValue.set(s);this._dispatchPointerValueChange(t);this.dispatchEvent(st("vds-slider-drag-start",{triggerEvent:t,detail:this.value}));this._mediaRemote.pauseUserIdle(t)}_stopDragging(t){if(!this.isDragging)return;this.store.dragging.set(false);this._dispatchValueChange.cancel();this.removeAttribute("dragging");const s=this._getValueBasedOnThumbPosition(t);this.value=s;this.store.pointerValue.set(s);this._dispatchValueChange(t);this._dispatchPointerValueChange(t);this.dispatchEvent(st("vds-slider-drag-end",{triggerEvent:t,detail:this.value}));this._mediaRemote.resumeUserIdle(t)}_getClampedValue(t){return jt(this.min,Rt(t,Ut(this.step)),this.max)}_getValueFromRate(t){const s=jt(0,t,1);const i=this.max-this.min;const e=i*s;const n=Math.round(e/this.step);const r=this.step*n;return this.min+r}_getValueBasedOnThumbPosition(t){const s=t.clientX;const{left:i,width:e}=this.getBoundingClientRect();const n=(s-i)/e;return this._getValueFromRate(n)}};Vs([di({type:Number})],Li.prototype,"min",1);Vs([di({type:Number})],Li.prototype,"max",1);Vs([di({reflect:true,type:Boolean})],Li.prototype,"disabled",2);Vs([di({type:Number})],Li.prototype,"value",2);Vs([di({type:Number})],Li.prototype,"step",1);Vs([di({attribute:"keyboard-step",type:Number})],Li.prototype,"keyboardStep",1);Vs([di({attribute:"shift-key-multiplier",type:Number})],Li.prototype,"shiftKeyMultiplier",2);Vs([di({type:Boolean,attribute:"custom-value-text"})],Li.prototype,"customValueText",2);var Vi=Hs``;var Ni=class extends Li{constructor(){super();this._step=.1;this.value=0;this.valueText="{currentTime} out of {duration}";this.pauseWhileDragging=false;this.seekingRequestThrottle=100;this.__mediaDuration=0;this.__mediaPaused=true;this._handleSliderDragStart=Q(this,"vds-slider-drag-start",(t=>{this._togglePlaybackWhileDragging(t)}));this._handleSliderValueChange=Q(this,"vds-slider-value-change",(t=>{if(gs(t.originEvent)){this._dispatchSeekingRequest.cancel();this._mediaRemote.seek(this.value,t)}}));this._handleSliderDragValueChange=Q(this,"vds-slider-drag-value-change",(t=>{this._dispatchSeekingRequest(t)}));this._handleSliderDragEnd=Q(this,"vds-slider-drag-end",(t=>{this._dispatchSeekingRequest.cancel();this._mediaRemote.seek(this.value,t);this._togglePlaybackWhileDragging(t)}));this._dispatchSeekingRequest=Y((t=>{this._mediaRemote.seeking(this.value,t)}),this.seekingRequestThrottle);this._wasPlayingBeforeDragStart=false;qs(this,"currentTime",(t=>{this.value=t}));qs(this,"duration",(t=>{this.__mediaDuration=t;this.requestUpdate("max")}));qs(this,"paused",(t=>{this.__mediaPaused=t}))}static get styles(){return[super.styles,Vi]}connectedCallback(){super.connectedCallback();cs(this,"aria-label","Media time")}get min(){return 0}set min(t){}get max(){return this.__mediaDuration}set max(t){}update(t){if(t.has("disabled")&&this.disabled){this._dispatchSeekingRequest.cancel()}super.update(t)}disconnectedCallback(){this._dispatchSeekingRequest.cancel();super.disconnectedCallback()}_getValueMin(){return"0%"}_getValueNow(){return`${Math.round(this.fillPercent)}%`}_getValueText(){return this.valueText.replace("{currentTime}",ws(this.value)).replace("{duration}",ws(this.__mediaDuration))}_getValueMax(){return"100%"}_togglePlaybackWhileDragging(t){if(!this.pauseWhileDragging)return;if(this.isDragging&&!this.__mediaPaused){this._wasPlayingBeforeDragStart=true;this._mediaRemote.pause(t)}else if(this._wasPlayingBeforeDragStart&&!this.isDragging&&this.__mediaPaused){this._wasPlayingBeforeDragStart=false;this._mediaRemote.play(t)}}};Vs([di({attribute:false,state:true})],Ni.prototype,"value",2);Vs([di({attribute:false})],Ni.prototype,"min",1);Vs([di({attribute:false})],Ni.prototype,"max",1);Vs([di({attribute:"value-text"})],Ni.prototype,"valueText",2);Vs([di({attribute:"pause-while-dragging",type:Boolean})],Ni.prototype,"pauseWhileDragging",2);Vs([di({attribute:"seeking-request-throttle",type:Number})],Ni.prototype,"seekingRequestThrottle",2);Vs([ui()],Ni.prototype,"__mediaDuration",2);Vs([ui()],Ni.prototype,"__mediaPaused",2);ds("vds-time-slider",Ni);var Ri=class extends Li{constructor(){super();this.value=100;this._handleSliderValueChange=Q(this,"vds-slider-value-change",this._changeVolume.bind(this));this._handleSliderDragValueChange=Q(this,"vds-slider-drag-value-change",this._changeVolume.bind(this));qs(this,"volume",(t=>{this.value=t*100}))}connectedCallback(){super.connectedCallback();cs(this,"aria-label","Media volume")}get min(){return 0}set min(t){}get max(){return 100}set max(t){}_changeVolume(t){const s=t.detail;const i=Rt(s/100,3);this._mediaRemote.changeVolume(i,t)}};Vs([di({attribute:false})],Ri.prototype,"min",1);Vs([di({attribute:false})],Ri.prototype,"max",1);Vs([di({attribute:false,state:true})],Ri.prototype,"value",2);ds("vds-volume-slider",Ri);var ji=class extends hi{constructor(){super(...arguments);this._disposal=new G;this._sliderStoreConsumer=Di.consume(this);this.__value=0;this.type="current";this.showHours=false;this.padHours=false;this.decimalPlaces=2}static get styles(){return[Hs`:host{display:inline-block;contain:content}:host([hidden]){display:none}`]}get _sliderStore(){return this._sliderStoreConsumer.value}connectedCallback(){super.connectedCallback();this._handleTypeChange()}update(t){if(t.has("type")||t.has("format")){this._handleTypeChange()}super.update(t)}disconnectedCallback(){this._disposal.empty();super.disconnectedCallback()}render(){return M`${this._getValueText()}`}_handleTypeChange(){this._disposal.empty();const t=this._sliderStore[this.type==="current"?"value":"pointerValue"];const s=this.format==="percent"?this._createPercentStore(t):t;const i=s.subscribe((t=>{this.__value=t}));this._disposal.add(i)}_createPercentStore(t){return es([t,this._sliderStore.min,this._sliderStore.max],(([t,s,i])=>{const e=i-s;return t/e*100}))}_getValueText(){switch(this.format){case"percent":return this._getPercentFormat();case"time":return this._getTimeFormat();default:return`${this.__value}`}}_getPercentFormat(){return`${Rt(this.__value,this.decimalPlaces)}%`}_getTimeFormat(){return bs(this.__value,this.padHours,this.showHours)}};Vs([ui()],ji.prototype,"__value",2);Vs([di()],ji.prototype,"type",2);Vs([di()],ji.prototype,"format",2);Vs([di({attribute:"show-hours",type:Boolean})],ji.prototype,"showHours",2);Vs([di({attribute:"pad-hours",type:Boolean})],ji.prototype,"padHours",2);Vs([di({attribute:"decimal-places",type:Number})],ji.prototype,"decimalPlaces",2);ds("vds-slider-value-text",ji);var Ui=class extends hi{constructor(){super(...arguments);this._disposal=new G;this._mediaStoreConsumer=Ds.consume(this);this.__seconds=0;this.type="current";this.showHours=false;this.padHours=false;this.remainder=false}static get styles(){return[Hs`:host{display:inline-block;contain:content}:host([hidden]){display:none}`]}get _mediaStore(){return this._mediaStoreConsumer.value}connectedCallback(){super.connectedCallback();this._handleTypeChange()}update(t){if(t.has("type")||t.has("remainder")){this._handleTypeChange()}super.update(t)}disconnectedCallback(){this._disposal.empty();super.disconnectedCallback()}render(){return M`${this._getFormattedTime()}`}_handleTypeChange(){this._disposal.empty();const t=this._getTypeStore();const s=(this.remainder?this._createRemainderStore(t):t).subscribe((t=>{this.__seconds=t}));this._disposal.add(s)}_getTypeStore(){switch(this.type){case"buffered":return this._mediaStore.bufferedAmount;case"seekable":return this._mediaStore.seekableAmount;case"duration":return this._mediaStore.duration;default:return this._mediaStore.currentTime}}_createRemainderStore(t){return es([t,this._mediaStore.duration],(([t,s])=>Math.max(0,s-t)))}_getFormattedTime(){return bs(this.__seconds,this.padHours,this.showHours)}};Vs([ui()],Ui.prototype,"__seconds",2);Vs([di()],Ui.prototype,"type",2);Vs([di({attribute:"show-hours",type:Boolean})],Ui.prototype,"showHours",2);Vs([di({attribute:"pad-hours",type:Boolean})],Ui.prototype,"padHours",2);Vs([di({type:Boolean})],Ui.prototype,"remainder",2);ds("vds-time",Ui);const Ii='.sc-stzh-audio-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-audio-h{display:none}.sc-stzh-audio-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-audio-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-audio-h *.sc-stzh-audio,.sc-stzh-audio-h *.sc-stzh-audio::before,.sc-stzh-audio-h *.sc-stzh-audio::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-audio-h .has-focus.sc-stzh-audio{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-audio-h .stzh-fylingfocus-focused.sc-stzh-audio{outline-style:none !important}.sc-stzh-audio-h .stzh-fylingfocus-focused.sc-stzh-audio::-moz-focus-inner{border:0 !important}.sc-stzh-audio-h .sc-stzh-audio-s>[slot=transcript]{margin:0}.sc-stzh-audio-h .sc-stzh-audio-s>[slot=transcript] br{margin-bottom:var(--stzh-space-medium);content:" ";display:block}@media screen and (min-width: 600px){.sc-stzh-audio-h .sc-stzh-audio-s>[slot=transcript] br{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sc-stzh-audio-h .sc-stzh-audio-s>[slot=transcript] br{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sc-stzh-audio-h .sc-stzh-audio-s>[slot=transcript] br{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-audio.sc-stzh-audio{display:block;contain:none}.stzh-audio__audio.sc-stzh-audio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-audio__controls.sc-stzh-audio,.stzh-audio__transcript.sc-stzh-audio{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-audio__controls.sc-stzh-audio,.stzh-audio__transcript.sc-stzh-audio{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-audio__controls.sc-stzh-audio,.stzh-audio__transcript.sc-stzh-audio{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-audio__controls.sc-stzh-audio,.stzh-audio__transcript.sc-stzh-audio{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-audio__controls.sc-stzh-audio,.stzh-audio__transcript.sc-stzh-audio{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-audio__controls.sc-stzh-audio,.stzh-audio__transcript.sc-stzh-audio{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-audio__controls.sc-stzh-audio,.stzh-audio__transcript.sc-stzh-audio{padding-right:var(--stzh-space-xxlarge)}}.stzh-audio__controls.sc-stzh-audio{padding-bottom:var(--stzh-space-xsmall);padding-top:var(--stzh-space-large);position:relative;display:flex;flex-direction:column;background-color:var(--stzh-color-grey20)}@media screen and (min-width: 900px){.stzh-audio__controls.sc-stzh-audio{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-audio__controls.sc-stzh-audio{padding-bottom:var(--stzh-space-medium)}}.stzh-audio__controls-top.sc-stzh-audio,.stzh-audio__controls-bottom.sc-stzh-audio,.stzh-audio__controls-bottom-left.sc-stzh-audio,.stzh-audio__controls-bottom-right.sc-stzh-audio{display:flex;align-items:center}.stzh-audio__controls-top.sc-stzh-audio{margin-bottom:var(--stzh-space-small)}.stzh-audio__controls-bottom.sc-stzh-audio{display:flex;flex-direction:column;align-items:stretch}@media screen and (min-width: 600px){.stzh-audio__controls-bottom.sc-stzh-audio{flex-direction:row;align-items:center}}.stzh-audio__controls-bottom-left.sc-stzh-audio{margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-audio__controls-bottom-left.sc-stzh-audio{flex-grow:1;margin-bottom:0}}.stzh-audio__controls-bottom-right.sc-stzh-audio{align-self:flex-end}.stzh-audio__transcript.sc-stzh-audio{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xlarge);background-color:var(--stzh-color-grey10)}@media screen and (min-width: 900px){.stzh-audio__transcript.sc-stzh-audio{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-audio__transcript.sc-stzh-audio{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-audio__transcript.sc-stzh-audio{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-audio__transcript.sc-stzh-audio{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-audio__transcript.sc-stzh-audio{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-audio__transcript.sc-stzh-audio{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-audio__button.sc-stzh-audio{width:2.75rem;height:2.75rem;display:grid;place-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:var(--stzh-button-border-radius);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color;color:var(--stzh-color-primary70)}.stzh-audio__button.is-play.sc-stzh-audio,.stzh-audio__button.is-mute.sc-stzh-audio,.stzh-audio__button.is-transcript.sc-stzh-audio{margin-right:var(--stzh-space-xsmall)}.stzh-audio__button.is-mute.sc-stzh-audio{margin-left:auto}@media screen and (min-width: 600px){.stzh-audio__button.is-mute.sc-stzh-audio{margin-left:0px}}.stzh-audio__button.sc-stzh-audio:hover{color:var(--stzh-color-primary80);background-color:var(--stzh-color-secondary20)}.stzh-audio__loader-overlay.sc-stzh-audio{display:grid;place-items:center;position:absolute;z-index:3;top:0;left:0;width:100%;height:100%;background-color:var(--stzh-color-white);opacity:0;visibility:hidden}.stzh-audio__time.sc-stzh-audio{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-color-grey70);display:inline-flex;margin-right:var(--stzh-space-xlarge)}.stzh-audio__time-separator.sc-stzh-audio{margin:0 var(--stzh-space-xxsmall)}.stzh-audio__slider.sc-stzh-audio{--height:1rem;--thumb-width:1rem;--track-height:0.375rem;cursor:pointer;display:flex;align-items:center;height:var(--height)}.stzh-audio__slider.is-time.sc-stzh-audio{flex-grow:1}.stzh-audio__slider.is-volume.sc-stzh-audio{--track-height:0.25rem;flex-grow:1;min-width:5rem;max-width:7.5rem}@media screen and (min-width: 600px){.stzh-audio__slider.is-volume.sc-stzh-audio{display:flex;margin-right:auto}}.stzh-audio__slider-track.sc-stzh-audio{width:100%;height:var(--track-height);position:absolute;top:50%;left:0;z-index:0;transform:translateY(-50%);background-color:var(--stzh-color-black20op);transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-audio__slider.sc-stzh-audio:hover .stzh-audio__slider-track.sc-stzh-audio{background-color:var(--stzh-color-black30op)}.stzh-audio__slider-track.is-fill.sc-stzh-audio{background-color:var(--stzh-color-secondary40);transform-origin:left center;transform:translateY(-50%);width:calc(var(--vds-fill-rate) * 100%);z-index:1}.stzh-audio__slider.sc-stzh-audio:hover .stzh-audio__slider-track.is-fill.sc-stzh-audio{background-color:var(--stzh-color-secondary50)}.stzh-audio__slider.is-volume.sc-stzh-audio .stzh-audio__slider-track.sc-stzh-audio,.stzh-audio__slider.is-volume.sc-stzh-audio:hover .stzh-audio__slider-track.sc-stzh-audio{background-color:var(--stzh-color-black20op)}.stzh-audio__slider.is-volume.sc-stzh-audio .stzh-audio__slider-track.is-fill.sc-stzh-audio,.stzh-audio__slider.is-volume.sc-stzh-audio:hover .stzh-audio__slider-track.is-fill.sc-stzh-audio{background-color:var(--stzh-color-black50op)}.stzh-audio__slider-thumb-container.sc-stzh-audio{opacity:0;transition:opacity var(--stzh-base-transition-animation-speed);position:absolute;top:0;left:var(--vds-fill-percent);width:var(--thumb-width);height:100%;transform:translateX(-50%);z-index:2}.stzh-audio__slider-thumb-container.is-shown.sc-stzh-audio{opacity:1}.stzh-audio__slider.sc-stzh-audio:hover .stzh-audio__slider-thumb-container.sc-stzh-audio{opacity:1}.stzh-audio__slider[dragging].sc-stzh-audio .stzh-audio__slider-thumb-container.sc-stzh-audio{opacity:1;left:var(--vds-pointer-percent)}.stzh-audio__slider-thumb.sc-stzh-audio{position:absolute;top:50%;left:0;width:var(--thumb-width);height:var(--thumb-width);border-radius:50%;background-color:var(--stzh-color-white);border:0.125rem solid var(--stzh-color-primary70);transform:translateY(-50%)}.stzh-audio__media-preview-container.sc-stzh-audio{--width:2.625rem;--width-half:calc(var(--width) / 2);--top:-1.5rem;--left-clamp:max(var(--width-half), var(--vds-pointer-percent));--right-clamp:calc(100% - var(--width-half));--left:min(var(--left-clamp), var(--right-clamp));display:grid;place-items:center;position:absolute;width:auto;width:--width;top:var(--top);left:var(--left);opacity:0;transition:opacity var(--stzh-base-transition-animation-speed);transform:translateX(-50%);z-index:var(--stzh-z-index-popover);border-radius:var(--stzh-tooltip-border-radius);background-color:var(--stzh-color-coolgrey60);color:var(--stzh-color-white)}@supports (filter: var(--stzh-tooltip-drop-shadow)){.stzh-audio__media-preview-container.sc-stzh-audio{box-shadow:none;filter:var(--stzh-tooltip-drop-shadow)}}.stzh-audio__slider.is-time.sc-stzh-audio .stzh-audio__media-preview-container.sc-stzh-audio,.stzh-audio__slider.is-volume.sc-stzh-audio .stzh-audio__media-preview-container.sc-stzh-audio{width:auto;padding:var(--stzh-space-xxsmall)}.stzh-audio__slider[pointing].sc-stzh-audio .stzh-audio__media-preview-container.sc-stzh-audio{opacity:1}.stzh-audio__slider-text.sc-stzh-audio{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}.stzh-audio[hide-ui].sc-stzh-audio .stzh-audio__controls.sc-stzh-audio{opacity:0;visibility:hidden}.stzh-audio[autoplay-error].sc-stzh-audio .stzh-audio__controls.sc-stzh-audio{opacity:1}.stzh-audio.sc-stzh-audio:not([can-play]) .stzh-audio__loader-overlay.sc-stzh-audio,.stzh-audio[waiting].sc-stzh-audio .stzh-audio__loader-overlay.sc-stzh-audio{opacity:0.8;visibility:visible}.stzh-audio[paused].sc-stzh-audio .stzh-audio__paused.sc-stzh-audio{display:none}.stzh-audio.sc-stzh-audio:not([paused]) .stzh-audio__played.sc-stzh-audio{display:none}.stzh-audio[muted].sc-stzh-audio .stzh-audio__muted.sc-stzh-audio{display:none}.stzh-audio.sc-stzh-audio:not([muted]) .stzh-audio__unmuted.sc-stzh-audio{display:none}';const Bi=class{constructor(i){t(this,i);this.stzhPlay=s(this,"stzhPlay",7);this.stzhPlaying=s(this,"stzhPlaying",7);this.stzhPause=s(this,"stzhPause",7);this.stzhReplay=s(this,"stzhReplay",7);this.stzhEnd=s(this,"stzhEnd",7);this.stzhEnded=s(this,"stzhEnded",7);this.stzhError=s(this,"stzhError",7);this.localization=undefined;this.src="";this.preload="none";this.transcript="";this.transcriptShown=false;this.downloadAnalyticsId=undefined;this.transcriptAnalyticsId=undefined}async play(){this.vsdAudioElement.play()}async pause(){this.vsdAudioElement.pause()}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"audio")}}render(){const t=!!this.transcript||r(this.element,"transcript");const s={"stzh-audio":true};return i(e,null,i("vds-media",{class:s},i("vds-audio",{class:"stzh-audio__audio",ref:t=>this.vsdAudioElement=t,"onVds-play":()=>{this.stzhPlay.emit({component:"stzh-audio"})},"onVds-playing":()=>{this.stzhPlaying.emit({component:"stzh-audio"})},"onVds-end":()=>{this.stzhEnd.emit({component:"stzh-audio"})},"onVds-ended":()=>{this.stzhEnded.emit({component:"stzh-audio"})},"onVds-replay":()=>{this.stzhReplay.emit({component:"stzh-audio"})},"onVds-error":t=>{this.stzhError.emit({component:"stzh-audio",originalEvent:t})}},i("audio",{preload:this.preload,src:this.src},i("slot",null))),i("div",{class:"stzh-audio__controls"},i("div",{class:"stzh-audio__loader-overlay"},i("stzh-loader",{class:"stzh-audio__loader",label:this.localization.loading,"hide-label":true})),i("div",{class:"stzh-audio__controls-top"},i("vds-time-slider",{class:"stzh-audio__slider is-time"},i("div",{class:"stzh-audio__slider-track"}),i("div",{class:"stzh-audio__slider-track is-fill"}),i("div",{class:"stzh-audio__slider-thumb-container"},i("div",{class:"stzh-audio__slider-thumb"})),i("div",{class:"stzh-audio__media-preview-container"},i("vds-slider-value-text",{class:"stzh-audio__slider-text",type:"pointer",format:"time"})))),i("div",{class:"stzh-audio__controls-bottom"},i("div",{class:"stzh-audio__controls-bottom-left"},i("stzh-tooltip",null,i("vds-play-button",{class:"stzh-audio__button is-play"},i("stzh-icon",{class:"stzh-audio__played",name:"play"}),i("stzh-icon",{class:"stzh-audio__paused",name:"pause"})),i("span",{slot:"content"},i("span",{class:"stzh-audio__played"},this.localization.play),i("span",{class:"stzh-audio__paused"},this.localization.pause))),i("div",{class:"stzh-audio__time"},i("vds-time",{type:"current"}),i("span",{class:"stzh-audio__time-separator"},"/"),i("vds-time",{type:"duration"})),i("stzh-tooltip",null,i("vds-mute-button",{class:"stzh-audio__button is-mute"},i("stzh-icon",{class:"stzh-audio__muted",name:"volume-medium"}),i("stzh-icon",{class:"stzh-audio__unmuted",name:"silent-mode"})),i("span",{slot:"content"},i("span",{class:"stzh-audio__muted"},this.localization.mute),i("span",{class:"stzh-audio__unmuted"},this.localization.unmute))),i("vds-volume-slider",{class:"stzh-audio__slider is-volume"},i("div",{class:"stzh-audio__slider-track"}),i("div",{class:"stzh-audio__slider-track is-fill"}),i("div",{class:"stzh-audio__slider-thumb-container is-shown"},i("div",{class:"stzh-audio__slider-thumb"})),i("div",{class:"stzh-audio__media-preview-container"},i("vds-slider-value-text",{class:"stzh-audio__slider-text",type:"pointer",format:"percent"})))),i("div",{class:"stzh-audio__controls-bottom-right"},t&&i("stzh-tooltip",{content:this.transcriptShown?this.localization.hideTranscript:this.localization.showTranscript},i("button",{class:{"stzh-audio__button is-transcript":true,"is-active":this.transcriptShown},onClick:()=>this.transcriptShown=!this.transcriptShown,"s-object-id":this.transcriptAnalyticsId||(this.transcriptShown?this.localization.hideTranscript:this.localization.showTranscript)},i("stzh-icon",{name:"transcript"}))),i("stzh-tooltip",{content:this.localization.download},i("a",{class:"stzh-audio__button is-download",href:this.src,download:"","s-object-id":this.downloadAnalyticsId||this.localization.download},i("stzh-icon",{name:"download"})))))),i("div",{class:"stzh-audio__transcript",hidden:!this.transcriptShown},this.transcript?this.transcript:i("slot",{name:"transcript"}))))}get element(){return n(this)}};Bi.style=Ii;export{Bi as stzh_audio};
-//# sourceMappingURL=p-7754870d.entry.js.map
+//# sourceMappingURL=p-9c1b3929.entry.js.map

package/dist/stzh-components/{p-5c3fddec.entry.js → p-9c643610.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as a,a as o}from"./p-c7bfac7a.js";const i=':host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--color:var(--stzh-color-black);--background-color:transparent;--heading-background-color:transparent;--padding-left:var(--stzh-section-padding-left, 0px);--padding-right:var(--stzh-section-padding-right, 0px);--padding-top:var(--stzh-section-padding-top, var(--stzh-space-large));--padding-bottom:var(--stzh-section-padding-bottom, var(--stzh-space-large));--margin-top:var(--stzh-section-margin-top, 0px);--margin-bottom:var(--stzh-section-margin-bottom, 0px);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom)}@media screen and (min-width: 600px){:host{--padding-bottom:var(--stzh-section-padding-bottom, var(--stzh-space-xlarge))}}@media screen and (min-width: 1260px){:host{--padding-bottom:var(--stzh-section-padding-bottom, var(--stzh-space-xxxlarge))}}:host ::slotted(stzh-heading){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){:host ::slotted(stzh-heading){margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-heading){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 900px){:host ::slotted(stzh-heading){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-heading){margin-bottom:var(--stzh-space-large)}}:host(:where([breakout]:not([breakout="default"]))){position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width))}:host(:where([background]:not([background="default"]))){--padding-bottom:var(--stzh-section-background-padding-bottom, var(--stzh-space-xlarge));--margin-top:var(--stzh-section-background-margin-top, var(--stzh-space-medium));--margin-bottom:var(--stzh-section-background-margin-bottom, var(--stzh-space-medium))}@media screen and (min-width: 600px){:host(:where([background]:not([background="default"]))){--padding-bottom:var(--stzh-section-background-padding-bottom, var(--stzh-space-xxlarge))}}@media screen and (min-width: 1260px){:host(:where([background]:not([background="default"]))){--padding-bottom:var(--stzh-section-background-padding-bottom, var(--stzh-space-xxxxlarge));--margin-top:var(--stzh-section-background-margin-top, var(--stzh-space-xxlarge));--margin-bottom:var(--stzh-section-background-margin-bottom, var(--stzh-space-xxlarge))}}:host([background=secondary]){--background-color:var(--stzh-color-secondary20)}:host([background=primary]){--background-color:var(--stzh-color-primary70)}:host([variant=highlight]){--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--padding-top:var(--stzh-space-xlarge);--padding-bottom:var(--stzh-space-xlarge);--color:var(--stzh-section-highlight-color);--background-color:var(--stzh-section-highlight-background-color);--heading-background-color:var(--stzh-color-secondary40);--stzh-section-padding-top:0px;--stzh-section-padding-bottom:0px;--stzh-section-margin-top:0px;--stzh-section-margin-bottom:0px}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-left:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-bottom:var(--stzh-space-xxxlarge)}}:host([variant=contextbox]){--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:var(--stzh-space-medium);--padding-bottom:var(--stzh-space-medium);--color:var(--stzh-section-highlight-color);--background-color:var(--stzh-section-highlight-background-color);--heading-background-color:var(--stzh-color-secondary40);--stzh-section-padding-top:0px;--stzh-section-padding-bottom:0px;--stzh-section-margin-top:0px;--stzh-section-margin-bottom:0px}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-bottom:var(--stzh-space-xxlarge)}}:host([variant=contextbox]):last-child{margin-bottom:0}:host([margin-top=none]){--margin-top:0px}:host([margin-bottom=none]){--margin-bottom:0px}:host([padding-bottom=none]){--padding-bottom:0px}.stzh-section{background-color:var(--background-color)}.stzh-section__heading{display:flex;flex-direction:column;background-color:var(--heading-background-color);padding-left:var(--padding-left);padding-right:var(--padding-right)}.stzh-section__wrapper{padding-left:var(--padding-left);padding-right:var(--padding-right);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);--stzh-base-color:var(--color)}.stzh-section--is-breakout .stzh-section__outer{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-section--is-breakout .stzh-section__outer{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-section--is-breakout .stzh-section__outer{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-section--is-breakout .stzh-section__outer{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-section--is-breakout .stzh-section__outer{margin-left:auto;margin-right:auto;max-width:84.25rem}}';const n=class{constructor(a){t(this,a);this.variant="default";this.background="default";this.marginTop="default";this.marginBottom="default";this.paddingTop="default";this.paddingBottom="default";this.breakout=false}render(){return a(o,null,a("section",{class:{"stzh-section":true,[`stzh-section--is-breakout`]:this.breakout,[`stzh-section--${this.variant}`]:!!this.variant,[`stzh-section--margin-bottom-${this.marginBottom}`]:!!this.marginBottom}},a("div",{class:"stzh-section__outer"},a("div",{class:"stzh-section__heading"},a("slot",{name:"heading"})),a("div",{class:"stzh-section__wrapper"},a("slot",null)))))}};n.style=i;export{n as stzh_section};
-//# sourceMappingURL=p-5c3fddec.entry.js.map
+import{r as t,h as a,a as i}from"./p-c7bfac7a.js";const e=':host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--color:var(--stzh-color-black);--background-color:transparent;--heading-background-color:transparent;--padding-left:var(--stzh-section-padding-left, 0px);--padding-right:var(--stzh-section-padding-right, 0px);--padding-top:var(--stzh-section-padding-top, var(--stzh-space-large));--padding-bottom:var(--stzh-section-padding-bottom, var(--stzh-space-large));--margin-top:var(--stzh-section-margin-top, 0px);--margin-bottom:var(--stzh-section-margin-bottom, 0px);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom)}@media screen and (min-width: 600px){:host{--padding-bottom:var(--stzh-section-padding-bottom, var(--stzh-space-xlarge))}}@media screen and (min-width: 1260px){:host{--padding-bottom:var(--stzh-section-padding-bottom, var(--stzh-space-xxxlarge))}}:host ::slotted(stzh-heading){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){:host ::slotted(stzh-heading){margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-heading){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 900px){:host ::slotted(stzh-heading){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-heading){margin-bottom:var(--stzh-space-large)}}:host(:where([breakout]:not([breakout="default"]))){position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width))}:host(:where([background]:not([background="default"]))){--padding-bottom:var(--stzh-section-background-padding-bottom, var(--stzh-space-xlarge));--margin-top:var(--stzh-section-background-margin-top, var(--stzh-space-medium));--margin-bottom:var(--stzh-section-background-margin-bottom, var(--stzh-space-medium))}@media screen and (min-width: 600px){:host(:where([background]:not([background="default"]))){--padding-bottom:var(--stzh-section-background-padding-bottom, var(--stzh-space-xxlarge))}}@media screen and (min-width: 1260px){:host(:where([background]:not([background="default"]))){--padding-bottom:var(--stzh-section-background-padding-bottom, var(--stzh-space-xxxxlarge));--margin-top:var(--stzh-section-background-margin-top, var(--stzh-space-xxlarge));--margin-bottom:var(--stzh-section-background-margin-bottom, var(--stzh-space-xxlarge))}}:host([background=secondary]){--background-color:var(--stzh-color-secondary20)}:host([background=primary]){--background-color:var(--stzh-color-primary70)}:host([variant=highlight]){--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--padding-top:var(--stzh-space-xlarge);--padding-bottom:var(--stzh-space-xlarge);--color:var(--stzh-section-highlight-color);--background-color:var(--stzh-section-highlight-background-color);--heading-background-color:var(--stzh-color-secondary40);--stzh-section-padding-top:0px;--stzh-section-padding-bottom:0px;--stzh-section-margin-top:0px;--stzh-section-margin-bottom:0px}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-left:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-bottom:var(--stzh-space-xxxlarge)}}:host([variant=contextbox]){--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:var(--stzh-space-medium);--padding-bottom:var(--stzh-space-medium);--color:var(--stzh-section-highlight-color);--background-color:var(--stzh-section-highlight-background-color);--heading-background-color:var(--stzh-color-secondary40);--stzh-section-padding-top:0px;--stzh-section-padding-bottom:0px;--stzh-section-margin-top:0px;--stzh-section-margin-bottom:0px}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-bottom:var(--stzh-space-xxlarge)}}:host([variant=contextbox]):last-child{margin-bottom:0}:host([variant=greybox]){--background-color:var(--stzh-color-grey10);--padding-left:var(--stzh-space-xxlarge);--padding-right:var(--stzh-space-xxlarge);--padding-top:var(--stzh-space-medium);--padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 900px){:host([variant=greybox]){--padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([variant=greybox]){--padding-left:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){:host([variant=greybox]){--padding-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([variant=greybox]){--padding-right:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){:host([variant=greybox]){--padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=greybox]){--padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=greybox]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=greybox]){--padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=greybox]){--padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=greybox]){--padding-bottom:var(--stzh-space-xxlarge)}}:host([variant=greybox]):last-child{margin-bottom:0}:host([variant=poimax]){--background-color:var(--stzh-color-grey10);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:var(--stzh-space-medium);--padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){:host([variant=poimax]){--padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=poimax]){--padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=poimax]){--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=poimax]){--padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=poimax]){--padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=poimax]){--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=poimax]){--padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=poimax]){--padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=poimax]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=poimax]){--padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=poimax]){--padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=poimax]){--padding-bottom:var(--stzh-space-xxlarge)}}:host([variant=poimax]):last-child{margin-bottom:0}:host([margin-top=none]){--margin-top:0px}:host([margin-bottom=none]){--margin-bottom:0px}:host([padding-bottom=none]){--padding-bottom:0px}.stzh-section{background-color:var(--background-color)}.stzh-section__heading{display:flex;flex-direction:column;background-color:var(--heading-background-color);padding-left:var(--padding-left);padding-right:var(--padding-right)}.stzh-section__wrapper{padding-left:var(--padding-left);padding-right:var(--padding-right);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);--stzh-base-color:var(--color)}.stzh-section--is-breakout .stzh-section__outer{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-section--is-breakout .stzh-section__outer{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-section--is-breakout .stzh-section__outer{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-section--is-breakout .stzh-section__outer{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-section--is-breakout .stzh-section__outer{margin-left:auto;margin-right:auto;max-width:84.25rem}}';const n=class{constructor(a){t(this,a);this.variant="default";this.background="default";this.marginTop="default";this.marginBottom="default";this.paddingTop="default";this.paddingBottom="default";this.breakout=false}render(){return a(i,null,a("section",{class:{"stzh-section":true,[`stzh-section--is-breakout`]:this.breakout,[`stzh-section--${this.variant}`]:!!this.variant,[`stzh-section--margin-bottom-${this.marginBottom}`]:!!this.marginBottom}},a("div",{class:"stzh-section__outer"},a("div",{class:"stzh-section__heading"},a("slot",{name:"heading"})),a("div",{class:"stzh-section__wrapper"},a("slot",null)))))}};n.style=e;export{n as stzh_section};
+//# sourceMappingURL=p-9c643610.entry.js.map

package/dist/stzh-components/{p-5c3fddec.entry.js.map → p-9c643610.entry.js.map}

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

package/dist/stzh-components/{p-4f49450d.entry.js → p-9e4f0532.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t,a,g as s}from"./p-c7bfac7a.js";import{s as i,h}from"./p-7e304ea3.js";import{m as o,a as m,r as g}from"./p-10e2901a.js";import"./p-9b063923.js";const l=".sc-stzh-pagetitle-home-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-pagetitle-home-h{display:none}.sc-stzh-pagetitle-home-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagetitle-home-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagetitle-home-h *.sc-stzh-pagetitle-home,.sc-stzh-pagetitle-home-h *.sc-stzh-pagetitle-home::before,.sc-stzh-pagetitle-home-h *.sc-stzh-pagetitle-home::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-pagetitle-home-h .has-focus.sc-stzh-pagetitle-home{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pagetitle-home-h .stzh-fylingfocus-focused.sc-stzh-pagetitle-home{outline-style:none !important}.sc-stzh-pagetitle-home-h .stzh-fylingfocus-focused.sc-stzh-pagetitle-home::-moz-focus-inner{border:0 !important}.sc-stzh-pagetitle-home-h .sc-stzh-pagetitle-home-s>[slot=image]{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.sc-stzh-pagetitle-home-h .sc-stzh-pagetitle-home-s>[slot=heading]{--color:var(--stzh-pagetitle-home-heading-color, var(--stzh-color-secondary50))}.sc-stzh-pagetitle-home-h .sc-stzh-pagetitle-home-s>[slot=subheading]{--color:var(--stzh-pagetitle-home-heading-color, var(--stzh-heading-color))}.sc-stzh-pagetitle-home-h .sc-stzh-pagetitle-home-s>[slot=readspeaker] *{--color:var(--stzh-pagetitle-home-subheading-color, var(--stzh-heading-color));--hover-color:var(--stzh-pagetitle-home-subheading-color, var(--stzh-heading-color))}.sc-stzh-pagetitle-home-h[has-image] .sc-stzh-pagetitle-home-s>[slot=readspeaker] *{--color:var(--stzh-pagetitle-home-subheading-color, var(--stzh-color-white));--hover-color:var(--stzh-pagetitle-home-subheading-color, var(--stzh-color-white))}.sc-stzh-pagetitle-home-h[has-image] .sc-stzh-pagetitle-home-s>[slot=heading]{--color:var(--stzh-pagetitle-home-heading-color, var(--stzh-color-lemonyellow50))}.sc-stzh-pagetitle-home-h[has-image] .sc-stzh-pagetitle-home-s>[slot=subheading]{--color:var(--stzh-pagetitle-home-subheading-color, var(--stzh-color-white))}.stzh-pagetitle-home.sc-stzh-pagetitle-home{position:relative;padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-pagetitle-home.sc-stzh-pagetitle-home{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home.sc-stzh-pagetitle-home{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-pagetitle-home__container.sc-stzh-pagetitle-home{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-pagetitle-home__container.sc-stzh-pagetitle-home{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-pagetitle-home__container.sc-stzh-pagetitle-home{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__container.sc-stzh-pagetitle-home{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-pagetitle-home__container.sc-stzh-pagetitle-home{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr))}@media screen and (min-width: 600px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-bottom:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-pagetitle-home__image-wrapper.sc-stzh-pagetitle-home{position:relative}.stzh-pagetitle-home__image-inner-wrapper.sc-stzh-pagetitle-home{position:absolute;inset:0;height:100%;margin-left:calc(1.25rem / -1);margin-right:calc(1.25rem / -1)}@media screen and (min-width: 600px){.stzh-pagetitle-home__image-inner-wrapper.sc-stzh-pagetitle-home{margin-left:calc(2rem / -1);margin-right:calc(2rem / -1)}}@media screen and (min-width: 900px){.stzh-pagetitle-home__image-inner-wrapper.sc-stzh-pagetitle-home{margin-left:0;margin-right:0;width:calc(100% + 2.5rem)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__image-inner-wrapper.sc-stzh-pagetitle-home{width:calc(100% + 4rem)}}@media screen and (min-width: 1600px){.stzh-pagetitle-home__image-inner-wrapper.sc-stzh-pagetitle-home{width:calc(100% + ((100rem - 84.25rem) / 2))}}.stzh-pagetitle-home__image-gradient.sc-stzh-pagetitle-home{position:absolute;background:linear-gradient(1.21deg, rgba(0, 0, 0, 0) 31.71%, rgba(0, 0, 0, 0.5) 83.84%);top:0;right:0;bottom:0;left:0;z-index:1}@media screen and (min-width: 600px){.stzh-pagetitle-home__image-gradient.sc-stzh-pagetitle-home{background:linear-gradient(270deg, rgba(0, 0, 0, 0) 31.21%, rgba(0, 0, 0, 0.5) 91.45%)}}.stzh-pagetitle-home__meta.sc-stzh-pagetitle-home{display:flex;flex-direction:column-reverse;row-gap:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pagetitle-home__meta.sc-stzh-pagetitle-home{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pagetitle-home__meta.sc-stzh-pagetitle-home{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__meta.sc-stzh-pagetitle-home{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle-home__meta.sc-stzh-pagetitle-home{flex-direction:row}}@media screen and (min-width: 600px) and (max-width: 899px){.stzh-pagetitle-home__readspeaker.sc-stzh-pagetitle-home{--stzh-readspeaker-dropdown-position:relative;--stzh-readspeaker-dropdown-top:auto}}.stzh-pagetitle-home__subheading.sc-stzh-pagetitle-home{--stzh-base-lead-color:var(--stzh-heading-color)}.stzh-pagetitle-home__heading.sc-stzh-pagetitle-home:not(:empty)+.stzh-pagetitle-home__subheading.sc-stzh-pagetitle-home:not(:empty){margin-top:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-pagetitle-home__heading.sc-stzh-pagetitle-home:not(:empty)+.stzh-pagetitle-home__subheading.sc-stzh-pagetitle-home:not(:empty){margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__heading.sc-stzh-pagetitle-home:not(:empty)+.stzh-pagetitle-home__subheading.sc-stzh-pagetitle-home:not(:empty){margin-top:var(--stzh-space-medium)}}.stzh-pagetitle-home__heading.sc-stzh-pagetitle-home,.stzh-pagetitle-home__subheading.sc-stzh-pagetitle-home,.stzh-pagetitle-home__meta.sc-stzh-pagetitle-home{grid-column:1/span 4}@media screen and (min-width: 900px){.stzh-pagetitle-home__heading.sc-stzh-pagetitle-home,.stzh-pagetitle-home__subheading.sc-stzh-pagetitle-home,.stzh-pagetitle-home__meta.sc-stzh-pagetitle-home{grid-column:1/span 10}}.stzh-pagetitle-home--has-no-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__ratio.sc-stzh-pagetitle-home{display:none}.stzh-pagetitle-home--has-no-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pagetitle-home--has-no-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pagetitle-home--has-no-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home--has-no-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xxlarge)}}.stzh-pagetitle-home--has-image.sc-stzh-pagetitle-home{padding-bottom:0}.stzh-pagetitle-home--has-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__container.sc-stzh-pagetitle-home{position:absolute;top:0;right:0;left:0;z-index:1}.stzh-pagetitle-home--has-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-pagetitle-home--has-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home--has-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xxxxlarge)}}";const r=class{constructor(t){e(this,t);this.mediaChangeHandler=()=>{this.isSmall=o("small").matches};this.init=()=>{const e=this.element.querySelector('stzh-heading[slot="heading"], [slot="heading"] stzh-heading');const t=this.element.querySelector('stzh-text[slot="subheading"], [slot="subheading"] stzh-text');const a=this.element.querySelector('[slot="readspeaker"] stzh-button');if(e){i(e,{curve:"h1home",level:"1"})}if(a){i(a,{variant:"tertiary-plain",noPaddingLeft:true,noPaddingRight:true,size:"small",sizeMedium:"tiny",buttonAccesskey:"L"})}if(t){i(t,{curve:"hero",lead:true})}};this.isSmall=undefined}componentDidRender(){}connectedCallback(){console.log("1234");this.init();this.mediaChangeHandler();m(this.mediaChangeHandler)}disconnectedCallback(){g(this.mediaChangeHandler)}render(){const e=h(this.element,"image");const s=h(this.element,"subheading");const i=h(this.element,"readspeaker");const o={"stzh-pagetitle-home":true,"stzh-pagetitle-home--has-image":e,"stzh-pagetitle-home--has-no-image":!e,"stzh-pagetitle-home--has-subheading":s,"stzh-pagetitle-home--has-meta":i};return t(a,{"has-image":e},t("div",{class:o},t("div",{class:"stzh-pagetitle-home__image-wrapper"},t("stzh-ratio",{ratio:"4:3",portrait:!this.isSmall,ratioSmall:"16:9",ratioMedium:"2:1",ratioLarge:"21:9",class:"stzh-pagetitle-home__ratio"}),t("div",{class:"stzh-pagetitle-home__image-gradient"}),t("div",{class:"stzh-pagetitle-home__image-inner-wrapper"},t("slot",{name:"image"}))),t("div",{class:"stzh-pagetitle-home__container"},t("div",{class:"stzh-pagetitle-home__wrapper"},t("div",{class:"stzh-pagetitle-home__text"},t("div",{class:"stzh-pagetitle-home__meta"},t("div",{class:"stzh-pagetitle-home__readspeaker"},t("slot",{name:"readspeaker"}))),t("div",{class:"stzh-pagetitle-home__heading"},t("slot",{name:"heading"})),t("div",{class:"stzh-pagetitle-home__subheading"},t("slot",{name:"subheading"})))))))}get element(){return s(this)}};r.style=l;export{r as stzh_pagetitle_home};
-//# sourceMappingURL=p-4f49450d.entry.js.map
+import{r as e,h as t,a,g as s}from"./p-c7bfac7a.js";import{s as i,h}from"./p-e30a5acc.js";import{m as o,a as m,r as g}from"./p-10e2901a.js";import"./p-9b063923.js";const r='.sc-stzh-pagetitle-home-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-pagetitle-home-h{display:none}.sc-stzh-pagetitle-home-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagetitle-home-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagetitle-home-h *.sc-stzh-pagetitle-home,.sc-stzh-pagetitle-home-h *.sc-stzh-pagetitle-home::before,.sc-stzh-pagetitle-home-h *.sc-stzh-pagetitle-home::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-pagetitle-home-h .has-focus.sc-stzh-pagetitle-home{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pagetitle-home-h .stzh-fylingfocus-focused.sc-stzh-pagetitle-home{outline-style:none !important}.sc-stzh-pagetitle-home-h .stzh-fylingfocus-focused.sc-stzh-pagetitle-home::-moz-focus-inner{border:0 !important}.sc-stzh-pagetitle-home-h .sc-stzh-pagetitle-home-s>[slot=image]{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.sc-stzh-pagetitle-home-h .sc-stzh-pagetitle-home-s>[slot=heading]{--color:var(--stzh-pagetitle-home-heading-color, var(--stzh-color-secondary50))}.sc-stzh-pagetitle-home-h .sc-stzh-pagetitle-home-s>[slot=subheading]{--color:var(--stzh-pagetitle-home-heading-color, var(--stzh-heading-color))}.sc-stzh-pagetitle-home-h .sc-stzh-pagetitle-home-s>[slot=readspeaker] *{--color:var(--stzh-pagetitle-home-subheading-color, var(--stzh-heading-color));--hover-color:var(--stzh-pagetitle-home-subheading-color, var(--stzh-heading-color))}.sc-stzh-pagetitle-home-h[has-image] .sc-stzh-pagetitle-home-s>[slot=readspeaker] *{--color:var(--stzh-pagetitle-home-subheading-color, var(--stzh-color-white));--hover-color:var(--stzh-pagetitle-home-subheading-color, var(--stzh-color-white))}.sc-stzh-pagetitle-home-h[has-image] .sc-stzh-pagetitle-home-s>[slot=heading]{--color:var(--stzh-pagetitle-home-heading-color, var(--stzh-color-lemonyellow50))}.sc-stzh-pagetitle-home-h[has-image] .sc-stzh-pagetitle-home-s>[slot=subheading]{--color:var(--stzh-pagetitle-home-subheading-color, var(--stzh-color-white))}.stzh-pagetitle-home.sc-stzh-pagetitle-home{position:relative;padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-pagetitle-home.sc-stzh-pagetitle-home{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home.sc-stzh-pagetitle-home{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-pagetitle-home__container.sc-stzh-pagetitle-home{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-pagetitle-home__container.sc-stzh-pagetitle-home{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-pagetitle-home__container.sc-stzh-pagetitle-home{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__container.sc-stzh-pagetitle-home{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-pagetitle-home__container.sc-stzh-pagetitle-home{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr))}@media screen and (min-width: 600px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-bottom:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-pagetitle-home__image-wrapper.sc-stzh-pagetitle-home{position:relative}.stzh-pagetitle-home__image-inner-wrapper.sc-stzh-pagetitle-home{position:absolute;inset:0;height:100%;margin-left:calc(1.25rem / -1);margin-right:calc(1.25rem / -1)}@media screen and (min-width: 600px){.stzh-pagetitle-home__image-inner-wrapper.sc-stzh-pagetitle-home{margin-left:calc(2rem / -1);margin-right:calc(2rem / -1)}}@media screen and (min-width: 900px){.stzh-pagetitle-home__image-inner-wrapper.sc-stzh-pagetitle-home{margin-left:0;margin-right:0;width:calc(100% + 2.5rem)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__image-inner-wrapper.sc-stzh-pagetitle-home{width:calc(100% + 4rem)}}@media screen and (min-width: 1600px){.stzh-pagetitle-home__image-inner-wrapper.sc-stzh-pagetitle-home{width:calc(100% + ((100rem - 84.25rem) / 2))}}.stzh-pagetitle-home__image-gradient.sc-stzh-pagetitle-home{position:absolute;background:linear-gradient(1.21deg, rgba(0, 0, 0, 0) 31.71%, rgba(0, 0, 0, 0.5) 83.84%);top:0;right:0;bottom:0;left:0;z-index:1}@media screen and (min-width: 600px){.stzh-pagetitle-home__image-gradient.sc-stzh-pagetitle-home{background:linear-gradient(270deg, rgba(0, 0, 0, 0) 31.21%, rgba(0, 0, 0, 0.5) 91.45%)}}@media screen and (min-width: 1600px){.stzh-pagetitle-home__image-gradient.sc-stzh-pagetitle-home{left:calc((100vw - 84.25rem) / 2)}.stzh-pagetitle-home__image-gradient.sc-stzh-pagetitle-home:before{content:"";position:absolute;background:rgba(0, 0, 0, 0.5);top:0;right:calc((100vw - 84.25rem) / 2 + 84.25rem - var(--stzh-scrollbar-width, 0px));bottom:0;left:calc((100vw - 84.25rem) / 2 * -1 - var(--stzh-scrollbar-width, 0px));z-index:1}}.stzh-pagetitle-home__meta.sc-stzh-pagetitle-home{display:flex;flex-direction:column-reverse;row-gap:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pagetitle-home__meta.sc-stzh-pagetitle-home{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pagetitle-home__meta.sc-stzh-pagetitle-home{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__meta.sc-stzh-pagetitle-home{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle-home__meta.sc-stzh-pagetitle-home{flex-direction:row}}@media screen and (min-width: 600px) and (max-width: 899px){.stzh-pagetitle-home__readspeaker.sc-stzh-pagetitle-home{--stzh-readspeaker-dropdown-position:relative;--stzh-readspeaker-dropdown-top:auto}}.stzh-pagetitle-home__subheading.sc-stzh-pagetitle-home{--stzh-base-lead-color:var(--stzh-heading-color)}.stzh-pagetitle-home__heading.sc-stzh-pagetitle-home:not(:empty)+.stzh-pagetitle-home__subheading.sc-stzh-pagetitle-home:not(:empty){margin-top:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-pagetitle-home__heading.sc-stzh-pagetitle-home:not(:empty)+.stzh-pagetitle-home__subheading.sc-stzh-pagetitle-home:not(:empty){margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__heading.sc-stzh-pagetitle-home:not(:empty)+.stzh-pagetitle-home__subheading.sc-stzh-pagetitle-home:not(:empty){margin-top:var(--stzh-space-medium)}}.stzh-pagetitle-home__heading.sc-stzh-pagetitle-home,.stzh-pagetitle-home__subheading.sc-stzh-pagetitle-home,.stzh-pagetitle-home__meta.sc-stzh-pagetitle-home{grid-column:1/span 4}@media screen and (min-width: 900px){.stzh-pagetitle-home__heading.sc-stzh-pagetitle-home,.stzh-pagetitle-home__subheading.sc-stzh-pagetitle-home,.stzh-pagetitle-home__meta.sc-stzh-pagetitle-home{grid-column:1/span 10}}.stzh-pagetitle-home__ratio.sc-stzh-pagetitle-home{--max-height:42.5rem;--overflow:hidden}.stzh-pagetitle-home--has-no-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__ratio.sc-stzh-pagetitle-home{display:none}.stzh-pagetitle-home--has-no-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pagetitle-home--has-no-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pagetitle-home--has-no-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home--has-no-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xxlarge)}}.stzh-pagetitle-home--has-image.sc-stzh-pagetitle-home{padding-bottom:0}.stzh-pagetitle-home--has-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__container.sc-stzh-pagetitle-home{position:absolute;top:0;right:0;left:0;z-index:1}.stzh-pagetitle-home--has-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-pagetitle-home--has-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home--has-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xxxxlarge)}}';const l=class{constructor(t){e(this,t);this.mediaChangeHandler=()=>{this.isSmall=o("small").matches};this.init=()=>{const e=this.element.querySelector('stzh-heading[slot="heading"], [slot="heading"] stzh-heading');const t=this.element.querySelector('stzh-text[slot="subheading"], [slot="subheading"] stzh-text');const a=this.element.querySelector('[slot="readspeaker"] stzh-button');if(e){i(e,{curve:"h1home",level:"1"})}if(a){i(a,{variant:"tertiary-plain",noPaddingLeft:true,noPaddingRight:true,size:"small",sizeMedium:"tiny",buttonAccesskey:"L"})}if(t){i(t,{curve:"hero",lead:true})}};this.isSmall=undefined}componentDidRender(){}connectedCallback(){console.log("1234");this.init();this.mediaChangeHandler();m(this.mediaChangeHandler)}disconnectedCallback(){g(this.mediaChangeHandler)}render(){const e=h(this.element,"image");const s=h(this.element,"subheading");const i=h(this.element,"readspeaker");const o={"stzh-pagetitle-home":true,"stzh-pagetitle-home--has-image":e,"stzh-pagetitle-home--has-no-image":!e,"stzh-pagetitle-home--has-subheading":s,"stzh-pagetitle-home--has-meta":i};return t(a,{"has-image":e},t("div",{class:o},t("div",{class:"stzh-pagetitle-home__image-wrapper"},t("stzh-ratio",{ratio:"4:3",portrait:!this.isSmall,ratioSmall:"16:9",ratioMedium:"2:1",ratioLarge:"21:9",class:"stzh-pagetitle-home__ratio"}),t("div",{class:"stzh-pagetitle-home__image-gradient"}),t("div",{class:"stzh-pagetitle-home__image-inner-wrapper"},t("slot",{name:"image"}))),t("div",{class:"stzh-pagetitle-home__container"},t("div",{class:"stzh-pagetitle-home__wrapper"},t("div",{class:"stzh-pagetitle-home__text"},t("div",{class:"stzh-pagetitle-home__meta"},t("div",{class:"stzh-pagetitle-home__readspeaker"},t("slot",{name:"readspeaker"}))),t("div",{class:"stzh-pagetitle-home__heading"},t("slot",{name:"heading"})),t("div",{class:"stzh-pagetitle-home__subheading"},t("slot",{name:"subheading"})))))))}get element(){return s(this)}};l.style=r;export{l as stzh_pagetitle_home};
+//# sourceMappingURL=p-9e4f0532.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["stzhPagetitleHomeCss","StzhPagetitleHome","this","mediaChangeHandler","isSmall","media","matches","init","heading","element","querySelector","subheading","readspeakerButton","setPropsIfNull","curve","level","variant","noPaddingLeft","noPaddingRight","size","sizeMedium","buttonAccesskey","lead","componentDidRender","connectedCallback","console","log","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","imageSlotUsed","hasSlot","subheadingSlotUsed","readspeakerSlotUsed","classes","h","Host","class","ratio","portrait","ratioSmall","ratioMedium","ratioLarge","name"],"sources":["src/components/stzh-pagetitle-home/stzh-pagetitle-home.scss?tag=stzh-pagetitle-home&encapsulation=scoped","src/components/stzh-pagetitle-home/stzh-pagetitle-home.tsx"],"sourcesContent":["/**\n   * @prop --stzh-pagetitle-home-heading-color: Color of the heading\n   * @prop --stzh-pagetitle-home-subheading-color: Color of the subheading and readspeaker slot\n */\n\n:host {\n  ::slotted([slot=\"image\"]) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  ::slotted([slot=\"heading\"]) {\n    --color: var(--stzh-pagetitle-home-heading-color, #{$colorSecondary50});\n  }\n\n  ::slotted([slot=\"subheading\"]) {\n    --color: var(--stzh-pagetitle-home-heading-color, #{$headingColor});\n  }\n\n  ::slotted([slot=\"readspeaker\"]) * {\n    --color: var(--stzh-pagetitle-home-subheading-color, #{$headingColor});\n    --hover-color: var(--stzh-pagetitle-home-subheading-color, #{$headingColor});\n  }\n\n  &[has-image] ::slotted([slot=\"readspeaker\"]) * {\n    --color: var(--stzh-pagetitle-home-subheading-color, #{$colorWhite});\n    --hover-color: var(--stzh-pagetitle-home-subheading-color, #{$colorWhite});\n  }\n\n  &[has-image] ::slotted([slot=\"heading\"]) {\n    --color: var(--stzh-pagetitle-home-heading-color, #{$colorLemonyellow50});\n  }\n\n  &[has-image] ::slotted([slot=\"subheading\"]) {\n    --color: var(--stzh-pagetitle-home-subheading-color, #{$colorWhite});\n  }\n}\n\n.stzh-pagetitle-home {\n  position: relative;\n  @include spaceCurve('padding-bottom', 'large');\n\n  &__container {\n    @include container;\n  }\n\n  &__text {\n    @include spaceCurve('padding-top', 'big');\n    @include spaceCurve('padding-bottom', 'big');\n    @include grid;\n  }\n\n\n  &__image-wrapper {\n    position: relative;\n  }\n\n  &__image-inner-wrapper {\n    position: absolute;\n    inset: 0;\n    height: 100%;\n    margin-left: calc(#{$containerMargin} / -1);\n    margin-right: calc(#{$containerMargin} / -1);\n\n    @include mq($from: small) {\n      margin-left: calc(#{$containerMarginSmall} / -1);\n      margin-right: calc(#{$containerMarginSmall} / -1);\n    }\n\n    @include mq($from: medium) {\n      margin-left: 0;\n      margin-right: 0;\n      width: calc(100% + #{$containerMarginMedium});\n    }\n\n    @include mq($from: large) {\n      width: calc(100% + #{$containerMarginLarge});\n    }\n\n    @include mq($from: ultra) {\n      width: calc(100% + ((#{map-get($breakpoints, 'ultra')} - #{$containerMaxWidth}) / 2));\n    }\n  }\n\n  &__image-gradient {\n    position: absolute;\n    background: linear-gradient(1.21deg, rgba(0, 0, 0, 0) 31.71%, rgba(0, 0, 0, 0.5) 83.84%);\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 1;\n\n    @include mq($from: small) {\n      background: linear-gradient(270deg, rgba(0, 0, 0, 0) 31.21%, rgba(0, 0, 0, 0.5) 91.45%);\n    }\n\n    @include mq($from: ultra) {\n      left: calc((100vw - #{$containerMaxWidth}) / 2);\n\n      &:before {\n        content: '';\n        position: absolute;\n        background: rgba(0, 0, 0, 0.5);\n        top: 0;\n        right: calc((100vw - #{$containerMaxWidth}) / 2 + #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px));\n        bottom: 0;\n        left: calc((100vw - #{$containerMaxWidth}) / 2 * -1 - var(--stzh-scrollbar-width, 0px));\n        z-index: 1;\n      }\n    }\n  }\n\n\n  &__meta {\n    display: flex;\n    flex-direction: column-reverse;\n    row-gap: space('xsmall');\n    @include spaceCurve('margin-bottom', 'regular');\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &__readspeaker {\n    @include mq($from: small, $to: medium) {\n      --stzh-readspeaker-dropdown-position: relative;\n      --stzh-readspeaker-dropdown-top: auto;\n    }\n  }\n\n  &__subheading {\n    --stzh-base-lead-color: #{$headingColor};\n  }\n\n  &__heading:not(:empty) + &__subheading:not(:empty) {\n    @include spaceCurve('margin-top', 'tiny');\n  }\n\n  &__heading,\n  &__subheading,\n  &__meta {\n    grid-column: 1 / span 4;\n\n    @include mq($from: medium) {\n      grid-column: 1 / span 10;\n    }\n  }\n\n  &__ratio {\n    --max-height: 680px;\n    --overflow: hidden;\n  }\n\n  /* Has no image variant */\n\n  &--has-no-image &__ratio {\n    display: none;\n  }\n\n  &--has-no-image &__text {\n    @include spaceCurve('padding-top', 'regular');\n  }\n\n  /* Has image variant */\n\n  &--has-image {\n    padding-bottom: 0;\n  }\n\n  &--has-image &__container {\n    position: absolute;\n    top: 0;\n    right: 0;\n    left: 0;\n    z-index: 1;\n  }\n\n  &--has-image &__text {\n    @include spaceCurve('padding-top', 'large');\n  }\n}\n","import { Component, Element, h, Host, State } from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../utils/media-utils\";\n\n/**\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot subheading - Slot for `stzh-text` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n */\n@Component({\n  tag: \"stzh-pagetitle-home\",\n  styleUrl: \"stzh-pagetitle-home.scss\",\n  scoped: true,\n})\nexport class StzhPagetitleHome {\n  @Element() element: HTMLStzhPagetitleHomeElement;\n\n  @State() isSmall: boolean;\n\n  private mediaChangeHandler = () => {\n    this.isSmall = media(\"small\").matches;\n  };\n\n  private init = () => {\n    const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n    const subheading = this.element.querySelector('stzh-text[slot=\"subheading\"], [slot=\"subheading\"] stzh-text');\n    const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n\n    if (heading) {\n      setPropsIfNull(heading, {\n        curve: \"h1home\",\n        level: \"1\",\n      } as HTMLStzhHeadingElement);\n    }\n\n    if (readspeakerButton) {\n      setPropsIfNull(readspeakerButton, {\n        variant: \"tertiary-plain\",\n        noPaddingLeft: true,\n        noPaddingRight: true,\n        size: \"small\",\n        sizeMedium: \"tiny\",\n        buttonAccesskey: \"L\",\n      } as HTMLStzhButtonElement);\n    }\n\n    if (subheading) {\n      setPropsIfNull(subheading, {\n        curve: \"hero\",\n        lead: true,\n      } as HTMLStzhTextElement);\n    }\n  };\n\n  componentDidRender() {}\n\n  connectedCallback() {\n    console.log(\"1234\");\n    this.init();\n    this.mediaChangeHandler();\n    addMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  render() {\n    const imageSlotUsed = hasSlot(this.element, \"image\");\n    const subheadingSlotUsed = hasSlot(this.element, \"subheading\");\n    const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n\n    const classes = {\n      \"stzh-pagetitle-home\": true,\n      \"stzh-pagetitle-home--has-image\": imageSlotUsed,\n      \"stzh-pagetitle-home--has-no-image\": !imageSlotUsed,\n      \"stzh-pagetitle-home--has-subheading\": subheadingSlotUsed,\n      \"stzh-pagetitle-home--has-meta\": readspeakerSlotUsed,\n    };\n\n    return (\n      <Host has-image={imageSlotUsed}>\n        <div class={classes}>\n          <div class=\"stzh-pagetitle-home__image-wrapper\">\n            <stzh-ratio\n              ratio={\"4:3\"}\n              portrait={!this.isSmall}\n              ratioSmall={\"16:9\"}\n              ratioMedium={\"2:1\"}\n              ratioLarge={\"21:9\"}\n              class=\"stzh-pagetitle-home__ratio\"\n            ></stzh-ratio>\n            <div class=\"stzh-pagetitle-home__image-gradient\"></div>\n            <div class=\"stzh-pagetitle-home__image-inner-wrapper\">\n              <slot name=\"image\"></slot>\n            </div>\n          </div>\n          <div class=\"stzh-pagetitle-home__container\">\n            <div class=\"stzh-pagetitle-home__wrapper\">\n              <div class=\"stzh-pagetitle-home__text\">\n                <div class=\"stzh-pagetitle-home__meta\">\n                  <div class=\"stzh-pagetitle-home__readspeaker\">\n                    <slot name=\"readspeaker\"></slot>\n                  </div>\n                </div>\n\n                <div class=\"stzh-pagetitle-home__heading\">\n                  <slot name=\"heading\"></slot>\n                </div>\n\n                <div class=\"stzh-pagetitle-home__subheading\">\n                  <slot name=\"subheading\"></slot>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oKAAA,MAAMA,EAAuB,0lV,MCgBhBC,EAAiB,M,yBAKpBC,KAAAC,mBAAqB,KAC3BD,KAAKE,QAAUC,EAAM,SAASC,OAAO,EAG/BJ,KAAAK,KAAO,KACb,MAAMC,EAAUN,KAAKO,QAAQC,cAAc,+DAC3C,MAAMC,EAAaT,KAAKO,QAAQC,cAAc,+DAC9C,MAAME,EAAoBV,KAAKO,QAAQC,cAAc,oCAErD,GAAIF,EAAS,CACXK,EAAeL,EAAS,CACtBM,MAAO,SACPC,MAAO,K,CAIX,GAAIH,EAAmB,CACrBC,EAAeD,EAAmB,CAChCI,QAAS,iBACTC,cAAe,KACfC,eAAgB,KAChBC,KAAM,QACNC,WAAY,OACZC,gBAAiB,K,CAIrB,GAAIV,EAAY,CACdE,EAAeF,EAAY,CACzBG,MAAO,OACPQ,KAAM,M,0BAKZ,kBAAAC,GAAkB,CAElB,iBAAAC,GACEC,QAAQC,IAAI,QACZxB,KAAKK,OACLL,KAAKC,qBACLwB,EAAuBzB,KAAKC,mB,CAG9B,oBAAAyB,GACEC,EAA0B3B,KAAKC,mB,CAGjC,MAAA2B,GACE,MAAMC,EAAgBC,EAAQ9B,KAAKO,QAAS,SAC5C,MAAMwB,EAAqBD,EAAQ9B,KAAKO,QAAS,cACjD,MAAMyB,EAAsBF,EAAQ9B,KAAKO,QAAS,eAElD,MAAM0B,EAAU,CACd,sBAAuB,KACvB,iCAAkCJ,EAClC,qCAAsCA,EACtC,sCAAuCE,EACvC,gCAAiCC,GAGnC,OACEE,EAACC,EAAI,aAAYN,GACfK,EAAA,OAAKE,MAAOH,GACVC,EAAA,OAAKE,MAAM,sCACTF,EAAA,cACEG,MAAO,MACPC,UAAWtC,KAAKE,QAChBqC,WAAY,OACZC,YAAa,MACbC,WAAY,OACZL,MAAM,+BAERF,EAAA,OAAKE,MAAM,wCACXF,EAAA,OAAKE,MAAM,4CACTF,EAAA,QAAMQ,KAAK,YAGfR,EAAA,OAAKE,MAAM,kCACTF,EAAA,OAAKE,MAAM,gCACTF,EAAA,OAAKE,MAAM,6BACTF,EAAA,OAAKE,MAAM,6BACTF,EAAA,OAAKE,MAAM,oCACTF,EAAA,QAAMQ,KAAK,kBAIfR,EAAA,OAAKE,MAAM,gCACTF,EAAA,QAAMQ,KAAK,aAGbR,EAAA,OAAKE,MAAM,mCACTF,EAAA,QAAMQ,KAAK,oB"}