Code format

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

@@ -2,30 +2,20 @@ import { Component, computed, inject } from '@angular/core';
 import { ButtonModule } from 'primeng/button';
 import { StyleClassModule } from 'primeng/styleclass';
 import { AppConfigurator } from './app.configurator';
-import { LayoutService} from '../service/layout.service';
+import { LayoutService } from '../service/layout.service';
 
 @Component({
-  selector: 'app-floating-configurator',
-  imports: [ButtonModule, StyleClassModule, AppConfigurator],
-  template: `
-      <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
-                  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>
-  `,
+    selector: 'app-floating-configurator',
+    imports: [ButtonModule, StyleClassModule, AppConfigurator],
+    template: `
+        <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 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

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 
 @Component({
-    standalone:true,
+    standalone: true,
     selector: 'app-footer',
     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

@@ -6,22 +6,16 @@ import { AppMenuitem } from './app.menuitem';
 
 @Component({
     selector: 'app-menu',
-    standalone:true,
-    imports: [
-        CommonModule,
-        AppMenuitem,
-        RouterModule
-    ],
+    standalone: true,
+    imports: [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() {
@@ -35,19 +29,19 @@ export class AppMenu {
                 items: [
                     { label: 'Form Layout', icon: 'pi pi-fw pi-id-card', routerLink: ['/uikit/formlayout'] },
                     { label: 'Input', icon: 'pi pi-fw pi-check-square', routerLink: ['/uikit/input'] },
-                    { label: 'Button', icon: 'pi pi-fw pi-mobile', class: 'rotated-icon',  routerLink: ['/uikit/button'] },
-                    { label: 'Table', icon: 'pi pi-fw pi-table',    routerLink: ['/uikit/table'] },
-                    { label: 'List', icon: 'pi pi-fw pi-list',  routerLink: ['/uikit/list'] },
+                    { label: 'Button', icon: 'pi pi-fw pi-mobile', class: 'rotated-icon', routerLink: ['/uikit/button'] },
+                    { label: 'Table', icon: 'pi pi-fw pi-table', routerLink: ['/uikit/table'] },
+                    { label: 'List', icon: 'pi pi-fw pi-list', routerLink: ['/uikit/list'] },
                     { label: 'Tree', icon: 'pi pi-fw pi-share-alt', routerLink: ['/uikit/tree'] },
-                    { label: 'Panel', icon: 'pi pi-fw pi-tablet',   routerLink: ['/uikit/panel'] },
-                    { label: 'Overlay', icon: 'pi pi-fw pi-clone',  routerLink: ['/uikit/overlay'] },
-                    { label: 'Media', icon: 'pi pi-fw pi-image',    routerLink: ['/uikit/media'] },
-                    { label: 'Menu', icon: 'pi pi-fw pi-bars',  routerLink: ['/uikit/menu'] },
-                    { label: 'Message', icon: 'pi pi-fw pi-comment',  routerLink: ['/uikit/message'] },
-                    { label: 'File', icon: 'pi pi-fw pi-file',  routerLink: ['/uikit/file'] },
-                    { label: 'Chart', icon: 'pi pi-fw pi-chart-bar',    routerLink: ['/uikit/charts'] },
-                    { label: 'Timeline', icon: 'pi pi-fw pi-calendar',  routerLink: ['/uikit/timeline'] },
-                    { label: 'Misc', icon: 'pi pi-fw pi-circle',    routerLink: ['/uikit/misc'] }
+                    { label: 'Panel', icon: 'pi pi-fw pi-tablet', routerLink: ['/uikit/panel'] },
+                    { label: 'Overlay', icon: 'pi pi-fw pi-clone', routerLink: ['/uikit/overlay'] },
+                    { label: 'Media', icon: 'pi pi-fw pi-image', routerLink: ['/uikit/media'] },
+                    { label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu'] },
+                    { label: 'Message', icon: 'pi pi-fw pi-comment', routerLink: ['/uikit/message'] },
+                    { label: 'File', icon: 'pi pi-fw pi-file', routerLink: ['/uikit/file'] },
+                    { label: 'Chart', icon: 'pi pi-fw pi-chart-bar', routerLink: ['/uikit/charts'] },
+                    { label: 'Timeline', icon: 'pi pi-fw pi-calendar', routerLink: ['/uikit/timeline'] },
+                    { label: 'Misc', icon: 'pi pi-fw pi-circle', routerLink: ['/uikit/misc'] }
                 ]
             },
             {

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

@@ -5,7 +5,7 @@ import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { CommonModule } from '@angular/common';
 import { RippleModule } from 'primeng/ripple';
-import { MenuItem} from 'primeng/api';
+import { MenuItem } from 'primeng/api';
 import { LayoutService } from '../service/layout.service';
 
 @Component({
@@ -13,46 +13,63 @@ import { LayoutService } from '../service/layout.service';
     selector: '[app-menuitem]',
     imports: [CommonModule, RouterModule, RippleModule],
     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)"
-			   [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"
-			   [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>
-			</a>
+        <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)" [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"
+                [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>
+            </a>
 
-			<ul *ngIf="item.items && item.visible !== false" [@children]="submenuAnimation">
-				<ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
-					<li app-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child['badgeClass']"></li>
-				</ng-template>
-			</ul>
-		</ng-container>
+            <ul *ngIf="item.items && item.visible !== false" [@children]="submenuAnimation">
+                <ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
+                    <li app-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child['badgeClass']"></li>
+                </ng-template>
+            </ul>
+        </ng-container>
     `,
     animations: [
         trigger('children', [
-            state('collapsed', style({
-                height: '0'
-            })),
-            state('expanded', style({
-                height: '*'
-            })),
+            state(
+                'collapsed',
+                style({
+                    height: '0'
+                })
+            ),
+            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) {
-        this.menuSourceSubscription = this.layoutService.menuSource$.subscribe(value => {
+    constructor(
+        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;
-                }
-                else {
+                    this.active = value.key === this.key || value.key.startsWith(this.key + '-') ? true : false;
+                } else {
                     if (value.key !== this.key && !value.key.startsWith(this.key + '-')) {
                         this.active = false;
                     }
@@ -87,12 +106,11 @@ export class AppMenuitem {
             this.active = false;
         });
 
-        this.router.events.pipe(filter(event => event instanceof NavigationEnd))
-            .subscribe(params => {
-                if (this.item.routerLink) {
-                    this.updateActiveStateFromRoute();
-                }
-            });
+        this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((params) => {
+            if (this.item.routerLink) {
+                this.updateActiveStateFromRoute();
+            }
+        });
     }
 
     ngOnInit() {
@@ -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

@@ -3,14 +3,11 @@ import { AppMenu } from './app.menu';
 
 @Component({
     selector: 'app-sidebar',
-    standalone:true,
-    imports: [
-        AppMenu
-    ],
-    template: `
-    <div class="layout-sidebar">
+    standalone: true,
+    imports: [AppMenu],
+    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
-                class="layout-topbar-menu-button layout-topbar-action"
-                pStyleClass="@next"
-                enterFromClass="hidden"
-                enterActiveClass="animate-scalein"
-                leaveToClass="hidden"
-                leaveActiveClass="animate-fadeout"
-                [hideOnOutsideClick]="true"
-            >
+            <button 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 }));
     }
-
 }