carloshra/nexus-spa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add layout

Browse Source
This commit is contained in:
Çetin
2024-12-30 12:00:11 +03:00
parent 0369931355
commit 695219ba90
136 changed files with 70 additions and 7216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
angular.json
View File

@@ -53,12 +53,9 @@
"outputHashing": "all" "outputHashing": "all"
}, },
"development": { "development": {
"buildOptimizer": false,
"optimization": false, "optimization": false,
"vendorChunk": true,
"extractLicenses": false, "extractLicenses": false,
"sourceMap": true, "sourceMap": true
"namedChunks": true
} }
}, },
"defaultConfiguration": "production" "defaultConfiguration": "production"

4
package-lock.json generated
View File

@@ -1,11 +1,11 @@
{ {
"name": "sakai-19", "name": "sakai-ng",
"version": "0.0.0", "version": "0.0.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "sakai-19", "name": "sakai-ng",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@angular/animations": "^19.0.0", "@angular/animations": "^19.0.0",

1
src/app/app.component.ts
View File

@@ -3,6 +3,7 @@ import {RouterModule} from '@angular/router';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
standalone: true,
imports: [RouterModule], imports: [RouterModule],
templateUrl: './app.component.html' templateUrl: './app.component.html'
}) })

24
src/app/app.routes.ts
View File

@@ -1,21 +1,21 @@
import { Routes } from '@angular/router'; import { Routes } from '@angular/router';
import {AppLayoutComponent} from './layout/app.layout.component'; import {AppLayoutComponent} from './layout/app.layout.component';
import {NotfoundComponent} from './demo/components/notfound/notfound.component';
export const routes: Routes = [ export const routes: Routes = [
{ {
path: '', component: AppLayoutComponent, path: '', component: AppLayoutComponent,
children: [ // children:
{ path: '', loadChildren: () => import('./demo/components/dashboard/dashboard.module').then(m => m.DashboardModule) }, // [
{ path: 'uikit', loadChildren: () => import('./demo/components/uikit/uikit.module').then(m => m.UIkitModule) }, // { path: '', loadChildren: () => import('./demo/components/dashboard/dashboard.module').then(m => m.DashboardModule) },
{ path: 'utilities', loadChildren: () => import('./demo/components/utilities/utilities.module').then(m => m.UtilitiesModule) }, // { path: 'uikit', loadChildren: () => import('./demo/components/uikit/uikit.module').then(m => m.UIkitModule) },
{ path: 'documentation', loadChildren: () => import('./demo/components/documentation/documentation.module').then(m => m.DocumentationModule) }, // { path: 'utilities', loadChildren: () => import('./demo/components/utilities/utilities.module').then(m => m.UtilitiesModule) },
{ path: 'blocks', loadChildren: () => import('./demo/components/primeblocks/primeblocks.module').then(m => m.PrimeBlocksModule) }, // { path: 'documentation', loadChildren: () => import('./demo/components/documentation/documentation.module').then(m => m.DocumentationModule) },
{ path: 'pages', loadChildren: () => import('./demo/components/pages/pages.module').then(m => m.PagesModule) } // { path: 'blocks', loadChildren: () => import('./demo/components/primeblocks/primeblocks.module').then(m => m.PrimeBlocksModule) },
] // { path: 'pages', loadChildren: () => import('./demo/components/pages/pages.module').then(m => m.PagesModule) }
// ]
}, },
{ path: 'auth', loadChildren: () => import('./demo/components/auth/auth.module').then(m => m.AuthModule) }, // { path: 'auth', loadChildren: () => import('./demo/components/auth/auth.module').then(m => m.AuthModule) },
{ path: 'landing', loadChildren: () => import('./demo/components/landing/landing.module').then(m => m.LandingModule) }, // { path: 'landing', loadChildren: () => import('./demo/components/landing/landing.module').then(m => m.LandingModule) },
{ path: 'notfound', component: NotfoundComponent }, // { path: 'notfound', component: NotfoundComponent },
{ path: '**', redirectTo: '/notfound' }, { path: '**', redirectTo: '/notfound' },
]; ];

11
src/app/demo/components/auth/access/access-routing.module.ts
View File

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

18
src/app/demo/components/auth/access/access.component.html
View File

@@ -1,18 +0,0 @@
<div class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="flex flex-column align-items-center justify-content-center">
<img src="assets/demo/images/access/logo-orange.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0">
<div style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%);">
<div class="w-full surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center" style="border-radius:53px">
<div class="grid flex flex-column align-items-center">
<div class="flex justify-content-center align-items-center bg-orange-500 border-circle" style="width:3.2rem; height:3.2rem;">
<i class="text-50 pi pi-fw pi-lock text-2xl"></i>
</div>
<h1 class="text-900 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
<span class="text-600 mb-5">You do not have the necessary permisions. Please contact admins.</span>
<img src="assets/demo/images/access/asset-access.svg" alt="Access denied" class="mb-5" width="80%">
<button pButton pRipple icon="pi pi-arrow-left" label="Go to Dashboard" class="p-button-text" [routerLink]="['/']"></button>
</div>
</div>
</div>
</div>
</div>

7
src/app/demo/components/auth/access/access.component.ts
View File

@@ -1,7 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-access',
templateUrl: './access.component.html',
})
export class AccessComponent { }

16
src/app/demo/components/auth/access/access.module.ts
View File

@@ -1,16 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ButtonModule } from 'primeng/button';
import { AccessRoutingModule } from './access-routing.module';
import { AccessComponent } from './access.component';
@NgModule({
imports: [
CommonModule,
AccessRoutingModule,
ButtonModule
],
declarations: [AccessComponent]
})
export class AccessModule { }

13
src/app/demo/components/auth/auth-routing.module.ts
View File

@@ -1,13 +0,0 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
@NgModule({
imports: [RouterModule.forChild([
{ path: 'error', loadChildren: () => import('./error/error.module').then(m => m.ErrorModule) },
{ path: 'access', loadChildren: () => import('./access/access.module').then(m => m.AccessModule) },
{ path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) },
{ path: '**', redirectTo: '/notfound' }
])],
exports: [RouterModule]
})
export class AuthRoutingModule { }

11
src/app/demo/components/auth/auth.module.ts
View File

@@ -1,11 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthRoutingModule } from './auth-routing.module';
@NgModule({
imports: [
CommonModule,
AuthRoutingModule
]
})
export class AuthModule { }

11
src/app/demo/components/auth/error/error-routing.module.ts
View File

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

18
src/app/demo/components/auth/error/error.component.html
View File

@@ -1,18 +0,0 @@
<div class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="flex flex-column align-items-center justify-content-center">
<img src="assets/demo/images/error/logo-error.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0">
<div style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%);">
<div class="w-full surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center" style="border-radius:53px">
<div class="grid flex flex-column align-items-center">
<div class="flex justify-content-center align-items-center bg-pink-500 border-circle" style="height:3.2rem; width:3.2rem;">
<i class="pi pi-fw pi-exclamation-circle text-2xl text-white"></i>
</div>
<h1 class="text-900 font-bold text-5xl mb-2">Error Occured</h1>
<span class="text-600 mb-5">Requested resource is not available.</span>
<img src="assets/demo/images/error/asset-error.svg" alt="Error" class="mb-5" width="80%">
<button pButton pRipple icon="pi pi-arrow-left" label="Go to Dashboard" class="p-button-text" [routerLink]="['/']"></button>
</div>
</div>
</div>
</div>
</div>

7
src/app/demo/components/auth/error/error.component.ts
View File

@@ -1,7 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-error',
templateUrl: './error.component.html',
})
export class ErrorComponent { }

15
src/app/demo/components/auth/error/error.module.ts
View File

@@ -1,15 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ErrorRoutingModule } from './error-routing.module';
import { ErrorComponent } from './error.component';
import { ButtonModule } from 'primeng/button';
@NgModule({
imports: [
CommonModule,
ErrorRoutingModule,
ButtonModule
],
declarations: [ErrorComponent]
})
export class ErrorModule { }

11
src/app/demo/components/auth/login/login-routing.module.ts
View File

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

31
src/app/demo/components/auth/login/login.component.html
View File

@@ -1,31 +0,0 @@
<div class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="flex flex-column align-items-center justify-content-center">
<img src="assets/layout/images/{{layoutService.config().colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0">
<div style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%);">
<div class="w-full surface-card py-8 px-5 sm:px-8" style="border-radius:53px">
<div class="text-center mb-5">
<img src="assets/demo/images/login/avatar.png" alt="Image" height="50" class="mb-3">
<div class="text-900 text-3xl font-medium mb-3">Welcome, Isabel!</div>
<span class="text-600 font-medium">Sign in to continue</span>
</div>
<div>
<label for="email1" class="block text-900 text-xl font-medium mb-2">Email</label>
<input id="email1" type="text" placeholder="Email address" pInputText class="w-full md:w-30rem mb-5" style="padding:1rem">
<label for="password1" class="block text-900 font-medium text-xl mb-2">Password</label>
<p-password id="password1" [(ngModel)]="password" placeholder="Password" [toggleMask]="true" styleClass="mb-5" inputStyleClass="w-full p-3 md:w-30rem"></p-password>
<div class="flex align-items-center justify-content-between mb-5 gap-5">
<div class="flex align-items-center">
<p-checkbox id="rememberme1" [binary]="true" styleClass="mr-2"></p-checkbox>
<label for="rememberme1">Remember me</label>
</div>
<a class="font-medium no-underline ml-2 text-right cursor-pointer" style="color: var(--primary-color)">Forgot password?</a>
</div>
<button pButton pRipple label="Sign In" class="w-full p-3 text-xl" [routerLink]="['/']"></button>
</div>
</div>
</div>
</div>
</div>

23
src/app/demo/components/auth/login/login.component.ts
View File

@@ -1,23 +0,0 @@
import { Component } from '@angular/core';
import { LayoutService } from 'src/app/layout/service/app.layout.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styles: [`
:host ::ng-deep .pi-eye,
:host ::ng-deep .pi-eye-slash {
transform:scale(1.6);
margin-right: 1rem;
color: var(--primary-color) !important;
}
`]
})
export class LoginComponent {
valCheck: string[] = ['remember'];
password!: string;
constructor(public layoutService: LayoutService) { }
}

23
src/app/demo/components/auth/login/login.module.ts
View File

@@ -1,23 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginRoutingModule } from './login-routing.module';
import { LoginComponent } from './login.component';
import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox';
import { FormsModule } from '@angular/forms';
import { PasswordModule } from 'primeng/password';
import { InputTextModule } from 'primeng/inputtext';
@NgModule({
imports: [
CommonModule,
LoginRoutingModule,
ButtonModule,
CheckboxModule,
InputTextModule,
FormsModule,
PasswordModule
],
declarations: [LoginComponent]
})
export class LoginModule { }

11
src/app/demo/components/dashboard/dashboard-routing.module.ts
View File

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

239
src/app/demo/components/dashboard/dashboard.component.html
View File

@@ -1,239 +0,0 @@
<div class="grid">
<div class="col-12 lg:col-6 xl:col-3">
<div class="card mb-0">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Orders</span>
<div class="text-900 font-medium text-xl">152</div>
</div>
<div class="flex align-items-center justify-content-center bg-blue-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">24 new </span>
<span class="text-500">since last visit</span>
</div>
</div>
<div class="col-12 lg:col-6 xl:col-3">
<div class="card mb-0">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Revenue</span>
<div class="text-900 font-medium text-xl">$2.100</div>
</div>
<div class="flex align-items-center justify-content-center bg-orange-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">%52+ </span>
<span class="text-500">since last week</span>
</div>
</div>
<div class="col-12 lg:col-6 xl:col-3">
<div class="card mb-0">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Customers</span>
<div class="text-900 font-medium text-xl">28441</div>
</div>
<div class="flex align-items-center justify-content-center bg-cyan-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">520 </span>
<span class="text-500">newly registered</span>
</div>
</div>
<div class="col-12 lg:col-6 xl:col-3">
<div class="card mb-0">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Comments</span>
<div class="text-900 font-medium text-xl">152 Unread</div>
</div>
<div class="flex align-items-center justify-content-center bg-purple-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
<i class="pi pi-comment text-purple-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">85 </span>
<span class="text-500">responded</span>
</div>
</div>
<div class="col-12 xl:col-6">
<div class="card">
<h5>Recent Sales</h5>
<p-table [value]="products" [paginator]="true" [rows]="5" responsiveLayout="scroll">
<ng-template pTemplate="header">
<tr>
<th>Image</th>
<th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
<th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
<th>View</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td style="width: 15%; min-width: 5rem;">
<img src="assets/demo/images/product/{{product.image}}" class="shadow-4" alt="{{product.name}}" width="50">
</td>
<td style="width: 35%; min-width: 7rem;">{{product.name}}</td>
<td style="width: 35%; min-width: 8rem;">{{product.price | currency:'USD'}}</td>
<td style="width: 15%;">
<button pButton pRipple type="button" icon="pi pi-search" class="p-button p-component p-button-text p-button-icon-only"></button>
</td>
</tr>
</ng-template>
</p-table>
</div>
<div class="card">
<div class="flex justify-content-between align-items-center mb-5">
<h5>Best Selling Products</h5>
<div>
<button pButton type="button" icon="pi pi-ellipsis-v" class="p-button-rounded p-button-text p-button-plain" (click)="menu.toggle($event)"></button>
<p-menu #menu [popup]="true" [model]="items"></p-menu>
</div>
</div>
<ul class="list-none p-0 m-0">
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
<div>
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Space T-Shirt</span>
<div class="mt-1 text-600">Clothing</div>
</div>
<div class="mt-2 md:mt-0 flex align-items-center">
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
<div class="bg-orange-500 h-full" [ngStyle]="{width: '50%'}"></div>
</div>
<span class="text-orange-500 ml-3 font-medium">%50</span>
</div>
</li>
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
<div>
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Portal Sticker</span>
<div class="mt-1 text-600">Accessories</div>
</div>
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
<div class="bg-cyan-500 h-full" [ngStyle]="{width: '16%'}"></div>
</div>
<span class="text-cyan-500 ml-3 font-medium">%16</span>
</div>
</li>
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
<div>
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Supernova Sticker</span>
<div class="mt-1 text-600">Accessories</div>
</div>
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
<div class="bg-pink-500 h-full" [ngStyle]="{width: '67%'}"></div>
</div>
<span class="text-pink-500 ml-3 font-medium">%67</span>
</div>
</li>
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
<div>
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Wonders Notebook</span>
<div class="mt-1 text-600">Office</div>
</div>
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
<div class="bg-green-500 h-full" [ngStyle]="{width: '35%'}"></div>
</div>
<span class="text-green-500 ml-3 font-medium">%35</span>
</div>
</li>
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
<div>
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Mat Black Case</span>
<div class="mt-1 text-600">Accessories</div>
</div>
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
<div class="bg-purple-500 h-full" [ngStyle]="{width: '75%'}"></div>
</div>
<span class="text-purple-500 ml-3 font-medium">%75</span>
</div>
</li>
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
<div>
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Robots T-Shirt</span>
<div class="mt-1 text-600">Clothing</div>
</div>
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
<div class="bg-teal-500 h-full" [ngStyle]="{width: '40%'}"></div>
</div>
<span class="text-teal-500 ml-3 font-medium">%40</span>
</div>
</li>
</ul>
</div>
</div>
<div class="col-12 xl:col-6">
<div class="card">
<h5>Sales Overview</h5>
<p-chart type="line" [data]="chartData" [options]="chartOptions"></p-chart>
</div>
<div class="card">
<div class="flex align-items-center justify-content-between mb-4">
<h5>Notifications</h5>
<div>
<button pButton type="button" icon="pi pi-ellipsis-v" class="p-button-rounded p-button-text p-button-plain" (click)="menu.toggle($event)"></button>
<p-menu #menu [popup]="true" [model]="items"></p-menu>
</div>
</div>
<span class="block text-600 font-medium mb-3">TODAY</span>
<ul class="p-0 mx-0 mt-0 mb-4 list-none">
<li class="flex align-items-center py-2 border-bottom-1 surface-border">
<div class="w-3rem h-3rem flex align-items-center justify-content-center bg-blue-100 border-circle mr-3 flex-shrink-0">
<i class="pi pi-dollar text-xl text-blue-500"></i>
</div>
<span class="text-900 line-height-3">Richard Jones
<span class="text-700"> has purchased a blue t-shirt for <span class="text-blue-500">79$</span></span>
</span>
</li>
<li class="flex align-items-center py-2">
<div class="w-3rem h-3rem flex align-items-center justify-content-center bg-orange-100 border-circle mr-3 flex-shrink-0">
<i class="pi pi-download text-xl text-orange-500"></i>
</div>
<span class="text-700 line-height-3">Your request for withdrawal of <span class="text-blue-500 font-medium">2500$</span> has been initiated.</span>
</li>
</ul>
<span class="block text-600 font-medium mb-3">YESTERDAY</span>
<ul class="p-0 m-0 list-none">
<li class="flex align-items-center py-2 border-bottom-1 surface-border">
<div class="w-3rem h-3rem flex align-items-center justify-content-center bg-blue-100 border-circle mr-3 flex-shrink-0">
<i class="pi pi-dollar text-xl text-blue-500"></i>
</div>
<span class="text-900 line-height-3">Keyser Wick
<span class="text-700"> has purchased a black jacket for <span class="text-blue-500">59$</span></span>
</span>
</li>
<li class="flex align-items-center py-2 border-bottom-1 surface-border">
<div class="w-3rem h-3rem flex align-items-center justify-content-center bg-pink-100 border-circle mr-3 flex-shrink-0">
<i class="pi pi-question text-xl text-pink-500"></i>
</div>
<span class="text-900 line-height-3">Jane Davis<span class="text-700"> has posted a new questions about your product.</span></span>
</li>
</ul>
</div>
<div class="px-4 py-5 shadow-2 flex flex-column md:flex-row md:align-items-center justify-content-between mb-3" [ngStyle]="{borderRadius: '1rem', background: 'linear-gradient(0deg, rgba(0, 123, 255, 0.5), rgba(0, 123, 255, 0.5)), linear-gradient(92.54deg, #1C80CF 47.88%, #FFFFFF 100.01%)'}">
<div>
<div class="text-blue-100 font-medium text-xl mt-2 mb-3">TAKE THE NEXT STEP</div>
<div class="text-white font-medium text-5xl">Try PrimeBlocks</div>
</div>
<div class="mt-4 mr-auto md:mt-0 md:mr-0">
<a target="_blank" href="https://www.primefaces.org/primeblocks-ng" class="p-button font-bold px-5 py-3 p-button-warning p-button-rounded p-button-raised">
Get Started
</a>
</div>
</div>
</div>
</div>

105
src/app/demo/components/dashboard/dashboard.component.ts
View File

@@ -1,105 +0,0 @@
import { Component, OnInit, OnDestroy } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { Product } from '../../api/product';
import { ProductService } from '../../service/product.service';
import { Subscription, debounceTime } from 'rxjs';
import { LayoutService } from 'src/app/layout/service/app.layout.service';
@Component({
templateUrl: './dashboard.component.html',
})
export class DashboardComponent implements OnInit, OnDestroy {
items!: MenuItem[];
products!: Product[];
chartData: any;
chartOptions: any;
subscription!: Subscription;
constructor(private productService: ProductService, public layoutService: LayoutService) {
this.subscription = this.layoutService.configUpdate$
.pipe(debounceTime(25))
.subscribe((config) => {
this.initChart();
});
}
ngOnInit() {
this.initChart();
this.productService.getProductsSmall().then(data => this.products = data);
this.items = [
{ label: 'Add New', icon: 'pi pi-fw pi-plus' },
{ label: 'Remove', icon: 'pi pi-fw pi-minus' }
];
}
initChart() {
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.chartData = {
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('--bluegray-700'),
borderColor: documentStyle.getPropertyValue('--bluegray-700'),
tension: .4
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
backgroundColor: documentStyle.getPropertyValue('--green-600'),
borderColor: documentStyle.getPropertyValue('--green-600'),
tension: .4
}
]
};
this.chartOptions = {
plugins: {
legend: {
labels: {
color: textColor
}
}
},
scales: {
x: {
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder,
drawBorder: false
}
},
y: {
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder,
drawBorder: false
}
}
}
};
}
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
}

27
src/app/demo/components/dashboard/dashboard.module.ts
View File

@@ -1,27 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { DashboardComponent } from './dashboard.component';
import { ChartModule } from 'primeng/chart';
import { MenuModule } from 'primeng/menu';
import { TableModule } from 'primeng/table';
import { ButtonModule } from 'primeng/button';
import { StyleClassModule } from 'primeng/styleclass';
import { PanelMenuModule } from 'primeng/panelmenu';
import { DashboardsRoutingModule } from './dashboard-routing.module';
@NgModule({
imports: [
CommonModule,
FormsModule,
ChartModule,
MenuModule,
TableModule,
StyleClassModule,
PanelMenuModule,
ButtonModule,
DashboardsRoutingModule
],
declarations: [DashboardComponent]
})
export class DashboardModule { }

11
src/app/demo/components/documentation/documentation-routing.module.ts
View File

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

119
src/app/demo/components/documentation/documentation.component.html
View File

@@ -1,119 +0,0 @@
<div class="card mb-3">
<div>
<h2>Documentation</h2>
<h4>Getting Started</h4>
<p>Sakai is an application template for Angular and is distributed as a CLI project. Current versions is Angular v17 with PrimeNG v17. In case CLI is not installed already, use the command below to set it up.</p>
<pre class="app-code"><code>npm install -g &#64;angular/cli</code></pre>
<p>Once CLI is ready in your system, extract the contents of the 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>
<pre class="app-code"><code>cd sakai
npm install
ng serve</code></pre>
<p>The application should run at <span class="font-semibold">http://localhost:4200/</span>, you may now start with the development of your application.</p>
<h5>Important CLI Commands</h5>
<p>Following commands are derived from CLI.</p>
<pre class="app-code"><code>Run 'ng serve' for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
Run 'ng generate component component-name' to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
Run 'ng build' to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
Run 'ng test' to execute the unit tests via [Karma](https://karma-runner.github.io).
Run 'ng e2e' to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Run 'ng help' for more options.</code></pre>
<h4>Structure</h4>
<p>Sakai consists of 3 main parts; the application layout, layout assets and PrimeNG component theme assets. Layout is placed inside the <span class="text-primary font-medium">src/app/layout</span> folder,
and the assets are in the <span class="text-primary font-medium">src/assets/layout</span> folder.
</p>
<h5>Default Configuration</h5>
<p>Initial layout configuration can be defined at the main app component by injecting the <span class="text-primary font-medium">LayoutService</span>, this step is optional and only necessary when customizing the defaults. Note that <span class="text-primary font-medium">theme</span> and
<span class="text-primary font-medium">scale</span> are not reactive since theme is configured outside of Angular at <strong class="font-semibold">index.html</strong> by default and
initial scale is defined with the <span class="text-primary font-medium">$scale</span> at <strong class="font-semibold">layout.scss</strong>. When default theme or scale is changed at their files initially, it is required to configure the layout service with the matching values
to avoid sync issues. </p>
<pre class="app-code"><code>import &#123; Component, OnInit &#125; from '&#64;angular/core';
import &#123; PrimeNGConfig &#125; from 'primeng/api';
import &#123; LayoutService, AppConfig &#125; from './layout/service/app.layout.service';
&#64;Component(&#123;
selector: 'app-root',
templateUrl: './app.component.html'
&#125;)
export class AppComponent implements OnInit &#123;
constructor(private primengConfig: PrimeNGConfig, private layoutService: LayoutService) &#123; &#125;
ngOnInit(): void &#123;
this.primengConfig.ripple = true; //enables core ripple functionality
//optional configuration with the default configuration
const config: AppConfig = &#123;
ripple: false, //toggles ripple on and off
inputStyle: 'outlined', //default style for input elements
menuMode: 'static', //layout mode of the menu, valid values are "static" and "overlay"
colorScheme: 'light', //color scheme of the template, valid values are "light" and "dark"
theme: 'lara-light-indigo', //default component theme for PrimeNG
scale: 14 //size of the body font size to scale the whole application
&#125;;
this.layoutService.config.set(config);
&#125;
&#125;</code></pre>
<h5>Menu</h5>
<p>Menu is a separate component defined in <span class="text-primary font-medium">src/app/layout/app.menu.component.ts</span> file and based on PrimeNG MenuModel API. In order to define the menuitems,
navigate to this file and define your own model as a nested structure.</p>
<pre class="app-code"><code>import &#123; OnInit &#125; from '&#64;angular/core';
import &#123; Component &#125; from '&#64;angular/core';
&#64;Component(&#123;
selector: 'app-menu',
templateUrl: './app.menu.component.html'
&#125;)
export class AppMenuComponent implements OnInit &#123;
model: any[] = [];
ngOnInit() &#123;
this.model = [
&#123;
label: 'Home',
items: [
&#123;
label: 'Dashboard',
icon: 'pi pi-fw pi-home',
routerLink: ['/']
&#125;
]
&#125;,
//...
];
&#125;
&#125;</code></pre>
<h4>Integration with Existing Angular CLI Projects</h4>
<p>Sakai structure is designed in a modular way so that it can easily be integrated with your existing application. We've created a short tutorial with details.</p>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/yl2f8KKY204" frameborder="0" allowfullscreen></iframe>
</div>
<h4>Theme</h4>
<p>Sakai provides 34 PrimeNG themes out of the box. Setup of a theme is simple by including the css of theme
to your bundle that are located inside <span class="text-primary font-medium">assets/layout/styles/theme/</span>
folder such as <span class="text-primary font-medium">assets/layout/styles/theme/lara-light-indigo/theme.css</span>.</p>
<p>Another alternative would be creating dynamic bundles, please see the <a href="https://www.youtube.com/watch?v=5VOuUdDXRsE" class="font-medium text-primary hover:underline">video tutorial</a> for an example.</p>
</div>
</div>

16
src/app/demo/components/documentation/documentation.component.scss
View File

@@ -1,16 +0,0 @@
@media screen and (max-width: 991px) {
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}

7
src/app/demo/components/documentation/documentation.component.ts
View File

@@ -1,7 +0,0 @@
import { Component } from '@angular/core';
@Component({
templateUrl: './documentation.component.html',
styleUrls: ['./documentation.component.scss']
})
export class DocumentationComponent { }

13
src/app/demo/components/documentation/documentation.module.ts
View File

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

11
src/app/demo/components/landing/landing-routing.module.ts
View File

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

362
src/app/demo/components/landing/landing.component.html
View File

@@ -1,362 +0,0 @@
<div class="surface-0 flex justify-content-center">
<div id="home" class="landing-wrapper overflow-hidden">
<div class="py-4 px-4 mx-0 md:mx-6 lg:mx-8 lg:px-8 flex align-items-center justify-content-between relative lg:static mb-3">
<a class="flex align-items-center" href="#">
<img src="assets/layout/images/{{layoutService.config().colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="Sakai Logo" height="50" class="mr-0 lg:mr-2"><span class="text-900 font-medium text-2xl line-height-3 mr-8">SAKAI</span>
</a>
<a pRipple class="cursor-pointer block lg:hidden text-700" pStyleClass="@next" enterClass="hidden" leaveToClass="hidden" [hideOnOutsideClick]="true">
<i class="pi pi-bars text-4xl"></i>
</a>
<div class="align-items-center surface-0 flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 px-6 lg:px-0 z-2" style="top:120px">
<ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
<li>
<a (click)="router.navigate(['/landing'], {fragment: 'home'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
<span>Home</span>
</a>
</li>
<li>
<a (click)="router.navigate(['/landing'], {fragment: 'features'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
<span>Features</span>
</a>
</li>
<li>
<a (click)="router.navigate(['/landing'], {fragment: 'highlights'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
<span>Highlights</span>
</a>
</li>
<li>
<a (click)="router.navigate(['/landing'], {fragment: 'pricing'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
<span>Pricing</span>
</a>
</li>
</ul>
<div class="flex justify-content-between lg:block border-top-1 lg:border-top-none surface-border py-3 lg:py-0 mt-3 lg:mt-0">
<button pButton pRipple label="Login" class="p-button-text p-button-rounded border-none font-light line-height-2 text-blue-500"></button>
<button pButton pRipple label="Register" class="p-button-rounded border-none ml-5 font-light line-height-2 bg-blue-500 text-white"></button>
</div>
</div>
</div>
<div id="hero" class="flex flex-column pt-4 px-4 lg:px-8 overflow-hidden"
style="background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EEEFAF 0%, #C3E3FA 100%); clip-path: ellipse(150% 87% at 93% 13%);">
<div class="mx-4 md:mx-8 mt-0 md:mt-4">
<h1 class="text-6xl font-bold text-gray-900 line-height-2"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
<p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat... </p>
<button pButton pRipple type="button" label="Get Started" class="p-button-rounded text-xl border-none mt-3 bg-blue-500 font-normal line-height-3 px-3 text-white"></button>
</div>
<div class="flex justify-content-center md:justify-content-end">
<img src="assets/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9 md:w-auto">
</div>
</div>
<div id="features" class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8">
<div class="grid justify-content-center">
<div class="col-12 text-center mt-8 mb-4">
<h2 class="text-900 font-normal mb-2">Marvelous Features</h2>
<span class="text-600 text-2xl">Placerat in egestas erat...</span>
</div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2),rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2),rgba(187, 199, 205, 0.2));">
<div class="p-3 surface-card h-full" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-yellow-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
</div>
<h5 class="mb-2 text-900">Easy to Use</h5>
<span class="text-600">Posuere morbi leo urna molestie.</span>
</div>
</div>
</div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145,226,237,0.2),rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2));">
<div class="p-3 surface-card h-full" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-cyan-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
</div>
<h5 class="mb-2 text-900">Fresh Design</h5>
<span class="text-600">Semper risus in hendrerit.</span>
</div>
</div>
</div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2));">
<div class="p-3 surface-card h-full" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-indigo-200" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
</div>
<h5 class="mb-2 text-900">Well Documented</h5>
<span class="text-600">Non arcu risus quis varius quam quisque.</span>
</div>
</div>
</div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2),rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2),rgba(145, 210, 204, 0.2));">
<div class="p-3 surface-card h-full" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-bluegray-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i>
</div>
<h5 class="mb-2 text-900">Responsive Layout</h5>
<span class="text-600">Nulla malesuada pellentesque elit.</span>
</div>
</div>
</div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2),rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2),rgba(160, 210, 250, 0.2));">
<div class="p-3 surface-card h-full" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-orange-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-star text-2xl text-orange-700"></i>
</div>
<h5 class="mb-2 text-900">Clean Code</h5>
<span class="text-600">Condimentum lacinia quis vel eros.</span>
</div>
</div>
</div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2));">
<div class="p-3 surface-card h-full" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-pink-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-moon text-2xl text-pink-700"></i>
</div>
<h5 class="mb-2 text-900">Dark Mode</h5>
<span class="text-600">Convallis tellus id interdum velit laoreet.</span>
</div>
</div>
</div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2));">
<div class="p-3 surface-card h-full" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-teal-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i>
</div>
<h5 class="mb-2 text-900">Ready to Use</h5>
<span class="text-600">Mauris sit amet massa vitae.</span>
</div>
</div>
</div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2));">
<div class="p-3 surface-card h-full" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-blue-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-globe text-2xl text-blue-700"></i>
</div>
<h5 class="mb-2 text-900">Modern Practices</h5>
<span class="text-600">Elementum nibh tellus molestie nunc non.</span>
</div>
</div>
</div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg-4 mt-4 lg:mt-0">
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2));">
<div class="p-3 surface-card h-full" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-purple-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-eye text-2xl text-purple-700"></i>
</div>
<h5 class="mb-2 text-900">Privacy</h5>
<span class="text-600">Neque egestas congue quisque.</span>
</div>
</div>
</div>
<div class="col-12 mt-8 mb-8 p-2 md:p-8" style="border-radius:20px; background:linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EFE1AF 0%, #C3DCFA 100%);">
<div class="flex flex-column justify-content-center align-items-center text-center px-3 py-3 md:py-0">
<h3 class="text-gray-900 mb-2">Joséphine Miller</h3>
<span class="text-gray-600 text-2xl">Peak Interactive</span>
<p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-4" style="max-width:800px;">“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>
<img src="assets/demo/images/landing/peak-logo.svg" class="mt-4" alt="Company logo">
</div>
</div>
</div>
</div>
<div id="highlights" class="py-4 px-4 lg:px-8 mx-0 my-6 lg:mx-8">
<div class="text-center">
<h2 class="text-900 font-normal mb-2">Powerful Everywhere</h2>
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
</div>
<div class="grid mt-8 pb-2 md:pb-8">
<div class="flex justify-content-center col-12 lg:col-6 bg-purple-100 p-0 flex-order-1 lg:flex-order-0" style="border-radius:8px;">
<img src="assets/demo/images/landing/mockup.svg" class="w-11" alt="mockup mobile">
</div>
<div class="col-12 lg:col-6 my-auto flex flex-column lg:align-items-end text-center lg:text-right">
<div class="flex align-items-center justify-content-center bg-purple-200 align-self-center lg:align-self-end" style="width:4.2rem; height:4.2rem; border-radius: 10px;">
<i class="pi pi-fw pi-mobile text-5xl text-purple-700"></i>
</div>
<h2 class="line-height-1 text-900 text-4xl font-normal">Congue Quisque Egestas</h2>
<span class="text-700 text-2xl line-height-3 ml-0 md:ml-2" style="max-width:650px;">Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span>
</div>
</div>
<div class="grid my-8 pt-2 md:pt-8">
<div class="col-12 lg:col-6 my-auto flex flex-column text-center lg:text-left lg:align-items-start">
<div class="flex align-items-center justify-content-center bg-yellow-200 align-self-center lg:align-self-start" style="width:4.2rem; height:4.2rem; border-radius:10px;">
<i class="pi pi-fw pi-desktop text-5xl text-yellow-700"></i>
</div>
<h2 class="line-height-1 text-900 text-4xl font-normal">Celerisque Eu Ultrices</h2>
<span class="text-700 text-2xl line-height-3 mr-0 md:mr-2" style="max-width:650px;">Adipiscing commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi.</span>
</div>
<div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 lg:col-6 bg-yellow-100 p-0" style="border-radius:8px;">
<img src="assets/demo/images/landing/mockup-desktop.svg" class="w-11" alt="mockup">
</div>
</div>
</div>
<div id="pricing" class="py-4 px-4 lg:px-8 my-2 md:my-4">
<div class="text-center">
<h2 class="text-900 font-normal mb-2">Matchless Pricing</h2>
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
</div>
<div class="grid justify-content-between mt-8 md:mt-0">
<div class="col-12 lg:col-4 p-0 md:p-3">
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" style="border-radius:10px">
<h3 class="text-900 text-center my-5">Free</h3>
<img src="assets/demo/images/landing/free.svg" class="w-10 h-10 mx-auto" alt="free">
<div class="my-5 text-center">
<span class="text-5xl font-bold mr-2 text-900">$0</span>
<span class="text-600">per month</span>
<button pButton pRipple label="Get Started" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></button>
</div>
<p-divider class="w-full bg-surface-200"></p-divider>
<ul class="my-5 list-none p-0 flex text-900 flex-column">
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Responsive Layout</span>
</li>
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Unlimited Push Messages</span>
</li>
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">50 Support Ticket</span>
</li>
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Free Shipping</span>
</li>
</ul>
</div>
</div>
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" style="border-radius:10px">
<h3 class="text-900 text-center my-5">Startup</h3>
<img src="assets/demo/images/landing/startup.svg" class="w-10 h-10 mx-auto" alt="startup">
<div class="my-5 text-center">
<span class="text-5xl font-bold mr-2 text-900">$1</span>
<span class="text-600">per month</span>
<button pButton pRipple label="Try Free" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></button>
</div>
<p-divider class="w-full bg-surface-200"></p-divider>
<ul class="my-5 list-none p-0 flex text-900 flex-column">
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Responsive Layout</span>
</li>
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Unlimited Push Messages</span>
</li>
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">50 Support Ticket</span>
</li>
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Free Shipping</span>
</li>
</ul>
</div>
</div>
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" style="border-radius:10px">
<h3 class="text-900 text-center my-5">Enterprise</h3>
<img src="assets/demo/images/landing/enterprise.svg" class="w-10 h-10 mx-auto" alt="enterprise">
<div class="my-5 text-center">
<span class="text-5xl font-bold mr-2 text-900">$999</span>
<span class="text-600">per month</span>
<button pButton pRipple label="Get a Quote" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></button>
</div>
<p-divider class="w-full bg-surface-200"></p-divider>
<ul class="my-5 list-none p-0 flex text-900 flex-column">
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Responsive Layout</span>
</li>
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Unlimited Push Messages</span>
</li>
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">50 Support Ticket</span>
</li>
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Free Shipping</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="py-4 px-4 mx-0 mt-8 lg:mx-8">
<div class="grid justify-content-between">
<div class="col-12 md:col-2" style="margin-top:-1.5rem;">
<a (click)="router.navigate(['/pages/landing'], {fragment: 'home'})" class="flex flex-wrap align-items-center justify-content-center md:justify-content-start md:mb-0 mb-3 cursor-pointer">
<img src="assets/layout/images/{{layoutService.config().colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="footer sections" width="50" height="50" class="mr-2">
<h4 class="font-medium text-3xl text-900">SAKAI</h4>
</a>
</div>
<div class="col-12 md:col-10 lg:col-7">
<div class="grid text-center md:text-left">
<div class="col-12 md:col-3">
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Company</h4>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">About Us</a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">News</a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Investor Relations</a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Careers</a>
<a class="line-height-3 text-xl block cursor-pointer text-700">Media Kit</a>
</div>
<div class="col-12 md:col-3 mt-4 md:mt-0">
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Resources</h4>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Get Started</a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Learn</a>
<a class="line-height-3 text-xl block cursor-pointer text-700">Case Studies</a>
</div>
<div class="col-12 md:col-3 mt-4 md:mt-0">
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Community</h4>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Discord</a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Events<img src="assets/demo/images/landing/new-badge.svg" class="ml-2"/></a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">FAQ</a>
<a class="line-height-3 text-xl block cursor-pointer text-700">Blog</a>
</div>
<div class="col-12 md:col-3 mt-4 md:mt-0">
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Legal</h4>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Brand Policy</a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Privacy Policy</a>
<a class="line-height-3 text-xl block cursor-pointer text-700">Terms of Service</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

13
src/app/demo/components/landing/landing.component.ts
View File

@@ -1,13 +0,0 @@
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { LayoutService } from 'src/app/layout/service/app.layout.service';
@Component({
selector: 'app-landing',
templateUrl: './landing.component.html'
})
export class LandingComponent {
constructor(public layoutService: LayoutService, public router: Router) { }
}

23
src/app/demo/components/landing/landing.module.ts
View File

@@ -1,23 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LandingRoutingModule } from './landing-routing.module';
import { LandingComponent } from './landing.component';
import { StyleClassModule } from 'primeng/styleclass';
import { DividerModule } from 'primeng/divider';
import { ChartModule } from 'primeng/chart';
import { PanelModule } from 'primeng/panel';
import { ButtonModule } from 'primeng/button';
@NgModule({
imports: [
CommonModule,
LandingRoutingModule,
DividerModule,
StyleClassModule,
ChartModule,
PanelModule,
ButtonModule
],
declarations: [LandingComponent]
})
export class LandingModule { }

39
src/app/demo/components/notfound/notfound.component.html
View File

@@ -1,39 +0,0 @@
<div class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="flex flex-column align-items-center justify-content-center">
<img src="assets/demo/images/notfound/logo-blue.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0">
<div style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, rgba(33, 150, 243, 0.4) 10%, rgba(33, 150, 243, 0) 30%);">
<div class="w-full surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center" style="border-radius:53px">
<span class="text-blue-500 font-bold text-3xl">404</span>
<h1 class="text-900 font-bold text-3xl lg:text-5xl mb-2">Not Found</h1>
<div class="text-600 mb-5">Requested resource is not available.</div>
<a [routerLink]="['/']" class="w-full flex align-items-center py-5 border-300 border-bottom-1">
<span class="flex justify-content-center align-items-center bg-cyan-400 border-round" style="height:3.5rem; width:3.5rem;">
<i class="text-50 pi pi-fw pi-table text-2xl"></i>
</span>
<span class="ml-4 flex flex-column">
<span class="text-900 lg:text-xl font-medium mb-0 block">Frequently Asked Questions</span>
<span class="text-600 lg:text-xl">Ultricies mi quis hendrerit dolor.</span>
</span>
</a>
<a [routerLink]="['/']" class="w-full flex align-items-center py-5 border-300 border-bottom-1">
<span class="flex justify-content-center align-items-center bg-orange-400 border-round" style="height:3.5rem; width:3.5rem;">
<i class="pi pi-fw pi-question-circle text-50 text-2xl"></i>
</span>
<span class="ml-4 flex flex-column">
<span class="text-900 lg:text-xl font-medium mb-0">Solution Center</span>
<span class="text-600 lg:text-xl">Phasellus faucibus scelerisque eleifend.</span>
</span>
</a>
<a [routerLink]="['/']" class="w-full flex align-items-center mb-5 py-5 border-300 border-bottom-1">
<span class="flex justify-content-center align-items-center bg-indigo-400 border-round" style="height:3.5rem; width:3.5rem;">
<i class="pi pi-fw pi-unlock text-50 text-2xl"></i>
</span>
<span class="ml-4 flex flex-column">
<span class="text-900 lg:text-xl font-medium mb-0">Permission Manager</span>
<span class="text-600 lg:text-xl">Accumsan in nisl nisi scelerisque</span>
</span>
</a>
</div>
</div>
</div>
</div>

7
src/app/demo/components/notfound/notfound.component.ts
View File

@@ -1,7 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-notfound',
templateUrl: './notfound.component.html',
})
export class NotfoundComponent { }

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

@@ -1,11 +0,0 @@
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 { }

170
src/app/demo/components/pages/crud/crud.component.html
View File

@@ -1,170 +0,0 @@
<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']" [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 [(ngModel)]="product.inventoryStatus" inputId="inventoryStatus" optionValue="label" [options]="statuses" placeholder="Select">
<ng-template pTemplate="selectedItem">
<span *ngIf="product && product.inventoryStatus" [class]="'product-badge status-' + product.inventoryStatus.toString().toLowerCase()">{{product.inventoryStatus}}</span>
</ng-template>
<ng-template let-option pTemplate="item">
<span [class]="'product-badge status-' + option.value">{{option.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>

141
src/app/demo/components/pages/crud/crud.component.ts
View File

@@ -1,141 +0,0 @@
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');
}
}

41
src/app/demo/components/pages/crud/crud.module.ts
View File

@@ -1,41 +0,0 @@
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 { }

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

@@ -1,11 +0,0 @@
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 { }

8
src/app/demo/components/pages/empty/emptydemo.component.html
View File

@@ -1,8 +0,0 @@
<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>

6
src/app/demo/components/pages/empty/emptydemo.component.ts
View File

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

13
src/app/demo/components/pages/empty/emptydemo.module.ts
View File

@@ -1,13 +0,0 @@
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 { }

13
src/app/demo/components/pages/pages-routing.module.ts
View File

@@ -1,13 +0,0 @@
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) },
{ path: '**', redirectTo: '/notfound' }
])],
exports: [RouterModule]
})
export class PagesRoutingModule { }

12
src/app/demo/components/pages/pages.module.ts
View File

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

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

@@ -1,11 +0,0 @@
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 { }

91
src/app/demo/components/pages/timeline/timelinedemo.component.html
View File

@@ -1,91 +0,0 @@
<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>
</div>

27
src/app/demo/components/pages/timeline/timelinedemo.component.ts
View File

@@ -1,27 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { PrimeIcons } from 'primeng/api';
@Component({
templateUrl: './timelinedemo.component.html',
styleUrls: ['./timelinedemo.scss']
})
export class TimelineDemoComponent implements OnInit {
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"
];
}
}

19
src/app/demo/components/pages/timeline/timelinedemo.module.ts
View File

@@ -1,19 +0,0 @@
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 { }

21
src/app/demo/components/pages/timeline/timelinedemo.scss
View File

@@ -1,21 +0,0 @@
@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;
}
}
}
}

409
src/app/demo/components/primeblocks/blocks/blocks.component.html
View File

@@ -1,409 +0,0 @@
<block-viewer header="Hero" [code]="block1">
<div class="grid grid-nogutter surface-section text-800">
<div class="col-12 md:col-6 p-6 text-center md:text-left flex align-items-center ">
<section>
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
<div class="text-6xl text-primary font-bold mb-3">visitors deserve to see</div>
<p class="mt-0 mb-4 text-700 line-height-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button pButton pRipple label="Learn More" type="button" class="mr-3 p-button-raised"></button>
<button pButton pRipple label="Live Demo" type="button" class="p-button-outlined"></button>
</section>
</div>
<div class="col-12 md:col-6 overflow-hidden">
<img src="assets/demo/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)">
</div>
</div>
</block-viewer>
<block-viewer header="Feature" [code]="block2">
<div class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center">
<div class="mb-3 font-bold text-2xl">
<span class="text-900">One Product, </span>
<span class="text-blue-600">Many Solutions</span>
</div>
<div class="text-700 text-sm mb-6">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
<div class="grid">
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-desktop text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Built for Developers</div>
<span class="text-700 text-sm line-height-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-lock text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">End-to-End Encryption</div>
<span class="text-700 text-sm line-height-3">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-check-circle text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Easy to Use</div>
<span class="text-700 text-sm line-height-3">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-globe text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Fast & Global Support</div>
<span class="text-700 text-sm line-height-3">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-github text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Open Source</div>
<span class="text-700 text-sm line-height-3">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
</div>
<div class="col-12 md:col-4 md:mb-4 mb-0 px-3">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-shield text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Trusted Securitty</div>
<span class="text-700 text-sm line-height-3">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
</div>
</div>
</div>
</block-viewer>
<block-viewer header="Pricing" [code]="block3">
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
<div class="text-900 font-bold text-6xl mb-4 text-center">Pricing Plans</div>
<div class="text-700 text-xl mb-6 text-center line-height-3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
<div class="grid">
<div class="col-12 lg:col-4">
<div class="p-3 h-full">
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
<div class="text-900 font-medium text-xl mb-2">Basic</div>
<div class="text-600">Plan description</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<div class="flex align-items-center">
<span class="font-bold text-2xl text-900">$9</span>
<span class="ml-2 font-medium text-600">per month</span>
</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<ul class="list-none p-0 m-0 flex-grow-1">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
</ul>
<hr class="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" />
<button pButton pRipple label="Buy Now" class="p-3 w-full mt-auto"></button>
</div>
</div>
</div>
<div class="col-12 lg:col-4">
<div class="p-3 h-full">
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
<div class="text-900 font-medium text-xl mb-2">Premium</div>
<div class="text-600">Plan description</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<div class="flex align-items-center">
<span class="font-bold text-2xl text-900">$29</span>
<span class="ml-2 font-medium text-600">per month</span>
</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<ul class="list-none p-0 m-0 flex-grow-1">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Duis ultricies lacus sed</span>
</li>
</ul>
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
<button pButton pRipple label="Buy Now" class="p-3 w-full"></button>
</div>
</div>
</div>
<div class="col-12 lg:col-4">
<div class="p-3 h-full">
<div class="shadow-2 p-3 flex flex-column surface-card" style="border-radius: 6px">
<div class="text-900 font-medium text-xl mb-2">Enterprise</div>
<div class="text-600">Plan description</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<div class="flex align-items-center">
<span class="font-bold text-2xl text-900">$49</span>
<span class="ml-2 font-medium text-600">per month</span>
</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<ul class="list-none p-0 m-0 flex-grow-1">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Duis ultricies lacus sed</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Imperdiet proin</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Nisi scelerisque</span>
</li>
</ul>
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
<button pButton pRipple label="Buy Now" class="p-3 w-full p-button-outlined"></button>
</div>
</div>
</div>
</div>
</div>
</block-viewer>
<block-viewer header="Call to Action" [code]="block4">
<div class="surface-section px-4 py-8 md:px-6 lg:px-8">
<div class="text-700 text-center">
<div class="text-blue-600 font-bold mb-3"><i class="pi pi-discord"></i>&nbsp;POWERED BY DISCORD</div>
<div class="text-900 font-bold text-5xl mb-3">Join Our Design Community</div>
<div class="text-700 text-2xl mb-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
<button pButton pRipple label="Join Now" icon="pi pi-discord" class="font-bold px-5 py-3 p-button-raised p-button-rounded white-space-nowrap"></button>
</div>
</div>
</block-viewer>
<block-viewer header="Banner" [code]="block5" containerClass="surface-section py-8">
<div class="bg-bluegray-900 text-gray-100 p-3 flex justify-content-between lg:justify-content-center align-items-center flex-wrap">
<div class="font-bold mr-8">🔥 Hot Deals!</div>
<div class="align-items-center hidden lg:flex">
<span class="line-height-3">Libero voluptatum atque exercitationem praesentium provident odit.</span>
</div>
<a class="flex align-items-center ml-2 mr-8">
<a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
</a>
<a pRipple class="flex align-items-center no-underline justify-content-center border-circle text-gray-50 hover:bg-bluegray-700 cursor-pointer transition-colors transition-duration-150" style="width:2rem; height: 2rem">
<i class="pi pi-times"></i>
</a>
</div>
</block-viewer>
<block-viewer header="Page Heading" [code]="block6">
<div class="surface-section px-4 py-5 md:px-6 lg:px-8">
<ul class="list-none p-0 m-0 flex align-items-center font-medium mb-3">
<li>
<a class="text-500 no-underline line-height-3 cursor-pointer">Application</a>
</li>
<li class="px-2">
<i class="pi pi-angle-right text-500 line-height-3"></i>
</li>
<li>
<span class="text-900 line-height-3">Analytics</span>
</li>
</ul>
<div class="flex align-items-start flex-column lg:justify-content-between lg:flex-row">
<div>
<div class="font-medium text-3xl text-900">Customers</div>
<div class="flex align-items-center text-700 flex-wrap">
<div class="mr-5 flex align-items-center mt-3">
<i class="pi pi-users mr-2"></i>
<span>332 Active Users</span>
</div>
<div class="mr-5 flex align-items-center mt-3">
<i class="pi pi-globe mr-2"></i>
<span>9402 Sessions</span>
</div>
<div class="flex align-items-center mt-3">
<i class="pi pi-clock mr-2"></i>
<span>2.32m Avg. Duration</span>
</div>
</div>
</div>
<div class="mt-3 lg:mt-0">
<button pButton pRipple label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></button>
<button pButton pRipple label="Save" icon="pi pi-check"></button>
</div>
</div>
</div>
</block-viewer>
<block-viewer header="Stats" [code]="block7">
<div class="surface-ground px-4 py-5 md:px-6 lg:px-8">
<div class="grid">
<div class="col-12 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Orders</span>
<div class="text-900 font-medium text-xl">152</div>
</div>
<div class="flex align-items-center justify-content-center bg-blue-100 border-round" style="width:2.5rem;height:2.5rem">
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">24 new </span>
<span class="text-500">since last visit</span>
</div>
</div>
<div class="col-12 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Revenue</span>
<div class="text-900 font-medium text-xl">$2.100</div>
</div>
<div class="flex align-items-center justify-content-center bg-orange-100 border-round" style="width:2.5rem;height:2.5rem">
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">%52+ </span>
<span class="text-500">since last week</span>
</div>
</div>
<div class="col-12 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Customers</span>
<div class="text-900 font-medium text-xl">28441</div>
</div>
<div class="flex align-items-center justify-content-center bg-cyan-100 border-round" style="width:2.5rem;height:2.5rem">
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">520 </span>
<span class="text-500">newly registered</span>
</div>
</div>
<div class="col-12 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Comments</span>
<div class="text-900 font-medium text-xl">152 Unread</div>
</div>
<div class="flex align-items-center justify-content-center bg-purple-100 border-round" style="width:2.5rem;height:2.5rem">
<i class="pi pi-comment text-purple-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">85 </span>
<span class="text-500">responded</span>
</div>
</div>
</div>
</div>
</block-viewer>
<block-viewer header="Sign-In" [code]="block8" containerClass="surface-ground px-4 py-8 md:px-6 lg:px-8 flex align-items-center justify-content-center">
<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
<div class="text-center mb-5">
<img src="assets/demo/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3">
<div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
<span class="text-600 font-medium line-height-3">Don't have an account?</span>
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
</div>
<div>
<label for="email1" class="block text-900 font-medium mb-2">Email</label>
<input id="email1" type="text" pInputText class="w-full mb-3">
<label for="password1" class="block text-900 font-medium mb-2">Password</label>
<input id="password1" type="password" pInputText class="w-full mb-3">
<div class="flex align-items-center justify-content-between mb-6">
<div class="flex align-items-center">
<p-checkbox id="rememberme1" [binary]="true" styleClass="mr-2"></p-checkbox>
<label for="rememberme1">Remember me</label>
</div>
<a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
</div>
<button pButton pRipple label="Sign In" icon="pi pi-user" class="w-full"></button>
</div>
</div>
</block-viewer>
<block-viewer header="Description List" [code]="block9" containerClass="surface-section px-4 py-8 md:px-6 lg:px-8">
<div class="surface-section">
<div class="font-medium text-3xl text-900 mb-3">Movie Information</div>
<div class="text-500 mb-5">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
<ul class="list-none p-0 m-0">
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Title</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Heat</div>
<div class="w-6 md:w-2 flex justify-content-end">
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Genre</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">
<p-chip label="Crime" class="mr-2"></p-chip>
<p-chip label="Drama" class="mr-2"></p-chip>
<p-chip label="Thriller"></p-chip>
</div>
<div class="w-6 md:w-2 flex justify-content-end">
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Director</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Michael Mann</div>
<div class="w-6 md:w-2 flex justify-content-end">
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Actors</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Robert De Niro, Al Pacino</div>
<div class="w-6 md:w-2 flex justify-content-end">
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 border-bottom-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Plot</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1 line-height-3">
A group of professional bank robbers start to feel the heat from police
when they unknowingly leave a clue at their latest heist.</div>
<div class="w-6 md:w-2 flex justify-content-end">
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
</div>
</li>
</ul>
</div>
</block-viewer>
<block-viewer header="Card" [code]="block10" containerClass="px-4 py-8 md:px-6 lg:px-8">
<div class="surface-card p-4 shadow-2 border-round">
<div class="text-3xl font-medium text-900 mb-3">Card Title</div>
<div class="font-medium text-500 mb-3">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
<div style="height: 150px" class="border-2 border-dashed surface-border"></div>
</div>
</block-viewer>

407
src/app/demo/components/primeblocks/blocks/blocks.component.ts
View File

@@ -1,407 +0,0 @@
import { Component } from '@angular/core';
@Component({
templateUrl: './blocks.component.html'
})
export class BlocksComponent{
block1: string = `
<div class="grid grid-nogutter surface-section text-800">
<div class="col-12 md:col-6 p-6 text-center md:text-left flex align-items-center ">
<section>
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
<div class="text-6xl text-primary font-bold mb-3">visitors deserve to see</div>
<p class="mt-0 mb-4 text-700 line-height-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button pButton pRipple label="Learn More" type="button" class="mr-3 p-button-raised"></button>
<button pButton pRipple label="Live Demo" type="button" class="p-button-outlined"></button>
</section>
</div>
<div class="col-12 md:col-6 overflow-hidden">
<img src="assets/demo/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)">
</div>
</div>`;
block2: string = `
<div class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center">
<div class="mb-3 font-bold text-2xl">
<span class="text-900">One Product, </span>
<span class="text-blue-600">Many Solutions</span>
</div>
<div class="text-700 text-sm mb-6">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
<div class="grid">
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-desktop text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Built for Developers</div>
<span class="text-700 text-sm line-height-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-lock text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">End-to-End Encryption</div>
<span class="text-700 text-sm line-height-3">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-check-circle text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Easy to Use</div>
<span class="text-700 text-sm line-height-3">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-globe text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Fast & Global Support</div>
<span class="text-700 text-sm line-height-3">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-github text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Open Source</div>
<span class="text-700 text-sm line-height-3">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
</div>
<div class="col-12 md:col-4 md:mb-4 mb-0 px-3">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-shield text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Trusted Securitty</div>
<span class="text-700 text-sm line-height-3">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
</div>
</div>
</div>`;
block3: string = `
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
<div class="text-900 font-bold text-6xl mb-4 text-center">Pricing Plans</div>
<div class="text-700 text-xl mb-6 text-center line-height-3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
<div class="grid">
<div class="col-12 lg:col-4">
<div class="p-3 h-full">
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
<div class="text-900 font-medium text-xl mb-2">Basic</div>
<div class="text-600">Plan description</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<div class="flex align-items-center">
<span class="font-bold text-2xl text-900">$9</span>
<span class="ml-2 font-medium text-600">per month</span>
</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<ul class="list-none p-0 m-0 flex-grow-1">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
</ul>
<hr class="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" />
<button pButton pRipple label="Buy Now" class="p-3 w-full mt-auto"></button>
</div>
</div>
</div>
<div class="col-12 lg:col-4">
<div class="p-3 h-full">
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
<div class="text-900 font-medium text-xl mb-2">Premium</div>
<div class="text-600">Plan description</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<div class="flex align-items-center">
<span class="font-bold text-2xl text-900">$29</span>
<span class="ml-2 font-medium text-600">per month</span>
</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<ul class="list-none p-0 m-0 flex-grow-1">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Duis ultricies lacus sed</span>
</li>
</ul>
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
<button pButton pRipple label="Buy Now" class="p-3 w-full"></button>
</div>
</div>
</div>
<div class="col-12 lg:col-4">
<div class="p-3 h-full">
<div class="shadow-2 p-3 flex flex-column surface-card" style="border-radius: 6px">
<div class="text-900 font-medium text-xl mb-2">Enterprise</div>
<div class="text-600">Plan description</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<div class="flex align-items-center">
<span class="font-bold text-2xl text-900">$49</span>
<span class="ml-2 font-medium text-600">per month</span>
</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<ul class="list-none p-0 m-0 flex-grow-1">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Duis ultricies lacus sed</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Imperdiet proin</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Nisi scelerisque</span>
</li>
</ul>
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
<button pButton pRipple label="Buy Now" class="p-3 w-full p-button-outlined"></button>
</div>
</div>
</div>
</div>
</div>`;
block4: string = `
<div class="surface-section px-4 py-8 md:px-6 lg:px-8">
<div class="text-700 text-center">
<div class="text-blue-600 font-bold mb-3"><i class="pi pi-discord"></i>&nbsp;POWERED BY DISCORD</div>
<div class="text-900 font-bold text-5xl mb-3">Join Our Design Community</div>
<div class="text-700 text-2xl mb-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
<button pButton pRipple label="Join Now" icon="pi pi-discord" class="font-bold px-5 py-3 p-button-raised p-button-rounded white-space-nowrap"></button>
</div>
</div>`;
block5: string = `
<div class="bg-bluegray-900 text-gray-100 p-3 flex justify-content-between lg:justify-content-center align-items-center flex-wrap">
<div class="font-bold mr-8">🔥 Hot Deals!</div>
<div class="align-items-center hidden lg:flex">
<span class="line-height-3">Libero voluptatum atque exercitationem praesentium provident odit.</span>
</div>
<a class="flex align-items-center ml-2 mr-8">
<a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
</a>
<a pRipple class="flex align-items-center no-underline justify-content-center border-circle text-gray-50 hover:bg-bluegray-700 cursor-pointer transition-colors transition-duration-150" style="width:2rem; height: 2rem">
<i class="pi pi-times"></i>
</a>
</div>`;
block6: string = `
<div class="surface-section px-4 py-5 md:px-6 lg:px-8">
<ul class="list-none p-0 m-0 flex align-items-center font-medium mb-3">
<li>
<a class="text-500 no-underline line-height-3 cursor-pointer">Application</a>
</li>
<li class="px-2">
<i class="pi pi-angle-right text-500 line-height-3"></i>
</li>
<li>
<span class="text-900 line-height-3">Analytics</span>
</li>
</ul>
<div class="flex align-items-start flex-column lg:justify-content-between lg:flex-row">
<div>
<div class="font-medium text-3xl text-900">Customers</div>
<div class="flex align-items-center text-700 flex-wrap">
<div class="mr-5 flex align-items-center mt-3">
<i class="pi pi-users mr-2"></i>
<span>332 Active Users</span>
</div>
<div class="mr-5 flex align-items-center mt-3">
<i class="pi pi-globe mr-2"></i>
<span>9402 Sessions</span>
</div>
<div class="flex align-items-center mt-3">
<i class="pi pi-clock mr-2"></i>
<span>2.32m Avg. Duration</span>
</div>
</div>
</div>
<div class="mt-3 lg:mt-0">
<button pButton pRipple label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></button>
<button pButton pRipple label="Save" icon="pi pi-check"></button>
</div>
</div>
</div>`;
block7: string = `
<div class="surface-ground px-4 py-5 md:px-6 lg:px-8">
<div class="grid">
<div class="col-12 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Orders</span>
<div class="text-900 font-medium text-xl">152</div>
</div>
<div class="flex align-items-center justify-content-center bg-blue-100 border-round" style="width:2.5rem;height:2.5rem">
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">24 new </span>
<span class="text-500">since last visit</span>
</div>
</div>
<div class="col-12 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Revenue</span>
<div class="text-900 font-medium text-xl">$2.100</div>
</div>
<div class="flex align-items-center justify-content-center bg-orange-100 border-round" style="width:2.5rem;height:2.5rem">
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">%52+ </span>
<span class="text-500">since last week</span>
</div>
</div>
<div class="col-12 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Customers</span>
<div class="text-900 font-medium text-xl">28441</div>
</div>
<div class="flex align-items-center justify-content-center bg-cyan-100 border-round" style="width:2.5rem;height:2.5rem">
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">520 </span>
<span class="text-500">newly registered</span>
</div>
</div>
<div class="col-12 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Comments</span>
<div class="text-900 font-medium text-xl">152 Unread</div>
</div>
<div class="flex align-items-center justify-content-center bg-purple-100 border-round" style="width:2.5rem;height:2.5rem">
<i class="pi pi-comment text-purple-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">85 </span>
<span class="text-500">responded</span>
</div>
</div>
</div>
</div>`;
block8: string = `
<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
<div class="text-center mb-5">
<img src="assets/demo/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3">
<div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
<span class="text-600 font-medium line-height-3">Don't have an account?</span>
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
</div>
<div>
<label for="email1" class="block text-900 font-medium mb-2">Email</label>
<input id="email1" type="text" pInputText class="w-full mb-3">
<label for="password1" class="block text-900 font-medium mb-2">Password</label>
<input id="password1" type="password" pInputText class="w-full mb-3">
<div class="flex align-items-center justify-content-between mb-6">
<div class="flex align-items-center">
<p-checkbox id="rememberme1" [binary]="true" styleClass="mr-2"></p-checkbox>
<label for="rememberme1">Remember me</label>
</div>
<a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
</div>
<button pButton pRipple label="Sign In" icon="pi pi-user" class="w-full"></button>
</div>
</div>`;
block9: string = `
<div class="surface-section">
<div class="font-medium text-3xl text-900 mb-3">Movie Information</div>
<div class="text-500 mb-5">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
<ul class="list-none p-0 m-0">
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Title</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Heat</div>
<div class="w-6 md:w-2 flex justify-content-end">
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Genre</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">
<p-chip label="Crime" class="mr-2"></p-chip>
<p-chip label="Drama" class="mr-2"></p-chip>
<p-chip label="Thriller"></p-chip>
</div>
<div class="w-6 md:w-2 flex justify-content-end">
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Director</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Michael Mann</div>
<div class="w-6 md:w-2 flex justify-content-end">
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Actors</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Robert De Niro, Al Pacino</div>
<div class="w-6 md:w-2 flex justify-content-end">
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 border-bottom-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Plot</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1 line-height-3">
A group of professional bank robbers start to feel the heat from police
when they unknowingly leave a clue at their latest heist.</div>
<div class="w-6 md:w-2 flex justify-content-end">
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
</div>
</li>
</ul>
</div>`;
block10: string = `
<div class="surface-card p-4 shadow-2 border-round">
<div class="text-3xl font-medium text-900 mb-3">Card Title</div>
<div class="font-medium text-500 mb-3">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
<div style="height: 150px" class="border-2 border-dashed surface-border"></div>
</div>`;
}

106
src/app/demo/components/primeblocks/blockviewer/blockviewer.component.scss
View File

@@ -1,106 +0,0 @@
.block-section {
margin-bottom: 4rem;
}
.block-header {
padding: 1rem 2rem;
background-color: var(--surface-section);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border:1px solid var(--surface-border);
display: flex;
align-items: center;
justify-content: space-between;
.block-title {
font-weight: 700;
display: inline-flex;
align-items: center;
.badge-free {
border-radius: 4px;
padding: .25rem .5rem;
background-color: var(--orange-500);
color: white;
margin-left: 1rem;
font-weight: 700;
font-size: .875rem;
}
}
.block-actions {
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
margin-left: 1rem;
a {
display: flex;
align-items: center;
margin-right: .75rem;
padding: .5rem 1rem;
border-radius: 4px;
border: 1px solid transparent;
transition: background-color .2s;
cursor: pointer;
&:last-child {
margin-right: 0;
}
&:not(.block-action-disabled):hover {
background-color: var(--surface-hover);
}
&.block-action-active {
border-color: var(--primary-color);
color: var(--primary-color);
}
&.block-action-copy {
i {
color: var(--primary-color);
font-size: 1.25rem;
}
}
&.block-action-disabled {
opacity: .6;
cursor: auto !important;
}
i {
margin-right: .5rem;
}
}
}
}
.block-content {
padding: 0;
border:1px solid var(--surface-border);
border-top: 0 none;
pre.app-code {
background-color: var(--surface-card) !important;
padding-bottom: 1rem !important;
margin-bottom: 0 !important;
code {
padding: 1rem 2.5rem;
}
}
}
@media screen and (max-width: 575px) {
.block-header {
flex-direction: column;
align-items: start;
.block-actions {
margin-top: 1rem;
margin-left: 0;
}
}
}

70
src/app/demo/components/primeblocks/blockviewer/blockviewer.component.ts
View File

@@ -1,70 +0,0 @@
import { Component, Input } from '@angular/core';
enum BlockView {
PREVIEW,
CODE
}
@Component({
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'block-viewer',
template: `
<div class="block-section">
<div class="block-header">
<span class="block-title">
<span>{{header}}</span>
<span class="badge-free" *ngIf="free">Free</span>
<span class="badge-new" *ngIf="new">New</span>
</span>
<div class="block-actions">
<a tabindex="0" [ngClass]="{'block-action-active': blockView === BlockView.PREVIEW}" (click)="activateView($event, BlockView.PREVIEW)"><span>Preview</span></a>
<a [attr.tabindex]="'0'" [ngClass]="{'block-action-active': blockView === BlockView.CODE}" (click)="activateView($event, BlockView.CODE)">
<span>Code</span>
</a>
<a [attr.tabindex]="'0'" class="block-action-copy" (click)="copyCode($event)"
pTooltip="Copied to clipboard" tooltipEvent="focus" tooltipPosition="bottom"><i class="pi pi-copy m-0"></i></a>
</div>
</div>
<div class="block-content">
<div [class]="containerClass" [ngStyle]="previewStyle" *ngIf="blockView === BlockView.PREVIEW">
<ng-content></ng-content>
</div>
<div *ngIf="blockView === BlockView.CODE">
<pre class="app-code"><code>{{code}}</code></pre>
</div>
</div>
</div>
`,
styleUrls: ['./blockviewer.component.scss']
})
export class BlockViewerComponent {
@Input() header!: string;
@Input() code!: string;
@Input() containerClass!: string;
@Input() previewStyle!: object;
@Input() free: boolean = true;
@Input() new: boolean = false;
BlockView = BlockView;
blockView: BlockView = BlockView.PREVIEW;
activateView(event: Event, blockView: BlockView) {
this.blockView = blockView;
event.preventDefault();
}
async copyCode(event: Event) {
await navigator.clipboard.writeText(this.code);
event.preventDefault();
}
}

11
src/app/demo/components/primeblocks/primeblocks-routing.module.ts
View File

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

30
src/app/demo/components/primeblocks/primeblocks.module.ts
View File

@@ -1,30 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BlocksComponent } from './blocks/blocks.component';
import { PrimeBlocksRoutingModule } from './primeblocks-routing.module';
import { BlockViewerComponent } from './blockviewer/blockviewer.component'
import { ChipModule } from 'primeng/chip';
import { CheckboxModule } from 'primeng/checkbox';
import { ButtonModule } from 'primeng/button';
import { RippleModule } from 'primeng/ripple';
import { FormsModule } from '@angular/forms';
import { InputTextModule } from 'primeng/inputtext';
import { PasswordModule } from 'primeng/password';
import { TooltipModule } from 'primeng/tooltip';
@NgModule({
imports: [
CommonModule,
ButtonModule,
RippleModule,
ChipModule,
CheckboxModule,
FormsModule,
InputTextModule,
PasswordModule,
TooltipModule,
PrimeBlocksRoutingModule
],
declarations: [BlocksComponent, BlockViewerComponent]
})
export class PrimeBlocksModule { }

11
src/app/demo/components/uikit/button/buttondemo-routing.module.ts
View File

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

170
src/app/demo/components/uikit/button/buttondemo.component.html
View File

@@ -1,170 +0,0 @@
<div class="grid">
<div class="col-12 md:col-6">
<div class="card">
<h5>Default</h5>
<div class="flex flex-wrap gap-2">
<button pButton pRipple label="Submit"></button>
<button pButton pRipple label="Disabled" disabled="true"></button>
<p-button label="Link" styleClass="p-button-link"></p-button>
</div>
</div>
<div class="card">
<h5>Severities</h5>
<div class="flex flex-wrap gap-2">
<button pButton pRipple type="button" label="Primary"></button>
<button pButton pRipple type="button" label="Secondary" class="p-button-secondary"></button>
<button pButton pRipple type="button" label="Success" class="p-button-success"></button>
<button pButton pRipple type="button" label="Info" class="p-button-info"></button>
<button pButton pRipple type="button" label="Warning" class="p-button-warning"></button>
<button pButton pRipple type="button" label="Help" class="p-button-help"></button>
<button pButton pRipple type="button" label="Danger" class="p-button-danger"></button>
</div>
</div>
<div class="card">
<h5>Text</h5>
<div class="flex flex-wrap gap-2">
<button pButton pRipple type="button" label="Primary" class="p-button-text"></button>
<button pButton pRipple type="button" label="Secondary" class="p-button-secondary p-button-text"></button>
<button pButton pRipple type="button" label="Success" class="p-button-success p-button-text"></button>
<button pButton pRipple type="button" label="Info" class="p-button-info p-button-text"></button>
<button pButton pRipple type="button" label="Warning" class="p-button-warning p-button-text"></button>
<button pButton pRipple type="button" label="Help" class="p-button-help p-button-text"></button>
<button pButton pRipple type="button" label="Danger" class="p-button-danger p-button-text"></button>
<button pButton pRipple type="button" label="Plain" class="p-button-text p-button-plain"></button>
</div>
</div>
<div class="card">
<h5>Outlined</h5>
<div class="flex flex-wrap gap-2">
<button pButton pRipple type="button" label="Primary" class="p-button-outlined"></button>
<button pButton pRipple type="button" label="Secondary" class="p-button-outlined p-button-secondary"></button>
<button pButton pRipple type="button" label="Success" class="p-button-outlined p-button-success"></button>
<button pButton pRipple type="button" label="Info" class="p-button-outlined p-button-info"></button>
<button pButton pRipple type="button" label="Warning" class="p-button-outlined p-button-warning"></button>
<button pButton pRipple type="button" label="Help" class="p-button-outlined p-button-help"></button>
<button pButton pRipple type="button" label="Danger" class="p-button-outlined p-button-danger"></button>
</div>
</div>
<div class="card">
<h5>Button Set</h5>
<span class="p-buttonset">
<button pButton pRipple label="Save" icon="pi pi-check"></button>
<button pButton pRipple label="Delete" icon="pi pi-trash"></button>
</span>
</div>
<div class="card">
<h5>SplitButton</h5>
<div class="flex flex-wrap gap-2">
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-info"></p-splitButton>
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-success"></p-splitButton>
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-warning"></p-splitButton>
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-help"></p-splitButton>
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-danger"></p-splitButton>
</div>
</div>
<div class="card">
<h5>Templating</h5>
<div class="flex flex-wrap gap-2">
<p-button>
<img alt="logo" src="https://primefaces.org/cdn/primeng/images/primeng-icon.svg" style="width: 1.5rem"/>
</p-button>
<p-button styleClass="p-button-outlined">
<img alt="logo" src="https://primefaces.org/cdn/primeng/images/primeng-icon.svg" style="width: 1.5rem"/>
<span class="ml-2 font-bold">PrimeNG</span>
</p-button>
</div>
</div>
</div>
<div class="col-12 md:col-6">
<div class="card">
<h5>Icons</h5>
<div class="flex flex-wrap gap-2">
<button pButton pRipple icon="pi pi-star-fill"></button>
<button pButton pRipple label="Submit" icon="pi pi-bookmark"></button>
<button pButton pRipple label="Submit" icon="pi pi-bookmark" iconPos="right"></button>
</div>
</div>
<div class="card">
<h5>Raised</h5>
<div class="flex flex-wrap gap-2">
<button pButton pRipple type="button" label="Primary" class="p-button-raised"></button>
<button pButton pRipple type="button" label="Secondary" class="p-button-raised p-button-secondary"></button>
<button pButton pRipple type="button" label="Success" class="p-button-raised p-button-success"></button>
<button pButton pRipple type="button" label="Info" class="p-button-raised p-button-info"></button>
<button pButton pRipple type="button" label="Warning" class="p-button-raised p-button-warning"></button>
<button pButton pRipple type="button" label="Help" class="p-button-raised p-button-help"></button>
<button pButton pRipple type="button" label="Danger" class="p-button-raised p-button-danger"></button>
</div>
</div>
<div class="card">
<h5>Rounded</h5>
<div class="flex flex-wrap gap-2">
<button pButton pRipple type="button" label="Primary" class="p-button-rounded"></button>
<button pButton pRipple type="button" label="Secondary" class="p-button-rounded p-button-secondary"></button>
<button pButton pRipple type="button" label="Success" class="p-button-rounded p-button-success"></button>
<button pButton pRipple type="button" label="Info" class="p-button-rounded p-button-info"></button>
<button pButton pRipple type="button" label="Warning" class="p-button-rounded p-button-warning"></button>
<button pButton pRipple type="button" label="Help" class="p-button-rounded p-button-help"></button>
<button pButton pRipple type="button" label="Danger" class="p-button-rounded p-button-danger"></button>
</div>
</div>
<div class="card">
<h5>Rounded Icons</h5>
<div class="flex flex-wrap gap-2">
<button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded"></button>
<button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary"></button>
<button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success"></button>
<button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info"></button>
<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning"></button>
<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help"></button>
<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger"></button>
</div>
</div>
<div class="card">
<h5>Rounded Text</h5>
<div class="flex flex-wrap gap-2">
<button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded p-button-text"></button>
<button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text"></button>
<button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-button-text"></button>
<button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info p-button-text"></button>
<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text"></button>
<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text"></button>
<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text"></button>
<button pButton pRipple type="button" icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain"></button>
</div>
</div>
<div class="card">
<h5>Rounded Outlined</h5>
<div class="flex flex-wrap gap-2">
<button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded p-button-outlined"></button>
<button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined"></button>
<button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined"></button>
<button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined"></button>
<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined"></button>
<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined"></button>
<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined"></button>
</div>
</div>
<div class="card">
<h5>Loading</h5>
<div class="flex flex-wrap gap-2">
<p-button label="Search" icon="pi pi-search" [loading]="loading[0]" (onClick)="load(0)"></p-button>
<p-button label="Search" icon="pi pi-search" iconPos="right" [loading]="loading[1]" (onClick)="load(1)"></p-button>
<p-button icon="pi pi-search" [loading]="loading[2]" (onClick)="load(2)"></p-button>
<p-button label="Search" [loading]="loading[3]" (onClick)="load(3)"></p-button>
</div>
</div>
</div>
</div>

28
src/app/demo/components/uikit/button/buttondemo.component.ts
View File

@@ -1,28 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';
@Component({
templateUrl: './buttondemo.component.html'
})
export class ButtonDemoComponent implements OnInit {
items: MenuItem[] = [];
loading = [false, false, false, false];
ngOnInit() {
this.items = [
{ label: 'Update', icon: 'pi pi-refresh' },
{ label: 'Delete', icon: 'pi pi-times' },
{ label: 'Angular.io', icon: 'pi pi-info', url: 'http://angular.io' },
{ separator: true },
{ label: 'Setup', icon: 'pi pi-cog' }
];
}
load(index: number) {
this.loading[index] = true;
setTimeout(() => this.loading[index] = false, 1000);
}
}

21
src/app/demo/components/uikit/button/buttondemo.module.ts
View File

@@ -1,21 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ButtonDemoRoutingModule } from './buttondemo-routing.module';
import { ButtonDemoComponent } from './buttondemo.component';
import { ButtonModule } from 'primeng/button';
import { RippleModule } from 'primeng/ripple';
import { SplitButtonModule } from 'primeng/splitbutton';
import { ToggleButtonModule } from 'primeng/togglebutton';
@NgModule({
imports: [
CommonModule,
ButtonDemoRoutingModule,
ButtonModule,
RippleModule,
SplitButtonModule,
ToggleButtonModule,
],
declarations: [ButtonDemoComponent]
})
export class ButtonDemoModule { }

11
src/app/demo/components/uikit/charts/chartsdemo-routing.module.ts
View File

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

34
src/app/demo/components/uikit/charts/chartsdemo.component.html
View File

@@ -1,34 +0,0 @@
<div class="grid p-fluid">
<div class="col-12 lg:col-6">
<div class="card">
<h5>Linear Chart</h5>
<p-chart type="line" [data]="lineData" [options]="lineOptions"></p-chart>
</div>
<div class="card flex flex-column align-items-center">
<h5 class="text-left w-full">Pie Chart</h5>
<p-chart type="pie" [data]="pieData" [options]="pieOptions"></p-chart>
</div>
<div class="card flex flex-column align-items-center">
<h5 class="text-left w-full">Polar Area Chart</h5>
<p-chart type="polarArea" [data]="polarData" [options]="polarOptions"></p-chart>
</div>
</div>
<div class="col-12 lg:col-6">
<div class="card">
<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="text-left w-full">Doughnut Chart</h5>
<p-chart type="doughnut" [data]="pieData" [options]="pieOptions"></p-chart>
</div>
<div class="card flex flex-column align-items-center">
<h5 class="text-left w-full">Radar Chart</h5>
<p-chart type="radar" [data]="radarData" [options]="radarOptions"></p-chart>
</div>
</div>
</div>

270
src/app/demo/components/uikit/charts/chartsdemo.component.ts
View File

@@ -1,270 +0,0 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription, debounceTime } from 'rxjs';
import { LayoutService } from 'src/app/layout/service/app.layout.service';
@Component({
templateUrl: './chartsdemo.component.html'
})
export class ChartsDemoComponent implements OnInit, OnDestroy {
lineData: any;
barData: any;
pieData: any;
polarData: any;
radarData: any;
lineOptions: any;
barOptions: any;
pieOptions: any;
polarOptions: any;
radarOptions: any;
subscription: Subscription;
constructor(private layoutService: LayoutService) {
this.subscription = this.layoutService.configUpdate$
.pipe(debounceTime(25))
.subscribe((config) => {
this.initCharts();
});
}
ngOnInit() {
this.initCharts();
}
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 = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: documentStyle.getPropertyValue('--primary-500'),
borderColor: documentStyle.getPropertyValue('--primary-500'),
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
backgroundColor: documentStyle.getPropertyValue('--primary-200'),
borderColor: documentStyle.getPropertyValue('--primary-200'),
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
this.barOptions = {
plugins: {
legend: {
labels: {
fontColor: 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 = {
labels: ['A', 'B', 'C'],
datasets: [
{
data: [540, 325, 702],
backgroundColor: [
documentStyle.getPropertyValue('--indigo-500'),
documentStyle.getPropertyValue('--purple-500'),
documentStyle.getPropertyValue('--teal-500')
],
hoverBackgroundColor: [
documentStyle.getPropertyValue('--indigo-400'),
documentStyle.getPropertyValue('--purple-400'),
documentStyle.getPropertyValue('--teal-400')
]
}]
};
this.pieOptions = {
plugins: {
legend: {
labels: {
usePointStyle: true,
color: textColor
}
}
}
};
this.lineData = {
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('--primary-500'),
borderColor: documentStyle.getPropertyValue('--primary-500'),
tension: .4
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
backgroundColor: documentStyle.getPropertyValue('--primary-200'),
borderColor: documentStyle.getPropertyValue('--primary-200'),
tension: .4
}
]
};
this.lineOptions = {
plugins: {
legend: {
labels: {
fontColor: textColor
}
}
},
scales: {
x: {
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder,
drawBorder: false
}
},
y: {
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder,
drawBorder: false
}
},
}
};
this.polarData = {
datasets: [{
data: [
11,
16,
7,
3
],
backgroundColor: [
documentStyle.getPropertyValue('--indigo-500'),
documentStyle.getPropertyValue('--purple-500'),
documentStyle.getPropertyValue('--teal-500'),
documentStyle.getPropertyValue('--orange-500')
],
label: 'My dataset'
}],
labels: [
'Indigo',
'Purple',
'Teal',
'Orange'
]
};
this.polarOptions = {
plugins: {
legend: {
labels: {
color: textColor
}
}
},
scales: {
r: {
grid: {
color: surfaceBorder
}
}
}
};
this.radarData = {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [
{
label: 'My First dataset',
borderColor: documentStyle.getPropertyValue('--indigo-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--indigo-400'),
pointBorderColor: documentStyle.getPropertyValue('--indigo-400'),
pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--indigo-400'),
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
borderColor: documentStyle.getPropertyValue('--purple-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--purple-400'),
pointBorderColor: documentStyle.getPropertyValue('--purple-400'),
pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--purple-400'),
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
this.radarOptions = {
plugins: {
legend: {
labels: {
fontColor: textColor
}
}
},
scales: {
r: {
grid: {
color: textColorSecondary
}
}
}
};
}
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
}

15
src/app/demo/components/uikit/charts/chartsdemo.module.ts
View File

@@ -1,15 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChartsDemoRoutingModule } from './chartsdemo-routing.module';
import { ChartModule } from 'primeng/chart'
import { ChartsDemoComponent } from './chartsdemo.component';
@NgModule({
imports: [
CommonModule,
ChartsDemoRoutingModule,
ChartModule
],
declarations: [ChartsDemoComponent]
})
export class ChartsDemoModule { }

11
src/app/demo/components/uikit/file/filedemo-routing.module.ts
View File

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

19
src/app/demo/components/uikit/file/filedemo.component.html
View File

@@ -1,19 +0,0 @@
<div class="grid">
<div class="col-12">
<div class="card">
<h5>Advanced</h5>
<p-fileUpload name="demo[]" url="./upload.php" (onUpload)="onUpload($event)"
[multiple]="true" accept="image/*" [maxFileSize]="1000000">
<ng-template pTemplate="content">
<ul *ngIf="uploadedFiles.length">
<li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
</ul>
</ng-template>
</p-fileUpload>
<h5>Basic</h5>
<p-fileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" [maxFileSize]="1000000" (onUpload)="onBasicUpload()"></p-fileUpload>
</div>
</div>
</div>

26
src/app/demo/components/uikit/file/filedemo.component.ts
View File

@@ -1,26 +0,0 @@
import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
@Component({
templateUrl: './filedemo.component.html',
providers: [MessageService]
})
export class FileDemoComponent {
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' });
}
}

18
src/app/demo/components/uikit/file/filedemo.module.ts
View File

@@ -1,18 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { FileUploadModule } from 'primeng/fileupload';
import { FileDemoRoutingModule } from './filedemo-routing.module';
import { FileDemoComponent } from './filedemo.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
FileDemoRoutingModule,
FileUploadModule
],
declarations: [FileDemoComponent],
})
export class FileDemoModule { }

11
src/app/demo/components/uikit/floatlabel/floatlabeldemo-routing.module.ts
View File

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

142
src/app/demo/components/uikit/floatlabel/floatlabeldemo.component.html
View File

@@ -1,142 +0,0 @@
<div class="card">
<h5>Float Label</h5>
<p>
All input text components support floating labels by adding
(<mark>.p-float-label</mark>) to wrapper class.
</p>
<div class="grid p-fluid mt-3">
<div class="field col-12 md:col-4">
<span class="p-float-label">
<input
type="text"
id="inputtext"
pInputText
[(ngModel)]="value1"
/>
<label for="inputtext">InputText</label>
</span>
</div>
<div class="field col-12 md:col-4">
<span class="p-float-label">
<p-autoComplete
inputId="autocomplete"
[(ngModel)]="value2"
[suggestions]="filteredCountries"
(completeMethod)="searchCountry($event)"
field="name"
></p-autoComplete>
<label for="autocomplete">AutoComplete</label>
</span>
</div>
<div class="field col-12 md:col-4">
<span class="p-float-label p-input-icon-left">
<i class="pi pi-search"></i>
<input
type="text"
id="lefticon"
pInputText
[(ngModel)]="value3"
/>
<label for="lefticon">Left Icon</label>
</span>
</div>
<div class="field col-12 md:col-4">
<span class="p-float-label p-input-icon-right">
<input
type="text"
id="righticon"
pInputText
[(ngModel)]="value4"
/>
<label for="righticon">Right Icon</label>
<i class="pi pi-spin pi-spinner"></i>
</span>
</div>
<div class="field col-12 md:col-4">
<span class="p-float-label">
<p-calendar
inputId="calendar"
[(ngModel)]="value5"
></p-calendar>
<label for="calendar">Calendar</label>
</span>
</div>
<div class="field col-12 md:col-4">
<span class="p-float-label">
<p-chips inputId="chips" [(ngModel)]="value6"></p-chips>
<label for="chips">Chips</label>
</span>
</div>
<div class="field col-12 md:col-4">
<span class="p-float-label">
<p-inputMask
inputId="inputmask"
mask="99/99/9999"
[(ngModel)]="value7"
></p-inputMask>
<label for="inputmask">InputMask</label>
</span>
</div>
<div class="field col-12 md:col-4">
<span class="p-float-label">
<p-inputNumber
inputId="inputnumber"
[(ngModel)]="value8"
></p-inputNumber>
<label for="inputnumber">InputNumber</label>
</span>
</div>
<div class="field col-12 md:col-4">
<p-inputGroup>
<p-inputGroupAddon>
<i class="pi pi-user"></i>
</p-inputGroupAddon>
<span class="p-float-label">
<input
type="text"
inputId="inputgroup"
pInputText
[(ngModel)]="value9"
/>
<label for="inputgroup">InputGroup</label>
</span>
</p-inputGroup>
</div>
<div class="field col-12 md:col-4">
<span class="p-float-label">
<p-dropdown
inputId="dropdown"
[autoDisplayFirst]="false"
[options]="cities"
[(ngModel)]="value10"
optionLabel="name"
></p-dropdown>
<label for="dropdown">Dropdown</label>
</span>
</div>
<div class="field col-12 md:col-4">
<span class="p-float-label">
<p-multiSelect
inputId="multiselect"
[options]="cities"
[(ngModel)]="value11"
optionLabel="name"
[filter]="false"
></p-multiSelect>
<label for="multiselect">MultiSelect</label>
</span>
</div>
<div class="field col-12 md:col-4">
<span class="p-float-label">
<textarea
inputId="textarea"
rows="3"
cols="30"
[(ngModel)]="value12"
pInputTextarea
></textarea>
<label for="textarea">Textarea</label>
</span>
</div>
</div>
</div>

70
src/app/demo/components/uikit/floatlabel/floatlabeldemo.component.ts
View File

@@ -1,70 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { CountryService } from 'src/app/demo/service/country.service';
@Component({
templateUrl: './floatlabeldemo.component.html',
})
export class FloatLabelDemoComponent implements OnInit {
countries: any[] = [];
cities: any[];
filteredCountries: any[] = [];
value1: any;
value2: any;
value3: any;
value4: any;
value5: any;
value6: any;
value7: any;
value8: any;
value9: any;
value10: any;
value11: any;
value12: any;
constructor(private countryService: CountryService) {
this.cities = [
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'}
];
}
ngOnInit() {
this.countryService.getCountries().then(countries => {
this.countries = countries;
});
}
searchCountry(event: any) {
// in a real application, make a request to a remote url with the query and
// 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) {
filtered.push(country);
}
}
this.filteredCountries = filtered;
}
}

38
src/app/demo/components/uikit/floatlabel/floatlabeldemo.module.ts
View File

@@ -1,38 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { FloatLabelDemoComponent } from './floatlabeldemo.component';
import { FloatlabelDemoRoutingModule } from './floatlabeldemo-routing.module';
import { AutoCompleteModule } from "primeng/autocomplete";
import { CalendarModule } from "primeng/calendar";
import { ChipsModule } from "primeng/chips";
import { DropdownModule } from "primeng/dropdown";
import { InputMaskModule } from "primeng/inputmask";
import { InputNumberModule } from "primeng/inputnumber";
import { CascadeSelectModule } from "primeng/cascadeselect";
import { MultiSelectModule } from "primeng/multiselect";
import { InputTextareaModule } from "primeng/inputtextarea";
import { InputTextModule } from "primeng/inputtext";
import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
import { InputGroupModule } from 'primeng/inputgroup';
@NgModule({
imports: [
CommonModule,
FormsModule,
FloatlabelDemoRoutingModule,
AutoCompleteModule,
CalendarModule,
ChipsModule,
DropdownModule,
InputMaskModule,
InputNumberModule,
CascadeSelectModule,
MultiSelectModule,
InputTextareaModule,
InputTextModule,
InputGroupModule,
InputGroupAddonModule
],
declarations: [FloatLabelDemoComponent]
})
export class FloatlabelDemoModule { }

11
src/app/demo/components/uikit/formlayout/formlayoutdemo-routing.module.ts
View File

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

107
src/app/demo/components/uikit/formlayout/formlayoutdemo.component.html
View File

@@ -1,107 +0,0 @@
<div class="grid">
<div class="col-12 md:col-6">
<div class="card p-fluid">
<h5>Vertical</h5>
<div class="field">
<label htmlFor="name1">Name</label>
<input pInputText id="name1" type="text" />
</div>
<div class="field">
<label htmlFor="email1">Email</label>
<input pInputText id="email1" type="text" />
</div>
<div class="field">
<label htmlFor="age1">Age</label>
<input pInputText id="age1" type="text" />
</div>
</div>
<div class="card p-fluid">
<h5>Vertical Grid</h5>
<div class="p-formgrid grid">
<div class="field col">
<label htmlFor="name2">Name</label>
<input pInputText id="name2" type="text" />
</div>
<div class="field col">
<label htmlFor="email2">Email</label>
<input pInputText id="email2" type="text" />
</div>
</div>
</div>
</div>
<div class="col-12 md:col-6">
<div class="card p-fluid">
<h5>Horizontal</h5>
<div class="field grid">
<label htmlFor="name3" class="col-12 mb-2 md:col-2 md:mb-0">Name</label>
<div class="col-12 md:col-10">
<input pInputText id="name3" type="text" />
</div>
</div>
<div class="field grid">
<label htmlFor="email3" class="col-12 mb-2 md:col-2 md:mb-0">Email</label>
<div class="col-12 md:col-10">
<input pInputText id="email3" type="text" />
</div>
</div>
</div>
<div class="card">
<h5>Inline</h5>
<div class="formgroup-inline">
<div class="field">
<label htmlFor="firstname1" class="p-sr-only">Firstname</label>
<input pInputText id="firstname1" type="text" placeholder="Firstname" />
</div>
<div class="field">
<label htmlFor="lastname1" class="p-sr-only">Lastname</label>
<input pInputText id="lastname1" type="text" placeholder="Lastname" />
</div>
<button pButton label="Submit"></button>
</div>
</div>
<div class="card">
<h5>Help Text</h5>
<div class="field p-fluid">
<label htmlFor="username">Username</label>
<input pInputText id="username" type="text" />
<small>Enter your username to reset your password.</small>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<h5>Advanced</h5>
<div class="p-fluid p-formgrid grid">
<div class="field col-12 md:col-6">
<label htmlFor="firstname2">Firstname</label>
<input pInputText id="firstname2" type="text" />
</div>
<div class="field col-12 md:col-6">
<label htmlFor="lastname2">Lastname</label>
<input pInputText id="lastname2" type="text" />
</div>
<div class="field col-12">
<label htmlFor="address">Address</label>
<input pInputTextarea id="address" rows="4" />
</div>
<div class="field col-12 md:col-6">
<label htmlFor="city">City</label>
<input pInputText id="city" type="text" />
</div>
<div class="field col-12 md:col-3">
<label htmlFor="state">State</label>
<p-dropdown [options]="dropdownItems" optionLabel="name" [(ngModel)]="selectedState"></p-dropdown>
</div>
<div class="field col-12 md:col-3">
<label htmlFor="zip">Zip</label>
<input pInputText id="zip" type="text" />
</div>
</div>
</div>
</div>
</div>

32
src/app/demo/components/uikit/formlayout/formlayoutdemo.component.ts
View File

@@ -1,32 +0,0 @@
import { Component } from '@angular/core';
@Component({
templateUrl: './formlayoutdemo.component.html'
})
export class FormLayoutDemoComponent {
selectedState: any = null;
states: any[] = [
{name: 'Arizona', code: 'Arizona'},
{name: 'California', value: 'California'},
{name: 'Florida', code: 'Florida'},
{name: 'Ohio', code: 'Ohio'},
{name: 'Washington', code: 'Washington'}
];
dropdownItems = [
{ name: 'Option 1', code: 'Option 1' },
{ name: 'Option 2', code: 'Option 2' },
{ name: 'Option 3', code: 'Option 3' }
];
cities1: any[] = [];
cities2: any[] = [];
city1: any = null;
city2: any = null;
}

35
src/app/demo/components/uikit/formlayout/formlayoutdemo.module.ts
View File

@@ -1,35 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { FormLayoutDemoComponent } from './formlayoutdemo.component';
import { FormLayoutDemoRoutingModule } from './formlayoutdemo-routing.module';
import { AutoCompleteModule } from "primeng/autocomplete";
import { CalendarModule } from "primeng/calendar";
import { ChipsModule } from "primeng/chips";
import { DropdownModule } from "primeng/dropdown";
import { InputMaskModule } from "primeng/inputmask";
import { InputNumberModule } from "primeng/inputnumber";
import { CascadeSelectModule } from "primeng/cascadeselect";
import { MultiSelectModule } from "primeng/multiselect";
import { InputTextareaModule } from "primeng/inputtextarea";
import { InputTextModule } from "primeng/inputtext";
@NgModule({
imports: [
CommonModule,
FormsModule,
FormLayoutDemoRoutingModule,
AutoCompleteModule,
CalendarModule,
ChipsModule,
DropdownModule,
InputMaskModule,
InputNumberModule,
CascadeSelectModule,
MultiSelectModule,
InputTextareaModule,
InputTextModule
],
declarations: [FormLayoutDemoComponent]
})
export class FormLayoutDemoModule { }

11
src/app/demo/components/uikit/input/inputdemo-routing.module.ts
View File

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

211
src/app/demo/components/uikit/input/inputdemo.component.html
View File

@@ -1,211 +0,0 @@
<div class="grid p-fluid">
<div class="col-12 md:col-6">
<div class="card">
<h5>InputText</h5>
<div class="grid formgrid">
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<input type="text" pInputText placeholder="Default">
</div>
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<input type="text" pInputText placeholder="Disabled" [disabled]="true"/>
</div>
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<input type="text" pInputText placeholder="Invalid" class="ng-dirty ng-invalid"/>
</div>
</div>
<h5>Icons</h5>
<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>
<input type="text" pInputText placeholder="Username"/>
</span>
</div>
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<span class="p-input-icon-right">
<input type="text" pInputText placeholder="Search"/>
<i class="pi pi-search"></i>
</span>
</div>
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<span class="p-input-icon-left p-input-icon-right">
<i class="pi pi-user"></i>
<input type="text" pInputText placeholder="Search"/>
<i class="pi pi-search"></i>
</span>
</div>
</div>
<h5>Float Label</h5>
<span class="p-float-label">
<input id="float-input" type="text" pInputText>
<label for="float-input">Username</label>
</span>
<h5>Textarea</h5>
<textarea rows="5" cols="30" placeholder="Your Message" pInputTextarea></textarea>
<h5>AutoComplete</h5>
<p-autoComplete [(ngModel)]="selectedCountryAdvanced" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name" [dropdown]="true">
</p-autoComplete>
<h5>Calendar</h5>
<p-calendar [showIcon]="true" inputId="icon"></p-calendar>
<h5>InputNumber</h5>
<p-inputNumber mode="decimal" [showButtons]="true" [min]="0" [max]="100">
</p-inputNumber>
<h5>Chips</h5>
<p-chips></p-chips>
</div>
<div class="card">
<div class="grid">
<div class="col-12">
<h5>Slider</h5>
<input type="text" pInputText [(ngModel)]="valSlider" readonly/>
<p-slider [(ngModel)]="valSlider"></p-slider>
</div>
<div class="col-12 md:col-6">
<h5>Rating</h5>
<p-rating></p-rating>
</div>
<div class="col-12 md:col-6">
<h5>ColorPicker</h5>
<p-colorPicker [(ngModel)]="valColor"></p-colorPicker>
</div>
<div class="col-12">
<h5>Knob</h5>
<p-knob [(ngModel)]="valueKnob" valueTemplate="{value}%" [step]="10" [min]="-50" [max]="50"></p-knob>
</div>
</div>
</div>
</div>
<div class="col-12 md:col-6">
<div class="card">
<h5>RadioButton</h5>
<div class="grid formgrid">
<div class="col-12 md:col-4">
<div class="field-radiobutton">
<p-radioButton name="city" value="Chicago" [(ngModel)]="valRadio" id="city1"></p-radioButton>
<label for="city1">Chicago</label>
</div>
</div>
<div class="col-12 md:col-4">
<div class="field-radiobutton">
<p-radioButton name="city" value="Los Angeles" [(ngModel)]="valRadio"
id="city2"></p-radioButton>
<label for="city2">Los Angeles</label>
</div>
</div>
<div class="col-12 md:col-4">
<div class="field-radiobutton">
<p-radioButton name="city" value="New York" [(ngModel)]="valRadio" id="city3"></p-radioButton>
<label for="city3">New York</label>
</div>
</div>
</div>
<h5>Checkbox</h5>
<div class="grid formgrid">
<div class="col-12 md:col-4">
<div class="field-checkbox">
<p-checkbox name="group1" value="New York" [(ngModel)]="valCheck" id="ny"></p-checkbox>
<label for="ny">New York</label>
</div>
</div>
<div class="col-12 md:col-4">
<div class="field-checkbox">
<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>
<h5>Input Switch</h5>
<p-inputSwitch [(ngModel)]="valSwitch"></p-inputSwitch>
</div>
<div class="card">
<h5>Listbox</h5>
<p-listbox [options]="cities" [(ngModel)]="selectedList" [filter]="true"></p-listbox>
<h5>Dropdown</h5>
<p-dropdown [options]="cities" [(ngModel)]="selectedDrop" placeholder="Select a City" [showClear]="true"></p-dropdown>
<h5>Multiselect</h5>
<p-multiSelect [options]="countries" [(ngModel)]="selectedMulti" placeholder="Select a Country" optionLabel="name" class="multiselect-custom" display="chip">
<ng-template let-country pTemplate="item">
<div class="flex align-items-center">
<img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" style="width:21px"/>
<span class="ml-2">{{country.name}}</span>
</div>
</ng-template>
</p-multiSelect>
</div>
<div class="card">
<h5>ToggleButton</h5>
<p-toggleButton [(ngModel)]="valToggle" onLabel="Yes" offLabel="No" [style]="{'width': '10em'}"></p-toggleButton>
<h5>SelectOneButton</h5>
<p-selectButton [options]="paymentOptions" [(ngModel)]="valSelect1" optionLabel="name"></p-selectButton>
<h5>SelectManyButton</h5>
<p-selectButton [options]="paymentOptions" [(ngModel)]="valSelect2" [multiple]="true" optionLabel="name"></p-selectButton>
</div>
</div>
<div class="col-12">
<div class="card">
<h5>InputGroup</h5>
<div class="grid">
<div class="col-12 md:col-6">
<p-inputGroup>
<p-inputGroupAddon>
<i class="pi pi-user"></i>
</p-inputGroupAddon>
<input pInputText type="text" placeholder="Username" />
</p-inputGroup>
</div>
<div class="col-12 md:col-6">
<p-inputGroup class="w-full">
<p-inputGroupAddon>
<i class="pi pi-tags" style="line-height: 1.25"></i>
</p-inputGroupAddon>
<p-inputGroupAddon>
<i class="pi pi-shopping-cart" style="line-height: 1.25"></i>
</p-inputGroupAddon>
<input type="text" pInputText placeholder="Price" />
<p-inputGroupAddon>$</p-inputGroupAddon>
<p-inputGroupAddon>.00</p-inputGroupAddon>
</p-inputGroup>
</div>
<div class="col-12 md:col-6">
<p-inputGroup>
<button type="button" pButton label="Search"></button>
<input type="text" pInputText placeholder="Keyword" />
</p-inputGroup>
</div>
<div class="col-12 md:col-6">
<p-inputGroup>
<p-inputGroupAddon><p-checkbox [(ngModel)]="valCheck2"
[binary]="true"></p-checkbox></p-inputGroupAddon>
<input type="text" pInputText placeholder="Username" />
</p-inputGroup>
</div>
</div>
</div>
</div>
</div>

80
src/app/demo/components/uikit/input/inputdemo.component.ts
View File

@@ -1,80 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { SelectItem } from 'primeng/api';
import { CountryService } from 'src/app/demo/service/country.service';
@Component({
templateUrl: './inputdemo.component.html'
})
export class InputDemoComponent implements OnInit {
countries: any[] = [];
filteredCountries: any[] = [];
selectedCountryAdvanced: any[] = [];
valSlider = 50;
valColor = '#424242';
valRadio: string = '';
valCheck: string[] = [];
valCheck2: boolean = false;
valSwitch: boolean = false;
cities: SelectItem[] = [];
selectedList: SelectItem = { value: '' };
selectedDrop: SelectItem = { value: '' };
selectedMulti: any[] = [];
valToggle = false;
paymentOptions: any[] = [];
valSelect1: string = "";
valSelect2: string = "";
valueKnob = 20;
constructor(private countryService: CountryService) { }
ngOnInit() {
this.countryService.getCountries().then(countries => {
this.countries = countries;
});
this.cities = [
{ label: 'New York', value: { id: 1, name: 'New York', code: 'NY' } },
{ label: 'Rome', value: { id: 2, name: 'Rome', code: 'RM' } },
{ label: 'London', value: { id: 3, name: 'London', code: 'LDN' } },
{ label: 'Istanbul', value: { id: 4, name: 'Istanbul', code: 'IST' } },
{ label: 'Paris', value: { id: 5, name: 'Paris', code: 'PRS' } }
];
this.paymentOptions = [
{ name: 'Option 1', value: 1 },
{ name: 'Option 2', value: 2 },
{ name: 'Option 3', value: 3 }
];
}
filterCountry(event: any) {
const filtered: any[] = [];
const query = event.query;
for (let i = 0; i < this.countries.length; i++) {
const country = this.countries[i];
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
filtered.push(country);
}
}
this.filteredCountries = filtered;
}
}

62
src/app/demo/components/uikit/input/inputdemo.module.ts
View File

@@ -1,62 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { InputDemoComponent } from './inputdemo.component';
import { InputDemoRoutingModule } from './inputdemo-routing.module';
import { AutoCompleteModule } from "primeng/autocomplete";
import { CalendarModule } from "primeng/calendar";
import { ChipsModule } from "primeng/chips";
import { ChipModule } from "primeng/chip";
import { DropdownModule } from "primeng/dropdown";
import { InputMaskModule } from "primeng/inputmask";
import { InputNumberModule } from "primeng/inputnumber";
import { CascadeSelectModule } from "primeng/cascadeselect";
import { MultiSelectModule } from "primeng/multiselect";
import { InputTextareaModule } from "primeng/inputtextarea";
import { InputTextModule } from "primeng/inputtext";
import { RatingModule } from 'primeng/rating';
import { KnobModule } from 'primeng/knob';
import { ListboxModule } from 'primeng/listbox';
import { SelectButtonModule } from 'primeng/selectbutton';
import { CheckboxModule } from 'primeng/checkbox';
import { ButtonModule } from 'primeng/button';
import { InputSwitchModule } from 'primeng/inputswitch';
import { RadioButtonModule } from 'primeng/radiobutton';
import { ColorPickerModule } from 'primeng/colorpicker';
import { ToggleButtonModule } from 'primeng/togglebutton';
import { SliderModule } from 'primeng/slider';
import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
import { InputGroupModule } from 'primeng/inputgroup';
@NgModule({
imports: [
CommonModule,
FormsModule,
InputDemoRoutingModule,
AutoCompleteModule,
CalendarModule,
ChipsModule,
DropdownModule,
InputMaskModule,
InputNumberModule,
ColorPickerModule,
CascadeSelectModule,
MultiSelectModule,
ToggleButtonModule,
SliderModule,
InputTextareaModule,
RadioButtonModule,
InputTextModule,
RatingModule,
ChipModule,
KnobModule,
InputSwitchModule,
ListboxModule,
SelectButtonModule,
CheckboxModule,
ButtonModule,
InputGroupModule,
InputGroupAddonModule
],
declarations: [InputDemoComponent]
})
export class InputDemoModule { }

11
src/app/demo/components/uikit/invalid/invalidstatedemo-routing.module.ts
View File

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

53
src/app/demo/components/uikit/invalid/invalidstatedemo.component.html
View File

@@ -1,53 +0,0 @@
<div class="card">
<h5>Invalid State</h5>
<p>All form components have an invalid state style to display the validation errors when ng-invalid ng-dirty combination is applied by Angular.</p>
<div class="grid p-fluid">
<div class="col-12 md:col-6">
<div class="field mt-3">
<label for="inputtext">InputText</label>
<input type="text" id="inputtext" pInputText class="ng-invalid ng-dirty">
</div>
<div class="field">
<label for="autocomplete">AutoComplete</label>
<p-autoComplete inputId="autocomplete" [(ngModel)]="value1" [suggestions]="filteredCountries" (completeMethod)="searchCountry($event)" field="name" class="ng-invalid ng-dirty"></p-autoComplete>
</div>
<div class="field">
<label for="calendar">Calendar</label>
<p-calendar inputId="calendar" [(ngModel)]="value2" class="ng-invalid ng-dirty" [showIcon]="true"></p-calendar>
</div>
<div class="field">
<label for="chips">Chips</label>
<p-chips inputId="chips" [(ngModel)]="value3" class="ng-invalid ng-dirty"></p-chips>
</div>
<div class="field">
<label for="password">Password</label>
<p-password [(ngModel)]="value8" class="ng-invalid ng-dirty"></p-password>
</div>
</div>
<div class="col-12 md:col-6">
<div class="field mt-3">
<label for="inputmask">InputMask</label>
<p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value5" class="ng-invalid ng-dirty"></p-inputMask>
</div>
<div class="field">
<label for="inputnumber">InputNumber</label>
<p-inputNumber inputId="inputnumber" [(ngModel)]="value6" class="ng-invalid ng-dirty"></p-inputNumber>
</div>
<div class="field">
<label for="dropdown">Dropdown</label>
<p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value9" optionLabel="name" class="ng-invalid ng-dirty"></p-dropdown>
</div>
<div class="field">
<label for="multiselect">MultiSelect</label>
<p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value10" optionLabel="name" [filter]="false" class="ng-invalid ng-dirty"></p-multiSelect>
</div>
<div class="field">
<label for="textarea">Textarea</label>
<textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value4" pInputTextarea class="ng-invalid ng-dirty"></textarea>
</div>
</div>
</div>
</div>

66
src/app/demo/components/uikit/invalid/invalidstatedemo.component.ts
View File

@@ -1,66 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { CountryService } from 'src/app/demo/service/country.service';
@Component({
templateUrl: './invalidstatedemo.component.html'
})
export class InvalidStateDemoComponent implements OnInit {
countries: any[] = [];
cities: any[];
filteredCountries: any[] = [];
value1: any;
value2: any;
value3: any;
value4: any;
value5: any;
value6: any;
value7: any;
value8: any;
value9: any;
value10: any;
constructor(private countryService: CountryService) {
this.cities = [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
];
}
ngOnInit() {
this.countryService.getCountries().then(countries => {
this.countries = countries;
});
}
searchCountry(event: any) {
// in a real application, make a request to a remote url with the query and return filtered results,
// for demo we filter at client side
const filtered: any[] = [];
const query = event.query;
for (let i = 0; i < this.countries.length; i++) {
const country = this.countries[i];
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
filtered.push(country);
}
}
this.filteredCountries = filtered;
}
}

37
src/app/demo/components/uikit/invalid/invalidstatedemo.module.ts
View File

@@ -1,37 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { InvalidStateDemoComponent } from './invalidstatedemo.component';
import { InvalidStateDemoRoutingModule } from './invalidstatedemo-routing.module';
import { AutoCompleteModule } from "primeng/autocomplete";
import { CalendarModule } from "primeng/calendar";
import { ChipsModule } from "primeng/chips";
import { DropdownModule } from "primeng/dropdown";
import { InputMaskModule } from "primeng/inputmask";
import { InputNumberModule } from "primeng/inputnumber";
import { CascadeSelectModule } from "primeng/cascadeselect";
import { MultiSelectModule } from "primeng/multiselect";
import { InputTextareaModule } from "primeng/inputtextarea";
import { InputTextModule } from "primeng/inputtext";
import { PasswordModule } from "primeng/password";
@NgModule({
imports: [
CommonModule,
FormsModule,
InvalidStateDemoRoutingModule,
AutoCompleteModule,
CalendarModule,
ChipsModule,
DropdownModule,
InputMaskModule,
InputNumberModule,
CascadeSelectModule,
MultiSelectModule,
PasswordModule,
InputTextareaModule,
InputTextModule
],
declarations: [InvalidStateDemoComponent]
})
export class InvalidStateDemoModule { }

11
src/app/demo/components/uikit/list/listdemo-routing.module.ts
View File

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

90
src/app/demo/components/uikit/list/listdemo.component.html
View File

@@ -1,90 +0,0 @@
<div class="grid">
<div class="col-12">
<div class="card">
<h5>DataView</h5>
<p-dataView #dv [value]="products" [paginator]="true" [rows]="9" filterBy="name" [sortField]="sortField" [sortOrder]="sortOrder" layout="grid">
<ng-template pTemplate="header">
<div class="flex flex-column md:flex-row md:justify-content-between gap-2">
<p-dropdown [options]="sortOptions" placeholder="Sort By Price" (onChange)="onSortChange($event)"></p-dropdown>
<span class="p-input-icon-left">
<i class="pi pi-search"></i>
<input type="search" pInputText placeholder="Search by Name" (input)="onFilter(dv, $event)">
</span>
<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
</div>
</ng-template>
<ng-template let-products pTemplate="listItem">
<div class="col-12" *ngFor="let product of products">
<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" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5"/>
<div class="flex-1 flex flex-column align-items-center text-center md:text-left">
<div class="font-bold text-2xl">{{product.name}}</div>
<div class="mb-2">{{product.description}}</div>
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false" styleClass="mb-2"></p-rating>
<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>
<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">
<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'" styleClass="mb-2 p-button-sm"></p-button>
<span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
</div>
</div>
</div>
</ng-template>
<ng-template let-products pTemplate="gridItem">
<div class="grid grid-nogutter">
<div class="col-12 md:col-4" *ngFor="let product of products">
<div class="card m-3 border-1 surface-border">
<div class="flex flex-wrap gap-2 align-items-center justify-content-between mb-2">
<div class="flex align-items-center">
<i class="pi pi-tag mr-2"></i>
<span class="font-semibold">{{product.category}}</span>
</div>
<span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
</div>
<div class="flex flex-column align-items-center text-center mb-3">
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" class="w-9 shadow-2 my-3 mx-0"/>
<div class="text-2xl font-bold">{{product.name}}</div>
<div class="mb-3">{{product.description}}</div>
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
</div>
<div class="flex align-items-center justify-content-between">
<span class="text-2xl font-semibold">${{product.price}}</span>
<p-button icon="pi pi-shopping-cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></p-button>
</div>
</div>
</div>
</div>
</ng-template>
</p-dataView>
</div>
</div>
<div class="col-12 xl:col-8">
<div class="card">
<h5>PickList</h5>
<p-pickList [source]="sourceCities" [target]="targetCities" sourceHeader="From" targetHeader="To" [dragdrop]="true"
[responsive]="true" [sourceStyle]="{'height':'250px'}" [targetStyle]="{'height':'250px'}">
<ng-template let-city pTemplate="item">
<div>{{city.name}}</div>
</ng-template>
</p-pickList>
</div>
</div>
<div class="col-12 xl:col-4">
<div class="card">
<h5>OrderList</h5>
<p-orderList [value]="orderCities" header="Cities" [dragdrop]="true" [listStyle]="{'height':'250px'}">
<ng-template let-city pTemplate="item">
<div>{{city.name}}</div>
</ng-template>
</p-orderList>
</div>
</div>
</div>

73
src/app/demo/components/uikit/list/listdemo.component.ts
View File

@@ -1,73 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { SelectItem } from 'primeng/api';
import { DataView } from 'primeng/dataview';
import { Product } from 'src/app/demo/api/product';
import { ProductService } from 'src/app/demo/service/product.service';
@Component({
templateUrl: './listdemo.component.html'
})
export class ListDemoComponent implements OnInit {
products: Product[] = [];
sortOptions: SelectItem[] = [];
sortOrder: number = 0;
sortField: string = '';
sourceCities: any[] = [];
targetCities: any[] = [];
orderCities: any[] = [];
constructor(private productService: ProductService) { }
ngOnInit() {
this.productService.getProducts().then(data => this.products = data);
this.sourceCities = [
{ name: 'San Francisco', code: 'SF' },
{ name: 'London', code: 'LDN' },
{ name: 'Paris', code: 'PRS' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Berlin', code: 'BRL' },
{ name: 'Barcelona', code: 'BRC' },
{ name: 'Rome', code: 'RM' }];
this.targetCities = [];
this.orderCities = [
{ name: 'San Francisco', code: 'SF' },
{ name: 'London', code: 'LDN' },
{ name: 'Paris', code: 'PRS' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Berlin', code: 'BRL' },
{ name: 'Barcelona', code: 'BRC' },
{ name: 'Rome', code: 'RM' }];
this.sortOptions = [
{ label: 'Price High to Low', value: '!price' },
{ label: 'Price Low to High', value: 'price' }
];
}
onSortChange(event: any) {
const value = event.value;
if (value.indexOf('!') === 0) {
this.sortOrder = -1;
this.sortField = value.substring(1, value.length);
} else {
this.sortOrder = 1;
this.sortField = value;
}
}
onFilter(dv: DataView, event: Event) {
dv.filter((event.target as HTMLInputElement).value);
}
}

29
src/app/demo/components/uikit/list/listdemo.module.ts
View File

@@ -1,29 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ListDemoComponent } from './listdemo.component';
import { ListDemoRoutingModule } from './listdemo-routing.module';
import { DataViewModule } from 'primeng/dataview';
import { PickListModule } from 'primeng/picklist';
import { OrderListModule } from 'primeng/orderlist';
import { InputTextModule } from 'primeng/inputtext';
import { DropdownModule } from 'primeng/dropdown';
import { RatingModule } from 'primeng/rating';
import { ButtonModule } from 'primeng/button';
@NgModule({
imports: [
CommonModule,
FormsModule,
ListDemoRoutingModule,
DataViewModule,
PickListModule,
OrderListModule,
InputTextModule,
DropdownModule,
RatingModule,
ButtonModule
],
declarations: [ListDemoComponent]
})
export class ListDemoModule { }

11
src/app/demo/components/uikit/media/mediademo-routing.module.ts
View File

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

52
src/app/demo/components/uikit/media/mediademo.component.html
View File

@@ -1,52 +0,0 @@
<div class="grid p-fluid">
<div class="col-12">
<div class="card">
<h5>Carousel</h5>
<p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="carouselResponsiveOptions">
<ng-template let-product pTemplate="item">
<div class="border-round m-2 text-center p-2" style="border: 1px solid var(--surface-d)">
<div class="my-5">
<img src="assets/demo/images/product/{{product.image}}" [alt]="product.name" class="shadow-4" width="50%"/>
</div>
<div>
<h5 class="mb-1">{{product.name}}</h5>
<h6 class="mt-0 mb-3">${{product.price}}</h6>
<span [class]="'product-badge status-'+product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
<div class="my-5">
<button pButton pRipple icon="pi pi-search" class="mr-2 p-button-rounded"></button>
<button pButton pRipple icon="pi pi-star-fill" class="mr-2 p-button-rounded p-button-success"></button>
<button pButton pRipple icon="pi pi-cog" class="p-button-rounded p-button-info"></button>
</div>
</div>
</div>
</ng-template>
</p-carousel>
</div>
</div>
<div class="col-12">
<div class="card">
<h5>Image</h5>
<div class="flex justify-content-center">
<p-image src="assets/demo/images/galleria/galleria10.jpg" alt="Image" width="250" [preview]="true"></p-image>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<h5>Galleria</h5>
<p-galleria [value]="images" [responsiveOptions]="galleriaResponsiveOptions"
[containerStyle]="{'max-width': '800px', 'margin':'auto'}" [numVisible]="6" [circular]="true">
<ng-template pTemplate="item" let-item>
<img [src]="item.itemImageSrc" style="width: 100%; display: block;"/>
</ng-template>
<ng-template pTemplate="thumbnail" let-item>
<div class="grid nogutter justify-center">
<img [src]="item.thumbnailImageSrc" style="display: block;"/>
</div>
</ng-template>
</p-galleria>
</div>
</div>
</div>

64
src/app/demo/components/uikit/media/mediademo.component.ts
View File

@@ -1,64 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { ProductService } from 'src/app/demo/service/product.service';
import { PhotoService } from 'src/app/demo/service/photo.service';
import { Product } from 'src/app/demo/api/product';
@Component({
templateUrl: './mediademo.component.html'
})
export class MediaDemoComponent implements OnInit {
products!: Product[];
images!: any[];
galleriaResponsiveOptions: any[] = [
{
breakpoint: '1024px',
numVisible: 5
},
{
breakpoint: '960px',
numVisible: 4
},
{
breakpoint: '768px',
numVisible: 3
},
{
breakpoint: '560px',
numVisible: 1
}
];
carouselResponsiveOptions: any[] = [
{
breakpoint: '1024px',
numVisible: 3,
numScroll: 3
},
{
breakpoint: '768px',
numVisible: 2,
numScroll: 2
},
{
breakpoint: '560px',
numVisible: 1,
numScroll: 1
}
];
constructor(private productService: ProductService, private photoService: PhotoService) { }
ngOnInit() {
this.productService.getProductsSmall().then(products => {
this.products = products;
});
this.photoService.getImages().then(images => {
this.images = images;
});
}
}

21
src/app/demo/components/uikit/media/mediademo.module.ts
View File

@@ -1,21 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MediaDemoComponent } from './mediademo.component';
import { MediaDemoRoutingModule } from './mediademo-routing.module';
import { ButtonModule } from 'primeng/button';
import { ImageModule } from 'primeng/image';
import { GalleriaModule } from 'primeng/galleria';
import { CarouselModule } from 'primeng/carousel';
@NgModule({
imports: [
CommonModule,
MediaDemoRoutingModule,
ButtonModule,
ImageModule,
GalleriaModule,
CarouselModule
],
declarations: [MediaDemoComponent]
})
export class MediaDemoModule { }

14
src/app/demo/components/uikit/menus/confirmation.component.ts
View File

@@ -1,14 +0,0 @@
import { Component } from '@angular/core';
@Component({
template: `
<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
<i class="pi pi-fw pi-check mr-2 text-2xl"></i>
<p class="m-0 mt-5 text-center text-lg">Confirmation Component Content via Child Route</p>
</div>
`
})
export class ConfirmationComponent {
constructor() { }
}

84
src/app/demo/components/uikit/menus/menus.component.html
View File

@@ -1,84 +0,0 @@
<div class="grid p-fluid">
<div class="col-12">
<div class="card card-w-title">
<h5>MenuBar</h5>
<p-menubar [model]="tieredItems">
<ng-template pTemplate="end">
<span class="p-input-icon-right">
<input type="text" pInputText placeholder="Search">
<i class="pi pi-search"></i>
</span>
</ng-template>
</p-menubar>
</div>
</div>
<div class="col-12">
<div class="card card-w-title">
<h5>Breadcrumb</h5>
<p-breadcrumb [model]="breadcrumbItems" [home]="{icon: 'pi pi-home'}"></p-breadcrumb>
</div>
</div>
<div class="col-12">
<div class="card card-w-title flex flex-wrap">
<div class="col-12 md:col-8 h-full">
<h5>TabMenu</h5>
<p-tabMenu styleClass="mb-5" [model]="routeItems"></p-tabMenu>
<h5>Steps</h5>
<p-steps [model]="routeItems" styleClass="mt-5" [readonly]="false"></p-steps>
</div>
<div class="col-12 md:col-4 mt-5 md:mt-0">
<router-outlet></router-outlet>
</div>
</div>
</div>
<div class="col-12 md:col-4">
<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 card-w-title">
<h5>Plain Menu</h5>
<p-menu [model]="plainMenuItems"></p-menu>
</div>
</div>
<div class="col-12 md:col-4">
<div class="card card-w-title">
<h5>Overlay Menu</h5>
<p-menu #menu [popup]="true" [model]="menuItems"></p-menu>
<button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)" style="width:auto"></button>
</div>
<div class="card card-w-title" #anchor>
<h5>ContextMenu</h5>
Right click to display.
<p-contextMenu [target]="anchor" [model]="menuItems"></p-contextMenu>
</div>
</div>
<div class="col-12 md:col-6">
<div class="card card-w-title">
<h5>MegaMenu - Horizontal</h5>
<p-megaMenu [model]="megaMenuItems"></p-megaMenu>
<h5>MegaMenu - Vertical</h5>
<p-megaMenu [model]="megaMenuItems" orientation="vertical" [style]="{'width':'200px'}"></p-megaMenu>
</div>
</div>
<div class="col-12 md:col-6">
<div class="card card-w-title">
<h5>PanelMenu</h5>
<p-panelMenu [model]="panelMenuItems"></p-panelMenu>
</div>
</div>
</div>

476
src/app/demo/components/uikit/menus/menus.component.ts
View File

@@ -1,476 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { MegaMenuItem, MenuItem } from 'primeng/api';
@Component({
templateUrl: './menus.component.html',
styles: [`
:host ::ng-deep .p-menubar-root-list {
flex-wrap: wrap;
}
`]
})
export class MenusComponent implements OnInit {
breadcrumbItems: MenuItem[] = [];
tieredItems: MenuItem[] = [];
items: MenuItem[] = [];
routeItems: MenuItem[] = [];
megaMenuItems: MegaMenuItem[] = [];
panelMenuItems: MenuItem[] = [];
stepsItems: MenuItem[] = [];
slideItems: MenuItem[] = [];
menuItems: MenuItem[] = [];
plainMenuItems: MenuItem[] = [];
pageIndex: number = 0;
ngOnInit() {
this.tieredItems = [
{
label: 'Customers',
icon: 'pi pi-fw pi-table',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{
label: 'Customer',
icon: 'pi pi-fw pi-plus'
},
{
label: 'Duplicate',
icon: 'pi pi-fw pi-copy'
},
]
},
{
label: 'Edit',
icon: 'pi pi-fw pi-user-edit'
}
]
},
{
label: 'Orders',
icon: 'pi pi-fw pi-shopping-cart',
items: [
{
label: 'View',
icon: 'pi pi-fw pi-list'
},
{
label: 'Search',
icon: 'pi pi-fw pi-search'
}
]
},
{
label: 'Shipments',
icon: 'pi pi-fw pi-envelope',
items: [
{
label: 'Tracker',
icon: 'pi pi-fw pi-compass',
},
{
label: 'Map',
icon: 'pi pi-fw pi-map-marker',
},
{
label: 'Manage',
icon: 'pi pi-fw pi-pencil'
}
]
},
{
label: 'Profile',
icon: 'pi pi-fw pi-user',
items: [
{
label: 'Settings',
icon: 'pi pi-fw pi-cog'
},
{
label: 'Billing',
icon: 'pi pi-fw pi-file'
}
]
},
{ separator: true },
{
label: 'Quit',
icon: 'pi pi-fw pi-sign-out'
}
];
this.items = [
{
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'
}
]
},
{
label: 'Shipments',
items: [
{
label: 'Tracker',
icon: 'pi pi-fw pi-compass',
},
{
label: 'Map',
icon: 'pi pi-fw pi-map-marker',
},
{
label: 'Manage',
icon: 'pi pi-fw pi-pencil'
}
]
}
];
this.menuItems = [
{
label: 'Save', icon: 'pi pi-fw pi-check'
},
{
label: 'Update', icon: 'pi pi-fw pi-refresh'
},
{
label: 'Delete', icon: 'pi pi-fw pi-trash'
},
{
separator: true
},
{
label: 'Home', icon: 'pi pi-fw pi-home'
},
];
this.slideItems = [
{
label: 'Customers',
icon: 'pi pi-fw pi-table',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus'
},
{
label: 'Edit',
icon: 'pi pi-fw pi-user-edit'
}
]
},
{
label: 'Orders',
icon: 'pi pi-fw pi-shopping-cart',
items: [
{
label: 'View',
icon: 'pi pi-fw pi-list'
},
{
label: 'Search',
icon: 'pi pi-fw pi-search'
}
]
},
{
label: 'Shipments',
icon: 'pi pi-fw pi-envelope',
items: [
{
label: 'Tracker',
icon: 'pi pi-fw pi-compass',
},
{
label: 'Map',
icon: 'pi pi-fw pi-map-marker',
},
{
label: 'Manage',
icon: 'pi pi-fw pi-pencil'
}
]
},
{
label: 'Profile',
icon: 'pi pi-fw pi-user',
items: [
{
label: 'Settings',
icon: 'pi pi-fw pi-cog'
},
{
label: 'Billing',
icon: 'pi pi-fw pi-file'
}
]
}
];
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' });
this.breadcrumbItems.push({ label: 'Notebook' });
this.breadcrumbItems.push({ label: 'Accessories' });
this.breadcrumbItems.push({ label: 'Backpacks' });
this.breadcrumbItems.push({ label: 'Item' });
this.routeItems = [
{ label: 'Personal', routerLink: 'personal' },
{ label: 'Seat', routerLink: 'seat' },
{ label: 'Payment', routerLink: 'payment' },
{ label: 'Confirmation', routerLink: 'confirmation' },
];
this.megaMenuItems = [
{
label: 'Fashion', icon: 'pi pi-fw pi-tag',
items: [
[
{
label: 'Women',
items: [{ label: 'Women Item' }, { label: 'Women Item' }, { label: 'Women Item' }]
},
{
label: 'Men',
items: [{ label: 'Men Item' }, { label: 'Men Item' }, { label: 'Men Item' }]
}
],
[
{
label: 'Kids',
items: [{ label: 'Kids Item' }, { label: 'Kids Item' }]
},
{
label: 'Luggage',
items: [{ label: 'Luggage Item' }, { label: 'Luggage Item' }, { label: 'Luggage Item' }]
}
]
]
},
{
label: 'Electronics', icon: 'pi pi-fw pi-desktop',
items: [
[
{
label: 'Computer',
items: [{ label: 'Computer Item' }, { label: 'Computer Item' }]
},
{
label: 'Camcorder',
items: [{ label: 'Camcorder Item' }, { label: 'Camcorder Item' }, { label: 'Camcorder Item' }]
}
],
[
{
label: 'TV',
items: [{ label: 'TV Item' }, { label: 'TV Item' }]
},
{
label: 'Audio',
items: [{ label: 'Audio Item' }, { label: 'Audio Item' }, { label: 'Audio Item' }]
}
],
[
{
label: 'Sports.7',
items: [{ label: 'Sports.7.1' }, { label: 'Sports.7.2' }]
}
]
]
},
{
label: 'Furniture', icon: 'pi pi-fw pi-image',
items: [
[
{
label: 'Living Room',
items: [{ label: 'Living Room Item' }, { label: 'Living Room Item' }]
},
{
label: 'Kitchen',
items: [{ label: 'Kitchen Item' }, { label: 'Kitchen Item' }, { label: 'Kitchen Item' }]
}
],
[
{
label: 'Bedroom',
items: [{ label: 'Bedroom Item' }, { label: 'Bedroom Item' }]
},
{
label: 'Outdoor',
items: [{ label: 'Outdoor Item' }, { label: 'Outdoor Item' }, { label: 'Outdoor Item' }]
}
]
]
},
{
label: 'Sports', icon: 'pi pi-fw pi-star',
items: [
[
{
label: 'Basketball',
items: [{ label: 'Basketball Item' }, { label: 'Basketball Item' }]
},
{
label: 'Football',
items: [{ label: 'Football Item' }, { label: 'Football Item' }, { label: 'Football Item' }]
}
],
[
{
label: 'Tennis',
items: [{ label: 'Tennis Item' }, { label: 'Tennis Item' }]
}
]
]
},
];
this.panelMenuItems = [
{
label: 'Customers',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{
label: 'Customer',
icon: 'pi pi-fw pi-plus'
},
{
label: 'Duplicate',
icon: 'pi pi-fw pi-copy'
},
]
},
{
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'
}
]
},
{
label: 'Shipments',
items: [
{
label: 'Tracker',
icon: 'pi pi-fw pi-compass',
},
{
label: 'Map',
icon: 'pi pi-fw pi-map-marker',
},
{
label: 'Manage',
icon: 'pi pi-fw pi-pencil'
}
]
},
{
label: 'Profile',
items: [
{
label: 'Settings',
icon: 'pi pi-fw pi-cog'
},
{
label: 'Billing',
icon: 'pi pi-fw pi-file'
}
]
}
];
}
}

49
src/app/demo/components/uikit/menus/menus.module.ts
View File

@@ -1,49 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { MenusComponent } from './menus.component';
import { PaymentComponent } from './payment.component';
import { SeatComponent } from './seat.component';
import { PersonalComponent } from './personal.component';
import { ConfirmationComponent } from './confirmation.component';
import { BreadcrumbModule } from 'primeng/breadcrumb';
import { MenubarModule } from 'primeng/menubar';
import { TabMenuModule } from 'primeng/tabmenu';
import { StepsModule } from 'primeng/steps';
import { TieredMenuModule } from 'primeng/tieredmenu';
import { MenuModule } from 'primeng/menu';
import { ButtonModule } from 'primeng/button';
import { ContextMenuModule } from 'primeng/contextmenu';
import { MegaMenuModule } from 'primeng/megamenu';
import { PanelMenuModule } from 'primeng/panelmenu';
import { InputTextModule } from 'primeng/inputtext';
@NgModule({
imports: [
CommonModule,
BreadcrumbModule,
MenubarModule,
TabMenuModule,
StepsModule,
TieredMenuModule,
MenuModule,
ButtonModule,
ContextMenuModule,
MegaMenuModule,
PanelMenuModule,
InputTextModule,
RouterModule.forChild([
{
path: '', component: MenusComponent, children: [
{ path: '', redirectTo: 'personal', pathMatch: 'full' },
{ path: 'personal', component: PersonalComponent },
{ path: 'confirmation', component: ConfirmationComponent },
{ path: 'seat', component: SeatComponent },
{ path: 'payment', component: PaymentComponent }
]
}
])
],
declarations: [MenusComponent],
exports: [RouterModule]
})
export class MenusModule { }

14
src/app/demo/components/uikit/menus/payment.component.ts
View File

@@ -1,14 +0,0 @@
import { Component } from '@angular/core';
@Component({
template: `
<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
<i class="pi pi-fw pi-money-bill mr-2 text-2xl"></i>
<p class="m-0 mt-5 text-center text-lg">Payment Component Content via Child Route</p>
</div>
`
})
export class PaymentComponent {
constructor() { }
}

14
src/app/demo/components/uikit/menus/personal.component.ts
View File

@@ -1,14 +0,0 @@
import { Component } from '@angular/core';
@Component({
template: `
<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
<i class="pi pi-fw pi-user mr-2 text-2xl"></i>
<p class="mt-5 text-center text-lg">Personal Component Content via Child Route</p>
</div>
`
})
export class PersonalComponent {
constructor() { }
}

14
src/app/demo/components/uikit/menus/seat.component.ts
View File

@@ -1,14 +0,0 @@
import { Component } from '@angular/core';
@Component({
template: `
<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
<i class="pi pi-fw pi-ticket mr-2 text-2xl"></i>
<p class="m-0 mt-5 text-center text-lg">Seat Component Content via Child Route</p>
</div>
`
})
export class SeatComponent {
constructor() { }
}

11
src/app/demo/components/uikit/messages/messagesdemo-routing.module.ts
View File

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

56
src/app/demo/components/uikit/messages/messagesdemo.component.html
View File

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

50
src/app/demo/components/uikit/messages/messagesdemo.component.ts
View File

@@ -1,50 +0,0 @@
import { Component } from '@angular/core';
import { Message, MessageService } from 'primeng/api';
@Component({
templateUrl: './messagesdemo.component.html',
providers: [MessageService]
})
export class MessagesDemoComponent {
msgs: Message[] = [];
constructor(private service: MessageService) { }
showInfoViaToast() {
this.service.add({ key: 'tst', severity: 'info', summary: 'Info Message', detail: 'PrimeNG rocks' });
}
showWarnViaToast() {
this.service.add({ key: 'tst', severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes' });
}
showErrorViaToast() {
this.service.add({ key: 'tst', severity: 'error', summary: 'Error Message', detail: 'Validation failed' });
}
showSuccessViaToast() {
this.service.add({ key: 'tst', severity: 'success', summary: 'Success Message', detail: 'Message sent' });
}
showInfoViaMessages() {
this.msgs = [];
this.msgs.push({ severity: 'info', summary: 'Info Message', detail: 'PrimeNG rocks' });
}
showWarnViaMessages() {
this.msgs = [];
this.msgs.push({ severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes' });
}
showErrorViaMessages() {
this.msgs = [];
this.msgs.push({ severity: 'error', summary: 'Error Message', detail: 'Validation failed' });
}
showSuccessViaMessages() {
this.msgs = [];
this.msgs.push({ severity: 'success', summary: 'Success Message', detail: 'Message sent' });
}
}

Some files were not shown because too many files have changed in this diff Show More