@onemrvapublic/design-system 0.0.0

package/projects/test/src/app/demos/datepicker/readme.md

@@ -0,0 +1,36 @@
+# Installation
+
+```bash
+npm install --save @onemrvapublic/theme
+npm install --save @onemrvapublic/design-system
+```
+
+In style.scss:
+
+```scss
+@use '@onemrvapublic/theme' as theme;
+@use '@onemrvapublic/design-system' as onemrvaMat;
+
+@include theme.reset();
+
+.onemrva-theme {
+    @include theme.onemrva();
+    @include onemrvaMat.datepickerHeader(theme.$onemrva-theme);
+}
+```
+
+Import MatButtonModule and OnemrvaMatDatepickerHeader in your module (and MatIconModule if you want to use icons inside the buttons)
+
+# Changelog
+
+## @onemrvapublic/design-system 15.0.76
+
+Custom date picker header
+
+## @onemrvapublic/theme 15.0.38
+
+Upgrade to Angular 15
+
+## 14.1.441
+
+Compliant version with DS4

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

@@ -0,0 +1,30 @@
+<onemrva-mat-file-upload
+  [accept]="['video/mp4', 'application/pdf', 'application/msword']"
+  [maxFileSize]="1485760"
+  [filePanelTemplate]="tpl"
+  errorMessage="test"
+>
+</onemrva-mat-file-upload>
+<ng-template #tpl let-file="file" let-id="id" let-cmpRef="cmpRef">
+  <file-panel [file]="file" [actions]="actions"> </file-panel>
+</ng-template>
+
+<ng-container *ngIf="(files$ | async)!.length > 0">
+  <ng-container *ngFor="let file of files$ | async">
+    <file-panel
+      color="primary"
+      [file]="file"
+      [actions]="actions"
+      [showProgress]="false"
+    >
+    </file-panel>
+  </ng-container>
+</ng-container>
+
+{{ fileUploadStore.files$ | async | json }}
+
+<file-panel
+  color="primary"
+  [file]="convertToProgressFile(testFile)"
+>
+</file-panel>

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

@@ -0,0 +1,132 @@
+import { Component, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import {
+  ActionConfig,
+  ReferencedProgressFile,
+  convertToReferencedProgressFile,
+} from '../../../../../onemrva/design-system/mat-file-upload';
+
+import { CommonModule } from '@angular/common';
+import { OnemrvaMatFileUploadModule } from '../../../../../onemrva/design-system/mat-file-upload';
+import { OnemrvaMatFileUploadStore } from '../../../../../onemrva/design-system/mat-file-upload/src/onemrva-mat-file-upload.store';
+import { Observable, Subject } from 'rxjs';
+import { OnemrvaMatFileUploadService } from '../../../../../onemrva/design-system/mat-file-upload/src/onemrva-mat-file-upload.service';
+import { DemoFileUploadService } from './demo-file-upload.service';
+import { MatDialog } from '@angular/material/dialog';
+
+export interface Annex {
+  /**
+   * Document reference in document service
+   */
+  documentId?: string;
+  /**
+   * Name of the document
+   */
+  name?: string;
+}
+
+@Component({
+  selector: 'app-demo-file-upload',
+  standalone: true,
+  imports: [CommonModule, OnemrvaMatFileUploadModule],
+  templateUrl: 'demo-file-upload.component.html',
+  providers: [
+    OnemrvaMatFileUploadStore,
+    { provide: OnemrvaMatFileUploadService, useClass: DemoFileUploadService },
+  ],
+})
+export class DemoFileUploadComponent implements OnInit {
+  files$: Observable<ReferencedProgressFile[]> = this.fileUploadStore.files$;
+  actions: ActionConfig[] = [
+    {
+      iconName: 'download',
+      dataCy: 'onemrva-file-panel-download',
+      tooltipCode: 'file.upload.download',
+      ariaCode: 'file.upload.download',
+      clickHandler: this.downloadFile.bind(this),
+      showAction: (file: ReferencedProgressFile) => file.color === 'success',
+    },
+    {
+      iconName: 'delete',
+      dataCy: 'onemrva-file-panel-delete',
+      tooltipCode: 'file.upload.delete',
+      ariaCode: 'file.upload.delete',
+      clickHandler: this.deleteFileAction.bind(this),
+      showAction: this.isDeletable,
+    },
+    {
+      iconName: 'refresh',
+      dataCy: 'onemrva-file-panel-retry',
+      tooltipCode: 'file.upload.retry',
+      ariaCode: 'file.upload.retry',
+      clickHandler: this.retryUpload.bind(this),
+      showAction: (file: ReferencedProgressFile) => file.color === 'warn',
+    },
+    {
+      iconName: 'visibility',
+      dataCy: 'onemrva-file-panel-view',
+      tooltipCode: 'file.upload.view',
+      ariaCode: 'file.upload.view',
+      clickHandler: this.view.bind(this),
+      showAction: (file: ReferencedProgressFile) => file.color === 'success',
+    },
+    {
+      iconName: 'close',
+      dataCy: 'onemrva-file-panel-remove',
+      tooltipCode: 'file.upload.remove',
+      ariaCode: 'file.upload.remove',
+      clickHandler: this.removeFile.bind(this),
+      showAction: (file: ReferencedProgressFile) => file.color === 'warn',
+    },
+  ];
+
+  destroyNotifier$: Subject<void> = new Subject<void>();
+  testFile: Annex = {
+    documentId: '1',
+    name: 'Hello',
+  };
+
+  constructor(
+    private translateService: TranslateService,
+    public fileUploadStore: OnemrvaMatFileUploadStore,
+    private fileUploadService: OnemrvaMatFileUploadService,
+    public dialog: MatDialog
+  ) {}
+
+  ngOnInit(): void {
+    this.fileUploadStore.listUploadedFiles(null);
+  }
+
+  downloadFile(file: ReferencedProgressFile) {
+    this.fileUploadService.downloadFile(file.id);
+  }
+
+  retryUpload(file: ReferencedProgressFile) {
+    this.fileUploadStore.retryFile({ ...file });
+  }
+
+  removeFile(file: ReferencedProgressFile) {
+    this.fileUploadStore.removeFile(file);
+  }
+
+  deleteFileAction(file: ReferencedProgressFile) {
+    if (this.isDeletable(file)) {
+      this.fileUploadStore.deleteFile(file);
+    }
+  }
+
+  view(file: ReferencedProgressFile) {
+    if (!file.url) throw 'No url';
+    window.open('http://www.google.com', '_blank', 'noopener noreferrer');
+  }
+
+  isDeletable(file: ReferencedProgressFile): boolean {
+    return (
+      file.color !== 'primary' && file.color !== '' && file.color !== 'warn'
+    );
+  }
+
+  convertToProgressFile(annex: Annex) {
+    return convertToReferencedProgressFile(annex.documentId!, annex.name!);
+  }
+}

package/projects/test/src/app/demos/file-upload/demo-file-upload.service.ts

@@ -0,0 +1,60 @@
+import {
+  HttpEvent,
+  HttpEventType,
+  HttpProgressEvent,
+  HttpResponse,
+} from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import {ProgressFile, ReferencedProgressFile} from '../../../../../onemrva/design-system/mat-file-upload';
+import { catchError, interval, map, Observable, of, take } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DemoFileUploadService {
+  constructor() {
+    console.log('DemoFileUploadService');
+  }
+
+  listUploadedFiles(inputs: any): Observable<ProgressFile[]> {
+    return of([]);
+  }
+
+  upload(
+    file: ProgressFile | ReferencedProgressFile
+  ): Observable<HttpEvent<any>> {
+    return interval(27).pipe(
+      take(101),
+      map((i) => {
+        if (i < 100) {
+          return {
+            type: HttpEventType.UploadProgress,
+            loaded: i,
+            total: 100,
+          } as HttpProgressEvent;
+        } else {
+          if (i >= 100 && Math.random() > 0.5) {
+            throw 'Fake error thrown';
+          }
+          return new HttpResponse<any>({
+            body: { id: 'E', dummyProp: 'dummy value' },
+          });
+        }
+      }),
+      catchError(() => of(new HttpResponse<any>({ body: {}, status: 500 })))
+    );
+  }
+
+  deleteFile(file: any): Observable<any> {
+    return of('F = m.a');
+  }
+
+  retry(file: ReferencedProgressFile): Observable<HttpEvent<any>> {
+    return this.upload(file);
+  }
+
+  downloadFile(id: any): Observable<any> {
+    alert(`Missing download implementation for file ID ${id}`);
+    return of(true);
+  }
+}

package/projects/test/src/app/demos/file-upload/readme.md

@@ -0,0 +1,26 @@
+# Installation
+
+```bash
+npm install --save @onemrvapublic/theme
+npm install --save @onemrvapublic/design-system
+```
+
+In style.scss:
+
+```scss
+@use '@onemrvapublic/theme' as theme;
+@use '@onemrvapublic/design-system' as onemrvaMat;
+
+@include theme.reset();
+
+.onemrva-theme {
+    @include theme.onemrva();
+    @include onemrvaMat.fileUpload(theme.$onemrva-theme);
+}
+```
+
+# Changelog
+
+## 14.1.XXX
+
+Thibaut, tu as oublié de mettre à jour le changeLog

package/projects/test/src/app/demos/input-bank-account/demo-input-bank-account.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import {
+  OnemrvaAccountNumberForm,
+  OnemrvaMatInputBankAccountComponent,
+} from '../../../../../onemrva/design-system/mat-input-bank-account/src/onemrva-mat-input-bank-account.component';
+
+@Component({
+  selector: 'demo-iban-input',
+  template: `<onemrva-mat-input-bank-account
+    [accountNumber]="accountNumber"
+  ></onemrva-mat-input-bank-account>`,
+})
+export class DemoInputBankAccountComponent {
+  accountNumber: FormGroup<OnemrvaAccountNumberForm> = new FormGroup({
+    countryCode: new FormControl(''),
+    bankNumber: new FormControl(''),
+  });
+}

package/projects/test/src/app/demos/input-bank-account/demo-input-bank-account.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { DemoInputBankAccountComponent } from './demo-input-bank-account.component';
+import { OnemrvaMatInputBankAccountComponent } from '../../../../../onemrva/design-system/mat-input-bank-account/src/onemrva-mat-input-bank-account.component';
+import { Route, RouterModule } from '@angular/router';
+import { provideEnvironmentNgxMask } from 'ngx-mask';
+
+const routes: Route[] = [
+  {
+    path: '',
+    pathMatch: 'full',
+    component: DemoInputBankAccountComponent,
+  },
+];
+
+@NgModule({
+  declarations: [DemoInputBankAccountComponent],
+  imports: [OnemrvaMatInputBankAccountComponent, RouterModule.forChild(routes)],
+  providers: [provideEnvironmentNgxMask()],
+})
+export class DemoInputBankAccountModule {}

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

@@ -0,0 +1,9 @@
+<onemrva-mat-input-country
+    [country]="countryForm"
+    label="{{ 'input.country.label' | translate }}"
+    noEntriesFoundLabel="{{ 'input.country.not.found' | translate }}"
+    placeholderLabel="{{ 'input.country.search' | translate }}"
+    searchAriaLabel="{{ 'input.country.search' | translate }}"
+    hint=" {{ 'input.country.hint' | translate  }}"
+></onemrva-mat-input-country>
+

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

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
+
+@Component({
+  selector: 'demo-iban-input',
+  templateUrl: './demo-input-country.component.html',
+})
+export class DemoInputCountryComponent {
+  countryForm =  new FormControl('BE', [Validators.required]);
+
+  getCountry($event: any) {
+      console.log($event);
+  }
+}

package/projects/test/src/app/demos/input-country/demo-input-country.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { Route, RouterModule } from '@angular/router';
+import { provideEnvironmentNgxMask } from 'ngx-mask';
+import {TranslateModule} from "@ngx-translate/core";
+import {DemoInputCountryComponent} from "./demo-input-country.component";
+import {
+  OnemrvaMatInputCountryComponent
+} from "../../../../../onemrva/design-system/mat-input-country/src/onemrva-mat-input-country.component";
+
+const routes: Route[] = [
+  {
+    path: '',
+    pathMatch: 'full',
+    component: DemoInputCountryComponent,
+  },
+];
+
+@NgModule({
+  declarations: [DemoInputCountryComponent],
+  imports: [
+    OnemrvaMatInputCountryComponent,
+    RouterModule.forChild(routes),
+    TranslateModule],
+  providers: [provideEnvironmentNgxMask()],
+})
+export class DemoInputCountryModule {}

package/projects/test/src/app/demos/input-enterprise-number/demo-input-enterprise-number.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'demo-iban-input',
+  template: `<onemrva-mat-input-enterprise-number
+    [enterpriseNumber]="enterpriseNumber"
+  ></onemrva-mat-input-enterprise-number>`,
+})
+export class DemoInputEnterpriseNumberComponent {
+
+  enterpriseNumber = new FormControl('');
+}

package/projects/test/src/app/demos/input-enterprise-number/demo-input-enterprise-number.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { Route, RouterModule } from '@angular/router';
+import { provideEnvironmentNgxMask } from 'ngx-mask';
+import {DemoInputEnterpriseNumberComponent} from "./demo-input-enterprise-number.component";
+import {OnemrvaMatInputEnterpriseNumberComponent} from "../../../../../onemrva/design-system/mat-input-enterprise-number";
+
+const routes: Route[] = [
+  {
+    path: '',
+    pathMatch: 'full',
+    component: DemoInputEnterpriseNumberComponent,
+  },
+];
+
+@NgModule({
+  declarations: [DemoInputEnterpriseNumberComponent],
+  imports: [OnemrvaMatInputEnterpriseNumberComponent, RouterModule.forChild(routes)],
+  providers: [provideEnvironmentNgxMask()],
+})
+export class DemoInputEnterpriseNumberModule {}

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

@@ -0,0 +1,16 @@
+<onemrva-mat-input-phone
+    [phoneNumber]="phoneForm"
+    label="{{ 'input.phone.label' | translate }}"
+    noEntriesFoundLabel="{{ 'input.phone.not.found' | translate }}"
+    placeholderLabel="{{ 'input.phone.search' | translate }}"
+    searchAriaLabel="{{ 'input.phone.search' | translate }}"
+    [defaultPrefix]="'+32'"
+    hint=" {{ 'input.phone.hint' | translate  }}"
+    (getCountry)="getCountry($event)"
+></onemrva-mat-input-phone>
+<br/>
+<br/>
+<onemrva-mat-input-phone
+    label="{{ 'input.phone.label' | translate  }}"
+    [phoneNumber]="phoneForm2"
+></onemrva-mat-input-phone>

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

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
+
+@Component({
+  selector: 'demo-iban-input',
+  templateUrl: './demo-input-phone.component.html',
+})
+export class DemoInputPhoneComponent {
+  phoneForm =  new FormControl('', [Validators.required]);
+
+  phoneForm2=  new FormControl('+1-800-560-0000');
+
+  getCountry($event: any) {
+      console.log($event);
+  }
+}

package/projects/test/src/app/demos/input-phone/demo-input-phone.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { Route, RouterModule } from '@angular/router';
+import { provideEnvironmentNgxMask } from 'ngx-mask';
+import {OnemrvaMatInputPhoneComponent} from "../../../../../onemrva/design-system/mat-input-phone";
+import {DemoInputPhoneComponent} from "./demo-input-phone.component";
+import {TranslateModule} from "@ngx-translate/core";
+
+const routes: Route[] = [
+  {
+    path: '',
+    pathMatch: 'full',
+    component: DemoInputPhoneComponent,
+  },
+];
+
+@NgModule({
+  declarations: [DemoInputPhoneComponent],
+  imports: [OnemrvaMatInputPhoneComponent, RouterModule.forChild(routes), TranslateModule],
+  providers: [provideEnvironmentNgxMask()],
+})
+export class DemoInputPhoneModule {}

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

@@ -0,0 +1,32 @@
+<onemrva-mat-message-box
+  messageCode="infoMessageBox"
+  color="info"
+></onemrva-mat-message-box>
+<br />
+<br />
+<onemrva-mat-message-box
+  messageCode="warningMessageBox"
+  color="warn"
+></onemrva-mat-message-box>
+<br />
+<br />
+<onemrva-mat-message-box
+  messageCode="successMessageBox"
+  color="success"
+></onemrva-mat-message-box>
+<br />
+<br />
+<onemrva-mat-message-box
+  messageCode="errorMessageBox"
+  color="error"
+></onemrva-mat-message-box>
+<br />
+<br />
+<onemrva-mat-message-box
+  messageCode="defaultMessageBox"
+></onemrva-mat-message-box>
+<br />
+<br />
+<onemrva-mat-message-box
+  messageCode="<b>Lorem ipsum dolor</b> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
+></onemrva-mat-message-box>

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+import { CommonModule } from '@angular/common';
+import { OnemrvaMatMessageBoxModule } from '../../../../../onemrva/design-system/mat-message-box';
+
+@Component({
+  selector: 'app-demo-message-box',
+  standalone: true,
+  imports: [CommonModule, OnemrvaMatMessageBoxModule],
+  templateUrl: 'demo-message-box.component.html',
+})
+export class DemoMessageBoxComponent {}

package/projects/test/src/app/demos/message-box/readme.md

@@ -0,0 +1,26 @@
+# Installation
+
+```bash
+npm install --save @onemrvapublic/theme
+npm install --save @onemrvapublic/design-system
+```
+
+In style.scss:
+
+```scss
+@use '@onemrvapublic/theme' as theme;
+@use '@onemrvapublic/design-system' as onemrvaMat;
+
+@include theme.reset();
+
+.onemrva-theme {
+    @include theme.onemrva();
+    @include onemrvaMat.messageBox(theme.$onemrva-theme);
+}
+```
+
+# Changelog
+
+## 14.1.626
+
+Initial version

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

@@ -0,0 +1,53 @@
+
+<!--<mat-form-field>-->
+<!--  <mat-label>Select (single)</mat-label>-->
+<!--  <mat-select>-->
+<!--    <mat-option *ngFor="let value of toppingList$ | async" [value]="value">{{ value }}</mat-option>-->
+<!--  </mat-select>-->
+<!--</mat-form-field>-->
+<!--<br/><br/>-->
+<!--<mat-form-field>-->
+<!--  <mat-label>Select (multiple)</mat-label>-->
+<!--  <onemrva-mat-multi-select [formControl]="multiselect" [selectionToggle]="true">-->
+<!--    <mat-option *ngFor="let value of toppingList" [value]="value">{{ value }}</mat-option>-->
+<!--  </onemrva-mat-multi-select>-->
+<!--  <mat-hint>Hint</mat-hint>-->
+<!--</mat-form-field>-->
+<!--<br/><br/>-->
+<!--<mat-form-field>-->
+<!--  <mat-label>Select (single with filter)</mat-label>-->
+<!--  <mat-select>-->
+<!--    <mat-option>-->
+<!--      <mat-select-search-->
+<!--        [formControl]="filterCtrl"-->
+<!--        ariaLabel="{{ 'filter select' | translate }}"-->
+<!--        noEntriesFoundLabel="{{ 'Not found' | translate }}"-->
+<!--        placeholderLabel="{{ 'Search' | translate }}"-->
+<!--      ></mat-select-search>-->
+<!--    </mat-option>-->
+<!--    <mat-option *ngFor="let value of toppingList$ | async" [value]="value">{{ value }}</mat-option>-->
+<!--  </mat-select>-->
+<!--</mat-form-field>-->
+<!--<br/><br/>-->
+<!--<mat-form-field>-->
+<!--  <mat-label>Select (single with filter)</mat-label>-->
+<!--  <mat-select multiple="true">-->
+<!--    <mat-option>-->
+<!--      <mat-select-search-->
+<!--        [formControl]="filterCtrl"-->
+<!--        ariaLabel="{{ 'filter select' | translate }}"-->
+<!--        noEntriesFoundLabel="{{ 'Not found' | translate }}"-->
+<!--        placeholderLabel="{{ 'Search' | translate }}"-->
+<!--      ></mat-select-search>-->
+<!--    </mat-option>-->
+<!--    <mat-option *ngFor="let value of toppingList$ | async" [value]="value">{{ value }}</mat-option>-->
+<!--  </mat-select>-->
+<!--</mat-form-field>-->
+<br/><br/>
+<mat-form-field>
+  <mat-label>Select (multiple with filter)</mat-label>
+  <onemrva-mat-multi-select [formControl]="multiselect" [selectionToggle]="true">
+    <mat-option *ngFor="let value of toppingList$ | async" [value]="value">{{ value }}</mat-option>
+  </onemrva-mat-multi-select>
+  <mat-hint>Hint</mat-hint>
+</mat-form-field>

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

@@ -0,0 +1,23 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+mat-form-field {
+  width: 300px;
+}
+
+.mat-mdc-select-trigger {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+}
+.mat-mdc-select-arrow-wrapper {
+  height: 24px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+}