@cerema/cadriciel 0.5.0

package/_template/{{project}}-ihm/src/app/app.module.ts

@@ -0,0 +1,104 @@
+import { LOCALE_ID, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { OAuthModule, OAuthStorage } from 'angular-oauth2-oidc';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { SharedModule } from './shared/shared.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { AppRoutingModule } from './app-routing.module';
+import { MyStorageService } from './shared/core/storage/MyStorageService';
+import { MyLocalStorageService } from './shared/core/storage/MyLocalStorageService';
+import { environment } from '../environments/environment';
+import { HttpInterceptorProviders } from './shared/core/interceptor';
+import { registerLocaleData } from '@angular/common';
+import localeFr from '@angular/common/locales/fr';
+import { ApplicationConfigService } from './shared/core/config/application-config.service';
+import { DialogService, DynamicDialogModule, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { LeafletMarkerClusterModule } from "@asymmetrik/ngx-leaflet-markercluster";
+import { AccordionModule } from "primeng/accordion";
+import { LeafletModule } from "@asymmetrik/ngx-leaflet";
+import { LeafletDrawModule } from "@asymmetrik/ngx-leaflet-draw";
+import { TranslateLoader, TranslateModule, TranslateService } from "@ngx-translate/core";
+import { TranslateHttpLoader } from "@ngx-translate/http-loader";
+import { HIGHLIGHT_OPTIONS, HighlightModule } from "ngx-highlightjs";
+
+registerLocaleData(localeFr, 'fr');
+
+@NgModule({
+  declarations: [],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    HttpClientModule,
+    DynamicDialogModule,
+    LeafletModule,
+    LeafletDrawModule,
+    LeafletMarkerClusterModule,
+    AccordionModule,
+    SharedModule,
+    HighlightModule,
+    OAuthModule.forRoot({
+      resourceServer: {
+        allowedUrls: environment.allowedUrls,
+        sendAccessToken: true,
+      },
+    }),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient],
+      },
+    }),
+  ],
+  providers: [
+    /*MenuService, TopbarMenuService,*/ DialogService, MyLocalStorageService, DynamicDialogRef,
+    {
+      provide: OAuthStorage,
+      useClass: MyStorageService,
+    },
+    HttpInterceptorProviders,
+    {
+      provide: LOCALE_ID,
+      useFactory: () => {
+
+      },
+      deps: [],
+    },
+    {
+      provide: LOCALE_ID,
+      useFactory: (translate: TranslateService) => {
+        return translate.getBrowserLang();
+      },
+      deps: [TranslateService],
+    },
+    {
+      provide: HIGHLIGHT_OPTIONS,
+      useValue: {
+        coreLibraryLoader: () => import('highlight.js/lib/core'),
+        languages: {
+          typescript: () => import('highlight.js/lib/languages/typescript'),
+          css: () => import('highlight.js/lib/languages/css'),
+          xml: () => import('highlight.js/lib/languages/xml'),
+          java: () => import('highlight.js/lib/languages/java')
+        },
+        // themePath: 'path-to-theme.css' // Optional, and useful if you want to change the theme dynamically
+      }
+    }
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppModule {
+  constructor(applicationConfigService: ApplicationConfigService) {
+    applicationConfigService.endpointPrefix = environment.serverApiUrl;
+    applicationConfigService.endpointPrefixApiOpen = environment.serverApiOpenUrl;
+    applicationConfigService.endpointGeoApiGouvFr = "https://geo.api.gouv.fr/";
+  }
+}
+
+export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
+  return new TranslateHttpLoader(http, 'assets/i18n/');
+}
+

package/_template/{{project}}-ihm/src/app/layout/api/menuchangeevent.ts

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

package/_template/{{project}}-ihm/src/app/layout/api/tabcloseevent.ts

@@ -0,0 +1,6 @@
+import { MenuItem } from "primeng/api";
+
+export interface TabCloseEvent {
+  tab: MenuItem;
+  index: number;
+}

package/_template/{{project}}-ihm/src/app/layout/app.breadcrumb.component.html

@@ -0,0 +1,14 @@
+<nav class="layout-breadcrumb">
+  <ol>
+    <li>
+      <a [routerLink]="['/']">
+        <i class="pi pi-home"></i>
+      </a>
+    </li>
+    <li class="layout-breadcrumb-chevron"> /</li>
+    <ng-template ngFor let-item let-last="last" [ngForOf]="breadcrumbs$ | async">
+      <li>{{item.label}}</li>
+      <li *ngIf="!last" class="layout-breadcrumb-chevron"> /</li>
+    </ng-template>
+  </ol>
+</nav>

package/_template/{{project}}-ihm/src/app/layout/app.breadcrumb.component.ts

@@ -0,0 +1,48 @@
+import { Component } from '@angular/core';
+import { ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+interface Breadcrumb {
+  label: string;
+  url?: string;
+}
+
+@Component({
+  selector: 'app-breadcrumb',
+  templateUrl: './app.breadcrumb.component.html'
+})
+export class AppBreadcrumbComponent {
+
+  private readonly _breadcrumbs$ = new BehaviorSubject<Breadcrumb[]>([]);
+
+  readonly breadcrumbs$ = this._breadcrumbs$.asObservable();
+
+  constructor(private router: Router) {
+    this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(event => {
+      const root = this.router.routerState.snapshot.root;
+      const breadcrumbs: Breadcrumb[] = [];
+      this.addBreadcrumb(root, [], breadcrumbs);
+
+      this._breadcrumbs$.next(breadcrumbs);
+    });
+  }
+
+  private addBreadcrumb(route: ActivatedRouteSnapshot, parentUrl: string[], breadcrumbs: Breadcrumb[]) {
+    const routeUrl = parentUrl.concat(route.url.map(url => url.path));
+    const breadcrumb = route.data['breadcrumb'];
+    const parentBreadcrumb = route.parent && route.parent.data ? route.parent.data['breadcrumb'] : null;
+
+    if (breadcrumb && breadcrumb !== parentBreadcrumb) {
+      breadcrumbs.push({
+        label: route.data['breadcrumb'],
+        url: '/' + routeUrl.join('/')
+      });
+    }
+
+    if (route.firstChild) {
+      this.addBreadcrumb(route.firstChild, routeUrl, breadcrumbs);
+    }
+  }
+
+}

package/_template/{{project}}-ihm/src/app/layout/app.footer.component.html

@@ -0,0 +1,20 @@
+<div class="layout-footer">
+  <div class="footer-start">
+
+    <img src="assets/layout/images/LogoCerema.svg" alt="logo"/>
+
+    <div class="flex-column">
+      <div class="block">
+        <span class="app-name">AMODIFIER-NomLong</span>
+      </div>
+      <div class="block ml-3">
+        <p>v{{version}}</p>
+      </div>
+    </div>
+
+  </div>
+  <div class="footer-end">
+    <img src="assets/layout/images/LogoCerema_horizontal.svg" style="min-width: 8rem; min-height: 2rem;" alt="logo"/>
+  </div>
+</div>
+

package/_template/{{project}}-ihm/src/app/layout/app.footer.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { LayoutService } from "./service/app.layout.service";
+import packageJson from '../../../../package.json';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './app.footer.component.html'
+})
+export class AppFooterComponent implements OnInit{
+  version!: string;
+
+  constructor(public layoutService: LayoutService) {
+  }
+
+  get colorScheme(): string {
+    return this.layoutService.config.colorScheme;
+  }
+
+  ngOnInit(): void {
+    this.version = packageJson.version;
+  }
+}

package/_template/{{project}}-ihm/src/app/layout/app.menu.component.html

@@ -0,0 +1,3 @@
+<ul class="layout-menu">
+  <li app-menuitem *ngFor="let item of model; let i = index;" [item]="item" [index]="i" [root]="true"></li>
+</ul>

package/_template/{{project}}-ihm/src/app/layout/app.menu.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { LayoutService } from './service/app.layout.service';
+
+@Component({
+  selector: 'app-menu',
+  templateUrl: './app.menu.component.html'
+})
+export class AppMenuComponent implements OnInit {
+
+  model: any[] = [];
+
+  constructor(public layoutService: LayoutService) {
+  }
+
+  ngOnInit() {
+    this.model = [
+      {
+        label: 'Documentation', icon: 'pi pi-book',routerLink: ['/'],
+        items: [
+          {label: 'Bien démarrer', icon: 'pi pi-power-off', routerLink: ['/documentation/demarrer']},
+          {label: 'Architecture', icon: 'pi pi-arrows-h', routerLink: ['/documentation/architecture']},
+          {label: 'Persistance', icon: 'pi pi-database', routerLink: ['/documentation/persistance']},
+          {label: 'Sécurité', icon: 'pi pi-lock', routerLink: ['/documentation/securite']},
+          {label: 'Tests', icon: 'pi pi-thumbs-up', routerLink: ['/documentation/tests']},
+          {label: 'Déploiement', icon: 'pi pi-cloud', routerLink: ['/documentation/deploiement']},
+        ]
+      },
+    ];
+  }
+}

package/_template/{{project}}-ihm/src/app/layout/app.menu.service.ts

@@ -0,0 +1,23 @@
+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);
+  }
+}

package/_template/{{project}}-ihm/src/app/layout/app.menuitem.component.ts

@@ -0,0 +1,213 @@
+import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { IsActiveMatchOptions, NavigationEnd, Router } 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';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: '[app-menuitem]',
+  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)" (mouseenter)="onMouseEnter()"
+         [ngClass]="item.class" [attr.target]="item.target" tabindex="0" pRipple [pTooltip]="item.label"
+         [tooltipDisabled]="!(isSlim && root && !active)">
+        <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)"
+         (mouseenter)="onMouseEnter()" [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 [pTooltip]="item.label" [tooltipDisabled]="!(isSlim && root)">
+        <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: '*'
+      })),
+      state('hidden', style({
+        display: 'none'
+      })),
+      state('visible', style({
+        display: 'block'
+      })),
+      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.isSlim) {
+          this.active = false;
+        } else {
+          if (this.item.routerLink) {
+            this.updateActiveStateFromRoute();
+          }
+        }
+      });
+  }
+
+  ngOnInit() {
+    this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
+
+    if (!this.isSlim && this.item.routerLink) {
+      this.updateActiveStateFromRoute();
+    }
+  }
+
+  updateActiveStateFromRoute() {
+    let activeRoute = this.router.isActive(this.item.routerLink[0], (<IsActiveMatchOptions>this.item.routerLinkActiveOptions || {
+      paths: 'exact',
+      queryParams: 'ignored',
+      matrixParams: 'ignored',
+      fragment: 'ignored'
+    }));
+
+    if (activeRoute) {
+      this.menuService.onMenuStateChange({key: this.key, routeEvent: true});
+    }
+  }
+
+  itemClick(event: MouseEvent) {
+    // avoid processing disabled items
+    if (this.item.disabled) {
+      event.preventDefault();
+      return;
+    }
+
+    // navigate with hover
+    if (this.root && this.isSlim) {
+      this.layoutService.state.menuHoverActive = !this.layoutService.state.menuHoverActive;
+    }
+
+    // execute command
+    if (this.item.command) {
+      this.item.command({originalEvent: event, item: this.item});
+    }
+
+    // add tab
+    if (event.metaKey && this.item.routerLink && (!this.item.data || !this.item.data.fullPage)) {
+      this.layoutService.onTabOpen(this.item);
+      event.preventDefault();
+    }
+
+    // toggle active state
+    if (this.item.items) {
+      this.active = !this.active;
+
+      if (this.root && this.active && this.isSlim) {
+        this.layoutService.onOverlaySubmenuOpen();
+      }
+    } else {
+      if (this.layoutService.isMobile()) {
+        this.layoutService.state.staticMenuMobileActive = false;
+      }
+
+      if (this.isSlim) {
+        this.menuService.reset();
+        this.layoutService.state.menuHoverActive = false;
+      }
+    }
+
+    this.menuService.onMenuStateChange({key: this.key});
+  }
+
+  onMouseEnter() {
+    // activate item on hover
+    if (this.root && this.isSlim && this.layoutService.isDesktop()) {
+      if (this.layoutService.state.menuHoverActive) {
+        this.active = true;
+        this.menuService.onMenuStateChange({key: this.key});
+      }
+    }
+  }
+
+  get submenuAnimation() {
+    if (this.layoutService.isDesktop() && this.layoutService.isSlim())
+      return this.active ? 'visible' : 'hidden';
+    else
+      return this.root ? 'expanded' : (this.active ? 'expanded' : 'collapsed');
+  }
+
+  get isSlim() {
+    return this.layoutService.isSlim();
+  }
+
+  get isMobile() {
+    return this.layoutService.isMobile();
+  }
+
+  @HostBinding('class.active-menuitem')
+  get activeClass() {
+    return this.active && !this.root;
+  }
+
+  ngOnDestroy() {
+    if (this.menuSourceSubscription) {
+      this.menuSourceSubscription.unsubscribe();
+    }
+
+    if (this.menuResetSubscription) {
+      this.menuResetSubscription.unsubscribe();
+    }
+  }
+}

package/_template/{{project}}-ihm/src/app/layout/app.sidebar.component.html

@@ -0,0 +1,5 @@
+<div class="layout-sidebar">
+  <div class="layout-menu-container">
+    <app-menu></app-menu>
+  </div>
+</div>

package/_template/{{project}}-ihm/src/app/layout/app.sidebar.component.ts

@@ -0,0 +1,13 @@
+import { Component, ElementRef } from '@angular/core';
+import { LayoutService } from './service/app.layout.service';
+
+@Component({
+  selector: 'app-sidebar',
+  templateUrl: './app.sidebar.component.html'
+})
+export class AppSidebarComponent {
+
+  constructor(public layoutService: LayoutService, public el: ElementRef) {
+  }
+
+}

package/_template/{{project}}-ihm/src/app/layout/app.topbar.component.html

@@ -0,0 +1,78 @@
+<div class="layout-topbar">
+  <a class="app-logo" routerLink="/">
+    <img alt="app logo" [src]="logo">
+    <span class="app-name">AMODIFIER-NomLong</span>
+  </a>
+
+  <button #menubutton class="topbar-menubutton p-link" type="button" (click)="onMenuButtonClick()">
+    <span></span>
+  </button>
+
+  <ul class="topbar-menu">
+    <li *ngFor="let item of tabs; let i = index">
+      <a [routerLink]="item.routerLink" routerLinkActive="active-route"
+         [routerLinkActiveOptions]="item.routerLinkActiveOptions||{paths: 'exact', queryParams: 'ignored', fragment: 'ignored', matrixParams: 'ignored'}"
+         [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling"
+         [preserveFragment]="item.preserveFragment!"
+         [skipLocationChange]="item.skipLocationChange!" [replaceUrl]="item.replaceUrl!" [state]="item.state"
+         [queryParams]="item.queryParams">
+        <span>{{item.label}}</span>
+      </a>
+      <i class="pi pi-times" (click)="removeTab($event, item, i)"></i>
+    </li>
+    <li *ngIf="!tabs || tabs.length === 0" class="topbar-menu-empty">
+      (cmd + click) pour un nouvel onglet
+    </li>
+  </ul>
+
+  <div class="topbar-search" [ngClass]="{'topbar-search-active': searchActive}">
+    <button class="topbar-searchbutton p-link" type="button" (click)="activateSearch()">
+      <i class="pi pi-search"></i>
+    </button>
+
+    <div class="search-input-wrapper">
+            <span class="p-input-icon-right">
+                <input #searchinput type="text" pInputText placeholder="Search" (blur)="deactivateSearch()"
+                       (keydown.escape)="deactivateSearch()"/>
+                <i class="pi pi-search"></i>
+            </span>
+    </div>
+  </div>
+
+  <div class="topbar-profile">
+    <button class="topbar-profile-button p-link" type="button" pStyleClass="@next" enterClass="hidden"
+            enterActiveClass="scalein" leaveToClass="hidden" leaveActiveClass="fadeout" [hideOnOutsideClick]="true">
+      <img alt="avatar" src="assets/layout/images/user.png">
+      <span class="profile-details">
+                <span class="profile-name">{{userActif.prenom}} {{userActif.nom}}</span>
+                <span class="profile-job">{{userActif.roleActifList}}</span>
+            </span>
+      <i class="pi pi-angle-down"></i>
+    </button>
+    <ul
+      class="list-none p-3 m-0 border-round shadow-2 hidden absolute surface-overlay origin-top w-full sm:w-12rem mt-2 right-0 top-auto">
+      <li>
+        <a pRipple
+           class="flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer">
+          <i class="pi pi-user mr-3"></i>
+          <span>Profile</span>
+        </a>
+        <a pRipple
+           class="flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer">
+          <i class="pi pi-inbox mr-3"></i>
+          <span>Inbox</span>
+        </a>
+        <a pRipple
+           class="flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer">
+          <i class="pi pi-cog mr-3"></i>
+          <span>Settings</span>
+        </a>
+        <a pRipple (click)="appMain.onLogoutClick($event)"
+           class="flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer">
+          <i class="pi pi-power-off mr-3"></i>
+          <span>{{'PROFIL.DECONNEXION' | translate}}</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>

package/_template/{{project}}-ihm/src/app/layout/app.topbar.component.ts

@@ -0,0 +1,72 @@
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { LayoutService } from "./service/app.layout.service";
+import { User } from "../shared/entities/user.model";
+import { UserService } from "../shared/service/user.service";
+import { MainComponent } from "./main/main.component";
+
+@Component({
+  selector: 'app-topbar',
+  templateUrl: './app.topbar.component.html'
+})
+export class AppTopBarComponent implements OnInit {
+
+  menu: MenuItem[] = [];
+  userActif!: User;
+
+  @ViewChild('searchinput') searchInput!: ElementRef;
+
+  @ViewChild('menubutton') menuButton!: ElementRef;
+
+  searchActive: boolean = false;
+
+  constructor(public layoutService: LayoutService,
+              public userService: UserService,
+              public appMain: MainComponent) {
+  }
+
+  ngOnInit(): void {
+    this.userActif = this.userService.currentUser;
+  }
+
+  onMenuButtonClick() {
+    this.layoutService.onMenuToggle();
+  }
+
+  activateSearch() {
+    this.searchActive = true;
+    setTimeout(() => {
+      this.searchInput.nativeElement.focus();
+    }, 100);
+  }
+
+  deactivateSearch() {
+    this.searchActive = false;
+  }
+
+  removeTab(event: MouseEvent, item: MenuItem, index: number) {
+    this.layoutService.onTabClose(item, index);
+    event.preventDefault();
+  }
+
+  get layoutTheme(): string {
+    return this.layoutService.config.layoutTheme;
+  }
+
+  get colorScheme(): string {
+    return this.layoutService.config.colorScheme;
+  }
+
+  get logo(): string {
+    /*
+        const path = 'assets/layout/images/logo-';
+        const logo = this.layoutTheme === 'primaryColor' ? 'light.png' : (this.colorScheme === 'light' ? 'dark.png' : 'light.png');
+        return path + logo;
+    */
+    return 'assets/layout/images/LogoCerema.svg';
+  }
+
+  get tabs(): MenuItem[] {
+    return this.layoutService.tabs;
+  }
+}