{"version":3,"names":["kdxSectionBgCss","StSectionBg","this","id","guid","instance","componentDidRender","animateIn","triggerAnimation","document","querySelector","window","addEventListener","isOnScreen","didAnimate","colCount","rows","querySelectorAll","forEach","row","i","children","length","setTimeout","classList","add","render","style","bgImage","backgroundImage","assetPath","h","class","color","animateContent","isFullBleed","classes","ariaLabel","bgRepeat"],"sources":["src/components/shared/kdx-section-bg/kdx-section-bg.scss?tag=kdx-section-bg","src/components/shared/kdx-section-bg/kdx-section-bg.tsx"],"sourcesContent":[".kdx-section-bg {\r\n\tbackground-color: $smBanner_bg;\t\t\r\n\tposition: relative;\t\r\n\r\n\t&.bg-primary {\r\n\t\tbackground: $smBanner_bg !important;\r\n\r\n\t\t* { color: $smBanner_text; }\r\n\t\t.text-white { color: $smBanner_text !important; }\r\n\t}\r\n\t&.bg-secondary {\r\n\t\tbackground: $secondary;\r\n\t}\r\n\r\n\t&.bg-tertiary {\r\n\t\tbackground: $tertiary;\r\n\t}\r\n\r\n\t&.bg-quarternary {\r\n\t\tbackground: $quarternary;\r\n\t}\r\n\r\n\t&.bg-quinary {\r\n\t  background: $quinary;\r\n\t}\r\n\r\n\t&.bg-senary {\r\n\t  background: $senary;\r\n\t}\r\n\r\n\t&.bg-gray-lite {\r\n\t  background: $gray-lite;\r\n\t}\r\n\r\n\t&.bg-gray-dark {\r\n\t  background: $gray-dark;\r\n\t}\r\n\r\n\t&.is-full-bleed {\r\n\t\tpadding-top: 0;\r\n\t\tpadding-bottom: 0;\r\n\r\n\t\t// the background image size will want to be\r\n\t\t// adjusted to only fill the remaining whitespace\r\n\t\tbackground-size: calc(100% - 41.6666666667%) !important;\r\n\t}\r\n\r\n\t&[bg-repeat] {\r\n\t\tbackground-size: auto 80%;\r\n\t\tbackground-repeat: repeat;\r\n\r\n\t\t&[bg-repeat=\"repeat-x\"] {\r\n\t\tbackground-repeat: repeat-x;\r\n\t\t}\r\n\r\n\t\t&[bg-repeat=\"repeat-y\"] {\r\n\t\tbackground-repeat: repeat-y;\r\n\t\t}\r\n\t}\r\n\t&.animate {\r\n\t\t.row > div {\r\n\t\t\topacity: 0;\r\n\t\t\ttransform: translateX(-20px);\r\n\t\t\ttransition: all 800ms;\r\n\t\r\n\t\t\t&.animate-in {\r\n\t\t\t\topacity: 1;\r\n\t\t\t\ttransform: translateX(0);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\t.small-banner{\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: row;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\tpadding: 40px 0 40px 100px;\r\n\t\t\r\n\t\t.bck-img{\r\n\t\t\tposition: absolute;\r\n\t\t\ttop: 0;\r\n\t\t\tleft: -30px;\r\n\t\t\twidth: auto;\r\n\t\t\theight: 100%;\r\n\r\n\t\t\timg { \r\n\t\t\t\theight: 100%; \r\n\t\t\t\tobject-fit: cover;\r\n\t\t\t}\r\n\t\t}\r\n\t\th2{\r\n\t\t\tposition: relative;\r\n\t\t\tmargin: 0 0 16px 0;\r\n\t\t\tpadding-bottom: 8px;\r\n\t\t\t@include text-size(30);\r\n\t\t\t@include line-height(32);\r\n\r\n\t\t\t&::after {\r\n\t\t\t\tcontent: '';\r\n\t\t\t\theight: 4px;\r\n\t\t\t\twidth: 100%;\r\n\t\t\t\tmax-width: 65px;\r\n\t\t\t\tposition: absolute;\r\n\t\t\t\ttop: 100%;\r\n\t\t\t\tleft: 0;\r\n\t\t\t\tbackground: $smBanner_headingBorder;\r\n\t\t\t}\r\n\t\t}\r\n\t\t.inner-text{\r\n\t\t\tflex: 3 0 0%;\r\n\t\t\tmargin: 0px 25px;\r\n\t\t\tpadding:0;\r\n\t\t\t@include text-size(16);\r\n\t\t\t@include line-height(30);\r\n\t\t\tfont-weight: 600;\r\n\t\t}\r\n\t\t.ctas {\r\n\t\t\ttext-align: center;\r\n\t\t\tdisplay: flex;\r\n\t\t\tflex-direction: column;\r\n\t\t\talign-items: center;\r\n\t\t\tjustify-content: center;\r\n\r\n\t\t\ta {\r\n\t\t\t\tdisplay: inline-block;\r\n\t\t\t\tmargin-bottom: 24px;\r\n\t\t\t\t\r\n\t\t\t\t&.btn-secondary {\r\n\t\t\t\t\tbackground-color: $smBanner_mainBtnBG;\r\n\t\t\t\t\tborder-color: $smBanner_mainBtnBG;\r\n\t\t\t\t\tcolor: $smBanner_mainBtnText;\r\n\t\t\r\n\t\t\t\t\t&:hover, &:focus {\r\n\t\t\t\t\t\tbackground-color: $smBanner_mainBtnHoverBG;\r\n\t\t\t\t\t\tborder-color: $smBanner_mainBtnHoverBG;\r\n\t\t\t\t\t\tcolor: $smBanner_mainBtnHoverText;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\t&.arrow-link {\r\n\t\t\t\t\tcolor: $smBanner_arrowLink;\r\n\r\n\t\t\t\t\tsvg { fill: $smBanner_arrowLink; }\r\n\r\n\t\t\t\t\t&:hover, &:focus {\r\n\t\t\t\t\t\tcolor: $smBanner_arrowLink_hover;\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\tsvg { fill: currentColor; }\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\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(lg) {\r\n\t.kdx-section-bg {\r\n\r\n\t\t&.bg-primary {\r\n\t\t\tbackground: $smBanner_mobile_bg !important;\r\n\t\t}\r\n\t\t.small-banner {\r\n\t\t\tdisplay: flex;\r\n\t\t\tflex-direction: column;\r\n\t\t\tjustify-content: center;\r\n\t\t\talign-items: center;\r\n\t\t\tpadding: 32px 0;\r\n\t\t\tmargin: 0;\r\n\r\n\t\t\t.col { padding: 0; }\r\n\t\t\th2 {\r\n\t\t\t\tpadding-bottom: 24px;\r\n\t\t\t\tmargin: 0 0 24px 0;\r\n\t\t\t\t@include text-size(25);\r\n\t\t\t\t@include line-height(30);\r\n\r\n\t\t\t\t&::after {\r\n\t\t\t\t\tleft: 50%;\r\n\t\t\t\t\ttransform: translateX(-50%);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\t.inner-text{\r\n\t\t\t\ttext-align: center;\r\n\t\t\t\tmargin: 0;\r\n\t\t\t\tflex: 1 1 auto;\r\n\t\t\t\t@include text-size(14);\r\n\t\t\t\t@include line-height(22);\r\n\t\t\t}\r\n\t\t\t.ctas {\r\n\t\t\t\tmargin-top: 24px;\r\n\t\t\t\tflex-direction: column;\r\n\t\t\t}\r\n\t\t}\r\n\t\t.bck-img{\r\n\t\t\tdisplay: none;\r\n\t\t}\r\n\r\n\t}\r\n}\r\n\r\n\r\n\r\n\r\n@include media-breakpoint-down(sm) {\r\n\t.kdx-section-bg {\r\n\r\n\t\t.small-banner {\r\n\r\n\t\t\t.ctas {\r\n\r\n\t\t\t\t.btn{\r\n\t\t\t\t\twidth: 85%;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}","import { Component, ComponentInterface, h, Prop } from '@stencil/core';\r\nimport { guid, isOnScreen } from 'utils';\r\n\r\ndeclare const assetPath;\r\n\r\n@Component({\r\n  tag: 'kdx-section-bg',\r\n  styleUrl: 'kdx-section-bg.scss',\r\n  shadow: false,\r\n})\r\nexport class StSectionBg implements ComponentInterface {\r\n\r\n\t/**\r\n\t * Background color for section. primary, secondary, tertiary, quarternary.\r\n\t */\r\n\t@Prop() color: string = 'primary';\r\n\r\n\t/**\r\n\t * Background image src for section. Overrides color.\r\n\t */\r\n\t@Prop() bgImage: string;\r\n\r\n\t@Prop() bgRepeat?: string;\r\n\r\n\t/**\r\n\t * Flag to enable fade in animation to section contents.\r\n\t */\r\n\t\t@Prop() animateContent: boolean;\r\n\t\t\r\n\t\t/**\r\n\t\t * Determines if the caption should extend to the edge of\r\n\t\t * the section area or not\r\n\t\t * \r\n\t\t * By default, standard gutter patting will be applied\r\n\t\t */\r\n\t\t@Prop() isFullBleed: boolean;\r\n\r\n\t/**\r\n\t * Aria label required for section elements\r\n\t */\r\n\t@Prop() ariaLabel: string;\r\n\r\n\t/**\r\n\t * Additional classes to append to the section wrapper\r\n\t */\r\n\t@Prop() classes?: string;\r\n\r\n\tprivate id: string = 'kdx-section-bg-' + guid();\r\n\tprivate instance: HTMLElement = null;\r\n\tprivate didAnimate: boolean;\r\n\r\n\tcomponentDidRender() {\r\n\t\tif (this.animateIn) {\r\n\t\t\tthis.triggerAnimation();\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Watch for section to come into view. Apply animations when it does.\r\n\t */\r\n\ttriggerAnimation() {\r\n\t\tthis.instance = document.querySelector(`#${this.id}`);\r\n\t\twindow.addEventListener('scroll', () => {\r\n\t\t\tif (isOnScreen(this.instance)) {\r\n\t\t\t\tthis.animateIn();\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\tif (isOnScreen(this.instance)) {\r\n\t\t\tthis.animateIn();\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Animate each column within a row in after each other.\r\n\t */\r\n\tanimateIn() {\r\n\t\tif (this.didAnimate) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tlet colCount = 0;\r\n\t\tconst rows = this.instance.querySelectorAll('.row');\r\n\r\n\t\trows.forEach((row) => {\r\n\t\t\tfor (let i = 0; i < row.children.length; i++) {\r\n\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\trow.children[i].classList.add('animate-in');\r\n\t\t\t\t}, 300 * colCount);\r\n\t\t\t\tcolCount += 1;\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\tthis.didAnimate = true;\r\n\t}\r\n\r\n\trender() {\r\n\t\tlet style = null;\r\n\r\n\t\tif (this.bgImage) {\r\n\t\tstyle = {\r\n\t\t\tbackgroundImage: `url(${assetPath}${this.bgImage})`,\r\n\t\t};\r\n\t\t}\r\n\r\n\t\treturn (\r\n\t\t\t<section \r\n\t\t\t\tid={this.id} \r\n\t\t\t\tclass={`\r\n\t\t\t\t\tkdx-section-bg \r\n\t\t\t\t\tbg-${this.color}\r\n\t\t\t\t\t${this.animateContent ? ' animate' : ''}\r\n\t\t\t\t\t${this.bgImage ? ' lazy-load-bg' : ''}\r\n\t\t\t\t\t${this.isFullBleed ? ' is-full-bleed' : ''}\r\n\t\t\t\t\t${this.classes ? ` ${this.classes}` : ''}`\r\n\t\t\t\t} \r\n\t\t\t\tstyle={style}\r\n\t\t\t\taria-label={this.ariaLabel}\r\n\t\t\t\tbg-repeat={this.bgRepeat}\r\n\t\t\t>\r\n\t\t\t\t<div class=\"container-fluid\">\r\n\t\t\t\t\t<slot />\r\n\t\t\t\t</div>\r\n\t\t\t</section>\r\n\t\t);\r\n\t}\r\n\r\n}\r\n"],"mappings":"sFAAA,MAAMA,EAAkB,2vI,MCUXC,EAAW,M,yBAqCfC,KAAAC,GAAa,kBAAoBC,IACjCF,KAAAG,SAAwB,K,WAjCR,U,wJAoCxB,kBAAAC,GACC,GAAIJ,KAAKK,UAAW,CACnBL,KAAKM,kB,EAOP,gBAAAA,GACCN,KAAKG,SAAWI,SAASC,cAAc,IAAIR,KAAKC,MAChDQ,OAAOC,iBAAiB,UAAU,KACjC,GAAIC,EAAWX,KAAKG,UAAW,CAC9BH,KAAKK,W,KAIP,GAAIM,EAAWX,KAAKG,UAAW,CAC9BH,KAAKK,W,EAOP,SAAAA,GACC,GAAIL,KAAKY,WAAY,CACpB,M,CAGD,IAAIC,EAAW,EACf,MAAMC,EAAOd,KAAKG,SAASY,iBAAiB,QAE5CD,EAAKE,SAASC,IACb,IAAK,IAAIC,EAAI,EAAGA,EAAID,EAAIE,SAASC,OAAQF,IAAK,CAC7CG,YAAW,KACVJ,EAAIE,SAASD,GAAGI,UAAUC,IAAI,aAAa,GACzC,IAAMV,GACTA,GAAY,C,KAIdb,KAAKY,WAAa,I,CAGnB,MAAAY,GACC,IAAIC,EAAQ,KAEZ,GAAIzB,KAAK0B,QAAS,CAClBD,EAAQ,CACPE,gBAAiB,OAAOC,YAAY5B,KAAK0B,W,CAI1C,OACCG,EAAA,WACC5B,GAAID,KAAKC,GACT6B,MAAO,6CAED9B,KAAK+B,oBACR/B,KAAKgC,eAAiB,WAAa,iBACnChC,KAAK0B,QAAU,gBAAkB,iBACjC1B,KAAKiC,YAAc,iBAAmB,iBACtCjC,KAAKkC,QAAU,IAAIlC,KAAKkC,UAAY,KAEvCT,MAAOA,EAAK,aACAzB,KAAKmC,UAAS,YACfnC,KAAKoC,UAEhBP,EAAA,OAAKC,MAAM,mBACVD,EAAA,c"}