Update to new structure

src/app/demo/components/uikit/overlays/overlaysdemo-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { OverlaysDemoComponent } from './overlaysdemo.component';
+
+@NgModule({
+    imports: [RouterModule.forChild([
+        { path: '', component: OverlaysDemoComponent }
+    ])],
+    exports: [RouterModule]
+})
+export class OverlaysDemoRoutingModule { }

src/app/demo/components/uikit/overlays/overlaysdemo.component.html

@@ -0,0 +1,124 @@
+<div class="grid">
+    <p-toast></p-toast>
+    <div class="col-12 lg:col-6">
+        <div class="card p-fluid">
+            <h5>Dialog</h5>
+            <p-dialog header="Dialog" [(visible)]="display" [modal]="true" showEffect="fade" [style]="{width: '30vw'}" [breakpoints]="{'960px': '75vw'}">
+                <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.
+                </p>
+                <ng-template pTemplate="footer">
+                        <button pButton icon="pi pi-check" (click)="display=false" label="Ok" class="p-button-outlined"></button>
+                </ng-template>
+            </p-dialog>
+            <div class="grid">
+                <div class="col-12">
+                    <button (click)="display=true" pButton icon="pi pi-external-link" label="Show" style="width:auto;"></button>
+                </div>
+            </div>
+        </div>
+
+        <div class="card p-fluid">
+            <h5>Overlay Panel</h5>
+            <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: '450px'}">
+                        <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: '450px'}">
+                        <ng-template pTemplate>
+                            <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>
+                                    </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>
+                                    </tr>
+                                </ng-template>
+                            </p-table>
+                        </ng-template>
+                    </p-overlayPanel>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12 lg:col-6">
+        <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: '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" style="width:auto;"></button>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <h5>Sidebar</h5>
+            <p-sidebar [(visible)]="visibleSidebar1" [baseZIndex]="10000">
+                <h3 style="font-weight:normal">Left Sidebar</h3>
+            </p-sidebar>
+
+            <p-sidebar [(visible)]="visibleSidebar2" position="right" [baseZIndex]="10000">
+                <h3 style="font-weight:normal">Right Sidebar</h3>
+            </p-sidebar>
+
+            <p-sidebar [(visible)]="visibleSidebar3" position="top" [baseZIndex]="10000">
+                <h3 style="font-weight:normal">Top Sidebar</h3>
+            </p-sidebar>
+
+            <p-sidebar [(visible)]="visibleSidebar4" position="bottom" [baseZIndex]="10000">
+                <h3 style="font-weight:normal">Bottom Sidebar</h3>
+            </p-sidebar>
+
+            <p-sidebar [(visible)]="visibleSidebar5" [fullScreen]="true" [baseZIndex]="10000">
+                <h3 style="font-weight:normal">Full Screen Sidebar</h3>
+            </p-sidebar>
+
+            <button pButton 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 mr-2"></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 mr-2"></button>
+            <button pButton type="button" (click)="visibleSidebar5 = true" icon="pi pi-external-link" class="p-button-warning"></button>
+        </div>
+    </div>
+
+    <div class="col-12 lg:col-6">
+        <div class="card">
+            <h5>Tooltip</h5>
+            <div class="formgroup-inline">
+                <div class="field">
+                    <label for="firstname5" class="p-sr-only">Username</label>
+                    <input id="firstname5" type="text" pInputText placeholder="Username" pTooltip="Enter your username">
+                </div>
+                <button pButton pRipple type="button" label="Save" icon="pi pi-check" pTooltip="Click to proceed"></button>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12 lg:col-6">
+        <div class="card">
+            <h5>ConfirmPopup</h5>
+
+            <p-toast></p-toast>
+            <button (click)="confirm2($event)" pButton icon="pi pi-check" label="Confirm"></button>
+            <p-confirmPopup key="confirm2"></p-confirmPopup>
+        </div>
+    </div>
+</div>

src/app/demo/components/uikit/overlays/overlaysdemo.component.ts

@@ -0,0 +1,79 @@
+import { Component, OnInit } from '@angular/core';
+import { ConfirmationService, MessageService } from 'primeng/api';
+import { Product } from 'src/app/demo/api/product';
+import { ProductService } from 'src/app/demo/service/product.service';
+
+@Component({
+    templateUrl: './overlaysdemo.component.html',
+    providers: [ConfirmationService, MessageService]
+})
+export class OverlaysDemoComponent implements OnInit {
+
+    images: any[] = [];
+
+    display: boolean = false;
+
+    products: Product[] = [];
+
+    selectedProduct: Product = {};
+
+    visibleSidebar1: boolean = false;
+
+    visibleSidebar2: boolean = false;
+
+    visibleSidebar3: boolean = false;
+
+    visibleSidebar4: boolean = false;
+
+    visibleSidebar5: boolean = false;
+
+    constructor(private productService: ProductService, private confirmationService: ConfirmationService, private messageService: MessageService) { }
+
+    ngOnInit() {
+        this.productService.getProductsSmall().then(products => this.products = products);
+
+        this.images = [];
+        this.images.push({
+            source: 'assets/demo/images/sopranos/sopranos1.jpg',
+            thumbnail: 'assets/demo/images/sopranos/sopranos1_small.jpg', title: 'Sopranos 1'
+        });
+        this.images.push({
+            source: 'assets/demo/images/sopranos/sopranos2.jpg',
+            thumbnail: 'assets/demo/images/sopranos/sopranos2_small.jpg', title: 'Sopranos 2'
+        });
+        this.images.push({
+            source: 'assets/demo/images/sopranos/sopranos3.jpg',
+            thumbnail: 'assets/demo/images/sopranos/sopranos3_small.jpg', title: 'Sopranos 3'
+        });
+        this.images.push({
+            source: 'assets/demo/images/sopranos/sopranos4.jpg',
+            thumbnail: 'assets/demo/images/sopranos/sopranos4_small.jpg', title: 'Sopranos 4'
+        });
+    }
+
+    confirm1() {
+        this.confirmationService.confirm({
+            key: 'confirm1',
+            message: 'Are you sure to perform this action?'
+        });
+    }
+
+    confirm2(event: Event) {
+        this.confirmationService.confirm({
+            key: 'confirm2',
+            target: event.target || new EventTarget,
+            message: 'Are you sure that you want to proceed?',
+            icon: 'pi pi-exclamation-triangle',
+            accept: () => {
+                this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted' });
+            },
+            reject: () => {
+                this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' });
+            }
+        });
+    }
+
+    formatCurrency(value: number) {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    }
+}

src/app/demo/components/uikit/overlays/overlaysdemo.module.ts

@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { OverlaysDemoComponent } from './overlaysdemo.component';
+import { OverlaysDemoRoutingModule } from './overlaysdemo-routing.module';
+import { ToastModule } from 'primeng/toast';
+import { DialogModule } from 'primeng/dialog';
+import { ButtonModule } from 'primeng/button';
+import { OverlayPanelModule } from 'primeng/overlaypanel';
+import { TableModule } from 'primeng/table';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { SidebarModule } from 'primeng/sidebar';
+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]
+})
+export class OverlaysDemoModule { }