Update to new structure

src/app/demo/components/pages/crud/crud-routing.module.ts

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

src/app/demo/components/pages/crud/crud.component.html

@@ -0,0 +1,171 @@
+<div class="grid">
+    <div class="col-12">
+        <div class="card px-6 py-6">
+            <p-toast></p-toast>
+            <p-toolbar styleClass="mb-4">
+                <ng-template pTemplate="left">
+                    <div class="my-2">
+                        <button pButton pRipple label="New" icon="pi pi-plus" class="p-button-success mr-2" (click)="openNew()"></button>
+                        <button pButton pRipple label="Delete" icon="pi pi-trash" class="p-button-danger" (click)="deleteSelectedProducts()" [disabled]="!selectedProducts || !selectedProducts.length"></button>
+                    </div>
+                </ng-template>
+
+                <ng-template pTemplate="right">
+                    <p-fileUpload mode="basic" accept="image/*" [maxFileSize]="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block"></p-fileUpload>
+                    <button pButton pRipple label="Export" icon="pi pi-upload" class="p-button-help" (click)="dt.exportCSV()"></button>
+                </ng-template>
+            </p-toolbar>
+
+            <p-table #dt [value]="products" [columns]="cols" responsiveLayout="scroll" [rows]="10" [globalFilterFields]="['name','country.name','representative.name','status']" [rows]="10" [paginator]="true" [rowsPerPageOptions]="[10,20,30]" [showCurrentPageReport]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [(selection)]="selectedProducts" selectionMode="multiple" [rowHover]="true" dataKey="id">
+                <ng-template pTemplate="caption">
+                    <div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
+                        <h5 class="m-0">Manage Products</h5>
+                        <span class="block mt-2 md:mt-0 p-input-icon-left">
+                            <i class="pi pi-search"></i>
+                            <input pInputText type="text" (input)="onGlobalFilter(dt, $event)" placeholder="Search..."  class="w-full sm:w-auto"/>
+                        </span>
+                    </div>
+                </ng-template>
+                <ng-template pTemplate="header">
+                    <tr>
+                        <th style="width: 3rem">
+                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+                        </th>
+                        <th pSortableColumn="code">Code <p-sortIcon field="code"></p-sortIcon></th>
+                        <th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
+                        <th>Image</th>
+                        <th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
+                        <th pSortableColumn="category">Category <p-sortIcon field="category"></p-sortIcon></th>
+                        <th pSortableColumn="rating">Reviews <p-sortIcon field="rating"></p-sortIcon></th>
+                        <th pSortableColumn="inventoryStatus">Status <p-sortIcon field="inventoryStatus"></p-sortIcon></th>
+                        <th></th>
+                    </tr>
+                </ng-template>
+                <ng-template pTemplate="body" let-product>
+                    <tr>
+                        <td>
+                            <p-tableCheckbox [value]="product"></p-tableCheckbox>
+                        </td>
+                        <td style="width:14%; min-width:10rem;"><span class="p-column-title">Code</span>
+                            {{product.code || product.id}}
+                        </td>
+                        <td style="width:14%; min-width:10rem;">
+                            <span class="p-column-title">Name</span>
+                            {{product.name}}
+                        </td>
+                        <td style="width:14%; min-width:10rem;"><span class="p-column-title">Image</span>
+                            <img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" />
+                        </td>
+                        <td style="width:14%; min-width:8rem;">
+                            <span class="p-column-title">Price</span>
+                            {{product.price | currency:'USD'}}
+                        </td>
+                        <td style="width:14%; min-width:10rem;">
+                            <span class="p-column-title">Category</span>
+                            {{product.category}}
+                        </td>
+                        <td style="width:14%; min-width: 10rem;"><span class="p-column-title">Reviews</span>
+                            <p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
+                        </td>
+                        <td style="width:14%; min-width: 10rem;"><span class="p-column-title">Status</span>
+                            <span [class]="'product-badge status-' + (product.inventoryStatus ? product.inventoryStatus.toLowerCase() : '')">{{product.inventoryStatus}}</span>
+                        </td>
+                        <td>
+                            <div class="flex">
+                                <button pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" (click)="editProduct(product)"></button>
+                                <button pButton pRipple icon="pi pi-trash" class="p-button-rounded p-button-warning" (click)="deleteProduct(product)"></button>
+                            </div>
+                        </td>
+                    </tr>
+                </ng-template>
+            </p-table>
+        </div>
+
+        <p-dialog [(visible)]="productDialog" [style]="{width: '450px'}" header="Product Details" [modal]="true" class="p-fluid">
+            <ng-template pTemplate="content">
+                <img [src]="'assets/demo/images/product/' + product.image" [alt]="product.image" width="150" class="mt-0 mx-auto mb-5 block shadow-2" *ngIf="product.image">
+                <div class="field">
+                    <label for="name">Name</label>
+                    <input type="text" pInputText id="name" [(ngModel)]="product.name" required autofocus [ngClass]="{'ng-invalid ng-dirty' : submitted && !product.name}"/>
+                    <small class="ng-dirty ng-invalid" *ngIf="submitted && !product.name">Name is required.</small>
+                </div>
+                <div class="field">
+                    <label for="description">Description</label>
+                    <textarea id="description" pInputTextarea [(ngModel)]="product.description" required rows="3" cols="20"></textarea>
+                </div>
+
+                <div class="field">
+                    <label for="status">Inventory Status</label>
+                    <p-dropdown id="status" [options]="statuses" optionLabel="label" [(ngModel)]="product.inventoryStatus" placeholder="Select a Status">
+                        <ng-template pTemplate="selectedItem">
+                            <span *ngIf="product && product.inventoryStatus" [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
+                        </ng-template>
+                        <ng-template let-status pTemplate="status">
+                            <span [class]="'product-badge status-' + status.value.toLowerCase()">{{status.label}}</span>
+                        </ng-template>
+                    </p-dropdown>
+                </div>
+
+                <div class="field">
+                    <label class="mb-3">Category</label>
+                    <div class="formgrid grid">
+                        <div class="field-radiobutton col-6">
+                            <p-radioButton id="category1" name="category" value="Accessories" [(ngModel)]="product.category"></p-radioButton>
+                            <label for="category1">Accessories</label>
+                        </div>
+                        <div class="field-radiobutton col-6">
+                            <p-radioButton id="category2" name="category" value="Clothing" [(ngModel)]="product.category"></p-radioButton>
+                            <label for="category2">Clothing</label>
+                        </div>
+                        <div class="field-radiobutton col-6">
+                            <p-radioButton id="category3" name="category" value="Electronics" [(ngModel)]="product.category"></p-radioButton>
+                            <label for="category3">Electronics</label>
+                        </div>
+                        <div class="field-radiobutton col-6">
+                            <p-radioButton id="category4" name="category" value="Fitness" [(ngModel)]="product.category"></p-radioButton>
+                            <label for="category4">Fitness</label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="formgrid grid">
+                    <div class="field col">
+                        <label for="price">Price</label>
+                        <p-inputNumber id="price" [(ngModel)]="product.price" mode="currency" currency="USD" locale="en-US"></p-inputNumber>
+                    </div>
+                    <div class="field col">
+                        <label for="quantity">Quantity</label>
+                        <p-inputNumber id="quantity" [(ngModel)]="product.quantity"></p-inputNumber>
+                    </div>
+                </div>
+            </ng-template>
+
+            <ng-template pTemplate="footer">
+                <button pButton pRipple label="Cancel" icon="pi pi-times" class="p-button-text" (click)="hideDialog()"></button>
+                <button pButton pRipple label="Save" icon="pi pi-check" class="p-button-text" (click)="saveProduct()"></button>
+            </ng-template>
+        </p-dialog>
+
+        <p-dialog [(visible)]="deleteProductDialog" header="Confirm" [modal]="true" [style]="{width:'450px'}">
+            <div class="flex align-items-center justify-content-center">
+                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
+                <span *ngIf="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
+            </div>
+            <ng-template pTemplate="footer">
+                <button pButton pRipple icon="pi pi-times" class="p-button-text" label="No" (click)="deleteProductDialog = false"></button>
+                <button pButton pRipple icon="pi pi-check" class="p-button-text" label="Yes" (click)="confirmDelete()"></button>
+            </ng-template>
+        </p-dialog>
+
+        <p-dialog [(visible)]="deleteProductsDialog" header="Confirm" [modal]="true" [style]="{width:'450px'}">
+            <div class="flex align-items-center justify-content-center">
+                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
+                <span>Are you sure you want to delete selected products?</span>
+            </div>
+            <ng-template pTemplate="footer">
+                <button pButton pRipple icon="pi pi-times" class="p-button-text" label="No" (click)="deleteProductsDialog = false"></button>
+                <button pButton pRipple icon="pi pi-check" class="p-button-text" label="Yes" (click)="confirmDeleteSelected()"></button>
+            </ng-template>
+        </p-dialog>
+    </div>
+</div>

src/app/demo/components/pages/crud/crud.component.ts

@@ -0,0 +1,141 @@
+import { Component, OnInit } from '@angular/core';
+import { Product } from 'src/app/demo/api/product';
+import { MessageService } from 'primeng/api';
+import { Table } from 'primeng/table';
+import { ProductService } from 'src/app/demo/service/product.service';
+
+@Component({
+    templateUrl: './crud.component.html',
+    providers: [MessageService]
+})
+export class CrudComponent implements OnInit {
+
+    productDialog: boolean = false;
+
+    deleteProductDialog: boolean = false;
+
+    deleteProductsDialog: boolean = false;
+
+    products: Product[] = [];
+
+    product: Product = {};
+
+    selectedProducts: Product[] = [];
+
+    submitted: boolean = false;
+
+    cols: any[] = [];
+
+    statuses: any[] = [];
+
+    rowsPerPageOptions = [5, 10, 20];
+
+    constructor(private productService: ProductService, private messageService: MessageService) { }
+
+    ngOnInit() {
+        this.productService.getProducts().then(data => this.products = data);
+
+        this.cols = [
+            { field: 'product', header: 'Product' },
+            { field: 'price', header: 'Price' },
+            { field: 'category', header: 'Category' },
+            { field: 'rating', header: 'Reviews' },
+            { field: 'inventoryStatus', header: 'Status' }
+        ];
+
+        this.statuses = [
+            { label: 'INSTOCK', value: 'instock' },
+            { label: 'LOWSTOCK', value: 'lowstock' },
+            { label: 'OUTOFSTOCK', value: 'outofstock' }
+        ];
+    }
+
+    openNew() {
+        this.product = {};
+        this.submitted = false;
+        this.productDialog = true;
+    }
+
+    deleteSelectedProducts() {
+        this.deleteProductsDialog = true;
+    }
+
+    editProduct(product: Product) {
+        this.product = { ...product };
+        this.productDialog = true;
+    }
+
+    deleteProduct(product: Product) {
+        this.deleteProductDialog = true;
+        this.product = { ...product };
+    }
+
+    confirmDeleteSelected() {
+        this.deleteProductsDialog = false;
+        this.products = this.products.filter(val => !this.selectedProducts.includes(val));
+        this.messageService.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
+        this.selectedProducts = [];
+    }
+
+    confirmDelete() {
+        this.deleteProductDialog = false;
+        this.products = this.products.filter(val => val.id !== this.product.id);
+        this.messageService.add({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 });
+        this.product = {};
+    }
+
+    hideDialog() {
+        this.productDialog = false;
+        this.submitted = false;
+    }
+
+    saveProduct() {
+        this.submitted = true;
+
+        if (this.product.name?.trim()) {
+            if (this.product.id) {
+                // @ts-ignore
+                this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value : this.product.inventoryStatus;
+                this.products[this.findIndexById(this.product.id)] = this.product;
+                this.messageService.add({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 });
+            } else {
+                this.product.id = this.createId();
+                this.product.code = this.createId();
+                this.product.image = 'product-placeholder.svg';
+                // @ts-ignore
+                this.product.inventoryStatus = this.product.inventoryStatus ? this.product.inventoryStatus.value : 'INSTOCK';
+                this.products.push(this.product);
+                this.messageService.add({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
+            }
+
+            this.products = [...this.products];
+            this.productDialog = false;
+            this.product = {};
+        }
+    }
+
+    findIndexById(id: string): number {
+        let index = -1;
+        for (let i = 0; i < this.products.length; i++) {
+            if (this.products[i].id === id) {
+                index = i;
+                break;
+            }
+        }
+
+        return index;
+    }
+
+    createId(): string {
+        let id = '';
+        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        for (let i = 0; i < 5; i++) {
+            id += chars.charAt(Math.floor(Math.random() * chars.length));
+        }
+        return id;
+    }
+
+    onGlobalFilter(table: Table, event: Event) {
+        table.filterGlobal((event.target as HTMLInputElement).value, 'contains');
+    }
+}

src/app/demo/components/pages/crud/crud.module.ts

@@ -0,0 +1,41 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { CrudRoutingModule } from './crud-routing.module';
+import { CrudComponent } from './crud.component';
+import { TableModule } from 'primeng/table';
+import { FileUploadModule } from 'primeng/fileupload';
+import { ButtonModule } from 'primeng/button';
+import { RippleModule } from 'primeng/ripple';
+import { ToastModule } from 'primeng/toast';
+import { ToolbarModule } from 'primeng/toolbar';
+import { RatingModule } from 'primeng/rating';
+import { InputTextModule } from 'primeng/inputtext';
+import { InputTextareaModule } from 'primeng/inputtextarea';
+import { DropdownModule } from 'primeng/dropdown';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { InputNumberModule } from 'primeng/inputnumber';
+import { DialogModule } from 'primeng/dialog';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CrudRoutingModule,
+        TableModule,
+        FileUploadModule,
+        FormsModule,
+        ButtonModule,
+        RippleModule,
+        ToastModule,
+        ToolbarModule,
+        RatingModule,
+        InputTextModule,
+        InputTextareaModule,
+        DropdownModule,
+        RadioButtonModule,
+        InputNumberModule,
+        DialogModule
+    ],
+    declarations: [CrudComponent]
+})
+export class CrudModule { }

src/app/demo/components/pages/empty/emptydemo-routing.module.ts

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

src/app/demo/components/pages/empty/emptydemo.component.html

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

src/app/demo/components/pages/empty/emptydemo.component.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+    templateUrl: './emptydemo.component.html'
+})
+export class EmptyDemoComponent { }

src/app/demo/components/pages/empty/emptydemo.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { EmptyDemoRoutingModule } from './emptydemo-routing.module';
+import { EmptyDemoComponent } from './emptydemo.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        EmptyDemoRoutingModule
+    ],
+    declarations: [EmptyDemoComponent]
+})
+export class EmptyDemoModule { }

src/app/demo/components/pages/pages-routing.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+    imports: [RouterModule.forChild([
+        { path: 'crud', loadChildren: () => import('./crud/crud.module').then(m => m.CrudModule) },
+        { path: 'empty', loadChildren: () => import('./empty/emptydemo.module').then(m => m.EmptyDemoModule) },
+        { path: 'timeline', loadChildren: () => import('./timeline/timelinedemo.module').then(m => m.TimelineDemoModule) }
+    ])],
+    exports: [RouterModule]
+})
+export class PagesRoutingModule { }

src/app/demo/components/pages/pages.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PagesRoutingModule } from './pages-routing.module';
+
+@NgModule({
+    declarations: [],
+    imports: [
+        CommonModule,
+        PagesRoutingModule
+    ]
+})
+export class PagesModule { }

src/app/demo/components/pages/timeline/timelinedemo-routing.module.ts

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

src/app/demo/components/pages/timeline/timelinedemo.component.html

@@ -0,0 +1,90 @@
+<div class="grid">
+    <div class="col-12 md:col-6">
+        <div class="card">
+            <h5>Left Align</h5>
+            <p-timeline [value]="events1">
+                <ng-template pTemplate="content" let-event>
+                    {{event.status}}
+                </ng-template>
+            </p-timeline>
+        </div>
+    </div>
+    <div class="col-12 md:col-6">
+        <div class="card">
+            <h5>Right Align</h5>
+            <p-timeline [value]="events1" align="right">
+                <ng-template pTemplate="content" let-event>
+                    {{event.status}}
+                </ng-template>
+            </p-timeline>
+        </div>
+    </div>
+    <div class="col-12 md:col-6">
+        <div class="card">
+            <h5>Alternate Align</h5>
+            <p-timeline [value]="events1" align="alternate">
+                <ng-template pTemplate="content" let-event>
+                    {{event.status}}
+                </ng-template>
+            </p-timeline>
+        </div>
+    </div>
+    <div class="col-12 md:col-6">
+        <div class="card">
+            <h5>Opposite Content</h5>
+            <p-timeline [value]="events1">
+                <ng-template pTemplate="content" let-event>
+                    <small class="p-text-secondary">{{event.date}}</small>
+                </ng-template>
+                <ng-template pTemplate="opposite" let-event>
+                    {{event.status}}
+                </ng-template>
+            </p-timeline>
+        </div>
+    </div>
+</div>
+
+<div class="card">
+    <h5>Customized</h5>
+    <p-timeline [value]="events1" align="alternate" styleClass="customized-timeline">
+        <ng-template pTemplate="marker" let-event>
+        <span class="flex z-1 w-2rem h-2rem align-items-center justify-content-center text-white border-circle shadow-2" [style.backgroundColor]="event.color">
+            <i [ngClass]="event.icon"></i>
+        </span>
+        </ng-template>
+        <ng-template pTemplate="content" let-event>
+            <p-card [header]="event.status" [subheader]="event.date">
+                <img *ngIf="event.image" [src]="'assets/demo/images/product/' + event.image" [alt]="event.name" width="200" class="shadow-2" />
+                <p class="line-height-3 my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
+                    quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
+                <button pButton label="Read more" class="p-button-outlined mb-5"></button>
+            </p-card>
+        </ng-template>
+    </p-timeline>
+</div>
+
+<div class="card">
+    <h5>Horizontal</h5>
+    <h6>Top Align</h6>
+    <p-timeline [value]="events2" layout="horizontal" align="top">
+        <ng-template pTemplate="content" let-event>
+            {{event}}
+        </ng-template>
+    </p-timeline>
+
+    <h6>Bottom Align</h6>
+    <p-timeline [value]="events2" layout="horizontal" align="bottom">
+        <ng-template pTemplate="content" let-event>
+            {{event}}
+        </ng-template>
+    </p-timeline>
+
+    <h6>Alternate Align</h6>
+    <p-timeline [value]="events2" layout="horizontal" align="alternate">
+        <ng-template pTemplate="content" let-event>
+            {{event}}
+        </ng-template>
+        <ng-template pTemplate="opposite" let-event>
+            &nbsp;
+        </ng-template>
+    </p-timeline>

src/app/demo/components/pages/timeline/timelinedemo.component.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { PrimeIcons } from 'primeng/api';
+
+@Component({
+    templateUrl: './timelinedemo.component.html',
+    styleUrls: ['./timelinedemo.scss']
+})
+export class TimelineDemoComponent {
+
+    events1: any[] = [];
+
+    events2: any[] = [];
+
+    ngOnInit() {
+        this.events1 = [
+            { status: 'Ordered', date: '15/10/2020 10:30', icon: PrimeIcons.SHOPPING_CART, color: '#9C27B0', image: 'game-controller.jpg' },
+            { status: 'Processing', date: '15/10/2020 14:00', icon: PrimeIcons.COG, color: '#673AB7' },
+            { status: 'Shipped', date: '15/10/2020 16:15', icon: PrimeIcons.ENVELOPE, color: '#FF9800' },
+            { status: 'Delivered', date: '16/10/2020 10:00', icon: PrimeIcons.CHECK, color: '#607D8B' }
+        ];
+
+        this.events2 = [
+            "2020", "2021", "2022", "2023"
+        ];
+    }
+
+}

src/app/demo/components/pages/timeline/timelinedemo.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TimelineDemoRoutingModule } from './timelinedemo-routing.module';
+import { TimelineDemoComponent } from './timelinedemo.component';
+import { TimelineModule } from 'primeng/timeline';
+import { ButtonModule } from 'primeng/button';
+import { CardModule } from 'primeng/card';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TimelineModule,
+        ButtonModule,
+        CardModule,
+        TimelineDemoRoutingModule
+    ],
+    declarations: [TimelineDemoComponent]
+})
+export class TimelineDemoModule { }

src/app/demo/components/pages/timeline/timelinedemo.scss

@@ -0,0 +1,21 @@
+@media screen and (max-width: 960px) {
+    ::ng-deep {
+        .customized-timeline {
+            .p-timeline-event:nth-child(even) {
+                flex-direction: row !important;
+
+                .p-timeline-event-content {
+                    text-align: left !important;
+                }
+            }
+
+            .p-timeline-event-opposite {
+                flex: 0;
+            }
+
+            .p-card {
+                margin-top: 1rem;
+            }
+        }
+    }
+}