@oiz/stzh-components 2.11.0-beta1 → 2.11.1

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

@@ -1,2 +0,0 @@
-import{r as t,h as a,a as i,g as r}from"./p-c92165bd.js";const o='.sc-stzh-ratio-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-ratio-h{display:none}.sc-stzh-ratio-h *.sc-stzh-ratio,.sc-stzh-ratio-h *.sc-stzh-ratio::before,.sc-stzh-ratio-h *.sc-stzh-ratio::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-ratio-h .has-focus.sc-stzh-ratio{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.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:0.5625}.sc-stzh-ratio-h .sc-stzh-ratio-s>*{position:absolute;width:100%;height:100%;top:0;left: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:1.7777777778}[ratio="16:9"].sc-stzh-ratio-h{--ratio:0.5625}[ratio="16:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.7777777778}[ratio="1:1"].sc-stzh-ratio-h{--ratio:1}[ratio="1:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1}[ratio="21:9"].sc-stzh-ratio-h{--ratio:0.4285714286}[ratio="21:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:2.3333333333}[ratio="2:1"].sc-stzh-ratio-h{--ratio:0.5}[ratio="2:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:2}[ratio="3:2"].sc-stzh-ratio-h{--ratio:0.6666666667}[ratio="3:2"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.5}[ratio="4:3"].sc-stzh-ratio-h{--ratio:0.75}[ratio="4:3"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.3333333333}[ratio="5:4"].sc-stzh-ratio-h{--ratio:0.8}[ratio="5:4"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.25}@media screen and (min-width: 600px){[ratio-small="16:9"].sc-stzh-ratio-h{--ratio:0.5625}}@media screen and (min-width: 600px){[ratio-small="16:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.7777777778}}@media screen and (min-width: 600px){[ratio-small="1:1"].sc-stzh-ratio-h{--ratio:1}}@media screen and (min-width: 600px){[ratio-small="1:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1}}@media screen and (min-width: 600px){[ratio-small="21:9"].sc-stzh-ratio-h{--ratio:0.4285714286}}@media screen and (min-width: 600px){[ratio-small="21:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:2.3333333333}}@media screen and (min-width: 600px){[ratio-small="2:1"].sc-stzh-ratio-h{--ratio:0.5}}@media screen and (min-width: 600px){[ratio-small="2:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:2}}@media screen and (min-width: 600px){[ratio-small="3:2"].sc-stzh-ratio-h{--ratio:0.6666666667}}@media screen and (min-width: 600px){[ratio-small="3:2"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.5}}@media screen and (min-width: 600px){[ratio-small="4:3"].sc-stzh-ratio-h{--ratio:0.75}}@media screen and (min-width: 600px){[ratio-small="4:3"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.3333333333}}@media screen and (min-width: 600px){[ratio-small="5:4"].sc-stzh-ratio-h{--ratio:0.8}}@media screen and (min-width: 600px){[ratio-small="5:4"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.25}}@media screen and (min-width: 800px){[ratio-smallheader="16:9"].sc-stzh-ratio-h{--ratio:0.5625}}@media screen and (min-width: 800px){[ratio-smallheader="16:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.7777777778}}@media screen and (min-width: 800px){[ratio-smallheader="1:1"].sc-stzh-ratio-h{--ratio:1}}@media screen and (min-width: 800px){[ratio-smallheader="1:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1}}@media screen and (min-width: 800px){[ratio-smallheader="21:9"].sc-stzh-ratio-h{--ratio:0.4285714286}}@media screen and (min-width: 800px){[ratio-smallheader="21:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:2.3333333333}}@media screen and (min-width: 800px){[ratio-smallheader="2:1"].sc-stzh-ratio-h{--ratio:0.5}}@media screen and (min-width: 800px){[ratio-smallheader="2:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:2}}@media screen and (min-width: 800px){[ratio-smallheader="3:2"].sc-stzh-ratio-h{--ratio:0.6666666667}}@media screen and (min-width: 800px){[ratio-smallheader="3:2"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.5}}@media screen and (min-width: 800px){[ratio-smallheader="4:3"].sc-stzh-ratio-h{--ratio:0.75}}@media screen and (min-width: 800px){[ratio-smallheader="4:3"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.3333333333}}@media screen and (min-width: 800px){[ratio-smallheader="5:4"].sc-stzh-ratio-h{--ratio:0.8}}@media screen and (min-width: 800px){[ratio-smallheader="5:4"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.25}}@media screen and (min-width: 1024px){[ratio-medium="16:9"].sc-stzh-ratio-h{--ratio:0.5625}}@media screen and (min-width: 1024px){[ratio-medium="16:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.7777777778}}@media screen and (min-width: 1024px){[ratio-medium="1:1"].sc-stzh-ratio-h{--ratio:1}}@media screen and (min-width: 1024px){[ratio-medium="1:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1}}@media screen and (min-width: 1024px){[ratio-medium="21:9"].sc-stzh-ratio-h{--ratio:0.4285714286}}@media screen and (min-width: 1024px){[ratio-medium="21:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:2.3333333333}}@media screen and (min-width: 1024px){[ratio-medium="2:1"].sc-stzh-ratio-h{--ratio:0.5}}@media screen and (min-width: 1024px){[ratio-medium="2:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:2}}@media screen and (min-width: 1024px){[ratio-medium="3:2"].sc-stzh-ratio-h{--ratio:0.6666666667}}@media screen and (min-width: 1024px){[ratio-medium="3:2"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.5}}@media screen and (min-width: 1024px){[ratio-medium="4:3"].sc-stzh-ratio-h{--ratio:0.75}}@media screen and (min-width: 1024px){[ratio-medium="4:3"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.3333333333}}@media screen and (min-width: 1024px){[ratio-medium="5:4"].sc-stzh-ratio-h{--ratio:0.8}}@media screen and (min-width: 1024px){[ratio-medium="5:4"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.25}}@media screen and (min-width: 1260px){[ratio-large="16:9"].sc-stzh-ratio-h{--ratio:0.5625}}@media screen and (min-width: 1260px){[ratio-large="16:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.7777777778}}@media screen and (min-width: 1260px){[ratio-large="1:1"].sc-stzh-ratio-h{--ratio:1}}@media screen and (min-width: 1260px){[ratio-large="1:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1}}@media screen and (min-width: 1260px){[ratio-large="21:9"].sc-stzh-ratio-h{--ratio:0.4285714286}}@media screen and (min-width: 1260px){[ratio-large="21:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:2.3333333333}}@media screen and (min-width: 1260px){[ratio-large="2:1"].sc-stzh-ratio-h{--ratio:0.5}}@media screen and (min-width: 1260px){[ratio-large="2:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:2}}@media screen and (min-width: 1260px){[ratio-large="3:2"].sc-stzh-ratio-h{--ratio:0.6666666667}}@media screen and (min-width: 1260px){[ratio-large="3:2"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.5}}@media screen and (min-width: 1260px){[ratio-large="4:3"].sc-stzh-ratio-h{--ratio:0.75}}@media screen and (min-width: 1260px){[ratio-large="4:3"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.3333333333}}@media screen and (min-width: 1260px){[ratio-large="5:4"].sc-stzh-ratio-h{--ratio:0.8}}@media screen and (min-width: 1260px){[ratio-large="5:4"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.25}}@media screen and (min-width: 1440px){[ratio-ultra="16:9"].sc-stzh-ratio-h{--ratio:0.5625}}@media screen and (min-width: 1440px){[ratio-ultra="16:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.7777777778}}@media screen and (min-width: 1440px){[ratio-ultra="1:1"].sc-stzh-ratio-h{--ratio:1}}@media screen and (min-width: 1440px){[ratio-ultra="1:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1}}@media screen and (min-width: 1440px){[ratio-ultra="21:9"].sc-stzh-ratio-h{--ratio:0.4285714286}}@media screen and (min-width: 1440px){[ratio-ultra="21:9"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:2.3333333333}}@media screen and (min-width: 1440px){[ratio-ultra="2:1"].sc-stzh-ratio-h{--ratio:0.5}}@media screen and (min-width: 1440px){[ratio-ultra="2:1"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:2}}@media screen and (min-width: 1440px){[ratio-ultra="3:2"].sc-stzh-ratio-h{--ratio:0.6666666667}}@media screen and (min-width: 1440px){[ratio-ultra="3:2"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.5}}@media screen and (min-width: 1440px){[ratio-ultra="4:3"].sc-stzh-ratio-h{--ratio:0.75}}@media screen and (min-width: 1440px){[ratio-ultra="4:3"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.3333333333}}@media screen and (min-width: 1440px){[ratio-ultra="5:4"].sc-stzh-ratio-h{--ratio:0.8}}@media screen and (min-width: 1440px){[ratio-ultra="5:4"][portrait].sc-stzh-ratio-h:not([portrait=false]){--ratio:1.25}}.stzh-ratio.sc-stzh-ratio{position:relative;width:100%;padding-top:calc(var(--ratio) * 100%);background:var(--background-color)}';const s=class{constructor(a){t(this,a);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 a(i,null,a("div",{class:t},a("slot",null)))}get element(){return r(this)}};s.style=o;export{s as stzh_ratio};
-//# sourceMappingURL=p-c2fcd668.entry.js.map

package/dist/stzh-components/p-c2fcd668.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 in reverse (e.g. for 16:9 use `9 / 16`)\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: #{\n    nth(map-get($ratios, $ratioDefault), 2)\n    / nth(map-get($ratios, $ratioDefault), 1)\n  };\n\n  ::slotted(*) {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 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: #{\n    nth(map-get($ratios, $ratioDefault), 1)\n    / nth(map-get($ratios, $ratioDefault), 2)\n  };\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: #{$secondNr / $firstNr};\n        }\n      }\n\n      :host([ratio-#{$breakpoint}=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$firstNr / $secondNr};\n        }\n      }\n    } @else {\n      :host([ratio=\"#{$ratio}\"]) {\n        --ratio: #{$secondNr / $firstNr};\n      }\n\n      :host([ratio=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])) {\n        --ratio: #{$firstNr / $secondNr};\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  padding-top: calc(var(--ratio) * 100%);\n  background: var(--background-color);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop\n} 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() ratio: Layout.Ratio = \"16:9\";\n  /** Aspect ratio above small breakpoint */\n  @Prop() ratioSmall: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above medium breakpoint */\n  @Prop() ratioMedium: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above large breakpoint */\n  @Prop() ratioLarge: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above ultra breakpoint */\n  @Prop() 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":"yDAAA,MAAMA,EAAe,kiT,MCkBRC,EAAS,M,oCAEU,O,gBAEiB,U,iBAEC,U,gBAED,U,gBAEA,U,cAGF,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-cc10a5c5.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhProgressbarItemCss","StzhProgressbarItem","exports","this","onClick","event","_this","stzhClick","emit","component","originalEvent","onDottedClick","stzhDottedClick","class_1","prototype","componentDidRender","requestAnimationFrame","button","setAttribute","analyticsId","text","innerText","render","classes","first","last","passed","current","hide","dotted","icon","disabled","h","class","name","Host","role","ref","el","Fragment","step","label"],"sources":["src/components/stzh-progressbar-item/stzh-progressbar-item.scss?tag=stzh-progressbar-item&encapsulation=scoped","src/components/stzh-progressbar-item/stzh-progressbar-item.tsx"],"sourcesContent":[":host {\n}\n\n:host([hide]) {\n\tdisplay: none;\n}\n\n.stzh-progressbar-item {\n  text-align: center;\n\n  &__button {\n    appearance: none;\n    font-family: inherit;\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__button:hover &__number-block,\n  &__button:focus &__number-block {\n    color: $colorPrimaryHover;\n    border-color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n      border-color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorPrimary8;\n    }\n  }\n\n  &__button:hover &__label-block,\n  &__button:focus &__label-block {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* what we do here is:\n  add a gray line on the last element, which strikes through all previous ones,\n  add a blue line on the current step which covers all previous elements relative to itself\n  and add a white line on the first element, which gives you the illusion that it stopped. */\n\n  &__number-block {\n    @include font('heavy');\n    @include fontCurve('p1');\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    width: $progressbarItemSize;\n    height: $progressbarItemSize;\n    background-color: $colorWhite;\n    border: solid 1px $baseBorderColor;\n    border-radius: $progressbarItemSmallUp / 2;\n    text-align: center;\n    box-sizing: border-box;\n    color: $colorGrey55;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @include mq($from: small) {\n      width: $progressbarItemSmallUp;\n      height: $progressbarItemSmallUp;\n      margin-bottom: space('large');\n    }\n\n\t\t// set a line on every element, but hide it by default\n    &::before {\n      display: none;\n      content: '';\n      position: absolute;\n      top: 16px;\n      right: $progressbarItemSize - 1px;\n      width: 100vw;\n      height: 1px;\n      background-color: $baseBorderColor;\n      z-index: -2;\n      overflow: hidden;\n\n      @include mq($from: small) {\n        top: 20px;\n        right: $progressbarItemSmallUp - 1px;\n      }\n    }\n  }\n\n  &__number-block,\n  &__dotted {\n    &::after {\n      content: '';\n      z-index: 0;\n      position: absolute;\n      display: block;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      border-radius: $progressbarItemSmallUp / 2;\n      transition: background-color $baseTransitionAnimationSpeed;\n    }\n  }\n\n  &__label-block {\n    display: block;\n    font-size: 14px;\n    line-height: 1.28;\n    color: $colorGrey55;\n    padding: space('xxsmall') space('small');\n    letter-spacing: 0.01em;\n    transition: color $baseTransitionAnimationSpeed;\n\n    @include mq($to: small) {\n      @include visuallyhidden;\n    }\n  }\n\n  &__number,\n  &__icon,\n  &__user-icon,\n  &__dotted-icon {\n    z-index: 1;\n  }\n\n  &__icon,\n  &__user-icon,\n  &__dotted-icon {\n    --size: #{iconSize('xsmall')};\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: $colorPrimary;\n\n    @include highContrast() {\n      color: CanvasText;\n    }\n  }\n\n  &__user-icon {\n    --size: #{iconSize('small')};\n    color: currentColor;\n  }\n\n  &__dotted {\n    z-index: 1;\n    appearance: none;\n    font-family: inherit;\n    position: absolute;\n    top: 3px;\n    width: $progressbarItemDottedSize;\n    height: $progressbarItemDottedSize;\n    background-color: $colorWhite;\n    border: solid 1px $baseBorderColor;\n    border-radius: 50%;\n    cursor: pointer;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    &:hover,\n    &:focus {\n      border-color: $colorPrimaryHover;\n\n      @include highContrast() {\n        border-color: Highlight;\n      }\n    }\n\n    &:hover::after,\n    &:focus::after {\n      background-color: $colorPrimary8;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n\n    @include mq($from: small) {\n      top: 5px;\n      width: $progressbarItemDottedSizeSmallUp;\n      height: $progressbarItemDottedSizeSmallUp;\n    }\n  }\n\n  &__dotted:hover &__dotted-icon,\n  &__dotted:focus &__dotted-icon {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* First and Last */\n\n  &--first &__number-block,\n  &--last &__number-block {\n    &::before {\n      display: block\n    }\n  }\n\n  /* First */\n\n  &--first {\n    position: relative;\n  }\n\n  &--first &__dotted {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  /* Last */\n\n  &--last &__dotted {\n    // position the dots based on the width divided by the elements minus half of itself\n    right: calc((100% / var(--steps)) - (#{$progressbarItemDottedSize / 2}));\n\n    @include mq($from: small) {\n      right: calc((100% / var(--steps)) - (#{$progressbarItemDottedSizeSmallUp / 2}));\n    }\n  }\n\n  /* Passed */\n\n  &--passed &__label-block {\n\t\t@include font('heavy');\n    color: $colorPrimary;\n  }\n\n  &--passed &__number-block {\n    background-color: $colorWhite;\n    border: solid 1px $colorPrimary;\n\n    @include highContrast() {\n      background-color: Canvas;\n      border-color: CanvasText;\n    }\n  }\n\n  &--passed &__button:hover &__number-block,\n  &--passed &__button:focus &__number-block {\n    @include highContrast() {\n      border-color: Highlight;\n    }\n  }\n\n  &--passed &__number-block,\n  &--passed &__button:hover &__number-block,\n  &--passed &__button:focus &__number-block {\n    color: transparent;\n\n    @include highContrast() {\n      color: Canvas;\n    }\n  }\n\n  &--passed &__user-icon {\n    color: $colorPrimary;\n  }\n\n  &--passed &__button:hover &__user-icon,\n  &--passed &__button:focus &__user-icon {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* Current */\n\n  &--current &__label-block {\n    @include font('heavy');\n    color: $colorPrimary;\n\n    @include highContrast() {\n      color: SelectedItem;\n    }\n\n    &:hover {\n      text-decoration-line: none;\n    }\n  }\n\n  &--current &__number-block {\n    background-color: $colorPrimary;\n    border: solid 1px $colorPrimary;\n    color: $colorWhite;\n\n    @include highContrast() {\n      color: SelectedItem;\n      border-color: SelectedItem;\n      background-color: Canvas;\n    }\n\n    // make line blue (see desc)\n    &::before {\n      display: block;\n      background-color: $colorPrimary;\n      z-index: -1;\n\n      @include highContrast() {\n        background-color: CanvasText;\n      }\n    }\n  }\n\n  &--current &__button:hover &__number-block,\n  &--current &__button:focus &__number-block {\n    color: $colorWhite;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorPrimaryHover;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n  }\n\n  &--current &__user-icon {\n    @include highContrast() {\n      color: SelectedItem;\n    }\n  }\n\n  &--current &__button:hover &__icon,\n  &--current &__button:focus &__icon,\n  &--current &__button:hover &__user-icon,\n  &--current &__button:focus &__user-icon {\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* Dotted */\n\n  &--dotted#{&}--first &__number-block {\n    margin-bottom: 0;\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--dotted#{&}--first &__button {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  // hide number block behind dotted element\n  &--dotted#{&}--first &__number-block {\n    position: relative;\n    z-index: 0;\n    top: 5px;\n    width: $progressbarItemDottedSize;\n    height: $progressbarItemDottedSize;\n    border: none;\n    background-color: transparent;\n\n    // change dimensions to be still hidden\n    @include mq($from: small) {\n      top: 8px;\n      width: $progressbarItemDottedSizeSmallUp;\n      height: $progressbarItemDottedSizeSmallUp;\n    }\n\n    // realign white line\n    &::before {\n      top: 12px;\n      right: 26px;\n\n      @include mq($from: small) {\n        top: 13px;\n        right: 30px;\n      }\n    }\n  }\n\n  &--dotted#{&}--first &__label-block {\n\t\tdisplay: none;\n  }\n\n  // first child overwrite white line (see desc) */\n  &--first &__number-block {\n    &::before {\n      background-color: $colorWhite;\n      z-index: 1;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n  }\n\n  /* Disabled */\n\n  // &--is-disabled &__number-block {\n  //   background-color: $baseBorderColor;\n  // }\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__button:hover &__number-block,\n  &--is-disabled &__button:focus &__number-block {\n    color: $colorGrey55;\n    border-color: $baseBorderColor;\n\n    @include highContrast() {\n      color: GrayText;\n      border-color: GrayText;\n    }\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--is-disabled &__button:hover &__label-block,\n  &--is-disabled &__button:focus &__label-block {\n    color: $colorGrey55;\n\n    @include highContrast() {\n      color: GrayText;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Fragment,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhProgressbarItemClickEvent,\n  StzhProgressbarItemDottedClickEvent\n} from '../../index';\n\n/**\n * @slot - Slot for label (or use label prop)\n */\n@Component({\n  tag: \"stzh-progressbar-item\",\n  styleUrl: \"stzh-progressbar-item.scss\",\n  scoped: true\n})\nexport class StzhProgressbarItem {\n  @Prop({ reflect: true }) label: string;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Prop({ reflect: true }) first: boolean = false;\n\n  @Prop({ reflect: true }) last: boolean = false;\n\n  @Prop({ reflect: true }) passed: boolean = false;\n\n  @Prop({ reflect: true }) current: boolean = false;\n\n  @Prop({ reflect: true }) hide: boolean = false;\n\n  @Prop({ reflect: true }) dotted: boolean = false;\n\n  @Prop({ reflect: true }) step: number = 1;\n\n  @Prop({ reflect: true }) icon: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhProgressbarItemClickEvent>;\n\n  /** Dotted click event */\n  @Event() stzhDottedClick: EventEmitter<StzhProgressbarItemDottedClickEvent>;\n\n  @Element() element: HTMLStzhProgressbarItemElement;\n\n  private button: HTMLButtonElement;\n  private text: HTMLElement;\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-progressbar-item\",\n      originalEvent: event\n    });\n  }\n\n  private onDottedClick = (event: MouseEvent) => {\n    this.stzhDottedClick.emit({\n      component: \"stzh-progressbar-item\",\n      originalEvent: event\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-progressbar-item\": true,\n      \"stzh-progressbar-item--first\": this.first,\n      \"stzh-progressbar-item--last\": this.last,\n      \"stzh-progressbar-item--passed\": this.passed,\n      \"stzh-progressbar-item--current\": this.current,\n      \"stzh-progressbar-item--hide\": this.hide,\n      \"stzh-progressbar-item--dotted\": this.dotted,\n      \"stzh-progressbar-item--has-icon\": !!this.icon,\n      \"stzh-progressbar-item--is-disabled\": this.disabled\n    };\n\n    const dotted = (\n      <button\n        class=\"stzh-progressbar-item__dotted\"\n        onClick={this.onDottedClick}\n      >\n        <stzh-icon class=\"stzh-progressbar-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n      </button>\n    );\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.last && this.dotted && dotted}\n          <button\n            ref={(el) => (this.button = el as HTMLButtonElement)}\n            class=\"stzh-progressbar-item__button\"\n            aria-pressed={this.current ? \"true\" : \"false\"}\n            disabled={(this.dotted && this.first) || this.disabled}\n            onClick={this.onClick}\n          >\n            <span class=\"stzh-progressbar-item__number-block\">\n              {this.icon\n                ?\n                <stzh-icon class=\"stzh-progressbar-item__user-icon\" name={this.icon}></stzh-icon>\n                :\n                <Fragment>\n                  <span class=\"stzh-progressbar-item__number\">{this.step}</span>\n                  {this.passed &&\n                    <stzh-icon class=\"stzh-progressbar-item__icon\" name=\"checkmark\"></stzh-icon>\n                  }\n                </Fragment>\n              }\n            </span>\n            <span\n              ref={(el) => (this.text = el as HTMLElement)}\n              class=\"stzh-progressbar-item__label-block\"\n            >\n              {this.label ? this.label : <slot></slot>}\n            </span>\n          </button>\n          {this.first && this.dotted && dotted}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0KAAA,IAAMA,EAAyB,++qB,ICwBlBC,EAAmBC,EAAA,mC,yHAuCtBC,KAAAC,QAAU,SAACC,GACjBC,EAAKC,UAAUC,KAAK,CAClBC,UAAW,wBACXC,cAAeL,G,EAIXF,KAAAQ,cAAgB,SAACN,GACvBC,EAAKM,gBAAgBJ,KAAK,CACxBC,UAAW,wBACXC,cAAeL,G,qCA9C0B,M,WAEH,M,UAED,M,YAEE,M,aAEC,M,UAEH,M,YAEE,M,UAEH,E,UAEA,G,2BAkCxCQ,EAAAC,UAAAC,mBAAA,eAAAT,EAAAH,KACEa,uBAAsB,WACpBV,EAAKW,OAAOC,aAAa,cAAeZ,EAAKa,aAAeb,EAAKc,KAAKC,U,KAI1ER,EAAAC,UAAAQ,OAAA,eAAAhB,EAAAH,KACE,IAAMoB,EAAU,CACd,wBAAyB,KACzB,+BAAgCpB,KAAKqB,MACrC,8BAA+BrB,KAAKsB,KACpC,gCAAiCtB,KAAKuB,OACtC,iCAAkCvB,KAAKwB,QACvC,8BAA+BxB,KAAKyB,KACpC,gCAAiCzB,KAAK0B,OACtC,oCAAqC1B,KAAK2B,KAC1C,qCAAsC3B,KAAK4B,UAG7C,IAAMF,EACJG,EAAA,UACEC,MAAM,gCACN7B,QAASD,KAAKQ,eAEdqB,EAAA,aAAWC,MAAM,qCAAqCC,KAAK,qBAI/D,OACEF,EAACG,EAAI,CAACC,KAAK,YACTJ,EAAA,OAAKC,MAAOV,GACTpB,KAAKsB,MAAQtB,KAAK0B,QAAUA,EAC7BG,EAAA,UACEK,IAAK,SAACC,GAAE,OAAMhC,EAAKW,OAASqB,CAApB,EACRL,MAAM,gCAA+B,eACvB9B,KAAKwB,QAAU,OAAS,QACtCI,SAAW5B,KAAK0B,QAAU1B,KAAKqB,OAAUrB,KAAK4B,SAC9C3B,QAASD,KAAKC,SAEd4B,EAAA,QAAMC,MAAM,uCACT9B,KAAK2B,KAEJE,EAAA,aAAWC,MAAM,mCAAmCC,KAAM/B,KAAK2B,OAE/DE,EAACO,EAAQ,KACPP,EAAA,QAAMC,MAAM,iCAAiC9B,KAAKqC,MACjDrC,KAAKuB,QACJM,EAAA,aAAWC,MAAM,8BAA8BC,KAAK,gBAK5DF,EAAA,QACEK,IAAK,SAACC,GAAE,OAAMhC,EAAKc,KAAOkB,CAAlB,EACRL,MAAM,sCAEL9B,KAAKsC,MAAQtC,KAAKsC,MAAQT,EAAA,eAG9B7B,KAAKqB,OAASrB,KAAK0B,QAAUA,G,4HAhHR,I"}

package/dist/stzh-components/p-d18665b6.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-290fcb28.system.js","./p-f6588a0f.system.js"],(function(e){"use strict";var t,i,s,o,n;return{setters:[function(e){t=e.r;i=e.h;s=e.a;o=e.g},function(e){n=e.p}],execute:function(){var r=":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--show-display:block;--hide-display:none;display:var(--hide-display)}:host([mikro]){display:var(--show-display)}:host([mikro=false]){display:var(--hide-display)}@media screen and (min-width: 600px){:host([small]){display:var(--show-display)}}@media screen and (min-width: 600px){:host([small=false]){display:var(--hide-display)}}@media screen and (min-width: 1024px){:host([medium]){display:var(--show-display)}}@media screen and (min-width: 1024px){:host([medium=false]){display:var(--hide-display)}}@media screen and (min-width: 1260px){:host([large]){display:var(--show-display)}}@media screen and (min-width: 1260px){:host([large=false]){display:var(--hide-display)}}@media screen and (min-width: 1440px){:host([ultra]){display:var(--show-display)}}@media screen and (min-width: 1440px){:host([ultra=false]){display:var(--hide-display)}}";var a=e("stzh_show",function(){function e(e){t(this,e);this.mikro=undefined;this.small=undefined;this.medium=undefined;this.large=undefined;this.ultra=undefined;this.hideFromDate=undefined}e.prototype.hideFromDateWatcher=function(e){if(typeof e==="string"){this._hideFromDate=n(e)}else{this._hideFromDate=e}};e.prototype.componentWillLoad=function(){this.hideFromDateWatcher(this.hideFromDate)};e.prototype.render=function(){return i(s,{hidden:this._hideFromDate&&Date.now()>=this._hideFromDate.getTime()},i("slot",null))};Object.defineProperty(e.prototype,"element",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{hideFromDate:["hideFromDateWatcher"]}},enumerable:false,configurable:true});return e}());a.style=r}}}));
-//# sourceMappingURL=p-d18665b6.system.entry.js.map

package/dist/stzh-components/p-d18665b6.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhShowCss","StzhShow","exports","class_1","prototype","hideFromDateWatcher","newValue","this","_hideFromDate","parseISODate","componentWillLoad","hideFromDate","render","h","Host","hidden","Date","now","getTime"],"sources":["src/components/stzh-show/stzh-show.scss?tag=stzh-show&encapsulation=shadow","src/components/stzh-show/stzh-show.tsx"],"sourcesContent":["/**\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 */\n\n:host {\n  --show-display: block;\n  --hide-display: none;\n\n  display: var(--hide-display);\n}\n\n/* Mikro */\n\n:host([mikro]) {\n  display: var(--show-display);\n}\n\n:host([mikro=\"false\"]) {\n  display: var(--hide-display);\n}\n\n/* Small */\n\n:host([small]) {\n  @include mq($from: small) {\n    display: var(--show-display);\n  }\n}\n\n:host([small=\"false\"]) {\n  @include mq($from: small) {\n    display: var(--hide-display);\n  }\n}\n\n/* Medium */\n\n:host([medium]) {\n  @include mq($from: medium) {\n    display: var(--show-display);\n  }\n}\n\n:host([medium=\"false\"]) {\n  @include mq($from: medium) {\n    display: var(--hide-display);\n  }\n}\n\n/* Large */\n\n:host([large]) {\n  @include mq($from: large) {\n    display: var(--show-display);\n  }\n}\n\n:host([large=\"false\"]) {\n  @include mq($from: large) {\n    display: var(--hide-display);\n  }\n}\n\n/* Ultra */\n\n:host([ultra]) {\n  @include mq($from: ultra) {\n    display: var(--show-display);\n  }\n}\n\n:host([ultra=\"false\"]) {\n  @include mq($from: ultra) {\n    display: var(--hide-display);\n  }\n}","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch\n} from \"@stencil/core\";\n\nimport { parseISODate } from \"../../utils/date-utils\";\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() mikro: boolean;\n\n  /** Small */\n  @Prop() small: boolean;\n\n  /** Medium */\n  @Prop() medium: boolean;\n\n  /** Large */\n  @Prop() large: boolean;\n\n  /** Ultra */\n  @Prop() ultra: boolean;\n\n  /** Hide from date */\n  @Prop() hideFromDate: Date | string;\n  private _hideFromDate: Date;\n\n  @Watch(\"hideFromDate\")\n  hideFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._hideFromDate = parseISODate(newValue);\n    } else {\n      this._hideFromDate = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShowElement;\n\n  componentWillLoad() {\n    this.hideFromDateWatcher(this.hideFromDate);\n  }\n\n  render() {\n    return (\n      <Host hidden={this._hideFromDate && Date.now() >= this._hideFromDate.getTime()}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wMAAA,IAAMA,EAAc,qhD,ICmBPC,EAAQC,EAAA,uB,8JAqBnBC,EAAAC,UAAAC,oBAAA,SAAoBC,GAClB,UAAWA,IAAa,SAAU,CAChCC,KAAKC,cAAgBC,EAAaH,E,KAC7B,CACLC,KAAKC,cAAgBF,C,GAMzBH,EAAAC,UAAAM,kBAAA,WACEH,KAAKF,oBAAoBE,KAAKI,a,EAGhCR,EAAAC,UAAAQ,OAAA,WACE,OACEC,EAACC,EAAI,CAACC,OAAQR,KAAKC,eAAiBQ,KAAKC,OAASV,KAAKC,cAAcU,WACnEL,EAAA,a,kQAtCa,I"}