@onemrvapublic/design-system 0.0.0 → 1.0.0-beta.4

package/.eslintrc.json

@@ -0,0 +1,33 @@
+{
+  "extends": "../../../.eslintrc.json",
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "plugins": ["unused-imports"],
+      "files": ["*.ts"],
+      "rules": {
+        "unused-imports/no-unused-imports": "error",
+        "@angular-eslint/directive-selector": [
+          "off",
+          {
+            "type": "attribute",
+            "prefix": "lib",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "off",
+          {
+            "type": "element",
+            "prefix": "lib",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "rules": {}
+    }
+  ]
+}

package/README.md

@@ -1,27 +1,28 @@
-# @onemrvapublic/design-system
+# ONEMRVA - Design System
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.1.0.
+This design system (DS) is part of
+the ONEM architecture to ensure smooth
+building of applications on the new stackk
 
-## Development server
+## Versioning
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+In our goal to create a smoother release process experience
+you will notice our versioning has changed
+we will now be working with beta versions to continuously deploy.
 
-## Code scaffolding
+### Major
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+The major will always be aligned with the Angular major version.
 
-## Build
+### Minor
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+This is where we will upgrade functionalities
 
-## Running unit tests
+### Patch
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+This is where we will implement bugfixes
 
-## Running end-to-end tests
+## Support
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+For support questions, you can create jira tickets now.
+If you need access to our design system board, send us a message.

package/_index.scss

@@ -0,0 +1,34 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@forward './mat-avatar/src/onemrva-mat-avatar.component' show avatar;
+@forward './layout/src/components/layout/layout-mixin.component' show layout;
+@forward './mat-badge/src/onemrva-mat-badge.component' show badge;
+@forward './mat-breadcrumb/src/onemrva-mat-breadcrumb.component' show breadcrumb;
+@forward './mat-datepicker-header/src/onemrva-mat-datepicker-header.component'
+  show datepickerHeader;
+@forward './layout/src/components/layout/layout-mixin.component' show layout;
+@forward './mat-message-box/src/onemrva-mat-message-box.component' show
+  messageBox;
+@forward './mat-multi-select/src/onemrva-mat-multi-select.component' show
+  multiselect;
+@forward './mat-notification/src/onemrva-mat-notification.component' show
+  notification;
+@forward './mat-paginator/src/onemrva-mat-paginator.component' show paginator;
+@forward './mat-panel/src/onemrva-mat-panel.component' show panel;
+@forward './mat-side-menu/src/onemrva-mat-side-menu.component' show sideMenu;
+@forward './mat-spinner/src/onemrva-mat-spinner.component' show spinner;
+@forward './mat-sticker/src/onemrva-mat-sticker.component' show sticker;
+@forward './mat-selectable-box/src/onemrva-mat-selectable-box.component' show
+  selectablebox;
+@forward './mat-carousel/src/onemrva-mat-carousel.component' show carousel;
+@forward './mat-toast/src/onemrva-mat-toast.component' show toast;
+@forward './page-not-found/src/page-not-found-mixin.component' show pageNotFound;
+@forward './mat-progress-bar/src/onemrva-mat-progress-bar-mixin.component' show
+  progressBar;
+@forward './mat-file-upload/src/components/onemrva-mat-file-upload/onemrva-mat-file-upload.component'
+  show fileUpload;
+@forward './mat-skeleton/src/onemrva-mat-skeleton.component' show skeleton;
+@forward './mat-task-list/src/onemrva-mat-task-list.component' show taskList;
+@forward './mat-table-of-content/src/onemrva-mat-table-of-content.component'
+  show toc;

package/_utils.scss

@@ -0,0 +1,30 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@function palette($theme, $palette, $hue: default, $opacity: null) {
+  $theme-palette: map.get(
+    (
+      primary: map.get($theme, 'primary'),
+      warn: map.get($theme, 'warn'),
+      accent: map.get($theme, 'accent'),
+      grayscale: map.get($theme, 'grayscale'),
+      info: map.get($theme, 'info'),
+      success: map.get($theme, 'success'),
+      error: map.get($theme, 'error'),
+    ),
+    $palette
+  );
+  @return mat.get-color-from-palette($theme-palette, $hue, $opacity);
+}
+
+@function fontFamily($config, $level) {
+  $typo: map-get($config, 'typography');
+  $fs: map-get($typo, $level);
+  @return map-get($fs, 'font-family');
+}
+@function gradient($theme) {
+  @return map.get($theme, 'gradient');
+}
+@function breakpoints($theme) {
+  @return map.get($theme, 'breakpoints');
+}

package/assets/i18n/de.json

@@ -0,0 +1,86 @@
+{
+  "demo.title": "Design System",
+  "404": {
+    "oops": "oops",
+    "title": "Fehler 404 - Seite nicht gefunden!",
+    "body": "Es tut uns leid, die von Ihnen angeforderte Seite wurde von Aliens gefangen genommen.",
+    "actions": "Aber Sie können trotzdem",
+    "contact.us": "Kontaktieren Sie uns",
+    "go.back": "Gehen Sie zurück nach Hause",
+    "extra": "oder suchen Sie, was Sie suchen",
+    "fliegende.untertasse": "Fliegende Untertasse",
+    "traktor.strahl": "Traktorstrahl",
+    "erschreckte.seite": "Erschrockene Seite",
+    "schatten": "Schatten",
+    "search.input.label": "Suche"
+  },
+  "paginator": {
+    "Previous": "< Previous",
+    "Next": "Next >",
+    "records.per.page": "Elemente pro Seite",
+    "outOf": "out of"
+  },
+  "file": {
+    "upload": {
+      "drag.and.drop": "Ziehen Sie Ihre Dateien hierher und legen Sie sie ab",
+      "browse.for.file": "Nach Dateien suchen",
+      "type.not.supported": "Dateityp wird nicht unterstützt",
+      "too.big": "Die Datei hat die maximale Größe von überschritten",
+      "maximum": "Maximum",
+      "delete": "Löschen",
+      "error.occurred": "Es ist ein Fehler aufgetreten, bitte versuchen Sie es erneut",
+      "confirm.delete": "Diese Datei löschen?",
+      "are.you.sure": "Möchten Sie die Datei wirklich löschen",
+      "remove": "Löschen",
+      "cancel": "Abbrechen",
+      "retry": "Erneut versuchen",
+      "or": "oder"
+    }
+  },
+  "select": {
+    "select.all": "Select All",
+    "deselect.all": "Deselect All",
+    "search": {
+      "filter": "Forschen",
+      "notFound": "Kein Ergebnis"
+    }
+  },
+  "layout": {
+    "profile": "Profile",
+    "login": "Login",
+    "logout": "Logout",
+    "Menu": "Menu",
+    "interface": {
+      "trusted": "Schnittstelle für vertrauenswürdige Personen",
+      "collaborator": "Mitarbeiterschnittstelle"
+    }
+  },
+  "thermo": {
+    "title": "Thermodynamics",
+    "introduction": "Introduction",
+    "history": "History",
+    "etymology": "Etymology",
+    "branches": "Branches",
+    "classicalThermodynamics": "Classical thermodynamics",
+    "statisticalThermodynamics": "Statistical thermodynamics",
+    "chemicalThermodynamics": "Chemical thermodynamics",
+    "equilibriumThermodynamics": "Equilibrium thermodynamics",
+    "nonEquilibriumThermodynamics": "Non-equilibrium thermodynamics"
+  },
+  "input": {
+    "phone": {
+      "required": "Field required",
+      "invalid": "Field invalid",
+      "notFound": "Not found",
+      "search": "Search",
+      "label": "Phone number",
+      "hint": "Start with 0 for belgian phone numbers"
+    }
+  },
+  "copied.to.clipboard": "In Zwischenablage kopiert",
+  "carousel": {
+    "next": "Nächste",
+    "previous": "Vorherige",
+    "goto": "Gehe zu"
+  }
+}

package/assets/i18n/en.json

@@ -0,0 +1,86 @@
+{
+  "demo.title": "Design System",
+  "404": {
+    "oops": "Oops",
+    "title": "Error 404 - Page not found!",
+    "body": "We are sorry, the page you requested has been captured by aliens.",
+    "actions": "But you still can",
+    "contact.us": "Contact us",
+    "go.back": "Go back home",
+    "extra": "or search what you are looking for",
+    "flying.saucer": "Flying saucer",
+    "tractor.beam": "Tractor beam",
+    "scared.page": "Scared page",
+    "shadow": "Shadow",
+    "search.input.label": "Search"
+  },
+  "paginator": {
+    "Previous": "< Previous",
+    "Next": "Next >",
+    "records.per.page": "Elements per page",
+    "outOf": "out of"
+  },
+  "file": {
+    "upload": {
+      "drag.and.drop": "Drag and drop your files here",
+      "browse.for.file": "Browse for files",
+      "type.not.supported": "File type not supported",
+      "too.big": "The file exceeded the maximum size of",
+      "maximum": "Maximum",
+      "delete": "Delete",
+      "error.occurred": "An error occurred, please try again",
+      "confirm.delete": "Delete file ?",
+      "are.you.sure": "Are you sure you want to delete the file",
+      "remove": "Remove",
+      "cancel": "Cancel",
+      "retry": "Retry",
+      "or": "or"
+    }
+  },
+  "select": {
+    "select.all": "Select All",
+    "deselect.all": "Deselect All",
+    "search": {
+      "filter": "Search",
+      "notFound": "Not found"
+    }
+  },
+  "layout": {
+    "profile": "Profile",
+    "login": "Login",
+    "logout": "Logout",
+    "Menu": "Menu",
+    "interface": {
+      "trusted": "Trusted person interface",
+      "collaborator": "Collaborator interface"
+    }
+  },
+  "thermo": {
+    "title": "Thermodynamics",
+    "introduction": "Introduction",
+    "history": "History",
+    "etymology": "Etymology",
+    "branches": "Branches",
+    "classicalThermodynamics": "Classical thermodynamics",
+    "statisticalThermodynamics": "Statistical thermodynamics",
+    "chemicalThermodynamics": "Chemical thermodynamics",
+    "equilibriumThermodynamics": "Equilibrium thermodynamics",
+    "nonEquilibriumThermodynamics": "Non-equilibrium thermodynamics"
+  },
+  "input": {
+    "phone": {
+      "required": "Field required",
+      "invalid": "Field invalid",
+      "notFound": "Not found",
+      "search": "Search",
+      "label": "Phone number",
+      "hint": "Start with 0 for belgian phone numbers"
+    }
+  },
+  "copied.to.clipboard": "Copied to clipboard",
+  "carousel": {
+    "next": "Next",
+    "previous": "Previous",
+    "goto": "Go to"
+  }
+}

package/assets/i18n/fr.json

@@ -0,0 +1,86 @@
+{
+  "demo.title": "Design System",
+  "404": {
+    "oops": "Oups",
+    "title": "Erreur 404 - Page introuvable!",
+    "body": "Nous sommes désolés, la page demandée a été capturée par des extra-terrestres",
+    "actions": "Mais vous pouvez toujours",
+    "contact.us": "Nous contacter",
+    "go.back": "Retourner à l'accueil",
+    "extra": "Ou voulez-vous approfondir votre recherche ?",
+    "flying.saucer": "Soucoupe volante",
+    "tractor.beam": "Rayon tracteur",
+    "scared.page": "Une page effrayée",
+    "shadow": "Ombre",
+    "search.input.label": "Recherche"
+  },
+  "paginator": {
+    "Previous": "< Précédent",
+    "Next": "Suivant >",
+    "records.per.page": "Eléments par page",
+    "outOf": "de"
+  },
+  "file": {
+    "upload": {
+      "drag.and.drop": "Déposez vos fichiers ici",
+      "browse.for.file": "Parcourir les fichiers",
+      "type.not.supported": "Type de fichier non supporté",
+      "too.big": "Le fichier dépasse la limit de",
+      "maximum": "Maximum",
+      "delete": "Effacer",
+      "error.occurred": "Une erreur est survenue, veuillez recommencer",
+      "confirm.delete": "Supprimer le fichier ?",
+      "are.you.sure": "Etes-vous sûr de vouloir supprimer le fichier",
+      "remove": "Retirer",
+      "cancel": "Annuler",
+      "retry": "Recommencer",
+      "or": "ou"
+    }
+  },
+  "select": {
+    "select.all": "Tout sélectionner",
+    "deselect.all": "Tout désélectionner",
+    "search": {
+      "filter": "Rechercher",
+      "notFound": "Pas de résultat"
+    }
+  },
+  "layout": {
+    "profile": "Profile",
+    "login": "Connexion",
+    "logout": "Déconnexion",
+    "Menu": "Menu",
+    "interface": {
+      "trusted": "Interface personne de confiance",
+      "collaborator": "Interface collaborateur"
+    }
+  },
+  "thermo": {
+    "title": "Thermodynamics",
+    "introduction": "Introduction",
+    "history": "History",
+    "etymology": "Etymology",
+    "branches": "Branches",
+    "classicalThermodynamics": "Classical thermodynamics",
+    "statisticalThermodynamics": "Statistical thermodynamics",
+    "chemicalThermodynamics": "Chemical thermodynamics",
+    "equilibriumThermodynamics": "Equilibrium thermodynamics",
+    "nonEquilibriumThermodynamics": "Non-equilibrium thermodynamics"
+  },
+  "input": {
+    "phone": {
+      "required": "Champs requis",
+      "invalid": "Champs invalide",
+      "notFound": "Introuvable",
+      "search": "Rechercher",
+      "label": "Téléphone",
+      "hint": "Start with 0 for belgian phone numbers"
+    }
+  },
+  "copied.to.clipboard": "Copié dans le presse-papier",
+  "carousel": {
+    "next": "Suivant",
+    "previous": "Précédent",
+    "goto": "Aller à"
+  }
+}

package/assets/i18n/nl.json

@@ -0,0 +1,85 @@
+{
+  "demo.title": "Ontwerpsysteem",
+  "404": {
+    "oops": "Oops",
+    "title": "Fout 404 - Pagina niet gevonden!",
+    "body": "Het spijt ons, de door u opgevraagde pagina is buitgemaakt door aliens.",
+    "actions": "Maar u kunt nog steeds",
+    "contact.ons": "Neem contact met ons op.",
+    "go.back": "Ga terug naar huis",
+    "extra": "of zoek wat u zoekt.",
+    "flying.saucer": "Vliegende schotel",
+    "tractor.beam": "Tractor beam",
+    "scared.page": "Scared page",
+    "shadow": "schaduw",
+    "search.input.label": "Search"
+  },
+  "paginator": {
+    "Previous": "< Vorig",
+    "Next": "Next >",
+    "records.per.page": "Elementen per pagina",
+    "outOf": "out of"
+  },
+  "file": {
+    "upload": {
+      "drag.and.drop": "Sleep uw bestanden hierheen",
+      "browse.for.file": "Bladeren naar bestanden",
+      "type.not.supported": "Bestandstype niet ondersteund",
+      "too.big": "Het bestand overschreed de maximale grootte van",
+      "maximum": "Maximum",
+      "delete": "Delete",
+      "error.occurred": "Er is een fout opgetreden, probeer het opnieuw",
+      "confirm.delete": "Dit bestand verwijderen?",
+      "are.you.sure": "Weet u zeker dat u het bestand wilt verwijderen",
+      "remove": "Verwijderen",
+      "cancel": "Annuleren",
+      "retry": "Opnieuw proberen",
+      "of": "of"
+    }
+  },
+  "select": {
+    "select.all": "Select All",
+    "deselect.all": "Deselect All",
+    "search": {
+      "filter": "Zoeken",
+      "notFound": "Geen resultaten"
+    }
+  },
+  "layout": {
+    "profile": "Profile",
+    "login": "Login",
+    "logout": "Logout",
+    "interface": {
+      "trusted": "Vertrouwde persoon-interface",
+      "collaborator": "Werknemer interface"
+    }
+  },
+  "thermo": {
+    "title": "Thermodynamics",
+    "introduction": "Introduction",
+    "history": "History",
+    "etymology": "Etymology",
+    "branches": "Branches",
+    "classicalThermodynamics": "Classical thermodynamics",
+    "statisticalThermodynamics": "Statistical thermodynamics",
+    "chemicalThermodynamics": "Chemical thermodynamics",
+    "equilibriumThermodynamics": "Equilibrium thermodynamics",
+    "nonEquilibriumThermodynamics": "Non-equilibrium thermodynamics"
+  },
+  "input": {
+    "phone": {
+      "required": "Field required",
+      "invalid": "Field invalid",
+      "notFound": "Not found",
+      "search": "Search",
+      "label": "Phone number",
+      "hint": "Start with 0 for belgian phone numbers"
+    }
+  },
+  "copied.to.clipboard": "Naar klembord gekopieerd",
+  "carousel": {
+    "next": "Volgende",
+    "previous": "Vorige",
+    "goto": "Ga naar"
+  }
+}

package/core/index.ts

@@ -0,0 +1,3 @@
+//export * from './src/lib/modules/index';
+export * from './src/lib/services/index';
+export * from './src/lib/core.module';

package/core/src/lib/core.module.ts

@@ -0,0 +1,26 @@
+import { ErrorHandler, NgModule } from '@angular/core';
+
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
+import {
+  MatSnackBarModule,
+  MAT_SNACK_BAR_DEFAULT_OPTIONS,
+} from '@angular/material/snack-bar';
+import { OnemrvaErrorHandler } from './services';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  imports: [CommonModule, MatExpansionModule, MatIconModule, MatSnackBarModule],
+  exports: [MatSnackBarModule],
+  providers: [
+    {
+      provide: ErrorHandler,
+      useClass: OnemrvaErrorHandler,
+    },
+    {
+      provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
+      useValue: { horizontalPosition: 'right' },
+    },
+  ],
+})
+export class OnemrvaCoreModule {}

package/core/src/lib/modules/index.ts

@@ -0,0 +1 @@
+//export * from "./translate.module";

package/core/src/lib/modules/translate.loader.ts

@@ -0,0 +1,34 @@
+// import {Injectable} from "@angular/core";
+// import {TranslateLoader} from "@ngx-translate/core";
+// import {HttpClient} from "@angular/common/http";
+// import {forkJoin, Observable, of} from "rxjs";
+// import {catchError, map} from "rxjs/operators";
+//
+// @Injectable()
+// export class OnemrvaTranslateHttpLoader implements TranslateLoader {
+//
+//     constructor(
+//         private http: HttpClient,
+//     ) {
+//
+//     }
+//
+//     /**
+//      * Gets the translations from the server
+//      */
+//     public getTranslation(lang: string): Observable<Object> {
+//
+//         const observables = [
+//             this.http.get(`${environment.translate.prefix}${lang}${environment.translate.suffix}`).pipe(catchError(() => of(null))),
+//             ...environment.translate.modules.map((m) =>
+//                 this.http.get(`${environment.translate.prefix}${m}/${lang}${environment.translate.suffix}`).pipe(catchError(() => of(null)))
+//             ),
+//         ];
+//
+//         return forkJoin(observables).pipe(
+//             map((all) => {
+//                 return (all.filter((v) => !!v) as Object[]).reduce((s, c) => ({ ...s, ...c }), {});
+//             })
+//         );
+//     }
+// }

package/core/src/lib/modules/translate.module.ts

@@ -0,0 +1,66 @@
+// import { HttpClient } from '@angular/common/http';
+// import {APP_INITIALIZER, NgModule} from '@angular/core';
+// import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+// import { environment } from "@env/environment";
+// import {OnemrvaTranslateHttpLoader} from "./translate.loader";
+//
+// @NgModule({
+//     imports: [
+//         TranslateModule.forRoot({
+//             defaultLanguage: environment.translate.language,
+//             loader: {
+//                 provide: TranslateLoader,
+//                 useFactory: (http: HttpClient) => {
+//                     return new OnemrvaTranslateHttpLoader(http);
+//                 },
+//                 deps: [HttpClient],
+//             },
+//         }),
+//     ],
+//     providers: [
+//         {
+//             provide: APP_INITIALIZER,
+//             deps: [TranslateService],
+//             useFactory: (translateService: TranslateService ) => {
+//                 return async () => {
+//                     const languages = environment.translate.languages.map(v => v.code);
+//                     translateService.addLangs(languages);
+//                     translateService.setDefaultLang(environment.translate.language);
+//
+//                     // getting language from localstorage
+//                     let language:string|null = localStorage.getItem('language');
+//                     // not set or incorrectly set ?
+//                     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 = environment.translate.language;
+//                             }
+//                         }
+//                     }
+//                     localStorage.setItem('language', language);
+//                     await translateService.use(language).toPromise();
+//
+//                     translateService.onLangChange.subscribe((value) => {
+//                         localStorage.setItem('language', value.lang);
+//                     });
+//                 };
+//             },
+//             multi: true,
+//         }
+//     ],
+//     exports: [
+//         TranslateModule
+//     ]
+// })
+// export class OnemrvaTranslateModule { }

package/core/src/lib/services/index.ts

@@ -0,0 +1,2 @@
+export * from './onemrva-error-handler.service';
+export * from './onemrva-missing-translation.service';

package/core/src/lib/services/onemrva-error-handler.service.ts

@@ -0,0 +1,24 @@
+import { ErrorHandler, Injectable } from '@angular/core';
+import {
+  MatSnackBar,
+  MatSnackBarHorizontalPosition,
+  MatSnackBarVerticalPosition,
+} from '@angular/material/snack-bar';
+
+@Injectable()
+export class OnemrvaErrorHandler implements ErrorHandler {
+  constructor(private _snackBar: MatSnackBar) {}
+  horizontalPosition: MatSnackBarHorizontalPosition = 'end';
+  verticalPosition: MatSnackBarVerticalPosition = 'bottom';
+
+  handleError(error: any) {
+    console.error(error);
+    //alert("Error: " + error.message);
+    this._snackBar.open(`Error: ${error.message}`, '', {
+      duration: 5000,
+      panelClass: 'mat-primary',
+      horizontalPosition: this.horizontalPosition,
+      verticalPosition: this.verticalPosition,
+    });
+  }
+}