{"version":3,"names":["faqItemCss","FaqItem","componentWillLoad","this","faqId","faqTitle","replace","window","location","hash","toLowerCase","open","toggleFaq","e","closeOtherFaqs","currentTarget","setAttribute","hoveredIn","target","closest","classList","add","hoveredOut","remove","faqs","document","querySelectorAll","forEach","faq","closeFaq","render","h","class","type","id","onClick","onKeyPress","key","onMouseEnter","onMouseLeave","onFocusin","onFocusout","icon","role"],"sources":["src/components/faq-item/faq-item.scss?tag=kdx-faq","src/components/faq-item/faq-item.tsx"],"sourcesContent":[".kdx-faq {\r\n\tbackground: $faqBackgroundColor;\r\n\tbox-shadow: $faqBoxShadow;\r\n\tborder-radius: 6px;\r\n\toverflow: hidden;\r\n\tmargin: 15px 0;\r\n\ttransition: transform 350ms;\r\n\t\t\r\n\t&:hover, &:focus, &.hover {\t\t\r\n\t\tbox-shadow: $faqBoxShadowHover;\r\n\t\t\r\n\t\t.accordion-trigger {\r\n\t\t\tcolor: $faqTitleHoverColor; \t\t\t\r\n\t\t}\r\n\t\t.icon {\r\n\t\t\ttransform: rotate(90deg);\r\n\t\t}\r\n\t}\r\n\t.accordion-trigger {\r\n\t\tpadding: 20px;\r\n\t\tmargin: 0;\r\n\t\twidth: 100%;\r\n\t\t@include text-size(18);\r\n\t\t@include line-height(24);\r\n\t\tfont-weight: 600;\r\n\t\ttext-align: left;\r\n\t\tcolor: $faqTitleColor;\r\n\t\tuser-select: none;\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\t\ttransition: all 350ms;\r\n\t\tbackground: none;\r\n\t\toutline: none;\r\n\t\tborder: none;\r\n\t\t\r\n\r\n\t\t.icon {\r\n\t\t\tdisplay: inline-block;\r\n\t\t\ttransition: transform 350ms;\r\n\t\t\tmargin-right: 10px;\r\n\t\t}\r\n\r\n\t\tsvg {\r\n\t\t\t@include svg-format(10px, 21px, currentColor);\r\n\t\t\ttransform: translateY(-2px);\r\n\t\t}\r\n\t}\r\n\r\n\t.kdx-faq-content {\r\n\t\tmax-height: 0;\r\n\t\toverflow: hidden;\r\n\t\ttransition: max-height 650ms;\r\n\t\t@include line-height(26);\r\n\t}\r\n\r\n\t.kdx-faq-content-inner {\r\n\t\tpadding: 0px 20px 30px 60px;\r\n\r\n\t\tp { padding-bottom: 20px; }\r\n\r\n\t\th4 { margin-bottom: 20px; }\r\n\r\n\t\tul li {\r\n\t\t\t&:last-child { padding-bottom: 10px !important; }\r\n\t\t}\r\n\t}\r\n\r\n\t&.open {\r\n\t\tcolor: $faqTitleHoverColor;\r\n\t\toutline: none;\r\n\t\tbox-shadow: $faqBoxShadowHover;\r\n\t\t\r\n\t\t.accordion-trigger {\r\n\t\t\tcolor: $faqTitleHoverColor;\r\n\r\n\t\t\t.icon {\r\n\t\t\t\ttransform: rotate(90deg);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t.kdx-faq-content {\r\n\t\t\tmax-height: 100%;\r\n\t\t}\r\n\t}\r\n\r\n\t&:hover {\r\n\t\ttransform: translateY(-5px);\r\n\t}\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-faq {\r\n\t\t.accordion-trigger {\t\t\t\r\n\t\t\t@include text-size(15);\r\n\t\t\t@include line-height(19);\r\n\t\t\tpadding: 18px 20px 18px 20px;\r\n\r\n\t\t\tsvg {\r\n\t\t\t\t@include svg-format(8px, 15px, currentColor);\r\n\t\t\t\ttransform: translateY(0px);\r\n\t\t\t}\r\n\t\t}\r\n\t\t\r\n\t\t.kdx-faq-content-inner {\r\n\t\t\tpadding: 0px 20px 20px 38px;\r\n\t\t}\r\n\t}\r\n}\r\n","import { Component, h, Method, Prop, State } from '@stencil/core';\r\n\r\n@Component({\r\n\ttag: 'kdx-faq',\r\n\tstyleUrl: 'faq-item.scss',\r\n\tshadow: false,\r\n})\r\nexport class FaqItem {\r\n\r\n\t@Prop() faqTitle: string;\r\n\t@Prop({mutable: true}) faqId: string;\r\n\t@State() open: boolean = false;\r\n\r\n\tcomponentWillLoad() {\r\n\t\t// If not id is provided, generate one using the faq title.\r\n\t\tif (!this.faqId) {\r\n\t\t\tthis.faqId = this.faqTitle.replace(/[^A-Z0-9]/ig, \"-\");\r\n\t\t}\r\n\r\n\t\t// If hash matches this faq, start it open.\r\n\t\tif (window.location.hash && window.location.hash.toLowerCase() == '#' + this.faqId.toLowerCase()) {\r\n\t\t\tthis.open = true;\r\n\t\t}\r\n\t}\r\n\r\n\ttoggleFaq(e) {\r\n\t\tthis.closeOtherFaqs();\r\n\t\tthis.open = !this.open;\r\n\t\te.currentTarget.setAttribute(\"aria-expanded\", \"true\");\r\n\t}\r\n\r\n\thoveredIn(e) {\r\n\t\te.target.closest('.kdx-faq').classList.add('hover');\r\n\t}\r\n\t\r\n\thoveredOut(e) {\r\n\t\te.target.closest('.kdx-faq').classList.remove('hover');\r\n\t}\r\n\r\n\tcloseOtherFaqs() {\r\n\t\tconst faqs = document.querySelectorAll('kdx-faq');\r\n\r\n\t\tfaqs.forEach((faq) => {\r\n\t\t\tif (faq.faqId != this.faqId) {\r\n\t\t\t\tfaq.closeFaq();\r\n\t\t\t\tfaq.setAttribute(\"aria-expanded\", \"false\");\r\n\t\t\t}\r\n\t\t});\r\n\t}\r\n\r\n\t@Method() async closeFaq() {\r\n\t\tthis.open = false;\t\t\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t<div class={`kdx-faq ${this.open ? 'open' : ''}`}>\r\n\t\t\t\t<h3>\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\tid={`accordion-trigger-${this.faqId}`}\r\n\t\t\t\t\t\tclass={`kdx-faq-title accordion-trigger`}\r\n\t\t\t\t\t\taria-expanded={this.open ? \"true\" : \"false\"}\r\n\t\t\t\t\t\taria-controls={`accordion-panel-${this.faqId}`}\r\n\t\t\t\t\t\tonClick={(e) => {this.toggleFaq(e)}}\r\n\t\t\t\t\t\tonKeyPress={(e) => e.key === 'Enter' ? this.toggleFaq(e) : null}\r\n\t\t\t\t\t\tonMouseEnter={this.hoveredIn}\r\n\t\t\t\t\t\tonMouseLeave={this.hoveredOut}\r\n\t\t\t\t\t\tonFocusin={this.hoveredIn}\r\n\t\t\t\t\t\tonFocusout={this.hoveredOut}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<span class=\"icon\">\r\n\t\t\t\t\t\t\t<kdx-icon icon=\"chevron-right\" /> \r\n\t\t\t\t\t\t</span>\r\n\r\n\t\t\t\t\t\t{ this.faqTitle }\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</h3>\r\n\r\n\t\t\t\t<div \r\n\t\t\t\t\tid={`accordion-panel-${this.faqId}`} \r\n\t\t\t\t\tclass=\"kdx-faq-content accordion-panel\" \r\n\t\t\t\t\trole=\"region\"\r\n\t\t\t\t\taria-labelledby={`accordion-trigger-${this.faqId}`}\r\n\t\t\t\t>\r\n\t\t\t\t\t<div class=\"kdx-faq-content-inner\">\r\n\t\t\t\t\t\t<slot />\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t);\r\n\t}\r\n\r\n}\r\n"],"mappings":"2CAAA,MAAMA,EAAa,4/E,MCONC,EAAO,M,gFAIM,K,CAEzB,iBAAAC,GAEC,IAAKC,KAAKC,MAAO,CAChBD,KAAKC,MAAQD,KAAKE,SAASC,QAAQ,cAAe,I,CAInD,GAAIC,OAAOC,SAASC,MAAQF,OAAOC,SAASC,KAAKC,eAAiB,IAAMP,KAAKC,MAAMM,cAAe,CACjGP,KAAKQ,KAAO,I,EAId,SAAAC,CAAUC,GACTV,KAAKW,iBACLX,KAAKQ,MAAQR,KAAKQ,KAClBE,EAAEE,cAAcC,aAAa,gBAAiB,O,CAG/C,SAAAC,CAAUJ,GACTA,EAAEK,OAAOC,QAAQ,YAAYC,UAAUC,IAAI,Q,CAG5C,UAAAC,CAAWT,GACVA,EAAEK,OAAOC,QAAQ,YAAYC,UAAUG,OAAO,Q,CAG/C,cAAAT,GACC,MAAMU,EAAOC,SAASC,iBAAiB,WAEvCF,EAAKG,SAASC,IACb,GAAIA,EAAIxB,OAASD,KAAKC,MAAO,CAC5BwB,EAAIC,WACJD,EAAIZ,aAAa,gBAAiB,Q,KAK3B,cAAMa,GACf1B,KAAKQ,KAAO,K,CAGb,MAAAmB,GACC,OACCC,EAAA,OAAKC,MAAO,WAAW7B,KAAKQ,KAAO,OAAS,MAC3CoB,EAAA,UACCA,EAAA,UACCE,KAAK,SACLC,GAAI,qBAAqB/B,KAAKC,QAC9B4B,MAAO,kCAAiC,gBACzB7B,KAAKQ,KAAO,OAAS,QAAO,gBAC5B,mBAAmBR,KAAKC,QACvC+B,QAAUtB,IAAOV,KAAKS,UAAUC,EAAE,EAClCuB,WAAavB,GAAMA,EAAEwB,MAAQ,QAAUlC,KAAKS,UAAUC,GAAK,KAC3DyB,aAAcnC,KAAKc,UACnBsB,aAAcpC,KAAKmB,WACnBkB,UAAWrC,KAAKc,UAChBwB,WAAYtC,KAAKmB,YAEjBS,EAAA,QAAMC,MAAM,QACXD,EAAA,YAAUW,KAAK,mBAGdvC,KAAKE,WAIT0B,EAAA,OACCG,GAAI,mBAAmB/B,KAAKC,QAC5B4B,MAAM,kCACNW,KAAK,SAAQ,kBACI,qBAAqBxC,KAAKC,SAE3C2B,EAAA,OAAKC,MAAM,yBACVD,EAAA,e"}