@onemrvapublic/design-system 1.0.0-beta.4 → 1.0.0-develop.1

package/mat-input-bank-account/src/bank-account.component.ts

@@ -1,308 +0,0 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Inject,
-  Input,
-  OnDestroy,
-  OnInit,
-  Optional,
-  Self,
-  ViewChild,
-} from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  NgControl,
-  FormsModule,
-  ReactiveFormsModule,
-  AbstractControl,
-  Validators,
-} from '@angular/forms';
-import {
-  MAT_FORM_FIELD,
-  MatFormField,
-  MatFormFieldControl,
-} from '@angular/material/form-field';
-import {
-  combineLatestWith,
-  distinctUntilChanged,
-  map,
-  Observable,
-  of,
-  pairwise,
-  startWith,
-  Subject,
-  takeUntil,
-} from 'rxjs';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSelectSearchModule } from '@onemrvapublic/design-system/mat-select-search';
-import {
-  bankAccountValidator,
-  IBAN_SUPPORTED_COUNTRIES,
-} from '@onemrvapublic/design-system/shared';
-import { CommonModule } from '@angular/common';
-import { extractIBAN, friendlyFormatIBAN } from 'ibantools';
-
-/** Custom `MatFormFieldControl` for bank account number input. */
-@Component({
-  selector: 'bank-account',
-  templateUrl: 'bank-account.component.html',
-  styleUrl: 'bank-account.component.scss',
-  providers: [
-    { provide: MatFormFieldControl, useExisting: BankAccountComponent },
-  ],
-  // eslint-disable-next-line
-  host: {
-    '[class.example-floating]': 'shouldLabelFloat',
-    '[id]': 'id',
-  },
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MatSelectModule,
-    MatSelectSearchModule,
-  ],
-})
-export class BankAccountComponent
-  implements
-    ControlValueAccessor,
-    MatFormFieldControl<string>,
-    OnDestroy,
-    OnInit
-{
-  static nextId = 0;
-
-  @ViewChild('countryCode ') countryCode!: HTMLInputElement;
-  @ViewChild('bban') bban!: HTMLInputElement;
-
-  filterCtrl: FormControl<string | null> = new FormControl<string>('');
-  parts: FormGroup<{
-    countryCode: FormControl<string | null>;
-    bban: FormControl<string | null>;
-  }>;
-
-  countryCodes$: Observable<any> = of([]);
-  stateChanges = new Subject<void>();
-  destroyNotifier$: Subject<void> = new Subject();
-  focused = false;
-  touched = false;
-  controlType = 'bank-account-input';
-  id = `bank-account-input-${BankAccountComponent.nextId++}`;
-  onChange = (_: any) => {};
-  onTouched = () => {};
-
-  get empty() {
-    const {
-      value: { countryCode, bban },
-    } = this.parts;
-
-    return !countryCode && !bban;
-  }
-
-  get shouldLabelFloat() {
-    return this.focused || !this.empty;
-  }
-
-  // @ts-expect-error test
-  // eslint-disable-next-line
-  @Input('aria-describedby') userAriaDescribedBy: string;
-
-  @Input()
-  get placeholder(): string {
-    return this._placeholder;
-  }
-
-  set placeholder(value: string) {
-    this._placeholder = value;
-    this.stateChanges.next();
-  }
-
-  private _placeholder: string = '';
-
-  @Input()
-  get required(): boolean {
-    return this._required;
-  }
-
-  set required(value: BooleanInput) {
-    this._required = coerceBooleanProperty(value);
-    this.stateChanges.next();
-  }
-
-  private _required = false;
-
-  @Input()
-  get disabled(): boolean {
-    return this._disabled;
-  }
-
-  set disabled(value: BooleanInput) {
-    this._disabled = coerceBooleanProperty(value);
-    this._disabled ? this.parts.disable() : this.parts.enable();
-    this.stateChanges.next();
-  }
-
-  private _disabled = false;
-
-  @Input()
-  get value(): string {
-    const {
-      value: { countryCode, bban },
-    } = this.parts;
-    return `${countryCode ?? ''}${bban ?? ''}`;
-  }
-
-  set value(iban: string | null) {
-    const { countryCode, bban } = extractIBAN(iban || '');
-
-    this.parts.setValue({
-      countryCode: countryCode || null,
-      bban: bban || null,
-    });
-    this.stateChanges.next();
-  }
-
-  get errorState(): boolean {
-    return this.parts.invalid && this.touched;
-  }
-
-  constructor(
-    formBuilder: FormBuilder,
-    private _focusMonitor: FocusMonitor,
-    private _elementRef: ElementRef<HTMLElement>,
-    private _cd: ChangeDetectorRef,
-    @Optional() @Inject(MAT_FORM_FIELD) public _formField: MatFormField,
-    @Optional() @Self() public ngControl: NgControl,
-  ) {
-    if (this.ngControl != null) {
-      this.ngControl.valueAccessor = this;
-    }
-
-    this.parts = formBuilder.group(
-      {
-        countryCode: ['', [Validators.maxLength(2)]],
-        bban: ['', [Validators.required]],
-      },
-      {
-        validators: [bankAccountValidator()],
-      },
-    );
-  }
-
-  ngOnInit() {
-    this.countryCodes$ = this.getCountryCodes();
-
-    this.parts.valueChanges
-      .pipe(
-        startWith({ countryCode: '', bban: '' }),
-        pairwise(),
-        distinctUntilChanged(),
-        takeUntil(this.destroyNotifier$),
-      )
-      .subscribe(([_prevIban, { countryCode, bban }]) => {
-        this.touched = true;
-        if (!bban || bban.length <= 2) {
-          return;
-        }
-
-        const potentialCountryCode = bban?.substring(0, 2);
-
-        if (potentialCountryCode?.match(/^[A-Za-z]{2}/)) {
-          const restOfTheBankNumber = bban?.substring(2);
-          return this.parts.setValue({
-            countryCode: potentialCountryCode,
-            ...getBban(potentialCountryCode, restOfTheBankNumber),
-          });
-        }
-
-        return this.parts.patchValue(
-          {
-            ...getBban(countryCode, bban),
-          },
-          { emitEvent: false },
-        );
-      });
-  }
-
-  ngOnDestroy() {
-    this.destroyNotifier$.next();
-    this.destroyNotifier$.complete();
-    this.stateChanges.complete();
-    this._focusMonitor.stopMonitoring(this._elementRef);
-  }
-
-  getCountryCodes() {
-    return this.filterCtrl.valueChanges.pipe(
-      startWith(''),
-      combineLatestWith(of(IBAN_SUPPORTED_COUNTRIES)),
-      map(([filterVal, countryCodes]) => {
-        return countryCodes.filter(code => {
-          if (!filterVal) {
-            return true;
-          }
-
-          return code.toLowerCase().includes(filterVal.toLowerCase());
-        });
-      }),
-    );
-  }
-
-  autoFocusNext(
-    control: AbstractControl,
-    nextElement?: HTMLInputElement,
-  ): void {
-    if (!control.errors && nextElement) {
-      this._focusMonitor.focusVia(nextElement, 'program');
-    }
-  }
-
-  //
-  // autoFocusPrev(control: AbstractControl, prevElement: HTMLInputElement): void {
-  //   if (control.value.length < 1) {
-  //     this._focusMonitor.focusVia(prevElement, 'program');
-  //   }
-  // }
-
-  setDescribedByIds(ids: string[]) {
-    const controlElement = this._elementRef.nativeElement.querySelector(
-      '.bank-account-input-group',
-    )!;
-    controlElement.setAttribute('aria-describedby', ids.join(' '));
-  }
-
-  onContainerClick() {}
-
-  writeValue(iban: string | null): void {
-    this.value = iban;
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  _handleInput(control: AbstractControl, nextElement?: HTMLInputElement): void {
-    this.autoFocusNext(control, nextElement);
-    this.onChange(this.value);
-  }
-}
-
-const getBban = (countryCode: string | null | undefined = '', bban: string) => {
-  return {
-    bban: friendlyFormatIBAN(`${countryCode}${bban}`)?.substring(2) || null,
-  };
-};

package/mat-input-bank-account/src/onemrva-mat-input-bank-account.component.html

@@ -1,11 +0,0 @@
-<mat-form-field class="onemrva-bank-account-input">
-  <mat-label>{{ key | translate }}</mat-label>
-
-  <bank-account [formControl]="accountNumber" />
-
-  <mat-hint *ngIf="hint !== ''">{{ hint }}</mat-hint>
-
-  <mat-error>
-    {{ errors() | translate }}
-  </mat-error>
-</mat-form-field>

package/mat-input-bank-account/src/onemrva-mat-input-bank-account.component.scss

@@ -1,14 +0,0 @@
-.onemrva-bank-account-input {
-  .mat-mdc-select-arrow-wrapper {
-    margin-left: 4px;
-  }
-
-  .mat-mdc-form-field-infix {
-    min-width: 320px !important;
-
-    .onemrva-bank-account-text {
-      padding-left: 4px;
-      vertical-align: middle;
-    }
-  }
-}

package/mat-input-bank-account/src/onemrva-mat-input-bank-account.component.ts

@@ -1,82 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  Component,
-  Input,
-  OnDestroy,
-  OnInit,
-  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 } from '@ngx-translate/core';
-
-import { Subject } from 'rxjs';
-
-import { MatSelectSearchModule } from '@onemrvapublic/design-system/mat-select-search';
-import { BankAccountComponent } from './bank-account.component';
-import { bankAccountValidator } from '@onemrvapublic/design-system/shared';
-import { ValidationErrorsIBAN } from 'ibantools';
-
-@Component({
-  selector: 'onemrva-mat-input-bank-account',
-  styleUrls: ['onemrva-mat-input-bank-account.component.scss'],
-  templateUrl: 'onemrva-mat-input-bank-account.component.html',
-  standalone: true,
-  imports: [
-    CommonModule,
-    MatInputModule,
-    MatFormFieldModule,
-    MatSelectModule,
-    ReactiveFormsModule,
-    TranslateModule,
-    MatSelectSearchModule,
-    BankAccountComponent,
-  ],
-  encapsulation: ViewEncapsulation.None,
-})
-export class OnemrvaMatInputBankAccountComponent implements OnInit, OnDestroy {
-  @Input() accountNumber!: FormControl<string | null>;
-  @Input() key: string = 'accountNumber';
-  @Input() hint: string = '';
-
-  destroyNotifier$: Subject<void> = new Subject();
-
-  constructor() {}
-
-  ngOnInit() {
-    this.accountNumber.addValidators(bankAccountValidator());
-  }
-
-  errors() {
-    const bankNumberErrors = this.accountNumber.errors;
-
-    if (!bankNumberErrors) {
-      return '';
-    }
-
-    if (
-      bankNumberErrors[
-        ValidationErrorsIBAN[ValidationErrorsIBAN.WrongBBANLength]
-      ]
-    ) {
-      return 'bankAccountInput.length';
-    }
-
-    if (
-      bankNumberErrors[
-        ValidationErrorsIBAN[ValidationErrorsIBAN.WrongIBANChecksum]
-      ]
-    ) {
-      return 'bankAccountInput.wrong-iban-checksum';
-    }
-
-    return 'bankAccountInput.invalid';
-  }
-
-  ngOnDestroy() {
-    this.destroyNotifier$.next();
-    this.destroyNotifier$.complete();
-  }
-}

package/mat-input-birthplace/index.ts

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

package/mat-input-birthplace/ng-package.json

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

package/mat-input-birthplace/src/country-item.component.html

@@ -1,8 +0,0 @@
-<div class="onemrva-country-item">
-  <span
-    class="fi fi-{{
-      country?.singlePropertiesMap?.codeSepa?.toLowerCase() || 'xx'
-    }} fis"
-  ></span>
-  <span class="description">{{ countryDescription }}</span>
-</div>

package/mat-input-birthplace/src/country-item.component.ts

@@ -1,33 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, ViewEncapsulation } from '@angular/core';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
-
-import { OnemRvaCommonCountry } from '@onemrvapublic/design-system/shared';
-
-@Component({
-  selector: 'country-item',
-  styleUrls: [
-    './country-item.component.scss',
-    '../../../../../node_modules/flag-icons/sass/flag-icons.scss',
-  ],
-  templateUrl: './country-item.component.html',
-  standalone: true,
-  imports: [CommonModule, TranslateModule],
-  encapsulation: ViewEncapsulation.None,
-})
-export class OnemrvaCountryItemComponent {
-  @Input() country: OnemRvaCommonCountry | null = null;
-
-  constructor(public translate: TranslateService) {}
-
-  public get countryDescription() {
-    switch (this.translate.currentLang) {
-      case 'nl':
-        return this.country?.descNl?.toLowerCase();
-      case 'fr':
-        return this.country?.descFr?.toLowerCase();
-      default:
-        return this.country?.descFr?.toLowerCase();
-    }
-  }
-}

package/mat-input-birthplace/src/onemrva-mat-input-birthplace.component.html

@@ -1,28 +0,0 @@
-<mat-form-field class="onemrva-input-country-common">
-  <mat-label>{{ label }}</mat-label>
-  <mat-select
-    class="onemrva-country-select-common"
-    [formControl]="countryCode"
-    [placeholder]="placeholderLabel"
-  >
-    <mat-select-trigger>
-      <country-item [country]="country | async" />
-    </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; trackBy: trackById"
-      [value]="country.code"
-    >
-      <country-item [country]="country" />
-    </mat-option>
-  </mat-select>
-  <mat-hint *ngIf="hint !== ''">{{ hint }}</mat-hint>
-  <mat-error *ngIf="countryCode.invalid">{{ errors() | translate }}</mat-error>
-</mat-form-field>

package/mat-input-birthplace/src/onemrva-mat-input-birthplace.component.ts

@@ -1,129 +0,0 @@
-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,
-  takeUntil,
-  of,
-  combineLatest,
-} from 'rxjs';
-import { MatSelectSearchModule } from '@onemrvapublic/design-system/mat-select-search';
-import { OnemrvaCountryItemComponent } from './country-item.component';
-import { CommonCountryLookupService } from '@onemrvapublic/design-system/shared';
-import { OnemRvaCommonCountry } from '@onemrvapublic/design-system/shared';
-
-@Component({
-  selector: 'onemrva-mat-input-birthplace',
-  styleUrls: ['onemrva-mat-input-birthplace.component.scss'],
-  templateUrl: 'onemrva-mat-input-birthplace.component.html',
-  standalone: true,
-  imports: [
-    CommonModule,
-    MatInputModule,
-    MatFormFieldModule,
-    MatSelectModule,
-    MatSelectSearchModule,
-    ReactiveFormsModule,
-    TranslateModule,
-    OnemrvaCountryItemComponent,
-  ],
-  encapsulation: ViewEncapsulation.None,
-})
-export class OnemrvaMatInputBirthPlaceComponent implements OnInit, OnDestroy {
-  @Input()
-  readonly: boolean = false;
-
-  @Input() countryCode: FormControl<string | null> = new FormControl(null);
-
-  @Input() label: string = 'Country';
-  @Input() noEntriesFoundLabel = 'Not found';
-  @Input() hint: string = '';
-  @Input() placeholderLabel = 'Search';
-  @Input() searchAriaLabel = '';
-  @Output() getCountry = new EventEmitter<any>();
-
-  public filterCtrl: FormControl<string | null> = new FormControl<string>('');
-
-  destroyNotifier$: Subject<void> = new Subject();
-
-  public filteredCountries$: Observable<OnemRvaCommonCountry[]> = of([]);
-
-  private countries$ = this.commonCountryLookupService.getCountries();
-
-  constructor(
-    private translateService: TranslateService,
-    private commonCountryLookupService: CommonCountryLookupService,
-  ) {
-    this.filteredCountries$ = combineLatest([
-      this.filterCtrl.valueChanges.pipe(startWith('')),
-      this.countries$,
-    ]).pipe(
-      debounceTime(400),
-      map(([search, countries]) => {
-        return countries.filter((country: OnemRvaCommonCountry) => {
-          if (!search || search === '') return countries;
-          if (country.descNl === undefined) return false;
-          return (
-            country.descNl.toLowerCase().indexOf(search.toLowerCase()) > -1
-          );
-        });
-      }),
-      map(country =>
-        country.sort((a, b) => {
-          return a.descNl.localeCompare(b.descNl);
-        }),
-      ),
-    );
-  }
-
-  public get country() {
-    return this.commonCountryLookupService.getCountryByCode(
-      this.countryCode.value,
-    );
-  }
-
-  ngOnInit(): void {
-    this.countryCode.valueChanges.pipe(
-      startWith(this.countryCode),
-      takeUntil(this.destroyNotifier$),
-    );
-  }
-
-  ngOnDestroy() {
-    this.destroyNotifier$.next();
-    this.destroyNotifier$.complete();
-  }
-
-  trackById(index: number, country: OnemRvaCommonCountry) {
-    return country.code;
-  }
-
-  errors() {
-    // if (this.countryCode.errors !== null) {
-    //   for (const k in this.countryCode.errors) {
-    //     if (k === 'required') {
-    //       return 'input.country.required';
-    //     } else {
-    //       return 'input.country.invalid';
-    //     }
-    //   }
-    // }
-    return 'input.country.unknown.error';
-  }
-}

package/mat-input-country/index.ts

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

package/mat-input-country/ng-package.json

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