@vendasta/store
Version:
Components and data for Store
49 lines • 6.07 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/icon";
import * as i2 from "@angular/common";
import * as i3 from "@vendasta/uikit";
export class VaFaqsComponent {
constructor() {
this.openFaqs = [];
}
toggleFaq(index) {
if (this.openFaqs.indexOf(index) >= 0) {
this.openFaqs.splice(this.openFaqs.indexOf(index), 1); // Remove
}
else {
this.openFaqs.push(index); // Insert
}
}
isFaqOpen(index) {
return this.openFaqs.indexOf(index) >= 0;
}
faqIcon(index) {
return this.isFaqOpen(index) ? 'keyboard_arrow_up' : 'keyboard_arrow_down';
}
}
VaFaqsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: VaFaqsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
VaFaqsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: VaFaqsComponent, selector: "app-faqs", inputs: { faqs: "faqs" }, ngImport: i0, template: `
<div class="va-faq" *ngFor="let faq of faqs; let i = index">
<div class="question" (click)="toggleFaq(i)">
<span>{{ faq.question }}</span>
<mat-icon>{{ faqIcon(i) }}</mat-icon>
</div>
<span class="answer" [ngClass]="{ show: isFaqOpen(i) }" [innerHtml]="faq.answer | vaSanitize"></span>
</div>
`, isInline: true, styles: [".va-faq{font-size:16px;display:flex;flex-direction:column;justify-content:flex-start;padding:12px 0;border-bottom:1px solid #e0e0e0}.va-faq:first-of-type{border-top:1px solid #e0e0e0}.va-faq .question{display:flex;justify-content:space-between;align-items:center;color:#212121;cursor:pointer;padding-left:16px}.va-faq .answer{color:#616161;height:0;overflow:hidden;padding:0 16px}.va-faq .show{padding-top:12px;height:inherit}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "vaSanitize": i3.VaSanitizePipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: VaFaqsComponent, decorators: [{
type: Component,
args: [{ selector: 'app-faqs', template: `
<div class="va-faq" *ngFor="let faq of faqs; let i = index">
<div class="question" (click)="toggleFaq(i)">
<span>{{ faq.question }}</span>
<mat-icon>{{ faqIcon(i) }}</mat-icon>
</div>
<span class="answer" [ngClass]="{ show: isFaqOpen(i) }" [innerHtml]="faq.answer | vaSanitize"></span>
</div>
`, styles: [".va-faq{font-size:16px;display:flex;flex-direction:column;justify-content:flex-start;padding:12px 0;border-bottom:1px solid #e0e0e0}.va-faq:first-of-type{border-top:1px solid #e0e0e0}.va-faq .question{display:flex;justify-content:space-between;align-items:center;color:#212121;cursor:pointer;padding-left:16px}.va-faq .answer{color:#616161;height:0;overflow:hidden;padding:0 16px}.va-faq .show{padding-top:12px;height:inherit}\n"] }]
}], propDecorators: { faqs: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmFxcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL3N0b3JlL3NyYy9saWIvZmFxcy9mYXFzLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFnQmpELE1BQU0sT0FBTyxlQUFlO0lBYjVCO1FBZUUsYUFBUSxHQUFhLEVBQUUsQ0FBQztLQWlCekI7SUFmQyxTQUFTLENBQUMsS0FBYTtRQUNyQixJQUFJLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsRUFBRTtZQUNyQyxJQUFJLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLFNBQVM7U0FDakU7YUFBTTtZQUNMLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsU0FBUztTQUNyQztJQUNILENBQUM7SUFFRCxTQUFTLENBQUMsS0FBYTtRQUNyQixPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUMzQyxDQUFDO0lBRUQsT0FBTyxDQUFDLEtBQWE7UUFDbkIsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDLENBQUMscUJBQXFCLENBQUM7SUFDN0UsQ0FBQzs7NEdBbEJVLGVBQWU7Z0dBQWYsZUFBZSwwRUFYaEI7Ozs7Ozs7O0dBUVQ7MkZBR1UsZUFBZTtrQkFiM0IsU0FBUzsrQkFDRSxVQUFVLFlBQ1Y7Ozs7Ozs7O0dBUVQ7OEJBSVEsSUFBSTtzQkFBWixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRmFxIH0gZnJvbSAnLi9zaGFyZWQvZmFxcy5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FwcC1mYXFzJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IGNsYXNzPVwidmEtZmFxXCIgKm5nRm9yPVwibGV0IGZhcSBvZiBmYXFzOyBsZXQgaSA9IGluZGV4XCI+XG4gICAgICA8ZGl2IGNsYXNzPVwicXVlc3Rpb25cIiAoY2xpY2spPVwidG9nZ2xlRmFxKGkpXCI+XG4gICAgICAgIDxzcGFuPnt7IGZhcS5xdWVzdGlvbiB9fTwvc3Bhbj5cbiAgICAgICAgPG1hdC1pY29uPnt7IGZhcUljb24oaSkgfX08L21hdC1pY29uPlxuICAgICAgPC9kaXY+XG4gICAgICA8c3BhbiBjbGFzcz1cImFuc3dlclwiIFtuZ0NsYXNzXT1cInsgc2hvdzogaXNGYXFPcGVuKGkpIH1cIiBbaW5uZXJIdG1sXT1cImZhcS5hbnN3ZXIgfCB2YVNhbml0aXplXCI+PC9zcGFuPlxuICAgIDwvZGl2PlxuICBgLFxuICBzdHlsZVVybHM6IFsnLi9mYXFzLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFZhRmFxc0NvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGZhcXM6IEZhcVtdO1xuICBvcGVuRmFxczogbnVtYmVyW10gPSBbXTtcblxuICB0b2dnbGVGYXEoaW5kZXg6IG51bWJlcik6IHZvaWQge1xuICAgIGlmICh0aGlzLm9wZW5GYXFzLmluZGV4T2YoaW5kZXgpID49IDApIHtcbiAgICAgIHRoaXMub3BlbkZhcXMuc3BsaWNlKHRoaXMub3BlbkZhcXMuaW5kZXhPZihpbmRleCksIDEpOyAvLyBSZW1vdmVcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5vcGVuRmFxcy5wdXNoKGluZGV4KTsgLy8gSW5zZXJ0XG4gICAgfVxuICB9XG5cbiAgaXNGYXFPcGVuKGluZGV4OiBudW1iZXIpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5vcGVuRmFxcy5pbmRleE9mKGluZGV4KSA+PSAwO1xuICB9XG5cbiAgZmFxSWNvbihpbmRleDogbnVtYmVyKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5pc0ZhcU9wZW4oaW5kZXgpID8gJ2tleWJvYXJkX2Fycm93X3VwJyA6ICdrZXlib2FyZF9hcnJvd19kb3duJztcbiAgfVxufVxuIl19