@cerema/cadriciel 0.5.0

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

@@ -0,0 +1,85 @@
+<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-18rem">
+  <ng-container *ngIf="!minimal">
+    <h5>Menu Type</h5>
+    <div class="flex">
+      <div class="field-radiobutton flex-1">
+        <p-radioButton name="menuMode" value="static" [(ngModel)]="menuMode" inputId="mode1"></p-radioButton>
+        <label for="mode1">Static</label>
+      </div>
+      <div class="field-radiobutton flex-1">
+        <p-radioButton name="menuMode" value="slim" [(ngModel)]="menuMode" inputId="mode2"></p-radioButton>
+        <label for="mode2">Slim</label>
+      </div>
+    </div>
+    <hr class="surface-border"/>
+  </ng-container>
+
+  <h5>Color Scheme</h5>
+  <div class="flex">
+    <div class="field-radiobutton flex-1">
+      <p-radioButton name="colorScheme" value="light" [(ngModel)]="colorScheme" inputId="scheme1"></p-radioButton>
+      <label for="scheme1">Light</label>
+    </div>
+    <div class="field-radiobutton flex-1">
+      <p-radioButton name="colorScheme" value="dark" [(ngModel)]="colorScheme" inputId="scheme2"></p-radioButton>
+      <label for="scheme2">Dark</label>
+    </div>
+  </div>
+
+  <ng-container *ngIf="!minimal">
+    <h5>Layout Theme</h5>
+    <div class="field-radiobutton">
+      <p-radioButton name="menuTheme" value="colorScheme" [(ngModel)]="menuTheme"
+                     inputId="menutheme-colorscheme"></p-radioButton>
+      <label for="menutheme-colorscheme">Color Scheme</label>
+    </div>
+    <div class="field-radiobutton">
+      <p-radioButton name="menuTheme" value="primaryColor" [(ngModel)]="menuTheme" inputId="menutheme-primarycolor"
+                     [disabled]="colorScheme === 'dark'"></p-radioButton>
+      <label for="menutheme-primarycolor">Primary Color (Light Only)</label>
+    </div>
+  </ng-container>
+
+  <h5>Themes</h5>
+  <div class="flex flex-wrap gap-3">
+    <div *ngFor="let theme of componentThemes">
+      <a style="cursor: pointer" (click)="changeTheme(theme.name)"
+         class="inline-flex justify-content-center align-items-center w-2rem h-2rem border-round"
+         [ngStyle]="{'background-color': colorScheme === 'light' ? theme.lightColor : theme.darkColor, 'color': colorScheme === 'light' ? '#ffffff' : '#000000'}">
+        <i class="pi pi-check" *ngIf="currentTheme === theme.name"></i>
+      </a>
+    </div>
+  </div>
+
+  <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-3 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>
+
+  <h5>Input Style</h5>
+  <div class="flex">
+    <div class="field-radiobutton flex-1">
+      <p-radioButton name="inputStyle" value="outlined" [(ngModel)]="inputStyle" inputId="inputStyle1"></p-radioButton>
+      <label for="inputStyle1">Outlined</label>
+    </div>
+    <div class="field-radiobutton flex-1">
+      <p-radioButton name="inputStyle" value="filled" [(ngModel)]="inputStyle" inputId="inputStyle2"></p-radioButton>
+      <label for="inputStyle2">Filled</label>
+    </div>
+  </div>
+
+  <h5>Ripple Effect</h5>
+  <p-inputSwitch [(ngModel)]="ripple"></p-inputSwitch>
+</p-sidebar>

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

@@ -0,0 +1,230 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { LayoutService } from "../service/app.layout.service";
+import { MenuService } from "../app.menu.service";
+import { MyLocalStorageService } from "../../shared/core/storage/MyLocalStorageService";
+
+const NAME_KEY: string = "TEMPLATE_NAME"
+const COLOR_KEY: string = "TEMPLATE_COLOR"
+const SCALE_KEY: string = "TEMPLATE_SCALE"
+const MENU_THEME_KEY: string = "TEMPLATE_MENU_THEME"
+const MENU_MODE_KEY: string = "TEMPLATE_MENU_MODE"
+const INPUT_STYLE_KEY: string = "TEMPLATE_INPUT_STYLE"
+const RIPPLE_KEY: string = "TEMPLATE_RIPPLE"
+
+@Component({
+  selector: 'app-config',
+  templateUrl: './app.config.component.html'
+})
+export class AppConfigComponent implements OnInit {
+
+  @Input() minimal: boolean = false;
+
+  componentThemes: any[] = [];
+
+  scales: number[] = [12, 13, 14, 15, 16];
+
+  constructor(public layoutService: LayoutService, public menuService: MenuService, public storageService: MyLocalStorageService) {
+  }
+
+  ngOnInit() {
+    this.componentThemes = [
+      {name: 'indigo', lightColor: '#4C63B6', darkColor: '#6A7EC2'},
+      {name: 'blue', lightColor: '#1992D4', darkColor: '#3BABE8'},
+      {name: 'green', lightColor: '#27AB83', darkColor: '#44D4A9'},
+      {name: 'deeppurple', lightColor: '#896FF4', darkColor: '#B1A0F8'},
+      {name: 'orange', lightColor: '#DE911D', darkColor: '#E8AB4F'},
+      {name: 'cyan', lightColor: '#00B9C6', darkColor: '#58CDD5'},
+      {name: 'yellow', lightColor: '#F9C404', darkColor: '#FDDD68'},
+      {name: 'pink', lightColor: '#C74B95', darkColor: '#D77FB4'},
+      {name: 'purple', lightColor: '#BA6FF4', darkColor: '#D1A0F8'},
+      {name: 'lime', lightColor: '#84BD20', darkColor: '#A3D44E'},
+    ];
+    this.restorePrefs();
+  }
+
+  private restorePrefs() {
+
+    // Si les deux préférences sont enregistrées on doit les restaurer en même temps,
+    // sinon on a une race condition entre les deux restaurations.
+    if (this.storageService.getItem(NAME_KEY) && this.storageService.getItem(COLOR_KEY)) {
+      this.changeColorSchemeAndTheme(
+        this.storageService.getItem(COLOR_KEY) as string,
+        this.storageService.getItem(NAME_KEY) as string);
+    } else{
+      if (this.storageService.getItem(NAME_KEY)) {
+        this.changeTheme(this.storageService.getItem(NAME_KEY) as string);
+      }
+      if (this.storageService.getItem(COLOR_KEY)) {
+        this.changeColorScheme(this.storageService.getItem(COLOR_KEY) as string);
+      }
+    }
+
+    if (this.storageService.getItem(SCALE_KEY)) {
+      this.scale = JSON.parse(this.storageService.getItem(SCALE_KEY) as string);
+      this.applyScale();
+    }
+    if (this.storageService.getItem(MENU_THEME_KEY)) {
+      this.menuTheme = this.storageService.getItem(MENU_THEME_KEY) as string;
+    }
+    if (this.storageService.getItem(MENU_MODE_KEY)) {
+      this.menuMode = this.storageService.getItem(MENU_MODE_KEY) as string;
+    }
+    if (this.storageService.getItem(INPUT_STYLE_KEY)) {
+      this.inputStyle = this.storageService.getItem(INPUT_STYLE_KEY) as string;
+    }
+    if (this.storageService.getItem(RIPPLE_KEY)) {
+      this.ripple = JSON.parse(this.storageService.getItem(RIPPLE_KEY) as string);
+    }
+  }
+
+  changeColorScheme(colorScheme: string) {
+    this.storageService.setItem(COLOR_KEY, colorScheme);
+    const themeLink = <HTMLLinkElement>document.getElementById('theme-link');
+    const themeLinkHref = themeLink.getAttribute('href');
+    const currentColorScheme = 'theme-' + this.layoutService.config.colorScheme;
+    const newColorScheme = 'theme-' + colorScheme;
+    const newHref = themeLinkHref!.replace(currentColorScheme, newColorScheme);
+    this.replaceThemeLink(newHref, () => {
+      this.layoutService.config.colorScheme = colorScheme;
+      this.layoutService.onConfigUpdate();
+    });
+  }
+
+  changeTheme(theme: string) {
+    this.storageService.setItem(NAME_KEY, theme);
+    const themeLink = <HTMLLinkElement>document.getElementById('theme-link');
+    const newHref = themeLink.getAttribute('href')!.replace(this.layoutService.config.theme, theme);
+    this.replaceThemeLink(newHref, () => {
+      this.layoutService.config.theme = theme;
+      this.layoutService.onConfigUpdate();
+    });
+  }
+
+  changeColorSchemeAndTheme(colorScheme: string, theme: string) {
+    this.storageService.setItem(COLOR_KEY, colorScheme);
+    this.storageService.setItem(NAME_KEY, theme);
+
+    const themeLink = <HTMLLinkElement>document.getElementById('theme-link');
+    const themeLinkHref = themeLink.getAttribute('href');
+
+    const currentColorScheme = 'theme-' + this.layoutService.config.colorScheme;
+    const newColorScheme = 'theme-' + colorScheme;
+
+    let newHref = themeLinkHref!.replace(currentColorScheme, newColorScheme);
+    newHref = newHref!.replace(this.layoutService.config.theme, theme);
+
+    this.replaceThemeLink(newHref, () => {
+      this.layoutService.config.colorScheme = colorScheme;
+      this.layoutService.config.theme = theme;
+      this.layoutService.onConfigUpdate();
+    });
+  }
+
+  replaceThemeLink(href: string, onComplete: Function) {
+    const id = 'theme-link';
+    const 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);
+      onComplete();
+    });
+  }
+
+  isIE() {
+    return /(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent);
+  }
+
+  onConfigButtonClick() {
+    this.layoutService.showConfigSidebar();
+  }
+
+  get currentTheme(): string {
+    return this.layoutService.config.theme;
+  }
+
+  get colorScheme(): string {
+    return this.layoutService.config.colorScheme;
+  }
+
+  set colorScheme(_val: string) {
+    this.changeColorScheme(_val);
+  }
+
+  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.storageService.setItem(SCALE_KEY, JSON.stringify(_val));
+    this.layoutService.config.scale = _val;
+  }
+
+  get menuTheme(): string {
+    return this.layoutService.config.layoutTheme;
+  }
+
+  set menuTheme(_val: string) {
+    this.storageService.setItem(MENU_THEME_KEY, _val);
+    this.layoutService.config.layoutTheme = _val;
+  }
+
+  get menuMode(): string {
+    return this.layoutService.config.menuMode;
+  }
+
+  set menuMode(_val: string) {
+    this.storageService.setItem(MENU_MODE_KEY, _val);
+    this.layoutService.config.menuMode = _val;
+    if (this.layoutService.isSlim()) {
+      this.menuService.reset();
+    }
+  }
+
+  get inputStyle(): string {
+    return this.layoutService.config.inputStyle;
+  }
+
+  set inputStyle(_val: string) {
+    this.storageService.setItem(INPUT_STYLE_KEY, _val);
+    this.layoutService.config.inputStyle = _val;
+  }
+
+  get ripple(): boolean {
+    return this.layoutService.config.ripple;
+  }
+
+  set ripple(_val: boolean) {
+    this.storageService.setItem(RIPPLE_KEY, JSON.stringify(_val));
+    this.layoutService.config.ripple = _val;
+  }
+
+  decrementScale() {
+    this.scale--;
+    this.applyScale();
+  }
+
+  incrementScale() {
+    this.scale++;
+    this.applyScale();
+  }
+
+  applyScale() {
+    document.documentElement.style.fontSize = this.scale + 'px';
+  }
+
+}

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

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+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';
+import { AppConfigComponent } from './app.config.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    SidebarModule,
+    RadioButtonModule,
+    ButtonModule,
+    InputSwitchModule
+  ],
+  declarations: [
+    AppConfigComponent
+  ],
+  exports: [
+    AppConfigComponent
+  ]
+})
+export class AppConfigModule {
+}

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

@@ -0,0 +1,15 @@
+<div class="layout-container" [ngClass]="containerClass">
+  <app-topbar></app-topbar>
+  <app-sidebar></app-sidebar>
+  <div class="layout-content-wrapper">
+    <div class="layout-content">
+      <div class="layout-content-inner">
+        <app-breadcrumb></app-breadcrumb>
+        <router-outlet></router-outlet>
+        <app-footer></app-footer>
+      </div>
+    </div>
+  </div>
+  <app-config></app-config>
+</div>
+

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

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainComponent } from './main.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { RouterModule } from '@angular/router';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+describe('AccueilComponent', () => {
+  let component: MainComponent;
+  let fixture: ComponentFixture<MainComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MainComponent],
+      providers: [],
+      imports: [HttpClientTestingModule, RouterModule.forRoot([], {relativeLinkResolution: 'corrected'})],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+  });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MainComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,156 @@
+import { Component, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { UserService } from '../../shared/service/user.service';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { OAuthService } from "angular-oauth2-oidc";
+import { filter, Subscription } from "rxjs";
+import { AppSidebarComponent } from "../app.sidebar.component";
+import { AppTopBarComponent } from "../app.topbar.component";
+import { MenuService } from "../app.menu.service";
+import { LayoutService } from "../service/app.layout.service";
+import { TabCloseEvent } from "../api/tabcloseevent";
+import { Claims } from "../../shared/entities/claims.model";
+
+@Component({
+  selector: 'app-accueil',
+  templateUrl: './main.component.html',
+})
+export class MainComponent implements OnInit {
+  overlayMenuOpenSubscription: Subscription;
+  tabOpenSubscription: Subscription;
+  tabCloseSubscription: Subscription;
+  menuOutsideClickListener: any;
+
+  @ViewChild(AppSidebarComponent) appSidebar!: AppSidebarComponent;
+  @ViewChild(AppTopBarComponent) appTopbar!: AppTopBarComponent;
+
+  constructor(private menuService: MenuService,
+              public layoutService: LayoutService,
+              public renderer: Renderer2,
+              public router: Router,
+              private oAuthService: OAuthService,
+              private userService: UserService,
+              private activatedRoute: ActivatedRoute) {
+    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.layoutService.state.staticMenuMobileActive) {
+        this.blockBodyScroll();
+      }
+    });
+
+    this.router.events.pipe(filter(event => event instanceof NavigationEnd))
+      .subscribe(() => {
+        this.hideMenu();
+      });
+
+    this.tabOpenSubscription = this.layoutService.tabOpen$.subscribe(tab => {
+      this.router.navigate(tab.routerLink);
+      this.layoutService.openTab(tab);
+    });
+
+    this.tabCloseSubscription = this.layoutService.tabClose$.subscribe((event: TabCloseEvent) => {
+      if (this.router.isActive(event.tab.routerLink[0], {
+        paths: 'subset',
+        queryParams: 'subset',
+        fragment: 'ignored',
+        matrixParams: 'ignored'
+      })) {
+        const tabs = this.layoutService.tabs;
+
+        if (tabs.length > 1) {
+          if (event.index === (tabs.length - 1))
+            this.router.navigate(tabs[tabs.length - 2].routerLink);
+          else
+            this.router.navigate(tabs[event.index + 1].routerLink);
+        } else {
+          this.router.navigate(['/']);
+        }
+      }
+
+      this.layoutService.closeTab(event.index);
+    });
+
+  }
+
+  ngOnInit(): void {
+    this.activatedRoute.data.subscribe(data => {
+      this.userService.currentUser = data.user.body;
+      this.userService.addInfoFromClaims(<Claims>this.oAuthService.getIdentityClaims())
+    });
+  }
+
+
+  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'), ' ');
+    }
+  }
+
+  hideMenu() {
+    this.layoutService.state.overlayMenuActive = false;
+    this.layoutService.state.staticMenuMobileActive = false;
+    this.layoutService.state.menuHoverActive = false;
+    this.menuService.reset();
+    if (this.menuOutsideClickListener) {
+      this.menuOutsideClickListener();
+      this.menuOutsideClickListener = null;
+    }
+    this.unblockBodyScroll();
+  }
+
+  get containerClass() {
+    return {
+      'layout-slim': this.layoutService.config.menuMode === 'slim',
+      'layout-static': this.layoutService.config.menuMode === 'static',
+      'layout-mobile-active': this.layoutService.state.staticMenuMobileActive,
+      'layout-static-inactive': this.layoutService.state.staticMenuDesktopInactive && this.layoutService.config.menuMode === 'static',
+      'p-input-filled': this.layoutService.config.inputStyle === 'filled',
+      'p-ripple-disabled': !this.layoutService.config.ripple,
+      'layout-light': this.layoutService.config.layoutTheme === 'colorScheme' && this.layoutService.config.colorScheme === 'light',
+      'layout-dark': this.layoutService.config.layoutTheme === 'colorScheme' && this.layoutService.config.colorScheme === 'dark',
+      'layout-primary': this.layoutService.config.colorScheme !== 'dark' && this.layoutService.config.layoutTheme === 'primaryColor'
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.overlayMenuOpenSubscription) {
+      this.overlayMenuOpenSubscription.unsubscribe();
+    }
+
+    if (this.menuOutsideClickListener) {
+      this.menuOutsideClickListener();
+    }
+
+    if (this.tabOpenSubscription) {
+      this.tabOpenSubscription.unsubscribe();
+    }
+
+    if (this.tabCloseSubscription) {
+      this.tabCloseSubscription.unsubscribe();
+    }
+  }
+
+  onLogoutClick(event: MouseEvent) {
+    this.oAuthService.logOut();
+    event.preventDefault();
+  }
+}

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

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { MainComponent } from './main/main.component';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: MainComponent,
+        children: [
+          {
+            path: '',
+            redirectTo: 'documentation',
+            pathMatch: 'full',
+          },
+          {
+            path: 'documentation',
+            data: {breadcrumb: 'Documentation'},
+            loadChildren: () => import('../{{project}}/components/documentation/documentation.module').then(m => m.DocumentationModule)
+          },
+        ],
+      },
+    ]),
+  ],
+  exports: [RouterModule],
+})
+export class MainRoutingModule {
+}

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

@@ -0,0 +1,45 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '../shared/shared.module';
+import { MainComponent } from './main/main.component';
+import { MainRoutingModule } from './main-routing.module';
+import { MenuModule } from "primeng/menu";
+import { HttpClientModule } from "@angular/common/http";
+import { StyleClassModule } from "primeng/styleclass";
+import { AppConfigModule } from "./config/config.module";
+import { AppMenuitemComponent } from "./app.menuitem.component";
+import { AppTopBarComponent } from "./app.topbar.component";
+import { AppSidebarComponent } from "./app.sidebar.component";
+import { AppFooterComponent } from "./app.footer.component";
+import { AppMenuComponent } from "./app.menu.component";
+import { AppBreadcrumbComponent } from "./app.breadcrumb.component";
+import { AppComponent } from "../app.component";
+import { InputTextModule } from "primeng/inputtext";
+import { TranslateModule } from "@ngx-translate/core";
+
+
+@NgModule({
+  declarations: [
+    MainComponent,
+    AppMenuitemComponent,
+    AppTopBarComponent,
+    AppSidebarComponent,
+    AppFooterComponent,
+    AppMenuComponent,
+    AppBreadcrumbComponent,
+    AppComponent,
+  ],
+    imports: [
+        CommonModule,
+        SharedModule,
+        MainRoutingModule,
+        HttpClientModule,
+        MenuModule,
+        StyleClassModule,
+        AppConfigModule,
+        InputTextModule,
+        TranslateModule,
+    ],
+})
+export class MainModule {
+}