npm - @oiz/stzh-components - Versions diffs - 3.4.0-beta1 → 3.4.0-beta2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (307) hide show

package/dist/stzh-components/{p-d058fc1e.entry.js → p-c4bbdbfe.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,c as s,h as i,a as o,g as n}from"./p-c7bfac7a.js";import{h as r}from"./p-d789f265.js";import{S as h}from"./p-fc692303.js";import"./p-9b063923.js";const e=".sc-stzh-input-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-input-h{display:none}.sc-stzh-input-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-input-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-input-h *.sc-stzh-input,.sc-stzh-input-h *.sc-stzh-input::before,.sc-stzh-input-h *.sc-stzh-input::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-input-h .has-focus.sc-stzh-input{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input{outline-style:none !important}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input::-moz-focus-inner{border:0 !important}.sc-stzh-input-h{--text-align:left;--color:var(--stzh-color-secondary60);--border-color:var(--stzh-color-grey70);--border-radius:var(--stzh-form-input-border-radius);--background-color:var(--stzh-color-white);--padding-top:var(--stzh-space-xsmall);--padding-bottom:var(--stzh-space-xsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--height:var(--stzh-form-input-height);--input-width:100%;--label-color:var(--stzh-color-primary);--placeholder-color:var(--stzh-color-grey70);--button-right-color:var(--stzh-color-grey80);--hover-color:var(--stzh-color-secondary60);--hover-border-color:var(--stzh-color-secondary50);--hover-background-color:var(--stzh-color-white);--hover-button-right-color:var(--stzh-color-primary70);--focus-color:var(--stzh-color-black);--focus-border-color:var(--stzh-color-secondary50);--focus-background-color:var(--stzh-color-secondary20);--focus-button-right-color:var(--stzh-color-primary70);--text-selection-background-color:var(--stzh-color-secondary30);width:100%}[type=hidden].sc-stzh-input-h{position:absolute;top:-624.9375rem;left:-624.9375rem;visibility:hidden}[size=small].sc-stzh-input-h{--height:var(--stzh-form-input-small-height)}[is-filled].sc-stzh-input-h:not([is-filled=false]){--button-right-color:var(--stzh-color-primary70);--hover-button-right-color:var(--stzh-color-primary70);--focus-button-right-color:var(--stzh-color-black)}[is-invalid].sc-stzh-input-h{--color:var(--stzh-color-error60);--border-color:var(--stzh-color-error60);--background-color:var(--stzh-color-white);--label-color:var(--stzh-color-error60);--placeholder-color:var(--stzh-color-error60);--button-right-color:var(--stzh-color-error60);--hover-color:var(--stzh-color-error60);--hover-border-color:var(--stzh-color-error60);--hover-background-color:var(--stzh-color-white);--hover-button-right-color:var(--stzh-color-error60);--focus-color:var(--stzh-color-error60);--focus-border-color:var(--stzh-color-error60);--focus-background-color:var(--stzh-color-white);--focus-button-right-color:var(--stzh-color-error60)}[readonly].sc-stzh-input-h:not([readonly=false]),[disabled].sc-stzh-input-h:not([disabled=false]){--color:var(--stzh-color-grey70);--border-color:var(--stzh-color-grey70);--background-color:var(--stzh-color-grey10);--label-color:var(--stzh-color-grey70);--placeholder-color:var(--stzh-color-grey70);--description-color:var(--stzh-color-grey70);--button-right-color:var(--stzh-color-grey70);--hover-color:var(--stzh-color-grey70);--hover-border-color:var(--stzh-color-grey70);--hover-background-color:var(--stzh-color-grey10);--hover-button-right-color:var(--stzh-color-grey70);--focus-color:var(--stzh-color-grey70);--focus-border-color:var(--stzh-color-grey70);--focus-background-color:var(--stzh-color-grey10);--focus-button-right-color:var(--stzh-color-grey70)}.sc-stzh-input-h:is(:has(.stzh-input__input:hover)){--button-right-color:var(--hover-button-right-color)}.sc-stzh-input-h:is(:has(.stzh-input__input:focus)){--button-right-color:var(--focus-button-right-color)}.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right],.stzh-input__button-right.sc-stzh-input{position:absolute;top:0px;right:0px}.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right],.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right] stzh-popover{display:block}.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right],.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right][disabled]:not([disabled=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button,.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[disabled]:not([disabled=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button,.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=false]),.stzh-input__button-right.sc-stzh-input,.stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false]){--color:var(--button-right-color);--background-color:transparent;--border-color:transparent;--hover-color:var(--button-right-color);--hover-background-color:transparent;--hover-border-color:transparent}.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right][size=default][icon-only]:not([icon-only=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.stzh-input__button-right[size=default][icon-only].sc-stzh-input:not([icon-only=false]){--icon-size:var(--stzh-icon-size-medium)}.stzh-input__marker-symbol.sc-stzh-input{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-input__marker-text.sc-stzh-input{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-input__description-wrapper.sc-stzh-input{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-input__error.sc-stzh-input,.stzh-input__description.sc-stzh-input{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-input__error.sc-stzh-input{color:var(--stzh-color-error60)}.stzh-input__error-list.sc-stzh-input{list-style:none;margin:0;padding:0}.stzh-input__description.sc-stzh-input{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-input__description-long.sc-stzh-input{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-input__description-long.sc-stzh-input{margin-top:0}}.stzh-input__description-long-popover.sc-stzh-input{--width:auto;--max-width:27.3125rem}.stzh-input__description-long-button.sc-stzh-input{display:flex;justify-content:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-input.sc-stzh-input stzh-icon.stzh-input__description-long-icon.sc-stzh-input{--size:var(--stzh-icon-size-xsmall)}.stzh-input--has-error.sc-stzh-input .stzh-input__error.sc-stzh-input,.stzh-input--has-description.sc-stzh-input .stzh-input__description.sc-stzh-input{margin-top:var(--stzh-space-xxxsmall)}.stzh-input.sc-stzh-input .sc-stzh-input::-moz-selection{background:var(--text-selection-background-color)}.stzh-input.sc-stzh-input .sc-stzh-input::selection{background:var(--text-selection-background-color)}.stzh-input__field-wrapper.sc-stzh-input{position:relative;display:flex;width:var(--input-width)}.stzh-input__input.sc-stzh-input{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);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);border:0.125rem solid var(--border-color);transition-property:color, border-color, background-color;transition-duration:var(--stzh-base-transition-animation-speed);border-radius:var(--border-radius);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);margin:0;width:100%;color:var(--color);background-color:var(--background-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:var(--text-align)}.stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:hover{color:var(--hover-color);border-color:var(--hover-border-color);background-color:var(--hover-background-color)}.stzh-input__input.sc-stzh-input:focus{color:var(--focus-color);border-color:var(--focus-border-color);background-color:var(--focus-background-color)}.stzh-input__input.sc-stzh-input:-webkit-autofill{-webkit-background-clip:text;background-clip:text}.stzh-input__input.sc-stzh-input:-moz-placeholder-shown{text-overflow:ellipsis}.stzh-input__input.sc-stzh-input:placeholder-shown{text-overflow:ellipsis}.stzh-input__input[type=search].sc-stzh-input::-webkit-search-decoration,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-cancel-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-decoration{-webkit-appearance:none}.stzh-input__input--input.sc-stzh-input{height:var(--height)}.stzh-input__input--textarea.sc-stzh-input{min-height:var(--height);resize:vertical}.stzh-input__label.sc-stzh-input{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);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;color:var(--label-color);width:auto;max-width:100%;margin-bottom:var(--stzh-space-xxxsmall)}.stzh-input__label.sc-stzh-input:empty{display:none}.stzh-input__marker.sc-stzh-input{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-input--type-password.stzh-input--is-not-filled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-password.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-password.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-not-clearable.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-not-filled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right.sc-stzh-input{pointer-events:none}.stzh-input--has-button-right.sc-stzh-input .stzh-input__input.sc-stzh-input{padding-right:var(--height)}.stzh-input--size-small.sc-stzh-input .stzh-input__input.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-outer-spin-button,.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input[type=number].sc-stzh-input{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.stzh-input--has-label-hidden.sc-stzh-input .stzh-input__label.sc-stzh-input{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input{cursor:not-allowed}";let a=0;const c=class{constructor(i){t(this,i);this.stzhChange=s(this,"stzhChange",7);this.stzhChanged=s(this,"stzhChanged",7);this.stzhFocus=s(this,"stzhFocus",7);this.stzhBlur=s(this,"stzhBlur",7);this.focusedByInput=false;this.onClearClick=async t=>{this.value="";this.input.focus();await this.waitForNextRender();this.stzhChange.emit({component:"stzh-input",originalEvent:t,value:this.value});this.stzhChanged.emit({component:"stzh-input",originalEvent:t,value:this.value})};this.onTogglePasswordVisibilityClick=async()=>{this.showPassword=!this.showPassword};this.handleReset=async()=>{this.value=this.defaultValue;this.input.value=this.defaultValue};this.onInput=t=>{this.value=this.input.value;this.stzhChange.emit({component:"stzh-input",originalEvent:t,value:this.value})};this.onChange=t=>{this.value=this.input.value;this.stzhChanged.emit({component:"stzh-input",originalEvent:t,value:this.value})};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-input",originalEvent:t})};this.onBlur=t=>{this.input.value=this.input.value;const s=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhBlur.emit({component:"stzh-input",originalEvent:t})};this.localization=undefined;this.multiline=false;this.rows=undefined;this.type="text";this.step=1;this.min=undefined;this.max=undefined;this.showSpin=false;this.readonly=false;this.disabled=false;this.clearable=false;this.hideOptional=false;this.minlength=undefined;this.maxlength=undefined;this.name=undefined;this.value="";this.defaultValue="";this.description=undefined;this.descriptionLong=undefined;this.descriptionLongTitle=undefined;this.error=undefined;this.invalid=false;this.required=false;this.inputmode=undefined;this.autocomplete="on";this.noAutocomplete=false;this.label="";this.labelHidden=false;this.size="default";this.a11yDescribedby="";this.filled=undefined;this.showPassword=undefined}resetListener(t){if(t.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}valueWatcher(t){this.filled=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=[]}}typeWatcher(t){const s=["text","search","password","email","url","tel","number","hidden"];if(!this.multiline&&!s.includes(t)){throw new Error(`Type ${t} not supported`)}}waitForNextRender(){return new Promise((t=>this.renderPromiseResolve=t))}renderTextarea(){return i("textarea",{class:"stzh-input__input stzh-input__input--textarea",ref:t=>this.input=t,id:this.inputId,name:this.name,value:this.value,rows:this.rows,disabled:this.disabled,readonly:this.readonly,minlength:this.minlength,maxlength:this.maxlength,"aria-describedby":`${this.inputId}-description ${this.a11yDescribedby}`,"aria-required":this.required?"true":"false","aria-invalid":this.invalid?"true":"false",onChange:this.onChange,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur})}renderInput(){return i("input",{class:"stzh-input__input stzh-input__input--input",ref:t=>this.input=t,id:this.inputId,type:this.showPassword?"text":this.type,name:this.name,value:this.value,defaultValue:this.defaultValue,min:this.min,max:this.max,step:this.step,inputmode:this.inputmode,disabled:this.disabled,readonly:this.readonly,minlength:this.minlength,maxlength:this.maxlength,autocomplete:this.noAutocomplete?"off":this.autocomplete,"aria-autocomplete":this.noAutocomplete?"none":undefined,"aria-describedby":`${this.inputId}-description ${this.a11yDescribedby}`,"aria-required":this.required?"true":"false","aria-invalid":this.invalid?"true":"false",onChange:this.onChange,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur})}componentDidRender(){if(this.renderPromiseResolve){this.renderPromiseResolve()}}async componentWillLoad(){this.inputId=`stzh-input-${a++}`;this.typeWatcher(this.type);this.valueWatcher(this.value);this.errorWatcher(this.error);this.defaultValue=this.defaultValue||this.value;if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"input")}}render(){var t,s;const n=r(this.element,"button-right");const e=r(this.element,"description")||!!this.description;const a=r(this.element,"description-long")||!!this.descriptionLong;const c=r(this.element,"error")||((t=this._error)===null||t===void 0?void 0:t.length)>0;const l={"stzh-input":true,"stzh-input--has-button-right":n||this.type==="search"||this.clearable&&this.filled&&!this.readonly&&!this.disabled,"stzh-input--has-description":e,"stzh-input--has-description-long":a,"stzh-input--has-error":c,"stzh-input--has-spin":this.showSpin,"stzh-input--is-invalid":this.invalid||c,"stzh-input--is-disabled":this.disabled,"stzh-input--is-readonly":this.readonly,"stzh-input--is-required":this.required,"stzh-input--is-filled":this.filled,"stzh-input--is-not-filled":!this.filled,"stzh-input--is-clearable":this.clearable,"stzh-input--is-not-clearable":!this.clearable,"stzh-input--has-label-hidden":this.labelHidden,[`stzh-input--size-${this.size}`]:!!this.size,[`stzh-input--type-${this.type}`]:!!this.type};return i(o,{"is-invalid":this.invalid||c,tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus,"is-filled":this.filled},i("div",{class:l},i("label",{class:"stzh-input__label",htmlFor:this.inputId},this.label?this.label:i("slot",null),!this.hideOptional&&i("span",{class:"stzh-input__marker"},i("span",{class:"stzh-input__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),i("span",{class:"stzh-input__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText))),i("div",{class:"stzh-input__field-wrapper"},this.multiline?this.renderTextarea():this.renderInput(),this.clearable||this.type==="search"||this.type==="password"?(!this.clearable||this.disabled||this.readonly||!this.filled)&&(this.type==="search"||this.type==="password")?i("stzh-button",{class:"stzh-input__button-right",icon:this.type==="search"?"search":"view",size:this.size,iconOnly:true,onClick:this.onTogglePasswordVisibilityClick,disabled:this.disabled||this.readonly}):this.filled?i("stzh-button",{class:"stzh-input__button-right",icon:"close",size:this.size,iconOnly:true,onClick:this.onClearClick,a11yLabel:this.localization.$globals.clearButtonLabel,"aria-controls":this.inputId}):i("slot",{name:"button-right"}):i("slot",{name:"button-right"})),(((s=this._error)===null||s===void 0?void 0:s.length)>0||this.description)&&i(h,{classPrefix:"stzh-input",id:`${this.inputId}-description`,error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongTitle:this.descriptionLongTitle,descriptionLongUsed:a,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel})))}get element(){return n(this)}static get watchers(){return{value:["valueWatcher"],error:["errorWatcher"],type:["typeWatcher"]}}};c.style=e;export{c as stzh_input};
-//# sourceMappingURL=p-d058fc1e.entry.js.map
+import{r as t,c as s,h as i,a as o,g as n}from"./p-c7bfac7a.js";import{h as r}from"./p-d789f265.js";import{S as h}from"./p-fc692303.js";import"./p-9b063923.js";const e=".sc-stzh-input-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-input-h{display:none}.sc-stzh-input-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-input-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-input-h *.sc-stzh-input,.sc-stzh-input-h *.sc-stzh-input::before,.sc-stzh-input-h *.sc-stzh-input::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-input-h .has-focus.sc-stzh-input{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input{outline-style:none !important}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input::-moz-focus-inner{border:0 !important}.sc-stzh-input-h{--text-align:left;--color:var(--stzh-color-secondary60);--border-color:var(--stzh-color-grey70);--border-radius:var(--stzh-form-input-border-radius);--background-color:var(--stzh-color-white);--padding-top:var(--stzh-space-xsmall);--padding-bottom:var(--stzh-space-xsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--height:var(--stzh-form-input-height);--input-width:100%;--label-color:var(--stzh-color-primary);--placeholder-color:var(--stzh-color-grey70);--button-right-color:var(--stzh-color-grey80);--hover-color:var(--stzh-color-secondary60);--hover-border-color:var(--stzh-color-secondary50);--hover-background-color:var(--stzh-color-white);--hover-button-right-color:var(--stzh-color-primary70);--focus-color:var(--stzh-color-black);--focus-border-color:var(--stzh-color-secondary50);--focus-background-color:var(--stzh-color-secondary20);--focus-button-right-color:var(--stzh-color-primary70);--text-selection-background-color:var(--stzh-color-secondary30);width:100%}[type=hidden].sc-stzh-input-h{position:absolute;top:-624.9375rem;left:-624.9375rem;visibility:hidden}[size=small].sc-stzh-input-h{--height:var(--stzh-form-input-small-height)}[is-filled].sc-stzh-input-h:not([is-filled=false]){--button-right-color:var(--stzh-color-primary70);--hover-button-right-color:var(--stzh-color-primary70);--focus-button-right-color:var(--stzh-color-black)}[is-invalid].sc-stzh-input-h{--color:var(--stzh-color-error60);--border-color:var(--stzh-color-error60);--background-color:var(--stzh-color-white);--label-color:var(--stzh-color-error60);--placeholder-color:var(--stzh-color-error60);--button-right-color:var(--stzh-color-error60);--hover-color:var(--stzh-color-error60);--hover-border-color:var(--stzh-color-error60);--hover-background-color:var(--stzh-color-white);--hover-button-right-color:var(--stzh-color-error60);--focus-color:var(--stzh-color-error60);--focus-border-color:var(--stzh-color-error60);--focus-background-color:var(--stzh-color-white);--focus-button-right-color:var(--stzh-color-error60)}[readonly].sc-stzh-input-h:not([readonly=false]),[disabled].sc-stzh-input-h:not([disabled=false]){--color:var(--stzh-color-grey70);--border-color:var(--stzh-color-grey70);--background-color:var(--stzh-color-grey10);--label-color:var(--stzh-color-grey70);--placeholder-color:var(--stzh-color-grey70);--description-color:var(--stzh-color-grey70);--button-right-color:var(--stzh-color-grey70);--hover-color:var(--stzh-color-grey70);--hover-border-color:var(--stzh-color-grey70);--hover-background-color:var(--stzh-color-grey10);--hover-button-right-color:var(--stzh-color-grey70);--focus-color:var(--stzh-color-grey70);--focus-border-color:var(--stzh-color-grey70);--focus-background-color:var(--stzh-color-grey10);--focus-button-right-color:var(--stzh-color-grey70)}.sc-stzh-input-h:is(:has(.stzh-input__input:hover)){--button-right-color:var(--hover-button-right-color)}.sc-stzh-input-h:is(:has(.stzh-input__input:focus)){--button-right-color:var(--focus-button-right-color)}.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right],.stzh-input__button-right.sc-stzh-input{position:absolute;top:0px;right:0px}.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right],.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right] stzh-popover{display:block}.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right],.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right][disabled]:not([disabled=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button,.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[disabled]:not([disabled=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button,.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=false]),.stzh-input__button-right.sc-stzh-input,.stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false]){--color:var(--button-right-color);--background-color:transparent;--border-color:transparent;--hover-color:var(--button-right-color);--hover-background-color:transparent;--hover-border-color:transparent}.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right][size=default][icon-only]:not([icon-only=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.stzh-input__button-right[size=default][icon-only].sc-stzh-input:not([icon-only=false]){--icon-size:var(--stzh-icon-size-medium)}.stzh-input__marker-symbol.sc-stzh-input{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-input__marker-text.sc-stzh-input{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-input__description-wrapper.sc-stzh-input{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-input__error.sc-stzh-input,.stzh-input__description.sc-stzh-input{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-input__error.sc-stzh-input{color:var(--stzh-color-error60)}.stzh-input__error-list.sc-stzh-input{list-style:none;margin:0;padding:0}.stzh-input__description.sc-stzh-input{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-input__description-long.sc-stzh-input{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-input__description-long.sc-stzh-input{margin-top:0}}.stzh-input__description-long-popover.sc-stzh-input{--width:auto;--max-width:27.3125rem}.stzh-input__description-long-button.sc-stzh-input{display:flex;justify-content:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-input.sc-stzh-input stzh-icon.stzh-input__description-long-icon.sc-stzh-input{--size:var(--stzh-icon-size-xsmall)}.stzh-input--has-error.sc-stzh-input .stzh-input__error.sc-stzh-input,.stzh-input--has-description.sc-stzh-input .stzh-input__description.sc-stzh-input{margin-top:var(--stzh-space-xxxsmall)}.stzh-input.sc-stzh-input .sc-stzh-input::-moz-selection{background:var(--text-selection-background-color)}.stzh-input.sc-stzh-input .sc-stzh-input::selection{background:var(--text-selection-background-color)}.stzh-input__field-wrapper.sc-stzh-input{position:relative;display:flex;width:var(--input-width)}.stzh-input__input.sc-stzh-input{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);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);border:0.125rem solid var(--border-color);transition-property:color, border-color, background-color;transition-duration:var(--stzh-base-transition-animation-speed);border-radius:var(--border-radius);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);margin:0;width:100%;color:var(--color);background-color:var(--background-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:var(--text-align)}.stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:hover{color:var(--hover-color);border-color:var(--hover-border-color);background-color:var(--hover-background-color)}.stzh-input__input.sc-stzh-input:focus{color:var(--focus-color);border-color:var(--focus-border-color);background-color:var(--focus-background-color)}.stzh-input__input.sc-stzh-input:-webkit-autofill{-webkit-background-clip:text;background-clip:text}.stzh-input__input.sc-stzh-input:-moz-placeholder-shown{text-overflow:ellipsis}.stzh-input__input.sc-stzh-input:placeholder-shown{text-overflow:ellipsis}.stzh-input__input[type=search].sc-stzh-input::-webkit-search-decoration,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-cancel-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-decoration{-webkit-appearance:none}.stzh-input__input--input.sc-stzh-input{height:var(--height)}.stzh-input__input--textarea.sc-stzh-input{min-height:var(--height);resize:vertical}.stzh-input__label.sc-stzh-input{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);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;color:var(--label-color);width:auto;max-width:100%;margin-bottom:var(--stzh-space-xxxsmall)}.stzh-input__label.no-label-truncate.sc-stzh-input{white-space:normal;overflow:visible;text-overflow:initial;word-wrap:break-word}.stzh-input__label.sc-stzh-input:empty{display:none}.stzh-input__marker.sc-stzh-input{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-input--type-password.stzh-input--is-not-filled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-password.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-password.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-not-clearable.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-not-filled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right.sc-stzh-input{pointer-events:none}.stzh-input--has-button-right.sc-stzh-input .stzh-input__input.sc-stzh-input{padding-right:var(--height)}.stzh-input--size-small.sc-stzh-input .stzh-input__input.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-outer-spin-button,.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input[type=number].sc-stzh-input{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.stzh-input--has-label-hidden.sc-stzh-input .stzh-input__label.sc-stzh-input{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input{cursor:not-allowed}";let a=0;const c=class{constructor(i){t(this,i);this.stzhChange=s(this,"stzhChange",7);this.stzhChanged=s(this,"stzhChanged",7);this.stzhFocus=s(this,"stzhFocus",7);this.stzhBlur=s(this,"stzhBlur",7);this.focusedByInput=false;this.onClearClick=async t=>{this.value="";this.input.focus();await this.waitForNextRender();this.stzhChange.emit({component:"stzh-input",originalEvent:t,value:this.value});this.stzhChanged.emit({component:"stzh-input",originalEvent:t,value:this.value})};this.onTogglePasswordVisibilityClick=async()=>{this.showPassword=!this.showPassword};this.handleReset=async()=>{this.value=this.defaultValue;this.input.value=this.defaultValue};this.onInput=t=>{this.value=this.input.value;this.stzhChange.emit({component:"stzh-input",originalEvent:t,value:this.value})};this.onChange=t=>{this.value=this.input.value;this.stzhChanged.emit({component:"stzh-input",originalEvent:t,value:this.value})};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-input",originalEvent:t})};this.onBlur=t=>{this.input.value=this.input.value;const s=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhBlur.emit({component:"stzh-input",originalEvent:t})};this.localization=undefined;this.multiline=false;this.rows=undefined;this.type="text";this.step=1;this.min=undefined;this.max=undefined;this.showSpin=false;this.readonly=false;this.disabled=false;this.clearable=false;this.hideOptional=false;this.minlength=undefined;this.maxlength=undefined;this.name=undefined;this.value="";this.defaultValue="";this.description=undefined;this.descriptionLong=undefined;this.descriptionLongTitle=undefined;this.error=undefined;this.invalid=false;this.required=false;this.inputmode=undefined;this.autocomplete="on";this.noAutocomplete=false;this.label="";this.noLabelTruncate=false;this.labelHidden=false;this.size="default";this.a11yDescribedby="";this.filled=undefined;this.showPassword=undefined}resetListener(t){if(t.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}valueWatcher(t){this.filled=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=[]}}typeWatcher(t){const s=["text","search","password","email","url","tel","number","hidden"];if(!this.multiline&&!s.includes(t)){throw new Error(`Type ${t} not supported`)}}waitForNextRender(){return new Promise((t=>this.renderPromiseResolve=t))}renderTextarea(){return i("textarea",{class:"stzh-input__input stzh-input__input--textarea",ref:t=>this.input=t,id:this.inputId,name:this.name,value:this.value,rows:this.rows,disabled:this.disabled,readonly:this.readonly,minlength:this.minlength,maxlength:this.maxlength,"aria-describedby":`${this.inputId}-description ${this.a11yDescribedby}`,"aria-required":this.required?"true":"false","aria-invalid":this.invalid?"true":"false",onChange:this.onChange,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur})}renderInput(){return i("input",{class:"stzh-input__input stzh-input__input--input",ref:t=>this.input=t,id:this.inputId,type:this.showPassword?"text":this.type,name:this.name,value:this.value,defaultValue:this.defaultValue,min:this.min,max:this.max,step:this.step,inputmode:this.inputmode,disabled:this.disabled,readonly:this.readonly,minlength:this.minlength,maxlength:this.maxlength,autocomplete:this.noAutocomplete?"off":this.autocomplete,"aria-autocomplete":this.noAutocomplete?"none":undefined,"aria-describedby":`${this.inputId}-description ${this.a11yDescribedby}`,"aria-required":this.required?"true":"false","aria-invalid":this.invalid?"true":"false",onChange:this.onChange,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur})}componentDidRender(){if(this.renderPromiseResolve){this.renderPromiseResolve()}}async componentWillLoad(){this.inputId=`stzh-input-${a++}`;this.typeWatcher(this.type);this.valueWatcher(this.value);this.errorWatcher(this.error);this.defaultValue=this.defaultValue||this.value;if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"input")}}render(){var t,s;const n=r(this.element,"button-right");const e=r(this.element,"description")||!!this.description;const a=r(this.element,"description-long")||!!this.descriptionLong;const c=r(this.element,"error")||((t=this._error)===null||t===void 0?void 0:t.length)>0;const l={"stzh-input":true,"stzh-input--has-button-right":n||this.type==="search"||this.clearable&&this.filled&&!this.readonly&&!this.disabled,"stzh-input--has-description":e,"stzh-input--has-description-long":a,"stzh-input--has-error":c,"stzh-input--has-spin":this.showSpin,"stzh-input--is-invalid":this.invalid||c,"stzh-input--is-disabled":this.disabled,"stzh-input--is-readonly":this.readonly,"stzh-input--is-required":this.required,"stzh-input--is-filled":this.filled,"stzh-input--is-not-filled":!this.filled,"stzh-input--is-clearable":this.clearable,"stzh-input--is-not-clearable":!this.clearable,"stzh-input--has-label-hidden":this.labelHidden,[`stzh-input--size-${this.size}`]:!!this.size,[`stzh-input--type-${this.type}`]:!!this.type};return i(o,{"is-invalid":this.invalid||c,tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus,"is-filled":this.filled},i("div",{class:l},i("label",{class:{"stzh-input__label":true,"no-label-truncate":this.noLabelTruncate},htmlFor:this.inputId},this.label?this.label:i("slot",null),!this.hideOptional&&i("span",{class:"stzh-input__marker"},i("span",{class:"stzh-input__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),i("span",{class:"stzh-input__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText))),i("div",{class:"stzh-input__field-wrapper"},this.multiline?this.renderTextarea():this.renderInput(),this.clearable||this.type==="search"||this.type==="password"?(!this.clearable||this.disabled||this.readonly||!this.filled)&&(this.type==="search"||this.type==="password")?i("stzh-button",{class:"stzh-input__button-right",icon:this.type==="search"?"search":"view",size:this.size,iconOnly:true,onClick:this.onTogglePasswordVisibilityClick,disabled:this.disabled||this.readonly}):this.filled?i("stzh-button",{class:"stzh-input__button-right",icon:"close",size:this.size,iconOnly:true,onClick:this.onClearClick,a11yLabel:this.localization.$globals.clearButtonLabel,"aria-controls":this.inputId}):i("slot",{name:"button-right"}):i("slot",{name:"button-right"})),(((s=this._error)===null||s===void 0?void 0:s.length)>0||this.description)&&i(h,{classPrefix:"stzh-input",id:`${this.inputId}-description`,error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongTitle:this.descriptionLongTitle,descriptionLongUsed:a,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel})))}get element(){return n(this)}static get watchers(){return{value:["valueWatcher"],error:["errorWatcher"],type:["typeWatcher"]}}};c.style=e;export{c as stzh_input};
+//# sourceMappingURL=p-c4bbdbfe.entry.js.map

package/dist/stzh-components/p-c4bbdbfe.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhInputCss","inputCounter","StzhInput","this","focusedByInput","onClearClick","async","event","value","input","focus","waitForNextRender","stzhChange","emit","component","originalEvent","stzhChanged","onTogglePasswordVisibilityClick","showPassword","handleReset","defaultValue","onInput","onChange","onRootFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","resetListener","target","contains","requestAnimationFrame","valueWatcher","newValue","filled","errorWatcher","_error","JSON","parse","e","typeWatcher","types","multiline","includes","Error","Promise","resolve","renderPromiseResolve","renderTextarea","h","class","ref","el","id","inputId","name","rows","disabled","readonly","minlength","maxlength","a11yDescribedby","required","invalid","renderInput","type","min","max","step","inputmode","autocomplete","noAutocomplete","undefined","componentDidRender","componentWillLoad","error","localization","stzhComponents","utils","fetchTranslations","render","buttonRightSlotUsed","hasSlot","descriptionUsed","description","descriptionLongUsed","descriptionLong","errorUsed","_a","length","classes","clearable","showSpin","labelHidden","size","Host","tabindex","noLabelTruncate","htmlFor","label","hideOptional","$globals","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","icon","iconOnly","onClick","a11yLabel","clearButtonLabel","_b","StzhInputDescription","classPrefix","descriptionLongTitle","moreInfoButtonLabel"],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":["/**\n * @prop --text-align: Text align of field\n * @prop --input-width: Width of of field\n * @prop --padding-top: Padding top of field\n * @prop --padding-bottom: Padding bottom of field\n * @prop --padding-left: Padding left of field\n * @prop --padding-right: Padding right of field\n *\n * @prop --stzh-form-input-height: **Global**: Height of fields & buttons\n * @prop --stzh-form-input-small-height: **Global**: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: **Global**: Height of fields & buttons when tiny variant is used\n */\n\n:host {\n --text-align: left;\n --color: #{$formColor};\n --border-color: #{$formBorderColor};\n --border-radius: #{$formInputBorderRadius};\n --background-color: #{$formBackgroundColor};\n --padding-top: #{space('xsmall')};\n --padding-bottom: #{space('xsmall')};\n --padding-left: #{space('medium')};\n --padding-right: #{space('medium')};\n --height: #{$formInputHeight};\n --input-width: 100%;\n --label-color: #{$formLabelColor};\n --placeholder-color: #{$formInputPlaceholderColor};\n --button-right-color: #{$colorGrey80};\n\n --hover-color: #{$formHoverColor};\n --hover-border-color: #{$formHoverBorderColor};\n --hover-background-color: #{$formHoverBackgroundColor};\n --hover-button-right-color: #{$colorPrimary70};\n\n --focus-color: #{$formFocusColor};\n --focus-border-color: #{$formFocusBorderColor};\n --focus-background-color: #{$formFocusBackgroundColor};\n --focus-button-right-color: #{$colorPrimary70};\n\n --text-selection-background-color: #{$colorSecondary30};\n\n &[type=\"hidden\"] {\n position: absolute;\n top: -9999px;\n left: -9999px;\n visibility: hidden;\n }\n\n width: 100%;\n\n &[size=\"small\"] {\n --height: #{$formInputHeightSmall};\n }\n\n /* Filled */\n\n &[is-filled]:not([is-filled=\"false\"]) {\n --button-right-color: #{$colorPrimary70};\n --hover-button-right-color: #{$colorPrimary70};\n --focus-button-right-color: #{$formFocusColor};\n }\n\n /* Invalid */\n\n &[is-invalid] {\n --color: #{$colorError60};\n --border-color: #{$colorError60};\n --background-color: #{$colorWhite};\n --label-color: #{$colorError60};\n --placeholder-color: #{$colorError60};\n --button-right-color: #{$colorError60};\n\n --hover-color: #{$colorError60};\n --hover-border-color: #{$colorError60};\n --hover-background-color: #{$colorWhite};\n --hover-button-right-color: #{$colorError60};\n\n --focus-color: #{$colorError60};\n --focus-border-color: #{$colorError60};\n --focus-background-color: #{$colorWhite};\n --focus-button-right-color: #{$colorError60};\n }\n\n &[readonly]:not([readonly=\"false\"]),\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$formDisabledColor};\n --border-color: #{$formDisabledBorderColor};\n --background-color: #{$formDisabledBackgroundColor};\n --label-color: #{$formDisabledColor};\n --placeholder-color: #{$formDisabledColor};\n --description-color: #{$formDisabledColor};\n --button-right-color: #{$colorGrey70};\n\n --hover-color: #{$formDisabledColor};\n --hover-border-color: #{$formDisabledBorderColor};\n --hover-background-color: #{$formDisabledBackgroundColor};\n --hover-button-right-color: #{$colorGrey70};\n\n --focus-color: #{$formDisabledColor};\n --focus-border-color: #{$formDisabledBorderColor};\n --focus-background-color: #{$formDisabledBackgroundColor};\n --focus-button-right-color: #{$colorGrey70};\n }\n\n /* Internal (Hover / Focus) */\n\n &:is(:has(.stzh-input__input:hover)) {\n --button-right-color: var(--hover-button-right-color);\n }\n\n &:is(:has(.stzh-input__input:focus)) {\n --button-right-color: var(--focus-button-right-color);\n }\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n position: absolute;\n top: 0px;\n right: 0px;\n}\n\n:host ::slotted(stzh-popover[slot=\"button-right\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-popover {\n display: block;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"]),\n:host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button,\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button[disabled]:not([disabled=\"false\"]),\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button,\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=\"false\"]),\n.stzh-input__button-right,\n.stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n --color: var(--button-right-color);\n --background-color: transparent;\n --border-color: transparent;\n\n --hover-color: var(--button-right-color);\n --hover-background-color: transparent;\n --hover-border-color: transparent;\n}\n\n// :host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n// :host ::slotted([slot=\"button-right\"]) stzh-button[disabled]:not([disabled=\"false\"]),\n// .stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n// --hover-color: #{$colorGrey80};\n// }\n\n:host ::slotted(stzh-button[slot=\"button-right\"][size=\"default\"][icon-only]:not([icon-only=\"false\"])),\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n.stzh-input__button-right[size=\"default\"][icon-only]:not([icon-only=\"false\"]) {\n --icon-size: #{iconSize('medium')};\n}\n\n.stzh-input {\n @include input-description;\n\n ::selection {\n background: var(--text-selection-background-color);\n }\n\n &__field-wrapper {\n position: relative;\n display: flex;\n width: var(--input-width);\n }\n\n &__input {\n @include font;\n @include fontSize('milli');\n border: 2px solid var(--border-color);\n transition-property: color, border-color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n border-radius: var(--border-radius);\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n margin: 0;\n width: 100%;\n color: var(--color);\n background-color: var(--background-color);\n appearance: none;\n text-align: var(--text-align);\n\n @include placeholder {\n color: var(--placeholder-color);\n }\n\n &:hover {\n color: var(--hover-color);\n border-color: var(--hover-border-color);\n background-color: var(--hover-background-color);\n }\n\n &:focus {\n color: var(--focus-color);\n border-color: var(--focus-border-color);\n background-color: var(--focus-background-color);\n }\n\n // prevent ugly autofill background color in chrome\n &:-webkit-autofill {\n background-clip: text;\n }\n\n // show ellipsis for placeholders that are too long\n &:placeholder-shown {\n text-overflow: ellipsis;\n }\n\n // hide search clear icon on chrome\n &[type=\"search\"]::-webkit-search-decoration,\n &[type=\"search\"]::-webkit-search-cancel-button,\n &[type=\"search\"]::-webkit-search-results-button,\n &[type=\"search\"]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n /* Normal inputs */\n\n &--input {\n height: var(--height);\n }\n\n /* Textarea */\n\n &--textarea {\n min-height: var(--height);\n resize: vertical;\n }\n }\n\n &__label {\n @include font('heavy');\n @include fontSize('micro');\n @include truncate;\n display: block;\n color: var(--label-color);\n width: auto;\n max-width: 100%;\n margin-bottom: space('xxxsmall');\n // position: absolute;\n // top: calc(#{$formInputHeight} / 2);\n // // padding-left (medium) + border-left\n // left: calc(#{space('medium')} + 1px);\n // max-width: calc(100% - #{space('medium')} * 2);\n // transform: translateY(-50%);\n // transition: all $baseTransitionAnimationSpeed;\n // pointer-events: none;\n\n &.no-label-truncate {\n white-space: normal;\n overflow: visible;\n text-overflow: initial;\n word-wrap: break-word;\n }\n \n &:empty {\n display: none;\n }\n\n // &::before {\n // content: '';\n // display: none;\n // background: $colorWhite;\n // position: absolute;\n // width: 100%;\n // z-index: -1;\n // left: 0;\n // top: 50%;\n // // prevent white line not fully overlaping border of input\n // margin-top: -0.5px;\n // height: 2px;\n // }\n }\n\n &__marker {\n @include fontSize('nano');\n margin-left: calc(-0.25em + #{space('xsmall')});\n }\n\n /* Clearable / Search input / Password */\n\n &--type-password#{&}--is-not-filled &__button-right,\n &--type-password#{&}--is-readonly &__button-right,\n &--type-password#{&}--is-disabled &__button-right,\n &--type-search#{&}--is-not-clearable &__button-right,\n &--type-search#{&}--is-not-filled &__button-right,\n &--type-search#{&}--is-readonly &__button-right,\n &--type-search#{&}--is-disabled &__button-right {\n pointer-events: none;\n }\n\n /* Styles for floating label */\n\n // &:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--has-fixed-label &__label,\n // &--is-filled &__label,\n // &--is-readonly &__label,\n // &--is-disabled &__label,\n // &--is-invalid &__label {\n // display: block;\n // top: 0;\n // // padding-left (input field medium) - padding-left\n // left: calc(#{space('medium')} - #{space('xxsmall')});\n // height: 20px; // dividable by two (so before element is always positioned correctly)\n // line-height: 20px;\n // padding: 0 space('xxsmall');\n // max-width: calc(100% - #{space('small')} * 2);\n // pointer-events: all;\n\n // &:not(:empty)::before {\n // display: block;\n // }\n // }\n\n /* Button Right Variant */\n\n &--has-button-right &__input {\n // distance to icon + icon button width\n padding-right: var(--height);\n }\n\n // &--has-button-right &__label {\n // // 100% - ((padding left of normal variant + border 1px) * 2) - icon button width\n // max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeight});\n // }\n\n // &--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--has-button-right#{&}--has-fixed-label &__label,\n // &--has-button-right#{&}--is-filled &__label,\n // &--has-button-right#{&}--is-readonly &__label,\n // &--has-button-right#{&}--is-disabled &__label,\n // &--has-button-right#{&}--is-invalid &__label {\n // // 100% - left distance to text + 1px border + padding label right side - icon button width\n // max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xxsmall')} - #{$formInputHeight});\n // }\n\n /* Size variants */\n\n &--size-small &__input {\n @include fontSize('micro');\n }\n\n // &--size-small &__label {\n // top: calc(#{$formInputHeightSmall} / 2);\n // }\n\n // &--size-small#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--size-small#{&}--has-fixed-label &__label,\n // &--size-small#{&}--is-filled &__label,\n // &--size-small#{&}--is-readonly &__label,\n // &--size-small#{&}--is-disabled &__label,\n // &--size-small#{&}--is-invalid &__label {\n // top: 0;\n // }\n\n // &--size-small#{&}--has-button-right &__label {\n // max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeightSmall});\n // }\n\n // &--size-small#{&}--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--size-small#{&}--has-button-right#{&}--has-fixed-label &__label,\n // &--size-small#{&}--has-button-right#{&}--is-filled &__label,\n // &--size-small#{&}--has-button-right#{&}--is-readonly &__label,\n // &--size-small#{&}--has-button-right#{&}--is-disabled &__label,\n // &--size-small#{&}--has-button-right#{&}--is-invalid &__label {\n // max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xsmall')} - #{$formInputHeightSmall});\n // }\n\n /* Spin button */\n\n &:not(#{&}--has-spin) &__input {\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &[type=\"number\"] {\n appearance: textfield;\n }\n }\n\n /* Hidden label */\n\n &--has-label-hidden &__label {\n @include visuallyhidden;\n }\n\n /* Readonly / Disabled */\n\n &--is-readonly &__input,\n &--is-disabled &__input,\n &--is-readonly &__label,\n &--is-disabled &__label {\n cursor: not-allowed;\n }\n\n // &--is-readonly &__label,\n // &--is-disabled &__label {\n // &::before {\n // background: transparent;\n // }\n // }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhInputBlurEvent, StzhInputChangedEvent, StzhInputChangeEvent, StzhInputFocusEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 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 * @slot button-right - Slot for right button\n */\n@Component({\n tag: \"stzh-input\",\n styleUrl: \"stzh-input.scss\",\n scoped: true,\n})\nexport class StzhInput {\n /** Translation strings */\n @Prop() localization: StzhLocaleComponent;\n\n /** Whether the input is a textarea or an input field */\n @Prop() multiline: boolean = false;\n\n /** Rows attribute if input element is textarea */\n @Prop() rows: number;\n\n /** If input field, this defines the type (if `search`, a search icon will be displayed) */\n @Prop({ reflect: true }) type: \"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\" | \"number\" | \"hidden\" =\n \"text\";\n\n /** If input type is number, this will be the step size */\n @Prop() step: number = 1;\n\n /** If input type is number, this will be the minimum step number */\n @Prop() min: number;\n\n /** If input type is number, this will be the maximum step number */\n @Prop() max: number;\n\n /** If input type is number and this property is true, this will show the spin buttons on hover/focus */\n @Prop({ reflect: true }) showSpin: boolean = false;\n\n /** Whether the element is readonly or not */\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /** Whether the element is disabled or not */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) */\n @Prop({ reflect: true }) clearable: boolean = false;\n\n /** Hide `(optional)` label (or use `required` inside form to hide it) */\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /** Minimum of characters */\n @Prop() minlength: number;\n\n /** Maxlength of characters */\n @Prop() maxlength: number;\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 /** Default value (used by reset) */\n @Prop({ mutable: true }) defaultValue: 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 /** 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 /** Invalid status */\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /** Required status */\n @Prop({ reflect: true }) required: boolean = false;\n\n /**\n * Specify inputmode.\n * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n */\n @Prop() inputmode: string;\n\n /**\n * Specify what the user agent has to provide as automated assistance.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n */\n @Prop() autocomplete: string = \"on\";\n\n /** Whether autocomplete should be turned off */\n @Prop() noAutocomplete: boolean = false;\n\n /** Label */\n @Prop() label: string = \"\";\n\n /** Whether label should be truncate or not */\n @Prop() noLabelTruncate: boolean = false; \n\n /** Whether label should be visually hidden. */\n @Prop() labelHidden: boolean = false;\n\n /** Size variant */\n @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /** Whether the input is filled or not */\n @State() filled: boolean;\n\n /** Whether to show the password or not */\n @State() showPassword: boolean;\n\n @Element() element: HTMLStzhInputElement;\n\n /** Input change event */\n @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n /** Input changed event */\n @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n /** Input focus event */\n @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n /** Input blur event */\n @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\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(\"value\")\n valueWatcher(newValue: string) {\n this.filled = 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(\"type\")\n typeWatcher(newValue: string) {\n const types = [\"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\", \"hidden\"];\n\n if (!this.multiline && !types.includes(newValue)) {\n throw new Error(`Type ${newValue} not supported`);\n }\n }\n\n private input: HTMLInputElement | HTMLTextAreaElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => (this.renderPromiseResolve = resolve));\n }\n\n private onClearClick = async (event: MouseEvent) => {\n this.value = \"\";\n this.input.focus();\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private onTogglePasswordVisibilityClick = async () => {\n this.showPassword = !this.showPassword;\n };\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n // we also update value, since render doesn't get executed sometimes\n this.input.value = this.defaultValue;\n\n // TODO: check if we need own reset event or trigger the change event\n // (custom browser behaviour doesn't send change event, when reset is executed)\n // this.stzhChange.emit({\n // component: \"stzh-input\",\n // originalEvent: event,\n // value: this.value\n // });\n };\n\n private onInput = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private onChange = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\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-input\",\n originalEvent: event,\n });\n };\n\n private onBlur = (event: FocusEvent) => {\n // fixes weird bug where autofill selection doesn't get removed\n this.input.value = this.input.value;\n\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-input\",\n originalEvent: event,\n });\n };\n\n private renderTextarea(): HTMLTextAreaElement {\n return (\n <textarea\n class=\"stzh-input__input stzh-input__input--textarea\"\n ref={el => (this.input = el as HTMLTextAreaElement)}\n id={this.inputId}\n name={this.name}\n value={this.value}\n rows={this.rows}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ></textarea>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n class=\"stzh-input__input stzh-input__input--input\"\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.inputId}\n type={this.showPassword ? \"text\" : this.type}\n name={this.name}\n value={this.value}\n defaultValue={this.defaultValue}\n min={this.min}\n max={this.max}\n step={this.step}\n inputmode={this.inputmode}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n );\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-input-${inputCounter++}`;\n this.typeWatcher(this.type);\n this.valueWatcher(this.value);\n this.errorWatcher(this.error);\n\n this.defaultValue = this.defaultValue || this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"input\");\n }\n }\n\n render() {\n const buttonRightSlotUsed = hasSlot(this.element, \"button-right\");\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-input\": true,\n \"stzh-input--has-button-right\":\n buttonRightSlotUsed ||\n this.type === \"search\" ||\n (this.clearable && this.filled && !this.readonly && !this.disabled),\n \"stzh-input--has-description\": descriptionUsed,\n \"stzh-input--has-description-long\": descriptionLongUsed,\n \"stzh-input--has-error\": errorUsed,\n \"stzh-input--has-spin\": this.showSpin,\n \"stzh-input--is-invalid\": this.invalid || errorUsed,\n \"stzh-input--is-disabled\": this.disabled,\n \"stzh-input--is-readonly\": this.readonly,\n \"stzh-input--is-required\": this.required,\n \"stzh-input--is-filled\": this.filled,\n \"stzh-input--is-not-filled\": !this.filled,\n \"stzh-input--is-clearable\": this.clearable,\n \"stzh-input--is-not-clearable\": !this.clearable,\n \"stzh-input--has-label-hidden\": this.labelHidden,\n [`stzh-input--size-${this.size}`]: !!this.size,\n [`stzh-input--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host\n is-invalid={this.invalid || errorUsed}\n tabindex={this.disabled ? null : \"-1\"}\n onFocus={this.onRootFocus}\n is-filled={this.filled}\n >\n <div class={classes}>\n <label \n class={{\n \"stzh-input__label\": true,\n \"no-label-truncate\": this.noLabelTruncate,\n }} \n htmlFor={this.inputId}\n >\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional && (\n <span class=\"stzh-input__marker\">\n <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker}\n </span>\n <span class=\"stzh-input__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText}\n </span>\n </span>\n )}\n </label>\n <div class=\"stzh-input__field-wrapper\">\n {this.multiline ? this.renderTextarea() : this.renderInput()}\n {this.clearable || this.type === \"search\" || this.type === \"password\" ? (\n (!this.clearable || this.disabled || this.readonly || !this.filled) &&\n (this.type === \"search\" || this.type === \"password\") ? (\n <stzh-button\n class=\"stzh-input__button-right\"\n icon={this.type === \"search\" ? \"search\" : \"view\"}\n size={this.size}\n iconOnly={true}\n onClick={this.onTogglePasswordVisibilityClick}\n disabled={this.disabled || this.readonly}\n ></stzh-button>\n ) : this.filled ? (\n <stzh-button\n class=\"stzh-input__button-right\"\n icon=\"close\"\n size={this.size}\n iconOnly={true}\n onClick={this.onClearClick}\n a11yLabel={this.localization.$globals.clearButtonLabel}\n aria-controls={this.inputId}\n ></stzh-button>\n ) : (\n <slot name=\"button-right\"></slot>\n )\n ) : (\n <slot name=\"button-right\"></slot>\n )}\n </div>\n {(this._error?.length > 0 || this.description) && (\n <StzhInputDescription\n classPrefix=\"stzh-input\"\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"],"mappings":"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"}

package/dist/stzh-components/p-c6504f41.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as o,h as s,a as e,g as i}from"./p-c7bfac7a.js";import{c as r}from"./p-3d5f9ac0.js";import{c as a}from"./p-ed63ed76.js";const n=".sc-stzh-overlay-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-overlay-h{display:none}.sc-stzh-overlay-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-overlay-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-overlay-h .sc-stzh-overlay,.sc-stzh-overlay-h .sc-stzh-overlay::before,.sc-stzh-overlay-h *.sc-stzh-overlay::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-overlay-h .has-focus.sc-stzh-overlay{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-overlay-h .stzh-fylingfocus-focused.sc-stzh-overlay{outline-style:none !important}.sc-stzh-overlay-h .stzh-fylingfocus-focused.sc-stzh-overlay::-moz-focus-inner{border:0 !important}.sc-stzh-overlay-h{--backdrop-opacity:var(--stzh-overlay-backdrop-opacity);--backdrop-background-color:var(--stzh-overlay-backdrop-background-color)}.stzh-overlay.sc-stzh-overlay{display:none;z-index:var(--stzh-z-index-overlay);position:fixed;top:0;left:0;width:100%;height:100%;flex-direction:column;justify-content:stretch;align-items:stretch}.stzh-overlay__backdrop.sc-stzh-overlay{z-index:1;background-color:var(--backdrop-background-color);opacity:var(--backdrop-opacity);position:absolute;top:0;left:0;width:100%;height:100%}.stzh-overlay__content.sc-stzh-overlay{z-index:2;display:flex;flex-direction:column;align-items:center;position:relative;flex-grow:1;overflow:auto}.stzh-overlay__content-inner.sc-stzh-overlay{margin-top:auto;margin-bottom:auto;outline:none}.stzh-overlay--is-open.sc-stzh-overlay{display:flex}";const l="stzh-overlay-open";const h=class{constructor(s){t(this,s);this.stzhOpen=o(this,"stzhOpen",7);this.stzhClose=o(this,"stzhClose",7);this.open=false;this.stay=true;this.a11yLabel=""}async show(){this.open=true;this.stzhOpen.emit({component:"stzh-overlay"})}async hide(){this.open=false;this.stzhClose.emit({component:"stzh-overlay"})}getSiblings(){if(!this.parentElement){return[]}return Array.from(this.parentElement.children).filter((t=>t!==this.element))}disableSiblings(){this.getSiblings().forEach((t=>{t.setAttribute("aria-hidden","true")}))}enableSiblings(){this.getSiblings().forEach((t=>{t.removeAttribute("aria-hidden")}))}dialogShown(){document.body.classList.add(l);this.disableSiblings();if(this.trap){this.trap.activate()}}dialogHidden(){document.body.classList.remove(l);this.enableSiblings();if(this.trap){this.trap.deactivate()}}connectedCallback(){if(!this.stay&&this.element.parentElement!==document.body){document.body.appendChild(this.element)}this.parentElement=this.element.parentElement}componentDidRender(){this.open?this.dialogShown():this.dialogHidden()}componentDidUpdate(){this.trap.updateContainerElements(this.element)}componentDidLoad(){this.trap=a(this.element,Object.assign({fallbackFocus:this.dialogElement},r()));if(this.open){this.dialogShown()}}disconnectedCallback(){this.dialogHidden()}render(){const t={"stzh-overlay":true,"stzh-overlay--is-open":this.open};return s(e,null,s("div",{class:t},s("div",{class:"stzh-overlay__backdrop"}),s("div",{class:"stzh-overlay__content"},s("div",{class:"stzh-overlay__content-inner",ref:t=>this.dialogElement=t,tabindex:"-1",role:"dialog","aria-label":this.a11yLabel\|\|null,"aria-hidden":this.open?"false":"true"},s("slot",null)))))}get element(){return i(this)}};h.style=n;export{h as stzh_overlay};
2	+ //# sourceMappingURL=p-c6504f41.entry.js.map

package/dist/stzh-components/p-c6504f41.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhOverlayCss","CLASS_BODY_OPEN","StzhOverlay","show","this","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","render","classes","h","Host","class","ref","el","tabindex","role","a11yLabel"],"sources":["src/components/stzh-overlay/stzh-overlay.scss?tag=stzh-overlay&encapsulation=scoped","src/components/stzh-overlay/stzh-overlay.tsx"],"sourcesContent":["/**\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 {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Method,\n Element\n} from \"@stencil/core\";\n\nimport {\n StzhOverlayOpenEvent,\n StzhOverlayCloseEvent\n} 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(\n (child) => child !== this.element\n );\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":"wIAAA,MAAMA,EAAiB,ugECoBvB,MAAMC,EAAkB,oB,MAUXC,EAAW,M,2GAEmB,M,UAGjB,K,eAG+B,E,CAWvD,UAAMC,GACJC,KAAKC,KAAO,KACZD,KAAKE,SAASC,KAAK,CACjBC,UAAW,gB,CAKf,UAAMC,GACJL,KAAKC,KAAO,MACZD,KAAKM,UAAUH,KAAK,CAClBC,UAAW,gB,CAQP,WAAAG,GACN,IAAKP,KAAKQ,cAAe,CACvB,MAAO,E,CAGT,OAAOC,MAAMC,KAAKV,KAAKQ,cAAcG,UAAUC,QAC5CC,GAAUA,IAAUb,KAAKc,S,CAItB,eAAAC,GACNf,KAAKO,cAAcS,SAASC,IAC1BA,EAAQC,aAAa,cAAe,OAAO,G,CAIvC,cAAAC,GACNnB,KAAKO,cAAcS,SAASC,IAC1BA,EAAQG,gBAAgB,cAAc,G,CAIlC,WAAAC,GACNC,SAASC,KAAKC,UAAUC,IAAI5B,GAC5BG,KAAKe,kBAEL,GAAIf,KAAK0B,KAAM,CACb1B,KAAK0B,KAAKC,U,EAIN,YAAAC,GACNN,SAASC,KAAKC,UAAUK,OAAOhC,GAC/BG,KAAKmB,iBAEL,GAAInB,KAAK0B,KAAM,CACb1B,KAAK0B,KAAKI,Y,EAId,iBAAAC,GACE,IAAK/B,KAAKgC,MAAQhC,KAAKc,QAAQN,gBAAkBc,SAASC,KAAM,CAC9DD,SAASC,KAAKU,YAAYjC,KAAKc,Q,CAGjCd,KAAKQ,cAAgBR,KAAKc,QAAQN,a,CAGpC,kBAAA0B,GACElC,KAAKC,KAAOD,KAAKqB,cAAgBrB,KAAK4B,c,CAGxC,kBAAAO,GACEnC,KAAK0B,KAAKU,wBAAwBpC,KAAKc,Q,CAGzC,gBAAAuB,GACErC,KAAK0B,KAAOY,EAAgBtC,KAAKc,QAAOyB,OAAAC,OAAA,CACtCC,cAAezC,KAAK0C,eACjBC,MAGL,GAAI3C,KAAKC,KAAM,CACbD,KAAKqB,a,EAIT,oBAAAuB,GACE5C,KAAK4B,c,CAGP,MAAAiB,GACE,MAAMC,EAAU,CACd,eAAgB,KAChB,wBAAyB9C,KAAKC,MAGhC,OACE8C,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,OAAKE,MAAM,2BACXF,EAAA,OAAKE,MAAM,yBACTF,EAAA,OACEE,MAAM,8BACNC,IAAMC,GAAQnD,KAAK0C,cAAgBS,EACnCC,SAAS,KACTC,KAAK,SAAQ,aACDrD,KAAKsD,WAAa,KAAI,cACrBtD,KAAKC,KAAO,QAAU,QAEnC8C,EAAA,gB"}

package/dist/stzh-components/p-d29fd503.entry.js ADDED Viewed

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

package/dist/stzh-components/p-d29fd503.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

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