@oiz/stzh-components 3.1.0 → 3.2.0-beta1

package/dist/stzh-components/p-4f49450d.entry.js.map

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

package/dist/stzh-components/p-523c0bb1.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as t,a as s,g as a}from"./p-c7bfac7a.js";import{j as r}from"./p-1b399113.js";import"./p-7183ba4d.js";const h='.sc-stzh-iframe-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-iframe-h{display:none}.sc-stzh-iframe-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-iframe-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-iframe-h *.sc-stzh-iframe,.sc-stzh-iframe-h *.sc-stzh-iframe::before,.sc-stzh-iframe-h *.sc-stzh-iframe::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-iframe-h .has-focus.sc-stzh-iframe{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-iframe-h .stzh-fylingfocus-focused.sc-stzh-iframe{outline-style:none !important}.sc-stzh-iframe-h .stzh-fylingfocus-focused.sc-stzh-iframe::-moz-focus-inner{border:0 !important}.sc-stzh-iframe-h{position:relative}.sc-stzh-iframe-h .sc-stzh-iframe-s>[slot=preview-logo]{width:100%}.sc-stzh-iframe-h .sc-stzh-iframe-s>[slot=preview-image]{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.sc-stzh-iframe-h .sc-stzh-iframe-s>[slot=cookiewall-text]{margin:0}.sc-stzh-iframe-h .sc-stzh-iframe-s>[slot=cookiewall-text] p{margin:0}.sc-stzh-iframe-h .sc-stzh-iframe-s>[slot=cookiewall-text] p:not(:last-child){margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.sc-stzh-iframe-h .sc-stzh-iframe-s>[slot=cookiewall-text] p:not(:last-child){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-iframe-h .sc-stzh-iframe-s>[slot=cookiewall-text] p:not(:last-child){margin-bottom:var(--stzh-space-large)}}.stzh-iframe__iframe.sc-stzh-iframe,.stzh-iframe__cookiewall.sc-stzh-iframe,.stzh-iframe__preview.sc-stzh-iframe{position:absolute;top:0;left:0;width:100%;height:100%}.stzh-iframe__iframe.sc-stzh-iframe,.stzh-iframe__preview.sc-stzh-iframe{border:none}.stzh-iframe__preview.sc-stzh-iframe,.stzh-iframe__cookiewall.sc-stzh-iframe{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--stzh-space-medium);visibility:hidden}.stzh-iframe__preview.is-visible.sc-stzh-iframe,.stzh-iframe__cookiewall.is-visible.sc-stzh-iframe{visibility:visible}.stzh-iframe__preview.sc-stzh-iframe{z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background-color:var(--stzh-color-grey20)}.stzh-iframe__preview-image-wrapper.sc-stzh-iframe:not(:empty)+.stzh-iframe__preview-logo-wrapper.sc-stzh-iframe{display:none}.stzh-iframe__preview-logo-wrapper.sc-stzh-iframe{top:var(--stzh-space-xlarge);left:var(--stzh-space-xlarge);position:absolute;width:45%}@media screen and (min-width: 900px){.stzh-iframe__preview-logo-wrapper.sc-stzh-iframe{top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-iframe__preview-logo-wrapper.sc-stzh-iframe{top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-iframe__preview-logo-wrapper.sc-stzh-iframe{left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-iframe__preview-logo-wrapper.sc-stzh-iframe{left:var(--stzh-space-xxxlarge)}}.stzh-iframe__preview-run.sc-stzh-iframe{position:relative;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:var(--stzh-color-primary);color:var(--stzh-color-white);display:flex;flex-direction:column;align-items:center;justify-content:center;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height);visibility:hidden;transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-iframe__preview-run.is-visible.sc-stzh-iframe{visibility:visible}@media screen and (min-width: 900px){.stzh-iframe__preview-run.sc-stzh-iframe{width:var(--stzh-form-input-height);height:var(--stzh-form-input-height)}}.stzh-iframe__preview.sc-stzh-iframe:hover .stzh-iframe__preview-run.sc-stzh-iframe{background-color:var(--stzh-color-secondary60)}@media screen and (min-width: 900px){.stzh-iframe__preview-run-icon.sc-stzh-iframe{--size:var(--stzh-icon-size-large)}}.stzh-iframe__cookiewall.sc-stzh-iframe{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium);z-index:2;text-align:center;background-color:var(--stzh-color-black60op);color:var(--stzh-color-white)}@media screen and (min-width: 600px){.stzh-iframe__cookiewall.sc-stzh-iframe{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-iframe__cookiewall.sc-stzh-iframe{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-iframe__cookiewall.sc-stzh-iframe{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-iframe__cookiewall.sc-stzh-iframe{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-iframe__cookiewall.sc-stzh-iframe{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-iframe__cookiewall.sc-stzh-iframe{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-iframe__cookiewall.sc-stzh-iframe{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:". content content content content content content .";grid-template-columns:repeat(8, minmax(0, 1fr));padding-left:0;padding-right:0}}@media screen and (min-width: 900px) and (min-width: 600px){.stzh-iframe__cookiewall.sc-stzh-iframe{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px) and (min-width: 900px){.stzh-iframe__cookiewall.sc-stzh-iframe{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 900px) and (min-width: 1260px){.stzh-iframe__cookiewall.sc-stzh-iframe{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 900px) and (min-width: 1600px){.stzh-iframe__cookiewall.sc-stzh-iframe{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-iframe__cookiewall-content.sc-stzh-iframe{grid-area:content}}.stzh-iframe__cookiewall-text.sc-stzh-iframe{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);padding-top:var(--stzh-space-small);padding-bottom:var(--stzh-space-small);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-iframe__cookiewall-text.sc-stzh-iframe{padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-iframe__cookiewall-text.sc-stzh-iframe{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-iframe__cookiewall-text.sc-stzh-iframe{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-iframe__cookiewall-text.sc-stzh-iframe{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 600px){.stzh-iframe__cookiewall-text.sc-stzh-iframe{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-iframe__cookiewall-text.sc-stzh-iframe{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-iframe__cookiewall-text.sc-stzh-iframe{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-iframe__cookiewall-close.sc-stzh-iframe{top:0;right:0;position:absolute;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;display:flex;align-items:center;justify-content:center;padding:var(--stzh-space-xsmall);background-color:transparent;color:var(--stzh-color-white);cursor:pointer}';const o="stzh-components-iframe-confirm";let n=0;const c=class{constructor(t){e(this,t);this.stzhPreviewSkip=i(this,"stzhPreviewSkip",7);this.stzhViewChange=i(this,"stzhViewChange",7);this._src=null;this.updateFocus=false;this.handleIframeLoad=()=>{if(this.updateFocus){this.iframeElement.focus();this.updateFocus=false}};this.handleCookiewallCloseClick=()=>{this.updateFocus=true;this.view="preview";this.stzhViewChange.emit({component:"stzh-iframe",value:this.view})};this.handleCookiewallConfirmClick=()=>{r.set(`${o}-${this.cookie}`,"1",{expires:this.cookieExpires||null});this.updateFocus=true;this.view="iframe";this.stzhViewChange.emit({component:"stzh-iframe",value:this.view})};this.handlePreviewClick=()=>{const e=r.get(`${o}-${this.cookie}`)||false;this.updateFocus=true;if(!this.cookie||e){this.view="iframe"}else{this.view="cookiewall"}this.stzhViewChange.emit({component:"stzh-iframe",value:this.view})};this.localization=undefined;this.iframeId=undefined;this.iframeErrorText=undefined;this.name=undefined;this.sandbox=undefined;this.referrerpolicy=undefined;this.allow="autoplay; fullscreen";this.width=undefined;this.height=undefined;this.src="";this.cookie=undefined;this.cookieExpires=365;this.cookieConfirmIcon=undefined;this.cookieConfirmLabel=undefined;this.cookieConfirmText=undefined;this.previewLabel=undefined;this.previewIcon="external-link";this.skipPreviewIfCookieAccepted=false;this.skipPreview=false;this.view="preview"}srcWatcher(e){if(this.view==="iframe"){this._src=e}}viewWatcher(e){if(e==="iframe"){this._src=this.src}else{this._src=null}}async componentWillLoad(){this.internalId=`stzh-iframe-${n++}`;const e=r.get(`${o}-${this.cookie}`)||false;if((!this.cookie||e)&&(this.skipPreviewIfCookieAccepted||this.skipPreview)||!this.cookie&&this.skipPreview){this.stzhPreviewSkip.emit({component:"stzh-iframe"});this.view="iframe"}else if(this.cookie&&this.skipPreview){this.view="cookiewall"}this.viewWatcher(this.view);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"iframe")}}async componentDidRender(){if(this.updateFocus){if(this.view==="iframe");else if(this.view==="preview"){this.previewButtonElement.focus();this.updateFocus=false}else if(this.view==="cookiewall"){this.confirmButtonElement.focus();this.updateFocus=false}}}render(){const e={"stzh-iframe":true};return t(s,null,t("div",{class:e},this.view==="iframe"&&t("iframe",{id:this.iframeId,name:this.name,sandbox:this.sandbox,referrerPolicy:this.referrerpolicy,width:this.width,height:this.height,ref:e=>this.iframeElement=e,class:"stzh-iframe__iframe",src:this._src,allow:this.allow,onLoad:this.handleIframeLoad},this.iframeErrorText),t("button",{ref:e=>this.previewButtonElement=e,onClick:this.handlePreviewClick,"aria-label":this.previewLabel||this.localization.defaultPreviewLabel,class:{"stzh-iframe__preview":true,"is-visible":this.view==="preview"||this.view==="cookiewall"}},t("div",{class:"stzh-iframe__preview-image-wrapper"},t("slot",{name:"preview-image"})),t("div",{class:"stzh-iframe__preview-logo-wrapper"},t("slot",{name:"preview-logo"})),this.previewIcon&&t("div",{class:{"stzh-iframe__preview-run":true,"is-visible":this.view==="preview"}},t("stzh-icon",{class:"stzh-iframe__preview-run-icon",name:this.previewIcon}))),this.cookie&&t("div",{class:{"stzh-iframe__cookiewall":true,"is-visible":this.view==="cookiewall"}},t("div",{class:"stzh-iframe__cookiewall-content"},t("div",{class:"stzh-iframe__cookiewall-text",id:`${this.internalId}-cookiewall-text`},this.cookieConfirmText?this.cookieConfirmText:t("slot",{name:"cookiewall-text"})),t("stzh-button",{ref:e=>this.confirmButtonElement=e,class:"stzh-iframe__cookiewall-button",size:"small",a11yDescribedby:`${this.internalId}-cookiewall-text`,icon:this.cookieConfirmIcon,label:this.cookieConfirmLabel||this.localization.defaultConfirmLabel,onClick:this.handleCookiewallConfirmClick})),!this.skipPreview&&t("button",{class:"stzh-iframe__cookiewall-close",onClick:this.handleCookiewallCloseClick,"aria-label":this.localization.confirmCloseLabel},t("stzh-icon",{class:"stzh-iframe__cookiewall-close-icon",name:"close"})))))}get element(){return a(this)}static get watchers(){return{src:["srcWatcher"],view:["viewWatcher"]}}};c.style=h;export{c as stzh_iframe};
-//# sourceMappingURL=p-523c0bb1.entry.js.map

package/dist/stzh-components/p-523c0bb1.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhIframeCss","COOKIE_PREFIX_CONFIRM","iframeCounter","StzhIframe","this","_src","updateFocus","handleIframeLoad","iframeElement","focus","handleCookiewallCloseClick","view","stzhViewChange","emit","component","value","handleCookiewallConfirmClick","Cookies","set","cookie","expires","cookieExpires","handlePreviewClick","cookieAccepted","get","srcWatcher","newValue","viewWatcher","src","componentWillLoad","internalId","skipPreviewIfCookieAccepted","skipPreview","stzhPreviewSkip","localization","window","stzhComponents","utils","fetchTranslations","element","componentDidRender","previewButtonElement","confirmButtonElement","render","classes","h","Host","class","id","iframeId","name","sandbox","referrerPolicy","referrerpolicy","width","height","ref","el","allow","onLoad","iframeErrorText","onClick","previewLabel","defaultPreviewLabel","previewIcon","cookieConfirmText","size","a11yDescribedby","icon","cookieConfirmIcon","label","cookieConfirmLabel","defaultConfirmLabel","confirmCloseLabel"],"sources":["src/components/stzh-iframe/stzh-iframe.scss?tag=stzh-iframe&encapsulation=scoped","src/components/stzh-iframe/stzh-iframe.tsx"],"sourcesContent":[":host {\n  position: relative;\n\n  ::slotted([slot=\"preview-logo\"]) {\n    width: 100%;\n  }\n\n  ::slotted([slot=\"preview-image\"]) {\n    position: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tobject-fit: cover;\n  }\n\n  ::slotted([slot=\"cookiewall-text\"]) {\n    margin: 0;\n\n    p {\n      margin: 0;\n\n      &:not(:last-child) {\n        @include spaceCurve('margin-bottom', 'small');\n      }\n    }\n  }\n}\n\n.stzh-iframe {\n  &__iframe,\n  &__cookiewall,\n  &__preview {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  &__iframe,\n  &__preview {\n\t\tborder: none;\n  }\n\n  &__preview,\n  &__cookiewall {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: space('medium');\n    visibility: hidden;\n\n    &.is-visible {\n      visibility: visible;\n    }\n  }\n\n  &__preview {\n    z-index: 1;\n    appearance: none;\n    cursor: pointer;\n    background-color: $colorGrey20;\n  }\n\n  &__preview-image-wrapper:not(:empty) + &__preview-logo-wrapper {\n    display: none;\n  }\n\n  &__preview-logo-wrapper {\n    @include spaceCurve('top', 'medium');\n    @include spaceCurve('left', 'medium');\n\t\tposition: absolute;\n\t\twidth: 45%;\n\t}\n\n\t&__preview-run {\n\t\tposition: relative;\n\t\tz-index: 1;\n\t\tappearance: none;\n\t\tborder: none;\n\t\tbackground-color: $colorPrimary;\n    color: $colorWhite;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: $formInputHeightSmall;\n\t\theight: $formInputHeightSmall;\n    visibility: hidden;\n    transition: background-color $baseTransitionAnimationSpeed;\n\n    &.is-visible {\n      visibility: visible;\n    }\n\n\t\t@include mq($from: medium) {\n\t\t\twidth: $formInputHeight;\n\t\t\theight: $formInputHeight;\n\t\t}\n\t}\n\n  &__preview:hover &__preview-run {\n    background-color: $colorSecondary60;\n  }\n\n  &__preview-run-icon {\n    @include mq($from: medium) {\n      --size: #{iconSize('large')};\n    }\n  }\n\n\t&__cookiewall {\n    @include spaceCurve('padding-left', 'regular');\n    @include spaceCurve('padding-right', 'regular');\n    z-index: 2;\n\t\ttext-align: center;\n    background-color: $colorBlack60op;\n    color: $colorWhite;\n\n    @include mq($from: medium) {\n      @include gridGutter;\n      display: grid;\n      grid-template-areas: \". content content content content content content .\";\n      grid-template-columns: repeat(8, minmax(0, 1fr));\n      padding-left: 0;\n      padding-right: 0;\n    }\n\t}\n\n  &__cookiewall-content {\n    @include mq($from: medium) {\n      grid-area: content;\n    }\n  }\n\n  &__cookiewall-text {\n    @include fontSize('milli');\n    @include spaceCurve('padding-top', 'small');\n    @include spaceCurve('padding-bottom', 'small');\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n\t&__cookiewall-close {\n    top: 0;\n    right: 0;\n\t\tposition: absolute;\n\t\tappearance: none;\n\t\tborder: none;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: space('xsmall');\n    background-color: transparent;\n    color: $colorWhite;\n    cursor: pointer;\n\t}\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n  StzhIframeView,\n  StzhIframePreviewSkipEvent,\n  StzhIframeViewChangeEvent,\n} from \"../../index\";\nimport { StzhIframeLocalizedText } from \"./stzh-iframe.localization\";\n\nimport Cookies from \"js-cookie\";\n\nconst COOKIE_PREFIX_CONFIRM = \"stzh-components-iframe-confirm\";\n\nlet iframeCounter = 0;\n\n/**\n * @slot preview-logo - Slot for logo\n * @slot preview-image - Slot for preview image\n * @slot cookiewall-text - Slot for cookiewall text\n */\n@Component({\n  tag: \"stzh-iframe\",\n  styleUrl: \"stzh-iframe.scss\",\n  scoped: true\n})\nexport class StzhIframe {\n  /** Translation strings */\n  @Prop() localization: StzhIframeLocalizedText;\n\n  /** Id of iframe */\n  @Prop() iframeId: string;\n\n  /** Error text of iframe if couldn't be loaded */\n  @Prop() iframeErrorText: string;\n\n  /**\n   * Name of iframe\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#name\n   */\n  @Prop() name: string;\n\n  /**\n   * Sandbox of iframe\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#sandbox\n   */\n  @Prop() sandbox: string;\n\n  /**\n   * ReferrerPolicy of Iframe\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#referrerpolicy\n   */\n  @Prop() referrerpolicy: \"no-referrer\"\n    | \"no-referrer-when-downgrade\"\n    | \"origin\"\n    | \"origin-when-cross-origin\"\n    | \"same-origin\"\n    | \"strict-origin\"\n    | \"strict-origin-when-cross-origin\"\n    | \"unsafe-url\";\n\n  /**\n   * Allow of Iframe\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#allow\n   */\n  @Prop() allow: string = \"autoplay; fullscreen\";\n\n  /** Width of iframe */\n  @Prop() width: string;\n\n  /** Width of iframe */\n  @Prop() height: string;\n\n  /** `src` of iframe */\n  @Prop() src: string = \"\";\n  private _src: string | null = null;\n\n  /**\n   * Cookie name (if not empty, the user will be shown a cookie wall)\n   * Will be prefixed with `stzh-components-iframe-confirm-`.\n   */\n  @Prop() cookie: string;\n\n  /**\n   * Number of days the cookie is valid for.\n   * If omitted or set to null, the cookie expires when browser is closed.\n   * Maximum is on year (365 days, is default).\n   */\n  @Prop() cookieExpires: number | null = 365;\n\n  /** Confirm button icon */\n  @Prop() cookieConfirmIcon: string;\n\n  /** Confirm button label */\n  @Prop() cookieConfirmLabel: string;\n\n  /** Confirm text (use instead of `cookiewall-text` slot) */\n  @Prop() cookieConfirmText: string;\n\n  /** Preview label */\n  @Prop() previewLabel: string;\n\n  /** Preview icon */\n  @Prop() previewIcon: string = \"external-link\";\n\n  /** Whether preview should be skipped, if user has passed the cookiewall before */\n  @Prop() skipPreviewIfCookieAccepted: boolean = false;\n\n  /** Whether preview should always be skipped */\n  @Prop() skipPreview: boolean = false;\n\n  @Element() element: HTMLStzhIframeElement;\n\n  @State() view: StzhIframeView = \"preview\";\n\n  /** Preview skip (only gets executed if it goes directly to iframe and not cookiewall) */\n  @Event() stzhPreviewSkip: EventEmitter<StzhIframePreviewSkipEvent>;\n\n  /** View change */\n  @Event() stzhViewChange: EventEmitter<StzhIframeViewChangeEvent>;\n\n  @Watch(\"src\")\n  srcWatcher(newValue: string) {\n    if (this.view === \"iframe\") {\n      this._src = newValue;\n    }\n  }\n\n  @Watch(\"view\")\n  viewWatcher(newValue: StzhIframeView) {\n    if (newValue === \"iframe\") {\n      this._src = this.src;\n    } else {\n      this._src = null;\n    }\n  }\n\n  private internalId: string;\n  private iframeElement: HTMLIFrameElement;\n  private previewButtonElement: HTMLButtonElement;\n  private confirmButtonElement: HTMLStzhButtonElement;\n  private updateFocus: boolean = false;\n\n  private handleIframeLoad = () => {\n    if (this.updateFocus) {\n      this.iframeElement.focus();\n      this.updateFocus = false;\n    }\n  }\n\n  private handleCookiewallCloseClick = () => {\n    this.updateFocus = true;\n    this.view = \"preview\";\n\n    this.stzhViewChange.emit({\n      component: \"stzh-iframe\",\n      value: this.view\n    });\n  }\n\n  private handleCookiewallConfirmClick = () => {\n    Cookies.set(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`, \"1\", {\n      expires: this.cookieExpires || null\n    });\n\n    this.updateFocus = true;\n    this.view = \"iframe\";\n\n    this.stzhViewChange.emit({\n      component: \"stzh-iframe\",\n      value: this.view\n    });\n  }\n\n  private handlePreviewClick = () => {\n\t\tconst cookieAccepted = Cookies.get(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`) || false;\n    this.updateFocus = true;\n\n    if (!this.cookie || cookieAccepted) {\n      this.view = \"iframe\";\n    } else {\n      this.view = \"cookiewall\";\n    }\n\n    this.stzhViewChange.emit({\n      component: \"stzh-iframe\",\n      value: this.view\n    });\n  }\n\n  async componentWillLoad() {\n    this.internalId = `stzh-iframe-${iframeCounter++}`;\n\n\t\tconst cookieAccepted = Cookies.get(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`) || false;\n\n    if (\n      ((!this.cookie || cookieAccepted) && (this.skipPreviewIfCookieAccepted || this.skipPreview))\n      || (!this.cookie && this.skipPreview)\n    ) {\n      this.stzhPreviewSkip.emit({\n        component: \"stzh-iframe\"\n      });\n\n      this.view = \"iframe\";\n    } else if (this.cookie && this.skipPreview) {\n      this.view = \"cookiewall\";\n    }\n\n    this.viewWatcher(this.view);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"iframe\");\n    }\n  }\n\n  async componentDidRender() {\n    if (this.updateFocus) {\n      if (this.view === \"iframe\") {\n        // wait for iframe load event (handleIframeLoad)\n      } else if (this.view === \"preview\") {\n        this.previewButtonElement.focus();\n        this.updateFocus = false;\n      } else if (this.view === \"cookiewall\") {\n        this.confirmButtonElement.focus();\n        this.updateFocus = false;\n      }\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-iframe\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.view === \"iframe\" &&\n            <iframe\n              id={this.iframeId}\n              name={this.name}\n              sandbox={this.sandbox}\n              referrerPolicy={this.referrerpolicy}\n              width={this.width}\n              height={this.height}\n              ref={(el) => (this.iframeElement = el as HTMLIFrameElement)}\n              class=\"stzh-iframe__iframe\"\n              src={this._src}\n              allow={this.allow}\n              onLoad={this.handleIframeLoad}\n            >{this.iframeErrorText}</iframe>\n          }\n\n          <button\n            ref={(el) => (this.previewButtonElement = el as HTMLButtonElement)}\n            onClick={this.handlePreviewClick}\n            aria-label={this.previewLabel || this.localization.defaultPreviewLabel}\n            // disabled={this.view === \"cookiewall\"}\n            class={{\n              \"stzh-iframe__preview\": true,\n              \"is-visible\": this.view === \"preview\" || this.view === \"cookiewall\"\n            }}\n          >\n            <div class=\"stzh-iframe__preview-image-wrapper\">\n              <slot name=\"preview-image\"></slot>\n            </div>\n\n            <div class=\"stzh-iframe__preview-logo-wrapper\">\n              <slot name=\"preview-logo\"></slot>\n            </div>\n\n            {this.previewIcon &&\n              <div class={{\n                \"stzh-iframe__preview-run\": true,\n                \"is-visible\": this.view === \"preview\"\n              }}>\n                <stzh-icon class=\"stzh-iframe__preview-run-icon\" name={this.previewIcon}></stzh-icon>\n              </div>\n            }\n          </button>\n\n          {this.cookie &&\n            <div\n              class={{\n                \"stzh-iframe__cookiewall\": true,\n                \"is-visible\": this.view === \"cookiewall\"\n              }}\n            >\n              <div class=\"stzh-iframe__cookiewall-content\">\n                <div\n                  class=\"stzh-iframe__cookiewall-text\"\n                  id={`${this.internalId}-cookiewall-text`}\n                >\n                  {this.cookieConfirmText ? this.cookieConfirmText : <slot name=\"cookiewall-text\"></slot>}\n                </div>\n\n                <stzh-button\n                  ref={(el) => (this.confirmButtonElement = el as HTMLStzhButtonElement)}\n                  class=\"stzh-iframe__cookiewall-button\"\n                  size=\"small\"\n                  a11yDescribedby={`${this.internalId}-cookiewall-text`}\n                  icon={this.cookieConfirmIcon}\n                  label={this.cookieConfirmLabel || this.localization.defaultConfirmLabel}\n                  onClick={this.handleCookiewallConfirmClick}\n                ></stzh-button>\n              </div>\n\n              {!this.skipPreview &&\n                <button\n                  class=\"stzh-iframe__cookiewall-close\"\n                  onClick={this.handleCookiewallCloseClick}\n                  aria-label={this.localization.confirmCloseLabel}\n                >\n                  <stzh-icon class=\"stzh-iframe__cookiewall-close-icon\" name=\"close\"></stzh-icon>\n                </button>\n              }\n            </div>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-52a914cd.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h,F as s,a as i,g as t}from"./p-c7bfac7a.js";const g=".sc-stzh-homepage-service-highlights-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-homepage-service-highlights-h{display:none}.sc-stzh-homepage-service-highlights-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-homepage-service-highlights-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-homepage-service-highlights-h *.sc-stzh-homepage-service-highlights,.sc-stzh-homepage-service-highlights-h *.sc-stzh-homepage-service-highlights::before,.sc-stzh-homepage-service-highlights-h *.sc-stzh-homepage-service-highlights::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-homepage-service-highlights-h .has-focus.sc-stzh-homepage-service-highlights{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-homepage-service-highlights-h .stzh-fylingfocus-focused.sc-stzh-homepage-service-highlights{outline-style:none !important}.sc-stzh-homepage-service-highlights-h .stzh-fylingfocus-focused.sc-stzh-homepage-service-highlights::-moz-focus-inner{border:0 !important}.sc-stzh-homepage-service-highlights-h{--background-color-topnews:var(--stzh-topnews-background-color);--background-color-mostsearched:var(--stzh-mostsearched-background-color)}.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights{display:grid}.stzh-homepage-service-highlights__topnews.sc-stzh-homepage-service-highlights,.stzh-homepage-service-highlights__mostsearched.sc-stzh-homepage-service-highlights{display:flex;flex-direction:column}@media screen and (min-width: 900px){.stzh-homepage-service-highlights--has-topnews.sc-stzh-homepage-service-highlights{grid-template-columns:repeat(2, minmax(0, 1fr))}}.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-topnews-item.sc-stzh-homepage-service-highlights{padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);padding-left:var(--stzh-space-large);padding-right:var(--stzh-space-large);flex-grow:1;display:flex;flex-direction:column;justify-content:center}@media screen and (min-width: 600px){.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-topnews-item.sc-stzh-homepage-service-highlights{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-topnews-item.sc-stzh-homepage-service-highlights{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-topnews-item.sc-stzh-homepage-service-highlights{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-topnews-item.sc-stzh-homepage-service-highlights{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-topnews-item.sc-stzh-homepage-service-highlights{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-topnews-item.sc-stzh-homepage-service-highlights{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-topnews-item.sc-stzh-homepage-service-highlights{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-topnews-item.sc-stzh-homepage-service-highlights{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-topnews-item.sc-stzh-homepage-service-highlights{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-topnews-item.sc-stzh-homepage-service-highlights{padding-left:calc(((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2))}}.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-topnews-item--has-link.sc-stzh-homepage-service-highlights{transition:background-color 150ms ease;text-decoration:none}.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-topnews-item--has-link.sc-stzh-homepage-service-highlights:hover{background-color:var(--stzh-color-secondary40)}.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-topnews-item--highlighted.sc-stzh-homepage-service-highlights{background-color:var(--stzh-color-lemonyellow50)}.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-topnews-item--highlighted.stzh-topnews-item--has-link.sc-stzh-homepage-service-highlights:hover{background-color:var(--stzh-color-lemonyellow60)}.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-topnews-item__subtitle.sc-stzh-homepage-service-highlights{--color:var(--stzh-color-primary70)}.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-topnews-item--highlighted.sc-stzh-homepage-service-highlights .stzh-topnews-item__subtitle.sc-stzh-homepage-service-highlights{--color:var(--stzh-color-secondary60)}.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-topnews-item.stzh-topnews-item--has-link.sc-stzh-homepage-service-highlights:not(.stzh-topnews-item--highlighted):hover .stzh-topnews-item__label.sc-stzh-homepage-service-highlights{--color:var(--stzh-color-primary80)}.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-topnews-item--highlighted.sc-stzh-homepage-service-highlights:hover .stzh-topnews-item__subtitle.sc-stzh-homepage-service-highlights{--color:var(--stzh-color-primary70)}.stzh-homepage-service-highlights__topnews.sc-stzh-homepage-service-highlights{background-color:var(--background-color-topnews)}.stzh-homepage-service-highlights__mostsearched.sc-stzh-homepage-service-highlights{background-color:var(--background-color-mostsearched);padding-top:var(--stzh-space-medium);padding-right:var(--stzh-space-large);padding-bottom:var(--stzh-space-medium);padding-left:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-homepage-service-highlights__mostsearched.sc-stzh-homepage-service-highlights{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-homepage-service-highlights__mostsearched.sc-stzh-homepage-service-highlights{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-homepage-service-highlights__mostsearched.sc-stzh-homepage-service-highlights{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-homepage-service-highlights__mostsearched.sc-stzh-homepage-service-highlights{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-homepage-service-highlights__mostsearched.sc-stzh-homepage-service-highlights{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-homepage-service-highlights__mostsearched.sc-stzh-homepage-service-highlights{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-homepage-service-highlights__mostsearched.sc-stzh-homepage-service-highlights{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-homepage-service-highlights__mostsearched.sc-stzh-homepage-service-highlights{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 900px){.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights:not(.stzh-homepage-service-highlights--has-topnews) .stzh-homepage-service-highlights__mostsearched.sc-stzh-homepage-service-highlights{display:grid;gap:0 var(--stzh-space-large);grid-template-columns:repeat(2, minmax(0, 1fr));padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights:not(.stzh-homepage-service-highlights--has-topnews) .stzh-homepage-service-highlights__mostsearched.sc-stzh-homepage-service-highlights{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights:not(.stzh-homepage-service-highlights--has-topnews) .stzh-homepage-service-highlights__mostsearched.sc-stzh-homepage-service-highlights{padding-left:calc(((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2));padding-right:calc(((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2))}}.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-mostsearched-item.sc-stzh-homepage-service-highlights{padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-mostsearched-item.sc-stzh-homepage-service-highlights{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-mostsearched-item.sc-stzh-homepage-service-highlights{padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 900px){.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-mostsearched-item.sc-stzh-homepage-service-highlights{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-mostsearched-item.sc-stzh-homepage-service-highlights{padding-bottom:var(--stzh-space-medium)}}.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-mostsearched-item__link.sc-stzh-homepage-service-highlights{--text-decoration-line:none;--hover-text-decoration-line:none;--hover-color:$linkColor;transition:transform 150ms ease}@media screen and (min-width: 900px){.stzh-homepage-service-highlights.sc-stzh-homepage-service-highlights .stzh-mostsearched-item__link.sc-stzh-homepage-service-highlights:hover{transform:translateX(1.25rem)}}";const a=class{constructor(h){e(this,h);this._topnewsItems=[];this._mostsearchedItems=[];this.init=()=>{this.topnewsItemsWatcher(this.topnewsItems);this.mostsearchedItemsWatcher(this.mostsearchedItems)};this.topnewsItems=[];this.mostsearchedItems=[]}topnewsItemsWatcher(e){if(!e){this._topnewsItems=[]}else if(typeof e==="string"){try{const h=JSON.parse(e);this._topnewsItems=this.ensureSingleHighlight(h)}catch(e){this._topnewsItems=[]}}else{this._topnewsItems=this.ensureSingleHighlight(e)}}mostsearchedItemsWatcher(e){if(!e){this._mostsearchedItems=[]}else if(typeof e==="string"){try{this._mostsearchedItems=JSON.parse(e)}catch(e){this._mostsearchedItems=[]}}else{this._mostsearchedItems=e}}ensureSingleHighlight(e){let h=false;return e.map((e=>{if(e.isHighlighted){if(!h){h=true;return e}else{return Object.assign(Object.assign({},e),{isHighlighted:false})}}return e}))}connectedCallback(){this.init()}renderTopnewsItemInner(e){return h(s,null,!!e.subtitle&&h("stzh-text",{class:"stzh-topnews-item__subtitle"},e.subtitle),h("stzh-heading",{class:"stzh-topnews-item__label"},e.label))}render(){const e={"stzh-homepage-service-highlights":true,"stzh-homepage-service-highlights--has-topnews":this._topnewsItems.length>0};return h(i,null,h("div",{class:e},this._topnewsItems.length>0&&h("div",{class:"stzh-homepage-service-highlights__topnews"},this._topnewsItems.map((e=>!!e.href?h("a",{href:e.href,class:{"stzh-topnews-item":true,"stzh-topnews-item--highlighted":e.isHighlighted,"stzh-topnews-item--has-link":true}},this.renderTopnewsItemInner(e)):h("div",{class:{"stzh-topnews-item":true,"stzh-topnews-item--highlighted":e.isHighlighted}},this.renderTopnewsItemInner(e))))),this._mostsearchedItems.length>0&&h("div",{class:"stzh-homepage-service-highlights__mostsearched"},this._mostsearchedItems.map((e=>h("div",{class:{"stzh-mostsearched-item":true}},h("stzh-link",{class:"stzh-mostsearched-item__link",href:e.href,icon:"arrow-right"},e.label)))))))}get element(){return t(this)}static get watchers(){return{topnewsItems:["topnewsItemsWatcher"],mostsearchedItems:["mostsearchedItemsWatcher"]}}};a.style=g;export{a as stzh_homepage_service_highlights};
-//# sourceMappingURL=p-52a914cd.entry.js.map

package/dist/stzh-components/p-52a914cd.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhHomepageServiceHighlightsCss","StzhHomepageServiceHighlights","this","_topnewsItems","_mostsearchedItems","init","topnewsItemsWatcher","topnewsItems","mostsearchedItemsWatcher","mostsearchedItems","newValue","parsed","JSON","parse","ensureSingleHighlight","e","items","foundHighlighted","map","item","isHighlighted","Object","assign","connectedCallback","renderTopnewsItemInner","h","Fragment","subtitle","class","label","render","classes","length","Host","href","icon"],"sources":["src/components/stzh-homepage-service-highlights/stzh-homepage-service-highlights.scss?tag=stzh-homepage-service-highlights&encapsulation=scoped","src/components/stzh-homepage-service-highlights/stzh-homepage-service-highlights.tsx"],"sourcesContent":["/**\n * @prop --background-color-topnews: Background color of top news section\n * @prop --background-color-mostsearched: Background color of top most searched section\n */\n\n:host {\n  --background-color-topnews: #{$topnewsBackgroundColor};\n  --background-color-mostsearched: #{$mostsearchedBackgroundColor};\n}\n\n.stzh-homepage-service-highlights {\n  display: grid;\n\n  &__topnews,\n  &__mostsearched {\n    display: flex;\n    flex-direction: column;\n  }\n\n  &--has-topnews {\n    @include mq($from: medium) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n\n  /**\n   * Top news.\n   */\n\n  .stzh-topnews-item {\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n    padding-left: space('large');\n    padding-right: space('large');\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    @include mq($from: small) {\n      padding-left: $containerMarginSmall;\n      padding-right: $containerMarginSmall;\n    }\n\n    @include mq($from: medium) {\n      padding-left: $containerMarginMedium;\n      padding-right: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      padding-left: $containerMarginLarge;\n      padding-right: $containerMarginLarge;\n    }\n\n    @include mq($from: ultra) {\n      padding-left: calc(((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2));\n    }\n  }\n\n  .stzh-topnews-item--has-link {\n    transition: background-color 150ms ease;\n    text-decoration: none;\n\n    &:hover {\n      background-color: var(--stzh-color-secondary40);\n    }\n  }\n\n  .stzh-topnews-item--highlighted {\n    background-color: var(--stzh-color-lemonyellow50);\n  }\n\n  .stzh-topnews-item--highlighted.stzh-topnews-item--has-link {\n    &:hover {\n      background-color: var(--stzh-color-lemonyellow60);\n    }\n  }\n\n  .stzh-topnews-item__subtitle {\n    --color: var(--stzh-color-primary70);\n  }\n\n  .stzh-topnews-item--highlighted .stzh-topnews-item__subtitle {\n    --color: var(--stzh-color-secondary60);\n  }\n\n  .stzh-topnews-item.stzh-topnews-item--has-link:not(.stzh-topnews-item--highlighted):hover .stzh-topnews-item__label {\n    --color: var(--stzh-color-primary80);\n  }\n\n  .stzh-topnews-item--highlighted:hover .stzh-topnews-item__subtitle {\n    --color: var(--stzh-color-primary70);\n  }\n\n  &__topnews {\n    background-color: var(--background-color-topnews);\n  }\n\n  /**\n   * Most searched.\n   */\n  &__mostsearched {\n    background-color: var(--background-color-mostsearched);\n    @include spaceCurve('padding-top', 'regular');\n    padding-right: space('large');\n    @include spaceCurve('padding-bottom', 'regular');\n    padding-left: space('large');\n\n    @include mq($from: small) {\n      padding-left: $containerMarginSmall;\n      padding-right: $containerMarginSmall;\n    }\n\n    @include mq($from: medium) {\n      padding-left: $containerMarginMedium;\n      padding-right: $containerMarginMedium;\n    }\n  }\n\n  &:not(&--has-topnews) &__mostsearched {\n    @include mq($from: medium) {\n      display: grid;\n      gap: 0 space('large');\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      padding-left: $containerMarginMedium;\n      padding-right: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      padding-left: $containerMarginLarge;\n      padding-right: $containerMarginLarge;\n    }\n\n    @include mq($from: ultra) {\n      padding-left: calc(((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2));\n      padding-right: calc(((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2));\n    }\n  }\n\n  .stzh-mostsearched-item {\n    @include spaceCurve('padding-top', 'tiny');\n    @include spaceCurve('padding-bottom', 'tiny');\n  }\n\n  .stzh-mostsearched-item__link {\n    --text-decoration-line: none;\n    --hover-text-decoration-line: none;\n    --hover-color: $linkColor;\n\n    transition: transform 150ms ease;\n\n    &:hover {\n      @include mq($from: medium) {\n        transform: translateX(20px);\n      }\n    }\n  }\n}\n","import { Component, Element, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\nimport { StzhMostsearchedItem, StzhTopnewsItem } from \"../../index\";\n\n@Component({\n  tag: \"stzh-homepage-service-highlights\",\n  styleUrl: \"stzh-homepage-service-highlights.scss\",\n  scoped: true,\n})\nexport class StzhHomepageServiceHighlights {\n  @Element() element: HTMLStzhHomepageServiceHighlightsElement;\n\n  /** Top news items */\n  @Prop() topnewsItems: StzhTopnewsItem[] | string = [];\n  private _topnewsItems: StzhTopnewsItem[] = [];\n\n  /** Most searched items */\n  @Prop() mostsearchedItems: StzhMostsearchedItem[] | string = [];\n  private _mostsearchedItems: StzhMostsearchedItem[] = [];\n\n  @Watch(\"topnewsItems\")\n  topnewsItemsWatcher(newValue: StzhTopnewsItem[] | string) {\n    if (!newValue) {\n      this._topnewsItems = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        const parsed = JSON.parse(newValue);\n        this._topnewsItems = this.ensureSingleHighlight(parsed);\n      } catch (e) {\n        this._topnewsItems = [];\n      }\n    } else {\n      this._topnewsItems = this.ensureSingleHighlight(newValue);\n    }\n  }\n\n  @Watch(\"mostsearchedItems\")\n  mostsearchedItemsWatcher(newValue: StzhMostsearchedItem[] | string) {\n    if (!newValue) {\n      this._mostsearchedItems = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._mostsearchedItems = JSON.parse(newValue);\n      } catch (e) {\n        this._mostsearchedItems = [];\n      }\n    } else {\n      this._mostsearchedItems = newValue;\n    }\n  }\n\n  private ensureSingleHighlight(items: StzhTopnewsItem[]): StzhTopnewsItem[] {\n    let foundHighlighted = false;\n\n    return items.map(item => {\n      if (item.isHighlighted) {\n        if (!foundHighlighted) {\n          foundHighlighted = true;\n          return item;\n        } else {\n          // Remove highlight from subsequent items\n          return { ...item, isHighlighted: false };\n        }\n      }\n      return item;\n    });\n  }\n\n  private init = () => {\n    this.topnewsItemsWatcher(this.topnewsItems);\n    this.mostsearchedItemsWatcher(this.mostsearchedItems);\n  };\n\n  connectedCallback() {\n    this.init();\n  }\n\n  private renderTopnewsItemInner(item: StzhTopnewsItem): HTMLElement {\n    return (\n      <Fragment>\n        {!!item.subtitle && <stzh-text class=\"stzh-topnews-item__subtitle\">{item.subtitle}</stzh-text>}\n        <stzh-heading class=\"stzh-topnews-item__label\">{item.label}</stzh-heading>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const classes = {\n      \"stzh-homepage-service-highlights\": true,\n      \"stzh-homepage-service-highlights--has-topnews\": this._topnewsItems.length > 0,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this._topnewsItems.length > 0 && (\n            <div class=\"stzh-homepage-service-highlights__topnews\">\n              {this._topnewsItems.map(item =>\n                !!item.href ? (\n                  <a\n                    href={item.href}\n                    class={{\n                      \"stzh-topnews-item\": true,\n                      \"stzh-topnews-item--highlighted\": item.isHighlighted,\n                      \"stzh-topnews-item--has-link\": true,\n                    }}\n                  >\n                    {this.renderTopnewsItemInner(item)}\n                  </a>\n                ) : (\n                  <div\n                    class={{\n                      \"stzh-topnews-item\": true,\n                      \"stzh-topnews-item--highlighted\": item.isHighlighted,\n                    }}\n                  >\n                    {this.renderTopnewsItemInner(item)}\n                  </div>\n                )\n              )}\n            </div>\n          )}\n          {this._mostsearchedItems.length > 0 && (\n            <div class=\"stzh-homepage-service-highlights__mostsearched\">\n              {this._mostsearchedItems.map(item => (\n                <div\n                  class={{\n                    \"stzh-mostsearched-item\": true,\n                  }}\n                >\n                  <stzh-link class=\"stzh-mostsearched-item__link\" href={item.href} icon={\"arrow-right\"}>\n                    {item.label}\n                  </stzh-link>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAmC,g2U,MCQ5BC,EAA6B,M,yBAKhCC,KAAAC,cAAmC,GAInCD,KAAAE,mBAA6C,GAkD7CF,KAAAG,KAAO,KACbH,KAAKI,oBAAoBJ,KAAKK,cAC9BL,KAAKM,yBAAyBN,KAAKO,kBAAkB,E,kBAzDJ,G,uBAIU,E,CAI7D,mBAAAH,CAAoBI,GAClB,IAAKA,EAAU,CACbR,KAAKC,cAAgB,E,MAChB,UAAWO,IAAa,SAAU,CACvC,IACE,MAAMC,EAASC,KAAKC,MAAMH,GAC1BR,KAAKC,cAAgBD,KAAKY,sBAAsBH,E,CAChD,MAAOI,GACPb,KAAKC,cAAgB,E,MAElB,CACLD,KAAKC,cAAgBD,KAAKY,sBAAsBJ,E,EAKpD,wBAAAF,CAAyBE,GACvB,IAAKA,EAAU,CACbR,KAAKE,mBAAqB,E,MACrB,UAAWM,IAAa,SAAU,CACvC,IACER,KAAKE,mBAAqBQ,KAAKC,MAAMH,E,CACrC,MAAOK,GACPb,KAAKE,mBAAqB,E,MAEvB,CACLF,KAAKE,mBAAqBM,C,EAItB,qBAAAI,CAAsBE,GAC5B,IAAIC,EAAmB,MAEvB,OAAOD,EAAME,KAAIC,IACf,GAAIA,EAAKC,cAAe,CACtB,IAAKH,EAAkB,CACrBA,EAAmB,KACnB,OAAOE,C,KACF,CAEL,OAAAE,OAAAC,OAAAD,OAAAC,OAAA,GAAYH,GAAI,CAAEC,cAAe,O,EAGrC,OAAOD,CAAI,G,CASf,iBAAAI,GACErB,KAAKG,M,CAGC,sBAAAmB,CAAuBL,GAC7B,OACEM,EAACC,EAAQ,OACJP,EAAKQ,UAAYF,EAAA,aAAWG,MAAM,+BAA+BT,EAAKQ,UACzEF,EAAA,gBAAcG,MAAM,4BAA4BT,EAAKU,O,CAK3D,MAAAC,GACE,MAAMC,EAAU,CACd,mCAAoC,KACpC,gDAAiD7B,KAAKC,cAAc6B,OAAS,GAG/E,OACEP,EAACQ,EAAI,KACHR,EAAA,OAAKG,MAAOG,GACT7B,KAAKC,cAAc6B,OAAS,GAC3BP,EAAA,OAAKG,MAAM,6CACR1B,KAAKC,cAAce,KAAIC,KACpBA,EAAKe,KACLT,EAAA,KACES,KAAMf,EAAKe,KACXN,MAAO,CACL,oBAAqB,KACrB,iCAAkCT,EAAKC,cACvC,8BAA+B,OAGhClB,KAAKsB,uBAAuBL,IAG/BM,EAAA,OACEG,MAAO,CACL,oBAAqB,KACrB,iCAAkCT,EAAKC,gBAGxClB,KAAKsB,uBAAuBL,OAMtCjB,KAAKE,mBAAmB4B,OAAS,GAChCP,EAAA,OAAKG,MAAM,kDACR1B,KAAKE,mBAAmBc,KAAIC,GAC3BM,EAAA,OACEG,MAAO,CACL,yBAA0B,OAG5BH,EAAA,aAAWG,MAAM,+BAA+BM,KAAMf,EAAKe,KAAMC,KAAM,eACpEhB,EAAKU,Y"}

package/dist/stzh-components/p-59a1a257.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhInputCss","inputCounter","StzhInput","this","focusedByInput","onClearClick","async","event","value","input","focus","waitForNextRender","stzhChange","emit","component","originalEvent","stzhChanged","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","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    &: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-clearable &__button-right,\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 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  @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 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.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 class=\"stzh-input__label\" htmlFor={this.inputId}>\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                  disabled={true}\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-648b7232.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as s,F as i,a as e,g as r}from"./p-c7bfac7a.js";import{a as c}from"./p-a771013b.js";import{VBZ as a}from"./index.esm.js";const h=".sc-stzh-vbz-ticker-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-vbz-ticker-h{display:none}.sc-stzh-vbz-ticker-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-vbz-ticker-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-vbz-ticker-h *.sc-stzh-vbz-ticker,.sc-stzh-vbz-ticker-h *.sc-stzh-vbz-ticker::before,.sc-stzh-vbz-ticker-h *.sc-stzh-vbz-ticker::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-vbz-ticker-h .has-focus.sc-stzh-vbz-ticker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-vbz-ticker-h .stzh-fylingfocus-focused.sc-stzh-vbz-ticker{outline-style:none !important}.sc-stzh-vbz-ticker-h .stzh-fylingfocus-focused.sc-stzh-vbz-ticker::-moz-focus-inner{border:0 !important}.stzh-vbz-ticker.sc-stzh-vbz-ticker{display:flex;flex-direction:column;position:relative}@media screen and (min-width: 900px){.stzh-vbz-ticker.sc-stzh-vbz-ticker{flex-direction:row;align-items:flex-start}}.stzh-vbz-ticker__icon.sc-stzh-vbz-ticker{--size:var(--stzh-icon-size-small);margin-right:var(--stzh-space-xsmall)}.stzh-vbz-ticker__title.sc-stzh-vbz-ticker{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-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);display:flex;flex-wrap:wrap}@media screen and (min-width: 900px){.stzh-vbz-ticker__title.sc-stzh-vbz-ticker{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-vbz-ticker__title-parts.sc-stzh-vbz-ticker{display:flex;flex-wrap:wrap;margin:calc(var(--stzh-space-xxxsmall) / -1) 0}.stzh-vbz-ticker__title-part.sc-stzh-vbz-ticker{display:flex;align-items:center;white-space:nowrap;margin:var(--stzh-space-xxxsmall) 0}.stzh-vbz-ticker__title-part.sc-stzh-vbz-ticker:not(:last-child){margin-right:var(--stzh-space-large)}.stzh-vbz-ticker__title-part--no-disturbances.sc-stzh-vbz-ticker{color:var(--stzh-color-firgreen50)}.stzh-vbz-ticker__title-part--major-events.sc-stzh-vbz-ticker{color:var(--stzh-color-coral)}.stzh-vbz-ticker__title-part--disturbances.sc-stzh-vbz-ticker{color:var(--stzh-color-error60)}.stzh-vbz-ticker__link.sc-stzh-vbz-ticker{margin-top:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-vbz-ticker__link.sc-stzh-vbz-ticker{position:absolute;top:0;right:0;margin-top:0}}.stzh-vbz-ticker__chips.sc-stzh-vbz-ticker{display:flex;flex-wrap:wrap}.stzh-vbz-ticker__chips.sc-stzh-vbz-ticker:not(:empty){margin:calc(var(--stzh-space-xxsmall) * -1);margin-top:calc(var(--stzh-space-medium) - var(--stzh-space-xxsmall))}.stzh-vbz-ticker__chip.sc-stzh-vbz-ticker{margin:var(--stzh-space-xxsmall)}.stzh-vbz-ticker__tooltip.sc-stzh-vbz-ticker{--width:20.875rem}.stzh-vbz-ticker__disturbance.sc-stzh-vbz-ticker{display:flex;align-items:flex-start}.stzh-vbz-ticker__disturbance.sc-stzh-vbz-ticker:not(:first-child){margin-top:var(--stzh-space-small)}.stzh-vbz-ticker__disturbance-title.sc-stzh-vbz-ticker{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);display:flex}.stzh-vbz-ticker__disturbance--type0.sc-stzh-vbz-ticker .stzh-vbz-ticker__disturbance-title.sc-stzh-vbz-ticker,.stzh-vbz-ticker__disturbance--type2.sc-stzh-vbz-ticker .stzh-vbz-ticker__disturbance-title.sc-stzh-vbz-ticker{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-vbz-ticker__disturbance-icon.sc-stzh-vbz-ticker{--size:var(--stzh-icon-size-xsmall);margin-top:var(--stzh-space-xxxsmall);margin-right:var(--stzh-space-xsmall)}.stzh-vbz-ticker__disturbance-link.sc-stzh-vbz-ticker{margin-top:var(--stzh-space-xsmall)}";const z=class{constructor(s){t(this,s);this.globalDisturbances=[];this.lines=[];this.counter={[`${a.DISTURBANCE_GLOBAL}`]:0,[`${a.DISTURBANCE_INFORMATION}`]:0,[`${a.DISTURBANCE_CONSTRUCTION}`]:0,[`${a.DISTURBANCE_NORMAL}`]:0,[`${a.DISTURBANCE_EVENT}`]:0,[`${a.DISTURBANCE_BUS}`]:0};this.api="https://fpbe.zvv.ch/restproxy/himsearch?format=json&accessId=unic&channels=ticker&additionalfields=tickers:VBZ&orderBy=LMOD_DESC&lang={lang}";this.data="";this.moreInfoLink="https://zvv.ch/zvv/{lang}/fahrplan/vl.html?himIds={id}";this.dateAdapter=undefined;this.localization=undefined}localizationWatcher(){this.collator=new Intl.Collator(this.localization.$locale,{numeric:true})}async apiWatcher(t){if(!t){return}let s=this.api.replace(/\{lang\}/,this.localization.$locale);s=s+(s.includes("?")?"&":"?")+Date.now();const{data:i}=await c.get(s);this.data=i}dateAdapterWatcher(t){if(!t){this.dateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats,this.localization.$globals)}}async dataWatcher(t){var s,i;if(typeof t==="string"){this._data=JSON.parse(t)}else{this._data=t}const e={};(i=(s=this._data)===null||s===void 0?void 0:s.Message)===null||i===void 0?void 0:i.forEach((t=>{const s=t.channel.filter((t=>t.name===a.CHANNEL_TICKER&&t.url)).map((t=>t.url)).reduce(((t,s)=>t.concat(s)),[]);const i=s.find((t=>t.url.indexOf(a.CHANNEL_INFO_URL_FILTER)!==-1));if(t.baseType===a.BASE_TYPE_GLOBAL){this.counter[a.DISTURBANCE_GLOBAL]++;this.globalDisturbances.push({id:t.id,head:t.head,category:t.category,baseType:t.baseType,startDate:new Date(`${t.sDate}T${t.sTime}+02:00`),endDate:new Date(`${t.eDate}T${t.eTime}+02:00`),altStart:t.altStart,altEnd:t.altEnd,infoUrl:i})}else{this.counter[t.category]++}if(t.affectedProduct&&t.category!==a.DISTURBANCE_INFORMATION&&t.baseType!==a.BASE_TYPE_GLOBAL){const s=[];t.affectedProduct.forEach((r=>{if(typeof e[r.lineId]==="undefined"){e[r.lineId]={line:r.line,name:r.name,category:r.cls,disturbances:[],alert:false}}if(t.category===a.DISTURBANCE_NORMAL){e[r.lineId].alert=true}if(!s.includes(r.lineId)){s.push(r.lineId);e[r.lineId].disturbances.push({id:t.id,head:t.head,category:t.category,baseType:t.baseType,startDate:new Date(`${t.sDate}T${t.sTime}+02:00`),endDate:new Date(`${t.eDate}T${t.eTime}+02:00`),altStart:t.altStart,altEnd:t.altEnd,infoUrl:i})}}))}}));this.lines=Object.keys(e).map((t=>e[t]));this.lines.sort(((t,s)=>this.collator.compare(t.line,s.line)))}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"vbz-ticker");this.localizationWatcher()}this.dateAdapterWatcher(this.dateAdapter);if(this.data){await this.dataWatcher(this.data)}else{await this.apiWatcher(this.api)}}renderDisturbance(t){return s("div",{class:{"stzh-vbz-ticker__disturbance":true,[`stzh-vbz-ticker__disturbance--type${t.category}`]:!!t.category}},t.category===a.DISTURBANCE_NORMAL||t.baseType===a.BASE_TYPE_GLOBAL?s("stzh-icon",{name:"warning-big",class:"stzh-vbz-ticker__disturbance-icon"}):s("stzh-icon",{name:"construction",class:"stzh-vbz-ticker__disturbance-icon"}),s("div",{class:"stzh-vbz-ticker__disturbance-text"},s("div",{class:"stzh-vbz-ticker__disturbance-title"},t.head),s("div",{class:"stzh-vbz-ticker__disturbance-date"},this.dateAdapter.formatSpan(t.altStart||t.startDate,t.altEnd||t.endDate,"date")),t.infoUrl?s("stzh-link",{class:"stzh-vbz-ticker__disturbance-link",size:"small",href:t.infoUrl.url},this.localization.moreInfo):s("stzh-link",{class:"stzh-vbz-ticker__disturbance-link",size:"small",target:"_blank",icon:"external-link",href:this.moreInfoLink.replace(/\{lang\}/,this.localization.$locale).replace(/\{id\}/,t.id)},this.localization.moreInfo)))}render(){const t={"stzh-vbz-ticker":true};return s(e,null,s("div",{class:t},s("div",{class:"stzh-vbz-ticker__text"},s("div",{class:"stzh-vbz-ticker__title"},s("div",{class:"stzh-vbz-ticker__title-parts"},this.lines.length===0&&this.counter[a.DISTURBANCE_GLOBAL]===0&&s("div",{class:"stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--no-disturbances"},s("stzh-icon",{class:"stzh-vbz-ticker__icon",name:"checkmark-circle"}),this.localization.noDisturbances),this.counter[a.DISTURBANCE_NORMAL]>0&&s("div",{class:"stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--disturbances"},s("stzh-icon",{class:"stzh-vbz-ticker__icon",name:"warning"}),this.counter[a.DISTURBANCE_GLOBAL]>0?this.localization.furtherDisturbanceTitle:this.localization.disturbanceTitle),(this.counter[a.DISTURBANCE_CONSTRUCTION]>0||this.counter[a.DISTURBANCE_EVENT]>0||this.counter[a.DISTURBANCE_BUS]>0)&&s("div",{class:"stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--others"},s("stzh-icon",{class:"stzh-vbz-ticker__icon",name:"construction"}),this.localization.constructionsTitle))),(this.lines.length>0||this.counter[a.DISTURBANCE_GLOBAL]>0)&&s(i,null,s("div",{class:"stzh-vbz-ticker__chips",role:"list"},this.lines.map((t=>s("div",{class:"stzh-vbz-ticker__chip",role:"listitem"},s("stzh-tooltip",{class:"stzh-vbz-ticker__tooltip"},s("stzh-vbz-linechip",{line:t.line,alert:t.alert}),s("div",{class:"stzh-vbz-ticker__tooltip-content",slot:"content"},t.disturbances.map((t=>this.renderDisturbance(t))))))))))),s("div",{class:"stzh-vbz-ticker__link"},s("slot",{name:"link"}))))}get element(){return r(this)}static get watchers(){return{localization:["localizationWatcher"],api:["apiWatcher"],dateAdapter:["dateAdapterWatcher"],data:["dataWatcher"]}}};z.style=h;export{z as stzh_vbz_ticker};
-//# sourceMappingURL=p-648b7232.entry.js.map

package/dist/stzh-components/p-648b7232.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhVbzTickerCss","StzhVbzTicker","this","globalDisturbances","lines","counter","VBZ","DISTURBANCE_GLOBAL","DISTURBANCE_INFORMATION","DISTURBANCE_CONSTRUCTION","DISTURBANCE_NORMAL","DISTURBANCE_EVENT","DISTURBANCE_BUS","localizationWatcher","collator","Intl","Collator","localization","$locale","numeric","apiWatcher","newValue","apiUrl","api","replace","includes","Date","now","data","axios","get","dateAdapterWatcher","dateAdapter","window","stzhComponents","utils","createFormatParseAdapter","$formats","$globals","dataWatcher","_data","JSON","parse","_b","_a","Message","forEach","message","urls","channel","filter","name","CHANNEL_TICKER","url","map","reduce","a","b","concat","infoUrl","find","indexOf","CHANNEL_INFO_URL_FILTER","baseType","BASE_TYPE_GLOBAL","push","id","head","category","startDate","sDate","sTime","endDate","eDate","eTime","altStart","altEnd","affectedProduct","affectedLines","product","lineId","line","cls","disturbances","alert","Object","keys","key","sort","compare","componentWillLoad","fetchTranslations","element","renderDisturbance","disturbance","h","class","formatSpan","size","href","moreInfo","target","icon","moreInfoLink","render","classes","Host","length","noDisturbances","furtherDisturbanceTitle","disturbanceTitle","constructionsTitle","Fragment","role","slot"],"sources":["src/components/stzh-vbz-ticker/stzh-vbz-ticker.scss?tag=stzh-vbz-ticker&encapsulation=scoped","src/components/stzh-vbz-ticker/stzh-vbz-ticker.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-vbz-ticker {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  @include mq($from: medium) {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  &__icon {\n    --size: #{iconSize('small')};\n    margin-right: space('xsmall');\n  }\n\n  &__title {\n    @include font;\n    @include fontCurve('p1');\n    display: flex;\n    flex-wrap: wrap;\n  }\n\n  &__title-parts {\n    display: flex;\n    flex-wrap: wrap;\n    margin: calc(#{space('xxxsmall')} / -1) 0;\n  }\n\n  &__title-part {\n    display: flex;\n    align-items: center;\n    white-space: nowrap;\n    margin: space('xxxsmall') 0;\n\n    &:not(:last-child) {\n      margin-right: space('large');\n    }\n\n    &--no-disturbances {\n      color: $colorFirgreen50;\n    }\n\n    &--major-events {\n      color: $colorCoral;\n    }\n\n    &--disturbances {\n      color: $colorError60;\n    }\n  }\n\n  // &__description {\n  //   @include fontSize('micro');\n  //   @include spaceCurve('margin-top', 'tiny');\n  // }\n\n  &__link {\n    margin-top: space('small');\n\n    @include mq($from: medium) {\n      position: absolute;\n      top: 0;\n      right: 0;\n      margin-top: 0;\n    }\n  }\n\n  &__chips {\n    display: flex;\n    flex-wrap: wrap;\n\n    &:not(:empty) {\n      margin: calc(#{space('xxsmall')} * -1);\n      margin-top: calc(#{space('medium')} - #{space('xxsmall')});\n    }\n  }\n\n  &__chip {\n    margin: space('xxsmall');\n  }\n\n  &__tooltip {\n    --width: 334px;\n  }\n\n  &__disturbance {\n    display: flex;\n    align-items: flex-start;\n\n    &:not(:first-child) {\n      margin-top: space('small');\n    }\n  }\n\n  // TODO: look after rws how to restyle (was previously colored red but doesn't fit anymore with new tooltip background color)\n  // &__disturbance--type0 &__disturbance-title,\n  // &__disturbance--type0 &__disturbance-icon,\n  // &__disturbance--type2 &__disturbance-title,\n  // &__disturbance--type2 &__disturbance-icon {\n  //   color: $colorError60;\n  // }\n\n  &__disturbance-title {\n    @include font;\n    display: flex;\n  }\n\n  &__disturbance--type0 &__disturbance-title,\n  &__disturbance--type2 &__disturbance-title {\n    @include font('heavy');\n  }\n\n  &__disturbance-icon {\n    --size: #{iconSize('xsmall')};\n    margin-top: space('xxxsmall');\n    margin-right: space('xsmall');\n  }\n\n  &__disturbance-link {\n    margin-top: space('xsmall');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Watch,\n  Element,\n  Fragment\n} from \"@stencil/core\";\n\nimport axios from 'axios';\n\nimport { StzhLocaleAdapter } from \"../../utils/date-adapter\";\n\nimport {\n  VBZ,\n  VbzTickerInfoUrl,\n  VbzTickerDisturbance,\n  VbzTickerLine\n} from \"../../index\";\n\nimport { StzhVbzTickerLocalizedText } from \"./stzh-vbz-ticker.localization\";\n\n/**\n * @slot link - Optional link to traffic situation\n */\n@Component({\n  tag: \"stzh-vbz-ticker\",\n  styleUrl: \"stzh-vbz-ticker.scss\",\n  scoped: true\n})\nexport class StzhVbzTicker {\n  /** API URL (`{lang}` is replaced in the URL)  */\n  @Prop() api: string = \"https://fpbe.zvv.ch/restproxy/himsearch?format=json&accessId=unic&channels=ticker&additionalfields=tickers:VBZ&orderBy=LMOD_DESC&lang={lang}\";\n\n  /** Data to pass in directly (alternative for API call) */\n  @Prop() data: any = \"\";\n  private _data: any;\n\n  /** More info link (`{lang}` and `{id}` are replaced in the URL) */\n  @Prop() moreInfoLink: string = \"https://zvv.ch/zvv/{lang}/fahrplan/vl.html?himIds={id}\";\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  /** Translation strings. */\n  @Prop() localization: StzhVbzTickerLocalizedText;\n\n  @Element() element: HTMLStzhVbzTickerElement;\n\n  private globalDisturbances: VbzTickerDisturbance[] = [];\n  private lines: VbzTickerLine[] = [];\n  private collator: Intl.Collator;\n\n  private counter = {\n    [`${VBZ.DISTURBANCE_GLOBAL}`]: 0,\n    [`${VBZ.DISTURBANCE_INFORMATION}`]: 0,\n    [`${VBZ.DISTURBANCE_CONSTRUCTION}`]: 0,\n    [`${VBZ.DISTURBANCE_NORMAL}`]: 0,\n    [`${VBZ.DISTURBANCE_EVENT}`]: 0,\n    [`${VBZ.DISTURBANCE_BUS}`]: 0\n  };\n\n  @Watch(\"localization\")\n  localizationWatcher() {\n    this.collator = new Intl.Collator(this.localization.$locale, {\n      numeric: true\n    });\n  }\n\n  @Watch(\"api\")\n  async apiWatcher(newValue: string) {\n    if (!newValue) {\n      return;\n    }\n\n    let apiUrl = this.api.replace(/\\{lang\\}/, this.localization.$locale)\n    apiUrl = apiUrl + (apiUrl.includes(\"?\") ? \"&\" : \"?\") + Date.now();\n\n    // load data from API\n    const { data } = await axios.get(apiUrl);\n\n    this.data = data;\n  }\n\n  @Watch(\"dateAdapter\")\n  dateAdapterWatcher(newValue: StzhLocaleAdapter) {\n    if (!newValue) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n  }\n\n  @Watch(\"data\")\n  async dataWatcher(newValue: any) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    } else {\n      this._data = newValue;\n    }\n\n    const lines: { [key: string]: VbzTickerLine } = {};\n\n    this._data?.Message?.forEach(message => {\n      const urls: VbzTickerInfoUrl[] = message.channel\n        .filter(channel => channel.name === VBZ.CHANNEL_TICKER && channel.url)\n        .map(channel => channel.url)\n        .reduce((a, b) => a.concat(b), []);\n\n      const infoUrl = urls\n        .find(url => url.url.indexOf(VBZ.CHANNEL_INFO_URL_FILTER) !== -1);\n\n      if (message.baseType === VBZ.BASE_TYPE_GLOBAL) {\n        this.counter[VBZ.DISTURBANCE_GLOBAL]++;\n\n        this.globalDisturbances.push({\n          id: message.id,\n          head: message.head,\n          category: message.category,\n          baseType: message.baseType,\n          startDate: new Date(`${message.sDate}T${message.sTime}+02:00`),\n          endDate: new Date(`${message.eDate}T${message.eTime}+02:00`),\n          altStart: message.altStart,\n          altEnd: message.altEnd,\n          infoUrl: infoUrl\n        });\n      } else {\n        this.counter[message.category]++;\n      }\n\n      // don't add to lines if no line/product has been linked to\n      // or if it is a information disturbance or global\n      if (\n        message.affectedProduct\n        && message.category !== VBZ.DISTURBANCE_INFORMATION\n        && message.baseType !== VBZ.BASE_TYPE_GLOBAL\n      ) {\n        const affectedLines = [];\n\n        message.affectedProduct.forEach(product => {\n          if (typeof lines[product.lineId] === \"undefined\") {\n            lines[product.lineId] = {\n              line: product.line,\n              name: product.name,\n              category: product.cls,\n              disturbances: [],\n              alert: false\n            }\n          }\n\n          if (message.category === VBZ.DISTURBANCE_NORMAL) {\n            lines[product.lineId].alert = true;\n          }\n\n          // only add disturbance message to line if it was not already added (avoiding same message twice)\n          if (!affectedLines.includes(product.lineId)) {\n            affectedLines.push(product.lineId);\n\n            lines[product.lineId].disturbances.push({\n              id: message.id,\n              head: message.head,\n              category: message.category,\n              baseType: message.baseType,\n              startDate: new Date(`${message.sDate}T${message.sTime}+02:00`),\n              endDate: new Date(`${message.eDate}T${message.eTime}+02:00`),\n              altStart: message.altStart,\n              altEnd: message.altEnd,\n              infoUrl: infoUrl\n            })\n          }\n        })\n      }\n    });\n\n    this.lines = Object.keys(lines)\n      .map(key => lines[key]);\n\n    // sort by line name\n    this.lines.sort((a, b) => this.collator\n      .compare(a.line, b.line));\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"vbz-ticker\");\n      this.localizationWatcher();\n    }\n\n    this.dateAdapterWatcher(this.dateAdapter);\n\n    if (this.data) {\n      await this.dataWatcher(this.data);\n    } else {\n      await this.apiWatcher(this.api);\n    }\n  }\n\n  renderDisturbance(disturbance: VbzTickerDisturbance) {\n    return (\n      <div class={{\n        \"stzh-vbz-ticker__disturbance\": true,\n        [`stzh-vbz-ticker__disturbance--type${disturbance.category}`]: !!disturbance.category\n      }}>\n        {disturbance.category === VBZ.DISTURBANCE_NORMAL\n          || disturbance.baseType === VBZ.BASE_TYPE_GLOBAL\n        ?\n          <stzh-icon name=\"warning-big\" class=\"stzh-vbz-ticker__disturbance-icon\"></stzh-icon>\n          :\n          <stzh-icon name=\"construction\" class=\"stzh-vbz-ticker__disturbance-icon\"></stzh-icon>\n        }\n\n        <div class=\"stzh-vbz-ticker__disturbance-text\">\n          <div class=\"stzh-vbz-ticker__disturbance-title\">\n            {disturbance.head}\n          </div>\n\n          <div class=\"stzh-vbz-ticker__disturbance-date\">\n            {this.dateAdapter.formatSpan(\n              disturbance.altStart || disturbance.startDate,\n              disturbance.altEnd || disturbance.endDate,\n              \"date\"\n            )}\n          </div>\n\n          {disturbance.infoUrl ?\n            <stzh-link\n              class=\"stzh-vbz-ticker__disturbance-link\"\n              size=\"small\"\n              href={disturbance.infoUrl.url}\n            >\n              {this.localization.moreInfo}\n            </stzh-link>\n          :\n            <stzh-link\n              class=\"stzh-vbz-ticker__disturbance-link\"\n              size=\"small\"\n              target=\"_blank\"\n              icon=\"external-link\"\n              href={this.moreInfoLink\n                .replace(/\\{lang\\}/, this.localization.$locale)\n                .replace(/\\{id\\}/, disturbance.id)}\n            >\n              {this.localization.moreInfo}\n            </stzh-link>\n          }\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const classes = {\n      \"stzh-vbz-ticker\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-vbz-ticker__text\">\n            <div class=\"stzh-vbz-ticker__title\">\n              <div class=\"stzh-vbz-ticker__title-parts\">\n                {this.lines.length === 0 && this.counter[VBZ.DISTURBANCE_GLOBAL] === 0 &&\n                  <div class=\"stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--no-disturbances\">\n                    <stzh-icon class=\"stzh-vbz-ticker__icon\" name=\"checkmark-circle\"></stzh-icon>\n                    {this.localization.noDisturbances}\n                  </div>}\n\n                {/* {this.counter[DISTURBANCE_GLOBAL] > 0 &&\n                  <div class=\"stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--major-events\">\n                    <stzh-icon class=\"stzh-vbz-ticker__icon\" name=\"important-warning\"></stzh-icon>\n                    {this.localization.majorEventTitle}\n                  </div>} */}\n\n                {this.counter[VBZ.DISTURBANCE_NORMAL] > 0 &&\n                  <div class=\"stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--disturbances\">\n                    <stzh-icon class=\"stzh-vbz-ticker__icon\" name=\"warning\"></stzh-icon>\n                    {this.counter[VBZ.DISTURBANCE_GLOBAL] > 0 ?\n                      this.localization.furtherDisturbanceTitle : this.localization.disturbanceTitle}\n                  </div>}\n\n                {(this.counter[VBZ.DISTURBANCE_CONSTRUCTION] > 0\n                  || this.counter[VBZ.DISTURBANCE_EVENT] > 0\n                  || this.counter[VBZ.DISTURBANCE_BUS] > 0) &&\n                  <div class=\"stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--others\">\n                    <stzh-icon class=\"stzh-vbz-ticker__icon\" name=\"construction\"></stzh-icon>\n                    {this.localization.constructionsTitle}\n                  </div>}\n              </div>\n            </div>\n\n            {(this.lines.length > 0 || this.counter[VBZ.DISTURBANCE_GLOBAL] > 0) &&\n              <Fragment>\n                {/* <div class=\"stzh-vbz-ticker__description\">\n                  {this.counter[VBZ.DISTURBANCE_GLOBAL] > 0\n                    ? this.localization.globalDisturbance\n                    : this.localization.affectedLines}\n                </div> */}\n                <div class=\"stzh-vbz-ticker__chips\" role=\"list\">\n                  {/* {this.counter[VBZ.DISTURBANCE_GLOBAL] > 0 &&\n                    <div class=\"stzh-vbz-ticker__chip\" role=\"listitem\">\n                      <stzh-tooltip class=\"stzh-vbz-ticker__tooltip\">\n                        <stzh-vbz-linechip global></stzh-vbz-linechip>\n                        <div class=\"stzh-vbz-ticker__tooltip-content\" slot=\"content\">\n                          {this.globalDisturbances.map((disturbance) => this.renderDisturbance(disturbance))}\n                        </div>\n                      </stzh-tooltip>\n                    </div>} */}\n\n                  {this.lines.map((line) =>\n                    <div class=\"stzh-vbz-ticker__chip\" role=\"listitem\">\n                      <stzh-tooltip class=\"stzh-vbz-ticker__tooltip\">\n                        <stzh-vbz-linechip line={line.line} alert={line.alert}></stzh-vbz-linechip>\n                        <div class=\"stzh-vbz-ticker__tooltip-content\" slot=\"content\">\n                          {line.disturbances.map((disturbance) => this.renderDisturbance(disturbance))}\n                        </div>\n                      </stzh-tooltip>\n                    </div>\n                  )}\n                </div>\n              </Fragment>}\n          </div>\n\n          <div class=\"stzh-vbz-ticker__link\">\n            <slot name=\"link\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["stzhScrollupCss","StzhScrollup","constructor","hostRef","this","handleLinkClick","window","scrollTo","top","left","behavior","handleSlotchange","host","_a","element","getRootNode","links","querySelectorAll","forEach","link","addEventListener","setPropsIfNull","icon","render","classes","h","Host","class","onSlotchange"],"sources":["src/components/stzh-scrollup/stzh-scrollup.scss?tag=stzh-scrollup&encapsulation=shadow","src/components/stzh-scrollup/stzh-scrollup.tsx"],"sourcesContent":[":host {\n  display: contents;\n\n  @media print {\n    display: none;\n  }\n}\n\n.stzh-scrollup {\n  display: contents;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for label\n */\n@Component({\n  tag: \"stzh-scrollup\",\n  styleUrl: \"stzh-scrollup.scss\",\n  shadow: true\n})\nexport class StzhScrollup {\n  @Element() element: HTMLStzhScrollupElement;\n\n  private handleLinkClick = () => {\n    window.scrollTo({\n      top: 0,\n      left: 0,\n      behavior: \"smooth\"\n    });\n  }\n\n  private handleSlotchange = () => {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const links = host.querySelectorAll(\"stzh-link, stzh-button\");\n\n    links.forEach((link) => {\n      link.addEventListener('click', this.handleLinkClick);\n\n      setPropsIfNull(link, {\n        icon: \"arrow-up\"\n      } as HTMLStzhLinkElement | HTMLStzhButtonElement)\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-scrollup\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot onSlotchange={this.handleSlotchange}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"qHAAA,MAAMA,EAAkB,ukC,MCiBXC,EAAY,MALzB,WAAAC,CAAAC,G,UAQUC,KAAAC,gBAAkB,KACxBC,OAAOC,SAAS,CACdC,IAAK,EACLC,KAAM,EACNC,SAAU,UACV,EAGIN,KAAAO,iBAAmB,K,MACzB,MAAMC,IAAOC,EAACT,KAAKU,QAAQC,iBAA4B,MAAAF,SAAA,SAAAA,EAAED,OAAQR,KAAKU,QACtE,MAAME,EAAQJ,EAAKK,iBAAiB,0BAEpCD,EAAME,SAASC,IACbA,EAAKC,iBAAiB,QAAShB,KAAKC,iBAEpCgB,EAAeF,EAAM,CACnBG,KAAM,YACyC,GACjD,C,CAGJ,MAAAC,GACE,MAAMC,EAAU,CACd,gBAAiB,MAGnB,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,QAAMG,aAAcxB,KAAKO,oB"}

package/dist/stzh-components/p-6ab9dee8.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as o,a as i,g as s}from"./p-c7bfac7a.js";const e=`<svg xmlns="http://www.w3.org/2000/svg" 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 l=":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--icon-checklist-visibility:hidden}:host::before{display:inline-block;position:absolute;left:0;top:0}.stzh-list-item__checkmark-icon{visibility:var(--icon-checklist-visibility);display:flex;justify-content:center;align-items:center;position:absolute;top:0.0625rem;left:0}.stzh-list-item__checkmark-icon svg{width:1.5em;height:1.5em;display:block}";const n=class{constructor(o){t(this,o)}render(){const t={"stzh-list-item":true};return o(i,null,o("div",{class:t,role:"listitem"},o("div",{class:"stzh-list-item__checkmark-icon",innerHTML:e}),o("div",{class:"stzh-list-item__text"},o("slot",null))))}get element(){return s(this)}};n.style=l;export{n as stzh_list_item};
-//# sourceMappingURL=p-6ab9dee8.entry.js.map

package/dist/stzh-components/p-6ab9dee8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhListItemCss","StzhListItem","render","classes","h","Host","class","role","innerHTML","Checkmark"],"sources":["src/components/stzh-list-item/stzh-list-item.scss?tag=stzh-list-item&encapsulation=shadow","src/components/stzh-list-item/stzh-list-item.tsx"],"sourcesContent":[":host {\n  --icon-checklist-visibility: hidden;\n\n  &::before {\n    display: inline-block;\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n}\n\n.stzh-list-item {\n  &__checkmark-icon {\n    visibility: var(--icon-checklist-visibility);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    top: 1px;\n    left: 0;\n\n    svg {\n      width: 1.5em;\n      height: 1.5em;\n      display: block;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element\n} from \"@stencil/core\";\n\nimport Checkmark from \"./assets/checkmark.svg\";\n\n/**\n * @slot - Slot for text\n */\n@Component({\n  tag: \"stzh-list-item\",\n  styleUrl: \"stzh-list-item.scss\",\n  shadow: true\n})\nexport class StzhListItem {\n  @Element() element: HTMLStzhListItemElement;\n\n  render() {\n    const classes = {\n      \"stzh-list-item\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes} role=\"listitem\">\n          <div class=\"stzh-list-item__checkmark-icon\" innerHTML={Checkmark}></div>\n\n          <div class=\"stzh-list-item__text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"qWAAA,MAAMA,EAAkB,+0C,MCiBXC,EAAY,M,yBAGvB,MAAAC,GACE,MAAMC,EAAU,CACd,iBAAkB,MAGpB,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,EAASI,KAAK,YACxBH,EAAA,OAAKE,MAAM,iCAAiCE,UAAWC,IAEvDL,EAAA,OAAKE,MAAM,wBACTF,EAAA,e"}

package/dist/stzh-components/p-6c2289da.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as i,a,g as r}from"./p-c7bfac7a.js";const o='.sc-stzh-ratio-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-ratio-h{display:none}.sc-stzh-ratio-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-ratio-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-ratio-h *.sc-stzh-ratio,.sc-stzh-ratio-h *.sc-stzh-ratio::before,.sc-stzh-ratio-h *.sc-stzh-ratio::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-ratio-h .has-focus.sc-stzh-ratio{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-ratio-h .stzh-fylingfocus-focused.sc-stzh-ratio{outline-style:none !important}.sc-stzh-ratio-h .stzh-fylingfocus-focused.sc-stzh-ratio::-moz-focus-inner{border:0 !important}.sc-stzh-ratio-h{--background-color:var(--stzh-ratio-background-color);--ratio:16\n    / 9}.sc-stzh-ratio-h .sc-stzh-ratio-s>*{position:absolute;width:100%;height:100%;inset:0;-o-object-fit:cover;object-fit:cover}.sc-stzh-ratio-h[fit=contain] .sc-stzh-ratio-s>*{-o-object-fit:contain;object-fit:contain}[portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:9\n    / 16}[ratio="16:9"].sc-stzh-ratio-h{--ratio:16 / 9}[ratio="16:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:9 / 16}[ratio="1:1"].sc-stzh-ratio-h{--ratio:1 / 1}[ratio="1:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1 / 1}[ratio="21:9"].sc-stzh-ratio-h{--ratio:21 / 9}[ratio="21:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:9 / 21}[ratio="2:1"].sc-stzh-ratio-h{--ratio:2 / 1}[ratio="2:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1 / 2}[ratio="3:2"].sc-stzh-ratio-h{--ratio:3 / 2}[ratio="3:2"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:2 / 3}[ratio="4:3"].sc-stzh-ratio-h{--ratio:4 / 3}[ratio="4:3"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:3 / 4}[ratio="5:4"].sc-stzh-ratio-h{--ratio:5 / 4}[ratio="5:4"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:4 / 5}@media screen and (min-width: 600px){[ratio-small="16:9"].sc-stzh-ratio-h{--ratio:16 / 9}}@media screen and (min-width: 600px){[ratio-small="16:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:9 / 16}}@media screen and (min-width: 600px){[ratio-small="1:1"].sc-stzh-ratio-h{--ratio:1 / 1}}@media screen and (min-width: 600px){[ratio-small="1:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1 / 1}}@media screen and (min-width: 600px){[ratio-small="21:9"].sc-stzh-ratio-h{--ratio:21 / 9}}@media screen and (min-width: 600px){[ratio-small="21:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:9 / 21}}@media screen and (min-width: 600px){[ratio-small="2:1"].sc-stzh-ratio-h{--ratio:2 / 1}}@media screen and (min-width: 600px){[ratio-small="2:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1 / 2}}@media screen and (min-width: 600px){[ratio-small="3:2"].sc-stzh-ratio-h{--ratio:3 / 2}}@media screen and (min-width: 600px){[ratio-small="3:2"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:2 / 3}}@media screen and (min-width: 600px){[ratio-small="4:3"].sc-stzh-ratio-h{--ratio:4 / 3}}@media screen and (min-width: 600px){[ratio-small="4:3"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:3 / 4}}@media screen and (min-width: 600px){[ratio-small="5:4"].sc-stzh-ratio-h{--ratio:5 / 4}}@media screen and (min-width: 600px){[ratio-small="5:4"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:4 / 5}}@media screen and (min-width: 900px){[ratio-medium="16:9"].sc-stzh-ratio-h{--ratio:16 / 9}}@media screen and (min-width: 900px){[ratio-medium="16:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:9 / 16}}@media screen and (min-width: 900px){[ratio-medium="1:1"].sc-stzh-ratio-h{--ratio:1 / 1}}@media screen and (min-width: 900px){[ratio-medium="1:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1 / 1}}@media screen and (min-width: 900px){[ratio-medium="21:9"].sc-stzh-ratio-h{--ratio:21 / 9}}@media screen and (min-width: 900px){[ratio-medium="21:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:9 / 21}}@media screen and (min-width: 900px){[ratio-medium="2:1"].sc-stzh-ratio-h{--ratio:2 / 1}}@media screen and (min-width: 900px){[ratio-medium="2:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1 / 2}}@media screen and (min-width: 900px){[ratio-medium="3:2"].sc-stzh-ratio-h{--ratio:3 / 2}}@media screen and (min-width: 900px){[ratio-medium="3:2"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:2 / 3}}@media screen and (min-width: 900px){[ratio-medium="4:3"].sc-stzh-ratio-h{--ratio:4 / 3}}@media screen and (min-width: 900px){[ratio-medium="4:3"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:3 / 4}}@media screen and (min-width: 900px){[ratio-medium="5:4"].sc-stzh-ratio-h{--ratio:5 / 4}}@media screen and (min-width: 900px){[ratio-medium="5:4"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:4 / 5}}@media screen and (min-width: 1260px){[ratio-large="16:9"].sc-stzh-ratio-h{--ratio:16 / 9}}@media screen and (min-width: 1260px){[ratio-large="16:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:9 / 16}}@media screen and (min-width: 1260px){[ratio-large="1:1"].sc-stzh-ratio-h{--ratio:1 / 1}}@media screen and (min-width: 1260px){[ratio-large="1:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1 / 1}}@media screen and (min-width: 1260px){[ratio-large="21:9"].sc-stzh-ratio-h{--ratio:21 / 9}}@media screen and (min-width: 1260px){[ratio-large="21:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:9 / 21}}@media screen and (min-width: 1260px){[ratio-large="2:1"].sc-stzh-ratio-h{--ratio:2 / 1}}@media screen and (min-width: 1260px){[ratio-large="2:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1 / 2}}@media screen and (min-width: 1260px){[ratio-large="3:2"].sc-stzh-ratio-h{--ratio:3 / 2}}@media screen and (min-width: 1260px){[ratio-large="3:2"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:2 / 3}}@media screen and (min-width: 1260px){[ratio-large="4:3"].sc-stzh-ratio-h{--ratio:4 / 3}}@media screen and (min-width: 1260px){[ratio-large="4:3"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:3 / 4}}@media screen and (min-width: 1260px){[ratio-large="5:4"].sc-stzh-ratio-h{--ratio:5 / 4}}@media screen and (min-width: 1260px){[ratio-large="5:4"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:4 / 5}}@media screen and (min-width: 1600px){[ratio-ultra="16:9"].sc-stzh-ratio-h{--ratio:16 / 9}}@media screen and (min-width: 1600px){[ratio-ultra="16:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:9 / 16}}@media screen and (min-width: 1600px){[ratio-ultra="1:1"].sc-stzh-ratio-h{--ratio:1 / 1}}@media screen and (min-width: 1600px){[ratio-ultra="1:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1 / 1}}@media screen and (min-width: 1600px){[ratio-ultra="21:9"].sc-stzh-ratio-h{--ratio:21 / 9}}@media screen and (min-width: 1600px){[ratio-ultra="21:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:9 / 21}}@media screen and (min-width: 1600px){[ratio-ultra="2:1"].sc-stzh-ratio-h{--ratio:2 / 1}}@media screen and (min-width: 1600px){[ratio-ultra="2:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1 / 2}}@media screen and (min-width: 1600px){[ratio-ultra="3:2"].sc-stzh-ratio-h{--ratio:3 / 2}}@media screen and (min-width: 1600px){[ratio-ultra="3:2"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:2 / 3}}@media screen and (min-width: 1600px){[ratio-ultra="4:3"].sc-stzh-ratio-h{--ratio:4 / 3}}@media screen and (min-width: 1600px){[ratio-ultra="4:3"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:3 / 4}}@media screen and (min-width: 1600px){[ratio-ultra="5:4"].sc-stzh-ratio-h{--ratio:5 / 4}}@media screen and (min-width: 1600px){[ratio-ultra="5:4"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:4 / 5}}.stzh-ratio.sc-stzh-ratio{position:relative;width:100%;aspect-ratio:var(--ratio);background:var(--background-color)}';const s=class{constructor(i){t(this,i);this.ratio="16:9";this.ratioSmall="inherit";this.ratioMedium="inherit";this.ratioLarge="inherit";this.ratioUltra="inherit";this.portrait=false;this.fit="cover"}render(){const t={"stzh-ratio":true};return i(a,null,i("div",{class:t},i("slot",null)))}get element(){return r(this)}};s.style=o;export{s as stzh_ratio};
-//# sourceMappingURL=p-6c2289da.entry.js.map

package/dist/stzh-components/p-6c2289da.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhRatioCss","StzhRatio","render","classes","h","Host","class"],"sources":["src/components/stzh-ratio/stzh-ratio.scss?tag=stzh-ratio&encapsulation=scoped","src/components/stzh-ratio/stzh-ratio.tsx"],"sourcesContent":["/**\n * @prop --ratio: Ratio (e.g. 16 / 9)\n * @prop --background-color: Background color of ratio area\n *\n * @prop --stzh-ratio-background-color: **Global**: Background color of ratios\n */\n\n:host {\n  --background-color: #{$ratioBackgroundColor};\n  --ratio: #{nth(map-get($ratios, $ratioDefault), 1)}\n    / #{nth(map-get($ratios, $ratioDefault), 2)};\n\n  ::slotted(*) {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    inset: 0;\n    object-fit: cover;\n  }\n}\n\n:host([fit=\"contain\"]) ::slotted(*) {\n  object-fit: contain;\n}\n\n/* Ratio variants */\n\n:host([portrait]:not([portrait=\"false\"])) {\n  --ratio: #{nth(map-get($ratios, $ratioDefault), 2)}\n    / #{nth(map-get($ratios, $ratioDefault), 1)};\n}\n\n@mixin ratioProps($breakpoint: null) {\n  @each $ratio, $value in $ratios {\n    $firstNr: nth($value, 1);\n    $secondNr: nth($value, 2);\n\n    @if $breakpoint {\n      :host([ratio-#{$breakpoint}=\"#{$ratio}\"]) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$firstNr} / #{$secondNr};\n        }\n      }\n\n      :host([ratio-#{$breakpoint}=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$secondNr} / #{$firstNr};\n        }\n      }\n    } @else {\n      :host([ratio=\"#{$ratio}\"]) {\n        --ratio: #{$firstNr} / #{$secondNr};\n      }\n\n      :host([ratio=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])) {\n        --ratio: #{$secondNr} / #{$firstNr};\n      }\n    }\n  }\n}\n\n@include ratioProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include ratioProps($breakpoint);\n}\n\n.stzh-ratio {\n  position: relative;\n  width: 100%;\n  aspect-ratio: var(--ratio);\n  background: var(--background-color);\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for e.g. image or video\n */\n@Component({\n  tag: \"stzh-ratio\",\n  styleUrl: \"stzh-ratio.scss\",\n  scoped: true,\n})\nexport class StzhRatio {\n  /** Aspect ratio */\n  @Prop({ reflect: true }) ratio: Layout.Ratio = \"16:9\";\n  /** Aspect ratio above small breakpoint */\n  @Prop({ reflect: true }) ratioSmall: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above medium breakpoint */\n  @Prop({ reflect: true }) ratioMedium: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above large breakpoint */\n  @Prop({ reflect: true }) ratioLarge: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above ultra breakpoint */\n  @Prop({ reflect: true }) ratioUltra: Layout.Ratio | \"inherit\" = \"inherit\";\n\n  /** Whether aspect ratio is in portrait mode */\n  @Prop({ reflect: true }) portrait: boolean = false;\n\n  /** Fit mode */\n  @Prop({ reflect: true }) fit: \"cover\" | \"contain\" = \"cover\";\n\n  @Element() element: HTMLStzhRatioElement;\n\n  render() {\n    const classes = {\n      \"stzh-ratio\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oDAAA,MAAMA,EAAe,kvQ,MCYRC,EAAS,M,oCAE2B,O,gBAEiB,U,iBAEC,U,gBAED,U,gBAEA,U,cAGnB,M,SAGO,O,CAIpD,MAAAC,GACE,MAAMC,EAAU,CACd,aAAc,MAGhB,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,c"}

package/dist/stzh-components/p-72c375c7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhGhettoboxCss","StzhGhettobox","this","onCloseButtonClick","hide","init","button","element","querySelector","setPropsIfNull","size","sizeMedium","variant","effect","icon","iconPosition","show","open","stzhOpen","emit","component","stzhClose","componentWillLoad","localization","window","stzhComponents","utils","fetchTranslations","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","classes","hideClose","h","Host","hidden","class","hiddenTitle","mainTitle","description","name","onClick","a11yLabel","close","iconOnly","stzhRichtextCss","CLASS_EXTERNAL_LINK","CLASS_EXTERNAL_ICON_WRAPPER","CLASS_EXTERNAL_ICON","CLASS_EXTERNAL_VHIDDEN","StzhRichtext","addExternalLinkIcons","externalLinks","forEach","externalLink","classList","add","screenreaderText","document","createElement","innerText","$globals","externalLinkLabel","iconWrapper","externalLinkIcon","appendChild","prepend","componentDidRender","Array","from","querySelectorAll","externalLinkSelector","removeFirstMargin","removeLastMargin","stzhShowCss","KEY_PREFIX_CLOSE","StzhShow","closedByCookie","closeWatcher","event","includes","detail","closeKey","Cookie","set","Date","now","toString","showFromDateWatcher","newValue","_showFromDate","timeClosed","get","Number","getTime","hideFromDateWatcher","_hideFromDate","showFromDate","hideFromDate","timeNow"],"sources":["src/components/stzh-ghettobox/stzh-ghettobox.scss?tag=stzh-ghettobox&encapsulation=scoped","src/components/stzh-ghettobox/stzh-ghettobox.tsx","src/components/stzh-richtext/stzh-richtext.scss?tag=stzh-richtext&encapsulation=scoped","src/components/stzh-richtext/stzh-richtext.tsx","src/components/stzh-show/stzh-show.scss?tag=stzh-show&encapsulation=shadow","src/components/stzh-show/stzh-show.tsx"],"sourcesContent":["/*\n * @prop --background-color: Background color of ghettobox\n */\n\n:host {\n  @include base-invert;\n  @include button-invert;\n\n  --background-color: #{$colorError60};\n  --color: #{$baseInvertColor};\n  --richtext-color: var(--color);\n}\n\n.stzh-ghettobox {\n  position: relative;\n  color: var(--color);\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n\n  &__container {\n    @include container;\n    @include spaceCurve('padding-top', 'large');\n    @include spaceCurve('padding-bottom', 'large');\n  }\n\n  &__hidden-title {\n    @include visuallyhidden;\n  }\n\n  &__message {\n    @include spaceCurve('gap', 'regular');\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__main-title {\n    @include font('title');\n    @include fontCurve('h2', 'heading');\n    margin: 0;\n    color: inherit;\n\n    &:not(:empty) {\n      @include spaceCurve('margin-bottom', 'regular');\n    }\n  }\n\n  &__description {\n    @include fontCurve('p1');\n    --stzh-base-color: var(--richtext-color);\n\n    &:not(:empty) {\n      @include spaceCurve('margin-bottom', 'small');\n    }\n  }\n\n  &__button {\n    display: grid;\n\n    @include mq($from: small) {\n      justify-content: start;\n    }\n  }\n\n  &__close {\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    @include mq($from: small) {\n      top: 10px;\n      right: 10px;\n    }\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 { StzhGhettoboxOpenEvent, StzhGhettoboxCloseEvent } from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { StzhGhettoboxLocalizedText } from \"./stzh-ghettobox.localization\"\n\n/**\n * @slot - Slot for description content (use instead of description property)\n */\n@Component({\n  tag: \"stzh-ghettobox\",\n  styleUrl: \"stzh-ghettobox.scss\",\n  scoped: true\n})\nexport class StzhGhettobox {\n  /** Overwrite hidden h1 title */\n  @Prop() hiddenTitle: string = \"\";\n\n  /** Main title */\n  @Prop() mainTitle: string = \"\";\n\n  /** Description */\n  @Prop() description: string = \"\";\n\n  /** Hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings */\n  @Prop() localization: StzhGhettoboxLocalizedText;\n\n  /** Ghettobox open event */\n  @Event() stzhOpen: EventEmitter<StzhGhettoboxOpenEvent>;\n\n  /** Ghettobox close event */\n  @Event() stzhClose: EventEmitter<StzhGhettoboxCloseEvent>;\n\n  @Element() element: HTMLStzhGhettoboxElement;\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-ghettobox\"\n    })\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-ghettobox\"\n    });\n  }\n\n  private observer: MutationObserver;\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  }\n\n  private init = () => {\n    const button = this.element.querySelector('stzh-button[slot=\"button\"]');\n\n    if (button) {\n      setPropsIfNull(button, {\n        size: \"small\",\n        sizeMedium: \"default\",\n        variant: \"secondary\",\n        effect: \"cta\",\n        icon: \"arrow-right\",\n        iconPosition: \"right\"\n      } as HTMLStzhButtonElement)\n    }\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"ghettobox\");\n    }\n  }\n\n  connectedCallback() {\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    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-ghettobox\": true,\n      \"stzh-ghettobox--has-close-button\": !this.hideClose\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-ghettobox__container\">\n            <h1 class=\"stzh-ghettobox__hidden-title\">\n              {this.hiddenTitle || this.localization.hiddenTitle}\n            </h1>\n            <div class=\"stzh-ghettobox__message\">\n              <div class=\"stzh-ghettobox__text\">\n                <h2 class=\"stzh-ghettobox__main-title\">\n                  {this.mainTitle}\n                </h2>\n                <div class=\"stzh-ghettobox__description\">\n                  {this.description ? this.description : <slot></slot>}\n                </div>\n              </div>\n              <div class=\"stzh-ghettobox__button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n            {!this.hideClose &&\n              <stzh-button\n                class=\"stzh-ghettobox__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        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  @include richtext-host;\n\n  --display: var(--stzh-richtext-display, block);\n\n  --grid-template-areas: var(\n    --stzh-richtext-grid-template-areas,\n    \"text text text text\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-richtext-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-richtext-grid-template-areas,\n      \"text text text text\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-richtext-grid-template-areas,\n      \"text text text text text text text text\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-richtext-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  ::slotted(*) {\n    @include richtext-slotted;\n  }\n\n  &[has-hidden-first-margin] ::slotted(*:first-child) {\n    margin-top: 0 !important;\n  }\n\n  &[has-hidden-last-margin] ::slotted(*:last-child) {\n    margin-bottom: 0 !important;\n  }\n}\n\n.stzh-richtext {\n  @include gridGutter;\n  display: var(--display);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__text {\n    grid-area: text;\n    display: grid;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element\n} from \"@stencil/core\";\n\nconst CLASS_EXTERNAL_LINK = 'stzh-richtext__external-link';\nconst CLASS_EXTERNAL_ICON_WRAPPER = 'stzh-richtext__external-icon-wrapper';\nconst CLASS_EXTERNAL_ICON = 'stzh-richtext__external-icon';\nconst CLASS_EXTERNAL_VHIDDEN = 'stzh-richtext__external-vhidden';\n\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Text content that should be styled\n */\n@Component({\n  tag: \"stzh-richtext\",\n  styleUrl: \"stzh-richtext.scss\",\n  scoped: true\n})\nexport class StzhRichtext {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether first top margin of first child should be set to 0. */\n  @Prop({ reflect: true }) removeFirstMargin: boolean;\n\n  /** Whether last bottom margin of last child should be set to 0. */\n  @Prop({ reflect: true }) removeLastMargin: boolean;\n\n  /** Selector to recognize external link and attach an icon */\n  @Prop() externalLinkSelector: string = 'a[rel*=\"external\"], a.external, a.extern';\n\n  /** Icon used for marking external links */\n  @Prop() externalLinkIcon: string = 'external-link';\n\n  @Element() element: HTMLStzhRichtextElement;\n\n  private externalLinks: HTMLElement[];\n\n  private addExternalLinkIcons() {\n    this.externalLinks.forEach(externalLink => {\n      externalLink.classList.add(CLASS_EXTERNAL_LINK);\n\n      const screenreaderText = document.createElement('span');\n      screenreaderText.classList.add(CLASS_EXTERNAL_VHIDDEN);\n      screenreaderText.innerText = this.localization.$globals.externalLinkLabel;\n\n      const iconWrapper = document.createElement('span');\n      iconWrapper.classList.add(CLASS_EXTERNAL_ICON_WRAPPER);\n\n      const icon = document.createElement('stzh-icon');\n      icon.classList.add(CLASS_EXTERNAL_ICON);\n      icon.name = this.externalLinkIcon;\n      iconWrapper.appendChild(icon);\n\n      externalLink.prepend(screenreaderText);\n      externalLink.appendChild(iconWrapper);\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"richtext\");\n    }\n  }\n\n  componentDidRender() {\n    this.externalLinks = Array.from(this.element.querySelectorAll(this.externalLinkSelector));\n    this.addExternalLinkIcons();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-richtext\": true\n    };\n\n    return (\n      <Host\n        has-hidden-first-margin={typeof this.removeFirstMargin === \"boolean\" ? this.removeFirstMargin : true}\n        has-hidden-last-margin={typeof this.removeLastMargin === \"boolean\" ? this.removeLastMargin : true}\n      >\n        <div class={classes}>\n          <div class=\"stzh-richtext__text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --show-display: Display value that is used when content is shown (default `block`)\n * @prop --hide-display: Display value that is used when content is hidden (default `none`)\n * @prop --current-display: Current display value (readonly)\n */\n\n:host {\n  --show-display: contents;\n  --hide-display: none;\n  --current-display: var(--hide-display);\n\n  display: var(--current-display);\n}\n\n/* Mikro */\n\n:host([mikro]) {\n  --current-display: var(--show-display);\n}\n\n:host([mikro=\"false\"]) {\n  --current-display: var(--hide-display);\n}\n\n/* Small */\n\n:host([small]) {\n  @include mq($from: small) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([small=\"false\"]) {\n  @include mq($from: small) {\n    --current-display: var(--hide-display);\n  }\n}\n\n/* Medium */\n\n:host([medium]) {\n  @include mq($from: medium) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([medium=\"false\"]) {\n  @include mq($from: medium) {\n    --current-display: var(--hide-display);\n  }\n}\n\n/* Large */\n\n:host([large]) {\n  @include mq($from: large) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([large=\"false\"]) {\n  @include mq($from: large) {\n    --current-display: var(--hide-display);\n  }\n}\n\n/* Ultra */\n\n:host([ultra]) {\n  @include mq($from: ultra) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([ultra=\"false\"]) {\n  @include mq($from: ultra) {\n    --current-display: var(--hide-display);\n  }\n}","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhBannerCloseEvent,\n  StzhGhettoboxCloseEvent,\n  StzhMessageCloseEvent\n} from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSE = \"stzh-components-show-close\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-show\",\n  styleUrl: \"stzh-show.scss\",\n  shadow: true\n})\nexport class StzhShow {\n  /** Mikro */\n  @Prop({ reflect: true }) mikro: boolean;\n\n  /** Small */\n  @Prop({ reflect: true }) small: boolean;\n\n  /** Medium */\n  @Prop({ reflect: true }) medium: boolean;\n\n  /** Large */\n  @Prop({ reflect: true }) large: boolean;\n\n  /** Ultra */\n  @Prop({ reflect: true }) ultra: boolean;\n\n  /** Show from date */\n  @Prop() showFromDate: Date | string;\n  private _showFromDate: Date;\n\n  /** Hide from date */\n  @Prop() hideFromDate: Date | string;\n  private _hideFromDate: Date;\n\n  /**\n   * Close cookie name key.\n   * Component will check for the cookie (stzh-components-show-close-{name})\n   * and if not empty (component inside already closed before) will hide show.\n   * Will also compare with showFromDate if given, to make sure cookie was set after showFromDate (otherwise will show again).\n   */\n  @Prop() closeKey: string = \"\";\n\n  @Listen(\"stzhClose\")\n  closeWatcher(event: CustomEvent<StzhBannerCloseEvent | StzhMessageCloseEvent | StzhGhettoboxCloseEvent>) {\n    if ([\"stzh-banner\", \"stzh-message\", \"stzh-ghettobox\"].includes(event.detail.component)) {\n      if (this.closeKey) {\n        Cookie.set(`${KEY_PREFIX_CLOSE}-${this.closeKey}`, Date.now().toString());\n      }\n    }\n  }\n\n  @Watch(\"showFromDate\")\n  showFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._showFromDate = newValue ? new Date(newValue) : null;\n    } else {\n      this._showFromDate = newValue;\n    }\n\n    let closedByCookie = false;\n\n    if (this.closeKey) {\n      const timeClosed = Cookie.get(`${KEY_PREFIX_CLOSE}-${this.closeKey}`);\n\n      if (\n        timeClosed && (\n          !this._showFromDate\n          || Number(timeClosed) >= this._showFromDate.getTime()\n        )\n      ) {\n        closedByCookie = true;\n      }\n    }\n\n    this.closedByCookie = closedByCookie;\n  }\n\n  @Watch(\"hideFromDate\")\n  hideFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._hideFromDate = newValue ? new Date(newValue) : null;\n    } else {\n      this._hideFromDate = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShowElement;\n\n  private closedByCookie: boolean = false;\n\n  componentWillLoad() {\n    this.showFromDateWatcher(this.showFromDate);\n    this.hideFromDateWatcher(this.hideFromDate);\n  }\n\n  render() {\n    const timeNow = Date.now();\n\n    return (\n      <Host hidden={\n        this._showFromDate && timeNow <= this._showFromDate.getTime()\n        || this._hideFromDate && timeNow >= this._hideFromDate.getTime()\n        || this.closedByCookie\n      }>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}