{"version":3,"names":["kdxBasicCtaCss","StBasicCta","constructor","hostRef","this","getClasses","classStr","orientation","toLowerCase","guid","videoSrc","videoHost","componentWillLoad","getLinks","ctaPrimarySpeedbump","ctaPrimaryTarget","ctaPrimaryRel","ctaSecondarySpeedbump","ctaSecondaryTarget","ctaSecondaryRel","componentDidRender","globalThis","imageLoader","initialize","links","ctaPrimaryText","push","value","href","ctaPrimaryHref","icon","ctaPrimaryIcon","target","ctaSecondaryText","ctaSecondaryHref","ctaSecondaryIcon","render","h","class","themeOption","id","sectionLabel","imgSrc","style","backgroundImage","role","width","height","frameborder","allow","allowFullScreen","ctaPrimaryAriaLabel","rel","label","ctaSecondaryAriaLabel"],"sources":["src/components/ctas/kdx-basic-cta/kdx-basic-cta.scss?tag=kdx-basic-cta","src/components/ctas/kdx-basic-cta/kdx-basic-cta.tsx"],"sourcesContent":[".kdx-basic-cta {\r\n  margin: 0;\r\n  padding: 20px 0;\r\n\r\n  &__right {\r\n\r\n    .row {\r\n      flex-direction: row-reverse;\r\n    }\r\n\r\n    .cta-media {\r\n      padding-right: 0;\r\n      padding-left: 48px;\r\n    }\r\n  }\r\n\r\n  [class^='col'] {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n  }\r\n\r\n  .cta-media {\r\n    position: relative;\r\n    padding-right: 48px;\r\n\r\n    .img {\r\n      background-size: contain;\r\n      background-repeat: no-repeat;\r\n      background-position: center;\r\n      height: 100%;\r\n      width: 100%;\r\n    }\r\n\r\n    .play-icon {\r\n      background: $basic_cta_play_btn_color;\r\n      border-radius: 10px;\r\n      width: 85px;\r\n      height: 65px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n  }\r\n\r\n  h2 {\r\n    position: relative;\r\n    padding-bottom: 16px;\r\n    margin: 0 0 24px 0;\r\n\r\n    &::after {\r\n      content: '';\r\n      background: $basic_cta_theme1_heading_border;\r\n      width: 100%;\r\n      height: 4px;\r\n      max-width: 65px;\r\n      position: absolute;\r\n      top: 100%;\r\n      left: 0;\r\n    }\r\n  }\r\n\r\n  .img {\r\n    min-height: 445px;\r\n    height: 100%;\r\n    width: 100%;\r\n  }\r\n\r\n  .ctas {\r\n    margin: 20px 0 0 0;\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    button, a, .arrow-link {\r\n      margin: 0 24px 10px 0;\r\n\r\n      &:last-child {\r\n        margin-right: 0;\r\n      }\r\n    }\r\n  }\r\n  // white background theme\r\n  &.cta-theme-1 {\r\n    background-color: #FFF;\r\n\r\n    .cta-media {\r\n\r\n      .img {\r\n        width: 100%;\r\n        max-height: 640px;\r\n      }\r\n    }\r\n\r\n    .ctas {\r\n\r\n      .arrow-link {\r\n        color: $basic_cta_theme1_arrow_link;\r\n\r\n        &:hover, &:focus {\r\n          color: #000;\r\n        }\r\n      }\r\n    }\r\n  }\r\n  // colored background theme\r\n  &.cta-theme-2 {\r\n    font-weight: 600;\r\n    background: $basic_cta_bg;\r\n    color: $basic_cta_text_color;\r\n\r\n    .cta-media {\r\n\r\n      kdx-video-embed, .video-embed, .video-embed-btn, .img {\r\n        height: 100%;\r\n      }\r\n    }\r\n\r\n    .cta-content {\r\n      padding-top: 100px;\r\n      padding-bottom: 100px;\r\n    }\r\n\r\n    h2 {\r\n      color: $basic_cta_text_color;\r\n\r\n      &::after {\r\n        background: $basic_cta_theme2_heading_border;\r\n      }\r\n    }\r\n\r\n    a:not(.btn) {\r\n      color: $basic_cta_text_color;\r\n    }\r\n\r\n    ul:not(.list-unstyled):not(.no-checkmarks) li::before {\r\n      background-color: transparent;\r\n    }\r\n\r\n    .ctas {\r\n      .btn-primary {\r\n        background: #FFF;\r\n        border: 1px solid #FFF;\r\n        color: $basic_cta_theme2_mainBtn_Text;\r\n        box-shadow: $basic_cta_theme2_btn_shadow;\r\n\r\n        &:hover, &:focus {\r\n          background-color: $basic_cta_theme2_mainBtn_hover;\r\n          border-color: $basic_cta_theme2_mainBtn_hover;\r\n          color: $basic_cta_theme2_mainBtn_hover_text;\r\n        }\r\n      }\r\n\r\n      .arrow-link {\r\n        color: $basic_cta_theme2_arrow_link;\r\n\r\n        &:hover, &:focus {\r\n          color: $basic_cta_theme2_arrow_link-hover;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n\r\n@include media-breakpoint-down(lg) {\r\n\t.kdx-basic-cta {\r\n\t\t.cta-media {\r\n\t\t\t.img {\r\n\t\t\t\tbackground-position: 50% 20%;\r\n        min-height: 300px;\r\n        background-size: cover;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n\r\n\r\n\r\n\r\n@include media-breakpoint-down(md) {\r\n\t.kdx-basic-cta {\r\n\t\tmargin: 24px 0;\t\t\r\n\t\t@include text-size(14);\r\n\t\t@include line-height(22);\t\t\t\t\r\n\r\n\t\t&__right {\r\n\t\t\r\n\t\t\t.row {\t\t\r\n\t\t\t\tflex-direction: column;\r\n\t\t\t}\t\t\t\r\n\t\t}\r\n\t\t.img {\r\n\t\t\theight: 300px;\r\n\t\t\tmin-height: initial;\r\n\t\t}\r\n\t\t.cta-content { padding: 24px 30px; }\r\n\t\t.cta-media { \r\n\t\t\tpadding: 0 30px; \r\n\t\t}\r\n\t\t.ctas {\r\n\t\t\tflex-direction: column;\r\n\t\t}\r\n\t\t// white bg theme\r\n\t\t&.cta-theme-1 {\r\n\r\n\t\t\t.cta-media {\r\n\t\t\t\t.img { height: 300px; }\r\n\t\t\t}\r\n\t\t}\t\t\t\t\r\n\t\t// colored background theme\r\n\t\t&.cta-theme-2 {\r\n\t\t\tpadding: 24px 0 8px 0;\r\n\t\t\tbackground: $basic_cta_mobile_bg;\t\t\t\t\t\r\n\t\t\t\r\n\t\t\t.cta-media {\r\n\t\t\t\t.img { height: 300px; }\r\n\t\t\t}\t\t\t\r\n\t\t\t.cta-content { padding: 24px 30px; }\r\n\t\t}\r\n\t}\r\n}\r\n\r\n\r\n\r\n@include media-breakpoint-down(sm) {\r\n\t.kdx-basic-cta {\r\n\t\t\r\n\t\t.img {\r\n\t\t\theight: 251px;\r\n\t\t\tmin-height: initial;\r\n\t\t}\r\n\t\t.ctas {\t\t\r\n\r\n\t\t\t.btn { width: 80%; }\r\n\t\t}\r\n\t\t// white bg theme\r\n\t\t&.cta-theme-1 {\r\n\r\n\t\t\t.cta-media {\r\n\t\t\t\t.img { height: 251px; }\r\n\t\t\t}\r\n\t\t}\t\t\t\t\r\n\t\t// colored background theme\r\n\t\t&.cta-theme-2 {\r\n\t\t\t\r\n\t\t\t.cta-media {\r\n\t\t\t\t.img { height: 251px; }\r\n\t\t\t}\t\t\t\r\n\t\t}\t\t\r\n\t}\r\n}\r\n","import { Component, h, ComponentInterface, State, Prop, Element } from '@stencil/core';\r\nimport { guid, _COLORS_ } from 'utils';\r\n\r\n\r\n@Component({\r\n\ttag: 'kdx-basic-cta',\r\n\tstyleUrl: 'kdx-basic-cta.scss',\r\n\tshadow: false\r\n})\r\nexport class StBasicCta implements ComponentInterface {\r\n\r\n\t@Element() root: HTMLElement;\r\n\r\n\t@State() guid: string = guid();\r\n\t@State() classStr: string = 'kdx-basic-cta';\r\n\t@State() links: Array<any> = [];\r\n\r\n\t@Prop() orientation: string = 'left';\r\n\t@Prop() themeOption: string = 'cta-theme-1'; // cta-theme-1 (white bg) or cta-theme-2 (colored bg)\r\n\t@Prop() sectionLabel: string;\r\n\t@Prop() imgSrc: string;\r\n\t@Prop() imgAlt: string;\r\n\t@Prop() videoSrc: string;\r\n\t@Prop() videoHost: string = 'youtube';\r\n\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() ctaPrimaryIcon: string;\r\n\t@Prop() ctaPrimarySpeedbump: boolean = false;\r\n\r\n\t@Prop({\r\n\t\tmutable: true,\r\n\t\treflect: true\r\n\t}) ctaPrimaryRel: string;\r\n\r\n\t@Prop() ctaSecondaryText: string;\r\n\t@Prop() ctaSecondaryHref: string;\r\n\t@Prop() ctaSecondaryAriaLabel: string;\r\n\t@Prop() ctaSecondaryTarget: string;\r\n\t@Prop() ctaSecondaryIcon: string;\r\n\t@Prop() ctaSecondarySpeedbump: boolean = false;\r\n\r\n\t@Prop({\r\n\t\tmutable: true,\r\n\t\treflect: true\r\n\t}) ctaSecondaryRel: string;\r\n\r\n\tconstructor() {\r\n\t\tif (this.videoSrc) {\r\n\t\t\tswitch (this.videoHost) {\r\n\t\t\t\tcase 'youtube': {\r\n\t\t\t\t\tthis.videoSrc += '?modestbranding=1&autohide=1&autoplay=0';\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentWillLoad() {\r\n\t\tthis.getLinks();\r\n\r\n\t\t// set rel if component link targets are new window\r\n\t\tif (this.ctaPrimarySpeedbump || (this.ctaPrimaryTarget && this.ctaPrimaryTarget.toLowerCase() === '_blank')) {\r\n\t\t\tthis.ctaPrimaryRel = 'noopener';\r\n\t\t}\r\n\r\n\t\tif (this.ctaSecondarySpeedbump || (this.ctaSecondaryTarget && this.ctaSecondaryTarget.toLowerCase() === '_blank')) {\r\n\t\t\tthis.ctaSecondaryRel = 'noopener';\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentDidRender() {\r\n\t\tglobalThis.imageLoader?.initialize();\r\n\t}\r\n\r\n\tprivate getClasses = () => {\r\n\t\tlet classStr = `${this.classStr}`;\r\n\r\n\t\tif (this.orientation.toLowerCase() === 'right') {\r\n\t\t\treturn (`${classStr} ${classStr}__right`);\r\n\t\t}\r\n\r\n\t\treturn classStr;\r\n\t}\r\n\r\n\tprivate getLinks() {\r\n\t\tconst links = [];\r\n\r\n\t\tif (this.ctaPrimaryText != null) {\r\n\t\t\tlinks.push({\r\n\t\t\t\tvalue: this.ctaPrimaryText,\r\n\t\t\t\thref: this.ctaPrimaryHref,\r\n\t\t\t\ticon: this.ctaPrimaryIcon,\r\n\t\t\t\ttarget: this.ctaPrimaryTarget\r\n\t\t\t});\r\n\t\t}\r\n\r\n\t\tif (this.ctaSecondaryText != null) {\r\n\t\t\tlinks.push({\r\n\t\t\t\tvalue: this.ctaSecondaryText,\r\n\t\t\t\thref: this.ctaSecondaryHref,\r\n\t\t\t\ticon: this.ctaSecondaryIcon,\r\n\t\t\t\ttarget: this.ctaSecondaryTarget\r\n\t\t\t});\r\n\t\t}\r\n\r\n\t\tthis.links = links;\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t<section class={`${this.getClasses()} ${this.themeOption}`} id={`kdx-basic-cta-${this.guid}`} aria-label={this.sectionLabel}>\r\n\t\t\t\t<div class=\"container-fluid\">\r\n\t\t\t\t\t<div class=\"row\">\r\n\t\t\t\t\t\t{/** Render the IMAGE */}\r\n\t\t\t\t\t\t{(this.imgSrc && !this.videoSrc) &&\r\n\t\t\t\t\t\t\t<div class=\"col-lg-6 cta-media\">\r\n\t\t\t\t\t\t\t\t<div class=\"img lazy-load-bg\" style={{ backgroundImage: `url('${this.imgSrc}')`}}  role=\"presentation\"></div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t}\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t{(this.videoSrc) &&\r\n\t\t\t\t\t\t\t<div class=\"col-lg-6 cta-media\">\r\n\t\t\t\t\t\t\t\t<kdx-video-embed\r\n\t\t\t\t\t\t\t\t\timg-src={this.imgSrc}\r\n\t\t\t\t\t\t\t\t\tmodal-id={`video-lightbox`}\r\n\t\t\t\t\t\t\t\t\timg-alt=\"fancy placeholder video thumbnail\"\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<iframe\r\n\t\t\t\t\t\t\t\t\t\twidth=\"768\"\r\n\t\t\t\t\t\t\t\t\t\theight=\"432\"\r\n\t\t\t\t\t\t\t\t\t\tdata-src={this.videoSrc}\r\n\t\t\t\t\t\t\t\t\t\tframeborder=\"0\"\r\n\t\t\t\t\t\t\t\t\t\tallow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\r\n\t\t\t\t\t\t\t\t\t\tallowFullScreen>\r\n\t\t\t\t\t\t\t\t\t</iframe>\r\n\t\t\t\t\t\t\t\t</kdx-video-embed>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t<div class=\"col-lg-6 cta-content\">\r\n\t\t\t\t\t\t\t<article class=\"cta-content-inner\" aria-label={`cta content for ${this.sectionLabel}`}>\r\n\t\t\t\t\t\t\t\t<slot />\r\n\r\n\t\t\t\t\t\t\t\t{(this.ctaPrimaryHref || this.ctaSecondaryHref) &&(\r\n\t\t\t\t\t\t\t\t\t<div class=\"ctas\">\r\n\t\t\t\t\t\t\t\t\t\t{(this.ctaPrimaryHref) && (\r\n\t\t\t\t\t\t\t\t\t\t\t<a\r\n\t\t\t\t\t\t\t\t\t\t\t\thref={this.ctaPrimaryHref}\r\n\t\t\t\t\t\t\t\t\t\t\t\tid={`cta-1-${this.guid}`}\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass={`btn btn-primary ${this.ctaPrimarySpeedbump ? ' speedbump-link' : ''}`}\r\n\t\t\t\t\t\t\t\t\t\t\t\taria-label={this.ctaPrimaryAriaLabel}\r\n\t\t\t\t\t\t\t\t\t\t\t\ttarget={this.ctaPrimaryTarget}\r\n\t\t\t\t\t\t\t\t\t\t\t\trel={this.ctaPrimaryRel}>\r\n\t\t\t\t\t\t\t\t\t\t\t\t{this.ctaPrimaryText}{(this.ctaPrimaryIcon) && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"svg-icon\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<kdx-icon icon={this.ctaPrimaryIcon} />\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t\t\t\t\t)}\r\n\r\n\t\t\t\t\t\t\t\t\t\t{(this.ctaSecondaryHref) && (\r\n\t\t\t\t\t\t\t\t\t\t\t<kdx-arrow-link\r\n\t\t\t\t\t\t\t\t\t\t\t\thref={this.ctaSecondaryHref}\r\n\t\t\t\t\t\t\t\t\t\t\t\tlabel={this.ctaSecondaryAriaLabel}\r\n\t\t\t\t\t\t\t\t\t\t\t\ttarget={this.ctaSecondaryTarget}\r\n\t\t\t\t\t\t\t\t\t\t\t\tis-speedbump={this.ctaSecondarySpeedbump}\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t{this.ctaSecondaryText}\r\n\t\t\t\t\t\t\t\t\t\t\t</kdx-arrow-link>\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t</article>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</section>\r\n\t\t);\r\n\t}\r\n}\r\n"],"mappings":"sFAAA,MAAMA,EAAiB,uqI,MCSVC,EAAU,MAwCtB,WAAAC,CAAAC,G,UA2BQC,KAAAC,WAAa,KACpB,IAAIC,EAAW,GAAGF,KAAKE,WAEvB,GAAIF,KAAKG,YAAYC,gBAAkB,QAAS,CAC/C,SAAWF,KAAYA,U,CAGxB,OAAOA,CAAQ,E,UAtEQG,I,cACI,gB,WACC,G,iBAEC,O,iBACA,c,+GAKF,U,sLAOW,M,+NAYE,M,+BAQxC,GAAIL,KAAKM,SAAU,CAClB,OAAQN,KAAKO,WACZ,IAAK,UAAW,CACfP,KAAKM,UAAY,yC,IAMrB,iBAAAE,GACCR,KAAKS,WAGL,GAAIT,KAAKU,qBAAwBV,KAAKW,kBAAoBX,KAAKW,iBAAiBP,gBAAkB,SAAW,CAC5GJ,KAAKY,cAAgB,U,CAGtB,GAAIZ,KAAKa,uBAA0Bb,KAAKc,oBAAsBd,KAAKc,mBAAmBV,gBAAkB,SAAW,CAClHJ,KAAKe,gBAAkB,U,EAIzB,kBAAAC,GACCC,WAAWC,aAAaC,Y,CAajB,QAAAV,GACP,MAAMW,EAAQ,GAEd,GAAIpB,KAAKqB,gBAAkB,KAAM,CAChCD,EAAME,KAAK,CACVC,MAAOvB,KAAKqB,eACZG,KAAMxB,KAAKyB,eACXC,KAAM1B,KAAK2B,eACXC,OAAQ5B,KAAKW,kB,CAIf,GAAIX,KAAK6B,kBAAoB,KAAM,CAClCT,EAAME,KAAK,CACVC,MAAOvB,KAAK6B,iBACZL,KAAMxB,KAAK8B,iBACXJ,KAAM1B,KAAK+B,iBACXH,OAAQ5B,KAAKc,oB,CAIfd,KAAKoB,MAAQA,C,CAGd,MAAAY,GACC,OACCC,EAAA,WAASC,MAAO,GAAGlC,KAAKC,gBAAgBD,KAAKmC,cAAeC,GAAI,iBAAiBpC,KAAKK,OAAM,aAAcL,KAAKqC,cAC9GJ,EAAA,OAAKC,MAAM,mBACVD,EAAA,OAAKC,MAAM,OAERlC,KAAKsC,SAAWtC,KAAKM,UACtB2B,EAAA,OAAKC,MAAM,sBACVD,EAAA,OAAKC,MAAM,mBAAmBK,MAAO,CAAEC,gBAAiB,QAAQxC,KAAKsC,YAAcG,KAAK,kBAIxFzC,KAAa,UACdiC,EAAA,OAAKC,MAAM,sBACVD,EAAA,6BACUjC,KAAKsC,OAAM,WACV,iBAAgB,UAClB,qCAERL,EAAA,UACCS,MAAM,MACNC,OAAO,MAAK,WACF3C,KAAKM,SACfsC,YAAY,IACZC,MAAM,2FACNC,gBAAe,SAKnBb,EAAA,OAAKC,MAAM,wBACVD,EAAA,WAASC,MAAM,oBAAmB,aAAa,mBAAmBlC,KAAKqC,gBACtEJ,EAAA,cAEEjC,KAAKyB,gBAAkBzB,KAAK8B,mBAC7BG,EAAA,OAAKC,MAAM,QACRlC,KAAmB,gBACpBiC,EAAA,KACCT,KAAMxB,KAAKyB,eACXW,GAAI,SAASpC,KAAKK,OAClB6B,MAAO,mBAAmBlC,KAAKU,oBAAsB,kBAAoB,KAAI,aACjEV,KAAK+C,oBACjBnB,OAAQ5B,KAAKW,iBACbqC,IAAKhD,KAAKY,eACTZ,KAAKqB,eAAiBrB,KAAmB,gBACzCiC,EAAA,QAAMC,MAAM,YACXD,EAAA,YAAUP,KAAM1B,KAAK2B,mBAMvB3B,KAAqB,kBACtBiC,EAAA,kBACCT,KAAMxB,KAAK8B,iBACXmB,MAAOjD,KAAKkD,sBACZtB,OAAQ5B,KAAKc,mBAAkB,eACjBd,KAAKa,uBAElBb,KAAK6B,uB"}