+
+ {{header}}
+
+
+
+
+
+ `,
+ animations: [
+ trigger('tabContent', [
+ state('hidden', style({
+ height: '0'
+ })),
+ state('visible', style({
+ height: '*'
+ })),
+ transition('visible <=> hidden', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+ ])
+ ]
+})
+export class AccordionTab {
+
+ @Input() header: string;
+
+ @Input() selected: boolean;
+
+ @Input() disabled: boolean;
+
+ @Output() selectedChange: EventEmitter
+
+
+
+ `,
+ providers: [DomHandler]
+})
+export class Carousel implements AfterViewChecked,AfterViewInit,OnDestroy{
+
+ @Input() numVisible: number = 3;
+
+ @Input() firstVisible: number = 0;
+
+ @Input() headerText: string;
+
+ @Input() circular: boolean = false;
+
+ @Input() breakpoint: number = 560;
+
+ @Input() responsive: boolean = true;
+
+ @Input() autoplayInterval: number = 0;
+
+ @Input() effectDuration: any = '1s';
+
+ @Input() easing: string = 'ease-out';
+
+ @Input() pageLinks: number = 3;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Output() onPage: EventEmitter
+
+
+ `
+})
+export class UIChart implements AfterViewInit, OnDestroy {
+
+ @Input() type: string;
+
+ @Input() options: any;
+
+ @Input() width: string;
+
+ @Input() height: string;
+
+ @Output() onDataSelect: EventEmitter
+
+
+ `,
+ providers: [CHECKBOX_VALUE_ACCESSOR]
+})
+export class Checkbox implements ControlValueAccessor {
+
+ @Input() value: any;
+
+ @Input() name: string;
+
+ @Input() disabled: boolean;
+
+ @Input() binary: string;
+
+ @Input() label: string;
+
+ @Input() tabindex: number;
+
+ @Input() inputId: string;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Output() onChange: EventEmitter
+
+
+
+
+
+ `,
+ providers: [DomHandler,CHIPS_VALUE_ACCESSOR]
+})
+export class Chips implements AfterContentInit,ControlValueAccessor {
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Input() disabled: boolean;
+
+ @Output() onAdd: EventEmitter-
+
-
+
+ {{field ? resolveFieldData(item,field) : item}}
+
+
+ - + + +
+
+
+
+
+
+ `,
+ animations: [
+ trigger('dialogState', [
+ state('hidden', style({
+ opacity: 0
+ })),
+ state('visible', style({
+ opacity: 1
+ })),
+ transition('visible => hidden', animate('400ms ease-in')),
+ transition('hidden => visible', animate('400ms ease-out'))
+ ])
+ ],
+ providers: [DomHandler]
+})
+export class ConfirmDialog implements AfterViewInit,OnDestroy {
+
+ @Input() header: string;
+
+ @Input() icon: string;
+
+ @Input() message: string;
+
+ @Input() acceptIcon: string = 'fa-check';
+
+ @Input() acceptLabel: string = 'Yes';
+
+ @Input() acceptVisible: boolean = true;
+
+ @Input() rejectIcon: string = 'fa-close';
+
+ @Input() rejectLabel: string = 'No';
+
+ @Input() rejectVisible: boolean = true;
+
+ @Input() width: any;
+
+ @Input() height: any;
+
+ @Input() closeOnEscape: boolean = true;
+
+ @Input() rtl: boolean;
+
+ @Input() closable: boolean = true;
+
+ @Input() responsive: boolean = true;
+
+ @Input() appendTo: any;
+
+ @Input() key: string;
+
+ @ContentChild(Footer) footer;
+
+ confirmation: Confirmation;
+
+ _visible: boolean;
+
+ documentEscapeListener: any;
+
+ documentResponsiveListener: any;
+
+ mask: any;
+
+ contentContainer: any;
+
+ positionInitialized: boolean;
+
+ subscription: Subscription;
+
+ constructor(public el: ElementRef, public domHandler: DomHandler,
+ public renderer: Renderer2, private confirmationService: ConfirmationService) {
+ this.subscription = confirmationService.requireConfirmation$.subscribe(confirmation => {
+ if(confirmation.key === this.key) {
+ this.confirmation = confirmation;
+ this.message = this.confirmation.message||this.message;
+ this.icon = this.confirmation.icon||this.icon;
+ this.header = this.confirmation.header||this.header;
+ this.rejectVisible = this.confirmation.rejectVisible == null ? this.rejectVisible : this.confirmation.rejectVisible;
+ this.acceptVisible = this.confirmation.acceptVisible == null ? this.acceptVisible : this.confirmation.acceptVisible;
+
+ if(this.confirmation.accept) {
+ this.confirmation.acceptEvent = new EventEmitter();
+ this.confirmation.acceptEvent.subscribe(this.confirmation.accept);
+ }
+
+ if(this.confirmation.reject) {
+ this.confirmation.rejectEvent = new EventEmitter();
+ this.confirmation.rejectEvent.subscribe(this.confirmation.reject);
+ }
+
+ this.visible = true;
+ }
+ });
+ }
+
+ @Input() get visible(): boolean {
+ return this._visible;
+ }
+
+ set visible(val:boolean) {
+ this._visible = val;
+
+ if(this._visible) {
+ if(!this.positionInitialized) {
+ this.center();
+ this.positionInitialized = true;
+ }
+
+ this.el.nativeElement.children[0].style.zIndex = ++DomHandler.zindex;
+ }
+
+ if(this._visible)
+ this.enableModality();
+ else
+ this.disableModality();
+ }
+
+ ngAfterViewInit() {
+ this.contentContainer = this.domHandler.findSingle(this.el.nativeElement, '.ui-dialog-content');
+
+ if(this.responsive) {
+ this.documentResponsiveListener = this.renderer.listen('window', 'resize', (event) => {
+ this.center();
+ });
+ }
+
+ if(this.closeOnEscape && this.closable) {
+ this.documentEscapeListener = this.renderer.listen('document', 'keydown', (event) => {
+ if(event.which == 27) {
+ if(this.el.nativeElement.children[0].style.zIndex == DomHandler.zindex) {
+ this.hide(event);
+ }
+ }
+ });
+ }
+
+ if(this.appendTo) {
+ if(this.appendTo === 'body')
+ document.body.appendChild(this.el.nativeElement);
+ else
+ this.domHandler.appendChild(this.el.nativeElement, this.appendTo);
+ }
+ }
+
+ center() {
+ let container = this.el.nativeElement.children[0];
+ let elementWidth = this.domHandler.getOuterWidth(container);
+ let 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';
+ }
+ let viewport = this.domHandler.getViewport();
+ let x = (viewport.width - elementWidth) / 2;
+ let y = (viewport.height - elementHeight) / 2;
+
+ container.style.left = x + 'px';
+ container.style.top = y + 'px';
+ }
+
+ enableModality() {
+ 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);
+ }
+ }
+
+ disableModality() {
+ if(this.mask) {
+ document.body.removeChild(this.mask);
+ this.mask = null;
+ }
+ }
+
+ hide(event?:Event) {
+ this.visible = false;
+
+ if(event) {
+ event.preventDefault();
+ }
+ }
+
+ moveOnTop() {
+ this.el.nativeElement.children[0].style.zIndex = ++DomHandler.zindex;
+ }
+
+ ngOnDestroy() {
+ this.disableModality();
+
+ if(this.documentResponsiveListener) {
+ this.documentResponsiveListener();
+ }
+
+ if(this.documentEscapeListener) {
+ this.documentEscapeListener();
+ }
+
+ if(this.appendTo && this.appendTo === 'body') {
+ document.body.removeChild(this.el.nativeElement);
+ }
+
+ this.subscription.unsubscribe();
+ }
+
+ accept() {
+ if(this.confirmation.acceptEvent) {
+ this.confirmation.acceptEvent.emit();
+ }
+
+ this.hide();
+ this.confirmation = null;
+ }
+
+ reject() {
+ if(this.confirmation.rejectEvent) {
+ this.confirmation.rejectEvent.emit();
+ }
+
+ this.hide();
+ this.confirmation = null;
+ }
+}
+
+@NgModule({
+ imports: [CommonModule,ButtonModule],
+ exports: [ConfirmDialog,ButtonModule,SharedModule],
+ declarations: [ConfirmDialog]
+})
+export class ConfirmDialogModule { }
\ No newline at end of file
diff --git a/src/app/components/contextmenu/contextmenu.ts b/src/app/components/contextmenu/contextmenu.ts
new file mode 100644
index 00000000000..87853b72531
--- /dev/null
+++ b/src/app/components/contextmenu/contextmenu.ts
@@ -0,0 +1,278 @@
+import {NgModule,Component,ElementRef,AfterViewInit,OnDestroy,Input,Output,Renderer2,EventEmitter,Inject,forwardRef,ViewChild} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {DomHandler} from '../dom/domhandler';
+import {MenuItem} from '../common/menuitem';
+import {Location} from '@angular/common';
+import {RouterModule} from '@angular/router';
+
+@Component({
+ selector: 'p-contextMenuSub',
+ template: `
+
+ `,
+ providers: [DomHandler]
+})
+export class ContextMenuSub {
+
+ @Input() item: MenuItem;
+
+ @Input() root: boolean;
+
+ constructor(public domHandler: DomHandler, @Inject(forwardRef(() => ContextMenu)) public contextMenu: ContextMenu) {}
+
+ activeItem: any;
+
+ containerLeft: any;
+
+ onItemMouseEnter(event, item, menuitem) {
+ if(menuitem.disabled) {
+ return;
+ }
+
+ this.activeItem = item;
+ let nextElement = item.children[0].nextElementSibling;
+ if(nextElement) {
+ let sublist = nextElement.children[0];
+ sublist.style.zIndex = ++DomHandler.zindex;
+ this.position(sublist, item);
+ }
+ }
+
+ onItemMouseLeave(event, link) {
+ this.activeItem = null;
+ }
+
+ itemClick(event, item: MenuItem) {
+ if(item.disabled) {
+ event.preventDefault();
+ return;
+ }
+
+ if(!item.url) {
+ event.preventDefault();
+ }
+
+ if(item.command) {
+ if(!item.eventEmitter) {
+ item.eventEmitter = new EventEmitter();
+ item.eventEmitter.subscribe(item.command);
+ }
+
+ item.eventEmitter.emit({
+ originalEvent: event,
+ item: item
+ });
+ }
+ }
+
+ listClick(event) {
+ this.activeItem = null;
+ }
+
+ position(sublist, item) {
+ this.containerLeft = this.domHandler.getOffset(item.parentElement)
+ let viewport = this.domHandler.getViewport();
+ let sublistWidth = sublist.offsetParent ? sublist.offsetWidth: this.domHandler.getHiddenElementOuterWidth(sublist);
+ let itemOuterWidth = this.domHandler.getOuterWidth(item.children[0]);
+
+ sublist.style.top = '0px';
+
+ if((parseInt(this.containerLeft.left) + itemOuterWidth + sublistWidth) > (viewport.width - this.calculateScrollbarWidth())) {
+ sublist.style.left = -sublistWidth + 'px';
+ }
+ else {
+ sublist.style.left = itemOuterWidth + 'px';
+ }
+ }
+
+ calculateScrollbarWidth(): number {
+ let scrollDiv = document.createElement("div");
+ scrollDiv.className = "ui-scrollbar-measure";
+ document.body.appendChild(scrollDiv);
+
+ let scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+ document.body.removeChild(scrollDiv);
+
+ return scrollbarWidth;
+ }
+}
+
+@Component({
+ selector: 'p-contextMenu',
+ template: `
+
+
+ `,
+ providers: [DomHandler]
+})
+export class ContextMenu implements AfterViewInit,OnDestroy {
+
+ @Input() model: MenuItem[];
+
+ @Input() global: boolean;
+
+ @Input() target: any;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Input() appendTo: any;
+
+ @ViewChild('container') containerViewChild: ElementRef;
+
+ container: HTMLDivElement;
+
+ visible: boolean;
+
+ documentClickListener: any;
+
+ rightClickListener: any;
+
+ constructor(public el: ElementRef, public domHandler: DomHandler, public renderer: Renderer2) {}
+
+ ngAfterViewInit() {
+ this.container =
+
+
+ `
+})
+export class DataGrid implements AfterViewInit,AfterContentInit,BlockableUI {
+
+ @Input() paginator: boolean;
+
+ @Input() rows: number;
+
+ @Input() totalRecords: number;
+
+ @Input() pageLinks: number = 5;
+
+ @Input() rowsPerPageOptions: number[];
+
+ @Input() lazy: boolean;
+
+ @Input() emptyMessage: string = 'No records found';
+
+ @Output() onLazyLoad: EventEmitter
+
+
+ `
+})
+export class DataList implements AfterViewInit,AfterContentInit,BlockableUI {
+
+ @Input() paginator: boolean;
+
+ @Input() rows: number;
+
+ @Input() totalRecords: number;
+
+ @Input() pageLinks: number = 5;
+
+ @Input() rowsPerPageOptions: number[];
+
+ @Input() lazy: boolean;
+
+ @Output() onLazyLoad: EventEmitter
+
+
+
+
+ `,
+ providers: [DomHandler]
+})
+export class DataScroller implements AfterViewInit,OnDestroy {
+
+ @Input() rows: number;
+
+ @Input() lazy: boolean;
+
+ @Output() onLazyLoad: EventEmitter
+
+
+ `
+})
+export class ScrollableView implements AfterViewInit,AfterViewChecked,OnDestroy {
+
+ constructor(@Inject(forwardRef(() => DataTable)) public dt:DataTable, public domHandler: DomHandler, public el: ElementRef, public renderer: Renderer2) {}
+
+ @Input("pScrollableView") columns: Column[];
+
+ @ViewChild('scrollHeader') scrollHeaderViewChild: ElementRef;
+
+ @ViewChild('scrollHeaderBox') scrollHeaderBoxViewChild: ElementRef;
+
+ @ViewChild('scrollBody') scrollBodyViewChild: ElementRef;
+
+ @ViewChild('scrollTable') scrollTableViewChild: ElementRef;
+
+ @ViewChild('scrollTableWrapper') scrollTableWrapperViewChild: ElementRef;
+
+ @ViewChild('scrollFooter') scrollFooterViewChild: ElementRef;
+
+ @ViewChild('scrollFooterBox') scrollFooterBoxViewChild: ElementRef;
+
+ @Input() frozen: boolean;
+
+ @Input() width: string;
+
+ @Input() virtualScroll: boolean;
+
+ @Output() onVirtualScroll: EventEmitter
+
+
+
+
+
+
+
+
+
+ `,
+ providers: [DomHandler,ObjectUtils]
+})
+export class DataTable implements AfterViewChecked,AfterViewInit,AfterContentInit,OnInit,OnDestroy,BlockableUI {
+
+ @Input() paginator: boolean;
+
+ @Input() rows: number;
+
+ @Input() totalRecords: number;
+
+ @Input() pageLinks: number = 5;
+
+ @Input() rowsPerPageOptions: number[];
+
+ @Input() responsive: boolean;
+
+ @Input() stacked: boolean;
+
+ @Input() selectionMode: string;
+
+ @Input() selection: any;
+
+ @Output() selectionChange: EventEmitter
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ animations: [
+ trigger('dialogState', [
+ state('hidden', style({
+ opacity: 0
+ })),
+ state('visible', style({
+ opacity: 1
+ })),
+ transition('visible => hidden', animate('400ms ease-in')),
+ transition('hidden => visible', animate('400ms ease-out'))
+ ])
+ ],
+ providers: [DomHandler]
+})
+export class Dialog implements AfterViewInit,OnDestroy {
+
+ @Input() header: string;
+
+ @Input() draggable: boolean = true;
+
+ @Input() resizable: boolean = true;
+
+ @Input() minWidth: number = 150;
+
+ @Input() minHeight: number = 150;
+
+ @Input() width: any;
+
+ @Input() height: any;
+
+ @Input() positionLeft: number;
+
+ @Input() positionTop: number;
+
+ @Input() contentStyle: any;
+
+ @Input() modal: boolean;
+
+ @Input() closeOnEscape: boolean = true;
+
+ @Input() dismissableMask: boolean;
+
+ @Input() rtl: boolean;
+
+ @Input() closable: boolean = true;
+
+ @Input() responsive: boolean = true;
+
+ @Input() appendTo: any;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Input() showHeader: boolean = true;
+
+ @Input() breakpoint: number = 640;
+
+ @ContentChild(Header) headerFacet;
+
+ @ContentChild(Footer) footerFacet;
+
+ @ViewChild('container') containerViewChild: ElementRef;
+
+ @ViewChild('titlebar') headerViewChild: ElementRef;
+
+ @ViewChild('content') contentViewChild: ElementRef;
+
+ @Output() onShow: EventEmitter
+
+ `,
+ animations: [
+ trigger('panelState', [
+ state('hidden', style({
+ opacity: 0
+ })),
+ state('visible', style({
+ opacity: 1
+ })),
+ transition('visible => hidden', animate('400ms ease-in')),
+ transition('hidden => visible', animate('400ms ease-out'))
+ ])
+ ],
+ providers: [DomHandler,ObjectUtils,DROPDOWN_VALUE_ACCESSOR]
+})
+export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterViewChecked,OnDestroy,ControlValueAccessor {
+
+ @Input() scrollHeight: string = '200px';
+
+ @Input() filter: boolean;
+
+ @Input() style: any;
+
+ @Input() panelStyle: any;
+
+ @Input() styleClass: string;
+
+ @Input() panelStyleClass: string;
+
+ @Input() disabled: boolean;
+
+ @Input() readonly: boolean;
+
+ @Input() autoWidth: boolean = true;
+
+ @Input() required: boolean;
+
+ @Input() editable: boolean;
+
+ @Input() appendTo: any;
+
+ @Input() tabindex: number;
+
+ @Input() placeholder: string;
+
+ @Input() filterPlaceholder: string;
+
+ @Input() inputId: string;
+
+ @Input() dataKey: string;
+
+ @Output() onChange: EventEmitter
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ providers: [DomHandler,EDITOR_VALUE_ACCESSOR]
+})
+export class Editor implements AfterViewInit,ControlValueAccessor {
+
+ @Output() onTextChange: EventEmitter
+
+
+ `
+})
+export class FileUpload implements OnInit,AfterContentInit {
+
+ @Input() name: string;
+
+ @Input() url: string;
+
+ @Input() method: string = 'POST';
+
+ @Input() multiple: boolean;
+
+ @Input() accept: string;
+
+ @Input() disabled: boolean;
+
+ @Input() auto: boolean;
+
+ @Input() withCredentials: boolean;
+
+ @Input() maxFileSize: number;
+
+ @Input() invalidFileSizeMessageSummary: string = '{0}: Invalid file size, ';
+
+ @Input() invalidFileSizeMessageDetail: string = 'maximum upload size is {0}.';
+
+ @Input() invalidFileTypeMessageSummary: string = '{0}: Invalid file type, ';
+
+ @Input() invalidFileTypeMessageDetail: string = 'allowed file types: {0}.';
+
+ @Input() style: string;
+
+ @Input() styleClass: string;
+
+ @Input() previewWidth: number = 50;
+
+ @Input() chooseLabel: string = 'Choose';
+
+ @Input() uploadLabel: string = 'Upload';
+
+ @Input() cancelLabel: string = 'Cancel';
+
+ @Output() onBeforeUpload: EventEmitter
+
+
+
+
+
+
+
+ ![]()
+
+ {{file.name}}
+ {{formatSize(file.size)}}
+
+
+
+
+
+ `,
+ providers: [DomHandler]
+})
+export class Galleria implements AfterViewChecked,AfterViewInit,OnDestroy {
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Input() panelWidth: number = 600;
+
+ @Input() panelHeight: number = 400;
+
+ @Input() frameWidth: number = 60;
+
+ @Input() frameHeight: number = 40;
+
+ @Input() activeIndex: number = 0;
+
+ @Input() showFilmstrip: boolean = true;
+
+ @Input() autoPlay: boolean = true;
+
+ @Input() transitionInterval: number = 4000;
+
+ @Input() showCaption: boolean = true;
+
+ @Output() onImageClicked = new EventEmitter();
+
+ _images: any[];
+
+ slideshowActive: boolean;
+
+ public container: any;
+
+ public panelWrapper: any;
+
+ public panels: any;
+
+ public caption: any;
+
+ public stripWrapper: any;
+
+ public strip: any;
+
+ public frames: any;
+
+ public interval: any;
+
+ public stripLeft: number = 0;
+
+ public imagesChanged: boolean;
+
+ public initialized: boolean;
+
+ constructor(public el: ElementRef, public domHandler: DomHandler) {}
+
+ ngAfterViewChecked() {
+ if(this.imagesChanged) {
+ this.stopSlideshow();
+ this.render();
+ this.imagesChanged = false;
+ }
+ }
+
+ @Input() get images(): any[] {
+ return this._images;
+ }
+
+ set images(value:any[]) {
+ this._images = value;
+ this.activeIndex = 0;
+ this.imagesChanged = true;
+ }
+
+ ngAfterViewInit() {
+ 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();
+ }
+ }
+
+ render() {
+ this.panels = this.domHandler.find(this.panelWrapper, 'li.ui-galleria-panel');
+
+ if(this.showFilmstrip) {
+ this.frames = this.domHandler.find(this.strip,'li.ui-galleria-frame');
+ 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';
+ }
+
+ startSlideshow() {
+ this.interval = setInterval(() => {
+ this.next();
+ }, this.transitionInterval);
+
+ this.slideshowActive = true;
+ }
+
+ stopSlideshow() {
+ if(this.interval) {
+ clearInterval(this.interval);
+ }
+
+ this.slideshowActive = false;
+ }
+
+ clickNavRight() {
+ if(this.slideshowActive) {
+ this.stopSlideshow();
+ }
+ this.next();
+ }
+
+ clickNavLeft() {
+ if(this.slideshowActive) {
+ this.stopSlideshow();
+ }
+ this.prev();
+ }
+
+ frameClick(frame) {
+ if(this.slideshowActive) {
+ this.stopSlideshow();
+ }
+
+ this.select(this.domHandler.index(frame), false);
+ }
+
+ prev() {
+ if(this.activeIndex !== 0) {
+ this.select(this.activeIndex - 1, true);
+ }
+ }
+
+ next() {
+ if(this.activeIndex !== (this.panels.length-1)) {
+ this.select(this.activeIndex + 1, true);
+ }
+ else {
+ this.select(0, false);
+ this.stripLeft = 0;
+ }
+ }
+
+ select(index, reposition) {
+ if(index !== this.activeIndex) {
+ let oldPanel = this.panels[this.activeIndex],
+ newPanel = this.panels[index];
+
+ this.domHandler.fadeIn(newPanel, 500);
+
+ if(this.showFilmstrip) {
+ let oldFrame = this.frames[this.activeIndex],
+ newFrame = this.frames[index];
+
+ if(reposition === undefined || reposition === true) {
+ let 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;
+ }
+ }
+
+ clickImage(event, image, i) {
+ this.onImageClicked.emit({originalEvent: event, image: image, index: i})
+ }
+
+ ngOnDestroy() {
+ this.stopSlideshow();
+ }
+
+}
+
+@NgModule({
+ imports: [CommonModule],
+ exports: [Galleria],
+ declarations: [Galleria]
+})
+export class GalleriaModule { }
\ No newline at end of file
diff --git a/src/app/components/gmap/gmap.ts b/src/app/components/gmap/gmap.ts
new file mode 100644
index 00000000000..88d3dae32b6
--- /dev/null
+++ b/src/app/components/gmap/gmap.ts
@@ -0,0 +1,143 @@
+import {NgModule,Component,ElementRef,OnInit,AfterViewInit,DoCheck,OnDestroy,Input,Output,EventEmitter,IterableDiffers,ChangeDetectorRef,NgZone} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+declare var google: any;
+
+@Component({
+ selector: 'p-gmap',
+ template: ``
+})
+export class GMap implements AfterViewInit,DoCheck {
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Input() options: any;
+
+ @Input() overlays: any[];
+
+ @Output() onMapClick: EventEmitter-
+
-
+
+
+
+
+
+
+ -
+
-
+ ++
+
+
+
+ {{images[activeIndex]?.title}}
{{images[activeIndex]?.alt}}
+
+
+ `,
+ providers: [DomHandler]
+})
+export class Growl implements AfterViewInit,OnDestroy {
+
+ @Input() sticky: boolean = false;
+
+ @Input() life: number = 3000;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Output() onClose: EventEmitter
+
+
+
+
+
+
+
+
+
+ `
+})
+export class Inplace {
+
+ @Input() active: boolean;
+
+ @Input() closable: boolean;
+
+ @Input() disabled: boolean;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Output() onActivate: EventEmitter
+
+
+
+
+
+ `,
+ providers: [INPUTSWITCH_VALUE_ACCESSOR,DomHandler]
+})
+export class InputSwitch implements ControlValueAccessor,AfterViewInit,AfterViewChecked {
+
+ @Input() onLabel: string = 'On';
+
+ @Input() offLabel: string = 'Off';
+
+ @Input() disabled: boolean;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Input() tabindex: number;
+
+ @Input() inputId: string;
+
+ @Output() onChange: EventEmitter
+ {{offLabel}}
+
+
+ {{onLabel}}
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+ `,
+ providers: [DomHandler,ObjectUtils,LISTBOX_VALUE_ACCESSOR]
+})
+export class Listbox implements AfterContentInit,ControlValueAccessor {
+
+ @Input() options: SelectItem[];
+
+ @Input() multiple: boolean;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Input() disabled: boolean;
+
+ @Input() checkbox: boolean = false;
+
+ @Input() filter: boolean = false;
+
+ @Input() metaKeySelection: boolean = true;
+
+ @Input() dataKey: string;
+
+ @Output() onChange: EventEmitter-
+
-
+
+ {{option.label}}
+
+
+
+
+
+ `,
+ providers: [DomHandler]
+})
+export class MegaMenu implements OnDestroy {
+
+ @Input() model: MenuItem[];
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Input() orientation: string = 'horizontal';
+
+ activeItem: any;
+
+ constructor(public el: ElementRef, public domHandler: DomHandler, public renderer: Renderer2) {}
+
+ onItemMouseEnter(event, item, menuitem: MenuItem) {
+ if(menuitem.disabled) {
+ return;
+ }
+
+ this.activeItem = item;
+ let submenu = item.children[0].nextElementSibling;
+ if(submenu) {
+ submenu.style.zIndex = ++DomHandler.zindex;
+
+ if(this.orientation === 'horizontal') {
+ submenu.style.top = this.domHandler.getOuterHeight(item.children[0]) + 'px';
+ submenu.style.left = '0px';
+ }
+ else if(this.orientation === 'vertical') {
+ submenu.style.top = '0px';
+ submenu.style.left = this.domHandler.getOuterWidth(item.children[0]) + 'px';
+ }
+ }
+ }
+
+ onItemMouseLeave(event, link) {
+ this.activeItem = null;
+ }
+
+ itemClick(event, item: MenuItem) {
+ if(item.disabled) {
+ event.preventDefault();
+ return;
+ }
+
+ if(!item.url) {
+ event.preventDefault();
+ }
+
+ if(item.command) {
+ if(!item.eventEmitter) {
+ item.eventEmitter = new EventEmitter();
+ item.eventEmitter.subscribe(item.command);
+ }
+
+ item.eventEmitter.emit({
+ originalEvent: event,
+ item: item
+ });
+ }
+
+ this.activeItem = null;
+ }
+
+ unsubscribe(item: any) {
+ if(item.eventEmitter) {
+ item.eventEmitter.unsubscribe();
+ }
+
+ if(item.items) {
+ for(let childItem of item.items) {
+ this.unsubscribe(childItem);
+ }
+ }
+ }
+
+ ngOnDestroy() {
+ if(this.model) {
+ for(let item of this.model) {
+ this.unsubscribe(item);
+ }
+ }
+ }
+
+ getColumnClass(menuitem: MenuItem) {
+ let length = menuitem.items ? menuitem.items.length: 0;
+ let columnClass;
+ switch(length) {
+ case 2:
+ columnClass= 'ui-g-6';
+ break;
+
+ case 3:
+ columnClass= 'ui-g-4';
+ break;
+
+ case 4:
+ columnClass= 'ui-g-3';
+ break;
+
+ case 6:
+ columnClass= 'ui-g-2';
+ break;
+
+ default:
+ columnClass= 'ui-g-12';
+ break;
+ }
+
+ return columnClass;
+ }
+}
+
+@NgModule({
+ imports: [CommonModule,RouterModule],
+ exports: [MegaMenu,RouterModule],
+ declarations: [MegaMenu]
+})
+export class MegaMenuModule { }
\ No newline at end of file
diff --git a/src/app/components/menu/menu.css b/src/app/components/menu/menu.css
new file mode 100644
index 00000000000..e7a74dbc9f4
--- /dev/null
+++ b/src/app/components/menu/menu.css
@@ -0,0 +1,302 @@
+.ui-menu {
+ width: 12.5em;
+ padding: .25em;
+ position:relative;
+}
+
+.ui-menu.ui-menu-dynamic {
+ position: absolute;
+ display: none;
+ z-index: 100000;
+}
+
+.ui-menu-list {
+ position: static;
+}
+
+.ui-menu .ui-menu-list .ui-menuitem {
+ border: none;
+}
+
+.ui-menu .ui-menu-list .ui-widget-header {
+ clear:both;
+ float:left;
+ width: 100%;
+ margin: .125em 0;
+ padding: .25em .5em;
+}
+
+.ui-menu .ui-menuitem-parent,
+.ui-menu .ui-menuitem {
+ width: 100%;
+ clear: both;
+ margin: .125em 0;
+ padding: 0;
+}
+
+.ui-menu .ui-menuitem-link {
+ display: block;
+ width: 100%;
+ outline: none;
+ text-decoration: none;
+ font-weight: normal;
+ border: 1px solid transparent;
+ line-height: 1em;
+ padding: .25em;
+ cursor: pointer;
+}
+
+.ui-menu .ui-menuitem-link .ui-menuitem-icon {
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.ui-menu .ui-menuitem-text {
+ vertical-align: middle;
+}
+
+.ui-menu .ui-widget-header h1,
+.ui-menu .ui-widget-header h2,
+.ui-menu .ui-widget-header h3,
+.ui-menu .ui-widget-header h4,
+.ui-menu .ui-widget-header h5,
+.ui-menu .ui-widget-header h6 {
+ font-size: 1em;
+ margin: 0 auto;
+}
+
+/* Tiered Menu */
+.ui-menu .ui-menu-parent .ui-menu-child {
+ display: none;
+ width: 12.5em;
+ padding: .25em;
+ position:absolute;
+ margin: 0;
+ outline: 0;
+ text-decoration:none;
+ list-style:none;
+}
+
+.ui-menu .ui-menu-parent {
+ position: relative;
+}
+
+.ui-menu .ui-menu-parent .ui-submenu-icon {
+ float: right;
+ margin-right: -.25em;
+}
+
+/** MenuButton **/
+.ui-menubutton {
+ padding: 0;
+}
+
+.ui-menubutton .ui-button {
+ margin: 0;
+}
+
+/** Menubar **/
+.ui-menu.ui-menubar .ui-menubar-root-list > li > a > .ui-submenu-icon {
+ float: none;
+}
+
+.ui-menubar {
+ width:auto;
+}
+
+.ui-menubar .ui-menubar-root-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.ui-menubar .ui-menubar-root-list > .ui-menuitem {
+ display: inline-block;
+ width: auto;
+}
+
+.ui-menubar .ui-menu-child .ui-menuitem {
+ width: 100%;
+}
+
+.ui-menubar .ui-menubar-options {
+ float: right;
+}
+
+/** SlideMenu **/
+.ui-slidemenu .ui-slidemenu-wrapper {
+ position: relative;
+}
+
+.ui-slidemenu .ui-slidemenu-content {
+ overflow-x: hidden;
+ overflow-y: auto;
+ position: relative;
+}
+
+.ui-slidemenu .ui-menu-list {
+ position: absolute;
+ top: 0;
+}
+
+.ui-slidemenu .ui-menu-parent {
+ position: static;
+}
+
+.ui-slidemenu .ui-menu-child {
+ box-shadow : none;
+ border: 0 none;
+ background: none repeat scroll 0 0 transparent;
+}
+
+.ui-slidemenu-backward {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ padding: 0.2em;
+ cursor: pointer;
+ display: none;
+}
+
+.ui-slidemenu-backward .fa {
+ vertical-align: middle;
+}
+
+.ui-slidemenu-backward span {
+ vertical-align: middle;
+}
+
+.ui-slidemenu .ui-slidemenuitem-active > .ui-submenu > ul {
+ display: block !important;
+}
+
+/** MegaMenu **/
+.ui-megamenu .ui-g {
+ flex-wrap: nowrap;
+}
+
+.ui-megamenu .ui-megamenu-panel.ui-menu-child {
+ width: auto;
+}
+
+.ui-megamenu .ui-megamenu-panel .ui-menu-list {
+ width: 12.5em;
+}
+
+.ui-megamenu-vertical {
+ width: 12.5em;
+}
+
+.ui-megamenu-vertical .ui-menuitem-link,
+.ui-megamenu-vertical .ui-menu-list .ui-menuitem {
+ width: 100%;
+ box-sizing: border-box;
+}
+
+.ui-megamenu-vertical > .ui-menubar-root-list > .ui-menuitem > .ui-menuitem-link > .ui-submenu-icon {
+ float: right;
+}
+
+/** PanelMenu **/
+.ui-panelmenu {
+ width: auto;
+}
+
+.ui-panelmenu .ui-panelmenu-panel {
+ padding: 0;
+ margin: 0;
+}
+
+.ui-panelmenu .ui-panelmenu-header {
+ cursor: pointer;
+ position: relative;
+ margin: -1px 0 0 0;
+ zoom: 1;
+}
+
+.ui-panelmenu .ui-panelmenu-header a {
+ display: block;
+ padding: .25em .5em;
+}
+
+.ui-panelmenu span {
+ vertical-align: middle;
+}
+
+.ui-panelmenu .fa {
+ width: 1em;
+ text-align: center;
+ vertical-align: middle;
+ margin-right: .25em;
+}
+
+.ui-panelmenu .ui-menuitem-text {
+ margin-left: .125em;
+}
+
+.ui-panelmenu span {
+ vertical-align: middle;
+}
+
+.ui-panelmenu .ui-panelmenu-content {
+ padding: 0.2em 0;
+ border-top: 0;
+ overflow: auto;
+ zoom: 1;
+ outline: none;
+ margin-bottom: 1px;
+}
+
+.ui-panelmenu .ui-panelmenu-content-wrapper {
+ box-sizing: border-box;
+}
+
+.ui-panelmenu .ui-panelmenu-content-wrapper-overflown {
+ overflow: hidden;
+}
+
+.ui-panelmenu .ui-panelmenu-header.ui-state-disabled,
+.ui-panelmenu .ui-panelmenu-header.ui-state-disabled a {
+ cursor: default;
+}
+
+.ui-panelmenu .ui-menu-list {
+ position: static;
+}
+
+.ui-panelmenu .ui-menuitem {
+ margin: 1px 0;
+ padding: 0;
+}
+
+.ui-panelmenu .ui-menuitem-link {
+ display: block;
+ outline: none;
+ text-decoration: none;
+ font-weight: normal;
+ border: 1px solid transparent;
+ line-height: 1em;
+ cursor: pointer;
+ position: relative;
+ padding: .25em .5em;
+}
+
+.ui-panelmenu .ui-menu-parent .ui-menu-list {
+ margin-left: 1.5em;
+}
+
+/** MegaMenu and TieredMenus **/
+.ui-menuitem-active > .ui-submenu > ul,
+.ui-menuitem-active > .ui-megamenu-panel {
+ display: block !important;
+}
+
+.ui-menuitem-outline {
+ outline: 1px dotted;
+ z-index: 1;
+}
+
+/** Fluid **/
+.ui-fluid .ui-menu {
+ width: 100%;
+}
\ No newline at end of file
diff --git a/src/app/components/menu/menu.ts b/src/app/components/menu/menu.ts
new file mode 100644
index 00000000000..268115e0f92
--- /dev/null
+++ b/src/app/components/menu/menu.ts
@@ -0,0 +1,194 @@
+import {NgModule,Component,ElementRef,AfterViewInit,OnDestroy,Input,Output,Renderer2,HostListener,EventEmitter,ViewChild} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {DomHandler} from '../dom/domhandler';
+import {MenuItem} from '../common/menuitem';
+import {RouterModule} from '@angular/router';
+
+@Component({
+ selector: 'p-menu',
+ template: `
+
+
+
+ `,
+ providers: [DomHandler],
+ host: {'(window:resize)': 'onResize($event)'}
+})
+export class Menu implements AfterViewInit,OnDestroy {
+
+ @Input() model: MenuItem[];
+
+ @Input() popup: boolean;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Input() appendTo: any;
+
+ @ViewChild('container') containerViewChild: ElementRef;
+
+ container: HTMLDivElement;
+
+ documentClickListener: any;
+
+ preventDocumentDefault: any;
+
+ onResizeTarget: any;
+
+ constructor(public el: ElementRef, public domHandler: DomHandler, public renderer: Renderer2) {}
+
+ ngAfterViewInit() {
+ this.container =
+
+ `,
+ providers: [DomHandler]
+})
+export class Menubar implements OnDestroy {
+
+ @Input() model: MenuItem[];
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ constructor(public el: ElementRef, public domHandler: DomHandler, public renderer: Renderer2) {}
+
+ unsubscribe(item: any) {
+ if(item.eventEmitter) {
+ item.eventEmitter.unsubscribe();
+ }
+
+ if(item.items) {
+ for(let childItem of item.items) {
+ this.unsubscribe(childItem);
+ }
+ }
+ }
+
+ ngOnDestroy() {
+ if(this.model) {
+ for(let item of this.model) {
+ this.unsubscribe(item);
+ }
+ }
+ }
+
+}
+
+@NgModule({
+ imports: [CommonModule,RouterModule],
+ exports: [Menubar,RouterModule],
+ declarations: [Menubar,MenubarSub]
+})
+export class MenubarModule { }
\ No newline at end of file
diff --git a/src/app/components/messages/messages.css b/src/app/components/messages/messages.css
new file mode 100644
index 00000000000..d1b03b80f38
--- /dev/null
+++ b/src/app/components/messages/messages.css
@@ -0,0 +1,73 @@
+.ui-messages {
+ border: 1px solid;
+ margin: .5em 0;
+ padding: 1em 1em 1em .5em;
+ display: none;
+ position: relative;
+}
+
+.ui-messages-icon {
+ display:inline-block;
+ padding: 0;
+ vertical-align: middle;
+}
+
+.ui-messages-summary {
+ font-weight: bold;
+ margin-left: .25em;
+}
+
+.ui-messages-detail {
+ margin-left: .25em;
+}
+
+.ui-messages-success {
+ color: #ffffff;
+ background-color: #4CAF50;
+ border-color: #4CAF50;
+}
+
+.ui-messages-info {
+ color: #ffffff;
+ background-color: #2196f3;
+ border-color: #2196f3;
+}
+
+.ui-messages-warn {
+ color: #ffffff;
+ background-color: #FFB300;
+ border-color: #FFB300;
+}
+
+.ui-messages-error {
+ color: #ffffff;
+ background-color: #f44336;
+ border-color: #f44336;
+}
+
+.ui-messages ul {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.ui-messages.ui-messages-noicon ul {
+ margin: 0 1.5em 0 0;
+}
+
+.ui-messages .ui-messages-close {
+ color: #ffffff;
+ cursor: pointer;
+ position: absolute;
+ top: 5px;
+ right: 5px;
+}
+
+/* Message */
+.ui-message {
+ border: 1px solid;
+ margin: 0px .25em;
+ padding: .125em .25em;
+}
\ No newline at end of file
diff --git a/src/app/components/messages/messages.ts b/src/app/components/messages/messages.ts
new file mode 100644
index 00000000000..2f01b9909f2
--- /dev/null
+++ b/src/app/components/messages/messages.ts
@@ -0,0 +1,89 @@
+import {NgModule,Component,Input,Output,EventEmitter} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {Message} from '../common/message';
+
+@Component({
+ selector: 'p-messages',
+ template: `
+
+ `
+})
+export class Messages {
+
+ @Input() value: Message[];
+
+ @Input() closable: boolean = true;
+
+ @Output() valueChange: EventEmitter
+
+ `,
+ providers: [DomHandler,ObjectUtils,MULTISELECT_VALUE_ACCESSOR]
+})
+export class MultiSelect implements OnInit,AfterViewInit,AfterViewChecked,DoCheck,OnDestroy,ControlValueAccessor {
+
+ @Input() options: SelectItem[];
+
+ @Output() onChange: EventEmitter
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ providers: [DomHandler]
+})
+export class OrderList implements AfterViewChecked,AfterContentInit {
+
+ @Input() value: any[];
+
+ @Input() header: string;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Input() listStyle: any;
+
+ @Input() responsive: boolean;
+
+ @Input() metaKeySelection: boolean = true;
+
+ @Output() onReorder: EventEmitter
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ providers: [DomHandler]
+})
+export class OverlayPanel implements OnInit,AfterViewInit,OnDestroy {
+
+ @Input() dismissable: boolean = true;
+
+ @Input() showCloseIcon: boolean;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Input() appendTo: any;
+
+ @Output() onBeforeShow: EventEmitter
+
+
+ `,
+ animations: [
+ trigger('panelContent', [
+ state('hidden', style({
+ height: '0'
+ })),
+ state('visible', style({
+ height: '*'
+ })),
+ transition('visible <=> hidden', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+ ])
+ ]
+})
+export class Panel implements BlockableUI {
+
+ @Input() toggleable: boolean;
+
+ @Input() header: string;
+
+ @Input() collapsed: boolean = false;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Input() expandIcon: string = 'fa-plus';
+
+ @Input() collapseIcon: string = 'fa-minus';
+
+ @Output() collapsedChange: EventEmitter
+
+
+
+
+
+ `,
+ animations: [
+ trigger('rootItem', [
+ state('hidden', style({
+ height: '0px'
+ })),
+ state('visible', style({
+ height: '*'
+ })),
+ transition('visible => hidden', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
+ transition('hidden => visible', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+ ])
+ ]
+})
+export class PanelMenu extends BasePanelMenuItem {
+
+ @Input() model: MenuItem[];
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ public animating: boolean;
+
+ unsubscribe(item: any) {
+ if(item.eventEmitter) {
+ item.eventEmitter.unsubscribe();
+ }
+
+ if(item.items) {
+ for(let childItem of item.items) {
+ this.unsubscribe(childItem);
+ }
+ }
+ }
+
+ ngOnDestroy() {
+ if(this.model) {
+ for(let item of this.model) {
+ this.unsubscribe(item);
+ }
+ }
+ }
+
+ handleClick(event, item) {
+ this.animating = true;
+ super.handleClick(event, item);
+ //TODO: Use onDone of animate callback instead with RC6
+ setTimeout(() => {
+ this.animating = false;
+ }, 400);
+ }
+
+}
+
+@NgModule({
+ imports: [CommonModule,RouterModule],
+ exports: [PanelMenu,RouterModule],
+ declarations: [PanelMenu,PanelMenuSub]
+})
+export class PanelMenuModule { }
diff --git a/src/app/components/password/images/password-meter.png b/src/app/components/password/images/password-meter.png
new file mode 100644
index 00000000000..eec05cfb434
Binary files /dev/null and b/src/app/components/password/images/password-meter.png differ
diff --git a/src/app/components/password/password.css b/src/app/components/password/password.css
new file mode 100644
index 00000000000..f72f179a337
--- /dev/null
+++ b/src/app/components/password/password.css
@@ -0,0 +1,20 @@
+.ui-password-panel {
+ padding: .25em .5em;
+ width: 10em;
+ margin-top: 2px;
+}
+
+.ui-password-panel .ui-password-meter {
+ height: 10px;
+ background:transparent url("./images/password-meter.png") no-repeat left top;
+ padding: 0;
+ margin: 0;
+}
+
+.ui-password-info {
+ margin-top: .25em;
+}
+
+.ui-password-panel-overlay {
+ position: absolute;
+}
\ No newline at end of file
diff --git a/src/app/components/password/password.ts b/src/app/components/password/password.ts
new file mode 100644
index 00000000000..5a1bcbc7c6f
--- /dev/null
+++ b/src/app/components/password/password.ts
@@ -0,0 +1,164 @@
+import {NgModule,Directive,ElementRef,HostListener,Input,AfterViewInit,OnDestroy,DoCheck} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {DomHandler} from '../dom/domhandler';
+
+@Directive({
+ selector: '[pPassword]',
+ host: {
+ '[class.ui-inputtext]': 'true',
+ '[class.ui-corner-all]': 'true',
+ '[class.ui-state-default]': 'true',
+ '[class.ui-widget]': 'true',
+ '[class.ui-state-filled]': 'filled'
+ },
+ providers: [DomHandler]
+})
+export class Password implements AfterViewInit,OnDestroy,DoCheck {
+
+ @Input() promptLabel: string = 'Please enter a password';
+
+ @Input() weakLabel: string = 'Weak';
+
+ @Input() mediumLabel: string = 'Medium';
+
+ @Input() strongLabel: string = 'Strong';
+
+ @Input() feedback: boolean = true;
+
+ panel: any;
+
+ meter: any;
+
+ info: any;
+
+ filled: boolean;
+
+ constructor(public el: ElementRef, public domHandler: DomHandler) {}
+
+ ngAfterViewInit() {
+ 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;
+
+ if(this.feedback) {
+ this.panel.appendChild(this.meter);
+ this.panel.appendChild(this.info);
+ document.body.appendChild(this.panel);
+ }
+ }
+
+ ngDoCheck() {
+ this.updateFilledState();
+ }
+
+ //To trigger change detection to manage ui-state-filled for material labels when there is no value binding
+ @HostListener('input', ['$event'])
+ onInput(e) {
+ this.updateFilledState();
+ }
+
+ updateFilledState() {
+ this.filled = this.el.nativeElement.value && this.el.nativeElement.value.length;
+ }
+
+ @HostListener('focus', ['$event'])
+ onFocus(e) {
+ this.panel.style.zIndex = String(++DomHandler.zindex);
+ this.domHandler.removeClass(this.panel, 'ui-helper-hidden');
+ this.domHandler.absolutePosition(this.panel, this.el.nativeElement);
+ this.domHandler.fadeIn(this.panel, 250);
+ }
+
+ @HostListener('blur', ['$event'])
+ onBlur(e) {
+ this.domHandler.addClass(this.panel, 'ui-helper-hidden');
+ }
+
+ @HostListener('keyup', ['$event'])
+ onKeyup(e) {
+ let 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;
+ }
+
+ testStrength(str: string) {
+ let grade: number = 0;
+ let 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;
+ }
+
+ normalize(x, y) {
+ let diff = x - y;
+
+ if(diff <= 0)
+ return x / y;
+ else
+ return 1 + 0.5 * (x / (x + y/4));
+ }
+
+ get disabled(): boolean {
+ return this.el.nativeElement.disabled;
+ }
+
+ ngOnDestroy() {
+ if (!this.feedback)
+ return;
+
+ this.panel.removeChild(this.meter);
+ this.panel.removeChild(this.info);
+ document.body.removeChild(this.panel);
+ this.panel = null;
+ this.meter = null;
+ this.info = null;
+ }
+}
+
+@NgModule({
+ imports: [CommonModule],
+ exports: [Password],
+ declarations: [Password]
+})
+export class PasswordModule { }
diff --git a/src/app/components/picklist/picklist.css b/src/app/components/picklist/picklist.css
new file mode 100644
index 00000000000..c6a12aaf38f
--- /dev/null
+++ b/src/app/components/picklist/picklist.css
@@ -0,0 +1,191 @@
+.ui-picklist > div {
+ float: left;
+}
+
+.ui-picklist .ui-picklist-buttons {
+ height: 12.5em;
+ padding: 0 .25em;
+}
+
+.ui-picklist .ui-picklist-list {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ overflow:auto;
+ height: 12.5em;
+ width: 12.5em;
+}
+
+.ui-picklist .ui-picklist-list li {
+ margin: 1px;
+ padding: .125em;
+}
+
+.ui-picklist .ui-button {
+ display:block;
+ margin-bottom: 0.25em;
+}
+
+.ui-picklist .ui-button-text-icon-left {
+ width: 100%;
+}
+
+.ui-picklist .ui-picklist-item {
+ cursor: pointer;
+ border: 0 none;
+ font-weight: inherit;
+}
+
+.ui-picklist .ui-picklist-caption {
+ text-align: center;
+ padding: .5em .75em;
+ border-bottom:0 none;
+}
+
+.ui-picklist table {
+ width: 100%;
+ border-collapse:collapse;
+}
+
+.ui-picklist .ui-picklist-filter {
+ padding-right: 1em;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+.ui-picklist .ui-picklist-filter-container {
+ position: relative;
+ margin: 0;
+ padding: 0;
+}
+
+.ui-picklist .ui-picklist-filter-container .fa {
+ position: absolute;
+ top: .25em;
+ right: .125em;
+}
+
+.ui-picklist {
+ display: table;
+}
+
+.ui-picklist > div {
+ float: none;
+ display: table-cell;
+ vertical-align: top;
+}
+
+.ui-picklist .ui-picklist-buttons {
+ vertical-align: middle;
+}
+
+/* Vertical */
+.ui-picklist.ui-picklist-vertical {
+ display: table;
+}
+
+.ui-picklist.ui-picklist-vertical > div {
+ float: none;
+ display: table-row;
+ vertical-align: top;
+}
+
+.ui-picklist.ui-picklist-vertical .ui-picklist-buttons {
+ text-align:center;
+ height: auto;
+}
+
+.ui-picklist.ui-picklist-vertical .ui-picklist-buttons .ui-button {
+ display: inline-block;
+}
+
+.ui-picklist.ui-picklist-vertical .ui-button {
+ margin-top: 0.25em;
+}
+
+.ui-picklist-outline {
+ outline: 1px dotted black;
+ z-index: 1;
+}
+
+.ui-picklist-list.ui-picklist-source,
+.ui-picklist-list.ui-picklist-target {
+ outline: none;
+}
+
+/* Responsive */
+.ui-picklist.ui-picklist-responsive * {
+ box-sizing: border-box;
+}
+
+.ui-picklist.ui-picklist-responsive {
+ width: 100%;
+}
+
+.ui-picklist.ui-picklist-responsive .ui-picklist-listwrapper {
+ width: 35%;
+}
+
+.ui-picklist.ui-picklist-responsive .ui-picklist-listwrapper.ui-picklist-listwrapper-nocontrols {
+ width: 45%;
+}
+
+.ui-picklist.ui-picklist-responsive .ui-picklist-buttons {
+ width: 10%;
+}
+
+.ui-picklist.ui-picklist-responsive .ui-picklist-buttons button {
+ width: 100%;
+}
+
+.ui-picklist.ui-picklist-responsive .ui-picklist-list {
+ width: auto;
+}
+
+/* Responsive */
+@media (max-width: 40em) {
+ .ui-picklist.ui-picklist-responsive {
+ display: block;
+ }
+
+ .ui-picklist.ui-picklist-responsive > div {
+ display: block;
+ width: 100% !important;
+ }
+
+ .ui-picklist.ui-picklist-responsive .ui-picklist-buttons {
+ text-align: center;
+ height: auto;
+ padding: .4em 0;
+ }
+
+ .ui-picklist.ui-picklist-responsive .ui-picklist-buttons button {
+ display: inline;
+ width: 20%;
+ margin-bottom: 0;
+ }
+
+ .ui-picklist.ui-picklist-responsive .ui-picklist-source-controls.ui-picklist-buttons {
+ padding-bottom: .4em;
+ }
+
+ .ui-picklist.ui-picklist-responsive .ui-picklist-target-controls.ui-picklist-buttons {
+ padding-top: .4em;
+ }
+
+ .ui-picklist.ui-picklist-responsive .ui-picklist-buttons .fa-angle-right:before {
+ content: "\f107";
+ }
+
+ .ui-picklist.ui-picklist-responsive .ui-picklist-buttons .fa-angle-double-right:before {
+ content: "\f103";
+ }
+
+ .ui-picklist.ui-picklist-responsive .ui-picklist-buttons .fa-angle-left:before {
+ content: "\f106";
+ }
+
+ .ui-picklist.ui-picklist-responsive .ui-picklist-buttons .fa-angle-double-left:before {
+ content: "\f102";
+ }
+}
diff --git a/src/app/components/picklist/picklist.ts b/src/app/components/picklist/picklist.ts
new file mode 100644
index 00000000000..ff21e600edd
--- /dev/null
+++ b/src/app/components/picklist/picklist.ts
@@ -0,0 +1,348 @@
+import {NgModule,Component,ElementRef,OnDestroy,AfterViewInit,AfterContentInit,AfterViewChecked,DoCheck,Input,Output,ContentChildren,QueryList,TemplateRef,EventEmitter} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ButtonModule} from '../button/button';
+import {SharedModule,PrimeTemplate} from '../common/shared';
+import {DomHandler} from '../dom/domhandler';
+
+@Component({
+ selector: 'p-pickList',
+ template: `
+
+
+
+ `,
+ providers: [DomHandler]
+})
+export class PickList implements OnDestroy,AfterViewChecked,AfterContentInit {
+
+ @Input() source: any[];
+
+ @Input() target: any[];
+
+ @Input() sourceHeader: string;
+
+ @Input() targetHeader: string;
+
+ @Input() responsive: boolean;
+
+ @Input() metaKeySelection: boolean = true;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Input() sourceStyle: any;
+
+ @Input() targetStyle: any;
+
+ @Input() showSourceControls: boolean = true;
+
+ @Input() showTargetControls: boolean = true;
+
+ @Output() onMoveToSource: EventEmitter
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ providers: [RADIO_VALUE_ACCESSOR]
+})
+export class RadioButton implements ControlValueAccessor,AfterViewInit {
+
+ @Input() value: any;
+
+ @Input() name: string;
+
+ @Input() disabled: boolean;
+
+ @Input() label: string;
+
+ @Input() tabindex: number;
+
+ @Input() inputId: string;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Output() onClick: EventEmitter
+
+
+
+
+
+
+
+
+ `,
+ providers: [SELECTBUTTON_VALUE_ACCESSOR]
+})
+export class SelectButton implements ControlValueAccessor {
+
+ @Input() options: SelectItem[];
+
+ @Input() tabindex: number;
+
+ @Input() multiple: boolean;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Input() disabled: boolean;
+
+ @Output() onChange: EventEmitter
+
+
+ `,
+ providers: [DomHandler]
+})
+export class SlideMenu implements AfterViewInit,OnDestroy {
+
+ @Input() model: MenuItem[];
+
+ @Input() popup: boolean;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Input() menuWidth: number = 190;
+
+ @Input() viewportHeight: number = 175;
+
+ @Input() effectDuration: any = 500;
+
+ @Input() easing: string = 'ease-out';
+
+ @Input() backLabel: string = 'Back';
+
+ @ViewChild('container') containerViewChild: ElementRef;
+
+ @ViewChild('backward') backwardViewChild: ElementRef;
+
+ @ViewChild('slideMenuContent') slideMenuContentViewChild: ElementRef;
+
+ public container: HTMLDivElement;
+
+ public backwardElement: HTMLDivElement;
+
+ public slideMenuContentElement: HTMLDivElement;
+
+ public documentClickListener: any;
+
+ public preventDocumentDefault: any;
+
+ public left: number = 0;
+
+ public animating: boolean = false;
+
+ constructor(public el: ElementRef, public domHandler: DomHandler, public renderer: Renderer2) {}
+
+ ngAfterViewInit() {
+ this.container =
+
+
+
+
+
+
+ `,
+ providers: [SLIDER_VALUE_ACCESSOR,DomHandler]
+})
+export class Slider implements AfterViewInit,OnDestroy,ControlValueAccessor {
+
+ @Input() animate: boolean;
+
+ @Input() disabled: boolean;
+
+ @Input() min: number = 0;
+
+ @Input() max: number = 100;
+
+ @Input() orientation: string = 'horizontal';
+
+ @Input() step: number;
+
+ @Input() range: boolean;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Output() onChange: EventEmitter
+
+
+ `,
+ providers: [DomHandler]
+})
+export class SplitButton implements OnInit,OnDestroy {
+
+ @Input() model: MenuItem[];
+
+ @Input() icon: string;
+
+ @Input() iconPos: string = 'left';
+
+ @Input() label: string;
+
+ @Output() onClick: EventEmitter
+
+
+
+
+
+ `
+})
+export class Steps {
+
+ @Input() activeIndex: number = 0;
+
+ @Input() model: MenuItem[];
+
+ @Input() readonly: boolean = true;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Output() activeIndexChange: EventEmitter
+
+
+ `,
+ providers: [DomHandler]
+})
+export class TabMenu implements OnDestroy {
+
+ @Input() model: MenuItem[];
+
+ @Input() activeItem: MenuItem;
+
+ @Input() popup: boolean;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ ngOnInit() {
+ if(!this.activeItem && this.model && this.model.length) {
+ this.activeItem = this.model[0];
+ }
+ }
+
+ itemClick(event: Event, item: MenuItem) {
+ if(item.disabled) {
+ event.preventDefault();
+ return;
+ }
+
+ if(!item.url) {
+ event.preventDefault();
+ }
+
+ if(item.command) {
+ if(!item.eventEmitter) {
+ item.eventEmitter = new EventEmitter();
+ item.eventEmitter.subscribe(item.command);
+ }
+
+ item.eventEmitter.emit({
+ originalEvent: event,
+ item: item
+ });
+ }
+
+ this.activeItem = item;
+ }
+
+ ngOnDestroy() {
+ if(this.model) {
+ for(let item of this.model) {
+ this.unsubscribe(item);
+ }
+ }
+ }
+
+ unsubscribe(item: any) {
+ if(item.eventEmitter) {
+ item.eventEmitter.unsubscribe();
+ }
+
+ if(item.items) {
+ for(let childItem of item.items) {
+ this.unsubscribe(childItem);
+ }
+ }
+ }
+
+}
+
+@NgModule({
+ imports: [CommonModule,RouterModule],
+ exports: [TabMenu,RouterModule],
+ declarations: [TabMenu]
+})
+export class TabMenuModule { }
\ No newline at end of file
diff --git a/src/app/components/tabview/tabview.css b/src/app/components/tabview/tabview.css
new file mode 100644
index 00000000000..0e94ce0f54c
--- /dev/null
+++ b/src/app/components/tabview/tabview.css
@@ -0,0 +1,132 @@
+.ui-tabview {
+ padding: .25em;
+}
+
+.ui-tabview .ui-tabview-nav {
+ margin: 0;
+}
+
+.ui-tabview .ui-tabview-nav li {
+ list-style: none;
+ float: left;
+ position: relative;
+ margin: 0 .125em 1px 0;
+ padding: 0;
+ white-space: nowrap;
+}
+
+.ui-tabview .ui-tabview-nav li a {
+ float: left;
+ padding: .5em 1em;
+ text-decoration: none;
+}
+
+.ui-tabview .ui-tabview-nav li.ui-tabview-selected a,
+.ui-tabview .ui-tabview-nav li.ui-state-disabled a,
+.ui-tabview .ui-tabview-nav li.ui-state-processing a {
+ cursor: text;
+}
+
+.ui-tabview .ui-tabview-nav li a,
+.ui-tabview.ui-tabview-collapsible .ui-tabview-nav li.ui-tabview-selected a {
+ cursor: pointer;
+}
+
+.ui-tabview .ui-tabview-panel {
+ border-width: 0;
+ padding: 1em;
+ background: none;
+}
+
+.ui-tabview .ui-tabview-nav li {
+ display: block;
+}
+
+.ui-tabview .ui-tabview-nav li .ui-tabview-left-icon,
+.ui-tabview .ui-tabview-nav li .ui-tabview-right-icon,
+.ui-tabview .ui-tabview-nav li .ui-tabview-title {
+ vertical-align: middle;
+}
+
+.ui-tabview .ui-tabview-nav li .ui-tabview-close {
+ margin: 0.5em 0.3em 0 0;
+ cursor: pointer;
+}
+
+/* per orientation settings */
+/* top and bottom */
+.ui-tabview.ui-tabview-top > .ui-tabview-nav li {
+ border-bottom: 0;
+ top: 1px;
+}
+
+.ui-tabview.ui-tabview-top > .ui-tabview-nav {
+ padding: .2em .2em 0;
+}
+
+.ui-tabview.ui-tabview-bottom > .ui-tabview-nav {
+ padding: 0 .2em .2em;
+}
+
+.ui-tabview.ui-tabview-bottom > .ui-tabview-nav li {
+ border-top: 0;
+}
+
+/* left and right*/
+.ui-tabview-left:after,
+.ui-tabview-right:after {
+ clear:both;
+ content: ".";
+ display: block;
+ height: 0;
+ visibility: hidden;
+}
+
+.ui-tabview-left > .ui-tabview-nav {
+ float:left;
+ width: 25%;
+ height: 300px;
+ background-image: none;
+ padding-top: 1px;
+}
+
+.ui-tabview-left > .ui-tabview-panels {
+ float:right;
+ width: 75%;
+}
+
+.ui-tabview.ui-tabview-left > .ui-tabview-nav li,
+.ui-tabview.ui-tabview-right > .ui-tabview-nav li{
+ display: block;
+ float: right;
+ white-space: normal;
+ width: 99%;
+}
+
+.ui-tabview.ui-tabview-left > .ui-tabview-nav li {
+ margin: 0 0 1px 0;
+ border-right:0 none;
+}
+
+.ui-tabview.ui-tabview-right > .ui-tabview-nav {
+ float:right;
+ width: 25%;
+ height: 300px;
+ background-image: none;
+ padding-top: 1px;
+}
+
+.ui-tabview.ui-tabview-right > .ui-tabview-panels {
+ float:left;
+ width: 75%;
+}
+
+.ui-tabview.ui-tabview-right > .ui-tabview-nav li {
+ margin: 0 0 1px 0;
+ border-left:0 none;
+}
+
+/* RTL */
+.ui-rtl .ui-tabview .ui-tabview-nav li {
+ float: right;
+}
diff --git a/src/app/components/tabview/tabview.ts b/src/app/components/tabview/tabview.ts
new file mode 100644
index 00000000000..b8222b5229b
--- /dev/null
+++ b/src/app/components/tabview/tabview.ts
@@ -0,0 +1,260 @@
+import {NgModule,Component,ElementRef,Input,Output,EventEmitter,HostListener,AfterContentInit,ContentChildren,QueryList} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {BlockableUI} from '../common/blockableui';
+
+@Component({
+ selector: '[p-tabViewNav]',
+ host:{
+ '[class.ui-tabview-nav]': 'true',
+ '[class.ui-helper-reset]': 'true',
+ '[class.ui-helper-clearfix]': 'true',
+ '[class.ui-widget-header]': 'true',
+ '[class.ui-corner-all]': 'true'
+ },
+ template: `
+
+
+ `,
+})
+export class TabView implements AfterContentInit,BlockableUI {
+
+ @Input() orientation: string = 'top';
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Input() controlClose: boolean;
+
+ @Input() lazy: boolean;
+
+ @ContentChildren(TabPanel) tabPanels: QueryList
+
+
+
+ `,
+ providers: [DomHandler]
+})
+export class Terminal implements AfterViewInit,AfterViewChecked {
+
+ @Input() welcomeMessage: string;
+
+ @Input() prompt: string;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Output() responseChange: EventEmitter{{welcomeMessage}}
+
+
+
+ {{prompt}}
+ {{command.text}}
+
+ {{command.response}}
+
+ {{prompt}}
+
+
+
+
+ `,
+ providers: [DomHandler]
+})
+export class TieredMenu implements AfterViewInit,OnDestroy {
+
+ @Input() model: MenuItem[];
+
+ @Input() popup: boolean;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ container: any;
+
+ documentClickListener: any;
+
+ preventDocumentDefault: any;
+
+ constructor(public el: ElementRef, public domHandler: DomHandler, public renderer: Renderer2) {}
+
+ ngAfterViewInit() {
+ this.container = this.el.nativeElement.children[0];
+
+ if(this.popup) {
+ this.documentClickListener = this.renderer.listen('document', 'click', () => {
+ if(!this.preventDocumentDefault) {
+ this.hide();
+ }
+ this.preventDocumentDefault = false;
+ });
+ }
+ }
+
+ toggle(event: Event) {
+ if(this.container.offsetParent)
+ this.hide();
+ else
+ this.show(event);
+ }
+
+ show(event: Event) {
+ this.preventDocumentDefault = true;
+ this.container.style.display = 'block';
+ this.domHandler.absolutePosition(this.container, event.target);
+ this.domHandler.fadeIn(this.container, 250);
+ }
+
+ hide() {
+ this.container.style.display = 'none';
+ }
+
+ unsubscribe(item: any) {
+ if(item.eventEmitter) {
+ item.eventEmitter.unsubscribe();
+ }
+
+ if(item.items) {
+ for(let childItem of item.items) {
+ this.unsubscribe(childItem);
+ }
+ }
+ }
+
+ ngOnDestroy() {
+ if(this.popup && this.documentClickListener) {
+ this.documentClickListener();
+ }
+
+ if(this.model) {
+ for(let item of this.model) {
+ this.unsubscribe(item);
+ }
+ }
+ }
+
+}
+
+@NgModule({
+ imports: [CommonModule,RouterModule],
+ exports: [TieredMenu,RouterModule],
+ declarations: [TieredMenu,TieredMenuSub]
+})
+export class TieredMenuModule { }
diff --git a/src/app/components/togglebutton/togglebutton.ts b/src/app/components/togglebutton/togglebutton.ts
new file mode 100644
index 00000000000..0909cf7d19e
--- /dev/null
+++ b/src/app/components/togglebutton/togglebutton.ts
@@ -0,0 +1,122 @@
+import {NgModule,Component,Input,Output,EventEmitter,forwardRef,AfterViewInit,ViewChild,ElementRef} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
+
+export const TOGGLEBUTTON_VALUE_ACCESSOR: any = {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => ToggleButton),
+ multi: true
+};
+
+@Component({
+ selector: 'p-toggleButton',
+ template: `
+
+
+ `,
+ providers: [TOGGLEBUTTON_VALUE_ACCESSOR]
+})
+export class ToggleButton implements ControlValueAccessor,AfterViewInit {
+
+ @Input() onLabel: string = 'Yes';
+
+ @Input() offLabel: string = 'No';
+
+ @Input() onIcon: string;
+
+ @Input() offIcon: string;
+
+ @Input() disabled: boolean;
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+ @Input() inputId: string;
+
+ @Input() tabindex: number;
+
+ @Output() onChange: EventEmitter
+
+
+
+
+
+
+ `
+})
+export class Toolbar {
+
+ @Input() style: any;
+
+ @Input() styleClass: string;
+
+}
+
+@NgModule({
+ imports: [CommonModule],
+ exports: [Toolbar],
+ declarations: [Toolbar]
+})
+export class ToolbarModule { }
\ No newline at end of file
diff --git a/src/app/components/tooltip/tooltip.css b/src/app/components/tooltip/tooltip.css
new file mode 100644
index 00000000000..e726b45048d
--- /dev/null
+++ b/src/app/components/tooltip/tooltip.css
@@ -0,0 +1,66 @@
+.ui-tooltip {
+ position:absolute;
+ display:none;
+ padding: .25em .5em;
+}
+
+.ui-tooltip.ui-tooltip-right,
+.ui-tooltip.ui-tooltip-left {
+ padding: 0 .25em;
+}
+
+.ui-tooltip.ui-tooltip-top,
+.ui-tooltip.ui-tooltip-bottom {
+ padding:.25em 0;
+}
+
+.ui-tooltip .ui-tooltip-text {
+ padding: .125em .5em;
+ background-color: rgb(76, 76, 76);
+ color: #ffffff;
+ white-space: nowrap;
+}
+
+.ui-tooltip-arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+}
+
+.ui-tooltip-right .ui-tooltip-arrow {
+ top: 50%;
+ left: 0;
+ margin-top: -.25em;
+ border-width: .25em .25em .25em 0;
+ border-right-color: rgb(76, 76, 76);
+}
+
+.ui-tooltip-left .ui-tooltip-arrow {
+ top: 50%;
+ right: 0;
+ margin-top: -.25em;
+ border-width: .25em 0 .25em .25em;
+ border-left-color: rgb(76, 76, 76);
+}
+
+.ui-tooltip.ui-tooltip-top {
+ padding: .25em 0;
+}
+
+.ui-tooltip-top .ui-tooltip-arrow {
+ bottom: 0;
+ left: 50%;
+ margin-left: -.25em;
+ border-width: .25em .25em 0;
+ border-top-color: rgb(76, 76, 76);
+}
+
+.ui-tooltip-bottom .ui-tooltip-arrow {
+ top: 0;
+ left: 50%;
+ margin-left: -.25em;
+ border-width: 0 .25em .25em;
+ border-bottom-color: rgb(76, 76, 76);
+}
\ No newline at end of file
diff --git a/src/app/components/tooltip/tooltip.ts b/src/app/components/tooltip/tooltip.ts
new file mode 100644
index 00000000000..da2035d7aef
--- /dev/null
+++ b/src/app/components/tooltip/tooltip.ts
@@ -0,0 +1,160 @@
+import {NgModule,Directive,ElementRef,OnDestroy,HostBinding,HostListener,Input} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {DomHandler} from '../dom/domhandler';
+
+@Directive({
+ selector: '[pTooltip]',
+ host: {
+ },
+ providers: [DomHandler]
+})
+export class Tooltip implements OnDestroy {
+
+ @Input('pTooltip') text: string;
+
+ @Input() tooltipPosition: string = 'right';
+
+ @Input() tooltipEvent: string = 'hover';
+
+ @Input() appendTo: any = 'body';
+
+ @Input() positionStyle: string;
+
+ @Input() tooltipStyleClass: string;
+
+ @Input("tooltipDisabled") disabled: boolean;
+
+ @Input() escape: boolean = true;
+
+ container: any;
+
+ constructor(public el: ElementRef, public domHandler: DomHandler) {}
+
+ @HostListener('mouseenter', ['$event'])
+ onMouseEnter(e: Event) {
+ if(this.tooltipEvent === 'hover') {
+ this.show();
+ }
+ }
+
+ @HostListener('mouseleave', ['$event'])
+ onMouseLeave(e: Event) {
+ if(this.tooltipEvent === 'hover') {
+ this.hide();
+ }
+ }
+
+ @HostListener('focus', ['$event'])
+ onFocus(e: Event) {
+ if(this.tooltipEvent === 'focus') {
+ this.show();
+ }
+ }
+
+ @HostListener('blur', ['$event'])
+ onBlur(e: Event) {
+ if(this.tooltipEvent === 'focus') {
+ this.hide();
+ }
+ }
+
+ show() {
+ if(!this.text || this.disabled) {
+ return;
+ }
+
+ this.create();
+ let offset = this.el.nativeElement.getBoundingClientRect();
+ let targetTop = offset.top + this.domHandler.getWindowScrollTop();
+ let targetLeft = offset.left + this.domHandler.getWindowScrollLeft();
+ let left: number;
+ let top: number;
+
+ this.container.style.display = 'block';
+
+ switch(this.tooltipPosition) {
+ case 'right':
+ left = targetLeft + this.domHandler.getOuterWidth(this.el.nativeElement);
+ top = targetTop + (this.domHandler.getOuterHeight(this.el.nativeElement) - this.domHandler.getOuterHeight(this.container)) / 2;
+ break;
+
+ case 'left':
+ left = targetLeft - this.domHandler.getOuterWidth(this.container);
+ top = targetTop + (this.domHandler.getOuterHeight(this.el.nativeElement) - this.domHandler.getOuterHeight(this.container)) / 2;
+ break;
+
+ case 'top':
+ left = targetLeft + (this.domHandler.getOuterWidth(this.el.nativeElement) - this.domHandler.getOuterWidth(this.container)) / 2;
+ top = targetTop - this.domHandler.getOuterHeight(this.container);
+ break;
+
+ case 'bottom':
+ left = targetLeft + (this.domHandler.getOuterWidth(this.el.nativeElement) - this.domHandler.getOuterWidth(this.container)) / 2;
+ top = targetTop + this.domHandler.getOuterHeight(this.el.nativeElement);
+ break;
+ }
+
+ this.container.style.left = left + 'px';
+ this.container.style.top = top + 'px';
+ this.domHandler.fadeIn(this.container, 250);
+ this.container.style.zIndex = ++DomHandler.zindex;
+ }
+
+ hide() {
+ this.ngOnDestroy();
+ }
+
+ create() {
+ let styleClass = 'ui-widget ui-tooltip ui-tooltip-' + this.tooltipPosition;
+ this.container = document.createElement('div');
+ if(this.tooltipStyleClass) {
+ styleClass += ' ' + this.tooltipStyleClass;
+ }
+
+ this.container.className = styleClass;
+
+ let tooltipArrow = document.createElement('div');
+ tooltipArrow.className = 'ui-tooltip-arrow';
+ this.container.appendChild(tooltipArrow);
+
+ let tooltipText = document.createElement('div');
+ tooltipText.className = 'ui-tooltip-text ui-shadow ui-corner-all';
+
+ if(this.escape)
+ tooltipText.appendChild(document.createTextNode(this.text));
+ else
+ tooltipText.innerHTML = this.text;
+
+ if(this.positionStyle) {
+ this.container.style.position = this.positionStyle;
+ }
+
+ this.container.appendChild(tooltipText);
+
+ if(this.appendTo === 'body')
+ document.body.appendChild(this.container);
+ else if(this.appendTo === 'target')
+ this.domHandler.appendChild(this.container, this.el.nativeElement);
+ else
+ this.domHandler.appendChild(this.container, this.appendTo);
+ }
+
+ ngOnDestroy() {
+ if(this.container && this.container.parentElement) {
+ if(this.appendTo === 'body')
+ document.body.removeChild(this.container);
+ else if(this.appendTo === 'target')
+ this.el.nativeElement.removeChild(this.container);
+ else
+ this.domHandler.removeChild(this.container, this.appendTo);
+ }
+ this.container = null;
+ }
+}
+
+@NgModule({
+ imports: [CommonModule],
+ exports: [Tooltip],
+ declarations: [Tooltip]
+})
+export class TooltipModule { }
\ No newline at end of file
diff --git a/src/app/components/tree/images/line.gif b/src/app/components/tree/images/line.gif
new file mode 100755
index 00000000000..64e2280ec55
Binary files /dev/null and b/src/app/components/tree/images/line.gif differ
diff --git a/src/app/components/tree/tree.css b/src/app/components/tree/tree.css
new file mode 100644
index 00000000000..27617575fc5
--- /dev/null
+++ b/src/app/components/tree/tree.css
@@ -0,0 +1,158 @@
+.ui-tree {
+ width: 18em;
+}
+
+.ui-tree .ui-treenode-selectable.ui-treenode-content {
+ cursor: pointer;
+}
+
+.ui-tree .ui-tree-container {
+ height: 100%;
+ margin: 0;
+ overflow: auto;
+ padding: .25em;
+ white-space: nowrap;
+}
+
+.ui-tree .ui-treenode-children {
+ margin: 0;
+ padding: 0 0 0 1em;
+}
+
+.ui-tree .ui-treenode {
+ background-attachment: scroll;
+ background-color: transparent;
+ background-image: none;
+ background-position: 0 0;
+ background-repeat: repeat-y;
+ list-style: none outside none;
+ margin: 0;
+ padding: .125em 0 0 0;
+}
+
+.ui-tree .ui-treenode-droppoint {
+ height: 4px;
+ list-style-type: none;
+}
+
+.ui-tree .ui-treenode-droppoint-active {
+ border: 0 none;
+}
+
+.ui-tree .ui-tree-toggler {
+ cursor: pointer;
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.ui-tree .ui-treenode-icon {
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.ui-tree .ui-treenode-label {
+ display: inline-block;
+ padding: 0 .25em;
+ vertical-align: middle;
+}
+
+.ui-tree .ui-treenode-label.ui-state-hover,
+.ui-tree .ui-treenode-label.ui-state-highlight {
+ font-weight: normal;
+ border: 0 none;
+}
+
+.ui-tree .ui-treenode.ui-treenode-leaf > .ui-treenode-content > .ui-tree-toggler {
+ visibility: hidden;
+}
+
+.ui-tree .ui-chkbox-box {
+ cursor: pointer;
+}
+
+.ui-tree .ui-chkbox {
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.ui-tree .ui-chkbox .ui-chkbox-icon {
+ margin-left: 1px;
+}
+
+/** Fluid **/
+.ui-fluid .ui-tree {
+ width: 100%;
+}
+
+/** Horizontal Tree **/
+.ui-tree-horizontal {
+ width:auto;
+ padding: .5em 0;
+ overflow:auto;
+}
+
+.ui-tree.ui-tree-horizontal table,
+.ui-tree.ui-tree-horizontal tr,
+.ui-tree.ui-tree-horizontal td {
+ border-collapse: collapse;
+ margin: 0;
+ padding: 0;
+ vertical-align: middle;
+}
+
+.ui-tree.ui-tree-horizontal .ui-tree-toggler {
+ vertical-align: middle;
+ margin: 0;
+}
+
+.ui-tree-horizontal .ui-treenode-content {
+ font-weight: normal;
+ padding: 0.4em 1em 0.4em 0.2em;
+}
+
+.ui-tree.ui-tree-horizontal .ui-tree-node-label {
+ margin: 0;
+}
+
+.ui-tree-horizontal .ui-treenode-parent .ui-treenode-content {
+ font-weight: normal;
+ white-space: nowrap;
+}
+
+.ui-tree.ui-tree-horizontal .ui-treenode {
+ background: url("./images/line.gif") repeat-x scroll center center transparent;
+ padding: .25em 2.5em;
+}
+
+.ui-tree.ui-tree-horizontal .ui-treenode.ui-treenode-leaf,
+.ui-tree.ui-tree-horizontal .ui-treenode.ui-treenode-collapsed {
+ padding-right: 0;
+}
+
+.ui-tree.ui-tree-horizontal .ui-treenode-children {
+ padding: 0;
+ margin: 0;
+}
+
+.ui-tree.ui-tree-horizontal .ui-treenode-connector {
+ width: 1px;
+}
+
+.ui-tree.ui-tree-horizontal .ui-treenode-connector-table {
+ height: 100%;
+ width: 1px;
+}
+
+.ui-tree.ui-tree-horizontal .ui-treenode-connector-line {
+ background: url("./images/line.gif") repeat-y scroll 0 0 transparent;
+ width: 1px;
+}
+
+.ui-tree.ui-tree-horizontal table {
+ height: 0;
+}
+
+.ui-tree.ui-tree-horizontal .ui-chkbox {
+ vertical-align: bottom;
+ margin-right: .25em;
+}
diff --git a/src/app/components/tree/tree.ts b/src/app/components/tree/tree.ts
new file mode 100644
index 00000000000..109e8a08181
--- /dev/null
+++ b/src/app/components/tree/tree.ts
@@ -0,0 +1,770 @@
+import {NgModule,Component,Input,AfterContentInit,OnDestroy,Output,EventEmitter,OnInit,EmbeddedViewRef,ViewContainerRef,
+ ContentChildren,QueryList,TemplateRef,Inject,forwardRef,Host} from '@angular/core';
+import {Optional} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {TreeNode} from '../common/treenode';
+import {SharedModule} from '../common/shared';
+import {PrimeTemplate} from '../common/shared';
+import {TreeDragDropService} from '../common/treedragdropservice';
+import {Subscription} from 'rxjs/Subscription';
+
+@Component({
+ selector: 'p-treeNodeTemplateLoader',
+ template: ``
+})
+export class TreeNodeTemplateLoader implements OnInit, OnDestroy {
+
+ @Input() node: any;
+
+ @Input() template: TemplateRef
+
+
+
+ {{node.label}}
+
+
+
|
+
+
+
+ {{node.label}}
+
+
+ |
+
+
+
+ |
+
+
+ -
+
+
+
+
+ `
+})
+export class Tree implements OnInit,AfterContentInit,OnDestroy {
+
+ @Input() value: TreeNode[];
+
+ @Input() selectionMode: string;
+
+ @Input() selection: any;
+
+ @Output() selectionChange: EventEmitter
+