{"version":3,"names":["adsButtonCss","AdsButtonStyle0","AdsButton","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","attributes","autoFocus","tabIndex","type","srLabel","buttonClasses","push","getClassFromLevel","level","getClassFromSize","size","isCircular","h","Object","assign","key","text","class","join","isNullOrUndefinedOrEmpty"],"sources":["src/components/ads-button/ads-button.scss?tag=ads-button&encapsulation=shadow","src/components/ads-button/ads-button.tsx"],"sourcesContent":["@import 'core';\n\n/**\n * @prop --ads-button-background-color-primary: Primary background color\n * @prop --ads-button-background-color-primary-focus: Primary focused background color\n * @prop --ads-button-background-color-primary-hover: Primary hovered background color\n * @prop --ads-button-background-color-primary-disabled: Primary disabled background color\n *\n * @prop --ads-button-background-color-secondary: Secondary background color\n * @prop --ads-button-background-color-secondary-focus: Secondary focused background color\n * @prop --ads-button-background-color-secondary-hover: Secondary hovered background color\n * @prop --ads-button-background-color-secondary-disabled: Secondary disabled background color\n\n * @prop --ads-button-background-color-tertiary: Tertiary background color\n * @prop --ads-button-background-color-tertiary-focus: Tertiary focused background color\n * @prop --ads-button-background-color-tertiary-hover: Tertiary hovered background color\n * @prop --ads-button-background-color-tertiary-disabled: Tertiary disabled background color\n *\n * @prop --ads-button-border-color-primary: Primary border color\n * @prop --ads-button-border-color-primary-disabled: Primary disabled border color\n * @prop --ads-button-border-color-primary-focus: Primary focused border color\n * @prop --ads-button-border-color-primary-hover: Primary hovered border color\n *\n * @prop --ads-button-border-color-secondary: Secondary border color\n * @prop --ads-button-border-color-secondary-disabled: Secondary disabled border color\n * @prop --ads-button-border-color-secondary-focus: Secondary focused border color\n * @prop --ads-button-border-color-secondary-hover: Secondary hovered border color\n *\n * @prop --ads-button-border-color-tertiary: Tertiary border color\n * @prop --ads-button-border-color-tertiary-disabled: Tertiary disabled border color\n * @prop --ads-button-border-color-tertiary-focus: Tertiary focused border color\n * @prop --ads-button-border-color-tertiary-hover: Tertiary hovered border color\n *\n * @prop --ads-button-color-primary: Primary text color\n * @prop --ads-button-color-primary-disabled: Primary disabled text color\n * @prop --ads-button-color-primary-focus: Primary focused text color\n * @prop --ads-button-color-primary-hover: Primary hovered text color\n *\n * @prop --ads-button-color-secondary: Secondary text color\n * @prop --ads-button-color-secondary-disabled: Secondary disabled text color\n * @prop --ads-button-color-secondary-focus: Secondary focused text color\n * @prop --ads-button-color-secondary-hover: Secondary hovered text color\n *\n * @prop --ads-button-color-tertiary: Secondary text color\n * @prop --ads-button-color-tertiary-disabled: Secondary disabled text color\n * @prop --ads-button-color-tertiary-focus: Secondary focused text color\n * @prop --ads-button-color-tertiary-hover: Secondary hovered text color\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-button-default;\n}\n\n:host([theme='dark']) {\n  @include ads-vars-component-button-dark;\n}\n\nbutton {\n  display: inherit !important;\n  @include ads-button;\n  @include ads-button-tertiary;\n  font-family: var(--ads-font-family);\n  width: inherit;\n}\n\nbutton.is-primary {\n  @include ads-button-primary;\n}\n\nbutton.is-secondary {\n  @include ads-button-secondary;\n}\n\nbutton.is-tertiary {\n  @include ads-button-tertiary;\n}\n\nbutton.is-medium {\n  @include ads-button-medium;\n}\n\nbutton.is-small {\n  @include ads-button-small;\n}\n\nbutton.is-circular {\n  @include ads-button-circular;\n\n  &.is-medium {\n    @include ads-button-circular-medium;\n  }\n\n  &.is-small {\n    @include ads-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';\nimport { isNullOrUndefinedOrEmpty } from 'utils/collection';\n\n/**\n * Buttons communicate what action will occur when the user selects it. Buttons can consist of text, an icon, 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 anchors. There are 3 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-button>`\n * @slot - Content rendered as rich text inside the component\n * @example\n * <ads-button level=\"primary\" text=\"Hello world\"></ads-button>\n * <ads-button level=\"secondary\" text=\"Hello world\"></ads-button>\n * <ads-button level=\"tertiary\" text=\"Hello world\"></ads-button>\n */\n@Component({\n  tag: 'ads-button',\n  styleUrl: 'ads-button.scss',\n  shadow: true,\n})\nexport class AdsButton implements BaseComponent {\n  /**\n   * @hidden\n   */\n  public component: string;\n\n  constructor() {\n    this.el.setAttribute('id', this.identifier || generateId('ads-button'));\n    this.component = 'ads-button';\n  }\n\n  @Element() private el: HTMLAdsButtonElement;\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 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 on the button (optional)\n   */\n  @Prop({ reflect: true }) srLabel?: string;\n\n  /**\n   * Specifies the text content of the 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-button'));\n  }\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 attributes = {\n      autoFocus: this.autoFocus,\n      disabled: this.disabled,\n      tabIndex: this.disabled ? -1 : null,\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 data-track=\"true\" data-track-value={this.text} class={buttonClasses.join(' ')} {...attributes}>\n        {!isNullOrUndefinedOrEmpty(this.text) ? this.text : <slot />}\n      </button>\n    ) as VNode;\n  }\n}\n"],"mappings":"8LAAA,MAAMA,EAAe,ir0BACrB,MAAAC,EAAeD,E,MCqBFE,EAAS,MAMpB,WAAAC,CAAAC,G,wEAsB6D,M,cAMF,M,qDAgBfC,EAAYC,O,WAMVC,EAAaC,S,gBAMrB,M,UAMMC,EAAYC,QA7DtDC,KAAKC,GAAGC,aAAa,KAAMF,KAAKG,YAAcC,EAAW,eACzDJ,KAAKK,UAAY,Y,CAoEnB,sBAAAC,CAAuBC,GACrBP,KAAKC,GAAGC,aAAa,KAAMK,GAAYH,EAAW,c,CAIpD,WAAAI,CAAYC,GACV,GAAIT,KAAKU,SAAU,CACjBD,EAAIE,iB,EAIE,gBAAAC,GACRC,EAAsBb,KAAKC,G,CAGnB,oBAAAa,GACRC,EAAyBf,KAAKC,G,CAGtB,MAAAe,GACR,MAAMC,EAAa,CACjBC,UAAWlB,KAAKkB,UAChBR,SAAUV,KAAKU,SACfS,SAAUnB,KAAKU,UAAY,EAAI,KAC/BU,KAAMpB,KAAKoB,KACX,aAAcpB,KAAKqB,SAGrB,MAAMC,EAA0B,GAChCA,EAAcC,KAAKC,EAAkBxB,KAAKyB,QAC1CH,EAAcC,KAAKG,EAAiB1B,KAAK2B,OACzC,GAAI3B,KAAK4B,WAAY,CACnBN,EAAcC,KAAK,c,CAGrB,OACEM,EAAA,SAAAC,OAAAC,OAAA,CAAAC,IAAA,wDAAmB,OAAM,mBAAmBhC,KAAKiC,KAAMC,MAAOZ,EAAca,KAAK,MAAUlB,IACvFmB,EAAyBpC,KAAKiC,MAAQjC,KAAKiC,KAAOJ,EAAA,a","ignoreList":[]}