{"version":3,"names":["Fragment","props","children","prestoPlayerButtonCss","PrestoPlayerButtonStyle0","PrestoPlayerButton","componentWillLoad","this","handleSlotChange","click","button","focus","options","blur","hasLabel","hasPrefix","querySelector","hasSuffix","handleBlur","hasFocus","prestoBlur","emit","handleFocus","prestoFocus","handleClick","event","disabled","preventDefault","stopPropagation","render","isLink","href","interior","h","key","part","class","onSlotchange","name","type","size","submit","value","onBlur","onFocus","onClick","link","target","download","rel","undefined","role","tabindex"],"sources":["../../node_modules/stencil-fragment/index.js","src/components/ui/presto-player-button/presto-player-button.scss?tag=presto-player-button&encapsulation=shadow","src/components/ui/presto-player-button/presto-player-button.tsx"],"sourcesContent":["export default (props, children) => [ ...children ]",":host {\n  display: inline-block;\n  width: auto;\n  cursor: pointer;\n}\n:host([full]) {\n  display: block;\n}\n\n.button {\n  display: inline-flex;\n  align-items: stretch;\n  justify-content: center;\n  width: 100%;\n  border-style: solid;\n  border-width: var(--presto-player-button-border-width);\n  font-family: var(--plyr-font-family, inherit);\n  font-weight: var(--presto-player-button-font-weight, 500);\n  text-decoration: none;\n  user-select: none;\n  white-space: nowrap;\n  vertical-align: middle;\n  padding: 0;\n  transition: var(--presto--player-transition-fast, 150ms) background-color, var(--presto-player-transition-fast, 150ms) color, var(--presto-player-transition-fast, 150ms) border,\n    var(--presto--player-transition-fast, 150ms) box-shadow;\n  cursor: inherit;\n  border-radius: var(--presto-player-button-border-radius, 0.25em);\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &.button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n\n    // When disabled, prevent mouse events from bubbling up\n    * {\n      pointer-events: none;\n    }\n  }\n\n  // Clicks on icons shouldn't prevent the button from gaining focus\n  ::slotted(.presto--icon) {\n    pointer-events: none;\n  }\n}\n\n.button__prefix,\n.button__suffix {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n}\n\n.button__label {\n  display: flex;\n  align-items: center;\n\n  ::slotted(presto-icon) {\n    vertical-align: -2px;\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Standard buttons\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button {\n  &.button--default {\n    background-color: var(--presto-player-color-white, #fff);\n    border-color: var(--presto-player-color-gray-300, #d1d5db);\n    color: var(--presto-player-color-gray-600, #4b5563);\n\n    &:hover:not(.button--disabled) {\n      border-color: var(--presto-player-button-color, var(--plyr-color-main));\n      color: var(--presto-player-button-color, var(--plyr-color-main));\n      opacity: 0.75;\n    }\n\n    &:focus:not(.button--disabled) {\n      border-color: var(--presto-player-button-color, var(--plyr-color-main));\n      color: var(--presto-player-button-color, var(--plyr-color-main));\n      opacity: 1;\n    }\n\n    &:active:not(.button--disabled) {\n      border-color: var(--presto-player-button-color, var(--plyr-color-main));\n      color: var(--presto-player-button-color, var(--plyr-color-main));\n      opacity: 1;\n    }\n  }\n\n  &.button--primary {\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\n    &:hover:not(.button--disabled) {\n      opacity: 0.9;\n    }\n\n    &:focus:not(.button--disabled) {\n      opacity: 1;\n    }\n\n    &:active:not(.button--disabled) {\n      opacity: 1;\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Text buttons\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--text {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--presto-player-button-color, var(--plyr-color-main));\n\n  &:hover:not(.button--disabled) {\n    background-color: transparent;\n    border-color: transparent;\n    opacity: 0.8;\n  }\n\n  &:focus:not(.button--disabled) {\n    background-color: transparent;\n    border-color: transparent;\n    opacity: 0.7;\n  }\n\n  &:active:not(.button--disabled) {\n    background-color: transparent;\n    border-color: transparent;\n    opacity: 0.7;\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--small {\n  font-size: var(--presto-player-button-font-size-small, 0.875em);\n  height: var(--presto-player-button-height-small, 1.875em);\n  line-height: calc(var(--presto-player-button-height-small, 1.875em) - var(--presto-player-button-border-width, 1px) * 2);\n}\n\n.button--medium {\n  font-size: var(--presto-player-button-font-size-medium, 1em);\n  height: var(--presto-player-button-height-medium, 2.5em);\n  line-height: calc(var(--presto-player-button-height-medium, 2.5em) - var(--presto-player-button-border-width, 1px) * 2);\n}\n\n.button--large {\n  font-size: var(--presto-player-button-font-size-large, 1.25em);\n  height: var(--presto-player-button-height-large, 3.125em);\n  line-height: calc(var(--presto-player-button-height-large, 3.125em) - var(--presto-player-button-border-width, 1px) * 2);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Full modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n.button--full {\n  display: block;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Button spacing\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--has-label {\n  &.button--small .button__label {\n    padding: 0 var(--presto-player-button-spacing-small, 0.75em);\n  }\n\n  &.button--medium .button__label {\n    padding: 0 var(--presto-player-button-spacing-medium, 1em);\n  }\n\n  &.button--large .button__label {\n    padding: 0 var(--presto-player-button-spacing-large, 1.25em);\n  }\n}\n\n.button--has-prefix {\n  &.button--small {\n    padding-left: var(--presto-player-button-spacing-x-small, 0.5em);\n\n    .button__label {\n      padding-left: var(--presto-player-button-spacing-x-small, 0.5em);\n    }\n  }\n\n  &.button--medium {\n    padding-left: var(--presto-player-button-spacing-small, 0.75em);\n\n    .button__label {\n      padding-left: var(--presto-player-button-spacing-small, 0.75em);\n    }\n  }\n\n  &.button--large {\n    padding-left: var(--presto-player-button-spacing-small, 0.75em);\n\n    .button__label {\n      padding-left: var(--presto-player-button-spacing-small, 0.75em);\n    }\n  }\n}\n\n.button--has-suffix,\n.button--caret {\n  &.button--small {\n    padding-right: var(--presto-player-button-spacing-x-small, 0.5em);\n\n    .button__label {\n      padding-right: var(--presto-player-button-spacing-x-small, 0.5em);\n    }\n  }\n\n  &.button--medium {\n    padding-right: var(--presto-player-button-spacing-small, 0.75em);\n\n    .button__label {\n      padding-right: var(--presto-player-button-spacing-small, 0.75em);\n    }\n  }\n\n  &.button--large {\n    padding-right: var(--presto-player-button-spacing-small, 0.75em);\n\n    .button__label {\n      padding-right: var(--presto-player-button-spacing-small, 0.75em);\n    }\n  }\n}\n","import { Component, Prop, Event, EventEmitter, State, Element, h } from '@stencil/core';\nimport Fragment from 'stencil-fragment';\n\n@Component({\n  tag: 'presto-player-button',\n  styleUrl: 'presto-player-button.scss',\n  shadow: true,\n})\nexport class PrestoPlayerButton {\n  @Element() button: HTMLElement | HTMLAnchorElement;\n\n  @State() private hasFocus = false;\n  @State() private hasLabel = false;\n  @State() private hasPrefix = false;\n  @State() private hasSuffix = false;\n\n  /** The button's type. */\n  @Prop({ reflect: true }) type: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' = 'default';\n\n  /** The button's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Draws the button with a caret for use with dropdowns, popovers, etc. */\n  @Prop({ reflect: true }) full?: boolean = false;\n\n  /** Disables the button. */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /** Indicates if activating the button should submit the form. Ignored when `href` is set. */\n  @Prop({ reflect: true }) submit?: boolean = false;\n\n  /** An optional name for the button. Ignored when `href` is set. */\n  @Prop() name: string;\n\n  /** An optional value for the button. Ignored when `href` is set. */\n  @Prop() value: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @Prop() href: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @Prop({ reflect: true }) target: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @Prop() download: string;\n\n  /** Emitted when the button loses focus. */\n  @Event() prestoBlur: EventEmitter<void>;\n\n  /** Emitted when the button gains focus. */\n  @Event() prestoFocus: EventEmitter<void>;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  /** Simulates a click on the button. */\n  click() {\n    this.button.click();\n  }\n\n  /** Sets focus on the button. */\n  focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  blur() {\n    this.button.blur();\n  }\n\n  handleSlotChange() {\n    this.hasLabel = !!this.button.children;\n    this.hasPrefix = !!this.button.querySelector('[slot=\"prefix\"]');\n    this.hasSuffix = !!this.button.querySelector('[slot=\"suffix\"]');\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n    this.prestoBlur.emit();\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n    this.prestoFocus.emit();\n  }\n\n  handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  render() {\n    const isLink = this.href ? true : false;\n\n    const interior = (\n      <Fragment>\n        <span part=\"prefix\" class=\"button__prefix\">\n          <slot onSlotchange={() => this.handleSlotChange()} name=\"prefix\"></slot>\n        </span>\n        <span part=\"label\" class=\"button__label\">\n          <slot onSlotchange={() => this.handleSlotChange()}></slot>\n        </span>\n        <span part=\"suffix\" class=\"button__suffix\">\n          <slot onSlotchange={() => this.handleSlotChange()} name=\"suffix\"></slot>\n        </span>\n      </Fragment>\n    );\n\n    const button = (\n      <button\n        part=\"base\"\n        class={{\n          'button': true,\n          'button--default': this.type === 'default',\n          'button--primary': this.type === 'primary',\n          'button--success': this.type === 'success',\n          'button--info': this.type === 'info',\n          'button--warning': this.type === 'warning',\n          'button--danger': this.type === 'danger',\n          'button--text': this.type === 'text',\n          'button--small': this.size === 'small',\n          'button--medium': this.size === 'medium',\n          'button--large': this.size === 'large',\n          'button--disabled': this.disabled,\n          'button--focused': this.hasFocus,\n          'button--has-label': this.hasLabel,\n          'button--has-prefix': this.hasPrefix,\n          'button--has-suffix': this.hasSuffix,\n        }}\n        disabled={this.disabled}\n        type={this.submit ? 'submit' : 'button'}\n        name={this.name}\n        value={this.value}\n        onBlur={() => this.handleBlur}\n        onFocus={() => this.handleFocus}\n        onClick={() => this.handleClick}\n      >\n        {interior}\n      </button>\n    );\n\n    const link = (\n      <a\n        part=\"base\"\n        class={{\n          'button': true,\n          'button--default': this.type === 'default',\n          'button--primary': this.type === 'primary',\n          'button--success': this.type === 'success',\n          'button--info': this.type === 'info',\n          'button--warning': this.type === 'warning',\n          'button--danger': this.type === 'danger',\n          'button--text': this.type === 'text',\n          'button--small': this.size === 'small',\n          'button--medium': this.size === 'medium',\n          'button--large': this.size === 'large',\n          'button--disabled': this.disabled,\n          'button--focused': this.hasFocus,\n          'button--has-label': this.hasLabel,\n          'button--has-prefix': this.hasPrefix,\n          'button--has-suffix': this.hasSuffix,\n        }}\n        href={this.href}\n        target={this.target}\n        download={this.download}\n        rel={this.target ? 'noreferrer noopener' : undefined}\n        role=\"button\"\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        tabindex={this.disabled ? '-1' : '0'}\n        onBlur={() => this.handleBlur}\n        onFocus={() => this.handleFocus}\n        onClick={() => this.handleClick}\n      >\n        {interior}\n      </a>\n    );\n\n    return isLink ? link : button;\n  }\n}\n"],"mappings":"yDAAA,MAAAA,EAAe,CAACC,EAAOC,IAAa,IAAKA,GCAzC,MAAMC,EAAwB,qxKAC9B,MAAAC,EAAeD,E,MCOFE,EAAkB,M,uHAGD,M,cACA,M,eACC,M,eACA,M,UAG+E,U,UAG9C,S,UAGpB,M,cAGI,M,YAGF,M,2GAuB5C,iBAAAC,GACEC,KAAKC,kB,CAIP,KAAAC,GACEF,KAAKG,OAAOD,O,CAId,KAAAE,CAAMC,GACJL,KAAKG,OAAOC,MAAMC,E,CAIpB,IAAAC,GACEN,KAAKG,OAAOG,M,CAGd,gBAAAL,GACED,KAAKO,WAAaP,KAAKG,OAAOR,SAC9BK,KAAKQ,YAAcR,KAAKG,OAAOM,cAAc,mBAC7CT,KAAKU,YAAcV,KAAKG,OAAOM,cAAc,kB,CAG/C,UAAAE,GACEX,KAAKY,SAAW,MAChBZ,KAAKa,WAAWC,M,CAGlB,WAAAC,GACEf,KAAKY,SAAW,KAChBZ,KAAKgB,YAAYF,M,CAGnB,WAAAG,CAAYC,GACV,GAAIlB,KAAKmB,SAAU,CACjBD,EAAME,iBACNF,EAAMG,iB,EAIV,MAAAC,GACE,MAAMC,EAASvB,KAAKwB,KAAO,KAAO,MAElC,MAAMC,EACJC,EAACjC,EAAQ,CAAAkC,IAAA,4CACPD,EAAA,QAAAC,IAAA,2CAAMC,KAAK,SAASC,MAAM,kBACxBH,EAAA,QAAAC,IAAA,2CAAMG,aAAc,IAAM9B,KAAKC,mBAAoB8B,KAAK,YAE1DL,EAAA,QAAAC,IAAA,2CAAMC,KAAK,QAAQC,MAAM,iBACvBH,EAAA,QAAAC,IAAA,2CAAMG,aAAc,IAAM9B,KAAKC,sBAEjCyB,EAAA,QAAAC,IAAA,2CAAMC,KAAK,SAASC,MAAM,kBACxBH,EAAA,QAAAC,IAAA,2CAAMG,aAAc,IAAM9B,KAAKC,mBAAoB8B,KAAK,aAK9D,MAAM5B,EACJuB,EAAA,UAAAC,IAAA,2CACEC,KAAK,OACLC,MAAO,CACL1B,OAAU,KACV,kBAAmBH,KAAKgC,OAAS,UACjC,kBAAmBhC,KAAKgC,OAAS,UACjC,kBAAmBhC,KAAKgC,OAAS,UACjC,eAAgBhC,KAAKgC,OAAS,OAC9B,kBAAmBhC,KAAKgC,OAAS,UACjC,iBAAkBhC,KAAKgC,OAAS,SAChC,eAAgBhC,KAAKgC,OAAS,OAC9B,gBAAiBhC,KAAKiC,OAAS,QAC/B,iBAAkBjC,KAAKiC,OAAS,SAChC,gBAAiBjC,KAAKiC,OAAS,QAC/B,mBAAoBjC,KAAKmB,SACzB,kBAAmBnB,KAAKY,SACxB,oBAAqBZ,KAAKO,SAC1B,qBAAsBP,KAAKQ,UAC3B,qBAAsBR,KAAKU,WAE7BS,SAAUnB,KAAKmB,SACfa,KAAMhC,KAAKkC,OAAS,SAAW,SAC/BH,KAAM/B,KAAK+B,KACXI,MAAOnC,KAAKmC,MACZC,OAAQ,IAAMpC,KAAKW,WACnB0B,QAAS,IAAMrC,KAAKe,YACpBuB,QAAS,IAAMtC,KAAKiB,aAEnBQ,GAIL,MAAMc,EACJb,EAAA,KAAAC,IAAA,2CACEC,KAAK,OACLC,MAAO,CACL1B,OAAU,KACV,kBAAmBH,KAAKgC,OAAS,UACjC,kBAAmBhC,KAAKgC,OAAS,UACjC,kBAAmBhC,KAAKgC,OAAS,UACjC,eAAgBhC,KAAKgC,OAAS,OAC9B,kBAAmBhC,KAAKgC,OAAS,UACjC,iBAAkBhC,KAAKgC,OAAS,SAChC,eAAgBhC,KAAKgC,OAAS,OAC9B,gBAAiBhC,KAAKiC,OAAS,QAC/B,iBAAkBjC,KAAKiC,OAAS,SAChC,gBAAiBjC,KAAKiC,OAAS,QAC/B,mBAAoBjC,KAAKmB,SACzB,kBAAmBnB,KAAKY,SACxB,oBAAqBZ,KAAKO,SAC1B,qBAAsBP,KAAKQ,UAC3B,qBAAsBR,KAAKU,WAE7Bc,KAAMxB,KAAKwB,KACXgB,OAAQxC,KAAKwC,OACbC,SAAUzC,KAAKyC,SACfC,IAAK1C,KAAKwC,OAAS,sBAAwBG,UAC3CC,KAAK,SAAQ,gBACE5C,KAAKmB,SAAW,OAAS,QACxC0B,SAAU7C,KAAKmB,SAAW,KAAO,IACjCiB,OAAQ,IAAMpC,KAAKW,WACnB0B,QAAS,IAAMrC,KAAKe,YACpBuB,QAAS,IAAMtC,KAAKiB,aAEnBQ,GAIL,OAAOF,EAASgB,EAAOpC,C"}