Code format

.vscode/extensions.json

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

.vscode/launch.json

@@ -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"
-    }
-  ]
-}

.vscode/tasks.json

@@ -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"
-          }
-        }
-      }
-    }
-  ]
-}

package.json

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

src/app.component.ts

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

src/app.routes.ts

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

src/app/layout/core/app.configurator.ts

@@ -2,13 +2,13 @@ import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { Component, computed, inject, PLATFORM_ID } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 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 { SelectButtonModule } from 'primeng/selectbutton';
 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 = {
     Aura,

src/app/layout/core/app.floatingconfigurator.ts

@@ -11,21 +11,11 @@ import { LayoutService} from '../service/layout.service';
         <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" />
             <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 />
             </div>
         </div>
-  `,
+    `
 })
 export class AppFloatingConfigurator {
     LayoutService = inject(LayoutService);

src/app/layout/core/app.footer.ts

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

src/app/layout/core/app.menu.ts

@@ -7,21 +7,15 @@ import { AppMenuitem } from './app.menuitem';
 @Component({
     selector: 'app-menu',
     standalone: true,
-    imports: [
+    imports: [CommonModule, AppMenuitem, RouterModule],
-        CommonModule,
-        AppMenuitem,
-        RouterModule
-    ],
     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 *ngIf="item.separator" class="menu-separator"></li>
         </ng-container>
-    </ul>
+    </ul> `
-    `,
 })
 export class AppMenu {
-
     model: MenuItem[] = [];
 
     ngOnInit() {

src/app/layout/core/app.menuitem.ts

@@ -15,17 +15,29 @@ import { LayoutService } from '../service/layout.service';
     template: `
         <ng-container>
             <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>
                 <span class="layout-menuitem-text">{{ item.label }}</span>
                 <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
             </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>
                 <span class="layout-menuitem-text">{{ item.label }}</span>
                 <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
@@ -40,19 +52,24 @@ import { LayoutService } from '../service/layout.service';
     `,
     animations: [
         trigger('children', [
-            state('collapsed', style({
+            state(
+                'collapsed',
+                style({
                     height: '0'
-            })),
+                })
-            state('expanded', style({
+            ),
+            state(
+                'expanded',
+                style({
                     height: '*'
-            })),
+                })
+            ),
             transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
         ])
     ],
-    providers: [LayoutService],
+    providers: [LayoutService]
 })
 export class AppMenuitem {
-
     @Input() item!: MenuItem;
 
     @Input() index!: number;
@@ -67,15 +84,17 @@ export class AppMenuitem {
 
     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(() => {
                 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 + '-')) {
                         this.active = false;
                     }
@@ -87,8 +106,7 @@ export class AppMenuitem {
             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) {
                 this.updateActiveStateFromRoute();
             }
@@ -132,7 +150,7 @@ export class AppMenuitem {
     }
 
     get submenuAnimation() {
-        return this.root ? 'expanded' : (this.active ? 'expanded' : 'collapsed');
+        return this.root ? 'expanded' : this.active ? 'expanded' : 'collapsed';
     }
 
     @HostBinding('class.active-menuitem')

src/app/layout/core/app.sidebar.ts

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

src/app/layout/core/app.topbar.ts

@@ -58,15 +58,7 @@ import { LayoutService } from '../service/layout.service';
                 </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>
             </button>
 
@@ -90,7 +82,6 @@ import { LayoutService } from '../service/layout.service';
     </div>`
 })
 export class AppTopbar {
-
     items!: MenuItem[];
 
     constructor(public layoutService: LayoutService) {}
@@ -98,5 +89,4 @@ export class AppTopbar {
     toggleDarkMode() {
         this.layoutService.layoutConfig.update((state) => ({ ...state, darkTheme: !state.darkTheme }));
     }
-
 }

src/app/pages/auth/access.ts

@@ -7,15 +7,8 @@ import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigura
 @Component({
     selector: 'app-access',
     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="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%)">

src/app/pages/auth/auth.routes.ts

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

src/app/pages/auth/error.ts

@@ -8,8 +8,7 @@ import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigura
     selector: 'app-error',
     imports: [ButtonModule, RippleModule, RouterModule, AppFloatingConfigurator, ButtonModule],
     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="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%)">

src/app/pages/auth/login.ts

@@ -11,16 +11,7 @@ import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigura
 @Component({
     selector: 'app-login',
     standalone: true,
-    imports: [
+    imports: [ButtonModule, CheckboxModule, InputTextModule, PasswordModule, FormsModule, RouterModule, RippleModule, AppFloatingConfigurator],
-        ButtonModule,
-        CheckboxModule,
-        InputTextModule,
-        PasswordModule,
-        FormsModule,
-        RouterModule,
-        RippleModule,
-        AppFloatingConfigurator
-    ],
     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">
@@ -69,8 +60,7 @@ import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigura
                 </div>
             </div>
         </div>
-  `,
+    `
-
 })
 export class Login {
     email: string = '';

src/app/pages/crud/crud.ts

@@ -208,12 +208,12 @@ interface ExportColumn {
 
         <p-confirmdialog [style]="{ width: '450px' }" />
     `,
-    providers: [MessageService, ProductService, ConfirmationService],
+    providers: [MessageService, ProductService, ConfirmationService]
 })
 export class Crud implements OnInit {
     productDialog: boolean = false;
 
-    products = signal<Product[]>([])
+    products = signal<Product[]>([]);
 
     product!: Product;
 
@@ -232,7 +232,7 @@ export class Crud implements OnInit {
     constructor(
         private productService: ProductService,
         private messageService: MessageService,
-        private confirmationService: ConfirmationService,
+        private confirmationService: ConfirmationService
     ) {}
 
     exportCSV() {
@@ -294,8 +294,6 @@ export class Crud implements OnInit {
                     detail: 'Products Deleted',
                     life: 3000
                 });
-
-
             }
         });
     }

src/app/pages/dashboard/components/bestsellingwidget.ts

@@ -6,13 +6,8 @@ import { MenuModule } from 'primeng/menu';
 @Component({
     standalone: true,
     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="font-semibold text-xl">Best Selling Products</div>
             <div>
@@ -94,7 +89,7 @@ import { MenuModule } from 'primeng/menu';
                 </div>
             </li>
         </ul>
-      </div>`,
+    </div>`
 })
 export class BestSellingWidget {
     menu = null;

src/app/pages/dashboard/components/notificationswidget.ts

@@ -5,10 +5,7 @@ import { MenuModule } from 'primeng/menu';
 @Component({
     standalone: true,
     selector: 'app-notifications-widget',
-    imports: [
+    imports: [ButtonModule, MenuModule],
-        ButtonModule,
-        MenuModule,
-    ],
     template: `<div class="card">
         <div class="flex items-center justify-between mb-6">
             <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>
             </li>
         </ul>
-    </div>`,
+    </div>`
 })
 export class NotificationsWidget {
     items = [

src/app/pages/dashboard/components/recentsaleswidget.ts

@@ -8,12 +8,7 @@ import { Product, ProductService } from '../../service/product.service';
 @Component({
     standalone: true,
     selector: 'app-recent-sales-widget',
-    imports: [
+    imports: [CommonModule, TableModule, ButtonModule, RippleModule],
-        CommonModule,
-        TableModule,
-        ButtonModule,
-        RippleModule,
-    ],
     template: `<div class="card !mb-8">
         <div class="font-semibold text-xl mb-4">Recent Sales</div>
         <p-table [value]="products" [paginator]="true" [rows]="5" responsiveLayout="scroll">
@@ -28,7 +23,7 @@ import { Product, ProductService } from '../../service/product.service';
             <ng-template #body let-product>
                 <tr>
                     <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 style="width: 35%; min-width: 7rem;">{{ product.name }}</td>
                     <td style="width: 35%; min-width: 8rem;">{{ product.price | currency: 'USD' }}</td>
@@ -39,15 +34,14 @@ import { Product, ProductService } from '../../service/product.service';
             </ng-template>
         </p-table>
     </div>`,
-    providers: [ProductService],
+    providers: [ProductService]
 })
 export class RecentSalesWidget {
     products!: Product[];
 
-
     constructor(private productService: ProductService) {}
 
     ngOnInit() {
-        this.productService.getProductsSmall().then(data => this.products = data);
+        this.productService.getProductsSmall().then((data) => (this.products = data));
     }
 }

src/app/pages/dashboard/components/revenuestreamwidget.ts

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

src/app/pages/dashboard/components/statswidget.ts

@@ -64,6 +64,6 @@ import { CommonModule } from '@angular/common';
                 <span class="text-primary font-medium">85 </span>
                 <span class="text-muted-color">responded</span>
             </div>
-    </div>`,
+        </div>`
 })
 export class StatsWidget {}

src/app/pages/dashboard/dashboard.ts

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

src/app/pages/documentation/documentation.ts

@@ -10,21 +10,17 @@ import { CommonModule } from '@angular/common';
             <div>
                 <h2>Documentation</h2>
                 <h4>Getting Started</h4>
-        <p>Sakai is an application template for Angular and is distributed as a CLI project. Current versions is Angular
+                <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>
 
-        <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
 npm install
 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>
                 <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>
 
                 <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>
 
                 <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';
 import &#123; PrimeNGConfig &#125; from 'primeng/api';
@@ -88,9 +81,10 @@ export class AppComponent implements OnInit &#123;
 &#125;</code></pre>
 
                 <h5>Menu</h5>
-        <p>Menu is a separate component defined in <span class="text-primary font-medium">src/app/layout/app.menu.component.ts</span>
+                <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';
 import &#123; Component &#125; from '&#64;angular/core';
@@ -121,28 +115,24 @@ export class AppMenuComponent implements OnInit &#123;
 &#125;</code></pre>
 
                 <h4>Integration with Existing Angular CLI Projects</h4>
-        <p>Sakai structure is designed in a modular way so that it can easily be integrated with your existing
+                <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">
-          <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>
 
                 <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>
     `,
-  styles: `@media screen and (max-width: 991px) {
+    styles: `
+        @media screen and (max-width: 991px) {
             .video-container {
                 position: relative;
                 width: 100%;
@@ -157,6 +147,7 @@ export class AppMenuComponent implements OnInit &#123;
                     height: 100%;
                 }
             }
-  }`
+        }
+    `
 })
 export class Documentation {}

src/app/pages/empty/empty.ts

@@ -3,8 +3,7 @@ import { Component } from '@angular/core';
 @Component({
     selector: 'app-empty',
     standalone: true,
-  template: `
+    template: ` <div class="card">
-  <div class="card">
         <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>
     </div>`

src/app/pages/landing/components/featureswidget.ts

@@ -4,9 +4,7 @@ import { CommonModule } from '@angular/common';
 @Component({
     selector: 'features-widget',
     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">
         <div class="grid grid-cols-12 gap-4 justify-center">
             <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>`
 })
-export class FeaturesWidget {
+export class FeaturesWidget {}
-}

src/app/pages/landing/components/footerwidget.ts

@@ -66,7 +66,7 @@ import { Router, RouterModule } from '@angular/router';
                 </div>
             </div>
         </div>
-  `,
+    `
 })
 export class FooterWidget {
     constructor(public router: Router) {}

src/app/pages/landing/components/herowidget.ts

@@ -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" />
             </div>
         </div>
-  `,
+    `
 })
-export class HeroWidget {
+export class HeroWidget {}
-
-}

src/app/pages/landing/components/highlightswidget.ts

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

src/app/pages/notfound/notfound.ts

@@ -7,8 +7,7 @@ import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigura
     selector: 'app-notfound',
     standalone: true,
     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 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">
@@ -64,6 +63,6 @@ import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigura
                     </div>
                 </div>
             </div>
-  </div>`,
+        </div>`
 })
 export class Notfound {}

src/app/pages/service/icon.service.ts

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

src/app/pages/uikit/buttondemo.ts

@@ -1,8 +1,8 @@
 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({
     selector: 'app-button-demo',
@@ -174,28 +174,19 @@ import {MenuItem} from "primeng/api";
                 </div>
             </div>
         </div>
-  </div>
+    </div> `
-  `
 })
 export class ButtonDemo implements OnInit {
-
     items: MenuItem[] = [];
 
     loading = [false, false, false, false];
 
     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) {
         this.loading[index] = true;
-    setTimeout(() => this.loading[index] = false, 1000);
+        setTimeout(() => (this.loading[index] = false), 1000);
     }
-
 }

src/app/pages/uikit/chartdemo.ts

@@ -8,12 +8,9 @@ import { LayoutService } from '../../layout/service/layout.service';
 @Component({
     selector: 'app-chart-demo',
     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="card">
                     <div class="font-semibold text-xl mb-4">Linear</div>
@@ -51,10 +48,9 @@ import { LayoutService } from '../../layout/service/layout.service';
                 </div>
             </div>
         </p-fluid>
-    `,
+    `
 })
 export class ChartDemo {
-
     lineData: any;
 
     barData: any;
@@ -77,9 +73,7 @@ export class ChartDemo {
 
     subscription: Subscription;
     constructor(private layoutService: LayoutService) {
-        this.subscription = this.layoutService.configUpdate$
+        this.subscription = this.layoutService.configUpdate$.pipe(debounceTime(25)).subscribe(() => {
-            .pipe(debounceTime(25))
-            .subscribe(() => {
             this.initCharts();
         });
     }
@@ -141,7 +135,7 @@ export class ChartDemo {
                         color: surfaceBorder,
                         drawBorder: false
                     }
-                },
+                }
             }
         };
 
@@ -150,17 +144,10 @@ export class ChartDemo {
             datasets: [
                 {
                     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 = {
@@ -183,7 +170,7 @@ export class ChartDemo {
                     fill: false,
                     backgroundColor: documentStyle.getPropertyValue('--p-primary-500'),
                     borderColor: documentStyle.getPropertyValue('--p-primary-500'),
-                    tension: .4
+                    tension: 0.4
                 },
                 {
                     label: 'Second Dataset',
@@ -191,7 +178,7 @@ export class ChartDemo {
                     fill: false,
                     backgroundColor: 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,
                         drawBorder: false
                     }
-                },
+                }
             }
         };
 
         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'
-            }],
+                }
-            labels: [
+            ],
-                'Indigo',
+            labels: ['Indigo', 'Purple', 'Teal', 'Orange']
-                'Purple',
-                'Teal',
-                'Orange'
-            ]
         };
 
         this.polarOptions = {
@@ -314,5 +288,4 @@ export class ChartDemo {
             this.subscription.unsubscribe();
         }
     }
-
 }

src/app/pages/uikit/filedemo.ts

@@ -39,7 +39,6 @@ import { ToastModule } from 'primeng/toast';
     providers: [MessageService]
 })
 export class FileDemo {
-
     uploadedFiles: any[] = [];
 
     constructor(private messageService: MessageService) {}
@@ -55,5 +54,4 @@ export class FileDemo {
     onBasicUpload() {
         this.messageService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode' });
     }
-
 }

src/app/pages/uikit/formlayoutdemo.ts

@@ -1,10 +1,10 @@
 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({
     selector: 'app-formlayout-demo',
@@ -116,7 +116,7 @@ import {TextareaModule} from "primeng/textarea";
                 </div>
             </div>
         </div>
-    </p-fluid>`,
+    </p-fluid>`
 })
 export class FormLayoutDemo {
     dropdownItems = [
@@ -126,5 +126,4 @@ export class FormLayoutDemo {
     ];
 
     dropdownItem = null;
-
 }

src/app/pages/uikit/inputdemo.ts

@@ -1,30 +1,30 @@
 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 { CountryService } from '../service/country.service';
 import { NodeService } from '../service/node.service';
@@ -62,8 +62,7 @@ import { TreeNode } from 'primeng/api';
         InputGroupAddonModule,
         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="card flex flex-col gap-4">
                     <div class="font-semibold text-xl">InputText</div>
@@ -93,9 +92,7 @@ import { TreeNode } from 'primeng/api';
                     <textarea pTextarea placeholder="Your Message" [autoResize]="true" rows="3" cols="30"></textarea>
 
                     <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>
                     <p-datepicker [showIcon]="true" [showButtonBar]="true" [(ngModel)]="calendarValue"></p-datepicker>
@@ -110,7 +107,6 @@ import { TreeNode } from 'primeng/api';
                     <p-slider [(ngModel)]="sliderValue" />
 
                     <div class="flex flex-row mt-6">
-
                         <div class="flex flex-col gap-4 w-1/2">
                             <div class="font-semibold text-xl">Rating</div>
                             <p-rating [(ngModel)]="ratingValue" />
@@ -150,8 +146,7 @@ import { TreeNode } from 'primeng/api';
                             <label for="checkOption1" class="ml-2">Chicago</label>
                         </div>
                         <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>
                         </div>
                         <div class="flex items-center">
@@ -169,8 +164,7 @@ import { TreeNode } from 'primeng/api';
                     <p-listbox [(ngModel)]="listboxValue" [options]="listboxValues" optionLabel="name" [filter]="true" />
 
                     <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>
                     <p-multiselect [(ngModel)]="multiselectValue" [options]="multiselectValues" optionLabel="name" placeholder="Select Countries" [filter]="true">
@@ -304,7 +298,7 @@ export class InputDemo implements OnInit {
 
     toggleValue: boolean = false;
 
-    selectButtonValue: any = null
+    selectButtonValue: any = null;
 
     selectButtonValues: any = [{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }];
 
@@ -321,7 +315,7 @@ export class InputDemo implements OnInit {
     nodeService = inject(NodeService);
 
     ngOnInit() {
-        this.countryService.getCountries().then(countries => {
+        this.countryService.getCountries().then((countries) => {
             this.autoValue = countries;
         });
 

src/app/pages/uikit/messagesdemo.ts

@@ -52,12 +52,11 @@ import { FormsModule } from '@angular/forms';
     providers: [MessageService]
 })
 export class MessagesDemo {
-
     msgs: ToastMessageOptions[] | null = [];
 
-    username: string | undefined
+    username: string | undefined;
 
-    email: string | undefined
+    email: string | undefined;
 
     constructor(private service: MessageService) {}
 
@@ -96,5 +95,4 @@ export class MessagesDemo {
         this.msgs = [];
         this.msgs.push({ severity: 'success', summary: 'Success Message', detail: 'Message sent' });
     }
-
 }

src/app/pages/uikit/panelsdemo.ts

@@ -71,9 +71,9 @@ import { InputIconModule } from 'primeng/inputicon';
                                 <p-accordion-header>Header I</p-accordion-header>
                                 <p-accordion-content>
                                     <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-accordion-content>
                             </p-accordion-panel>
@@ -82,8 +82,9 @@ import { InputIconModule } from 'primeng/inputicon';
                                 <p-accordion-header>Header II</p-accordion-header>
                                 <p-accordion-content>
                                     <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-accordion-content>
                             </p-accordion-panel>
@@ -92,8 +93,9 @@ import { InputIconModule } from 'primeng/inputicon';
                                 <p-accordion-header>Header III</p-accordion-header>
                                 <p-accordion-content>
                                     <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-accordion-content>
                             </p-accordion-panel>
@@ -110,21 +112,23 @@ import { InputIconModule } from 'primeng/inputicon';
                             <p-tabpanels>
                                 <p-tabpanel value="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-tabpanel>
                                 <p-tabpanel value="1">
                                     <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-tabpanel>
                                 <p-tabpanel value="2">
                                     <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-tabpanel>
                             </p-tabpanels>
@@ -135,24 +139,16 @@ import { InputIconModule } from 'primeng/inputicon';
                     <div class="card">
                         <div class="font-semibold text-xl mb-4">Panel</div>
                         <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.
                         </p-panel>
                     </div>
                     <div class="card">
                         <div class="font-semibold text-xl mb-4">Fieldset</div>
                         <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.
                         </p-fieldset>
                     </div>
@@ -211,7 +207,7 @@ import { InputIconModule } from 'primeng/inputicon';
                 </p-splitter>
             </div>
         </div>
-    `,
+    `
 })
 export class PanelsDemo {
     items: MenuItem[] = [
@@ -232,5 +228,4 @@ export class PanelsDemo {
             icon: 'pi pi-home'
         }
     ];
-
 }

src/app/pages/uikit/treedemo.ts

@@ -1,9 +1,9 @@
 import { Component, inject, OnInit } from '@angular/core';
 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';
 
 @Component({
@@ -51,11 +51,11 @@ export class TreeDemo implements OnInit {
 
     cols: any[] = [];
 
-    nodeService = inject(NodeService)
+    nodeService = inject(NodeService);
 
     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 = [
             { field: 'name', header: 'Name' },

src/index.html

@@ -1,18 +1,16 @@
 <!doctype html>
 <html lang="en">
-
     <head>
-  <meta charset="utf-8">
+        <meta charset="utf-8" />
         <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="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>
 
     <body>
         <app-root></app-root>
     </body>
-
 </html>

src/main.ts

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