@angular/cdk
Version:
Angular Material Component Development Kit
276 lines (268 loc) • 11.8 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, Directive, Input, EventEmitter, Optional, Inject, SkipSelf, Output, NgModule } from '@angular/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { Subject, Subscription } from 'rxjs';
import * as i1 from '@angular/cdk/collections';
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/** Used to generate unique ID for each accordion. */
let nextId$1 = 0;
/**
* Injection token that can be used to reference instances of `CdkAccordion`. It serves
* as alternative token to the actual `CdkAccordion` class which could cause unnecessary
* retention of the class and its directive metadata.
*/
const CDK_ACCORDION = new InjectionToken('CdkAccordion');
/**
* Directive whose purpose is to manage the expanded state of CdkAccordionItem children.
*/
class CdkAccordion {
constructor() {
/** Emits when the state of the accordion changes */
this._stateChanges = new Subject();
/** Stream that emits true/false when openAll/closeAll is triggered. */
this._openCloseAllActions = new Subject();
/** A readonly id value to use for unique selection coordination. */
this.id = `cdk-accordion-${nextId$1++}`;
this._multi = false;
}
/** Whether the accordion should allow multiple expanded accordion items simultaneously. */
get multi() {
return this._multi;
}
set multi(multi) {
this._multi = coerceBooleanProperty(multi);
}
/** Opens all enabled accordion items in an accordion where multi is enabled. */
openAll() {
if (this._multi) {
this._openCloseAllActions.next(true);
}
}
/** Closes all enabled accordion items in an accordion where multi is enabled. */
closeAll() {
this._openCloseAllActions.next(false);
}
ngOnChanges(changes) {
this._stateChanges.next(changes);
}
ngOnDestroy() {
this._stateChanges.complete();
this._openCloseAllActions.complete();
}
}
CdkAccordion.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkAccordion, deps: [], target: i0.ɵɵFactoryTarget.Directive });
CdkAccordion.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: { multi: "multi" }, providers: [{ provide: CDK_ACCORDION, useExisting: CdkAccordion }], exportAs: ["cdkAccordion"], usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkAccordion, decorators: [{
type: Directive,
args: [{
selector: 'cdk-accordion, [cdkAccordion]',
exportAs: 'cdkAccordion',
providers: [{ provide: CDK_ACCORDION, useExisting: CdkAccordion }],
}]
}], propDecorators: { multi: [{
type: Input
}] } });
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/** Used to generate unique ID for each accordion item. */
let nextId = 0;
/**
* An basic directive expected to be extended and decorated as a component. Sets up all
* events and attributes needed to be managed by a CdkAccordion parent.
*/
class CdkAccordionItem {
constructor(accordion, _changeDetectorRef, _expansionDispatcher) {
this.accordion = accordion;
this._changeDetectorRef = _changeDetectorRef;
this._expansionDispatcher = _expansionDispatcher;
/** Subscription to openAll/closeAll events. */
this._openCloseAllSubscription = Subscription.EMPTY;
/** Event emitted every time the AccordionItem is closed. */
this.closed = new EventEmitter();
/** Event emitted every time the AccordionItem is opened. */
this.opened = new EventEmitter();
/** Event emitted when the AccordionItem is destroyed. */
this.destroyed = new EventEmitter();
/**
* Emits whenever the expanded state of the accordion changes.
* Primarily used to facilitate two-way binding.
* @docs-private
*/
this.expandedChange = new EventEmitter();
/** The unique AccordionItem id. */
this.id = `cdk-accordion-child-${nextId++}`;
this._expanded = false;
this._disabled = false;
/** Unregister function for _expansionDispatcher. */
this._removeUniqueSelectionListener = () => { };
this._removeUniqueSelectionListener = _expansionDispatcher.listen((id, accordionId) => {
if (this.accordion &&
!this.accordion.multi &&
this.accordion.id === accordionId &&
this.id !== id) {
this.expanded = false;
}
});
// When an accordion item is hosted in an accordion, subscribe to open/close events.
if (this.accordion) {
this._openCloseAllSubscription = this._subscribeToOpenCloseAllActions();
}
}
/** Whether the AccordionItem is expanded. */
get expanded() {
return this._expanded;
}
set expanded(expanded) {
expanded = coerceBooleanProperty(expanded);
// Only emit events and update the internal value if the value changes.
if (this._expanded !== expanded) {
this._expanded = expanded;
this.expandedChange.emit(expanded);
if (expanded) {
this.opened.emit();
/**
* In the unique selection dispatcher, the id parameter is the id of the CdkAccordionItem,
* the name value is the id of the accordion.
*/
const accordionId = this.accordion ? this.accordion.id : this.id;
this._expansionDispatcher.notify(this.id, accordionId);
}
else {
this.closed.emit();
}
// Ensures that the animation will run when the value is set outside of an `@Input`.
// This includes cases like the open, close and toggle methods.
this._changeDetectorRef.markForCheck();
}
}
/** Whether the AccordionItem is disabled. */
get disabled() {
return this._disabled;
}
set disabled(disabled) {
this._disabled = coerceBooleanProperty(disabled);
}
/** Emits an event for the accordion item being destroyed. */
ngOnDestroy() {
this.opened.complete();
this.closed.complete();
this.destroyed.emit();
this.destroyed.complete();
this._removeUniqueSelectionListener();
this._openCloseAllSubscription.unsubscribe();
}
/** Toggles the expanded state of the accordion item. */
toggle() {
if (!this.disabled) {
this.expanded = !this.expanded;
}
}
/** Sets the expanded state of the accordion item to false. */
close() {
if (!this.disabled) {
this.expanded = false;
}
}
/** Sets the expanded state of the accordion item to true. */
open() {
if (!this.disabled) {
this.expanded = true;
}
}
_subscribeToOpenCloseAllActions() {
return this.accordion._openCloseAllActions.subscribe(expanded => {
// Only change expanded state if item is enabled
if (!this.disabled) {
this.expanded = expanded;
}
});
}
}
CdkAccordionItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkAccordionItem, deps: [{ token: CDK_ACCORDION, optional: true, skipSelf: true }, { token: i0.ChangeDetectorRef }, { token: i1.UniqueSelectionDispatcher }], target: i0.ɵɵFactoryTarget.Directive });
CdkAccordionItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: { expanded: "expanded", disabled: "disabled" }, outputs: { closed: "closed", opened: "opened", destroyed: "destroyed", expandedChange: "expandedChange" }, providers: [
// Provide `CDK_ACCORDION` as undefined to prevent nested accordion items from
// registering to the same accordion.
{ provide: CDK_ACCORDION, useValue: undefined },
], exportAs: ["cdkAccordionItem"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkAccordionItem, decorators: [{
type: Directive,
args: [{
selector: 'cdk-accordion-item, [cdkAccordionItem]',
exportAs: 'cdkAccordionItem',
providers: [
// Provide `CDK_ACCORDION` as undefined to prevent nested accordion items from
// registering to the same accordion.
{ provide: CDK_ACCORDION, useValue: undefined },
],
}]
}], ctorParameters: function () {
return [{ type: CdkAccordion, decorators: [{
type: Optional
}, {
type: Inject,
args: [CDK_ACCORDION]
}, {
type: SkipSelf
}] }, { type: i0.ChangeDetectorRef }, { type: i1.UniqueSelectionDispatcher }];
}, propDecorators: { closed: [{
type: Output
}], opened: [{
type: Output
}], destroyed: [{
type: Output
}], expandedChange: [{
type: Output
}], expanded: [{
type: Input
}], disabled: [{
type: Input
}] } });
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
class CdkAccordionModule {
}
CdkAccordionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CdkAccordionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkAccordionModule, declarations: [CdkAccordion, CdkAccordionItem], exports: [CdkAccordion, CdkAccordionItem] });
CdkAccordionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkAccordionModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkAccordionModule, decorators: [{
type: NgModule,
args: [{
exports: [CdkAccordion, CdkAccordionItem],
declarations: [CdkAccordion, CdkAccordionItem],
}]
}] });
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* Generated bundle index. Do not edit.
*/
export { CdkAccordion, CdkAccordionItem, CdkAccordionModule };
//# sourceMappingURL=accordion.mjs.map