igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
982 lines (971 loc) • 41.4 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, inject, ElementRef, Directive, ChangeDetectorRef, Input, HostBinding, Component, EventEmitter, booleanAttribute, HostListener, ViewChild, ContentChild, Output, NgModule } from '@angular/core';
import { IgxIconComponent } from 'igniteui-angular/icon';
import { Subject, noop } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { IgxAngularAnimationService } from 'igniteui-angular/core';
import { growVerOut, growVerIn } from 'igniteui-angular/animations';
/** @hidden */
const IGX_EXPANSION_PANEL_COMPONENT = /*@__PURE__*/ new InjectionToken('IgxExpansionPanelToken');
class HeaderContentBaseDirective {
constructor() {
this.element = inject(ElementRef);
/**
* Returns the `textContent` of an element
*
* ```html
* <igx-expansion-panel-title>
* Tooltip content
* </igx-expansion-panel-title>
* ```
*
* or the `title` content
*
* ```html
* <igx-expansion-panel-title [title]="'Tooltip content'">
* </igx-expansion-panel-title>
* ```
*
* If both are provided, returns the `title` content.
*
* @param element
* @returns tooltip content for an element
*/
this.getTooltipContent = (element) => {
if (element.nativeElement.title) {
return element.nativeElement.title;
}
if (element.nativeElement.textContent) {
return element.nativeElement.textContent.trim();
}
return null;
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: HeaderContentBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: HeaderContentBaseDirective, isStandalone: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: HeaderContentBaseDirective, decorators: [{
type: Directive
}] });
class IgxExpansionPanelBodyComponent {
constructor() {
this.panel = inject(IGX_EXPANSION_PANEL_COMPONENT);
this.element = inject(ElementRef);
this.cdr = inject(ChangeDetectorRef);
/**
* @hidden
*/
this.cssClass = `igx-expansion-panel__body`;
/**
* Gets/sets the `role` attribute of the panel body
* Default is 'region';
* Get
* ```typescript
* const currentRole = this.panel.body.role;
* ```
* Set
* ```typescript
* this.panel.body.role = 'content';
* ```
* ```html
* <igx-expansion-panel-body [role]="'custom'"></igx-expansion-panel-body>
* ```
*/
this.role = 'region';
this._labelledBy = '';
this._label = '';
}
/**
* Gets the `aria-label` attribute of the panel body
* Defaults to the panel id with '-region' in the end;
* Get
* ```typescript
* const currentLabel = this.panel.body.label;
* ```
*/
get label() {
return this._label || this.panel.id + '-region';
}
/**
* Sets the `aria-label` attribute of the panel body
* ```typescript
* this.panel.body.label = 'my-custom-label';
* ```
* ```html
* <igx-expansion-panel-body [label]="'my-custom-label'"></igx-expansion-panel-body>
* ```
*/
set label(val) {
this._label = val;
}
/**
* Gets the `aria-labelledby` attribute of the panel body
* Defaults to the panel header id;
* Get
* ```typescript
* const currentLabel = this.panel.body.labelledBy;
* ```
*/
get labelledBy() {
return this._labelledBy;
}
/**
* Sets the `aria-labelledby` attribute of the panel body
* ```typescript
* this.panel.body.labelledBy = 'my-custom-id';
* ```
* ```html
* <igx-expansion-panel-body [labelledBy]="'my-custom-id'"></igx-expansion-panel-body>
* ```
*/
set labelledBy(val) {
this._labelledBy = val;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExpansionPanelBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: IgxExpansionPanelBodyComponent, isStandalone: true, selector: "igx-expansion-panel-body", inputs: { role: "role", label: "label", labelledBy: "labelledBy" }, host: { properties: { "class.igx-expansion-panel__body": "this.cssClass", "attr.role": "this.role", "attr.aria-label": "this.label", "attr.aria-labelledby": "this.labelledBy" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExpansionPanelBodyComponent, decorators: [{
type: Component,
args: [{
selector: 'igx-expansion-panel-body',
template: `<ng-content></ng-content>`,
standalone: true
}]
}], propDecorators: { cssClass: [{
type: HostBinding,
args: ['class.igx-expansion-panel__body']
}], role: [{
type: Input
}, {
type: HostBinding,
args: ['attr.role']
}], label: [{
type: Input
}, {
type: HostBinding,
args: ['attr.aria-label']
}], labelledBy: [{
type: Input
}, {
type: HostBinding,
args: ['attr.aria-labelledby']
}] } });
/** @hidden @internal */
class IgxExpansionPanelTitleDirective extends HeaderContentBaseDirective {
constructor() {
super(...arguments);
this.cssClass = `igx-expansion-panel__header-title`;
}
get title() {
return this.getTooltipContent(this.element);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExpansionPanelTitleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxExpansionPanelTitleDirective, isStandalone: true, selector: "igx-expansion-panel-title", host: { properties: { "class.igx-expansion-panel__header-title": "this.cssClass", "attr.title": "this.title" } }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExpansionPanelTitleDirective, decorators: [{
type: Directive,
args: [{
selector: 'igx-expansion-panel-title',
standalone: true
}]
}], propDecorators: { cssClass: [{
type: HostBinding,
args: ['class.igx-expansion-panel__header-title']
}], title: [{
type: HostBinding,
args: ['attr.title']
}] } });
/** @hidden @internal */
class IgxExpansionPanelDescriptionDirective extends HeaderContentBaseDirective {
constructor() {
super(...arguments);
this.cssClass = `igx-expansion-panel__header-description`;
}
get title() {
return this.getTooltipContent(this.element);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExpansionPanelDescriptionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxExpansionPanelDescriptionDirective, isStandalone: true, selector: "igx-expansion-panel-description", host: { properties: { "class.igx-expansion-panel__header-description": "this.cssClass", "attr.title": "this.title" } }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExpansionPanelDescriptionDirective, decorators: [{
type: Directive,
args: [{
selector: 'igx-expansion-panel-description',
standalone: true
}]
}], propDecorators: { cssClass: [{
type: HostBinding,
args: ['class.igx-expansion-panel__header-description']
}], title: [{
type: HostBinding,
args: ['attr.title']
}] } });
/** @hidden @internal */
class IgxExpansionPanelIconDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExpansionPanelIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxExpansionPanelIconDirective, isStandalone: true, selector: "igx-expansion-panel-icon", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExpansionPanelIconDirective, decorators: [{
type: Directive,
args: [{
selector: 'igx-expansion-panel-icon',
standalone: true
}]
}] });
/**
* @hidden
*/
const ExpansionPanelHeaderIconPosition = {
LEFT: 'left',
NONE: 'none',
RIGHT: 'right'
};
class IgxExpansionPanelHeaderComponent {
/**
* Returns a reference to the `igx-expansion-panel-icon` element;
* If `iconPosition` is `NONE` - return null;
*/
get iconRef() {
const renderedTemplate = this.customIconRef ?? this.defaultIconRef;
return this.iconPosition !== ExpansionPanelHeaderIconPosition.NONE ? renderedTemplate : null;
}
/**
* @hidden
*/
set iconTemplate(val) {
this._iconTemplate = val;
}
/**
* @hidden
*/
get iconTemplate() {
return this._iconTemplate;
}
/**
* @hidden
*/
get controls() {
return this.panel.id;
}
/**
* @hidden @internal
*/
get innerElement() {
return this.elementRef.nativeElement.children[0];
}
/**
* @hidden
*/
get isExpanded() {
return !this.panel.collapsed;
}
/**
* Gets/sets the whether the header is disabled
* When disabled, the header will not handle user events and will stop their propagation
*
* ```typescript
* const isDisabled = this.panel.header.disabled;
* ```
* Set
* ```typescript
* this.panel.header.disabled = true;
* ```
* ```html
* <igx-expansion-panel-header [disabled]="true">
* ...
* </igx-expansion-panel-header>
* ```
*/
get disabled() {
return this._disabled;
}
set disabled(val) {
this._disabled = val;
if (val) {
// V.S. June 11th, 2021: #9696 TabIndex should be removed when panel is disabled
delete this.tabIndex;
}
else {
this.tabIndex = 0;
}
}
constructor() {
this.panel = inject(IGX_EXPANSION_PANEL_COMPONENT, { host: true });
this.cdr = inject(ChangeDetectorRef);
this.elementRef = inject(ElementRef);
/**
* Gets/sets the `aria-level` attribute of the header
* Get
* ```typescript
* const currentAriaLevel = this.panel.header.lv;
* ```
* Set
* ```typescript
* this.panel.header.lv = '5';
* ```
* ```html
* <igx-expansion-panel-header [lv]="myCustomLevel"></igx-expansion-panel-header>
* ```
*/
this.lv = '3';
/**
* Gets/sets the `role` attribute of the header
* Get
* ```typescript
* const currentRole = this.panel.header.role;
* ```
* Set
* ```typescript
* this.panel.header.role = '5';
* ```
* ```html
* <igx-expansion-panel-header [role]="'custom'"></igx-expansion-panel-header>
* ```
*/
this.role = 'heading';
/**
* Gets/sets the position of the expansion-panel-header expand/collapse icon
* Accepts `left`, `right` or `none`
* ```typescript
* const currentIconPosition = this.panel.header.iconPosition;
* ```
* Set
* ```typescript
* this.panel.header.iconPosition = 'left';
* ```
* ```html
* <igx-expansion-panel-header [iconPosition]="'right'"></igx-expansion-panel-header>
* ```
*/
this.iconPosition = ExpansionPanelHeaderIconPosition.LEFT;
/**
* Emitted whenever a user interacts with the header host
* ```typescript
* handleInteraction(event: IExpansionPanelCancelableEventArgs) {
* ...
* }
* ```
* ```html
* <igx-expansion-panel-header (interaction)="handleInteraction($event)">
* ...
* </igx-expansion-panel-header>
* ```
*/
this.interaction = new EventEmitter();
/**
* @hidden
*/
this.cssClass = 'igx-expansion-panel__header';
/**
* Sets/gets the `id` of the expansion panel header.
* ```typescript
* let panelHeaderId = this.panel.header.id;
* ```
*
* @memberof IgxExpansionPanelComponent
*/
this.id = '';
/** @hidden @internal */
this.tabIndex = 0;
// properties section
this._iconTemplate = false;
this._disabled = false;
this.id = `${this.panel.id}-header`;
}
/**
* @hidden
*/
onAction(evt) {
if (this.disabled) {
evt.stopPropagation();
return;
}
const eventArgs = { event: evt, owner: this.panel, cancel: false };
this.interaction.emit(eventArgs);
if (eventArgs.cancel === true) {
return;
}
this.panel.toggle(evt);
evt.preventDefault();
}
/** @hidden @internal */
openPanel(event) {
if (event.altKey) {
const eventArgs = { event, owner: this.panel, cancel: false };
this.interaction.emit(eventArgs);
if (eventArgs.cancel === true) {
return;
}
this.panel.expand(event);
}
}
/** @hidden @internal */
closePanel(event) {
if (event.altKey) {
const eventArgs = { event, owner: this.panel, cancel: false };
this.interaction.emit(eventArgs);
if (eventArgs.cancel === true) {
return;
}
this.panel.collapse(event);
}
}
/**
* @hidden
*/
get iconPositionClass() {
switch (this.iconPosition) {
case (ExpansionPanelHeaderIconPosition.LEFT):
return `igx-expansion-panel__header-icon--start`;
case (ExpansionPanelHeaderIconPosition.RIGHT):
return `igx-expansion-panel__header-icon--end`;
case (ExpansionPanelHeaderIconPosition.NONE):
return `igx-expansion-panel__header-icon--none`;
default:
return '';
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExpansionPanelHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxExpansionPanelHeaderComponent, isStandalone: true, selector: "igx-expansion-panel-header", inputs: { lv: "lv", role: "role", iconPosition: "iconPosition", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { interaction: "interaction" }, host: { listeners: { "keydown.Enter": "onAction($event)", "keydown.Space": "onAction($event)", "keydown.Spacebar": "onAction($event)", "click": "onAction($event)", "keydown.alt.arrowdown": "openPanel($event)", "keydown.alt.arrowup": "closePanel($event)" }, properties: { "attr.aria-level": "this.lv", "attr.role": "this.role", "class.igx-expansion-panel__header": "this.cssClass", "class.igx-expansion-panel__header--expanded": "this.isExpanded", "class.igx-expansion-panel--disabled": "this.disabled" } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: IgxExpansionPanelIconDirective, descendants: true }, { propertyName: "customIconRef", first: true, predicate: IgxExpansionPanelIconDirective, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "defaultIconRef", first: true, predicate: IgxIconComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"igx-expansion-panel__header-inner\" [attr.tabindex]=\"tabIndex\" role=\"button\" [attr.id]=\"id\"\n[attr.aria-disabled]=\"disabled\" [attr.aria-expanded]=\"isExpanded\" [attr.aria-controls]=\"controls\">\n <div class=\"igx-expansion-panel__title-wrapper\">\n <ng-content select=\"igx-expansion-panel-title\"></ng-content>\n <ng-content select=\"igx-expansion-panel-description\"></ng-content>\n </div>\n <ng-content></ng-content>\n <div [class]=\"iconPositionClass\">\n @if (iconTemplate) {\n <ng-content select=\"igx-expansion-panel-icon\"></ng-content>\n }\n @if (!iconTemplate) {\n <igx-icon\n family=\"default\"\n [name]=\"panel.collapsed ? 'expand' : 'collapse'\">\n </igx-icon>\n }\n </div>\n</div>\n", dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExpansionPanelHeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-expansion-panel-header', imports: [IgxIconComponent], template: "<div class=\"igx-expansion-panel__header-inner\" [attr.tabindex]=\"tabIndex\" role=\"button\" [attr.id]=\"id\"\n[attr.aria-disabled]=\"disabled\" [attr.aria-expanded]=\"isExpanded\" [attr.aria-controls]=\"controls\">\n <div class=\"igx-expansion-panel__title-wrapper\">\n <ng-content select=\"igx-expansion-panel-title\"></ng-content>\n <ng-content select=\"igx-expansion-panel-description\"></ng-content>\n </div>\n <ng-content></ng-content>\n <div [class]=\"iconPositionClass\">\n @if (iconTemplate) {\n <ng-content select=\"igx-expansion-panel-icon\"></ng-content>\n }\n @if (!iconTemplate) {\n <igx-icon\n family=\"default\"\n [name]=\"panel.collapsed ? 'expand' : 'collapse'\">\n </igx-icon>\n }\n </div>\n</div>\n" }]
}], ctorParameters: () => [], propDecorators: { iconTemplate: [{
type: ContentChild,
args: [IgxExpansionPanelIconDirective]
}], lv: [{
type: HostBinding,
args: ['attr.aria-level']
}, {
type: Input
}], role: [{
type: HostBinding,
args: ['attr.role']
}, {
type: Input
}], iconPosition: [{
type: Input
}], interaction: [{
type: Output
}], cssClass: [{
type: HostBinding,
args: ['class.igx-expansion-panel__header']
}], isExpanded: [{
type: HostBinding,
args: ['class.igx-expansion-panel__header--expanded']
}], disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}, {
type: HostBinding,
args: ['class.igx-expansion-panel--disabled']
}], customIconRef: [{
type: ContentChild,
args: [IgxExpansionPanelIconDirective, { read: ElementRef }]
}], defaultIconRef: [{
type: ViewChild,
args: [IgxIconComponent, { read: ElementRef }]
}], onAction: [{
type: HostListener,
args: ['keydown.Enter', ['$event']]
}, {
type: HostListener,
args: ['keydown.Space', ['$event']]
}, {
type: HostListener,
args: ['keydown.Spacebar', ['$event']]
}, {
type: HostListener,
args: ['click', ['$event']]
}], openPanel: [{
type: HostListener,
args: ['keydown.alt.arrowdown', ['$event']]
}], closePanel: [{
type: HostListener,
args: ['keydown.alt.arrowup', ['$event']]
}] } });
/** @hidden @internal */
var ANIMATION_TYPE;
(function (ANIMATION_TYPE) {
ANIMATION_TYPE["OPEN"] = "open";
ANIMATION_TYPE["CLOSE"] = "close";
})(ANIMATION_TYPE || (ANIMATION_TYPE = {}));
/**@hidden @internal */
class ToggleAnimationPlayer {
constructor() {
this.animationService = inject(IgxAngularAnimationService);
/** @hidden @internal */
this.openAnimationDone = new EventEmitter();
/** @hidden @internal */
this.closeAnimationDone = new EventEmitter();
/** @hidden @internal */
this.openAnimationStart = new EventEmitter();
/** @hidden @internal */
this.closeAnimationStart = new EventEmitter();
/** @hidden @internal */
this.openAnimationPlayer = null;
/** @hidden @internal */
this.closeAnimationPlayer = null;
this.destroy$ = new Subject();
this.players = new Map();
this._animationSettings = {
openAnimation: growVerIn,
closeAnimation: growVerOut
};
this.closeInterrupted = false;
this.openInterrupted = false;
this._defaultClosedCallback = noop;
this._defaultOpenedCallback = noop;
this.onClosedCallback = this._defaultClosedCallback;
this.onOpenedCallback = this._defaultOpenedCallback;
}
get animationSettings() {
return this._animationSettings;
}
set animationSettings(value) {
this._animationSettings = value;
}
/** @hidden @internal */
playOpenAnimation(targetElement, onDone) {
this.startPlayer(ANIMATION_TYPE.OPEN, targetElement, onDone || this._defaultOpenedCallback);
}
/** @hidden @internal */
playCloseAnimation(targetElement, onDone) {
this.startPlayer(ANIMATION_TYPE.CLOSE, targetElement, onDone || this._defaultClosedCallback);
}
/** @hidden @internal */
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
startPlayer(type, targetElement, callback) {
if (!targetElement) { // if no element is passed, there is nothing to animate
return;
}
let target = this.getPlayer(type);
if (!target) {
target = this.initializePlayer(type, targetElement, callback);
}
// V.S. Jun 28th, 2021 #9783: player will NOT be initialized w/ null settings
// events will already be emitted
if (!target || target.hasStarted()) {
return;
}
const targetEmitter = type === ANIMATION_TYPE.OPEN ? this.openAnimationStart : this.closeAnimationStart;
targetEmitter.emit();
if (target) {
target.play();
}
}
initializePlayer(type, targetElement, callback) {
const oppositeType = type === ANIMATION_TYPE.OPEN ? ANIMATION_TYPE.CLOSE : ANIMATION_TYPE.OPEN;
// V.S. Jun 28th, 2021 #9783: Treat falsy animation settings as disabled animations
const targetAnimationSettings = this.animationSettings || { closeAnimation: null, openAnimation: null };
const animationSettings = type === ANIMATION_TYPE.OPEN ?
targetAnimationSettings.openAnimation : targetAnimationSettings.closeAnimation;
// V.S. Jun 28th, 2021 #9783: When no animation in target direction, emit start and done events and return
if (!animationSettings) {
this.setCallback(type, callback);
const targetEmitter = type === ANIMATION_TYPE.OPEN ? this.openAnimationStart : this.closeAnimationStart;
targetEmitter.emit();
this.onDoneHandler(type);
return;
}
const opposite = this.getPlayer(oppositeType);
let oppositePosition = 1;
if (opposite) {
oppositePosition = opposite.position;
this.cleanUpPlayer(oppositeType);
}
if (type === ANIMATION_TYPE.OPEN) {
this.openAnimationPlayer = this.animationService.buildAnimation(animationSettings, targetElement.nativeElement);
}
else if (type === ANIMATION_TYPE.CLOSE) {
this.closeAnimationPlayer = this.animationService.buildAnimation(animationSettings, targetElement.nativeElement);
}
const target = this.getPlayer(type);
target.init();
this.getPlayer(type).position = 1 - oppositePosition;
this.setCallback(type, callback);
target.animationEnd.pipe(takeUntil(this.destroy$)).subscribe(() => {
this.onDoneHandler(type);
});
return target;
}
onDoneHandler(type) {
const targetEmitter = type === ANIMATION_TYPE.OPEN ? this.openAnimationDone : this.closeAnimationDone;
const targetCallback = type === ANIMATION_TYPE.OPEN ? this.onOpenedCallback : this.onClosedCallback;
targetCallback();
if (!(type === ANIMATION_TYPE.OPEN ? this.openInterrupted : this.closeInterrupted)) {
targetEmitter.emit();
}
this.cleanUpPlayer(type);
}
setCallback(type, callback) {
if (type === ANIMATION_TYPE.OPEN) {
this.onOpenedCallback = callback;
this.openInterrupted = false;
}
else if (type === ANIMATION_TYPE.CLOSE) {
this.onClosedCallback = callback;
this.closeInterrupted = false;
}
}
cleanUpPlayer(target) {
switch (target) {
case ANIMATION_TYPE.CLOSE:
if (this.closeAnimationPlayer != null) {
this.closeAnimationPlayer.reset();
this.closeAnimationPlayer.destroy();
this.closeAnimationPlayer = null;
}
this.closeInterrupted = true;
this.onClosedCallback = this._defaultClosedCallback;
break;
case ANIMATION_TYPE.OPEN:
if (this.openAnimationPlayer != null) {
this.openAnimationPlayer.reset();
this.openAnimationPlayer.destroy();
this.openAnimationPlayer = null;
}
this.openInterrupted = true;
this.onOpenedCallback = this._defaultOpenedCallback;
break;
default:
break;
}
}
getPlayer(type) {
switch (type) {
case ANIMATION_TYPE.OPEN:
return this.openAnimationPlayer;
case ANIMATION_TYPE.CLOSE:
return this.closeAnimationPlayer;
default:
return null;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ToggleAnimationPlayer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: ToggleAnimationPlayer, isStandalone: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ToggleAnimationPlayer, decorators: [{
type: Directive
}] });
let NEXT_ID = 0;
class IgxExpansionPanelComponent extends ToggleAnimationPlayer {
constructor() {
super(...arguments);
this.cdr = inject(ChangeDetectorRef);
this.elementRef = inject(ElementRef);
/**
* Sets/gets the `id` of the expansion panel component.
* If not set, `id` will have value `"igx-expansion-panel-0"`;
* ```html
* <igx-expansion-panel id = "my-first-expansion-panel"></igx-expansion-panel>
* ```
* ```typescript
* let panelId = this.panel.id;
* ```
*
* @memberof IgxExpansionPanelComponent
*/
this.id = `igx-expansion-panel-${NEXT_ID++}`;
/**
* @hidden
*/
this.cssClass = 'igx-expansion-panel';
/**
* @hidden
*/
this.opened = false;
/**
* Gets/sets whether the component is collapsed (its content is hidden)
* Get
* ```typescript
* const myPanelState: boolean = this.panel.collapsed;
* ```
* Set
* ```html
* this.panel.collapsed = true;
* ```
*
* Two-way data binding:
* ```html
* <igx-expansion-panel [(collapsed)]="model.isCollapsed"></igx-expansion-panel>
* ```
*/
this.collapsed = true;
/**
* @hidden
*/
this.collapsedChange = new EventEmitter();
/**
* Emitted when the expansion panel starts collapsing
* ```typescript
* handleCollapsing(event: IExpansionPanelCancelableEventArgs)
* ```
* ```html
* <igx-expansion-panel (contentCollapsing)="handleCollapsing($event)">
* ...
* </igx-expansion-panel>
* ```
*/
this.contentCollapsing = new EventEmitter();
/**
* Emitted when the expansion panel finishes collapsing
* ```typescript
* handleCollapsed(event: IExpansionPanelEventArgs)
* ```
* ```html
* <igx-expansion-panel (contentCollapsed)="handleCollapsed($event)">
* ...
* </igx-expansion-panel>
* ```
*/
this.contentCollapsed = new EventEmitter();
/**
* Emitted when the expansion panel starts expanding
* ```typescript
* handleExpanding(event: IExpansionPanelCancelableEventArgs)
* ```
* ```html
* <igx-expansion-panel (contentExpanding)="handleExpanding($event)">
* ...
* </igx-expansion-panel>
* ```
*/
this.contentExpanding = new EventEmitter();
/**
* Emitted when the expansion panel finishes expanding
* ```typescript
* handleExpanded(event: IExpansionPanelEventArgs)
* ```
* ```html
* <igx-expansion-panel (contentExpanded)="handleExpanded($event)">
* ...
* </igx-expansion-panel>
* ```
*/
this.contentExpanded = new EventEmitter();
}
/**
* Sets/gets the animation settings of the expansion panel component
* Open and Close animation should be passed
*
* Get
* ```typescript
* const currentAnimations = this.panel.animationSettings;
* ```
* Set
* ```typescript
* import { slideInLeft, slideOutRight } from 'igniteui-angular';
* ...
* this.panel.animationsSettings = {
* openAnimation: slideInLeft,
* closeAnimation: slideOutRight
* };
* ```
* or via template
* ```typescript
* import { slideInLeft, slideOutRight } from 'igniteui-angular';
* ...
* myCustomAnimationObject = {
* openAnimation: slideInLeft,
* closeAnimation: slideOutRight
* };
* ```html
* <igx-expansion-panel [animationSettings]='myCustomAnimationObject'>
* ...
* </igx-expansion-panel>
* ```
*/
get animationSettings() {
return this._animationSettings;
}
set animationSettings(value) {
this._animationSettings = value;
}
/**
* @hidden @internal
*/
get panelExpanded() {
return !this.collapsed;
}
/**
* @hidden
*/
get headerId() {
return this.header ? `${this.id}-header` : '';
}
/**
* @hidden @internal
*/
get nativeElement() {
return this.elementRef.nativeElement;
}
/** @hidden */
ngAfterContentInit() {
if (this.body && this.header) {
// schedule at end of turn:
Promise.resolve().then(() => {
this.body.labelledBy = this.body.labelledBy || this.headerId;
this.body.label = this.body.label || this.id + '-region';
});
}
}
/**
* Collapses the panel
*
* ```html
* <igx-expansion-panel #myPanel>
* ...
* </igx-expansion-panel>
* <button type="button" igxButton (click)="myPanel.collapse($event)">Collpase Panel</button>
* ```
*/
collapse(evt) {
// If expansion panel is already collapsed or is collapsing, do nothing
if (this.collapsed || this.closeAnimationPlayer) {
return;
}
const args = { event: evt, panel: this, owner: this, cancel: false };
this.contentCollapsing.emit(args);
if (args.cancel === true) {
return;
}
this.opened = false;
this.playCloseAnimation(this.body?.element, () => {
this.contentCollapsed.emit({ event: evt, owner: this });
this.collapsed = true;
this.collapsedChange.emit(true);
this.cdr.markForCheck();
});
}
/**
* Expands the panel
*
* ```html
* <igx-expansion-panel #myPanel>
* ...
* </igx-expansion-panel>
* <button type="button" igxButton (click)="myPanel.expand($event)">Expand Panel</button>
* ```
*/
expand(evt) {
if (!this.collapsed && !this.closeAnimationPlayer) { // Check if the panel is currently collapsing or already expanded
return;
}
const args = { event: evt, panel: this, owner: this, cancel: false };
this.contentExpanding.emit(args);
if (args.cancel === true) {
return;
}
this.collapsed = false;
this.opened = true;
this.collapsedChange.emit(false);
this.cdr.detectChanges();
this.playOpenAnimation(this.body?.element, () => {
this.contentExpanded.emit({ event: evt, owner: this });
});
}
/**
* Toggles the panel
*
* ```html
* <igx-expansion-panel #myPanel>
* ...
* </igx-expansion-panel>
* <button type="button" igxButton (click)="myPanel.toggle($event)">Expand Panel</button>
* ```
*/
toggle(evt) {
if (this.collapsed) {
this.open(evt);
}
else {
this.close(evt);
}
}
open(evt) {
this.expand(evt);
}
close(evt) {
this.collapse(evt);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExpansionPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxExpansionPanelComponent, isStandalone: true, selector: "igx-expansion-panel", inputs: { animationSettings: "animationSettings", id: "id", collapsed: ["collapsed", "collapsed", booleanAttribute] }, outputs: { collapsedChange: "collapsedChange", contentCollapsing: "contentCollapsing", contentCollapsed: "contentCollapsed", contentExpanding: "contentExpanding", contentExpanded: "contentExpanded" }, host: { properties: { "attr.id": "this.id", "class.igx-expansion-panel": "this.cssClass", "class.igx-expansion-panel--expanded": "this.opened", "attr.aria-expanded": "this.panelExpanded" } }, providers: [{ provide: IGX_EXPANSION_PANEL_COMPONENT, useExisting: IgxExpansionPanelComponent }], queries: [{ propertyName: "body", first: true, predicate: IgxExpansionPanelBodyComponent, descendants: true, read: IgxExpansionPanelBodyComponent }, { propertyName: "header", first: true, predicate: IgxExpansionPanelHeaderComponent, descendants: true, read: IgxExpansionPanelHeaderComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-expansion-panel-header\"></ng-content>\n@if (!collapsed) {\n <ng-content select=\"igx-expansion-panel-body\"></ng-content>\n}\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExpansionPanelComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-expansion-panel', providers: [{ provide: IGX_EXPANSION_PANEL_COMPONENT, useExisting: IgxExpansionPanelComponent }], imports: [], template: "<ng-content select=\"igx-expansion-panel-header\"></ng-content>\n@if (!collapsed) {\n <ng-content select=\"igx-expansion-panel-body\"></ng-content>\n}\n" }]
}], propDecorators: { animationSettings: [{
type: Input
}], id: [{
type: HostBinding,
args: ['attr.id']
}, {
type: Input
}], cssClass: [{
type: HostBinding,
args: ['class.igx-expansion-panel']
}], opened: [{
type: HostBinding,
args: ['class.igx-expansion-panel--expanded']
}], panelExpanded: [{
type: HostBinding,
args: ['attr.aria-expanded']
}], collapsed: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], collapsedChange: [{
type: Output
}], contentCollapsing: [{
type: Output
}], contentCollapsed: [{
type: Output
}], contentExpanding: [{
type: Output
}], contentExpanded: [{
type: Output
}], body: [{
type: ContentChild,
args: [IgxExpansionPanelBodyComponent, { read: IgxExpansionPanelBodyComponent }]
}], header: [{
type: ContentChild,
args: [IgxExpansionPanelHeaderComponent, { read: IgxExpansionPanelHeaderComponent }]
}] } });
/* NOTE: Expansion panel directives collection for ease-of-use import in standalone components scenario */
const IGX_EXPANSION_PANEL_DIRECTIVES = [
IgxExpansionPanelComponent,
IgxExpansionPanelHeaderComponent,
IgxExpansionPanelBodyComponent,
IgxExpansionPanelDescriptionDirective,
IgxExpansionPanelTitleDirective,
IgxExpansionPanelIconDirective
];
/**
* @hidden
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
class IgxExpansionPanelModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExpansionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxExpansionPanelModule, imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelBodyComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelTitleDirective, IgxExpansionPanelIconDirective], exports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelBodyComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelTitleDirective, IgxExpansionPanelIconDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExpansionPanelModule, imports: [IgxExpansionPanelHeaderComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExpansionPanelModule, decorators: [{
type: NgModule,
args: [{
imports: [
...IGX_EXPANSION_PANEL_DIRECTIVES
],
exports: [
...IGX_EXPANSION_PANEL_DIRECTIVES
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ExpansionPanelHeaderIconPosition, IGX_EXPANSION_PANEL_DIRECTIVES, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelIconDirective, IgxExpansionPanelModule, IgxExpansionPanelTitleDirective, ToggleAnimationPlayer };
//# sourceMappingURL=igniteui-angular-expansion-panel.mjs.map