UNPKG

primeng

Version:

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![npm version](https://badge.fury.io/js/primeng.svg)](https://badge.fury.io/js/primeng) [![Discord](https://img.shields.io/discord/557940238991753

2 lines 7.76 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/animations"),require("@angular/common"),require("primeng/api")):"function"==typeof define&&define.amd?define("primeng/accordion",["exports","@angular/core","@angular/animations","@angular/common","primeng/api"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).primeng=e.primeng||{},e.primeng.accordion={}),e.ng.core,e.ng.animations,e.ng.common,e.primeng.api)}(this,(function(e,t,n,i,a){"use strict";var o=0,r=function(){function e(e,n){this.changeDetector=n,this.cache=!0,this.selectedChange=new t.EventEmitter,this.transitionOptions="400ms cubic-bezier(0.86, 0, 0.07, 1)",this.id="p-accordiontab-"+o++,this.accordion=e}return Object.defineProperty(e.prototype,"selected",{get:function(){return this._selected},set:function(e){this._selected=e,this.loaded||(this._selected&&this.cache&&(this.loaded=!0),this.changeDetector.markForCheck())},enumerable:!1,configurable:!0}),e.prototype.ngAfterContentInit=function(){var e=this;this.templates.forEach((function(t){switch(t.getType()){case"content":e.contentTemplate=t.template;break;case"header":e.headerTemplate=t.template;break;default:e.contentTemplate=t.template}}))},e.prototype.toggle=function(e){if(this.disabled)return!1;var t=this.findTabIndex();if(this.selected)this.selected=!1,this.accordion.onClose.emit({originalEvent:e,index:t});else{if(!this.accordion.multiple)for(var n=0;n<this.accordion.tabs.length;n++)this.accordion.tabs[n].selected=!1,this.accordion.tabs[n].selectedChange.emit(!1),this.accordion.tabs[n].changeDetector.markForCheck();this.selected=!0,this.loaded=!0,this.accordion.onOpen.emit({originalEvent:e,index:t})}this.selectedChange.emit(this.selected),this.accordion.updateActiveIndex(),this.changeDetector.markForCheck(),e.preventDefault()},e.prototype.findTabIndex=function(){for(var e=-1,t=0;t<this.accordion.tabs.length;t++)if(this.accordion.tabs[t]==this){e=t;break}return e},Object.defineProperty(e.prototype,"hasHeaderFacet",{get:function(){return this.headerFacet&&this.headerFacet.length>0},enumerable:!1,configurable:!0}),e.prototype.onKeydown=function(e){32!==e.which&&13!==e.which||(this.toggle(e),e.preventDefault())},e.prototype.ngOnDestroy=function(){this.accordion.tabs.splice(this.findTabIndex(),1)},e}();r.decorators=[{type:t.Component,args:[{selector:"p-accordionTab",template:'\n <div class="p-accordion-tab" [ngClass]="{\'p-accordion-tab-active\': selected}">\n <div class="p-accordion-header" [ngClass]="{\'p-highlight\': selected, \'p-disabled\': disabled}">\n <a role="tab" class="p-accordion-header-link" (click)="toggle($event)" (keydown)="onKeydown($event)" [attr.tabindex]="disabled ? null : 0"\n [attr.id]="id" [attr.aria-controls]="id + \'-content\'" [attr.aria-expanded]="selected">\n <span class="p-accordion-toggle-icon" [ngClass]="selected ? accordion.collapseIcon : accordion.expandIcon"></span>\n <span class="p-accordion-header-text" *ngIf="!hasHeaderFacet">\n {{header}}\n </span>\n <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>\n <ng-content select="p-header" *ngIf="hasHeaderFacet"></ng-content>\n </a>\n </div>\n <div [attr.id]="id + \'-content\'" class="p-toggleable-content" [@tabContent]="selected ? {value: \'visible\', params: {transitionParams: transitionOptions}} : {value: \'hidden\', params: {transitionParams: transitionOptions}}"\n role="region" [attr.aria-hidden]="!selected" [attr.aria-labelledby]="id">\n <div class="p-accordion-content">\n <ng-content></ng-content>\n <ng-container *ngIf="contentTemplate && (cache ? loaded : selected)">\n <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n ',animations:[n.trigger("tabContent",[n.state("hidden",n.style({height:"0",overflow:"hidden"})),n.state("visible",n.style({height:"*"})),n.transition("visible <=> hidden",[n.style({overflow:"hidden"}),n.animate("{{transitionParams}}")]),n.transition("void => *",n.animate(0))])],changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None,styles:[".p-accordion-header-link{-ms-user-select:none;-webkit-user-select:none;align-items:center;cursor:pointer;display:flex;position:relative;text-decoration:none;user-select:none}.p-accordion-header-link:focus{z-index:1}.p-accordion-header-text{line-height:1}"]}]}],r.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[t.forwardRef((function(){return s}))]}]},{type:t.ChangeDetectorRef}]},r.propDecorators={header:[{type:t.Input}],disabled:[{type:t.Input}],cache:[{type:t.Input}],selectedChange:[{type:t.Output}],transitionOptions:[{type:t.Input}],headerFacet:[{type:t.ContentChildren,args:[a.Header]}],templates:[{type:t.ContentChildren,args:[a.PrimeTemplate]}],selected:[{type:t.Input}]};var s=function(){function e(e,n){this.el=e,this.changeDetector=n,this.onClose=new t.EventEmitter,this.onOpen=new t.EventEmitter,this.expandIcon="pi pi-fw pi-chevron-right",this.collapseIcon="pi pi-fw pi-chevron-down",this.activeIndexChange=new t.EventEmitter,this.tabs=[]}return e.prototype.ngAfterContentInit=function(){var e=this;this.initTabs(),this.tabListSubscription=this.tabList.changes.subscribe((function(t){e.initTabs()}))},e.prototype.initTabs=function(){this.tabs=this.tabList.toArray(),this.updateSelectionState(),this.changeDetector.markForCheck()},e.prototype.getBlockableElement=function(){return this.el.nativeElement.children[0]},Object.defineProperty(e.prototype,"activeIndex",{get:function(){return this._activeIndex},set:function(e){this._activeIndex=e,this.preventActiveIndexPropagation?this.preventActiveIndexPropagation=!1:this.updateSelectionState()},enumerable:!1,configurable:!0}),e.prototype.updateSelectionState=function(){if(this.tabs&&this.tabs.length&&null!=this._activeIndex)for(var e=0;e<this.tabs.length;e++){var t=this.multiple?this._activeIndex.includes(e):e===this._activeIndex;t!==this.tabs[e].selected&&(this.tabs[e].selected=t,this.tabs[e].selectedChange.emit(t),this.tabs[e].changeDetector.markForCheck())}},e.prototype.updateActiveIndex=function(){var e=this,t=this.multiple?[]:null;this.tabs.forEach((function(n,i){if(n.selected){if(!e.multiple)return void(t=i);t.push(i)}})),this.preventActiveIndexPropagation=!0,this.activeIndexChange.emit(t)},e.prototype.ngOnDestroy=function(){this.tabListSubscription&&this.tabListSubscription.unsubscribe()},e}();s.decorators=[{type:t.Component,args:[{selector:"p-accordion",template:'\n <div [ngClass]="\'p-accordion p-component\'" [ngStyle]="style" [class]="styleClass" role="tablist">\n <ng-content></ng-content>\n </div>\n ',changeDetection:t.ChangeDetectionStrategy.OnPush}]}],s.ctorParameters=function(){return[{type:t.ElementRef},{type:t.ChangeDetectorRef}]},s.propDecorators={multiple:[{type:t.Input}],onClose:[{type:t.Output}],onOpen:[{type:t.Output}],style:[{type:t.Input}],styleClass:[{type:t.Input}],expandIcon:[{type:t.Input}],collapseIcon:[{type:t.Input}],activeIndexChange:[{type:t.Output}],tabList:[{type:t.ContentChildren,args:[r]}],activeIndex:[{type:t.Input}]};var c=function(){};c.decorators=[{type:t.NgModule,args:[{imports:[i.CommonModule],exports:[s,r,a.SharedModule],declarations:[s,r]}]}],e.Accordion=s,e.AccordionModule=c,e.AccordionTab=r,Object.defineProperty(e,"__esModule",{value:!0})})); //# sourceMappingURL=primeng-accordion.umd.min.js.map