@oiz/stzh-components 3.0.0 → 3.1.0

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

@@ -1 +1 @@
-{"file":"stzh-readspeaker.js","mappings":"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","names":["StzhReadspeaker"],"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  @media print {\n    display: none;\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"],"version":3}
+{"file":"stzh-readspeaker.js","mappings":"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","names":["StzhReadspeaker"],"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  @media print {\n    display: none;\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    usePost: true,\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"],"version":3}