@duyanhdev/mvp-ifs-ui-kit 21.0.0

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

@@ -0,0 +1,141 @@
+import {Component} from '@angular/core';
+import {TimelineModule} from 'primeng/timeline';
+import {CardModule} from 'primeng/card';
+import {CommonModule} from '@angular/common';
+import {ButtonModule} from 'primeng/button';
+
+@Component({
+    selector: 'app-timeline-demo',
+    standalone: true,
+    imports: [CommonModule, TimelineModule, ButtonModule, CardModule],
+    template: `<div class="grid grid-cols-12 gap-8">
+        <div class="col-span-12 sm:col-span-6">
+            <div class="card">
+                <div class="font-semibold text-xl mb-4">Left Align</div>
+                <p-timeline [value]="events1">
+                    <ng-template #content let-event>
+                        {{ event.status }}
+                    </ng-template>
+                </p-timeline>
+            </div>
+        </div>
+        <div class="col-span-12 sm:col-span-6">
+            <div class="card">
+                <div class="font-semibold text-xl mb-4">Right Align</div>
+                <p-timeline [value]="events1" align="right">
+                    <ng-template #content let-event>
+                        {{ event.status }}
+                    </ng-template>
+                </p-timeline>
+            </div>
+        </div>
+        <div class="col-span-12 sm:col-span-6">
+            <div class="card">
+                <div class="font-semibold text-xl mb-4">Alternate Align</div>
+                <p-timeline [value]="events1" align="alternate">
+                    <ng-template #content let-event>
+                        {{ event.status }}
+                    </ng-template>
+                </p-timeline>
+            </div>
+        </div>
+        <div class="col-span-12 sm:col-span-6">
+            <div class="card">
+                <div class="font-semibold text-xl mb-4">Opposite Content</div>
+                <p-timeline [value]="events1">
+                    <ng-template #content let-event>
+                        <small class="p-text-secondary">{{ event.date }}</small>
+                    </ng-template>
+                    <ng-template #opposite let-event>
+                        {{ event.status }}
+                    </ng-template>
+                </p-timeline>
+            </div>
+        </div>
+        <div class="col-span-full">
+            <div class="card">
+                <div class="font-semibold text-xl mb-4">Templating</div>
+                <p-timeline [value]="events1" align="alternate" styleClass="customized-timeline">
+                    <ng-template #marker let-event>
+                        <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" [style]="{ 'background-color': event.color }">
+                            <i [class]="event.icon"></i>
+                        </span>
+                    </ng-template>
+                    <ng-template #content let-event>
+                        <p-card [header]="event.status" [subheader]="event.date">
+                            <img *ngIf="event.image" [src]="'/demo/images/product/' + event.image" [alt]="event.name" width="200" class="shadow" />
+                            <p>
+                                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>
+                            <p-button label="Read more" [text]="true" />
+                        </p-card>
+                    </ng-template>
+                </p-timeline>
+            </div>
+        </div>
+        <div class="col-span-full">
+            <div class="card">
+                <div class="font-semibold text-xl mb-4">Horizontal</div>
+                <div class="font-semibold mb-2">Top Align</div>
+                <p-timeline [value]="events2" layout="horizontal" align="top">
+                    <ng-template #content let-event>
+                        {{ event }}
+                    </ng-template>
+                </p-timeline>
+
+                <div class="font-semibold mt-4 mb-2">Bottom Align</div>
+                <p-timeline [value]="events2" layout="horizontal" align="bottom">
+                    <ng-template #content let-event>
+                        {{ event }}
+                    </ng-template>
+                </p-timeline>
+
+                <div class="font-semibold mt-4 mb-2">Alternate Align</div>
+                <p-timeline [value]="events2" layout="horizontal" align="alternate">
+                    <ng-template #content let-event>
+                        {{ event }}
+                    </ng-template>
+                    <ng-template #opposite let-event> &nbsp; </ng-template>
+                </p-timeline>
+            </div>
+        </div>
+    </div>`
+})
+export class TimelineDemo {
+    events1: any[] = [];
+
+    events2: any[] = [];
+
+    ngOnInit() {
+        this.events1 = [
+            {
+                status: 'Ordered',
+                date: '15/10/2020 10:30',
+                icon: 'pi pi-shopping-cart',
+                color: '#9C27B0',
+                image: 'game-controller.jpg'
+            },
+            {
+                status: 'Processing',
+                date: '15/10/2020 14:00',
+                icon: 'pi pi-cog',
+                color: '#673AB7'
+            },
+            {
+                status: 'Shipped',
+                date: '15/10/2020 16:15',
+                icon: 'pi pi-envelope',
+                color: '#FF9800'
+            },
+            {
+                status: 'Delivered',
+                date: '16/10/2020 10:00',
+                icon: 'pi pi-check',
+                color: '#607D8B'
+            }
+        ];
+
+        this.events2 = ['2020', '2021', '2022', '2023'];
+    }
+}

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

@@ -0,0 +1,75 @@
+import { Component, inject, OnInit, signal } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+import { TreeModule } from 'primeng/tree';
+import { FormsModule } from '@angular/forms';
+import { TreeTableModule } from 'primeng/treetable';
+import { CommonModule } from '@angular/common';
+import { NodeService } from '@/app/pages/service/node.service';
+
+@Component({
+    selector: 'app-tree-demo',
+    standalone: true,
+    imports: [CommonModule, FormsModule, TreeModule, TreeTableModule],
+    template: `
+        <div class="card">
+            <div class="font-semibold text-xl">Tree</div>
+            <p-tree [value]="treeValue()" selectionMode="checkbox" [(selection)]="selectedTreeValue"></p-tree>
+        </div>
+
+        <div class="card">
+            <div class="font-semibold text-xl mb-4">TreeTable</div>
+            <p-treetable [value]="treeTableValue()" [columns]="cols" selectionMode="checkbox" [(selectionKeys)]="selectedTreeTableValue" dataKey="key" [scrollable]="true" [tableStyle]="{ 'min-width': '50rem' }">
+                <ng-template #header let-columns>
+                    <tr>
+                        <th *ngFor="let col of columns">
+                            {{ col.header }}
+                        </th>
+                    </tr>
+                </ng-template>
+                <ng-template #body let-rowNode let-rowData="rowData" let-columns="columns">
+                    <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
+                        <td *ngFor="let col of columns; let i = index">
+                            <span class="flex items-center gap-2">
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableCheckbox [value]="rowNode" *ngIf="i === 0" />
+                                {{ rowData[col.field] }}
+                            </span>
+                        </td>
+                    </tr>
+                </ng-template>
+            </p-treetable>
+        </div>
+    `,
+    providers: [NodeService]
+})
+export class TreeDemo implements OnInit {
+    treeValue = signal<TreeNode[]>([]);
+
+    treeTableValue = signal<TreeNode[]>([]);
+
+    selectedTreeValue: TreeNode[] = [];
+
+    selectedTreeTableValue = {};
+
+    cols: any[] = [];
+
+    nodeService = inject(NodeService);
+
+    ngOnInit() {
+        this.nodeService.getFiles().then((files) => this.treeValue.set(files));
+        this.nodeService.getTreeTableNodes().then((files: any) => this.treeTableValue.set(files));
+
+        this.cols = [
+            { field: 'name', header: 'Name' },
+            { field: 'size', header: 'Size' },
+            { field: 'type', header: 'Type' }
+        ];
+
+        this.selectedTreeTableValue = {
+            '0-0': {
+                partialChecked: false,
+                checked: true
+            }
+        };
+    }
+}

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

@@ -0,0 +1,35 @@
+import { Routes } from '@angular/router';
+import { ButtonDemo } from './buttondemo';
+import { ChartDemo } from './chartdemo';
+import { FileDemo } from './filedemo';
+import { FormLayoutDemo } from './formlayoutdemo';
+import { InputDemo } from './inputdemo';
+import { ListDemo } from './listdemo';
+import { MediaDemo } from './mediademo';
+import { MessagesDemo } from './messagesdemo';
+import { MiscDemo } from './miscdemo';
+import { PanelsDemo } from './panelsdemo';
+import { TimelineDemo } from './timelinedemo';
+import { TableDemo } from './tabledemo';
+import { OverlayDemo } from './overlaydemo';
+import { TreeDemo } from './treedemo';
+import { MenuDemo } from './menudemo';
+
+export default [
+    { path: 'button', data: { breadcrumb: 'Button' }, component: ButtonDemo },
+    { path: 'charts', data: { breadcrumb: 'Charts' }, component: ChartDemo },
+    { path: 'file', data: { breadcrumb: 'File' }, component: FileDemo },
+    { path: 'formlayout', data: { breadcrumb: 'Button' }, component: ButtonDemo },
+    { path: 'input', data: { breadcrumb: 'Input' }, component: InputDemo },
+    { path: 'list', data: { breadcrumb: 'List' }, component: ListDemo },
+    { path: 'media', data: { breadcrumb: 'Media' }, component: MediaDemo },
+    { path: 'message', data: { breadcrumb: 'Message' }, component: MessagesDemo },
+    { path: 'misc', data: { breadcrumb: 'Misc' }, component: MiscDemo },
+    { path: 'panel', data: { breadcrumb: 'Panel' }, component: PanelsDemo },
+    { path: 'timeline', data: { breadcrumb: 'Timeline' }, component: TimelineDemo },
+    { path: 'table', data: { breadcrumb: 'Table' }, component: TableDemo },
+    { path: 'overlay', data: { breadcrumb: 'Overlay' }, component: OverlayDemo },
+    { path: 'tree', data: { breadcrumb: 'Tree' }, component: TreeDemo },
+    { path: 'menu', data: { breadcrumb: 'Menu' }, component: MenuDemo },
+    { path: '**', redirectTo: '/notfound' }
+] as Routes;

package/src/app.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+    selector: 'app-root',
+    standalone: true,
+    imports: [RouterModule],
+    template: `<router-outlet></router-outlet>`
+})
+export class AppComponent {
+    constructor(private translate: TranslateService) {}
+
+    ngOnInit() {
+        this.translate.addLangs(['vi', 'en', 'ja']);
+
+        const saved = localStorage.getItem('lang') || 'vi';
+
+        this.translate.setFallbackLang('vi'); // 🔥 NEW API
+        this.translate.use(saved);
+    }
+}

package/src/app.config.ts

@@ -0,0 +1,23 @@
+import { HTTP_INTERCEPTORS, provideHttpClient, withFetch, withInterceptorsFromDi } from '@angular/common/http';
+import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
+import { provideRouter, withEnabledBlockingInitialNavigation, withInMemoryScrolling } from '@angular/router';
+import Aura from '@primeuix/themes/aura';
+import { providePrimeNG } from 'primeng/config';
+import { appRoutes } from './app.routes';
+import { provideTranslateService } from '@ngx-translate/core';
+import { provideTranslateHttpLoader } from '@ngx-translate/http-loader';
+export const appConfig: ApplicationConfig = {
+    providers: [
+        provideRouter(appRoutes, withInMemoryScrolling({ anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled' }), withEnabledBlockingInitialNavigation()),
+        provideHttpClient(withFetch(), withInterceptorsFromDi()),
+
+        provideZonelessChangeDetection(),
+        providePrimeNG({ theme: { preset: Aura, options: { darkModeSelector: '.app-dark' } } }),
+        provideTranslateService({
+            loader: provideTranslateHttpLoader({
+                prefix: '/i18n/',
+                suffix: '.json'
+            })
+        })
+    ]
+};

package/src/app.routes.ts

@@ -0,0 +1,23 @@
+import { Routes } from '@angular/router';
+import { AppLayout } from './app/layout/component/layout/app.layout';
+import { DashboardComponent } from './app/pages/dashboard/dashboard';
+import { Documentation } from './app/pages/documentation/documentation';
+import { Landing } from './app/pages/landing/landing';
+import { Notfound } from './app/pages/notfound/notfound';
+
+export const appRoutes: Routes = [
+    {
+        path: '',
+        component: AppLayout,
+        children: [
+            { path: '', component: DashboardComponent },
+            { path: 'uikit', loadChildren: () => import('./app/pages/uikit/uikit.routes') },
+            { path: 'projects', loadChildren: () => import('./app/pages/pages.routes') },
+            { path: 'documentation', component: Documentation }
+        ]
+    },
+    { path: 'landing', component: Landing },
+    { path: 'notfound', component: Notfound },
+    { path: 'auth', loadChildren: () => import('./app/pages/auth/auth.routes') },
+    { path: '**', redirectTo: '/notfound' }
+];

package/src/assets/demo/code.scss

@@ -0,0 +1,17 @@
+pre.app-code {
+    background-color: var(--code-background);
+    margin: 0 0 1rem 0;
+    padding: 0;
+    border-radius: var(--content-border-radius);
+    overflow: auto;
+
+    code {
+        color: var(--code-color);
+        padding: 1rem;
+        margin: 0;
+        line-height: 1.5;
+        display: block;
+        font-weight: semibold;
+        font-family: monaco, Consolas, monospace;
+    }
+}

package/src/assets/demo/demo.scss

@@ -0,0 +1,2 @@
+@use './code.scss';
+@use './flags/flags.css';