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

Remove legacy files

Browse Source
This commit is contained in:
Çetin
2025-01-03 12:05:45 +03:00
parent b69b6cdd2b
commit 3fde119e4d
27 changed files with 0 additions and 1275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1 +0,0 @@
<router-outlet></router-outlet>

0
src/app/app.component.scss
View File

23
src/app/app.component.spec.ts
View File

@@ -1,23 +0,0 @@
import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [AppComponent],
}).compileComponents();
});
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, sakai-19');
});
});

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

@@ -1,10 +0,0 @@
import { Component } from '@angular/core';
import {RouterModule} from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterModule],
templateUrl: './app.component.html'
})
export class AppComponent {}

16
src/app/app.config.ts
View File

@@ -1,16 +0,0 @@
import { routes } from './app.routes';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideRouter, withEnabledBlockingInitialNavigation, withInMemoryScrolling } from '@angular/router';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes, withInMemoryScrolling({ anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled' }), withEnabledBlockingInitialNavigation()),
provideHttpClient(withFetch()),
provideAnimationsAsync(),
providePrimeNG({ theme: {preset: Aura, options: {darkModeSelector: '.app-dark'}} ,ripple: false, inputStyle: 'outlined' })
]
};

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

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

20
src/app/demo/api/customer.ts
View File

@@ -1,20 +0,0 @@
export interface Country {
name?: string;
code?: string;
}
export interface Representative {
name?: string;
image?: string;
}
export interface Customer {
id?: number;
name?: string;
country?: Country;
company?: string;
date?: string;
status?: string;
activity?: number;
representative?: Representative;
}

6
src/app/demo/api/image.ts
View File

@@ -1,6 +0,0 @@
export interface Image {
previewImageSrc?:any;
thumbnailImageSrc?:any;
alt?:any;
title?:any;
}

16
src/app/demo/api/product.ts
View File

@@ -1,16 +0,0 @@
interface InventoryStatus {
label: string;
value: string;
}
export interface Product {
id?: string;
code?: string;
name?: string;
description?: string;
price?: number;
quantity?: number;
inventoryStatus?: InventoryStatus;
category?: string;
image?: string;
rating?: number;
}

4
src/app/layout/api/menuchangeevent.ts
View File

@@ -1,4 +0,0 @@
export interface MenuChangeEvent {
key: string;
routeEvent?: boolean;
}

5
src/app/layout/app.footer.component.html
View File

@@ -1,5 +0,0 @@
<div class="layout-footer">
<img src="assets/layout/images/{{layoutService.config().colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="Logo" height="20" class="mr-2"/>
by
<span class="font-medium ml-2">PrimeNG</span>
</div>

17
src/app/layout/app.footer.component.ts
View File

@@ -1,17 +0,0 @@
import {Component, inject} from '@angular/core';
import { LayoutService } from "./service/app.layout.service";
@Component({
selector: 'app-footer',
standalone: true,
providers: [LayoutService],
template: `
<div class="layout-footer">
<img src="assets/layout/images/{{layoutService.config().colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="Logo" height="20" class="mr-2"/>
by
<span class="font-medium ml-2">PrimeNG</span>
</div>`
})
export class AppFooterComponent {
layoutService = inject(LayoutService);
}

14
src/app/layout/app.layout.component.html
View File

@@ -1,14 +0,0 @@
<div class="layout-wrapper" [ngClass]="containerClass">
<app-topbar></app-topbar>
<div class="layout-sidebar">
<app-sidebar></app-sidebar>
</div>
<div class="layout-main-container">
<div class="layout-main">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</div>
<app-config></app-config>
<div class="layout-mask"></div>
</div>

126
src/app/layout/app.layout.component.ts
View File

@@ -1,126 +0,0 @@
import { Component, OnDestroy, Renderer2, ViewChild } from '@angular/core';
import {NavigationEnd, Router, RouterModule} from '@angular/router';
import { filter, Subscription } from 'rxjs';
import { LayoutService } from "./service/app.layout.service";
import { AppSidebarComponent } from "./app.sidebar.component";
import { AppTopBarComponent } from './app.topbar.component';
import {AppConfigComponent} from './config/app.config.component';
import {AppFooterComponent} from './app.footer.component';
import {CommonModule} from '@angular/common';
@Component({
selector: 'app-layout',
standalone: true,
imports: [CommonModule, RouterModule, AppTopBarComponent, AppSidebarComponent, AppConfigComponent, AppFooterComponent],
templateUrl: './app.layout.component.html'
})
export class AppLayoutComponent implements OnDestroy {
overlayMenuOpenSubscription: Subscription;
menuOutsideClickListener: any;
profileMenuOutsideClickListener: any;
@ViewChild(AppSidebarComponent) appSidebar!: AppSidebarComponent;
@ViewChild(AppTopBarComponent) appTopbar!: AppTopBarComponent;
constructor(public layoutService: LayoutService, public renderer: Renderer2, public router: Router) {
this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
if (!this.menuOutsideClickListener) {
this.menuOutsideClickListener = this.renderer.listen('document', 'click', event => {
const isOutsideClicked = !(this.appSidebar.el.nativeElement.isSameNode(event.target) || this.appSidebar.el.nativeElement.contains(event.target)
|| this.appTopbar.menuButton.nativeElement.isSameNode(event.target) || this.appTopbar.menuButton.nativeElement.contains(event.target));
if (isOutsideClicked) {
this.hideMenu();
}
});
}
if (!this.profileMenuOutsideClickListener) {
this.profileMenuOutsideClickListener = this.renderer.listen('document', 'click', event => {
const isOutsideClicked = !(this.appTopbar.menu.nativeElement.isSameNode(event.target) || this.appTopbar.menu.nativeElement.contains(event.target)
|| this.appTopbar.topbarMenuButton.nativeElement.isSameNode(event.target) || this.appTopbar.topbarMenuButton.nativeElement.contains(event.target));
if (isOutsideClicked) {
this.hideProfileMenu();
}
});
}
if (this.layoutService.state.staticMenuMobileActive) {
this.blockBodyScroll();
}
});
this.router.events.pipe(filter(event => event instanceof NavigationEnd))
.subscribe(() => {
this.hideMenu();
this.hideProfileMenu();
});
}
hideMenu() {
this.layoutService.state.overlayMenuActive = false;
this.layoutService.state.staticMenuMobileActive = false;
this.layoutService.state.menuHoverActive = false;
if (this.menuOutsideClickListener) {
this.menuOutsideClickListener();
this.menuOutsideClickListener = null;
}
this.unblockBodyScroll();
}
hideProfileMenu() {
this.layoutService.state.profileSidebarVisible = false;
if (this.profileMenuOutsideClickListener) {
this.profileMenuOutsideClickListener();
this.profileMenuOutsideClickListener = null;
}
}
blockBodyScroll(): void {
if (document.body.classList) {
document.body.classList.add('blocked-scroll');
}
else {
document.body.className += ' blocked-scroll';
}
}
unblockBodyScroll(): void {
if (document.body.classList) {
document.body.classList.remove('blocked-scroll');
}
else {
document.body.className = document.body.className.replace(new RegExp('(^|\\b)' +
'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
get containerClass() {
return {
'layout-theme-light': this.layoutService.config().colorScheme === 'light',
'layout-theme-dark': this.layoutService.config().colorScheme === 'dark',
'layout-overlay': this.layoutService.config().menuMode === 'overlay',
'layout-static': this.layoutService.config().menuMode === 'static',
'layout-static-inactive': this.layoutService.state.staticMenuDesktopInactive && this.layoutService.config().menuMode === 'static',
'layout-overlay-active': this.layoutService.state.overlayMenuActive,
'layout-mobile-active': this.layoutService.state.staticMenuMobileActive,
'p-input-filled': this.layoutService.config().inputStyle === 'filled',
'p-ripple-disabled': !this.layoutService.config().ripple
}
}
ngOnDestroy() {
if (this.overlayMenuOpenSubscription) {
this.overlayMenuOpenSubscription.unsubscribe();
}
if (this.menuOutsideClickListener) {
this.menuOutsideClickListener();
}
}
}

46
src/app/layout/app.layout.module.ts
View File

@@ -1,46 +0,0 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { InputTextModule } from 'primeng/inputtext';
import { SidebarModule } from 'primeng/sidebar';
import { BadgeModule } from 'primeng/badge';
import { RadioButtonModule } from 'primeng/radiobutton';
import { InputSwitchModule } from 'primeng/inputswitch';
import { RippleModule } from 'primeng/ripple';
import { AppMenuComponent } from './app.menu.component';
import { AppMenuitemComponent } from './app.menuitem.component';
import { RouterModule } from '@angular/router';
import { AppTopBarComponent } from './app.topbar.component';
import { AppFooterComponent } from './app.footer.component';
import { AppConfigModule } from './config/config.module';
import { AppSidebarComponent } from "./app.sidebar.component";
import { AppLayoutComponent } from "./app.layout.component";
@NgModule({
declarations: [
AppMenuitemComponent,
AppTopBarComponent,
AppFooterComponent,
AppMenuComponent,
AppSidebarComponent,
AppLayoutComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
InputTextModule,
SidebarModule,
BadgeModule,
RadioButtonModule,
InputSwitchModule,
RippleModule,
RouterModule,
AppConfigModule
],
exports: [AppLayoutComponent]
})
export class AppLayoutModule { }

11
src/app/layout/app.menu.component.html
View File

@@ -1,11 +0,0 @@
<ul class="layout-menu">
<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>
<li>
<a href="https://www.primefaces.org/primeblocks-ng/#/">
<img src="assets/layout/images/{{layoutService.config().colorScheme === 'light' ? 'banner-primeblocks' : 'banner-primeblocks-dark'}}.png" alt="Prime Blocks" class="w-full mt-3"/>
</a>
</li>
</ul>

171
src/app/layout/app.menu.component.ts
View File

@@ -1,171 +0,0 @@
import { OnInit } from '@angular/core';
import { Component } from '@angular/core';
import { LayoutService } from './service/app.layout.service';
import {CommonModule} from '@angular/common';
import {RouterModule} from '@angular/router';
import {AppMenuitemComponent} from './app.menuitem.component';
import { AppMenuItem } from '@/src/layout/appmenuitem';
@Component({
selector: 'app-menu',
standalone: true,
imports: [RouterModule, CommonModule, AppMenuItem],
templateUrl: './app.menu.component.html'
})
export class AppMenuComponent implements OnInit {
model: any[] = [];
constructor(public layoutService: LayoutService) { }
ngOnInit() {
this.model = [
{
label: 'Home',
items: [
{ label: 'Dashboard', icon: 'pi pi-fw pi-home', routerLink: ['/'] }
]
},
{
label: 'UI Components',
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: 'Float Label', icon: 'pi pi-fw pi-bookmark', routerLink: ['/uikit/floatlabel'] },
{ label: 'Invalid State', icon: 'pi pi-fw pi-exclamation-circle', routerLink: ['/uikit/invalidstate'] },
{ label: 'Button', icon: 'pi pi-fw pi-box', 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'], routerLinkActiveOptions: { paths: 'subset', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' } },
{ 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: 'Misc', icon: 'pi pi-fw pi-circle', routerLink: ['/uikit/misc'] }
]
},
{
label: 'Prime Blocks',
items: [
{ label: 'Free Blocks', icon: 'pi pi-fw pi-eye', routerLink: ['/blocks'], badge: 'NEW' },
{ label: 'All Blocks', icon: 'pi pi-fw pi-globe', url: ['https://www.primefaces.org/primeblocks-ng'], target: '_blank' },
]
},
{
label: 'Utilities',
items: [
{ label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', routerLink: ['/utilities/icons'] },
{ label: 'PrimeFlex', icon: 'pi pi-fw pi-desktop', url: ['https://www.primefaces.org/primeflex/'], target: '_blank' },
]
},
{
label: 'Pages',
icon: 'pi pi-fw pi-briefcase',
items: [
{
label: 'Landing',
icon: 'pi pi-fw pi-globe',
routerLink: ['/landing']
},
{
label: 'Auth',
icon: 'pi pi-fw pi-user',
items: [
{
label: 'Login',
icon: 'pi pi-fw pi-sign-in',
routerLink: ['/auth/login']
},
{
label: 'Error',
icon: 'pi pi-fw pi-times-circle',
routerLink: ['/auth/error']
},
{
label: 'Access Denied',
icon: 'pi pi-fw pi-lock',
routerLink: ['/auth/access']
}
]
},
{
label: 'Crud',
icon: 'pi pi-fw pi-pencil',
routerLink: ['/pages/crud']
},
{
label: 'Timeline',
icon: 'pi pi-fw pi-calendar',
routerLink: ['/pages/timeline']
},
{
label: 'Not Found',
icon: 'pi pi-fw pi-exclamation-circle',
routerLink: ['/notfound']
},
{
label: 'Empty',
icon: 'pi pi-fw pi-circle-off',
routerLink: ['/pages/empty']
},
]
},
{
label: 'Hierarchy',
items: [
{
label: 'Submenu 1', icon: 'pi pi-fw pi-bookmark',
items: [
{
label: 'Submenu 1.1', icon: 'pi pi-fw pi-bookmark',
items: [
{ label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark' },
{ label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark' },
{ label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark' },
]
},
{
label: 'Submenu 1.2', icon: 'pi pi-fw pi-bookmark',
items: [
{ label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark' }
]
},
]
},
{
label: 'Submenu 2', icon: 'pi pi-fw pi-bookmark',
items: [
{
label: 'Submenu 2.1', icon: 'pi pi-fw pi-bookmark',
items: [
{ label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark' },
{ label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark' },
]
},
{
label: 'Submenu 2.2', icon: 'pi pi-fw pi-bookmark',
items: [
{ label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark' },
]
},
]
}
]
},
{
label: 'Get Started',
items: [
{
label: 'Documentation', icon: 'pi pi-fw pi-question', routerLink: ['/documentation']
},
{
label: 'View Source', icon: 'pi pi-fw pi-search', url: ['https://github.com/primefaces/sakai-ng'], target: '_blank'
}
]
}
];
}
}

23
src/app/layout/app.menu.service.ts
View File

@@ -1,23 +0,0 @@
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { MenuChangeEvent } from './api/menuchangeevent';
@Injectable({
providedIn: 'root'
})
export class MenuService {
private menuSource = new Subject<MenuChangeEvent>();
private resetSource = new Subject();
menuSource$ = this.menuSource.asObservable();
resetSource$ = this.resetSource.asObservable();
onMenuStateChange(event: MenuChangeEvent) {
this.menuSource.next(event);
}
reset() {
this.resetSource.next(true);
}
}

151
src/app/layout/app.menuitem.component.ts
View File

@@ -1,151 +0,0 @@
import { ChangeDetectorRef, Component, Host, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
import {NavigationEnd, Router, RouterModule} from '@angular/router';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
import { MenuService } from './app.menu.service';
import { LayoutService } from './service/app.layout.service';
import {CommonModule} from '@angular/common';
@Component({
// eslint-disable-next-line @angular-eslint/component-selector
selector: '[app-menuitem]',
standalone: true,
imports: [CommonModule, RouterModule],
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.class" [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.class"
[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>
`,
animations: [
trigger('children', [
state('collapsed', style({
height: '0'
})),
state('expanded', style({
height: '*'
})),
transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
])
]
})
export class AppMenuitemComponent implements OnInit, OnDestroy {
@Input() item: any;
@Input() index!: number;
@Input() @HostBinding('class.layout-root-menuitem') root!: boolean;
@Input() parentKey!: string;
active = false;
menuSourceSubscription: Subscription;
menuResetSubscription: Subscription;
key: string = "";
constructor(public layoutService: LayoutService, private cd: ChangeDetectorRef, public router: Router, private menuService: MenuService) {
this.menuSourceSubscription = this.menuService.menuSource$.subscribe(value => {
Promise.resolve(null).then(() => {
if (value.routeEvent) {
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;
}
}
});
});
this.menuResetSubscription = this.menuService.resetSource$.subscribe(() => {
this.active = false;
});
this.router.events.pipe(filter(event => event instanceof NavigationEnd))
.subscribe(params => {
if (this.item.routerLink) {
this.updateActiveStateFromRoute();
}
});
}
ngOnInit() {
this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
if (this.item.routerLink) {
this.updateActiveStateFromRoute();
}
}
updateActiveStateFromRoute() {
let activeRoute = this.router.isActive(this.item.routerLink[0], { paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' });
if (activeRoute) {
this.menuService.onMenuStateChange({ key: this.key, routeEvent: true });
}
}
itemClick(event: Event) {
// avoid processing disabled items
if (this.item.disabled) {
event.preventDefault();
return;
}
// execute command
if (this.item.command) {
this.item.command({ originalEvent: event, item: this.item });
}
// toggle active state
if (this.item.items) {
this.active = !this.active;
}
this.menuService.onMenuStateChange({ key: this.key });
}
get submenuAnimation() {
return this.root ? 'expanded' : (this.active ? 'expanded' : 'collapsed');
}
@HostBinding('class.active-menuitem')
get activeClass() {
return this.active && !this.root;
}
ngOnDestroy() {
if (this.menuSourceSubscription) {
this.menuSourceSubscription.unsubscribe();
}
if (this.menuResetSubscription) {
this.menuResetSubscription.unsubscribe();
}
}
}

1
src/app/layout/app.sidebar.component.html
View File

@@ -1 +0,0 @@
<app-menu></app-menu>

14
src/app/layout/app.sidebar.component.ts
View File

@@ -1,14 +0,0 @@
import { Component, ElementRef } from '@angular/core';
import { LayoutService } from "./service/app.layout.service";
import {AppMenuComponent} from './app.menu.component';
@Component({
selector: 'app-sidebar',
standalone: true,
imports: [AppMenuComponent],
templateUrl: './app.sidebar.component.html'
})
export class AppSidebarComponent {
constructor(public layoutService: LayoutService, public el: ElementRef) { }
}

29
src/app/layout/app.topbar.component.html
View File

@@ -1,29 +0,0 @@
<div class="layout-topbar">
<a class="layout-topbar-logo" routerLink="">
<img src="assets/layout/images/{{layoutService.config().colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="logo">
<span>SAKAI</span>
</a>
<button #menubutton class="p-link layout-menu-button layout-topbar-button" (click)="layoutService.onMenuToggle()">
<i class="pi pi-bars"></i>
</button>
<button #topbarmenubutton class="p-link layout-topbar-menu-button layout-topbar-button" (click)="layoutService.showProfileSidebar()">
<i class="pi pi-ellipsis-v"></i>
</button>
<div #topbarmenu class="layout-topbar-menu" [ngClass]="{'layout-topbar-menu-mobile-active': layoutService.state.profileSidebarVisible}">
<button class="p-link layout-topbar-button">
<i class="pi pi-calendar"></i>
<span>Calendar</span>
</button>
<button class="p-link layout-topbar-button">
<i class="pi pi-user"></i>
<span>Profile</span>
</button>
<button class="p-link layout-topbar-button" [routerLink]="'/documentation'">
<i class="pi pi-cog"></i>
<span>Settings</span>
</button>
</div>
</div>

24
src/app/layout/app.topbar.component.ts
View File

@@ -1,24 +0,0 @@
import { Component, ElementRef, ViewChild } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { LayoutService } from "./service/app.layout.service";
import {RouterModule} from '@angular/router';
import {CommonModule} from '@angular/common';
@Component({
selector: 'app-topbar',
standalone: true,
imports: [CommonModule, RouterModule],
templateUrl: './app.topbar.component.html'
})
export class AppTopBarComponent {
items!: MenuItem[];
@ViewChild('menubutton') menuButton!: ElementRef;
@ViewChild('topbarmenubutton') topbarMenuButton!: ElementRef;
@ViewChild('topbarmenu') menu!: ElementRef;
constructor(public layoutService: LayoutService) { }
}

242
src/app/layout/config/app.config.component.html
View File

@@ -1,242 +0,0 @@
<button class="layout-config-button p-link" type="button" (click)="onConfigButtonClick()">
<i class="pi pi-cog"></i>
</button>
<p-sidebar [(visible)]="visible" position="right" [transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'" styleClass="layout-config-sidebar w-20rem">
<h5>Scale</h5>
<div class="flex align-items-center">
<button icon="pi pi-minus" type="button" pButton (click)="decrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem mr-2" [disabled]="scale === scales[0]"></button>
<div class="flex gap-2 align-items-center">
<i class="pi pi-circle-fill text-300" *ngFor="let s of scales" [ngClass]="{'text-primary-500': s === scale}"></i>
</div>
<button icon="pi pi-plus" type="button" pButton (click)="incrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem ml-2" [disabled]="scale === scales[scales.length - 1]"></button>
</div>
<ng-container *ngIf="!minimal">
<h5>Menu Type</h5>
<div class="field-radiobutton">
<p-radioButton name="menuMode" value="static" [(ngModel)]="menuMode" inputId="mode1"></p-radioButton>
<label for="mode1">Static</label>
</div>
<div class="field-radiobutton">
<p-radioButton name="menuMode" value="overlay" [(ngModel)]="menuMode" inputId="mode2"></p-radioButton>
<label for="mode2">Overlay</label>
</div>
</ng-container>
<ng-container *ngIf="!minimal">
<h5>Input Style</h5>
<div class="flex">
<div class="field-radiobutton flex-1">
<p-radioButton name="inputStyle" value="outlined" [(ngModel)]="inputStyle" inputId="outlined_input"></p-radioButton>
<label for="outlined_input">Outlined</label>
</div>
<div class="field-radiobutton flex-1">
<p-radioButton name="inputStyle" value="filled" [(ngModel)]="inputStyle" inputId="filled_input"></p-radioButton>
<label for="filled_input">Filled</label>
</div>
</div>
<h5>Ripple Effect</h5>
<p-inputSwitch [(ngModel)]="ripple"></p-inputSwitch>
</ng-container>
<h5>Bootstrap</h5>
<div class="grid">
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('bootstrap4-light-blue', 'light')">
<img src="assets/layout/images/themes/bootstrap4-light-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Light Blue">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('bootstrap4-light-purple', 'light')">
<img src="assets/layout/images/themes/bootstrap4-light-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Light Purple">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('bootstrap4-dark-blue', 'dark')">
<img src="assets/layout/images/themes/bootstrap4-dark-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Blue">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('bootstrap4-dark-purple', 'dark')">
<img src="assets/layout/images/themes/bootstrap4-dark-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Purple">
</button>
</div>
</div>
<h5>Material Design</h5>
<div class="grid">
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('md-light-indigo', 'light')">
<img src="assets/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('md-light-deeppurple', 'light')">
<img src="assets/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light DeepPurple">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('md-dark-indigo', 'dark')">
<img src="assets/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('md-dark-deeppurple', 'dark')">
<img src="assets/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark DeepPurple">
</button>
</div>
</div>
<h5>Material Design Compact</h5>
<div class="grid">
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('mdc-light-indigo', 'light')">
<img src="assets/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('mdc-light-deeppurple', 'light')">
<img src="assets/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light Deep Purple">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('mdc-dark-indigo', 'dark')">
<img src="assets/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('mdc-dark-deeppurple', 'dark')">
<img src="assets/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark Deep Purple">
</button>
</div>
</div>
<h5>Tailwind</h5>
<div class="grid">
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('tailwind-light', 'light')">
<img src="assets/layout/images/themes/tailwind-light.png" class="w-2rem h-2rem" alt="Tailwind Light">
</button>
</div>
</div>
<h5>Fluent UI</h5>
<div class="grid">
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('fluent-light', 'light')">
<img src="assets/layout/images/themes/fluent-light.png" class="w-2rem h-2rem" alt="Fluent Light">
</button>
</div>
</div>
<h5>PrimeOne Design - 2022</h5>
<div class="grid">
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-light-indigo', 'light')">
<img src="assets/layout/images/themes/lara-light-indigo.png" class="w-2rem h-2rem" alt="Lara Light Indigo">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-light-blue', 'light')">
<img src="assets/layout/images/themes/lara-light-blue.png" class="w-2rem h-2rem" alt="Lara Light Blue">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-light-purple', 'light')">
<img src="assets/layout/images/themes/lara-light-purple.png" class="w-2rem h-2rem" alt="Lara Light Purple">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-light-teal', 'light')">
<img src="assets/layout/images/themes/lara-light-teal.png" class="w-2rem h-2rem" alt="Lara Light Teal">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-dark-indigo', 'dark')">
<img src="assets/layout/images/themes/lara-dark-indigo.png" class="w-2rem h-2rem" alt="Lara Dark Indigo">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-dark-blue', 'dark')">
<img src="assets/layout/images/themes/lara-dark-blue.png" class="w-2rem h-2rem" alt="Lara Dark Blue">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-dark-purple', 'dark')">
<img src="assets/layout/images/themes/lara-dark-purple.png" class="w-2rem h-2rem" alt="Lara Dark Purple">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-dark-teal', 'dark')">
<img src="assets/layout/images/themes/lara-dark-teal.png" class="w-2rem h-2rem" alt="Lara Dark Teal">
</button>
</div>
</div>
<h5>PrimeOne Design - 2021</h5>
<div class="grid">
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('saga-blue', 'light')">
<img src="assets/layout/images/themes/saga-blue.png" class="w-2rem h-2rem" alt="Saga Blue">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('saga-green', 'light')">
<img src="assets/layout/images/themes/saga-green.png" class="w-2rem h-2rem" alt="Saga Green">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('saga-orange', 'light')">
<img src="assets/layout/images/themes/saga-orange.png" class="w-2rem h-2rem" alt="Saga Orange">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('saga-purple', 'light')">
<img src="assets/layout/images/themes/saga-purple.png" class="w-2rem h-2rem" alt="Saga Purple">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('vela-blue', 'dark')">
<img src="assets/layout/images/themes/vela-blue.png" class="w-2rem h-2rem" alt="Vela Blue">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('vela-green', 'dark')">
<img src="assets/layout/images/themes/vela-green.png" class="w-2rem h-2rem" alt="Vela Green">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('vela-orange', 'dark')">
<img src="assets/layout/images/themes/vela-orange.png" class="w-2rem h-2rem" alt="Vela Orange">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('vela-purple', 'dark')">
<img src="assets/layout/images/themes/vela-purple.png" class="w-2rem h-2rem" alt="Vela Purple">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('arya-blue', 'dark')">
<img src="assets/layout/images/themes/arya-blue.png" class="w-2rem h-2rem" alt="Arya Blue">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('arya-green', 'dark')">
<img src="assets/layout/images/themes/arya-green.png" class="w-2rem h-2rem" alt="Arya Green">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('arya-orange', 'dark')">
<img src="assets/layout/images/themes/arya-orange.png" class="w-2rem h-2rem" alt="Arya Orange">
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" (click)="changeTheme('arya-purple', 'dark')">
<img src="assets/layout/images/themes/arya-purple.png" class="w-2rem h-2rem" alt="Arya Purple">
</button>
</div>
</div>
</p-sidebar>

114
src/app/layout/config/app.config.component.ts
View File

@@ -1,114 +0,0 @@
import { Component, Input } from '@angular/core';
import { LayoutService } from '../service/app.layout.service';
import { MenuService } from '../app.menu.service';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {SidebarModule} from 'primeng/sidebar';
import {RadioButtonModule} from 'primeng/radiobutton';
import {ButtonModule} from 'primeng/button';
import {InputSwitchModule} from 'primeng/inputswitch';
@Component({
selector: 'app-config',
standalone: true,
imports: [
CommonModule,
FormsModule,
SidebarModule,
RadioButtonModule,
ButtonModule,
InputSwitchModule
],
templateUrl: './app.config.component.html',
})
export class AppConfigComponent {
@Input() minimal: boolean = false;
scales: number[] = [12, 13, 14, 15, 16];
constructor(
public layoutService: LayoutService,
public menuService: MenuService
) {}
get visible(): boolean {
return this.layoutService.state.configSidebarVisible;
}
set visible(_val: boolean) {
this.layoutService.state.configSidebarVisible = _val;
}
get scale(): number {
return this.layoutService.config().scale;
}
set scale(_val: number) {
this.layoutService.config.update((config) => ({
...config,
scale: _val,
}));
}
get menuMode(): string {
return this.layoutService.config().menuMode;
}
set menuMode(_val: string) {
this.layoutService.config.update((config) => ({
...config,
menuMode: _val,
}));
}
get inputStyle(): string {
return this.layoutService.config().inputStyle;
}
set inputStyle(_val: string) {
this.layoutService.config().inputStyle = _val;
}
get ripple(): boolean {
return this.layoutService.config().ripple;
}
set ripple(_val: boolean) {
this.layoutService.config.update((config) => ({
...config,
ripple: _val,
}));
}
set theme(val: string) {
this.layoutService.config.update((config) => ({
...config,
theme: val,
}));
}
get theme(): string {
return this.layoutService.config().theme;
}
set colorScheme(val: string) {
this.layoutService.config.update((config) => ({
...config,
colorScheme: val,
}));
}
get colorScheme(): string {
return this.layoutService.config().colorScheme;
}
onConfigButtonClick() {
this.layoutService.showConfigSidebar();
}
changeTheme(theme: string, colorScheme: string) {
this.theme = theme;
this.colorScheme = colorScheme;
}
decrementScale() {
this.scale--;
}
incrementScale() {
this.scale++;
}
}

12
src/app/layout/config/config.module.ts
View File

@@ -1,12 +0,0 @@
import { NgModule } from '@angular/core';
import { AppConfigComponent } from './app.config.component';
@NgModule({
imports: [
AppConfigComponent,
],
exports: [
AppConfigComponent
]
})
export class AppConfigModule { }

159
src/app/layout/service/app.layout.service.ts
View File

@@ -1,159 +0,0 @@
import { Injectable, effect, signal } from '@angular/core';
import { Subject } from 'rxjs';
export interface AppConfig {
inputStyle: string;
colorScheme: string;
theme: string;
ripple: boolean;
menuMode: string;
scale: number;
}
interface LayoutState {
staticMenuDesktopInactive: boolean;
overlayMenuActive: boolean;
profileSidebarVisible: boolean;
configSidebarVisible: boolean;
staticMenuMobileActive: boolean;
menuHoverActive: boolean;
}
@Injectable({
providedIn: 'root',
})
export class LayoutService {
_config: AppConfig = {
ripple: false,
inputStyle: 'outlined',
menuMode: 'static',
colorScheme: 'light',
theme: 'lara-light-indigo',
scale: 14,
};
config = signal<AppConfig>(this._config);
state: LayoutState = {
staticMenuDesktopInactive: false,
overlayMenuActive: false,
profileSidebarVisible: false,
configSidebarVisible: false,
staticMenuMobileActive: false,
menuHoverActive: false,
};
private configUpdate = new Subject<AppConfig>();
private overlayOpen = new Subject<any>();
configUpdate$ = this.configUpdate.asObservable();
overlayOpen$ = this.overlayOpen.asObservable();
constructor() {
effect(() => {
const config = this.config();
if (this.updateStyle(config)) {
this.changeTheme();
}
this.changeScale(config.scale);
this.onConfigUpdate();
});
}
updateStyle(config: AppConfig) {
return (
config.theme !== this._config.theme ||
config.colorScheme !== this._config.colorScheme
);
}
onMenuToggle() {
if (this.isOverlay()) {
this.state.overlayMenuActive = !this.state.overlayMenuActive;
if (this.state.overlayMenuActive) {
this.overlayOpen.next(null);
}
}
if (this.isDesktop()) {
this.state.staticMenuDesktopInactive =
!this.state.staticMenuDesktopInactive;
} else {
this.state.staticMenuMobileActive =
!this.state.staticMenuMobileActive;
if (this.state.staticMenuMobileActive) {
this.overlayOpen.next(null);
}
}
}
showProfileSidebar() {
this.state.profileSidebarVisible = !this.state.profileSidebarVisible;
if (this.state.profileSidebarVisible) {
this.overlayOpen.next(null);
}
}
showConfigSidebar() {
this.state.configSidebarVisible = true;
}
isOverlay() {
return this.config().menuMode === 'overlay';
}
isDesktop() {
return window.innerWidth > 991;
}
isMobile() {
return !this.isDesktop();
}
onConfigUpdate() {
this._config = { ...this.config() };
this.configUpdate.next(this.config());
}
changeTheme() {
const config = this.config();
const themeLink = <HTMLLinkElement>document.getElementById('theme-css');
const themeLinkHref = themeLink.getAttribute('href')!;
const newHref = themeLinkHref
.split('/')
.map((el) =>
el == this._config.theme
? (el = config.theme)
: el == `theme-${this._config.colorScheme}`
? (el = `theme-${config.colorScheme}`)
: el
)
.join('/');
this.replaceThemeLink(newHref);
}
replaceThemeLink(href: string) {
const id = 'theme-css';
let themeLink = <HTMLLinkElement>document.getElementById(id);
const cloneLinkElement = <HTMLLinkElement>themeLink.cloneNode(true);
cloneLinkElement.setAttribute('href', href);
cloneLinkElement.setAttribute('id', id + '-clone');
themeLink.parentNode!.insertBefore(
cloneLinkElement,
themeLink.nextSibling
);
cloneLinkElement.addEventListener('load', () => {
themeLink.remove();
cloneLinkElement.setAttribute('id', id);
});
}
changeScale(value: number) {
document.documentElement.style.fontSize = `${value}px`;
}
}