{"version":3,"sources":["components/ads-button/ads-button.tsx","components/ads-button/ads-button.scss?tag=ads-button&encapsulation=shadow","components/core/global/pipeline.ts","components/core/utils/pipeline.ts","components/core/utils/components.ts"],"names":["AdsButton","BUTTON","TERTIARY","DEFAULT","this","el","setAttribute","identifier","component","newValue","evt","disabled","stopPropagation","Pipeline.addComponent","Pipeline.removeComponent","attributes","autoFocus","tabIndex","type","srLabel","buttonClasses","push","level","size","isCircular","text","class","join","add","window","pipeline","set","id","tagName","toLowerCase","config","getBoolean","trackEvent","name","COMPONENT_REGISTER","componentId","environment","version","host","location","err","console","log","sendCustomEvent","addComponent","Pipeline.add","removeComponent","delete","Pipeline.remove","generateId","namespace","generateRandomString","Math","random","toString","substr","getClassFromSize","MEDIUM","SMALL","getClassFromLevel","PRIMARY","SECONDARY","getMediaQueryBreakpointClassUp","bp","getMediaQueryBreakpointClassDown","showErrorMessage","message","ADS_CONSOLE_ERROR","warn"],"mappings":"oNAsBaA,G,OAAS,WAMpB,kC,6EAsB6D,E,eAMF,E,+CAgBf,IAAYC,O,WAMV,IAAaC,S,iBAMrB,E,UAMM,IAAYC,QA7DtDC,KAAKC,GAAGC,aAAa,KAAMF,KAAKG,YAAc,YAAW,eACzDH,KAAKI,UAAY,aARC,mEA4EGC,GACrBL,KAAKC,GAAGC,aAAa,KAAMG,GAAY,YAAW,iBA7EhC,kCAiFRC,GACNN,KAAKO,UACPD,EAAIE,oBAnFY,yCAwFlBC,YAAsBT,KAAKC,MAxFT,6CA4FlBS,YAAyBV,KAAKC,MA5FZ,+BAgGlB,IAAMU,EAAa,CACjBC,UAAWZ,KAAKY,UAChBL,SAAUP,KAAKO,SACfM,SAAUb,KAAKO,UAAY,EAAI,KAC/BO,KAAMd,KAAKc,KACX,aAAcd,KAAKe,SAGfC,EAA0B,GAOhC,OANAA,EAAcC,KAAK,YAAkBjB,KAAKkB,QAC1CF,EAAcC,KAAK,YAAiBjB,KAAKmB,OACrCnB,KAAKoB,YACPJ,EAAcC,KAAK,eAInB,iDAAmB,OAAM,mBAAmBjB,KAAKqB,KAAMC,MAAON,EAAcO,KAAK,MAAUZ,GACvF,YAAyBX,KAAKqB,MAAoB,yBAAZrB,KAAKqB,QAjH/B,yB,4BAAA,gC,kDAAA,M,QCtBD,oq0B,+UCmCLG,EAAIpB,GACjBqB,OAAuB,gBAAoBC,SAASC,IAAIvB,EAAUwB,GAAIxB,EAAUyB,QAAQC,eAGnFL,OAAuB,gBAAoBM,OAAOC,WAAW,eA9B7C,SAAC5B,GACvB,IACGqB,OAAuB,YAAgBQ,WACtC,CACEC,KAAM,IAAWC,oBAEnB,CACE/B,UAAWA,EAAUyB,QAAQC,cAC7BM,YAAahC,EAAUwB,GACvBS,YAAA,IACAC,QAAA,IACAC,KAAMd,OAAOe,SAASD,OAG1B,MAAOE,GAEPC,QAAQC,IAAI,sCAAuCF,IAenDG,CAAgBxC,G,ICjCPyC,EAAe,SAACzC,GAC3B0C,EAAa1C,IAQF2C,EAAkB,SAAC3C,I,SDkCTA,GACpBqB,OAAuB,gBAAoBC,SAASsB,OAAO5C,EAAUwB,IClCtEqB,CAAgB7C,ICPL8C,EAAa,WAAkB,IAAjBC,EAAiB,uDAAL,MACrC,gBAAUA,EAAV,YAAuBC,MAOZA,EAAuB,WAClC,OAAOC,KAAKC,SAASC,SAAS,IAAIC,OAAO,EAAG,KAQjCC,EAAmB,SAACtC,GAC/B,OAAQA,GACN,KAAK,IAAYuC,OACf,MAAO,YACT,KAAK,IAAYC,MACf,MAAO,WACT,QACE,MAAO,KASAC,EAAoB,SAAC1C,GAChC,OAAQA,GACN,KAAK,IAAa2C,QAChB,MAAO,aACT,KAAK,IAAaC,UAChB,MAAO,eACT,KAAK,IAAahE,SAChB,MAAO,cACT,QACE,MAAO,KASAiE,EAAiC,SAACC,GAAD,gBAA+BA,EAAGT,WAAlC,QAOjCU,EAAmC,SAACD,GAAD,gBAA+BA,EAAGT,WAAlC,UAQnCW,EAAmB,SAACC,EAAiB/D,GAChD,IACGqB,OAAuB,YAAgBQ,WACtC,CACEC,KAAM,IAAWkC,mBAEnB,CACEhE,UAAWA,EAAUyB,QAAQC,cAC7BM,YAAahC,EAAUwB,GACvBuC,QAASA,EACT9B,YAAA,IACAC,QAAA,IACAC,KAAMd,OAAOe,SAASD,OAG1B,MAAOE,GAEPC,QAAQC,IAAI,8CAA+CF,GAG7DC,QAAQ2B,KAAR,uBAA6BF","file":"static/js/30.4c7ecc35.chunk.js","sourcesContent":["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","@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 { EventTypes, environment, version } from './AppInsights/constants';\nimport { WindowGlobal } from '../types/globalTypes';\n\n/**\n * Send custom event to AppInsights\n * @param  {string} component   The reference to the component\n * @returns {void}\n * @hidden\n */\nconst sendCustomEvent = (component: HTMLElement): void => {\n  try {\n    (window as WindowGlobal)['AppInsights'].trackEvent(\n      {\n        name: EventTypes.COMPONENT_REGISTER,\n      },\n      {\n        component: component.tagName.toLowerCase(),\n        componentId: component.id,\n        environment,\n        version,\n        host: window.location.host,\n      }\n    );\n  } catch (err) {\n    // eslint-disable-next-line no-console\n    console.log('[APP INSIGHTS] Could not send event', err);\n  }\n};\n\n/**\n * Add the component to the pipeline and send component events to AppInsights\n * @param   {HTMLElement} component  The component element\n * @returns {void}\n * @hidden\n */\nexport function add(component: HTMLElement): void {\n  (window as WindowGlobal)['ArmDesignSystem'].pipeline.set(component.id, component.tagName.toLowerCase());\n\n  // Disable sending events to AppInsights during unit tests\n  if (!(window as WindowGlobal)['ArmDesignSystem'].config.getBoolean('_isTesting')) {\n    sendCustomEvent(component);\n  }\n}\n\n/**\n * Remove the component from the pipeline\n * @param   {HTMLElement} component  The component element\n * @returns {void}\n * @hidden\n */\nexport function remove(component: HTMLElement): void {\n  (window as WindowGlobal)['ArmDesignSystem'].pipeline.delete(component.id);\n}\n","import * as Pipeline from '../global/pipeline';\n\n/**\n * Add a component to the ADS pipeline\n * @param  {HTMLElement} component   The component element\n * @return {void}\n */\nexport const addComponent = (component: HTMLElement): void => {\n  Pipeline.add(component);\n};\n\n/**\n * Remove a component from the ADS pipeline\n * @param  {HTMLElement} component   The component element\n * @return {void}\n */\nexport const removeComponent = (component: HTMLElement): void => {\n  Pipeline.remove(component);\n};\n","import { Breakpoint, ButtonLevel, ButtonLevels, ButtonSize, ButtonSizes, WindowGlobal } from '../types/globalTypes';\nimport { EventTypes, environment, version } from '../global/AppInsights/constants';\n\nexport type ShadowRootLegacy = ShadowRoot & { tagName: string };\n\n/**\n * Generates a unique component ID\n * @param   {string}  namespace   The unique id's namespace (e.g. ads)\n * @returns {string}              A generated random id (e.g. ads-1234)\n */\nexport const generateId = (namespace = 'ads'): string => {\n  return `${namespace}-${generateRandomString()}`;\n};\n\n/**\n * Generates a randon string\n * @returns {string}              A generated random string\n */\nexport const generateRandomString = (): string => {\n  return Math.random().toString(36).substr(2, 16);\n};\n\n/**\n * Generates a size class based on a button size\n * @param {ButtonSize}  size    The size of the button (e.g. ButtonSizes.SMALL)\n * @returns {string}            The button size class (e.g. 'is-small')\n */\nexport const getClassFromSize = (size: ButtonSize): string => {\n  switch (size) {\n    case ButtonSizes.MEDIUM:\n      return 'is-medium';\n    case ButtonSizes.SMALL:\n      return 'is-small';\n    default:\n      return '';\n  }\n};\n\n/**\n * Generates a level class based on button a level\n * @param {ButtonLevel} level   The level of the button (e.g. ButtonLevels.PRIMARY)\n * @returns {string}            The button level class (e.g. 'is-primary')\n */\nexport const getClassFromLevel = (level: ButtonLevel): string => {\n  switch (level) {\n    case ButtonLevels.PRIMARY:\n      return 'is-primary';\n    case ButtonLevels.SECONDARY:\n      return 'is-secondary';\n    case ButtonLevels.TERTIARY:\n      return 'is-tertiary';\n    default:\n      return '';\n  }\n};\n\n/**\n * Given a breakpoint it will return the appropriate class for the media-queries (breakpoints-up).\n * @param {Breakpoint} bp The breakpoint.\n * @returns {string} The class.\n */\nexport const getMediaQueryBreakpointClassUp = (bp: Breakpoint): string => `${bp.toString()}-up`;\n\n/**\n * Given a breakpoint it will return the appropriate class for the media-queries (breakpoints-down).\n * @param {Breakpoint} bp The breakpoint.\n * @returns {string} The class.\n */\nexport const getMediaQueryBreakpointClassDown = (bp: Breakpoint): string => `${bp.toString()}-down`;\n\n/**\n * Display an ADS warning with the given message\n * @param {string}  message       The error message to show\n * @param {string}  component     The reference to the component\n * @returns {void}\n */\nexport const showErrorMessage = (message: string, component: HTMLElement): void => {\n  try {\n    (window as WindowGlobal)['AppInsights'].trackEvent(\n      {\n        name: EventTypes.ADS_CONSOLE_ERROR as string,\n      },\n      {\n        component: component.tagName.toLowerCase(),\n        componentId: component.id,\n        message: message,\n        environment,\n        version,\n        host: window.location.host,\n      }\n    );\n  } catch (err) {\n    // eslint-disable-next-line no-console\n    console.log('[APP INSIGHTS] Could not send console error', err);\n  }\n  // eslint-disable-next-line no-console\n  console.warn(`ADS-Warning: ${message}`);\n};\n"],"sourceRoot":""}