{"version":3,"names":["faqItemCss","FaqItem","componentWillLoad","this","open","startOpen","faqId","faqTitle","replace","window","location","hash","toLowerCase","toggleFaq","closeOtherFaqs","faqs","document","querySelectorAll","forEach","faq","closeFaq","handleClick","handleKeyPress","event","key","preventDefault","async","render","h","class","id","role","tabIndex","onClick","onKeyPress","e","icon","useLargeZone"],"sources":["./src/components/faq-item/faq-item.scss?tag=kdx-faq","./src/components/faq-item/faq-item.tsx"],"sourcesContent":[".container.faq-container { \r\n  padding: 95px 0;\r\n   \r\n}\r\n.kdx-faq {\r\n  background-color: #FFFFFF;\r\n  color: $gray-dark;\r\n  box-shadow: 0px 6px 17px rgba(0, 61, 107, 0.1);\r\n  border-radius: 6px;\r\n  overflow: hidden;\r\n  margin: 15px 0;\r\n  transition: transform 350ms;\r\n\r\n    h3 {\r\n      margin: 0;\r\n      transition: all 350ms;\r\n      user-select: none;\r\n\r\n      .accordion-trigger {\r\n        width: 100%;\r\n        text-align: left;\r\n        display: flex;\r\n        flex-direction: row-reverse;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        border: none;\r\n        background-color: transparent;\r\n\r\n        .icon {\r\n          display: inline-block;\r\n          transition: transform 350ms;\r\n          margin-right: 10px;\r\n          height: 44px;\r\n          width: 44px;\r\n          border-radius: 50%;\r\n          background-color: #FFFFFF;\r\n          transform: translateY(0);\r\n          box-shadow: 0px 12px 22px rgba(45, 47, 59, 0.25);\r\n          transition: all linear 0.125s;\r\n          position: relative;\r\n\r\n          &:hover, &:focus {\r\n            background-color: $secondary;\r\n\r\n            svg { fill: #FFFFFF; }\r\n          }\r\n        }\r\n    \r\n        svg {\r\n          @include svg-format(21px, 14px, $secondary);\r\n          margin-top: 2px;\r\n          position: absolute;\r\n          left: 50%;\r\n          top: 50%;\r\n          transform: translate(-50%, -50%);\r\n        }\r\n\r\n        .accordion-title {\r\n          font-weight: 700;\r\n          color: currentColor;\r\n          width: calc(100% - 54px);\r\n          padding: 10px 16px 10px 20px;\r\n          @include text-size(20);\r\n        }\r\n    \r\n      }\r\n      \r\n    }\r\n    &:hover, &:focus {\r\n      background-color: $primary;\r\n      outline: none;\r\n      transform: translateY(-2px);\r\n      transition: all 0.3s ease-out;\r\n\r\n      .accordion-trigger {\r\n  \r\n        .accordion-title {\r\n          color: #FFFFFF;\r\n        }\r\n      }\r\n\r\n    }\r\n  \r\n    &.open {\r\n      \r\n      h3 {\r\n        \r\n        .accordion-trigger {\r\n\r\n          .accordion-title {\r\n            color: $gray-dark;\r\n          }\r\n        }\r\n      }\r\n\r\n      &:hover, &:focus {\r\n        background-color: #FFFFFF;\r\n        transform: translateY(0px);\r\n\r\n        h3 {\r\n          .accordion-trigger {\r\n            .icon {\r\n              &:hover, &:focus {\r\n  \r\n                svg { fill: #FFFFFF; }\r\n              }\r\n            }\r\n            .accordion-title {\r\n              color: $gray-dark;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n  .kdx-faq-content {\r\n    max-height: 0;\r\n    overflow: hidden;\r\n    transition: max-height 500ms;\r\n  }\r\n\r\n  .kdx-faq-content-inner {\r\n    padding: 0px 20px 30px 20px;\r\n\r\n    p {\r\n      padding-bottom: 0;\r\n\r\n      // Handle multiple p tags placed in faq content\r\n      & + p {\r\n        padding-top: 10px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.open {\r\n    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);\r\n\r\n    h3 {\r\n      color: $gray-dark;\r\n\r\n      .icon {\r\n        transform: rotate(180deg);\r\n        box-shadow: 0px -12px 17px rgba(45, 47, 59, 0.25);\r\n      }\r\n\r\n      &:hover, &:focus {\r\n        background: none;\r\n        color: $gray-dark;\r\n\r\n        .icon {\r\n          svg {\r\n            fill: $secondary;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    .kdx-faq-content {\r\n      max-height: 4000px;\r\n\t  \r\n\t  &.large-zone {\r\n\t\tmax-height: 20000px;\r\n\t  }\r\n    }\r\n  }\r\n}\r\n\r\n@include media-breakpoint-down(md) {\r\n  .container.faq-container {\r\n\r\n    padding: 95px 30px;\r\n  \r\n    .kdx-faq {\r\n      h3 {\r\n        @include text-size(16);\r\n  \r\n        .accordion-trigger {\r\n          .icon {\r\n            height: 28px;\r\n            width: 28px;\r\n          }\r\n        }\r\n  \r\n        svg {\r\n          @include svg-format(8px, 15px, $primary);\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { Component, h, Method, Prop, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kdx-faq',\r\n  styleUrl: 'faq-item.scss',\r\n  shadow: false,\r\n})\r\nexport class FaqItem {\r\n\r\n  @Prop() faqTitle: string;\r\n  @Prop() faqId: string;\r\n  @Prop() startOpen: boolean = false;\r\n  @Prop() useLargeZone: boolean = false;\r\n  @State() open: boolean = false;\r\n\r\n  componentWillLoad() {\r\n    this.open = this.startOpen;\r\n    // If not id is provided, generate one using the faq title.\r\n    if (!this.faqId) {\r\n      this.faqId = this.faqTitle.replace(/[^A-Z0-9]/ig, \"-\");\r\n    }\r\n\r\n    // If hash matches this faq, start it open.\r\n    if (window.location.hash && window.location.hash.toLowerCase() == '#' + this.faqId.toLowerCase()) {\r\n      this.open = true;\r\n    }\r\n  }\r\n\r\n  toggleFaq() {\r\n    this.closeOtherFaqs();\r\n    this.open = !this.open;\r\n  }\r\n\r\n  closeOtherFaqs() {\r\n    const faqs = document.querySelectorAll('kdx-faq');\r\n\r\n    faqs.forEach((faq) => {\r\n      if (faq.faqId != this.faqId) {\r\n        faq.closeFaq();\r\n      }\r\n    });\r\n  }\r\n\r\n  handleClick() {\r\n    this.toggleFaq();\r\n  }\r\n\r\n  handleKeyPress(event: KeyboardEvent){\r\n    if(event.key === 'Enter' || event.key === '') {\r\n      event.preventDefault();\r\n      this.toggleFaq();\r\n    }\r\n  }\r\n\r\n  @Method() async closeFaq() {\r\n    this.open = false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`kdx-faq ${this.open ? 'open' : ' '}`}>\r\n        <h3>\r\n          <button\r\n            class='accordion-trigger'\r\n            id={this.faqId}\r\n            aria-label={`View ${this.faqTitle}`}\r\n            aria-expanded={this.open ? 'true' : 'false'}\r\n            aria-controls={this.faqId}\r\n            role=\"button\"\r\n            tabIndex={0}\r\n            onClick={() => {this.handleClick()}}\r\n            onKeyPress={(e) => this.handleKeyPress(e)}>\r\n            \r\n            <kdx-icon class=\"icon\"  role='presentation' icon=\"chevron-down\" /> \r\n            <span class='accordion-title'>\r\n              {this.faqTitle}\r\n            </span>\r\n          </button>\r\n        </h3>\r\n\r\n        <div class={`kdx-faq-content ${this.useLargeZone ? 'large-zone' : ' '}`}  role='region'>\r\n          <div class=\"kdx-faq-content-inner accordion-panel\" id={`${this.faqId}section`} aria-labelledby={this.faqId}>\r\n            <slot />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n}\r\n"],"mappings":"2CAAA,MAAMA,EAAa,mxK,MCONC,EAAO,M,qFAIW,M,kBACG,M,UACP,K,CAEzBC,oBACEC,KAAKC,KAAOD,KAAKE,UAEjB,IAAKF,KAAKG,MAAO,CACfH,KAAKG,MAAQH,KAAKI,SAASC,QAAQ,cAAe,I,CAIpD,GAAIC,OAAOC,SAASC,MAAQF,OAAOC,SAASC,KAAKC,eAAiB,IAAMT,KAAKG,MAAMM,cAAe,CAChGT,KAAKC,KAAO,I,EAIhBS,YACEV,KAAKW,iBACLX,KAAKC,MAAQD,KAAKC,I,CAGpBU,iBACE,MAAMC,EAAOC,SAASC,iBAAiB,WAEvCF,EAAKG,SAASC,IACZ,GAAIA,EAAIb,OAASH,KAAKG,MAAO,CAC3Ba,EAAIC,U,KAKVC,cACElB,KAAKU,W,CAGPS,eAAeC,GACb,GAAGA,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,GAAI,CAC5CD,EAAME,iBACNtB,KAAKU,W,EAICa,iBACRvB,KAAKC,KAAO,K,CAGduB,SACE,OACEC,EAAA,OAAKC,MAAO,WAAW1B,KAAKC,KAAO,OAAS,OAC1CwB,EAAA,UACEA,EAAA,UACEC,MAAM,oBACNC,GAAI3B,KAAKG,MAAK,aACF,QAAQH,KAAKI,WAAU,gBACpBJ,KAAKC,KAAO,OAAS,QAAO,gBAC5BD,KAAKG,MACpByB,KAAK,SACLC,SAAU,EACVC,QAAS,KAAO9B,KAAKkB,aAAa,EAClCa,WAAaC,GAAMhC,KAAKmB,eAAea,IAEvCP,EAAA,YAAUC,MAAM,OAAQE,KAAK,eAAeK,KAAK,iBACjDR,EAAA,QAAMC,MAAM,mBACT1B,KAAKI,YAKZqB,EAAA,OAAKC,MAAO,mBAAmB1B,KAAKkC,aAAe,aAAe,MAAQN,KAAK,UAC7EH,EAAA,OAAKC,MAAM,wCAAwCC,GAAI,GAAG3B,KAAKG,eAAc,kBAAmBH,KAAKG,OACnGsB,EAAA,e"}