@oiz/stzh-components 3.0.0-beta5 → 3.0.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["stzhCarouselCss","reducedMotionMedia","window","matchMedia","carouselCounter","StzhCarousel","this","slideScrollLeft","scrolledByAutoplay","scrollTimeoutId","lastX","startX","startScrollLeft","disableTimeoutId","stoppedDragging","onReducedMotionMediaChange","autoplayDisabledByMotionMedia","matches","onMouseenter","preventAutoplayPause","autoplayDisabledByMouse","onMouseleave","onFocusin","autoplayDisabledByFocus","onFocusout","onPreviousClick","scrollToPreviousSnapPoint","onNextClick","scrollToNextSnapPoint","onSlideResize","scrollElement","itemSize","sizingMethod","onMutation","slideElements","Array","from","children","forEach","slide","index","setAttribute","localization","slideLabel","replace","toString","length","previousElements","element","querySelectorAll","nextElements","navigationTextElements","onScroll","direction","scrollLeft","scrolling","preventAutoplayStop","autoplayDisabledByScroll","autoplay","stzhSlideStart","emit","component","calculateSlide","update","stzhSlidePassed","clearTimeout","setTimeout","onScrollEnd","scrollTimeout","style","removeProperty","tabThrough","variant","ariaLive","currentSlides","slidesLabel","stzhSlideEnd","onMediaChange","ultra","media","large","medium","small","slidesUltra","slidesLarge","slidesMedium","slidesSmall","slides","currentSwipeSlides","mouseMove","event","distance","clientX","startDragging","preventDefault","setProperty","dragging","autoplayDisabledByDrag","addEventListener","stopDragging","capture","checkClick","Math","abs","minimumReached","distanceQuickSwipe","endDraddingLeft","finalLeft","scrollTo","left","behavior","slideToPrevious","slideToNext","removeEventListener","distancePreventClick","stopPropagation","autoplayInterval","hasReachedLastSlide","slideTo","behaviour","scrollToSlide","disabledWatcher","disabled","passive","preventMouseDragWatcher","preventMouseDrag","autoplayRunningWatcher","autoplayIntervalId","clearInterval","autoplayRunning","setInterval","autoplayTimeout","snapAlignWatcher","shouldSnap","inertWatcher","isActive","inert","removeAttribute","prevNextNavigationWatcher","setAriaAttributes","isStzh","isStzhElement","prevNextHiddenWatcher","hideElements","setHiddenAttribute","nextPrevDisabledWatcher","reachedFirstSlide","reachedLastSlide","nextElementsWatcher","nextElement","carouselId","previousElementsWatcher","previousElement","css","getComputedStyle","firstElementChild","offsetWidth","parseInt","getPropertyValue","round","previousIndex","canSnap","scrollWidth","ceil","componentWillLoad","stzhComponents","utils","fetchTranslations","componentDidLoad","connectedCallback","addMediaChangeListener","resizeObserver","ResizeObserver","observe","mutationObserver","MutationObserver","childList","subtree","disconnectedCallback","removeMediaChangeListener","disconnect","render","classes","nonInteractive","h","Host","class","name","ref","el","id","withTrack","_a","width","_b"],"sources":["src/components/stzh-carousel/stzh-carousel.scss?tag=stzh-carousel&encapsulation=scoped","src/components/stzh-carousel/stzh-carousel.tsx"],"sourcesContent":["/**\n * @prop --padding-top: Padding Top of scroll container\n * @prop --padding-bottom: Padding Bottom of scroll container\n * @prop --peek-in: Peek size (inside container) showing the next/previous slides\n * @prop --peek-out: Negative peek size (breakout of container) showing the next/previous slides\n * @prop --gutter: Space between the slides\n * @prop --snap-stop: Snap stop of scroll container\n */\n\n:host {\n  @include spaceCurve('--gutter', 'regular');\n  --peek: calc(var(--peek-in, 0px) + var(--peek-out, 0px));\n  --peek-in: calc(#{space('medium')} + #{spaceCurveValue('regular')});\n  // --peek-out: #{space('medium')};\n  --padding-top: 0px;\n  --padding-bottom: 0px;\n  --snap-stop: always;\n  --slides: 1;\n  --slide-size: calc((100% - (var(--slides) - 1) * var(--gutter)) / var(--slides));\n\n  @include mq($from: small) {\n    --peek-in: calc(#{space('xxxlarge')} + #{spaceCurveValue('regular', 'medium')});\n    // --peek-out: #{$containerMarginSmall};\n  }\n\n  @include mq($from: medium) {\n    --peek-in: calc(#{space('big')} + #{spaceCurveValue('regular', 'large')});\n    // --peek-out: 0px;\n  }\n\n  ::slotted(*) {\n    width: 100%;\n    height: 100%;\n    flex-shrink: 0;\n    scroll-snap-align: start;\n    scroll-snap-stop: var(--snap-stop);\n    transition: opacity $baseTransitionAnimationSpeed;\n\n    &:where([inert]) {\n      opacity: 0.5;\n    }\n\n    &:where(stzh-figure[inert]) {\n      --caption-opacity: 0;\n    }\n\n    img {\n      -webkit-user-drag: none;\n      user-drag: none;\n      -ms-user-select: none;\n      -moz-user-select: none;\n      -webkit-user-select: none;\n      user-select: none;\n    }\n  }\n\n  ::slotted([slot=\"actions\"]) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    pointer-events: none;\n    padding: 0 var(--peek);\n\n    stzh-text {\n      width: auto;\n    }\n\n    stzh-button {\n      pointer-events: all;\n    }\n\n    .stzh-carousel-action-previous,\n    .stzh-carousel-action-next {\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n    }\n  \n    .stzh-carousel-action-previous {\n      left: calc((#{space('medium')} + #{spaceCurveValue('regular')}) / -1);\n  \n      @include mq($from: small) {\n        left: calc((#{space('xxxlarge')} + #{spaceCurveValue('regular', 'medium')}) / -1);\n      }\n  \n      @include mq($from: medium) {\n        left: calc((#{space('big')} + #{spaceCurveValue('regular', 'large')}) / -1);\n      }\n    }\n  \n    .stzh-carousel-action-next {\n      right: calc((#{space('medium')} + #{spaceCurveValue('regular')}) / -1);\n  \n      @include mq($from: small) {\n        right: calc((#{space('xxxlarge')} + #{spaceCurveValue('regular', 'medium')}) / -1);\n      }\n  \n      @include mq($from: medium) {\n        right: calc((#{space('big')} + #{spaceCurveValue('regular', 'large')}) / -1);\n      }\n    }\n  }\n\n  ::slotted(stzh-ratio[slot=\"actions\"]) {\n    stzh-space,\n    stzh-hspace,\n    stzh-vspace {\n      padding: space('xsmall');\n    }\n  }\n\n  ::slotted(stzh-ratio[slot=\"actions\"]) {\n    --background-color: transparent;\n  }\n\n  /* Card */\n\n  &[variant=\"cards\"] {\n    @include spaceCurve('--gutter', 'tiny');\n    --padding-top: 4px;\n    --padding-bottom: 4px;\n\n    @include mq($from: medium) {\n      --peek-out: #{$containerMarginMedium};\n    }\n\n    @include mq($from: large) {\n      --peek-out: #{$containerMarginLarge};\n    }\n\n    @include mq($from: ultra) {\n      --peek-out: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n    }\n  }\n\n  &[variant=\"cards\"] ::slotted([slot=\"actions\"]) {\n    position: relative;\n    order: 1;\n    margin-top: calc(#{space('medium')} - var(--padding-bottom));\n  }\n\n  /* No peek */\n\n  &[no-peek]:not([no-peek=\"false\"]) {\n    --peek-out: 0px;\n    --peek-in: 0px;\n  }\n}\n\n.stzh-carousel {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% + var(--peek-out) * 2);\n  margin-left: calc(var(--peek-out) / -1);\n  margin-right: calc(var(--peek-out) / -1);\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__indicator {\n    @include spaceCurve('margin-top', 'regular');\n    margin-left: auto;\n    margin-right: auto;\n    position: relative;\n    width: 230px;\n    height: 4px;\n    background-color: $colorBlack20op;\n  }\n\n  &__indicator-track {\n    position: absolute;\n    background-color: $colorSecondary50;\n    height: 6px;\n    left: 0px;\n    bottom: 0px;\n    transition-property: left, width;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__scroll {\n    position: relative;\n    grid-area: slides;\n    display: grid;\n    width: 100%;\n    height: 100%;\n    place-items: center;\n    overflow-x: auto;\n    overflow-y: visible;\n    grid-auto-flow: column;\n    grid-auto-columns: var(--slide-size);\n    grid-auto-rows: 100%;\n    column-gap: var(--gutter);\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n    scroll-behavior: smooth;\n    overscroll-behavior-x: contain;\n    scroll-snap-type: x mandatory;\n    scroll-padding: 0 var(--peek);\n    padding: var(--padding-top) var(--peek) var(--padding-bottom);\n\n    @media (prefers-reduced-motion: reduce) {\n      scroll-behavior: auto;\n    }\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  &--is-draggable &__scroll {\n    cursor: grab;\n  }\n\n  &--is-dragging &__scroll {\n    cursor: grabbing;\n  }\n\n  &--is-disabled &__scroll {\n    cursor: not-allowed;\n    overflow: hidden;\n  }\n\n  &--is-non-interactive {\n    pointer-events: none;\n    touch-action: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Method,\n  Event,\n  EventEmitter,\n  Watch,\n  State\n} from \"@stencil/core\";\n\nimport {\n  StzhCarouselSlideStartEvent,\n  StzhCarouselSlidePassedEvent,\n  StzhCarouselSlideEndEvent\n} from \"../../index\";\n\nimport { isStzhElement } from \"../../utils/utils\";\nimport { StzhCarouselLocalizedText } from \"./stzh-carousel.localization\"\n\nimport {\n  media,\n  addMediaChangeListener,\n  removeMediaChangeListener\n} from '../../utils/media-utils';\n\nconst reducedMotionMedia = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n\nlet carouselCounter = 0;\n\n/*\n* Inspired by:\n*\n* - https://github.com/barthy-koeln/scroll-snap-slider\n* - https://tannerhodges.github.io/snap-slider/\n* - https://www.w3.org/WAI/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next/\n* - https://dev.to/jasonwebb/how-to-build-a-more-accessible-carousel-or-slider-35lp\n* - http://web-accessibility.carnegiemuseums.org/code/carousels/\n*/\n\n/**\n * @slot - Slot any element\n * @slot actions - Slot for `stzh-actions` element\n */\n@Component({\n  tag: \"stzh-carousel\",\n  styleUrl: \"stzh-carousel.scss\",\n  scoped: true\n})\nexport class StzhCarousel {\n  /** Translation strings */\n  @Prop() localization: StzhCarouselLocalizedText;\n\n  /** Carousel variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"cards\" = \"default\";\n\n  /** Whether carousel is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether to remove inside/outside peek. */\n  @Prop({ reflect: true }) noPeek: boolean = false;\n\n  /** Slides number */\n  @Prop() slides: number = 1;\n  /** Slides number above small breakpoint */\n  @Prop() slidesSmall: number = 0;\n  /** Slides number above medium breakpoint */\n  @Prop() slidesMedium: number = 0;\n  /** Slides number above large breakpoint */\n  @Prop() slidesLarge: number = 0;\n  /** Slides number above ultra breakpoint */\n  @Prop() slidesUltra: number = 0;\n\n  // /** How many slides per swipe */\n  // @Prop() swipeSlides: number = 1;\n  // /** How many slides per swipe above small breakpoint */\n  // @Prop() swipeSlidesSmall: number = 0;\n  // /** How many slides per swipe above medium breakpoint */\n  // @Prop() swipeSlidesMedium: number = 0;\n  // /** How many slides per swipe above large breakpoint */\n  // @Prop() swipeSlidesLarge: number = 0;\n  // /** How many slides per swipe above ultra breakpoint */\n  // @Prop() swipeSlidesUltra: number = 0;\n\n  /** Active slide (readonly) */\n  @Prop() slide: number = 0;\n\n  /**\n   * Whether autoplay is enabled.\n   * Gets paused, when user has focus inside carousel element or hovers over it.\n   * Also when reduced motion media query is active or carousel is set disabled.\n   * Gets disabled permanently, when user interacts with carousel manually (clicks prev/next, scrolls or drags)\n   */\n  @Prop({ mutable: true }) autoplay: boolean = false;\n\n  /** Timeout delay in milliseconds used for autoplay */\n  @Prop() autoplayTimeout: number = 3000;\n\n  /** Whether scrolling & dragging should be disabled */\n  @Prop() nonInteractive: boolean = false;\n\n  /** Whether drag with mouse should be disabled (still will be able to scroll with wheeling or arrow keys) */\n  @Prop() preventMouseDrag: boolean = false;\n\n  /** Whether autoplay pause should be prevented when user hovers/focuses carousel */\n  @Prop() preventAutoplayPause: boolean = false;\n\n  /** Whether autoplay stop should be prevented when user scroll or drags carousel */\n  @Prop() preventAutoplayStop: boolean = false;\n\n  /**\n   * Enable all slides to be tabbable (will disable prev/next arrows from being tabbable).\n   * By default only the visible slides will be tabbable and the prev/next can be used to change slides\n   * (enabled when `variant` is set to `cards`).\n   */\n  @Prop() tabThrough: boolean = false;\n\n  /** Whether indicator should be shown */\n  @Prop() withTrack: boolean = false;\n\n\n  /** Timeout delay in milliseconds used to catch the end of scroll events */\n  @State() scrollTimeout: number = 100;\n\n  /** Minimum drag distance that needs to be reached to swipe to next/previous slide(s). */\n  @State() distanceQuickSwipe: number = 40;\n\n  /** Minimum drag distance that neeeds to be reached to prevent click on slide elements. */\n  @State() distancePreventClick: number = 6;\n\n  @Element() element: HTMLStzhCarouselElement;\n\n  /** Slide start event */\n  @Event() stzhSlideStart: EventEmitter<StzhCarouselSlideStartEvent>;\n\n  /** Slide passed event */\n  @Event() stzhSlidePassed: EventEmitter<StzhCarouselSlidePassedEvent>;\n\n  /** Slide end event */\n  @Event() stzhSlideEnd: EventEmitter<StzhCarouselSlideEndEvent>;\n\n  /** Scroll to a slide by index */\n  @Method()\n  async slideTo(index, behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    this.scrollToSlide(index, behaviour);\n  }\n\n  /** Scroll to previous snap point */\n  @Method()\n  async slideToPrevious(behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    this.scrollToPreviousSnapPoint(behaviour);\n  }\n\n  /** Scroll to next snap point */\n  @Method()\n  async slideToNext(behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    this.scrollToNextSnapPoint(behaviour);\n  }\n\n  @Watch(\"disabled\")\n  disabledWatcher() {\n    if (this.disabled) {\n      this.scrollElement && this.scrollElement.removeEventListener(\"scroll\", this.onScroll);\n      this.scrollTimeoutId && window.clearTimeout(this.scrollTimeoutId);\n      this.scrollTimeoutId = null;\n      this.element.removeEventListener(\"mouseenter\", this.onMouseenter);\n      this.element.removeEventListener(\"mouseleave\", this.onMouseleave);\n      this.element.removeEventListener(\"focusin\", this.onFocusin);\n      this.element.removeEventListener(\"focusout\", this.onFocusout);\n      this.onReducedMotionMediaChange();\n      reducedMotionMedia && reducedMotionMedia.removeEventListener(\"change\", this.onReducedMotionMediaChange);\n    } else {\n      this.scrollElement && this.scrollElement.addEventListener(\"scroll\", this.onScroll, { passive: true });\n      this.element.addEventListener(\"mouseenter\", this.onMouseenter);\n      this.element.addEventListener(\"mouseleave\", this.onMouseleave);\n      this.element.addEventListener(\"focusin\", this.onFocusin);\n      this.element.addEventListener(\"focusout\", this.onFocusout);\n      reducedMotionMedia && reducedMotionMedia.addEventListener(\"change\", this.onReducedMotionMediaChange);\n    }\n  }\n\n  @Watch(\"disabled\")\n  @Watch(\"preventMouseDrag\")\n  preventMouseDragWatcher() {\n    if (this.preventMouseDrag || this.disabled) {\n      this.disableTimeoutId && window.clearTimeout(this.disableTimeoutId);\n      this.disableTimeoutId = null;\n      this.scrollElement && this.scrollElement.removeEventListener(\"mousedown\", this.startDragging);\n      this.lastX = null;\n    } else {\n      this.scrollElement && this.scrollElement.addEventListener(\"mousedown\", this.startDragging);\n    }\n  }\n\n  @Watch(\"autoplay\")\n  @Watch(\"autoplayDisabledByMotionMedia\")\n  @Watch(\"autoplayDisabledByMouse\")\n  @Watch(\"autoplayDisabledByFocus\")\n  @Watch(\"autoplayDisabledByScroll\")\n  @Watch(\"autoplayDisabledByDrag\")\n  @Watch(\"autoplayTimeout\")\n  @Watch(\"disabled\")\n  autoplayRunningWatcher() {\n    if (\n      !this.autoplay\n      || this.disabled\n      || this.autoplayDisabledByMotionMedia\n      || this.autoplayDisabledByMouse\n      || this.autoplayDisabledByFocus\n      || this.autoplayDisabledByScroll\n      || this.autoplayDisabledByDrag\n    ) {\n      this.autoplayIntervalId && window.clearInterval(this.autoplayIntervalId);\n      this.autoplayIntervalId = null;\n      this.autoplayRunning = false;\n    } else {\n      this.autoplayIntervalId && window.clearInterval(this.autoplayIntervalId);\n      this.autoplayIntervalId = window.setInterval(this.autoplayInterval, this.autoplayTimeout);\n      this.autoplayRunning = true;\n    }\n  }\n\n  @Watch(\"slideElements\")\n  @Watch(\"currentSwipeSlides\")\n  snapAlignWatcher() {\n    this.slideElements.forEach((slide, index) => {\n      const shouldSnap = (index - this.currentSwipeSlides) % this.currentSwipeSlides === 0;\n\n      if (shouldSnap) {\n        slide.style.removeProperty(\"scroll-snap-align\");\n      } else {\n        slide.style.setProperty(\"scroll-snap-align\", \"none\");\n      }\n    });\n  }\n\n  @Watch(\"slide\")\n  @Watch(\"variant\")\n  @Watch(\"slideElements\")\n  @Watch(\"currentSlides\")\n  @Watch(\"tabThrough\")\n  inertWatcher() {\n    this.slideElements.forEach((slide, index) => {\n      const isActive = this.tabThrough\n        || this.variant === \"cards\"\n        || index >= this.slide && index < this.slide + this.currentSlides;\n\n      slide.inert = !isActive;\n\n      if (isActive) {\n        slide.removeAttribute(\"aria-hidden\");\n      } else {\n        slide.setAttribute(\"aria-hidden\", isActive ? \"false\" : \"true\");\n      }\n    });\n  }\n\n  @Watch(\"variant\")\n  @Watch(\"tabThrough\")\n  @Watch(\"nextElements\")\n  @Watch(\"previousElements\")\n  prevNextNavigationWatcher() {\n    const tabThrough = this.tabThrough || this.variant === \"cards\";\n\n    const setAriaAttributes = (element) => {\n      const isStzh = isStzhElement(element);\n\n      if (tabThrough) {\n        element.setAttribute(\"aria-hidden\", \"true\");\n        element.setAttribute(isStzh ? \"a11y-tabindex\" : \"tabindex\", \"-1\");\n      } else {\n        element.removeAttribute(\"aria-hidden\");\n        element.removeAttribute(isStzh ? \"a11y-tabindex\" : \"tabindex\");\n      }\n    }\n\n    this.nextElements.forEach(setAriaAttributes);\n    this.previousElements.forEach(setAriaAttributes);\n  }\n\n  @Watch(\"currentSlides\")\n  @Watch(\"slideElements\")\n  @Watch(\"nextElements\")\n  @Watch(\"previousElements\")\n  @Watch(\"navigationTextElements\")\n  prevNextHiddenWatcher() {\n    const hideElements = this.slideElements.length <= this.currentSlides;\n\n    const setHiddenAttribute = (element) => {\n      if (hideElements) {\n        element.setAttribute(\"hidden\", \"\");\n      } else {\n        element.removeAttribute(\"hidden\");\n      }\n    };\n\n    this.navigationTextElements.forEach(setHiddenAttribute);\n    this.nextElements.forEach(setHiddenAttribute);\n    this.previousElements.forEach(setHiddenAttribute);\n  }\n\n  @Watch(\"disabled\")\n  @Watch(\"slide\")\n  @Watch(\"currentSlides\")\n  @Watch(\"slideElements\")\n  @Watch(\"nextElements\")\n  @Watch(\"previousElements\")\n  nextPrevDisabledWatcher() {\n    if (!this.scrollElement) {\n      return;\n    }\n\n    const reachedFirstSlide = this.slide === 0;\n    const reachedLastSlide = this.hasReachedLastSlide();\n\n    this.nextElements.forEach((element) => {\n      const isStzh = isStzhElement(element);\n      element.setAttribute(isStzh ? \"a11y-disabled\" : \"aria-disabled\", reachedLastSlide || this.disabled ? \"true\" : \"false\");\n    });\n\n    this.previousElements.forEach((element) => {\n      const isStzh = isStzhElement(element);\n      element.setAttribute(isStzh ? \"a11y-disabled\" : \"aria-disabled\", reachedFirstSlide || this.disabled ? \"true\" : \"false\");\n    });\n  }\n\n  @Watch(\"nextElements\")\n  nextElementsWatcher() {\n    this.nextElements.forEach((nextElement) => {\n      const isStzh = isStzhElement(nextElement);\n\n      nextElement.addEventListener(\"click\", this.onNextClick);\n      nextElement.setAttribute(isStzh ? \"a11y-controls\" : \"aria-controls\", `${this.carouselId}-scroll`);\n    });\n  }\n\n  @Watch(\"previousElements\")\n  previousElementsWatcher() {\n    this.previousElements.forEach((previousElement) => {\n      const isStzh = isStzhElement(previousElement);\n\n      previousElement.addEventListener(\"click\", this.onPreviousClick);\n      previousElement.setAttribute(isStzh ? \"a11y-controls\" : \"aria-controls\", `${this.carouselId}-scroll`);\n    });\n  }\n\n  /** Whether autoplay is currently running */\n  @State() autoplayRunning: boolean = false;\n\n  /** Whether autoplay is currently disabled by reduced motion media */\n  @State() autoplayDisabledByMotionMedia: boolean = false;\n\n  /** Whether autoplay is currently disabled by mouse */\n  @State() autoplayDisabledByMouse: boolean = false;\n\n  /** Whether autoplay is currently disabled by focus */\n  @State() autoplayDisabledByFocus: boolean = false;\n\n  /** Whether autoplay is currently disabled by scroll */\n  @State() autoplayDisabledByScroll: boolean = false;\n\n  /** Whether autoplay is currently disabled by drag */\n  @State() autoplayDisabledByDrag: boolean = false;\n\n  /** Whether user is currently dragging with mouse */\n  @State() dragging: boolean = false;\n\n  /** Whether user is currently scrolling */\n  @State() scrolling: boolean = false;\n\n  /** Aria live text */\n  @State() ariaLive: string = \"\";\n\n  /** Currently shown slides */\n  @State() currentSlides: number = 1;\n\n  /** How many slides should be moved currently */\n  @State() currentSwipeSlides: number = 1;\n\n  /** Slide elements */\n  @State() slideElements: HTMLElement[] = [];\n\n  /** Previous elements */\n  @State() previousElements: HTMLElement[] = [];\n\n  /** Next elements */\n  @State() nextElements: HTMLElement[] = [];\n\n  /** Navigation text elements */\n  @State() navigationTextElements: HTMLElement[] = [];\n\n  private scrollElement: HTMLElement;\n\n  /** Unique generated id */\n  private carouselId: string;\n\n  /** Current scroll position */\n  private slideScrollLeft: number = 0;\n\n  /** Flag whether scrolling was done by user or not */\n  private scrolledByAutoplay: boolean = false;\n\n  /** Timeout ID used to catch the end of scroll events */\n  private scrollTimeoutId: number = null;\n\n  /** Interval ID for autoplay */\n  private autoplayIntervalId: number;\n\n  /** Last drag event position */\n  private lastX: number = null;\n\n  /** Where the dragging started */\n  private startX: number = null;\n\n  /** Where the dragging started scroll position */\n  private startScrollLeft: number = null;\n\n  /** Timeout ID for a smooth drag release */\n  private disableTimeoutId: number = null;\n\n  /** Calculated size of a single item */\n  private itemSize: number;\n\n  /** Resize observer used to update item size */\n  private resizeObserver: ResizeObserver;\n\n  /** Mutation observer used to keep track of slides */\n  private mutationObserver: MutationObserver;\n\n  /** Whether user has just stopped dragging */\n  private stoppedDragging: boolean = false;\n\n  private scrollToSlide(index, behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    if (this.disabled) {\n      return;\n    }\n\n    this.scrollElement.scrollTo({\n      left: index * this.itemSize,\n      behavior: reducedMotionMedia.matches ? \"auto\" : behaviour\n    });\n  }\n\n  /** Width of a slide  */\n  private sizingMethod() {\n    const css = window.getComputedStyle(this.scrollElement);\n\n    return ((this.scrollElement.firstElementChild as HTMLElement) || this.scrollElement).offsetWidth\n      + parseInt(css.getPropertyValue(\"column-gap\"), 10);\n  }\n\n  /**\n   * Calculates the active slide.\n   * The scroll-snap-type property makes sure that the container snaps perfectly to integer multiples.\n   */\n  private calculateSlide() {\n    // Math.round: Dispatch 'stzhSlidePassed' events around the center of each slide\n    // Math.ceil: Dispatch 'stzhSlidePassed' events as soon as the next one is visible\n    // Math.floor: Dispatch 'stzhSlidePassed' events only when the next one is fully visible\n    return Math.round(this.scrollElement.scrollLeft / this.itemSize);\n  }\n\n  private scrollToPreviousSnapPoint(behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    if (this.disabled) {\n      return;\n    }\n\n    let previousIndex = this.slide;\n    let canSnap = false;\n\n    while (!canSnap && previousIndex > 0) {\n      previousIndex = previousIndex - 1;\n      canSnap = (previousIndex - this.currentSwipeSlides) % this.currentSwipeSlides === 0;\n    }\n\n    this.slideTo(previousIndex, behaviour);\n  }\n\n  private scrollToNextSnapPoint(behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    if (this.disabled) {\n      return;\n    }\n\n    this.slideTo(this.slide + this.currentSwipeSlides, behaviour);\n  }\n\n  private update() {\n    this.slide = this.calculateSlide();\n    this.slideScrollLeft = this.slide * this.itemSize;\n\n    this.onMutation();\n  }\n\n  private hasReachedLastSlide() {\n    const { scrollLeft, offsetWidth, scrollWidth } = this.scrollElement;\n    return Math.ceil(scrollLeft + offsetWidth) >= scrollWidth;\n  }\n\n  private onReducedMotionMediaChange = () => {\n    this.autoplayDisabledByMotionMedia = reducedMotionMedia.matches;\n  }\n\n  private onMouseenter = () => {\n    if (!this.preventAutoplayPause) {\n      this.autoplayDisabledByMouse = true;\n    }\n  }\n\n  private onMouseleave = () => {\n    this.autoplayDisabledByMouse = false;\n  }\n\n  private onFocusin = () => {\n    if (!this.preventAutoplayPause) {\n      this.autoplayDisabledByFocus = true;\n    }\n  }\n\n  private onFocusout = () => {\n    this.autoplayDisabledByFocus = false;\n  }\n\n  private onPreviousClick = () => {\n    this.scrollToPreviousSnapPoint();\n  }\n\n  private onNextClick = () => {\n    this.scrollToNextSnapPoint();\n  }\n\n  private onSlideResize = () => {\n    if (this.scrollElement) {\n      this.itemSize = this.sizingMethod();\n    }\n  }\n\n  private onMutation = () => {\n    if (!this.scrollElement) {\n      return;\n    }\n\n    this.slideElements = Array.from(this.scrollElement.children) as HTMLElement[];\n\n    this.slideElements.forEach((slide, index) => {\n      slide.setAttribute(\"role\", \"group\");\n      slide.setAttribute(\"aria-roledescription\", \"slide\");\n      slide.setAttribute(\"aria-label\", this.localization.slideLabel\n        .replace(/\\{current\\}/gi, (index + 1).toString())\n        .replace(/\\{total\\}/gi, this.slideElements.length.toString())\n      );\n    });\n\n    this.previousElements = Array.from(this.element.querySelectorAll(\"[data-stzh-carousel-previous]\"));\n    this.nextElements = Array.from(this.element.querySelectorAll(\"[data-stzh-carousel-next]\"));\n    this.navigationTextElements = Array.from(this.element.querySelectorAll(\"[data-stzh-carousel-navigation-text]\"));\n  }\n\n  private onScroll = () => {\n    if (this.scrollTimeoutId === null) {\n      const direction = (this.scrollElement.scrollLeft > this.slideScrollLeft) ? 1 : -1;\n\n      this.scrolling = true;\n\n      if (!this.scrolledByAutoplay) {\n        if (this.preventAutoplayStop) {\n          this.autoplayDisabledByScroll = true;\n        } else {\n          this.autoplay = false;\n        }\n      }\n\n      this.stzhSlideStart.emit({\n        component: \"stzh-carousel\",\n        index: this.slide + direction\n      });\n    }\n\n    if (this.slide !== this.calculateSlide()) {\n      this.update();\n      this.stzhSlidePassed.emit({\n        component: \"stzh-carousel\",\n        index: this.slide\n      });\n    }\n\n    this.scrollTimeoutId && window.clearTimeout(this.scrollTimeoutId);\n    this.scrollTimeoutId = window.setTimeout(this.onScrollEnd, this.scrollTimeout);\n  }\n\n  private onScrollEnd = () => {\n    this.scrollTimeoutId = null;\n    this.update();\n\n    this.scrolling = false;\n    this.scrolledByAutoplay = false;\n    this.autoplayDisabledByScroll = false;\n\n    if (this.stoppedDragging) {\n      this.stoppedDragging = false;\n      this.scrollElement.style.removeProperty(\"scroll-behavior\");\n      this.scrollElement.style.removeProperty(\"scroll-snap-type\");\n    }\n\n    if (this.tabThrough || this.variant === \"cards\") {\n      this.ariaLive = \"\";\n    } else {\n      this.ariaLive = (this.currentSlides > 1 ? this.localization.slidesLabel : this.localization.slideLabel)\n        .replace(/\\{(current|from)\\}/gi, (this.slide + 1).toString())\n        .replace(/\\{to\\}/gi, (this.slide + this.currentSlides).toString())\n        .replace(/\\{total\\}/gi, this.slideElements.length.toString());\n    }\n\n    this.stzhSlideEnd.emit({\n      component: \"stzh-carousel\",\n      index: this.slide\n    });\n  }\n\n  private onMediaChange = () => {\n    const ultra = media(\"ultra\").matches;\n    const large = media(\"large\").matches;\n    const medium = media(\"medium\").matches;\n    const small = media(\"small\").matches;\n\n    if (ultra && this.slidesUltra !== 0) {\n      this.currentSlides = this.slidesUltra;\n    } else if (large && this.slidesLarge !== 0) {\n      this.currentSlides = this.slidesLarge;\n    } else if (medium && this.slidesMedium !== 0) {\n      this.currentSlides = this.slidesMedium;\n    } else if (small && this.slidesSmall !== 0) {\n      this.currentSlides = this.slidesSmall;\n    } else {\n      this.currentSlides = this.slides;\n    }\n\n    // if (ultra && this.swipeSlidesUltra !== 0) {\n    //   this.currentSwipeSlides = this.swipeSlidesUltra;\n    // } else if (large && this.swipeSlidesLarge !== 0) {\n    //   this.currentSwipeSlides = this.swipeSlidesLarge;\n    // } else if (medium && this.swipeSlidesMedium !== 0) {\n    //   this.currentSwipeSlides = this.swipeSlidesMedium;\n    // } else if (small && this.swipeSlidesSmall !== 0) {\n    //   this.currentSwipeSlides = this.swipeSlidesSmall;\n    // } else {\n    //   this.currentSwipeSlides = this.swipeSlides;\n    // }\n\n    this.currentSwipeSlides = this.currentSlides;\n  }\n\n  /** Scroll the slider the appropriate amount of pixels and update the last event position */\n  private mouseMove = (event: MouseEvent) => {\n    const distance = this.lastX - event.clientX;\n    this.lastX = event.clientX;\n\n    this.scrollElement.scrollLeft += distance;\n  }\n\n  /** Clear disable timeout, set up variables and styles and attach the listener. */\n  private startDragging = (event: MouseEvent) => {\n    event.preventDefault();\n\n    this.disableTimeoutId && window.clearTimeout(this.disableTimeoutId);\n    this.disableTimeoutId = null;\n\n    this.startX = this.lastX = event.clientX;\n    this.startScrollLeft = this.scrollElement.scrollLeft;\n    this.scrollElement.style.setProperty(\"scroll-behavior\", \"auto\");\n    this.scrollElement.style.setProperty(\"scroll-snap-type\", \"unset\");\n\n    this.dragging = true;\n\n    if (this.preventAutoplayStop) {\n      this.autoplayDisabledByDrag = true;\n    } else {\n      this.autoplay = false;\n    }\n\n    window.addEventListener(\"mousemove\", this.mouseMove);\n    window.addEventListener(\"mouseup\", this.stopDragging, { capture: true });\n    window.addEventListener(\"click\", this.checkClick, { capture: true });\n  }\n\n  /** User stopped dragging */\n  private stopDragging = (event: MouseEvent) => {\n    event.preventDefault();\n\n    const distance = Math.abs(this.startX - this.lastX);\n    const minimumReached = distance > this.distanceQuickSwipe;\n    const direction = (this.lastX > this.startX) ? 1 : -1;\n\n    this.dragging = false;\n    this.autoplayDisabledByDrag = false;\n\n    const endDraddingLeft = this.scrollElement.scrollLeft;\n\n    this.scrollElement.style.removeProperty(\"scroll-snap-type\");\n    const finalLeft = this.scrollElement.scrollLeft;\n\n    this.scrollElement.style.setProperty(\"scroll-snap-type\", \"unset\");\n    this.scrollElement.scrollTo({ left: endDraddingLeft, behavior: \"auto\" });\n\n    if (finalLeft !== this.startScrollLeft || !minimumReached) {\n      this.scrollElement.scrollTo({ left: finalLeft, behavior: reducedMotionMedia.matches ? \"auto\" : \"smooth\" });\n    } else if (direction === 1) {\n      this.slideToPrevious();\n    } else {\n      this.slideToNext();\n    }\n\n    window.removeEventListener(\"mousemove\", this.mouseMove);\n    window.removeEventListener(\"mouseup\", this.stopDragging, { capture: true });\n\n    this.stoppedDragging = true;\n  }\n\n  private checkClick = (event: MouseEvent) => {\n    const distance = Math.abs(this.startX - this.lastX);\n    const minimumReached = distance > this.distancePreventClick;\n\n    if (minimumReached) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    this.lastX = null;\n\n    window.removeEventListener(\"click\", this.checkClick, { capture: true });\n  }\n\n  private autoplayInterval = () => {\n    this.scrolledByAutoplay = true;\n\n    if (this.hasReachedLastSlide()) {\n      this.slideTo(0);\n    } else {\n      this.slideToNext();\n    }\n  }\n\n  async componentWillLoad() {\n    this.carouselId = `stzh-carousel-${carouselCounter++}`;\n    this.onMediaChange();\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"carousel\");\n    }\n  }\n\n  componentDidLoad() {\n    this.itemSize = this.sizingMethod();\n    this.update();\n\n    this.disabledWatcher();\n    this.preventMouseDragWatcher();\n    this.autoplayRunningWatcher();\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.onMediaChange);\n\n    this.resizeObserver = new ResizeObserver(this.onSlideResize)\n    this.resizeObserver.observe(this.element)\n\n    this.mutationObserver = new MutationObserver(this.onMutation);\n    this.mutationObserver.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    this.scrollTimeoutId && window.clearTimeout(this.scrollTimeoutId);\n    this.scrollTimeoutId = null;\n    this.disabled = true;\n\n    removeMediaChangeListener(this.onMediaChange);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-carousel\": true,\n      \"stzh-carousel--is-disabled\": this.disabled,\n      \"stzh-carousel--is-draggable\": !this.preventMouseDrag,\n      \"stzh-carousel--is-non-interactive\": this.nonInteractive,\n      \"stzh-carousel--is-dragging\": this.dragging,\n      \"stzh-carousel--is-scrolling\": this.scrolling,\n      \"stzh-carousel--has-autoplay\": this.autoplay,\n      \"stzh-carousel--is-autoplay-running\": this.autoplayRunning,\n    };\n\n    return (\n      <Host\n        aria-roledescription=\"carousel\"\n        style={{\n          '--slides': this.currentSlides.toString()\n        }}\n      >\n        <div class={classes}>\n          <slot name=\"actions\"></slot>\n          <div\n            class=\"stzh-carousel__vhidden\"\n            aria-live={this.autoplayDisabledByFocus || this.autoplayDisabledByMouse ? \"polite\" : \"off\"}\n          >\n            {this.ariaLive}\n          </div>\n          <div\n            ref={(el) => (this.scrollElement = el as HTMLDivElement)}\n            id={`${this.carouselId}-scroll`}\n            class=\"stzh-carousel__scroll\"\n          >\n            <slot></slot>\n          </div>\n          {this.withTrack &&\n            <div class=\"stzh-carousel__indicator\">\n              <div\n                class=\"stzh-carousel__indicator-track\"\n                style={{\n                  left: `${100 / (this.slideElements?.length || 1) * this.slide}%`,\n                  width: `${100 / (this.slideElements?.length || 1) * this.currentSlides || 0}%`\n                }}\n              ></div>\n            </div>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

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

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

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

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

@@ -1,2 +0,0 @@
-import{r,h as e,a as t,g as s}from"./p-c7bfac7a.js";import{s as a}from"./p-7e304ea3.js";import"./p-9b063923.js";const o=":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-readspeaker{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;--background-color:var(--stzh-readspeaker-background-color, var(--stzh-color-white));--justify-content:var(--stzh-readspeaker-justify-content, space-between);--column-gap:var(--stzh-readspeaker-column-gap, auto);--audio-track-height:0.1875rem;--audio-track-background-color:var(--stzh-readspeaker-audio-track-background-color, var(--stzh-color-black20op));--audio-track-progress-background-color:var(--stzh-readspeaker-audio-track-progress-background-color, var(--stzh-color-secondary40));--dropdown-position:var(--stzh-readspeaker-dropdown-position, absolute);--dropdown-top:var(--stzh-readspeaker-dropdown-top, var(--stzh-form-input-small-height));--dropdown-bottom:var(--stzh-readspeaker-dropdown-bottom, auto);--dropdown-left:var(--stzh-readspeaker-dropdown-left, 0px);--dropdown-right:var(--stzh-readspeaker-dropdown-right, auto);--dropdown-settings-top:var(--stzh-readspeaker-dropdown-settings-top, var(--stzh-form-input-small-height));--dropdown-settings-bottom:var(--stzh-readspeaker-dropdown-settings-bottom, auto);--dropdown-settings-left:var(--stzh-readspeaker-dropdown-settings-left, 0px);--dropdown-settings-right:var(--stzh-readspeaker-dropdown-settings-right, auto)}stzh-readspeaker[hidden]{display:none}stzh-readspeaker::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-readspeaker::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-readspeaker *,stzh-readspeaker *::before,stzh-readspeaker *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}stzh-readspeaker .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-readspeaker .stzh-fylingfocus-focused{outline-style:none !important}stzh-readspeaker .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}@media screen and (min-width: 900px){stzh-readspeaker{--column-gap:var(--stzh-readspeaker-column-gap, var(--stzh-space-medium));--dropdown-top:var(--stzh-readspeaker-dropdown-top, var(--stzh-form-input-tiny-height));--dropdown-settings-top:var(--stzh-readspeaker-dropdown-settings-top, var(--stzh-form-input-tiny-height))}}.stzh-readspeaker{position:relative;display:flex;align-items:center;-moz-column-gap:var(--column-gap);column-gap:var(--column-gap);justify-content:var(--justify-content)}.stzh-readspeaker__actions{flex-grow:1;display:flex;align-items:center;justify-content:space-between}.stzh-readspeaker stzh-button.stzh-readspeaker__close{display:none}.stzh-readspeaker:has(.rsbtn.rsexpanded) .stzh-readspeaker__close{display:inline-grid}@media screen and (min-width: 600px){.stzh-readspeaker:has(.rsbtn.rsexpanded) .stzh-readspeaker__close{display:none}}.stzh-readspeaker .rsbtn{z-index:var(--stzh-z-index-popover) !important;background:var(--background-color);position:var(--dropdown-position);top:var(--dropdown-top);bottom:var(--dropdown-bottom);left:var(--dropdown-left);right:var(--dropdown-right)}.stzh-readspeaker .rs_splitbutton.rs_splitbutton-exp{display:inline-flex}.stzh-readspeaker .rs_addtools,.stzh-readspeaker .rsbtn{margin-top:var(--audio-track-height);margin-bottom:0px}.stzh-readspeaker [class*=\" rsicn-\"],.stzh-readspeaker [class*=\" rsicn-\"]:before,.stzh-readspeaker [class^=rsicn-],.stzh-readspeaker [class^=rsicn-]:before{content:\"\";display:block;width:var(--stzh-icon-size);height:var(--stzh-icon-size);background-size:contain;background-position:center center}.stzh-readspeaker .rsicn-pause::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cpath d='M6 5h2v14H6zm10 0h2v14h-2z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_pause:hover .rsicn-pause::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cpath d='M6 5h2v14H6zm10 0h2v14h-2z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn.rsstopped .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause .rsicn::before,.stzh-readspeaker .rsbtn.rsidle .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause .rsicn::before,.stzh-readspeaker .rsbtn.rspaused .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause .rsicn::before{content:\"\";background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M16.394 12 10 7.737v8.526zm2.982.416L8.777 19.482A.5.5 0 0 1 8 19.066V4.934a.5.5 0 0 1 .777-.416l10.599 7.066a.5.5 0 0 1 0 .832'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='currentColor' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn.rsstopped .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause:hover .rsicn::before,.stzh-readspeaker .rsbtn.rsidle .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause:hover .rsicn::before,.stzh-readspeaker .rsbtn.rspaused .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause:hover .rsicn::before{content:\"\";background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M16.394 12 10 7.737v8.526zm2.982.416L8.777 19.482A.5.5 0 0 1 8 19.066V4.934a.5.5 0 0 1 .777-.416l10.599 7.066a.5.5 0 0 1 0 .832'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='currentColor' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.stzh-readspeaker .rsicn-stop::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cpath d='M7 7v10h10V7zM6 5h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_stop:hover .rsicn-stop::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cpath d='M7 7v10h10V7zM6 5h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsicn-backwards::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cpath d='m12 10.667 9.223-6.149a.5.5 0 0 1 .777.416v14.132a.5.5 0 0 1-.777.416L12 13.333v5.733a.5.5 0 0 1-.777.416L.624 12.416a.5.5 0 0 1 0-.832l10.599-7.066a.5.5 0 0 1 .777.416zm-2 5.596V7.737L3.606 12zm10 0V7.737L13.606 12z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_rewind:hover .rsicn-backwards::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cpath d='m12 10.667 9.223-6.149a.5.5 0 0 1 .777.416v14.132a.5.5 0 0 1-.777.416L12 13.333v5.733a.5.5 0 0 1-.777.416L.624 12.416a.5.5 0 0 1 0-.832l10.599-7.066a.5.5 0 0 1 .777.416zm-2 5.596V7.737L3.606 12zm10 0V7.737L13.606 12z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsicn-forwards::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cpath d='m12 13.333-9.223 6.15A.5.5 0 0 1 2 19.065V4.934a.5.5 0 0 1 .777-.416L12 10.668V4.933a.5.5 0 0 1 .777-.416l10.599 7.066a.5.5 0 0 1 0 .832l-10.599 7.066a.5.5 0 0 1-.777-.416zM10.394 12 4 7.737v8.526zM14 7.737v8.526L20.394 12z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_forward:hover .rsicn-forwards::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cpath d='m12 13.333-9.223 6.15A.5.5 0 0 1 2 19.065V4.934a.5.5 0 0 1 .777-.416L12 10.668V4.933a.5.5 0 0 1 .777-.416l10.599 7.066a.5.5 0 0 1 0 .832l-10.599 7.066a.5.5 0 0 1-.777-.416zM10.394 12 4 7.737v8.526zM14 7.737v8.526L20.394 12z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsicn-volume::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M10 7.22 6.603 10H3v4h3.603L10 16.78zM5.889 16H2a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h3.889l5.294-4.332a.5.5 0 0 1 .817.387v15.89a.5.5 0 0 1-.817.387zm13.517 4.134-1.416-1.416A8.98 8.98 0 0 0 21 12a8.98 8.98 0 0 0-3.304-6.968l1.42-1.42A10.98 10.98 0 0 1 23 12c0 3.223-1.386 6.122-3.594 8.134m-3.543-3.543-1.422-1.422A4 4 0 0 0 16 12c0-1.43-.75-2.685-1.88-3.392l1.439-1.439A5.99 5.99 0 0 1 18 12c0 1.842-.83 3.49-2.137 4.591'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_volume:hover .rsicn-volume::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M10 7.22 6.603 10H3v4h3.603L10 16.78zM5.889 16H2a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h3.889l5.294-4.332a.5.5 0 0 1 .817.387v15.89a.5.5 0 0 1-.817.387zm13.517 4.134-1.416-1.416A8.98 8.98 0 0 0 21 12a8.98 8.98 0 0 0-3.304-6.968l1.42-1.42A10.98 10.98 0 0 1 23 12c0 3.223-1.386 6.122-3.594 8.134m-3.543-3.543-1.422-1.422A4 4 0 0 0 16 12c0-1.43-.75-2.685-1.88-3.392l1.439-1.439A5.99 5.99 0 0 1 18 12c0 1.842-.83 3.49-2.137 4.591'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.stzh-readspeaker .rsicn-speed::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16m3.833 3.337a.595.595 0 0 1 .763.067.59.59 0 0 1 .063.76q-3.27 4.569-3.598 4.897a1.5 1.5 0 0 1-2.122 0 1.5 1.5 0 0 1 0-2.122q.56-.56 4.894-3.602M17.5 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2m-11 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2m2.318-3.596a1 1 0 1 1-1.416 1.414 1 1 0 0 1 1.416-1.414M12 5.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_speed:hover .rsicn-speed::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16m3.833 3.337a.595.595 0 0 1 .763.067.59.59 0 0 1 .063.76q-3.27 4.569-3.598 4.897a1.5 1.5 0 0 1-2.122 0 1.5 1.5 0 0 1 0-2.122q.56-.56 4.894-3.602M17.5 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2m-11 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2m2.318-3.596a1 1 0 1 1-1.416 1.414 1 1 0 0 1 1.416-1.414M12 5.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_closer:focus span.rsicn::before,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_closer:hover span.rsicn::before{content:\"\"}.stzh-readspeaker .rsicn-cross::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cpath d='m12 10.586 7.778-7.778 1.414 1.414L13.414 12l7.778 7.778-1.414 1.414L12 13.414l-7.778 7.778-1.414-1.414L10.586 12 2.808 4.222l1.414-1.414z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_closer:hover .rsicn-cross::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cpath d='m12 10.586 7.778-7.778 1.414 1.414L13.414 12l7.778 7.778-1.414 1.414L12 13.414l-7.778 7.778-1.414-1.414L10.586 12 2.808 4.222l1.414-1.414z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rs_addtools .rsbtn_tooltoggle .rsicn::before,.stzh-readspeaker .rsbtn .rsbtn_tooltoggle .rsicn::before{content:\"\"}.stzh-readspeaker .rsicn-arrow-down::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M12 3c-.825 0-1.5.675-1.5 1.5S11.175 6 12 6s1.5-.675 1.5-1.5S12.825 3 12 3m0 15c-.825 0-1.5.675-1.5 1.5S11.175 21 12 21s1.5-.675 1.5-1.5S12.825 18 12 18m0-7.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='currentColor' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_tooltoggle:hover .rsicn-arrow-down::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M12 3c-.825 0-1.5.675-1.5 1.5S11.175 6 12 6s1.5-.675 1.5-1.5S12.825 3 12 3m0 15c-.825 0-1.5.675-1.5 1.5S11.175 21 12 21s1.5-.675 1.5-1.5S12.825 18 12 18m0-7.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='currentColor' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.stzh-readspeaker #rsmpl_container .rs-player-loadindicator,.stzh-readspeaker .rsbtn .rs-player-loadindicator{background-color:var(--audio-track-background-color);height:var(--audio-track-height);top:calc(var(--audio-track-height) / -1);left:0;right:0px}.stzh-readspeaker #rsmpl_container .rs-player-loadindicator .rsbtn-loading,.stzh-readspeaker .rsbtn .rs-player-loadindicator .rsbtn-loading,.stzh-readspeaker #rsmpl_container .rs-player-loadindicator .rsbtn-progress,.stzh-readspeaker .rsbtn .rs-player-loadindicator .rsbtn-progress{background-color:var(--audio-track-progress-background-color)}.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle{display:flex;justify-content:center;align-items:center;border-left:none;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height);transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed);background-color:transparent;outline:none;float:none}.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item [class*=\" rsicn-\"],.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item [class*=\" rsicn-\"]:before,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item [class^=rsicn-],.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item [class^=rsicn-]:before,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active [class*=\" rsicn-\"],.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active [class*=\" rsicn-\"]:before,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active [class^=rsicn-],.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active [class^=rsicn-]:before,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle [class*=\" rsicn-\"],.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle [class*=\" rsicn-\"]:before,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle [class^=rsicn-],.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle [class^=rsicn-]:before,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle [class*=\" rsicn-\"],.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle [class*=\" rsicn-\"]:before,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle [class^=rsicn-],.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle [class^=rsicn-]:before{width:var(--stzh-icon-size);height:var(--stzh-icon-size)}@media screen and (min-width: 900px){.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item [class*=\" rsicn-\"],.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item [class*=\" rsicn-\"]:before,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item [class^=rsicn-],.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item [class^=rsicn-]:before,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active [class*=\" rsicn-\"],.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active [class*=\" rsicn-\"]:before,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active [class^=rsicn-],.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active [class^=rsicn-]:before,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle [class*=\" rsicn-\"],.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle [class*=\" rsicn-\"]:before,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle [class^=rsicn-],.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle [class^=rsicn-]:before,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle [class*=\" rsicn-\"],.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle [class*=\" rsicn-\"]:before,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle [class^=rsicn-],.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle [class^=rsicn-]:before{width:var(--stzh-icon-size-small);height:var(--stzh-icon-size-small)}}@media screen and (min-width: 900px){.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle{width:var(--stzh-form-input-tiny-height);height:var(--stzh-form-input-tiny-height)}}.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:focus,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active:focus,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle:focus,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle:focus{background-color:transparent;outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:hover,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active:hover,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle:hover,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle:hover{background-color:var(--stzh-color-secondary20)}@media screen and (max-width: 599px){.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item.rsbtn_closer,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active.rsbtn_closer,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle.rsbtn_closer,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle.rsbtn_closer{display:none}}.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle{margin-right:var(--stzh-space-xxxsmall)}.stzh-readspeaker .rs_splitbutton .rsbtn_exp .rsbtn_exp_inner button.rsbtn_pause.rsbtn_player_item{padding-left:0px;padding-right:0px}.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_stop:active span.rsicn{background:transparent}.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle{display:flex !important;position:relative;top:0;border-left:none;border-right:none}.stzh-readspeaker .rs_splitbutton.zoom-tooltoggler.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle,.stzh-readspeaker .rs_splitbutton.zoom-tooltoggler.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle{left:0}.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner{position:static;background:transparent;display:inline-flex;border:none;border-radius:0px;gap:var(--stzh-space-xxxsmall)}.stzh-readspeaker .rsbtn .rsbtn_exp,.stzh-readspeaker .rsbtn.rsexpanded .rsbtn_exp .rsbtn_exp_inner{height:auto}.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_dropdown{box-sizing:border-box;border:none;width:var(--stzh-form-input-small-height);height:7.25rem;top:var(--stzh-form-input-small-height);margin-top:var(--stzh-space-xxsmall);background-color:var(--stzh-color-grey10);padding:0;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_dropdown{width:var(--stzh-form-input-tiny-height);top:var(--stzh-form-input-tiny-height)}}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range],.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range],.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range],.stzh-readspeaker .rsbtn input.rs-slider[type=range]{overflow:hidden;-webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important;background:transparent;margin:0px;--thumb-height:1.25rem;--thumb-border-width:0.125rem;--thumb-border-color:var(--stzh-color-primary70);--thumb-background-color:var(--stzh-color-white);--track-height:0.5rem;--track-color:var(--stzh-color-black40op);--track-progress-color:var(--stzh-color-secondary60);--clip-edges:0.0625rem}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range],.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-webkit-slider-runnable-track,.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-webkit-slider-thumb,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range],.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-webkit-slider-runnable-track,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-webkit-slider-thumb,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range],.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-webkit-slider-runnable-track,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-webkit-slider-thumb,.stzh-readspeaker .rsbtn input.rs-slider[type=range],.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-webkit-slider-runnable-track,.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-webkit-slider-thumb{position:relative;-webkit-appearance:none;-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);height:var(--thumb-height)}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range],.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-moz-range-thumb,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range],.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-moz-range-thumb,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range],.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-moz-range-thumb,.stzh-readspeaker .rsbtn input.rs-slider[type=range],.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-moz-range-thumb{position:relative;margin:0px;-moz-appearance:none;appearance:none;-moz-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);height:var(--thumb-height)}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-webkit-slider-runnable-track,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-webkit-slider-runnable-track,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-webkit-slider-runnable-track,.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-webkit-slider-runnable-track{background:linear-gradient(var(--track-color) 0 0) scroll no-repeat center/100% calc(var(--track-height) + 0.0625rem)}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-moz-range-track{width:100%;background:var(--track-color)}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-moz-range-progress,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-moz-range-progress,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-moz-range-progress,.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-moz-range-progress{-moz-appearance:none;appearance:none;background:var(--track-progress-color);transition-delay:30ms}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-moz-range-progress,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-moz-range-progress,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-moz-range-progress,.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-moz-range-progress{height:calc(var(--track-height) + 0.0625rem);border-radius:var(--track-height)}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-webkit-slider-thumb,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-webkit-slider-thumb,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-webkit-slider-thumb,.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-webkit-slider-thumb{--thumb-radius:calc((var(--thumb-height) * 0.5) - 0.0625rem);--clip-top:calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);--clip-bottom:calc(var(--thumb-height) - var(--clip-top));--clip-further:calc(100% + 0.0625rem);--box-fill:calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax var(--track-progress-color);width:var(--thumb-width, var(--thumb-height));background-color:var(--thumb-background-color);border-style:solid;border-width:var(--thumb-border-width);border-color:var(--thumb-border-color);box-shadow:var(--box-fill);border-radius:var(--thumb-width, var(--thumb-height));filter:brightness(100%);-webkit-clip-path:polygon(100% -0.0625rem, var(--clip-edges) -0.0625rem, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further));clip-path:polygon(100% -0.0625rem, var(--clip-edges) -0.0625rem, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further))}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-moz-range-thumb,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-moz-range-thumb,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-moz-range-thumb,.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-moz-range-thumb{background-color:var(--thumb-background-color);border-style:solid;border-width:var(--thumb-border-width);border-color:var(--thumb-border-color);border:0;width:var(--thumb-width, var(--thumb-height));border-radius:var(--thumb-width, var(--thumb-height));cursor:grab}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]:active,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]:active,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]:active,.stzh-readspeaker .rsbtn input.rs-slider[type=range]:active{cursor:-webkit-grabbing;cursor:grabbing}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]:active::-webkit-slider-thumb,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]:active::-webkit-slider-thumb,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]:active::-webkit-slider-thumb,.stzh-readspeaker .rsbtn input.rs-slider[type=range]:active::-webkit-slider-thumb{cursor:-webkit-grabbing;cursor:grabbing}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]:active::-moz-range-thumb,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]:active::-moz-range-thumb,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]:active::-moz-range-thumb,.stzh-readspeaker .rsbtn input.rs-slider[type=range]:active::-moz-range-thumb{cursor:grabbing}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]:disabled,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]:disabled,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]:disabled,.stzh-readspeaker .rsbtn input.rs-slider[type=range]:disabled{cursor:not-allowed}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]:disabled::-webkit-slider-thumb,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]:disabled::-webkit-slider-thumb,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]:disabled::-webkit-slider-thumb,.stzh-readspeaker .rsbtn input.rs-slider[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]:disabled::-moz-range-thumb,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]:disabled::-moz-range-thumb,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]:disabled::-moz-range-thumb,.stzh-readspeaker .rsbtn input.rs-slider[type=range]:disabled::-moz-range-thumb{cursor:not-allowed}.stzh-readspeaker .rsbtn .rs-slider.vertical,.stzh-readspeaker .rsbtn .rs-slider.vertical.has-datalist{transform:rotate(270deg) translateX(-0.375rem) translateY(-0.375rem);transform-origin:bottom center;width:6.25rem;height:var(--stzh-form-input-small-height)}@media screen and (min-width: 900px){.stzh-readspeaker .rsbtn .rs-slider.vertical,.stzh-readspeaker .rsbtn .rs-slider.vertical.has-datalist{height:var(--stzh-form-input-tiny-height);transform:rotate(270deg) translateX(-1.125rem) translateY(-1.125rem)}}.stzh-readspeaker #rs-textsettings .rs-slider-label,.stzh-readspeaker .rs-dialog-esque .rs-slider-label,.stzh-readspeaker .rs-dialog-slider-dropdown .rs-slider-label,.stzh-readspeaker .rsbtn .rs-slider-label{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);border-radius:0px;border:none;box-shadow:none;color:var(--stzh-color-white);background-color:var(--stzh-color-coolgrey60);height:1.25rem;line-height:1.25rem;padding:0;padding-left:var(--stzh-space-xxsmall);padding-right:var(--stzh-space-xxsmall)}.stzh-readspeaker .rsbtn_powered{display:none}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical{position:absolute;top:var(--dropdown-settings-top);bottom:var(--dropdown-settings-bottom);left:var(--dropdown-settings-left);right:var(--dropdown-settings-right);min-width:initial !important}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools{position:static;border-radius:0px;border:none;margin-top:var(--stzh-space-xxsmall);background-color:var(--stzh-color-grey10);padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li{all:unset}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool{display:flex;align-items:center;padding:var(--stzh-space-xsmall) var(--stzh-space-large);white-space:nowrap;color:var(--stzh-color-primary70);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool:hover,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool:hover{color:var(--stzh-color-primary80);background-color:var(--stzh-color-secondary20)}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool span.rsbtn_btnlabel,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool span.rsbtn_btnlabel{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);margin-left:var(--stzh-space-xsmall);margin-right:auto;color:inherit}.stzh-readspeaker .rsicn-settings::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M3.34 17a10 10 0 0 1-.978-2.326 3 3 0 0 0 .002-5.347A10 10 0 0 1 4.865 4.99a3 3 0 0 0 4.631-2.674 10 10 0 0 1 5.007.002 3 3 0 0 0 4.632 2.672A10 10 0 0 1 20.66 7c.433.75.757 1.53.978 2.326a3 3 0 0 0-.002 5.347 10 10 0 0 1-2.5 4.337 3 3 0 0 0-4.632 2.674 10 10 0 0 1-5.007-.002 3 3 0 0 0-4.632-2.672A10 10 0 0 1 3.34 17m5.66.196a5 5 0 0 1 2.25 2.77q.75.071 1.5.001a5 5 0 0 1 2.25-2.77 5 5 0 0 1 3.525-.565q.435-.614.748-1.298A5 5 0 0 1 18 12c0-1.26.47-2.437 1.273-3.334q-.315-.684-.75-1.298A5 5 0 0 1 15 6.804a5 5 0 0 1-2.25-2.77q-.75-.071-1.499 0a5 5 0 0 1-2.25 2.77 5 5 0 0 1-3.526.564 8 8 0 0 0-.748 1.298A5 5 0 0 1 6 12a5 5 0 0 1-1.273 3.334q.315.684.75 1.298A5 5 0 0 1 9 17.196M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='currentColor' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_tool:hover .rsicn-settings::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M3.34 17a10 10 0 0 1-.978-2.326 3 3 0 0 0 .002-5.347A10 10 0 0 1 4.865 4.99a3 3 0 0 0 4.631-2.674 10 10 0 0 1 5.007.002 3 3 0 0 0 4.632 2.672A10 10 0 0 1 20.66 7c.433.75.757 1.53.978 2.326a3 3 0 0 0-.002 5.347 10 10 0 0 1-2.5 4.337 3 3 0 0 0-4.632 2.674 10 10 0 0 1-5.007-.002 3 3 0 0 0-4.632-2.672A10 10 0 0 1 3.34 17m5.66.196a5 5 0 0 1 2.25 2.77q.75.071 1.5.001a5 5 0 0 1 2.25-2.77 5 5 0 0 1 3.525-.565q.435-.614.748-1.298A5 5 0 0 1 18 12c0-1.26.47-2.437 1.273-3.334q-.315-.684-.75-1.298A5 5 0 0 1 15 6.804a5 5 0 0 1-2.25-2.77q-.75-.071-1.499 0a5 5 0 0 1-2.25 2.77 5 5 0 0 1-3.526.564 8 8 0 0 0-.748 1.298A5 5 0 0 1 6 12a5 5 0 0 1-1.273 3.334q.315.684.75 1.298A5 5 0 0 1 9 17.196M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='currentColor' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.stzh-readspeaker .rsicn-click-listen::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cpath d='M13.91 12.36 17 20.854l-2.818 1.026-3.092-8.494-4.172 3.156 1.49-14.909 10.726 10.463z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_tool:hover .rsicn-click-listen::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cpath d='M13.91 12.36 17 20.854l-2.818 1.026-3.092-8.494-4.172 3.156 1.49-14.909 10.726 10.463z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsicn-enlarged-text::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M11.246 15H4.754l-2 5H.6L7 4h2l6.4 16h-2.154zm-.8-2L8 6.885 5.554 13zM21 12.535V12h2v8h-2v-.535a4 4 0 1 1 0-6.93M19 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='currentColor' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_tool:hover .rsicn-enlarged-text::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M11.246 15H4.754l-2 5H.6L7 4h2l6.4 16h-2.154zm-.8-2L8 6.885 5.554 13zM21 12.535V12h2v8h-2v-.535a4 4 0 1 1 0-6.93M19 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='currentColor' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.stzh-readspeaker .rsicn-textmode::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cpath d='M20 22H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1m-1-2V4H5v16zM8 7h8v2H8zm0 4h8v2H8zm0 4h5v2H8z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_tool:hover .rsicn-textmode::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cpath d='M20 22H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1m-1-2V4H5v16zM8 7h8v2H8zm0 4h8v2H8zm0 4h5v2H8z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsicn-pagemask::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v5H3v-5h2v3h14v-3zM3 11h18v2H3zm18-3h-2V5H5v3H3V3h18z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_tool:hover .rsicn-pagemask::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v5H3v-5h2v3h14v-3zM3 11h18v2H3zm18-3h-2V5H5v3H3V3h18z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool .rs_minitoggler,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool .rs_minitoggler{margin:0;margin-left:var(--stzh-space-large);background-color:var(--stzh-color-grey70);border-radius:0.75rem;box-sizing:border-box;width:3rem;height:1.5rem;border:none;transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool .rs_minitoggler .on-icon,.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool .rs_minitoggler .off-icon,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool .rs_minitoggler .on-icon,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool .rs_minitoggler .off-icon{display:none}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool .rs_minitoggler::after,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool .rs_minitoggler::after{width:1.25rem;height:1.25rem;top:0.125rem;left:0.125rem;transition:all var(--stzh-base-transition-animation-speed);background-color:var(--stzh-color-white)}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool.active .rs_minitoggler,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool.active .rs_minitoggler{background-color:var(--stzh-color-secondary50)}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool.active .rs_minitoggler::after,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool.active .rs_minitoggler::after{left:calc(50% + 0.125rem);background-color:var(--stzh-color-white)}#readspeaker_tooltip.rs_tooltip{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);z-index:var(--stzh-z-index-popup);border:none;border-radius:0px;box-shadow:none;color:var(--stzh-color-white);background-color:var(--stzh-color-coolgrey60);height:1.25rem;line-height:1.25rem;padding:0;padding-left:var(--stzh-space-xxsmall);padding-right:var(--stzh-space-xxsmall)}.rspopup.rspopup{z-index:var(--stzh-z-index-popup);background:var(--stzh-color-grey10);border:none;border-radius:0px;box-shadow:none}.rspopup.rspopup .rspopup_btn{height:var(--stzh-form-input-small-height);box-sizing:border-box;display:flex;padding:var(--stzh-space-xsmall) var(--stzh-space-large);justify-content:center;align-items:center;gap:var(--stzh-space-xsmall);border-top:none;color:var(--stzh-color-primary70);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.rspopup.rspopup .rspopup_btn:hover{color:var(--stzh-color-primary80);background-color:var(--stzh-color-secondary20)}.rspopup.rspopup .rspopup_btn.rspopup_play::before{content:\"\";margin-right:0;left:0;position:relative;width:var(--stzh-icon-size);height:var(--stzh-icon-size);background-size:contain;background-position:center center;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M10 7.22 6.603 10H3v4h3.603L10 16.78zM5.889 16H2a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h3.889l5.294-4.332a.5.5 0 0 1 .817.387v15.89a.5.5 0 0 1-.817.387zm13.517 4.134-1.416-1.416A8.98 8.98 0 0 0 21 12a8.98 8.98 0 0 0-3.304-6.968l1.42-1.42A10.98 10.98 0 0 1 23 12c0 3.223-1.386 6.122-3.594 8.134m-3.543-3.543-1.422-1.422A4 4 0 0 0 16 12c0-1.43-.75-2.685-1.88-3.392l1.439-1.439A5.99 5.99 0 0 1 18 12c0 1.842-.83 3.49-2.137 4.591'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.rspopup.rspopup .rspopup_btn.rspopup_play:hover::before{background:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M10 7.22 6.603 10H3v4h3.603L10 16.78zM5.889 16H2a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h3.889l5.294-4.332a.5.5 0 0 1 .817.387v15.89a.5.5 0 0 1-.817.387zm13.517 4.134-1.416-1.416A8.98 8.98 0 0 0 21 12a8.98 8.98 0 0 0-3.304-6.968l1.42-1.42A10.98 10.98 0 0 1 23 12c0 3.223-1.386 6.122-3.594 8.134m-3.543-3.543-1.422-1.422A4 4 0 0 0 16 12c0-1.43-.75-2.685-1.88-3.392l1.439-1.439A5.99 5.99 0 0 1 18 12c0 1.842-.83 3.49-2.137 4.591'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.rspopup.rspopup .rspopup_btn.rspopup_play::after{content:none}.rspopup.rspopup .rspopup_btn span.rspopup_label{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);top:0}";function n(){return new Promise(((r,e)=>{if(window.ReadSpeaker){r(window.ReadSpeaker);return}const t=document.getElementsByTagName("HEAD").item(0);const s=document.createElement("script");s.type="text/javascript";s.src=`${window.stzhComponents.pathVendors}/readspeaker/webReader.js?pids=wr&mobile=0`;s.id="rs_req_Init";t.appendChild(s);s.onload=function(){window.ReadSpeaker.mobile=window.ReadSpeaker.mobile;r(window.ReadSpeaker)};s.onerror=e}))}window.rsConf={settings:{},general:{enableSkipAlways:true,shadowDomSelector:"stzh-accordion-item,stzh-timeline-item,stzh-disturber"},ui:{tools:{voicesettings:false,controlpanel:false,translation:false,dictionary:false,download:false,help:false,formreading:false}}};let i=0;const l=class{constructor(e){r(this,e);this.onLinkClick=async r=>{r.preventDefault();this.openPlayer()};this.init=()=>{var r;let e=(r=this.triggerElement)===null||r===void 0?void 0:r.firstElementChild;if(!e){const r=Array.from(this.element.children).find((r=>!r.hasAttribute("slot")));e=r}if(e){e.addEventListener("click",this.onLinkClick);a(e,{icon:"volume-medium",href:this.href})}};this.href=undefined}async openPlayer(){var r,e;const t=(e=(r=window.rspkr)===null||r===void 0?void 0:r.ui)===null||e===void 0?void 0:e.getActivePlayer();if(t&&!this.element.contains(t.getContainer())){t.stop()}window.readpage(this.href,this.readspeakerId)}async closePlayer(){var r,e;const t=(e=(r=window.rspkr)===null||r===void 0?void 0:r.ui)===null||e===void 0?void 0:e.getActivePlayer();if(t&&this.element.contains(t.getContainer())){t.close()}}async componentWillLoad(){this.readspeakerId=`stzh-readspeaker-${i++}`}async componentDidLoad(){await n()}connectedCallback(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){var r,e;if(this.observer){this.observer.disconnect()}(e=(r=window.rspkr)===null||r===void 0?void 0:r.ui)===null||e===void 0?void 0:e.destroyActivePlayer()}render(){const r={"stzh-readspeaker":true,rs_skip:true};return e(t,null,e("div",{class:r},e("div",{class:"stzh-readspeaker__actions"},e("div",{ref:r=>this.triggerElement=r,class:"stzh-readspeaker__trigger"},e("slot",null)),e("stzh-button",{class:"stzh-readspeaker__close",variant:"tertiary",size:"small",icon:"close-big",iconOnly:true,onClick:()=>{this.closePlayer()}})),e("div",{id:this.readspeakerId,class:"rs_addtools rs_splitbutton rs_preserve rs_skip rs_exp"})))}get element(){return s(this)}};l.style=o;export{l as stzh_readspeaker};
-//# sourceMappingURL=p-e10aa7bd.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stzhReadspeakerCss","loadLibrary","Promise","resolve","reject","window","ReadSpeaker","oHead","document","getElementsByTagName","item","oScript","createElement","type","src","stzhComponents","pathVendors","id","appendChild","onload","mobile","onerror","rsConf","settings","general","enableSkipAlways","shadowDomSelector","ui","tools","voicesettings","controlpanel","translation","dictionary","download","help","formreading","readspeakerCounter","StzhReadspeaker","this","onLinkClick","async","event","preventDefault","openPlayer","init","trigger","_a","triggerElement","firstElementChild","defaultSlot","Array","from","element","children","find","child","hasAttribute","addEventListener","setPropsIfNull","icon","href","activePlayer","_b","rspkr","getActivePlayer","contains","getContainer","stop","readpage","readspeakerId","closePlayer","close","componentWillLoad","componentDidLoad","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","destroyActivePlayer","render","classes","rs_skip","h","Host","class","ref","el","variant","size","iconOnly","onClick"],"sources":["src/components/stzh-readspeaker/stzh-readspeaker.scss?tag=stzh-readspeaker","src/components/stzh-readspeaker/stzh-readspeaker.tsx"],"sourcesContent":["// Note: These styles are all global and note scoped because\n// some elements are created dynamically by the ReadSpeaker library\n\nstzh-readspeaker {\n  @include host;\n\n  --background-color: var(--stzh-readspeaker-background-color, #{$colorWhite});\n  --justify-content: var(--stzh-readspeaker-justify-content, space-between);\n  --column-gap: var(--stzh-readspeaker-column-gap, auto);\n\n  --audio-track-height: 3px;\n  --audio-track-background-color: var(--stzh-readspeaker-audio-track-background-color, #{$colorBlack20op});\n  --audio-track-progress-background-color: var(--stzh-readspeaker-audio-track-progress-background-color, #{$colorSecondary40});\n\n  --dropdown-position: var(--stzh-readspeaker-dropdown-position, absolute);\n  --dropdown-top: var(--stzh-readspeaker-dropdown-top, #{$formInputHeightSmall});\n  --dropdown-bottom: var(--stzh-readspeaker-dropdown-bottom, auto);\n  --dropdown-left: var(--stzh-readspeaker-dropdown-left, 0px);\n  --dropdown-right: var(--stzh-readspeaker-dropdown-right, auto);\n\n  --dropdown-settings-top: var(--stzh-readspeaker-dropdown-settings-top, #{$formInputHeightSmall});\n  --dropdown-settings-bottom: var(--stzh-readspeaker-dropdown-settings-bottom, auto);\n  --dropdown-settings-left: var(--stzh-readspeaker-dropdown-settings-left, 0px);\n  --dropdown-settings-right: var(--stzh-readspeaker-dropdown-settings-right, auto);\n\n  @include mq($from: medium) {\n    --column-gap: var(--stzh-readspeaker-column-gap, #{space('medium')});\n    --dropdown-top: var(--stzh-readspeaker-dropdown-top, #{$formInputHeightTiny});\n    --dropdown-settings-top: var(--stzh-readspeaker-dropdown-settings-top, #{$formInputHeightTiny});\n  }\n}\n\n.stzh-readspeaker {\n  position: relative;\n  display: flex;\n  align-items: center;\n  column-gap: var(--column-gap);\n  justify-content: var(--justify-content);\n\n  &__actions {\n    flex-grow: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  stzh-button#{&}__close {\n    display: none;\n  }\n\n  &:has(.rsbtn.rsexpanded) &__close {\n    display: inline-grid;\n\n    @include mq($from: small) {\n      display: none;\n    }\n  }\n\n  .rsbtn {\n    z-index: $zIndexPopover !important;\n    background: var(--background-color);\n    position: var(--dropdown-position);\n    top: var(--dropdown-top);\n    bottom: var(--dropdown-bottom);\n    left: var(--dropdown-left);\n    right: var(--dropdown-right);\n  }\n\n  .rs_splitbutton.rs_splitbutton-exp {\n    display: inline-flex;\n  }\n\n  .rs_addtools,\n  .rsbtn {\n    margin-top: var(--audio-track-height);\n    margin-bottom: 0px;\n  }\n\n  [class*=\" rsicn-\"],\n  [class*=\" rsicn-\"]:before,\n  [class^=rsicn-], [class^=rsicn-]:before {\n    content: '';\n    display: block;\n    width: iconSize();\n    height: iconSize();\n    background-size: contain;\n    background-position: center center;\n  }\n\n  // pause / play\n  .rsicn-pause::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/pause.svg', fill=#0F05A0);\n  }\n\n  .rsbtn_pause:hover .rsicn-pause::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/pause.svg', fill=#070066);\n  }\n\n  .rsbtn.rsstopped .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause .rsicn::before,\n  .rsbtn.rsidle .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause .rsicn::before,\n  .rsbtn.rspaused .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause .rsicn::before {\n    content: '';\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/play.svg', fill=#0F05A0);\n  }\n\n  .rsbtn.rsstopped .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause:hover .rsicn::before,\n  .rsbtn.rsidle .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause:hover .rsicn::before,\n  .rsbtn.rspaused .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause:hover .rsicn::before {\n    content: '';\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/play.svg', fill=#070066);\n  }\n\n  // stop\n  .rsicn-stop::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/stop.svg', fill=#0F05A0);\n  }\n\n  .rsbtn_stop:hover .rsicn-stop::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/stop.svg', fill=#070066);\n  }\n\n  // rewind\n  .rsicn-backwards::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/rewind.svg', fill=#0F05A0);\n  }\n\n  .rsbtn_rewind:hover .rsicn-backwards::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/rewind.svg', fill=#070066);\n  }\n\n  // forwards\n  .rsicn-forwards::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/forward.svg', fill=#0F05A0);\n  }\n\n  .rsbtn_forward:hover .rsicn-forwards::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/forward.svg', fill=#070066);\n  }\n\n  // volume\n  .rsicn-volume::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/volume-medium.svg', fill=#0F05A0);\n  }\n\n  .rsbtn_volume:hover .rsicn-volume::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/volume-medium.svg', fill=#070066);\n  }\n\n  // speed\n  .rsicn-speed::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/dashboard.svg', fill=#0F05A0);\n  }\n\n  .rsbtn_speed:hover .rsicn-speed::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/dashboard.svg', fill=#070066);\n  }\n\n  // close\n  .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_closer:focus span.rsicn::before,\n  .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_closer:hover span.rsicn::before {\n    content: '';\n  }\n\n  .rsicn-cross::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/close-big.svg', fill=#0F05A0);\n  }\n\n  .rsbtn_closer:hover .rsicn-cross::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/close-big.svg', fill=#070066);\n  }\n\n  // tooltoggle\n  .rs_addtools .rsbtn_tooltoggle .rsicn::before,\n  .rsbtn .rsbtn_tooltoggle .rsicn::before {\n    content: '';\n  }\n\n  .rsicn-arrow-down::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/more-vertical.svg', fill=#0F05A0);\n  }\n\n  .rsbtn_tooltoggle:hover .rsicn-arrow-down::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/more-vertical.svg', fill=#070066);\n  }\n\n  // loading indicator/track\n  #rsmpl_container .rs-player-loadindicator,\n  .rsbtn .rs-player-loadindicator {\n    background-color: var(--audio-track-background-color);\n    height: var(--audio-track-height);\n    top: calc(var(--audio-track-height) / -1);\n    left: 0;\n    right: 0px;\n  }\n\n  #rsmpl_container .rs-player-loadindicator .rsbtn-loading,\n  .rsbtn .rs-player-loadindicator .rsbtn-loading,\n  #rsmpl_container .rs-player-loadindicator .rsbtn-progress,\n  .rsbtn .rs-player-loadindicator .rsbtn-progress {\n    background-color: var(--audio-track-progress-background-color);\n  }\n\n  // player buttons / toggle button\n  .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item,\n  .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active,\n  .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle,\n  .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-left: none;\n    width: $formInputHeightSmall;\n    height: $formInputHeightSmall;\n    transition-property: background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    background-color: transparent;\n    outline: none;\n    float: none;\n\n    [class*=\" rsicn-\"],\n    [class*=\" rsicn-\"]:before,\n    [class^=rsicn-], [class^=rsicn-]:before {\n      width: iconSize();\n      height: iconSize();\n\n      @include mq($from: medium) {\n        width: iconSize('small');\n        height: iconSize('small');\n      }\n    }\n\n    @include mq($from: medium) {\n      width: $formInputHeightTiny;\n      height: $formInputHeightTiny;\n    }\n\n    &:focus {\n      background-color: transparent;\n      outline: var(--stzh-flyingfocus-color) solid 2px;\n      outline-offset: 2px;\n    }\n\n    &:hover {\n      background-color: $colorSecondary20;\n    }\n\n    &.rsbtn_closer {\n      // position: absolute;\n      // right: 0;\n      // top: calc(#{$formInputHeightSmall} / -1 + -3px);\n\n      // we show own &__close button on mobile that is placed next to trigger\n      @include mq($to: small) {\n        display: none;\n      }\n    }\n  }\n\n  .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle,\n  .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle {\n    margin-right: space('xxxsmall');\n  }\n\n  .rs_splitbutton .rsbtn_exp .rsbtn_exp_inner button.rsbtn_pause.rsbtn_player_item {\n    padding-left: 0px;\n    padding-right: 0px;\n  }\n\n  .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_stop:active span.rsicn {\n    background: transparent;\n  }\n\n  // toggle button\n  .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle,\n  .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle {\n    display: flex !important;\n    position: relative;\n    top: 0;\n    border-left: none;\n    border-right: none;\n  }\n\n  // toggle button when zoom-tooltoggler class is added to wrapper (js hover)\n  .rs_splitbutton.zoom-tooltoggler.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle,\n  .rs_splitbutton.zoom-tooltoggler.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle {\n    left: 0;\n  }\n\n  .rsbtn .rsbtn_exp .rsbtn_exp_inner {\n    position: static;\n    background: transparent;\n    display: inline-flex;\n    border: none;\n    border-radius: 0px;\n    gap: space('xxxsmall');\n  }\n\n  .rsbtn .rsbtn_exp,\n  .rsbtn.rsexpanded .rsbtn_exp .rsbtn_exp_inner {\n    height: auto;\n  }\n\n  // slider\n  .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_dropdown {\n    box-sizing: border-box;\n    border: none;\n    width: $formInputHeightSmall;\n    height: 116px;\n    top: $formInputHeightSmall;\n    margin-top: space('xxsmall');\n    background-color: $colorGrey10;\n    padding: 0;\n    padding-top: space('xsmall');\n    padding-bottom: space('xsmall');\n\n    @include mq($from: medium) {\n      width: $formInputHeightTiny;\n      top: $formInputHeightTiny;\n    }\n  }\n\n  #rs-textsettings input.rs-slider[type=range],\n  .rs-dialog-esque input.rs-slider[type=range],\n  .rs-dialog-slider-dropdown input.rs-slider[type=range],\n  .rsbtn input.rs-slider[type=range] {\n    overflow: hidden;\n    -webkit-appearance: none !important;\n    appearance: none !important;\n    background: transparent;\n    margin: 0px;\n\n    --thumb-height: 20px;\n    --thumb-border-width: 2px;\n    --thumb-border-color: #{$colorPrimary70};\n    --thumb-background-color: #{$colorWhite};\n    --track-height: 8px;\n    --track-color: #{$colorBlack40op};\n    --track-progress-color: #{$colorSecondary60};\n    --clip-edges: 1px;\n\n    // &,\n    // &::-moz-range-track,\n    // &::-moz-range-thumb,\n    // &::-moz-range-progress {\n    //   background: #fff0;\n    // }\n\n    &,\n    &::-webkit-slider-runnable-track,\n    &::-webkit-slider-thumb {\n      position: relative;\n      -webkit-appearance: none;\n      transition: all $baseTransitionAnimationSpeed;\n      height: var(--thumb-height);\n    }\n\n    &,\n    &::-moz-range-track,\n    &::-moz-range-thumb {\n      position: relative;\n      margin: 0px;\n      appearance: none;\n      transition: all $baseTransitionAnimationSpeed;\n      height: var(--thumb-height);\n    }\n\n    &::-webkit-slider-runnable-track {\n  \t  background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);\n    }\n\n    &::-moz-range-track {\n      width: 100%;\n      background: var(--track-color);\n    }\n\n    &::-moz-range-progress {\n      appearance: none;\n      background: var(--track-progress-color);\n      transition-delay: 30ms;\n    }\n\n    &::-moz-range-track,\n    &::-moz-range-progress {\n      height: calc(var(--track-height) + 1px);\n      border-radius: var(--track-height);\n    }\n\n    &::-webkit-slider-thumb {\n      --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);\n      --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);\n      --clip-bottom: calc(var(--thumb-height) - var(--clip-top));\n      --clip-further: calc(100% + 1px);\n      --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax var(--track-progress-color);\n\n      width: var(--thumb-width, var(--thumb-height));\n      // background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);\n      background-color: var(--thumb-background-color);\n      border-style: solid;\n      border-width: var(--thumb-border-width);\n      border-color: var(--thumb-border-color);\n      box-shadow: var(--box-fill);\n      border-radius: var(--thumb-width, var(--thumb-height));\n\n      filter: brightness(100%);\n      clip-path: polygon(\n        100% -1px,\n        var(--clip-edges) -1px,\n        0 var(--clip-top),\n        -100vmax var(--clip-top),\n        -100vmax var(--clip-bottom),\n        0 var(--clip-bottom),\n        var(--clip-edges) 100%,\n        var(--clip-further) var(--clip-further)\n      );\n    }\n\n    &::-moz-range-thumb {\n      background-color: var(--thumb-background-color);\n      border-style: solid;\n      border-width: var(--thumb-border-width);\n      border-color: var(--thumb-border-color);\n      border: 0;\n      width: var(--thumb-width, var(--thumb-height));\n      border-radius: var(--thumb-width, var(--thumb-height));\n      cursor: grab;\n    }\n\n    &:active {\n      cursor: grabbing;\n    }\n\n    &:active::-webkit-slider-thumb {\n      cursor: grabbing;\n    }\n\n    &:active::-moz-range-thumb {\n      cursor: grabbing;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n\n    &:disabled::-webkit-slider-thumb {\n      cursor: not-allowed;\n    }\n\n    &:disabled::-moz-range-thumb {\n      cursor: not-allowed;\n    }\n  }\n\n  .rsbtn .rs-slider.vertical,\n  .rsbtn .rs-slider.vertical.has-datalist {\n    // transform: rotate(270deg) translateX(-4.75em) translateY(.75em);\n    transform: rotate(270deg) translateX(-6px) translateY(-6px);\n    transform-origin: bottom center;\n    width: 100px;\n    height: $formInputHeightSmall;\n\n    @include mq($from: medium) {\n      height: $formInputHeightTiny;\n      transform: rotate(270deg) translateX(-18px) translateY(-18px);\n    }\n  }\n\n  // slider tooltip\n  #rs-textsettings .rs-slider-label,\n  .rs-dialog-esque .rs-slider-label,\n  .rs-dialog-slider-dropdown .rs-slider-label,\n  .rsbtn .rs-slider-label {\n    @include font;\n    @include tooltip-fontsize;\n    border-radius: 0px;\n    border: none;\n    box-shadow: none;\n    color: $colorWhite;\n    background-color: $colorCoolgrey60;\n    height: 20px;\n    line-height: 20px;\n    padding: 0;\n    padding-left: space('xxsmall');\n    padding-right: space('xxsmall');\n  }\n\n  // copyright\n  .rsbtn_powered {\n    display: none;\n  }\n\n  // menu container\n  .rs_addtools .rsbtn_toolpanel.vertical,\n  .rsbtn .rsbtn_toolpanel.vertical {\n    position: absolute;\n    top: var(--dropdown-settings-top);\n    bottom: var(--dropdown-settings-bottom);\n    left: var(--dropdown-settings-left);\n    right: var(--dropdown-settings-right);\n    min-width: initial !important;\n  }\n\n  .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools,\n  .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools {\n    position: static;\n    border-radius: 0px;\n    border: none;\n    margin-top: space('xxsmall');\n    background-color: $colorGrey10;\n    padding-top: space('xsmall');\n    padding-bottom: space('xsmall');\n  }\n\n  .rs_addtools .rsbtn_toolpanel.vertical\n  .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li,\n  .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li {\n    all: unset;\n  }\n\n  // menu button\n  .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool,\n  .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool {\n    display: flex;\n    align-items: center;\n    padding: space('xsmall') space('large');\n    white-space: nowrap;\n    color: $colorPrimary70;\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    &:hover {\n      color: $colorPrimary80;\n      background-color: $colorSecondary20;\n    }\n  }\n\n  .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool span.rsbtn_btnlabel,\n  .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool span.rsbtn_btnlabel {\n    @include font('heavy');\n    @include fontSize('milli');\n    margin-left: space('xsmall');\n    margin-right: auto;\n    color: inherit;\n  }\n\n  .rsicn-settings::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/gear.svg', fill=#0F05A0);\n  }\n\n  .rsbtn_tool:hover .rsicn-settings::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/gear.svg', fill=#070066);\n  }\n\n  .rsicn-click-listen::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/click.svg', fill=#0F05A0);\n  }\n\n  .rsbtn_tool:hover .rsicn-click-listen::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/click.svg', fill=#070066);\n  }\n\n  .rsicn-enlarged-text::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/enlarge-text.svg', fill=#0F05A0);\n  }\n\n  .rsbtn_tool:hover .rsicn-enlarged-text::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/enlarge-text.svg', fill=#070066);\n  }\n\n  .rsicn-textmode::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/text-mode.svg', fill=#0F05A0);\n  }\n\n  .rsbtn_tool:hover .rsicn-textmode::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/text-mode.svg', fill=#070066);\n  }\n\n  .rsicn-pagemask::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/scan.svg', fill=#0F05A0);\n  }\n\n  .rsbtn_tool:hover .rsicn-pagemask::before {\n    background-image: svg-load('../src/components/stzh-readspeaker/assets/scan.svg', fill=#070066);\n  }\n\n  // switch\n  .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool .rs_minitoggler,\n  .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool .rs_minitoggler {\n    margin: 0;\n    margin-left: space('large');\n    background-color: $colorGrey70;\n    border-radius: 12px;\n    box-sizing: border-box;\n    width: 48px;\n    height: 24px;\n    border: none;\n    transition: background-color $baseTransitionAnimationSpeed;\n\n    .on-icon,\n    .off-icon {\n      display: none;\n    }\n\n    &::after {\n      width: 20px;\n      height: 20px;\n      top: 2px;\n      left: 2px;\n      transition: all $baseTransitionAnimationSpeed;\n      background-color: $colorWhite;\n    }\n  }\n\n  .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool.active .rs_minitoggler,\n  .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool.active .rs_minitoggler {\n    background-color: $colorSecondary50;\n\n    &::after {\n      left: calc(50% + 2px);\n      background-color: $colorWhite;\n    }\n  }\n}\n\n/* Button tooltips */\n\n#readspeaker_tooltip.rs_tooltip {\n  @include font;\n  @include tooltip-fontsize;\n  z-index: $zIndexPopup;\n  border: none;\n  border-radius: 0px;\n  box-shadow: none;\n  color: $colorWhite;\n  background-color: $colorCoolgrey60;\n  height: 20px;\n  line-height: 20px;\n  padding: 0;\n  padding-left: space('xxsmall');\n  padding-right: space('xxsmall');\n}\n\n/* Popup on text selection */\n\n.rspopup.rspopup {\n  z-index: $zIndexPopup;\n  background: $colorGrey10;\n  border: none;\n  border-radius: 0px;\n  box-shadow: none;\n\n  .rspopup_btn {\n    height: $formInputHeightSmall;\n    box-sizing: border-box;\n    display: flex;\n    padding: space('xsmall') space('large');\n    justify-content: center;\n    align-items: center;\n    gap: space('xsmall');\n    border-top: none;\n    color: $colorPrimary70;\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    &:hover {\n      color: $colorPrimary80;\n      background-color: $colorSecondary20;\n    }\n\n    &.rspopup_play::before {\n      content: '';\n      margin-right: 0;\n      left: 0;\n      position: relative;\n      width: iconSize();\n      height: iconSize();\n      background-size: contain;\n      background-position: center center;\n      background-image: svg-load('../src/components/stzh-readspeaker/assets/volume-medium.svg', fill=#0F05A0);\n    }\n\n    &.rspopup_play:hover::before {\n      background: svg-load('../src/components/stzh-readspeaker/assets/volume-medium.svg', fill=#070066);\n    }\n\n    &.rspopup_play::after {\n      content: none;\n    }\n  }\n\n  .rspopup_btn span.rspopup_label {\n    @include font('heavy');\n    @include fontSize('milli');\n    top: 0;\n  }\n}\n\n/* Sticky controls (currently disabled) */\n\n// .rsbtn_scrollcontrols {}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Method\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n// we use split button implmentation (calling readpage manually):\n// https://wrdev.readspeaker.com/get-started/implementation/split-button-implementation\n\n// we load the library dynamically:\n// https://wrdev.readspeaker.com/get-started/implementation/dynamic-loading\nfunction loadLibrary() {\n  return new Promise((resolve, reject) => {\n    if (window.ReadSpeaker) {\n      resolve(window.ReadSpeaker);\n      return;\n    }\n\n    const oHead = document.getElementsByTagName('HEAD').item(0);\n    const oScript = document.createElement(\"script\");\n\n    oScript.type = \"text/javascript\";\n    // oScript.src = \"//cdn-eu.readspeaker.com/script/4490/webReader/webReader.js?pids=wr&mobile=0\";\n    // we disable predefined mobile UI player bar with mobile=0 parameter\n    oScript.src = `${window.stzhComponents.pathVendors}/readspeaker/webReader.js?pids=wr&mobile=0`;\n    oScript.id = \"rs_req_Init\";\n    oHead.appendChild(oScript);\n\n    oScript.onload = function () {\n      window.ReadSpeaker.mobile = window.ReadSpeaker.mobile;\n      resolve(window.ReadSpeaker);\n      // window.ReadSpeaker.init();\n    }\n\n    oScript.onerror = reject;\n  });\n}\n\nwindow.rsConf = {\n\t// cb: {\n\t// \tui: {\n\t// \t\topen: function() {\n\t// \t\t\tconsole.log('open')\n\t// \t\t},\n  //     close: function() {\n\t// \t\t\tconsole.log('close')\n  //     },\n  //     stop: function() {\n  //       console.log('stop')\n  //     },\n  //     play: function() {\n  //       console.log('play')\n  //     },\n  //     pause: function() {\n  //       console.log('pause')\n  //     }\n\t// \t}\n\t// },\n  settings: {\n    // // The color that will be used for highlighting sentences, expressed as a valid CSS color value.\n\t\t// hlsent: '#beffd6',\n    // // The color that will be used for the text in the highlighted elements, expressed as a valid CSS color value.\n    // hltext: '#000000',\n    // // The color that will be used for highlighting words, expressed as a valid CSS color value\n    // hlword: '#a4cbff'\n\t},\n  general: {\n    enableSkipAlways: true,\n    shadowDomSelector: \"stzh-accordion-item,stzh-timeline-item,stzh-disturber\"\n  },\n  ui: {\n    tools: {\n      voicesettings: false,\n      controlpanel: false,\n      translation: false,\n      dictionary: false,\n      download: false,\n      help: false,\n      formreading: false\n    }\n  }\n};\n\n// window.rspkr.ui.getActivePlayer().getContainer()\n// window.rspkr.ui.addClickEvents()\n// window.rspkr.tools.toggler.add()\n\nlet readspeakerCounter = 0;\n\n/**\n * @slot - Slot for trigger\n */\n@Component({\n  tag: \"stzh-readspeaker\",\n  styleUrl: \"stzh-readspeaker.scss\"\n})\nexport class StzhReadspeaker {\n  /** RS url of site (e.g. https://app-eu.readspeaker.com/cgi-bin/rsent?customerid=4490&lang=de_de&readid=content&url=https://www.stadt-zuerich.ch/portal/de/index/service/kontakt.html) */\n  @Prop() href!: string;\n\n  @Element() element: HTMLStzhReadspeakerElement;\n\n  /** Open player and start reading page */\n  @Method()\n  async openPlayer() {\n    const activePlayer = window.rspkr?.ui?.getActivePlayer();\n\n    if (activePlayer && !this.element.contains(activePlayer.getContainer())) {\n      activePlayer.stop();\n    }\n\n    window.readpage(this.href, this.readspeakerId);\n  }\n\n  /** Close player and finish reading page */\n  @Method()\n  async closePlayer() {\n    const activePlayer = window.rspkr?.ui?.getActivePlayer();\n\n    if (activePlayer && this.element.contains(activePlayer.getContainer())) {\n      activePlayer.close();\n    }\n  }\n\n  private observer: MutationObserver;\n  private triggerElement: HTMLElement;\n\n  private onLinkClick = async (event: MouseEvent) => {\n    event.preventDefault();\n    // library could also be loaded only after first click, but then text selection wouldn't work\n    // await loadLibrary();\n    this.openPlayer();\n  }\n\n  private init = () => {\n    let trigger = this.triggerElement?.firstElementChild as HTMLElement;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children)\n        .find(child => !child.hasAttribute('slot')) as HTMLElement;\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      trigger.addEventListener('click', this.onLinkClick);\n\n      setPropsIfNull(trigger, {\n        icon: \"volume-medium\",\n        href: this.href\n      } as HTMLStzhLinkElement | HTMLStzhButtonElement)\n    }\n  }\n\n  private readspeakerId: string;\n\n  async componentWillLoad() {\n    this.readspeakerId = `stzh-readspeaker-${readspeakerCounter++}`;\n  }\n\n  async componentDidLoad() {\n    await loadLibrary();\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    window.rspkr?.ui?.destroyActivePlayer();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-readspeaker\": true,\n      \"rs_skip\": true // will prevent component being read by readspeaker\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-readspeaker__actions\">\n            <div\n              ref={(el) => (this.triggerElement = el as HTMLDivElement)}\n              class=\"stzh-readspeaker__trigger\"\n            >\n              <slot></slot>\n            </div>\n            <stzh-button\n              class=\"stzh-readspeaker__close\"\n              variant=\"tertiary\"\n              size=\"small\"\n              icon=\"close-big\"\n              iconOnly={true}\n              onClick={() => { this.closePlayer() }}\n            ></stzh-button>\n          </div>\n\n          {/*\n          <stzh-popover placement=\"bottom-end\">\n            <div slot=\"content\">...</div>\n          </stzh-popover>\n          */}\n\n          <div\n            id={this.readspeakerId}\n            class=\"rs_addtools rs_splitbutton rs_preserve rs_skip rs_exp\"\n          ></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gHAAA,MAAMA,EAAqB,2s6CCgB3B,SAASC,IACP,OAAO,IAAIC,SAAQ,CAACC,EAASC,KAC3B,GAAIC,OAAOC,YAAa,CACtBH,EAAQE,OAAOC,aACf,M,CAGF,MAAMC,EAAQC,SAASC,qBAAqB,QAAQC,KAAK,GACzD,MAAMC,EAAUH,SAASI,cAAc,UAEvCD,EAAQE,KAAO,kBAGfF,EAAQG,IAAM,GAAGT,OAAOU,eAAeC,wDACvCL,EAAQM,GAAK,cACbV,EAAMW,YAAYP,GAElBA,EAAQQ,OAAS,WACfd,OAAOC,YAAYc,OAASf,OAAOC,YAAYc,OAC/CjB,EAAQE,OAAOC,Y,EAIjBK,EAAQU,QAAUjB,CAAM,GAE5B,CAEAC,OAAOiB,OAAS,CAoBdC,SAAU,C,EAQVC,QAAS,CACPC,iBAAkB,KAClBC,kBAAmB,yDAErBC,GAAI,CACFC,MAAO,CACLC,cAAe,MACfC,aAAc,MACdC,YAAa,MACbC,WAAY,MACZC,SAAU,MACVC,KAAM,MACNC,YAAa,SASnB,IAAIC,EAAqB,E,MASZC,EAAe,M,yBA+BlBC,KAAAC,YAAcC,MAAOC,IAC3BA,EAAMC,iBAGNJ,KAAKK,YAAY,EAGXL,KAAAM,KAAO,K,MACb,IAAIC,GAAUC,EAAAR,KAAKS,kBAAc,MAAAD,SAAA,SAAAA,EAAEE,kBAEnC,IAAKH,EAAS,CACZ,MAAMI,EAAcC,MAAMC,KAAKb,KAAKc,QAAQC,UACzCC,MAAKC,IAAUA,EAAMC,aAAa,UAErCX,EAAUI,C,CAGZ,GAAIJ,EAAS,CACXA,EAAQY,iBAAiB,QAASnB,KAAKC,aAEvCmB,EAAeb,EAAS,CACtBc,KAAM,gBACNC,KAAMtB,KAAKsB,M,uBA7CjB,gBAAMjB,G,QACJ,MAAMkB,GAAeC,GAAAhB,EAAAzC,OAAO0D,SAAK,MAAAjB,SAAA,SAAAA,EAAEnB,MAAE,MAAAmC,SAAA,SAAAA,EAAEE,kBAEvC,GAAIH,IAAiBvB,KAAKc,QAAQa,SAASJ,EAAaK,gBAAiB,CACvEL,EAAaM,M,CAGf9D,OAAO+D,SAAS9B,KAAKsB,KAAMtB,KAAK+B,c,CAKlC,iBAAMC,G,QACJ,MAAMT,GAAeC,GAAAhB,EAAAzC,OAAO0D,SAAK,MAAAjB,SAAA,SAAAA,EAAEnB,MAAE,MAAAmC,SAAA,SAAAA,EAAEE,kBAEvC,GAAIH,GAAgBvB,KAAKc,QAAQa,SAASJ,EAAaK,gBAAiB,CACtEL,EAAaU,O,EAoCjB,uBAAMC,GACJlC,KAAK+B,cAAgB,oBAAoBjC,K,CAG3C,sBAAMqC,SACExE,G,CAGR,iBAAAyE,GACEpC,KAAKM,OAELN,KAAKqC,SAAW,IAAIC,iBAAiBtC,KAAKM,MAC1CN,KAAKqC,SAASE,QAAQvC,KAAKc,QAAS,CAClC0B,UAAW,KACXC,QAAS,M,CAIb,oBAAAC,G,QACE,GAAI1C,KAAKqC,SAAU,CACjBrC,KAAKqC,SAASM,Y,EAGhBnB,GAAAhB,EAAAzC,OAAO0D,SAAK,MAAAjB,SAAA,SAAAA,EAAEnB,MAAE,MAAAmC,SAAA,SAAAA,EAAEoB,qB,CAGpB,MAAAC,GACE,MAAMC,EAAU,CACd,mBAAoB,KACpBC,QAAW,MAGb,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOJ,GACVE,EAAA,OAAKE,MAAM,6BACTF,EAAA,OACEG,IAAMC,GAAQpD,KAAKS,eAAiB2C,EACpCF,MAAM,6BAENF,EAAA,cAEFA,EAAA,eACEE,MAAM,0BACNG,QAAQ,WACRC,KAAK,QACLjC,KAAK,YACLkC,SAAU,KACVC,QAAS,KAAQxD,KAAKgC,aAAa,KAUvCgB,EAAA,OACErE,GAAIqB,KAAK+B,cACTmB,MAAM,2D"}

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

@@ -1,2 +0,0 @@
-import{r as t,h as e,a as n,g as s}from"./p-c7bfac7a.js";const o='.sc-stzh-content-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-content-h{display:none}.sc-stzh-content-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h *.sc-stzh-content,.sc-stzh-content-h *.sc-stzh-content::before,.sc-stzh-content-h *.sc-stzh-content::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-content-h .has-focus.sc-stzh-content{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content{outline-style:none !important}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content::-moz-focus-inner{border:0 !important}.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, "content content content content")}@media screen and (min-width: 900px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, "content content content content content content content content")}}@media screen and (min-width: 1260px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, "aside-left aside-left content content content content content content content content aside-right aside-right")}}@media screen and (min-width: 1260px){[variant=shifted].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, "aside-left aside-left content content content content content content content content content aside-right"))}}@media screen and (min-width: 1260px){[variant=full].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, "content content content content content content content content content content content content"))}}.sc-stzh-content-h .sc-stzh-content-s>*{grid-area:content}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-cta-small-grid-template-areas:"cta cta cta ."}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-cta-grid-template-areas:"cta cta cta cta cta . . .";--stzh-cta-small-grid-template-areas:"cta cta cta cta . . . ."}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-text-display:grid;--stzh-text-grid-template-areas:"text text text .";--stzh-richtext-display:grid;--stzh-richtext-grid-template-areas:"text text text ."}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-text-grid-template-areas:"text text text text text text . .";--stzh-richtext-grid-template-areas:"text text text text text text . ."}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:"list list list .";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 3 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:"list list list list list . . .";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 5 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 5 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 5 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-small-grid-template-areas:"cta cta cta cta"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-grid-template-areas:"cta cta cta cta cta cta cta cta";--stzh-cta-small-grid-template-areas:"cta cta cta cta cta cta cta cta"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:"list list list list";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 4 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:"list list list list list list list list";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 8 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 8 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 8 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}.stzh-content.sc-stzh-content{--stzh-content-grid-template-areas:"content content content content content content content content content content content content";--stzh-content-shifted-grid-template-areas:"content content content content content content content content content content content content";--stzh-content-full-grid-template-areas:"content content content content content content content content content content content content";-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas)}@media screen and (min-width: 600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(12, minmax(0, 1fr))}}';const a=class{constructor(e){t(this,e);this.variant="default";this.preventElementLayout=false}render(){const t={"stzh-content":true,[`stzh-content--${this.variant}`]:!!this.variant};return e(n,null,e("div",{class:t},e("slot",null)))}get element(){return s(this)}};a.style=o;export{a as stzh_content};
-//# sourceMappingURL=p-f50e0102.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stzhContentCss","StzhContent","render","classes","this","variant","h","Host","class"],"sources":["src/components/stzh-content/stzh-content.scss?tag=stzh-content&encapsulation=scoped","src/components/stzh-content/stzh-content.tsx"],"sourcesContent":[":host {\n  --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content\");\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content content content content content\");\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas: var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content aside-right aside-right\");\n  }\n\n  &[variant=\"shifted\"] {\n    @include mq($from: large) {\n      --grid-template-areas: var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content content aside-right\"));\n    }\n  }\n\n  &[variant=\"full\"] {\n    @include mq($from: large) {\n      --grid-template-areas: var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, \"content content content content content content content content content content content content\"));\n    }\n  }\n\n  ::slotted(*) {\n    grid-area: content;\n  }\n\n  &:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) ::slotted(*) {\n    /* CTA Layout */\n\n    @include mq($from: small) {\n      --stzh-cta-small-grid-template-areas: \"cta cta cta .\";\n    }\n\n    @include mq($from: medium) {\n      --stzh-cta-grid-template-areas: \"cta cta cta cta cta . . .\";\n      --stzh-cta-small-grid-template-areas: \"cta cta cta cta . . . .\";\n    }\n\n    /* Text / Richtext Layout */\n\n    @include mq($from: small) {\n      --stzh-text-display: grid;\n      --stzh-text-grid-template-areas: \"text text text .\";\n\n      --stzh-richtext-display: grid;\n      --stzh-richtext-grid-template-areas: \"text text text .\";\n    }\n\n    @include mq($from: medium) {\n      --stzh-text-grid-template-areas: \"text text text text text text . .\";\n      --stzh-richtext-grid-template-areas: \"text text text text text text . .\";\n    }\n\n    /* Datalist Layout */\n\n    @include mq($from: small) {\n      --stzh-datalist-grid-template-areas: \"list list list .\";\n      // breakout with details element inside datalist-item\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 * #{$gridGutterSmall}) / 3 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n    }\n\n    @include mq($from: medium) {\n      --stzh-datalist-grid-template-areas: \"list list list list list . . .\";\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 5 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n    }\n\n    @include mq($from: large) {\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 5 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n    }\n\n    @include mq($from: ultra) {\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 5 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n    }\n\n    /* Reset layout inside certain components */\n\n    stzh-datalist {\n      /* Text Layout */\n\n      @include mq($from: small) {\n        --stzh-text-display: block;\n        --stzh-richtext-display: block;\n      }\n    }\n\n    stzh-section[variant=\"highlight\"],\n    stzh-ghettobox,\n    stzh-message,\n    stzh-toast,\n    stzh-tooltip,\n    stzh-popover,\n    stzh-accordion,\n    stzh-timeline,\n    stzh-twocolumns,\n    stzh-textandimage,\n    stzh-datalist stzh-datalist,\n    stzh-dialog,\n    stzh-overlay {\n      /* CTA Layout */\n\n      @include mq($from: small) {\n        --stzh-cta-small-grid-template-areas: \"cta cta cta cta\";\n      }\n\n      @include mq($from: medium) {\n        --stzh-cta-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n        --stzh-cta-small-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n      }\n\n      /* Text Layout */\n\n      @include mq($from: small) {\n        --stzh-text-display: block;\n        --stzh-richtext-display: block;\n      }\n\n      /* Datalist Layout */\n\n      @include mq($from: small) {\n        --stzh-datalist-grid-template-areas: \"list list list list\";\n        // breakout with details element inside datalist-item\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 * #{$gridGutterSmall}) / 4 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n      }\n\n      @include mq($from: medium) {\n        --stzh-datalist-grid-template-areas: \"list list list list list list list list\";\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 8 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n      }\n\n      @include mq($from: large) {\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 8 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n      }\n\n      @include mq($from: ultra) {\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 8 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n      }\n    }\n  }\n}\n\n.stzh-content {\n  // set nested content elements to be fullwidth\n  --stzh-content-grid-template-areas: \"content content content content content content content content content content content content\";\n  --stzh-content-shifted-grid-template-areas: \"content content content content content content content content content content content content\";\n  --stzh-content-full-grid-template-areas: \"content content content content content content content content content content content content\";\n\n  @include grid;\n  grid-template-areas: var(--grid-template-areas);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-content\",\n  styleUrl: \"stzh-content.scss\",\n  scoped: true\n})\nexport class StzhContent {\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"shifted\" | \"full\" = \"default\";\n\n  /** Prevent changing layout of elements within this content element */\n  @Prop({ reflect: true }) preventElementLayout = false;\n\n  @Element() element: HTMLStzhContentElement;\n\n  render() {\n    const classes = {\n      \"stzh-content\": true,\n      [`stzh-content--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,qknB,MCgBVC,EAAW,M,sCAE6C,U,0BAGnB,K,CAIhD,MAAAC,GACE,MAAMC,EAAU,CACd,eAAgB,KAChB,CAAC,iBAAiBC,KAAKC,aAAcD,KAAKC,SAG5C,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOL,GACVG,EAAA,c"}

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

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as e,a as i,g as h}from"./p-c7bfac7a.js";const n=".sc-stzh-monthyearpicker-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-monthyearpicker-h{display:none}.sc-stzh-monthyearpicker-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-monthyearpicker-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-monthyearpicker-h *.sc-stzh-monthyearpicker,.sc-stzh-monthyearpicker-h *.sc-stzh-monthyearpicker::before,.sc-stzh-monthyearpicker-h *.sc-stzh-monthyearpicker::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-monthyearpicker-h .has-focus.sc-stzh-monthyearpicker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-monthyearpicker-h .stzh-fylingfocus-focused.sc-stzh-monthyearpicker{outline-style:none !important}.sc-stzh-monthyearpicker-h .stzh-fylingfocus-focused.sc-stzh-monthyearpicker::-moz-focus-inner{border:0 !important}.sc-stzh-monthyearpicker-h{width:100%;--separator-height:var(--stzh-form-input-height)}[size=small].sc-stzh-monthyearpicker-h{--separator-height:var(--stzh-form-input-small-height)}.stzh-monthyearpicker__wrapper.sc-stzh-monthyearpicker{display:flex;align-items:flex-start}.stzh-monthyearpicker__separator.sc-stzh-monthyearpicker{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);margin-left:var(--stzh-space-medium);margin-right:var(--stzh-space-medium);height:var(--separator-height);display:flex;align-items:center;align-self:flex-end}";const r=class{constructor(e){t(this,e);this.stzhChange=s(this,"stzhChange",7);this.onRootFocus=()=>{if(this.monthsDropdown){this.monthsDropdown.focus()}};this.onMonthsDropdownChange=t=>{const s=this.value.split("-")[0]||"0000";const e=t.detail.value||"00";this.onChange(s,e)};this.onYearsDropdownChange=t=>{const s=t.detail.value||"0000";const e=this.value.split("-")[1]||"00";this.onChange(s,e)};this.monthOpen=false;this.yearOpen=false;this.months=undefined;this.years=undefined;this.min=undefined;this.max=undefined;this.minYear=undefined;this.maxYear=undefined;this.format="default";this.name="";this.value="0000-00";this.popoverPlacement="bottom";this.monthLabel="";this.yearLabel="";this.readonly=false;this.disabled=false;this.required=false;this.hideOptional=false;this.size="default";this.descriptionMonth=undefined;this.descriptionYear=undefined;this.descriptionLongMonth=undefined;this.descriptionLongYear=undefined;this.errorMonth=undefined;this.errorYear=undefined;this.invalidMonth=false;this.invalidYear=false;this.a11yDescribedbyMonth="";this.a11yDescribedbyYear="";this.localization=undefined}monthsWatcher(t){if(typeof t==="string"){this._months=JSON.parse(t)}else{this._months=t}this.updateMonthOptions()}yearsWatcher(t){if(typeof t==="string"){this._years=JSON.parse(t)}else{this._years=t}this.updateYearOptions()}minMaxWatcher(){this.updateMonthOptions();this.updateYearOptions()}onDropdownChange(t){if(t.detail.component==="stzh-dropdown"){if(t.target.name===`${this.name}-year`){this.onYearsDropdownChange(t)}else{this.onMonthsDropdownChange(t)}t.stopPropagation()}}onChange(t,s){this.value=`${t}-${s}`;this.stzhChange.emit({component:"stzh-monthyearpicker",value:this.value,valueMonth:s,valueYear:t})}updateMonthOptions(){const t=[];let s=[];if(this._months){s=this._months}else{const t=Number(this.value.split("-")[0]||"0000");let e=1;let i=12;if(this.min){const s=new Date(this.min);if(t===s.getFullYear()){e=s.getMonth()+1}}if(this.max){const s=new Date(this.max);if(t===s.getFullYear()){i=s.getMonth()+1}}for(let t=e;t<=i;t++){s.push(t)}}s.forEach((s=>{const e=("00"+s).slice(-2);const i=this.localization.$globals.monthNames[s-1];t.push({text:this.format==="creditcard"?`${e} (${i})`:i,value:e})}));this.dropdownMonthOptions=t}updateYearOptions(){const t=[];let s=[];if(this._years){s=this._years}else{const t=Number(this.value.split("-")[1]||"00");const e=(new Date).getFullYear();let i=this.minYear||e-10;let h=this.maxYear||e+10;if(this.min){const s=new Date(this.min);if(t&&t<s.getMonth()+1){i=s.getFullYear()+1}else{i=s.getFullYear()}}if(this.max){const s=new Date(this.max);if(t&&t>s.getMonth()+1){h=s.getFullYear()-1}else{h=s.getFullYear()}}for(let t=i;t<=h;t++){s.push(t)}}s.forEach((s=>{t.push({text:s,value:s})}));this.dropdownYearOptions=t}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"monthyearpicker")}this.monthsWatcher(this.months);this.yearsWatcher(this.years)}render(){const t={"stzh-monthyearpicker":true};return e(i,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},e("div",{class:t},e("input",{type:"hidden",name:this.name,value:this.value}),e("div",{class:"stzh-monthyearpicker__wrapper"},e("stzh-dropdown",{open:this.monthOpen,name:`${this.name}-month`,class:"stzh-monthyearpicker__months-dropdown",label:this.monthLabel||this.localization.monthLabel,ref:t=>this.monthsDropdown=t,options:this.dropdownMonthOptions,items:[this.value.split("-")[1]],required:this.required,disabled:this.disabled,size:this.size,hideOptional:this.hideOptional,popoverPlacement:this.popoverPlacement,description:this.descriptionMonth,descriptionLong:this.descriptionLongMonth,error:this.errorMonth,a11yDescribedby:this.a11yDescribedbyMonth,invalid:this.invalidMonth}),e("div",{class:"stzh-monthyearpicker__separator"},"/"),e("stzh-dropdown",{open:this.yearOpen,name:`${this.name}-year`,class:"stzh-monthyearpicker__years-dropdown",label:this.yearLabel||this.localization.yearLabel,options:this.dropdownYearOptions,items:[this.value.split("-")[0]],required:this.required,disabled:this.disabled,size:this.size,hideOptional:this.hideOptional,popoverPlacement:this.popoverPlacement,description:this.descriptionYear,descriptionLong:this.descriptionLongYear,error:this.errorYear,a11yDescribedby:this.a11yDescribedbyYear,invalid:this.invalidYear}))))}get element(){return h(this)}static get watchers(){return{months:["monthsWatcher"],years:["yearsWatcher"],value:["minMaxWatcher"],min:["minMaxWatcher"],max:["minMaxWatcher"]}}};r.style=n;export{r as stzh_monthyearpicker};
-//# sourceMappingURL=p-f86e53a0.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stzhMonthyearpickerCss","StzhMonthyearpicker","this","onRootFocus","monthsDropdown","focus","onMonthsDropdownChange","event","year","value","split","month","detail","onChange","onYearsDropdownChange","monthsWatcher","newValue","_months","JSON","parse","updateMonthOptions","yearsWatcher","_years","updateYearOptions","minMaxWatcher","onDropdownChange","component","target","name","stopPropagation","stzhChange","emit","valueMonth","valueYear","options","months","currentYear","Number","minMonth","maxMonth","min","minDate","Date","getFullYear","getMonth","max","maxDate","i","push","forEach","paddedMonth","slice","monthName","localization","$globals","monthNames","text","format","dropdownMonthOptions","years","currentMonth","yearNow","minYear","maxYear","dropdownYearOptions","componentWillLoad","window","stzhComponents","utils","fetchTranslations","element","render","classes","h","Host","tabindex","disabled","onFocus","class","type","open","monthOpen","label","monthLabel","ref","el","items","required","size","hideOptional","popoverPlacement","description","descriptionMonth","descriptionLong","descriptionLongMonth","error","errorMonth","a11yDescribedby","a11yDescribedbyMonth","invalid","invalidMonth","yearOpen","yearLabel","descriptionYear","descriptionLongYear","errorYear","a11yDescribedbyYear","invalidYear"],"sources":["src/components/stzh-monthyearpicker/stzh-monthyearpicker.scss?tag=stzh-monthyearpicker&encapsulation=scoped","src/components/stzh-monthyearpicker/stzh-monthyearpicker.tsx"],"sourcesContent":[":host {\n  width: 100%;\n  --separator-height: #{$formInputHeight};\n\n  &[size=\"small\"] {\n    --separator-height: #{$formInputHeightSmall};\n  }\n}\n\n.stzh-monthyearpicker {\n  &__wrapper {\n    display: flex;\n    align-items: flex-start;\n  }\n\n  &__separator {\n    @include fontSize('milli');\n    margin-left: space('medium');\n    margin-right: space('medium');\n    height: var(--separator-height);\n    display: flex;\n    align-items: center;\n    align-self: flex-end;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Watch,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhDropdownOption,\n  StzhDropdownChangeEvent,\n  StzhMonthyearpickerChangeEvent,\n} from \"../../index\";\n\nimport { StzhMonthyearpickerLocalizedText } from \"./stzh-monthyearpicker.localization\";\n\n/**\n */\n@Component({\n  tag: \"stzh-monthyearpicker\",\n  styleUrl: \"stzh-monthyearpicker.scss\",\n  scoped: true\n})\nexport class StzhMonthyearpicker {\n  /** Initial open state of month dropdown */\n  @Prop() monthOpen: boolean = false;\n\n  /** Initial open state of year dropdown */\n  @Prop() yearOpen: boolean = false;\n\n  /** Set which months to show (overwrites months from min/max) */\n  @Prop() months: number[] | string;\n  private _months: number[];\n\n  /** Set which years to show (overwrites years from min/max) */\n  @Prop() years: number[] | string;\n  private _years: number[];\n\n  /**\n   * Minimum month and year allowed to be picked in `YYYY-MM` format.\n   * This setting can be used alone or together with the `max` property.\n   */\n  @Prop() min: string;\n\n  /**\n   * Maximum month and year allowed to be picked in `YYYY-MM` format.\n   * This setting can be used alone or together with the `min` property.\n   */\n  @Prop() max: string;\n\n  /**\n   * Minimum year (will be overwritten if `min` is used).\n   * This setting can be used alone or together with the `maxYear` property.\n   */\n  @Prop() minYear: number;\n\n  /**\n   * Maximum year (will be overwritten if `max` is used).\n   * This setting can be used alone or together with the `minYear` property.\n   */\n  @Prop() maxYear: number;\n\n  /** Picker format. */\n  @Prop({ reflect: true }) format: \"default\" | \"creditcard\" = \"default\";\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of hidden input (current selected year and month YYYY-MM). */\n  @Prop({ mutable: true, reflect: true }) value: string = \"0000-00\";\n\n  /** Popover placement for the dropdown (if applicable) */\n  @Prop({ reflect: true }) popoverPlacement:  \"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\" = \"bottom\";\n\n  /** Month dropdown label */\n  @Prop() monthLabel: string = \"\";\n\n  /** Year dropdown label */\n  @Prop() yearLabel: string = \"\";\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form ot hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Description message for month */\n  @Prop() descriptionMonth: string;\n\n  /** Description message for year */\n  @Prop() descriptionYear: string;\n\n  /** Long description message appearing in a popover for month */\n  @Prop() descriptionLongMonth: string;\n\n  /** Long description message appearing in a popover for year */\n  @Prop() descriptionLongYear: string;\n\n  /** One or multiple error message for month */\n  @Prop() errorMonth: string | string[];\n\n  /** One or multiple error message for year */\n  @Prop() errorYear: string | string[];\n\n  /** Invalid status for month */\n  @Prop({ reflect: true }) invalidMonth: boolean = false;\n\n  /** Invalid status for year */\n  @Prop({ reflect: true }) invalidYear: boolean = false;\n\n  /** Id of the element which describes the month dropdown */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedbyMonth: string = \"\";\n\n  /** Id of the element which describes the year dropdown */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedbyYear: string = \"\";\n\n  /**  Translation strings. */\n  @Prop() localization: StzhMonthyearpickerLocalizedText;\n\n  /** Monthyearpicker change event */\n  @Event() stzhChange: EventEmitter<StzhMonthyearpickerChangeEvent>;\n\n  @Element() element: HTMLStzhMonthyearpickerElement;\n\n  @Watch(\"months\")\n  monthsWatcher(newValue: number[] | string) {\n    if (typeof newValue === \"string\") {\n      this._months = JSON.parse(newValue);\n    } else {\n      this._months = newValue;\n    }\n\n    this.updateMonthOptions();\n  }\n\n  @Watch(\"years\")\n  yearsWatcher(newValue: number[] | string) {\n    if (typeof newValue === \"string\") {\n      this._years = JSON.parse(newValue);\n    } else {\n      this._years = newValue;\n    }\n\n    this.updateYearOptions();\n  }\n\n  @Watch(\"value\")\n  @Watch(\"min\")\n  @Watch(\"max\")\n  minMaxWatcher() {\n    this.updateMonthOptions();\n    this.updateYearOptions();\n  }\n\n  @Listen(\"stzhChange\", {capture: true})\n  onDropdownChange(event: CustomEvent<StzhDropdownChangeEvent>) {\n    if (event.detail.component === \"stzh-dropdown\") {\n      if ((event.target as HTMLStzhDropdownElement).name === `${this.name}-year`) {\n        this.onYearsDropdownChange(event);\n      } else {\n        this.onMonthsDropdownChange(event);\n      }\n      // stop propagating dropdown change event otherwise angular control value accessor won't work\n      event.stopPropagation();\n    }\n  }\n\n  private monthsDropdown: HTMLStzhDropdownElement;\n  private dropdownMonthOptions: StzhDropdownOption[];\n  private dropdownYearOptions: StzhDropdownOption[];\n\n  private onRootFocus = () => {\n    if (this.monthsDropdown) {\n      this.monthsDropdown.focus();\n    }\n  }\n\n  private onMonthsDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const year = this.value.split(\"-\")[0] || \"0000\";\n    const month = event.detail.value || \"00\";\n    this.onChange(year, month);\n  }\n\n  private onYearsDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const year = event.detail.value || \"0000\";\n    const month = this.value.split(\"-\")[1] || \"00\";\n    this.onChange(year, month);\n  }\n\n  private onChange(year, month) {\n    this.value = `${year}-${month}`;\n    this.stzhChange.emit({\n      component: \"stzh-monthyearpicker\",\n      value: this.value,\n      valueMonth: month,\n      valueYear: year\n    });\n  }\n\n  private updateMonthOptions() {\n    const options = [];\n    let months = [];\n\n    if (this._months) {\n      months = this._months;\n    } else {\n      const currentYear = Number(this.value.split(\"-\")[0] || \"0000\");\n\n      let minMonth = 1;\n      let maxMonth = 12;\n\n      if (this.min) {\n        const minDate = new Date(this.min);\n\n        if (currentYear === minDate.getFullYear()) {\n          minMonth = minDate.getMonth() + 1;\n        }\n      }\n\n      if (this.max) {\n        const maxDate = new Date(this.max);\n\n        if (currentYear === maxDate.getFullYear()) {\n          maxMonth = maxDate.getMonth() + 1;\n        }\n      }\n\n      for (let i = minMonth; i <= maxMonth; i++) {\n        months.push(i);\n      }\n    }\n\n    months.forEach((month) => {\n      const paddedMonth = (\"00\" + month).slice(-2);\n      const monthName = this.localization.$globals.monthNames[month - 1];\n\n      options.push({\n        text: this.format === \"creditcard\"\n          ? `${paddedMonth} (${monthName})`\n          : monthName,\n        value: paddedMonth\n      });\n    });\n\n    this.dropdownMonthOptions = options;\n  }\n\n  private updateYearOptions(): void {\n    const options = [];\n    let years = [];\n\n    if (this._years) {\n      years = this._years;\n    } else {\n      const currentMonth = Number(this.value.split(\"-\")[1] || \"00\");\n\n      const yearNow = new Date().getFullYear();\n      let minYear = this.minYear || (yearNow - 10);\n      let maxYear = this.maxYear || (yearNow + 10);\n\n      if (this.min) {\n        const minDate = new Date(this.min);\n\n        if (currentMonth && currentMonth < minDate.getMonth() + 1) {\n          minYear = minDate.getFullYear() + 1;\n        } else {\n          minYear = minDate.getFullYear();\n        }\n      }\n\n      if (this.max) {\n        const maxDate = new Date(this.max);\n\n        if (currentMonth && currentMonth > maxDate.getMonth() + 1) {\n          maxYear = maxDate.getFullYear() - 1;\n        } else {\n          maxYear = maxDate.getFullYear();\n        }\n      }\n\n      for (let i = minYear; i <= maxYear; i++) {\n        years.push(i);\n      }\n    }\n\n    years.forEach((year) => {\n      options.push({ text: year, value: year });\n    });\n\n    this.dropdownYearOptions = options;\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"monthyearpicker\");\n    }\n\n    this.monthsWatcher(this.months);\n    this.yearsWatcher(this.years);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-monthyearpicker\": true\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n          />\n\n          <div class=\"stzh-monthyearpicker__wrapper\">\n            <stzh-dropdown\n              open={this.monthOpen}\n              name={`${this.name}-month`}\n              class=\"stzh-monthyearpicker__months-dropdown\"\n              label={this.monthLabel || this.localization.monthLabel}\n              ref={(el) => (this.monthsDropdown = el as HTMLStzhDropdownElement)}\n              options={this.dropdownMonthOptions}\n              items={[this.value.split(\"-\")[1]]}\n              required={this.required}\n              disabled={this.disabled}\n              size={this.size}\n              hideOptional={this.hideOptional}\n              popoverPlacement={this.popoverPlacement}\n              description={this.descriptionMonth}\n              descriptionLong={this.descriptionLongMonth}\n              error={this.errorMonth}\n              a11yDescribedby={this.a11yDescribedbyMonth}\n              invalid={this.invalidMonth}\n            ></stzh-dropdown>\n\n            <div class=\"stzh-monthyearpicker__separator\">/</div>\n\n            <stzh-dropdown\n              open={this.yearOpen}\n              name={`${this.name}-year`}\n              class=\"stzh-monthyearpicker__years-dropdown\"\n              label={this.yearLabel || this.localization.yearLabel}\n              options={this.dropdownYearOptions}\n              items={[this.value.split(\"-\")[0]]}\n              required={this.required}\n              disabled={this.disabled}\n              size={this.size}\n              hideOptional={this.hideOptional}\n              popoverPlacement={this.popoverPlacement}\n              description={this.descriptionYear}\n              descriptionLong={this.descriptionLongYear}\n              error={this.errorYear}\n              a11yDescribedby={this.a11yDescribedbyYear}\n              invalid={this.invalidYear}\n            ></stzh-dropdown>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}