remove unused classes

src/app/app.menu.component.ts

@@ -58,9 +58,8 @@ export class AppMenuComponent implements OnInit {
             {
                 label:'UI Blocks',
                 items:[
-                    {label: 'Free Blocks', icon: 'pi pi-fw pi-eye', routerLink: ['/blocks'],
+                    {label: 'Free Blocks', icon: 'pi pi-fw pi-eye', routerLink: ['/blocks'], badge: 'NEW'},
-                    badge:'NEW'},
+                    {label: 'All Blocks', icon: 'pi pi-fw pi-globe', url: ['https://www.primefaces.org/primeblocks-ng']},
-                    {label: 'All Blocks', icon: 'pi pi-fw pi-globe', url: ['https://www.primefaces.org/primeblocks-ng/#/']},
                 ]
             },
             {label:'Icons',

src/app/app.module.ts

@@ -84,6 +84,7 @@ import {ToggleButtonModule} from 'primeng/togglebutton';
 import {ToolbarModule} from 'primeng/toolbar';
 import {TooltipModule} from 'primeng/tooltip';
 import {TreeModule} from 'primeng/tree';
+import {TreeSelect, TreeSelectModule} from 'primeng/treeselect';
 import {TreeTableModule} from 'primeng/treetable';
 import {VirtualScrollerModule} from 'primeng/virtualscroller';
 import {BlockViewer} from './app.blockviewer.component'
@@ -223,6 +224,7 @@ FullCalendarModule.registerPlugins([
         ToolbarModule,
         TooltipModule,
         TreeModule,
+        TreeSelectModule,
         TreeTableModule,
         VirtualScrollerModule,
         AppCodeModule,

src/app/demo/service/nodeservice.ts

@@ -31,4 +31,10 @@ export class NodeService {
       .toPromise()
       .then(res => res.data as TreeNode[]);
     }
+
+    getTreeNodes(){
+      return this.http.get<any>('assets/demo/data/treenodes.json')
+      .toPromise()
+      .then(res => res.data as TreeNode[]);
+    }
 }

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

@@ -1,4 +1,4 @@
-<div class="grid button-demo">
+<div class="grid">
 	<div class="col-12 md:col-6">
 		<div class="card">
 			<h5>Default</h5>

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

@@ -1,42 +1,34 @@
 <div class="grid p-fluid">
     <div class="col-12 lg:col-6">
         <div class="card">
-            <h5 class="centerText">Linear Chart</h5>
+            <h5>Linear Chart</h5>
             <p-chart type="line" [data]="lineData" [options]="lineOptions" [style]="{'width': '50%'}"></p-chart>
         </div>
 
         <div class="card flex flex-column align-items-center">
-            <h5 class="centerText">Pie Chart</h5>
+            <h5>Pie Chart</h5>
-            <div class="d-flex justify-content-center">
             <p-chart type="pie" [data]="pieData" [options]="pieOptions" [style]="{'width': '50%'}"></p-chart>
         </div>
-        </div>
 
         <div class="card flex flex-column align-items-center">
-            <h5 class="centerText">Polar Area Chart</h5>
+            <h5>Polar Area Chart</h5>
-            <div class="d-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>
+            <h5>Bar Chart</h5>
             <p-chart type="bar" [data]="barData" [options]="barOptions"></p-chart>
         </div>
 
         <div class="card flex flex-column align-items-center">
-            <h5 class="centerText">Doughnut Chart</h5>
+            <h5>Doughnut Chart</h5>
-            <div class="d-flex justify-content-center">
             <p-chart type="doughnut" [data]="pieData" [options]="pieOptions" [style]="{'width': '50%'}"></p-chart>
         </div>
-        </div>
 
         <div class="card flex flex-column align-items-center">
-            <h5 class="centerText">Radar Chart</h5>
+            <h5>Radar Chart</h5>
-            <div class="d-flex justify-content-center">
             <p-chart type="radar" [data]="radarData" [options]="radarOptions" [style]="{'width': '50%'}"></p-chart>
         </div>
     </div>
-    </div>
 </div>

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

@@ -1,4 +1,3 @@
-<div class="layout-main">
     <div class="grid">
         <div class="col-12 lg:col-6 xl:col-3">
             <div class="card mb-0">
@@ -75,11 +74,11 @@
                     </ng-template>
                     <ng-template pTemplate="body" let-product>
                         <tr>
-                            <td>
+                            <td style="min-width: 5rem;">
                                 <img src="../../../assets/demo/images/product/{{product.image}}" class="shadow-4" alt="{{product.name}}" width="50">
                             </td>
-                            <td>{{product.name}}</td>
+                            <td style="min-width: 7rem;">{{product.name}}</td>
-                            <td>{{product.price | currency:'USD'}}</td>
+                            <td style="min-width: 8rem;">{{product.price | currency:'USD'}}</td>
                             <td>
                                 <button pButton pRipple type="button" icon="pi pi-search" class="p-button p-component p-button-text p-button-icon-only"></button>
                             </td>
@@ -241,4 +240,4 @@
         </div>
 
     </div>
-</div>
+

src/app/demo/view/documentation.component.html

@@ -1,6 +1,6 @@
 <div class="grid">
     <div class="col-12">
-        <div class="card docs no-margin">
+        <div class="card docs">
 
             <h4>Current Version</h4>
             <p>Angular 13 and PrimeNG 13</p>
@@ -14,8 +14,7 @@
             <p>Sakai has no direct dependency other than PrimeNG. More information about dependencies is available at <a href="https://www.primefaces.org/why-primeng-templates/">Why PrimeNG Templates</a> article.</p>
 
 <app-code  ngPreserveWhitespaces ngNonBindable lang="markup">
-npm install -g @angular/cli
+npm install -g @angular/cli</app-code>
-</app-code>
 
             <p>Once CLI is ready in your system, extract the contents of the Sakai zip file distribution, cd to the directory,
             install the libraries from npm and then execute "ng serve" to run the application in your local environment.</p>
@@ -23,8 +22,7 @@ npm install -g @angular/cli
 <app-code ngPreserveWhitespaces ngNonBindable lang="markup">
 cd sakai-ng
 npm install
-ng serve
+ng serve</app-code>
-</app-code>
 
             <p>The application should run at http://localhost:4200/, you may now start with the development of your application.</p>
 
@@ -41,8 +39,7 @@ Run 'ng test' to execute the unit tests via [Karma](https://karma-runner.github.
 
 Run 'ng e2e' to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
 
-Run 'ng help' for more options.
+Run 'ng help' for more options.</app-code>
-</app-code>
 
             <h5>Structure</h5>
             <p>Sakai consists of 2 main parts; the application layout, layout resources. <i>app.component.html</i> inside app folder is the html template for the base layout,
@@ -80,9 +77,8 @@ Run 'ng help' for more options.
 
     &lt;app-config&gt;&lt;/app-config&gt;
 
-    &lt;div class=&quot;layout-mask p-component-overlay&quot;&gt;&lt;/div&gt;
+    &lt;div *ngIf=&quot;menuActiveMobile&quot; class=&quot;layout-mask p-component-overlay&quot;&gt;&lt;/div&gt;
-&lt;/div&gt;
+&lt;/div&gt;</app-code>
-</app-code>
 
             <h5>Menu</h5>
             <p>Menu is a separate component defined in app.menu.component.ts file based on PrimeNG MenuModel API. In order to define the menuitems,
@@ -127,6 +123,19 @@ export class AppMenuComponent implements OnInit, AfterViewInit &#123;
                     &#123;label: 'Misc', icon: 'pi pi-fw pi-circle', routerLink: ['/uikit/misc']&#125;
                 ]
             &#125;,
+            &#123;
+            label: 'UI Blocks',
+            items: [
+                &#123;label: 'Free Blocks', icon: 'pi pi-fw pi-eye', routerLink: ['/blocks'], badge: 'NEW'&#125;,
+                &#123;label: 'Timeline', icon: 'pi pi-fw pi-calendar', url: ['https://www.primefaces.org/primeblocks-ng']&#125;
+                ]
+            &#125;,
+            &#123;
+            label: 'Icons',
+            items: [
+                &#123;label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', routerLink: ['/icons']&#125;,
+                ]
+            &#125;,
             &#123;
                 label: 'Pages', icon: 'pi pi-fw pi-briefcase', routerLink: ['/pages'],
                 items: [
@@ -179,14 +188,14 @@ export class AppMenuComponent implements OnInit, AfterViewInit &#123;
                 ]
             &#125;,
             &#123;
-                label: 'Start', icon: 'pi pi-fw pi-download',
+                label: 'Get Started',
                 items: [
-                    &#123;
-                        label: 'Buy Now', icon: 'pi pi-fw pi-shopping-cart', url: ['https://www.primefaces.org/store']
-                    &#125;,
                     &#123;
                         label: 'Documentation', icon: 'pi pi-fw pi-info-circle', routerLink: ['/documentation']
                     &#125;
+                    &#123;
+                        label: 'View Source', icon: 'pi pi-fw pi-search', url: ['https://github.com/primefaces/sakai-angular']
+                    &#125;
                 ]
             &#125;
         ];

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

@@ -12,7 +12,7 @@
             </p-fileUpload>
 
             <h5>Basic</h5>
-            <p-fileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUpload($event)" chooseLabel="Browse"></p-fileUpload>
+            <p-fileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onUpload($event)" chooseLabel="Browse"></p-fileUpload>
         </div>
     </div>
 </div>

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

@@ -18,8 +18,4 @@ export class FileDemoComponent {
 
         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'});
-    }
 }

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

@@ -3,7 +3,6 @@ import {CountryService} from '../service/countryservice';
 
 @Component({
     templateUrl: './floatlabeldemo.component.html',
-    styleUrls: ['./floatlabeldemo.scss']
 })
 export class FloatLabelDemoComponent implements OnInit {
 
@@ -58,7 +57,6 @@ export class FloatLabelDemoComponent implements OnInit {
         // 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) {

src/app/demo/view/floatlabeldemo.scss

@@ -1,9 +0,0 @@
-:host ::ng-deep .floatlabel-demo {
-    .p-field {
-        margin-top: 2rem;
-    }
-
-    .p-multiselect-panel .p-multiselect-header {
-        padding-bottom: 0;
-    }
-}

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

@@ -2,7 +2,7 @@
 	<div class="col-12 md:col-6">
 		<div class="card">
 			<h5>InputText</h5>
-			<div class="grid p-formgrid">
+			<div class="grid formgrid">
 				<div class="col-12 mb-2 lg:col-4 lg:mb-0">
 					<input pInputText type="text" placeholder="Default" />
 				</div>
@@ -15,7 +15,7 @@
 			</div>
 
 			<h5>Icons</h5>
-			<div class="grid p-formgrid">
+			<div class="grid formgrid">
 				<div class="col-12 mb-2 lg:col-4 lg:mb-0">
 					<span class="p-input-icon-left">
 						<i class="pi pi-user"></i>
@@ -89,7 +89,7 @@
 			<h5>RadioButton</h5>
 			<div class="grid">
 				<div class="col-12 md:col-4">
-					<div class="field-radiobutton">
+					<div class="field-radiobutton mb-0">
 						<p-radioButton name="city" value="Chicago" [(ngModel)]="valRadio" id="city1"></p-radioButton>
 						<label for="city1">Chicago</label>
 					</div>
@@ -112,23 +112,23 @@
 			<h5>Checkbox</h5>
 			<div class="grid">
 				<div class="col-12 md:col-4">
-					<div class="field-checkbox">
+					<div class="field-checkbox mb-0">
-						<p-checkbox name="group1" value="New York" [(ngModel)]="valCheck" id="ny"></p-checkbox>
+						<p-checkbox name="group1" value="Chicago" [(ngModel)]="valCheck" id="ch"></p-checkbox>
-						<label for="ny">New York</label>
+						<label for="ch">Chicago</label>
 					</div>
 				</div>
 				<div class="col-12 md:col-4">
-					<div class="field-checkbox">
+					<div class="field-checkbox mb-0">
-						<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 class="col-12 md:col-4">
+					<div class="field-checkbox mb-0">
+						<p-checkbox name="group1" value="New York" [(ngModel)]="valCheck" id="ny"></p-checkbox>
+						<label for="ny">New York</label>
+					</div>
+				</div>
 			</div>
 
 			<h5>Input Switch</h5>
@@ -142,10 +142,10 @@
 			<h5>Dropdown</h5>
 			<p-dropdown [options]="cities" [(ngModel)]="selectedDrop" placeholder="Select a City" [showClear]="true"></p-dropdown>
 
-			<h5>Multiselect</h5>
+			<h5>MultiSelect</h5>
 			<p-multiSelect [options]="countries" [(ngModel)]="selectedMulti" defaultLabel="Select a Country" optionLabel="name" class="multiselect-custom">
 				<ng-template let-value pTemplate="selectedItems">
-					<div class="country-item country-item-value" *ngFor="let option of selectedMulti">
+					<div class="country-item country-item-value inline-flex align-items-center py-1 px-2 bg-primary text-primary border-round mr-2" *ngFor="let option of selectedMulti">
 						<img src="assets/demo/flags/flag_placeholder.png" [class]="'flag flag-' + option.code.toLowerCase()" />
 						<div>{{option.name}}</div>
 					</div>
@@ -154,17 +154,20 @@
 					</div>
 				</ng-template>
 				<ng-template let-country pTemplate="item">
-					<div class="country-item">
+					<div class="flex align-items-center country-item">
-						<img src="assets/demo/flags/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" />
+						<img src="assets/demo/flags/flag_placeholder.png" [class]="'mr-2 flag flag-' + country.code.toLowerCase()" style="width:18px; height:12px;"/>
 						<div>{{country.name}}</div>
 					</div>
 				</ng-template>
 			</p-multiSelect>
+
+			<h5>TreeSelect</h5>
+			<p-treeSelect [(ngModel)]="selectedNode" [options]="treeSelectNodes" placeholder="Select Item"></p-treeSelect>
 		</div>
 
 		<div class="card">
 			<h5>ToggleButton</h5>
-			<p-toggleButton [(ngModel)]="valToggle" onLabel="Yes" offLabel="No"></p-toggleButton>
+			<p-toggleButton [(ngModel)]="valToggle" onLabel="Yes" offLabel="No" [style]="{width:'10em'}"></p-toggleButton>
 
 			<h5>SelectButton</h5>
 			<p-selectButton [options]="paymentOptions" [(ngModel)]="valSelect1" optionLabel="name"></p-selectButton>

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

@@ -1,5 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {CountryService} from '../service/countryservice';
+import {NodeService} from '../service/nodeservice';
 import {SelectItem} from 'primeng/api';
 
 @Component({
@@ -12,9 +13,9 @@ import {SelectItem} from 'primeng/api';
 		min-width: 20rem;
 	}
 
-	:host ::ng-deep .multiselect-custom .p-multiselect-label {
+	:host ::ng-deep .multiselect-custom .p-multiselect-label,  {
-		padding-top: .25rem;
+		padding-top: 0.75rem;
-		padding-bottom: .25rem;
+		padding-bottom: 0.75rem;
 
 	}
 
@@ -45,9 +46,6 @@ import {SelectItem} from 'primeng/api';
 		padding: 0.25rem;
 	}
 
-	:host ::ng-deep .p-colorpicker {
-		width: 2.5em
-	}
     `]
 })
 export class InputDemoComponent implements OnInit{
@@ -57,7 +55,7 @@ export class InputDemoComponent implements OnInit{
 
     selectedCountryAdvanced: any[];
 
-    valSlider = 0;
+    valSlider = 50;
 
     valColor = '#424242';
 
@@ -75,6 +73,10 @@ export class InputDemoComponent implements OnInit{
 
     selectedMulti: string[] = [];
 
+    treeSelectNodes: any[];
+
+    selectedNode: SelectItem;
+
     valToggle = false;
 
     paymentOptions: any[];
@@ -87,7 +89,7 @@ export class InputDemoComponent implements OnInit{
 
     selectedDate:any;
 
-    constructor(private countryService: CountryService) {}
+    constructor(private countryService: CountryService, private nodeService: NodeService) {}
 
     ngOnInit() {
         this.countryService.getCountries().then(countries => {
@@ -107,6 +109,8 @@ export class InputDemoComponent implements OnInit{
             {name: 'Option 2', value: 2},
             {name: 'Option 3', value: 3}
         ];
+
+        this.nodeService.getTreeNodes().then(data => this.treeSelectNodes = data);
     }
 
     filterCountry(event) {

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

@@ -1,4 +1,4 @@
-<div class="card floatlabel-demo">
+<div class="card">
     <h5>Invalid State</h5>
     <div class="grid p-fluid">
         <div class="col-12 md:col-6">

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

@@ -1,52 +1,59 @@
-<div class="grid list-demo">
+<div class="grid">
 	<div class="col-12">
 		<div class="card">
 			<h5>DataView</h5>
-			<p-dataView #dv [value]="products" [paginator]="true" [rows]="9" filterBy="name"
+			<p-dataView #dv [value]="products" [paginator]="true" [rows]="9" filterBy="name" [sortField]="sortField" [sortOrder]="sortOrder" layout="grid">
-						[sortField]="sortField" [sortOrder]="sortOrder" layout="grid">
 				<ng-template pTemplate="header">
-					<div class="grid grid-nogutter justify-content-between">		
+					<div class="grid grid-nogutter">
-						<p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By Price" (onChange)="onSortChange($event)" styleClass="mb-2 mb-md-0"></p-dropdown>
+						<div class="col-6 text-left">
-						<span class="p-input-icon-left mb-2 mb-md-0"></span>
+							<p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By Price" (onChange)="onSortChange($event)"></p-dropdown>
+						</div>
+						<div class="col-6 text-right">
 							<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
 						</div>
+					</div>
 				</ng-template>
+
 				<ng-template let-product pTemplate="listItem">
 					<div class="col-12">
-						<div class="product-list-item">
+						<div class="flex flex-column md:flex-row align-items-center p-3 w-full">
-							<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name"/>
+							<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5"/>
-							<div class="product-list-detail">
+							<div class="flex-1 text-center md:text-left">
-								<div class="product-name">{{product.name}}</div>
+								<div class="font-bold text-2xl">{{product.name}}</div>
-								<div class="product-description">{{product.description}}</div>
+								<div class="mb-3">{{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 class="flex align-items-center mt-2">
+									<i class="pi pi-tag mr-2"></i>
+									<span class="font-semibold">{{product.category}}</span>
 								</div>
-							<div class="product-list-action">
+							</div>
-								<span class="product-price">${{product.price}}</span>
+							<div class="flex flex-row md:flex-column justify-content-between w-full md:w-auto align-items-center md:align-items-end mt-5 md:mt-0">
-								<p-button icon="pi pi-shopping-cart" label="Add to Cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></p-button>
+								<span class="text-2xl font-semibold mb-2 align-self-center md:align-self-end">${{product.price}}</span>
+								<p-button icon="pi pi-shopping-cart" label="Add to Cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'" class="mb-2"></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="card m-3 border-1 surface-border">
-							<div class="product-grid-item-top">
+							<div class="flex align-items-center justify-content-between">
-								<div>
+								<div class="flex align-items-center">
-									<i class="pi pi-tag product-category-icon"></i>
+									<i class="pi pi-tag mr-2"></i>
-									<span class="product-category">{{product.category}}</span>
+									<span class="font-semibold">{{product.category}}</span>
 								</div>
-								<span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
+								<span [class]="'sm:ml-2 product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
 							</div>
-							<div class="product-grid-item-content">
+							<div class="text-center">
-								<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name"/>
+								<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" class="w-9 shadow-2 my-3 mx-0"/>
-								<div class="product-name">{{product.name}}</div>
+								<div class="text-2xl font-bold">{{product.name}}</div>
-								<div class="product-description">{{product.description}}</div>
+								<div class="mb-3">{{product.description}}</div>
 								<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
 							</div>
-							<div class="product-grid-item-bottom">
+							<div class="flex align-items-center justify-content-between">
-								<span class="product-price">${{product.price}}</span>
+								<span class="text-2xl font-semibold">${{product.price}}</span>
 								<p-button icon="pi pi-shopping-cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></p-button>
 							</div>
 						</div>
@@ -60,7 +67,7 @@
 		<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'}">
+						[responsive]="true">
 				<ng-template let-city pTemplate="item">
 					<div>{{city.name}}</div>
 				</ng-template>
@@ -71,7 +78,7 @@
 	<div class="col-12 lg:col-4">
 		<div class="card">
 			<h5>OrderList</h5>
-			<p-orderList [value]="orderCities" [listStyle]="{'height':'auto'}" header="Cities" dragdrop="true">
+			<p-orderList [value]="orderCities" header="Cities" dragdrop="true">
 				<ng-template let-city pTemplate="item">
 					<div>{{city.name}}</div>
 				</ng-template>

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

@@ -5,7 +5,6 @@ import {ProductService} from '../service/productservice';
 
 @Component({
     templateUrl: './listdemo.component.html',
-    styleUrls: ['./listdemo.scss']
 })
 export class ListDemoComponent implements OnInit {
 

src/app/demo/view/listdemo.scss

@@ -1,146 +0,0 @@
-: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%;
-		}
-	}
-}

src/app/demo/view/mediademo.scss

@@ -12,27 +12,3 @@
         box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
     }
 }
-
-.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;
-    }
-}

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

@@ -1,6 +1,6 @@
 <div class="grid p-fluid">
     <div class="col-12">
-        <div class="card">
+        <div class="card card-w-title">
             <h5>MenuBar</h5>
             <p-menubar [model]="tieredItems">
                 <ng-template pTemplate="end">
@@ -14,50 +14,50 @@
     </div>
 
     <div class="col-12">
-        <div class="card">
+        <div class="card card-w-title">
             <h5>Breadcrumb</h5>
             <p-breadcrumb [model]="breadcrumbItems" [home]="{icon: 'pi pi-home'}"></p-breadcrumb>
         </div>
     </div>
-
+    <!-- TODO: ROUTERVIEW PROBLEM ? -->
     <div class="col-12 md:col-6">
-        <div class="card">
+        <div class="card card-w-title">
             <h5>Steps</h5>
             <p-steps [model]="stepsItems" [activeIndex]="1"></p-steps>
         </div>
     </div>
 
     <div class="col-12 md:col-6">
-        <div class="card">
+        <div class="card card-w-title">
             <h5>TabMenu</h5>
             <p-tabMenu [model]="tabMenuItems" [activeItem]="tabMenuItems[0]"></p-tabMenu>
         </div>
     </div>
 
     <div class="col-12 md:col-4">
-        <div class="card">
+        <div class="card card-w-title">
             <h5>TieredMenu</h5>
             <p-tieredMenu [model]="tieredItems"></p-tieredMenu>
         </div>
     </div>
 
     <div class="col-12 md:col-4">
-        <div class="card">
+        <div class="card card-w-title">
             <h5>Plain Menu</h5>
-            <p-menu [model]="items" [style]="{'width':'100%'}"></p-menu>
+            <p-menu [model]="plainMenuItems"></p-menu>
         </div>
     </div>
 
     <div class="col-12 md:col-4">
 
-        <div class="card">
+        <div class="card card-w-title">
             <h5>Overlay Menu</h5>
             
-            <p-menu #menu [popup]="true" [model]="items" style="width:175px"></p-menu>
+            <p-menu #menu [popup]="true" [model]="menuItems"></p-menu>
-            <button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)"></button>
+            <button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)" style="width:auto"></button>
         </div>
 
-        <div class="card">
+        <div class="card card-w-title">
             <h5>ContextMenu</h5>
             Right click to display.
             <p-contextMenu [global]="true" [model]="menuItems"></p-contextMenu>
@@ -65,7 +65,7 @@
     </div>
 
     <div class="col-12 md:col-6">
-        <div class="card">
+        <div class="card card-w-title">
             <h5>MegaMenu - Horizontal</h5>
             <p-megaMenu [model]="megaMenuItems"></p-megaMenu>
 
@@ -75,7 +75,7 @@
     </div>
 
     <div class="col-12 md:col-6">
-        <div class="card">
+        <div class="card card-w-title">
             <h5>PanelMenu</h5>
             <p-panelMenu [model]="panelMenuItems"></p-panelMenu>
         </div>

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

@@ -25,6 +25,8 @@ export class MenusDemoComponent implements OnInit {
 
     menuItems: MenuItem[];
 
+    plainMenuItems: MenuItem[];
+
     ngOnInit() {
 
         this.tieredItems = [
@@ -172,7 +174,7 @@ export class MenusDemoComponent implements OnInit {
                 separator: true
             },
             {
-                label: 'Quit', icon: 'pi pi-fw pi-sign-out'
+                label: 'Home', icon: 'pi pi-fw pi-home'
             },
         ];
 
@@ -242,6 +244,36 @@ export class MenusDemoComponent implements OnInit {
             }
         ];
 
+        this.plainMenuItems = [
+            {
+                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'
+                    }
+
+                ]
+            }
+        ];
+
         this.breadcrumbItems = [];
         this.breadcrumbItems.push({ label: 'Electronics' });
         this.breadcrumbItems.push({ label: 'Computer' });

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

@@ -3,20 +3,20 @@
         <div class="card">
             <h5>Toast</h5>
             <p-toast key="tst" [baseZIndex]="99999"></p-toast>
-            <button type="button" pButton (click)="showSuccessViaToast()" label="Success" class="p-button-success mr-2 mb-2"></button>
+            <button type="button" pButton (click)="showSuccessViaToast()" label="Success" class="p-button-success mr-2"></button>
-            <button type="button" pButton (click)="showInfoViaToast()" label="Info" class="p-button-info mr-2 mb-2"></button>
+            <button type="button" pButton (click)="showInfoViaToast()" label="Info" class="p-button-info mr-2"></button>
-            <button type="button" pButton (click)="showWarnViaToast()" label="Warn" class="p-button-warning mr-2 mb-2"></button>
+            <button type="button" pButton (click)="showWarnViaToast()" label="Warn" class="p-button-warning mr-2"></button>
-            <button type="button" pButton (click)="showErrorViaToast()" label="Error" class="p-button-danger mb-2"></button>
+            <button type="button" pButton (click)="showErrorViaToast()" label="Error" class="p-button-danger"></button>
         </div>
     </div>
 
     <div class="col-12 lg:col-6">
         <div class="card z-3">
             <h5>Messages</h5>
-            <button type="button" pButton (click)="showSuccessViaMessages()" label="Success" class="p-button-success mr-2 mb-2"></button>
+            <button type="button" pButton (click)="showSuccessViaMessages()" label="Success" class="p-button-success mr-2"></button>
-            <button type="button" pButton (click)="showInfoViaMessages()" label="Info" class="p-button-info mr-2 mb-2"></button>
+            <button type="button" pButton (click)="showInfoViaMessages()" label="Info" class="p-button-info mr-2"></button>
-            <button type="button" pButton (click)="showWarnViaMessages()" label="Warn" class="p-button-warning mr-2 mb-2"></button>
+            <button type="button" pButton (click)="showWarnViaMessages()" label="Warn" class="p-button-warning mr-2"></button>
-            <button type="button" pButton (click)="showErrorViaMessages()" label="Error" class="p-button-danger mb-2"></button>
+            <button type="button" pButton (click)="showErrorViaMessages()" label="Error" class="p-button-danger"></button>
 
             <p-messages [value]="msgs"></p-messages>
         </div>
@@ -25,15 +25,15 @@
     <div class="col-12 lg:col-8">
         <div class="card">
             <h5>Inline</h5>
-            <div class="mt-4 grid align-items-center">
+            <div class="field grid">
                 <label for="username" class="col-fixed w-9rem">Username</label>
                 <div class="col">
-                    <input type="text" #username pInputText placeholder="Username" class="ng-dirty ng-invalid mr-2">
+                    <input id="username" type="text" #username pInputText placeholder="Username" class="ng-dirty ng-invalid mr-2">
                     <p-message severity="error" text="Field is required"></p-message>
                 </div>
             </div>
 
-            <div class="mt-4 grid align-items-center">
+            <div class="field grid">
                 <label for="email" class="col-fixed w-9rem">Email</label>
                 <div class="col">
                     <input type="text" #email pInputText placeholder="Email" label="email" class="ng-dirty ng-invalid mr-2">
@@ -46,10 +46,10 @@
     <div class="col-12 lg:col-4">
         <div class="card">
             <h5>Help Text</h5>
-            <div class="p-field p-fluid">
+            <div class="field p-fluid">
-                <label for="username">Username</label>
+                <label for="username2">Username</label>
-                <input id="username" type="username" aria-describedby="username-help" class="ng-dirty ng-invalid my-3" pInputText />
+                <input id="username2" type="username" aria-describedby="username-help" class="ng-dirty ng-invalid" pInputText />
-                <small id="username-help" class="p-error">Username is not available.</small>
+                <small id="username-help" class="p-error">Enter your username to reset your password.</small>
             </div>
         </div>
     </div>

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

@@ -4,16 +4,12 @@ import {Message, MessageService} from 'primeng/api';
 @Component({
     templateUrl: './messagesdemo.component.html',
     styles: [`
-        :host ::ng-deep .p-button {
-            min-width: 8em;
-        }
-
 		:host ::ng-deep .p-message {
 			margin-left: .25em;
 		}
 
         :host ::ng-deep .p-toast{
-            margin-top: 5em;
+            margin-top: 5.70em;
             z-index:99999;
         }
     `],

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

@@ -16,7 +16,7 @@
         <div class="card">
             <h4>Badge</h4>
             <h5>Numbers</h5>
-            <div class="badges">
+            <div>
                 <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>
@@ -35,7 +35,7 @@
             <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">
+            <div>
                 <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>

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

@@ -3,38 +3,38 @@
     <div class="col-12 lg:col-6">
         <div class="card p-fluid">
             <h5>Dialog</h5>
-            <p-dialog header="Dialog" [(visible)]="display" modal="modal" showEffect="fade" [style]="{width: '400px'}">
+            <p-dialog header="Dialog" [(visible)]="display" modal="modal" showEffect="fade" [style]="{width: '30vw'}" [breakpoints]="{'960px': '75vw'}">
-                <div style="line-height: 1.5">
+                <p class="line-height-3 m-0">
                     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>
                 <p-footer>
-                    <button type="button" pButton icon="pi pi-check" (click)="display=false" label="Dismiss" class="p-button-secondary"></button>
+                    <button pButton icon="pi pi-check" (click)="display=false" label="Dismiss" class="p-button-secondary"></button>
                 </p-footer>
             </p-dialog>
             <div class="grid">
                 <div class="col-12">
-                    <button type="text" (click)="display=true" pButton icon="pi pi-external-link" label="Show"></button>
+                    <button (click)="display=true" pButton icon="pi pi-external-link" label="Show"></button>
                 </div>
             </div>
         </div>
 
         <div class="card p-fluid">
             <h5>Overlay Panel</h5>
-            <div class="grid">
+            <div class="grid formgrid">
                 <div class="col-6">
                     <button type="button" pButton label="Image" (click)="op1.toggle($event)" class="p-button-success"></button>
-                    <p-overlayPanel #op1 [showCloseIcon]="true" [style]="{width:'350px'}">
+                    <p-overlayPanel #op1 [showCloseIcon]="true" [style]="{width: '375px'}">
                         <img src="assets/demo/images/nature/nature1.jpg" alt="Nature 1" style="width:100%"/>
                     </p-overlayPanel>
                 </div>
                 <div class="col-6">
                     <button type="button" pButton label="DataTable" (click)="op2.toggle($event)" class="p-button-success"></button>
-                    <p-overlayPanel #op2 [showCloseIcon]="true" [style]="{width: '400px'}">
+                    <p-overlayPanel #op2 [showCloseIcon]="true" [style]="{width: '375px'}">
                         <ng-template pTemplate>
-                            <p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" [paginator]="true" [rows]="5" (onRowSelect)="op2.hide()">
+                            <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>
@@ -45,7 +45,7 @@
                                 <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><img src="assets/demo/images/product/{{product.image}}" [alt]="product.image" width="100" class="shadow-2"/></td>
                                         <td>{{formatCurrency(product.price)}}</td>
                                     </tr>
                                 </ng-template>
@@ -61,7 +61,7 @@
         <div class="card p-fluid">
             <h5>Confirmation</h5>
             <p-confirmDialog header="Confirmation" key="confirm1" icon="pi pi-exclamation-triangle" message="Are you sure you want to proceed?"
-                             [style]="{width: '300px'}" acceptButtonStyleClass="p-button-text" rejectButtonStyleClass="p-button-text"></p-confirmDialog>
+                             [style]="{width: '350px'}" acceptButtonStyleClass="p-button-text" rejectButtonStyleClass="p-button-text"></p-confirmDialog>
             <div class="grid">
                 <div class="col-12">
                     <button type="text" (click)="confirm1()" pButton icon="pi pi-trash" label="Delete" class="p-button-danger"></button>
@@ -91,10 +91,10 @@
                 <h3 style="font-weight:normal">Full Screen Sidebar</h3>
             </p-sidebar>
 
-            <button pButton type="button" (click)="visibleSidebar1 = true" icon="pi pi-arrow-right" class="p-button-warning"></button>
+            <button pButton type="button" (click)="visibleSidebar1 = true" icon="pi pi-arrow-right" class="p-button-warning mr-2"></button>
-            <button pButton type="button" (click)="visibleSidebar2 = true" icon="pi pi-arrow-left" class="p-button-warning"></button>
+            <button pButton type="button" (click)="visibleSidebar2 = true" icon="pi pi-arrow-left" class="p-button-warning mr-2"></button>
-            <button pButton type="button" (click)="visibleSidebar3 = true" icon="pi pi-arrow-down" class="p-button-warning"></button>
+            <button pButton type="button" (click)="visibleSidebar3 = true" icon="pi pi-arrow-down" class="p-button-warning mr-2"></button>
-            <button pButton type="button" (click)="visibleSidebar4 = true" icon="pi pi-arrow-up" class="p-button-warning"></button>
+            <button pButton type="button" (click)="visibleSidebar4 = true" icon="pi pi-arrow-up" class="p-button-warning mr-2"></button>
             <button pButton type="button" (click)="visibleSidebar5 = true" icon="pi pi-external-link" class="p-button-warning"></button>
         </div>
     </div>

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

@@ -6,7 +6,6 @@ import {ProductService} from '../service/productservice';
 
 @Component({
     templateUrl: './overlaysdemo.component.html',
-    styleUrls: ['./overlaysdemo.scss'],
     providers: [ConfirmationService, MessageService]
 })
 export class OverlaysDemoComponent implements OnInit {

src/app/demo/view/overlaysdemo.scss

@@ -1,14 +0,0 @@
-.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;
-}
-
-@media (max-width: 1024px){
-	:host ::ng-deep .p-dialog{
-		margin: 0 20px;
-	}
-}

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

@@ -1,18 +1,17 @@
 <div class="grid">
     <div class="col-12">
-        <div class="card panel-demo">
+        <div class="card">
             <h5>Toolbar</h5>
             <p-toolbar>
                 <div class="p-toolbar-group-left flex flex-wrap">
-                    <button pButton type="button" label="New" icon="pi pi-plus"></button>
+                    <button pButton type="button" label="New" icon="pi pi-plus" class="mr-2 sm:mb-2"></button>
-                    <button pButton type="button" label="Update" class="p-button-secondary"
+                    <button pButton type="button" label="Open" icon="pi pi-folder-open" class="p-button-secondary mr-2"></button>
-                            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" icon="pi pi-check" class="p-button-success mr-2"></button>
-                    <button pButton type="button" class="p-button-help" icon="pi pi-print"></button>
+                    <button pButton type="button" icon="pi pi-trash" class="p-button-warning mr-2"></button>
-                    <button pButton type="button" class="p-button-danger" icon="pi pi-trash"></button>
+                    <button pButton type="button" icon="pi pi-print" class="p-button-danger sm:mb-2"></button>
                 </div>
 
                 <div class="p-toolbar-group-right">
@@ -26,7 +25,7 @@
         <div class="card">
             <h5>AccordionPanel</h5>
             <p-accordion>
-                <p-accordionTab header="Header I" [selected]="true">
+                <p-accordionTab header="Header I" [selected]="true" class="line-height-3 m-0">
                     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
@@ -36,7 +35,7 @@
                     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
                     est laborum.
                 </p-accordionTab>
-                <p-accordionTab header="Header II">
+                <p-accordionTab header="Header II" class="line-height-3 m-0">
                     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
@@ -45,7 +44,7 @@
                     voluptatem sequi nesciunt.
                     Consectetur, adipisci velit, sed quia non numquam eius modi.
                 </p-accordionTab>
-                <p-accordionTab header="Header III">
+                <p-accordionTab header="Header III" class="line-height-3 m-0">
                     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
@@ -60,7 +59,7 @@
         <div class="card">
             <h5>TabView</h5>
             <p-tabView orientation="left">
-                <p-tabPanel header="Header I">
+                <p-tabPanel header="Header I" class="line-height-3 m-0">
                     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
@@ -70,7 +69,7 @@
                     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
                     est laborum.
                 </p-tabPanel>
-                <p-tabPanel header="Header II">
+                <p-tabPanel header="Header II" class="line-height-3 m-0">
                     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
@@ -79,7 +78,7 @@
                     voluptatem sequi nesciunt.
                     Consectetur, adipisci velit, sed quia non numquam eius modi.
                 </p-tabPanel>
-                <p-tabPanel header="Header III">
+                <p-tabPanel header="Header III" class="line-height-3 m-0">
                     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
@@ -95,7 +94,7 @@
     <div class="col-12 md:col-6">
         <div class="card">
             <h5>Panel</h5>
-            <p-panel header="Header" [toggleable]="true">
+            <p-panel header="Header" [toggleable]="true" class="line-height-3 m-0">
                 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
@@ -108,7 +107,7 @@
 
         <div class="card">
             <h5>Fieldset</h5>
-            <p-fieldset legend="Legend" toggleable="true">
+            <p-fieldset legend="Legend" toggleable="true" class="line-height-3 m-0">
                 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
@@ -120,10 +119,10 @@
         </div>
 
         <div class="card">
-            <div class="flex align-items-center justify-content-between mb-0 p-3 pb-0">
+            <div class="flex align-items-center justify-content-between mb-0">
                 <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"
+                <button pButton type="button" icon="pi pi-plus" class="p-button-text"
                         (click)="menu.toggle($event)"></button>
             </div>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
@@ -142,24 +141,24 @@
             <div class="grid">
                 <div class="col-5 flex align-items-center justify-content-center">
                     <div class="p-fluid">
-                        <div class="p-field mb-3">
+                        <div class="field">
                             <label for="username">Username</label>
                             <input pInputText id="username" type="text"/>
                         </div>
-                        <div class="p-field mb-3">
+                        <div class="field">
                             <label for="password">Password</label>
                             <input pInputText id="password" type="password"/>
                         </div>
-                        <p-button label="Login" styleClass="m-0"></p-button>
+                        <p-button label="Login" class="mt-2"></p-button>
                     </div>
                 </div>
-                <div class="col-1">
+                <div class="col-2">
                     <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,
+                    <p class="line-height-3 m-0">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
@@ -169,7 +168,7 @@
                         <span class="p-tag">Badge</span>
                     </p-divider>
 
-                    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
+                    <p class="line-height-3 m-0">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.
@@ -179,7 +178,7 @@
                         <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
+                    <p class="line-height-3 m-0">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.
@@ -193,21 +192,21 @@
     <div class="col-12">
         <div class="card">
             <h5>Splitter</h5>
-            <p-splitter [style]="{'height': '300px'}" [panelSizes]="[20,80]" [minSizes]="[10,0]" styleClass="mb-5">
+            <p-splitter [style]="{'height': '300px'}" [minSizes]="[10,0]" styleClass="mb-5" [panelStyle]="{'overflow': 'scroll'}">
-                <ng-template pTemplate="panel">
+                <ng-template pTemplate>
-                    <div class="col flex align-items-center justify-content-center p-2" style="overflow: auto">
+                    <p class="col m-3">
                         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>
                 </ng-template>
-                <ng-template pTemplate="panel">
+                <ng-template pTemplate>
-                    <p-splitter layout="vertical" [panelSizes]="[30,70]" [minSizes]="[10,10]" panelStyleClass="splitter-overflow">
+                    <p-splitter layout="vertical" [panelSizes]="[30,70]" [minSizes]="[10,10]" [style]="{'overflow':'scroll'}">
-                        <ng-template pTemplate="panel">
+                        <ng-template pTemplate>
-                            <div class="d-flex align-items-center justify-content-center p-2">
+                            <p class="col m-3">
                                 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
@@ -217,17 +216,17 @@
                                 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>
+                            </p>
                         </ng-template>
-                        <ng-template pTemplate="panel">
+                        <ng-template pTemplate>
-                            <div class="d-flex align-items-center justify-content-center p-2">
+                            <p class="col m-3">
                                 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>
+                            </p>
                         </ng-template>
                     </p-splitter>
                 </ng-template>

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

@@ -3,27 +3,6 @@ import {MenuItem} from 'primeng/api';
 
 @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 {
 

src/assets/demo/data/treenodes.json

@@ -0,0 +1,54 @@
+{
+    "root": [
+        {
+            "key": "0",
+            "label": "Documents",
+            "data": "Documents Folder",
+            "icon": "pi pi-fw pi-inbox",
+            "children": [{
+                "key": "0-0",
+                "label": "Work",
+                "data": "Work Folder",
+                "icon": "pi pi-fw pi-cog",
+                "children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }]
+            },
+            {
+                "key": "0-1",
+                "label": "Home",
+                "data": "Home Folder",
+                "icon": "pi pi-fw pi-home",
+                "children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }]
+            }]
+        },
+        {
+            "key": "1",
+            "label": "Events",
+            "data": "Events Folder",
+            "icon": "pi pi-fw pi-calendar",
+            "children": [
+                { "key": "1-0", "label": "Meeting", "icon": "pi pi-fw pi-calendar-plus", "data": "Meeting" },
+                { "key": "1-1", "label": "Product Launch", "icon": "pi pi-fw pi-calendar-plus", "data": "Product Launch" },
+                { "key": "1-2", "label": "Report Review", "icon": "pi pi-fw pi-calendar-plus", "data": "Report Review" }]
+        },
+        {
+            "key": "2",
+            "label": "Movies",
+            "data": "Movies Folder",
+            "icon": "pi pi-fw pi-star",
+            "children": [{
+                "key": "2-0",
+                "icon": "pi pi-fw pi-star",
+                "label": "Al Pacino",
+                "data": "Pacino Movies",
+                "children": [{ "key": "2-0-0", "label": "Scarface", "icon": "pi pi-fw pi-video", "data": "Scarface Movie" }, { "key": "2-0-1", "label": "Serpico", "icon": "pi pi-fw pi-video", "data": "Serpico Movie" }]
+            },
+            {
+                "key": "2-1",
+                "label": "Robert De Niro",
+                "icon": "pi pi-fw pi-star",
+                "data": "De Niro Movies",
+                "children": [{ "key": "2-1-0", "label": "Goodfellas", "icon": "pi pi-fw pi-video", "data": "Goodfellas Movie" }, { "key": "2-1-1", "label": "Untouchables", "icon": "pi pi-fw pi-video", "data": "Untouchables Movie" }]
+            }]
+        }
+    ]
+}

src/styles.scss

@@ -8,66 +8,8 @@
 @import "../node_modules/@fullcalendar/timegrid/main.min.css";
 @import "assets/demo/flags/flags.css";
 
-.list-demo {
+.product-badge {
-    .product-name {
+    border-radius: var(--border-radius);
-        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-badge {
-        border-radius: 2px;
     padding: .25em .5rem;
     text-transform: uppercase;
     font-weight: 700;
@@ -88,66 +30,74 @@
         background: #FEEDAF;
         color: #8A5340;
     }
+}
+
+
+.customer-badge {
+    border-radius: var(--border-radius);
+    padding: .25em .5rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: .3px;
+
+    &.status-qualified {
+        background: #C8E6C9;
+        color: #256029;
     }
 
-    .product-grid-item {
+    &.status-unqualified {
-        margin: .5em;
+        background: #FFCDD2;
-        border: 1px solid #dee2e6;
+        color: #C63737;
-
-        .product-grid-item-top,
-        .product-grid-item-bottom {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
     }
 
-        img {
+    &.status-negotiation {
-            width: 75%;
+        background: #FEEDAF;
-            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+        color: #8A5340;
-            margin: 2rem 0;
     }
 
-        .product-grid-item-content {
+    &.status-new {
-            text-align: center;
+        background: #B3E5FC;
+        color: #23547B;
     }
 
-        .product-price {
+    &.status-renewal {
-            font-size: 1.5rem;
+        background: #ECCFFF;
-            font-weight: 600;
+        color: #694382;
-        }
     }
 
-    @media screen and (max-width: 576px) {
+    &.status-proposal {
-        .product-list-item {
+        background: #FFD8B2;
-            flex-direction: column;
+        color: #805B36;
-            align-items: center;
+    }
+}
 
-            img {
+.order-badge {
-                width: 75%;
+    border-radius: var(--border-radius);
-                margin: 2rem 0;
+    padding: .25em .5rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: .3px;
+
+    &.order-delivered {
+        background: #C8E6C9;
+        color: #256029;
     }
 
-            .product-list-detail {
+    &.order-cancelled {
-                text-align: center;
+        background: #FFCDD2;
+        color: #C63737;
     }
 
-            .product-price {
+    &.order-pending {
-                align-self: center;
+        background: #FEEDAF;
+        color: #8A5340;
     }
 
-            .product-list-action {
+    &.order-returned {
-                display: flex;
+        background: #ECCFFF;
-                flex-direction: column;
+        color: #694382;
-            }
-
-            .product-list-action {
-                margin-top: 2rem;
-                flex-direction: row;
-                justify-content: space-between;
-                align-items: center;
-                width: 100%;
-            }
-        }
     }
 }
 
@@ -196,45 +146,6 @@
         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;
-        }
-    }
-
     .p-progressbar-value.ui-widget-header {
         background: #607d8b;
     }
@@ -254,58 +165,6 @@
         padding: 1rem;
     }
 
-    .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;
-        }
-    }
 
     @media screen and (max-width: 960px) {
         .p-datatable {
@@ -358,30 +217,6 @@
         flex-wrap: wrap;
     }
 
-    .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;
-        }
-    }
-
     /* Responsive */
     .datatable-responsive .p-datatable-tbody > tr > td .p-column-title {
         display: none;