{"version":3,"names":["adsCtaButtonCss","AdsCtaButton","constructor","hostRef","ButtonTypes","BUTTON","ButtonLevels","TERTIARY","ButtonSizes","DEFAULT","this","el","setAttribute","identifier","generateId","component","handleIdentifierChange","newValue","handleClick","evt","disabled","stopPropagation","componentDidLoad","Pipeline.addComponent","disconnectedCallback","Pipeline.removeComponent","render","buttonContent","text","isCircular","h","attributes","autoFocus","type","srLabel","buttonClasses","push","getClassFromLevel","level","getClassFromSize","size","Object","assign","class","join"],"sources":["src/components/ads-cta-button/ads-cta-button.scss?tag=ads-cta-button&encapsulation=shadow","src/components/ads-cta-button/ads-cta-button.tsx"],"sourcesContent":["@import 'core';\n\n/**\n * @prop --ads-cta-button-background-color-primary: Default primary background color\n * @prop --ads-cta-button-background-color-primary-disabled: Primary background color on disabled\n * @prop --ads-cta-button-background-color-primary-focus: Primary background color on focus\n * @prop --ads-cta-button-background-color-primary-hover: Primary background color on hover\n *\n * @prop --ads-cta-button-background-color-secondary: Secondary background color\n * @prop --ads-cta-button-background-color-secondary-disabled: Secondary background color on disabled\n * @prop --ads-cta-button-background-color-secondary-focus: Secondary background color on focus\n * @prop --ads-cta-button-background-color-secondary-hover: Secondary background color on hover\n *\n * @prop --ads-cta-button-background-color-tertiary: Tertiary background color\n * @prop --ads-cta-button-background-color-tertiary-disabled: Tertiary background color on disabled\n * @prop --ads-cta-button-background-color-tertiary-focus: Tertiary background color on focus\n * @prop --ads-cta-button-background-color-tertiary-hover: Tertiary background color on hover\n *\n * @prop --ads-cta-button-border-color-primary: Default primary border color\n * @prop --ads-cta-button-border-color-primary-disabled: primary border color on disabled\n * @prop --ads-cta-button-border-color-primary-focus: primary border color on focus\n * @prop --ads-cta-button-border-color-primary-hover: primary border color on hover\n *\n * @prop --ads-cta-button-border-color-secondary: Secondary border color\n * @prop --ads-cta-button-border-color-secondary-disabled: Secondary border color on disabled\n * @prop --ads-cta-button-border-color-secondary-focus: Secondary border color on focus\n * @prop --ads-cta-button-border-color-secondary-hover: Secondary border color on hover\n *\n * @prop --ads-cta-button-border-color-tertiary: Tertiary border color\n * @prop --ads-cta-button-border-color-tertiary-disabled: Tertiary border color on disabled\n * @prop --ads-cta-button-border-color-tertiary-focus: Tertiary border color on focus\n * @prop --ads-cta-button-border-color-tertiary-hover: Tertiary border color on hover\n *\n * @prop --ads-cta-button-color-primary: Default primary font color\n  * @prop --ads-cta-button-color-primary-disabled: Primary font color on disabled\n * @prop --ads-cta-button-color-primary-focus: Primary font color on focus\n * @prop --ads-cta-button-color-primary-hover: Primary font color on hover\n *\n * @prop --ads-cta-button-color-secondary: Secondary border color\n * @prop --ads-cta-button-color-secondary-disabled: Secondary border color on disabled\n * @prop --ads-cta-button-color-secondary-focus: Secondary border color on focus\n * @prop --ads-cta-button-color-secondary-hover: Secondary border color on hover\n *\n * @prop --ads-cta-button-color-tertiary: Tertiary font color\n * @prop --ads-cta-button-color-tertiary-disabled: Tertiary font color on disabled\n * @prop --ads-cta-button-color-tertiary-focus: Tertiary font color on focus\n * @prop --ads-cta-button-color-tertiary-hover: Tertiary font color on hover\n *\n * @prop --ads-cta-button-border-radius: Default corner value\n * @prop --ads-cta-button-border-style: Default border style\n * @prop --ads-cta-button-border-width: Default border width\n * @prop --ads-cta-button-border-width-disabled: Border width when disabled\n * @prop --ads-cta-button-border-width-focus: Border width on focus\n * @prop --ads-cta-button-border-width-hover: Border width on hover\n *\n * @prop --ads-cta-button-font-size-large: Large font size\n * @prop --ads-cta-button-font-size-medium: Medium font size\n * @prop --ads-cta-button-font-size-small: Small font size\n *\n * @prop --ads-cta-button-height-large: Height for large size\n * @prop --ads-cta-button-height-medium: Height for medium size\n * @prop --ads-cta-button-height-small: Height for small size\n *\n * @prop --ads-cta-button-padding-large: Padding for large\n * @prop --ads-cta-button-padding-medium: Padding for medium\n * @prop --ads-cta-button-padding-small: Padding for small size\n */\n\n::slotted(*) {\n  display: inline-block !important;\n}\n\n:host {\n  display: inline-block;\n\n  &[type='button'],\n  &[type='reset'],\n  &[type='submit'] {\n    appearance: none;\n    -moz-appearance: none;\n    -webkit-appearance: none;\n  }\n}\n\n:host([theme='default']) {\n  @include ads-vars-component-cta-button-default;\n}\n\n:host([theme='dark']) {\n  @include ads-vars-component-cta-button-dark;\n}\n\nbutton {\n  display: inherit !important;\n  @include ads-cta-button;\n  @include ads-cta-button-tertiary;\n  font-family: var(--ads-font-family);\n  width: inherit;\n}\n\nbutton.is-primary {\n  @include ads-cta-button-primary;\n}\n\nbutton.is-secondary {\n  @include ads-cta-button-secondary;\n}\n\nbutton.is-tertiary {\n  @include ads-cta-button-tertiary;\n}\n\nbutton.is-medium {\n  @include ads-cta-button-medium;\n}\n\nbutton.is-small {\n  @include ads-cta-button-small;\n}\n\nbutton.is-circular {\n  @include ads-cta-button-circular;\n\n  &.is-medium {\n    @include ads-cta-button-circular-medium;\n  }\n\n  &.is-small {\n    @include ads-cta-button-circular-small;\n  }\n}\n","import { Component, Element, Listen, Prop, VNode, Watch, h } from '@stencil/core';\n\nimport * as Pipeline from '../core/utils/pipeline';\nimport { BaseComponent } from '../core/interfaces/BaseComponent';\nimport { ButtonLevel, ButtonLevels, ButtonSize, ButtonSizes, ButtonType, ButtonTypes, Theme } from '../core/types/globalTypes';\nimport { generateId, getClassFromLevel, getClassFromSize } from '../core/utils/components';\n\n/**\n * Call-To-Action (CTA) Buttons communicate the principle action on the page. Buttons can consist of text, an image, or both. Buttons affect the state of the application. Button text should accurately describe the action, be as short and concise as possible and sentence capitalized. Do not use buttons as navigational elements, this should be done by links. There are 3 call-to-action button classes that indicate the hierarchy of the actions: Primary is used for the principal call to action on the page. There should only be one primary button class per page for the most important action, i.e. \"Save\". Secondary is used for second level actions on each page, for example \"Cancel\". Tertiary is used for all other actions on each page.\n * @tag `<ads-cta-button>`\n * @slot - Content rendered as rich text inside the component\n * @example\n * <ads-cta-button level=\"primary\" text=\"Hello world\"></ads-cta-button>\n * <ads-cta-button level=\"secondary\" text=\"Hello world\"></ads-cta-button>\n * <ads-cta-button level=\"tertiary\" text=\"Hello world\"></ads-cta-button>\n */\n@Component({\n  tag: 'ads-cta-button',\n  styleUrl: 'ads-cta-button.scss',\n\n  shadow: true,\n})\nexport class AdsCtaButton implements BaseComponent {\n  /**\n   * @hidden\n   */\n  public component: string;\n\n  constructor() {\n    this.el.setAttribute('id', this.identifier || generateId('ads-cta-button'));\n    this.component = 'ads-cta-button';\n  }\n\n  /**\n   * The component element\n   * @hidden\n   */\n  @Element() el: HTMLAdsCtaButtonElement;\n\n  /**\n   * The unique identifier (optional)\n   */\n  @Prop({ attribute: 'id' }) identifier?: string;\n\n  /**\n   * The theme for this component instance (optional)\n   * Values: \"default\", \"dark\"\n   */\n  @Prop({ reflect: true }) theme?: Theme;\n\n  /**\n   * Specifies if the button should automatically get focus (optional)\n   * @default false\n   */\n  @Prop({ reflect: true, attribute: 'autofocus' }) autoFocus = false;\n\n  /**\n   * Determines whether CTA button is disabled or not (optional)\n   * @default false\n   */\n  @Prop({ reflect: true, attribute: 'disabled' }) disabled = false;\n\n  /**\n   * Text to display as the aria-label (optional)\n   */\n  @Prop({ reflect: true }) srLabel?: string;\n\n  /**\n   * Text to display on the CTA button (optional)\n   */\n  @Prop({ reflect: true }) text?: string;\n\n  /**\n   * Specifies the type of button (optional)\n   * @default \"button\"\n   */\n  @Prop({ reflect: true }) type: ButtonType = ButtonTypes.BUTTON;\n\n  /**\n   * The level of the button: primary | secondary | tertiary (optional)\n   * @default \"tertiary\"\n   */\n  @Prop({ reflect: true }) level: ButtonLevel = ButtonLevels.TERTIARY;\n\n  /**\n   * If true the button will render as circular (optional)\n   * @default false\n   */\n  @Prop({ reflect: true }) isCircular = false;\n\n  /**\n   * The size of the button (optional)\n   * @default \"default\"\n   */\n  @Prop({ reflect: true }) size: ButtonSize = ButtonSizes.DEFAULT;\n\n  /**\n   * Handle identifier property changes\n   * @param {string} newValue The new value for \"identifier\"\n   * @hidden\n   */\n  @Watch('identifier')\n  handleIdentifierChange(newValue: string): void {\n    this.el.setAttribute('id', newValue || generateId('ads-cta-button'));\n  }\n\n  /**\n   * @param {Event}   evt   The click event\n   * @hidden\n   */\n  @Listen('click', { capture: true })\n  handleClick(evt: Event): void {\n    if (this.disabled) {\n      evt.stopPropagation();\n    }\n  }\n\n  protected componentDidLoad(): void {\n    Pipeline.addComponent(this.el);\n  }\n\n  protected disconnectedCallback(): void {\n    Pipeline.removeComponent(this.el);\n  }\n\n  protected render(): VNode {\n    const buttonContent = this.text && !this.isCircular ? this.text : ((<slot />) as HTMLElement);\n\n    const attributes = {\n      autoFocus: this.autoFocus,\n      disabled: this.disabled,\n      type: this.type,\n      'aria-label': this.srLabel,\n    };\n\n    const buttonClasses: string[] = [];\n    buttonClasses.push(getClassFromLevel(this.level));\n    buttonClasses.push(getClassFromSize(this.size));\n    if (this.isCircular) {\n      buttonClasses.push('is-circular');\n    }\n\n    return (\n      <button class={buttonClasses.join(' ')} {...attributes}>\n        {buttonContent}\n      </button>\n    ) as VNode;\n  }\n}\n"],"mappings":"0JAAA,MAAMA,EAAkB,m+1B,MCsBXC,EAAY,MAMvBC,YAAAC,G,wEA0B6D,M,cAMF,M,qDAgBfC,EAAYC,O,WAMVC,EAAaC,S,gBAMrB,M,UAMMC,EAAYC,QAjEtDC,KAAKC,GAAGC,aAAa,KAAMF,KAAKG,YAAcC,EAAW,mBACzDJ,KAAKK,UAAY,gB,CAwEnBC,uBAAuBC,GACrBP,KAAKC,GAAGC,aAAa,KAAMK,GAAYH,EAAW,kB,CAQpDI,YAAYC,GACV,GAAIT,KAAKU,SAAU,CACjBD,EAAIE,iB,EAIEC,mBACRC,EAAsBb,KAAKC,G,CAGnBa,uBACRC,EAAyBf,KAAKC,G,CAGtBe,SACR,MAAMC,EAAgBjB,KAAKkB,OAASlB,KAAKmB,WAAanB,KAAKkB,KAASE,EAAA,aAEpE,MAAMC,EAAa,CACjBC,UAAWtB,KAAKsB,UAChBZ,SAAUV,KAAKU,SACfa,KAAMvB,KAAKuB,KACX,aAAcvB,KAAKwB,SAGrB,MAAMC,EAA0B,GAChCA,EAAcC,KAAKC,EAAkB3B,KAAK4B,QAC1CH,EAAcC,KAAKG,EAAiB7B,KAAK8B,OACzC,GAAI9B,KAAKmB,WAAY,CACnBM,EAAcC,KAAK,c,CAGrB,OACEN,EAAA,SAAAW,OAAAC,OAAA,CAAQC,MAAOR,EAAcS,KAAK,MAAUb,GACzCJ,E"}