{"version":3,"sources":["components/ads-tag/ads-tag.tsx","components/ads-tag/ads-tag.scss?tag=ads-tag&encapsulation=shadow","components/core/global/pipeline.ts","components/core/utils/pipeline.ts","components/core/utils/components.ts"],"names":["AdsTag","this","el","setAttribute","identifier","component","newValue","Pipeline.addComponent","Pipeline.removeComponent","TagType","href","attributes","tabindex","srLabel","class","isClickable","text","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","size","MEDIUM","SMALL","getClassFromLevel","level","PRIMARY","SECONDARY","TERTIARY","getMediaQueryBreakpointClassUp","bp","getMediaQueryBreakpointClassDown","showErrorMessage","message","ADS_CONSOLE_ERROR","warn"],"mappings":"iNAmBaA,G,OAAM,WAMjB,kC,oHAiCuC,E,iBAhCrCC,KAAKC,GAAGC,aAAa,KAAMF,KAAKG,YAAc,YAAW,YACzDH,KAAKI,UAAY,UARF,mEAoDMC,GACrBL,KAAKC,GAAGC,aAAa,KAAMG,GAAY,YAAW,cArDnC,yCAyDfC,YAAsBN,KAAKC,MAzDZ,6CA6DfM,YAAyBP,KAAKC,MA7Df,+BAiEf,IAAMO,EAAW,YAAyBR,KAAKS,MAAc,SAAN,IACnDC,EAAyB,MAAZF,EAAkB,CAAEC,KAAMT,KAAKS,KAAME,SAAU,EAAG,aAAc,OAAQ,mBAAoBX,KAAKY,SAAY,GAG9H,OAFAF,EAAc,YAAyBV,KAAKY,SAAkEF,EAA1D,+BAAQA,GAAe,CAAE,aAAcV,KAAKY,UAG9F,YAACJ,EAAO,iBAAKE,EAAU,CAAEG,MAAK,iBAAY,YAAyBb,KAAKS,OAAST,KAAKc,YAAc,eAAiB,MACjH,YAAyBd,KAAKe,MAAoB,yBAAZf,KAAKe,QAvElC,yB,4BAAA,gC,kDAAA,M,QCnBD,ohH,+UCmCFC,EAAIZ,GACjBa,OAAuB,gBAAoBC,SAASC,IAAIf,EAAUgB,GAAIhB,EAAUiB,QAAQC,eAGnFL,OAAuB,gBAAoBM,OAAOC,WAAW,eA9B7C,SAACpB,GACvB,IACGa,OAAuB,YAAgBQ,WACtC,CACEC,KAAM,IAAWC,oBAEnB,CACEvB,UAAWA,EAAUiB,QAAQC,cAC7BM,YAAaxB,EAAUgB,GACvBS,YAAA,IACAC,QAAA,IACAC,KAAMd,OAAOe,SAASD,OAG1B,MAAOE,GAEPC,QAAQC,IAAI,sCAAuCF,IAenDG,CAAgBhC,G,ICjCPiC,EAAe,SAACjC,GAC3BkC,EAAalC,IAQFmC,EAAkB,SAACnC,I,SDkCTA,GACpBa,OAAuB,gBAAoBC,SAASsB,OAAOpC,EAAUgB,IClCtEqB,CAAgBrC,ICPLsC,EAAa,WAAkB,IAAjBC,EAAiB,uDAAL,MACrC,gBAAUA,EAAV,YAAuBC,MAOZA,EAAuB,WAClC,OAAOC,KAAKC,SAASC,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,EAAiB1D,GAChD,IACGa,OAAuB,YAAgBQ,WACtC,CACEC,KAAM,IAAWqC,mBAEnB,CACE3D,UAAWA,EAAUiB,QAAQC,cAC7BM,YAAaxB,EAAUgB,GACvB0C,QAASA,EACTjC,YAAA,IACAC,QAAA,IACAC,KAAMd,OAAOe,SAASD,OAG1B,MAAOE,GAEPC,QAAQC,IAAI,8CAA+CF,GAG7DC,QAAQ8B,KAAR,uBAA6BF","file":"static/js/36.0ee776a7.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 { Theme } from '../core/types/globalTypes';\nimport { generateId } from '../core/utils/components';\nimport { isNullOrUndefinedOrEmpty } from 'utils/collection';\n\n/**\n * Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them. Multiple or single tags can be used to categorize items.\n * @tag `<ads-tag>`\n * @slot - Content rendered as rich text inside the component\n * @example <ads-tag text=\"Hello world\"></ads-tag>\n */\n@Component({\n  tag: 'ads-tag',\n  styleUrl: 'ads-tag.scss',\n  shadow: true,\n})\nexport class AdsTag implements BaseComponent {\n  /**\n   * @hidden\n   */\n  public component: string;\n\n  constructor() {\n    this.el.setAttribute('id', this.identifier || generateId('ads-tag'));\n    this.component = 'ads-tag';\n  }\n\n  @Element() private el: HTMLAdsTagElement;\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   * Contains a URL (fragment).\n   * If this property is set, an anchor tag will be rendered. (optional)\n   */\n  @Prop({ reflect: true }) href?: string;\n\n  /**\n   * Text to display as the aria-label (optional)\n   */\n  @Prop({ reflect: true }) srLabel?: string;\n\n  /**\n   * Specifies whether the tag is clickable or not (optional)\n   * @default false\n   */\n  @Prop({ reflect: true }) isClickable = false;\n\n  /**\n   * Specifies an initial value for the tag (optional)\n   */\n  @Prop({ reflect: true }) text?: string;\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-tag'));\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 TagType = !isNullOrUndefinedOrEmpty(this.href) ? 'a' : 'button';\n    let attributes = TagType === 'a' ? { href: this.href, tabindex: 0, 'data-track': 'true', 'data-track-value': this.srLabel } : {};\n    attributes = !isNullOrUndefinedOrEmpty(this.srLabel) ? { ...attributes, ...{ 'aria-label': this.srLabel } } : attributes;\n\n    return (\n      <TagType {...attributes} class={`c-tag ${!isNullOrUndefinedOrEmpty(this.href) || this.isClickable ? 'is-clickable' : ''}`}>\n        {!isNullOrUndefinedOrEmpty(this.text) ? this.text : <slot />}\n      </TagType>\n    ) as VNode;\n  }\n}\n","@import 'core';\n\n/**\n * @prop --ads-tag-background-color: The background color for ads-tag\n * @prop --ads-tag-background-color-active: The background color for ads-tag on active\n * @prop --ads-tag-background-color-focus: The background color for ads-tag on focus\n * @prop --ads-tag-background-color-hover: The background color for ads-tag on hover\n *\n * @prop --ads-tag-border-color: The border color for ads-tag\n * @prop --ads-tag-border-color-active: The border color for ads-tag on active\n * @prop --ads-tag-border-color-focus: The border color for ads-tag on focus\n * @prop --ads-tag-border-color-hover: The border color for ads-tag on hover\n *\n * @prop --ads-tag-color: The border color for ads-tag\n * @prop --ads-tag-color-active: The border color for ads-tag on active\n * @prop --ads-tag-color-focus: The border color for ads-tag on focus\n * @prop --ads-tag-color-hover: The border color for ads-tag on hover\n */\n\n:host {\n  display: inline-flex;\n  margin: 0;\n  padding: 0;\n  vertical-align: middle;\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n}\n\n:host([theme='default']) {\n  @include ads-vars-component-tag-default;\n}\n\n:host([theme='dark']) {\n  @include ads-vars-component-tag-dark;\n}\n\n.c-tag {\n  @include ads-tag;\n  font-size: 14px;\n  margin: 0;\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":""}