@skhemata/skhemata-crowdfunding-campaign/dist/src/campaignFaq.js

Skhemata Crowdfunding Campaign Web Component. This web component provides crowdfunding campaign functionality (reward/donation based) for a website.

import { __decorate } from "tslib";
/* eslint-disable prefer-template */
/* eslint-disable prefer-arrow-callback */
/* eslint-disable prefer-const */
/* eslint-disable no-restricted-syntax */
import { html, css, SkhemataBase, property, } from '@skhemata/skhemata-base';
export class campaignFaq extends SkhemataBase {
    static get styles() {
        return [
            ...super.styles,
            css `
        .faq-question {
          background-color: #eee;
          color: #444;
          cursor: pointer;
          padding: 15px;
          width: 100%;
          text-align: left;
          border: none;
          outline: none;
          transition: 0.3s;
          border-radius: 5px;
          margin-top: 5px;
        }
        .faq-answer {
          padding: 0 15px;
          background-color: #fff;
          max-height: 0px;
          overflow: hidden;
          transition: max-height 0.3s ease-out;
        }
      `,
        ];
    }
    async firstUpdated() {
        this.faqQuestionListener();
    }
    updated() {
        if (this.campaignFaq === undefined) {
            this.getFaq();
        }
    }
    render() {
        return html `
      <div class="columns">
        <div class="faq-container column">${this.campaignFaq}</div>
      </div>
    `;
    }
    getFaq() {
        if (this.campaign && this.campaign.faqs) {
            for (let key in this.campaign.faqs) {
                if (this.campaign.faqs && this.campaign.faqs[key].disabled === false) {
                    this.campaignFaq = html `<div class="faq-title">
            <div class="faq-name">${this.campaign.faqs[key].name}</div>
            <div class="faq-description">
              ${this.campaign.faqs[key].description}
            </div>
          </div>`;
                    for (let index in this.campaign.faqs[key].faq_pairs) {
                        if (this.campaign.faqs[key].faq_pairs &&
                            this.campaign.faqs[key].faq_pairs[index].disabled === false) {
                            this.campaignFaq = html `${this.campaignFaq}
                <div class="faq-pair">
                  <div class="faq-question">
                    ${this.campaign.faqs[key].faq_pairs[index].question}
                  </div>
                  <div class="faq-answer">
                    ${this.campaign.faqs[key].faq_pairs[index].answer}
                  </div>
                </div>`;
                        }
                    }
                    this.campaignFaq = html `<div class="faq-group">
            ${this.campaignFaq}
          </div>`;
                }
            }
            this.campaignFaq = html `<div class="faq-container">
        ${this.campaignFaq}
      </div>`;
        }
    }
    faqQuestionListener() {
        var _a;
        const faqPair = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.faq-container');
        if (faqPair) {
            faqPair.addEventListener('click', function (event) {
                let question = event.target;
                if (question.classList.contains('faq-question')) {
                    let answer = question.nextElementSibling;
                    question.classList.toggle('active');
                    if (answer.style.maxHeight) {
                        answer.style.maxHeight = null;
                    }
                    else {
                        answer.style.maxHeight = answer.scrollHeight + 'px';
                    }
                }
            });
        }
    }
}
__decorate([
    property({ type: Object, attribute: 'campaign' })
], campaignFaq.prototype, "campaign", void 0);
__decorate([
    property({ type: String })
], campaignFaq.prototype, "campaignFaq", void 0);
//# sourceMappingURL=campaignFaq.js.map