{"version":3,"names":["zdsLinkCtaCss","ZdsLinkCtaStyle0","ZdsLinkCta","onBlur","event","stopPropagation","this","zdsBlur","emit","onClick","zdsClick","onFocus","zdsFocus","render","cssClasses","generateCssClasses","inherit","h","key","class","href","link","target","linkTarget","ariaLabel","name","library","size","__decorate","Bind","FocusEvent","MouseEvent"],"sources":["../src/components/zds-link-cta/zds-link-cta.scss?tag=zds-link-cta&encapsulation=shadow","../src/components/zds-link-cta/zds-link-cta.tsx"],"sourcesContent":["@import '../../../../style/src/typography/mixins';\n@import '../../mixins/outline';\n\n$zds-link-cta-movement: 7px;\n\n:host {\n\t@include zds-typography('body');\n}\n\n.zds-link-cta {\n\t@include outline;\n\n\t--zds-outline-color: currentcolor;\n\n\talign-items: center;\n\tcolor: var(--zds-link-cta-color);\n\tcursor: pointer;\n\tdisplay: flex;\n\toverflow: hidden;\n\ttext-decoration: var(--zds-link-cta-text-decoration);\n\twidth: 100%;\n\n\t&:visited {\n\t\tcolor: var(--zds-link-color-visited);\n\t}\n\n\t&:hover {\n\t\tcolor: var(--zds-link-cta-color-hover);\n\t\ttext-decoration: var(--zds-link-cta-text-decoration-hover);\n\t}\n\n\t&--inherit {\n\t\t&,\n\t\t&:hover,\n\t\t&:visited {\n\t\t\tcolor: inherit;\n\t\t}\n\t}\n\n\t.link-cta__icon {\n\t\tmargin-left: calc(-1 * #{$zds-link-cta-movement} + 2px);\n\t\ttransition: transform var(--zds-transition-sm);\n\t\twidth: calc(20px + #{$zds-link-cta-movement}); // 20px is the width of an icon with size SM\n\t}\n\n\t.link-cta__title {\n\t\tmargin-left: var(--zds-space-1);\n\t\ttransition: transform var(--zds-transition-sm);\n\t\ttransition-delay: 40ms;\n\t}\n\n\t&:hover .link-cta__icon,\n\t&:hover .link-cta__title {\n\t\ttransform: translateX($zds-link-cta-movement);\n\t}\n}\n","import { Component, Event, EventEmitter, Prop, h, Element } from '@stencil/core';\nimport Bind from 'bind-decorator';\n\nimport { LinkTarget } from '../../types';\nimport { generateCssClasses } from '../../utils/generate-css-classes';\n\n@Component({\n\tshadow: true,\n\tstyleUrl: 'zds-link-cta.scss',\n\ttag: 'zds-link-cta',\n})\nexport class ZdsLinkCta {\n\t@Element() hostElement: HTMLElement;\n\n\t@Event() zdsBlur: EventEmitter<FocusEvent>;\n\t@Event({ bubbles: true }) zdsClick: EventEmitter<MouseEvent>;\n\t@Event() zdsFocus: EventEmitter<FocusEvent>;\n\n\t@Prop() inherit: boolean;\n\t@Prop() link: string;\n\t@Prop() linkTarget: LinkTarget = '_self';\n\t@Prop() ariaLabel: string;\n\n\t@Bind\n\tonBlur(event: FocusEvent) {\n\t\tevent.stopPropagation();\n\t\tthis.zdsBlur.emit(event);\n\t}\n\n\t@Bind\n\tonClick(event: MouseEvent) {\n\t\tevent.stopPropagation();\n\t\tthis.zdsClick.emit(event);\n\t}\n\n\t@Bind\n\tonFocus(event: FocusEvent) {\n\t\tevent.stopPropagation();\n\t\tthis.zdsFocus.emit(event);\n\t}\n\n\trender() {\n\t\tconst cssClasses = generateCssClasses('zds-link-cta', {\n\t\t\tinherit: this.inherit,\n\t\t});\n\n\t\treturn (\n\t\t\t<a\n\t\t\t\tclass={cssClasses}\n\t\t\t\thref={this.link}\n\t\t\t\ttarget={this.linkTarget}\n\t\t\t\tonBlur={this.onBlur}\n\t\t\t\tonClick={this.onClick}\n\t\t\t\tonFocus={this.onFocus}\n\t\t\t\taria-label={this.ariaLabel}\n\t\t\t>\n\t\t\t\t<zds-icon class=\"link-cta__icon\" name=\"arrow-right-long\" library=\"fa-regular\" size=\"xs\"></zds-icon>\n\t\t\t\t<div class=\"link-cta__title\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</a>\n\t\t);\n\t}\n}\n"],"mappings":"+IAAA,MAAMA,EAAgB,k6DACtB,MAAAC,EAAeD,E,MCUFE,EAAU,M,2LASW,Q,yBAIjC,MAAAC,CAAOC,GACNA,EAAMC,kBACNC,KAAKC,QAAQC,KAAKJ,E,CAInB,OAAAK,CAAQL,GACPA,EAAMC,kBACNC,KAAKI,SAASF,KAAKJ,E,CAIpB,OAAAO,CAAQP,GACPA,EAAMC,kBACNC,KAAKM,SAASJ,KAAKJ,E,CAGpB,MAAAS,GACC,MAAMC,EAAaC,EAAmB,eAAgB,CACrDC,QAASV,KAAKU,UAGf,OACCC,EAAA,KAAAC,IAAA,2CACCC,MAAOL,EACPM,KAAMd,KAAKe,KACXC,OAAQhB,KAAKiB,WACbpB,OAAQG,KAAKH,OACbM,QAASH,KAAKG,QACdE,QAASL,KAAKK,QAAO,aACTL,KAAKkB,WAEjBP,EAAA,YAAAC,IAAA,2CAAUC,MAAM,iBAAiBM,KAAK,mBAAmBC,QAAQ,aAAaC,KAAK,OACnFV,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACVF,EAAA,QAAAC,IAAA,8C,oCAlCJU,EAAA,CADCC,E,iDACaC,a,0DAMdF,EAAA,CADCC,E,iDACcE,a,2DAMfH,EAAA,CADCC,E,iDACcC,a","ignoreList":[]}