{"file":"vds-icon-link.entry.js","mappings":"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","names":[],"sources":["src/components/vds-icon-link/vds-icon-link.scss?tag=vds-icon-link&encapsulation=shadow","src/components/vds-icon-link/vds-icon-link.tsx"],"sourcesContent":[":host {\r\n  @apply block;\r\n}\r\n\r\na {\r\n  &:hover {\r\n    .scale-100 {\r\n      @apply scale-[1.2];\r\n    }\r\n  }\r\n}\r\n\r\n::slotted(svg) {\r\n  @apply w-full h-full box-border overflow-hidden;\r\n  fill: currentColor;\r\n}\r\n\r\n::slotted(:not(svg)) {\r\n  @apply  max-w-[28px] max-h-[28px];\r\n}\r\n\r\n::slotted([slot=label-icon]) {\r\n  @apply relative inline-block top-[1px] text-berry ml-[5px];\r\n}\r\n","import { Component, Host, h, Prop, ComponentInterface, Element } from '@stencil/core';\r\nimport { HTMLAnchorElementTarget } from '../../utils/helpers';\r\n\r\n@Component({\r\n  tag: 'vds-icon-link',\r\n  styleUrl: 'vds-icon-link.scss',\r\n  shadow: true,\r\n})\r\nexport class VdsIconLink implements ComponentInterface {\r\n\r\n  @Element() el: HTMLVdsIconLinkElement;\r\n\r\n  private scaleClasses: string = '';\r\n  private borderClasses: string = '';\r\n  private tabletClasses: string = '';\r\n  private displayClass: string = '';\r\n\r\n  private iconSpan?: HTMLSpanElement;\r\n  private labelSpan?: HTMLSpanElement;\r\n\r\n  /**\r\n   * Href\r\n   */\r\n  @Prop() href: string | undefined = undefined;\r\n\r\n  /**\r\n   * Target\r\n   */\r\n  @Prop() target: HTMLAnchorElementTarget = '_self';\r\n\r\n  /**\r\n   * Label\r\n   */\r\n  @Prop() label: string;\r\n\r\n  /**\r\n   * Last item\r\n   */\r\n  @Prop() last: boolean = false;\r\n\r\n  /**\r\n   * Icon color\r\n   */\r\n  @Prop() iconColor: 'berry' | 'grey' | 'grey-light' | 'grey-dark' = 'berry';\r\n\r\n  /**\r\n   * Sets icon width/height\r\n   */\r\n  @Prop() mobileIconSize: string = \"28px\";\r\n\r\n  /**\r\n   * Adds scale animation to icon\r\n   */\r\n  @Prop() animated: boolean = false;\r\n\r\n  /**\r\n   * Enables growth of items on tablet widths\r\n   */\r\n  @Prop() tabletGrowth: boolean = true;\r\n\r\n  /**\r\n   * Sets font-size to given value\r\n   */\r\n  @Prop() fontSize: string = \"14px\";\r\n\r\n  /**\r\n   * Sets line-height to given value\r\n   */\r\n  @Prop() lineHeight: string = \"18px\";\r\n\r\n  /**\r\n   * Label color\r\n   */\r\n  @Prop() labelColor: 'berry' | 'grey' | 'grey-light' | 'grey-dark' = 'berry';\r\n\r\n  /**\r\n   * Label font family\r\n   */\r\n  @Prop() fontFamily: 'regular' | 'bold' = 'regular';\r\n\r\n  /**\r\n   * Show underline\r\n   */\r\n  @Prop() showUnderline: boolean = true;\r\n\r\n  /**\r\n   * Show icon\r\n   */\r\n  @Prop() showIcon: boolean = true;\r\n\r\n  /**\r\n   * Switches color on user interaction\r\n   */\r\n  @Prop() interactionColor: '' | 'grey' = '';\r\n\r\n  /**\r\n   * Toggles download link functionality\r\n   */\r\n  @Prop() download: boolean = false;\r\n\r\n  /**\r\n   * Disables link\r\n   */\r\n  @Prop() disabled: boolean = false;\r\n\r\n  componentDidRender(): void {\r\n    this.setSpanStyles();\r\n    this.addDownloadAttribute();\r\n  }\r\n\r\n  setSpanStyles(): void {\r\n    this.labelSpan.style.fontSize = this.fontSize;\r\n    this.labelSpan.style.lineHeight = this.lineHeight;\r\n    this.labelSpan.style.fontFamily = this.setFontFamily(this.fontFamily);\r\n    this.labelSpan.style.color = this.setColor(this.labelColor);\r\n    this.iconSpan.style.color = this.setColor(this.iconColor);\r\n    this.iconSpan.style.height = this.mobileIconSize;\r\n    this.iconSpan.style.flexBasis = this.mobileIconSize;\r\n  }\r\n\r\n  setColor(inputColor: string): string {\r\n    switch (inputColor) {\r\n      case \"berry\":\r\n        return 'var(--vt-color-berry-default, #D7004B)';\r\n      case \"grey\":\r\n        return 'var(--vt-color-grey-default, #4B4B46)';\r\n      case \"grey-light\":\r\n        return 'var(--vt-color-grey-light, #A5A5A2)';\r\n      case \"grey-dark\":\r\n        return 'var(--vt-color-grey-dark, #141412)';\r\n      default:\r\n        return '';\r\n    }\r\n  }\r\n\r\n  setFontFamily(inputFontFamily: string): string {\r\n    switch (inputFontFamily) {\r\n      case \"bold\":\r\n        return 'var(--vt-font-family-bold, \"HelveticaNeueWorldW05-75Bd\", \"Helvetica Neue\", \"Helvetica\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\")';\r\n      default:\r\n        return 'var(--vt-font-family-regular, \"HelveticaNeueWorldW05-55Rm\", \"Helvetica Neue\", \"Helvetica\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\")';\r\n    }\r\n  }\r\n\r\n  render(): void {\r\n    const TagType = this.href ? 'a' : 'button' as any;\r\n    const { href, label, target, last, animated, tabletGrowth, showUnderline, showIcon, mobileIconSize, labelColor, disabled } = this;\r\n\r\n    let { borderClasses, scaleClasses, tabletClasses, displayClass } = this;\r\n\r\n    if(!last) {\r\n      borderClasses = \"border-b-2 border-grey-lighter pb-[20px] mb-[20px] \";\r\n    }\r\n\r\n    if(animated) {\r\n      scaleClasses = \" transition-[transform] duration-[250ms] scale-100\";\r\n    }\r\n\r\n    if(tabletGrowth) {\r\n      tabletClasses = \" sm:h-[46px] sm:basis-[46px]\";\r\n    }\r\n\r\n    if(!showIcon) {\r\n      displayClass = \" hidden\";\r\n    }\r\n\r\n    return (\r\n      <Host>\r\n        <div class={ borderClasses + \"flex items-center\" }>\r\n\r\n          <TagType\r\n            href={ href }\r\n            target={ TagType === 'a' ? target : undefined }\r\n            disabled={ TagType === 'button' && disabled }\r\n            class={{\r\n              'flex items-center w-full': true,\r\n              'hover:underline': showUnderline,\r\n              'decoration-berry': showUnderline && labelColor == \"berry\",\r\n              'decoration-grey': showUnderline && labelColor == \"grey\",\r\n              'decoration-grey-light': showUnderline && labelColor == \"grey-light\",\r\n              'decoration-grey-dark': showUnderline && labelColor == \"grey-dark\",\r\n              'cursor-not-allowed': TagType === 'a' && disabled,\r\n              'opacity-25': disabled\r\n            }}\r\n            ref={ nativeEl => this.addReferenceToAnimatedIcon(nativeEl) }\r\n            onMouseOver={() => this.setInteractionColor()}\r\n            onMouseOut={() => this.removeInteractionColor()}\r\n            onFocus={() => this.setInteractionColor()}\r\n            onBlur={() => this.removeInteractionColor()}>\r\n            <div class=\"flex items-center w-full\">\r\n              <span\r\n                class={\r\n                  scaleClasses + tabletClasses + displayClass + \" mr-[10px] mt-[5px] flex-none leading-none overflow-hidden basis-[\" + mobileIconSize + \"] md:basis-[28px] h-[\" + mobileIconSize + \"] md:h-[28px]\"\r\n                }\r\n                ref={el => this.iconSpan = el as HTMLSpanElement}>\r\n\r\n                <slot name=\"icon-start\"></slot>\r\n\r\n              </span>\r\n              <span\r\n                class=\"w-full break-words text-left\"\r\n                ref={el => this.labelSpan = el as HTMLSpanElement}\r\n                innerHTML={ label }>\r\n                <slot name=\"label-icon\"></slot>\r\n              </span>\r\n            </div>\r\n          </TagType>\r\n\r\n          <slot name=\"icon-end\"></slot>\r\n\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private addReferenceToAnimatedIcon(refEl: HTMLElement): void {\r\n    const child = this.el.querySelector('vds-animated-icon');\r\n    if (child) {\r\n      child.interactionElement = refEl;\r\n    }\r\n  }\r\n\r\n  private setInteractionColor(): void {\r\n    if (!this.disabled) {\r\n      this.labelSpan.style.color = this.setColor(this.interactionColor);\r\n    }\r\n  }\r\n\r\n  private removeInteractionColor(): void {\r\n    if (!this.disabled) {\r\n      this.labelSpan.style.color = this.setColor(this.labelColor);\r\n    }\r\n  }\r\n\r\n  private addDownloadAttribute(): void {\r\n    if(this.download) {\r\n      this.el.shadowRoot.querySelector('a').setAttribute('download', '');\r\n    }\r\n  }\r\n\r\n}\r\n"],"version":3}