{"version":3,"sources":["components/ads-breadcrumbs/components/ads-breadcrumb/ads-breadcrumb.tsx","components/ads-breadcrumbs/components/ads-breadcrumb/ads-breadcrumb.scss?tag=ads-breadcrumb&encapsulation=shadow","components/ads-breadcrumbs/ads-breadcrumbs.scss?tag=ads-breadcrumbs&encapsulation=shadow","components/ads-breadcrumbs/ads-breadcrumbs.tsx","components/core/global/pipeline.ts","components/core/utils/pipeline.ts","components/core/utils/components.ts","components/core/interfaces/Hyperlink.ts"],"names":["AdsBreadCrumb","linkObj","this","link","TagType","classes","attributes","href","hrefLang","hreflang","rel","target","srLabel","current","onClick","class","join","AdsBreadcrumbs","setDelimiter","newDelimiter","el","querySelectorAll","forEach","$breadcrumb","setAttribute","style","setProperty","get","identifier","component","registerComponent","newValue","delimiter","Pipeline.addComponent","Pipeline.removeComponent","role","name","add","window","pipeline","set","id","tagName","toLowerCase","config","getBoolean","trackEvent","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","getHyperLinkObject"],"mappings":"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","file":"static/js/24.8e502c20.chunk.js","sourcesContent":["import { Component, Prop, VNode, h } from '@stencil/core';\nimport { Hyperlink, getHyperLinkObject } from '../../../core/interfaces/Hyperlink';\nimport { Theme } from '../../../core/types/globalTypes';\nimport { isNullOrUndefined } from 'utils/collection';\n\n/**\n * @hidden\n */\n@Component({\n  tag: 'ads-breadcrumb',\n  styleUrl: 'ads-breadcrumb.scss',\n  shadow: true,\n})\nexport class AdsBreadCrumb {\n  /**\n   * The theme for this component instance (optional)\n   * Values: \"default\", \"dark\"\n   */\n  @Prop({ reflect: true }) theme?: Theme;\n\n  /**\n   * Defines an aria-current attribute for the component (optional)\n   * @default false\n   */\n  @Prop({ reflect: true }) current = false;\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 }) link?: Hyperlink;\n\n  /**\n   * Defines an aria-label attribute for the component (optional)\n   */\n  @Prop({ reflect: true }) srLabel?: string;\n\n  protected render(): VNode {\n    const linkObj = getHyperLinkObject(this.link);\n    const TagType = !isNullOrUndefined(linkObj) ? 'a' : 'span';\n\n    const baseClass = !isNullOrUndefined(linkObj) ? 'c-breadcrumb__anchor' : null;\n    const classes = [baseClass];\n\n    const attributes = {\n      href: linkObj?.href,\n      hrefLang: linkObj?.hreflang || null,\n      rel: linkObj?.rel || null,\n      target: linkObj?.target || null,\n      'aria-label': this.srLabel,\n      'aria-current': this.current ? 'page' : null,\n      'data-track': 'true',\n      'data-track-value': this.srLabel,\n      onClick: linkObj?.onClick || null,\n    };\n\n    return (\n      <TagType class={classes.join(' ')} {...attributes}>\n        <slot />\n      </TagType>\n    ) as VNode;\n  }\n}\n","@import 'core';\n\n$properties: (\n  breadcrumb-delimiter: \"'/'\",\n  breadcrumb-delimiter-margin-left: 8px,\n  breadcrumb-delimiter-margin-right: 8px,\n);\n\n:host {\n  @each $key, $value in $properties {\n    --#{$key}: #{$value};\n  }\n}\n\n:host([theme='default']) {\n  @include ads-vars-component-breadcrumbs-default;\n}\n\n:host([theme='dark']) {\n  @include ads-vars-component-breadcrumbs-dark;\n}\n\n:host([theme='light']) {\n  @include ads-vars-component-breadcrumbs-light;\n}\n\n// Safari hack\n:host(:not(:last-child)) {\n  &::after {\n    content: var(--breadcrumb-delimiter);\n    margin-left: var(--breadcrumb-delimiter-margin-left);\n    margin-right: var(--breadcrumb-delimiter-margin-right);\n  }\n}\n\n.c-breadcrumb {\n  font-family: var(--ads-font-family);\n  font-size: inherit;\n  font-weight: inherit;\n\n  &__anchor {\n    @include ads-anchor;\n    color: var(--ads-breadcrumbs-link-color, $ads-breadcrumbs-link-color);\n    font-family: inherit;\n    text-decoration: var(--ads-breadcrumbs-text-decoration, $ads-breadcrumbs-text-decoration);\n\n    &:visited {\n      color: var(--ads-breadcrumbs-link-color-visited, $ads-breadcrumbs-link-color-visited);\n    }\n\n    &:focus,\n    &:hover {\n      --ads-anchor-text-decoration-hover: var(--ads-breadcrumbs-text-decoration-hover, $ads-breadcrumbs-text-decoration-hover);\n      color: var(--ads-breadcrumbs-link-color-hover, $ads-breadcrumbs-link-color-hover);\n    }\n  }\n}\n","@import 'core';\n\n/**\n * @prop --ads-breadcrumbs-color: Default text color\n * @prop --ads-breadcrumbs-link-color: Default link text color\n * @prop --ads-breadcrumbs-link-color-hover: Hovered link text color\n * @prop --ads-breadcrumbs-link-color-visited: Visited link text color\n * @prop --ads-breadcrumbs-text-decoration: Text decoration\n * @prop --ads-breadcrumbs-text-decoration-hover: Text decoration hover\n */\n\n$properties: (\n  ads-breadcrumbs-font-size: 12px,\n);\n\n::slotted(*) {\n  display: inline-block !important;\n}\n\n:host {\n  @each $key, $value in $properties {\n    --#{$key}: #{$value};\n  }\n  font-family: var(--ads-font-family);\n  font-size: var(--ads-breadcrumbs-font-size);\n}\n\n:host([theme='default']) {\n  @include ads-vars-component-breadcrumbs-default;\n}\n\n:host([theme='dark']) {\n  @include ads-vars-component-breadcrumbs-dark;\n}\n\n:host([theme='light']) {\n  @include ads-vars-component-breadcrumbs-light;\n}\n\n.c-breadcrumbs {\n  color: var(--ads-breadcrumbs-color, $ads-breadcrumbs-color);\n  display: block !important;\n  font-family: var(--ads-font-family);\n  font-size: var(--ads-breadcrumbs-font-size);\n}\n","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 { Theme } from '../core/types/globalTypes';\nimport { generateId } from '../core/utils/components';\nimport { isNullOrUndefinedOrEmpty } from 'utils/collection';\n\n/**\n * Breadcrumbs help users keep track of the active and current navigational state.\n * @tag `<ads-breadcrumbs>`\n * @slot breadcrumbs - The breadcrumbs displayed inside the component\n * @example\n * <ads-breadcrumbs sr-label=\"Breadcrumbs\">\n *   <ads-breadcrumb slot=\"breadcrumb\" link=\"#\" sr-label=\"Link to Text1\">Text1</ads-breadcrumb>\n *   <ads-breadcrumb slot=\"breadcrumb\" link=\"#\" sr-label=\"Link to Text2\">Text2</ads-breadcrumb>\n *   <ads-breadcrumb slot=\"breadcrumb\" link=\"#\" sr-label=\"Link to Text3\">Text3</ads-breadcrumb>\n *   <ads-breadcrumb slot=\"breadcrumb\" link=\"#\" sr-label=\"Link to Text4\" aria-current=\"true\">Text4</ads-breadcrumb>\n * </ads-breadcrumbs>\n */\n@Component({\n  tag: 'ads-breadcrumbs',\n  styleUrl: 'ads-breadcrumbs.scss',\n  shadow: true,\n})\nexport class AdsBreadcrumbs implements BaseComponent {\n  /**\n   * @hidden\n   */\n  public component: string;\n\n  constructor() {\n    this.el.setAttribute('id', this.identifier || generateId('ads-breadcrumbs'));\n    this.component = 'ads-breadcrumbs';\n    Dictionary.registerComponent(this);\n  }\n\n  /**\n   * The component element\n   */\n  @Element() private el: HTMLAdsBreadcrumbsElement;\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\", \"light\"\n   */\n  @Prop({ reflect: true }) theme?: Theme;\n\n  /**\n   * The value for the aria-label, to describe the purpose of the breadcrumbs component (optional).\n   * Translations for the default value can be configured, if required, via the `NAVIGATION_MENU` key.\n   * @default \"Navigation Menu\"\n   */\n  @Prop({ reflect: true }) srLabel: string = Dictionary.get('Navigation Menu', 'NAVIGATION_MENU');\n\n  /**\n   * The breadcrumb delimiter (optional)\n   */\n  @Prop({ reflect: true }) delimiter?: 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-breadcrumbs'));\n  }\n\n  /**\n   * Handle delimiter change\n   * @param {string}   newValue  The new value for 'delimiter'\n   * @hidden\n   */\n  @Watch('delimiter')\n  handleDelimiterChange(newValue: string): void {\n    this.setDelimiter(newValue);\n  }\n\n  private setDelimiter = (newDelimiter: string) => {\n    const $breadcrumbs = this.el.querySelectorAll('ads-breadcrumb');\n    $breadcrumbs.forEach(($breadcrumb) => {\n      if (!isNullOrUndefinedOrEmpty(newDelimiter)) {\n        $breadcrumb.setAttribute('data-delimiter', newDelimiter);\n        $breadcrumb.style.setProperty('--breadcrumb-delimiter', `'${newDelimiter}'`);\n      }\n    });\n  };\n\n  protected componentWillLoad(): void {\n    this.setDelimiter(this.delimiter);\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      role: 'navigation',\n      'aria-label': this.srLabel,\n    };\n\n    const classes = ['c-breadcrumbs'];\n\n    return (\n      <nav class={classes.join(' ')} {...attributes}>\n        <slot name=\"breadcrumb\" />\n      </nav>\n    ) as VNode;\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","/**\n * An interface for a hyperlink\n * @docs\n * @global\n */\nexport interface HyperlinkObj {\n  /* the hyperlink url (fragment) value */\n  href: string;\n\n  /* the language of the linked resource */\n  hreflang?: string;\n\n  /* the relationship between the current document and the linked document */\n  rel?: string;\n\n  /* the context in which the linked resource will open */\n  target?: string;\n\n  /* the onClick handler of the link */\n  onClick?: (evt: MouseEvent) => void;\n}\n\n/**\n * Describes a link.\n * @docs\n * @global\n */\nexport type Hyperlink = HyperlinkObj | string;\n\n/**\n * Given a link object or string (href), this function will return the full object that describes a link\n * That way we can \"combine\" the two possible link inputs (string or obj) and work with objects as a result\n * @param   {Hyperlink}     link  The link data\n * @returns {HyperlinkObj}        The link in obj form\n */\nexport const getHyperLinkObject = (link: Hyperlink): HyperlinkObj => {\n  if (typeof link === 'string') {\n    return { href: link };\n  }\n  return link;\n};\n"],"sourceRoot":""}