{"version":3,"sources":["src/components/ads-cta-link/ads-cta-link.scss?tag=ads-cta-link&encapsulation=shadow","src/components/ads-cta-link/ads-cta-link.tsx"],"names":["adsCtaLinkCss","AdsCtaLink","[object Object]","hostRef","this","el","setAttribute","identifier","generateId","component","newValue","Pipeline.addComponent","Pipeline.removeComponent","linkObj","getHyperLinkObject","link","linkAttributes","href","hreflang","rel","target","tabIndex","aria-label","srLabel","onClick","h","class","Object","assign","aria-hidden","generateSVGImage","data","svgPathData","height","width"],"mappings":"gQAAA,MAAMA,EAAgB,49ECsBTC,EAAU,MAMrBC,YAAAC,aACEC,KAAKC,GAAGC,aAAa,KAAMF,KAAKG,YAAcC,EAAW,iBACzDJ,KAAKK,UAAY,eAoCnBP,uBAAuBQ,GACrBN,KAAKC,GAAGC,aAAa,KAAMI,GAAYF,EAAW,iBAG1CN,mBACRS,EAAsBP,KAAKC,IAGnBH,uBACRU,EAAyBR,KAAKC,IAGtBH,SACR,MAAMW,EAAUC,EAAmBV,KAAKW,MAExC,MAAMC,EAAiB,CACrBC,KAAMJ,IAAO,MAAPA,SAAO,OAAA,EAAPA,EAASI,KACfC,UAAUL,IAAO,MAAPA,SAAO,OAAA,EAAPA,EAASK,WAAY,KAC/BC,KAAKN,IAAO,MAAPA,SAAO,OAAA,EAAPA,EAASM,MAAO,KACrBC,QAAQP,IAAO,MAAPA,SAAO,OAAA,EAAPA,EAASO,SAAU,KAC3BC,SAAU,EACVC,aAAclB,KAAKmB,QACnBC,SAASX,IAAO,MAAPA,SAAO,OAAA,EAAPA,EAASW,UAAW,MAG/B,OACEC,EAAA,OAAA,CAAMC,MAAM,cACVD,EAAA,IAAAE,OAAAC,OAAA,CAAGF,MAAM,sBAAyBV,GAChCS,EAAA,OAAA,OAEFA,EAAA,OAAA,CAAMC,MAAM,mBAAkBG,cAAa,QACxCC,EAAiB,CAAEC,KAAMC,EAAAA,YAAWC,OAAEA,EAAAA,OAAMC,MAAEA,EAAAA","sourcesContent":["@import 'core';\n\n/**\n * @prop --ads-cta-link-color: Link text color\n * @prop --ads-cta-link-color-hover: Link text color on hover\n *\n * @prop --ads-cta-link-icon-color: Icon color\n * @prop --ads-cta-link-icon-margin-left: Icon left margin value\n * @prop --ads-cta-link-icon-margin-right: Icon right margin value\n * @prop --ads-cta-link-icon-rotation: Icon rotation value\n */\n\n::slotted(*) {\n  color: inherit !important;\n  font-size: inherit !important;\n  font-weight: inherit !important;\n}\n\n:host {\n  display: inline-block;\n}\n\n:host([theme='default']) {\n  @include ads-vars-component-cta-link-default;\n}\n\n:host([theme='dark']) {\n  @include ads-vars-component-cta-link-dark;\n}\n\n:host([dir='ltr']) {\n  @include ads-vars-component-cta-link-ltr;\n}\n\n:host([dir='rtl']) {\n  @include ads-vars-component-cta-link-rtl;\n}\n\n.c-cta-link {\n  @include ads-cta-link;\n}\n","import * as Pipeline from '../core/utils/pipeline';\nimport { BaseComponent } from '../core/interfaces/BaseComponent';\nimport { Component, Element, Prop, VNode, Watch, h } from '@stencil/core';\nimport { Hyperlink, getHyperLinkObject } from '../core/interfaces/Hyperlink';\nimport { Theme } from '../core/types/globalTypes';\nimport { generateId } from '../core/utils/components';\nimport { generateSVGImage } from 'utils/imageHelper';\nimport { height, svgPathData, width } from '@fortawesome/pro-light-svg-icons/faChevronRight';\n\n/**\n * The call to action link is used to combination of anchor text and a chevron to provide greater affordance\n * for the most important link related to a set of content. Avoid using too many CTA links in proximity,\n * for example in lists. Instead use a single CTA link per content section or card.\n * @tag `<ads-cta-link>`\n * @slot - Content rendered as rich text inside the component\n * @example <ads-cta-link link=\"https://www.arm.com\">Learn More</ads-cta-link>\n */\n@Component({\n  tag: 'ads-cta-link',\n  styleUrl: 'ads-cta-link.scss',\n  shadow: true,\n})\nexport class AdsCtaLink implements BaseComponent {\n  /**\n   * @hidden\n   */\n  public component: string;\n\n  constructor() {\n    this.el.setAttribute('id', this.identifier || generateId('ads-cta-link'));\n    this.component = 'ads-cta-link';\n  }\n\n  /**\n   * @hidden\n   */\n  @Element() el: HTMLAdsCtaLinkElement;\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.\n   */\n  @Prop({ reflect: true }) link: Hyperlink;\n\n  /**\n   * Text to display as the aria-label (optional)\n   */\n  @Prop({ reflect: true }) srLabel?: 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-cta-link'));\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 linkObj = getHyperLinkObject(this.link);\n\n    const linkAttributes = {\n      href: linkObj?.href,\n      hreflang: linkObj?.hreflang || null,\n      rel: linkObj?.rel || null,\n      target: linkObj?.target || null,\n      tabIndex: 0,\n      'aria-label': this.srLabel,\n      onClick: linkObj?.onClick || null,\n    };\n\n    return (\n      <span class=\"c-cta-link\">\n        <a class=\"c-cta-link__anchor\" {...linkAttributes}>\n          <slot />\n        </a>\n        <span class=\"c-cta-link__icon\" aria-hidden=\"true\">\n          {generateSVGImage({ data: svgPathData, height, width })}\n        </span>\n      </span>\n    ) as VNode;\n  }\n}\n"]}