@onemrvapublic/design-system 16.2.8 → 16.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onemrvapublic/design-system",
-  "version": "16.2.8",
+  "version": "16.2.10",
   "publishConfig": {
     "access": "public"
   },

package/projects/onemrva/design-system/_index.scss

@@ -7,6 +7,7 @@
 @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

package/projects/onemrva/design-system/core/index.ts

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

package/projects/onemrva/design-system/core/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

package/projects/onemrva/design-system/core/src/lib/core.module.ts

@@ -0,0 +1,91 @@
+import { APP_INITIALIZER, 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';
+import {
+  DateAdapter,
+  MAT_DATE_FORMATS,
+  MAT_DATE_LOCALE,
+  MatNativeDateModule, //
+} from '@angular/material/core';
+import {
+  MAT_MOMENT_DATE_ADAPTER_OPTIONS,
+  MatMomentDateModule, //
+  MomentDateAdapter,
+} from '@angular/material-moment-adapter';
+
+import { TranslateService } from '@ngx-translate/core';
+import { Observable, of } from 'rxjs';
+
+function translateDatepicker(
+  translateService: TranslateService,
+  adapter: DateAdapter<Date>
+): () => Observable<any> {
+  return () => {
+    // For some cosmic reason, return translateService.onLangChange().asObservable()) + pipe(tap()) does not work
+    translateService.onLangChange.subscribe((event) => {
+      adapter.setLocale(event.lang);
+    });
+
+    // But this works fine...
+    return of('sin (a +- b) = sin a . cos b +- cos a . sin b');
+  };
+}
+
+export const MY_FORMATS = {
+  parse: {
+    dateInput: 'LL',
+  },
+  display: {
+    dateInput: 'DD/MM/YYYY',
+    monthYearLabel: 'MMM YYYY',
+    dateA11yLabel: 'LL',
+    monthYearA11yLabel: 'MMMM YYYY',
+  },
+};
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatExpansionModule,
+    MatIconModule,
+    MatSnackBarModule,
+    MatNativeDateModule,
+    MatMomentDateModule,
+  ],
+  exports: [MatSnackBarModule],
+  providers: [
+    {
+      provide: ErrorHandler,
+      useClass: OnemrvaErrorHandler,
+    },
+    {
+      provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
+      useValue: { horizontalPosition: 'right' },
+    },
+    {
+      provide: MAT_DATE_LOCALE,
+      useValue: 'fr',
+    },
+
+    {
+      provide: DateAdapter,
+      useClass: MomentDateAdapter,
+      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
+    },
+    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: translateDatepicker,
+      deps: [TranslateService, DateAdapter<any>],
+      multi: true,
+    },
+  ],
+})
+export class OnemrvaCoreModule {}

package/projects/onemrva/design-system/core/src/lib/modules/index.ts

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

package/projects/onemrva/design-system/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/projects/onemrva/design-system/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/projects/onemrva/design-system/core/src/lib/services/index.ts

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

package/projects/onemrva/design-system/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,
+    });
+  }
+}

package/projects/onemrva/design-system/core/src/lib/services/onemrva-missing-translation.service.ts

@@ -0,0 +1,12 @@
+import {
+  MissingTranslationHandler,
+  MissingTranslationHandlerParams,
+} from '@ngx-translate/core';
+
+export class OnemrvaMissingTranslationHandler
+  implements MissingTranslationHandler
+{
+  handle(params: MissingTranslationHandlerParams) {
+    return `???${params.key}???`;
+  }
+}

package/projects/onemrva/design-system/core/src/test.ts

@@ -0,0 +1,24 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+    context(
+        path: string,
+        deep?: boolean,
+        filter?: RegExp
+    ): {
+        keys(): string[];
+        <T>(id: string): T;
+    };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

package/projects/onemrva/design-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onemrvapublic/design-system",
-  "version": "0.0.1",
+  "version": "16.2.9",
   "peerDependencies": {
     "@angular/common": "^16.0.0",
     "@angular/core": "^16.0.0",

package/projects/onemrva/design-system/shared/index.ts

@@ -0,0 +1,10 @@
+/*
+ * Public API Surface of shared
+ */
+
+export * from './src/lib/directives';
+export * from './src/lib/shared.module';
+export * from './src/lib/pipes';
+export * from './src/lib/validators/onemrva-validators';
+
+export const NISS_MASK = '000000/000-00';

package/projects/onemrva/design-system/shared/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

package/projects/onemrva/design-system/shared/src/lib/components/clipboard-icon/clipboard-icon.component.html

@@ -0,0 +1 @@
+<mat-icon [matTooltip]="'TEST'">content_copy</mat-icon>

package/projects/onemrva/design-system/shared/src/lib/components/clipboard-icon/clipboard-icon.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClipboardIconComponent } from './clipboard-icon.component';
+
+describe('ClipboardIconComponent', () => {
+  let component: ClipboardIconComponent;
+  let fixture: ComponentFixture<ClipboardIconComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ClipboardIconComponent]
+    });
+    fixture = TestBed.createComponent(ClipboardIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/onemrva/design-system/shared/src/lib/components/clipboard-icon/clipboard-icon.component.ts

@@ -0,0 +1,22 @@
+import {Component, ElementRef, ViewChild} from '@angular/core';
+import {MatIconModule} from "@angular/material/icon";
+import {MatTooltipModule} from "@angular/material/tooltip";
+import {Clipboard} from "@angular/cdk/clipboard";
+
+@Component({
+  selector: 'lib-clipboard-icon',
+  templateUrl: './clipboard-icon.component.html',
+  styleUrls: ['./clipboard-icon.component.css'],
+  standalone: true,
+  imports: [
+    MatIconModule,
+    MatTooltipModule
+  ]
+})
+export class ClipboardIconComponent {
+  constructor(
+    public _elementRef : ElementRef,
+    private clipboardService : Clipboard) {
+  }
+
+}

package/projects/onemrva/design-system/shared/src/lib/directives/clipboard.directive.ts

@@ -0,0 +1,55 @@
+import {
+  ChangeDetectorRef,
+  ComponentFactoryResolver, ComponentRef,
+  Directive,
+  ElementRef,
+  HostBinding,
+  Input,
+  OnInit,
+  Renderer2,
+  ViewContainerRef
+} from '@angular/core';
+import {Clipboard} from "@angular/cdk/clipboard";
+import {ClipboardIconComponent} from "../components/clipboard-icon/clipboard-icon.component";
+
+/**
+ * Conditionally adds component to the tree if screen width matches at least one size in input
+ */
+@Directive({
+  selector: 'span[clipboard]',
+  host: {
+   // '[style.padding]': '"pointer"',
+  },
+
+})
+export class OnemRvaClipboardDirective implements OnInit{
+
+  private icon: ComponentRef<ClipboardIconComponent>;
+  private iconEl: any;
+
+  constructor(
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
+    private factory: ComponentFactoryResolver,
+    private vcRef: ViewContainerRef,
+    private clipboardService : Clipboard) {
+
+    const miFactory = this.factory.resolveComponentFactory(ClipboardIconComponent);
+    this.icon = this.vcRef.createComponent(miFactory);
+    this.iconEl = this.icon.injector.get(ClipboardIconComponent)._elementRef.nativeElement;
+
+  }
+
+  @HostBinding('class')
+  class = "";
+
+  @Input()
+  clipboard: string = '';
+
+  ngOnInit(): void {
+    this.vcRef.clear();
+
+
+    this.renderer.appendChild(this.elementRef.nativeElement, this.iconEl);
+  }
+}

package/projects/onemrva/design-system/shared/src/lib/directives/color.directive.ts

@@ -0,0 +1,47 @@
+import {Directive, HostBinding, Input} from '@angular/core';
+import {OnemrvaMatColor} from "@onemrvapublic/design-system/utils";
+
+/**
+ * Conditionally adds component to the tree if screen width matches at least one size in input
+ */
+@Directive({
+    selector: 'mat-card[color],mat-chip[color]',
+})
+export class OnemRvaColorDirective {
+
+  constructor() {}
+
+  @Input()
+  color: OnemrvaMatColor = '';
+
+  /** @hidden @internal */
+  @HostBinding('class.mat-primary')
+  public get _isPrimary(): boolean {
+    return this.color === OnemrvaMatColor.PRIMARY;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.mat-accent')
+  public get _isAccent(): boolean {
+    return this.color === OnemrvaMatColor.ACCENT;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.mat-error')
+  public get _isError(): boolean {
+    return this.color === OnemrvaMatColor.ERROR;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.mat-warn')
+  public get _isWarn(): boolean {
+    return this.color === OnemrvaMatColor.WARN;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.mat-success')
+  public get _isSuccess(): boolean {
+    return this.color === OnemrvaMatColor.SUCCESS;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.mat-info')
+  public get _isInfo(): boolean {
+    return this.color === OnemrvaMatColor.INFO;
+  }
+}

package/projects/onemrva/design-system/shared/src/lib/directives/digit-only.directive.ts

@@ -0,0 +1,46 @@
+import { Directive, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[digitOnly]',
+})
+export class DigitOnlyDirective {
+  constructor() {}
+
+  @HostListener('keydown', ['$event']) onKeyDown(event: any) {
+    let e = <KeyboardEvent>event;
+
+    const allowedKey = [
+      '0',
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '.',
+      ',',
+      ' ',
+      'Backspace',
+      'Delete',
+      'Tab',
+      '-',
+      'Enter',
+      'ArrowLeft',
+      'ArrowRight',
+      'ArrowUp',
+      'ArrowDown',
+      'Home',
+      'End',
+    ];
+    if (allowedKey.indexOf(e.key) >= 0) return;
+
+    // HWKTODO manage ctrl Z and ctrl U
+    const allowedCtrlShortcuts = ['a', 'c', 'x', 'v'];
+    if (e.ctrlKey && allowedCtrlShortcuts.indexOf(e.key) >= 0) return;
+
+    e.preventDefault();
+  }
+}

package/projects/onemrva/design-system/shared/src/lib/directives/if-width-is.directive.ts

@@ -0,0 +1,27 @@
+import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
+import { Directive, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+
+/**
+ * Conditionally adds component to the tree if screen width matches at least one size in input
+ */
+@Directive({
+    selector: '[ifWidthIs]',
+})
+export class IfWidthIsDirective implements OnInit {
+    @Input() ifWidthIs!: typeof Breakpoints[keyof typeof Breakpoints][];
+
+    constructor(
+        public breakpointObserver: BreakpointObserver,
+        private _templateRef: TemplateRef<any>,
+        private _viewContainer: ViewContainerRef
+    ) {}
+
+    ngOnInit() {
+        this.breakpointObserver.observe([...this.ifWidthIs]).subscribe((state: BreakpointState) => {
+            this._viewContainer.clear();
+            if (state.matches) {
+                this._viewContainer.createEmbeddedView(this._templateRef);
+            }
+        });
+    }
+}

package/projects/onemrva/design-system/shared/src/lib/directives/index.ts

@@ -0,0 +1,22 @@
+import { DigitOnlyDirective } from './digit-only.directive';
+import { MatRowClickableDirective } from './mat-row-clickable.directive';
+import { IfWidthIsDirective } from './if-width-is.directive';
+import { OnemRvaColorDirective } from './color.directive';
+import { OnemrvaMaskDirective } from './mask.directive';
+import {OnemRvaClipboardDirective} from "./clipboard.directive";
+
+export const directives: any[] = [
+  DigitOnlyDirective,
+  MatRowClickableDirective,
+  OnemRvaClipboardDirective,
+  IfWidthIsDirective,
+  OnemRvaColorDirective,
+  OnemrvaMaskDirective,
+];
+
+export * from './digit-only.directive';
+export * from './mat-row-clickable.directive';
+export * from './if-width-is.directive';
+export * from './color.directive';
+export * from './mask.directive';
+export * from './clipboard.directive';

package/projects/onemrva/design-system/shared/src/lib/directives/mask.directive.ts

@@ -0,0 +1,221 @@
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+
+const UNDO_STACK_MAX_LENGTH = 50;
+
+/**
+ * 0: digits
+ * A: letters (uppercase or lowercase) and digits
+ * S: only letters (uppercase or lowercase)
+ * U: only letters uppercase
+ * L: only letters lowercase
+ */
+
+@Directive({
+  selector: '[onemrvamask]',
+})
+export class OnemrvaMaskDirective {
+  @Input() onemrvamask!: string;
+
+  private inputStack: string[] = ['']; // Stack for undo/redo
+  private stackIdx: number = 0; // Current index in undo/redo stack
+
+  markForDelete = false;
+
+  @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) {
+    // Allow functional keystrokes
+    let e = <KeyboardEvent>event;
+
+    let specialKeys = [
+      'Tab',
+      'Enter',
+      'ArrowLeft',
+      'ArrowRight',
+      'ArrowUp',
+      'ArrowDown',
+      'Home',
+      'End',
+    ];
+    if (specialKeys.indexOf(e.key) >= 0) return;
+
+    specialKeys = ['Backspace', 'Delete'];
+    if (specialKeys.indexOf(e.key) >= 0) {
+      this.markForDelete = true;
+      return;
+    }
+
+    // Undo
+    if (e.ctrlKey && 'z' === e.key && this.stackIdx > 0) {
+      this.stackIdx--;
+      this.el.nativeElement.value = this.inputStack[this.stackIdx];
+      event.preventDefault();
+    }
+
+    // Redo
+    if (
+      e.ctrlKey &&
+      'u' === e.key &&
+      this.stackIdx < this.inputStack.length - 1
+    ) {
+      this.stackIdx++;
+      this.el.nativeElement.value = this.inputStack[this.stackIdx];
+      event.preventDefault();
+    }
+
+    const allowedCtrlShortcuts = ['a', 'c', 'x', 'v'];
+    if (e.ctrlKey && allowedCtrlShortcuts.indexOf(e.key) >= 0) return;
+  }
+
+  @HostListener('input', ['$event']) onInput(event: any) {
+    let selectionStart = event.target?.selectionStart;
+
+    /*
+     * Step 1
+     * This block lets a delete execution if the new value is compliant.
+     * There are 2 deletion cases, after which the new value is not compliant
+     *  - dd/MX/yyyy: X is deleted, then the date becomes dd/M/yyyy
+     *                This case is resolved by step 2 and the date will become: dd/My/yyy
+     *  - dd/MMXyyyy: the last '/' is deleted, then the date becomes dd/MMyyyy
+     *                In this particular case, step 2 will automatically add the missing slash, so the date will remain dd/MM/yyyy
+     *                The issue is that the caret position will remain stuck where it was, so if the user keeps hitting the delete key, nothing will change at all. This is resolved in step 4 by moving the caret to the left
+     */
+    if (this.markForDelete) {
+      const isCompliantAfterDeletion =
+        [...this.el.nativeElement.value].findIndex((char, idx) => {
+          let rule = this.onemrvamask[idx];
+
+          if (rule === null || rule === undefined) return true;
+
+          if (isNaN(char) && char.toLowerCase() === char.toUpperCase())
+            return char !== rule;
+
+          return !isAllowed(rule, char);
+        }) < 0;
+
+      if (isCompliantAfterDeletion) {
+        this.markForDelete = false;
+        return;
+      }
+    }
+
+    // Step 2
+    const compliantValue = [...this.el.nativeElement.value]
+      .filter((char) => isAllowed('A', char)) // Necessary when several special char in a row
+      .reduce((newValue, char) => {
+        let idx = newValue.length;
+        let rule = this.onemrvamask[idx];
+
+        if (rule === null || rule === undefined) return newValue;
+
+        newValue = !isAllowed(rule, char) ? newValue : newValue + char;
+
+        // Add all trailing special characters
+        let nextRule = this.onemrvamask[++idx];
+        let i = 0;
+
+        while (
+          nextRule !== null &&
+          nextRule !== undefined &&
+          ['0', 'A', 'S', 'U', 'L'].indexOf(nextRule) < 0
+        ) {
+          i++;
+          newValue += nextRule;
+          nextRule = this.onemrvamask[++idx];
+
+          if (i > 50) break;
+        }
+
+        return newValue;
+      }, '');
+
+    this.el.nativeElement.value = compliantValue;
+
+    // Step 3 - Find the new cursor position. If the last new character is just before special character, move the caret after
+    let idx = selectionStart;
+    let nextRule = this.onemrvamask[idx];
+    while (
+      nextRule !== null &&
+      nextRule !== undefined &&
+      ['0', 'A', 'S', 'U', 'L'].indexOf(nextRule) < 0
+    ) {
+      idx++;
+      nextRule = this.onemrvamask[idx];
+      if (
+        nextRule !== null &&
+        nextRule &&
+        ['0', 'A', 'S', 'U', 'L'].indexOf(nextRule) < 0
+      ) {
+      } else break;
+    }
+
+    // Step 4 - Update inputStack only when all characters are processed
+    if (compliantValue !== this.inputStack[this.stackIdx]) {
+      this.stackIdx++;
+
+      let stack =
+        this.stackIdx > UNDO_STACK_MAX_LENGTH - 1
+          ? this.inputStack.slice(1)
+          : this.inputStack.splice(0, this.stackIdx);
+      this.stackIdx =
+        this.stackIdx > UNDO_STACK_MAX_LENGTH - 1
+          ? UNDO_STACK_MAX_LENGTH - 1
+          : this.stackIdx;
+
+      this.inputStack = [...stack, compliantValue];
+
+      this.el.nativeElement.setSelectionRange(idx, idx);
+    } else {
+      if (this.markForDelete) {
+        let i = idx - 1;
+        /* Finds the last rule character before the special character.
+         *    e.g: (nnn)/nnnn
+         *         If the user tries to delete '/', the caret will move just before ')'
+         */
+        while (i > 0) {
+          const previousRule = this.onemrvamask[i - 1];
+          if (['0', 'A', 'S', 'U', 'L'].indexOf(previousRule) < 0) {
+            i--;
+          } else break;
+        }
+        this.el.nativeElement.setSelectionRange(i, i);
+      }
+    }
+    this.markForDelete = false;
+  }
+  constructor(private el: ElementRef) {}
+}
+
+function isAllowed(rule: string, character: string) {
+  switch (rule) {
+    // Any digit
+    case '0':
+      if (character === ' ') return false;
+      return !isNaN(+character);
+
+    // A: letters (uppercase or lowercase) and digits
+    case 'A':
+      if (character === ' ') return false;
+      return (
+        !isNaN(+character) || character.toLowerCase() != character.toUpperCase()
+      );
+
+    // only letters (uppercase or lowercase)
+    case 'S':
+      return character.toLowerCase() != character.toUpperCase();
+
+    //  only uppercase letters
+    case 'U':
+      return (
+        character.toLowerCase() != character.toUpperCase() &&
+        character === character.toUpperCase()
+      );
+
+    //  only lowercase letters
+    case 'L':
+      return (
+        character.toLowerCase() != character.toUpperCase() &&
+        character === character.toLowerCase()
+      );
+  }
+
+  return false;
+}

package/projects/onemrva/design-system/shared/src/lib/directives/mat-row-clickable.directive.ts

@@ -0,0 +1,58 @@
+import {Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output} from '@angular/core';
+import {OnemrvaMatColor} from "@onemrvapublic/design-system/utils";
+
+@Directive({
+    selector: '[mat-row-clickable]'
+})
+export class MatRowClickableDirective {
+
+    @Output('mat-row-clickable')
+    matRowClickable: EventEmitter<any> = new EventEmitter<any>();
+
+    @Input()
+    color: OnemrvaMatColor = '';
+
+    constructor(private el:ElementRef) {}
+
+    @HostListener('click', ['$event'])
+    click(event: any) {
+        this.matRowClickable.emit();
+    }
+
+    @HostBinding('class.onemrva-clickable-row')
+    public cssClass = true;
+
+    ngOnInit() {
+    }
+
+    /** @hidden @internal */
+    @HostBinding('class.mat-primary')
+    public get _isPrimary(): boolean {
+      return this.color === OnemrvaMatColor.PRIMARY;
+    }
+    /** @hidden @internal */
+    @HostBinding('class.mat-accent')
+    public get _isAccent(): boolean {
+      return this.color === OnemrvaMatColor.ACCENT;
+    }
+    /** @hidden @internal */
+    @HostBinding('class.mat-error')
+    public get _isError(): boolean {
+      return this.color === OnemrvaMatColor.ERROR;
+    }
+    /** @hidden @internal */
+    @HostBinding('class.mat-warn')
+    public get _isWarn(): boolean {
+      return this.color === OnemrvaMatColor.WARN;
+    }
+    /** @hidden @internal */
+    @HostBinding('class.mat-success')
+    public get _isSuccess(): boolean {
+      return this.color === OnemrvaMatColor.SUCCESS;
+    }
+    /** @hidden @internal */
+    @HostBinding('class.mat-info')
+    public get _isInfo(): boolean {
+      return this.color === OnemrvaMatColor.INFO;
+    }
+}

package/projects/onemrva/design-system/shared/src/lib/pipes/index.ts

@@ -0,0 +1,5 @@
+import { OnemrvaBcePipe } from './onemrva-bce.pipe';
+import { OnemrvaNissPipe } from './onemrva-niss.pipe';
+
+export * from './onemrva-bce.pipe';
+export * from './onemrva-niss.pipe';

package/projects/onemrva/design-system/shared/src/lib/pipes/onemrva-bce.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'onemrvaBce',
+  standalone: true,
+})
+export class OnemrvaBcePipe implements PipeTransform {
+  transform(value: string): string {
+    let strOut = value.trim().replace(/\/|\.|\-/g, '');
+
+    if (strOut.length !== 10) return '?01?.???.???';
+
+    return `${strOut.substring(0, 4)}.${strOut.substring(
+      4,
+      7
+    )}.${strOut.substring(7, 10)}`;
+  }
+}

package/projects/onemrva/design-system/shared/src/lib/pipes/onemrva-niss.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'onemrvaNiss',
+  standalone: true,
+})
+export class OnemrvaNissPipe implements PipeTransform {
+  transform(value: string): string {
+    let strOut = value.trim().replace(/\/|\.|\-/g, '');
+
+    if (strOut.length !== 11) return '??01??/???-??';
+
+    return `${strOut.substring(0, 6)}/${strOut.substring(
+      6,
+      9
+    )}-${strOut.substring(9, 11)}`;
+  }
+}

package/projects/onemrva/design-system/shared/src/lib/shared.module.ts

@@ -0,0 +1,10 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { directives } from './directives';
+
+@NgModule({
+  declarations: [...directives],
+  imports: [CommonModule],
+  exports: [...directives, CommonModule],
+})
+export class OnemrvaSharedModule {}

package/projects/onemrva/design-system/shared/src/lib/validators/onemrva-validators.ts

@@ -0,0 +1,66 @@
+import { ValidationErrors } from '@angular/forms';
+import { AbstractControl, ValidatorFn } from '@angular/forms';
+
+export class OnemrvaValidators {
+  static bce(required = false): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      if (control.value === null || control.value.trim() === '') {
+        return required ? null : { bceNull: true };
+      }
+
+      let bceCandidate = control.value.trim().replace(/\/|\.|\-/g, '');
+
+      if (bceCandidate.length !== 10)
+        return { bceLengthError: { value: bceCandidate } };
+
+      if (Number.isNaN(+bceCandidate))
+        return { bceNan: { value: bceCandidate } };
+
+      return null;
+    };
+  }
+
+  static niss(required = false): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      if (control.value === null || control.value.trim() === '')
+        return required ? null : { nissNull: true };
+
+      let nissCandidate = control.value.trim().replace(/\/|\.|\-/g, '');
+
+      if (nissCandidate.length !== 11)
+        return { nissLengthError: { value: nissCandidate } };
+
+      if (Number.isNaN(+nissCandidate))
+        return { bceNan: { value: nissCandidate } };
+
+      const date = +nissCandidate.substring(4, 6);
+      const month = +nissCandidate.substring(2, 4) - 1;
+      const currentYear = new Date().getFullYear() - 2000;
+      let year = +nissCandidate.substring(0, 2);
+      year = year > currentYear ? 1900 + year : 2000 + year;
+
+      // Check month
+      if (month > 11) return { nissInvalidMonth: { value: nissCandidate } };
+
+      // Check date
+      if (date > 31) return { nissInvalidDate: { value: nissCandidate } };
+
+      // Check date consistency
+      const d = new Date(year, month, date);
+      if (d.getDate() !== date || d.getMonth() !== month)
+        // This catches errors such as 32 Jan, which becomes 1 Feb inside the date object
+        return { nissInconsistentDate: { value: nissCandidate } };
+
+      // Check digit
+      let nissStart =
+        year < 2000
+          ? +nissCandidate.substring(0, 9)
+          : +('2' + nissCandidate.substring(0, 9));
+
+      if (97 - (nissStart % 97) !== +nissCandidate.substring(9))
+        return { nissCheckDigitError: { value: nissCandidate } };
+
+      return null;
+    };
+  }
+}