{"version":3,"names":["prestoEmailOverlayUiCss","PrestoEmailOverlayUiStyle0","EmailOverlayUI","handleSubmit","e","this","submitForm","emit","email","preventDefault","componentDidLoad","currentType","type","provider","isAudioProvider","fitText","textInput","maxFontSize","minFontSize","handleChange","target","value","render","h","key","class","direction","ref","el","headline","_a","i18n","emailDefaultHeadline","isLoading","onSubmit","placeholder","_b","emailPlaceholder","onInput","event","required","buttonText","_c","play","errorMessage","bottomText","innerHTML","allowSkip","onClick","skip","_d","prestoSpinnerCss","PrestoPlayerSpinnerStyle0","PrestoSpinner","part"],"sources":["src/components/core/features/presto-email-overlay/ui/presto-email-overlay-ui.scss?tag=presto-email-overlay-ui&encapsulation=shadow","src/components/core/features/presto-email-overlay/ui/presto-email-overlay-ui.tsx","src/components/ui/presto-spinner/presto-spinner.scss?tag=presto-player-spinner&encapsulation=shadow","src/components/ui/presto-spinner/presto-spinner.tsx"],"sourcesContent":[":host {\n  display: block;\n  font-size: 16px;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 99999;\n}\n\n* {\n  box-sizing: border-box;\n}\n\n$family: 'San Francisco', -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;\n\na {\n  color: #fff;\n}\n\n.overlay {\n  position: relative;\n  display: flex;\n  align-items: center;\n  text-align: center;\n  justify-content: center;\n  padding: 48px;\n  color: #fff;\n  font-family: var(--plyr-font-family, $family);\n  height: 100%;\n\n  &:before {\n    content: '';\n    border-radius: var(--presto-player-border-radius, 0);\n    opacity: var(--presto-player-email-background-opacity, 0.75);\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    background-color: var(--presto-player-email-background, #000);\n    z-index: -1;\n    box-shadow: inset 0 0 100px black;\n  }\n\n  &.rtl form {\n    flex-direction: row-reverse;\n  }\n}\n\n.content {\n  width: 20em;\n}\n\nform {\n  display: flex;\n  align-items: stretch;\n  justify-content: center;\n}\n\ninput {\n  background: #fff;\n  border: none;\n  font-size: 0.8em;\n  line-height: 20px;\n  padding: 6px 8px;\n  border-radius: 0;\n  border-width: 1px;\n  border-style: solid;\n  border-color: transparent;\n  border-radius: var(--presto-player-email-border-radius, 0) 0 0 var(--presto-player-email-border-radius);\n  flex: 1;\n\n  @media screen and (min-width: 700px) {\n    padding: 10px 14px;\n  }\n\n  &:focus {\n    border-color: var(--plyr-color-main, #000);\n    z-index: 1;\n  }\n  &:focus,\n  &:hover {\n    outline: none;\n  }\n}\n\n.rtl input {\n  border-radius: 0 var(--presto-player-email-border-radius, 0) var(--presto-player-email-border-radius) 0;\n}\n\nbutton {\n  background-color: var(--presto-player-button-color, var(--plyr-color-main));\n  border-color: var(--presto-player-button-color, var(--plyr-color-main));\n  color: var(--presto-player-button-text, #fff);\n  appearance: none;\n  padding: 6px 12px;\n  align-items: center;\n  display: inline-flex;\n  border-width: 1px;\n  border-color: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  font-size: 0.8em;\n  border-radius: 0 var(--presto-player-email-border-radius, 0) var(--presto-player-email-border-radius) 0;\n\n  @media screen and (min-width: 700px) {\n    padding: 10px 18px;\n  }\n\n  &:focus {\n    box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px, var(--plyr-color-main, #000) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;\n    z-index: 1;\n  }\n  &:focus,\n  &:hover {\n    outline: none;\n  }\n}\n\n.rtl button {\n  border-radius: var(--presto-player-email-border-radius, 0) 0 0 var(--presto-player-email-border-radius);\n}\n\nh1 {\n  font-size: 1.5em;\n  font-weight: 500;\n  margin: 0 0 22px 0;\n  max-width: 600px;\n  line-height: 1.1em;\n\n  &.is-small {\n    margin-bottom: 1em;\n    font-size: 1.1em;\n  }\n}\n\n.skip {\n  font-size: 0.8em;\n  font-weight: 600;\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: 4%;\n  cursor: pointer;\n}\n\np {\n  font-size: 0.7em;\n  margin: 0;\n  margin-top: 1.5em;\n\n  &.is-small {\n    font-size: 0.9em;\n    margin-top: 1em;\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { i18nConfig } from '../../../../../interfaces';\nimport fitText from '../../../../../library/fittext.js';\n\n@Component({\n  tag: 'presto-email-overlay-ui',\n  styleUrl: 'presto-email-overlay-ui.scss',\n  shadow: true,\n})\nexport class EmailOverlayUI {\n  private textInput?: HTMLInputElement;\n\n  /**\n   * Props\n   */\n  @Prop() headline: string;\n  @Prop() bottomText: string;\n  @Prop() buttonText: string;\n  @Prop() allowSkip: boolean;\n  @Prop() borderRadius: number;\n  @Prop() isLoading: boolean;\n  @Prop() errorMessage: string;\n  @Prop() direction?: 'rtl';\n  @Prop() i18n: i18nConfig;\n  @Prop() provider: string;\n  @Prop() type: string;\n\n  /**\n   * State\n   */\n  @State() email: string;\n  @State() isAudioProvider: boolean;\n\n  /**\n   * Events\n   */\n  @Event() submitForm: EventEmitter<object>;\n  @Event() skip: EventEmitter<object>;\n\n  /**\n   * Handle form submission\n   * @param e Event\n   */\n  handleSubmit(e) {\n    this.submitForm.emit({\n      email: this.email,\n    });\n    e.preventDefault();\n  }\n\n  componentDidLoad() {\n    let currentType = this.type || this.provider;\n    this.isAudioProvider = currentType === 'audio' ? true : false;\n    fitText(this.textInput, 3, {\n      maxFontSize: this.isAudioProvider ? 15 : 20,\n      minFontSize: 8,\n    });\n  }\n\n  /**\n   * Handle input change\n   * @param e Event\n   */\n  handleChange(e) {\n    this.email = e.target.value;\n  }\n\n  render() {\n    return (\n      <div class={`overlay ${this.direction === 'rtl' ? 'rtl' : ''}`} ref={el => (this.textInput = el as HTMLInputElement)}>\n        <div class=\"content\">\n          <h1 class={this.isAudioProvider && 'is-small'}>{this.headline || this?.i18n?.emailDefaultHeadline}</h1>\n          {this.isLoading ? (\n            <presto-player-spinner></presto-player-spinner>\n          ) : (\n            <form onSubmit={e => this.handleSubmit(e)}>\n              <input type=\"email\" placeholder={this?.i18n?.emailPlaceholder} value={this.email} onInput={event => this.handleChange(event)} required></input>\n              <button type=\"submit\">{this.buttonText || this?.i18n?.play}</button>\n            </form>\n          )}\n          {this.errorMessage && <p class=\"error\">{this.errorMessage}</p>}\n          {this.bottomText && <p innerHTML={this.bottomText} class={this.isAudioProvider && 'is-small'}></p>}\n          {!!this.allowSkip && (\n            <div\n              class=\"skip\"\n              onClick={() => {\n                this.skip.emit();\n              }}\n            >\n              {this?.i18n?.skip} &rarr;\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n","/**\n * @prop --track-color: The color of the spinner's track.\n * @prop --indicator-color: The color of the spinner's indicator.\n * @prop --stroke-width: The width of the indicator.\n */\n:host {\n  position: relative;\n  box-sizing: border-box;\n\n  & *,\n  & *:before,\n  & *:after {\n    box-sizing: inherit;\n  }\n\n  --track-color: #0d131e20;\n  --indicator-color: var(--plyr-color-main);\n  --stroke-width: 2px;\n\n  display: inline-flex;\n}\n\n.spinner {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border-radius: 50%;\n  border: solid var(--stroke-width) var(--track-color);\n  border-top-color: var(--indicator-color);\n  border-right-color: var(--indicator-color);\n  animation: 1s linear infinite spin;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'presto-player-spinner',\n  styleUrl: 'presto-spinner.scss',\n  shadow: true,\n})\nexport class PrestoSpinner {\n  render() {\n    return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\"></span>;\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAA0B,8jFAChC,MAAAC,EAAeD,E,MCQFE,EAAc,M,8ZAkCzB,YAAAC,CAAaC,GACXC,KAAKC,WAAWC,KAAK,CACnBC,MAAOH,KAAKG,QAEdJ,EAAEK,gB,CAGJ,gBAAAC,GACE,IAAIC,EAAcN,KAAKO,MAAQP,KAAKQ,SACpCR,KAAKS,gBAAkBH,IAAgB,QAAU,KAAO,MACxDI,EAAQV,KAAKW,UAAW,EAAG,CACzBC,YAAaZ,KAAKS,gBAAkB,GAAK,GACzCI,YAAa,G,CAQjB,YAAAC,CAAaf,GACXC,KAAKG,MAAQJ,EAAEgB,OAAOC,K,CAGxB,MAAAC,G,YACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,WAAWpB,KAAKqB,YAAc,MAAQ,MAAQ,KAAMC,IAAKC,GAAOvB,KAAKW,UAAYY,GAC3FL,EAAA,OAAAC,IAAA,2CAAKC,MAAM,WACTF,EAAA,MAAAC,IAAA,2CAAIC,MAAOpB,KAAKS,iBAAmB,YAAaT,KAAKwB,YAAYC,EAAAzB,OAAI,MAAJA,YAAI,SAAJA,KAAM0B,QAAI,MAAAD,SAAA,SAAAA,EAAEE,uBAC5E3B,KAAK4B,UACJV,EAAA,8BAEAA,EAAA,QAAMW,SAAU9B,GAAKC,KAAKF,aAAaC,IACrCmB,EAAA,SAAOX,KAAK,QAAQuB,aAAaC,EAAA/B,OAAI,MAAJA,YAAI,SAAJA,KAAM0B,QAAI,MAAAK,SAAA,SAAAA,EAAEC,iBAAkBhB,MAAOhB,KAAKG,MAAO8B,QAASC,GAASlC,KAAKc,aAAaoB,GAAQC,SAAQ,OACtIjB,EAAA,UAAQX,KAAK,UAAUP,KAAKoC,cAAcC,EAAArC,OAAI,MAAJA,YAAI,SAAJA,KAAM0B,QAAI,MAAAW,SAAA,SAAAA,EAAEC,QAGzDtC,KAAKuC,cAAgBrB,EAAA,KAAAC,IAAA,2CAAGC,MAAM,SAASpB,KAAKuC,cAC5CvC,KAAKwC,YAActB,EAAA,KAAAC,IAAA,2CAAGsB,UAAWzC,KAAKwC,WAAYpB,MAAOpB,KAAKS,iBAAmB,eAC/ET,KAAK0C,WACNxB,EAAA,OAAAC,IAAA,2CACEC,MAAM,OACNuB,QAAS,KACP3C,KAAK4C,KAAK1C,MAAM,IAGjB2C,EAAA7C,OAAI,MAAJA,YAAI,SAAJA,KAAM0B,QAAI,MAAAmB,SAAA,S,EAAED,KAAI,O,aCzF/B,MAAME,EAAmB,ugBACzB,MAAAC,EAAeD,E,MCMFE,EAAa,M,yBACxB,MAAA/B,GACE,OAAOC,EAAA,QAAAC,IAAA,2CAAM8B,KAAK,OAAO7B,MAAM,UAAS,YAAW,OAAM,YAAW,U"}