ngx-bootstrap
Version:
Angular Bootstrap
180 lines (173 loc) • 13 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, input, ChangeDetectionStrategy, Component, output, effect, HostBinding, Inject, NgModule } from '@angular/core';
import * as i1 from 'ngx-bootstrap/collapse';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { NgClass } 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: "22.0.2", ngImport: i0, type: AccordionConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AccordionConfig, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.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) {
this._config = _config;
/** turn on/off animation */
this.isAnimated = input(this._config.isAnimated, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "isAnimated" }] : /* istanbul ignore next */ []));
/** if `true` expanding one item will close all others */
this.closeOthers = input(this._config.closeOthers, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "closeOthers" }] : /* istanbul ignore next */ []));
this.groups = [];
}
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: "22.0.2", ngImport: i0, type: AccordionComponent, deps: [{ token: AccordionConfig }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: AccordionComponent, isStandalone: true, selector: "accordion", inputs: { isAnimated: { classPropertyName: "isAnimated", publicName: "isAnimated", isSignal: true, isRequired: false, transformFunction: null }, closeOthers: { classPropertyName: "closeOthers", publicName: "closeOthers", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tablist" }, properties: { "attr.aria-multiselectable": "closeOthers()" }, styleAttribute: "display: block", classAttribute: "panel-group" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AccordionComponent, decorators: [{
type: Component,
args: [{
selector: 'accordion',
changeDetection: ChangeDetectionStrategy.Eager,
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: i0.Input, args: [{ isSignal: true, alias: "isAnimated", required: false }] }], closeOthers: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOthers", required: false }] }] } });
/**
* ### 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;
/** Clickable text in accordion's group header, check `accordion heading` below for using html in header */
this.heading = input('', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
/** 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 = input('panel-default', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
/** if <code>true</code> — disables accordion group */
this.isDisabled = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
/** Input to set initial open state */
// eslint-disable-next-line @angular-eslint/no-input-rename
this.isOpenInput = input(false, { ...(ngDevMode ? { debugName: "isOpenInput" } : /* istanbul ignore next */ {}), alias: 'isOpen' });
/** Emits when the opened state changes */
this.isOpenChange = output();
this._isOpen = false;
this.accordion = accordion;
// Watch for isOpen input changes
effect(() => {
const isOpenValue = this.isOpenInput();
if (isOpenValue !== this._isOpen) {
this.isOpen = isOpenValue;
}
});
}
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: "22.0.2", ngImport: i0, type: AccordionPanelComponent, deps: [{ token: AccordionComponent }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AccordionPanelComponent, isStandalone: true, selector: "accordion-group, accordion-panel", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isOpenInput: { classPropertyName: "isOpenInput", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, 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 @if (heading()) {\n <button class=\"btn btn-link\" [ngClass]=\"{ 'text-muted': isDisabled() }\" type=\"button\">\n {{ heading() }}\n </button>\n }\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: "ngmodule", type: CollapseModule }, { kind: "directive", type: i1.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AccordionPanelComponent, decorators: [{
type: Component,
args: [{ selector: 'accordion-group, accordion-panel', changeDetection: ChangeDetectionStrategy.Eager, host: {
class: 'panel',
style: 'display: block'
}, standalone: true, imports: [NgClass, 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 @if (heading()) {\n <button class=\"btn btn-link\" [ngClass]=\"{ 'text-muted': isDisabled() }\" type=\"button\">\n {{ heading() }}\n </button>\n }\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: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], isOpenInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], isOpenChange: [{ type: i0.Output, args: ["isOpenChange"] }], isOpen: [{
type: HostBinding,
args: ['class.panel-open']
}] } });
class AccordionModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: AccordionModule, imports: [AccordionComponent, AccordionPanelComponent], exports: [AccordionComponent, AccordionPanelComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AccordionModule, imports: [AccordionPanelComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.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