Initial commit

Angular/src/app/app-routing.module.ts

@@ -1,28 +1,105 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { AppMainComponent } from './app.main.component';
-
-export const appRouteList: Routes = [
-    {
-        path: 'app', component: AppMainComponent,
-        loadChildren: () => import('./pages/pages.routing.module').then(m => m.PagesRoutingModule)
-    },
-    {
-        path: '**',
-        redirectTo: 'app/dashboard/dashboard'
-    }
-];
+import {RouterModule} from '@angular/router';
+import {NgModule} from '@angular/core';
+import {DashboardComponent} from './demo/view/dashboard.component';
+import {DashboardAnalyticsComponent} from './demo/view/dashboardanalytics.component';
+import {FormLayoutDemoComponent} from './demo/view/formlayoutdemo.component';
+import {InvalidStateDemoComponent} from './demo/view/invalidstatedemo.component';
+import {PanelsDemoComponent} from './demo/view/panelsdemo.component';
+import {OverlaysDemoComponent} from './demo/view/overlaysdemo.component';
+import {MediaDemoComponent} from './demo/view/mediademo.component';
+import {MenusDemoComponent} from './demo/view/menusdemo.component';
+import {MessagesDemoComponent} from './demo/view/messagesdemo.component';
+import {MiscDemoComponent} from './demo/view/miscdemo.component';
+import {EmptyDemoComponent} from './demo/view/emptydemo.component';
+import {ChartsDemoComponent} from './demo/view/chartsdemo.component';
+import {FileDemoComponent} from './demo/view/filedemo.component';
+import {DocumentationComponent} from './demo/view/documentation.component';
+import {AppMainComponent} from './app.main.component';
+import {AppNotfoundComponent} from './pages/app.notfound.component';
+import {AppContactusComponent} from './pages/app.contactus.component';
+import {AppErrorComponent} from './pages/app.error.component';
+import {AppAccessdeniedComponent} from './pages/app.accessdenied.component';
+import {AppLoginComponent} from './pages/app.login.component';
+import {AppLandingComponent} from './pages/app.landing.component';
+import {InputDemoComponent} from './demo/view/inputdemo.component';
+import {FloatLabelDemoComponent} from './demo/view/floatlabeldemo.component';
+import {ButtonDemoComponent} from './demo/view/buttondemo.component';
+import {TableDemoComponent} from './demo/view/tabledemo.component';
+import {ListDemoComponent} from './demo/view/listdemo.component';
+import {AppTimelineDemoComponent} from './pages/app.timelinedemo.component';
+import {TreeDemoComponent} from './demo/view/treedemo.component';
+import {DisplayComponent} from './utilities/display.component';
+import {ElevationComponent} from './utilities/elevation.component';
+import {FlexboxComponent} from './utilities/flexbox.component';
+import {GridComponent} from './utilities/grid.component';
+import {IconsComponent} from './utilities/icons.component';
+import {WidgetsComponent} from './utilities/widgets.component';
+import {SpacingComponent} from './utilities/spacing.component';
+import {TypographyComponent} from './utilities/typography.component';
+import {TextComponent} from './utilities/text.component';
+import {AppCrudComponent} from './pages/app.crud.component';
+import {AppCalendarComponent} from './pages/app.calendar.component';
+import {AppInvoiceComponent} from './pages/app.invoice.component';
+import {AppHelpComponent} from './pages/app.help.component';
+import {AppWizardComponent} from './pages/app.wizard.component';
+import { CandidateListComponent } from './pages/candidate/candidate-list/candidate-list.component';
+import { CandidateSidebarComponent } from './pages/candidate/candidate-sidebar/candidate-sidebar.component';
 
 @NgModule({
-    exports: [
-        RouterModule
-    ],
     imports: [
-        RouterModule.forRoot(appRouteList, {
-            scrollPositionRestoration: 'enabled', // Add options right here
-            relativeLinkResolution: 'legacy'
-        })
-    ]
+        RouterModule.forRoot([
+            {
+                path: '', component: AppMainComponent,
+                children: [
+                    {path: 'candidate/candidate-sidebar', component: CandidateSidebarComponent},
+                    {path: 'candidate/candidate-list', component: CandidateListComponent},
+                    {path: 'dashboard/dashboard', component: DashboardComponent},
+                    {path: 'favorites/dashboardanalytics', component: DashboardAnalyticsComponent},
+                    {path: 'uikit/formlayout', component: FormLayoutDemoComponent},
+                    {path: 'uikit/floatlabel', component: FloatLabelDemoComponent},
+                    {path: 'uikit/invalidstate', component: InvalidStateDemoComponent},
+                    {path: 'uikit/input', component: InputDemoComponent},
+                    {path: 'uikit/button', component: ButtonDemoComponent},
+                    {path: 'uikit/table', component: TableDemoComponent},
+                    {path: 'uikit/list', component: ListDemoComponent},
+                    {path: 'uikit/tree', component: TreeDemoComponent},
+                    {path: 'uikit/panel', component: PanelsDemoComponent},
+                    {path: 'uikit/overlay', component: OverlaysDemoComponent},
+                    {path: 'uikit/menu', component: MenusDemoComponent},
+                    {path: 'uikit/media', component: MediaDemoComponent},
+                    {path: 'uikit/message', component: MessagesDemoComponent},
+                    {path: 'uikit/misc', component: MiscDemoComponent},
+                    {path: 'uikit/charts', component: ChartsDemoComponent},
+                    {path: 'uikit/file', component: FileDemoComponent},
+                    {path: 'utilities/display', component: DisplayComponent},
+                    {path: 'utilities/elevation', component: ElevationComponent},
+                    {path: 'utilities/flexbox', component: FlexboxComponent},
+                    {path: 'utilities/grid', component: GridComponent},
+                    {path: 'utilities/icons', component: IconsComponent},
+                    {path: 'utilities/widgets', component: WidgetsComponent},
+                    {path: 'utilities/spacing', component: SpacingComponent},
+                    {path: 'utilities/typography', component: TypographyComponent},
+                    {path: 'utilities/text', component: TextComponent},
+                    {path: 'pages/crud', component: AppCrudComponent},
+                    {path: 'pages/calendar', component: AppCalendarComponent},
+                    {path: 'pages/timeline', component: AppTimelineDemoComponent},
+                    {path: 'pages/invoice', component: AppInvoiceComponent},
+                    {path: 'pages/help', component: AppHelpComponent},
+                    {path: 'pages/empty', component: EmptyDemoComponent},
+                    {path: 'documentation', component: DocumentationComponent}
+                ]
+            },
+            {path: 'error', component: AppErrorComponent},
+            {path: 'access', component: AppAccessdeniedComponent},
+            {path: 'notfound', component: AppNotfoundComponent},
+            {path: 'contactus', component: AppContactusComponent},
+            {path: 'login', component: AppLoginComponent},
+            {path: 'landing', component: AppLandingComponent},
+            {path: 'pages/wizard', component: AppWizardComponent},
+            {path: '**', redirectTo: '/notfound'},
+        ], {scrollPositionRestoration: 'enabled'})
+    ],
+    exports: [RouterModule]
 })
 export class AppRoutingModule {
 }

Angular/src/app/app.breadcrumb.component.html

@@ -1,3 +1,8 @@
 <div class="layout-breadcrumb-container flex justify-content-between align-items-center shadow-1">
     <p-breadcrumb [model]="items" [home]="home" styleClass="layout-breadcrumb pl-4 py-2"></p-breadcrumb>
+    <div class="layout-breadcrumb-buttons flex align-items-center pr-3">
+        <button pButton pRipple type="button" icon="pi pi-cloud-upload" class="p-button-rounded p-button-text p-button-plain mr-1"></button>
+        <button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-text p-button-plain mr-1"></button>
+        <button pButton pRipple type="button" icon="pi pi-power-off" class="p-button-rounded p-button-text p-button-plain mr-1"></button>
+    </div>
 </div>

Angular/src/app/app.component.ts

@@ -8,7 +8,7 @@ import { PrimeNGConfig } from 'primeng/api';
 })
 export class AppComponent implements OnInit{
 
-    topbarTheme = 'grey';
+    topbarTheme = 'blue';
 
     menuTheme = 'light';
 

Angular/src/app/app.config.component.ts

@@ -259,12 +259,12 @@ export class AppConfigComponent implements OnInit {
         if (mode === 'dark') {
             this.app.menuTheme = 'dark';
             this.app.topbarTheme = 'dark';
-            appLogoLink.src = 'assets/layout/images/logo-light.png';
+            appLogoLink.src = 'assets/layout/images/logo-light.svg';
         }
         else {
             this.app.menuTheme = 'light';
             this.app.topbarTheme = 'blue';
-            appLogoLink.src = 'assets/layout/images/logo-light.png';
+            appLogoLink.src = 'assets/layout/images/logo-light.svg';
         }
 
         const layoutLink: HTMLLinkElement = document.getElementById('layout-css') as HTMLLinkElement;
@@ -300,10 +300,10 @@ export class AppConfigComponent implements OnInit {
 
         if (theme.name === 'white' || theme.name === 'yellow' || theme.name === 'amber'
             || theme.name === 'orange' || theme.name === 'lime') {
-            appLogoLink.src = 'assets/layout/images/logo-dark.png';
+            appLogoLink.src = 'assets/layout/images/logo-dark.svg';
         }
         else {
-            appLogoLink.src = 'assets/layout/images/logo-light.png';
+            appLogoLink.src = 'assets/layout/images/logo-light.svg';
         }
     }
 

Angular/src/app/app.footer.component.ts

@@ -5,7 +5,7 @@ import {AppComponent} from './app.component';
     selector: 'app-footer',
     template: `
         <div class="layout-footer flex align-items-center p-4 shadow-2">
-            <img style="height: 2.25rem" id="footer-logo" [src]="'assets/layout/images/logo-' + (app.layoutMode === 'light' ? 'dark' : 'light') + '.png'" alt="ultima-footer-logo">
+            <img id="footer-logo" [src]="'assets/layout/images/footer-' + (app.layoutMode === 'light' ? 'ultima' : 'ultima-dark') + '.svg'" alt="ultima-footer-logo">
             <button pButton pRipple type="button" icon="pi pi-github fs-large" class="p-button-rounded p-button-text p-button-plain" [ngClass]="{'ml-auto mr-2': !app.isRTL, 'ml-2 mr-auto': app.isRTL}"></button>
             <button pButton pRipple type="button" icon="pi pi-facebook fs-large" class="p-button-rounded p-button-text p-button-plain" [ngClass]="{'mr-2': !app.isRTL, 'ml-2': app.isRTL}"></button>
             <button pButton pRipple type="button" icon="pi pi-twitter fs-large" class="p-button-rounded p-button-text p-button-plain" [ngClass]="{'mr-2': !app.isRTL, 'ml-2': app.isRTL}"></button>

Angular/src/app/app.inlinemenu.component.html

@@ -1,15 +1,33 @@
 <div [ngClass]="{'layout-inline-menu': true, 'layout-inline-menu-active':appMain.inlineMenuActive[key]}" [ngStyle]="style" [class]="styleClass">
     <a class="layout-inline-menu-action flex flex-row align-items-center" [ngClass]="appMain.isHorizontal() ? 'p-3 lg:col-1 py-3' : 'p-3'" (click)="onClick($event)"
-        pTooltip="Alex Ondoa" [tooltipDisabled]="isTooltipDisabled">
+        pTooltip="Amy Elsner" [tooltipDisabled]="isTooltipDisabled">
         <img src="assets/demo/images/avatar/amyelsner.png" alt="avatar" style="width: 32px; height: 32px;">
         <span class="flex flex-column" [ngClass]="{'ml-2': !app.isRTL, 'mr-2': app.isRTL}">
-            <span class="font-bold">Alex Ondoa</span>
-            <small>Developpeur</small>
+            <span class="font-bold">Amy Elsner</span>
+            <small>Webmaster</small>
         </span>
         <i class="layout-inline-menu-icon pi pi-angle-down" [ngClass]="{'ml-auto': !app.isRTL, 'mr-auto': app.isRTL}"></i>
     </a>
 
     <ul class="layout-inline-menu-action-panel" [@menu]="appMain.inlineMenuActive[key] ? isHorizontalActive() ? 'visible' : 'visibleAnimated' : isHorizontalActive() ? 'hidden' : 'hiddenAnimated'">
+        <li class="layout-inline-menu-action-item" pTooltip="Settings" [tooltipDisabled]="isTooltipDisabled">
+            <a class="flex flex-row align-items-center" [attr.tabindex]="tabIndex">
+                <i class="pi pi-cog pi-fw"></i>
+                <span>Settings</span>
+            </a>
+        </li>
+        <li class="layout-inline-menu-action-item" pTooltip="Terms of Usage" [tooltipDisabled]="isTooltipDisabled">
+            <a class="flex flex-row align-items-center" [attr.tabindex]="tabIndex">
+                <i class="pi pi-file-o pi-fw"></i>
+                <span>Terms of Usage</span>
+            </a>
+        </li>
+        <li class="layout-inline-menu-action-item" pTooltip="Support" [tooltipDisabled]="isTooltipDisabled">
+            <a class="flex flex-row align-items-center" [attr.tabindex]="tabIndex">
+                <i class="pi pi-compass pi-fw"></i>
+                <span>Support</span>
+            </a>
+        </li>
         <li class="layout-inline-menu-action-item" pTooltip="Logout" [tooltipDisabled]="isTooltipDisabled">
             <a class="flex flex-row align-items-center" [attr.tabindex]="tabIndex">
                 <i class="pi pi-power-off pi-fw"></i>

Angular/src/app/app.main.component.html

@@ -11,13 +11,12 @@
 
     <app-topbar></app-topbar>
 
-    <app-rightmenu></app-rightmenu>
+    <!-- <app-rightmenu></app-rightmenu> -->
 
     <div class="menu-wrapper" (click)="onMenuClick($event)">
         <div class="layout-menu-container">
             <app-inline-menu *ngIf="app.inlineMenuPosition=='top' || app.inlineMenuPosition=='both'" key="top"></app-inline-menu>
             <app-menu></app-menu>
-            <app-inline-menu *ngIf="app.inlineMenuPosition=='bottom' || app.inlineMenuPosition=='both'" key="bottom"></app-inline-menu>
         </div>
     </div>
 
@@ -28,11 +27,11 @@
             <router-outlet></router-outlet>
         </div>
 
-        <app-footer></app-footer>
+        <!-- <app-footer></app-footer> -->
     </div>
 
-    <app-config></app-config>
+    <!-- <app-config></app-config> -->
 
-    <div *ngIf="mobileMenuActive" class="layout-mask modal-in"></div>
+    <!-- <div *ngIf="mobileMenuActive" class="layout-mask modal-in"></div> -->
 
 </div>

Angular/src/app/app.menu.component.ts

@@ -17,10 +17,14 @@ export class AppMenuComponent implements OnInit {
 
     ngOnInit() {
         this.model = [
+          
             {
-                label: 'Natan', icon: 'pi pi-fw pi-home',
+                label: 'UI Kit', icon: 'pi pi-fw pi-star', routerLink: ['/uikit'],
                 items: [
-                    {label: 'Dashboard', icon: 'pi pi-fw pi-home', routerLink: ['/']},
+                    {label: 'Candidates', icon: 'pi pi-fw pi-table', routerLink: ['/candidate/candidate-list'], badgeClass: 'p-badge-help'},
+                    {label: 'Table', icon: 'pi pi-fw pi-table', routerLink: ['/uikit/table'], badge: '6', badgeClass: 'p-badge-help'},
+                    {label: 'Form Layout', icon: 'pi pi-fw pi-id-card', routerLink: ['/uikit/formlayout'], badge: '6', badgeClass: 'p-badge-warning'},
+                 
                 ]
             }
         ];

Angular/src/app/app.module.ts

@@ -98,13 +98,65 @@ import {AppRightMenuComponent} from './app.rightmenu.component';
 import {AppBreadcrumbComponent} from './app.breadcrumb.component';
 import {AppTopBarComponent} from './app.topbar.component';
 import {AppFooterComponent} from './app.footer.component';
+import {DashboardComponent} from './demo/view/dashboard.component';
+import {DashboardAnalyticsComponent} from './demo/view/dashboardanalytics.component';
+import {FormLayoutDemoComponent} from './demo/view/formlayoutdemo.component';
+import {FloatLabelDemoComponent} from './demo/view/floatlabeldemo.component';
+import {InvalidStateDemoComponent} from './demo/view/invalidstatedemo.component';
+import {InputDemoComponent} from './demo/view/inputdemo.component';
+import {ButtonDemoComponent} from './demo/view/buttondemo.component';
+import {TableDemoComponent} from './demo/view/tabledemo.component';
+import {ListDemoComponent} from './demo/view/listdemo.component';
+import {TreeDemoComponent} from './demo/view/treedemo.component';
+import {PanelsDemoComponent} from './demo/view/panelsdemo.component';
+import {OverlaysDemoComponent} from './demo/view/overlaysdemo.component';
+import {MediaDemoComponent} from './demo/view/mediademo.component';
+import {MenusDemoComponent} from './demo/view/menusdemo.component';
+import {MessagesDemoComponent} from './demo/view/messagesdemo.component';
+import {MiscDemoComponent} from './demo/view/miscdemo.component';
+import {EmptyDemoComponent} from './demo/view/emptydemo.component';
+import {ChartsDemoComponent} from './demo/view/chartsdemo.component';
+import {FileDemoComponent} from './demo/view/filedemo.component';
+import {DocumentationComponent} from './demo/view/documentation.component';
+import {DisplayComponent} from './utilities/display.component';
+import {ElevationComponent} from './utilities/elevation.component';
+import {FlexboxComponent} from './utilities/flexbox.component';
+import {GridComponent} from './utilities/grid.component';
+import {IconsComponent} from './utilities/icons.component';
+import {WidgetsComponent} from './utilities/widgets.component';
+import {SpacingComponent} from './utilities/spacing.component';
+import {TypographyComponent} from './utilities/typography.component';
+import {TextComponent} from './utilities/text.component';
+import {AppCrudComponent} from './pages/app.crud.component';
+import {AppCalendarComponent} from './pages/app.calendar.component';
+import {AppInvoiceComponent} from './pages/app.invoice.component';
+import {AppHelpComponent} from './pages/app.help.component';
+import {AppNotfoundComponent} from './pages/app.notfound.component';
+import {AppErrorComponent} from './pages/app.error.component';
+import {AppAccessdeniedComponent} from './pages/app.accessdenied.component';
+import {AppLoginComponent} from './pages/app.login.component';
+import {AppTimelineDemoComponent} from './pages/app.timelinedemo.component';
+import {AppWizardComponent} from './pages/app.wizard.component';
+import {AppLandingComponent} from './pages/app.landing.component';
+
+import {CountryService} from './demo/service/countryservice';
+import {CustomerService} from './demo/service/customerservice';
+import {EventService} from './demo/service/eventservice';
+import {IconService} from './demo/service/iconservice';
+import {NodeService} from './demo/service/nodeservice';
+import {PhotoService} from './demo/service/photoservice';
+import {ProductService} from './demo/service/productservice';
 
 import {MenuService} from './app.menu.service';
 import {AppBreadcrumbService} from './app.breadcrumb.service';
+import {AppContactusComponent} from './pages/app.contactus.component';
 
 import dayGridPlugin from '@fullcalendar/daygrid';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import interactionPlugin from '@fullcalendar/interaction';
+import { CandidateListComponent } from './pages/candidate/candidate-list/candidate-list.component';
+import { CandidateService } from './shared/services/candidate.service';
+import { CandidateSidebarComponent } from './pages/candidate/candidate-sidebar/candidate-sidebar.component';
 
 FullCalendarModule.registerPlugins([
     dayGridPlugin,
@@ -211,11 +263,56 @@ FullCalendarModule.registerPlugins([
         AppRightMenuComponent,
         AppBreadcrumbComponent,
         AppTopBarComponent,
-        AppFooterComponent
+        AppFooterComponent,
+        DashboardComponent,
+        DashboardAnalyticsComponent,
+        FormLayoutDemoComponent,
+        FloatLabelDemoComponent,
+        InvalidStateDemoComponent,
+        InputDemoComponent,
+        ButtonDemoComponent,
+        TableDemoComponent,
+        ListDemoComponent,
+        TreeDemoComponent,
+        PanelsDemoComponent,
+        OverlaysDemoComponent,
+        MediaDemoComponent,
+        MenusDemoComponent,
+        MessagesDemoComponent,
+        MessagesDemoComponent,
+        MiscDemoComponent,
+        ChartsDemoComponent,
+        EmptyDemoComponent,
+        FileDemoComponent,
+        DocumentationComponent,
+        DisplayComponent,
+        ElevationComponent,
+        FlexboxComponent,
+        GridComponent,
+        IconsComponent,
+        WidgetsComponent,
+        SpacingComponent,
+        TypographyComponent,
+        TextComponent,
+        AppCrudComponent,
+        AppCalendarComponent,
+        AppLoginComponent,
+        AppLandingComponent,
+        AppInvoiceComponent,
+        AppHelpComponent,
+        AppNotfoundComponent,
+        AppErrorComponent,
+        AppAccessdeniedComponent,
+        AppTimelineDemoComponent,
+        AppWizardComponent,
+        AppContactusComponent,
+        CandidateListComponent,
+        CandidateSidebarComponent
     ],
     providers: [
         {provide: LocationStrategy, useClass: HashLocationStrategy},
-        MenuService, AppBreadcrumbService
+        CountryService, CustomerService, EventService, IconService, NodeService,
+        PhotoService, ProductService, MenuService, AppBreadcrumbService,CandidateService
     ],
     bootstrap: [AppComponent]
 })

Angular/src/app/app.topbar.component.html

@@ -1,8 +1,7 @@
 <div class="layout-topbar shadow-4">
     <div class="layout-topbar-left">
         <a class="layout-topbar-logo" routerLink="/">
-            <img id="app-logo" src="assets/layout/images/logo-light.png" style="height: 2.25rem">
-            <h3 class="m-1"> NATAN</h3>
+            <img id="app-logo" src="assets/layout/images/logo-light.svg" alt="ultima-layout" style="height: 2.25rem">
         </a>
 
         <a class="layout-menu-button shadow-6" (click)="appMain.onMenuButtonClick($event)" pRipple>
@@ -16,11 +15,11 @@
 
     <div class="layout-topbar-right" [ngClass]="{'layout-topbar-mobile-active': appMain.mobileTopbarActive}">
         <div class="layout-topbar-actions-left">
-            <!-- <p-megaMenu [model]="model" styleClass="layout-megamenu"></p-megaMenu> -->
+            <p-megaMenu [model]="model" styleClass="layout-megamenu"></p-megaMenu>
         </div>
         <div class="layout-topbar-actions-right">
             <ul class="layout-topbar-items">
-                <!-- <li class="layout-topbar-item layout-search-item">
+                <li class="layout-topbar-item layout-search-item">
                     <a class="layout-topbar-action rounded-circle" (click)="appMain.onTopbarItemClick($event, 'search')" pRipple>
                         <i class="pi pi-search fs-large"></i>
                     </a>
@@ -140,7 +139,7 @@
                             </div>
                         </div>
                     </div>
-                </li> -->
+                </li>
                 <li class="layout-topbar-item">
                     <a class="layout-topbar-action flex flex-row justify-content-center align-items-center px-2 rounded-circle" (click)="appMain.onTopbarItemClick($event, 'profile')" pRipple>
                         <img src="assets/demo/images/avatar/amyelsner.png" alt="avatar" style="width: 32px; height: 32px;">
@@ -149,17 +148,35 @@
                     <ul class="layout-topbar-action-panel shadow-6" [@topbarActionPanelAnimation]="'visible'" *ngIf="appMain.activeTopbarItem === 'profile'">
                         <li class="layout-topbar-action-item">
                             <a class="flex flex-row align-items-center" pRipple>
+                                <i class="pi pi-cog" [ngClass]="{'mr-2': !app.isRTL, 'ml-2': app.isRTL}"></i>
+                                <span>Settings</span>
+                            </a>
+                        </li>
+                        <li class="layout-topbar-action-item">
+                            <a class="flex flex-row align-items-center" pRipple>
+                                <i class="pi pi-file-o" [ngClass]="{'mr-2': !app.isRTL, 'ml-2': app.isRTL}"></i>
+                                <span>Terms of Usage</span>
+                            </a>
+                        </li>
+                        <li class="layout-topbar-action-item">
+                            <a class="flex flex-row align-items-center" pRipple>
+                                <i class="pi pi-compass" [ngClass]="{'mr-2': !app.isRTL, 'ml-2': app.isRTL}"></i>
+                                <span>Support</span>
+                            </a>
+                        </li>
+                        <li class="layout-topbar-action-item">
+                            <a class="flex flex-row align-items-center" pRipple>
                                 <i class="pi pi-power-off" [ngClass]="{'mr-2': !app.isRTL, 'ml-2': app.isRTL}"></i>
                                 <span>Logout</span>
                             </a>
                         </li>
                     </ul>
                 </li>
-                <!-- <li class="layout-topbar-item">
+                <li class="layout-topbar-item">
                     <a class="layout-topbar-action rounded-circle" (click)="appMain.onRightMenuButtonClick($event)" pRipple>
                         <i class="pi fs-large" [ngClass]="{'pi-arrow-left': !app.isRTL, 'pi-arrow-right': app.isRTL}"></i>
                     </a>
-                </li> -->
+                </li>
             </ul>
         </div>
     </div>

Angular/src/app/demo/domain/customer.ts

@@ -0,0 +1,20 @@
+export interface Country {
+    name?: string;
+    code?: string;
+}
+
+export interface Representative {
+    name?: string;
+    image?: string;
+}
+
+export interface Customer {
+    id?: number;
+    name?: string;
+    country?: Country;
+    company?: string;
+    date?: string;
+    status?: string;
+    activity?: number;
+    representative?: Representative;
+}

Angular/src/app/demo/domain/image.ts

@@ -0,0 +1,6 @@
+export interface Image {
+    previewImageSrc?;
+    thumbnailImageSrc?;
+    alt?;
+    title?;
+}

Angular/src/app/demo/domain/product.ts

@@ -0,0 +1,12 @@
+export interface Product {
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    price?: number;
+    quantity?: number;
+    inventoryStatus?: string;
+    category?: string;
+    image?: string;
+    rating?: number;
+}

Angular/src/app/demo/service/countryservice.ts

@@ -0,0 +1,15 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class CountryService {
+
+    constructor(private http: HttpClient) { }
+
+    getCountries() {
+    return this.http.get<any>('assets/demo/data/countries.json')
+      .toPromise()
+      .then(res => res.data as any[])
+      .then(data => data);
+    }
+}

Angular/src/app/demo/service/customerservice.ts

@@ -0,0 +1,31 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Customer } from '../domain/customer';
+
+@Injectable()
+export class CustomerService {
+
+    constructor(private http: HttpClient) { }
+
+    getCustomersSmall() {
+        return this.http.get<any>('assets/demo/data/customers-small.json')
+            .toPromise()
+            .then(res => res.data as Customer[])
+            .then(data => data);
+    }
+
+    getCustomersMedium() {
+        return this.http.get<any>('assets/demo/data/customers-medium.json')
+            .toPromise()
+            .then(res => res.data as Customer[])
+            .then(data => data);
+    }
+
+    getCustomersLarge() {
+        return this.http.get<any>('assets/demo/data/customers-large.json')
+            .toPromise()
+            .then(res => res.data as Customer[])
+            .then(data => data);
+    }
+
+}

Angular/src/app/demo/service/eventservice.ts

@@ -0,0 +1,15 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class EventService {
+
+    constructor(private http: HttpClient) { }
+
+    getEvents() {
+    return this.http.get<any>('assets/demo/data/scheduleevents.json')
+      .toPromise()
+      .then(res => res.data as any[])
+      .then(data => data);
+    }
+}

Angular/src/app/demo/service/iconservice.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import {map} from 'rxjs/operators';
+
+@Injectable()
+export class IconService {
+
+    constructor(private http: HttpClient) { }
+
+    icons: any[];
+
+    selectedIcon: any;
+
+    apiUrl = 'assets/demo/data/icons.json';
+
+    getIcons() {
+        return this.http.get(this.apiUrl).pipe(map((response: any) => {
+            this.icons = response.icons;
+            return this.icons;
+        }));
+    }
+}

Angular/src/app/demo/service/nodeservice.ts

@@ -0,0 +1,34 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { TreeNode } from 'primeng/api';
+
+@Injectable()
+export class NodeService {
+
+    constructor(private http: HttpClient) { }
+
+    getFiles() {
+    return this.http.get<any>('assets/demo/data/files.json')
+      .toPromise()
+      .then(res => res.data as TreeNode[]);
+    }
+
+    getLazyFiles() {
+    return this.http.get<any>('assets/demo/data/files-lazy.json')
+      .toPromise()
+      .then(res => res.data as TreeNode[]);
+    }
+
+    getFilesystem() {
+    return this.http.get<any>('assets/demo/data/filesystem.json')
+      .toPromise()
+      .then(res => res.data as TreeNode[]);
+    }
+
+    getLazyFilesystem() {
+    return this.http.get<any>('assets/demo/data/filesystem-lazy.json')
+      .toPromise()
+      .then(res => res.data as TreeNode[]);
+    }
+}

Angular/src/app/demo/service/photoservice.ts

@@ -0,0 +1,17 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { Image } from '../domain/image';
+
+@Injectable()
+export class PhotoService {
+
+    constructor(private http: HttpClient) { }
+
+    getImages() {
+    return this.http.get<any>('assets/demo/data/photos.json')
+      .toPromise()
+      .then(res => res.data as Image[])
+      .then(data => data);
+    }
+}

Angular/src/app/demo/service/productservice.ts

@@ -0,0 +1,38 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { Product } from '../domain/product';
+
+@Injectable()
+export class ProductService {
+
+    constructor(private http: HttpClient) { }
+
+    getProductsSmall() {
+        return this.http.get<any>('assets/demo/data/products-small.json')
+        .toPromise()
+        .then(res => res.data as Product[])
+        .then(data => data);
+    }
+
+    getProducts() {
+        return this.http.get<any>('assets/demo/data/products.json')
+        .toPromise()
+        .then(res => res.data as Product[])
+        .then(data => data);
+    }
+
+    getProductsMixed() {
+        return this.http.get<any>('assets/demo/data/products-mixed.json')
+        .toPromise()
+        .then(res => res.data as Product[])
+        .then(data => data);
+    }
+
+    getProductsWithOrdersSmall() {
+        return this.http.get<any>('assets/demo/data/products-orders-small.json')
+        .toPromise()
+        .then(res => res.data as Product[])
+        .then(data => data);
+    }
+}

Angular/src/app/demo/view/buttondemo.component.html

@@ -0,0 +1,116 @@
+<div class="grid button-demo">
+	<div class="col-12 md:col-6">
+		<div class="card">
+			<h5>Default</h5>
+			<p-button label="Submit" class="mr-2 mb-2"></p-button>
+			<p-button label="Disabled" disabled="true" class="mr-2 mb-2"></p-button>
+            <p-button label="Link" styleClass="p-button-link mr-2"></p-button>
+		</div>
+		<div class="card">
+			<h5>Severities</h5>
+			<button pButton pRipple type="button" label="Primary" class="mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Secondary" class="p-button-secondary mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Success" class="p-button-success mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Info" class="p-button-info mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Warning" class="p-button-warning mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Help" class="p-button-help mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Danger" class="p-button-danger mr-2 mb-2"></button>
+		</div>
+		<div class="card">
+			<h5>Text</h5>
+			<button pButton pRipple type="button" label="Primary" class="p-button-text mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Secondary" class="p-button-secondary p-button-text mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Success" class="p-button-success p-button-text mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Info" class="p-button-info p-button-text mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Warning" class="p-button-warning p-button-text mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Help" class="p-button-help p-button-text mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Danger" class="p-button-danger p-button-text mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Plain" class="p-button-text p-button-plain mr-2 mb-2"></button>
+		</div>
+		<div class="card">
+			<h5>Outlined</h5>
+			<button pButton pRipple type="button" label="Primary" class="p-button-outlined mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Secondary" class="p-button-outlined p-button-secondary mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Success" class="p-button-outlined p-button-success mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Info" class="p-button-outlined p-button-info mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Warning" class="p-button-outlined p-button-warning mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Help" class="p-button-outlined p-button-help mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Danger" class="p-button-outlined p-button-danger mr-2 mb-2"></button>
+		</div>
+		<div class="card">
+			<h5>Button Set</h5>
+			<span class="p-buttonset">
+				<button pButton pRipple label="Save" icon="pi pi-check"></button>
+				<button pButton pRipple label="Delete" icon="pi pi-trash"></button>
+				<button pButton pRipple label="Cancel" icon="pi pi-times"></button>
+			</span>
+		</div>
+		<div class="card">
+			<h5>SplitButton</h5>
+			<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-info mr-2 mb-2"></p-splitButton>
+			<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-success mr-2 mb-2"></p-splitButton>
+			<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-warning mr-2 mb-2"></p-splitButton>
+			<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-help mr-2 mb-2"></p-splitButton>
+			<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-danger mr-2 mb-2"></p-splitButton>
+		</div>
+	</div>
+	<div class="col-12 md:col-6">
+		<div class="card">
+			<h5>Icons</h5>
+			<p-button icon="pi pi-star" class="mr-2 mb-2"></p-button>
+			<p-button label="Submit" icon="pi pi-bookmark" class="mr-2 mb-2"></p-button>
+			<p-button label="Submit" icon="pi pi-bookmark" iconPos="right" class="mr-2 mb-2"></p-button>
+		</div>
+		<div class="card">
+			<h5>Raised</h5>
+			<button pButton pRipple type="button" label="Primary" class="p-button-raised mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Secondary" class="p-button-raised p-button-secondary mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Success" class="p-button-raised p-button-success mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Info" class="p-button-raised p-button-info mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Warning" class="p-button-raised p-button-warning mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Help" class="p-button-raised p-button-help mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Danger" class="p-button-raised p-button-danger mr-2 mb-2"></button>
+		</div>
+		<div class="card">
+			<h5>Rounded</h5>
+			<button pButton pRipple type="button" label="Primary" class="p-button-rounded mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Secondary" class="p-button-rounded p-button-secondary mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Success" class="p-button-rounded p-button-success mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Info" class="p-button-rounded p-button-info mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Warning" class="p-button-rounded p-button-warning mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Help" class="p-button-rounded p-button-help mr-2 mb-2"></button>
+			<button pButton pRipple type="button" label="Danger" class="p-button-rounded p-button-danger mr-2 mb-2"></button>
+		</div>
+		<div class="card">
+			<h5>Rounded Icons</h5>
+			<button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded mr-2 mb-2"></button>
+			<button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary mr-2 mb-2"></button>
+			<button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success mr-2 mb-2"></button>
+			<button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info mr-2 mb-2"></button>
+			<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning mr-2 mb-2"></button>
+			<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help mr-2 mb-2"></button>
+			<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger mr-2 mb-2"></button>
+		</div>
+		<div class="card">
+			<h5>Rounded Text</h5>
+			<button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded p-button-text mr-2 mb-2"></button>
+			<button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text mr-2 mb-2"></button>
+			<button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-button-text mr-2 mb-2"></button>
+			<button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info p-button-text mr-2 mb-2"></button>
+			<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text mr-2 mb-2"></button>
+			<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text mr-2 mb-2"></button>
+			<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text mr-2 mb-2"></button>
+			<button pButton pRipple type="button" icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain mr-2 mb-2"></button>
+		</div>
+		<div class="card">
+			<h5>Rounded Outlined</h5>
+			<button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded p-button-outlined mr-2 mb-2"></button>
+			<button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined mr-2 mb-2"></button>
+			<button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined mr-2 mb-2"></button>
+			<button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined mr-2 mb-2"></button>
+			<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined mr-2 mb-2"></button>
+			<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined mr-2 mb-2"></button>
+			<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined mr-2 mb-2"></button>
+		</div>
+	</div>
+</div>

Angular/src/app/demo/view/buttondemo.component.ts

@@ -0,0 +1,28 @@
+import {Component, OnInit} from '@angular/core';
+import {MenuItem} from 'primeng/api';
+import {AppBreadcrumbService} from '../../app.breadcrumb.service';
+
+@Component({
+    templateUrl: './buttondemo.component.html'
+})
+export class ButtonDemoComponent implements OnInit {
+
+    items: MenuItem[];
+
+    constructor(private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'UI Kit' },
+            { label: 'Button', routerLink: ['/uikit/button'] }
+        ]);
+    }
+
+    ngOnInit() {
+        this.items = [
+            {label: 'Update', icon: 'pi pi-refresh'},
+            {label: 'Delete', icon: 'pi pi-times'},
+            {label: 'Angular.io', icon: 'pi pi-info', url: 'http://angular.io'},
+            {separator: true},
+            {label: 'Setup', icon: 'pi pi-cog'}
+        ];
+    }
+}

Angular/src/app/demo/view/chartsdemo.component.html

@@ -0,0 +1,42 @@
+<div class="grid p-fluid">
+    <div class="col-12 lg:col-6">
+        <div class="card">
+            <h5 class="centerText">Linear Chart</h5>
+            <p-chart type="line" [data]="lineData" [options]="lineOptions"></p-chart>
+        </div>
+
+        <div class="card">
+            <h5 class="centerText">Pie Chart</h5>
+            <div class="flex justify-content-center">
+                <p-chart type="pie" [data]="pieData" [options]="pieOptions" [style]="{'width': '50%'}"></p-chart>
+            </div>
+        </div>
+
+        <div class="card">
+            <h5 class="centerText">Polar Area Chart</h5>
+            <div class="flex justify-content-center">
+                <p-chart type="polarArea" [data]="polarData" [options]="polarOptions" [style]="{'width': '50%'}"></p-chart>
+            </div>
+        </div>
+    </div>
+    <div class="col-12 lg:col-6">
+        <div class="card">
+            <h5 class="centerText">Bar Chart</h5>
+            <p-chart type="bar" [data]="barData" [options]="barOptions"></p-chart>
+        </div>
+
+        <div class="card">
+            <h5 class="centerText">Doughnut Chart</h5>
+            <div class="flex justify-content-center">
+                <p-chart type="doughnut" [data]="doughnutData" [options]="doughnutOptions" [style]="{'width': '50%'}"></p-chart>
+            </div>
+        </div>
+
+        <div class="card">
+            <h5 class="centerText">Radar Chart</h5>
+            <div class="flex justify-content-center">
+                <p-chart type="radar" [data]="radarData" [options]="radarOptions" [style]="{'width': '50%'}"></p-chart>
+            </div>
+        </div>
+    </div>
+</div>

Angular/src/app/demo/view/chartsdemo.component.ts

@@ -0,0 +1,304 @@
+import {Component, OnInit} from '@angular/core';
+import { AppComponent } from 'src/app/app.component';
+import { AppMainComponent } from 'src/app/app.main.component';
+import {AppBreadcrumbService} from '../../app.breadcrumb.service';
+
+@Component({
+    templateUrl: './chartsdemo.component.html'
+})
+export class ChartsDemoComponent implements OnInit {
+
+    lineData: any;
+
+    barData: any;
+
+    pieData: any;
+
+    doughnutData: any;
+
+    polarData: any;
+
+    radarData: any;
+
+    lineOptions: any;
+
+    barOptions: any;
+
+    pieOptions: any;
+
+    doughnutOptions: any;
+
+    polarOptions: any;
+
+    radarOptions: any;
+
+    constructor(public app: AppComponent, public appMain: AppMainComponent, private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'UI Kit' },
+            { label: 'Chart', routerLink: ['/uikit/charts'] }
+        ]);
+    }
+
+    ngOnInit() {
+
+        this.lineData = this.getLineData();
+        this.barData = this.getBarData();
+        this.pieData = this.getPieData();
+        this.doughnutData = this.getPieData();
+        this.polarData = this.getPolarData();
+
+        this.lineOptions = this.getChartOptions();
+        this.barOptions = this.getChartOptions();
+        this.pieOptions = this.getChartOptions2();
+        this.doughnutOptions = this.getChartOptions2();
+        this.polarOptions = this.getChartOptions3();
+        this.radarOptions = this.getChartOptions3();
+
+        this.appMain['refreshChart'] = () => {
+            this.lineData = this.getLineData();
+            this.barData = this.getBarData();
+            this.pieData = this.getPieData();
+            this.doughnutData = this.getPieData();
+            this.polarData = this.getPolarData();
+
+            this.lineOptions = this.getChartOptions();
+            this.barOptions = this.getChartOptions();
+            this.pieOptions = this.getChartOptions2();
+            this.doughnutOptions = this.getChartOptions2();
+            this.polarOptions = this.getChartOptions3();
+            this.radarOptions = this.getChartOptions3();
+        };
+
+        this.radarData = {
+            labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+            datasets: [
+                {
+                    label: 'First Dataset',
+                    backgroundColor: 'rgba(54, 162, 235,0.2)',
+                    borderColor: 'rgba(54, 162, 235,1)',
+                    pointBackgroundColor: 'rgba(54, 162, 235,1)',
+                    pointBorderColor: '#fff',
+                    pointHoverBackgroundColor: '#fff',
+                    pointHoverBorderColor: 'rgba(54, 162, 235,1)',
+                    data: [65, 59, 90, 81, 56, 55, 40]
+                },
+                {
+                    label: 'Second Dataset',
+                    backgroundColor: 'rgba(255, 99, 132,0.2)',
+                    borderColor: 'rgba(255, 99, 132,1)',
+                    pointBackgroundColor: 'rgba(255, 99, 132,1)',
+                    pointBorderColor: '#fff',
+                    pointHoverBackgroundColor: '#fff',
+                    pointHoverBorderColor: 'rgba(255, 99, 132,1)',
+                    data: [28, 48, 40, 19, 96, 27, 100]
+                }
+            ]
+        };
+    }
+
+    getLineData() {
+        const isLight = this.app.layoutMode === 'light';
+        const dataset1Color = isLight ? '#00ACC1' : '#4DD0E1';
+        const dataset2Color = isLight ? '#FF9800' : '#FFB74D';
+
+        return {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'First Dataset',
+                    data: [65, 59, 80, 81, 56, 55, 40],
+                    fill: false,
+                    backgroundColor: dataset1Color,
+                    borderColor: dataset1Color,
+                    tension: .4
+                },
+                {
+                    label: 'Second Dataset',
+                    data: [28, 48, 40, 19, 86, 27, 90],
+                    fill: false,
+                    backgroundColor: dataset2Color,
+                    borderColor: dataset2Color,
+                    tension: .4
+                }
+            ]
+        };
+    }
+
+    getBarData() {
+        const isLight = this.app.layoutMode === 'light';
+        const dataset1Color = isLight ? '#00ACC1' : '#4DD0E1';
+        const dataset2Color = isLight ? '#FF9800' : '#FFB74D';
+
+        return {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'First Dataset',
+                    backgroundColor: dataset1Color,
+                    borderColor: dataset1Color,
+                    data: [65, 59, 80, 81, 56, 55, 40]
+                },
+                {
+                    label: 'Second Dataset',
+                    backgroundColor: dataset2Color,
+                    borderColor: dataset2Color,
+                    data: [28, 48, 40, 19, 86, 27, 90]
+                }
+            ]
+        };
+    }
+
+    getPieData() {
+        const { limeColor, blueColor, tealColor, orangeColor } = this.getColors();
+        const borderColor = getComputedStyle(document.body).getPropertyValue('--divider-color') || 'rgba(160, 167, 181, .3)';
+
+        return {
+            labels: ['A', 'B', 'C', 'D'],
+            datasets: [
+                {
+                    data: [540, 325, 702, 421],
+                    backgroundColor: [
+                        blueColor,
+                        tealColor,
+                        limeColor,
+                        orangeColor
+                    ],
+                    borderColor
+                }]
+        };
+    }
+
+    getPolarData() {
+        const { limeColor, blueColor, tealColor, orangeColor } = this.getColors();
+        const borderColor = getComputedStyle(document.body).getPropertyValue('--divider-color') || 'rgba(160, 167, 181, .3)';
+
+        return {
+            datasets: [{
+                data: [
+                    11,
+                    16,
+                    7,
+                    3
+                ],
+                backgroundColor: [
+                    blueColor,
+                    tealColor,
+                    limeColor,
+                    orangeColor
+                ],
+                borderColor,
+                label: 'Dataset'
+            }],
+            labels: [
+                'A',
+                'B',
+                'C',
+                'D'
+            ]
+        };
+    }
+
+    getColors() {
+        const isLight = this.app.layoutMode === 'light';
+        return {
+            pinkColor: isLight ? '#EC407A' : '#F48FB1',
+            purpleColor: isLight ? '#AB47BC' : '#CE93D8',
+            deeppurpleColor: isLight ? '#7E57C2' : '#B39DDB',
+            indigoColor: isLight ? '#5C6BC0' : '#9FA8DA',
+            blueColor: isLight ? '#42A5F5' : '#90CAF9',
+            lightblueColor: isLight ? '#29B6F6' : '#81D4FA',
+            cyanColor: isLight ? '#00ACC1' : '#4DD0E1',
+            tealColor: isLight ? '#26A69A' : '#80CBC4',
+            greenColor: isLight ? '#66BB6A' : '#A5D6A7',
+            lightgreenColor: isLight ? '#9CCC65' : '#C5E1A5',
+            limeColor: isLight ? '#D4E157' : '#E6EE9C',
+            yellowColor: isLight ? 'FFEE58' : '#FFF59D',
+            amberColor: isLight ? '#FFCA28' : '#FFE082',
+            orangeColor: isLight ? '#FFA726' : '#FFCC80',
+            deeporangeColor: isLight ? '#FF7043' : '#FFAB91',
+            brownColor: isLight ? '#8D6E63' : '#BCAAA4'
+        };
+    }
+
+    getChartOptions() {
+        const textColor = getComputedStyle(document.body).getPropertyValue('--text-color') || 'rgba(0, 0, 0, 0.87)';
+        const gridLinesColor = getComputedStyle(document.body).getPropertyValue('--divider-color') || 'rgba(160, 167, 181, .3)';
+        const fontFamily = getComputedStyle(document.body).getPropertyValue('--font-family');
+        return {
+            plugins: {
+                legend: {
+                    display: true,
+                    labels: {
+                        fontFamily,
+                        fontColor: textColor,
+                    }
+                }
+            },
+            responsive: true,
+            scales: {
+                y: {
+                    ticks: {
+                        fontFamily,
+                        color: textColor
+                    },
+                    grid: {
+                        color: gridLinesColor
+                    }
+                },
+                x: {
+                    ticks: {
+                        fontFamily,
+                        color: textColor
+                    },
+                    grid: {
+                        color: gridLinesColor
+                    }
+                }
+            }
+        };
+    }
+
+    getChartOptions2() {
+        const textColor = getComputedStyle(document.body).getPropertyValue('--text-color') || 'rgba(0, 0, 0, 0.87)';
+        const fontFamily = getComputedStyle(document.body).getPropertyValue('--font-family');
+        return {
+            plugins: {
+                legend: {
+                    display: true,
+                    labels: {
+                        fontFamily,
+                        fontColor: textColor,
+                    }
+                }
+            }
+        };
+    }
+
+    getChartOptions3() {
+        const textColor = getComputedStyle(document.body).getPropertyValue('--text-color') || 'rgba(0, 0, 0, 0.87)';
+        const fontFamily = getComputedStyle(document.body).getPropertyValue('--font-family');
+        const gridLinesColor = getComputedStyle(document.body).getPropertyValue('--divider-color') || 'rgba(160, 167, 181, .3)';
+
+        return {
+            plugins: {
+                legend: {
+                    display: true,
+                    labels: {
+                        fontFamily,
+                        fontColor: textColor,
+                    }
+                }
+            },
+            scales: {
+                r: {
+                    grid: {
+                        color: gridLinesColor
+                    },
+                    pointLabels: {
+                        fontColor: textColor
+                    }
+                }
+            }
+        };
+    }
+}

Angular/src/app/demo/view/dashboard.component.html

@@ -0,0 +1,406 @@
+<div class="grid dashboard">
+    <div class="col-12 md:col-6 lg:col-3">
+        <div class="card overview-box flex flex-column pt-2">
+            <div class="flex align-items-center muted-text">
+                <i class="pi pi-shopping-cart"></i>
+                <h6 class="m-0" [ngClass]="{'pl-2': !app.isRTL, 'pr-2': app.isRTL}">Orders</h6>
+                <div [ngClass]="{'ml-auto': !app.isRTL, 'mr-auto': app.isRTL}">
+                    <button pButton pRipple type="button" icon="pi pi-ellipsis-h" class="p-button-rounded p-button-text p-button-plain" (click)="menu1.toggle($event)"></button>
+                    <p-menu #menu1 [popup]="true" [model]="[{label: 'Update', icon: 'pi pi-fw pi-refresh'},{label: 'Edit', icon: 'pi pi-fw pi-pencil'}]"></p-menu>
+                </div>
+            </div>
+            <div class="flex justify-content-between mt-3 flex-wrap">
+                <div class="flex flex-column" style="width: 80px">
+                    <span class="mb-1 fs-xlarge">640</span>
+                    <span class="overview-status p-1 teal-bgcolor fs-small">1420 Completed</span>
+                </div>
+                <div class="flex align-items-end">
+                    <p-chart type="line" [data]="overviewChartData1" [options]="overviewChartOptions1" responsive="true" height="60px" width="160px"></p-chart>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12 md:col-6 lg:col-3">
+        <div class="card overview-box flex flex-column pt-2">
+            <div class="flex align-items-center muted-text">
+                <i class="pi pi-dollar"></i>
+                <h6 class="m-0" [ngClass]="{'pl-2': !app.isRTL, 'pr-2': app.isRTL}">Revenue</h6>
+                <div [ngClass]="{'ml-auto': !app.isRTL, 'mr-auto': app.isRTL}">
+                    <button pButton pRipple type="button" icon="pi pi-ellipsis-h" class="p-button-rounded p-button-text p-button-plain" (click)="menu2.toggle($event)"></button>
+                    <p-menu #menu2 [popup]="true" [model]="[{label: 'Update', icon: 'pi pi-fw pi-refresh'},{label: 'Edit', icon: 'pi pi-fw pi-pencil'}]"></p-menu>
+                </div>
+            </div>
+            <div class="flex justify-content-between mt-3 flex-wrap">
+                <div class="flex flex-column" style="width: 80px">
+                    <span class="mb-1 fs-xlarge">$57K</span>
+                    <span class="overview-status p-1 teal-bgcolor fs-small">$9,640 Income</span>
+                </div>
+                <div class="flex align-items-end">
+                    <p-chart type="line" [data]="overviewChartData2" [options]="overviewChartOptions2" responsive="true" height="60px" width="160px"></p-chart>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12 md:col-6 lg:col-3">
+        <div class="card overview-box flex flex-column pt-2">
+            <div class="flex align-items-center muted-text">
+                <i class="pi pi-users"></i>
+                <h6 class="m-0" [ngClass]="{'pl-2': !app.isRTL, 'pr-2': app.isRTL}">Customers</h6>
+                <div [ngClass]="{'ml-auto': !app.isRTL, 'mr-auto': app.isRTL}">
+                    <button pButton pRipple type="button" icon="pi pi-ellipsis-h" class="p-button-rounded p-button-text p-button-plain" (click)="menu3.toggle($event)"></button>
+                    <p-menu #menu3 [popup]="true" [model]="[{label: 'Update', icon: 'pi pi-fw pi-refresh'},{label: 'Edit', icon: 'pi pi-fw pi-pencil'}]"></p-menu>
+                </div>
+            </div>
+            <div class="flex justify-content-between mt-3 flex-wrap">
+                <div class="flex flex-column" style="width: 80px">
+                    <span class="mb-1 fs-xlarge">8572</span>
+                    <span class="overview-status p-1 pink-bgcolor fs-small">25402 Registered</span>
+                </div>
+                <div class="flex align-items-end">
+                    <p-chart type="line" [data]="overviewChartData3" [options]="overviewChartOptions3" responsive="true" height="60px" width="160px"></p-chart>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12 md:col-6 lg:col-3">
+        <div class="card overview-box flex flex-column pt-2">
+            <div class="flex align-items-center muted-text">
+                <i class="pi pi-comments"></i>
+                <h6 class="m-0" [ngClass]="{'pl-2': !app.isRTL, 'pr-2': app.isRTL}">Comments</h6>
+                <div [ngClass]="{'ml-auto': !app.isRTL, 'mr-auto': app.isRTL}">
+                    <button pButton pRipple type="button" icon="pi pi-ellipsis-h" class="p-button-rounded p-button-text p-button-plain" (click)="menu4.toggle($event)"></button>
+                    <p-menu #menu4 [popup]="true" [model]="[{label: 'Update', icon: 'pi pi-fw pi-refresh'},{label: 'Edit', icon: 'pi pi-fw pi-pencil'}]"></p-menu>
+                </div>
+            </div>
+            <div class="flex justify-content-between mt-3 flex-wrap">
+                <div class="flex flex-column" style="width: 80px">
+                    <span class="mb-1 fs-xlarge">805</span>
+                    <span class="overview-status p-1 teal-bgcolor fs-small">85 Responded</span>
+                </div>
+                <div class="flex align-items-end">
+                    <p-chart type="line" [data]="overviewChartData4" [options]="overviewChartOptions4" responsive="true" height="60px" width="160px"></p-chart>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12 lg:col-6">
+        <div class="card height-100">
+            <div class="card-header">
+                <h5>Contact</h5>
+                <div>
+                    <button pButton pRipple type="button" icon="pi pi-ellipsis-h" class="p-button-rounded p-button-text p-button-plain" (click)="menu5.toggle($event)"></button>
+                    <p-menu #menu5 [popup]="true" [model]="[{label: 'New', icon: 'pi pi-fw pi-plus'},{label: 'Edit', icon: 'pi pi-fw pi-pencil'},{label: 'Delete', icon: 'pi pi-fw pi-trash'}]"></p-menu>
+                </div>
+            </div>
+
+            <ul class="widget-list">
+                <li class="flex align-items-center py-3">
+                    <div class="person-item flex align-items-center">
+                        <img src="assets/demo/images/avatar/xuxuefeng.png">
+                        <div [ngClass]="{'ml-2': !app.isRTL, 'mr-2': app.isRTL}">
+                            <div>Xuxue Feng</div>
+                            <small class="muted-text">feng@ultima.org</small>
+                        </div>
+                    </div>
+                    <span class="person-tag indigo-bgcolor p-1 fs-small" [ngClass]="{'ml-auto': !app.isRTL, 'mr-auto': app.isRTL}">Accounting</span>
+                    <span class="person-tag orange-bgcolor p-1 fs-small" [ngClass]="{'ml-2': !app.isRTL, 'mr-2': app.isRTL}">Sales</span>
+                </li>
+
+                <li class="flex align-items-center py-3">
+                    <div class="person-item flex align-items-center">
+                        <img src="assets/demo/images/avatar/elwinsharvill.png">
+                        <div [ngClass]="{'ml-2': !app.isRTL, 'mr-2': app.isRTL}">
+                            <div>Elwin Sharvill</div>
+                            <small class="muted-text">sharvill@ultima.org</small>
+                        </div>
+                    </div>
+                    <span class="person-tag teal-bgcolor p-1 fs-small" [ngClass]="{'ml-auto': !app.isRTL, 'mr-auto': app.isRTL}">Finance</span>
+                    <span class="person-tag orange-bgcolor p-1 fs-small" [ngClass]="{'ml-2': !app.isRTL, 'mr-2': app.isRTL}">Sales</span>
+                </li>
+
+                <li class="flex align-items-center py-3">
+                    <div class="person-item flex align-items-center">
+                        <img src="assets/demo/images/avatar/avatar-1.png">
+                        <div [ngClass]="{'ml-2': !app.isRTL, 'mr-2': app.isRTL}">
+                            <div>Anna Fali</div>
+                            <small class="muted-text">fali@ultima.org</small>
+                        </div>
+                    </div>
+                    <span class="person-tag pink-bgcolor p-1 fs-small" [ngClass]="{'ml-auto': !app.isRTL, 'mr-auto': app.isRTL}">Management</span>
+                </li>
+
+                <li class="flex align-items-center py-3">
+                    <div class="person-item flex align-items-center">
+                        <img src="assets/demo/images/avatar/avatar-2.png">
+                        <div [ngClass]="{'ml-2': !app.isRTL, 'mr-2': app.isRTL}">
+                            <div>Jon Stone</div>
+                            <small class="muted-text">stone@ultima.org</small>
+                        </div>
+                    </div>
+                    <span class="person-tag pink-bgcolor p-1 fs-small" [ngClass]="{'ml-auto': !app.isRTL, 'mr-auto': app.isRTL}">Management</span>
+                    <span class="person-tag teal-bgcolor p-1 fs-small" [ngClass]="{'ml-2': !app.isRTL, 'mr-2': app.isRTL}">Finance</span>
+                </li>
+
+                <li class="flex align-items-center py-3">
+                    <div class="person-item flex align-items-center">
+                        <img src="assets/demo/images/avatar/avatar-3.png">
+                        <div [ngClass]="{'ml-2': !app.isRTL, 'mr-2': app.isRTL}">
+                            <div>Stephen Shaw</div>
+                            <small class="muted-text">shaw@ultima.org</small>
+                        </div>
+                    </div>
+                    <span class="person-tag teal-bgcolor p-1 fs-small" [ngClass]="{'ml-auto': !app.isRTL, 'mr-auto': app.isRTL}">Finance</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <div class="col-12 lg:col-6">
+        <div class="card height-100">
+            <div class="card-header">
+                <h5>Order Graph</h5>
+                <div>
+                    <button pButton pRipple type="button" icon="pi pi-ellipsis-h" class="p-button-rounded p-button-text p-button-plain" (click)="menu6.toggle($event)"></button>
+                    <p-menu #menu6 [popup]="true" [model]="[{label: 'Update', icon: 'pi pi-fw pi-refresh'},{label: 'Edit', icon: 'pi pi-fw pi-pencil'}]"></p-menu>
+                </div>
+            </div>
+            <p-chart type="line" [data]="ordersChart" [options]="ordersOptions"></p-chart>
+        </div>
+    </div>
+
+    <div class="col-12 lg:col-6">
+        <div class="card height-100 widget-timeline">
+            <div class="card-header">
+                <h5>Timeline</h5>
+                <div>
+                    <button pButton pRipple type="button" icon="pi pi-ellipsis-h" class="p-button-rounded p-button-text p-button-plain" (click)="menu7.toggle($event)"></button>
+                    <p-menu #menu7 [popup]="true" [model]="[{label: 'Update', icon: 'pi pi-fw pi-refresh'},{label: 'Edit', icon: 'pi pi-fw pi-pencil'}]"></p-menu>
+                </div>
+            </div>
+
+            <p-timeline [value]="timelineEvents" align="left" styleClass="customized-timeline">
+                <ng-template pTemplate="marker" let-event>
+                    <span class="custom-marker shadow-2 p-2" [style.backgroundColor]="event.color">
+                        <i class="marker-icon" [ngClass]="event.icon"></i>
+                    </span>
+                </ng-template>
+                <ng-template pTemplate="content" let-event>
+                    <p-card styleClass="mb-3" [header]="event.status" [subheader]="event.date">
+                        <img *ngIf="event.image" [src]="'assets/showcase/images/demo/product/' + event.image" [alt]="event.name" width="200" class="shadow-2" />
+                        <p>{{event.description}}</p>
+                    </p-card>
+                </ng-template>
+            </p-timeline>
+        </div>
+    </div>
+
+    <div class="col-12 md:col-12 lg:col-6">
+        <div class="card height-100">
+            <p-table [value]="products" [paginator]="true" [rows]="8" styleClass="p-datatable-products">
+                <ng-template pTemplate="header">
+                    <tr>
+                        <th style="width:5rem">Image</th>
+                        <th pSortableColumn="name">Name
+                            <p-sortIcon field="name"></p-sortIcon>
+                        </th>
+                        <th pSortableColumn="category">Category
+                            <p-sortIcon field="category"></p-sortIcon>
+                        </th>
+                        <th pSortableColumn="price">Price
+                            <p-sortIcon field="price"></p-sortIcon>
+                        </th>
+                        <th style="width:4rem">View</th>
+                    </tr>
+                </ng-template>
+                <ng-template pTemplate="body" let-product>
+                    <tr>
+                        <td>
+                            <img [src]="'assets/demo/images/product/' + product.image" [alt]="product.image" width="50px" class="shadow-4" />
+                        </td>
+                        <td>
+                            <span class="p-column-title">Name</span>
+                            {{product.name}}
+                        </td>
+                        <td>
+                            <span class="p-column-title">Category</span>
+                            {{product.category}}
+                        </td>
+                        <td>
+                            <span class="p-column-title">Price</span>
+                            {{product.price | currency:'USD'}}
+                        </td>
+                        <td>
+                            <span class="p-column-title">View</span>
+                            <button pRipple pButton type="button" icon="pi pi-search" class="p-button-rounded p-button-text mb-1" [ngClass]="{'mr-2': !app.isRTL, 'ml-2': app.isRTL}"></button>
+                        </td>
+                    </tr>
+                </ng-template>
+            </p-table>
+        </div>
+    </div>
+
+    <div class="col-12 lg:col-6">
+        <div class="card height-100">
+            <div class="card-header">
+                <h5>Chat</h5>
+                <div>
+                    <button pButton pRipple type="button" icon="pi pi-ellipsis-h" class="p-button-rounded p-button-text p-button-plain" (click)="menu8.toggle($event)"></button>
+                    <p-menu #menu8 [popup]="true" [model]="[{label: 'View Media', icon: 'pi pi-fw pi-images'},{label: 'Starred Messages', icon: 'pi pi-fw pi-star-o'},{label: 'Search', icon: 'pi pi-fw pi-search'}]"></p-menu>
+                </div>
+            </div>
+            <div class="widget-chat">
+                <ul #chatcontainer>
+                    <li *ngFor="let chartMessage of chatMessages; let last = last;" class="flex align-items-start" [ngClass]="{'from': !!chartMessage.from, 'own justify-content-end': !chartMessage.from, 'mb-3': !last, 'mb-1': last}">
+                        <img *ngIf="!!chartMessage.url" [src]="chartMessage.url" alt="avatar" [ngClass]="{'mr-2': !app.isRTL, 'ml-2': app.isRTL}">
+                        <div class="messages flex flex-column" [ngClass]="{'align-items-start': !!chartMessage.from, 'align-items-end': !chartMessage.from}">
+                            <span *ngFor="let message of chartMessage.messages; let first = first" class="message" [ngClass]="{'cyan-bgcolor': !!chartMessage.from, 'pink-bgcolor': !chartMessage.from, 'mt-1': !first}">
+                                {{message}}
+                            </span>
+                        </div>
+                    </li>
+                </ul>
+                <div class="p-inputgroup write-message mt-3">
+                    <span class="p-inputgroup-addon">
+                        <button pButton pRipple type="button" icon="pi pi-plus-circle" class="p-button-text p-button-plain"></button>
+                    </span>
+                    <input #chatInput type="text" pInputText placeholder="Write your message (Hint: 'PrimeNG')" (keydown)="onChatKeydown($event)">
+                    <span class="p-inputgroup-addon">
+                        <button pButton pRipple type="button" icon="pi pi-video" class="p-button-text p-button-plain"></button>
+                    </span>
+                    <span class="p-inputgroup-addon">
+                        <button pButton pRipple type="button" icon="pi pi-clock" (click)="op.toggle($event)" class="p-button-text p-button-plain"></button>
+                        <p-overlayPanel #op styleClass="emoji">
+                            <ng-template pTemplate>
+                                <button *ngFor="let emoji of chatEmojis;" pButton pRipple (click)="op.hide(); onEmojiClick(chatInput, emoji)" type="button" [label]="emoji" class="emoji-button p-2 p-button-text p-button-plain"></button>
+                            </ng-template>
+                        </p-overlayPanel>
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12 lg:col-3">
+        <div class="card height-100">
+            <div class="card-header">
+                <h5>Activity</h5>
+                <div>
+                    <button pButton pRipple type="button" icon="pi pi-ellipsis-h" class="p-button-rounded p-button-text p-button-plain" (click)="menu9.toggle($event)"></button>
+                    <p-menu #menu9 [popup]="true" [model]="[{label: 'Update', icon: 'pi pi-fw pi-refresh'},{label: 'Edit', icon: 'pi pi-fw pi-pencil'}]"></p-menu>
+                </div>
+            </div>
+
+            <ul class="widget-activity">
+                <li>
+                    <div class="activity-item flex flex-column">
+                        <div class="activity-title mb-1">Income</div>
+                        <div class="activity-subtext mb-2">30 November, 16.20</div>
+                        <p-progressBar [value]="50" [showValue]="false"></p-progressBar>
+                    </div>
+                </li>
+                <li>
+                    <div class="activity-item flex flex-column">
+                        <div class="activity-title mb-1">Tax</div>
+                        <div class="activity-subtext mb-2">1 December, 15.27</div>
+                        <p-progressBar [value]="15" [showValue]="false"></p-progressBar>
+                    </div>
+                </li>
+                <li>
+                    <div class="activity-item flex flex-column">
+                        <div class="activity-title mb-1">Invoices</div>
+                        <div class="activity-subtext mb-2">1 December, 15.28</div>
+                        <p-progressBar [value]="78" [showValue]="false"></p-progressBar>
+                    </div>
+                </li>
+                <li>
+                    <div class="activity-item flex flex-column">
+                        <div class="activity-title mb-1">Expanses</div>
+                        <div class="activity-subtext mb-2">3 December, 09.15</div>
+                        <p-progressBar [value]="66" [showValue]="false"></p-progressBar>
+                    </div>
+                </li>
+                <li>
+                    <div class="activity-item flex flex-column">
+                        <div class="activity-title mb-1">Bonus</div>
+                        <div class="activity-subtext mb-2">1 December, 23.55</div>
+                        <p-progressBar [value]="85" [showValue]="false"></p-progressBar>
+                    </div>
+                </li>
+                <li>
+                    <div class="activity-item flex flex-column">
+                        <div class="activity-title mb-1">Revenue</div>
+                        <div class="activity-subtext mb-2">30 November, 16.20</div>
+                        <p-progressBar [value]="54" [showValue]="false"></p-progressBar>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <div class="col-12 lg:col-3">
+        <div class="card height-100">
+            <div class="card-header">
+                <h5>Best Sellers</h5>
+                <div>
+                    <button pButton pRipple type="button" icon="pi pi-ellipsis-h" class="p-button-rounded p-button-text p-button-plain" (click)="menu10.toggle($event)"></button>
+                    <p-menu #menu10 [popup]="true" [model]="[{label: 'Update', icon: 'pi pi-fw pi-refresh'},{label: 'Edit', icon: 'pi pi-fw pi-pencil'}]"></p-menu>
+                </div>
+            </div>
+            <ul class="widget-bestsellers">
+                <li>
+                    <div class="bestseller-item flex align-items-center p-3 mb-2">
+                        <img src="assets/demo/images/product/blue-band.jpg" alt="product" [ngClass]="{'mr-3': !app.isRTL, 'ml-3': app.isRTL}">
+                        <span>Blue Band</span>
+                        <span class="item-button"><a href="#"><i class="pi pi-chevron-right"></i></a></span>
+                    </div>
+
+                    <div class="bestseller-item flex align-items-center p-3 mb-2">
+                        <img src="assets/demo/images/product/bracelet.jpg" alt="product" [ngClass]="{'mr-3': !app.isRTL, 'ml-3': app.isRTL}">
+                        <span>Bracelet</span>
+                        <span class="item-button"><a href="#"><i class="pi pi-chevron-right"></i></a></span>
+                    </div>
+
+                    <div class="bestseller-item flex align-items-center p-3 mb-2">
+                        <img src="assets/demo/images/product/black-watch.jpg" alt="product" [ngClass]="{'mr-3': !app.isRTL, 'ml-3': app.isRTL}">
+                        <span>Black Watch</span>
+                        <span class="item-button"><a href="#"><i class="pi pi-chevron-right"></i></a></span>
+                    </div>
+
+                    <div class="bestseller-item flex align-items-center p-3 mb-2">
+                        <img src="assets/demo/images/product/bamboo-watch.jpg" alt="product" [ngClass]="{'mr-3': !app.isRTL, 'ml-3': app.isRTL}">
+                        <span>Bamboo Watch</span>
+                        <span class="item-button"><a href="#"><i class="pi pi-chevron-right"></i></a></span>
+                    </div>
+
+                    <div class="bestseller-item flex align-items-center p-3 mb-2">
+                        <img src="assets/demo/images/product/blue-t-shirt.jpg" alt="product" [ngClass]="{'mr-3': !app.isRTL, 'ml-3': app.isRTL}">
+                        <span>Blue T-Shirt</span>
+                        <span class="item-button"><a href="#"><i class="pi pi-chevron-right"></i></a></span>
+                    </div>
+
+                    <div class="bestseller-item flex align-items-center p-3 mb-2">
+                        <img src="assets/demo/images/product/game-controller.jpg" alt="product" [ngClass]="{'mr-3': !app.isRTL, 'ml-3': app.isRTL}">
+                        <span>Game Controller</span>
+                        <span class="item-button"><a href="#"><i class="pi pi-chevron-right"></i></a></span>
+                    </div>
+
+                    <div class="bestseller-item flex align-items-center p-3 mb-2">
+                        <img src="assets/demo/images/product/gold-phone-case.jpg" alt="product" [ngClass]="{'mr-3': !app.isRTL, 'ml-3': app.isRTL}">
+                        <span>Phone Case</span>
+                        <span class="item-button"><a href="#"><i class="pi pi-chevron-right"></i></a></span>
+                    </div>
+
+                    <div class="bestseller-item flex align-items-center p-3 mb-2">
+                        <img src="assets/demo/images/product/purple-t-shirt.jpg" alt="product" [ngClass]="{'mr-3': !app.isRTL, 'ml-3': app.isRTL}">
+                        <span>Purple T-Shirt</span>
+                        <span class="item-button"><a href="#"><i class="pi pi-chevron-right"></i></a></span>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>

Angular/src/app/demo/view/dashboard.component.ts

@@ -0,0 +1,394 @@
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { EventService } from '../service/eventservice';
+import { SelectItem } from 'primeng/api';
+import { Product } from '../domain/product';
+import { ProductService } from '../service/productservice';
+import { AppBreadcrumbService } from '../../app.breadcrumb.service';
+import { AppMainComponent } from 'src/app/app.main.component';
+import { AppComponent } from 'src/app/app.component';
+
+@Component({
+    templateUrl: './dashboard.component.html'
+})
+export class DashboardComponent implements OnInit {
+
+    cities: SelectItem[];
+
+    products: Product[];
+
+    ordersChart: any;
+
+    ordersOptions: any;
+
+    selectedCity: any;
+
+    timelineEvents: any[];
+
+    overviewChartData1: any;
+
+    overviewChartData2: any;
+
+    overviewChartData3: any;
+
+    overviewChartData4: any;
+
+    overviewChartOptions1: any;
+
+    overviewChartOptions2: any;
+
+    overviewChartOptions3: any;
+
+    overviewChartOptions4: any;
+
+    chatMessages: any[];
+
+    chatEmojis: any[];
+
+    @ViewChild('chatcontainer') chatContainerViewChild: ElementRef;
+
+    constructor(public app: AppComponent, public appMain: AppMainComponent, private productService: ProductService,
+                private eventService: EventService, private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'Dashboard', routerLink: ['/'] }
+        ]);
+    }
+
+    ngOnInit() {
+        this.productService.getProducts().then(data => this.products = data);
+
+        this.cities = [];
+        this.cities.push({ label: 'Select City', value: null });
+        this.cities.push({ label: 'New York', value: { id: 1, name: 'New York', code: 'NY' } });
+        this.cities.push({ label: 'Rome', value: { id: 2, name: 'Rome', code: 'RM' } });
+        this.cities.push({ label: 'London', value: { id: 3, name: 'London', code: 'LDN' } });
+        this.cities.push({ label: 'Istanbul', value: { id: 4, name: 'Istanbul', code: 'IST' } });
+        this.cities.push({ label: 'Paris', value: { id: 5, name: 'Paris', code: 'PRS' } });
+
+        this.chatMessages = [
+            { from: 'Ioni Bowcher', url: 'assets/demo/images/avatar/ionibowcher.png', messages: ['Hey M. hope you are well.', 'Our idea is accepted by the board. Now it’s time to execute it'] },
+            { messages: ['We did it! 🤠'] },
+            { from: 'Ioni Bowcher', url: 'assets/demo/images/avatar/ionibowcher.png', messages: ['That\'s really good!'] },
+            { messages: ['But it’s important to ship MVP ASAP'] },
+            { from: 'Ioni Bowcher', url: 'assets/demo/images/avatar/ionibowcher.png', messages: ['I’ll be looking at the process then, just to be sure 🤓'] },
+            { messages: ['That’s awesome. Thanks!'] }
+        ];
+
+        this.chatEmojis = [
+            '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😇', '😉', '😊', '🙂', '🙃', '😋', '😌', '😍', '🥰', '😘', '😗', '😙', '😚', '🤪', '😜', '😝', '😛',
+            '🤑', '😎', '🤓', '🧐', '🤠', '🥳', '🤗', '🤡', '😏', '😶', '😐', '😑', '😒', '🙄', '🤨', '🤔', '🤫', '🤭', '🤥', '😳', '😞', '😟', '😠', '😡', '🤬', '😔',
+            '😟', '😠', '😡', '🤬', '😔', '😕', '🙁', '😬', '🥺', '😣', '😖', '😫', '😩', '🥱', '😤', '😮', '😱', '😨', '😰', '😯', '😦', '😧', '😢', '😥', '😪', '🤤'
+        ];
+
+        this.ordersChart = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'],
+            datasets: [{
+                label: 'New Orders',
+                data: [31, 83, 69, 29, 62, 25, 59, 26, 46],
+                borderColor: [
+                    '#4DD0E1',
+                ],
+                backgroundColor: [
+                    'rgba(77, 208, 225, 0.8)',
+                ],
+                borderWidth: 2,
+                fill: true,
+                tension: .4
+            }, {
+                label: 'Completed Orders',
+                data: [67, 98, 27, 88, 38, 3, 22, 60, 56],
+                borderColor: [
+                    '#3F51B5',
+                ],
+                backgroundColor: [
+                    'rgba(63, 81, 181, 0.8)',
+                ],
+                borderWidth: 2,
+                fill: true,
+                tension: .4
+            }]
+        };
+
+        this.ordersOptions = this.getOrdersOptions();
+
+        this.overviewChartData1 = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'],
+            datasets: [
+                {
+                    data: [50, 64, 32, 24, 18, 27, 20, 36, 30],
+                    borderColor: [
+                        '#4DD0E1',
+                    ],
+                    backgroundColor: [
+                        'rgba(77, 208, 225, 0.8)',
+                    ],
+                    borderWidth: 2,
+                    fill: true,
+                    tension: .4
+                }
+            ]
+        };
+
+        this.overviewChartData2 = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'],
+            datasets: [
+                {
+                    data: [11, 30, 52, 35, 39, 20, 14, 18, 29],
+                    borderColor: [
+                        '#4DD0E1',
+                    ],
+                    backgroundColor: [
+                        'rgba(77, 208, 225, 0.8)',
+                    ],
+                    borderWidth: 2,
+                    fill: true,
+                    tension: .4
+                }
+            ]
+        };
+
+        this.overviewChartData3 = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'],
+            datasets: [
+                {
+                    data: [20, 29, 39, 36, 45, 24, 28, 20, 15],
+                    borderColor: [
+                        '#4DD0E1',
+                    ],
+                    backgroundColor: [
+                        'rgba(77, 208, 225, 0.8)',
+                    ],
+                    borderWidth: 2,
+                    fill: true,
+                    tension: .4
+                }
+            ]
+        };
+
+        this.overviewChartData4 = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'],
+            datasets: [
+                {
+                    data: [30, 39, 50, 21, 33, 18, 10, 24, 20],
+                    borderColor: [
+                        '#4DD0E1',
+                    ],
+                    backgroundColor: [
+                        'rgba(77, 208, 225, 0.8)',
+                    ],
+                    borderWidth: 2,
+                    fill: true,
+                    tension: .4
+                }
+            ]
+        };
+
+        this.overviewChartOptions1 = {
+            plugins: {
+                legend: {
+                    display: false
+                }
+            },
+            scales: {
+                y: {
+                    display: false
+                },
+                x: {
+                    display: false
+                }
+            },
+            tooltips: {
+                enabled: false
+            },
+            elements: {
+                point: {
+                    radius: 0
+                }
+            },
+        };
+
+        this.overviewChartOptions2 = {
+            plugins: {
+                legend: {
+                    display: false
+                }
+            },
+            scales: {
+                y: {
+                    display: false
+                },
+                x: {
+                    display: false
+                }
+            },
+            tooltips: {
+                enabled: false
+            },
+            elements: {
+                point: {
+                    radius: 0
+                }
+            },
+        };
+
+        this.overviewChartOptions3 = {
+            plugins: {
+                legend: {
+                    display: false
+                }
+            },
+            scales: {
+                y: {
+                    display: false
+                },
+                x: {
+                    display: false
+                }
+            },
+            tooltips: {
+                enabled: false
+            },
+            elements: {
+                point: {
+                    radius: 0
+                }
+            },
+        };
+
+        this.overviewChartOptions4 = {
+            plugins: {
+                legend: {
+                    display: false
+                }
+            },
+            scales: {
+                y: {
+                    display: false
+                },
+                x: {
+                    display: false
+                }
+            },
+            tooltips: {
+                enabled: false
+            },
+            elements: {
+                point: {
+                    radius: 0
+                }
+            },
+        };
+
+        this.setOverviewColors();
+
+        this.appMain['refreshChart'] = () => {
+            this.ordersOptions = this.getOrdersOptions();
+            this.setOverviewColors();
+        };
+
+        this.timelineEvents = [
+            { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#E91E63', description: 'Richard Jones (C8012) has ordered a blue t-shirt for $79.' },
+            { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#FB8C00', description: 'Order #99207 has processed succesfully.' },
+            { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-compass', color: '#673AB7', description: 'Order #99207 has shipped with shipping code 2222302090.' },
+            { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check-square', color: '#0097A7', description: 'Richard Jones (C8012) has recieved his blue t-shirt.' }
+        ];
+    }
+
+    onEmojiClick(chatInput, emoji) {
+        if (chatInput) {
+            chatInput.value += emoji;
+            chatInput.focus();
+        }
+    }
+
+    onChatKeydown(event) {
+        if (event.key === 'Enter') {
+            const message = event.currentTarget.value;
+            const lastMessage = this.chatMessages[this.chatMessages.length - 1];
+
+            if (lastMessage.from) {
+                this.chatMessages.push({ messages: [message] });
+            }
+            else {
+                lastMessage.messages.push(message);
+            }
+
+            if (message.match(/primeng|primereact|primefaces|primevue/i)) {
+                this.chatMessages.push({ from: 'Ioni Bowcher', url: 'assets/demo/images/avatar/ionibowcher.png', messages: ['Always bet on Prime!'] });
+            }
+
+            event.currentTarget.value = '';
+
+            const el = this.chatContainerViewChild.nativeElement;
+            setTimeout(() => {
+                el.scroll({
+                    top: el.scrollHeight,
+                    behavior: 'smooth'
+                });
+            }, 1);
+        }
+    }
+
+    setOverviewColors() {
+        const { pinkBorderColor, pinkBgColor, tealBorderColor, tealBgColor } = this.getOverviewColors();
+
+        this.overviewChartData1.datasets[0].borderColor[0] = tealBorderColor;
+        this.overviewChartData1.datasets[0].backgroundColor[0] = tealBgColor;
+
+        this.overviewChartData2.datasets[0].borderColor[0] = tealBorderColor;
+        this.overviewChartData2.datasets[0].backgroundColor[0] = tealBgColor;
+
+        this.overviewChartData3.datasets[0].borderColor[0] = pinkBorderColor;
+        this.overviewChartData3.datasets[0].backgroundColor[0] = pinkBgColor;
+
+        this.overviewChartData4.datasets[0].borderColor[0] = tealBorderColor;
+        this.overviewChartData4.datasets[0].backgroundColor[0] = tealBgColor;
+    }
+
+    getOverviewColors() {
+        const isLight = this.app.layoutMode === 'light';
+        return {
+            pinkBorderColor: isLight ? '#E91E63' : '#EC407A',
+            pinkBgColor: isLight ? '#F48FB1' : '#F8BBD0',
+            tealBorderColor: isLight ? '#009688' : '#26A69A',
+            tealBgColor: isLight ? '#80CBC4' : '#B2DFDB'
+        };
+    }
+
+    getOrdersOptions() {
+        const textColor = getComputedStyle(document.body).getPropertyValue('--text-color') || 'rgba(0, 0, 0, 0.87)';
+        const gridLinesColor = getComputedStyle(document.body).getPropertyValue('--divider-color') || 'rgba(160, 167, 181, .3)';
+        const fontFamily = getComputedStyle(document.body).getPropertyValue('--font-family');
+        return {
+            plugins: {
+                legend: {
+                    display: true,
+                    labels: {
+                        fontFamily,
+                        fontColor: textColor,
+                    }
+                }
+            },
+            responsive: true,
+            scales: {
+                y: {
+                    ticks: {
+                        fontFamily,
+                        color: textColor
+                    },
+                    grid: {
+                        color: gridLinesColor
+                    }
+                },
+                x: {
+                    ticks: {
+                        fontFamily,
+                        color: textColor
+                    },
+                    grid: {
+                        color: gridLinesColor
+                    }
+                }
+            }
+        };
+    }
+}

Angular/src/app/demo/view/dashboardanalytics.component.html

@@ -0,0 +1,358 @@
+<div class="grid dashboard">
+    <div class="col-12 md:col-8">
+        <div class="card height-100">
+            <div class="card-header">
+                <h5>Monthly Comparison</h5>
+                <button pRipple pButton type="button" label="Vertical/Stacked Data" class="p-button-text" [ngClass]="{'ml-auto': !app.isRTL, 'mr-auto': app.isRTL}" (click)="changeMonthlyDataView()"></button>
+            </div>
+
+            <p-chart #bar type="bar" [data]="chartMonthlyData" [options]="chartMonthlyOptions" responsive="true" height="400px"></p-chart>
+        </div>
+    </div>
+
+    <div class="col-12 md:col-4">
+        <div class="card widget-insights height-100">
+            <div class="card-header mb-2">
+                <h5>Insights</h5>
+                <div>
+                    <button pButton pRipple type="button" icon="pi pi-ellipsis-h" class="p-button-rounded p-button-text p-button-plain" (click)="menu11.toggle($event)"></button>
+                    <p-menu #menu11 [popup]="true" [model]="[{label: 'Update', icon: 'pi pi-fw pi-refresh'},{label: 'Edit', icon: 'pi pi-fw pi-pencil'}]"></p-menu>
+                </div>
+            </div>
+            <div class="card-subheader mb-2 flex align-items-center">
+                <span>November 22 - November 29</span>
+                <button pRipple pButton type="button" label="Semi/Full Data" class="p-button-text" [ngClass]="{'ml-auto': !app.isRTL, 'mr-auto': app.isRTL}" (click)="changeDoughnutDataView()"></button>
+            </div>
+            <p-chart #doughnut type="doughnut" [data]="doughnutData" [options]="doughnutOptions" responsive="true"></p-chart>
+            <div class="flex flex-column justify-content-center">
+                <div class="flex flex-row align-items-center mt-4 px-3">
+                    <i class="pi pi-thumbs-up p-3 rounded-circle lightgreen-bgcolor solid-surface-text-color"></i>
+                    <div class="flex flex-column" [ngClass]="{'ml-3': !app.isRTL, 'mr-3': app.isRTL}">
+                        <span>Best Day of the Week</span>
+                        <small>Friday</small>
+                    </div>
+                    <span class="indigo-color" [ngClass]="{'ml-auto': !app.isRTL, 'mr-auto': app.isRTL}">95</span>
+                </div>
+                <div class="flex flex-row align-items-center my-4 px-3">
+                    <i class="pi pi-thumbs-down rounded-circle p-3 orange-bgcolor solid-surface-text-color"></i>
+                    <div class="flex flex-column" [ngClass]="{'ml-3': !app.isRTL, 'mr-3': app.isRTL}">
+                        <span>Worst Day of the Week</span>
+                        <small>Saturday</small>
+                    </div>
+                    <span class="indigo-color" [ngClass]="{'ml-auto': !app.isRTL, 'mr-auto': app.isRTL}">6</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12 md:col-4">
+        <div class="card widget-social">
+            <div class="flex justify-content-between align-items-center p-3">
+                <div class="social-icon">
+                    <i class="pi pi-twitter blue-color fs-xxlarge"></i>
+                </div>
+                <div class="info flex flex-column">
+                    <span class="value">44.995</span>
+                    <span class="subtext mt-2">Retweets</span>
+                </div>
+            </div>
+
+            <div class="stats flex justify-content-between mt-3">
+                <div class="left flex flex-column ">
+                    <span class="title">Target</span>
+                    <span class="value mb-2">10.000</span>
+                    <p-progressBar [value]="50" [showValue]="false"></p-progressBar>
+                </div>
+                <div class="right flex flex-column">
+                    <span class="title">All Time Record</span>
+                    <span class="value mb-2">50.702</span>
+                    <p-progressBar [value]="24" [showValue]="false"></p-progressBar>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12 md:col-4">
+        <div class="card widget-social">
+            <div class="flex justify-content-between align-items-center p-3">
+                <div class="social-icon">
+                    <i class="pi pi-facebook indigo-color fs-xxlarge"></i>
+                </div>
+                <div class="info flex flex-column">
+                    <span class="value">44.995</span>
+                    <span class="subtext mt-2">Facebook Interactions</span>
+                </div>
+            </div>
+
+            <div class="stats flex justify-content-between mt-3">
+                <div class="left flex flex-column ">
+                    <span class="title">Target</span>
+                    <span class="value mb-2">10.000</span>
+                    <p-progressBar [value]="23" [showValue]="false"></p-progressBar>
+                </div>
+                <div class="right flex flex-column">
+                    <span class="title">All Time Record</span>
+                    <span class="value mb-2">99.028</span>
+                    <p-progressBar [value]="38" [showValue]="false"></p-progressBar>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12 md:col-4">
+        <div class="card widget-social">
+            <div class="flex justify-content-between align-items-center p-3">
+                <div class="social-icon">
+                    <i class="pi pi-github text-color fs-xxlarge"></i>
+                </div>
+                <div class="info flex flex-column">
+                    <span class="value">81.002</span>
+                    <span class="subtext mt-2">Star</span>
+                </div>
+            </div>
+
+            <div class="stats flex justify-content-between mt-3">
+                <div class="left flex flex-column ">
+                    <span class="title">Target</span>
+                    <span class="value mb-2">10.000</span>
+                    <p-progressBar [value]="62" [showValue]="false"></p-progressBar>
+                </div>
+                <div class="right flex flex-column">
+                    <span class="title">All Time Record</span>
+                    <span class="value mb-2">162.550</span>
+                    <p-progressBar [value]="14" [showValue]="false"></p-progressBar>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12 md:col-12">
+        <div class="card grid grid-nogutter widget-sales block sm:flex">
+            <div class="lg:col-3 md:col-6 sm:col-12 p-0">
+                <div class="sales-info flex flex-column p-4">
+                    <span class="muted-text">Store A Sales</span>
+                    <span class="fs-large mt-2">
+                        <i *ngIf="storeADiff !== 0" class="fw-700 fs-large pi" [ngClass]="{'pr-1': !app.isRTL, 'pl-1': app.isRTL, 'pi-arrow-up green-color': storeADiff > 0, 'pi-arrow-down pink-color': storeADiff < 0}"></i>
+                        ${{storeATotalValue}}
+                        <span *ngIf="storeADiff !== 0" class="fw-500 fs-normal" [ngClass]="{'ml-1': !app.isRTL, 'mr-1': app.isRTL, 'green-color': storeADiff > 0, 'pink-color': storeADiff < 0}">
+                            {{storeADiff > 0 ? '+' : ''}}{{storeADiff}}
+                        </span>
+                    </span>
+                </div>
+                <div class="px-4">
+                    <p-chart #storeA type="line" [data]="storeAData" [options]="storeAOptions" responsive="true"></p-chart>
+                </div>
+            </div>
+            <div class="lg:col-3 md:col-6 sm:col-12 p-0">
+                <div class="sales-info flex flex-column p-4">
+                    <span class="muted-text">Store B Sales</span>
+                    <span class="fs-large mt-2">
+                        <i *ngIf="storeBDiff !== 0" class="fw-700 fs-large pi" [ngClass]="{'pr-1': !app.isRTL, 'pl-1': app.isRTL, 'pi-arrow-up green-color': storeBDiff > 0, 'pi-arrow-down pink-color': storeBDiff < 0}"></i>
+                        ${{storeBTotalValue}}
+                        <span *ngIf="storeBDiff !== 0" class="fw-500 fs-normal" [ngClass]="{'ml-1': !app.isRTL, 'mr-1': app.isRTL,'green-color': storeBDiff > 0, 'pink-color': storeBDiff < 0}">
+                            {{storeBDiff > 0 ? '+' : ''}}{{storeBDiff}}
+                        </span>
+                    </span>
+                </div>
+                <div class="px-4">
+                    <p-chart #storeB type="line" [data]="storeBData" [options]="storeBOptions" responsive="true"></p-chart>
+                </div>
+            </div>
+            <div class="lg:col-3 md:col-6 sm:col-12 p-0">
+                <div class="sales-info flex flex-column p-4">
+                    <span class="muted-text">Store C Sales</span>
+                    <span class="fs-large mt-2">
+                        <i *ngIf="storeCDiff !== 0" class="fw-700 fs-large pi" [ngClass]="{'pr-1': !app.isRTL, 'pl-1': app.isRTL, 'pi-arrow-up green-color': storeCDiff > 0, 'pi-arrow-down pink-color': storeCDiff < 0}"></i>
+                        ${{storeCTotalValue}}
+                        <span *ngIf="storeCDiff !== 0" class="fw-500 fs-normal" [ngClass]="{'ml-1': !app.isRTL, 'mr-1': app.isRTL, 'green-color': storeCDiff > 0, 'pink-color': storeCDiff < 0}">
+                            {{storeCDiff > 0 ? '+' : ''}}{{storeCDiff}}
+                        </span>
+                    </span>
+                </div>
+                <div class="px-4">
+                    <p-chart #storeC type="line" [data]="storeCData" [options]="storeCOptions" responsive="true"></p-chart>
+                </div>
+            </div>
+            <div class="lg:col-3 md:col-6 sm:col-12 p-0">
+                <div class="sales-info flex flex-column p-4">
+                    <span class="muted-text">Store D Sales</span>
+                    <span class="fs-large mt-2">
+                        <i *ngIf="storeDDiff !== 0" class="fw-700 fs-large pi" [ngClass]="{'pr-1': !app.isRTL, 'pl-1': app.isRTL, 'pi-arrow-up green-color': storeDDiff > 0, 'pi-arrow-down pink-color': storeDDiff < 0}"></i>
+                        ${{storeDTotalValue}}
+                        <span *ngIf="storeDDiff !== 0" class="fw-500 fs-normal" [ngClass]="{'ml-1': !app.isRTL, 'mr-1': app.isRTL, 'green-color': storeDDiff > 0, 'pink-color': storeDDiff < 0}">
+                            {{storeDDiff > 0 ? '+' : ''}}{{storeDDiff}}
+                        </span>
+                    </span>
+                </div>
+                <div class="px-4">
+                    <p-chart #storeD type="line" [data]="storeDData" [options]="storeDOptions" responsive="true"></p-chart>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12 md:col-6">
+        <div class="card height-100 widget-topsearchs">
+            <div class=card-header>
+                <h5>Top Searchs</h5>
+                <div>
+                    <button pButton pRipple type="button" icon="pi pi-ellipsis-h" class="p-button-rounded p-button-text p-button-plain" (click)="menu12.toggle($event)"></button>
+                    <p-menu #menu12 [popup]="true" [model]="[{label: 'Update', icon: 'pi pi-fw pi-refresh'},{label: 'Edit', icon: 'pi pi-fw pi-pencil'}]"></p-menu>
+                </div>
+            </div>
+            <div class="flex justify-content-between item">
+                <span>Mat Orange Case</span>
+                <span class="value type-green">82% CONV RATE</span>
+            </div>
+            <div class="flex justify-content-between item">
+                <span>Space T-Shirt</span>
+                <span class="value type-green">78% CONV RATE</span>
+            </div>
+            <div class="flex justify-content-between item">
+                <span>Orange Black Hoodie</span>
+                <span class="value type-green">61% CONV RATE</span>
+            </div>
+            <div class="flex justify-content-between item">
+                <span>Wonders Notebook</span>
+                <span class="value type-yellow">48 CONV RATE</span>
+            </div>
+            <div class="flex justify-content-between item">
+                <span>Robots T-Shirt</span>
+                <span class="value type-yellow">34% CONV RATE</span>
+            </div>
+            <div class="flex justify-content-between item">
+                <span>Green Portal Sticker</span>
+                <span class="value type-pink">11% CONV RATE</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12 md:col-6">
+        <div class="card">
+            <p-table [value]="products" [paginator]="true" [rows]="4" styleClass="p-datatable-products">
+                <ng-template pTemplate="header">
+                    <tr>
+                        <th style="width:5rem">Image</th>
+                        <th pSortableColumn="name">Name
+                            <p-sortIcon field="name"></p-sortIcon>
+                        </th>
+                        <th pSortableColumn="category">Category
+                            <p-sortIcon field="category"></p-sortIcon>
+                        </th>
+                        <th pSortableColumn="price">Price
+                            <p-sortIcon field="price"></p-sortIcon>
+                        </th>
+                        <th style="width:4rem">View</th>
+                    </tr>
+                </ng-template>
+                <ng-template pTemplate="body" let-product>
+                    <tr>
+                        <td>
+                            <img [src]="'assets/demo/images/product/' + product.image" [alt]="product.image" width="50px" class="shadow-4" />
+                        </td>
+                        <td>
+                            <span class="p-column-title">Name</span>
+                            {{product.name}}
+                        </td>
+                        <td>
+                            <span class="p-column-title">Category</span>
+                            {{product.category}}
+                        </td>
+                        <td>
+                            <span class="p-column-title">Price</span>
+                            {{product.price | currency:'USD'}}
+                        </td>
+                        <td>
+                            <span class="p-column-title">View</span>
+                            <button pRipple pButton type="button" icon="pi pi-search" class="p-button-rounded p-button-text mb-1" [ngClass]="{'mr-2': !app.isRTL, 'ml-2': app.isRTL}"></button>
+                        </td>
+                    </tr>
+                </ng-template>
+            </p-table>
+        </div>
+    </div>
+
+    <div class="col-12 md:col-4">
+        <div class="card widget-expenses">
+            <div class=card-header>
+                <h5>Expenses</h5>
+                <div>
+                    <button pButton pRipple type="button" icon="pi pi-ellipsis-h" class="p-button-rounded p-button-text p-button-plain" (click)="menu13.toggle($event)"></button>
+                    <p-menu #menu13 [popup]="true" [model]="[{label: 'Update', icon: 'pi pi-fw pi-refresh'},{label: 'Edit', icon: 'pi pi-fw pi-pencil'}]"></p-menu>
+                </div>
+            </div>
+            <div class="card-subheader mb-2 pb-3">
+                November 22 - November 29
+            </div>
+
+            <div class="flex justify-content-between align-items-center my-2 item">
+                <div class="flex flex-column">
+                    <i class="pi pi-cloud type mb-2"></i>
+                    <span class="value mb-1">$30.247</span>
+                    <span class="subtext">Cloud Infrastructure</span>
+                </div>
+                <span class="item-button"><a href="#"><i class="pi pi-chevron-right"></i></a></span>
+            </div>
+            <div class="flex justify-content-between align-items-center my-2 item">
+                <div class="flex flex-column">
+                    <i class="pi pi-tag type mb-2"></i>
+                    <span class="value mb-1">$29.550</span>
+                    <span class="subtext">General Goods</span>
+                </div>
+                <span class="item-button"><a href="#"><i class="pi pi-chevron-right"></i></a></span>
+            </div>
+            <div class="flex justify-content-between align-items-center my-2 item">
+                <div class="flex flex-column">
+                    <i class="pi pi-desktop type mb-2"></i>
+                    <span class="value mb-1">$16.660</span>
+                    <span class="subtext">Consumer Electronics</span>
+                </div>
+                <span class="item-button"><a href="#"><i class="pi pi-chevron-right"></i></a></span>
+            </div>
+            <div class="flex justify-content-between align-items-center my-2 item">
+                <div class="flex flex-column">
+                    <i class="pi pi-compass type mb-2"></i>
+                    <span class="value mb-1">$5.801</span>
+                    <span class="subtext">Incalculables</span>
+                </div>
+                <span class="item-button"><a href="#"><i class="pi pi-chevron-right"></i></a></span>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12 md:col-8">
+        <div class="card widget-traffic height-100">
+            <div class="card-header">
+                <h5>All Traffic Channels</h5>
+                <button pRipple pButton type="button" label="Pie/Doughnut Data" class="p-button-text" [ngClass]="{'ml-auto': !app.isRTL, 'mr-auto': app.isRTL}" (click)="togglePieDoughnut()"></button>
+                <button pRipple pButton type="button" label="Semi/Full Data" class="p-button-text mx-2" (click)="changePieDoughnutDataView()"></button>
+            </div>
+            <div class="flex grid">
+                <div class="col-12 md:col-6 left flex flex-column justify-content-evenly">
+                    <div class="total flex flex-column">
+                        <span class="title mb-2">Total</span>
+                        <span class="value mb-5">66.761</span>
+                    </div>
+
+                    <div class="info flex justify-content-between">
+                        <div class="organic flex flex-column">
+                            <span class="title mb-1">Organic</span>
+                            <span class="value">51.596</span>
+                        </div>
+                        <div class="direct flex flex-column">
+                            <span class="title mb-1">Direct</span>
+                            <span class="value">11.421</span>
+                        </div>
+                        <div class="referral flex flex-column">
+                            <span class="title mb-1">Referral</span>
+                            <span class="value">3.862</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12 md:col-6 right flex justify-content-center">
+                    <p-chart #pie type="pie" [data]="pieData" [options]="pieOptions" [style]="{'width': '70%'}"></p-chart>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

Angular/src/app/demo/view/dashboardanalytics.component.ts

@@ -0,0 +1,629 @@
+import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import { EventService } from '../service/eventservice';
+import { SelectItem } from 'primeng/api';
+import { Product } from '../domain/product';
+import { ProductService } from '../service/productservice';
+import { AppBreadcrumbService } from '../../app.breadcrumb.service';
+import { UIChart } from 'primeng/chart';
+import { AppComponent } from 'src/app/app.component';
+import { AppMainComponent } from 'src/app/app.main.component';
+
+@Component({
+    templateUrl: './dashboardanalytics.component.html'
+})
+export class DashboardAnalyticsComponent implements OnInit, OnDestroy {
+
+    cities: SelectItem[];
+
+    products: Product[];
+
+    chartMonthlyData: any;
+
+    chartMonthlyOptions: any;
+
+    doughnutData: any;
+
+    doughnutOptions: any;
+
+    storeATotalValue = 100;
+
+    storeADiff = 0;
+
+    storeAStatus = 0;
+
+    storeAData: any;
+
+    storeAOptions: any;
+
+    storeBTotalValue = 120;
+
+    storeBDiff = 0;
+
+    storeBStatus = 0;
+
+    storeBData: any;
+
+    storeBOptions: any;
+
+    storeCTotalValue = 150;
+
+    storeCDiff = 0;
+
+    storeCStatus = 0;
+
+    storeCData: any;
+
+    storeCOptions: any;
+
+    storeDTotalValue = 80;
+
+    storeDDiff = 0;
+
+    storeDStatus = 0;
+
+    storeDData: any;
+
+    storeDOptions: any;
+
+    storeInterval: any;
+
+    pieData: any;
+
+    pieOptions: any;
+
+    mainData: any;
+
+    events: any[];
+
+    selectedCity: any;
+
+    @ViewChild('doughnut') doughnutViewChild: UIChart;
+
+    @ViewChild('bar') chartViewChild: UIChart;
+
+    @ViewChild('storeA') storeAViewChild: UIChart;
+
+    @ViewChild('storeB') storeBViewChild: UIChart;
+
+    @ViewChild('storeC') storeCViewChild: UIChart;
+
+    @ViewChild('storeD') storeDViewChild: UIChart;
+
+    @ViewChild('pie') pieViewChild: UIChart;
+
+    constructor(public app: AppComponent, public appMain: AppMainComponent, private productService: ProductService,
+                private eventService: EventService, private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'Dashboard Analytics', routerLink: ['/favorites/dashboardanalytics'] }
+        ]);
+    }
+
+    ngOnInit() {
+        this.productService.getProducts().then(data => this.products = data);
+
+        this.eventService.getEvents().then(events => { this.events = events; });
+
+        this.cities = [];
+        this.cities.push({ label: 'Select City', value: null });
+        this.cities.push({ label: 'New York', value: { id: 1, name: 'New York', code: 'NY' } });
+        this.cities.push({ label: 'Rome', value: { id: 2, name: 'Rome', code: 'RM' } });
+        this.cities.push({ label: 'London', value: { id: 3, name: 'London', code: 'LDN' } });
+        this.cities.push({ label: 'Istanbul', value: { id: 4, name: 'Istanbul', code: 'IST' } });
+        this.cities.push({ label: 'Paris', value: { id: 5, name: 'Paris', code: 'PRS' } });
+
+        this.chartMonthlyData = this.getChartData();
+        this.chartMonthlyOptions = this.getChartOptions();
+
+        this.doughnutData = this.getDoughnutData();
+        this.doughnutOptions = this.getDoughnutOptions();
+
+        this.pieData = this.getPieData();
+        this.pieOptions = this.getPieOptions();
+
+        this.appMain['refreshChart'] = () => {
+            this.chartMonthlyData = this.getChartData();
+            this.chartMonthlyOptions = this.getChartOptions();
+            this.doughnutData = this.getDoughnutData();
+            this.doughnutOptions = this.getDoughnutOptions();
+            this.pieData = this.getPieData();
+            this.pieOptions = this.getPieOptions();
+        };
+
+        this.storeAData = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'],
+            datasets: [{
+                data: [55, 3, 45, 6, 44, 58, 84, 68, 64],
+                borderColor: [
+                    '#4DD0E1',
+                ],
+                backgroundColor: [
+                    'rgba(77, 208, 225, 0.8)',
+                ],
+                borderWidth: 2,
+                fill: true,
+                tension: .4
+            }
+            ]
+        };
+
+        this.storeBData = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'],
+            datasets: [{
+                data: [81, 75, 63, 100, 69, 79, 38, 37, 76],
+                borderColor: [
+                    '#4DD0E1',
+                ],
+                backgroundColor: [
+                    'rgba(77, 208, 225, 0.8)',
+                ],
+                borderWidth: 2,
+                fill: true,
+                tension: .4
+            }
+            ]
+        };
+
+        this.storeCData = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'],
+            datasets: [{
+                data: [99, 55, 22, 72, 24, 79, 35, 91, 48],
+                borderColor: [
+                    '#4DD0E1',
+                ],
+                backgroundColor: [
+                    'rgba(77, 208, 225, 0.8)',
+                ],
+                borderWidth: 2,
+                fill: true,
+                tension: .4
+            }
+            ]
+        };
+
+        this.storeDData = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'],
+            datasets: [{
+                data: [5, 51, 68, 82, 28, 21, 29, 45, 44],
+                borderColor: [
+                    '#4DD0E1',
+                ],
+                backgroundColor: [
+                    'rgba(77, 208, 225, 0.8)',
+                ],
+                borderWidth: 2,
+                fill: true,
+                tension: .4
+            }
+            ]
+        };
+
+        this.storeAOptions = {
+            plugins: {
+                legend: {
+                    display: false
+                }
+            },
+            responsive: true,
+            aspectRatio: 4,
+            scales: {
+                y: {
+                    display: false
+                },
+                x: {
+                    display: false
+                }
+            },
+            tooltips: {
+                enabled: false
+            },
+            elements: {
+                point: {
+                    radius: 0
+                }
+            },
+        };
+
+        this.storeBOptions = {
+            plugins: {
+                legend: {
+                    display: false
+                }
+            },
+            responsive: true,
+            aspectRatio: 4,
+            scales: {
+                y: {
+                    display: false
+                },
+                x: {
+                    display: false
+                }
+            },
+            tooltips: {
+                enabled: false
+            },
+            elements: {
+                point: {
+                    radius: 0
+                }
+            },
+        };
+
+        this.storeCOptions = {
+            plugins: {
+                legend: {
+                    display: false
+                }
+            },
+            responsive: true,
+            aspectRatio: 4,
+            scales: {
+                y: {
+                    display: false
+                },
+                x: {
+                    display: false
+                }
+            },
+            tooltips: {
+                enabled: false
+            },
+            elements: {
+                point: {
+                    radius: 0
+                }
+            },
+        };
+
+        this.storeDOptions = {
+            plugins: {
+                legend: {
+                    display: false
+                }
+            },
+            responsive: true,
+            aspectRatio: 4,
+            scales: {
+                y: {
+                    display: false
+                },
+                x: {
+                    display: false
+                }
+            },
+            tooltips: {
+                enabled: false
+            },
+            elements: {
+                point: {
+                    radius: 0
+                }
+            },
+        };
+
+        const calculateStore = (storeData, totalValue) => {
+            const randomNumber = +((Math.random() * 500).toFixed(2));
+            const data = storeData.datasets[0].data;
+            const length = data.length;
+            data.push(randomNumber);
+            data.shift();
+
+            const diff = +((data[length - 1] - data[length - 2]).toFixed(2));
+            const status = diff === 0 ? 0 : (diff > 0 ? 1 : -1);
+            totalValue = +((totalValue + diff).toFixed(2));
+
+            return { diff, totalValue, status };
+        };
+
+        this.storeInterval = setInterval(() => {
+            requestAnimationFrame(() => {
+                const { diff: storeADiff, totalValue: storeATotalValue, status: storeAStatus } =
+                    calculateStore(this.storeAData, this.storeATotalValue);
+                this.storeADiff = storeADiff;
+                this.storeATotalValue = storeATotalValue;
+                this.storeAStatus = storeAStatus;
+                this.storeAViewChild.chart.update();
+
+                const { diff: storeBDiff, totalValue: storeBTotalValue, status: storeBStatus } =
+                    calculateStore(this.storeBData, this.storeBTotalValue);
+                this.storeBDiff = storeBDiff;
+                this.storeBTotalValue = storeBTotalValue;
+                this.storeBStatus = storeBStatus;
+                this.storeBViewChild.chart.update();
+
+                const { diff: storeCDiff, totalValue: storeCTotalValue, status: storeCStatus } =
+                    calculateStore(this.storeCData, this.storeCTotalValue);
+                this.storeCDiff = storeCDiff;
+                this.storeCTotalValue = storeCTotalValue;
+                this.storeCStatus = storeCStatus;
+                this.storeCViewChild.chart.update();
+
+                const { diff: storeDDiff, totalValue: storeDTotalValue, status: storeDStatus } =
+                    calculateStore(this.storeDData, this.storeDTotalValue);
+                this.storeDDiff = storeDDiff;
+                this.storeDTotalValue = storeDTotalValue;
+                this.storeDStatus = storeDStatus;
+                this.storeDViewChild.chart.update();
+            });
+        }, 2000);
+    }
+
+    ngOnDestroy() {
+        if (this.storeInterval) {
+            clearInterval(this.storeInterval);
+        }
+    }
+
+    getColors() {
+        const isLight = this.app.layoutMode === 'light';
+        return {
+            pinkColor: isLight ? '#EC407A' : '#F48FB1',
+            purpleColor: isLight ? '#AB47BC' : '#CE93D8',
+            deeppurpleColor: isLight ? '#7E57C2' : '#B39DDB',
+            indigoColor: isLight ? '#5C6BC0' : '#9FA8DA',
+            blueColor: isLight ? '#42A5F5' : '#90CAF9',
+            lightblueColor: isLight ? '#29B6F6' : '#81D4FA',
+            cyanColor: isLight ? '#00ACC1' : '#4DD0E1',
+            tealColor: isLight ? '#26A69A' : '#80CBC4',
+            greenColor: isLight ? '#66BB6A' : '#A5D6A7',
+            lightgreenColor: isLight ? '#9CCC65' : '#C5E1A5',
+            limeColor: isLight ? '#D4E157' : '#E6EE9C',
+            yellowColor: isLight ? '#FFEE58' : '#FFF59D',
+            amberColor: isLight ? '#FFCA28' : '#FFE082',
+            orangeColor: isLight ? '#FFA726' : '#FFCC80',
+            deeporangeColor: isLight ? '#FF7043' : '#FFAB91',
+            brownColor: isLight ? '#8D6E63' : '#BCAAA4'
+        };
+    }
+
+    getPieData() {
+        const { limeColor, blueColor, tealColor } = this.getColors();
+        const borderColor = getComputedStyle(document.body).getPropertyValue('--divider-color') || 'rgba(160, 167, 181, .3)';
+        return {
+            labels: ['O', 'D', 'R'],
+            datasets: [
+                {
+                    data: [300, 50, 100],
+                    backgroundColor: [
+                        blueColor,
+                        tealColor,
+                        limeColor
+                    ],
+                    borderColor
+                }
+            ]
+        };
+    }
+
+    getPieOptions() {
+        const textColor = getComputedStyle(document.body).getPropertyValue('--text-color') || 'rgba(0, 0, 0, 0.87)';
+        const fontFamily = getComputedStyle(document.body).getPropertyValue('--font-family');
+        return {
+            responsive: true,
+            aspectRatio: 1,
+            plugins: {
+                legend: {
+                    position: 'top',
+                    labels: {
+                        fontFamily,
+                        fontColor: textColor
+                    }
+                },
+            },
+            animation: {
+                animateScale: true,
+                animateRotate: true
+            },
+            cutout: '0',
+        };
+    }
+
+    getChartData() {
+        const { limeColor, amberColor, orangeColor, blueColor, lightblueColor,
+            cyanColor, tealColor, greenColor, lightgreenColor } = this.getColors();
+
+        return {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: '2012',
+                    data: [6, 25, 97, 12, 7, 70, 42],
+                    borderColor: blueColor,
+                    backgroundColor: blueColor,
+                    borderWidth: 2,
+                    fill: true
+                },
+                {
+                    label: '2013',
+                    data: [81, 3, 5, 11, 59, 47, 99],
+                    borderColor: lightblueColor,
+                    backgroundColor: lightblueColor,
+                    borderWidth: 2,
+                    fill: true
+                },
+                {
+                    label: '2014',
+                    data: [68, 47, 46, 46, 61, 70, 94],
+                    borderColor: cyanColor,
+                    backgroundColor: cyanColor,
+                    borderWidth: 2,
+                    fill: true
+                },
+                {
+                    label: '2015',
+                    data: [31, 9, 18, 76, 6, 11, 79],
+                    borderColor: tealColor,
+                    backgroundColor: tealColor,
+                    borderWidth: 2,
+                    fill: true
+                },
+                {
+                    label: '2016',
+                    data: [85, 37, 47, 29, 2, 10, 54],
+                    borderColor: greenColor,
+                    backgroundColor: greenColor,
+                    borderWidth: 2,
+                    fill: true
+                },
+                {
+                    label: '2017',
+                    data: [28, 48, 40, 19, 86, 27, 90],
+                    borderColor: lightgreenColor,
+                    backgroundColor: lightgreenColor,
+                    borderWidth: 2,
+                    fill: true
+                },
+                {
+                    label: '2018',
+                    data: [89, 18, 95, 18, 97, 61, 54],
+                    borderColor: limeColor,
+                    backgroundColor: limeColor,
+                    borderWidth: 2,
+                    fill: true
+                },
+                {
+                    label: '2019',
+                    data: [18, 36, 39, 58, 41, 50, 72],
+                    borderColor: amberColor,
+                    backgroundColor: amberColor,
+                    borderWidth: 2,
+                    fill: true
+                },
+                {
+                    label: '2020',
+                    data: [31, 4, 35, 74, 47, 35, 46],
+                    borderColor: orangeColor,
+                    backgroundColor: orangeColor,
+                    borderWidth: 2,
+                    fill: true
+                }
+            ]
+        };
+    }
+
+    getChartOptions() {
+        const textColor = getComputedStyle(document.body).getPropertyValue('--text-color') || 'rgba(0, 0, 0, 0.87)';
+        const gridLinesColor = getComputedStyle(document.body).getPropertyValue('--divider-color') || 'rgba(160, 167, 181, .3)';
+        const fontFamily = getComputedStyle(document.body).getPropertyValue('--font-family');
+        return {
+            plugins: {
+                legend: {
+                    display: true,
+                    labels: {
+                        fontFamily,
+                        fontColor: textColor
+                    }
+                },
+            },
+            animation: {
+                animateScale: true,
+                animateRotate: true
+            },
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+                y: {
+                    ticks: {
+                        fontFamily,
+                        color: textColor
+                    },
+                    grid: {
+                        color: gridLinesColor
+                    }
+                },
+                x: {
+                    categoryPercentage: .9,
+                    barPercentage: .8,
+                    ticks: {
+                        fontFamily,
+                        color: textColor
+                    },
+                    grid: {
+                        color: gridLinesColor
+                    }
+                }
+            },
+        };
+    }
+
+    getDoughnutData() {
+        const { blueColor, lightblueColor, cyanColor, tealColor, greenColor,
+            lightgreenColor, orangeColor } = this.getColors();
+        const borderColor = getComputedStyle(document.body).getPropertyValue('--divider-color') || 'rgba(160, 167, 181, .3)';
+
+        return {
+            labels: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+            datasets: [
+                {
+                    data: [11, 29, 71, 33, 28, 95, 6],
+                    backgroundColor: [blueColor, lightblueColor, cyanColor, tealColor, greenColor, lightgreenColor, orangeColor],
+                    borderColor
+                }
+            ]
+        };
+    }
+
+    getDoughnutOptions() {
+        const textColor = getComputedStyle(document.body).getPropertyValue('--text-color') || 'rgba(0, 0, 0, 0.87)';
+        const fontFamily = getComputedStyle(document.body).getPropertyValue('--font-family');
+        return {
+            plugins: {
+                legend: {
+                    position: 'top',
+                    labels: {
+                        fontFamily,
+                        fontColor: textColor
+                    }
+                },
+            },
+            circumference: 180,
+            rotation: -90,
+            animation: {
+                animateScale: true,
+                animateRotate: true
+            }
+        };
+    }
+
+    changeMonthlyDataView() {
+        if (this.chartViewChild.chart.options.scales.x.stacked) {
+            this.chartViewChild.chart.options.scales.x.stacked = false;
+            this.chartViewChild.chart.options.scales.y.stacked = false;
+        }
+        else {
+            this.chartViewChild.chart.options.scales.x.stacked = true;
+            this.chartViewChild.chart.options.scales.y.stacked = true;
+        }
+
+        this.chartViewChild.chart.update();
+    }
+
+    changeDoughnutDataView() {
+        if (this.doughnutViewChild.chart.options.circumference === 180) {
+            this.doughnutViewChild.chart.options.circumference = 360;
+            this.doughnutViewChild.chart.options.rotation = -45;
+        } else {
+            this.doughnutViewChild.chart.options.circumference = 180;
+            this.doughnutViewChild.chart.options.rotation = -90;
+        }
+
+        this.doughnutViewChild.chart.update();
+    }
+
+    togglePieDoughnut() {
+        this.pieViewChild.chart.options.cutout = this.pieViewChild.chart.options.cutout !== '0' ? '0' : '50%';
+        this.pieViewChild.chart.update();
+    }
+
+    changePieDoughnutDataView() {
+        if (this.pieViewChild.chart.options.circumference === 180) {
+            this.pieViewChild.chart.options.circumference = 360;
+            this.pieViewChild.chart.options.rotation = -45;
+        } else {
+            this.pieViewChild.chart.options.circumference = 180;
+            this.pieViewChild.chart.options.rotation = -90;
+        }
+
+        this.pieViewChild.chart.update();
+    }
+}

Angular/src/app/demo/view/documentation.component.ts

@@ -0,0 +1,38 @@
+import {Component} from '@angular/core';
+import {AppBreadcrumbService} from '../../app.breadcrumb.service';
+
+@Component({
+    templateUrl: './documentation.component.html',
+    styles: [`
+        .docs h1 {
+            margin-top: 30px;
+        }
+
+        .docs pre.doc-command {
+            font-family: monospace;
+            background-color: #2d353c;
+            color: #dddddd;
+            padding: 1em;
+            font-size: 14px;
+            border-radius: 3px;
+            overflow: auto;
+        }
+
+        .inline-code {
+            background-color: #0C2238;
+            color: #dddddd;
+            font-style: normal;
+            font-size: 13px;
+            padding: 0 .5em;
+        }`
+    ]
+})
+export class DocumentationComponent {
+
+    constructor(private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'Start' },
+            { label: 'Documentation', routerLink: ['/documentation'] }
+        ]);
+    }
+}

Angular/src/app/demo/view/emptydemo.component.html

@@ -0,0 +1,8 @@
+<div class="grid">
+    <div class="col-12">
+        <div class="card">
+            <h5>Empty Page</h5>
+            <p>This is your empty page template to start building beautiful applications.</p>
+        </div>
+    </div>
+</div>

Angular/src/app/demo/view/emptydemo.component.ts

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {AppBreadcrumbService} from '../../app.breadcrumb.service';
+
+@Component({
+    templateUrl: './emptydemo.component.html'
+})
+export class EmptyDemoComponent {
+
+    constructor(private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'Pages' },
+            { label: 'Empty Page', routerLink: ['/pages/empty'] }
+        ]);
+    }
+}

Angular/src/app/demo/view/filedemo.component.html

@@ -0,0 +1,19 @@
+<div class="grid">
+    <div class="col-12">
+        <div class="card">
+            <h5>Advanced</h5>
+            <p-fileUpload name="demo[]" url="./upload.php" (onUpload)="onUpload($event)"
+                          multiple="multiple" accept="image/*" maxFileSize="1000000">
+                <ng-template pTemplate="content">
+                    <ul *ngIf="uploadedFiles.length">
+                        <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
+                    </ul>
+                </ng-template>
+            </p-fileUpload>
+
+            <h5>Basic</h5>
+            <p-fileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUpload($event)" chooseLabel="Select"></p-fileUpload>
+
+        </div>
+    </div>
+</div>

Angular/src/app/demo/view/filedemo.component.ts

@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+import {MessageService} from 'primeng/api';
+import {AppBreadcrumbService} from '../../app.breadcrumb.service';
+
+@Component({
+    templateUrl: './filedemo.component.html',
+    providers: [MessageService]
+})
+export class FileDemoComponent {
+
+    uploadedFiles: any[] = [];
+
+    constructor(private messageService: MessageService, private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'UI Kit' },
+            { label: 'File', routerLink: ['/uikit/file'] }
+        ]);
+    }
+
+    onUpload(event) {
+        for (const file of event.files) {
+            this.uploadedFiles.push(file);
+        }
+
+        this.messageService.add({severity: 'info', summary: 'Success', detail: 'File Uploaded'});
+    }
+
+    onBasicUpload(event) {
+        this.messageService.add({severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode'});
+    }
+}

Angular/src/app/demo/view/floatlabeldemo.component.html

@@ -0,0 +1,95 @@
+<div class="grid grid-nogutter floatlabel-demo">
+    <div class="card p-fluid" style="width: 100%">
+        <h5>Float Label</h5>
+        <p>All input text components support floating labels by adding (<mark>.p-float-label</mark>) to wrapper class.</p>
+        <div class="grid">
+            <div class="col-12 md:col-6">
+                <div class="field">
+                    <span class="p-float-label">
+                        <input type="text" id="inputtext" pInputText [(ngModel)]="value1">
+                        <label for="inputtext">InputText</label>
+                    </span>
+                </div>
+                <div class="field">
+                    <span class="p-float-label p-input-icon-left">
+                        <i class="pi pi-search"></i>
+                        <input type="text" id="lefticon" pInputText [(ngModel)]="value11">
+                        <label for="lefticon">Left Icon</label>
+                    </span>
+                </div>
+                <div class="field">
+                    <span class="p-float-label p-input-icon-right">
+                        <input type="text" id="righticon" pInputText [(ngModel)]="value12">
+                        <label for="righticon">Right Icon</label>
+                        <i class="pi pi-spin pi-spinner"></i>
+                    </span>
+                </div>
+                <div class="field">
+                    <span class="p-float-label">
+                        <p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value5"></p-inputMask>
+                        <label for="inputmask">InputMask</label>
+                    </span>
+                </div>
+                <div class="field">
+                    <span class="p-float-label">
+                        <p-inputNumber inputId="inputnumber" [(ngModel)]="value6"></p-inputNumber>
+                        <label for="inputnumber">InputNumber</label>
+                    </span>
+                </div>
+                <div class="field">
+                    <span class="p-float-label">
+                        <p-chips inputId="chips" [(ngModel)]="value4"></p-chips>
+                        <label for="chips">Chips</label>
+                    </span>
+                </div>
+            </div>
+
+            <div class="col-12 md:col-6">
+                <div class="field">
+                    <div class="p-inputgroup">
+                        <span class="p-inputgroup-addon">
+                            <i class="pi pi-user"></i>
+                        </span>
+                        <span class="p-float-label">
+                            <input type="text" id="inputgroup" pInputText [(ngModel)]="value7">
+                            <label for="inputgroup">InputGroup</label>
+                        </span>
+                    </div>
+                </div>
+                <div class="field">
+                    <span class="p-float-label">
+                        <p-autoComplete inputId="autocomplete" [(ngModel)]="value2" [suggestions]="filteredCountries"
+                                        (completeMethod)="searchCountry($event)" field="name"></p-autoComplete>
+                        <label for="autocomplete">AutoComplete</label>
+                    </span>
+                </div>
+                <div class="field">
+                    <span class="p-float-label">
+                        <p-calendar inputId="calendar" [(ngModel)]="value3"></p-calendar>
+                        <label for="calendar">Calendar</label>
+                    </span>
+                </div>
+                <div class="field">
+                    <span class="p-float-label">
+                        <p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value8"
+                                    optionLabel="name"></p-dropdown>
+                        <label for="dropdown">Dropdown</label>
+                    </span>
+                </div>
+                <div class="field">
+                    <span class="p-float-label">
+                        <p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value9" optionLabel="name"
+                                       [filter]="false"></p-multiSelect>
+                        <label for="multiselect">MultiSelect</label>
+                    </span>
+                </div>
+                <div class="field">
+                    <span class="p-float-label">
+                        <textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value10" pInputTextarea></textarea>
+                        <label for="textarea">Textarea</label>
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

Angular/src/app/demo/view/floatlabeldemo.component.ts

@@ -0,0 +1,77 @@
+import {Component, OnInit} from '@angular/core';
+import { CountryService } from '../service/countryservice';
+import {AppBreadcrumbService} from '../../app.breadcrumb.service';
+
+@Component({
+    templateUrl: './floatlabeldemo.component.html',
+    styleUrls: ['./floatlabeldemo.scss']
+})
+export class FloatLabelDemoComponent implements OnInit{
+
+    countries: any[];
+
+    cities: any[];
+
+    filteredCountries: any[];
+
+    value1: any;
+
+    value2: any;
+
+    value3: any;
+
+    value4: any;
+
+    value5: any;
+
+    value6: any;
+
+    value7: any;
+
+    value8: any;
+
+    value9: any;
+
+    value10: any;
+
+    value11: any;
+
+    value12: any;
+
+    constructor(private countryService: CountryService, private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'UI Kit' },
+            { label: 'Float Label', routerLink: ['/uikit/floatlabel'] }
+        ]);
+
+        this.cities = [
+            {name: 'New York', code: 'NY'},
+            {name: 'Rome', code: 'RM'},
+            {name: 'London', code: 'LDN'},
+            {name: 'Istanbul', code: 'IST'},
+            {name: 'Paris', code: 'PRS'}
+        ];
+    }
+
+    ngOnInit() {
+        this.countryService.getCountries().then(countries => {
+            this.countries = countries;
+        });
+    }
+
+    searchCountry(event) {
+        // in a real application, make a request to a remote url with the query and
+        // return filtered results, for demo we filter at client side
+        const filtered: any[] = [];
+        const query = event.query;
+        // tslint:disable-next-line:prefer-for-of
+        for (let i = 0; i < this.countries.length; i++) {
+            const country = this.countries[i];
+            if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
+                filtered.push(country);
+            }
+        }
+
+        this.filteredCountries = filtered;
+    }
+}

Angular/src/app/demo/view/floatlabeldemo.scss

@@ -0,0 +1,5 @@
+.floatlabel-demo {
+    .field {
+        margin-top: 2rem;
+    }
+}

Angular/src/app/demo/view/formlayoutdemo.component.html

@@ -0,0 +1,116 @@
+<div class="grid">
+	<div class="col-12 md:col-6">
+		<div class="card">
+			<h5>Vertical</h5>
+            <div class="field">
+                <label for="firstname1">Name</label>
+                <input pInputText id="firstname1" type="text" class="w-full">
+            </div>
+            <div class="field">
+                <label for="lastname1">Email</label>
+                <input pInputText id="lastname1" type="text" class="w-full">
+            </div>
+            <div class="field">
+                <label for="age1">Age</label>
+                <input pInputText id="age1" type="text" class="w-full">
+            </div>
+		</div>
+
+		<div class="card">
+			<h5>Vertical Grid</h5>
+			<div class="formgrid grid">
+				<div class="field col">
+					<label for="firstname2">Name</label>
+					<input id="firstname2" type="text" class="w-full" pInputText>
+				</div>
+				<div class="field col">
+					<label for="lastname2">Email</label>
+					<input id="lastname2" type="text" class="w-full" pInputText>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="col-12 md:col-6">
+		<div class="card">
+			<h5>Horizontal</h5>
+            <div class="field grid">
+                <label for="firstname4" class="col-12 mb-2 md:col-2 md:mb-0">Name</label>
+                <div class="col-12 md:col-10">
+                    <input id="firstname4" type="text" class="w-full" pInputText>
+                </div>
+            </div>
+            <div class="field grid">
+                <label for="lastname4" class="col-12 mb-2 md:col-2 md:mb-0">Email</label>
+                <div class="col-12 md:col-10">
+                    <input id="lastname4" type="text" class="w-full" pInputText>
+                </div>
+            </div>
+		</div>
+
+		<div class="card">
+			<h5>Inline</h5>
+			<div class="formgroup-inline">
+				<div class="field">
+                    <span class="p-float-label">
+					    <input id="firstname5" type="text" pInputText>
+                        <label for="firstname5">Firstname</label>
+                    </span>
+				</div>
+				<div class="field">
+                    <span class="p-float-label">
+                        <input id="lastname5" type="text" pInputText>
+                        <label for="lastname5">Lastname</label>
+                    </span>
+				</div>
+				<button pButton pRipple type="button" label="Submit"></button>
+			</div>
+		</div>
+
+		<div class="card">
+			<h5>Help Text</h5>
+			<div class="field">
+                <span class="p-float-label">
+                    <input id="username" type="username" pInputText class="w-full" aria-describedby="username-help">
+                    <label for="username">Username</label>
+                </span>
+				<small id="username-help">Enter your username to reset your password.</small>
+            </div>
+		</div>
+	</div>
+
+	<div class="col-12">
+		<div class="card">
+			<h5>Advanced</h5>
+			<div class="formgrid grid">
+				<div class="field col-12 md:col-6">
+					<label for="firstname6">Firstname</label>
+					<input id="firstname6" type="text" class="w-full" pInputText>
+				</div>
+				<div class="field col-12 md:col-6">
+					<label for="lastname6">Lastname</label>
+					<input id="lastname6" type="text" class="w-full" pInputText>
+				</div>
+				<div class="field col-12">
+					<label for="address">Address</label>
+					<textarea id="address" type="text" rows="4" class="w-full" pInputTextarea></textarea>
+				</div>
+				<div class="field col-12 md:col-6">
+					<label for="city">City</label>
+					<input id="city" type="text" class="w-full" pInputText>
+				</div>
+				<div class="field col-12 md:col-3">
+                    <label for="state">State</label>
+                    <span class="p-float-label">
+                        <p-dropdown inputId="state" [options]="states" [(ngModel)]="selectedState" optionLabel="name" [autoDisplayFirst]="false" styleClass="w-full"></p-dropdown>
+                        <label>Choose</label>
+                    </span>
+				</div>
+				<div class="field col-12 md:col-3">
+					<label for="zip">Zip</label>
+					<input id="zip" type="text" class="w-full" pInputText>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

Angular/src/app/demo/view/formlayoutdemo.component.ts

@@ -0,0 +1,25 @@
+import {Component} from '@angular/core';
+import {AppBreadcrumbService} from '../../app.breadcrumb.service';
+
+@Component({
+    templateUrl: './formlayoutdemo.component.html'
+})
+export class FormLayoutDemoComponent {
+
+    selectedState: any = null;
+
+    constructor(private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'UI Kit' },
+            { label: 'Form Layout', routerLink: ['/uikit/formlayout'] }
+        ]);
+    }
+
+    states: any[] = [
+        {name: 'Arizona', code: 'Arizona'},
+        {name: 'California', value: 'California'},
+        {name: 'Florida', code: 'Florida'},
+        {name: 'Ohio', code: 'Ohio'},
+        {name: 'Washington', code: 'Washington'}
+    ];
+}

Angular/src/app/demo/view/inputdemo.component.html

@@ -0,0 +1,243 @@
+<div class="grid p-fluid">
+    <div class="col-12 md:col-6">
+        <div class="card">
+            <h5>InputText</h5>
+            <div class="grid formgrid">
+                <div class="col-12 mb-2 lg:col-4 mb-lg-0">
+                    <span class="p-float-label">
+                        <input type="text" class="w-full" pInputText>
+                        <label>Default</label>
+                    </span>
+                </div>
+                <div class="col-12 mb-2 lg:col-4 mb-lg-0">
+                    <span class="p-float-label">
+                        <input type="text" class="w-full" pInputText [disabled]="true"/>
+                        <label>Disabled</label>
+                    </span>
+                </div>
+                <div class="col-12 mb-2 lg:col-4 mb-lg-0">
+                    <span class="p-float-label">
+                        <input type="text" pInputText class="ng-invalid ng-dirty w-full"/>
+                        <label>Invalid*</label>
+                    </span>
+                </div>
+            </div>
+
+            <h5>Icons</h5>
+            <div class="grid formgrid">
+                <div class="col-12 mb-2 lg:col-4 mb-lg-0">
+					<span class="p-input-icon-left p-float-label">
+						<i class="pi pi-user"></i>
+                        <input type="text" class="w-full" pInputText/>
+                        <label>Username</label>
+					</span>
+                </div>
+                <div class="col-12 mb-2 lg:col-4 mb-lg-0">
+					<span class="p-input-icon-right p-float-label">
+                        <input type="text" class="w-full" pInputText/>
+                        <label>Search</label>
+						<i class="pi pi-search"></i>
+					</span>
+                </div>
+                <div class="col-12 mb-2 lg:col-4 mb-lg-0">
+					<span class="p-input-icon-left p-input-icon-right p-float-label">
+						<i class="pi pi-user"></i>
+                        <input type="text" class="w-full" pInputText/>
+                        <label>Search</label>
+						<i class="pi pi-search"></i>
+					</span>
+                </div>
+            </div>
+
+            <h5>Placeholder</h5>
+            <input type="text" pInputText class="w-full" placeholder="Username">
+
+            <h5>Textarea</h5>
+            <span class="p-float-label">
+                <textarea rows="5" cols="30" class="w-full" pInputTextarea></textarea>
+                <label>Your Message</label>
+            </span>
+
+            <h5>AutoComplete</h5>
+            <span class="p-float-label">
+                <p-autoComplete [(ngModel)]="selectedCountryAdvanced" [suggestions]="filteredCountries" styleClass="w-full"
+                                (completeMethod)="filterCountry($event)" field="name" [dropdown]="true">
+                </p-autoComplete>
+                <label>Choose a country</label>
+            </span>
+
+            <h5>Calendar</h5>
+            <span class="p-float-label">
+                <p-calendar [showIcon]="true" inputId="icon" styleClass="w-full"></p-calendar>
+                <label>Choose a date</label>
+            </span>
+
+            <h5>InputNumber</h5>
+            <span class="p-float-label">
+                <p-inputNumber mode="decimal" styleClass="w-full" [showButtons]="true" [min]="0" [max]="100">
+                </p-inputNumber>
+                <label>Enter a number</label>
+            </span>
+
+            <h5>Chips</h5>
+            <span class="p-float-label">
+                <p-chips styleClass="w-full"></p-chips>
+                <label>Enter a text</label>
+            </span>
+        </div>
+
+        <div class="card">
+            <div class="grid">
+                <div class="col-12">
+                    <h5>Slider</h5>
+                    <input type="text" pInputText [(ngModel)]="valSlider" readonly/>
+                    <p-slider [(ngModel)]="valSlider"></p-slider>
+                </div>
+                <div class="col-12 md:col-6">
+                    <h5>Rating</h5>
+                    <p-rating></p-rating>
+                </div>
+                <div class="col-12 md:col-6">
+                    <h5>ColorPicker</h5>
+                    <p-colorPicker [(ngModel)]="valColor"></p-colorPicker>
+                </div>
+                <div class="col-12">
+                    <h5>Knob</h5>
+                    <p-knob [(ngModel)]="valueKnob" valueTemplate="{value}%" [step]="10" [min]="-50"
+                            [max]="50"></p-knob>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12 md:col-6">
+        <div class="card">
+            <h5>RadioButton</h5>
+            <div class="grid">
+                <div class="col-12 md:col-4">
+                    <div class="field-radiobutton">
+                        <p-radioButton name="city" value="Chicago" [(ngModel)]="valRadio" id="city1"></p-radioButton>
+                        <label for="city1">Chicago</label>
+                    </div>
+                </div>
+                <div class="col-12 md:col-4">
+                    <div class="field-radiobutton">
+                        <p-radioButton name="city" value="Los Angeles" [(ngModel)]="valRadio"
+                                       id="city2"></p-radioButton>
+                        <label for="city2">Los Angeles</label>
+                    </div>
+                </div>
+                <div class="col-12 md:col-4">
+                    <div class="field-radiobutton">
+                        <p-radioButton name="city" value="New York" [(ngModel)]="valRadio" id="city3"></p-radioButton>
+                        <label for="city3">New York</label>
+                    </div>
+                </div>
+            </div>
+
+            <h5>Checkbox</h5>
+            <div class="grid">
+                <div class="col-12 md:col-4">
+                    <div class="field-checkbox">
+                        <p-checkbox name="group1" value="New York" [(ngModel)]="valCheck" id="ny"></p-checkbox>
+                        <label for="ny">New York</label>
+                    </div>
+                </div>
+                <div class="col-12 md:col-4">
+                    <div class="field-checkbox">
+                        <p-checkbox name="group1" value="San Francisco" [(ngModel)]="valCheck" id="sf"></p-checkbox>
+                        <label for="sf">San Francisco</label>
+                    </div>
+                </div>
+                <div class="col-12 md:col-4">
+                    <div class="field-checkbox">
+                        <p-checkbox name="group1" value="Los Angeles" [(ngModel)]="valCheck" id="la"></p-checkbox>
+                        <label for="la">Los Angeles</label>
+                    </div>
+                </div>
+            </div>
+
+            <h5>Input Switch</h5>
+            <p-inputSwitch [(ngModel)]="valSwitch"></p-inputSwitch>
+        </div>
+
+        <div class="card p-fluid">
+            <h5>Listbox</h5>
+            <p-listbox [options]="cities" [(ngModel)]="selectedList" [filter]="true"></p-listbox>
+
+            <h5>Dropdown</h5>
+            <span class="p-float-label">
+                <p-dropdown [options]="cities" [(ngModel)]="selectedDrop" [showClear]="true"
+                            [autoDisplayFirst]="false"></p-dropdown>
+                <label>Select a city</label>
+            </span>
+
+            <h5>Multiselect</h5>
+            <span class="p-float-label">
+                <p-multiSelect [options]="countries" [(ngModel)]="selectedMulti" optionLabel="name"
+                               [filter]="false"></p-multiSelect>
+                <label>Select a country</label>
+            </span>
+        </div>
+
+        <div class="card">
+            <h5>ToggleButton</h5>
+            <p-toggleButton [(ngModel)]="valToggle" onLabel="Yes" offLabel="No"
+                            [style]="{'width': '10em'}"></p-toggleButton>
+
+            <h5>SelectOneButton</h5>
+            <p-selectButton [options]="paymentOptions" [(ngModel)]="valSelect1" optionLabel="name"></p-selectButton>
+
+            <h5>SelectManyButton</h5>
+            <p-selectButton [options]="paymentOptions" [(ngModel)]="valSelect2" multiple="multiple"
+                            optionLabel="name"></p-selectButton>
+        </div>
+    </div>
+    <div class="col-12">
+        <div class="card">
+            <h5>InputGroup</h5>
+            <div class="grid p-fluid">
+                <div class="col-12 md:col-6">
+                    <div class="p-inputgroup">
+                        <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
+                        <span class="p-float-label">
+                            <input type="text" pInputText/>
+                            <label>Username</label>
+                        </span>
+                    </div>
+                </div>
+                <div class="col-12 md:col-6">
+                    <div class="p-inputgroup">
+                        <span class="p-inputgroup-addon"><i class="pi pi-tags" style="line-height: 1.25;"></i></span>
+                        <span class="p-inputgroup-addon"><i class="pi pi-shopping-cart" style="line-height: 1.25;"></i></span>
+                        <span class="p-float-label">
+                            <input type="text" pInputText/>
+                            <label>Price</label>
+                        </span>
+                        <span class="p-inputgroup-addon">$</span>
+                        <span class="p-inputgroup-addon">.00</span>
+                    </div>
+                </div>
+                <div class="col-12 md:col-6">
+                    <div class="p-inputgroup">
+                        <button pButton pRipple type="button" label="Search"></button>
+                        <span class="p-float-label">
+                            <input type="text" pInputText/>
+                            <label>Keyword</label>
+                        </span>
+                    </div>
+                </div>
+                <div class="col-12 md:col-6">
+                    <div class="p-inputgroup">
+                        <span class="p-inputgroup-addon"><p-checkbox></p-checkbox></span>
+                        <span class="p-float-label">
+                            <input type="text" pInputText/>
+                            <label>Username</label>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>

Angular/src/app/demo/view/inputdemo.component.ts

@@ -0,0 +1,83 @@
+import {Component, OnInit} from '@angular/core';
+import {CountryService} from '../service/countryservice';
+import {SelectItem} from 'primeng/api';
+import {AppBreadcrumbService} from '../../app.breadcrumb.service';
+
+@Component({
+    templateUrl: './inputdemo.component.html'
+})
+export class InputDemoComponent implements OnInit {
+    countries: any[];
+
+    filteredCountries: any[];
+
+    selectedCountryAdvanced: any[];
+
+    valSlider = 50;
+
+    valColor = '#424242';
+
+    valRadio: string;
+
+    valCheck: string[] = [];
+
+    valSwitch: boolean;
+
+    cities: SelectItem[];
+
+    selectedList: SelectItem;
+
+    selectedDrop: SelectItem;
+
+    selectedMulti: string[] = [];
+
+    valToggle = false;
+
+    paymentOptions: any[];
+
+    valSelect1: string;
+
+    valSelect2: string;
+
+    valueKnob = 20;
+
+    constructor(private countryService: CountryService, private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            {label: 'UI Kit'},
+            {label: 'Input', routerLink: ['/uikit/input']}
+        ]);
+    }
+
+    ngOnInit() {
+        this.countryService.getCountries().then(countries => {
+            this.countries = countries;
+        });
+
+        this.cities = [
+            {label: 'New York', value: {id: 1, name: 'New York', code: 'NY'}},
+            {label: 'Rome', value: {id: 2, name: 'Rome', code: 'RM'}},
+            {label: 'London', value: {id: 3, name: 'London', code: 'LDN'}},
+            {label: 'Istanbul', value: {id: 4, name: 'Istanbul', code: 'IST'}},
+            {label: 'Paris', value: {id: 5, name: 'Paris', code: 'PRS'}}
+        ];
+
+        this.paymentOptions = [
+            {name: 'Option 1', value: 1},
+            {name: 'Option 2', value: 2},
+            {name: 'Option 3', value: 3}
+        ];
+    }
+
+    filterCountry(event) {
+        const filtered: any[] = [];
+        const query = event.query;
+        for (let i = 0; i < this.countries.length; i++) {
+            const country = this.countries[i];
+            if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
+                filtered.push(country);
+            }
+        }
+
+        this.filteredCountries = filtered;
+    }
+}

Angular/src/app/demo/view/invalidstatedemo.component.html

@@ -0,0 +1,49 @@
+<div class="grid grid-nogutter">
+    <div class="card" style="width: 100%">
+        <h5>Invalid State</h5>
+        <p>All form components have an invalid state style to display the validation errors when ng-invalid ng-dirty combination is applied by Angular.</p>
+        <div class="p-fluid grid">
+            <div class="col-12 md:col-6">
+                <div class="field">
+                    <label for="inputtext">InputText</label>
+                    <input type="text" id="inputtext" pInputText class="ng-invalid ng-dirty">
+                </div>
+                <div class="field">
+                    <label for="autocomplete">AutoComplete</label>
+                    <p-autoComplete inputId="autocomplete" [(ngModel)]="value2" [suggestions]="filteredCountries" (completeMethod)="searchCountry($event)" field="name" class="ng-invalid ng-dirty"></p-autoComplete>
+                </div>
+                <div class="field">
+                    <label for="calendar">Calendar</label>
+                    <p-calendar inputId="calendar" [(ngModel)]="value3" class="ng-invalid ng-dirty" [showIcon]="true"></p-calendar>
+                </div>
+                <div class="field">
+                    <label for="chips">Chips</label>
+                    <p-chips inputId="chips" [(ngModel)]="value4" class="ng-invalid ng-dirty"></p-chips>
+                </div>
+                <div class="field">
+                    <label for="textarea">Textarea</label>
+                    <textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value9" pInputTextarea class="ng-invalid ng-dirty"></textarea>
+                </div>
+            </div>
+
+            <div class="col-12 md:col-6">
+                <div class="field">
+                    <label for="inputmask">InputMask</label>
+                    <p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value5" class="ng-invalid ng-dirty"></p-inputMask>
+                </div>
+                <div class="field">
+                    <label for="inputnumber">InputNumber</label>
+                    <p-inputNumber inputId="inputnumber" [(ngModel)]="value6" class="ng-invalid ng-dirty"></p-inputNumber>
+                </div>
+                <div class="field">
+                    <label for="dropdown">Dropdown</label>
+                    <p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value7" optionLabel="name" class="ng-invalid ng-dirty"></p-dropdown>
+                </div>
+                <div class="field">
+                    <label for="multiselect">MultiSelect</label>
+                    <p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value7" optionLabel="name" [filter]="false" class="ng-invalid ng-dirty"></p-multiSelect>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

Angular/src/app/demo/view/invalidstatedemo.component.ts

@@ -0,0 +1,70 @@
+import {Component, OnInit} from '@angular/core';
+import {CountryService} from '../service/countryservice';
+import {AppBreadcrumbService} from '../../app.breadcrumb.service';
+
+@Component({
+    templateUrl: './invalidstatedemo.component.html'
+})
+export class InvalidStateDemoComponent implements OnInit {
+
+
+    countries: any[];
+
+    cities: any[];
+
+    filteredCountries: any[];
+
+    value1: any;
+
+    value2: any;
+
+    value3: any;
+
+    value4: any;
+
+    value5: any;
+
+    value6: any;
+
+    value7: any;
+
+    value8: any;
+
+    value9: any;
+
+    constructor(private countryService: CountryService, private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            {label: 'UI Kit'},
+            {label: 'Invalid State', routerLink: ['/uikit/invalidstate']}
+        ]);
+
+        this.cities = [
+            {name: 'New York', code: 'NY'},
+            {name: 'Rome', code: 'RM'},
+            {name: 'London', code: 'LDN'},
+            {name: 'Istanbul', code: 'IST'},
+            {name: 'Paris', code: 'PRS'}
+        ];
+    }
+
+    ngOnInit() {
+        this.countryService.getCountries().then(countries => {
+            this.countries = countries;
+        });
+    }
+
+    searchCountry(event) {
+        // in a real application, make a request to a remote url with the query and return filtered results,
+        // for demo we filter at client side
+        const filtered: any[] = [];
+        const query = event.query;
+        for (let i = 0; i < this.countries.length; i++) {
+            const country = this.countries[i];
+            if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
+                filtered.push(country);
+            }
+        }
+
+        this.filteredCountries = filtered;
+    }
+}

Angular/src/app/demo/view/listdemo.component.html

@@ -0,0 +1,84 @@
+<div class="grid list-demo">
+	<div class="col-12">
+		<div class="card">
+			<h5>DataView</h5>
+			<p-dataView #dv [value]="products" [paginator]="true" [rows]="9" filterBy="name"
+						[sortField]="sortField" [sortOrder]="sortOrder" layout="grid">
+				<ng-template pTemplate="header">
+					<div class="flex flex-column md:flex-row md:justify-content-between">
+						<p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By Price" (onChange)="onSortChange($event)" styleClass="mb-2 md:mb-0"></p-dropdown>
+						<span class="p-input-icon-left mb-2 md:mb-0">
+                            <i class="pi pi-search"></i>
+                            <input type="search" pInputText placeholder="Search by Name" (input)="dv.filter($event.target.value)">
+                        </span>
+						<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
+					</div>
+				</ng-template>
+				<ng-template let-product pTemplate="listItem">
+					<div class="col-12">
+						<div class="product-list-item">
+							<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name"/>
+							<div class="product-list-detail">
+								<div class="product-name">{{product.name}}</div>
+								<div class="product-description">{{product.description}}</div>
+								<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
+								<i class="pi pi-tag product-category-icon"></i><span class="product-category">{{product.category}}</span>
+							</div>
+							<div class="product-list-action">
+								<span class="product-price">${{product.price}}</span>
+								<p-button icon="pi pi-shopping-cart" label="Add to Cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></p-button>
+								<span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
+							</div>
+						</div>
+					</div>
+				</ng-template>
+				<ng-template let-product pTemplate="gridItem">
+					<div class="col-12 md:col-4">
+						<div class="product-grid-item card">
+							<div class="product-grid-item-top">
+								<div>
+									<i class="pi pi-tag product-category-icon"></i>
+									<span class="product-category">{{product.category}}</span>
+								</div>
+								<span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
+							</div>
+							<div class="product-grid-item-content">
+								<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name"/>
+								<div class="product-name">{{product.name}}</div>
+								<div class="product-description">{{product.description}}</div>
+								<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
+							</div>
+							<div class="product-grid-item-bottom">
+								<span class="product-price">${{product.price}}</span>
+								<p-button icon="pi pi-shopping-cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></p-button>
+							</div>
+						</div>
+					</div>
+				</ng-template>
+			</p-dataView>
+		</div>
+	</div>
+
+	<div class="col-12 lg:col-8">
+		<div class="card">
+			<h5>PickList</h5>
+			<p-pickList [source]="sourceCities" [target]="targetCities" sourceHeader="From" targetHeader="To" dragdrop="true"
+						[responsive]="true" [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}">
+				<ng-template let-city pTemplate="item">
+					<div>{{city.name}}</div>
+				</ng-template>
+			</p-pickList>
+		</div>
+	</div>
+
+	<div class="col-12 lg:col-4">
+		<div class="card">
+			<h5>OrderList</h5>
+			<p-orderList [value]="orderCities" [listStyle]="{'height':'auto'}" header="Cities" dragdrop="true">
+				<ng-template let-city pTemplate="item">
+					<div>{{city.name}}</div>
+				</ng-template>
+			</p-orderList>
+		</div>
+	</div>
+</div>

Angular/src/app/demo/view/listdemo.component.ts

@@ -0,0 +1,73 @@
+import {Component, OnInit} from '@angular/core';
+import {SelectItem} from 'primeng/api';
+import {Product} from '../domain/product';
+import {ProductService} from '../service/productservice';
+import {AppBreadcrumbService} from '../../app.breadcrumb.service';
+
+@Component({
+    templateUrl: './listdemo.component.html',
+    styleUrls: ['./listdemo.scss']
+})
+export class ListDemoComponent implements OnInit {
+
+    products: Product[];
+
+    sortOptions: SelectItem[];
+
+    sortOrder: number;
+
+    sortField: string;
+
+    sourceCities: any[];
+
+    targetCities: any[];
+
+    orderCities: any[];
+
+    constructor(private productService: ProductService, private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'UI Kit' },
+            { label: 'List', routerLink: ['/uikit/list'] }
+        ]);
+    }
+
+    ngOnInit() {
+        this.productService.getProducts().then(data => this.products = data);
+
+        this.sourceCities = [
+            {name: 'San Francisco', code: 'SF'},
+            {name: 'London', code: 'LDN'},
+            {name: 'Paris', code: 'PRS'},
+            {name: 'Istanbul', code: 'IST'},
+            {name: 'Berlin', code: 'BRL'},
+            {name: 'Barcelona', code: 'BRC'},
+            {name: 'Rome', code: 'RM'}];
+        this.targetCities = [];
+
+        this.orderCities = [
+            {name: 'San Francisco', code: 'SF'},
+            {name: 'London', code: 'LDN'},
+            {name: 'Paris', code: 'PRS'},
+            {name: 'Istanbul', code: 'IST'},
+            {name: 'Berlin', code: 'BRL'},
+            {name: 'Barcelona', code: 'BRC'},
+            {name: 'Rome', code: 'RM'}];
+
+        this.sortOptions = [
+            {label: 'Price High to Low', value: '!price'},
+            {label: 'Price Low to High', value: 'price'}
+        ];
+    }
+
+    onSortChange(event) {
+        const value = event.value;
+
+        if (value.indexOf('!') === 0) {
+            this.sortOrder = -1;
+            this.sortField = value.substring(1, value.length);
+        } else {
+            this.sortOrder = 1;
+            this.sortField = value;
+        }
+    }
+}

Angular/src/app/demo/view/listdemo.scss

@@ -0,0 +1,146 @@
+:host ::ng-deep {
+	.p-dropdown {
+		width: 14rem;
+		font-weight: normal;
+	}
+
+	.product-name {
+		font-size: 1.5rem;
+		font-weight: 700;
+	}
+
+	.product-description {
+		margin: 0 0 1rem 0;
+	}
+
+	.product-category-icon {
+		vertical-align: middle;
+		margin-right: .5rem;
+	}
+
+	.product-category {
+		font-weight: 600;
+		vertical-align: middle;
+	}
+
+	.product-list-item {
+		display: flex;
+		align-items: center;
+		padding: 1rem;
+		width: 100%;
+
+		img {
+			width: 150px;
+			box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+			margin-right: 2rem;
+		}
+
+		.product-list-detail {
+			flex: 1 1 0;
+		}
+
+		.p-rating {
+			margin: 0 0 .5rem 0;
+		}
+
+		.product-price {
+			font-size: 1.5rem;
+			font-weight: 600;
+			margin-bottom: .5rem;
+			align-self: flex-end;
+		}
+
+		.product-list-action {
+			display: flex;
+			flex-direction: column;
+		}
+
+		.p-button {
+			margin-bottom: .5rem;
+		}
+	}
+
+	.product-grid-item {
+		margin: .5em;
+		border: 1px solid var(--surface-d);
+
+		.product-grid-item-top,
+		.product-grid-item-bottom {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		img {
+			width: 75%;
+			box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+			margin: 2rem 0;
+		}
+
+		.product-grid-item-content {
+			text-align: center;
+		}
+
+		.product-price {
+			font-size: 1.5rem;
+			font-weight: 600;
+		}
+	}
+}
+
+.product-badge {
+	border-radius: 2px;
+	padding: .25em .5rem;
+	text-transform: uppercase;
+	font-weight: 700;
+	font-size: 12px;
+	letter-spacing: .3px;
+
+	&.status-instock {
+		background: #C8E6C9;
+		color: #256029;
+	}
+
+	&.status-outofstock {
+		background: #FFCDD2;
+		color: #C63737;
+	}
+
+	&.status-lowstock {
+		background: #FEEDAF;
+		color: #8A5340;
+	}
+}
+
+@media screen and (max-width: 576px) {
+	:host ::ng-deep .product-list-item {
+		flex-direction: column;
+		align-items: center;
+
+		img {
+			width: 75%;
+			margin: 2rem 0;
+		}
+
+		.product-list-detail {
+			text-align: center;
+		}
+
+		.product-price {
+			align-self: center;
+		}
+
+		.product-list-action {
+			display: flex;
+			flex-direction: column;
+		}
+
+		.product-list-action {
+			margin-top: 2rem;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			width: 100%;
+		}
+	}
+}

Angular/src/app/demo/view/mediademo.component.html

@@ -0,0 +1,54 @@
+<div class="grid p-fluid">
+    <div class="col-12">
+        <div class="card">
+            <h5>Carousel</h5>
+            <p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="carouselResponsiveOptions">
+                <ng-template let-product pTemplate="item">
+                    <div class="product-item">
+                        <div class="product-item-content">
+                            <div class="mb-3">
+                                <img src="assets/demo/images/product/{{product.image}}" [alt]="product.name" class="product-image" />
+                            </div>
+                            <div>
+                                <h4 class="mb-1">{{product.name}}</h4>
+                                <h6 class="mt-0 mb-3">${{product.price}}</h6>
+                                <span [class]="'product-badge status-'+product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
+                                <div class="car-buttons mt-5">
+                                    <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
+                                    <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star"></p-button>
+                                    <p-button type="button" styleClass="p-button-help p-button-rounded" icon="pi pi-cog"></p-button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </ng-template>
+            </p-carousel>
+        </div>
+    </div>
+
+    <div class="col-12">
+        <div class="card">
+            <h5>Image</h5>
+            <div class="flex justify-content-center">
+                <p-image src="assets/demo/images/galleria/galleria10.jpg" alt="Image" width="250" [preview]="true"></p-image>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12">
+        <div class="card">
+            <h5>Galleria</h5>
+            <p-galleria [value]="images" [responsiveOptions]="galleriaResponsiveOptions"
+                        [containerStyle]="{'max-width': '800px', 'margin':'auto'}" [numVisible]="7" [circular]="true">
+                <ng-template pTemplate="item" let-item>
+                    <img [src]="item.itemImageSrc" style="width: 100%; display: block;"/>
+                </ng-template>
+                <ng-template pTemplate="thumbnail" let-item>
+                    <div class="grid grid-nogutter justify-content-center">
+                        <img [src]="item.thumbnailImageSrc" style="display: block;"/>
+                    </div>
+                </ng-template>
+            </p-galleria>
+        </div>
+    </div>
+</div>

Angular/src/app/demo/view/mediademo.component.ts

@@ -0,0 +1,71 @@
+import {Component, OnInit} from '@angular/core';
+import {ProductService} from '../service/productservice';
+import {PhotoService} from '../service/photoservice';
+import {Product} from '../domain/product';
+import {AppBreadcrumbService} from '../../app.breadcrumb.service';
+
+@Component({
+    templateUrl: './mediademo.component.html',
+    styleUrls: ['./mediademo.scss'],
+})
+export class MediaDemoComponent implements OnInit {
+
+    products: Product[];
+
+    images: any[];
+
+    galleriaResponsiveOptions: any[] = [
+        {
+            breakpoint: '1024px',
+            numVisible: 5
+        },
+        {
+            breakpoint: '960px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '768px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '560px',
+            numVisible: 1
+        }
+    ];
+
+    carouselResponsiveOptions: any[] = [
+        {
+            breakpoint: '1024px',
+            numVisible: 3,
+            numScroll: 3
+        },
+        {
+            breakpoint: '768px',
+            numVisible: 2,
+            numScroll: 2
+        },
+        {
+            breakpoint: '560px',
+            numVisible: 1,
+            numScroll: 1
+        }
+    ];
+
+    constructor(private productService: ProductService, private photoService: PhotoService,
+                private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'UI Kit' },
+            { label: 'Media', routerLink: ['/uikit/media'] }
+        ]);
+    }
+
+    ngOnInit() {
+        this.productService.getProductsSmall().then(products => {
+            this.products = products;
+        });
+
+        this.photoService.getImages().then(images => {
+            this.images = images;
+        });
+    }
+}

Angular/src/app/demo/view/mediademo.scss

@@ -0,0 +1,14 @@
+.product-item {
+    .product-item-content {
+        border: 1px solid var(--surface-d);
+        border-radius: 3px;
+        margin: .3rem;
+        text-align: center;
+        padding: 2rem 0;
+    }
+
+    .product-image {
+        width: 50%;
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
+    }
+}

Angular/src/app/demo/view/menusdemo.component.html

@@ -0,0 +1,89 @@
+<div class="grid p-fluid">
+    <div class="col-12">
+        <div class="card">
+            <h5>MenuBar</h5>
+            <p-menubar [model]="tieredItems">
+                <ng-template pTemplate="end">
+                    <span class="p-input-icon-right p-float-label">
+                        <input type="text" pInputText>
+                        <label>Search</label>
+                        <i class="pi pi-search"></i>
+                    </span>
+                </ng-template>
+            </p-menubar>
+        </div>
+    </div>
+
+    <div class="col-12">
+        <div class="card">
+            <h5>Breadcrumb</h5>
+            <p-breadcrumb [model]="breadcrumbItems" [home]="{icon: 'pi pi-home'}"></p-breadcrumb>
+        </div>
+    </div>
+
+    <div class="col-12 xl:col-6">
+        <div class="card">
+            <h5>Steps</h5>
+            <p-steps [model]="stepsItems" [activeIndex]="1"></p-steps>
+        </div>
+    </div>
+
+    <div class="col-12 xl:col-6">
+        <div class="card height-100">
+            <h5>TabMenu</h5>
+            <p-tabMenu [model]="tabMenuItems" [activeItem]="tabMenuItems[0]"></p-tabMenu>
+        </div>
+    </div>
+
+    <div class="col-12 md:col-4">
+        <div class="card">
+            <h5>TieredMenu</h5>
+            <p-tieredMenu [model]="tieredItems" [style]="{'width':'100%','margin-bottom':'20px'}"></p-tieredMenu>
+        </div>
+
+        <div class="card">
+            <h5>MenuButton</h5>
+            <p-menu #menu [popup]="true" [model]="menuItems" [style]="{'width':'250px'}"></p-menu>
+            <button pButton pRipple type="button" icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)" style="width:auto"></button>
+        </div>
+    </div>
+
+    <div class="col-12 md:col-4">
+        <div class="card">
+            <h5>Plain Menu</h5>
+            <p-menu [model]="items" [style]="{'width':'100%'}"></p-menu>
+        </div>
+    </div>
+
+    <div class="col-12 md:col-4">
+        <div class="card">
+            <h5>ContextMenu</h5>
+            Right click to display.
+
+            <p-contextMenu [global]="true" [model]="menuItems"></p-contextMenu>
+        </div>
+
+        <div class="card">
+            <h5>SlideMenu</h5>
+            <p-slideMenu [model]="slideItems" [viewportHeight]="250" [menuWidth]="175"></p-slideMenu>
+        </div>
+    </div>
+
+    <div class="col-12 md:col-6">
+        <div class="card">
+            <h5>MegaMenu - Horizontal</h5>
+            <p-megaMenu [model]="megaMenuItems"></p-megaMenu>
+
+            <h5>MegaMenu - Vertical</h5>
+            <p-megaMenu [model]="megaMenuItems" orientation="vertical" [style]="{'width':'200px'}"></p-megaMenu>
+        </div>
+    </div>
+
+
+    <div class="col-12 md:col-6">
+        <div class="card">
+            <h5>PanelMenu</h5>
+            <p-panelMenu [model]="panelMenuItems"></p-panelMenu>
+        </div>
+    </div>
+</div>

Angular/src/app/demo/view/menusdemo.component.ts

@@ -0,0 +1,464 @@
+import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import {MegaMenuItem, MenuItem} from 'primeng/api';
+import {AppBreadcrumbService} from '../../app.breadcrumb.service';
+
+@Component({
+    templateUrl: './menusdemo.component.html',
+    styleUrls: ['./menusdemo.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class MenusDemoComponent implements OnInit {
+
+    breadcrumbItems: MenuItem[];
+
+    tieredItems: MenuItem[];
+
+    items: MenuItem[];
+
+    tabMenuItems: MenuItem[];
+
+    megaMenuItems: MegaMenuItem[];
+
+    panelMenuItems: MenuItem[];
+
+    stepsItems: MenuItem[];
+
+    slideItems: MenuItem[];
+
+    menuItems: MenuItem[];
+
+    constructor(private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'UI Kit' },
+            { label: 'Menu', routerLink: ['/uikit/menu'] }
+        ]);
+    }
+
+    ngOnInit() {
+
+        this.tieredItems = [
+            {
+                label: 'Customers',
+                icon: 'pi pi-fw pi-table',
+                items: [
+                    {
+                        label: 'New',
+                        icon: 'pi pi-fw pi-plus',
+                        items: [
+                            {
+                                label: 'Customer',
+                                icon: 'pi pi-fw pi-plus'
+                            },
+                            {
+                                label: 'Duplicate',
+                                icon: 'pi pi-fw pi-copy'
+                            },
+
+                        ]
+                    },
+                    {
+                        label: 'Edit',
+                        icon: 'pi pi-fw pi-user-edit'
+                    }
+                ]
+            },
+            {
+                label: 'Orders',
+                icon: 'pi pi-fw pi-shopping-cart',
+                items: [
+                    {
+                        label: 'View',
+                        icon: 'pi pi-fw pi-list'
+                    },
+                    {
+                        label: 'Search',
+                        icon: 'pi pi-fw pi-search'
+                    }
+
+                ]
+            },
+            {
+                label: 'Shipments',
+                icon: 'pi pi-fw pi-envelope',
+                items: [
+                    {
+                        label: 'Tracker',
+                        icon: 'pi pi-fw pi-compass',
+
+                    },
+                    {
+                        label: 'Map',
+                        icon: 'pi pi-fw pi-map-marker',
+
+                    },
+                    {
+                        label: 'Manage',
+                        icon: 'pi pi-fw pi-pencil'
+                    }
+                ]
+            },
+            {
+                label: 'Profile',
+                icon: 'pi pi-fw pi-user',
+                items: [
+                    {
+                        label: 'Settings',
+                        icon: 'pi pi-fw pi-cog'
+                    },
+                    {
+                        label: 'Billing',
+                        icon: 'pi pi-fw pi-file'
+                    }
+                ]
+            },
+            { separator: true },
+            {
+                label: 'Quit',
+                icon: 'pi pi-fw pi-sign-out'
+            }
+        ];
+
+        this.items = [
+            {
+                label: 'Customers',
+                items: [
+                    {
+                        label: 'New',
+                        icon: 'pi pi-fw pi-plus'
+                    },
+                    {
+                        label: 'Edit',
+                        icon: 'pi pi-fw pi-user-edit'
+                    }
+                ]
+            },
+            {
+                label: 'Orders',
+                items: [
+                    {
+                        label: 'View',
+                        icon: 'pi pi-fw pi-list'
+                    },
+                    {
+                        label: 'Search',
+                        icon: 'pi pi-fw pi-search'
+                    }
+
+                ]
+            },
+            {
+                label: 'Shipments',
+                items: [
+                    {
+                        label: 'Tracker',
+                        icon: 'pi pi-fw pi-compass',
+
+                    },
+                    {
+                        label: 'Map',
+                        icon: 'pi pi-fw pi-map-marker',
+
+                    },
+                    {
+                        label: 'Manage',
+                        icon: 'pi pi-fw pi-pencil'
+                    }
+                ]
+            }
+        ];
+
+        this.menuItems = [
+            {
+                label: 'Save', icon: 'pi pi-fw pi-check'
+            },
+            {
+                label: 'Update', icon: 'pi pi-fw pi-refresh'
+            },
+            {
+                label: 'Delete', icon: 'pi pi-fw pi-trash'
+            },
+            {
+                separator: true
+            },
+            {
+                label: 'Quit', icon: 'pi pi-fw pi-sign-out'
+            },
+        ];
+
+        this.slideItems = [
+            {
+                label: 'Customers',
+                icon: 'pi pi-fw pi-table',
+                items: [
+                    {
+                        label: 'New',
+                        icon: 'pi pi-fw pi-plus'
+                    },
+                    {
+                        label: 'Edit',
+                        icon: 'pi pi-fw pi-user-edit'
+                    }
+                ]
+            },
+            {
+                label: 'Orders',
+                icon: 'pi pi-fw pi-shopping-cart',
+                items: [
+                    {
+                        label: 'View',
+                        icon: 'pi pi-fw pi-list'
+                    },
+                    {
+                        label: 'Search',
+                        icon: 'pi pi-fw pi-search'
+                    }
+
+                ]
+            },
+            {
+                label: 'Shipments',
+                icon: 'pi pi-fw pi-envelope',
+                items: [
+                    {
+                        label: 'Tracker',
+                        icon: 'pi pi-fw pi-compass',
+
+                    },
+                    {
+                        label: 'Map',
+                        icon: 'pi pi-fw pi-map-marker',
+
+                    },
+                    {
+                        label: 'Manage',
+                        icon: 'pi pi-fw pi-pencil'
+                    }
+                ]
+            },
+            {
+                label: 'Profile',
+                icon: 'pi pi-fw pi-user',
+                items: [
+                    {
+                        label: 'Settings',
+                        icon: 'pi pi-fw pi-cog'
+                    },
+                    {
+                        label: 'Billing',
+                        icon: 'pi pi-fw pi-file'
+                    }
+                ]
+            }
+        ];
+
+        this.breadcrumbItems = [];
+        this.breadcrumbItems.push({ label: 'Electronics' });
+        this.breadcrumbItems.push({ label: 'Computer' });
+        this.breadcrumbItems.push({ label: 'Notebook' });
+        this.breadcrumbItems.push({ label: 'Accessories' });
+        this.breadcrumbItems.push({ label: 'Backpacks' });
+        this.breadcrumbItems.push({ label: 'Item' });
+
+        this.tabMenuItems = [
+            {label: 'Overview', icon: 'pi pi-fw pi-home'},
+            {label: 'Members', icon: 'pi pi-fw pi-users'},
+            {label: 'Sales', icon: 'pi pi-fw pi-shopping-cart'},
+            {label: 'Profile', icon: 'pi pi-fw pi-user'},
+            {label: 'Settings', icon: 'pi pi-fw pi-cog'}
+        ];
+
+        this.megaMenuItems = [
+            {
+                label: 'Fashion', icon: 'pi pi-fw pi-tag',
+                items: [
+                    [
+                        {
+                            label: 'Women',
+                            items: [{label: 'Women Item'}, {label: 'Women Item'}, {label: 'Women Item'}]
+                        },
+                        {
+                            label: 'Men',
+                            items: [{label: 'Men Item'}, {label: 'Men Item'}, {label: 'Men Item'}]
+                        }
+                    ],
+                    [
+                        {
+                            label: 'Kids',
+                            items: [{label: 'Kids Item'}, {label: 'Kids Item'}]
+                        },
+                        {
+                            label: 'Luggage',
+                            items: [{label: 'Luggage Item'}, {label: 'Luggage Item'}, {label: 'Luggage Item'}]
+                        }
+                    ]
+                ]
+            },
+            {
+                label: 'Electronics', icon: 'pi pi-fw pi-desktop',
+                items: [
+                    [
+                        {
+                            label: 'Computer',
+                            items: [{label: 'Computer Item'}, {label: 'Computer Item'}]
+                        },
+                        {
+                            label: 'Camcorder',
+                            items: [{label: 'Camcorder Item'}, {label: 'Camcorder Item'}, {label: 'Camcorder Item'}]
+                        }
+                    ],
+                    [
+                        {
+                            label: 'TV',
+                            items: [{label: 'TV Item'}, {label: 'TV Item'}]
+                        },
+                        {
+                            label: 'Audio',
+                            items: [{label: 'Audio Item'}, {label: 'Audio Item'}, {label: 'Audio Item'}]
+                        }
+                    ],
+                    [
+                        {
+                            label: 'Sports.7',
+                            items: [{label: 'Sports.7.1'}, {label: 'Sports.7.2'}]
+                        }
+                    ]
+                ]
+            },
+            {
+                label: 'Furniture', icon: 'pi pi-fw pi-image',
+                items: [
+                    [
+                        {
+                            label: 'Living Room',
+                            items: [{label: 'Living Room Item'}, {label: 'Living Room Item'}]
+                        },
+                        {
+                            label: 'Kitchen',
+                            items: [{label: 'Kitchen Item'}, {label: 'Kitchen Item'}, {label: 'Kitchen Item'}]
+                        }
+                    ],
+                    [
+                        {
+                            label: 'Bedroom',
+                            items: [{label: 'Bedroom Item'}, {label: 'Bedroom Item'}]
+                        },
+                        {
+                            label: 'Outdoor',
+                            items: [{label: 'Outdoor Item'}, {label: 'Outdoor Item'}, {label: 'Outdoor Item'}]
+                        }
+                    ]
+                ]
+            },
+            {
+                label: 'Sports', icon: 'pi pi-fw pi-star-o',
+                items: [
+                    [
+                        {
+                            label: 'Basketball',
+                            items: [{label: 'Basketball Item'}, {label: 'Basketball Item'}]
+                        },
+                        {
+                            label: 'Football',
+                            items: [{label: 'Football Item'}, {label: 'Football Item'}, {label: 'Football Item'}]
+                        }
+                    ],
+                    [
+                        {
+                            label: 'Tennis',
+                            items: [{label: 'Tennis Item'}, {label: 'Tennis Item'}]
+                        }
+                    ]
+                ]
+            },
+        ];
+
+        this.panelMenuItems = [
+            {
+                label: 'Customers',
+                items: [
+                    {
+                        label: 'New',
+                        icon: 'pi pi-fw pi-plus',
+                        items: [
+                            {
+                                label: 'Customer',
+                                icon: 'pi pi-fw pi-plus'
+                            },
+                            {
+                                label: 'Duplicate',
+                                icon: 'pi pi-fw pi-copy'
+                            },
+
+                        ]
+                    },
+                    {
+                        label: 'Edit',
+                        icon: 'pi pi-fw pi-user-edit'
+                    }
+                ]
+            },
+            {
+                label: 'Orders',
+                items: [
+                    {
+                        label: 'View',
+                        icon: 'pi pi-fw pi-list'
+                    },
+                    {
+                        label: 'Search',
+                        icon: 'pi pi-fw pi-search'
+                    }
+
+                ]
+            },
+            {
+                label: 'Shipments',
+                items: [
+                    {
+                        label: 'Tracker',
+                        icon: 'pi pi-fw pi-compass',
+
+                    },
+                    {
+                        label: 'Map',
+                        icon: 'pi pi-fw pi-map-marker',
+
+                    },
+                    {
+                        label: 'Manage',
+                        icon: 'pi pi-fw pi-pencil'
+                    }
+                ]
+            },
+            {
+                label: 'Profile',
+                items: [
+                    {
+                        label: 'Settings',
+                        icon: 'pi pi-fw pi-cog'
+                    },
+                    {
+                        label: 'Billing',
+                        icon: 'pi pi-fw pi-file'
+                    }
+                ]
+            }
+        ];
+
+        this.stepsItems = [
+            {
+                label: 'Personal'
+            },
+            {
+                label: 'Seat'
+            },
+            {
+                label: 'Payment'
+            },
+            {
+                label: 'Confirmation'
+            }
+        ];
+    }
+
+}

Angular/src/app/demo/view/menusdemo.scss

@@ -0,0 +1,28 @@
+@media screen and (max-width: 575px) {
+    .p-steps {
+        height: 300px;
+
+        > ul {
+            flex-direction: column;
+            height: 100%;
+
+            .p-steps-item {
+                flex-direction: column-reverse;
+                align-items: flex-start;
+                justify-content: center;
+
+                &:before {
+                    border-left: 1px solid var(--surface-d);
+                    border-top: 0 none;
+                    width: auto;
+                    height: 100%;
+                    margin-left: calc(1.714rem / 2);
+                }
+
+                .p-menuitem-link {
+                    padding: .5rem 0;
+                }
+            }
+        }
+    }
+}

Angular/src/app/demo/view/messagesdemo.component.html

@@ -0,0 +1,61 @@
+<div class="grid">
+    <div class="col-12 lg:col-6">
+        <div class="card">
+            <h5>Toast</h5>
+            <p-toast key="tst"></p-toast>
+
+            <button pButton pRipple type="button" (click)="showSuccessViaToast()" label="Success" class="p-button-success mr-2 mb-2"></button>
+            <button pButton pRipple type="button" (click)="showInfoViaToast()" label="Info" class="p-button-info mr-2 mb-2"></button>
+            <button pButton pRipple type="button" (click)="showWarnViaToast()" label="Warn" class="p-button-warning mr-2 mb-2"></button>
+            <button pButton pRipple type="button" (click)="showErrorViaToast()" label="Error" class="p-button-danger mb-2"></button>
+        </div>
+    </div>
+
+    <div class="col-12 lg:col-6">
+        <div class="card">
+            <h5>Messages</h5>
+            <button pButton pRipple type="button" (click)="showSuccessViaMessages()" label="Success" class="p-button-success mr-2 mb-2"></button>
+            <button pButton pRipple type="button" (click)="showInfoViaMessages()" label="Info" class="p-button-info mr-2 mb-2"></button>
+            <button pButton pRipple type="button" (click)="showWarnViaMessages()" label="Warn" class="p-button-warning mr-2 mb-2"></button>
+            <button pButton pRipple type="button" (click)="showErrorViaMessages()" label="Error" class="p-button-danger mb-2"></button>
+
+            <p-messages [value]="msgs"></p-messages>
+        </div>
+    </div>
+
+    <div class="col-12 lg:col-8">
+        <div class="card">
+            <h5>Inline Message</h5>
+            <div class="mt-4">
+                <span class="p-float-label inline-block">
+                    <input type="text" pInputText class="ng-dirty ng-invalid p-invalid mr-2">
+                    <label>Username*</label>
+                </span>
+                <p-message severity="error" text="Field is required"></p-message>
+            </div>
+
+            <div class="mt-4">
+                <span class="p-float-label inline-block">
+                    <input type="text" pInputText class="ng-dirty ng-invalid p-invalid mr-2">
+                    <label>Email*</label>
+                </span>
+                <p-message severity="error"></p-message>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12 lg:col-4">
+        <div class="card">
+            <h5>Help Text</h5>
+            <div class="field p-fluid">
+                <span class="p-float-label">
+                    <input id="username" type="username" aria-describedby="username-help" class="ng-invalid ng-dirty" pInputText />
+                    <label for="username">Username*</label>
+                </span>
+                <small id="username-help" class="p-error">Username is not available.</small>
+            </div>
+        </div>
+    </div>
+
+
+</div>

Angular/src/app/demo/view/messagesdemo.component.ts

@@ -0,0 +1,64 @@
+import {Component} from '@angular/core';
+import {Message, MessageService} from 'primeng/api';
+import {AppBreadcrumbService} from '../../app.breadcrumb.service';
+
+@Component({
+    templateUrl: './messagesdemo.component.html',
+    styles: [`
+        :host ::ng-deep .p-button {
+            min-width: 8em;
+        }
+
+		:host ::ng-deep .p-message {
+			margin-left: .25em;
+		}
+    `],
+    providers: [MessageService]
+})
+export class MessagesDemoComponent {
+
+    msgs: Message[] = [];
+
+    constructor(private service: MessageService, private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'UI Kit' },
+            { label: 'Message', routerLink: ['/uikit/message'] }
+        ]);
+    }
+
+    showInfoViaToast() {
+        this.service.add({key: 'tst', severity: 'info', summary: 'Info Message', detail: 'PrimeNG rocks'});
+    }
+
+    showWarnViaToast() {
+        this.service.add({key: 'tst', severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes'});
+    }
+
+    showErrorViaToast() {
+        this.service.add({ key: 'tst', severity: 'error', summary: 'Error Message', detail: 'Validation failed' });
+    }
+
+    showSuccessViaToast() {
+        this.service.add({ key: 'tst', severity: 'success', summary: 'Success Message', detail: 'Message sent' });
+    }
+
+    showInfoViaMessages() {
+        this.msgs = [];
+        this.msgs.push({ severity: 'info', summary: 'Info Message', detail: 'PrimeNG rocks' });
+    }
+
+    showWarnViaMessages() {
+        this.msgs = [];
+        this.msgs.push({ severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes' });
+    }
+
+    showErrorViaMessages() {
+        this.msgs = [];
+        this.msgs.push({ severity: 'error', summary: 'Error Message', detail: 'Validation failed' });
+    }
+
+    showSuccessViaMessages() {
+        this.msgs = [];
+        this.msgs.push({ severity: 'success', summary: 'Success Message', detail: 'Message sent' });
+    }
+}

Angular/src/app/demo/view/miscdemo.component.html

@@ -0,0 +1,165 @@
+<div class="grid misc-demo">
+    <div class="col-12">
+        <div class="card">
+            <h5>ProgressBar</h5>
+            <div class="grid">
+                <div class="col">
+                    <p-progressBar [value]="value" [showValue]="false"></p-progressBar>
+                </div>
+                <div class="col">
+                    <p-progressBar [value]="50" [showValue]="false"></p-progressBar>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-12 lg:col-6">
+        <div class="card">
+            <h4>Badge</h4>
+            <h5>Numbers</h5>
+            <div class="badges">
+                <p-badge [value]="2" styleClass="mr-2"></p-badge>
+                <p-badge [value]="8" severity="success" styleClass="mr-2"></p-badge>
+                <p-badge [value]="4" severity="info" styleClass="mr-2"></p-badge>
+                <p-badge [value]="12" severity="warning" styleClass="mr-2"></p-badge>
+                <p-badge [value]="3" severity="danger"></p-badge>
+            </div>
+
+            <h5>Positioned Badge</h5>
+            <i class="pi pi-bell mr-4 p-text-secondary" pBadge style="font-size: 2rem" value="2"></i>
+            <i class="pi pi-calendar mr-4 p-text-secondary" pBadge style="font-size: 2rem" [value]="'10+'" severity="danger"></i>
+            <i class="pi pi-envelope p-text-secondary" pBadge style="font-size: 2rem" severity="danger"></i>
+
+
+            <h5>Inline Button Badge</h5>
+            <p-button label="Emails" badge="8" styleClass="mr-2"></p-button>
+            <p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
+
+            <h5>Sizes</h5>
+            <div class="badges">
+                <p-badge [value]="2" styleClass="mr-2"></p-badge>
+                <p-badge [value]="4" size="large" severity="warning" styleClass="mr-2"></p-badge>
+                <p-badge [value]="6" size="xlarge" severity="success" styleClass="mr-2"></p-badge>
+            </div>
+        </div>
+
+        <div class="card">
+            <h4>Avatar</h4>
+            <h5>Avatar Group</h5>
+            <p-avatarGroup styleClass="mb-3">
+                <p-avatar image="assets/demo/images/avatar/amyelsner.png" size="large" shape="circle"></p-avatar>
+                <p-avatar image="assets/demo/images/avatar/asiyajavayant.png" size="large" shape="circle"></p-avatar>
+                <p-avatar image="assets/demo/images/avatar/onyamalimba.png" size="large" shape="circle"></p-avatar>
+                <p-avatar image="assets/demo/images/avatar/ionibowcher.png" size="large" shape="circle"></p-avatar>
+                <p-avatar image="assets/demo/images/avatar/xuxuefeng.png" size="large"shape="circle"></p-avatar>
+                <p-avatar label="+2" shape="circle" size="large" [style]="{'background-color':'#9c27b0', 'color': '#ffffff'}"></p-avatar>
+            </p-avatarGroup>
+
+            <h5>Label - Circle</h5>
+            <p-avatar label="P" styleClass="mr-2" size="xlarge" shape="circle"></p-avatar>
+            <p-avatar label="V" styleClass="mr-2" size="large" [style]="{'background-color':'#2196F3', 'color': '#ffffff'}" shape="circle"></p-avatar>
+            <p-avatar label="U" styleClass="mr-2" [style]="{'background-color': '#9c27b0', 'color': '#ffffff'}" shape="circle"></p-avatar>
+
+            <h5>Icon - Badge</h5>
+            <p-avatar icon="pi pi-user" pBadge value="4" severity="success" styleClass="mr-2" size="xlarge"></p-avatar>
+        </div>
+
+        <div class="card">
+            <h4>ScrollTop</h4>
+            <p-scrollPanel [style]="{width: '250px', height: '200px'}">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Vitae et leo duis ut diam.
+                    Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
+                    Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
+                    Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
+                    Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
+                    Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
+                    Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
+                    Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
+                    Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
+                    Mattis aliquam faucibus purus in massa tempor nec.
+                </p>
+                <p-scrollTop target="parent" styleClass="custom-scrolltop" [threshold]="100" icon="pi pi-arrow-up"></p-scrollTop>
+            </p-scrollPanel>
+        </div>
+    </div>
+    <div class="col-12 lg:col-6">
+        <div class="card">
+            <h4>Tag</h4>
+            <h5>Tags</h5>
+            <p-tag styleClass="mr-2" value="Primary"></p-tag>
+            <p-tag styleClass="mr-2" severity="success" value="Success"></p-tag>
+            <p-tag styleClass="mr-2" severity="info" value="Info"></p-tag>
+            <p-tag styleClass="mr-2" severity="warning" value="Warning"></p-tag>
+            <p-tag severity="danger" value="Danger"></p-tag>
+
+            <h5>Pills</h5>
+            <p-tag styleClass="mr-2" value="Primary" [rounded]="true"></p-tag>
+            <p-tag styleClass="mr-2" severity="success" value="Success" [rounded]="true"></p-tag>
+            <p-tag styleClass="mr-2" severity="info" value="Info" [rounded]="true"></p-tag>
+            <p-tag styleClass="mr-2" severity="warning" value="Warning" [rounded]="true"></p-tag>
+            <p-tag severity="danger" value="Danger" [rounded]="true"></p-tag>
+
+            <h5>Icons</h5>
+            <p-tag styleClass="mr-2" icon="pi pi-user" value="Primary"></p-tag>
+            <p-tag styleClass="mr-2" icon="pi pi-check" severity="success" value="Success"></p-tag>
+            <p-tag styleClass="mr-2" icon="pi pi-info-circle" severity="info" value="Info"></p-tag>
+            <p-tag styleClass="mr-2" con="pi pi-exclamation-triangle" severity="warning" value="Warning"></p-tag>
+            <p-tag icon="pi pi-times" severity="danger" value="Danger"></p-tag>
+        </div>
+
+        <div class="card">
+            <h4>Chip</h4>
+            <h5>Basic</h5>
+            <div class="flex align-items-center">
+                <p-chip label="Action" styleClass="mr-2"></p-chip>
+                <p-chip label="Comedy" styleClass="mr-2"></p-chip>
+                <p-chip label="Mystery" styleClass="mr-2"></p-chip>
+                <p-chip label="Thriller" [removable]="true"></p-chip>
+            </div>
+
+            <h5>Icon</h5>
+            <div class="flex align-items-center">
+                <p-chip label="Apple" icon="pi pi-apple" styleClass="mr-2"></p-chip>
+                <p-chip label="Facebook" icon="pi pi-facebook" styleClass="mr-2"></p-chip>
+                <p-chip label="Google" icon="pi pi-google" styleClass="mr-2"></p-chip>
+                <p-chip label="Microsoft" icon="pi pi-microsoft" [removable]="true"></p-chip>
+            </div>
+
+            <h5>Image</h5>
+            <div class="flex align-items-center">
+                <p-chip label="Amy Elsner" image="assets/demo/images/avatar/amyelsner.png" styleClass="mr-2"></p-chip>
+                <p-chip label="Asiya Javayant" image="assets/demo/images/avatar/asiyajavayant.png" styleClass="mr-2"></p-chip>
+                <p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="mr-2"></p-chip>
+                <p-chip label="Xuxue Feng" image="assets/demo/images/avatar/xuxuefeng.png" [removable]="true"></p-chip>
+            </div>
+
+            <h5>Styling</h5>
+            <div class="flex align-items-center">
+                <p-chip label="Action" styleClass="mr-2 custom-chip"></p-chip>
+                <p-chip label="Comedy" styleClass="mr-2 custom-chip"></p-chip>
+                <p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="mr-2 custom-chip"></p-chip>
+                <p-chip label="Xuxue Feng" image="assets/demo/images/avatar/xuxuefeng.png" [removable]="true" styleClass="custom-chip"></p-chip>
+            </div>
+        </div>
+
+        <div class="card">
+            <h4>Skeleton</h4>
+            <div class="custom-skeleton p-4">
+                <div class="flex mb-3">
+                    <p-skeleton shape="circle" size="4rem" styleClass="mr-2"></p-skeleton>
+                    <div>
+                        <p-skeleton width="10rem" styleClass="mb-2"></p-skeleton>
+                        <p-skeleton width="5rem" styleClass="mb-2"></p-skeleton>
+                        <p-skeleton height=".5rem"></p-skeleton>
+                    </div>
+                </div>
+                <p-skeleton width="100%" height="150px"></p-skeleton>
+                <div class="flex justify-content-between mt-3">
+                    <p-skeleton width="4rem" height="2rem"></p-skeleton>
+                    <p-skeleton width="4rem" height="2rem"></p-skeleton>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

Angular/src/app/demo/view/miscdemo.component.ts

@@ -0,0 +1,40 @@
+import {Component, OnInit} from '@angular/core';
+import {AppBreadcrumbService} from '../../app.breadcrumb.service';
+
+@Component({
+    templateUrl: './miscdemo.component.html',
+    styles: [`
+		:host ::ng-deep .misc-demo .p-button.p-widget {
+		    min-width: 6rem;
+	    }
+
+		:host ::ng-deep .misc-demo .badges .p-badge {
+		    margin-right: .5rem;
+		}
+
+		:host ::ng-deep .misc-demo .badges .p-tag {
+			margin-right: .5rem;
+		}
+    `]
+})
+export class MiscDemoComponent implements OnInit {
+
+    value = 0;
+
+    constructor(private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'UI Kit' },
+            { label: 'Misc', routerLink: ['/uikit/misc'] }
+        ]);
+    }
+
+    ngOnInit() {
+        const interval = setInterval(() => {
+            this.value = this.value + Math.floor(Math.random() * 10) + 1;
+            if (this.value >= 100) {
+                this.value = 100;
+                clearInterval(interval);
+            }
+        }, 2000);
+    }
+}

Angular/src/app/demo/view/overlaysdemo.component.html

@@ -0,0 +1,119 @@
+<div class="grid">
+    <div class="col-12 lg:col-6">
+        <div class="card">
+            <h5>Dialog</h5>
+            <p-dialog header="Dialog" [(visible)]="display" modal="modal" showEffect="fade" [style]="{width: '400px'}">
+                <div style="line-height: 1.5">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
+                    in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </div>
+                <p-footer>
+                    <button pButton pRipple type="button" icon="pi pi-check" (click)="display=false" label="Yes" class="p-button-text"></button>
+                    <button pButton pRipple type="button" icon="pi pi-times" (click)="display=false" label="No" class="p-button-text"></button>
+                </p-footer>
+            </p-dialog>
+
+            <button pButton pRipple type="button" (click)="display=true" icon="pi pi-external-link" label="Show" style="width: auto"></button>
+        </div>
+
+        <div class="card p-fluid">
+            <h5>Overlay Panel</h5>
+            <div class="grid">
+                <div class="col-6">
+                    <button pButton pRipple type="button" label="Image" (click)="op1.toggle($event)" class="p-button-success"></button>
+                    <p-overlayPanel #op1>
+                        <img src="assets/demo/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
+                    </p-overlayPanel>
+                </div>
+                <div class="col-6">
+                    <button pButton pRipple type="button" label="DataTable" (click)="op2.toggle($event)" class="p-button-success"></button>
+                    <p-overlayPanel #op2 [showCloseIcon]="true" [style]="{width: '450px'}">
+                        <ng-template pTemplate>
+                            <p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" [paginator]="true" [rows]="5" (onRowSelect)="op2.hide()">
+                                <ng-template pTemplate="header">
+                                    <tr>
+                                        <th pSortableColumn="name">Name<p-sortIcon field="name"></p-sortIcon></th>
+                                        <th>Image</th>
+                                        <th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
+                                    </tr>
+                                </ng-template>
+                                <ng-template pTemplate="body" let-rowData let-product>
+                                    <tr [pSelectableRow]="rowData">
+                                        <td>{{product.name}}</td>
+                                        <td><img src="assets/demo/images/product/{{product.image}}" [alt]="product.image" class="product-image" /></td>
+                                        <td>{{product.price}}</td>
+                                    </tr>
+                                </ng-template>
+                            </p-table>
+                        </ng-template>
+                    </p-overlayPanel>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12 lg:col-6">
+
+        <div class="card">
+            <h5>Confirmation</h5>
+            <p-confirmDialog header="Confirmation" key="confirm1" icon="pi pi-exclamation-triangle" message="Are you sure you want to proceed?"
+                             [style]="{width: '425px'}" acceptButtonStyleClass="p-button-text" rejectButtonStyleClass="p-button-text"></p-confirmDialog>
+
+            <button pButton pRipple type="button" (click)="confirm1()" icon="pi pi-trash" label="Delete" class="p-button-danger" style="width: auto"></button>
+        </div>
+
+        <div class="card">
+            <h5>Sidebar</h5>
+            <p-sidebar [(visible)]="visibleSidebar1" [baseZIndex]="10000">
+                <h3 style="font-weight:normal">Left Sidebar</h3>
+            </p-sidebar>
+
+            <p-sidebar [(visible)]="visibleSidebar2" position="right" [baseZIndex]="10000">
+                <h3 style="font-weight:normal">Right Sidebar</h3>
+            </p-sidebar>
+
+            <p-sidebar [(visible)]="visibleSidebar3" position="top" [baseZIndex]="10000">
+                <h3 style="font-weight:normal">Top Sidebar</h3>
+            </p-sidebar>
+
+            <p-sidebar [(visible)]="visibleSidebar4" position="bottom" [baseZIndex]="10000">
+                <h3 style="font-weight:normal">Bottom Sidebar</h3>
+            </p-sidebar>
+
+            <p-sidebar [(visible)]="visibleSidebar5" [fullScreen]="true" [baseZIndex]="10000">
+                <h3 style="font-weight:normal">Full Screen Sidebar</h3>
+            </p-sidebar>
+
+            <button pButton pRipple type="button" (click)="visibleSidebar1 = true" icon="pi pi-arrow-right" class="p-button-warning"></button>
+            <button pButton pRipple type="button" (click)="visibleSidebar2 = true" icon="pi pi-arrow-left" class="p-button-warning"></button>
+            <button pButton pRipple type="button" (click)="visibleSidebar3 = true" icon="pi pi-arrow-down" class="p-button-warning"></button>
+            <button pButton pRipple type="button" (click)="visibleSidebar4 = true" icon="pi pi-arrow-up" class="p-button-warning"></button>
+            <button pButton pRipple type="button" (click)="visibleSidebar5 = true" icon="pi pi-th-large" class="p-button-warning"></button>
+        </div>
+    </div>
+
+    <div class="col-12 lg:col-6">
+        <div class="card">
+            <h5>Tooltip</h5>
+            <div class="formgroup-inline">
+                <div class="field">
+                    <label for="firstname5" class="p-sr-only">Username</label>
+                    <input id="firstname5" type="text" pInputText placeholder="Username" pTooltip="Enter your username">
+                </div>
+                <button pButton pRipple type="button" label="Submit" pTooltip="Click to proceed"></button>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12 lg:col-6">
+        <div class="card">
+            <h5>ConfirmPopup</h5>
+
+            <p-toast></p-toast>
+            <button (click)="confirm2($event)" pButton icon="pi pi-check" label="Confirm"></button>
+            <p-confirmPopup key="confirm2"></p-confirmPopup>
+        </div>
+    </div>
+</div>

Angular/src/app/demo/view/overlaysdemo.component.ts

@@ -0,0 +1,83 @@
+import {Component, OnInit} from '@angular/core';
+import {ConfirmationService, MessageService} from 'primeng/api';
+import {Product} from '../domain/product';
+import {ProductService} from '../service/productservice';
+import {AppBreadcrumbService} from '../../app.breadcrumb.service';
+
+@Component({
+    templateUrl: './overlaysdemo.component.html',
+    styleUrls: ['./overlaysdemo.scss'],
+    providers: [ConfirmationService, MessageService]
+})
+export class OverlaysDemoComponent implements OnInit {
+
+    images: any[];
+
+    display: boolean;
+
+    products: Product[];
+
+    selectedProduct: Product;
+
+    visibleSidebar1;
+
+    visibleSidebar2;
+
+    visibleSidebar3;
+
+    visibleSidebar4;
+
+    visibleSidebar5;
+
+    constructor(private productService: ProductService, private confirmationService: ConfirmationService,
+                private messageService: MessageService, private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'UI Kit' },
+            { label: 'Overlay', routerLink: ['/uikit/overlay'] }
+        ]);
+    }
+
+    ngOnInit() {
+        this.productService.getProductsSmall().then(products => this.products = products);
+
+        this.images = [];
+        this.images.push({
+            source: 'assets/demo/images/sopranos/sopranos1.jpg',
+            thumbnail: 'assets/demo/images/sopranos/sopranos1_small.jpg', title: 'Sopranos 1'
+        });
+        this.images.push({
+            source: 'assets/demo/images/sopranos/sopranos2.jpg',
+            thumbnail: 'assets/demo/images/sopranos/sopranos2_small.jpg', title: 'Sopranos 2'
+        });
+        this.images.push({
+            source: 'assets/demo/images/sopranos/sopranos3.jpg',
+            thumbnail: 'assets/demo/images/sopranos/sopranos3_small.jpg', title: 'Sopranos 3'
+        });
+        this.images.push({
+            source: 'assets/demo/images/sopranos/sopranos4.jpg',
+            thumbnail: 'assets/demo/images/sopranos/sopranos4_small.jpg', title: 'Sopranos 4'
+        });
+    }
+
+    confirm1() {
+        this.confirmationService.confirm({
+            key: 'confirm1',
+            message: 'Are you sure to perform this action?'
+        });
+    }
+
+    confirm2(event: Event) {
+        this.confirmationService.confirm({
+            key: 'confirm2',
+            target: event.target,
+            message: 'Are you sure that you want to proceed?',
+            icon: 'pi pi-exclamation-triangle',
+            accept: () => {
+                this.messageService.add({severity: 'info', summary: 'Confirmed', detail: 'You have accepted'});
+            },
+            reject: () => {
+                this.messageService.add({severity: 'error', summary: 'Rejected', detail: 'You have rejected'});
+            }
+        });
+    }
+}

Angular/src/app/demo/view/overlaysdemo.scss

@@ -0,0 +1,8 @@
+.product-image {
+	width: 50px;
+	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
+}
+
+:host ::ng-deep button {
+	margin-right: .25em;
+}

Angular/src/app/demo/view/panelsdemo.component.html

@@ -0,0 +1,261 @@
+<div class="grid">
+    <div class="col-12">
+        <div class="card toolbar-demo">
+            <h5>Toolbar</h5>
+            <p-toolbar>
+                <div class="p-toolbar-group-left">
+                    <button pButton type="button" label="New" icon="pi pi-plus"></button>
+                    <button pButton type="button" label="Update" class="p-button-secondary"
+                            icon="pi pi-refresh"></button>
+
+                    <i class="pi pi-bars p-toolbar-separator"></i>
+
+                    <button pButton type="button" class="p-button-success" icon="pi pi-check"></button>
+                    <button pButton type="button" class="p-button-help" icon="pi pi-print"></button>
+                    <button pButton type="button" class="p-button-danger" icon="pi pi-trash"></button>
+                </div>
+
+                <div class="p-toolbar-group-right">
+                    <p-splitButton label="Save" icon="pi pi-check" [model]="items"></p-splitButton>
+                </div>
+            </p-toolbar>
+        </div>
+    </div>
+
+    <div class="col-12 md:col-6">
+        <div class="card">
+            <h5>AccordionPanel</h5>
+            <p-accordion>
+                <p-accordionTab header="Header I" [selected]="true">
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                        labore et dolore magna aliqua.
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat.
+                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+                        pariatur.
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+                        id est laborum.
+                    </p>
+                </p-accordionTab>
+                <p-accordionTab header="Header II">
+                    <p>
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
+                        laudantium, totam rem aperiam, eaque
+                        ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+                        Nemo enim ipsam voluptatem quia
+                        voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+                        voluptatem sequi nesciunt.
+                        Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </p-accordionTab>
+                <p-accordionTab header="Header III">
+                    <p>
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
+                        deleniti atque corrupti quos dolores
+                        et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                        officia deserunt mollitia animi, id est laborum et dolorum fuga.
+                        Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis
+                        est eligendi optio cumque nihil impedit
+                        quo minus.
+                    </p>
+                </p-accordionTab>
+            </p-accordion>
+        </div>
+
+        <div class="card">
+            <h5>TabView</h5>
+            <p-tabView orientation="left">
+                <p-tabPanel header="Header I" leftIcon="pi pi-check">
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                        labore et dolore magna aliqua.
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat.
+                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+                        pariatur.
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+                        id est laborum.
+                    </p>
+                </p-tabPanel>
+                <p-tabPanel header="Header II" leftIcon="pi pi-user">
+                    <p>
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
+                        laudantium, totam rem aperiam, eaque
+                        ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+                        Nemo enim ipsam voluptatem quia
+                        voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+                        voluptatem sequi nesciunt.
+                        Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </p-tabPanel>
+                <p-tabPanel header="Header III" leftIcon="pi pi-mobile">
+                    <p>
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
+                        deleniti atque corrupti quos dolores
+                        et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                        officia deserunt mollitia animi, id est laborum et dolorum fuga.
+                        Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis
+                        est eligendi optio cumque nihil impedit
+                        quo minus.
+                    </p>
+                </p-tabPanel>
+            </p-tabView>
+        </div>
+    </div>
+
+    <div class="col-12 md:col-6">
+        <div class="card">
+            <h5>Panel</h5>
+            <p-panel header="Header" [toggleable]="true">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                    et dolore magna aliqua.
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat.
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+                    pariatur.
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+                    est laborum.
+                </p>
+            </p-panel>
+        </div>
+
+        <div class="card">
+            <h5>Fieldset</h5>
+            <p-fieldset legend="Toggleable" toggleable="true">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                    et dolore magna aliqua.
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat.
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+                    pariatur.
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+                    est laborum.
+                </p>
+            </p-fieldset>
+        </div>
+
+        <div class="card">
+            <div class="card-header">
+                <h5>Card</h5>
+                <p-menu #menu [popup]="true" [model]="cardMenu"></p-menu>
+                <button pButton type="button" icon="pi pi-plus" class="p-button-rounded p-button-plain p-button-text"
+                        (click)="menu.toggle($event)"></button>
+            </div>
+
+            <p class="card-subtitle">Subtitle</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+                dolore magna aliqua.
+                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                laborum.</p>
+        </div>
+    </div>
+
+    <div class="col-12">
+        <div class="card">
+            <h5>Divider</h5>
+            <div class="grid">
+                <div class="col-5 flex align-items-center justify-content-center">
+                    <div class="p-fluid">
+                        <div class="field">
+                            <span class="p-float-label">
+                                <input pInputText id="username" type="text"/>
+                                <label for="username">Username</label>
+                            </span>
+                        </div>
+                        <div class="field">
+                            <span class="p-float-label">
+                                <input pInputText id="password" type="password"/>
+                                <label for="password">Password</label>
+                            </span>
+                        </div>
+                        <p-button label="Login" styleClass="m-0"></p-button>
+                    </div>
+                </div>
+                <div class="col-1">
+                    <p-divider layout="vertical">
+                        <b>OR</b>
+                    </p-divider>
+                </div>
+                <div class="col-5 align-items-center justify-content-center">
+                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
+                        totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+                        architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+                        aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+                        voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
+
+                    <p-divider layout="horizontal" align="center">
+                        <span class="p-tag">Badge</span>
+                    </p-divider>
+
+                    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
+                        deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+                        cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est
+                        laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
+
+                    <p-divider align="right">
+                        <p-button label="Button" icon="pi pi-search" styleClass="p-button-outlined"></p-button>
+                    </p-divider>
+
+                    <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
+                        voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur
+                        a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
+                        doloribus asperiores repellat.
+                        Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien.
+                        Morbi dapibus luctus odio.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12">
+        <div class="card">
+            <h5>Splitter</h5>
+            <p-splitter [style]="{'height': '300px'}" [panelSizes]="[20,80]" [minSizes]="[10,0]" styleClass="mb-5">
+                <ng-template pTemplate="panel">
+                    <div class="col flex align-items-center justify-content-center p-2" style="overflow: auto">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
+                        in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+                        id est laborum.
+                    </div>
+                </ng-template>
+                <ng-template pTemplate="panel">
+                    <p-splitter layout="vertical" [panelSizes]="[30,70]" [minSizes]="[10,10]" panelStyleClass="splitter-overflow">
+                        <ng-template pTemplate="panel">
+                            <div class="flex align-items-center justify-content-center p-2">
+                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+                                doloremque
+                                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+                                architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
+                                voluptas
+                                sit
+                                aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+                                voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius
+                                modi.
+                            </div>
+                        </ng-template>
+                        <ng-template pTemplate="panel">
+                            <div class="flex align-items-center justify-content-center p-2">
+                                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
+                                praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
+                                excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
+                                rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
+                                eligendi optio cumque nihil impedit quo minus.
+                            </div>
+                        </ng-template>
+                    </p-splitter>
+                </ng-template>
+            </p-splitter>
+        </div>
+    </div>
+</div>

Angular/src/app/demo/view/panelsdemo.component.ts

@@ -0,0 +1,60 @@
+import {Component, OnInit} from '@angular/core';
+import {MenuItem} from 'primeng/api';
+import {AppBreadcrumbService} from '../../app.breadcrumb.service';
+
+@Component({
+    templateUrl: './panelsdemo.component.html',
+    styles: [`
+        :host ::ng-deep button {
+            margin-right: .25em;
+            margin-left: .25em;
+        }
+
+        :host ::ng-deep .p-splitbutton button {
+            margin-right: 0;
+            margin-left: 0;
+        }
+
+        :host ::ng-deep .p-splitter-panel-nested {
+            overflow: auto;
+        }
+
+        @media screen and (max-width: 960px) {
+            .card.toolbar-demo {
+                overflow: auto;
+            }
+        }
+    `]
+})
+export class PanelsDemoComponent implements OnInit {
+
+    items: MenuItem[];
+
+    cardMenu: MenuItem[];
+
+    constructor(private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'UI Kit' },
+            { label: 'Panel', routerLink: ['/uikit/panel'] }
+        ]);
+    }
+
+    ngOnInit() {
+        this.items = [
+            {label: 'Angular.io', icon: 'pi pi-external-link', url: 'http://angular.io'},
+            {label: 'Theming', icon: 'pi pi-bookmark', routerLink: ['/theming']}
+        ];
+
+        this.cardMenu = [
+            {
+                label: 'Save', icon: 'pi pi-fw pi-check'
+            },
+            {
+                label: 'Update', icon: 'pi pi-fw pi-refresh'
+            },
+            {
+                label: 'Delete', icon: 'pi pi-fw pi-trash'
+            },
+        ];
+    }
+}

Angular/src/app/demo/view/tabledemo.component.html

@@ -0,0 +1,352 @@
+<div class="grid table-demo">
+	<div class="col-12">
+		<div class="card">
+			<h5>Default</h5>
+			<p>Pagination, sorting, filtering and checkbox selection.</p>
+            <p-table #dt [value]="customers1" [(selection)]="selectedCustomers1" dataKey="id"
+                     styleClass="p-datatable-customers" [rowHover]="true" [rows]="10" [paginator]="true"
+                     [filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']">
+                <ng-template pTemplate="caption">
+                    <div class="flex flex-column md:flex-row md:justify-content-between table-header">
+                        Customers
+                        <span class="p-input-icon-left">
+                    <i class="pi pi-search"></i>
+                    <input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')"
+                           placeholder="Global Search"/>
+                </span>
+                    </div>
+                </ng-template>
+                <ng-template pTemplate="header">
+                    <tr>
+                        <th style="width: 3rem">
+                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+                        </th>
+                        <th pSortableColumn="name">
+                            <div class="flex justify-content-between align-items-center">
+                                Name
+                                <p-sortIcon field="name"></p-sortIcon>
+                                <p-columnFilter type="text" field="name" display="menu" class="ml-auto"></p-columnFilter>
+                            </div>
+                        </th>
+                        <th pSortableColumn="country.name">
+                            <div class="flex justify-content-between align-items-center">
+                                Country
+                                <p-sortIcon field="country.name"></p-sortIcon>
+                                <p-columnFilter type="text" field="country.name" display="menu" class="ml-auto"></p-columnFilter>
+                            </div>
+                        </th>
+                        <th pSortableColumn="representative.name">
+                            <div class="flex justify-content-between align-items-center">
+                                Agent
+                                <p-sortIcon field="representative.name"></p-sortIcon>
+                                <p-columnFilter field="representative" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
+                                    <ng-template pTemplate="header">
+                                        <div class="px-3 pt-3 pb-0">
+                                            <span class="font-bold">Agent Picker</span>
+                                        </div>
+                                    </ng-template>
+                                    <ng-template pTemplate="filter" let-value let-filter="filterCallback">
+                                        <p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
+                                            <ng-template let-option pTemplate="item">
+                                                <div class="p-multiselect-representative-option">
+                                                    <img [alt]="option.label" src="assets/demo/images/avatar/{{option.image}}" width="32" style="vertical-align: middle" />
+                                                    <span class="ml-1">{{option.name}}</span>
+                                                </div>
+                                            </ng-template>
+                                        </p-multiSelect>
+                                    </ng-template>
+                                </p-columnFilter>
+                            </div>
+                        </th>
+                        <th pSortableColumn="date">
+                            <div class="flex justify-content-between align-items-center">
+                                Date
+                                <p-sortIcon field="date"></p-sortIcon>
+                                <p-columnFilter type="date" field="date" display="menu" class="ml-auto"></p-columnFilter>
+                            </div>
+                        </th>
+                        <th pSortableColumn="balance">
+                            <div class="flex justify-content-between align-items-center">
+                                Balance
+                                <p-sortIcon field="balance"></p-sortIcon>
+                                <p-columnFilter type="numeric" field="balance" display="menu" currency="USD" class="ml-auto"></p-columnFilter>
+                            </div>
+                        </th>
+                        <th pSortableColumn="status">
+                            <div class="flex justify-content-between align-items-center">
+                                Status
+                                <p-sortIcon field="status"></p-sortIcon>
+                                <p-columnFilter field="status" matchMode="equals" display="menu">
+                                    <ng-template pTemplate="filter" let-value let-filter="filterCallback">
+                                        <p-dropdown [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any">
+                                            <ng-template let-option pTemplate="item">
+                                                <span [class]="'customer-badge status-' + option.value">{{option.label}}</span>
+                                            </ng-template>
+                                        </p-dropdown>
+                                    </ng-template>
+                                </p-columnFilter>
+                            </div>
+                        </th>
+                        <th pSortableColumn="activity">
+                            <div class="flex justify-content-between align-items-center">
+                                Activity
+                                <p-sortIcon field="activity"></p-sortIcon>
+                                <p-columnFilter field="activity" matchMode="between" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
+                                    <ng-template pTemplate="filter" let-filter="filterCallback">
+                                        <p-slider [ngModel]="activityValues" [range]="true" (onSlideEnd)="filter($event.values)" styleClass="m-3"></p-slider>
+                                        <div class="flex align-items-center justify-content-between px-2">
+                                            <span>{{activityValues[0]}}</span>
+                                            <span>{{activityValues[1]}}</span>
+                                        </div>
+                                    </ng-template>
+                                </p-columnFilter>
+                            </div>
+                        </th>
+                        <th style="width: 8rem"></th>
+                    </tr>
+                </ng-template>
+                <ng-template pTemplate="body" let-customer>
+                    <tr class="p-selectable-row">
+                        <td>
+                            <p-tableCheckbox [value]="customer"></p-tableCheckbox>
+                        </td>
+                        <td>
+                            <span class="p-column-title">Name</span>
+                            {{customer.name}}
+                        </td>
+                        <td>
+                            <span class="p-column-title">Country</span>
+                            <img src="assets/demo/flags/flag_placeholder.png"
+                                 [class]="'flag flag-' + customer.country.code" width="30">
+                            <span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.country.name}}</span>
+                        </td>
+                        <td>
+                            <span class="p-column-title">Representative</span>
+                            <img [alt]="customer.representative.name"
+                                 src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
+                                 style="vertical-align: middle"/>
+                            <span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.representative.name}}</span>
+                        </td>
+                        <td>
+                            <span class="p-column-title">Date</span>
+                            {{customer.date | date: 'MM/dd/yyyy'}}
+                        </td>
+                        <td>
+                            <span class="p-column-title">Balance</span>
+                            {{customer.balance | currency:'USD':'symbol'}}
+                        </td>
+                        <td>
+                            <span class="p-column-title">Status</span>
+                            <span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
+                        </td>
+                        <td>
+                            <span class="p-column-title">Activity</span>
+                            <p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
+                        </td>
+                        <td style="text-align: center">
+                            <button pButton type="button" class="p-button-secondary" icon="pi pi-cog"></button>
+                        </td>
+                    </tr>
+                </ng-template>
+                <ng-template pTemplate="emptymessage">
+                    <tr>
+                        <td colspan="8">No customers found.</td>
+                    </tr>
+                </ng-template>
+            </p-table>
+		</div>
+	</div>
+
+	<div class="col-12">
+		<div class="card">
+			<h5>Customized</h5>
+			<p>Scrollable table with gridlines (<mark>.p-datatable-gridlines</mark>), striped rows (<mark>.p-datatable-striped</mark>) and smaller paddings (<mark>p-datatable-sm</mark>).</p>
+
+			<p-table #dtc [value]="customers2" [(selection)]="selectedCustomer" dataKey="id" selectionMode="single"
+					 styleClass="p-datatable-customers p-datatable-gridlines p-datatable-striped p-datatable-sm"
+					 [scrollable]="true" scrollHeight="600px" [filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']">
+				<ng-template pTemplate="caption">
+					<div class="flex flex-column md:flex-row md:justify-content-between table-header">
+						Customers
+						<span class="p-input-icon-left p-float-label">
+                            <i class="pi pi-search"></i>
+                            <input pInputText type="text" (input)="dtc.filterGlobal($event.target.value, 'contains')" />
+                            <label class="global-filter-label">Global Search</label>
+                        </span>
+					</div>
+				</ng-template>
+				<ng-template pTemplate="header">
+					<tr>
+						<th pSortableColumn="name">Name
+							<p-sortIcon field="name"></p-sortIcon>
+						</th>
+						<th pSortableColumn="country.name">Country
+							<p-sortIcon field="country.name"></p-sortIcon>
+						</th>
+						<th pSortableColumn="representative.name">Representative
+							<p-sortIcon field="representative.name"></p-sortIcon>
+						</th>
+						<th pSortableColumn="date">Date
+							<p-sortIcon field="date"></p-sortIcon>
+						</th>
+						<th pSortableColumn="status">Status
+							<p-sortIcon field="status"></p-sortIcon>
+						</th>
+						<th pSortableColumn="activity">Activity
+							<p-sortIcon field="activity"></p-sortIcon>
+						</th>
+					</tr>
+				</ng-template>
+				<ng-template pTemplate="body" let-customer>
+					<tr [pSelectableRow]="customer">
+						<td>
+							<span class="p-column-title">Name</span>
+							{{customer.name}}
+						</td>
+						<td>
+							<span class="p-column-title">Country</span>
+							<img src="assets/demo/flags/flag_placeholder.png"
+								 [class]="'flag flag-' + customer.country.code" width="30">
+							<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.country.name}}</span>
+						</td>
+						<td>
+							<span class="p-column-title">Representative</span>
+							<img [alt]="customer.representative.name"
+								 src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
+								 style="vertical-align: middle"/>
+							<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.representative.name}}</span>
+						</td>
+						<td>
+							<span class="p-column-title">Date</span>
+							{{customer.date}}
+						</td>
+						<td>
+							<span class="p-column-title">Status</span>
+							<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
+						</td>
+						<td>
+							<span class="p-column-title">Activity</span>
+                            <p-progressBar [value]="customer.activity" class="w-full" [showValue]="false"></p-progressBar>
+						</td>
+					</tr>
+				</ng-template>
+				<ng-template pTemplate="emptymessage">
+					<tr>
+						<td colspan="8">No customers found.</td>
+					</tr>
+				</ng-template>
+			</p-table>
+		</div>
+	</div>
+
+	<div class="col-12">
+		<div class="card">
+			<h5>Row Expand</h5>
+			<p-table [value]="products" dataKey="name" styleClass="p-datatable-customers rowexpand-table">
+				<ng-template pTemplate="header">
+					<tr>
+						<th style="width: 3rem"></th>
+						<th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
+						<th>Image</th>
+						<th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
+						<th pSortableColumn="category">Category <p-sortIcon field="category"></p-sortIcon></th>
+						<th pSortableColumn="rating">Reviews <p-sortIcon field="rating"></p-sortIcon></th>
+						<th pSortableColumn="inventoryStatus">Status <p-sortIcon field="inventoryStatus"></p-sortIcon></th>
+					</tr>
+				</ng-template>
+				<ng-template pTemplate="body" let-product let-expanded="expanded">
+                    <tr>
+                        <td>
+                            <button pButton pRipple type="button" [pRowToggler]="product" class="p-button-text p-button-rounded p-button-plain" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
+                        </td>
+                        <td><span class="p-column-title">Name</span>{{product.name}}</td>
+                        <td><span class="p-column-title">Image</span><img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" /></td>
+                        <td><span class="p-column-title">Price</span>{{product.price | currency:'USD'}}</td>
+                        <td><span class="p-column-title">Category</span>{{product.category}}</td>
+                        <td><span class="p-column-title">Reviews</span><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
+                        <td><span class="p-column-title">Status</span><span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span></td>
+                    </tr>
+				</ng-template>
+				<ng-template pTemplate="rowexpansion" let-product>
+					<tr>
+						<td colspan="7">
+							<div class="p-3">
+								<p-table [value]="product.orders" dataKey="id">
+									<ng-template pTemplate="header">
+										<tr>
+											<th pSortableColumn="id">Id <p-sortIcon field="price"></p-sortIcon></th>
+											<th pSortableColumn="customer">Customer <p-sortIcon field="customer"></p-sortIcon></th>
+											<th pSortableColumn="date">Date <p-sortIcon field="date"></p-sortIcon></th>
+											<th pSortableColumn="amount">Amount <p-sortIcon field="amount"></p-sortIcon></th>
+											<th pSortableColumn="stats">Status <p-sortIcon field="status"></p-sortIcon></th>
+											<th style="width: 4rem"></th>
+										</tr>
+									</ng-template>
+									<ng-template pTemplate="body" let-order>
+                                        <tr>
+                                            <td><span class="p-column-title">Id</span>{{order.id}}</td>
+                                            <td><span class="p-column-title">Customer</span>{{order.customer}}</td>
+                                            <td><span class="p-column-title">Date</span>{{order.date}}</td>
+                                            <td><span class="p-column-title">Amount</span>{{order.amount | currency:'USD'}}</td>
+                                            <td><span class="p-column-title">Status</span><span [class]="'order-badge order-' + order.status.toLowerCase()">{{order.status}}</span></td>
+                                            <td><p-button type="button" icon="pi pi-search"></p-button></td>
+                                        </tr>
+									</ng-template>
+									<ng-template pTemplate="emptymessage">
+										<tr>
+											<td colspan="6">There are no order for this product yet.</td>
+										</tr>
+									</ng-template>
+								</p-table>
+							</div>
+						</td>
+					</tr>
+				</ng-template>
+			</p-table>
+		</div>
+	</div>
+
+	<div class="col-12">
+		<div class="card">
+			<h5>Row Group and Scrolling</h5>
+			<p-table [value]="customers3" sortField="representative.name" sortMode="single" (onSort)="onSort()" [scrollable]="true" scrollHeight="600px"
+                     styleClass="p-datatable-customers">
+				<ng-template pTemplate="header">
+					<tr>
+						<th>Name</th>
+						<th>Country</th>
+						<th>Company</th>
+						<th>Status</th>
+						<th>Date</th>
+					</tr>
+				</ng-template>
+				<ng-template pTemplate="body" let-customer let-rowIndex="rowIndex">
+					<tr *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex">
+						<td colspan="5">
+							<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
+							<span class="font-bold ml-2">{{customer.representative.name}}</span>
+						</td>
+					</tr>
+                    <tr>
+                        <td><span class="p-column-title">Name</span>
+                            {{customer.name}}
+                        </td>
+                        <td><span class="p-column-title">Country</span>
+                            <img src="assets/demo/flags/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
+                            <span class="image-text" style="margin-left: .5em">{{customer.country.name}}</span>
+                        </td>
+                        <td><span class="p-column-title">Company</span>
+                            {{customer.company}}
+                        </td>
+                        <td><span class="p-column-title">Status</span>
+                            <span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
+                        </td>
+                        <td><span class="p-column-title">Date</span>
+                            {{customer.date}}
+                        </td>
+                    </tr>
+				</ng-template>
+			</p-table>
+		</div>
+	</div>
+</div>

Angular/src/app/demo/view/tabledemo.component.ts

@@ -0,0 +1,114 @@
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {Customer, Representative} from '../domain/customer';
+import {CustomerService} from '../service/customerservice';
+import {Product} from '../domain/product';
+import {ProductService} from '../service/productservice';
+import {Table} from 'primeng/table';
+import {AppBreadcrumbService} from '../../app.breadcrumb.service';
+
+@Component({
+    templateUrl: './tabledemo.component.html',
+    styleUrls: ['./tabledemo.scss'],
+    styles: [`
+        @media screen and (max-width: 960px) {
+            :host ::ng-deep .p-datatable.p-datatable-customers.rowexpand-table .p-datatable-tbody > tr > td:nth-child(6) {
+                display: flex;
+            }
+        }
+
+    `],
+})
+export class TableDemoComponent implements OnInit {
+
+    customers1: Customer[];
+
+    customers2: Customer[];
+
+    customers3: Customer[];
+
+    selectedCustomers1: Customer[];
+
+    selectedCustomer: Customer;
+
+    representatives: Representative[];
+
+    statuses: any[];
+
+    products: Product[];
+
+    rowGroupMetadata: any;
+
+    @ViewChild('dt') table: Table;
+
+    activityValues: number[] = [0, 100];
+
+    constructor(private customerService: CustomerService, private productService: ProductService,
+                private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'UI Kit' },
+            { label: 'Table', routerLink: ['/uikit/table'] }
+        ]);
+    }
+
+    ngOnInit() {
+        this.customerService.getCustomersLarge().then(customers => {
+            this.customers1 = customers;
+            // @ts-ignore
+            this.customers1.forEach(customer => customer.date = new Date(customer.date));
+        });
+        this.customerService.getCustomersMedium().then(customers => this.customers2 = customers);
+        this.customerService.getCustomersMedium().then(customers => this.customers3 = customers);
+        this.productService.getProductsWithOrdersSmall().then(data => this.products = data);
+
+        this.representatives = [
+            {name: 'Amy Elsner', image: 'amyelsner.png'},
+            {name: 'Anna Fali', image: 'annafali.png'},
+            {name: 'Asiya Javayant', image: 'asiyajavayant.png'},
+            {name: 'Bernardo Dominic', image: 'bernardodominic.png'},
+            {name: 'Elwin Sharvill', image: 'elwinsharvill.png'},
+            {name: 'Ioni Bowcher', image: 'ionibowcher.png'},
+            {name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png'},
+            {name: 'Onyama Limba', image: 'onyamalimba.png'},
+            {name: 'Stephen Shaw', image: 'stephenshaw.png'},
+            {name: 'XuXue Feng', image: 'xuxuefeng.png'}
+        ];
+
+        this.statuses = [
+            {label: 'Unqualified', value: 'unqualified'},
+            {label: 'Qualified', value: 'qualified'},
+            {label: 'New', value: 'new'},
+            {label: 'Negotiation', value: 'negotiation'},
+            {label: 'Renewal', value: 'renewal'},
+            {label: 'Proposal', value: 'proposal'}
+        ];
+    }
+
+    onSort() {
+        this.updateRowGroupMetaData();
+    }
+
+    updateRowGroupMetaData() {
+        this.rowGroupMetadata = {};
+
+        if (this.customers3) {
+            for (let i = 0; i < this.customers3.length; i++) {
+                const rowData = this.customers3[i];
+                const representativeName = rowData.representative.name;
+
+                if (i === 0) {
+                    this.rowGroupMetadata[representativeName] = { index: 0, size: 1 };
+                }
+                else {
+                    const previousRowData = this.customers3[i - 1];
+                    const previousRowGroup = previousRowData.representative.name;
+                    if (representativeName === previousRowGroup) {
+                        this.rowGroupMetadata[representativeName].size++;
+                    }
+                    else {
+                        this.rowGroupMetadata[representativeName] = { index: i, size: 1 };
+                    }
+                }
+            }
+        }
+    }
+}

Angular/src/app/demo/view/tabledemo.scss

@@ -0,0 +1,201 @@
+:host ::ng-deep {
+    .p-paginator {
+        .p-paginator-current {
+            margin-left: auto;
+        }
+    }
+
+    .p-progressbar {
+        height: .5rem;
+        background-color: #D8DADC;
+
+        .p-progressbar-value {
+            background-color: #607D8B;
+        }
+    }
+
+    .table-header {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .p-calendar .p-datepicker {
+        min-width: 25rem;
+
+        td {
+            font-weight: 400;
+        }
+    }
+
+    .p-datatable.p-datatable-customers {
+        .p-datatable-header {
+            padding: 1rem;
+            text-align: left;
+            font-size: 1.5rem;
+        }
+
+        .p-paginator {
+            padding: 1rem;
+        }
+
+        .p-datatable-thead > tr > th {
+            text-align: left;
+        }
+
+        .p-dropdown-label:not(.p-placeholder) {
+            text-transform: uppercase;
+        }
+    }
+
+    .p-datatable.p-datatable-customers:not(.p-datatable-gridlines) {
+        .p-datatable-tbody > tr > td {
+            cursor: auto;
+        }
+    }
+
+    /* Responsive */
+    .p-datatable-customers .p-datatable-tbody > tr > td .p-column-title {
+        display: none;
+    }
+}
+
+.customer-badge {
+    border-radius: 2px;
+    padding: .25em .5rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: .3px;
+
+    &.status-qualified {
+        background: #C8E6C9;
+        color: #256029;
+    }
+
+    &.status-unqualified {
+        background: #FFCDD2;
+        color: #C63737;
+    }
+
+    &.status-negotiation {
+        background: #FEEDAF;
+        color: #8A5340;
+    }
+
+    &.status-new {
+        background: #B3E5FC;
+        color: #23547B;
+    }
+
+    &.status-renewal {
+        background: #ECCFFF;
+        color: #694382;
+    }
+
+    &.status-proposal {
+        background: #FFD8B2;
+        color: #805B36;
+    }
+}
+
+.product-badge {
+    border-radius: 2px;
+    padding: .25em .5rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: .3px;
+
+    &.status-instock {
+        background: #C8E6C9;
+        color: #256029;
+    }
+
+    &.status-outofstock {
+        background: #FFCDD2;
+        color: #C63737;
+    }
+
+    &.status-lowstock {
+        background: #FEEDAF;
+        color: #8A5340;
+    }
+}
+
+.order-badge {
+    border-radius: 2px;
+    padding: .25em .5rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: .3px;
+
+    &.order-delivered {
+        background: #C8E6C9;
+        color: #256029;
+    }
+
+    &.order-cancelled {
+        background: #FFCDD2;
+        color: #C63737;
+    }
+
+    &.order-pending {
+        background: #FEEDAF;
+        color: #8A5340;
+    }
+
+    &.order-returned {
+        background: #ECCFFF;
+        color: #694382;
+    }
+}
+
+.global-filter-label {
+    font-size: 1rem;
+    font-weight: normal;
+
+    .p-float-label input:focus ~ label {
+        font-size: 12px;
+    }
+}
+
+@media screen and (max-width: 960px) {
+    :host ::ng-deep {
+        .p-datatable {
+            &.p-datatable-customers {
+                .p-datatable-thead > tr > th,
+                .p-datatable-tfoot > tr > td {
+                    display: none !important;
+                }
+
+                .p-datatable-tbody > tr {
+                    border-bottom: 1px solid var(--surface-d);
+
+                    > td {
+                        text-align: left;
+                        display: block;
+                        border: 0 none !important;
+                        width: 100% !important;
+                        float: left;
+                        clear: left;
+                        border: 0 none;
+
+                        .p-column-title {
+                            padding: .4rem;
+                            min-width: 30%;
+                            display: inline-block;
+                            margin: -.4rem 1rem -.4rem -.4rem;
+                            font-weight: bold;
+                        }
+
+                        .p-progressbar {
+                            margin-top: .5rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+}

Angular/src/app/demo/view/treedemo.component.html

@@ -0,0 +1,37 @@
+<div class="grid">
+	<div class="col-12">
+		<div class="card">
+			<h5>Tree</h5>
+			<p-tree [value]="files1" selectionMode="checkbox" [(selection)]="selectedFiles1"></p-tree>
+		</div>
+	</div>
+	<div class="col-12">
+		<div class="card">
+			<h5>TreeTable</h5>
+			<p-treeTable [value]="files2" [columns]="cols" selectionMode="checkbox" [(selection)]="selectedFiles2">
+				<ng-template pTemplate="header" let-columns>
+					<tr>
+						<th *ngFor="let col of columns">
+							{{col.header}}
+						</th>
+					</tr>
+				</ng-template>
+				<ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
+					<tr>
+						<td *ngFor="let col of columns; let i = index">
+							<p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
+							<p-treeTableCheckbox [value]="rowNode" *ngIf="i == 0"></p-treeTableCheckbox>
+							{{rowData[col.field]}}
+						</td>
+					</tr>
+				</ng-template>
+			</p-treeTable>
+		</div>
+	</div>
+	<div class="col-12">
+		<div class="card">
+			<h5>Horizontal Tree</h5>
+			<p-tree [value]="files3" layout="horizontal" selectionMode="single" [(selection)]="selectedFiles3"></p-tree>
+		</div>
+	</div>
+</div>

Angular/src/app/demo/view/treedemo.component.ts

@@ -0,0 +1,49 @@
+import {Component, OnInit} from '@angular/core';
+import {NodeService} from '../service/nodeservice';
+import {TreeNode} from 'primeng/api';
+import {AppBreadcrumbService} from '../../app.breadcrumb.service';
+
+@Component({
+    templateUrl: './treedemo.component.html'
+})
+export class TreeDemoComponent implements OnInit {
+
+
+    files1: TreeNode[];
+
+    files2: TreeNode[];
+
+    files3: TreeNode[];
+
+    selectedFiles1: TreeNode;
+
+    selectedFiles2: TreeNode[];
+
+    selectedFiles3: TreeNode;
+
+    cols: any[];
+
+    constructor(private nodeService: NodeService, private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'UI Kit' },
+            { label: 'Tree', routerLink: ['/uikit/tree'] }
+        ]);
+    }
+
+    ngOnInit() {
+        this.nodeService.getFiles().then(files => this.files1 = files);
+        this.nodeService.getFilesystem().then(files => this.files2 = files);
+        this.nodeService.getFiles().then(files => {
+            this.files3 = [{
+                label: 'Root',
+                children: files
+            }];
+        });
+
+        this.cols = [
+            { field: 'name', header: 'Name' },
+            { field: 'size', header: 'Size' },
+            { field: 'type', header: 'Type' }
+        ];
+    }
+}

Angular/src/app/pages/app.accessdenied.component.html

@@ -0,0 +1,26 @@
+<div class="pages-body accessdenied-page flex flex-column">
+    <div class="topbar p-3 flex justify-content-between flex-row align-items-center">
+        <div class="topbar-left ml-3 flex" routerLink="/">
+            <div class="logo">
+                <img src="assets/layout/images/logo2x.png" alt=""/>
+            </div>
+        </div>
+        <div class="topbar-right mr-3 flex">
+            <button pButton pRipple type="button" label="DASHBOARD" [routerLink]="['/']"
+                    class="p-button-text p-button-plain topbar-button"></button>
+        </div>
+    </div>
+
+    <div class="align-self-center mt-auto mb-auto">
+        <div class="pages-panel card flex flex-column">
+            <div class="pages-header px-3 py-1">
+                <h2>ACCESS DENIED</h2>
+            </div>
+            <div class="card mt-3 px-6">
+                <img src="assets/layout/images/pages/error.png" alt=""/>
+            </div>
+            <div class="pages-detail pb-6">Requested resource is not available.</div>
+            <button pButton pRipple type="button" label="GO BACK TO DASHBOARD" [routerLink]="['/']" class="p-button-text"></button>
+        </div>
+    </div>
+</div>

Angular/src/app/pages/app.accessdenied.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-accessdenied',
+  templateUrl: './app.accessdenied.component.html',
+})
+export class AppAccessdeniedComponent {
+
+}

Angular/src/app/pages/app.calendar.component.html

@@ -0,0 +1,36 @@
+<div class="grid">
+    <div class="col-12">
+        <div class="card">
+            <h5>Calendar</h5>
+            <full-calendar [options]="options"></full-calendar>
+
+            <p-dialog [(visible)]="eventDialog" [style]="{width: '450px'}" header="Event Details" [modal]="true" [closable]="true">
+                <ng-template pTemplate="content">
+                    <div class="p-fluid">
+                        <div class="field">
+                            <label for="title">Title</label>
+                            <input id="title" type="text" pInputText *ngIf="clickedEvent" [(ngModel)]="changedEvent.title" [required]="true">
+                        </div>
+                        <div class="field">
+                            <label for="start">From</label>
+                            <p-calendar id="start" *ngIf="clickedEvent" [(ngModel)]="changedEvent.start" [showTime]="true" appendTo="body"></p-calendar>
+                        </div>
+                        <div class="field">
+                            <label for="end">To</label>
+                            <p-calendar id="end" *ngIf="clickedEvent" [(ngModel)]="changedEvent.end" [showTime]="true" appendTo="body"></p-calendar>
+                        </div>
+                        <div class="field-checkbox">
+                            <p-checkbox id="allday" *ngIf="clickedEvent" [(ngModel)]="changedEvent.allday"></p-checkbox>
+                            <label for="allday">All Day</label>
+                        </div>
+                    </div>
+                </ng-template>
+
+                <ng-template pTemplate="footer">
+                    <button pButton label="Save" icon="pi pi-check" class="p-button-text" (click)="save()"></button>
+                    <button pButton label="Reset" icon="pi pi-refresh" class="p-button-text" (click)="reset()"></button>
+                </ng-template>
+            </p-dialog>
+        </div>
+    </div>
+</div>

Angular/src/app/pages/app.calendar.component.ts

@@ -0,0 +1,79 @@
+import {Component, OnInit} from '@angular/core';
+import {EventService} from '../demo/service/eventservice';
+
+@Component({
+    templateUrl: './app.calendar.component.html',
+    styles: [`
+        @media screen and (max-width: 960px) {
+            :host ::ng-deep .fc-header-toolbar {
+                display: flex;
+                flex-wrap: wrap;
+            }
+        }
+    `]
+})
+export class AppCalendarComponent implements OnInit {
+
+    events: any[];
+
+    options: any;
+
+    header: any;
+
+    eventDialog: boolean;
+
+    changedEvent: any;
+
+    clickedEvent = null;
+
+    constructor(private eventService: EventService) {
+    }
+
+    ngOnInit() {
+        this.eventService.getEvents().then(events => {
+            this.events = events;
+            this.options = {...this.options, ...{events: events}};
+        });
+
+        this.options = {
+            initialDate: '2021-02-01',
+            headerToolbar: {
+                left: 'prev,next today',
+                center: 'title',
+                right: 'dayGridMonth,timeGridWeek,timeGridDay'
+            },
+            editable: true,
+            selectable: true,
+            selectMirror: true,
+            dayMaxEvents: true,
+            eventClick: (e) => {
+                this.eventDialog = true;
+
+                this.clickedEvent = e.event;
+
+                this.changedEvent.title = this.clickedEvent.title;
+                this.changedEvent.start = this.clickedEvent.start;
+                this.changedEvent.end = this.clickedEvent.end;
+            }
+        };
+
+        this.changedEvent = {title: '', start: null, end: '', allDay: null};
+    }
+
+    save() {
+        this.eventDialog = false;
+
+        this.clickedEvent.setProp('title', this.changedEvent.title);
+        this.clickedEvent.setStart(this.changedEvent.start);
+        this.clickedEvent.setEnd(this.changedEvent.end);
+        this.clickedEvent.setAllDay(this.changedEvent.allDay);
+
+        this.changedEvent = {title: '', start: null, end: '', allDay: null};
+    }
+
+    reset() {
+        this.changedEvent.title = this.clickedEvent.title;
+        this.changedEvent.start = this.clickedEvent.start;
+        this.changedEvent.end = this.clickedEvent.end;
+    }
+}

Angular/src/app/pages/app.contactus.component.html

@@ -0,0 +1,47 @@
+<div class="pages-body contact-page flex flex-column">
+    <div class="topbar p-3 flex justify-content-between flex-row align-items-center">
+        <div class="topbar-left ml-3 flex" routerLink="/">
+            <div class="logo">
+                <img src="assets/layout/images/logo2x.png" alt=""/>
+            </div>
+        </div>
+        <div class="topbar-right mr-3 flex">
+            <button pButton pRipple type="button" label="DASHBOARD" [routerLink]="['/']"
+                    class="p-button-text p-button-plain topbar-button"></button>
+        </div>
+    </div>
+
+    <div class="map">
+        <iframe
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9746.74079475134!2d4.8686484347131325!3d52.35799458335991!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c609e2c5b47ccf%3A0x6cd478550520ca35!2sVondelpark!5e0!3m2!1str!2str!4v1606820468794!5m2!1str!2str"
+            aria-hidden="false" tabindex="0" allowtransparency="true"></iframe>
+        <span></span>
+    </div>
+
+    <div class="pages-panel">
+        <div class="card grid">
+            <div class="left-panel lg:col-6 md:col-6 sm:col-12">
+                <h4 class="mb-3">Contact Us</h4>
+                <p class="mb-6">Subheader of contact us will come here...</p>
+                <input type="text" class="contact-input mb-3" pInputText placeholder="Your Name">
+                <input type="text" class="contact-input mb-3" pInputText placeholder="Your E-mail">
+                <textarea class="contact-input contact-message mb-6" rows="8" pInputTextarea
+                          placeholder="Your Message"></textarea>
+                <p-button class="mb-3" label="SEND MESSAGE"></p-button>
+            </div>
+            <div class="right-panel lg:col-6 md:col-6 sm:col-12 mx-auto">
+                <div class="grid">
+                    <div class="md:col-offset-3 md:col-6 md:col-offset-3 sm:col-offset-2 sm:col-8 sm:col-offset-2">
+                        <i class="pi pi-home mb-2 mt-5"></i>
+                        <p class="title my-3">Headquarters</p>
+                        <p>Van Beekweg 79-93 7825VC Eexterzandvoort</p>
+
+                        <i class="pi pi-briefcase mb-2 mt-5"></i>
+                        <p class="title my-3">Sales Office</p>
+                        <p>De Roodreef 89k 8502CA Oosternijkerk</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

Angular/src/app/pages/app.contactus.component.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+    selector: 'app-contactus',
+    templateUrl: './app.contactus.component.html',
+})
+export class AppContactusComponent{
+
+}

Angular/src/app/pages/app.crud.component.html

@@ -0,0 +1,138 @@
+<div class="grid">
+    <div class="col-12">
+
+        <p-toast></p-toast>
+
+        <div class="card">
+            <p-toolbar styleClass="mb-4">
+                <ng-template pTemplate="left">
+                    <button pButton pRipple label="New" icon="pi pi-plus" class="p-button-success mr-2 mb-2" (click)="openNew()"></button>
+                    <button pButton pRipple label="Delete" icon="pi pi-trash" class="p-button-danger mb-2" (click)="deleteSelectedProducts()" [disabled]="!selectedProducts || !selectedProducts.length"></button>
+                </ng-template>
+
+                <ng-template pTemplate="right">
+                    <p-fileUpload mode="basic" accept="image/*" [maxFileSize]="1000000" label="Import" chooseLabel="Import" class="mr-2 mb-2 inline-block"></p-fileUpload>
+                    <button pButton pRipple label="Export" icon="pi pi-upload" class="p-button-help mb-2" (click)="dt.exportCSV()"></button>
+                </ng-template>
+            </p-toolbar>
+
+            <p-table #dt [value]="products" [columns]="cols" [rows]="10" [paginator]="true" [globalFilterFields]="['name','country.name','representative.name','status']"
+                     [(selection)]="selectedProducts" [rowHover]="true" dataKey="id"
+                     styleClass="p-datatable-customers"
+                     currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [showCurrentPageReport]="true">
+                <ng-template pTemplate="caption">
+                    <div class="flex flex-column md:flex-row md:justify-content-between table-header">
+                        <h5 class="m-0">Manage Products</h5>
+                        <span class="p-input-icon-left">
+                        <i class="pi pi-search"></i>
+                        <input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Search..." />
+                    </span>
+                    </div>
+                </ng-template>
+                <ng-template pTemplate="header">
+                    <tr>
+                        <th style="width: 3rem">
+                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+                        </th>
+                        <th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
+                        <th>Image</th>
+                        <th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
+                        <th pSortableColumn="category">Category <p-sortIcon field="category"></p-sortIcon></th>
+                        <th pSortableColumn="rating">Reviews <p-sortIcon field="rating"></p-sortIcon></th>
+                        <th pSortableColumn="inventoryStatus">Status <p-sortIcon field="inventoryStatus"></p-sortIcon></th>
+                        <th></th>
+                    </tr>
+                </ng-template>
+                <ng-template pTemplate="body" let-product>
+                    <tr>
+                        <td>
+                            <p-tableCheckbox [value]="product"></p-tableCheckbox>
+                        </td>
+                        <td><span class="p-column-title">Name</span>
+                            {{product.name}}
+                        </td>
+                        <td><span class="p-column-title">Image</span>
+                            <img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" />
+                        </td>
+                        <td><span class="p-column-title">Price</span>
+                            {{product.price | currency:'USD'}}
+                        </td>
+                        <td><span class="p-column-title">Category</span>
+                            {{product.category}}
+                        </td>
+                        <td><span class="p-column-title">Reviews</span>
+                            <p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
+                        </td>
+                        <td><span class="p-column-title">Status</span>
+                            <span [class]="'product-badge status-' + (product.inventoryStatus ? product.inventoryStatus.toLowerCase() : '')">{{product.inventoryStatus}}</span>
+                        </td>
+                        <td>
+                            <button pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" (click)="editProduct(product)"></button>
+                            <button pButton pRipple icon="pi pi-trash" class="p-button-rounded p-button-warning" (click)="deleteProduct(product)"></button>
+                        </td>
+                    </tr>
+                </ng-template>
+                <ng-template pTemplate="summary">
+                    <div class="flex align-items-center justify-content-between">
+                        In total there are {{products ? products.length : 0 }} products.
+                    </div>
+                </ng-template>
+            </p-table>
+        </div>
+
+        <p-dialog [(visible)]="productDialog" [style]="{width: '450px'}" header="Product Details" [modal]="true" styleClass="p-fluid">
+            <ng-template pTemplate="content">
+                <img [src]="'assets/demo/images/product/' + product.image" [alt]="product.image" class="product-image" *ngIf="product.image">
+                <div class="field">
+                    <label for="name">Name</label>
+                    <input type="text" pInputText id="name" [(ngModel)]="product.name" required autofocus />
+                    <small class="p-invalid" *ngIf="submitted && !product.name">Name is required.</small>
+                </div>
+                <div class="field">
+                    <label for="description">Description</label>
+                    <textarea id="description" pInputTextarea [(ngModel)]="product.description" required rows="3" cols="20"></textarea>
+                </div>
+
+                <div class="field">
+                    <label class="mb-3">Category</label>
+                    <div class="formgrid grid">
+                        <div class="field-radiobutton col-6">
+                            <p-radioButton id="category1" name="category" value="Accessories" [(ngModel)]="product.category"></p-radioButton>
+                            <label for="category1">Accessories</label>
+                        </div>
+                        <div class="field-radiobutton col-6">
+                            <p-radioButton id="category2" name="category" value="Clothing" [(ngModel)]="product.category"></p-radioButton>
+                            <label for="category2">Clothing</label>
+                        </div>
+                        <div class="field-radiobutton col-6">
+                            <p-radioButton id="category3" name="category" value="Electronics" [(ngModel)]="product.category"></p-radioButton>
+                            <label for="category3">Electronics</label>
+                        </div>
+                        <div class="field-radiobutton col-6">
+                            <p-radioButton id="category4" name="category" value="Fitness" [(ngModel)]="product.category"></p-radioButton>
+                            <label for="category4">Fitness</label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="formgrid grid">
+                    <div class="field col">
+                        <label for="price">Price</label>
+                        <p-inputNumber id="price" [(ngModel)]="product.price" mode="currency" currency="USD" locale="en-US"></p-inputNumber>
+                    </div>
+                    <div class="field col">
+                        <label for="quantity">Quantity</label>
+                        <p-inputNumber id="quantity" [(ngModel)]="product.quantity"></p-inputNumber>
+                    </div>
+                </div>
+            </ng-template>
+
+            <ng-template pTemplate="footer">
+                <button pButton pRipple label="Cancel" icon="pi pi-times" class="p-button-text" (click)="hideDialog()"></button>
+                <button pButton pRipple label="Save" icon="pi pi-check" class="p-button-text" (click)="saveProduct()"></button>
+            </ng-template>
+        </p-dialog>
+
+        <p-confirmDialog [style]="{width: '450px'}"></p-confirmDialog>
+    </div>
+</div>

Angular/src/app/pages/app.crud.component.ts

@@ -0,0 +1,148 @@
+import {Component, OnInit} from '@angular/core';
+import { Product } from '../demo/domain/product';
+import { ProductService } from '../demo/service/productservice';
+import { ConfirmationService } from 'primeng/api';
+import { MessageService } from 'primeng/api';
+import {AppBreadcrumbService} from '../app.breadcrumb.service';
+
+@Component({
+    templateUrl: './app.crud.component.html',
+    styleUrls: ['../demo/view/tabledemo.scss'],
+    styles: [`
+        :host ::ng-deep .p-dialog .product-image {
+            width: 150px;
+            margin: 0 auto 2rem auto;
+            display: block;
+        }
+
+        @media screen and (max-width: 960px) {
+            :host ::ng-deep .p-datatable.p-datatable-customers .p-datatable-tbody > tr > td:last-child {
+                text-align: center;
+            }
+
+            :host ::ng-deep .p-datatable.p-datatable-customers .p-datatable-tbody > tr > td:nth-child(6) {
+                display: flex;
+            }
+        }
+
+    `],
+    providers: [MessageService, ConfirmationService]
+})
+export class AppCrudComponent implements OnInit {
+
+    productDialog: boolean;
+
+    products: Product[];
+
+    product: Product;
+
+    selectedProducts: Product[];
+
+    submitted: boolean;
+
+    cols: any[];
+
+    constructor(private productService: ProductService, private messageService: MessageService,
+                private confirmationService: ConfirmationService, private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'Pages' },
+            { label: 'Crud', routerLink: ['/pages/crud'] }
+        ]);
+    }
+
+    ngOnInit() {
+        this.productService.getProducts().then(data => this.products = data);
+
+        this.cols = [
+            { field: 'name', header: 'Name' },
+            { field: 'price', header: 'Price' },
+            { field: 'category', header: 'Category' },
+            { field: 'rating', header: 'Reviews' },
+            { field: 'inventoryStatus', header: 'Status' }
+        ];
+    }
+
+    openNew() {
+        this.product = {};
+        this.submitted = false;
+        this.productDialog = true;
+    }
+
+    deleteSelectedProducts() {
+        this.confirmationService.confirm({
+            message: 'Are you sure you want to delete the selected products?',
+            header: 'Confirm',
+            icon: 'pi pi-exclamation-triangle',
+            accept: () => {
+                this.products = this.products.filter(val => !this.selectedProducts.includes(val));
+                this.selectedProducts = null;
+                this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000});
+            }
+        });
+    }
+
+    editProduct(product: Product) {
+        this.product = {...product};
+        this.productDialog = true;
+    }
+
+    deleteProduct(product: Product) {
+        this.confirmationService.confirm({
+            message: 'Are you sure you want to delete ' + product.name + '?',
+            header: 'Confirm',
+            icon: 'pi pi-exclamation-triangle',
+            accept: () => {
+                this.products = this.products.filter(val => val.id !== product.id);
+                this.product = {};
+                this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000});
+            }
+        });
+    }
+
+    hideDialog() {
+        this.productDialog = false;
+        this.submitted = false;
+    }
+
+    saveProduct() {
+        this.submitted = true;
+
+        if (this.product.name.trim()) {
+            if (this.product.id) {
+                this.products[this.findIndexById(this.product.id)] = this.product;
+                this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000});
+            }
+            else {
+                this.product.id = this.createId();
+                this.product.image = 'product-placeholder.svg';
+                this.products.push(this.product);
+                this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000});
+            }
+
+            this.products = [...this.products];
+            this.productDialog = false;
+            this.product = {};
+        }
+    }
+
+    findIndexById(id: string): number {
+        let index = -1;
+        for (let i = 0; i < this.products.length; i++) {
+            if (this.products[i].id === id) {
+                index = i;
+                break;
+            }
+        }
+
+        return index;
+    }
+
+    createId(): string {
+        let id = '';
+        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        for ( let i = 0; i < 5; i++ ) {
+            id += chars.charAt(Math.floor(Math.random() * chars.length));
+        }
+        return id;
+    }
+}

Angular/src/app/pages/app.error.component.html

@@ -0,0 +1,26 @@
+<div class="pages-body error-page flex flex-column">
+    <div class="topbar p-3 flex justify-content-between flex-row align-items-center">
+        <div class="topbar-left ml-3 flex" routerLink="/">
+            <div class="logo">
+                <img src="assets/layout/images/logo2x.png" alt=""/>
+            </div>
+        </div>
+        <div class="topbar-right mr-3 flex">
+            <button pButton pRipple type="button" label="DASHBOARD" [routerLink]="['/']"
+                    class="p-button-text p-button-plain topbar-button"></button>
+        </div>
+    </div>
+
+    <div class="align-self-center mt-auto mb-auto">
+        <div class="pages-panel card flex flex-column">
+            <div class="pages-header px-3 py-1">
+                <h2>ERROR</h2>
+            </div>
+            <div class="card mt-3 px-6">
+                <img src="assets/layout/images/pages/error.png" alt=""/>
+            </div>
+            <div class="pages-detail pb-6">Requested resource is not available.</div>
+            <button pButton pRipple type="button" label="GO BACK TO DASHBOARD" [routerLink]="['/']" class="p-button-text"></button>
+        </div>
+    </div>
+</div>

Angular/src/app/pages/app.error.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-error',
+  templateUrl: './app.error.component.html',
+})
+export class AppErrorComponent {
+
+}

Angular/src/app/pages/app.help.component.html

@@ -0,0 +1,107 @@
+<div class="grid layout-help-page">
+    <div class="col-12">
+        <div class="card p-0">
+            <div class="grid grid-nogutter">
+                <div class="col-12 layout-help-page-header">
+                    <img src="assets/layout/images/extensions/help-header@2x.jpg" alt="help-header" style="width: 100%" />
+                    <h1 class="layout-help-page-header-text">Frequently Asked Questions</h1>
+                    <div class="layout-help-page-search p-input-icon-left p-fluid shadow-2">
+                        <i class="pi pi-search"></i>
+                        <input type="text" pInputText placeholder="Search">
+                    </div>
+                </div>
+                <div class="col-12 p-5">
+                    <p-accordion>
+                        <p-accordionTab>
+                            <p-header>
+                                <div class="flex align-items-center">
+                                    <i class="pi pi-bookmark fs-xlarge mr-3 pink-color"></i>
+                                    <div class="flex flex-column">
+                                        <h5 class="mb-0">The Basics</h5>
+                                        <p>4 articles in this collection</p>
+                                    </div>
+                                </div>
+                            </p-header>
+
+                            <p-accordion styleClass="questions">
+                                <p-accordionTab header="Which do I need to develop a SaaS application?">
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque ligula dolor, pretium tincidunt libero sodales in. Integer at eros posuere, elementum felis a, laoreet libero. In sed nunc accumsan, dapibus nibh sit amet, aliquet ipsum.
+                                </p-accordionTab>
+                                <p-accordionTab header="I’m a freelancer/agency. Can I use the item for an end product I’m doing for a client?">
+                                    Aliquam erat volutpat. Nulla hendrerit, arcu non lobortis fringilla, ipsum orci condimentum risus, ac hendrerit mauris justo eget lectus.
+                                </p-accordionTab>
+                                <p-accordionTab header="We’re a reseller, are we able to purchase a license on behalf of our client? ">
+                                    Ut leo tellus, imperdiet tristique turpis eu, eleifend rhoncus dolor. Fusce eu feugiat urna. Nullam venenatis nisi varius justo ultrices, non aliquam nisi dapibus. Duis viverra nulla ipsum, ac laoreet mauris dapibus eu.
+                                </p-accordionTab>
+                                <p-accordionTab header="Is there a recurring fee or is it perpetual? ">
+                                    Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur eu consequat libero. Donec euismod facilisis pulvinar.
+                                </p-accordionTab>
+                            </p-accordion>
+                        </p-accordionTab>
+                    </p-accordion>
+
+                    <p-accordion styleClass="mt-3">
+                        <p-accordionTab>
+                            <p-header>
+                                <div class="flex align-items-center">
+                                    <i class="pi pi-bookmark fs-xlarge mr-3 pink-color"></i>
+                                    <div class="flex flex-column">
+                                        <h5 class="mb-0">Questions About Licenses</h5>
+                                        <p>3 articles in this collection</p>
+                                    </div>
+                                </div>
+                            </p-header>
+
+                            <p-accordion styleClass="questions">
+                                <p-accordionTab header="Pellentesque faucibus convallis dolor ?">
+                                    Donec facilisis, magna aliquam venenatis lobortis, nulla diam euismod orci, ac pharetra risus mi eget mauris. Praesent eleifend.
+                                </p-accordionTab>
+                                <p-accordionTab header="Sed rhoncus, lacus a volutpat elementum ?">
+                                    Cras vel ullamcorper metus, vel faucibus ex. Nullam finibus ligula quis dolor aliquet, quis tempor lectus posuere. In sed mattis dui. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+                                </p-accordionTab>
+                                <p-accordionTab header="Fusce porttitor augue turpis, vitae malesuada elit condimentum ?">
+                                    Proin dapibus ipsum eget libero elementum, a consectetur tortor tristique. Suspendisse potenti. Aenean dictum blandit mauris, a sollicitudin ex sagittis sit amet.
+                                </p-accordionTab>
+                            </p-accordion>
+                        </p-accordionTab>
+                    </p-accordion>
+
+                    <p-accordion styleClass="mt-3">
+                        <p-accordionTab>
+                            <p-header>
+                                <div class="flex align-items-center">
+                                    <i class="pi pi-bookmark fs-xlarge mr-3 pink-color"></i>
+                                    <div class="flex flex-column">
+                                        <h5 class="mb-0">Questions About Frameworks</h5>
+                                        <p>6 articles in this collection</p>
+                                    </div>
+                                </div>
+                            </p-header>
+
+                            <p-accordion styleClass="questions">
+                                <p-accordionTab header="Lorem ipsum dolor sit amet, consectetur adipiscing elit ?">
+                                    Vivamus in tortor arcu. Morbi ornare ex mi, sit amet pretium nibh sollicitudin eu.
+                                </p-accordionTab>
+                                <p-accordionTab header="Sed ut massa accumsan, consequat ligula sit amet, dignissim diam ?">
+                                    Curabitur elit enim, scelerisque at eros ac, sagittis volutpat ante. Mauris ac accumsan lorem, in viverra turpis.
+                                </p-accordionTab>
+                                <p-accordionTab header=" Vivamus lobortis lacinia eros vel viverra. Vestibulum molestie tortor metus, ac dapibus massa sodales eget ?">
+                                    Donec ut justo sit amet erat eleifend vulputate ut at mi.
+                                </p-accordionTab>
+                                <p-accordionTab header="Donec finibus tristique leo, consectetur tincidunt velit ?">
+                                    Maecenas mattis malesuada lobortis. Praesent hendrerit eros quam. Praesent volutpat mauris ut dignissim maximus.
+                                </p-accordionTab>
+                                <p-accordionTab header="Praesent suscipit, magna at lacinia tempor ?">
+                                    Velit leo commodo magna, at pharetra risus libero vitae urna.
+                                </p-accordionTab>
+                                <p-accordionTab header="Nulla auctor urna eget purus placerat maximus. Interdum ?">
+                                    Et malesuada fames ac ante ipsum primis in faucibus.
+                                </p-accordionTab>
+                            </p-accordion>
+                        </p-accordionTab>
+                    </p-accordion>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

Angular/src/app/pages/app.help.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import {AppBreadcrumbService} from '../app.breadcrumb.service';
+
+@Component({
+    selector: 'app-help',
+    templateUrl: './app.help.component.html',
+})
+export class AppHelpComponent {
+
+    constructor(private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'Pages' },
+            { label: 'Help', routerLink: ['/pages/help'] }
+        ]);
+    }
+}

Angular/src/app/pages/app.invoice.component.html

@@ -0,0 +1,104 @@
+<div class="layout-invoice-page">
+    <button pButton pRipple type="button" label="Print" icon="pi pi-print" (click)="print()" class="mb-3"></button>
+
+    <div class="grid layout-invoice-content">
+        <div class="col-12">
+            <div class="card">
+                <div class="flex justify-content-between">
+                    <h5>INVOICE</h5>
+                    <div class="flex flex-column align-items-end">
+                        <img src="assets/layout/images/extensions/prime-logo.svg" alt="invoice-logo"/>
+                        <p class="mt-1">9137 3rd Lane California City, CA 93504.</p>
+                    </div>
+                </div>
+
+                <div class="p-3">
+                    <p-table [columns]="billCols" [value]="billData" styleClass="p-invoice-datatable-responsive pb-3">
+                        <ng-template pTemplate="header" let-columns>
+                            <tr>
+                                <th *ngFor="let col of columns">
+                                    {{col.header}}
+                                </th>
+                            </tr>
+                        </ng-template>
+                        <ng-template pTemplate="body" let-rowData let-columns="columns">
+                            <tr>
+                                <td *ngFor="let col of columns">
+                                    <span class="p-column-title">{{col.header}}</span>
+                                    {{rowData[col.field]}}
+                                </td>
+                            </tr>
+                        </ng-template>
+                    </p-table>
+
+                    <p-table [columns]="productCols" [value]="productData" styleClass="p-invoice-datatable-responsive p-datatable-sm py-6">
+                        <ng-template pTemplate="header" let-columns>
+                            <tr>
+                                <th *ngFor="let col of columns">
+                                    {{col.header}}
+                                </th>
+                            </tr>
+                        </ng-template>
+                        <ng-template pTemplate="body" let-rowData let-columns="columns">
+                            <tr>
+                                <td *ngFor="let col of columns">
+                                    <span class="p-column-title">{{col.header}}</span>
+                                    {{rowData[col.field]}}
+                                </td>
+                            </tr>
+                        </ng-template>
+                    </p-table>
+
+                    <div class="grid">
+                        <div class="col-12 md:col-6">
+                            <p-panel header="BANK">
+                                <div class="flex align-items-center justify-content-between py-2">
+                                    <span>Bank</span>
+                                    <span class="font-bold">BestBank</span>
+                                </div>
+                                <div class="flex align-items-center justify-content-between pt-2 py-2">
+                                    <span>ACCOUNT BENEFICIARY</span>
+                                    <span class="font-bold">Edward Williams</span>
+                                </div>
+                                <div class="flex align-items-center justify-content-between pt-2 py-2">
+                                    <span>SWIFT</span>
+                                    <span class="font-bold">PJNWBXND</span>
+                                </div>
+                                <div class="flex align-items-center justify-content-between pt-2 py-2">
+                                    <span>IBAN</span>
+                                    <span class="font-bold">GB04420235692263866724650931</span>
+                                </div>
+                            </p-panel>
+                        </div>
+                        <div class="col-12 md:col-6">
+                            <p-panel header="TOTAL">
+                                <div class="grid text-right">
+                                    <div class="col-10">
+                                        SUBTOTAL
+                                    </div>
+                                    <div class="col-2">
+                                        <span class="pink-color">$1304.00</span>
+                                    </div>
+
+                                    <div class="col-10">
+                                        <span>VAT</span>
+                                    </div>
+                                    <div class="col-2">
+                                        <span class="pink-color">$234.72</span>
+                                    </div>
+
+                                    <div class="col-10">
+                                        <span>TOTAL</span>
+                                    </div>
+                                    <div class="col-2">
+                                        <span class="pink-color">$1538.72</span>
+                                    </div>
+                                </div>
+                            </p-panel>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

Angular/src/app/pages/app.invoice.component.ts

@@ -0,0 +1,74 @@
+import { Component, OnInit } from '@angular/core';
+import {AppBreadcrumbService} from '../app.breadcrumb.service';
+
+@Component({
+    selector: 'app-invoice',
+    templateUrl: './app.invoice.component.html',
+})
+export class AppInvoiceComponent implements OnInit {
+
+    billData: any[];
+
+    billCols: any[];
+
+    productData: any[];
+
+    productCols: any[];
+
+    constructor(private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'Pages' },
+            { label: 'Invoice', routerLink: ['/pages/invoice'] }
+        ]);
+    }
+
+    ngOnInit() {
+        this.billData = [
+            {
+                'billTo': 'TOYOKSU SYSCOM CORPORATION 11-27, MEIEKI 4-CHROME NAKAMURA-KU, NAGOYA 450-0002 JAPAN',
+                'date': '30/08/2021',
+                'no': 'A/3100',
+                'notes': 'N/A'
+            }
+        ];
+
+        this.billCols = [
+            { field: 'billTo', header: 'BILL TO' },
+            { field: 'date', header: 'DATE' },
+            { field: 'no', header: 'INVOICE NO' },
+            { field: 'notes', header: 'NOTES' }
+        ];
+
+        this.productData = [
+            {
+                'description': 'License A',
+                'quantity': '4',
+                'price': '$99.00',
+                'total': '$396.00'
+            },
+            {
+                'description': 'License B',
+                'quantity': '1',
+                'price': '$790.00',
+                'total': '$790.00'
+            },
+            {
+                'description': 'License C',
+                'quantity': '2',
+                'price': '$59.00',
+                'total': '$118.00'
+            }
+        ];
+
+        this.productCols = [
+            { field: 'description', header: 'DESCRIPTION' },
+            { field: 'quantity', header: 'QUANTITY' },
+            { field: 'price', header: 'UNIT PRICE' },
+            { field: 'total', header: 'LINE TOTAL' }
+        ];
+    }
+
+    print() {
+        window.print();
+    }
+}

Angular/src/app/pages/app.landing.component.html

@@ -0,0 +1,187 @@
+<div class="landing-container">
+    <div id="header" class="section flex flex-column">
+        <div class="header-menu-container flex align-items-center justify-content-between">
+            <a class="layout-topbar-logo" routerLink="/">
+                <img src="assets/layout/images/logo2x.png" alt="ultima-layout" style="height: 24px">
+            </a>
+
+            <a id="menu-button" href="#" class="lg:hidden" (click)="onMenuButtonClick($event)">
+                <i class="pi pi-bars fs-xlarge"></i>
+            </a>
+            <ul #menu id="menu" (animationend)="onMenuAnimationEnd()">
+                <li><a class="flex p-3">Home</a></li>
+                <li><a (click)="smoothScroll('#header')" class="flex p-3">Introduction</a></li>
+                <li><a (click)="smoothScroll('#features')" class="flex p-3">Features</a></li>
+                <li><a (click)="smoothScroll('#promotion')" class="flex p-3">Promotion</a></li>
+                <li><a (click)="smoothScroll('#pricing')" class="flex p-3">Pricing</a></li>
+                <li><a (click)="smoothScroll('#video')" class="flex pl-3 py-3">Video</a></li>
+            </ul>
+        </div>
+
+        <div class="header-text flex flex-column align-items-center justify-content-center">
+            <h1 class="mb-6 white-color">Your application slogan comes here</h1>
+            <button pButton pRipple type="button" label="Sign Up Now" class="p-button-secondary"></button>
+        </div>
+    </div>
+
+    <div id="features" class="section flex flex-column align-items-center">
+        <h2>The Ultimate Material Application Template for PrimeNG</h2>
+        <p class="text-center">PrimeNG is a collection of rich UI components for Angular. PrimeNG is developed by PrimeTek Informatics, a vendor with years of expertise in developing open source UI solutions.
+            Allocate your valuable time on business logic rather than dealing with the complex user interface requirements.
+        </p>
+
+        <div class="grid mt-3 mx-0">
+            <div class="col-12 md:col-4 text-center">
+                <h3>Creative</h3>
+                <button pButton pRipple type="button" class="feature-button p-button-rounded p-button-plain p-button-text p-button p-component p-button-icon-only">
+                    <span class="p-button-icon pi pi-pencil fs-xlarge" aria-hidden="true"></span>
+                    <span aria-hidden="true" class="p-button-label">&amp;nbsp;</span>
+                </button>
+            </div>
+            <div class="col-12 md:col-4 text-center">
+                <h3>Responsive</h3>
+                <button pButton pRipple type="button" class="feature-button p-button-rounded p-button-plain p-button-text p-button p-component p-button-icon-only">
+                    <span class="p-button-icon pi pi-mobile fs-xlarge" aria-hidden="true"></span>
+                    <span aria-hidden="true" class="p-button-label">&amp;nbsp;</span>
+                </button>
+            </div>
+            <div class="col-12 md:col-4 text-center">
+                <h3>Cross Browser</h3>
+                <button pButton pRipple type="button" class="feature-button p-button-rounded p-button-plain p-button-text p-button p-component p-button-icon-only">
+                    <span class="p-button-icon pi pi-upload fs-xlarge" aria-hidden="true"></span>
+                    <span aria-hidden="true" class="p-button-label">&amp;nbsp;</span>
+                </button>
+            </div>
+
+            <div class="col-12 md:col-4 text-center">
+                <button pButton pRipple type="button" class="feature-button p-button-rounded p-button-plain p-button-text p-button p-component p-button-icon-only">
+                    <span class="p-button-icon pi pi-tag fs-xlarge" aria-hidden="true"></span>
+                    <span aria-hidden="true" class="p-button-label">&amp;nbsp;</span>
+                </button>
+                <h3>Well Organized</h3>
+            </div>
+            <div class="col-12 md:col-4 text-center">
+                <button pButton pRipple type="button" class="feature-button p-button-rounded p-button-plain p-button-text p-button p-component p-button-icon-only">
+                    <span class="p-button-icon pi pi-palette fs-xlarge" aria-hidden="true"></span>
+                    <span aria-hidden="true" class="p-button-label">&amp;nbsp;</span>
+                </button>
+                <h3>Beautiful</h3>
+            </div>
+            <div class="col-12 md:col-4 text-center">
+                <button pButton pRipple type="button" class="feature-button p-button-rounded p-button-plain p-button-text p-button p-component p-button-icon-only">
+                    <span class="p-button-icon pi pi-check-circle fs-xlarge" aria-hidden="true"></span>
+                    <span aria-hidden="true" class="p-button-label">&amp;nbsp;</span>
+                </button>
+                <h3>Just For you</h3>
+            </div>
+        </div>
+    </div>
+
+    <div id="promotion" class="flex flex-column align-items-center">
+        <div class="grid m-0 py-3 pl-xl-6">
+            <div class="col-12 lg:col-8 flex flex-column justify-content-center align-items-center lg:align-items-start pl-6">
+                <h1 class="white-color">Boost Your Productivity.</h1>
+                <button pButton pRipple type="button" class="p-button-raised p-button p-component">
+                    <span class="p-button-label">Sign Up Now</span>
+                </button>
+            </div>
+            <div class="col-12 lg:col-4">
+                <div class="card mt-3 mb-0">
+                    <h3>Just</h3>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab perferendis nesciunt ad reiciendis
+                        explicabo consequatur sapiente odit ipsa harum illum</p>
+                </div>
+
+                <div class="card mt-3 mb-0">
+                    <h3>Like</h3>
+                    <p>Ab perferendis nesciunt ad reiciendis explicabo consequatur sapiente odit ipsa harum illum</p>
+                </div>
+
+                <div class="card my-3">
+                    <h3>That</h3>
+                    <p>Necessitatibus quaerat voluptates aspernatur iure, aperiam possimus sint sit mollitia! </p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="pricing" class="section flex flex-column align-items-center">
+        <h2>Pricing</h2>
+        <p>Esse delectus sit velit, aspernatur voluptates molestiae, enim recusandae. Odit dicta, maiores quas ad
+            nesciunt, illum expedita veritatis illo quam odio id!</p>
+
+        <div class="grid m-0 pricing-content">
+            <div class="col-12 xl:col-4">
+                <div class="card p-0">
+                    <div class="flex flex-column align-items-center indigo-bgcolor white-color p-6 fs-large">
+                        <span>BASIC</span>
+                        <h1 class="font-bold">$5</h1>
+                        <span>Monthly</span>
+                    </div>
+                    <ul class="options">
+                        <li><i class="pi pi-check"></i><span>Responsive</span></li>
+                        <li><i class="pi pi-check"></i><span>Push Messages</span></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="col-12 xl:col-4">
+                <div class="card p-0">
+                    <div class="flex flex-column align-items-center pink-bgcolor white-color p-6 fs-large">
+                        <span>STANDARD</span>
+                        <h1 class="font-bold">$25</h1>
+                        <span>Monthly</span>
+                    </div>
+                    <ul class="options">
+                        <li><i class="pi pi-check"></i><span>Responsive</span></li>
+                        <li><i class="pi pi-check"></i><span>Push Messages</span></li>
+                        <li><i class="pi pi-check"></i><span>7/24 Support</span></li>
+                        <li><i class="pi pi-check"></i><span>Free Shipping</span></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="col-12 xl:col-4 pricing-box pricing-professional">
+                <div class="card p-0">
+                    <div class="flex flex-column align-items-center cyan-bgcolor white-color p-6 fs-large">
+                        <span>PROFESSIONAL</span>
+                        <h1 class="font-bold">$50</h1>
+                        <span>Monthly</span>
+                    </div>
+                    <ul class="options">
+                        <li><i class="pi pi-check"></i><span>Responsive</span></li>
+                        <li><i class="pi pi-check"></i><span>Push Messages</span></li>
+                        <li><i class="pi pi-check"></i><span>7/24 Support</span></li>
+                        <li><i class="pi pi-check"></i><span>Free Shipping</span></li>
+                        <li><i class="pi pi-check"></i><span>Unlimited Bandwidth</span></li>
+                        <li><i class="pi pi-check"></i><span>Unlimited Storage</span></li>
+                        <li><i class="pi pi-check"></i><span>Gift Cards</span></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="video" class="section flex flex-column align-items-center justify-content-center">
+        <h2>Video</h2>
+        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.</p>
+        <div class="m-3">
+            <iframe src="https://www.youtube.com/embed/B_lYGUtCd0g" frameborder="0" width="560" height="330" class="videoFrame"></iframe>
+        </div>
+    </div>
+
+    <div id="footer" class="section flex align-items-center justify-content-between flex-column lg:flex-row">
+        <p>PrimeNG ULTIMA</p>
+
+        <div class="py-3 flex align-items-center">
+            <ul class="my-3 mx-6">
+                <li><a href="#mobile">Promotion</a></li>
+                <li><a href="#pricing">Pricing</a></li>
+                <li><a href="#video">Video</a></li>
+            </ul>
+            <ul class="my-3 ml-3">
+                <li><a href="#">Home</a></li>
+                <li><a href="#introduction">Introduction</a></li>
+                <li><a href="#features">Features</a></li>
+            </ul>
+        </div>
+    </div>
+</div>

Angular/src/app/pages/app.landing.component.ts

@@ -0,0 +1,78 @@
+import { Component, ElementRef, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './app.landing.component.html',
+    styles: [`
+        .videoFrame{
+            width: 560px;
+            height: 300px;
+        }
+
+        @media screen and (max-width: 960px) {
+            .videoFrame{
+                width: 300px;
+            }
+        }
+
+    `]
+})
+export class AppLandingComponent {
+
+    isMenuActive = false;
+
+    @ViewChild('menu') menuViewChild: ElementRef;
+
+    smoothScroll(id){
+        document.querySelector(id).scrollIntoView({
+            behavior: 'smooth'
+        });
+    }
+
+    onMenuButtonClick(e) {
+        let menu = this.menuViewChild.nativeElement;
+
+        if (this.isMenuActive) {
+            this.addClass(menu, 'fadeOutUp');
+            this.isMenuActive = false;
+        }
+        else {
+            this.addClass(menu, 'menu-active fadeInDown');
+            this.isMenuActive = true;
+        }
+        e.preventDefault();
+    }
+
+    onMenuAnimationEnd() {
+        let menu = this.menuViewChild.nativeElement;
+
+        if (this.isMenuActive) {
+            this.removeClass(menu, 'fadeInDown');
+        }
+        else {
+            this.removeClass(menu, 'menu-active fadeOutUp');
+        }
+    }
+
+    addClass(element, classNames) {
+        let classNamesArr = classNames.split(' ');
+        for (var i = 0; i < classNamesArr.length; i++) {
+            let className = classNamesArr[i];
+            if (element.classList)
+                element.classList.add(className);
+            else
+                element.className += ' ' + className;
+        }
+    }
+
+    removeClass(element, classNames) {
+        let classNamesArr = classNames.split(' ');
+        for (var i = 0; i < classNamesArr.length; i++) {
+            let className = classNamesArr[i];
+            if (element.classList)
+                element.classList.remove(className);
+            else
+                element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+        }
+    }
+}

Angular/src/app/pages/app.login.component.html

@@ -0,0 +1,51 @@
+<div class="pages-body login-page flex flex-column">
+    <div class="topbar p-3 flex justify-content-between flex-row align-items-center">
+        <div class="topbar-left ml-3 flex" routerLink="/">
+            <div class="logo">
+                <img src="assets/layout/images/logo2x.png" alt=""/>
+            </div>
+        </div>
+        <div class="topbar-right mr-3 flex">
+            <button pButton pRipple type="button" label="DASHBOARD" [routerLink]="['/']"
+                    class="p-button-text p-button-plain topbar-button"></button>
+        </div>
+    </div>
+
+    <div class="align-self-center mt-auto mb-auto">
+        <div class="pages-panel card flex flex-column">
+            <div class="pages-header px-3 py-1">
+                <h2>LOGIN</h2>
+            </div>
+
+            <h4>Welcome</h4>
+
+            <div class="pages-detail mb-6 px-6">Please use the form to sign-in Ultima network</div>
+
+            <div class="input-panel flex flex-column px-3">
+                <div class="p-inputgroup">
+                    <span class="p-inputgroup-addon">
+                        <i class="pi pi-envelope"></i>
+                    </span>
+                    <span class="p-float-label">
+                        <input type="text" id="email" pInputText>
+                        <label for="email">Email</label>
+                    </span>
+                </div>
+
+                <div class="p-inputgroup mt-3 mb-6">
+                    <span class="p-inputgroup-addon">
+                        <i class="pi pi-lock"></i>
+                    </span>
+                    <span class="p-float-label">
+                        <input type="password" id="password" pInputText>
+                        <label for="password">Password</label>
+                    </span>
+                </div>
+
+            </div>
+
+            <p-button class="login-button mb-6 px-3" label="LOGIN"></p-button>
+
+        </div>
+    </div>
+</div>

Angular/src/app/pages/app.login.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './app.login.component.html',
+})
+export class AppLoginComponent {
+
+}

Angular/src/app/pages/app.notfound.component.html

@@ -0,0 +1,26 @@
+<div class="pages-body notfound-page flex flex-column">
+    <div class="topbar p-3 flex justify-content-between flex-row align-items-center">
+        <div class="topbar-left ml-3 flex" routerLink="/">
+            <div class="logo">
+                <img src="assets/layout/images/logo2x.png" alt=""/>
+            </div>
+        </div>
+        <div class="topbar-right mr-3 flex">
+            <button pButton pRipple type="button" label="DASHBOARD" [routerLink]="['/']"
+                    class="p-button-text p-button-plain topbar-button"></button>
+        </div>
+    </div>
+
+    <div class="align-self-center mt-auto mb-auto">
+        <div class="pages-panel card flex flex-column">
+            <div class="pages-header px-3 py-1">
+                <h2>NOT FOUND</h2>
+            </div>
+            <div class="card mt-3 px-6">
+                <img src="assets/layout/images/pages/404.png" alt=""/>
+            </div>
+            <div class="pages-detail pb-6">Requested resource is not available.</div>
+            <button pButton pRipple type="button" label="GO BACK TO DASHBOARD" [routerLink]="['/']" class="p-button-text"></button>
+        </div>
+    </div>
+</div>

Angular/src/app/pages/app.notfound.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-notfound',
+  templateUrl: './app.notfound.component.html',
+})
+export class AppNotfoundComponent {
+
+}

Angular/src/app/pages/app.timelinedemo.component.html

@@ -0,0 +1,34 @@
+<div class="grid">
+    <div class="col-12">
+        <div class="card">
+            <h4>Timeline</h4>
+
+            <h5>Custom Timeline</h5>
+            <p-timeline [value]="customEvents" align="alternate" styleClass="customized-timeline">
+                <ng-template pTemplate="marker" let-event>
+                <span class="custom-marker shadow-2" [style.backgroundColor]="event.color">
+                    <i [ngClass]="event.icon"></i>
+                </span>
+                </ng-template>
+                <ng-template pTemplate="content" let-event>
+                    <p-card [header]="event.status" [subheader]="event.date">
+                        <img *ngIf="event.image" [src]="'assets/demo/images/product/' + event.image" [alt]="event.name" width="200" class="shadow-2" />
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
+                            quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
+                        <button pButton label="Read more" class="p-button-text"></button>
+                    </p-card>
+                </ng-template>
+            </p-timeline>
+
+            <h5 style="margin-top: 5em">Horizontal - Alternate Align</h5>
+            <p-timeline [value]="horizontalEvents" layout="horizontal" align="alternate">
+                <ng-template pTemplate="content" let-event>
+                    {{event}}
+                </ng-template>
+                <ng-template pTemplate="opposite" let-event>
+                    &nbsp;
+                </ng-template>
+            </p-timeline>
+        </div>
+    </div>
+</div>

Angular/src/app/pages/app.timelinedemo.component.ts

@@ -0,0 +1,40 @@
+import {Component, OnInit} from '@angular/core';
+import {PrimeIcons} from 'primeng/api';
+import {AppBreadcrumbService} from '../app.breadcrumb.service';
+
+@Component({
+    templateUrl: './app.timelinedemo.component.html',
+    styleUrls: ['./app.timelinedemo.scss']
+})
+export class AppTimelineDemoComponent implements OnInit{
+
+    customEvents: any[];
+
+    horizontalEvents: any[];
+
+    constructor(private breadcrumbService: AppBreadcrumbService) {
+        this.breadcrumbService.setItems([
+            { label: 'Pages' },
+            { label: 'Timeline', routerLink: ['/pages/timeline'] }
+        ]);
+    }
+
+    ngOnInit() {
+        this.customEvents = [
+            {
+                status: 'Ordered',
+                date: '15/10/2020 10:30',
+                icon: PrimeIcons.SHOPPING_CART,
+                color: '#9C27B0',
+                image: 'game-controller.jpg'
+            },
+            {status: 'Processing', date: '15/10/2020 14:00', icon: PrimeIcons.COG, color: '#673AB7'},
+            {status: 'Shipped', date: '15/10/2020 16:15', icon: PrimeIcons.ENVELOPE, color: '#FF9800'},
+            {status: 'Delivered', date: '16/10/2020 10:00', icon: PrimeIcons.CHECK, color: '#607D8B'}
+        ];
+
+        this.horizontalEvents = [
+            '2020', '2021', '2022', '2023'
+        ];
+    }
+}

Angular/src/app/pages/app.timelinedemo.scss

@@ -0,0 +1,40 @@
+//timeline
+.custom-marker {
+    display: flex;
+    width: 2rem;
+    height: 2rem;
+    align-items: center;
+    justify-content: center;
+    color: #ffffff;
+    border-radius: 50%;
+    z-index: 1;
+}
+
+::ng-deep {
+    .p-timeline-event-content,
+    .p-timeline-event-opposite {
+        line-height: 1;
+    }
+}
+
+@media screen and (max-width: 960px) {
+    ::ng-deep {
+        .customized-timeline {
+            .p-timeline-event:nth-child(even) {
+                flex-direction: row !important;
+
+                .p-timeline-event-content {
+                    text-align: left !important;
+                }
+            }
+
+            .p-timeline-event-opposite {
+                flex: 0;
+            }
+
+            .p-card {
+                margin-top: 1rem;
+            }
+        }
+    }
+}

Angular/src/app/pages/app.wizard.component.html

@@ -0,0 +1,359 @@
+<body class="wizard-body">
+    <div class="wizard-wrapper">
+        <div class="wizard-topbar">
+            <div class="logo" [routerLink]="['/']"></div>
+            <div class="profile">
+                <div class="profile-text">
+                    <h1>Welcome to Ultima</h1>
+                    <p>Please complete steps to register</p>
+                </div>
+                <img class="profile-image" src="assets/layout/images/extensions/flag-us@2x.png" alt="ultima-layout" />
+            </div>
+        </div>
+
+        <div class="wizard-content">
+            <div class="wizard-card">
+                <div class="wizard-card-header">
+                    <div class="grid col">
+                        <div class="col-4 tab register-tab" [ngClass]="{'selected-tab': activeTab == 'register'}" (click)="clickNext('register')">
+                            <div class="icon">
+                                <i class="pi pi-sign-in"></i>
+                            </div>
+                            <div class="title">REGISTER</div>
+                        </div>
+                        <div class="col-4 tab tier-tab" [ngClass]="{'selected-tab': activeTab === 'tier'}" (click)="clickNext('tier')">
+                            <div class="icon">
+                                <i class="pi pi-clone"></i>
+                            </div>
+                            <div class="title">CHOOSE TIER</div>
+                        </div>
+                        <div class="col-4 tab payment-tab" [ngClass]="{'selected-tab': activeTab === 'payment'}" (click)="clickNext('payment')">
+                            <div class="icon">
+                                <i class="pi pi-shopping-cart"></i>
+                            </div>
+                            <div class="title">PAYMENT</div>
+                        </div>
+                        <div class="tab-bar" [@tabBar]="activeTab==='register'?'register':activeTab==='tier'?'tier':'payment'"></div>
+                    </div>
+                </div>
+                <div class="wizard-card-content register" [ngClass]="{'active-content': activeTab === 'register'}">
+                    <div class="grid ">
+                        <div class="col-12  lg:col-6">
+                            <h1>ESSENTIAL INFORMATION</h1>
+                            <div class="forms">
+                                <div class="p-inputgroup">
+                                        <span class="p-inputgroup-addon">
+											<i class="pi pi-user"></i>
+                                        </span>
+                                    <span class="p-float-label">
+                                <input id="name" type="text" pInputText/>
+                                <label for="name">Username</label>
+                                    </span>
+                                </div>
+                                <div class="p-inputgroup">
+                                        <span class="p-inputgroup-addon">
+											<i class="pi pi-user"></i>
+                                        </span>
+                                    <span class="p-float-label">
+                                <input id="email" type="text" pInputText/>
+                                <label for="email">Email</label>
+                                    </span>
+                                </div>
+                                <div class="p-inputgroup">
+                                        <span class="p-inputgroup-addon">
+											<i class="pi pi-sign-in"></i>
+                                        </span>
+                                    <span class="p-float-label">
+                                <input id="password" type="password" pInputText/>
+                                <label for="password">Password</label>
+                                    </span>
+                                </div>
+
+                            </div>
+                        </div>
+                        <div class="col-12 lg:col-6">
+                            <h1>OPTIONAL</h1>
+                            <div class="forms">
+                                <p-dropdown id="timezone" [style]="{'margin-bottom':'10px'}" [options]="dropdownOptions1" [(ngModel)]="selectDropdownOptions1"></p-dropdown>
+
+                                <div class="calendar">
+                                    <p-calendar id="button" [(ngModel)]="birthdate" placeholder="Birthdate" [showIcon]="true" appendTo="body"></p-calendar>
+                                </div>
+
+                                <p-dropdown id="ultima" [options]="dropdownOptions2" [(ngModel)]="selectDropdownOptions2" appendTo="body" [style]="{'margin-bottom':'10px'}"></p-dropdown>
+                            </div>
+                        </div>
+                        <div class="col-12">
+                            <button pButton pRipple class="continue-button" type="button" label="CONTINUE" (click)="clickNext('tier')"></button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="wizard-card-content tier" [ngClass]="{'active-content': activeTab === 'tier'}">
+                    <div class="grid ">
+                        <div class="col-12 md:col-6 lg:col-4">
+                            <div class="card basic">
+                                <div class="card-header">
+                                    <div class="grid">
+                                        <div class="col-8">
+                                            <h1>BASIC</h1>
+                                        </div>
+                                        <div class="col-4">
+                                            <h1>$5</h1>
+                                            <span>/m</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-content">
+                                        <div class="card-row grid">
+                                            <div class="col-3">
+                                                <i class="pi pi-fw pi-check"></i>
+                                            </div>
+                                            <div class="col-9">Responsive</div>
+                                        </div>
+                                        <div class="card-row grid">
+                                            <div class="col-3">
+                                                <i class="pi pi-fw pi-check"></i>
+                                            </div>
+                                            <div class="col-9">Push Messages</div>
+                                        </div>
+                                    <div class="col-12 tier-button-wrapper">
+                                        <button pButton pRipple class="tier-button basic" type="button" label="BASIC" (click)="selectTier('basic')"></button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-12 md:col-6 lg:col-4">
+                            <div class="card pro">
+                                <div class="card-header">
+                                    <div class="grid">
+                                        <div class="col-7">
+                                            <h1>PRO</h1>
+                                        </div>
+                                        <div class="col-5">
+                                            <h1>$25</h1>
+                                            <span>/m</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-content">
+                                    <div class="card-row grid">
+                                        <div class="col-3">
+                                            <i class="pi pi-fw pi-check"></i>
+                                        </div>
+                                        <div class="col-9">Responsive</div>
+                                    </div>
+                                    <div class="card-row grid">
+                                        <div class="col-3">
+                                            <i class="pi pi-fw pi-check"></i>
+                                        </div>
+                                        <div class="col-9">Push Messages</div>
+                                    </div>
+                                    <div class="card-row grid">
+                                        <div class="col-3">
+                                            <i class="pi pi-fw pi-check"></i>
+                                        </div>
+                                        <div class="col-9">7/24 Support</div>
+                                    </div>
+                                    <div class="card-row grid">
+                                        <div class="col-3">
+                                            <i class="pi pi-fw pi-check"></i>
+                                        </div>
+                                        <div class="col-9">Free Shipping</div>
+                                    </div>
+                                    <div class="col-12 tier-button-wrapper">
+                                        <button pButton pRipple class="tier-button pro" type="button" label="SELECT PRO" (click)="selectTier('pro')"></button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="col-12 md:col-6 lg:col-4">
+                            <div class="card pro-plus">
+                                <div class="card-header">
+                                    <div class="grid">
+                                        <div class="col-7">
+                                            <h1>PRO+</h1>
+                                        </div>
+                                        <div class="col-5">
+                                            <h1>$50</h1>
+                                            <span>/m</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-content">
+                                    <div class="card-row grid">
+                                        <div class="col-3">
+                                            <i class="pi pi-fw pi-check"></i>
+                                        </div>
+                                        <div class="col-9">Responsive</div>
+                                    </div>
+                                    <div class="card-row grid">
+                                        <div class="col-3">
+                                            <i class="pi pi-fw pi-check"></i>
+                                        </div>
+                                        <div class="col-9">Push Messages</div>
+                                    </div>
+                                    <div class="card-row grid">
+                                        <div class="col-3">
+                                            <i class="pi pi-fw pi-check"></i>
+                                        </div>
+                                        <div class="col-9">7/24 Support</div>
+                                    </div>
+                                    <div class="card-row grid">
+                                        <div class="col-3">
+                                            <i class="pi pi-fw pi-check"></i>
+                                        </div>
+                                        <div class="col-9">Free Shipping</div>
+                                    </div>
+                                    <div class="card-row grid">
+                                        <div class="col-3">
+                                            <i class="pi pi-fw pi-check"></i>
+                                        </div>
+                                        <div class="col-9">Unlimited BW</div>
+                                    </div>
+                                    <div class="card-row grid">
+                                        <div class="col-3">
+                                            <i class="pi pi-fw pi-check"></i>
+                                        </div>
+                                        <div class="col-9">Special Gift Cards</div>
+                                    </div>
+                                    <div class="col-12 tier-button-wrapper">
+                                        <button pButton pRipple class="tier-button pro-plus" type="button" label="SELECT PRO+" (click)="selectTier('pro-plus')"></button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="wizard-card-content payment" [ngClass]="{'active-content': activeTab === 'payment'}">
+                    <div class="grid grid-nogutter">
+                        <div class="lg:col-8 col-12 payment-info">
+                            <div class="grid col" id="customPanel">
+                                    <div class="col-1 lg:col-1 md:col-1" style="line-height: 2em">
+                                        <p-radioButton name="group1" value="Credit" [(ngModel)]="radioButton1" inputId="credit"></p-radioButton>
+                                    </div>
+                                    <div class="col-11 lg:col-5 md:col-5">
+                                        <div class="credits">
+                                            <img src="assets/layout/images/extensions/asset-mastercard.svg" alt="ultima-layout" />
+                                            <img src="assets/layout/images/extensions/asset-visa.svg" alt="ultima-layout" />
+                                            <img src="assets/layout/images/extensions/asset-amex.svg" alt="ultima-layout" />
+                                        </div>
+                                    </div>
+                                    <div class="col-1 lg:col-1 md:col-1" style="line-height: 2em">
+                                        <p-radioButton name="group1" value="Paypal" [(ngModel)]="radioButton1" inputId="paypal"></p-radioButton>
+                                    </div>
+                                    <div class="col-11 lg:col-5 md:col-5">
+                                        <div class="paypal">
+                                            <img src="assets/layout/images/extensions/asset-paypal.svg" alt="ultima-layout" />
+                                        </div>
+                                    </div>
+                            </div>
+                            <div class="grid col">
+                                <div class="col-12">
+                                    <span class="p-float-label">
+                                        <input pInputText type="text"/>
+                                        <label>Card Holder Name </label>
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="grid col">
+                                <div class="col-6">
+                                    <span class="p-float-label">
+                                        <input pInputText type="text"/>
+                                        <label>Card No</label>
+                                    </span>
+                                </div>
+                                <div class="col-3">
+                                    <span class="p-float-label">
+                                        <input pInputText type="text"/>
+                                        <label>Date</label>
+                                    </span>
+                                </div>
+                                <div class="col-3">
+                                    <span class="p-float-label">
+                                        <input pInputText type="text"/>
+                                        <label>CCV</label>
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="grid col check-info">
+                                <p-checkbox [(ngModel)]="checked" binary="true" label="Save credit card information for future usage"></p-checkbox>
+                            </div>
+                        </div>
+                        <div class="lg:col-4 col-12 order-info">
+                            <div class="grid col">
+                                <div class="col-12">
+                                    <h1>ORDER SUMMARY</h1>
+                                </div>
+                            </div>
+                            <div class="order order-default" [ngClass]="{'selected-order': activeCard === ''}">
+                                <div class="grid col">
+                                    <div class="col-8">Tier - </div>
+                                    <div class="col-4 price">$0.00</div>
+                                    <div class="col-8">VAT (%18)</div>
+                                    <div class="col-4 price">$0.00</div>
+                                </div>
+                                <div class="grid col total">
+                                    <div class="col-8">Total</div>
+                                    <div class="col-4 price">$0.00</div>
+                                    <div class="col-12">
+                                        Please select one tier.
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="order order-basic" [ngClass]="{'selected-order': activeCard === 'basic'}">
+                                <div class="grid col">
+                                    <div class="col-8">Tier - Basic</div>
+                                    <div class="col-4 price">$5.00</div>
+                                    <div class="col-8">VAT (%18)</div>
+                                    <div class="col-4 price">$0.90</div>
+                                </div>
+                                <div class="grid col total">
+                                    <div class="col-8">Total</div>
+                                    <div class="col-4 price">$5.90</div>
+                                    <div class="col-12">
+                                        <p-button type="button" label="CONFIRM ORDER" styleClass="buy-button" ></p-button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="order order-pro" [ngClass]="{'selected-order': activeCard === 'pro'}">
+                                <div class="grid col">
+                                    <div class="col-8">Tier - Pro</div>
+                                    <div class="col-4 price">$25.00</div>
+                                    <div class="col-8">VAT (%18)</div>
+                                    <div class="col-4 price">$4.50</div>
+                                </div>
+                                <div class="grid col total">
+                                    <div class="col-8">Total</div>
+                                    <div class="col-4 price">$29.50</div>
+                                    <div class="col-12">
+                                        <p-button type="button" label="CONFIRM ORDER" styleClass="buy-button" ></p-button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="order order-pro-plus" [ngClass]="{'selected-order': activeCard === 'pro-plus'}">
+                                <div class="grid col">
+                                    <div class="col-8">Tier - Pro+</div>
+                                    <div class="col-4 price">$50.00</div>
+                                    <div class="col-8">VAT (%18)</div>
+                                    <div class="col-4 price">$9.00</div>
+                                </div>
+                                <div class="grid col total">
+                                    <div class="col-8">Total</div>
+                                    <div class="col-4 price">$59.00</div>
+                                    <div class="col-12">
+                                        <p-button type="button" label="CONFIRM ORDER" styleClass="buy-button" ></p-button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+
+            </div>
+        </div>
+    </div>
+</body>

Angular/src/app/pages/app.wizard.component.ts

@@ -0,0 +1,109 @@
+import {Component} from '@angular/core';
+import {SelectItem} from 'primeng/api';
+import {state, style, trigger} from '@angular/animations';
+
+@Component({
+    selector: 'app-wizard',
+    templateUrl: './app.wizard.component.html',
+    animations: [
+        trigger('tabBar', [
+            state('register', style({
+                width: '33.3333%',
+                left: '0'
+            })),
+            state('tier', style({
+                width: '33.3333%',
+                left: '33.3333%'
+            })),
+            state('payment', style({
+                width: '33.3333%',
+                left: '66.6667%'
+            }))
+        ])
+    ]
+})
+export class AppWizardComponent {
+
+    activeTab = 'register';
+
+    activeCard = '';
+
+    dropdownOptions1: SelectItem[];
+
+    dropdownOptions2: SelectItem[];
+
+    selectDropdownOptions1: any;
+
+    selectDropdownOptions2: any;
+
+    birthdate: Date;
+
+    checked = false;
+
+    radioButton1: string;
+
+    constructor() {
+        this.dropdownOptions1 = [
+            {label: 'Select Time Zone', value: null},
+            {label: 'UTC-12.00', value: {id: 1, name: 'UTC-12.00', code: '-12'}},
+            {label: 'UTC-11.00', value: {id: 2, name: 'UTC-11.00', code: '-11'}},
+            {label: 'UTC-10.00', value: {id: 3, name: 'UTC-10.00', code: '-10'}},
+            {label: 'UTC-09.30', value: {id: 4, name: 'UTC-09.30', code: '-93'}},
+            {label: 'UTC-09.00', value: {id: 5, name: 'UTC-09.00', code: '-09'}},
+            {label: 'UTC-08.00', value: {id: 6, name: 'UTC-08.00', code: '-08'}},
+            {label: 'UTC-07.00', value: {id: 7, name: 'UTC-07.00', code: '-07'}},
+            {label: 'UTC-06.00', value: {id: 8, name: 'UTC-06.00', code: '-06'}},
+            {label: 'UTC-05.00', value: {id: 9, name: 'UTC-05.00', code: '-05'}},
+            {label: 'UTC-04.00', value: {id: 10, name: 'UTC-04.00', code: '-04'}},
+            {label: 'UTC-03.30', value: {id: 11, name: 'UTC-03.30', code: '-33'}},
+            {label: 'UTC-03.00', value: {id: 12, name: 'UTC-03.00', code: '-03'}},
+            {label: 'UTC-02.00', value: {id: 13, name: 'UTC-02.00', code: '-02'}},
+            {label: 'UTC-01.00', value: {id: 14, name: 'UTC-01.00', code: '-01'}},
+            {label: 'UTC-+00.00', value: {id: 15, name: 'UTC-+00.00', code: '-00'}},
+            {label: 'UTC+01.00', value: {id: 16, name: 'UTC+01.00', code: '+01'}},
+            {label: 'UTC+02.00', value: {id: 17, name: 'UTC+02.00', code: '+02'}},
+            {label: 'UTC+03.00', value: {id: 18, name: 'UTC+03.00', code: '+03'}},
+            {label: 'UTC+03.30', value: {id: 19, name: 'UTC+03.30', code: '+33'}},
+            {label: 'UTC+04.00', value: {id: 20, name: 'UTC+04.00', code: '+04'}},
+            {label: 'UTC+04.30', value: {id: 21, name: 'UTC+04.30', code: '+43'}},
+            {label: 'UTC+05.00', value: {id: 22, name: 'UTC+05.00', code: '+05'}},
+            {label: 'UTC+05.30', value: {id: 23, name: 'UTC+05.30', code: '+53'}},
+            {label: 'UTC+05.45', value: {id: 24, name: 'UTC+05.45', code: '+54'}},
+            {label: 'UTC+06.00', value: {id: 25, name: 'UTC+06.00', code: '+06'}},
+            {label: 'UTC+06.30', value: {id: 26, name: 'UTC+06.30', code: '+63'}},
+            {label: 'UTC+07.00', value: {id: 27, name: 'UTC+07.00', code: '+07'}},
+            {label: 'UTC+08.00', value: {id: 28, name: 'UTC+08.00', code: '+08'}},
+            {label: 'UTC+08.45', value: {id: 29, name: 'UTC+08.45', code: '+84'}},
+            {label: 'UTC+09.00', value: {id: 30, name: 'UTC+09.00', code: '+09'}},
+            {label: 'UTC+09.30', value: {id: 31, name: 'UTC+09.30', code: '+93'}},
+            {label: 'UTC+10.00', value: {id: 32, name: 'UTC+10.00', code: '+10'}},
+            {label: 'UTC+10.30', value: {id: 33, name: 'UTC+10.30', code: '+13'}},
+            {label: 'UTC+11.00', value: {id: 34, name: 'UTC+01.00', code: '+11'}},
+            {label: 'UTC+12.00', value: {id: 35, name: 'UTC+01.00', code: '+12'}},
+            {label: 'UTC+12.45', value: {id: 36, name: 'UTC+01.00', code: '+24'}},
+            {label: 'UTC+13.00', value: {id: 37, name: 'UTC+01.00', code: '+13'}},
+            {label: 'UTC+14.00', value: {id: 38, name: 'UTC+01.00', code: '+14'}},
+        ];
+
+        this.dropdownOptions2 = [
+            {label: 'Where did you hear Ultima', value: null},
+            {label: 'Blogs', value: 'Blogs'},
+            {label: 'Google Ads', value: 'google'},
+            {label: 'Your Forum', value: 'prime-forum'},
+            {label: 'Youtube', value: 'Youtube'},
+            {label: 'Reddit', value: 'Reddit'},
+            {label: 'Events', value: 'Events'},
+            {label: 'Other', value: 'Other'}
+        ];
+    }
+
+    clickNext(step) {
+        this.activeTab = step;
+    }
+
+    selectTier(card) {
+        this.activeCard = card;
+        this.activeTab = 'payment';
+    }
+
+}

Angular/src/app/pages/candidate/candidate-detail/candidate-detail.component.html

@@ -0,0 +1 @@
+<p>candidate-detail works!</p>

Angular/src/app/pages/candidate/candidate-detail/candidate-detail.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CandidateDetailComponent } from './candidate-detail.component';
+
+describe('CandidateDetailComponent', () => {
+  let component: CandidateDetailComponent;
+  let fixture: ComponentFixture<CandidateDetailComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CandidateDetailComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CandidateDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Angular/src/app/pages/candidate/candidate-detail/candidate-detail.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-candidate-detail',
+  templateUrl: './candidate-detail.component.html',
+  styleUrls: ['./candidate-detail.component.scss']
+})
+export class CandidateDetailComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

Angular/src/app/pages/candidate/candidate-list/candidate-list.component.html

@@ -0,0 +1,38 @@
+<div class="card">
+  <h5>Candidates List</h5>
+  <button [routerLink]="'/candidate/candidate-sidebar'" pButton pRipple type="button" label="Add" class="mr-2 mb-2"></button>
+  <p-table #dt  [value]="theCandidates" [paginator]="true" [rows]="5" [showCurrentPageReport]="true" responsiveLayout="scroll"
+      currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [rowsPerPageOptions]="[5,10,25,50]">
+      <ng-template pTemplate="header">
+          <tr>
+              <th>Id</th>
+              <th>First Name</th>
+              <th>Last Name</th>
+              <th>Emails</th>
+          </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-candidate>
+          <tr>
+              <td>{{candidate.id}}</td>
+              <td>{{candidate.firstname}}</td>
+              <td>{{candidate.lastname}}</td>
+              <td>
+                  <tr *ngFor="let ml of candidate.emails">
+                    <span>{{ml.email}}</span>
+                    <span> - {{ml.type}}</span>
+                  </tr>
+              </td>
+              <td>
+                <button pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" (click)="editProduct(candidate)"></button>
+                <button pButton pRipple icon="pi pi-trash" class="p-button-rounded p-button-warning" (click)="deleteProduct(candidate)"></button>
+             </td>
+          </tr>
+      </ng-template>
+      <ng-template pTemplate="paginatorleft">
+        <span class="p-float-label">
+          <input type="text" class="w-full" pInputText>
+          <label>Search</label>
+        </span>
+      </ng-template>
+  </p-table>
+</div>

Angular/src/app/pages/candidate/candidate-list/candidate-list.component.scss

@@ -0,0 +1,201 @@
+:host ::ng-deep {
+    .p-paginator {
+        .p-paginator-current {
+            margin-left: auto;
+        }
+    }
+
+    .p-progressbar {
+        height: .5rem;
+        background-color: #D8DADC;
+
+        .p-progressbar-value {
+            background-color: #607D8B;
+        }
+    }
+
+    .table-header {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .p-calendar .p-datepicker {
+        min-width: 25rem;
+
+        td {
+            font-weight: 400;
+        }
+    }
+
+    .p-datatable.p-datatable-customers {
+        .p-datatable-header {
+            padding: 1rem;
+            text-align: left;
+            font-size: 1.5rem;
+        }
+
+        .p-paginator {
+            padding: 1rem;
+        }
+
+        .p-datatable-thead > tr > th {
+            text-align: left;
+        }
+
+        .p-dropdown-label:not(.p-placeholder) {
+            text-transform: uppercase;
+        }
+    }
+
+    .p-datatable.p-datatable-customers:not(.p-datatable-gridlines) {
+        .p-datatable-tbody > tr > td {
+            cursor: auto;
+        }
+    }
+
+    /* Responsive */
+    .p-datatable-customers .p-datatable-tbody > tr > td .p-column-title {
+        display: none;
+    }
+}
+
+.customer-badge {
+    border-radius: 2px;
+    padding: .25em .5rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: .3px;
+
+    &.status-qualified {
+        background: #C8E6C9;
+        color: #256029;
+    }
+
+    &.status-unqualified {
+        background: #FFCDD2;
+        color: #C63737;
+    }
+
+    &.status-negotiation {
+        background: #FEEDAF;
+        color: #8A5340;
+    }
+
+    &.status-new {
+        background: #B3E5FC;
+        color: #23547B;
+    }
+
+    &.status-renewal {
+        background: #ECCFFF;
+        color: #694382;
+    }
+
+    &.status-proposal {
+        background: #FFD8B2;
+        color: #805B36;
+    }
+}
+
+.product-badge {
+    border-radius: 2px;
+    padding: .25em .5rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: .3px;
+
+    &.status-instock {
+        background: #C8E6C9;
+        color: #256029;
+    }
+
+    &.status-outofstock {
+        background: #FFCDD2;
+        color: #C63737;
+    }
+
+    &.status-lowstock {
+        background: #FEEDAF;
+        color: #8A5340;
+    }
+}
+
+.order-badge {
+    border-radius: 2px;
+    padding: .25em .5rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: .3px;
+
+    &.order-delivered {
+        background: #C8E6C9;
+        color: #256029;
+    }
+
+    &.order-cancelled {
+        background: #FFCDD2;
+        color: #C63737;
+    }
+
+    &.order-pending {
+        background: #FEEDAF;
+        color: #8A5340;
+    }
+
+    &.order-returned {
+        background: #ECCFFF;
+        color: #694382;
+    }
+}
+
+.global-filter-label {
+    font-size: 1rem;
+    font-weight: normal;
+
+    .p-float-label input:focus ~ label {
+        font-size: 12px;
+    }
+}
+
+@media screen and (max-width: 960px) {
+    :host ::ng-deep {
+        .p-datatable {
+            &.p-datatable-customers {
+                .p-datatable-thead > tr > th,
+                .p-datatable-tfoot > tr > td {
+                    display: none !important;
+                }
+
+                .p-datatable-tbody > tr {
+                    border-bottom: 1px solid var(--surface-d);
+
+                    > td {
+                        text-align: left;
+                        display: block;
+                        border: 0 none !important;
+                        width: 100% !important;
+                        float: left;
+                        clear: left;
+                        border: 0 none;
+
+                        .p-column-title {
+                            padding: .4rem;
+                            min-width: 30%;
+                            display: inline-block;
+                            margin: -.4rem 1rem -.4rem -.4rem;
+                            font-weight: bold;
+                        }
+
+                        .p-progressbar {
+                            margin-top: .5rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+}

Angular/src/app/pages/candidate/candidate-list/candidate-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CandidateListComponent } from './candidate-list.component';
+
+describe('CandidateListComponent', () => {
+  let component: CandidateListComponent;
+  let fixture: ComponentFixture<CandidateListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CandidateListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CandidateListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});