@onemrvapublic/design-system 0.0.0

package/projects/onemrva/design-system/mat-input-country/src/onemrva-mat-input-country.component.html

@@ -0,0 +1,29 @@
+  <mat-form-field
+    class="onemrva-input-country">
+    <mat-label>{{ label }}</mat-label>
+    <mat-select
+      class="onemrva-country-select"
+      [formControl]="country"
+    >
+      <mat-select-trigger>
+        <span class="fi fi-{{ country.getRawValue()?.toLowerCase() }} fis"></span>&nbsp;&nbsp;&nbsp;{{ countryname }}
+      </mat-select-trigger>
+      <mat-option>
+        <mat-select-search
+          [formControl]="filterCtrl"
+          [ariaLabel]="searchAriaLabel"
+          [noEntriesFoundLabel]="noEntriesFoundLabel"
+          [placeholderLabel]="placeholderLabel"
+          ></mat-select-search>
+      </mat-option>
+      <mat-option
+        *ngFor="let country of filteredCountries$ | async"
+        [value]="country.code"
+      ><span class="fi fi-{{ country.code.toLowerCase() }} fis"></span>&nbsp;&nbsp;{{ country.name }} </mat-option
+      >
+
+    </mat-select>
+    <mat-hint *ngIf="hint !== ''">{{ hint }}</mat-hint>
+    <mat-error *ngIf="country.invalid">{{ errors() | translate }}</mat-error>
+  </mat-form-field>
+

package/projects/onemrva/design-system/mat-input-country/src/onemrva-mat-input-country.component.scss

@@ -0,0 +1,29 @@
+.onemrva-input-phone-number {
+  mat-select {
+    padding: 0 0px 0 8px;
+    .mat-mdc-select-placeholder {
+      width: 1em !important;
+      display: block !important;
+      &:before {
+        width: 1em !important;
+        height: 1em !important;
+        background: #EEEEEE !important;
+        visibility: visible !important;
+        margin: 10px 0 !important;
+      }
+    }
+  }
+  .onemrva-text-number {
+    padding-left: 12px !important;
+    vertical-align: middle;
+  }
+  .mat-mdc-form-field-text-prefix {
+    mat-select {
+      line-height: 14px !important;
+    }
+  }
+  span.dialcode {
+    color: #acaab2 ;
+  }
+}
+

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

@@ -0,0 +1,144 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit, Output,
+  ViewEncapsulation
+} from '@angular/core';
+import {
+  FormControl,
+  ReactiveFormsModule,
+} 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 {getTranslatedCountries, getTranslatedCountryName, OnemrvaMaterialCountry} from "./countries";
+
+@Component({
+  selector: 'onemrva-mat-input-country',
+  styleUrls: [
+    'onemrva-mat-input-country.component.scss',
+    "../../../../../node_modules/flag-icons/sass/flag-icons.scss"
+],
+  templateUrl: 'onemrva-mat-input-country.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatSelectSearchModule,
+    ReactiveFormsModule,
+    TranslateModule
+  ],
+  encapsulation: ViewEncapsulation.None
+})
+export class OnemrvaMatInputCountryComponent implements OnInit, OnDestroy {
+  @Input()
+  readonly: boolean = false;
+
+  @Input() country!: FormControl;
+
+  @Input() label: string = 'Country';
+  @Input() noEntriesFoundLabel = 'Not found';
+  @Input() hint: string = '';
+  @Input() placeholderLabel = 'Search';
+  @Input() searchAriaLabel = '';
+  @Output() getCountry = new EventEmitter<any>();
+
+  public countryname = '';
+
+  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( (countries) => {
+        this.setCountryName(this.country.getRawValue());
+        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
+          }
+        )
+      })
+    );
+  }
+
+  private findCountryFromCode(code: string) {
+    return getTranslatedCountries(this.translateService.currentLang).find(
+      (country: OnemrvaMaterialCountry) => country.code === code.substring(0, country.code.length)
+    )
+  }
+
+  private setCountryName(countryCode: string) {
+    if (countryCode !== '') {
+      const countryInfo = this.findCountryFromCode(countryCode);
+      if (countryInfo) {
+        this.countryname = getTranslatedCountryName(countryInfo, this.translateService.currentLang);
+      } else {
+        this.countryname = '';
+      }
+    }
+  }
+
+  ngOnInit(): void {
+    this.country.valueChanges.pipe(
+      startWith(this.country.getRawValue()),
+      takeUntil(this.destroyNotifier$),
+    ).subscribe((countryCode => {
+      this.setCountryName(countryCode);
+    }));
+  }
+
+  handleClick(e: any) {
+    e.stopPropagation();
+  }
+
+  ngOnDestroy() {
+    this.destroyNotifier$.next();
+    this.destroyNotifier$.complete();
+  }
+
+  errors() {
+    for (const k in this.country.errors) {
+      if (k === 'required') {
+        return 'input.country.required';
+      } else {
+        return 'input.country.invalid';
+      }
+    }
+    return 'input.country.unknown.error';
+  }
+}

package/projects/onemrva/design-system/mat-input-enterprise-number/index.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of mat-bank-account-input
+ */
+
+export * from './src/onemrva-mat-input-enterprise-number.component';

package/projects/onemrva/design-system/mat-input-enterprise-number/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-input-enterprise-number/src/onemrva-mat-input-enterprise-number.component.html

@@ -0,0 +1,39 @@
+<ng-container>
+  <mat-form-field class="onemrva-input-enterprise-number">
+    <mat-label>{{ label }}</mat-label>
+    <input
+      (click)="handleClick($event)"
+      type="text"
+      matInput
+      #numberInput
+      placeholder=""
+      [formControl]="enterpriseNumber"
+      class="onemrva-text-enterprise-number"
+      [mask]="mask$ | async"
+    />
+    <mat-select
+      matTextPrefix
+      class="onemrva-phone-number-select"
+      [formControl]="countryCode"
+    >
+      <mat-select-trigger>
+        <span class="fi fi-{{ countryCode.getRawValue()?.toLowerCase() }} fis"></span>
+      </mat-select-trigger>
+      <mat-option>
+        <mat-select-search
+          [formControl]="filterCtrl"
+          [ariaLabel]="searchAriaLabel"
+          [noEntriesFoundLabel]="noEntriesFoundLabel"
+          [placeholderLabel]="placeholderLabel"
+        ></mat-select-search>
+      </mat-option>
+      <mat-option
+        *ngFor="let country of filteredCountries$ | async"
+        [value]="country.code"
+      ><span class="fi fi-{{ country.code.toLowerCase() }} fis"></span>&nbsp;&nbsp;{{ country.name }}</mat-option>
+
+    </mat-select>
+    <mat-hint *ngIf="hint !== ''">{{ hint }}</mat-hint>
+    <mat-error *ngIf="number.invalid">{{ errors() | translate }}</mat-error>
+  </mat-form-field>
+</ng-container>

package/projects/onemrva/design-system/mat-input-enterprise-number/src/onemrva-mat-input-enterprise-number.component.scss

@@ -0,0 +1,25 @@
+.onemrva-input-enterprise-number {
+  mat-select {
+    padding: 0 0px 0 8px;
+    .mat-mdc-select-placeholder {
+      width: 1em !important;
+      display: block !important;
+      &:before {
+        width: 1em !important;
+        height: 1em !important;
+        background: #EEEEEE !important;
+        visibility: visible !important;
+        margin: 10px 0 !important;
+      }
+    }
+  }
+  .onemrva-text-enterprise-number {
+    padding-left: 12px !important;
+    vertical-align: middle;
+  }
+  .mat-mdc-form-field-text-prefix {
+    mat-select {
+      line-height: 14px !important;
+    }
+  }
+}

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

@@ -0,0 +1,190 @@
+import {CommonModule} from '@angular/common';
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation} from '@angular/core';
+import {
+  FormControl,
+  ReactiveFormsModule,
+  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 {NgxMaskDirective} from 'ngx-mask';
+import {debounceTime, map, Observable, startWith, Subject, takeUntil, tap, withLatestFrom} from 'rxjs';
+import {MatSelectSearchModule} from "@onemrvapublic/design-system/mat-select-search";
+import {
+  getEuropeanTranslatedCountries,
+  getTranslatedCountries,
+  OnemrvaMaterialCountry
+} from "@onemrvapublic/design-system/mat-input-country";
+
+@Component({
+  selector: 'onemrva-mat-input-enterprise-number',
+  styleUrls: ['onemrva-mat-input-enterprise-number.component.scss', "../../../../../node_modules/flag-icons/sass/flag-icons.scss"],
+  templateUrl: 'onemrva-mat-input-enterprise-number.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    ReactiveFormsModule,
+    TranslateModule,
+    NgxMaskDirective,
+    MatSelectSearchModule,
+  ],
+  encapsulation: ViewEncapsulation.None
+})
+export class OnemrvaMatInputEnterpriseNumberComponent implements OnInit {
+  @Input()
+  readonly: boolean = false;
+
+  @Input() enterpriseNumber!: FormControl;
+  @Input() label: string = 'VIES';
+  @Input() noEntriesFoundLabel = 'Not found';
+  @Input() placeholderLabel = 'Search';
+  @Input() defaultCountry: string = 'BE';
+  @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();
+
+  mask$!: Observable<string | undefined>;
+
+  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}) => getEuropeanTranslatedCountries(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.enterpriseNumber as FormControl;
+  }
+
+  ngOnInit(): void {
+    this.number.valueChanges.pipe(
+      startWith(this.number.getRawValue()),
+      takeUntil(this.destroyNotifier$),
+    ).subscribe((number => {
+      this.countryCode.setValue('');
+      if (number === '0') {
+        let country = this.findCountryFromCode(this.defaultCountry);
+        if (country) {
+          number = country.pattern.substring(0,2)  + number;
+          this.number.setValue(number, {emitEvent: false});
+          this.countryCode.setValue(country.code);
+        } else{
+          this.countryCode.setValue('');
+        }
+      } else {
+        if (number.length > 1) {
+          let country = this.findCountryFromVIESCode(number);
+          if (country) {
+            this.countryCode.setValue(country.code);
+          }
+        }
+      }
+
+    }));
+
+    this.countryCode.valueChanges.pipe(
+      takeUntil(this.destroyNotifier$)
+    ).subscribe( ( value) => {
+      let number = this.number.getRawValue();
+      let prevCode = this.findCountryFromVIESCode(number);
+      let country = this.findCountryFromCode(value);
+      if (prevCode) {
+        number = number.replace(prevCode.pattern.substring(0,2), '');
+      }
+      if (country) {
+        this.getCountry.next(country);
+        number = country.pattern.substring(0,2) + number;
+        this.formatEnterpriseNumber(country);
+      }
+      this.number.setValue(number, {emitEvent: false});
+      this.formatEnterpriseNumber(country);
+      }
+    );
+  }
+
+  private clearValidators() {
+    let required = false;
+    if (this.number.hasValidator(Validators.required)) {
+      required = true;
+    }
+    this.number.clearValidators();
+    if (required) {
+      this.number.addValidators(Validators.required);
+    }
+  }
+
+  private formatEnterpriseNumber(country: OnemrvaMaterialCountry |undefined) {
+    this.clearValidators();
+    if (this.countryCode.getRawValue() !== '' && country) {
+      this.enterpriseNumber.addValidators(Validators.pattern(new RegExp(country.pattern)));
+    }
+  }
+
+  ngOnDestroy() {
+    this.destroyNotifier$.next();
+    this.destroyNotifier$.complete();
+  }
+
+  handleClick(e: any) {
+    e.stopPropagation();
+  }
+
+  private findCountryFromCode(code: any) {
+    return getTranslatedCountries(this.translateService.currentLang).find(
+      (country: OnemrvaMaterialCountry) => country.code.toLowerCase() === code.toLowerCase()
+    )
+  }
+
+  private findCountryFromVIESCode(code: string) {
+    return getTranslatedCountries(this.translateService.currentLang).find(
+      (country: OnemrvaMaterialCountry) => country.pattern.substring(0,2) === code.substring(0, 2)
+    )
+  }
+
+  errors() {
+    for (const k in this.number.errors) {
+      if (k === 'required') {
+        return 'input.vies.required';
+      } else {
+        return 'input.vies.invalid';
+      }
+    }
+    return 'input.vies.unknown.error';
+  }
+}

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

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of mat-bank-account-input
+ */
+
+export * from './src/onemrva-mat-input-phone.component';
+export * from './src/phone-number.directive';

package/projects/onemrva/design-system/mat-input-phone/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-input-phone/src/onemrva-mat-input-phone.component.html

@@ -0,0 +1,43 @@
+<ng-container >
+  <mat-form-field
+    class="onemrva-input-phone-number">
+    <mat-label>{{ label }}</mat-label>
+
+    <input
+      (click)="handleClick($event)"
+      type="tel"
+      matInput
+      phoneNumber
+      #numberInput
+      placeholder="+32 475 12 34 56"
+      [formControl]="phoneNumber"
+      class="onemrva-text-number"
+      [readOnly]="readonly"
+    />
+    <mat-select
+      matTextPrefix
+      class="onemrva-phone-number-select"
+      [formControl]="countryCode"
+    >
+      <mat-select-trigger>
+        <span class="fi fi-{{ countryCode.getRawValue()?.toLowerCase() }} fis"></span>
+      </mat-select-trigger>
+      <mat-option>
+        <mat-select-search
+          [formControl]="filterCtrl"
+          [ariaLabel]="searchAriaLabel"
+          [noEntriesFoundLabel]="noEntriesFoundLabel"
+          [placeholderLabel]="placeholderLabel"
+          ></mat-select-search>
+      </mat-option>
+      <mat-option
+        *ngFor="let country of filteredCountries$ | async"
+        [value]="country.code"
+      ><span class="fi fi-{{ country.code.toLowerCase() }} fis"></span>&nbsp;&nbsp;{{ country.name }}&nbsp;&nbsp;&nbsp;<span class="dialcode">{{ country.dial_code }}</span> </mat-option
+      >
+
+    </mat-select>
+    <mat-hint *ngIf="hint !== ''">{{ hint }}</mat-hint>
+    <mat-error *ngIf="number.invalid">{{ errors() | translate }}</mat-error>
+  </mat-form-field>
+</ng-container>

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

@@ -0,0 +1,29 @@
+.onemrva-input-phone-number {
+  mat-select {
+    padding: 0 0px 0 8px;
+    .mat-mdc-select-placeholder {
+      width: 1em !important;
+      display: block !important;
+      &:before {
+        width: 1em !important;
+        height: 1em !important;
+        background: #EEEEEE !important;
+        visibility: visible !important;
+        margin: 10px 0 !important;
+      }
+    }
+  }
+  .onemrva-text-number {
+    padding-left: 12px !important;
+    vertical-align: middle;
+  }
+  .mat-mdc-form-field-text-prefix {
+    mat-select {
+      line-height: 14px !important;
+    }
+  }
+  span.dialcode {
+    color: #acaab2 ;
+  }
+}
+