@oiz/stzh-components 4.5.0 → 4.6.0-beta1

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

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as i,F as e,a as r,g as o}from"./p-ef5985a3.js";import{a}from"./p-9cc086e2.js";import{h}from"./p-87c329f2.js";import{S as d}from"./p-9531514f.js";import{c as n}from"./p-dae15605.js";const c=".sc-stzh-datepicker-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-datepicker-h,[stzh-hidden].sc-stzh-datepicker-h{display:none}.sc-stzh-datepicker-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datepicker-h *.sc-stzh-datepicker,.sc-stzh-datepicker-h *.sc-stzh-datepicker::before,.sc-stzh-datepicker-h *.sc-stzh-datepicker::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-datepicker-h .has-focus.sc-stzh-datepicker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker{outline-style:none !important}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker::-moz-focus-inner{border:0 !important}.sc-stzh-datepicker-h{--calendar-width:var(--stzh-calendar-width);width:100%}[inline].sc-stzh-datepicker-h:not([inline=false]){width:var(--calendar-width)}.stzh-datepicker__popover.sc-stzh-datepicker{--width:auto}.stzh-datepicker__calendar.sc-stzh-datepicker{margin-left:auto;margin-right:auto}.stzh-datepicker__calendar.is-inline.sc-stzh-datepicker{width:100%;margin-left:0px;margin-right:0px}.stzh-datepicker__actions.sc-stzh-datepicker{display:flex;width:var(--calendar-width);margin-left:auto;margin-right:auto}.stzh-datepicker__actions.is-inline.sc-stzh-datepicker{width:100%;margin-left:0px;margin-right:0px}.stzh-datepicker__actions.sc-stzh-datepicker:not(:empty){padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-small)}.stzh-datepicker--has-action.sc-stzh-datepicker .stzh-datepicker__popover.sc-stzh-datepicker{--content-padding:0 0 var(--stzh-space-small) 0}";const l=c;const z=class{constructor(i){t(this,i);this.stzhChange=s(this,"stzhChange",7);this.handleReset=async()=>{this.value=this.defaultValue};this.onRootFocus=()=>{if(this.input){this.input.focus()}};this.onInputChanged=()=>{const t=this.dateAdapter.parse(this.input.value,"dateInput");if(this.input.value===""||t){const s=this._internalDateAdapter.format(t,"dateInput");if(this.value!==s){this.value=s}else{this.valueWatcher(s)}this.stzhChange.emit({component:"stzh-datepicker",value:this.value,valueAsDate:t})}};this.onCalendarChange=t=>{if(t.detail.component!=="stzh-calendar"){t.stopPropagation();return}this.value=t.detail.valueAsDate&&this._internalDateAdapter.format(t.detail.valueAsDate,"dateInput");this.stzhChange.emit({component:"stzh-datepicker",value:this.value,valueAsDate:t.detail.valueAsDate});if(this.popover){this.popover.hide()}};this.calendarMin="";this.calendarMax="";this.calendarIsDateDisabled=()=>false;this.name="";this.value="";this.calendarValue="";this.inputValue="";this.defaultValue="";this.label="";this.labelHidden=false;this.readonly=false;this.disabled=false;this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.invalid=false;this.required=false;this.hideOptional=false;this.size="default";this.inline=false;this.dateAdapter=undefined;this.internalDateAdapter="iso";this.localization=undefined;this.buttonLabel=undefined}resetListener(t){if(t.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}createDateFormatters(){if(this.localization){this.dateFormatLong=new Intl.DateTimeFormat(this.localization.$locale,{day:"numeric",month:"long",year:"numeric"})}}valueWatcher(t){if(!this._internalDateAdapter){return}const s=this._internalDateAdapter.parse(t,"dateInput");this.calendarValue=a(s);this.inputValue=this.dateAdapter.format(s,"dateInput");this.updateButtonAccessibleLabel()}dateAdapterWatcher(t){if(!t){this.dateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats,this.localization.$globals)}}internalDateAdapterWatcher(t){if(t==="iso"||!t){this._internalDateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formatsIso,this.localization.$globals)}else if(t==="legacy"){this._internalDateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formatsLegacy,this.localization.$globals)}else{this._internalDateAdapter=t}}async setDate(t){this.value=this._internalDateAdapter.format(t,"dateInput")}async getPopover(){return this.popover}updateButtonAccessibleLabel(){if(!this.localization){return}try{const t=this._internalDateAdapter.parse(this.value,"dateInput");this.buttonLabel=`${this.label}, ${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(t)}`}catch(t){this.buttonLabel=`${this.label}, ${this.localization.buttonLabel}`}}connectedCallback(){this.createDateFormatters()}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"datepicker")}this.dateAdapterWatcher(this.dateAdapter);this.internalDateAdapterWatcher(this.internalDateAdapter);this.valueWatcher(this.value);this.defaultValue=this.defaultValue||this.value}render(){const t=h(this.element,"action");const s={"stzh-datepicker":true,"stzh-datepicker--inline":this.inline,"stzh-datepicker--has-action":t};return i(r,{key:"f8eb72fe6370b350c2ae1904aa060e71407dcc3f",tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},i("div",{key:"884f50ba5993b2b96760ae104d1f57b29ae28032",class:s},i("input",{key:"938ebd2d1d167ec210457586e6af271c84576db5",type:"hidden",name:this.name,value:this.value,defaultValue:this.defaultValue}),this.inline&&i(e,{key:"ed0b426be60042b5b0806c617d0ecdc7b0772034"},i("stzh-calendar",{key:"2b221a540441c14c6d9d25aa743912f3eade3f60",value:this.calendarValue,class:"stzh-datepicker__calendar is-inline",isDateDisabled:this.calendarIsDateDisabled,min:this.calendarMin,max:this.calendarMax,onStzhChange:this.onCalendarChange}),i("div",{key:"6ea9c8708f984c4d2381a2bad9a097bbf58dba54",class:"stzh-datepicker__actions"},i("slot",{key:"64cde269464550a34d561c8393d9282d8b1a9de8",name:"action"}))),!this.inline&&i("stzh-input",{key:"723e9f64d06cf61fad98cc2d33c3a62de402771f",value:this.inputValue,label:this.label,labelHidden:this.labelHidden,ref:t=>this.input=t,noAutocomplete:true,onStzhChanged:this.onInputChanged,readonly:this.readonly,disabled:this.disabled,description:this.description,descriptionLong:this.descriptionLong,error:this.error,invalid:this.invalid,required:this.required,hideOptional:this.hideOptional,size:this.size},i("stzh-popover",{key:"ede051690990d0857f7a8e628ed246d420b1f92c",ref:t=>this.popover=t,class:"stzh-datepicker__popover",slot:"button-right",placement:"bottom-end",strategy:"fixed",label:this.label},i("stzh-button",{key:"d9e363505d99b3741146da43d7129aa03c120af1","icon-only":true,icon:"calendar",size:this.size,disabled:this.disabled,a11yLabel:this.buttonLabel}),i("div",{key:"228faca0d9d06d65f1b4c22bffa78daa65186887",slot:"content"},i("stzh-calendar",{key:"a9abef6995ee18d51770f2c5600135130db1d3c9",value:this.calendarValue,class:"stzh-datepicker__calendar is-popover",isDateDisabled:this.calendarIsDateDisabled,min:this.calendarMin,max:this.calendarMax,onStzhChange:this.onCalendarChange}),i("div",{key:"3a0060c46684de5d23bcd1459b7bcb140bde758b",class:"stzh-datepicker__actions"},i("slot",{key:"c31f574a17c7a7c64288cf34366cef1cdc56248f",name:"action"})))))))}get element(){return o(this)}static get watchers(){return{localization:["createDateFormatters"],value:["valueWatcher"],dateAdapter:["dateAdapterWatcher"],internalDateAdapter:["internalDateAdapterWatcher"]}}};z.style=l;const p='.sc-stzh-radio-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-radio-h,[stzh-hidden].sc-stzh-radio-h{display:none}.sc-stzh-radio-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radio-h *.sc-stzh-radio,.sc-stzh-radio-h *.sc-stzh-radio::before,.sc-stzh-radio-h *.sc-stzh-radio::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-radio-h .has-focus.sc-stzh-radio{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-radio-h .stzh-fylingfocus-focused.sc-stzh-radio{outline-style:none !important}.sc-stzh-radio-h .stzh-fylingfocus-focused.sc-stzh-radio::-moz-focus-inner{border:0 !important}.sc-stzh-radio-h{--label-color:var(--stzh-radio-label-color, var(--stzh-base-color));--label-hover-color:var(--stzh-radio-label-hover-color, var(--stzh-color-primary70));--label-hover-checked-color:var(\n    --stzh-radio-label-hover-checked-color,\n    var(--stzh-color-primary90)\n  );display:inline-block}[disabled].sc-stzh-radio-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-radio.sc-stzh-radio{display:grid}.stzh-radio__marker-symbol.sc-stzh-radio{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-radio__marker-text.sc-stzh-radio{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radio__description-wrapper.sc-stzh-radio{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-radio__error.sc-stzh-radio,.stzh-radio__description.sc-stzh-radio{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-radio__error.sc-stzh-radio{color:var(--stzh-color-error60)}.stzh-radio__error-list.sc-stzh-radio{list-style:none;margin:0;padding:0}.stzh-radio__description.sc-stzh-radio{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-radio__description-long.sc-stzh-radio{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-radio__description-long.sc-stzh-radio{margin-top:0}}.stzh-radio__description-long-popover.sc-stzh-radio{--width:auto;--max-width:27.3125rem}.stzh-radio__description-long-button.sc-stzh-radio{display:flex;justify-content:center;align-items:center;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-radio.sc-stzh-radio stzh-icon.stzh-radio__description-long-icon.sc-stzh-radio{--size:var(--stzh-icon-size-xsmall)}.stzh-radio--has-error.sc-stzh-radio .stzh-radio__error.sc-stzh-radio,.stzh-radio--has-description.sc-stzh-radio .stzh-radio__description.sc-stzh-radio{margin-top:var(--stzh-space-xxxsmall)}.stzh-radio__field-wrapper.sc-stzh-radio{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);position:relative;display:flex;-webkit-user-select:none;user-select:none;cursor:pointer}.stzh-radio__input.sc-stzh-radio{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;appearance:none;border-radius:var(--stzh-form-input-border-radius)}.stzh-radio__mark.sc-stzh-radio{border:0.125rem solid var(--stzh-color-black);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed)}.stzh-radio__mark.sc-stzh-radio::before{content:""}.stzh-radio__check.sc-stzh-radio{background-color:currentColor;color:var(--stzh-color-primary70);width:1rem;height:1rem;border-radius:50%;opacity:0;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-radio__check.sc-stzh-radio{background-color:ButtonText}}.stzh-radio__label.sc-stzh-radio{--stzh-base-color:initial;display:inline-block;color:var(--label-color);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);line-height:1.5rem}.stzh-radio__label.sc-stzh-radio:empty{display:none}.stzh-radio__marker.sc-stzh-radio{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-radio.sc-stzh-radio:hover .stzh-radio__label.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__label.sc-stzh-radio{color:var(--label-hover-color)}.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__label.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--label-hover-checked-color)}.stzh-radio.sc-stzh-radio:hover .stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__mark.sc-stzh-radio{border-color:var(--label-hover-color)}.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__mark.sc-stzh-radio{border-color:var(--label-hover-checked-color)}.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{opacity:1}.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__label.sc-stzh-radio,.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-error60)}.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-error60)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__field-wrapper.sc-stzh-radio{cursor:not-allowed}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__label.sc-stzh-radio{color:var(--stzh-color-grey60)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-grey50)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-grey50)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__mark.sc-stzh-radio{background-color:var(--stzh-color-grey20)}';const f=p;let u=0;const g=class{constructor(i){t(this,i);this.stzhChange=s(this,"stzhChange",7);this.stzhFocus=s(this,"stzhFocus",7);this.stzhBlur=s(this,"stzhBlur",7);this.focusedByInput=false;this.handleReset=async()=>{this.checked=this.defaultChecked};this.onInput=t=>{this.checked=this.input.checked;this.stzhChange.emit({component:"stzh-radio",originalEvent:t,value:this.value,checked:this.checked})};this.onRootFocus=()=>{if(!this.focusedByInput){this.input.focus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;const s=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhFocus.emit({component:"stzh-radio",originalEvent:t})};this.onBlur=t=>{const s=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhBlur.emit({component:"stzh-radio",originalEvent:t})};this.localization=undefined;this.disabled=false;this.name="";this.value="";this.invalid=false;this.required=false;this.hideOptional=false;this.checked=false;this.defaultChecked=undefined;this.label="";this.description=undefined;this.descriptionLong=undefined;this.descriptionLongTitle=undefined;this.error=undefined;this.a11yDescribedby=""}resetListener(t){if(t.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}errorWatcher(t){if(typeof t==="string"){try{this._error=JSON.parse(t)}catch(s){if(t){this._error=[t]}else{this._error=[]}}}else if(t){this._error=t}else{this._error=[]}}async componentWillLoad(){this.inputId=`stzh-radio-${u++}`;this.errorWatcher(this.error);this.defaultChecked=typeof this.defaultChecked==="boolean"?this.defaultChecked:this.checked;if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"radio")}}render(){var t;const s=h(this.element,"description")||!!this.description;const e=h(this.element,"description-long")||!!this.descriptionLong;const o=h(this.element,"error")||((t=this._error)===null||t===void 0?void 0:t.length)>0;const a={"stzh-radio":true,"stzh-radio--has-description":s,"stzh-radio--has-description-long":e,"stzh-radio--has-error":o,"stzh-radio--is-required":this.required,"stzh-radio--is-invalid":this.invalid||o,"stzh-radio--is-disabled":this.disabled};return i(r,{key:"2f8fff62a87c26c3a81f42c9141406c719ad61e2","is-invalid":this.invalid||o,tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},i("div",{key:"ec176f68fc957a9965f168fb1755c41d247afaaf",class:a},i("label",{key:"f17a7080cdda68f63133764d8f233027bc195255",class:"stzh-radio__field-wrapper"},i("input",{key:"b658d1751710374ea66196ff605cbd40c7f47db1",class:"stzh-radio__input",ref:t=>this.input=t,type:"radio",id:this.inputId,name:this.name,value:this.value,disabled:this.disabled,"aria-describedby":`${this.inputId}-description ${this.a11yDescribedby}`,"aria-required":this.required?"true":"false","aria-invalid":this.invalid?"true":"false",checked:this.checked,defaultChecked:this.defaultChecked,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur}),i("div",{key:"499aa68aee3a45dfaa065fbeca6f3bc34d700045",class:"stzh-radio__mark"},i("div",{key:"e8f8d4362955378e80cefdb4a9a0fef65c2ecb4e",class:"stzh-radio__check"})),i("div",{key:"c3dc4b21bdf5d6ea3106e60806f6ce5aa2f46759",class:"stzh-radio__label"},this.label?this.label:i("slot",null),!this.hideOptional&&i("span",{key:"57dc05a8d644fb76c3fd68c763b340584bf0e9de",class:"stzh-radio__marker"},i("span",{key:"596577fec87f901690e7aa9a60e75f762288e5f1",class:"stzh-radio__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),i("span",{key:"83c37d88f8f67d8139c17d49de05ba516eeac19f",class:"stzh-radio__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText)))),(o||this.description)&&i(d,{key:"0b1f5c9c4afe3f1579a4655f12048630baecac47",classPrefix:"stzh-radio",id:`${this.inputId}-description`,error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongTitle:this.descriptionLongTitle,descriptionLongUsed:e,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel})))}get element(){return o(this)}static get watchers(){return{error:["errorWatcher"]}}};g.style=f;const m=".sc-stzh-radiogroup-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-radiogroup-h,[stzh-hidden].sc-stzh-radiogroup-h{display:none}.sc-stzh-radiogroup-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radiogroup-h *.sc-stzh-radiogroup,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::before,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::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-radiogroup-h .has-focus.sc-stzh-radiogroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup{outline-style:none !important}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup::-moz-focus-inner{border:0 !important}.sc-stzh-radiogroup-h{--legend-color:var(--stzh-radio-group-legend-color, var(--stzh-heading-color))}[disabled].sc-stzh-radiogroup-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-radiogroup.sc-stzh-radiogroup{margin:0;padding:0;border:none}.stzh-radiogroup__marker-symbol.sc-stzh-radiogroup{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-radiogroup__marker-text.sc-stzh-radiogroup{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radiogroup__description-wrapper.sc-stzh-radiogroup{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup__description.sc-stzh-radiogroup{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-radiogroup__error.sc-stzh-radiogroup{color:var(--stzh-color-error60)}.stzh-radiogroup__error-list.sc-stzh-radiogroup{list-style:none;margin:0;padding:0}.stzh-radiogroup__description.sc-stzh-radiogroup{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-top:0}}.stzh-radiogroup__description-long-popover.sc-stzh-radiogroup{--width:auto;--max-width:27.3125rem}.stzh-radiogroup__description-long-button.sc-stzh-radiogroup{display:flex;justify-content:center;align-items:center;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-radiogroup.sc-stzh-radiogroup stzh-icon.stzh-radiogroup__description-long-icon.sc-stzh-radiogroup{--size:var(--stzh-icon-size-xsmall)}.stzh-radiogroup--has-error.sc-stzh-radiogroup .stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup--has-description.sc-stzh-radiogroup .stzh-radiogroup__description.sc-stzh-radiogroup{margin-top:var(--stzh-space-xxxsmall)}.stzh-radiogroup__fields.sc-stzh-radiogroup{display:flex;align-items:flex-start;flex-direction:column;gap:var(--stzh-space-medium)}.stzh-radiogroup__legend.sc-stzh-radiogroup{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--legend-color);padding:0;margin-bottom:var(--stzh-space-xsmall)}.stzh-radiogroup__marker.sc-stzh-radiogroup{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-radiogroup--hide-legend.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radiogroup--is-invalid.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup,.stzh-radiogroup--has-error.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{color:var(--stzh-color-error60)}.stzh-radiogroup--is-disabled.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{color:var(--stzh-color-grey60)}.stzh-radiogroup--direction-horizontal.sc-stzh-radiogroup .stzh-radiogroup__fields.sc-stzh-radiogroup{flex-wrap:wrap;flex-direction:row;row-gap:var(--stzh-space-medium);column-gap:var(--stzh-space-xxlarge)}";const b=m;const _="stzh-radio, stzh-button[type=radio], stzh-card";let v=0;const k=class{constructor(s){t(this,s);this._preventUpdateProperties=[];this.handleReset=async()=>{this.value=this.defaultValue};this.init=()=>{this.radios=Array.from(this.element.querySelectorAll(_));this.updateRadiosProperty("hide-optional",true);this.updateRadiosProperty("a11y-describedby",`${this.radiogroupId}-description`);this.updateRadiosProperty("invalid",this.invalid||this.errorUsed);this.watchValue(this.value);this.watchName(this.name);this.watchDisabled(this.disabled);this.watchRequired(this.required)};this.localization=undefined;this.disabled=false;this.name=undefined;this.legend=undefined;this.hideLegend=false;this.invalid=false;this.required=false;this.hideOptional=false;this.value="";this.defaultValue="";this.direction="vertical";this.description=undefined;this.descriptionLong=undefined;this.descriptionLongTitle=undefined;this.error=undefined;this.checkedRadio=null;this.preventUpdateProperties=[]}watchName(t){this.updateRadiosProperty("name",t)}watchDisabled(t){this.updateRadiosProperty("disabled",t)}watchRequired(t){this.updateRadiosProperty("required",t)}watchValue(t){this.updateCheckedRadioByValue(t)}errorWatcher(t){if(typeof t==="string"){try{this._error=JSON.parse(t)}catch(s){if(t){this._error=[t]}else{this._error=[]}}}else if(t){this._error=t}else{this._error=[]}}preventUpdatePropertiesWatcher(t){if(typeof t==="string"){this._preventUpdateProperties=JSON.parse(t)}else{this._preventUpdateProperties=t}}resetListener(t){if(t.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}onChange(t){this.value=t.detail.value}updateRadiosProperty(t,s){this.radios.forEach((i=>{if(t==="disabled"){if(!i.disabled){i.disabled=s}}else if(t==="name"||this._preventUpdateProperties.indexOf(t)===-1){i[n(t)]=s}}))}get errorUsed(){var t;return h(this.element,"error")||((t=this._error)===null||t===void 0?void 0:t.length)>0}updateCheckedRadioByValue(t){this.checkedRadio=this.radios.find((s=>s.value===t));if(this.checkedRadio){this.checkedRadio.checked=true}this.uncheckRadios()}uncheckRadios(){this.radios.forEach((t=>{if(!this.checkedRadio||t!==this.checkedRadio){t.checked=false}}))}componentDidLoad(){this.defaultValue=this.defaultValue?this.defaultValue:this.value}async componentWillLoad(){this.radiogroupId=`stzh-radiogroup-${v++}`;this.errorWatcher(this.error);this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"radiogroup")}}componentShouldUpdate(t,s,i){return i!=="checkedRadio"}componentDidRender(){this.init()}connectedCallback(){if(!this.value){this.radios=Array.from(this.element.querySelectorAll(_));const t=this.radios.find((t=>t.checked));if(t){this.value=t.value}}this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){const t=h(this.element,"description")||!!this.description;const s=h(this.element,"description-long")||!!this.descriptionLong;const e={"stzh-radiogroup":true,"stzh-radiogroup--has-description":t,"stzh-radiogroup--has-description-long":s,"stzh-radiogroup--has-error":this.errorUsed,"stzh-radiogroup--is-required":this.required,"stzh-radiogroup--is-disabled":this.disabled,"stzh-radiogroup--is-invalid":this.invalid||this.errorUsed,"stzh-radiogroup--hide-legend":this.hideLegend,[`stzh-radiogroup--direction-${this.direction}`]:!!this.direction};return i(r,{key:"8e99dacb2df403dff3b951adbbb682db6aa6426b","is-invalid":this.invalid||this.errorUsed},i("fieldset",{key:"b75b7af62c12da9a88ce74dff622f31f67e53e1f",class:e},this.legend&&i("legend",{key:"8ddab774206660de15f74ac22c76a3970f77f19d",class:"stzh-radiogroup__legend"},this.legend,!this.hideOptional&&i("span",{key:"d8d37a3b867318c096a7af40212d1a94afb5032f",class:"stzh-radiogroup__marker"},i("span",{key:"563a6dc72f321c1bab5de50f1820a3b8b76274ae",class:"stzh-radiogroup__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),i("span",{key:"e6572170cdbb8e5d625fb5054d4a971cc0cf4d3b",class:"stzh-radiogroup__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText))),i("div",{key:"4cde77b6e7a220b9c83e41468904f5c644b7c1ee",class:"stzh-radiogroup__fields"},i("slot",{key:"f861e8ba051d15a78e8bac1098b2fc5c7e60482a"})),(this.errorUsed||this.description)&&i(d,{key:"e269f6d99f4fc24e43163436df61d57828504943",classPrefix:"stzh-radiogroup",id:`${this.radiogroupId}-description`,error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongTitle:this.descriptionLongTitle,descriptionLongUsed:s,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel})))}get element(){return o(this)}static get watchers(){return{name:["watchName"],disabled:["watchDisabled"],required:["watchRequired"],value:["watchValue"],error:["errorWatcher"],preventUpdateProperties:["preventUpdatePropertiesWatcher"]}}};k.style=b;export{z as stzh_datepicker,g as stzh_radio,k as stzh_radiogroup};
-//# sourceMappingURL=p-a469d79d.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stzhDatepickerCss","StzhDatepickerStyle0","StzhDatepicker","this","handleReset","async","value","defaultValue","onRootFocus","input","focus","onInputChanged","parsedDate","dateAdapter","parse","formattedDate","_internalDateAdapter","format","valueWatcher","stzhChange","emit","component","valueAsDate","onCalendarChange","event","detail","stopPropagation","popover","hide","resetListener","target","contains","element","requestAnimationFrame","createDateFormatters","localization","dateFormatLong","Intl","DateTimeFormat","$locale","day","month","year","newValue","date","calendarValue","printISODate","inputValue","updateButtonAccessibleLabel","dateAdapterWatcher","window","stzhComponents","utils","createFormatParseAdapter","$formats","$globals","internalDateAdapterWatcher","$formatsIso","$formatsLegacy","setDate","getPopover","buttonLabel","label","selectedDateMessage","err","connectedCallback","componentWillLoad","fetchTranslations","internalDateAdapter","render","actionUsed","hasSlot","classes","inline","h","Host","key","tabindex","disabled","onFocus","class","type","name","Fragment","isDateDisabled","calendarIsDateDisabled","min","calendarMin","max","calendarMax","onStzhChange","labelHidden","ref","el","noAutocomplete","onStzhChanged","readonly","description","descriptionLong","error","invalid","required","hideOptional","size","slot","placement","strategy","icon","a11yLabel","stzhRadioCss","StzhRadioStyle0","radioCounter","StzhRadio","focusedByInput","checked","defaultChecked","onInput","originalEvent","focusEvent","FocusEvent","view","bubbles","cancelable","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","errorWatcher","_error","JSON","e","inputId","descriptionUsed","descriptionLongUsed","errorUsed","_a","length","id","a11yDescribedby","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","StzhInputDescription","classPrefix","descriptionLongTitle","moreInfoButtonLabel","stzhRadiogroupCss","StzhRadiogroupStyle0","SELECTOR_RADIO","radiogroupCounter","StzhRadiogroup","_preventUpdateProperties","init","radios","Array","from","querySelectorAll","updateRadiosProperty","radiogroupId","watchValue","watchName","watchDisabled","watchRequired","updateCheckedRadioByValue","preventUpdatePropertiesWatcher","onChange","prop","forEach","radio","indexOf","camelCase","checkedRadio","find","uncheckRadios","componentDidLoad","preventUpdateProperties","componentShouldUpdate","_newValue","_oldValue","componentDidRender","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","hideLegend","direction","legend"],"sources":["src/components/stzh-datepicker/stzh-datepicker.scss?tag=stzh-datepicker&encapsulation=scoped","src/components/stzh-datepicker/stzh-datepicker.tsx","src/components/stzh-radio/stzh-radio.scss?tag=stzh-radio&encapsulation=scoped","src/components/stzh-radio/stzh-radio.tsx","src/components/stzh-radiogroup/stzh-radiogroup.scss?tag=stzh-radiogroup&encapsulation=scoped","src/components/stzh-radiogroup/stzh-radiogroup.tsx"],"sourcesContent":[":host {\n  --calendar-width: #{$calendarWidth};\n\n  width: 100%;\n\n  &[inline]:not([inline=\"false\"]) {\n    width: var(--calendar-width);\n  }\n}\n\n.stzh-datepicker {\n  &__popover {\n    --width: auto;\n  }\n\n  &__calendar {\n    margin-left: auto;\n    margin-right: auto;\n\n    &.is-inline {\n      width: 100%;\n      margin-left: 0px;\n      margin-right: 0px;\n    }\n  }\n\n  &__actions {\n    display: flex;\n    width: var(--calendar-width);\n    margin-left: auto;\n    margin-right: auto;\n\n    &.is-inline {\n      width: 100%;\n      margin-left: 0px;\n      margin-right: 0px;\n    }\n\n    &:not(:empty) {\n      padding-left: space(\"small\");\n      padding-right: space(\"small\");\n    }\n  }\n\n  /* Has action */\n\n  &--has-action &__popover {\n    --content-padding: 0 0 #{space(\"small\")} 0;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n  Fragment,\n  State,\n  Listen,\n} from \"@stencil/core\";\n\nimport { StzhCalendarChangeEvent, StzhDatepickerChangeEvent } from \"../../index\";\n\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nimport { printISODate } from \"../../utils/date-utils\";\nimport { StzhLocaleAdapter } from \"../../index\";\n\nimport { StzhDatepickerLocalizedText } from \"./stzh-datepicker.localization\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot action - Slot for action below calendar (stzh-link element)\n */\n@Component({\n  tag: \"stzh-datepicker\",\n  styleUrl: \"stzh-datepicker.scss\",\n  scoped: true,\n})\nexport class StzhDatepicker {\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() calendarMin: string = \"\";\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() calendarMax: string = \"\";\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @Prop() calendarIsDateDisabled: StzhCalendarDateDisabledPredicate = () => false;\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the hidden date picker input. If a date can be parsed (via picker always), the value is in ISO format. Otherwise the value equals the manual input.  */\n  @Prop({ mutable: true }) value: string = \"\";\n  @State() calendarValue: string = \"\";\n  @State() inputValue: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Label for input field and popover */\n  @Prop() label: string = \"\";\n\n  /** Whether label is visually 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  /** 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  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Show calendar inline */\n  @Prop({ reflect: true }) inline: boolean = false;\n\n  /**\n   * Date adapter visible date shown to the user, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  /**\n   * Date adapter for internal date passed to backend, for custom parsing/formatting.\n   * Can be `\"iso\"` (default, date in ISO format) / `\"legacy\"` (date in `d.m.Y` format)\n   * or `StzhLocaleAdapter` (must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.)\n   */\n  @Prop() internalDateAdapter: \"iso\" | \"legacy\" | StzhLocaleAdapter = \"iso\";\n  private _internalDateAdapter: StzhLocaleAdapter;\n\n  /**  Translation strings. */\n  @Prop() localization: StzhDatepickerLocalizedText;\n\n  @State() buttonLabel: string;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"localization\")\n  createDateFormatters() {\n    if (this.localization) {\n      this.dateFormatLong = new Intl.DateTimeFormat(this.localization.$locale, {\n        day: \"numeric\",\n        month: \"long\",\n        year: \"numeric\",\n      });\n    }\n  }\n\n  /** Update calendar and input when value prop has changed */\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    if (!this._internalDateAdapter) {\n      return;\n    }\n\n    const date = this._internalDateAdapter.parse(newValue, \"dateInput\");\n\n    this.calendarValue = printISODate(date);\n    this.inputValue = this.dateAdapter.format(date, \"dateInput\");\n\n    this.updateButtonAccessibleLabel();\n  }\n\n  @Watch(\"dateAdapter\")\n  dateAdapterWatcher(newValue: StzhLocaleAdapter) {\n    if (!newValue) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals,\n      );\n    }\n  }\n\n  @Watch(\"internalDateAdapter\")\n  internalDateAdapterWatcher(newValue: \"iso\" | \"legacy\" | StzhLocaleAdapter) {\n    if (newValue === \"iso\" || !newValue) {\n      this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formatsIso,\n        this.localization.$globals,\n      );\n    } else if (newValue === \"legacy\") {\n      this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formatsLegacy,\n        this.localization.$globals,\n      );\n    } else {\n      this._internalDateAdapter = newValue;\n    }\n  }\n\n  /** Set value by a JS Date object */\n  @Method()\n  async setDate(date: Date) {\n    this.value = this._internalDateAdapter.format(date, \"dateInput\");\n  }\n\n  /** Return internal popover element */\n  @Method()\n  async getPopover(): Promise<HTMLStzhPopoverElement> {\n    return this.popover;\n  }\n\n  /** Datepicker change event */\n  @Event() stzhChange: EventEmitter<StzhDatepickerChangeEvent>;\n\n  @Element() element: HTMLStzhDatepickerElement;\n\n  /**\n   * To format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong: Intl.DateTimeFormat;\n\n  private input: HTMLStzhInputElement;\n  private popover: HTMLStzhPopoverElement;\n  // private calendar: HTMLStzhCalendarElement;\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n  };\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  private onInputChanged = () => {\n    const parsedDate = this.dateAdapter.parse(this.input.value, \"dateInput\");\n\n    if (this.input.value === \"\" || parsedDate) {\n      const formattedDate = this._internalDateAdapter.format(parsedDate, \"dateInput\");\n\n      if (this.value !== formattedDate) {\n        this.value = formattedDate;\n      } else {\n        this.valueWatcher(formattedDate);\n      }\n\n      this.stzhChange.emit({\n        component: \"stzh-datepicker\",\n        value: this.value,\n        valueAsDate: parsedDate,\n      });\n    }\n  };\n\n  private onCalendarChange = (event: CustomEvent<StzhCalendarChangeEvent>) => {\n    if (event.detail.component !== \"stzh-calendar\") {\n      // Do not emit stzhChange event from year/month dropdowns\n      event.stopPropagation();\n      return;\n    }\n\n    this.value = event.detail.valueAsDate && this._internalDateAdapter.format(event.detail.valueAsDate, \"dateInput\");\n\n    this.stzhChange.emit({\n      component: \"stzh-datepicker\",\n      value: this.value,\n      valueAsDate: event.detail.valueAsDate,\n    });\n\n    if (this.popover) {\n      this.popover.hide();\n    }\n  };\n\n  private updateButtonAccessibleLabel() {\n    if (!this.localization) {\n      return;\n    }\n\n    try {\n      const valueAsDate = this._internalDateAdapter.parse(this.value, \"dateInput\");\n      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;\n    } catch (err) {\n      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}`;\n    }\n  }\n\n  connectedCallback() {\n    this.createDateFormatters();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datepicker\");\n    }\n\n    this.dateAdapterWatcher(this.dateAdapter);\n    this.internalDateAdapterWatcher(this.internalDateAdapter);\n    this.valueWatcher(this.value);\n    this.defaultValue = this.defaultValue || this.value;\n  }\n\n  render() {\n    const actionUsed = hasSlot(this.element, \"action\");\n\n    const classes = {\n      \"stzh-datepicker\": true,\n      \"stzh-datepicker--inline\": this.inline,\n      \"stzh-datepicker--has-action\": actionUsed,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <input type=\"hidden\" name={this.name} value={this.value} defaultValue={this.defaultValue} />\n\n          {this.inline && (\n            <Fragment>\n              <stzh-calendar\n                // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                value={this.calendarValue}\n                class=\"stzh-datepicker__calendar is-inline\"\n                isDateDisabled={this.calendarIsDateDisabled}\n                min={this.calendarMin}\n                max={this.calendarMax}\n                onStzhChange={this.onCalendarChange}\n              ></stzh-calendar>\n              <div class=\"stzh-datepicker__actions\">\n                <slot name=\"action\"></slot>\n              </div>\n            </Fragment>\n          )}\n\n          {!this.inline && (\n            <stzh-input\n              value={this.inputValue}\n              label={this.label}\n              labelHidden={this.labelHidden}\n              ref={el => (this.input = el as HTMLStzhInputElement)}\n              noAutocomplete\n              onStzhChanged={this.onInputChanged}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              error={this.error}\n              invalid={this.invalid}\n              required={this.required}\n              hideOptional={this.hideOptional}\n              size={this.size}\n            >\n              <stzh-popover\n                ref={el => (this.popover = el as HTMLStzhPopoverElement)}\n                class=\"stzh-datepicker__popover\"\n                slot=\"button-right\"\n                placement=\"bottom-end\"\n                strategy=\"fixed\"\n                label={this.label}\n              >\n                <stzh-button\n                  icon-only\n                  icon=\"calendar\"\n                  size={this.size}\n                  disabled={this.disabled}\n                  a11yLabel={this.buttonLabel}\n                ></stzh-button>\n                <div slot=\"content\">\n                  <stzh-calendar\n                    // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                    value={this.calendarValue}\n                    class=\"stzh-datepicker__calendar is-popover\"\n                    isDateDisabled={this.calendarIsDateDisabled}\n                    min={this.calendarMin}\n                    max={this.calendarMax}\n                    onStzhChange={this.onCalendarChange}\n                  ></stzh-calendar>\n                  <div class=\"stzh-datepicker__actions\">\n                    <slot name=\"action\"></slot>\n                  </div>\n                </div>\n              </stzh-popover>\n            </stzh-input>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --label-color: var(--stzh-radio-label-color, #{$baseColor});\n  --label-hover-color: var(--stzh-radio-label-hover-color, #{$colorPrimary70});\n  --label-hover-checked-color: var(\n    --stzh-radio-label-hover-checked-color,\n    #{$colorPrimary90}\n  );\n\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-radio {\n  @include input-description;\n  display: grid;\n\n  &__field-wrapper {\n    @include fontSize(\"milli\");\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    @include radio__mark();\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    display: inline-block;\n    color: var(--label-color);\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space(\"small\");\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize(\"micro\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked ~ &__label {\n    color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark &__check {\n    color: var(--label-hover-checked-color);\n  }\n\n  &:hover &__mark,\n  &__input:checked ~ &__mark {\n    border-color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__mark {\n    border-color: var(--label-hover-checked-color);\n  }\n\n  &__input:checked ~ &__mark &__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark &__check {\n    color: $colorError60;\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: $colorError60;\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $colorGrey60;\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    color: $colorGrey50;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: $colorGrey50;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $colorGrey20;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, Watch } from \"@stencil/core\";\n\nimport { StzhRadioBlurEvent, StzhRadioChangeEvent, StzhRadioFocusEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet radioCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radio\",\n  styleUrl: \"stzh-radio.scss\",\n  scoped: true,\n})\nexport class StzhRadio {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element */\n  @Prop({ mutable: true }) value: 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  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: string = \"\";\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  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Input change event */\n  @Event() stzhChange: EventEmitter<StzhRadioChangeEvent>;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhRadioFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhRadioBlurEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-radio\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked,\n    });\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-radio\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-radio\",\n      originalEvent: event,\n    });\n  };\n\n  async componentWillLoad() {\n    this.inputId = `stzh-radio-${radioCounter++}`;\n    this.errorWatcher(this.error);\n\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"radio\");\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, \"error\") || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-radio\": true,\n      \"stzh-radio--has-description\": descriptionUsed,\n      \"stzh-radio--has-description-long\": descriptionLongUsed,\n      \"stzh-radio--has-error\": errorUsed,\n      \"stzh-radio--is-required\": this.required,\n      \"stzh-radio--is-invalid\": this.invalid || errorUsed,\n      \"stzh-radio--is-disabled\": this.disabled,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-radio__field-wrapper\">\n            <input\n              class=\"stzh-radio__input\"\n              ref={el => (this.input = el as HTMLInputElement)}\n              type=\"radio\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              defaultChecked={this.defaultChecked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-radio__mark\">\n              <div class=\"stzh-radio__check\"></div>\n            </div>\n            <div class=\"stzh-radio__label\">\n              {this.label ? this.label : <slot></slot>}\n              {!this.hideOptional && (\n                <span class=\"stzh-radio__marker\">\n                  <span class=\"stzh-radio__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-radio__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n            </div>\n          </label>\n          {(errorUsed || this.description) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-radio\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              descriptionLongTitle={this.descriptionLongTitle}\n              descriptionLongUsed={descriptionLongUsed}\n              moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --legend-color: var(--stzh-radio-group-legend-color, #{$headingColor});\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-radiogroup {\n  @include input-description;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  &__fields {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n    gap: space(\"medium\");\n  }\n\n  &__legend {\n    @include font(\"heavy\");\n    @include fontSize(\"micro\");\n    color: var(--legend-color);\n    padding: 0;\n    margin-bottom: space(\"xsmall\");\n  }\n\n  &__marker {\n    @include fontSize(\"nano\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--is-invalid &__legend,\n  &--has-error &__legend {\n    color: $colorError60;\n  }\n\n  &--is-disabled &__legend {\n    color: $colorGrey60;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-wrap: wrap;\n    flex-direction: row;\n    row-gap: space(\"medium\");\n    column-gap: space(\"xxlarge\");\n  }\n}\n","import { Component, Element, h, Host, Listen, Prop, Watch } from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nconst SELECTOR_RADIO = \"stzh-radio, stzh-button[type=radio], stzh-card\";\n\nlet radiogroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-radio`, `stzh-button[type=\"radio\"]` or `stzh-card` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radiogroup\",\n  styleUrl: \"stzh-radiogroup.scss\",\n  scoped: true,\n})\nexport class StzhRadiogroup {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name */\n  @Prop({ reflect: true }) name: string;\n\n  /** The legend */\n  @Prop() legend: string;\n\n  /** Hide legend to show only for screenreaders */\n  @Prop({ reflect: true }) hideLegend: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Select a radio by value */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\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  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Current checked radio element (readonly) */\n  @Prop() checkedRadio: HTMLStzhRadioElement | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */\n  @Prop() preventUpdateProperties: string[] | string = [];\n  private _preventUpdateProperties: string[] = [];\n\n  /** Host element */\n  @Element() element: HTMLElement;\n\n  @Watch(\"name\")\n  watchName(newValue: string) {\n    this.updateRadiosProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateRadiosProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"required\")\n  watchRequired(newValue: boolean) {\n    this.updateRadiosProperty(\"required\", newValue);\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: string) {\n    this.updateCheckedRadioByValue(newValue);\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Watch(\"preventUpdateProperties\")\n  preventUpdatePropertiesWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._preventUpdateProperties = JSON.parse(newValue);\n    } else {\n      this._preventUpdateProperties = newValue;\n    }\n  }\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Listen(\"stzhChange\")\n  onChange(event: CustomEvent<StzhRadioChangeEvent>) {\n    this.value = event.detail.value;\n  }\n\n  /** Radio elements */\n  private radios: HTMLStzhRadioElement[];\n  private radiogroupId: string;\n  private observer: MutationObserver;\n\n  private updateRadiosProperty(prop: string, value: any) {\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (prop === \"disabled\") {\n        // Only set the disabled if the radio is not already disabled\n        if (!radio.disabled) {\n          radio.disabled = value;\n        }\n      } else if (prop === \"name\" || this._preventUpdateProperties.indexOf(prop) === -1) {\n        radio[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private get errorUsed(): boolean {\n    return hasSlot(this.element, \"error\") || this._error?.length > 0;\n  }\n\n  private updateCheckedRadioByValue(value: string) {\n    this.checkedRadio = this.radios.find(radio => radio.value === value);\n\n    if (this.checkedRadio) {\n      this.checkedRadio.checked = true;\n    }\n\n    this.uncheckRadios();\n  }\n\n  private uncheckRadios() {\n    // make sure that no other radios are checked than the current one or no one\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (!this.checkedRadio || radio !== this.checkedRadio) {\n        radio.checked = false;\n      }\n    });\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n  };\n\n  private init = () => {\n    // update radios\n    this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n    this.updateRadiosProperty(\"hide-optional\", true);\n    this.updateRadiosProperty(\"a11y-describedby\", `${this.radiogroupId}-description`);\n    this.updateRadiosProperty(\"invalid\", this.invalid || this.errorUsed);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchRequired(this.required);\n  };\n\n  componentDidLoad() {\n    this.defaultValue = this.defaultValue ? this.defaultValue : this.value;\n  }\n\n  async componentWillLoad() {\n    this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"radiogroup\");\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedRadio\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  connectedCallback() {\n    if (!this.value) {\n      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n      // try to find a checkbox that might has checked set to true\n      const checkedRadio = this.radios.find(radio => radio.checked);\n\n      if (checkedRadio) {\n        this.value = checkedRadio.value;\n      }\n    }\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n\n    const classes = {\n      \"stzh-radiogroup\": true,\n      \"stzh-radiogroup--has-description\": descriptionUsed,\n      \"stzh-radiogroup--has-description-long\": descriptionLongUsed,\n      \"stzh-radiogroup--has-error\": this.errorUsed,\n      \"stzh-radiogroup--is-required\": this.required,\n      \"stzh-radiogroup--is-disabled\": this.disabled,\n      \"stzh-radiogroup--is-invalid\": this.invalid || this.errorUsed,\n      \"stzh-radiogroup--hide-legend\": this.hideLegend,\n      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || this.errorUsed}>\n        <fieldset class={classes}>\n          {this.legend && (\n            <legend class=\"stzh-radiogroup__legend\">\n              {this.legend}\n              {!this.hideOptional && (\n                <span class=\"stzh-radiogroup__marker\">\n                  <span class=\"stzh-radiogroup__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-radiogroup__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n            </legend>\n          )}\n          <div class=\"stzh-radiogroup__fields\">\n            <slot></slot>\n          </div>\n          {(this.errorUsed || this.description) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-radiogroup\"\n              id={`${this.radiogroupId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              descriptionLongTitle={this.descriptionLongTitle}\n              descriptionLongUsed={descriptionLongUsed}\n              moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n            />\n          )}\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["stzhLoaderCss","StzhLoaderStyle0","StzhLoader","render","classes","this","hideLabel","size","h","Host","key","class","label","stzhOverlayCss","StzhOverlayStyle0","CLASS_BODY_OPEN","StzhOverlay","show","open","stzhOpen","emit","component","hide","stzhClose","getSiblings","parentElement","Array","from","children","filter","child","element","disableSiblings","forEach","sibling","setAttribute","enableSiblings","removeAttribute","dialogShown","document","body","classList","add","trap","activate","dialogHidden","remove","deactivate","connectedCallback","stay","appendChild","componentDidRender","componentDidUpdate","updateContainerElements","componentDidLoad","createFocusTrap","Object","assign","fallbackFocus","dialogElement","createBaseFocusTrapOptions","disconnectedCallback","ref","el","tabindex","role","a11yLabel"],"sources":["src/components/stzh-loader/stzh-loader.scss?tag=stzh-loader&encapsulation=scoped","src/components/stzh-loader/stzh-loader.tsx","src/components/stzh-overlay/stzh-overlay.scss?tag=stzh-overlay&encapsulation=scoped","src/components/stzh-overlay/stzh-overlay.tsx"],"sourcesContent":[":host {\n}\n\n@keyframes stzh-loader {\n  0% {\n    transform: scale(0);\n    left: 0px;\n    opacity: 1;\n  }\n  12.5% {\n    transform: scale(1);\n  }\n  25% {\n    left: 0px;\n  }\n  37.5% {\n    left: 70px;\n  }\n  50% {\n    left: 70px;\n  }\n  62.5% {\n    left: 140px;\n  }\n  75% {\n    left: 140px;\n    transform: scale(1);\n  }\n  87.5% {\n    left: 140px;\n    transform: scale(0);\n    opacity: 1;\n  }\n  100% {\n    left: 140px;\n    opacity: 0;\n  }\n}\n\n.stzh-loader {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  &__label {\n    @include fontSize(\"micro\");\n    text-align: center;\n\n    &:not(:empty) {\n      margin-top: space(\"medium\");\n    }\n  }\n\n  &__wrapper {\n    width: calc(200px / $loaderFactor);\n    height: calc(40px / $loaderFactor);\n  }\n\n  &__uil {\n    background: none;\n    position: relative;\n    width: 200px;\n    height: 40px;\n    transform: scale($loaderScale);\n    transform-origin: top left;\n  }\n\n  &__ib {\n    width: 100%;\n    height: 100%;\n    transform: rotate(0deg);\n  }\n\n  &__circle {\n    width: 60px;\n    height: 40px;\n    position: absolute;\n    opacity: 0;\n    text-align: center;\n    animation: stzh-loader 3s linear infinite;\n\n    & > div {\n      width: 40px;\n      height: 40px;\n      border-radius: 20px;\n      margin: 0 10px;\n    }\n\n    &:nth-of-type(2n + 1) > div {\n      background: #0f05a0;\n    }\n\n    &:nth-of-type(2n) > div {\n      background: #0f05a0;\n    }\n\n    &:nth-of-type(1) {\n      animation-delay: 0s;\n    }\n\n    &:nth-of-type(2) {\n      animation-delay: 0.75s;\n    }\n\n    &:nth-of-type(3) {\n      animation-delay: 1.5s;\n    }\n\n    &:nth-of-type(4) {\n      animation-delay: 2.25s;\n    }\n  }\n\n  /* Small variant */\n\n  &--size-small &__label {\n    @include fontSize(\"pico\");\n\n    &:not(:empty) {\n      margin-top: space(\"xsmall\");\n    }\n  }\n\n  &--size-small &__wrapper {\n    width: calc(200px / $loaderFactor * $loaderSmallFactor);\n    height: calc(40px / $loaderFactor * $loaderSmallFactor);\n  }\n\n  &--size-small &__uil {\n    transform: scale($loaderScale * $loaderSmallFactor);\n  }\n\n  /* Hide label */\n\n  &--hide-label &__label {\n    @include visuallyhidden;\n  }\n}\n","import { Component, Host, h, Prop, Element } from \"@stencil/core\";\n\n/**\n * @slot - Slot for label/text content\n */\n@Component({\n  tag: \"stzh-loader\",\n  styleUrl: \"stzh-loader.scss\",\n  scoped: true,\n})\nexport class StzhLoader {\n  /** Size */\n  @Prop() size: \"default\" | \"small\" = \"default\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Hide label text visually (still anounced for screenreaders) */\n  @Prop() hideLabel: boolean = false;\n\n  @Element() element: HTMLStzhInputElement;\n\n  render() {\n    const classes = {\n      \"stzh-loader\": true,\n      \"stzh-loader--hide-label\": this.hideLabel,\n      [`stzh-loader--size-${this.size}`]: !!this.size,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-loader__wrapper\">\n            <div class=\"stzh-loader__uil\">\n              <div class=\"stzh-loader__ib\">\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"stzh-loader__label\" aria-live=\"polite\">\n            {this.label ? this.label : <slot></slot>}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --backdrop-opacity: Opacity of overlay backdrop\n * @prop --backdrop-background-color: Background color of overlay backdrop\n *\n * @prop --stzh-overlay-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-overlay-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  --backdrop-opacity: #{$overlayBackdropOpacity};\n  --backdrop-background-color: #{$overlayBackdropBackgroundColor};\n}\n\n.stzh-overlay {\n  display: none;\n  z-index: $zIndexOverlay;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  justify-content: stretch;\n  align-items: stretch;\n\n  &__backdrop {\n    z-index: 1;\n    background-color: var(--backdrop-background-color);\n    opacity: var(--backdrop-opacity);\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  &__content {\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__content-inner {\n    // center content vertically\n    margin-top: auto;\n    margin-bottom: auto;\n    outline: none;\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Method, Element } from \"@stencil/core\";\n\nimport { StzhOverlayOpenEvent, StzhOverlayCloseEvent } from \"../../index\";\n\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\n\nconst CLASS_BODY_OPEN = \"stzh-overlay-open\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-overlay\",\n  styleUrl: \"stzh-overlay.scss\",\n  scoped: true,\n})\nexport class StzhOverlay {\n  /** Whether overlay is open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Accessible label for dialog */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhOverlayOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhOverlayCloseEvent>;\n\n  @Element() element: HTMLStzhOverlayElement;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-overlay\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-overlay\",\n    });\n  }\n\n  private trap: FocusTrap;\n  private parentElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private getSiblings() {\n    if (!this.parentElement) {\n      return [];\n    }\n\n    return Array.from(this.parentElement.children).filter(child => child !== this.element);\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.parentElement = this.element.parentElement;\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions(),\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  disconnectedCallback() {\n    this.dialogHidden();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-overlay\": true,\n      \"stzh-overlay--is-open\": this.open,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-overlay__backdrop\"></div>\n          <div class=\"stzh-overlay__content\">\n            <div\n              class=\"stzh-overlay__content-inner\"\n              ref={el => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role=\"dialog\"\n              aria-label={this.a11yLabel || null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n            >\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-import{r as t,c as s,f as e,h as i,a as h,g as r}from"./p-ef5985a3.js";import{m as n,a as c,r as a}from"./p-f4adb3cd.js";const o=".sc-stzh-stepper-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-stepper-h,[stzh-hidden].sc-stzh-stepper-h{display:none}.sc-stzh-stepper-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-stepper-h *.sc-stzh-stepper,.sc-stzh-stepper-h *.sc-stzh-stepper::before,.sc-stzh-stepper-h *.sc-stzh-stepper::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-stepper-h .has-focus.sc-stzh-stepper{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-stepper-h .stzh-fylingfocus-focused.sc-stzh-stepper{outline-style:none !important}.sc-stzh-stepper-h .stzh-fylingfocus-focused.sc-stzh-stepper::-moz-focus-inner{border:0 !important}.sc-stzh-stepper-h{min-width:calc(var(--steps) * 1.6875rem * 2)}@media screen and (min-width: 600px){.sc-stzh-stepper-h{min-width:calc(var(--steps) * 1.9375rem * 2)}}.stzh-stepper.sc-stzh-stepper{position:relative;z-index:0;overflow:hidden}.stzh-stepper__items.sc-stzh-stepper{display:flex;flex-wrap:nowrap}.stzh-stepper__item.sc-stzh-stepper{flex-grow:1;flex-shrink:1;flex-basis:0}";const p=o;const l=class{constructor(e){t(this,e);this.stzhClick=s(this,"stzhClick",7);this.stzhDottedClick=s(this,"stzhDottedClick",7);this.handleStepClick=t=>{t.preventDefault();t.stopPropagation();if(t.type!=="stzhDottedClick"){this.stzhClick.emit({component:"stzh-stepper-item",originalEvent:t.detail.originalEvent,index:t.detail.index})}else{this.stzhDottedClick.emit({component:"stzh-stepper-item",originalEvent:t.detail.originalEvent,index:t.detail.index})}};this.setCurrentSteps=()=>{if(n("ultra").matches&&this.stepsUltra){this.currentSteps=this.stepsUltra}else if(n("large").matches&&this.stepsLarge){this.currentSteps=this.stepsLarge}else if(n("medium").matches&&this.stepsMedium){this.currentSteps=this.stepsMedium}else if(n("small").matches&&this.stepsSmall){this.currentSteps=this.stepsSmall}else{this.currentSteps=this.steps}};this.localization=undefined;this.data=[];this.index=0;this.steps=5;this.stepsSmall=6;this.stepsMedium=0;this.stepsLarge=0;this.stepsUltra=0;this.clickDisabled=false;this.currentSteps=undefined}async getItemData(){return this._data.map(((t,s)=>Object.assign(Object.assign({},t),this.getItemAttributes(s))))}onIndexChange(){this.indexWatcher(this.index);this.setCurrentSteps();e(this.element)}indexWatcher(t){if(typeof t==="string"){this.index=JSON.parse(t)}else{this.index=t}}stepsWatcher(){this.setCurrentSteps()}dataWatcher(t){if(typeof t==="string"){this._data=JSON.parse(t)}else{this._data=t}this.lastItemIndex=this._data.length-1;this.maxStepIndex=this.currentSteps-1;this.withinLastFewSteps=this.index>=this._data.length-this.maxStepIndex}getItemAttributes(t){const s={};s.step=t+1;s.first=t===0;s.last=t===this.lastItemIndex;s.current=t===this.index;s.passed=t<this.index;const e=this._data[t];s.incomplete=e.incomplete;if(this._data.length>this.currentSteps){if(t===this.lastItemIndex&&!this.withinLastFewSteps){s.dotted=true}if(this.index<2){s.hide=t>this.maxStepIndex-1&&t<this.lastItemIndex}else{if(t===0){s.dotted=true}let e=this.index;if(this.withinLastFewSteps){e=this._data.length-this.maxStepIndex}s.hide=t>0&&t<e||t>this.index+(this.currentSteps-3)&&t<this.lastItemIndex}}return s}async componentWillLoad(){this.dataWatcher(this.data);this.indexWatcher(this.index);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"stepper")}}async componentShouldUpdate(){this.dataWatcher(this.data);this.indexWatcher(this.index)}async componentDidUpdate(){this.dataWatcher(this.data);this.indexWatcher(this.index)}connectedCallback(){this.setCurrentSteps();c(this.setCurrentSteps)}disconnectedCallback(){a(this.setCurrentSteps)}render(){const t={"stzh-stepper":true,[`stzh-stepper--index-${this.index}`]:!!this.index};return i(h,{key:"605e85922409a5ed3dddbb5108d0202c57c26282",style:{"--steps":this.currentSteps?this.currentSteps.toString():null}},i("div",{key:"b919b394fbd8e238a9551fc0a459fec8e6417d91",class:t},i("div",{key:"853a5e6f40acceaa31faab64961166082b9d4bed",class:"stzh-stepper__items",role:"list","aria-label":this.localization.label},this._data.map(((t,s)=>i("stzh-stepper-item",Object.assign({},this.getItemAttributes(s),{icon:t.icon,disabled:t.disabled,label:t.label,"click-disabled":t.clickDisabled!==undefined?t.clickDisabled:this.clickDisabled,onStzhClick:t=>{this.handleStepClick(t)},onStzhDottedClick:t=>{this.handleStepClick(t)},class:"stzh-stepper__item"})))),i("slot",{key:"6d4d3b8bf5cca301d964d39f4c5dc524d7368c9d"}))))}get element(){return r(this)}static get watchers(){return{index:["onIndexChange"],steps:["stepsWatcher"],stepsSmall:["stepsWatcher"],stepsMedium:["stepsWatcher"],stepsLarge:["stepsWatcher"],stepsUltra:["stepsWatcher"],data:["dataWatcher"]}}};l.style=p;export{l as stzh_stepper};
-//# sourceMappingURL=p-c27082b1.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,a as o,g as n}from"./p-ef5985a3.js";import{w as s}from"./p-70ec7e79.js";import{s as r,a,b as l}from"./p-2c0bec3e.js";import{h}from"./p-87c329f2.js";import"./p-dae15605.js";const c=':host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--content-padding-bottom:var(--stzh-space-medium);--trigger-size:1.125rem;--icon-size:var(--stzh-icon-size);--description-color:var(--stzh-color-black);--heading-margin-bottom:var(--stzh-space-medium);--button-color:var(--stzh-color-primary70);--button-background-color:transparent;--button-font-size:var(\n    --stzh-timeline-nested-button-font-size,\n    var(--stzh-font-milli-font-size)\n  );--button-line-height:var(\n    --stzh-timeline-nested-button-line-height,\n    var(--stzh-font-milli-heading-line-height)\n  );--button-letter-spacing:var(\n    --stzh-timeline-nested-button-line-height,\n    normal\n  );--bullet-color:var(--stzh-color-primary70);--bullet-background-color:var(--stzh-color-grey20);--content-padding-top:var(--stzh-timeline-content-padding-top);--content-padding-right:0px;--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--bullet-background-color)}@media screen and (min-width: 600px){:host{--content-padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{--content-padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{--content-padding-bottom:var(--stzh-space-xxlarge)}}@media print{:host{page-break-inside:avoid;break-inside:avoid}}@media screen and (min-width: 600px){:host{--button-font-size:var(\n      --stzh-timeline-nested-button-font-size,\n      var(--stzh-font-centi-font-size)\n    );--button-line-height:var(\n      --stzh-timeline-nested-button-line-height,\n      var(--stzh-font-centi-heading-line-height)\n    )}}:host(:where([is-foldable])){--button-background-color:var(--stzh-color-grey10);--bullet-color:var(--stzh-color-black);--bullet-background-color:var(--stzh-color-secondary20);--hover-button-background-color:var(--stzh-color-grey20);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--stzh-color-secondary40)}@media (forced-colors: active), (-ms-high-contrast: active){:host(:where([is-foldable])){--button-color:Highlight;--hover-button-color:Highlight}}:host(:where([open]:not([open=false]))){--heading-margin-bottom:0px}:host(:where([is-foldable][open]:not([open=false]))){--bullet-color:var(--stzh-color-white);--bullet-background-color:var(--stzh-color-primary70);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--stzh-color-primary90)}@media (forced-colors: active), (-ms-high-contrast: active){:host(:where([is-foldable][open]:not([open=false]))){--button-color:SelectedItem;--bullet-color:SelectedItem;--hover-button-color:SelectedItem;--hover-bullet-color:SelectedItem}}:host(:where([completed]:not([completed=false]))){--bullet-color:var(--stzh-color-white);--bullet-background-color:var(--stzh-color-secondary60);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--bullet-background-color)}:host(:where([is-foldable][open]:not([open=false]))){--hover-bullet-background-color:var(--stzh-color-secondary70)}:host(:where([disabled]:not([disabled=false]))){--button-color:var(--stzh-color-grey80);--bullet-color:var(--stzh-color-white);--bullet-background-color:var(--stzh-color-grey60);--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--bullet-background-color)}.stzh-timeline-item{display:flex;flex-direction:column;}.stzh-timeline-item__heading{position:relative;margin:0}.stzh-timeline-item__button{font-size:var(--button-font-size);line-height:var(--button-line-height);letter-spacing:var(--button-letter-spacing);font-family:inherit;width:100%;appearance:none;background-color:transparent;padding:0;border:none;display:flex;color:var(--button-color);text-align:left;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed);cursor:default}.stzh-timeline-item__button:hover{color:var(--hover-button-color)}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__button{transition:none}}.stzh-timeline-item__button-inner{display:flex;flex-grow:1;align-items:center;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall);background-color:var(--button-background-color);transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed);min-height:var(--stzh-timeline-bullet-size);padding-left:var(--stzh-space-xsmall);padding-right:var(--stzh-space-small)}.stzh-timeline-item__button:hover .stzh-timeline-item__button-inner{background-color:var(--hover-button-background-color)}.stzh-timeline-item__button,.stzh-timeline-item__content-inner{padding-left:var(--stzh-timeline-bullet-size)}.stzh-timeline-item__button-text{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);flex-grow:1}.stzh-timeline-item__button-icon{margin-left:var(--stzh-space-xsmall);align-self:flex-start;position:relative;display:block;width:var(--trigger-size);height:var(--trigger-size);margin-top:var(--stzh-space-xxsmall)}@media screen and (min-width: 600px){.stzh-timeline-item__button-icon{margin-left:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-timeline-item__button-icon{margin-left:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-timeline-item__button-icon{margin-left:var(--stzh-space-xlarge)}}.stzh-timeline-item__button-icon::before,.stzh-timeline-item__button-icon::after{position:absolute;top:50%;left:50%;content:"";display:block;width:var(--trigger-size);height:0.15625rem;transition-property:transform;transition-duration:500ms;transform-origin:top left;background-color:currentColor}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-timeline-item__button-icon::before,.stzh-timeline-item__button-icon::after{background-color:CanvasText}}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__button-icon::before,.stzh-timeline-item__button-icon::after{transition:none}}.stzh-timeline-item__button-icon::before{transform:rotate(180deg) translate(-50%, -50%)}.stzh-timeline-item__button-icon::after{transform:rotate(90deg) translate(-50%, -50%)}.stzh-timeline-item__bullet{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:absolute;top:0;left:0;z-index:1;display:flex;justify-content:center;align-items:center;width:var(--stzh-timeline-bullet-size);height:var(--stzh-timeline-bullet-size);color:var(--bullet-color);background-color:var(--bullet-background-color);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__bullet{transition:none}}.stzh-timeline-item__button:hover .stzh-timeline-item__bullet{color:var(--hover-bullet-color);background-color:var(--hover-bullet-background-color)}.stzh-timeline-item__bullet-icon-wrapper{--stzh-icon-size:var(--icon-size);display:flex}.stzh-timeline-item__content{--stzh-timeline-content-padding-top:var(--stzh-space-xxsmall);--stzh-timeline-nested-button-font-size:var(--stzh-font-micro-font-size);--stzh-timeline-nested-button-line-height:var(\n    --stzh-font-micro-heading-line-height\n  );overflow:hidden}@media screen and (min-width: 900px){.stzh-timeline-item__content{--stzh-timeline-content-padding-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-timeline-item__content{--stzh-timeline-content-padding-top:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-timeline-item__content{--stzh-timeline-nested-button-font-size:var(--stzh-font-milli-font-size);--stzh-timeline-nested-button-line-height:var(\n      --stzh-font-milli-heading-line-height\n    )}}@media print{.stzh-timeline-item__content{height:auto !important;overflow:visible !important;display:block !important}}.stzh-timeline-item__content-inner{padding-top:var(--content-padding-top);padding-bottom:var(--content-padding-bottom);padding-right:var(--content-padding-right)}.stzh-timeline-item__badge{position:absolute;right:-0.3125rem;top:-0.375rem}.stzh-timeline-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));color:var(--description-color);transition:color var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 900px){.stzh-timeline-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))}}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__description{transition:none}}.stzh-timeline-item__heading{margin-bottom:var(--heading-margin-bottom);transition:margin-bottom var(--stzh-base-transition-animation-speed)}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__heading{transition:none}}.stzh-timeline-item__heading-text,.stzh-timeline-item__description{display:block}.stzh-timeline-item--is-foldable .stzh-timeline-item__button{cursor:pointer}.stzh-timeline-item--is-open .stzh-timeline-item__button-icon::before,.stzh-timeline-item--is-open .stzh-timeline-item__button-icon::after{transform:rotate(0) translate(-50%, -50%)}.stzh-timeline-item--is-disabled .stzh-timeline-item__button{cursor:not-allowed}';const d=c;const m={keyframes:[{height:"0"},{height:"auto"}],options:{duration:300,easing:"linear"}};const b={keyframes:[{height:"auto"},{height:"0"}],options:{duration:300,easing:"linear"}};let f=0;const u=class{constructor(i){t(this,i);this.stzhOpen=e(this,"stzhOpen",7);this.stzhOpened=e(this,"stzhOpened",7);this.stzhClose=e(this,"stzhClose",7);this.stzhClosed=e(this,"stzhClosed",7);this.stzhFocus=e(this,"stzhFocus",7);this.stzhBlur=e(this,"stzhBlur",7);this.toggledByMethod=false;this.focusedByInput=false;this.shiftPressed=false;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-timeline-item",originalEvent:t})};this.onBlur=t=>{this.rootTabindex=0;this.stzhBlur.emit({component:"stzh-timeline-item",originalEvent:t})};this.handleFoldableChange=t=>{this.foldableWatcher(this.foldable)};this.handleHeaderClick=()=>{if(typeof this.collapsible!=="undefined"){if(this.collapsible){this.toggle()}else if(!this.open){this.show()}}else if(!this.timeline||this.timeline.collapsible){this.toggle()}else if(!this.open){this.show()}};this.onButtonKeydown=t=>{let e=null;if(t.key==="ArrowDown"){e="next"}else if(t.key==="ArrowUp"){e="prev"}else if(t.key==="Home"){e="first"}else if(t.key==="End"){e="last"}else if(t.key==="PageDown"&&t.ctrlKey){e="next"}else if(t.key==="PageUp"&&t.ctrlKey){e="prev"}if(t.key==="Shift"){this.rootTabindex=-1}if(e){t.preventDefault();this.timeline.setItemFocus(this.element,e)}};this.onContentKeydown=t=>{if(!t.ctrlKey){return}let e=null;if(t.key==="PageDown"){e="next"}else if(t.key==="PageUp"){e="prev"}if(e){t.preventDefault();this.timeline.setItemFocus(this.element,e)}};this.foldable=undefined;this.collapsible=undefined;this.open=false;this.disabled=false;this.completed=false;this.heading="";this.description="";this.step=1;this.icon="";this.badge="";this.badgeEmpty=false;this.badgeType="default";this.headingLevel="3";this.analyticsId=undefined;this.rootTabindex=0;this._foldable=false}async show(){if(this.open||this.disabled||!this._foldable){return}this.toggledByMethod=true;this.open=true;return s(this.element,"stzhOpened")}async hide(){if(!this.open||this.disabled||!this._foldable){return}this.toggledByMethod=true;this.open=false;return s(this.element,"stzhClosed")}async toggle(){if(this.open){return await this.hide()}else{return await this.show()}}async openWatcher(t){if(!this.bodyElement){return}if(t){if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-timeline-item"})}await r(this.bodyElement);this.bodyElement.hidden=false;await a(this.bodyElement,l(m.keyframes,{height:this.bodyElement.scrollHeight}),m.options);this.bodyElement.style.height="auto";this.bodyElement.style.overflow="visible";if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-timeline-item"})}}else{if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-timeline-item"})}await r(this.bodyElement);this.bodyElement.style.overflow="hidden";await a(this.bodyElement,l(b.keyframes,{height:this.bodyElement.scrollHeight}),b.options);this.bodyElement.hidden=true;this.bodyElement.style.height="0px";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-timeline-item"})}}this.toggledByMethod=false}foldableWatcher(t){if(typeof t!=="undefined"){this._foldable=t}else if(this.timeline){this._foldable=this.timeline.foldable}if(!this._foldable){this.open=true}}handleKeydown(t){if(t.key==="Shift"){this.shiftPressed=true}}handleKeyup(t){if(t.key==="Shift"){this.shiftPressed=false}}componentWillLoad(){this.timelineItemId=`stzh-timeline-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.timeline=this.element.closest("stzh-timeline");if(this.timeline){this.timeline.addEventListener("stzhFoldableChange",this.handleFoldableChange)}this.foldableWatcher(this.foldable)}disconnectedCallback(){if(this.timeline){this.timeline.removeEventListener("stzhFoldableChange",this.handleFoldableChange);this.timeline=null}}render(){const t=`h${this.headingLevel}`;const e=!!this.icon||h(this.element,"icon");const n={"stzh-timeline-item":true,"stzh-timeline-item--has-description":!!this.description,"stzh-timeline-item--is-open":this.open,"stzh-timeline-item--is-disabled":this.disabled,"stzh-timeline-item--is-foldable":this._foldable,"stzh-timeline-item--is-completed":this.completed};return i(o,{key:"930482ee6c9bc0e3a09acf43e184b99d916fc1e0",role:"listitem","is-foldable":this._foldable,tabindex:this.disabled?null:this.rootTabindex,onFocus:this.onRootFocus},i("div",{key:"132029773724ca80b2fc1b9197c319c177bca025",class:n},i(t,{key:"c0347d74af49b847af742cc052937a85ecfa7334",id:`${this.timelineItemId}-header`,class:"stzh-timeline-item__heading",onClick:this.handleHeaderClick},i("button",{key:"3ac98122e4b5e4905061f9f30d22bf5b1b480b90",ref:t=>this.buttonElement=t,class:"stzh-timeline-item__button","aria-controls":`${this.timelineItemId}-content`,"aria-expanded":`${this.open?"true":"false"}`,"aria-disabled":!this._foldable?"true":"false",disabled:this.disabled,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onButtonKeydown,type:"button","s-object-id":this.analyticsId||this.heading},i("span",{key:"18a4877faf05faa794fdc8fd9f02043ebe58120b",class:"stzh-timeline-item__bullet"},e||this.completed?i("span",{class:"stzh-timeline-item__bullet-icon-wrapper"},this.icon||this.completed?i("stzh-icon",{class:"stzh-timeline-item__bullet-icon",name:this.icon?this.icon:"checkmark"}):i("slot",{name:"icon"})):i("span",{class:"stzh-timeline-item__bullet-text"},this.step),(this.badge||this.badgeEmpty)&&i("stzh-badge",{key:"cd44fed3b57708b383027c23d45c6216b1a278a7",class:"stzh-timeline-item__badge",label:this.badge,type:this.badgeType})),i("div",{key:"baa755c58fc348532372fedd689315347b826003",class:"stzh-timeline-item__button-inner"},i("span",{key:"21b68e0de062864d8b611615bd118ed2af536536",class:"stzh-timeline-item__button-text"},i("span",{key:"d42906d3dc1ce4e319b4298c60e39cc99e69270a",class:"stzh-timeline-item__heading-text"},this.heading),i("span",{key:"827a608fabd03e4828d0d58cf93192f3b49f3699",class:"stzh-timeline-item__description"},this.description)),this._foldable&&i("span",{key:"3dcf1e2c05cabf49ab34784a529f0b3eab517787",class:"stzh-timeline-item__button-icon"})))),i("div",{key:"1127803b95633dbee2f5d36e392d5ee35d9f3ec1",id:`${this.timelineItemId}-content`,ref:t=>this.bodyElement=t,class:"stzh-timeline-item__content","aria-labelledby":`${this.timelineItemId}-header`,role:"region",onKeyDown:this.onContentKeydown},i("div",{key:"ad6efefd864f4cd9909857f1d99c046fcf90870c",class:"stzh-timeline-item__content-inner"},i("slot",{key:"0ff1a00e931ea5de6d42713a189b2b61ceb96c62"})))))}get element(){return n(this)}static get watchers(){return{open:["openWatcher"],foldable:["foldableWatcher"]}}};u.style=d;export{u as stzh_timeline_item};
-//# sourceMappingURL=p-ddc0dc04.entry.js.map

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

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

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

@@ -1,2 +0,0 @@
-const t="@oiz/stzh-components";const n="4.5.0";const o=t.substring(t.indexOf("/")+1);const e=t=>{const n=document.querySelector("[autofocus]");if(window.stzhComponents.fixAutofocus&&!document.location.hash&&n&&t.detail.namespace===o&&n.tagName.toLowerCase().indexOf("stzh-")===0&&"focus"in n){n.focus()}else if(window.stzhComponents.fixHashfocus&&document.location.hash){const t=document.querySelector(document.location.hash);if(t){t.scrollIntoView()}}};function s(){window.addEventListener("appload",e)}function i(){const t={threshold:1};const n=t=>{t.forEach((t=>{let n=0;if(t.intersectionRatio<1){n=window.innerWidth-document.documentElement.clientWidth}document.documentElement.style.setProperty("--stzh-scrollbar-width",n+"px");document.documentElement.style.setProperty("--stzh-scrollbar-active",n>0?"1":"0")}))};const o=new IntersectionObserver(n,t);o.observe(document.body)}function a(t,n="datetime"){if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}const{$formats:o,$globals:e}=window.stzhComponents.translations;const s=f(o,e);return s.format(t,n)}function r(t,n="datetime"){if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}const{$formats:o,$globals:e}=window.stzhComponents.translations;const s=f(o,e);return s.parse(t,n)}function c(t,n,o="datetime"){if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}const{$formats:e,$globals:s}=window.stzhComponents.translations;const i=f(e,s);return i.formatSpan(t,n,o)}function l(t,n="datetime"){if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}const{$formats:o,$globals:e}=window.stzhComponents.translations;const s=f(o,e);return s.parseSpan(t,n)}function f(t,n){const o=function(t,o){if(!o||!(o instanceof Date)||isNaN(o.getTime())){return""}let e=o.getDate().toString(10);let s=e;let i=(o.getMonth()+1).toString(10);let a=i;let r=o.getFullYear().toString(10);let c=o.getHours().toString(10);let l=c;let f=o.getMinutes().toString(10);let u=n.monthNames[o.getMonth()];let d=n.monthNamesShort[o.getMonth()];let w=n.dayNames[o.getDay()];let m=n.dayNamesShort[o.getDay()];if(o.getMonth()<9){a=`0${a}`}if(o.getDate()<10){s=`0${s}`}if(o.getHours()<10){l=`0${l}`}if(o.getMinutes()<10){f=`0${f}`}return t.replace(/\{j\}/g,e).replace(/\{d\}/g,s).replace(/\{D\}/g,m).replace(/\{l\}/g,w).replace(/\{n\}/g,i).replace(/\{m\}/g,a).replace(/\{F\}/g,u).replace(/\{M\}/g,d).replace(/\{Y\}/g,r).replace(/\{H\}/g,l).replace(/\{G\}/g,c).replace(/\{i\}/g,f)};const e=function(t,n){if(!n){return}const o=new RegExp(t);const e=n.match(o);if(e){const{groups:t}=e;const n=parseInt(t.Y||"",10);const o=parseInt(t.n||t.m||"",10);const s=parseInt(t.j||t.d||"",10);const i=parseInt(t.G||t.H||"",10);const a=parseInt(t.i||"",10);if(!isNaN(n)&&(n<1e3||n>9999)){return}if(!isNaN(o)&&(o<1||o>12)){return}if(!isNaN(s)&&(s<1||s>31)){return}if(!isNaN(i)&&(i<0||i>23)){return}if(!isNaN(a)&&(a<0||a>59)){return}const r=new Date(!isNaN(n)?n:null,!isNaN(o)?o-1:null,!isNaN(s)?s:null,!isNaN(i)?i:null,!isNaN(a)?a:null);if(r.getMonth()+1!==o){return}return r}};const s={format:function(n,e="datetime"){const s={...t[e],...window.stzhComponents?.formats[e]||{}};if(typeof s.format==="string"){return o(s.format,n)}else{return s.format(n)}},parse:function(n,o="datetime"){const s={...t[o],...window.stzhComponents?.formats[o]||{}};if(typeof s.parse==="string"){return e(s.parse,n)}else{return s.parse(n)}},formatSpan:function(t,o,e="datetime"){let s=t;let i=o;if(t instanceof Date&&!isNaN(t.getTime())){s=this.format(t,e)}if(o instanceof Date&&!isNaN(o.getTime())){i=this.format(o,e)}let a=n.dateRange;if(e.startsWith("time")){a=n.timeRange}return s+(i&&(!(i instanceof Date)||i instanceof Date&&!isNaN(t.getTime()))?a+i:"")},parseSpan:function(t,o){let e=n.dateRange;if(o.startsWith("time")){e=n.timeRange}const s=t.split(e);const i=this.parse(s[0],o);const a=this.parse(s[1],o);return[i,a,e]}};return s}function u(t){const n=t.closest("[lang]");const o=n&&n.lang.split("-")[0];if(window.stzhComponents.supportedLocales.indexOf(o)===-1||!o){return window.stzhComponents.defaultLocale}else{return o}}async function d(t,n){const o=u(t);const e=JSON.parse(sessionStorage.getItem(`stzhComponents.v${window.stzhComponents.version}.i18n.${o}`));if(window.stzhComponents.cacheTranslations&&e&&Object.keys(e).length>0){return{...e[n]||{},$globals:e.$globals,$locale:e.$code,$formats:e.$formats,$formatsIso:e.$formatsIso,$formatsLegacy:e.$formatsLegacy}}try{const t=await fetch(`${window.stzhComponents.pathTranslations}/${o}.json`);if(t.ok){const e=await t.json();sessionStorage.setItem(`stzhComponents.v${window.stzhComponents.version}.i18n.${o}`,JSON.stringify(e));return{...e[n]||{},$globals:e.$globals,$locale:e.$code,$formats:e.$formats,$formatsIso:e.$formatsIso,$formatsLegacy:e.$formatsLegacy}}}catch(t){console.error(`Error loading locale: ${o}`,t)}}const w=Object.freeze({__proto__:null,format:a,parse:r,formatSpan:c,parseSpan:l,createFormatParseAdapter:f,getLocale:u,fetchTranslations:d});function m(){window.stzhComponents=Object.assign(Object.assign({defaultLocale:"de",pathMedia:"/",pathTranslations:"/",cacheTranslations:true,formats:{},translations:null,fixAutofocus:true,fixHashfocus:true},window.stzhComponents||{}),{version:n,supportedLocales:["de","en"],utils:w});if(window.stzhComponents.translations===null){window.stzhComponents.translationsLoading=d(document.documentElement).then((t=>{window.stzhComponents.translations=t})).catch((t=>{console.error("Translations couldn't load:",t)}))}s();i()}const g=m;export{g};
-//# sourceMappingURL=p-f47de487.js.map