@skhemata/skhemata-faq/dist/src/SkhemataFaq.js

Skhemata FAQ Web Component. This web component provides website FAQ functionality with question and answer style of FAQ.

import { __decorate } from "tslib";
/**
 *
 * Lit Faq parent component to handle routing
 *
 * */
import { SkhemataBase, property, html, css } from '@skhemata/skhemata-base';
// Import element dependencies
import { SkhemataFaqList } from './component/SkhemataFaqList';
import { SkhemataFaqPost } from './component/SkhemataFaqPost';
import { SkhemataFaqSearch } from './component/SkhemataFaqSearch';
import { SkhemataFaqCategories } from './component/SkhemataFaqCategories';
import { translationEngDefault } from './translation/SkhemataFaq/eng';
/**
 * Use the customElement decorator to define your class as
 * a custom element. Registers <my-element> as an HTML tag.
 */
export class SkhemataFaq extends SkhemataBase {
    constructor() {
        super();
        this.apiWordpress = {
            url: '',
        };
        this.faqPagePath = '';
        this.postsPerPage = 20;
        this.pagerType = "infinite";
        this.slug = '';
        this.translationData = {
            eng: translationEngDefault,
        };
        if (window.history.scrollRestoration) {
            window.history.scrollRestoration = 'manual';
        }
    }
    static get scopedElements() {
        return {
            'skhemata-faq-list': SkhemataFaqList,
            'skhemata-faq-post': SkhemataFaqPost,
            'skhemata-faq-search': SkhemataFaqSearch,
            'skhemata-faq-categories': SkhemataFaqCategories,
        };
    }
    static get styles() {
        return [
            ...super.styles,
            css `
        :host {
          display: block;
          padding: 25px 0;
          color: var(--skhemata-faq-text-color);
        }

        @media screen and (max-width: 430px) {
          :host {
            padding: 25px 20px;
          }
        }

        .mr {
          margin-right: 1.5rem;
        }

        .my {
          margin-top: 0.5rem;
          margin-bottom: 1.5rem;
        }

        .back-button {
          margin: 0 0 1em;
        }

        .columns {
          width: 100%;
          margin: 0px;
        }

        .columns.search,
        .columns.search .column {
          margin-top: 0px;
          margin-bottom: 0px;
          padding-top: 0px;
          padidng-bottom: 0px;
        }
      `,
        ];
    }
    handleNavigate(e) {
        this.slug = e.detail.slug || '';
        // const search = <SkhemataFaqSearch> this.shadowRoot.getElementById('search');
        // search.searchTerm = '';
    }
    handleGoBack() {
        this.slug = '';
        this.dispatchEvent(new CustomEvent('navigate', {
            detail: {
                slug: '',
            },
        }));
    }
    render() {
        return html `
      <div class="columns search">
        <div class="column">
          <skhemata-faq-search
            id="search"
            .faqPagePath=${this.faqPagePath}
            .translationData=${this.translationData}
          ></skhemata-faq-search>
        </div>
      </div>
      <div class="columns is-desktop">
        <div class="column is-three-quarters-desktop">
          ${this.slug
            ? html `
                <skhemata-faq-post
                  .apiWordpress=${this.apiWordpress}
                  .faqPagePath=${this.faqPagePath}
                  slug=${this.slug}
                  @navigate=${this.handleNavigate}
                  .translationData=${this.translationData}
                ></skhemata-faq-post>
              `
            : html `
                <skhemata-faq-list
                  .apiWordpress=${this.apiWordpress}
                  .faqPagePath=${this.faqPagePath}
                  .postsPerPage=${this.postsPerPage}
                  .pagerType=${this.pagerType}
                  @navigate=${this.handleNavigate}
                  .translationData=${this.translationData}
                ></skhemata-faq-list>
              `}
        </div>
        <skhemata-faq-categories
          class="column"
          .apiWordpress=${this.apiWordpress}
          .faqPagePath=${this.faqPagePath}
          .translationData=${this.translationData}
        ></skhemata-faq-categories>
      </div>
    `;
    }
}
__decorate([
    property({ type: Object, attribute: 'api-wordpress' })
], SkhemataFaq.prototype, "apiWordpress", void 0);
__decorate([
    property({ type: String, attribute: 'faq-page-path' })
], SkhemataFaq.prototype, "faqPagePath", void 0);
__decorate([
    property({ type: Number, attribute: 'posts-per-page' })
], SkhemataFaq.prototype, "postsPerPage", void 0);
__decorate([
    property({ type: String, attribute: 'pager-type' })
], SkhemataFaq.prototype, "pagerType", void 0);
__decorate([
    property({ type: String })
], SkhemataFaq.prototype, "slug", void 0);
__decorate([
    property({ type: Object })
], SkhemataFaq.prototype, "translationData", void 0);
//# sourceMappingURL=SkhemataFaq.js.map