{"version":3,"sources":["components/ads-loader/ads-loader.tsx","components/ads-loader/ads-loader.types.ts","components/ads-loader/ads-loader.scss?tag=ads-loader&encapsulation=shadow","components/core/global/pipeline.ts","components/core/utils/pipeline.ts","components/core/utils/components.ts"],"names":["AdsLoader","MEDIUM","get","this","el","setAttribute","identifier","component","registerComponent","newValue","Pipeline.addComponent","Pipeline.removeComponent","attributes","size","role","srLabel","class","label","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","SMALL","getClassFromLevel","level","PRIMARY","SECONDARY","TERTIARY","getMediaQueryBreakpointClassUp","bp","getMediaQueryBreakpointClassDown","showErrorMessage","message","ADS_CONSOLE_ERROR","warn"],"mappings":"6NAoBaA,G,OAAS,WAMpB,kC,yFA6BkD,IAAaC,O,aAMpB,IAAWC,IC7DxB,UD6D8C,WAlC1EC,KAAKC,GAAGC,aAAa,KAAMF,KAAKG,YAAc,YAAW,eACzDH,KAAKI,UAAY,aACjB,IAAWC,kBAAkBL,MATX,mEAiDGM,GACrBN,KAAKC,GAAGC,aAAa,KAAMI,GAAY,YAAW,iBAlDhC,yCAsDlBC,YAAsBP,KAAKC,MAtDT,6CA0DlBO,YAAyBR,KAAKC,MA1DZ,+BA8DlB,IAAMQ,EAAa,CACjB,YAAaT,KAAKU,KAClBC,KAAM,QACN,aAAcX,KAAKY,SAGrB,OACE,iCAAKC,MAAM,cAAiBJ,GAC1B,mBAAKI,MAAM,QACT,mBAAKA,MAAM,QACX,mBAAKA,MAAM,QACX,mBAAKA,MAAM,SAEX,YAAyBb,KAAKc,OAI5B,KAHF,mBAAKD,MAAM,OAAM,cAAa,QAC3Bb,KAAKc,UA7EI,yB,4BAAA,gC,kDAAA,M,QEpBD,4rD,+UCmCLC,EAAIX,GACjBY,OAAuB,gBAAoBC,SAASC,IAAId,EAAUe,GAAIf,EAAUgB,QAAQC,eAGnFL,OAAuB,gBAAoBM,OAAOC,WAAW,eA9B7C,SAACnB,GACvB,IACGY,OAAuB,YAAgBQ,WACtC,CACEC,KAAM,IAAWC,oBAEnB,CACEtB,UAAWA,EAAUgB,QAAQC,cAC7BM,YAAavB,EAAUe,GACvBS,YAAA,IACAC,QAAA,IACAC,KAAMd,OAAOe,SAASD,OAG1B,MAAOE,GAEPC,QAAQC,IAAI,sCAAuCF,IAenDG,CAAgB/B,G,ICjCPgC,EAAe,SAAChC,GAC3BiC,EAAajC,IAQFkC,EAAkB,SAAClC,I,SDkCTA,GACpBY,OAAuB,gBAAoBC,SAASsB,OAAOnC,EAAUe,IClCtEqB,CAAgBpC,ICPLqC,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,IAAYZ,OACf,MAAO,YACT,KAAK,IAAYmD,MACf,MAAO,WACT,QACE,MAAO,KASAC,EAAoB,SAACC,GAChC,OAAQA,GACN,KAAK,IAAaC,QAChB,MAAO,aACT,KAAK,IAAaC,UAChB,MAAO,eACT,KAAK,IAAaC,SAChB,MAAO,cACT,QACE,MAAO,KASAC,EAAiC,SAACC,GAAD,gBAA+BA,EAAGV,WAAlC,QAOjCW,EAAmC,SAACD,GAAD,gBAA+BA,EAAGV,WAAlC,UAQnCY,EAAmB,SAACC,EAAiBvD,GAChD,IACGY,OAAuB,YAAgBQ,WACtC,CACEC,KAAM,IAAWmC,mBAEnB,CACExD,UAAWA,EAAUgB,QAAQC,cAC7BM,YAAavB,EAAUe,GACvBwC,QAASA,EACT/B,YAAA,IACAC,QAAA,IACAC,KAAMd,OAAOe,SAASD,OAG1B,MAAOE,GAEPC,QAAQC,IAAI,8CAA+CF,GAG7DC,QAAQ4B,KAAR,uBAA6BF","file":"static/js/33.012dba7f.chunk.js","sourcesContent":["import { Component, Element, Prop, VNode, Watch, h } from '@stencil/core';\n\nimport * as Pipeline from '../core/utils/pipeline';\nimport { BaseComponent } from '../core/interfaces/BaseComponent';\nimport { Dictionary } from '../core/classes/Dictionary';\nimport { FEEDBACK_MESSAGE } from './ads-loader.types';\nimport { StandardSize, StandardSizeType, Theme } from '../core/types/globalTypes';\nimport { generateId } from '../core/utils/components';\nimport { isNullOrUndefinedOrEmpty } from 'utils/collection';\n\n/**\n * Loaders are animated images that notify to users that loading is underway when applications are retrieving data or performing slow computations. Although it may not be obvious what is occurring on the back end, we can communicate clearly to reassure the user that progress is happening.\n * @tag `<ads-loader>`\n * @example <ads-loader></ads-loader>\n */\n@Component({\n  tag: 'ads-loader',\n  styleUrl: 'ads-loader.scss',\n  shadow: true,\n})\nexport class AdsLoader implements BaseComponent {\n  /**\n   * @hidden\n   */\n  public component: string;\n\n  constructor() {\n    this.el.setAttribute('id', this.identifier || generateId('ads-loader'));\n    this.component = 'ads-loader';\n    Dictionary.registerComponent(this);\n  }\n\n  @Element() private el: HTMLAdsLoaderElement;\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   * The feedback message (optional)\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * Sets the size of the loader.\n   * The size can be \"xs\", \"sm\", \"md\", \"lg\", or \"xl\". (optional)\n   * @default \"md\"\n   */\n  @Prop({ reflect: true }) size: StandardSizeType = StandardSize.MEDIUM;\n\n  /**\n   * Text to display as the aria-label on the loader\n   * @default \"loading\"\n   */\n  @Prop({ reflect: true }) srLabel: string = Dictionary.get(FEEDBACK_MESSAGE, 'LOADING');\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-loader'));\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      'data-size': this.size,\n      role: 'alert',\n      'aria-label': this.srLabel,\n    };\n\n    return (\n      <div class=\"ads-loader\" {...attributes}>\n        <div class=\"dots\">\n          <div class=\"dot\" />\n          <div class=\"dot\" />\n          <div class=\"dot\" />\n        </div>\n        {!isNullOrUndefinedOrEmpty(this.label) ? (\n          <div class=\"text\" aria-hidden=\"true\">\n            {this.label}\n          </div>\n        ) : null}\n      </div>\n    ) as VNode;\n  }\n}\n","export const FEEDBACK_MESSAGE = 'loading';\n","@use 'sass:math';\n\n@import 'core';\n\n@import './ads-loader.animations.scss';\n\n/**\n * @prop --ads-loader-color: Default text color\n */\n\n// Animation\n$ads-bounce-duration: 1.6s;\n$ads-bounce-range: 0.32s;\n\n// Size\n$ads-loader-dot-size-xs: 6px;\n$ads-loader-dot-size-sm: 8px;\n$ads-loader-dot-size-md: 10px;\n$ads-loader-dot-size-lg: 12px;\n$ads-loader-dot-size-xl: 14px;\n\n$ads-loader-text-size-xs: 8px;\n$ads-loader-text-size-sm: 10px;\n$ads-loader-text-size-md: 12px;\n$ads-loader-text-size-lg: 14px;\n$ads-loader-text-size-xl: 16px;\n\n/**\n * Mixin for size change\n * It would have been simpler to use custom variables but IE 11 does not support it.\n */\n@mixin apply-size($dot-size, $font-size) {\n  & .dots .dot {\n    height: $dot-size;\n    width: $dot-size;\n  }\n\n  & .text {\n    font-size: $font-size;\n  }\n}\n\n:host {\n  display: inline-block;\n}\n\n:host([theme='default']) {\n  @include ads-vars-component-loader-default;\n}\n\n:host([theme='dark']) {\n  @include ads-vars-component-loader-dark;\n}\n\n.ads-loader {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  & .dots {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n\n    & .dot {\n      animation: ads-bounce $ads-bounce-duration ease-in-out 0s infinite both;\n      background-color: var(--ads-loader-color, $ads-loader-color);\n      border: none;\n      border-radius: 100%;\n      display: block;\n      height: $ads-loader-dot-size-md;\n      margin: 0 2px;\n      width: $ads-loader-dot-size-md;\n\n      &:nth-child(1) {\n        animation-delay: -$ads-bounce-range;\n      }\n\n      &:nth-child(3) {\n        animation-delay: math.div($ads-bounce-range, 2);\n      }\n    }\n  }\n\n  & .text {\n    @include ads-paragraph;\n    color: var(--ads-loader-color, $ads-loader-color);\n    font-size: $ads-loader-text-size-md;\n    font-family: var(--ads-font-family);\n    margin-top: 2px;\n  }\n\n  /**\n   * Sizes\n   */\n  &[data-size='xs'] {\n    @include apply-size($ads-loader-dot-size-xs, $ads-loader-text-size-xs);\n  }\n\n  &[data-size='sm'] {\n    @include apply-size($ads-loader-dot-size-sm, $ads-loader-text-size-sm);\n  }\n\n  &[data-size='md'] {\n    @include apply-size($ads-loader-dot-size-md, $ads-loader-text-size-md);\n  }\n\n  &[data-size='lg'] {\n    @include apply-size($ads-loader-dot-size-lg, $ads-loader-text-size-lg);\n  }\n\n  &[data-size='xl'] {\n    @include apply-size($ads-loader-dot-size-xl, $ads-loader-text-size-xl);\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":""}