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

pf2tw

Browse Source
This commit is contained in:
Çetin
2025-01-03 15:48:50 +03:00
parent 64b1aea5d9
commit 8b2ff9c1b2
41 changed files with 2900 additions and 1575 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1397
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

26
package.json
View File

@@ -18,32 +18,34 @@
"@angular/platform-browser": "^19.0.0", "@angular/platform-browser": "^19.0.0",
"@angular/platform-browser-dynamic": "^19.0.0", "@angular/platform-browser-dynamic": "^19.0.0",
"@angular/router": "^19.0.0", "@angular/router": "^19.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.15.0",
"primeng": "^19.0.2",
"@primeng/themes": "^19.0.2", "@primeng/themes": "^19.0.2",
"chart.js": "4.4.2",
"primeclt": "^0.1.5",
"primeng": "^19.0.2",
"rxjs": "~7.8.0",
"tailwindcss": "^3.4.6", "tailwindcss": "^3.4.6",
"tailwindcss-primeui": "^0.3.2", "tailwindcss-primeui": "^0.3.2",
"chart.js": "4.4.2" "tslib": "^2.3.0",
"zone.js": "~0.15.0",
"primeicons": "^7.0.0"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "^19.0.6", "@angular-devkit/build-angular": "^19.0.6",
"@angular/cli": "^19.0.6", "@angular/cli": "^19.0.6",
"@angular/compiler-cli": "^19.0.0", "@angular/compiler-cli": "^19.0.0",
"@types/jasmine": "~5.1.0", "@types/jasmine": "~5.1.0",
"eslint": "^9.14.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-prefer-arrow": "^1.2.3",
"eslint-plugin-prettier": "^4.2.1",
"jasmine-core": "~5.4.0", "jasmine-core": "~5.4.0",
"karma": "~6.4.0", "karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0", "karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0", "karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0", "karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0", "karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.6.2", "prettier": "^3.0.0",
"eslint-config-prettier": "^9.1.0", "typescript": "~5.6.2"
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-prefer-arrow": "^1.2.3",
"eslint-plugin-prettier": "^4.2.1",
"prettier": "^3.0.0",
"eslint": "^9.14.0"
} }
} }

2
src/assets/demo/demo.scss
View File

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

0
src/assets/demo/flags/flags.css → src/assets/demo/flags/flags.scss
View File

4
src/assets/styles.scss
View File

@@ -1,5 +1,5 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
@use '@/assets/layout/layout.scss'; @use './assets/layout/layout';
@use 'primeicons/primeicons.css'; @use 'primeicons/primeicons.css';
@use '@/assets/demo/demo.scss'; @use './assets/demo/demo';

68
src/components/dashboard/notificationswidget.ts
View File

@@ -10,47 +10,67 @@ import { MenuModule } from 'primeng/menu';
MenuModule, MenuModule,
], ],
template: `<div class="card"> template: `<div class="card">
<div class="flex align-items-center justify-content-between mb-4"> <div class="flex items-center justify-between mb-6">
<h5>Notifications</h5> <div class="font-semibold text-xl">Notifications</div>
<div> <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> <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> <p-menu #menu [popup]="true" [model]="items"></p-menu>
</div> </div>
</div> </div>
<span class="block text-600 font-medium mb-3">TODAY</span> <span class="block text-muted-color font-medium mb-4">TODAY</span>
<ul class="p-0 mx-0 mt-0 mb-4 list-none"> <ul class="p-0 mx-0 mt-0 mb-6 list-none">
<li class="flex align-items-center py-2 border-bottom-1 surface-border"> <li class="flex items-center py-2 border-b border-surface">
<div class="w-3rem h-3rem flex align-items-center justify-content-center bg-blue-100 border-circle mr-3 flex-shrink-0"> <div class="w-12 h-12 flex items-center justify-center bg-blue-100 dark:bg-blue-400/10 rounded-full mr-4 shrink-0">
<i class="pi pi-dollar text-xl text-blue-500"></i> <i class="pi pi-dollar !text-xl text-blue-500"></i>
</div> </div>
<span class="text-900 line-height-3">Richard Jones <span class="text-surface-900 dark:text-surface-0 leading-normal"
<span class="text-700"> has purchased a blue t-shirt for <span class="text-blue-500">79$</span></span> >Richard Jones
<span class="text-surface-700 dark:text-surface-100">has purchased a blue t-shirt for <span class="text-primary font-bold">$79.00</span></span>
</span> </span>
</li> </li>
<li class="flex align-items-center py-2"> <li class="flex 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"> <div class="w-12 h-12 flex items-center justify-center bg-orange-100 dark:bg-orange-400/10 rounded-full mr-4 shrink-0">
<i class="pi pi-download text-xl text-orange-500"></i> <i class="pi pi-download !text-xl text-orange-500"></i>
</div> </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> <span class="text-surface-700 dark:text-surface-100 leading-normal">Your request for withdrawal of <span class="text-primary font-bold">$2500.00</span> has been initiated.</span>
</li> </li>
</ul> </ul>
<span class="block text-600 font-medium mb-3">YESTERDAY</span> <span class="block text-muted-color font-medium mb-4">YESTERDAY</span>
<ul class="p-0 m-0 list-none"> <ul class="p-0 m-0 list-none mb-6">
<li class="flex align-items-center py-2 border-bottom-1 surface-border"> <li class="flex items-center py-2 border-b border-surface">
<div class="w-3rem h-3rem flex align-items-center justify-content-center bg-blue-100 border-circle mr-3 flex-shrink-0"> <div class="w-12 h-12 flex items-center justify-center bg-blue-100 dark:bg-blue-400/10 rounded-full mr-4 shrink-0">
<i class="pi pi-dollar text-xl text-blue-500"></i> <i class="pi pi-dollar !text-xl text-blue-500"></i>
</div> </div>
<span class="text-900 line-height-3">Keyser Wick <span class="text-surface-900 dark:text-surface-0 leading-normal"
<span class="text-700"> has purchased a black jacket for <span class="text-blue-500">59$</span></span> >Keyser Wick
<span class="text-surface-700 dark:text-surface-100">has purchased a black jacket for <span class="text-primary font-bold">$59.00</span></span>
</span> </span>
</li> </li>
<li class="flex align-items-center py-2 border-bottom-1 surface-border"> <li class="flex items-center py-2 border-b border-surface">
<div class="w-3rem h-3rem flex align-items-center justify-content-center bg-pink-100 border-circle mr-3 flex-shrink-0"> <div class="w-12 h-12 flex items-center justify-center bg-pink-100 dark:bg-pink-400/10 rounded-full mr-4 shrink-0">
<i class="pi pi-question text-xl text-pink-500"></i> <i class="pi pi-question !text-xl text-pink-500"></i>
</div> </div>
<span class="text-900 line-height-3">Jane Davis<span class="text-700"> has posted a new questions about your product.</span></span> <span class="text-surface-900 dark:text-surface-0 leading-normal"
>Jane Davis
<span class="text-surface-700 dark:text-surface-100">has posted a new questions about your product.</span>
</span>
</li>
</ul>
<span class="block text-muted-color font-medium mb-4">LAST WEEK</span>
<ul class="p-0 m-0 list-none">
<li class="flex items-center py-2 border-b border-surface">
<div class="w-12 h-12 flex items-center justify-center bg-green-100 dark:bg-green-400/10 rounded-full mr-4 shrink-0">
<i class="pi pi-arrow-up !text-xl text-green-500"></i>
</div>
<span class="text-surface-900 dark:text-surface-0 leading-normal">Your revenue has increased by <span class="text-primary font-bold">%25</span>.</span>
</li>
<li class="flex items-center py-2 border-b border-surface">
<div class="w-12 h-12 flex items-center justify-center bg-purple-100 dark:bg-purple-400/10 rounded-full mr-4 shrink-0">
<i class="pi pi-heart !text-xl text-purple-500"></i>
</div>
<span class="text-surface-900 dark:text-surface-0 leading-normal"><span class="text-primary font-bold">12</span> users have added your products to their wishlist.</span>
</li> </li>
</ul> </ul>
</div>`, </div>`,

4
src/components/dashboard/recentsaleswidget.ts
View File

@@ -16,7 +16,7 @@ import { Product, ProductService } from '@/src/service/product.service';
RippleModule, RippleModule,
], ],
template: `<div class="card"> template: `<div class="card">
<h5>Recent Sales</h5> <div class="font-semibold text-xl mb-4">Recent Sales</div>
<p-table [value]="products" [paginator]="true" [rows]="5" responsiveLayout="scroll"> <p-table [value]="products" [paginator]="true" [rows]="5" responsiveLayout="scroll">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
@@ -29,7 +29,7 @@ import { Product, ProductService } from '@/src/service/product.service';
<ng-template pTemplate="body" let-product> <ng-template pTemplate="body" let-product>
<tr> <tr>
<td style="width: 15%; min-width: 5rem;"> <td style="width: 15%; min-width: 5rem;">
<img src="assets/demo/images/product/{{product.image}}" class="shadow-4" alt="{{product.name}}" width="50"> <img src="assets/demo/images/product/{{product.image}}" class="shadow-lg" alt="{{product.name}}" width="50">
</td> </td>
<td style="width: 35%; min-width: 7rem;">{{product.name}}</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: 35%; min-width: 8rem;">{{product.price | currency:'USD'}}</td>

64
src/components/dashboard/statswidget.ts
View File

@@ -5,64 +5,64 @@ import { CommonModule } from '@angular/common';
standalone:true, standalone:true,
selector: 'app-stats-widget', selector: 'app-stats-widget',
imports: [CommonModule], imports: [CommonModule],
template: `<div class="col-12 lg:col-6 xl:col-3"> template: `<div class="col-span-12 lg:col-span-6 xl:col-span-3">
<div class="card mb-0"> <div class="card mb-0">
<div class="flex justify-content-between mb-3"> <div class="flex justify-between mb-4">
<div> <div>
<span class="block text-500 font-medium mb-3">Orders</span> <span class="block text-muted-color font-medium mb-4">Orders</span>
<div class="text-900 font-medium text-xl">152</div> <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
</div> </div>
<div class="flex align-items-center justify-content-center bg-blue-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}"> <div class="flex items-center justify-center bg-blue-100 dark:bg-blue-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i> <i class="pi pi-shopping-cart text-blue-500 !text-xl"></i>
</div> </div>
</div> </div>
<span class="text-green-500 font-medium">24 new </span> <span class="text-primary font-medium">24 new </span>
<span class="text-500">since last visit</span> <span class="text-muted-color">since last visit</span>
</div> </div>
</div> </div>
<div class="col-12 lg:col-6 xl:col-3"> <div class="col-span-12 lg:col-span-6 xl:col-span-3">
<div class="card mb-0"> <div class="card mb-0">
<div class="flex justify-content-between mb-3"> <div class="flex justify-between mb-4">
<div> <div>
<span class="block text-500 font-medium mb-3">Revenue</span> <span class="block text-muted-color font-medium mb-4">Revenue</span>
<div class="text-900 font-medium text-xl">$2.100</div> <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
</div> </div>
<div class="flex align-items-center justify-content-center bg-orange-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}"> <div class="flex items-center justify-center bg-orange-100 dark:bg-orange-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-map-marker text-orange-500 text-xl"></i> <i class="pi pi-dollar text-orange-500 !text-xl"></i>
</div> </div>
</div> </div>
<span class="text-green-500 font-medium">%52+ </span> <span class="text-primary font-medium">%52+ </span>
<span class="text-500">since last week</span> <span class="text-muted-color">since last week</span>
</div> </div>
</div> </div>
<div class="col-12 lg:col-6 xl:col-3"> <div class="col-span-12 lg:col-span-6 xl:col-span-3">
<div class="card mb-0"> <div class="card mb-0">
<div class="flex justify-content-between mb-3"> <div class="flex justify-between mb-4">
<div> <div>
<span class="block text-500 font-medium mb-3">Customers</span> <span class="block text-muted-color font-medium mb-4">Customers</span>
<div class="text-900 font-medium text-xl">28441</div> <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
</div> </div>
<div class="flex align-items-center justify-content-center bg-cyan-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}"> <div class="flex items-center justify-center bg-cyan-100 dark:bg-cyan-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-inbox text-cyan-500 text-xl"></i> <i class="pi pi-users text-cyan-500 !text-xl"></i>
</div> </div>
</div> </div>
<span class="text-green-500 font-medium">520 </span> <span class="text-primary font-medium">520 </span>
<span class="text-500">newly registered</span> <span class="text-muted-color">newly registered</span>
</div> </div>
</div> </div>
<div class="col-12 lg:col-6 xl:col-3"> <div class="col-span-12 lg:col-span-6 xl:col-span-3">
<div class="card mb-0"> <div class="card mb-0">
<div class="flex justify-content-between mb-3"> <div class="flex justify-between mb-4">
<div> <div>
<span class="block text-500 font-medium mb-3">Comments</span> <span class="block text-muted-color font-medium mb-4">Comments</span>
<div class="text-900 font-medium text-xl">152 Unread</div> <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
</div> </div>
<div class="flex align-items-center justify-content-center bg-purple-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}"> <div class="flex items-center justify-center bg-purple-100 dark:bg-purple-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-comment text-purple-500 text-xl"></i> <i class="pi pi-comment text-purple-500 !text-xl"></i>
</div> </div>
</div> </div>
<span class="text-green-500 font-medium">85 </span> <span class="text-primary font-medium">85 </span>
<span class="text-500">responded</span> <span class="text-muted-color">responded</span>
</div> </div>
</div>`, </div>`,
}) })

2
src/components/floatingconfigurator.ts
View File

@@ -8,7 +8,7 @@ import { LayoutService } from '@/src/service/layout.service';
selector: 'floating-configurator', selector: 'floating-configurator',
imports: [ButtonModule, StyleClassModule, AppConfigurator], imports: [ButtonModule, StyleClassModule, AppConfigurator],
template: ` template: `
<div class="fixed flex gap-4 top-8 right-8"> <div class="fixed flex gap-6 top-8 right-8">
<p-button type="button" (onClick)="toggleDarkMode()" [rounded]="true" [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'" severity="secondary" /> <p-button type="button" (onClick)="toggleDarkMode()" [rounded]="true" [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'" severity="secondary" />
<div class="relative"> <div class="relative">
<p-button <p-button

2
src/components/landing/featureswidget.ts
View File

@@ -7,7 +7,7 @@ import { CommonModule } from '@angular/common';
imports: [ imports: [
CommonModule, CommonModule,
], ],
template: `<div id="features" class="py-6 px-6 lg:px-20 mt-8 mx-0 lg:mx-20"> template: ` <div id="features" class="py-6 px-6 lg:px-20 mt-8 mx-0 lg:mx-20">
<div class="grid grid-cols-12 gap-4 justify-center"> <div class="grid grid-cols-12 gap-4 justify-center">
<div class="col-span-12 text-center mt-20 mb-6"> <div class="col-span-12 text-center mt-20 mb-6">
<div class="text-surface-900 dark:text-surface-0 font-normal mb-2 text-4xl">Marvelous Features</div> <div class="text-surface-900 dark:text-surface-0 font-normal mb-2 text-4xl">Marvelous Features</div>

12
src/components/landing/footerwidget.ts
View File

@@ -5,10 +5,10 @@ import { Router, RouterModule } from '@angular/router';
selector: 'footer-widget', selector: 'footer-widget',
imports: [RouterModule], imports: [RouterModule],
template: ` template: `
<div class="py-6 px-6 mx-0 mt-20 lg:mx-20"> <div class="py-12 px-12 mx-0 mt-20 lg:mx-20">
<div class="grid grid-cols-12 gap-4"> <div class="grid grid-cols-12 gap-4">
<div class="col-span-12 md:col-span-2"> <div class="col-span-12 md:col-span-2">
<a (click)="router.navigate(['/pages/landing'], {fragment: 'home'})" class="flex flex-wrap items-center justify-center md:justify-start md:mb-0 mb-4 cursor-pointer"> <a (click)="router.navigate(['/pages/landing'], {fragment: 'home'})" class="flex flex-wrap items-center justify-center md:justify-start md:mb-0 mb-6 cursor-pointer">
<svg viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-14 mr-2"> <svg viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-14 mr-2">
<path <path
fill-rule="evenodd" fill-rule="evenodd"
@@ -33,7 +33,7 @@ import { Router, RouterModule } from '@angular/router';
<div class="col-span-12 md:col-span-10"> <div class="col-span-12 md:col-span-10">
<div class="grid grid-cols-12 gap-8 text-center md:text-left"> <div class="grid grid-cols-12 gap-8 text-center md:text-left">
<div class="col-span-12 md:col-span-3"> <div class="col-span-12 md:col-span-3">
<h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Company</h4> <h4 class="font-medium text-2xl leading-normal mb-6 text-surface-900 dark:text-surface-0">Company</h4>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">About Us</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">About Us</a>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">News</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">News</a>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Investor Relations</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Investor Relations</a>
@@ -42,14 +42,14 @@ import { Router, RouterModule } from '@angular/router';
</div> </div>
<div class="col-span-12 md:col-span-3"> <div class="col-span-12 md:col-span-3">
<h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Resources</h4> <h4 class="font-medium text-2xl leading-normal mb-6 text-surface-900 dark:text-surface-0">Resources</h4>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Get Started</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Get Started</a>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Learn</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Learn</a>
<a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Case Studies</a> <a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Case Studies</a>
</div> </div>
<div class="col-span-12 md:col-span-3"> <div class="col-span-12 md:col-span-3">
<h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Community</h4> <h4 class="font-medium text-2xl leading-normal mb-6 text-surface-900 dark:text-surface-0">Community</h4>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Discord</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Discord</a>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Events<img src="/demo/images/landing/new-badge.svg" alt="badge" class="ml-2" /></a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Events<img src="/demo/images/landing/new-badge.svg" alt="badge" class="ml-2" /></a>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">FAQ</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">FAQ</a>
@@ -57,7 +57,7 @@ import { Router, RouterModule } from '@angular/router';
</div> </div>
<div class="col-span-12 md:col-span-3"> <div class="col-span-12 md:col-span-3">
<h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Legal</h4> <h4 class="font-medium text-2xl leading-normal mb-6 text-surface-900 dark:text-surface-0">Legal</h4>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Brand Policy</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Brand Policy</a>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Privacy Policy</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Privacy Policy</a>
<a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Terms of Service</a> <a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Terms of Service</a>

19
src/components/landing/herowidget.ts
View File

@@ -6,15 +6,18 @@ import { ButtonModule } from 'primeng/button';
selector: 'hero-widget', selector: 'hero-widget',
imports: [ButtonModule, RippleModule], imports: [ButtonModule, RippleModule],
template: ` template: `
<div id="hero" class="flex flex-column pt-4 px-4 lg:px-8 overflow-hidden" <div
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%);"> id="hero"
<div class="mx-4 md:mx-8 mt-0 md:mt-4"> class="flex flex-col pt-6 px-6 lg:px-20 overflow-hidden"
<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> 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%, rgb(238, 239, 175) 0%, rgb(195, 227, 250) 100%); clip-path: ellipse(150% 87% at 93% 13%)"
<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 class="mx-6 md:mx-20 mt-0 md:mt-6">
<h1 class="text-6xl font-bold text-gray-900 leading-tight"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
<p class="font-normal text-2xl leading-normal md:mt-4 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-0 mt-4 bg-blue-500 font-normal leading-normal px-4 text-white"></button>
</div> </div>
<div class="flex justify-content-center md:justify-content-end"> <div class="flex justify-center md:justify-end">
<img src="assets/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9 md:w-auto"> <img src="/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9/12 md:w-auto" />
</div> </div>
</div> </div>
`, `,

94
src/components/landing/pricingwidget.ts
View File

@@ -7,101 +7,107 @@ import { RippleModule } from 'primeng/ripple';
selector: 'pricing-widget', selector: 'pricing-widget',
imports: [DividerModule, ButtonModule, RippleModule], imports: [DividerModule, ButtonModule, RippleModule],
template: ` template: `
<div id="pricing" class="py-4 px-4 lg:px-8 my-2 md:my-4"> <div id="pricing" class="py-6 px-6 lg:px-20 my-2 md:my-6">
<div class="text-center"> <div class="text-center mb-6">
<h2 class="text-900 font-normal mb-2">Matchless Pricing</h2> <div class="text-surface-900 dark:text-surface-0 font-normal mb-2 text-4xl">Matchless Pricing</div>
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span> <span class="text-muted-color text-2xl">Amet consectetur adipiscing elit...</span>
</div> </div>
<div class="grid justify-content-between mt-8 md:mt-0"> <div class="grid grid-cols-12 gap-4 justify-between mt-20 md:mt-0">
<div class="col-12 lg:col-4 p-0 md:p-3"> <div class="col-span-12 lg:col-span-4 p-0 md:p-4">
<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"> <div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all" style="border-radius: 10px">
<h3 class="text-900 text-center my-5">Free</h3> <div class="text-surface-900 dark:text-surface-0 text-center my-8 text-3xl">Free</div>
<img src="assets/demo/images/landing/free.svg" class="w-10 h-10 mx-auto" alt="free"> <img src="/demo/images/landing/free.svg" class="w-10/12 mx-auto" alt="free" />
<div class="my-5 text-center"> <div class="my-8 flex flex-col items-center gap-4">
<span class="text-5xl font-bold mr-2 text-900">$0</span> <div class="flex items-center">
<span class="text-600">per month</span> <span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$0</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> <span class="text-surface-600 dark:text-surface-200">per month</span>
</div>
<button pButton pRipple label="Get Started" class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></button>
</div> </div>
<p-divider class="w-full bg-surface-200"></p-divider> <p-divider class="w-full bg-surface-200"></p-divider>
<ul class="my-5 list-none p-0 flex text-900 flex-column"> <ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col px-8">
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <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> <span class="text-xl leading-normal">Responsive Layout</span>
</li> </li>
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <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> <span class="text-xl leading-normal">Unlimited Push Messages</span>
</li> </li>
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <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> <span class="text-xl leading-normal">50 Support Ticket</span>
</li> </li>
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <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> <span class="text-xl leading-normal">Free Shipping</span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0"> <div class="col-span-12 lg:col-span-4 p-0 md:p-4 mt-6 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"> <div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all" style="border-radius: 10px">
<h3 class="text-900 text-center my-5">Startup</h3> <div class="text-surface-900 dark:text-surface-0 text-center my-8 text-3xl">Startup</div>
<img src="assets/demo/images/landing/startup.svg" class="w-10 h-10 mx-auto" alt="startup"> <img src="/demo/images/landing/startup.svg" class="w-10/12 mx-auto" alt="startup" />
<div class="my-5 text-center"> <div class="my-8 flex flex-col items-center gap-4">
<span class="text-5xl font-bold mr-2 text-900">$1</span> <div class="flex items-center">
<span class="text-600">per month</span> <span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$1</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> <span class="text-surface-600 dark:text-surface-200">per month</span>
</div>
<button pButton pRipple label="Get Started" class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></button>
</div> </div>
<p-divider class="w-full bg-surface-200"></p-divider> <p-divider class="w-full bg-surface-200"></p-divider>
<ul class="my-5 list-none p-0 flex text-900 flex-column"> <ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col px-8">
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <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> <span class="text-xl leading-normal">Responsive Layout</span>
</li> </li>
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <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> <span class="text-xl leading-normal">Unlimited Push Messages</span>
</li> </li>
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <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> <span class="text-xl leading-normal">50 Support Ticket</span>
</li> </li>
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <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> <span class="text-xl leading-normal">Free Shipping</span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0"> <div class="col-span-12 lg:col-span-4 p-0 md:p-4 mt-6 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"> <div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all" style="border-radius: 10px">
<h3 class="text-900 text-center my-5">Enterprise</h3> <div class="text-surface-900 dark:text-surface-0 text-center my-8 text-3xl">Enterprise</div>
<img src="assets/demo/images/landing/enterprise.svg" class="w-10 h-10 mx-auto" alt="enterprise"> <img src="/demo/images/landing/enterprise.svg" class="w-10/12 mx-auto" alt="enterprise" />
<div class="my-5 text-center"> <div class="my-8 flex flex-col items-center gap-4">
<span class="text-5xl font-bold mr-2 text-900">$999</span> <div class="flex items-center">
<span class="text-600">per month</span> <span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$5</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> <span class="text-surface-600 dark:text-surface-200">per month</span>
</div>
<button pButton pRipple label="Try Free" class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></button>
</div> </div>
<p-divider class="w-full bg-surface-200"></p-divider> <p-divider class="w-full bg-surface-200"></p-divider>
<ul class="my-5 list-none p-0 flex text-900 flex-column"> <ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col px-8">
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <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> <span class="text-xl leading-normal">Responsive Layout</span>
</li> </li>
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <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> <span class="text-xl leading-normal">Unlimited Push Messages</span>
</li> </li>
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <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> <span class="text-xl leading-normal">50 Support Ticket</span>
</li> </li>
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <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> <span class="text-xl leading-normal">Free Shipping</span>
</li> </li>
</ul> </ul>
</div> </div>

54
src/components/landing/topbarwidget.component.ts
View File

@@ -8,48 +8,64 @@ import { LayoutService } from '@/src/service/layout.service';
@Component({ @Component({
selector: 'topbar-widget', selector: 'topbar-widget',
imports: [RouterModule, StyleClassModule, ButtonModule, RippleModule], imports: [RouterModule, StyleClassModule, ButtonModule, RippleModule],
template: ` template: `<a class="flex items-center" href="#">
<div id="home" 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"> <svg viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-12 mr-2">
<a class="flex align-items-center" href="#"> <path
<img src="assets/layout/images/{{layoutService.isDarkTheme() ? '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> fill-rule="evenodd"
clip-rule="evenodd"
d="M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z"
fill="var(--primary-color)"
/>
<mask id="mask0_1413_1551" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="54" height="11">
<path d="M27 18.3652C10.5114 19.1944 0 8.88892 0 8.88892C0 8.88892 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88892 54 8.88892C54 8.88892 43.4886 17.5361 27 18.3652Z" fill="var(--primary-color)" />
</mask>
<g mask="url(#mask0_1413_1551)">
<path
d="M-4.673e-05 8.88887L3.73084 -1.91434L-8.00806 17.0473L-4.673e-05 8.88887ZM27 18.3652L26.4253 6.95109L27 18.3652ZM54 8.88887L61.2673 17.7127L50.2691 -1.91434L54 8.88887ZM-4.673e-05 8.88887C-8.00806 17.0473 -8.00469 17.0505 -8.00132 17.0538C-8.00018 17.055 -7.99675 17.0583 -7.9944 17.0607C-7.98963 17.0653 -7.98474 17.0701 -7.97966 17.075C-7.96949 17.0849 -7.95863 17.0955 -7.94707 17.1066C-7.92401 17.129 -7.89809 17.1539 -7.86944 17.1812C-7.8122 17.236 -7.74377 17.3005 -7.66436 17.3743C-7.50567 17.5218 -7.30269 17.7063 -7.05645 17.9221C-6.56467 18.3532 -5.89662 18.9125 -5.06089 19.5534C-3.39603 20.83 -1.02575 22.4605 1.98012 24.0457C7.97874 27.2091 16.7723 30.3226 27.5746 29.7793L26.4253 6.95109C20.7391 7.23699 16.0326 5.61231 12.6534 3.83024C10.9703 2.94267 9.68222 2.04866 8.86091 1.41888C8.45356 1.10653 8.17155 0.867278 8.0241 0.738027C7.95072 0.673671 7.91178 0.637576 7.90841 0.634492C7.90682 0.63298 7.91419 0.639805 7.93071 0.65557C7.93897 0.663455 7.94952 0.673589 7.96235 0.686039C7.96883 0.692262 7.97582 0.699075 7.98338 0.706471C7.98719 0.710167 7.99113 0.714014 7.99526 0.718014C7.99729 0.720008 8.00047 0.723119 8.00148 0.724116C8.00466 0.727265 8.00796 0.730446 -4.673e-05 8.88887ZM27.5746 29.7793C37.6904 29.2706 45.9416 26.3684 51.6602 23.6054C54.5296 22.2191 56.8064 20.8465 58.4186 19.7784C59.2265 19.2431 59.873 18.7805 60.3494 18.4257C60.5878 18.2482 60.7841 18.0971 60.9374 17.977C61.014 17.9169 61.0799 17.8645 61.1349 17.8203C61.1624 17.7981 61.1872 17.7781 61.2093 17.7602C61.2203 17.7512 61.2307 17.7427 61.2403 17.7348C61.2452 17.7308 61.2499 17.727 61.2544 17.7233C61.2566 17.7215 61.2598 17.7188 61.261 17.7179C61.2642 17.7153 61.2673 17.7127 54 8.88887C46.7326 0.0650536 46.7357 0.0625219 46.7387 0.0600241C46.7397 0.0592345 46.7427 0.0567658 46.7446 0.0551857C46.7485 0.0520238 46.7521 0.0489887 46.7557 0.0460799C46.7628 0.0402623 46.7694 0.0349487 46.7753 0.0301318C46.7871 0.0204986 46.7966 0.0128495 46.8037 0.00712562C46.818 -0.00431848 46.8228 -0.00808311 46.8184 -0.00463784C46.8096 0.00228345 46.764 0.0378652 46.6828 0.0983779C46.5199 0.219675 46.2165 0.439161 45.7812 0.727519C44.9072 1.30663 43.5257 2.14765 41.7061 3.02677C38.0469 4.79468 32.7981 6.63058 26.4253 6.95109L27.5746 29.7793ZM54 8.88887C50.2691 -1.91433 50.27 -1.91467 50.271 -1.91498C50.2712 -1.91506 50.272 -1.91535 50.2724 -1.9155C50.2733 -1.91581 50.274 -1.91602 50.2743 -1.91616C50.2752 -1.91643 50.275 -1.91636 50.2738 -1.91595C50.2714 -1.91515 50.2652 -1.91302 50.2552 -1.9096C50.2351 -1.90276 50.1999 -1.89078 50.1503 -1.874C50.0509 -1.84043 49.8938 -1.78773 49.6844 -1.71863C49.2652 -1.58031 48.6387 -1.377 47.8481 -1.13035C46.2609 -0.635237 44.0427 0.0249875 41.5325 0.6823C36.215 2.07471 30.6736 3.15796 27 3.15796V26.0151C33.8087 26.0151 41.7672 24.2495 47.3292 22.7931C50.2586 22.026 52.825 21.2618 54.6625 20.6886C55.5842 20.4011 56.33 20.1593 56.8551 19.986C57.1178 19.8993 57.3258 19.8296 57.4735 19.7797C57.5474 19.7548 57.6062 19.7348 57.6493 19.72C57.6709 19.7127 57.6885 19.7066 57.7021 19.7019C57.7089 19.6996 57.7147 19.6976 57.7195 19.696C57.7219 19.6952 57.7241 19.6944 57.726 19.6938C57.7269 19.6934 57.7281 19.693 57.7286 19.6929C57.7298 19.6924 57.7309 19.692 54 8.88887ZM27 3.15796C23.3263 3.15796 17.7849 2.07471 12.4674 0.6823C9.95717 0.0249875 7.73904 -0.635237 6.15184 -1.13035C5.36118 -1.377 4.73467 -1.58031 4.3155 -1.71863C4.10609 -1.78773 3.94899 -1.84043 3.84961 -1.874C3.79994 -1.89078 3.76474 -1.90276 3.74471 -1.9096C3.73469 -1.91302 3.72848 -1.91515 3.72613 -1.91595C3.72496 -1.91636 3.72476 -1.91643 3.72554 -1.91616C3.72593 -1.91602 3.72657 -1.91581 3.72745 -1.9155C3.72789 -1.91535 3.72874 -1.91506 3.72896 -1.91498C3.72987 -1.91467 3.73084 -1.91433 -4.673e-05 8.88887C-3.73093 19.692 -3.72983 19.6924 -3.72868 19.6929C-3.72821 19.693 -3.72698 19.6934 -3.72603 19.6938C-3.72415 19.6944 -3.72201 19.6952 -3.71961 19.696C-3.71482 19.6976 -3.70901 19.6996 -3.7022 19.7019C-3.68858 19.7066 -3.67095 19.7127 -3.6494 19.72C-3.60629 19.7348 -3.54745 19.7548 -3.47359 19.7797C-3.32589 19.8296 -3.11788 19.8993 -2.85516 19.986C-2.33008 20.1593 -1.58425 20.4011 -0.662589 20.6886C1.17485 21.2618 3.74125 22.026 6.67073 22.7931C12.2327 24.2495 20.1913 26.0151 27 26.0151V3.15796Z"
fill="var(--primary-color)"
/>
</g>
</svg>
<span class="text-surface-900 dark:text-surface-0 font-medium text-2xl leading-normal mr-20">SAKAI</span>
</a>
<a pButton pRipple class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100" pStyleClass="@next" enterClass="hidden" leaveToClass="hidden" [hideOnOutsideClick]="true">
<i class="pi pi-bars !text-2xl"></i>
</a> </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> <div class="items-center bg-surface-0 dark:bg-surface-900 grow justify-between hidden lg:flex absolute lg:static w-full left-0 px-12 lg:px-0 z-20" style="top:120px">
</a> <ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row cursor-pointer">
<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> <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"> <a (click)="router.navigate(['/landing'], {fragment: 'home'})" pRipple class="px-0 py-4 text-surface-900 dark:text-surface-0 font-medium text-xl">
<span>Home</span> <span>Home</span>
</a> </a>
</li> </li>
<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"> <a (click)="router.navigate(['/landing'], {fragment: 'features'})" pRipple class="px-0 py-4 text-surface-900 dark:text-surface-0 font-medium text-xl">
<span>Features</span> <span>Features</span>
</a> </a>
</li> </li>
<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"> <a (click)="router.navigate(['/landing'], {fragment: 'highlights'})" pRipple class="px-0 py-4 text-surface-900 dark:text-surface-0 font-medium text-xl">
<span>Highlights</span> <span>Highlights</span>
</a> </a>
</li> </li>
<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"> <a (click)="router.navigate(['/landing'], {fragment: 'pricing'})" pRipple class="px-0 py-4 text-surface-900 dark:text-surface-0 font-medium text-xl">
<span>Pricing</span> <span>Pricing</span>
</a> </a>
</li> </li>
</ul> </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"> <div class="flex border-t lg:border-t-0 border-surface py-4 lg:py-0 mt-4 lg:mt-0 gap-2">
<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="Login" routerLink="/auth/login" [text]="true"></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> <button pButton pRipple label="Register" routerLink="/auth/login"></button>
</div> </div>
</div> </div>
</div>
`, `,
providers: [LayoutService],
}) })
export class TopbarWidget { export class TopbarWidget {
constructor(public router: Router, public layoutService: LayoutService) { } constructor(public router: Router) { }
} }

107
src/layout/appconfigurator.ts
View File

@@ -8,7 +8,7 @@ import { ButtonModule } from 'primeng/button';
import { PrimeNG } from 'primeng/config'; import { PrimeNG } from 'primeng/config';
import { InputSwitchModule } from 'primeng/inputswitch'; import { InputSwitchModule } from 'primeng/inputswitch';
import { RadioButtonModule } from 'primeng/radiobutton'; import { RadioButtonModule } from 'primeng/radiobutton';
import { SelectButton } from 'primeng/selectbutton'; import { SelectButtonModule } from 'primeng/selectbutton';
import { ToggleSwitchModule } from 'primeng/toggleswitch'; import { ToggleSwitchModule } from 'primeng/toggleswitch';
import { LayoutService } from '@/src/service/layout.service'; import { LayoutService } from '@/src/service/layout.service';
@@ -20,51 +20,52 @@ const presets = {
@Component({ @Component({
selector: 'app-configurator', selector: 'app-configurator',
standalone: true, standalone: true,
imports: [CommonModule, FormsModule, InputSwitchModule, ButtonModule, RadioButtonModule, SelectButton, ToggleSwitchModule], imports: [CommonModule, FormsModule, InputSwitchModule, ButtonModule, RadioButtonModule, SelectButtonModule, ToggleSwitchModule],
template: ` template: `
<div class="config-panel-content"> <div
<div class="config-panel-colors"> class="config-panel hidden absolute top-[3.25rem] right-0 w-64 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]"
<span class="config-panel-label">Primary</span> >
<div class="flex flex-col gap-4">
<div> <div>
@for (primaryColor of primaryColors(); track primaryColor.name) { <span class="text-sm text-muted-color font-semibold">Primary</span>
<button <div class="pt-2 flex gap-2 flex-wrap justify-between">
type="button" @for (primaryColor of primaryColors(); track primaryColor.name) {
[title]="primaryColor.name" <button
(click)="updateColors($event, 'primary', primaryColor)" type="button"
[ngClass]="{ 'active-color': primaryColor.name === selectedPrimaryColor() }" [title]="primaryColor.name"
[style]="{ (click)="updateColors($event, 'primary', primaryColor)"
[ngClass]="{ 'active-color': primaryColor.name === selectedPrimaryColor() }"
[style]="{
'background-color': primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette['500'] 'background-color': primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette['500']
}" }"
></button> ></button>
} }
</div>
</div> </div>
</div>
<div class="config-panel-colors">
<span class="config-panel-label">Surface</span>
<div> <div>
@for (surface of surfaces; track surface.name) { <span class="text-sm text-muted-color font-semibold">Surface</span>
<button <div class="pt-2 flex gap-2 flex-wrap justify-between">
type="button" @for (surface of surfaces; track surface.name) {
[title]="surface.name" <button
(click)="updateColors($event, 'surface', surface)" type="button"
[ngClass]="{ 'active-color': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : layoutService.layoutConfig().darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }" [title]="surface.name"
[style]="{ (click)="updateColors($event, 'surface', surface)"
[ngClass]="{ 'active-color': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : layoutService.layoutConfig().darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
[style]="{
'background-color': surface.name === 'noir' ? 'var(--text-color)' : surface?.palette['500'] 'background-color': surface.name === 'noir' ? 'var(--text-color)' : surface?.palette['500']
}" }"
></button> ></button>
} }
</div>
</div> </div>
</div> <div class="flex flex-col gap-2">
<span class="text-sm text-muted-color font-semibold">Presets</span>
<p-selectbutton [options]="presets" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false" />
<div class="config-panel-settings"> </div>
<span class="config-panel-label">Presets</span> <div class="flex flex-col gap-2">
<p-selectbutton [options]="presets" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false" size="small" /> <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
</div> <p-selectbutton [ngModel]="menuMode()" (ngModelChange)="onMenuModeChange($event)" [options]="presets" [allowEmpty]="false" />
<div class="flex">
<div class="config-panel-settings">
<span class="config-panel-label">Ripple</span>
<p-toggleswitch [(ngModel)]="ripple" />
</div> </div>
</div> </div>
</div> </div>
@@ -74,14 +75,6 @@ const presets = {
}, },
}) })
export class AppConfigurator { export class AppConfigurator {
get ripple() {
return this.config.ripple();
}
set ripple(value: boolean) {
this.config.ripple.set(value);
}
config: PrimeNG = inject(PrimeNG); config: PrimeNG = inject(PrimeNG);
layoutService: LayoutService = inject(LayoutService); layoutService: LayoutService = inject(LayoutService);
@@ -90,26 +83,6 @@ export class AppConfigurator {
presets = Object.keys(presets); presets = Object.keys(presets);
onRTLChange(value: boolean) {
this.layoutService.layoutConfig.update((state) => ({ ...state, RTL: value }));
if (!(document as any).startViewTransition) {
this.toggleRTL(value);
return;
}
(document as any).startViewTransition(() => this.toggleRTL(value));
}
toggleRTL(value: boolean) {
const htmlElement = document.documentElement;
if (value) {
htmlElement.setAttribute('dir', 'rtl');
} else {
htmlElement.removeAttribute('dir');
}
}
ngOnInit() { ngOnInit() {
if (isPlatformBrowser(this.platformId)) { if (isPlatformBrowser(this.platformId)) {
this.onPresetChange(this.layoutService.layoutConfig().preset); this.onPresetChange(this.layoutService.layoutConfig().preset);
@@ -264,6 +237,8 @@ export class AppConfigurator {
selectedPreset = computed(() => this.layoutService.layoutConfig().preset); selectedPreset = computed(() => this.layoutService.layoutConfig().preset);
menuMode = computed(() => this.layoutService.layoutConfig().menuMode);
primaryColors = computed(() => { primaryColors = computed(() => {
const presetPalette = presets[this.layoutService.layoutConfig().preset].primitive; const presetPalette = presets[this.layoutService.layoutConfig().preset].primitive;
const colors = ['emerald', 'green', 'lime', 'orange', 'amber', 'yellow', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']; const colors = ['emerald', 'green', 'lime', 'orange', 'amber', 'yellow', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'];
@@ -475,4 +450,8 @@ export class AppConfigurator {
} }
$t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true }); $t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
} }
onMenuModeChange(event: string) {
this.layoutService.layoutConfig.update((prev) => ({ ...prev, menuMode: event }));
}
} }

2
src/layout/applayout.ts
View File

@@ -33,7 +33,7 @@ import { LayoutService } from '@/src/service/layout.service';
<app-footer></app-footer> <app-footer></app-footer>
</div> </div>
<app-configurator></app-configurator> <app-configurator></app-configurator>
<div class="layout-mask"></div> <div class="layout-mask animate-fadein"></div>
</div> </div>
`, `,
}) })

4
src/styles.scss
View File

@@ -1 +1,5 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
@use './assets/layout/layout.scss';
@use 'primeicons/primeicons.css';
@use './assets/demo/demo.scss';

3
src/views/dashboard.ts
View File

@@ -10,8 +10,7 @@ import { NotificationsWidget } from '@/src/components/dashboard/notificationswid
imports: [StatsWidget, RecentSalesWidget, BestSellingWidget, RevenueStreamWidget, NotificationsWidget], imports: [StatsWidget, RecentSalesWidget, BestSellingWidget, RevenueStreamWidget, NotificationsWidget],
template: ` template: `
<div class="grid grid-cols-12 gap-8"> <div class="grid grid-cols-12 gap-8">
<app-stats-widget /> <app-stats-widget />
<div class="col-span-12 xl:col-span-6"> <div class="col-span-12 xl:col-span-6">
<app-recent-sales-widget /> <app-recent-sales-widget />
<app-best-selling-widget /> <app-best-selling-widget />

41
src/views/pages/auth/access.ts
View File

@@ -2,32 +2,37 @@ import { Component } from '@angular/core';
import {ButtonModule} from 'primeng/button'; import {ButtonModule} from 'primeng/button';
import {RouterModule} from '@angular/router'; import {RouterModule} from '@angular/router';
import {RippleModule} from 'primeng/ripple'; import {RippleModule} from 'primeng/ripple';
import { FloatingConfigurator } from '@/src/components/floatingconfigurator';
@Component({ @Component({
standalone: true, standalone: true,
imports: [ imports: [
ButtonModule, ButtonModule,
RouterModule, RouterModule,
RippleModule RippleModule,
FloatingConfigurator,
ButtonModule,
], ],
template: ` template: `
<div class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden"> <floating-configurator />
<div class="flex flex-column align-items-center justify-content-center"> <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<img src="assets/demo/images/access/logo-orange.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0"> <div class="flex flex-col items-center justify-center">
<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 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="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
<div class="grid flex flex-column align-items-center"> <div class="gap-4 flex flex-col items-center">
<div class="flex justify-content-center align-items-center bg-orange-500 border-circle" style="width:3.2rem; height:3.2rem;"> <div class="flex justify-center items-center border-2 border-orange-500 rounded-full" style="width: 3.2rem; height: 3.2rem">
<i class="text-50 pi pi-fw pi-lock text-2xl"></i> <i class="text-orange-500 pi pi-fw pi-lock !text-2xl"></i>
</div> </div>
<h1 class="text-900 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1> <h1 class="text-surface-900 dark:text-surface-0 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> <span class="text-muted-color mb-8">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%"> <img src="/demo/images/access/asset-access.svg" alt="Access denied" class="mb-8" width="80%" />
<button pButton pRipple icon="pi pi-arrow-left" label="Go to Dashboard" class="p-button-text" [routerLink]="['/']"></button> <div class="col-span-12 mt-8 text-center">
<p-button label="Go to Dashboard" routerLink="/" severity="warn" />
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>`
</div>
</div>
</div>`
}) })
export class Access { } export class Access { }

39
src/views/pages/auth/error.ts
View File

@@ -2,28 +2,31 @@ import { Component } from '@angular/core';
import {ButtonModule} from 'primeng/button'; import {ButtonModule} from 'primeng/button';
import {RippleModule} from 'primeng/ripple'; import {RippleModule} from 'primeng/ripple';
import {RouterModule} from '@angular/router'; import {RouterModule} from '@angular/router';
import { FloatingConfigurator } from '@/src/components/floatingconfigurator';
@Component({ @Component({
imports: [ButtonModule, RippleModule, RouterModule], imports: [ButtonModule, RippleModule, RouterModule, FloatingConfigurator, ButtonModule],
standalone: true, standalone: true,
template: ` template: `
<div class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden"> <floating-configurator />
<div class="flex flex-column align-items-center justify-content-center"> <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<img src="assets/demo/images/error/logo-error.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0"> <div class="flex flex-col items-center justify-center">
<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 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="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
<div class="grid flex flex-column align-items-center"> <div class="gap-4 flex flex-col items-center">
<div class="flex justify-content-center align-items-center bg-pink-500 border-circle" style="height:3.2rem; width:3.2rem;"> <div class="flex justify-center items-center border-2 border-pink-500 rounded-full" style="height: 3.2rem; width: 3.2rem">
<i class="pi pi-fw pi-exclamation-circle text-2xl text-white"></i> <i class="pi pi-fw pi-exclamation-circle !text-2xl text-pink-500"></i>
</div> </div>
<h1 class="text-900 font-bold text-5xl mb-2">Error Occured</h1> <h1 class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-2">Error Occured</h1>
<span class="text-600 mb-5">Requested resource is not available.</span> <span class="text-muted-color mb-8">Requested resource is not available.</span>
<img src="assets/demo/images/error/asset-error.svg" alt="Error" class="mb-5" width="80%"> <img src="/demo/images/error/asset-error.svg" alt="Error" class="mb-8" width="80%" />
<button pButton pRipple icon="pi pi-arrow-left" label="Go to Dashboard" class="p-button-text" [routerLink]="['/']"></button> <div class="col-span-12 mt-8 text-center">
<p-button label="Go to Dashboard" routerLink="/" severity="danger" />
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>`
</div>
</div>
</div>`
}) })
export class Error { } export class Error { }

103
src/views/pages/auth/login.ts
View File

@@ -6,67 +6,76 @@ import { PasswordModule} from 'primeng/password';
import {FormsModule} from '@angular/forms'; import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router'; import {RouterModule} from '@angular/router';
import { RippleModule} from 'primeng/ripple'; import { RippleModule} from 'primeng/ripple';
import { LayoutService } from '@/src/service/layout.service'; import { FloatingConfigurator } from '@/src/components/floatingconfigurator';
@Component({ @Component({
standalone: true, standalone: true,
imports: [ imports: [
ButtonModule, ButtonModule,
CheckboxModule, CheckboxModule,
InputTextModule, InputTextModule,
PasswordModule, PasswordModule,
FormsModule, FormsModule,
RouterModule, RouterModule,
RippleModule, RippleModule,
], FloatingConfigurator
],
template: ` template: `
<div class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden"> <floating-configurator />
<div class="flex flex-column align-items-center justify-content-center"> <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<img src="assets/layout/images/{{layoutService.isDarkTheme() ? 'logo-dark' : 'logo-white'}}.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0"> <div class="flex flex-col items-center justify-center">
<div style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%);"> <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="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20" style="border-radius: 53px">
<div class="text-center mb-5"> <div class="text-center mb-8">
<img src="assets/demo/images/login/avatar.png" alt="Image" height="50" class="mb-3"> <svg viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="mb-8 w-16 shrink-0 mx-auto">
<div class="text-900 text-3xl font-medium mb-3">Welcome, Isabel!</div> <path
<span class="text-600 font-medium">Sign in to continue</span> fill-rule="evenodd"
</div> clip-rule="evenodd"
d="M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z"
fill="var(--primary-color)"
/>
<mask id="mask0_1413_1551" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="54" height="11">
<path d="M27 18.3652C10.5114 19.1944 0 8.88892 0 8.88892C0 8.88892 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88892 54 8.88892C54 8.88892 43.4886 17.5361 27 18.3652Z" fill="var(--primary-color)" />
</mask>
<g mask="url(#mask0_1413_1551)">
<path
d="M-4.673e-05 8.88887L3.73084 -1.91434L-8.00806 17.0473L-4.673e-05 8.88887ZM27 18.3652L26.4253 6.95109L27 18.3652ZM54 8.88887L61.2673 17.7127L50.2691 -1.91434L54 8.88887ZM-4.673e-05 8.88887C-8.00806 17.0473 -8.00469 17.0505 -8.00132 17.0538C-8.00018 17.055 -7.99675 17.0583 -7.9944 17.0607C-7.98963 17.0653 -7.98474 17.0701 -7.97966 17.075C-7.96949 17.0849 -7.95863 17.0955 -7.94707 17.1066C-7.92401 17.129 -7.89809 17.1539 -7.86944 17.1812C-7.8122 17.236 -7.74377 17.3005 -7.66436 17.3743C-7.50567 17.5218 -7.30269 17.7063 -7.05645 17.9221C-6.56467 18.3532 -5.89662 18.9125 -5.06089 19.5534C-3.39603 20.83 -1.02575 22.4605 1.98012 24.0457C7.97874 27.2091 16.7723 30.3226 27.5746 29.7793L26.4253 6.95109C20.7391 7.23699 16.0326 5.61231 12.6534 3.83024C10.9703 2.94267 9.68222 2.04866 8.86091 1.41888C8.45356 1.10653 8.17155 0.867278 8.0241 0.738027C7.95072 0.673671 7.91178 0.637576 7.90841 0.634492C7.90682 0.63298 7.91419 0.639805 7.93071 0.65557C7.93897 0.663455 7.94952 0.673589 7.96235 0.686039C7.96883 0.692262 7.97582 0.699075 7.98338 0.706471C7.98719 0.710167 7.99113 0.714014 7.99526 0.718014C7.99729 0.720008 8.00047 0.723119 8.00148 0.724116C8.00466 0.727265 8.00796 0.730446 -4.673e-05 8.88887ZM27.5746 29.7793C37.6904 29.2706 45.9416 26.3684 51.6602 23.6054C54.5296 22.2191 56.8064 20.8465 58.4186 19.7784C59.2265 19.2431 59.873 18.7805 60.3494 18.4257C60.5878 18.2482 60.7841 18.0971 60.9374 17.977C61.014 17.9169 61.0799 17.8645 61.1349 17.8203C61.1624 17.7981 61.1872 17.7781 61.2093 17.7602C61.2203 17.7512 61.2307 17.7427 61.2403 17.7348C61.2452 17.7308 61.2499 17.727 61.2544 17.7233C61.2566 17.7215 61.2598 17.7188 61.261 17.7179C61.2642 17.7153 61.2673 17.7127 54 8.88887C46.7326 0.0650536 46.7357 0.0625219 46.7387 0.0600241C46.7397 0.0592345 46.7427 0.0567658 46.7446 0.0551857C46.7485 0.0520238 46.7521 0.0489887 46.7557 0.0460799C46.7628 0.0402623 46.7694 0.0349487 46.7753 0.0301318C46.7871 0.0204986 46.7966 0.0128495 46.8037 0.00712562C46.818 -0.00431848 46.8228 -0.00808311 46.8184 -0.00463784C46.8096 0.00228345 46.764 0.0378652 46.6828 0.0983779C46.5199 0.219675 46.2165 0.439161 45.7812 0.727519C44.9072 1.30663 43.5257 2.14765 41.7061 3.02677C38.0469 4.79468 32.7981 6.63058 26.4253 6.95109L27.5746 29.7793ZM54 8.88887C50.2691 -1.91433 50.27 -1.91467 50.271 -1.91498C50.2712 -1.91506 50.272 -1.91535 50.2724 -1.9155C50.2733 -1.91581 50.274 -1.91602 50.2743 -1.91616C50.2752 -1.91643 50.275 -1.91636 50.2738 -1.91595C50.2714 -1.91515 50.2652 -1.91302 50.2552 -1.9096C50.2351 -1.90276 50.1999 -1.89078 50.1503 -1.874C50.0509 -1.84043 49.8938 -1.78773 49.6844 -1.71863C49.2652 -1.58031 48.6387 -1.377 47.8481 -1.13035C46.2609 -0.635237 44.0427 0.0249875 41.5325 0.6823C36.215 2.07471 30.6736 3.15796 27 3.15796V26.0151C33.8087 26.0151 41.7672 24.2495 47.3292 22.7931C50.2586 22.026 52.825 21.2618 54.6625 20.6886C55.5842 20.4011 56.33 20.1593 56.8551 19.986C57.1178 19.8993 57.3258 19.8296 57.4735 19.7797C57.5474 19.7548 57.6062 19.7348 57.6493 19.72C57.6709 19.7127 57.6885 19.7066 57.7021 19.7019C57.7089 19.6996 57.7147 19.6976 57.7195 19.696C57.7219 19.6952 57.7241 19.6944 57.726 19.6938C57.7269 19.6934 57.7281 19.693 57.7286 19.6929C57.7298 19.6924 57.7309 19.692 54 8.88887ZM27 3.15796C23.3263 3.15796 17.7849 2.07471 12.4674 0.6823C9.95717 0.0249875 7.73904 -0.635237 6.15184 -1.13035C5.36118 -1.377 4.73467 -1.58031 4.3155 -1.71863C4.10609 -1.78773 3.94899 -1.84043 3.84961 -1.874C3.79994 -1.89078 3.76474 -1.90276 3.74471 -1.9096C3.73469 -1.91302 3.72848 -1.91515 3.72613 -1.91595C3.72496 -1.91636 3.72476 -1.91643 3.72554 -1.91616C3.72593 -1.91602 3.72657 -1.91581 3.72745 -1.9155C3.72789 -1.91535 3.72874 -1.91506 3.72896 -1.91498C3.72987 -1.91467 3.73084 -1.91433 -4.673e-05 8.88887C-3.73093 19.692 -3.72983 19.6924 -3.72868 19.6929C-3.72821 19.693 -3.72698 19.6934 -3.72603 19.6938C-3.72415 19.6944 -3.72201 19.6952 -3.71961 19.696C-3.71482 19.6976 -3.70901 19.6996 -3.7022 19.7019C-3.68858 19.7066 -3.67095 19.7127 -3.6494 19.72C-3.60629 19.7348 -3.54745 19.7548 -3.47359 19.7797C-3.32589 19.8296 -3.11788 19.8993 -2.85516 19.986C-2.33008 20.1593 -1.58425 20.4011 -0.662589 20.6886C1.17485 21.2618 3.74125 22.026 6.67073 22.7931C12.2327 24.2495 20.1913 26.0151 27 26.0151V3.15796Z"
fill="var(--primary-color)"
/>
</g>
</svg>
<div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome to PrimeLand!</div>
<span class="text-muted-color font-medium">Sign in to continue</span>
</div>
<div> <div>
<label for="email1" class="block text-900 text-xl font-medium mb-2">Email</label> <label for="email1" class="block text-surface-900 dark:text-surface-0 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"> <input pInputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8" [(ngModel)]="email" />
<label for="password1" class="block text-900 font-medium text-xl mb-2">Password</label> <label for="password1" class="block text-surface-900 dark:text-surface-0 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> <p-password id="password1" [(ngModel)]="password" placeholder="Password" [toggleMask]="true" class="mb-4" [fluid]="true" [feedback]="false"></p-password>
<div class="flex align-items-center justify-content-between mb-5 gap-5"> <div class="flex items-center justify-between mt-2 mb-8 gap-8">
<div class="flex align-items-center"> <div class="flex items-center">
<p-checkbox id="rememberme1" [binary]="true" styleClass="mr-2"></p-checkbox> <p-checkbox [(ngModel)]="checked" id="rememberme1" binary class="mr-2"></p-checkbox>
<label for="rememberme1">Remember me</label> <label for="rememberme1">Remember me</label>
</div>
<span class="font-medium no-underline ml-2 text-right cursor-pointer text-primary">Forgot password?</span>
</div>
<p-button label="Sign In" class="w-full" routerLink="/"></p-button>
</div>
</div>
</div> </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>
</div>
</div>
`, `,
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 Login { export class Login {
email: string = '';
valCheck: string[] = ['remember']; password: string = '';
password!: string; checked: boolean = false;
layoutService = inject(LayoutService);
} }

388
src/views/pages/crud.ts
View File

@@ -37,207 +37,205 @@ import { Product, ProductService } from '@/src/service/product.service';
InputNumberModule, InputNumberModule,
DialogModule DialogModule
], ],
template: `<div class="grid"> template: `
<div class="col-12"> <div>
<div class="card px-6 py-6"> <div class="card">
<p-toast></p-toast> <p-toast></p-toast>
<p-toolbar styleClass="mb-4"> <p-toolbar styleClass="mb-6">
<ng-template #left> <ng-template #left>
<div class="my-2"> <div class="my-2">
<button pButton pRipple severity="success" class="mr-2" (click)="openNew()"> <button pButton pRipple severity="success" class="mr-2" (click)="openNew()">
<i pButtonIcon class="pi plus mr-2"></i> <i pButtonIcon class="pi plus mr-2"></i>
<span pButtonLabel>New</span> <span pButtonLabel>New</span>
</button> </button>
<button pButton pRipple severity="danger" (click)="deleteSelectedProducts()" [disabled]="!selectedProducts || !selectedProducts.length"> <button pButton pRipple severity="danger" (click)="deleteSelectedProducts()" [disabled]="!selectedProducts || !selectedProducts.length">
<i pButtonIcon class="pi pi-trash mr-2"></i> <i pButtonIcon class="pi pi-trash mr-2"></i>
<span pButtonLabel>Delete</span> <span pButtonLabel>Delete</span>
</button> </button>
</div> </div>
</ng-template> </ng-template>
<ng-template #right> <ng-template #right>
<p-fileupload mode="basic" accept="image/*" [maxFileSize]="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block"></p-fileupload> <p-fileupload mode="basic" accept="image/*" [maxFileSize]="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block"></p-fileupload>
<button pButton pRipple severity="help" (click)="dt.exportCSV()"> <button pButton pRipple severity="help" (click)="dt.exportCSV()">
<i pButtonIcon class="pi upload"></i> <i pButtonIcon class="pi upload"></i>
<span pButtonLabel>Export</span> <span pButtonLabel>Export</span>
</button> </button>
</ng-template> </ng-template>
</p-toolbar> </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">
<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 #caption>
<ng-template #caption> <div class="flex flex-col md:flex-row md:justify-between md:items-center">
<div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center"> <h5 class="m-0">Manage Products</h5>
<h5 class="m-0">Manage Products</h5> <span class="block mt-2 md:mt-0 p-input-icon-left">
<span class="block mt-2 md:mt-0 p-input-icon-left">
<i class="pi pi-search"></i> <i class="pi pi-search"></i>
<input pInputText type="text" (input)="onGlobalFilter(dt, $event)" placeholder="Search..." class="w-full sm:w-auto"/> <input pInputText type="text" (input)="onGlobalFilter(dt, $event)" placeholder="Search..." class="w-full sm:w-auto"/>
</span> </span>
</div> </div>
</ng-template> </ng-template>
<ng-template #header> <ng-template #header>
<tr> <tr>
<th style="width: 3rem"> <th style="width: 3rem">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox> <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th> </th>
<th pSortableColumn="code">Code <p-sortIcon field="code"></p-sortIcon></th> <th pSortableColumn="code">Code <p-sortIcon field="code"></p-sortIcon></th>
<th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th> <th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
<th>Image</th> <th>Image</th>
<th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></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="category">Category <p-sortIcon field="category"></p-sortIcon></th>
<th pSortableColumn="rating">Reviews <p-sortIcon field="rating"></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 pSortableColumn="inventoryStatus">Status <p-sortIcon field="inventoryStatus"></p-sortIcon></th>
<th></th> <th></th>
</tr> </tr>
</ng-template> </ng-template>
<ng-template #body let-product> <ng-template #body let-product>
<tr> <tr>
<td> <td>
<p-tableCheckbox [value]="product"></p-tableCheckbox> <p-tableCheckbox [value]="product"></p-tableCheckbox>
</td> </td>
<td style="width:14%; min-width:10rem;"><span class="p-column-title">Code</span> <td style="width:14%; min-width:10rem;"><span class="p-column-title">Code</span>
{{product.code || product.id}} {{product.code || product.id}}
</td> </td>
<td style="width:14%; min-width:10rem;"> <td style="width:14%; min-width:10rem;">
<span class="p-column-title">Name</span> <span class="p-column-title">Name</span>
{{product.name}} {{product.name}}
</td> </td>
<td style="width:14%; min-width:10rem;"><span class="p-column-title">Image</span> <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" /> <img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-lg" />
</td> </td>
<td style="width:14%; min-width:8rem;"> <td style="width:14%; min-width:8rem;">
<span class="p-column-title">Price</span> <span class="p-column-title">Price</span>
{{product.price | currency:'USD'}} {{product.price | currency:'USD'}}
</td> </td>
<td style="width:14%; min-width:10rem;"> <td style="width:14%; min-width:10rem;">
<span class="p-column-title">Category</span> <span class="p-column-title">Category</span>
{{product.category}} {{product.category}}
</td> </td>
<td style="width:14%; min-width: 10rem;"><span class="p-column-title">Reviews</span> <td style="width:14%; min-width: 10rem;"><span class="p-column-title">Reviews</span>
<p-rating [ngModel]="product.rating" [readonly]="true"></p-rating> <p-rating [ngModel]="product.rating" [readonly]="true"></p-rating>
</td> </td>
<td style="width:14%; min-width: 10rem;"><span class="p-column-title">Status</span> <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> <span [class]="'product-badge status-' + (product.inventoryStatus ? product.inventoryStatus.toLowerCase() : '')">{{product.inventoryStatus}}</span>
</td> </td>
<td> <td>
<div class="flex"> <div class="flex">
<button pButton pRipple severity="success" [rounded]="true" class="mr-2" (click)="editProduct(product)"> <button pButton pRipple severity="success" [rounded]="true" class="mr-2" (click)="editProduct(product)">
<i pButtonIcon class="pi pi-pencil"></i> <i pButtonIcon class="pi pi-pencil"></i>
</button>
<button pButton pRipple severity="warn" [rounded]="true" (click)="deleteProduct(product)">
<i pButtonIcon class="pi pi-trash"></i>
</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 #content>
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.image" width="150" class="mt-0 mx-auto mb-8 block shadow" *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" pTextarea [(ngModel)]="product.description" required rows="3" cols="20"></textarea>
</div>
<div class="field">
<label for="status">Inventory Status</label>
<p-select [(ngModel)]="product.inventoryStatus" inputId="inventoryStatus" optionValue="label" [options]="statuses" placeholder="Select">
<ng-template #selectedItem>
<span *ngIf="product && product.inventoryStatus" [class]="'product-badge status-' + product.inventoryStatus.toString().toLowerCase()">{{product.inventoryStatus}}</span>
</ng-template>
<ng-template let-option #item>
<span [class]="'product-badge status-' + option.value">{{option.label}}</span>
</ng-template>
</p-select>
</div>
<div class="field">
<label class="mb-4">Category</label>
<div class="formgrid grid grid-cols-12 gap-4">
<div class="field-radiobutton col-span-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-span-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-span-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-span-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 grid-cols-12 gap-4">
<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 #footer>
<button pButton pRipple [text]="true" (click)="hideDialog()">
<i pButtonIcon class="pi times mr-2"></i>
<span pButtonLabel>Cancel</span>
</button> </button>
<button pButton pRipple severity="warn" [rounded]="true" (click)="deleteProduct(product)"> <button pButton pRipple [text]="true" (click)="saveProduct()">
<i pButtonIcon class="pi pi-trash"></i> <i pButtonIcon class="pi pi-check mr-2"></i>
<span pButtonLabel>Save</span>
</button> </button>
</div> </ng-template>
</td> </p-dialog>
</tr>
</ng-template> <p-dialog [(visible)]="deleteProductDialog" header="Confirm" [modal]="true" [style]="{width:'450px'}">
</p-table> <div class="flex items-center justify-center">
<i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem"></i>
<span *ngIf="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
</div>
<ng-template #footer>
<button pButton pRipple [text]="true" (click)="deleteProductDialog = false">
<i pButtonIcon class="pi pi-times mr-2"></i>
<span pButtonLabel>No</span>
</button>
<button pButton pRipple [text]="true" (click)="confirmDelete()">
<i pButtonIcon class="pi pi-check mr-2"></i>
<span pButtonLabel>Yes</span>
</button>
</ng-template>
</p-dialog>
<p-dialog [(visible)]="deleteProductsDialog" header="Confirm" [modal]="true" [style]="{width:'450px'}">
<div class="flex items-center justify-center">
<i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem"></i>
<span>Are you sure you want to delete selected products?</span>
</div>
<ng-template #footer>
<button pButton pRipple [text]="true" (click)="deleteProductsDialog = false">
<i pButtonIcon class="pi pi-times mr-2"></i>
<span pButtonLabel>No</span>
</button>
<button pButton pRipple [text]="true" (click)="confirmDeleteSelected()">
<i pButtonIcon class="pi pi-check mr-2"></i>
<span pButtonLabel>Yes</span>
</button>
</ng-template>
</p-dialog>
</div> </div>
<p-dialog [(visible)]="productDialog" [style]="{width: '450px'}" header="Product Details" [modal]="true" class="p-fluid">
<ng-template #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" pTextarea [(ngModel)]="product.description" required rows="3" cols="20"></textarea>
</div>
<div class="field">
<label for="status">Inventory Status</label>
<p-select [(ngModel)]="product.inventoryStatus" inputId="inventoryStatus" optionValue="label" [options]="statuses" placeholder="Select">
<ng-template #selectedItem>
<span *ngIf="product && product.inventoryStatus" [class]="'product-badge status-' + product.inventoryStatus.toString().toLowerCase()">{{product.inventoryStatus}}</span>
</ng-template>
<ng-template let-option #item>
<span [class]="'product-badge status-' + option.value">{{option.label}}</span>
</ng-template>
</p-select>
</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 #footer>
<button pButton pRipple [text]="true" (click)="hideDialog()">
<i pButtonIcon class="pi times mr-2"></i>
<span pButtonLabel>Cancel</span>
</button>
<button pButton pRipple [text]="true" (click)="saveProduct()">
<i pButtonIcon class="pi pi-check mr-2"></i>
<span pButtonLabel>Save</span>
</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 #footer>
<button pButton pRipple [text]="true" (click)="deleteProductDialog = false">
<i pButtonIcon class="pi pi-times mr-2"></i>
<span pButtonLabel>No</span>
</button>
<button pButton pRipple [text]="true" (click)="confirmDelete()">
<i pButtonIcon class="pi pi-check mr-2"></i>
<span pButtonLabel>Yes</span>
</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 #footer>
<button pButton pRipple [text]="true" (click)="deleteProductsDialog = false">
<i pButtonIcon class="pi pi-times mr-2"></i>
<span pButtonLabel>No</span>
</button>
<button pButton pRipple [text]="true" (click)="confirmDeleteSelected()">
<i pButtonIcon class="pi pi-check mr-2"></i>
<span pButtonLabel>Yes</span>
</button>
</ng-template>
</p-dialog>
</div>
</div>
`, `,
providers: [MessageService] providers: [MessageService]
}) })
@@ -261,8 +259,6 @@ export class Crud implements OnInit {
statuses: any[] = []; statuses: any[] = [];
rowsPerPageOptions = [5, 10, 20];
private messageService = inject(MessageService); private messageService = inject(MessageService);
private productService = inject(ProductService); private productService = inject(ProductService);

2
src/views/pages/documentation.ts
View File

@@ -5,7 +5,7 @@ import { CommonModule } from '@angular/common';
standalone: true, standalone: true,
imports: [CommonModule], imports: [CommonModule],
template: ` template: `
<div class="card mb-3"> <div class="card mb-4">
<div> <div>
<h2>Documentation</h2> <h2>Documentation</h2>
<h4>Getting Started</h4> <h4>Getting Started</h4>

11
src/views/pages/empty.ts
View File

@@ -2,13 +2,10 @@ import { Component } from '@angular/core';
@Component({ @Component({
standalone: true, standalone: true,
template: `<div class="grid"> template: `
<div class="col-12"> <div class="card">
<div class="card"> <div class="font-semibold text-xl mb-4">Empty Page</div>
<h4>Empty Page</h4> <p>Use this page to start from scratch and place your custom content.</p>
<p>This is your empty page template to start building beautiful applications.</p>
</div>
</div>
</div>` </div>`
}) })
export class Empty { } export class Empty { }

6
src/views/pages/landing.ts
View File

@@ -14,7 +14,8 @@ import { TopbarWidget } from '@/src/components/landing/topbarwidget.component';
@Component({ @Component({
standalone: true, standalone: true,
imports: [RouterModule,TopbarWidget, HeroWidget, FeaturesWidget, HighlightsWidget, PricingWidget, FooterWidget, RippleModule, StyleClassModule, ButtonModule, DividerModule], imports: [RouterModule,TopbarWidget, HeroWidget, FeaturesWidget, HighlightsWidget, PricingWidget, FooterWidget, RippleModule, StyleClassModule, ButtonModule, DividerModule],
template:`<div class="bg-surface-0 dark:bg-surface-900"> template:`
<div class="bg-surface-0 dark:bg-surface-900">
<div id="home" class="landing-wrapper overflow-hidden"> <div id="home" class="landing-wrapper overflow-hidden">
<div class="py-6 px-6 mx-0 md:mx-12 lg:mx-20 lg:px-20 flex items-center justify-between relative lg:static"> <div class="py-6 px-6 mx-0 md:mx-12 lg:mx-20 lg:px-20 flex items-center justify-between relative lg:static">
<topbar-widget /> <topbar-widget />
@@ -25,6 +26,7 @@ import { TopbarWidget } from '@/src/components/landing/topbarwidget.component';
<pricing-widget /> <pricing-widget />
<footer-widget /> <footer-widget />
</div> </div>
</div>`, </div>
`,
}) })
export class Landing {} export class Landing {}

97
src/views/pages/notfound.ts
View File

@@ -1,47 +1,68 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import {RouterModule} from '@angular/router'; import {RouterModule} from '@angular/router';
import { FloatingConfigurator } from '@/src/components/floatingconfigurator';
import { ButtonModule } from 'primeng/button';
@Component({ @Component({
standalone: true, standalone: true,
imports: [RouterModule], imports: [RouterModule, FloatingConfigurator, ButtonModule],
template: `<div class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden"> template: `
<div class="flex flex-column align-items-center justify-content-center"> <floating-configurator />
<img src="assets/demo/images/notfound/logo-blue.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0"> <div class="flex items-center justify-center min-h-screen overflow-hidden">
<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="flex flex-col items-center justify-center">
<div class="w-full surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center" style="border-radius:53px"> <svg width="54" height="40" viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="mb-8 w-32 shrink-0">
<span class="text-blue-500 font-bold text-3xl">404</span> <path
<h1 class="text-900 font-bold text-3xl lg:text-5xl mb-2">Not Found</h1> fill-rule="evenodd"
<div class="text-600 mb-5">Requested resource is not available.</div> clip-rule="evenodd"
<a [routerLink]="['/']" class="w-full flex align-items-center py-5 border-300 border-bottom-1"> d="M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z"
<span class="flex justify-content-center align-items-center bg-cyan-400 border-round" style="height:3.5rem; width:3.5rem;"> fill="var(--primary-color)"
<i class="text-50 pi pi-fw pi-table text-2xl"></i> />
</span> <mask id="mask0_1413_1551" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="54" height="11">
<span class="ml-4 flex flex-column"> <path d="M27 18.3652C10.5114 19.1944 0 8.88892 0 8.88892C0 8.88892 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88892 54 8.88892C54 8.88892 43.4886 17.5361 27 18.3652Z" fill="var(--primary-color)" />
<span class="text-900 lg:text-xl font-medium mb-0 block">Frequently Asked Questions</span> </mask>
<span class="text-600 lg:text-xl">Ultricies mi quis hendrerit dolor.</span> <g mask="url(#mask0_1413_1551)">
</span> <path
</a> d="M-4.673e-05 8.88887L3.73084 -1.91434L-8.00806 17.0473L-4.673e-05 8.88887ZM27 18.3652L26.4253 6.95109L27 18.3652ZM54 8.88887L61.2673 17.7127L50.2691 -1.91434L54 8.88887ZM-4.673e-05 8.88887C-8.00806 17.0473 -8.00469 17.0505 -8.00132 17.0538C-8.00018 17.055 -7.99675 17.0583 -7.9944 17.0607C-7.98963 17.0653 -7.98474 17.0701 -7.97966 17.075C-7.96949 17.0849 -7.95863 17.0955 -7.94707 17.1066C-7.92401 17.129 -7.89809 17.1539 -7.86944 17.1812C-7.8122 17.236 -7.74377 17.3005 -7.66436 17.3743C-7.50567 17.5218 -7.30269 17.7063 -7.05645 17.9221C-6.56467 18.3532 -5.89662 18.9125 -5.06089 19.5534C-3.39603 20.83 -1.02575 22.4605 1.98012 24.0457C7.97874 27.2091 16.7723 30.3226 27.5746 29.7793L26.4253 6.95109C20.7391 7.23699 16.0326 5.61231 12.6534 3.83024C10.9703 2.94267 9.68222 2.04866 8.86091 1.41888C8.45356 1.10653 8.17155 0.867278 8.0241 0.738027C7.95072 0.673671 7.91178 0.637576 7.90841 0.634492C7.90682 0.63298 7.91419 0.639805 7.93071 0.65557C7.93897 0.663455 7.94952 0.673589 7.96235 0.686039C7.96883 0.692262 7.97582 0.699075 7.98338 0.706471C7.98719 0.710167 7.99113 0.714014 7.99526 0.718014C7.99729 0.720008 8.00047 0.723119 8.00148 0.724116C8.00466 0.727265 8.00796 0.730446 -4.673e-05 8.88887ZM27.5746 29.7793C37.6904 29.2706 45.9416 26.3684 51.6602 23.6054C54.5296 22.2191 56.8064 20.8465 58.4186 19.7784C59.2265 19.2431 59.873 18.7805 60.3494 18.4257C60.5878 18.2482 60.7841 18.0971 60.9374 17.977C61.014 17.9169 61.0799 17.8645 61.1349 17.8203C61.1624 17.7981 61.1872 17.7781 61.2093 17.7602C61.2203 17.7512 61.2307 17.7427 61.2403 17.7348C61.2452 17.7308 61.2499 17.727 61.2544 17.7233C61.2566 17.7215 61.2598 17.7188 61.261 17.7179C61.2642 17.7153 61.2673 17.7127 54 8.88887C46.7326 0.0650536 46.7357 0.0625219 46.7387 0.0600241C46.7397 0.0592345 46.7427 0.0567658 46.7446 0.0551857C46.7485 0.0520238 46.7521 0.0489887 46.7557 0.0460799C46.7628 0.0402623 46.7694 0.0349487 46.7753 0.0301318C46.7871 0.0204986 46.7966 0.0128495 46.8037 0.00712562C46.818 -0.00431848 46.8228 -0.00808311 46.8184 -0.00463784C46.8096 0.00228345 46.764 0.0378652 46.6828 0.0983779C46.5199 0.219675 46.2165 0.439161 45.7812 0.727519C44.9072 1.30663 43.5257 2.14765 41.7061 3.02677C38.0469 4.79468 32.7981 6.63058 26.4253 6.95109L27.5746 29.7793ZM54 8.88887C50.2691 -1.91433 50.27 -1.91467 50.271 -1.91498C50.2712 -1.91506 50.272 -1.91535 50.2724 -1.9155C50.2733 -1.91581 50.274 -1.91602 50.2743 -1.91616C50.2752 -1.91643 50.275 -1.91636 50.2738 -1.91595C50.2714 -1.91515 50.2652 -1.91302 50.2552 -1.9096C50.2351 -1.90276 50.1999 -1.89078 50.1503 -1.874C50.0509 -1.84043 49.8938 -1.78773 49.6844 -1.71863C49.2652 -1.58031 48.6387 -1.377 47.8481 -1.13035C46.2609 -0.635237 44.0427 0.0249875 41.5325 0.6823C36.215 2.07471 30.6736 3.15796 27 3.15796V26.0151C33.8087 26.0151 41.7672 24.2495 47.3292 22.7931C50.2586 22.026 52.825 21.2618 54.6625 20.6886C55.5842 20.4011 56.33 20.1593 56.8551 19.986C57.1178 19.8993 57.3258 19.8296 57.4735 19.7797C57.5474 19.7548 57.6062 19.7348 57.6493 19.72C57.6709 19.7127 57.6885 19.7066 57.7021 19.7019C57.7089 19.6996 57.7147 19.6976 57.7195 19.696C57.7219 19.6952 57.7241 19.6944 57.726 19.6938C57.7269 19.6934 57.7281 19.693 57.7286 19.6929C57.7298 19.6924 57.7309 19.692 54 8.88887ZM27 3.15796C23.3263 3.15796 17.7849 2.07471 12.4674 0.6823C9.95717 0.0249875 7.73904 -0.635237 6.15184 -1.13035C5.36118 -1.377 4.73467 -1.58031 4.3155 -1.71863C4.10609 -1.78773 3.94899 -1.84043 3.84961 -1.874C3.79994 -1.89078 3.76474 -1.90276 3.74471 -1.9096C3.73469 -1.91302 3.72848 -1.91515 3.72613 -1.91595C3.72496 -1.91636 3.72476 -1.91643 3.72554 -1.91616C3.72593 -1.91602 3.72657 -1.91581 3.72745 -1.9155C3.72789 -1.91535 3.72874 -1.91506 3.72896 -1.91498C3.72987 -1.91467 3.73084 -1.91433 -4.673e-05 8.88887C-3.73093 19.692 -3.72983 19.6924 -3.72868 19.6929C-3.72821 19.693 -3.72698 19.6934 -3.72603 19.6938C-3.72415 19.6944 -3.72201 19.6952 -3.71961 19.696C-3.71482 19.6976 -3.70901 19.6996 -3.7022 19.7019C-3.68858 19.7066 -3.67095 19.7127 -3.6494 19.72C-3.60629 19.7348 -3.54745 19.7548 -3.47359 19.7797C-3.32589 19.8296 -3.11788 19.8993 -2.85516 19.986C-2.33008 20.1593 -1.58425 20.4011 -0.662589 20.6886C1.17485 21.2618 3.74125 22.026 6.67073 22.7931C12.2327 24.2495 20.1913 26.0151 27 26.0151V3.15796Z"
<a [routerLink]="['/']" class="w-full flex align-items-center py-5 border-300 border-bottom-1"> fill="var(--primary-color)"
<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> </g>
</span> </svg>
<span class="ml-4 flex flex-column"> <div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, color-mix(in srgb, var(--primary-color), transparent 60%) 10%, var(--surface-ground) 30%)">
<span class="text-900 lg:text-xl font-medium mb-0">Solution Center</span> <div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
<span class="text-600 lg:text-xl">Phasellus faucibus scelerisque eleifend.</span> <span class="text-primary font-bold text-3xl">404</span>
</span> <h1 class="text-surface-900 dark:text-surface-0 font-bold text-3xl lg:text-5xl mb-2">Not Found</h1>
</a> <div class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</div>
<a [routerLink]="['/']" class="w-full flex align-items-center mb-5 py-5 border-300 border-bottom-1"> <a routerLink="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
<span class="flex justify-content-center align-items-center bg-indigo-400 border-round" style="height:3.5rem; width:3.5rem;"> <span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
<i class="pi pi-fw pi-unlock text-50 text-2xl"></i> <i class="pi pi-fw pi-table !text-2xl"></i>
</span> </span>
<span class="ml-4 flex flex-column"> <span class="ml-6 flex flex-col">
<span class="text-900 lg:text-xl font-medium mb-0">Permission Manager</span> <span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0 block">Frequently Asked Questions</span>
<span class="text-600 lg:text-xl">Accumsan in nisl nisi scelerisque</span> <span class="text-surface-600 dark:text-surface-200 lg:text-xl">Ultricies mi quis hendrerit dolor.</span>
</span> </span>
</a> </a>
</div> <a routerLink="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
<span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
<i class="pi pi-fw pi-question-circle !text-2xl"></i>
</span>
<span class="ml-6 flex flex-col">
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Solution Center</span>
<span class="text-surface-600 dark:text-surface-200 lg:text-xl">Phasellus faucibus scelerisque eleifend.</span>
</span>
</a>
<a routerLink="/" class="w-full flex items-center mb-8 py-8 border-surface-300 dark:border-surface-500 border-b">
<span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
<i class="pi pi-fw pi-unlock !text-2xl"></i>
</span>
<span class="ml-6 flex flex-col">
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Permission Manager</span>
<span class="text-surface-600 dark:text-surface-200 lg:text-xl">Accumsan in nisl nisi scelerisque</span>
</span>
</a>
<p-button label="Go to Dashboard" routerLink="/" />
</div>
</div>
</div> </div>
</div>
</div>`, </div>`,
}) })
export class Notfound { } export class Notfound { }

16
src/views/uikit/buttondoc.ts
View File

@@ -87,7 +87,7 @@ import {MenuItem} from "primeng/api";
</p-button> </p-button>
<p-button type="button" outlined severity="success"> <p-button type="button" outlined severity="success">
<img alt="logo" src="/demo/images/logo.svg" style="width: 1.5rem" /> <img alt="logo" src="/demo/images/logo.svg" style="width: 1.5rem" />
<span class="ml-2 text-bold">PrimeNG</span> <span class="text-bold">PrimeNG</span>
</p-button> </p-button>
</div> </div>
</div> </div>
@@ -96,9 +96,9 @@ import {MenuItem} from "primeng/api";
<div class="card flex flex-col gap-4"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Icons</div> <div class="font-semibold text-xl">Icons</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<p-button icon="pi pi-star-fill" class="mr-2 mb-2"></p-button> <p-button icon="pi pi-star-fill"></p-button>
<p-button label="Bookmark" icon="pi pi-bookmark" class="mr-2 mb-2"></p-button> <p-button label="Bookmark" icon="pi pi-bookmark"></p-button>
<p-button label="Bookmark" icon="pi pi-bookmark" iconPos="right" class="mr-2 mb-2"></p-button> <p-button label="Bookmark" icon="pi pi-bookmark" iconPos="right"></p-button>
</div> </div>
</div> </div>
<div class="card flex flex-col gap-4"> <div class="card flex flex-col gap-4">
@@ -166,10 +166,10 @@ import {MenuItem} from "primeng/api";
<div class="card flex flex-col gap-4"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Loading</div> <div class="font-semibold text-xl">Loading</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<p-button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" loading="loading[0]" (click)="load(0)" /> <p-button type="button" label="Search" icon="pi pi-search" loading="loading[0]" (click)="load(0)" />
<p-button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" iconPos="right" [loading]="loading[1]" (click)="load(1)" /> <p-button type="button" label="Search" icon="pi pi-search" iconPos="right" [loading]="loading[1]" (click)="load(1)" />
<p-button type="button" class="mr-2 mb-2" icon="pi pi-search" [loading]="loading[2]" (click)="load(2)" /> <p-button type="button" icon="pi pi-search" [loading]="loading[2]" (click)="load(2)" />
<p-button type="button" class="mr-2 mb-2" label="Search" [loading]="loading[3]" (click)="load(3)" /> <p-button type="button" label="Search" [loading]="loading[3]" (click)="load(3)" />
</div> </div>
</div> </div>
</div> </div>

54
src/views/uikit/chartdoc.ts
View File

@@ -3,47 +3,53 @@ import { ChartModule } from 'primeng/chart';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { debounceTime, Subscription } from 'rxjs'; import { debounceTime, Subscription } from 'rxjs';
import { LayoutService } from '@/src/service/layout.service'; import { LayoutService } from '@/src/service/layout.service';
import { FluidModule } from 'primeng/fluid';
@Component({ @Component({
standalone:true, standalone:true,
imports: [ imports: [
CommonModule, CommonModule,
ChartModule ChartModule,
FluidModule
], ],
template: `<div class="grid p-fluid"> template: ` <p-fluid class="grid grid-cols-12 gap-8">
<div class="col-12 lg:col-6"> <div class="col-span-12 xl:col-span-6">
<div class="card"> <div class="card">
<h5>Linear Chart</h5> <div class="font-semibold text-xl mb-4">Linear</div>
<p-chart type="line" [data]="lineData" [options]="lineOptions"></p-chart> <p-chart type="line" [data]="lineData" [options]="lineOptions"></p-chart>
</div> </div>
</div>
<div class="card flex flex-column align-items-center"> <div class="col-span-12 xl:col-span-6">
<h5 class="text-left w-full">Pie Chart</h5> <div class="card">
<div class="font-semibold text-xl mb-4">Bar</div>
<p-chart type="bar" [data]="barData" [options]="barOptions"></p-chart>
</div>
</div>
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<div class="font-semibold text-xl mb-4">Pie</div>
<p-chart type="pie" [data]="pieData" [options]="pieOptions"></p-chart> <p-chart type="pie" [data]="pieData" [options]="pieOptions"></p-chart>
</div> </div>
</div>
<div class="card flex flex-column align-items-center"> <div class="col-span-12 xl:col-span-6">
<h5 class="text-left w-full">Polar Area Chart</h5> <div class="card flex flex-col items-center">
<div class="font-semibold text-xl mb-4">Doughnut</div>
<p-chart type="doughnut" [data]="pieData" [options]="pieOptions"></p-chart>
</div>
</div>
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<div class="font-semibold text-xl mb-4">Polar Area</div>
<p-chart type="polarArea" [data]="polarData" [options]="polarOptions"></p-chart> <p-chart type="polarArea" [data]="polarData" [options]="polarOptions"></p-chart>
</div> </div>
</div> </div>
<div class="col-12 lg:col-6"> <div class="col-span-12 xl:col-span-6">
<div class="card"> <div class="card flex flex-col items-center">
<h5>Bar Chart</h5> <div class="font-semibold text-xl mb-4">Radar</div>
<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> <p-chart type="radar" [data]="radarData" [options]="radarOptions"></p-chart>
</div> </div>
</div> </div>
</div> </p-fluid>
`, `,
}) })
export class ChartDoc { export class ChartDoc {

40
src/views/uikit/filedoc.ts
View File

@@ -9,32 +9,32 @@ import { ToastModule } from 'primeng/toast';
standalone:true, standalone:true,
imports:[CommonModule, FileUploadModule,ToastModule,ButtonModule], imports:[CommonModule, FileUploadModule,ToastModule,ButtonModule],
template: `<div class="grid grid-cols-12 gap-8"> template: `<div class="grid grid-cols-12 gap-8">
<div class="col-span-full lg:col-span-6"> <div class="col-span-full lg:col-span-6">
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Advanced</div> <div class="font-semibold text-xl mb-4">Advanced</div>
<p-fileupload name="demo[]" (onUpload)="onUpload($event)" [multiple]="true" accept="image/*" maxFileSize="1000000" mode="advanced"> <p-fileupload name="demo[]" (onUpload)="onUpload($event)" [multiple]="true" accept="image/*" maxFileSize="1000000" mode="advanced">
<ng-template #empty> <ng-template #empty>
<div>Drag and drop files to here to upload.</div> <div>Drag and drop files to here to upload.</div>
</ng-template> </ng-template>
<ng-template #content> <ng-template #content>
<ul *ngIf="uploadedFiles.length"> <ul *ngIf="uploadedFiles.length">
<li *ngFor="let file of uploadedFiles">{{ file.name }} - {{ file.size }} bytes</li> <li *ngFor="let file of uploadedFiles">{{ file.name }} - {{ file.size }} bytes</li>
</ul> </ul>
</ng-template> </ng-template>
</p-fileupload> </p-fileupload>
<div class="col-span-full lg:col-span-6"> </div>
</div>
<div class="col-span-full lg:col-span-6">
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Basic</div> <div class="font-semibold text-xl mb-4">Basic</div>
<div class="card flex flex-col gap-6 items-center justify-center"> <div class="card flex flex-col gap-6 items-center justify-center">
<p-toast /> <p-toast />
<p-fileupload #fu mode="basic" chooseLabel="Choose" chooseIcon="pi pi-upload" name="demo[]" url="https://www.primefaces.org/cdn/api/upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onUpload($event)" /> <p-fileupload #fu mode="basic" chooseLabel="Choose" chooseIcon="pi pi-upload" name="demo[]" url="https://www.primefaces.org/cdn/api/upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onUpload($event)" />
<p-button label="Upload" (onClick)="fu.upload()" severity="secondary" /> <p-button label="Upload" (onClick)="fu.upload()" severity="secondary" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>`,
</div>
</div>`,
providers: [MessageService] providers: [MessageService]
}) })
export class FileDoc { export class FileDoc {
@@ -55,4 +55,4 @@ export class FileDoc {
this.messageService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode' }); this.messageService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode' });
} }
} }

16
src/views/uikit/formlayoutdoc.ts
View File

@@ -30,7 +30,7 @@ import {TextareaModule} from "primeng/textarea";
<div class="card flex flex-col gap-4"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Vertical Grid</div> <div class="font-semibold text-xl">Vertical Grid</div>
<div class="flex flex-wrap gap-4"> <div class="flex flex-wrap gap-6">
<div class="flex flex-col grow basis-0 gap-2"> <div class="flex flex-col grow basis-0 gap-2">
<label for="name2">Name</label> <label for="name2">Name</label>
<input pInputText id="name2" type="text" /> <input pInputText id="name2" type="text" />
@@ -45,13 +45,13 @@ import {TextareaModule} from "primeng/textarea";
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card flex flex-col gap-4"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Horizontal</div> <div class="font-semibold text-xl">Horizontal</div>
<div class="grid grid-cols-12 gap-2"> <div class="grid grid-cols-12 gap-4 grid-cols-12 gap-2">
<label for="name3" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0">Name</label> <label for="name3" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0">Name</label>
<div class="col-span-12 md:col-span-10"> <div class="col-span-12 md:col-span-10">
<input pInputText id="name3" type="text" /> <input pInputText id="name3" type="text" />
</div> </div>
</div> </div>
<div class="grid grid-cols-12 gap-2"> <div class="grid grid-cols-12 gap-4 grid-cols-12 gap-2">
<label for="email3" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0">Email</label> <label for="email3" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0">Email</label>
<div class="col-span-12 md:col-span-10"> <div class="col-span-12 md:col-span-10">
<input pInputText id="email3" type="text" /> <input pInputText id="email3" type="text" />
@@ -61,7 +61,7 @@ import {TextareaModule} from "primeng/textarea";
<div class="card flex flex-col gap-4"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Inline</div> <div class="font-semibold text-xl">Inline</div>
<div class="flex flex-wrap items-start gap-4"> <div class="flex flex-wrap items-start gap-6">
<div class="field"> <div class="field">
<label for="firstname1" class="sr-only">Firstname</label> <label for="firstname1" class="sr-only">Firstname</label>
<input pInputText id="firstname1" type="text" placeholder="Firstname" /> <input pInputText id="firstname1" type="text" placeholder="Firstname" />
@@ -84,10 +84,10 @@ import {TextareaModule} from "primeng/textarea";
</div> </div>
</div> </div>
<div class="flex mt-8"> <div class="flex mt-20">
<div class="card flex flex-col gap-4 w-full"> <div class="card flex flex-col gap-6 w-full">
<div class="font-semibold text-xl">Advanced</div> <div class="font-semibold text-xl">Advanced</div>
<div class="flex flex-col md:flex-row gap-4"> <div class="flex flex-col md:flex-row gap-6">
<div class="flex flex-wrap gap-2 w-full"> <div class="flex flex-wrap gap-2 w-full">
<label for="firstname2">Firstname</label> <label for="firstname2">Firstname</label>
<input pInputText id="firstname2" type="text" /> <input pInputText id="firstname2" type="text" />
@@ -103,7 +103,7 @@ import {TextareaModule} from "primeng/textarea";
<textarea pTextarea id="address" rows="4"></textarea> <textarea pTextarea id="address" rows="4"></textarea>
</div> </div>
<div class="flex flex-col md:flex-row gap-4"> <div class="flex flex-col md:flex-row gap-6">
<div class="flex flex-wrap gap-2 w-full"> <div class="flex flex-wrap gap-2 w-full">
<label for="state">State</label> <label for="state">State</label>
<p-select id="state" [(ngModel)]="dropdownItem" [options]="dropdownItems" optionLabel="name" placeholder="Select One" class="w-full"></p-select> <p-select id="state" [(ngModel)]="dropdownItem" [options]="dropdownItems" optionLabel="name" placeholder="Select One" class="w-full"></p-select>

21
src/views/uikit/inputdoc.ts
View File

@@ -61,7 +61,7 @@ import { NodeService } from '@/src/service/node.service';
template: ` template: `
<p-fluid class="flex flex-col md:flex-row gap-8"> <p-fluid class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card flex flex-col gap-4"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">InputText</div> <div class="font-semibold text-xl">InputText</div>
<div class="flex flex-col md:flex-row gap-4"> <div class="flex flex-col md:flex-row gap-4">
<input pInputText type="text" placeholder="Default"/> <input pInputText type="text" placeholder="Default"/>
@@ -100,12 +100,13 @@ import { NodeService } from '@/src/service/node.service';
<p-inputnumber [(ngModel)]="inputNumberValue" showButtons mode="decimal"></p-inputnumber> <p-inputnumber [(ngModel)]="inputNumberValue" showButtons mode="decimal"></p-inputnumber>
</div> </div>
<div class="card flex flex-col gap-4"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Slider</div> <div class="font-semibold text-xl">Slider</div>
<input pInputText [(ngModel)]="sliderValue" type="number"/> <input pInputText [(ngModel)]="sliderValue" type="number"/>
<p-slider [(ngModel)]="sliderValue"/> <p-slider [(ngModel)]="sliderValue"/>
<div class="flex flex-row mt-6"> <div class="flex flex-row mt-6">
<div class="flex flex-col gap-4 w-1/2"> <div class="flex flex-col gap-4 w-1/2">
<div class="font-semibold text-xl">Rating</div> <div class="font-semibold text-xl">Rating</div>
<p-rating [(ngModel)]="ratingValue"/> <p-rating [(ngModel)]="ratingValue"/>
@@ -121,7 +122,7 @@ import { NodeService } from '@/src/service/node.service';
</div> </div>
</div> </div>
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card flex flex-col gap-4"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">RadioButton</div> <div class="font-semibold text-xl">RadioButton</div>
<div class="flex flex-col md:flex-row gap-4"> <div class="flex flex-col md:flex-row gap-4">
<div class="flex items-center"> <div class="flex items-center">
@@ -159,7 +160,7 @@ import { NodeService } from '@/src/service/node.service';
<p-toggleswitch [(ngModel)]="switchValue"/> <p-toggleswitch [(ngModel)]="switchValue"/>
</div> </div>
<div class="card flex flex-col gap-4"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Listbox</div> <div class="font-semibold text-xl">Listbox</div>
<p-listbox [(ngModel)]="listboxValue" [options]="listboxValues" optionLabel="name" [filter]="true"/> <p-listbox [(ngModel)]="listboxValue" [options]="listboxValues" optionLabel="name" [filter]="true"/>
@@ -171,7 +172,7 @@ import { NodeService } from '@/src/service/node.service';
<p-multiselect [(ngModel)]="multiselectValue" [options]="multiselectValues" optionLabel="name" placeholder="Select Countries" [filter]="true"> <p-multiselect [(ngModel)]="multiselectValue" [options]="multiselectValues" optionLabel="name" placeholder="Select Countries" [filter]="true">
<ng-template #selecteditems let-countries> <ng-template #selecteditems let-countries>
@for (country of countries; track country.code) { @for (country of countries; track country.code) {
<div class="inline-flex items-center py-1 px-2 bg-primary text-primary-contrast rounded-border mr-2"> <div class="inline-flex items-center py-1 px-2 bg-primary text-primary-contrast text-primary-contrast rounded-border mr-2">
<span [class]="'mr-2 flag flag-' + country.code.toLowerCase()" style="width: 18px; height: 12px"></span> <span [class]="'mr-2 flag flag-' + country.code.toLowerCase()" style="width: 18px; height: 12px"></span>
<div>{{ country.name }}</div> <div>{{ country.name }}</div>
</div> </div>
@@ -189,7 +190,7 @@ import { NodeService } from '@/src/service/node.service';
<p-treeselect [(ngModel)]="selectedNode" [options]="treeSelectNodes" placeholder="Select Item"></p-treeselect> <p-treeselect [(ngModel)]="selectedNode" [options]="treeSelectNodes" placeholder="Select Item"></p-treeselect>
</div> </div>
<div class="card flex flex-col gap-4"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">ToggleButton</div> <div class="font-semibold text-xl">ToggleButton</div>
<p-togglebutton [(ngModel)]="toggleValue" onLabel="Yes" offLabel="No" :style="{ width: '10em' }"/> <p-togglebutton [(ngModel)]="toggleValue" onLabel="Yes" offLabel="No" :style="{ width: '10em' }"/>
@@ -199,10 +200,10 @@ import { NodeService } from '@/src/service/node.service';
</div> </div>
</p-fluid> </p-fluid>
<p-fluid class="flex mt-8"> <p-fluid class="flex mt-20">
<div class="card flex flex-col gap-4 w-full"> <div class="card flex flex-col gap-6 w-full">
<div class="font-semibold text-xl">InputGroup</div> <div class="font-semibold text-xl">InputGroup</div>
<div class="flex flex-col md:flex-row gap-4"> <div class="flex flex-col md:flex-row gap-6">
<p-inputgroup> <p-inputgroup>
<p-inputgroup-addon> <p-inputgroup-addon>
<i class="pi pi-user"></i> <i class="pi pi-user"></i>
@@ -221,7 +222,7 @@ import { NodeService } from '@/src/service/node.service';
<p-inputgroup-addon>.00</p-inputgroup-addon> <p-inputgroup-addon>.00</p-inputgroup-addon>
</p-inputgroup> </p-inputgroup>
</div> </div>
<div class="flex flex-col md:flex-row gap-4"> <div class="flex flex-col md:flex-row gap-6">
<p-inputgroup> <p-inputgroup>
<p-button label="Search"/> <p-button label="Search"/>
<input pInputText placeholder="Keyword"/> <input pInputText placeholder="Keyword"/>

12
src/views/uikit/listdoc.ts
View File

@@ -63,7 +63,7 @@ import { Product, ProductService } from '@/src/service/product.service';
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-col md:items-end gap-8"> <div class="flex flex-col md:items-end gap-20">
<span class="text-xl font-semibold">{{ item.price }}</span> <span class="text-xl font-semibold">{{ item.price }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2"> <div class="flex flex-row-reverse md:flex-row gap-2">
<p-button icon="pi pi-heart" [outlined]="true"></p-button> <p-button icon="pi pi-heart" [outlined]="true"></p-button>
@@ -84,7 +84,7 @@ import { Product, ProductService } from '@/src/service/product.service';
class="col-span-12 sm:col-span-6 lg:col-span-4 p-2"> class="col-span-12 sm:col-span-6 lg:col-span-4 p-2">
<div <div
class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col"> class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
<div class="bg-surface-50 flex justify-center rounded p-4"> <div class="bg-surface-50 flex justify-center rounded p-6">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img class="rounded w-full" <img class="rounded w-full"
src="https://primefaces.org/cdn/primevue/images/product/{{item.image}}" src="https://primefaces.org/cdn/primevue/images/product/{{item.image}}"
@@ -94,7 +94,7 @@ import { Product, ProductService } from '@/src/service/product.service';
[style]="{left: '4px', top: '4px'}"></p-tag> [style]="{left: '4px', top: '4px'}"></p-tag>
</div> </div>
</div> </div>
<div class="pt-6"> <div class="pt-12">
<div class="flex flex-row justify-between items-start gap-2"> <div class="flex flex-row justify-between items-start gap-2">
<div> <div>
<span <span
@@ -134,10 +134,10 @@ import { Product, ProductService } from '@/src/service/product.service';
</p-dataview> </p-dataview>
</div> </div>
<div class="flex flex-col lg:flex-row gap-8"> <div class="flex flex-col lg:flex-row gap-20">
<div class="lg:w-2/3"> <div class="lg:w-2/3">
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">PickList</div> <div class="font-semibold text-xl mb-6">PickList</div>
<p-pick-list [source]="sourceCities" [target]="targetCities" breakpoint="1400px"> <p-pick-list [source]="sourceCities" [target]="targetCities" breakpoint="1400px">
<ng-template #item let-item> <ng-template #item let-item>
{{ item.name }} {{ item.name }}
@@ -148,7 +148,7 @@ import { Product, ProductService } from '@/src/service/product.service';
<div class="lg:w-1/3"> <div class="lg:w-1/3">
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">OrderList</div> <div class="font-semibold text-xl mb-6">OrderList</div>
<p-orderList [value]="orderCities" header="Cities" [dragdrop]="true" <p-orderList [value]="orderCities" header="Cities" [dragdrop]="true"
[listStyle]="{'height':'250px'}"> [listStyle]="{'height':'250px'}">
<ng-template #item let-city> <ng-template #item let-city>

80
src/views/uikit/mediadoc.ts
View File

@@ -11,56 +11,46 @@ import { PhotoService } from '@/src/service/photo.service';
@Component({ @Component({
standalone:true, standalone:true,
imports:[CommonModule, CarouselModule,ButtonModule,GalleriaModule, ImageModule, TagModule], imports:[CommonModule, CarouselModule,ButtonModule,GalleriaModule, ImageModule, TagModule],
template: `<div class="grid p-fluid"> template: `<div class="card">
<div class="col-12"> <div class="font-semibold text-xl mb-4">Carousel</div>
<div class="card"> <p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="carouselResponsiveOptions">
<h5>Carousel</h5> <ng-template let-product #item>
<p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="carouselResponsiveOptions"> <div class="border border-surface rounded-border m-2 p-6">
<ng-template let-product #item> <div class="mb-6">
<div class="border border-surface rounded-border m-2 p-4"> <div class="relative mx-auto">
<div class="mb-4"> <img src="assets/demo/images/product/{{product.image}}" [alt]="product.name" class="shadow-lg" width="50%"/>
<div class="relative mx-auto"> <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" class="absolute" styleClass="dark:!bg-surface-900" [ngStyle]="{ 'left.px': 5, 'top.px': 5 }" />
<img src="assets/demo/images/product/{{product.image}}" [alt]="product.name" class="shadow-4" width="50%"/> </div>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" class="absolute" styleClass="dark:!bg-surface-900" [ngStyle]="{ 'left.px': 5, 'top.px': 5 }" /> </div>
<div class="mb-6 font-medium">{{ product.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">{{ '$' + product.price }}</div>
<span>
<p-button icon="pi pi-heart" severity="secondary" [outlined]="true" />
<p-button icon="pi pi-shopping-cart" styleClass="ml-2" />
</span>
</div>
</div> </div>
</div> </ng-template>
<div class="mb-4 font-medium">{{ product.name }}</div> </p-carousel>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">{{ '$' + product.price }}</div>
<span>
<p-button icon="pi pi-heart" severity="secondary" [outlined]="true" />
<p-button icon="pi pi-shopping-cart" styleClass="ml-2" />
</span>
</div>
</div>
</ng-template>
</p-carousel>
</div>
</div> </div>
<div class="col-12"> <div class="card">
<div class="card"> <div class="font-semibold text-xl mb-4">Image</div>
<h5>Image</h5> <p-image src="assets/demo/images/galleria/galleria10.jpg" alt="Image" width="250" [preview]="true"></p-image>
<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>
<div class="col-12"> <div class="card">
<div class="card"> <div class="font-semibold text-xl mb-4">Galleria</div>
<h5>Galleria</h5> <p-galleria [value]="images" [responsiveOptions]="galleriaResponsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
<p-galleria [value]="images" [responsiveOptions]="galleriaResponsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5"> <ng-template #item let-item>
<ng-template #item let-item> <img [src]="item.itemImageSrc" style="width:100%" />
<img [src]="item.itemImageSrc" style="width:100%" /> </ng-template>
</ng-template> <ng-template #thumbnail let-item>
<ng-template #thumbnail let-item> <img [src]="item.thumbnailImageSrc" />
<img [src]="item.thumbnailImageSrc" /> </ng-template>
</ng-template> </p-galleria>
</p-galleria> </div>`,
</div>
</div>
</div>`,
}) })
export class MediaDoc implements OnInit { export class MediaDoc implements OnInit {

139
src/views/uikit/menudoc.ts
View File

@@ -17,88 +17,88 @@ import { StepperModule } from 'primeng/stepper';
standalone:true, standalone:true,
imports: [CommonModule, BreadcrumbModule, TieredMenuModule, MenuModule, ButtonModule, ContextMenuModule, MegaMenuModule, PanelMenuModule, TabsModule, MenubarModule, InputTextModule, TabsModule, StepperModule, TabsModule], imports: [CommonModule, BreadcrumbModule, TieredMenuModule, MenuModule, ButtonModule, ContextMenuModule, MegaMenuModule, PanelMenuModule, TabsModule, MenubarModule, InputTextModule, TabsModule, StepperModule, TabsModule],
template: ` template: `
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Menubar</div> <div class="font-semibold text-xl mb-4">Menubar</div>
<p-menubar [model]="nestedMenuItems"> <p-menubar [model]="nestedMenuItems">
<ng-template #end> <ng-template #end>
<span class="p-input-icon-right"> <span class="p-input-icon-right">
<input type="text" pInputText placeholder="Search"> <input type="text" pInputText placeholder="Search">
<i class="pi pi-search"></i> <i class="pi pi-search"></i>
</span> </span>
</ng-template> </ng-template>
</p-menubar> </p-menubar>
</div> </div>
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Breadcrumb</div> <div class="font-semibold text-xl mb-4">Breadcrumb</div>
<p-breadcrumb [model]="breadcrumbItems" [home]="breadcrumbHome"></p-breadcrumb> <p-breadcrumb [model]="breadcrumbItems" [home]="breadcrumbHome"></p-breadcrumb>
</div> </div>
<div class="flex flex-col md:flex-row gap-8"> <div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Steps</div> <div class="font-semibold text-xl mb-4">Steps</div>
<p-stepper [value]="1"> <p-stepper [value]="1">
<p-step-list> <p-step-list>
<p-step [value]="1">Header I</p-step> <p-step [value]="1">Header I</p-step>
<p-step [value]="2">Header II</p-step> <p-step [value]="2">Header II</p-step>
<p-step [value]="3">Header III</p-step> <p-step [value]="3">Header III</p-step>
</p-step-list> </p-step-list>
</p-stepper> </p-stepper>
</div>
</div>
<div class="md:w-1/2">
<div class="card">
<div class="font-semibold text-xl mb-4">TabMenu</div>
<p-tabs [value]="0">
<p-tablist>
<p-tab [value]="0">Header I</p-tab>
<p-tab [value]="1">Header II</p-tab>
<p-tab [value]="2">Header III</p-tab>
</p-tablist>
</p-tabs>
</div>
</div> </div>
</div> </div>
<div class="md:w-1/2">
<div class="card"> <div class="flex flex-col md:flex-row gap-8 mt-6">
<div class="font-semibold text-xl mb-4">TabMenu</div> <div class="md:w-1/3">
<p-tabs [value]="0"> <div class="card">
<p-tablist> <div class="font-semibold text-xl mb-4">Tiered Menu</div>
<p-tab [value]="0">Header I</p-tab> <p-tieredMenu [model]="tieredMenuItems"></p-tieredMenu>
<p-tab [value]="1">Header II</p-tab> </div>
<p-tab [value]="2">Header III</p-tab> </div>
</p-tablist> <div class="md:w-1/3">
</p-tabs> <div class="card">
<div class="font-semibold text-xl mb-4">Plain Menu</div>
<p-menu [model]="menuItems"></p-menu>
</div>
</div>
<div class="md:w-1/3">
<div class="card">
<div class="font-semibold text-xl mb-4">Overlay Menu</div>
<p-menu #menu [popup]="true" [model]="overlayMenuItems"></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" #anchor>
<div class="font-semibold text-xl mb-4">Context Menu</div>
Right click to display.
<p-contextMenu [target]="anchor" [model]="contextMenuItems"></p-contextMenu>
</div>
</div> </div>
</div> </div>
</div>
<div class="flex flex-col md:flex-row gap-8 mt-6"> <div class="flex flex-col md:flex-row gap-8 mt-8">
<div class="md:w-1/3"> <div class="md:w-1/2">
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Tiered Menu</div> <div class="font-semibold text-xl mb-4">MegaMenu | Horizontal</div>
<p-tieredMenu [model]="tieredMenuItems"></p-tieredMenu> <p-megaMenu [model]="megaMenuItems" />
</div>
</div>
<div class="md:w-1/3">
<div class="card">
<div class="font-semibold text-xl mb-4">Plain Menu</div>
<p-menu [model]="menuItems"></p-menu>
</div>
</div>
<div class="md:w-1/3">
<div class="card">
<div class="font-semibold text-xl mb-4">Overlay Menu</div>
<p-menu #menu [popup]="true" [model]="overlayMenuItems"></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" #anchor> <div class="font-semibold text-xl mb-4 mt-8">MegaMenu | Vertical</div>
<div class="font-semibold text-xl mb-4">Context Menu</div> <p-megaMenu [model]="megaMenuItems" orientation="vertical" />
Right click to display. </div>
<p-contextMenu [target]="anchor" [model]="contextMenuItems"></p-contextMenu>
</div> </div>
</div>
</div>
<div class="flex flex-col md:flex-row gap-8 mt-8">
<div class="md:w-1/2">
<div class="card">
<div class="font-semibold text-xl mb-4">MegaMenu | Horizontal</div>
<p-megaMenu [model]="megaMenuItems" />
<div class="font-semibold text-xl mb-4 mt-8">MegaMenu | Vertical</div>
<p-megaMenu [model]="megaMenuItems" orientation="vertical" />
</div>
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">PanelMenu</div> <div class="font-semibold text-xl mb-4">PanelMenu</div>
@@ -106,7 +106,6 @@ import { StepperModule } from 'primeng/stepper';
</div> </div>
</div> </div>
</div> </div>
</div>
`, `,
}) })
export class MenuDoc { export class MenuDoc {

67
src/views/uikit/messagesdoc.ts
View File

@@ -11,43 +11,42 @@ import { FormsModule } from '@angular/forms';
standalone: true, standalone: true,
imports:[CommonModule,ToastModule,ButtonModule,InputTextModule,MessageModule,FormsModule], imports:[CommonModule,ToastModule,ButtonModule,InputTextModule,MessageModule,FormsModule],
template:` template:`
<div class="flex flex-col md:flex-row gap-8"> <div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Toast</div> <div class="font-semibold text-xl mb-4">Toast</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<p-button (click)="showSuccessViaToast()" label="Success" severity="success" /> <p-button (click)="showSuccessViaToast()" label="Success" severity="success" />
<p-button (click)="showInfoViaToast()" label="Info" severity="info" /> <p-button (click)="showInfoViaToast()" label="Info" severity="info" />
<p-button (click)="showWarnViaToast()" label="Warn" severity="warn" /> <p-button (click)="showWarnViaToast()" label="Warn" severity="warn" />
<p-button (click)="showErrorViaToast()" label="Error" severity="danger" /> <p-button (click)="showErrorViaToast()" label="Error" severity="danger" />
</div> </div>
<div class="font-semibold text-xl mt-4 mb-4">Inline</div> <div class="font-semibold text-xl mt-4 mb-4">Inline</div>
<div class="flex flex-wrap mb-4 gap-2"> <div class="flex flex-wrap mb-4 gap-2">
<input pInputText [(ngModel)]="username" placeholder="Username" aria-label="username" class="ng-dirty ng-invalid"/> <input pInputText [(ngModel)]="username" placeholder="Username" aria-label="username" class="ng-dirty ng-invalid"/>
<p-message severity="error">Username is required</p-message> <p-message severity="error">Username is required</p-message>
</div>
<div class="flex flex-wrap gap-2">
<input pInputText [(ngModel)]="email" placeholder="Email" aria-label="email" class="ng-dirty ng-invalid" />
<p-message severity="error" icon="pi pi-times-circle" />
</div>
</div> </div>
<div class="flex flex-wrap gap-2"> </div>
<input pInputText [(ngModel)]="email" placeholder="Email" aria-label="email" class="ng-dirty ng-invalid" /> <div class="md:w-1/2">
<p-message severity="error" icon="pi pi-times-circle" /> <div class="card">
<div class="font-semibold text-xl mb-4">Message</div>
<div class="flex flex-col gap-4 mb-4">
<p-message severity="success">Success Message</p-message>
<p-message severity="info">Info Message</p-message>
<p-message severity="warn">Warn Message</p-message>
<p-message severity="error">Error Message</p-message>
<p-message severity="secondary">Secondary Message</p-message>
<p-message severity="contrast">Contrast Message</p-message>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="md:w-1/2">
<div class="card">
<div class="font-semibold text-xl mb-4">Message</div>
<div class="flex flex-col gap-4 mb-4">
<p-message severity="success">Success Message</p-message>
<p-message severity="info">Info Message</p-message>
<p-message severity="warn">Warn Message</p-message>
<p-message severity="error">Error Message</p-message>
<p-message severity="secondary">Secondary Message</p-message>
<p-message severity="contrast">Contrast Message</p-message>
</div>
<!-- <p-message *ngFor="let msg of message" [severity]="msg.severity">{{ msg.content }}</p-message> -->
</div>
</div>
</div>
`, `,
providers: [MessageService] providers: [MessageService]
}) })
@@ -96,5 +95,5 @@ export class MessagesDoc {
this.msgs = []; this.msgs = [];
this.msgs.push({ severity: 'success', summary: 'Success Message', detail: 'Message sent' }); this.msgs.push({ severity: 'success', summary: 'Success Message', detail: 'Message sent' });
} }
} }

300
src/views/uikit/miscdoc.ts
View File

@@ -28,184 +28,174 @@ import { OverlayBadgeModule } from 'primeng/overlaybadge';
ScrollTopModule, ScrollTopModule,
OverlayBadgeModule OverlayBadgeModule
], ],
template: `<div class="grid"> template: `<template>
<div class="col-12"> <div class="card">
<div class="card"> <div class="font-semibold text-xl mb-4">ProgressBar</div>
<h5>ProgressBar</h5> <div class="flex flex-col md:flex-row gap-4">
<div class="grid"> <div class="md:w-1/2">
<div class="col"> <p-progressBar [value]="value" [showValue]="true"></p-progressBar>
<p-progressBar [value]="value" [showValue]="true"></p-progressBar> </div>
</div> <div class="md:w-1/2">
<div class="col"> <p-progressBar [value]="50" [showValue]="false"></p-progressBar>
<p-progressBar [value]="50" [showValue]="false"></p-progressBar>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 lg:col-6">
<div class="card"> <div class="flex flex-col md:flex-row gap-8">
<h4>Badge</h4> <div class="md:w-1/2">
<h5>Numbers</h5> <div class="card">
<div class="flex flex-wrap gap-2"> <div class="font-semibold text-xl mb-4">Badge</div>
<p-badge value="2"></p-badge> <div class="flex gap-2">
<p-badge value="8" severity="success"></p-badge> <p-badge value="2"></p-badge>
<p-badge value="4" severity="info"></p-badge> <p-badge value="8" severity="success"></p-badge>
<p-badge value="12" severity="warn"></p-badge> <p-badge value="4" severity="info"></p-badge>
<p-badge value="3" severity="danger"></p-badge> <p-badge value="12" severity="warn"></p-badge>
<p-badge value="3" severity="danger"></p-badge>
</div>
<div class="font-semibold my-4">Overlay</div>
<div class="flex gap-6">
<p-overlaybadge value="2">
<i class="pi pi-bell" style="font-size: 2rem"></i>
</p-overlaybadge>
<p-overlaybadge value="4" severity="danger">
<i class="pi pi-calendar" style="font-size: 2rem"></i>
</p-overlaybadge>
<p-overlaybadge severity="danger">
<i class="pi pi-envelope" style="font-size: 2rem"></i>
</p-overlaybadge>
</div>
<div class="font-semibold my-4">Button</div>
<div class="flex gap-2">
<p-button label="Emails" badge="8"></p-button>
<p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
</div>
<div class="font-semibold my-4">Sizes</div>
<div class="flex items-start gap-2">
<p-badge [value]="2"></p-badge>
<p-badge [value]="4" size="large" severity="warn"></p-badge>
<p-badge [value]="6" size="xlarge" severity="success"></p-badge>
</div>
</div> </div>
<h5>Positioned Badge</h5> <div class="card">
<div class="flex flex-wrap gap-2"> <div class="font-semibold text-xl mb-4">Avatar</div>
<i class="pi pi-bell mr-4 p-text-secondary" pBadge style="font-size: 2rem" value="2"></i> <div class="font-semibold mb-4">Group</div>
<i class="pi pi-calendar mr-4 p-text-secondary" pBadge style="font-size: 2rem" [value]="'10+'" severity="danger"></i> <p-avatarGroup styleClass="mb-4">
<i class="pi pi-envelope p-text-secondary" pBadge style="font-size: 2rem" severity="danger"></i> <p-avatar image="assets/demo/images/avatar/amyelsner.png" size="large" shape="circle"></p-avatar>
</div> <p-avatar image="assets/demo/images/avatar/asiyajavayant.png" size="large" shape="circle"></p-avatar>
<p-avatar image="assets/demo/images/avatar/onyamalimba.png" size="large" shape="circle"></p-avatar>
<p-avatar image="assets/demo/images/avatar/ionibowcher.png" size="large" shape="circle"></p-avatar>
<p-avatar image="assets/demo/images/avatar/xuxuefeng.png" size="large"shape="circle"></p-avatar>
<p-avatar label="+2" shape="circle" size="large" [style]="{'background-color':'#9c27b0', 'color': '#ffffff'}"></p-avatar>
</p-avatarGroup>
<div class="font-semibold my-4">Label - Circle</div>
<h5>Inline Button Badge</h5>
<div class="flex flex-wrap gap-2">
<p-button label="Emails" badge="8"></p-button>
<p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
</div>
<h5>Sizes</h5>
<div class="flex flex-wrap gap-2 align-items-end">
<p-overlay-badge value="2"></p-overlay-badge>
<p-overlay-badge value="4" badgeSize="large" severity="warn"></p-overlay-badge>
<p-overlay-badge value="6" badgeSize="xlarge" severity="success"></p-overlay-badge>
</div>
</div>
<div class="card">
<h4>Avatar</h4>
<h5>Avatar Group</h5>
<p-avatarGroup styleClass="mb-3">
<p-avatar image="assets/demo/images/avatar/amyelsner.png" size="large" shape="circle"></p-avatar>
<p-avatar image="assets/demo/images/avatar/asiyajavayant.png" size="large" shape="circle"></p-avatar>
<p-avatar image="assets/demo/images/avatar/onyamalimba.png" size="large" shape="circle"></p-avatar>
<p-avatar image="assets/demo/images/avatar/ionibowcher.png" size="large" shape="circle"></p-avatar>
<p-avatar image="assets/demo/images/avatar/xuxuefeng.png" size="large"shape="circle"></p-avatar>
<p-avatar label="+2" shape="circle" size="large" [style]="{'background-color':'#9c27b0', 'color': '#ffffff'}"></p-avatar>
</p-avatarGroup>
<h5>Label - Circle</h5>
<div class="flex flex-wrap gap-2 align-items-end">
<p-avatar label="P" size="xlarge" shape="circle"></p-avatar> <p-avatar label="P" size="xlarge" shape="circle"></p-avatar>
<p-avatar label="V" size="large" [style]="{'background-color':'#2196F3', 'color': '#ffffff'}" shape="circle"></p-avatar> <p-avatar label="V" size="large" [style]="{'background-color':'#2196F3', 'color': '#ffffff'}" shape="circle"></p-avatar>
<p-avatar label="U" [style]="{'background-color': '#9c27b0', 'color': '#ffffff'}" shape="circle"></p-avatar> <p-avatar label="U" [style]="{'background-color': '#9c27b0', 'color': '#ffffff'}" shape="circle"></p-avatar>
<div class="font-semibold my-4">Icon - Badge</div>
<p-overlaybadge value="4" severity="danger" class="inline-flex">
<p-avatar label="U" size="xlarge" />
</p-overlaybadge>
</div> </div>
<h5>Icon - Badge</h5> <div class="card">
<p-avatar icon="pi pi-user" pBadge value="4" severity="success" size="xlarge"></p-avatar> <div class="font-semibold text-xl mb-4">ScrollTop</div>
</div> <p-scrollPanel [style]="{width: '250px', height: '200px'}">
<p>
<div class="card"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur
<h4>ScrollTop</h4> adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor
<p-scrollPanel [style]="{width: '250px', height: '200px'}"> augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet
<p> nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
Vitae et leo duis ut diam. </p>
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut. <p-scrollTop target="parent" styleClass="custom-scrolltop" [threshold]="100" icon="pi pi-arrow-up"></p-scrollTop>
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. </p-scrollPanel>
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
Mattis aliquam faucibus purus in massa tempor nec.
</p>
<p-scrollTop target="parent" styleClass="custom-scrolltop" [threshold]="100" icon="pi pi-arrow-up"></p-scrollTop>
</p-scrollPanel>
</div>
</div>
<div class="col-12 lg:col-6">
<div class="card">
<h4>Tag</h4>
<h5>Tags</h5>
<div class="flex flex-wrap gap-2">
<p-tag value="Primary"></p-tag>
<p-tag severity="success" value="Success"></p-tag>
<p-tag severity="info" value="Info"></p-tag>
<p-tag severity="warn" value="Warning"></p-tag>
<p-tag severity="danger" value="Danger"></p-tag>
</div>
<h5>Pills</h5>
<div class="flex flex-wrap gap-2">
<p-tag value="Primary" [rounded]="true"></p-tag>
<p-tag severity="success" value="Success" [rounded]="true"></p-tag>
<p-tag severity="info" value="Info" [rounded]="true"></p-tag>
<p-tag severity="warn" value="Warning" [rounded]="true"></p-tag>
<p-tag severity="danger" value="Danger" [rounded]="true"></p-tag>
</div>
<h5>Icons</h5>
<div class="flex flex-wrap gap-2">
<p-tag icon="pi pi-user" value="Primary"></p-tag>
<p-tag icon="pi pi-check" severity="success" value="Success"></p-tag>
<p-tag icon="pi pi-info-circle" severity="info" value="Info"></p-tag>
<p-tag con="pi pi-exclamation-triangle" severity="warn" value="Warning"></p-tag>
<p-tag icon="pi pi-times" severity="danger" value="Danger"></p-tag>
</div> </div>
</div> </div>
<div class="md:w-1/2">
<div class="card">
<div class="font-semibold text-xl mb-4">Tag</div>
<div class="font-semibold mb-4">Default</div>
<div class="flex gap-2">
<p-tag value="Primary"></p-tag>
<p-tag severity="success" value="Success"></p-tag>
<p-tag severity="info" value="Info"></p-tag>
<p-tag severity="warn" value="Warning"></p-tag>
<p-tag severity="danger" value="Danger"></p-tag>
</div>
<div class="card"> <div class="font-semibold my-4">Pills</div>
<h4>Chip</h4> <div class="flex gap-2">
<h5>Basic</h5> <p-tag value="Primary" [rounded]="true"></p-tag>
<div class="flex flex-wrap align-items-center"> <p-tag severity="success" value="Success" [rounded]="true"></p-tag>
<p-chip label="Action" styleClass="m-1"></p-chip> <p-tag severity="info" value="Info" [rounded]="true"></p-tag>
<p-chip label="Comedy" styleClass="m-1"></p-chip> <p-tag severity="warn" value="Warning" [rounded]="true"></p-tag>
<p-chip label="Mystery" styleClass="m-1"></p-chip> <p-tag severity="danger" value="Danger" [rounded]="true"></p-tag>
<p-chip label="Thriller" styleClass="m-1" [removable]="true"></p-chip> </div>
<div class="font-semibold my-4">Icons</div>
<div class="flex gap-2">
<p-tag icon="pi pi-user" value="Primary"></p-tag>
<p-tag icon="pi pi-check" severity="success" value="Success"></p-tag>
<p-tag icon="pi pi-info-circle" severity="info" value="Info"></p-tag>
<p-tag con="pi pi-exclamation-triangle" severity="warn" value="Warning"></p-tag>
<p-tag icon="pi pi-times" severity="danger" value="Danger"></p-tag>
</div>
</div> </div>
<h5>Icon</h5> <div class="card">
<div class="flex flex-wrap align-items-center"> <div class="font-semibold text-xl mb-4">Chip</div>
<p-chip label="Apple" icon="pi pi-apple" styleClass="m-1"></p-chip> <div class="font-semibold mb-4">Basic</div>
<p-chip label="Facebook" icon="pi pi-facebook" styleClass="m-1"></p-chip> <div class="flex items-center flex-col sm:flex-row">
<p-chip label="Google" icon="pi pi-google" styleClass="m-1"></p-chip> <p-chip label="Action" styleClass="m-1"></p-chip>
<p-chip label="Microsoft" icon="pi pi-microsoft" styleClass="m-1" [removable]="true"></p-chip> <p-chip label="Comedy" styleClass="m-1"></p-chip>
<p-chip label="Mystery" styleClass="m-1"></p-chip>
<p-chip label="Thriller" styleClass="m-1" [removable]="true"></p-chip>
</div>
<div class="font-semibold my-4">Icon</div>
<div class="flex items-center flex-col sm:flex-row">
<p-chip label="Apple" icon="pi pi-apple" styleClass="m-1"></p-chip>
<p-chip label="Facebook" icon="pi pi-facebook" styleClass="m-1"></p-chip>
<p-chip label="Google" icon="pi pi-google" styleClass="m-1"></p-chip>
<p-chip label="Microsoft" icon="pi pi-microsoft" styleClass="m-1" [removable]="true"></p-chip>
</div>
<div class="font-semibold my-4">Image</div>
<div class="flex items-center flex-col sm:flex-row">
<p-chip label="Amy Elsner" image="assets/demo/images/avatar/amyelsner.png" styleClass="m-1"></p-chip>
<p-chip label="Asiya Javayant" image="assets/demo/images/avatar/asiyajavayant.png" styleClass="m-1"></p-chip>
<p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="m-1"></p-chip>
<p-chip label="Xuxue Feng" image="assets/demo/images/avatar/xuxuefeng.png" styleClass="m-1" [removable]="true"></p-chip>
</div>
</div> </div>
<h5>Image</h5> <div class="card">
<div class="flex flex-wrap align-items-center"> <div class="font-semibold text-xl mb-4">Skeleton</div>
<p-chip label="Amy Elsner" image="assets/demo/images/avatar/amyelsner.png" styleClass="m-1"></p-chip> <div class="rounded-border border border-surface p-6">
<p-chip label="Asiya Javayant" image="assets/demo/images/avatar/asiyajavayant.png" styleClass="m-1"></p-chip> <div class="flex mb-4">
<p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="m-1"></p-chip> <p-skeleton shape="circle" size="4rem" styleClass="mr-2"></p-skeleton>
<p-chip label="Xuxue Feng" image="assets/demo/images/avatar/xuxuefeng.png" styleClass="m-1" [removable]="true"></p-chip> <div>
</div> <p-skeleton width="10rem" styleClass="mb-2"></p-skeleton>
<p-skeleton width="5rem" styleClass="mb-2"></p-skeleton>
<h5>Styling</h5> <p-skeleton height=".5rem"></p-skeleton>
<div class="flex flex-wrap align-items-center"> </div>
<p-chip label="Action" styleClass="m-1 custom-chip"></p-chip> </div>
<p-chip label="Comedy" styleClass="m-1 custom-chip"></p-chip> <p-skeleton width="100%" height="150px"></p-skeleton>
<p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="m-1 custom-chip"></p-chip> <div class="flex justify-between mt-4">
<p-chip label="Xuxue Feng" image="assets/demo/images/avatar/xuxuefeng.png" [removable]="true" styleClass="m-1 custom-chip"></p-chip> <p-skeleton width="4rem" height="2rem"></p-skeleton>
</div> <p-skeleton width="4rem" height="2rem"></p-skeleton>
</div>
<div class="card">
<h4>Skeleton</h4>
<div class="border-round border-1 surface-border p-4">
<div class="flex mb-3">
<p-skeleton shape="circle" size="4rem" styleClass="mr-2"></p-skeleton>
<div>
<p-skeleton width="10rem" styleClass="mb-2"></p-skeleton>
<p-skeleton width="5rem" styleClass="mb-2"></p-skeleton>
<p-skeleton height=".5rem"></p-skeleton>
</div> </div>
</div> </div>
<p-skeleton width="100%" height="150px"></p-skeleton>
<div class="flex justify-content-between mt-3">
<p-skeleton width="4rem" height="2rem"></p-skeleton>
<p-skeleton width="4rem" height="2rem"></p-skeleton>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </template>
`, `,
}) })
export class MiscDoc { export class MiscDoc {

3
src/views/uikit/overlaydoc.ts
View File

@@ -9,10 +9,11 @@ import { ConfirmPopupModule } from 'primeng/confirmpopup';
import { InputTextModule } from 'primeng/inputtext'; import { InputTextModule } from 'primeng/inputtext';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { Product, ProductService } from '@/src/service/product.service'; import { Product, ProductService } from '@/src/service/product.service';
import { TooltipModule } from 'primeng/tooltip';
@Component({ @Component({
standalone: true, standalone: true,
imports:[ToastModule, DialogModule, ButtonModule, DrawerModule, PopoverModule, ConfirmPopupModule, InputTextModule, FormsModule], imports:[ToastModule, DialogModule, ButtonModule, DrawerModule, PopoverModule, ConfirmPopupModule, InputTextModule, FormsModule, TooltipModule],
template:` template:`
<div class="flex flex-col md:flex-row gap-8"> <div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2"> <div class="md:w-1/2">

342
src/views/uikit/panelsdoc.ts
View File

@@ -34,224 +34,178 @@ import { TabsModule } from 'primeng/tabs';
TabsModule, TabsModule,
], ],
template: ` template: `
<div class="grid"> <div class="flex flex-col">
<div class="col-12">
<div class="card"> <div class="card">
<h5>Toolbar</h5> <div class="font-semibold text-xl mb-4">Toolbar</div>
<p-toolbar> <p-toolbar>
<div class="p-toolbar-group-left flex flex-wrap"> <ng-template #start>
<button pButton type="button" label="New" icon="pi pi-plus" class="mr-2"></button> <p-button icon="pi pi-plus" class="mr-2" severity="secondary" text />
<button pButton type="button" label="Open" icon="pi pi-folder-open" class="p-button-secondary mr-2"></button> <p-button icon="pi pi-print" class="mr-2" severity="secondary" text />
<p-button icon="pi pi-upload" severity="secondary" text />
</ng-template>
<i class="pi pi-bars p-toolbar-separator"></i> <template #center>
<p-iconfield>
<p-inputicon>
<i class="pi pi-search" />
</p-inputicon>
<input pInputText placeholder="Search" />
</p-iconfield>
</template>
<button pButton type="button" icon="pi pi-check" class="p-button-success mr-2"></button> <ng-template #end><p-splitbutton label="Save" [model]="items"></p-splitbutton></ng-template>
<button pButton type="button" icon="pi pi-trash" class="p-button-warning mr-2"></button>
<button pButton type="button" icon="pi pi-print" class="p-button-danger"></button>
</div>
<div class="p-toolbar-group-right">
<p-splitButton label="Options" icon="pi pi-check" [model]="items"></p-splitButton>
</div>
</p-toolbar> </p-toolbar>
</div> </div>
</div>
<div class="col-12 md:col-6"> <div class="flex flex-col md:flex-row gap-8">
<div class="card"> <div class="md:w-1/2">
<h5>AccordionPanel</h5> <div class="card">
<p-accordion value="0"> <div class="font-semibold text-xl mb-4">Accordion</div>
<p-accordion-panel value="0"> <p-accordion value="0">
<p-accordion-header>Header I</p-accordion-header> <p-accordion-panel value="0">
<p-accordion-content> <p-accordion-header>Header I</p-accordion-header>
<p class="m-0"> <p-accordion-content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo <p class="m-0">
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
laborum. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
</p> laborum.
</p-accordion-content> </p>
</p-accordion-panel> </p-accordion-content>
</p-accordion-panel>
<p-accordion-panel value="1"> <p-accordion-panel value="1">
<p-accordion-header>Header II</p-accordion-header> <p-accordion-header>Header II</p-accordion-header>
<p-accordion-content> <p-accordion-content>
<p class="m-0"> <p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p> </p>
</p-accordion-content> </p-accordion-content>
</p-accordion-panel> </p-accordion-panel>
<p-accordion-panel value="2"> <p-accordion-panel value="2">
<p-accordion-header>Header III</p-accordion-header> <p-accordion-header>Header III</p-accordion-header>
<p-accordion-content> <p-accordion-content>
<p class="m-0"> <p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p> </p>
</p-accordion-content> </p-accordion-content>
</p-accordion-panel> </p-accordion-panel>
</p-accordion> </p-accordion>
</div> </div>
<div class="card">
<div class="card"> <div class="font-semibold text-xl mb-4">Tabs</div>
<h5>Tabs</h5> <p-tabs value="0">
<p-tabs value="0"> <p-tablist>
<p-tablist> <p-tab value="0">Header I</p-tab>
<p-tab value="0">Header I</p-tab> <p-tab value="1">Header II</p-tab>
<p-tab value="1">Header II</p-tab> <p-tab value="2">Header III</p-tab>
<p-tab value="2">Header III</p-tab> </p-tablist>
</p-tablist> <p-tabpanels>
<p-tabpanels> <p-tabpanel value="0">
<p-tabpanel value="0"> <p class="m-0">
<p class="m-0"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
laborum. </p>
</p> </p-tabpanel>
</p-tabpanel> <p-tabpanel value="1">
<p-tabpanel value="1"> <p class="m-0">
<p class="m-0"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. </p>
</p> </p-tabpanel>
</p-tabpanel> <p-tabpanel value="2">
<p-tabpanel value="2"> <p class="m-0">
<p class="m-0"> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. </p>
</p> </p-tabpanel>
</p-tabpanel> </p-tabpanels>
</p-tabpanels> </p-tabs>
</p-tabs> </div>
</div>
</div>
<div class="col-12 md:col-6">
<div class="card">
<h5>Panel</h5>
<p-panel header="Header" [toggleable]="true" class="line-height-3 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p-panel>
</div>
<div class="card">
<h5>Fieldset</h5>
<p-fieldset legend="Legend" [toggleable]="true" class="line-height-3 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p-fieldset>
</div>
<div class="card">
<div class="flex align-items-center justify-content-between mb-0">
<h5>Card</h5>
<p-menu #menu [popup]="true" [model]="cardMenu"></p-menu>
<button pButton type="button" icon="pi pi-plus" [text]="true"
(click)="menu.toggle($event)"></button>
</div> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <div class="md:w-1/2 mt-6 md:mt-0">
dolore magna aliqua. <div class="card">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo <div class="font-semibold text-xl mb-4">Panel</div>
consequat. <p-panel header="Header" [toggleable]="true" class="line-height-3 m-0">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est dolore magna aliqua.
laborum.</p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</div> consequat.
</div> 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
<div class="col-12"> laborum.
<div class="card"> </p-panel>
<h5>Divider</h5>
<div class="grid">
<div class="col-5 flex align-items-center justify-content-center">
<div class="p-fluid">
<div class="field">
<label for="username">Username</label>
<input pInputText id="username" type="text"/>
</div>
<div class="field">
<label for="password">Password</label>
<input pInputText id="password" type="password"/>
</div>
<p-button label="Login" class="mt-2"></p-button>
</div>
</div> </div>
<div class="col-2"> <div class="card">
<p-divider layout="vertical"> <div class="font-semibold text-xl mb-4">Fieldset</div>
<b>OR</b> <p-fieldset legend="Legend" [toggleable]="true" class="line-height-3 m-0">
</p-divider> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
</div> dolore magna aliqua.
<div class="col-5 align-items-center justify-content-center"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
<p class="line-height-3 m-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, consequat.
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione laborum.
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p> </p-fieldset>
<p-divider layout="horizontal" align="center">
<span class="p-tag">Badge</span>
</p-divider>
<p class="line-height-3 m-0">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est
laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
<p-divider align="right">
<p-button label="Button" icon="pi pi-search" styleClass="p-button-outlined"></p-button>
</p-divider>
<p class="line-height-3 m-0">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur
a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
doloribus asperiores repellat.
Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien.
Morbi dapibus luctus odio.</p>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="col-12"> <div class="card mt-8">
<div class="card"> <div class="font-semibold text-xl mb-4">Divider</div>
<h5>Splitter</h5> <div class="flex flex-col md:flex-row">
<p-splitter [style]="{'height': '300px'}" [panelSizes]="[30,70]"> <div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-3 py-5">
<ng-template pTemplate> <div class="flex flex-col gap-2">
<div class="col flex align-items-center justify-content-center"> <label for="username">Username</label>
Panel 1 <input pInputText id="username" type="text"/>
</div> </div>
<div class="flex flex-col gap-2">
<label for="password">Password</label>
<input pInputText id="password" type="password"/>
</div>
<div class="flex">
<p-button label="Login" icon="pi pi-user" class="w-full max-w-[17.35rem] mx-auto"></p-button>
</div>
</div>
<div class="w-full md:w-2/12">
<p-divider layout="vertical" class="!hidden md:!flex"><b>OR</b></p-divider>
<p-divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></p-divider>
</div>
<div class="w-full md:w-5/12 flex items-center justify-center py-5">
<p-button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></p-button>
</div>
</div>
</div>
<div class="card">
<div class="font-semibold text-xl mb-4">Splitter</div>
<p-splitter [style]="{ height: '300px' }" [panelSizes]="[20, 80]" [minSizes]="[10, 0]" styleClass="mb-8">
<ng-template #panel>
<div class="col flex items-center justify-center">Panel 1</div>
</ng-template> </ng-template>
<ng-template pTemplate> <ng-template #panel>
<p-splitter layout="vertical" [panelSizes]="[50,50]" [minSizes]="[10,10]"> <p-splitter layout="vertical" [panelSizes]="[50, 50]">
<ng-template pTemplate> <ng-template #panel>
<div class="col flex align-items-center justify-content-center"> <div style="flex-grow: 1;" class="flex items-center justify-center">Panel 2</div>
Panel 2
</div>
</ng-template> </ng-template>
<ng-template pTemplate> <ng-template #panel>
<div class="col flex align-items-center justify-content-center"> <p-splitter [panelSizes]="[20, 80]">
Panel 3 <ng-template #panel>
</div> <div class="col flex items-center justify-center">Panel 3</div>
</ng-template>
<ng-template #panel>
<div class="col flex items-center justify-center">Panel 4</div>
</ng-template>
</p-splitter>
</ng-template> </ng-template>
</p-splitter> </p-splitter>
</ng-template> </ng-template>
</p-splitter> </p-splitter>
</div> </div>
</div> </div>
</div>
`, `,
}) })
export class PanelsDoc { export class PanelsDoc {

663
src/views/uikit/tabledoc.ts
View File

@@ -14,6 +14,7 @@ import { ButtonModule } from 'primeng/button';
import { RatingModule } from 'primeng/rating'; import { RatingModule } from 'primeng/rating';
import { Customer, CustomerService, Representative } from '@/src/service/customer.service'; import { Customer, CustomerService, Representative } from '@/src/service/customer.service';
import { Product, ProductService } from '@/src/service/product.service'; import { Product, ProductService } from '@/src/service/product.service';
import { RippleModule } from 'primeng/ripple';
interface expandedRows { interface expandedRows {
[key: string]: boolean; [key: string]: boolean;
@@ -21,312 +22,370 @@ interface expandedRows {
@Component({ @Component({
standalone: true, standalone: true,
imports:[TableModule, MultiSelectModule, SelectModule, InputTextModule, SliderModule,ProgressBarModule,ToggleButtonModule,ToastModule, CommonModule, FormsModule,ButtonModule,RatingModule], imports:[TableModule, MultiSelectModule, SelectModule, InputTextModule, SliderModule,ProgressBarModule,ToggleButtonModule,ToastModule, CommonModule, FormsModule,ButtonModule,RatingModule, RippleModule],
template:` template: `
<div class="grid"> <div class="card">
<div class="col-12"> <div class="font-semibold text-xl mb-4">Filtering</div>
<div class="card"> <p-table #dt1 [value]="customers1" dataKey="id" [rows]="10" [loading]="loading" [rowHover]="true"
<h5>Filter Menu</h5> styleClass="p-datatable-gridlines" [paginator]="true"
<p-table #dt1 [value]="customers1" dataKey="id" [rows]="10" [loading]="loading" [rowHover]="true" styleClass="p-datatable-gridlines" [paginator]="true" [globalFilterFields]="['name','country.name','representative.name','status']" responsiveLayout="scroll"> [globalFilterFields]="['name','country.name','representative.name','status']"
<ng-template pTemplate="caption"> responsiveLayout="scroll">
<div class="flex justify-content-between flex-column sm:flex-row"> <ng-template pTemplate="caption">
<button pButton label="Clear" class="p-button-outlined mb-2" icon="pi pi-filter-slash" (click)="clear(dt1)"></button> <div class="flex justify-content-between flex-column sm:flex-row">
<span class="p-input-icon-left mb-2"> <button pButton label="Clear" class="p-button-outlined mb-2" icon="pi pi-filter-slash"
<i class="pi pi-search"></i> (click)="clear(dt1)"></button>
<input pInputText type="text" #filter (input)="onGlobalFilter(dt1, $event)" placeholder="Search Keyword" class="w-full"/> <span class="p-input-icon-left mb-2">
</span> <i class="pi pi-search"></i>
</div> <input pInputText type="text" #filter (input)="onGlobalFilter(dt1, $event)" placeholder="Search Keyword"
</ng-template> class="w-full" />
<ng-template #header> </span>
<tr> </div>
<th style="min-width: 12rem"> </ng-template>
<div class="flex justify-content-between align-items-center"> <ng-template #header>
Name <tr>
<p-columnFilter type="text" field="name" display="menu" placeholder="Search by name"></p-columnFilter> <th style="min-width: 12rem">
</div> <div class="flex justify-content-between align-items-center">
</th> Name
<th style="min-width: 12rem"> <p-columnFilter type="text" field="name" display="menu"
<div class="flex justify-content-between align-items-center"> placeholder="Search by name"></p-columnFilter>
Country </div>
<p-columnFilter type="text" field="country.name" display="menu" placeholder="Search by country"></p-columnFilter> </th>
</div> <th style="min-width: 12rem">
</th> <div class="flex justify-content-between align-items-center">
<th style="min-width: 14rem"> Country
<div class="flex justify-content-between align-items-center"> <p-columnFilter type="text" field="country.name" display="menu"
Agent placeholder="Search by country"></p-columnFilter>
<p-columnFilter field="representative" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false"> </div>
<ng-template #header> </th>
<div class="px-3 pt-3 pb-0"> <th style="min-width: 14rem">
<span class="font-bold">Agent Picker</span> <div class="flex justify-content-between align-items-center">
</div> Agent
</ng-template> <p-columnFilter field="representative" matchMode="in" display="menu"
<ng-template #filter let-value let-filter="filterCallback"> [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
<p-multiselect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name"> <ng-template #header>
<ng-template let-option #item> <div class="px-3 pt-3 pb-0">
<div class="p-multiselect-representative-option"> <span class="font-bold">Agent Picker</span>
<img [alt]="option.label" src="assets/demo/images/avatar/{{option.image}}" width="32" style="vertical-align: middle" /> </div>
<span class="ml-2">{{option.name}}</span> </ng-template>
</div> <ng-template #filter let-value let-filter="filterCallback">
</ng-template> <p-multiselect [ngModel]="value" [options]="representatives" placeholder="Any"
</p-multiselect> (onChange)="filter($event.value)" optionLabel="name">
</ng-template> <ng-template let-option #item>
</p-columnFilter> <div class="p-multiselect-representative-option">
</div> <img [alt]="option.label"
</th> src="assets/demo/images/avatar/{{option.image}}" width="32"
<th style="min-width: 10rem"> style="vertical-align: middle" />
<div class="flex justify-content-between align-items-center"> <span class="ml-2">{{ option.name }}</span>
Date </div>
<p-columnFilter type="date" field="date" display="menu" placeholder="mm/dd/yyyy"></p-columnFilter> </ng-template>
</div> </p-multiselect>
</th> </ng-template>
<th style="min-width: 10rem"> </p-columnFilter>
<div class="flex justify-content-between align-items-center"> </div>
Balance </th>
<p-columnFilter type="numeric" field="balance" display="menu" currency="USD"></p-columnFilter> <th style="min-width: 10rem">
</div> <div class="flex justify-content-between align-items-center">
</th> Date
<th style="min-width: 12rem"> <p-columnFilter type="date" field="date" display="menu"
<div class="flex justify-content-between align-items-center"> placeholder="mm/dd/yyyy"></p-columnFilter>
Status </div>
<p-columnFilter field="status" matchMode="equals" display="menu"> </th>
<ng-template #filter let-value let-filter="filterCallback"> <th style="min-width: 10rem">
<p-select [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any" [style]="{'min-width': '12rem'}" > <div class="flex justify-content-between align-items-center">
<ng-template let-option #item> Balance
<span [class]="'customer-badge status-' + option.value">{{option.label}}</span> <p-columnFilter type="numeric" field="balance" display="menu"
</ng-template> currency="USD"></p-columnFilter>
</p-select> </div>
</ng-template> </th>
</p-columnFilter> <th style="min-width: 12rem">
</div> <div class="flex justify-content-between align-items-center">
</th> Status
<th style="min-width: 12rem"> <p-columnFilter field="status" matchMode="equals" display="menu">
<div class="flex justify-content-between align-items-center"> <ng-template #filter let-value let-filter="filterCallback">
Activity <p-select [ngModel]="value" [options]="statuses"
<p-columnFilter field="activity" matchMode="between" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false"> (onChange)="filter($event.value)" placeholder="Any"
<ng-template #filter let-filter="filterCallback"> [style]="{'min-width': '12rem'}">
<p-slider [ngModel]="activityValues" [range]="true" (onSlideEnd)="filter($event.values)" styleClass="m-3" [style]="{'min-width': '12rem'}" ></p-slider> <ng-template let-option #item>
<div class="flex align-items-center justify-content-between px-2"> <span
<span>{{activityValues[0]}}</span> [class]="'customer-badge status-' + option.value">{{ option.label }}</span>
<span>{{activityValues[1]}}</span> </ng-template>
</div> </p-select>
</ng-template> </ng-template>
</p-columnFilter> </p-columnFilter>
</div> </div>
</th> </th>
<th style="min-width: 8rem"> <th style="min-width: 12rem">
<div class="flex justify-content-between align-items-center"> <div class="flex justify-content-between align-items-center">
Verified Activity
<p-columnFilter type="boolean" field="verified" display="menu"></p-columnFilter> <p-columnFilter field="activity" matchMode="between" display="menu"
</div> [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
</th> <ng-template #filter let-filter="filterCallback">
</tr> <p-slider [ngModel]="activityValues" [range]="true"
</ng-template> (onSlideEnd)="filter($event.values)" styleClass="m-3"
<ng-template #body let-customer> [style]="{'min-width': '12rem'}"></p-slider>
<tr> <div class="flex align-items-center justify-content-between px-2">
<td> <span>{{ activityValues[0] }}</span>
{{customer.name}} <span>{{ activityValues[1] }}</span>
</td> </div>
<td> </ng-template>
<img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30"> </p-columnFilter>
<span class="image-text ml-2">{{customer.country.name}}</span> </div>
</td> </th>
<td> <th style="min-width: 8rem">
<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle"/> <div class="flex justify-content-between align-items-center">
<span class="image-text ml-2">{{customer.representative.name}}</span> Verified
</td> <p-columnFilter type="boolean" field="verified" display="menu"></p-columnFilter>
<td> </div>
{{customer.date | date: 'MM/dd/yyyy'}} </th>
</td> </tr>
<td> </ng-template>
{{customer.balance | currency:'USD':'symbol'}} <ng-template #body let-customer>
</td> <tr>
<td> <td>
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span> {{ customer.name }}
</td> </td>
<td> <td>
<p-progressbar [value]="customer.activity" [showValue]="false" [style]="{'height': '0.5rem'}" /> <img src="assets/demo/images/flag/flag_placeholder.png"
</td> [class]="'flag flag-' + customer.country.code" width="30">
<td class="text-center"> <span class="image-text ml-2">{{ customer.country.name }}</span>
<i class="pi" [ngClass]="{'true-icon pi-check-circle text-green-500': customer.verified, 'false-icon pi-times-circle text-pink-500': !customer.verified}"></i> </td>
</td> <td>
</tr> <img [alt]="customer.representative.name"
</ng-template> src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
<ng-template #emptymessage> style="vertical-align: middle" />
<tr> <span class="image-text ml-2">{{ customer.representative.name }}</span>
<td colspan="8">No customers found.</td> </td>
</tr> <td>
</ng-template> {{ customer.date | date: 'MM/dd/yyyy' }}
<ng-template #loadingbody> </td>
<tr> <td>
<td colspan="8">Loading customers data. Please wait.</td> {{ customer.balance | currency:'USD':'symbol' }}
</tr> </td>
</ng-template> <td>
</p-table> <span [class]="'customer-badge status-' + customer.status">{{ customer.status }}</span>
</div> </td>
<td>
<p-progressbar [value]="customer.activity" [showValue]="false"
[style]="{'height': '0.5rem'}" />
</td>
<td class="text-center">
<i class="pi"
[ngClass]="{'true-icon pi-check-circle text-green-500': customer.verified, 'false-icon pi-times-circle text-pink-500': !customer.verified}"></i>
</td>
</tr>
</ng-template>
<ng-template #emptymessage>
<tr>
<td colspan="8">No customers found.</td>
</tr>
</ng-template>
<ng-template #loadingbody>
<tr>
<td colspan="8">Loading customers data. Please wait.</td>
</tr>
</ng-template>
</p-table>
</div>
</div> <div class="card">
<div class="font-semibold text-xl mb-4">Frozen Columns</div>
<p-togglebutton [(ngModel)]="idFrozen" [onIcon]="'pi pi-lock'" offIcon="pi pi-lock-open"
[onLabel]="'Unfreeze Id'" offLabel="Freeze Id"
[style]="{'width': '12rem'}"></p-togglebutton>
<div class="col-12"> <p-table [value]="customers3" scrollDirection="both" [scrollable]="true" scrollHeight="400px"
<div class="card"> styleClass="mt-3" responsiveLayout="scroll">
<h5>Frozen Columns</h5> <ng-template pTemplate="header">
<p-togglebutton [(ngModel)]="idFrozen" [onIcon]="'pi pi-lock'" offIcon="pi pi-lock-open" [onLabel]="'Unfreeze Id'" offLabel="Freeze Id" [style]="{'width': '12rem'}"></p-togglebutton> <tr>
<th style="width:200px" pFrozenColumn>Name</th>
<th style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">Id</th>
<th style="width:200px">Country</th>
<th style="width:200px">Date</th>
<th style="width:200px">Company</th>
<th style="width:200px">Status</th>
<th style="width:200px">Activity</th>
<th style="width:200px">Representative</th>
<th style="width:200px" pFrozenColumn alignFrozen="right">Balance</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td style="width:200px" pFrozenColumn class="font-bold">{{ customer.name }}</td>
<td style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen"
[ngClass]="{'font-bold': idFrozen}">{{ customer.id }}
</td>
<td style="width:200px">
<img src="assets/demo/images/flag/flag_placeholder.png"
[class]="'flag flag-' + customer.country.code" width="30">
<span class="image-text ml-2">{{ customer.country.name }}</span>
</td>
<td style="width:200px">{{ customer.date }}</td>
<td style="width:200px">{{ customer.company }}</td>
<td style="width:200px">
<span [class]="'customer-badge status-' + customer.status">{{ customer.status }}</span>
</td>
<td style="width:200px">{{ customer.activity }}</td>
<td style="width:200px">
<img [alt]="customer.representative.name"
src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
style="vertical-align: middle" />
<span class="image-text ml-2">{{ customer.representative.name }}</span>
</td>
<td style="width:200px" pFrozenColumn class="font-bold"
alignFrozen="right">{{ formatCurrency(customer.balance) }}
</td>
</tr>
</ng-template>
</p-table>
</div>
<p-table [value]="customers3" scrollDirection="both" [scrollable]="true" scrollHeight="400px" styleClass="mt-3" responsiveLayout="scroll"> <div class="card">
<ng-template pTemplate="header"> <div class="font-semibold text-xl mb-4">Row Expansion</div>
<tr> <p-table [value]="products" dataKey="name" [expandedRowKeys]="expandedRows" responsiveLayout="scroll">
<th style="width:200px" pFrozenColumn>Name</th> <ng-template #caption>
<th style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">Id</th> <button pButton icon="pi pi-fw {{isExpanded ? 'pi-minus' : 'pi-plus'}}"
<th style="width:200px">Country</th> label="{{isExpanded ? 'Collapse All' : 'Expand All'}}" (click)="expandAll()"></button>
<th style="width:200px">Date</th> <div class="flex table-header">
<th style="width:200px">Company</th> </div>
<th style="width:200px">Status</th> </ng-template>
<th style="width:200px">Activity</th> <ng-template #header>
<th style="width:200px">Representative</th> <tr>
<th style="width:200px" pFrozenColumn alignFrozen="right">Balance</th> <th style="width: 3rem"></th>
</tr> <th pSortableColumn="name">Name
</ng-template> <p-sortIcon field="name"></p-sortIcon>
<ng-template pTemplate="body" let-customer> </th>
<tr> <th>Image</th>
<td style="width:200px" pFrozenColumn class="font-bold">{{customer.name}}</td> <th pSortableColumn="price">Price
<td style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen" [ngClass]="{'font-bold': idFrozen}">{{customer.id}}</td> <p-sortIcon field="price"></p-sortIcon>
<td style="width:200px"> </th>
<img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30"> <th pSortableColumn="category">Category
<span class="image-text ml-2">{{customer.country.name}}</span> <p-sortIcon field="category"></p-sortIcon>
</td> </th>
<td style="width:200px">{{customer.date}}</td> <th pSortableColumn="rating">Reviews
<td style="width:200px">{{customer.company}}</td> <p-sortIcon field="rating"></p-sortIcon>
<td style="width:200px"> </th>
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span> <th pSortableColumn="inventoryStatus">Status
</td> <p-sortIcon field="inventoryStatus"></p-sortIcon>
<td style="width:200px">{{customer.activity}}</td> </th>
<td style="width:200px"> </tr>
<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle"/> </ng-template>
<span class="image-text ml-2">{{customer.representative.name}}</span> <ng-template #body let-product let-expanded="expanded">
</td> <tr>
<td style="width:200px" pFrozenColumn class="font-bold" alignFrozen="right">{{formatCurrency(customer.balance)}}</td> <td>
</tr> <button type="button" pButton pRipple [pRowToggler]="product"
</ng-template> class="p-button-text p-button-rounded p-button-plain"
</p-table> [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
</div> </td>
</div> <td style="min-width: 12rem;">{{ product.name }}</td>
<td><img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100"
class="shadow-4" /></td>
<td style="min-width: 8rem;">{{ product.price | currency:'USD' }}</td>
<td style="min-width: 10rem;">{{ product.category }}</td>
<td style="min-width: 10rem;">
<p-rating [ngModel]="product.rating" [readonly]="true"></p-rating>
</td>
<td><span
[class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{ product.inventoryStatus }}</span>
</td>
</tr>
</ng-template>
<ng-template #rowexpansion let-product>
<tr>
<td colspan="7">
<div class="p-3">
<p-table [value]="product.orders" dataKey="id" responsiveLayout="scroll">
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="id">Id
<p-sortIcon field="price"></p-sortIcon>
</th>
<th pSortableColumn="customer">Customer
<p-sortIcon field="customer"></p-sortIcon>
</th>
<th pSortableColumn="date">Date
<p-sortIcon field="date"></p-sortIcon>
</th>
<th pSortableColumn="amount">Amount
<p-sortIcon field="amount"></p-sortIcon>
</th>
<th pSortableColumn="stats">Status
<p-sortIcon field="status"></p-sortIcon>
</th>
<th style="width: 4rem"></th>
</tr>
</ng-template>
<ng-template #body let-order>
<tr>
<td>{{ order.id }}</td>
<td>{{ order.customer }}</td>
<td>{{ order.date }}</td>
<td>{{ order.amount | currency:'USD' }}</td>
<td><span
[class]="'order-badge order-' + order.status.toLowerCase()">{{ order.status }}</span>
</td>
<td>
<p-button type="button" icon="pi pi-search"></p-button>
</td>
</tr>
</ng-template>
<ng-template #emptymessage>
<tr>
<td colspan="6">There are no order for this product yet.</td>
</tr>
</ng-template>
</p-table>
</div>
</td>
</tr>
</ng-template>
</p-table>
</div>
<div class="col-12"> <div class="card">
<div class="card"> <div class="font-semibold text-xl mb-4">Grouping</div>
<h5>Row Expand</h5> <p-table [value]="customers3" rowGroupMode="subheader" groupRowsBy="representative.name"
<p-toast></p-toast> sortField="representative.name" sortMode="single" (onSort)="onSort()" responsiveLayout="scroll"
<p-table [value]="products" dataKey="name" [expandedRowKeys]="expandedRows" responsiveLayout="scroll"> [scrollable]="true" scrollHeight="400px">
<ng-template #caption> <ng-template #header>
<button pButton icon="pi pi-fw {{isExpanded ? 'pi-minus' : 'pi-plus'}}" label="{{isExpanded ? 'Collapse All' : 'Expand All'}}" (click)="expandAll()"></button> <tr>
<div class="flex table-header"> <th>Name</th>
</div> <th>Country</th>
</ng-template> <th>Company</th>
<ng-template #header> <th>Status</th>
<tr> <th>Date</th>
<th style="width: 3rem"></th> </tr>
<th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th> </ng-template>
<th>Image</th> <ng-template #body let-customer let-rowIndex="rowIndex">
<th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th> <tr pRowGroupHeader *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex">
<th pSortableColumn="category">Category <p-sortIcon field="category"></p-sortIcon></th> <td colspan="5" style="min-width: 200px;">
<th pSortableColumn="rating">Reviews <p-sortIcon field="rating"></p-sortIcon></th> <img [alt]="customer.representative.name"
<th pSortableColumn="inventoryStatus">Status <p-sortIcon field="inventoryStatus"></p-sortIcon></th> src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
</tr> style="vertical-align: middle" />
</ng-template> <span class="font-bold ml-2">{{ customer.representative.name }}</span>
<ng-template #body let-product let-expanded="expanded"> </td>
<tr> </tr>
<td> <tr>
<button type="button" pButton pRipple [pRowToggler]="product" class="p-button-text p-button-rounded p-button-plain" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button> <td style="min-width: 200px;">
</td> {{ customer.name }}
<td style="min-width: 12rem;">{{product.name}}</td> </td>
<td><img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" /></td> <td style="min-width: 200px;">
<td style="min-width: 8rem;">{{product.price | currency:'USD'}}</td> <img src="assets/demo/images/flag/flag_placeholder.png"
<td style="min-width: 10rem;">{{product.category}}</td> [class]="'flag flag-' + customer.country.code" width="30">
<td style="min-width: 10rem;"><p-rating [ngModel]="product.rating" [readonly]="true"></p-rating></td> <span class="image-text" style="margin-left: .5em">{{ customer.country.name }}</span>
<td><span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span></td> </td>
</tr> <td style="min-width: 200px;">
</ng-template> {{ customer.company }}
<ng-template #rowexpansion let-product> </td>
<tr> <td style="min-width: 200px;">
<td colspan="7"> <span [class]="'customer-badge status-' + customer.status">{{ customer.status }}</span>
<div class="p-3"> </td>
<p-table [value]="product.orders" dataKey="id" responsiveLayout="scroll"> <td style="min-width: 200px;">
<ng-template pTemplate="header"> {{ customer.date }}
<tr> </td>
<th pSortableColumn="id">Id <p-sortIcon field="price"></p-sortIcon></th> </tr>
<th pSortableColumn="customer">Customer <p-sortIcon field="customer"></p-sortIcon></th> </ng-template>
<th pSortableColumn="date">Date <p-sortIcon field="date"></p-sortIcon></th> </p-table>
<th pSortableColumn="amount">Amount <p-sortIcon field="amount"></p-sortIcon></th> </div>`,
<th pSortableColumn="stats">Status <p-sortIcon field="status"></p-sortIcon></th>
<th style="width: 4rem"></th>
</tr>
</ng-template>
<ng-template #body let-order>
<tr>
<td>{{order.id}}</td>
<td>{{order.customer}}</td>
<td>{{order.date}}</td>
<td>{{order.amount | currency:'USD'}}</td>
<td><span [class]="'order-badge order-' + order.status.toLowerCase()">{{order.status}}</span></td>
<td><p-button type="button" icon="pi pi-search"></p-button></td>
</tr>
</ng-template>
<ng-template #emptymessage>
<tr>
<td colspan="6">There are no order for this product yet.</td>
</tr>
</ng-template>
</p-table>
</div>
</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
<div class="col-12">
<div class="card">
<h5>Subheader Grouping</h5>
<p-table [value]="customers3" rowGroupMode="subheader" groupRowsBy="representative.name" sortField="representative.name" sortMode="single" (onSort)="onSort()" responsiveLayout="scroll" [scrollable]="true" scrollHeight="400px">
<ng-template #header>
<tr>
<th>Name</th>
<th>Country</th>
<th>Company</th>
<th>Status</th>
<th>Date</th>
</tr>
</ng-template>
<ng-template #body let-customer let-rowIndex="rowIndex">
<tr pRowGroupHeader *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex">
<td colspan="5" style="min-width: 200px;">
<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
<span class="font-bold ml-2">{{customer.representative.name}}</span>
</td>
</tr>
<tr>
<td style="min-width: 200px;">
{{customer.name}}
</td>
<td style="min-width: 200px;">
<img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
<span class="image-text" style="margin-left: .5em">{{customer.country.name}}</span>
</td>
<td style="min-width: 200px;">
{{customer.company}}
</td>
<td style="min-width: 200px;">
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
</td>
<td style="min-width: 200px;">
{{customer.date}}
</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
</div>
`,
providers: [ConfirmationService, MessageService] providers: [ConfirmationService, MessageService]
}) })
export class TableDoc implements OnInit { export class TableDoc implements OnInit {

108
src/views/uikit/timelinedoc.ts
View File

@@ -12,40 +12,40 @@ import { ButtonModule } from 'primeng/button';
ButtonModule, ButtonModule,
CardModule CardModule
], ],
template: `<div class="grid"> template: ` <div class="grid grid-cols-12 gap-8">
<div class="col-12 md:col-6"> <div class="col-span-6">
<div class="card"> <div class="card">
<h5>Left Align</h5> <div class="font-semibold text-xl mb-4">Left Align</div>
<p-timeline [value]="events1"> <p-timeline [value]="events1">
<ng-template pTemplate="content" let-event> <ng-template #content let-event>
{{event.status}} {{event.status}}
</ng-template> </ng-template>
</p-timeline> </p-timeline>
</div> </div>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-span-6">
<div class="card"> <div class="card">
<h5>Right Align</h5> <div class="font-semibold text-xl mb-4">Right Align</div>
<p-timeline [value]="events1" align="right"> <p-timeline [value]="events1" align="right">
<ng-template pTemplate="content" let-event> <ng-template #content let-event>
{{event.status}} {{event.status}}
</ng-template> </ng-template>
</p-timeline> </p-timeline>
</div> </div>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-span-6">
<div class="card"> <div class="card">
<h5>Alternate Align</h5> <div class="font-semibold text-xl mb-4">Alternate Align</div>
<p-timeline [value]="events1" align="alternate"> <p-timeline [value]="events1" align="alternate">
<ng-template pTemplate="content" let-event> <ng-template #content let-event>
{{event.status}} {{event.status}}
</ng-template> </ng-template>
</p-timeline> </p-timeline>
</div> </div>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-span-6">
<div class="card"> <div class="card">
<h5>Opposite Content</h5> <div class="font-semibold text-xl mb-4">Opposite Content</div>
<p-timeline [value]="events1"> <p-timeline [value]="events1">
<ng-template pTemplate="content" let-event> <ng-template pTemplate="content" let-event>
<small class="p-text-secondary">{{event.date}}</small> <small class="p-text-secondary">{{event.date}}</small>
@@ -56,52 +56,54 @@ import { ButtonModule } from 'primeng/button';
</p-timeline> </p-timeline>
</div> </div>
</div> </div>
</div> <div class="col-span-full">
<div class="card">
<div class="card"> <div class="font-semibold text-xl mb-4">Templating</div>
<h5>Customized</h5> <p-timeline [value]="events1" align="alternate" styleClass="customized-timeline">
<p-timeline [value]="events1" align="alternate" styleClass="customized-timeline"> <ng-template pTemplate="marker" let-event>
<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"> <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> <i [ngClass]="event.icon"></i>
</span> </span>
</ng-template> </ng-template>
<ng-template pTemplate="content" let-event> <ng-template pTemplate="content" let-event>
<p-card [header]="event.status" [subheader]="event.date"> <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" /> <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 <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> 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> <button pButton label="Read more" class="p-button-outlined mb-5"></button>
</p-card> </p-card>
</ng-template> </ng-template>
</p-timeline> </p-timeline>
</div> </div>
</div>
<div class="col-span-full">
<div class="card">
<div class="font-semibold text-xl mb-4">Horizontal</div>
<div class="font-semibold mb-2">Top Align</div>
<p-timeline [value]="events2" layout="horizontal" align="top">
<ng-template pTemplate="content" let-event>
{{event}}
</ng-template>
</p-timeline>
<div class="card"> <div class="font-semibold mt-4 mb-2">Bottom Align</div>
<h5>Horizontal</h5> <p-timeline [value]="events2" layout="horizontal" align="bottom">
<h6>Top Align</h6> <ng-template pTemplate="content" let-event>
<p-timeline [value]="events2" layout="horizontal" align="top"> {{event}}
<ng-template pTemplate="content" let-event> </ng-template>
{{event}} </p-timeline>
</ng-template>
</p-timeline>
<h6>Bottom Align</h6> <div class="font-semibold mt-4 mb-2">Alternate Align</div>
<p-timeline [value]="events2" layout="horizontal" align="bottom"> <p-timeline [value]="events2" layout="horizontal" align="alternate">
<ng-template pTemplate="content" let-event> <ng-template pTemplate="content" let-event>
{{event}} {{event}}
</ng-template> </ng-template>
</p-timeline> <ng-template pTemplate="opposite" let-event>
&nbsp;
<h6>Alternate Align</h6> </ng-template>
<p-timeline [value]="events2" layout="horizontal" align="alternate"> </p-timeline>
<ng-template pTemplate="content" let-event> </div>
{{event}} </div>
</ng-template>
<ng-template pTemplate="opposite" let-event>
&nbsp;
</ng-template>
</p-timeline>
</div>`, </div>`,
}) })
export class TimelineDoc { export class TimelineDoc {

63
src/views/uikit/treedoc.ts
View File

@@ -10,40 +10,35 @@ import { NodeService } from '@/src/service/node.service';
standalone: true, standalone: true,
imports: [CommonModule, FormsModule, TreeModule, TreeTableModule], imports: [CommonModule, FormsModule, TreeModule, TreeTableModule],
template: ` template: `
<div class="grid"> <div class="card">
<div class="col-12"> <div class="font-semibold text-xl">Tree</div>
<div class="card"> <p-tree [value]="treeValue" selectionMode="checkbox" [(selection)]="selectedTreeValue"></p-tree>
<h5>Tree</h5> </div>
<p-tree [value]="treeValue" selectionMode="checkbox" [(selection)]="selectedTreeValue"></p-tree>
</div> <div class="card">
</div> <div class="font-semibold text-xl mb-4">TreeTable</div>
<div class="col-12"> <p-treetable [value]="treeTableValue" [columns]="cols" selectionMode="checkbox" [(selection)]="selectedTreeTableValue">
<div class="card"> <ng-template #header let-columns>
<h5>TreeTable</h5> <tr>
<p-treetable [value]="treeTableValue" [columns]="cols" selectionMode="checkbox" [(selection)]="selectedTreeTableValue"> @for(col of columns; track col.header){
<ng-template #header let-columns> <th>
<tr> {{ col.header }}
@for(col of columns; track col.header){ </th>
<th> }
{{ col.header }} </tr>
</th> </ng-template>
} <ng-template #body let-rowNode let-rowData="rowData" let-columns="columns">
</tr> <tr>
</ng-template> @for(col of columns; track col.field; let i = $index){
<ng-template #body let-rowNode let-rowData="rowData" let-columns="columns"> <td>
<tr> <p-treetabletoggler [rowNode]="rowNode" *ngIf="i === 0"></p-treetabletoggler>
@for(col of columns; track col.field; let i = $index){ <p-treeTableCheckbox [value]="rowNode" *ngIf="i === 0"></p-treeTableCheckbox>
<td> {{ rowData[col.field] }}
<p-treetabletoggler [rowNode]="rowNode" *ngIf="i === 0"></p-treetabletoggler> </td>
<p-treeTableCheckbox [value]="rowNode" *ngIf="i === 0"></p-treeTableCheckbox> }
{{ rowData[col.field] }} </tr>
</td> </ng-template>
} </p-treetable>
</tr>
</ng-template>
</p-treetable>
</div>
</div>
</div> </div>
`, `,
providers: [NodeService] providers: [NodeService]