ng-materialgrammi
Version:
An Angular framework which follows
57 lines • 7.78 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../accordion-item/accordion-item.component";
import * as i2 from "@angular/common";
export class AccordionComponent {
constructor() {
this.theme = "primary";
this.items = [{
title: "Panel 1",
description: "description of panel 1",
active: false
}, {
title: "Panel 2",
description: "description of panel 2",
active: true
}, {
title: "Panel 3",
description: "description of panel 3",
active: false
}, {
title: "Panel 4",
description: "description of panel 4",
active: false
}, {
title: "Panel 5",
description: "description of panel 5",
active: false
}];
this.class = "";
}
ngOnInit() {
}
turnAllOff(missItem) {
for (let i = 0; i < this.items.length; i++) {
if (missItem != i) {
this.items[i].active = false;
}
}
}
toggleItem(itemNumber) {
this.items[itemNumber].active = !this.items[itemNumber].active;
this.turnAllOff(itemNumber);
}
}
AccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: AccordionComponent, selector: "mg-accordion", inputs: { theme: "theme", items: "items", class: "class" }, ngImport: i0, template: "<div>\n <ng-container *ngIf=\"items.length > 0\">\n <div class=\"accordion\" [ngClass]=\"class\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n <div class=\"marginB-2\">\n <mg-accordion-item [theme]=\"theme\" [itemid]=\"i\" [item]=\"item\" (isClicked)=\"toggleItem($event)\">\n </mg-accordion-item>\n </div>\n </ng-container>\n </div>\n </ng-container>\n</div>\n\n", styles: [""], components: [{ type: i1.AccordionItemComponent, selector: "mg-accordion-item", inputs: ["item", "itemid", "theme"], outputs: ["isClicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AccordionComponent, decorators: [{
type: Component,
args: [{ selector: 'mg-accordion', template: "<div>\n <ng-container *ngIf=\"items.length > 0\">\n <div class=\"accordion\" [ngClass]=\"class\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n <div class=\"marginB-2\">\n <mg-accordion-item [theme]=\"theme\" [itemid]=\"i\" [item]=\"item\" (isClicked)=\"toggleItem($event)\">\n </mg-accordion-item>\n </div>\n </ng-container>\n </div>\n </ng-container>\n</div>\n\n", styles: [""] }]
}], ctorParameters: function () { return []; }, propDecorators: { theme: [{
type: Input
}], items: [{
type: Input
}], class: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hdGVyaWFsZ3JhbW1pL3NyYy9saWIvY29tcG9uZW50cy9hY2NvcmRpb24vYWNjb3JkaW9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hdGVyaWFsZ3JhbW1pL3NyYy9saWIvY29tcG9uZW50cy9hY2NvcmRpb24vYWNjb3JkaW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7O0FBUXpELE1BQU0sT0FBTyxrQkFBa0I7SUEwQjdCO1FBekJTLFVBQUssR0FBVSxTQUFTLENBQUM7UUFFekIsVUFBSyxHQUFRLENBQUM7Z0JBQ3JCLEtBQUssRUFBRSxTQUFTO2dCQUNoQixXQUFXLEVBQUUsd0JBQXdCO2dCQUNyQyxNQUFNLEVBQUUsS0FBSzthQUNkLEVBQUU7Z0JBQ0QsS0FBSyxFQUFFLFNBQVM7Z0JBQ2hCLFdBQVcsRUFBRSx3QkFBd0I7Z0JBQ3JDLE1BQU0sRUFBRSxJQUFJO2FBQ2IsRUFBRTtnQkFDRCxLQUFLLEVBQUUsU0FBUztnQkFDaEIsV0FBVyxFQUFFLHdCQUF3QjtnQkFDckMsTUFBTSxFQUFFLEtBQUs7YUFDZCxFQUFFO2dCQUNELEtBQUssRUFBRSxTQUFTO2dCQUNoQixXQUFXLEVBQUUsd0JBQXdCO2dCQUNyQyxNQUFNLEVBQUUsS0FBSzthQUNkLEVBQUU7Z0JBQ0QsS0FBSyxFQUFFLFNBQVM7Z0JBQ2hCLFdBQVcsRUFBRSx3QkFBd0I7Z0JBQ3JDLE1BQU0sRUFBRSxLQUFLO2FBQ2QsQ0FBQyxDQUFDO1FBRU0sVUFBSyxHQUFHLEVBQUUsQ0FBQztJQUNKLENBQUM7SUFFakIsUUFBUTtJQUNSLENBQUM7SUFFRCxVQUFVLENBQUMsUUFBZ0I7UUFDekIsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxFQUFFLENBQUMsRUFBRSxFQUFFO1lBQzFDLElBQUksUUFBUSxJQUFJLENBQUMsRUFBRTtnQkFDakIsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO2FBQzlCO1NBQ0Y7SUFDSCxDQUFDO0lBRUQsVUFBVSxDQUFDLFVBQWU7UUFDeEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxVQUFVLENBQUMsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxDQUFDLE1BQU0sQ0FBQztRQUMvRCxJQUFJLENBQUMsVUFBVSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQzlCLENBQUM7OytHQTFDVSxrQkFBa0I7bUdBQWxCLGtCQUFrQixnSENSL0IsaWJBYUE7MkZETGEsa0JBQWtCO2tCQUw5QixTQUFTOytCQUNFLGNBQWM7MEVBS2YsS0FBSztzQkFBYixLQUFLO2dCQUVHLEtBQUs7c0JBQWIsS0FBSztnQkFzQkcsS0FBSztzQkFBYixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4uLy4uL3R5cGVzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbWctYWNjb3JkaW9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2FjY29yZGlvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2FjY29yZGlvbi5jb21wb25lbnQuY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgQWNjb3JkaW9uQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgdGhlbWU6IFRoZW1lID0gXCJwcmltYXJ5XCI7XG5cbiAgQElucHV0KCkgaXRlbXM6IGFueSA9IFt7XG4gICAgdGl0bGU6IFwiUGFuZWwgMVwiLFxuICAgIGRlc2NyaXB0aW9uOiBcImRlc2NyaXB0aW9uIG9mIHBhbmVsIDFcIixcbiAgICBhY3RpdmU6IGZhbHNlXG4gIH0sIHtcbiAgICB0aXRsZTogXCJQYW5lbCAyXCIsXG4gICAgZGVzY3JpcHRpb246IFwiZGVzY3JpcHRpb24gb2YgcGFuZWwgMlwiLFxuICAgIGFjdGl2ZTogdHJ1ZVxuICB9LCB7XG4gICAgdGl0bGU6IFwiUGFuZWwgM1wiLFxuICAgIGRlc2NyaXB0aW9uOiBcImRlc2NyaXB0aW9uIG9mIHBhbmVsIDNcIixcbiAgICBhY3RpdmU6IGZhbHNlXG4gIH0sIHtcbiAgICB0aXRsZTogXCJQYW5lbCA0XCIsXG4gICAgZGVzY3JpcHRpb246IFwiZGVzY3JpcHRpb24gb2YgcGFuZWwgNFwiLFxuICAgIGFjdGl2ZTogZmFsc2VcbiAgfSwge1xuICAgIHRpdGxlOiBcIlBhbmVsIDVcIixcbiAgICBkZXNjcmlwdGlvbjogXCJkZXNjcmlwdGlvbiBvZiBwYW5lbCA1XCIsXG4gICAgYWN0aXZlOiBmYWxzZVxuICB9XTtcblxuICBASW5wdXQoKSBjbGFzcyA9IFwiXCI7XG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gIH1cblxuICB0dXJuQWxsT2ZmKG1pc3NJdGVtOiBudW1iZXIpIHtcbiAgICBmb3IgKGxldCBpID0gMDsgaSA8IHRoaXMuaXRlbXMubGVuZ3RoOyBpKyspIHtcbiAgICAgIGlmIChtaXNzSXRlbSAhPSBpKSB7XG4gICAgICAgIHRoaXMuaXRlbXNbaV0uYWN0aXZlID0gZmFsc2U7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgdG9nZ2xlSXRlbShpdGVtTnVtYmVyOiBhbnkpIHtcbiAgICB0aGlzLml0ZW1zW2l0ZW1OdW1iZXJdLmFjdGl2ZSA9ICF0aGlzLml0ZW1zW2l0ZW1OdW1iZXJdLmFjdGl2ZTtcbiAgICB0aGlzLnR1cm5BbGxPZmYoaXRlbU51bWJlcik7XG4gIH1cblxuXG5cbn1cbiIsIjxkaXY+XG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCJpdGVtcy5sZW5ndGggPiAwXCI+XG4gICAgPGRpdiBjbGFzcz1cImFjY29yZGlvblwiIFtuZ0NsYXNzXT1cImNsYXNzXCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBpdGVtIG9mIGl0ZW1zOyBsZXQgaSA9IGluZGV4XCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJtYXJnaW5CLTJcIj5cbiAgICAgICAgICA8bWctYWNjb3JkaW9uLWl0ZW0gW3RoZW1lXT1cInRoZW1lXCIgW2l0ZW1pZF09XCJpXCIgW2l0ZW1dPVwiaXRlbVwiIChpc0NsaWNrZWQpPVwidG9nZ2xlSXRlbSgkZXZlbnQpXCI+XG4gICAgICAgICAgPC9tZy1hY2NvcmRpb24taXRlbT5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cbiAgPC9uZy1jb250YWluZXI+XG48L2Rpdj5cblxuIl19