@onemrvapublic/design-system 0.0.0

package/projects/onemrva/design-system/mat-input-phone/src/onemrva-mat-input-phone.component.ts

@@ -0,0 +1,261 @@
+import { CommonModule } from '@angular/common';
+import { Component,
+  ElementRef, EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit, Output,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
+import {
+  AbstractControl,
+  FormControl,
+  ReactiveFormsModule,
+  ValidationErrors,
+  ValidatorFn, Validators,
+} from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { TranslateModule, TranslateService} from '@ngx-translate/core';
+import {
+  Observable,
+  Subject,
+  map,
+  startWith,
+  debounceTime,
+  tap,
+  takeUntil,
+  withLatestFrom
+} from 'rxjs';
+import {MatSelectSearchModule} from '@onemrvapublic/design-system/mat-select-search';
+import {PhoneNumberDirective} from "./phone-number.directive";
+import { PhoneNumberUtil, PhoneNumberFormat } from 'google-libphonenumber';
+import {getTranslatedCountries, OnemrvaMaterialCountry} from "@onemrvapublic/design-system/mat-input-country";
+
+@Component({
+  selector: 'onemrva-mat-input-phone',
+  styleUrls: ['onemrva-mat-input-phone.component.scss', "../../../../../node_modules/flag-icons/sass/flag-icons.scss"
+],
+  templateUrl: 'onemrva-mat-input-phone.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatSelectSearchModule,
+    ReactiveFormsModule,
+    TranslateModule,
+    PhoneNumberDirective
+  ],
+  encapsulation: ViewEncapsulation.None
+})
+export class OnemrvaMatInputPhoneComponent implements OnInit, OnDestroy {
+  @Input()
+  readonly: boolean = false;
+
+  @Input() phoneNumber!: FormControl;
+  @Input() label: string = 'Phone number';
+  @Input() noEntriesFoundLabel = 'Not found';
+  @Input() placeholderLabel = 'Search';
+  @Input() defaultPrefix: string = '+32';
+  @Input() searchAriaLabel = '';
+  @Input() hint: string = '';
+  @Output() getCountry = new EventEmitter<any>();
+  @ViewChild('numberInput') numberInput!: ElementRef;
+
+  countryCode: FormControl = new FormControl('');
+
+  public filterCtrl: FormControl<string | null> = new FormControl<string>('');
+
+  destroyNotifier$: Subject<void> = new Subject();
+
+  public countries$: Observable<OnemrvaMaterialCountry[]>;
+  public filteredCountries$: Observable<OnemrvaMaterialCountry[]>;
+
+  constructor(
+    private translateService: TranslateService
+  ) {
+
+   this.countries$ = this.translateService.onLangChange.pipe(
+      startWith({ lang: this.translateService.currentLang}),
+      map(({lang}) => getTranslatedCountries(lang)),
+      tap( () => {
+        this.filterCtrl.updateValueAndValidity({ onlySelf: false, emitEvent: true });
+      })
+    );
+
+   this.filteredCountries$ = this.filterCtrl.valueChanges.pipe(
+      debounceTime(400),
+      startWith(''),
+      withLatestFrom(this.countries$),
+      map( ([search, countries]) => {
+        return countries.filter(
+          (country : OnemrvaMaterialCountry) => {
+            if (!search || search === '') return countries;
+            if (country.name === undefined) return false;
+            return  country.name.toLowerCase().indexOf(search.toLowerCase()) > -1
+          }
+        )
+      })
+    );
+  }
+
+  get number() : FormControl {
+    return this.phoneNumber as FormControl;
+  }
+
+  ngOnInit(): void {
+    this.number.valueChanges.pipe(
+      startWith(this.number.getRawValue()),
+      takeUntil(this.destroyNotifier$),
+    ).subscribe((number => {
+      if (number !== '') {
+        if (number.substring(0,1) !== '+') this.countryCode.setValue('', {emitEvent: false});
+        if (number === '0') {
+          let country = this.findCountryFromPrefix(this.defaultPrefix);
+          if (country) {
+            //this.getCountry.next(country);
+            this.number.setValue(this.defaultPrefix, {emitEvent: false});
+            this.countryCode.setValue(country.code);
+          } else{
+            this.countryCode.setValue('');
+          }
+        } else {
+          let country = this.findCountryFromPrefix(number);
+          if (country) {
+            //this.getCountry.next(country);
+            this.countryCode.setValue(country.code);
+          } else{
+            this.countryCode.setValue('');
+          }
+        }
+        this.formatPhoneNumber();
+      }
+    }));
+
+    this.countryCode.valueChanges.pipe(
+      takeUntil(this.destroyNotifier$)
+    ).subscribe( ( value) => {
+
+        let number = this.number.getRawValue();
+        let prevCode = this.findCountryFromPrefix(number);
+        let country = this.findCountryFromCode(value);
+
+        if (prevCode) {
+          number = number.replace(prevCode.dial_code, '');
+        }
+        if (country) {
+          this.getCountry.next(country);
+          if (number.substring(0, 1) === '+') {
+            number = number.replace('+', '');
+          }
+          number = country.dial_code + number;
+          this.number.setValue(number, {emitEvent: false});
+          this.formatPhoneNumber();
+        }
+        setTimeout(() => {
+          this.numberInput.nativeElement.focus();
+        }, 200);
+      }
+    );
+  }
+
+  handleClick(e: any) {
+    e.stopPropagation();
+  }
+
+  private clearValidators() {
+    let required = false;
+    if (this.number.hasValidator(Validators.required)) {
+      required = true;
+    }
+    this.number.clearValidators();
+    if (required) {
+      this.number.addValidators(Validators.required);
+    }
+  }
+
+  private formatPhoneNumber() {
+    this.clearValidators();
+    if (this.countryCode.getRawValue() !== '') {
+      this.number.addValidators([phoneNumberValidator(this.countryCode.getRawValue())]);
+    }
+    const phoneUtil = PhoneNumberUtil.getInstance();
+    try {
+      let number = phoneUtil.parse(this.number.getRawValue(), "");
+      let code = phoneUtil.getRegionCodeForNumber(number);
+      if (code) {
+        this.countryCode.setValue(code, {emitEvent: false});
+        this.clearValidators();
+        this.number.addValidators([phoneNumberValidator(code)]);
+        this.number.setValue( phoneUtil.format(number, PhoneNumberFormat.INTERNATIONAL) , {emitEvent: false});
+      } else {
+        this.number.addValidators([genericValidator('input.phone.invalid')]);
+      }
+    } catch (e : any) {
+      this.number.addValidators([genericValidator(e.message)]);
+    }
+  }
+
+  private findCountryFromCode(code: any) {
+    return getTranslatedCountries(this.translateService.currentLang).find(
+      (country: OnemrvaMaterialCountry) => country.code.toLowerCase() === code.toLowerCase()
+    )
+  }
+  private findCountryFromPrefix(number: string) {
+    return getTranslatedCountries(this.translateService.currentLang).find(
+      (country: OnemrvaMaterialCountry) => country.dial_code === number.substring(0, country.dial_code.length)
+    )
+  }
+
+  ngOnDestroy() {
+    this.destroyNotifier$.next();
+    this.destroyNotifier$.complete();
+  }
+
+  errors() {
+    for (const k in this.number.errors) {
+      if (k === 'required') {
+        return 'input.phone.required';
+      } else {
+        return 'input.phone.invalid';
+      }
+    }
+    return 'input.phone.unknown.error';
+  }
+}
+
+function phoneNumberValidator(code: string): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+
+    let number: string = control.value;
+
+    if (number === '') {
+      return null;
+    }
+    number = number.replace(code, '');
+
+    const phoneUtil = PhoneNumberUtil.getInstance();
+
+    try {
+      const parsedNumber = phoneUtil.parse(number, code);
+      if (phoneUtil.isValidNumberForRegion(parsedNumber, code)) {
+
+        return null;
+
+      }
+    } catch (e : any) {
+      console.warn(e.message);
+      return { phoneNumber: { value: 'input.phone.invalid' } };
+    }
+    return { phoneNumber: { value: 'input.phone.invalid' } };
+  };
+}
+
+function genericValidator(message: string): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    return { phoneNumber: { value: message } };
+  };
+}

package/projects/onemrva/design-system/mat-input-phone/src/phone-number.directive.ts

@@ -0,0 +1,47 @@
+import { Directive, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[phoneNumber]',
+  standalone: true
+})
+export class PhoneNumberDirective {
+  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;
+
+    const allowedCtrlShortcuts = ['a', 'c', 'x', 'v'];
+    if (e.ctrlKey && allowedCtrlShortcuts.indexOf(e.key) >= 0) return;
+
+    e.preventDefault();
+  }
+}

package/projects/onemrva/design-system/mat-message-box/index.ts

@@ -0,0 +1,2 @@
+export * from './src/onemrva-mat-message-box.component';
+export * from './src/onemrva-mat-message-box.module';

package/projects/onemrva/design-system/mat-message-box/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/mat-message-box/src/onemrva-mat-message-box.component.scss

@@ -0,0 +1,60 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@use "../../utils";
+
+@mixin messageBox($theme) {
+  // HWKTMP code dupliqué de mat-toast. Refactoring...
+  .onemrva-mat-message-box {
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    padding: 8px 8px 8px 36px;
+    border-radius: 24px;
+    line-height: 21px;
+    gap: 16px;
+
+    @include mat.typography-level(map.get($theme, typography), "caption");
+
+    &:before {
+      position: relative;
+      float: left;
+      margin-left: -34px;
+      height: 100%;
+      line-height: 100%;
+      vertical-align: middle;
+      left: 8px;
+      font-family: "Material Icons";
+      font-size: 20px;
+      font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
+    }
+    &.mat-info {
+      background-color: utils.palette($theme, "info", 50);
+      color: utils.palette($theme, "info", 500);
+      &:before {
+        content: "\e88e";
+      }
+    }
+    &.mat-success {
+      background-color: utils.palette($theme, "success", 50);
+      color: utils.palette($theme, "success", 600);
+      &:before {
+        content: "\e86c";
+      }
+    }
+    &.mat-warn {
+      background-color: utils.palette($theme, "warn", 50);
+      color: utils.palette($theme, "warn", 600);
+      &:before {
+        content: "\e002";
+      }
+    }
+    &.mat-error {
+      background-color: utils.palette($theme, "error", 50);
+      color: utils.palette($theme, "error", 500);
+      &:before {
+        content: "\e000";
+      }
+    }
+  }
+}

package/projects/onemrva/design-system/mat-message-box/src/onemrva-mat-message-box.component.ts

@@ -0,0 +1,134 @@
+import { Component, HostBinding, Input } from '@angular/core';
+import { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';
+
+let NEXT_ID = 0;
+
+@Component({
+  selector: 'onemrva-mat-message-box',
+  template: ` <div [innerHTML]="messageCode | translate"></div> `,
+})
+export class OnemrvaMatMessageBoxComponent {
+  /**
+   * Returns the `aria-label` attribute of the element.
+   *
+   * @example
+   * ```typescript
+   * let elementLabel = this.<element>.ariaLabel;
+   * ```
+   *
+   */
+  @HostBinding('attr.aria-label')
+  public ariaLabel = 'message-box';
+
+  /**
+   * Returns the `role` attribute of the element.
+   *
+   * @example
+   * ```typescript
+   * let elementRole = this.<element>.role;
+   * ```
+   */
+  @HostBinding('attr.role')
+  public role = 'alert';
+
+  /**
+   * Host `class.onemrva-mat-message-box` binding.
+   *
+   * @hidden
+   * @internal
+   */
+  @HostBinding('class.onemrva-mat-message-box')
+  public cssClass = 'onemrva-mat-message-box';
+
+  /**
+   * Sets the `id` of the element. If not set, the first component instance will have `id` = `"onemrva-mat-*-0"`.
+   *
+   * @example
+   * ```html
+   * <onemrva-mat-* id="my-first-*"></onemrva-mat-*>
+   * ```
+   */
+  @HostBinding('attr.id')
+  @Input()
+  public id = `onemrva-mat-message-box-${NEXT_ID++}`;
+
+  /**
+   * Sets the `data-cy` of the element. If not set, the first component instance will have `data-cy` = `"onemrva-mat-*-0"`.
+   *
+   * @example
+   * ```html
+   * <onemrva-mat-* id="my-first-*"></onemrva-mat-*>
+   * ```
+   */
+  @HostBinding('attr.data-cy')
+  @Input()
+  public dataCy = `onemrva-mat-message-box-${NEXT_ID++}`;
+
+  /**
+   * @hidden
+   * @internal
+   */
+  private _color: OnemrvaMatColor = OnemrvaMatColor.ACCENT;
+
+  /**
+   * Returns the color of the element.
+   *
+   * @example
+   * ```typescript
+   * let color = this.<element>.color;
+   * ```
+   */
+  @Input()
+  public get color(): OnemrvaMatColor {
+    return this._color;
+  }
+
+  /**
+   * Sets the size  of the element.
+   * By default, the size is `"small"`. It can be set to `"medium"` or `"large"`.
+   *
+   * @example
+   * ```html
+   * <onemrva-mat-* size="large"></onemrva-mat-*>
+   * ```
+   */
+  public set color(value: OnemrvaMatColor) {
+    switch (value) {
+      case OnemrvaMatColor.SUCCESS:
+      case OnemrvaMatColor.WARN:
+      case OnemrvaMatColor.INFO:
+      case OnemrvaMatColor.ERROR:
+        this._color = value;
+        break;
+      default:
+        this._color = OnemrvaMatColor.INFO;
+    }
+  }
+
+  /** @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.ERROR &&
+      this.color !== OnemrvaMatColor.WARN &&
+      this.color !== OnemrvaMatColor.SUCCESS
+    );
+  }
+
+  @Input() messageCode!: string;
+}

package/projects/onemrva/design-system/mat-message-box/src/onemrva-mat-message-box.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import { OnemrvaMatMessageBoxComponent } from './onemrva-mat-message-box.component';
+
+@NgModule({
+    declarations: [OnemrvaMatMessageBoxComponent],
+    imports: [CommonModule, MatIconModule, TranslateModule],
+    exports: [OnemrvaMatMessageBoxComponent],
+})
+export class OnemrvaMatMessageBoxModule {}

package/projects/onemrva/design-system/mat-multi-select/index.ts

@@ -0,0 +1,2 @@
+export * from './src/onemrva-mat-multi-select.module';
+export * from './src/onemrva-mat-multi-select.component';

package/projects/onemrva/design-system/mat-multi-select/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/mat-multi-select/src/_onemrva-mat-multi-select.component.scss

@@ -0,0 +1,66 @@
+@use '../../utils' as utils;
+
+@mixin multiselect($theme) {
+  onemrva-mat-multi-select {
+    .mat-select-counter{
+      float: right;
+      top: 16px;
+      position: absolute;
+      right: 24px;
+      display: block;
+      padding: 2px 4px 2px 8px;
+      background: utils.palette($theme,'primary', 50);
+      color: utils.palette($theme,'primary', 500);
+      min-width: 24px;
+      text-align: center;
+
+      border: 1px solid utils.palette($theme,'primary', 300);
+      border-radius: 500px;
+      span.text {
+        font-family: 'Poppins';
+        font-style: normal;
+        font-weight: 500;
+        font-size: 12px;
+        line-height: 21px;
+      }
+      mat-icon {
+        font-size: 12px;
+        height: 13px;
+        width: 13px;
+        line-height: 16px;
+        padding: 0 2px 0 2px;
+        cursor: pointer;
+      }
+
+    }
+    .mat-mdc-select-value {
+      padding-right: 48px;
+    }
+  }
+  div.mat-mdc-select-panel {
+      //overflow: hidden;
+      padding: 0;
+      .selection-choice {
+        text-align: right;
+        background: white;
+        width: 98%;
+        .small {
+          font-size: 12px;
+        }
+        .grey {
+          color: utils.palette($theme,'grayscale', 500) !important;
+        }
+        .disabled {
+          pointer-events: none;
+          cursor: default;
+          color: utils.palette($theme,'grayscale', 500) !important;
+          text-decoration: none;
+        }
+      }
+      .option-list {
+        overflow-y: auto;
+        height: auto;
+        max-height: 226px;
+      }
+  }
+}

package/projects/onemrva/design-system/mat-multi-select/src/onemrva-mat-multi-select.component.html

@@ -0,0 +1,24 @@
+<mat-select multiple="true" [formControl]="formControl">
+  <div class="selection-choice" *ngIf="selectionToggle">
+    <a class="small"
+       [ngClass]="{'disabled':isAllSelected()}"
+       (click)="selectAll()" >{{ 'select.select.all' | translate }}</a><span class="small grey">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
+    <a class="small"
+       [ngClass]="{'disabled':isNoneSelected()}"
+       (click)="deselectAll($event)" >{{ 'select.deselect.all' | translate }}</a></div>
+  <div class="option-list">
+    <mat-option
+      *ngIf="showFilter">
+      <mat-select-search
+        [formControl]="searchFilter"
+        ariaLabel="{{ 'select.search.filter' | translate }}"
+        noEntriesFoundLabel="{{ 'select.search.notFound' | translate }}"
+        placeholderLabel="{{ 'select.search.filter' | translate }}"
+      ></mat-select-search>
+    </mat-option>
+    <ng-container *ngFor="let matOption of matOptions$ | async ">
+      <mat-option [disabled]="matOption.disabled" [value]="matOption.value">{{ matOption._text?.nativeElement?.innerHTML }}</mat-option>
+    </ng-container>
+  </div>
+</mat-select>
+<div class="mat-select-counter" *ngIf="counter > 0"><span class="text">{{ counter }}</span><mat-icon (click)="deselectAll($event)">close</mat-icon></div>