diff --git a/src/app/app.component.html b/src/app/app.component.html deleted file mode 100644 index 0680b43..0000000 --- a/src/app/app.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/app/app.component.scss b/src/app/app.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts deleted file mode 100644 index 4814b05..0000000 --- a/src/app/app.component.spec.ts +++ /dev/null @@ -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'); - }); -}); diff --git a/src/app/app.component.ts b/src/app/app.component.ts deleted file mode 100644 index f792405..0000000 --- a/src/app/app.component.ts +++ /dev/null @@ -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 {} diff --git a/src/app/app.config.ts b/src/app/app.config.ts deleted file mode 100644 index eaa7543..0000000 --- a/src/app/app.config.ts +++ /dev/null @@ -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' }) - ] -}; diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts deleted file mode 100644 index 30221f4..0000000 --- a/src/app/app.routes.ts +++ /dev/null @@ -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' }, -]; diff --git a/src/app/demo/api/customer.ts b/src/app/demo/api/customer.ts deleted file mode 100644 index d838864..0000000 --- a/src/app/demo/api/customer.ts +++ /dev/null @@ -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; -} diff --git a/src/app/demo/api/image.ts b/src/app/demo/api/image.ts deleted file mode 100644 index b934f8c..0000000 --- a/src/app/demo/api/image.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface Image { - previewImageSrc?:any; - thumbnailImageSrc?:any; - alt?:any; - title?:any; -} diff --git a/src/app/demo/api/product.ts b/src/app/demo/api/product.ts deleted file mode 100644 index efc1f40..0000000 --- a/src/app/demo/api/product.ts +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/app/layout/api/menuchangeevent.ts b/src/app/layout/api/menuchangeevent.ts deleted file mode 100644 index 2730d09..0000000 --- a/src/app/layout/api/menuchangeevent.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface MenuChangeEvent { - key: string; - routeEvent?: boolean; -} \ No newline at end of file diff --git a/src/app/layout/app.footer.component.html b/src/app/layout/app.footer.component.html deleted file mode 100644 index 255f480..0000000 --- a/src/app/layout/app.footer.component.html +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/app/layout/app.footer.component.ts b/src/app/layout/app.footer.component.ts deleted file mode 100644 index 5ceea3b..0000000 --- a/src/app/layout/app.footer.component.ts +++ /dev/null @@ -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: ` - ` -}) -export class AppFooterComponent { - layoutService = inject(LayoutService); -} diff --git a/src/app/layout/app.layout.component.html b/src/app/layout/app.layout.component.html deleted file mode 100644 index b8a4fd4..0000000 --- a/src/app/layout/app.layout.component.html +++ /dev/null @@ -1,14 +0,0 @@ -
- -
- -
-
-
- -
- -
- -
-
diff --git a/src/app/layout/app.layout.component.ts b/src/app/layout/app.layout.component.ts deleted file mode 100644 index c5be2ca..0000000 --- a/src/app/layout/app.layout.component.ts +++ /dev/null @@ -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(); - } - } -} diff --git a/src/app/layout/app.layout.module.ts b/src/app/layout/app.layout.module.ts deleted file mode 100644 index 52bc4e5..0000000 --- a/src/app/layout/app.layout.module.ts +++ /dev/null @@ -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 { } diff --git a/src/app/layout/app.menu.component.html b/src/app/layout/app.menu.component.html deleted file mode 100644 index 128ed4e..0000000 --- a/src/app/layout/app.menu.component.html +++ /dev/null @@ -1,11 +0,0 @@ - diff --git a/src/app/layout/app.menu.component.ts b/src/app/layout/app.menu.component.ts deleted file mode 100644 index a88b855..0000000 --- a/src/app/layout/app.menu.component.ts +++ /dev/null @@ -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' - } - ] - } - ]; - } -} diff --git a/src/app/layout/app.menu.service.ts b/src/app/layout/app.menu.service.ts deleted file mode 100644 index 1d86f44..0000000 --- a/src/app/layout/app.menu.service.ts +++ /dev/null @@ -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(); - private resetSource = new Subject(); - - menuSource$ = this.menuSource.asObservable(); - resetSource$ = this.resetSource.asObservable(); - - onMenuStateChange(event: MenuChangeEvent) { - this.menuSource.next(event); - } - - reset() { - this.resetSource.next(true); - } -} diff --git a/src/app/layout/app.menuitem.component.ts b/src/app/layout/app.menuitem.component.ts deleted file mode 100644 index fba448a..0000000 --- a/src/app/layout/app.menuitem.component.ts +++ /dev/null @@ -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: ` - -
{{item.label}}
- - - {{item.label}} - - - - - {{item.label}} - - - - -
- `, - 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(); - } - } -} diff --git a/src/app/layout/app.sidebar.component.html b/src/app/layout/app.sidebar.component.html deleted file mode 100644 index 7f6f112..0000000 --- a/src/app/layout/app.sidebar.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/app/layout/app.sidebar.component.ts b/src/app/layout/app.sidebar.component.ts deleted file mode 100644 index 40c5322..0000000 --- a/src/app/layout/app.sidebar.component.ts +++ /dev/null @@ -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) { } -} - diff --git a/src/app/layout/app.topbar.component.html b/src/app/layout/app.topbar.component.html deleted file mode 100644 index 8475660..0000000 --- a/src/app/layout/app.topbar.component.html +++ /dev/null @@ -1,29 +0,0 @@ -
- - - - - - -
- - - -
-
\ No newline at end of file diff --git a/src/app/layout/app.topbar.component.ts b/src/app/layout/app.topbar.component.ts deleted file mode 100644 index 1d7b4ed..0000000 --- a/src/app/layout/app.topbar.component.ts +++ /dev/null @@ -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) { } -} diff --git a/src/app/layout/config/app.config.component.html b/src/app/layout/config/app.config.component.html deleted file mode 100644 index a1549f6..0000000 --- a/src/app/layout/config/app.config.component.html +++ /dev/null @@ -1,242 +0,0 @@ - - - -
Scale
-
- -
- -
- -
- - -
Menu Type
-
- - -
-
- - -
-
- - -
Input Style
-
-
- - -
-
- - -
-
- -
Ripple Effect
- -
- - -
Bootstrap
-
-
- -
-
- -
-
- -
-
- -
-
- -
Material Design
-
-
- -
-
- -
-
- -
-
- -
-
- -
Material Design Compact
-
-
- -
-
- -
-
- -
-
- -
-
- -
Tailwind
-
-
- -
-
- -
Fluent UI
-
-
- -
-
- -
PrimeOne Design - 2022
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
PrimeOne Design - 2021
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
diff --git a/src/app/layout/config/app.config.component.ts b/src/app/layout/config/app.config.component.ts deleted file mode 100644 index f1a3bd9..0000000 --- a/src/app/layout/config/app.config.component.ts +++ /dev/null @@ -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++; - } -} diff --git a/src/app/layout/config/config.module.ts b/src/app/layout/config/config.module.ts deleted file mode 100644 index 8e93e5d..0000000 --- a/src/app/layout/config/config.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { NgModule } from '@angular/core'; -import { AppConfigComponent } from './app.config.component'; - -@NgModule({ - imports: [ - AppConfigComponent, - ], - exports: [ - AppConfigComponent - ] -}) -export class AppConfigModule { } diff --git a/src/app/layout/service/app.layout.service.ts b/src/app/layout/service/app.layout.service.ts deleted file mode 100644 index 812b8ad..0000000 --- a/src/app/layout/service/app.layout.service.ts +++ /dev/null @@ -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(this._config); - - state: LayoutState = { - staticMenuDesktopInactive: false, - overlayMenuActive: false, - profileSidebarVisible: false, - configSidebarVisible: false, - staticMenuMobileActive: false, - menuHoverActive: false, - }; - - private configUpdate = new Subject(); - - private overlayOpen = new Subject(); - - 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 = 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 = document.getElementById(id); - const cloneLinkElement = 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`; - } -}