{"version":3,"names":["kdxArrowLinkCss","StArrowLink","guid","render","h","href","this","class","layout","classes","isSpeedbump","label","id","target","icon"],"sources":["src/components/shared/kdx-arrow-link/kdx-arrow-link.scss?tag=kdx-arrow-link","src/components/shared/kdx-arrow-link/kdx-arrow-link.tsx"],"sourcesContent":["kdx-arrow-link + kdx-arrow-link {\r\n\t\r\n\t.arrow-link { margin-left: 8px; }\r\n}\r\n.arrow-link {\r\n\tposition: relative;\r\n\tcolor: $primary;\r\n\tfont-weight: 700;\r\n\tfont-family: $font-family-secondary;\r\n\ttext-decoration: none;\r\n\tdisplay: inline-block;\r\n\t\r\n\t&.white-link {\r\n\t\tcolor: white !important;\r\n\t}\r\n\tsvg {\r\n\t\tmargin-left: 5px;\r\n\t\t@include svg-format(14px, 14px, currentColor);\r\n\t\ttransition: transform .3s ease-in-out;\r\n\t}\r\n\t&:after {\r\n\t\tcontent: '';\r\n\t\tbackground: currentColor;\r\n\t\theight: 1px;\r\n\t\twidth: 0px;\r\n\t\tposition: absolute;\r\n\t\ttop: 100%;\r\n\t\tleft: 0;\r\n\t\ttransition: width .3s ease-in-out;\r\n\t}\r\n\t&:hover, &:focus {\r\n\t\toutline: none;\r\n\t\tcolor: $link-hover-primary;\r\n\r\n\t\t&:after { width: 100%; }\r\n\t\tsvg { \r\n\t\t\ttransform: translateX(4px);\r\n\t\t}\r\n\t}\r\n}","import { Component, h, ComponentInterface, State, Prop, Element } from '@stencil/core';\r\nimport { guid } from 'utils';\r\n\r\n\r\n@Component({\r\n\ttag: 'kdx-arrow-link',\r\n\tstyleUrl: 'kdx-arrow-link.scss',\r\n\tshadow: false\r\n})\r\nexport class StArrowLink implements ComponentInterface {\r\n\r\n\t@Element() root: HTMLElement;\r\n\t\r\n\t@Prop() label: string;\r\n\t@Prop() href: string = \"\";\r\n\t@Prop() layout: string;\r\n\t@Prop() classes: string;\r\n\t@Prop() target: string;\r\n\t@Prop() isSpeedbump: boolean = false;\r\n\t\r\n\t@State() guid: string = guid();\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t<a \r\n\t\t\t\thref={this.href} \r\n\t\t\t\tclass={`arrow-link${this.layout ? this.layout : ''}${this.classes ? ' ' + this.classes : ''}${this.isSpeedbump ? ' speedbump-link' : ''}`} \r\n\t\t\t\taria-label={this.label} \r\n\t\t\t\tid={`arrow-link-${this.guid}`}\r\n\t\t\t\ttarget={this.target ? this.target : '_self'}\r\n\t\t\t>\r\n\t\t\t\t<slot />\r\n\t\t\t\t<span class=\"svg-icon\">\r\n\t\t\t\t\t\t\t<kdx-icon icon=\"chevron-right\" />\r\n\t\t\t\t</span>\r\n\t\t\t</a>\r\n\t\t);\r\n\t}\r\n}"],"mappings":"iFAAA,MAAMA,EAAkB,2yC,MCSXC,EAAW,M,wDAKA,G,oFAIQ,M,UAEPC,G,CAExB,MAAAC,GACC,OACCC,EAAA,KACCC,KAAMC,KAAKD,KACXE,MAAO,aAAaD,KAAKE,OAASF,KAAKE,OAAS,KAAKF,KAAKG,QAAU,IAAMH,KAAKG,QAAU,KAAKH,KAAKI,YAAc,kBAAoB,KAAI,aAC7HJ,KAAKK,MACjBC,GAAI,cAAcN,KAAKJ,OACvBW,OAAQP,KAAKO,OAASP,KAAKO,OAAS,SAEpCT,EAAA,aACAA,EAAA,QAAMG,MAAM,YACTH,EAAA,YAAUU,KAAK,mB"}