{"version":3,"names":["kdxTextCalloutCss","KdxTextCallout","render","h","class","this","orientation","Boolean","heading","ctaPrimaryHref","isSpeedbump","href","target","ctaPrimaryTarget","ctaPrimaryAriaLabel","ctaPrimaryText"],"sources":["src/components/ctas/kdx-text-callout/kdx-text-callout.scss?tag=kdx-text-callout","src/components/ctas/kdx-text-callout/kdx-text-callout.tsx"],"sourcesContent":[".kdx-text-callout {\r\n\ttext-align: center;\r\n\tmargin: 40px 0;\r\n\r\n\t&__subheading {\r\n\t\tmargin: 0 0 8px 0;\r\n\t}\r\n\t&__heading {\r\n\t\tposition: relative;\r\n\t\tpadding-bottom: 16px;\r\n\t\tmargin: 0 0 24px 0;\r\n\t\r\n\t\t&::after {\r\n\t\t\tcontent: '';\r\n\t\t\twidth: 100%;\r\n\t\t\tmax-width: 65px;\r\n\t\t\theight: 4px;\r\n\t\t\tbackground: $sectionTitleBorderColor;\r\n\t\t\tposition: absolute;\r\n\t\t\ttop: 100%;\r\n\t\t\tleft: 50%;\r\n\t\t\ttransform: translateX(-50%);\t\t\t\r\n\t\t}\r\n\t}\r\n\t&__content {\t\t\r\n\r\n\t\t* {\r\n\t\t\tmargin: 0;\r\n\t\t\tpadding: 0;\r\n\r\n\t\t\t&:last-of-type {\r\n\t\t\t\tpadding-bottom: 0;\r\n\t\t\t}\r\n\r\n\t\t\t& + * {\r\n\t\t\t\tmargin-top: 10px;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t&__action {\r\n\t\tmargin-top: 25px;\r\n\t}\r\n\t&.left-aligned {\r\n\t\ttext-align: left;\r\n\r\n\t\t.kdx-text-callout__heading {\r\n\r\n\t\t\t&::after {\r\n\t\t\t\tleft: 0;\r\n\t\t\t\ttransform: none;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n\r\n\r\n\r\n@include media-breakpoint-down(md) {\r\n\t.kdx-text-callout {\r\n\t\tmargin: 48px 0;\r\n\r\n\t\t&__content {\r\n\t\t\t@include text-size(14);\r\n\t\t\t@include line-height(22);\r\n\t\t}\t\t\r\n\t}\r\n}\r\n\r\n\r\n\r\n\r\n@include media-breakpoint-down(sm) {\r\n\t.kdx-text-callout {\r\n\t\t\r\n\t\t&__action {\r\n\r\n\t\t\t.btn { min-width: 80%; }\r\n\t\t}\r\n\t}\r\n}\t","import { Component, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n\ttag: 'kdx-text-callout',\r\n\tstyleUrl: 'kdx-text-callout.scss',\r\n\tshadow: false,\r\n})\r\nexport class KdxTextCallout {\r\n\r\n\t@Prop() heading: string;\r\n\t@Prop() ctaPrimaryText: string;\r\n\t@Prop() ctaPrimaryHref: string;\r\n\t@Prop() ctaPrimaryAriaLabel: string;\r\n\t@Prop() ctaPrimaryTarget: string;\r\n\t@Prop() isSpeedbump: boolean;\r\n\t@Prop() orientation: string = \"center-aligned\"; // left-aligned or center-aligned\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t<div class={`kdx-text-callout ${this.orientation}`}>\r\n\t\t\t<div class=\"container-fluid\">\r\n\t\t\t\t<div class=\"col-lg-8 offset-lg-2\">\r\n\r\n\t\t\t\t\t{Boolean(this.heading) && (\r\n\t\t\t\t\t\t<h2 class=\"kdx-text-callout__heading\">{ this.heading }</h2>\r\n\t\t\t\t\t)}\r\n\r\n\t\t\t\t\t<div class=\"kdx-text-callout__content\">\r\n\t\t\t\t\t\t<slot />\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t{Boolean(this.ctaPrimaryHref) && (\r\n\t\t\t\t\t\t<div class=\"kdx-text-callout__action\">\r\n\t\t\t\t\t\t\t<a class={`btn btn-primary ${this.isSpeedbump ? 'speedbump-link' : ''}`}\r\n\t\t\t\t\t\t\t\thref={this.ctaPrimaryHref}\r\n\t\t\t\t\t\t\t\ttarget={this.ctaPrimaryTarget}\r\n\t\t\t\t\t\t\t\taria-label={this.ctaPrimaryAriaLabel ?? this.ctaPrimaryText}>\r\n\t\t\t\t\t\t\t\t{ this.ctaPrimaryText }\r\n\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t)}\r\n\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t);\r\n\t}\r\n\r\n}\r\n"],"mappings":"2CAAA,MAAMA,EAAoB,q+C,MCObC,EAAc,M,2NAQI,gB,CAE9B,MAAAC,GACC,OACAC,EAAA,OAAKC,MAAO,oBAAoBC,KAAKC,eACpCH,EAAA,OAAKC,MAAM,mBACVD,EAAA,OAAKC,MAAM,wBAETG,QAAQF,KAAKG,UACbL,EAAA,MAAIC,MAAM,6BAA8BC,KAAKG,SAG9CL,EAAA,OAAKC,MAAM,6BACVD,EAAA,cAGAI,QAAQF,KAAKI,iBACbN,EAAA,OAAKC,MAAM,4BACVD,EAAA,KAAGC,MAAO,mBAAmBC,KAAKK,YAAc,iBAAmB,KAClEC,KAAMN,KAAKI,eACXG,OAAQP,KAAKQ,iBAAgB,aACjBR,KAAKS,qBAAuBT,KAAKU,gBAC3CV,KAAKU,mB"}