@oiz/stzh-components 3.0.0-beta3 → 3.0.0-beta5

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

@@ -1,2 +0,0 @@
-import{r as s,c as e,h as t,a,g as i}from"./p-c7bfac7a.js";const n=".sc-stzh-message-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-message-h{display:none}.sc-stzh-message-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-message-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-message-h *.sc-stzh-message,.sc-stzh-message-h *.sc-stzh-message::before,.sc-stzh-message-h *.sc-stzh-message::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-message-h .has-focus.sc-stzh-message{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-message-h .stzh-fylingfocus-focused.sc-stzh-message{outline-style:none !important}.sc-stzh-message-h .stzh-fylingfocus-focused.sc-stzh-message::-moz-focus-inner{border:0 !important}.sc-stzh-message-h{--background-color:var(--stzh-color-grey20);--icon-color:var(--stzh-color-info70);--close-color:var(--stzh-color-grey90);--label-color:var(--stzh-color-info70);--description-color:var(--stzh-color-grey90)}[type=success].sc-stzh-message-h{--label-color:var(--stzh-color-success70);--icon-color:var(--stzh-color-success70);--background-color:var(--stzh-color-success20)}[type=warning].sc-stzh-message-h{--label-color:var(--stzh-color-warning90);--icon-color:var(--stzh-color-warning90);--background-color:var(--stzh-color-warning20)}[type=error].sc-stzh-message-h{--label-color:var(--stzh-color-error70);--icon-color:var(--stzh-color-error70);--background-color:var(--stzh-color-error20)}.stzh-message.sc-stzh-message{position:relative;display:flex;box-shadow:var(--stzh-box-shadow-message);background-color:var(--background-color);border-radius:var(--stzh-button-border-radius)}.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);padding-right:var(--stzh-space-xlarge);gap:var(--stzh-space-small);display:flex;flex-direction:column;flex-grow:1;padding-left:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-large)}}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{flex-direction:row;align-items:flex-start}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-left:var(--stzh-space-large)}}.stzh-message__icon-wrapper.sc-stzh-message{display:flex;flex-shrink:0}.stzh-message__icon.sc-stzh-message{--size:var(--stzh-icon-size-large);color:var(--icon-color)}@media screen and (min-width: 600px){.stzh-message__text-wrapper.sc-stzh-message{flex-grow:1}}.stzh-message__label.sc-stzh-message{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing);color:var(--label-color)}@media screen and (min-width: 600px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-small-heading-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-large-heading-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-large)}}.stzh-message__description.sc-stzh-message{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);color:var(--description-color)}@media screen and (min-width: 900px){.stzh-message__description.sc-stzh-message{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xxlarge)}}.stzh-message__close[variant=tertiary].sc-stzh-message{--color:var(--close-color);position:absolute;top:0;right:0}.stzh-message.sc-stzh-message:has(.stzh-message__description:empty):has(.stzh-message__link:empty) .stzh-message__label.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xxsmall);margin-bottom:0}";const h=class{constructor(t){s(this,t);this.stzhOpen=e(this,"stzhOpen",7);this.stzhClose=e(this,"stzhClose",7);this.onCloseButtonClick=()=>{this.hide()};this.label="";this.description="";this.type="info";this.hideClose=false;this.localization=undefined;this.open=true}async show(){this.open=true;this.stzhOpen.emit({component:"stzh-message"})}async hide(){this.open=false;this.stzhClose.emit({component:"stzh-message"})}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"message")}}render(){const s={"stzh-message":true,"stzh-message--has-close-hidden":this.hideClose,[`stzh-message--type-${this.type}`]:!!this.type};return t(a,{hidden:!this.open},t("div",{class:s},t("div",{class:"stzh-message__content"},t("div",{class:"stzh-message__icon-wrapper"},t("stzh-icon",{class:"stzh-message__icon",name:this.type==="info"&&"info-help-filled"||this.type==="success"&&"checkmark-circle-filled"||this.type==="warning"&&"important-warning-filled"||this.type==="error"&&"warning-filled"})),t("div",{class:"stzh-message__text-wrapper"},t("div",{class:"stzh-message__label"},this.label?this.label:t("slot",{name:"label"})),t("div",{class:"stzh-message__description"},this.description?this.description:t("slot",null)),t("div",{class:"stzh-message__link"},t("slot",{name:"link"})))),!this.hideClose&&t("stzh-button",{class:"stzh-message__close",onClick:this.onCloseButtonClick,a11yLabel:this.localization.close,variant:"tertiary",size:"small",iconOnly:true,icon:"close-big"})))}get element(){return i(this)}};h.style=n;export{h as stzh_message};
-//# sourceMappingURL=p-ef849bb1.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stzhMessageCss","StzhMessage","this","onCloseButtonClick","hide","show","open","stzhOpen","emit","component","stzhClose","componentWillLoad","localization","window","stzhComponents","utils","fetchTranslations","element","render","classes","hideClose","type","h","Host","hidden","class","name","label","description","onClick","a11yLabel","close","variant","size","iconOnly","icon"],"sources":["src/components/stzh-message/stzh-message.scss?tag=stzh-message&encapsulation=scoped","src/components/stzh-message/stzh-message.tsx"],"sourcesContent":[":host {\n  --background-color: #{$colorGrey20};\n  --icon-color: #{$colorInfo70};\n  --close-color: #{$colorGrey90};\n  --label-color: #{$colorInfo70};\n  --description-color: #{$colorGrey90};\n\n  &[type=\"success\"] {\n    --label-color: #{$colorSuccess70};\n    --icon-color: #{$colorSuccess70};\n    --background-color: #{$colorSuccess20};\n  }\n\n  &[type=\"warning\"] {\n    --label-color: #{$colorWarning90};\n    --icon-color: #{$colorWarning90};\n    --background-color: #{$colorWarning20};\n  }\n\n  &[type=\"error\"] {\n    --label-color: #{$colorError70};\n    --icon-color: #{$colorError70};\n    --background-color: #{$colorError20};\n  }\n}\n\n.stzh-message {\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n\n  &__content {\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n    @include spaceCurve('padding-right', 'medium');\n    @include spaceCurve('gap', 'small');\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    padding-left: space('medium');\n\n    @include mq($from: small) {\n      flex-direction: row;\n      align-items: flex-start;\n    }\n\n    @include mq($from: medium) {\n      padding-left: space('large');\n    }\n  }\n\n  &__icon-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  &__icon {\n    --size: #{iconSize('large')};\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    @include mq($from: small) {\n      flex-grow: 1;\n    }\n  }\n\n  &__label {\n    @include font('title');\n    @include fontCurve('h4', 'heading');\n    color: var(--label-color);\n\n    &:not(:empty) {\n      @include spaceCurve('margin-bottom', 'small');\n    }\n  }\n\n  &__description {\n    @include fontCurve('p1');\n    color: var(--description-color);\n  }\n\n  &__description:not(:empty) + &__link:not(:empty) {\n    @include spaceCurve('margin-top', 'regular');\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Only label variant */\n\n  &:has(#{&}__description:empty):has(#{&}__link:empty) &__label:not(:empty) {\n    margin-top: space('xxsmall');\n    margin-bottom: 0;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  State\n} from \"@stencil/core\";\n\nimport { StzhMessageOpenEvent, StzhMessageCloseEvent } from \"../../index\";\n\nimport { StzhMessageLocalizedText } from \"./stzh-message.localization\"\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @slot label - Slot for label (use as alternative for property)\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-message\",\n  styleUrl: \"stzh-message.scss\",\n  scoped: true\n})\nexport class StzhMessage {\n  /** Label (slot can also be used as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Description (use instead of default slot) */\n  @Prop() description: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: \"info\" | \"success\" | \"warning\" | \"error\" = \"info\"\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhMessageLocalizedText;\n\n  /** Message open event */\n  @Event() stzhOpen: EventEmitter<StzhMessageOpenEvent>;\n\n  /** Message close event */\n  @Event() stzhClose: EventEmitter<StzhMessageCloseEvent>;\n\n  @Element() element: HTMLStzhMessageElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-message\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-message\"\n    });\n  }\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"message\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-message\": true,\n      \"stzh-message--has-close-hidden\": this.hideClose,\n      [`stzh-message--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-message__content\">\n            <div class=\"stzh-message__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-message__icon\"\n                name={\n                  this.type === 'info' && \"info-help-filled\"\n                  || this.type === 'success' && \"checkmark-circle-filled\"\n                  || this.type === 'warning' && \"important-warning-filled\"\n                  || this.type === 'error' && \"warning-filled\"\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-message__text-wrapper\">\n              <div class=\"stzh-message__label\">\n                {this.label ? this.label : <slot name=\"label\"></slot>}\n              </div>\n              <div class=\"stzh-message__description\">\n                {this.description ? this.description : <slot></slot>}\n              </div>\n              <div class=\"stzh-message__link\">\n                <slot name=\"link\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose &&\n            <stzh-button\n              class=\"stzh-message__close\"\n              onClick={this.onCloseButtonClick}\n              a11yLabel={this.localization.close}\n              variant=\"tertiary\"\n              size=\"small\"\n              iconOnly={true}\n              icon=\"close-big\"\n            ></stzh-button>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAiB,s3O,MC0BVC,EAAW,M,iGA2CdC,KAAAC,mBAAqB,KAC3BD,KAAKE,MAAM,E,WA1CW,G,iBAGM,G,UAG4C,O,eAG7C,M,sCAcJ,I,CAGzB,UAAMC,GACJH,KAAKI,KAAO,KACZJ,KAAKK,SAASC,KAAK,CACjBC,UAAW,gB,CAKf,UAAML,GACJF,KAAKI,KAAO,MACZJ,KAAKQ,UAAUF,KAAK,CAClBC,UAAW,gB,CAQf,uBAAME,GACJ,IAAKT,KAAKU,aAAc,CACtBV,KAAKU,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkBd,KAAKe,QAAS,U,EAI1F,MAAAC,GACE,MAAMC,EAAU,CACd,eAAgB,KAChB,iCAAkCjB,KAAKkB,UACvC,CAAC,sBAAsBlB,KAAKmB,UAAWnB,KAAKmB,MAG9C,OACEC,EAACC,EAAI,CAACC,QAAStB,KAAKI,MAClBgB,EAAA,OAAKG,MAAON,GACVG,EAAA,OAAKG,MAAM,yBACTH,EAAA,OAAKG,MAAM,8BACTH,EAAA,aACEG,MAAM,qBACNC,KACExB,KAAKmB,OAAS,QAAU,oBACrBnB,KAAKmB,OAAS,WAAa,2BAC3BnB,KAAKmB,OAAS,WAAa,4BAC3BnB,KAAKmB,OAAS,SAAW,oBAIlCC,EAAA,OAAKG,MAAM,8BACTH,EAAA,OAAKG,MAAM,uBACRvB,KAAKyB,MAAQzB,KAAKyB,MAAQL,EAAA,QAAMI,KAAK,WAExCJ,EAAA,OAAKG,MAAM,6BACRvB,KAAK0B,YAAc1B,KAAK0B,YAAcN,EAAA,cAEzCA,EAAA,OAAKG,MAAM,sBACTH,EAAA,QAAMI,KAAK,aAKfxB,KAAKkB,WACLE,EAAA,eACEG,MAAM,sBACNI,QAAS3B,KAAKC,mBACd2B,UAAW5B,KAAKU,aAAamB,MAC7BC,QAAQ,WACRC,KAAK,QACLC,SAAU,KACVC,KAAK,e"}

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

@@ -1,2 +0,0 @@
-import{r as s,c,h as t,a as e,g as h}from"./p-c7bfac7a.js";import{h as o}from"./p-7e304ea3.js";import{S as i}from"./p-fc692303.js";import"./p-9b063923.js";const r=`<svg xmlns="http://www.w3.org/2000/svg" width="22px" height="22px" fill="none" viewBox="0 0 24 24"><g clip-path="url(#a)"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></svg>`;const n=".sc-stzh-checkbox-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-checkbox-h{display:none}.sc-stzh-checkbox-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-checkbox-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-checkbox-h *.sc-stzh-checkbox,.sc-stzh-checkbox-h *.sc-stzh-checkbox::before,.sc-stzh-checkbox-h *.sc-stzh-checkbox::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-checkbox-h .has-focus.sc-stzh-checkbox{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-checkbox-h .stzh-fylingfocus-focused.sc-stzh-checkbox{outline-style:none !important}.sc-stzh-checkbox-h .stzh-fylingfocus-focused.sc-stzh-checkbox::-moz-focus-inner{border:0 !important}.sc-stzh-checkbox-h{display:inline-block}[disabled].sc-stzh-checkbox-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-checkbox__marker-symbol.sc-stzh-checkbox{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-checkbox__marker-text.sc-stzh-checkbox{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-checkbox__description-wrapper.sc-stzh-checkbox{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox__description.sc-stzh-checkbox{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-checkbox__error.sc-stzh-checkbox{color:var(--stzh-color-error60)}.stzh-checkbox__error-list.sc-stzh-checkbox{list-style:none;margin:0;padding:0}.stzh-checkbox__description.sc-stzh-checkbox{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-checkbox__description-long.sc-stzh-checkbox{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-checkbox__description-long.sc-stzh-checkbox{margin-top:0}}.stzh-checkbox__description-long-popover.sc-stzh-checkbox{--width:auto;--max-width:27.3125rem}.stzh-checkbox__description-long-button.sc-stzh-checkbox{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-checkbox.sc-stzh-checkbox stzh-icon.stzh-checkbox__description-long-icon.sc-stzh-checkbox{--size:var(--stzh-icon-size-xsmall)}.stzh-checkbox--has-error.sc-stzh-checkbox .stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox--has-description.sc-stzh-checkbox .stzh-checkbox__description.sc-stzh-checkbox{margin-top:var(--stzh-space-xxxsmall)}.stzh-checkbox__field-wrapper.sc-stzh-checkbox{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.stzh-checkbox__input.sc-stzh-checkbox{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--stzh-form-input-border-radius)}.stzh-checkbox__mark.sc-stzh-checkbox{border:0.125rem solid var(--stzh-color-black);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:var(--stzh-form-input-border-radius);display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed)}.stzh-checkbox__check.sc-stzh-checkbox{display:flex;flex-direction:column;justify-content:center;opacity:0;color:var(--stzh-color-primary);transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-checkbox__label.sc-stzh-checkbox{--stzh-base-color:initial;display:inline-block;color:var(--stzh-base-color);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);line-height:1.5rem}.stzh-checkbox__label.sc-stzh-checkbox:empty{display:none}.stzh-checkbox__marker.sc-stzh-checkbox{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__label.sc-stzh-checkbox{color:var(--stzh-color-primary70)}.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-primary90)}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-primary70)}.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-primary90)}.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{opacity:1}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-error60)}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-error60)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__field-wrapper.sc-stzh-checkbox{cursor:not-allowed}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox{color:var(--stzh-color-grey60)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-grey50)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-grey50)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__mark.sc-stzh-checkbox{background-color:var(--stzh-color-grey20)}";let a=0;const l=class{constructor(t){s(this,t);this.stzhChange=c(this,"stzhChange",7);this.stzhFocus=c(this,"stzhFocus",7);this.stzhBlur=c(this,"stzhBlur",7);this.focusedByInput=false;this.handleReset=async()=>{this.checked=this.defaultChecked};this.onInput=s=>{this.checked=this.input.checked;this.stzhChange.emit({component:"stzh-checkbox",originalEvent:s,value:this.value,checked:this.checked})};this.onRootFocus=()=>{if(!this.focusedByInput){this.input.focus()}this.focusedByInput=false};this.onFocus=s=>{this.focusedByInput=true;const c=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(c);this.stzhFocus.emit({component:"stzh-checkbox",originalEvent:s})};this.onBlur=s=>{const c=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(c);this.stzhBlur.emit({component:"stzh-checkbox",originalEvent:s})};this.localization=undefined;this.disabled=false;this.name="";this.value="";this.invalid=false;this.required=false;this.checked=false;this.defaultChecked=undefined;this.label="";this.description=undefined;this.descriptionLong=undefined;this.descriptionLongTitle=undefined;this.hideOptional=false;this.error=undefined;this.a11yDescribedby=""}resetListener(s){if(s.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}errorWatcher(s){if(typeof s==="string"){try{this._error=JSON.parse(s)}catch(c){if(s){this._error=[s]}else{this._error=[]}}}else if(s){this._error=s}else{this._error=[]}}async componentWillLoad(){this.inputId=`stzh-checkbox-${a++}`;this.errorWatcher(this.error);this.defaultChecked=typeof this.defaultChecked==="boolean"?this.defaultChecked:this.checked;if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"checkbox")}}render(){var s;const c=o(this.element,"description")||!!this.description;const h=o(this.element,"description-long")||!!this.descriptionLong;const n=o(this.element,"error")||((s=this._error)===null||s===void 0?void 0:s.length)>0;const a={"stzh-checkbox":true,"stzh-checkbox--has-description":c,"stzh-checkbox--has-description-long":h,"stzh-checkbox--has-error":n,"stzh-checkbox--is-required":this.required,"stzh-checkbox--is-invalid":this.invalid||n,"stzh-checkbox--is-disabled":this.disabled};return t(e,{"is-invalid":this.invalid||n,tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},t("div",{class:a},t("label",{class:"stzh-checkbox__field-wrapper"},t("input",{class:"stzh-checkbox__input",ref:s=>this.input=s,type:"checkbox",id:this.inputId,name:this.name,value:this.value,disabled:this.disabled,"aria-describedby":`${this.inputId}-description ${this.a11yDescribedby}`,"aria-required":this.required?"true":"false","aria-invalid":this.invalid?"true":"false",checked:this.checked,defaultChecked:this.defaultChecked,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur}),t("div",{class:"stzh-checkbox__mark"},t("div",{class:"stzh-checkbox__check",innerHTML:r})),t("div",{class:"stzh-checkbox__label"},this.label?this.label:t("slot",null),!this.hideOptional&&t("span",{class:"stzh-checkbox__marker"},t("span",{class:"stzh-checkbox__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),t("span",{class:"stzh-checkbox__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText)))),t(i,{classPrefix:"stzh-checkbox",id:`${this.inputId}-description`,error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongTitle:this.descriptionLongTitle,descriptionLongUsed:h,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel})))}get element(){return h(this)}static get watchers(){return{error:["errorWatcher"]}}};l.style=n;export{l as stzh_checkbox};
-//# sourceMappingURL=p-f8ec1488.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stzhCheckboxCss","checkboxCounter","StzhCheckbox","this","focusedByInput","handleReset","async","checked","defaultChecked","onInput","event","input","stzhChange","emit","component","originalEvent","value","onRootFocus","focus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","resetListener","target","contains","requestAnimationFrame","errorWatcher","newValue","_error","JSON","parse","e","componentWillLoad","inputId","error","localization","stzhComponents","utils","fetchTranslations","render","descriptionUsed","hasSlot","description","descriptionLongUsed","descriptionLong","errorUsed","_a","length","classes","required","invalid","disabled","h","Host","tabindex","class","ref","el","type","id","name","a11yDescribedby","innerHTML","Check","label","hideOptional","$globals","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","StzhInputDescription","classPrefix","descriptionLongTitle","moreInfoButtonLabel"],"sources":["src/components/stzh-checkbox/stzh-checkbox.scss?tag=stzh-checkbox&encapsulation=scoped","src/components/stzh-checkbox/stzh-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-checkbox {\n\t@include input-description;\n\n  &__field-wrapper {\n    @include fontSize('milli');\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    border: 2px solid $colorBlack;\n    background-color: $colorWhite;\n    width: 24px;\n    height: 24px;\n    flex-shrink: 0;\n    border-radius: $formInputBorderRadius;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: border-color $baseTransitionAnimationSpeed;\n  }\n\n  &__check {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    opacity: 0;\n    color: $colorPrimary;\n    transition-property: color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    display: inline-block;\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space('small');\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize('micro');\n    margin-left: calc(-0.25em + #{space('xsmall')});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked ~ &__label {\n    color: $colorPrimary70;\n  }\n\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark &__check {\n    color: $colorPrimary90;\n  }\n\n  &:hover &__mark,\n  &__input:checked ~ &__mark {\n    border-color: $colorPrimary70;\n  }\n\n  &__input:checked:hover ~ &__mark {\n    border-color: $colorPrimary90;\n  }\n\n  &__input:checked ~ &__mark &__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark &__check {\n    color: $colorError60;\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: $colorError60;\n  }\n\n  /* Disabled */\n\n\t&--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $colorGrey60;\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    color: $colorGrey50;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: $colorGrey50;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $colorGrey20;\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  h,\n  Watch,\n  Listen\n} from \"@stencil/core\";\n\nimport {\n  StzhCheckboxChangeEvent,\n  StzhCheckboxFocusEvent,\n  StzhCheckboxBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nimport Check from './assets/check.svg';\n\nlet checkboxCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-checkbox\",\n  styleUrl: \"stzh-checkbox.scss\",\n  scoped: true\n})\nexport class StzhCheckbox {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the checkbox is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** Hide `(optional)` label (or use `required` inside form ot hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhCheckboxChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  }\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent('focus', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent('blur', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n    this.errorWatcher(this.error);\n\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'checkbox');\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-checkbox\": true,\n      \"stzh-checkbox--has-description\": descriptionUsed,\n      \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n      \"stzh-checkbox--has-error\": errorUsed,\n      \"stzh-checkbox--is-required\": this.required,\n      \"stzh-checkbox--is-invalid\": this.invalid || errorUsed,\n      \"stzh-checkbox--is-disabled\": this.disabled\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-checkbox__field-wrapper\">\n            <input\n              class=\"stzh-checkbox__input\"\n              ref={(el) => (this.input = el as HTMLInputElement)}\n              type=\"checkbox\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              defaultChecked={this.defaultChecked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-checkbox__mark\">\n              <div class=\"stzh-checkbox__check\" innerHTML={Check} />\n            </div>\n            <div class=\"stzh-checkbox__label\">\n              {this.label ? this.label : <slot></slot>}\n              {!this.hideOptional &&\n                <span class=\"stzh-checkbox__marker\">\n                  <span class=\"stzh-checkbox__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-checkbox__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </div>\n          </label>\n          <StzhInputDescription\n            classPrefix=\"stzh-checkbox\"\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        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-import{r as i,c as s,h as o,a as t,g as e}from"./p-c7bfac7a.js";const a=".sc-stzh-imagecomparison-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-imagecomparison-h{display:none}.sc-stzh-imagecomparison-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-imagecomparison-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::before,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::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-imagecomparison-h .has-focus.sc-stzh-imagecomparison{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison{outline-style:none !important}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison::-moz-focus-inner{border:0 !important}.sc-stzh-imagecomparison-h{--exposure:50%;--divider-width:0.1875rem}.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>*{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>[slot=image-after]{-webkit-clip-path:polygon(calc(var(--exposure) + (var(--divider-width) / 2)) 0, 100% 0, 100% 100%, calc(var(--exposure) + (var(--divider-width) / 2)) 100%);clip-path:polygon(calc(var(--exposure) + (var(--divider-width) / 2)) 0, 100% 0, 100% 100%, calc(var(--exposure) + (var(--divider-width) / 2)) 100%)}.stzh-imagecomparison.sc-stzh-imagecomparison{display:flex;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;user-select:none}.stzh-imagecomparison__control.sc-stzh-imagecomparison{position:absolute;inset:0;opacity:0;cursor:pointer}.stzh-imagecomparison__slider-line.sc-stzh-imagecomparison{position:absolute;left:var(--exposure);height:100%;width:var(--divider-width);background-color:var(--stzh-color-white);transform:translateX(-50%);transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{display:flex;align-items:center;justify-items:center;position:absolute;top:50%;left:var(--exposure);overflow:hidden;width:3rem;height:2rem;transform:translate(-50%, -50%);color:var(--stzh-color-primary);background-color:var(--stzh-color-white);border-radius:5rem;transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{pointer-events:none;opacity:0;transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison,.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{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-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));position:absolute;top:0;display:flex;align-items:center;height:1.5rem;padding:0 var(--stzh-space-xsmall);background:var(--stzh-color-black50op);color:var(--stzh-color-white)}@media screen and (min-width: 900px){.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison,.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison{left:0}.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{right:0}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-line.sc-stzh-imagecomparison,.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{background-color:var(--stzh-color-primary);color:var(--stzh-color-white)}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover+.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{opacity:1}";const r=class{constructor(o){i(this,o);this.stzhChange=s(this,"stzhChange",7);this.handleInput=i=>{let s=this.inputElement.value;this.value=Number(s);this.stzhChange.emit({component:"stzh-imagecomparison",originalEvent:i,value:this.value})};this.localization=undefined;this.hintLeft="";this.hintRight="";this.value=50;this.label=undefined;this.a11yDescribedby=""}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"imagecomparison")}}render(){const i={"stzh-imagecomparison":true};return o(t,{"aria-roledescription":this.localization.label,style:{"--exposure":`${this.value.toString()}%`}},o("div",{class:i},o("div",{class:"stzh-imagecomparison__element"},o("slot",{name:"image-before"}),o("slot",{name:"image-after"}),o("label",{class:"stzh-imagecomparison__label","aria-label":this.label||this.localization.label,"aria-describedby":this.a11yDescribedby||null},o("div",{class:"stzh-imagecomparison__slider-line"}),o("div",{class:"stzh-imagecomparison__slider-icon-wrapper"},o("stzh-icon",{class:"stzh-imagecomparison__slider-icon-left",name:"angle-left"}),o("stzh-icon",{class:"stzh-imagecomparison__slider-icon-right",name:"angle-right"})),o("input",{type:"range",class:"stzh-imagecomparison__control",min:"0",max:"100",ref:i=>this.inputElement=i,onInput:this.handleInput})),o("div",{class:"stzh-imagecomparison__hint-wrapper"},o("span",{class:"stzh-imagecomparison__hint-left"},this.hintLeft?this.hintLeft:o("slot",{name:"hint-left"})),o("span",{class:"stzh-imagecomparison__hint-right"},this.hintRight?this.hintRight:o("slot",{name:"hint-right"}))))))}get element(){return e(this)}};r.style=a;export{r as stzh_imagecomparison};
-//# sourceMappingURL=p-fb1d20da.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stzhImagecomparisonCss","StzhImageComparison","this","handleInput","event","value","inputElement","Number","stzhChange","emit","component","originalEvent","componentWillLoad","localization","window","stzhComponents","utils","fetchTranslations","element","render","classes","h","Host","label","style","toString","class","name","a11yDescribedby","type","min","max","ref","el","onInput","hintLeft","hintRight"],"sources":["src/components/stzh-imagecomparison/stzh-imagecomparison.scss?tag=stzh-imagecomparison&encapsulation=scoped","src/components/stzh-imagecomparison/stzh-imagecomparison.tsx"],"sourcesContent":[":host {\n  --exposure: 50%;\n  --divider-width: 3px;\n\n  ::slotted(*) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  ::slotted([slot=\"image-after\"]) {\n    clip-path: polygon(\n      calc(var(--exposure) + (var(--divider-width) / 2)) 0,\n      100% 0,\n      100% 100%,\n      calc(var(--exposure) + (var(--divider-width) / 2)) 100%\n    );\n  }\n}\n\n.stzh-imagecomparison {\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n  \n  &__control {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n  \n  &__slider-line {\n    position: absolute;\n    left: var(--exposure);\n    height: 100%;\n    width: var(--divider-width);\n    background-color: $colorWhite;\n    transform: translateX(-50%);\n    transition: background-color $baseTransitionAnimationSpeed;\n  }\n  \n  &__slider-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-items: center;\n    position: absolute;\n    top: 50%;\n    left: var(--exposure);\n    overflow: hidden;\n    width: 48px;\n    height: 32px;\n    transform: translate(-50%, -50%);\n    color: $colorPrimary;\n    background-color: $colorWhite;\n    border-radius: 80px;\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n  \n  &__hint-wrapper {\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity $baseTransitionAnimationSpeed;\n  }\n  \n  &__hint-left,\n  &__hint-right {\n    @include font('heavy');\n    @include fontCurve('caption');\n    position: absolute;\n    top: 0;\n    display: flex;\n    align-items: center;\n    height: 24px;\n    padding: 0 space('xsmall');\n    background: $colorBlack50op;\n    color: $colorWhite;\n  }\n  \n  &__hint-left {\n    left: 0;\n  }\n  \n  &__hint-right {\n    right: 0;\n  }\n\n  &__label:hover &__slider-line,\n  &__label:hover &__slider-icon-wrapper {\n    background-color: $colorPrimary;\n    color: $colorWhite;\n }\n\n  &__label:hover + &__hint-wrapper {\n    opacity: 1;\n  }\n}\n","import { \n  Component, \n  Host, \n  Element, \n  Prop, \n  h,\n  Event,\n  EventEmitter\n} from '@stencil/core';\n\nimport { \n  StzhImagecomparisonChangeEvent,\n} from \"../../index\";\n\nimport { StzhImagecomparisonLocalizedText } from \"./stzh-imagecomparison.localization\"\n\n/**\n * @slot image-before - Slot for a before image\n * @slot image-after - Slot for a after image\n * @slot hint-left - Slot for a left image hint as alternative for attribute\n * @slot hint-right - Slot for a right image hint as alternative for attribute\n */\n\n@Component({\n  tag: 'stzh-imagecomparison',\n  styleUrl: 'stzh-imagecomparison.scss',\n  scoped: true,\n})\n\nexport class StzhImageComparison {\n  /**  Translation strings. */\n  @Prop() localization: StzhImagecomparisonLocalizedText;\n\n  /** Hint left */\n  @Prop() hintLeft: string = \"\";\n\n  /** Hint right */\n  @Prop() hintRight: string = \"\";\n\n  /** Width of image before */\n  @Prop({ mutable: true }) value: number = 50;\n\n  /** Overwrite default label */\n  @Prop() label: string;\n\n  /** Id for element which describes the label */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @Element() element: HTMLStzhImagecomparisonElement;\n\n  /* Image comparison slider on change event */\n  @Event() stzhChange: EventEmitter<StzhImagecomparisonChangeEvent>;\n  \n  private inputElement: HTMLInputElement;\n  \n  private handleInput = (event: InputEvent) => {\n    let value = this.inputElement.value;\n    this.value = Number(value);\n\n    this.stzhChange.emit({   \n      component: \"stzh-imagecomparison\",\n      originalEvent: event,\n      value: this.value\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"imagecomparison\");\n    }\n  } \n  \n  render() {\n    const classes = {\n      \"stzh-imagecomparison\": true,\n    };\n\n    return (\n      <Host\n        aria-roledescription={this.localization.label}\n        style={{\n          '--exposure': `${this.value.toString()}%`\n        }}\n      >\n        <div class={classes}>\n          <div class=\"stzh-imagecomparison__element\">\n            <slot name=\"image-before\"></slot>\n            <slot name=\"image-after\"></slot>\n\n            <label\n              class=\"stzh-imagecomparison__label\"\n              aria-label={this.label || this.localization.label}\n              aria-describedby={this.a11yDescribedby || null}\n            >\n              <div class=\"stzh-imagecomparison__slider-line\"></div>\n              <div class=\"stzh-imagecomparison__slider-icon-wrapper\">\n                <stzh-icon \n                  class=\"stzh-imagecomparison__slider-icon-left\" \n                  name=\"angle-left\">\n                </stzh-icon>\n                <stzh-icon \n                  class=\"stzh-imagecomparison__slider-icon-right\" \n                  name=\"angle-right\">\n                </stzh-icon>\n              </div>\n\n              <input\n                type=\"range\" \n                class=\"stzh-imagecomparison__control\" \n                min=\"0\" \n                max=\"100\"\n                ref={(el) => (this.inputElement = el as HTMLInputElement)}\n                onInput={this.handleInput}\n              />\n            </label>\n\n            <div class=\"stzh-imagecomparison__hint-wrapper\">\n              <span class=\"stzh-imagecomparison__hint-left\">\n                {this.hintLeft ? this.hintLeft : <slot name=\"hint-left\"></slot>}\n              </span>\n              <span class=\"stzh-imagecomparison__hint-right\">\n                {this.hintRight ? this.hintRight : <slot name=\"hint-right\"></slot>}\n              </span> \n            </div>\n          </div>\n        </div>  \n      </Host>\n    );\n  }\n}\n\n"],"mappings":"gEAAA,MAAMA,EAAyB,ggJ,MC6BlBC,EAAmB,M,gEA0BtBC,KAAAC,YAAeC,IACrB,IAAIC,EAAQH,KAAKI,aAAaD,MAC9BH,KAAKG,MAAQE,OAAOF,GAEpBH,KAAKM,WAAWC,KAAK,CACnBC,UAAW,uBACXC,cAAeP,EACfC,MAAOH,KAAKG,OACZ,E,0CA7BuB,G,eAGC,G,WAGa,G,0CAM0B,E,CAoBnE,uBAAMO,GACJ,IAAKV,KAAKW,aAAc,CACtBX,KAAKW,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkBf,KAAKgB,QAAS,kB,EAI1F,MAAAC,GACE,MAAMC,EAAU,CACd,uBAAwB,MAG1B,OACEC,EAACC,EAAI,wBACmBpB,KAAKW,aAAaU,MACxCC,MAAO,CACL,aAAc,GAAGtB,KAAKG,MAAMoB,gBAG9BJ,EAAA,OAAKK,MAAON,GACVC,EAAA,OAAKK,MAAM,iCACTL,EAAA,QAAMM,KAAK,iBACXN,EAAA,QAAMM,KAAK,gBAEXN,EAAA,SACEK,MAAM,8BAA6B,aACvBxB,KAAKqB,OAASrB,KAAKW,aAAaU,MAAK,mBAC/BrB,KAAK0B,iBAAmB,MAE1CP,EAAA,OAAKK,MAAM,sCACXL,EAAA,OAAKK,MAAM,6CACTL,EAAA,aACEK,MAAM,yCACNC,KAAK,eAEPN,EAAA,aACEK,MAAM,0CACNC,KAAK,iBAITN,EAAA,SACEQ,KAAK,QACLH,MAAM,gCACNI,IAAI,IACJC,IAAI,MACJC,IAAMC,GAAQ/B,KAAKI,aAAe2B,EAClCC,QAAShC,KAAKC,eAIlBkB,EAAA,OAAKK,MAAM,sCACTL,EAAA,QAAMK,MAAM,mCACTxB,KAAKiC,SAAWjC,KAAKiC,SAAWd,EAAA,QAAMM,KAAK,eAE9CN,EAAA,QAAMK,MAAM,oCACTxB,KAAKkC,UAAYlC,KAAKkC,UAAYf,EAAA,QAAMM,KAAK,mB"}

package/dist/types/components/stzh-card-searchresult/stzh-card-searchresult.localization.d.ts

@@ -1,2 +0,0 @@
-import { StzhLocaleComponent } from "../../utils/translation-utils";
-export type StzhCardSearchresultLocalizedText = StzhLocaleComponent & {};