{"version":3,"names":["kdxCardLinkCss","StCardLink","guid","componentWillLoad","this","isSpeedbump","target","linkRel","maintainImageAspectRatio","img","root","querySelector","aspectRatio","AspectRatio","ratio","element","maintain","titleHoverIn","e","closest","classList","add","titleHoverOut","remove","render","h","label","class","componentScope","imgSrc","hideImgOnMobile","cardTitle","hLevel","href","rel","onMouseEnter","onMouseLeave","onFocusin","onFocusout","icon","linkIcon","linkText"],"sources":["src/components/cards/kdx-card-link/kdx-card-link.scss?tag=kdx-card-link","src/components/cards/kdx-card-link/kdx-card-link.tsx"],"sourcesContent":[".kdx-card-link {\r\n\tdisplay: block;\r\n\ttext-decoration: none;\r\n\tcolor: inherit;\r\n\t@include text-size(14);\r\n\t@include line-height(22);\r\n\t@include transitionDefault(color);\r\n\r\n\t.kdx-card {\r\n\t\theight: 100%;\r\n\r\n\t\t&.hover {\r\n\r\n\t\t\t.card-photo {\r\n\t\t\t\t&::before { opacity: .5; }\r\n\t\t\t}\r\n\t\t}\r\n\t\t.card-photo {\r\n\t\t\tposition: relative;\r\n\t\t\twidth: 100%;\r\n\r\n\t\t\timg {\r\n\t\t\t\twidth: 100%;\r\n\t\t\t\tobject-fit: cover;\r\n\t\t\t\tobject-position: center center;\r\n\t\t\t}\r\n\r\n\t\t\t&::before {\r\n\t\t\t\tcontent: '';\r\n\t\t\t\tbackground: $navCard_overlayBG;\r\n\t\t\t\tposition: absolute;\r\n\t\t\t\tz-index: 2;\r\n\t\t\t\ttop: 0;\r\n\t\t\t\tleft: 0;\r\n\t\t\t\twidth: 100%;\r\n\t\t\t\theight: 100%;\r\n\t\t\t\topacity: 0;\r\n\t\t\t\ttransition: opacity .3s ease-in-out;\r\n\t\t\t}\r\n        .photo {\r\n          height: 300px;\r\n        }\r\n\t\t}\r\n\t\t.card-body {\r\n\t\t\tposition: relative;\r\n\t\t\tpadding: 24px;\r\n\r\n\t\t\t&::before {\r\n\t\t\t\tcontent: '';\r\n\t\t\t\tposition: absolute;\r\n\t\t\t\tleft: 0;\r\n\t\t\t\ttop: 0;\r\n\t\t\t\theight: 3px;\r\n\t\t\t\twidth: 100%;\r\n\t\t\t\tbackground: $navCard_dividerColor;\r\n\t\t\t}\r\n\r\n\t\t\tp:last-of-type {\r\n\t\t\t\tpadding: 0;\r\n\t\t\t}\r\n\t\t\t.card-title {\r\n\t\t\t\t@include text-size(20);\r\n\t\t\t\t@include line-height(32);\r\n\t\t\t\tfont-weight: 700;\r\n\t\t\t\tpadding-bottom: 0;\r\n\r\n\t\t\t\t&::after { display: none; }\r\n\t\t\t\ta {\r\n\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\talign-items: center;\r\n\t\t\t\t\tjustify-content: space-between;\r\n\t\t\t\t\ttext-decoration: none;\r\n\r\n\t\t\t\t\t&:hover, &:focus {\r\n\t\t\t\t\t\ttext-decoration: underline;\r\n\t\t\t\t\t\toutline: none;\r\n\r\n\t\t\t\t\t\tsvg { transform: translateX(4px); }\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tsvg {\r\n\t\t\t\t\t\t@include svg-format(15px, 15px, currentColor);\r\n\t\t\t\t\t\ttransition: transform .3s ease-in-out;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t.card-footer {\r\n\t\t\tp {\r\n\t\t\t\tpadding: 0;\r\n\t\t\t}\r\n\r\n\t\t\t.svg-icon {\r\n\t\t\t\tmargin: 0 0 0 5px;\r\n\r\n\t\t\t\tsvg {\r\n\t\t\t\tfill: $gray-dark;\r\n\t\t\t\tmax-height: 10px;\r\n\t\t\t\tmax-width: 10px;\r\n\t\t\t\tmin-width: 10px;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\r\n\t.frontend-comp {\r\n\t\ttext-align: center;\r\n\r\n\t\timg { max-height: 400px; }\r\n\t}\r\n\r\n\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n@include media-breakpoint-down(md) {\r\n\t.kdx-card-link {\r\n\r\n\t\t.kdx-card {\r\n\t\t\t@include text-size(12);\r\n\t\t\t@include line-height(18);\r\n\r\n\t\t\t.card-body {\r\n\t\t\t\tpadding: 16px;\r\n\r\n\t\t\t\t.card-title {\r\n\t\t\t\t\t@include text-size(15);\r\n\t\t\t\t\t@include line-height(24);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t.card-footer {\r\n\t\t\t\tpadding: 5px 16px 16px;\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-card-link {\r\n\r\n\t\t.kdx-card {\r\n\r\n\t\t\t.card-photo {\r\n\t\t\t\t&.hide-on-mobile { display: none; }\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n","import { Component, h, ComponentInterface, State, Prop, Element } from '@stencil/core';\r\nimport { guid } from 'utils';\r\nimport { AspectRatio } from 'global/image-loader';\r\n\r\n@Component({\r\n\ttag: 'kdx-card-link',\r\n\tstyleUrl: 'kdx-card-link.scss',\r\n\tshadow: false\r\n})\r\nexport class StCardLink implements ComponentInterface {\r\n\r\n\t@Element() root: HTMLElement;\r\n\r\n\t@State() guid: string = guid();\r\n\r\n\t@Prop() imgSrc: string;\r\n\t@Prop() cardTitle: string;\r\n\t@Prop() hLevel: string = 'h2';\r\n\t@Prop() href: string = '#';\r\n\t@Prop() label: string;\r\n\t@Prop() linkText: string;\r\n\t@Prop() linkIcon: string = \"chevron-right\";\r\n\t@Prop() componentScope: string;\r\n\t@Prop() isSpeedbump: boolean = false;\r\n\t@Prop() hideImgOnMobile: boolean = false;\r\n\t@Prop({\r\n\t\tmutable: true,\r\n\t\treflect: true,\r\n\t}) target: string;\r\n\t@Prop({\r\n\t\tmutable: true,\r\n\t\treflect: true\r\n\t}) linkRel: string;\r\n\r\n\tcomponentWillLoad() {\r\n\t\tif (this.isSpeedbump) {\r\n\t\t\tthis.target = '_blank';\r\n\t\t\tthis.linkRel = 'noopener';\r\n\t\t}\r\n\t\tthis.maintainImageAspectRatio();\t\t\r\n\t}\r\n\r\n\tmaintainImageAspectRatio() {\r\n\t\tconst img: HTMLImageElement = this.root.querySelector('.card-photo img');\r\n\t\r\n\t\tif (img && img != null) {\r\n\t\t\tconst aspectRatio = new AspectRatio({\r\n\t\t\t\tratio: [275, 199], // Dimensions from design\r\n\t\t\t\telement: img\r\n\t\t\t});\r\n\t\t\r\n\t\t\taspectRatio.maintain();\r\n\t\t\t}\r\n\t}\r\n\r\n\ttitleHoverIn(e) {\r\n\t\te.target.closest('.kdx-card').classList.add('hover');\r\n\t}\r\n\r\n\ttitleHoverOut(e) {\r\n\t\te.target.closest('.kdx-card').classList.remove('hover');\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t<article aria-label={this.label} class={`kdx-card-link${this.componentScope ? ` ${this.componentScope}-card-link` : ''}${this.isSpeedbump ? ' speedbump-link' : ''}`}>\r\n\t\t\t\t<div class=\"kdx-card card\">\r\n\t\t\t\t\t{this.imgSrc &&\r\n\t\t\t\t\t\t<div class={`card-photo ${this.hideImgOnMobile ? \"hide-on-mobile\" : null}`}>\r\n\t\t\t\t\t\t\t<kdx-lazy-img css-class=\"photo\" img-src={this.imgSrc} img-alt={this.cardTitle}></kdx-lazy-img>\t\t\t\t\t\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t}\r\n\t\t\t\t\t<div class=\"card-body\">\r\n\t\t\t\t\t\t<this.hLevel class=\"card-title\">\r\n\t\t\t\t\t\t\t<a\r\n\t\t\t\t\t\t\t\tclass={`${this.isSpeedbump ? ' speedbump-link' : ''}`} \r\n\t\t\t\t\t\t\t\thref={this.href} \r\n\t\t\t\t\t\t\t\taria-label={this.label ? this.label : `More info on ${this.cardTitle}`}\r\n\t\t\t\t\t\t\t\ttarget={this.target}\r\n\t\t\t\t\t\t\t\trel={this.linkRel}\r\n\t\t\t\t\t\t\t\tonMouseEnter={this.titleHoverIn} \r\n\t\t\t\t\t\t\t\tonMouseLeave={this.titleHoverOut} \r\n\t\t\t\t\t\t\t\tonFocusin={this.titleHoverIn} \r\n\t\t\t\t\t\t\t\tonFocusout={this.titleHoverOut}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t{this.cardTitle}\r\n\t\t\t\t\t\t\t\t<kdx-icon icon={this.linkIcon}></kdx-icon>\r\n\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t</this.hLevel>\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t<slot />\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t{this.linkText &&\r\n\t\t\t\t\t\t<div class=\"card-footer\">\r\n\t\t\t\t\t\t\t<p>\r\n\t\t\t\t\t\t\t\t{this.linkText}\r\n\t\t\t\t\t\t\t\t{this.linkIcon\r\n\t\t\t\t\t\t\t\t\t?\r\n\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<kdx-icon icon={this.linkIcon} />\r\n\t\t\t\t\t\t\t\t\t\t</span> \r\n\t\t\t\t\t\t\t\t\t:\r\n\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<kdx-icon icon={this.linkIcon} />\r\n\t\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t}\r\n\t\t\t\t</div>\r\n\t\t\t</article>\r\n\t\t);\r\n\t}\r\n}"],"mappings":"qHAAA,MAAMA,EAAiB,2iG,MCSVC,EAAU,M,mCAIEC,I,2DAIC,K,UACF,I,2DAGI,gB,+CAEI,M,qBACI,M,6CAUnC,iBAAAC,GACC,GAAIC,KAAKC,YAAa,CACrBD,KAAKE,OAAS,SACdF,KAAKG,QAAU,U,CAEhBH,KAAKI,0B,CAGN,wBAAAA,GACC,MAAMC,EAAwBL,KAAKM,KAAKC,cAAc,mBAEtD,GAAIF,GAAOA,GAAO,KAAM,CACvB,MAAMG,EAAc,IAAIC,EAAY,CACnCC,MAAO,CAAC,IAAK,KACbC,QAASN,IAGVG,EAAYI,U,EAId,YAAAC,CAAaC,GACZA,EAAEZ,OAAOa,QAAQ,aAAaC,UAAUC,IAAI,Q,CAG7C,aAAAC,CAAcJ,GACbA,EAAEZ,OAAOa,QAAQ,aAAaC,UAAUG,OAAO,Q,CAGhD,MAAAC,GACC,OACCC,EAAA,wBAAqBrB,KAAKsB,MAAOC,MAAO,gBAAgBvB,KAAKwB,eAAiB,IAAIxB,KAAKwB,2BAA6B,KAAKxB,KAAKC,YAAc,kBAAoB,MAC/JoB,EAAA,OAAKE,MAAM,iBACTvB,KAAKyB,QACLJ,EAAA,OAAKE,MAAO,cAAcvB,KAAK0B,gBAAkB,iBAAmB,QACnEL,EAAA,4BAAwB,QAAO,UAAUrB,KAAKyB,OAAM,UAAWzB,KAAK2B,aAGtEN,EAAA,OAAKE,MAAM,aACVF,EAACrB,KAAK4B,OAAM,CAACL,MAAM,cAClBF,EAAA,KACCE,MAAO,GAAGvB,KAAKC,YAAc,kBAAoB,KACjD4B,KAAM7B,KAAK6B,KAAI,aACH7B,KAAKsB,MAAQtB,KAAKsB,MAAQ,gBAAgBtB,KAAK2B,YAC3DzB,OAAQF,KAAKE,OACb4B,IAAK9B,KAAKG,QACV4B,aAAc/B,KAAKa,aACnBmB,aAAchC,KAAKkB,cACnBe,UAAWjC,KAAKa,aAChBqB,WAAYlC,KAAKkB,eAEhBlB,KAAK2B,UACNN,EAAA,YAAUc,KAAMnC,KAAKoC,aAIvBf,EAAA,cAEArB,KAAKqC,UACLhB,EAAA,OAAKE,MAAM,eACVF,EAAA,SACErB,KAAKqC,SACLrC,KAAKoC,SAEJf,EAAA,QAAME,MAAM,YACXF,EAAA,YAAUc,KAAMnC,KAAKoC,YAGtBf,EAAA,QAAME,MAAM,YACXF,EAAA,YAAUc,KAAMnC,KAAKoC,e"}