Merge pull request #1 from primefaces/master

get latest master

components/accordion/accordion.css

@@ -14,7 +14,7 @@
     padding: .5em .5em .5em 2em; 
 }
 
-.ui-accordion .ui-accordion-header .fa {
+.ui-accordion .ui-accordion-header>.fa {
     position: absolute; 
     left: .5em; 
     top: 50%; 

components/autocomplete/autocomplete.ts

@@ -41,6 +41,7 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
                         <span *ngIf="!itemTemplate">{{field ? option[field] : option}}</span>
                         <ng-template *ngIf="itemTemplate" [pTemplateWrapper]="itemTemplate" [item]="option" [index]="idx"></ng-template>
                     </li>
+                    <li *ngIf="noResults && emptyMessage" class="ui-autocomplete-list-item ui-corner-all">{{emptyMessage}}</li>
                 </ul>
             </div>
         </span>
@@ -107,6 +108,8 @@ export class AutoComplete implements AfterViewInit,AfterViewChecked,ControlValue
 
     @Input() dataKey: string;
 
+    @Input() emptyMessage: string;
+
     @ViewChild('in') inputEL: ElementRef;
 
     @ViewChild('multiIn') multiInputEL: ElementRef;
@@ -148,6 +151,8 @@ export class AutoComplete implements AfterViewInit,AfterViewChecked,ControlValue
     filled: boolean;
 
     inputClick: boolean;
+
+    noResults: boolean;
 
     constructor(public el: ElementRef, public domHandler: DomHandler, public renderer: Renderer, public objectUtils: ObjectUtils, public cd: ChangeDetectorRef) {}
 
@@ -157,9 +162,10 @@ export class AutoComplete implements AfterViewInit,AfterViewChecked,ControlValue
 
     set suggestions(val:any[]) {
         this._suggestions = val;
-
+                
         if(this.panelEL && this.panelEL.nativeElement) {
             if(this._suggestions && this._suggestions.length) {
+                this.noResults = false;
                 this.show();
                 this.suggestionsUpdated = true;
 
@@ -168,7 +174,15 @@ export class AutoComplete implements AfterViewInit,AfterViewChecked,ControlValue
                 }
             }
             else {
-                this.hide();
+                this.noResults = true;
+
+                if(this.emptyMessage) {    
+                    this.show();
+                    this.suggestionsUpdated = true;
+                }
+                else {
+                    this.hide();
+                }
             }
         }
     }

components/calendar/calendar.ts

@@ -1,4 +1,4 @@
-import {NgModule,Component,ElementRef,AfterViewInit,OnDestroy,OnInit,Input,Output,SimpleChange,EventEmitter,forwardRef,Renderer,ViewChild,ChangeDetectorRef} from '@angular/core';
+import {NgModule,Component,ElementRef,AfterViewInit,AfterViewChecked,OnDestroy,OnInit,Input,Output,SimpleChange,EventEmitter,forwardRef,Renderer,ViewChild,ChangeDetectorRef} from '@angular/core';
 import {trigger,state,style,transition,animate} from '@angular/animations';
 import {CommonModule} from '@angular/common';
 import {ButtonModule} from '../button/button';
@@ -32,7 +32,7 @@ export interface LocaleSettings {
         <span [ngClass]="{'ui-calendar':true,'ui-calendar-w-btn':showIcon}" [ngStyle]="style" [class]="styleClass">
             <ng-template [ngIf]="!inline">
                 <input #inputfield type="text" [attr.id]="inputId" [attr.required]="required" [value]="inputFieldValue" (focus)="onInputFocus(inputfield, $event)" (keydown)="onInputKeydown($event)" (click)="closeOverlay=false" (blur)="onInputBlur($event)"
-                    [readonly]="readonlyInput" (input)="onInput($event)" [ngStyle]="inputStyle" [class]="inputStyleClass" [placeholder]="placeholder||''" [disabled]="disabled" [attr.tabindex]="tabindex"
+                    [readonly]="readonlyInput" (input)="onUserInput($event)" [ngStyle]="inputStyle" [class]="inputStyleClass" [placeholder]="placeholder||''" [disabled]="disabled" [attr.tabindex]="tabindex"
                     [ngClass]="'ui-inputtext ui-widget ui-state-default ui-corner-all'"
                     ><button type="button" [icon]="icon" pButton *ngIf="showIcon" (click)="onButtonClick($event,inputfield)"
                     [ngClass]="{'ui-datepicker-trigger':true,'ui-state-disabled':disabled}" [disabled]="disabled"></button>
@@ -156,7 +156,7 @@ export interface LocaleSettings {
     },
     providers: [DomHandler,CALENDAR_VALUE_ACCESSOR,CALENDAR_VALIDATOR]
 })
-export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAccessor {
+export class Calendar implements AfterViewInit,AfterViewChecked,OnInit,OnDestroy,ControlValueAccessor {
 
     @Input() defaultDate: Date;
 
@@ -222,12 +222,16 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
 
     @Input() disabledDays: Array<number>;
 
+    @Input() utc: boolean;
+
     @Output() onFocus: EventEmitter<any> = new EventEmitter();
 
     @Output() onBlur: EventEmitter<any> = new EventEmitter();
 
     @Output() onSelect: EventEmitter<any> = new EventEmitter();
 
+    @Output() onInput: EventEmitter<any> = new EventEmitter();
+
     _locale: LocaleSettings = {
         firstDayOfWeek: 0,
         dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
@@ -241,6 +245,8 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
 
     @ViewChild('datepicker') overlayViewChild: ElementRef;
 
+    @ViewChild('inputfield') inputfieldViewChild: ElementRef;
+
     value: Date;
 
     dates: any[];
@@ -265,6 +271,8 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
 
     overlayVisible: boolean;
 
+    overlayShown: boolean;
+
     closeOverlay: boolean = true;
 
     dateClick: boolean;
@@ -374,6 +382,13 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
         }
     }
 
+    ngAfterViewChecked() {
+        if(this.overlayShown) {
+            this.alignOverlay();
+            this.overlayShown = false;
+        }
+    }
+
     createWeekDays() {
         this.weekDays = [];
         let dayIndex = this.locale.firstDayOfWeek;
@@ -512,7 +527,11 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
     }
 
     selectDate(dateMeta) {
-        this.value = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
+        if(this.utc)
+            this.value = new Date(Date.UTC(dateMeta.year, dateMeta.month, dateMeta.day));
+        else
+            this.value = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
+
         if(this.showTime) {
             if(this.hourFormat === '12' && this.pm && this.currentHour != 12)
                 this.value.setHours(this.currentHour + 12);
@@ -795,7 +814,7 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
         event.preventDefault();
     }
 
-    onInput(event) {  
+    onUserInput(event) {  
         let val = event.target.value;   
         try {
             this.value = this.parseValueFromString(val);
@@ -810,6 +829,7 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
 
         this.updateModel();
         this.filled = val != null && val.length;
+        this.onInput.emit(event);
     }
 
     parseValueFromString(text: string): Date {
@@ -874,16 +894,19 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
     }
 
     showOverlay(inputfield) {
-        if(this.appendTo)
-            this.domHandler.absolutePosition(this.overlay, inputfield);
-        else
-            this.domHandler.relativePosition(this.overlay, inputfield);
-
         this.overlayVisible = true;
+        this.overlayShown = true;
         this.overlay.style.zIndex = String(++DomHandler.zindex);
 
         this.bindDocumentClickListener();
     }
+
+    alignOverlay() {
+        if(this.appendTo)
+            this.domHandler.absolutePosition(this.overlay, this.inputfieldViewChild.nativeElement);
+        else
+            this.domHandler.relativePosition(this.overlay, this.inputfieldViewChild.nativeElement);
+    }
 
     writeValue(value: any) : void {
         this.value = value;

components/carousel/carousel.ts

@@ -1,12 +1,12 @@
-import {NgModule,Component,ElementRef,OnInit,AfterViewInit,AfterViewChecked,AfterContentInit,EventEmitter,OnDestroy,Input,Output,TemplateRef,ContentChildren,QueryList,Renderer} from '@angular/core';
+import {NgModule,Component,ElementRef,AfterViewInit,AfterViewChecked,AfterContentInit,EventEmitter,OnDestroy,Input,Output,TemplateRef,ContentChildren,QueryList,Renderer,ViewChild} from '@angular/core';
 import {DomHandler} from '../dom/domhandler';
 import {SharedModule,PrimeTemplate} from '../common/shared';
 import {CommonModule} from '@angular/common';
 
 @Component({
     selector: 'p-carousel',
     template: `
-        <div [ngClass]="{'ui-carousel ui-widget ui-widget-content ui-corner-all':true}" [ngStyle]="style" [class]="styleClass">
+        <div #container [ngClass]="{'ui-carousel ui-widget ui-widget-content ui-corner-all':true}" [ngStyle]="style" [class]="styleClass">
             <div class="ui-carousel-header ui-widget-header ui-corner-all">
                 <span class="ui-carousel-header-title">{{headerText}}</span>
                 <span class="ui-carousel-button ui-carousel-next-button fa fa-arrow-circle-right" (click)="onNextNav()" 
@@ -36,7 +36,7 @@ import {CommonModule} from '@angular/common';
     `,
     providers: [DomHandler]
 })
-export class Carousel implements OnInit,AfterViewChecked,AfterViewInit,OnDestroy{
+export class Carousel implements AfterViewChecked,AfterViewInit,OnDestroy{
 
     @Input() numVisible: number = 3;
 
@@ -64,6 +64,8 @@ export class Carousel implements OnInit,AfterViewChecked,AfterViewInit,OnDestroy
 
     @Output() onPage: EventEmitter<any> = new EventEmitter();
 
+    @ViewChild('container') containerViewChild: ElementRef;
+
     @ContentChildren(PrimeTemplate) templates: QueryList<any>;
 
     public _value: any[];
@@ -100,9 +102,7 @@ export class Carousel implements OnInit,AfterViewChecked,AfterViewInit,OnDestroy
 
     differ: any;
 
-    constructor(public el: ElementRef, public domHandler: DomHandler, public renderer: Renderer) {
-
-    }
+    constructor(public el: ElementRef, public domHandler: DomHandler, public renderer: Renderer) {}
 
     ngAfterContentInit() {
         this.templates.forEach((item) => {
@@ -138,35 +138,15 @@ export class Carousel implements OnInit,AfterViewChecked,AfterViewInit,OnDestroy
         }
 
         this.valuesChanged = true;
-
-        if(this.autoplayInterval) {
-            this.stopAutoplay();
-        }
-
-        this.updateMobileDropdown();
-        this.updateLinks();
-        this.updateDropdown();
     }
 
     ngAfterViewChecked() {
-        if(this.valuesChanged) {
+        if(this.valuesChanged && this.containerViewChild.nativeElement.offsetParent) {
             this.render();
             this.valuesChanged = false;
         }
     }
 
-    ngOnInit() {
-        if(window.innerWidth <= this.breakpoint) {
-            this.shrinked = true;
-            this.columns = 1;
-        }
-        else {
-            this.shrinked = false;
-            this.columns = this.numVisible;
-        }
-        this.page = Math.floor(this.firstVisible / this.columns);
-    }
-
     ngAfterViewInit() {
         this.container = this.el.nativeElement.children[0];
         this.viewport = this.domHandler.findSingle(this.el.nativeElement, 'div.ui-carousel-viewport');
@@ -177,10 +157,6 @@ export class Carousel implements OnInit,AfterViewChecked,AfterViewInit,OnDestroy
                 this.updateState();
             });
         }
-
-        if(this.value && this.value.length) {
-            this.render();
-        }
     }
 
     updateLinks() {
@@ -205,7 +181,12 @@ export class Carousel implements OnInit,AfterViewChecked,AfterViewInit,OnDestroy
     }
 
     render() {
+        if(this.autoplayInterval) {
+            this.stopAutoplay();
+        }
+
         this.items = this.domHandler.find(this.itemsContainer,'li');
+        this.calculateColumns();
         this.calculateItemWidths();
 
         if(!this.responsive) {
@@ -216,6 +197,10 @@ export class Carousel implements OnInit,AfterViewChecked,AfterViewInit,OnDestroy
             this.circular = true;
             this.startAutoplay();
         }
+
+        this.updateMobileDropdown();
+        this.updateLinks();
+        this.updateDropdown();
     }
 
     calculateItemWidths () {
@@ -227,6 +212,18 @@ export class Carousel implements OnInit,AfterViewChecked,AfterViewInit,OnDestroy
         }
     }
 
+    calculateColumns() {
+        if(window.innerWidth <= this.breakpoint) {
+            this.shrinked = true;
+            this.columns = 1;
+        }
+        else {
+            this.shrinked = false;
+            this.columns = this.numVisible;
+        }
+        this.page = Math.floor(this.firstVisible / this.columns);
+    }
+
     onNextNav() {
         let lastPage = (this.page === (this.totalPages - 1));
 

components/common/api.ts

@@ -42,6 +42,7 @@ export interface Message {
     severity?: string;
     summary?: string;
     detail?: string;
+    id?: any;
 }
 
 export interface SelectItem {

components/datagrid/datagrid.ts

@@ -15,7 +15,7 @@ import {BlockableUI} from '../common/api';
                 (onPageChange)="paginate($event)" styleClass="ui-paginator-bottom" [rowsPerPageOptions]="rowsPerPageOptions" *ngIf="paginator && paginatorPosition!='bottom' || paginatorPosition =='both'"></p-paginator>
             <div class="ui-datagrid-content ui-widget-content">
                 <div class="ui-g">
-                    <ng-template ngFor [ngForOf]="dataToRender" [ngForTemplate]="itemTemplate"></ng-template>
+                    <ng-template ngFor [ngForOf]="dataToRender" [ngForTemplate]="itemTemplate" [ngForTrackBy]="trackBy"></ng-template>
                     <div *ngIf="isEmpty()" class="ui-widget-content ui-g-12">{{emptyMessage}}</div>
                 </div>
             </div>
@@ -51,6 +51,8 @@ export class DataGrid implements AfterViewInit,AfterContentInit,BlockableUI {
 
     @Input() paginatorPosition: string = 'bottom';
 
+    @Input() trackBy: Function = (index: number, item: any) => item;
+
     @Output() onPage: EventEmitter<any> = new EventEmitter();
 
     @ContentChild(Header) header;

components/datalist/datalist.ts

@@ -16,7 +16,7 @@ import {BlockableUI} from '../common/api';
             <div class="ui-datalist-content ui-widget-content">
                 <div *ngIf="isEmpty()" class="ui-datalist-emptymessage">{{emptyMessage}}</div>
                 <ul class="ui-datalist-data">
-                    <li *ngFor="let item of dataToRender;let i = index">
+                    <li *ngFor="let item of dataToRender;let i = index;trackBy: trackBy">
                         <ng-template [pTemplateWrapper]="itemTemplate" [item]="item" [index]="i"></ng-template>
                     </li>
                 </ul>
@@ -53,6 +53,8 @@ export class DataList implements AfterViewInit,AfterContentInit,BlockableUI {
 
     @Input() emptyMessage: string = 'No records found';
 
+    @Input() trackBy: Function = (index: number, item: any) => item;
+
     @Output() onPage: EventEmitter<any> = new EventEmitter();
 
     @ContentChild(Header) header;