@onemrvapublic/design-system 0.0.0

package/projects/test/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/test'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/projects/test/src/app/app-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { routes } from './routes';
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, {
+      anchorScrolling: 'enabled',
+      onSameUrlNavigation: 'reload',
+    }),
+  ],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}

package/projects/test/src/app/app.component.html

@@ -0,0 +1,14 @@
+<div class="container" *ngIf="showapp">
+  <mat-form-field style="width: 120px">
+    <mat-label>language</mat-label>
+    <mat-select (selectionChange)="changeLanguage($event)" [(value)]="language">
+      <mat-option></mat-option>
+      <mat-option *ngFor="let lang of languages" [value]="lang.code">{{ lang.label }}</mat-option>
+    </mat-select>
+  </mat-form-field>
+  <div><a routerLink="">Home</a></div>
+  <br />
+  <main>
+    <router-outlet></router-outlet>
+  </main>
+</div>

package/projects/test/src/app/app.component.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'test'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('test');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('test app is running!');
+  });
+});

package/projects/test/src/app/app.component.ts

@@ -0,0 +1,51 @@
+import {Component, Inject, Input} from '@angular/core';
+import { OnemrvaMatTableOfContentService } from '../../../onemrva/design-system/mat-table-of-content/src/onemrva-mat-table-of-content.service';
+import {TranslateService} from "@ngx-translate/core";
+import {DOCUMENT} from "@angular/common";
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  providers: [OnemrvaMatTableOfContentService],
+})
+export class AppComponent {
+  title = 'test';
+
+  languages: any[] = [
+    {
+      code: 'fr',
+      label: 'Français'
+    },
+    {
+      code: 'nl',
+      label: 'Nederlands'
+    },
+    {
+      code: 'en',
+      label: 'English'
+    },
+    {
+      code: 'de',
+      label: 'Deutsch'
+    },
+  ];
+  language = this.translateService.currentLang;
+
+  @Input()
+  showapp: boolean = true;
+
+  changeLanguage($event : any) {
+    if (this.translateService.getLangs().includes($event.value)) {
+      this.translateService.use($event.value);
+      this.document.documentElement.lang = $event.value;
+      this.language = $event.value;
+    }
+  }
+
+  constructor(
+    public translateService: TranslateService,
+    @Inject(DOCUMENT) private document: Document) {
+    this.translateService.getLangs()
+  }
+}

package/projects/test/src/app/app.module.ts

@@ -0,0 +1,103 @@
+import {APP_INITIALIZER, Injector, NgModule} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { OnemrvaMaterialModule } from './material.module';
+
+import {
+  TranslateLoader,
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { OnemrvaTranslateHttpLoader } from './onemrva-translate-http-loader';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HomeComponent } from './home.component';
+import { OnemrvaMatTableOfContentDirective } from '../../../onemrva/design-system/mat-table-of-content/src/onemrva-mat-table-of-content.directive';
+import { OnemrvaMatTableOfContentComponent } from '../../../onemrva/design-system/mat-table-of-content';
+import { MatSelectModule } from '@angular/material/select';
+import {DemoMultiSelectComponent} from "./demos/multiselect/demo-multiselect.component";
+import {createCustomElement} from "@angular/elements";
+
+// required for AOT compilation
+export function HttpLoaderFactory(
+  http: HttpClient
+): OnemrvaTranslateHttpLoader {
+  return new OnemrvaTranslateHttpLoader(http);
+}
+
+@NgModule({
+  declarations: [AppComponent, HomeComponent],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    AppRoutingModule,
+    OnemrvaMaterialModule,
+    HttpClientModule,
+    MatSelectModule,
+    OnemrvaMatTableOfContentDirective,
+    OnemrvaMatTableOfContentComponent,
+
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient],
+      },
+    }),
+  ],
+  providers: [
+    {
+      provide: APP_INITIALIZER,
+      deps: [TranslateService],
+      useFactory: (translateService: TranslateService) => {
+        return async () => {
+          translateService.onLangChange.subscribe((value) => {
+            localStorage.setItem('language', value.lang);
+            console.log('Language changed in app.module ' + value.lang);
+          });
+
+          // translateService.addLangs(['en']);
+          // await translateService.use('en').toPromise();
+
+          const languages = ['fr', 'nl', 'de', 'en'];
+
+          translateService.addLangs(languages);
+
+          let language: string | null = localStorage.getItem('language');
+
+          if (language === null || languages.indexOf(language) < 0) {
+            // getting language from browser
+            if (languages.indexOf(navigator.language) >= 0) {
+              language = navigator.language;
+            } else {
+              // getting language from one of the browser's languages
+              for (let lng of navigator.languages) {
+                if (languages.indexOf(lng) >= 0) {
+                  language = lng;
+                  break;
+                }
+              }
+              // getting default language
+              if (language === null || languages.indexOf(language) < 0) {
+                language = 'en';
+              }
+            }
+          }
+
+          await translateService.use(language).toPromise();
+        };
+      },
+      multi: true,
+    },
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppModule {
+
+  constructor(private injector: Injector) {
+    customElements.define('wc-select', createCustomElement(DemoMultiSelectComponent, { injector }));
+
+  }
+}

package/projects/test/src/app/demos/avatar/demo-avatar.component.html

@@ -0,0 +1,77 @@
+<onemrva-mat-avatar
+  initials="LS"
+  color="accent"
+  size="extralarge"
+></onemrva-mat-avatar>
+<onemrva-mat-avatar
+  initials="LS"
+  color="accent"
+  size="large"
+></onemrva-mat-avatar>
+<onemrva-mat-avatar
+  initials="LS"
+  color="accent"
+  size="medium"
+></onemrva-mat-avatar>
+<onemrva-mat-avatar
+  initials="LS"
+  color="accent"
+  size="small"
+></onemrva-mat-avatar>
+<onemrva-mat-avatar
+  initials="LS"
+  color="accent"
+  size="extrasmall"
+></onemrva-mat-avatar>
+<br />
+<onemrva-mat-avatar
+  src="https://images.pexels.com/photos/10697872/pexels-photo-10697872.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
+  color="accent"
+  size="extralarge"
+></onemrva-mat-avatar>
+<onemrva-mat-avatar
+  src="https://images.pexels.com/photos/10697872/pexels-photo-10697872.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
+  color="accent"
+  size="large"
+></onemrva-mat-avatar>
+<onemrva-mat-avatar
+  src="https://images.pexels.com/photos/10697872/pexels-photo-10697872.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
+  color="accent"
+  size="medium"
+></onemrva-mat-avatar>
+<onemrva-mat-avatar
+  src="https://images.pexels.com/photos/10697872/pexels-photo-10697872.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
+  color="accent"
+  size="small"
+></onemrva-mat-avatar>
+<onemrva-mat-avatar
+  src="https://images.pexels.com/photos/10697872/pexels-photo-10697872.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
+  color="accent"
+  size="extrasmall"
+></onemrva-mat-avatar>
+<br />
+<onemrva-mat-avatar
+  icon="account_circle"
+  color="accent"
+  size="extralarge"
+></onemrva-mat-avatar>
+<onemrva-mat-avatar
+  icon="account_circle"
+  color="accent"
+  size="large"
+></onemrva-mat-avatar>
+<onemrva-mat-avatar
+  icon="account_circle"
+  color="accent"
+  size="medium"
+></onemrva-mat-avatar>
+<onemrva-mat-avatar
+  icon="account_circle"
+  color="accent"
+  size="small"
+></onemrva-mat-avatar>
+<onemrva-mat-avatar
+  icon="account_circle"
+  color="accent"
+  size="extrasmall"
+></onemrva-mat-avatar>

package/projects/test/src/app/demos/avatar/demo-avatar.component.scss

@@ -0,0 +1,4 @@
+
+onemrva-mat-avatar{
+    margin: 20px;
+}

package/projects/test/src/app/demos/avatar/demo-avatar.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+import { CommonModule } from '@angular/common';
+import { OnemrvaMatAvatarModule } from '../../../../../onemrva/design-system/mat-avatar';
+
+@Component({
+  selector: 'app-demo-avatar',
+  standalone: true,
+  imports: [CommonModule, OnemrvaMatAvatarModule],
+  templateUrl: 'demo-avatar.component.html',
+  styleUrls: ['demo-avatar.component.scss'],
+})
+export class DemoAvatarComponent {}