{"version":3,"sources":["components/ads-card/ads-card.tsx","components/ads-card/ads-card.scss?tag=ads-card&encapsulation=shadow","components/ads-card/components/ads-card-content/ads-card-content.scss?tag=ads-card-content&encapsulation=shadow","components/ads-card/components/ads-card-content/ads-card-content.tsx","components/ads-card/components/ads-card-image/ads-card-image.scss?tag=ads-card-image&encapsulation=shadow","components/ads-card/components/ads-card-image/ads-card-image.tsx","components/ads-card/components/ads-card-label/ads-card-label.scss?tag=ads-card-label&encapsulation=shadow","components/ads-card/components/ads-card-label/ads-card-label.tsx","components/core/global/pipeline.ts","components/core/utils/pipeline.ts","components/core/utils/components.ts","components/core/interfaces/Hyperlink.ts"],"names":["AdsCard","VERTICAL","this","el","setAttribute","identifier","component","newValue","Pipeline.addComponent","Pipeline.removeComponent","linkObj","link","TagType","attributes","href","hrefLang","hreflang","rel","target","onClick","srLabel","$adsCardLabel","querySelector","$adsCardImage","$adsCardContent","$labelEl","class","name","$slotContent","isReversed","reverse","classes","push","hasHoverEffect","hasOpenBorder","orientation","HORIZONTAL","join","AdsCardContent","AdsCardImage","Tag","src","styles","backgroundImage","effect","style","role","overlay","alt","AdsCardLabel","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/25.54936f18.chunk.js","sourcesContent":["import * as Pipeline from '../core/utils/pipeline';\nimport { BaseComponent } from '../core/interfaces/BaseComponent';\nimport { Component, Element, Prop, Watch, h } from '@stencil/core';\nimport { Hyperlink, getHyperLinkObject } from '../core/interfaces/Hyperlink';\nimport { Orientation, Orientations } from '../core/types/globalTypes';\nimport { generateId } from '../core/utils/components';\nimport { isNullOrUndefined } from 'utils/collection';\n\n/**\n * Card are flexible and extensible containers that can display a wide variety of content about a single subject.\n * Cards can contain typographical elements, images, and interactive elements like buttons and links.\n * Cards have no fixed width, so they’ll naturally fill the full width of its parent element.\n * Utility classes can be used to style the text alignment.\n * As default the card is vertical, but the orientation can be changed using the vertical or horizontal property.\n * @tag `<ads-card>`\n * @slot label - Label Area\n * @slot image - Image Area\n * @slot content - Content Area\n * @example\n * <ads-card has-open-border=\"true\">\n *   <ads-card-content slot=\"content\">\n *     <div class=\"u-padding-1\">\n *       <h3 class=\"u-font-size-200% u-margin-top-1/2 u-margin-bottom-2 u-text-bold\">Feature Card</h3>\n *       <div class=\"u-flex-1 u-margin-bottom-1\">GigaOm explores the requirements for artificial intelligence to deliver on its promise of improving our lives through the devices.</div>\n *     </div>\n *   </ads-card-content>\n * </ads-card>\n */\n@Component({\n  tag: 'ads-card',\n  styleUrl: 'ads-card.scss',\n  shadow: true,\n})\nexport class AdsCard implements BaseComponent {\n  /**\n   * @hidden\n   */\n  public component: string;\n\n  constructor() {\n    this.el.setAttribute('id', this.identifier || generateId('ads-card'));\n    this.component = 'ads-card';\n  }\n\n  @Element() private el: HTMLAdsCardElement;\n\n  /**\n   * The unique identifier (optional)\n   */\n  @Prop({ attribute: 'id' }) identifier?: string;\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   * Whether or not the card has an animation on hover (optional)\n   * @default false\n   */\n  @Prop({ reflect: true }) hasHoverEffect? = false;\n\n  /**\n   * Whether or not the card has an open border (optional)\n   * @default false\n   */\n  @Prop({ reflect: true }) hasOpenBorder = false;\n\n  /**\n   * The card orientation: \"vertical\" or \"horizontal\" (optional)\n   * @default \"vertical\"\n   */\n  @Prop({ reflect: true }) orientation: Orientation = Orientations.VERTICAL;\n\n  /**\n   * Whether or not the card has the image and content reversed in order (optional)\n   * @default false\n   */\n  @Prop({ reflect: true }) isReversed? = false;\n\n  /**\n   * Text to display as the aria-label (optional)\n   */\n  @Prop({ reflect: true }) srLabel?: string;\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-card'));\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(): HTMLElement {\n    const linkObj = getHyperLinkObject(this.link);\n\n    const TagType = !isNullOrUndefined(linkObj) ? 'a' : 'div';\n\n    // Generate the attributes list\n    const attributes = {\n      href: linkObj?.href,\n      hrefLang: linkObj?.hreflang || null,\n      rel: linkObj?.rel || null,\n      target: linkObj?.target || null,\n      onClick: linkObj?.onClick || null,\n      'data-track': 'true',\n      'data-track-value': this.srLabel,\n    };\n\n    const $adsCardLabel = this.el.querySelector('ads-card-label');\n    const $adsCardImage = this.el.querySelector('ads-card-image');\n    const $adsCardContent = this.el.querySelector('ads-card-content');\n\n    const $labelEl = !isNullOrUndefined($adsCardLabel)\n      ? ((\n          <span class=\"c-card__label\">\n            <slot name=\"label\" />\n          </span>\n        ) as HTMLElement)\n      : null;\n    const $imageEl = !isNullOrUndefined($adsCardImage)\n      ? ((\n          <span class=\"c-card__image\">\n            <slot name=\"image\" />\n          </span>\n        ) as HTMLElement)\n      : null;\n    const $contentEl = !isNullOrUndefined($adsCardContent)\n      ? ((\n          <span class=\"c-card__content\">\n            <slot name=\"content\" />\n          </span>\n        ) as HTMLElement)\n      : null;\n\n    const $slotContent = [$imageEl, $contentEl];\n    this.isReversed ? $slotContent.reverse() : null;\n\n    // Generate the class list\n    const classes = ['c-card'];\n    classes.push(this.hasHoverEffect ? 'has-hover-effect' : null);\n    classes.push(!isNullOrUndefined($adsCardLabel) ? 'has-label' : null);\n    classes.push(this.hasOpenBorder ? 'has-open-border' : null);\n    classes.push(this.orientation === Orientations.HORIZONTAL ? 'is-horizontal' : null);\n\n    return (\n      <TagType class={classes.join(' ')} {...attributes}>\n        {$labelEl}\n        <div class=\"c-card__wrapper\">{$slotContent}</div>\n      </TagType>\n    ) as HTMLElement;\n  }\n}\n","@import 'core';\n\n/**\n * @prop --ads-card-background-color: Background color\n * @prop --ads-card-background-color-hover: Hovered background color\n *\n * @prop --ads-card-border-color: Border color\n * @prop --ads-card-border-color-hover: Hovered border color\n * @prop --ads-card-border-radius: Border radius\n * @prop --ads-card-border-style: Border style\n * @prop --ads-card-border-width: Border width\n *\n * @prop --ads-card-box-shadow: Box shadow\n * @prop --ads-card-box-shadow-hover: Hovered box shadow\n *\n * @prop --ads-card-content-color: Text color\n * @prop --ads-card-image-background-color: Image background color\n * @prop --ads-card-image-min-height: Image min height\n * @prop --ads-card-label-color: Label color\n */\n\n:host([theme='default']) {\n  @include ads-vars-component-card-default;\n}\n\n:host([theme='dark']) {\n  @include ads-vars-component-card-dark;\n}\n\n:host {\n  border-radius: var(--ads-card-border-radius, $ads-card-border-radius);\n  display: flex;\n  flex: 1 0 auto;\n  font-family: var(--ads-font-family);\n  height: 100%;\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  .c-card {\n    align-items: stretch;\n    background-color: var(--ads-card-background-color, $ads-card-background-color);\n    border-color: var(--ads-card-border-color, $ads-card-border-color);\n    border-radius: var(--ads-card-border-radius, $ads-card-border-radius);\n    border-style: var(--ads-card-border-style, $ads-card-border-style);\n    border-width: var(--ads-card-border-width, $ads-card-border-width);\n    box-shadow: var(--ads-card-box-shadow, $ads-card-box-shadow);\n    box-sizing: border-box;\n    display: flex;\n    flex: 1 0 auto;\n    flex-direction: column;\n    height: auto;\n    justify-content: stretch;\n    position: relative;\n    text-decoration: none;\n    transition: background-color, border-color, box-shadow, transform;\n    transition-duration: 0.3s;\n    transition-timing-function: ease-in-out;\n    width: 100%;\n\n    &:focus,\n    &:hover {\n      background-color: var(--ads-card-background-color-hover, $ads-card-background-color-hover);\n      border-color: var(--ads-card-border-color-hover, $ads-card-border-color-hover);\n      box-shadow: var(--ads-card-box-shadow-hover, $ads-card-box-shadow-hover);\n    }\n\n    /* MODIFIERS */\n\n    &.has-hover-effect:focus,\n    &.has-hover-effect:hover {\n      transform: var(--ads-card-transform-hover, $ads-card-transform-hover);\n    }\n\n    &.has-label {\n      border-top-width: 0 !important;\n      margin-top: 15px;\n    }\n\n    &.has-open-border {\n      border-right-width: 0 !important;\n\n      &::before {\n        border-color: inherit;\n        border-right-style: var(--ads-card-border-style, $ads-card-border-style);\n        border-right-width: var(--ads-card-border-width, $ads-card-border-width);\n        bottom: 70px;\n        content: '';\n        display: block;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: 1;\n      }\n    }\n\n\n    /* DESCENDANTS */\n\n    &__label {\n      border-color: inherit;\n      border-style: none;\n      border-width: inherit;\n      height: 30px;\n      position: absolute;\n      top: -15px;\n      width: 100%;\n\n      > slot[name='label'] {\n        border-color: inherit;\n      }\n    }\n\n    &__wrapper {\n      border-radius: var(--ads-card-border-radius, $ads-card-border-radius);\n      display: flex;\n      flex: 1 0 auto;\n      flex-direction: column;\n      overflow: hidden;\n      z-index: 0;\n    }\n\n    &.is-horizontal .c-card__wrapper {\n\n      @include media-query(sm-up) {\n        flex-direction: row;\n      }\n    }\n\n    &__image {\n      align-items: center;\n      display: flex;\n      flex: 0 0 auto;\n      justify-content: center;\n      line-height: 0;\n      overflow: hidden;\n    }\n\n    &__content {\n      display: flex;\n      flex: 1 0 auto;\n    }\n\n    &.is-horizontal .c-card__image,\n    &.is-horizontal .c-card__content {\n\n      @include media-query(sm-up) {\n        width: 50%;\n      }\n    }\n  }\n}\n","@import 'core';\n\n$ads-card-content-font-size: 16px;\n$ads-card-content-padding: 1rem;\n\n:host {\n  box-sizing: border-box;\n  width: 100%;\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  .c-card-content {\n    box-sizing: border-box;\n    color: var(--ads-card-content-color, $ads-card-content-color);\n    display: block;\n    font-family: var(--ads-font-family);\n    font-size: var(--ads-card-content-font-size, $ads-card-content-font-size);\n    height: 100%;\n    overflow: hidden;\n    padding: var(--ads-card-content-padding, $ads-card-content-padding);\n    position: relative;\n    width: inherit;\n  }\n}\n","import { Component, VNode, h } from '@stencil/core';\n\n/**\n * @tag `<ads-card-content>`\n * @hidden\n */\n@Component({\n  tag: 'ads-card-content',\n  styleUrl: 'ads-card-content.scss',\n  shadow: true,\n})\nexport class AdsCardContent {\n  protected render(): VNode {\n    return (\n      <span class=\"c-card-content\">\n        <slot />\n      </span>\n    ) as VNode;\n  }\n}\n","@import 'core';\n\n$ads-card-image-align-horizontal: center;\n$ads-card-image-align-vertical: center;\n$ads-card-image-background-position: 50% 50%;\n$ads-card-image-background-repeat: no-repeat;\n$ads-card-image-background-size: cover;\n$ads-card-image-padding: 16px;\n\n\n:host {\n  align-items: var(--ads-card-image-align-horizontal, $ads-card-image-align-horizontal);\n  justify-content: var(--ads-card-image-align-vertical, $ads-card-image-align-vertical);\n\n  display: flex;\n  flex: 1 0 auto;\n  height: 100%;\n  position: relative;\n  width: 100%;\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n}\n\n:host(.has-background) {\n  width: 100%;\n}\n\n.c-card-image {\n  background-color: var(--ads-card-image-background-color, $ads-card-image-background-color);\n  background-position: var(--ads-card-image-background-position, $ads-card-image-background-position);\n  background-repeat: var(--ads-card-image-background-repeat, $ads-card-image-background-repeat);\n  min-height: var(--ads-card-image-min-height, $ads-card-image-min-height);\n\n  &__wrapper {\n    align-items: center;\n    background-position: inherit;\n    background-repeat: inherit;\n    bottom: 0;\n    display: flex;\n    flex: 1 0 auto;\n    height: 100%;\n    justify-content: center;\n    left: 0;\n    min-height: var(--ads-card-image-min-height, $ads-card-image-min-height);\n    position: relative;\n    right: 0;\n    top: 0;\n    width: 100%;\n  }\n\n  &__background {\n    background-position: inherit;\n    background-repeat: inherit;\n    background-size: var(--ads-card-image-background-size, $ads-card-image-background-size);\n    display: block;\n    height: 100%;\n    min-height: inherit;\n    width: 100%;\n\n    &.ken-burns {\n      transition: transform .35s;\n      transform: scale(1.25);\n\n      &:focus, &:hover {\n        transition: transform .2s;\n        transform: scale(1.35);\n      }\n    }\n  }\n\n  &__overlay-image {\n    background-repeat: inherit;\n    display: block;\n    height: inherit;\n    left: 0;\n    min-height: 180px;\n    min-width: 180px;\n    padding-bottom: 10px;\n    padding-top: 10px;\n    position: absolute;\n    top: 0;\n\n    &.ken-burns {\n      transform: scale(1.25);\n      transition: transform .35s;\n\n      &:focus, &:hover {\n        transform: scale(1.35);\n        transition: transform .2s;\n      }\n    }\n  }\n\n  &__image {\n    display: block;\n    max-width: 100%;\n    padding: var(--ads-card-image-padding, $ads-card-image-padding);\n    text-align: center;\n\n    img {\n      max-width: inherit;\n    }\n  }\n}\n","import { Component, Prop, VNode, h } from '@stencil/core';\nimport { Hyperlink, getHyperLinkObject } from '../../../core/interfaces/Hyperlink';\nimport { isNullOrUndefined, isNullOrUndefinedOrEmpty } from 'utils/collection';\n\n/**\n * @tag `<ads-card-image>`\n * @hidden\n */\n@Component({\n  tag: 'ads-card-image',\n  styleUrl: 'ads-card-image.scss',\n  shadow: true,\n})\nexport class AdsCardImage {\n  /**\n   * If set, the value will be used as the background-image location (optional)\n   */\n  @Prop() src?: string;\n\n  /**\n   * If set, value will be used as overlay image on src image (optional)\n   */\n  @Prop() overlay?: string;\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   * The value for the aria-label (optional)\n   */\n  @Prop() srLabel?: string;\n\n  /**\n   * The animation effect value (optional)\n   */\n  @Prop() effect?: string;\n\n  protected render(): VNode {\n    const linkObj = getHyperLinkObject(this.link);\n\n    const Tag = !isNullOrUndefined(linkObj) ? 'a' : 'div';\n\n    const attributes: {\n      href?: string;\n      hrefLang?: string;\n      rel?: string;\n      target?: string;\n      onClick?: (evt: MouseEvent) => void;\n      'data-track'?: string;\n      'data-track-value'?: string;\n    } =\n      Tag === 'a'\n        ? {\n            href: linkObj?.href,\n            hrefLang: linkObj?.hreflang || null,\n            rel: linkObj?.rel || null,\n            target: linkObj?.target || null,\n            onClick: linkObj?.onClick || null,\n            'data-track': 'true',\n            'data-track-value': this.srLabel,\n          }\n        : {};\n\n    // Generate the classes\n    const classes = ['c-card-image__wrapper'];\n    if (!isNullOrUndefinedOrEmpty(this.src)) {\n      classes.push('has_background');\n    }\n\n    // Generate the image styles\n    const styles = {\n      backgroundImage: !isNullOrUndefinedOrEmpty(this.src) ? `url(${this.src})` : null,\n    };\n\n    return (\n      <Tag class={classes.join(' ')} {...attributes}>\n        {!isNullOrUndefinedOrEmpty(this.src) ? (\n          <div class={`c-card-image__background ${!isNullOrUndefinedOrEmpty(this.effect) ? this.effect : ''}`} style={styles}>\n            {!isNullOrUndefinedOrEmpty(this.srLabel) ? <span role=\"img\" aria-label={this.srLabel} /> : null}\n            <div>\n              {!isNullOrUndefinedOrEmpty(this.overlay) ? (\n                <div class={'c-card-image__overlay-image'}>\n                  <img src={this.overlay} alt=\"placeholder\" />\n                </div>\n              ) : null}\n            </div>\n          </div>\n        ) : (\n          <picture class=\"c-card-image__image\">\n            <slot />\n          </picture>\n        )}\n      </Tag>\n    ) as VNode;\n  }\n}\n","@import 'core';\n\n:host {\n  border-color: inherit;\n  color: var(--ads-card-label-color, $ads-card-label-color);\n  display: block;\n  font-size: 20px;\n  font-weight: 700;\n  width: 100%;\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  .c-card-label {\n    align-items: center;\n    background-color: transparent;\n    border-color: inherit;\n    box-sizing: border-box;\n    color: inherit;\n    display: flex;\n    flex-direction: row;\n    font-family: var(--ads-font-family);\n    font-size: inherit;\n    font-weight: inherit;\n    position: relative;\n    width: 100%;\n\n\n    // MODIFIERS\n\n    .is-reversed {\n      flex-direction: row-reverse;\n    }\n\n    // DESCENDANTS\n\n    &__text {\n      display: block;\n      overflow: hidden;\n      padding: 0 15px;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      width: auto;\n    }\n\n    &__border {\n      align-self: baseline;\n      border-color: inherit;\n      border-bottom-color: transparent;\n      border-left-color: transparent;\n      border-right-color: transparent;\n      border-top-style: var(--ads-card-border-style, $ads-card-border-style);\n      border-top-width: var(--ads-card-border-width, $ads-card-border-width);\n      display: block;\n      flex: 1 0 auto;\n      margin-top: 15px;\n      width: auto;\n    }\n  }\n}\n","import { Component, VNode, h } from '@stencil/core';\n\n/**\n * @tag `<ads-card-label>`\n * @hidden\n */\n@Component({\n  tag: 'ads-card-label',\n  styleUrl: 'ads-card-label.scss',\n  shadow: true,\n})\nexport class AdsCardLabel {\n  protected render(): VNode {\n    return (\n      <span class=\"c-card-label\">\n        <span class=\"c-card-label__text\">\n          <slot />\n        </span>\n        <span class=\"c-card-label__border\"></span>\n      </span>\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":""}