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

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

@@ -1,274 +0,0 @@
-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') {
-            const 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 {
-            const 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();
-        const prevCode = this.findCountryFromPrefix(number);
-        const 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 {
-      const number = phoneUtil.parse(this.number.getRawValue(), '');
-      const 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/mat-input-phone/src/phone-number.directive.ts

@@ -1,46 +0,0 @@
-import { Directive, HostListener } from '@angular/core';
-
-@Directive({
-  selector: '[phoneNumber]',
-  standalone: true,
-})
-export class PhoneNumberDirective {
-  constructor() {}
-
-  @HostListener('keydown', ['$event']) onKeyDown(event: any) {
-    const 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/mat-message-box/index.ts

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

package/mat-message-box/ng-package.json

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

package/mat-message-box/src/onemrva-mat-message-box.component.html

@@ -1,3 +0,0 @@
-<div #mbcontent>
-  <ng-content></ng-content>
-</div>

package/mat-message-box/src/onemrva-mat-message-box.component.ts

@@ -1,172 +0,0 @@
-import {
-  AfterViewInit,
-  Component,
-  ElementRef,
-  HostBinding,
-  Input,
-  ViewChild,
-} from '@angular/core';
-import { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';
-
-let NEXT_ID = 0;
-
-@Component({
-  selector: 'onemrva-mat-message-box',
-  templateUrl: 'onemrva-mat-message-box.component.html',
-})
-export class OnemrvaMatMessageBoxComponent implements AfterViewInit {
-  @Input()
-  public label: false | string = false;
-
-  @Input()
-  public messageCode: string = '';
-
-  @ViewChild('mbcontent')
-  public mbcontent!: ElementRef;
-  /**
-   * 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.NONE;
-
-  /**
-   * 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.NONE:
-      case OnemrvaMatColor.INFO:
-      case OnemrvaMatColor.GRAYSCALE:
-      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-grayscale')
-  public get isGrayscale(): boolean {
-    return (
-      this.color === OnemrvaMatColor.GRAYSCALE ||
-      this.color === OnemrvaMatColor.NONE
-    );
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-info')
-  public get _isInfo(): boolean {
-    return (
-      this.color !== OnemrvaMatColor.ERROR &&
-      this.color !== OnemrvaMatColor.WARN &&
-      this.color !== OnemrvaMatColor.NONE &&
-      this.color !== OnemrvaMatColor.ACCENT &&
-      this.color !== OnemrvaMatColor.GRAYSCALE &&
-      this.color !== OnemrvaMatColor.SUCCESS
-    );
-  }
-
-  ngAfterViewInit(): void {
-    if (this.messageCode !== '') {
-      console.warn(
-        'messageCode input has been deprecated in message-box component, please review documentation to fix this!',
-      );
-      this.mbcontent.nativeElement.insertAdjacentHTML(
-        'beforeend',
-        this.messageCode,
-      );
-    }
-  }
-}

package/mat-message-box/src/onemrva-mat-message-box.module.ts

@@ -1,12 +0,0 @@
-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/mat-multi-select/index.ts

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

package/mat-multi-select/ng-package.json

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

package/mat-multi-select/src/_onemrva-mat-multi-select.component.scss

@@ -1,66 +0,0 @@
-@use '../../utils' as utils;
-
-@mixin multiselect($theme) {
-  .mat-select-counter {
-    float: right;
-    top: 9px;
-    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: utils.fontFamily($theme, 'button');
-      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;
-    }
-  }
-  onemrva-mat-multi-select,
-  mat-select {
-    .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/mat-multi-select/src/onemrva-mat-multi-select.component.html

@@ -1,44 +0,0 @@
-<mat-select
-  multiple="true"
-  [formControl]="formControl"
-  [attr.data-cy]="dataCy"
-  [attr.aria-label]="label"
->
-  <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"
-        [attr.data-cy]="matOption._getHostElement().dataset['cy']"
-      >
-        {{ 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>