{"file":"vds-interactive-link.entry.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,g2UAAg2U,CAAC;AAC/3U,iCAAe,qBAAqB;;MCOvB,kBAAkB;;;;sBAUa,OAAO;wBAKrB,KAAK;sBAKyB,KAAK;wBAKH,KAAK;4BAKD,KAAK;wBAKT,KAAK;;IAEjE,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAExE,QACE,EAAC,IAAI,uDACH,0DAAG,GAAG,EAAE,GAAG,IAAI,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EACnC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,KAAK,EAAE;gBACN,QAAQ,EAAE,MAAM,IAAI,QAAQ;gBAC5B,eAAe,EAAE,YAAY;gBAC7B,UAAU,EAAE,QAAQ;aACvB,IACC,8DAAa,CACX,CACC,EACP;KACH;IAEO,aAAa,CAAC,EAAqB;QACzC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;SACjC;KACF;;;;;;","names":[],"sources":["src/components/vds-interactive-link/vds-interactive-link.scss?tag=vds-interactive-link&encapsulation=shadow","src/components/vds-interactive-link/vds-interactive-link.tsx"],"sourcesContent":[":host {\r\n  @apply block cursor-pointer;\r\n}\r\n\r\na {\r\n  @apply relative text-center text-grey;\r\n\r\n  &.disabled {\r\n    @apply pointer-events-none;\r\n  }\r\n\r\n  &:hover,\r\n  &.active {\r\n    @apply text-berry transition-colors;\r\n\r\n    font-weight: bold;\r\n\r\n    // Target Safari 10+\r\n    @media not all and (min-resolution:.001dpcm) {\r\n      letter-spacing: -1px;\r\n    }\r\n  }\r\n\r\n  &:not(.no-decoration):hover:after {\r\n    @apply w-full;\r\n  }\r\n\r\n  &:not(.no-decoration):after {\r\n      content: '';\r\n      position: absolute;\r\n      height: 1px;\r\n      background: var(--vt-color-berry-default, #D7004B);;\r\n      bottom: 0;\r\n      left: 50%;\r\n      width: 0;\r\n      transition: width 0.25s linear;\r\n      transform: translateX(-50%);\r\n  }\r\n}\r\n\r\n::slotted(span.uk-icon) {\r\n  @apply relative top-[3px] pointer-events-none;\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\nimport { HTMLAnchorElementTarget } from '../../utils/helpers';\r\n\r\n@Component({\r\n  tag: 'vds-interactive-link',\r\n  styleUrl: 'vds-interactive-link.scss',\r\n  shadow: true,\r\n})\r\nexport class VdsInteractiveLink {\r\n\r\n  /**\r\n   * Specifies the URL of the page the link goes to\r\n   */\r\n  @Prop() href: string;\r\n\r\n  /**\r\n   * Specifies where to open the linked document\r\n   */\r\n  @Prop() target: HTMLAnchorElementTarget = '_self';\r\n\r\n  /**\r\n   * Sets the download attribute for the underlying anchor element\r\n   */\r\n  @Prop() download: boolean = false;\r\n\r\n  /**\r\n   * Applies highlight and underline decoration\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) active: boolean = false;\r\n\r\n  /**\r\n   * Highlights the link if set to true\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) selected: boolean = false;\r\n\r\n  /**\r\n   * Removes the underline if set to true (e.g. for icon links)\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) noDecoration: boolean = false;\r\n\r\n  /**\r\n   * Specifies that the element should be disabled\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) disabled: boolean = false;\r\n\r\n  render() {\r\n    const { href, target, active, selected, noDecoration, disabled } = this;\r\n\r\n    return (\r\n      <Host>\r\n        <a ref={ref => this.setAttributes(ref)}\r\n           href={href}\r\n           target={target}\r\n           class={{\r\n            'active': active || selected,\r\n            'no-decoration': noDecoration,\r\n            'disabled': disabled\r\n        }}>\r\n          <slot></slot>\r\n        </a>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private setAttributes(el: HTMLAnchorElement): void {\r\n    if (this.download) {\r\n      el.setAttribute('download', '');\r\n    }\r\n  }\r\n\r\n}\r\n"],"version":3}