@oiz/stzh-components 2.11.0-beta1 → 2.11.0

package/dist/cjs/stzh-popover.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-45029280.js');
 const arrow = require('./arrow-9e2d5d66.js');
 const focusTrap_esm = require('./focus-trap.esm-cd484900.js');
-const utils = require('./utils-77bc0ea1.js');
+const utils = require('./utils-01c0bbdd.js');
 const mediaUtils = require('./media-utils-5aabaff9.js');
 const eventUtils = require('./event-utils-20e7b8b1.js');
 const animationUtils = require('./animation-utils-925ee0e0.js');

package/dist/cjs/stzh-print.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-45029280.js');
-const utils = require('./utils-77bc0ea1.js');
+const utils = require('./utils-01c0bbdd.js');
 require('./string-utils-5dd70320.js');
 
 const stzhPrintCss = ":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{display:contents}@media print{:host{display:none}}.stzh-print{display:contents}";

package/dist/cjs/stzh-progressbar-item.cjs.entry.js

@@ -14,7 +14,8 @@ const StzhProgressbarItem = class {
     this.onClick = (event) => {
       this.stzhClick.emit({
         component: "stzh-progressbar-item",
-        originalEvent: event
+        originalEvent: event,
+        index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),
       });
     };
     this.onDottedClick = (event) => {

package/dist/cjs/stzh-progressbar-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-progressbar-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,sBAAsB,GAAG,k/qBAAk/qB;;MCwBpgrB,mBAAmB;;;;;IAuCtB,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,uBAAuB;QAClC,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAA;IAEO,kBAAa,GAAG,CAAC,KAAiB;MACxC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;QACxB,SAAS,EAAE,uBAAuB;QAClC,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAA;;oBAhD4C,KAAK;iBAER,KAAK;gBAEN,KAAK;kBAEH,KAAK;mBAEJ,KAAK;gBAER,KAAK;kBAEH,KAAK;gBAER,CAAC;gBAED,EAAE;;;EAkC1C,kBAAkB;IAChB,qBAAqB,CAAC;MACpB,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAClF,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,uBAAuB,EAAE,IAAI;MAC7B,8BAA8B,EAAE,IAAI,CAAC,KAAK;MAC1C,6BAA6B,EAAE,IAAI,CAAC,IAAI;MACxC,+BAA+B,EAAE,IAAI,CAAC,MAAM;MAC5C,gCAAgC,EAAE,IAAI,CAAC,OAAO;MAC9C,6BAA6B,EAAE,IAAI,CAAC,IAAI;MACxC,+BAA+B,EAAE,IAAI,CAAC,MAAM;MAC5C,iCAAiC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;MAC9C,oCAAoC,EAAE,IAAI,CAAC,QAAQ;KACpD,CAAC;IAEF,MAAM,MAAM,IACVA,oBACE,KAAK,EAAC,+BAA+B,EACrC,OAAO,EAAE,IAAI,CAAC,aAAa,IAE3BA,uBAAW,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAC,iBAAiB,GAAa,CAClF,CACV,CAAC;IAEF,QACEA,QAACC,UAAI,IAAC,IAAI,EAAC,UAAU,IACnBD,iBAAK,KAAK,EAAE,OAAO,IAChB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,MAAM,EACnCA,oBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EACpD,KAAK,EAAC,+BAA+B,kBACvB,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ,EACtD,OAAO,EAAE,IAAI,CAAC,OAAO,IAErBA,kBAAM,KAAK,EAAC,qCAAqC,IAC9C,IAAI,CAAC,IAAI;;QAERA,uBAAW,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAc;;QAEjFA,QAACE,cAAQ,QACPF,kBAAM,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,IAAI,CAAQ,EAC7D,IAAI,CAAC,MAAM;UACVA,uBAAW,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,WAAW,GAAa,CAErE,CAER,EACPA,kBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAiB,CAAC,EAC5C,KAAK,EAAC,oCAAoC,IAEzC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAGA,qBAAa,CACnC,CACA,EACR,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,IAAI,MAAM,CAChC,CACD,EACP;GACH;;;;;;;","names":["h","Host","Fragment"],"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"],"version":3}
+{"file":"stzh-progressbar-item.entry.cjs.js","mappings":"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","names":["h","Host","Fragment"],"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      index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\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"],"version":3}

package/dist/cjs/stzh-readspeaker.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-45029280.js');
-const utils = require('./utils-77bc0ea1.js');
+const utils = require('./utils-01c0bbdd.js');
 require('./string-utils-5dd70320.js');
 
 const stzhReadspeakerCss = ":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}.stzh-readspeaker{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;}.stzh-readspeaker[hidden]{display:none}.stzh-readspeaker *,.stzh-readspeaker *::before,.stzh-readspeaker *::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)}.stzh-readspeaker .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.stzh-readspeaker .stzh-fylingfocus-focused{outline-style:none !important}.stzh-readspeaker .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}.stzh-readspeaker .rsbtn_play{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-readspeaker .rsbtn_classic.rsexpanded .rsbtn_exp.rsimg{float:left;padding-bottom:0;-webkit-box-shadow:var(--stzh-box-shadow-popover);box-shadow:var(--stzh-box-shadow-popover)}.rsbtn_classic.rsexpanded{position:absolute;max-width:100%;z-index:var(--stzh-z-index-sticky)}.rsbtn_classic.rsexpanded,.rsbtn_classic.rsexpanded *,.rsbtn_classic.rsexpanded *::after,.rsbtn_classic.rsexpanded *::before{-webkit-box-sizing:initial;box-sizing:initial}.rsbtn_classic.rsexpanded .rsbtn_playerarea{padding:0.625rem;border:none}.rsbtn_classic.rsexpanded .rsbtn_closer.rsimg{right:0.625rem;top:0.625rem}.rsbtn_classic.rsexpanded .rsbtn_settings .rsbtn_btnlabel.rsimg,.rsbtn_classic.rsexpanded .rsbtn_dl .rsbtn_btnlabel,.rsbtn_classic.rsexpanded .rsbtn_powered .rsbtn_btnlabel{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);height:auto}.rsbtn_classic.rsexpanded .rsbtn_bottomlinks{margin-top:0.3125rem}.rsbtn_classic.rsexpanded .rsbtn_topbar>*,.rsbtn_classic.rsexpanded .rsbtn_exp.rsimg .rsbtn_icon,.rsbtn_classic.rsexpanded .rsbtn_exp.rsimg .rsbtn_stop,.rsbtn_classic.rsexpanded .rsbtn_exp.rsimg .rsbtn_pause,.rsbtn_classic.rsexpanded .rsbtn_exp.rsimg .rsbtn_volume,.rsbtn_classic.rsexpanded .rsbtn_closer,.rsbtn_classic.rsexpanded .rsbtn_progress_container.rsimg{border:0.375rem solid var(--stzh-color-grey13);border-radius:0.3125rem}.rsbtn_classic.rsexpanded .rsbtn_exp.rsimg .rsbtn_icon{border:0.3125rem solid var(--stzh-color-grey13)}.rsbtn_classic.rsexpanded .rsbtn_progress_container.rsimg{border:0.4375rem solid var(--stzh-color-grey13)}.rsbtn_classic.rsexpanded .rsbtn_topbar{margin-right:2.5rem}.rsbtn_classic.rspopup.rscompact{z-index:var(--stzh-z-index-sticky);-webkit-box-shadow:var(--stzh-box-shadow-popover);box-shadow:var(--stzh-box-shadow-popover);border:none;padding:0.625rem}.rsbtn_classic.rspopup.rscompact .rsbtn_play{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:1.25rem;height:1.25rem}.rsbtn_classic.rspopup.rscompact .rsbtn_play .rsbtn_left,.rsbtn_classic.rspopup.rscompact .rsbtn_play .rsbtn_right{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.rsbtn_classic.rspopup.rscompact .rsbtn_exp .rsbtn_separator{height:0.0625rem}";

package/dist/cjs/stzh-row.cjs.entry.js

@@ -10,10 +10,10 @@ const StzhRow = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.span = 12;
-    this.spanSmall = 0;
-    this.spanMedium = 0;
-    this.spanLarge = 0;
-    this.spanUltra = 0;
+    this.spanSmall = undefined;
+    this.spanMedium = undefined;
+    this.spanLarge = undefined;
+    this.spanUltra = undefined;
     this.justify = "start";
     this.items = "start";
     this.content = "start";

package/dist/cjs/stzh-row.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-row.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,20VAA20V;;MCiBj1V,OAAO;;;gBAEK,EAAE;qBAEG,CAAC;sBAEA,CAAC;qBAEF,CAAC;qBAED,CAAC;mBAGsB,OAAO;iBAGX,OAAO;mBAGH,OAAO;;EAE1D,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBACE,KAAK,EAAE;QACL,UAAU,EAAE,IAAI;QAChB,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACrD,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;QAC/C,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;OACtD,IAEDA,qBAAa,CACT,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/stzh-row/stzh-row.scss?tag=stzh-row&encapsulation=shadow","src/components/stzh-row/stzh-row.tsx"],"sourcesContent":[":host {\n  width: 100%;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"])\n      ::slotted(stzh-cell:not([span-#{$breakpoint}])) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{100% / ($gridCells / $i)};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"])\n      ::slotted(stzh-cell:not([span])) {\n        --cell-width: #{100% / ($gridCells / $i)};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-row {\n  display: flex;\n\tflex-wrap: wrap;\n\tjustify-content: flex-start;\n  margin-left: calc(#{$gridGutter} / -2);\n  margin-right: calc(#{$gridGutter} / -2);\n\n  @include mq($from: small) {\n    margin-left: calc(#{$gridGutterSmall} / -2);\n    margin-right: calc(#{$gridGutterSmall} / -2);\n  }\n\n  @include mq($from: medium) {\n    margin-left: calc(#{$gridGutterMedium} / -2);\n    margin-right: calc(#{$gridGutterMedium} / -2);\n  }\n\n  /* Justify content variants */\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n\n  /* Align content variants */\n\n  &--content-end {\n    align-content: flex-end;\n  }\n\n  &--content-center {\n    align-content: center;\n  }\n\n  &--content-between {\n    align-content: space-between;\n  }\n\n  &--content-around {\n    align-content: space-around;\n  }\n\n  &--content-evenly {\n    align-content: space-evenly;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-cell` elements\n */\n@Component({\n  tag: \"stzh-row\",\n  styleUrl: \"stzh-row.scss\",\n  shadow: true\n})\nexport class StzhRow {\n  /** Default span of each cell */\n  @Prop() span: number = 12;\n  /** Default span of each cell above small breakpoint */\n  @Prop() spanSmall: number = 0;\n  /** Default span of each cell above medium breakpoint */\n  @Prop() spanMedium: number = 0;\n  /** Default span of each cell above large breakpoint */\n  @Prop() spanLarge: number = 0;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop() spanUltra: number = 0;\n\n  /** Controlling how cells are positioned along a container's main axis */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Utilities for controlling how rows are positioned in multi-row flex containers. */\n  @Prop({ reflect: true }) content: Layout.Justify = \"start\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-row\": true,\n            [`stzh-row--justify-${this.justify}`]: !!this.justify,\n            [`stzh-row--items-${this.items}`]: !!this.items,\n            [`stzh-row--content-${this.content}`]: !!this.content\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-row.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,20VAA20V;;MCiBj1V,OAAO;;;gBAEsB,EAAE;;;;;mBAWS,OAAO;iBAGX,OAAO;mBAGH,OAAO;;EAE1D,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBACE,KAAK,EAAE;QACL,UAAU,EAAE,IAAI;QAChB,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACrD,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;QAC/C,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;OACtD,IAEDA,qBAAa,CACT,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/stzh-row/stzh-row.scss?tag=stzh-row&encapsulation=shadow","src/components/stzh-row/stzh-row.tsx"],"sourcesContent":[":host {\n  width: 100%;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"])\n      ::slotted(stzh-cell:not([span-#{$breakpoint}])) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{100% / ($gridCells / $i)};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"])\n      ::slotted(stzh-cell:not([span])) {\n        --cell-width: #{100% / ($gridCells / $i)};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-row {\n  display: flex;\n\tflex-wrap: wrap;\n\tjustify-content: flex-start;\n  margin-left: calc(#{$gridGutter} / -2);\n  margin-right: calc(#{$gridGutter} / -2);\n\n  @include mq($from: small) {\n    margin-left: calc(#{$gridGutterSmall} / -2);\n    margin-right: calc(#{$gridGutterSmall} / -2);\n  }\n\n  @include mq($from: medium) {\n    margin-left: calc(#{$gridGutterMedium} / -2);\n    margin-right: calc(#{$gridGutterMedium} / -2);\n  }\n\n  /* Justify content variants */\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n\n  /* Align content variants */\n\n  &--content-end {\n    align-content: flex-end;\n  }\n\n  &--content-center {\n    align-content: center;\n  }\n\n  &--content-between {\n    align-content: space-between;\n  }\n\n  &--content-around {\n    align-content: space-around;\n  }\n\n  &--content-evenly {\n    align-content: space-evenly;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-cell` elements\n */\n@Component({\n  tag: \"stzh-row\",\n  styleUrl: \"stzh-row.scss\",\n  shadow: true\n})\nexport class StzhRow {\n  /** Default span of each cell */\n  @Prop({ reflect: true }) span: number = 12;\n  /** Default span of each cell above small breakpoint */\n  @Prop({ reflect: true }) spanSmall: number;\n  /** Default span of each cell above medium breakpoint */\n  @Prop({ reflect: true }) spanMedium: number;\n  /** Default span of each cell above large breakpoint */\n  @Prop({ reflect: true }) spanLarge: number;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop({ reflect: true }) spanUltra: number;\n\n  /** Controlling how cells are positioned along a container's main axis */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Utilities for controlling how rows are positioned in multi-row flex containers. */\n  @Prop({ reflect: true }) content: Layout.Justify = \"start\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-row\": true,\n            [`stzh-row--justify-${this.justify}`]: !!this.justify,\n            [`stzh-row--items-${this.items}`]: !!this.items,\n            [`stzh-row--content-${this.content}`]: !!this.content\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/stzh-scrollup.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-45029280.js');
-const utils = require('./utils-77bc0ea1.js');
+const utils = require('./utils-01c0bbdd.js');
 require('./string-utils-5dd70320.js');
 
 const stzhScrollupCss = ":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{display:contents}@media print{:host{display:none}}.stzh-scrollup{display:contents}";

package/dist/cjs/stzh-share.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-45029280.js');
-const utils = require('./utils-77bc0ea1.js');
+const utils = require('./utils-01c0bbdd.js');
 const stringUtils = require('./string-utils-5dd70320.js');
 
 const stzhShareCss = ".sc-stzh-share-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-share-h{display:none}.sc-stzh-share-h *.sc-stzh-share,.sc-stzh-share-h *.sc-stzh-share::before,.sc-stzh-share-h *.sc-stzh-share::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-share-h .has-focus.sc-stzh-share{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-share-h .stzh-fylingfocus-focused.sc-stzh-share{outline-style:none !important}.sc-stzh-share-h .stzh-fylingfocus-focused.sc-stzh-share::-moz-focus-inner{border:0 !important}.stzh-share__list.sc-stzh-share{list-style:none;margin:0;padding:0;display:-ms-flexbox;display:flex}.stzh-share__item.sc-stzh-share:not(:last-child){margin-right:var(--stzh-space-small)}.stzh-share__icon.sc-stzh-share{--size:var(--stzh-icon-size-xsmall)}.stzh-share__button.sc-stzh-share{color:var(--stzh-color-white);border-radius:var(--stzh-button-border-radius);display:grid;place-items:center;width:2.875rem;height:1.625rem}.stzh-share__button.is-facebook.sc-stzh-share{background-color:#3b5998}.stzh-share__button.is-facebook.sc-stzh-share:hover{background-color:#23355B}.stzh-share__button.is-twitter.sc-stzh-share{background-color:#1da1f2}.stzh-share__button.is-twitter.sc-stzh-share:hover{background-color:#116091}.stzh-share__button.is-linkedin.sc-stzh-share{background-color:#1485BD}.stzh-share__button.is-linkedin.sc-stzh-share:hover{background-color:#0C4F71}.stzh-share__button.is-xing.sc-stzh-share{background-color:#0E7574}.stzh-share__button.is-xing.sc-stzh-share:hover{background-color:#084645}.stzh-share__button.is-mail.sc-stzh-share{background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-share__button.is-mail.sc-stzh-share:hover{background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}";

package/dist/cjs/stzh-space.cjs.entry.js

@@ -10,11 +10,11 @@ const StzhSpace = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.curve = "none";
-    this.size = "inherit";
-    this.sizeSmall = "inherit";
-    this.sizeMedium = "inherit";
-    this.sizeLarge = "inherit";
-    this.sizeUltra = "inherit";
+    this.size = undefined;
+    this.sizeSmall = undefined;
+    this.sizeMedium = undefined;
+    this.sizeLarge = undefined;
+    this.sizeUltra = undefined;
     this.justify = "start";
     this.items = "start";
     this.around = false;

package/dist/cjs/stzh-space.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-space.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,ssaAAssa;;MCiB9sa,SAAS;;;iBAEU,MAAM;gBAGR,SAAS;qBAEJ,SAAS;sBAER,SAAS;qBAEV,SAAS;qBAET,SAAS;mBAGR,OAAO;iBAGX,OAAO;kBAGM,KAAK;kBAG8D,MAAM;;EAEpH,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBACE,KAAK,EAAE;QACL,YAAY,EAAE,IAAI;QAClB,uBAAuB,EAAE,IAAI,CAAC,MAAM;QACpC,CAAC,uBAAuB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACvD,CAAC,qBAAqB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;OAClD,IAEDA,qBAAa,CACT,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/stzh-space/stzh-space.scss?tag=stzh-space&encapsulation=shadow","src/components/stzh-space/stzh-space.tsx"],"sourcesContent":[":host {\n  --space: #{space()};\n  --around: 0;\n\n  display: flex;\n\n  ::slotted(*) {\n    // fix IE11 not wrapping text\n    max-width: 100%;\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  ::slotted(stzh-vspace),\n  ::slotted(stzh-hspace),\n  ::slotted(stzh-row),\n  ::slotted(stzh-container),\n  ::slotted(stzh-section) {\n    align-self: stretch;\n    flex-grow: 1;\n  }\n}\n\n:host(:empty) {\n  --around: 1;\n\n  width: var(--space);\n  height: var(--space);\n}\n\n:host([around]:not([around=\"false\"])) {\n  --around: 1;\n}\n\n/* Border variants */\n\n:host([border=\"top\"]),\n:host([border=\"top-bottom\"]) {\n  border-top: 1px solid $baseBorderColor;\n}\n\n:host([border=\"bottom\"]),\n:host([border=\"top-bottom\"]) {\n  border-bottom: 1px solid $baseBorderColor;\n}\n\n:host([border=\"left\"]),\n:host([border=\"left-right\"]) {\n  border-left: 1px solid $baseBorderColor;\n}\n\n:host([border=\"right\"]),\n:host([border=\"left-right\"]) {\n  border-right: 1px solid $baseBorderColor;\n}\n\n/* Space curve variant */\n\n@each $spaceCurve, $value in $spaceCurves {\n  $defaultSize: map-get($value, 'size');\n  $breakpointSizes: map-get($value, 'sizes');\n\n  // :host([curve=\"#{$spaceCurve}\"]) > .stzh-vspace {\n  :host([curve=\"#{$spaceCurve}\"]) {\n    --space: #{space($defaultSize)};\n\n    @each $breakpoint, $size in $breakpointSizes {\n      @include mq($from: $breakpoint) {\n        --space: #{space($size)};\n      }\n    }\n  }\n}\n\n@mixin spaceProps($breakpoint: null) {\n  @each $space, $value in $spaceSizes {\n    @if $breakpoint {\n      // :host([size-#{$breakpoint}=\"#{$space}\"]) > .stzh-vspace {\n      :host([size-#{$breakpoint}=\"#{$space}\"]) {\n        @include mq($from: $breakpoint) {\n          --space: #{$value};\n        }\n      }\n    } @else {\n      // :host([size=\"#{$space}\"]) > .stzh-vspace {\n      :host([size=\"#{$space}\"]) {\n        --space: #{$value};\n      }\n    }\n  }\n}\n\n@include spaceProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include spaceProps($breakpoint);\n}\n\n.stzh-space {\n  flex-grow: 1;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  padding: calc((var(--space) / -2) * var(--around));\n  margin: calc((var(--space) / -2) * (1 - var(--around)));\n\n  &--is-around {\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  /* Justify content variants */\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-space\",\n  styleUrl: \"stzh-space.scss\",\n  shadow: true\n})\nexport class StzhSpace {\n  /** Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info). */\n  @Prop() curve: Space.Curves = \"none\";\n\n  /** Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() size: Space.Sizes = \"inherit\";\n  /** Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() sizeSmall: Space.Sizes = \"inherit\";\n  /** Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() sizeMedium: Space.Sizes = \"inherit\";\n  /** Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() sizeLarge: Space.Sizes = \"inherit\";\n  /** Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() sizeUltra: Space.Sizes = \"inherit\";\n\n    /** Alignment */\n  @Prop() justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop() items: Layout.Items = \"start\";\n\n  /** Apply spacing to slotted elements */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"top\" | \"bottom\" | \"left\" | \"right\" | \"left-right\" | \"top-bottom\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-space\": true,\n            'stzh-space--is-around': this.around,\n            [`stzh-space--justify-${this.justify}`]: !!this.justify,\n            [`stzh-space--items-${this.items}`]: !!this.items\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-space.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,ssaAAssa;;MCiB9sa,SAAS;;;iBAE2B,MAAM;;;;;;mBAcF,OAAO;iBAGX,OAAO;kBAGX,KAAK;kBAG8D,MAAM;;EAEpH,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBACE,KAAK,EAAE;QACL,YAAY,EAAE,IAAI;QAClB,uBAAuB,EAAE,IAAI,CAAC,MAAM;QACpC,CAAC,uBAAuB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACvD,CAAC,qBAAqB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;OAClD,IAEDA,qBAAa,CACT,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/stzh-space/stzh-space.scss?tag=stzh-space&encapsulation=shadow","src/components/stzh-space/stzh-space.tsx"],"sourcesContent":[":host {\n  --space: #{space()};\n  --around: 0;\n\n  display: flex;\n\n  ::slotted(*) {\n    // fix IE11 not wrapping text\n    max-width: 100%;\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  ::slotted(stzh-vspace),\n  ::slotted(stzh-hspace),\n  ::slotted(stzh-row),\n  ::slotted(stzh-container),\n  ::slotted(stzh-section) {\n    align-self: stretch;\n    flex-grow: 1;\n  }\n}\n\n:host(:empty) {\n  --around: 1;\n\n  width: var(--space);\n  height: var(--space);\n}\n\n:host([around]:not([around=\"false\"])) {\n  --around: 1;\n}\n\n/* Border variants */\n\n:host([border=\"top\"]),\n:host([border=\"top-bottom\"]) {\n  border-top: 1px solid $baseBorderColor;\n}\n\n:host([border=\"bottom\"]),\n:host([border=\"top-bottom\"]) {\n  border-bottom: 1px solid $baseBorderColor;\n}\n\n:host([border=\"left\"]),\n:host([border=\"left-right\"]) {\n  border-left: 1px solid $baseBorderColor;\n}\n\n:host([border=\"right\"]),\n:host([border=\"left-right\"]) {\n  border-right: 1px solid $baseBorderColor;\n}\n\n/* Space curve variant */\n\n@each $spaceCurve, $value in $spaceCurves {\n  $defaultSize: map-get($value, 'size');\n  $breakpointSizes: map-get($value, 'sizes');\n\n  // :host([curve=\"#{$spaceCurve}\"]) > .stzh-vspace {\n  :host([curve=\"#{$spaceCurve}\"]) {\n    --space: #{space($defaultSize)};\n\n    @each $breakpoint, $size in $breakpointSizes {\n      @include mq($from: $breakpoint) {\n        --space: #{space($size)};\n      }\n    }\n  }\n}\n\n@mixin spaceProps($breakpoint: null) {\n  @each $space, $value in $spaceSizes {\n    @if $breakpoint {\n      // :host([size-#{$breakpoint}=\"#{$space}\"]) > .stzh-vspace {\n      :host([size-#{$breakpoint}=\"#{$space}\"]) {\n        @include mq($from: $breakpoint) {\n          --space: #{$value};\n        }\n      }\n    } @else {\n      // :host([size=\"#{$space}\"]) > .stzh-vspace {\n      :host([size=\"#{$space}\"]) {\n        --space: #{$value};\n      }\n    }\n  }\n}\n\n@include spaceProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include spaceProps($breakpoint);\n}\n\n.stzh-space {\n  flex-grow: 1;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  padding: calc((var(--space) / -2) * var(--around));\n  margin: calc((var(--space) / -2) * (1 - var(--around)));\n\n  &--is-around {\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  /* Justify content variants */\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-space\",\n  styleUrl: \"stzh-space.scss\",\n  shadow: true\n})\nexport class StzhSpace {\n  /** Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Space.Curves = \"none\";\n\n  /** Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) size: Space.Sizes;\n  /** Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeSmall: Space.Sizes;\n  /** Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeMedium: Space.Sizes;\n  /** Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeLarge: Space.Sizes;\n  /** Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeUltra: Space.Sizes;\n\n    /** Alignment */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Apply spacing to slotted elements */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"top\" | \"bottom\" | \"left\" | \"right\" | \"left-right\" | \"top-bottom\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-space\": true,\n            'stzh-space--is-around': this.around,\n            [`stzh-space--justify-${this.justify}`]: !!this.justify,\n            [`stzh-space--items-${this.items}`]: !!this.items\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/stzh-sticky.cjs.entry.js

@@ -3,27 +3,113 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-45029280.js');
+const utils = require('./utils-01c0bbdd.js');
+require('./string-utils-5dd70320.js');
 
-const stzhStickyCss = ".sc-stzh-sticky-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-sticky-h{display:none}.sc-stzh-sticky-h *.sc-stzh-sticky,.sc-stzh-sticky-h *.sc-stzh-sticky::before,.sc-stzh-sticky-h *.sc-stzh-sticky::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-sticky-h .has-focus.sc-stzh-sticky{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-sticky-h .stzh-fylingfocus-focused.sc-stzh-sticky{outline-style:none !important}.sc-stzh-sticky-h .stzh-fylingfocus-focused.sc-stzh-sticky::-moz-focus-inner{border:0 !important}.sc-stzh-sticky-h{--padding:var(--stzh-space-large) 0;position:-webkit-sticky;position:sticky;top:-0.0625rem;bottom:-0.0625rem}@media print{.sc-stzh-sticky-h{display:none}}[disable-sticky-top].sc-stzh-sticky-h:not([disable-sticky-top=false]){top:auto}[disable-sticky-bottom].sc-stzh-sticky-h:not([disable-sticky-bottom=false]){bottom:auto}.stzh-sticky.sc-stzh-sticky{position:relative;padding:var(--padding)}.stzh-sticky.sc-stzh-sticky::before,.stzh-sticky.sc-stzh-sticky::after{content:\"\";pointer-events:none;display:block;position:absolute;left:0;width:100%;height:var(--stzh-space-xxlarge);opacity:0;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-sticky.sc-stzh-sticky::before{background:-webkit-gradient(linear, left bottom, left top, from(#FFFFFF), to(rgba(255, 255, 255, 0)));background:linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);top:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}.stzh-sticky.sc-stzh-sticky::after{background:-webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0)), to(#FFFFFF));background:linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);bottom:0;-webkit-transform:translateY(100%);transform:translateY(100%)}.stzh-sticky--is-stuck.sc-stzh-sticky{background-color:var(--stzh-color-white)}.stzh-sticky--is-stuck-bottom.sc-stzh-sticky::before{opacity:1}.stzh-sticky--is-stuck-top.sc-stzh-sticky::after{opacity:1}.stzh-sticky--is-breakout.sc-stzh-sticky{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;max-width:100vw}";
+const stzhStickyCss = ".sc-stzh-sticky-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-sticky-h{display:none}.sc-stzh-sticky-h *.sc-stzh-sticky,.sc-stzh-sticky-h *.sc-stzh-sticky::before,.sc-stzh-sticky-h *.sc-stzh-sticky::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-sticky-h .has-focus.sc-stzh-sticky{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-sticky-h .stzh-fylingfocus-focused.sc-stzh-sticky{outline-style:none !important}.sc-stzh-sticky-h .stzh-fylingfocus-focused.sc-stzh-sticky::-moz-focus-inner{border:0 !important}.sc-stzh-sticky-h{--padding:var(--stzh-space-large) 0;display:contents}@media print{.sc-stzh-sticky-h{display:none}}.stzh-sticky.sc-stzh-sticky{display:contents}.stzh-sticky__sticky.sc-stzh-sticky{position:-webkit-sticky;position:sticky;top:-0.0625rem;bottom:-0.0625rem;z-index:var(--stzh-z-index-sticky)}.stzh-sticky__content.sc-stzh-sticky{position:relative;padding:var(--padding)}.stzh-sticky__content.sc-stzh-sticky::before,.stzh-sticky__content.sc-stzh-sticky::after{content:\"\";pointer-events:none;display:block;position:absolute;left:0;width:100%;height:var(--stzh-space-xxlarge);opacity:0;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-sticky__content.sc-stzh-sticky::before{background:-webkit-gradient(linear, left bottom, left top, from(#FFFFFF), to(rgba(255, 255, 255, 0)));background:linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);top:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}.stzh-sticky__content.sc-stzh-sticky::after{background:-webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0)), to(#FFFFFF));background:linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);bottom:0;-webkit-transform:translateY(100%);transform:translateY(100%)}.stzh-sticky__spacer.sc-stzh-sticky{display:none}.stzh-sticky--is-disabled-sticky-top.sc-stzh-sticky .stzh-sticky__sticky.sc-stzh-sticky{top:auto}.stzh-sticky--is-disabled-sticky-bottom.sc-stzh-sticky .stzh-sticky__sticky.sc-stzh-sticky{bottom:auto}.stzh-sticky--is-stuck.sc-stzh-sticky .stzh-sticky__content.sc-stzh-sticky{background-color:var(--stzh-color-white)}.stzh-sticky--is-stuck-bottom.sc-stzh-sticky .stzh-sticky__content.sc-stzh-sticky::before{opacity:1}.stzh-sticky--is-stuck-top.sc-stzh-sticky .stzh-sticky__content.sc-stzh-sticky::after{opacity:1}.stzh-sticky--is-breakout.sc-stzh-sticky .stzh-sticky__content.sc-stzh-sticky{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;max-width:100vw}";
 
 const StzhSticky = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.stzhStuckTop = index.createEvent(this, "stzhStuckTop", 7);
     this.stzhStuckBottom = index.createEvent(this, "stzhStuckBottom", 7);
-    this.observe = ([entry]) => {
-      this.updateStuck(entry.target);
+    this.fixedHeight = 0;
+    this.fixedWidth = 0;
+    this.fixedLimit = null;
+    this.handleScroll = () => {
+      if (this.debounceScroll) {
+        window.cancelAnimationFrame(this.debounceScroll);
+      }
+      this.debounceScroll = requestAnimationFrame(this.updateFixedByScroll);
+    };
+    this.handleResize = () => {
+      if (this.debounceResize) {
+        window.cancelAnimationFrame(this.debounceResize);
+      }
+      this.debounceResize = requestAnimationFrame(this.updateFixedByResize);
+    };
+    this.updateFixedByScroll = () => {
+      if (!utils.isVisible(this.stickyElement)) {
+        return;
+      }
+      this.scrollX = window.scrollX;
+      this.scrollY = window.scrollY;
+      this.fixedLimit = this.getFixedLimit();
+      if (this.isStuckTop || this.isStuckBottom) {
+        const off = utils.offset(this.spacerElement);
+        this.fixedTop = off.top;
+        this.fixedLeft = off.left;
+      }
+      else {
+        const off = utils.offset(this.stickyElement);
+        this.fixedTop = off.top;
+        this.fixedLeft = off.left;
+      }
+      // console.log(
+      //   this.scrollX,
+      //   this.scrollY,
+      //   this.windowHeight, 
+      //   this.fixedTop,
+      //   this.fixedLeft,
+      //   this.fixedHeight,
+      //   this.fixedLimit,
+      // );
+      this.isStuckBottom = !this.disableStickyBottom
+        && this.scrollY + this.windowHeight <= this.fixedTop + this.fixedHeight;
+      this.isStuckTop = !this.disableStickyTop
+        && this.scrollY >= this.fixedTop;
+      this.hasReachedTopLimit = this.fixedLimit
+        && this.scrollY + this.windowHeight - this.fixedHeight <= this.fixedLimit.top;
+      this.hasReachedBottomLimit = this.fixedLimit
+        && this.scrollY >= this.fixedLimit.bottom - this.fixedHeight;
+      // console.log(
+      //   this.isStuckBottom,
+      //   this.isStuckTop,
+      //   this.hasReachedBottomLimit,
+      //   this.hasReachedTopLimit,
+      // );
+      if (this.isStuckTop || this.isStuckBottom) {
+        this.setFixed();
+      }
+      else {
+        this.setUnfixed();
+      }
+    };
+    this.updateFixedByResize = () => {
+      // reset sticky so we can read current offsets
+      this.setUnfixed();
+      this.stickyElement.style.position = "static";
+      this.isStuckTop = false;
+      this.isStuckBottom = false;
+      if (utils.isVisible(this.stickyElement)) {
+        this.windowHeight = window.innerHeight;
+        this.fixedHeight = this.stickyElement.offsetHeight;
+        this.fixedWidth = this.stickyElement.offsetWidth;
+        this.spacerElement.style.height = `${this.fixedHeight}px`;
+        this.updateFixedByScroll();
+      }
+    };
+    this.observe = () => {
+      this.updateStuck();
     };
     this.disableStickyTop = false;
     this.disableStickyBottom = false;
     this.breakout = false;
+    this.position = "sticky";
     this.isStuckTop = false;
     this.isStuckBottom = false;
+    this.hasReachedTopLimit = false;
+    this.hasReachedBottomLimit = false;
   }
   disableStickyWatcher() {
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        this.updateStuck(this.element);
+        if (this.position === "fixed") {
+          this.updateFixedByResize();
+        }
+        else {
+          this.updateStuck();
+        }
       });
     });
   }
@@ -39,10 +125,28 @@ const StzhSticky = class {
       sticky: newValue
     });
   }
-  updateStuck(element) {
-    const topCss = parseInt(getComputedStyle(element).top, 10);
-    const bottomCss = parseInt(getComputedStyle(element).bottom, 10);
-    const rect = element.getBoundingClientRect();
+  positionWatcher(newValue) {
+    if (newValue === "fixed") {
+      if (this.observer) {
+        this.observer.disconnect();
+      }
+      window.addEventListener("scroll", this.handleScroll, { passive: true });
+      window.addEventListener("resize", this.handleResize);
+      this.updateFixedByResize();
+    }
+    else {
+      window.removeEventListener("scroll", this.handleScroll);
+      window.removeEventListener("resize", this.handleResize);
+      this.setUnfixed();
+      this.observer = new IntersectionObserver(this.observe, { threshold: [1] });
+      this.observer.observe(this.stickyElement);
+      this.updateStuck();
+    }
+  }
+  updateStuck() {
+    const topCss = parseInt(getComputedStyle(this.stickyElement).top, 10);
+    const bottomCss = parseInt(getComputedStyle(this.stickyElement).bottom, 10);
+    const rect = this.stickyElement.getBoundingClientRect();
     if (topCss) {
       this.isStuckTop = rect.top < 0;
     }
@@ -56,31 +160,78 @@ const StzhSticky = class {
       this.isStuckBottom = false;
     }
   }
-  connectedCallback() {
-    this.observer = new IntersectionObserver(this.observe, { threshold: [1] });
-    this.observer.observe(this.element);
+  getFixedLimit() {
+    const stickyContainer = this.element.closest("[data-stzh-sticky-container]");
+    if (!stickyContainer) {
+      return null;
+    }
+    const off = utils.offset(stickyContainer);
+    return {
+      top: off.top,
+      bottom: off.top + stickyContainer.scrollHeight,
+    };
+  }
+  setUnfixed() {
+    Object.assign(this.stickyElement.style, {
+      position: null,
+      top: null,
+      bottom: null,
+      left: null,
+      width: null,
+    });
+    Object.assign(this.spacerElement.style, {
+      display: "none",
+    });
+  }
+  setFixed() {
+    const position = (this.hasReachedTopLimit || this.hasReachedBottomLimit)
+      ? "absolute"
+      : "fixed";
+    Object.assign(this.stickyElement.style, {
+      position,
+      top: position === "absolute"
+        ? `${this.isStuckTop ? this.fixedLimit.bottom - this.fixedHeight : this.fixedLimit.top}px`
+        : this.isStuckTop ? "0px" : "auto",
+      bottom: this.isStuckTop || position === "absolute"
+        ? "auto" : "0px",
+      left: `${this.fixedLeft + (position === "fixed" ? this.scrollX : 0)}px`,
+      width: `${this.fixedWidth}px`,
+    });
+    Object.assign(this.spacerElement.style, {
+      display: "block",
+    });
+  }
+  componentDidLoad() {
+    this.positionWatcher(this.position);
   }
   disconnectedCallback() {
     if (this.observer) {
       this.observer.disconnect();
     }
+    window.removeEventListener("scroll", this.handleScroll);
+    window.removeEventListener("resize", this.handleResize);
   }
   render() {
+    const isStuck = this.isStuckTop || this.isStuckBottom;
     const classes = {
       "stzh-sticky": true,
-      "stzh-sticky--is-stuck": this.isStuckTop || this.isStuckBottom,
+      "stzh-sticky--is-stuck": isStuck,
       "stzh-sticky--is-stuck-top": this.isStuckTop,
       "stzh-sticky--is-stuck-bottom": this.isStuckBottom,
-      "stzh-sticky--is-breakout": this.breakout
+      "stzh-sticky--is-breakout": this.breakout,
+      "stzh-sticky--is-disabled-sticky-top": this.disableStickyTop,
+      "stzh-sticky--is-disabled-sticky-bottom": this.disableStickyBottom,
+      [`stzh-sticky--position-${this.position}`]: !!this.position,
     };
-    return (index.h(index.Host, { "is-stuck": this.isStuckTop || this.isStuckBottom, "is-stuck-top": this.isStuckTop, "is-stuck-bottom": this.isStuckBottom }, index.h("div", { class: classes }, index.h("slot", null))));
+    return (index.h(index.Host, { "is-stuck": this.isStuckTop || this.isStuckBottom, "is-stuck-top": this.isStuckTop, "is-stuck-bottom": this.isStuckBottom }, index.h("div", { class: classes }, index.h("div", { ref: (el) => (this.spacerElement = el), class: "stzh-sticky__spacer" }), index.h("div", { ref: (el) => (this.stickyElement = el), class: "stzh-sticky__sticky" }, index.h("div", { class: "stzh-sticky__content" }, index.h("slot", null))))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
     "disableStickyTop": ["disableStickyWatcher"],
     "disableStickyBottom": ["disableStickyWatcher"],
     "isStuckTop": ["isStuckTopWatcher"],
-    "isStuckBottom": ["isStuckBottomWatcher"]
+    "isStuckBottom": ["isStuckBottomWatcher"],
+    "position": ["positionWatcher"]
   }; }
 };
 StzhSticky.style = stzhStickyCss;

package/dist/cjs/stzh-sticky.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-sticky.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,6+EAA6+E;;MCyBt/E,UAAU;;;;;IAmEb,YAAO,GAAG,CAAC,CAAC,KAAK,CAAC;MACxB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAChC,CAAC;4BAnEmD,KAAK;+BAGF,KAAK;oBAGhB,KAAK;sBAcnB,KAAK;yBACF,KAAK;;EAXvC,oBAAoB;IAClB,qBAAqB,CAAC;MACpB,qBAAqB,CAAC;QACpB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;OAChC,CAAC,CAAC;KACJ,CAAC,CAAC;GACJ;EAQD,iBAAiB,CAAC,QAAiB;IACjC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;MACrB,SAAS,EAAE,aAAa;MACxB,MAAM,EAAE,QAAQ;KACjB,CAAC,CAAC;GACJ;EAGD,oBAAoB,CAAC,QAAiB;IACpC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;MACxB,SAAS,EAAE,aAAa;MACxB,MAAM,EAAE,QAAQ;KACjB,CAAC,CAAC;GACJ;EAUO,WAAW,CAAC,OAAoB;IACtC,MAAM,MAAM,GAAG,QAAQ,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAC3D,MAAM,SAAS,GAAG,QAAQ,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IACjE,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAE7C,IAAI,MAAM,EAAE;MACV,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC;KAChC;SAAM;MACL,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KACzB;IAED,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC;KAC1E;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B;GACF;EAMD,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC3E,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GACpC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;MACnB,uBAAuB,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,aAAa;MAC9D,2BAA2B,EAAE,IAAI,CAAC,UAAU;MAC5C,8BAA8B,EAAE,IAAI,CAAC,aAAa;MAClD,0BAA0B,EAAE,IAAI,CAAC,QAAQ;KAC1C,CAAC;IAEF,QACEA,QAACC,UAAI,gBACO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,aAAa,kBACjC,IAAI,CAAC,UAAU,qBACZ,IAAI,CAAC,aAAa,IAEnCD,iBAAK,KAAK,EAAE,OAAO,IACjBA,qBAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;","names":["h","Host"],"sources":["src/components/stzh-sticky/stzh-sticky.scss?tag=stzh-sticky&encapsulation=scoped","src/components/stzh-sticky/stzh-sticky.tsx"],"sourcesContent":["/**\n * @prop --padding: Padding of sticky element\n */\n\n:host {\n  --padding: #{space('large')} 0;\n\n  position: sticky;\n  top: -1px;\n  bottom: -1px;\n\n  @media print {\n    display: none;\n  }\n\n  &[disable-sticky-top]:not([disable-sticky-top=\"false\"]) {\n    top: auto;\n  }\n\n  &[disable-sticky-bottom]:not([disable-sticky-bottom=\"false\"]) {\n    bottom: auto;\n  }\n}\n\n.stzh-sticky {\n  position: relative;\n  padding: var(--padding);\n\n  &::before,\n  &::after {\n    content: '';\n    pointer-events: none;\n    display: block;\n    position: absolute;\n    left: 0;\n    width: 100%;\n    height: space('xxlarge');\n    opacity: 0;\n    transition: opacity $baseTransitionAnimationSpeed;\n  }\n\n  &::before {\n    background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);\n    top: 0;\n    transform: translateY(-100%);\n  }\n\n  &::after {\n    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);\n    bottom: 0;\n    transform: translateY(100%);\n  }\n\n  &--is-stuck {\n    background-color: $colorWhite;\n  }\n\n  &--is-stuck-bottom {\n    &::before {\n      opacity: 1;\n    }\n  }\n\n  &--is-stuck-top {\n    &::after {\n      opacity: 1;\n    }\n  }\n\n  &--is-breakout {\n    position: relative;\n    left: 50%;\n    right: 50%;\n    margin-left: -50vw;\n    margin-right: -50vw;\n    width: 100vw;\n    max-width: 100vw;\n  }\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  StzhStickyStuckTopEvent,\n  StzhStickyStuckBottomEvent\n} from \"../../index\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-sticky\",\n  styleUrl: \"stzh-sticky.scss\",\n  scoped: true\n})\nexport class StzhSticky {\n  /** Whether to disable sticking to top */\n  @Prop({ reflect: true }) disableStickyTop: boolean = false;\n\n  /** Whether to disable sticking to bottom */\n  @Prop({ reflect: true }) disableStickyBottom: boolean = false;\n\n  /** Whether to breakout container */\n  @Prop({ reflect: true }) breakout: boolean = false;\n\n  @Watch(\"disableStickyTop\")\n  @Watch(\"disableStickyBottom\")\n  disableStickyWatcher() {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        this.updateStuck(this.element);\n      });\n    });\n  }\n\n  @Element() element: HTMLStzhStickyElement;\n\n  @State() isStuckTop: boolean = false;\n  @State() isStuckBottom: boolean = false;\n\n  @Watch(\"isStuckTop\")\n  isStuckTopWatcher(newValue: boolean) {\n    this.stzhStuckTop.emit({\n      component: \"stzh-sticky\",\n      sticky: newValue\n    });\n  }\n\n  @Watch(\"isStuckBottom\")\n  isStuckBottomWatcher(newValue: boolean) {\n    this.stzhStuckBottom.emit({\n      component: \"stzh-sticky\",\n      sticky: newValue\n    });\n  }\n\n  /** Sticky stuck top event */\n  @Event() stzhStuckTop: EventEmitter<StzhStickyStuckTopEvent>;\n\n  /** Sticky stuck bottom event */\n  @Event() stzhStuckBottom: EventEmitter<StzhStickyStuckBottomEvent>;\n\n  private observer: IntersectionObserver;\n\n  private updateStuck(element: HTMLElement) {\n    const topCss = parseInt(getComputedStyle(element).top, 10);\n    const bottomCss = parseInt(getComputedStyle(element).bottom, 10);\n    const rect = element.getBoundingClientRect();\n\n    if (topCss) {\n      this.isStuckTop = rect.top < 0;\n    } else {\n      this.isStuckTop = false;\n    }\n\n    if (bottomCss) {\n      this.isStuckBottom = document.documentElement.clientHeight < rect.bottom;\n    } else {\n      this.isStuckBottom = false;\n    }\n  }\n\n  private observe = ([entry]) => {\n    this.updateStuck(entry.target);\n  };\n\n  connectedCallback() {\n    this.observer = new IntersectionObserver(this.observe, { threshold: [1] });\n    this.observer.observe(this.element)\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-sticky\": true,\n      \"stzh-sticky--is-stuck\": this.isStuckTop || this.isStuckBottom,\n      \"stzh-sticky--is-stuck-top\": this.isStuckTop,\n      \"stzh-sticky--is-stuck-bottom\": this.isStuckBottom,\n      \"stzh-sticky--is-breakout\": this.breakout\n    };\n\n    return (\n      <Host\n        is-stuck={this.isStuckTop || this.isStuckBottom}\n        is-stuck-top={this.isStuckTop}\n        is-stuck-bottom={this.isStuckBottom}\n      >\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-sticky.entry.cjs.js","mappings":"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","names":["isVisible","offset","h","Host"],"sources":["src/components/stzh-sticky/stzh-sticky.scss?tag=stzh-sticky&encapsulation=scoped","src/components/stzh-sticky/stzh-sticky.tsx"],"sourcesContent":["/**\n * @prop --padding: Padding of sticky element\n */\n\n:host {\n  --padding: #{space('large')} 0;\n\n  display: contents;\n\n  @media print {\n    display: none;\n  }\n}\n\n.stzh-sticky {\n  display: contents;\n\n  &__sticky {\n    position: sticky;\n    top: -1px;\n    bottom: -1px;\n    z-index: $zIndexSticky;\n  }\n\n  &__content {\n    position: relative;\n    padding: var(--padding);\n\n    &::before,\n    &::after {\n      content: '';\n      pointer-events: none;\n      display: block;\n      position: absolute;\n      left: 0;\n      width: 100%;\n      height: space('xxlarge');\n      opacity: 0;\n      transition: opacity $baseTransitionAnimationSpeed;\n    }\n\n    &::before {\n      background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);\n      top: 0;\n      transform: translateY(-100%);\n    }\n\n    &::after {\n      background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);\n      bottom: 0;\n      transform: translateY(100%);\n    }\n  }\n\n  &__spacer {\n    display: none;\n  }\n\n  &--is-disabled-sticky-top &__sticky {\n    top: auto;\n  }\n\n  &--is-disabled-sticky-bottom &__sticky {\n    bottom: auto;\n  }\n\n  &--is-stuck &__content {\n    background-color: $colorWhite;\n  }\n\n  &--is-stuck-bottom &__content {\n    &::before {\n      opacity: 1;\n    }\n  }\n\n  &--is-stuck-top &__content {\n    &::after {\n      opacity: 1;\n    }\n  }\n\n  /* Position sticky variant */\n\n  &--is-breakout &__content {\n    position: relative;\n    left: 50%;\n    right: 50%;\n    margin-left: -50vw;\n    margin-right: -50vw;\n    width: 100vw;\n    max-width: 100vw;\n  }\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  StzhStickyStuckTopEvent,\n  StzhStickyStuckBottomEvent\n} from \"../../index\";\n\nimport { isVisible, offset } from \"../../utils/utils\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-sticky\",\n  styleUrl: \"stzh-sticky.scss\",\n  scoped: true\n})\nexport class StzhSticky {\n  /** Whether to disable sticking to top */\n  @Prop({ reflect: true }) disableStickyTop: boolean = false;\n\n  /** Whether to disable sticking to bottom */\n  @Prop({ reflect: true }) disableStickyBottom: boolean = false;\n\n  /** Whether to breakout container */\n  @Prop({ reflect: true }) breakout: boolean = false;\n\n  /**\n   * Position type used.\n   *\n   * - sticky: used only css position sticky\n   * - fixed: uses position fixed with js for positioning (`data-stzh-sticky-container` can be used on a container element to limit sticky position)\n   */\n  @Prop({ reflect: true }) position: \"sticky\" | \"fixed\" = \"sticky\";\n\n  @Watch(\"disableStickyTop\")\n  @Watch(\"disableStickyBottom\")\n  disableStickyWatcher() {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (this.position === \"fixed\") {\n          this.updateFixedByResize();\n        } else {\n          this.updateStuck();\n        }\n      });\n    });\n  }\n\n  @Element() element: HTMLStzhStickyElement;\n\n  @State() isStuckTop: boolean = false;\n  @State() isStuckBottom: boolean = false;\n\n  @State() hasReachedTopLimit: boolean = false;\n  @State() hasReachedBottomLimit: boolean = false;\n\n  @Watch(\"isStuckTop\")\n  isStuckTopWatcher(newValue: boolean) {\n    this.stzhStuckTop.emit({\n      component: \"stzh-sticky\",\n      sticky: newValue\n    });\n  }\n\n  @Watch(\"isStuckBottom\")\n  isStuckBottomWatcher(newValue: boolean) {\n    this.stzhStuckBottom.emit({\n      component: \"stzh-sticky\",\n      sticky: newValue\n    });\n  }\n\n  @Watch(\"position\")\n  positionWatcher(newValue: string) {\n    if (newValue === \"fixed\") {\n      if (this.observer) {\n        this.observer.disconnect();\n      }\n\n      window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n      window.addEventListener(\"resize\", this.handleResize);\n\n      this.updateFixedByResize();\n    } else {\n      window.removeEventListener(\"scroll\", this.handleScroll);\n      window.removeEventListener(\"resize\", this.handleResize);\n      this.setUnfixed();\n\n      this.observer = new IntersectionObserver(this.observe, { threshold: [1] });\n      this.observer.observe(this.stickyElement);\n\n      this.updateStuck();\n    }\n  }\n\n  /** Sticky stuck top event */\n  @Event() stzhStuckTop: EventEmitter<StzhStickyStuckTopEvent>;\n\n  /** Sticky stuck bottom event */\n  @Event() stzhStuckBottom: EventEmitter<StzhStickyStuckBottomEvent>;\n\n  private observer: IntersectionObserver;\n  private debounceScroll: number;\n  private debounceResize: number;\n  private stickyElement: HTMLElement;\n  private spacerElement: HTMLElement;\n\n  private windowHeight: number;\n  private scrollX: number;\n  private scrollY: number;\n  private fixedTop: number;\n  private fixedLeft: number;\n  private fixedHeight: number = 0;\n  private fixedWidth: number = 0;\n  private fixedLimit: { top: number, bottom: number } | null = null;\n\n  private updateStuck() {\n    const topCss = parseInt(getComputedStyle(this.stickyElement).top, 10);\n    const bottomCss = parseInt(getComputedStyle(this.stickyElement).bottom, 10);\n    const rect = this.stickyElement.getBoundingClientRect();\n\n    if (topCss) {\n      this.isStuckTop = rect.top < 0;\n    } else {\n      this.isStuckTop = false;\n    }\n\n    if (bottomCss) {\n      this.isStuckBottom = document.documentElement.clientHeight < rect.bottom;\n    } else {\n      this.isStuckBottom = false;\n    }\n  }\n\n  private getFixedLimit(): { top: number, bottom: number } | null {\n    const stickyContainer = this.element.closest(\"[data-stzh-sticky-container]\");\n\n    if (!stickyContainer) {\n      return null;\n    }\n\n    const off = offset(stickyContainer);\n\n    return {\n      top: off.top,\n      bottom: off.top + stickyContainer.scrollHeight,\n    };\n  }\n\n  private setUnfixed() {\n    Object.assign(this.stickyElement.style, {\n      position: null,\n      top: null,\n      bottom: null,\n      left: null,\n      width: null,\n    });\n\n    Object.assign(this.spacerElement.style, {\n      display: \"none\",\n    });\n  }\n\n  private setFixed() {\n    const position = (this.hasReachedTopLimit || this.hasReachedBottomLimit)\n      ? \"absolute\"\n      : \"fixed\";\n\n    Object.assign(this.stickyElement.style, {\n      position,\n      top: position === \"absolute\"\n        ? `${this.isStuckTop ? this.fixedLimit.bottom - this.fixedHeight : this.fixedLimit.top}px`\n        : this.isStuckTop ? \"0px\" : \"auto\",\n      bottom: this.isStuckTop || position === \"absolute\"\n        ? \"auto\" : \"0px\",\n      left: `${this.fixedLeft + (position === \"fixed\" ? this.scrollX : 0)}px`,\n      width: `${this.fixedWidth}px`,\n    });\n\n    Object.assign(this.spacerElement.style, {\n      display: \"block\",\n    });\n  }\n\n  private handleScroll = () => {\n    if (this.debounceScroll) {\n      window.cancelAnimationFrame(this.debounceScroll);\n    }\n\n    this.debounceScroll = requestAnimationFrame(this.updateFixedByScroll);\n  }\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateFixedByResize);\n  }\n\n  private updateFixedByScroll = () => {\n    if (!isVisible(this.stickyElement)) {\n      return;\n    }\n\n    this.scrollX = window.scrollX;\n    this.scrollY = window.scrollY;\n    this.fixedLimit = this.getFixedLimit();\n\n    if (this.isStuckTop || this.isStuckBottom) {\n      const off = offset(this.spacerElement);\n\n      this.fixedTop = off.top;\n      this.fixedLeft = off.left;\n    } else {\n      const off = offset(this.stickyElement);\n\n      this.fixedTop = off.top;\n      this.fixedLeft = off.left;\n    }\n\n    // console.log(\n    //   this.scrollX,\n    //   this.scrollY,\n    //   this.windowHeight, \n    //   this.fixedTop,\n    //   this.fixedLeft,\n    //   this.fixedHeight,\n    //   this.fixedLimit,\n    // );\n\n    this.isStuckBottom = !this.disableStickyBottom\n      && this.scrollY + this.windowHeight <= this.fixedTop + this.fixedHeight;\n    this.isStuckTop = !this.disableStickyTop\n      && this.scrollY >= this.fixedTop;\n\n    this.hasReachedTopLimit = this.fixedLimit \n      && this.scrollY + this.windowHeight - this.fixedHeight <= this.fixedLimit.top;\n    this.hasReachedBottomLimit = this.fixedLimit \n      && this.scrollY >= this.fixedLimit.bottom - this.fixedHeight;\n\n    // console.log(\n    //   this.isStuckBottom,\n    //   this.isStuckTop,\n    //   this.hasReachedBottomLimit,\n    //   this.hasReachedTopLimit,\n    // );\n\n    if (this.isStuckTop || this.isStuckBottom) {\n      this.setFixed();\n    } else {\n      this.setUnfixed();\n    }\n  }\n\n  private updateFixedByResize = () => {\n    // reset sticky so we can read current offsets\n    this.setUnfixed();\n    this.stickyElement.style.position = \"static\";\n    this.isStuckTop = false;\n    this.isStuckBottom = false;\n\n    if (isVisible(this.stickyElement)) {\n      this.windowHeight = window.innerHeight;\n      this.fixedHeight = this.stickyElement.offsetHeight; \n      this.fixedWidth = this.stickyElement.offsetWidth;\n      this.spacerElement.style.height = `${this.fixedHeight}px`;\n\n      this.updateFixedByScroll();\n    }\n  }\n\n  private observe = () => {\n    this.updateStuck();\n  };\n\n  componentDidLoad() {\n    this.positionWatcher(this.position);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    window.removeEventListener(\"scroll\", this.handleScroll);\n    window.removeEventListener(\"resize\", this.handleResize);\n  }\n\n  render() {\n    const isStuck = this.isStuckTop || this.isStuckBottom;\n\n    const classes = {\n      \"stzh-sticky\": true,\n      \"stzh-sticky--is-stuck\": isStuck,\n      \"stzh-sticky--is-stuck-top\": this.isStuckTop,\n      \"stzh-sticky--is-stuck-bottom\": this.isStuckBottom,\n      \"stzh-sticky--is-breakout\": this.breakout,\n      \"stzh-sticky--is-disabled-sticky-top\": this.disableStickyTop,\n      \"stzh-sticky--is-disabled-sticky-bottom\": this.disableStickyBottom,\n      [`stzh-sticky--position-${this.position}`]: !!this.position,\n    };\n\n    return (\n      <Host\n        is-stuck={this.isStuckTop || this.isStuckBottom}\n        is-stuck-top={this.isStuckTop}\n        is-stuck-bottom={this.isStuckBottom}\n      >\n        <div class={classes}>\n          <div\n            ref={(el) => (this.spacerElement = el as HTMLDivElement)}\n            class=\"stzh-sticky__spacer\"\n          ></div>\n          <div\n            ref={(el) => (this.stickyElement = el as HTMLDivElement)}\n            class=\"stzh-sticky__sticky\"\n          >\n            <div class=\"stzh-sticky__content\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/stzh-table.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-45029280.js');
-const utils = require('./utils-77bc0ea1.js');
+const utils = require('./utils-01c0bbdd.js');
 require('./string-utils-5dd70320.js');
 
 const stzhTableCss = ":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}stzh-table{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;--max-height:var(--stzh-table-max-height);--min-width:var(--stzh-table-min-width);--cell-padding:var(--stzh-table-cell-padding);--search-input-width:var(--stzh-table-search-input-width)}stzh-table[hidden]{display:none}stzh-table *,stzh-table *::before,stzh-table *::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)}stzh-table .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}stzh-table .stzh-fylingfocus-focused{outline-style:none !important}stzh-table .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-table[disable-min-width]:not([disable-min-width=false]){--min-width:none}.stzh-table{}.stzh-table__header{border-bottom:0.0625rem solid var(--stzh-base-border-color);padding-bottom:var(--stzh-space-small);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-table__header{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-table__header{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.stzh-table__header{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-table__header{margin-bottom:var(--stzh-space-xlarge)}}.stzh-table__sub-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.stzh-table__heading{margin-bottom:var(--stzh-space-small)}.stzh-table__header .stzh-table__search{-ms-flex-positive:1;flex-grow:1;margin-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-table__header .stzh-table__search{width:var(--search-input-width);-ms-flex-positive:0;flex-grow:0}}.stzh-table__action-button{-ms-flex-negative:0;flex-shrink:0;margin-left:auto}.stzh-table__outer-wrapper{position:relative}.stzh-table__outer-wrapper::before,.stzh-table__outer-wrapper::after{z-index:4;background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.16)), to(rgba(0, 0, 0, 0)));background:linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);content:\"\";pointer-events:none;position:absolute;top:0;height:100%;width:0.375rem;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed);opacity:0}.stzh-table__outer-wrapper::before{left:0}.stzh-table__outer-wrapper::after{right:0;-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.stzh-table__wrapper{overflow-x:auto;max-height:var(--max-height)}.stzh-table__pagination-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.stzh-table__pagination-wrapper:not(:empty){margin-top:var(--stzh-space-medium)}.stzh-table__sort-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-size:inherit;line-height:inherit;color:inherit;padding:var(--cell-padding)}.stzh-table__sort-button:hover,.stzh-table__sort-button:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-table__list-sort-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.stzh-table__list-sort-wrapper:not(:empty){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-table__list-sort-wrapper:not(:empty){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-table__list-sort-wrapper:not(:empty){margin-bottom:var(--stzh-space-xlarge)}}.stzh-table__list-sort-wrapper stzh-dropdown+stzh-dropdown{margin-top:calc(var(--stzh-space-xsmall) / -1)}.stzh-table stzh-icon.stzh-table__sort-icon{display:none}.stzh-table table{width:100%;border-spacing:0;min-width:var(--min-width);}.stzh-table table.has-layout-fixed{table-layout:fixed}.stzh-table thead{position:-webkit-sticky;position:sticky;top:0;z-index:3}.stzh-table tr:hover td,.stzh-table tr:hover th{background-color:var(--stzh-color-grey5)}.stzh-table td,.stzh-table th{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);text-align:left;border:none;vertical-align:top;border:none;border-bottom:0.0625rem solid var(--stzh-base-border-color);background-color:var(--stzh-color-white);-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed);padding:var(--cell-padding);}.stzh-table td a,.stzh-table th a{color:var(--stzh-link-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius)}.stzh-table td a:hover,.stzh-table td a:focus,.stzh-table th a:hover,.stzh-table th a:focus{color:var(--stzh-link-hover-color)}.stzh-table td b,.stzh-table td strong,.stzh-table th b,.stzh-table th strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-table td i,.stzh-table td em,.stzh-table th i,.stzh-table th em{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular)}.stzh-table td.align-left,.stzh-table th.align-left{text-align:left}.stzh-table td.align-right,.stzh-table th.align-right{text-align:right}.stzh-table td.align-center,.stzh-table th.align-center{text-align:center}.stzh-table td.valign-auto,.stzh-table th.valign-auto{vertical-align:auto}.stzh-table td.valign-middle,.stzh-table th.valign-middle{vertical-align:middle}.stzh-table td.valign-bottom,.stzh-table th.valign-bottom{vertical-align:bottom}.stzh-table td.nowrap,.stzh-table th.nowrap{white-space:nowrap}.stzh-table td.is-sticky-left,.stzh-table td.is-sticky-right,.stzh-table th.is-sticky-left,.stzh-table th.is-sticky-right{position:-webkit-sticky;position:sticky;z-index:1}.stzh-table td.has-sticked,.stzh-table th.has-sticked{z-index:2}.stzh-table td.is-sticky-left,.stzh-table th.is-sticky-left{left:0}.stzh-table td.is-sticky-right,.stzh-table th.is-sticky-right{right:0}.stzh-table td.is-sticky-left::after,.stzh-table td.is-sticky-right::after,.stzh-table th.is-sticky-left::after,.stzh-table th.is-sticky-right::after{background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.16)), to(rgba(0, 0, 0, 0)));background:linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);content:\"\";pointer-events:none;position:absolute;top:0;height:100%;width:0.375rem;-webkit-transform:translate(100%);transform:translate(100%);opacity:0;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-table td.is-sticky-left::after,.stzh-table th.is-sticky-left::after{right:0}.stzh-table td.is-sticky-right::after,.stzh-table th.is-sticky-right::after{left:0;-webkit-transform:rotate(-180deg) translate(100%);transform:rotate(-180deg) translate(100%)}.stzh-table td.has-sticked.is-sticky-left::after,.stzh-table td.has-sticked.is-sticky-right::after,.stzh-table th.has-sticked.is-sticky-left::after,.stzh-table th.has-sticked.is-sticky-right::after{opacity:1}.stzh-table th{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-table th.is-sortable{padding:0}td.has-sorted .stzh-table__sort-icon,th.has-sorted .stzh-table__sort-icon{display:-ms-inline-flexbox;display:inline-flex}td.has-sorted-desc .stzh-table__sort-icon,th.has-sorted-desc .stzh-table__sort-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.stzh-table.has-list .stzh-table__outer-wrapper{display:none}@media screen and (min-width: 600px){.stzh-table.has-list .stzh-table__outer-wrapper{display:block}}@media screen and (min-width: 600px){.stzh-table.has-list .stzh-table__list-wrapper{display:none}}.stzh-table.has-scroll-left-shadow .stzh-table__outer-wrapper::before,.stzh-table.has-scroll-right-shadow .stzh-table__outer-wrapper::after{opacity:1}";