{"version":3,"sources":["components/ads-placeholder/ads-placeholder.tsx","components/ads-placeholder/ads-placeholder.scss?tag=ads-placeholder&encapsulation=shadow","components/core/global/pipeline.ts","components/core/utils/pipeline.ts","components/core/utils/components.ts"],"names":["AdsPlaceholder","floorOnDecimalPoint","value","decimalPoint","modifier","Math","pow","floor","getRandomFloatInRange","min","max","random","undefined","this","component","el","setAttribute","identifier","newValue","randomWidthValue","Pipeline.addComponent","Pipeline.removeComponent","style","width","randomWidth","height","isLine","getComputedStyle","lineHeight","pulseClasses","push","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","toString","substr","getClassFromSize","size","MEDIUM","SMALL","getClassFromLevel","level","PRIMARY","SECONDARY","TERTIARY","getMediaQueryBreakpointClassUp","bp","getMediaQueryBreakpointClassDown","showErrorMessage","message","ADS_CONSOLE_ERROR","warn"],"mappings":"iNAWaA,G,OAAc,WAMzB,kC,oBAyCQ,KAAAC,oBAAsB,SAACC,GAA+B,IAAhBC,EAAgB,uDAAD,EACrDC,EAAWC,KAAKC,IAAI,GAAIH,GAC9B,OAAOE,KAAKE,MAAML,EAAQE,GAAYA,GAGhC,KAAAI,sBAAwB,SAACC,EAAaC,GAC5C,OAAOL,KAAKM,UAAYD,EAAMD,GAAOA,G,oEA7BEG,E,kBAMD,E,aAKL,EA5BjCC,KAAKC,UAAY,kBACjBD,KAAKE,GAAGC,aAAa,KAAMH,KAAKI,YAAc,YAAW,oBARlC,mEA2CFC,GACrBL,KAAKE,GAAGC,aAAa,KAAME,GAAY,YAAW,sBA5C3B,0CAyDvBL,KAAKM,iBAAmBN,KAAKL,sBAAsB,EAAG,MAzD/B,yCA6DvBY,YAAsBP,KAAKE,MA7DJ,6CAiEvBM,YAAyBR,KAAKE,MAjEP,+BAqEvB,IAAMO,EAAQ,CACZC,MAAOV,KAAKW,YAAL,UAAsB,GAAKX,KAAKZ,oBAAoBY,KAAKM,iBAAkB,GAA3E,KAAmF,KAC1FM,OAAQZ,KAAKa,OAASC,iBAAiBd,KAAKE,IAAIa,WAAa,MAGzDC,EAAe,CAAC,qBAKtB,OAJIhB,KAAKa,QACPG,EAAaC,KAAK,oBAIlB,mBAAKC,MAAM,4CAA4CT,MAAOA,GAC5D,mBAAKS,MAAOF,EAAaG,KAAK,UAjFX,yB,4BAAA,gC,kDAAA,M,QCXD,06B,+UCmCVC,EAAInB,GACjBoB,OAAuB,gBAAoBC,SAASC,IAAItB,EAAUuB,GAAIvB,EAAUwB,QAAQC,eAGnFL,OAAuB,gBAAoBM,OAAOC,WAAW,eA9B7C,SAAC3B,GACvB,IACGoB,OAAuB,YAAgBQ,WACtC,CACEC,KAAM,IAAWC,oBAEnB,CACE9B,UAAWA,EAAUwB,QAAQC,cAC7BM,YAAa/B,EAAUuB,GACvBS,YAAA,IACAC,QAAA,IACAC,KAAMd,OAAOe,SAASD,OAG1B,MAAOE,GAEPC,QAAQC,IAAI,sCAAuCF,IAenDG,CAAgBvC,G,ICjCPwC,EAAe,SAACxC,GAC3ByC,EAAazC,IAQF0C,EAAkB,SAAC1C,I,SDkCTA,GACpBoB,OAAuB,gBAAoBC,SAASsB,OAAO3C,EAAUuB,IClCtEqB,CAAgB5C,ICPL6C,EAAa,WAAkB,IAAjBC,EAAiB,uDAAL,MACrC,gBAAUA,EAAV,YAAuBC,MAOZA,EAAuB,WAClC,OAAOxD,KAAKM,SAASmD,SAAS,IAAIC,OAAO,EAAG,KAQjCC,EAAmB,SAACC,GAC/B,OAAQA,GACN,KAAK,IAAYC,OACf,MAAO,YACT,KAAK,IAAYC,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,EAAGZ,WAAlC,QAOjCa,EAAmC,SAACD,GAAD,gBAA+BA,EAAGZ,WAAlC,UAQnCc,EAAmB,SAACC,EAAiB/D,GAChD,IACGoB,OAAuB,YAAgBQ,WACtC,CACEC,KAAM,IAAWmC,mBAEnB,CACEhE,UAAWA,EAAUwB,QAAQC,cAC7BM,YAAa/B,EAAUuB,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/34.492a981f.chunk.js","sourcesContent":["import * as Pipeline from '../core/utils/pipeline';\nimport { BaseComponent } from '../core/interfaces/BaseComponent';\nimport { Component, Element, Prop, State, VNode, Watch, h } from '@stencil/core';\nimport { Theme } from '../core/types/globalTypes';\nimport { generateId } from '../core/utils/components';\n\n@Component({\n  tag: 'ads-placeholder',\n  styleUrl: 'ads-placeholder.scss',\n  shadow: true,\n})\nexport class AdsPlaceholder implements BaseComponent {\n  /**\n   * The component element\n   */\n  public component: string;\n\n  constructor() {\n    this.component = 'ads-placeholder';\n    this.el.setAttribute('id', this.identifier || generateId('ads-placeholder'));\n  }\n\n  @Element() el: HTMLAdsPlaceholderElement;\n\n  @State() randomWidthValue: number;\n\n  /**\n   * The unique identifier (optional)\n   */\n  @Prop({ attribute: 'id' }) identifier?: string;\n\n  /**\n   * The theme for this component instance\n   * Values: \"default\", \"dark\"\n   */\n  @Prop({ reflect: true }) theme?: Theme = undefined;\n\n  /**\n   * When true, the component will have random width.\n   * Useful for emulating loading lines\n   */\n  @Prop({ reflect: true }) randomWidth? = false;\n\n  /**\n   * When true, the component will take the line-height and will represent a loading line\n   */\n  @Prop({ reflect: true }) isLine? = false;\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-placeholder'));\n  }\n\n  private floorOnDecimalPoint = (value: number, decimalPoint = 1) => {\n    const modifier = Math.pow(10, decimalPoint);\n    return Math.floor(value * modifier) / modifier;\n  };\n\n  private getRandomFloatInRange = (min: number, max: number) => {\n    return Math.random() * (max - min) + min;\n  };\n\n  protected componentWillLoad(): void {\n    this.randomWidthValue = this.getRandomFloatInRange(1, 50);\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 style = {\n      width: this.randomWidth ? `${50 + this.floorOnDecimalPoint(this.randomWidthValue, 0)}%` : null,\n      height: this.isLine ? getComputedStyle(this.el).lineHeight : null,\n    };\n\n    const pulseClasses = ['placeholder-pulse'];\n    if (this.isLine) {\n      pulseClasses.push('placeholder-line');\n    }\n\n    return (\n      <div class=\"c-placeholder u-flex u-align-items-center\" style={style}>\n        <div class={pulseClasses.join(' ')}></div>\n      </div>\n    ) as VNode;\n  }\n}\n","@import 'core';\n\n$animation-duration: 2s;\n\n:host {\n  height: inherit;\n  width: inherit;\n}\n\n:host([theme='default']) {\n  @include ads-vars-component-placeholder-default;\n}\n\n:host([theme='dark']) {\n  @include ads-vars-component-placeholder-dark;\n}\n\n@include ads-placeholder;\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":""}