primeng - npm Package Compare versions

Comparing version 1.0.0-beta.3 to 1.0.0-beta.4

components/accordion/accordion.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -44,3 +45,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-accordion',
-            template: "\n        <div [ngClass]=\"'ui-accordion ui-widget ui-helper-reset'\" [attr.style]=\"style\" [attr.class]=\"styleClass\">\n            <ng-content></ng-content>\n        </div>\n    ",
+            template: "\n        <div [ngClass]=\"'ui-accordion ui-widget ui-helper-reset'\" [attr.style]=\"style\" [class]=\"styleClass\">\n            <ng-content></ng-content>\n        </div>\n    ",
         }), 
@@ -50,4 +51,4 @@ __metadata('design:paramtypes', [core_1.ElementRef])
     return Accordion;
-})();
+}());
 exports.Accordion = Accordion;
 //# sourceMappingURL=accordion.js.map

components/accordion/accordiontab.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -73,4 +74,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return AccordionTab;
-})();
+}());
 exports.AccordionTab = AccordionTab;
 //# sourceMappingURL=accordiontab.js.map

components/api/lazyload.js

@@ -0,1 +1,2 @@
+"use strict";
 //# sourceMappingURL=lazyload.js.map

components/api/message.js

@@ -0,1 +1,2 @@
+"use strict";
 //# sourceMappingURL=message.js.map

components/api/selectitem.js

@@ -0,1 +1,2 @@
+"use strict";
 //# sourceMappingURL=selectitem.js.map

components/api/sortmeta.js

@@ -0,1 +1,2 @@
+"use strict";
 //# sourceMappingURL=sortmeta.js.map

components/api/treenode.js

@@ -0,1 +1,2 @@
+"use strict";
 //# sourceMappingURL=treenode.js.map

components/autocomplete/autocomplete.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -167,3 +168,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             this.panelVisible = true;
-            this.panel.style.zIndex = ++PUI.zindex;
+            this.panel.style.zIndex = ++domhandler_1.DomHandler.zindex;
             this.domHandler.fadeIn(this.panel, 200);
@@ -245,4 +246,6 @@ }
                 case 13:
-                    this.selectItem(highlightedItem);
-                    this.hide();
+                    if (highlightedItem) {
+                        this.selectItem(highlightedItem);
+                        this.hide();
+                    }
                     event.preventDefault();
@@ -355,3 +358,3 @@ break;
             selector: 'p-autoComplete',
-            template: "\n        <span [ngClass]=\"{'ui-autocomplete ui-widget':true,'ui-autocomplete-dd':dropdown}\" [attr.style]=\"style\" [attr.styleClass]=\"styleClass\">\n            <input *ngIf=\"!multiple\" #in pInputText type=\"text\" [attr.style]=\"inputStyle\" [attr.styleClass]=\"inputStyleClass\" \n            [value]=\"value ? (field ? resolveFieldData(value)||value : value) : null\" (input)=\"onInput($event)\" (keydown)=\"onKeydown($event)\" (blur)=\"onModelTouched()\"\n            [attr.placeholder]=\"placeholder\" [attr.size]=\"size\" [attr.maxlength]=\"maxlength\" [attr.readonly]=\"readonly\" [disabled]=\"disabled\" \n            ><ul *ngIf=\"multiple\" class=\"ui-autocomplete-multiple ui-widget ui-inputtext ui-state-default ui-corner-all\" (click)=\"multiIn.focus()\">\n                <li #token *ngFor=\"#val of value\" class=\"ui-autocomplete-token ui-state-highlight ui-corner-all\">\n                    <span class=\"ui-autocomplete-token-icon fa fa-fw fa-close\" (click)=\"removeItem(token)\"></span>\n                    <span class=\"ui-autocomplete-token-label\">{{val[field]}}</span>\n                </li>\n                <li class=\"ui-autocomplete-input-token\">\n                    <input #multiIn type=\"text\" pInputText (input)=\"onInput($event)\" (keydown)=\"onKeydown($event)\" (blur)=\"onModelTouched()\">\n                </li>\n            </ul\n            ><button type=\"button\" pButton icon=\"fa-fw fa-caret-down\" class=\"ui-autocomplete-dropdown\" [disabled]=\"disabled\"\n                (click)=\"handleDropdownClick($event)\" *ngIf=\"dropdown\"></button>\n            <div class=\"ui-autocomplete-panel ui-widget-content ui-corner-all ui-shadow\" [style.display]=\"panelVisible ? 'block' : 'none'\" [style.width]=\"'100%'\" [style.max-height]=\"scrollHeight\">\n                <ul class=\"ui-autocomplete-items ui-autocomplete-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\" \n                    (mouseover)=\"onItemMouseover($event)\" (mouseout)=\"onItemMouseout($event)\" (click)=\"onItemClick($event)\" *ngIf=\"!itemTemplate\">\n                    <li class=\"ui-autocomplete-list-item ui-corner-all\" *ngFor=\"#item of suggestions\">{{field ? item[field] : item}}</li>\n                </ul>\n                <ul class=\"ui-autocomplete-items ui-autocomplete-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\" \n                    (mouseover)=\"onItemMouseover($event)\" (mouseout)=\"onItemMouseout($event)\" (click)=\"onItemClick($event)\"*ngIf=\"itemTemplate\">\n                    <template ngFor [ngForOf]=\"suggestions\" [ngForTemplate]=\"itemTemplate\"></template>\n                </ul>\n            </div>\n        </span>\n    ",
+            template: "\n        <span [ngClass]=\"{'ui-autocomplete ui-widget':true,'ui-autocomplete-dd':dropdown}\" [attr.style]=\"style\" [class]=\"styleClass\">\n            <input *ngIf=\"!multiple\" #in pInputText type=\"text\" [attr.style]=\"inputStyle\" [class]=\"inputStyleClass\" \n            [value]=\"value ? (field ? resolveFieldData(value)||value : value) : null\" (input)=\"onInput($event)\" (keydown)=\"onKeydown($event)\" (blur)=\"onModelTouched()\"\n            [attr.placeholder]=\"placeholder\" [attr.size]=\"size\" [attr.maxlength]=\"maxlength\" [attr.readonly]=\"readonly\" [disabled]=\"disabled\" \n            ><ul *ngIf=\"multiple\" class=\"ui-autocomplete-multiple ui-widget ui-inputtext ui-state-default ui-corner-all\" (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 fa fa-fw fa-close\" (click)=\"removeItem(token)\"></span>\n                    <span class=\"ui-autocomplete-token-label\">{{field ? val[field] : val}}</span>\n                </li>\n                <li class=\"ui-autocomplete-input-token\">\n                    <input #multiIn type=\"text\" pInputText (input)=\"onInput($event)\" (keydown)=\"onKeydown($event)\" (blur)=\"onModelTouched()\">\n                </li>\n            </ul\n            ><button type=\"button\" pButton icon=\"fa-fw fa-caret-down\" class=\"ui-autocomplete-dropdown\" [disabled]=\"disabled\"\n                (click)=\"handleDropdownClick($event)\" *ngIf=\"dropdown\"></button>\n            <div class=\"ui-autocomplete-panel ui-widget-content ui-corner-all ui-shadow\" [style.display]=\"panelVisible ? 'block' : 'none'\" [style.width]=\"'100%'\" [style.max-height]=\"scrollHeight\">\n                <ul class=\"ui-autocomplete-items ui-autocomplete-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\" \n                    (mouseover)=\"onItemMouseover($event)\" (mouseout)=\"onItemMouseout($event)\" (click)=\"onItemClick($event)\" *ngIf=\"!itemTemplate\">\n                    <li class=\"ui-autocomplete-list-item ui-corner-all\" *ngFor=\"let item of suggestions\">{{field ? item[field] : item}}</li>\n                </ul>\n                <ul class=\"ui-autocomplete-items ui-autocomplete-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\" \n                    (mouseover)=\"onItemMouseover($event)\" (mouseout)=\"onItemMouseout($event)\" (click)=\"onItemClick($event)\"*ngIf=\"itemTemplate\">\n                    <template ngFor [ngForOf]=\"suggestions\" [ngForTemplate]=\"itemTemplate\"></template>\n                </ul>\n            </div>\n        </span>\n    ",
             directives: [inputtext_1.InputText, button_1.Button],
@@ -363,4 +366,4 @@ providers: [domhandler_1.DomHandler, AUTOCOMPLETE_VALUE_ACCESSOR]
     return AutoComplete;
-})();
+}());
 exports.AutoComplete = AutoComplete;
 //# sourceMappingURL=autocomplete.js.map

components/breadcrumb/breadcrumb.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -46,3 +47,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-breadcrumb',
-            template: "\n        <div [attr.class]=\"styleClass\" [attr.style]=\"style\" [ngClass]=\"{'ui-breadcrumb ui-widget ui-widget-header ui-helper-clearfix ui-corner-all':true}\">\n            <ng-content></ng-content>\n        </div>\n    "
+            template: "\n        <div [class]=\"styleClass\" [attr.style]=\"style\" [ngClass]=\"{'ui-breadcrumb ui-widget ui-widget-header ui-helper-clearfix ui-corner-all':true}\">\n            <ng-content></ng-content>\n        </div>\n    "
         }), 
@@ -52,4 +53,4 @@ __metadata('design:paramtypes', [core_1.ElementRef])
     return Breadcrumb;
-})();
+}());
 exports.Breadcrumb = Breadcrumb;
 //# sourceMappingURL=breadcrumb.js.map

components/button/button.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -57,3 +58,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (this.icon) {
-            if (this.label) {
+            if (this.label != null && this.label != undefined) {
                 if (this.iconPos == 'left')
@@ -154,4 +155,4 @@ styleClass = styleClass + ' ui-button-text-icon-left';
     return Button;
-})();
+}());
 exports.Button = Button;
 //# sourceMappingURL=button.js.map

components/calendar/calendar.d.ts

@@ -47,2 +47,3 @@ import { ElementRef, AfterViewInit, OnDestroy, OnChanges, SimpleChange, EventEmitter, NgZone } from 'angular2/core';
     locale: any;
+    onBlur: EventEmitter<any>;
     onSelect: EventEmitter<any>;
@@ -59,3 +60,3 @@ value: string;
     onInput(event: any): void;
-    onBlur(event: any): void;
+    handleBlur(event: any): void;
     writeValue(value: any): void;
@@ -62,0 +63,0 @@ registerOnChange(fn: Function): void;

components/calendar/calendar.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -35,2 +36,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         this.secondGrid = 0;
+        this.onBlur = new core_1.EventEmitter();
         this.onSelect = new core_1.EventEmitter();
@@ -99,6 +101,7 @@ this.onModelChange = function () { };
     };
-    Calendar.prototype.onBlur = function (event) {
+    Calendar.prototype.handleBlur = function (event) {
         this.value = event.target.value;
         this.onModelTouched();
         this.focused = false;
+        this.onBlur.emit(event);
     };
@@ -296,2 +299,6 @@ Calendar.prototype.writeValue = function (value) {
         __metadata('design:type', core_1.EventEmitter)
+    ], Calendar.prototype, "onBlur", void 0);
+    __decorate([
+        core_1.Output(), 
+        __metadata('design:type', core_1.EventEmitter)
     ], Calendar.prototype, "onSelect", void 0);
@@ -301,3 +308,3 @@ Calendar = __decorate([
             selector: 'p-calendar',
-            template: "\n        <span [attr.style]=\"style\" [attr.class]=\"styleClass\" [ngClass]=\"'ui-calendar'\" *ngIf=\"!inline\">\n        <input #in type=\"text\" [attr.placeholder]=\"placeholder\" [attr.style]=\"inputStyle\" [attr.class]=\"inputStyleClass\"\n                [value]=\"value||''\" (input)=\"onInput($event)\" [readonly]=\"readonlyInput\"\n                [disabled]=\"disabled\" (mouseenter)=\"hovered=true\" (mouseleave)=\"hovered=false\" (focus)=\"focused=true\" (blur)=\"onBlur($event)\"\n                [ngClass]=\"{'ui-inputtext ui-widget ui-state-default': true, 'ui-corner-all': !showIcon, 'ui-corner-left': showIcon,\n                    'ui-state-hover':hovered,'ui-state-focus':focused,'ui-state-disabled':disabled}\"\n        ><button type=\"button\" icon=\"fa-calendar\" pButton *ngIf=\"showIcon\" (click)=\"onButtonClick($event,in)\" class=\"ui-datepicker-trigger\"></button></span>\n        <div *ngIf=\"inline\"></div>\n    ",
+            template: "\n        <span [attr.style]=\"style\" [class]=\"styleClass\" [ngClass]=\"'ui-calendar'\" *ngIf=\"!inline\">\n        <input #in type=\"text\" [attr.placeholder]=\"placeholder\" [attr.style]=\"inputStyle\" [class]=\"inputStyleClass\"\n                [value]=\"value||''\" (input)=\"onInput($event)\" [readonly]=\"readonlyInput\"\n                [disabled]=\"disabled\" (mouseenter)=\"hovered=true\" (mouseleave)=\"hovered=false\" (focus)=\"focused=true\" (blur)=\"handleBlur($event)\"\n                [ngClass]=\"{'ui-inputtext ui-widget ui-state-default': true, 'ui-corner-all': !showIcon, 'ui-corner-left': showIcon,\n                    'ui-state-hover':hovered,'ui-state-focus':focused,'ui-state-disabled':disabled}\"\n        ><button type=\"button\" icon=\"fa-calendar\" pButton *ngIf=\"showIcon\" (click)=\"onButtonClick($event,in)\" class=\"ui-datepicker-trigger\"></button></span>\n        <div *ngIf=\"inline\"></div>\n    ",
             directives: [button_1.Button],
@@ -309,4 +316,4 @@ providers: [CALENDAR_VALUE_ACCESSOR]
     return Calendar;
-})();
+}());
 exports.Calendar = Calendar;
 //# sourceMappingURL=calendar.js.map

components/carousel/carousel.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -111,4 +112,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return Carousel;
-})();
+}());
 exports.Carousel = Carousel;
 //# sourceMappingURL=carousel.js.map

components/chart/barchart/barchart.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -378,4 +379,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return BarChart;
-})();
+}());
 exports.BarChart = BarChart;
 //# sourceMappingURL=barchart.js.map

components/chart/doughnutchart/doughnutchart.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -352,4 +353,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return DoughnutChart;
-})();
+}());
 exports.DoughnutChart = DoughnutChart;
 //# sourceMappingURL=doughnutchart.js.map

components/chart/linechart/linechart.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -408,4 +409,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return LineChart;
-})();
+}());
 exports.LineChart = LineChart;
 //# sourceMappingURL=linechart.js.map

components/chart/piechart/piechart.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -352,4 +353,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return PieChart;
-})();
+}());
 exports.PieChart = PieChart;
 //# sourceMappingURL=piechart.js.map

components/chart/polarareachart/polarareachart.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -376,4 +377,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return PolarAreaChart;
-})();
+}());
 exports.PolarAreaChart = PolarAreaChart;
 //# sourceMappingURL=polarareachart.js.map

components/chart/radarchart/radarchart.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -414,4 +415,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return RadarChart;
-})();
+}());
 exports.RadarChart = RadarChart;
 //# sourceMappingURL=radarchart.js.map

components/checkbox/checkbox.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -103,4 +104,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return Checkbox;
-})();
+}());
 exports.Checkbox = Checkbox;
 //# sourceMappingURL=checkbox.js.map

components/codehighlighter/codehighlighter.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -25,4 +26,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return CodeHighlighter;
-})();
+}());
 exports.CodeHighlighter = CodeHighlighter;
 //# sourceMappingURL=codehighlighter.js.map

components/column/column.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -83,4 +84,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return Column;
-})();
+}());
 exports.Column = Column;
 //# sourceMappingURL=column.js.map

components/column/columntemplateloader.d.ts

@@ -6,4 +6,5 @@ import { ViewContainerRef } from 'angular2/core';
     rowData: any;
+    rowIndex: number;
     constructor(viewContainer: ViewContainerRef);
     ngOnInit(): void;
 }

components/column/columntemplateloader.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -19,2 +20,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         view.setLocal('rowData', this.rowData);
+        view.setLocal('rowIndex', this.rowIndex);
     };
@@ -29,2 +31,6 @@ __decorate([
     ], ColumnTemplateLoader.prototype, "rowData", void 0);
+    __decorate([
+        core_1.Input(), 
+        __metadata('design:type', Number)
+    ], ColumnTemplateLoader.prototype, "rowIndex", void 0);
     ColumnTemplateLoader = __decorate([
@@ -38,4 +44,4 @@ core_1.Component({
     return ColumnTemplateLoader;
-})();
+}());
 exports.ColumnTemplateLoader = ColumnTemplateLoader;
 //# sourceMappingURL=columntemplateloader.js.map

components/common/footer.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -22,4 +23,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return Footer;
-})();
+}());
 exports.Footer = Footer;
 //# sourceMappingURL=footer.js.map

components/common/header.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -22,4 +23,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return Header;
-})();
+}());
 exports.Header = Header;
 //# sourceMappingURL=header.js.map

components/contextmenu/contextmenu.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -54,3 +55,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-contextMenu',
-            template: "\n        <div [attr.class]=\"styleClass\" [attr.style]=\"style\" [ngClass]=\"{'ui-menu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix ui-contextmenu ui-menu-dynamic ui-shadow':true}\">\n            <ng-content></ng-content>\n        </div>\n    "
+            template: "\n        <div [class]=\"styleClass\" [attr.style]=\"style\" [ngClass]=\"{'ui-menu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix ui-contextmenu ui-menu-dynamic ui-shadow':true}\">\n            <ng-content></ng-content>\n        </div>\n    "
         }), 
@@ -60,4 +61,4 @@ __metadata('design:paramtypes', [core_1.ElementRef])
     return ContextMenu;
-})();
+}());
 exports.ContextMenu = ContextMenu;
 //# sourceMappingURL=contextmenu.js.map

components/datagrid/datagrid.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -143,3 +144,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-dataGrid',
-            template: "\n        <div [ngClass]=\"'ui-datagrid ui-widget'\" [attr.style]=\"style\" [attr.class]=\"styleClass\">\n            <div class=\"ui-datagrid-header ui-widget-header ui-corner-top\" *ngIf=\"header\">\n                <ng-content select=\"header\"></ng-content>\n            </div>\n            <div class=\"ui-datagrid-content ui-widget-content\" [ngClass]=\"'ui-datagrid-col-' + columns\">\n                <template ngFor [ngForOf]=\"dataToRender\" [ngForTemplate]=\"itemTemplate\"></template>\n            </div>\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" \n                (onPageChange)=\"paginate($event)\" styleClass=\"ui-paginator-bottom\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator\"></p-paginator>\n            <div class=\"ui-datagrid-footer ui-widget-header ui-corner-top\" *ngIf=\"footer\">\n                <ng-content select=\"footer\"></ng-content>\n            </div>\n        </div>\n    ",
+            template: "\n        <div [ngClass]=\"'ui-datagrid ui-widget'\" [attr.style]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-datagrid-header ui-widget-header ui-corner-top\" *ngIf=\"header\">\n                <ng-content select=\"header\"></ng-content>\n            </div>\n            <div class=\"ui-datagrid-content ui-widget-content\" [ngClass]=\"'ui-datagrid-col-' + columns\">\n                <template ngFor [ngForOf]=\"dataToRender\" [ngForTemplate]=\"itemTemplate\"></template>\n            </div>\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" \n                (onPageChange)=\"paginate($event)\" styleClass=\"ui-paginator-bottom\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator\"></p-paginator>\n            <div class=\"ui-datagrid-footer ui-widget-header ui-corner-top\" *ngIf=\"footer\">\n                <ng-content select=\"footer\"></ng-content>\n            </div>\n        </div>\n    ",
             directives: [paginator_1.Paginator]
@@ -150,4 +151,4 @@ }),
     return DataGrid;
-})();
+}());
 exports.DataGrid = DataGrid;
 //# sourceMappingURL=datagrid.js.map

components/datalist/datalist.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -138,3 +139,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-dataList',
-            template: "\n        <div [ngClass]=\"'ui-datalist ui-widget'\" [attr.style]=\"style\" [attr.class]=\"styleClass\">\n            <div class=\"ui-datalist-header ui-widget-header ui-corner-top\" *ngIf=\"header\">\n                <ng-content select=\"header\"></ng-content>\n            </div>\n            <div class=\"ui-datalist-content ui-widget-content\">\n                <ul class=\"ui-datalist-data\">\n                    <template ngFor [ngForOf]=\"dataToRender\" [ngForTemplate]=\"itemTemplate\"></template>\n                </ul>\n            </div>\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" \n            (onPageChange)=\"paginate($event)\" styleClass=\"ui-paginator-bottom\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator\"></p-paginator>\n            <div class=\"ui-datalist-footer ui-widget-header ui-corner-bottom\" *ngIf=\"footer\">\n                <ng-content select=\"footer\"></ng-content>\n            </div>\n        </div>\n    ",
+            template: "\n        <div [ngClass]=\"'ui-datalist ui-widget'\" [attr.style]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-datalist-header ui-widget-header ui-corner-top\" *ngIf=\"header\">\n                <ng-content select=\"header\"></ng-content>\n            </div>\n            <div class=\"ui-datalist-content ui-widget-content\">\n                <ul class=\"ui-datalist-data\">\n                    <template ngFor [ngForOf]=\"dataToRender\" [ngForTemplate]=\"itemTemplate\"></template>\n                </ul>\n            </div>\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" \n            (onPageChange)=\"paginate($event)\" styleClass=\"ui-paginator-bottom\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator\"></p-paginator>\n            <div class=\"ui-datalist-footer ui-widget-header ui-corner-bottom\" *ngIf=\"footer\">\n                <ng-content select=\"footer\"></ng-content>\n            </div>\n        </div>\n    ",
             directives: [paginator_1.Paginator]
@@ -145,4 +146,4 @@ }),
     return DataList;
-})();
+}());
 exports.DataList = DataList;
 //# sourceMappingURL=datalist.js.map

components/datascroller/datascroller.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -162,3 +163,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-dataScroller',
-            template: "\n    <div [ngClass]=\"{'ui-datascroller ui-widget': true, 'ui-datascroller-inline': inline}\" [attr.style]=\"style\" [attr.class]=\"styleClass\">\n        <div class=\"ui-datascroller-header ui-widget-header ui-corner-top\" *ngIf=\"header\">\n            <ng-content select=\"header\"></ng-content>\n        </div>\n        <div class=\"ui-datascroller-content ui-widget-content\" [ngStyle]=\"{'max-height': scrollHeight}\">\n            <ul class=\"ui-datascroller-list\">\n                <template ngFor [ngForOf]=\"dataToRender\" [ngForTemplate]=\"itemTemplate\"></template>\n            </ul>\n        </div>\n        <div class=\"ui-datascroller-footer ui-widget-header ui-corner-bottom\" *ngIf=\"footer\">\n            <ng-content select=\"footer\"></ng-content>\n        </div>\n    </div>\n    ",
+            template: "\n    <div [ngClass]=\"{'ui-datascroller ui-widget': true, 'ui-datascroller-inline': inline}\" [attr.style]=\"style\" [class]=\"styleClass\">\n        <div class=\"ui-datascroller-header ui-widget-header ui-corner-top\" *ngIf=\"header\">\n            <ng-content select=\"header\"></ng-content>\n        </div>\n        <div class=\"ui-datascroller-content ui-widget-content\" [ngStyle]=\"{'max-height': scrollHeight}\">\n            <ul class=\"ui-datascroller-list\">\n                <template ngFor [ngForOf]=\"dataToRender\" [ngForTemplate]=\"itemTemplate\"></template>\n            </ul>\n        </div>\n        <div class=\"ui-datascroller-footer ui-widget-header ui-corner-bottom\" *ngIf=\"footer\">\n            <ng-content select=\"footer\"></ng-content>\n        </div>\n    </div>\n    ",
             providers: [domhandler_1.DomHandler]
@@ -169,4 +170,4 @@ }),
     return DataScroller;
-})();
+}());
 exports.DataScroller = DataScroller;
 //# sourceMappingURL=datascroller.js.map

components/datatable/datatable.d.ts

@@ -22,2 +22,3 @@ import { ElementRef, AfterViewInit, AfterViewChecked, OnInit, DoCheck, EventEmitter, Renderer, IterableDiffers, QueryList, TemplateRef } from 'angular2/core';
     editable: boolean;
+    onRowClick: EventEmitter<any>;
     onRowSelect: EventEmitter<any>;
@@ -73,3 +74,3 @@ onRowUnselect: EventEmitter<any>;
     preventBlurOnEdit: boolean;
-    constructor(el: ElementRef, domHandler: DomHandler, differs: IterableDiffers, cols: QueryList<Column>, renderer: Renderer);
+    constructor(el: ElementRef, domHandler: DomHandler, differs: IterableDiffers, cols: QueryList<Column>, rowExpansionTmpl: QueryList<TemplateRef>, renderer: Renderer);
     ngOnInit(): void;
@@ -90,3 +91,3 @@ ngAfterViewChecked(): void;
     getSortOrder(column: Column): number;
-    onRowClick(event: any, rowData: any): void;
+    handleRowClick(event: any, rowData: any): void;
     onRowRightClick(event: any, rowData: any): void;
@@ -93,0 +94,0 @@ rowDblclick(event: any, rowData: any): void;

components/datatable/datatable.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -23,3 +24,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 var DataTable = (function () {
-    function DataTable(el, domHandler, differs, cols, renderer) {
+    function DataTable(el, domHandler, differs, cols, rowExpansionTmpl, renderer) {
         var _this = this;
@@ -31,2 +32,3 @@ this.el = el;
         this.selectionChange = new core_1.EventEmitter();
+        this.onRowClick = new core_1.EventEmitter();
         this.onRowSelect = new core_1.EventEmitter();
@@ -88,2 +90,5 @@ this.onRowUnselect = new core_1.EventEmitter();
         });
+        rowExpansionTmpl.changes.subscribe(function (_) {
+            _this.rowExpansionTemplate = rowExpansionTmpl.first;
+        });
     }
@@ -232,3 +237,3 @@ DataTable.prototype.ngOnInit = function () {
         if (this.value) {
-            if (this.sortColumn.sortable === 'custom') {
+            if (this.sortColumn && this.sortColumn.sortable === 'custom') {
                 this.sortColumn.sortFunction.emit({
@@ -334,6 +339,12 @@ field: this.sortField,
     };
-    DataTable.prototype.onRowClick = function (event, rowData) {
+    DataTable.prototype.handleRowClick = function (event, rowData) {
+        this.onRowClick.next({ originalEvent: event, data: rowData });
         if (!this.selectionMode) {
             return;
         }
+        var targetNode = event.target.nodeName;
+        if (targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A'
+            || (this.domHandler.hasClass(event.target, 'ui-c'))) {
+            return;
+        }
         var selectionIndex = this.findIndexInSelection(rowData);
@@ -449,4 +460,4 @@ var selected = selectionIndex != -1;
                     //global
-                    if (this.globalFilter && !globalMatch && col.filter) {
-                        globalMatch = this.filterConstraints['contains'](this.value[i][col.field], this.globalFilter.value);
+                    if (this.globalFilter && !globalMatch) {
+                        globalMatch = this.filterConstraints['contains'](this.resolveFieldData(this.value[i], col.field), this.globalFilter.value);
                     }
@@ -701,2 +712,6 @@ }
         __metadata('design:type', core_1.EventEmitter)
+    ], DataTable.prototype, "onRowClick", void 0);
+    __decorate([
+        core_1.Output(), 
+        __metadata('design:type', core_1.EventEmitter)
     ], DataTable.prototype, "onRowSelect", void 0);
@@ -839,19 +854,16 @@ __decorate([
     ], DataTable.prototype, "expandableRows", void 0);
-    __decorate([
-        core_1.ContentChild(core_1.TemplateRef), 
-        __metadata('design:type', core_1.TemplateRef)
-    ], DataTable.prototype, "rowExpansionTemplate", void 0);
     DataTable = __decorate([
         core_1.Component({
             selector: 'p-dataTable',
-            template: "\n        <div [attr.style]=\"style\" [attr.class]=\"styleClass\" \n            [ngClass]=\"{'ui-datatable ui-widget': true, 'ui-datatable-reflow':responsive, 'ui-datatable-stacked': stacked}\">\n            <div class=\"ui-datatable-header ui-widget-header\" *ngIf=\"header\">\n                <ng-content select=\"header\"></ng-content>\n            </div>\n            <div class=\"ui-datatable-tablewrapper\" *ngIf=\"!scrollable\">\n                <table>\n                    <thead>\n                        <tr *ngIf=\"!headerRows\" class=\"ui-state-default\">\n                            <th #headerCell *ngFor=\"#col of columns\" [attr.style]=\"col.style\" [attr.class]=\"col.styleClass\" [hidden]=\"col.hidden\"\n                                (click)=\"sort($event,col)\" (mouseenter)=\"hoveredHeader = $event.target\" (mouseleave)=\"hoveredHeader = null\"\n                                [ngClass]=\"{'ui-state-default ui-unselectable-text':true, 'ui-state-hover': headerCell === hoveredHeader && col.sortable,'ui-sortable-column': col.sortable,'ui-state-active': isSorted(col)}\">\n                                <span class=\"ui-column-title\">{{col.header}}</span>\n                                <span class=\"ui-sortable-column-icon fa fa-fw fa-sort\" *ngIf=\"col.sortable\"\n                                     [ngClass]=\"{'fa-sort-desc': (getSortOrder(col) == -1),'fa-sort-asc': (getSortOrder(col) == 1)}\"></span>\n                                <input type=\"text\" pInputText class=\"ui-column-filter\" *ngIf=\"col.filter\" [value]=\"filters[col.field] ? filters[col.field].value : ''\" (click)=\"onFilterInputClick($event)\" (keyup)=\"onFilterKeyup($event.target.value, col.field, col.filterMatchMode)\"/>\n                            </th>\n                        </tr>\n                        <tr *ngFor=\"#headerRow of headerRows\" class=\"ui-state-default\">\n                            <th #headerCell *ngFor=\"#col of headerRow.columns\" [attr.style]=\"col.style\" [attr.class]=\"col.styleClass\" [attr.colspan]=\"col.colspan\" [attr.rowspan]=\"col.rowspan\"\n                                (click)=\"sort($event,col)\" (mouseenter)=\"hoveredHeader = $event.target\" (mouseleave)=\"hoveredHeader = null\" [hidden]=\"col.hidden\"\n                                [ngClass]=\"{'ui-state-default ui-unselectable-text':true, 'ui-state-hover': headerCell === hoveredHeader && col.sortable,'ui-sortable-column': col.sortable,'ui-state-active': isSorted(col)}\">\n                                <span class=\"ui-column-title\">{{col.header}}</span>\n                                <span class=\"ui-sortable-column-icon fa fa-fw fa-sort\" *ngIf=\"col.sortable\"\n                                     [ngClass]=\"{'fa-sort-desc': (getSortOrder(col) == -1),'fa-sort-asc': (getSortOrder(col) == 1)}\"></span>\n                                <input type=\"text\" pInputText class=\"ui-column-filter\" *ngIf=\"col.filter\" [value]=\"filters[col.field] ? filters[col.field].value : ''\" (click)=\"onFilterInputClick($event)\" (keyup)=\"onFilterKeyup($event.target.value, col.field, col.filterMatchMode)\"/>\n                            </th>\n                        </tr>\n                    </thead>\n                    <tfoot *ngIf=\"hasFooter()\">\n                        <tr *ngIf=\"!footerRows\">\n                            <th *ngFor=\"#col of columns\" [attr.style]=\"col.style\" [attr.class]=\"col.styleClass\" [ngClass]=\"{'ui-state-default':true}\" [hidden]=\"col.hidden\">{{col.footer}}</th>\n                        </tr>\n                        <tr *ngFor=\"#footerRow of footerRows\">\n                            <th *ngFor=\"#col of footerRow.columns\" [attr.style]=\"col.style\" [attr.class]=\"col.styleClass\"\n                                [attr.colspan]=\"col.colspan\" [attr.rowspan]=\"col.rowspan\" [hidden]=\"col.hidden\"\n                                [ngClass]=\"{'ui-state-default':true}\">{{col.footer}}</th>\n                        </tr>\n                    </tfoot>\n                    <tbody class=\"ui-datatable-data ui-widget-content\">\n                        <template ngFor #rowData [ngForOf]=\"dataToRender\" #even=\"even\" #odd=\"odd\">\n                            <tr #rowElement class=\"ui-widget-content\" (mouseenter)=\"hoveredRow = $event.target\" (mouseleave)=\"hoveredRow = null\"\n                                    (click)=\"onRowClick($event, rowData)\" (dblclick)=\"rowDblclick($event,rowData)\" (contextmenu)=\"onRowRightClick($event,rowData)\"\n                                    [ngClass]=\"{'ui-datatable-even':even,'ui-datatable-odd':odd,'ui-state-hover': (selectionMode && rowElement == hoveredRow), 'ui-state-highlight': isSelected(rowData)}\">\n                                <td *ngFor=\"#col of columns\" [attr.style]=\"col.style\" [attr.class]=\"col.styleClass\" [hidden]=\"col.hidden\"\n                                    [ngClass]=\"{'ui-editable-column':col.editable}\" (click)=\"switchCellToEditMode($event.target,col,rowData)\">\n                                    <span class=\"ui-column-title\" *ngIf=\"responsive\">{{col.header}}</span>\n                                    <span class=\"ui-cell-data\" *ngIf=\"!col.template\">{{resolveFieldData(rowData,col.field)}}</span>\n                                    <span class=\"ui-cell-data\" *ngIf=\"col.template\">\n                                        <p-columnTemplateLoader [column]=\"col\" [rowData]=\"rowData\"></p-columnTemplateLoader>\n                                    </span>\n                                    <input type=\"text\" class=\"ui-cell-editor ui-state-highlight\" *ngIf=\"col.editable\" [(ngModel)]=\"rowData[col.field]\"\n                                            (blur)=\"switchCellToViewMode($event.target,col,rowData,true)\" (keydown)=\"onCellEditorKeydown($event, col, rowData)\"/>\n                                    <div class=\"ui-row-toggler fa fa-fw ui-c\" [ngClass]=\"{'fa-chevron-circle-down':isRowExpanded(rowData), 'fa-chevron-circle-right': !isRowExpanded(rowData)}\"\n                                        *ngIf=\"col.expander\" (click)=\"toggleRow(rowData)\"></div>\n                                </td>\n                            </tr>\n                            <tr *ngIf=\"expandableRows && isRowExpanded(rowData)\">\n                                <td [attr.colspan]=\"columns.length\">\n                                    <p-rowExpansionLoader [rowData]=\"rowData\" [template]=\"rowExpansionTemplate\"></p-rowExpansionLoader>\n                                </td>\n                            </tr>\n                        </template>\n                    </tbody>\n                </table>\n            </div>\n            <div class=\"ui-widget-header ui-datatable-scrollable-header\" *ngIf=\"scrollable\">\n                <div class=\"ui-datatable-scrollable-header-box\">\n                    <table>\n                        <thead>\n                            <tr>\n                                <th #headerCell *ngFor=\"#col of columns\" [attr.style]=\"col.style\" [attr.class]=\"col.styleClass\" [hidden]=\"col.hidden\"\n                                    (click)=\"sort($event,col)\" (mouseenter)=\"hoveredHeader = $event.target\" (mouseleave)=\"hoveredHeader = null\"\n                                    [ngClass]=\"{'ui-state-default ui-unselectable-text':true, 'ui-state-hover': headerCell === hoveredHeader && col.sortable,'ui-sortable-column': col.sortable,'ui-state-active': col.field === sortField}\">\n                                    <span class=\"ui-column-title\">{{col.header}}</span>\n                                    <span class=\"ui-sortable-column-icon fa fa-fw fa-sort\" *ngIf=\"col.sortable\"\n                                         [ngClass]=\"{'fa-sort-desc': (col.field === sortField) && (sortOrder == -1),'fa-sort-asc': (col.field === sortField) && (sortOrder == 1)}\"></span>\n                                    <input type=\"text\" pInputText class=\"ui-column-filter\" *ngIf=\"col.filter\" (click)=\"onFilterInputClick($event)\" (keyup)=\"onFilterKeyup($event.target.value, col.field, col.filterMatchMode)\"/>\n                                </th>\n                            </tr>\n                        </thead>\n                    </table>\n                </div>\n            </div>\n            <div class=\"ui-datatable-scrollable-body\" *ngIf=\"scrollable\">\n                <table>\n                    <tbody class=\"ui-datatable-data ui-widget-content\">\n                        <tr #rowElement *ngFor=\"#rowData of dataToRender;#even = even; #odd = odd;\" class=\"ui-widget-content\" (mouseenter)=\"hoveredRow = $event.target\" (mouseleave)=\"hoveredRow = null\"\n                                (click)=\"onRowClick($event, rowData)\" (dblclick)=\"rowDblclick($event,rowData)\"\n                                [ngClass]=\"{'ui-datatable-even':even,'ui-datatable-odd':odd,'ui-state-hover': (selectionMode && rowElement == hoveredRow), 'ui-state-highlight': isSelected(rowData)}\">\n                            <td *ngFor=\"#col of columns\" [attr.style]=\"col.style\" [attr.class]=\"col.styleClass\" [hidden]=\"col.hidden\"\n                                [ngClass]=\"{'ui-editable-column':col.editable}\" (click)=\"switchCellToEditMode($event.target,col,rowData)\">\n                                <span class=\"ui-column-title\" *ngIf=\"responsive\">{{col.header}}</span>\n                                <span class=\"ui-cell-data\" *ngIf=\"!col.template\">{{resolveFieldData(rowData,col.field)}}</span>\n                                <span class=\"ui-cell-data\" *ngIf=\"col.template\">\n                                    <p-columnTemplateLoader [column]=\"col\" [rowData]=\"rowData\"></p-columnTemplateLoader>\n                                </span>\n                                <input type=\"text\" class=\"ui-cell-editor ui-state-highlight\" *ngIf=\"col.editable\" [(ngModel)]=\"rowData[col.field]\"\n                                        (blur)=\"switchCellToViewMode($event.target,col,rowData,true)\" (keydown)=\"onCellEditorKeydown($event,col,rowData)\"/>\n                            </td>\n                        </tr>\n                    </tbody>\n                </table>\n            </div>\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" styleClass=\"ui-paginator-bottom\"\n                (onPageChange)=\"paginate($event)\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator\"></p-paginator>\n            <div class=\"ui-datatable-footer ui-widget-header\" *ngIf=\"footer\">\n                <ng-content select=\"footer\"></ng-content>\n            </div>\n        </div>\n    ",
+            template: "\n        <div [attr.style]=\"style\" [class]=\"styleClass\" \n            [ngClass]=\"{'ui-datatable ui-widget': true, 'ui-datatable-reflow':responsive, 'ui-datatable-stacked': stacked}\">\n            <div class=\"ui-datatable-header ui-widget-header\" *ngIf=\"header\">\n                <ng-content select=\"header\"></ng-content>\n            </div>\n            <div class=\"ui-datatable-tablewrapper\" *ngIf=\"!scrollable\">\n                <table>\n                    <thead>\n                        <tr *ngIf=\"!headerRows\" class=\"ui-state-default\">\n                            <th #headerCell *ngFor=\"let col of columns\" [attr.style]=\"col.style\" [class]=\"col.styleClass\" [style.display]=\"col.hidden ? 'none' : 'table-cell'\"\n                                (click)=\"sort($event,col)\" (mouseenter)=\"hoveredHeader = $event.target\" (mouseleave)=\"hoveredHeader = null\"\n                                [ngClass]=\"{'ui-state-default ui-unselectable-text':true, 'ui-state-hover': headerCell === hoveredHeader && col.sortable,'ui-sortable-column': col.sortable,'ui-state-active': isSorted(col)}\">\n                                <span class=\"ui-column-title\">{{col.header}}</span>\n                                <span class=\"ui-sortable-column-icon fa fa-fw fa-sort\" *ngIf=\"col.sortable\"\n                                     [ngClass]=\"{'fa-sort-desc': (getSortOrder(col) == -1),'fa-sort-asc': (getSortOrder(col) == 1)}\"></span>\n                                <input type=\"text\" pInputText class=\"ui-column-filter\" *ngIf=\"col.filter\" [value]=\"filters[col.field] ? filters[col.field].value : ''\" (click)=\"onFilterInputClick($event)\" (keyup)=\"onFilterKeyup($event.target.value, col.field, col.filterMatchMode)\"/>\n                            </th>\n                        </tr>\n                        <tr *ngFor=\"let headerRow of headerRows\" class=\"ui-state-default\">\n                            <th #headerCell *ngFor=\"let col of headerRow.columns\" [attr.style]=\"col.style\" [class]=\"col.styleClass\" [attr.colspan]=\"col.colspan\" [attr.rowspan]=\"col.rowspan\"\n                                (click)=\"sort($event,col)\" (mouseenter)=\"hoveredHeader = $event.target\" (mouseleave)=\"hoveredHeader = null\" [style.display]=\"col.hidden ? 'none' : 'table-cell'\"\n                                [ngClass]=\"{'ui-state-default ui-unselectable-text':true, 'ui-state-hover': headerCell === hoveredHeader && col.sortable,'ui-sortable-column': col.sortable,'ui-state-active': isSorted(col)}\">\n                                <span class=\"ui-column-title\">{{col.header}}</span>\n                                <span class=\"ui-sortable-column-icon fa fa-fw fa-sort\" *ngIf=\"col.sortable\"\n                                     [ngClass]=\"{'fa-sort-desc': (getSortOrder(col) == -1),'fa-sort-asc': (getSortOrder(col) == 1)}\"></span>\n                                <input type=\"text\" pInputText class=\"ui-column-filter\" *ngIf=\"col.filter\" [value]=\"filters[col.field] ? filters[col.field].value : ''\" (click)=\"onFilterInputClick($event)\" (keyup)=\"onFilterKeyup($event.target.value, col.field, col.filterMatchMode)\"/>\n                            </th>\n                        </tr>\n                    </thead>\n                    <tfoot *ngIf=\"hasFooter()\">\n                        <tr *ngIf=\"!footerRows\">\n                            <th *ngFor=\"let col of columns\" [attr.style]=\"col.style\" [class]=\"col.styleClass\" [ngClass]=\"{'ui-state-default':true}\" [style.display]=\"col.hidden ? 'none' : 'table-cell'\">{{col.footer}}</th>\n                        </tr>\n                        <tr *ngFor=\"let footerRow of footerRows\">\n                            <th *ngFor=\"let col of footerRow.columns\" [attr.style]=\"col.style\" [class]=\"col.styleClass\"\n                                [attr.colspan]=\"col.colspan\" [attr.rowspan]=\"col.rowspan\" [style.display]=\"col.hidden ? 'none' : 'table-cell'\"\n                                [ngClass]=\"{'ui-state-default':true}\">{{col.footer}}</th>\n                        </tr>\n                    </tfoot>\n                    <tbody class=\"ui-datatable-data ui-widget-content\">\n                        <template ngFor let-rowData [ngForOf]=\"dataToRender\" let-even=\"even\" let-odd=\"odd\" let-rowIndex=\"index\">\n                            <tr #rowElement class=\"ui-widget-content\" (mouseenter)=\"hoveredRow = $event.target\" (mouseleave)=\"hoveredRow = null\"\n                                    (click)=\"handleRowClick($event, rowData)\" (dblclick)=\"rowDblclick($event,rowData)\" (contextmenu)=\"onRowRightClick($event,rowData)\"\n                                    [ngClass]=\"{'ui-datatable-even':even,'ui-datatable-odd':odd,'ui-state-hover': (selectionMode && rowElement == hoveredRow), 'ui-state-highlight': isSelected(rowData)}\">\n                                <td *ngFor=\"let col of columns\" [attr.style]=\"col.style\" [class]=\"col.styleClass\" [style.display]=\"col.hidden ? 'none' : 'table-cell'\"\n                                    [ngClass]=\"{'ui-editable-column':col.editable}\" (click)=\"switchCellToEditMode($event.target,col,rowData)\">\n                                    <span class=\"ui-column-title\" *ngIf=\"responsive\">{{col.header}}</span>\n                                    <span class=\"ui-cell-data\" *ngIf=\"!col.template\">{{resolveFieldData(rowData,col.field)}}</span>\n                                    <span class=\"ui-cell-data\" *ngIf=\"col.template\">\n                                        <p-columnTemplateLoader [column]=\"col\" [rowData]=\"rowData\" [rowIndex]=\"rowIndex + first\"></p-columnTemplateLoader>\n                                    </span>\n                                    <input type=\"text\" class=\"ui-cell-editor ui-state-highlight\" *ngIf=\"col.editable\" [(ngModel)]=\"rowData[col.field]\"\n                                            (blur)=\"switchCellToViewMode($event.target,col,rowData,true)\" (keydown)=\"onCellEditorKeydown($event, col, rowData)\"/>\n                                    <div class=\"ui-row-toggler fa fa-fw ui-c\" [ngClass]=\"{'fa-chevron-circle-down':isRowExpanded(rowData), 'fa-chevron-circle-right': !isRowExpanded(rowData)}\"\n                                        *ngIf=\"col.expander\" (click)=\"toggleRow(rowData)\"></div>\n                                </td>\n                            </tr>\n                            <tr *ngIf=\"expandableRows && isRowExpanded(rowData)\">\n                                <td [attr.colspan]=\"columns.length\">\n                                    <p-rowExpansionLoader [rowData]=\"rowData\" [template]=\"rowExpansionTemplate\"></p-rowExpansionLoader>\n                                </td>\n                            </tr>\n                        </template>\n                    </tbody>\n                </table>\n            </div>\n            <div class=\"ui-widget-header ui-datatable-scrollable-header\" *ngIf=\"scrollable\">\n                <div class=\"ui-datatable-scrollable-header-box\">\n                    <table>\n                        <thead>\n                            <tr>\n                                <th #headerCell *ngFor=\"let col of columns\" [attr.style]=\"col.style\" [class]=\"col.styleClass\" [style.display]=\"col.hidden ? 'none' : 'table-cell'\"\n                                    (click)=\"sort($event,col)\" (mouseenter)=\"hoveredHeader = $event.target\" (mouseleave)=\"hoveredHeader = null\"\n                                    [ngClass]=\"{'ui-state-default ui-unselectable-text':true, 'ui-state-hover': headerCell === hoveredHeader && col.sortable,'ui-sortable-column': col.sortable,'ui-state-active': isSorted(col)}\">\n                                    <span class=\"ui-column-title\">{{col.header}}</span>\n                                    <span class=\"ui-sortable-column-icon fa fa-fw fa-sort\" *ngIf=\"col.sortable\"\n                                         [ngClass]=\"{'fa-sort-desc': (col.field === sortField) && (sortOrder == -1),'fa-sort-asc': (col.field === sortField) && (sortOrder == 1)}\"></span>\n                                    <input type=\"text\" pInputText class=\"ui-column-filter\" *ngIf=\"col.filter\" (click)=\"onFilterInputClick($event)\" (keyup)=\"onFilterKeyup($event.target.value, col.field, col.filterMatchMode)\"/>\n                                </th>\n                            </tr>\n                        </thead>\n                    </table>\n                </div>\n            </div>\n            <div class=\"ui-datatable-scrollable-body\" *ngIf=\"scrollable\">\n                <table>\n                    <tbody class=\"ui-datatable-data ui-widget-content\">\n                    <template ngFor let-rowData [ngForOf]=\"dataToRender\" let-even=\"even\" let-odd=\"odd\" let-rowIndex=\"index\">\n                        <tr #rowElement class=\"ui-widget-content\" (mouseenter)=\"hoveredRow = $event.target\" (mouseleave)=\"hoveredRow = null\"\n                                (click)=\"handleRowClick($event, rowData)\" (dblclick)=\"rowDblclick($event,rowData)\" (contextmenu)=\"onRowRightClick($event,rowData)\"\n                                [ngClass]=\"{'ui-datatable-even':even,'ui-datatable-odd':odd,'ui-state-hover': (selectionMode && rowElement == hoveredRow), 'ui-state-highlight': isSelected(rowData)}\">\n                            <td *ngFor=\"let col of columns\" [attr.style]=\"col.style\" [class]=\"col.styleClass\" [style.display]=\"col.hidden ? 'none' : 'table-cell'\"\n                                [ngClass]=\"{'ui-editable-column':col.editable}\" (click)=\"switchCellToEditMode($event.target,col,rowData)\">\n                                <span class=\"ui-column-title\" *ngIf=\"responsive\">{{col.header}}</span>\n                                <span class=\"ui-cell-data\" *ngIf=\"!col.template\">{{resolveFieldData(rowData,col.field)}}</span>\n                                <span class=\"ui-cell-data\" *ngIf=\"col.template\">\n                                    <p-columnTemplateLoader [column]=\"col\" [rowData]=\"rowData\" [rowIndex]=\"rowIndex + first\"></p-columnTemplateLoader>\n                                </span>\n                                <input type=\"text\" class=\"ui-cell-editor ui-state-highlight\" *ngIf=\"col.editable\" [(ngModel)]=\"rowData[col.field]\"\n                                        (blur)=\"switchCellToViewMode($event.target,col,rowData,true)\" (keydown)=\"onCellEditorKeydown($event, col, rowData)\"/>\n                                <div class=\"ui-row-toggler fa fa-fw ui-c\" [ngClass]=\"{'fa-chevron-circle-down':isRowExpanded(rowData), 'fa-chevron-circle-right': !isRowExpanded(rowData)}\"\n                                    *ngIf=\"col.expander\" (click)=\"toggleRow(rowData)\"></div>\n                            </td>\n                        </tr>\n                        <tr *ngIf=\"expandableRows && isRowExpanded(rowData)\">\n                            <td [attr.colspan]=\"columns.length\">\n                                <p-rowExpansionLoader [rowData]=\"rowData\" [template]=\"rowExpansionTemplate\"></p-rowExpansionLoader>\n                            </td>\n                        </tr>\n                    </template>\n                    </tbody>\n                </table>\n            </div>\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" styleClass=\"ui-paginator-bottom\"\n                (onPageChange)=\"paginate($event)\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator\"></p-paginator>\n            <div class=\"ui-datatable-footer ui-widget-header\" *ngIf=\"footer\">\n                <ng-content select=\"footer\"></ng-content>\n            </div>\n        </div>\n    ",
             directives: [paginator_1.Paginator, inputtext_1.InputText, columntemplateloader_1.ColumnTemplateLoader, rowexpansionloader_1.RowExpansionLoader],
             providers: [domhandler_1.DomHandler]
         }),
-        __param(3, core_1.Query(column_1.Column)), 
-        __metadata('design:paramtypes', [core_1.ElementRef, domhandler_1.DomHandler, core_1.IterableDiffers, core_1.QueryList, core_1.Renderer])
+        __param(3, core_1.Query(column_1.Column)),
+        __param(4, core_1.Query(core_1.TemplateRef)), 
+        __metadata('design:paramtypes', [core_1.ElementRef, domhandler_1.DomHandler, core_1.IterableDiffers, core_1.QueryList, core_1.QueryList, core_1.Renderer])
     ], DataTable);
     return DataTable;
-})();
+}());
 exports.DataTable = DataTable;
 //# sourceMappingURL=datatable.js.map

components/datatable/rowexpansionloader.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -35,4 +36,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return RowExpansionLoader;
-})();
+}());
 exports.RowExpansionLoader = RowExpansionLoader;
 //# sourceMappingURL=rowexpansionloader.js.map

components/dialog/dialog.d.ts

@@ -1,4 +0,7 @@
-import { ElementRef, AfterViewInit, OnDestroy, OnChanges, SimpleChange, EventEmitter } from 'angular2/core';
-export declare class Dialog implements AfterViewInit, OnDestroy, OnChanges {
+import { ElementRef, AfterViewInit, AfterViewChecked, OnDestroy, EventEmitter, Renderer } from 'angular2/core';
+import { DomHandler } from '../dom/domhandler';
+export declare class Dialog implements AfterViewInit, AfterViewChecked, OnDestroy {
     private el;
+    private domHandler;
+    private renderer;
     header: string;
@@ -11,12 +14,7 @@ draggable: boolean;
     height: any;
-    visible: boolean;
     modal: boolean;
     showEffect: string;
-    hideEffect: string;
-    effectDuration: any;
     closeOnEscape: boolean;
     rtl: boolean;
     closable: boolean;
-    minimizable: boolean;
-    maximizable: boolean;
     responsive: boolean;
@@ -27,13 +25,30 @@ onBeforeShow: EventEmitter<any>;
     onAfterHide: EventEmitter<any>;
-    onMinimize: EventEmitter<any>;
-    onMaximize: EventEmitter<any>;
     visibleChange: EventEmitter<any>;
-    initialized: boolean;
-    stopNgOnChangesPropagation: boolean;
-    constructor(el: ElementRef);
+    _visible: boolean;
+    dragging: boolean;
+    documentDragListener: any;
+    resizing: boolean;
+    documentResizeListener: any;
+    documentResizeEndListener: any;
+    documentResponsiveListener: any;
+    documentEscapeListener: any;
+    lastPageX: number;
+    lastPageY: number;
+    mask: any;
+    shown: boolean;
+    constructor(el: ElementRef, domHandler: DomHandler, renderer: Renderer);
+    visible: boolean;
     ngAfterViewInit(): void;
-    ngOnChanges(changes: {
-        [key: string]: SimpleChange;
-    }): void;
+    ngAfterViewChecked(): void;
+    center(): void;
+    enableModality(): void;
+    disableModality(): void;
+    hide(event: any): void;
+    moveOnTop(): void;
+    initDrag(event: any): void;
+    onDrag(event: any): void;
+    endDrag(event: any): void;
+    initResize(event: any): void;
+    onResize(event: any): void;
     ngOnDestroy(): void;
 }

components/dialog/dialog.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -11,7 +12,12 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 var core_1 = require('angular2/core');
+var domhandler_1 = require('../dom/domhandler');
 var Dialog = (function () {
-    function Dialog(el) {
+    function Dialog(el, domHandler, renderer) {
         this.el = el;
+        this.domHandler = domHandler;
+        this.renderer = renderer;
         this.draggable = true;
         this.resizable = true;
+        this.minWidth = 150;
+        this.minHeight = 150;
         this.closeOnEscape = true;
@@ -23,60 +29,171 @@ this.closable = true;
         this.onAfterHide = new core_1.EventEmitter();
-        this.onMinimize = new core_1.EventEmitter();
-        this.onMaximize = new core_1.EventEmitter();
         this.visibleChange = new core_1.EventEmitter();
-        this.initialized = false;
     }
+    Object.defineProperty(Dialog.prototype, "visible", {
+        get: function () {
+            return this._visible;
+        },
+        set: function (val) {
+            this._visible = val;
+            if (this._visible) {
+                this.onBeforeShow.emit(event);
+                this.el.nativeElement.children[0].style.zIndex = ++domhandler_1.DomHandler.zindex;
+                if (this.showEffect == 'fade')
+                    this.domHandler.fadeIn(this.el.nativeElement.children[0], 250);
+                this.shown = true;
+            }
+            if (this.modal) {
+                if (this._visible)
+                    this.enableModality();
+                else
+                    this.disableModality();
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     Dialog.prototype.ngAfterViewInit = function () {
         var _this = this;
-        jQuery(this.el.nativeElement.children[0]).puidialog({
-            title: this.header,
-            draggable: this.draggable,
-            resizable: this.resizable,
-            minWidth: this.minWidth,
-            minHeight: this.minHeight,
-            width: this.width,
-            height: this.height,
-            visible: this.visible,
-            modal: this.modal,
-            showEffect: this.showEffect,
-            hideEffect: this.hideEffect,
-            effectSpeed: this.effectDuration,
-            closeOnEscape: this.closeOnEscape,
-            rtl: this.rtl,
-            closable: this.closable,
-            minimizable: this.minimizable,
-            maximizable: this.maximizable,
-            responsive: this.responsive,
-            beforeShow: this.onBeforeShow ? function (event) { _this.onBeforeShow.emit(event); } : null,
-            afterShow: this.onAfterShow ? function (event) { _this.onAfterShow.emit(event); } : null,
-            beforeHide: this.onBeforeHide ? function (event) { _this.onBeforeHide.emit(event); } : null,
-            afterHide: this.onAfterHide ? function (event) { _this.onAfterHide.emit(event); } : null,
-            clickClose: function (event) {
-                _this.stopNgOnChangesPropagation = true;
-                _this.visibleChange.emit(false);
-            },
-            hideWithEscape: function (event) {
-                _this.stopNgOnChangesPropagation = true;
-                _this.visibleChange.emit(false);
-            },
-            minimize: this.onMinimize ? function (event) { _this.onMinimize.emit(event); } : null,
-            maximize: this.onMaximize ? function (event) { _this.onMaximize.emit(event); } : null,
-            enhanced: true
-        });
-        this.initialized = true;
-    };
-    Dialog.prototype.ngOnChanges = function (changes) {
-        if (this.initialized) {
-            for (var key in changes) {
-                if (key == 'visible' && this.stopNgOnChangesPropagation) {
-                    this.stopNgOnChangesPropagation = false;
-                    continue;
+        this.center();
+        if (this.draggable) {
+            this.documentDragListener = this.renderer.listenGlobal('body', 'mousemove', function (event) {
+                _this.onDrag(event);
+            });
+        }
+        if (this.resizable) {
+            this.documentResizeListener = this.renderer.listenGlobal('body', 'mousemove', function (event) {
+                _this.onResize(event);
+            });
+            this.documentResizeEndListener = this.renderer.listenGlobal('body', 'mouseup', function (event) {
+                if (_this.resizing) {
+                    _this.resizing = false;
                 }
-                jQuery(this.el.nativeElement.children[0]).puidialog('option', key, changes[key].currentValue);
-            }
+            });
         }
+        if (this.responsive) {
+            this.documentResponsiveListener = this.renderer.listenGlobal('window', 'resize', function (event) {
+                _this.center();
+            });
+        }
+        if (this.closeOnEscape && this.closable) {
+            this.documentEscapeListener = this.renderer.listenGlobal('body', 'keydown', function (event) {
+                if (event.which == 27) {
+                    if (_this.el.nativeElement.children[0].style.zIndex == domhandler_1.DomHandler.zindex) {
+                        _this.hide(event);
+                    }
+                }
+            });
+        }
     };
+    Dialog.prototype.ngAfterViewChecked = function () {
+        if (this.shown) {
+            this.onAfterShow.emit(event);
+            this.shown = false;
+        }
+    };
+    Dialog.prototype.center = function () {
+        var container = this.el.nativeElement.children[0];
+        var elementWidth = this.domHandler.getOuterWidth(container);
+        var elementHeight = this.domHandler.getOuterHeight(container);
+        if (elementWidth == 0 && elementHeight == 0) {
+            container.style.visibility = 'hidden';
+            container.style.display = 'block';
+            elementWidth = this.domHandler.getOuterWidth(container);
+            elementHeight = this.domHandler.getOuterHeight(container);
+            container.style.display = 'none';
+            container.style.visibility = 'visible';
+        }
+        var viewport = this.domHandler.getViewport();
+        var x = (viewport.width - elementWidth) / 2;
+        var y = (viewport.height - elementHeight) / 2;
+        container.style.left = x + 'px';
+        container.style.top = y + 'px';
+    };
+    Dialog.prototype.enableModality = function () {
+        if (!this.mask) {
+            this.mask = document.createElement('div');
+            this.mask.style.zIndex = this.el.nativeElement.children[0].style.zIndex - 1;
+            this.domHandler.addMultipleClasses(this.mask, 'ui-widget-overlay ui-dialog-mask');
+            document.body.appendChild(this.mask);
+        }
+    };
+    Dialog.prototype.disableModality = function () {
+        if (this.mask) {
+            document.body.removeChild(this.mask);
+            this.mask = null;
+        }
+    };
+    Dialog.prototype.hide = function (event) {
+        this.onBeforeHide.emit(event);
+        this.visibleChange.emit(false);
+        this.onAfterHide.emit(event);
+        event.preventDefault();
+    };
+    Dialog.prototype.moveOnTop = function () {
+        this.el.nativeElement.children[0].style.zIndex = ++domhandler_1.DomHandler.zindex;
+    };
+    Dialog.prototype.initDrag = function (event) {
+        if (this.draggable) {
+            this.dragging = true;
+            this.lastPageX = event.pageX;
+            this.lastPageY = event.pageY;
+        }
+    };
+    Dialog.prototype.onDrag = function (event) {
+        if (this.dragging) {
+            var container = this.el.nativeElement.children[0];
+            var deltaX = event.pageX - this.lastPageX;
+            var deltaY = event.pageY - this.lastPageY;
+            var leftPos = parseInt(container.style.left);
+            var topPos = parseInt(container.style.top);
+            container.style.left = leftPos + deltaX + 'px';
+            container.style.top = topPos + deltaY + 'px';
+            this.lastPageX = event.pageX;
+            this.lastPageY = event.pageY;
+        }
+    };
+    Dialog.prototype.endDrag = function (event) {
+        if (this.draggable) {
+            this.dragging = false;
+        }
+    };
+    Dialog.prototype.initResize = function (event) {
+        if (this.resizable) {
+            this.resizing = true;
+            this.lastPageX = event.pageX;
+            this.lastPageY = event.pageY;
+        }
+    };
+    Dialog.prototype.onResize = function (event) {
+        if (this.resizing) {
+            var container = this.el.nativeElement.children[0];
+            var deltaX = event.pageX - this.lastPageX;
+            var deltaY = event.pageY - this.lastPageY;
+            var containerWidth = this.domHandler.getOuterWidth(container);
+            var containerHeight = this.domHandler.getOuterHeight(container);
+            var newWidth = containerWidth + deltaX;
+            var newHeight = containerHeight + deltaY;
+            if (newWidth > this.minWidth)
+                container.style.width = containerWidth + deltaX + 'px';
+            if (newHeight > this.minHeight)
+                container.style.height = containerHeight + deltaY + 'px';
+            this.lastPageX = event.pageX;
+            this.lastPageY = event.pageY;
+        }
+    };
     Dialog.prototype.ngOnDestroy = function () {
-        jQuery(this.el.nativeElement.children[0]).puidialog('destroy');
-        this.initialized = false;
+        this.mask = null;
+        if (this.documentDragListener) {
+            this.documentDragListener();
+        }
+        if (this.resizable) {
+            this.documentResizeListener();
+            this.documentResizeEndListener();
+        }
+        if (this.responsive) {
+            this.documentResponsiveListener();
+        }
+        if (this.closeOnEscape) {
+            this.documentEscapeListener();
+        }
     };
@@ -114,6 +231,2 @@ __decorate([
         __metadata('design:type', Boolean)
-    ], Dialog.prototype, "visible", void 0);
-    __decorate([
-        core_1.Input(), 
-        __metadata('design:type', Boolean)
     ], Dialog.prototype, "modal", void 0);
@@ -126,10 +239,2 @@ __decorate([
         core_1.Input(), 
-        __metadata('design:type', String)
-    ], Dialog.prototype, "hideEffect", void 0);
-    __decorate([
-        core_1.Input(), 
-        __metadata('design:type', Object)
-    ], Dialog.prototype, "effectDuration", void 0);
-    __decorate([
-        core_1.Input(), 
         __metadata('design:type', Boolean)
@@ -148,10 +253,2 @@ ], Dialog.prototype, "closeOnEscape", void 0);
         __metadata('design:type', Boolean)
-    ], Dialog.prototype, "minimizable", void 0);
-    __decorate([
-        core_1.Input(), 
-        __metadata('design:type', Boolean)
-    ], Dialog.prototype, "maximizable", void 0);
-    __decorate([
-        core_1.Input(), 
-        __metadata('design:type', Boolean)
     ], Dialog.prototype, "responsive", void 0);
@@ -177,21 +274,18 @@ __decorate([
         __metadata('design:type', core_1.EventEmitter)
-    ], Dialog.prototype, "onMinimize", void 0);
+    ], Dialog.prototype, "visibleChange", void 0);
     __decorate([
-        core_1.Output(), 
-        __metadata('design:type', core_1.EventEmitter)
-    ], Dialog.prototype, "onMaximize", void 0);
-    __decorate([
-        core_1.Output(), 
-        __metadata('design:type', core_1.EventEmitter)
-    ], Dialog.prototype, "visibleChange", void 0);
+        core_1.Input(), 
+        __metadata('design:type', Boolean)
+    ], Dialog.prototype, "visible", null);
     Dialog = __decorate([
         core_1.Component({
             selector: 'p-dialog',
-            template: "\n        <div class=\"ui-dialog ui-widget ui-widget-content ui-helper-hidden ui-corner-all ui-shadow\" [ngClass]=\"{'ui-dialog-rtl':rtl}\">\n            <div class=\"ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top\">\n                <span class=\"ui-dialog-title\">{{header}}</span>\n                <a class=\"ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all\" href=\"#\" role=\"button\" *ngIf=\"closable\">\n                    <span class=\"fa fa-fw fa-close\"></span>\n                </a>\n                <a class=\"ui-dialog-titlebar-icon ui-dialog-titlebar-maximize ui-corner-all\" href=\"#\" role=\"button\" *ngIf=\"maximizable\">\n                    <span class=\"fa fa-fw fa-sort\"></span>\n                </a>\n                <a class=\"ui-dialog-titlebar-icon ui-dialog-titlebar-minimize ui-corner-all\" href=\"#\" role=\"button\" *ngIf=\"minimizable\">\n                    <span class=\"fa fa-fw fa-minus\"></span>\n                </a>\n            </div>\n            <div class=\"ui-dialog-content ui-widget-content\">\n                <ng-content></ng-content>\n            </div>\n            <ng-content select=\"footer\"></ng-content>\n        </div>\n    "
+            template: "\n        <div [ngClass]=\"{'ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow':true,'ui-dialog-rtl':rtl,'ui-dialog-draggable':draggable}\" \n            [style.display]=\"visible ? 'block' : 'none'\" [style.width.px]=\"width\" [style.height.px]=\"height\" (mousedown)=\"moveOnTop()\">\n            <div class=\"ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top\"\n                (mousedown)=\"initDrag($event)\" (mouseup)=\"endDrag($event)\">\n                <span class=\"ui-dialog-title\">{{header}}</span>\n                <a [ngClass]=\"{'ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all':true,'ui-state-hover':hoverCloseIcon}\" href=\"#\" role=\"button\" *ngIf=\"closable\" \n                    (click)=\"hide($event)\" (mouseenter)=\"hoverCloseIcon=true\" (mouseleave)=\"hoverCloseIcon=false\">\n                    <span class=\"fa fa-fw fa-close\"></span>\n                </a>\n            </div>\n            <div class=\"ui-dialog-content ui-widget-content\">\n                <ng-content></ng-content>\n            </div>\n            <ng-content select=\"footer\"></ng-content>\n            <div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90;\"\n                (mousedown)=\"initResize($event)\"></div>\n        </div>\n    ",
+            providers: [domhandler_1.DomHandler]
         }), 
-        __metadata('design:paramtypes', [core_1.ElementRef])
+        __metadata('design:paramtypes', [core_1.ElementRef, domhandler_1.DomHandler, core_1.Renderer])
     ], Dialog);
     return Dialog;
-})();
+}());
 exports.Dialog = Dialog;
 //# sourceMappingURL=dialog.js.map

components/dom/domhandler.d.ts

 export declare class DomHandler {
+    static zindex: number;
     addClass(element: any, className: string): void;
@@ -14,6 +15,11 @@ addMultipleClasses(element: any, className: string): void;
     scrollInView(container: any, item: any): void;
-    getOuterHeight(element: any): number;
     fadeIn(element: any, duration: number): void;
+    fadeOut(element: any, ms: any): void;
     getWindowScrollTop(): number;
     matches(element: any, selector: string): boolean;
+    getOuterWidth(el: any, margin?: any): any;
+    innerWidth(el: any): any;
+    width(el: any): any;
+    getOuterHeight(el: any, margin?: any): any;
+    getViewport(): any;
 }

components/dom/domhandler.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -119,8 +120,2 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     };
-    DomHandler.prototype.getOuterHeight = function (element) {
-        var height = element.offsetHeight;
-        var style = getComputedStyle(element);
-        height += parseInt(style.marginTop) + parseInt(style.marginBottom);
-        return height;
-    };
     DomHandler.prototype.fadeIn = function (element, duration) {
@@ -138,2 +133,12 @@ element.style.opacity = 0;
     };
+    DomHandler.prototype.fadeOut = function (element, ms) {
+        var opacity = 1, interval = 50, duration = ms, gap = interval / duration;
+        var fading = setInterval(function () {
+            opacity = opacity - gap;
+            element.style.opacity = opacity;
+            if (opacity <= 0) {
+                clearInterval(fading);
+            }
+        }, interval);
+    };
     DomHandler.prototype.getWindowScrollTop = function () {
@@ -150,2 +155,35 @@ var doc = document.documentElement;
     };
+    DomHandler.prototype.getOuterWidth = function (el, margin) {
+        var width = el.offsetWidth;
+        if (margin) {
+            var style = getComputedStyle(el);
+            width += parseInt(style.paddingLeft) + parseInt(style.paddingRight);
+        }
+        return width;
+    };
+    DomHandler.prototype.innerWidth = function (el) {
+        var width = el.offsetWidth;
+        var style = getComputedStyle(el);
+        width += parseInt(style.paddingLeft) + parseInt(style.paddingRight);
+        return width;
+    };
+    DomHandler.prototype.width = function (el) {
+        var width = el.offsetWidth;
+        var style = getComputedStyle(el);
+        width -= parseInt(style.paddingLeft) + parseInt(style.paddingRight);
+        return width;
+    };
+    DomHandler.prototype.getOuterHeight = function (el, margin) {
+        var height = el.offsetHeight;
+        if (margin) {
+            var style = getComputedStyle(el);
+            height += parseInt(style.marginTop) + parseInt(style.marginBottom);
+        }
+        return height;
+    };
+    DomHandler.prototype.getViewport = function () {
+        var win = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], w = win.innerWidth || e.clientWidth || g.clientWidth, h = win.innerHeight || e.clientHeight || g.clientHeight;
+        return { width: w, height: h };
+    };
+    DomHandler.zindex = 1000;
     DomHandler = __decorate([
@@ -156,4 +194,4 @@ core_1.Injectable(),
     return DomHandler;
-})();
+}());
 exports.DomHandler = DomHandler;
 //# sourceMappingURL=domhandler.js.map

components/dragdrop/draggable.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -115,4 +116,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return Draggable;
-})();
+}());
 exports.Draggable = Draggable;
 //# sourceMappingURL=draggable.js.map

components/dragdrop/droppable.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -111,4 +112,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return Droppable;
-})();
+}());
 exports.Droppable = Droppable;
 //# sourceMappingURL=droppable.js.map

components/dropdown/dropdown.d.ts

@@ -17,2 +17,3 @@ import { ElementRef, OnInit, AfterViewInit, AfterViewChecked, DoCheck, OnDestroy, Renderer, EventEmitter, TemplateRef, IterableDiffers } from 'angular2/core';
     autoWidth: boolean;
+    required: boolean;
     itemTemplate: TemplateRef;
@@ -19,0 +20,0 @@ constructor(el: ElementRef, domHandler: DomHandler, renderer: Renderer, differs: IterableDiffers);

components/dropdown/dropdown.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -136,3 +137,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             this.panelVisible = true;
-            panel.style.zIndex = ++PUI.zindex;
+            panel.style.zIndex = ++domhandler_1.DomHandler.zindex;
             this.domHandler.relativePosition(panel, container);
@@ -323,2 +324,6 @@ this.domHandler.fadeIn(panel, 250);
     __decorate([
+        core_1.Input(), 
+        __metadata('design:type', Boolean)
+    ], Dropdown.prototype, "required", void 0);
+    __decorate([
         core_1.ContentChild(core_1.TemplateRef), 
@@ -330,3 +335,3 @@ __metadata('design:type', core_1.TemplateRef)
             selector: 'p-dropdown',
-            template: "\n        <div [ngClass]=\"{'ui-dropdown ui-widget ui-state-default ui-corner-all ui-helper-clearfix':true,'ui-state-hover':hover&&!disabled,'ui-state-focus':focus,'ui-state-disabled':disabled}\" \n            (mouseenter)=\"onMouseenter($event)\" (mouseleave)=\"onMouseleave($event)\" (click)=\"onMouseclick($event,in)\" [attr.style]=\"style\" [attr.styleClass]=\"styleClass\">\n            <div class=\"ui-helper-hidden-accessible\">\n                <select>\n                    <option *ngFor=\"#option of options\" [value]=\"option.value\">{{option.label}}</option>\n                </select>\n            </div>\n            <div class=\"ui-helper-hidden-accessible\">\n                <input #in type=\"text\" readonly (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\" (keydown)=\"onKeydown($event)\">\n            </div>\n            <label class=\"ui-dropdown-label ui-inputtext ui-corner-all\" [innerHTML]=\"label\"></label>\n            <div class=\"ui-dropdown-trigger ui-state-default ui-corner-right\" [ngClass]=\"{'ui-state-hover':hover&&!disabled,'ui-state-focus':focus}\">\n                <span class=\"fa fa-fw fa-caret-down\"></span>\n            </div>\n            <div class=\"ui-dropdown-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow\" \n                [style.display]=\"panelVisible ? 'block' : 'none'\">\n                <div *ngIf=\"filter\" class=\"ui-dropdown-filter-container\" (input)=\"onFilter($event)\" (click)=\"$event.stopPropagation()\">\n                    <input type=\"text\" autocomplete=\"off\" class=\"ui-dropdown-filter ui-inputtext ui-widget ui-state-default ui-corner-all\">\n                    <span class=\"fa fa-search\"></span>\n                </div>\n                <div class=\"ui-dropdown-items-wrapper\" [style.max-height]=\"scrollHeight||'auto'\">\n                    <ul *ngIf=\"!itemTemplate\" class=\"ui-dropdown-items ui-dropdown-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\"\n                        (mouseover)=\"onListMouseover($event)\" (mouseout)=\"onListMouseout($event)\">\n                        <li *ngFor=\"#option of optionsToDisplay;#i=index\" [attr.data-label]=\"option.label\" [attr.data-value]=\"option.value\" (click)=\"onListClick($event)\"\n                            class=\"ui-dropdown-item ui-corner-all\">{{option.label}}</li>\n                    </ul>\n                    <ul *ngIf=\"itemTemplate\" class=\"ui-dropdown-items ui-dropdown-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\"\n                        (mouseover)=\"onListMouseover($event)\" (mouseout)=\"onListMouseout($event)\" (click)=\"onListClick($event)\">\n                        <template ngFor [ngForOf]=\"optionsToDisplay\" [ngForTemplate]=\"itemTemplate\"></template>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    ",
+            template: "\n        <div [ngClass]=\"{'ui-dropdown ui-widget ui-state-default ui-corner-all ui-helper-clearfix':true,'ui-state-hover':hover&&!disabled,'ui-state-focus':focus,'ui-state-disabled':disabled}\" \n            (mouseenter)=\"onMouseenter($event)\" (mouseleave)=\"onMouseleave($event)\" (click)=\"onMouseclick($event,in)\" [attr.style]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-helper-hidden-accessible\">\n                <select [required]=\"required\">\n                    <option *ngFor=\"let option of options\" [value]=\"option.value\" [selected]=\"value == option.value\">{{option.label}}</option>\n                </select>\n            </div>\n            <div class=\"ui-helper-hidden-accessible\">\n                <input #in type=\"text\" readonly (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\" (keydown)=\"onKeydown($event)\">\n            </div>\n            <label class=\"ui-dropdown-label ui-inputtext ui-corner-all\" [innerHTML]=\"label\"></label>\n            <div class=\"ui-dropdown-trigger ui-state-default ui-corner-right\" [ngClass]=\"{'ui-state-hover':hover&&!disabled,'ui-state-focus':focus}\">\n                <span class=\"fa fa-fw fa-caret-down\"></span>\n            </div>\n            <div class=\"ui-dropdown-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow\" \n                [style.display]=\"panelVisible ? 'block' : 'none'\">\n                <div *ngIf=\"filter\" class=\"ui-dropdown-filter-container\" (input)=\"onFilter($event)\" (click)=\"$event.stopPropagation()\">\n                    <input type=\"text\" autocomplete=\"off\" class=\"ui-dropdown-filter ui-inputtext ui-widget ui-state-default ui-corner-all\">\n                    <span class=\"fa fa-search\"></span>\n                </div>\n                <div class=\"ui-dropdown-items-wrapper\" [style.max-height]=\"scrollHeight||'auto'\">\n                    <ul *ngIf=\"!itemTemplate\" class=\"ui-dropdown-items ui-dropdown-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\"\n                        (mouseover)=\"onListMouseover($event)\" (mouseout)=\"onListMouseout($event)\">\n                        <li *ngFor=\"let option of optionsToDisplay;let i=index\" [attr.data-label]=\"option.label\" [attr.data-value]=\"option.value\" (click)=\"onListClick($event)\"\n                            class=\"ui-dropdown-item ui-corner-all\">{{option.label}}</li>\n                    </ul>\n                    <ul *ngIf=\"itemTemplate\" class=\"ui-dropdown-items ui-dropdown-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\"\n                        (mouseover)=\"onListMouseover($event)\" (mouseout)=\"onListMouseout($event)\" (click)=\"onListClick($event)\">\n                        <template ngFor [ngForOf]=\"optionsToDisplay\" [ngForTemplate]=\"itemTemplate\"></template>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    ",
             providers: [domhandler_1.DomHandler, DROPDOWN_VALUE_ACCESSOR]
@@ -337,4 +342,4 @@ }),
     return Dropdown;
-})();
+}());
 exports.Dropdown = Dropdown;
 //# sourceMappingURL=dropdown.js.map

components/editor/editor.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -109,3 +110,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-editor',
-            template: "\n        <div [ngClass]=\"'ui-widget ui-editor-container ui-widget-content ui-corner-all'\" [attr.style]=\"style\" [attr.class]=\"styleClass\">\n            <div class=\"ui-editor-toolbar ui-widget-header ui-corner-top\" *ngIf=\"toolbar\">\n                <ng-content select=\"header\"></ng-content>\n            </div>\n            <div class=\"ui-editor-toolbar ui-widget-header ui-corner-top\" *ngIf=\"!toolbar\">\n            <span class=\"ql-format-group\">\n                <select title=\"Font\" class=\"ql-font\">\n                    <option value=\"sans-serif\" selected=\"\">Sans Serif</option>\n                    <option value=\"serif\">Serif</option>\n                    <option value=\"monospace\">Monospace</option>\n                </select>\n                <select title=\"Size\" class=\"ql-size\">\n                    <option value=\"10px\">Small</option>\n                    <option value=\"13px\" selected=\"\">Normal</option>\n                    <option value=\"18px\">Large</option>\n                    <option value=\"32px\">Huge</option>\n                </select>\n                </span>\n                <span class=\"ql-format-group\">\n                    <span title=\"Bold\" class=\"ql-format-button ql-bold\"></span>\n                    <span class=\"ql-format-separator\"></span>\n                    <span title=\"Italic\" class=\"ql-format-button ql-italic\"></span>\n                    <span class=\"ql-format-separator\"></span>\n                    <span title=\"Underline\" class=\"ql-format-button ql-underline\"></span>\n                    <span class=\"ql-format-separator\"></span>\n                    <span title=\"Strikethrough\" class=\"ql-format-button ql-strike\"></span>\n                </span>\n                <span class=\"ql-format-group\">\n                    <select title=\"Text Color\" class=\"ql-color\">\n                        <option value=\"rgb(0, 0, 0)\" label=\"rgb(0, 0, 0)\" selected=\"\"></option>\n                        <option value=\"rgb(230, 0, 0)\" label=\"rgb(230, 0, 0)\"></option>\n                        <option value=\"rgb(255, 153, 0)\" label=\"rgb(255, 153, 0)\"></option>\n                        <option value=\"rgb(255, 255, 0)\" label=\"rgb(255, 255, 0)\"></option>\n                        <option value=\"rgb(0, 138, 0)\" label=\"rgb(0, 138, 0)\"></option>\n                        <option value=\"rgb(0, 102, 204)\" label=\"rgb(0, 102, 204)\"></option>\n                        <option value=\"rgb(153, 51, 255)\" label=\"rgb(153, 51, 255)\"></option>\n                        <option value=\"rgb(255, 255, 255)\" label=\"rgb(255, 255, 255)\"></option>\n                        <option value=\"rgb(250, 204, 204)\" label=\"rgb(250, 204, 204)\"></option>\n                        <option value=\"rgb(255, 235, 204)\" label=\"rgb(255, 235, 204)\"></option>\n                        <option value=\"rgb(255, 255, 204)\" label=\"rgb(255, 255, 204)\"></option>\n                        <option value=\"rgb(204, 232, 204)\" label=\"rgb(204, 232, 204)\"></option>\n                        <option value=\"rgb(204, 224, 245)\" label=\"rgb(204, 224, 245)\"></option>\n                        <option value=\"rgb(235, 214, 255)\" label=\"rgb(235, 214, 255)\"></option>\n                        <option value=\"rgb(187, 187, 187)\" label=\"rgb(187, 187, 187)\"></option>\n                        <option value=\"rgb(240, 102, 102)\" label=\"rgb(240, 102, 102)\"></option>\n                        <option value=\"rgb(255, 194, 102)\" label=\"rgb(255, 194, 102)\"></option>\n                        <option value=\"rgb(255, 255, 102)\" label=\"rgb(255, 255, 102)\"></option>\n                        <option value=\"rgb(102, 185, 102)\" label=\"rgb(102, 185, 102)\"></option>\n                        <option value=\"rgb(102, 163, 224)\" label=\"rgb(102, 163, 224)\"></option>\n                        <option value=\"rgb(194, 133, 255)\" label=\"rgb(194, 133, 255)\"></option>\n                        <option value=\"rgb(136, 136, 136)\" label=\"rgb(136, 136, 136)\"></option>\n                        <option value=\"rgb(161, 0, 0)\" label=\"rgb(161, 0, 0)\"></option>\n                        <option value=\"rgb(178, 107, 0)\" label=\"rgb(178, 107, 0)\"></option>\n                        <option value=\"rgb(178, 178, 0)\" label=\"rgb(178, 178, 0)\"></option>\n                        <option value=\"rgb(0, 97, 0)\" label=\"rgb(0, 97, 0)\"></option>\n                        <option value=\"rgb(0, 71, 178)\" label=\"rgb(0, 71, 178)\"></option>\n                        <option value=\"rgb(107, 36, 178)\" label=\"rgb(107, 36, 178)\"></option>\n                        <option value=\"rgb(68, 68, 68)\" label=\"rgb(68, 68, 68)\"></option>\n                        <option value=\"rgb(92, 0, 0)\" label=\"rgb(92, 0, 0)\"></option>\n                        <option value=\"rgb(102, 61, 0)\" label=\"rgb(102, 61, 0)\"></option>\n                        <option value=\"rgb(102, 102, 0)\" label=\"rgb(102, 102, 0)\"></option>\n                        <option value=\"rgb(0, 55, 0)\" label=\"rgb(0, 55, 0)\"></option>\n                        <option value=\"rgb(0, 41, 102)\" label=\"rgb(0, 41, 102)\"></option>\n                        <option value=\"rgb(61, 20, 102)\" label=\"rgb(61, 20, 102)\"></option>\n                    </select>\n                    <span class=\"ql-format-separator\"></span>\n                    <select title=\"Background Color\" class=\"ql-background\">\n                        <option value=\"rgb(0, 0, 0)\" label=\"rgb(0, 0, 0)\"></option>\n                        <option value=\"rgb(230, 0, 0)\" label=\"rgb(230, 0, 0)\"></option>\n                        <option value=\"rgb(255, 153, 0)\" label=\"rgb(255, 153, 0)\"></option>\n                        <option value=\"rgb(255, 255, 0)\" label=\"rgb(255, 255, 0)\"></option>\n                        <option value=\"rgb(0, 138, 0)\" label=\"rgb(0, 138, 0)\"></option>\n                        <option value=\"rgb(0, 102, 204)\" label=\"rgb(0, 102, 204)\"></option>\n                        <option value=\"rgb(153, 51, 255)\" label=\"rgb(153, 51, 255)\"></option>\n                        <option value=\"rgb(255, 255, 255)\" label=\"rgb(255, 255, 255)\" selected=\"\"></option>\n                        <option value=\"rgb(250, 204, 204)\" label=\"rgb(250, 204, 204)\"></option>\n                        <option value=\"rgb(255, 235, 204)\" label=\"rgb(255, 235, 204)\"></option>\n                        <option value=\"rgb(255, 255, 204)\" label=\"rgb(255, 255, 204)\"></option>\n                        <option value=\"rgb(204, 232, 204)\" label=\"rgb(204, 232, 204)\"></option>\n                        <option value=\"rgb(204, 224, 245)\" label=\"rgb(204, 224, 245)\"></option>\n                        <option value=\"rgb(235, 214, 255)\" label=\"rgb(235, 214, 255)\"></option>\n                        <option value=\"rgb(187, 187, 187)\" label=\"rgb(187, 187, 187)\"></option>\n                        <option value=\"rgb(240, 102, 102)\" label=\"rgb(240, 102, 102)\"></option>\n                        <option value=\"rgb(255, 194, 102)\" label=\"rgb(255, 194, 102)\"></option>\n                        <option value=\"rgb(255, 255, 102)\" label=\"rgb(255, 255, 102)\"></option>\n                        <option value=\"rgb(102, 185, 102)\" label=\"rgb(102, 185, 102)\"></option>\n                        <option value=\"rgb(102, 163, 224)\" label=\"rgb(102, 163, 224)\"></option>\n                        <option value=\"rgb(194, 133, 255)\" label=\"rgb(194, 133, 255)\"></option>\n                        <option value=\"rgb(136, 136, 136)\" label=\"rgb(136, 136, 136)\"></option>\n                        <option value=\"rgb(161, 0, 0)\" label=\"rgb(161, 0, 0)\"></option>\n                        <option value=\"rgb(178, 107, 0)\" label=\"rgb(178, 107, 0)\"></option>\n                        <option value=\"rgb(178, 178, 0)\" label=\"rgb(178, 178, 0)\"></option>\n                        <option value=\"rgb(0, 97, 0)\" label=\"rgb(0, 97, 0)\"></option>\n                        <option value=\"rgb(0, 71, 178)\" label=\"rgb(0, 71, 178)\"></option>\n                        <option value=\"rgb(107, 36, 178)\" label=\"rgb(107, 36, 178)\"></option>\n                        <option value=\"rgb(68, 68, 68)\" label=\"rgb(68, 68, 68)\"></option>\n                        <option value=\"rgb(92, 0, 0)\" label=\"rgb(92, 0, 0)\"></option>\n                        <option value=\"rgb(102, 61, 0)\" label=\"rgb(102, 61, 0)\"></option>\n                        <option value=\"rgb(102, 102, 0)\" label=\"rgb(102, 102, 0)\"></option>\n                        <option value=\"rgb(0, 55, 0)\" label=\"rgb(0, 55, 0)\"></option>\n                        <option value=\"rgb(0, 41, 102)\" label=\"rgb(0, 41, 102)\"></option>\n                        <option value=\"rgb(61, 20, 102)\" label=\"rgb(61, 20, 102)\"></option>\n                    </select>\n                </span>\n                <span class=\"ql-format-group\">\n                    <span title=\"List\" class=\"ql-format-button ql-list\"></span>\n                    <span class=\"ql-format-separator\"></span>\n                    <span title=\"Bullet\" class=\"ql-format-button ql-bullet\"></span>\n                    <span class=\"ql-format-separator\"></span>\n                    <select title=\"Text Alignment\" class=\"ql-align\">\n                        <option value=\"left\" label=\"Left\" selected=\"\"></option>\n                        <option value=\"center\" label=\"Center\"></option>\n                        <option value=\"right\" label=\"Right\"></option>\n                        <option value=\"justify\" label=\"Justify\"></option>\n                        </select>\n                </span>\n                <span class=\"ql-format-group\">\n                    <span title=\"Link\" class=\"ql-format-button ql-link\"></span>\n                </span>\n                <span class=\"ql-format-separator\"></span>\n                <span title=\"Image\" class=\"ql-format-button ql-image\"></span>\n            </div>\n            <div class=\"ui-editor-content\" [innerHTML]=\"value||''\"></div>\n        </div>\n    ",
+            template: "\n        <div [ngClass]=\"'ui-widget ui-editor-container ui-widget-content ui-corner-all'\" [attr.style]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-editor-toolbar ui-widget-header ui-corner-top\" *ngIf=\"toolbar\">\n                <ng-content select=\"header\"></ng-content>\n            </div>\n            <div class=\"ui-editor-toolbar ui-widget-header ui-corner-top\" *ngIf=\"!toolbar\">\n            <span class=\"ql-format-group\">\n                <select title=\"Font\" class=\"ql-font\">\n                    <option value=\"sans-serif\" selected=\"\">Sans Serif</option>\n                    <option value=\"serif\">Serif</option>\n                    <option value=\"monospace\">Monospace</option>\n                </select>\n                <select title=\"Size\" class=\"ql-size\">\n                    <option value=\"10px\">Small</option>\n                    <option value=\"13px\" selected=\"\">Normal</option>\n                    <option value=\"18px\">Large</option>\n                    <option value=\"32px\">Huge</option>\n                </select>\n                </span>\n                <span class=\"ql-format-group\">\n                    <span title=\"Bold\" class=\"ql-format-button ql-bold\"></span>\n                    <span class=\"ql-format-separator\"></span>\n                    <span title=\"Italic\" class=\"ql-format-button ql-italic\"></span>\n                    <span class=\"ql-format-separator\"></span>\n                    <span title=\"Underline\" class=\"ql-format-button ql-underline\"></span>\n                    <span class=\"ql-format-separator\"></span>\n                    <span title=\"Strikethrough\" class=\"ql-format-button ql-strike\"></span>\n                </span>\n                <span class=\"ql-format-group\">\n                    <select title=\"Text Color\" class=\"ql-color\">\n                        <option value=\"rgb(0, 0, 0)\" label=\"rgb(0, 0, 0)\" selected=\"\"></option>\n                        <option value=\"rgb(230, 0, 0)\" label=\"rgb(230, 0, 0)\"></option>\n                        <option value=\"rgb(255, 153, 0)\" label=\"rgb(255, 153, 0)\"></option>\n                        <option value=\"rgb(255, 255, 0)\" label=\"rgb(255, 255, 0)\"></option>\n                        <option value=\"rgb(0, 138, 0)\" label=\"rgb(0, 138, 0)\"></option>\n                        <option value=\"rgb(0, 102, 204)\" label=\"rgb(0, 102, 204)\"></option>\n                        <option value=\"rgb(153, 51, 255)\" label=\"rgb(153, 51, 255)\"></option>\n                        <option value=\"rgb(255, 255, 255)\" label=\"rgb(255, 255, 255)\"></option>\n                        <option value=\"rgb(250, 204, 204)\" label=\"rgb(250, 204, 204)\"></option>\n                        <option value=\"rgb(255, 235, 204)\" label=\"rgb(255, 235, 204)\"></option>\n                        <option value=\"rgb(255, 255, 204)\" label=\"rgb(255, 255, 204)\"></option>\n                        <option value=\"rgb(204, 232, 204)\" label=\"rgb(204, 232, 204)\"></option>\n                        <option value=\"rgb(204, 224, 245)\" label=\"rgb(204, 224, 245)\"></option>\n                        <option value=\"rgb(235, 214, 255)\" label=\"rgb(235, 214, 255)\"></option>\n                        <option value=\"rgb(187, 187, 187)\" label=\"rgb(187, 187, 187)\"></option>\n                        <option value=\"rgb(240, 102, 102)\" label=\"rgb(240, 102, 102)\"></option>\n                        <option value=\"rgb(255, 194, 102)\" label=\"rgb(255, 194, 102)\"></option>\n                        <option value=\"rgb(255, 255, 102)\" label=\"rgb(255, 255, 102)\"></option>\n                        <option value=\"rgb(102, 185, 102)\" label=\"rgb(102, 185, 102)\"></option>\n                        <option value=\"rgb(102, 163, 224)\" label=\"rgb(102, 163, 224)\"></option>\n                        <option value=\"rgb(194, 133, 255)\" label=\"rgb(194, 133, 255)\"></option>\n                        <option value=\"rgb(136, 136, 136)\" label=\"rgb(136, 136, 136)\"></option>\n                        <option value=\"rgb(161, 0, 0)\" label=\"rgb(161, 0, 0)\"></option>\n                        <option value=\"rgb(178, 107, 0)\" label=\"rgb(178, 107, 0)\"></option>\n                        <option value=\"rgb(178, 178, 0)\" label=\"rgb(178, 178, 0)\"></option>\n                        <option value=\"rgb(0, 97, 0)\" label=\"rgb(0, 97, 0)\"></option>\n                        <option value=\"rgb(0, 71, 178)\" label=\"rgb(0, 71, 178)\"></option>\n                        <option value=\"rgb(107, 36, 178)\" label=\"rgb(107, 36, 178)\"></option>\n                        <option value=\"rgb(68, 68, 68)\" label=\"rgb(68, 68, 68)\"></option>\n                        <option value=\"rgb(92, 0, 0)\" label=\"rgb(92, 0, 0)\"></option>\n                        <option value=\"rgb(102, 61, 0)\" label=\"rgb(102, 61, 0)\"></option>\n                        <option value=\"rgb(102, 102, 0)\" label=\"rgb(102, 102, 0)\"></option>\n                        <option value=\"rgb(0, 55, 0)\" label=\"rgb(0, 55, 0)\"></option>\n                        <option value=\"rgb(0, 41, 102)\" label=\"rgb(0, 41, 102)\"></option>\n                        <option value=\"rgb(61, 20, 102)\" label=\"rgb(61, 20, 102)\"></option>\n                    </select>\n                    <span class=\"ql-format-separator\"></span>\n                    <select title=\"Background Color\" class=\"ql-background\">\n                        <option value=\"rgb(0, 0, 0)\" label=\"rgb(0, 0, 0)\"></option>\n                        <option value=\"rgb(230, 0, 0)\" label=\"rgb(230, 0, 0)\"></option>\n                        <option value=\"rgb(255, 153, 0)\" label=\"rgb(255, 153, 0)\"></option>\n                        <option value=\"rgb(255, 255, 0)\" label=\"rgb(255, 255, 0)\"></option>\n                        <option value=\"rgb(0, 138, 0)\" label=\"rgb(0, 138, 0)\"></option>\n                        <option value=\"rgb(0, 102, 204)\" label=\"rgb(0, 102, 204)\"></option>\n                        <option value=\"rgb(153, 51, 255)\" label=\"rgb(153, 51, 255)\"></option>\n                        <option value=\"rgb(255, 255, 255)\" label=\"rgb(255, 255, 255)\" selected=\"\"></option>\n                        <option value=\"rgb(250, 204, 204)\" label=\"rgb(250, 204, 204)\"></option>\n                        <option value=\"rgb(255, 235, 204)\" label=\"rgb(255, 235, 204)\"></option>\n                        <option value=\"rgb(255, 255, 204)\" label=\"rgb(255, 255, 204)\"></option>\n                        <option value=\"rgb(204, 232, 204)\" label=\"rgb(204, 232, 204)\"></option>\n                        <option value=\"rgb(204, 224, 245)\" label=\"rgb(204, 224, 245)\"></option>\n                        <option value=\"rgb(235, 214, 255)\" label=\"rgb(235, 214, 255)\"></option>\n                        <option value=\"rgb(187, 187, 187)\" label=\"rgb(187, 187, 187)\"></option>\n                        <option value=\"rgb(240, 102, 102)\" label=\"rgb(240, 102, 102)\"></option>\n                        <option value=\"rgb(255, 194, 102)\" label=\"rgb(255, 194, 102)\"></option>\n                        <option value=\"rgb(255, 255, 102)\" label=\"rgb(255, 255, 102)\"></option>\n                        <option value=\"rgb(102, 185, 102)\" label=\"rgb(102, 185, 102)\"></option>\n                        <option value=\"rgb(102, 163, 224)\" label=\"rgb(102, 163, 224)\"></option>\n                        <option value=\"rgb(194, 133, 255)\" label=\"rgb(194, 133, 255)\"></option>\n                        <option value=\"rgb(136, 136, 136)\" label=\"rgb(136, 136, 136)\"></option>\n                        <option value=\"rgb(161, 0, 0)\" label=\"rgb(161, 0, 0)\"></option>\n                        <option value=\"rgb(178, 107, 0)\" label=\"rgb(178, 107, 0)\"></option>\n                        <option value=\"rgb(178, 178, 0)\" label=\"rgb(178, 178, 0)\"></option>\n                        <option value=\"rgb(0, 97, 0)\" label=\"rgb(0, 97, 0)\"></option>\n                        <option value=\"rgb(0, 71, 178)\" label=\"rgb(0, 71, 178)\"></option>\n                        <option value=\"rgb(107, 36, 178)\" label=\"rgb(107, 36, 178)\"></option>\n                        <option value=\"rgb(68, 68, 68)\" label=\"rgb(68, 68, 68)\"></option>\n                        <option value=\"rgb(92, 0, 0)\" label=\"rgb(92, 0, 0)\"></option>\n                        <option value=\"rgb(102, 61, 0)\" label=\"rgb(102, 61, 0)\"></option>\n                        <option value=\"rgb(102, 102, 0)\" label=\"rgb(102, 102, 0)\"></option>\n                        <option value=\"rgb(0, 55, 0)\" label=\"rgb(0, 55, 0)\"></option>\n                        <option value=\"rgb(0, 41, 102)\" label=\"rgb(0, 41, 102)\"></option>\n                        <option value=\"rgb(61, 20, 102)\" label=\"rgb(61, 20, 102)\"></option>\n                    </select>\n                </span>\n                <span class=\"ql-format-group\">\n                    <span title=\"List\" class=\"ql-format-button ql-list\"></span>\n                    <span class=\"ql-format-separator\"></span>\n                    <span title=\"Bullet\" class=\"ql-format-button ql-bullet\"></span>\n                    <span class=\"ql-format-separator\"></span>\n                    <select title=\"Text Alignment\" class=\"ql-align\">\n                        <option value=\"left\" label=\"Left\" selected=\"\"></option>\n                        <option value=\"center\" label=\"Center\"></option>\n                        <option value=\"right\" label=\"Right\"></option>\n                        <option value=\"justify\" label=\"Justify\"></option>\n                        </select>\n                </span>\n                <span class=\"ql-format-group\">\n                    <span title=\"Link\" class=\"ql-format-button ql-link\"></span>\n                </span>\n                <span class=\"ql-format-separator\"></span>\n                <span title=\"Image\" class=\"ql-format-button ql-image\"></span>\n            </div>\n            <div class=\"ui-editor-content\" [innerHTML]=\"value||''\"></div>\n        </div>\n    ",
             directives: [header_1.Header],
@@ -117,4 +118,4 @@ providers: [domhandler_1.DomHandler, EDITOR_VALUE_ACCESSOR]
     return Editor;
-})();
+}());
 exports.Editor = Editor;
 //# sourceMappingURL=editor.js.map

components/fieldset/fieldset.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -74,3 +75,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-fieldset',
-            template: "\n        <fieldset [ngClass]=\"{'ui-fieldset ui-widget ui-widget-content ui-corner-all': true, 'ui-fieldset-toggleable': toggleable}\" [attr.style]=\"style\" [attr.class]=\"styleClass\">\n            <legend class=\"ui-fieldset-legend ui-corner-all ui-state-default ui-unselectable-text\" \n                (mouseenter)=\"onLegendMouseenter($event)\" (mouseleave)=\"onLegendMouseleave($event)\" (click)=\"toggle($event)\" [ngClass]=\"{'ui-state-hover':hover}\">\n                <span *ngIf=\"toggleable\" class=\"ui-fieldset-toggler fa fa-w\" [ngClass]=\"{'fa-minus': !collapsed,'fa-plus':collapsed}\"></span>\n                {{legend}}\n            </legend>\n            <div class=\"ui-fieldset-content\" [style.display]=\"collapsed ? 'none' : 'block'\">\n                <ng-content></ng-content>\n            </div>\n        </fieldset>\n    ",
+            template: "\n        <fieldset [ngClass]=\"{'ui-fieldset ui-widget ui-widget-content ui-corner-all': true, 'ui-fieldset-toggleable': toggleable}\" [attr.style]=\"style\" [class]=\"styleClass\">\n            <legend class=\"ui-fieldset-legend ui-corner-all ui-state-default ui-unselectable-text\" \n                (mouseenter)=\"onLegendMouseenter($event)\" (mouseleave)=\"onLegendMouseleave($event)\" (click)=\"toggle($event)\" [ngClass]=\"{'ui-state-hover':hover}\">\n                <span *ngIf=\"toggleable\" class=\"ui-fieldset-toggler fa fa-w\" [ngClass]=\"{'fa-minus': !collapsed,'fa-plus':collapsed}\"></span>\n                {{legend}}\n            </legend>\n            <div class=\"ui-fieldset-content\" [style.display]=\"collapsed ? 'none' : 'block'\">\n                <ng-content></ng-content>\n            </div>\n        </fieldset>\n    ",
         }), 
@@ -80,4 +81,4 @@ __metadata('design:paramtypes', [])
     return Fieldset;
-})();
+}());
 exports.Fieldset = Fieldset;
 //# sourceMappingURL=fieldset.js.map

components/galleria/galleria.d.ts

@@ -1,7 +0,13 @@
-import { ElementRef, AfterViewInit, OnDestroy, OnChanges, SimpleChange } from 'angular2/core';
-export declare class Galleria implements AfterViewInit, OnDestroy, OnChanges {
+import { ElementRef, AfterViewChecked, AfterViewInit, OnDestroy, IterableDiffers } from 'angular2/core';
+import { DomHandler } from '../dom/domhandler';
+export declare class Galleria implements AfterViewChecked, AfterViewInit, OnDestroy {
     private el;
+    private domHandler;
+    images: any[];
+    style: string;
+    styleClass: string;
     panelWidth: number;
     panelHeight: number;
     frameWidth: number;
+    frameHeight: number;
     activeIndex: number;
@@ -11,13 +17,30 @@ showFilmstrip: boolean;
     transitionInterval: number;
-    effect: string;
-    effectDuration: any;
     showCaption: boolean;
-    customContent: boolean;
-    initialized: boolean;
-    constructor(el: ElementRef);
+    differ: any;
+    slideshowActive: boolean;
+    private container;
+    private panelWrapper;
+    private panels;
+    private caption;
+    private stripWrapper;
+    private strip;
+    private frames;
+    private interval;
+    private stripLeft;
+    private imagesChanged;
+    private initialized;
+    constructor(el: ElementRef, domHandler: DomHandler, differs: IterableDiffers);
+    ngAfterViewChecked(): void;
+    ngDoCheck(): void;
     ngAfterViewInit(): void;
-    ngOnChanges(changes: {
-        [key: string]: SimpleChange;
-    }): void;
+    render(): void;
+    startSlideshow(): void;
+    stopSlideshow(): void;
+    clickNavRight(): void;
+    clickNavLeft(): void;
+    frameClick(frame: any): void;
+    prev(): void;
+    next(): void;
+    select(index: any, reposition: any): void;
     ngOnDestroy(): void;
 }

components/galleria/galleria.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -11,39 +12,141 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 var core_1 = require('angular2/core');
+var domhandler_1 = require('../dom/domhandler');
 var Galleria = (function () {
-    function Galleria(el) {
+    function Galleria(el, domHandler, differs) {
         this.el = el;
+        this.domHandler = domHandler;
+        this.panelWidth = 600;
+        this.panelHeight = 400;
+        this.frameWidth = 60;
+        this.frameHeight = 40;
+        this.activeIndex = 0;
         this.showFilmstrip = true;
         this.autoPlay = true;
+        this.transitionInterval = 4000;
         this.showCaption = true;
-        this.initialized = false;
+        this.stripLeft = 0;
+        this.differ = differs.find([]).create(null);
     }
+    Galleria.prototype.ngAfterViewChecked = function () {
+        if (this.imagesChanged) {
+            this.stopSlideshow();
+            this.render();
+            this.imagesChanged = false;
+        }
+    };
+    Galleria.prototype.ngDoCheck = function () {
+        var changes = this.differ.diff(this.images);
+        if (changes && this.initialized) {
+            this.activeIndex = 0;
+            this.imagesChanged = true;
+        }
+    };
     Galleria.prototype.ngAfterViewInit = function () {
-        jQuery(this.el.nativeElement.children[0]).puigalleria({
-            panelWidth: this.panelWidth,
-            panelHeight: this.panelHeight,
-            frameWidth: this.frameWidth,
-            activeIndex: this.activeIndex,
-            showFilmstrip: this.showFilmstrip,
-            autoPlay: this.autoPlay,
-            transitionInterval: this.transitionInterval,
-            effect: this.effect,
-            effectSpeed: this.effectDuration,
-            showCaption: this.showCaption,
-            customContent: this.customContent
-        });
+        this.container = this.el.nativeElement.children[0];
+        this.panelWrapper = this.domHandler.findSingle(this.el.nativeElement, 'ul.ui-galleria-panel-wrapper');
         this.initialized = true;
+        if (this.showFilmstrip) {
+            this.stripWrapper = this.domHandler.findSingle(this.container, 'div.ui-galleria-filmstrip-wrapper');
+            this.strip = this.domHandler.findSingle(this.stripWrapper, 'ul.ui-galleria-filmstrip');
+        }
+        if (this.images && this.images.length) {
+            this.render();
+        }
     };
-    Galleria.prototype.ngOnChanges = function (changes) {
-        if (this.initialized) {
-            for (var key in changes) {
-                jQuery(this.el.nativeElement.children[0]).puigalleria('option', key, changes[key].currentValue);
+    Galleria.prototype.render = function () {
+        this.panels = this.domHandler.find(this.panelWrapper, 'li.ui-galleria-panel');
+        this.frames = this.domHandler.find(this.strip, 'li.ui-galleria-frame');
+        if (this.showFilmstrip) {
+            this.stripWrapper.style.width = this.domHandler.width(this.panelWrapper) - 50 + 'px';
+            this.stripWrapper.style.height = this.frameHeight + 'px';
+        }
+        if (this.showCaption) {
+            this.caption = this.domHandler.findSingle(this.container, 'div.ui-galleria-caption');
+            this.caption.style.bottom = this.showFilmstrip ? this.domHandler.getOuterHeight(this.stripWrapper, true) + 'px' : 0 + 'px';
+            this.caption.style.width = this.domHandler.width(this.panelWrapper) + 'px';
+        }
+        if (this.autoPlay) {
+            this.startSlideshow();
+        }
+        this.container.style.visibility = 'visible';
+    };
+    Galleria.prototype.startSlideshow = function () {
+        var _this = this;
+        this.interval = setInterval(function () {
+            _this.next();
+        }, this.transitionInterval);
+        this.slideshowActive = true;
+    };
+    Galleria.prototype.stopSlideshow = function () {
+        if (this.interval) {
+            clearInterval(this.interval);
+        }
+        this.slideshowActive = false;
+    };
+    Galleria.prototype.clickNavRight = function () {
+        if (this.slideshowActive) {
+            this.stopSlideshow();
+        }
+        this.next();
+    };
+    Galleria.prototype.clickNavLeft = function () {
+        if (this.slideshowActive) {
+            this.stopSlideshow();
+        }
+        this.prev();
+    };
+    Galleria.prototype.frameClick = function (frame) {
+        if (this.slideshowActive) {
+            this.stopSlideshow();
+        }
+        this.select(this.domHandler.index(frame), false);
+    };
+    Galleria.prototype.prev = function () {
+        if (this.activeIndex !== 0) {
+            this.select(this.activeIndex - 1, true);
+        }
+    };
+    Galleria.prototype.next = function () {
+        if (this.activeIndex !== (this.panels.length - 1)) {
+            this.select(this.activeIndex + 1, true);
+        }
+        else {
+            this.select(0, false);
+            this.stripLeft = 0;
+        }
+    };
+    Galleria.prototype.select = function (index, reposition) {
+        if (index !== this.activeIndex) {
+            var oldPanel = this.panels[this.activeIndex], newPanel = this.panels[index];
+            this.domHandler.fadeIn(newPanel, 500);
+            if (this.showFilmstrip) {
+                var oldFrame = this.frames[this.activeIndex], newFrame = this.frames[index];
+                if (reposition === undefined || reposition === true) {
+                    var frameLeft = newFrame.offsetLeft, stepFactor = this.frameWidth + parseInt(getComputedStyle(newFrame)['margin-right'], 10), stripLeft = this.strip.offsetLeft, frameViewportLeft = frameLeft + stripLeft, frameViewportRight = frameViewportLeft + this.frameWidth;
+                    if (frameViewportRight > this.domHandler.width(this.stripWrapper))
+                        this.stripLeft -= stepFactor;
+                    else if (frameViewportLeft < 0)
+                        this.stripLeft += stepFactor;
+                }
             }
+            this.activeIndex = index;
         }
     };
     Galleria.prototype.ngOnDestroy = function () {
-        jQuery(this.el.nativeElement.children[0]).puigalleria('destroy');
-        this.initialized = false;
+        this.stopSlideshow();
     };
     __decorate([
         core_1.Input(), 
+        __metadata('design:type', Array)
+    ], Galleria.prototype, "images", void 0);
+    __decorate([
+        core_1.Input(), 
+        __metadata('design:type', String)
+    ], Galleria.prototype, "style", void 0);
+    __decorate([
+        core_1.Input(), 
+        __metadata('design:type', String)
+    ], Galleria.prototype, "styleClass", void 0);
+    __decorate([
+        core_1.Input(), 
         __metadata('design:type', Number)
@@ -62,2 +165,6 @@ ], Galleria.prototype, "panelWidth", void 0);
         __metadata('design:type', Number)
+    ], Galleria.prototype, "frameHeight", void 0);
+    __decorate([
+        core_1.Input(), 
+        __metadata('design:type', Number)
     ], Galleria.prototype, "activeIndex", void 0);
@@ -78,26 +185,15 @@ __decorate([
         core_1.Input(), 
-        __metadata('design:type', String)
-    ], Galleria.prototype, "effect", void 0);
-    __decorate([
-        core_1.Input(), 
-        __metadata('design:type', Object)
-    ], Galleria.prototype, "effectDuration", void 0);
-    __decorate([
-        core_1.Input(), 
         __metadata('design:type', Boolean)
     ], Galleria.prototype, "showCaption", void 0);
-    __decorate([
-        core_1.Input(), 
-        __metadata('design:type', Boolean)
-    ], Galleria.prototype, "customContent", void 0);
     Galleria = __decorate([
         core_1.Component({
             selector: 'p-galleria',
-            template: "\n        <div>\n            <ng-content></ng-content>\n        </div>\n    "
+            template: "\n        <div [ngClass]=\"{'ui-galleria ui-widget ui-widget-content ui-corner-all':true}\" [attr.style]=\"style\" [class]=\"styleClass\" [style.width.px]=\"panelWidth\">\n            <ul class=\"ui-galleria-panel-wrapper\" [style.width.px]=\"panelWidth\" [style.height.px]=\"panelHeight\">\n                <li *ngFor=\"let image of images;let i=index\" class=\"ui-galleria-panel\" [ngClass]=\"{'ui-helper-hidden':i!=activeIndex}\"\n                    [style.width.px]=\"panelWidth\" [style.height.px]=\"panelHeight\">\n                    <img class=\"ui-panel-images\" [src]=\"image.source\" [alt]=\"image.alt\" [title]=\"image.title\"/>\n                </li>\n            </ul>\n            <div [ngClass]=\"{'ui-galleria-filmstrip-wrapper':true}\">\n                <ul class=\"ui-galleria-filmstrip\" style=\"transition:left 1s\" [style.left.px]=\"stripLeft\">\n                    <li #frame *ngFor=\"let image of images;let i=index\" [ngClass]=\"{'ui-galleria-frame-active':i==activeIndex}\" class=\"ui-galleria-frame\" (click)=\"frameClick(frame)\"\n                        [style.width.px]=\"frameWidth\" [style.height.px]=\"frameHeight\" [style.transition]=\"'opacity 0.75s ease'\">\n                        <div class=\"ui-galleria-frame-content\">\n                            <img [src]=\"image.source\" [alt]=\"image.alt\" [title]=\"image.title\" class=\"ui-galleria-frame-image\"\n                                [style.width.px]=\"frameWidth\" [style.height.px]=\"frameHeight\">\n                        </div>\n                    </li>\n                </ul>\n            </div>\n            <div class=\"ui-galleria-nav-prev fa fa-fw fa-chevron-circle-left\" (click)=\"clickNavLeft()\" [style.bottom.px]=\"frameHeight/2\"></div>\n            <div class=\"ui-galleria-nav-next fa fa-fw fa-chevron-circle-right\" (click)=\"clickNavRight()\" [style.bottom.px]=\"frameHeight/2\"></div>\n            <div class=\"ui-galleria-caption\" *ngIf=\"showCaption&&images\" style=\"display:block\">\n                <h4>{{images[activeIndex].title}}</h4><p>{{images[activeIndex].alt}}</p>\n            </div>\n        </div>\n    ",
+            providers: [domhandler_1.DomHandler]
         }), 
-        __metadata('design:paramtypes', [core_1.ElementRef])
+        __metadata('design:paramtypes', [core_1.ElementRef, domhandler_1.DomHandler, core_1.IterableDiffers])
     ], Galleria);
     return Galleria;
-})();
+}());
 exports.Galleria = Galleria;
 //# sourceMappingURL=galleria.js.map

components/gmap/gmap.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -148,3 +149,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-gmap',
-            template: "<div [attr.style]=\"style\" [attr.class]=\"styleClass\"></div>"
+            template: "<div [attr.style]=\"style\" [class]=\"styleClass\"></div>"
         }), 
@@ -154,4 +155,4 @@ __metadata('design:paramtypes', [core_1.ElementRef, core_1.IterableDiffers, core_1.ChangeDetectorRef, core_1.NgZone])
     return GMap;
-})();
+}());
 exports.GMap = GMap;
 //# sourceMappingURL=gmap.js.map

components/growl/growl.d.ts

@@ -1,15 +0,22 @@
-import { ElementRef, SimpleChange } from 'angular2/core';
+import { ElementRef, AfterViewInit, DoCheck, OnDestroy, IterableDiffers } from 'angular2/core';
 import { Message } from '../api/message';
-export declare class Growl {
+import { DomHandler } from '../dom/domhandler';
+export declare class Growl implements AfterViewInit, DoCheck, OnDestroy {
     private el;
+    private domHandler;
     sticky: boolean;
     life: number;
     value: Message[];
-    initialized: boolean;
-    constructor(el: ElementRef);
-    ngOnInit(): void;
-    ngOnChanges(changes: {
-        [key: string]: SimpleChange;
-    }): void;
+    differ: any;
+    zIndex: number;
+    container: any;
+    stopDoCheckPropagation: boolean;
+    timeout: any;
+    constructor(el: ElementRef, domHandler: DomHandler, differs: IterableDiffers);
+    ngAfterViewInit(): void;
+    ngDoCheck(): void;
+    remove(msg: Message, msgel: any): void;
+    removeAll(): void;
+    findMessageIndex(msg: Message): number;
     ngOnDestroy(): void;
 }

components/growl/growl.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -11,26 +12,70 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 var core_1 = require('angular2/core');
+var domhandler_1 = require('../dom/domhandler');
 var Growl = (function () {
-    function Growl(el) {
+    function Growl(el, domHandler, differs) {
         this.el = el;
-        this.initialized = false;
+        this.domHandler = domHandler;
+        this.sticky = false;
+        this.life = 3000;
+        this.differ = differs.find([]).create(null);
+        this.zIndex = domhandler_1.DomHandler.zindex;
     }
-    Growl.prototype.ngOnInit = function () {
-        jQuery(this.el.nativeElement.children[0]).puigrowl({
-            sticky: this.sticky,
-            life: this.life,
-            appendTo: null,
-            messages: this.value
-        });
-        this.initialized = true;
+    Growl.prototype.ngAfterViewInit = function () {
+        this.container = this.el.nativeElement.children[0];
     };
-    Growl.prototype.ngOnChanges = function (changes) {
-        if (this.initialized) {
-            for (var key in changes) {
-                jQuery(this.el.nativeElement.children[0]).puigrowl('option', key, changes[key].currentValue);
+    Growl.prototype.ngDoCheck = function () {
+        var _this = this;
+        var changes = this.differ.diff(this.value);
+        if (changes) {
+            if (this.stopDoCheckPropagation) {
+                this.stopDoCheckPropagation = false;
             }
+            else if (this.value && this.value.length) {
+                this.zIndex = ++domhandler_1.DomHandler.zindex;
+                this.domHandler.fadeIn(this.container, 250);
+                if (!this.sticky) {
+                    if (this.timeout) {
+                        clearTimeout(this.timeout);
+                    }
+                    this.timeout = setTimeout(function () {
+                        _this.removeAll();
+                    }, this.life);
+                }
+            }
         }
     };
+    Growl.prototype.remove = function (msg, msgel) {
+        var _this = this;
+        this.stopDoCheckPropagation = true;
+        this.domHandler.fadeOut(msgel, 250);
+        setTimeout(function () {
+            _this.value.splice(_this.findMessageIndex(msg), 1);
+        }, 250);
+    };
+    Growl.prototype.removeAll = function () {
+        var _this = this;
+        if (this.value && this.value.length) {
+            this.stopDoCheckPropagation = true;
+            this.domHandler.fadeOut(this.container, 250);
+            setTimeout(function () {
+                _this.value.splice(0, _this.value.length);
+            }, 250);
+        }
+    };
+    Growl.prototype.findMessageIndex = function (msg) {
+        var index = -1;
+        if (this.value && this.value.length) {
+            for (var i = 0; i < this.value.length; i++) {
+                if (this.value[i] == msg) {
+                    index = i;
+                    break;
+                }
+            }
+        }
+        return index;
+    };
     Growl.prototype.ngOnDestroy = function () {
-        jQuery(this.el.nativeElement.children[0]).puigrowl('destroy');
-        this.initialized = false;
+        if (!this.sticky) {
+            clearTimeout(this.timeout);
+        }
     };
@@ -52,9 +97,10 @@ __decorate([
             selector: 'p-growl',
-            template: "<div></div>"
+            template: "\n        <div class=\"ui-growl ui-widget\" [style.zIndex]=\"zIndex\">\n            <div #msgel *ngFor=\"let msg of value\" class=\"ui-growl-item-container ui-state-highlight ui-corner-all ui-shadow\" aria-live=\"polite\"\n                [ngClass]=\"{'ui-growl-message-info ':msg.severity == 'info','ui-growl-message-warn':msg.severity == 'warn','ui-growl-message-error':msg.severity == 'error'}\">\n                <div class=\"ui-growl-item\">\n                     <div class=\"ui-growl-icon-close fa fa-close\" (click)=\"remove(msg,msgel)\"></div>\n                     <span class=\"ui-growl-image fa fa-2x ui-growl-image-info\"\n                        [ngClass]=\"{'fa-info-circle':msg.severity == 'info','fa-warning':msg.severity == 'warn','fa-close':msg.severity == 'error'}\"></span>\n                     <div class=\"ui-growl-message\">\n                        <span class=\"ui-growl-title\">{{msg.summary}}</span>\n                        <p>{{msg.detail}}</p>\n                     </div>\n                     <div style=\"clear: both;\"></div>\n                </div>\n            </div>\n        </div>\n    ",
+            providers: [domhandler_1.DomHandler]
         }), 
-        __metadata('design:paramtypes', [core_1.ElementRef])
+        __metadata('design:paramtypes', [core_1.ElementRef, domhandler_1.DomHandler, core_1.IterableDiffers])
     ], Growl);
     return Growl;
-})();
+}());
 exports.Growl = Growl;
 //# sourceMappingURL=growl.js.map

components/inputswitch/inputswitch.d.ts

@@ -1,6 +0,10 @@
-import { ElementRef, AfterViewInit, OnDestroy, OnChanges, SimpleChange, EventEmitter } from 'angular2/core';
-export declare class InputSwitch implements AfterViewInit, OnDestroy, OnChanges {
+import { ElementRef, AfterViewInit, EventEmitter } from 'angular2/core';
+import { ControlValueAccessor } from 'angular2/common';
+import { DomHandler } from '../dom/domhandler';
+export declare class InputSwitch implements ControlValueAccessor, AfterViewInit {
     private el;
+    private domHandler;
     onLabel: string;
     offLabel: string;
+    disabled: boolean;
     style: string;
@@ -10,15 +14,24 @@ styleClass: string;
     value: boolean;
+    checked: boolean;
+    focused: boolean;
     onModelChange: Function;
     onModelTouched: Function;
+    private container;
+    private handle;
+    private onContainer;
+    private offContainer;
+    private onLabelChild;
+    private offLabelChild;
+    private offset;
     initialized: boolean;
-    inputSwitchElement: any;
-    constructor(el: ElementRef);
+    constructor(el: ElementRef, domHandler: DomHandler);
     ngAfterViewInit(): void;
+    toggle(event: any, checkbox: any): void;
+    checkUI(): void;
+    uncheckUI(): void;
+    onFocus(event: any): void;
+    onBlur(event: any): void;
     writeValue(value: any): void;
     registerOnChange(fn: Function): void;
     registerOnTouched(fn: Function): void;
-    ngOnChanges(changes: {
-        [key: string]: SimpleChange;
-    }): void;
-    ngOnDestroy(): void;
 }

components/inputswitch/inputswitch.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -12,2 +13,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 var common_1 = require('angular2/common');
+var domhandler_1 = require('../dom/domhandler');
 var lang_1 = require('angular2/src/facade/lang');
@@ -19,7 +21,10 @@ var INPUTSWITCH_VALUE_ACCESSOR = lang_1.CONST_EXPR(new core_1.Provider(common_1.NG_VALUE_ACCESSOR, {
 var InputSwitch = (function () {
-    function InputSwitch(el) {
+    function InputSwitch(el, domHandler) {
         this.el = el;
+        this.domHandler = domHandler;
         this.onLabel = 'On';
         this.offLabel = 'Off';
         this.onChange = new core_1.EventEmitter();
+        this.checked = false;
+        this.focused = false;
         this.onModelChange = function () { };
@@ -30,21 +35,76 @@ this.onModelTouched = function () { };
     InputSwitch.prototype.ngAfterViewInit = function () {
-        var _this = this;
-        this.inputSwitchElement = jQuery(this.el.nativeElement.children[0]).find('> .ui-helper-hidden-accessible > input');
-        this.inputSwitchElement.puiswitch({
-            checked: this.value,
-            enhanced: true,
-            change: function (event, ui) {
-                _this.value = ui.checked;
-                _this.onModelChange(_this.value);
-                if (_this.onChange) {
-                    _this.onChange.emit({ originalEvent: event, checked: _this.value });
-                }
-            }
-        });
+        this.container = this.el.nativeElement.children[0];
+        this.handle = this.domHandler.findSingle(this.el.nativeElement, 'div.ui-inputswitch-handle');
+        this.onContainer = this.domHandler.findSingle(this.container, 'div.ui-inputswitch-on');
+        this.offContainer = this.domHandler.findSingle(this.container, 'div.ui-inputswitch-off');
+        this.onLabelChild = this.domHandler.findSingle(this.onContainer, 'span.ui-inputswitch-onlabel');
+        this.offLabelChild = this.domHandler.findSingle(this.offContainer, 'span.ui-inputswitch-offlabel');
+        var onContainerWidth = this.domHandler.width(this.onContainer), offContainerWidth = this.domHandler.width(this.offContainer), spanPadding = this.domHandler.innerWidth(this.offLabelChild) - this.domHandler.width(this.offLabelChild), handleMargins = this.domHandler.getOuterWidth(this.handle) - this.domHandler.innerWidth(this.handle);
+        var containerWidth = (onContainerWidth > offContainerWidth) ? onContainerWidth : offContainerWidth, handleWidth = containerWidth;
+        this.handle.style.width = handleWidth + 'px';
+        handleWidth = this.domHandler.width(this.handle);
+        containerWidth = containerWidth + handleWidth + 6;
+        var labelWidth = containerWidth - handleWidth - spanPadding - handleMargins;
+        this.container.style.width = containerWidth + 'px';
+        this.onLabelChild.style.width = labelWidth + 'px';
+        this.offLabelChild.style.width = labelWidth + 'px';
+        //position
+        this.offContainer.style.width = (this.domHandler.width(this.container) - 5) + 'px';
+        this.offset = this.domHandler.width(this.container) - this.domHandler.getOuterWidth(this.handle);
+        //default value
+        if (this.checked) {
+            this.handle.style.left = this.offset + 'px';
+            this.onContainer.style.width = this.offset + 'px';
+            this.offLabelChild.style.marginRight = -this.offset + 'px';
+        }
+        else {
+            this.onContainer.style.width = 0 + 'px';
+            this.onLabelChild.style.marginLeft = -this.offset + 'px';
+        }
         this.initialized = true;
     };
+    InputSwitch.prototype.toggle = function (event, checkbox) {
+        if (!this.disabled) {
+            if (this.checked) {
+                this.checked = false;
+                this.uncheckUI();
+            }
+            else {
+                this.checked = true;
+                this.checkUI();
+            }
+            this.onModelChange(this.checked);
+            this.onChange.emit({
+                originalEvent: event,
+                checked: this.checked
+            });
+            checkbox.focus();
+        }
+    };
+    InputSwitch.prototype.checkUI = function () {
+        this.onContainer.style.width = this.offset + 'px';
+        this.onLabelChild.style.marginLeft = 0 + 'px';
+        this.offLabelChild.style.marginRight = -this.offset + 'px';
+        this.handle.style.left = this.offset + 'px';
+    };
+    InputSwitch.prototype.uncheckUI = function () {
+        this.onContainer.style.width = 0 + 'px';
+        this.onLabelChild.style.marginLeft = -this.offset + 'px';
+        this.offLabelChild.style.marginRight = 0 + 'px';
+        this.handle.style.left = 0 + 'px';
+    };
+    InputSwitch.prototype.onFocus = function (event) {
+        this.focused = true;
+    };
+    InputSwitch.prototype.onBlur = function (event) {
+        this.focused = false;
+        this.onModelTouched();
+    };
     InputSwitch.prototype.writeValue = function (value) {
         this.value = value;
         if (this.initialized) {
-            this.inputSwitchElement.puiswitch('option', 'checked', this.value);
+            if (this.value === true)
+                this.checkUI();
+            else
+                this.uncheckUI();
         }
@@ -58,14 +118,2 @@ };
     };
-    InputSwitch.prototype.ngOnChanges = function (changes) {
-        if (this.initialized) {
-            for (var key in changes) {
-                this.inputSwitchElement.puiswitch('option', key, changes[key].currentValue);
-            }
-        }
-    };
-    InputSwitch.prototype.ngOnDestroy = function () {
-        this.inputSwitchElement.puiswitch('destroy');
-        this.initialized = false;
-        this.inputSwitchElement = null;
-    };
     __decorate([
@@ -81,2 +129,6 @@ core_1.Input(),
         core_1.Input(), 
+        __metadata('design:type', Boolean)
+    ], InputSwitch.prototype, "disabled", void 0);
+    __decorate([
+        core_1.Input(), 
         __metadata('design:type', String)
@@ -95,10 +147,10 @@ ], InputSwitch.prototype, "style", void 0);
             selector: 'p-inputSwitch',
-            template: "\n        <div [ngClass]=\"'ui-inputswitch ui-widget ui-widget-content ui-corner-all'\" [attr.style]=\"style\" [attr.class]=\"styleClass\">\n            <div class=\"ui-inputswitch-off\">\n                <span>{{offLabel}}</span>\n            </div>\n            <div class=\"ui-inputswitch-on\">\n                <span>{{onLabel}}</span>\n            </div>\n            <div class=\"ui-inputswitch-handle ui-state-default\"></div>\n            <div class=\"ui-helper-hidden-accessible\">\n                <input type=\"checkbox\" (blur)=\"onModelTouched()\"/>\n            </div>\n        </div>\n    ",
-            providers: [INPUTSWITCH_VALUE_ACCESSOR]
+            template: "\n        <div [ngClass]=\"{'ui-inputswitch ui-widget ui-widget-content ui-corner-all': true,\n            'ui-state-disabled': disabled}\" (click)=\"toggle($event, in)\"\n            [attr.style]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-inputswitch-off\">\n                <span class=\"ui-inputswitch-offlabel\">{{offLabel}}</span>\n            </div>\n            <div class=\"ui-inputswitch-on\">\n                <span class=\"ui-inputswitch-onlabel\">{{onLabel}}</span>\n            </div>\n            <div [ngClass]=\"{'ui-inputswitch-handle ui-state-default':true, 'ui-state-focus':focused}\"></div>\n            <div class=\"ui-helper-hidden-accessible\">\n                <input #in type=\"checkbox\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\" readonly=\"readonly\"/>\n            </div>\n        </div>\n    ",
+            providers: [INPUTSWITCH_VALUE_ACCESSOR, domhandler_1.DomHandler]
         }), 
-        __metadata('design:paramtypes', [core_1.ElementRef])
+        __metadata('design:paramtypes', [core_1.ElementRef, domhandler_1.DomHandler])
     ], InputSwitch);
     return InputSwitch;
-})();
+}());
 exports.InputSwitch = InputSwitch;
 //# sourceMappingURL=inputswitch.js.map

components/inputtext/inputtext.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -70,4 +71,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return InputText;
-})();
+}());
 exports.InputText = InputText;
 //# sourceMappingURL=inputtext.js.map

components/inputtextarea/inputtextarea.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -112,4 +113,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return InputTextarea;
-})();
+}());
 exports.InputTextarea = InputTextarea;
 //# sourceMappingURL=inputtextarea.js.map

components/lightbox/lightbox.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -39,4 +40,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return Lightbox;
-})();
+}());
 exports.Lightbox = Lightbox;
 //# sourceMappingURL=lightbox.js.map

components/listbox/listbox.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -207,3 +208,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-listbox',
-            template: "\n        <div [ngClass]=\"{'ui-listbox ui-inputtext ui-widget ui-widget-content ui-corner-all':true,'ui-state-disabled':disabled}\" [attr.style]=\"style\" [attr.class]=\"styleClass\">\n            <ul class=\"ui-listbox-list\" *ngIf=\"!itemTemplate\" (mouseover)=\"onMouseover($event)\" (mouseout)=\"onMouseout($event)\" (click)=\"onClick($event)\">\n                <li *ngFor=\"#option of options\" class=\"ui-listbox-item ui-corner-all\">\n                    {{option.label}}\n                </li>\n            </ul>\n            <ul class=\"ui-listbox-list\" *ngIf=\"itemTemplate\" (mouseover)=\"onMouseover($event)\" (mouseout)=\"onMouseout($event)\" (click)=\"onClick($event)\">\n                <template ngFor [ngForOf]=\"options\" [ngForTemplate]=\"itemTemplate\"></template>\n            </ul>\n        </div>\n    ",
+            template: "\n        <div [ngClass]=\"{'ui-listbox ui-inputtext ui-widget ui-widget-content ui-corner-all':true,'ui-state-disabled':disabled}\" [attr.style]=\"style\" [class]=\"styleClass\">\n            <ul class=\"ui-listbox-list\" *ngIf=\"!itemTemplate\" (mouseover)=\"onMouseover($event)\" (mouseout)=\"onMouseout($event)\" (click)=\"onClick($event)\">\n                <li *ngFor=\"let option of options\" class=\"ui-listbox-item ui-corner-all\">\n                    {{option.label}}\n                </li>\n            </ul>\n            <ul class=\"ui-listbox-list\" *ngIf=\"itemTemplate\" (mouseover)=\"onMouseover($event)\" (mouseout)=\"onMouseout($event)\" (click)=\"onClick($event)\">\n                <template ngFor [ngForOf]=\"options\" [ngForTemplate]=\"itemTemplate\"></template>\n            </ul>\n        </div>\n    ",
             providers: [domhandler_1.DomHandler, LISTBOX_VALUE_ACCESSOR]
@@ -214,4 +215,4 @@ }),
     return Listbox;
-})();
+}());
 exports.Listbox = Listbox;
 //# sourceMappingURL=listbox.js.map

components/megamenu/megamenu.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -56,3 +57,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-megaMenu',
-            template: "\n        <div [attr.class]=\"styleClass\" [attr.style]=\"style\"\n            [ngClass]=\"{'ui-menu ui-menubar ui-megamenu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix':true,'ui-megamenu-vertical': orientation == 'vertical'}\">\n            <div tabindex=\"0\" class=\"ui-helper-hidden-accessible\"></div>\n            <ng-content></ng-content>\n        </div>\n    "
+            template: "\n        <div [class]=\"styleClass\" [attr.style]=\"style\"\n            [ngClass]=\"{'ui-menu ui-menubar ui-megamenu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix':true,'ui-megamenu-vertical': orientation == 'vertical'}\">\n            <div tabindex=\"0\" class=\"ui-helper-hidden-accessible\"></div>\n            <ng-content></ng-content>\n        </div>\n    "
         }), 
@@ -62,4 +63,4 @@ __metadata('design:paramtypes', [core_1.ElementRef])
     return MegaMenu;
-})();
+}());
 exports.MegaMenu = MegaMenu;
 //# sourceMappingURL=megamenu.js.map

components/menu/menu.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -71,3 +72,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-menu',
-            template: "\n        <div [attr.class]=\"styleClass\" [attr.style]=\"style\" [ngClass]=\"{'ui-menu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix':true}\">\n            <ng-content></ng-content>\n        </div>\n    "
+            template: "\n        <div [class]=\"styleClass\" [attr.style]=\"style\" [ngClass]=\"{'ui-menu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix':true}\">\n            <ng-content></ng-content>\n        </div>\n    "
         }), 
@@ -77,4 +78,4 @@ __metadata('design:paramtypes', [core_1.ElementRef])
     return Menu;
-})();
+}());
 exports.Menu = Menu;
 //# sourceMappingURL=menu.js.map

components/menubar/menubar.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -51,3 +52,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-menubar',
-            template: "\n        <div [attr.class]=\"styleClass\" [attr.style]=\"style\" [ngClass]=\"{'ui-menubar ui-menu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix':true}\">\n            <ng-content></ng-content>\n        </div>\n    "
+            template: "\n        <div [class]=\"styleClass\" [attr.style]=\"style\" [ngClass]=\"{'ui-menubar ui-menu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix':true}\">\n            <ng-content></ng-content>\n        </div>\n    "
         }), 
@@ -57,4 +58,4 @@ __metadata('design:paramtypes', [core_1.ElementRef])
     return Menubar;
-})();
+}());
 exports.Menubar = Menubar;
 //# sourceMappingURL=menubar.js.map

components/messages/messages.d.ts

@@ -1,6 +0,4 @@
-import { EventEmitter } from 'angular2/core';
 import { Message } from '../api/message';
 export declare class Messages {
     value: Message[];
-    valueChange: EventEmitter<any>;
     closable: boolean;
@@ -7,0 +5,0 @@ hasMessages(): boolean;

components/messages/messages.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -13,3 +14,2 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     function Messages() {
-        this.valueChange = new core_1.EventEmitter();
         this.closable = true;
@@ -24,3 +24,3 @@ }
     Messages.prototype.clear = function (event) {
-        this.valueChange.emit([]);
+        this.value.splice(0, this.value.length);
         event.preventDefault();
@@ -33,6 +33,2 @@ };
     __decorate([
-        core_1.Output(), 
-        __metadata('design:type', core_1.EventEmitter)
-    ], Messages.prototype, "valueChange", void 0);
-    __decorate([
         core_1.Input(), 
@@ -44,3 +40,3 @@ __metadata('design:type', Boolean)
             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'),'ui-messages-warn':(value[0].severity === 'warn'),'ui-messages-error':(value[0].severity === 'error')}\">\n            <a href=\"#\" class=\"ui-messages-close\" (click)=\"clear($event)\" *ngIf=\"closable\">\n                <i class=\"fa fa-close\"></i>\n            </a>\n            <span class=\"ui-messages-icon fa fa-2x fa-info-circle\"></span>\n            <ul>\n                <li *ngFor=\"#msg of value\">\n                    <span class=\"ui-messages-summary\">{{msg.summary}}</span>\n                    <span class=\"ui-messages-detail\">{{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'),'ui-messages-warn':(value[0].severity === 'warn'),'ui-messages-error':(value[0].severity === 'error')}\">\n            <a href=\"#\" class=\"ui-messages-close\" (click)=\"clear($event)\" *ngIf=\"closable\">\n                <i class=\"fa fa-close\"></i>\n            </a>\n            <span class=\"ui-messages-icon fa fa-2x fa-info-circle\"></span>\n            <ul>\n                <li *ngFor=\"let msg of value\">\n                    <span class=\"ui-messages-summary\">{{msg.summary}}</span>\n                    <span class=\"ui-messages-detail\">{{msg.detail}}</span>\n                </li>\n            </ul>\n        </div>\n    "
         }), 
@@ -50,4 +46,4 @@ __metadata('design:paramtypes', [])
     return Messages;
-})();
+}());
 exports.Messages = Messages;
 //# sourceMappingURL=messages.js.map

components/multiselect/multiselect.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -121,3 +122,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         this.overlayVisible = true;
-        this.panel.style.zIndex = ++PUI.zindex;
+        this.panel.style.zIndex = ++domhandler_1.DomHandler.zindex;
         this.domHandler.relativePosition(this.panel, this.container);
@@ -260,3 +261,3 @@ this.domHandler.fadeIn(this.panel, 250);
             selector: 'p-multiSelect',
-            template: "\n        <div [ngClass]=\"{'ui-multiselect ui-widget ui-state-default ui-corner-all':true,'ui-state-focus': focus}\" [attr.style]=\"style\" [attr.styleClass]=\"styleClass\"\n            (mouseenter)=\"onMouseenter($event)\" (mouseleave)=\"onMouseleave($event)\" (click)=\"onMouseclick($event,in)\">\n            <div class=\"ui-helper-hidden-accessible\">\n                <input #in type=\"text\" readonly=\"readonly\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\">\n            </div>\n            <div class=\"ui-multiselect-label-container\" [title]=\"valuesAsString\">\n                <label [ngClass]=\"{'ui-multiselect-label ui-corner-all':true,'ui-state-hover':hover,'ui-state-focus':focus}\">{{valuesAsString}}</label>\n            </div>\n            <div [ngClass]=\"{'ui-multiselect-trigger ui-state-default ui-corner-right':true,'ui-state-hover':hover,'ui-state-focus':focus}\">\n                <span class=\"fa fa-fw fa-caret-down\"></span>\n            </div>\n            <div class=\"ui-multiselect-panel ui-widget ui-widget-content ui-corner-all ui-shadow\" [style.display]=\"overlayVisible ? 'block' : 'none'\" (click)=\"panelClick=true\">\n                <div class=\"ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix\">\n                    <div class=\"ui-chkbox ui-widget\">\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-hover':hoverToggleAll}\"\n                            (mouseenter)=\"hoverToggleAll=true\" (mouseleave)=\"hoverToggleAll=false\" (click)=\"toggleAll($event,cb)\">\n                            <span class=\"ui-chkbox-icon ui-c\" [ngClass]=\"{'fa fa-fw fa-check':isAllChecked()}\"></span>\n                        </div>\n                    </div>\n                    <div class=\"ui-multiselect-filter-container\">\n                        <input type=\"text\" aria-multiline=\"false\" aria-readonly=\"false\" aria-disabled=\"false\" role=\"textbox\" (input)=\"onFilter($event)\"\n                                    class=\"ui-inputtext ui-widget ui-state-default ui-corner-all\">\n                        <span class=\"fa fa-fw fa-search\"></span>\n                    </div>\n                    <a class=\"ui-multiselect-close ui-corner-all\" href=\"#\" (click)=\"close($event)\">\n                        <span class=\"fa fa-close\"></span>\n                    </a>\n                </div>\n                <div class=\"ui-multiselect-items-wrapper\">\n                    <ul class=\"ui-multiselect-items ui-multiselect-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\" [style.max-height]=\"scrollHeight||'auto'\">\n                        <li #item *ngFor=\"#option of options\" class=\"ui-multiselect-item ui-corner-all\" (click)=\"onItemClick($event,option.value)\" \n                            [style.display]=\"isItemVisible(option) ? 'block' : 'none'\"\n                            [ngClass]=\"{'ui-state-highlight':isSelected(option.value),'ui-state-hover':hoveredItem==item}\" (mouseenter)=\"hoveredItem=item\" (mouseleave)=\"hoveredItem=null\">\n                            <div class=\"ui-chkbox ui-widget\">\n                                <div class=\"ui-helper-hidden-accessible\">\n                                    <input type=\"checkbox\" readonly=\"readonly\" [checked]=\"isSelected(option.value)\">\n                                </div>\n                                <div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\" [ngClass]=\"{'ui-state-active':isSelected(option.value)}\">\n                                    <span class=\"ui-chkbox-icon ui-c\" [ngClass]=\"{'fa fa-fw fa-check':isSelected(option.value)}\"></span>\n                                </div>\n                            </div>\n                            <label>{{option.label}}</label>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    ",
+            template: "\n        <div [ngClass]=\"{'ui-multiselect ui-widget ui-state-default ui-corner-all':true,'ui-state-focus': focus}\" [attr.style]=\"style\" [attr.styleClass]=\"styleClass\"\n            (mouseenter)=\"onMouseenter($event)\" (mouseleave)=\"onMouseleave($event)\" (click)=\"onMouseclick($event,in)\">\n            <div class=\"ui-helper-hidden-accessible\">\n                <input #in type=\"text\" readonly=\"readonly\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\">\n            </div>\n            <div class=\"ui-multiselect-label-container\" [title]=\"valuesAsString\">\n                <label [ngClass]=\"{'ui-multiselect-label ui-corner-all':true,'ui-state-hover':hover,'ui-state-focus':focus}\">{{valuesAsString}}</label>\n            </div>\n            <div [ngClass]=\"{'ui-multiselect-trigger ui-state-default ui-corner-right':true,'ui-state-hover':hover,'ui-state-focus':focus}\">\n                <span class=\"fa fa-fw fa-caret-down\"></span>\n            </div>\n            <div class=\"ui-multiselect-panel ui-widget ui-widget-content ui-corner-all ui-shadow\" [style.display]=\"overlayVisible ? 'block' : 'none'\" (click)=\"panelClick=true\">\n                <div class=\"ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix\">\n                    <div class=\"ui-chkbox ui-widget\">\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-hover':hoverToggleAll}\"\n                            (mouseenter)=\"hoverToggleAll=true\" (mouseleave)=\"hoverToggleAll=false\" (click)=\"toggleAll($event,cb)\">\n                            <span class=\"ui-chkbox-icon ui-c\" [ngClass]=\"{'fa fa-fw fa-check':isAllChecked()}\"></span>\n                        </div>\n                    </div>\n                    <div class=\"ui-multiselect-filter-container\">\n                        <input type=\"text\" aria-multiline=\"false\" aria-readonly=\"false\" aria-disabled=\"false\" role=\"textbox\" (input)=\"onFilter($event)\"\n                                    class=\"ui-inputtext ui-widget ui-state-default ui-corner-all\">\n                        <span class=\"fa fa-fw fa-search\"></span>\n                    </div>\n                    <a class=\"ui-multiselect-close ui-corner-all\" href=\"#\" (click)=\"close($event)\">\n                        <span class=\"fa fa-close\"></span>\n                    </a>\n                </div>\n                <div class=\"ui-multiselect-items-wrapper\">\n                    <ul class=\"ui-multiselect-items ui-multiselect-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\" [style.max-height]=\"scrollHeight||'auto'\">\n                        <li #item *ngFor=\"let option of options\" class=\"ui-multiselect-item ui-corner-all\" (click)=\"onItemClick($event,option.value)\" \n                            [style.display]=\"isItemVisible(option) ? 'block' : 'none'\"\n                            [ngClass]=\"{'ui-state-highlight':isSelected(option.value),'ui-state-hover':hoveredItem==item}\" (mouseenter)=\"hoveredItem=item\" (mouseleave)=\"hoveredItem=null\">\n                            <div class=\"ui-chkbox ui-widget\">\n                                <div class=\"ui-helper-hidden-accessible\">\n                                    <input type=\"checkbox\" readonly=\"readonly\" [checked]=\"isSelected(option.value)\">\n                                </div>\n                                <div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\" [ngClass]=\"{'ui-state-active':isSelected(option.value)}\">\n                                    <span class=\"ui-chkbox-icon ui-c\" [ngClass]=\"{'fa fa-fw fa-check':isSelected(option.value)}\"></span>\n                                </div>\n                            </div>\n                            <label>{{option.label}}</label>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    ",
             providers: [domhandler_1.DomHandler, MULTISELECT_VALUE_ACCESSOR]
@@ -267,4 +268,4 @@ }),
     return MultiSelect;
-})();
+}());
 exports.MultiSelect = MultiSelect;
 //# sourceMappingURL=multiselect.js.map

components/orderlist/orderlist.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -187,3 +188,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-orderList',
-            template: "\n        <div [ngClass]=\"{'ui-orderlist ui-grid ui-widget':true,'ui-grid-responsive':responsive}\" [attr.style]=\"style\" [attr.class]=\"styleClass\">\n            <div class=\"ui-grid-row\">\n                <div class=\"ui-orderlist-controls ui-grid-col-2\">\n                    <button type=\"button\" pButton icon=\"fa-angle-up\" (click)=\"moveUp($event,listelement)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-double-up\" (click)=\"moveTop($event,listelement)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-down\" (click)=\"moveDown($event,listelement)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-double-down\" (click)=\"moveBottom($event,listelement)\"></button>\n                </div>\n                <div class=\"ui-grid-col-10\">\n                    <div class=\"ui-orderlist-caption ui-widget-header ui-corner-top\" *ngIf=\"header\">{{header}}</div>\n                    <ul #listelement class=\"ui-widget-content ui-orderlist-list ui-corner-bottom\" [attr.style]=\"listStyle\" \n                        (mouseover)=\"onMouseover($event)\" (mouseout)=\"onMouseout($event)\" (click)=\"onClick($event)\">\n                        <template ngFor [ngForOf]=\"value\" [ngForTemplate]=\"itemTemplate\"></template>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    ",
+            template: "\n        <div [ngClass]=\"{'ui-orderlist ui-grid ui-widget':true,'ui-grid-responsive':responsive}\" [attr.style]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-grid-row\">\n                <div class=\"ui-orderlist-controls ui-grid-col-2\">\n                    <button type=\"button\" pButton icon=\"fa-angle-up\" (click)=\"moveUp($event,listelement)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-double-up\" (click)=\"moveTop($event,listelement)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-down\" (click)=\"moveDown($event,listelement)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-double-down\" (click)=\"moveBottom($event,listelement)\"></button>\n                </div>\n                <div class=\"ui-grid-col-10\">\n                    <div class=\"ui-orderlist-caption ui-widget-header ui-corner-top\" *ngIf=\"header\">{{header}}</div>\n                    <ul #listelement class=\"ui-widget-content ui-orderlist-list ui-corner-bottom\" [attr.style]=\"listStyle\" \n                        (mouseover)=\"onMouseover($event)\" (mouseout)=\"onMouseout($event)\" (click)=\"onClick($event)\">\n                        <template ngFor [ngForOf]=\"value\" [ngForTemplate]=\"itemTemplate\"></template>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    ",
             directives: [button_1.Button],
@@ -195,4 +196,4 @@ providers: [domhandler_1.DomHandler]
     return OrderList;
-})();
+}());
 exports.OrderList = OrderList;
 //# sourceMappingURL=orderlist.js.map

components/overlaypanel/overlaypanel.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -59,3 +60,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         var container = this.el.nativeElement.children[0];
-        container.style.zIndex = ++PUI.zindex;
+        container.style.zIndex = ++domhandler_1.DomHandler.zindex;
         if (this.visible) {
@@ -137,4 +138,4 @@ this.domHandler.absolutePosition(container, elementTarget);
     return OverlayPanel;
-})();
+}());
 exports.OverlayPanel = OverlayPanel;
 //# sourceMappingURL=overlaypanel.js.map

components/paginator/paginator.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -122,3 +123,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-paginator',
-            template: "\n        <div [attr.class]=\"styleClass\" [attr.style]=\"style\" [ngClass]=\"{'ui-paginator ui-widget-header ui-unselectable-text':true}\">\n            <span #firstlink class=\"ui-paginator-first ui-paginator-element ui-state-default ui-corner-all\" (mouseenter)=\"hoveredItem = $event.target\" (mouseleave)=\"hoveredItem = null\"\n                        (click)=\"changePageToFirst()\" [ngClass]=\"{'ui-state-disabled':isFirstPage(),'ui-state-hover':(firstlink === hoveredItem && !isFirstPage())}\">\n                <span class=\"fa fa-step-backward\"></span>\n            </span>\n            <span #prevlink class=\"ui-paginator-prev ui-paginator-element ui-state-default ui-corner-all\" (mouseenter)=\"hoveredItem = $event.target\" (mouseleave)=\"hoveredItem = null\"\n                    (click)=\"changePageToPrev()\" [ngClass]=\"{'ui-state-disabled':isFirstPage(),'ui-state-hover':(prevlink === hoveredItem && !isFirstPage())}\">\n                <span class=\"fa fa-backward\"></span>\n            </span>\n            <span class=\"ui-paginator-pages\">\n                <span #plink *ngFor=\"#pageLink of pageLinks\" class=\"ui-paginator-page ui-paginator-element ui-state-default ui-corner-all\"\n                    (mouseenter)=\"hoveredItem = $event.target\" (mouseleave)=\"hoveredItem = null\" (click)=\"changePage(pageLink - 1)\"\n                    [ngClass]=\"{'ui-state-hover':(plink === hoveredItem), 'ui-state-active': (pageLink-1 == getPage())}\">{{pageLink}}</span>\n            </span>\n            <span #nextlink class=\"ui-paginator-next ui-paginator-element ui-state-default ui-corner-all\" (mouseenter)=\"hoveredItem = $event.target\" (mouseleave)=\"hoveredItem = null\"\n                    (click)=\"changePageToNext()\" [ngClass]=\"{'ui-state-disabled':isLastPage(),'ui-state-hover':(nextlink === hoveredItem  && !isLastPage())}\">\n                <span class=\"fa fa-forward\"></span>\n            </span>\n            <span #lastlink class=\"ui-paginator-last ui-paginator-element ui-state-default ui-corner-all\" (mouseenter)=\"hoveredItem = $event.target\" (mouseleave)=\"hoveredItem = null\"\n                    (click)=\"changePageToLast()\" [ngClass]=\"{'ui-state-disabled':isLastPage(),'ui-state-hover':(lastlink === hoveredItem  && !isLastPage())}\">\n                <span class=\"fa fa-step-forward\"></span>\n            </span>\n            <select class=\"ui-paginator-rpp-options ui-widget ui-state-default\" *ngIf=\"rowsPerPageOptions\" (change)=\"onRppChange($event)\">\n                <option *ngFor=\"#opt of rowsPerPageOptions\" [value]=\"opt\" [selected]=\"rows == opt\">{{opt}}</option>\n            </select>\n        </div>\n    "
+            template: "\n        <div [class]=\"styleClass\" [attr.style]=\"style\" [ngClass]=\"{'ui-paginator ui-widget-header ui-unselectable-text':true}\">\n            <span #firstlink class=\"ui-paginator-first ui-paginator-element ui-state-default ui-corner-all\" (mouseenter)=\"hoveredItem = $event.target\" (mouseleave)=\"hoveredItem = null\"\n                        (click)=\"changePageToFirst()\" [ngClass]=\"{'ui-state-disabled':isFirstPage(),'ui-state-hover':(firstlink === hoveredItem && !isFirstPage())}\">\n                <span class=\"fa fa-step-backward\"></span>\n            </span>\n            <span #prevlink class=\"ui-paginator-prev ui-paginator-element ui-state-default ui-corner-all\" (mouseenter)=\"hoveredItem = $event.target\" (mouseleave)=\"hoveredItem = null\"\n                    (click)=\"changePageToPrev()\" [ngClass]=\"{'ui-state-disabled':isFirstPage(),'ui-state-hover':(prevlink === hoveredItem && !isFirstPage())}\">\n                <span class=\"fa fa-backward\"></span>\n            </span>\n            <span class=\"ui-paginator-pages\">\n                <span #plink *ngFor=\"let pageLink of pageLinks\" class=\"ui-paginator-page ui-paginator-element ui-state-default ui-corner-all\"\n                    (mouseenter)=\"hoveredItem = $event.target\" (mouseleave)=\"hoveredItem = null\" (click)=\"changePage(pageLink - 1)\"\n                    [ngClass]=\"{'ui-state-hover':(plink === hoveredItem), 'ui-state-active': (pageLink-1 == getPage())}\">{{pageLink}}</span>\n            </span>\n            <span #nextlink class=\"ui-paginator-next ui-paginator-element ui-state-default ui-corner-all\" (mouseenter)=\"hoveredItem = $event.target\" (mouseleave)=\"hoveredItem = null\"\n                    (click)=\"changePageToNext()\" [ngClass]=\"{'ui-state-disabled':isLastPage(),'ui-state-hover':(nextlink === hoveredItem  && !isLastPage())}\">\n                <span class=\"fa fa-forward\"></span>\n            </span>\n            <span #lastlink class=\"ui-paginator-last ui-paginator-element ui-state-default ui-corner-all\" (mouseenter)=\"hoveredItem = $event.target\" (mouseleave)=\"hoveredItem = null\"\n                    (click)=\"changePageToLast()\" [ngClass]=\"{'ui-state-disabled':isLastPage(),'ui-state-hover':(lastlink === hoveredItem  && !isLastPage())}\">\n                <span class=\"fa fa-step-forward\"></span>\n            </span>\n            <select class=\"ui-paginator-rpp-options ui-widget ui-state-default\" *ngIf=\"rowsPerPageOptions\" (change)=\"onRppChange($event)\">\n                <option *ngFor=\"let opt of rowsPerPageOptions\" [value]=\"opt\" [selected]=\"rows == opt\">{{opt}}</option>\n            </select>\n        </div>\n    "
         }), 
@@ -128,4 +129,4 @@ __metadata('design:paramtypes', [])
     return Paginator;
-})();
+}());
 exports.Paginator = Paginator;
 //# sourceMappingURL=paginator.js.map

components/panel/panel.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -65,3 +66,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-panel',
-            template: "\n        <div [ngClass]=\"'ui-panel ui-widget ui-widget-content ui-corner-all'\" [attr.style]=\"style\" [attr.class]=\"styleClass\">\n            <div class=\"ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all\">\n                <span class=\"ui-panel-title\">{{header}}</span>\n                <a *ngIf=\"toggleable\" class=\"ui-panel-titlebar-icon ui-panel-titlebar-toggler ui-corner-all ui-state-default\" href=\"#\"\n                    [ngClass]=\"{'ui-state-hover':hoverToggler}\" (mouseenter)=\"hoverToggler=true\" (mouseleave)=\"hoverToggler=false\" (click)=\"toggle($event)\">\n                    <span class=\"fa fa-fw\" [ngClass]=\"{'fa-minus': !collapsed,'fa-plus':collapsed}\"></span>\n                </a>\n            </div>\n            <div class=\"ui-panel-content ui-widget-content\" [style.display]=\"collapsed ? 'none' : 'block'\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n    "
+            template: "\n        <div [ngClass]=\"'ui-panel ui-widget ui-widget-content ui-corner-all'\" [attr.style]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all\">\n                <span class=\"ui-panel-title\">{{header}}</span>\n                <a *ngIf=\"toggleable\" class=\"ui-panel-titlebar-icon ui-panel-titlebar-toggler ui-corner-all ui-state-default\" href=\"#\"\n                    [ngClass]=\"{'ui-state-hover':hoverToggler}\" (mouseenter)=\"hoverToggler=true\" (mouseleave)=\"hoverToggler=false\" (click)=\"toggle($event)\">\n                    <span class=\"fa fa-fw\" [ngClass]=\"{'fa-minus': !collapsed,'fa-plus':collapsed}\"></span>\n                </a>\n            </div>\n            <div class=\"ui-panel-content ui-widget-content\" [style.display]=\"collapsed ? 'none' : 'block'\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n    "
         }), 
@@ -71,4 +72,4 @@ __metadata('design:paramtypes', [])
     return Panel;
-})();
+}());
 exports.Panel = Panel;
 //# sourceMappingURL=panel.js.map

components/panelmenu/panelmenu.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -46,3 +47,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-panelMenu',
-            template: "\n        <div [attr.class]=\"styleClass\" [attr.style]=\"style\" [ngClass]=\"{'ui-panelmenu ui-widget':true}\">\n            <ng-content></ng-content>\n        </div>\n    "
+            template: "\n        <div [class]=\"styleClass\" [attr.style]=\"style\" [ngClass]=\"{'ui-panelmenu ui-widget':true}\">\n            <ng-content></ng-content>\n        </div>\n    "
         }), 
@@ -52,4 +53,4 @@ __metadata('design:paramtypes', [core_1.ElementRef])
     return PanelMenu;
-})();
+}());
 exports.PanelMenu = PanelMenu;
 //# sourceMappingURL=panelmenu.js.map

components/password/password.d.ts

@@ -1,17 +0,26 @@
-import { ElementRef, OnInit, OnDestroy, OnChanges, SimpleChange } from 'angular2/core';
-export declare class Password implements OnInit, OnDestroy, OnChanges {
+import { ElementRef, AfterViewInit, OnDestroy } from 'angular2/core';
+import { DomHandler } from '../dom/domhandler';
+export declare class Password implements AfterViewInit, OnDestroy {
     private el;
+    private domHandler;
     promptLabel: string;
     weakLabel: string;
-    goodLabel: string;
+    mediumLabel: string;
     strongLabel: string;
-    inline: boolean;
-    disabled: boolean;
-    initialized: boolean;
-    constructor(el: ElementRef);
-    ngOnInit(): void;
-    ngOnChanges(changes: {
-        [key: string]: SimpleChange;
-    }): void;
+    hover: boolean;
+    focus: boolean;
+    panel: any;
+    meter: any;
+    info: any;
+    constructor(el: ElementRef, domHandler: DomHandler);
+    ngAfterViewInit(): void;
+    onMouseover(e: any): void;
+    onMouseout(e: any): void;
+    onFocus(e: any): void;
+    onBlur(e: any): void;
+    onKeyup(e: any): void;
+    testStrength(str: string): number;
+    normalize(x: any, y: any): number;
+    isDisabled(): any;
     ngOnDestroy(): void;
 }

components/password/password.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -11,27 +12,95 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 var core_1 = require('angular2/core');
+var domhandler_1 = require('../dom/domhandler');
 var Password = (function () {
-    function Password(el) {
+    function Password(el, domHandler) {
         this.el = el;
-        this.initialized = false;
+        this.domHandler = domHandler;
+        this.promptLabel = 'Please enter a password';
+        this.weakLabel = 'Weak';
+        this.mediumLabel = 'Medium';
+        this.strongLabel = 'Strong';
     }
-    Password.prototype.ngOnInit = function () {
-        jQuery(this.el.nativeElement).puipassword({
-            promptLabel: this.promptLabel,
-            weakLabel: this.weakLabel,
-            goodLabel: this.goodLabel,
-            strongLabel: this.strongLabel,
-            inline: this.inline
-        });
-        this.initialized = true;
+    Password.prototype.ngAfterViewInit = function () {
+        this.panel = document.createElement('div');
+        this.panel.className = 'ui-password-panel ui-widget ui-state-highlight ui-corner-all ui-helper-hidden ui-password-panel-overlay';
+        this.meter = document.createElement('div');
+        this.meter.className = 'ui-password-meter';
+        this.info = document.createElement('div');
+        this.info.className = 'ui-password-info';
+        this.info.textContent = this.promptLabel;
+        this.panel.appendChild(this.meter);
+        this.panel.appendChild(this.info);
+        document.body.appendChild(this.panel);
     };
-    Password.prototype.ngOnChanges = function (changes) {
-        if (this.initialized) {
-            for (var key in changes) {
-                jQuery(this.el.nativeElement).puipassword('option', key, changes[key].currentValue);
+    Password.prototype.onMouseover = function (e) {
+        this.hover = true;
+    };
+    Password.prototype.onMouseout = function (e) {
+        this.hover = false;
+    };
+    Password.prototype.onFocus = function (e) {
+        this.focus = true;
+        this.domHandler.removeClass(this.panel, 'ui-helper-hidden');
+        this.domHandler.absolutePosition(this.panel, this.el.nativeElement);
+        this.domHandler.fadeIn(this.panel, 250);
+    };
+    Password.prototype.onBlur = function (e) {
+        this.focus = false;
+        this.domHandler.addClass(this.panel, 'ui-helper-hidden');
+    };
+    Password.prototype.onKeyup = function (e) {
+        var value = e.target.value, label = null, meterPos = null;
+        if (value.length === 0) {
+            label = this.promptLabel;
+            meterPos = '0px 0px';
+        }
+        else {
+            var score = this.testStrength(value);
+            if (score < 30) {
+                label = this.weakLabel;
+                meterPos = '0px -10px';
             }
+            else if (score >= 30 && score < 80) {
+                label = this.mediumLabel;
+                meterPos = '0px -20px';
+            }
+            else if (score >= 80) {
+                label = this.strongLabel;
+                meterPos = '0px -30px';
+            }
         }
+        this.meter.style.backgroundPosition = meterPos;
+        this.info.textContent = label;
     };
+    Password.prototype.testStrength = function (str) {
+        var grade = 0;
+        var val;
+        val = str.match('[0-9]');
+        grade += this.normalize(val ? val.length : 1 / 4, 1) * 25;
+        val = str.match('[a-zA-Z]');
+        grade += this.normalize(val ? val.length : 1 / 2, 3) * 10;
+        val = str.match('[!@#$%^&*?_~.,;=]');
+        grade += this.normalize(val ? val.length : 1 / 6, 1) * 35;
+        val = str.match('[A-Z]');
+        grade += this.normalize(val ? val.length : 1 / 6, 1) * 30;
+        grade *= str.length / 8;
+        return grade > 100 ? 100 : grade;
+    };
+    Password.prototype.normalize = function (x, y) {
+        var diff = x - y;
+        if (diff <= 0)
+            return x / y;
+        else
+            return 1 + 0.5 * (x / (x + y / 4));
+    };
+    Password.prototype.isDisabled = function () {
+        return this.el.nativeElement.disabled;
+    };
     Password.prototype.ngOnDestroy = function () {
-        jQuery(this.el.nativeElement).puipassword('destroy');
-        this.initialized = false;
+        this.panel.removeChild(this.meter);
+        this.panel.removeChild(this.info);
+        document.body.removeChild(this.panel);
+        this.panel = null;
+        this.meter = null;
+        this.info = null;
     };
@@ -49,3 +118,3 @@ __decorate([
         __metadata('design:type', String)
-    ], Password.prototype, "goodLabel", void 0);
+    ], Password.prototype, "mediumLabel", void 0);
     __decorate([
@@ -56,18 +125,50 @@ core_1.Input(),
     __decorate([
-        core_1.Input(), 
-        __metadata('design:type', Boolean)
-    ], Password.prototype, "inline", void 0);
+        core_1.HostListener('mouseover', ['$event']), 
+        __metadata('design:type', Function), 
+        __metadata('design:paramtypes', [Object]), 
+        __metadata('design:returntype', void 0)
+    ], Password.prototype, "onMouseover", null);
     __decorate([
-        core_1.Input(), 
-        __metadata('design:type', Boolean)
-    ], Password.prototype, "disabled", void 0);
+        core_1.HostListener('mouseout', ['$event']), 
+        __metadata('design:type', Function), 
+        __metadata('design:paramtypes', [Object]), 
+        __metadata('design:returntype', void 0)
+    ], Password.prototype, "onMouseout", null);
+    __decorate([
+        core_1.HostListener('focus', ['$event']), 
+        __metadata('design:type', Function), 
+        __metadata('design:paramtypes', [Object]), 
+        __metadata('design:returntype', void 0)
+    ], Password.prototype, "onFocus", null);
+    __decorate([
+        core_1.HostListener('blur', ['$event']), 
+        __metadata('design:type', Function), 
+        __metadata('design:paramtypes', [Object]), 
+        __metadata('design:returntype', void 0)
+    ], Password.prototype, "onBlur", null);
+    __decorate([
+        core_1.HostListener('keyup', ['$event']), 
+        __metadata('design:type', Function), 
+        __metadata('design:paramtypes', [Object]), 
+        __metadata('design:returntype', void 0)
+    ], Password.prototype, "onKeyup", null);
     Password = __decorate([
         core_1.Directive({
-            selector: '[pPassword]'
+            selector: '[pPassword]',
+            host: {
+                '[class.ui-inputtext]': 'true',
+                '[class.ui-corner-all]': 'true',
+                '[class.ui-state-default]': 'true',
+                '[class.ui-widget]': 'true',
+                '[class.ui-state-hover]': 'hover',
+                '[class.ui-state-focus]': 'focus',
+                '[class.ui-state-disabled]': 'isDisabled()'
+            },
+            providers: [domhandler_1.DomHandler]
         }), 
-        __metadata('design:paramtypes', [core_1.ElementRef])
+        __metadata('design:paramtypes', [core_1.ElementRef, domhandler_1.DomHandler])
     ], Password);
     return Password;
-})();
+}());
 exports.Password = Password;
 //# sourceMappingURL=password.js.map

components/picklist/picklist.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -213,3 +214,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-pickList',
-            template: "\n        <div [attr.class]=\"styleClass\" [attr.style]=\"style\" [ngClass]=\"{'ui-picklist ui-widget ui-helper-clearfix': true, 'ui-picklist-responsive': responsive}\">\n            <div class=\"ui-picklist-source-controls ui-picklist-buttons\">\n                <div class=\"ui-picklist-buttons-cell\">\n                    <button type=\"button\" pButton icon=\"fa-angle-up\" (click)=\"moveUp(sourcelist,source)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-double-up\" (click)=\"moveTop(sourcelist,source)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-down\" (click)=\"moveDown(sourcelist,source)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-double-down\" (click)=\"moveBottom(sourcelist,source)\"></button>\n                </div>\n            </div>\n            <div class=\"ui-picklist-listwrapper ui-picklist-source-wrapper\">\n                <div class=\"ui-picklist-caption ui-widget-header ui-corner-tl ui-corner-tr\" *ngIf=\"sourceHeader\">{{sourceHeader}}</div>\n                <ul #sourcelist class=\"ui-widget-content ui-picklist-list ui-picklist-source ui-corner-bottom\" [attr.style]=\"sourceStyle\"\n                    (mouseover)=\"onMouseover($event)\" (mouseout)=\"onMouseout($event)\" (click)=\"onClick($event)\">\n                    <template ngFor [ngForOf]=\"source\" [ngForTemplate]=\"itemTemplate\"></template>\n                </ul>\n            </div>\n            <div class=\"ui-picklist-buttons\">\n                <div class=\"ui-picklist-buttons-cell\">\n                    <button type=\"button\" pButton icon=\"fa-angle-right\" (click)=\"moveRight(sourcelist)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-double-right\" (click)=\"moveAllRight(sourcelist)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-left\" (click)=\"moveLeft(targetlist)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-double-left\" (click)=\"moveAllLeft(targetlist)\"></button>\n                </div>\n            </div>\n            <div class=\"ui-picklist-listwrapper ui-picklist-target-wrapper\">\n                <div class=\"ui-picklist-caption ui-widget-header ui-corner-tl ui-corner-tr\" *ngIf=\"targetHeader\">{{targetHeader}}</div>\n                <ul #targetlist class=\"ui-widget-content ui-picklist-list ui-picklist-source ui-corner-bottom\" [attr.style]=\"targetStyle\"\n                    (mouseover)=\"onMouseover($event)\" (mouseout)=\"onMouseout($event)\" (click)=\"onClick($event)\">\n                    <template ngFor [ngForOf]=\"target\" [ngForTemplate]=\"itemTemplate\"></template>\n                </ul>\n            </div>\n            <div class=\"ui-picklist-target-controls ui-picklist-buttons\">\n                <div class=\"ui-picklist-buttons-cell\">\n                    <button type=\"button\" pButton icon=\"fa-angle-up\" (click)=\"moveUp(targetlist,target)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-double-up\" (click)=\"moveTop(targetlist,target)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-down\" (click)=\"moveDown(targetlist,target)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-double-down\" (click)=\"moveBottom(targetlist,target)\"></button>\n                </div>\n            </div>\n        </div>\n    ",
+            template: "\n        <div [class]=\"styleClass\" [attr.style]=\"style\" [ngClass]=\"{'ui-picklist ui-widget ui-helper-clearfix': true, 'ui-picklist-responsive': responsive}\">\n            <div class=\"ui-picklist-source-controls ui-picklist-buttons\">\n                <div class=\"ui-picklist-buttons-cell\">\n                    <button type=\"button\" pButton icon=\"fa-angle-up\" (click)=\"moveUp(sourcelist,source)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-double-up\" (click)=\"moveTop(sourcelist,source)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-down\" (click)=\"moveDown(sourcelist,source)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-double-down\" (click)=\"moveBottom(sourcelist,source)\"></button>\n                </div>\n            </div>\n            <div class=\"ui-picklist-listwrapper ui-picklist-source-wrapper\">\n                <div class=\"ui-picklist-caption ui-widget-header ui-corner-tl ui-corner-tr\" *ngIf=\"sourceHeader\">{{sourceHeader}}</div>\n                <ul #sourcelist class=\"ui-widget-content ui-picklist-list ui-picklist-source ui-corner-bottom\" [attr.style]=\"sourceStyle\"\n                    (mouseover)=\"onMouseover($event)\" (mouseout)=\"onMouseout($event)\" (click)=\"onClick($event)\">\n                    <template ngFor [ngForOf]=\"source\" [ngForTemplate]=\"itemTemplate\"></template>\n                </ul>\n            </div>\n            <div class=\"ui-picklist-buttons\">\n                <div class=\"ui-picklist-buttons-cell\">\n                    <button type=\"button\" pButton icon=\"fa-angle-right\" (click)=\"moveRight(sourcelist)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-double-right\" (click)=\"moveAllRight(sourcelist)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-left\" (click)=\"moveLeft(targetlist)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-double-left\" (click)=\"moveAllLeft(targetlist)\"></button>\n                </div>\n            </div>\n            <div class=\"ui-picklist-listwrapper ui-picklist-target-wrapper\">\n                <div class=\"ui-picklist-caption ui-widget-header ui-corner-tl ui-corner-tr\" *ngIf=\"targetHeader\">{{targetHeader}}</div>\n                <ul #targetlist class=\"ui-widget-content ui-picklist-list ui-picklist-source ui-corner-bottom\" [attr.style]=\"targetStyle\"\n                    (mouseover)=\"onMouseover($event)\" (mouseout)=\"onMouseout($event)\" (click)=\"onClick($event)\">\n                    <template ngFor [ngForOf]=\"target\" [ngForTemplate]=\"itemTemplate\"></template>\n                </ul>\n            </div>\n            <div class=\"ui-picklist-target-controls ui-picklist-buttons\">\n                <div class=\"ui-picklist-buttons-cell\">\n                    <button type=\"button\" pButton icon=\"fa-angle-up\" (click)=\"moveUp(targetlist,target)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-double-up\" (click)=\"moveTop(targetlist,target)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-down\" (click)=\"moveDown(targetlist,target)\"></button>\n                    <button type=\"button\" pButton icon=\"fa-angle-double-down\" (click)=\"moveBottom(targetlist,target)\"></button>\n                </div>\n            </div>\n        </div>\n    ",
             directives: [button_1.Button],
@@ -221,4 +222,4 @@ providers: [domhandler_1.DomHandler]
     return PickList;
-})();
+}());
 exports.PickList = PickList;
 //# sourceMappingURL=picklist.js.map

components/progressbar/progressbar.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -26,4 +27,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return ProgressBar;
-})();
+}());
 exports.ProgressBar = ProgressBar;
 //# sourceMappingURL=progressbar.js.map

components/radiobutton/radiobutton.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -71,4 +72,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return RadioButton;
-})();
+}());
 exports.RadioButton = RadioButton;
 //# sourceMappingURL=radiobutton.js.map

components/rating/rating.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -87,3 +88,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-rating',
-            template: "\n        <div class=\"ui-rating\" [ngClass]=\"{'ui-state-disabled': disabled}\">\n            <div class=\"ui-rating-cancel\" *ngIf=\"cancel\" (click)=\"clear($event)\" [ngClass]=\"{'ui-rating-cancel-hover':hoverCancel}\"\n             (mouseenter)=\"hoverCancel=true\" (mouseleave)=\"hoverCancel=false\"><a></a></div>\n            <div class=\"ui-rating-star\" *ngFor=\"#star of starsArray;#i=index\" (click)=\"rate($event,i)\"\n             [ngClass]=\"{'ui-rating-star-on':(i < value)}\"><a></a></div>\n        </div>\n    ",
+            template: "\n        <div class=\"ui-rating\" [ngClass]=\"{'ui-state-disabled': disabled}\">\n            <div class=\"ui-rating-cancel\" *ngIf=\"cancel\" (click)=\"clear($event)\" [ngClass]=\"{'ui-rating-cancel-hover':hoverCancel}\"\n             (mouseenter)=\"hoverCancel=true\" (mouseleave)=\"hoverCancel=false\"><a></a></div>\n            <div class=\"ui-rating-star\" *ngFor=\"let star of starsArray;let i=index\" (click)=\"rate($event,i)\"\n             [ngClass]=\"{'ui-rating-star-on':(i < value)}\"><a></a></div>\n        </div>\n    ",
             providers: [RATING_VALUE_ACCESSOR]
@@ -94,4 +95,4 @@ }),
     return Rating;
-})();
+}());
 exports.Rating = Rating;
 //# sourceMappingURL=rating.js.map

components/schedule/schedule.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -161,3 +162,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         var changes = this.differ.diff(this.events);
-        if (changes) {
+        if (this.schedule && changes) {
             this.schedule.fullCalendar('refetchEvents');
@@ -350,3 +351,3 @@ }
             selector: 'p-schedule',
-            template: "\n        <div [attr.style]=\"style\" [attr.class]=\"styleClass\"></div>\n    "
+            template: "\n        <div [attr.style]=\"style\" [class]=\"styleClass\"></div>\n    "
         }), 
@@ -356,4 +357,4 @@ __metadata('design:paramtypes', [core_1.ElementRef, core_1.IterableDiffers])
     return Schedule;
-})();
+}());
 exports.Schedule = Schedule;
 //# sourceMappingURL=schedule.js.map

components/selectbutton/selectbutton.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -94,3 +95,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-selectButton',
-            template: "\n        <div [ngClass]=\"'ui-selectbutton ui-buttonset ui-widget ui-corner-all ui-buttonset-' + options.length\" (mouseleave)=\"hoveredItem=null\" [attr.style]=\"style\" [attr.class]=\"styleClass\">\n            <div *ngFor=\"#option of options;\" class=\"ui-button ui-widget ui-state-default ui-button-text-only\"\n                [ngClass]=\"{'ui-state-hover': hoveredItem == option,'ui-state-active':isSelected(option)}\"\n                (mouseenter)=\"hoveredItem=option\" (click)=\"onItemClick($event,option)\">\n                <span class=\"ui-button-text ui-c\">{{option.label}}</span>\n            </div>\n        </div>\n    ",
+            template: "\n        <div [ngClass]=\"'ui-selectbutton ui-buttonset ui-widget ui-corner-all ui-buttonset-' + options.length\" (mouseleave)=\"hoveredItem=null\" [attr.style]=\"style\" [class]=\"styleClass\">\n            <div *ngFor=\"let option of options;\" class=\"ui-button ui-widget ui-state-default ui-button-text-only\"\n                [ngClass]=\"{'ui-state-hover': hoveredItem == option,'ui-state-active':isSelected(option)}\"\n                (mouseenter)=\"hoveredItem=option\" (click)=\"onItemClick($event,option)\">\n                <span class=\"ui-button-text ui-c\">{{option.label}}</span>\n            </div>\n        </div>\n    ",
             providers: [SELECTBUTTON_VALUE_ACCESSOR]
@@ -101,4 +102,4 @@ }),
     return SelectButton;
-})();
+}());
 exports.SelectButton = SelectButton;
 //# sourceMappingURL=selectbutton.js.map

components/slidemenu/slidemenu.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -76,3 +77,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-slideMenu',
-            template: "\n        <div [attr.class]=\"styleClass\" [attr.style]=\"style\" [ngClass]=\"{'ui-menu ui-slidemenu ui-widget ui-widget-content ui-corner-all':true}\">\n            <div class=\"ui-slidemenu-wrapper\">\n                <div class=\"ui-slidemenu-content\">\n                    <ng-content></ng-content>\n                </div>\n                <div class=\"ui-slidemenu-backward ui-widget-header ui-corner-all\">\n                    <span class=\"fa fa-fw fa-caret-left\"></span>{{backLabel}}\n                </div>\n            </div>\n        </div>\n    "
+            template: "\n        <div [class]=\"styleClass\" [attr.style]=\"style\" [ngClass]=\"{'ui-menu ui-slidemenu ui-widget ui-widget-content ui-corner-all':true}\">\n            <div class=\"ui-slidemenu-wrapper\">\n                <div class=\"ui-slidemenu-content\">\n                    <ng-content></ng-content>\n                </div>\n                <div class=\"ui-slidemenu-backward ui-widget-header ui-corner-all\">\n                    <span class=\"fa fa-fw fa-caret-left\"></span>{{backLabel}}\n                </div>\n            </div>\n        </div>\n    "
         }), 
@@ -82,4 +83,4 @@ __metadata('design:paramtypes', [core_1.ElementRef])
     return SlideMenu;
-})();
+}());
 exports.SlideMenu = SlideMenu;
 //# sourceMappingURL=slidemenu.js.map

components/slider/slider.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -117,3 +118,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-slider',
-            template: "\n        <div [attr.style]=\"style\" [attr.class]=\"styleClass\"></div>\n    ",
+            template: "\n        <div [attr.style]=\"style\" [class]=\"styleClass\"></div>\n    ",
             providers: [SLIDER_VALUE_ACCESSOR]
@@ -124,4 +125,4 @@ }),
     return Slider;
-})();
+}());
 exports.Slider = Slider;
 //# sourceMappingURL=slider.js.map

components/spinner/spinner.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -218,4 +219,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return Spinner;
-})();
+}());
 exports.Spinner = Spinner;
 //# sourceMappingURL=spinner.js.map

components/splitbutton/splitbutton.d.ts

 import { ElementRef, OnInit, OnDestroy, EventEmitter, QueryList, Renderer } from 'angular2/core';
 import { SplitButtonItem } from './splitbuttonitem';
 import { DomHandler } from '../dom/domhandler';
-import { Router, Location } from 'angular2/router';
+import { Router } from 'angular2/router';
+import { Location } from 'angular2/platform/common';
 export declare class SplitButton implements OnInit, OnDestroy {
@@ -6,0 +7,0 @@ private el;

components/splitbutton/splitbutton.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -14,2 +15,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 var router_1 = require('angular2/router');
+var common_1 = require('angular2/platform/common');
 var SplitButton = (function () {
@@ -101,11 +103,11 @@ function SplitButton(el, domHandler, renderer, router, location) {
             selector: 'p-splitButton',
-            template: "\n        <div [ngClass]=\"'ui-splitbutton ui-buttonset ui-widget'\" [attr.style]=\"style\" [attr.styleClass]=\"styleClass\">\n            <button #defaultbtn type=\"button\" class=\"ui-button ui-widget ui-state-default ui-corner-left\"\n                [ngClass]=\"{'ui-button-text-only':(!icon&&label),'ui-button-icon-only':(icon&&!label),\n                'ui-button-text-icon-left':(icon&&label&&iconPos=='left'),'ui-button-text-icon-right':(icon&&label&&iconPos=='right'),\n                'ui-state-hover':hoverDefaultBtn,'ui-state-focus':focusDefaultBtn,'ui-state-active':activeDefaultBtn}\"\n                (mouseenter)=\"hoverDefaultBtn=true\" (mouseleave)=\"hoverDefaultBtn=false\"  (focus)=\"focusDefaultBtn=true\" (blur)=\"focusDefaultBtn=false\"\n                (mousedown)=\"activeDefaultBtn=true\" (mouseup)=\"activeDefaultBtn=false\" (click)=\"onDefaultButtonClick($event)\">\n                <span [ngClass]=\"'ui-button-icon-left ui-c fa fa-fw'\" [attr.class]=\"icon\"></span>\n                <span class=\"ui-button-text ui-c\">{{label}}</span>\n            </button>\n            <button class=\"ui-splitbutton-menubutton ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right\" type=\"button\"\n                [ngClass]=\"{'ui-state-hover':hoverDropdown,'ui-state-focus':focusDropdown,'ui-state-active':activeDropdown}\"\n                (mouseenter)=\"hoverDropdown=true\" (mouseleave)=\"hoverDropdown=false\" (focus)=\"focusDropdown=true\" (blur)=\"focusDropdown=false\"\n                (mousedown)=\"activeDropdown=true\" (mouseup)=\"activeDropdown=false\" (click)=\"onDropdownClick($event,menu,defaultbtn)\">\n                <span class=\"ui-button-icon-left ui-c fa fa-fw fa-caret-down\"></span>\n                <span class=\"ui-button-text ui-c\">ui-button</span>\n            </button>\n            <div #menu [ngClass]=\"'ui-menu ui-menu-dynamic ui-widget ui-widget-content ui-corner-all ui-helper-clearfix ui-shadow'\" [style.display]=\"menuVisible ? 'block' : 'none'\"\n                    [attr.style]=\"menuStyle\" [attr.styleClass]=\"menuStyleClass\">\n                <ul class=\"ui-menu-list ui-helper-reset\">\n                    <li class=\"ui-menuitem ui-widget ui-corner-all\" role=\"menuitem\" *ngFor=\"#item of items\" [ngClass]=\"{'ui-state-hover':(hoveredItem==item)}\"\n                        (mouseenter)=\"hoveredItem=item\" (mouseleave)=\"hoveredItem=null\">\n                        <a [href]=\"getItemUrl(item)\" class=\"ui-menuitem-link ui-corner-all\" (click)=\"onItemClick($event,item)\">\n                            <span [ngClass]=\"'ui-menuitem-icon fa fa-fw'\" [attr.class]=\"item.icon\" *ngIf=\"item.icon\"></span>\n                            <span class=\"ui-menuitem-text\">{{item.label}}</span>\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    ",
+            template: "\n        <div [ngClass]=\"'ui-splitbutton ui-buttonset ui-widget'\" [attr.style]=\"style\" [attr.styleClass]=\"styleClass\">\n            <button #defaultbtn type=\"button\" class=\"ui-button ui-widget ui-state-default ui-corner-left\"\n                [ngClass]=\"{'ui-button-text-only':(!icon&&label),'ui-button-icon-only':(icon&&!label),\n                'ui-button-text-icon-left':(icon&&label&&iconPos=='left'),'ui-button-text-icon-right':(icon&&label&&iconPos=='right'),\n                'ui-state-hover':hoverDefaultBtn,'ui-state-focus':focusDefaultBtn,'ui-state-active':activeDefaultBtn}\"\n                (mouseenter)=\"hoverDefaultBtn=true\" (mouseleave)=\"hoverDefaultBtn=false\"  (focus)=\"focusDefaultBtn=true\" (blur)=\"focusDefaultBtn=false\"\n                (mousedown)=\"activeDefaultBtn=true\" (mouseup)=\"activeDefaultBtn=false\" (click)=\"onDefaultButtonClick($event)\">\n                <span [ngClass]=\"'ui-button-icon-left ui-c fa fa-fw'\" [class]=\"icon\"></span>\n                <span class=\"ui-button-text ui-c\">{{label}}</span>\n            </button>\n            <button class=\"ui-splitbutton-menubutton ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right\" type=\"button\"\n                [ngClass]=\"{'ui-state-hover':hoverDropdown,'ui-state-focus':focusDropdown,'ui-state-active':activeDropdown}\"\n                (mouseenter)=\"hoverDropdown=true\" (mouseleave)=\"hoverDropdown=false\" (focus)=\"focusDropdown=true\" (blur)=\"focusDropdown=false\"\n                (mousedown)=\"activeDropdown=true\" (mouseup)=\"activeDropdown=false\" (click)=\"onDropdownClick($event,menu,defaultbtn)\">\n                <span class=\"ui-button-icon-left ui-c fa fa-fw fa-caret-down\"></span>\n                <span class=\"ui-button-text ui-c\">ui-button</span>\n            </button>\n            <div #menu [ngClass]=\"'ui-menu ui-menu-dynamic ui-widget ui-widget-content ui-corner-all ui-helper-clearfix ui-shadow'\" [style.display]=\"menuVisible ? 'block' : 'none'\"\n                    [attr.style]=\"menuStyle\" [attr.styleClass]=\"menuStyleClass\">\n                <ul class=\"ui-menu-list ui-helper-reset\">\n                    <li class=\"ui-menuitem ui-widget ui-corner-all\" role=\"menuitem\" *ngFor=\"let item of items\" [ngClass]=\"{'ui-state-hover':(hoveredItem==item)}\"\n                        (mouseenter)=\"hoveredItem=item\" (mouseleave)=\"hoveredItem=null\">\n                        <a [href]=\"getItemUrl(item)\" class=\"ui-menuitem-link ui-corner-all\" (click)=\"onItemClick($event,item)\">\n                            <span [ngClass]=\"'ui-menuitem-icon fa fa-fw'\" [class]=\"item.icon\" *ngIf=\"item.icon\"></span>\n                            <span class=\"ui-menuitem-text\">{{item.label}}</span>\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    ",
             providers: [domhandler_1.DomHandler],
             directives: [router_1.ROUTER_DIRECTIVES]
         }), 
-        __metadata('design:paramtypes', [core_1.ElementRef, domhandler_1.DomHandler, core_1.Renderer, router_1.Router, router_1.Location])
+        __metadata('design:paramtypes', [core_1.ElementRef, domhandler_1.DomHandler, core_1.Renderer, router_1.Router, common_1.Location])
     ], SplitButton);
     return SplitButton;
-})();
+}());
 exports.SplitButton = SplitButton;
 //# sourceMappingURL=splitbutton.js.map

components/splitbutton/splitbuttonitem.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -39,4 +40,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return SplitButtonItem;
-})();
+}());
 exports.SplitButtonItem = SplitButtonItem;
 //# sourceMappingURL=splitbuttonitem.js.map

components/tabview/tabpanel.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -46,4 +47,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return TabPanel;
-})();
+}());
 exports.TabPanel = TabPanel;
 //# sourceMappingURL=tabpanel.js.map

components/tabview/tabview.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -108,3 +109,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-tabView',
-            template: "\n        <div [ngClass]=\"'ui-tabview ui-widget ui-widget-content ui-corner-all ui-tabview-' + orientation\" [attr.style]=\"style\" [attr.class]=\"styleClass\">\n            <ul class=\"ui-tabview-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all\">\n                <template ngFor #tab [ngForOf]=\"tabs\">\n                    <li [attr.class]=\"getDefaultHeaderClass(tab)\" [attr.style]=\"tab.headerStyle\"\n                        [ngClass]=\"{'ui-tabview-selected ui-state-active': tab.selected, 'ui-state-hover': tab.hoverHeader&&!tab.disabled, 'ui-state-disabled': tab.disabled}\"\n                        (mouseenter)=\"tab.hoverHeader=true\" (mouseleave)=\"tab.hoverHeader=false\" (click)=\"open($event,tab)\" *ngIf=\"!tab.closed\">\n                        <a href=\"#\">{{tab.header}}</a><span *ngIf=\"tab.closable\" class=\"fa fa-close\" (click)=\"close($event,tab)\"></span>\n                    </li>\n                </template>\n            </ul>\n            <div class=\"ui-tabview-panels\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n    ",
+            template: "\n        <div [ngClass]=\"'ui-tabview ui-widget ui-widget-content ui-corner-all ui-tabview-' + orientation\" [attr.style]=\"style\" [class]=\"styleClass\">\n            <ul class=\"ui-tabview-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all\">\n                <template ngFor let-tab [ngForOf]=\"tabs\">\n                    <li [class]=\"getDefaultHeaderClass(tab)\" [attr.style]=\"tab.headerStyle\"\n                        [ngClass]=\"{'ui-tabview-selected ui-state-active': tab.selected, 'ui-state-hover': tab.hoverHeader&&!tab.disabled, 'ui-state-disabled': tab.disabled}\"\n                        (mouseenter)=\"tab.hoverHeader=true\" (mouseleave)=\"tab.hoverHeader=false\" (click)=\"open($event,tab)\" *ngIf=\"!tab.closed\">\n                        <a href=\"#\">{{tab.header}}</a><span *ngIf=\"tab.closable\" class=\"fa fa-close\" (click)=\"close($event,tab)\"></span>\n                    </li>\n                </template>\n            </ul>\n            <div class=\"ui-tabview-panels\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n    ",
         }),
@@ -115,4 +116,4 @@ __param(1, core_1.Query(tabpanel_1.TabPanel)),
     return TabView;
-})();
+}());
 exports.TabView = TabView;
 //# sourceMappingURL=tabview.js.map

components/terminal/terminal.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -81,3 +82,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-terminal',
-            template: "\n        <div [ngClass]=\"'ui-terminal ui-widget ui-widget-content ui-corner-all'\" [attr.style]=\"style\" [attr.styleClass]=\"styleClass\" (click)=\"focus(in)\">\n            <div *ngIf=\"welcomeMessage\">{{welcomeMessage}}</div>\n            <div class=\"ui-terminal-content\">\n                <div *ngFor=\"#command of commands\">\n                    <span>{{prompt}}</span>\n                    <span class=\"ui-terminal-command\">{{command.text}}</span>\n                    <div>{{command.response}}</div>\n                </div>\n            </div>\n            <div>\n                <span class=\"ui-terminal-content-prompt\">{{prompt}}</span>\n                <input #in type=\"text\" [(ngModel)]=\"command\" class=\"ui-terminal-input\" autocomplete=\"off\" (keydown)=\"handleCommand($event,container)\" autofocus>\n            </div>\n        </div>\n    ",
+            template: "\n        <div [ngClass]=\"'ui-terminal ui-widget ui-widget-content ui-corner-all'\" [attr.style]=\"style\" [attr.styleClass]=\"styleClass\" (click)=\"focus(in)\">\n            <div *ngIf=\"welcomeMessage\">{{welcomeMessage}}</div>\n            <div class=\"ui-terminal-content\">\n                <div *ngFor=\"let command of commands\">\n                    <span>{{prompt}}</span>\n                    <span class=\"ui-terminal-command\">{{command.text}}</span>\n                    <div>{{command.response}}</div>\n                </div>\n            </div>\n            <div>\n                <span class=\"ui-terminal-content-prompt\">{{prompt}}</span>\n                <input #in type=\"text\" [(ngModel)]=\"command\" class=\"ui-terminal-input\" autocomplete=\"off\" (keydown)=\"handleCommand($event,container)\" autofocus>\n            </div>\n        </div>\n    ",
             providers: [domhandler_1.DomHandler]
@@ -88,4 +89,4 @@ }),
     return Terminal;
-})();
+}());
 exports.Terminal = Terminal;
 //# sourceMappingURL=terminal.js.map

components/tieredmenu/tieredmenu.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -76,3 +77,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-tieredMenu',
-            template: "\n        <div [attr.class]=\"styleClass\" [attr.style]=\"style\" [ngClass]=\"{'ui-tieredmenu ui-menu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix':true}\">\n            <ng-content></ng-content>\n        </div>\n    "
+            template: "\n        <div [class]=\"styleClass\" [attr.style]=\"style\" [ngClass]=\"{'ui-tieredmenu ui-menu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix':true}\">\n            <ng-content></ng-content>\n        </div>\n    "
         }), 
@@ -82,4 +83,4 @@ __metadata('design:paramtypes', [core_1.ElementRef])
     return TieredMenu;
-})();
+}());
 exports.TieredMenu = TieredMenu;
 //# sourceMappingURL=tieredmenu.js.map

components/togglebutton/togglebutton.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -85,3 +86,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             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), 'ui-button-text-icon-left': (onIcon&&offIcon),\n                'ui-state-active': checked, 'ui-state-hover': hover&&!disabled, 'ui-state-disabled': disabled}\" [attr.style]=\"style\" [attr.class]=\"styleClass\" \n                (click)=\"toggle($event)\" (mouseenter)=\"hover=true\" (mouseleave)=\"hover=false\">\n            <span *ngIf=\"onIcon||offIcon\" [attr.class]=\"getIconClass()\"></span>\n            <span class=\"ui-button-text ui-unselectable-text\">{{checked ? onLabel : offLabel}}</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), 'ui-button-text-icon-left': (onIcon&&offIcon),\n                'ui-state-active': checked, 'ui-state-hover': hover&&!disabled, 'ui-state-disabled': disabled}\" [attr.style]=\"style\" [class]=\"styleClass\" \n                (click)=\"toggle($event)\" (mouseenter)=\"hover=true\" (mouseleave)=\"hover=false\">\n            <span *ngIf=\"onIcon||offIcon\" [class]=\"getIconClass()\"></span>\n            <span class=\"ui-button-text ui-unselectable-text\">{{checked ? onLabel : offLabel}}</span>\n        </div>\n    ",
             providers: [TOGGLEBUTTON_VALUE_ACCESSOR]
@@ -92,4 +93,4 @@ }),
     return ToggleButton;
-})();
+}());
 exports.ToggleButton = ToggleButton;
 //# sourceMappingURL=togglebutton.js.map

components/tree/tree.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -124,3 +125,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-tree',
-            template: "\n        <div [ngClass]=\"'ui-tree ui-widget ui-widget-content ui-corner-all'\" [attr.style]=\"style\" [attr.class]=\"styleClass\">\n            <ul class=\"ui-tree-container\">\n                <p-treeNode *ngFor=\"#node of value\" [node]=\"node\"></p-treeNode>\n            </ul>\n        </div>\n    ",
+            template: "\n        <div [ngClass]=\"'ui-tree ui-widget ui-widget-content ui-corner-all'\" [attr.style]=\"style\" [class]=\"styleClass\">\n            <ul class=\"ui-tree-container\">\n                <p-treeNode *ngFor=\"let node of value\" [node]=\"node\"></p-treeNode>\n            </ul>\n        </div>\n    ",
             directives: [uitreenode_1.UITreeNode]
@@ -131,4 +132,4 @@ }),
     return Tree;
-})();
+}());
 exports.Tree = Tree;
 //# sourceMappingURL=tree.js.map

components/tree/treenodetemplateloader.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -35,4 +36,4 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     return TreeNodeTemplateLoader;
-})();
+}());
 exports.TreeNodeTemplateLoader = TreeNodeTemplateLoader;
 //# sourceMappingURL=treenodetemplateloader.js.map

components/tree/uitreenode.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -54,3 +55,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-treeNode',
-            template: "\n        <li class=\"ui-treenode\" *ngIf=\"node\">\n            <div class=\"ui-treenode-content\" [ngClass]=\"{'ui-treenode-selectable': tree.selectionMode}\" \n                (mouseenter)=\"hover=true\" (mouseleave)=\"hover=false\" (click)=\"onNodeClick($event)\">\n                <span class=\"ui-tree-toggler fa fa-fw\" [ngClass]=\"{'fa-caret-right':!expanded,'fa-caret-down':expanded}\" *ngIf=\"!isLeaf()\"\n                        (click)=\"toggle($event)\"></span\n                ><span class=\"ui-treenode-leaf-icon\" *ngIf=\"isLeaf()\"></span\n                ><span [attr.class]=\"getIcon()\" *ngIf=\"node.icon||node.expandedIcon||node.collapsedIcon\"></span\n                ><span class=\"ui-treenode-label ui-corner-all\" \n                    [ngClass]=\"{'ui-state-hover':hover&&tree.selectionMode,'ui-state-highlight':isSelected()}\">\n                        <span *ngIf=\"!tree.template\">{{node.label}}</span>\n                        <p-treeNodeTemplateLoader [node]=\"node\" [template]=\"tree.template\" *ngIf=\"tree.template\"></p-treeNodeTemplateLoader>\n                    </span>\n            </div>\n            <ul class=\"ui-treenode-children\" style=\"display: none;\" *ngIf=\"node.children\" [style.display]=\"expanded ? 'block' : 'none'\">\n                <p-treeNode *ngFor=\"#childNode of node.children\" [node]=\"childNode\"></p-treeNode>\n            </ul>\n        </li>\n    ",
+            template: "\n        <li class=\"ui-treenode\" *ngIf=\"node\">\n            <div class=\"ui-treenode-content\" [ngClass]=\"{'ui-treenode-selectable': tree.selectionMode}\" \n                (mouseenter)=\"hover=true\" (mouseleave)=\"hover=false\" (click)=\"onNodeClick($event)\">\n                <span class=\"ui-tree-toggler fa fa-fw\" [ngClass]=\"{'fa-caret-right':!expanded,'fa-caret-down':expanded}\" *ngIf=\"!isLeaf()\"\n                        (click)=\"toggle($event)\"></span\n                ><span class=\"ui-treenode-leaf-icon\" *ngIf=\"isLeaf()\"></span\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-hover':hover&&tree.selectionMode,'ui-state-highlight':isSelected()}\">\n                        <span *ngIf=\"!tree.template\">{{node.label}}</span>\n                        <p-treeNodeTemplateLoader [node]=\"node\" [template]=\"tree.template\" *ngIf=\"tree.template\"></p-treeNodeTemplateLoader>\n                    </span>\n            </div>\n            <ul class=\"ui-treenode-children\" style=\"display: none;\" *ngIf=\"node.children\" [style.display]=\"expanded ? 'block' : 'none'\">\n                <p-treeNode *ngFor=\"let childNode of node.children\" [node]=\"childNode\"></p-treeNode>\n            </ul>\n        </li>\n    ",
             directives: [UITreeNode, treenodetemplateloader_1.TreeNodeTemplateLoader]
@@ -62,4 +63,4 @@ }),
     return UITreeNode;
-})();
+}());
 exports.UITreeNode = UITreeNode;
 //# sourceMappingURL=uitreenode.js.map

components/treetable/treetable.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -146,3 +147,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: 'p-treeTable',
-            template: "\n        <div [ngClass]=\"'ui-treetable ui-widget'\" [attr.style]=\"style\" [attr.class]=\"styleClass\">\n            <div class=\"ui-treetable-header ui-widget-header\" *ngIf=\"header\">\n                <ng-content select=\"header\"></ng-content>\n            </div>\n            <div class=\"ui-treetable-tablewrapper\">\n                <table class=\"ui-widget-content\" style=\"border:0 0 1px 0px\">\n                    <thead>\n                        <tr class=\"ui-state-default\">\n                            <th #headerCell *ngFor=\"#col of columns\" [attr.style]=\"col.style\" [attr.class]=\"col.styleClass\" \n                                [ngClass]=\"'ui-state-default ui-unselectable-text'\">\n                                <span class=\"ui-column-title\">{{col.header}}</span>\n                            </th>\n                        </tr>\n                    </thead>\n                    <tfoot *ngIf=\"hasFooter()\">\n                        <tr>\n                            <td *ngFor=\"#col of columns\" [attr.style]=\"col.style\" [attr.class]=\"col.styleClass\" [ngClass]=\"{'ui-state-default':true}\">{{col.footer}}</td>\n                        </tr>\n                    </tfoot>\n                    <tbody pTreeRow *ngFor=\"#node of value\" [node]=\"node\" [level]=\"0\"></tbody>\n                </table>\n            </div>\n            <div class=\"ui-treetable-footer ui-widget-header\" *ngIf=\"footer\">\n                <ng-content select=\"footer\"></ng-content>\n            </div>\n        </div>\n    ",
+            template: "\n        <div [ngClass]=\"'ui-treetable ui-widget'\" [attr.style]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-treetable-header ui-widget-header\" *ngIf=\"header\">\n                <ng-content select=\"header\"></ng-content>\n            </div>\n            <div class=\"ui-treetable-tablewrapper\">\n                <table class=\"ui-widget-content\" style=\"border:0 0 1px 0px\">\n                    <thead>\n                        <tr class=\"ui-state-default\">\n                            <th #headerCell *ngFor=\"let col of columns\" [attr.style]=\"col.style\" [class]=\"col.styleClass\" \n                                [ngClass]=\"'ui-state-default ui-unselectable-text'\">\n                                <span class=\"ui-column-title\">{{col.header}}</span>\n                            </th>\n                        </tr>\n                    </thead>\n                    <tfoot *ngIf=\"hasFooter()\">\n                        <tr>\n                            <td *ngFor=\"let col of columns\" [attr.style]=\"col.style\" [class]=\"col.styleClass\" [ngClass]=\"{'ui-state-default':true}\">{{col.footer}}</td>\n                        </tr>\n                    </tfoot>\n                    <tbody pTreeRow *ngFor=\"let node of value\" [node]=\"node\" [level]=\"0\"></tbody>\n                </table>\n            </div>\n            <div class=\"ui-treetable-footer ui-widget-header\" *ngIf=\"footer\">\n                <ng-content select=\"footer\"></ng-content>\n            </div>\n        </div>\n    ",
             directives: [uitreerow_1.UITreeRow]
@@ -153,4 +154,4 @@ }),
     return TreeTable;
-})();
+}());
 exports.TreeTable = TreeTable;
 //# sourceMappingURL=treetable.js.map

components/treetable/uitreerow.js

@@ -0,1 +1,2 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -49,3 +50,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
             selector: '[pTreeRow]',
-            template: "\n        <div class=\"ui-treetable-row\" [ngClass]=\"{'ui-state-hover':hover&&treeTable.selectionMode,'ui-state-highlight':isSelected(node)}\">\n            <td *ngFor=\"#col of treeTable.columns; #i=index\" [attr.style]=\"col.style\" [attr.class]=\"col.styleClass\"\n                (mouseenter)=\"hover=true\" (mouseleave)=\"hover=false\" (click)=\"onRowClick($event)\">\n                <span *ngIf=\"i==0\" class=\"ui-treetable-toggler fa fa-fw ui-c\" [ngClass]=\"{'fa-caret-down':expanded,'fa-caret-right':!expanded}\"\n                    [ngStyle]=\"{'margin-left':level*16 + 'px','visibility': isLeaf() ? 'hidden' : 'visible'}\"\n                    (click)=\"toggle($event)\"></span>\n                <span *ngIf=\"!col.template\">{{node.data[col.field]}}</span>\n                <p-columnTemplateLoader [column]=\"col\" [rowData]=\"node\" *ngIf=\"col.template\"></p-columnTemplateLoader>\n            </td>\n        </div>\n        <div *ngIf=\"node.children\" class=\"ui-treetable-row\" [style.display]=\"expanded ? 'table-row' : 'none'\">\n            <td [attr.colspan]=\"treeTable.columns.length\" class=\"ui-treetable-child-table-container\">\n                <table>\n                    <tbody pTreeRow *ngFor=\"#childNode of node.children\" [node]=\"childNode\" [level]=\"level+1\"></tbody>\n                </table>\n            </td>\n        </div>\n    ",
+            template: "\n        <div class=\"ui-treetable-row\" [ngClass]=\"{'ui-state-hover':hover&&treeTable.selectionMode,'ui-state-highlight':isSelected(node)}\">\n            <td *ngFor=\"let col of treeTable.columns; #i=index\" [attr.style]=\"col.style\" [class]=\"col.styleClass\"\n                (mouseenter)=\"hover=true\" (mouseleave)=\"hover=false\" (click)=\"onRowClick($event)\">\n                <span *ngIf=\"i==0\" class=\"ui-treetable-toggler fa fa-fw ui-c\" [ngClass]=\"{'fa-caret-down':expanded,'fa-caret-right':!expanded}\"\n                    [ngStyle]=\"{'margin-left':level*16 + 'px','visibility': isLeaf() ? 'hidden' : 'visible'}\"\n                    (click)=\"toggle($event)\"></span>\n                <span *ngIf=\"!col.template\">{{node.data[col.field]}}</span>\n                <p-columnTemplateLoader [column]=\"col\" [rowData]=\"node\" *ngIf=\"col.template\"></p-columnTemplateLoader>\n            </td>\n        </div>\n        <div *ngIf=\"node.children\" class=\"ui-treetable-row\" [style.display]=\"expanded ? 'table-row' : 'none'\">\n            <td [attr.colspan]=\"treeTable.columns.length\" class=\"ui-treetable-child-table-container\">\n                <table>\n                    <tbody pTreeRow *ngFor=\"let childNode of node.children\" [node]=\"childNode\" [level]=\"level+1\"></tbody>\n                </table>\n            </td>\n        </div>\n    ",
             directives: [UITreeRow, columntemplateloader_1.ColumnTemplateLoader]
@@ -57,4 +58,4 @@ }),
     return UITreeRow;
-})();
+}());
 exports.UITreeRow = UITreeRow;
 //# sourceMappingURL=uitreerow.js.map

package.json

 {
   "name": "primeng",
-  "version": "v1.0.0-beta.3",
+  "version": "v1.0.0-beta.4",
   "scripts": {
@@ -8,3 +8,3 @@ "tsc": "tsc",
     "lite": "lite-server",
-    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
+    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" "
   },
@@ -17,4 +17,4 @@ "repository": {
   "peerDependencies": {
-    "angular2": "^2.0.0-beta.15",
-    "primeui": "4.1.8"
+    "angular2": "2.0.0-beta.17",
+    "primeui": "4.1.9"
   },
@@ -24,5 +24,5 @@ "devDependencies": {
     "lite-server": "^2.2.0",
-    "typescript": "^1.8.9",
-    "typings": "^0.7.12"
+    "typescript": "^1.8.10",
+    "typings": "^0.8.1"
   }
 }

primeng.d.ts

@@ -70,3 +70,4 @@ export * from './components/api/lazyload';
 export * from './components/togglebutton/togglebutton';
+export * from './components/toolbar/toolbar';
 export * from './components/tree/tree';
 export * from './components/treetable/treetable';

primeng.js

@@ -0,9 +1,5 @@
+"use strict";
 function __export(m) {
     for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
 }
-__export(require('./components/api/lazyload'));
-__export(require('./components/api/message'));
-__export(require('./components/api/selectitem'));
-__export(require('./components/api/sortmeta'));
-__export(require('./components/api/treenode'));
 __export(require('./components/accordion/accordion'));
@@ -73,4 +69,5 @@ __export(require('./components/accordion/accordiontab'));
 __export(require('./components/togglebutton/togglebutton'));
+__export(require('./components/toolbar/toolbar'));
 __export(require('./components/tree/tree'));
 __export(require('./components/treetable/treetable'));
 //# sourceMappingURL=primeng.js.map

README.md

 # PrimeNG
 UI Components for AngularJS 2
 
-See  [PrimeNG homepage](http://www.primefaces.org/primeng) for live showcase and documentation.
+See [PrimeNG homepage](http://www.primefaces.org/primeng) for live showcase and documentation.
 
 ![alt text](http://www.primefaces.org/images/primeng.png "PrimeNG")
-
-Execute the following commands to run the showcase in your local environment. A browser window pops up with http:\\\\localhost:3000 address.
-
-```
-npm install      //install modules
-typings install  //install tsd files via typings
-tsc              //compile typescript files
-npm start        //start the server
-```
-
-When the server is started, it would be in development mode so that changing a file refreshes the browser. Changing a typescript file would compile
-it on save which in turn triggers a reload for the browser as well.
-
-For project plan, visit [roadmap](https://github.com/primefaces/primeng/wiki/Roadmap).

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

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

Number of package files

259

increased by3.6%

Lines of code

13707

increased by5.54%

Published versions last two months

11

increased by10%

Published versions last week

2

increased by100%

Worsened metrics

Total package byte prevSize

866280

decreased by-1.97%

Number of lines in readme file

7

decreased by-66.67%

Number of low supply chain risk alerts

17

increased by13.33%

No dependency changes