ngx-bootstrap
Version:
Angular Bootstrap
183 lines (176 loc) • 10.9 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Input, Component, EventEmitter, HostBinding, Output, Inject, NgModule } from '@angular/core';
import * as i1 from 'ngx-bootstrap/collapse';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { NgClass, NgIf } from '@angular/common';
/**
* Configuration service, provides default values for the AccordionComponent.
*/
class AccordionConfig {
constructor() {
/** Whether the other panels should be closed when a panel is opened */
this.closeOthers = false;
/** turn on/off animation */
this.isAnimated = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AccordionConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AccordionConfig, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AccordionConfig, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
/** Displays collapsible content panels for presenting information in a limited amount of space. */
class AccordionComponent {
constructor(config) {
/** turn on/off animation */
this.isAnimated = false;
/** if `true` expanding one item will close all others */
this.closeOthers = false;
this.groups = [];
Object.assign(this, config);
}
closeOtherPanels(openGroup) {
if (!this.closeOthers) {
return;
}
this.groups.forEach((group) => {
if (group !== openGroup) {
group.isOpen = false;
}
});
}
addGroup(group) {
group.isAnimated = this.isAnimated;
this.groups.push(group);
}
removeGroup(group) {
const index = this.groups.indexOf(group);
if (index !== -1) {
this.groups.splice(index, 1);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AccordionComponent, deps: [{ token: AccordionConfig }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AccordionComponent, isStandalone: true, selector: "accordion", inputs: { isAnimated: "isAnimated", closeOthers: "closeOthers" }, host: { attributes: { "role": "tablist" }, properties: { "attr.aria-multiselectable": "closeOthers" }, styleAttribute: "display: block", classAttribute: "panel-group" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AccordionComponent, decorators: [{
type: Component,
args: [{
selector: 'accordion',
template: `<ng-content></ng-content>`,
host: {
'[attr.aria-multiselectable]': 'closeOthers',
role: 'tablist',
class: 'panel-group',
style: 'display: block'
},
standalone: true
}]
}], ctorParameters: () => [{ type: AccordionConfig }], propDecorators: { isAnimated: [{
type: Input
}], closeOthers: [{
type: Input
}] } });
/**
* ### Accordion heading
* Instead of using `heading` attribute on the `accordion-group`, you can use
* an `accordion-heading` attribute on `any` element inside of a group that
* will be used as group's header template.
*/
class AccordionPanelComponent {
// Questionable, maybe .panel-open should be on child div.panel element?
/** Is accordion group open or closed. This property supports two-way binding */
get isOpen() {
return this._isOpen;
}
set isOpen(value) {
if (value !== this.isOpen) {
if (value) {
this.accordion.closeOtherPanels(this);
}
this._isOpen = value;
Promise.resolve(null)
.then(() => {
this.isOpenChange.emit(value);
});
}
}
constructor(accordion) {
/** turn on/off animation */
this.isAnimated = false;
/** Provides an ability to use Bootstrap's contextual panel classes
* (`panel-primary`, `panel-success`, `panel-info`, etc...).
* List of all available classes [available here]
* (https://getbootstrap.com/docs/3.3/components/#panels-alternatives)
*/
this.panelClass = 'panel-default';
/** if <code>true</code> — disables accordion group */
this.isDisabled = false;
/** Emits when the opened state changes */
this.isOpenChange = new EventEmitter();
this._isOpen = false;
this.accordion = accordion;
}
ngOnInit() {
this.accordion.addGroup(this);
}
ngOnDestroy() {
this.accordion.removeGroup(this);
}
toggleOpen() {
if (!this.isDisabled) {
this.isOpen = !this.isOpen;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AccordionPanelComponent, deps: [{ token: AccordionComponent }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AccordionPanelComponent, isStandalone: true, selector: "accordion-group, accordion-panel", inputs: { heading: "heading", panelClass: "panelClass", isDisabled: "isDisabled", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, host: { properties: { "class.panel-open": "this.isOpen" }, styleAttribute: "display: block", classAttribute: "panel" }, ngImport: i0, template: "<div class=\"panel card\" [ngClass]=\"panelClass\">\n <div\n class=\"panel-heading card-header\"\n role=\"tab\"\n (click)=\"toggleOpen()\"\n [ngClass]=\"isDisabled ? 'panel-disabled' : 'panel-enabled'\"\n >\n <div class=\"panel-title\">\n <div role=\"button\" class=\"accordion-toggle\" [attr.aria-expanded]=\"isOpen\">\n <button class=\"btn btn-link\" *ngIf=\"heading\" [ngClass]=\"{ 'text-muted': isDisabled }\" type=\"button\">\n {{ heading }}\n </button>\n <ng-content select=\"[accordion-heading]\"></ng-content>\n </div>\n </div>\n </div>\n <div class=\"panel-collapse collapse\" role=\"tabpanel\" [collapse]=\"!isOpen\" [isAnimated]=\"isAnimated\">\n <div class=\"panel-body card-block card-body\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host .card-header.panel-enabled{cursor:pointer}:host .card-header.panel-disabled .btn.btn-link{cursor:default;text-decoration:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i1.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AccordionPanelComponent, decorators: [{
type: Component,
args: [{ selector: 'accordion-group, accordion-panel', host: {
class: 'panel',
style: 'display: block'
}, standalone: true, imports: [NgClass, NgIf, CollapseModule], template: "<div class=\"panel card\" [ngClass]=\"panelClass\">\n <div\n class=\"panel-heading card-header\"\n role=\"tab\"\n (click)=\"toggleOpen()\"\n [ngClass]=\"isDisabled ? 'panel-disabled' : 'panel-enabled'\"\n >\n <div class=\"panel-title\">\n <div role=\"button\" class=\"accordion-toggle\" [attr.aria-expanded]=\"isOpen\">\n <button class=\"btn btn-link\" *ngIf=\"heading\" [ngClass]=\"{ 'text-muted': isDisabled }\" type=\"button\">\n {{ heading }}\n </button>\n <ng-content select=\"[accordion-heading]\"></ng-content>\n </div>\n </div>\n </div>\n <div class=\"panel-collapse collapse\" role=\"tabpanel\" [collapse]=\"!isOpen\" [isAnimated]=\"isAnimated\">\n <div class=\"panel-body card-block card-body\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host .card-header.panel-enabled{cursor:pointer}:host .card-header.panel-disabled .btn.btn-link{cursor:default;text-decoration:none}\n"] }]
}], ctorParameters: () => [{ type: AccordionComponent, decorators: [{
type: Inject,
args: [AccordionComponent]
}] }], propDecorators: { heading: [{
type: Input
}], panelClass: [{
type: Input
}], isDisabled: [{
type: Input
}], isOpenChange: [{
type: Output
}], isOpen: [{
type: HostBinding,
args: ['class.panel-open']
}, {
type: Input
}] } });
class AccordionModule {
// @deprecated method not required anymore, will be deleted in v19.0.0
static forRoot() {
return {
ngModule: AccordionModule,
providers: []
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: AccordionModule, imports: [AccordionComponent, AccordionPanelComponent], exports: [AccordionComponent, AccordionPanelComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AccordionModule, imports: [AccordionPanelComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AccordionModule, decorators: [{
type: NgModule,
args: [{
imports: [AccordionComponent, AccordionPanelComponent],
exports: [AccordionComponent, AccordionPanelComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { AccordionComponent, AccordionConfig, AccordionModule, AccordionPanelComponent };
//# sourceMappingURL=ngx-bootstrap-accordion.mjs.map