primeng - npm Package Compare versions

Comparing version 6.1.4 to 6.1.5

components/accordion/accordion.d.ts

@@ -11,2 +11,3 @@ import { ElementRef, AfterContentInit, OnDestroy, EventEmitter, QueryList, ChangeDetectorRef } from '@angular/core';
     selectedChange: EventEmitter<any>;
+    transitionOptions: string;
     headerFacet: QueryList<Header>;
@@ -13,0 +14,0 @@ animating: boolean;

components/accordion/accordion.js

@@ -24,2 +24,3 @@ "use strict";
         this.selectedChange = new core_1.EventEmitter();
+        this.transitionOptions = '400ms cubic-bezier(0.86, 0, 0.07, 1)';
         this.id = "ui-accordiontab-" + idx++;
@@ -97,2 +98,6 @@ }
     __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], AccordionTab.prototype, "transitionOptions", void 0);
+    __decorate([
         core_1.ContentChildren(shared_1.Header),
@@ -104,3 +109,3 @@ __metadata("design:type", core_1.QueryList)
             selector: 'p-accordionTab',
-            template: "\n        <div class=\"ui-accordion-header ui-state-default ui-corner-all\" [ngClass]=\"{'ui-state-active': selected,'ui-state-disabled':disabled}\">\n            <a href=\"#\" [attr.id]=\"id\" [attr.aria-controls]=\"id + '-content'\" role=\"tab\" [attr.aria-expanded]=\"selected\" (click)=\"toggle($event)\" (keydown.space)=\"toggle($event)\">\n                <span class=\"ui-accordion-toggle-icon\" [ngClass]=\"selected ? accordion.collapseIcon : accordion.expandIcon\"></span>\n                <span class=\"ui-accordion-header-text\" *ngIf=\"!hasHeaderFacet\">\n                    {{header}}\n                </span>\n                <ng-content select=\"p-header\" *ngIf=\"hasHeaderFacet\"></ng-content>\n            </a>\n        </div>\n        <div [attr.id]=\"id + '-content'\" class=\"ui-accordion-content-wrapper\" [@tabContent]=\"selected ? 'visible' : 'hidden'\" (@tabContent.done)=\"onToggleDone($event)\"\n            [ngClass]=\"{'ui-accordion-content-wrapper-overflown': !selected||animating}\" \n            role=\"tabpanel\" [attr.aria-hidden]=\"!selected\" [attr.aria-labelledby]=\"id\">\n            <div class=\"ui-accordion-content ui-widget-content\" *ngIf=\"lazy ? selected : true\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n    ",
+            template: "\n        <div class=\"ui-accordion-header ui-state-default ui-corner-all\" [ngClass]=\"{'ui-state-active': selected,'ui-state-disabled':disabled}\">\n            <a tabindex=\"0\" [attr.id]=\"id\" [attr.aria-controls]=\"id + '-content'\" role=\"tab\" [attr.aria-expanded]=\"selected\" (click)=\"toggle($event)\" \n                (keydown.space)=\"toggle($event)\" (keydown.enter)=\"toggle($event)\">\n                <span class=\"ui-accordion-toggle-icon\" [ngClass]=\"selected ? accordion.collapseIcon : accordion.expandIcon\"></span>\n                <span class=\"ui-accordion-header-text\" *ngIf=\"!hasHeaderFacet\">\n                    {{header}}\n                </span>\n                <ng-content select=\"p-header\" *ngIf=\"hasHeaderFacet\"></ng-content>\n            </a>\n        </div>\n        <div [attr.id]=\"id + '-content'\" class=\"ui-accordion-content-wrapper\" [@tabContent]=\"selected ? {value: 'visible', params: {transitionParams: transitionOptions}} : {value: 'hidden', params: {transitionParams: transitionOptions}}\" (@tabContent.done)=\"onToggleDone($event)\"\n            [ngClass]=\"{'ui-accordion-content-wrapper-overflown': !selected||animating}\" \n            role=\"tabpanel\" [attr.aria-hidden]=\"!selected\" [attr.aria-labelledby]=\"id\">\n            <div class=\"ui-accordion-content ui-widget-content\" *ngIf=\"lazy ? selected : true\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n    ",
             animations: [
@@ -114,3 +119,3 @@ animations_1.trigger('tabContent', [
                     })),
-                    animations_1.transition('visible <=> hidden', animations_1.animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+                    animations_1.transition('visible <=> hidden', animations_1.animate('{{transitionParams}}'))
                 ])
@@ -117,0 +122,0 @@ ]

components/accordion/accordion.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"AccordionTab":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"p-accordionTab","template":"\n        <div class=\"ui-accordion-header ui-state-default ui-corner-all\" [ngClass]=\"{'ui-state-active': selected,'ui-state-disabled':disabled}\">\n            <a href=\"#\" [attr.id]=\"id\" [attr.aria-controls]=\"id + '-content'\" role=\"tab\" [attr.aria-expanded]=\"selected\" (click)=\"toggle($event)\" (keydown.space)=\"toggle($event)\">\n                <span class=\"ui-accordion-toggle-icon\" [ngClass]=\"selected ? accordion.collapseIcon : accordion.expandIcon\"></span>\n                <span class=\"ui-accordion-header-text\" *ngIf=\"!hasHeaderFacet\">\n                    {{header}}\n                </span>\n                <ng-content select=\"p-header\" *ngIf=\"hasHeaderFacet\"></ng-content>\n            </a>\n        </div>\n        <div [attr.id]=\"id + '-content'\" class=\"ui-accordion-content-wrapper\" [@tabContent]=\"selected ? 'visible' : 'hidden'\" (@tabContent.done)=\"onToggleDone($event)\"\n            [ngClass]=\"{'ui-accordion-content-wrapper-overflown': !selected||animating}\" \n            role=\"tabpanel\" [attr.aria-hidden]=\"!selected\" [attr.aria-labelledby]=\"id\">\n            <div class=\"ui-accordion-content ui-widget-content\" *ngIf=\"lazy ? selected : true\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":31,"character":8},"arguments":["tabContent",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":32,"character":12},"arguments":["hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":32,"character":28},"arguments":[{"height":"0"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":35,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":35,"character":29},"arguments":[{"height":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":38,"character":12},"arguments":["visible <=> hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":38,"character":45},"arguments":["400ms cubic-bezier(0.86, 0, 0.07, 1)"]}]}]]}]}]}],"members":{"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"selectedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":50,"character":5}}]}],"headerFacet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":52,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"Header","line":52,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":58,"character":18},"arguments":[{"__symbolic":"reference","name":"Accordion"}]}]],"parameters":[{"__symbolic":"reference","name":"Accordion"}]}],"toggle":[{"__symbolic":"method"}],"findTabIndex":[{"__symbolic":"method"}],"onToggleDone":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"Accordion":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":117,"character":1},"arguments":[{"selector":"p-accordion","template":"\n        <div [ngClass]=\"'ui-accordion ui-widget ui-helper-reset'\" [ngStyle]=\"style\" [class]=\"styleClass\" role=\"tablist\">\n            <ng-content></ng-content>\n        </div>\n    "}]}],"members":{"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":5}}]}],"onClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":129,"character":5}}]}],"onOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":131,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":135,"character":5}}]}],"expandIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":5}}]}],"collapseIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":139,"character":5}}]}],"lazy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":5}}]}],"tabList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":143,"character":5},"arguments":[{"__symbolic":"reference","name":"AccordionTab"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":151,"character":27},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":151,"character":62}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"initTabs":[{"__symbolic":"method"}],"getBlockableElement":[{"__symbolic":"method"}],"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":171,"character":5}}]}],"updateSelectionState":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"AccordionModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":203,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":204,"character":14}],"exports":[{"__symbolic":"reference","name":"Accordion"},{"__symbolic":"reference","name":"AccordionTab"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":205,"character":37}],"declarations":[{"__symbolic":"reference","name":"Accordion"},{"__symbolic":"reference","name":"AccordionTab"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"AccordionTab":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"p-accordionTab","template":"\n        <div class=\"ui-accordion-header ui-state-default ui-corner-all\" [ngClass]=\"{'ui-state-active': selected,'ui-state-disabled':disabled}\">\n            <a tabindex=\"0\" [attr.id]=\"id\" [attr.aria-controls]=\"id + '-content'\" role=\"tab\" [attr.aria-expanded]=\"selected\" (click)=\"toggle($event)\" \n                (keydown.space)=\"toggle($event)\" (keydown.enter)=\"toggle($event)\">\n                <span class=\"ui-accordion-toggle-icon\" [ngClass]=\"selected ? accordion.collapseIcon : accordion.expandIcon\"></span>\n                <span class=\"ui-accordion-header-text\" *ngIf=\"!hasHeaderFacet\">\n                    {{header}}\n                </span>\n                <ng-content select=\"p-header\" *ngIf=\"hasHeaderFacet\"></ng-content>\n            </a>\n        </div>\n        <div [attr.id]=\"id + '-content'\" class=\"ui-accordion-content-wrapper\" [@tabContent]=\"selected ? {value: 'visible', params: {transitionParams: transitionOptions}} : {value: 'hidden', params: {transitionParams: transitionOptions}}\" (@tabContent.done)=\"onToggleDone($event)\"\n            [ngClass]=\"{'ui-accordion-content-wrapper-overflown': !selected||animating}\" \n            role=\"tabpanel\" [attr.aria-hidden]=\"!selected\" [attr.aria-labelledby]=\"id\">\n            <div class=\"ui-accordion-content ui-widget-content\" *ngIf=\"lazy ? selected : true\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":32,"character":8},"arguments":["tabContent",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":33,"character":12},"arguments":["hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":33,"character":28},"arguments":[{"height":"0"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":36,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":36,"character":29},"arguments":[{"height":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":39,"character":12},"arguments":["visible <=> hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":39,"character":45},"arguments":["{{transitionParams}}"]}]}]]}]}]}],"members":{"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"selectedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":51,"character":5}}]}],"transitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"headerFacet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":55,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"Header","line":55,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":61,"character":18},"arguments":[{"__symbolic":"reference","name":"Accordion"}]}]],"parameters":[{"__symbolic":"reference","name":"Accordion"}]}],"toggle":[{"__symbolic":"method"}],"findTabIndex":[{"__symbolic":"method"}],"onToggleDone":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"Accordion":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":120,"character":1},"arguments":[{"selector":"p-accordion","template":"\n        <div [ngClass]=\"'ui-accordion ui-widget ui-helper-reset'\" [ngStyle]=\"style\" [class]=\"styleClass\" role=\"tablist\">\n            <ng-content></ng-content>\n        </div>\n    "}]}],"members":{"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":130,"character":5}}]}],"onClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":132,"character":5}}]}],"onOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":134,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":136,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":5}}]}],"expandIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":140,"character":5}}]}],"collapseIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"character":5}}]}],"lazy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":144,"character":5}}]}],"tabList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":146,"character":5},"arguments":[{"__symbolic":"reference","name":"AccordionTab"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":154,"character":27},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":154,"character":62}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"initTabs":[{"__symbolic":"method"}],"getBlockableElement":[{"__symbolic":"method"}],"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":174,"character":5}}]}],"updateSelectionState":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"AccordionModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":206,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":207,"character":14}],"exports":[{"__symbolic":"reference","name":"Accordion"},{"__symbolic":"reference","name":"AccordionTab"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":208,"character":37}],"declarations":[{"__symbolic":"reference","name":"Accordion"},{"__symbolic":"reference","name":"AccordionTab"}]}]}]}}}]

components/autocomplete/autocomplete.d.ts

@@ -33,2 +33,4 @@ import { ElementRef, AfterViewChecked, AfterContentInit, DoCheck, EventEmitter, QueryList, TemplateRef, Renderer2, ChangeDetectorRef, IterableDiffers } from '@angular/core';
     baseZIndex: number;
+    ariaLabel: string;
+    ariaLabelledBy: string;
     completeMethod: EventEmitter<any>;
@@ -51,2 +53,4 @@ onSelect: EventEmitter<any>;
     immutable: boolean;
+    showTransitionOptions: string;
+    hideTransitionOptions: string;
     inputEL: ElementRef;
@@ -53,0 +57,0 @@ multiInputEL: ElementRef;

components/autocomplete/autocomplete.js

@@ -50,2 +50,4 @@ "use strict";
         this.immutable = true;
+        this.showTransitionOptions = '225ms ease-out';
+        this.hideTransitionOptions = '195ms ease-in';
         this.onModelChange = function () { };
@@ -560,2 +562,10 @@ this.onModelTouched = function () { };
     __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], AutoComplete.prototype, "ariaLabel", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], AutoComplete.prototype, "ariaLabelledBy", void 0);
+    __decorate([
         core_1.Output(),
@@ -629,2 +639,10 @@ __metadata("design:type", core_1.EventEmitter)
     __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], AutoComplete.prototype, "showTransitionOptions", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], AutoComplete.prototype, "hideTransitionOptions", void 0);
+    __decorate([
         core_1.ViewChild('in'),
@@ -657,3 +675,3 @@ __metadata("design:type", core_1.ElementRef)
             selector: 'p-autoComplete',
-            template: "\n        <span [ngClass]=\"{'ui-autocomplete ui-widget':true,'ui-autocomplete-dd':dropdown,'ui-autocomplete-multiple':multiple}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <input *ngIf=\"!multiple\" #in [attr.type]=\"type\" [attr.id]=\"inputId\" [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\" autocomplete=\"off\" [attr.required]=\"required\"\n            [ngClass]=\"'ui-inputtext ui-widget ui-state-default ui-corner-all ui-autocomplete-input'\" [value]=\"inputFieldValue\"\n            (click)=\"onInputClick($event)\" (input)=\"onInput($event)\" (keydown)=\"onKeydown($event)\" (keyup)=\"onKeyup($event)\" (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" (change)=\"onInputChange($event)\" (paste)=\"onInputPaste($event)\"\n            [attr.placeholder]=\"placeholder\" [attr.size]=\"size\" [attr.maxlength]=\"maxlength\" [attr.tabindex]=\"tabindex\" [readonly]=\"readonly\" [disabled]=\"disabled\"\n            ><ul *ngIf=\"multiple\" #multiContainer class=\"ui-autocomplete-multiple-container ui-widget ui-inputtext ui-state-default ui-corner-all\" [ngClass]=\"{'ui-state-disabled':disabled,'ui-state-focus':focus}\" (click)=\"multiIn.focus()\">\n                <li #token *ngFor=\"let val of value\" class=\"ui-autocomplete-token ui-state-highlight ui-corner-all\">\n                    <span class=\"ui-autocomplete-token-icon pi pi-fw pi-times\" (click)=\"removeItem(token)\" *ngIf=\"!disabled\"></span>\n                    <span *ngIf=\"!selectedItemTemplate\" class=\"ui-autocomplete-token-label\">{{field ? objectUtils.resolveFieldData(val, field): val}}</span>\n                    <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: {$implicit: val}\"></ng-container>\n                </li>\n                <li class=\"ui-autocomplete-input-token\">\n                    <input #multiIn [attr.type]=\"type\" [attr.id]=\"inputId\" [disabled]=\"disabled\" [attr.placeholder]=\"(value&&value.length ? null : placeholder)\" [attr.tabindex]=\"tabindex\" (input)=\"onInput($event)\"  (click)=\"onInputClick($event)\"\n                            (keydown)=\"onKeydown($event)\" [readonly]=\"readonly\" (keyup)=\"onKeyup($event)\" (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" (change)=\"onInputChange($event)\" (paste)=\"onInputPaste($event)\" autocomplete=\"off\" [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\">\n                </li>\n            </ul\n            ><i *ngIf=\"loading\" class=\"ui-autocomplete-loader pi pi-spinner pi-spin\"></i><button #ddBtn type=\"button\" pButton icon=\"pi pi-fw pi-caret-down\" class=\"ui-autocomplete-dropdown\" [disabled]=\"disabled\"\n                (click)=\"handleDropdownClick($event)\" *ngIf=\"dropdown\"></button>\n            <div #panel *ngIf=\"overlayVisible\" class=\"ui-autocomplete-panel ui-widget ui-widget-content ui-corner-all ui-shadow\" [style.max-height]=\"scrollHeight\"\n                [@overlayAnimation]=\"'visible'\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" (@overlayAnimation.done)=\"onOverlayAnimationDone($event)\">\n                <ul class=\"ui-autocomplete-items ui-autocomplete-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\">\n                    <li *ngFor=\"let option of suggestions; let idx = index\" [ngClass]=\"{'ui-autocomplete-list-item ui-corner-all':true,'ui-state-highlight':(highlightOption==option)}\"\n                        (mouseenter)=\"highlightOption=option\" (mouseleave)=\"highlightOption=null\" (click)=\"selectItem(option)\">\n                        <span *ngIf=\"!itemTemplate\">{{field ? objectUtils.resolveFieldData(option, field) : option}}</span>\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: option, index: idx}\"></ng-container>\n                    </li>\n                    <li *ngIf=\"noResults && emptyMessage\" class=\"ui-autocomplete-list-item ui-corner-all\">{{emptyMessage}}</li>\n                </ul>\n            </div>\n        </span>\n    ",
+            template: "\n        <span [ngClass]=\"{'ui-autocomplete ui-widget':true,'ui-autocomplete-dd':dropdown,'ui-autocomplete-multiple':multiple}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <input *ngIf=\"!multiple\" #in [attr.type]=\"type\" [attr.id]=\"inputId\" [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\" autocomplete=\"off\" [attr.required]=\"required\"\n            [ngClass]=\"'ui-inputtext ui-widget ui-state-default ui-corner-all ui-autocomplete-input'\" [value]=\"inputFieldValue\"\n            (click)=\"onInputClick($event)\" (input)=\"onInput($event)\" (keydown)=\"onKeydown($event)\" (keyup)=\"onKeyup($event)\" (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" (change)=\"onInputChange($event)\" (paste)=\"onInputPaste($event)\"\n            [attr.placeholder]=\"placeholder\" [attr.size]=\"size\" [attr.maxlength]=\"maxlength\" [attr.tabindex]=\"tabindex\" [readonly]=\"readonly\" [disabled]=\"disabled\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledBy\" [attr.aria-required]=\"required\"\n            ><ul *ngIf=\"multiple\" #multiContainer class=\"ui-autocomplete-multiple-container ui-widget ui-inputtext ui-state-default ui-corner-all\" [ngClass]=\"{'ui-state-disabled':disabled,'ui-state-focus':focus}\" (click)=\"multiIn.focus()\">\n                <li #token *ngFor=\"let val of value\" class=\"ui-autocomplete-token ui-state-highlight ui-corner-all\">\n                    <span class=\"ui-autocomplete-token-icon pi pi-fw pi-times\" (click)=\"removeItem(token)\" *ngIf=\"!disabled\"></span>\n                    <span *ngIf=\"!selectedItemTemplate\" class=\"ui-autocomplete-token-label\">{{field ? objectUtils.resolveFieldData(val, field): val}}</span>\n                    <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: {$implicit: val}\"></ng-container>\n                </li>\n                <li class=\"ui-autocomplete-input-token\">\n                    <input #multiIn [attr.type]=\"type\" [attr.id]=\"inputId\" [disabled]=\"disabled\" [attr.placeholder]=\"(value&&value.length ? null : placeholder)\" [attr.tabindex]=\"tabindex\" (input)=\"onInput($event)\"  (click)=\"onInputClick($event)\"\n                            (keydown)=\"onKeydown($event)\" [readonly]=\"readonly\" (keyup)=\"onKeyup($event)\" (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" (change)=\"onInputChange($event)\" (paste)=\"onInputPaste($event)\" autocomplete=\"off\" \n                            [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledBy\" [attr.aria-required]=\"required\">\n                </li>\n            </ul\n            ><i *ngIf=\"loading\" class=\"ui-autocomplete-loader pi pi-spinner pi-spin\"></i><button #ddBtn type=\"button\" pButton icon=\"pi pi-fw pi-caret-down\" class=\"ui-autocomplete-dropdown\" [disabled]=\"disabled\"\n                (click)=\"handleDropdownClick($event)\" *ngIf=\"dropdown\"></button>\n            <div #panel *ngIf=\"overlayVisible\" class=\"ui-autocomplete-panel ui-widget ui-widget-content ui-corner-all ui-shadow\" [style.max-height]=\"scrollHeight\"\n                [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" (@overlayAnimation.done)=\"onOverlayAnimationDone($event)\">\n                <ul class=\"ui-autocomplete-items ui-autocomplete-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\">\n                    <li *ngFor=\"let option of suggestions; let idx = index\" [ngClass]=\"{'ui-autocomplete-list-item ui-corner-all':true,'ui-state-highlight':(highlightOption==option)}\"\n                        (mouseenter)=\"highlightOption=option\" (mouseleave)=\"highlightOption=null\" (click)=\"selectItem(option)\">\n                        <span *ngIf=\"!itemTemplate\">{{field ? objectUtils.resolveFieldData(option, field) : option}}</span>\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: option, index: idx}\"></ng-container>\n                    </li>\n                    <li *ngIf=\"noResults && emptyMessage\" class=\"ui-autocomplete-list-item ui-corner-all\">{{emptyMessage}}</li>\n                </ul>\n            </div>\n        </span>\n    ",
             animations: [
@@ -669,4 +687,4 @@ animations_1.trigger('overlayAnimation', [
                     })),
-                    animations_1.transition('void => visible', animations_1.animate('225ms ease-out')),
-                    animations_1.transition('visible => void', animations_1.animate('195ms ease-in'))
+                    animations_1.transition('void => visible', animations_1.animate('{{showTransitionParams}}')),
+                    animations_1.transition('visible => void', animations_1.animate('{{hideTransitionParams}}'))
                 ])
@@ -673,0 +691,0 @@ ],

components/autocomplete/autocomplete.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"AUTOCOMPLETE_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":11,"character":11},"useExisting":{"__symbolic":"reference","name":"AutoComplete"},"multi":true},"AutoComplete":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"p-autoComplete","template":"\n        <span [ngClass]=\"{'ui-autocomplete ui-widget':true,'ui-autocomplete-dd':dropdown,'ui-autocomplete-multiple':multiple}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <input *ngIf=\"!multiple\" #in [attr.type]=\"type\" [attr.id]=\"inputId\" [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\" autocomplete=\"off\" [attr.required]=\"required\"\n            [ngClass]=\"'ui-inputtext ui-widget ui-state-default ui-corner-all ui-autocomplete-input'\" [value]=\"inputFieldValue\"\n            (click)=\"onInputClick($event)\" (input)=\"onInput($event)\" (keydown)=\"onKeydown($event)\" (keyup)=\"onKeyup($event)\" (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" (change)=\"onInputChange($event)\" (paste)=\"onInputPaste($event)\"\n            [attr.placeholder]=\"placeholder\" [attr.size]=\"size\" [attr.maxlength]=\"maxlength\" [attr.tabindex]=\"tabindex\" [readonly]=\"readonly\" [disabled]=\"disabled\"\n            ><ul *ngIf=\"multiple\" #multiContainer class=\"ui-autocomplete-multiple-container ui-widget ui-inputtext ui-state-default ui-corner-all\" [ngClass]=\"{'ui-state-disabled':disabled,'ui-state-focus':focus}\" (click)=\"multiIn.focus()\">\n                <li #token *ngFor=\"let val of value\" class=\"ui-autocomplete-token ui-state-highlight ui-corner-all\">\n                    <span class=\"ui-autocomplete-token-icon pi pi-fw pi-times\" (click)=\"removeItem(token)\" *ngIf=\"!disabled\"></span>\n                    <span *ngIf=\"!selectedItemTemplate\" class=\"ui-autocomplete-token-label\">{{field ? objectUtils.resolveFieldData(val, field): val}}</span>\n                    <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: {$implicit: val}\"></ng-container>\n                </li>\n                <li class=\"ui-autocomplete-input-token\">\n                    <input #multiIn [attr.type]=\"type\" [attr.id]=\"inputId\" [disabled]=\"disabled\" [attr.placeholder]=\"(value&&value.length ? null : placeholder)\" [attr.tabindex]=\"tabindex\" (input)=\"onInput($event)\"  (click)=\"onInputClick($event)\"\n                            (keydown)=\"onKeydown($event)\" [readonly]=\"readonly\" (keyup)=\"onKeyup($event)\" (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" (change)=\"onInputChange($event)\" (paste)=\"onInputPaste($event)\" autocomplete=\"off\" [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\">\n                </li>\n            </ul\n            ><i *ngIf=\"loading\" class=\"ui-autocomplete-loader pi pi-spinner pi-spin\"></i><button #ddBtn type=\"button\" pButton icon=\"pi pi-fw pi-caret-down\" class=\"ui-autocomplete-dropdown\" [disabled]=\"disabled\"\n                (click)=\"handleDropdownClick($event)\" *ngIf=\"dropdown\"></button>\n            <div #panel *ngIf=\"overlayVisible\" class=\"ui-autocomplete-panel ui-widget ui-widget-content ui-corner-all ui-shadow\" [style.max-height]=\"scrollHeight\"\n                [@overlayAnimation]=\"'visible'\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" (@overlayAnimation.done)=\"onOverlayAnimationDone($event)\">\n                <ul class=\"ui-autocomplete-items ui-autocomplete-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\">\n                    <li *ngFor=\"let option of suggestions; let idx = index\" [ngClass]=\"{'ui-autocomplete-list-item ui-corner-all':true,'ui-state-highlight':(highlightOption==option)}\"\n                        (mouseenter)=\"highlightOption=option\" (mouseleave)=\"highlightOption=null\" (click)=\"selectItem(option)\">\n                        <span *ngIf=\"!itemTemplate\">{{field ? objectUtils.resolveFieldData(option, field) : option}}</span>\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: option, index: idx}\"></ng-container>\n                    </li>\n                    <li *ngIf=\"noResults && emptyMessage\" class=\"ui-autocomplete-list-item ui-corner-all\">{{emptyMessage}}</li>\n                </ul>\n            </div>\n        </span>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":51,"character":8},"arguments":["overlayAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":52,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":52,"character":26},"arguments":[{"transform":"translateY(5%)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":56,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":56,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":60,"character":12},"arguments":["void => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":60,"character":42},"arguments":["225ms ease-out"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":61,"character":12},"arguments":["visible => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":61,"character":42},"arguments":["195ms ease-in"]}]}]]}],"host":{"[class.ui-inputwrapper-filled]":"filled","[class.ui-inputwrapper-focus]":"focus && !disabled","$quoted$":["[class.ui-inputwrapper-filled]","[class.ui-inputwrapper-focus]"]},"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":68,"character":16},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":68,"character":27},{"__symbolic":"reference","name":"AUTOCOMPLETE_VALUE_ACCESSOR"}]}]}],"members":{"minLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"delay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"inputStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":5}}]}],"inputId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":5}}]}],"inputStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":5}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":5}}]}],"maxlength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":5}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":5}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":5}}]}],"autoHighlight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":5}}]}],"forceSelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":106,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":5}}]}],"completeMethod":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":110,"character":5}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":112,"character":5}}]}],"onUnselect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":114,"character":5}}]}],"onFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":116,"character":5}}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":118,"character":5}}]}],"onDropdownClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":120,"character":5}}]}],"onClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":122,"character":2}}]}],"onKeyUp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":124,"character":5}}]}],"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":5}}]}],"scrollHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":5}}]}],"dropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":130,"character":5}}]}],"dropdownMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":5}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":5}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":136,"character":5}}]}],"dataKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":5}}]}],"emptyMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":140,"character":5}}]}],"immutable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"character":5}}]}],"inputEL":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":144,"character":5},"arguments":["in"]}]}],"multiInputEL":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":146,"character":5},"arguments":["multiIn"]}]}],"multiContainerEL":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":148,"character":5},"arguments":["multiContainer"]}]}],"dropdownButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":150,"character":5},"arguments":["ddBtn"]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":152,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":152,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":196,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":196,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":196,"character":87},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":196,"character":118},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":196,"character":142},{"__symbolic":"reference","module":"@angular/core","name":"IterableDiffers","line":196,"character":177}]}],"suggestions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":200,"character":5}}]}],"ngDoCheck":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"handleSuggestionsChange":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"onInput":[{"__symbolic":"method"}],"onInputClick":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"onOverlayAnimationStart":[{"__symbolic":"method"}],"onOverlayAnimationDone":[{"__symbolic":"method"}],"appendOverlay":[{"__symbolic":"method"}],"restoreOverlayAppend":[{"__symbolic":"method"}],"alignOverlay":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"handleDropdownClick":[{"__symbolic":"method"}],"focusInput":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"onKeydown":[{"__symbolic":"method"}],"onKeyup":[{"__symbolic":"method"}],"onInputFocus":[{"__symbolic":"method"}],"onInputBlur":[{"__symbolic":"method"}],"onInputChange":[{"__symbolic":"method"}],"onInputPaste":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"findOptionIndex":[{"__symbolic":"method"}],"updateFilledState":[{"__symbolic":"method"}],"updateInputField":[{"__symbolic":"method"}],"bindDocumentClickListener":[{"__symbolic":"method"}],"isDropdownClick":[{"__symbolic":"method"}],"unbindDocumentClickListener":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"AutoCompleteModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":692,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":693,"character":14},{"__symbolic":"reference","module":"../inputtext/inputtext","name":"InputTextModule","line":693,"character":27},{"__symbolic":"reference","module":"../button/button","name":"ButtonModule","line":693,"character":43},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":693,"character":56}],"exports":[{"__symbolic":"reference","name":"AutoComplete"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":694,"character":27}],"declarations":[{"__symbolic":"reference","name":"AutoComplete"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"AUTOCOMPLETE_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":11,"character":11},"useExisting":{"__symbolic":"reference","name":"AutoComplete"},"multi":true},"AutoComplete":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"p-autoComplete","template":"\n        <span [ngClass]=\"{'ui-autocomplete ui-widget':true,'ui-autocomplete-dd':dropdown,'ui-autocomplete-multiple':multiple}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <input *ngIf=\"!multiple\" #in [attr.type]=\"type\" [attr.id]=\"inputId\" [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\" autocomplete=\"off\" [attr.required]=\"required\"\n            [ngClass]=\"'ui-inputtext ui-widget ui-state-default ui-corner-all ui-autocomplete-input'\" [value]=\"inputFieldValue\"\n            (click)=\"onInputClick($event)\" (input)=\"onInput($event)\" (keydown)=\"onKeydown($event)\" (keyup)=\"onKeyup($event)\" (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" (change)=\"onInputChange($event)\" (paste)=\"onInputPaste($event)\"\n            [attr.placeholder]=\"placeholder\" [attr.size]=\"size\" [attr.maxlength]=\"maxlength\" [attr.tabindex]=\"tabindex\" [readonly]=\"readonly\" [disabled]=\"disabled\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledBy\" [attr.aria-required]=\"required\"\n            ><ul *ngIf=\"multiple\" #multiContainer class=\"ui-autocomplete-multiple-container ui-widget ui-inputtext ui-state-default ui-corner-all\" [ngClass]=\"{'ui-state-disabled':disabled,'ui-state-focus':focus}\" (click)=\"multiIn.focus()\">\n                <li #token *ngFor=\"let val of value\" class=\"ui-autocomplete-token ui-state-highlight ui-corner-all\">\n                    <span class=\"ui-autocomplete-token-icon pi pi-fw pi-times\" (click)=\"removeItem(token)\" *ngIf=\"!disabled\"></span>\n                    <span *ngIf=\"!selectedItemTemplate\" class=\"ui-autocomplete-token-label\">{{field ? objectUtils.resolveFieldData(val, field): val}}</span>\n                    <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: {$implicit: val}\"></ng-container>\n                </li>\n                <li class=\"ui-autocomplete-input-token\">\n                    <input #multiIn [attr.type]=\"type\" [attr.id]=\"inputId\" [disabled]=\"disabled\" [attr.placeholder]=\"(value&&value.length ? null : placeholder)\" [attr.tabindex]=\"tabindex\" (input)=\"onInput($event)\"  (click)=\"onInputClick($event)\"\n                            (keydown)=\"onKeydown($event)\" [readonly]=\"readonly\" (keyup)=\"onKeyup($event)\" (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" (change)=\"onInputChange($event)\" (paste)=\"onInputPaste($event)\" autocomplete=\"off\" \n                            [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledBy\" [attr.aria-required]=\"required\">\n                </li>\n            </ul\n            ><i *ngIf=\"loading\" class=\"ui-autocomplete-loader pi pi-spinner pi-spin\"></i><button #ddBtn type=\"button\" pButton icon=\"pi pi-fw pi-caret-down\" class=\"ui-autocomplete-dropdown\" [disabled]=\"disabled\"\n                (click)=\"handleDropdownClick($event)\" *ngIf=\"dropdown\"></button>\n            <div #panel *ngIf=\"overlayVisible\" class=\"ui-autocomplete-panel ui-widget ui-widget-content ui-corner-all ui-shadow\" [style.max-height]=\"scrollHeight\"\n                [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" (@overlayAnimation.done)=\"onOverlayAnimationDone($event)\">\n                <ul class=\"ui-autocomplete-items ui-autocomplete-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\">\n                    <li *ngFor=\"let option of suggestions; let idx = index\" [ngClass]=\"{'ui-autocomplete-list-item ui-corner-all':true,'ui-state-highlight':(highlightOption==option)}\"\n                        (mouseenter)=\"highlightOption=option\" (mouseleave)=\"highlightOption=null\" (click)=\"selectItem(option)\">\n                        <span *ngIf=\"!itemTemplate\">{{field ? objectUtils.resolveFieldData(option, field) : option}}</span>\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: option, index: idx}\"></ng-container>\n                    </li>\n                    <li *ngIf=\"noResults && emptyMessage\" class=\"ui-autocomplete-list-item ui-corner-all\">{{emptyMessage}}</li>\n                </ul>\n            </div>\n        </span>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":52,"character":8},"arguments":["overlayAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":53,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":53,"character":26},"arguments":[{"transform":"translateY(5%)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":57,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":57,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":61,"character":12},"arguments":["void => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":61,"character":42},"arguments":["{{showTransitionParams}}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":62,"character":12},"arguments":["visible => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":62,"character":42},"arguments":["{{hideTransitionParams}}"]}]}]]}],"host":{"[class.ui-inputwrapper-filled]":"filled","[class.ui-inputwrapper-focus]":"focus && !disabled","$quoted$":["[class.ui-inputwrapper-filled]","[class.ui-inputwrapper-focus]"]},"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":69,"character":16},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":69,"character":27},{"__symbolic":"reference","name":"AUTOCOMPLETE_VALUE_ACCESSOR"}]}]}],"members":{"minLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5}}]}],"delay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"inputStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":5}}]}],"inputId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"inputStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":5}}]}],"maxlength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":5}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":5}}]}],"autoHighlight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":5}}]}],"forceSelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":5}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}],"ariaLabelledBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":5}}]}],"completeMethod":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":115,"character":5}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":117,"character":5}}]}],"onUnselect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":119,"character":5}}]}],"onFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":121,"character":5}}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":123,"character":5}}]}],"onDropdownClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":125,"character":5}}]}],"onClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":127,"character":2}}]}],"onKeyUp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":129,"character":5}}]}],"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":131,"character":5}}]}],"scrollHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":5}}]}],"dropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":135,"character":5}}]}],"dropdownMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":5}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":139,"character":5}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":5}}]}],"dataKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":143,"character":5}}]}],"emptyMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":145,"character":5}}]}],"immutable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":147,"character":5}}]}],"showTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":149,"character":5}}]}],"hideTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":151,"character":5}}]}],"inputEL":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":153,"character":5},"arguments":["in"]}]}],"multiInputEL":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":155,"character":5},"arguments":["multiIn"]}]}],"multiContainerEL":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":157,"character":5},"arguments":["multiContainer"]}]}],"dropdownButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":159,"character":5},"arguments":["ddBtn"]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":161,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":161,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":205,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":205,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":205,"character":87},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":205,"character":118},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":205,"character":142},{"__symbolic":"reference","module":"@angular/core","name":"IterableDiffers","line":205,"character":177}]}],"suggestions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":209,"character":5}}]}],"ngDoCheck":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"handleSuggestionsChange":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"onInput":[{"__symbolic":"method"}],"onInputClick":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"onOverlayAnimationStart":[{"__symbolic":"method"}],"onOverlayAnimationDone":[{"__symbolic":"method"}],"appendOverlay":[{"__symbolic":"method"}],"restoreOverlayAppend":[{"__symbolic":"method"}],"alignOverlay":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"handleDropdownClick":[{"__symbolic":"method"}],"focusInput":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"onKeydown":[{"__symbolic":"method"}],"onKeyup":[{"__symbolic":"method"}],"onInputFocus":[{"__symbolic":"method"}],"onInputBlur":[{"__symbolic":"method"}],"onInputChange":[{"__symbolic":"method"}],"onInputPaste":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"findOptionIndex":[{"__symbolic":"method"}],"updateFilledState":[{"__symbolic":"method"}],"updateInputField":[{"__symbolic":"method"}],"bindDocumentClickListener":[{"__symbolic":"method"}],"isDropdownClick":[{"__symbolic":"method"}],"unbindDocumentClickListener":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"AutoCompleteModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":701,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":702,"character":14},{"__symbolic":"reference","module":"../inputtext/inputtext","name":"InputTextModule","line":702,"character":27},{"__symbolic":"reference","module":"../button/button","name":"ButtonModule","line":702,"character":43},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":702,"character":56}],"exports":[{"__symbolic":"reference","name":"AutoComplete"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":703,"character":27}],"declarations":[{"__symbolic":"reference","name":"AutoComplete"}]}]}]}}}]

components/calendar/calendar.d.ts

@@ -65,2 +65,4 @@ import { ElementRef, OnDestroy, OnInit, EventEmitter, Renderer2, ChangeDetectorRef, TemplateRef, QueryList } from '@angular/core';
     touchUI: boolean;
+    showTransitionOptions: string;
+    hideTransitionOptions: string;
     onFocus: EventEmitter<any>;
@@ -67,0 +69,0 @@ onBlur: EventEmitter<any>;

components/calendar/calendar.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"CALENDAR_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":10,"character":13},"useExisting":{"__symbolic":"reference","name":"Calendar"},"multi":true},"LocaleSettings":{"__symbolic":"interface"},"Calendar":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":26,"character":1},"arguments":[{"selector":"p-calendar","template":"\n        <span [ngClass]=\"{'ui-calendar':true, 'ui-calendar-w-btn': showIcon, 'ui-calendar-timeonly': timeOnly}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <ng-template [ngIf]=\"!inline\">\n                <input #inputfield type=\"text\" [attr.id]=\"inputId\" [attr.name]=\"name\" [attr.required]=\"required\" [value]=\"inputFieldValue\" (focus)=\"onInputFocus($event)\" (keydown)=\"onInputKeydown($event)\" (click)=\"onInputClick($event)\" (blur)=\"onInputBlur($event)\"\n                    [readonly]=\"readonlyInput\" (input)=\"onUserInput($event)\" [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\" [placeholder]=\"placeholder||''\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\"\n                    [ngClass]=\"'ui-inputtext ui-widget ui-state-default ui-corner-all'\" autocomplete=\"off\"\n                    ><button type=\"button\" [icon]=\"icon\" pButton *ngIf=\"showIcon\" (click)=\"onButtonClick($event,inputfield)\" class=\"ui-datepicker-trigger ui-calendar-button\"\n                    [ngClass]=\"{'ui-state-disabled':disabled}\" [disabled]=\"disabled\" tabindex=\"-1\"></button>\n            </ng-template>\n            <div [class]=\"panelStyleClass\" [ngStyle]=\"panelStyle\" [ngClass]=\"{'ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all': true, 'ui-datepicker-inline':inline,'ui-shadow':!inline,\n                'ui-state-disabled':disabled,'ui-datepicker-timeonly':timeOnly,'ui-datepicker-multiple-month': this.numberOfMonths > 1, 'ui-datepicker-monthpicker': (view === 'month'), 'ui-datepicker-touch-ui': touchUI}\"\n                (click)=\"onDatePickerClick($event)\" [@overlayAnimation]=\"touchUI ? 'visibleTouchUI': 'visible'\" [@.disabled]=\"inline === true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" *ngIf=\"inline || overlayVisible\">\n                <ng-container *ngIf=\"!timeOnly\">\n                    <div class=\"ui-datepicker-group ui-widget-content\" *ngFor=\"let month of months; let i = index;\">\n                        <div class=\"ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all\">\n                            <ng-content select=\"p-header\"></ng-content>\n                            <a class=\"ui-datepicker-prev ui-corner-all\" href=\"#\" (click)=\"navBackward($event)\" *ngIf=\"i === 0\">\n                                <span class=\"pi pi-chevron-left\"></span>\n                            </a>\n                            <a class=\"ui-datepicker-next ui-corner-all\" href=\"#\" (click)=\"navForward($event)\" *ngIf=\"numberOfMonths === 1 ? true : (i === numberOfMonths -1)\">\n                                <span class=\"pi pi-chevron-right\"></span>\n                            </a>\n                            <div class=\"ui-datepicker-title\">\n                                <span class=\"ui-datepicker-month\" *ngIf=\"!monthNavigator && (view !== 'month')\">{{locale.monthNames[month.month]}}</span>\n                                <select class=\"ui-datepicker-month\" *ngIf=\"monthNavigator && (view !== 'month') && numberOfMonths === 1\" (change)=\"onMonthDropdownChange($event.target.value)\">\n                                    <option [value]=\"i\" *ngFor=\"let monthName of locale.monthNames;let i = index\" [selected]=\"i === month.month\">{{monthName}}</option>\n                                </select>\n                                <select class=\"ui-datepicker-year\" *ngIf=\"yearNavigator && numberOfMonths === 1\" (change)=\"onYearDropdownChange($event.target.value)\">\n                                    <option [value]=\"year\" *ngFor=\"let year of yearOptions\" [selected]=\"year === currentYear\">{{year}}</option>\n                                </select>\n                                <span class=\"ui-datepicker-year\" *ngIf=\"!yearNavigator\">{{view === 'month' ? currentYear : month.year}}</span>\n                            </div>\n                        </div>\n                        <div class=\"ui-datepicker-calendar-container\" *ngIf=\"view ==='date'\">\n                            <table class=\"ui-datepicker-calendar\">\n                                <thead>\n                                    <tr>\n                                        <th scope=\"col\" *ngFor=\"let weekDay of weekDays;let begin = first; let end = last\">\n                                            <span>{{weekDay}}</span>\n                                        </th>\n                                    </tr>\n                                </thead>\n                                <tbody>\n                                    <tr *ngFor=\"let week of month.dates\">\n                                        <td *ngFor=\"let date of week\" [ngClass]=\"{'ui-datepicker-other-month': date.otherMonth,\n                                            'ui-datepicker-current-day':isSelected(date),'ui-datepicker-today':date.today}\">\n                                            <ng-container *ngIf=\"date.otherMonth ? showOtherMonths : true\">\n                                                <a class=\"ui-state-default\" *ngIf=\"date.selectable\" [ngClass]=\"{'ui-state-active':isSelected(date), 'ui-state-highlight':date.today}\"\n                                                    (click)=\"onDateSelect($event,date)\" draggable=\"false\">\n                                                    <ng-container *ngIf=\"!dateTemplate\">{{date.day}}</ng-container>\n                                                    <ng-container *ngTemplateOutlet=\"dateTemplate; context: {$implicit: date}\"></ng-container>\n                                                </a>\n                                                <span class=\"ui-state-default ui-state-disabled\" *ngIf=\"!date.selectable\">\n                                                    {{date.day}}\n                                                </span>\n                                            </ng-container>\n                                        </td>\n                                    </tr>\n                                </tbody>\n                            </table>\n                        </div>\n                    </div>\n                    <div class=\"ui-monthpicker\" *ngIf=\"view === 'month'\">\n                        <a href=\"#\" *ngFor=\"let m of monthPickerValues; let i = index\" (click)=\"onMonthSelect($event, i)\" class=\"ui-monthpicker-month\" [ngClass]=\"{'ui-state-active': isMonthSelected(i)}\">\n                            {{m}}\n                        </a>\n                    </div>\n                </ng-container>\n                <div class=\"ui-timepicker ui-widget-header ui-corner-all\" *ngIf=\"showTime||timeOnly\">\n                    <div class=\"ui-hour-picker\">\n                        <a href=\"#\" (click)=\"incrementHour($event)\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span [ngStyle]=\"{'display': currentHour < 10 ? 'inline': 'none'}\">0</span><span>{{currentHour}}</span>\n                        <a href=\"#\" (click)=\"decrementHour($event)\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                    <div class=\"ui-separator\">\n                        <a href=\"#\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span>:</span>\n                        <a href=\"#\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                    <div class=\"ui-minute-picker\">\n                        <a href=\"#\" (click)=\"incrementMinute($event)\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span [ngStyle]=\"{'display': currentMinute < 10 ? 'inline': 'none'}\">0</span><span>{{currentMinute}}</span>\n                        <a href=\"#\" (click)=\"decrementMinute($event)\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                    <div class=\"ui-separator\" *ngIf=\"showSeconds\">\n                        <a href=\"#\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span>:</span>\n                        <a href=\"#\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                    <div class=\"ui-second-picker\" *ngIf=\"showSeconds\">\n                        <a href=\"#\" (click)=\"incrementSecond($event)\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span [ngStyle]=\"{'display': currentSecond < 10 ? 'inline': 'none'}\">0</span><span>{{currentSecond}}</span>\n                        <a href=\"#\" (click)=\"decrementSecond($event)\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                    <div class=\"ui-ampm-picker\" *ngIf=\"hourFormat=='12'\">\n                        <a href=\"#\" (click)=\"toggleAMPM($event)\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span>{{pm ? 'PM' : 'AM'}}</span>\n                        <a href=\"#\" (click)=\"toggleAMPM($event)\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                </div>\n                <div class=\"ui-datepicker-buttonbar ui-widget-header\" *ngIf=\"showButtonBar\">\n                    <div class=\"ui-g\">\n                        <div class=\"ui-g-6\">\n                            <button type=\"button\" [label]=\"_locale.today\" (click)=\"onTodayButtonClick($event)\" pButton [ngClass]=\"[todayButtonStyleClass]\"></button>\n                        </div>\n                        <div class=\"ui-g-6\">\n                            <button type=\"button\" [label]=\"_locale.clear\" (click)=\"onClearButtonClick($event)\" pButton [ngClass]=\"[clearButtonStyleClass]\"></button>\n                        </div>\n                    </div>\n                </div>\n                <ng-content select=\"p-footer\"></ng-content>\n            </div>\n        </span>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":167,"character":8},"arguments":["overlayAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":168,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":168,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":172,"character":12},"arguments":["visibleTouchUI",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":172,"character":36},"arguments":[{"transform":"translate(-50%,-50%)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":176,"character":12},"arguments":["void => visible",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":177,"character":16},"arguments":[{"transform":"translateY(5%)","opacity":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":178,"character":16},"arguments":["225ms ease-out"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":180,"character":12},"arguments":["visible => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":181,"character":16},"arguments":["195ms ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":182,"character":16},"arguments":[{"opacity":0,"transform":"translateY(5%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":187,"character":12},"arguments":["void => visibleTouchUI",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":188,"character":16},"arguments":[{"opacity":0,"transform":"translate3d(-50%, -40%, 0) scale(0.9)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":189,"character":16},"arguments":["225ms ease-out"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":191,"character":12},"arguments":["visibleTouchUI => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":192,"character":16},"arguments":["195ms ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":193,"character":16},"arguments":[{"opacity":0,"transform":"translate3d(-50%, -40%, 0) scale(0.9)"}]}]}]]}]]}],"host":{"[class.ui-inputwrapper-filled]":"filled","[class.ui-inputwrapper-focus]":"focus","$quoted$":["[class.ui-inputwrapper-filled]","[class.ui-inputwrapper-focus]"]},"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":204,"character":16},{"__symbolic":"reference","name":"CALENDAR_VALUE_ACCESSOR"}]}]}],"members":{"defaultDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":208,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":210,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":212,"character":5}}]}],"inputStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":214,"character":5}}]}],"inputId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":216,"character":5}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":218,"character":5}}]}],"inputStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":220,"character":5}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":222,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":224,"character":5}}]}],"dateFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":226,"character":5}}]}],"inline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":228,"character":5}}]}],"showOtherMonths":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":230,"character":5}}]}],"selectOtherMonths":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":232,"character":5}}]}],"showIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":234,"character":5}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":236,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":238,"character":5}}]}],"readonlyInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":240,"character":5}}]}],"shortYearCutoff":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":242,"character":5}}]}],"monthNavigator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":244,"character":5}}]}],"yearNavigator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":246,"character":5}}]}],"yearRange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":248,"character":5}}]}],"hourFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":250,"character":5}}]}],"timeOnly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":252,"character":5}}]}],"stepHour":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":254,"character":5}}]}],"stepMinute":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":256,"character":5}}]}],"stepSecond":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":258,"character":5}}]}],"showSeconds":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":260,"character":5}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":262,"character":5}}]}],"showOnFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":264,"character":5}}]}],"dataType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":266,"character":5}}]}],"selectionMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":268,"character":5}}]}],"maxDateCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":270,"character":5}}]}],"showButtonBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":272,"character":5}}]}],"todayButtonStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":274,"character":5}}]}],"clearButtonStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":276,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":278,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":280,"character":5}}]}],"panelStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":282,"character":5}}]}],"panelStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":284,"character":5}}]}],"keepInvalid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":286,"character":5}}]}],"hideOnDateTimeSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":288,"character":5}}]}],"numberOfMonths":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":290,"character":5}}]}],"view":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":292,"character":5}}]}],"touchUI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":294,"character":5}}]}],"onFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":296,"character":5}}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":298,"character":5}}]}],"onClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":300,"character":5}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":302,"character":5}}]}],"onInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":304,"character":5}}]}],"onTodayClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":306,"character":5}}]}],"onClearClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":308,"character":5}}]}],"onMonthChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":310,"character":5}}]}],"onYearChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":312,"character":5}}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":314,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":314,"character":21}]}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":327,"character":5}}]}],"inputfieldViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":329,"character":5},"arguments":["inputfield"]}]}],"utc":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":333,"character":5}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":413,"character":5}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":425,"character":5}}]}],"disabledDates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":437,"character":5}}]}],"disabledDays":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":449,"character":5}}]}],"showTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":461,"character":5}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":478,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":491,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":491,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":491,"character":87},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":491,"character":109}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"populateYearOptions":[{"__symbolic":"method"}],"createWeekDays":[{"__symbolic":"method"}],"createMonthPickerValues":[{"__symbolic":"method"}],"createMonths":[{"__symbolic":"method"}],"createMonth":[{"__symbolic":"method"}],"initTime":[{"__symbolic":"method"}],"navBackward":[{"__symbolic":"method"}],"navForward":[{"__symbolic":"method"}],"decrementYear":[{"__symbolic":"method"}],"incrementYear":[{"__symbolic":"method"}],"onDateSelect":[{"__symbolic":"method"}],"shouldSelectDate":[{"__symbolic":"method"}],"onMonthSelect":[{"__symbolic":"method"}],"updateInputfield":[{"__symbolic":"method"}],"formatDateTime":[{"__symbolic":"method"}],"selectDate":[{"__symbolic":"method"}],"updateModel":[{"__symbolic":"method"}],"getFirstDayOfMonthIndex":[{"__symbolic":"method"}],"getDaysCountInMonth":[{"__symbolic":"method"}],"getDaysCountInPrevMonth":[{"__symbolic":"method"}],"getPreviousMonthAndYear":[{"__symbolic":"method"}],"getNextMonthAndYear":[{"__symbolic":"method"}],"getSundayIndex":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"isMonthSelected":[{"__symbolic":"method"}],"isDateEquals":[{"__symbolic":"method"}],"isDateBetween":[{"__symbolic":"method"}],"isSingleSelection":[{"__symbolic":"method"}],"isRangeSelection":[{"__symbolic":"method"}],"isMultipleSelection":[{"__symbolic":"method"}],"isToday":[{"__symbolic":"method"}],"isSelectable":[{"__symbolic":"method"}],"isDateDisabled":[{"__symbolic":"method"}],"isDayDisabled":[{"__symbolic":"method"}],"onInputFocus":[{"__symbolic":"method"}],"onInputClick":[{"__symbolic":"method"}],"onInputBlur":[{"__symbolic":"method"}],"onButtonClick":[{"__symbolic":"method"}],"onInputKeydown":[{"__symbolic":"method"}],"onMonthDropdownChange":[{"__symbolic":"method"}],"onYearDropdownChange":[{"__symbolic":"method"}],"incrementHour":[{"__symbolic":"method"}],"decrementHour":[{"__symbolic":"method"}],"validateHour":[{"__symbolic":"method"}],"incrementMinute":[{"__symbolic":"method"}],"decrementMinute":[{"__symbolic":"method"}],"validateMinute":[{"__symbolic":"method"}],"incrementSecond":[{"__symbolic":"method"}],"decrementSecond":[{"__symbolic":"method"}],"validateSecond":[{"__symbolic":"method"}],"updateTime":[{"__symbolic":"method"}],"toggleAMPM":[{"__symbolic":"method"}],"onUserInput":[{"__symbolic":"method"}],"parseValueFromString":[{"__symbolic":"method"}],"parseDateTime":[{"__symbolic":"method"}],"populateTime":[{"__symbolic":"method"}],"updateUI":[{"__symbolic":"method"}],"onDatePickerClick":[{"__symbolic":"method"}],"showOverlay":[{"__symbolic":"method"}],"onOverlayAnimationStart":[{"__symbolic":"method"}],"appendOverlay":[{"__symbolic":"method"}],"restoreOverlayAppend":[{"__symbolic":"method"}],"alignOverlay":[{"__symbolic":"method"}],"enableModality":[{"__symbolic":"method"}],"disableModality":[{"__symbolic":"method"}],"unbindMaskClickListener":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"formatDate":[{"__symbolic":"method"}],"formatTime":[{"__symbolic":"method"}],"parseTime":[{"__symbolic":"method"}],"parseDate":[{"__symbolic":"method"}],"daylightSavingAdjust":[{"__symbolic":"method"}],"updateFilledState":[{"__symbolic":"method"}],"onTodayButtonClick":[{"__symbolic":"method"}],"onClearButtonClick":[{"__symbolic":"method"}],"bindDocumentClickListener":[{"__symbolic":"method"}],"unbindDocumentClickListener":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"CalendarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":1957,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":1958,"character":14},{"__symbolic":"reference","module":"../button/button","name":"ButtonModule","line":1958,"character":27},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":1958,"character":40}],"exports":[{"__symbolic":"reference","name":"Calendar"},{"__symbolic":"reference","module":"../button/button","name":"ButtonModule","line":1959,"character":23},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":1959,"character":36}],"declarations":[{"__symbolic":"reference","name":"Calendar"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"CALENDAR_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":10,"character":13},"useExisting":{"__symbolic":"reference","name":"Calendar"},"multi":true},"LocaleSettings":{"__symbolic":"interface"},"Calendar":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":26,"character":1},"arguments":[{"selector":"p-calendar","template":"\n        <span [ngClass]=\"{'ui-calendar':true, 'ui-calendar-w-btn': showIcon, 'ui-calendar-timeonly': timeOnly}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <ng-template [ngIf]=\"!inline\">\n                <input #inputfield type=\"text\" [attr.id]=\"inputId\" [attr.name]=\"name\" [attr.required]=\"required\" [value]=\"inputFieldValue\" (focus)=\"onInputFocus($event)\" (keydown)=\"onInputKeydown($event)\" (click)=\"onInputClick($event)\" (blur)=\"onInputBlur($event)\"\n                    [readonly]=\"readonlyInput\" (input)=\"onUserInput($event)\" [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\" [placeholder]=\"placeholder||''\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\"\n                    [ngClass]=\"'ui-inputtext ui-widget ui-state-default ui-corner-all'\" autocomplete=\"off\"\n                    ><button type=\"button\" [icon]=\"icon\" pButton *ngIf=\"showIcon\" (click)=\"onButtonClick($event,inputfield)\" class=\"ui-datepicker-trigger ui-calendar-button\"\n                    [ngClass]=\"{'ui-state-disabled':disabled}\" [disabled]=\"disabled\" tabindex=\"-1\"></button>\n            </ng-template>\n            <div [class]=\"panelStyleClass\" [ngStyle]=\"panelStyle\" [ngClass]=\"{'ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all': true, 'ui-datepicker-inline':inline,'ui-shadow':!inline,\n                'ui-state-disabled':disabled,'ui-datepicker-timeonly':timeOnly,'ui-datepicker-multiple-month': this.numberOfMonths > 1, 'ui-datepicker-monthpicker': (view === 'month'), 'ui-datepicker-touch-ui': touchUI}\"\n                (click)=\"onDatePickerClick($event)\" [@overlayAnimation]=\"touchUI ? {value: 'visibleTouchUI', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}: \n                                            {value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" \n                                            [@.disabled]=\"inline === true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" *ngIf=\"inline || overlayVisible\">\n                <ng-container *ngIf=\"!timeOnly\">\n                    <div class=\"ui-datepicker-group ui-widget-content\" *ngFor=\"let month of months; let i = index;\">\n                        <div class=\"ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all\">\n                            <ng-content select=\"p-header\"></ng-content>\n                            <a class=\"ui-datepicker-prev ui-corner-all\" href=\"#\" (click)=\"navBackward($event)\" *ngIf=\"i === 0\">\n                                <span class=\"pi pi-chevron-left\"></span>\n                            </a>\n                            <a class=\"ui-datepicker-next ui-corner-all\" href=\"#\" (click)=\"navForward($event)\" *ngIf=\"numberOfMonths === 1 ? true : (i === numberOfMonths -1)\">\n                                <span class=\"pi pi-chevron-right\"></span>\n                            </a>\n                            <div class=\"ui-datepicker-title\">\n                                <span class=\"ui-datepicker-month\" *ngIf=\"!monthNavigator && (view !== 'month')\">{{locale.monthNames[month.month]}}</span>\n                                <select class=\"ui-datepicker-month\" *ngIf=\"monthNavigator && (view !== 'month') && numberOfMonths === 1\" (change)=\"onMonthDropdownChange($event.target.value)\">\n                                    <option [value]=\"i\" *ngFor=\"let monthName of locale.monthNames;let i = index\" [selected]=\"i === month.month\">{{monthName}}</option>\n                                </select>\n                                <select class=\"ui-datepicker-year\" *ngIf=\"yearNavigator && numberOfMonths === 1\" (change)=\"onYearDropdownChange($event.target.value)\">\n                                    <option [value]=\"year\" *ngFor=\"let year of yearOptions\" [selected]=\"year === currentYear\">{{year}}</option>\n                                </select>\n                                <span class=\"ui-datepicker-year\" *ngIf=\"!yearNavigator\">{{view === 'month' ? currentYear : month.year}}</span>\n                            </div>\n                        </div>\n                        <div class=\"ui-datepicker-calendar-container\" *ngIf=\"view ==='date'\">\n                            <table class=\"ui-datepicker-calendar\">\n                                <thead>\n                                    <tr>\n                                        <th scope=\"col\" *ngFor=\"let weekDay of weekDays;let begin = first; let end = last\">\n                                            <span>{{weekDay}}</span>\n                                        </th>\n                                    </tr>\n                                </thead>\n                                <tbody>\n                                    <tr *ngFor=\"let week of month.dates\">\n                                        <td *ngFor=\"let date of week\" [ngClass]=\"{'ui-datepicker-other-month': date.otherMonth,\n                                            'ui-datepicker-current-day':isSelected(date),'ui-datepicker-today':date.today}\">\n                                            <ng-container *ngIf=\"date.otherMonth ? showOtherMonths : true\">\n                                                <a class=\"ui-state-default\" *ngIf=\"date.selectable\" [ngClass]=\"{'ui-state-active':isSelected(date), 'ui-state-highlight':date.today}\"\n                                                    (click)=\"onDateSelect($event,date)\" draggable=\"false\">\n                                                    <ng-container *ngIf=\"!dateTemplate\">{{date.day}}</ng-container>\n                                                    <ng-container *ngTemplateOutlet=\"dateTemplate; context: {$implicit: date}\"></ng-container>\n                                                </a>\n                                                <span class=\"ui-state-default ui-state-disabled\" *ngIf=\"!date.selectable\">\n                                                    {{date.day}}\n                                                </span>\n                                            </ng-container>\n                                        </td>\n                                    </tr>\n                                </tbody>\n                            </table>\n                        </div>\n                    </div>\n                    <div class=\"ui-monthpicker\" *ngIf=\"view === 'month'\">\n                        <a href=\"#\" *ngFor=\"let m of monthPickerValues; let i = index\" (click)=\"onMonthSelect($event, i)\" class=\"ui-monthpicker-month\" [ngClass]=\"{'ui-state-active': isMonthSelected(i)}\">\n                            {{m}}\n                        </a>\n                    </div>\n                </ng-container>\n                <div class=\"ui-timepicker ui-widget-header ui-corner-all\" *ngIf=\"showTime||timeOnly\">\n                    <div class=\"ui-hour-picker\">\n                        <a href=\"#\" (click)=\"incrementHour($event)\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span [ngStyle]=\"{'display': currentHour < 10 ? 'inline': 'none'}\">0</span><span>{{currentHour}}</span>\n                        <a href=\"#\" (click)=\"decrementHour($event)\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                    <div class=\"ui-separator\">\n                        <a href=\"#\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span>:</span>\n                        <a href=\"#\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                    <div class=\"ui-minute-picker\">\n                        <a href=\"#\" (click)=\"incrementMinute($event)\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span [ngStyle]=\"{'display': currentMinute < 10 ? 'inline': 'none'}\">0</span><span>{{currentMinute}}</span>\n                        <a href=\"#\" (click)=\"decrementMinute($event)\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                    <div class=\"ui-separator\" *ngIf=\"showSeconds\">\n                        <a href=\"#\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span>:</span>\n                        <a href=\"#\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                    <div class=\"ui-second-picker\" *ngIf=\"showSeconds\">\n                        <a href=\"#\" (click)=\"incrementSecond($event)\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span [ngStyle]=\"{'display': currentSecond < 10 ? 'inline': 'none'}\">0</span><span>{{currentSecond}}</span>\n                        <a href=\"#\" (click)=\"decrementSecond($event)\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                    <div class=\"ui-ampm-picker\" *ngIf=\"hourFormat=='12'\">\n                        <a href=\"#\" (click)=\"toggleAMPM($event)\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span>{{pm ? 'PM' : 'AM'}}</span>\n                        <a href=\"#\" (click)=\"toggleAMPM($event)\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                </div>\n                <div class=\"ui-datepicker-buttonbar ui-widget-header\" *ngIf=\"showButtonBar\">\n                    <div class=\"ui-g\">\n                        <div class=\"ui-g-6\">\n                            <button type=\"button\" [label]=\"_locale.today\" (click)=\"onTodayButtonClick($event)\" pButton [ngClass]=\"[todayButtonStyleClass]\"></button>\n                        </div>\n                        <div class=\"ui-g-6\">\n                            <button type=\"button\" [label]=\"_locale.clear\" (click)=\"onClearButtonClick($event)\" pButton [ngClass]=\"[clearButtonStyleClass]\"></button>\n                        </div>\n                    </div>\n                </div>\n                <ng-content select=\"p-footer\"></ng-content>\n            </div>\n        </span>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":169,"character":8},"arguments":["overlayAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":170,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":170,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":174,"character":12},"arguments":["visibleTouchUI",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":174,"character":36},"arguments":[{"transform":"translate(-50%,-50%)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":178,"character":12},"arguments":["void => visible",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":179,"character":16},"arguments":[{"transform":"translateY(5%)","opacity":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":180,"character":16},"arguments":["{{showTransitionParams}}"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":182,"character":12},"arguments":["visible => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":183,"character":16},"arguments":["{{hideTransitionParams}}",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":184,"character":16},"arguments":[{"opacity":0,"transform":"translateY(5%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":189,"character":12},"arguments":["void => visibleTouchUI",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":190,"character":16},"arguments":[{"opacity":0,"transform":"translate3d(-50%, -40%, 0) scale(0.9)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":191,"character":16},"arguments":["{{showTransitionParams}}"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":193,"character":12},"arguments":["visibleTouchUI => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":194,"character":16},"arguments":["{{hideTransitionParams}}",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":195,"character":16},"arguments":[{"opacity":0,"transform":"translate3d(-50%, -40%, 0) scale(0.9)"}]}]}]]}]]}],"host":{"[class.ui-inputwrapper-filled]":"filled","[class.ui-inputwrapper-focus]":"focus","$quoted$":["[class.ui-inputwrapper-filled]","[class.ui-inputwrapper-focus]"]},"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":206,"character":16},{"__symbolic":"reference","name":"CALENDAR_VALUE_ACCESSOR"}]}]}],"members":{"defaultDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":210,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":212,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":214,"character":5}}]}],"inputStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":216,"character":5}}]}],"inputId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":218,"character":5}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":220,"character":5}}]}],"inputStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":222,"character":5}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":224,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":226,"character":5}}]}],"dateFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":228,"character":5}}]}],"inline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":230,"character":5}}]}],"showOtherMonths":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":232,"character":5}}]}],"selectOtherMonths":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":234,"character":5}}]}],"showIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":236,"character":5}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":238,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":240,"character":5}}]}],"readonlyInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":242,"character":5}}]}],"shortYearCutoff":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":244,"character":5}}]}],"monthNavigator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":246,"character":5}}]}],"yearNavigator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":248,"character":5}}]}],"yearRange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":250,"character":5}}]}],"hourFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":252,"character":5}}]}],"timeOnly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":254,"character":5}}]}],"stepHour":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":256,"character":5}}]}],"stepMinute":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":258,"character":5}}]}],"stepSecond":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":260,"character":5}}]}],"showSeconds":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":262,"character":5}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":264,"character":5}}]}],"showOnFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":266,"character":5}}]}],"dataType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":268,"character":5}}]}],"selectionMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":270,"character":5}}]}],"maxDateCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":272,"character":5}}]}],"showButtonBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":274,"character":5}}]}],"todayButtonStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":276,"character":5}}]}],"clearButtonStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":278,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":280,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":282,"character":5}}]}],"panelStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":284,"character":5}}]}],"panelStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":286,"character":5}}]}],"keepInvalid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":288,"character":5}}]}],"hideOnDateTimeSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":290,"character":5}}]}],"numberOfMonths":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":292,"character":5}}]}],"view":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":294,"character":5}}]}],"touchUI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":296,"character":5}}]}],"showTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":298,"character":5}}]}],"hideTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":300,"character":5}}]}],"onFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":302,"character":5}}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":304,"character":5}}]}],"onClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":306,"character":5}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":308,"character":5}}]}],"onInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":310,"character":5}}]}],"onTodayClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":312,"character":5}}]}],"onClearClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":314,"character":5}}]}],"onMonthChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":316,"character":5}}]}],"onYearChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":318,"character":5}}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":320,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":320,"character":21}]}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":333,"character":5}}]}],"inputfieldViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":335,"character":5},"arguments":["inputfield"]}]}],"utc":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":339,"character":5}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":419,"character":5}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":431,"character":5}}]}],"disabledDates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":443,"character":5}}]}],"disabledDays":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":455,"character":5}}]}],"showTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":467,"character":5}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":484,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":497,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":497,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":497,"character":87},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":497,"character":109}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"populateYearOptions":[{"__symbolic":"method"}],"createWeekDays":[{"__symbolic":"method"}],"createMonthPickerValues":[{"__symbolic":"method"}],"createMonths":[{"__symbolic":"method"}],"createMonth":[{"__symbolic":"method"}],"initTime":[{"__symbolic":"method"}],"navBackward":[{"__symbolic":"method"}],"navForward":[{"__symbolic":"method"}],"decrementYear":[{"__symbolic":"method"}],"incrementYear":[{"__symbolic":"method"}],"onDateSelect":[{"__symbolic":"method"}],"shouldSelectDate":[{"__symbolic":"method"}],"onMonthSelect":[{"__symbolic":"method"}],"updateInputfield":[{"__symbolic":"method"}],"formatDateTime":[{"__symbolic":"method"}],"selectDate":[{"__symbolic":"method"}],"updateModel":[{"__symbolic":"method"}],"getFirstDayOfMonthIndex":[{"__symbolic":"method"}],"getDaysCountInMonth":[{"__symbolic":"method"}],"getDaysCountInPrevMonth":[{"__symbolic":"method"}],"getPreviousMonthAndYear":[{"__symbolic":"method"}],"getNextMonthAndYear":[{"__symbolic":"method"}],"getSundayIndex":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"isMonthSelected":[{"__symbolic":"method"}],"isDateEquals":[{"__symbolic":"method"}],"isDateBetween":[{"__symbolic":"method"}],"isSingleSelection":[{"__symbolic":"method"}],"isRangeSelection":[{"__symbolic":"method"}],"isMultipleSelection":[{"__symbolic":"method"}],"isToday":[{"__symbolic":"method"}],"isSelectable":[{"__symbolic":"method"}],"isDateDisabled":[{"__symbolic":"method"}],"isDayDisabled":[{"__symbolic":"method"}],"onInputFocus":[{"__symbolic":"method"}],"onInputClick":[{"__symbolic":"method"}],"onInputBlur":[{"__symbolic":"method"}],"onButtonClick":[{"__symbolic":"method"}],"onInputKeydown":[{"__symbolic":"method"}],"onMonthDropdownChange":[{"__symbolic":"method"}],"onYearDropdownChange":[{"__symbolic":"method"}],"incrementHour":[{"__symbolic":"method"}],"decrementHour":[{"__symbolic":"method"}],"validateHour":[{"__symbolic":"method"}],"incrementMinute":[{"__symbolic":"method"}],"decrementMinute":[{"__symbolic":"method"}],"validateMinute":[{"__symbolic":"method"}],"incrementSecond":[{"__symbolic":"method"}],"decrementSecond":[{"__symbolic":"method"}],"validateSecond":[{"__symbolic":"method"}],"updateTime":[{"__symbolic":"method"}],"toggleAMPM":[{"__symbolic":"method"}],"onUserInput":[{"__symbolic":"method"}],"parseValueFromString":[{"__symbolic":"method"}],"parseDateTime":[{"__symbolic":"method"}],"populateTime":[{"__symbolic":"method"}],"updateUI":[{"__symbolic":"method"}],"onDatePickerClick":[{"__symbolic":"method"}],"showOverlay":[{"__symbolic":"method"}],"onOverlayAnimationStart":[{"__symbolic":"method"}],"appendOverlay":[{"__symbolic":"method"}],"restoreOverlayAppend":[{"__symbolic":"method"}],"alignOverlay":[{"__symbolic":"method"}],"enableModality":[{"__symbolic":"method"}],"disableModality":[{"__symbolic":"method"}],"unbindMaskClickListener":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"formatDate":[{"__symbolic":"method"}],"formatTime":[{"__symbolic":"method"}],"parseTime":[{"__symbolic":"method"}],"parseDate":[{"__symbolic":"method"}],"daylightSavingAdjust":[{"__symbolic":"method"}],"updateFilledState":[{"__symbolic":"method"}],"onTodayButtonClick":[{"__symbolic":"method"}],"onClearButtonClick":[{"__symbolic":"method"}],"bindDocumentClickListener":[{"__symbolic":"method"}],"unbindDocumentClickListener":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"CalendarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":1960,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":1961,"character":14},{"__symbolic":"reference","module":"../button/button","name":"ButtonModule","line":1961,"character":27},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":1961,"character":40}],"exports":[{"__symbolic":"reference","name":"Calendar"},{"__symbolic":"reference","module":"../button/button","name":"ButtonModule","line":1962,"character":23},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":1962,"character":36}],"declarations":[{"__symbolic":"reference","name":"Calendar"}]}]}]}}}]

components/carousel/carousel.d.ts

@@ -26,3 +26,3 @@ import { ElementRef, AfterViewInit, AfterViewChecked, EventEmitter, OnDestroy, TemplateRef, QueryList, Renderer2, ChangeDetectorRef } from '@angular/core';
     items: any;
-    columns: any;
+    columns: number;
     page: number;
@@ -29,0 +29,0 @@ valuesChanged: any;

components/carousel/carousel.js

@@ -33,2 +33,3 @@ "use strict";
         this.left = 0;
+        this.columns = 0;
     }
@@ -35,0 +36,0 @@ Carousel.prototype.ngAfterContentInit = function () {

components/chips/chips.d.ts

@@ -11,4 +11,2 @@ import { ElementRef, EventEmitter, AfterContentInit, QueryList, TemplateRef } from '@angular/core';
     disabled: boolean;
-    onAdd: EventEmitter<any>;
-    onRemove: EventEmitter<any>;
     field: string;
@@ -24,4 +22,7 @@ placeholder: string;
     addOnBlur: boolean;
+    onAdd: EventEmitter<any>;
+    onRemove: EventEmitter<any>;
     onFocus: EventEmitter<any>;
     onBlur: EventEmitter<any>;
+    onChipClick: EventEmitter<any>;
     inputViewChild: ElementRef;
@@ -38,2 +39,3 @@ templates: QueryList<any>;
     onClick(event: any): void;
+    onItemClick(event: Event, item: any): void;
     writeValue(value: any): void;
@@ -40,0 +42,0 @@ registerOnChange(fn: Function): void;

components/chips/chips.js

@@ -27,7 +27,8 @@ "use strict";
         this.domHandler = domHandler;
+        this.allowDuplicate = true;
         this.onAdd = new core_1.EventEmitter();
         this.onRemove = new core_1.EventEmitter();
-        this.allowDuplicate = true;
         this.onFocus = new core_1.EventEmitter();
         this.onBlur = new core_1.EventEmitter();
+        this.onChipClick = new core_1.EventEmitter();
         this.onModelChange = function () { };
@@ -52,2 +53,8 @@ this.onModelTouched = function () { };
     };
+    Chips.prototype.onItemClick = function (event, item) {
+        this.onChipClick.emit({
+            originalEvent: event,
+            value: item
+        });
+    };
     Chips.prototype.writeValue = function (value) {
@@ -163,3 +170,3 @@ this.value = value;
             else
-                this.inputViewChild.nativeElement.disabled = false;
+                this.inputViewChild.nativeElement.disabled = this.disabled || false;
         }
@@ -180,10 +187,2 @@ };
     __decorate([
-        core_1.Output(),
-        __metadata("design:type", core_1.EventEmitter)
-    ], Chips.prototype, "onAdd", void 0);
-    __decorate([
-        core_1.Output(),
-        __metadata("design:type", core_1.EventEmitter)
-    ], Chips.prototype, "onRemove", void 0);
-    __decorate([
         core_1.Input(),
@@ -231,2 +230,10 @@ __metadata("design:type", String)
         __metadata("design:type", core_1.EventEmitter)
+    ], Chips.prototype, "onAdd", void 0);
+    __decorate([
+        core_1.Output(),
+        __metadata("design:type", core_1.EventEmitter)
+    ], Chips.prototype, "onRemove", void 0);
+    __decorate([
+        core_1.Output(),
+        __metadata("design:type", core_1.EventEmitter)
     ], Chips.prototype, "onFocus", void 0);
@@ -238,2 +245,6 @@ __decorate([
     __decorate([
+        core_1.Output(),
+        __metadata("design:type", core_1.EventEmitter)
+    ], Chips.prototype, "onChipClick", void 0);
+    __decorate([
         core_1.ViewChild('inputtext'),
@@ -249,3 +260,3 @@ __metadata("design:type", core_1.ElementRef)
             selector: 'p-chips',
-            template: "\n        <div [ngClass]=\"'ui-chips ui-widget'\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onClick($event)\">\n            <ul [ngClass]=\"{'ui-inputtext ui-state-default ui-corner-all':true,'ui-state-focus':focus,'ui-state-disabled':disabled}\">\n                <li #token *ngFor=\"let item of value; let i = index;\" class=\"ui-chips-token ui-state-highlight ui-corner-all\">\n                    <span *ngIf=\"!disabled\" class=\"ui-chips-token-icon pi pi-fw pi-times\" (click)=\"removeItem($event,i)\"></span>\n                    <span *ngIf=\"!itemTemplate\" class=\"ui-chips-token-label\">{{field ? resolveFieldData(item,field) : item}}</span>\n                    <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n                </li>\n                <li class=\"ui-chips-input-token\">\n                    <input #inputtext type=\"text\" [attr.id]=\"inputId\" [attr.placeholder]=\"(value && value.length ? null : placeholder)\" [attr.tabindex]=\"tabindex\" (keydown)=\"onKeydown($event)\" \n                        (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" [disabled]=\"disabled\" [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\">\n                </li>\n            </ul>\n        </div>\n    ",
+            template: "\n        <div [ngClass]=\"'ui-chips ui-widget'\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onClick($event)\">\n            <ul [ngClass]=\"{'ui-inputtext ui-state-default ui-corner-all':true,'ui-state-focus':focus,'ui-state-disabled':disabled}\">\n                <li #token *ngFor=\"let item of value; let i = index;\" class=\"ui-chips-token ui-state-highlight ui-corner-all\" (click)=\"onItemClick($event, item)\">\n                    <span *ngIf=\"!disabled\" class=\"ui-chips-token-icon pi pi-fw pi-times\" (click)=\"removeItem($event,i)\"></span>\n                    <span *ngIf=\"!itemTemplate\" class=\"ui-chips-token-label\">{{field ? resolveFieldData(item,field) : item}}</span>\n                    <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n                </li>\n                <li class=\"ui-chips-input-token\">\n                    <input #inputtext type=\"text\" [attr.id]=\"inputId\" [attr.placeholder]=\"(value && value.length ? null : placeholder)\" [attr.tabindex]=\"tabindex\" (keydown)=\"onKeydown($event)\" \n                        (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" [disabled]=\"disabled\" [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\">\n                </li>\n            </ul>\n        </div>\n    ",
             providers: [domhandler_1.DomHandler, exports.CHIPS_VALUE_ACCESSOR]
@@ -252,0 +263,0 @@ }),

components/chips/chips.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"CHIPS_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":8,"character":11},"useExisting":{"__symbolic":"reference","name":"Chips"},"multi":true},"Chips":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"p-chips","template":"\n        <div [ngClass]=\"'ui-chips ui-widget'\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onClick($event)\">\n            <ul [ngClass]=\"{'ui-inputtext ui-state-default ui-corner-all':true,'ui-state-focus':focus,'ui-state-disabled':disabled}\">\n                <li #token *ngFor=\"let item of value; let i = index;\" class=\"ui-chips-token ui-state-highlight ui-corner-all\">\n                    <span *ngIf=\"!disabled\" class=\"ui-chips-token-icon pi pi-fw pi-times\" (click)=\"removeItem($event,i)\"></span>\n                    <span *ngIf=\"!itemTemplate\" class=\"ui-chips-token-label\">{{field ? resolveFieldData(item,field) : item}}</span>\n                    <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n                </li>\n                <li class=\"ui-chips-input-token\">\n                    <input #inputtext type=\"text\" [attr.id]=\"inputId\" [attr.placeholder]=\"(value && value.length ? null : placeholder)\" [attr.tabindex]=\"tabindex\" (keydown)=\"onKeydown($event)\" \n                        (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" [disabled]=\"disabled\" [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\">\n                </li>\n            </ul>\n        </div>\n    ","providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":30,"character":16},{"__symbolic":"reference","name":"CHIPS_VALUE_ACCESSOR"}]}]}],"members":{"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"onAdd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":40,"character":5}}]}],"onRemove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":42,"character":5}}]}],"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"inputId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"allowDuplicate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"inputStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"inputStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"addOnTab":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"addOnBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"onFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":64,"character":5}}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":66,"character":5}}]}],"inputViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":68,"character":5},"arguments":["inputtext"]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":70,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":70,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":84,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":84,"character":58}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"resolveFieldData":[{"__symbolic":"method"}],"onInputFocus":[{"__symbolic":"method"}],"onInputBlur":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"onKeydown":[{"__symbolic":"method"}],"updateMaxedOut":[{"__symbolic":"method"}]}},"ChipsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":235,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":236,"character":14},{"__symbolic":"reference","module":"../inputtext/inputtext","name":"InputTextModule","line":236,"character":27},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":236,"character":43}],"exports":[{"__symbolic":"reference","name":"Chips"},{"__symbolic":"reference","module":"../inputtext/inputtext","name":"InputTextModule","line":237,"character":20},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":237,"character":36}],"declarations":[{"__symbolic":"reference","name":"Chips"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"CHIPS_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":8,"character":11},"useExisting":{"__symbolic":"reference","name":"Chips"},"multi":true},"Chips":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"p-chips","template":"\n        <div [ngClass]=\"'ui-chips ui-widget'\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onClick($event)\">\n            <ul [ngClass]=\"{'ui-inputtext ui-state-default ui-corner-all':true,'ui-state-focus':focus,'ui-state-disabled':disabled}\">\n                <li #token *ngFor=\"let item of value; let i = index;\" class=\"ui-chips-token ui-state-highlight ui-corner-all\" (click)=\"onItemClick($event, item)\">\n                    <span *ngIf=\"!disabled\" class=\"ui-chips-token-icon pi pi-fw pi-times\" (click)=\"removeItem($event,i)\"></span>\n                    <span *ngIf=\"!itemTemplate\" class=\"ui-chips-token-label\">{{field ? resolveFieldData(item,field) : item}}</span>\n                    <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n                </li>\n                <li class=\"ui-chips-input-token\">\n                    <input #inputtext type=\"text\" [attr.id]=\"inputId\" [attr.placeholder]=\"(value && value.length ? null : placeholder)\" [attr.tabindex]=\"tabindex\" (keydown)=\"onKeydown($event)\" \n                        (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" [disabled]=\"disabled\" [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\">\n                </li>\n            </ul>\n        </div>\n    ","providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":30,"character":16},{"__symbolic":"reference","name":"CHIPS_VALUE_ACCESSOR"}]}]}],"members":{"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"inputId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"allowDuplicate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"inputStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"inputStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"addOnTab":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"addOnBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"onAdd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":60,"character":5}}]}],"onRemove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":62,"character":5}}]}],"onFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":64,"character":5}}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":66,"character":5}}]}],"onChipClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":68,"character":5}}]}],"inputViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":70,"character":5},"arguments":["inputtext"]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":72,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":72,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":86,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":86,"character":58}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"resolveFieldData":[{"__symbolic":"method"}],"onInputFocus":[{"__symbolic":"method"}],"onInputBlur":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"onKeydown":[{"__symbolic":"method"}],"updateMaxedOut":[{"__symbolic":"method"}]}},"ChipsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":244,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":245,"character":14},{"__symbolic":"reference","module":"../inputtext/inputtext","name":"InputTextModule","line":245,"character":27},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":245,"character":43}],"exports":[{"__symbolic":"reference","name":"Chips"},{"__symbolic":"reference","module":"../inputtext/inputtext","name":"InputTextModule","line":246,"character":20},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":246,"character":36}],"declarations":[{"__symbolic":"reference","name":"Chips"}]}]}]}}}]

components/colorpicker/colorpicker.d.ts

@@ -21,2 +21,4 @@ import { ElementRef, OnDestroy, EventEmitter, Renderer2, ChangeDetectorRef } from '@angular/core';
     baseZIndex: number;
+    showTransitionOptions: string;
+    hideTransitionOptions: string;
     onChange: EventEmitter<any>;
@@ -23,0 +25,0 @@ inputViewChild: ElementRef;

components/colorpicker/colorpicker.js

@@ -31,2 +31,4 @@ "use strict";
         this.baseZIndex = 0;
+        this.showTransitionOptions = '225ms ease-out';
+        this.hideTransitionOptions = '195ms ease-in';
         this.onChange = new core_1.EventEmitter();
@@ -495,2 +497,10 @@ this.defaultColor = 'ff0000';
     __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], ColorPicker.prototype, "showTransitionOptions", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], ColorPicker.prototype, "hideTransitionOptions", void 0);
+    __decorate([
         core_1.Output(),
@@ -526,3 +536,3 @@ __metadata("design:type", core_1.EventEmitter)
             selector: 'p-colorPicker',
-            template: "\n        <div [ngStyle]=\"style\" [class]=\"styleClass\" [ngClass]=\"{'ui-colorpicker ui-widget':true,'ui-colorpicker-overlay':!inline,'ui-colorpicker-dragging':colorDragging||hueDragging}\">\n            <input #input type=\"text\" *ngIf=\"!inline\" class=\"ui-colorpicker-preview ui-inputtext ui-state-default ui-corner-all\" readonly=\"readonly\" [ngClass]=\"{'ui-state-disabled': disabled}\"\n                (focus)=\"onInputFocus()\" (click)=\"onInputClick()\" (keydown)=\"onInputKeydown($event)\" [attr.id]=\"inputId\" [attr.tabindex]=\"tabindex\" [disabled]=\"disabled\"\n                [style.backgroundColor]=\"inputBgColor\">\n            <div *ngIf=\"inline || overlayVisible\" [ngClass]=\"{'ui-colorpicker-panel ui-corner-all': true, 'ui-colorpicker-overlay-panel ui-shadow':!inline, 'ui-state-disabled': disabled}\" (click)=\"onPanelClick()\"\n                [@overlayAnimation]=\"'visible'\" [@.disabled]=\"inline === true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\">\n                <div class=\"ui-colorpicker-content\">\n                    <div #colorSelector class=\"ui-colorpicker-color-selector\" (mousedown)=\"onColorMousedown($event)\">\n                        <div class=\"ui-colorpicker-color\">\n                            <div #colorHandle class=\"ui-colorpicker-color-handle\"></div>\n                        </div>\n                    </div>\n                    <div #hue class=\"ui-colorpicker-hue\" (mousedown)=\"onHueMousedown($event)\">\n                        <div #hueHandle class=\"ui-colorpicker-hue-handle\"></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    ",
+            template: "\n        <div [ngStyle]=\"style\" [class]=\"styleClass\" [ngClass]=\"{'ui-colorpicker ui-widget':true,'ui-colorpicker-overlay':!inline,'ui-colorpicker-dragging':colorDragging||hueDragging}\">\n            <input #input type=\"text\" *ngIf=\"!inline\" class=\"ui-colorpicker-preview ui-inputtext ui-state-default ui-corner-all\" readonly=\"readonly\" [ngClass]=\"{'ui-state-disabled': disabled}\"\n                (focus)=\"onInputFocus()\" (click)=\"onInputClick()\" (keydown)=\"onInputKeydown($event)\" [attr.id]=\"inputId\" [attr.tabindex]=\"tabindex\" [disabled]=\"disabled\"\n                [style.backgroundColor]=\"inputBgColor\">\n            <div *ngIf=\"inline || overlayVisible\" [ngClass]=\"{'ui-colorpicker-panel ui-corner-all': true, 'ui-colorpicker-overlay-panel ui-shadow':!inline, 'ui-state-disabled': disabled}\" (click)=\"onPanelClick()\"\n                [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" [@.disabled]=\"inline === true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\">\n                <div class=\"ui-colorpicker-content\">\n                    <div #colorSelector class=\"ui-colorpicker-color-selector\" (mousedown)=\"onColorMousedown($event)\">\n                        <div class=\"ui-colorpicker-color\">\n                            <div #colorHandle class=\"ui-colorpicker-color-handle\"></div>\n                        </div>\n                    </div>\n                    <div #hue class=\"ui-colorpicker-hue\" (mousedown)=\"onHueMousedown($event)\">\n                        <div #hueHandle class=\"ui-colorpicker-hue-handle\"></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    ",
             animations: [
@@ -538,4 +548,4 @@ animations_1.trigger('overlayAnimation', [
                     })),
-                    animations_1.transition('void => visible', animations_1.animate('225ms ease-out')),
-                    animations_1.transition('visible => void', animations_1.animate('195ms ease-in'))
+                    animations_1.transition('void => visible', animations_1.animate('{{showTransitionParams}}')),
+                    animations_1.transition('visible => void', animations_1.animate('{{hideTransitionParams}}'))
                 ])
@@ -542,0 +552,0 @@ ],

components/colorpicker/colorpicker.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"COLORPICKER_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":7,"character":11},"useExisting":{"__symbolic":"reference","name":"ColorPicker"},"multi":true},"ColorPicker":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"p-colorPicker","template":"\n        <div [ngStyle]=\"style\" [class]=\"styleClass\" [ngClass]=\"{'ui-colorpicker ui-widget':true,'ui-colorpicker-overlay':!inline,'ui-colorpicker-dragging':colorDragging||hueDragging}\">\n            <input #input type=\"text\" *ngIf=\"!inline\" class=\"ui-colorpicker-preview ui-inputtext ui-state-default ui-corner-all\" readonly=\"readonly\" [ngClass]=\"{'ui-state-disabled': disabled}\"\n                (focus)=\"onInputFocus()\" (click)=\"onInputClick()\" (keydown)=\"onInputKeydown($event)\" [attr.id]=\"inputId\" [attr.tabindex]=\"tabindex\" [disabled]=\"disabled\"\n                [style.backgroundColor]=\"inputBgColor\">\n            <div *ngIf=\"inline || overlayVisible\" [ngClass]=\"{'ui-colorpicker-panel ui-corner-all': true, 'ui-colorpicker-overlay-panel ui-shadow':!inline, 'ui-state-disabled': disabled}\" (click)=\"onPanelClick()\"\n                [@overlayAnimation]=\"'visible'\" [@.disabled]=\"inline === true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\">\n                <div class=\"ui-colorpicker-content\">\n                    <div #colorSelector class=\"ui-colorpicker-color-selector\" (mousedown)=\"onColorMousedown($event)\">\n                        <div class=\"ui-colorpicker-color\">\n                            <div #colorHandle class=\"ui-colorpicker-color-handle\"></div>\n                        </div>\n                    </div>\n                    <div #hue class=\"ui-colorpicker-hue\" (mousedown)=\"onHueMousedown($event)\">\n                        <div #hueHandle class=\"ui-colorpicker-hue-handle\"></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":35,"character":8},"arguments":["overlayAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":36,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":36,"character":26},"arguments":[{"transform":"translateY(5%)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":40,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":40,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":44,"character":12},"arguments":["void => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":44,"character":42},"arguments":["225ms ease-out"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":45,"character":12},"arguments":["visible => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":45,"character":42},"arguments":["195ms ease-in"]}]}]]}],"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":48,"character":16},{"__symbolic":"reference","name":"COLORPICKER_VALUE_ACCESSOR"}]}]}],"members":{"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"inline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"inputId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":72,"character":5}}]}],"inputViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":74,"character":5},"arguments":["input"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":114,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":114,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":114,"character":87},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":114,"character":109}]}],"colorSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":116,"character":5},"arguments":["colorSelector"]}]}],"colorHandle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":120,"character":5},"arguments":["colorHandle"]}]}],"hue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":124,"character":5},"arguments":["hue"]}]}],"hueHandle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":128,"character":5},"arguments":["hueHandle"]}]}],"onHueMousedown":[{"__symbolic":"method"}],"pickHue":[{"__symbolic":"method"}],"onColorMousedown":[{"__symbolic":"method"}],"pickColor":[{"__symbolic":"method"}],"getValueToUpdate":[{"__symbolic":"method"}],"updateModel":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"updateColorSelector":[{"__symbolic":"method"}],"updateUI":[{"__symbolic":"method"}],"onInputFocus":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"onOverlayAnimationStart":[{"__symbolic":"method"}],"appendOverlay":[{"__symbolic":"method"}],"restoreOverlayAppend":[{"__symbolic":"method"}],"alignOverlay":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"onInputClick":[{"__symbolic":"method"}],"togglePanel":[{"__symbolic":"method"}],"onInputKeydown":[{"__symbolic":"method"}],"onPanelClick":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"bindDocumentClickListener":[{"__symbolic":"method"}],"unbindDocumentClickListener":[{"__symbolic":"method"}],"bindDocumentMousemoveListener":[{"__symbolic":"method"}],"unbindDocumentMousemoveListener":[{"__symbolic":"method"}],"bindDocumentMouseupListener":[{"__symbolic":"method"}],"unbindDocumentMouseupListener":[{"__symbolic":"method"}],"validateHSB":[{"__symbolic":"method"}],"validateRGB":[{"__symbolic":"method"}],"validateHEX":[{"__symbolic":"method"}],"HEXtoRGB":[{"__symbolic":"method"}],"HEXtoHSB":[{"__symbolic":"method"}],"RGBtoHSB":[{"__symbolic":"method"}],"HSBtoRGB":[{"__symbolic":"method"}],"RGBtoHEX":[{"__symbolic":"method"}],"HSBtoHEX":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ColorPickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":550,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":551,"character":14}],"exports":[{"__symbolic":"reference","name":"ColorPicker"}],"declarations":[{"__symbolic":"reference","name":"ColorPicker"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"COLORPICKER_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":7,"character":11},"useExisting":{"__symbolic":"reference","name":"ColorPicker"},"multi":true},"ColorPicker":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"p-colorPicker","template":"\n        <div [ngStyle]=\"style\" [class]=\"styleClass\" [ngClass]=\"{'ui-colorpicker ui-widget':true,'ui-colorpicker-overlay':!inline,'ui-colorpicker-dragging':colorDragging||hueDragging}\">\n            <input #input type=\"text\" *ngIf=\"!inline\" class=\"ui-colorpicker-preview ui-inputtext ui-state-default ui-corner-all\" readonly=\"readonly\" [ngClass]=\"{'ui-state-disabled': disabled}\"\n                (focus)=\"onInputFocus()\" (click)=\"onInputClick()\" (keydown)=\"onInputKeydown($event)\" [attr.id]=\"inputId\" [attr.tabindex]=\"tabindex\" [disabled]=\"disabled\"\n                [style.backgroundColor]=\"inputBgColor\">\n            <div *ngIf=\"inline || overlayVisible\" [ngClass]=\"{'ui-colorpicker-panel ui-corner-all': true, 'ui-colorpicker-overlay-panel ui-shadow':!inline, 'ui-state-disabled': disabled}\" (click)=\"onPanelClick()\"\n                [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" [@.disabled]=\"inline === true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\">\n                <div class=\"ui-colorpicker-content\">\n                    <div #colorSelector class=\"ui-colorpicker-color-selector\" (mousedown)=\"onColorMousedown($event)\">\n                        <div class=\"ui-colorpicker-color\">\n                            <div #colorHandle class=\"ui-colorpicker-color-handle\"></div>\n                        </div>\n                    </div>\n                    <div #hue class=\"ui-colorpicker-hue\" (mousedown)=\"onHueMousedown($event)\">\n                        <div #hueHandle class=\"ui-colorpicker-hue-handle\"></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":35,"character":8},"arguments":["overlayAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":36,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":36,"character":26},"arguments":[{"transform":"translateY(5%)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":40,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":40,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":44,"character":12},"arguments":["void => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":44,"character":42},"arguments":["{{showTransitionParams}}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":45,"character":12},"arguments":["visible => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":45,"character":42},"arguments":["{{hideTransitionParams}}"]}]}]]}],"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":48,"character":16},{"__symbolic":"reference","name":"COLORPICKER_VALUE_ACCESSOR"}]}]}],"members":{"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"inline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"inputId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"showTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"hideTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":76,"character":5}}]}],"inputViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":78,"character":5},"arguments":["input"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":118,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":118,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":118,"character":87},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":118,"character":109}]}],"colorSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":120,"character":5},"arguments":["colorSelector"]}]}],"colorHandle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":124,"character":5},"arguments":["colorHandle"]}]}],"hue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":128,"character":5},"arguments":["hue"]}]}],"hueHandle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":132,"character":5},"arguments":["hueHandle"]}]}],"onHueMousedown":[{"__symbolic":"method"}],"pickHue":[{"__symbolic":"method"}],"onColorMousedown":[{"__symbolic":"method"}],"pickColor":[{"__symbolic":"method"}],"getValueToUpdate":[{"__symbolic":"method"}],"updateModel":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"updateColorSelector":[{"__symbolic":"method"}],"updateUI":[{"__symbolic":"method"}],"onInputFocus":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"onOverlayAnimationStart":[{"__symbolic":"method"}],"appendOverlay":[{"__symbolic":"method"}],"restoreOverlayAppend":[{"__symbolic":"method"}],"alignOverlay":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"onInputClick":[{"__symbolic":"method"}],"togglePanel":[{"__symbolic":"method"}],"onInputKeydown":[{"__symbolic":"method"}],"onPanelClick":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"bindDocumentClickListener":[{"__symbolic":"method"}],"unbindDocumentClickListener":[{"__symbolic":"method"}],"bindDocumentMousemoveListener":[{"__symbolic":"method"}],"unbindDocumentMousemoveListener":[{"__symbolic":"method"}],"bindDocumentMouseupListener":[{"__symbolic":"method"}],"unbindDocumentMouseupListener":[{"__symbolic":"method"}],"validateHSB":[{"__symbolic":"method"}],"validateRGB":[{"__symbolic":"method"}],"validateHEX":[{"__symbolic":"method"}],"HEXtoRGB":[{"__symbolic":"method"}],"HEXtoHSB":[{"__symbolic":"method"}],"RGBtoHSB":[{"__symbolic":"method"}],"HSBtoRGB":[{"__symbolic":"method"}],"RGBtoHEX":[{"__symbolic":"method"}],"HSBtoHEX":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ColorPickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":554,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":555,"character":14}],"exports":[{"__symbolic":"reference","name":"ColorPicker"}],"declarations":[{"__symbolic":"reference","name":"ColorPicker"}]}]}]}}}]

components/confirmdialog/confirmdialog.d.ts

@@ -35,2 +35,3 @@ import { ElementRef, OnDestroy, Renderer2, NgZone } from '@angular/core';
     baseZIndex: number;
+    transitionOptions: string;
     footer: any;
@@ -37,0 +38,0 @@ confirmation: Confirmation;

components/confirmdialog/confirmdialog.js

@@ -38,3 +38,4 @@ "use strict";
         this.baseZIndex = 0;
-        this.subscription = confirmationService.requireConfirmation$.subscribe(function (confirmation) {
+        this.transitionOptions = '400ms cubic-bezier(0.25, 0.8, 0.25, 1)';
+        this.subscription = this.confirmationService.requireConfirmation$.subscribe(function (confirmation) {
             if (confirmation.key === _this.key) {
@@ -280,2 +281,6 @@ _this.confirmation = confirmation;
     __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], ConfirmDialog.prototype, "transitionOptions", void 0);
+    __decorate([
         core_1.ContentChild(shared_1.Footer),
@@ -287,3 +292,3 @@ __metadata("design:type", Object)
             selector: 'p-confirmDialog',
-            template: "\n        <div [ngClass]=\"{'ui-dialog ui-confirmdialog ui-widget ui-widget-content ui-corner-all ui-shadow':true,'ui-dialog-rtl':rtl}\" \n            [style.width.px]=\"width\" [style.height.px]=\"height\" (mousedown)=\"moveOnTop()\"\n            [@animation]=\"'visible'\" (@animation.start)=\"onAnimationStart($event)\" *ngIf=\"visible\">\n            <div class=\"ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top\">\n                <span class=\"ui-dialog-title\" *ngIf=\"header\">{{header}}</span>\n                <a *ngIf=\"closable\" [ngClass]=\"{'ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all':true}\" href=\"#\" role=\"button\" (click)=\"close($event)\">\n                    <span class=\"pi pi-fw pi-times\"></span>\n                </a>\n            </div>\n            <div class=\"ui-dialog-content ui-widget-content\">\n                <i [ngClass]=\"'ui-confirmdialog-icon'\" [class]=\"icon\" *ngIf=\"icon\"></i>\n                <span class=\"ui-confirmdialog-message\" [innerHTML]=\"message\"></span>\n            </div>\n            <div class=\"ui-dialog-footer ui-widget-content\" *ngIf=\"footer\">\n                <ng-content select=\"p-footer\"></ng-content>\n            </div>\n            <div class=\"ui-dialog-footer ui-widget-content\" *ngIf=\"!footer\">\n                <button type=\"button\" pButton [icon]=\"acceptIcon\" [label]=\"acceptLabel\" (click)=\"accept()\" [class]=\"acceptButtonStyleClass\" *ngIf=\"acceptVisible\"></button>\n                <button type=\"button\" pButton [icon]=\"rejectIcon\" [label]=\"rejectLabel\" (click)=\"reject()\" [class]=\"rejectButtonStyleClass\" *ngIf=\"rejectVisible\"></button>\n            </div>\n        </div>\n    ",
+            template: "\n        <div [ngClass]=\"{'ui-dialog ui-confirmdialog ui-widget ui-widget-content ui-corner-all ui-shadow':true,'ui-dialog-rtl':rtl}\" \n            [style.width.px]=\"width\" [style.height.px]=\"height\" (mousedown)=\"moveOnTop()\"\n            [@animation]=\"{value: 'visible', params: {transitionParams: transitionOptions}}\" (@animation.start)=\"onAnimationStart($event)\" *ngIf=\"visible\">\n            <div class=\"ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top\">\n                <span class=\"ui-dialog-title\" *ngIf=\"header\">{{header}}</span>\n                <a *ngIf=\"closable\" [ngClass]=\"{'ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all':true}\" href=\"#\" role=\"button\" (click)=\"close($event)\">\n                    <span class=\"pi pi-fw pi-times\"></span>\n                </a>\n            </div>\n            <div class=\"ui-dialog-content ui-widget-content\">\n                <i [ngClass]=\"'ui-confirmdialog-icon'\" [class]=\"icon\" *ngIf=\"icon\"></i>\n                <span class=\"ui-confirmdialog-message\" [innerHTML]=\"message\"></span>\n            </div>\n            <div class=\"ui-dialog-footer ui-widget-content\" *ngIf=\"footer\">\n                <ng-content select=\"p-footer\"></ng-content>\n            </div>\n            <div class=\"ui-dialog-footer ui-widget-content\" *ngIf=\"!footer\">\n                <button type=\"button\" pButton [icon]=\"acceptIcon\" [label]=\"acceptLabel\" (click)=\"accept()\" [class]=\"acceptButtonStyleClass\" *ngIf=\"acceptVisible\"></button>\n                <button type=\"button\" pButton [icon]=\"rejectIcon\" [label]=\"rejectLabel\" (click)=\"reject()\" [class]=\"rejectButtonStyleClass\" *ngIf=\"rejectVisible\"></button>\n            </div>\n        </div>\n    ",
             animations: [
@@ -299,3 +304,3 @@ animations_1.trigger('animation', [
                     })),
-                    animations_1.transition('* => *', animations_1.animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'))
+                    animations_1.transition('* => *', animations_1.animate('{{transitionParams}}'))
                 ])
@@ -305,4 +310,3 @@ ],
         }),
-        __metadata("design:paramtypes", [core_1.ElementRef, domhandler_1.DomHandler,
-            core_1.Renderer2, confirmationservice_1.ConfirmationService, core_1.NgZone])
+        __metadata("design:paramtypes", [core_1.ElementRef, domhandler_1.DomHandler, core_1.Renderer2, confirmationservice_1.ConfirmationService, core_1.NgZone])
     ], ConfirmDialog);
@@ -309,0 +313,0 @@ return ConfirmDialog;

components/confirmdialog/confirmdialog.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"ConfirmDialog":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"p-confirmDialog","template":"\n        <div [ngClass]=\"{'ui-dialog ui-confirmdialog ui-widget ui-widget-content ui-corner-all ui-shadow':true,'ui-dialog-rtl':rtl}\" \n            [style.width.px]=\"width\" [style.height.px]=\"height\" (mousedown)=\"moveOnTop()\"\n            [@animation]=\"'visible'\" (@animation.start)=\"onAnimationStart($event)\" *ngIf=\"visible\">\n            <div class=\"ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top\">\n                <span class=\"ui-dialog-title\" *ngIf=\"header\">{{header}}</span>\n                <a *ngIf=\"closable\" [ngClass]=\"{'ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all':true}\" href=\"#\" role=\"button\" (click)=\"close($event)\">\n                    <span class=\"pi pi-fw pi-times\"></span>\n                </a>\n            </div>\n            <div class=\"ui-dialog-content ui-widget-content\">\n                <i [ngClass]=\"'ui-confirmdialog-icon'\" [class]=\"icon\" *ngIf=\"icon\"></i>\n                <span class=\"ui-confirmdialog-message\" [innerHTML]=\"message\"></span>\n            </div>\n            <div class=\"ui-dialog-footer ui-widget-content\" *ngIf=\"footer\">\n                <ng-content select=\"p-footer\"></ng-content>\n            </div>\n            <div class=\"ui-dialog-footer ui-widget-content\" *ngIf=\"!footer\">\n                <button type=\"button\" pButton [icon]=\"acceptIcon\" [label]=\"acceptLabel\" (click)=\"accept()\" [class]=\"acceptButtonStyleClass\" *ngIf=\"acceptVisible\"></button>\n                <button type=\"button\" pButton [icon]=\"rejectIcon\" [label]=\"rejectLabel\" (click)=\"reject()\" [class]=\"rejectButtonStyleClass\" *ngIf=\"rejectVisible\"></button>\n            </div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":36,"character":8},"arguments":["animation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":37,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":37,"character":26},"arguments":[{"transform":"translate3d(0, 25%, 0) scale(0.9)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":41,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":41,"character":29},"arguments":[{"transform":"none","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":45,"character":12},"arguments":["* => *",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":45,"character":33},"arguments":["400ms cubic-bezier(0.25, 0.8, 0.25, 1)"]}]}]]}],"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":48,"character":16}]}]}],"members":{"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"message":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"acceptIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"acceptLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"acceptVisible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"rejectIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"rejectLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":5}}]}],"rejectVisible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"acceptButtonStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"rejectButtonStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"closeOnEscape":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":5}}]}],"rtl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":5}}]}],"closable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":5}}]}],"responsive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":5}}]}],"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":5}}]}],"footer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":96,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"Footer","line":96,"character":18}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":114,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":114,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":115,"character":29},{"__symbolic":"reference","module":"../common/confirmationservice","name":"ConfirmationService","line":115,"character":69},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":115,"character":103}]}],"onAnimationStart":[{"__symbolic":"method"}],"appendContainer":[{"__symbolic":"method"}],"restoreAppend":[{"__symbolic":"method"}],"center":[{"__symbolic":"method"}],"enableModality":[{"__symbolic":"method"}],"disableModality":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"moveOnTop":[{"__symbolic":"method"}],"bindGlobalListeners":[{"__symbolic":"method"}],"unbindGlobalListeners":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"accept":[{"__symbolic":"method"}],"reject":[{"__symbolic":"method"}]}},"ConfirmDialogModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":294,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":295,"character":14},{"__symbolic":"reference","module":"../button/button","name":"ButtonModule","line":295,"character":27}],"exports":[{"__symbolic":"reference","name":"ConfirmDialog"},{"__symbolic":"reference","module":"../button/button","name":"ButtonModule","line":296,"character":28},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":296,"character":41}],"declarations":[{"__symbolic":"reference","name":"ConfirmDialog"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"ConfirmDialog":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"p-confirmDialog","template":"\n        <div [ngClass]=\"{'ui-dialog ui-confirmdialog ui-widget ui-widget-content ui-corner-all ui-shadow':true,'ui-dialog-rtl':rtl}\" \n            [style.width.px]=\"width\" [style.height.px]=\"height\" (mousedown)=\"moveOnTop()\"\n            [@animation]=\"{value: 'visible', params: {transitionParams: transitionOptions}}\" (@animation.start)=\"onAnimationStart($event)\" *ngIf=\"visible\">\n            <div class=\"ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top\">\n                <span class=\"ui-dialog-title\" *ngIf=\"header\">{{header}}</span>\n                <a *ngIf=\"closable\" [ngClass]=\"{'ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all':true}\" href=\"#\" role=\"button\" (click)=\"close($event)\">\n                    <span class=\"pi pi-fw pi-times\"></span>\n                </a>\n            </div>\n            <div class=\"ui-dialog-content ui-widget-content\">\n                <i [ngClass]=\"'ui-confirmdialog-icon'\" [class]=\"icon\" *ngIf=\"icon\"></i>\n                <span class=\"ui-confirmdialog-message\" [innerHTML]=\"message\"></span>\n            </div>\n            <div class=\"ui-dialog-footer ui-widget-content\" *ngIf=\"footer\">\n                <ng-content select=\"p-footer\"></ng-content>\n            </div>\n            <div class=\"ui-dialog-footer ui-widget-content\" *ngIf=\"!footer\">\n                <button type=\"button\" pButton [icon]=\"acceptIcon\" [label]=\"acceptLabel\" (click)=\"accept()\" [class]=\"acceptButtonStyleClass\" *ngIf=\"acceptVisible\"></button>\n                <button type=\"button\" pButton [icon]=\"rejectIcon\" [label]=\"rejectLabel\" (click)=\"reject()\" [class]=\"rejectButtonStyleClass\" *ngIf=\"rejectVisible\"></button>\n            </div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":36,"character":8},"arguments":["animation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":37,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":37,"character":26},"arguments":[{"transform":"translate3d(0, 25%, 0) scale(0.9)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":41,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":41,"character":29},"arguments":[{"transform":"none","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":45,"character":12},"arguments":["* => *",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":45,"character":33},"arguments":["{{transitionParams}}"]}]}]]}],"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":48,"character":16}]}]}],"members":{"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"message":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"acceptIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"acceptLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"acceptVisible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"rejectIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"rejectLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":5}}]}],"rejectVisible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"acceptButtonStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"rejectButtonStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"closeOnEscape":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":5}}]}],"rtl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":5}}]}],"closable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":5}}]}],"responsive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":5}}]}],"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":5}}]}],"transitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":5}}]}],"footer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":98,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"Footer","line":98,"character":18}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":116,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":116,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":116,"character":87},{"__symbolic":"reference","module":"../common/confirmationservice","name":"ConfirmationService","line":116,"character":127},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":116,"character":161}]}],"onAnimationStart":[{"__symbolic":"method"}],"appendContainer":[{"__symbolic":"method"}],"restoreAppend":[{"__symbolic":"method"}],"center":[{"__symbolic":"method"}],"enableModality":[{"__symbolic":"method"}],"disableModality":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"moveOnTop":[{"__symbolic":"method"}],"bindGlobalListeners":[{"__symbolic":"method"}],"unbindGlobalListeners":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"accept":[{"__symbolic":"method"}],"reject":[{"__symbolic":"method"}]}},"ConfirmDialogModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":295,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":296,"character":14},{"__symbolic":"reference","module":"../button/button","name":"ButtonModule","line":296,"character":27}],"exports":[{"__symbolic":"reference","name":"ConfirmDialog"},{"__symbolic":"reference","module":"../button/button","name":"ButtonModule","line":297,"character":28},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":297,"character":41}],"declarations":[{"__symbolic":"reference","name":"ConfirmDialog"}]}]}]}}}]

components/dataview/dataview.js

@@ -105,2 +105,7 @@ "use strict";
             this.updateTotalRecords();
+            if (!this.lazy) {
+                if (this.hasFilter()) {
+                    this.filter(this.filterValue);
+                }
+            }
         },
@@ -303,3 +308,3 @@ enumerable: true,
             selector: 'p-dataView',
-            template: "\n        <div [ngClass]=\"{'ui-dataview ui-widget': true, 'ui-dataview-list': (layout === 'list'), 'ui-dataview-grid': (layout === 'grid')}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-dataview-loading ui-widget-overlay\" *ngIf=\"loading\"></div>\n            <div class=\"ui-dataview-loading-content\" *ngIf=\"loading\">\n                <i [class]=\"'ui-dataview-loading-icon pi-spin ' + loadingIcon\"></i>\n            </div>\n            <div class=\"ui-dataview-header ui-widget-header ui-corner-top\">\n                <ng-content select=\"p-header\"></ng-content>\n            </div>\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"paginate($event)\" styleClass=\"ui-paginator-top\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && (paginatorPosition === 'top' || paginatorPosition =='both')\"\n                [dropdownAppendTo]=\"paginatorDropdownAppendTo\" [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\"></p-paginator>\n            <div class=\"ui-dataview-content ui-widget-content\">\n                <div class=\"ui-g\">\n                    <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"paginator ? ((filteredValue||value) | slice:(lazy ? 0 : first):((lazy ? 0 : first) + rows)) : (filteredValue||value)\" [ngForTrackBy]=\"trackBy\">\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: rowData, rowIndex: rowIndex}\"></ng-container>\n                    </ng-template>\n                    <div *ngIf=\"isEmpty()\" class=\"ui-widget-content ui-g-12\">{{emptyMessage}}</div>\n                </div>\n            </div>\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"paginate($event)\" styleClass=\"ui-paginator-bottom\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && (paginatorPosition === 'bottom' || paginatorPosition =='both')\"\n                [dropdownAppendTo]=\"paginatorDropdownAppendTo\" [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\"></p-paginator>\n            <div class=\"ui-dataview-footer ui-widget-header ui-corner-bottom\" *ngIf=\"footer\">\n                <ng-content select=\"p-footer\"></ng-content>\n            </div>\n        </div>\n    ",
+            template: "\n        <div [ngClass]=\"{'ui-dataview ui-widget': true, 'ui-dataview-list': (layout === 'list'), 'ui-dataview-grid': (layout === 'grid')}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-dataview-loading ui-widget-overlay\" *ngIf=\"loading\"></div>\n            <div class=\"ui-dataview-loading-content\" *ngIf=\"loading\">\n                <i [class]=\"'ui-dataview-loading-icon pi-spin ' + loadingIcon\"></i>\n            </div>\n            <div class=\"ui-dataview-header ui-widget-header ui-corner-top\">\n                <ng-content select=\"p-header\"></ng-content>\n            </div>\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"paginate($event)\" styleClass=\"ui-paginator-top\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && (paginatorPosition === 'top' || paginatorPosition =='both')\"\n                [dropdownAppendTo]=\"paginatorDropdownAppendTo\" [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\"></p-paginator>\n            <div class=\"ui-dataview-content ui-widget-content\">\n                <div class=\"ui-g\">\n                    <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"paginator ? ((filteredValue||value) | slice:(lazy ? 0 : first):((lazy ? 0 : first) + rows)) : (filteredValue||value)\" [ngForTrackBy]=\"trackBy\">\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: rowData, rowIndex: rowIndex}\"></ng-container>\n                    </ng-template>\n                    <div *ngIf=\"isEmpty()\" class=\"ui-g-12 ui-dataview-emptymessage\">{{emptyMessage}}</div>\n                </div>\n            </div>\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"paginate($event)\" styleClass=\"ui-paginator-bottom\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && (paginatorPosition === 'bottom' || paginatorPosition =='both')\"\n                [dropdownAppendTo]=\"paginatorDropdownAppendTo\" [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\"></p-paginator>\n            <div class=\"ui-dataview-footer ui-widget-header ui-corner-bottom\" *ngIf=\"footer\">\n                <ng-content select=\"p-footer\"></ng-content>\n            </div>\n        </div>\n    ",
             providers: [objectutils_1.ObjectUtils]
@@ -306,0 +311,0 @@ }),

components/dataview/dataview.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"DataView":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"p-dataView","template":"\n        <div [ngClass]=\"{'ui-dataview ui-widget': true, 'ui-dataview-list': (layout === 'list'), 'ui-dataview-grid': (layout === 'grid')}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-dataview-loading ui-widget-overlay\" *ngIf=\"loading\"></div>\n            <div class=\"ui-dataview-loading-content\" *ngIf=\"loading\">\n                <i [class]=\"'ui-dataview-loading-icon pi-spin ' + loadingIcon\"></i>\n            </div>\n            <div class=\"ui-dataview-header ui-widget-header ui-corner-top\">\n                <ng-content select=\"p-header\"></ng-content>\n            </div>\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"paginate($event)\" styleClass=\"ui-paginator-top\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && (paginatorPosition === 'top' || paginatorPosition =='both')\"\n                [dropdownAppendTo]=\"paginatorDropdownAppendTo\" [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\"></p-paginator>\n            <div class=\"ui-dataview-content ui-widget-content\">\n                <div class=\"ui-g\">\n                    <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"paginator ? ((filteredValue||value) | slice:(lazy ? 0 : first):((lazy ? 0 : first) + rows)) : (filteredValue||value)\" [ngForTrackBy]=\"trackBy\">\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: rowData, rowIndex: rowIndex}\"></ng-container>\n                    </ng-template>\n                    <div *ngIf=\"isEmpty()\" class=\"ui-widget-content ui-g-12\">{{emptyMessage}}</div>\n                </div>\n            </div>\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"paginate($event)\" styleClass=\"ui-paginator-bottom\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && (paginatorPosition === 'bottom' || paginatorPosition =='both')\"\n                [dropdownAppendTo]=\"paginatorDropdownAppendTo\" [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\"></p-paginator>\n            <div class=\"ui-dataview-footer ui-widget-header ui-corner-bottom\" *ngIf=\"footer\">\n                <ng-content select=\"p-footer\"></ng-content>\n            </div>\n        </div>\n    ","providers":[{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":38,"character":16}]}]}],"members":{"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"paginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"rows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"totalRecords":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"pageLinks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"rowsPerPageOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"paginatorPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"alwaysShowPaginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"paginatorDropdownAppendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"lazy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"emptyMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"onLazyLoad":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":64,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":5}}]}],"trackBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"filterBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"loading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"loadingIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"first":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"onPage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":80,"character":5}}]}],"onSort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":82,"character":5}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":84,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"Header","line":84,"character":18}]}]}],"footer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":86,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"Footer","line":86,"character":18}]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":88,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":88,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":112,"character":27},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":112,"character":59}]}],"ngOnInit":[{"__symbolic":"method"}],"sortField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":121,"character":5}}]}],"sortOrder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":5}}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"updateItemTemplate":[{"__symbolic":"method"}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":182,"character":5}}]}],"changeLayout":[{"__symbolic":"method"}],"updateTotalRecords":[{"__symbolic":"method"}],"paginate":[{"__symbolic":"method"}],"sort":[{"__symbolic":"method"}],"isEmpty":[{"__symbolic":"method"}],"createLazyLoadMetadata":[{"__symbolic":"method"}],"getBlockableElement":[{"__symbolic":"method"}],"filter":[{"__symbolic":"method"}],"hasFilter":[{"__symbolic":"method"}]}},"DataViewLayoutOptions":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":289,"character":1},"arguments":[{"selector":"p-dataViewLayoutOptions","template":"\n        <div [ngClass]=\"'ui-dataview-layout-options ui-selectbutton ui-buttonset'\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <a href=\"#\" class=\"ui-button ui-button-icon-only ui-state-default\" (click)=\"changeLayout($event, 'list')\"\n                [ngClass]=\"{'ui-state-active': dv.layout === 'list'}\">\n                <i class=\"pi pi-bars ui-button-icon-left\"></i>\n                <span class=\"ui-button-text ui-clickable\">ui-btn</span>\n            </a><a href=\"#\" class=\"ui-button ui-button-icon-only ui-state-default\" (click)=\"changeLayout($event, 'grid')\"\n                [ngClass]=\"{'ui-state-active': dv.layout === 'grid'}\">\n                <i class=\"pi pi-th-large ui-button-icon-left\"></i>\n                <span class=\"ui-button-text ui-clickable\">ui-btn</span>\n            </a>\n        </div>\n    "}]}],"members":{"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":307,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":309,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"DataView"}]}],"changeLayout":[{"__symbolic":"method"}]}},"DataViewModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":318,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":319,"character":14},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":319,"character":27},{"__symbolic":"reference","module":"../paginator/paginator","name":"PaginatorModule","line":319,"character":40}],"exports":[{"__symbolic":"reference","name":"DataView"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":320,"character":23},{"__symbolic":"reference","name":"DataViewLayoutOptions"}],"declarations":[{"__symbolic":"reference","name":"DataView"},{"__symbolic":"reference","name":"DataViewLayoutOptions"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"DataView":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"p-dataView","template":"\n        <div [ngClass]=\"{'ui-dataview ui-widget': true, 'ui-dataview-list': (layout === 'list'), 'ui-dataview-grid': (layout === 'grid')}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-dataview-loading ui-widget-overlay\" *ngIf=\"loading\"></div>\n            <div class=\"ui-dataview-loading-content\" *ngIf=\"loading\">\n                <i [class]=\"'ui-dataview-loading-icon pi-spin ' + loadingIcon\"></i>\n            </div>\n            <div class=\"ui-dataview-header ui-widget-header ui-corner-top\">\n                <ng-content select=\"p-header\"></ng-content>\n            </div>\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"paginate($event)\" styleClass=\"ui-paginator-top\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && (paginatorPosition === 'top' || paginatorPosition =='both')\"\n                [dropdownAppendTo]=\"paginatorDropdownAppendTo\" [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\"></p-paginator>\n            <div class=\"ui-dataview-content ui-widget-content\">\n                <div class=\"ui-g\">\n                    <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"paginator ? ((filteredValue||value) | slice:(lazy ? 0 : first):((lazy ? 0 : first) + rows)) : (filteredValue||value)\" [ngForTrackBy]=\"trackBy\">\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: rowData, rowIndex: rowIndex}\"></ng-container>\n                    </ng-template>\n                    <div *ngIf=\"isEmpty()\" class=\"ui-g-12 ui-dataview-emptymessage\">{{emptyMessage}}</div>\n                </div>\n            </div>\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"paginate($event)\" styleClass=\"ui-paginator-bottom\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && (paginatorPosition === 'bottom' || paginatorPosition =='both')\"\n                [dropdownAppendTo]=\"paginatorDropdownAppendTo\" [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\"></p-paginator>\n            <div class=\"ui-dataview-footer ui-widget-header ui-corner-bottom\" *ngIf=\"footer\">\n                <ng-content select=\"p-footer\"></ng-content>\n            </div>\n        </div>\n    ","providers":[{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":38,"character":16}]}]}],"members":{"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"paginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"rows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"totalRecords":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"pageLinks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"rowsPerPageOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"paginatorPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"alwaysShowPaginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"paginatorDropdownAppendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"lazy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"emptyMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"onLazyLoad":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":64,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":5}}]}],"trackBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"filterBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"loading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"loadingIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"first":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"onPage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":80,"character":5}}]}],"onSort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":82,"character":5}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":84,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"Header","line":84,"character":18}]}]}],"footer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":86,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"Footer","line":86,"character":18}]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":88,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":88,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":112,"character":27},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":112,"character":59}]}],"ngOnInit":[{"__symbolic":"method"}],"sortField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":121,"character":5}}]}],"sortOrder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":5}}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"updateItemTemplate":[{"__symbolic":"method"}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":182,"character":5}}]}],"changeLayout":[{"__symbolic":"method"}],"updateTotalRecords":[{"__symbolic":"method"}],"paginate":[{"__symbolic":"method"}],"sort":[{"__symbolic":"method"}],"isEmpty":[{"__symbolic":"method"}],"createLazyLoadMetadata":[{"__symbolic":"method"}],"getBlockableElement":[{"__symbolic":"method"}],"filter":[{"__symbolic":"method"}],"hasFilter":[{"__symbolic":"method"}]}},"DataViewLayoutOptions":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":294,"character":1},"arguments":[{"selector":"p-dataViewLayoutOptions","template":"\n        <div [ngClass]=\"'ui-dataview-layout-options ui-selectbutton ui-buttonset'\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <a href=\"#\" class=\"ui-button ui-button-icon-only ui-state-default\" (click)=\"changeLayout($event, 'list')\"\n                [ngClass]=\"{'ui-state-active': dv.layout === 'list'}\">\n                <i class=\"pi pi-bars ui-button-icon-left\"></i>\n                <span class=\"ui-button-text ui-clickable\">ui-btn</span>\n            </a><a href=\"#\" class=\"ui-button ui-button-icon-only ui-state-default\" (click)=\"changeLayout($event, 'grid')\"\n                [ngClass]=\"{'ui-state-active': dv.layout === 'grid'}\">\n                <i class=\"pi pi-th-large ui-button-icon-left\"></i>\n                <span class=\"ui-button-text ui-clickable\">ui-btn</span>\n            </a>\n        </div>\n    "}]}],"members":{"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":312,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":314,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"DataView"}]}],"changeLayout":[{"__symbolic":"method"}]}},"DataViewModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":323,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":324,"character":14},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":324,"character":27},{"__symbolic":"reference","module":"../paginator/paginator","name":"PaginatorModule","line":324,"character":40}],"exports":[{"__symbolic":"reference","name":"DataView"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":325,"character":23},{"__symbolic":"reference","name":"DataViewLayoutOptions"}],"declarations":[{"__symbolic":"reference","name":"DataView"},{"__symbolic":"reference","name":"DataViewLayoutOptions"}]}]}]}}}]

components/dialog/dialog.d.ts

@@ -39,2 +39,3 @@ import { ElementRef, OnDestroy, EventEmitter, Renderer2, QueryList, NgZone } from '@angular/core';
     maximizable: boolean;
+    transitionOptions: string;
     headerFacet: QueryList<Header>;
@@ -107,3 +108,3 @@ footerFacet: QueryList<Header>;
     onAnimationStart(event: AnimationEvent): void;
-    onOverlayHide(): void;
+    onContainerDestroy(): void;
     ngOnDestroy(): void;
@@ -110,0 +111,0 @@ }

components/dialog/dialog.js

@@ -39,2 +39,3 @@ "use strict";
         this.focusOnShow = true;
+        this.transitionOptions = '400ms cubic-bezier(0.25, 0.8, 0.25, 1)';
         this.onShow = new core_1.EventEmitter();
@@ -410,10 +411,8 @@ this.onHide = new core_1.EventEmitter();
             case 'void':
-                this.onOverlayHide();
+                this.onContainerDestroy();
+                this.onHide.emit({});
                 break;
         }
     };
-    Dialog.prototype.onOverlayHide = function () {
-        if (this.visible) {
-            this.onHide.emit({});
-        }
+    Dialog.prototype.onContainerDestroy = function () {
         this.unbindGlobalListeners();
@@ -423,2 +422,3 @@ this.dragging = false;
             this.domHandler.removeClass(document.body, 'ui-overflow-hidden');
+            this.maximized = false;
         }
@@ -431,4 +431,6 @@ if (this.modal) {
     Dialog.prototype.ngOnDestroy = function () {
-        this.restoreAppend();
-        this.onOverlayHide();
+        if (this.container) {
+            this.restoreAppend();
+            this.onContainerDestroy();
+        }
     };
@@ -552,2 +554,6 @@ __decorate([
     __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], Dialog.prototype, "transitionOptions", void 0);
+    __decorate([
         core_1.ContentChildren(shared_1.Header, { descendants: false }),
@@ -587,3 +593,3 @@ __metadata("design:type", core_1.QueryList)
             selector: 'p-dialog',
-            template: "\n        <div #container [ngClass]=\"{'ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow':true, 'ui-dialog-rtl':rtl,'ui-dialog-draggable':draggable}\"\n            [ngStyle]=\"style\" [class]=\"styleClass\" [style.width.px]=\"width\" [style.height.px]=\"height\" [style.minWidth.px]=\"minWidth\" [style.minHeight.px]=\"minHeight\" (mousedown)=\"moveOnTop()\" \n            [@animation]=\"'visible'\" (@animation.start)=\"onAnimationStart($event)\" role=\"dialog\" [attr.aria-labelledby]=\"id + '-label'\" *ngIf=\"visible\">\n            <div #titlebar class=\"ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top\" (mousedown)=\"initDrag($event)\" *ngIf=\"showHeader\">\n                <span [attr.id]=\"id + '-label'\" class=\"ui-dialog-title\" *ngIf=\"header\">{{header}}</span>\n                <span [attr.id]=\"id + '-label'\" class=\"ui-dialog-title\" *ngIf=\"headerFacet && headerFacet.first\">\n                    <ng-content select=\"p-header\"></ng-content>\n                </span>\n                <a *ngIf=\"closable\" [ngClass]=\"{'ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all':true}\" href=\"#\" role=\"button\" (click)=\"close($event)\" (mousedown)=\"onCloseMouseDown($event)\">\n                    <span class=\"pi pi-times\"></span>\n                </a>\n                <a *ngIf=\"maximizable\" [ngClass]=\"{'ui-dialog-titlebar-icon ui-dialog-titlebar-maximize ui-corner-all':true}\" href=\"#\" role=\"button\" (click)=\"toggleMaximize($event)\">\n                    <span [ngClass]=\"maximized ? 'pi pi-window-minimize' : 'pi pi-window-maximize'\"></span>\n                </a>\n            </div>\n            <div #content class=\"ui-dialog-content ui-widget-content\" [ngStyle]=\"contentStyle\">\n                <ng-content></ng-content>\n            </div>\n            <div #footer class=\"ui-dialog-footer ui-widget-content\" *ngIf=\"footerFacet && footerFacet.first\">\n                <ng-content select=\"p-footer\"></ng-content>\n            </div>\n            <div *ngIf=\"resizable\" class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90;\" (mousedown)=\"initResize($event)\"></div>\n        </div>\n    ",
+            template: "\n        <div #container [ngClass]=\"{'ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow':true, 'ui-dialog-rtl':rtl,'ui-dialog-draggable':draggable}\"\n            [ngStyle]=\"style\" [class]=\"styleClass\" [style.width.px]=\"width\" [style.height.px]=\"height\" [style.minWidth.px]=\"minWidth\" [style.minHeight.px]=\"minHeight\" (mousedown)=\"moveOnTop()\" \n            [@animation]=\"{value: 'visible', params: {transitionParams: transitionOptions}}\" (@animation.start)=\"onAnimationStart($event)\" role=\"dialog\" [attr.aria-labelledby]=\"id + '-label'\" *ngIf=\"visible\">\n            <div #titlebar class=\"ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top\" (mousedown)=\"initDrag($event)\" *ngIf=\"showHeader\">\n                <span [attr.id]=\"id + '-label'\" class=\"ui-dialog-title\" *ngIf=\"header\">{{header}}</span>\n                <span [attr.id]=\"id + '-label'\" class=\"ui-dialog-title\" *ngIf=\"headerFacet && headerFacet.first\">\n                    <ng-content select=\"p-header\"></ng-content>\n                </span>\n                <a *ngIf=\"closable\" [ngClass]=\"{'ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all':true}\" href=\"#\" role=\"button\" (click)=\"close($event)\" (mousedown)=\"onCloseMouseDown($event)\">\n                    <span class=\"pi pi-times\"></span>\n                </a>\n                <a *ngIf=\"maximizable\" [ngClass]=\"{'ui-dialog-titlebar-icon ui-dialog-titlebar-maximize ui-corner-all':true}\" href=\"#\" role=\"button\" (click)=\"toggleMaximize($event)\">\n                    <span [ngClass]=\"maximized ? 'pi pi-window-minimize' : 'pi pi-window-maximize'\"></span>\n                </a>\n            </div>\n            <div #content class=\"ui-dialog-content ui-widget-content\" [ngStyle]=\"contentStyle\">\n                <ng-content></ng-content>\n            </div>\n            <div #footer class=\"ui-dialog-footer ui-widget-content\" *ngIf=\"footerFacet && footerFacet.first\">\n                <ng-content select=\"p-footer\"></ng-content>\n            </div>\n            <div *ngIf=\"resizable\" class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90;\" (mousedown)=\"initResize($event)\"></div>\n        </div>\n    ",
             animations: [
@@ -599,3 +605,3 @@ animations_1.trigger('animation', [
                     })),
-                    animations_1.transition('* => *', animations_1.animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'))
+                    animations_1.transition('* => *', animations_1.animate('{{transitionParams}}'))
                 ])
@@ -602,0 +608,0 @@ ],

components/dialog/dialog.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"Dialog":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"p-dialog","template":"\n        <div #container [ngClass]=\"{'ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow':true, 'ui-dialog-rtl':rtl,'ui-dialog-draggable':draggable}\"\n            [ngStyle]=\"style\" [class]=\"styleClass\" [style.width.px]=\"width\" [style.height.px]=\"height\" [style.minWidth.px]=\"minWidth\" [style.minHeight.px]=\"minHeight\" (mousedown)=\"moveOnTop()\" \n            [@animation]=\"'visible'\" (@animation.start)=\"onAnimationStart($event)\" role=\"dialog\" [attr.aria-labelledby]=\"id + '-label'\" *ngIf=\"visible\">\n            <div #titlebar class=\"ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top\" (mousedown)=\"initDrag($event)\" *ngIf=\"showHeader\">\n                <span [attr.id]=\"id + '-label'\" class=\"ui-dialog-title\" *ngIf=\"header\">{{header}}</span>\n                <span [attr.id]=\"id + '-label'\" class=\"ui-dialog-title\" *ngIf=\"headerFacet && headerFacet.first\">\n                    <ng-content select=\"p-header\"></ng-content>\n                </span>\n                <a *ngIf=\"closable\" [ngClass]=\"{'ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all':true}\" href=\"#\" role=\"button\" (click)=\"close($event)\" (mousedown)=\"onCloseMouseDown($event)\">\n                    <span class=\"pi pi-times\"></span>\n                </a>\n                <a *ngIf=\"maximizable\" [ngClass]=\"{'ui-dialog-titlebar-icon ui-dialog-titlebar-maximize ui-corner-all':true}\" href=\"#\" role=\"button\" (click)=\"toggleMaximize($event)\">\n                    <span [ngClass]=\"maximized ? 'pi pi-window-minimize' : 'pi pi-window-maximize'\"></span>\n                </a>\n            </div>\n            <div #content class=\"ui-dialog-content ui-widget-content\" [ngStyle]=\"contentStyle\">\n                <ng-content></ng-content>\n            </div>\n            <div #footer class=\"ui-dialog-footer ui-widget-content\" *ngIf=\"footerFacet && footerFacet.first\">\n                <ng-content select=\"p-footer\"></ng-content>\n            </div>\n            <div *ngIf=\"resizable\" class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90;\" (mousedown)=\"initResize($event)\"></div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":37,"character":8},"arguments":["animation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":38,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":38,"character":26},"arguments":[{"transform":"translate3d(0, 25%, 0) scale(0.9)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":42,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":42,"character":29},"arguments":[{"transform":"none","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":46,"character":12},"arguments":["* => *",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":46,"character":33},"arguments":["400ms cubic-bezier(0.25, 0.8, 0.25, 1)"]}]}]]}],"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":49,"character":16}]}]}],"members":{"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"resizable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":5}}]}],"minWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"minHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":5}}]}],"positionLeft":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"positionTop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"contentStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5}}]}],"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":5}}]}],"closeOnEscape":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":5}}]}],"dismissableMask":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"rtl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":5}}]}],"closable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"responsive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":5}}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"breakpoint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":5}}]}],"blockScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":5}}]}],"minX":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":5}}]}],"minY":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":5}}]}],"focusOnShow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":5}}]}],"maximizable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":5}}]}],"headerFacet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":111,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"Header","line":111,"character":21},{"descendants":false}]}]}],"footerFacet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":113,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"Footer","line":113,"character":21},{"descendants":false}]}]}],"headerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":115,"character":5},"arguments":["titlebar"]}]}],"contentViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":117,"character":5},"arguments":["content"]}]}],"footerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":119,"character":5},"arguments":["footer"]}]}],"onShow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":121,"character":5}}]}],"onHide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":123,"character":5}}]}],"visibleChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":125,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":175,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":175,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":175,"character":87},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":175,"character":111}]}],"focus":[{"__symbolic":"method"}],"positionOverlay":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"center":[{"__symbolic":"method"}],"enableModality":[{"__symbolic":"method"}],"disableModality":[{"__symbolic":"method"}],"toggleMaximize":[{"__symbolic":"method"}],"maximize":[{"__symbolic":"method"}],"revertMaximize":[{"__symbolic":"method"}],"unbindMaskClickListener":[{"__symbolic":"method"}],"moveOnTop":[{"__symbolic":"method"}],"onCloseMouseDown":[{"__symbolic":"method"}],"initDrag":[{"__symbolic":"method"}],"onDrag":[{"__symbolic":"method"}],"endDrag":[{"__symbolic":"method"}],"initResize":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method"}],"onResizeEnd":[{"__symbolic":"method"}],"bindGlobalListeners":[{"__symbolic":"method"}],"unbindGlobalListeners":[{"__symbolic":"method"}],"bindDocumentDragListener":[{"__symbolic":"method"}],"unbindDocumentDragListener":[{"__symbolic":"method"}],"bindDocumentDragEndListener":[{"__symbolic":"method"}],"unbindDocumentDragEndListener":[{"__symbolic":"method"}],"bindDocumentResizeListeners":[{"__symbolic":"method"}],"unbindDocumentResizeListeners":[{"__symbolic":"method"}],"bindDocumentResponsiveListener":[{"__symbolic":"method"}],"unbindDocumentResponsiveListener":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method"}],"bindDocumentEscapeListener":[{"__symbolic":"method"}],"unbindDocumentEscapeListener":[{"__symbolic":"method"}],"appendContainer":[{"__symbolic":"method"}],"restoreAppend":[{"__symbolic":"method"}],"onAnimationStart":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"DialogModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":624,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":625,"character":14}],"exports":[{"__symbolic":"reference","name":"Dialog"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":626,"character":21}],"declarations":[{"__symbolic":"reference","name":"Dialog"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"Dialog":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"p-dialog","template":"\n        <div #container [ngClass]=\"{'ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow':true, 'ui-dialog-rtl':rtl,'ui-dialog-draggable':draggable}\"\n            [ngStyle]=\"style\" [class]=\"styleClass\" [style.width.px]=\"width\" [style.height.px]=\"height\" [style.minWidth.px]=\"minWidth\" [style.minHeight.px]=\"minHeight\" (mousedown)=\"moveOnTop()\" \n            [@animation]=\"{value: 'visible', params: {transitionParams: transitionOptions}}\" (@animation.start)=\"onAnimationStart($event)\" role=\"dialog\" [attr.aria-labelledby]=\"id + '-label'\" *ngIf=\"visible\">\n            <div #titlebar class=\"ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top\" (mousedown)=\"initDrag($event)\" *ngIf=\"showHeader\">\n                <span [attr.id]=\"id + '-label'\" class=\"ui-dialog-title\" *ngIf=\"header\">{{header}}</span>\n                <span [attr.id]=\"id + '-label'\" class=\"ui-dialog-title\" *ngIf=\"headerFacet && headerFacet.first\">\n                    <ng-content select=\"p-header\"></ng-content>\n                </span>\n                <a *ngIf=\"closable\" [ngClass]=\"{'ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all':true}\" href=\"#\" role=\"button\" (click)=\"close($event)\" (mousedown)=\"onCloseMouseDown($event)\">\n                    <span class=\"pi pi-times\"></span>\n                </a>\n                <a *ngIf=\"maximizable\" [ngClass]=\"{'ui-dialog-titlebar-icon ui-dialog-titlebar-maximize ui-corner-all':true}\" href=\"#\" role=\"button\" (click)=\"toggleMaximize($event)\">\n                    <span [ngClass]=\"maximized ? 'pi pi-window-minimize' : 'pi pi-window-maximize'\"></span>\n                </a>\n            </div>\n            <div #content class=\"ui-dialog-content ui-widget-content\" [ngStyle]=\"contentStyle\">\n                <ng-content></ng-content>\n            </div>\n            <div #footer class=\"ui-dialog-footer ui-widget-content\" *ngIf=\"footerFacet && footerFacet.first\">\n                <ng-content select=\"p-footer\"></ng-content>\n            </div>\n            <div *ngIf=\"resizable\" class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90;\" (mousedown)=\"initResize($event)\"></div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":37,"character":8},"arguments":["animation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":38,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":38,"character":26},"arguments":[{"transform":"translate3d(0, 25%, 0) scale(0.9)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":42,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":42,"character":29},"arguments":[{"transform":"none","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":46,"character":12},"arguments":["* => *",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":46,"character":33},"arguments":["{{transitionParams}}"]}]}]]}],"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":49,"character":16}]}]}],"members":{"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"resizable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":5}}]}],"minWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"minHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":5}}]}],"positionLeft":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"positionTop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"contentStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5}}]}],"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":5}}]}],"closeOnEscape":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":5}}]}],"dismissableMask":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"rtl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":5}}]}],"closable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"responsive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":5}}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"breakpoint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":5}}]}],"blockScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":5}}]}],"minX":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":5}}]}],"minY":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":5}}]}],"focusOnShow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":5}}]}],"maximizable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":5}}]}],"transitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}],"headerFacet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":113,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"Header","line":113,"character":21},{"descendants":false}]}]}],"footerFacet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":115,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"Footer","line":115,"character":21},{"descendants":false}]}]}],"headerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":117,"character":5},"arguments":["titlebar"]}]}],"contentViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":119,"character":5},"arguments":["content"]}]}],"footerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":121,"character":5},"arguments":["footer"]}]}],"onShow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":123,"character":5}}]}],"onHide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":125,"character":5}}]}],"visibleChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":127,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":177,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":177,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":177,"character":87},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":177,"character":111}]}],"focus":[{"__symbolic":"method"}],"positionOverlay":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"center":[{"__symbolic":"method"}],"enableModality":[{"__symbolic":"method"}],"disableModality":[{"__symbolic":"method"}],"toggleMaximize":[{"__symbolic":"method"}],"maximize":[{"__symbolic":"method"}],"revertMaximize":[{"__symbolic":"method"}],"unbindMaskClickListener":[{"__symbolic":"method"}],"moveOnTop":[{"__symbolic":"method"}],"onCloseMouseDown":[{"__symbolic":"method"}],"initDrag":[{"__symbolic":"method"}],"onDrag":[{"__symbolic":"method"}],"endDrag":[{"__symbolic":"method"}],"initResize":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method"}],"onResizeEnd":[{"__symbolic":"method"}],"bindGlobalListeners":[{"__symbolic":"method"}],"unbindGlobalListeners":[{"__symbolic":"method"}],"bindDocumentDragListener":[{"__symbolic":"method"}],"unbindDocumentDragListener":[{"__symbolic":"method"}],"bindDocumentDragEndListener":[{"__symbolic":"method"}],"unbindDocumentDragEndListener":[{"__symbolic":"method"}],"bindDocumentResizeListeners":[{"__symbolic":"method"}],"unbindDocumentResizeListeners":[{"__symbolic":"method"}],"bindDocumentResponsiveListener":[{"__symbolic":"method"}],"unbindDocumentResponsiveListener":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method"}],"bindDocumentEscapeListener":[{"__symbolic":"method"}],"unbindDocumentEscapeListener":[{"__symbolic":"method"}],"appendContainer":[{"__symbolic":"method"}],"restoreAppend":[{"__symbolic":"method"}],"onAnimationStart":[{"__symbolic":"method"}],"onContainerDestroy":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"DialogModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":627,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":628,"character":14}],"exports":[{"__symbolic":"reference","name":"Dialog"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":629,"character":21}],"declarations":[{"__symbolic":"reference","name":"Dialog"}]}]}]}}}]

components/dropdown/dropdown.d.ts

@@ -32,2 +32,3 @@ import { ElementRef, OnInit, AfterViewInit, AfterContentInit, AfterViewChecked, OnDestroy, Renderer2, EventEmitter, QueryList, TemplateRef, ChangeDetectorRef, NgZone } from '@angular/core';
     inputId: string;
+    selectId: string;
     dataKey: string;
@@ -45,2 +46,4 @@ filterBy: string;
     baseZIndex: number;
+    showTransitionOptions: string;
+    hideTransitionOptions: string;
     onChange: EventEmitter<any>;
@@ -50,2 +53,4 @@ onFocus: EventEmitter<any>;
     onClick: EventEmitter<any>;
+    onShow: EventEmitter<any>;
+    onHide: EventEmitter<any>;
     containerViewChild: ElementRef;
@@ -52,0 +57,0 @@ filterViewChild: ElementRef;

components/dropdown/dropdown.js

@@ -41,2 +41,4 @@ "use strict";
         this.baseZIndex = 0;
+        this.showTransitionOptions = '225ms ease-out';
+        this.hideTransitionOptions = '195ms ease-in';
         this.onChange = new core_1.EventEmitter();
@@ -46,2 +48,4 @@ this.onFocus = new core_1.EventEmitter();
         this.onClick = new core_1.EventEmitter();
+        this.onShow = new core_1.EventEmitter();
+        this.onHide = new core_1.EventEmitter();
         this.onModelChange = function () { };
@@ -258,4 +262,6 @@ this.onModelTouched = function () { };
                 }
+                this.onShow.emit(event);
                 break;
             case 'void':
+                this.onHide.emit(event);
                 this.onOverlayHide();
@@ -739,2 +745,6 @@ break;
         __metadata("design:type", String)
+    ], Dropdown.prototype, "selectId", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
     ], Dropdown.prototype, "dataKey", void 0);
@@ -786,2 +796,10 @@ __decorate([
     __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], Dropdown.prototype, "showTransitionOptions", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], Dropdown.prototype, "hideTransitionOptions", void 0);
+    __decorate([
         core_1.Output(),
@@ -803,2 +821,10 @@ __metadata("design:type", core_1.EventEmitter)
     __decorate([
+        core_1.Output(),
+        __metadata("design:type", core_1.EventEmitter)
+    ], Dropdown.prototype, "onShow", void 0);
+    __decorate([
+        core_1.Output(),
+        __metadata("design:type", core_1.EventEmitter)
+    ], Dropdown.prototype, "onHide", void 0);
+    __decorate([
         core_1.ViewChild('container'),
@@ -831,3 +857,3 @@ __metadata("design:type", core_1.ElementRef)
             selector: 'p-dropdown',
-            template: "\n         <div #container [ngClass]=\"{'ui-dropdown ui-widget ui-state-default ui-corner-all ui-helper-clearfix':true,\n            'ui-state-disabled':disabled, 'ui-dropdown-open':overlayVisible, 'ui-state-focus':focused, 'ui-dropdown-clearable': showClear && !disabled}\"\n            (click)=\"onMouseclick($event)\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-helper-hidden-accessible\" *ngIf=\"autoWidth\">\n                <select [required]=\"required\" [attr.name]=\"name\" [attr.aria-label]=\"selectedOption ? selectedOption.label : ' '\" tabindex=\"-1\" aria-hidden=\"true\">\n                    <option *ngIf=\"placeholder\">{{placeholder}}</option>\n                    <ng-container *ngIf=\"group\">\n                        <optgroup *ngFor=\"let option of options\" [attr.label]=\"option.label\">\n                            <option *ngFor=\"let option of option.items\" [value]=\"option.value\" [selected]=\"selectedOption == option\">{{option.label}}</option>\n                        <optgroup>\n                    </ng-container>\n                    <ng-container *ngIf=\"!group\">\n                        <option *ngFor=\"let option of options\" [value]=\"option.value\" [selected]=\"selectedOption == option\">{{option.label}}</option>\n                    </ng-container>\n                </select>\n            </div>\n            <div class=\"ui-helper-hidden-accessible\">\n                <input #in [attr.id]=\"inputId\" type=\"text\" [attr.aria-label]=\"selectedOption ? selectedOption.label : ' '\" readonly (focus)=\"onInputFocus($event)\" role=\"listbox\"\n                    (blur)=\"onInputBlur($event)\" (keydown)=\"onKeydown($event, true)\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\" [attr.autofocus]=\"autofocus\">\n            </div>\n            <label [ngClass]=\"{'ui-dropdown-label ui-inputtext ui-corner-all':true,'ui-dropdown-label-empty':(label == null || label.length === 0)}\" *ngIf=\"!editable && (label != null)\">\n                <ng-container *ngIf=\"!selectedItemTemplate\">{{label||'empty'}}</ng-container>\n                <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: {$implicit: selectedOption}\"></ng-container>\n            </label>\n            <label [ngClass]=\"{'ui-dropdown-label ui-inputtext ui-corner-all ui-placeholder':true,'ui-dropdown-label-empty': (placeholder == null || placeholder.length === 0)}\" *ngIf=\"!editable && (label == null)\">{{placeholder||'empty'}}</label>\n            <input #editableInput type=\"text\" [attr.aria-label]=\"selectedOption ? selectedOption.label : ' '\" class=\"ui-dropdown-label ui-inputtext ui-corner-all\" *ngIf=\"editable\" [disabled]=\"disabled\" [attr.placeholder]=\"placeholder\"\n                        (click)=\"onEditableInputClick($event)\" (input)=\"onEditableInputChange($event)\" (focus)=\"onEditableInputFocus($event)\" (blur)=\"onInputBlur($event)\">\n            <i class=\"ui-dropdown-clear-icon pi pi-times\" (click)=\"clear($event)\" *ngIf=\"value != null && showClear && !disabled\"></i>\n            <div class=\"ui-dropdown-trigger ui-state-default ui-corner-right\">\n                <span class=\"ui-dropdown-trigger-icon ui-clickable\" [ngClass]=\"dropdownIcon\"></span>\n            </div>\n            <div *ngIf=\"overlayVisible\" [ngClass]=\"'ui-dropdown-panel  ui-widget ui-widget-content ui-corner-all ui-shadow'\" [@overlayAnimation]=\"'visible'\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\">\n                <div *ngIf=\"filter\" class=\"ui-dropdown-filter-container\" (input)=\"onFilter($event)\" (click)=\"$event.stopPropagation()\">\n                    <input #filter type=\"text\" autocomplete=\"off\" [value]=\"filterValue||''\" class=\"ui-dropdown-filter ui-inputtext ui-widget ui-state-default ui-corner-all\" [attr.placeholder]=\"filterPlaceholder\"\n                    (keydown.enter)=\"$event.preventDefault()\" (keydown)=\"onKeydown($event, false)\">\n                    <span class=\"ui-dropdown-filter-icon pi pi-search\"></span>\n                </div>\n                <div class=\"ui-dropdown-items-wrapper\" [style.max-height]=\"scrollHeight||'auto'\">\n                    <ul class=\"ui-dropdown-items ui-dropdown-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\">\n                        <ng-container *ngIf=\"group\">\n                            <ng-template ngFor let-optgroup [ngForOf]=\"optionsToDisplay\">\n                                <li class=\"ui-dropdown-item-group\">\n                                    <span *ngIf=\"!groupTemplate\">{{optgroup.label||'empty'}}</span>\n                                    <ng-container *ngTemplateOutlet=\"groupTemplate; context: {$implicit: optgroup}\"></ng-container>\n                                </li>\n                                <ng-container *ngTemplateOutlet=\"itemslist; context: {$implicit: optgroup.items, selectedOption: selectedOption}\"></ng-container>\n                            </ng-template>\n                        </ng-container>\n                        <ng-container *ngIf=\"!group\">\n                            <ng-container *ngTemplateOutlet=\"itemslist; context: {$implicit: optionsToDisplay, selectedOption: selectedOption}\"></ng-container>\n                        </ng-container>\n                        <ng-template #itemslist let-options let-selectedOption=\"selectedOption\">\n                            <li *ngFor=\"let option of options;let i=index\"  (click)=\"onItemClick($event, option)\"\n                                    [ngClass]=\"{'ui-dropdown-item ui-corner-all':true,\n                                                'ui-state-highlight':(selectedOption == option),\n                                                'ui-state-disabled':(option.disabled),\n                                                'ui-dropdown-item-empty':!option.label||option.label.length === 0}\">\n                                <span *ngIf=\"!itemTemplate\">{{option.label||'empty'}}</span>\n                                <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: option}\"></ng-container>\n                            </li>\n                        </ng-template>\n                        <li *ngIf=\"filter && optionsToDisplay && optionsToDisplay.length === 0\">{{emptyFilterMessage}}</li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    ",
+            template: "\n         <div #container [ngClass]=\"{'ui-dropdown ui-widget ui-state-default ui-corner-all ui-helper-clearfix':true,\n            'ui-state-disabled':disabled, 'ui-dropdown-open':overlayVisible, 'ui-state-focus':focused, 'ui-dropdown-clearable': showClear && !disabled}\"\n            (click)=\"onMouseclick($event)\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-helper-hidden-accessible\" *ngIf=\"autoWidth\">\n                <select [attr.id]=\"selectId\" [required]=\"required\" [attr.name]=\"name\" [attr.aria-label]=\"selectedOption ? selectedOption.label : ' '\" tabindex=\"-1\" aria-hidden=\"true\">\n                    <option *ngIf=\"placeholder\">{{placeholder}}</option>\n                    <ng-container *ngIf=\"group\">\n                        <optgroup *ngFor=\"let option of options\" [attr.label]=\"option.label\">\n                            <option *ngFor=\"let option of option.items\" [value]=\"option.value\" [selected]=\"selectedOption == option\">{{option.label}}</option>\n                        <optgroup>\n                    </ng-container>\n                    <ng-container *ngIf=\"!group\">\n                        <option *ngFor=\"let option of options\" [value]=\"option.value\" [selected]=\"selectedOption == option\">{{option.label}}</option>\n                    </ng-container>\n                </select>\n            </div>\n            <div class=\"ui-helper-hidden-accessible\">\n                <input #in [attr.id]=\"inputId\" type=\"text\" [attr.aria-label]=\"selectedOption ? selectedOption.label : ' '\" readonly (focus)=\"onInputFocus($event)\" role=\"listbox\"\n                    (blur)=\"onInputBlur($event)\" (keydown)=\"onKeydown($event, true)\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\" [attr.autofocus]=\"autofocus\">\n            </div>\n            <label [ngClass]=\"{'ui-dropdown-label ui-inputtext ui-corner-all':true,'ui-dropdown-label-empty':(label == null || label.length === 0)}\" *ngIf=\"!editable && (label != null)\">\n                <ng-container *ngIf=\"!selectedItemTemplate\">{{label||'empty'}}</ng-container>\n                <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: {$implicit: selectedOption}\"></ng-container>\n            </label>\n            <label [ngClass]=\"{'ui-dropdown-label ui-inputtext ui-corner-all ui-placeholder':true,'ui-dropdown-label-empty': (placeholder == null || placeholder.length === 0)}\" *ngIf=\"!editable && (label == null)\">{{placeholder||'empty'}}</label>\n            <input #editableInput type=\"text\" [attr.aria-label]=\"selectedOption ? selectedOption.label : ' '\" class=\"ui-dropdown-label ui-inputtext ui-corner-all\" *ngIf=\"editable\" [disabled]=\"disabled\" [attr.placeholder]=\"placeholder\"\n                        (click)=\"onEditableInputClick($event)\" (input)=\"onEditableInputChange($event)\" (focus)=\"onEditableInputFocus($event)\" (blur)=\"onInputBlur($event)\">\n            <i class=\"ui-dropdown-clear-icon pi pi-times\" (click)=\"clear($event)\" *ngIf=\"value != null && showClear && !disabled\"></i>\n            <div class=\"ui-dropdown-trigger ui-state-default ui-corner-right\">\n                <span class=\"ui-dropdown-trigger-icon ui-clickable\" [ngClass]=\"dropdownIcon\"></span>\n            </div>\n            <div *ngIf=\"overlayVisible\" [ngClass]=\"'ui-dropdown-panel  ui-widget ui-widget-content ui-corner-all ui-shadow'\" [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\">\n                <div *ngIf=\"filter\" class=\"ui-dropdown-filter-container\" (input)=\"onFilter($event)\" (click)=\"$event.stopPropagation()\">\n                    <input #filter type=\"text\" autocomplete=\"off\" [value]=\"filterValue||''\" class=\"ui-dropdown-filter ui-inputtext ui-widget ui-state-default ui-corner-all\" [attr.placeholder]=\"filterPlaceholder\"\n                    (keydown.enter)=\"$event.preventDefault()\" (keydown)=\"onKeydown($event, false)\">\n                    <span class=\"ui-dropdown-filter-icon pi pi-search\"></span>\n                </div>\n                <div class=\"ui-dropdown-items-wrapper\" [style.max-height]=\"scrollHeight||'auto'\">\n                    <ul class=\"ui-dropdown-items ui-dropdown-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\">\n                        <ng-container *ngIf=\"group\">\n                            <ng-template ngFor let-optgroup [ngForOf]=\"optionsToDisplay\">\n                                <li class=\"ui-dropdown-item-group\">\n                                    <span *ngIf=\"!groupTemplate\">{{optgroup.label||'empty'}}</span>\n                                    <ng-container *ngTemplateOutlet=\"groupTemplate; context: {$implicit: optgroup}\"></ng-container>\n                                </li>\n                                <ng-container *ngTemplateOutlet=\"itemslist; context: {$implicit: optgroup.items, selectedOption: selectedOption}\"></ng-container>\n                            </ng-template>\n                        </ng-container>\n                        <ng-container *ngIf=\"!group\">\n                            <ng-container *ngTemplateOutlet=\"itemslist; context: {$implicit: optionsToDisplay, selectedOption: selectedOption}\"></ng-container>\n                        </ng-container>\n                        <ng-template #itemslist let-options let-selectedOption=\"selectedOption\">\n                            <li *ngFor=\"let option of options;let i=index\"  (click)=\"onItemClick($event, option)\"\n                                    [ngClass]=\"{'ui-dropdown-item ui-corner-all':true,\n                                                'ui-state-highlight':(selectedOption == option),\n                                                'ui-state-disabled':(option.disabled),\n                                                'ui-dropdown-item-empty':!option.label||option.label.length === 0}\">\n                                <span *ngIf=\"!itemTemplate\">{{option.label||'empty'}}</span>\n                                <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: option}\"></ng-container>\n                            </li>\n                        </ng-template>\n                        <li *ngIf=\"filter && optionsToDisplay && optionsToDisplay.length === 0\">{{emptyFilterMessage}}</li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    ",
             animations: [
@@ -843,4 +869,4 @@ animations_1.trigger('overlayAnimation', [
                     })),
-                    animations_1.transition('void => visible', animations_1.animate('225ms ease-out')),
-                    animations_1.transition('visible => void', animations_1.animate('195ms ease-in'))
+                    animations_1.transition('void => visible', animations_1.animate('{{showTransitionParams}}')),
+                    animations_1.transition('visible => void', animations_1.animate('{{hideTransitionParams}}'))
                 ])
@@ -847,0 +873,0 @@ ],

components/dropdown/dropdown.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"DROPDOWN_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":11,"character":11},"useExisting":{"__symbolic":"reference","name":"Dropdown"},"multi":true},"Dropdown":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"p-dropdown","template":"\n         <div #container [ngClass]=\"{'ui-dropdown ui-widget ui-state-default ui-corner-all ui-helper-clearfix':true,\n            'ui-state-disabled':disabled, 'ui-dropdown-open':overlayVisible, 'ui-state-focus':focused, 'ui-dropdown-clearable': showClear && !disabled}\"\n            (click)=\"onMouseclick($event)\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-helper-hidden-accessible\" *ngIf=\"autoWidth\">\n                <select [required]=\"required\" [attr.name]=\"name\" [attr.aria-label]=\"selectedOption ? selectedOption.label : ' '\" tabindex=\"-1\" aria-hidden=\"true\">\n                    <option *ngIf=\"placeholder\">{{placeholder}}</option>\n                    <ng-container *ngIf=\"group\">\n                        <optgroup *ngFor=\"let option of options\" [attr.label]=\"option.label\">\n                            <option *ngFor=\"let option of option.items\" [value]=\"option.value\" [selected]=\"selectedOption == option\">{{option.label}}</option>\n                        <optgroup>\n                    </ng-container>\n                    <ng-container *ngIf=\"!group\">\n                        <option *ngFor=\"let option of options\" [value]=\"option.value\" [selected]=\"selectedOption == option\">{{option.label}}</option>\n                    </ng-container>\n                </select>\n            </div>\n            <div class=\"ui-helper-hidden-accessible\">\n                <input #in [attr.id]=\"inputId\" type=\"text\" [attr.aria-label]=\"selectedOption ? selectedOption.label : ' '\" readonly (focus)=\"onInputFocus($event)\" role=\"listbox\"\n                    (blur)=\"onInputBlur($event)\" (keydown)=\"onKeydown($event, true)\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\" [attr.autofocus]=\"autofocus\">\n            </div>\n            <label [ngClass]=\"{'ui-dropdown-label ui-inputtext ui-corner-all':true,'ui-dropdown-label-empty':(label == null || label.length === 0)}\" *ngIf=\"!editable && (label != null)\">\n                <ng-container *ngIf=\"!selectedItemTemplate\">{{label||'empty'}}</ng-container>\n                <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: {$implicit: selectedOption}\"></ng-container>\n            </label>\n            <label [ngClass]=\"{'ui-dropdown-label ui-inputtext ui-corner-all ui-placeholder':true,'ui-dropdown-label-empty': (placeholder == null || placeholder.length === 0)}\" *ngIf=\"!editable && (label == null)\">{{placeholder||'empty'}}</label>\n            <input #editableInput type=\"text\" [attr.aria-label]=\"selectedOption ? selectedOption.label : ' '\" class=\"ui-dropdown-label ui-inputtext ui-corner-all\" *ngIf=\"editable\" [disabled]=\"disabled\" [attr.placeholder]=\"placeholder\"\n                        (click)=\"onEditableInputClick($event)\" (input)=\"onEditableInputChange($event)\" (focus)=\"onEditableInputFocus($event)\" (blur)=\"onInputBlur($event)\">\n            <i class=\"ui-dropdown-clear-icon pi pi-times\" (click)=\"clear($event)\" *ngIf=\"value != null && showClear && !disabled\"></i>\n            <div class=\"ui-dropdown-trigger ui-state-default ui-corner-right\">\n                <span class=\"ui-dropdown-trigger-icon ui-clickable\" [ngClass]=\"dropdownIcon\"></span>\n            </div>\n            <div *ngIf=\"overlayVisible\" [ngClass]=\"'ui-dropdown-panel  ui-widget ui-widget-content ui-corner-all ui-shadow'\" [@overlayAnimation]=\"'visible'\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\">\n                <div *ngIf=\"filter\" class=\"ui-dropdown-filter-container\" (input)=\"onFilter($event)\" (click)=\"$event.stopPropagation()\">\n                    <input #filter type=\"text\" autocomplete=\"off\" [value]=\"filterValue||''\" class=\"ui-dropdown-filter ui-inputtext ui-widget ui-state-default ui-corner-all\" [attr.placeholder]=\"filterPlaceholder\"\n                    (keydown.enter)=\"$event.preventDefault()\" (keydown)=\"onKeydown($event, false)\">\n                    <span class=\"ui-dropdown-filter-icon pi pi-search\"></span>\n                </div>\n                <div class=\"ui-dropdown-items-wrapper\" [style.max-height]=\"scrollHeight||'auto'\">\n                    <ul class=\"ui-dropdown-items ui-dropdown-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\">\n                        <ng-container *ngIf=\"group\">\n                            <ng-template ngFor let-optgroup [ngForOf]=\"optionsToDisplay\">\n                                <li class=\"ui-dropdown-item-group\">\n                                    <span *ngIf=\"!groupTemplate\">{{optgroup.label||'empty'}}</span>\n                                    <ng-container *ngTemplateOutlet=\"groupTemplate; context: {$implicit: optgroup}\"></ng-container>\n                                </li>\n                                <ng-container *ngTemplateOutlet=\"itemslist; context: {$implicit: optgroup.items, selectedOption: selectedOption}\"></ng-container>\n                            </ng-template>\n                        </ng-container>\n                        <ng-container *ngIf=\"!group\">\n                            <ng-container *ngTemplateOutlet=\"itemslist; context: {$implicit: optionsToDisplay, selectedOption: selectedOption}\"></ng-container>\n                        </ng-container>\n                        <ng-template #itemslist let-options let-selectedOption=\"selectedOption\">\n                            <li *ngFor=\"let option of options;let i=index\"  (click)=\"onItemClick($event, option)\"\n                                    [ngClass]=\"{'ui-dropdown-item ui-corner-all':true,\n                                                'ui-state-highlight':(selectedOption == option),\n                                                'ui-state-disabled':(option.disabled),\n                                                'ui-dropdown-item-empty':!option.label||option.label.length === 0}\">\n                                <span *ngIf=\"!itemTemplate\">{{option.label||'empty'}}</span>\n                                <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: option}\"></ng-container>\n                            </li>\n                        </ng-template>\n                        <li *ngIf=\"filter && optionsToDisplay && optionsToDisplay.length === 0\">{{emptyFilterMessage}}</li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":87,"character":8},"arguments":["overlayAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":88,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":88,"character":26},"arguments":[{"transform":"translateY(5%)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":92,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":92,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":96,"character":12},"arguments":["void => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":96,"character":42},"arguments":["225ms ease-out"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":97,"character":12},"arguments":["visible => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":97,"character":42},"arguments":["195ms ease-in"]}]}]]}],"host":{"[class.ui-inputwrapper-filled]":"filled","[class.ui-inputwrapper-focus]":"focused","$quoted$":["[class.ui-inputwrapper-filled]","[class.ui-inputwrapper-focus]"]},"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":104,"character":16},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":104,"character":27},{"__symbolic":"reference","name":"DROPDOWN_VALUE_ACCESSOR"}]}]}],"members":{"scrollHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":5}}]}],"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":5}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":5}}]}],"panelStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":116,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":5}}]}],"panelStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":5}}]}],"autoWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":5}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":5}}]}],"editable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":130,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":5}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":5}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":136,"character":5}}]}],"filterPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":5}}]}],"inputId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":140,"character":5}}]}],"dataKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"character":5}}]}],"filterBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":144,"character":5}}]}],"autofocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":146,"character":5}}]}],"resetFilterOnHide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":148,"character":5}}]}],"dropdownIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":150,"character":5}}]}],"optionLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":152,"character":5}}]}],"autoDisplayFirst":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":154,"character":5}}]}],"group":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":156,"character":5}}]}],"showClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":158,"character":5}}]}],"emptyFilterMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":160,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":162,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":164,"character":5}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":166,"character":5}}]}],"onFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":168,"character":5}}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":170,"character":5}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":172,"character":5}}]}],"containerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":174,"character":5},"arguments":["container"]}]}],"filterViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":176,"character":5},"arguments":["filter"]}]}],"focusViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":178,"character":5},"arguments":["in"]}]}],"editableInputViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":180,"character":5},"arguments":["editableInput"]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":182,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":182,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":244,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":244,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":244,"character":87},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":244,"character":110},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":245,"character":36},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":245,"character":62}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":274,"character":5}}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"updateEditableLabel":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"resetFilter":[{"__symbolic":"method"}],"updateSelectedOption":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"updateDimensions":[{"__symbolic":"method"}],"onMouseclick":[{"__symbolic":"method"}],"onEditableInputClick":[{"__symbolic":"method"}],"onEditableInputFocus":[{"__symbolic":"method"}],"onEditableInputChange":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"onOverlayAnimationStart":[{"__symbolic":"method"}],"appendOverlay":[{"__symbolic":"method"}],"restoreOverlayAppend":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"alignOverlay":[{"__symbolic":"method"}],"onInputFocus":[{"__symbolic":"method"}],"onInputBlur":[{"__symbolic":"method"}],"findPrevEnabledOption":[{"__symbolic":"method"}],"findNextEnabledOption":[{"__symbolic":"method"}],"onKeydown":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"searchOption":[{"__symbolic":"method"}],"searchOptionInRange":[{"__symbolic":"method"}],"searchOptionWithinGroup":[{"__symbolic":"method"}],"findOptionIndex":[{"__symbolic":"method"}],"findOptionGroupIndex":[{"__symbolic":"method"}],"findOption":[{"__symbolic":"method"}],"onFilter":[{"__symbolic":"method"}],"activateFilter":[{"__symbolic":"method"}],"applyFocus":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"bindDocumentClickListener":[{"__symbolic":"method"}],"clearClickState":[{"__symbolic":"method"}],"unbindDocumentClickListener":[{"__symbolic":"method"}],"updateFilledState":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"DropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":959,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":960,"character":14},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":960,"character":27}],"exports":[{"__symbolic":"reference","name":"Dropdown"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":961,"character":23}],"declarations":[{"__symbolic":"reference","name":"Dropdown"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"DROPDOWN_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":11,"character":11},"useExisting":{"__symbolic":"reference","name":"Dropdown"},"multi":true},"Dropdown":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"p-dropdown","template":"\n         <div #container [ngClass]=\"{'ui-dropdown ui-widget ui-state-default ui-corner-all ui-helper-clearfix':true,\n            'ui-state-disabled':disabled, 'ui-dropdown-open':overlayVisible, 'ui-state-focus':focused, 'ui-dropdown-clearable': showClear && !disabled}\"\n            (click)=\"onMouseclick($event)\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-helper-hidden-accessible\" *ngIf=\"autoWidth\">\n                <select [attr.id]=\"selectId\" [required]=\"required\" [attr.name]=\"name\" [attr.aria-label]=\"selectedOption ? selectedOption.label : ' '\" tabindex=\"-1\" aria-hidden=\"true\">\n                    <option *ngIf=\"placeholder\">{{placeholder}}</option>\n                    <ng-container *ngIf=\"group\">\n                        <optgroup *ngFor=\"let option of options\" [attr.label]=\"option.label\">\n                            <option *ngFor=\"let option of option.items\" [value]=\"option.value\" [selected]=\"selectedOption == option\">{{option.label}}</option>\n                        <optgroup>\n                    </ng-container>\n                    <ng-container *ngIf=\"!group\">\n                        <option *ngFor=\"let option of options\" [value]=\"option.value\" [selected]=\"selectedOption == option\">{{option.label}}</option>\n                    </ng-container>\n                </select>\n            </div>\n            <div class=\"ui-helper-hidden-accessible\">\n                <input #in [attr.id]=\"inputId\" type=\"text\" [attr.aria-label]=\"selectedOption ? selectedOption.label : ' '\" readonly (focus)=\"onInputFocus($event)\" role=\"listbox\"\n                    (blur)=\"onInputBlur($event)\" (keydown)=\"onKeydown($event, true)\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\" [attr.autofocus]=\"autofocus\">\n            </div>\n            <label [ngClass]=\"{'ui-dropdown-label ui-inputtext ui-corner-all':true,'ui-dropdown-label-empty':(label == null || label.length === 0)}\" *ngIf=\"!editable && (label != null)\">\n                <ng-container *ngIf=\"!selectedItemTemplate\">{{label||'empty'}}</ng-container>\n                <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: {$implicit: selectedOption}\"></ng-container>\n            </label>\n            <label [ngClass]=\"{'ui-dropdown-label ui-inputtext ui-corner-all ui-placeholder':true,'ui-dropdown-label-empty': (placeholder == null || placeholder.length === 0)}\" *ngIf=\"!editable && (label == null)\">{{placeholder||'empty'}}</label>\n            <input #editableInput type=\"text\" [attr.aria-label]=\"selectedOption ? selectedOption.label : ' '\" class=\"ui-dropdown-label ui-inputtext ui-corner-all\" *ngIf=\"editable\" [disabled]=\"disabled\" [attr.placeholder]=\"placeholder\"\n                        (click)=\"onEditableInputClick($event)\" (input)=\"onEditableInputChange($event)\" (focus)=\"onEditableInputFocus($event)\" (blur)=\"onInputBlur($event)\">\n            <i class=\"ui-dropdown-clear-icon pi pi-times\" (click)=\"clear($event)\" *ngIf=\"value != null && showClear && !disabled\"></i>\n            <div class=\"ui-dropdown-trigger ui-state-default ui-corner-right\">\n                <span class=\"ui-dropdown-trigger-icon ui-clickable\" [ngClass]=\"dropdownIcon\"></span>\n            </div>\n            <div *ngIf=\"overlayVisible\" [ngClass]=\"'ui-dropdown-panel  ui-widget ui-widget-content ui-corner-all ui-shadow'\" [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\">\n                <div *ngIf=\"filter\" class=\"ui-dropdown-filter-container\" (input)=\"onFilter($event)\" (click)=\"$event.stopPropagation()\">\n                    <input #filter type=\"text\" autocomplete=\"off\" [value]=\"filterValue||''\" class=\"ui-dropdown-filter ui-inputtext ui-widget ui-state-default ui-corner-all\" [attr.placeholder]=\"filterPlaceholder\"\n                    (keydown.enter)=\"$event.preventDefault()\" (keydown)=\"onKeydown($event, false)\">\n                    <span class=\"ui-dropdown-filter-icon pi pi-search\"></span>\n                </div>\n                <div class=\"ui-dropdown-items-wrapper\" [style.max-height]=\"scrollHeight||'auto'\">\n                    <ul class=\"ui-dropdown-items ui-dropdown-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\">\n                        <ng-container *ngIf=\"group\">\n                            <ng-template ngFor let-optgroup [ngForOf]=\"optionsToDisplay\">\n                                <li class=\"ui-dropdown-item-group\">\n                                    <span *ngIf=\"!groupTemplate\">{{optgroup.label||'empty'}}</span>\n                                    <ng-container *ngTemplateOutlet=\"groupTemplate; context: {$implicit: optgroup}\"></ng-container>\n                                </li>\n                                <ng-container *ngTemplateOutlet=\"itemslist; context: {$implicit: optgroup.items, selectedOption: selectedOption}\"></ng-container>\n                            </ng-template>\n                        </ng-container>\n                        <ng-container *ngIf=\"!group\">\n                            <ng-container *ngTemplateOutlet=\"itemslist; context: {$implicit: optionsToDisplay, selectedOption: selectedOption}\"></ng-container>\n                        </ng-container>\n                        <ng-template #itemslist let-options let-selectedOption=\"selectedOption\">\n                            <li *ngFor=\"let option of options;let i=index\"  (click)=\"onItemClick($event, option)\"\n                                    [ngClass]=\"{'ui-dropdown-item ui-corner-all':true,\n                                                'ui-state-highlight':(selectedOption == option),\n                                                'ui-state-disabled':(option.disabled),\n                                                'ui-dropdown-item-empty':!option.label||option.label.length === 0}\">\n                                <span *ngIf=\"!itemTemplate\">{{option.label||'empty'}}</span>\n                                <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: option}\"></ng-container>\n                            </li>\n                        </ng-template>\n                        <li *ngIf=\"filter && optionsToDisplay && optionsToDisplay.length === 0\">{{emptyFilterMessage}}</li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":87,"character":8},"arguments":["overlayAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":88,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":88,"character":26},"arguments":[{"transform":"translateY(5%)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":92,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":92,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":96,"character":12},"arguments":["void => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":96,"character":42},"arguments":["{{showTransitionParams}}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":97,"character":12},"arguments":["visible => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":97,"character":42},"arguments":["{{hideTransitionParams}}"]}]}]]}],"host":{"[class.ui-inputwrapper-filled]":"filled","[class.ui-inputwrapper-focus]":"focused","$quoted$":["[class.ui-inputwrapper-filled]","[class.ui-inputwrapper-focus]"]},"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":104,"character":16},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":104,"character":27},{"__symbolic":"reference","name":"DROPDOWN_VALUE_ACCESSOR"}]}]}],"members":{"scrollHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":5}}]}],"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":5}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":5}}]}],"panelStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":116,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":5}}]}],"panelStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":5}}]}],"autoWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":5}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":5}}]}],"editable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":130,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":5}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":5}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":136,"character":5}}]}],"filterPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":5}}]}],"inputId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":140,"character":5}}]}],"selectId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"character":5}}]}],"dataKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":144,"character":5}}]}],"filterBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":146,"character":5}}]}],"autofocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":148,"character":5}}]}],"resetFilterOnHide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":150,"character":5}}]}],"dropdownIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":152,"character":5}}]}],"optionLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":154,"character":5}}]}],"autoDisplayFirst":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":156,"character":5}}]}],"group":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":158,"character":5}}]}],"showClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":160,"character":5}}]}],"emptyFilterMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":162,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":164,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":166,"character":5}}]}],"showTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":168,"character":5}}]}],"hideTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":170,"character":5}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":172,"character":5}}]}],"onFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":174,"character":5}}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":176,"character":5}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":178,"character":5}}]}],"onShow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":180,"character":5}}]}],"onHide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":182,"character":5}}]}],"containerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":184,"character":5},"arguments":["container"]}]}],"filterViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":186,"character":5},"arguments":["filter"]}]}],"focusViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":188,"character":5},"arguments":["in"]}]}],"editableInputViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":190,"character":5},"arguments":["editableInput"]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":192,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":192,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":254,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":254,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":254,"character":87},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":254,"character":110},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":255,"character":36},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":255,"character":62}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":284,"character":5}}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"updateEditableLabel":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"resetFilter":[{"__symbolic":"method"}],"updateSelectedOption":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"updateDimensions":[{"__symbolic":"method"}],"onMouseclick":[{"__symbolic":"method"}],"onEditableInputClick":[{"__symbolic":"method"}],"onEditableInputFocus":[{"__symbolic":"method"}],"onEditableInputChange":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"onOverlayAnimationStart":[{"__symbolic":"method"}],"appendOverlay":[{"__symbolic":"method"}],"restoreOverlayAppend":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"alignOverlay":[{"__symbolic":"method"}],"onInputFocus":[{"__symbolic":"method"}],"onInputBlur":[{"__symbolic":"method"}],"findPrevEnabledOption":[{"__symbolic":"method"}],"findNextEnabledOption":[{"__symbolic":"method"}],"onKeydown":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"searchOption":[{"__symbolic":"method"}],"searchOptionInRange":[{"__symbolic":"method"}],"searchOptionWithinGroup":[{"__symbolic":"method"}],"findOptionIndex":[{"__symbolic":"method"}],"findOptionGroupIndex":[{"__symbolic":"method"}],"findOption":[{"__symbolic":"method"}],"onFilter":[{"__symbolic":"method"}],"activateFilter":[{"__symbolic":"method"}],"applyFocus":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"bindDocumentClickListener":[{"__symbolic":"method"}],"clearClickState":[{"__symbolic":"method"}],"unbindDocumentClickListener":[{"__symbolic":"method"}],"updateFilledState":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"DropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":972,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":973,"character":14},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":973,"character":27}],"exports":[{"__symbolic":"reference","name":"Dropdown"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":974,"character":23}],"declarations":[{"__symbolic":"reference","name":"Dropdown"}]}]}]}}}]

components/fieldset/fieldset.d.ts

@@ -13,2 +13,3 @@ import { EventEmitter, ElementRef } from '@angular/core';
     styleClass: string;
+    transitionOptions: string;
     animating: boolean;
@@ -15,0 +16,0 @@ constructor(el: ElementRef);

components/fieldset/fieldset.js

@@ -24,2 +24,3 @@ "use strict";
         this.onAfterToggle = new core_1.EventEmitter();
+        this.transitionOptions = '400ms cubic-bezier(0.86, 0, 0.07, 1)';
         this.id = "ui-fieldset-" + idx++;
@@ -86,6 +87,10 @@ }
     ], Fieldset.prototype, "styleClass", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], Fieldset.prototype, "transitionOptions", void 0);
     Fieldset = __decorate([
         core_1.Component({
             selector: 'p-fieldset',
-            template: "\n        <fieldset [attr.id]=\"id\" [ngClass]=\"{'ui-fieldset ui-widget ui-widget-content ui-corner-all': true, 'ui-fieldset-toggleable': toggleable}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <legend class=\"ui-fieldset-legend ui-corner-all ui-state-default ui-unselectable-text\">\n                <ng-container *ngIf=\"toggleable; else legendContent\">\n                    <a href=\"#\" (click)=\"toggle($event)\" [attr.aria-controls]=\"id + '-content'\" [attr.aria-expanded]=\"!collapsed\" [attr.tabindex]=\"toggleable ? null : -1\">\n                        <ng-container *ngTemplateOutlet=\"legendContent\"></ng-container>\n                    </a>\n                </ng-container>\n                <ng-template #legendContent>\n                    <span class=\"ui-fieldset-toggler pi\" *ngIf=\"toggleable\" [ngClass]=\"{'pi-minus': !collapsed,'pi-plus':collapsed}\"></span>\n                    <span class=\"ui-fieldset-legend-text\">{{legend}}</span>\n                    <ng-content select=\"p-header\"></ng-content>\n                </ng-template>\n            </legend>\n            <div [attr.id]=\"id + '-content'\" class=\"ui-fieldset-content-wrapper\" [@fieldsetContent]=\"collapsed ? 'hidden' : 'visible'\" \n                        [ngClass]=\"{'ui-fieldset-content-wrapper-overflown': collapsed||animating}\" [attr.aria-hidden]=\"collapsed\"\n                         (@fieldsetContent.done)=\"onToggleDone($event)\" role=\"region\">\n                <div class=\"ui-fieldset-content\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n        </fieldset>\n    ",
+            template: "\n        <fieldset [attr.id]=\"id\" [ngClass]=\"{'ui-fieldset ui-widget ui-widget-content ui-corner-all': true, 'ui-fieldset-toggleable': toggleable}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <legend class=\"ui-fieldset-legend ui-corner-all ui-state-default ui-unselectable-text\">\n                <ng-container *ngIf=\"toggleable; else legendContent\">\n                    <a href=\"#\" (click)=\"toggle($event)\" [attr.aria-controls]=\"id + '-content'\" [attr.aria-expanded]=\"!collapsed\" [attr.tabindex]=\"toggleable ? null : -1\">\n                        <ng-container *ngTemplateOutlet=\"legendContent\"></ng-container>\n                    </a>\n                </ng-container>\n                <ng-template #legendContent>\n                    <span class=\"ui-fieldset-toggler pi\" *ngIf=\"toggleable\" [ngClass]=\"{'pi-minus': !collapsed,'pi-plus':collapsed}\"></span>\n                    <span class=\"ui-fieldset-legend-text\">{{legend}}</span>\n                    <ng-content select=\"p-header\"></ng-content>\n                </ng-template>\n            </legend>\n            <div [attr.id]=\"id + '-content'\" class=\"ui-fieldset-content-wrapper\" [@fieldsetContent]=\"collapsed ? {value: 'hidden', params: {transitionParams: transitionOptions}} : {value: 'visible', params: {transitionParams: transitionOptions}}\" \n                        [ngClass]=\"{'ui-fieldset-content-wrapper-overflown': collapsed||animating}\" [attr.aria-hidden]=\"collapsed\"\n                         (@fieldsetContent.done)=\"onToggleDone($event)\" role=\"region\">\n                <div class=\"ui-fieldset-content\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n        </fieldset>\n    ",
             animations: [
@@ -99,4 +104,4 @@ animations_1.trigger('fieldsetContent', [
                     })),
-                    animations_1.transition('visible => hidden', animations_1.animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
-                    animations_1.transition('hidden => visible', animations_1.animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+                    animations_1.transition('visible => hidden', animations_1.animate('{{transitionParams}}')),
+                    animations_1.transition('hidden => visible', animations_1.animate('{{transitionParams}}'))
                 ])
@@ -103,0 +108,0 @@ ]

components/fieldset/fieldset.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"Fieldset":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"p-fieldset","template":"\n        <fieldset [attr.id]=\"id\" [ngClass]=\"{'ui-fieldset ui-widget ui-widget-content ui-corner-all': true, 'ui-fieldset-toggleable': toggleable}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <legend class=\"ui-fieldset-legend ui-corner-all ui-state-default ui-unselectable-text\">\n                <ng-container *ngIf=\"toggleable; else legendContent\">\n                    <a href=\"#\" (click)=\"toggle($event)\" [attr.aria-controls]=\"id + '-content'\" [attr.aria-expanded]=\"!collapsed\" [attr.tabindex]=\"toggleable ? null : -1\">\n                        <ng-container *ngTemplateOutlet=\"legendContent\"></ng-container>\n                    </a>\n                </ng-container>\n                <ng-template #legendContent>\n                    <span class=\"ui-fieldset-toggler pi\" *ngIf=\"toggleable\" [ngClass]=\"{'pi-minus': !collapsed,'pi-plus':collapsed}\"></span>\n                    <span class=\"ui-fieldset-legend-text\">{{legend}}</span>\n                    <ng-content select=\"p-header\"></ng-content>\n                </ng-template>\n            </legend>\n            <div [attr.id]=\"id + '-content'\" class=\"ui-fieldset-content-wrapper\" [@fieldsetContent]=\"collapsed ? 'hidden' : 'visible'\" \n                        [ngClass]=\"{'ui-fieldset-content-wrapper-overflown': collapsed||animating}\" [attr.aria-hidden]=\"collapsed\"\n                         (@fieldsetContent.done)=\"onToggleDone($event)\" role=\"region\">\n                <div class=\"ui-fieldset-content\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n        </fieldset>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":34,"character":8},"arguments":["fieldsetContent",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":35,"character":12},"arguments":["hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":35,"character":28},"arguments":[{"height":"0px"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":38,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":38,"character":29},"arguments":[{"height":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":41,"character":12},"arguments":["visible => hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":41,"character":44},"arguments":["400ms cubic-bezier(0.86, 0, 0.07, 1)"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":42,"character":12},"arguments":["hidden => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":42,"character":44},"arguments":["400ms cubic-bezier(0.86, 0, 0.07, 1)"]}]}]]}]}]}],"members":{"legend":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"toggleable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"collapsed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"collapsedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":5}}]}],"onBeforeToggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":5}}]}],"onAfterToggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":58,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":66,"character":28}]}],"toggle":[{"__symbolic":"method"}],"expand":[{"__symbolic":"method"}],"collapse":[{"__symbolic":"method"}],"getBlockableElement":[{"__symbolic":"method"}],"onToggleDone":[{"__symbolic":"method"}]}},"FieldsetModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":107,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":108,"character":14}],"exports":[{"__symbolic":"reference","name":"Fieldset"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":109,"character":23}],"declarations":[{"__symbolic":"reference","name":"Fieldset"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"Fieldset":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"p-fieldset","template":"\n        <fieldset [attr.id]=\"id\" [ngClass]=\"{'ui-fieldset ui-widget ui-widget-content ui-corner-all': true, 'ui-fieldset-toggleable': toggleable}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <legend class=\"ui-fieldset-legend ui-corner-all ui-state-default ui-unselectable-text\">\n                <ng-container *ngIf=\"toggleable; else legendContent\">\n                    <a href=\"#\" (click)=\"toggle($event)\" [attr.aria-controls]=\"id + '-content'\" [attr.aria-expanded]=\"!collapsed\" [attr.tabindex]=\"toggleable ? null : -1\">\n                        <ng-container *ngTemplateOutlet=\"legendContent\"></ng-container>\n                    </a>\n                </ng-container>\n                <ng-template #legendContent>\n                    <span class=\"ui-fieldset-toggler pi\" *ngIf=\"toggleable\" [ngClass]=\"{'pi-minus': !collapsed,'pi-plus':collapsed}\"></span>\n                    <span class=\"ui-fieldset-legend-text\">{{legend}}</span>\n                    <ng-content select=\"p-header\"></ng-content>\n                </ng-template>\n            </legend>\n            <div [attr.id]=\"id + '-content'\" class=\"ui-fieldset-content-wrapper\" [@fieldsetContent]=\"collapsed ? {value: 'hidden', params: {transitionParams: transitionOptions}} : {value: 'visible', params: {transitionParams: transitionOptions}}\" \n                        [ngClass]=\"{'ui-fieldset-content-wrapper-overflown': collapsed||animating}\" [attr.aria-hidden]=\"collapsed\"\n                         (@fieldsetContent.done)=\"onToggleDone($event)\" role=\"region\">\n                <div class=\"ui-fieldset-content\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n        </fieldset>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":34,"character":8},"arguments":["fieldsetContent",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":35,"character":12},"arguments":["hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":35,"character":28},"arguments":[{"height":"0px"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":38,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":38,"character":29},"arguments":[{"height":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":41,"character":12},"arguments":["visible => hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":41,"character":44},"arguments":["{{transitionParams}}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":42,"character":12},"arguments":["hidden => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":42,"character":44},"arguments":["{{transitionParams}}"]}]}]]}]}]}],"members":{"legend":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"toggleable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"collapsed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"collapsedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":5}}]}],"onBeforeToggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":5}}]}],"onAfterToggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":58,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"transitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":68,"character":28}]}],"toggle":[{"__symbolic":"method"}],"expand":[{"__symbolic":"method"}],"collapse":[{"__symbolic":"method"}],"getBlockableElement":[{"__symbolic":"method"}],"onToggleDone":[{"__symbolic":"method"}]}},"FieldsetModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":109,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":110,"character":14}],"exports":[{"__symbolic":"reference","name":"Fieldset"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":111,"character":23}],"declarations":[{"__symbolic":"reference","name":"Fieldset"}]}]}]}}}]

components/inputtextarea/inputtextarea.d.ts

@@ -1,15 +0,11 @@
-import { ElementRef, OnInit, DoCheck, EventEmitter } from '@angular/core';
+import { ElementRef, DoCheck, EventEmitter } from '@angular/core';
 import { NgModel } from '@angular/forms';
-export declare class InputTextarea implements OnInit, DoCheck {
+export declare class InputTextarea implements DoCheck {
     el: ElementRef;
     ngModel: NgModel;
     autoResize: boolean;
-    rows: number;
-    cols: number;
     onResize: EventEmitter<any>;
-    rowsDefault: number;
-    colsDefault: number;
     filled: boolean;
+    cachedScrollHeight: number;
     constructor(el: ElementRef, ngModel: NgModel);
-    ngOnInit(): void;
     ngDoCheck(): void;
@@ -20,3 +16,2 @@ onInput(e: any): void;
     onBlur(e: any): void;
-    onKeyup(e: any): void;
     resize(event?: Event): void;
@@ -23,0 +18,0 @@ }

components/inputtextarea/inputtextarea.js

@@ -22,12 +22,9 @@ "use strict";
         this.ngModel = ngModel;
-        this.rows = 2;
-        this.cols = 20;
         this.onResize = new core_1.EventEmitter();
     }
-    InputTextarea.prototype.ngOnInit = function () {
-        this.rowsDefault = this.rows;
-        this.colsDefault = this.cols;
-    };
     InputTextarea.prototype.ngDoCheck = function () {
         this.updateFilledState();
+        if (this.autoResize) {
+            this.resize();
+        }
     };
@@ -37,6 +34,8 @@ //To trigger change detection to manage ui-state-filled for material labels when there is no value binding
         this.updateFilledState();
+        if (this.autoResize) {
+            this.resize(e);
+        }
     };
     InputTextarea.prototype.updateFilledState = function () {
-        this.filled = (this.el.nativeElement.value && this.el.nativeElement.value.length) ||
-            (this.ngModel && this.ngModel.model);
+        this.filled = (this.el.nativeElement.value && this.el.nativeElement.value.length) || (this.ngModel && this.ngModel.model);
     };
@@ -53,13 +52,19 @@ InputTextarea.prototype.onFocus = function (e) {
     };
-    InputTextarea.prototype.onKeyup = function (e) {
-        if (this.autoResize) {
-            this.resize(e);
-        }
-    };
     InputTextarea.prototype.resize = function (event) {
-        var linesCount = 0, lines = this.el.nativeElement.value.split('\n');
-        for (var i = lines.length - 1; i >= 0; --i) {
-            linesCount += Math.floor((lines[i].length / this.colsDefault) + 1);
+        if (!this.cachedScrollHeight) {
+            this.cachedScrollHeight = this.el.nativeElement.scrollHeight;
+            this.el.nativeElement.style.overflow = "hidden";
         }
-        this.rows = (linesCount >= this.rowsDefault) ? (linesCount + 1) : this.rowsDefault;
+        if (this.cachedScrollHeight != this.el.nativeElement.scrollHeight) {
+            this.el.nativeElement.style.height = '';
+            this.el.nativeElement.style.height = this.el.nativeElement.scrollHeight + 'px';
+            if (parseFloat(this.el.nativeElement.style.height) >= parseFloat(this.el.nativeElement.style.maxHeight)) {
+                this.el.nativeElement.style.overflowY = "scroll";
+                this.el.nativeElement.style.height = this.el.nativeElement.style.maxHeight;
+            }
+            else {
+                this.el.nativeElement.style.overflow = "hidden";
+            }
+            this.cachedScrollHeight = this.el.nativeElement.scrollHeight;
+        }
         this.onResize.emit(event || {});
@@ -72,10 +77,2 @@ };
     __decorate([
-        core_1.Input(),
-        __metadata("design:type", Number)
-    ], InputTextarea.prototype, "rows", void 0);
-    __decorate([
-        core_1.Input(),
-        __metadata("design:type", Number)
-    ], InputTextarea.prototype, "cols", void 0);
-    __decorate([
         core_1.Output(),
@@ -102,8 +99,2 @@ __metadata("design:type", core_1.EventEmitter)
     ], InputTextarea.prototype, "onBlur", null);
-    __decorate([
-        core_1.HostListener('keyup', ['$event']),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", void 0)
-    ], InputTextarea.prototype, "onKeyup", null);
     InputTextarea = __decorate([
@@ -115,7 +106,6 @@ core_1.Directive({
                 '[class.ui-corner-all]': 'true',
+                '[class.ui-inputtextarea-resizable]': 'autoResize',
                 '[class.ui-state-default]': 'true',
                 '[class.ui-widget]': 'true',
-                '[class.ui-state-filled]': 'filled',
-                '[attr.rows]': 'rows',
-                '[attr.cols]': 'cols'
+                '[class.ui-state-filled]': 'filled'
             }
@@ -122,0 +112,0 @@ }),

components/inputtextarea/inputtextarea.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"InputTextarea":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":4,"character":1},"arguments":[{"selector":"[pInputTextarea]","host":{"[class.ui-inputtext]":"true","[class.ui-corner-all]":"true","[class.ui-state-default]":"true","[class.ui-widget]":"true","[class.ui-state-filled]":"filled","[attr.rows]":"rows","[attr.cols]":"cols","$quoted$":["[class.ui-inputtext]","[class.ui-corner-all]","[class.ui-state-default]","[class.ui-widget]","[class.ui-state-filled]","[attr.rows]","[attr.cols]"]}}]}],"members":{"autoResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":5}}]}],"rows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"cols":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":5}}]}],"onResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":32,"character":40}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":32,"character":27},{"__symbolic":"reference","module":"@angular/forms","name":"NgModel","line":32,"character":67}]}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"onInput":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":44,"character":5},"arguments":["input",["$event"]]}]}],"updateFilledState":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":54,"character":5},"arguments":["focus",["$event"]]}]}],"onBlur":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":61,"character":5},"arguments":["blur",["$event"]]}]}],"onKeyup":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":68,"character":5},"arguments":["keyup",["$event"]]}]}],"resize":[{"__symbolic":"method"}]}},"InputTextareaModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":88,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":89,"character":14}],"exports":[{"__symbolic":"reference","name":"InputTextarea"}],"declarations":[{"__symbolic":"reference","name":"InputTextarea"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"InputTextarea":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":4,"character":1},"arguments":[{"selector":"[pInputTextarea]","host":{"[class.ui-inputtext]":"true","[class.ui-corner-all]":"true","[class.ui-inputtextarea-resizable]":"autoResize","[class.ui-state-default]":"true","[class.ui-widget]":"true","[class.ui-state-filled]":"filled","$quoted$":["[class.ui-inputtext]","[class.ui-corner-all]","[class.ui-inputtextarea-resizable]","[class.ui-state-default]","[class.ui-widget]","[class.ui-state-filled]"]}}]}],"members":{"autoResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5}}]}],"onResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":25,"character":40}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":25,"character":27},{"__symbolic":"reference","module":"@angular/forms","name":"NgModel","line":25,"character":67}]}],"ngDoCheck":[{"__symbolic":"method"}],"onInput":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":36,"character":5},"arguments":["input",["$event"]]}]}],"updateFilledState":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":48,"character":5},"arguments":["focus",["$event"]]}]}],"onBlur":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":55,"character":5},"arguments":["blur",["$event"]]}]}],"resize":[{"__symbolic":"method"}]}},"InputTextareaModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":87,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":88,"character":14}],"exports":[{"__symbolic":"reference","name":"InputTextarea"}],"declarations":[{"__symbolic":"reference","name":"InputTextarea"}]}]}]}}}]

components/lightbox/lightbox.d.ts

@@ -1,2 +0,2 @@
-import { ElementRef, Renderer2, AfterViewInit, OnDestroy } from '@angular/core';
+import { ElementRef, Renderer2, AfterViewInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { DomHandler } from '../dom/domhandler';
@@ -7,2 +7,3 @@ export declare class Lightbox implements AfterViewInit, OnDestroy {
     renderer: Renderer2;
+    private cd;
     images: any[];
@@ -27,3 +28,3 @@ type: string;
     documentClickListener: any;
-    constructor(el: ElementRef, domHandler: DomHandler, renderer: Renderer2);
+    constructor(el: ElementRef, domHandler: DomHandler, renderer: Renderer2, cd: ChangeDetectorRef);
     onImageClick(event: any, image: any, i: any, content: any): void;
@@ -30,0 +31,0 @@ ngAfterViewInit(): void;

components/lightbox/lightbox.js

@@ -16,6 +16,7 @@ "use strict";
 var Lightbox = /** @class */ (function () {
-    function Lightbox(el, domHandler, renderer) {
+    function Lightbox(el, domHandler, renderer, cd) {
         this.el = el;
         this.domHandler = domHandler;
         this.renderer = renderer;
+        this.cd = cd;
         this.type = 'image';
@@ -50,2 +51,3 @@ this.effectDuration = '500ms';
             _this.preventDocumentClickListener = false;
+            _this.cd.markForCheck();
         });
@@ -61,2 +63,3 @@ };
         setTimeout(function () {
+            _this.cd.markForCheck();
             _this.currentImage = image;
@@ -122,2 +125,3 @@ _this.captionText = image.title;
         setTimeout(function () {
+            _this.cd.markForCheck();
             _this.domHandler.fadeIn(image, 500);
@@ -209,3 +213,3 @@ image.style.display = 'block';
         }),
-        __metadata("design:paramtypes", [core_1.ElementRef, domhandler_1.DomHandler, core_1.Renderer2])
+        __metadata("design:paramtypes", [core_1.ElementRef, domhandler_1.DomHandler, core_1.Renderer2, core_1.ChangeDetectorRef])
     ], Lightbox);
@@ -212,0 +216,0 @@ return Lightbox;

components/lightbox/lightbox.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"Lightbox":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"p-lightbox","template":"\n        <div [ngStyle]=\"style\" [class]=\"styleClass\" *ngIf=\"(type == 'image')\">\n            <a *ngFor=\"let image of images; let i = index;\" [href]=\"image.source\" (click)=\"onImageClick($event,image,i,content)\">\n                <img [src]=\"image.thumbnail\" [title]=\"image.title\" [alt]=\"image.alt\">\n            </a>\n        </div>\n        <span [ngStyle]=\"style\" [class]=\"styleClass\" *ngIf=\"(type == 'content')\" (click)=\"onLinkClick($event,content)\">\n            <ng-content select=\"a\"></ng-content>\n        </span>\n        <div class=\"ui-lightbox ui-widget ui-corner-all ui-shadow\" [style.display]=\"visible ? 'block' : 'none'\" [style.zIndex]=\"zindex\"\n            [ngClass]=\"{'ui-lightbox-loading': loading}\"\n            [style.transitionProperty]=\"'all'\" [style.transitionDuration]=\"effectDuration\" [style.transitionTimingFunction]=\"easing\" (click)=\"preventDocumentClickListener=true\">\n           <div class=\"ui-lightbox-content-wrapper\">\n              <a class=\"ui-state-default ui-lightbox-nav-left ui-corner-right\" [style.zIndex]=\"zindex + 1\" (click)=\"prev(img)\"\n                [ngClass]=\"{'ui-helper-hidden':!leftVisible}\"><span class=\"ui-lightbox-nav-icon pi pi-chevron-left\"></span></a>\n              <div #content class=\"ui-lightbox-content ui-corner-all\" \n                [style.transitionProperty]=\"'width,height'\" [style.transitionDuration]=\"effectDuration\" [style.transitionTimingFunction]=\"easing\">\n                <img #img [src]=\"currentImage ? currentImage.source||'' : ''\" (load)=\"onImageLoad($event,content)\" style=\"display:none\">\n                <ng-content></ng-content>\n              </div>\n              <a class=\"ui-state-default ui-lightbox-nav-right ui-corner-left ui-helper-hidden\" [style.zIndex]=\"zindex + 1\" (click)=\"next(img)\"\n                [ngClass]=\"{'ui-helper-hidden':!rightVisible}\"><span class=\"ui-lightbox-nav-icon pi pi-chevron-right\"></span></a>\n           </div>\n           <div class=\"ui-lightbox-caption ui-widget-header\" [style.display]=\"captionText ? 'block' : 'none'\">\n              <span class=\"ui-lightbox-caption-text\">{{captionText}}</span><a class=\"ui-lightbox-close ui-corner-all\" href=\"#\" (click)=\"hide($event)\"><span class=\"pi pi-times\"></span></a>\n              <div style=\"clear:both\"></div>\n           </div>\n        </div>\n    ","providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":35,"character":16}]}]}],"members":{"images":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"easing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"effectDuration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":77,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":77,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":77,"character":87}]}],"onImageClick":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onLinkClick":[{"__symbolic":"method"}],"displayImage":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"center":[{"__symbolic":"method"}],"onImageLoad":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"LightboxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":231,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":232,"character":14}],"exports":[{"__symbolic":"reference","name":"Lightbox"}],"declarations":[{"__symbolic":"reference","name":"Lightbox"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"Lightbox":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"p-lightbox","template":"\n        <div [ngStyle]=\"style\" [class]=\"styleClass\" *ngIf=\"(type == 'image')\">\n            <a *ngFor=\"let image of images; let i = index;\" [href]=\"image.source\" (click)=\"onImageClick($event,image,i,content)\">\n                <img [src]=\"image.thumbnail\" [title]=\"image.title\" [alt]=\"image.alt\">\n            </a>\n        </div>\n        <span [ngStyle]=\"style\" [class]=\"styleClass\" *ngIf=\"(type == 'content')\" (click)=\"onLinkClick($event,content)\">\n            <ng-content select=\"a\"></ng-content>\n        </span>\n        <div class=\"ui-lightbox ui-widget ui-corner-all ui-shadow\" [style.display]=\"visible ? 'block' : 'none'\" [style.zIndex]=\"zindex\"\n            [ngClass]=\"{'ui-lightbox-loading': loading}\"\n            [style.transitionProperty]=\"'all'\" [style.transitionDuration]=\"effectDuration\" [style.transitionTimingFunction]=\"easing\" (click)=\"preventDocumentClickListener=true\">\n           <div class=\"ui-lightbox-content-wrapper\">\n              <a class=\"ui-state-default ui-lightbox-nav-left ui-corner-right\" [style.zIndex]=\"zindex + 1\" (click)=\"prev(img)\"\n                [ngClass]=\"{'ui-helper-hidden':!leftVisible}\"><span class=\"ui-lightbox-nav-icon pi pi-chevron-left\"></span></a>\n              <div #content class=\"ui-lightbox-content ui-corner-all\" \n                [style.transitionProperty]=\"'width,height'\" [style.transitionDuration]=\"effectDuration\" [style.transitionTimingFunction]=\"easing\">\n                <img #img [src]=\"currentImage ? currentImage.source||'' : ''\" (load)=\"onImageLoad($event,content)\" style=\"display:none\">\n                <ng-content></ng-content>\n              </div>\n              <a class=\"ui-state-default ui-lightbox-nav-right ui-corner-left ui-helper-hidden\" [style.zIndex]=\"zindex + 1\" (click)=\"next(img)\"\n                [ngClass]=\"{'ui-helper-hidden':!rightVisible}\"><span class=\"ui-lightbox-nav-icon pi pi-chevron-right\"></span></a>\n           </div>\n           <div class=\"ui-lightbox-caption ui-widget-header\" [style.display]=\"captionText ? 'block' : 'none'\">\n              <span class=\"ui-lightbox-caption-text\">{{captionText}}</span><a class=\"ui-lightbox-close ui-corner-all\" href=\"#\" (click)=\"hide($event)\"><span class=\"pi pi-times\"></span></a>\n              <div style=\"clear:both\"></div>\n           </div>\n        </div>\n    ","providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":35,"character":16}]}]}],"members":{"images":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"easing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"effectDuration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":77,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":77,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":77,"character":87},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":77,"character":109}]}],"onImageClick":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onLinkClick":[{"__symbolic":"method"}],"displayImage":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"center":[{"__symbolic":"method"}],"onImageLoad":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"LightboxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":233,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":234,"character":14}],"exports":[{"__symbolic":"reference","name":"Lightbox"}],"declarations":[{"__symbolic":"reference","name":"Lightbox"}]}]}]}}}]

components/listbox/listbox.d.ts

@@ -31,3 +31,3 @@ import { ElementRef, EventEmitter, AfterContentInit, QueryList, TemplateRef, ChangeDetectorRef } from '@angular/core';
     itemTemplate: TemplateRef<any>;
-    filterValue: string;
+    _filterValue: string;
     filtered: boolean;
@@ -42,2 +42,3 @@ value: any;
     options: any[];
+    filterValue: string;
     ngAfterContentInit(): void;
@@ -44,0 +45,0 @@ writeValue(value: any): void;

components/listbox/listbox.js

@@ -50,2 +50,12 @@ "use strict";
     });
+    Object.defineProperty(Listbox.prototype, "filterValue", {
+        get: function () {
+            return this._filterValue;
+        },
+        set: function (val) {
+            this._filterValue = val;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Listbox.prototype.ngAfterContentInit = function () {
@@ -216,9 +226,6 @@ var _this = this;
         get: function () {
-            if (this.filterValue) {
+            if (this.filterValue)
                 return this.allFilteredSelected();
-            }
-            else {
-                var optionCount = this.getEnabledOptionCount();
-                return this.value && this.options && (this.value.length > 0 && this.value.length === optionCount);
-            }
+            else
+                return this.value && this.options && (this.value.length > 0 && this.value.length === this.getEnabledOptionCount());
         },
@@ -261,3 +268,3 @@ enumerable: true,
         var query = event.target.value.trim().toLowerCase();
-        this.filterValue = query.length ? query : null;
+        this._filterValue = query.length ? query : null;
     };
@@ -388,6 +395,11 @@ Listbox.prototype.toggleAll = function (event, checkbox) {
     ], Listbox.prototype, "options", null);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], Listbox.prototype, "filterValue", null);
     Listbox = __decorate([
         core_1.Component({
             selector: 'p-listbox',
-            template: "\n    <div [ngClass]=\"{'ui-listbox ui-inputtext ui-widget ui-widget-content ui-corner-all':true,'ui-state-disabled':disabled,'ui-state-focus':focus}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n      <div class=\"ui-helper-hidden-accessible\">\n        <input type=\"text\" readonly=\"readonly\" (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\">\n      </div>\n      <div class=\"ui-widget-header ui-corner-all ui-listbox-header ui-helper-clearfix\" *ngIf=\"headerFacet\">\n        <ng-content select=\"p-header\"></ng-content>\n      </div>\n      <div class=\"ui-widget-header ui-corner-all ui-listbox-header ui-helper-clearfix\" *ngIf=\"(checkbox && multiple) || filter\" [ngClass]=\"{'ui-listbox-header-w-checkbox': checkbox}\">\n        <div class=\"ui-chkbox ui-widget\" *ngIf=\"checkbox && multiple && showToggleAll\">\n          <div class=\"ui-helper-hidden-accessible\">\n            <input #cb type=\"checkbox\" readonly=\"readonly\" [checked]=\"allChecked\">\n          </div>\n          <div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\" [ngClass]=\"{'ui-state-active':allChecked}\" (click)=\"toggleAll($event,cb)\">\n            <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'pi pi-check':allChecked}\"></span>\n          </div>\n        </div>\n        <div class=\"ui-listbox-filter-container\" *ngIf=\"filter\">\n          <input type=\"text\" role=\"textbox\" (input)=\"onFilter($event)\" class=\"ui-inputtext ui-widget ui-state-default ui-corner-all\" [disabled]=\"disabled\">\n          <span class=\"ui-listbox-filter-icon pi pi-search\"></span>\n        </div>\n      </div>\n      <div class=\"ui-listbox-list-wrapper\" [ngStyle]=\"listStyle\">\n        <ul class=\"ui-listbox-list\">\n          <li *ngFor=\"let option of options; let i = index;\" [style.display]=\"isItemVisible(option) ? 'block' : 'none'\"\n              [ngClass]=\"{'ui-listbox-item ui-corner-all':true,'ui-state-highlight':isSelected(option), 'ui-state-disabled': option.disabled}\"\n              (click)=\"onOptionClick($event,option)\" (dblclick)=\"onOptionDoubleClick($event,option)\" (touchend)=\"onOptionTouchEnd($event,option)\">\n            <div class=\"ui-chkbox ui-widget\" *ngIf=\"checkbox && multiple\">\n              <div class=\"ui-helper-hidden-accessible\">\n                <input type=\"checkbox\" [checked]=\"isSelected(option)\" [disabled]=\"disabled\">\n              </div>\n              <div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\" [ngClass]=\"{'ui-state-active':isSelected(option)}\">\n                <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'pi pi-check':isSelected(option)}\"></span>\n              </div>\n            </div>\n            <span *ngIf=\"!itemTemplate\">{{option.label}}</span>\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: option, index: i}\"></ng-container>\n          </li>\n        </ul>\n      </div>\n      <div class=\"ui-listbox-footer ui-widget-header ui-corner-all\" *ngIf=\"footerFacet\">\n        <ng-content select=\"p-footer\"></ng-content>\n      </div>\n    </div>\n  ",
+            template: "\n    <div [ngClass]=\"{'ui-listbox ui-inputtext ui-widget ui-widget-content ui-corner-all':true,'ui-state-disabled':disabled,'ui-state-focus':focus}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n      <div class=\"ui-helper-hidden-accessible\">\n        <input type=\"text\" readonly=\"readonly\" (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\">\n      </div>\n      <div class=\"ui-widget-header ui-corner-all ui-listbox-header ui-helper-clearfix\" *ngIf=\"headerFacet\">\n        <ng-content select=\"p-header\"></ng-content>\n      </div>\n      <div class=\"ui-widget-header ui-corner-all ui-listbox-header ui-helper-clearfix\" *ngIf=\"(checkbox && multiple && showToggleAll) || filter\" [ngClass]=\"{'ui-listbox-header-w-checkbox': checkbox}\">\n        <div class=\"ui-chkbox ui-widget\" *ngIf=\"checkbox && multiple && showToggleAll\">\n          <div class=\"ui-helper-hidden-accessible\">\n            <input #cb type=\"checkbox\" readonly=\"readonly\" [checked]=\"allChecked\">\n          </div>\n          <div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\" [ngClass]=\"{'ui-state-active':allChecked}\" (click)=\"toggleAll($event,cb)\">\n            <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'pi pi-check':allChecked}\"></span>\n          </div>\n        </div>\n        <div class=\"ui-listbox-filter-container\" *ngIf=\"filter\">\n          <input type=\"text\" role=\"textbox\" [value]=\"filterValue||''\" (input)=\"onFilter($event)\" class=\"ui-inputtext ui-widget ui-state-default ui-corner-all\" [disabled]=\"disabled\">\n          <span class=\"ui-listbox-filter-icon pi pi-search\"></span>\n        </div>\n      </div>\n      <div class=\"ui-listbox-list-wrapper\" [ngStyle]=\"listStyle\">\n        <ul class=\"ui-listbox-list\">\n          <li *ngFor=\"let option of options; let i = index;\" [style.display]=\"isItemVisible(option) ? 'block' : 'none'\"\n              [ngClass]=\"{'ui-listbox-item ui-corner-all':true,'ui-state-highlight':isSelected(option), 'ui-state-disabled': option.disabled}\"\n              (click)=\"onOptionClick($event,option)\" (dblclick)=\"onOptionDoubleClick($event,option)\" (touchend)=\"onOptionTouchEnd($event,option)\">\n            <div class=\"ui-chkbox ui-widget\" *ngIf=\"checkbox && multiple\">\n              <div class=\"ui-helper-hidden-accessible\">\n                <input type=\"checkbox\" [checked]=\"isSelected(option)\" [disabled]=\"disabled\">\n              </div>\n              <div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\" [ngClass]=\"{'ui-state-active':isSelected(option)}\">\n                <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'pi pi-check':isSelected(option)}\"></span>\n              </div>\n            </div>\n            <span *ngIf=\"!itemTemplate\">{{option.label}}</span>\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: option, index: i}\"></ng-container>\n          </li>\n        </ul>\n      </div>\n      <div class=\"ui-listbox-footer ui-widget-header ui-corner-all\" *ngIf=\"footerFacet\">\n        <ng-content select=\"p-footer\"></ng-content>\n      </div>\n    </div>\n  ",
             providers: [domhandler_1.DomHandler, objectutils_1.ObjectUtils, exports.LISTBOX_VALUE_ACCESSOR]
@@ -394,0 +406,0 @@ }),

components/listbox/listbox.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"LISTBOX_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":9,"character":13},"useExisting":{"__symbolic":"reference","name":"Listbox"},"multi":true},"Listbox":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"p-listbox","template":"\n    <div [ngClass]=\"{'ui-listbox ui-inputtext ui-widget ui-widget-content ui-corner-all':true,'ui-state-disabled':disabled,'ui-state-focus':focus}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n      <div class=\"ui-helper-hidden-accessible\">\n        <input type=\"text\" readonly=\"readonly\" (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\">\n      </div>\n      <div class=\"ui-widget-header ui-corner-all ui-listbox-header ui-helper-clearfix\" *ngIf=\"headerFacet\">\n        <ng-content select=\"p-header\"></ng-content>\n      </div>\n      <div class=\"ui-widget-header ui-corner-all ui-listbox-header ui-helper-clearfix\" *ngIf=\"(checkbox && multiple) || filter\" [ngClass]=\"{'ui-listbox-header-w-checkbox': checkbox}\">\n        <div class=\"ui-chkbox ui-widget\" *ngIf=\"checkbox && multiple && showToggleAll\">\n          <div class=\"ui-helper-hidden-accessible\">\n            <input #cb type=\"checkbox\" readonly=\"readonly\" [checked]=\"allChecked\">\n          </div>\n          <div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\" [ngClass]=\"{'ui-state-active':allChecked}\" (click)=\"toggleAll($event,cb)\">\n            <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'pi pi-check':allChecked}\"></span>\n          </div>\n        </div>\n        <div class=\"ui-listbox-filter-container\" *ngIf=\"filter\">\n          <input type=\"text\" role=\"textbox\" (input)=\"onFilter($event)\" class=\"ui-inputtext ui-widget ui-state-default ui-corner-all\" [disabled]=\"disabled\">\n          <span class=\"ui-listbox-filter-icon pi pi-search\"></span>\n        </div>\n      </div>\n      <div class=\"ui-listbox-list-wrapper\" [ngStyle]=\"listStyle\">\n        <ul class=\"ui-listbox-list\">\n          <li *ngFor=\"let option of options; let i = index;\" [style.display]=\"isItemVisible(option) ? 'block' : 'none'\"\n              [ngClass]=\"{'ui-listbox-item ui-corner-all':true,'ui-state-highlight':isSelected(option), 'ui-state-disabled': option.disabled}\"\n              (click)=\"onOptionClick($event,option)\" (dblclick)=\"onOptionDoubleClick($event,option)\" (touchend)=\"onOptionTouchEnd($event,option)\">\n            <div class=\"ui-chkbox ui-widget\" *ngIf=\"checkbox && multiple\">\n              <div class=\"ui-helper-hidden-accessible\">\n                <input type=\"checkbox\" [checked]=\"isSelected(option)\" [disabled]=\"disabled\">\n              </div>\n              <div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\" [ngClass]=\"{'ui-state-active':isSelected(option)}\">\n                <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'pi pi-check':isSelected(option)}\"></span>\n              </div>\n            </div>\n            <span *ngIf=\"!itemTemplate\">{{option.label}}</span>\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: option, index: i}\"></ng-container>\n          </li>\n        </ul>\n      </div>\n      <div class=\"ui-listbox-footer ui-widget-header ui-corner-all\" *ngIf=\"footerFacet\">\n        <ng-content select=\"p-footer\"></ng-content>\n      </div>\n    </div>\n  ","providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":61,"character":16},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":61,"character":28},{"__symbolic":"reference","name":"LISTBOX_VALUE_ACCESSOR"}]}]}],"members":{"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"listStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":5}}]}],"checkbox":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":5}}]}],"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"filterMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":5}}]}],"metaKeySelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"dataKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"showToggleAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"optionLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":91,"character":5}}]}],"onDblClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":93,"character":5}}]}],"headerFacet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":95,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"Header","line":95,"character":18}]}]}],"footerFacet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":97,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"Footer","line":97,"character":18}]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":99,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":99,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":119,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":119,"character":58},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":119,"character":90},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":119,"character":114}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":121,"character":5}}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"onOptionClick":[{"__symbolic":"method"}],"onOptionTouchEnd":[{"__symbolic":"method"}],"onOptionDoubleClick":[{"__symbolic":"method"}],"onOptionClickSingle":[{"__symbolic":"method"}],"onOptionClickMultiple":[{"__symbolic":"method"}],"onOptionClickCheckbox":[{"__symbolic":"method"}],"removeOption":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"getEnabledOptionCount":[{"__symbolic":"method"}],"allFilteredSelected":[{"__symbolic":"method"}],"onFilter":[{"__symbolic":"method"}],"toggleAll":[{"__symbolic":"method"}],"isItemVisible":[{"__symbolic":"method"}],"onInputFocus":[{"__symbolic":"method"}],"onInputBlur":[{"__symbolic":"method"}]}},"ListboxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":427,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":428,"character":14},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":428,"character":28}],"exports":[{"__symbolic":"reference","name":"Listbox"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":429,"character":23}],"declarations":[{"__symbolic":"reference","name":"Listbox"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"LISTBOX_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":9,"character":13},"useExisting":{"__symbolic":"reference","name":"Listbox"},"multi":true},"Listbox":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"p-listbox","template":"\n    <div [ngClass]=\"{'ui-listbox ui-inputtext ui-widget ui-widget-content ui-corner-all':true,'ui-state-disabled':disabled,'ui-state-focus':focus}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n      <div class=\"ui-helper-hidden-accessible\">\n        <input type=\"text\" readonly=\"readonly\" (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\">\n      </div>\n      <div class=\"ui-widget-header ui-corner-all ui-listbox-header ui-helper-clearfix\" *ngIf=\"headerFacet\">\n        <ng-content select=\"p-header\"></ng-content>\n      </div>\n      <div class=\"ui-widget-header ui-corner-all ui-listbox-header ui-helper-clearfix\" *ngIf=\"(checkbox && multiple && showToggleAll) || filter\" [ngClass]=\"{'ui-listbox-header-w-checkbox': checkbox}\">\n        <div class=\"ui-chkbox ui-widget\" *ngIf=\"checkbox && multiple && showToggleAll\">\n          <div class=\"ui-helper-hidden-accessible\">\n            <input #cb type=\"checkbox\" readonly=\"readonly\" [checked]=\"allChecked\">\n          </div>\n          <div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\" [ngClass]=\"{'ui-state-active':allChecked}\" (click)=\"toggleAll($event,cb)\">\n            <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'pi pi-check':allChecked}\"></span>\n          </div>\n        </div>\n        <div class=\"ui-listbox-filter-container\" *ngIf=\"filter\">\n          <input type=\"text\" role=\"textbox\" [value]=\"filterValue||''\" (input)=\"onFilter($event)\" class=\"ui-inputtext ui-widget ui-state-default ui-corner-all\" [disabled]=\"disabled\">\n          <span class=\"ui-listbox-filter-icon pi pi-search\"></span>\n        </div>\n      </div>\n      <div class=\"ui-listbox-list-wrapper\" [ngStyle]=\"listStyle\">\n        <ul class=\"ui-listbox-list\">\n          <li *ngFor=\"let option of options; let i = index;\" [style.display]=\"isItemVisible(option) ? 'block' : 'none'\"\n              [ngClass]=\"{'ui-listbox-item ui-corner-all':true,'ui-state-highlight':isSelected(option), 'ui-state-disabled': option.disabled}\"\n              (click)=\"onOptionClick($event,option)\" (dblclick)=\"onOptionDoubleClick($event,option)\" (touchend)=\"onOptionTouchEnd($event,option)\">\n            <div class=\"ui-chkbox ui-widget\" *ngIf=\"checkbox && multiple\">\n              <div class=\"ui-helper-hidden-accessible\">\n                <input type=\"checkbox\" [checked]=\"isSelected(option)\" [disabled]=\"disabled\">\n              </div>\n              <div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\" [ngClass]=\"{'ui-state-active':isSelected(option)}\">\n                <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'pi pi-check':isSelected(option)}\"></span>\n              </div>\n            </div>\n            <span *ngIf=\"!itemTemplate\">{{option.label}}</span>\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: option, index: i}\"></ng-container>\n          </li>\n        </ul>\n      </div>\n      <div class=\"ui-listbox-footer ui-widget-header ui-corner-all\" *ngIf=\"footerFacet\">\n        <ng-content select=\"p-footer\"></ng-content>\n      </div>\n    </div>\n  ","providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":61,"character":16},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":61,"character":28},{"__symbolic":"reference","name":"LISTBOX_VALUE_ACCESSOR"}]}]}],"members":{"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"listStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":5}}]}],"checkbox":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":5}}]}],"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"filterMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":5}}]}],"metaKeySelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"dataKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"showToggleAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"optionLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":91,"character":5}}]}],"onDblClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":93,"character":5}}]}],"headerFacet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":95,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"Header","line":95,"character":18}]}]}],"footerFacet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":97,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"Footer","line":97,"character":18}]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":99,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":99,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":119,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":119,"character":58},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":119,"character":90},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":119,"character":114}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":121,"character":5}}]}],"filterValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":130,"character":5}}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"onOptionClick":[{"__symbolic":"method"}],"onOptionTouchEnd":[{"__symbolic":"method"}],"onOptionDoubleClick":[{"__symbolic":"method"}],"onOptionClickSingle":[{"__symbolic":"method"}],"onOptionClickMultiple":[{"__symbolic":"method"}],"onOptionClickCheckbox":[{"__symbolic":"method"}],"removeOption":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"getEnabledOptionCount":[{"__symbolic":"method"}],"allFilteredSelected":[{"__symbolic":"method"}],"onFilter":[{"__symbolic":"method"}],"toggleAll":[{"__symbolic":"method"}],"isItemVisible":[{"__symbolic":"method"}],"onInputFocus":[{"__symbolic":"method"}],"onInputBlur":[{"__symbolic":"method"}]}},"ListboxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":430,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":431,"character":14},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":431,"character":28}],"exports":[{"__symbolic":"reference","name":"Listbox"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":432,"character":23}],"declarations":[{"__symbolic":"reference","name":"Listbox"}]}]}]}}}]

components/menu/menu.d.ts

@@ -21,2 +21,4 @@ import { ElementRef, OnDestroy, Renderer2 } from '@angular/core';
     baseZIndex: number;
+    showTransitionOptions: string;
+    hideTransitionOptions: string;
     containerViewChild: ElementRef;
@@ -23,0 +25,0 @@ container: HTMLDivElement;

components/menu/menu.js

@@ -46,2 +46,4 @@ "use strict";
         this.baseZIndex = 0;
+        this.showTransitionOptions = '225ms ease-out';
+        this.hideTransitionOptions = '195ms ease-in';
     }
@@ -198,2 +200,10 @@ Menu.prototype.toggle = function (event) {
     __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], Menu.prototype, "showTransitionOptions", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], Menu.prototype, "hideTransitionOptions", void 0);
+    __decorate([
         core_1.ViewChild('container'),
@@ -205,3 +215,3 @@ __metadata("design:type", core_1.ElementRef)
             selector: 'p-menu',
-            template: "\n        <div #container [ngClass]=\"{'ui-menu ui-widget ui-widget-content ui-corner-all': true, 'ui-menu-dynamic ui-shadow': popup}\"\n            [class]=\"styleClass\" [ngStyle]=\"style\" (click)=\"preventDocumentDefault=true\" *ngIf=\"!popup || visible\"\n            [@overlayAnimation]=\"'visible'\" [@.disabled]=\"popup !== true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\">\n            <ul>\n                <ng-template ngFor let-submenu [ngForOf]=\"model\" *ngIf=\"hasSubMenu()\">\n                    <li class=\"ui-menu-separator ui-widget-content\" *ngIf=\"submenu.separator\" [ngClass]=\"{'ui-helper-hidden': submenu.visible === false}\"></li>\n                    <li class=\"ui-submenu-header ui-widget-header ui-corner-all\" [attr.data-automationid]=\"submenu.automationId\" *ngIf=\"!submenu.separator\" [ngClass]=\"{'ui-helper-hidden': submenu.visible === false}\">{{submenu.label}}</li>\n                    <ng-template ngFor let-item [ngForOf]=\"submenu.items\">\n                        <li class=\"ui-menu-separator ui-widget-content\" *ngIf=\"item.separator\" [ngClass]=\"{'ui-helper-hidden': (item.visible === false ||\u00A0submenu.visible === false)}\"></li>\n                        <li class=\"ui-menuitem ui-widget ui-corner-all\" *ngIf=\"!item.separator\" [pMenuItemContent]=\"item\" [ngClass]=\"{'ui-helper-hidden': (item.visible === false || submenu.visible === false)}\" [ngStyle]=\"item.style\" [class]=\"item.styleClass\"></li>\n                    </ng-template>\n                </ng-template>\n                <ng-template ngFor let-item [ngForOf]=\"model\" *ngIf=\"!hasSubMenu()\">\n                    <li class=\"ui-menu-separator ui-widget-content\" *ngIf=\"item.separator\" [ngClass]=\"{'ui-helper-hidden': item.visible === false}\"></li>\n                    <li class=\"ui-menuitem ui-widget ui-corner-all\" *ngIf=\"!item.separator\" [pMenuItemContent]=\"item\" [ngClass]=\"{'ui-helper-hidden': item.visible === false}\" [ngStyle]=\"item.style\" [class]=\"item.styleClass\"></li>\n                </ng-template>\n            </ul>\n        </div>\n    ",
+            template: "\n        <div #container [ngClass]=\"{'ui-menu ui-widget ui-widget-content ui-corner-all': true, 'ui-menu-dynamic ui-shadow': popup}\"\n            [class]=\"styleClass\" [ngStyle]=\"style\" (click)=\"preventDocumentDefault=true\" *ngIf=\"!popup || visible\"\n            [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" [@.disabled]=\"popup !== true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\">\n            <ul>\n                <ng-template ngFor let-submenu [ngForOf]=\"model\" *ngIf=\"hasSubMenu()\">\n                    <li class=\"ui-menu-separator ui-widget-content\" *ngIf=\"submenu.separator\" [ngClass]=\"{'ui-helper-hidden': submenu.visible === false}\"></li>\n                    <li class=\"ui-submenu-header ui-widget-header ui-corner-all\" [attr.data-automationid]=\"submenu.automationId\" *ngIf=\"!submenu.separator\" [ngClass]=\"{'ui-helper-hidden': submenu.visible === false}\">{{submenu.label}}</li>\n                    <ng-template ngFor let-item [ngForOf]=\"submenu.items\">\n                        <li class=\"ui-menu-separator ui-widget-content\" *ngIf=\"item.separator\" [ngClass]=\"{'ui-helper-hidden': (item.visible === false ||\u00A0submenu.visible === false)}\"></li>\n                        <li class=\"ui-menuitem ui-widget ui-corner-all\" *ngIf=\"!item.separator\" [pMenuItemContent]=\"item\" [ngClass]=\"{'ui-helper-hidden': (item.visible === false || submenu.visible === false)}\" [ngStyle]=\"item.style\" [class]=\"item.styleClass\"></li>\n                    </ng-template>\n                </ng-template>\n                <ng-template ngFor let-item [ngForOf]=\"model\" *ngIf=\"!hasSubMenu()\">\n                    <li class=\"ui-menu-separator ui-widget-content\" *ngIf=\"item.separator\" [ngClass]=\"{'ui-helper-hidden': item.visible === false}\"></li>\n                    <li class=\"ui-menuitem ui-widget ui-corner-all\" *ngIf=\"!item.separator\" [pMenuItemContent]=\"item\" [ngClass]=\"{'ui-helper-hidden': item.visible === false}\" [ngStyle]=\"item.style\" [class]=\"item.styleClass\"></li>\n                </ng-template>\n            </ul>\n        </div>\n    ",
             animations: [
@@ -217,4 +227,4 @@ animations_1.trigger('overlayAnimation', [
                     })),
-                    animations_1.transition('void => visible', animations_1.animate('225ms ease-out')),
-                    animations_1.transition('visible => void', animations_1.animate('195ms ease-in'))
+                    animations_1.transition('void => visible', animations_1.animate('{{showTransitionParams}}')),
+                    animations_1.transition('visible => void', animations_1.animate('{{hideTransitionParams}}'))
                 ])
@@ -221,0 +231,0 @@ ],

components/menu/menu.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"MenuItemContent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"[pMenuItemContent]","template":"\n        <a *ngIf=\"!item.routerLink\" [href]=\"item.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" [attr.data-automationid]=\"item.automationId\" [attr.target]=\"item.target\" [attr.title]=\"item.title\" [attr.id]=\"item.id\"\n            [ngClass]=\"{'ui-state-disabled':item.disabled}\" (click)=\"menu.itemClick($event, item)\">\n            <span class=\"ui-menuitem-icon\" *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></span>\n            <span class=\"ui-menuitem-text\">{{item.label}}</span>\n        </a>\n        <a *ngIf=\"item.routerLink\" [routerLink]=\"item.routerLink\" [attr.data-automationid]=\"item.automationId\"  [queryParams]=\"item.queryParams\" [routerLinkActive]=\"'ui-state-active'\"\n            [routerLinkActiveOptions]=\"item.routerLinkActiveOptions||{exact:false}\" class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"item.target\" [attr.id]=\"item.id\"\n             [attr.title]=\"item.title\" [ngClass]=\"{'ui-state-disabled':item.disabled}\" (click)=\"menu.itemClick($event, item)\">\n            <span class=\"ui-menuitem-icon\" *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></span>\n            <span class=\"ui-menuitem-text\">{{item.label}}</span>\n        </a>\n    "}]}],"members":{"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5},"arguments":["pMenuItemContent"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":27,"character":17},"arguments":[{"__symbolic":"reference","name":"Menu"}]}]],"parameters":[{"__symbolic":"reference","name":"Menu"}]}]}},"Menu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":30,"character":1},"arguments":[{"selector":"p-menu","template":"\n        <div #container [ngClass]=\"{'ui-menu ui-widget ui-widget-content ui-corner-all': true, 'ui-menu-dynamic ui-shadow': popup}\"\n            [class]=\"styleClass\" [ngStyle]=\"style\" (click)=\"preventDocumentDefault=true\" *ngIf=\"!popup || visible\"\n            [@overlayAnimation]=\"'visible'\" [@.disabled]=\"popup !== true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\">\n            <ul>\n                <ng-template ngFor let-submenu [ngForOf]=\"model\" *ngIf=\"hasSubMenu()\">\n                    <li class=\"ui-menu-separator ui-widget-content\" *ngIf=\"submenu.separator\" [ngClass]=\"{'ui-helper-hidden': submenu.visible === false}\"></li>\n                    <li class=\"ui-submenu-header ui-widget-header ui-corner-all\" [attr.data-automationid]=\"submenu.automationId\" *ngIf=\"!submenu.separator\" [ngClass]=\"{'ui-helper-hidden': submenu.visible === false}\">{{submenu.label}}</li>\n                    <ng-template ngFor let-item [ngForOf]=\"submenu.items\">\n                        <li class=\"ui-menu-separator ui-widget-content\" *ngIf=\"item.separator\" [ngClass]=\"{'ui-helper-hidden': (item.visible === false || submenu.visible === false)}\"></li>\n                        <li class=\"ui-menuitem ui-widget ui-corner-all\" *ngIf=\"!item.separator\" [pMenuItemContent]=\"item\" [ngClass]=\"{'ui-helper-hidden': (item.visible === false || submenu.visible === false)}\" [ngStyle]=\"item.style\" [class]=\"item.styleClass\"></li>\n                    </ng-template>\n                </ng-template>\n                <ng-template ngFor let-item [ngForOf]=\"model\" *ngIf=\"!hasSubMenu()\">\n                    <li class=\"ui-menu-separator ui-widget-content\" *ngIf=\"item.separator\" [ngClass]=\"{'ui-helper-hidden': item.visible === false}\"></li>\n                    <li class=\"ui-menuitem ui-widget ui-corner-all\" *ngIf=\"!item.separator\" [pMenuItemContent]=\"item\" [ngClass]=\"{'ui-helper-hidden': item.visible === false}\" [ngStyle]=\"item.style\" [class]=\"item.styleClass\"></li>\n                </ng-template>\n            </ul>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":53,"character":8},"arguments":["overlayAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":54,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":54,"character":26},"arguments":[{"transform":"translateY(5%)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":58,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":58,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":62,"character":12},"arguments":["void => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":62,"character":42},"arguments":["225ms ease-out"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":63,"character":12},"arguments":["visible => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":63,"character":42},"arguments":["195ms ease-in"]}]}]]}],"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":66,"character":16}]}]}],"members":{"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"popup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":5}}]}],"containerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":84,"character":5},"arguments":["container"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":98,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":98,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":98,"character":87}]}],"toggle":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"onOverlayAnimationStart":[{"__symbolic":"method"}],"appendOverlay":[{"__symbolic":"method"}],"restoreOverlayAppend":[{"__symbolic":"method"}],"moveOnTop":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method"}],"itemClick":[{"__symbolic":"method"}],"bindDocumentClickListener":[{"__symbolic":"method"}],"unbindDocumentClickListener":[{"__symbolic":"method"}],"bindDocumentResizeListener":[{"__symbolic":"method"}],"unbindDocumentResizeListener":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"hasSubMenu":[{"__symbolic":"method"}]}},"MenuModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":242,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":243,"character":14},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":243,"character":27}],"exports":[{"__symbolic":"reference","name":"Menu"},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":244,"character":19}],"declarations":[{"__symbolic":"reference","name":"Menu"},{"__symbolic":"reference","name":"MenuItemContent"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"MenuItemContent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"[pMenuItemContent]","template":"\n        <a *ngIf=\"!item.routerLink\" [href]=\"item.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" [attr.data-automationid]=\"item.automationId\" [attr.target]=\"item.target\" [attr.title]=\"item.title\" [attr.id]=\"item.id\"\n            [ngClass]=\"{'ui-state-disabled':item.disabled}\" (click)=\"menu.itemClick($event, item)\">\n            <span class=\"ui-menuitem-icon\" *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></span>\n            <span class=\"ui-menuitem-text\">{{item.label}}</span>\n        </a>\n        <a *ngIf=\"item.routerLink\" [routerLink]=\"item.routerLink\" [attr.data-automationid]=\"item.automationId\"  [queryParams]=\"item.queryParams\" [routerLinkActive]=\"'ui-state-active'\"\n            [routerLinkActiveOptions]=\"item.routerLinkActiveOptions||{exact:false}\" class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"item.target\" [attr.id]=\"item.id\"\n             [attr.title]=\"item.title\" [ngClass]=\"{'ui-state-disabled':item.disabled}\" (click)=\"menu.itemClick($event, item)\">\n            <span class=\"ui-menuitem-icon\" *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></span>\n            <span class=\"ui-menuitem-text\">{{item.label}}</span>\n        </a>\n    "}]}],"members":{"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5},"arguments":["pMenuItemContent"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":27,"character":17},"arguments":[{"__symbolic":"reference","name":"Menu"}]}]],"parameters":[{"__symbolic":"reference","name":"Menu"}]}]}},"Menu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":30,"character":1},"arguments":[{"selector":"p-menu","template":"\n        <div #container [ngClass]=\"{'ui-menu ui-widget ui-widget-content ui-corner-all': true, 'ui-menu-dynamic ui-shadow': popup}\"\n            [class]=\"styleClass\" [ngStyle]=\"style\" (click)=\"preventDocumentDefault=true\" *ngIf=\"!popup || visible\"\n            [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" [@.disabled]=\"popup !== true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\">\n            <ul>\n                <ng-template ngFor let-submenu [ngForOf]=\"model\" *ngIf=\"hasSubMenu()\">\n                    <li class=\"ui-menu-separator ui-widget-content\" *ngIf=\"submenu.separator\" [ngClass]=\"{'ui-helper-hidden': submenu.visible === false}\"></li>\n                    <li class=\"ui-submenu-header ui-widget-header ui-corner-all\" [attr.data-automationid]=\"submenu.automationId\" *ngIf=\"!submenu.separator\" [ngClass]=\"{'ui-helper-hidden': submenu.visible === false}\">{{submenu.label}}</li>\n                    <ng-template ngFor let-item [ngForOf]=\"submenu.items\">\n                        <li class=\"ui-menu-separator ui-widget-content\" *ngIf=\"item.separator\" [ngClass]=\"{'ui-helper-hidden': (item.visible === false || submenu.visible === false)}\"></li>\n                        <li class=\"ui-menuitem ui-widget ui-corner-all\" *ngIf=\"!item.separator\" [pMenuItemContent]=\"item\" [ngClass]=\"{'ui-helper-hidden': (item.visible === false || submenu.visible === false)}\" [ngStyle]=\"item.style\" [class]=\"item.styleClass\"></li>\n                    </ng-template>\n                </ng-template>\n                <ng-template ngFor let-item [ngForOf]=\"model\" *ngIf=\"!hasSubMenu()\">\n                    <li class=\"ui-menu-separator ui-widget-content\" *ngIf=\"item.separator\" [ngClass]=\"{'ui-helper-hidden': item.visible === false}\"></li>\n                    <li class=\"ui-menuitem ui-widget ui-corner-all\" *ngIf=\"!item.separator\" [pMenuItemContent]=\"item\" [ngClass]=\"{'ui-helper-hidden': item.visible === false}\" [ngStyle]=\"item.style\" [class]=\"item.styleClass\"></li>\n                </ng-template>\n            </ul>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":53,"character":8},"arguments":["overlayAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":54,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":54,"character":26},"arguments":[{"transform":"translateY(5%)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":58,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":58,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":62,"character":12},"arguments":["void => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":62,"character":42},"arguments":["{{showTransitionParams}}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":63,"character":12},"arguments":["visible => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":63,"character":42},"arguments":["{{hideTransitionParams}}"]}]}]]}],"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":66,"character":16}]}]}],"members":{"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"popup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":5}}]}],"showTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":5}}]}],"hideTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":5}}]}],"containerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":88,"character":5},"arguments":["container"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":102,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":102,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":102,"character":87}]}],"toggle":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"onOverlayAnimationStart":[{"__symbolic":"method"}],"appendOverlay":[{"__symbolic":"method"}],"restoreOverlayAppend":[{"__symbolic":"method"}],"moveOnTop":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method"}],"itemClick":[{"__symbolic":"method"}],"bindDocumentClickListener":[{"__symbolic":"method"}],"unbindDocumentClickListener":[{"__symbolic":"method"}],"bindDocumentResizeListener":[{"__symbolic":"method"}],"unbindDocumentResizeListener":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"hasSubMenu":[{"__symbolic":"method"}]}},"MenuModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":246,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":247,"character":14},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":247,"character":27}],"exports":[{"__symbolic":"reference","name":"Menu"},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":248,"character":19}],"declarations":[{"__symbolic":"reference","name":"Menu"},{"__symbolic":"reference","name":"MenuItemContent"}]}]}]}}}]

components/messages/messages.d.ts

@@ -13,2 +13,4 @@ import { OnInit, OnDestroy, EventEmitter } from '@angular/core';
     key: string;
+    showTransitionOptions: string;
+    hideTransitionOptions: string;
     valueChange: EventEmitter<Message[]>;
@@ -15,0 +17,0 @@ messageSubscription: Subscription;

components/messages/messages.js

@@ -24,2 +24,4 @@ "use strict";
         this.enableService = true;
+        this.showTransitionOptions = '300ms ease-out';
+        this.hideTransitionOptions = '250ms ease-in';
         this.valueChange = new core_1.EventEmitter();
@@ -125,2 +127,10 @@ }
     __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "showTransitionOptions", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "hideTransitionOptions", void 0);
+    __decorate([
         core_1.Output(),
@@ -132,3 +142,3 @@ __metadata("design:type", core_1.EventEmitter)
             selector: 'p-messages',
-            template: "\n        <div *ngIf=\"hasMessages()\" class=\"ui-messages ui-widget ui-corner-all\" style=\"display:block\"\n                    [ngClass]=\"{'ui-messages-info':(value[0].severity === 'info'),\n                    'ui-messages-warn':(value[0].severity === 'warn'),\n                    'ui-messages-error':(value[0].severity === 'error'),\n                    'ui-messages-success':(value[0].severity === 'success')}\"\n                    [ngStyle]=\"style\" [class]=\"styleClass\" [@messageAnimation]=\"'visible'\">\n            <a href=\"#\" class=\"ui-messages-close\" (click)=\"clear($event)\" *ngIf=\"closable\">\n                <i class=\"pi pi-times\"></i>\n            </a>\n            <span class=\"ui-messages-icon pi\" [ngClass]=\"icon\"></span>\n            <ul>\n                <li *ngFor=\"let msg of value\">\n                    <span *ngIf=\"msg.summary\" class=\"ui-messages-summary\" [innerHTML]=\"msg.summary\"></span>\n                    <span *ngIf=\"msg.detail\" class=\"ui-messages-detail\" [innerHTML]=\"msg.detail\"></span>\n                </li>\n            </ul>\n        </div>\n    ",
+            template: "\n        <div *ngIf=\"hasMessages()\" class=\"ui-messages ui-widget ui-corner-all\" style=\"display:block\"\n                    [ngClass]=\"{'ui-messages-info':(value[0].severity === 'info'),\n                    'ui-messages-warn':(value[0].severity === 'warn'),\n                    'ui-messages-error':(value[0].severity === 'error'),\n                    'ui-messages-success':(value[0].severity === 'success')}\"\n                    [ngStyle]=\"style\" [class]=\"styleClass\" [@messageAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\">\n            <a href=\"#\" class=\"ui-messages-close\" (click)=\"clear($event)\" *ngIf=\"closable\">\n                <i class=\"pi pi-times\"></i>\n            </a>\n            <span class=\"ui-messages-icon pi\" [ngClass]=\"icon\"></span>\n            <ul>\n                <li *ngFor=\"let msg of value\">\n                    <span *ngIf=\"msg.summary\" class=\"ui-messages-summary\" [innerHTML]=\"msg.summary\"></span>\n                    <span *ngIf=\"msg.detail\" class=\"ui-messages-detail\" [innerHTML]=\"msg.detail\"></span>\n                </li>\n            </ul>\n        </div>\n    ",
             animations: [
@@ -142,6 +152,6 @@ animations_1.trigger('messageAnimation', [
                         animations_1.style({ transform: 'translateY(-25%)', opacity: 0 }),
-                        animations_1.animate('300ms ease-out')
+                        animations_1.animate('{{showTransitionParams}}')
                     ]),
                     animations_1.transition('* => void', [
-                        animations_1.animate(('250ms ease-in'), animations_1.style({
+                        animations_1.animate(('{{hideTransitionParams}}'), animations_1.style({
                             opacity: 0,
@@ -148,0 +158,0 @@ transform: 'translateY(-25%)'

components/messages/messages.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"Messages":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"p-messages","template":"\n        <div *ngIf=\"hasMessages()\" class=\"ui-messages ui-widget ui-corner-all\" style=\"display:block\"\n                    [ngClass]=\"{'ui-messages-info':(value[0].severity === 'info'),\n                    'ui-messages-warn':(value[0].severity === 'warn'),\n                    'ui-messages-error':(value[0].severity === 'error'),\n                    'ui-messages-success':(value[0].severity === 'success')}\"\n                    [ngStyle]=\"style\" [class]=\"styleClass\" [@messageAnimation]=\"'visible'\">\n            <a href=\"#\" class=\"ui-messages-close\" (click)=\"clear($event)\" *ngIf=\"closable\">\n                <i class=\"pi pi-times\"></i>\n            </a>\n            <span class=\"ui-messages-icon pi\" [ngClass]=\"icon\"></span>\n            <ul>\n                <li *ngFor=\"let msg of value\">\n                    <span *ngIf=\"msg.summary\" class=\"ui-messages-summary\" [innerHTML]=\"msg.summary\"></span>\n                    <span *ngIf=\"msg.detail\" class=\"ui-messages-detail\" [innerHTML]=\"msg.detail\"></span>\n                </li>\n            </ul>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":29,"character":8},"arguments":["messageAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":30,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":30,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":34,"character":12},"arguments":["void => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":35,"character":16},"arguments":[{"transform":"translateY(-25%)","opacity":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":36,"character":16},"arguments":["300ms ease-out"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":38,"character":12},"arguments":["* => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":39,"character":16},"arguments":["250ms ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":39,"character":43},"arguments":[{"opacity":0,"transform":"translateY(-25%)"}]}]}]]}]]}]}]}],"members":{"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"closable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"enableService":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":61,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":67,"character":17}}]],"parameters":[{"__symbolic":"reference","module":"../common/messageservice","name":"MessageService","line":67,"character":51}]}],"ngOnInit":[{"__symbolic":"method"}],"hasMessages":[{"__symbolic":"method"}],"getSeverityClass":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"MessagesModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":152,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":153,"character":14}],"exports":[{"__symbolic":"reference","name":"Messages"}],"declarations":[{"__symbolic":"reference","name":"Messages"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"Messages":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"p-messages","template":"\n        <div *ngIf=\"hasMessages()\" class=\"ui-messages ui-widget ui-corner-all\" style=\"display:block\"\n                    [ngClass]=\"{'ui-messages-info':(value[0].severity === 'info'),\n                    'ui-messages-warn':(value[0].severity === 'warn'),\n                    'ui-messages-error':(value[0].severity === 'error'),\n                    'ui-messages-success':(value[0].severity === 'success')}\"\n                    [ngStyle]=\"style\" [class]=\"styleClass\" [@messageAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\">\n            <a href=\"#\" class=\"ui-messages-close\" (click)=\"clear($event)\" *ngIf=\"closable\">\n                <i class=\"pi pi-times\"></i>\n            </a>\n            <span class=\"ui-messages-icon pi\" [ngClass]=\"icon\"></span>\n            <ul>\n                <li *ngFor=\"let msg of value\">\n                    <span *ngIf=\"msg.summary\" class=\"ui-messages-summary\" [innerHTML]=\"msg.summary\"></span>\n                    <span *ngIf=\"msg.detail\" class=\"ui-messages-detail\" [innerHTML]=\"msg.detail\"></span>\n                </li>\n            </ul>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":29,"character":8},"arguments":["messageAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":30,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":30,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":34,"character":12},"arguments":["void => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":35,"character":16},"arguments":[{"transform":"translateY(-25%)","opacity":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":36,"character":16},"arguments":["{{showTransitionParams}}"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":38,"character":12},"arguments":["* => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":39,"character":16},"arguments":["{{hideTransitionParams}}",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":39,"character":54},"arguments":[{"opacity":0,"transform":"translateY(-25%)"}]}]}]]}]]}]}]}],"members":{"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"closable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"enableService":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":5}}]}],"showTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"hideTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":65,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":71,"character":17}}]],"parameters":[{"__symbolic":"reference","module":"../common/messageservice","name":"MessageService","line":71,"character":51}]}],"ngOnInit":[{"__symbolic":"method"}],"hasMessages":[{"__symbolic":"method"}],"getSeverityClass":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"MessagesModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":156,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":157,"character":14}],"exports":[{"__symbolic":"reference","name":"Messages"}],"declarations":[{"__symbolic":"reference","name":"Messages"}]}]}]}}}]

components/multiselect/multiselect.d.ts

@@ -15,2 +15,3 @@ import { ElementRef, OnInit, AfterViewInit, AfterContentInit, AfterViewChecked, OnDestroy, Renderer2, EventEmitter, ChangeDetectorRef, TemplateRef, QueryList } from '@angular/core';
     scrollHeight: string;
+    _defaultLabel: string;
     defaultLabel: string;
@@ -41,2 +42,4 @@ style: any;
     baseZIndex: number;
+    showTransitionOptions: string;
+    hideTransitionOptions: string;
     containerViewChild: ElementRef;
@@ -43,0 +46,0 @@ filterInputChild: ElementRef;

components/multiselect/multiselect.js

@@ -32,3 +32,3 @@ "use strict";
         this.scrollHeight = '200px';
-        this.defaultLabel = 'Choose';
+        this._defaultLabel = 'Choose';
         this.filter = true;
@@ -44,2 +44,4 @@ this.displaySelectedLabel = true;
         this.baseZIndex = 0;
+        this.showTransitionOptions = '225ms ease-out';
+        this.hideTransitionOptions = '195ms ease-in';
         this.onChange = new core_1.EventEmitter();
@@ -53,2 +55,13 @@ this.onFocus = new core_1.EventEmitter();
     }
+    Object.defineProperty(MultiSelect.prototype, "defaultLabel", {
+        get: function () {
+            return this._defaultLabel;
+        },
+        set: function (val) {
+            this._defaultLabel = val;
+            this.updateLabel();
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(MultiSelect.prototype, "options", {
@@ -397,4 +410,5 @@ get: function () {
         core_1.Input(),
-        __metadata("design:type", String)
-    ], MultiSelect.prototype, "defaultLabel", void 0);
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], MultiSelect.prototype, "defaultLabel", null);
     __decorate([
@@ -497,2 +511,10 @@ core_1.Input(),
     __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], MultiSelect.prototype, "showTransitionOptions", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], MultiSelect.prototype, "hideTransitionOptions", void 0);
+    __decorate([
         core_1.ViewChild('container'),
@@ -541,3 +563,3 @@ __metadata("design:type", core_1.ElementRef)
             selector: 'p-multiSelect',
-            template: "\n        <div #container [ngClass]=\"{'ui-multiselect ui-widget ui-state-default ui-corner-all':true,'ui-multiselect-open':overlayVisible,'ui-state-focus':focus,'ui-state-disabled': disabled}\" [ngStyle]=\"style\" [class]=\"styleClass\"\n            (click)=\"onMouseclick($event,in)\">\n            <div class=\"ui-helper-hidden-accessible\">\n                <input #in type=\"text\" readonly=\"readonly\" [attr.id]=\"inputId\" [attr.name]=\"name\" (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\" (keydown)=\"onInputKeydown($event)\">\n            </div>\n            <div class=\"ui-multiselect-label-container\" [title]=\"valuesAsString\">\n                <label class=\"ui-multiselect-label ui-corner-all\">\n                    <ng-container *ngIf=\"!selectedItemsTemplate\">{{valuesAsString}}</ng-container>\n                    <ng-container *ngTemplateOutlet=\"selectedItemsTemplate; context: {$implicit: value}\"></ng-container>\n                </label>\n            </div>\n            <div [ngClass]=\"{'ui-multiselect-trigger ui-state-default ui-corner-right':true}\">\n                <span class=\"ui-multiselect-trigger-icon ui-clickable\" [ngClass]=\"dropdownIcon\"></span>\n            </div>\n            <div *ngIf=\"overlayVisible\" [ngClass]=\"['ui-multiselect-panel ui-widget ui-widget-content ui-corner-all ui-shadow']\" [@overlayAnimation]=\"'visible'\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n                [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\" (click)=\"panelClick=true\">\n                <div class=\"ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix\" [ngClass]=\"{'ui-multiselect-header-no-toggleall': !showToggleAll}\" *ngIf=\"showHeader\">\n                    <div class=\"ui-chkbox ui-widget\" *ngIf=\"showToggleAll && !selectionLimit\">\n                        <div class=\"ui-helper-hidden-accessible\">\n                            <input #cb type=\"checkbox\" readonly=\"readonly\" [checked]=\"isAllChecked()\">\n                        </div>\n                        <div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\" [ngClass]=\"{'ui-state-active':isAllChecked()}\" (click)=\"toggleAll($event,cb)\">\n                            <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'pi pi-check':isAllChecked()}\"></span>\n                        </div>\n                    </div>\n                    <div class=\"ui-multiselect-filter-container\" *ngIf=\"filter\">\n                        <input #filterInput type=\"text\" role=\"textbox\" [value]=\"filterValue||''\" (input)=\"onFilter($event)\" class=\"ui-inputtext ui-widget ui-state-default ui-corner-all\" [attr.placeholder]=\"filterPlaceHolder\">\n                        <span class=\"ui-multiselect-filter-icon pi pi-search\"></span>\n                    </div>\n                    <a class=\"ui-multiselect-close ui-corner-all\" href=\"#\" (click)=\"close($event)\">\n                        <span class=\"pi pi-times\"></span>\n                    </a>\n                </div>\n                <div class=\"ui-multiselect-items-wrapper\" [style.max-height]=\"scrollHeight||'auto'\">\n                    <ul class=\"ui-multiselect-items ui-multiselect-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\">\n                        <li *ngFor=\"let option of options; let i = index\" class=\"ui-multiselect-item ui-corner-all\" (click)=\"onItemClick($event,option)\"\n                            [style.display]=\"isItemVisible(option) ? 'block' : 'none'\"\n                            [ngClass]=\"{'ui-state-highlight': isSelected(option.value), 'ui-state-disabled': option.disabled || (maxSelectionLimitReached && !isSelected(option.value))}\">\n                            <div class=\"ui-chkbox ui-widget\">\n                                <div class=\"ui-helper-hidden-accessible\">\n                                    <input #itemcb type=\"checkbox\" readonly=\"readonly\" [checked]=\"isSelected(option.value)\" (focus)=\"focusedItemCheckbox=itemcb\" (blur)=\"focusedItemCheckbox=null\"\n                                        [attr.aria-label]=\"option.label\" [disabled]=\"option.disabled || (maxSelectionLimitReached && !isSelected(option.value))\">\n                                </div>\n                                <div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\"\n                                    [ngClass]=\"{'ui-state-active': isSelected(option.value),\n                                                'ui-state-focus': (focusedItemCheckbox === itemcb)}\">\n                                    <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'pi pi-check':isSelected(option.value)}\"></span>\n                                </div>\n                            </div>\n                            <label *ngIf=\"!itemTemplate\">{{option.label}}</label>\n                            <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: option, index: i}\"></ng-container>\n                        </li>\n                    </ul>\n                </div>\n                <div class=\"ui-multiselect-footer ui-widget-content\" *ngIf=\"footerFacet\">\n                    <ng-content select=\"p-footer\"></ng-content>\n                </div>\n            </div>\n        </div>\n    ",
+            template: "\n        <div #container [ngClass]=\"{'ui-multiselect ui-widget ui-state-default ui-corner-all':true,'ui-multiselect-open':overlayVisible,'ui-state-focus':focus,'ui-state-disabled': disabled}\" [ngStyle]=\"style\" [class]=\"styleClass\"\n            (click)=\"onMouseclick($event,in)\">\n            <div class=\"ui-helper-hidden-accessible\">\n                <input #in type=\"text\" readonly=\"readonly\" [attr.id]=\"inputId\" [attr.name]=\"name\" (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\" (keydown)=\"onInputKeydown($event)\">\n            </div>\n            <div class=\"ui-multiselect-label-container\" [title]=\"valuesAsString\">\n                <label class=\"ui-multiselect-label ui-corner-all\">\n                    <ng-container *ngIf=\"!selectedItemsTemplate\">{{valuesAsString}}</ng-container>\n                    <ng-container *ngTemplateOutlet=\"selectedItemsTemplate; context: {$implicit: value}\"></ng-container>\n                </label>\n            </div>\n            <div [ngClass]=\"{'ui-multiselect-trigger ui-state-default ui-corner-right':true}\">\n                <span class=\"ui-multiselect-trigger-icon ui-clickable\" [ngClass]=\"dropdownIcon\"></span>\n            </div>\n            <div *ngIf=\"overlayVisible\" [ngClass]=\"['ui-multiselect-panel ui-widget ui-widget-content ui-corner-all ui-shadow']\" [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n                [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\" (click)=\"panelClick=true\">\n                <div class=\"ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix\" [ngClass]=\"{'ui-multiselect-header-no-toggleall': !showToggleAll}\" *ngIf=\"showHeader\">\n                    <div class=\"ui-chkbox ui-widget\" *ngIf=\"showToggleAll && !selectionLimit\">\n                        <div class=\"ui-helper-hidden-accessible\">\n                            <input #cb type=\"checkbox\" readonly=\"readonly\" [checked]=\"isAllChecked()\">\n                        </div>\n                        <div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\" [ngClass]=\"{'ui-state-active':isAllChecked()}\" (click)=\"toggleAll($event,cb)\">\n                            <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'pi pi-check':isAllChecked()}\"></span>\n                        </div>\n                    </div>\n                    <div class=\"ui-multiselect-filter-container\" *ngIf=\"filter\">\n                        <input #filterInput type=\"text\" role=\"textbox\" [value]=\"filterValue||''\" (input)=\"onFilter($event)\" class=\"ui-inputtext ui-widget ui-state-default ui-corner-all\" [attr.placeholder]=\"filterPlaceHolder\">\n                        <span class=\"ui-multiselect-filter-icon pi pi-search\"></span>\n                    </div>\n                    <a class=\"ui-multiselect-close ui-corner-all\" href=\"#\" (click)=\"close($event)\">\n                        <span class=\"pi pi-times\"></span>\n                    </a>\n                </div>\n                <div class=\"ui-multiselect-items-wrapper\" [style.max-height]=\"scrollHeight||'auto'\">\n                    <ul class=\"ui-multiselect-items ui-multiselect-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\">\n                        <li *ngFor=\"let option of options; let i = index\" class=\"ui-multiselect-item ui-corner-all\" (click)=\"onItemClick($event,option)\"\n                            [style.display]=\"isItemVisible(option) ? 'block' : 'none'\"\n                            [ngClass]=\"{'ui-state-highlight': isSelected(option.value), 'ui-state-disabled': option.disabled || (maxSelectionLimitReached && !isSelected(option.value))}\">\n                            <div class=\"ui-chkbox ui-widget\">\n                                <div class=\"ui-helper-hidden-accessible\">\n                                    <input #itemcb type=\"checkbox\" readonly=\"readonly\" [checked]=\"isSelected(option.value)\" (focus)=\"focusedItemCheckbox=itemcb\" (blur)=\"focusedItemCheckbox=null\"\n                                        [attr.aria-label]=\"option.label\" [disabled]=\"option.disabled || (maxSelectionLimitReached && !isSelected(option.value))\">\n                                </div>\n                                <div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\"\n                                    [ngClass]=\"{'ui-state-active': isSelected(option.value),\n                                                'ui-state-focus': (focusedItemCheckbox === itemcb)}\">\n                                    <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'pi pi-check':isSelected(option.value)}\"></span>\n                                </div>\n                            </div>\n                            <label *ngIf=\"!itemTemplate\">{{option.label}}</label>\n                            <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: option, index: i}\"></ng-container>\n                        </li>\n                    </ul>\n                </div>\n                <div class=\"ui-multiselect-footer ui-widget-content\" *ngIf=\"footerFacet\">\n                    <ng-content select=\"p-footer\"></ng-content>\n                </div>\n            </div>\n        </div>\n    ",
             animations: [
@@ -553,4 +575,4 @@ animations_1.trigger('overlayAnimation', [
                     })),
-                    animations_1.transition('void => visible', animations_1.animate('225ms ease-out')),
-                    animations_1.transition('visible => void', animations_1.animate('195ms ease-in'))
+                    animations_1.transition('void => visible', animations_1.animate('{{showTransitionParams}}')),
+                    animations_1.transition('visible => void', animations_1.animate('{{hideTransitionParams}}'))
                 ])
@@ -557,0 +579,0 @@ ],

components/multiselect/multiselect.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"MULTISELECT_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":11,"character":11},"useExisting":{"__symbolic":"reference","name":"MultiSelect"},"multi":true},"MultiSelect":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"p-multiSelect","template":"\n        <div #container [ngClass]=\"{'ui-multiselect ui-widget ui-state-default ui-corner-all':true,'ui-multiselect-open':overlayVisible,'ui-state-focus':focus,'ui-state-disabled': disabled}\" [ngStyle]=\"style\" [class]=\"styleClass\"\n            (click)=\"onMouseclick($event,in)\">\n            <div class=\"ui-helper-hidden-accessible\">\n                <input #in type=\"text\" readonly=\"readonly\" [attr.id]=\"inputId\" [attr.name]=\"name\" (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\" (keydown)=\"onInputKeydown($event)\">\n            </div>\n            <div class=\"ui-multiselect-label-container\" [title]=\"valuesAsString\">\n                <label class=\"ui-multiselect-label ui-corner-all\">\n                    <ng-container *ngIf=\"!selectedItemsTemplate\">{{valuesAsString}}</ng-container>\n                    <ng-container *ngTemplateOutlet=\"selectedItemsTemplate; context: {$implicit: value}\"></ng-container>\n                </label>\n            </div>\n            <div [ngClass]=\"{'ui-multiselect-trigger ui-state-default ui-corner-right':true}\">\n                <span class=\"ui-multiselect-trigger-icon ui-clickable\" [ngClass]=\"dropdownIcon\"></span>\n            </div>\n            <div *ngIf=\"overlayVisible\" [ngClass]=\"['ui-multiselect-panel ui-widget ui-widget-content ui-corner-all ui-shadow']\" [@overlayAnimation]=\"'visible'\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n                [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\" (click)=\"panelClick=true\">\n                <div class=\"ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix\" [ngClass]=\"{'ui-multiselect-header-no-toggleall': !showToggleAll}\" *ngIf=\"showHeader\">\n                    <div class=\"ui-chkbox ui-widget\" *ngIf=\"showToggleAll && !selectionLimit\">\n                        <div class=\"ui-helper-hidden-accessible\">\n                            <input #cb type=\"checkbox\" readonly=\"readonly\" [checked]=\"isAllChecked()\">\n                        </div>\n                        <div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\" [ngClass]=\"{'ui-state-active':isAllChecked()}\" (click)=\"toggleAll($event,cb)\">\n                            <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'pi pi-check':isAllChecked()}\"></span>\n                        </div>\n                    </div>\n                    <div class=\"ui-multiselect-filter-container\" *ngIf=\"filter\">\n                        <input #filterInput type=\"text\" role=\"textbox\" [value]=\"filterValue||''\" (input)=\"onFilter($event)\" class=\"ui-inputtext ui-widget ui-state-default ui-corner-all\" [attr.placeholder]=\"filterPlaceHolder\">\n                        <span class=\"ui-multiselect-filter-icon pi pi-search\"></span>\n                    </div>\n                    <a class=\"ui-multiselect-close ui-corner-all\" href=\"#\" (click)=\"close($event)\">\n                        <span class=\"pi pi-times\"></span>\n                    </a>\n                </div>\n                <div class=\"ui-multiselect-items-wrapper\" [style.max-height]=\"scrollHeight||'auto'\">\n                    <ul class=\"ui-multiselect-items ui-multiselect-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\">\n                        <li *ngFor=\"let option of options; let i = index\" class=\"ui-multiselect-item ui-corner-all\" (click)=\"onItemClick($event,option)\"\n                            [style.display]=\"isItemVisible(option) ? 'block' : 'none'\"\n                            [ngClass]=\"{'ui-state-highlight': isSelected(option.value), 'ui-state-disabled': option.disabled || (maxSelectionLimitReached && !isSelected(option.value))}\">\n                            <div class=\"ui-chkbox ui-widget\">\n                                <div class=\"ui-helper-hidden-accessible\">\n                                    <input #itemcb type=\"checkbox\" readonly=\"readonly\" [checked]=\"isSelected(option.value)\" (focus)=\"focusedItemCheckbox=itemcb\" (blur)=\"focusedItemCheckbox=null\"\n                                        [attr.aria-label]=\"option.label\" [disabled]=\"option.disabled || (maxSelectionLimitReached && !isSelected(option.value))\">\n                                </div>\n                                <div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\"\n                                    [ngClass]=\"{'ui-state-active': isSelected(option.value),\n                                                'ui-state-focus': (focusedItemCheckbox === itemcb)}\">\n                                    <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'pi pi-check':isSelected(option.value)}\"></span>\n                                </div>\n                            </div>\n                            <label *ngIf=\"!itemTemplate\">{{option.label}}</label>\n                            <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: option, index: i}\"></ng-container>\n                        </li>\n                    </ul>\n                </div>\n                <div class=\"ui-multiselect-footer ui-widget-content\" *ngIf=\"footerFacet\">\n                    <ng-content select=\"p-footer\"></ng-content>\n                </div>\n            </div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":80,"character":8},"arguments":["overlayAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":81,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":81,"character":26},"arguments":[{"transform":"translateY(5%)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":85,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":85,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":89,"character":12},"arguments":["void => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":89,"character":42},"arguments":["225ms ease-out"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":90,"character":12},"arguments":["visible => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":90,"character":42},"arguments":["195ms ease-in"]}]}]]}],"host":{"[class.ui-inputwrapper-filled]":"filled","[class.ui-inputwrapper-focus]":"focus","$quoted$":["[class.ui-inputwrapper-filled]","[class.ui-inputwrapper-focus]"]},"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":97,"character":16},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":97,"character":27},{"__symbolic":"reference","name":"MULTISELECT_VALUE_ACCESSOR"}]}]}],"members":{"scrollHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":5}}]}],"defaultLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":5}}]}],"panelStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":5}}]}],"panelStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}],"inputId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":115,"character":5}}]}],"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":5}}]}],"filterPlaceHolder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":5}}]}],"overlayVisible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":121,"character":5}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":5}}]}],"dataKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":5}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":5}}]}],"displaySelectedLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":131,"character":5}}]}],"maxSelectedLabels":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":5}}]}],"selectionLimit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":135,"character":5}}]}],"selectedItemsLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":5}}]}],"showToggleAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":139,"character":5}}]}],"resetFilterOnHide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":5}}]}],"dropdownIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":143,"character":5}}]}],"optionLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":145,"character":5}}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":147,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":149,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":151,"character":5}}]}],"containerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":153,"character":5},"arguments":["container"]}]}],"filterInputChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":155,"character":5},"arguments":["filterInput"]}]}],"footerFacet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":157,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"Footer","line":157,"character":18}]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":159,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":159,"character":21}]}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":161,"character":5}}]}],"onFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":163,"character":5}}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":165,"character":5}}]}],"onPanelShow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":167,"character":5}}]}],"onPanelHide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":169,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":207,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":207,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":207,"character":87},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":207,"character":118},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":207,"character":143}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":209,"character":5}}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"updateFilledState":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"findSelectionIndex":[{"__symbolic":"method"}],"toggleAll":[{"__symbolic":"method"}],"isAllChecked":[{"__symbolic":"method"}],"getEnabledOptionCount":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"onOverlayAnimationStart":[{"__symbolic":"method"}],"appendOverlay":[{"__symbolic":"method"}],"restoreOverlayAppend":[{"__symbolic":"method"}],"alignOverlay":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"onMouseclick":[{"__symbolic":"method"}],"onInputFocus":[{"__symbolic":"method"}],"onInputBlur":[{"__symbolic":"method"}],"onInputKeydown":[{"__symbolic":"method"}],"updateLabel":[{"__symbolic":"method"}],"findLabelByValue":[{"__symbolic":"method"}],"onFilter":[{"__symbolic":"method"}],"isItemVisible":[{"__symbolic":"method"}],"getVisibleOptions":[{"__symbolic":"method"}],"bindDocumentClickListener":[{"__symbolic":"method"}],"unbindDocumentClickListener":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"MultiSelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":600,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":601,"character":14},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":601,"character":27}],"exports":[{"__symbolic":"reference","name":"MultiSelect"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":602,"character":26}],"declarations":[{"__symbolic":"reference","name":"MultiSelect"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"MULTISELECT_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":11,"character":11},"useExisting":{"__symbolic":"reference","name":"MultiSelect"},"multi":true},"MultiSelect":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"p-multiSelect","template":"\n        <div #container [ngClass]=\"{'ui-multiselect ui-widget ui-state-default ui-corner-all':true,'ui-multiselect-open':overlayVisible,'ui-state-focus':focus,'ui-state-disabled': disabled}\" [ngStyle]=\"style\" [class]=\"styleClass\"\n            (click)=\"onMouseclick($event,in)\">\n            <div class=\"ui-helper-hidden-accessible\">\n                <input #in type=\"text\" readonly=\"readonly\" [attr.id]=\"inputId\" [attr.name]=\"name\" (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\" (keydown)=\"onInputKeydown($event)\">\n            </div>\n            <div class=\"ui-multiselect-label-container\" [title]=\"valuesAsString\">\n                <label class=\"ui-multiselect-label ui-corner-all\">\n                    <ng-container *ngIf=\"!selectedItemsTemplate\">{{valuesAsString}}</ng-container>\n                    <ng-container *ngTemplateOutlet=\"selectedItemsTemplate; context: {$implicit: value}\"></ng-container>\n                </label>\n            </div>\n            <div [ngClass]=\"{'ui-multiselect-trigger ui-state-default ui-corner-right':true}\">\n                <span class=\"ui-multiselect-trigger-icon ui-clickable\" [ngClass]=\"dropdownIcon\"></span>\n            </div>\n            <div *ngIf=\"overlayVisible\" [ngClass]=\"['ui-multiselect-panel ui-widget ui-widget-content ui-corner-all ui-shadow']\" [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n                [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\" (click)=\"panelClick=true\">\n                <div class=\"ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix\" [ngClass]=\"{'ui-multiselect-header-no-toggleall': !showToggleAll}\" *ngIf=\"showHeader\">\n                    <div class=\"ui-chkbox ui-widget\" *ngIf=\"showToggleAll && !selectionLimit\">\n                        <div class=\"ui-helper-hidden-accessible\">\n                            <input #cb type=\"checkbox\" readonly=\"readonly\" [checked]=\"isAllChecked()\">\n                        </div>\n                        <div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\" [ngClass]=\"{'ui-state-active':isAllChecked()}\" (click)=\"toggleAll($event,cb)\">\n                            <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'pi pi-check':isAllChecked()}\"></span>\n                        </div>\n                    </div>\n                    <div class=\"ui-multiselect-filter-container\" *ngIf=\"filter\">\n                        <input #filterInput type=\"text\" role=\"textbox\" [value]=\"filterValue||''\" (input)=\"onFilter($event)\" class=\"ui-inputtext ui-widget ui-state-default ui-corner-all\" [attr.placeholder]=\"filterPlaceHolder\">\n                        <span class=\"ui-multiselect-filter-icon pi pi-search\"></span>\n                    </div>\n                    <a class=\"ui-multiselect-close ui-corner-all\" href=\"#\" (click)=\"close($event)\">\n                        <span class=\"pi pi-times\"></span>\n                    </a>\n                </div>\n                <div class=\"ui-multiselect-items-wrapper\" [style.max-height]=\"scrollHeight||'auto'\">\n                    <ul class=\"ui-multiselect-items ui-multiselect-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\">\n                        <li *ngFor=\"let option of options; let i = index\" class=\"ui-multiselect-item ui-corner-all\" (click)=\"onItemClick($event,option)\"\n                            [style.display]=\"isItemVisible(option) ? 'block' : 'none'\"\n                            [ngClass]=\"{'ui-state-highlight': isSelected(option.value), 'ui-state-disabled': option.disabled || (maxSelectionLimitReached && !isSelected(option.value))}\">\n                            <div class=\"ui-chkbox ui-widget\">\n                                <div class=\"ui-helper-hidden-accessible\">\n                                    <input #itemcb type=\"checkbox\" readonly=\"readonly\" [checked]=\"isSelected(option.value)\" (focus)=\"focusedItemCheckbox=itemcb\" (blur)=\"focusedItemCheckbox=null\"\n                                        [attr.aria-label]=\"option.label\" [disabled]=\"option.disabled || (maxSelectionLimitReached && !isSelected(option.value))\">\n                                </div>\n                                <div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\"\n                                    [ngClass]=\"{'ui-state-active': isSelected(option.value),\n                                                'ui-state-focus': (focusedItemCheckbox === itemcb)}\">\n                                    <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'pi pi-check':isSelected(option.value)}\"></span>\n                                </div>\n                            </div>\n                            <label *ngIf=\"!itemTemplate\">{{option.label}}</label>\n                            <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: option, index: i}\"></ng-container>\n                        </li>\n                    </ul>\n                </div>\n                <div class=\"ui-multiselect-footer ui-widget-content\" *ngIf=\"footerFacet\">\n                    <ng-content select=\"p-footer\"></ng-content>\n                </div>\n            </div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":80,"character":8},"arguments":["overlayAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":81,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":81,"character":26},"arguments":[{"transform":"translateY(5%)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":85,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":85,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":89,"character":12},"arguments":["void => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":89,"character":42},"arguments":["{{showTransitionParams}}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":90,"character":12},"arguments":["visible => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":90,"character":42},"arguments":["{{hideTransitionParams}}"]}]}]]}],"host":{"[class.ui-inputwrapper-filled]":"filled","[class.ui-inputwrapper-focus]":"focus","$quoted$":["[class.ui-inputwrapper-filled]","[class.ui-inputwrapper-focus]"]},"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":97,"character":16},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":97,"character":27},{"__symbolic":"reference","name":"MULTISELECT_VALUE_ACCESSOR"}]}]}],"members":{"scrollHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":5}}]}],"defaultLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":116,"character":5}}]}],"panelStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":5}}]}],"panelStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":5}}]}],"inputId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":5}}]}],"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":5}}]}],"filterPlaceHolder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":5}}]}],"overlayVisible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":130,"character":5}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":5}}]}],"dataKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":136,"character":5}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":5}}]}],"displaySelectedLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":140,"character":5}}]}],"maxSelectedLabels":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"character":5}}]}],"selectionLimit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":144,"character":5}}]}],"selectedItemsLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":146,"character":5}}]}],"showToggleAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":148,"character":5}}]}],"resetFilterOnHide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":150,"character":5}}]}],"dropdownIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":152,"character":5}}]}],"optionLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":154,"character":5}}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":156,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":158,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":160,"character":5}}]}],"showTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":162,"character":5}}]}],"hideTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":164,"character":5}}]}],"containerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":166,"character":5},"arguments":["container"]}]}],"filterInputChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":168,"character":5},"arguments":["filterInput"]}]}],"footerFacet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":170,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"Footer","line":170,"character":18}]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":172,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":172,"character":21}]}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":174,"character":5}}]}],"onFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":176,"character":5}}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":178,"character":5}}]}],"onPanelShow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":180,"character":5}}]}],"onPanelHide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":182,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":220,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":220,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":220,"character":87},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":220,"character":118},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":220,"character":143}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":222,"character":5}}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"updateFilledState":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"findSelectionIndex":[{"__symbolic":"method"}],"toggleAll":[{"__symbolic":"method"}],"isAllChecked":[{"__symbolic":"method"}],"getEnabledOptionCount":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"onOverlayAnimationStart":[{"__symbolic":"method"}],"appendOverlay":[{"__symbolic":"method"}],"restoreOverlayAppend":[{"__symbolic":"method"}],"alignOverlay":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"onMouseclick":[{"__symbolic":"method"}],"onInputFocus":[{"__symbolic":"method"}],"onInputBlur":[{"__symbolic":"method"}],"onInputKeydown":[{"__symbolic":"method"}],"updateLabel":[{"__symbolic":"method"}],"findLabelByValue":[{"__symbolic":"method"}],"onFilter":[{"__symbolic":"method"}],"isItemVisible":[{"__symbolic":"method"}],"getVisibleOptions":[{"__symbolic":"method"}],"bindDocumentClickListener":[{"__symbolic":"method"}],"unbindDocumentClickListener":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"MultiSelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":613,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":614,"character":14},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":614,"character":27}],"exports":[{"__symbolic":"reference","name":"MultiSelect"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":615,"character":26}],"declarations":[{"__symbolic":"reference","name":"MultiSelect"}]}]}]}}}]

components/orderlist/orderlist.d.ts

@@ -18,2 +18,4 @@ import { ElementRef, AfterViewChecked, AfterContentInit, QueryList, TemplateRef, EventEmitter } from '@angular/core';
     dragdropScope: string;
+    controlsPosition: string;
+    selectionChange: EventEmitter<any>;
     trackBy: Function;
@@ -26,6 +28,5 @@ onReorder: EventEmitter<any>;
     itemTemplate: TemplateRef<any>;
-    selectedItems: any[];
+    _selection: any[];
     movedUp: boolean;
     movedDown: boolean;
-    listContainer: any;
     itemTouched: boolean;
@@ -39,3 +40,3 @@ draggedItemIndex: number;
     constructor(el: ElementRef, domHandler: DomHandler, objectUtils: ObjectUtils);
-    ngAfterViewInit(): void;
+    selection: any[];
     ngAfterContentInit(): void;
@@ -45,3 +46,2 @@ ngAfterViewChecked(): void;
     onItemClick(event: any, item: any, index: any): void;
-    selectItem(item: any, index: any): void;
     onFilterKeyup(event: any): void;
@@ -52,6 +52,6 @@ filter(): void;
     isSelected(item: any): boolean;
-    moveUp(event: any, listElement: any): void;
-    moveTop(event: any, listElement: any): void;
-    moveDown(event: any, listElement: any): void;
-    moveBottom(event: any, listElement: any): void;
+    moveUp(event: any): void;
+    moveTop(event: any): void;
+    moveDown(event: any): void;
+    moveBottom(event: any): void;
     onDragStart(event: DragEvent, index: number): void;
@@ -58,0 +58,0 @@ onDragOver(event: DragEvent, index: number): void;

components/orderlist/orderlist.js

@@ -24,2 +24,4 @@ "use strict";
         this.metaKeySelection = true;
+        this.controlsPosition = 'left';
+        this.selectionChange = new core_1.EventEmitter();
         this.trackBy = function (index, item) { return item; };
@@ -30,5 +32,12 @@ this.onReorder = new core_1.EventEmitter();
     }
-    OrderList.prototype.ngAfterViewInit = function () {
-        this.listContainer = this.domHandler.findSingle(this.el.nativeElement, 'ul.ui-orderlist-list');
-    };
+    Object.defineProperty(OrderList.prototype, "selection", {
+        get: function () {
+            return this._selection;
+        },
+        set: function (val) {
+            this._selection = val;
+        },
+        enumerable: true,
+        configurable: true
+    });
     OrderList.prototype.ngAfterContentInit = function () {
@@ -49,3 +58,3 @@ var _this = this;
         if (this.movedUp || this.movedDown) {
-            var listItems = this.domHandler.find(this.listContainer, 'li.ui-state-highlight');
+            var listItems = this.domHandler.find(this.listViewChild.nativeElement, 'li.ui-state-highlight');
             var listItem = void 0;
@@ -57,3 +66,3 @@ if (listItems.length > 0) {
                     listItem = listItems[listItems.length - 1];
-                this.domHandler.scrollInView(this.listContainer, listItem);
+                this.domHandler.scrollInView(this.listViewChild.nativeElement, listItem);
             }
@@ -78,3 +87,4 @@ this.movedUp = false;
     OrderList.prototype.onItemClick = function (event, item, index) {
-        var selectedIndex = this.objectUtils.findIndexInList(item, this.selectedItems);
+        this.itemTouched = false;
+        var selectedIndex = this.objectUtils.findIndexInList(item, this.selection);
         var selected = (selectedIndex != -1);
@@ -85,7 +95,7 @@ var metaSelection = this.itemTouched ? false : this.metaKeySelection;
             if (selected && metaKey) {
-                this.selectedItems.splice(selectedIndex, 1);
+                this._selection = this._selection.filter(function (val, index) { return index !== selectedIndex; });
             }
             else {
-                this.selectedItems = (metaKey) ? this.selectedItems || [] : [];
-                this.selectItem(item, index);
+                this._selection = (metaKey) ? this._selection ? this._selection.slice() : [] : [];
+                this.objectUtils.insertIntoOrderedArray(item, index, this._selection, this.value);
             }
@@ -95,16 +105,14 @@ }
             if (selected) {
-                this.selectedItems.splice(selectedIndex, 1);
+                this._selection = this._selection.filter(function (val, index) { return index !== selectedIndex; });
             }
             else {
-                this.selectedItems = this.selectedItems || [];
-                this.selectItem(item, index);
+                this._selection = this._selection ? this._selection.slice() : [];
+                this.objectUtils.insertIntoOrderedArray(item, index, this._selection, this.value);
             }
         }
-        this.onSelectionChange.emit({ originalEvent: event, value: this.selectedItems });
-        this.itemTouched = false;
+        //binding
+        this.selectionChange.emit(this._selection);
+        //event
+        this.onSelectionChange.emit({ originalEvent: event, value: this._selection });
     };
-    OrderList.prototype.selectItem = function (item, index) {
-        this.selectedItems = this.selectedItems || [];
-        this.objectUtils.insertIntoOrderedArray(item, index, this.selectedItems, this.value);
-    };
     OrderList.prototype.onFilterKeyup = function (event) {
@@ -138,8 +146,8 @@ this.filterValue = event.target.value.trim().toLowerCase();
     OrderList.prototype.isSelected = function (item) {
-        return this.objectUtils.findIndexInList(item, this.selectedItems) != -1;
+        return this.objectUtils.findIndexInList(item, this.selection) != -1;
     };
-    OrderList.prototype.moveUp = function (event, listElement) {
-        if (this.selectedItems) {
-            for (var i = 0; i < this.selectedItems.length; i++) {
-                var selectedItem = this.selectedItems[i];
+    OrderList.prototype.moveUp = function (event) {
+        if (this.selection) {
+            for (var i = 0; i < this.selection.length; i++) {
+                var selectedItem = this.selection[i];
                 var selectedItemIndex = this.objectUtils.findIndexInList(selectedItem, this.value);
@@ -160,6 +168,6 @@ if (selectedItemIndex != 0) {
     };
-    OrderList.prototype.moveTop = function (event, listElement) {
-        if (this.selectedItems) {
-            for (var i = this.selectedItems.length - 1; i >= 0; i--) {
-                var selectedItem = this.selectedItems[i];
+    OrderList.prototype.moveTop = function (event) {
+        if (this.selection) {
+            for (var i = this.selection.length - 1; i >= 0; i--) {
+                var selectedItem = this.selection[i];
                 var selectedItemIndex = this.objectUtils.findIndexInList(selectedItem, this.value);
@@ -169,3 +177,2 @@ if (selectedItemIndex != 0) {
                     this.value.unshift(movedItem);
-                    listElement.scrollTop = 0;
                 }
@@ -177,9 +184,9 @@ else {
             this.onReorder.emit(event);
-            listElement.scrollTop = 0;
+            this.listViewChild.nativeElement.scrollTop = 0;
         }
     };
-    OrderList.prototype.moveDown = function (event, listElement) {
-        if (this.selectedItems) {
-            for (var i = this.selectedItems.length - 1; i >= 0; i--) {
-                var selectedItem = this.selectedItems[i];
+    OrderList.prototype.moveDown = function (event) {
+        if (this.selection) {
+            for (var i = this.selection.length - 1; i >= 0; i--) {
+                var selectedItem = this.selection[i];
                 var selectedItemIndex = this.objectUtils.findIndexInList(selectedItem, this.value);
@@ -200,6 +207,6 @@ if (selectedItemIndex != (this.value.length - 1)) {
     };
-    OrderList.prototype.moveBottom = function (event, listElement) {
-        if (this.selectedItems) {
-            for (var i = 0; i < this.selectedItems.length; i++) {
-                var selectedItem = this.selectedItems[i];
+    OrderList.prototype.moveBottom = function (event) {
+        if (this.selection) {
+            for (var i = 0; i < this.selection.length; i++) {
+                var selectedItem = this.selection[i];
                 var selectedItemIndex = this.objectUtils.findIndexInList(selectedItem, this.value);
@@ -215,3 +222,3 @@ if (selectedItemIndex != (this.value.length - 1)) {
             this.onReorder.emit(event);
-            listElement.scrollTop = listElement.scrollHeight;
+            this.listViewChild.nativeElement.scrollTop = this.listViewChild.nativeElement.scrollHeight;
         }
@@ -298,2 +305,10 @@ };
         core_1.Input(),
+        __metadata("design:type", String)
+    ], OrderList.prototype, "controlsPosition", void 0);
+    __decorate([
+        core_1.Output(),
+        __metadata("design:type", core_1.EventEmitter)
+    ], OrderList.prototype, "selectionChange", void 0);
+    __decorate([
+        core_1.Input(),
         __metadata("design:type", Function)
@@ -325,2 +340,7 @@ ], OrderList.prototype, "trackBy", void 0);
         __metadata("design:paramtypes", [Array])
+    ], OrderList.prototype, "selection", null);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", Array),
+        __metadata("design:paramtypes", [Array])
     ], OrderList.prototype, "value", null);
@@ -330,3 +350,3 @@ OrderList = __decorate([
             selector: 'p-orderList',
-            template: "\n        <div [ngClass]=\"{'ui-orderlist ui-widget':true,'ui-orderlist-responsive':responsive}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-orderlist-controls\">\n                <button type=\"button\" pButton icon=\"pi pi-angle-up\" (click)=\"moveUp($event,listelement)\"></button>\n                <button type=\"button\" pButton icon=\"pi pi-angle-double-up\" (click)=\"moveTop($event,listelement)\"></button>\n                <button type=\"button\" pButton icon=\"pi pi-angle-down\" (click)=\"moveDown($event,listelement)\"></button>\n                <button type=\"button\" pButton icon=\"pi pi-angle-double-down\" (click)=\"moveBottom($event,listelement)\"></button>\n            </div>\n            <div class=\"ui-orderlist-list-container\">\n                <div class=\"ui-orderlist-caption ui-widget-header ui-corner-top\" *ngIf=\"header\">{{header}}</div>\n                <div class=\"ui-orderlist-filter-container ui-widget-content\" *ngIf=\"filterBy\">\n                    <input type=\"text\" role=\"textbox\" (keyup)=\"onFilterKeyup($event)\" class=\"ui-inputtext ui-widget ui-state-default ui-corner-all\" [attr.placeholder]=\"filterPlaceholder\">\n                    <span class=\"ui-orderlist-filter-icon pi pi-search\"></span>\n                </div>\n                <ul #listelement class=\"ui-widget-content ui-orderlist-list ui-corner-bottom\" [ngStyle]=\"listStyle\" (dragover)=\"onListMouseMove($event)\">\n                    <ng-template ngFor [ngForTrackBy]=\"trackBy\" let-item [ngForOf]=\"value\" let-i=\"index\" let-l=\"last\">\n                        <li class=\"ui-orderlist-droppoint\" *ngIf=\"dragdrop && isItemVisible(item)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" (dragleave)=\"onDragLeave($event)\" \n                            [ngClass]=\"{'ui-state-highlight': (i === dragOverItemIndex)}\"></li>\n                        <li class=\"ui-orderlist-item\"\n                            [ngClass]=\"{'ui-state-highlight':isSelected(item)}\" \n                            (click)=\"onItemClick($event,item,i)\" (touchend)=\"onItemTouchEnd($event)\"\n                            [style.display]=\"isItemVisible(item) ? 'block' : 'none'\"\n                            [draggable]=\"dragdrop\" (dragstart)=\"onDragStart($event, i)\" (dragend)=\"onDragEnd($event)\">\n                            <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n                        </li>\n                        <li class=\"ui-orderlist-droppoint\" *ngIf=\"dragdrop && l\" (dragover)=\"onDragOver($event, i + 1)\" (drop)=\"onDrop($event, i + 1)\" (dragleave)=\"onDragLeave($event)\" \n                            [ngClass]=\"{'ui-state-highlight': (i + 1 === dragOverItemIndex)}\"></li>\n                    </ng-template>\n                </ul>\n            </div>\n        </div>\n    ",
+            template: "\n        <div [ngClass]=\"{'ui-orderlist ui-widget': true, 'ui-orderlist-controls-left': controlsPosition === 'left',\n                    'ui-orderlist-controls-right': controlsPosition === 'right'}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-orderlist-controls\">\n                <button type=\"button\" pButton icon=\"pi pi-angle-up\" (click)=\"moveUp($event)\"></button>\n                <button type=\"button\" pButton icon=\"pi pi-angle-double-up\" (click)=\"moveTop($event)\"></button>\n                <button type=\"button\" pButton icon=\"pi pi-angle-down\" (click)=\"moveDown($event)\"></button>\n                <button type=\"button\" pButton icon=\"pi pi-angle-double-down\" (click)=\"moveBottom($event)\"></button>\n            </div>\n            <div class=\"ui-orderlist-list-container\">\n                <div class=\"ui-orderlist-caption ui-widget-header ui-corner-top\" *ngIf=\"header\">{{header}}</div>\n                <div class=\"ui-orderlist-filter-container ui-widget-content\" *ngIf=\"filterBy\">\n                    <input type=\"text\" role=\"textbox\" (keyup)=\"onFilterKeyup($event)\" class=\"ui-inputtext ui-widget ui-state-default ui-corner-all\" [attr.placeholder]=\"filterPlaceholder\">\n                    <span class=\"ui-orderlist-filter-icon pi pi-search\"></span>\n                </div>\n                <ul #listelement class=\"ui-widget-content ui-orderlist-list ui-corner-bottom\" [ngStyle]=\"listStyle\" (dragover)=\"onListMouseMove($event)\">\n                    <ng-template ngFor [ngForTrackBy]=\"trackBy\" let-item [ngForOf]=\"value\" let-i=\"index\" let-l=\"last\">\n                        <li class=\"ui-orderlist-droppoint\" *ngIf=\"dragdrop && isItemVisible(item)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" (dragleave)=\"onDragLeave($event)\" \n                            [ngClass]=\"{'ui-state-highlight': (i === dragOverItemIndex)}\"></li>\n                        <li class=\"ui-orderlist-item\"\n                            [ngClass]=\"{'ui-state-highlight':isSelected(item)}\" \n                            (click)=\"onItemClick($event,item,i)\" (touchend)=\"onItemTouchEnd($event)\"\n                            [style.display]=\"isItemVisible(item) ? 'block' : 'none'\"\n                            [draggable]=\"dragdrop\" (dragstart)=\"onDragStart($event, i)\" (dragend)=\"onDragEnd($event)\">\n                            <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n                        </li>\n                        <li class=\"ui-orderlist-droppoint\" *ngIf=\"dragdrop && l\" (dragover)=\"onDragOver($event, i + 1)\" (drop)=\"onDrop($event, i + 1)\" (dragleave)=\"onDragLeave($event)\" \n                            [ngClass]=\"{'ui-state-highlight': (i + 1 === dragOverItemIndex)}\"></li>\n                    </ng-template>\n                </ul>\n            </div>\n        </div>\n    ",
             providers: [domhandler_1.DomHandler, objectutils_1.ObjectUtils]
@@ -333,0 +353,0 @@ }),

components/orderlist/orderlist.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"OrderList":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"p-orderList","template":"\n        <div [ngClass]=\"{'ui-orderlist ui-widget':true,'ui-orderlist-responsive':responsive}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-orderlist-controls\">\n                <button type=\"button\" pButton icon=\"pi pi-angle-up\" (click)=\"moveUp($event,listelement)\"></button>\n                <button type=\"button\" pButton icon=\"pi pi-angle-double-up\" (click)=\"moveTop($event,listelement)\"></button>\n                <button type=\"button\" pButton icon=\"pi pi-angle-down\" (click)=\"moveDown($event,listelement)\"></button>\n                <button type=\"button\" pButton icon=\"pi pi-angle-double-down\" (click)=\"moveBottom($event,listelement)\"></button>\n            </div>\n            <div class=\"ui-orderlist-list-container\">\n                <div class=\"ui-orderlist-caption ui-widget-header ui-corner-top\" *ngIf=\"header\">{{header}}</div>\n                <div class=\"ui-orderlist-filter-container ui-widget-content\" *ngIf=\"filterBy\">\n                    <input type=\"text\" role=\"textbox\" (keyup)=\"onFilterKeyup($event)\" class=\"ui-inputtext ui-widget ui-state-default ui-corner-all\" [attr.placeholder]=\"filterPlaceholder\">\n                    <span class=\"ui-orderlist-filter-icon pi pi-search\"></span>\n                </div>\n                <ul #listelement class=\"ui-widget-content ui-orderlist-list ui-corner-bottom\" [ngStyle]=\"listStyle\" (dragover)=\"onListMouseMove($event)\">\n                    <ng-template ngFor [ngForTrackBy]=\"trackBy\" let-item [ngForOf]=\"value\" let-i=\"index\" let-l=\"last\">\n                        <li class=\"ui-orderlist-droppoint\" *ngIf=\"dragdrop && isItemVisible(item)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" (dragleave)=\"onDragLeave($event)\" \n                            [ngClass]=\"{'ui-state-highlight': (i === dragOverItemIndex)}\"></li>\n                        <li class=\"ui-orderlist-item\"\n                            [ngClass]=\"{'ui-state-highlight':isSelected(item)}\" \n                            (click)=\"onItemClick($event,item,i)\" (touchend)=\"onItemTouchEnd($event)\"\n                            [style.display]=\"isItemVisible(item) ? 'block' : 'none'\"\n                            [draggable]=\"dragdrop\" (dragstart)=\"onDragStart($event, i)\" (dragend)=\"onDragEnd($event)\">\n                            <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n                        </li>\n                        <li class=\"ui-orderlist-droppoint\" *ngIf=\"dragdrop && l\" (dragover)=\"onDragOver($event, i + 1)\" (drop)=\"onDrop($event, i + 1)\" (dragleave)=\"onDragLeave($event)\" \n                            [ngClass]=\"{'ui-state-highlight': (i + 1 === dragOverItemIndex)}\"></li>\n                    </ng-template>\n                </ul>\n            </div>\n        </div>\n    ","providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":41,"character":16},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":41,"character":27}]}]}],"members":{"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"listStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"responsive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"filterBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"filterPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"metaKeySelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":5}}]}],"dragdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"dragdropScope":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"trackBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":5}}]}],"onReorder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":67,"character":5}}]}],"onSelectionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":69,"character":5}}]}],"onFilterEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":71,"character":5}}]}],"listViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":73,"character":5},"arguments":["listelement"]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":75,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":75,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":101,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":101,"character":58},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":101,"character":90}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":143,"character":5}}]}],"onItemClick":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"onFilterKeyup":[{"__symbolic":"method"}],"filter":[{"__symbolic":"method"}],"isItemVisible":[{"__symbolic":"method"}],"onItemTouchEnd":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"moveUp":[{"__symbolic":"method"}],"moveTop":[{"__symbolic":"method"}],"moveDown":[{"__symbolic":"method"}],"moveBottom":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method"}],"onDragOver":[{"__symbolic":"method"}],"onDragLeave":[{"__symbolic":"method"}],"onDrop":[{"__symbolic":"method"}],"onDragEnd":[{"__symbolic":"method"}],"onListMouseMove":[{"__symbolic":"method"}]}},"OrderListModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":350,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":351,"character":14},{"__symbolic":"reference","module":"../button/button","name":"ButtonModule","line":351,"character":27},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":351,"character":40}],"exports":[{"__symbolic":"reference","name":"OrderList"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":352,"character":24}],"declarations":[{"__symbolic":"reference","name":"OrderList"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"OrderList":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"p-orderList","template":"\n        <div [ngClass]=\"{'ui-orderlist ui-widget': true, 'ui-orderlist-controls-left': controlsPosition === 'left',\n                    'ui-orderlist-controls-right': controlsPosition === 'right'}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-orderlist-controls\">\n                <button type=\"button\" pButton icon=\"pi pi-angle-up\" (click)=\"moveUp($event)\"></button>\n                <button type=\"button\" pButton icon=\"pi pi-angle-double-up\" (click)=\"moveTop($event)\"></button>\n                <button type=\"button\" pButton icon=\"pi pi-angle-down\" (click)=\"moveDown($event)\"></button>\n                <button type=\"button\" pButton icon=\"pi pi-angle-double-down\" (click)=\"moveBottom($event)\"></button>\n            </div>\n            <div class=\"ui-orderlist-list-container\">\n                <div class=\"ui-orderlist-caption ui-widget-header ui-corner-top\" *ngIf=\"header\">{{header}}</div>\n                <div class=\"ui-orderlist-filter-container ui-widget-content\" *ngIf=\"filterBy\">\n                    <input type=\"text\" role=\"textbox\" (keyup)=\"onFilterKeyup($event)\" class=\"ui-inputtext ui-widget ui-state-default ui-corner-all\" [attr.placeholder]=\"filterPlaceholder\">\n                    <span class=\"ui-orderlist-filter-icon pi pi-search\"></span>\n                </div>\n                <ul #listelement class=\"ui-widget-content ui-orderlist-list ui-corner-bottom\" [ngStyle]=\"listStyle\" (dragover)=\"onListMouseMove($event)\">\n                    <ng-template ngFor [ngForTrackBy]=\"trackBy\" let-item [ngForOf]=\"value\" let-i=\"index\" let-l=\"last\">\n                        <li class=\"ui-orderlist-droppoint\" *ngIf=\"dragdrop && isItemVisible(item)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" (dragleave)=\"onDragLeave($event)\" \n                            [ngClass]=\"{'ui-state-highlight': (i === dragOverItemIndex)}\"></li>\n                        <li class=\"ui-orderlist-item\"\n                            [ngClass]=\"{'ui-state-highlight':isSelected(item)}\" \n                            (click)=\"onItemClick($event,item,i)\" (touchend)=\"onItemTouchEnd($event)\"\n                            [style.display]=\"isItemVisible(item) ? 'block' : 'none'\"\n                            [draggable]=\"dragdrop\" (dragstart)=\"onDragStart($event, i)\" (dragend)=\"onDragEnd($event)\">\n                            <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n                        </li>\n                        <li class=\"ui-orderlist-droppoint\" *ngIf=\"dragdrop && l\" (dragover)=\"onDragOver($event, i + 1)\" (drop)=\"onDrop($event, i + 1)\" (dragleave)=\"onDragLeave($event)\" \n                            [ngClass]=\"{'ui-state-highlight': (i + 1 === dragOverItemIndex)}\"></li>\n                    </ng-template>\n                </ul>\n            </div>\n        </div>\n    ","providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":42,"character":16},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":42,"character":27}]}]}],"members":{"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"listStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"responsive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"filterBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"filterPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"metaKeySelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"dragdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"dragdropScope":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"controlsPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"selectionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":68,"character":5}}]}],"trackBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"onReorder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":72,"character":5}}]}],"onSelectionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":74,"character":5}}]}],"onFilterEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":76,"character":5}}]}],"listViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":78,"character":5},"arguments":["listelement"]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":80,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":80,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":104,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":104,"character":58},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":104,"character":90}]}],"selection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":5}}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":150,"character":5}}]}],"onItemClick":[{"__symbolic":"method"}],"onFilterKeyup":[{"__symbolic":"method"}],"filter":[{"__symbolic":"method"}],"isItemVisible":[{"__symbolic":"method"}],"onItemTouchEnd":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"moveUp":[{"__symbolic":"method"}],"moveTop":[{"__symbolic":"method"}],"moveDown":[{"__symbolic":"method"}],"moveBottom":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method"}],"onDragOver":[{"__symbolic":"method"}],"onDragLeave":[{"__symbolic":"method"}],"onDrop":[{"__symbolic":"method"}],"onDragEnd":[{"__symbolic":"method"}],"onListMouseMove":[{"__symbolic":"method"}]}},"OrderListModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":355,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":356,"character":14},{"__symbolic":"reference","module":"../button/button","name":"ButtonModule","line":356,"character":27},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":356,"character":40}],"exports":[{"__symbolic":"reference","name":"OrderList"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":357,"character":24}],"declarations":[{"__symbolic":"reference","name":"OrderList"}]}]}]}}}]

components/overlaypanel/overlaypanel.d.ts

@@ -16,2 +16,4 @@ import { OnDestroy, EventEmitter, Renderer2, ElementRef, ChangeDetectorRef } from '@angular/core';
     baseZIndex: number;
+    showTransitionOptions: string;
+    hideTransitionOptions: string;
     onShow: EventEmitter<any>;
@@ -43,3 +45,3 @@ onHide: EventEmitter<any>;
     unbindDocumentResizeListener(): void;
-    onOverlayHide(): void;
+    onContainerDestroy(): void;
     ngOnDestroy(): void;
@@ -46,0 +48,0 @@ }

components/overlaypanel/overlaypanel.js

@@ -25,2 +25,4 @@ "use strict";
         this.baseZIndex = 0;
+        this.showTransitionOptions = '225ms ease-out';
+        this.hideTransitionOptions = '195ms ease-in';
         this.onShow = new core_1.EventEmitter();
@@ -68,2 +70,5 @@ this.onHide = new core_1.EventEmitter();
     OverlayPanel.prototype.show = function (event, target) {
+        if (event.type === 'click') {
+            this.targetClickEvent = true;
+        }
         this.target = target || event.currentTarget || event.target;
@@ -102,3 +107,4 @@ this.visible = true;
             case 'void':
-                this.onOverlayHide();
+                this.onContainerDestroy();
+                this.onHide.emit({});
                 break;
@@ -136,6 +142,3 @@ }
     };
-    OverlayPanel.prototype.onOverlayHide = function () {
-        if (this.visible) {
-            this.onHide.emit(null);
-        }
+    OverlayPanel.prototype.onContainerDestroy = function () {
         this.unbindDocumentClickListener();
@@ -148,4 +151,6 @@ this.unbindDocumentResizeListener();
         this.target = null;
-        this.restoreAppend();
-        this.onOverlayHide();
+        if (this.container) {
+            this.restoreAppend();
+            this.onContainerDestroy();
+        }
     };
@@ -181,2 +186,10 @@ __decorate([
     __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], OverlayPanel.prototype, "showTransitionOptions", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], OverlayPanel.prototype, "hideTransitionOptions", void 0);
+    __decorate([
         core_1.Output(),
@@ -192,3 +205,3 @@ __metadata("design:type", core_1.EventEmitter)
             selector: 'p-overlayPanel',
-            template: "\n        <div [ngClass]=\"'ui-overlaypanel ui-widget ui-widget-content ui-corner-all ui-shadow'\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onPanelClick($event)\"\n            [@animation]=\"'visible'\" (@animation.start)=\"onAnimationStart($event)\" *ngIf=\"visible\">\n            <div class=\"ui-overlaypanel-content\">\n                <ng-content></ng-content>\n            </div>\n            <a href=\"#\" *ngIf=\"showCloseIcon\" class=\"ui-overlaypanel-close ui-state-default\" (click)=\"onCloseClick($event)\">\n                <span class=\"ui-overlaypanel-close-icon pi pi-times\"></span>\n            </a>\n        </div>\n    ",
+            template: "\n        <div [ngClass]=\"'ui-overlaypanel ui-widget ui-widget-content ui-corner-all ui-shadow'\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onPanelClick($event)\"\n            [@animation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" (@animation.start)=\"onAnimationStart($event)\" *ngIf=\"visible\">\n            <div class=\"ui-overlaypanel-content\">\n                <ng-content></ng-content>\n            </div>\n            <a href=\"#\" *ngIf=\"showCloseIcon\" class=\"ui-overlaypanel-close ui-state-default\" (click)=\"onCloseClick($event)\">\n                <span class=\"ui-overlaypanel-close-icon pi pi-times\"></span>\n            </a>\n        </div>\n    ",
             animations: [
@@ -204,4 +217,4 @@ animations_1.trigger('animation', [
                     })),
-                    animations_1.transition('void => visible', animations_1.animate('225ms ease-out')),
-                    animations_1.transition('visible => void', animations_1.animate('195ms ease-in'))
+                    animations_1.transition('void => visible', animations_1.animate('{{showTransitionParams}}')),
+                    animations_1.transition('visible => void', animations_1.animate('{{hideTransitionParams}}'))
                 ])
@@ -208,0 +221,0 @@ ],

components/overlaypanel/overlaypanel.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"OverlayPanel":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"p-overlayPanel","template":"\n        <div [ngClass]=\"'ui-overlaypanel ui-widget ui-widget-content ui-corner-all ui-shadow'\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onPanelClick($event)\"\n            [@animation]=\"'visible'\" (@animation.start)=\"onAnimationStart($event)\" *ngIf=\"visible\">\n            <div class=\"ui-overlaypanel-content\">\n                <ng-content></ng-content>\n            </div>\n            <a href=\"#\" *ngIf=\"showCloseIcon\" class=\"ui-overlaypanel-close ui-state-default\" (click)=\"onCloseClick($event)\">\n                <span class=\"ui-overlaypanel-close-icon pi pi-times\"></span>\n            </a>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":19,"character":8},"arguments":["animation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":20,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":20,"character":26},"arguments":[{"transform":"translateY(5%)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":24,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":24,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":28,"character":12},"arguments":["void => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":28,"character":42},"arguments":["225ms ease-out"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":29,"character":12},"arguments":["visible => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":29,"character":42},"arguments":["195ms ease-in"]}]}]]}],"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":32,"character":16}]}]}],"members":{"dismissable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"showCloseIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"onShow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":50,"character":5}}]}],"onHide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":52,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":72,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":72,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":72,"character":87},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":72,"character":110}]}],"bindDocumentClickListener":[{"__symbolic":"method"}],"unbindDocumentClickListener":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"hasTargetChanged":[{"__symbolic":"method"}],"appendContainer":[{"__symbolic":"method"}],"restoreAppend":[{"__symbolic":"method"}],"onAnimationStart":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"onPanelClick":[{"__symbolic":"method"}],"onCloseClick":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method"}],"bindDocumentResizeListener":[{"__symbolic":"method"}],"unbindDocumentResizeListener":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"OverlayPanelModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":212,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":213,"character":14}],"exports":[{"__symbolic":"reference","name":"OverlayPanel"}],"declarations":[{"__symbolic":"reference","name":"OverlayPanel"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"OverlayPanel":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"p-overlayPanel","template":"\n        <div [ngClass]=\"'ui-overlaypanel ui-widget ui-widget-content ui-corner-all ui-shadow'\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onPanelClick($event)\"\n            [@animation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" (@animation.start)=\"onAnimationStart($event)\" *ngIf=\"visible\">\n            <div class=\"ui-overlaypanel-content\">\n                <ng-content></ng-content>\n            </div>\n            <a href=\"#\" *ngIf=\"showCloseIcon\" class=\"ui-overlaypanel-close ui-state-default\" (click)=\"onCloseClick($event)\">\n                <span class=\"ui-overlaypanel-close-icon pi pi-times\"></span>\n            </a>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":19,"character":8},"arguments":["animation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":20,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":20,"character":26},"arguments":[{"transform":"translateY(5%)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":24,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":24,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":28,"character":12},"arguments":["void => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":28,"character":42},"arguments":["{{showTransitionParams}}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":29,"character":12},"arguments":["visible => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":29,"character":42},"arguments":["{{hideTransitionParams}}"]}]}]]}],"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":32,"character":16}]}]}],"members":{"dismissable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"showCloseIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"showTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"hideTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"onShow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":5}}]}],"onHide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":76,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":76,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":76,"character":87},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":76,"character":110}]}],"bindDocumentClickListener":[{"__symbolic":"method"}],"unbindDocumentClickListener":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"hasTargetChanged":[{"__symbolic":"method"}],"appendContainer":[{"__symbolic":"method"}],"restoreAppend":[{"__symbolic":"method"}],"onAnimationStart":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"onPanelClick":[{"__symbolic":"method"}],"onCloseClick":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method"}],"bindDocumentResizeListener":[{"__symbolic":"method"}],"unbindDocumentResizeListener":[{"__symbolic":"method"}],"onContainerDestroy":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"OverlayPanelModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":220,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":221,"character":14}],"exports":[{"__symbolic":"reference","name":"OverlayPanel"}],"declarations":[{"__symbolic":"reference","name":"OverlayPanel"}]}]}]}}}]

components/panel/panel.d.ts

@@ -13,5 +13,7 @@ import { EventEmitter, ElementRef } from '@angular/core';
     showHeader: boolean;
+    toggler: string;
     collapsedChange: EventEmitter<any>;
     onBeforeToggle: EventEmitter<any>;
     onAfterToggle: EventEmitter<any>;
+    transitionOptions: string;
     footerFacet: any;
@@ -21,3 +23,5 @@ animating: boolean;
     constructor(el: ElementRef);
-    toggle(event: any): boolean;
+    onHeaderClick(event: Event): void;
+    onIconClick(event: Event): void;
+    toggle(event: Event): boolean;
     expand(event: any): void;
@@ -24,0 +28,0 @@ collapse(event: any): void;

components/panel/panel.js

@@ -24,7 +24,19 @@ "use strict";
         this.showHeader = true;
+        this.toggler = "icon";
         this.collapsedChange = new core_1.EventEmitter();
         this.onBeforeToggle = new core_1.EventEmitter();
         this.onAfterToggle = new core_1.EventEmitter();
+        this.transitionOptions = '400ms cubic-bezier(0.86, 0, 0.07, 1)';
         this.id = "ui-panel-" + idx++;
     }
+    Panel.prototype.onHeaderClick = function (event) {
+        if (this.toggler === 'header') {
+            this.toggle(event);
+        }
+    };
+    Panel.prototype.onIconClick = function (event) {
+        if (this.toggler === 'icon') {
+            this.toggle(event);
+        }
+    };
     Panel.prototype.toggle = function (event) {
@@ -92,2 +104,6 @@ if (this.animating) {
     __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], Panel.prototype, "toggler", void 0);
+    __decorate([
         core_1.Output(),
@@ -105,2 +121,6 @@ __metadata("design:type", core_1.EventEmitter)
     __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], Panel.prototype, "transitionOptions", void 0);
+    __decorate([
         core_1.ContentChild(shared_1.Footer),
@@ -112,3 +132,3 @@ __metadata("design:type", Object)
             selector: 'p-panel',
-            template: "\n        <div [attr.id]=\"id\" [ngClass]=\"'ui-panel ui-widget ui-widget-content ui-corner-all'\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all\" *ngIf=\"showHeader\">\n                <span class=\"ui-panel-title\" *ngIf=\"header\">{{header}}</span>\n                <ng-content select=\"p-header\"></ng-content>\n                <a *ngIf=\"toggleable\" [attr.id]=\"id + '-label'\" class=\"ui-panel-titlebar-icon ui-panel-titlebar-toggler ui-corner-all ui-state-default\" href=\"#\"\n                    (click)=\"toggle($event)\" [attr.aria-controls]=\"id + '-content'\" role=\"tab\" [attr.aria-expanded]=\"!collapsed\">\n                    <span [class]=\"collapsed ? expandIcon : collapseIcon\"></span>\n                </a>\n            </div>\n            <div [attr.id]=\"id + '-content'\" class=\"ui-panel-content-wrapper\" [@panelContent]=\"collapsed ? 'hidden' : 'visible'\" (@panelContent.done)=\"onToggleDone($event)\"\n                [ngClass]=\"{'ui-panel-content-wrapper-overflown': collapsed||animating}\"\n                role=\"region\" [attr.aria-hidden]=\"collapsed\" [attr.aria-labelledby]=\"id + '-label'\">\n                <div class=\"ui-panel-content ui-widget-content\">\n                    <ng-content></ng-content>\n                </div>\n                \n                <div class=\"ui-panel-footer ui-widget-content\" *ngIf=\"footerFacet\">\n                    <ng-content select=\"p-footer\"></ng-content>\n                </div>\n            </div>\n        </div>\n    ",
+            template: "\n        <div [attr.id]=\"id\" [ngClass]=\"'ui-panel ui-widget ui-widget-content ui-corner-all'\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <div [ngClass]=\"{'ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all': true, 'ui-panel-titlebar-clickable': (toggleable && toggler === 'header')}\" \n                *ngIf=\"showHeader\" (click)=\"onHeaderClick($event)\">\n                <span class=\"ui-panel-title\" *ngIf=\"header\">{{header}}</span>\n                <ng-content select=\"p-header\"></ng-content>\n                <a *ngIf=\"toggleable\" [attr.id]=\"id + '-label'\" class=\"ui-panel-titlebar-icon ui-panel-titlebar-toggler ui-corner-all ui-state-default\" href=\"#\"\n                    (click)=\"onIconClick($event)\" [attr.aria-controls]=\"id + '-content'\" role=\"tab\" [attr.aria-expanded]=\"!collapsed\">\n                    <span [class]=\"collapsed ? expandIcon : collapseIcon\"></span>\n                </a>\n            </div>\n            <div [attr.id]=\"id + '-content'\" class=\"ui-panel-content-wrapper\" [@panelContent]=\"collapsed ? {value: 'hidden', params: {transitionParams: transitionOptions}} : {value: 'visible', params: {transitionParams: transitionOptions}}\" (@panelContent.done)=\"onToggleDone($event)\"\n                [ngClass]=\"{'ui-panel-content-wrapper-overflown': collapsed||animating}\"\n                role=\"region\" [attr.aria-hidden]=\"collapsed\" [attr.aria-labelledby]=\"id + '-label'\">\n                <div class=\"ui-panel-content ui-widget-content\">\n                    <ng-content></ng-content>\n                </div>\n                \n                <div class=\"ui-panel-footer ui-widget-content\" *ngIf=\"footerFacet\">\n                    <ng-content select=\"p-footer\"></ng-content>\n                </div>\n            </div>\n        </div>\n    ",
             animations: [
@@ -124,3 +144,3 @@ animations_1.trigger('panelContent', [
                     })),
-                    animations_1.transition('visible <=> hidden', animations_1.animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+                    animations_1.transition('visible <=> hidden', animations_1.animate('{{transitionParams}}'))
                 ])
@@ -127,0 +147,0 @@ ]

components/panel/panel.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"Panel":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"p-panel","template":"\n        <div [attr.id]=\"id\" [ngClass]=\"'ui-panel ui-widget ui-widget-content ui-corner-all'\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all\" *ngIf=\"showHeader\">\n                <span class=\"ui-panel-title\" *ngIf=\"header\">{{header}}</span>\n                <ng-content select=\"p-header\"></ng-content>\n                <a *ngIf=\"toggleable\" [attr.id]=\"id + '-label'\" class=\"ui-panel-titlebar-icon ui-panel-titlebar-toggler ui-corner-all ui-state-default\" href=\"#\"\n                    (click)=\"toggle($event)\" [attr.aria-controls]=\"id + '-content'\" role=\"tab\" [attr.aria-expanded]=\"!collapsed\">\n                    <span [class]=\"collapsed ? expandIcon : collapseIcon\"></span>\n                </a>\n            </div>\n            <div [attr.id]=\"id + '-content'\" class=\"ui-panel-content-wrapper\" [@panelContent]=\"collapsed ? 'hidden' : 'visible'\" (@panelContent.done)=\"onToggleDone($event)\"\n                [ngClass]=\"{'ui-panel-content-wrapper-overflown': collapsed||animating}\"\n                role=\"region\" [attr.aria-hidden]=\"collapsed\" [attr.aria-labelledby]=\"id + '-label'\">\n                <div class=\"ui-panel-content ui-widget-content\">\n                    <ng-content></ng-content>\n                </div>\n                \n                <div class=\"ui-panel-footer ui-widget-content\" *ngIf=\"footerFacet\">\n                    <ng-content select=\"p-footer\"></ng-content>\n                </div>\n            </div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":34,"character":8},"arguments":["panelContent",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":35,"character":12},"arguments":["hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":35,"character":28},"arguments":[{"height":"0","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":39,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":39,"character":29},"arguments":[{"height":"*","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":43,"character":12},"arguments":["visible <=> hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":43,"character":45},"arguments":["400ms cubic-bezier(0.86, 0, 0.07, 1)"]}]}]]}]}]}],"members":{"toggleable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"collapsed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"expandIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":5}}]}],"collapseIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"collapsedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":65,"character":5}}]}],"onBeforeToggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":67,"character":5}}]}],"onAfterToggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":69,"character":5}}]}],"footerFacet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":71,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"Footer","line":71,"character":18}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":77,"character":28}]}],"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":118,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":119,"character":14}],"exports":[{"__symbolic":"reference","name":"Panel"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":120,"character":20}],"declarations":[{"__symbolic":"reference","name":"Panel"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"Panel":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"p-panel","template":"\n        <div [attr.id]=\"id\" [ngClass]=\"'ui-panel ui-widget ui-widget-content ui-corner-all'\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <div [ngClass]=\"{'ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all': true, 'ui-panel-titlebar-clickable': (toggleable && toggler === 'header')}\" \n                *ngIf=\"showHeader\" (click)=\"onHeaderClick($event)\">\n                <span class=\"ui-panel-title\" *ngIf=\"header\">{{header}}</span>\n                <ng-content select=\"p-header\"></ng-content>\n                <a *ngIf=\"toggleable\" [attr.id]=\"id + '-label'\" class=\"ui-panel-titlebar-icon ui-panel-titlebar-toggler ui-corner-all ui-state-default\" href=\"#\"\n                    (click)=\"onIconClick($event)\" [attr.aria-controls]=\"id + '-content'\" role=\"tab\" [attr.aria-expanded]=\"!collapsed\">\n                    <span [class]=\"collapsed ? expandIcon : collapseIcon\"></span>\n                </a>\n            </div>\n            <div [attr.id]=\"id + '-content'\" class=\"ui-panel-content-wrapper\" [@panelContent]=\"collapsed ? {value: 'hidden', params: {transitionParams: transitionOptions}} : {value: 'visible', params: {transitionParams: transitionOptions}}\" (@panelContent.done)=\"onToggleDone($event)\"\n                [ngClass]=\"{'ui-panel-content-wrapper-overflown': collapsed||animating}\"\n                role=\"region\" [attr.aria-hidden]=\"collapsed\" [attr.aria-labelledby]=\"id + '-label'\">\n                <div class=\"ui-panel-content ui-widget-content\">\n                    <ng-content></ng-content>\n                </div>\n                \n                <div class=\"ui-panel-footer ui-widget-content\" *ngIf=\"footerFacet\">\n                    <ng-content select=\"p-footer\"></ng-content>\n                </div>\n            </div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":35,"character":8},"arguments":["panelContent",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":36,"character":12},"arguments":["hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":36,"character":28},"arguments":[{"height":"0","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":40,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":40,"character":29},"arguments":[{"height":"*","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":44,"character":12},"arguments":["visible <=> hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":44,"character":45},"arguments":["{{transitionParams}}"]}]}]]}]}]}],"members":{"toggleable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"collapsed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"expandIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"collapseIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"toggler":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"collapsedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":68,"character":5}}]}],"onBeforeToggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":70,"character":5}}]}],"onAfterToggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":72,"character":5}}]}],"transitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"footerFacet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":76,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"Footer","line":76,"character":18}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":82,"character":28}]}],"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":135,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":136,"character":14}],"exports":[{"__symbolic":"reference","name":"Panel"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":137,"character":20}],"declarations":[{"__symbolic":"reference","name":"Panel"}]}]}]}}}]

components/panelmenu/panelmenu.d.ts

@@ -8,2 +8,3 @@ import { MenuItem } from '../common/menuitem';
     expanded: boolean;
+    transitionOptions: string;
 }
@@ -15,2 +16,3 @@ export declare class PanelMenu extends BasePanelMenuItem {
     multiple: boolean;
+    transitionOptions: string;
     animating: boolean;
@@ -17,0 +19,0 @@ collapseAll(): void;

components/panelmenu/panelmenu.js

@@ -61,6 +61,10 @@ "use strict";
     ], PanelMenuSub.prototype, "expanded", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], PanelMenuSub.prototype, "transitionOptions", void 0);
     PanelMenuSub = __decorate([
         core_1.Component({
             selector: 'p-panelMenuSub',
-            template: "\n        <ul class=\"ui-submenu-list\" [@submenu]=\"expanded ? 'visible' : 'hidden'\">\n            <ng-template ngFor let-child [ngForOf]=\"item.items\">\n                <li *ngIf=\"child.separator\" class=\"ui-menu-separator ui-widget-content\">\n                <li *ngIf=\"!child.separator\" class=\"ui-menuitem ui-corner-all\" [ngClass]=\"child.styleClass\" [class.ui-helper-hidden]=\"child.visible === false\" [ngStyle]=\"child.style\">\n                    <a *ngIf=\"!child.routerLink\" [href]=\"child.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" [attr.tabindex]=\"item.expanded ? null : '-1'\" [attr.id]=\"child.id\"\n                        [ngClass]=\"{'ui-state-disabled':child.disabled}\" \n                        (click)=\"handleClick($event,child)\" [attr.target]=\"child.target\" [attr.title]=\"child.title\">\n                        <span class=\"ui-panelmenu-icon pi pi-fw\" [ngClass]=\"{'pi-caret-right':!child.expanded,'pi-caret-down':child.expanded}\" *ngIf=\"child.items\"></span\n                        ><span class=\"ui-menuitem-icon\" [ngClass]=\"child.icon\" *ngIf=\"child.icon\"></span\n                        ><span class=\"ui-menuitem-text\">{{child.label}}</span>\n                    </a>\n                    <a *ngIf=\"child.routerLink\" [routerLink]=\"child.routerLink\" [queryParams]=\"child.queryParams\" [routerLinkActive]=\"'ui-state-active'\" [routerLinkActiveOptions]=\"child.routerLinkActiveOptions||{exact:false}\" class=\"ui-menuitem-link ui-corner-all\" \n                        [ngClass]=\"{'ui-state-disabled':child.disabled}\" [attr.tabindex]=\"item.expanded ? null : '-1'\" [attr.id]=\"child.id\"\n                        (click)=\"handleClick($event,child)\" [attr.target]=\"child.target\" [attr.title]=\"child.title\">\n                        <span class=\"ui-panelmenu-icon pi pi-fw\" [ngClass]=\"{'pi-caret-right':!child.expanded,'pi-caret-down':child.expanded}\" *ngIf=\"child.items\"></span\n                        ><span class=\"ui-menuitem-icon\" [ngClass]=\"child.icon\" *ngIf=\"child.icon\"></span\n                        ><span class=\"ui-menuitem-text\">{{child.label}}</span>\n                    </a>\n                    <p-panelMenuSub [item]=\"child\" [expanded]=\"child.expanded\" *ngIf=\"child.items\"></p-panelMenuSub>\n                </li>\n            </ng-template>\n        </ul>\n    ",
+            template: "\n        <ul class=\"ui-submenu-list\" [@submenu]=\"expanded ? {value: 'visible', params: {transitionParams: transitionOptions}} : {value: 'hidden', params: {transitionParams: transitionOptions}}\">\n            <ng-template ngFor let-child [ngForOf]=\"item.items\">\n                <li *ngIf=\"child.separator\" class=\"ui-menu-separator ui-widget-content\">\n                <li *ngIf=\"!child.separator\" class=\"ui-menuitem ui-corner-all\" [ngClass]=\"child.styleClass\" [class.ui-helper-hidden]=\"child.visible === false\" [ngStyle]=\"child.style\">\n                    <a *ngIf=\"!child.routerLink\" [href]=\"child.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" [attr.tabindex]=\"item.expanded ? null : '-1'\" [attr.id]=\"child.id\"\n                        [ngClass]=\"{'ui-state-disabled':child.disabled}\" \n                        (click)=\"handleClick($event,child)\" [attr.target]=\"child.target\" [attr.title]=\"child.title\">\n                        <span class=\"ui-panelmenu-icon pi pi-fw\" [ngClass]=\"{'pi-caret-right':!child.expanded,'pi-caret-down':child.expanded}\" *ngIf=\"child.items\"></span\n                        ><span class=\"ui-menuitem-icon\" [ngClass]=\"child.icon\" *ngIf=\"child.icon\"></span\n                        ><span class=\"ui-menuitem-text\">{{child.label}}</span>\n                    </a>\n                    <a *ngIf=\"child.routerLink\" [routerLink]=\"child.routerLink\" [queryParams]=\"child.queryParams\" [routerLinkActive]=\"'ui-state-active'\" [routerLinkActiveOptions]=\"child.routerLinkActiveOptions||{exact:false}\" class=\"ui-menuitem-link ui-corner-all\" \n                        [ngClass]=\"{'ui-state-disabled':child.disabled}\" [attr.tabindex]=\"item.expanded ? null : '-1'\" [attr.id]=\"child.id\"\n                        (click)=\"handleClick($event,child)\" [attr.target]=\"child.target\" [attr.title]=\"child.title\">\n                        <span class=\"ui-panelmenu-icon pi pi-fw\" [ngClass]=\"{'pi-caret-right':!child.expanded,'pi-caret-down':child.expanded}\" *ngIf=\"child.items\"></span\n                        ><span class=\"ui-menuitem-icon\" [ngClass]=\"child.icon\" *ngIf=\"child.icon\"></span\n                        ><span class=\"ui-menuitem-text\">{{child.label}}</span>\n                    </a>\n                    <p-panelMenuSub [item]=\"child\" [expanded]=\"child.expanded\" [transitionOptions]=\"transitionOptions\" *ngIf=\"child.items\"></p-panelMenuSub>\n                </li>\n            </ng-template>\n        </ul>\n    ",
             animations: [
@@ -74,4 +78,4 @@ animations_1.trigger('submenu', [
                     })),
-                    animations_1.transition('visible => hidden', animations_1.animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
-                    animations_1.transition('hidden => visible', animations_1.animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+                    animations_1.transition('visible => hidden', animations_1.animate('{{transitionParams}}')),
+                    animations_1.transition('hidden => visible', animations_1.animate('{{transitionParams}}'))
                 ])
@@ -89,2 +93,3 @@ ]
         _this.multiple = true;
+        _this.transitionOptions = '400ms cubic-bezier(0.86, 0, 0.07, 1)';
         return _this;
@@ -131,6 +136,10 @@ }
     ], PanelMenu.prototype, "multiple", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], PanelMenu.prototype, "transitionOptions", void 0);
     PanelMenu = __decorate([
         core_1.Component({
             selector: 'p-panelMenu',
-            template: "\n        <div [class]=\"styleClass\" [ngStyle]=\"style\" [ngClass]=\"'ui-panelmenu ui-widget'\">\n            <ng-container *ngFor=\"let item of model;let f=first;let l=last;\">\n                <div class=\"ui-panelmenu-panel\" [ngClass]=\"{'ui-helper-hidden': item.visible === false}\">\n                    <div [ngClass]=\"{'ui-widget ui-panelmenu-header ui-state-default':true,'ui-corner-top':f,'ui-corner-bottom':l&&!item.expanded,\n                    'ui-state-active':item.expanded,'ui-state-disabled':item.disabled}\" [class]=\"item.styleClass\" [ngStyle]=\"item.style\">\n                        <a *ngIf=\"!item.routerLink\" [href]=\"item.url||'#'\" (click)=\"handleClick($event,item)\"\n                           [attr.target]=\"item.target\" [attr.title]=\"item.title\" class=\"ui-panelmenu-header-link\">\n                        <span *ngIf=\"item.items\" class=\"ui-panelmenu-icon pi pi-fw\" [ngClass]=\"{'pi-caret-right':!item.expanded,'pi-caret-down':item.expanded}\"></span\n                        ><span class=\"ui-menuitem-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon\"></span\n                        ><span class=\"ui-menuitem-text\">{{item.label}}</span>\n                        </a>\n                        <a *ngIf=\"item.routerLink\" [routerLink]=\"item.routerLink\" [queryParams]=\"item.queryParams\" [routerLinkActive]=\"'ui-state-active'\" [routerLinkActiveOptions]=\"item.routerLinkActiveOptions||{exact:false}\"\n                           (click)=\"handleClick($event,item)\" [attr.target]=\"item.target\" [attr.title]=\"item.title\" class=\"ui-panelmenu-header-link\">\n                        <span *ngIf=\"item.items\" class=\"ui-panelmenu-icon pi pi-fw\" [ngClass]=\"{'pi-caret-right':!item.expanded,'pi-caret-down':item.expanded}\"></span\n                        ><span class=\"ui-menuitem-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon\"></span\n                        ><span class=\"ui-menuitem-text\">{{item.label}}</span>\n                        </a>\n                    </div>\n                    <div *ngIf=\"item.items\" class=\"ui-panelmenu-content-wrapper\" [@rootItem]=\"item.expanded ? 'visible' : 'hidden'\"  (@rootItem.done)=\"onToggleDone()\"\n                         [ngClass]=\"{'ui-panelmenu-content-wrapper-overflown': !item.expanded||animating}\">\n                        <div class=\"ui-panelmenu-content ui-widget-content\">\n                            <p-panelMenuSub [item]=\"item\" [expanded]=\"true\" class=\"ui-panelmenu-root-submenu\"></p-panelMenuSub>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    ",
+            template: "\n        <div [class]=\"styleClass\" [ngStyle]=\"style\" [ngClass]=\"'ui-panelmenu ui-widget'\">\n            <ng-container *ngFor=\"let item of model;let f=first;let l=last;\">\n                <div class=\"ui-panelmenu-panel\" [ngClass]=\"{'ui-helper-hidden': item.visible === false}\">\n                    <div [ngClass]=\"{'ui-widget ui-panelmenu-header ui-state-default':true,'ui-corner-top':f,'ui-corner-bottom':l&&!item.expanded,\n                    'ui-state-active':item.expanded,'ui-state-disabled':item.disabled}\" [class]=\"item.styleClass\" [ngStyle]=\"item.style\">\n                        <a *ngIf=\"!item.routerLink\" [href]=\"item.url||'#'\" (click)=\"handleClick($event,item)\"\n                           [attr.target]=\"item.target\" [attr.title]=\"item.title\" class=\"ui-panelmenu-header-link\">\n                        <span *ngIf=\"item.items\" class=\"ui-panelmenu-icon pi pi-fw\" [ngClass]=\"{'pi-caret-right':!item.expanded,'pi-caret-down':item.expanded}\"></span\n                        ><span class=\"ui-menuitem-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon\"></span\n                        ><span class=\"ui-menuitem-text\">{{item.label}}</span>\n                        </a>\n                        <a *ngIf=\"item.routerLink\" [routerLink]=\"item.routerLink\" [queryParams]=\"item.queryParams\" [routerLinkActive]=\"'ui-state-active'\" [routerLinkActiveOptions]=\"item.routerLinkActiveOptions||{exact:false}\"\n                           (click)=\"handleClick($event,item)\" [attr.target]=\"item.target\" [attr.title]=\"item.title\" class=\"ui-panelmenu-header-link\">\n                        <span *ngIf=\"item.items\" class=\"ui-panelmenu-icon pi pi-fw\" [ngClass]=\"{'pi-caret-right':!item.expanded,'pi-caret-down':item.expanded}\"></span\n                        ><span class=\"ui-menuitem-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon\"></span\n                        ><span class=\"ui-menuitem-text\">{{item.label}}</span>\n                        </a>\n                    </div>\n                    <div *ngIf=\"item.items\" class=\"ui-panelmenu-content-wrapper\" [@rootItem]=\"item.expanded ? {value: 'visible', params: {transitionParams: transitionOptions}} : {value: 'hidden', params: {transitionParams: transitionOptions}}\"  (@rootItem.done)=\"onToggleDone()\"\n                         [ngClass]=\"{'ui-panelmenu-content-wrapper-overflown': !item.expanded||animating}\">\n                        <div class=\"ui-panelmenu-content ui-widget-content\">\n                            <p-panelMenuSub [item]=\"item\" [expanded]=\"true\" [transitionOptions]=\"transitionOptions\" class=\"ui-panelmenu-root-submenu\"></p-panelMenuSub>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    ",
             animations: [
@@ -144,4 +153,4 @@ animations_1.trigger('rootItem', [
                     })),
-                    animations_1.transition('visible => hidden', animations_1.animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
-                    animations_1.transition('hidden => visible', animations_1.animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+                    animations_1.transition('visible => hidden', animations_1.animate('{{transitionParams}}')),
+                    animations_1.transition('hidden => visible', animations_1.animate('{{transitionParams}}'))
                 ])
@@ -148,0 +157,0 @@ ]

components/panelmenu/panelmenu.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"BasePanelMenuItem":{"__symbolic":"class","members":{"handleClick":[{"__symbolic":"method"}]}},"PanelMenuSub":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"BasePanelMenuItem"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":29,"character":1},"arguments":[{"selector":"p-panelMenuSub","template":"\n        <ul class=\"ui-submenu-list\" [@submenu]=\"expanded ? 'visible' : 'hidden'\">\n            <ng-template ngFor let-child [ngForOf]=\"item.items\">\n                <li *ngIf=\"child.separator\" class=\"ui-menu-separator ui-widget-content\">\n                <li *ngIf=\"!child.separator\" class=\"ui-menuitem ui-corner-all\" [ngClass]=\"child.styleClass\" [class.ui-helper-hidden]=\"child.visible === false\" [ngStyle]=\"child.style\">\n                    <a *ngIf=\"!child.routerLink\" [href]=\"child.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" [attr.tabindex]=\"item.expanded ? null : '-1'\" [attr.id]=\"child.id\"\n                        [ngClass]=\"{'ui-state-disabled':child.disabled}\" \n                        (click)=\"handleClick($event,child)\" [attr.target]=\"child.target\" [attr.title]=\"child.title\">\n                        <span class=\"ui-panelmenu-icon pi pi-fw\" [ngClass]=\"{'pi-caret-right':!child.expanded,'pi-caret-down':child.expanded}\" *ngIf=\"child.items\"></span\n                        ><span class=\"ui-menuitem-icon\" [ngClass]=\"child.icon\" *ngIf=\"child.icon\"></span\n                        ><span class=\"ui-menuitem-text\">{{child.label}}</span>\n                    </a>\n                    <a *ngIf=\"child.routerLink\" [routerLink]=\"child.routerLink\" [queryParams]=\"child.queryParams\" [routerLinkActive]=\"'ui-state-active'\" [routerLinkActiveOptions]=\"child.routerLinkActiveOptions||{exact:false}\" class=\"ui-menuitem-link ui-corner-all\" \n                        [ngClass]=\"{'ui-state-disabled':child.disabled}\" [attr.tabindex]=\"item.expanded ? null : '-1'\" [attr.id]=\"child.id\"\n                        (click)=\"handleClick($event,child)\" [attr.target]=\"child.target\" [attr.title]=\"child.title\">\n                        <span class=\"ui-panelmenu-icon pi pi-fw\" [ngClass]=\"{'pi-caret-right':!child.expanded,'pi-caret-down':child.expanded}\" *ngIf=\"child.items\"></span\n                        ><span class=\"ui-menuitem-icon\" [ngClass]=\"child.icon\" *ngIf=\"child.icon\"></span\n                        ><span class=\"ui-menuitem-text\">{{child.label}}</span>\n                    </a>\n                    <p-panelMenuSub [item]=\"child\" [expanded]=\"child.expanded\" *ngIf=\"child.items\"></p-panelMenuSub>\n                </li>\n            </ng-template>\n        </ul>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":56,"character":8},"arguments":["submenu",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":57,"character":12},"arguments":["hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":57,"character":28},"arguments":[{"height":"0px"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":60,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":60,"character":29},"arguments":[{"height":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":63,"character":12},"arguments":["visible => hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":63,"character":44},"arguments":["400ms cubic-bezier(0.86, 0, 0.07, 1)"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":64,"character":12},"arguments":["hidden => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":64,"character":44},"arguments":["400ms cubic-bezier(0.86, 0, 0.07, 1)"]}]}]]}]}]}],"members":{"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"expanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}]}},"PanelMenu":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"BasePanelMenuItem"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":75,"character":1},"arguments":[{"selector":"p-panelMenu","template":"\n        <div [class]=\"styleClass\" [ngStyle]=\"style\" [ngClass]=\"'ui-panelmenu ui-widget'\">\n            <ng-container *ngFor=\"let item of model;let f=first;let l=last;\">\n                <div class=\"ui-panelmenu-panel\" [ngClass]=\"{'ui-helper-hidden': item.visible === false}\">\n                    <div [ngClass]=\"{'ui-widget ui-panelmenu-header ui-state-default':true,'ui-corner-top':f,'ui-corner-bottom':l&&!item.expanded,\n                    'ui-state-active':item.expanded,'ui-state-disabled':item.disabled}\" [class]=\"item.styleClass\" [ngStyle]=\"item.style\">\n                        <a *ngIf=\"!item.routerLink\" [href]=\"item.url||'#'\" (click)=\"handleClick($event,item)\"\n                           [attr.target]=\"item.target\" [attr.title]=\"item.title\" class=\"ui-panelmenu-header-link\">\n                        <span *ngIf=\"item.items\" class=\"ui-panelmenu-icon pi pi-fw\" [ngClass]=\"{'pi-caret-right':!item.expanded,'pi-caret-down':item.expanded}\"></span\n                        ><span class=\"ui-menuitem-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon\"></span\n                        ><span class=\"ui-menuitem-text\">{{item.label}}</span>\n                        </a>\n                        <a *ngIf=\"item.routerLink\" [routerLink]=\"item.routerLink\" [queryParams]=\"item.queryParams\" [routerLinkActive]=\"'ui-state-active'\" [routerLinkActiveOptions]=\"item.routerLinkActiveOptions||{exact:false}\"\n                           (click)=\"handleClick($event,item)\" [attr.target]=\"item.target\" [attr.title]=\"item.title\" class=\"ui-panelmenu-header-link\">\n                        <span *ngIf=\"item.items\" class=\"ui-panelmenu-icon pi pi-fw\" [ngClass]=\"{'pi-caret-right':!item.expanded,'pi-caret-down':item.expanded}\"></span\n                        ><span class=\"ui-menuitem-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon\"></span\n                        ><span class=\"ui-menuitem-text\">{{item.label}}</span>\n                        </a>\n                    </div>\n                    <div *ngIf=\"item.items\" class=\"ui-panelmenu-content-wrapper\" [@rootItem]=\"item.expanded ? 'visible' : 'hidden'\"  (@rootItem.done)=\"onToggleDone()\"\n                         [ngClass]=\"{'ui-panelmenu-content-wrapper-overflown': !item.expanded||animating}\">\n                        <div class=\"ui-panelmenu-content ui-widget-content\">\n                            <p-panelMenuSub [item]=\"item\" [expanded]=\"true\" class=\"ui-panelmenu-root-submenu\"></p-panelMenuSub>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":107,"character":8},"arguments":["rootItem",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":108,"character":12},"arguments":["hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":108,"character":28},"arguments":[{"height":"0px"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":111,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":111,"character":29},"arguments":[{"height":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":114,"character":12},"arguments":["visible => hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":114,"character":44},"arguments":["400ms cubic-bezier(0.86, 0, 0.07, 1)"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":115,"character":12},"arguments":["hidden => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":115,"character":44},"arguments":["400ms cubic-bezier(0.86, 0, 0.07, 1)"]}]}]]}]}]}],"members":{"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":121,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":5}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":5}}]}],"collapseAll":[{"__symbolic":"method"}],"handleClick":[{"__symbolic":"method"}],"onToggleDone":[{"__symbolic":"method"}]}},"PanelMenuModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":158,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":159,"character":14},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":159,"character":27}],"exports":[{"__symbolic":"reference","name":"PanelMenu"},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":160,"character":24}],"declarations":[{"__symbolic":"reference","name":"PanelMenu"},{"__symbolic":"reference","name":"PanelMenuSub"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"BasePanelMenuItem":{"__symbolic":"class","members":{"handleClick":[{"__symbolic":"method"}]}},"PanelMenuSub":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"BasePanelMenuItem"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":29,"character":1},"arguments":[{"selector":"p-panelMenuSub","template":"\n        <ul class=\"ui-submenu-list\" [@submenu]=\"expanded ? {value: 'visible', params: {transitionParams: transitionOptions}} : {value: 'hidden', params: {transitionParams: transitionOptions}}\">\n            <ng-template ngFor let-child [ngForOf]=\"item.items\">\n                <li *ngIf=\"child.separator\" class=\"ui-menu-separator ui-widget-content\">\n                <li *ngIf=\"!child.separator\" class=\"ui-menuitem ui-corner-all\" [ngClass]=\"child.styleClass\" [class.ui-helper-hidden]=\"child.visible === false\" [ngStyle]=\"child.style\">\n                    <a *ngIf=\"!child.routerLink\" [href]=\"child.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" [attr.tabindex]=\"item.expanded ? null : '-1'\" [attr.id]=\"child.id\"\n                        [ngClass]=\"{'ui-state-disabled':child.disabled}\" \n                        (click)=\"handleClick($event,child)\" [attr.target]=\"child.target\" [attr.title]=\"child.title\">\n                        <span class=\"ui-panelmenu-icon pi pi-fw\" [ngClass]=\"{'pi-caret-right':!child.expanded,'pi-caret-down':child.expanded}\" *ngIf=\"child.items\"></span\n                        ><span class=\"ui-menuitem-icon\" [ngClass]=\"child.icon\" *ngIf=\"child.icon\"></span\n                        ><span class=\"ui-menuitem-text\">{{child.label}}</span>\n                    </a>\n                    <a *ngIf=\"child.routerLink\" [routerLink]=\"child.routerLink\" [queryParams]=\"child.queryParams\" [routerLinkActive]=\"'ui-state-active'\" [routerLinkActiveOptions]=\"child.routerLinkActiveOptions||{exact:false}\" class=\"ui-menuitem-link ui-corner-all\" \n                        [ngClass]=\"{'ui-state-disabled':child.disabled}\" [attr.tabindex]=\"item.expanded ? null : '-1'\" [attr.id]=\"child.id\"\n                        (click)=\"handleClick($event,child)\" [attr.target]=\"child.target\" [attr.title]=\"child.title\">\n                        <span class=\"ui-panelmenu-icon pi pi-fw\" [ngClass]=\"{'pi-caret-right':!child.expanded,'pi-caret-down':child.expanded}\" *ngIf=\"child.items\"></span\n                        ><span class=\"ui-menuitem-icon\" [ngClass]=\"child.icon\" *ngIf=\"child.icon\"></span\n                        ><span class=\"ui-menuitem-text\">{{child.label}}</span>\n                    </a>\n                    <p-panelMenuSub [item]=\"child\" [expanded]=\"child.expanded\" [transitionOptions]=\"transitionOptions\" *ngIf=\"child.items\"></p-panelMenuSub>\n                </li>\n            </ng-template>\n        </ul>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":56,"character":8},"arguments":["submenu",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":57,"character":12},"arguments":["hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":57,"character":28},"arguments":[{"height":"0px"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":60,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":60,"character":29},"arguments":[{"height":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":63,"character":12},"arguments":["visible => hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":63,"character":44},"arguments":["{{transitionParams}}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":64,"character":12},"arguments":["hidden => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":64,"character":44},"arguments":["{{transitionParams}}"]}]}]]}]}]}],"members":{"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"expanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"transitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}]}},"PanelMenu":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"BasePanelMenuItem"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":77,"character":1},"arguments":[{"selector":"p-panelMenu","template":"\n        <div [class]=\"styleClass\" [ngStyle]=\"style\" [ngClass]=\"'ui-panelmenu ui-widget'\">\n            <ng-container *ngFor=\"let item of model;let f=first;let l=last;\">\n                <div class=\"ui-panelmenu-panel\" [ngClass]=\"{'ui-helper-hidden': item.visible === false}\">\n                    <div [ngClass]=\"{'ui-widget ui-panelmenu-header ui-state-default':true,'ui-corner-top':f,'ui-corner-bottom':l&&!item.expanded,\n                    'ui-state-active':item.expanded,'ui-state-disabled':item.disabled}\" [class]=\"item.styleClass\" [ngStyle]=\"item.style\">\n                        <a *ngIf=\"!item.routerLink\" [href]=\"item.url||'#'\" (click)=\"handleClick($event,item)\"\n                           [attr.target]=\"item.target\" [attr.title]=\"item.title\" class=\"ui-panelmenu-header-link\">\n                        <span *ngIf=\"item.items\" class=\"ui-panelmenu-icon pi pi-fw\" [ngClass]=\"{'pi-caret-right':!item.expanded,'pi-caret-down':item.expanded}\"></span\n                        ><span class=\"ui-menuitem-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon\"></span\n                        ><span class=\"ui-menuitem-text\">{{item.label}}</span>\n                        </a>\n                        <a *ngIf=\"item.routerLink\" [routerLink]=\"item.routerLink\" [queryParams]=\"item.queryParams\" [routerLinkActive]=\"'ui-state-active'\" [routerLinkActiveOptions]=\"item.routerLinkActiveOptions||{exact:false}\"\n                           (click)=\"handleClick($event,item)\" [attr.target]=\"item.target\" [attr.title]=\"item.title\" class=\"ui-panelmenu-header-link\">\n                        <span *ngIf=\"item.items\" class=\"ui-panelmenu-icon pi pi-fw\" [ngClass]=\"{'pi-caret-right':!item.expanded,'pi-caret-down':item.expanded}\"></span\n                        ><span class=\"ui-menuitem-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon\"></span\n                        ><span class=\"ui-menuitem-text\">{{item.label}}</span>\n                        </a>\n                    </div>\n                    <div *ngIf=\"item.items\" class=\"ui-panelmenu-content-wrapper\" [@rootItem]=\"item.expanded ? {value: 'visible', params: {transitionParams: transitionOptions}} : {value: 'hidden', params: {transitionParams: transitionOptions}}\"  (@rootItem.done)=\"onToggleDone()\"\n                         [ngClass]=\"{'ui-panelmenu-content-wrapper-overflown': !item.expanded||animating}\">\n                        <div class=\"ui-panelmenu-content ui-widget-content\">\n                            <p-panelMenuSub [item]=\"item\" [expanded]=\"true\" [transitionOptions]=\"transitionOptions\" class=\"ui-panelmenu-root-submenu\"></p-panelMenuSub>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":109,"character":8},"arguments":["rootItem",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":110,"character":12},"arguments":["hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":110,"character":28},"arguments":[{"height":"0px"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":113,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":113,"character":29},"arguments":[{"height":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":116,"character":12},"arguments":["visible => hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":116,"character":44},"arguments":["{{transitionParams}}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":117,"character":12},"arguments":["hidden => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":117,"character":44},"arguments":["{{transitionParams}}"]}]}]]}]}]}],"members":{"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":5}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":5}}]}],"transitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":131,"character":5}}]}],"collapseAll":[{"__symbolic":"method"}],"handleClick":[{"__symbolic":"method"}],"onToggleDone":[{"__symbolic":"method"}]}},"PanelMenuModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":162,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":163,"character":14},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":163,"character":27}],"exports":[{"__symbolic":"reference","name":"PanelMenu"},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":164,"character":24}],"declarations":[{"__symbolic":"reference","name":"PanelMenu"},{"__symbolic":"reference","name":"PanelMenuSub"}]}]}]}}}]

components/picklist/picklist.js

@@ -353,13 +353,19 @@ "use strict";
             if (listType === this.SOURCE_LIST) {
-                if (this.fromListType === this.TARGET_LIST)
+                if (this.fromListType === this.TARGET_LIST) {
                     this.insert(this.draggedItemIndexTarget, this.target, index, this.source, this.onMoveToSource);
-                else
+                }
+                else {
                     this.objectUtils.reorderArray(this.source, this.draggedItemIndexSource, (this.draggedItemIndexSource > index) ? index : (index === 0) ? 0 : index - 1);
+                    this.onSourceReorder.emit({ items: this.source[this.draggedItemIndexSource] });
+                }
                 this.dragOverItemIndexSource = null;
             }
             else {
-                if (this.fromListType === this.SOURCE_LIST)
+                if (this.fromListType === this.SOURCE_LIST) {
                     this.insert(this.draggedItemIndexSource, this.source, index, this.target, this.onMoveToTarget);
-                else
+                }
+                else {
                     this.objectUtils.reorderArray(this.target, this.draggedItemIndexTarget, (this.draggedItemIndexTarget > index) ? index : (index === 0) ? 0 : index - 1);
+                    this.onTargetReorder.emit({ items: this.target[this.draggedItemIndexTarget] });
+                }
                 this.dragOverItemIndexTarget = null;
@@ -366,0 +372,0 @@ }

components/picklist/picklist.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"PickList":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"p-pickList","template":"\n        <div [class]=\"styleClass\" [ngStyle]=\"style\" [ngClass]=\"{'ui-picklist ui-widget ui-helper-clearfix': true,'ui-picklist-responsive': responsive}\">\n            <div class=\"ui-picklist-source-controls ui-picklist-buttons\" *ngIf=\"showSourceControls\">\n                <div class=\"ui-picklist-buttons-cell\">\n                    <button type=\"button\" pButton icon=\"pi pi-angle-up\" [disabled]=\"disabled\" (click)=\"moveUp(sourcelist,source,selectedItemsSource,onSourceReorder)\"></button>\n                    <button type=\"button\" pButton icon=\"pi pi-angle-double-up\" [disabled]=\"disabled\" (click)=\"moveTop(sourcelist,source,selectedItemsSource,onSourceReorder)\"></button>\n                    <button type=\"button\" pButton icon=\"pi pi-angle-down\" [disabled]=\"disabled\" (click)=\"moveDown(sourcelist,source,selectedItemsSource,onSourceReorder)\"></button>\n                    <button type=\"button\" pButton icon=\"pi pi-angle-double-down\" [disabled]=\"disabled\" (click)=\"moveBottom(sourcelist,source,selectedItemsSource,onSourceReorder)\"></button>\n                </div>\n            </div>\n            <div class=\"ui-picklist-listwrapper ui-picklist-source-wrapper\" [ngClass]=\"{'ui-picklist-listwrapper-nocontrols':!showSourceControls}\">\n                <div class=\"ui-picklist-caption ui-widget-header ui-corner-tl ui-corner-tr\" *ngIf=\"sourceHeader\">{{sourceHeader}}</div>\n                <div class=\"ui-picklist-filter-container ui-widget-content\" *ngIf=\"filterBy && showSourceFilter !== false\">\n                    <input #sourceFilter type=\"text\" role=\"textbox\" (keyup)=\"onFilter($event,source,SOURCE_LIST)\" class=\"ui-picklist-filter ui-inputtext ui-widget ui-state-default ui-corner-all\" [disabled]=\"disabled\" [attr.placeholder]=\"sourceFilterPlaceholder\">\n                    <span class=\"ui-picklist-filter-icon pi pi-search\"></span>\n                </div>\n                <ul #sourcelist class=\"ui-widget-content ui-picklist-list ui-picklist-source ui-corner-bottom\" [ngClass]=\"{'ui-picklist-highlight': listHighlightSource}\" [ngStyle]=\"sourceStyle\" (dragover)=\"onListMouseMove($event,SOURCE_LIST)\" (dragleave)=\"onListDragLeave()\" (drop)=\"onListDrop($event, SOURCE_LIST)\">\n                    <ng-template ngFor let-item [ngForOf]=\"source\" [ngForTrackBy]=\"sourceTrackBy || trackBy\" let-i=\"index\" let-l=\"last\">\n                        <li class=\"ui-picklist-droppoint\" *ngIf=\"dragdrop\" (dragover)=\"onDragOver($event, i, SOURCE_LIST)\" (drop)=\"onDrop($event, i, SOURCE_LIST)\" (dragleave)=\"onDragLeave($event, SOURCE_LIST)\"\n                        [ngClass]=\"{'ui-picklist-droppoint-highlight': (i === dragOverItemIndexSource)}\" [style.display]=\"isItemVisible(item, SOURCE_LIST) ? 'block' : 'none'\"></li>\n                        <li [ngClass]=\"{'ui-picklist-item':true,'ui-state-highlight':isSelected(item,selectedItemsSource), 'ui-state-disabled': disabled}\"\n                            (click)=\"onItemClick($event,item,selectedItemsSource,onSourceSelect)\" (dblclick)=\"onSourceItemDblClick()\" (touchend)=\"onItemTouchEnd($event)\"\n                            [style.display]=\"isItemVisible(item, SOURCE_LIST) ? 'block' : 'none'\"\n                            [draggable]=\"dragdrop\" (dragstart)=\"onDragStart($event, i, SOURCE_LIST)\" (dragend)=\"onDragEnd($event)\">\n                            <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n                        </li>\n                        <li class=\"ui-picklist-droppoint\" *ngIf=\"dragdrop&&l\" (dragover)=\"onDragOver($event, i + 1, SOURCE_LIST)\" (drop)=\"onDrop($event, i + 1, SOURCE_LIST)\" (dragleave)=\"onDragLeave($event, SOURCE_LIST)\"\n                        [ngClass]=\"{'ui-picklist-droppoint-highlight': (i + 1 === dragOverItemIndexSource)}\"></li>\n                    </ng-template>\n                </ul>\n            </div>\n            <div class=\"ui-picklist-buttons\">\n                <div class=\"ui-picklist-buttons-cell\">\n                    <button type=\"button\" pButton icon=\"pi pi-angle-right\" [disabled]=\"disabled\" (click)=\"moveRight()\"></button>\n                    <button type=\"button\" pButton icon=\"pi pi-angle-double-right\" [disabled]=\"disabled\" (click)=\"moveAllRight()\"></button>\n                    <button type=\"button\" pButton icon=\"pi pi-angle-left\" [disabled]=\"disabled\" (click)=\"moveLeft()\"></button>\n                    <button type=\"button\" pButton icon=\"pi pi-angle-double-left\" [disabled]=\"disabled\" (click)=\"moveAllLeft()\"></button>\n                </div>\n            </div>\n            <div class=\"ui-picklist-listwrapper ui-picklist-target-wrapper\" [ngClass]=\"{'ui-picklist-listwrapper-nocontrols':!showTargetControls}\">\n                <div class=\"ui-picklist-caption ui-widget-header ui-corner-tl ui-corner-tr\" *ngIf=\"targetHeader\">{{targetHeader}}</div>\n                <div class=\"ui-picklist-filter-container ui-widget-content\" *ngIf=\"filterBy && showTargetFilter !== false\">\n                    <input #targetFilter type=\"text\" role=\"textbox\" (keyup)=\"onFilter($event,target,TARGET_LIST)\" class=\"ui-picklist-filter ui-inputtext ui-widget ui-state-default ui-corner-all\" [disabled]=\"disabled\" [attr.placeholder]=\"targetFilterPlaceholder\">\n                    <span class=\"ui-picklist-filter-icon pi pi-search\"></span>\n                </div>\n                <ul #targetlist class=\"ui-widget-content ui-picklist-list ui-picklist-target ui-corner-bottom\" [ngClass]=\"{'ui-picklist-highlight': listHighlightTarget}\" [ngStyle]=\"targetStyle\" (dragover)=\"onListMouseMove($event,TARGET_LIST)\" (dragleave)=\"onListDragLeave()\" (drop)=\"onListDrop($event,TARGET_LIST)\">\n                    <ng-template ngFor let-item [ngForOf]=\"target\" [ngForTrackBy]=\"targetTrackBy || trackBy\" let-i=\"index\" let-l=\"last\">\n                        <li class=\"ui-picklist-droppoint\" *ngIf=\"dragdrop\" (dragover)=\"onDragOver($event, i, TARGET_LIST)\" (drop)=\"onDrop($event, i, TARGET_LIST)\" (dragleave)=\"onDragLeave($event, TARGET_LIST)\"\n                        [ngClass]=\"{'ui-picklist-droppoint-highlight': (i === dragOverItemIndexTarget)}\" [style.display]=\"isItemVisible(item, TARGET_LIST) ? 'block' : 'none'\"></li>\n                        <li [ngClass]=\"{'ui-picklist-item':true,'ui-state-highlight':isSelected(item,selectedItemsTarget), 'ui-state-disabled': disabled}\"\n                            (click)=\"onItemClick($event,item,selectedItemsTarget,onTargetSelect)\" (dblclick)=\"onTargetItemDblClick()\" (touchend)=\"onItemTouchEnd($event)\"\n                            [style.display]=\"isItemVisible(item, TARGET_LIST) ? 'block' : 'none'\"\n                            [draggable]=\"dragdrop\" (dragstart)=\"onDragStart($event, i, TARGET_LIST)\" (dragend)=\"onDragEnd($event)\">\n                            <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n                        </li>\n                        <li class=\"ui-picklist-droppoint\" *ngIf=\"dragdrop&&l\" (dragover)=\"onDragOver($event, i + 1, TARGET_LIST)\" (drop)=\"onDrop($event, i + 1, TARGET_LIST)\" (dragleave)=\"onDragLeave($event, TARGET_LIST)\"\n                        [ngClass]=\"{'ui-picklist-droppoint-highlight': (i + 1 === dragOverItemIndexTarget)}\"></li>\n                    </ng-template>\n                </ul>\n            </div>\n            <div class=\"ui-picklist-target-controls ui-picklist-buttons\" *ngIf=\"showTargetControls\">\n                <div class=\"ui-picklist-buttons-cell\">\n                    <button type=\"button\" pButton icon=\"pi pi-angle-up\" [disabled]=\"disabled\" (click)=\"moveUp(targetlist,target,selectedItemsTarget,onTargetReorder)\"></button>\n                    <button type=\"button\" pButton icon=\"pi pi-angle-double-up\" [disabled]=\"disabled\" (click)=\"moveTop(targetlist,target,selectedItemsTarget,onTargetReorder)\"></button>\n                    <button type=\"button\" pButton icon=\"pi pi-angle-down\" [disabled]=\"disabled\" (click)=\"moveDown(targetlist,target,selectedItemsTarget,onTargetReorder)\"></button>\n                    <button type=\"button\" pButton icon=\"pi pi-angle-double-down\" [disabled]=\"disabled\" (click)=\"moveBottom(targetlist,target,selectedItemsTarget,onTargetReorder)\"></button>\n                </div>\n            </div>\n        </div>\n    ","providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":79,"character":16},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":79,"character":27}]}]}],"members":{"source":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"target":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"sourceHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"targetHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"responsive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":5}}]}],"filterBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"trackBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":5}}]}],"sourceTrackBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}}]}],"targetTrackBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":5}}]}],"showSourceFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":5}}]}],"showTargetFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":5}}]}],"metaKeySelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":5}}]}],"dragdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":5}}]}],"dragdropScope":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":5}}]}],"sourceStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":115,"character":5}}]}],"targetStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":5}}]}],"showSourceControls":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":5}}]}],"showTargetControls":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":121,"character":5}}]}],"sourceFilterPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":5}}]}],"targetFilterPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":5}}]}],"onMoveToSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":129,"character":5}}]}],"onMoveAllToSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":131,"character":5}}]}],"onMoveAllToTarget":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":133,"character":5}}]}],"onMoveToTarget":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":135,"character":5}}]}],"onSourceReorder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":137,"character":5}}]}],"onTargetReorder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":139,"character":5}}]}],"onSourceSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":141,"character":5}}]}],"onTargetSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":143,"character":5}}]}],"listViewSourceChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":145,"character":5},"arguments":["sourcelist"]}]}],"listViewTargetChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":147,"character":5},"arguments":["targetlist"]}]}],"sourceFilterViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":149,"character":5},"arguments":["sourceFilter"]}]}],"targetFilterViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":151,"character":5},"arguments":["targetFilter"]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":153,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":153,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":201,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":201,"character":58},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":201,"character":90}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"onSourceItemDblClick":[{"__symbolic":"method"}],"onTargetItemDblClick":[{"__symbolic":"method"}],"onFilter":[{"__symbolic":"method"}],"activateFilter":[{"__symbolic":"method"}],"isItemVisible":[{"__symbolic":"method"}],"isVisibleInList":[{"__symbolic":"method"}],"onItemTouchEnd":[{"__symbolic":"method"}],"sortByIndexInList":[{"__symbolic":"method"}],"moveUp":[{"__symbolic":"method"}],"moveTop":[{"__symbolic":"method"}],"moveDown":[{"__symbolic":"method"}],"moveBottom":[{"__symbolic":"method"}],"moveRight":[{"__symbolic":"method"}],"moveAllRight":[{"__symbolic":"method"}],"moveLeft":[{"__symbolic":"method"}],"moveAllLeft":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"findIndexInSelection":[{"__symbolic":"method"}],"findIndexInList":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method"}],"onDragOver":[{"__symbolic":"method"}],"onDragLeave":[{"__symbolic":"method"}],"onDrop":[{"__symbolic":"method"}],"onDragEnd":[{"__symbolic":"method"}],"onListDrop":[{"__symbolic":"method"}],"insert":[{"__symbolic":"method"}],"onListMouseMove":[{"__symbolic":"method"}],"onListDragLeave":[{"__symbolic":"method"}],"resetFilter":[{"__symbolic":"method"}]}},"PickListModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":666,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":667,"character":14},{"__symbolic":"reference","module":"../button/button","name":"ButtonModule","line":667,"character":27},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":667,"character":40}],"exports":[{"__symbolic":"reference","name":"PickList"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":668,"character":23}],"declarations":[{"__symbolic":"reference","name":"PickList"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"PickList":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"p-pickList","template":"\n        <div [class]=\"styleClass\" [ngStyle]=\"style\" [ngClass]=\"{'ui-picklist ui-widget ui-helper-clearfix': true,'ui-picklist-responsive': responsive}\">\n            <div class=\"ui-picklist-source-controls ui-picklist-buttons\" *ngIf=\"showSourceControls\">\n                <div class=\"ui-picklist-buttons-cell\">\n                    <button type=\"button\" pButton icon=\"pi pi-angle-up\" [disabled]=\"disabled\" (click)=\"moveUp(sourcelist,source,selectedItemsSource,onSourceReorder)\"></button>\n                    <button type=\"button\" pButton icon=\"pi pi-angle-double-up\" [disabled]=\"disabled\" (click)=\"moveTop(sourcelist,source,selectedItemsSource,onSourceReorder)\"></button>\n                    <button type=\"button\" pButton icon=\"pi pi-angle-down\" [disabled]=\"disabled\" (click)=\"moveDown(sourcelist,source,selectedItemsSource,onSourceReorder)\"></button>\n                    <button type=\"button\" pButton icon=\"pi pi-angle-double-down\" [disabled]=\"disabled\" (click)=\"moveBottom(sourcelist,source,selectedItemsSource,onSourceReorder)\"></button>\n                </div>\n            </div>\n            <div class=\"ui-picklist-listwrapper ui-picklist-source-wrapper\" [ngClass]=\"{'ui-picklist-listwrapper-nocontrols':!showSourceControls}\">\n                <div class=\"ui-picklist-caption ui-widget-header ui-corner-tl ui-corner-tr\" *ngIf=\"sourceHeader\">{{sourceHeader}}</div>\n                <div class=\"ui-picklist-filter-container ui-widget-content\" *ngIf=\"filterBy && showSourceFilter !== false\">\n                    <input #sourceFilter type=\"text\" role=\"textbox\" (keyup)=\"onFilter($event,source,SOURCE_LIST)\" class=\"ui-picklist-filter ui-inputtext ui-widget ui-state-default ui-corner-all\" [disabled]=\"disabled\" [attr.placeholder]=\"sourceFilterPlaceholder\">\n                    <span class=\"ui-picklist-filter-icon pi pi-search\"></span>\n                </div>\n                <ul #sourcelist class=\"ui-widget-content ui-picklist-list ui-picklist-source ui-corner-bottom\" [ngClass]=\"{'ui-picklist-highlight': listHighlightSource}\" [ngStyle]=\"sourceStyle\" (dragover)=\"onListMouseMove($event,SOURCE_LIST)\" (dragleave)=\"onListDragLeave()\" (drop)=\"onListDrop($event, SOURCE_LIST)\">\n                    <ng-template ngFor let-item [ngForOf]=\"source\" [ngForTrackBy]=\"sourceTrackBy || trackBy\" let-i=\"index\" let-l=\"last\">\n                        <li class=\"ui-picklist-droppoint\" *ngIf=\"dragdrop\" (dragover)=\"onDragOver($event, i, SOURCE_LIST)\" (drop)=\"onDrop($event, i, SOURCE_LIST)\" (dragleave)=\"onDragLeave($event, SOURCE_LIST)\"\n                        [ngClass]=\"{'ui-picklist-droppoint-highlight': (i === dragOverItemIndexSource)}\" [style.display]=\"isItemVisible(item, SOURCE_LIST) ? 'block' : 'none'\"></li>\n                        <li [ngClass]=\"{'ui-picklist-item':true,'ui-state-highlight':isSelected(item,selectedItemsSource), 'ui-state-disabled': disabled}\"\n                            (click)=\"onItemClick($event,item,selectedItemsSource,onSourceSelect)\" (dblclick)=\"onSourceItemDblClick()\" (touchend)=\"onItemTouchEnd($event)\"\n                            [style.display]=\"isItemVisible(item, SOURCE_LIST) ? 'block' : 'none'\"\n                            [draggable]=\"dragdrop\" (dragstart)=\"onDragStart($event, i, SOURCE_LIST)\" (dragend)=\"onDragEnd($event)\">\n                            <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n                        </li>\n                        <li class=\"ui-picklist-droppoint\" *ngIf=\"dragdrop&&l\" (dragover)=\"onDragOver($event, i + 1, SOURCE_LIST)\" (drop)=\"onDrop($event, i + 1, SOURCE_LIST)\" (dragleave)=\"onDragLeave($event, SOURCE_LIST)\"\n                        [ngClass]=\"{'ui-picklist-droppoint-highlight': (i + 1 === dragOverItemIndexSource)}\"></li>\n                    </ng-template>\n                </ul>\n            </div>\n            <div class=\"ui-picklist-buttons\">\n                <div class=\"ui-picklist-buttons-cell\">\n                    <button type=\"button\" pButton icon=\"pi pi-angle-right\" [disabled]=\"disabled\" (click)=\"moveRight()\"></button>\n                    <button type=\"button\" pButton icon=\"pi pi-angle-double-right\" [disabled]=\"disabled\" (click)=\"moveAllRight()\"></button>\n                    <button type=\"button\" pButton icon=\"pi pi-angle-left\" [disabled]=\"disabled\" (click)=\"moveLeft()\"></button>\n                    <button type=\"button\" pButton icon=\"pi pi-angle-double-left\" [disabled]=\"disabled\" (click)=\"moveAllLeft()\"></button>\n                </div>\n            </div>\n            <div class=\"ui-picklist-listwrapper ui-picklist-target-wrapper\" [ngClass]=\"{'ui-picklist-listwrapper-nocontrols':!showTargetControls}\">\n                <div class=\"ui-picklist-caption ui-widget-header ui-corner-tl ui-corner-tr\" *ngIf=\"targetHeader\">{{targetHeader}}</div>\n                <div class=\"ui-picklist-filter-container ui-widget-content\" *ngIf=\"filterBy && showTargetFilter !== false\">\n                    <input #targetFilter type=\"text\" role=\"textbox\" (keyup)=\"onFilter($event,target,TARGET_LIST)\" class=\"ui-picklist-filter ui-inputtext ui-widget ui-state-default ui-corner-all\" [disabled]=\"disabled\" [attr.placeholder]=\"targetFilterPlaceholder\">\n                    <span class=\"ui-picklist-filter-icon pi pi-search\"></span>\n                </div>\n                <ul #targetlist class=\"ui-widget-content ui-picklist-list ui-picklist-target ui-corner-bottom\" [ngClass]=\"{'ui-picklist-highlight': listHighlightTarget}\" [ngStyle]=\"targetStyle\" (dragover)=\"onListMouseMove($event,TARGET_LIST)\" (dragleave)=\"onListDragLeave()\" (drop)=\"onListDrop($event,TARGET_LIST)\">\n                    <ng-template ngFor let-item [ngForOf]=\"target\" [ngForTrackBy]=\"targetTrackBy || trackBy\" let-i=\"index\" let-l=\"last\">\n                        <li class=\"ui-picklist-droppoint\" *ngIf=\"dragdrop\" (dragover)=\"onDragOver($event, i, TARGET_LIST)\" (drop)=\"onDrop($event, i, TARGET_LIST)\" (dragleave)=\"onDragLeave($event, TARGET_LIST)\"\n                        [ngClass]=\"{'ui-picklist-droppoint-highlight': (i === dragOverItemIndexTarget)}\" [style.display]=\"isItemVisible(item, TARGET_LIST) ? 'block' : 'none'\"></li>\n                        <li [ngClass]=\"{'ui-picklist-item':true,'ui-state-highlight':isSelected(item,selectedItemsTarget), 'ui-state-disabled': disabled}\"\n                            (click)=\"onItemClick($event,item,selectedItemsTarget,onTargetSelect)\" (dblclick)=\"onTargetItemDblClick()\" (touchend)=\"onItemTouchEnd($event)\"\n                            [style.display]=\"isItemVisible(item, TARGET_LIST) ? 'block' : 'none'\"\n                            [draggable]=\"dragdrop\" (dragstart)=\"onDragStart($event, i, TARGET_LIST)\" (dragend)=\"onDragEnd($event)\">\n                            <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n                        </li>\n                        <li class=\"ui-picklist-droppoint\" *ngIf=\"dragdrop&&l\" (dragover)=\"onDragOver($event, i + 1, TARGET_LIST)\" (drop)=\"onDrop($event, i + 1, TARGET_LIST)\" (dragleave)=\"onDragLeave($event, TARGET_LIST)\"\n                        [ngClass]=\"{'ui-picklist-droppoint-highlight': (i + 1 === dragOverItemIndexTarget)}\"></li>\n                    </ng-template>\n                </ul>\n            </div>\n            <div class=\"ui-picklist-target-controls ui-picklist-buttons\" *ngIf=\"showTargetControls\">\n                <div class=\"ui-picklist-buttons-cell\">\n                    <button type=\"button\" pButton icon=\"pi pi-angle-up\" [disabled]=\"disabled\" (click)=\"moveUp(targetlist,target,selectedItemsTarget,onTargetReorder)\"></button>\n                    <button type=\"button\" pButton icon=\"pi pi-angle-double-up\" [disabled]=\"disabled\" (click)=\"moveTop(targetlist,target,selectedItemsTarget,onTargetReorder)\"></button>\n                    <button type=\"button\" pButton icon=\"pi pi-angle-down\" [disabled]=\"disabled\" (click)=\"moveDown(targetlist,target,selectedItemsTarget,onTargetReorder)\"></button>\n                    <button type=\"button\" pButton icon=\"pi pi-angle-double-down\" [disabled]=\"disabled\" (click)=\"moveBottom(targetlist,target,selectedItemsTarget,onTargetReorder)\"></button>\n                </div>\n            </div>\n        </div>\n    ","providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":79,"character":16},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":79,"character":27}]}]}],"members":{"source":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"target":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"sourceHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"targetHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"responsive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":5}}]}],"filterBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"trackBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":5}}]}],"sourceTrackBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}}]}],"targetTrackBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":5}}]}],"showSourceFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":5}}]}],"showTargetFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":5}}]}],"metaKeySelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":5}}]}],"dragdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":5}}]}],"dragdropScope":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":5}}]}],"sourceStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":115,"character":5}}]}],"targetStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":5}}]}],"showSourceControls":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":5}}]}],"showTargetControls":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":121,"character":5}}]}],"sourceFilterPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":5}}]}],"targetFilterPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":5}}]}],"onMoveToSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":129,"character":5}}]}],"onMoveAllToSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":131,"character":5}}]}],"onMoveAllToTarget":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":133,"character":5}}]}],"onMoveToTarget":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":135,"character":5}}]}],"onSourceReorder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":137,"character":5}}]}],"onTargetReorder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":139,"character":5}}]}],"onSourceSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":141,"character":5}}]}],"onTargetSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":143,"character":5}}]}],"listViewSourceChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":145,"character":5},"arguments":["sourcelist"]}]}],"listViewTargetChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":147,"character":5},"arguments":["targetlist"]}]}],"sourceFilterViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":149,"character":5},"arguments":["sourceFilter"]}]}],"targetFilterViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":151,"character":5},"arguments":["targetFilter"]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":153,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":153,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":201,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":201,"character":58},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":201,"character":90}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"onSourceItemDblClick":[{"__symbolic":"method"}],"onTargetItemDblClick":[{"__symbolic":"method"}],"onFilter":[{"__symbolic":"method"}],"activateFilter":[{"__symbolic":"method"}],"isItemVisible":[{"__symbolic":"method"}],"isVisibleInList":[{"__symbolic":"method"}],"onItemTouchEnd":[{"__symbolic":"method"}],"sortByIndexInList":[{"__symbolic":"method"}],"moveUp":[{"__symbolic":"method"}],"moveTop":[{"__symbolic":"method"}],"moveDown":[{"__symbolic":"method"}],"moveBottom":[{"__symbolic":"method"}],"moveRight":[{"__symbolic":"method"}],"moveAllRight":[{"__symbolic":"method"}],"moveLeft":[{"__symbolic":"method"}],"moveAllLeft":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"findIndexInSelection":[{"__symbolic":"method"}],"findIndexInList":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method"}],"onDragOver":[{"__symbolic":"method"}],"onDragLeave":[{"__symbolic":"method"}],"onDrop":[{"__symbolic":"method"}],"onDragEnd":[{"__symbolic":"method"}],"onListDrop":[{"__symbolic":"method"}],"insert":[{"__symbolic":"method"}],"onListMouseMove":[{"__symbolic":"method"}],"onListDragLeave":[{"__symbolic":"method"}],"resetFilter":[{"__symbolic":"method"}]}},"PickListModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":672,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":673,"character":14},{"__symbolic":"reference","module":"../button/button","name":"ButtonModule","line":673,"character":27},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":673,"character":40}],"exports":[{"__symbolic":"reference","name":"PickList"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":674,"character":23}],"declarations":[{"__symbolic":"reference","name":"PickList"}]}]}]}}}]

components/schedule/schedule.d.ts

@@ -45,3 +45,2 @@ import { ElementRef, OnDestroy, DoCheck, OnChanges, EventEmitter, IterableDiffers, OnInit, AfterViewChecked, SimpleChanges } from '@angular/core';
     navLinks: boolean;
-    options: any;
     onDayClick: EventEmitter<any>;
@@ -67,2 +66,3 @@ onDrop: EventEmitter<any>;
     config: any;
+    _options: any;
     constructor(el: ElementRef, differs: IterableDiffers);
@@ -72,2 +72,3 @@ ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    options: any;
     initialize(): void;
@@ -74,0 +75,0 @@ ngDoCheck(): void;

components/schedule/schedule.js

@@ -214,3 +214,3 @@ "use strict";
             for (var propName in changes) {
-                if (propName !== 'events') {
+                if (propName !== 'options' && propName !== 'events') {
                     this.calendar.option(propName, changes[propName].currentValue);
@@ -221,2 +221,19 @@ }
     };
+    Object.defineProperty(Schedule.prototype, "options", {
+        get: function () {
+            return this._options;
+        },
+        set: function (value) {
+            this._options = value;
+            if (this._options && this.calendar) {
+                for (var prop in this._options) {
+                    var optionValue = this._options[prop];
+                    this.config[prop] = optionValue;
+                    this.calendar.option(prop, optionValue);
+                }
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     Schedule.prototype.initialize = function () {
@@ -463,6 +480,2 @@ this.calendar = new FullCalendar.Calendar(this.el.nativeElement.children[0], this.config);
     __decorate([
-        core_1.Input(),
-        __metadata("design:type", Object)
-    ], Schedule.prototype, "options", void 0);
-    __decorate([
         core_1.Output(),
@@ -527,2 +540,7 @@ __metadata("design:type", core_1.EventEmitter)
     ], Schedule.prototype, "onNavLinkWeekClick", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], Schedule.prototype, "options", null);
     Schedule = __decorate([
@@ -529,0 +547,0 @@ core_1.Component({

components/schedule/schedule.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"Schedule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"p-schedule","template":"<div [ngStyle]=\"style\" [class]=\"styleClass\"></div>"}]}],"members":{"events":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":5}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5}}]}],"rtl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"weekends":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"hiddenDays":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"fixedWeekCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5}}]}],"weekNumbers":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"businessHours":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"contentHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"aspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"eventLimit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"defaultDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"editable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"droppable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"eventStartEditable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"eventDurationEditable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"defaultView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"allDaySlot":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"allDayText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"slotDuration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"slotLabelInterval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"snapDuration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":5}}]}],"scrollTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"minTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"maxTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":5}}]}],"slotEventOverlap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":5}}]}],"nowIndicator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"dragRevertDuration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"dragOpacity":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5}}]}],"dragScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":5}}]}],"eventOverlap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":5}}]}],"eventConstraint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":5}}]}],"timezone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"timeFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"eventRender":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"dayRender":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"navLinks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":5}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"onDayClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":95,"character":5}}]}],"onDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":97,"character":5}}]}],"onEventClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":99,"character":5}}]}],"onEventMouseover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":101,"character":5}}]}],"onEventMouseout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":103,"character":5}}]}],"onEventDragStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":105,"character":5}}]}],"onEventDragStop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":107,"character":5}}]}],"onEventDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":109,"character":5}}]}],"onEventResizeStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":111,"character":5}}]}],"onEventResizeStop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":113,"character":5}}]}],"onEventResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":115,"character":5}}]}],"onViewRender":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":117,"character":5}}]}],"onViewDestroy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":119,"character":5}}]}],"onNavLinkDayClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":121,"character":5}}]}],"onNavLinkWeekClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":123,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":135,"character":27},{"__symbolic":"reference","module":"@angular/core","name":"IterableDiffers","line":135,"character":48}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"initialize":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"gotoDate":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"prevYear":[{"__symbolic":"method"}],"nextYear":[{"__symbolic":"method"}],"today":[{"__symbolic":"method"}],"incrementDate":[{"__symbolic":"method"}],"changeView":[{"__symbolic":"method"}],"getDate":[{"__symbolic":"method"}],"updateEvent":[{"__symbolic":"method"}],"_findEvent":[{"__symbolic":"method"}],"_updateEvent":[{"__symbolic":"method"}]}},"ScheduleModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":409,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":410,"character":14}],"exports":[{"__symbolic":"reference","name":"Schedule"}],"declarations":[{"__symbolic":"reference","name":"Schedule"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"Schedule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"p-schedule","template":"<div [ngStyle]=\"style\" [class]=\"styleClass\"></div>"}]}],"members":{"events":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":5}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5}}]}],"rtl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"weekends":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"hiddenDays":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"fixedWeekCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5}}]}],"weekNumbers":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"businessHours":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"contentHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"aspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"eventLimit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"defaultDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"editable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"droppable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"eventStartEditable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"eventDurationEditable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"defaultView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"allDaySlot":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"allDayText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"slotDuration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"slotLabelInterval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"snapDuration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":5}}]}],"scrollTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"minTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"maxTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":5}}]}],"slotEventOverlap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":5}}]}],"nowIndicator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"dragRevertDuration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"dragOpacity":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5}}]}],"dragScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":5}}]}],"eventOverlap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":5}}]}],"eventConstraint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":5}}]}],"timezone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"timeFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"eventRender":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"dayRender":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"navLinks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":5}}]}],"onDayClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":93,"character":5}}]}],"onDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":95,"character":5}}]}],"onEventClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":97,"character":5}}]}],"onEventMouseover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":99,"character":5}}]}],"onEventMouseout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":101,"character":5}}]}],"onEventDragStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":103,"character":5}}]}],"onEventDragStop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":105,"character":5}}]}],"onEventDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":107,"character":5}}]}],"onEventResizeStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":109,"character":5}}]}],"onEventResizeStop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":111,"character":5}}]}],"onEventResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":113,"character":5}}]}],"onViewRender":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":115,"character":5}}]}],"onViewDestroy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":117,"character":5}}]}],"onNavLinkDayClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":119,"character":5}}]}],"onNavLinkWeekClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":121,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":135,"character":27},{"__symbolic":"reference","module":"@angular/core","name":"IterableDiffers","line":135,"character":48}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":316,"character":5}}]}],"initialize":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"gotoDate":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"prevYear":[{"__symbolic":"method"}],"nextYear":[{"__symbolic":"method"}],"today":[{"__symbolic":"method"}],"incrementDate":[{"__symbolic":"method"}],"changeView":[{"__symbolic":"method"}],"getDate":[{"__symbolic":"method"}],"updateEvent":[{"__symbolic":"method"}],"_findEvent":[{"__symbolic":"method"}],"_updateEvent":[{"__symbolic":"method"}]}},"ScheduleModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":425,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":426,"character":14}],"exports":[{"__symbolic":"reference","name":"Schedule"}],"declarations":[{"__symbolic":"reference","name":"Schedule"}]}]}]}}}]

components/slidemenu/slidemenu.d.ts

@@ -35,2 +35,4 @@ import { ElementRef, AfterViewChecked, OnDestroy, Renderer2 } from '@angular/core';
     baseZIndex: number;
+    showTransitionOptions: string;
+    hideTransitionOptions: string;
     containerViewChild: ElementRef;
@@ -37,0 +39,0 @@ backwardViewChild: ElementRef;

components/slidemenu/slidemenu.js

@@ -85,3 +85,3 @@ "use strict";
             selector: 'p-slideMenuSub',
-            template: "\n        <ul [ngClass]=\"{'ui-slidemenu-rootlist':root, 'ui-submenu-list':!root, 'ui-active-submenu': (-slideMenu.left == (index * menuWidth))}\"\n            [style.width.px]=\"menuWidth\" [style.left.px]=\"root ? slideMenu.left : slideMenu.menuWidth\"\n            [style.transitionProperty]=\"root ? 'left' : 'none'\" [style.transitionDuration]=\"effectDuration + 'ms'\" [style.transitionTimingFunction]=\"easing\">\n            <ng-template ngFor let-child [ngForOf]=\"(root ? item : item.items)\">\n                <li *ngIf=\"child.separator\" class=\"ui-menu-separator ui-widget-content\">\n                <li *ngIf=\"!child.separator\" #listitem [ngClass]=\"{'ui-menuitem ui-widget ui-corner-all':true,'ui-menuitem-active':listitem==activeItem}\"\n                    [class]=\"child.styleClass\" [ngStyle]=\"child.style\">\n                    <a *ngIf=\"!child.routerLink\" [href]=\"child.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"child.target\" [attr.title]=\"child.title\" [attr.id]=\"child.id\"\n                        [ngClass]=\"{'ui-state-disabled':child.disabled}\" \n                        (click)=\"itemClick($event, child, listitem)\">\n                        <span class=\"ui-menuitem-icon\" *ngIf=\"child.icon\" [ngClass]=\"child.icon\"></span>\n                        <span class=\"ui-menuitem-text\">{{child.label}}</span>\n                        <span class=\"ui-submenu-icon pi pi-fw pi-caret-right\" *ngIf=\"child.items\"></span>\n                    </a>\n                    <a *ngIf=\"child.routerLink\" [routerLink]=\"child.routerLink\" [queryParams]=\"child.queryParams\" [routerLinkActive]=\"'ui-state-active'\" \n                        [routerLinkActiveOptions]=\"child.routerLinkActiveOptions||{exact:false}\" [href]=\"child.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" \n                        [attr.target]=\"child.target\" [attr.title]=\"child.title\" [attr.id]=\"child.id\"\n                        [ngClass]=\"{'ui-state-disabled':child.disabled}\" \n                        (click)=\"itemClick($event, child, listitem)\">\n                        <span class=\"ui-menuitem-icon\" *ngIf=\"child.icon\" [ngClass]=\"child.icon\"></span>\n                        <span class=\"ui-menuitem-text\">{{child.label}}</span>\n                        <span class=\"ui-submenu-icon pi pi-fw pi-caret-right\" *ngIf=\"child.items\"></span>\n                    </a>\n                    <p-slideMenuSub class=\"ui-submenu\" [item]=\"child\" [index]=\"index + 1\" [menuWidth]=\"menuWidth\" *ngIf=\"child.items\"></p-slideMenuSub>\n                </li>\n            </ng-template>\n        </ul>\n    "
+            template: "\n        <ul [ngClass]=\"{'ui-slidemenu-rootlist':root, 'ui-submenu-list':!root, 'ui-active-submenu': (-slideMenu.left == (index * menuWidth))}\"\n            [style.width.px]=\"menuWidth\" [style.left.px]=\"root ? slideMenu.left : slideMenu.menuWidth\"\n            [style.transitionProperty]=\"root ? 'left' : 'none'\" [style.transitionDuration]=\"effectDuration + 'ms'\" [style.transitionTimingFunction]=\"easing\">\n            <ng-template ngFor let-child [ngForOf]=\"(root ? item : item.items)\">\n                <li *ngIf=\"child.separator\" class=\"ui-menu-separator ui-widget-content\" [ngClass]=\"{'ui-helper-hidden': child.visible === false}\">\n                <li *ngIf=\"!child.separator\" #listitem [ngClass]=\"{'ui-menuitem ui-widget ui-corner-all':true,'ui-menuitem-active':listitem==activeItem,'ui-helper-hidden': child.visible === false}\"\n                    [class]=\"child.styleClass\" [ngStyle]=\"child.style\">\n                    <a *ngIf=\"!child.routerLink\" [href]=\"child.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"child.target\" [attr.title]=\"child.title\" [attr.id]=\"child.id\"\n                        [ngClass]=\"{'ui-state-disabled':child.disabled}\" \n                        (click)=\"itemClick($event, child, listitem)\">\n                        <span class=\"ui-menuitem-icon\" *ngIf=\"child.icon\" [ngClass]=\"child.icon\"></span>\n                        <span class=\"ui-menuitem-text\">{{child.label}}</span>\n                        <span class=\"ui-submenu-icon pi pi-fw pi-caret-right\" *ngIf=\"child.items\"></span>\n                    </a>\n                    <a *ngIf=\"child.routerLink\" [routerLink]=\"child.routerLink\" [queryParams]=\"child.queryParams\" [routerLinkActive]=\"'ui-state-active'\" \n                        [routerLinkActiveOptions]=\"child.routerLinkActiveOptions||{exact:false}\" [href]=\"child.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" \n                        [attr.target]=\"child.target\" [attr.title]=\"child.title\" [attr.id]=\"child.id\"\n                        [ngClass]=\"{'ui-state-disabled':child.disabled}\" \n                        (click)=\"itemClick($event, child, listitem)\">\n                        <span class=\"ui-menuitem-icon\" *ngIf=\"child.icon\" [ngClass]=\"child.icon\"></span>\n                        <span class=\"ui-menuitem-text\">{{child.label}}</span>\n                        <span class=\"ui-submenu-icon pi pi-fw pi-caret-right\" *ngIf=\"child.items\"></span>\n                    </a>\n                    <p-slideMenuSub class=\"ui-submenu\" [item]=\"child\" [index]=\"index + 1\" [menuWidth]=\"menuWidth\" *ngIf=\"child.items\"></p-slideMenuSub>\n                </li>\n            </ng-template>\n        </ul>\n    "
         }),
@@ -106,2 +106,4 @@ __param(0, core_1.Inject(core_1.forwardRef(function () { return SlideMenu; }))),
         this.baseZIndex = 0;
+        this.showTransitionOptions = '225ms ease-out';
+        this.hideTransitionOptions = '195ms ease-in';
         this.left = 0;
@@ -288,2 +290,10 @@ this.animating = false;
     __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], SlideMenu.prototype, "showTransitionOptions", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], SlideMenu.prototype, "hideTransitionOptions", void 0);
+    __decorate([
         core_1.ViewChild('container'),
@@ -306,3 +316,3 @@ __metadata("design:type", core_1.ElementRef),
             selector: 'p-slideMenu',
-            template: "\n        <div #container [ngClass]=\"{'ui-slidemenu ui-widget ui-widget-content ui-corner-all':true, 'ui-slidemenu-dynamic ui-shadow':popup}\" \n            [class]=\"styleClass\" [ngStyle]=\"style\" (click)=\"onClick($event)\"\n            [@overlayAnimation]=\"'visible'\" [@.disabled]=\"popup !== true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" *ngIf=\"!popup || visible\">\n            <div class=\"ui-slidemenu-wrapper\" [style.height.px]=\"viewportHeight\">\n                <div #slideMenuContent class=\"ui-slidemenu-content\">\n                    <p-slideMenuSub [item]=\"model\" root=\"root\" [index]=\"0\" [menuWidth]=\"menuWidth\" [effectDuration]=\"effectDuration\" [easing]=\"easing\"></p-slideMenuSub>\n                </div>\n                <div #backward class=\"ui-slidemenu-backward ui-widget-header ui-corner-all\" [style.display]=\"left ? 'block' : 'none'\" (click)=\"goBack()\">\n                    <span class=\"ui-slidemenu-backward-icon pi pi-fw pi-caret-left\"></span><span>{{backLabel}}</span>\n                </div>\n            </div>\n        </div>\n    ",
+            template: "\n        <div #container [ngClass]=\"{'ui-slidemenu ui-widget ui-widget-content ui-corner-all':true, 'ui-slidemenu-dynamic ui-shadow':popup}\" \n            [class]=\"styleClass\" [ngStyle]=\"style\" (click)=\"onClick($event)\"\n            [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" [@.disabled]=\"popup !== true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" *ngIf=\"!popup || visible\">\n            <div class=\"ui-slidemenu-wrapper\" [style.height.px]=\"viewportHeight\">\n                <div #slideMenuContent class=\"ui-slidemenu-content\">\n                    <p-slideMenuSub [item]=\"model\" root=\"root\" [index]=\"0\" [menuWidth]=\"menuWidth\" [effectDuration]=\"effectDuration\" [easing]=\"easing\"></p-slideMenuSub>\n                </div>\n                <div #backward class=\"ui-slidemenu-backward ui-widget-header ui-corner-all\" [style.display]=\"left ? 'block' : 'none'\" (click)=\"goBack()\">\n                    <span class=\"ui-slidemenu-backward-icon pi pi-fw pi-caret-left\"></span><span>{{backLabel}}</span>\n                </div>\n            </div>\n        </div>\n    ",
             animations: [
@@ -318,4 +328,4 @@ animations_1.trigger('overlayAnimation', [
                     })),
-                    animations_1.transition('void => visible', animations_1.animate('225ms ease-out')),
-                    animations_1.transition('visible => void', animations_1.animate('195ms ease-in'))
+                    animations_1.transition('void => visible', animations_1.animate('{{showTransitionParams}}')),
+                    animations_1.transition('visible => void', animations_1.animate('{{hideTransitionParams}}'))
                 ])
@@ -322,0 +332,0 @@ ],

components/slidemenu/slidemenu.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"SlideMenuSub":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"p-slideMenuSub","template":"\n        <ul [ngClass]=\"{'ui-slidemenu-rootlist':root, 'ui-submenu-list':!root, 'ui-active-submenu': (-slideMenu.left == (index * menuWidth))}\"\n            [style.width.px]=\"menuWidth\" [style.left.px]=\"root ? slideMenu.left : slideMenu.menuWidth\"\n            [style.transitionProperty]=\"root ? 'left' : 'none'\" [style.transitionDuration]=\"effectDuration + 'ms'\" [style.transitionTimingFunction]=\"easing\">\n            <ng-template ngFor let-child [ngForOf]=\"(root ? item : item.items)\">\n                <li *ngIf=\"child.separator\" class=\"ui-menu-separator ui-widget-content\">\n                <li *ngIf=\"!child.separator\" #listitem [ngClass]=\"{'ui-menuitem ui-widget ui-corner-all':true,'ui-menuitem-active':listitem==activeItem}\"\n                    [class]=\"child.styleClass\" [ngStyle]=\"child.style\">\n                    <a *ngIf=\"!child.routerLink\" [href]=\"child.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"child.target\" [attr.title]=\"child.title\" [attr.id]=\"child.id\"\n                        [ngClass]=\"{'ui-state-disabled':child.disabled}\" \n                        (click)=\"itemClick($event, child, listitem)\">\n                        <span class=\"ui-menuitem-icon\" *ngIf=\"child.icon\" [ngClass]=\"child.icon\"></span>\n                        <span class=\"ui-menuitem-text\">{{child.label}}</span>\n                        <span class=\"ui-submenu-icon pi pi-fw pi-caret-right\" *ngIf=\"child.items\"></span>\n                    </a>\n                    <a *ngIf=\"child.routerLink\" [routerLink]=\"child.routerLink\" [queryParams]=\"child.queryParams\" [routerLinkActive]=\"'ui-state-active'\" \n                        [routerLinkActiveOptions]=\"child.routerLinkActiveOptions||{exact:false}\" [href]=\"child.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" \n                        [attr.target]=\"child.target\" [attr.title]=\"child.title\" [attr.id]=\"child.id\"\n                        [ngClass]=\"{'ui-state-disabled':child.disabled}\" \n                        (click)=\"itemClick($event, child, listitem)\">\n                        <span class=\"ui-menuitem-icon\" *ngIf=\"child.icon\" [ngClass]=\"child.icon\"></span>\n                        <span class=\"ui-menuitem-text\">{{child.label}}</span>\n                        <span class=\"ui-submenu-icon pi pi-fw pi-caret-right\" *ngIf=\"child.items\"></span>\n                    </a>\n                    <p-slideMenuSub class=\"ui-submenu\" [item]=\"child\" [index]=\"index + 1\" [menuWidth]=\"menuWidth\" *ngIf=\"child.items\"></p-slideMenuSub>\n                </li>\n            </ng-template>\n        </ul>\n    "}]}],"members":{"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"root":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"backLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"menuWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"effectDuration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"easing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":55,"character":17},"arguments":[{"__symbolic":"reference","name":"SlideMenu"}]}]],"parameters":[{"__symbolic":"reference","name":"SlideMenu"}]}],"itemClick":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SlideMenu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":93,"character":1},"arguments":[{"selector":"p-slideMenu","template":"\n        <div #container [ngClass]=\"{'ui-slidemenu ui-widget ui-widget-content ui-corner-all':true, 'ui-slidemenu-dynamic ui-shadow':popup}\" \n            [class]=\"styleClass\" [ngStyle]=\"style\" (click)=\"onClick($event)\"\n            [@overlayAnimation]=\"'visible'\" [@.disabled]=\"popup !== true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" *ngIf=\"!popup || visible\">\n            <div class=\"ui-slidemenu-wrapper\" [style.height.px]=\"viewportHeight\">\n                <div #slideMenuContent class=\"ui-slidemenu-content\">\n                    <p-slideMenuSub [item]=\"model\" root=\"root\" [index]=\"0\" [menuWidth]=\"menuWidth\" [effectDuration]=\"effectDuration\" [easing]=\"easing\"></p-slideMenuSub>\n                </div>\n                <div #backward class=\"ui-slidemenu-backward ui-widget-header ui-corner-all\" [style.display]=\"left ? 'block' : 'none'\" (click)=\"goBack()\">\n                    <span class=\"ui-slidemenu-backward-icon pi pi-fw pi-caret-left\"></span><span>{{backLabel}}</span>\n                </div>\n            </div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":110,"character":8},"arguments":["overlayAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":111,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":111,"character":26},"arguments":[{"transform":"translateY(5%)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":115,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":115,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":119,"character":12},"arguments":["void => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":119,"character":42},"arguments":["225ms ease-out"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":120,"character":12},"arguments":["visible => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":120,"character":42},"arguments":["195ms ease-in"]}]}]]}],"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":123,"character":16}]}]}],"members":{"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":5}}]}],"popup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":131,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":5}}]}],"menuWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":135,"character":5}}]}],"viewportHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":5}}]}],"effectDuration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":139,"character":5}}]}],"easing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":5}}]}],"backLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":143,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":145,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":147,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":149,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":173,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":173,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":173,"character":87}]}],"ngAfterViewChecked":[{"__symbolic":"method"}],"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":182,"character":5},"arguments":["container"]}]}],"backward":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":186,"character":5},"arguments":["backward"]}]}],"slideMenuContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":190,"character":5},"arguments":["slideMenuContent"]}]}],"updateViewPort":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"onOverlayAnimationStart":[{"__symbolic":"method"}],"appendOverlay":[{"__symbolic":"method"}],"restoreOverlayAppend":[{"__symbolic":"method"}],"moveOnTop":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"goBack":[{"__symbolic":"method"}],"bindDocumentClickListener":[{"__symbolic":"method"}],"unbindDocumentClickListener":[{"__symbolic":"method"}],"bindDocumentResizeListener":[{"__symbolic":"method"}],"unbindDocumentResizeListener":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SlideMenuModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":317,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":318,"character":14},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":318,"character":27}],"exports":[{"__symbolic":"reference","name":"SlideMenu"},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":319,"character":24}],"declarations":[{"__symbolic":"reference","name":"SlideMenu"},{"__symbolic":"reference","name":"SlideMenuSub"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"SlideMenuSub":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"p-slideMenuSub","template":"\n        <ul [ngClass]=\"{'ui-slidemenu-rootlist':root, 'ui-submenu-list':!root, 'ui-active-submenu': (-slideMenu.left == (index * menuWidth))}\"\n            [style.width.px]=\"menuWidth\" [style.left.px]=\"root ? slideMenu.left : slideMenu.menuWidth\"\n            [style.transitionProperty]=\"root ? 'left' : 'none'\" [style.transitionDuration]=\"effectDuration + 'ms'\" [style.transitionTimingFunction]=\"easing\">\n            <ng-template ngFor let-child [ngForOf]=\"(root ? item : item.items)\">\n                <li *ngIf=\"child.separator\" class=\"ui-menu-separator ui-widget-content\" [ngClass]=\"{'ui-helper-hidden': child.visible === false}\">\n                <li *ngIf=\"!child.separator\" #listitem [ngClass]=\"{'ui-menuitem ui-widget ui-corner-all':true,'ui-menuitem-active':listitem==activeItem,'ui-helper-hidden': child.visible === false}\"\n                    [class]=\"child.styleClass\" [ngStyle]=\"child.style\">\n                    <a *ngIf=\"!child.routerLink\" [href]=\"child.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"child.target\" [attr.title]=\"child.title\" [attr.id]=\"child.id\"\n                        [ngClass]=\"{'ui-state-disabled':child.disabled}\" \n                        (click)=\"itemClick($event, child, listitem)\">\n                        <span class=\"ui-menuitem-icon\" *ngIf=\"child.icon\" [ngClass]=\"child.icon\"></span>\n                        <span class=\"ui-menuitem-text\">{{child.label}}</span>\n                        <span class=\"ui-submenu-icon pi pi-fw pi-caret-right\" *ngIf=\"child.items\"></span>\n                    </a>\n                    <a *ngIf=\"child.routerLink\" [routerLink]=\"child.routerLink\" [queryParams]=\"child.queryParams\" [routerLinkActive]=\"'ui-state-active'\" \n                        [routerLinkActiveOptions]=\"child.routerLinkActiveOptions||{exact:false}\" [href]=\"child.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" \n                        [attr.target]=\"child.target\" [attr.title]=\"child.title\" [attr.id]=\"child.id\"\n                        [ngClass]=\"{'ui-state-disabled':child.disabled}\" \n                        (click)=\"itemClick($event, child, listitem)\">\n                        <span class=\"ui-menuitem-icon\" *ngIf=\"child.icon\" [ngClass]=\"child.icon\"></span>\n                        <span class=\"ui-menuitem-text\">{{child.label}}</span>\n                        <span class=\"ui-submenu-icon pi pi-fw pi-caret-right\" *ngIf=\"child.items\"></span>\n                    </a>\n                    <p-slideMenuSub class=\"ui-submenu\" [item]=\"child\" [index]=\"index + 1\" [menuWidth]=\"menuWidth\" *ngIf=\"child.items\"></p-slideMenuSub>\n                </li>\n            </ng-template>\n        </ul>\n    "}]}],"members":{"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"root":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"backLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"menuWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"effectDuration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"easing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":55,"character":17},"arguments":[{"__symbolic":"reference","name":"SlideMenu"}]}]],"parameters":[{"__symbolic":"reference","name":"SlideMenu"}]}],"itemClick":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SlideMenu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":93,"character":1},"arguments":[{"selector":"p-slideMenu","template":"\n        <div #container [ngClass]=\"{'ui-slidemenu ui-widget ui-widget-content ui-corner-all':true, 'ui-slidemenu-dynamic ui-shadow':popup}\" \n            [class]=\"styleClass\" [ngStyle]=\"style\" (click)=\"onClick($event)\"\n            [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" [@.disabled]=\"popup !== true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" *ngIf=\"!popup || visible\">\n            <div class=\"ui-slidemenu-wrapper\" [style.height.px]=\"viewportHeight\">\n                <div #slideMenuContent class=\"ui-slidemenu-content\">\n                    <p-slideMenuSub [item]=\"model\" root=\"root\" [index]=\"0\" [menuWidth]=\"menuWidth\" [effectDuration]=\"effectDuration\" [easing]=\"easing\"></p-slideMenuSub>\n                </div>\n                <div #backward class=\"ui-slidemenu-backward ui-widget-header ui-corner-all\" [style.display]=\"left ? 'block' : 'none'\" (click)=\"goBack()\">\n                    <span class=\"ui-slidemenu-backward-icon pi pi-fw pi-caret-left\"></span><span>{{backLabel}}</span>\n                </div>\n            </div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":110,"character":8},"arguments":["overlayAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":111,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":111,"character":26},"arguments":[{"transform":"translateY(5%)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":115,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":115,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":119,"character":12},"arguments":["void => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":119,"character":42},"arguments":["{{showTransitionParams}}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":120,"character":12},"arguments":["visible => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":120,"character":42},"arguments":["{{hideTransitionParams}}"]}]}]]}],"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":123,"character":16}]}]}],"members":{"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":5}}]}],"popup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":131,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":5}}]}],"menuWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":135,"character":5}}]}],"viewportHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":5}}]}],"effectDuration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":139,"character":5}}]}],"easing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":5}}]}],"backLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":143,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":145,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":147,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":149,"character":5}}]}],"showTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":151,"character":5}}]}],"hideTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":153,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":177,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":177,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":177,"character":87}]}],"ngAfterViewChecked":[{"__symbolic":"method"}],"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":186,"character":5},"arguments":["container"]}]}],"backward":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":190,"character":5},"arguments":["backward"]}]}],"slideMenuContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":194,"character":5},"arguments":["slideMenuContent"]}]}],"updateViewPort":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"onOverlayAnimationStart":[{"__symbolic":"method"}],"appendOverlay":[{"__symbolic":"method"}],"restoreOverlayAppend":[{"__symbolic":"method"}],"moveOnTop":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"goBack":[{"__symbolic":"method"}],"bindDocumentClickListener":[{"__symbolic":"method"}],"unbindDocumentClickListener":[{"__symbolic":"method"}],"bindDocumentResizeListener":[{"__symbolic":"method"}],"unbindDocumentResizeListener":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SlideMenuModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":321,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":322,"character":14},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":322,"character":27}],"exports":[{"__symbolic":"reference","name":"SlideMenu"},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":323,"character":24}],"declarations":[{"__symbolic":"reference","name":"SlideMenu"},{"__symbolic":"reference","name":"SlideMenuSub"}]}]}]}}}]

components/spinner/spinner.d.ts

@@ -24,3 +24,3 @@ import { ElementRef, OnInit, EventEmitter } from '@angular/core';
     name: string;
-    inputStyle: string;
+    inputStyle: any;
     inputStyleClass: string;
@@ -27,0 +27,0 @@ value: any;

components/spinner/spinner.js

@@ -273,3 +273,3 @@ "use strict";
         core_1.Input(),
-        __metadata("design:type", String)
+        __metadata("design:type", Object)
     ], Spinner.prototype, "inputStyle", void 0);
@@ -276,0 +276,0 @@ __decorate([

components/splitbutton/splitbutton.d.ts

@@ -26,2 +26,4 @@ import { ElementRef, OnDestroy, EventEmitter, Renderer2, ChangeDetectorRef } from '@angular/core';
     dir: string;
+    showTransitionOptions: string;
+    hideTransitionOptions: string;
     containerViewChild: ElementRef;
@@ -28,0 +30,0 @@ buttonViewChild: ElementRef;

components/splitbutton/splitbutton.js

@@ -29,2 +29,4 @@ "use strict";
         this.onDropdownClick = new core_1.EventEmitter();
+        this.showTransitionOptions = '225ms ease-out';
+        this.hideTransitionOptions = '195ms ease-in';
         this.overlayVisible = false;
@@ -179,2 +181,10 @@ }
     __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], SplitButton.prototype, "showTransitionOptions", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], SplitButton.prototype, "hideTransitionOptions", void 0);
+    __decorate([
         core_1.ViewChild('container'),
@@ -190,3 +200,3 @@ __metadata("design:type", core_1.ElementRef)
             selector: 'p-splitButton',
-            template: "\n        <div #container [ngClass]=\"{'ui-splitbutton ui-buttonset ui-widget':true,'ui-state-disabled':disabled}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <button #defaultbtn type=\"button\" pButton [icon]=\"icon\" [iconPos]=\"iconPos\" [label]=\"label\" [cornerStyleClass]=\"dir === 'rtl' ? 'ui-corner-right': 'ui-corner-left'\" (click)=\"onDefaultButtonClick($event)\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\">\n            </button><button type=\"button\" pButton class=\"ui-splitbutton-menubutton\" icon=\"pi pi-caret-down\" [cornerStyleClass]=\"dir === 'rtl' ? 'ui-corner-left': 'ui-corner-right'\" (click)=\"onDropdownButtonClick($event)\" [disabled]=\"disabled\"></button>\n            <div #overlay [ngClass]=\"'ui-menu ui-menu-dynamic ui-widget ui-widget-content ui-corner-all ui-helper-clearfix ui-shadow'\" *ngIf=\"overlayVisible\"\n                    [ngStyle]=\"menuStyle\" [class]=\"menuStyleClass\"\n                    [@overlayAnimation]=\"'visible'\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\">\n                <ul class=\"ui-menu-list ui-helper-reset\">\n                    <ng-template ngFor let-item [ngForOf]=\"model\">\n                        <li class=\"ui-menuitem ui-widget ui-corner-all\" role=\"menuitem\" *ngIf=\"item.visible !== false\">\n                            <a *ngIf=\"!item.routerLink\" [href]=\"item.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"item.target\"\n                                [ngClass]=\"{'ui-state-disabled':item.disabled}\" (click)=\"itemClick($event, item)\">\n                                <span [ngClass]=\"'ui-menuitem-icon'\" [class]=\"item.icon\" *ngIf=\"item.icon\"></span>\n                                <span class=\"ui-menuitem-text\">{{item.label}}</span>\n                            </a>\n                            <a *ngIf=\"item.routerLink\" [routerLink]=\"item.routerLink\" [queryParams]=\"item.queryParams\"\n                                class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"item.target\" [ngClass]=\"{'ui-state-disabled':item.disabled}\" (click)=\"itemClick($event, item)\">\n                                <span [ngClass]=\"'ui-menuitem-icon'\" [class]=\"item.icon\" *ngIf=\"item.icon\"></span>\n                                <span class=\"ui-menuitem-text\">{{item.label}}</span>\n                            </a>\n                        </li>\n                    </ng-template>\n                </ul>\n            </div>\n        </div>\n    ",
+            template: "\n        <div #container [ngClass]=\"{'ui-splitbutton ui-buttonset ui-widget':true,'ui-state-disabled':disabled}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <button #defaultbtn type=\"button\" pButton [icon]=\"icon\" [iconPos]=\"iconPos\" [label]=\"label\" [cornerStyleClass]=\"dir === 'rtl' ? 'ui-corner-right': 'ui-corner-left'\" (click)=\"onDefaultButtonClick($event)\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\">\n            </button><button type=\"button\" pButton class=\"ui-splitbutton-menubutton\" icon=\"pi pi-caret-down\" [cornerStyleClass]=\"dir === 'rtl' ? 'ui-corner-left': 'ui-corner-right'\" (click)=\"onDropdownButtonClick($event)\" [disabled]=\"disabled\"></button>\n            <div #overlay [ngClass]=\"'ui-menu ui-menu-dynamic ui-widget ui-widget-content ui-corner-all ui-helper-clearfix ui-shadow'\" *ngIf=\"overlayVisible\"\n                    [ngStyle]=\"menuStyle\" [class]=\"menuStyleClass\"\n                    [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\">\n                <ul class=\"ui-menu-list ui-helper-reset\">\n                    <ng-template ngFor let-item [ngForOf]=\"model\">\n                        <li class=\"ui-menuitem ui-widget ui-corner-all\" role=\"menuitem\" *ngIf=\"item.visible !== false\">\n                            <a *ngIf=\"!item.routerLink\" [href]=\"item.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"item.target\"\n                                [ngClass]=\"{'ui-state-disabled':item.disabled}\" (click)=\"itemClick($event, item)\">\n                                <span [ngClass]=\"'ui-menuitem-icon'\" [class]=\"item.icon\" *ngIf=\"item.icon\"></span>\n                                <span class=\"ui-menuitem-text\">{{item.label}}</span>\n                            </a>\n                            <a *ngIf=\"item.routerLink\" [routerLink]=\"item.routerLink\" [queryParams]=\"item.queryParams\"\n                                class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"item.target\" [ngClass]=\"{'ui-state-disabled':item.disabled}\" (click)=\"itemClick($event, item)\">\n                                <span [ngClass]=\"'ui-menuitem-icon'\" [class]=\"item.icon\" *ngIf=\"item.icon\"></span>\n                                <span class=\"ui-menuitem-text\">{{item.label}}</span>\n                            </a>\n                        </li>\n                    </ng-template>\n                </ul>\n            </div>\n        </div>\n    ",
             animations: [
@@ -202,4 +212,4 @@ animations_1.trigger('overlayAnimation', [
                     })),
-                    animations_1.transition('void => visible', animations_1.animate('225ms ease-out')),
-                    animations_1.transition('visible => void', animations_1.animate('195ms ease-in'))
+                    animations_1.transition('void => visible', animations_1.animate('{{showTransitionParams}}')),
+                    animations_1.transition('visible => void', animations_1.animate('{{hideTransitionParams}}'))
                 ])
@@ -206,0 +216,0 @@ ],

components/splitbutton/splitbutton.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"SplitButton":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"p-splitButton","template":"\n        <div #container [ngClass]=\"{'ui-splitbutton ui-buttonset ui-widget':true,'ui-state-disabled':disabled}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <button #defaultbtn type=\"button\" pButton [icon]=\"icon\" [iconPos]=\"iconPos\" [label]=\"label\" [cornerStyleClass]=\"dir === 'rtl' ? 'ui-corner-right': 'ui-corner-left'\" (click)=\"onDefaultButtonClick($event)\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\">\n            </button><button type=\"button\" pButton class=\"ui-splitbutton-menubutton\" icon=\"pi pi-caret-down\" [cornerStyleClass]=\"dir === 'rtl' ? 'ui-corner-left': 'ui-corner-right'\" (click)=\"onDropdownButtonClick($event)\" [disabled]=\"disabled\"></button>\n            <div #overlay [ngClass]=\"'ui-menu ui-menu-dynamic ui-widget ui-widget-content ui-corner-all ui-helper-clearfix ui-shadow'\" *ngIf=\"overlayVisible\"\n                    [ngStyle]=\"menuStyle\" [class]=\"menuStyleClass\"\n                    [@overlayAnimation]=\"'visible'\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\">\n                <ul class=\"ui-menu-list ui-helper-reset\">\n                    <ng-template ngFor let-item [ngForOf]=\"model\">\n                        <li class=\"ui-menuitem ui-widget ui-corner-all\" role=\"menuitem\" *ngIf=\"item.visible !== false\">\n                            <a *ngIf=\"!item.routerLink\" [href]=\"item.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"item.target\"\n                                [ngClass]=\"{'ui-state-disabled':item.disabled}\" (click)=\"itemClick($event, item)\">\n                                <span [ngClass]=\"'ui-menuitem-icon'\" [class]=\"item.icon\" *ngIf=\"item.icon\"></span>\n                                <span class=\"ui-menuitem-text\">{{item.label}}</span>\n                            </a>\n                            <a *ngIf=\"item.routerLink\" [routerLink]=\"item.routerLink\" [queryParams]=\"item.queryParams\"\n                                class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"item.target\" [ngClass]=\"{'ui-state-disabled':item.disabled}\" (click)=\"itemClick($event, item)\">\n                                <span [ngClass]=\"'ui-menuitem-icon'\" [class]=\"item.icon\" *ngIf=\"item.icon\"></span>\n                                <span class=\"ui-menuitem-text\">{{item.label}}</span>\n                            </a>\n                        </li>\n                    </ng-template>\n                </ul>\n            </div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":38,"character":8},"arguments":["overlayAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":39,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":39,"character":26},"arguments":[{"transform":"translateY(5%)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":43,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":43,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":47,"character":12},"arguments":["void => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":47,"character":42},"arguments":["225ms ease-out"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":48,"character":12},"arguments":["visible => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":48,"character":42},"arguments":["195ms ease-in"]}]}]]}],"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":51,"character":16}]}]}],"members":{"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"iconPos":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":63,"character":5}}]}],"onDropdownClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":65,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"menuStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"menuStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":5}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"dir":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":5}}]}],"containerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":83,"character":5},"arguments":["container"]}]}],"buttonViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":85,"character":5},"arguments":["defaultbtn"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":97,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":97,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":97,"character":87},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":97,"character":113},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":97,"character":132}]}],"onDefaultButtonClick":[{"__symbolic":"method"}],"itemClick":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"onOverlayAnimationStart":[{"__symbolic":"method"}],"onDropdownButtonClick":[{"__symbolic":"method"}],"alignOverlay":[{"__symbolic":"method"}],"appendOverlay":[{"__symbolic":"method"}],"restoreOverlayAppend":[{"__symbolic":"method"}],"bindDocumentClickListener":[{"__symbolic":"method"}],"unbindDocumentClickListener":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SplitButtonModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":206,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":207,"character":14},{"__symbolic":"reference","module":"../button/button","name":"ButtonModule","line":207,"character":27},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":207,"character":40}],"exports":[{"__symbolic":"reference","name":"SplitButton"},{"__symbolic":"reference","module":"../button/button","name":"ButtonModule","line":208,"character":26},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":208,"character":39}],"declarations":[{"__symbolic":"reference","name":"SplitButton"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"SplitButton":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"p-splitButton","template":"\n        <div #container [ngClass]=\"{'ui-splitbutton ui-buttonset ui-widget':true,'ui-state-disabled':disabled}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <button #defaultbtn type=\"button\" pButton [icon]=\"icon\" [iconPos]=\"iconPos\" [label]=\"label\" [cornerStyleClass]=\"dir === 'rtl' ? 'ui-corner-right': 'ui-corner-left'\" (click)=\"onDefaultButtonClick($event)\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\">\n            </button><button type=\"button\" pButton class=\"ui-splitbutton-menubutton\" icon=\"pi pi-caret-down\" [cornerStyleClass]=\"dir === 'rtl' ? 'ui-corner-left': 'ui-corner-right'\" (click)=\"onDropdownButtonClick($event)\" [disabled]=\"disabled\"></button>\n            <div #overlay [ngClass]=\"'ui-menu ui-menu-dynamic ui-widget ui-widget-content ui-corner-all ui-helper-clearfix ui-shadow'\" *ngIf=\"overlayVisible\"\n                    [ngStyle]=\"menuStyle\" [class]=\"menuStyleClass\"\n                    [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\">\n                <ul class=\"ui-menu-list ui-helper-reset\">\n                    <ng-template ngFor let-item [ngForOf]=\"model\">\n                        <li class=\"ui-menuitem ui-widget ui-corner-all\" role=\"menuitem\" *ngIf=\"item.visible !== false\">\n                            <a *ngIf=\"!item.routerLink\" [href]=\"item.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"item.target\"\n                                [ngClass]=\"{'ui-state-disabled':item.disabled}\" (click)=\"itemClick($event, item)\">\n                                <span [ngClass]=\"'ui-menuitem-icon'\" [class]=\"item.icon\" *ngIf=\"item.icon\"></span>\n                                <span class=\"ui-menuitem-text\">{{item.label}}</span>\n                            </a>\n                            <a *ngIf=\"item.routerLink\" [routerLink]=\"item.routerLink\" [queryParams]=\"item.queryParams\"\n                                class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"item.target\" [ngClass]=\"{'ui-state-disabled':item.disabled}\" (click)=\"itemClick($event, item)\">\n                                <span [ngClass]=\"'ui-menuitem-icon'\" [class]=\"item.icon\" *ngIf=\"item.icon\"></span>\n                                <span class=\"ui-menuitem-text\">{{item.label}}</span>\n                            </a>\n                        </li>\n                    </ng-template>\n                </ul>\n            </div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":38,"character":8},"arguments":["overlayAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":39,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":39,"character":26},"arguments":[{"transform":"translateY(5%)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":43,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":43,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":47,"character":12},"arguments":["void => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":47,"character":42},"arguments":["{{showTransitionParams}}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":48,"character":12},"arguments":["visible => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":48,"character":42},"arguments":["{{hideTransitionParams}}"]}]}]]}],"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":51,"character":16}]}]}],"members":{"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"iconPos":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":63,"character":5}}]}],"onDropdownClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":65,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"menuStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"menuStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":5}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"dir":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":5}}]}],"showTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"hideTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"containerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":87,"character":5},"arguments":["container"]}]}],"buttonViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":89,"character":5},"arguments":["defaultbtn"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":101,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":101,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":101,"character":87},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":101,"character":113},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":101,"character":132}]}],"onDefaultButtonClick":[{"__symbolic":"method"}],"itemClick":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"onOverlayAnimationStart":[{"__symbolic":"method"}],"onDropdownButtonClick":[{"__symbolic":"method"}],"alignOverlay":[{"__symbolic":"method"}],"appendOverlay":[{"__symbolic":"method"}],"restoreOverlayAppend":[{"__symbolic":"method"}],"bindDocumentClickListener":[{"__symbolic":"method"}],"unbindDocumentClickListener":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SplitButtonModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":210,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":211,"character":14},{"__symbolic":"reference","module":"../button/button","name":"ButtonModule","line":211,"character":27},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":211,"character":40}],"exports":[{"__symbolic":"reference","name":"SplitButton"},{"__symbolic":"reference","module":"../button/button","name":"ButtonModule","line":212,"character":26},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":212,"character":39}],"declarations":[{"__symbolic":"reference","name":"SplitButton"}]}]}]}}}]

components/table/table.d.ts

@@ -181,3 +181,3 @@ import { OnInit, AfterViewInit, AfterViewChecked, AfterContentInit, EventEmitter, ElementRef, TemplateRef, QueryList, NgZone } from '@angular/core';
     findIndexInSelection(rowData: any): number;
-    toggleRowWithRadio(event: Event, rowData: any): void;
+    toggleRowWithRadio(event: any, rowData: any): void;
     toggleRowWithCheckbox(event: any, rowData: any): void;
@@ -436,2 +436,3 @@ toggleRowsWithCheckbox(event: Event, check: boolean): void;
     value: any;
+    index: number;
     boxViewChild: ElementRef;
@@ -453,2 +454,3 @@ checked: boolean;
     value: any;
+    index: number;
     boxViewChild: ElementRef;
@@ -455,0 +457,0 @@ checked: boolean;

components/table/table.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"TableService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":13,"character":1}}],"members":{"onSort":[{"__symbolic":"method"}],"onSelectionChange":[{"__symbolic":"method"}],"onContextMenu":[{"__symbolic":"method"}],"onValueChange":[{"__symbolic":"method"}],"onTotalRecordsChange":[{"__symbolic":"method"}],"onColumnsChange":[{"__symbolic":"method"}]}},"Table":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":55,"character":1},"arguments":[{"selector":"p-table","template":"\n        <div #container [ngStyle]=\"style\" [class]=\"styleClass\"\n            [ngClass]=\"{'ui-table ui-widget': true, 'ui-table-responsive': responsive, 'ui-table-resizable': resizableColumns,\n                'ui-table-resizable-fit': (resizableColumns && columnResizeMode === 'fit'),\n                'ui-table-hoverable-rows': (rowHover||selectionMode), 'ui-table-auto-layout': autoLayout}\">\n            <div class=\"ui-table-loading ui-widget-overlay\" *ngIf=\"loading\"></div>\n            <div class=\"ui-table-loading-content\" *ngIf=\"loading\">\n                <i [class]=\"'ui-table-loading-icon pi-spin ' + loadingIcon\"></i>\n            </div>\n            <div *ngIf=\"captionTemplate\" class=\"ui-table-caption ui-widget-header\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </div>\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" styleClass=\"ui-paginator-top\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"onPageChange($event)\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && (paginatorPosition === 'top' || paginatorPosition =='both')\"\n                [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\" [dropdownAppendTo]=\"paginatorDropdownAppendTo\"></p-paginator>\n            \n            <div class=\"ui-table-wrapper\" *ngIf=\"!scrollable\">\n                <table #table [ngClass]=\"tableStyleClass\" [ngStyle]=\"tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <thead class=\"ui-table-thead\">\n                        <ng-container *ngTemplateOutlet=\"headerTemplate; context: {$implicit: columns}\"></ng-container>\n                    </thead>\n                    <tfoot class=\"ui-table-tfoot\">\n                        <ng-container *ngTemplateOutlet=\"footerTemplate; context {$implicit: columns}\"></ng-container>\n                    </tfoot>\n                    <tbody class=\"ui-table-tbody\" [pTableBody]=\"columns\" [pTableBodyTemplate]=\"bodyTemplate\"></tbody>\n                </table>\n            </div>\n\n            <div class=\"ui-table-scrollable-wrapper\" *ngIf=\"scrollable\">\n               <div class=\"ui-table-scrollable-view ui-table-frozen-view\" *ngIf=\"frozenColumns||frozenBodyTemplate\" [pScrollableView]=\"frozenColumns\" [frozen]=\"true\" [ngStyle]=\"{width: frozenWidth}\" [scrollHeight]=\"scrollHeight\"></div>\n               <div class=\"ui-table-scrollable-view\" [pScrollableView]=\"columns\" [frozen]=\"false\" [scrollHeight]=\"scrollHeight\"></div>\n            </div>\n            \n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" styleClass=\"ui-paginator-bottom\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"onPageChange($event)\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && (paginatorPosition === 'bottom' || paginatorPosition =='both')\"\n                [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\" [dropdownAppendTo]=\"paginatorDropdownAppendTo\"></p-paginator>\n            <div *ngIf=\"summaryTemplate\" class=\"ui-table-summary ui-widget-header\">\n                <ng-container *ngTemplateOutlet=\"summaryTemplate\"></ng-container>\n            </div>\n\n            <div #resizeHelper class=\"ui-column-resizer-helper ui-state-highlight\" style=\"display:none\" *ngIf=\"resizableColumns\"></div>\n\n            <span #reorderIndicatorUp class=\"pi pi-arrow-down ui-table-reorder-indicator-up\" style=\"display:none\" *ngIf=\"reorderableColumns\"></span>\n            <span #reorderIndicatorDown class=\"pi pi-arrow-up ui-table-reorder-indicator-down\" style=\"display:none\" *ngIf=\"reorderableColumns\"></span>\n        </div>\n    ","providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":104,"character":16},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":104,"character":28},{"__symbolic":"reference","name":"TableService"}]}]}],"members":{"frozenColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":5}}]}],"frozenValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":5}}]}],"tableStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":116,"character":5}}]}],"tableStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":5}}]}],"paginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":5}}]}],"rows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":5}}]}],"first":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":5}}]}],"pageLinks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":5}}]}],"rowsPerPageOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":5}}]}],"alwaysShowPaginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":130,"character":5}}]}],"paginatorPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":5}}]}],"paginatorDropdownAppendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":5}}]}],"defaultSortOrder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":136,"character":5}}]}],"sortMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":5}}]}],"resetPageOnSort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":140,"character":5}}]}],"selectionMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"character":5}}]}],"selectionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":144,"character":5}}]}],"contextMenuSelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":146,"character":5}}]}],"contextMenuSelectionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":148,"character":5}}]}],"contextMenuSelectionMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":150,"character":5}}]}],"dataKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":152,"character":5}}]}],"metaKeySelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":154,"character":5}}]}],"rowTrackBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":156,"character":5}}]}],"lazy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":158,"character":5}}]}],"lazyLoadOnInit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":160,"character":5}}]}],"compareSelectionBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":162,"character":5}}]}],"csvSeparator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":164,"character":5}}]}],"exportFilename":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":166,"character":5}}]}],"filters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":168,"character":5}}]}],"globalFilterFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":170,"character":5}}]}],"filterDelay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":172,"character":5}}]}],"expandedRowKeys":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":174,"character":5}}]}],"rowExpandMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":176,"character":5}}]}],"scrollable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":178,"character":5}}]}],"scrollHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":180,"character":5}}]}],"virtualScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":182,"character":5}}]}],"virtualScrollDelay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":184,"character":5}}]}],"virtualRowHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":186,"character":5}}]}],"frozenWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":188,"character":5}}]}],"responsive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":190,"character":5}}]}],"contextMenu":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":192,"character":5}}]}],"resizableColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":194,"character":5}}]}],"columnResizeMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":196,"character":5}}]}],"reorderableColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":198,"character":5}}]}],"loading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":200,"character":5}}]}],"loadingIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":202,"character":5}}]}],"rowHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":204,"character":5}}]}],"customSort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":206,"character":5}}]}],"autoLayout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":208,"character":5}}]}],"exportFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":210,"character":5}}]}],"onRowSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":212,"character":5}}]}],"onRowUnselect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":214,"character":5}}]}],"onPage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":216,"character":5}}]}],"onSort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":218,"character":5}}]}],"onFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":220,"character":5}}]}],"onLazyLoad":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":222,"character":5}}]}],"onRowExpand":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":224,"character":5}}]}],"onRowCollapse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":226,"character":5}}]}],"onContextMenuSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":228,"character":5}}]}],"onColResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":230,"character":5}}]}],"onColReorder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":232,"character":5}}]}],"onRowReorder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":234,"character":5}}]}],"onEditInit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":236,"character":5}}]}],"onEditComplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":238,"character":5}}]}],"onEditCancel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":240,"character":5}}]}],"onHeaderCheckboxToggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":242,"character":5}}]}],"sortFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":244,"character":5}}]}],"containerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":246,"character":5},"arguments":["container"]}]}],"resizeHelperViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":248,"character":5},"arguments":["resizeHelper"]}]}],"reorderIndicatorUpViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":250,"character":5},"arguments":["reorderIndicatorUp"]}]}],"reorderIndicatorDownViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":252,"character":5},"arguments":["reorderIndicatorDown"]}]}],"tableViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":254,"character":5},"arguments":["table"]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":256,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":256,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":340,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":340,"character":90},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":340,"character":116},{"__symbolic":"reference","name":"TableService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":415,"character":5}}]}],"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":439,"character":5}}]}],"totalRecords":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":447,"character":5}}]}],"sortField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":455,"character":5}}]}],"sortOrder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":470,"character":5}}]}],"multiSortMeta":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":484,"character":5}}]}],"selection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":495,"character":5}}]}],"updateSelectionKeys":[{"__symbolic":"method"}],"onPageChange":[{"__symbolic":"method"}],"sort":[{"__symbolic":"method"}],"sortSingle":[{"__symbolic":"method"}],"sortMultiple":[{"__symbolic":"method"}],"multisortField":[{"__symbolic":"method"}],"getSortMeta":[{"__symbolic":"method"}],"isSorted":[{"__symbolic":"method"}],"handleRowClick":[{"__symbolic":"method"}],"handleRowTouchEnd":[{"__symbolic":"method"}],"handleRowRightClick":[{"__symbolic":"method"}],"selectRange":[{"__symbolic":"method"}],"clearSelectionRange":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"findIndexInSelection":[{"__symbolic":"method"}],"toggleRowWithRadio":[{"__symbolic":"method"}],"toggleRowWithCheckbox":[{"__symbolic":"method"}],"toggleRowsWithCheckbox":[{"__symbolic":"method"}],"equals":[{"__symbolic":"method"}],"filter":[{"__symbolic":"method"}],"filterGlobal":[{"__symbolic":"method"}],"isFilterBlank":[{"__symbolic":"method"}],"_filter":[{"__symbolic":"method"}],"hasFilter":[{"__symbolic":"method"}],"createLazyLoadMetadata":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"exportCSV":[{"__symbolic":"method"}],"closeCellEdit":[{"__symbolic":"method"}],"toggleRow":[{"__symbolic":"method"}],"isRowExpanded":[{"__symbolic":"method"}],"isSingleSelectionMode":[{"__symbolic":"method"}],"isMultipleSelectionMode":[{"__symbolic":"method"}],"onColumnResizeBegin":[{"__symbolic":"method"}],"onColumnResize":[{"__symbolic":"method"}],"onColumnResizeEnd":[{"__symbolic":"method"}],"findParentScrollableView":[{"__symbolic":"method"}],"resizeColGroup":[{"__symbolic":"method"}],"onColumnDragStart":[{"__symbolic":"method"}],"onColumnDragEnter":[{"__symbolic":"method"}],"onColumnDragLeave":[{"__symbolic":"method"}],"onColumnDrop":[{"__symbolic":"method"}],"onRowDragStart":[{"__symbolic":"method"}],"onRowDragOver":[{"__symbolic":"method"}],"onRowDragLeave":[{"__symbolic":"method"}],"onRowDragEnd":[{"__symbolic":"method"}],"onRowDrop":[{"__symbolic":"method"}],"handleVirtualScroll":[{"__symbolic":"method"}],"isEmpty":[{"__symbolic":"method"}],"getBlockableElement":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"TableBody":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":1763,"character":1},"arguments":[{"selector":"[pTableBody]","template":"\n        <ng-container *ngIf=\"!dt.expandedRowTemplate\">\n            <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"dt.paginator ? ((dt.filteredValue||dt.value) | slice:(dt.lazy ? 0 : dt.first):((dt.lazy ? 0 : dt.first) + dt.rows)) : (dt.filteredValue||dt.value)\" [ngForTrackBy]=\"dt.rowTrackBy\">\n                <ng-container *ngTemplateOutlet=\"template; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns}\"></ng-container>\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"dt.expandedRowTemplate\">\n            <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"dt.paginator ? ((dt.filteredValue||dt.value) | slice:(dt.lazy ? 0 : dt.first):((dt.lazy ? 0 : dt.first) + dt.rows)) : (dt.filteredValue||dt.value)\" [ngForTrackBy]=\"dt.rowTrackBy\">\n                <ng-container *ngTemplateOutlet=\"template; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns, expanded: dt.isRowExpanded(rowData)}\"></ng-container>\n                <ng-container *ngIf=\"dt.isRowExpanded(rowData)\">\n                    <ng-container *ngTemplateOutlet=\"dt.expandedRowTemplate; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns}\"></ng-container>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"dt.isEmpty()\">\n            <ng-container *ngTemplateOutlet=\"dt.emptyMessageTemplate; context: {$implicit: columns}\"></ng-container>\n        </ng-container>\n    "}]}],"members":{"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":1786,"character":5},"arguments":["pTableBody"]}]}],"template":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":1788,"character":5},"arguments":["pTableBodyTemplate"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"}]}]}},"ScrollableView":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":1793,"character":1},"arguments":[{"selector":"[pScrollableView]","template":"\n        <div #scrollHeader class=\"ui-table-scrollable-header ui-widget-header\">\n            <div #scrollHeaderBox class=\"ui-table-scrollable-header-box\">\n                <table class=\"ui-table-scrollable-header-table\" [ngClass]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <thead class=\"ui-table-thead\">\n                        <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenHeaderTemplate||dt.headerTemplate : dt.headerTemplate; context {$implicit: columns}\"></ng-container>\n                    </thead>\n                    <tbody class=\"ui-table-tbody\">\n                        <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"dt.frozenValue\" [ngForTrackBy]=\"dt.rowTrackBy\">\n                            <ng-container *ngTemplateOutlet=\"dt.frozenRowsTemplate; context: {$implicit: rowData, rowIndex: rowIndex, columns: columns}\"></ng-container>\n                        </ng-template>\n                    </tbody>\n                </table>\n            </div>\n        </div>\n        <div #scrollBody class=\"ui-table-scrollable-body\">\n            <table #scrollTable [ngClass]=\"{'ui-table-scrollable-body-table': true, 'ui-table-virtual-table': dt.virtualScroll}\" [class]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                <tbody class=\"ui-table-tbody\" [pTableBody]=\"columns\" [pTableBodyTemplate]=\"frozen ? dt.frozenBodyTemplate||dt.bodyTemplate : dt.bodyTemplate\"></tbody>\n            </table>\n            <div #virtualScroller class=\"ui-table-virtual-scroller\"></div>\n        </div>\n        <div #scrollFooter *ngIf=\"dt.footerTemplate\" class=\"ui-table-scrollable-footer ui-widget-header\">\n            <div #scrollFooterBox class=\"ui-table-scrollable-footer-box\">\n                <table class=\"ui-table-scrollable-footer-table\" [ngClass]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <tfoot class=\"ui-table-tfoot\">\n                        <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenFooterTemplate||dt.footerTemplate : dt.footerTemplate; context {$implicit: columns}\"></ng-container>\n                    </tfoot>\n                </table>\n            </div>\n        </div>\n    "}]}],"members":{"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":1832,"character":5},"arguments":["pScrollableView"]}]}],"frozen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":1834,"character":5}}]}],"scrollHeaderViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":1836,"character":5},"arguments":["scrollHeader"]}]}],"scrollHeaderBoxViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":1838,"character":5},"arguments":["scrollHeaderBox"]}]}],"scrollBodyViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":1840,"character":5},"arguments":["scrollBody"]}]}],"scrollTableViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":1842,"character":5},"arguments":["scrollTable"]}]}],"scrollFooterViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":1844,"character":5},"arguments":["scrollFooter"]}]}],"scrollFooterBoxViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":1846,"character":5},"arguments":["scrollFooterBox"]}]}],"virtualScrollerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":1848,"character":5},"arguments":["virtualScroller"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":340,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":340,"character":116}]}],"scrollHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":1902,"character":5}}]}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"bindEvents":[{"__symbolic":"method"}],"unbindEvents":[{"__symbolic":"method"}],"onHeaderScroll":[{"__symbolic":"method"}],"onFooterScroll":[{"__symbolic":"method"}],"onBodyScroll":[{"__symbolic":"method"}],"setScrollHeight":[{"__symbolic":"method"}],"setVirtualScrollerHeight":[{"__symbolic":"method"}],"hasVerticalOverflow":[{"__symbolic":"method"}],"alignScrollBar":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SortableColumn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2099,"character":1},"arguments":[{"selector":"[pSortableColumn]","providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58}],"host":{"[class.ui-sortable-column]":"isEnabled()","[class.ui-state-highlight]":"sorted","$quoted$":["[class.ui-sortable-column]","[class.ui-state-highlight]"]}}]}],"members":{"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2109,"character":5},"arguments":["pSortableColumn"]}]}],"pSortableColumnDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2111,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58}]}],"ngOnInit":[{"__symbolic":"method"}],"updateSortState":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":2135,"character":5},"arguments":["click",["$event"]]}]}],"isEnabled":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SortIcon":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2161,"character":1},"arguments":[{"selector":"p-sortIcon","template":"\n        <a href=\"#\" (click)=\"onClick($event)\" [attr.aria-label]=\"ariaText\" class=\"ui-table-sort-icon\">\n            <i class=\"ui-sortable-column-icon pi pi-fw\" [ngClass]=\"{'pi-sort-up': sortOrder === 1, 'pi-sort-down': sortOrder === -1, 'pi-sort': sortOrder === 0}\"></i>\n        </a>\n    "}]}],"members":{"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2171,"character":5}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2173,"character":5}}]}],"ariaLabelDesc":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2175,"character":5}}]}],"ariaLabelAsc":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2177,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"}]}],"ngOnInit":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"updateSortState":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SelectableRow":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2234,"character":1},"arguments":[{"selector":"[pSelectableRow]","providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58}],"host":{"[class.ui-state-highlight]":"selected","$quoted$":["[class.ui-state-highlight]"]}}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2243,"character":5},"arguments":["pSelectableRow"]}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2245,"character":5},"arguments":["pSelectableRowIndex"]}]}],"pSelectableRowDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2247,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","name":"TableService"}]}],"ngOnInit":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":2267,"character":5},"arguments":["click",["$event"]]}]}],"onTouchEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":2278,"character":5},"arguments":["touchend",["$event"]]}]}],"isEnabled":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SelectableRowDblClick":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2297,"character":1},"arguments":[{"selector":"[pSelectableRowDblClick]","providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58}],"host":{"[class.ui-state-highlight]":"selected","$quoted$":["[class.ui-state-highlight]"]}}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2306,"character":5},"arguments":["pSelectableRowDblClick"]}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2308,"character":5},"arguments":["pSelectableRowIndex"]}]}],"pSelectableRowDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2310,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","name":"TableService"}]}],"ngOnInit":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":2330,"character":5},"arguments":["dblclick",["$event"]]}]}],"isEnabled":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ContextMenuRow":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2353,"character":1},"arguments":[{"selector":"[pContextMenuRow]","host":{"[class.ui-contextmenu-selected]":"selected","$quoted$":["[class.ui-contextmenu-selected]"]}}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2361,"character":5},"arguments":["pContextMenuRow"]}]}],"pContextMenuRowDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2363,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","name":"TableService"}]}],"onContextMenu":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":2377,"character":5},"arguments":["contextmenu",["$event"]]}]}],"isEnabled":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"RowToggler":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2401,"character":1},"arguments":[{"selector":"[pRowToggler]"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2406,"character":5},"arguments":["pRowToggler"]}]}],"pRowTogglerDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2408,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":2412,"character":5},"arguments":["click",["$event"]]}]}],"isEnabled":[{"__symbolic":"method"}]}},"ResizableColumn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2425,"character":1},"arguments":[{"selector":"[pResizableColumn]"}]}],"members":{"pResizableColumnDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2430,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":340,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":340,"character":116}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"bindDocumentEvents":[{"__symbolic":"method"}],"unbindDocumentEvents":[{"__symbolic":"method"}],"onMouseDown":[{"__symbolic":"method"}],"onDocumentMouseMove":[{"__symbolic":"method"}],"onDocumentMouseUp":[{"__symbolic":"method"}],"isEnabled":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ReorderableColumn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2505,"character":1},"arguments":[{"selector":"[pReorderableColumn]"}]}],"members":{"pReorderableColumnDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2510,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":340,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":340,"character":116}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"bindEvents":[{"__symbolic":"method"}],"unbindEvents":[{"__symbolic":"method"}],"onMouseDown":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method"}],"onDragOver":[{"__symbolic":"method"}],"onDragEnter":[{"__symbolic":"method"}],"onDragLeave":[{"__symbolic":"method"}],"onDrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":2599,"character":5},"arguments":["drop",["$event"]]}]}],"isEnabled":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"EditableColumn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2616,"character":1},"arguments":[{"selector":"[pEditableColumn]"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2621,"character":5},"arguments":["pEditableColumn"]}]}],"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2623,"character":5},"arguments":["pEditableColumnField"]}]}],"pEditableColumnDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2625,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":340,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":340,"character":116}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"isValid":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":2639,"character":5},"arguments":["click",["$event"]]}]}],"openCell":[{"__symbolic":"method"}],"closeEditingCell":[{"__symbolic":"method"}],"onKeyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":2677,"character":5},"arguments":["keydown",["$event"]]}]}],"findCell":[{"__symbolic":"method"}],"moveToPreviousCell":[{"__symbolic":"method"}],"moveToNextCell":[{"__symbolic":"method"}],"findPreviousEditableColumn":[{"__symbolic":"method"}],"findNextEditableColumn":[{"__symbolic":"method"}],"isEnabled":[{"__symbolic":"method"}]}},"CellEditor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2796,"character":1},"arguments":[{"selector":"p-cellEditor","template":"\n        <ng-container *ngIf=\"dt.editingCell === editableColumn.el.nativeElement\">\n            <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!dt.editingCell || dt.editingCell !== editableColumn.el.nativeElement\">\n            <ng-container *ngTemplateOutlet=\"outputTemplate\"></ng-container>\n        </ng-container>\n    "}]}],"members":{"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":2809,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":2809,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","name":"EditableColumn"}]}],"ngAfterContentInit":[{"__symbolic":"method"}]}},"TableRadioButton":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2833,"character":1},"arguments":[{"selector":"p-tableRadioButton","template":"\n        <div class=\"ui-radiobutton ui-widget\" (click)=\"onClick($event)\">\n            <div class=\"ui-helper-hidden-accessible\">\n                <input type=\"radio\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [disabled]=\"disabled\">\n            </div>\n            <div #box [ngClass]=\"{'ui-radiobutton-box ui-widget ui-state-default':true,\n                'ui-state-active':checked, 'ui-state-disabled':disabled}\">\n                <span class=\"ui-radiobutton-icon ui-clickable\" [ngClass]=\"{'pi pi-circle-on':checked}\"></span>\n            </div>\n        </div>\n    "}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2849,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2851,"character":5}}]}],"boxViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":2853,"character":5},"arguments":["box"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","name":"TableService"}]}],"ngOnInit":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"TableCheckbox":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2892,"character":1},"arguments":[{"selector":"p-tableCheckbox","template":"\n        <div class=\"ui-chkbox ui-widget\" (click)=\"onClick($event)\">\n            <div class=\"ui-helper-hidden-accessible\">\n                <input type=\"checkbox\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [disabled]=\"disabled\">\n            </div>\n            <div #box [ngClass]=\"{'ui-chkbox-box ui-widget ui-state-default':true,\n                'ui-state-active':checked, 'ui-state-disabled':disabled}\">\n                <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'pi pi-check':checked}\"></span>\n            </div>\n        </div>\n    "}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2908,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2910,"character":5}}]}],"boxViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":2912,"character":5},"arguments":["box"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","name":"TableService"}]}],"ngOnInit":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"TableHeaderCheckbox":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2951,"character":1},"arguments":[{"selector":"p-tableHeaderCheckbox","template":"\n        <div class=\"ui-chkbox ui-widget\" (click)=\"onClick($event, cb.checked)\">\n            <div class=\"ui-helper-hidden-accessible\">\n                <input #cb type=\"checkbox\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [disabled]=\"isDisabled()\">\n            </div>\n            <div #box [ngClass]=\"{'ui-chkbox-box ui-widget ui-state-default':true,\n                'ui-state-active':checked, 'ui-state-disabled': isDisabled()}\">\n                <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'pi pi-check':checked}\"></span>\n            </div>\n        </div>\n    "}]}],"members":{"boxViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":2967,"character":5},"arguments":["box"]}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2969,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","name":"TableService"}]}],"ngOnInit":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"isDisabled":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"updateCheckedState":[{"__symbolic":"method"}]}},"ReorderableRowHandle":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3028,"character":1},"arguments":[{"selector":"[pReorderableRowHandle]"}]}],"members":{"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":3033,"character":5},"arguments":["pReorderableRowHandle"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":340,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58}]}],"ngAfterViewInit":[{"__symbolic":"method"}]}},"ReorderableRow":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3042,"character":1},"arguments":[{"selector":"[pReorderableRow]"}]}],"members":{"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":3047,"character":5},"arguments":["pReorderableRow"]}]}],"pReorderableRowDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":3049,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":340,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":340,"character":116}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"bindEvents":[{"__symbolic":"method"}],"unbindEvents":[{"__symbolic":"method"}],"onMouseDown":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method"}],"onDragEnd":[{"__symbolic":"method"}],"onDragOver":[{"__symbolic":"method"}],"onDragLeave":[{"__symbolic":"method"}],"isEnabled":[{"__symbolic":"method"}],"onDrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":3147,"character":5},"arguments":["drop",["$event"]]}]}]}},"TableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":3157,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":3158,"character":14},{"__symbolic":"reference","module":"../paginator/paginator","name":"PaginatorModule","line":3158,"character":27}],"exports":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":3159,"character":20},{"__symbolic":"reference","name":"SortableColumn"},{"__symbolic":"reference","name":"SelectableRow"},{"__symbolic":"reference","name":"RowToggler"},{"__symbolic":"reference","name":"ContextMenuRow"},{"__symbolic":"reference","name":"ResizableColumn"},{"__symbolic":"reference","name":"ReorderableColumn"},{"__symbolic":"reference","name":"EditableColumn"},{"__symbolic":"reference","name":"CellEditor"},{"__symbolic":"reference","name":"SortIcon"},{"__symbolic":"reference","name":"TableRadioButton"},{"__symbolic":"reference","name":"TableCheckbox"},{"__symbolic":"reference","name":"TableHeaderCheckbox"},{"__symbolic":"reference","name":"ReorderableRowHandle"},{"__symbolic":"reference","name":"ReorderableRow"},{"__symbolic":"reference","name":"SelectableRowDblClick"}],"declarations":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","name":"SortableColumn"},{"__symbolic":"reference","name":"SelectableRow"},{"__symbolic":"reference","name":"RowToggler"},{"__symbolic":"reference","name":"ContextMenuRow"},{"__symbolic":"reference","name":"ResizableColumn"},{"__symbolic":"reference","name":"ReorderableColumn"},{"__symbolic":"reference","name":"EditableColumn"},{"__symbolic":"reference","name":"CellEditor"},{"__symbolic":"reference","name":"TableBody"},{"__symbolic":"reference","name":"ScrollableView"},{"__symbolic":"reference","name":"SortIcon"},{"__symbolic":"reference","name":"TableRadioButton"},{"__symbolic":"reference","name":"TableCheckbox"},{"__symbolic":"reference","name":"TableHeaderCheckbox"},{"__symbolic":"reference","name":"ReorderableRowHandle"},{"__symbolic":"reference","name":"ReorderableRow"},{"__symbolic":"reference","name":"SelectableRowDblClick"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"TableService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":13,"character":1}}],"members":{"onSort":[{"__symbolic":"method"}],"onSelectionChange":[{"__symbolic":"method"}],"onContextMenu":[{"__symbolic":"method"}],"onValueChange":[{"__symbolic":"method"}],"onTotalRecordsChange":[{"__symbolic":"method"}],"onColumnsChange":[{"__symbolic":"method"}]}},"Table":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":55,"character":1},"arguments":[{"selector":"p-table","template":"\n        <div #container [ngStyle]=\"style\" [class]=\"styleClass\"\n            [ngClass]=\"{'ui-table ui-widget': true, 'ui-table-responsive': responsive, 'ui-table-resizable': resizableColumns,\n                'ui-table-resizable-fit': (resizableColumns && columnResizeMode === 'fit'),\n                'ui-table-hoverable-rows': (rowHover||selectionMode), 'ui-table-auto-layout': autoLayout}\">\n            <div class=\"ui-table-loading ui-widget-overlay\" *ngIf=\"loading\"></div>\n            <div class=\"ui-table-loading-content\" *ngIf=\"loading\">\n                <i [class]=\"'ui-table-loading-icon pi-spin ' + loadingIcon\"></i>\n            </div>\n            <div *ngIf=\"captionTemplate\" class=\"ui-table-caption ui-widget-header\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </div>\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" styleClass=\"ui-paginator-top\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"onPageChange($event)\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && (paginatorPosition === 'top' || paginatorPosition =='both')\"\n                [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\" [dropdownAppendTo]=\"paginatorDropdownAppendTo\"></p-paginator>\n            \n            <div class=\"ui-table-wrapper\" *ngIf=\"!scrollable\">\n                <table #table [ngClass]=\"tableStyleClass\" [ngStyle]=\"tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <thead class=\"ui-table-thead\">\n                        <ng-container *ngTemplateOutlet=\"headerTemplate; context: {$implicit: columns}\"></ng-container>\n                    </thead>\n                    <tfoot class=\"ui-table-tfoot\">\n                        <ng-container *ngTemplateOutlet=\"footerTemplate; context {$implicit: columns}\"></ng-container>\n                    </tfoot>\n                    <tbody class=\"ui-table-tbody\" [pTableBody]=\"columns\" [pTableBodyTemplate]=\"bodyTemplate\"></tbody>\n                </table>\n            </div>\n\n            <div class=\"ui-table-scrollable-wrapper\" *ngIf=\"scrollable\">\n               <div class=\"ui-table-scrollable-view ui-table-frozen-view\" *ngIf=\"frozenColumns||frozenBodyTemplate\" [pScrollableView]=\"frozenColumns\" [frozen]=\"true\" [ngStyle]=\"{width: frozenWidth}\" [scrollHeight]=\"scrollHeight\"></div>\n               <div class=\"ui-table-scrollable-view\" [pScrollableView]=\"columns\" [frozen]=\"false\" [scrollHeight]=\"scrollHeight\"></div>\n            </div>\n            \n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" styleClass=\"ui-paginator-bottom\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"onPageChange($event)\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && (paginatorPosition === 'bottom' || paginatorPosition =='both')\"\n                [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\" [dropdownAppendTo]=\"paginatorDropdownAppendTo\"></p-paginator>\n            <div *ngIf=\"summaryTemplate\" class=\"ui-table-summary ui-widget-header\">\n                <ng-container *ngTemplateOutlet=\"summaryTemplate\"></ng-container>\n            </div>\n\n            <div #resizeHelper class=\"ui-column-resizer-helper ui-state-highlight\" style=\"display:none\" *ngIf=\"resizableColumns\"></div>\n\n            <span #reorderIndicatorUp class=\"pi pi-arrow-down ui-table-reorder-indicator-up\" style=\"display:none\" *ngIf=\"reorderableColumns\"></span>\n            <span #reorderIndicatorDown class=\"pi pi-arrow-up ui-table-reorder-indicator-down\" style=\"display:none\" *ngIf=\"reorderableColumns\"></span>\n        </div>\n    ","providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":104,"character":16},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":104,"character":28},{"__symbolic":"reference","name":"TableService"}]}]}],"members":{"frozenColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":5}}]}],"frozenValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":5}}]}],"tableStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":116,"character":5}}]}],"tableStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":5}}]}],"paginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":5}}]}],"rows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":5}}]}],"first":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":5}}]}],"pageLinks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":5}}]}],"rowsPerPageOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":5}}]}],"alwaysShowPaginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":130,"character":5}}]}],"paginatorPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":5}}]}],"paginatorDropdownAppendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":5}}]}],"defaultSortOrder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":136,"character":5}}]}],"sortMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":5}}]}],"resetPageOnSort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":140,"character":5}}]}],"selectionMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"character":5}}]}],"selectionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":144,"character":5}}]}],"contextMenuSelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":146,"character":5}}]}],"contextMenuSelectionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":148,"character":5}}]}],"contextMenuSelectionMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":150,"character":5}}]}],"dataKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":152,"character":5}}]}],"metaKeySelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":154,"character":5}}]}],"rowTrackBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":156,"character":5}}]}],"lazy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":158,"character":5}}]}],"lazyLoadOnInit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":160,"character":5}}]}],"compareSelectionBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":162,"character":5}}]}],"csvSeparator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":164,"character":5}}]}],"exportFilename":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":166,"character":5}}]}],"filters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":168,"character":5}}]}],"globalFilterFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":170,"character":5}}]}],"filterDelay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":172,"character":5}}]}],"expandedRowKeys":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":174,"character":5}}]}],"rowExpandMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":176,"character":5}}]}],"scrollable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":178,"character":5}}]}],"scrollHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":180,"character":5}}]}],"virtualScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":182,"character":5}}]}],"virtualScrollDelay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":184,"character":5}}]}],"virtualRowHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":186,"character":5}}]}],"frozenWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":188,"character":5}}]}],"responsive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":190,"character":5}}]}],"contextMenu":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":192,"character":5}}]}],"resizableColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":194,"character":5}}]}],"columnResizeMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":196,"character":5}}]}],"reorderableColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":198,"character":5}}]}],"loading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":200,"character":5}}]}],"loadingIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":202,"character":5}}]}],"rowHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":204,"character":5}}]}],"customSort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":206,"character":5}}]}],"autoLayout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":208,"character":5}}]}],"exportFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":210,"character":5}}]}],"onRowSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":212,"character":5}}]}],"onRowUnselect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":214,"character":5}}]}],"onPage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":216,"character":5}}]}],"onSort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":218,"character":5}}]}],"onFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":220,"character":5}}]}],"onLazyLoad":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":222,"character":5}}]}],"onRowExpand":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":224,"character":5}}]}],"onRowCollapse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":226,"character":5}}]}],"onContextMenuSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":228,"character":5}}]}],"onColResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":230,"character":5}}]}],"onColReorder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":232,"character":5}}]}],"onRowReorder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":234,"character":5}}]}],"onEditInit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":236,"character":5}}]}],"onEditComplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":238,"character":5}}]}],"onEditCancel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":240,"character":5}}]}],"onHeaderCheckboxToggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":242,"character":5}}]}],"sortFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":244,"character":5}}]}],"containerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":246,"character":5},"arguments":["container"]}]}],"resizeHelperViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":248,"character":5},"arguments":["resizeHelper"]}]}],"reorderIndicatorUpViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":250,"character":5},"arguments":["reorderIndicatorUp"]}]}],"reorderIndicatorDownViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":252,"character":5},"arguments":["reorderIndicatorDown"]}]}],"tableViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":254,"character":5},"arguments":["table"]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":256,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":256,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":340,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","module":"../utils/objectutils","name":"ObjectUtils","line":340,"character":90},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":340,"character":116},{"__symbolic":"reference","name":"TableService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":415,"character":5}}]}],"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":439,"character":5}}]}],"totalRecords":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":447,"character":5}}]}],"sortField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":455,"character":5}}]}],"sortOrder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":470,"character":5}}]}],"multiSortMeta":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":484,"character":5}}]}],"selection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":495,"character":5}}]}],"updateSelectionKeys":[{"__symbolic":"method"}],"onPageChange":[{"__symbolic":"method"}],"sort":[{"__symbolic":"method"}],"sortSingle":[{"__symbolic":"method"}],"sortMultiple":[{"__symbolic":"method"}],"multisortField":[{"__symbolic":"method"}],"getSortMeta":[{"__symbolic":"method"}],"isSorted":[{"__symbolic":"method"}],"handleRowClick":[{"__symbolic":"method"}],"handleRowTouchEnd":[{"__symbolic":"method"}],"handleRowRightClick":[{"__symbolic":"method"}],"selectRange":[{"__symbolic":"method"}],"clearSelectionRange":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"findIndexInSelection":[{"__symbolic":"method"}],"toggleRowWithRadio":[{"__symbolic":"method"}],"toggleRowWithCheckbox":[{"__symbolic":"method"}],"toggleRowsWithCheckbox":[{"__symbolic":"method"}],"equals":[{"__symbolic":"method"}],"filter":[{"__symbolic":"method"}],"filterGlobal":[{"__symbolic":"method"}],"isFilterBlank":[{"__symbolic":"method"}],"_filter":[{"__symbolic":"method"}],"hasFilter":[{"__symbolic":"method"}],"createLazyLoadMetadata":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"exportCSV":[{"__symbolic":"method"}],"closeCellEdit":[{"__symbolic":"method"}],"toggleRow":[{"__symbolic":"method"}],"isRowExpanded":[{"__symbolic":"method"}],"isSingleSelectionMode":[{"__symbolic":"method"}],"isMultipleSelectionMode":[{"__symbolic":"method"}],"onColumnResizeBegin":[{"__symbolic":"method"}],"onColumnResize":[{"__symbolic":"method"}],"onColumnResizeEnd":[{"__symbolic":"method"}],"findParentScrollableView":[{"__symbolic":"method"}],"resizeColGroup":[{"__symbolic":"method"}],"onColumnDragStart":[{"__symbolic":"method"}],"onColumnDragEnter":[{"__symbolic":"method"}],"onColumnDragLeave":[{"__symbolic":"method"}],"onColumnDrop":[{"__symbolic":"method"}],"onRowDragStart":[{"__symbolic":"method"}],"onRowDragOver":[{"__symbolic":"method"}],"onRowDragLeave":[{"__symbolic":"method"}],"onRowDragEnd":[{"__symbolic":"method"}],"onRowDrop":[{"__symbolic":"method"}],"handleVirtualScroll":[{"__symbolic":"method"}],"isEmpty":[{"__symbolic":"method"}],"getBlockableElement":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"TableBody":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":1763,"character":1},"arguments":[{"selector":"[pTableBody]","template":"\n        <ng-container *ngIf=\"!dt.expandedRowTemplate\">\n            <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"(dt.paginator && !dt.lazy) ? ((dt.filteredValue||dt.value) | slice:dt.first:(dt.first + dt.rows)) : (dt.filteredValue||dt.value)\" [ngForTrackBy]=\"dt.rowTrackBy\">\n                <ng-container *ngTemplateOutlet=\"template; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns}\"></ng-container>\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"dt.expandedRowTemplate\">\n            <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"(dt.paginator && !dt.lazy) ? ((dt.filteredValue||dt.value) | slice:dt.first:(dt.first + dt.rows)) : (dt.filteredValue||dt.value)\" [ngForTrackBy]=\"dt.rowTrackBy\">\n                <ng-container *ngTemplateOutlet=\"template; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns, expanded: dt.isRowExpanded(rowData)}\"></ng-container>\n                <ng-container *ngIf=\"dt.isRowExpanded(rowData)\">\n                    <ng-container *ngTemplateOutlet=\"dt.expandedRowTemplate; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns}\"></ng-container>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"dt.isEmpty()\">\n            <ng-container *ngTemplateOutlet=\"dt.emptyMessageTemplate; context: {$implicit: columns}\"></ng-container>\n        </ng-container>\n    "}]}],"members":{"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":1786,"character":5},"arguments":["pTableBody"]}]}],"template":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":1788,"character":5},"arguments":["pTableBodyTemplate"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"}]}]}},"ScrollableView":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":1793,"character":1},"arguments":[{"selector":"[pScrollableView]","template":"\n        <div #scrollHeader class=\"ui-table-scrollable-header ui-widget-header\">\n            <div #scrollHeaderBox class=\"ui-table-scrollable-header-box\">\n                <table class=\"ui-table-scrollable-header-table\" [ngClass]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <thead class=\"ui-table-thead\">\n                        <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenHeaderTemplate||dt.headerTemplate : dt.headerTemplate; context {$implicit: columns}\"></ng-container>\n                    </thead>\n                    <tbody class=\"ui-table-tbody\">\n                        <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"dt.frozenValue\" [ngForTrackBy]=\"dt.rowTrackBy\">\n                            <ng-container *ngTemplateOutlet=\"dt.frozenRowsTemplate; context: {$implicit: rowData, rowIndex: rowIndex, columns: columns}\"></ng-container>\n                        </ng-template>\n                    </tbody>\n                </table>\n            </div>\n        </div>\n        <div #scrollBody class=\"ui-table-scrollable-body\">\n            <table #scrollTable [ngClass]=\"{'ui-table-scrollable-body-table': true, 'ui-table-virtual-table': dt.virtualScroll}\" [class]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                <tbody class=\"ui-table-tbody\" [pTableBody]=\"columns\" [pTableBodyTemplate]=\"frozen ? dt.frozenBodyTemplate||dt.bodyTemplate : dt.bodyTemplate\"></tbody>\n            </table>\n            <div #virtualScroller class=\"ui-table-virtual-scroller\"></div>\n        </div>\n        <div #scrollFooter *ngIf=\"dt.footerTemplate\" class=\"ui-table-scrollable-footer ui-widget-header\">\n            <div #scrollFooterBox class=\"ui-table-scrollable-footer-box\">\n                <table class=\"ui-table-scrollable-footer-table\" [ngClass]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <tfoot class=\"ui-table-tfoot\">\n                        <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenFooterTemplate||dt.footerTemplate : dt.footerTemplate; context {$implicit: columns}\"></ng-container>\n                    </tfoot>\n                </table>\n            </div>\n        </div>\n    "}]}],"members":{"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":1832,"character":5},"arguments":["pScrollableView"]}]}],"frozen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":1834,"character":5}}]}],"scrollHeaderViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":1836,"character":5},"arguments":["scrollHeader"]}]}],"scrollHeaderBoxViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":1838,"character":5},"arguments":["scrollHeaderBox"]}]}],"scrollBodyViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":1840,"character":5},"arguments":["scrollBody"]}]}],"scrollTableViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":1842,"character":5},"arguments":["scrollTable"]}]}],"scrollFooterViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":1844,"character":5},"arguments":["scrollFooter"]}]}],"scrollFooterBoxViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":1846,"character":5},"arguments":["scrollFooterBox"]}]}],"virtualScrollerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":1848,"character":5},"arguments":["virtualScroller"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":340,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":340,"character":116}]}],"scrollHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":1892,"character":5}}]}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"bindEvents":[{"__symbolic":"method"}],"unbindEvents":[{"__symbolic":"method"}],"onHeaderScroll":[{"__symbolic":"method"}],"onFooterScroll":[{"__symbolic":"method"}],"onBodyScroll":[{"__symbolic":"method"}],"setScrollHeight":[{"__symbolic":"method"}],"setVirtualScrollerHeight":[{"__symbolic":"method"}],"hasVerticalOverflow":[{"__symbolic":"method"}],"alignScrollBar":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SortableColumn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2099,"character":1},"arguments":[{"selector":"[pSortableColumn]","providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58}],"host":{"[class.ui-sortable-column]":"isEnabled()","[class.ui-state-highlight]":"sorted","$quoted$":["[class.ui-sortable-column]","[class.ui-state-highlight]"]}}]}],"members":{"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2109,"character":5},"arguments":["pSortableColumn"]}]}],"pSortableColumnDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2111,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58}]}],"ngOnInit":[{"__symbolic":"method"}],"updateSortState":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":2135,"character":5},"arguments":["click",["$event"]]}]}],"isEnabled":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SortIcon":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2161,"character":1},"arguments":[{"selector":"p-sortIcon","template":"\n        <a href=\"#\" (click)=\"onClick($event)\" [attr.aria-label]=\"ariaText\" class=\"ui-table-sort-icon\">\n            <i class=\"ui-sortable-column-icon pi pi-fw\" [ngClass]=\"{'pi-sort-up': sortOrder === 1, 'pi-sort-down': sortOrder === -1, 'pi-sort': sortOrder === 0}\"></i>\n        </a>\n    "}]}],"members":{"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2171,"character":5}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2173,"character":5}}]}],"ariaLabelDesc":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2175,"character":5}}]}],"ariaLabelAsc":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2177,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"}]}],"ngOnInit":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"updateSortState":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SelectableRow":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2234,"character":1},"arguments":[{"selector":"[pSelectableRow]","providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58}],"host":{"[class.ui-state-highlight]":"selected","$quoted$":["[class.ui-state-highlight]"]}}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2243,"character":5},"arguments":["pSelectableRow"]}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2245,"character":5},"arguments":["pSelectableRowIndex"]}]}],"pSelectableRowDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2247,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","name":"TableService"}]}],"ngOnInit":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":2267,"character":5},"arguments":["click",["$event"]]}]}],"onTouchEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":2278,"character":5},"arguments":["touchend",["$event"]]}]}],"isEnabled":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SelectableRowDblClick":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2297,"character":1},"arguments":[{"selector":"[pSelectableRowDblClick]","providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58}],"host":{"[class.ui-state-highlight]":"selected","$quoted$":["[class.ui-state-highlight]"]}}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2306,"character":5},"arguments":["pSelectableRowDblClick"]}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2308,"character":5},"arguments":["pSelectableRowIndex"]}]}],"pSelectableRowDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2310,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","name":"TableService"}]}],"ngOnInit":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":2330,"character":5},"arguments":["dblclick",["$event"]]}]}],"isEnabled":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ContextMenuRow":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2353,"character":1},"arguments":[{"selector":"[pContextMenuRow]","host":{"[class.ui-contextmenu-selected]":"selected","$quoted$":["[class.ui-contextmenu-selected]"]}}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2361,"character":5},"arguments":["pContextMenuRow"]}]}],"pContextMenuRowDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2363,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","name":"TableService"}]}],"onContextMenu":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":2377,"character":5},"arguments":["contextmenu",["$event"]]}]}],"isEnabled":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"RowToggler":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2401,"character":1},"arguments":[{"selector":"[pRowToggler]"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2406,"character":5},"arguments":["pRowToggler"]}]}],"pRowTogglerDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2408,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":2412,"character":5},"arguments":["click",["$event"]]}]}],"isEnabled":[{"__symbolic":"method"}]}},"ResizableColumn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2425,"character":1},"arguments":[{"selector":"[pResizableColumn]"}]}],"members":{"pResizableColumnDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2430,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":340,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":340,"character":116}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"bindDocumentEvents":[{"__symbolic":"method"}],"unbindDocumentEvents":[{"__symbolic":"method"}],"onMouseDown":[{"__symbolic":"method"}],"onDocumentMouseMove":[{"__symbolic":"method"}],"onDocumentMouseUp":[{"__symbolic":"method"}],"isEnabled":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ReorderableColumn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2505,"character":1},"arguments":[{"selector":"[pReorderableColumn]"}]}],"members":{"pReorderableColumnDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2510,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":340,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":340,"character":116}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"bindEvents":[{"__symbolic":"method"}],"unbindEvents":[{"__symbolic":"method"}],"onMouseDown":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method"}],"onDragOver":[{"__symbolic":"method"}],"onDragEnter":[{"__symbolic":"method"}],"onDragLeave":[{"__symbolic":"method"}],"onDrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":2599,"character":5},"arguments":["drop",["$event"]]}]}],"isEnabled":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"EditableColumn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2616,"character":1},"arguments":[{"selector":"[pEditableColumn]"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2621,"character":5},"arguments":["pEditableColumn"]}]}],"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2623,"character":5},"arguments":["pEditableColumnField"]}]}],"pEditableColumnDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2625,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":340,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":340,"character":116}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"isValid":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":2639,"character":5},"arguments":["click",["$event"]]}]}],"openCell":[{"__symbolic":"method"}],"closeEditingCell":[{"__symbolic":"method"}],"onKeyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":2677,"character":5},"arguments":["keydown",["$event"]]}]}],"findCell":[{"__symbolic":"method"}],"moveToPreviousCell":[{"__symbolic":"method"}],"moveToNextCell":[{"__symbolic":"method"}],"findPreviousEditableColumn":[{"__symbolic":"method"}],"findNextEditableColumn":[{"__symbolic":"method"}],"isEnabled":[{"__symbolic":"method"}]}},"CellEditor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2796,"character":1},"arguments":[{"selector":"p-cellEditor","template":"\n        <ng-container *ngIf=\"dt.editingCell === editableColumn.el.nativeElement\">\n            <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!dt.editingCell || dt.editingCell !== editableColumn.el.nativeElement\">\n            <ng-container *ngTemplateOutlet=\"outputTemplate\"></ng-container>\n        </ng-container>\n    "}]}],"members":{"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":2809,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":2809,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","name":"EditableColumn"}]}],"ngAfterContentInit":[{"__symbolic":"method"}]}},"TableRadioButton":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2833,"character":1},"arguments":[{"selector":"p-tableRadioButton","template":"\n        <div class=\"ui-radiobutton ui-widget\" (click)=\"onClick($event)\">\n            <div class=\"ui-helper-hidden-accessible\">\n                <input type=\"radio\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [disabled]=\"disabled\">\n            </div>\n            <div #box [ngClass]=\"{'ui-radiobutton-box ui-widget ui-state-default':true,\n                'ui-state-active':checked, 'ui-state-disabled':disabled}\">\n                <span class=\"ui-radiobutton-icon ui-clickable\" [ngClass]=\"{'pi pi-circle-on':checked}\"></span>\n            </div>\n        </div>\n    "}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2849,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2851,"character":5}}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2853,"character":5}}]}],"boxViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":2855,"character":5},"arguments":["box"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","name":"TableService"}]}],"ngOnInit":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"TableCheckbox":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2897,"character":1},"arguments":[{"selector":"p-tableCheckbox","template":"\n        <div class=\"ui-chkbox ui-widget\" (click)=\"onClick($event)\">\n            <div class=\"ui-helper-hidden-accessible\">\n                <input type=\"checkbox\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [disabled]=\"disabled\">\n            </div>\n            <div #box [ngClass]=\"{'ui-chkbox-box ui-widget ui-state-default':true,\n                'ui-state-active':checked, 'ui-state-disabled':disabled}\">\n                <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'pi pi-check':checked}\"></span>\n            </div>\n        </div>\n    "}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2913,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2915,"character":5}}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2917,"character":5}}]}],"boxViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":2919,"character":5},"arguments":["box"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","name":"TableService"}]}],"ngOnInit":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"TableHeaderCheckbox":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2961,"character":1},"arguments":[{"selector":"p-tableHeaderCheckbox","template":"\n        <div class=\"ui-chkbox ui-widget\" (click)=\"onClick($event, cb.checked)\">\n            <div class=\"ui-helper-hidden-accessible\">\n                <input #cb type=\"checkbox\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [disabled]=\"isDisabled()\">\n            </div>\n            <div #box [ngClass]=\"{'ui-chkbox-box ui-widget ui-state-default':true,\n                'ui-state-active':checked, 'ui-state-disabled': isDisabled()}\">\n                <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'pi pi-check':checked}\"></span>\n            </div>\n        </div>\n    "}]}],"members":{"boxViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":2977,"character":5},"arguments":["box"]}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":2979,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","name":"TableService"}]}],"ngOnInit":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"isDisabled":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"updateCheckedState":[{"__symbolic":"method"}]}},"ReorderableRowHandle":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3040,"character":1},"arguments":[{"selector":"[pReorderableRowHandle]"}]}],"members":{"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":3045,"character":5},"arguments":["pReorderableRowHandle"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":340,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58}]}],"ngAfterViewInit":[{"__symbolic":"method"}]}},"ReorderableRow":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3054,"character":1},"arguments":[{"selector":"[pReorderableRow]"}]}],"members":{"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":3059,"character":5},"arguments":["pReorderableRow"]}]}],"pReorderableRowDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":3061,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":340,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":340,"character":58},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":340,"character":116}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"bindEvents":[{"__symbolic":"method"}],"unbindEvents":[{"__symbolic":"method"}],"onMouseDown":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method"}],"onDragEnd":[{"__symbolic":"method"}],"onDragOver":[{"__symbolic":"method"}],"onDragLeave":[{"__symbolic":"method"}],"isEnabled":[{"__symbolic":"method"}],"onDrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":3159,"character":5},"arguments":["drop",["$event"]]}]}]}},"TableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":3169,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":3170,"character":14},{"__symbolic":"reference","module":"../paginator/paginator","name":"PaginatorModule","line":3170,"character":27}],"exports":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":3171,"character":20},{"__symbolic":"reference","name":"SortableColumn"},{"__symbolic":"reference","name":"SelectableRow"},{"__symbolic":"reference","name":"RowToggler"},{"__symbolic":"reference","name":"ContextMenuRow"},{"__symbolic":"reference","name":"ResizableColumn"},{"__symbolic":"reference","name":"ReorderableColumn"},{"__symbolic":"reference","name":"EditableColumn"},{"__symbolic":"reference","name":"CellEditor"},{"__symbolic":"reference","name":"SortIcon"},{"__symbolic":"reference","name":"TableRadioButton"},{"__symbolic":"reference","name":"TableCheckbox"},{"__symbolic":"reference","name":"TableHeaderCheckbox"},{"__symbolic":"reference","name":"ReorderableRowHandle"},{"__symbolic":"reference","name":"ReorderableRow"},{"__symbolic":"reference","name":"SelectableRowDblClick"}],"declarations":[{"__symbolic":"reference","name":"Table"},{"__symbolic":"reference","name":"SortableColumn"},{"__symbolic":"reference","name":"SelectableRow"},{"__symbolic":"reference","name":"RowToggler"},{"__symbolic":"reference","name":"ContextMenuRow"},{"__symbolic":"reference","name":"ResizableColumn"},{"__symbolic":"reference","name":"ReorderableColumn"},{"__symbolic":"reference","name":"EditableColumn"},{"__symbolic":"reference","name":"CellEditor"},{"__symbolic":"reference","name":"TableBody"},{"__symbolic":"reference","name":"ScrollableView"},{"__symbolic":"reference","name":"SortIcon"},{"__symbolic":"reference","name":"TableRadioButton"},{"__symbolic":"reference","name":"TableCheckbox"},{"__symbolic":"reference","name":"TableHeaderCheckbox"},{"__symbolic":"reference","name":"ReorderableRowHandle"},{"__symbolic":"reference","name":"ReorderableRow"},{"__symbolic":"reference","name":"SelectableRowDblClick"}]}]}]}}}]

components/tabview/tabview.js

@@ -68,3 +68,3 @@ "use strict";
             },
-            template: "\n        <ng-template ngFor let-tab [ngForOf]=\"tabs\">\n            <li [class]=\"getDefaultHeaderClass(tab)\" [ngStyle]=\"tab.headerStyle\" role=\"presentation\"\n                [ngClass]=\"{'ui-tabview-selected ui-state-active': tab.selected, 'ui-state-disabled': tab.disabled}\"\n                (click)=\"clickTab($event,tab)\" *ngIf=\"!tab.closed\">\n                <a [attr.id]=\"tab.id + '-label'\" href=\"#\" role=\"tab\" [attr.aria-selected]=\"tab.selected\" [attr.aria-controls]=\"tab.id\" [pTooltip]=\"tab.tooltip\" [tooltipPosition]=\"orientation\">\n                    <ng-container *ngIf=\"!tab.headerTemplate\">\n                        <span class=\"ui-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon\"></span>\n                        <span class=\"ui-tabview-title\">{{tab.header}}</span>\n                        <span class=\"ui-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon\"></span>\n                    </ng-container>\n                    <ng-container *ngIf=\"tab.headerTemplate\">\n                        <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n                    </ng-container>\n                </a>\n                <span *ngIf=\"tab.closable\" class=\"ui-tabview-close pi pi-times\" (click)=\"clickClose($event,tab)\"></span>\n            </li>\n        </ng-template>\n    ",
+            template: "\n        <ng-template ngFor let-tab [ngForOf]=\"tabs\">\n            <li [class]=\"getDefaultHeaderClass(tab)\" [ngStyle]=\"tab.headerStyle\" role=\"presentation\"\n                [ngClass]=\"{'ui-tabview-selected ui-state-active': tab.selected, 'ui-state-disabled': tab.disabled}\"\n                (click)=\"clickTab($event,tab)\" *ngIf=\"!tab.closed\" tabindex=\"0\" (keydown.enter)=\"clickTab($event,tab)\">\n                <a [attr.id]=\"tab.id + '-label'\" role=\"tab\" [attr.aria-selected]=\"tab.selected\" [attr.aria-controls]=\"tab.id\" [pTooltip]=\"tab.tooltip\" [tooltipPosition]=\"orientation\">\n                    <ng-container *ngIf=\"!tab.headerTemplate\" >\n                        <span class=\"ui-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon\"></span>\n                        <span class=\"ui-tabview-title\">{{tab.header}}</span>\n                        <span class=\"ui-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon\"></span>\n                    </ng-container>\n                    <ng-container *ngIf=\"tab.headerTemplate\">\n                        <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n                    </ng-container>\n                </a>\n                <span *ngIf=\"tab.closable\" class=\"ui-tabview-close pi pi-times\" (click)=\"clickClose($event,tab)\"></span>\n            </li>\n        </ng-template>\n    ",
         })
@@ -71,0 +71,0 @@ ], TabViewNav);

components/tabview/tabview.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"TabViewNav":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"[p-tabViewNav]","host":{"[class.ui-tabview-nav]":"true","[class.ui-helper-reset]":"true","[class.ui-helper-clearfix]":"true","[class.ui-widget-header]":"true","[class.ui-corner-all]":"true","$quoted$":["[class.ui-tabview-nav]","[class.ui-helper-reset]","[class.ui-helper-clearfix]","[class.ui-widget-header]","[class.ui-corner-all]"]},"template":"\n        <ng-template ngFor let-tab [ngForOf]=\"tabs\">\n            <li [class]=\"getDefaultHeaderClass(tab)\" [ngStyle]=\"tab.headerStyle\" role=\"presentation\"\n                [ngClass]=\"{'ui-tabview-selected ui-state-active': tab.selected, 'ui-state-disabled': tab.disabled}\"\n                (click)=\"clickTab($event,tab)\" *ngIf=\"!tab.closed\">\n                <a [attr.id]=\"tab.id + '-label'\" href=\"#\" role=\"tab\" [attr.aria-selected]=\"tab.selected\" [attr.aria-controls]=\"tab.id\" [pTooltip]=\"tab.tooltip\" [tooltipPosition]=\"orientation\">\n                    <ng-container *ngIf=\"!tab.headerTemplate\">\n                        <span class=\"ui-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon\"></span>\n                        <span class=\"ui-tabview-title\">{{tab.header}}</span>\n                        <span class=\"ui-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon\"></span>\n                    </ng-container>\n                    <ng-container *ngIf=\"tab.headerTemplate\">\n                        <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n                    </ng-container>\n                </a>\n                <span *ngIf=\"tab.closable\" class=\"ui-tabview-close pi pi-times\" (click)=\"clickClose($event,tab)\"></span>\n            </li>\n        </ng-template>\n    "}]}],"members":{"tabs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"orientation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"onTabClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":44,"character":5}}]}],"onTabCloseClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":46,"character":5}}]}],"getDefaultHeaderClass":[{"__symbolic":"method"}],"clickTab":[{"__symbolic":"method"}],"clickClose":[{"__symbolic":"method"}]}},"TabPanel":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":71,"character":1},"arguments":[{"selector":"p-tabPanel","template":"\n        <div [attr.id]=\"id\" class=\"ui-tabview-panel ui-widget-content\" [ngClass]=\"{'ui-helper-hidden': !selected}\"\n            role=\"tabpanel\" [attr.aria-hidden]=\"!selected\" [attr.aria-labelledby]=\"id + '-label'\" *ngIf=\"!closed\">\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    "}]}],"members":{"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"closable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"headerStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":5}}]}],"headerStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"leftIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":5}}]}],"rightIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}}]}],"cache":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":5}}]}],"tooltip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":5}}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":103,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":103,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":105,"character":38}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":139,"character":5}}]}],"ngOnDestroy":[{"__symbolic":"method"}]}},"TabView":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":153,"character":1},"arguments":[{"selector":"p-tabView","template":"\n        <div [ngClass]=\"'ui-tabview ui-widget ui-widget-content ui-corner-all ui-tabview-' + orientation\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <ul p-tabViewNav role=\"tablist\" *ngIf=\"orientation!='bottom'\" [tabs]=\"tabs\" [orientation]=\"orientation\"\n                (onTabClick)=\"open($event.originalEvent, $event.tab)\" (onTabCloseClick)=\"close($event.originalEvent, $event.tab)\"></ul>\n            <div class=\"ui-tabview-panels\">\n                <ng-content></ng-content>\n            </div>\n            <ul p-tabViewNav role=\"tablist\" *ngIf=\"orientation=='bottom'\" [tabs]=\"tabs\" [orientation]=\"orientation\"\n                (onTabClick)=\"open($event.originalEvent, $event.tab)\" (onTabCloseClick)=\"close($event.originalEvent, $event.tab)\"></ul>\n        </div>\n    "}]}],"members":{"orientation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":169,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":171,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":173,"character":5}}]}],"controlClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":175,"character":5}}]}],"tabPanels":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":177,"character":5},"arguments":[{"__symbolic":"reference","name":"TabPanel"}]}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":179,"character":5}}]}],"onClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":181,"character":5}}]}],"activeIndexChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":183,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":193,"character":27}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"initTabs":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"closeTab":[{"__symbolic":"method"}],"findSelectedTab":[{"__symbolic":"method"}],"findTabIndex":[{"__symbolic":"method"}],"getBlockableElement":[{"__symbolic":"method"}],"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":303,"character":5}}]}]}},"TabViewModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":322,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":323,"character":14},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":323,"character":27},{"__symbolic":"reference","module":"../tooltip/tooltip","name":"TooltipModule","line":323,"character":40}],"exports":[{"__symbolic":"reference","name":"TabView"},{"__symbolic":"reference","name":"TabPanel"},{"__symbolic":"reference","name":"TabViewNav"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":324,"character":42}],"declarations":[{"__symbolic":"reference","name":"TabView"},{"__symbolic":"reference","name":"TabPanel"},{"__symbolic":"reference","name":"TabViewNav"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"TabViewNav":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"[p-tabViewNav]","host":{"[class.ui-tabview-nav]":"true","[class.ui-helper-reset]":"true","[class.ui-helper-clearfix]":"true","[class.ui-widget-header]":"true","[class.ui-corner-all]":"true","$quoted$":["[class.ui-tabview-nav]","[class.ui-helper-reset]","[class.ui-helper-clearfix]","[class.ui-widget-header]","[class.ui-corner-all]"]},"template":"\n        <ng-template ngFor let-tab [ngForOf]=\"tabs\">\n            <li [class]=\"getDefaultHeaderClass(tab)\" [ngStyle]=\"tab.headerStyle\" role=\"presentation\"\n                [ngClass]=\"{'ui-tabview-selected ui-state-active': tab.selected, 'ui-state-disabled': tab.disabled}\"\n                (click)=\"clickTab($event,tab)\" *ngIf=\"!tab.closed\" tabindex=\"0\" (keydown.enter)=\"clickTab($event,tab)\">\n                <a [attr.id]=\"tab.id + '-label'\" role=\"tab\" [attr.aria-selected]=\"tab.selected\" [attr.aria-controls]=\"tab.id\" [pTooltip]=\"tab.tooltip\" [tooltipPosition]=\"orientation\">\n                    <ng-container *ngIf=\"!tab.headerTemplate\" >\n                        <span class=\"ui-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon\"></span>\n                        <span class=\"ui-tabview-title\">{{tab.header}}</span>\n                        <span class=\"ui-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon\"></span>\n                    </ng-container>\n                    <ng-container *ngIf=\"tab.headerTemplate\">\n                        <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n                    </ng-container>\n                </a>\n                <span *ngIf=\"tab.closable\" class=\"ui-tabview-close pi pi-times\" (click)=\"clickClose($event,tab)\"></span>\n            </li>\n        </ng-template>\n    "}]}],"members":{"tabs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"orientation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"onTabClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":44,"character":5}}]}],"onTabCloseClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":46,"character":5}}]}],"getDefaultHeaderClass":[{"__symbolic":"method"}],"clickTab":[{"__symbolic":"method"}],"clickClose":[{"__symbolic":"method"}]}},"TabPanel":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":71,"character":1},"arguments":[{"selector":"p-tabPanel","template":"\n        <div [attr.id]=\"id\" class=\"ui-tabview-panel ui-widget-content\" [ngClass]=\"{'ui-helper-hidden': !selected}\"\n            role=\"tabpanel\" [attr.aria-hidden]=\"!selected\" [attr.aria-labelledby]=\"id + '-label'\" *ngIf=\"!closed\">\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    "}]}],"members":{"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"closable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"headerStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":5}}]}],"headerStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"leftIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":5}}]}],"rightIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}}]}],"cache":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":5}}]}],"tooltip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":5}}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":103,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":103,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":105,"character":38}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":139,"character":5}}]}],"ngOnDestroy":[{"__symbolic":"method"}]}},"TabView":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":153,"character":1},"arguments":[{"selector":"p-tabView","template":"\n        <div [ngClass]=\"'ui-tabview ui-widget ui-widget-content ui-corner-all ui-tabview-' + orientation\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <ul p-tabViewNav role=\"tablist\" *ngIf=\"orientation!='bottom'\" [tabs]=\"tabs\" [orientation]=\"orientation\"\n                (onTabClick)=\"open($event.originalEvent, $event.tab)\" (onTabCloseClick)=\"close($event.originalEvent, $event.tab)\"></ul>\n            <div class=\"ui-tabview-panels\">\n                <ng-content></ng-content>\n            </div>\n            <ul p-tabViewNav role=\"tablist\" *ngIf=\"orientation=='bottom'\" [tabs]=\"tabs\" [orientation]=\"orientation\"\n                (onTabClick)=\"open($event.originalEvent, $event.tab)\" (onTabCloseClick)=\"close($event.originalEvent, $event.tab)\"></ul>\n        </div>\n    "}]}],"members":{"orientation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":169,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":171,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":173,"character":5}}]}],"controlClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":175,"character":5}}]}],"tabPanels":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":177,"character":5},"arguments":[{"__symbolic":"reference","name":"TabPanel"}]}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":179,"character":5}}]}],"onClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":181,"character":5}}]}],"activeIndexChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":183,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":193,"character":27}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"initTabs":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"closeTab":[{"__symbolic":"method"}],"findSelectedTab":[{"__symbolic":"method"}],"findTabIndex":[{"__symbolic":"method"}],"getBlockableElement":[{"__symbolic":"method"}],"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":303,"character":5}}]}]}},"TabViewModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":322,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":323,"character":14},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":323,"character":27},{"__symbolic":"reference","module":"../tooltip/tooltip","name":"TooltipModule","line":323,"character":40}],"exports":[{"__symbolic":"reference","name":"TabView"},{"__symbolic":"reference","name":"TabPanel"},{"__symbolic":"reference","name":"TabViewNav"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":324,"character":42}],"declarations":[{"__symbolic":"reference","name":"TabView"},{"__symbolic":"reference","name":"TabPanel"},{"__symbolic":"reference","name":"TabViewNav"}]}]}]}}}]

components/tieredmenu/tieredmenu.d.ts

@@ -33,2 +33,4 @@ import { ElementRef, OnDestroy, Renderer2 } from '@angular/core';
     hideDelay: number;
+    showTransitionOptions: string;
+    hideTransitionOptions: string;
     container: HTMLDivElement;
@@ -35,0 +37,0 @@ documentClickListener: any;

components/tieredmenu/tieredmenu.js

@@ -115,2 +115,4 @@ "use strict";
         this.hideDelay = 250;
+        this.showTransitionOptions = '225ms ease-out';
+        this.hideTransitionOptions = '195ms ease-in';
     }
@@ -241,6 +243,14 @@ TieredMenu.prototype.toggle = function (event) {
     ], TieredMenu.prototype, "hideDelay", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], TieredMenu.prototype, "showTransitionOptions", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], TieredMenu.prototype, "hideTransitionOptions", void 0);
     TieredMenu = __decorate([
         core_1.Component({
             selector: 'p-tieredMenu',
-            template: "\n        <div [ngClass]=\"{'ui-tieredmenu ui-widget ui-widget-content ui-corner-all':true, 'ui-tieredmenu-dynamic ui-shadow':popup}\" [class]=\"styleClass\" [ngStyle]=\"style\"\n            [@overlayAnimation]=\"'visible'\" [@.disabled]=\"popup !== true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" *ngIf=\"!popup || visible\">\n            <p-tieredMenuSub [item]=\"model\" root=\"root\" [baseZIndex]=\"baseZIndex\" [autoZIndex]=\"autoZIndex\" [hideDelay]=\"hideDelay\"></p-tieredMenuSub>\n        </div>\n    ",
+            template: "\n        <div [ngClass]=\"{'ui-tieredmenu ui-widget ui-widget-content ui-corner-all':true, 'ui-tieredmenu-dynamic ui-shadow':popup}\" [class]=\"styleClass\" [ngStyle]=\"style\"\n            [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" [@.disabled]=\"popup !== true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" *ngIf=\"!popup || visible\">\n            <p-tieredMenuSub [item]=\"model\" root=\"root\" [baseZIndex]=\"baseZIndex\" [autoZIndex]=\"autoZIndex\" [hideDelay]=\"hideDelay\"></p-tieredMenuSub>\n        </div>\n    ",
             animations: [
@@ -256,4 +266,4 @@ animations_1.trigger('overlayAnimation', [
                     })),
-                    animations_1.transition('void => visible', animations_1.animate('225ms ease-out')),
-                    animations_1.transition('visible => void', animations_1.animate('195ms ease-in'))
+                    animations_1.transition('void => visible', animations_1.animate('{{showTransitionParams}}')),
+                    animations_1.transition('visible => void', animations_1.animate('{{hideTransitionParams}}'))
                 ])
@@ -260,0 +270,0 @@ ],

components/tieredmenu/tieredmenu.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"TieredMenuSub":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"p-tieredMenuSub","template":"\n        <ul [ngClass]=\"{'ui-widget-content ui-corner-all ui-shadow ui-submenu-list': !root}\" (click)=\"listClick($event)\">\n            <ng-template ngFor let-child [ngForOf]=\"(root ? item : item.items)\">\n                <li *ngIf=\"child.separator\" class=\"ui-menu-separator ui-widget-content\" [ngClass]=\"{'ui-helper-hidden': child.visible === false}\">\n                <li *ngIf=\"!child.separator\" #listItem [ngClass]=\"{'ui-menuitem ui-widget ui-corner-all':true,'ui-menuitem-active':listItem==activeItem,'ui-helper-hidden': child.visible === false}\"\n                    [class]=\"child.styleClass\" [ngStyle]=\"child.style\"\n                    (mouseenter)=\"onItemMouseEnter($event, listItem, child)\" (mouseleave)=\"onItemMouseLeave($event)\">\n                    <a *ngIf=\"!child.routerLink\" [href]=\"child.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"child.target\" [attr.title]=\"child.title\" [attr.id]=\"child.id\"\n                        [ngClass]=\"{'ui-state-disabled':child.disabled}\" (click)=\"itemClick($event, child)\">\n                        <span class=\"ui-menuitem-icon\" *ngIf=\"child.icon\" [ngClass]=\"child.icon\"></span>\n                        <span class=\"ui-menuitem-text\">{{child.label}}</span>\n                        <span class=\"ui-submenu-icon pi pi-fw pi-caret-right\" *ngIf=\"child.items\"></span>\n                    </a>\n                    <a *ngIf=\"child.routerLink\" [routerLink]=\"child.routerLink\" [queryParams]=\"child.queryParams\" [routerLinkActive]=\"'ui-state-active'\" \n                        [routerLinkActiveOptions]=\"child.routerLinkActiveOptions||{exact:false}\" [href]=\"child.url||'#'\" \n                        class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"child.target\" [attr.title]=\"child.title\" [attr.id]=\"child.id\"\n                        [ngClass]=\"{'ui-state-disabled':child.disabled}\" (click)=\"itemClick($event, child)\">\n                        \n                        <span class=\"ui-menuitem-icon\" *ngIf=\"child.icon\" [ngClass]=\"child.icon\"></span>\n                        <span class=\"ui-menuitem-text\">{{child.label}}</span>\n                        <span class=\"ui-submenu-icon pi pi-fw pi-caret-right\" *ngIf=\"child.items\"></span>\n                    </a>\n                    <p-tieredMenuSub class=\"ui-submenu\" [item]=\"child\" *ngIf=\"child.items\" [baseZIndex]=\"baseZIndex\" [autoZIndex]=\"autoZIndex\" [hideDelay]=\"hideDelay\"></p-tieredMenuSub>\n                </li>\n            </ng-template>\n        </ul>\n    ","providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":36,"character":16}]}]}],"members":{"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"root":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"hideDelay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":50,"character":17},"arguments":[{"__symbolic":"reference","name":"TieredMenu"}]}],null],"parameters":[{"__symbolic":"reference","name":"TieredMenu"},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":50,"character":104}]}],"onItemMouseEnter":[{"__symbolic":"method"}],"onItemMouseLeave":[{"__symbolic":"method"}],"itemClick":[{"__symbolic":"method"}],"listClick":[{"__symbolic":"method"}]}},"TieredMenu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":113,"character":1},"arguments":[{"selector":"p-tieredMenu","template":"\n        <div [ngClass]=\"{'ui-tieredmenu ui-widget ui-widget-content ui-corner-all':true, 'ui-tieredmenu-dynamic ui-shadow':popup}\" [class]=\"styleClass\" [ngStyle]=\"style\"\n            [@overlayAnimation]=\"'visible'\" [@.disabled]=\"popup !== true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" *ngIf=\"!popup || visible\">\n            <p-tieredMenuSub [item]=\"model\" root=\"root\" [baseZIndex]=\"baseZIndex\" [autoZIndex]=\"autoZIndex\" [hideDelay]=\"hideDelay\"></p-tieredMenuSub>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":122,"character":8},"arguments":["overlayAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":123,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":123,"character":26},"arguments":[{"transform":"translateY(5%)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":127,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":127,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":131,"character":12},"arguments":["void => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":131,"character":42},"arguments":["225ms ease-out"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":132,"character":12},"arguments":["visible => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":132,"character":42},"arguments":["195ms ease-in"]}]}]]}],"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":50,"character":104}]}]}],"members":{"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":139,"character":5}}]}],"popup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":143,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":145,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":147,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":149,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":151,"character":5}}]}],"hideDelay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":153,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":167,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":50,"character":104},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":167,"character":87}]}],"toggle":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"onOverlayAnimationStart":[{"__symbolic":"method"}],"appendOverlay":[{"__symbolic":"method"}],"restoreOverlayAppend":[{"__symbolic":"method"}],"moveOnTop":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method"}],"bindDocumentClickListener":[{"__symbolic":"method"}],"unbindDocumentClickListener":[{"__symbolic":"method"}],"bindDocumentResizeListener":[{"__symbolic":"method"}],"unbindDocumentResizeListener":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"TieredMenuModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":279,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":280,"character":14},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":280,"character":27}],"exports":[{"__symbolic":"reference","name":"TieredMenu"},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":281,"character":25}],"declarations":[{"__symbolic":"reference","name":"TieredMenu"},{"__symbolic":"reference","name":"TieredMenuSub"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"TieredMenuSub":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"p-tieredMenuSub","template":"\n        <ul [ngClass]=\"{'ui-widget-content ui-corner-all ui-shadow ui-submenu-list': !root}\" (click)=\"listClick($event)\">\n            <ng-template ngFor let-child [ngForOf]=\"(root ? item : item.items)\">\n                <li *ngIf=\"child.separator\" class=\"ui-menu-separator ui-widget-content\" [ngClass]=\"{'ui-helper-hidden': child.visible === false}\">\n                <li *ngIf=\"!child.separator\" #listItem [ngClass]=\"{'ui-menuitem ui-widget ui-corner-all':true,'ui-menuitem-active':listItem==activeItem,'ui-helper-hidden': child.visible === false}\"\n                    [class]=\"child.styleClass\" [ngStyle]=\"child.style\"\n                    (mouseenter)=\"onItemMouseEnter($event, listItem, child)\" (mouseleave)=\"onItemMouseLeave($event)\">\n                    <a *ngIf=\"!child.routerLink\" [href]=\"child.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"child.target\" [attr.title]=\"child.title\" [attr.id]=\"child.id\"\n                        [ngClass]=\"{'ui-state-disabled':child.disabled}\" (click)=\"itemClick($event, child)\">\n                        <span class=\"ui-menuitem-icon\" *ngIf=\"child.icon\" [ngClass]=\"child.icon\"></span>\n                        <span class=\"ui-menuitem-text\">{{child.label}}</span>\n                        <span class=\"ui-submenu-icon pi pi-fw pi-caret-right\" *ngIf=\"child.items\"></span>\n                    </a>\n                    <a *ngIf=\"child.routerLink\" [routerLink]=\"child.routerLink\" [queryParams]=\"child.queryParams\" [routerLinkActive]=\"'ui-state-active'\" \n                        [routerLinkActiveOptions]=\"child.routerLinkActiveOptions||{exact:false}\" [href]=\"child.url||'#'\" \n                        class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"child.target\" [attr.title]=\"child.title\" [attr.id]=\"child.id\"\n                        [ngClass]=\"{'ui-state-disabled':child.disabled}\" (click)=\"itemClick($event, child)\">\n                        \n                        <span class=\"ui-menuitem-icon\" *ngIf=\"child.icon\" [ngClass]=\"child.icon\"></span>\n                        <span class=\"ui-menuitem-text\">{{child.label}}</span>\n                        <span class=\"ui-submenu-icon pi pi-fw pi-caret-right\" *ngIf=\"child.items\"></span>\n                    </a>\n                    <p-tieredMenuSub class=\"ui-submenu\" [item]=\"child\" *ngIf=\"child.items\" [baseZIndex]=\"baseZIndex\" [autoZIndex]=\"autoZIndex\" [hideDelay]=\"hideDelay\"></p-tieredMenuSub>\n                </li>\n            </ng-template>\n        </ul>\n    ","providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":36,"character":16}]}]}],"members":{"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"root":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"hideDelay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":50,"character":17},"arguments":[{"__symbolic":"reference","name":"TieredMenu"}]}],null],"parameters":[{"__symbolic":"reference","name":"TieredMenu"},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":50,"character":104}]}],"onItemMouseEnter":[{"__symbolic":"method"}],"onItemMouseLeave":[{"__symbolic":"method"}],"itemClick":[{"__symbolic":"method"}],"listClick":[{"__symbolic":"method"}]}},"TieredMenu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":113,"character":1},"arguments":[{"selector":"p-tieredMenu","template":"\n        <div [ngClass]=\"{'ui-tieredmenu ui-widget ui-widget-content ui-corner-all':true, 'ui-tieredmenu-dynamic ui-shadow':popup}\" [class]=\"styleClass\" [ngStyle]=\"style\"\n            [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" [@.disabled]=\"popup !== true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" *ngIf=\"!popup || visible\">\n            <p-tieredMenuSub [item]=\"model\" root=\"root\" [baseZIndex]=\"baseZIndex\" [autoZIndex]=\"autoZIndex\" [hideDelay]=\"hideDelay\"></p-tieredMenuSub>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":122,"character":8},"arguments":["overlayAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":123,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":123,"character":26},"arguments":[{"transform":"translateY(5%)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":127,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":127,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":131,"character":12},"arguments":["void => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":131,"character":42},"arguments":["{{showTransitionParams}}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":132,"character":12},"arguments":["visible => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":132,"character":42},"arguments":["{{hideTransitionParams}}"]}]}]]}],"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":50,"character":104}]}]}],"members":{"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":139,"character":5}}]}],"popup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":143,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":145,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":147,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":149,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":151,"character":5}}]}],"hideDelay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":153,"character":5}}]}],"showTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":155,"character":5}}]}],"hideTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":157,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":171,"character":27},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":50,"character":104},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":171,"character":87}]}],"toggle":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"onOverlayAnimationStart":[{"__symbolic":"method"}],"appendOverlay":[{"__symbolic":"method"}],"restoreOverlayAppend":[{"__symbolic":"method"}],"moveOnTop":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method"}],"bindDocumentClickListener":[{"__symbolic":"method"}],"unbindDocumentClickListener":[{"__symbolic":"method"}],"bindDocumentResizeListener":[{"__symbolic":"method"}],"unbindDocumentResizeListener":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"TieredMenuModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":283,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":284,"character":14},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":284,"character":27}],"exports":[{"__symbolic":"reference","name":"TieredMenu"},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":285,"character":25}],"declarations":[{"__symbolic":"reference","name":"TieredMenu"},{"__symbolic":"reference","name":"TieredMenuSub"}]}]}]}}}]

components/toast/toast.d.ts

@@ -10,2 +10,4 @@ import { OnInit, AfterViewInit, AfterContentInit, OnDestroy, ElementRef, EventEmitter, QueryList, TemplateRef } from '@angular/core';
     template: TemplateRef<any>;
+    showTransitionOptions: string;
+    hideTransitionOptions: string;
     onClose: EventEmitter<any>;
@@ -32,2 +34,4 @@ containerViewChild: ElementRef;
     modal: boolean;
+    showTransitionOptions: string;
+    hideTransitionOptions: string;
     onClose: EventEmitter<any>;
@@ -34,0 +38,0 @@ containerViewChild: ElementRef;

components/toast/toast.js

@@ -72,2 +72,10 @@ "use strict";
     __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], ToastItem.prototype, "showTransitionOptions", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], ToastItem.prototype, "hideTransitionOptions", void 0);
+    __decorate([
         core_1.Output(),
@@ -83,3 +91,3 @@ __metadata("design:type", core_1.EventEmitter)
             selector: 'p-toastItem',
-            template: "\n        <div #container class=\"ui-toast-message ui-shadow\" [@messageState]=\"'visible'\"\n            [ngClass]=\"{'ui-toast-message-info': message.severity == 'info','ui-toast-message-warn': message.severity == 'warn',\n                'ui-toast-message-error': message.severity == 'error','ui-toast-message-success': message.severity == 'success'}\"\n                (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n            <div class=\"ui-toast-message-content\">\n                <a href=\"#\" class=\"ui-toast-close-icon pi pi-times\" (click)=\"onCloseIconClick($event)\" *ngIf=\"message.closable !== false\"></a>\n                <ng-container *ngIf=\"!template\">\n                    <span class=\"ui-toast-icon pi\"\n                        [ngClass]=\"{'pi-info-circle': message.severity == 'info', 'pi-exclamation-triangle': message.severity == 'warn',\n                            'pi-times': message.severity == 'error', 'pi-check' :message.severity == 'success'}\"></span>\n                    <div class=\"ui-toast-message-text-content\">\n                        <div class=\"ui-toast-summary\">{{message.summary}}</div>\n                        <div class=\"ui-toast-detail\">{{message.detail}}</div>\n                    </div>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"template; context: {$implicit: message}\"></ng-container>\n            </div>\n        </div>\n    ",
+            template: "\n        <div #container class=\"ui-toast-message ui-shadow\" [@messageState]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\"\n            [ngClass]=\"{'ui-toast-message-info': message.severity == 'info','ui-toast-message-warn': message.severity == 'warn',\n                'ui-toast-message-error': message.severity == 'error','ui-toast-message-success': message.severity == 'success'}\"\n                (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n            <div class=\"ui-toast-message-content\">\n                <a href=\"#\" class=\"ui-toast-close-icon pi pi-times\" (click)=\"onCloseIconClick($event)\" *ngIf=\"message.closable !== false\"></a>\n                <ng-container *ngIf=\"!template\">\n                    <span class=\"ui-toast-icon pi\"\n                        [ngClass]=\"{'pi-info-circle': message.severity == 'info', 'pi-exclamation-triangle': message.severity == 'warn',\n                            'pi-times': message.severity == 'error', 'pi-check' :message.severity == 'success'}\"></span>\n                    <div class=\"ui-toast-message-text-content\">\n                        <div class=\"ui-toast-summary\">{{message.summary}}</div>\n                        <div class=\"ui-toast-detail\">{{message.detail}}</div>\n                    </div>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"template; context: {$implicit: message}\"></ng-container>\n            </div>\n        </div>\n    ",
             animations: [
@@ -93,6 +101,6 @@ animations_1.trigger('messageState', [
                         animations_1.style({ transform: 'translateY(100%)', opacity: 0 }),
-                        animations_1.animate('300ms ease-out')
+                        animations_1.animate('{{showTransitionParams}}')
                     ]),
                     animations_1.transition('* => void', [
-                        animations_1.animate(('250ms ease-in'), animations_1.style({
+                        animations_1.animate(('{{hideTransitionParams}}'), animations_1.style({
                             height: 0,
@@ -118,2 +126,4 @@ opacity: 0,
         this.position = 'top-right';
+        this.showTransitionOptions = '300ms ease-out';
+        this.hideTransitionOptions = '250ms ease-in';
         this.onClose = new core_1.EventEmitter();
@@ -231,2 +241,10 @@ }
     __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], Toast.prototype, "showTransitionOptions", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], Toast.prototype, "hideTransitionOptions", void 0);
+    __decorate([
         core_1.Output(),
@@ -246,3 +264,3 @@ __metadata("design:type", core_1.EventEmitter)
             selector: 'p-toast',
-            template: "\n        <div #container [ngClass]=\"{'ui-toast ui-widget': true, \n                'ui-toast-top-right': position === 'top-right',\n                'ui-toast-top-left': position === 'top-left',\n                'ui-toast-bottom-right': position === 'bottom-right',\n                'ui-toast-bottom-left': position === 'bottom-left',\n                'ui-toast-top-center': position === 'top-center',\n                'ui-toast-bottom-center': position === 'bottom-center',\n                'ui-toast-center': position === 'center'}\" \n                [ngStyle]=\"style\" [class]=\"styleClass\">\n            <p-toastItem *ngFor=\"let msg of messages; let i=index\" [message]=\"msg\" [index]=\"i\" (onClose)=\"onMessageClose($event)\" [template]=\"template\" @toastAnimation></p-toastItem>\n        </div>\n    ",
+            template: "\n        <div #container [ngClass]=\"{'ui-toast ui-widget': true, \n                'ui-toast-top-right': position === 'top-right',\n                'ui-toast-top-left': position === 'top-left',\n                'ui-toast-bottom-right': position === 'bottom-right',\n                'ui-toast-bottom-left': position === 'bottom-left',\n                'ui-toast-top-center': position === 'top-center',\n                'ui-toast-bottom-center': position === 'bottom-center',\n                'ui-toast-center': position === 'center'}\" \n                [ngStyle]=\"style\" [class]=\"styleClass\">\n            <p-toastItem *ngFor=\"let msg of messages; let i=index\" [message]=\"msg\" [index]=\"i\" (onClose)=\"onMessageClose($event)\" [template]=\"template\" @toastAnimation [showTransitionOptions]=\"showTransitionOptions\" [hideTransitionOptions]=\"hideTransitionOptions\"></p-toastItem>\n        </div>\n    ",
             animations: [
@@ -249,0 +267,0 @@ animations_1.trigger('toastAnimation', [

components/toast/toast.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"ToastItem":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"p-toastItem","template":"\n        <div #container class=\"ui-toast-message ui-shadow\" [@messageState]=\"'visible'\"\n            [ngClass]=\"{'ui-toast-message-info': message.severity == 'info','ui-toast-message-warn': message.severity == 'warn',\n                'ui-toast-message-error': message.severity == 'error','ui-toast-message-success': message.severity == 'success'}\"\n                (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n            <div class=\"ui-toast-message-content\">\n                <a href=\"#\" class=\"ui-toast-close-icon pi pi-times\" (click)=\"onCloseIconClick($event)\" *ngIf=\"message.closable !== false\"></a>\n                <ng-container *ngIf=\"!template\">\n                    <span class=\"ui-toast-icon pi\"\n                        [ngClass]=\"{'pi-info-circle': message.severity == 'info', 'pi-exclamation-triangle': message.severity == 'warn',\n                            'pi-times': message.severity == 'error', 'pi-check' :message.severity == 'success'}\"></span>\n                    <div class=\"ui-toast-message-text-content\">\n                        <div class=\"ui-toast-summary\">{{message.summary}}</div>\n                        <div class=\"ui-toast-detail\">{{message.detail}}</div>\n                    </div>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"template; context: {$implicit: message}\"></ng-container>\n            </div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":32,"character":8},"arguments":["messageState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":33,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":33,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":37,"character":12},"arguments":["void => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":38,"character":16},"arguments":[{"transform":"translateY(100%)","opacity":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":39,"character":16},"arguments":["300ms ease-out"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":41,"character":12},"arguments":["* => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":42,"character":16},"arguments":["250ms ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":42,"character":43},"arguments":[{"height":0,"opacity":0,"transform":"translateY(-100%)"}]}]}]]}]]}],"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":50,"character":16}]}]}],"members":{"message":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"template":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"onClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":60,"character":5}}]}],"containerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":62,"character":5},"arguments":["container"]}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"initTimeout":[{"__symbolic":"method"}],"clearTimeout":[{"__symbolic":"method"}],"onMouseEnter":[{"__symbolic":"method"}],"onMouseLeave":[{"__symbolic":"method"}],"onCloseIconClick":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"Toast":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":112,"character":1},"arguments":[{"selector":"p-toast","template":"\n        <div #container [ngClass]=\"{'ui-toast ui-widget': true, \n                'ui-toast-top-right': position === 'top-right',\n                'ui-toast-top-left': position === 'top-left',\n                'ui-toast-bottom-right': position === 'bottom-right',\n                'ui-toast-bottom-left': position === 'bottom-left',\n                'ui-toast-top-center': position === 'top-center',\n                'ui-toast-bottom-center': position === 'bottom-center',\n                'ui-toast-center': position === 'center'}\" \n                [ngStyle]=\"style\" [class]=\"styleClass\">\n            <p-toastItem *ngFor=\"let msg of messages; let i=index\" [message]=\"msg\" [index]=\"i\" (onClose)=\"onMessageClose($event)\" [template]=\"template\" @toastAnimation></p-toastItem>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":128,"character":8},"arguments":["toastAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":129,"character":12},"arguments":[":enter, :leave",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"query","line":130,"character":16},"arguments":["@*",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animateChild","line":130,"character":28}}]}]]}]]}],"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":134,"character":16}]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":140,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":144,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":146,"character":5}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":148,"character":5}}]}],"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":150,"character":5}}]}],"onClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":152,"character":5}}]}],"containerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":154,"character":5},"arguments":["container"]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":156,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":156,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../common/messageservice","name":"MessageService","line":168,"character":39},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":168,"character":74}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onMessageClose":[{"__symbolic":"method"}],"enableModality":[{"__symbolic":"method"}],"disableModality":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ToastModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":265,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":266,"character":14}],"exports":[{"__symbolic":"reference","name":"Toast"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":267,"character":20}],"declarations":[{"__symbolic":"reference","name":"Toast"},{"__symbolic":"reference","name":"ToastItem"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"ToastItem":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"p-toastItem","template":"\n        <div #container class=\"ui-toast-message ui-shadow\" [@messageState]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\"\n            [ngClass]=\"{'ui-toast-message-info': message.severity == 'info','ui-toast-message-warn': message.severity == 'warn',\n                'ui-toast-message-error': message.severity == 'error','ui-toast-message-success': message.severity == 'success'}\"\n                (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n            <div class=\"ui-toast-message-content\">\n                <a href=\"#\" class=\"ui-toast-close-icon pi pi-times\" (click)=\"onCloseIconClick($event)\" *ngIf=\"message.closable !== false\"></a>\n                <ng-container *ngIf=\"!template\">\n                    <span class=\"ui-toast-icon pi\"\n                        [ngClass]=\"{'pi-info-circle': message.severity == 'info', 'pi-exclamation-triangle': message.severity == 'warn',\n                            'pi-times': message.severity == 'error', 'pi-check' :message.severity == 'success'}\"></span>\n                    <div class=\"ui-toast-message-text-content\">\n                        <div class=\"ui-toast-summary\">{{message.summary}}</div>\n                        <div class=\"ui-toast-detail\">{{message.detail}}</div>\n                    </div>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"template; context: {$implicit: message}\"></ng-container>\n            </div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":32,"character":8},"arguments":["messageState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":33,"character":12},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":33,"character":29},"arguments":[{"transform":"translateY(0)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":37,"character":12},"arguments":["void => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":38,"character":16},"arguments":[{"transform":"translateY(100%)","opacity":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":39,"character":16},"arguments":["{{showTransitionParams}}"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":41,"character":12},"arguments":["* => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":42,"character":16},"arguments":["{{hideTransitionParams}}",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":42,"character":54},"arguments":[{"height":0,"opacity":0,"transform":"translateY(-100%)"}]}]}]]}]]}],"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":50,"character":16}]}]}],"members":{"message":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"template":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"showTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"hideTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"onClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":64,"character":5}}]}],"containerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":66,"character":5},"arguments":["container"]}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"initTimeout":[{"__symbolic":"method"}],"clearTimeout":[{"__symbolic":"method"}],"onMouseEnter":[{"__symbolic":"method"}],"onMouseLeave":[{"__symbolic":"method"}],"onCloseIconClick":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"Toast":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":116,"character":1},"arguments":[{"selector":"p-toast","template":"\n        <div #container [ngClass]=\"{'ui-toast ui-widget': true, \n                'ui-toast-top-right': position === 'top-right',\n                'ui-toast-top-left': position === 'top-left',\n                'ui-toast-bottom-right': position === 'bottom-right',\n                'ui-toast-bottom-left': position === 'bottom-left',\n                'ui-toast-top-center': position === 'top-center',\n                'ui-toast-bottom-center': position === 'bottom-center',\n                'ui-toast-center': position === 'center'}\" \n                [ngStyle]=\"style\" [class]=\"styleClass\">\n            <p-toastItem *ngFor=\"let msg of messages; let i=index\" [message]=\"msg\" [index]=\"i\" (onClose)=\"onMessageClose($event)\" [template]=\"template\" @toastAnimation [showTransitionOptions]=\"showTransitionOptions\" [hideTransitionOptions]=\"hideTransitionOptions\"></p-toastItem>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":132,"character":8},"arguments":["toastAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":133,"character":12},"arguments":[":enter, :leave",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"query","line":134,"character":16},"arguments":["@*",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animateChild","line":134,"character":28}}]}]]}]]}],"providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":138,"character":16}]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":144,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":146,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":148,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":150,"character":5}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":152,"character":5}}]}],"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":154,"character":5}}]}],"showTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":156,"character":5}}]}],"hideTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":158,"character":5}}]}],"onClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":160,"character":5}}]}],"containerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":162,"character":5},"arguments":["container"]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":164,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":164,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../common/messageservice","name":"MessageService","line":176,"character":39},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":176,"character":74}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onMessageClose":[{"__symbolic":"method"}],"enableModality":[{"__symbolic":"method"}],"disableModality":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ToastModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":273,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":274,"character":14}],"exports":[{"__symbolic":"reference","name":"Toast"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":275,"character":20}],"declarations":[{"__symbolic":"reference","name":"Toast"},{"__symbolic":"reference","name":"ToastItem"}]}]}]}}}]

components/togglebutton/togglebutton.d.ts

@@ -14,2 +14,3 @@ import { EventEmitter, AfterViewInit, ElementRef } from '@angular/core';
     tabindex: number;
+    iconPos: string;
     onChange: EventEmitter<any>;
@@ -16,0 +17,0 @@ checkboxViewChild: ElementRef;

components/togglebutton/togglebutton.js

@@ -24,2 +24,3 @@ "use strict";
         this.offLabel = 'No';
+        this.iconPos = 'left';
         this.onChange = new core_1.EventEmitter();
@@ -116,2 +117,6 @@ this.checked = false;
     __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], ToggleButton.prototype, "iconPos", void 0);
+    __decorate([
         core_1.Output(),
@@ -127,3 +132,3 @@ __metadata("design:type", core_1.EventEmitter)
             selector: 'p-toggleButton',
-            template: "\n        <div [ngClass]=\"{'ui-button ui-togglebutton ui-widget ui-state-default ui-corner-all': true, 'ui-button-text-only': (!onIcon && !offIcon), \n                'ui-button-text-icon-left': (onIcon && offIcon && hasOnLabel && hasOffLabel), 'ui-button-icon-only': (onIcon && offIcon && !hasOnLabel && !hasOffLabel),\n                'ui-state-active': checked,'ui-state-focus':focus,'ui-state-disabled':disabled}\" [ngStyle]=\"style\" [class]=\"styleClass\" \n                (click)=\"toggle($event)\">\n            <div class=\"ui-helper-hidden-accessible\">\n                <input #checkbox type=\"checkbox\" [attr.id]=\"inputId\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [attr.tabindex]=\"tabindex\">\n            </div>\n            <span *ngIf=\"onIcon||offIcon\" class=\"ui-button-icon-left\" [ngClass]=\"checked ? this.onIcon : this.offIcon\"></span>\n            <span class=\"ui-button-text ui-unselectable-text\">{{checked ? hasOnLabel ? onLabel : 'ui-btn' : hasOffLabel ? offLabel : 'ui-btn'}}</span>\n        </div>\n    ",
+            template: "\n        <div [ngClass]=\"{'ui-button ui-togglebutton ui-widget ui-state-default ui-corner-all': true, 'ui-button-text-only': (!onIcon && !offIcon), \n                'ui-button-text-icon-left': (onIcon && offIcon && hasOnLabel && hasOffLabel && iconPos === 'left'), \n                'ui-button-text-icon-right': (onIcon && offIcon && hasOnLabel && hasOffLabel && iconPos === 'right'),'ui-button-icon-only': (onIcon && offIcon && !hasOnLabel && !hasOffLabel),\n                'ui-state-active': checked,'ui-state-focus':focus,'ui-state-disabled':disabled}\" [ngStyle]=\"style\" [class]=\"styleClass\" \n                (click)=\"toggle($event)\">\n            <div class=\"ui-helper-hidden-accessible\">\n                <input #checkbox type=\"checkbox\" [attr.id]=\"inputId\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [attr.tabindex]=\"tabindex\">\n            </div>\n            <span *ngIf=\"onIcon||offIcon\" class=\"ui-button-icon-left\" [class]=\"checked ? this.onIcon : this.offIcon\" [ngClass]=\"{'ui-button-icon-left': (iconPos === 'left'), \n            'ui-button-icon-right': (iconPos === 'right')}\"></span>\n            <span class=\"ui-button-text ui-unselectable-text\">{{checked ? hasOnLabel ? onLabel : 'ui-btn' : hasOffLabel ? offLabel : 'ui-btn'}}</span>\n        </div>\n    ",
             providers: [exports.TOGGLEBUTTON_VALUE_ACCESSOR]
@@ -130,0 +135,0 @@ })

components/togglebutton/togglebutton.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"TOGGLEBUTTON_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":5,"character":11},"useExisting":{"__symbolic":"reference","name":"ToggleButton"},"multi":true},"ToggleButton":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"p-toggleButton","template":"\n        <div [ngClass]=\"{'ui-button ui-togglebutton ui-widget ui-state-default ui-corner-all': true, 'ui-button-text-only': (!onIcon && !offIcon), \n                'ui-button-text-icon-left': (onIcon && offIcon && hasOnLabel && hasOffLabel), 'ui-button-icon-only': (onIcon && offIcon && !hasOnLabel && !hasOffLabel),\n                'ui-state-active': checked,'ui-state-focus':focus,'ui-state-disabled':disabled}\" [ngStyle]=\"style\" [class]=\"styleClass\" \n                (click)=\"toggle($event)\">\n            <div class=\"ui-helper-hidden-accessible\">\n                <input #checkbox type=\"checkbox\" [attr.id]=\"inputId\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [attr.tabindex]=\"tabindex\">\n            </div>\n            <span *ngIf=\"onIcon||offIcon\" class=\"ui-button-icon-left\" [ngClass]=\"checked ? this.onIcon : this.offIcon\"></span>\n            <span class=\"ui-button-text ui-unselectable-text\">{{checked ? hasOnLabel ? onLabel : 'ui-btn' : hasOffLabel ? offLabel : 'ui-btn'}}</span>\n        </div>\n    ","providers":[{"__symbolic":"reference","name":"TOGGLEBUTTON_VALUE_ACCESSOR"}]}]}],"members":{"onLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"offLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"onIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"offIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"inputId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":46,"character":5}}]}],"checkboxViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":48,"character":5},"arguments":["checkbox"]}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}]}},"ToggleButtonModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":111,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":112,"character":14}],"exports":[{"__symbolic":"reference","name":"ToggleButton"}],"declarations":[{"__symbolic":"reference","name":"ToggleButton"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"TOGGLEBUTTON_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":5,"character":11},"useExisting":{"__symbolic":"reference","name":"ToggleButton"},"multi":true},"ToggleButton":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"p-toggleButton","template":"\n        <div [ngClass]=\"{'ui-button ui-togglebutton ui-widget ui-state-default ui-corner-all': true, 'ui-button-text-only': (!onIcon && !offIcon), \n                'ui-button-text-icon-left': (onIcon && offIcon && hasOnLabel && hasOffLabel && iconPos === 'left'), \n                'ui-button-text-icon-right': (onIcon && offIcon && hasOnLabel && hasOffLabel && iconPos === 'right'),'ui-button-icon-only': (onIcon && offIcon && !hasOnLabel && !hasOffLabel),\n                'ui-state-active': checked,'ui-state-focus':focus,'ui-state-disabled':disabled}\" [ngStyle]=\"style\" [class]=\"styleClass\" \n                (click)=\"toggle($event)\">\n            <div class=\"ui-helper-hidden-accessible\">\n                <input #checkbox type=\"checkbox\" [attr.id]=\"inputId\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [attr.tabindex]=\"tabindex\">\n            </div>\n            <span *ngIf=\"onIcon||offIcon\" class=\"ui-button-icon-left\" [class]=\"checked ? this.onIcon : this.offIcon\" [ngClass]=\"{'ui-button-icon-left': (iconPos === 'left'), \n            'ui-button-icon-right': (iconPos === 'right')}\"></span>\n            <span class=\"ui-button-text ui-unselectable-text\">{{checked ? hasOnLabel ? onLabel : 'ui-btn' : hasOffLabel ? offLabel : 'ui-btn'}}</span>\n        </div>\n    ","providers":[{"__symbolic":"reference","name":"TOGGLEBUTTON_VALUE_ACCESSOR"}]}]}],"members":{"onLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"offLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"onIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"offIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"inputId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"iconPos":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":50,"character":5}}]}],"checkboxViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":52,"character":5},"arguments":["checkbox"]}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}]}},"ToggleButtonModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":115,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":116,"character":14}],"exports":[{"__symbolic":"reference","name":"ToggleButton"}],"declarations":[{"__symbolic":"reference","name":"ToggleButton"}]}]}]}}}]

components/tree/tree.d.ts

@@ -6,4 +6,6 @@ import { AfterContentInit, OnDestroy, EventEmitter, OnInit, QueryList, TemplateRef, ElementRef } from '@angular/core';
 import { BlockableUI } from '../common/blockableui';
+import { DomHandler } from '../dom/domhandler';
 export declare class UITreeNode implements OnInit {
     tree: Tree;
+    domHandler: DomHandler;
     static ICON_CLASS: string;
@@ -16,3 +18,3 @@ node: TreeNode;
     lastChild: boolean;
-    constructor(tree: Tree);
+    constructor(tree: Tree, domHandler: DomHandler);
     draghoverPrev: boolean;
@@ -25,2 +27,4 @@ draghoverNext: boolean;
     toggle(event: Event): void;
+    expand(event: Event): void;
+    collapse(event: Event): void;
     onNodeClick(event: MouseEvent): void;
@@ -40,2 +44,7 @@ onNodeTouchEnd(): void;
     onDropNodeDragLeave(event: any): void;
+    onKeyDown(event: KeyboardEvent): void;
+    findNextSiblingOfAncestor(nodeElement: any): any;
+    findLastVisibleDescendant(nodeElement: any): any;
+    getParentNodeElement(nodeElement: any): any;
+    focusNode(element: any): void;
 }
@@ -69,2 +78,4 @@ export declare class Tree implements OnInit, AfterContentInit, OnDestroy, BlockableUI {
     emptyMessage: string;
+    ariaLabel: string;
+    ariaLabelledBy: string;
     nodeTrackBy: Function;
@@ -71,0 +82,0 @@ templates: QueryList<any>;

components/tree/tree.js

@@ -21,5 +21,7 @@ "use strict";
 var treedragdropservice_1 = require("../common/treedragdropservice");
+var domhandler_1 = require("../dom/domhandler");
 var UITreeNode = /** @class */ (function () {
-    function UITreeNode(tree) {
+    function UITreeNode(tree, domHandler) {
         this.tree = tree;
+        this.domHandler = domHandler;
     }
@@ -43,7 +45,14 @@ UITreeNode_1 = UITreeNode;
         if (this.node.expanded)
-            this.tree.onNodeCollapse.emit({ originalEvent: event, node: this.node });
+            this.collapse(event);
         else
-            this.tree.onNodeExpand.emit({ originalEvent: event, node: this.node });
-        this.node.expanded = !this.node.expanded;
+            this.expand(event);
     };
+    UITreeNode.prototype.expand = function (event) {
+        this.node.expanded = true;
+        this.tree.onNodeExpand.emit({ originalEvent: event, node: this.node });
+    };
+    UITreeNode.prototype.collapse = function (event) {
+        this.node.expanded = false;
+        this.tree.onNodeCollapse.emit({ originalEvent: event, node: this.node });
+    };
     UITreeNode.prototype.onNodeClick = function (event) {
@@ -179,2 +188,86 @@ this.tree.onNodeClick(event, this.node);
     };
+    UITreeNode.prototype.onKeyDown = function (event) {
+        var nodeElement = event.target.parentElement.parentElement;
+        switch (event.which) {
+            //down arrow
+            case 40:
+                var listElement = nodeElement.children[0].children[1];
+                if (listElement) {
+                    this.focusNode(listElement.children[0]);
+                }
+                else {
+                    var nextNodeElement = nodeElement.nextElementSibling;
+                    if (nextNodeElement) {
+                        this.focusNode(nextNodeElement);
+                    }
+                    else {
+                        var nextSiblingAncestor = this.findNextSiblingOfAncestor(nodeElement);
+                        if (nextSiblingAncestor) {
+                            this.focusNode(nextSiblingAncestor);
+                        }
+                    }
+                }
+                event.preventDefault();
+                break;
+            //up arrow
+            case 38:
+                if (nodeElement.previousElementSibling) {
+                    this.focusNode(this.findLastVisibleDescendant(nodeElement.previousElementSibling));
+                }
+                else {
+                    var parentNodeElement = this.getParentNodeElement(nodeElement);
+                    if (parentNodeElement) {
+                        this.focusNode(parentNodeElement);
+                    }
+                }
+                event.preventDefault();
+                break;
+            //right arrow
+            case 39:
+                if (!this.node.expanded) {
+                    this.expand(event);
+                }
+                event.preventDefault();
+                break;
+            //left arrow
+            case 37:
+                if (this.node.expanded) {
+                    this.collapse(event);
+                }
+                event.preventDefault();
+                break;
+            default:
+                //no op
+                break;
+        }
+    };
+    UITreeNode.prototype.findNextSiblingOfAncestor = function (nodeElement) {
+        var parentNodeElement = this.getParentNodeElement(nodeElement);
+        if (parentNodeElement) {
+            if (parentNodeElement.nextElementSibling)
+                return parentNodeElement.nextElementSibling;
+            else
+                return this.findNextSiblingOfAncestor(parentNodeElement);
+        }
+        else {
+            return null;
+        }
+    };
+    UITreeNode.prototype.findLastVisibleDescendant = function (nodeElement) {
+        var childrenListElement = nodeElement.children[0].children[1];
+        if (childrenListElement) {
+            var lastChildElement = childrenListElement.children[childrenListElement.children.length - 1];
+            return this.findLastVisibleDescendant(lastChildElement);
+        }
+        else {
+            return nodeElement;
+        }
+    };
+    UITreeNode.prototype.getParentNodeElement = function (nodeElement) {
+        var parentNodeElement = nodeElement.parentElement.parentElement.parentElement;
+        return parentNodeElement.tagName === 'P-TREENODE' ? parentNodeElement : null;
+    };
+    UITreeNode.prototype.focusNode = function (element) {
+        element.children[0].children[0].focus();
+    };
     UITreeNode.ICON_CLASS = 'ui-treenode-icon ';
@@ -208,6 +301,7 @@ __decorate([
             selector: 'p-treeNode',
-            template: "\n        <ng-template [ngIf]=\"node\">\n            <li *ngIf=\"tree.droppableNodes\" class=\"ui-treenode-droppoint\" [ngClass]=\"{'ui-treenode-droppoint-active ui-state-highlight':draghoverPrev}\"\n            (drop)=\"onDropPoint($event,-1)\" (dragover)=\"onDropPointDragOver($event)\" (dragenter)=\"onDropPointDragEnter($event,-1)\" (dragleave)=\"onDropPointDragLeave($event)\"></li>\n            <li *ngIf=\"!tree.horizontal\" [ngClass]=\"['ui-treenode',node.styleClass||'', isLeaf() ? 'ui-treenode-leaf': '']\">\n                <div class=\"ui-treenode-content\" (click)=\"onNodeClick($event)\" (contextmenu)=\"onNodeRightClick($event)\" (touchend)=\"onNodeTouchEnd()\"\n                    (drop)=\"onDropNode($event)\" (dragover)=\"onDropNodeDragOver($event)\" (dragenter)=\"onDropNodeDragEnter($event)\" (dragleave)=\"onDropNodeDragLeave($event)\"\n                    [ngClass]=\"{'ui-treenode-selectable':tree.selectionMode && node.selectable !== false,'ui-treenode-dragover':draghoverNode, 'ui-treenode-content-selected':isSelected()}\" [draggable]=\"tree.draggableNodes\" (dragstart)=\"onDragStart($event)\" (dragend)=\"onDragStop($event)\">\n                    <span class=\"ui-tree-toggler pi pi-fw\" [ngClass]=\"{'pi-caret-right':!node.expanded,'pi-caret-down':node.expanded}\"\n                            (click)=\"toggle($event)\"></span\n                    ><div class=\"ui-chkbox\" *ngIf=\"tree.selectionMode == 'checkbox' && node.selectable !== false\"><div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\">\n                        <span class=\"ui-chkbox-icon ui-clickable pi\"\n                            [ngClass]=\"{'pi-check':isSelected(),'pi-minus':node.partialSelected}\"></span></div></div\n                    ><span [class]=\"getIcon()\" *ngIf=\"node.icon||node.expandedIcon||node.collapsedIcon\"></span\n                    ><span class=\"ui-treenode-label ui-corner-all\"\n                        [ngClass]=\"{'ui-state-highlight':isSelected()}\">\n                            <span *ngIf=\"!tree.getTemplateForNode(node)\">{{node.label}}</span>\n                            <span *ngIf=\"tree.getTemplateForNode(node)\">\n                                <ng-container *ngTemplateOutlet=\"tree.getTemplateForNode(node); context: {$implicit: node}\"></ng-container>\n                            </span>\n                    </span>\n                </div>\n                <ul class=\"ui-treenode-children\" style=\"display: none;\" *ngIf=\"node.children && node.expanded\" [style.display]=\"node.expanded ? 'block' : 'none'\">\n                    <p-treeNode *ngFor=\"let childNode of node.children;let firstChild=first;let lastChild=last; let index=index; trackBy: tree.nodeTrackBy\" [node]=\"childNode\" [parentNode]=\"node\"\n                        [firstChild]=\"firstChild\" [lastChild]=\"lastChild\" [index]=\"index\"></p-treeNode>\n                </ul>\n            </li>\n            <li *ngIf=\"tree.droppableNodes&&lastChild\" class=\"ui-treenode-droppoint\" [ngClass]=\"{'ui-treenode-droppoint-active ui-state-highlight':draghoverNext}\"\n            (drop)=\"onDropPoint($event,1)\" (dragover)=\"onDropPointDragOver($event)\" (dragenter)=\"onDropPointDragEnter($event,1)\" (dragleave)=\"onDropPointDragLeave($event)\"></li>\n            <table *ngIf=\"tree.horizontal\" [class]=\"node.styleClass\">\n                <tbody>\n                    <tr>\n                        <td class=\"ui-treenode-connector\" *ngIf=\"!root\">\n                            <table class=\"ui-treenode-connector-table\">\n                                <tbody>\n                                    <tr>\n                                        <td [ngClass]=\"{'ui-treenode-connector-line':!firstChild}\"></td>\n                                    </tr>\n                                    <tr>\n                                        <td [ngClass]=\"{'ui-treenode-connector-line':!lastChild}\"></td>\n                                    </tr>\n                                </tbody>\n                            </table>\n                        </td>\n                        <td class=\"ui-treenode\" [ngClass]=\"{'ui-treenode-collapsed':!node.expanded}\">\n                            <div class=\"ui-treenode-content ui-state-default ui-corner-all\"\n                                [ngClass]=\"{'ui-treenode-selectable':tree.selectionMode,'ui-state-highlight':isSelected()}\" (click)=\"onNodeClick($event)\" (contextmenu)=\"onNodeRightClick($event)\"\n                                (touchend)=\"onNodeTouchEnd()\">\n                                <span class=\"ui-tree-toggler pi pi-fw\" [ngClass]=\"{'pi-plus':!node.expanded,'pi-minus':node.expanded}\" *ngIf=\"!isLeaf()\"\n                                        (click)=\"toggle($event)\"></span\n                                ><span [class]=\"getIcon()\" *ngIf=\"node.icon||node.expandedIcon||node.collapsedIcon\"></span\n                                ><span class=\"ui-treenode-label ui-corner-all\">\n                                        <span *ngIf=\"!tree.getTemplateForNode(node)\">{{node.label}}</span>\n                                        <span *ngIf=\"tree.getTemplateForNode(node)\">\n                                        <ng-container *ngTemplateOutlet=\"tree.getTemplateForNode(node); context: {$implicit: node}\"></ng-container>\n                                        </span>\n                                </span>\n                            </div>\n                        </td>\n                        <td class=\"ui-treenode-children-container\" *ngIf=\"node.children && node.expanded\" [style.display]=\"node.expanded ? 'table-cell' : 'none'\">\n                            <div class=\"ui-treenode-children\">\n                                <p-treeNode *ngFor=\"let childNode of node.children;let firstChild=first;let lastChild=last; trackBy: tree.nodeTrackBy\" [node]=\"childNode\"\n                                        [firstChild]=\"firstChild\" [lastChild]=\"lastChild\"></p-treeNode>\n                            </div>\n                        </td>\n                    </tr>\n                </tbody>\n            </table>\n        </ng-template>\n    "
+            template: "\n        <ng-template [ngIf]=\"node\">\n            <li *ngIf=\"tree.droppableNodes\" class=\"ui-treenode-droppoint\" [ngClass]=\"{'ui-treenode-droppoint-active ui-state-highlight':draghoverPrev}\"\n            (drop)=\"onDropPoint($event,-1)\" (dragover)=\"onDropPointDragOver($event)\" (dragenter)=\"onDropPointDragEnter($event,-1)\" (dragleave)=\"onDropPointDragLeave($event)\"></li>\n            <li *ngIf=\"!tree.horizontal\" [ngClass]=\"['ui-treenode',node.styleClass||'', isLeaf() ? 'ui-treenode-leaf': '']\">\n                <div class=\"ui-treenode-content\" role=\"treeitem\" (click)=\"onNodeClick($event)\" (contextmenu)=\"onNodeRightClick($event)\" (touchend)=\"onNodeTouchEnd()\"\n                    (drop)=\"onDropNode($event)\" (dragover)=\"onDropNodeDragOver($event)\" (dragenter)=\"onDropNodeDragEnter($event)\" (dragleave)=\"onDropNodeDragLeave($event)\"\n                    [draggable]=\"tree.draggableNodes\" (dragstart)=\"onDragStart($event)\" (dragend)=\"onDragStop($event)\" tabIndex=\"0\"\n                    [ngClass]=\"{'ui-treenode-selectable':tree.selectionMode && node.selectable !== false,'ui-treenode-dragover':draghoverNode, 'ui-treenode-content-selected':isSelected()}\" \n                    (keydown)=\"onKeyDown($event)\" [attr.aria-posinset]=\"this.index + 1\" [attr.aria-expanded]=\"this.node.expanded\" [attr.aria-selected]=\"isSelected()\">\n                    <span class=\"ui-tree-toggler pi pi-fw\" [ngClass]=\"{'pi-caret-right':!node.expanded,'pi-caret-down':node.expanded}\"\n                            (click)=\"toggle($event)\"></span\n                    ><div class=\"ui-chkbox\" *ngIf=\"tree.selectionMode == 'checkbox' && node.selectable !== false\"><div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\">\n                        <span class=\"ui-chkbox-icon ui-clickable pi\"\n                            [ngClass]=\"{'pi-check':isSelected(),'pi-minus':node.partialSelected}\"></span></div></div\n                    ><span [class]=\"getIcon()\" *ngIf=\"node.icon||node.expandedIcon||node.collapsedIcon\"></span\n                    ><span class=\"ui-treenode-label ui-corner-all\"\n                        [ngClass]=\"{'ui-state-highlight':isSelected()}\">\n                            <span *ngIf=\"!tree.getTemplateForNode(node)\">{{node.label}}</span>\n                            <span *ngIf=\"tree.getTemplateForNode(node)\">\n                                <ng-container *ngTemplateOutlet=\"tree.getTemplateForNode(node); context: {$implicit: node}\"></ng-container>\n                            </span>\n                    </span>\n                </div>\n                <ul class=\"ui-treenode-children\" style=\"display: none;\" *ngIf=\"node.children && node.expanded\" [style.display]=\"node.expanded ? 'block' : 'none'\" role=\"group\">\n                    <p-treeNode *ngFor=\"let childNode of node.children;let firstChild=first;let lastChild=last; let index=index; trackBy: tree.nodeTrackBy\" [node]=\"childNode\" [parentNode]=\"node\"\n                        [firstChild]=\"firstChild\" [lastChild]=\"lastChild\" [index]=\"index\"></p-treeNode>\n                </ul>\n            </li>\n            <li *ngIf=\"tree.droppableNodes&&lastChild\" class=\"ui-treenode-droppoint\" [ngClass]=\"{'ui-treenode-droppoint-active ui-state-highlight':draghoverNext}\"\n            (drop)=\"onDropPoint($event,1)\" (dragover)=\"onDropPointDragOver($event)\" (dragenter)=\"onDropPointDragEnter($event,1)\" (dragleave)=\"onDropPointDragLeave($event)\"></li>\n            <table *ngIf=\"tree.horizontal\" [class]=\"node.styleClass\">\n                <tbody>\n                    <tr>\n                        <td class=\"ui-treenode-connector\" *ngIf=\"!root\">\n                            <table class=\"ui-treenode-connector-table\">\n                                <tbody>\n                                    <tr>\n                                        <td [ngClass]=\"{'ui-treenode-connector-line':!firstChild}\"></td>\n                                    </tr>\n                                    <tr>\n                                        <td [ngClass]=\"{'ui-treenode-connector-line':!lastChild}\"></td>\n                                    </tr>\n                                </tbody>\n                            </table>\n                        </td>\n                        <td class=\"ui-treenode\" [ngClass]=\"{'ui-treenode-collapsed':!node.expanded}\">\n                            <div class=\"ui-treenode-content ui-state-default ui-corner-all\"\n                                [ngClass]=\"{'ui-treenode-selectable':tree.selectionMode,'ui-state-highlight':isSelected()}\" (click)=\"onNodeClick($event)\" (contextmenu)=\"onNodeRightClick($event)\"\n                                (touchend)=\"onNodeTouchEnd()\">\n                                <span class=\"ui-tree-toggler pi pi-fw\" [ngClass]=\"{'pi-plus':!node.expanded,'pi-minus':node.expanded}\" *ngIf=\"!isLeaf()\"\n                                        (click)=\"toggle($event)\"></span\n                                ><span [class]=\"getIcon()\" *ngIf=\"node.icon||node.expandedIcon||node.collapsedIcon\"></span\n                                ><span class=\"ui-treenode-label ui-corner-all\">\n                                        <span *ngIf=\"!tree.getTemplateForNode(node)\">{{node.label}}</span>\n                                        <span *ngIf=\"tree.getTemplateForNode(node)\">\n                                        <ng-container *ngTemplateOutlet=\"tree.getTemplateForNode(node); context: {$implicit: node}\"></ng-container>\n                                        </span>\n                                </span>\n                            </div>\n                        </td>\n                        <td class=\"ui-treenode-children-container\" *ngIf=\"node.children && node.expanded\" [style.display]=\"node.expanded ? 'table-cell' : 'none'\">\n                            <div class=\"ui-treenode-children\">\n                                <p-treeNode *ngFor=\"let childNode of node.children;let firstChild=first;let lastChild=last; trackBy: tree.nodeTrackBy\" [node]=\"childNode\"\n                                        [firstChild]=\"firstChild\" [lastChild]=\"lastChild\"></p-treeNode>\n                            </div>\n                        </td>\n                    </tr>\n                </tbody>\n            </table>\n        </ng-template>\n    ",
+            providers: [domhandler_1.DomHandler]
         }),
         __param(0, core_1.Inject(core_1.forwardRef(function () { return Tree; }))),
-        __metadata("design:paramtypes", [Tree])
+        __metadata("design:paramtypes", [Tree, domhandler_1.DomHandler])
     ], UITreeNode);
@@ -672,2 +766,10 @@ return UITreeNode;
         core_1.Input(),
+        __metadata("design:type", String)
+    ], Tree.prototype, "ariaLabel", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], Tree.prototype, "ariaLabelledBy", void 0);
+    __decorate([
+        core_1.Input(),
         __metadata("design:type", Function)
@@ -682,3 +784,3 @@ ], Tree.prototype, "nodeTrackBy", void 0);
             selector: 'p-tree',
-            template: "\n        <div [ngClass]=\"{'ui-tree ui-widget ui-widget-content ui-corner-all':true,'ui-tree-selectable':selectionMode,'ui-treenode-dragover':dragHover,'ui-tree-loading': loading}\" [ngStyle]=\"style\" [class]=\"styleClass\" *ngIf=\"!horizontal\"\n            (drop)=\"onDrop($event)\" (dragover)=\"onDragOver($event)\" (dragenter)=\"onDragEnter($event)\" (dragleave)=\"onDragLeave($event)\">\n            <div class=\"ui-tree-loading-mask ui-widget-overlay\" *ngIf=\"loading\"></div>\n            <div class=\"ui-tree-loading-content\" *ngIf=\"loading\">\n                <i [class]=\"'ui-tree-loading-icon pi-spin ' + loadingIcon\"></i>\n            </div>\n            <ul class=\"ui-tree-container\" *ngIf=\"value\">\n                <p-treeNode *ngFor=\"let node of value;let firstChild=first;let lastChild=last; let index=index; trackBy: nodeTrackBy\" [node]=\"node\"\n                [firstChild]=\"firstChild\" [lastChild]=\"lastChild\" [index]=\"index\"></p-treeNode>\n            </ul>\n            <div class=\"ui-tree-empty-message\" *ngIf=\"!loading && !value\">{{emptyMessage}}</div>\n        </div>\n        <div [ngClass]=\"{'ui-tree ui-tree-horizontal ui-widget ui-widget-content ui-corner-all':true,'ui-tree-selectable':selectionMode}\"  [ngStyle]=\"style\" [class]=\"styleClass\" *ngIf=\"horizontal\">\n            <div class=\"ui-tree-loading ui-widget-overlay\" *ngIf=\"loading\"></div>\n            <div class=\"ui-tree-loading-content\" *ngIf=\"loading\">\n                <i [class]=\"'ui-tree-loading-icon pi-spin ' + loadingIcon\"></i>\n            </div>\n            <table *ngIf=\"value&&value[0]\">\n                <p-treeNode [node]=\"value[0]\" [root]=\"true\"></p-treeNode>\n            </table>\n            <div class=\"ui-tree-empty-message\" *ngIf=\"!loading && !value\">{{emptyMessage}}</div>\n        </div>\n    "
+            template: "\n        <div [ngClass]=\"{'ui-tree ui-widget ui-widget-content ui-corner-all':true,'ui-tree-selectable':selectionMode,'ui-treenode-dragover':dragHover,'ui-tree-loading': loading}\" [ngStyle]=\"style\" [class]=\"styleClass\" *ngIf=\"!horizontal\"\n            (drop)=\"onDrop($event)\" (dragover)=\"onDragOver($event)\" (dragenter)=\"onDragEnter($event)\" (dragleave)=\"onDragLeave($event)\">\n            <div class=\"ui-tree-loading-mask ui-widget-overlay\" *ngIf=\"loading\"></div>\n            <div class=\"ui-tree-loading-content\" *ngIf=\"loading\">\n                <i [class]=\"'ui-tree-loading-icon pi-spin ' + loadingIcon\"></i>\n            </div>\n            <ul class=\"ui-tree-container\" *ngIf=\"value\" role=\"tree\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledBy\">\n                <p-treeNode *ngFor=\"let node of value;let firstChild=first;let lastChild=last; let index=index; trackBy: nodeTrackBy\" [node]=\"node\"\n                [firstChild]=\"firstChild\" [lastChild]=\"lastChild\" [index]=\"index\"></p-treeNode>\n            </ul>\n            <div class=\"ui-tree-empty-message\" *ngIf=\"!loading && !value\">{{emptyMessage}}</div>\n        </div>\n        <div [ngClass]=\"{'ui-tree ui-tree-horizontal ui-widget ui-widget-content ui-corner-all':true,'ui-tree-selectable':selectionMode}\"  [ngStyle]=\"style\" [class]=\"styleClass\" *ngIf=\"horizontal\">\n            <div class=\"ui-tree-loading ui-widget-overlay\" *ngIf=\"loading\"></div>\n            <div class=\"ui-tree-loading-content\" *ngIf=\"loading\">\n                <i [class]=\"'ui-tree-loading-icon pi-spin ' + loadingIcon\"></i>\n            </div>\n            <table *ngIf=\"value&&value[0]\">\n                <p-treeNode [node]=\"value[0]\" [root]=\"true\"></p-treeNode>\n            </table>\n            <div class=\"ui-tree-empty-message\" *ngIf=\"!loading && !value\">{{emptyMessage}}</div>\n        </div>\n    "
         }),
@@ -685,0 +787,0 @@ __param(1, core_2.Optional()),

components/tree/tree.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"UITreeNode":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"p-treeNode","template":"\n        <ng-template [ngIf]=\"node\">\n            <li *ngIf=\"tree.droppableNodes\" class=\"ui-treenode-droppoint\" [ngClass]=\"{'ui-treenode-droppoint-active ui-state-highlight':draghoverPrev}\"\n            (drop)=\"onDropPoint($event,-1)\" (dragover)=\"onDropPointDragOver($event)\" (dragenter)=\"onDropPointDragEnter($event,-1)\" (dragleave)=\"onDropPointDragLeave($event)\"></li>\n            <li *ngIf=\"!tree.horizontal\" [ngClass]=\"['ui-treenode',node.styleClass||'', isLeaf() ? 'ui-treenode-leaf': '']\">\n                <div class=\"ui-treenode-content\" (click)=\"onNodeClick($event)\" (contextmenu)=\"onNodeRightClick($event)\" (touchend)=\"onNodeTouchEnd()\"\n                    (drop)=\"onDropNode($event)\" (dragover)=\"onDropNodeDragOver($event)\" (dragenter)=\"onDropNodeDragEnter($event)\" (dragleave)=\"onDropNodeDragLeave($event)\"\n                    [ngClass]=\"{'ui-treenode-selectable':tree.selectionMode && node.selectable !== false,'ui-treenode-dragover':draghoverNode, 'ui-treenode-content-selected':isSelected()}\" [draggable]=\"tree.draggableNodes\" (dragstart)=\"onDragStart($event)\" (dragend)=\"onDragStop($event)\">\n                    <span class=\"ui-tree-toggler pi pi-fw\" [ngClass]=\"{'pi-caret-right':!node.expanded,'pi-caret-down':node.expanded}\"\n                            (click)=\"toggle($event)\"></span\n                    ><div class=\"ui-chkbox\" *ngIf=\"tree.selectionMode == 'checkbox' && node.selectable !== false\"><div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\">\n                        <span class=\"ui-chkbox-icon ui-clickable pi\"\n                            [ngClass]=\"{'pi-check':isSelected(),'pi-minus':node.partialSelected}\"></span></div></div\n                    ><span [class]=\"getIcon()\" *ngIf=\"node.icon||node.expandedIcon||node.collapsedIcon\"></span\n                    ><span class=\"ui-treenode-label ui-corner-all\"\n                        [ngClass]=\"{'ui-state-highlight':isSelected()}\">\n                            <span *ngIf=\"!tree.getTemplateForNode(node)\">{{node.label}}</span>\n                            <span *ngIf=\"tree.getTemplateForNode(node)\">\n                                <ng-container *ngTemplateOutlet=\"tree.getTemplateForNode(node); context: {$implicit: node}\"></ng-container>\n                            </span>\n                    </span>\n                </div>\n                <ul class=\"ui-treenode-children\" style=\"display: none;\" *ngIf=\"node.children && node.expanded\" [style.display]=\"node.expanded ? 'block' : 'none'\">\n                    <p-treeNode *ngFor=\"let childNode of node.children;let firstChild=first;let lastChild=last; let index=index; trackBy: tree.nodeTrackBy\" [node]=\"childNode\" [parentNode]=\"node\"\n                        [firstChild]=\"firstChild\" [lastChild]=\"lastChild\" [index]=\"index\"></p-treeNode>\n                </ul>\n            </li>\n            <li *ngIf=\"tree.droppableNodes&&lastChild\" class=\"ui-treenode-droppoint\" [ngClass]=\"{'ui-treenode-droppoint-active ui-state-highlight':draghoverNext}\"\n            (drop)=\"onDropPoint($event,1)\" (dragover)=\"onDropPointDragOver($event)\" (dragenter)=\"onDropPointDragEnter($event,1)\" (dragleave)=\"onDropPointDragLeave($event)\"></li>\n            <table *ngIf=\"tree.horizontal\" [class]=\"node.styleClass\">\n                <tbody>\n                    <tr>\n                        <td class=\"ui-treenode-connector\" *ngIf=\"!root\">\n                            <table class=\"ui-treenode-connector-table\">\n                                <tbody>\n                                    <tr>\n                                        <td [ngClass]=\"{'ui-treenode-connector-line':!firstChild}\"></td>\n                                    </tr>\n                                    <tr>\n                                        <td [ngClass]=\"{'ui-treenode-connector-line':!lastChild}\"></td>\n                                    </tr>\n                                </tbody>\n                            </table>\n                        </td>\n                        <td class=\"ui-treenode\" [ngClass]=\"{'ui-treenode-collapsed':!node.expanded}\">\n                            <div class=\"ui-treenode-content ui-state-default ui-corner-all\"\n                                [ngClass]=\"{'ui-treenode-selectable':tree.selectionMode,'ui-state-highlight':isSelected()}\" (click)=\"onNodeClick($event)\" (contextmenu)=\"onNodeRightClick($event)\"\n                                (touchend)=\"onNodeTouchEnd()\">\n                                <span class=\"ui-tree-toggler pi pi-fw\" [ngClass]=\"{'pi-plus':!node.expanded,'pi-minus':node.expanded}\" *ngIf=\"!isLeaf()\"\n                                        (click)=\"toggle($event)\"></span\n                                ><span [class]=\"getIcon()\" *ngIf=\"node.icon||node.expandedIcon||node.collapsedIcon\"></span\n                                ><span class=\"ui-treenode-label ui-corner-all\">\n                                        <span *ngIf=\"!tree.getTemplateForNode(node)\">{{node.label}}</span>\n                                        <span *ngIf=\"tree.getTemplateForNode(node)\">\n                                        <ng-container *ngTemplateOutlet=\"tree.getTemplateForNode(node); context: {$implicit: node}\"></ng-container>\n                                        </span>\n                                </span>\n                            </div>\n                        </td>\n                        <td class=\"ui-treenode-children-container\" *ngIf=\"node.children && node.expanded\" [style.display]=\"node.expanded ? 'table-cell' : 'none'\">\n                            <div class=\"ui-treenode-children\">\n                                <p-treeNode *ngFor=\"let childNode of node.children;let firstChild=first;let lastChild=last; trackBy: tree.nodeTrackBy\" [node]=\"childNode\"\n                                        [firstChild]=\"firstChild\" [lastChild]=\"lastChild\"></p-treeNode>\n                            </div>\n                        </td>\n                    </tr>\n                </tbody>\n            </table>\n        </ng-template>\n    "}]}],"members":{"node":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":5}}]}],"parentNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":5}}]}],"root":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":5}}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":5}}]}],"firstChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":5}}]}],"lastChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":100,"character":17},"arguments":[{"__symbolic":"reference","name":"Tree"}]}]],"parameters":[{"__symbolic":"reference","name":"Tree"}]}],"ngOnInit":[{"__symbolic":"method"}],"getIcon":[{"__symbolic":"method"}],"isLeaf":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"onNodeClick":[{"__symbolic":"method"}],"onNodeTouchEnd":[{"__symbolic":"method"}],"onNodeRightClick":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"onDropPoint":[{"__symbolic":"method"}],"onDropPointDragOver":[{"__symbolic":"method"}],"onDropPointDragEnter":[{"__symbolic":"method"}],"onDropPointDragLeave":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method"}],"onDragStop":[{"__symbolic":"method"}],"onDropNodeDragOver":[{"__symbolic":"method"}],"onDropNode":[{"__symbolic":"method"}],"onDropNodeDragEnter":[{"__symbolic":"method"}],"onDropNodeDragLeave":[{"__symbolic":"method"}]},"statics":{"ICON_CLASS":"ui-treenode-icon "}},"Tree":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":291,"character":1},"arguments":[{"selector":"p-tree","template":"\n        <div [ngClass]=\"{'ui-tree ui-widget ui-widget-content ui-corner-all':true,'ui-tree-selectable':selectionMode,'ui-treenode-dragover':dragHover,'ui-tree-loading': loading}\" [ngStyle]=\"style\" [class]=\"styleClass\" *ngIf=\"!horizontal\"\n            (drop)=\"onDrop($event)\" (dragover)=\"onDragOver($event)\" (dragenter)=\"onDragEnter($event)\" (dragleave)=\"onDragLeave($event)\">\n            <div class=\"ui-tree-loading-mask ui-widget-overlay\" *ngIf=\"loading\"></div>\n            <div class=\"ui-tree-loading-content\" *ngIf=\"loading\">\n                <i [class]=\"'ui-tree-loading-icon pi-spin ' + loadingIcon\"></i>\n            </div>\n            <ul class=\"ui-tree-container\" *ngIf=\"value\">\n                <p-treeNode *ngFor=\"let node of value;let firstChild=first;let lastChild=last; let index=index; trackBy: nodeTrackBy\" [node]=\"node\"\n                [firstChild]=\"firstChild\" [lastChild]=\"lastChild\" [index]=\"index\"></p-treeNode>\n            </ul>\n            <div class=\"ui-tree-empty-message\" *ngIf=\"!loading && !value\">{{emptyMessage}}</div>\n        </div>\n        <div [ngClass]=\"{'ui-tree ui-tree-horizontal ui-widget ui-widget-content ui-corner-all':true,'ui-tree-selectable':selectionMode}\"  [ngStyle]=\"style\" [class]=\"styleClass\" *ngIf=\"horizontal\">\n            <div class=\"ui-tree-loading ui-widget-overlay\" *ngIf=\"loading\"></div>\n            <div class=\"ui-tree-loading-content\" *ngIf=\"loading\">\n                <i [class]=\"'ui-tree-loading-icon pi-spin ' + loadingIcon\"></i>\n            </div>\n            <table *ngIf=\"value&&value[0]\">\n                <p-treeNode [node]=\"value[0]\" [root]=\"true\"></p-treeNode>\n            </table>\n            <div class=\"ui-tree-empty-message\" *ngIf=\"!loading && !value\">{{emptyMessage}}</div>\n        </div>\n    "}]}],"members":{"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":320,"character":5}}]}],"selectionMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":322,"character":5}}]}],"selection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":324,"character":5}}]}],"selectionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":326,"character":5}}]}],"onNodeSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":328,"character":5}}]}],"onNodeUnselect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":330,"character":5}}]}],"onNodeExpand":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":332,"character":5}}]}],"onNodeCollapse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":334,"character":5}}]}],"onNodeContextMenuSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":336,"character":5}}]}],"onNodeDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":338,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":340,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":342,"character":5}}]}],"contextMenu":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":344,"character":5}}]}],"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":346,"character":5}}]}],"draggableScope":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":348,"character":5}}]}],"droppableScope":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":350,"character":5}}]}],"draggableNodes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":352,"character":5}}]}],"droppableNodes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":354,"character":5}}]}],"metaKeySelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":356,"character":5}}]}],"propagateSelectionUp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":358,"character":5}}]}],"propagateSelectionDown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":360,"character":5}}]}],"loading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":362,"character":5}}]}],"loadingIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":364,"character":5}}]}],"emptyMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":366,"character":5}}]}],"nodeTrackBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":368,"character":5}}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":370,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":370,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":392,"character":40}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":392,"character":27},{"__symbolic":"reference","module":"../common/treedragdropservice","name":"TreeDragDropService","line":392,"character":75}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"onNodeClick":[{"__symbolic":"method"}],"onNodeTouchEnd":[{"__symbolic":"method"}],"onNodeRightClick":[{"__symbolic":"method"}],"findIndexInSelection":[{"__symbolic":"method"}],"propagateUp":[{"__symbolic":"method"}],"propagateDown":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"isSingleSelectionMode":[{"__symbolic":"method"}],"isMultipleSelectionMode":[{"__symbolic":"method"}],"isCheckboxSelectionMode":[{"__symbolic":"method"}],"getTemplateForNode":[{"__symbolic":"method"}],"onDragOver":[{"__symbolic":"method"}],"onDrop":[{"__symbolic":"method"}],"onDragEnter":[{"__symbolic":"method"}],"onDragLeave":[{"__symbolic":"method"}],"allowDrop":[{"__symbolic":"method"}],"isValidDragScope":[{"__symbolic":"method"}],"getBlockableElement":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"TreeModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":775,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":776,"character":14}],"exports":[{"__symbolic":"reference","name":"Tree"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":777,"character":19}],"declarations":[{"__symbolic":"reference","name":"Tree"},{"__symbolic":"reference","name":"UITreeNode"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"UITreeNode":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"p-treeNode","template":"\n        <ng-template [ngIf]=\"node\">\n            <li *ngIf=\"tree.droppableNodes\" class=\"ui-treenode-droppoint\" [ngClass]=\"{'ui-treenode-droppoint-active ui-state-highlight':draghoverPrev}\"\n            (drop)=\"onDropPoint($event,-1)\" (dragover)=\"onDropPointDragOver($event)\" (dragenter)=\"onDropPointDragEnter($event,-1)\" (dragleave)=\"onDropPointDragLeave($event)\"></li>\n            <li *ngIf=\"!tree.horizontal\" [ngClass]=\"['ui-treenode',node.styleClass||'', isLeaf() ? 'ui-treenode-leaf': '']\">\n                <div class=\"ui-treenode-content\" role=\"treeitem\" (click)=\"onNodeClick($event)\" (contextmenu)=\"onNodeRightClick($event)\" (touchend)=\"onNodeTouchEnd()\"\n                    (drop)=\"onDropNode($event)\" (dragover)=\"onDropNodeDragOver($event)\" (dragenter)=\"onDropNodeDragEnter($event)\" (dragleave)=\"onDropNodeDragLeave($event)\"\n                    [draggable]=\"tree.draggableNodes\" (dragstart)=\"onDragStart($event)\" (dragend)=\"onDragStop($event)\" tabIndex=\"0\"\n                    [ngClass]=\"{'ui-treenode-selectable':tree.selectionMode && node.selectable !== false,'ui-treenode-dragover':draghoverNode, 'ui-treenode-content-selected':isSelected()}\" \n                    (keydown)=\"onKeyDown($event)\" [attr.aria-posinset]=\"this.index + 1\" [attr.aria-expanded]=\"this.node.expanded\" [attr.aria-selected]=\"isSelected()\">\n                    <span class=\"ui-tree-toggler pi pi-fw\" [ngClass]=\"{'pi-caret-right':!node.expanded,'pi-caret-down':node.expanded}\"\n                            (click)=\"toggle($event)\"></span\n                    ><div class=\"ui-chkbox\" *ngIf=\"tree.selectionMode == 'checkbox' && node.selectable !== false\"><div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\">\n                        <span class=\"ui-chkbox-icon ui-clickable pi\"\n                            [ngClass]=\"{'pi-check':isSelected(),'pi-minus':node.partialSelected}\"></span></div></div\n                    ><span [class]=\"getIcon()\" *ngIf=\"node.icon||node.expandedIcon||node.collapsedIcon\"></span\n                    ><span class=\"ui-treenode-label ui-corner-all\"\n                        [ngClass]=\"{'ui-state-highlight':isSelected()}\">\n                            <span *ngIf=\"!tree.getTemplateForNode(node)\">{{node.label}}</span>\n                            <span *ngIf=\"tree.getTemplateForNode(node)\">\n                                <ng-container *ngTemplateOutlet=\"tree.getTemplateForNode(node); context: {$implicit: node}\"></ng-container>\n                            </span>\n                    </span>\n                </div>\n                <ul class=\"ui-treenode-children\" style=\"display: none;\" *ngIf=\"node.children && node.expanded\" [style.display]=\"node.expanded ? 'block' : 'none'\" role=\"group\">\n                    <p-treeNode *ngFor=\"let childNode of node.children;let firstChild=first;let lastChild=last; let index=index; trackBy: tree.nodeTrackBy\" [node]=\"childNode\" [parentNode]=\"node\"\n                        [firstChild]=\"firstChild\" [lastChild]=\"lastChild\" [index]=\"index\"></p-treeNode>\n                </ul>\n            </li>\n            <li *ngIf=\"tree.droppableNodes&&lastChild\" class=\"ui-treenode-droppoint\" [ngClass]=\"{'ui-treenode-droppoint-active ui-state-highlight':draghoverNext}\"\n            (drop)=\"onDropPoint($event,1)\" (dragover)=\"onDropPointDragOver($event)\" (dragenter)=\"onDropPointDragEnter($event,1)\" (dragleave)=\"onDropPointDragLeave($event)\"></li>\n            <table *ngIf=\"tree.horizontal\" [class]=\"node.styleClass\">\n                <tbody>\n                    <tr>\n                        <td class=\"ui-treenode-connector\" *ngIf=\"!root\">\n                            <table class=\"ui-treenode-connector-table\">\n                                <tbody>\n                                    <tr>\n                                        <td [ngClass]=\"{'ui-treenode-connector-line':!firstChild}\"></td>\n                                    </tr>\n                                    <tr>\n                                        <td [ngClass]=\"{'ui-treenode-connector-line':!lastChild}\"></td>\n                                    </tr>\n                                </tbody>\n                            </table>\n                        </td>\n                        <td class=\"ui-treenode\" [ngClass]=\"{'ui-treenode-collapsed':!node.expanded}\">\n                            <div class=\"ui-treenode-content ui-state-default ui-corner-all\"\n                                [ngClass]=\"{'ui-treenode-selectable':tree.selectionMode,'ui-state-highlight':isSelected()}\" (click)=\"onNodeClick($event)\" (contextmenu)=\"onNodeRightClick($event)\"\n                                (touchend)=\"onNodeTouchEnd()\">\n                                <span class=\"ui-tree-toggler pi pi-fw\" [ngClass]=\"{'pi-plus':!node.expanded,'pi-minus':node.expanded}\" *ngIf=\"!isLeaf()\"\n                                        (click)=\"toggle($event)\"></span\n                                ><span [class]=\"getIcon()\" *ngIf=\"node.icon||node.expandedIcon||node.collapsedIcon\"></span\n                                ><span class=\"ui-treenode-label ui-corner-all\">\n                                        <span *ngIf=\"!tree.getTemplateForNode(node)\">{{node.label}}</span>\n                                        <span *ngIf=\"tree.getTemplateForNode(node)\">\n                                        <ng-container *ngTemplateOutlet=\"tree.getTemplateForNode(node); context: {$implicit: node}\"></ng-container>\n                                        </span>\n                                </span>\n                            </div>\n                        </td>\n                        <td class=\"ui-treenode-children-container\" *ngIf=\"node.children && node.expanded\" [style.display]=\"node.expanded ? 'table-cell' : 'none'\">\n                            <div class=\"ui-treenode-children\">\n                                <p-treeNode *ngFor=\"let childNode of node.children;let firstChild=first;let lastChild=last; trackBy: tree.nodeTrackBy\" [node]=\"childNode\"\n                                        [firstChild]=\"firstChild\" [lastChild]=\"lastChild\"></p-treeNode>\n                            </div>\n                        </td>\n                    </tr>\n                </tbody>\n            </table>\n        </ng-template>\n    ","providers":[{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":86,"character":16}]}]}],"members":{"node":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":5}}]}],"parentNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":5}}]}],"root":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":5}}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":5}}]}],"firstChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":5}}]}],"lastChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":104,"character":17},"arguments":[{"__symbolic":"reference","name":"Tree"}]}],null],"parameters":[{"__symbolic":"reference","name":"Tree"},{"__symbolic":"reference","module":"../dom/domhandler","name":"DomHandler","line":104,"character":85}]}],"ngOnInit":[{"__symbolic":"method"}],"getIcon":[{"__symbolic":"method"}],"isLeaf":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"expand":[{"__symbolic":"method"}],"collapse":[{"__symbolic":"method"}],"onNodeClick":[{"__symbolic":"method"}],"onNodeTouchEnd":[{"__symbolic":"method"}],"onNodeRightClick":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"onDropPoint":[{"__symbolic":"method"}],"onDropPointDragOver":[{"__symbolic":"method"}],"onDropPointDragEnter":[{"__symbolic":"method"}],"onDropPointDragLeave":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method"}],"onDragStop":[{"__symbolic":"method"}],"onDropNodeDragOver":[{"__symbolic":"method"}],"onDropNode":[{"__symbolic":"method"}],"onDropNodeDragEnter":[{"__symbolic":"method"}],"onDropNodeDragLeave":[{"__symbolic":"method"}],"onKeyDown":[{"__symbolic":"method"}],"findNextSiblingOfAncestor":[{"__symbolic":"method"}],"findLastVisibleDescendant":[{"__symbolic":"method"}],"getParentNodeElement":[{"__symbolic":"method"}],"focusNode":[{"__symbolic":"method"}]},"statics":{"ICON_CLASS":"ui-treenode-icon "}},"Tree":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":403,"character":1},"arguments":[{"selector":"p-tree","template":"\n        <div [ngClass]=\"{'ui-tree ui-widget ui-widget-content ui-corner-all':true,'ui-tree-selectable':selectionMode,'ui-treenode-dragover':dragHover,'ui-tree-loading': loading}\" [ngStyle]=\"style\" [class]=\"styleClass\" *ngIf=\"!horizontal\"\n            (drop)=\"onDrop($event)\" (dragover)=\"onDragOver($event)\" (dragenter)=\"onDragEnter($event)\" (dragleave)=\"onDragLeave($event)\">\n            <div class=\"ui-tree-loading-mask ui-widget-overlay\" *ngIf=\"loading\"></div>\n            <div class=\"ui-tree-loading-content\" *ngIf=\"loading\">\n                <i [class]=\"'ui-tree-loading-icon pi-spin ' + loadingIcon\"></i>\n            </div>\n            <ul class=\"ui-tree-container\" *ngIf=\"value\" role=\"tree\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledBy\">\n                <p-treeNode *ngFor=\"let node of value;let firstChild=first;let lastChild=last; let index=index; trackBy: nodeTrackBy\" [node]=\"node\"\n                [firstChild]=\"firstChild\" [lastChild]=\"lastChild\" [index]=\"index\"></p-treeNode>\n            </ul>\n            <div class=\"ui-tree-empty-message\" *ngIf=\"!loading && !value\">{{emptyMessage}}</div>\n        </div>\n        <div [ngClass]=\"{'ui-tree ui-tree-horizontal ui-widget ui-widget-content ui-corner-all':true,'ui-tree-selectable':selectionMode}\"  [ngStyle]=\"style\" [class]=\"styleClass\" *ngIf=\"horizontal\">\n            <div class=\"ui-tree-loading ui-widget-overlay\" *ngIf=\"loading\"></div>\n            <div class=\"ui-tree-loading-content\" *ngIf=\"loading\">\n                <i [class]=\"'ui-tree-loading-icon pi-spin ' + loadingIcon\"></i>\n            </div>\n            <table *ngIf=\"value&&value[0]\">\n                <p-treeNode [node]=\"value[0]\" [root]=\"true\"></p-treeNode>\n            </table>\n            <div class=\"ui-tree-empty-message\" *ngIf=\"!loading && !value\">{{emptyMessage}}</div>\n        </div>\n    "}]}],"members":{"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":432,"character":5}}]}],"selectionMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":434,"character":5}}]}],"selection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":436,"character":5}}]}],"selectionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":438,"character":5}}]}],"onNodeSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":440,"character":5}}]}],"onNodeUnselect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":442,"character":5}}]}],"onNodeExpand":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":444,"character":5}}]}],"onNodeCollapse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":446,"character":5}}]}],"onNodeContextMenuSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":448,"character":5}}]}],"onNodeDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":450,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":452,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":454,"character":5}}]}],"contextMenu":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":456,"character":5}}]}],"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":458,"character":5}}]}],"draggableScope":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":460,"character":5}}]}],"droppableScope":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":462,"character":5}}]}],"draggableNodes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":464,"character":5}}]}],"droppableNodes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":466,"character":5}}]}],"metaKeySelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":468,"character":5}}]}],"propagateSelectionUp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":470,"character":5}}]}],"propagateSelectionDown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":472,"character":5}}]}],"loading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":474,"character":5}}]}],"loadingIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":476,"character":5}}]}],"emptyMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":478,"character":5}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":480,"character":5}}]}],"ariaLabelledBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":482,"character":5}}]}],"nodeTrackBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":484,"character":5}}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":486,"character":5},"arguments":[{"__symbolic":"reference","module":"../common/shared","name":"PrimeTemplate","line":486,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":508,"character":40}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":508,"character":27},{"__symbolic":"reference","module":"../common/treedragdropservice","name":"TreeDragDropService","line":508,"character":75}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"onNodeClick":[{"__symbolic":"method"}],"onNodeTouchEnd":[{"__symbolic":"method"}],"onNodeRightClick":[{"__symbolic":"method"}],"findIndexInSelection":[{"__symbolic":"method"}],"propagateUp":[{"__symbolic":"method"}],"propagateDown":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"isSingleSelectionMode":[{"__symbolic":"method"}],"isMultipleSelectionMode":[{"__symbolic":"method"}],"isCheckboxSelectionMode":[{"__symbolic":"method"}],"getTemplateForNode":[{"__symbolic":"method"}],"onDragOver":[{"__symbolic":"method"}],"onDrop":[{"__symbolic":"method"}],"onDragEnter":[{"__symbolic":"method"}],"onDragLeave":[{"__symbolic":"method"}],"allowDrop":[{"__symbolic":"method"}],"isValidDragScope":[{"__symbolic":"method"}],"getBlockableElement":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"TreeModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":891,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":892,"character":14}],"exports":[{"__symbolic":"reference","name":"Tree"},{"__symbolic":"reference","module":"../common/shared","name":"SharedModule","line":893,"character":19}],"declarations":[{"__symbolic":"reference","name":"Tree"},{"__symbolic":"reference","name":"UITreeNode"}]}]}]}}}]

package.json

 {
     "name": "primeng",
-    "version": "6.1.4",
+    "version": "6.1.5",
     "license": "MIT",
@@ -5,0 +5,0 @@ "scripts": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7839055

increased by0.55%

Lines of code

77544

increased by0.62%

Worsened metrics

Number of low supply chain risk alerts

61

increased by1.67%

No dependency changes