{"file":"presto-cta-overlay-ui.entry.cjs.js","mappings":"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","names":["fitText","h"],"sources":["src/components/core/features/presto-cta-overlay/ui/presto-cta-overlay-ui.scss?tag=presto-cta-overlay-ui&encapsulation=shadow","src/components/core/features/presto-cta-overlay/ui/presto-cta-overlay-ui.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 user-select: none;\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.wrapper {\n height: 100%;\n position: relative;\n color: #fff;\n font-family: var(--plyr-font-family, $family);\n}\n.overlay {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 48px;\n height: 100%;\n\n &.has-link {\n cursor: pointer;\n }\n\n &:before {\n content: '';\n border-radius: var(--presto-player-border-radius, 0);\n opacity: var(--presto-player-cta-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-cta-background, #000);\n z-index: -1;\n box-shadow: inset 0 0 100px black;\n }\n}\n\n.content {\n width: 80%;\n max-width: 600px;\n\n & * ~ * {\n margin-top: 22px;\n }\n}\n\nbutton {\n background: var(--plyr-color-main, #000);\n appearance: none;\n padding: 6px 12px;\n align-items: center;\n display: inline-flex;\n border-width: 1px;\n border-color: transparent;\n color: #fff;\n border-radius: 0;\n cursor: pointer;\n font-size: 0.8em;\n border-radius: 0 var(--presto-player-cta-border-radius, 0) var(--presto-player-cta-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\nh1 {\n font-size: 1.5em;\n font-weight: 500;\n margin: 0;\n line-height: 1.1em;\n}\n\n.skip,\n.rewatch {\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\n.rewatch {\n display: inline-flex;\n align-items: center;\n right: auto;\n left: 0;\n\n .icon {\n margin-right: 5px;\n }\n}\n\np {\n font-size: 0.85em;\n margin: 0;\n margin-top: 1.5em;\n line-height: 1.4em;\n opacity: 0.75;\n\n &.is-small {\n font-size: 0.85em;\n margin: 1.5em 0px 0px;\n line-height: 0.1em;\n opacity: 0.75;\n }\n}\n\n.is-centered {\n text-align: center;\n}\n","import { Component, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { ButtonLinkObject, i18nConfig } from '../../../../../interfaces';\nimport fitText from '../../../../../library/fittext.js';\n\n@Component({\n tag: 'presto-cta-overlay-ui',\n styleUrl: 'presto-cta-overlay-ui.scss',\n shadow: true,\n})\nexport class CTAOverlayUI {\n private textInput?: HTMLInputElement;\n\n /**\n * Props\n */\n @Prop() headline: string;\n @Prop() defaultHeadline: string;\n @Prop() bottomText: string;\n @Prop() showButton: boolean;\n @Prop() buttonText: string;\n @Prop() buttonType: 'link' | 'time';\n @Prop() buttonLink: ButtonLinkObject;\n @Prop() allowRewatch: boolean;\n @Prop() allowSkip: boolean;\n @Prop() direction?: 'rtl';\n @Prop() i18n: i18nConfig;\n @Prop() provider: string;\n @Prop() type: string;\n\n /**\n * State\n */\n @State() isAudioProvider: boolean;\n\n /**\n * Events\n */\n @Event() skip: EventEmitter<void>;\n @Event() rewatch: EventEmitter<void>;\n\n /**\n * Shrink text.\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 === true ? 15 : 20,\n minFontSize: 8,\n });\n }\n\n handleCTAClick(e) {\n if (!this.buttonLink?.url) {\n return;\n }\n e.preventDefault();\n e.stopPropagation();\n this.handleLink();\n }\n\n handleLink() {\n if (this.buttonLink?.opensInNewTab) {\n window.open(this.buttonLink?.url, '_blank');\n } else {\n window.location.href = this.buttonLink?.url;\n }\n }\n\n render() {\n return (\n <div class=\"wrapper\" ref={el => (this.textInput = el as HTMLInputElement)}>\n <div onClick={e => this.handleCTAClick(e)} class={`overlay ${this.direction === 'rtl' ? 'rtl' : ''} ${this.buttonLink?.url ? 'has-link' : ''}`}>\n <div class={this.isAudioProvider ? 'content is-centered' : 'content'}>\n <h1 part=\"cta-headline\">{this.headline || this.defaultHeadline}</h1>\n {this.bottomText && <p class={this.isAudioProvider && 'is-small'} part=\"cta-bottom-text\" innerHTML={this.bottomText}></p>}\n {this.showButton && (\n <presto-player-button\n full\n onClick={e => this.handleCTAClick(e)}\n part=\"cta-button\"\n href={this?.buttonLink?.url}\n target={this?.buttonLink?.opensInNewTab ? '_blank' : '_self'}\n class=\"button\"\n type=\"primary\"\n >\n {this.buttonText}\n </presto-player-button>\n )}\n </div>\n </div>\n {!!this.allowRewatch && (\n <div\n class=\"rewatch\"\n onClick={e => {\n e.preventDefault();\n e.stopImmediatePropagation();\n this.rewatch.emit();\n }}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"icon icon-corner-up-left\"\n >\n <polyline points=\"9 14 4 9 9 4\"></polyline>\n <path d=\"M20 20v-7a4 4 0 0 0-4-4H4\"></path>\n </svg>\n {this?.i18n?.rewatch}\n </div>\n )}\n {!!this.allowSkip && (\n <div\n class=\"skip\"\n onClick={e => {\n e.preventDefault();\n this.skip.emit();\n }}\n >\n {this?.i18n?.skip} &rarr;\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}