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

Code format

Browse Source
This commit is contained in:
Çetin
2025-01-07 17:29:51 +03:00
parent e3bcb0fdb6
commit 44c2361564
49 changed files with 1536 additions and 1723 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.vscode/extensions.json vendored
View File

@@ -1,4 +0,0 @@
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
"recommendations": ["angular.ng-template"]
}

20
.vscode/launch.json vendored
View File

@@ -1,20 +0,0 @@
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"url": "http://localhost:4200/"
},
{
"name": "ng test",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: test",
"url": "http://localhost:9876/debug.html"
}
]
}

42
.vscode/tasks.json vendored
View File

@@ -1,42 +0,0 @@
{
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "start",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
},
{
"type": "npm",
"script": "test",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
}
]
}

1
package.json
View File

@@ -6,6 +6,7 @@
"start": "ng serve", "start": "ng serve",
"build": "ng build", "build": "ng build",
"watch": "ng build --watch --configuration development", "watch": "ng build --watch --configuration development",
"format": "prettier --write \"**/*.{js,mjs,ts,mts,d.ts,html}\" --cache",
"test": "ng test" "test": "ng test"
}, },
"private": true, "private": true,

4
src/app.component.ts
View File

@@ -1,10 +1,10 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import {RouterModule} from '@angular/router'; import { RouterModule } from '@angular/router';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
standalone: true, standalone: true,
imports: [RouterModule], imports: [RouterModule],
template:`<router-outlet></router-outlet>`, template: `<router-outlet></router-outlet>`
}) })
export class AppComponent {} export class AppComponent {}

2
src/app.config.ts
View File

@@ -11,6 +11,6 @@ export const appConfig: ApplicationConfig = {
provideRouter(appRoutes, withInMemoryScrolling({ anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled' }), withEnabledBlockingInitialNavigation()), provideRouter(appRoutes, withInMemoryScrolling({ anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled' }), withEnabledBlockingInitialNavigation()),
provideHttpClient(withFetch()), provideHttpClient(withFetch()),
provideAnimationsAsync(), provideAnimationsAsync(),
providePrimeNG({ theme: {preset: Aura, options: { darkModeSelector: '.app-dark'}}, ripple: false, inputStyle: 'outlined' }) providePrimeNG({ theme: { preset: Aura, options: { darkModeSelector: '.app-dark' } }, ripple: false, inputStyle: 'outlined' })
] ]
}; };

2
src/app.routes.ts
View File

@@ -19,5 +19,5 @@ export const appRoutes: Routes = [
{ path: 'landing', component: Landing }, { path: 'landing', component: Landing },
{ path: 'notfound', component: Notfound }, { path: 'notfound', component: Notfound },
{ path: 'auth', loadChildren: () => import('./app/pages/auth/auth.routes') }, { path: 'auth', loadChildren: () => import('./app/pages/auth/auth.routes') },
{ path: '**', redirectTo: '/notfound' }, { path: '**', redirectTo: '/notfound' }
]; ];

8
src/app/layout/core/app.configurator.ts
View File

@@ -2,13 +2,13 @@ import { CommonModule, isPlatformBrowser } from '@angular/common';
import { Component, computed, inject, PLATFORM_ID } from '@angular/core'; import { Component, computed, inject, PLATFORM_ID } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { $t, updatePreset, updateSurfacePalette } from '@primeng/themes'; import { $t, updatePreset, updateSurfacePalette } from '@primeng/themes';
import Aura from '@primeng/themes/aura';
import Lara from '@primeng/themes/lara';
import Material from '@primeng/themes/material';
import Nora from '@primeng/themes/nora';
import { PrimeNG } from 'primeng/config'; import { PrimeNG } from 'primeng/config';
import { SelectButtonModule } from 'primeng/selectbutton'; import { SelectButtonModule } from 'primeng/selectbutton';
import { LayoutService } from '../service/layout.service'; import { LayoutService } from '../service/layout.service';
import Aura from '@primeng/themes/aura';
import Material from '@primeng/themes/material';
import Lara from '@primeng/themes/lara';
import Nora from '@primeng/themes/nora';
const presets = { const presets = {
Aura, Aura,

16
src/app/layout/core/app.floatingconfigurator.ts
View File

@@ -2,7 +2,7 @@ import { Component, computed, inject } from '@angular/core';
import { ButtonModule } from 'primeng/button'; import { ButtonModule } from 'primeng/button';
import { StyleClassModule } from 'primeng/styleclass'; import { StyleClassModule } from 'primeng/styleclass';
import { AppConfigurator } from './app.configurator'; import { AppConfigurator } from './app.configurator';
import { LayoutService} from '../service/layout.service'; import { LayoutService } from '../service/layout.service';
@Component({ @Component({
selector: 'app-floating-configurator', selector: 'app-floating-configurator',
@@ -11,21 +11,11 @@ import { LayoutService} from '../service/layout.service';
<div class="fixed flex gap-4 top-8 right-8"> <div class="fixed flex gap-4 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 icon="pi pi-palette" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveToClass="hidden" leaveActiveClass="animate-fadeout" [hideOnOutsideClick]="true" type="button" rounded />
icon="pi pi-palette"
pStyleClass="@next"
enterFromClass="hidden"
enterActiveClass="animate-scalein"
leaveToClass="hidden"
leaveActiveClass="animate-fadeout"
[hideOnOutsideClick]="true"
type="button"
rounded
/>
<app-configurator /> <app-configurator />
</div> </div>
</div> </div>
`, `
}) })
export class AppFloatingConfigurator { export class AppFloatingConfigurator {
LayoutService = inject(LayoutService); LayoutService = inject(LayoutService);

4
src/app/layout/core/app.footer.ts
View File

@@ -1,11 +1,11 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
@Component({ @Component({
standalone:true, standalone: true,
selector: 'app-footer', selector: 'app-footer',
template: `<div class="layout-footer"> template: `<div class="layout-footer">
SAKAI by SAKAI by
<a href="https://primeng.org" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">PrimeNG</a> <a href="https://primeng.org" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">PrimeNG</a>
</div>`, </div>`
}) })
export class AppFooter {} export class AppFooter {}

14
src/app/layout/core/app.menu.ts
View File

@@ -6,22 +6,16 @@ import { AppMenuitem } from './app.menuitem';
@Component({ @Component({
selector: 'app-menu', selector: 'app-menu',
standalone:true, standalone: true,
imports: [ imports: [CommonModule, AppMenuitem, RouterModule],
CommonModule,
AppMenuitem,
RouterModule
],
template: `<ul class="layout-menu"> template: `<ul class="layout-menu">
<ng-container *ngFor="let item of model; let i = index;"> <ng-container *ngFor="let item of model; let i = index">
<li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li> <li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
<li *ngIf="item.separator" class="menu-separator"></li> <li *ngIf="item.separator" class="menu-separator"></li>
</ng-container> </ng-container>
</ul> </ul> `
`,
}) })
export class AppMenu { export class AppMenu {
model: MenuItem[] = []; model: MenuItem[] = [];
ngOnInit() { ngOnInit() {

70
src/app/layout/core/app.menuitem.ts
View File

@@ -5,7 +5,7 @@ import { Subscription } from 'rxjs';
import { filter } from 'rxjs/operators'; import { filter } from 'rxjs/operators';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { RippleModule } from 'primeng/ripple'; import { RippleModule } from 'primeng/ripple';
import { MenuItem} from 'primeng/api'; import { MenuItem } from 'primeng/api';
import { LayoutService } from '../service/layout.service'; import { LayoutService } from '../service/layout.service';
@Component({ @Component({
@@ -14,20 +14,32 @@ import { LayoutService } from '../service/layout.service';
imports: [CommonModule, RouterModule, RippleModule], imports: [CommonModule, RouterModule, RippleModule],
template: ` template: `
<ng-container> <ng-container>
<div *ngIf="root && item.visible !== false" class="layout-menuitem-root-text">{{item.label}}</div> <div *ngIf="root && item.visible !== false" class="layout-menuitem-root-text">{{ item.label }}</div>
<a *ngIf="(!item.routerLink || item.items) && item.visible !== false" [attr.href]="item.url" (click)="itemClick($event)" <a *ngIf="(!item.routerLink || item.items) && item.visible !== false" [attr.href]="item.url" (click)="itemClick($event)" [ngClass]="item.styleClass" [attr.target]="item.target" tabindex="0" pRipple>
[ngClass]="item.styleClass" [attr.target]="item.target" tabindex="0" pRipple>
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i> <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
<span class="layout-menuitem-text">{{item.label}}</span> <span class="layout-menuitem-text">{{ item.label }}</span>
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i> <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
</a> </a>
<a *ngIf="(item.routerLink && !item.items) && item.visible !== false" (click)="itemClick($event)" [ngClass]="item.styleClass" <a
[routerLink]="item.routerLink" routerLinkActive="active-route" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{ paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }" *ngIf="item.routerLink && !item.items && item.visible !== false"
[fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" (click)="itemClick($event)"
[skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state" [queryParams]="item.queryParams" [ngClass]="item.styleClass"
[attr.target]="item.target" tabindex="0" pRipple> [routerLink]="item.routerLink"
routerLinkActive="active-route"
[routerLinkActiveOptions]="item.routerLinkActiveOptions || { paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }"
[fragment]="item.fragment"
[queryParamsHandling]="item.queryParamsHandling"
[preserveFragment]="item.preserveFragment"
[skipLocationChange]="item.skipLocationChange"
[replaceUrl]="item.replaceUrl"
[state]="item.state"
[queryParams]="item.queryParams"
[attr.target]="item.target"
tabindex="0"
pRipple
>
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i> <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
<span class="layout-menuitem-text">{{item.label}}</span> <span class="layout-menuitem-text">{{ item.label }}</span>
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i> <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
</a> </a>
@@ -40,19 +52,24 @@ import { LayoutService } from '../service/layout.service';
`, `,
animations: [ animations: [
trigger('children', [ trigger('children', [
state('collapsed', style({ state(
'collapsed',
style({
height: '0' height: '0'
})), })
state('expanded', style({ ),
state(
'expanded',
style({
height: '*' height: '*'
})), })
),
transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')) transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
]) ])
], ],
providers: [LayoutService], providers: [LayoutService]
}) })
export class AppMenuitem { export class AppMenuitem {
@Input() item!: MenuItem; @Input() item!: MenuItem;
@Input() index!: number; @Input() index!: number;
@@ -67,15 +84,17 @@ export class AppMenuitem {
menuResetSubscription: Subscription; menuResetSubscription: Subscription;
key: string = ""; key: string = '';
constructor(public router: Router, private layoutService: LayoutService) { constructor(
this.menuSourceSubscription = this.layoutService.menuSource$.subscribe(value => { public router: Router,
private layoutService: LayoutService
) {
this.menuSourceSubscription = this.layoutService.menuSource$.subscribe((value) => {
Promise.resolve(null).then(() => { Promise.resolve(null).then(() => {
if (value.routeEvent) { if (value.routeEvent) {
this.active = (value.key === this.key || value.key.startsWith(this.key + '-')) ? true : false; this.active = value.key === this.key || value.key.startsWith(this.key + '-') ? true : false;
} } else {
else {
if (value.key !== this.key && !value.key.startsWith(this.key + '-')) { if (value.key !== this.key && !value.key.startsWith(this.key + '-')) {
this.active = false; this.active = false;
} }
@@ -87,8 +106,7 @@ export class AppMenuitem {
this.active = false; this.active = false;
}); });
this.router.events.pipe(filter(event => event instanceof NavigationEnd)) this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((params) => {
.subscribe(params => {
if (this.item.routerLink) { if (this.item.routerLink) {
this.updateActiveStateFromRoute(); this.updateActiveStateFromRoute();
} }
@@ -132,7 +150,7 @@ export class AppMenuitem {
} }
get submenuAnimation() { get submenuAnimation() {
return this.root ? 'expanded' : (this.active ? 'expanded' : 'collapsed'); return this.root ? 'expanded' : this.active ? 'expanded' : 'collapsed';
} }
@HostBinding('class.active-menuitem') @HostBinding('class.active-menuitem')

11
src/app/layout/core/app.sidebar.ts
View File

@@ -3,14 +3,11 @@ import { AppMenu } from './app.menu';
@Component({ @Component({
selector: 'app-sidebar', selector: 'app-sidebar',
standalone:true, standalone: true,
imports: [ imports: [AppMenu],
AppMenu template: ` <div class="layout-sidebar">
],
template: `
<div class="layout-sidebar">
<app-menu></app-menu> <app-menu></app-menu>
</div>`, </div>`
}) })
export class AppSidebar { export class AppSidebar {
constructor(public el: ElementRef) {} constructor(public el: ElementRef) {}

12
src/app/layout/core/app.topbar.ts
View File

@@ -58,15 +58,7 @@ import { LayoutService } from '../service/layout.service';
</div> </div>
</div> </div>
<button <button class="layout-topbar-menu-button layout-topbar-action" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveToClass="hidden" leaveActiveClass="animate-fadeout" [hideOnOutsideClick]="true">
class="layout-topbar-menu-button layout-topbar-action"
pStyleClass="@next"
enterFromClass="hidden"
enterActiveClass="animate-scalein"
leaveToClass="hidden"
leaveActiveClass="animate-fadeout"
[hideOnOutsideClick]="true"
>
<i class="pi pi-ellipsis-v"></i> <i class="pi pi-ellipsis-v"></i>
</button> </button>
@@ -90,7 +82,6 @@ import { LayoutService } from '../service/layout.service';
</div>` </div>`
}) })
export class AppTopbar { export class AppTopbar {
items!: MenuItem[]; items!: MenuItem[];
constructor(public layoutService: LayoutService) {} constructor(public layoutService: LayoutService) {}
@@ -98,5 +89,4 @@ export class AppTopbar {
toggleDarkMode() { toggleDarkMode() {
this.layoutService.layoutConfig.update((state) => ({ ...state, darkTheme: !state.darkTheme })); this.layoutService.layoutConfig.update((state) => ({ ...state, darkTheme: !state.darkTheme }));
} }
} }

19
src/app/pages/auth/access.ts
View File

@@ -1,21 +1,14 @@
import { Component } from '@angular/core'; 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 { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigurator'; import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigurator';
@Component({ @Component({
selector: 'app-access', selector: 'app-access',
standalone: true, standalone: true,
imports: [ imports: [ButtonModule, RouterModule, RippleModule, AppFloatingConfigurator, ButtonModule],
ButtonModule, template: ` <app-floating-configurator />
RouterModule,
RippleModule,
AppFloatingConfigurator,
ButtonModule,
],
template: `
<app-floating-configurator />
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden"> <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<div class="flex flex-col items-center justify-center"> <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%)">
@@ -36,4 +29,4 @@ import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigura
</div> </div>
</div>` </div>`
}) })
export class Access { } export class Access {}

6
src/app/pages/auth/auth.routes.ts
View File

@@ -4,7 +4,7 @@ import { Login } from './login';
import { Error } from './error'; import { Error } from './error';
export default [ export default [
{ path: 'access', component: Access}, { path: 'access', component: Access },
{ path: 'error', component: Error}, { path: 'error', component: Error },
{ path: 'login', component: Login}, { path: 'login', component: Login }
] as Routes; ] as Routes;

11
src/app/pages/auth/error.ts
View File

@@ -1,15 +1,14 @@
import { Component } from '@angular/core'; 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 { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigurator'; import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigurator';
@Component({ @Component({
selector: 'app-error', selector: 'app-error',
imports: [ButtonModule, RippleModule, RouterModule, AppFloatingConfigurator, ButtonModule], imports: [ButtonModule, RippleModule, RouterModule, AppFloatingConfigurator, ButtonModule],
standalone: true, standalone: true,
template: ` template: ` <app-floating-configurator />
<app-floating-configurator />
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden"> <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<div class="flex flex-col items-center justify-center"> <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%)">
@@ -30,4 +29,4 @@ import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigura
</div> </div>
</div>` </div>`
}) })
export class Error { } export class Error {}

30
src/app/pages/auth/login.ts
View File

@@ -1,26 +1,17 @@
import {Component, inject} from '@angular/core'; import { Component, inject } from '@angular/core';
import { ButtonModule} from 'primeng/button'; import { ButtonModule } from 'primeng/button';
import { CheckboxModule} from 'primeng/checkbox'; import { CheckboxModule } from 'primeng/checkbox';
import { InputTextModule} from 'primeng/inputtext'; import { InputTextModule } from 'primeng/inputtext';
import { PasswordModule} from 'primeng/password'; 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 { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigurator'; import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigurator';
@Component({ @Component({
selector: 'app-login', selector: 'app-login',
standalone: true, standalone: true,
imports: [ imports: [ButtonModule, CheckboxModule, InputTextModule, PasswordModule, FormsModule, RouterModule, RippleModule, AppFloatingConfigurator],
ButtonModule,
CheckboxModule,
InputTextModule,
PasswordModule,
FormsModule,
RouterModule,
RippleModule,
AppFloatingConfigurator
],
template: ` template: `
<app-floating-configurator /> <app-floating-configurator />
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden"> <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
@@ -69,8 +60,7 @@ import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigura
</div> </div>
</div> </div>
</div> </div>
`, `
}) })
export class Login { export class Login {
email: string = ''; email: string = '';

36
src/app/pages/crud/crud.ts
View File

@@ -1,19 +1,19 @@
import { Component, OnInit, signal, ViewChild } from '@angular/core'; import { Component, OnInit, signal, ViewChild } from '@angular/core';
import { ConfirmationService, MessageService } from 'primeng/api'; import { ConfirmationService, MessageService } from 'primeng/api';
import {Table, TableModule} from 'primeng/table'; import { Table, TableModule } from 'primeng/table';
import {CommonModule} from '@angular/common'; import { CommonModule } from '@angular/common';
import {FormsModule} from '@angular/forms'; import { FormsModule } from '@angular/forms';
import {ButtonModule} from 'primeng/button'; import { ButtonModule } from 'primeng/button';
import {RippleModule} from 'primeng/ripple'; import { RippleModule } from 'primeng/ripple';
import {ToastModule} from 'primeng/toast'; import { ToastModule } from 'primeng/toast';
import {ToolbarModule} from 'primeng/toolbar'; import { ToolbarModule } from 'primeng/toolbar';
import {RatingModule} from 'primeng/rating'; import { RatingModule } from 'primeng/rating';
import {InputTextModule} from 'primeng/inputtext'; import { InputTextModule } from 'primeng/inputtext';
import {TextareaModule} from 'primeng/textarea'; import { TextareaModule } from 'primeng/textarea';
import {SelectModule} from 'primeng/select'; import { SelectModule } from 'primeng/select';
import {RadioButtonModule} from 'primeng/radiobutton'; import { RadioButtonModule } from 'primeng/radiobutton';
import {InputNumberModule} from 'primeng/inputnumber'; import { InputNumberModule } from 'primeng/inputnumber';
import {DialogModule} from 'primeng/dialog'; import { DialogModule } from 'primeng/dialog';
import { TagModule } from 'primeng/tag'; import { TagModule } from 'primeng/tag';
import { InputIconModule } from 'primeng/inputicon'; import { InputIconModule } from 'primeng/inputicon';
import { IconFieldModule } from 'primeng/iconfield'; import { IconFieldModule } from 'primeng/iconfield';
@@ -208,12 +208,12 @@ interface ExportColumn {
<p-confirmdialog [style]="{ width: '450px' }" /> <p-confirmdialog [style]="{ width: '450px' }" />
`, `,
providers: [MessageService, ProductService, ConfirmationService], providers: [MessageService, ProductService, ConfirmationService]
}) })
export class Crud implements OnInit { export class Crud implements OnInit {
productDialog: boolean = false; productDialog: boolean = false;
products = signal<Product[]>([]) products = signal<Product[]>([]);
product!: Product; product!: Product;
@@ -232,7 +232,7 @@ export class Crud implements OnInit {
constructor( constructor(
private productService: ProductService, private productService: ProductService,
private messageService: MessageService, private messageService: MessageService,
private confirmationService: ConfirmationService, private confirmationService: ConfirmationService
) {} ) {}
exportCSV() { exportCSV() {
@@ -294,8 +294,6 @@ export class Crud implements OnInit {
detail: 'Products Deleted', detail: 'Products Deleted',
life: 3000 life: 3000
}); });
} }
}); });
} }

13
src/app/pages/dashboard/components/bestsellingwidget.ts
View File

@@ -4,15 +4,10 @@ import { ButtonModule } from 'primeng/button';
import { MenuModule } from 'primeng/menu'; import { MenuModule } from 'primeng/menu';
@Component({ @Component({
standalone:true, standalone: true,
selector: 'app-best-selling-widget', selector: 'app-best-selling-widget',
imports: [ imports: [CommonModule, ButtonModule, MenuModule],
CommonModule, template: ` <div class="card">
ButtonModule,
MenuModule,
],
template: `
<div class="card">
<div class="flex justify-between items-center mb-6"> <div class="flex justify-between items-center mb-6">
<div class="font-semibold text-xl">Best Selling Products</div> <div class="font-semibold text-xl">Best Selling Products</div>
<div> <div>
@@ -94,7 +89,7 @@ import { MenuModule } from 'primeng/menu';
</div> </div>
</li> </li>
</ul> </ul>
</div>`, </div>`
}) })
export class BestSellingWidget { export class BestSellingWidget {
menu = null; menu = null;

9
src/app/pages/dashboard/components/notificationswidget.ts
View File

@@ -3,12 +3,9 @@ import { ButtonModule } from 'primeng/button';
import { MenuModule } from 'primeng/menu'; import { MenuModule } from 'primeng/menu';
@Component({ @Component({
standalone:true, standalone: true,
selector: 'app-notifications-widget', selector: 'app-notifications-widget',
imports: [ imports: [ButtonModule, MenuModule],
ButtonModule,
MenuModule,
],
template: `<div class="card"> template: `<div class="card">
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<div class="font-semibold text-xl">Notifications</div> <div class="font-semibold text-xl">Notifications</div>
@@ -73,7 +70,7 @@ import { MenuModule } from 'primeng/menu';
<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> <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>`
}) })
export class NotificationsWidget { export class NotificationsWidget {
items = [ items = [

20
src/app/pages/dashboard/components/recentsaleswidget.ts
View File

@@ -6,14 +6,9 @@ import { CommonModule } from '@angular/common';
import { Product, ProductService } from '../../service/product.service'; import { Product, ProductService } from '../../service/product.service';
@Component({ @Component({
standalone:true, standalone: true,
selector: 'app-recent-sales-widget', selector: 'app-recent-sales-widget',
imports: [ imports: [CommonModule, TableModule, ButtonModule, RippleModule],
CommonModule,
TableModule,
ButtonModule,
RippleModule,
],
template: `<div class="card !mb-8"> template: `<div class="card !mb-8">
<div class="font-semibold text-xl mb-4">Recent Sales</div> <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">
@@ -28,10 +23,10 @@ import { Product, ProductService } from '../../service/product.service';
<ng-template #body let-product> <ng-template #body let-product>
<tr> <tr>
<td style="width: 15%; min-width: 5rem;"> <td style="width: 15%; min-width: 5rem;">
<img src="https://primefaces.org/cdn/primevue/images/product/{{product.image}}" class="shadow-lg" alt="{{product.name}}" width="50"> <img src="https://primefaces.org/cdn/primevue/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>
<td style="width: 15%;"> <td style="width: 15%;">
<button pButton pRipple type="button" icon="pi pi-search" class="p-button p-component p-button-text p-button-icon-only"></button> <button pButton pRipple type="button" icon="pi pi-search" class="p-button p-component p-button-text p-button-icon-only"></button>
</td> </td>
@@ -39,15 +34,14 @@ import { Product, ProductService } from '../../service/product.service';
</ng-template> </ng-template>
</p-table> </p-table>
</div>`, </div>`,
providers: [ProductService], providers: [ProductService]
}) })
export class RecentSalesWidget { export class RecentSalesWidget {
products!: Product[]; products!: Product[];
constructor(private productService: ProductService) {} constructor(private productService: ProductService) {}
ngOnInit() { ngOnInit() {
this.productService.getProductsSmall().then(data => this.products = data); this.productService.getProductsSmall().then((data) => (this.products = data));
} }
} }

12
src/app/pages/dashboard/components/revenuestreamwidget.ts
View File

@@ -4,15 +4,13 @@ import { debounceTime, Subscription } from 'rxjs';
import { LayoutService } from '../../../layout/service/layout.service'; import { LayoutService } from '../../../layout/service/layout.service';
@Component({ @Component({
standalone:true, standalone: true,
selector: 'app-revenue-stream-widget', selector: 'app-revenue-stream-widget',
imports: [ imports: [ChartModule],
ChartModule,
],
template: `<div class="card !mb-8"> template: `<div class="card !mb-8">
<div class="font-semibold text-xl mb-4">Revenue Stream</div> <div class="font-semibold text-xl mb-4">Revenue Stream</div>
<p-chart type="bar" [data]="chartData" [options]="chartOptions" class="h-80" /> <p-chart type="bar" [data]="chartData" [options]="chartOptions" class="h-80" />
</div>`, </div>`
}) })
export class RevenueStreamWidget { export class RevenueStreamWidget {
chartData: any; chartData: any;
@@ -22,9 +20,7 @@ export class RevenueStreamWidget {
subscription!: Subscription; subscription!: Subscription;
constructor(public layoutService: LayoutService) { constructor(public layoutService: LayoutService) {
this.subscription = this.layoutService.configUpdate$ this.subscription = this.layoutService.configUpdate$.pipe(debounceTime(25)).subscribe(() => {
.pipe(debounceTime(25))
.subscribe(() => {
this.initChart(); this.initChart();
}); });
} }

4
src/app/pages/dashboard/components/statswidget.ts
View File

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
@Component({ @Component({
standalone:true, standalone: true,
selector: 'app-stats-widget', selector: 'app-stats-widget',
imports: [CommonModule], imports: [CommonModule],
template: `<div class="col-span-12 lg:col-span-6 xl:col-span-3"> template: `<div class="col-span-12 lg:col-span-6 xl:col-span-3">
@@ -64,6 +64,6 @@ import { CommonModule } from '@angular/common';
<span class="text-primary font-medium">85 </span> <span class="text-primary font-medium">85 </span>
<span class="text-muted-color">responded</span> <span class="text-muted-color">responded</span>
</div> </div>
</div>`, </div>`
}) })
export class StatsWidget {} export class StatsWidget {}

2
src/app/pages/dashboard/dashboard.ts
View File

@@ -20,6 +20,6 @@ import { RevenueStreamWidget } from './components/revenuestreamwidget';
<app-notifications-widget /> <app-notifications-widget />
</div> </div>
</div> </div>
`, `
}) })
export class Dashboard {} export class Dashboard {}

65
src/app/pages/documentation/documentation.ts
View File

@@ -10,21 +10,17 @@ import { CommonModule } from '@angular/common';
<div> <div>
<h2>Documentation</h2> <h2>Documentation</h2>
<h4>Getting Started</h4> <h4>Getting Started</h4>
<p>Sakai is an application template for Angular and is distributed as a CLI project. Current versions is Angular <p>Sakai is an application template for Angular and is distributed as a CLI project. Current versions is Angular v19 with PrimeNG v19. In case CLI is not installed already, use the command below to set it up.</p>
v19 with PrimeNG v19. In case CLI is not installed already, use the command below to set it up.</p>
<pre class="app-code"><code>npm install -g &#64;angular/cli</code></pre> <pre class="app-code"><code>npm install -g &#64;angular/cli</code></pre>
<p>Once CLI is ready in your system, extract the contents of the zip file distribution, cd to the directory, <p>Once CLI is ready in your system, extract the contents of the zip file distribution, cd to the directory, install the libraries from npm and then execute "ng serve" to run the application in your local environment.</p>
install the libraries from npm and then execute "ng serve" to run the application in your local
environment.</p>
<pre class="app-code"><code>cd sakai <pre class="app-code"><code>cd sakai
npm install npm install
ng serve</code></pre> ng serve</code></pre>
<p>The application should run at <span class="font-semibold">http://localhost:4200/</span>, you may now start <p>The application should run at <span class="font-semibold">http://localhost:4200/</span>, you may now start with the development of your application.</p>
with the development of your application.</p>
<h5>Important CLI Commands</h5> <h5>Important CLI Commands</h5>
<p>Following commands are derived from CLI.</p> <p>Following commands are derived from CLI.</p>
@@ -42,21 +38,18 @@ Run 'ng e2e' to execute the end-to-end tests via [Protractor](http://www.protrac
Run 'ng help' for more options.</code></pre> Run 'ng help' for more options.</code></pre>
<h4>Structure</h4> <h4>Structure</h4>
<p>Sakai consists of 3 main parts; the application layout, layout assets and PrimeNG component theme assets. <p>
Layout is placed inside the <span class="text-primary font-medium">src/app/layout</span> folder, Sakai consists of 3 main parts; the application layout, layout assets and PrimeNG component theme assets. Layout is placed inside the <span class="text-primary font-medium">src/app/layout</span> folder, and the assets are in the
and the assets are in the <span class="text-primary font-medium">src/assets/layout</span> folder. <span class="text-primary font-medium">src/assets/layout</span> folder.
</p> </p>
<h5>Default Configuration</h5> <h5>Default Configuration</h5>
<p>Initial layout configuration can be defined at the main app component by injecting the <span <p>
class="text-primary font-medium">LayoutService</span>, this step is optional and only necessary when Initial layout configuration can be defined at the main app component by injecting the <span class="text-primary font-medium">LayoutService</span>, this step is optional and only necessary when customizing the defaults. Note that
customizing the defaults. Note that <span class="text-primary font-medium">theme</span> and <span class="text-primary font-medium">theme</span> and <span class="text-primary font-medium">scale</span> are not reactive since theme is configured outside of Angular at <strong class="font-semibold">index.html</strong> by
<span class="text-primary font-medium">scale</span> are not reactive since theme is configured outside of default and initial scale is defined with the <span class="text-primary font-medium">$scale</span> at <strong class="font-semibold">layout.scss</strong>. When default theme or scale is changed at their files initially, it is
Angular at <strong class="font-semibold">index.html</strong> by default and required to configure the layout service with the matching values to avoid sync issues.
initial scale is defined with the <span class="text-primary font-medium">$scale</span> at <strong </p>
class="font-semibold">layout.scss</strong>. When default theme or scale is changed at their files initially,
it is required to configure the layout service with the matching values
to avoid sync issues. </p>
<pre class="app-code"><code>import &#123; Component, OnInit &#125; from '&#64;angular/core'; <pre class="app-code"><code>import &#123; Component, OnInit &#125; from '&#64;angular/core';
import &#123; PrimeNGConfig &#125; from 'primeng/api'; import &#123; PrimeNGConfig &#125; from 'primeng/api';
@@ -88,9 +81,10 @@ export class AppComponent implements OnInit &#123;
&#125;</code></pre> &#125;</code></pre>
<h5>Menu</h5> <h5>Menu</h5>
<p>Menu is a separate component defined in <span class="text-primary font-medium">src/app/layout/app.menu.component.ts</span> <p>
file and based on PrimeNG MenuModel API. In order to define the menuitems, Menu is a separate component defined in <span class="text-primary font-medium">src/app/layout/app.menu.component.ts</span> file and based on PrimeNG MenuModel API. In order to define the menuitems, navigate to this file and define
navigate to this file and define your own model as a nested structure.</p> your own model as a nested structure.
</p>
<pre class="app-code"><code>import &#123; OnInit &#125; from '&#64;angular/core'; <pre class="app-code"><code>import &#123; OnInit &#125; from '&#64;angular/core';
import &#123; Component &#125; from '&#64;angular/core'; import &#123; Component &#125; from '&#64;angular/core';
@@ -121,28 +115,24 @@ export class AppMenuComponent implements OnInit &#123;
&#125;</code></pre> &#125;</code></pre>
<h4>Integration with Existing Angular CLI Projects</h4> <h4>Integration with Existing Angular CLI Projects</h4>
<p>Sakai structure is designed in a modular way so that it can easily be integrated with your existing <p>Sakai structure is designed in a modular way so that it can easily be integrated with your existing application. We've created a short tutorial with details.</p>
application. We've created a short tutorial with details.</p>
<div class="video-container"> <div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/yl2f8KKY204" frameborder="0" <iframe width="560" height="315" src="https://www.youtube.com/embed/yl2f8KKY204" frameborder="0" allowfullscreen></iframe>
allowfullscreen></iframe>
</div> </div>
<h4>Theme</h4> <h4>Theme</h4>
<p>Sakai provides 34 PrimeNG themes out of the box. Setup of a theme is simple by including the css of theme <p>
to your bundle that are located inside <span Sakai provides 34 PrimeNG themes out of the box. Setup of a theme is simple by including the css of theme to your bundle that are located inside <span class="text-primary font-medium">assets/layout/styles/theme/</span> folder such
class="text-primary font-medium">assets/layout/styles/theme/</span> as <span class="text-primary font-medium">assets/layout/styles/theme/lara-light-indigo/theme.css</span>.
folder such as <span </p>
class="text-primary font-medium">assets/layout/styles/theme/lara-light-indigo/theme.css</span>.</p>
<p>Another alternative would be creating dynamic bundles, please see the <a <p>Another alternative would be creating dynamic bundles, please see the <a href="https://www.youtube.com/watch?v=5VOuUdDXRsE" class="font-medium text-primary hover:underline">video tutorial</a> for an example.</p>
href="https://www.youtube.com/watch?v=5VOuUdDXRsE" class="font-medium text-primary hover:underline">video
tutorial</a> for an example.</p>
</div> </div>
</div> </div>
`, `,
styles: `@media screen and (max-width: 991px) { styles: `
@media screen and (max-width: 991px) {
.video-container { .video-container {
position: relative; position: relative;
width: 100%; width: 100%;
@@ -157,6 +147,7 @@ export class AppMenuComponent implements OnInit &#123;
height: 100%; height: 100%;
} }
} }
}` }
`
}) })
export class Documentation { } export class Documentation {}

5
src/app/pages/empty/empty.ts
View File

@@ -3,10 +3,9 @@ import { Component } from '@angular/core';
@Component({ @Component({
selector: 'app-empty', selector: 'app-empty',
standalone: true, standalone: true,
template: ` template: ` <div class="card">
<div class="card">
<div class="font-semibold text-xl mb-4">Empty Page</div> <div class="font-semibold text-xl mb-4">Empty Page</div>
<p>Use this page to start from scratch and place your custom content.</p> <p>Use this page to start from scratch and place your custom content.</p>
</div>` </div>`
}) })
export class Empty { } export class Empty {}

11
src/app/pages/landing/components/featureswidget.ts
View File

@@ -3,10 +3,8 @@ import { CommonModule } from '@angular/common';
@Component({ @Component({
selector: 'features-widget', selector: 'features-widget',
standalone:true, standalone: true,
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">
@@ -136,7 +134,6 @@ import { CommonModule } from '@angular/common';
</div> </div>
</div> </div>
</div> </div>
</div>`, </div>`
}) })
export class FeaturesWidget { export class FeaturesWidget {}
}

6
src/app/pages/landing/components/footerwidget.ts
View File

@@ -8,7 +8,7 @@ import { Router, RouterModule } from '@angular/router';
<div class="py-12 px-12 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-6 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"
@@ -66,8 +66,8 @@ import { Router, RouterModule } from '@angular/router';
</div> </div>
</div> </div>
</div> </div>
`, `
}) })
export class FooterWidget { export class FooterWidget {
constructor(public router: Router) { } constructor(public router: Router) {}
} }

6
src/app/pages/landing/components/herowidget.ts
View File

@@ -20,8 +20,6 @@ import { ButtonModule } from 'primeng/button';
<img src="/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9/12 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>
`, `
}) })
export class HeroWidget { export class HeroWidget {}
}

6
src/app/pages/landing/components/highlightswidget.ts
View File

@@ -41,8 +41,6 @@ import { Component } from '@angular/core';
</div> </div>
</div> </div>
</div> </div>
`, `
}) })
export class HighlightsWidget { export class HighlightsWidget {}
}

9
src/app/pages/notfound/notfound.ts
View File

@@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import {RouterModule} from '@angular/router'; import { RouterModule } from '@angular/router';
import { ButtonModule } from 'primeng/button'; import { ButtonModule } from 'primeng/button';
import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigurator'; import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigurator';
@@ -7,8 +7,7 @@ import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigura
selector: 'app-notfound', selector: 'app-notfound',
standalone: true, standalone: true,
imports: [RouterModule, AppFloatingConfigurator, ButtonModule], imports: [RouterModule, AppFloatingConfigurator, ButtonModule],
template: ` template: ` <app-floating-configurator />
<app-floating-configurator />
<div class="flex items-center justify-center min-h-screen overflow-hidden"> <div class="flex items-center justify-center min-h-screen overflow-hidden">
<div class="flex flex-col items-center justify-center"> <div class="flex flex-col items-center justify-center">
<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"> <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">
@@ -64,6 +63,6 @@ import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigura
</div> </div>
</div> </div>
</div> </div>
</div>`, </div>`
}) })
export class Notfound { } export class Notfound {}

9
src/app/pages/service/icon.service.ts
View File

@@ -4,8 +4,7 @@ import { map } from 'rxjs/operators';
@Injectable() @Injectable()
export class IconService { export class IconService {
constructor(private http: HttpClient) {}
constructor(private http: HttpClient) { }
icons!: any[]; icons!: any[];
@@ -14,9 +13,11 @@ export class IconService {
apiUrl = 'assets/demo/data/icons.json'; apiUrl = 'assets/demo/data/icons.json';
getIcons() { getIcons() {
return this.http.get(this.apiUrl).pipe(map((response: any) => { return this.http.get(this.apiUrl).pipe(
map((response: any) => {
this.icons = response.icons; this.icons = response.icons;
return this.icons; return this.icons;
})); })
);
} }
} }

23
src/app/pages/uikit/buttondemo.ts
View File

@@ -1,8 +1,8 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {ButtonModule} from "primeng/button"; import { ButtonModule } from 'primeng/button';
import {ButtonGroupModule} from "primeng/buttongroup"; import { ButtonGroupModule } from 'primeng/buttongroup';
import {SplitButtonModule} from "primeng/splitbutton"; import { SplitButtonModule } from 'primeng/splitbutton';
import {MenuItem} from "primeng/api"; import { MenuItem } from 'primeng/api';
@Component({ @Component({
selector: 'app-button-demo', selector: 'app-button-demo',
@@ -174,28 +174,19 @@ import {MenuItem} from "primeng/api";
</div> </div>
</div> </div>
</div> </div>
</div> </div> `
`
}) })
export class ButtonDemo implements OnInit { export class ButtonDemo implements OnInit {
items: MenuItem[] = []; items: MenuItem[] = [];
loading = [false, false, false, false]; loading = [false, false, false, false];
ngOnInit() { ngOnInit() {
this.items = [ this.items = [{ label: 'Update', icon: 'pi pi-refresh' }, { label: 'Delete', icon: 'pi pi-times' }, { label: 'Angular.io', icon: 'pi pi-info', url: 'http://angular.io' }, { separator: true }, { label: 'Setup', icon: 'pi pi-cog' }];
{ label: 'Update', icon: 'pi pi-refresh' },
{ label: 'Delete', icon: 'pi pi-times' },
{ label: 'Angular.io', icon: 'pi pi-info', url: 'http://angular.io' },
{ separator: true },
{ label: 'Setup', icon: 'pi pi-cog' }
];
} }
load(index: number) { load(index: number) {
this.loading[index] = true; this.loading[index] = true;
setTimeout(() => this.loading[index] = false, 1000); setTimeout(() => (this.loading[index] = false), 1000);
} }
} }

67
src/app/pages/uikit/chartdemo.ts
View File

@@ -7,13 +7,10 @@ import { LayoutService } from '../../layout/service/layout.service';
@Component({ @Component({
selector: 'app-chart-demo', selector: 'app-chart-demo',
standalone:true, standalone: true,
imports: [ imports: [CommonModule, ChartModule, FluidModule],
CommonModule, template: `
ChartModule, <p-fluid class="grid grid-cols-12 gap-8">
FluidModule
],
template: ` <p-fluid class="grid grid-cols-12 gap-8">
<div class="col-span-12 xl:col-span-6"> <div class="col-span-12 xl:col-span-6">
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Linear</div> <div class="font-semibold text-xl mb-4">Linear</div>
@@ -51,10 +48,9 @@ import { LayoutService } from '../../layout/service/layout.service';
</div> </div>
</div> </div>
</p-fluid> </p-fluid>
`, `
}) })
export class ChartDemo { export class ChartDemo {
lineData: any; lineData: any;
barData: any; barData: any;
@@ -77,9 +73,7 @@ export class ChartDemo {
subscription: Subscription; subscription: Subscription;
constructor(private layoutService: LayoutService) { constructor(private layoutService: LayoutService) {
this.subscription = this.layoutService.configUpdate$ this.subscription = this.layoutService.configUpdate$.pipe(debounceTime(25)).subscribe(() => {
.pipe(debounceTime(25))
.subscribe(() => {
this.initCharts(); this.initCharts();
}); });
} }
@@ -141,7 +135,7 @@ export class ChartDemo {
color: surfaceBorder, color: surfaceBorder,
drawBorder: false drawBorder: false
} }
}, }
} }
}; };
@@ -150,17 +144,10 @@ export class ChartDemo {
datasets: [ datasets: [
{ {
data: [540, 325, 702], data: [540, 325, 702],
backgroundColor: [ backgroundColor: [documentStyle.getPropertyValue('--p-indigo-500'), documentStyle.getPropertyValue('--p-purple-500'), documentStyle.getPropertyValue('--p-teal-500')],
documentStyle.getPropertyValue('--p-indigo-500'), hoverBackgroundColor: [documentStyle.getPropertyValue('--p-indigo-400'), documentStyle.getPropertyValue('--p-purple-400'), documentStyle.getPropertyValue('--p-teal-400')]
documentStyle.getPropertyValue('--p-purple-500'), }
documentStyle.getPropertyValue('--p-teal-500')
],
hoverBackgroundColor: [
documentStyle.getPropertyValue('--p-indigo-400'),
documentStyle.getPropertyValue('--p-purple-400'),
documentStyle.getPropertyValue('--p-teal-400')
] ]
}]
}; };
this.pieOptions = { this.pieOptions = {
@@ -183,7 +170,7 @@ export class ChartDemo {
fill: false, fill: false,
backgroundColor: documentStyle.getPropertyValue('--p-primary-500'), backgroundColor: documentStyle.getPropertyValue('--p-primary-500'),
borderColor: documentStyle.getPropertyValue('--p-primary-500'), borderColor: documentStyle.getPropertyValue('--p-primary-500'),
tension: .4 tension: 0.4
}, },
{ {
label: 'Second Dataset', label: 'Second Dataset',
@@ -191,7 +178,7 @@ export class ChartDemo {
fill: false, fill: false,
backgroundColor: documentStyle.getPropertyValue('--p-primary-200'), backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
borderColor: documentStyle.getPropertyValue('--p-primary-200'), borderColor: documentStyle.getPropertyValue('--p-primary-200'),
tension: .4 tension: 0.4
} }
] ]
}; };
@@ -222,32 +209,19 @@ export class ChartDemo {
color: surfaceBorder, color: surfaceBorder,
drawBorder: false drawBorder: false
} }
}, }
} }
}; };
this.polarData = { this.polarData = {
datasets: [{ datasets: [
data: [ {
11, data: [11, 16, 7, 3],
16, backgroundColor: [documentStyle.getPropertyValue('--p-indigo-500'), documentStyle.getPropertyValue('--p-purple-500'), documentStyle.getPropertyValue('--p-teal-500'), documentStyle.getPropertyValue('--p-orange-500')],
7,
3
],
backgroundColor: [
documentStyle.getPropertyValue('--p-indigo-500'),
documentStyle.getPropertyValue('--p-purple-500'),
documentStyle.getPropertyValue('--p-teal-500'),
documentStyle.getPropertyValue('--p-orange-500')
],
label: 'My dataset' label: 'My dataset'
}], }
labels: [ ],
'Indigo', labels: ['Indigo', 'Purple', 'Teal', 'Orange']
'Purple',
'Teal',
'Orange'
]
}; };
this.polarOptions = { this.polarOptions = {
@@ -314,5 +288,4 @@ export class ChartDemo {
this.subscription.unsubscribe(); this.subscription.unsubscribe();
} }
} }
} }

6
src/app/pages/uikit/filedemo.ts
View File

@@ -7,8 +7,8 @@ import { ToastModule } from 'primeng/toast';
@Component({ @Component({
selector: 'app-file-demo', selector: 'app-file-demo',
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">
@@ -39,7 +39,6 @@ import { ToastModule } from 'primeng/toast';
providers: [MessageService] providers: [MessageService]
}) })
export class FileDemo { export class FileDemo {
uploadedFiles: any[] = []; uploadedFiles: any[] = [];
constructor(private messageService: MessageService) {} constructor(private messageService: MessageService) {}
@@ -55,5 +54,4 @@ export class FileDemo {
onBasicUpload() { onBasicUpload() {
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' });
} }
} }

17
src/app/pages/uikit/formlayoutdemo.ts
View File

@@ -1,16 +1,16 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import {FluidModule} from "primeng/fluid"; import { FluidModule } from 'primeng/fluid';
import {InputTextModule} from "primeng/inputtext"; import { InputTextModule } from 'primeng/inputtext';
import {ButtonModule} from "primeng/button"; import { ButtonModule } from 'primeng/button';
import {SelectModule} from "primeng/select"; import { SelectModule } from 'primeng/select';
import {FormsModule} from "@angular/forms"; import { FormsModule } from '@angular/forms';
import {TextareaModule} from "primeng/textarea"; import { TextareaModule } from 'primeng/textarea';
@Component({ @Component({
selector: 'app-formlayout-demo', selector: 'app-formlayout-demo',
standalone: true, standalone: true,
imports: [InputTextModule, FluidModule, ButtonModule, SelectModule, FormsModule, TextareaModule], imports: [InputTextModule, FluidModule, ButtonModule, SelectModule, FormsModule, TextareaModule],
template:`<p-fluid> template: `<p-fluid>
<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 flex flex-col gap-4"> <div class="card flex flex-col gap-4">
@@ -116,7 +116,7 @@ import {TextareaModule} from "primeng/textarea";
</div> </div>
</div> </div>
</div> </div>
</p-fluid>`, </p-fluid>`
}) })
export class FormLayoutDemo { export class FormLayoutDemo {
dropdownItems = [ dropdownItems = [
@@ -126,5 +126,4 @@ export class FormLayoutDemo {
]; ];
dropdownItem = null; dropdownItem = null;
} }

128
src/app/pages/uikit/inputdemo.ts
View File

@@ -1,30 +1,30 @@
import {Component, inject, OnInit} from '@angular/core'; import { Component, inject, OnInit } from '@angular/core';
import {InputTextModule} from "primeng/inputtext"; import { InputTextModule } from 'primeng/inputtext';
import {ButtonModule} from "primeng/button"; import { ButtonModule } from 'primeng/button';
import {CommonModule} from "@angular/common"; import { CommonModule } from '@angular/common';
import {FormsModule} from "@angular/forms"; import { FormsModule } from '@angular/forms';
import {CheckboxModule} from "primeng/checkbox"; import { CheckboxModule } from 'primeng/checkbox';
import {RadioButtonModule} from "primeng/radiobutton"; import { RadioButtonModule } from 'primeng/radiobutton';
import {SelectButtonModule} from "primeng/selectbutton"; import { SelectButtonModule } from 'primeng/selectbutton';
import {InputGroupModule} from "primeng/inputgroup"; import { InputGroupModule } from 'primeng/inputgroup';
import {FluidModule} from "primeng/fluid"; import { FluidModule } from 'primeng/fluid';
import {IconFieldModule} from "primeng/iconfield"; import { IconFieldModule } from 'primeng/iconfield';
import {InputIconModule} from "primeng/inputicon"; import { InputIconModule } from 'primeng/inputicon';
import {FloatLabelModule} from "primeng/floatlabel"; import { FloatLabelModule } from 'primeng/floatlabel';
import {AutoCompleteModule} from "primeng/autocomplete"; import { AutoCompleteModule } from 'primeng/autocomplete';
import {InputNumberModule} from "primeng/inputnumber"; import { InputNumberModule } from 'primeng/inputnumber';
import {SliderModule} from "primeng/slider"; import { SliderModule } from 'primeng/slider';
import {RatingModule} from "primeng/rating"; import { RatingModule } from 'primeng/rating';
import {ColorPickerModule} from "primeng/colorpicker"; import { ColorPickerModule } from 'primeng/colorpicker';
import {KnobModule} from "primeng/knob"; import { KnobModule } from 'primeng/knob';
import {SelectModule} from "primeng/select"; import { SelectModule } from 'primeng/select';
import {DatePickerModule} from "primeng/datepicker"; import { DatePickerModule } from 'primeng/datepicker';
import {ToggleSwitchModule} from "primeng/toggleswitch"; import { ToggleSwitchModule } from 'primeng/toggleswitch';
import {TreeSelectModule} from "primeng/treeselect"; import { TreeSelectModule } from 'primeng/treeselect';
import {MultiSelectModule} from "primeng/multiselect"; import { MultiSelectModule } from 'primeng/multiselect';
import {ListboxModule} from "primeng/listbox"; import { ListboxModule } from 'primeng/listbox';
import {InputGroupAddonModule} from "primeng/inputgroupaddon"; import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
import {TextareaModule} from "primeng/textarea"; import { TextareaModule } from 'primeng/textarea';
import { ToggleButtonModule } from 'primeng/togglebutton'; import { ToggleButtonModule } from 'primeng/togglebutton';
import { CountryService } from '../service/country.service'; import { CountryService } from '../service/country.service';
import { NodeService } from '../service/node.service'; import { NodeService } from '../service/node.service';
@@ -62,30 +62,29 @@ import { TreeNode } from 'primeng/api';
InputGroupAddonModule, InputGroupAddonModule,
TextareaModule TextareaModule
], ],
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" />
<input pInputText type="text" placeholder="Disabled" [disabled]="true"/> <input pInputText type="text" placeholder="Disabled" [disabled]="true" />
<input pInputText type="text" placeholder="Invalid" class="ng-dirty ng-invalid"/> <input pInputText type="text" placeholder="Invalid" class="ng-dirty ng-invalid" />
</div> </div>
<div class="font-semibold text-xl">Icons</div> <div class="font-semibold text-xl">Icons</div>
<p-iconfield> <p-iconfield>
<p-inputicon class="pi pi-user"/> <p-inputicon class="pi pi-user" />
<input pInputText type="text" placeholder="Username"/> <input pInputText type="text" placeholder="Username" />
</p-iconfield> </p-iconfield>
<p-iconfield iconPosition="left"> <p-iconfield iconPosition="left">
<input pInputText type="text" placeholder="Search"/> <input pInputText type="text" placeholder="Search" />
<p-inputicon class="pi pi-search"/> <p-inputicon class="pi pi-search" />
</p-iconfield> </p-iconfield>
<div class="font-semibold text-xl">Float Label</div> <div class="font-semibold text-xl">Float Label</div>
<p-floatlabel> <p-floatlabel>
<input pInputText id="username" type="text" [(ngModel)]="floatValue"/> <input pInputText id="username" type="text" [(ngModel)]="floatValue" />
<label for="username">Username</label> <label for="username">Username</label>
</p-floatlabel> </p-floatlabel>
@@ -93,9 +92,7 @@ import { TreeNode } from 'primeng/api';
<textarea pTextarea placeholder="Your Message" [autoResize]="true" rows="3" cols="30"></textarea> <textarea pTextarea placeholder="Your Message" [autoResize]="true" rows="3" cols="30"></textarea>
<div class="font-semibold text-xl">AutoComplete</div> <div class="font-semibold text-xl">AutoComplete</div>
<p-autocomplete [(ngModel)]="selectedAutoValue" [suggestions]="autoFilteredValue" optionLabel="name" <p-autocomplete [(ngModel)]="selectedAutoValue" [suggestions]="autoFilteredValue" optionLabel="name" placeholder="Search" dropdown multiple display="chip" (completeMethod)="searchCountry($event)" />
placeholder="Search" dropdown multiple display="chip"
(completeMethod)="searchCountry($event)"/>
<div class="font-semibold text-xl">DatePicker</div> <div class="font-semibold text-xl">DatePicker</div>
<p-datepicker [showIcon]="true" [showButtonBar]="true" [(ngModel)]="calendarValue"></p-datepicker> <p-datepicker [showIcon]="true" [showButtonBar]="true" [(ngModel)]="calendarValue"></p-datepicker>
@@ -106,23 +103,22 @@ import { TreeNode } 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">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" />
</div> </div>
<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">ColorPicker</div> <div class="font-semibold text-xl">ColorPicker</div>
<p-colorpicker [style]="{width: '2rem'}" [(ngModel)]="colorValue"/> <p-colorpicker [style]="{ width: '2rem' }" [(ngModel)]="colorValue" />
</div> </div>
</div> </div>
<div class="font-semibold text-xl">Knob</div> <div class="font-semibold text-xl">Knob</div>
<p-knob [(ngModel)]="knobValue" [step]="10" [min]="-50" [max]="50" valueTemplate="{value}%"/> <p-knob [(ngModel)]="knobValue" [step]="10" [min]="-50" [max]="50" valueTemplate="{value}%" />
</div> </div>
</div> </div>
<div class="md:w-1/2"> <div class="md:w-1/2">
@@ -130,15 +126,15 @@ import { TreeNode } from 'primeng/api';
<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">
<p-radiobutton id="option1" name="option" value="Chicago" [(ngModel)]="radioValue"/> <p-radiobutton id="option1" name="option" value="Chicago" [(ngModel)]="radioValue" />
<label for="option1" class="leading-none ml-2">Chicago</label> <label for="option1" class="leading-none ml-2">Chicago</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<p-radiobutton id="option2" name="option" value="Los Angeles" [(ngModel)]="radioValue"/> <p-radiobutton id="option2" name="option" value="Los Angeles" [(ngModel)]="radioValue" />
<label for="option2" class="leading-none ml-2">Los Angeles</label> <label for="option2" class="leading-none ml-2">Los Angeles</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<p-radiobutton id="option3" name="option" value="New York" [(ngModel)]="radioValue"/> <p-radiobutton id="option3" name="option" value="New York" [(ngModel)]="radioValue" />
<label for="option3" class="leading-none ml-2">New York</label> <label for="option3" class="leading-none ml-2">New York</label>
</div> </div>
</div> </div>
@@ -146,31 +142,29 @@ import { TreeNode } from 'primeng/api';
<div class="font-semibold text-xl">Checkbox</div> <div class="font-semibold text-xl">Checkbox</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">
<p-checkbox id="checkOption1" name="option" value="Chicago" [(ngModel)]="checkboxValue"/> <p-checkbox id="checkOption1" name="option" value="Chicago" [(ngModel)]="checkboxValue" />
<label for="checkOption1" class="ml-2">Chicago</label> <label for="checkOption1" class="ml-2">Chicago</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<p-checkbox id="checkOption2" name="option" value="Los Angeles" <p-checkbox id="checkOption2" name="option" value="Los Angeles" [(ngModel)]="checkboxValue" />
[(ngModel)]="checkboxValue"/>
<label for="checkOption2" class="ml-2">Los Angeles</label> <label for="checkOption2" class="ml-2">Los Angeles</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<p-checkbox id="checkOption3" name="option" value="New York" [(ngModel)]="checkboxValue"/> <p-checkbox id="checkOption3" name="option" value="New York" [(ngModel)]="checkboxValue" />
<label for="checkOption3" class="ml-2">New York</label> <label for="checkOption3" class="ml-2">New York</label>
</div> </div>
</div> </div>
<div class="font-semibold text-xl">ToggleSwitch</div> <div class="font-semibold text-xl">ToggleSwitch</div>
<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" />
<div class="font-semibold text-xl">Select</div> <div class="font-semibold text-xl">Select</div>
<p-select [(ngModel)]="dropdownValue" [options]="dropdownValues" optionLabel="name" <p-select [(ngModel)]="dropdownValue" [options]="dropdownValues" optionLabel="name" placeholder="Select" />
placeholder="Select"/>
<div class="font-semibold text-xl">MultiSelect</div> <div class="font-semibold text-xl">MultiSelect</div>
<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">
@@ -196,10 +190,10 @@ import { TreeNode } 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">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' }" />
<div class="font-semibold text-xl">SelectButton</div> <div class="font-semibold text-xl">SelectButton</div>
<p-selectbutton [(ngModel)]="selectButtonValue" [options]="selectButtonValues" optionLabel="name"/> <p-selectbutton [(ngModel)]="selectButtonValue" [options]="selectButtonValues" optionLabel="name" />
</div> </div>
</div> </div>
</p-fluid> </p-fluid>
@@ -212,7 +206,7 @@ import { TreeNode } from 'primeng/api';
<p-inputgroup-addon> <p-inputgroup-addon>
<i class="pi pi-user"></i> <i class="pi pi-user"></i>
</p-inputgroup-addon> </p-inputgroup-addon>
<input pInputText placeholder="Username"/> <input pInputText placeholder="Username" />
</p-inputgroup> </p-inputgroup>
<p-inputgroup> <p-inputgroup>
<p-inputgroup-addon> <p-inputgroup-addon>
@@ -221,21 +215,21 @@ import { TreeNode } from 'primeng/api';
<p-inputgroup-addon> <p-inputgroup-addon>
<i class="pi pi-star-fill"></i> <i class="pi pi-star-fill"></i>
</p-inputgroup-addon> </p-inputgroup-addon>
<p-inputnumber placeholder="Price"/> <p-inputnumber placeholder="Price" />
<p-inputgroup-addon>$</p-inputgroup-addon> <p-inputgroup-addon>$</p-inputgroup-addon>
<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-6"> <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" />
</p-inputgroup> </p-inputgroup>
<p-inputgroup> <p-inputgroup>
<p-inputgroup-addon> <p-inputgroup-addon>
<p-checkbox [(ngModel)]="inputGroupValue" [binary]="true"/> <p-checkbox [(ngModel)]="inputGroupValue" [binary]="true" />
</p-inputgroup-addon> </p-inputgroup-addon>
<input pInputText placeholder="Confirm"/> <input pInputText placeholder="Confirm" />
</p-inputgroup> </p-inputgroup>
</div> </div>
</div> </div>
@@ -304,7 +298,7 @@ export class InputDemo implements OnInit {
toggleValue: boolean = false; toggleValue: boolean = false;
selectButtonValue: any = null selectButtonValue: any = null;
selectButtonValues: any = [{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]; selectButtonValues: any = [{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }];
@@ -321,7 +315,7 @@ export class InputDemo implements OnInit {
nodeService = inject(NodeService); nodeService = inject(NodeService);
ngOnInit() { ngOnInit() {
this.countryService.getCountries().then(countries => { this.countryService.getCountries().then((countries) => {
this.autoValue = countries; this.autoValue = countries;
}); });

14
src/app/pages/uikit/messagesdemo.ts
View File

@@ -10,8 +10,8 @@ import { FormsModule } from '@angular/forms';
@Component({ @Component({
selector: 'app-messages-demo', selector: 'app-messages-demo',
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">
@@ -25,7 +25,7 @@ import { FormsModule } from '@angular/forms';
<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>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
@@ -52,14 +52,13 @@ import { FormsModule } from '@angular/forms';
providers: [MessageService] providers: [MessageService]
}) })
export class MessagesDemo { export class MessagesDemo {
msgs: ToastMessageOptions[] | null = []; msgs: ToastMessageOptions[] | null = [];
username: string | undefined username: string | undefined;
email: string | undefined email: string | undefined;
constructor(private service: MessageService) { } constructor(private service: MessageService) {}
showInfoViaToast() { showInfoViaToast() {
this.service.add({ key: 'tst', severity: 'info', summary: 'Info Message', detail: 'PrimeNG rocks' }); this.service.add({ key: 'tst', severity: 'info', summary: 'Info Message', detail: 'PrimeNG rocks' });
@@ -96,5 +95,4 @@ export class MessagesDemo {
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' });
} }
} }

59
src/app/pages/uikit/panelsdemo.ts
View File

@@ -19,7 +19,7 @@ import { InputIconModule } from 'primeng/inputicon';
@Component({ @Component({
selector: 'app-panels-demo', selector: 'app-panels-demo',
standalone:true, standalone: true,
imports: [ imports: [
CommonModule, CommonModule,
FormsModule, FormsModule,
@@ -52,7 +52,7 @@ import { InputIconModule } from 'primeng/inputicon';
<ng-template #center> <ng-template #center>
<p-iconfield> <p-iconfield>
<p-inputicon> <p-inputicon>
<i class="pi pi-search" ></i> <i class="pi pi-search"></i>
</p-inputicon> </p-inputicon>
<input pInputText placeholder="Search" /> <input pInputText placeholder="Search" />
</p-iconfield> </p-iconfield>
@@ -71,9 +71,9 @@ import { InputIconModule } from 'primeng/inputicon';
<p-accordion-header>Header I</p-accordion-header> <p-accordion-header>Header I</p-accordion-header>
<p-accordion-content> <p-accordion-content>
<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
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 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
laborum. mollit anim id est laborum.
</p> </p>
</p-accordion-content> </p-accordion-content>
</p-accordion-panel> </p-accordion-panel>
@@ -82,8 +82,9 @@ import { InputIconModule } from 'primeng/inputicon';
<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
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. 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.
</p> </p>
</p-accordion-content> </p-accordion-content>
</p-accordion-panel> </p-accordion-panel>
@@ -92,8 +93,9 @@ import { InputIconModule } from 'primeng/inputicon';
<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
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. 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.
</p> </p>
</p-accordion-content> </p-accordion-content>
</p-accordion-panel> </p-accordion-panel>
@@ -110,21 +112,23 @@ import { InputIconModule } from 'primeng/inputicon';
<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
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 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
laborum. mollit anim id est 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
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. 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.
</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,
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. 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>
</p-tabpanel> </p-tabpanel>
</p-tabpanels> </p-tabpanels>
@@ -135,24 +139,16 @@ import { InputIconModule } from 'primeng/inputicon';
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Panel</div> <div class="font-semibold text-xl mb-4">Panel</div>
<p-panel header="Header" [toggleable]="true" class="line-height-3 m-0"> <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 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
dolore magna aliqua. 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
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. laborum.
</p-panel> </p-panel>
</div> </div>
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Fieldset</div> <div class="font-semibold text-xl mb-4">Fieldset</div>
<p-fieldset legend="Legend" [toggleable]="true" class="line-height-3 m-0"> <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 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
dolore magna aliqua. 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
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. laborum.
</p-fieldset> </p-fieldset>
</div> </div>
@@ -165,11 +161,11 @@ import { InputIconModule } from 'primeng/inputicon';
<div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-3 py-5"> <div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-3 py-5">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<label for="username">Username</label> <label for="username">Username</label>
<input pInputText id="username" type="text"/> <input pInputText id="username" type="text" />
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<label for="password">Password</label> <label for="password">Password</label>
<input pInputText id="password" type="password"/> <input pInputText id="password" type="password" />
</div> </div>
<div class="flex"> <div class="flex">
<p-button label="Login" icon="pi pi-user" class="w-full max-w-[17.35rem] mx-auto"></p-button> <p-button label="Login" icon="pi pi-user" class="w-full max-w-[17.35rem] mx-auto"></p-button>
@@ -211,7 +207,7 @@ import { InputIconModule } from 'primeng/inputicon';
</p-splitter> </p-splitter>
</div> </div>
</div> </div>
`, `
}) })
export class PanelsDemo { export class PanelsDemo {
items: MenuItem[] = [ items: MenuItem[] = [
@@ -232,5 +228,4 @@ export class PanelsDemo {
icon: 'pi pi-home' icon: 'pi pi-home'
} }
]; ];
} }

18
src/app/pages/uikit/treedemo.ts
View File

@@ -1,9 +1,9 @@
import {Component, inject, OnInit} from '@angular/core'; import { Component, inject, OnInit } from '@angular/core';
import { TreeNode} from 'primeng/api'; import { TreeNode } from 'primeng/api';
import {TreeModule} from "primeng/tree"; import { TreeModule } from 'primeng/tree';
import {FormsModule} from "@angular/forms"; import { FormsModule } from '@angular/forms';
import {TreeTableModule} from "primeng/treetable"; import { TreeTableModule } from 'primeng/treetable';
import {CommonModule} from "@angular/common"; import { CommonModule } from '@angular/common';
import { NodeService } from '../service/node.service'; import { NodeService } from '../service/node.service';
@Component({ @Component({
@@ -51,11 +51,11 @@ export class TreeDemo implements OnInit {
cols: any[] = []; cols: any[] = [];
nodeService = inject(NodeService) nodeService = inject(NodeService);
ngOnInit() { ngOnInit() {
this.nodeService.getFiles().then(files => this.treeValue = files); this.nodeService.getFiles().then((files) => (this.treeValue = files));
this.nodeService.getFilesystem().then(files => this.treeTableValue = files); this.nodeService.getFilesystem().then((files) => (this.treeTableValue = files));
this.cols = [ this.cols = [
{ field: 'name', header: 'Name' }, { field: 'name', header: 'Name' },

2
src/app/pages/uikit/uikit.routes.ts
View File

@@ -16,7 +16,7 @@ import { TreeDemo } from './treedemo';
import { MenuDemo } from './menudemo'; import { MenuDemo } from './menudemo';
export default [ export default [
{ path: 'button', data: { breadcrumb: 'Button' }, component: ButtonDemo}, { path: 'button', data: { breadcrumb: 'Button' }, component: ButtonDemo },
{ path: 'charts', data: { breadcrumb: 'Charts' }, component: ChartDemo }, { path: 'charts', data: { breadcrumb: 'Charts' }, component: ChartDemo },
{ path: 'file', data: { breadcrumb: 'File' }, component: FileDemo }, { path: 'file', data: { breadcrumb: 'File' }, component: FileDemo },
{ path: 'formlayout', data: { breadcrumb: 'Form Layout' }, component: FormLayoutDemo }, { path: 'formlayout', data: { breadcrumb: 'Form Layout' }, component: FormLayoutDemo },

18
src/index.html
View File

@@ -1,18 +1,16 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8">
<title>Sakai - PrimeNG</title> <title>Sakai - PrimeNG</title>
<base href="/"> <base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1.o"> <meta name="viewport" content="width=device-width, initial-scale=1.o" />
<link rel="preconnect" href="https://primefaces.org" /> <link rel="preconnect" href="https://primefaces.org" />
<link rel="icon" type="image/x-icon" href="https://primefaces.org/cdn/primeng/images/favicon.png" /> <link rel="icon" type="image/x-icon" href="https://primefaces.org/cdn/primeng/images/favicon.png" />
<link href="https://fonts.cdnfonts.com/css/lato" rel="stylesheet"> <link href="https://fonts.cdnfonts.com/css/lato" rel="stylesheet" />
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>
</body> </body>
</html> </html>

4
src/main.ts
View File

@@ -2,6 +2,4 @@ import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app.config'; import { appConfig } from './app.config';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));