From 6769826e5ba9a2fffdd00a4b1956a7c606b3f027 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 16 Oct 2022 13:29:59 +0300
Subject: [PATCH] Update uikit samples and bumped PrimeNG

---
 package.json                                  |  4 +-
 src/app/app-routing.module.ts                 |  6 +-
 .../uikit/button/buttondemo-routing.module.ts |  8 +-
 .../uikit/button/buttondemo.component.ts      |  1 +
 .../uikit/button/buttondemo.module.ts         | 18 ++---
 .../uikit/charts/chartsdemo.component.ts      |  1 +
 .../uikit/file/filedemo-routing.module.ts     |  8 +-
 .../uikit/file/filedemo.component.html        |  0
 .../uikit/file/filedemo.component.ts          |  3 +-
 .../components/uikit/file/filedemo.module.ts  | 15 ++--
 .../floatlabeldemo-routing.module.ts          |  8 +-
 .../floatlabel/floatlabeldemo.component.ts    | 10 +--
 .../uikit/floatlabel/floatlabeldemo.module.ts | 32 ++++----
 .../formlayout/formlayout-routing.module.ts   | 11 ---
 .../uikit/formlayout/formlayout.component.ts  | 15 ----
 .../uikit/formlayout/formlayout.module.ts     | 24 ------
 .../formlayoutdemo-routing.module.ts          | 11 +++
 ...ent.html => formlayoutdemo.component.html} |  1 -
 .../formlayout/formlayoutdemo.component.ts    | 32 ++++++++
 .../uikit/formlayout/formlayoutdemo.module.ts | 35 +++++++++
 .../uikit/input/inputdemo.component.ts        |  1 +
 .../uikit/input/inputdemo.module.ts           | 56 +++++++-------
 .../invalidstatedemo-routing.module.ts        |  8 +-
 .../invalid/invalidstatedemo.component.ts     |  1 +
 .../uikit/invalid/invalidstatedemo.module.ts  | 34 ++++----
 .../uikit/list/listdemo-routing.module.ts     |  8 +-
 .../uikit/list/listdemo.component.ts          |  1 +
 .../components/uikit/list/listdemo.module.ts  | 26 +++----
 .../uikit/media/mediademo-routing.module.ts   |  8 +-
 .../uikit/media/mediademo.component.ts        |  5 +-
 .../uikit/media/mediademo.module.ts           | 18 ++---
 .../uikit/menus/confirmation.component.ts     | 16 ++--
 .../uikit/menus/menus.component.html          |  0
 .../components/uikit/menus/menus.component.ts |  4 +-
 .../components/uikit/menus/menus.module.ts    | 77 +++++++++----------
 .../uikit/menus/payment.component.ts          | 18 +++--
 .../uikit/menus/personal.component.ts         | 18 +++--
 .../components/uikit/menus/seat.component.ts  | 18 +++--
 .../messages/messagesdemo-routing.module.ts   |  8 +-
 .../messages/messagesdemo.component.html      |  0
 .../uikit/messages/messagesdemo.component.ts  |  1 +
 .../uikit/messages/messagesdemo.module.ts     | 20 ++---
 .../uikit/misc/miscdemo-routing.module.ts     |  8 +-
 .../uikit/misc/miscdemo.component.html        |  0
 .../uikit/misc/miscdemo.component.ts          |  1 +
 .../components/uikit/misc/miscdemo.module.ts  | 30 ++++----
 .../overlays/overlaysdemo-routing.module.ts   |  8 +-
 .../overlays/overlaysdemo.component.html      | 12 +--
 .../uikit/overlays/overlaysdemo.component.ts  |  1 +
 .../uikit/overlays/overlaysdemo.module.ts     | 35 ++++-----
 .../uikit/panels/panelsdemo-routing.module.ts |  8 +-
 .../uikit/panels/panelsdemo.component.html    |  0
 .../uikit/panels/panelsdemo.component.ts      |  1 +
 .../uikit/panels/panelsdemo.module.ts         | 36 ++++-----
 .../uikit/table/tabledemo-routing.module.ts   |  8 +-
 .../uikit/table/tabledemo.component.html      | 32 ++++----
 .../uikit/table/tabledemo.component.ts        | 11 +--
 .../uikit/table/tabledemo.module.ts           | 34 ++++----
 .../uikit/tree/treedemo.component.ts          |  4 +-
 .../components/uikit/tree/treedemo.module.ts  | 16 ++--
 .../components/uikit/uikit-routing.module.ts  | 34 ++++----
 src/app/demo/components/uikit/uikit.module.ts | 13 ++--
 62 files changed, 461 insertions(+), 420 deletions(-)
 mode change 100644 => 100755 src/app/demo/components/uikit/file/filedemo.component.html
 mode change 100644 => 100755 src/app/demo/components/uikit/file/filedemo.component.ts
 delete mode 100644 src/app/demo/components/uikit/formlayout/formlayout-routing.module.ts
 delete mode 100644 src/app/demo/components/uikit/formlayout/formlayout.component.ts
 delete mode 100644 src/app/demo/components/uikit/formlayout/formlayout.module.ts
 create mode 100644 src/app/demo/components/uikit/formlayout/formlayoutdemo-routing.module.ts
 rename src/app/demo/components/uikit/formlayout/{formlayout.component.html => formlayoutdemo.component.html} (99%)
 create mode 100644 src/app/demo/components/uikit/formlayout/formlayoutdemo.component.ts
 create mode 100644 src/app/demo/components/uikit/formlayout/formlayoutdemo.module.ts
 mode change 100644 => 100755 src/app/demo/components/uikit/menus/menus.component.html
 mode change 100644 => 100755 src/app/demo/components/uikit/menus/menus.component.ts
 mode change 100644 => 100755 src/app/demo/components/uikit/messages/messagesdemo.component.html
 mode change 100644 => 100755 src/app/demo/components/uikit/messages/messagesdemo.component.ts
 mode change 100644 => 100755 src/app/demo/components/uikit/misc/miscdemo.component.html
 mode change 100644 => 100755 src/app/demo/components/uikit/misc/miscdemo.component.ts
 mode change 100644 => 100755 src/app/demo/components/uikit/overlays/overlaysdemo.component.html
 mode change 100644 => 100755 src/app/demo/components/uikit/overlays/overlaysdemo.component.ts
 mode change 100644 => 100755 src/app/demo/components/uikit/panels/panelsdemo.component.html
 mode change 100644 => 100755 src/app/demo/components/uikit/panels/panelsdemo.component.ts

diff --git a/package.json b/package.json
index 699794c..d60d0d7 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
         "chart.js": "^3.3.2",
         "primeflex": "^3.2.0",
         "primeicons": "6.0.1",
-        "primeng": "14.1.1",
+        "primeng": "14.1.2",
         "prismjs": "1.9.0",
         "rxjs": "~7.5.0",
         "tslib": "^2.3.0",
@@ -30,7 +30,7 @@
         "zone.js": "~0.11.4"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "~14.0.3",
+        "@angular-devkit/build-angular": "^14.2.6",
         "@angular/cli": "~14.0.3",
         "@angular/compiler-cli": "~14.0.0",
         "@types/jasmine": "~3.10.0",
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index c2abf5f..8329ae5 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -10,12 +10,12 @@ import { AppLayoutComponent } from "./layout/app.layout.component";
                 path: '', component: AppLayoutComponent,
                 children: [
                     { path: '', loadChildren: () => import('./demo/components/dashboard/dashboard.module').then(m => m.DashboardModule) },
-                    { path: 'uikit', loadChildren: () => import('./demo/components/uikit/uikit.module').then(m => m.UikitModule) },
+                    { path: 'uikit', loadChildren: () => import('./demo/components/uikit/uikit.module').then(m => m.UIkitModule) },
                     { path: 'utilities', loadChildren: () => import('./demo/components/utilities/utilities.module').then(m => m.UtilitiesModule) },
                     { path: 'documentation', loadChildren: () => import('./demo/components/documentation/documentation.module').then(m => m.DocumentationModule) },
                     { path: 'blocks', loadChildren: () => import('./demo/components/primeblocks/primeblocks.module').then(m => m.PrimeBlocksModule) },
-                    { path: 'pages', loadChildren: () => import('./demo/components/pages/pages.module').then(m => m.PagesModule) },
-                ],
+                    { path: 'pages', loadChildren: () => import('./demo/components/pages/pages.module').then(m => m.PagesModule) }
+                ]
             },
             { path: 'auth', loadChildren: () => import('./demo/components/auth/auth.module').then(m => m.AuthModule) },
             { path: 'landing', loadChildren: () => import('./demo/components/landing/landing.module').then(m => m.LandingModule) },
diff --git a/src/app/demo/components/uikit/button/buttondemo-routing.module.ts b/src/app/demo/components/uikit/button/buttondemo-routing.module.ts
index 9629314..28bec84 100644
--- a/src/app/demo/components/uikit/button/buttondemo-routing.module.ts
+++ b/src/app/demo/components/uikit/button/buttondemo-routing.module.ts
@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { ButtonDemoComponent } from './buttondemo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: ButtonDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: ButtonDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class ButtonDemoRoutingModule { }
diff --git a/src/app/demo/components/uikit/button/buttondemo.component.ts b/src/app/demo/components/uikit/button/buttondemo.component.ts
index 4d9a0f0..43b8486 100644
--- a/src/app/demo/components/uikit/button/buttondemo.component.ts
+++ b/src/app/demo/components/uikit/button/buttondemo.component.ts
@@ -24,4 +24,5 @@ export class ButtonDemoComponent implements OnInit {
         this.loading[index] = true;
         setTimeout(() => this.loading[index] = false, 1000);
     }
+    
 }
diff --git a/src/app/demo/components/uikit/button/buttondemo.module.ts b/src/app/demo/components/uikit/button/buttondemo.module.ts
index 719e218..a902360 100644
--- a/src/app/demo/components/uikit/button/buttondemo.module.ts
+++ b/src/app/demo/components/uikit/button/buttondemo.module.ts
@@ -8,14 +8,14 @@ import { SplitButtonModule } from 'primeng/splitbutton';
 import { ToggleButtonModule } from 'primeng/togglebutton';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        ButtonDemoRoutingModule,
-        ButtonModule,
-        RippleModule,
-        SplitButtonModule,
-        ToggleButtonModule,
-    ],
-    declarations: [ButtonDemoComponent]
+	imports: [
+		CommonModule,
+		ButtonDemoRoutingModule,
+		ButtonModule,
+		RippleModule,
+		SplitButtonModule,
+		ToggleButtonModule,
+	],
+	declarations: [ButtonDemoComponent]
 })
 export class ButtonDemoModule { }
diff --git a/src/app/demo/components/uikit/charts/chartsdemo.component.ts b/src/app/demo/components/uikit/charts/chartsdemo.component.ts
index 56b97ee..c7b3c70 100755
--- a/src/app/demo/components/uikit/charts/chartsdemo.component.ts
+++ b/src/app/demo/components/uikit/charts/chartsdemo.component.ts
@@ -265,4 +265,5 @@ export class ChartsDemoComponent implements OnInit {
             this.subscription.unsubscribe();
         }
     }
+    
 }
diff --git a/src/app/demo/components/uikit/file/filedemo-routing.module.ts b/src/app/demo/components/uikit/file/filedemo-routing.module.ts
index 755982d..68b13f1 100644
--- a/src/app/demo/components/uikit/file/filedemo-routing.module.ts
+++ b/src/app/demo/components/uikit/file/filedemo-routing.module.ts
@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { FileDemoComponent } from './filedemo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: FileDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: FileDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class FileDemoRoutingModule { }
diff --git a/src/app/demo/components/uikit/file/filedemo.component.html b/src/app/demo/components/uikit/file/filedemo.component.html
old mode 100644
new mode 100755
diff --git a/src/app/demo/components/uikit/file/filedemo.component.ts b/src/app/demo/components/uikit/file/filedemo.component.ts
old mode 100644
new mode 100755
index d6bf418..d0eeb9b
--- a/src/app/demo/components/uikit/file/filedemo.component.ts
+++ b/src/app/demo/components/uikit/file/filedemo.component.ts
@@ -9,7 +9,7 @@ export class FileDemoComponent {
 
     uploadedFiles: any[] = [];
 
-    constructor(private messageService: MessageService) { }
+    constructor(private messageService: MessageService) {}
 
     onUpload(event: any) {
         for (const file of event.files) {
@@ -22,4 +22,5 @@ export class FileDemoComponent {
     onBasicUpload() {
         this.messageService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode' });
     }
+
 }
diff --git a/src/app/demo/components/uikit/file/filedemo.module.ts b/src/app/demo/components/uikit/file/filedemo.module.ts
index ba2e017..0d4205f 100644
--- a/src/app/demo/components/uikit/file/filedemo.module.ts
+++ b/src/app/demo/components/uikit/file/filedemo.module.ts
@@ -5,13 +5,14 @@ import { FileUploadModule } from 'primeng/fileupload';
 import { FileDemoRoutingModule } from './filedemo-routing.module';
 import { FileDemoComponent } from './filedemo.component';
 
+
 @NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        FileDemoRoutingModule,
-        FileUploadModule
-    ],
-    declarations: [FileDemoComponent],
+	imports: [
+		CommonModule,
+		FormsModule,
+		FileDemoRoutingModule,
+		FileUploadModule
+	],
+	declarations: [FileDemoComponent],
 })
 export class FileDemoModule { }
diff --git a/src/app/demo/components/uikit/floatlabel/floatlabeldemo-routing.module.ts b/src/app/demo/components/uikit/floatlabel/floatlabeldemo-routing.module.ts
index 5954506..a4190df 100644
--- a/src/app/demo/components/uikit/floatlabel/floatlabeldemo-routing.module.ts
+++ b/src/app/demo/components/uikit/floatlabel/floatlabeldemo-routing.module.ts
@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { FloatLabelDemoComponent } from './floatlabeldemo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: FloatLabelDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: FloatLabelDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class FloatlabelDemoRoutingModule { }
diff --git a/src/app/demo/components/uikit/floatlabel/floatlabeldemo.component.ts b/src/app/demo/components/uikit/floatlabel/floatlabeldemo.component.ts
index de7716d..6680a32 100644
--- a/src/app/demo/components/uikit/floatlabel/floatlabeldemo.component.ts
+++ b/src/app/demo/components/uikit/floatlabel/floatlabeldemo.component.ts
@@ -38,11 +38,11 @@ export class FloatLabelDemoComponent implements OnInit {
 
     constructor(private countryService: CountryService) {
         this.cities = [
-            { name: 'New York', code: 'NY' },
-            { name: 'Rome', code: 'RM' },
-            { name: 'London', code: 'LDN' },
-            { name: 'Istanbul', code: 'IST' },
-            { name: 'Paris', code: 'PRS' }
+            {name: 'New York', code: 'NY'},
+            {name: 'Rome', code: 'RM'},
+            {name: 'London', code: 'LDN'},
+            {name: 'Istanbul', code: 'IST'},
+            {name: 'Paris', code: 'PRS'}
         ];
     }
 
diff --git a/src/app/demo/components/uikit/floatlabel/floatlabeldemo.module.ts b/src/app/demo/components/uikit/floatlabel/floatlabeldemo.module.ts
index 6efed5a..a7816d3 100644
--- a/src/app/demo/components/uikit/floatlabel/floatlabeldemo.module.ts
+++ b/src/app/demo/components/uikit/floatlabel/floatlabeldemo.module.ts
@@ -15,21 +15,21 @@ import { InputTextareaModule } from "primeng/inputtextarea";
 import { InputTextModule } from "primeng/inputtext";
 
 @NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        FloatlabelDemoRoutingModule,
-        AutoCompleteModule,
-        CalendarModule,
-        ChipsModule,
-        DropdownModule,
-        InputMaskModule,
-        InputNumberModule,
-        CascadeSelectModule,
-        MultiSelectModule,
-        InputTextareaModule,
-        InputTextModule
-    ],
-    declarations: [FloatLabelDemoComponent]
+	imports: [
+		CommonModule,
+		FormsModule,
+		FloatlabelDemoRoutingModule,
+		AutoCompleteModule,
+		CalendarModule,
+		ChipsModule,
+		DropdownModule,
+		InputMaskModule,
+		InputNumberModule,
+		CascadeSelectModule,
+		MultiSelectModule,
+		InputTextareaModule,
+		InputTextModule
+	],
+	declarations: [FloatLabelDemoComponent]
 })
 export class FloatlabelDemoModule { }
diff --git a/src/app/demo/components/uikit/formlayout/formlayout-routing.module.ts b/src/app/demo/components/uikit/formlayout/formlayout-routing.module.ts
deleted file mode 100644
index f8f7a34..0000000
--- a/src/app/demo/components/uikit/formlayout/formlayout-routing.module.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { FormLayoutComponent } from './formlayout.component';
-
-@NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: FormLayoutComponent }
-    ])],
-    exports: [RouterModule]
-})
-export class FormlayoutRoutingModule { }
diff --git a/src/app/demo/components/uikit/formlayout/formlayout.component.ts b/src/app/demo/components/uikit/formlayout/formlayout.component.ts
deleted file mode 100644
index e8e02db..0000000
--- a/src/app/demo/components/uikit/formlayout/formlayout.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    templateUrl: './formlayout.component.html'
-})
-export class FormLayoutComponent {
-
-    selectedState: any;
-
-    dropdownItems = [
-        { name: 'Option 1', code: 'Option 1' },
-        { name: 'Option 2', code: 'Option 2' },
-        { name: 'Option 3', code: 'Option 3' }
-    ];
-}
diff --git a/src/app/demo/components/uikit/formlayout/formlayout.module.ts b/src/app/demo/components/uikit/formlayout/formlayout.module.ts
deleted file mode 100644
index d4d852c..0000000
--- a/src/app/demo/components/uikit/formlayout/formlayout.module.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormLayoutComponent } from './formlayout.component';
-import { DropdownModule } from 'primeng/dropdown';
-import { FormsModule } from '@angular/forms';
-import { FormlayoutRoutingModule } from './formlayout-routing.module';
-import { InputTextModule } from 'primeng/inputtext';
-import { ButtonModule } from 'primeng/button';
-import { InputTextareaModule } from 'primeng/inputtextarea';
-
-
-@NgModule({
-    imports: [
-        CommonModule,
-        DropdownModule,
-        FormsModule,
-        InputTextModule,
-        InputTextareaModule,
-        ButtonModule,
-        FormlayoutRoutingModule
-    ],
-    declarations: [FormLayoutComponent]
-})
-export class FormlayoutModule { }
diff --git a/src/app/demo/components/uikit/formlayout/formlayoutdemo-routing.module.ts b/src/app/demo/components/uikit/formlayout/formlayoutdemo-routing.module.ts
new file mode 100644
index 0000000..07cd104
--- /dev/null
+++ b/src/app/demo/components/uikit/formlayout/formlayoutdemo-routing.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { FormLayoutDemoComponent } from './formlayoutdemo.component';
+
+@NgModule({
+	imports: [RouterModule.forChild([
+		{ path: '', component: FormLayoutDemoComponent }
+	])],
+	exports: [RouterModule]
+})
+export class FormLayoutDemoRoutingModule { }
diff --git a/src/app/demo/components/uikit/formlayout/formlayout.component.html b/src/app/demo/components/uikit/formlayout/formlayoutdemo.component.html
similarity index 99%
rename from src/app/demo/components/uikit/formlayout/formlayout.component.html
rename to src/app/demo/components/uikit/formlayout/formlayoutdemo.component.html
index c3d83ff..e8570fe 100644
--- a/src/app/demo/components/uikit/formlayout/formlayout.component.html
+++ b/src/app/demo/components/uikit/formlayout/formlayoutdemo.component.html
@@ -14,7 +14,6 @@
 				<label htmlFor="age1">Age</label>
 				<input pInputText id="age1" type="text" />
 			</div>
-
 		</div>
 		
 		<div class="card p-fluid">
diff --git a/src/app/demo/components/uikit/formlayout/formlayoutdemo.component.ts b/src/app/demo/components/uikit/formlayout/formlayoutdemo.component.ts
new file mode 100644
index 0000000..9e20107
--- /dev/null
+++ b/src/app/demo/components/uikit/formlayout/formlayoutdemo.component.ts
@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+
+@Component({
+    templateUrl: './formlayoutdemo.component.html'
+})
+export class FormLayoutDemoComponent {
+
+    selectedState: any = null;
+
+    states: any[] = [
+        {name: 'Arizona', code: 'Arizona'},
+        {name: 'California', value: 'California'},
+        {name: 'Florida', code: 'Florida'},
+        {name: 'Ohio', code: 'Ohio'},
+        {name: 'Washington', code: 'Washington'}
+    ];
+
+    dropdownItems = [
+        { name: 'Option 1', code: 'Option 1' },
+        { name: 'Option 2', code: 'Option 2' },
+        { name: 'Option 3', code: 'Option 3' }
+    ];
+
+    cities1: any[] = [];
+
+    cities2: any[] = [];
+
+    city1: any = null;
+
+    city2: any = null;
+
+}
diff --git a/src/app/demo/components/uikit/formlayout/formlayoutdemo.module.ts b/src/app/demo/components/uikit/formlayout/formlayoutdemo.module.ts
new file mode 100644
index 0000000..248f351
--- /dev/null
+++ b/src/app/demo/components/uikit/formlayout/formlayoutdemo.module.ts
@@ -0,0 +1,35 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FormLayoutDemoComponent } from './formlayoutdemo.component';
+import { FormLayoutDemoRoutingModule } from './formlayoutdemo-routing.module';
+import { AutoCompleteModule } from "primeng/autocomplete";
+import { CalendarModule } from "primeng/calendar";
+import { ChipsModule } from "primeng/chips";
+import { DropdownModule } from "primeng/dropdown";
+import { InputMaskModule } from "primeng/inputmask";
+import { InputNumberModule } from "primeng/inputnumber";
+import { CascadeSelectModule } from "primeng/cascadeselect";
+import { MultiSelectModule } from "primeng/multiselect";
+import { InputTextareaModule } from "primeng/inputtextarea";
+import { InputTextModule } from "primeng/inputtext";
+
+@NgModule({
+	imports: [
+		CommonModule,
+		FormsModule,
+		FormLayoutDemoRoutingModule,
+		AutoCompleteModule,
+		CalendarModule,
+		ChipsModule,
+		DropdownModule,
+		InputMaskModule,
+		InputNumberModule,
+		CascadeSelectModule,
+		MultiSelectModule,
+		InputTextareaModule,
+		InputTextModule
+	],
+	declarations: [FormLayoutDemoComponent]
+})
+export class FormLayoutDemoModule { }
diff --git a/src/app/demo/components/uikit/input/inputdemo.component.ts b/src/app/demo/components/uikit/input/inputdemo.component.ts
index 501b6ad..44e74a5 100644
--- a/src/app/demo/components/uikit/input/inputdemo.component.ts
+++ b/src/app/demo/components/uikit/input/inputdemo.component.ts
@@ -6,6 +6,7 @@ import { CountryService } from 'src/app/demo/service/country.service';
     templateUrl: './inputdemo.component.html'
 })
 export class InputDemoComponent implements OnInit {
+    
     countries: any[] = [];
 
     filteredCountries: any[] = [];
diff --git a/src/app/demo/components/uikit/input/inputdemo.module.ts b/src/app/demo/components/uikit/input/inputdemo.module.ts
index c6da137..b19d7c9 100644
--- a/src/app/demo/components/uikit/input/inputdemo.module.ts
+++ b/src/app/demo/components/uikit/input/inputdemo.module.ts
@@ -27,33 +27,33 @@ import { ToggleButtonModule } from 'primeng/togglebutton';
 import { SliderModule } from 'primeng/slider';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        InputDemoRoutingModule,
-        AutoCompleteModule,
-        CalendarModule,
-        ChipsModule,
-        DropdownModule,
-        InputMaskModule,
-        InputNumberModule,
-        ColorPickerModule,
-        CascadeSelectModule,
-        MultiSelectModule,
-        ToggleButtonModule,
-        SliderModule,
-        InputTextareaModule,
-        RadioButtonModule,
-        InputTextModule,
-        RatingModule,
-        ChipModule,
-        KnobModule,
-        InputSwitchModule,
-        ListboxModule,
-        SelectButtonModule,
-        CheckboxModule,
-        ButtonModule
-    ],
-    declarations: [InputDemoComponent]
+	imports: [
+		CommonModule,
+		FormsModule,
+		InputDemoRoutingModule,
+		AutoCompleteModule,
+		CalendarModule,
+		ChipsModule,
+		DropdownModule,
+		InputMaskModule,
+		InputNumberModule,
+		ColorPickerModule,
+		CascadeSelectModule,
+		MultiSelectModule,
+		ToggleButtonModule,
+		SliderModule,
+		InputTextareaModule,
+		RadioButtonModule,
+		InputTextModule,
+		RatingModule,
+		ChipModule,
+		KnobModule,
+		InputSwitchModule,
+		ListboxModule,
+		SelectButtonModule,
+		CheckboxModule,
+		ButtonModule
+	],
+	declarations: [InputDemoComponent]
 })
 export class InputDemoModule { }
diff --git a/src/app/demo/components/uikit/invalid/invalidstatedemo-routing.module.ts b/src/app/demo/components/uikit/invalid/invalidstatedemo-routing.module.ts
index f9889d9..84a92dd 100644
--- a/src/app/demo/components/uikit/invalid/invalidstatedemo-routing.module.ts
+++ b/src/app/demo/components/uikit/invalid/invalidstatedemo-routing.module.ts
@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { InvalidStateDemoComponent } from './invalidstatedemo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: InvalidStateDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: InvalidStateDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class InvalidStateDemoRoutingModule { }
diff --git a/src/app/demo/components/uikit/invalid/invalidstatedemo.component.ts b/src/app/demo/components/uikit/invalid/invalidstatedemo.component.ts
index 6093d86..7c48ae0 100644
--- a/src/app/demo/components/uikit/invalid/invalidstatedemo.component.ts
+++ b/src/app/demo/components/uikit/invalid/invalidstatedemo.component.ts
@@ -62,4 +62,5 @@ export class InvalidStateDemoComponent implements OnInit {
 
         this.filteredCountries = filtered;
     }
+    
 }
diff --git a/src/app/demo/components/uikit/invalid/invalidstatedemo.module.ts b/src/app/demo/components/uikit/invalid/invalidstatedemo.module.ts
index 90ee2a7..8a632dc 100644
--- a/src/app/demo/components/uikit/invalid/invalidstatedemo.module.ts
+++ b/src/app/demo/components/uikit/invalid/invalidstatedemo.module.ts
@@ -16,22 +16,22 @@ import { InputTextModule } from "primeng/inputtext";
 import { PasswordModule } from "primeng/password";
 
 @NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        InvalidStateDemoRoutingModule,
-        AutoCompleteModule,
-        CalendarModule,
-        ChipsModule,
-        DropdownModule,
-        InputMaskModule,
-        InputNumberModule,
-        CascadeSelectModule,
-        MultiSelectModule,
-        PasswordModule,
-        InputTextareaModule,
-        InputTextModule
-    ],
-    declarations: [InvalidStateDemoComponent]
+	imports: [
+		CommonModule,
+		FormsModule,
+		InvalidStateDemoRoutingModule,
+		AutoCompleteModule,
+		CalendarModule,
+		ChipsModule,
+		DropdownModule,
+		InputMaskModule,
+		InputNumberModule,
+		CascadeSelectModule,
+		MultiSelectModule,
+		PasswordModule,
+		InputTextareaModule,
+		InputTextModule
+	],
+	declarations: [InvalidStateDemoComponent]
 })
 export class InvalidStateDemoModule { }
diff --git a/src/app/demo/components/uikit/list/listdemo-routing.module.ts b/src/app/demo/components/uikit/list/listdemo-routing.module.ts
index 41f7969..2e8243b 100644
--- a/src/app/demo/components/uikit/list/listdemo-routing.module.ts
+++ b/src/app/demo/components/uikit/list/listdemo-routing.module.ts
@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { ListDemoComponent } from './listdemo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: ListDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: ListDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class ListDemoRoutingModule { }
diff --git a/src/app/demo/components/uikit/list/listdemo.component.ts b/src/app/demo/components/uikit/list/listdemo.component.ts
index 19491fb..f062366 100644
--- a/src/app/demo/components/uikit/list/listdemo.component.ts
+++ b/src/app/demo/components/uikit/list/listdemo.component.ts
@@ -69,4 +69,5 @@ export class ListDemoComponent implements OnInit {
     onFilter(dv: DataView, event: Event) {
         dv.filter((event.target as HTMLInputElement).value);
     }
+    
 }
diff --git a/src/app/demo/components/uikit/list/listdemo.module.ts b/src/app/demo/components/uikit/list/listdemo.module.ts
index dc0c6ea..68c948f 100644
--- a/src/app/demo/components/uikit/list/listdemo.module.ts
+++ b/src/app/demo/components/uikit/list/listdemo.module.ts
@@ -12,18 +12,18 @@ import { RatingModule } from 'primeng/rating';
 import { ButtonModule } from 'primeng/button';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        ListDemoRoutingModule,
-        DataViewModule,
-        PickListModule,
-        OrderListModule,
-        InputTextModule,
-        DropdownModule,
-        RatingModule,
-        ButtonModule
-    ],
-    declarations: [ListDemoComponent]
+	imports: [
+		CommonModule,
+		FormsModule,
+		ListDemoRoutingModule,
+		DataViewModule,
+		PickListModule,
+		OrderListModule,
+		InputTextModule,
+		DropdownModule,
+		RatingModule,
+		ButtonModule
+	],
+	declarations: [ListDemoComponent]
 })
 export class ListDemoModule { }
diff --git a/src/app/demo/components/uikit/media/mediademo-routing.module.ts b/src/app/demo/components/uikit/media/mediademo-routing.module.ts
index 5de8d0c..665538c 100644
--- a/src/app/demo/components/uikit/media/mediademo-routing.module.ts
+++ b/src/app/demo/components/uikit/media/mediademo-routing.module.ts
@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { MediaDemoComponent } from './mediademo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: MediaDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: MediaDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class MediaDemoRoutingModule { }
diff --git a/src/app/demo/components/uikit/media/mediademo.component.ts b/src/app/demo/components/uikit/media/mediademo.component.ts
index c16c2cf..dd251ee 100644
--- a/src/app/demo/components/uikit/media/mediademo.component.ts
+++ b/src/app/demo/components/uikit/media/mediademo.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { Product } from 'src/app/demo/api/product';
-import { PhotoService } from 'src/app/demo/service/photo.service';
 import { ProductService } from 'src/app/demo/service/product.service';
+import { PhotoService } from 'src/app/demo/service/photo.service';
+import { Product } from 'src/app/demo/api/product';
 
 @Component({
     templateUrl: './mediademo.component.html'
@@ -60,4 +60,5 @@ export class MediaDemoComponent implements OnInit {
             this.images = images;
         });
     }
+    
 }
diff --git a/src/app/demo/components/uikit/media/mediademo.module.ts b/src/app/demo/components/uikit/media/mediademo.module.ts
index 960315a..bca3a0e 100644
--- a/src/app/demo/components/uikit/media/mediademo.module.ts
+++ b/src/app/demo/components/uikit/media/mediademo.module.ts
@@ -8,14 +8,14 @@ import { GalleriaModule } from 'primeng/galleria';
 import { CarouselModule } from 'primeng/carousel';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        MediaDemoRoutingModule,
-        ButtonModule,
-        ImageModule,
-        GalleriaModule,
-        CarouselModule
-    ],
-    declarations: [MediaDemoComponent]
+	imports: [
+		CommonModule,
+		MediaDemoRoutingModule,
+		ButtonModule,
+		ImageModule,
+		GalleriaModule,
+		CarouselModule
+	],
+	declarations: [MediaDemoComponent]
 })
 export class MediaDemoModule { }
diff --git a/src/app/demo/components/uikit/menus/confirmation.component.ts b/src/app/demo/components/uikit/menus/confirmation.component.ts
index bb3e254..26516d1 100644
--- a/src/app/demo/components/uikit/menus/confirmation.component.ts
+++ b/src/app/demo/components/uikit/menus/confirmation.component.ts
@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'app-confirmation',
-    template: `
-    <div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
-        <i class="pi pi-fw pi-check mr-2 text-2xl"></i>
-        <p class="m-0 mt-5 text-center text-lg">Confirmation Component Content via Child Route</p>
-    </div>
+  template: `
+  <div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
+    <i class="pi pi-fw pi-check mr-2 text-2xl"></i>
+    <p class="m-0 mt-5 text-center text-lg">Confirmation Component Content via Child Route</p>
+  </div>
   `
 })
-export class ConfirmationComponent { }
+export class ConfirmationComponent {
+
+  constructor() { }
+}
diff --git a/src/app/demo/components/uikit/menus/menus.component.html b/src/app/demo/components/uikit/menus/menus.component.html
old mode 100644
new mode 100755
diff --git a/src/app/demo/components/uikit/menus/menus.component.ts b/src/app/demo/components/uikit/menus/menus.component.ts
old mode 100644
new mode 100755
index e97842e..e49e299
--- a/src/app/demo/components/uikit/menus/menus.component.ts
+++ b/src/app/demo/components/uikit/menus/menus.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MegaMenuItem, MenuItem } from 'primeng/api';
 
 @Component({
@@ -472,5 +472,5 @@ export class MenusComponent implements OnInit {
             }
         ];
     }
-    
+
 }
diff --git a/src/app/demo/components/uikit/menus/menus.module.ts b/src/app/demo/components/uikit/menus/menus.module.ts
index d37c40c..659899d 100644
--- a/src/app/demo/components/uikit/menus/menus.module.ts
+++ b/src/app/demo/components/uikit/menus/menus.module.ts
@@ -1,54 +1,49 @@
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
+import { MenusComponent } from './menus.component';
 import { PaymentComponent } from './payment.component';
 import { SeatComponent } from './seat.component';
 import { PersonalComponent } from './personal.component';
 import { ConfirmationComponent } from './confirmation.component';
-import { MenusComponent } from './menus.component';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
+import { MenubarModule } from 'primeng/menubar';
+import { TabMenuModule } from 'primeng/tabmenu';
+import { StepsModule } from 'primeng/steps';
+import { TieredMenuModule } from 'primeng/tieredmenu';
 import { MenuModule } from 'primeng/menu';
+import { ButtonModule } from 'primeng/button';
+import { ContextMenuModule } from 'primeng/contextmenu';
 import { MegaMenuModule } from 'primeng/megamenu';
 import { PanelMenuModule } from 'primeng/panelmenu';
-import { TieredMenuModule } from 'primeng/tieredmenu';
-import { MenubarModule } from 'primeng/menubar';
-import { BreadcrumbModule } from 'primeng/breadcrumb';
-import { TabMenuModule } from 'primeng/tabmenu';
-import { ContextMenuModule } from 'primeng/contextmenu';
-import { StepsModule } from 'primeng/steps';
 import { InputTextModule } from 'primeng/inputtext';
-
 @NgModule({
-    declarations: [
-        MenusComponent,
-        PaymentComponent,
-        ConfirmationComponent,
-        PersonalComponent,
-        SeatComponent,
-
-    ],
-    imports: [
-        MenuModule,
-        MegaMenuModule,
-        PanelMenuModule,
-        MenubarModule,
-        BreadcrumbModule,
-        InputTextModule,
-        TieredMenuModule,
-        TabMenuModule,
-        ContextMenuModule,
-        StepsModule,
-        RouterModule.forChild([
-            {
-                path: '', component: MenusComponent, children: [
-                    { path: '', redirectTo: 'personal', pathMatch: 'full' },
-                    { path: 'personal', component: PersonalComponent },
-                    { path: 'confirmation', component: ConfirmationComponent },
-                    { path: 'seat', component: SeatComponent },
-                    { path: 'payment', component: PaymentComponent }
-                ]
-            }
-        ])
-    ],
-    exports: [RouterModule]
+	imports: [
+		CommonModule,
+		BreadcrumbModule,
+		MenubarModule,
+		TabMenuModule,
+		StepsModule,
+		TieredMenuModule,
+		MenuModule,
+		ButtonModule,
+		ContextMenuModule,
+		MegaMenuModule,
+		PanelMenuModule,
+		InputTextModule,
+		RouterModule.forChild([
+			{
+				path: '', component: MenusComponent, children: [
+					{ path: '', redirectTo: 'personal', pathMatch: 'full' },
+					{ path: 'personal', component: PersonalComponent },
+					{ path: 'confirmation', component: ConfirmationComponent },
+					{ path: 'seat', component: SeatComponent },
+					{ path: 'payment', component: PaymentComponent }
+				]
+			}
+		])
+	],
+	declarations: [MenusComponent],
+	exports: [RouterModule]
 })
 export class MenusModule { }
-
diff --git a/src/app/demo/components/uikit/menus/payment.component.ts b/src/app/demo/components/uikit/menus/payment.component.ts
index f5e3a88..41f9a05 100644
--- a/src/app/demo/components/uikit/menus/payment.component.ts
+++ b/src/app/demo/components/uikit/menus/payment.component.ts
@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'app-payment',
-    template: `
-    <div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
-        <i class="pi pi-fw pi-money-bill mr-2 text-2xl"></i>
-        <p class="m-0 mt-5 text-center text-lg">Payment Component Content via Child Route</p>
-    </div>
-  `
+	template: `
+		<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
+		<i class="pi pi-fw pi-money-bill mr-2 text-2xl"></i>
+		<p class="m-0 mt-5 text-center text-lg">Payment Component Content via Child Route</p>
+		</div>
+  	`
 })
-export class PaymentComponent { }
+export class PaymentComponent {
+
+	constructor() { }
+}
diff --git a/src/app/demo/components/uikit/menus/personal.component.ts b/src/app/demo/components/uikit/menus/personal.component.ts
index bcc879d..dfe602b 100644
--- a/src/app/demo/components/uikit/menus/personal.component.ts
+++ b/src/app/demo/components/uikit/menus/personal.component.ts
@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'app-personal',
-    template: `
-    <div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
-        <i class="pi pi-fw pi-user mr-2 text-2xl"></i>
-        <p class="mt-5 text-center text-lg">Personal Component Content via Child Route</p>
-      </div>
-  `
+	template: `
+		<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
+			<i class="pi pi-fw pi-user mr-2 text-2xl"></i>
+			<p class="mt-5 text-center text-lg">Personal Component Content via Child Route</p>
+		</div>
+  	`
 })
-export class PersonalComponent { }
+export class PersonalComponent {
+
+	constructor() { }
+}
diff --git a/src/app/demo/components/uikit/menus/seat.component.ts b/src/app/demo/components/uikit/menus/seat.component.ts
index 8f36743..7903e38 100644
--- a/src/app/demo/components/uikit/menus/seat.component.ts
+++ b/src/app/demo/components/uikit/menus/seat.component.ts
@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'app-seat',
-    template: `
-    <div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
-        <i class="pi pi-fw pi-ticket mr-2 text-2xl"></i>
-        <p class="m-0 mt-5 text-center text-lg">Seat Component Content via Child Route</p>
-    </div>
-  `
+	template: `
+		<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
+			<i class="pi pi-fw pi-ticket mr-2 text-2xl"></i>
+			<p class="m-0 mt-5 text-center text-lg">Seat Component Content via Child Route</p>
+		</div>
+    `
 })
-export class SeatComponent { }
+export class SeatComponent {
+
+	constructor() { }
+}
diff --git a/src/app/demo/components/uikit/messages/messagesdemo-routing.module.ts b/src/app/demo/components/uikit/messages/messagesdemo-routing.module.ts
index 21921fe..97015df 100644
--- a/src/app/demo/components/uikit/messages/messagesdemo-routing.module.ts
+++ b/src/app/demo/components/uikit/messages/messagesdemo-routing.module.ts
@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { MessagesDemoComponent } from './messagesdemo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: MessagesDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: MessagesDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class MessagesDemoRoutingModule { }
diff --git a/src/app/demo/components/uikit/messages/messagesdemo.component.html b/src/app/demo/components/uikit/messages/messagesdemo.component.html
old mode 100644
new mode 100755
diff --git a/src/app/demo/components/uikit/messages/messagesdemo.component.ts b/src/app/demo/components/uikit/messages/messagesdemo.component.ts
old mode 100644
new mode 100755
index f342807..97c425f
--- a/src/app/demo/components/uikit/messages/messagesdemo.component.ts
+++ b/src/app/demo/components/uikit/messages/messagesdemo.component.ts
@@ -46,4 +46,5 @@ export class MessagesDemoComponent {
         this.msgs = [];
         this.msgs.push({ severity: 'success', summary: 'Success Message', detail: 'Message sent' });
     }
+    
 }
diff --git a/src/app/demo/components/uikit/messages/messagesdemo.module.ts b/src/app/demo/components/uikit/messages/messagesdemo.module.ts
index 454824f..8c0e73e 100644
--- a/src/app/demo/components/uikit/messages/messagesdemo.module.ts
+++ b/src/app/demo/components/uikit/messages/messagesdemo.module.ts
@@ -9,15 +9,15 @@ import { ToastModule } from 'primeng/toast';
 import { InputTextModule } from 'primeng/inputtext';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        MessagesDemoRoutingModule,
-        MessagesModule,
-        MessageModule,
-        ButtonModule,
-        ToastModule,
-        InputTextModule
-    ],
-    declarations: [MessagesDemoComponent]
+	imports: [
+		CommonModule,
+		MessagesDemoRoutingModule,
+		MessagesModule,
+		MessageModule,
+		ButtonModule,
+		ToastModule,
+		InputTextModule
+	],
+	declarations: [MessagesDemoComponent]
 })
 export class MessagesDemoModule { }
diff --git a/src/app/demo/components/uikit/misc/miscdemo-routing.module.ts b/src/app/demo/components/uikit/misc/miscdemo-routing.module.ts
index 314ce4d..e9efdd1 100644
--- a/src/app/demo/components/uikit/misc/miscdemo-routing.module.ts
+++ b/src/app/demo/components/uikit/misc/miscdemo-routing.module.ts
@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { MiscDemoComponent } from './miscdemo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: MiscDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: MiscDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class MiscDemoRoutingModule { }
diff --git a/src/app/demo/components/uikit/misc/miscdemo.component.html b/src/app/demo/components/uikit/misc/miscdemo.component.html
old mode 100644
new mode 100755
diff --git a/src/app/demo/components/uikit/misc/miscdemo.component.ts b/src/app/demo/components/uikit/misc/miscdemo.component.ts
old mode 100644
new mode 100755
index a3b6350..c951e10
--- a/src/app/demo/components/uikit/misc/miscdemo.component.ts
+++ b/src/app/demo/components/uikit/misc/miscdemo.component.ts
@@ -22,4 +22,5 @@ export class MiscDemoComponent implements OnInit, OnDestroy {
     ngOnDestroy() {
         clearInterval(this.interval);
     }
+    
 }
diff --git a/src/app/demo/components/uikit/misc/miscdemo.module.ts b/src/app/demo/components/uikit/misc/miscdemo.module.ts
index 3f6b6c6..22928b2 100644
--- a/src/app/demo/components/uikit/misc/miscdemo.module.ts
+++ b/src/app/demo/components/uikit/misc/miscdemo.module.ts
@@ -14,20 +14,20 @@ import { AvatarGroupModule } from 'primeng/avatargroup';
 import { ScrollTopModule } from 'primeng/scrolltop';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        MiscDemoRoutingModule,
-        ProgressBarModule,
-        BadgeModule,
-        AvatarModule,
-        ScrollPanelModule,
-        TagModule,
-        ChipModule,
-        ButtonModule,
-        SkeletonModule,
-        AvatarGroupModule,
-        ScrollTopModule
-    ],
-    declarations: [MiscDemoComponent]
+	imports: [
+		CommonModule,
+		MiscDemoRoutingModule,
+		ProgressBarModule,
+		BadgeModule,
+		AvatarModule,
+		ScrollPanelModule,
+		TagModule,
+		ChipModule,
+		ButtonModule,
+		SkeletonModule,
+		AvatarGroupModule,
+		ScrollTopModule
+	],
+	declarations: [MiscDemoComponent]
 })
 export class MiscDemoModule { }
diff --git a/src/app/demo/components/uikit/overlays/overlaysdemo-routing.module.ts b/src/app/demo/components/uikit/overlays/overlaysdemo-routing.module.ts
index 2f67856..88a81cc 100644
--- a/src/app/demo/components/uikit/overlays/overlaysdemo-routing.module.ts
+++ b/src/app/demo/components/uikit/overlays/overlaysdemo-routing.module.ts
@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { OverlaysDemoComponent } from './overlaysdemo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: OverlaysDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: OverlaysDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class OverlaysDemoRoutingModule { }
diff --git a/src/app/demo/components/uikit/overlays/overlaysdemo.component.html b/src/app/demo/components/uikit/overlays/overlaysdemo.component.html
old mode 100644
new mode 100755
index cb8fb12..92b0ec4
--- a/src/app/demo/components/uikit/overlays/overlaysdemo.component.html
+++ b/src/app/demo/components/uikit/overlays/overlaysdemo.component.html
@@ -37,16 +37,16 @@
                             <p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" [paginator]="true" [rows]="5" (onRowSelect)="op2.hide()" responsiveLayout="scroll">
                                 <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>
+                                        <th style="min-width:12rem" pSortableColumn="name">Name<p-sortIcon field="name"></p-sortIcon></th>
+                                        <th style="min-width:5rem">Image</th>
+                                        <th style="min-width:8rem" 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 style="min-width: 10rem;">{{product.name}}</td>
-                                        <td style="min-width: 5rem;"><img src="assets/demo/images/product/{{product.image}}" [alt]="product.image" width="50" class="shadow-2"/></td>
-                                        <td style="min-width: 12rem;">{{formatCurrency(product.price)}}</td>
+                                        <td>{{product.name}}</td>
+                                        <td><img src="assets/demo/images/product/{{product.image}}" [alt]="product.image" width="50" class="shadow-2"/></td>
+                                        <td>{{formatCurrency(product.price)}}</td>
                                     </tr>
                                 </ng-template>
                             </p-table>
diff --git a/src/app/demo/components/uikit/overlays/overlaysdemo.component.ts b/src/app/demo/components/uikit/overlays/overlaysdemo.component.ts
old mode 100644
new mode 100755
index d918b07..bd20ef1
--- a/src/app/demo/components/uikit/overlays/overlaysdemo.component.ts
+++ b/src/app/demo/components/uikit/overlays/overlaysdemo.component.ts
@@ -76,4 +76,5 @@ export class OverlaysDemoComponent implements OnInit {
     formatCurrency(value: number) {
         return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
     }
+    
 }
diff --git a/src/app/demo/components/uikit/overlays/overlaysdemo.module.ts b/src/app/demo/components/uikit/overlays/overlaysdemo.module.ts
index f8ab8b5..4dcf1f8 100644
--- a/src/app/demo/components/uikit/overlays/overlaysdemo.module.ts
+++ b/src/app/demo/components/uikit/overlays/overlaysdemo.module.ts
@@ -14,24 +14,23 @@ import { RippleModule } from 'primeng/ripple';
 import { ConfirmPopupModule } from 'primeng/confirmpopup';
 import { TooltipModule } from 'primeng/tooltip';
 import { InputTextModule } from 'primeng/inputtext';
-
 @NgModule({
-    imports: [
-        CommonModule,
-        OverlaysDemoRoutingModule,
-        ToastModule,
-        DialogModule,
-        FormsModule,
-        TooltipModule,
-        InputTextModule,
-        ButtonModule,
-        OverlayPanelModule,
-        TableModule,
-        ConfirmDialogModule,
-        SidebarModule,
-        RippleModule,
-        ConfirmPopupModule
-    ],
-    declarations: [OverlaysDemoComponent]
+	imports: [
+		CommonModule,
+		OverlaysDemoRoutingModule,
+		ToastModule,
+		DialogModule,
+		FormsModule,
+		TooltipModule,
+		InputTextModule,
+		ButtonModule,
+		OverlayPanelModule,
+		TableModule,
+		ConfirmDialogModule,
+		SidebarModule,
+		RippleModule,
+		ConfirmPopupModule
+	],
+	declarations: [OverlaysDemoComponent]
 })
 export class OverlaysDemoModule { }
diff --git a/src/app/demo/components/uikit/panels/panelsdemo-routing.module.ts b/src/app/demo/components/uikit/panels/panelsdemo-routing.module.ts
index 6640ad8..5b33fb7 100644
--- a/src/app/demo/components/uikit/panels/panelsdemo-routing.module.ts
+++ b/src/app/demo/components/uikit/panels/panelsdemo-routing.module.ts
@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { PanelsDemoComponent } from './panelsdemo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: PanelsDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: PanelsDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class PanelsDemoRoutingModule { }
diff --git a/src/app/demo/components/uikit/panels/panelsdemo.component.html b/src/app/demo/components/uikit/panels/panelsdemo.component.html
old mode 100644
new mode 100755
diff --git a/src/app/demo/components/uikit/panels/panelsdemo.component.ts b/src/app/demo/components/uikit/panels/panelsdemo.component.ts
old mode 100644
new mode 100755
index 02bdab7..646e54e
--- a/src/app/demo/components/uikit/panels/panelsdemo.component.ts
+++ b/src/app/demo/components/uikit/panels/panelsdemo.component.ts
@@ -28,4 +28,5 @@ export class PanelsDemoComponent implements OnInit {
             },
         ];
     }
+    
 }
diff --git a/src/app/demo/components/uikit/panels/panelsdemo.module.ts b/src/app/demo/components/uikit/panels/panelsdemo.module.ts
index f98db0a..79c87a7 100644
--- a/src/app/demo/components/uikit/panels/panelsdemo.module.ts
+++ b/src/app/demo/components/uikit/panels/panelsdemo.module.ts
@@ -17,23 +17,23 @@ import { SplitterModule } from 'primeng/splitter';
 import { PanelModule } from 'primeng/panel';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        PanelsDemoRoutingModule,
-        ToolbarModule,
-        ButtonModule,
-        RippleModule,
-        SplitButtonModule,
-        AccordionModule,
-        TabViewModule,
-        FieldsetModule,
-        MenuModule,
-        InputTextModule,
-        DividerModule,
-        SplitterModule,
-        PanelModule
-    ],
-    declarations: [PanelsDemoComponent]
+	imports: [
+		CommonModule,
+		FormsModule,
+		PanelsDemoRoutingModule,
+		ToolbarModule,
+		ButtonModule,
+		RippleModule,
+		SplitButtonModule,
+		AccordionModule,
+		TabViewModule,
+		FieldsetModule,
+		MenuModule,
+		InputTextModule,
+		DividerModule,
+		SplitterModule,
+		PanelModule
+	],
+	declarations: [PanelsDemoComponent]
 })
 export class PanelsDemoModule { }
diff --git a/src/app/demo/components/uikit/table/tabledemo-routing.module.ts b/src/app/demo/components/uikit/table/tabledemo-routing.module.ts
index 55a8be6..5297dc0 100644
--- a/src/app/demo/components/uikit/table/tabledemo-routing.module.ts
+++ b/src/app/demo/components/uikit/table/tabledemo-routing.module.ts
@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { TableDemoComponent } from './tabledemo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: TableDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: TableDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class TableDemoRoutingModule { }
diff --git a/src/app/demo/components/uikit/table/tabledemo.component.html b/src/app/demo/components/uikit/table/tabledemo.component.html
index 90d2c3c..0f18f2b 100644
--- a/src/app/demo/components/uikit/table/tabledemo.component.html
+++ b/src/app/demo/components/uikit/table/tabledemo.component.html
@@ -14,19 +14,19 @@
 				</ng-template>
 				<ng-template pTemplate="header">
 					<tr>
-						<th>
+						<th style="min-width: 12rem">
 							<div class="flex justify-content-between align-items-center">
 								Name
 								<p-columnFilter type="text" field="name" display="menu" placeholder="Search by name"></p-columnFilter>
 							</div>
 						</th>
-						<th>
+						<th style="min-width: 12rem">
 							<div class="flex justify-content-between align-items-center">
 								Country
 								<p-columnFilter type="text" field="country.name" display="menu" placeholder="Search by country"></p-columnFilter>
 							</div>
 						</th>
-						<th>
+						<th style="min-width: 14rem">
 							<div class="flex justify-content-between align-items-center">
 								Agent
 								<p-columnFilter field="representative" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
@@ -48,19 +48,19 @@
 								</p-columnFilter>
 							</div>
 						</th>
-						<th>
+						<th style="min-width: 10rem">
 							<div class="flex justify-content-between align-items-center">
 								Date
 								<p-columnFilter type="date" field="date" display="menu" placeholder="mm/dd/yyyy"></p-columnFilter>
 							</div>
 						</th>
-						<th>
+						<th style="min-width: 10rem">
 							<div class="flex justify-content-between align-items-center">
 								Balance
 								<p-columnFilter type="numeric" field="balance" display="menu" currency="USD"></p-columnFilter>
 							</div>
 						</th>
-						<th>
+						<th style="min-width: 12rem">
 							<div class="flex justify-content-between align-items-center">
 								Status
 								<p-columnFilter field="status" matchMode="equals" display="menu">
@@ -74,7 +74,7 @@
 								</p-columnFilter>
 							</div>
 						</th>
-						<th>
+						<th style="min-width: 12rem">
 							<div class="flex justify-content-between align-items-center">
 								Activity
 								<p-columnFilter field="activity" matchMode="between" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
@@ -88,7 +88,7 @@
 								</p-columnFilter>
 							</div>
 						</th>
-						<th style="width: 8rem">
+						<th style="min-width: 8rem">
 							<div class="flex justify-content-between align-items-center">
 								Verified
 								<p-columnFilter type="boolean" field="verified" display="menu"></p-columnFilter>
@@ -98,30 +98,30 @@
 				</ng-template>
 				<ng-template pTemplate="body" let-customer>
 					<tr>
-						<td style="min-width: 12rem;">
+						<td>
 							{{customer.name}}
 						</td>
-						<td style="min-width: 12rem;">
+						<td>
 							<img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
 							<span class="image-text ml-2">{{customer.country.name}}</span>
 						</td>
-						<td style="min-width: 14rem;">
+						<td>
 							<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle"/>
 							<span class="image-text ml-2">{{customer.representative.name}}</span>
 						</td>
-						<td style="min-width: 10rem;">
+						<td>
 							{{customer.date | date: 'MM/dd/yyyy'}}
 						</td>
-						<td style="min-width: 10rem;">
+						<td>
 							{{customer.balance | currency:'USD':'symbol'}}
 						</td>
-						<td style="min-width: 12rem;">
+						<td>
 							<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
 						</td>
-						<td style="min-width: 12rem; ">
+						<td>
 							<p-progressBar [value]="customer.activity" [showValue]="false" [style]="{'height': '0.5rem'}"></p-progressBar>
 						</td>
-						<td class="text-center" style="min-width: 8rem;">
+						<td class="text-center">
 							<i class="pi" [ngClass]="{'true-icon pi-check-circle text-green-500': customer.verified, 'false-icon pi-times-circle text-pink-500': !customer.verified}"></i>
 						</td>
 					</tr>
diff --git a/src/app/demo/components/uikit/table/tabledemo.component.ts b/src/app/demo/components/uikit/table/tabledemo.component.ts
index 9c86118..88ebc2a 100644
--- a/src/app/demo/components/uikit/table/tabledemo.component.ts
+++ b/src/app/demo/components/uikit/table/tabledemo.component.ts
@@ -1,10 +1,10 @@
 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Customer, Representative } from 'src/app/demo/api/customer';
+import { CustomerService } from 'src/app/demo/service/customer.service';
+import { Product } from 'src/app/demo/api/product';
+import { ProductService } from 'src/app/demo/service/product.service';
 import { Table } from 'primeng/table';
 import { MessageService, ConfirmationService } from 'primeng/api';
-import { Customer, Representative } from 'src/app/demo/api/customer';
-import { Product } from 'src/app/demo/api/product';
-import { CustomerService } from 'src/app/demo/service/customer.service';
-import { ProductService } from 'src/app/demo/service/product.service';
 
 interface expandedRows {
     [key: string]: boolean;
@@ -134,4 +134,5 @@ export class TableDemoComponent implements OnInit {
         table.clear();
         this.filter.nativeElement.value = '';
     }
-}
+    
+}
\ No newline at end of file
diff --git a/src/app/demo/components/uikit/table/tabledemo.module.ts b/src/app/demo/components/uikit/table/tabledemo.module.ts
index 2477736..290afd9 100644
--- a/src/app/demo/components/uikit/table/tabledemo.module.ts
+++ b/src/app/demo/components/uikit/table/tabledemo.module.ts
@@ -16,22 +16,22 @@ import { SliderModule } from 'primeng/slider';
 import { RatingModule } from 'primeng/rating';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        TableDemoRoutingModule,
-        FormsModule,
-        TableModule,
-        RatingModule,
-        ButtonModule,
-        SliderModule,
-        InputTextModule,
-        ToggleButtonModule,
-        RippleModule,
-        MultiSelectModule,
-        DropdownModule,
-        ProgressBarModule,
-        ToastModule
-    ],
-    declarations: [TableDemoComponent]
+	imports: [
+		CommonModule,
+		TableDemoRoutingModule,
+		FormsModule,
+		TableModule,
+		RatingModule,
+		ButtonModule,
+		SliderModule,
+		InputTextModule,
+		ToggleButtonModule,
+		RippleModule,
+		MultiSelectModule,
+		DropdownModule,
+		ProgressBarModule,
+		ToastModule
+	],
+	declarations: [TableDemoComponent]
 })
 export class TableDemoModule { }
diff --git a/src/app/demo/components/uikit/tree/treedemo.component.ts b/src/app/demo/components/uikit/tree/treedemo.component.ts
index ae317b6..1db3875 100644
--- a/src/app/demo/components/uikit/tree/treedemo.component.ts
+++ b/src/app/demo/components/uikit/tree/treedemo.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { TreeNode } from 'primeng/api';
 import { NodeService } from 'src/app/demo/service/node.service';
+import { TreeNode} from 'primeng/api';
 
 @Component({
     templateUrl: './treedemo.component.html'
@@ -21,7 +21,7 @@ export class TreeDemoComponent implements OnInit {
 
     cols: any[] = [];
 
-    constructor(private nodeService: NodeService) { }
+    constructor(private nodeService: NodeService) {}
 
     ngOnInit() {
         this.nodeService.getFiles().then(files => this.files1 = files);
diff --git a/src/app/demo/components/uikit/tree/treedemo.module.ts b/src/app/demo/components/uikit/tree/treedemo.module.ts
index 6a08320..c3db357 100644
--- a/src/app/demo/components/uikit/tree/treedemo.module.ts
+++ b/src/app/demo/components/uikit/tree/treedemo.module.ts
@@ -7,13 +7,13 @@ import { TreeModule } from 'primeng/tree';
 import { TreeTableModule } from 'primeng/treetable';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        TreeDemoRoutingModule,
-        FormsModule,
-        TreeModule,
-        TreeTableModule
-    ],
-    declarations: [TreeDemoComponent],
+	imports: [
+		CommonModule,
+		TreeDemoRoutingModule,
+		FormsModule,
+		TreeModule,
+		TreeTableModule
+	],
+	declarations: [TreeDemoComponent],
 })
 export class TreeDemoModule { }
diff --git a/src/app/demo/components/uikit/uikit-routing.module.ts b/src/app/demo/components/uikit/uikit-routing.module.ts
index 965c7e4..c297f1e 100644
--- a/src/app/demo/components/uikit/uikit-routing.module.ts
+++ b/src/app/demo/components/uikit/uikit-routing.module.ts
@@ -3,23 +3,23 @@ import { RouterModule } from '@angular/router';
 
 @NgModule({
     imports: [RouterModule.forChild([
-        { path: 'formlayout', loadChildren: () => import('./formlayout/formlayout.module').then(m => m.FormlayoutModule) },
-        { path: 'button', loadChildren: () => import('./button/buttondemo.module').then(m => m.ButtonDemoModule) },
-        { path: 'charts', loadChildren: () => import('./charts/chartsdemo.module').then(m => m.ChartsDemoModule) },
-        { path: 'file', loadChildren: () => import('./file/filedemo.module').then(m => m.FileDemoModule) },
-        { path: 'floatlabel', loadChildren: () => import('./floatlabel/floatlabeldemo.module').then(m => m.FloatlabelDemoModule) },
-        { path: 'input', loadChildren: () => import('./input/inputdemo.module').then(m => m.InputDemoModule) },
-        { path: 'invalidstate', loadChildren: () => import('./invalid/invalidstatedemo.module').then(m => m.InvalidStateDemoModule) },
-        { path: 'list', loadChildren: () => import('./list/listdemo.module').then(m => m.ListDemoModule) },
-        { path: 'media', loadChildren: () => import('./media/mediademo.module').then(m => m.MediaDemoModule) },
-        { path: 'message', loadChildren: () => import('./messages/messagesdemo.module').then(m => m.MessagesDemoModule) },
-        { path: 'misc', loadChildren: () => import('./misc/miscdemo.module').then(m => m.MiscDemoModule) },
-        { path: 'overlay', loadChildren: () => import('./overlays/overlaysdemo.module').then(m => m.OverlaysDemoModule) },
-        { path: 'panel', loadChildren: () => import('./panels/panelsdemo.module').then(m => m.PanelsDemoModule) },
-        { path: 'table', loadChildren: () => import('./table/tabledemo.module').then(m => m.TableDemoModule) },
-        { path: 'tree', loadChildren: () => import('./tree/treedemo.module').then(m => m.TreeDemoModule) },
-        { path: 'menu', loadChildren: () => import('./menus/menus.module').then(m => m.MenusModule) }
+        { path: 'button', data: { breadcrumb: 'Button' }, loadChildren: () => import('./button/buttondemo.module').then(m => m.ButtonDemoModule) },
+        { path: 'charts', data: { breadcrumb: 'Charts' }, loadChildren: () => import('./charts/chartsdemo.module').then(m => m.ChartsDemoModule) },
+        { path: 'file', data: { breadcrumb: 'File' }, loadChildren: () => import('./file/filedemo.module').then(m => m.FileDemoModule) },
+        { path: 'floatlabel', data: { breadcrumb: 'Float Label' }, loadChildren: () => import('./floatlabel/floatlabeldemo.module').then(m => m.FloatlabelDemoModule) },
+        { path: 'formlayout', data: { breadcrumb: 'Form Layout' }, loadChildren: () => import('./formlayout/formlayoutdemo.module').then(m => m.FormLayoutDemoModule) },
+        { path: 'input', data: { breadcrumb: 'Input' }, loadChildren: () => import('./input/inputdemo.module').then(m => m.InputDemoModule) },
+        { path: 'invalidstate', data: { breadcrumb: 'Invalid State' }, loadChildren: () => import('./invalid/invalidstatedemo.module').then(m => m.InvalidStateDemoModule) },
+        { path: 'list', data: { breadcrumb: 'List' }, loadChildren: () => import('./list/listdemo.module').then(m => m.ListDemoModule) },
+        { path: 'media', data: { breadcrumb: 'Media' }, loadChildren: () => import('./media/mediademo.module').then(m => m.MediaDemoModule) },
+        { path: 'message', data: { breadcrumb: 'Message' }, loadChildren: () => import('./messages/messagesdemo.module').then(m => m.MessagesDemoModule) },
+        { path: 'misc', data: { breadcrumb: 'Misc' }, loadChildren: () => import('./misc/miscdemo.module').then(m => m.MiscDemoModule) },
+        { path: 'overlay', data: { breadcrumb: 'Overlay' }, loadChildren: () => import('./overlays/overlaysdemo.module').then(m => m.OverlaysDemoModule) },
+        { path: 'panel', data: { breadcrumb: 'Panel' }, loadChildren: () => import('./panels/panelsdemo.module').then(m => m.PanelsDemoModule) },
+        { path: 'table', data: { breadcrumb: 'Table' }, loadChildren: () => import('./table/tabledemo.module').then(m => m.TableDemoModule) },
+        { path: 'tree', data: { breadcrumb: 'Tree' }, loadChildren: () => import('./tree/treedemo.module').then(m => m.TreeDemoModule) },
+        { path: 'menu', data: { breadcrumb: 'Menu' }, loadChildren: () => import('./menus/menus.module').then(m => m.MenusModule) }
     ])],
     exports: [RouterModule]
 })
-export class UikitRoutingModule { }
+export class UIkitRoutingModule { }
diff --git a/src/app/demo/components/uikit/uikit.module.ts b/src/app/demo/components/uikit/uikit.module.ts
index 207f6a4..f52e70b 100644
--- a/src/app/demo/components/uikit/uikit.module.ts
+++ b/src/app/demo/components/uikit/uikit.module.ts
@@ -1,12 +1,11 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { UikitRoutingModule } from './uikit-routing.module';
+import { UIkitRoutingModule } from './uikit-routing.module';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        UikitRoutingModule
-    ],
-    declarations: []
+	imports: [
+		CommonModule,
+		UIkitRoutingModule
+	]
 })
-export class UikitModule { }
+export class UIkitModule { }