primeng/panel/primeng-panel.metadata.json

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [![npm downloads](https://img.shields.io/npm/dm/primeng.sv

{"__symbolic":"module","version":4,"metadata":{"Panel":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"p-panel","template":"\n        <div [attr.id]=\"id\" [ngClass]=\"{'p-panel p-component': true, 'p-panel-toggleable': toggleable}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <div class=\"p-panel-header\" *ngIf=\"showHeader\" (click)=\"onHeaderClick($event)\" [attr.id]=\"id + '-titlebar'\">\n                <span class=\"p-panel-title\" *ngIf=\"header\" [attr.id]=\"id + '_header'\">{{header}}</span>\n                <ng-content select=\"p-header\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                <div class=\"p-panel-icons\">\n                    <ng-template *ngTemplateOutlet=\"iconTemplate\"></ng-template>\n                    <button *ngIf=\"toggleable\" type=\"button\" [attr.id]=\"id + '-label'\" class=\"p-panel-header-icon p-panel-toggler p-link\" pRipple\n                        (click)=\"onIconClick($event)\" (keydown.enter)=\"onIconClick($event)\" [attr.aria-controls]=\"id + '-content'\" role=\"tab\" [attr.aria-expanded]=\"!collapsed\">\n                        <span [class]=\"collapsed ? expandIcon : collapseIcon\"></span>\n                    </button>\n                </div>\n            </div>\n            <div [attr.id]=\"id + '-content'\" class=\"p-toggleable-content\" [@panelContent]=\"collapsed ? {value: 'hidden', params: {transitionParams: animating ? transitionOptions : '0ms', height: '0', opacity:'0'}} : {value: 'visible', params: {transitionParams: animating ? transitionOptions : '0ms', height: '*', opacity: '1'}}\" (@panelContent.done)=\"onToggleDone($event)\"\n                role=\"region\" [attr.aria-hidden]=\"collapsed\" [attr.aria-labelledby]=\"id  + '-titlebar'\">\n                <div class=\"p-panel-content\">\n                    <ng-content></ng-content>\n                    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n                </div>\n                \n                <div class=\"p-panel-footer\" *ngIf=\"footerFacet || footerTemplate\">\n                    <ng-content select=\"p-footer\"></ng-content>\n                    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n                </div>\n            </div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":40,"character":8},"arguments":["panelContent",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":41,"character":12},"arguments":["hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":41,"character":28},"arguments":[{"height":"0","overflow":"hidden"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":45,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":45,"character":26},"arguments":[{"height":"{{height}}"}]},{"params":{"height":"0"}}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":48,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":48,"character":29},"arguments":[{"height":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":51,"character":12},"arguments":["visible <=> hidden",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":51,"character":46},"arguments":[{"overflow":"hidden"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":51,"character":76},"arguments":["{{transitionParams}}"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":52,"character":12},"arguments":["void => hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":52,"character":41},"arguments":["{{transitionParams}}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":53,"character":12},"arguments":["void => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":53,"character":42},"arguments":["{{transitionParams}}"]}]}]]}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":56,"character":20},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":57,"character":19},"member":"None"},"styles":[".p-panel-header{align-items:center;display:flex;justify-content:space-between}.p-panel-title{line-height:1}.p-panel-header-icon{align-items:center;cursor:pointer;display:inline-flex;justify-content:center;overflow:hidden;position:relative;text-decoration:none}"]}]}],"members":{"toggleable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"collapsed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"expandIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"collapseIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"toggler":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"collapsedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":80,"character":5}}]}],"onBeforeToggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":82,"character":5}}]}],"onAfterToggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":84,"character":5}}]}],"transitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":5}}]}],"footerFacet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":88,"character":5},"arguments":[{"__symbolic":"reference","module":"primeng/api","name":"Footer","line":88,"character":18}]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":90,"character":5},"arguments":[{"__symbolic":"reference","module":"primeng/api","name":"PrimeTemplate","line":90,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":104,"character":28}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"onHeaderClick":[{"__symbolic":"method"}],"onIconClick":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"expand":[{"__symbolic":"method"}],"collapse":[{"__symbolic":"method"}],"getBlockableElement":[{"__symbolic":"method"}],"onToggleDone":[{"__symbolic":"method"}]}},"PanelModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":183,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":184,"character":14},{"__symbolic":"reference","module":"primeng/api","name":"SharedModule","line":184,"character":27},{"__symbolic":"reference","module":"primeng/ripple","name":"RippleModule","line":184,"character":40}],"exports":[{"__symbolic":"reference","name":"Panel"},{"__symbolic":"reference","module":"primeng/api","name":"SharedModule","line":185,"character":20}],"declarations":[{"__symbolic":"reference","name":"Panel"}]}]}],"members":{}}},"origins":{"Panel":"./panel","PanelModule":"./panel"},"importAs":"primeng/panel"}