{"version":3,"names":["kdxFeaturedArticlesCss","StFeaturedArticles","guid","componentWillLoad","desktopContent","this","hostElement","querySelector","mobileContentCopy","innerHTML","render","h","class","id"],"sources":["src/layouts/kdx-featured-articles/kdx-featured-articles.scss?tag=kdx-featured-articles","src/layouts/kdx-featured-articles/kdx-featured-articles.tsx"],"sourcesContent":[".kdx-featured-articles {\r\n\tpadding: 20px 0 0;\r\n\tposition: relative;\r\n  .pb-4 {\r\n      padding-bottom: 0!important;\r\n  }\r\n\t.layout-links {\r\n\t\tdisplay: block;\r\n\t\ttext-align: center;\r\n\t\tmargin-top: 40px;\r\n\t\tz-index: 3;\r\n\t\tposition: relative;\r\n\r\n\t\ta {\r\n\t\t\tmargin: 0 20px 0 0;\t\t\r\n\t\t}\t\t\r\n\t}\r\n\r\n\t.featured-articles {\r\n\t\tposition: relative;\t\t\r\n\t}\t\r\n\t.kdx-carousel {\r\n        \r\n\t\t.kdx-card { \r\n\t\t\tborder: none;\r\n\t\t\tbox-shadow: 0 8px 46px rgba(0, 0, 0, .02);\r\n\t\t\tpadding: 5px; \r\n\t\t}\r\n        &.only-1-item {\r\n            .kdx-hero-slide-item {\r\n                .hero-content { padding-bottom: 24px; }\r\n            }\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-featured-articles {\r\n\r\n\t\t.featured-articles {\r\n\t\t\tmargin: 0;\r\n\t\t\tpadding: 0;\r\n\t\t\twidth: 100%;\r\n\t\t}\r\n\t\t.kdx-carousel {\r\n\t\t\t\r\n\t\t\t&.-cards-slider {\r\n\t\t\t\twidth: 100%;\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t.controls button {\r\n\t\t\t\t\tleft: 8px;\r\n\r\n\t\t\t\t\t&.right-btn {\r\n\t\t\t\t\t\tleft: auto;\r\n\t\t\t\t\t\tright: 8px;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\t\t\r\n\t}\r\n}\r\n\r\n\r\n\r\n\r\n\r\n@include media-breakpoint-down(sm) {\r\n\t.kdx-featured-articles {\r\n\t\t\r\n\t\t.featured-articles {\r\n\t\t\tmargin: 0;\r\n\t\t\tpadding: 0;\r\n\t\t\twidth: 100%;\r\n\t\t}\t\t\t\r\n\t\t.layout-links {\r\n\t\t\tdisplay: block;\r\n\r\n\t\t\ta { width: 85%; }\r\n\t\t}\r\n\t\t.kdx-carousel {\r\n\t\t\t&.-cards-slider {\t\r\n\t\t\t\t\r\n\t\t\t\t&::before, &::after {\r\n\t\t\t\t\tcontent: '';\r\n\t\t\t\t\tposition: absolute;\r\n\t\t\t\t\ttop: 0;\r\n\t\t\t\t\twidth: 65px;\r\n\t\t\t\t\theight: 100%;\r\n\t\t\t\t\tz-index: 2;\r\n\t\t\t\t}\r\n\t\t\t\t&::before { \r\n\t\t\t\t\tleft: 0; \r\n\t\t\t\t\tbackground: transparent linear-gradient(270deg, #FFFFFF00 0%, #FFFFFFA1 33%, #FFF 100%) 0% 0% no-repeat padding-box;\r\n\t\t\t\t}\r\n\t\t\t\t&::after { \r\n\t\t\t\t\tright: 0; \r\n\t\t\t\t\tbackground: transparent linear-gradient(90deg, #FFFFFF00 0%, #FFFFFFA1 33%, #FFF 100%) 0% 0% no-repeat padding-box;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t}\r\n\t\t}\r\n\t\t.kdx-card .card-img-top { min-height: 227px; }\r\n\t}\r\n}\r\n","import { Component, h, ComponentInterface, State, Element } from '@stencil/core';\r\nimport { HTMLStencilElement } from '@stencil/core/internal';\r\nimport { guid } from 'utils';\r\n\r\n@Component({\r\n\ttag: 'kdx-featured-articles',\r\n\tstyleUrl: 'kdx-featured-articles.scss'\r\n})\r\nexport class StFeaturedArticles implements ComponentInterface {\r\n\r\n\t@State() guid: string = guid();\r\n\t@State() mobileContentCopy: string = '';\r\n\r\n\t@Element() hostElement: HTMLStencilElement;\r\n\r\n\tcomponentWillLoad() {\r\n\t\tconst desktopContent = this.hostElement.querySelector('.layout-links');\r\n\r\n\t\tif (desktopContent) {\r\n\t\t\tthis.mobileContentCopy = desktopContent.innerHTML;\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t<section class=\"kdx-featured-articles\" id={`kdx-featured-article-${this.guid}`} aria-label=\"featured articles\">\r\n\t\t\t<slot />\r\n\t\t</section>\r\n\t\t);\r\n\t}\r\n}"],"mappings":"sFAAA,MAAMA,EAAyB,g1E,MCQlBC,EAAkB,M,mCAENC,I,uBACa,E,CAIrC,iBAAAC,GACC,MAAMC,EAAiBC,KAAKC,YAAYC,cAAc,iBAEtD,GAAIH,EAAgB,CACnBC,KAAKG,kBAAoBJ,EAAeK,S,EAI1C,MAAAC,GACC,OACAC,EAAA,WAASC,MAAM,wBAAwBC,GAAI,wBAAwBR,KAAKH,OAAM,aAAa,qBAC1FS,EAAA,a"}