@oiz/stzh-components 2.11.1 → 2.12.0-beta2

package/dist/components/stzh-progressbar-item2.js

@@ -19,7 +19,8 @@ const StzhProgressbarItem = /*@__PURE__*/ proxyCustomElement(class StzhProgressb
     this.onDottedClick = (event) => {
       this.stzhDottedClick.emit({
         component: "stzh-progressbar-item",
-        originalEvent: event
+        originalEvent: event,
+        index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),
       });
     };
     this.label = undefined;

package/dist/components/stzh-progressbar-item2.js.map

@@ -1 +1 @@
-{"file":"stzh-progressbar-item2.js","mappings":"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","names":[],"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}
+{"file":"stzh-progressbar-item2.js","mappings":"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","names":[],"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      index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\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/components/stzh-progressbar.js

@@ -37,6 +37,20 @@ const StzhProgressbar$1 = /*@__PURE__*/ proxyCustomElement(class StzhProgressbar
     this.stepsUltra = 0;
     this.currentSteps = undefined;
   }
+  /**
+   * Return infos about rendered progressbar items.
+   * Array of objects including: hide (whether step is hidden)
+   * / passed (whether step has been passed)
+   * / current (whether step is currently active)
+   * / dotted (whether step has dotted style active)
+   * / first|last (whether step is first or last)
+   * / label
+   */
+  async getItemData() {
+    return this._data.map((step, index) => {
+      return Object.assign(Object.assign({}, step), this.getItemAttributes(index));
+    });
+  }
   dataWatcher(newValue) {
     if (typeof newValue === "string") {
       this._data = JSON.parse(newValue);
@@ -117,7 +131,8 @@ const StzhProgressbar$1 = /*@__PURE__*/ proxyCustomElement(class StzhProgressbar
     "stepsMedium": [2, "steps-medium"],
     "stepsLarge": [2, "steps-large"],
     "stepsUltra": [2, "steps-ultra"],
-    "currentSteps": [32]
+    "currentSteps": [32],
+    "getItemData": [64]
   }, undefined, {
     "data": ["dataWatcher"]
   }]);

package/dist/components/stzh-progressbar.js.map

@@ -1 +1 @@
-{"file":"stzh-progressbar.js","mappings":";;;;;AAAA,MAAM,kBAAkB,GAAG,m8CAAm8C;;MCyBj9CA,iBAAe;;;;IAuGlB,oBAAe,GAAG;MACxB,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,EAAE;QAC7C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC;OACrC;WAAM,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,EAAE;QACpD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC;OACrC;WAAM,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,EAAE;QACtD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC;OACtC;WAAM,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,EAAE;QACpD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC;OACrC;WAAM;QACL,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;OAChC;MAED,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC;KACzE,CAAA;;gBAnGkD,EAAE;iBAI7B,CAAC;iBAGD,CAAC;sBAGI,CAAC;uBAGA,CAAC;sBAGF,CAAC;sBAGD,CAAC;;;EAO9B,WAAW,CAAC,QAAwB;IAClC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACnC;SACI;MACH,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;KACvB;IAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAC3C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;IAC1C,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC;GAC/E;EAMO,iBAAiB,CAAC,SAAiB;IACzC,MAAM,IAAI,GAAG,EAAoC,CAAC;IAElD,IAAI,CAAC,IAAI,GAAG,SAAS,GAAG,CAAC,CAAC;IAC1B,IAAI,CAAC,KAAK,GAAG,SAAS,KAAK,CAAC,CAAC;IAC7B,IAAI,CAAC,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC,aAAa,CAAC;IAC7C,IAAI,CAAC,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC,KAAK,CAAC;IACxC,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;;IAGrC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,EAAE;;MAEzC,IAAI,SAAS,KAAK,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;QAChE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;OACpB;MAED,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE;;QAElB,IAAI,CAAC,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC;OACjF;WAAM;;QAEL,IAAI,SAAS,KAAK,CAAC,EAAE;UACnB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACpB;QAED,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;;;QAI3B,IAAI,IAAI,CAAC,kBAAkB,EAAE;UAC3B,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC;SACnD;;QAGD,IAAI,CAAC,IAAI,GAAG,SAAS,GAAG,CAAC,IAAI,SAAS,GAAG,SAAS;aAC7C,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,IAAI,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC;OACzF;KACF;IAED,OAAO,IAAI,CAAC;GACb;EAkBD,MAAM,iBAAiB;IACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE5B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;KACtG;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,eAAe,EAAE,CAAC;IACvB,sBAAsB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;GAC9C;EAED,oBAAoB;IAClB,yBAAyB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;GACjD;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,kBAAkB,EAAE,IAAI;MACxB,CAAC,2BAA2B,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;KACxD,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,WACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAC,MAAM,gBACC,IAAI,CAAC,YAAY,CAAC,KAAK,IAElC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAC1B,6CACM,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,IACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,wBAAwB,IACP,CAC1B,CACG,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhProgressbar"],"sources":["src/components/stzh-progressbar/stzh-progressbar.scss?tag=stzh-progressbar&encapsulation=scoped","src/components/stzh-progressbar/stzh-progressbar.tsx"],"sourcesContent":[":host {\n  min-width: calc(var(--steps) * #{$progressbarItemDottedSize} * 2);\n\n  @include mq($from: small) {\n    min-width: calc(var(--steps) * #{$progressbarItemDottedSizeSmallUp} * 2);\n  }\n}\n\n.stzh-progressbar {\n  position: relative;\n\toverflow: hidden;\n\n  &__items {\n    display: flex;\n    flex-wrap: nowrap;\n  }\n\n  &__item {\n    /* flex the bullets to always have the same size */\n\t\tflex-grow: 1;\n\t\tflex-shrink: 1;\n\t\tflex-basis: 0;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhProgressbarDataItem\n} from '../../index';\n\nimport { addMediaChangeListener, removeMediaChangeListener, media } from \"../../utils/media-utils\";\nimport { StzhProgressbarLocalizedText } from \"./stzh-progressbar.localization\"\n\n/**\n * @slot - Slot for any text content\n */\n@Component({\n  tag: \"stzh-progressbar\",\n  styleUrl: \"stzh-progressbar.scss\",\n  scoped: true\n})\nexport class StzhProgressbar {\n  /** Translation strings */\n  @Prop() localization: StzhProgressbarLocalizedText;\n\n  /**\n   * Step data (JSON array with objects that have `label` attribute and optional:\n   * - `disabled`, if step should be disabled\n   * - `icon`, if icon instead of step number should be displayed):\n   * - `analyticsId`, for Adobe Analytics, rendered as `s-object-id` (default is `label`)\n   *\n   * ```\n   * {\n   *   \"label\": \"Step Label\"\n   *   \"icon\": \"clock\",\n   *   \"disabled\": true\n   * }\n   * ```\n   */\n  @Prop() data: StzhProgressbarDataItem[] | string = [];\n  private _data: StzhProgressbarDataItem[];\n\n  /** Index of the item that be active */\n  @Prop() index: number = 0;\n\n  /** Number of steps to show below small breakpoint */\n  @Prop() steps: number = 5;\n\n  /** Number of steps to show above small breakpoint */\n  @Prop() stepsSmall: number = 6;\n\n  /** Number of steps to show above medium breakpoint */\n  @Prop() stepsMedium: number = 0;\n\n    /** Number of steps to show above large breakpoint */\n  @Prop() stepsLarge: number = 0;\n\n  /** Number of steps to show above ultra breakpoint */\n  @Prop() stepsUltra: number = 0;\n\n  @State() currentSteps: number;\n\n  @Element() element: HTMLStzhProgressbarElement;\n\n  @Watch(\"data\")\n  dataWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    }\n    else {\n      this._data = newValue;\n    }\n\n    this.lastItemIndex = this._data.length - 1;\n    this.maxStepIndex = this.currentSteps - 1;\n    this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;\n  }\n\n  private lastItemIndex: number;\n  private maxStepIndex: number;\n  private withinLastFewSteps: boolean;\n\n  private getItemAttributes(itemIndex: number): any {\n    const item = {} as HTMLStzhProgressbarItemElement;\n\n    item.step = itemIndex + 1;\n    item.first = itemIndex === 0;\n    item.last = itemIndex === this.lastItemIndex;\n    item.current = itemIndex === this.index;\n    item.passed = itemIndex < this.index;\n\n    // hide overflowings if more items than max steps in DOM\n    if (this._data.length > this.currentSteps) {\n      // add dots to last item if current index is below the last few items\n      if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {\n        item.dotted = true;\n      }\n\n      if (this.index < 2) {\n        // hide overflowing items on the right\n        item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;\n      } else {\n        // add dots to first item if current item is third or above\n        if (itemIndex === 0) {\n          item.dotted = true;\n        }\n\n        let substract = this.index;\n\n        // if is within the last elements, calculate how much previous\n        // should be shown to stay on 5 visible elements\n        if (this.withinLastFewSteps) {\n          substract = this._data.length - this.maxStepIndex;\n        }\n\n        // hide overflowing items on left and right side\n        item.hide = itemIndex > 0 && itemIndex < substract\n          || itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;\n      }\n    }\n\n    return item;\n  }\n\n  private setCurrentSteps = () => {\n    if (media(\"ultra\").matches && this.stepsUltra) {\n      this.currentSteps = this.stepsUltra;\n    } else if (media(\"large\").matches && this.stepsLarge) {\n      this.currentSteps = this.stepsLarge;\n    } else if (media(\"medium\").matches && this.stepsMedium) {\n      this.currentSteps = this.stepsMedium;\n    } else if (media(\"small\").matches && this.stepsSmall) {\n      this.currentSteps = this.stepsSmall;\n    } else {\n      this.currentSteps = this.steps;\n    }\n\n    this.element.style.setProperty(\"--steps\", this.currentSteps.toString());\n  }\n\n  async componentWillLoad() {\n    this.dataWatcher(this.data);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"progressbar\");\n    }\n  }\n\n  connectedCallback() {\n    this.setCurrentSteps();\n    addMediaChangeListener(this.setCurrentSteps);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.setCurrentSteps);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-progressbar\": true,\n      [`stzh-progressbar--index-${this.index}`]: !!this.index\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div\n            class=\"stzh-progressbar__items\"\n            role=\"list\"\n            aria-label={this.localization.label}\n          >\n            {this._data.map((step, index) =>\n              <stzh-progressbar-item\n                {...this.getItemAttributes(index)}\n                icon={step.icon}\n                disabled={step.disabled}\n                label={step.label}\n                class=\"stzh-progressbar__item\"\n              ></stzh-progressbar-item>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-progressbar.js","mappings":"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","names":["StzhProgressbar"],"sources":["src/components/stzh-progressbar/stzh-progressbar.scss?tag=stzh-progressbar&encapsulation=scoped","src/components/stzh-progressbar/stzh-progressbar.tsx"],"sourcesContent":[":host {\n  min-width: calc(var(--steps) * #{$progressbarItemDottedSize} * 2);\n\n  @include mq($from: small) {\n    min-width: calc(var(--steps) * #{$progressbarItemDottedSizeSmallUp} * 2);\n  }\n}\n\n.stzh-progressbar {\n  position: relative;\n\toverflow: hidden;\n\n  &__items {\n    display: flex;\n    flex-wrap: nowrap;\n  }\n\n  &__item {\n    /* flex the bullets to always have the same size */\n\t\tflex-grow: 1;\n\t\tflex-shrink: 1;\n\t\tflex-basis: 0;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Watch,\n  Method\n} from \"@stencil/core\";\n\nimport {\n  StzhProgressbarDataItem\n} from '../../index';\n\nimport { addMediaChangeListener, removeMediaChangeListener, media } from \"../../utils/media-utils\";\nimport { StzhProgressbarLocalizedText } from \"./stzh-progressbar.localization\"\n\n/**\n * @slot - Slot for any text content\n */\n@Component({\n  tag: \"stzh-progressbar\",\n  styleUrl: \"stzh-progressbar.scss\",\n  scoped: true\n})\nexport class StzhProgressbar {\n  /** Translation strings */\n  @Prop() localization: StzhProgressbarLocalizedText;\n\n  /**\n   * Step data (JSON array with objects that have `label` attribute and optional:\n   * - `disabled`, if step should be disabled\n   * - `icon`, if icon instead of step number should be displayed):\n   * - `analyticsId`, for Adobe Analytics, rendered as `s-object-id` (default is `label`)\n   *\n   * ```\n   * {\n   *   \"label\": \"Step Label\"\n   *   \"icon\": \"clock\",\n   *   \"disabled\": true\n   * }\n   * ```\n   */\n  @Prop() data: StzhProgressbarDataItem[] | string = [];\n  private _data: StzhProgressbarDataItem[];\n\n  /** Index of the item that be active */\n  @Prop() index: number = 0;\n\n  /** Number of steps to show below small breakpoint */\n  @Prop() steps: number = 5;\n\n  /** Number of steps to show above small breakpoint */\n  @Prop() stepsSmall: number = 6;\n\n  /** Number of steps to show above medium breakpoint */\n  @Prop() stepsMedium: number = 0;\n\n    /** Number of steps to show above large breakpoint */\n  @Prop() stepsLarge: number = 0;\n\n  /** Number of steps to show above ultra breakpoint */\n  @Prop() stepsUltra: number = 0;\n\n  @State() currentSteps: number;\n\n  @Element() element: HTMLStzhProgressbarElement;\n\n  /**\n   * Return infos about rendered progressbar items.\n   * Array of objects including: hide (whether step is hidden)\n   * / passed (whether step has been passed)\n   * / current (whether step is currently active)\n   * / dotted (whether step has dotted style active)\n   * / first|last (whether step is first or last)\n   * / label\n   */\n  @Method()\n  async getItemData() {\n    return this._data.map((step, index) => {\n      return {\n        ...step,\n        ...this.getItemAttributes(index)\n      }\n    });\n  }\n\n  @Watch(\"data\")\n  dataWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    }\n    else {\n      this._data = newValue;\n    }\n\n    this.lastItemIndex = this._data.length - 1;\n    this.maxStepIndex = this.currentSteps - 1;\n    this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;\n  }\n\n  private lastItemIndex: number;\n  private maxStepIndex: number;\n  private withinLastFewSteps: boolean;\n\n  private getItemAttributes(itemIndex: number): any {\n    const item = {} as HTMLStzhProgressbarItemElement;\n\n    item.step = itemIndex + 1;\n    item.first = itemIndex === 0;\n    item.last = itemIndex === this.lastItemIndex;\n    item.current = itemIndex === this.index;\n    item.passed = itemIndex < this.index;\n\n    // hide overflowings if more items than max steps in DOM\n    if (this._data.length > this.currentSteps) {\n      // add dots to last item if current index is below the last few items\n      if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {\n        item.dotted = true;\n      }\n\n      if (this.index < 2) {\n        // hide overflowing items on the right\n        item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;\n      } else {\n        // add dots to first item if current item is third or above\n        if (itemIndex === 0) {\n          item.dotted = true;\n        }\n\n        let substract = this.index;\n\n        // if is within the last elements, calculate how much previous\n        // should be shown to stay on 5 visible elements\n        if (this.withinLastFewSteps) {\n          substract = this._data.length - this.maxStepIndex;\n        }\n\n        // hide overflowing items on left and right side\n        item.hide = itemIndex > 0 && itemIndex < substract\n          || itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;\n      }\n    }\n\n    return item;\n  }\n\n  private setCurrentSteps = () => {\n    if (media(\"ultra\").matches && this.stepsUltra) {\n      this.currentSteps = this.stepsUltra;\n    } else if (media(\"large\").matches && this.stepsLarge) {\n      this.currentSteps = this.stepsLarge;\n    } else if (media(\"medium\").matches && this.stepsMedium) {\n      this.currentSteps = this.stepsMedium;\n    } else if (media(\"small\").matches && this.stepsSmall) {\n      this.currentSteps = this.stepsSmall;\n    } else {\n      this.currentSteps = this.steps;\n    }\n\n    this.element.style.setProperty(\"--steps\", this.currentSteps.toString());\n  }\n\n  async componentWillLoad() {\n    this.dataWatcher(this.data);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"progressbar\");\n    }\n  }\n\n  connectedCallback() {\n    this.setCurrentSteps();\n    addMediaChangeListener(this.setCurrentSteps);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.setCurrentSteps);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-progressbar\": true,\n      [`stzh-progressbar--index-${this.index}`]: !!this.index\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div\n            class=\"stzh-progressbar__items\"\n            role=\"list\"\n            aria-label={this.localization.label}\n          >\n            {this._data.map((step, index) =>\n              <stzh-progressbar-item\n                {...this.getItemAttributes(index)}\n                icon={step.icon}\n                disabled={step.disabled}\n                label={step.label}\n                class=\"stzh-progressbar__item\"\n              ></stzh-progressbar-item>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-sticky.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { b as isVisible, o as offset } from './utils.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;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 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:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width))}";
 
 const StzhSticky$1 = /*@__PURE__*/ proxyCustomElement(class StzhSticky extends HTMLElement {
   constructor() {

package/dist/components/stzh-sticky.js.map

@@ -1 +1 @@
-{"file":"stzh-sticky.js","mappings":"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","names":["StzhSticky"],"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}
+{"file":"stzh-sticky.js","mappings":"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","names":["StzhSticky"],"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: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n    margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n    width: calc(100vw - var(--stzh-scrollbar-width));\n    max-width: calc(100vw - var(--stzh-scrollbar-width));\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/components/stzh-toastbar.js

@@ -114,9 +114,16 @@ const StzhToastbar$1 = /*@__PURE__*/ proxyCustomElement(class StzhToastbar exten
         link: link
       });
       if (data.cookie) {
+        let cookieExpires = 365;
+        if (data.cookieExpires === 0) {
+          cookieExpires = null;
+        }
+        else if (data.cookieExpires) {
+          cookieExpires = data.cookieExpires;
+        }
         toast.addEventListener("stzhClosed", () => {
           js_cookie.set(`${KEY_PREFIX_CLOSED}-${data.cookie}`, '1', {
-            expires: typeof data.cookieExpires !== "undefined" ? data.cookieExpires : 365
+            expires: cookieExpires
           });
         });
       }

package/dist/components/stzh-toastbar.js.map

@@ -1 +1 @@
-{"file":"stzh-toastbar.js","mappings":"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","names":["StzhToastbar","Cookie"],"sources":["src/components/stzh-toastbar/stzh-toastbar.scss?tag=stzh-toastbar&encapsulation=shadow","src/components/stzh-toastbar/stzh-toastbar.tsx"],"sourcesContent":[":host {\n  @include spaceCurve('bottom', 'regular');\n  z-index: $zIndexOverlay;\n  position: fixed;\n  pointer-events: none;\n  bottom: var(--stzh-header-sticky-appnav-height, 0);\n  left: $containerMargin;\n  right: $containerMargin;\n\n  @include mq($from: small) {\n    left: $containerMarginSmall;\n    right: auto;\n    max-width: 560px;\n    max-width: min(560px, calc(100% - (#{$containerMarginSmall} * 2)));\n  }\n\n  @include mq($from: medium) {\n    left: $containerMarginMedium;\n    // max-width: calc(100% - (#{$containerMarginMedium} * 2));\n  }\n\n  @include mq($from: large) {\n    left: $containerMarginLarge;\n    // max-width: calc(100% - (#{$containerMarginLarge} * 2));\n  }\n\n  ::slotted(*:not([hidden]):not([slot])) {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n}\n\n.stzh-toastbar {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n\n  @include mq($from: small) {\n    align-items: flex-start;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Method,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhToastbarInitialToast,\n  StzhToastType,\n} from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSED = \"stzh-components-toastbar-closed\";\n\n/**\n * @slot - Slot for stzh-toast elements\n */\n@Component({\n  tag: \"stzh-toastbar\",\n  styleUrl: \"stzh-toastbar.scss\",\n  shadow: true\n})\nexport class StzhToastbar {\n  /**\n   * Time after toasts are hidden (in seconds).\n   * Toasts with type `error` will stay, until the user closes them manually.\n   */\n  @Prop() hideAfter: number = 30;\n\n  /**\n   * Maximum of toasts allowed to be shown.\n   * If more are created, oldest will be hidden, even if timeout not ended yet or toast type is `error`.\n   */\n  @Prop() max: number = 5;\n\n  /**\n   * Initial toasts.\n   *\n   * Array of objects that at least includes `label` and optionally `type`, `link` (object with `href` and `label`) `cookie` and `cookieExpires`:\n   * `[{\"label\": \"Lorem ipsum\", \"link\": { \"label\": \"More info\", \"href\": \"https://example.com\" }, \"cookie\": \"cookie-banner\", \"cookieExpires\": 365 }]`\n   *\n   * If `cookie` exists in an object, it will check for that cookie name first (prefixed with `stzh-components-toastbar-closed-`) and only show if cookie doesn't exist.\n   * `cookieExpires` sets the cookie lifetime (default 365 days, set 0 for session cookie).\n   */\n  @Prop() initialToasts: StzhToastbarInitialToast[] | string = [];\n  private _initialToasts: StzhToastbarInitialToast[] = [];\n\n  @Element() element: HTMLStzhToastbarElement;\n\n  /** Create new toast. */\n  @Method()\n  async toast(\n    label: string,\n    { type, link }: { type?: StzhToastType, link?: HTMLStzhLinkElement } = { type: \"info\" }\n  ): Promise<HTMLStzhToastElement> {\n    const toast = document.createElement(\"stzh-toast\");\n    toast.hidden = true;\n    toast.label = label;\n    toast.role = \"alert\";\n    toast.type = type || \"info\";\n    toast.initialOpenAnimation = true;\n\n    if (link) {\n      link.slot = \"link\";\n      link.size = \"small\";\n      toast.appendChild(link);\n    }\n\n    this.element.appendChild(toast);\n\n    return toast;\n  }\n\n  @Watch(\"initialToasts\")\n  initialToastsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._initialToasts = JSON.parse(newValue);\n    } else {\n      this._initialToasts = newValue;\n    }\n  }\n\n  private toastAppended(toast: HTMLStzhToastElement) {\n    if (toast.getAttribute('data-stzh-toastbar-managed')) {\n      return;\n    }\n\n    toast.setAttribute('data-stzh-toastbar-managed', '');\n\n    toast.addEventListener(\"stzhClosed\", () => {\n      toast.remove();\n    });\n\n    if (toast.type !== \"error\") {\n      let timeoutStarted = new Date().getTime();\n      let restTime = this.hideAfter * 1000;\n      let currentTimeout = window.setTimeout(() => {\n        toast.hide();\n      }, restTime);\n\n      toast.addEventListener(\"pointerenter\", () => {\n        if (currentTimeout) {\n          window.clearTimeout(currentTimeout);\n          const timePassed = new Date().getTime() - timeoutStarted;\n          restTime = restTime - timePassed;\n        }\n      });\n\n      toast.addEventListener(\"pointerleave\", () => {\n        timeoutStarted = new Date().getTime();\n        currentTimeout = window.setTimeout(() => {\n          toast.hide();\n        }, restTime);\n      });\n    }\n  }\n\n  private toastsAppended() {\n    Array.from(this.element.children).forEach((toast: HTMLStzhToastElement) => {\n      this.toastAppended(toast);\n    });\n  }\n\n  private hideOverflowingItems() {\n    const childCount = this.element.children.length;\n\n    Array.from(this.element.children)\n      .splice(0, childCount - this.max)\n      .forEach((toast: HTMLStzhToastElement) => {\n        toast.hide();\n      });\n  }\n\n  private handleSlotchange = () => {\n    this.toastsAppended();\n    this.hideOverflowingItems();\n  }\n\n  componentWillLoad() {\n    this.initialToastsWatcher(this.initialToasts);\n  }\n\n  componentDidLoad() {\n    this._initialToasts.forEach(async (data) => {\n      if (data.cookie) {\n        const alreadyClosedBefore = Cookie.get(`${KEY_PREFIX_CLOSED}-${data.cookie}`);\n\n        if (alreadyClosedBefore) {\n          return;\n        }\n      }\n\n      let link = data.link;\n\n      if (!(link instanceof HTMLElement)) {\n        const generatedLink = document.createElement(\"stzh-link\");\n        generatedLink.slot = \"link\";\n        generatedLink.size = \"small\";\n\n        Object.assign(generatedLink, data.link);\n        link = generatedLink;\n      }\n\n      const toast = await this.toast(data.label, {\n        type: data.type,\n        link: link as HTMLStzhLinkElement\n      })\n\n      if (data.cookie) {\n        toast.addEventListener(\"stzhClosed\", () => {\n          Cookie.set(`${KEY_PREFIX_CLOSED}-${data.cookie}`, '1', {\n            expires: typeof data.cookieExpires !== \"undefined\" ? data.cookieExpires : 365\n          });\n        });\n      }\n    })\n  }\n\n  render() {\n    const classes = {\n      \"stzh-toastbar\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot onSlotchange={this.handleSlotchange}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-toastbar.js","mappings":"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","names":["StzhToastbar","Cookie"],"sources":["src/components/stzh-toastbar/stzh-toastbar.scss?tag=stzh-toastbar&encapsulation=shadow","src/components/stzh-toastbar/stzh-toastbar.tsx"],"sourcesContent":[":host {\n  @include spaceCurve('bottom', 'regular');\n  z-index: $zIndexOverlay;\n  position: fixed;\n  pointer-events: none;\n  bottom: var(--stzh-header-sticky-appnav-height, 0);\n  left: $containerMargin;\n  right: $containerMargin;\n\n  @include mq($from: small) {\n    left: $containerMarginSmall;\n    right: auto;\n    max-width: 560px;\n    max-width: min(560px, calc(100% - (#{$containerMarginSmall} * 2)));\n  }\n\n  @include mq($from: medium) {\n    left: $containerMarginMedium;\n    // max-width: calc(100% - (#{$containerMarginMedium} * 2));\n  }\n\n  @include mq($from: large) {\n    left: $containerMarginLarge;\n    // max-width: calc(100% - (#{$containerMarginLarge} * 2));\n  }\n\n  ::slotted(*:not([hidden]):not([slot])) {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n}\n\n.stzh-toastbar {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n\n  @include mq($from: small) {\n    align-items: flex-start;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Method,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhToastbarInitialToast,\n  StzhToastType,\n} from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSED = \"stzh-components-toastbar-closed\";\n\n/**\n * @slot - Slot for stzh-toast elements\n */\n@Component({\n  tag: \"stzh-toastbar\",\n  styleUrl: \"stzh-toastbar.scss\",\n  shadow: true\n})\nexport class StzhToastbar {\n  /**\n   * Time after toasts are hidden (in seconds).\n   * Toasts with type `error` will stay, until the user closes them manually.\n   */\n  @Prop() hideAfter: number = 30;\n\n  /**\n   * Maximum of toasts allowed to be shown.\n   * If more are created, oldest will be hidden, even if timeout not ended yet or toast type is `error`.\n   */\n  @Prop() max: number = 5;\n\n  /**\n   * Initial toasts.\n   *\n   * Array of objects that at least includes `label` and optionally `type`, `link` (object with `href` and `label`) `cookie` and `cookieExpires`:\n   * `[{\"label\": \"Lorem ipsum\", \"link\": { \"label\": \"More info\", \"href\": \"https://example.com\" }, \"cookie\": \"cookie-banner\", \"cookieExpires\": 365 }]`\n   *\n   * If `cookie` exists in an object, it will check for that cookie name first (prefixed with `stzh-components-toastbar-closed-`) and only show if cookie doesn't exist.\n   * `cookieExpires` sets the cookie lifetime (default 365 days, set 0 for session cookie).\n   */\n  @Prop() initialToasts: StzhToastbarInitialToast[] | string = [];\n  private _initialToasts: StzhToastbarInitialToast[] = [];\n\n  @Element() element: HTMLStzhToastbarElement;\n\n  /** Create new toast. */\n  @Method()\n  async toast(\n    label: string,\n    { type, link }: { type?: StzhToastType, link?: HTMLStzhLinkElement } = { type: \"info\" }\n  ): Promise<HTMLStzhToastElement> {\n    const toast = document.createElement(\"stzh-toast\");\n    toast.hidden = true;\n    toast.label = label;\n    toast.role = \"alert\";\n    toast.type = type || \"info\";\n    toast.initialOpenAnimation = true;\n\n    if (link) {\n      link.slot = \"link\";\n      link.size = \"small\";\n      toast.appendChild(link);\n    }\n\n    this.element.appendChild(toast);\n\n    return toast;\n  }\n\n  @Watch(\"initialToasts\")\n  initialToastsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._initialToasts = JSON.parse(newValue);\n    } else {\n      this._initialToasts = newValue;\n    }\n  }\n\n  private toastAppended(toast: HTMLStzhToastElement) {\n    if (toast.getAttribute('data-stzh-toastbar-managed')) {\n      return;\n    }\n\n    toast.setAttribute('data-stzh-toastbar-managed', '');\n\n    toast.addEventListener(\"stzhClosed\", () => {\n      toast.remove();\n    });\n\n    if (toast.type !== \"error\") {\n      let timeoutStarted = new Date().getTime();\n      let restTime = this.hideAfter * 1000;\n      let currentTimeout = window.setTimeout(() => {\n        toast.hide();\n      }, restTime);\n\n      toast.addEventListener(\"pointerenter\", () => {\n        if (currentTimeout) {\n          window.clearTimeout(currentTimeout);\n          const timePassed = new Date().getTime() - timeoutStarted;\n          restTime = restTime - timePassed;\n        }\n      });\n\n      toast.addEventListener(\"pointerleave\", () => {\n        timeoutStarted = new Date().getTime();\n        currentTimeout = window.setTimeout(() => {\n          toast.hide();\n        }, restTime);\n      });\n    }\n  }\n\n  private toastsAppended() {\n    Array.from(this.element.children).forEach((toast: HTMLStzhToastElement) => {\n      this.toastAppended(toast);\n    });\n  }\n\n  private hideOverflowingItems() {\n    const childCount = this.element.children.length;\n\n    Array.from(this.element.children)\n      .splice(0, childCount - this.max)\n      .forEach((toast: HTMLStzhToastElement) => {\n        toast.hide();\n      });\n  }\n\n  private handleSlotchange = () => {\n    this.toastsAppended();\n    this.hideOverflowingItems();\n  }\n\n  componentWillLoad() {\n    this.initialToastsWatcher(this.initialToasts);\n  }\n\n  componentDidLoad() {\n    this._initialToasts.forEach(async (data) => {\n      if (data.cookie) {\n        const alreadyClosedBefore = Cookie.get(`${KEY_PREFIX_CLOSED}-${data.cookie}`);\n\n        if (alreadyClosedBefore) {\n          return;\n        }\n      }\n\n      let link = data.link;\n\n      if (!(link instanceof HTMLElement)) {\n        const generatedLink = document.createElement(\"stzh-link\");\n        generatedLink.slot = \"link\";\n        generatedLink.size = \"small\";\n\n        Object.assign(generatedLink, data.link);\n        link = generatedLink;\n      }\n\n      const toast = await this.toast(data.label, {\n        type: data.type,\n        link: link as HTMLStzhLinkElement\n      })\n\n      if (data.cookie) {\n        let cookieExpires = 365;\n\n        if (data.cookieExpires === 0) {\n          cookieExpires = null;\n        } else if (data.cookieExpires) {\n          cookieExpires = data.cookieExpires;\n        }\n\n        toast.addEventListener(\"stzhClosed\", () => {\n          Cookie.set(`${KEY_PREFIX_CLOSED}-${data.cookie}`, '1', {\n            expires: cookieExpires\n          });\n        });\n      }\n    })\n  }\n\n  render() {\n    const classes = {\n      \"stzh-toastbar\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot onSlotchange={this.handleSlotchange}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-vbz-majorticker.js

@@ -48,6 +48,11 @@ const StzhVbzMajorticker$1 = /*@__PURE__*/ proxyCustomElement(class StzhVbzMajor
     const { data } = await axios.get(apiUrl);
     this.data = data;
   }
+  dateAdapterWatcher(newValue) {
+    if (!newValue) {
+      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats, this.localization.$globals);
+    }
+  }
   async dataWatcher(newValue) {
     var _a, _b;
     if (typeof newValue === "string") {
@@ -84,9 +89,7 @@ const StzhVbzMajorticker$1 = /*@__PURE__*/ proxyCustomElement(class StzhVbzMajor
     if (!this.localization) {
       this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "vbz-majorticker");
     }
-    if (!this.dateAdapter) {
-      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats, this.localization.$globals);
-    }
+    this.dateAdapterWatcher(this.dateAdapter);
     if (this.data) {
       await this.dataWatcher(this.data);
     }
@@ -109,6 +112,7 @@ const StzhVbzMajorticker$1 = /*@__PURE__*/ proxyCustomElement(class StzhVbzMajor
   get element() { return this; }
   static get watchers() { return {
     "api": ["apiWatcher"],
+    "dateAdapter": ["dateAdapterWatcher"],
     "data": ["dataWatcher"]
   }; }
   static get style() { return stzhVbzMajortickerCss; }
@@ -124,6 +128,7 @@ const StzhVbzMajorticker$1 = /*@__PURE__*/ proxyCustomElement(class StzhVbzMajor
     "getDisturbance": [64]
   }, undefined, {
     "api": ["apiWatcher"],
+    "dateAdapter": ["dateAdapterWatcher"],
     "data": ["dataWatcher"]
   }]);
 function defineCustomElement$1() {

package/dist/components/stzh-vbz-majorticker.js.map

@@ -1 +1 @@
-{"file":"stzh-vbz-majorticker.js","mappings":"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","names":["StzhVbzMajorticker"],"sources":["src/components/stzh-vbz-majorticker/stzh-vbz-majorticker.scss?tag=stzh-vbz-majorticker&encapsulation=scoped","src/components/stzh-vbz-majorticker/stzh-vbz-majorticker.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-vbz-majorticker {\n  &__ghettobox {\n    // --stzh-base-invert-color: #{$colorBlack};\n    // --stzh-base-invert-color72: #{$colorBlack72};\n    // --stzh-base-invert-color32: #{$colorBlack32};\n    // --stzh-base-invert-color16: #{$colorBlack16};\n\n    --stzh-base-invert-color-rgb: #{$colorBlackRgb};\n    --color: #{$colorBlack};\n    --background-color: #{$colorCoral};\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Watch,\n  Element,\n  Event,\n  EventEmitter,\n  Method\n} from \"@stencil/core\";\n\nimport axios from \"axios\";\n\nimport { createParagraphsFromBrs } from \"../../utils/string-utils\";\nimport { StzhLocaleAdapter } from \"../../utils/date-adapter\";\n\nimport { StzhVbzMajortickerLocalizedText } from \"./stzh-vbz-majorticker.localization\";\n\nimport {\n  VBZ,\n  StzhVbzMajortickerDisturbanceFetchedEvent,\n  StzhVbzMajortickerDisturbance,\n  VbzTickerInfoUrl\n} from \"../../index\";\n\n/**\n */\n@Component({\n  tag: \"stzh-vbz-majorticker\",\n  styleUrl: \"stzh-vbz-majorticker.scss\",\n  scoped: true\n})\nexport class StzhVbzMajorticker {\n  /** API URL (`{lang}` is replaced in the URL)  */\n  @Prop() api: string = \"https://fpbe.zvv.ch/restproxy/himsearch?format=json&accessId=unic&channels=ticker&additionalfields=tickers:VBZ&orderBy=LMOD_DESC&lang={lang}\";\n\n  /** Data to pass in directly (alternative for API call) */\n  @Prop() data: any = \"\";\n  private _data: any;\n\n  /** More info link (`{lang}` and `{id}` are replaced in the URL) */\n  @Prop() moreInfoLink: string = \"https://zvv.ch/zvv/{lang}/fahrplan/vl.html?himIds={id}\";\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  /** Translation strings. */\n  @Prop() localization: StzhVbzMajortickerLocalizedText;\n\n  /** Overwrite ghettobox close time cookie option if needed */\n  @Prop() ghettoboxCloseTimeKey: string;\n\n  /** Whether ghettobox is shown (if has not been closed before) */\n  @State() ghettoboxShown: boolean = true;\n\n  @Element() element: HTMLStzhVbzMajortickerElement;\n\n  /** Event when major disturbance was fetched */\n  @Event() stzhDisturbanceFetched: EventEmitter<StzhVbzMajortickerDisturbanceFetchedEvent>;\n\n  /** Return whether ghettobox is shown (if has not been closed before) */\n  @Method()\n  async getGhettoboxShown() {\n    return this.ghettoboxShown;\n  }\n\n  /** Return fetched disturbance */\n  @Method()\n  async getDisturbance() {\n    return this.disturbance;\n  }\n\n  @Watch(\"api\")\n  async apiWatcher(newValue: string) {\n    if (!newValue) {\n      return;\n    }\n\n    let apiUrl = this.api.replace(/\\{lang\\}/, this.localization.$locale)\n    apiUrl = apiUrl + (apiUrl.includes(\"?\") ? \"&\" : \"?\") + Date.now();\n\n    // load data from API\n    const { data } = await axios.get(apiUrl);\n\n    this.data = data;\n  }\n\n  @Watch(\"data\")\n  async dataWatcher(newValue: any) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    } else {\n      this._data = newValue;\n    }\n\n    const bigDisturbance = this._data?.Message\n      ?.find(message => message.category === VBZ.DISTURBANCE_INFORMATION && message.baseType === VBZ.BASE_TYPE_GLOBAL);\n\n    if (bigDisturbance) {\n      const urls: VbzTickerInfoUrl[] = bigDisturbance.channel\n        .filter(channel => channel.name === VBZ.CHANNEL_TICKER && channel.url)\n        .map(channel => channel.url)\n        .reduce((a, b) => a.concat(b), []);\n\n      const infoUrl = urls\n        .find(url => url.url.indexOf(VBZ.CHANNEL_INFO_URL_FILTER) !== -1);\n\n      this.disturbance = {\n        id: bigDisturbance.id,\n        head: bigDisturbance.head,\n        text: createParagraphsFromBrs(bigDisturbance.text),\n        startDate: new Date(`${bigDisturbance.sDate}T${bigDisturbance.sTime}+02:00`),\n        endDate: new Date(`${bigDisturbance.eDate}T${bigDisturbance.eTime}+02:00`),\n        altStart: bigDisturbance.altStart,\n        altEnd: bigDisturbance.altEnd,\n        infoUrl: infoUrl\n      };\n    }\n\n    this.stzhDisturbanceFetched.emit({\n      component: \"stzh-vbz-majorticker\",\n      disturbance: this.disturbance\n    })\n  }\n\n  private disturbance: StzhVbzMajortickerDisturbance = null;\n\n  private onGhettoboxOpen = () => {\n    this.ghettoboxShown = true;\n  }\n\n  private onGhettoboxClose = () => {\n    this.ghettoboxShown = false;\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"vbz-majorticker\");\n    }\n\n    if (!this.dateAdapter) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n\n    if (this.data) {\n      await this.dataWatcher(this.data);\n    } else {\n      await this.apiWatcher(this.api);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-vbz-majorticker\": true\n    };\n\n    return (\n      <Host hidden={!this.disturbance || !this.ghettoboxShown}>\n        <div class={classes}>\n          {this.disturbance &&\n            <stzh-ghettobox\n              onStzhOpen={this.onGhettoboxOpen}\n              onStzhClose={this.onGhettoboxClose}\n              class=\"stzh-vbz-majorticker__ghettobox\"\n              hideClose={true}\n              closeTimeKey={this.ghettoboxCloseTimeKey}\n              mainTitle={this.disturbance.head}\n              publishDate={this.disturbance.startDate}\n            >\n              <stzh-richtext innerHTML={this.disturbance.text}></stzh-richtext>\n              {this.disturbance.infoUrl ?\n                <stzh-button\n                  slot=\"button\"\n                  href={this.disturbance.infoUrl.url}\n                >\n                  {this.disturbance.infoUrl.name}\n                </stzh-button>\n              :\n                <stzh-button\n                  slot=\"button\"\n                  target=\"_blank\"\n                  href={this.moreInfoLink\n                    .replace(/\\{lang\\}/, this.localization.$locale)\n                    .replace(/\\{id\\}/, this.disturbance.id)}\n                >\n                  {this.localization.moreInfo}\n                </stzh-button>\n              }\n            </stzh-ghettobox>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-vbz-majorticker.js","mappings":"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","names":["StzhVbzMajorticker"],"sources":["src/components/stzh-vbz-majorticker/stzh-vbz-majorticker.scss?tag=stzh-vbz-majorticker&encapsulation=scoped","src/components/stzh-vbz-majorticker/stzh-vbz-majorticker.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-vbz-majorticker {\n  &__ghettobox {\n    // --stzh-base-invert-color: #{$colorBlack};\n    // --stzh-base-invert-color72: #{$colorBlack72};\n    // --stzh-base-invert-color32: #{$colorBlack32};\n    // --stzh-base-invert-color16: #{$colorBlack16};\n\n    --stzh-base-invert-color-rgb: #{$colorBlackRgb};\n    --color: #{$colorBlack};\n    --background-color: #{$colorCoral};\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Watch,\n  Element,\n  Event,\n  EventEmitter,\n  Method\n} from \"@stencil/core\";\n\nimport axios from \"axios\";\n\nimport { createParagraphsFromBrs } from \"../../utils/string-utils\";\nimport { StzhLocaleAdapter } from \"../../utils/date-adapter\";\n\nimport { StzhVbzMajortickerLocalizedText } from \"./stzh-vbz-majorticker.localization\";\n\nimport {\n  VBZ,\n  StzhVbzMajortickerDisturbanceFetchedEvent,\n  StzhVbzMajortickerDisturbance,\n  VbzTickerInfoUrl\n} from \"../../index\";\n\n/**\n */\n@Component({\n  tag: \"stzh-vbz-majorticker\",\n  styleUrl: \"stzh-vbz-majorticker.scss\",\n  scoped: true\n})\nexport class StzhVbzMajorticker {\n  /** API URL (`{lang}` is replaced in the URL)  */\n  @Prop() api: string = \"https://fpbe.zvv.ch/restproxy/himsearch?format=json&accessId=unic&channels=ticker&additionalfields=tickers:VBZ&orderBy=LMOD_DESC&lang={lang}\";\n\n  /** Data to pass in directly (alternative for API call) */\n  @Prop() data: any = \"\";\n  private _data: any;\n\n  /** More info link (`{lang}` and `{id}` are replaced in the URL) */\n  @Prop() moreInfoLink: string = \"https://zvv.ch/zvv/{lang}/fahrplan/vl.html?himIds={id}\";\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  /** Translation strings. */\n  @Prop() localization: StzhVbzMajortickerLocalizedText;\n\n  /** Overwrite ghettobox close time cookie option if needed */\n  @Prop() ghettoboxCloseTimeKey: string;\n\n  /** Whether ghettobox is shown (if has not been closed before) */\n  @State() ghettoboxShown: boolean = true;\n\n  @Element() element: HTMLStzhVbzMajortickerElement;\n\n  /** Event when major disturbance was fetched */\n  @Event() stzhDisturbanceFetched: EventEmitter<StzhVbzMajortickerDisturbanceFetchedEvent>;\n\n  /** Return whether ghettobox is shown (if has not been closed before) */\n  @Method()\n  async getGhettoboxShown() {\n    return this.ghettoboxShown;\n  }\n\n  /** Return fetched disturbance */\n  @Method()\n  async getDisturbance() {\n    return this.disturbance;\n  }\n\n  @Watch(\"api\")\n  async apiWatcher(newValue: string) {\n    if (!newValue) {\n      return;\n    }\n\n    let apiUrl = this.api.replace(/\\{lang\\}/, this.localization.$locale)\n    apiUrl = apiUrl + (apiUrl.includes(\"?\") ? \"&\" : \"?\") + Date.now();\n\n    // load data from API\n    const { data } = await axios.get(apiUrl);\n\n    this.data = data;\n  }\n\n  @Watch(\"dateAdapter\")\n  dateAdapterWatcher(newValue: StzhLocaleAdapter) {\n    if (!newValue) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n  }\n\n  @Watch(\"data\")\n  async dataWatcher(newValue: any) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    } else {\n      this._data = newValue;\n    }\n\n    const bigDisturbance = this._data?.Message\n      ?.find(message => message.category === VBZ.DISTURBANCE_INFORMATION && message.baseType === VBZ.BASE_TYPE_GLOBAL);\n\n    if (bigDisturbance) {\n      const urls: VbzTickerInfoUrl[] = bigDisturbance.channel\n        .filter(channel => channel.name === VBZ.CHANNEL_TICKER && channel.url)\n        .map(channel => channel.url)\n        .reduce((a, b) => a.concat(b), []);\n\n      const infoUrl = urls\n        .find(url => url.url.indexOf(VBZ.CHANNEL_INFO_URL_FILTER) !== -1);\n\n      this.disturbance = {\n        id: bigDisturbance.id,\n        head: bigDisturbance.head,\n        text: createParagraphsFromBrs(bigDisturbance.text),\n        startDate: new Date(`${bigDisturbance.sDate}T${bigDisturbance.sTime}+02:00`),\n        endDate: new Date(`${bigDisturbance.eDate}T${bigDisturbance.eTime}+02:00`),\n        altStart: bigDisturbance.altStart,\n        altEnd: bigDisturbance.altEnd,\n        infoUrl: infoUrl\n      };\n    }\n\n    this.stzhDisturbanceFetched.emit({\n      component: \"stzh-vbz-majorticker\",\n      disturbance: this.disturbance\n    })\n  }\n\n  private disturbance: StzhVbzMajortickerDisturbance = null;\n\n  private onGhettoboxOpen = () => {\n    this.ghettoboxShown = true;\n  }\n\n  private onGhettoboxClose = () => {\n    this.ghettoboxShown = false;\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"vbz-majorticker\");\n    }\n\n    this.dateAdapterWatcher(this.dateAdapter);\n\n    if (this.data) {\n      await this.dataWatcher(this.data);\n    } else {\n      await this.apiWatcher(this.api);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-vbz-majorticker\": true\n    };\n\n    return (\n      <Host hidden={!this.disturbance || !this.ghettoboxShown}>\n        <div class={classes}>\n          {this.disturbance &&\n            <stzh-ghettobox\n              onStzhOpen={this.onGhettoboxOpen}\n              onStzhClose={this.onGhettoboxClose}\n              class=\"stzh-vbz-majorticker__ghettobox\"\n              hideClose={true}\n              closeTimeKey={this.ghettoboxCloseTimeKey}\n              mainTitle={this.disturbance.head}\n              publishDate={this.disturbance.startDate}\n            >\n              <stzh-richtext innerHTML={this.disturbance.text}></stzh-richtext>\n              {this.disturbance.infoUrl ?\n                <stzh-button\n                  slot=\"button\"\n                  href={this.disturbance.infoUrl.url}\n                >\n                  {this.disturbance.infoUrl.name}\n                </stzh-button>\n              :\n                <stzh-button\n                  slot=\"button\"\n                  target=\"_blank\"\n                  href={this.moreInfoLink\n                    .replace(/\\{lang\\}/, this.localization.$locale)\n                    .replace(/\\{id\\}/, this.disturbance.id)}\n                >\n                  {this.localization.moreInfo}\n                </stzh-button>\n              }\n            </stzh-ghettobox>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-vbz-ticker.js

@@ -44,6 +44,11 @@ const StzhVbzTicker$1 = /*@__PURE__*/ proxyCustomElement(class StzhVbzTicker ext
     const { data } = await axios.get(apiUrl);
     this.data = data;
   }
+  dateAdapterWatcher(newValue) {
+    if (!newValue) {
+      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats, this.localization.$globals);
+    }
+  }
   async dataWatcher(newValue) {
     var _a, _b;
     if (typeof newValue === "string") {
@@ -125,9 +130,7 @@ const StzhVbzTicker$1 = /*@__PURE__*/ proxyCustomElement(class StzhVbzTicker ext
       this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "vbz-ticker");
       this.localizationWatcher();
     }
-    if (!this.dateAdapter) {
-      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats, this.localization.$globals);
-    }
+    this.dateAdapterWatcher(this.dateAdapter);
     if (this.data) {
       await this.dataWatcher(this.data);
     }
@@ -168,6 +171,7 @@ const StzhVbzTicker$1 = /*@__PURE__*/ proxyCustomElement(class StzhVbzTicker ext
   static get watchers() { return {
     "localization": ["localizationWatcher"],
     "api": ["apiWatcher"],
+    "dateAdapter": ["dateAdapterWatcher"],
     "data": ["dataWatcher"]
   }; }
   static get style() { return stzhVbzTickerCss; }
@@ -180,6 +184,7 @@ const StzhVbzTicker$1 = /*@__PURE__*/ proxyCustomElement(class StzhVbzTicker ext
   }, undefined, {
     "localization": ["localizationWatcher"],
     "api": ["apiWatcher"],
+    "dateAdapter": ["dateAdapterWatcher"],
     "data": ["dataWatcher"]
   }]);
 function defineCustomElement$1() {