@duyanhdev/mvp-ifs-ui-kit 21.0.0

package/src/app/pages/uikit/chartdemo.ts

@@ -0,0 +1,290 @@
+import {Component, effect, inject, signal} from '@angular/core';
+import {ChartModule} from 'primeng/chart';
+import {FluidModule} from 'primeng/fluid';
+import {LayoutService} from '@/app/layout/service/layout.service';
+
+@Component({
+    selector: 'app-chart-demo',
+    standalone: true,
+    imports: [ChartModule, FluidModule],
+    template: `
+        <p-fluid class="grid grid-cols-12 gap-8">
+            <div class="col-span-12 xl:col-span-6">
+                <div class="card">
+                    <div class="font-semibold text-xl mb-6">Linear</div>
+                    <p-chart type="line" [data]="lineData()" [options]="lineOptions()"></p-chart>
+                </div>
+            </div>
+            <div class="col-span-12 xl:col-span-6">
+                <div class="card">
+                    <div class="font-semibold text-xl mb-6">Bar</div>
+                    <p-chart type="bar" [data]="barData()" [options]="barOptions()"></p-chart>
+                </div>
+            </div>
+            <div class="col-span-12 xl:col-span-6">
+                <div class="card flex flex-col items-center">
+                    <div class="font-semibold text-xl mb-6">Pie</div>
+                    <p-chart type="pie" [data]="pieData()" [options]="pieOptions()"></p-chart>
+                </div>
+            </div>
+            <div class="col-span-12 xl:col-span-6">
+                <div class="card flex flex-col items-center">
+                    <div class="font-semibold text-xl mb-6">Doughnut</div>
+                    <p-chart type="doughnut" [data]="pieData()" [options]="pieOptions()"></p-chart>
+                </div>
+            </div>
+            <div class="col-span-12 xl:col-span-6">
+                <div class="card flex flex-col items-center">
+                    <div class="font-semibold text-xl mb-6">Polar Area</div>
+                    <p-chart type="polarArea" [data]="polarData()" [options]="polarOptions()"></p-chart>
+                </div>
+            </div>
+            <div class="col-span-12 xl:col-span-6">
+                <div class="card flex flex-col items-center">
+                    <div class="font-semibold text-xl mb-6">Radar</div>
+                    <p-chart type="radar" [data]="radarData()" [options]="radarOptions()"></p-chart>
+                </div>
+            </div>
+        </p-fluid>
+    `
+})
+export class ChartDemo {
+    layoutService = inject(LayoutService);
+
+    lineData = signal<any>(null);
+    
+    barData = signal<any>(null);
+    
+    pieData = signal<any>(null);
+    
+    polarData = signal<any>(null);
+    
+    radarData = signal<any>(null);
+
+    lineOptions = signal<any>(null);
+    
+    barOptions = signal<any>(null);
+    
+    pieOptions = signal<any>(null);
+    
+    polarOptions = signal<any>(null);
+    
+    radarOptions = signal<any>(null);
+
+    chartEffect = effect(() => {
+        this.layoutService.layoutConfig().darkTheme;
+        setTimeout(() => this.initCharts(), 150);
+    })
+
+    initCharts() {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+
+        this.barData.set({
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'My First dataset',
+                    backgroundColor: documentStyle.getPropertyValue('--p-primary-500'),
+                    borderColor: documentStyle.getPropertyValue('--p-primary-500'),
+                    data: [65, 59, 80, 81, 56, 55, 40]
+                },
+                {
+                    label: 'My Second dataset',
+                    backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
+                    borderColor: documentStyle.getPropertyValue('--p-primary-200'),
+                    data: [28, 48, 40, 19, 86, 27, 90]
+                }
+            ]
+        });
+
+        this.barOptions.set({
+            maintainAspectRatio: false,
+            aspectRatio: 0.8,
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary,
+                        font: {
+                            weight: 500
+                        }
+                    },
+                    grid: {
+                        display: false,
+                        drawBorder: false
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder,
+                        drawBorder: false
+                    }
+                }
+            }
+        });
+
+        this.pieData.set({
+            labels: ['A', 'B', 'C'],
+            datasets: [
+                {
+                    data: [540, 325, 702],
+                    backgroundColor: [documentStyle.getPropertyValue('--p-indigo-500'), documentStyle.getPropertyValue('--p-purple-500'), documentStyle.getPropertyValue('--p-teal-500')],
+                    hoverBackgroundColor: [documentStyle.getPropertyValue('--p-indigo-400'), documentStyle.getPropertyValue('--p-purple-400'), documentStyle.getPropertyValue('--p-teal-400')]
+                }
+            ]
+        });
+
+        this.pieOptions.set({
+            plugins: {
+                legend: {
+                    labels: {
+                        usePointStyle: true,
+                        color: textColor
+                    }
+                }
+            }
+        });
+
+        this.lineData.set({
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'First Dataset',
+                    data: [65, 59, 80, 81, 56, 55, 40],
+                    fill: false,
+                    backgroundColor: documentStyle.getPropertyValue('--p-primary-500'),
+                    borderColor: documentStyle.getPropertyValue('--p-primary-500'),
+                    tension: 0.4
+                },
+                {
+                    label: 'Second Dataset',
+                    data: [28, 48, 40, 19, 86, 27, 90],
+                    fill: false,
+                    backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
+                    borderColor: documentStyle.getPropertyValue('--p-primary-200'),
+                    tension: 0.4
+                }
+            ]
+        });
+
+        this.lineOptions.set({
+            maintainAspectRatio: false,
+            aspectRatio: 0.8,
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder,
+                        drawBorder: false
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder,
+                        drawBorder: false
+                    }
+                }
+            }
+        });
+
+        this.polarData.set({
+            datasets: [
+                {
+                    data: [11, 16, 7, 3],
+                    backgroundColor: [documentStyle.getPropertyValue('--p-indigo-500'), documentStyle.getPropertyValue('--p-purple-500'), documentStyle.getPropertyValue('--p-teal-500'), documentStyle.getPropertyValue('--p-orange-500')],
+                    label: 'My dataset'
+                }
+            ],
+            labels: ['Indigo', 'Purple', 'Teal', 'Orange']
+        });
+
+        this.polarOptions.set({
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                r: {
+                    grid: {
+                        color: surfaceBorder
+                    },
+                    ticks: {
+                        display: false,
+                        color: textColorSecondary
+                    }
+                }
+            }
+        });
+
+        this.radarData.set({
+            labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+            datasets: [
+                {
+                    label: 'My First dataset',
+                    borderColor: documentStyle.getPropertyValue('--p-indigo-400'),
+                    pointBackgroundColor: documentStyle.getPropertyValue('--p-indigo-400'),
+                    pointBorderColor: documentStyle.getPropertyValue('--p-indigo-400'),
+                    pointHoverBackgroundColor: textColor,
+                    pointHoverBorderColor: documentStyle.getPropertyValue('--p-indigo-400'),
+                    data: [65, 59, 90, 81, 56, 55, 40]
+                },
+                {
+                    label: 'My Second dataset',
+                    borderColor: documentStyle.getPropertyValue('--p-purple-400'),
+                    pointBackgroundColor: documentStyle.getPropertyValue('--p-purple-400'),
+                    pointBorderColor: documentStyle.getPropertyValue('--p-purple-400'),
+                    pointHoverBackgroundColor: textColor,
+                    pointHoverBorderColor: documentStyle.getPropertyValue('--p-purple-400'),
+                    data: [28, 48, 40, 19, 96, 27, 100]
+                }
+            ]
+        });
+
+        this.radarOptions.set({
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                r: {
+                    pointLabels: {
+                        color: textColor
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                }
+            }
+        });
+    }
+}

package/src/app/pages/uikit/filedemo.ts

@@ -0,0 +1,52 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MessageService } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
+import { FileUploadModule } from 'primeng/fileupload';
+import { ToastModule } from 'primeng/toast';
+
+@Component({
+    selector: 'app-file-demo',
+    standalone: true,
+    imports: [CommonModule, FileUploadModule, ToastModule, ButtonModule],
+    template: `<p-toast />
+        <div class="grid grid-cols-12 gap-8">
+            <div class="col-span-full lg:col-span-6">
+                <div class="card">
+                    <div class="font-semibold text-xl mb-4">Advanced</div>
+                    <p-fileupload name="demo[]" (onUpload)="onUpload($event)" [multiple]="true" accept="image/*" maxFileSize="1000000" mode="advanced" url="https://www.primefaces.org/cdn/api/upload.php">
+                        <ng-template #empty>
+                            <div>Drag and drop files to here to upload.</div>
+                        </ng-template>
+                    </p-fileupload>
+                </div>
+            </div>
+            <div class="col-span-full lg:col-span-6">
+                <div class="card">
+                    <div class="font-semibold text-xl mb-4">Basic</div>
+                    <div class="flex flex-col gap-4 items-center justify-center">
+                        <p-fileupload #fu mode="basic" chooseLabel="Choose" chooseIcon="pi pi-upload" name="demo[]" url="https://www.primefaces.org/cdn/api/upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onUpload($event)" />
+                        <p-button label="Upload" (onClick)="fu.upload()" severity="secondary" />
+                    </div>
+                </div>
+            </div>
+        </div>`,
+    providers: [MessageService]
+})
+export class FileDemo {
+    uploadedFiles: any[] = [];
+
+    constructor(private messageService: MessageService) {}
+
+    onUpload(event: any) {
+        for (const file of event.files) {
+            this.uploadedFiles.push(file);
+        }
+
+        this.messageService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded' });
+    }
+
+    onBasicUpload() {
+        this.messageService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode' });
+    }
+}

package/src/app/pages/uikit/formlayoutdemo.ts

@@ -0,0 +1,129 @@
+import { Component } from '@angular/core';
+import { FluidModule } from 'primeng/fluid';
+import { InputTextModule } from 'primeng/inputtext';
+import { ButtonModule } from 'primeng/button';
+import { SelectModule } from 'primeng/select';
+import { FormsModule } from '@angular/forms';
+import { TextareaModule } from 'primeng/textarea';
+
+@Component({
+    selector: 'app-formlayout-demo',
+    standalone: true,
+    imports: [InputTextModule, FluidModule, ButtonModule, SelectModule, FormsModule, TextareaModule],
+    template: `<p-fluid>
+        <div class="flex flex-col md:flex-row gap-8">
+            <div class="md:w-1/2">
+                <div class="card flex flex-col gap-4">
+                    <div class="font-semibold text-xl">Vertical</div>
+                    <div class="flex flex-col gap-2">
+                        <label for="name1">Name</label>
+                        <input pInputText id="name1" type="text" />
+                    </div>
+                    <div class="flex flex-col gap-2">
+                        <label for="email1">Email</label>
+                        <input pInputText id="email1" type="text" />
+                    </div>
+                    <div class="flex flex-col gap-2">
+                        <label for="age1">Age</label>
+                        <input pInputText id="age1" type="text" />
+                    </div>
+                </div>
+
+                <div class="card flex flex-col gap-4">
+                    <div class="font-semibold text-xl">Vertical Grid</div>
+                    <div class="flex flex-wrap gap-6">
+                        <div class="flex flex-col grow basis-0 gap-2">
+                            <label for="name2">Name</label>
+                            <input pInputText id="name2" type="text" />
+                        </div>
+                        <div class="flex flex-col grow basis-0 gap-2">
+                            <label for="email2">Email</label>
+                            <input pInputText id="email2" type="text" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="md:w-1/2">
+                <div class="card flex flex-col gap-4">
+                    <div class="font-semibold text-xl">Horizontal</div>
+                    <div class="grid grid-cols-12 gap-4 grid-cols-12 gap-2">
+                        <label for="name3" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0">Name</label>
+                        <div class="col-span-12 md:col-span-10">
+                            <input pInputText id="name3" type="text" />
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-12 gap-4 grid-cols-12 gap-2">
+                        <label for="email3" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0">Email</label>
+                        <div class="col-span-12 md:col-span-10">
+                            <input pInputText id="email3" type="text" />
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card flex flex-col gap-4">
+                    <div class="font-semibold text-xl">Inline</div>
+                    <div class="flex flex-wrap items-start gap-6">
+                        <div class="field">
+                            <label for="firstname1" class="sr-only">Firstname</label>
+                            <input pInputText id="firstname1" type="text" placeholder="Firstname" />
+                        </div>
+                        <div class="field">
+                            <label for="lastname1" class="sr-only">Lastname</label>
+                            <input pInputText id="lastname1" type="text" placeholder="Lastname" />
+                        </div>
+                        <p-button label="Submit" [fluid]="false"></p-button>
+                    </div>
+                </div>
+                <div class="card flex flex-col gap-4">
+                    <div class="font-semibold text-xl">Help Text</div>
+                    <div class="flex flex-wrap gap-2">
+                        <label for="username">Username</label>
+                        <input pInputText id="username" type="text" />
+                        <small>Enter your username to reset your password.</small>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex mt-8">
+            <div class="card flex flex-col gap-6 w-full">
+                <div class="font-semibold text-xl">Advanced</div>
+                <div class="flex flex-col md:flex-row gap-6">
+                    <div class="flex flex-wrap gap-2 w-full">
+                        <label for="firstname2">Firstname</label>
+                        <input pInputText id="firstname2" type="text" />
+                    </div>
+                    <div class="flex flex-wrap gap-2 w-full">
+                        <label for="lastname2">Lastname</label>
+                        <input pInputText id="lastname2" type="text" />
+                    </div>
+                </div>
+
+                <div class="flex flex-wrap">
+                    <label for="address">Address</label>
+                    <textarea pTextarea id="address" rows="4"></textarea>
+                </div>
+
+                <div class="flex flex-col md:flex-row gap-6">
+                    <div class="flex flex-wrap gap-2 w-full">
+                        <label for="state">State</label>
+                        <p-select id="state" [(ngModel)]="dropdownItem" [options]="dropdownItems" optionLabel="name" placeholder="Select One" class="w-full"></p-select>
+                    </div>
+                    <div class="flex flex-wrap gap-2 w-full">
+                        <label for="zip">Zip</label>
+                        <input pInputText id="zip" type="text" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </p-fluid>`
+})
+export class FormLayoutDemo {
+    dropdownItems = [
+        { name: 'Option 1', code: 'Option 1' },
+        { name: 'Option 2', code: 'Option 2' },
+        { name: 'Option 3', code: 'Option 3' }
+    ];
+
+    dropdownItem = null;
+}