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

package/shared/src/lib/components/clipboard-icon/clipboard-icon.component.ts

@@ -1,18 +0,0 @@
-import { Component, ElementRef } 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/shared/src/lib/containers/WebComponentOverlayContainer.ts

@@ -1,90 +0,0 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable, OnDestroy } from '@angular/core';
-import { Platform, _isTestEnvironment } from '@angular/cdk/platform';
-
-/** Container inside which all overlays will render. */
-@Injectable({ providedIn: 'root' })
-export class WebComponentOverlayContainer implements OnDestroy {
-  protected _containerElement: HTMLElement | null = null;
-  protected _document: Document;
-
-  constructor(
-    @Inject(DOCUMENT) document: any,
-    protected _platform: Platform,
-  ) {
-    this._document = document;
-  }
-
-  ngOnDestroy() {
-    this._containerElement?.remove();
-  }
-
-  /**
-   * This method returns the overlay container element. It will lazily
-   * create the element the first time it is called to facilitate using
-   * the container in non-browser environments.
-   * @returns the container element
-   */
-  getContainerElement(): HTMLElement | null {
-    if (this._containerElement === null) {
-      this._createContainer();
-    }
-
-    return this._containerElement;
-  }
-
-  /**
-   * Create the overlay container element, which is simply a div
-   * with the 'cdk-overlay-container' class on the document body.
-   */
-  protected _createContainer(): void {
-    const containerClass = 'cdk-overlay-container';
-
-    // module or Angular starts tearing down the testing `NgModule`. See:
-    // https://github.com/angular/angular/issues/18831
-    if (this._platform.isBrowser || _isTestEnvironment()) {
-      const oppositePlatformContainers = this._document.querySelectorAll(
-        `.${containerClass}[platform="server"], ` +
-          `.${containerClass}[platform="test"]`,
-      );
-
-      // Remove any old containers from the opposite platform.
-      // This can happen when transitioning from the server to the client.
-      for (let i = 0; i < oppositePlatformContainers.length; i++) {
-        oppositePlatformContainers[i].remove();
-      }
-    }
-
-    const containerwrap = this._document.createElement('div');
-    containerwrap.classList.add('onemrva-theme');
-
-    const container = this._document.createElement('div');
-    container.classList.add(containerClass);
-
-    // A long time ago we kept adding new overlay containers whenever a new app was instantiated,
-    // but at some point we added logic which clears the duplicate ones in order to avoid leaks.
-    // The new logic was a little too aggressive since it was breaking some legitimate use cases.
-    // To mitigate the problem we made it so that only containers from a different platform are
-    // cleared, but the side-effect was that people started depending on the overly-aggressive
-    // logic to clean up their tests for them. Until we can introduce an overlay-specific testing
-    // module which does the cleanup, we try to detect that we're in a test environment and we
-    // always clear the container. See #17006.
-    if (_isTestEnvironment()) {
-      container.setAttribute('platform', 'test');
-    } else if (!this._platform.isBrowser) {
-      container.setAttribute('platform', 'server');
-    }
-
-    containerwrap.appendChild(container);
-    this._document.body.appendChild(containerwrap);
-    this._containerElement = container;
-  }
-}

package/shared/src/lib/containers/index.ts

@@ -1 +0,0 @@
-export * from './WebComponentOverlayContainer';

package/shared/src/lib/date.format.ts

@@ -1,11 +0,0 @@
-export const ONEMRVA_FORMAT = {
-  parse: {
-    dateInput: 'LL',
-  },
-  display: {
-    dateInput: 'DD/MM/YYYY',
-    monthYearLabel: 'MMM YYYY',
-    dateA11yLabel: 'LL',
-    monthYearA11yLabel: 'MMMM YYYY',
-  },
-};

package/shared/src/lib/directives/clipboard.directive.ts

@@ -1,52 +0,0 @@
-import {
-  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]',
-})
-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/shared/src/lib/directives/color.directive.ts

@@ -1,46 +0,0 @@
-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/shared/src/lib/directives/digit-only.directive.ts

@@ -1,46 +0,0 @@
-import { Directive, HostListener } from '@angular/core';
-
-@Directive({
-  selector: '[digitOnly]',
-})
-export class DigitOnlyDirective {
-  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;
-
-    // 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/shared/src/lib/directives/if-width-is.directive.ts

@@ -1,39 +0,0 @@
-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/shared/src/lib/directives/index.ts

@@ -1,22 +0,0 @@
-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/shared/src/lib/directives/mask.directive.ts

@@ -1,223 +0,0 @@
-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
-    const 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) {
-    const 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) => {
-          const 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;
-        const 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
-      ) {
-        /* empty */
-      } else break;
-    }
-
-    // Step 4 - Update inputStack only when all characters are processed
-    if (compliantValue !== this.inputStack[this.stackIdx]) {
-      this.stackIdx++;
-
-      const 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/shared/src/lib/directives/mat-row-clickable.directive.ts

@@ -1,66 +0,0 @@
-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() matRowClickable = new EventEmitter<any>();
-
-  @Input()
-  color: OnemrvaMatColor = '';
-
-  constructor(private el: ElementRef) {}
-
-  @HostListener('click', ['$event'])
-  click() {
-    this.matRowClickable.emit();
-  }
-
-  @HostBinding('class.onemrva-clickable-row')
-  public cssClass = true;
-
-  /** @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/shared/src/lib/interfaces/OnemRvaCommonCountry.interface.ts

@@ -1,23 +0,0 @@
-export interface OnemRvaCommonCountry {
-  className: 'be.fgov.onerva.lookup.wppt.persistence.model.common.Country';
-  id: number;
-  code: string;
-  codeMultiple: Record<string, any>;
-  descFr: string;
-  descNl: string;
-  beginDate: string;
-  endDate: string;
-  singlePropertiesMap: {
-    lastUpdateUserId: string;
-    flagCee: string;
-    flagLock: string;
-    vergunArbeid: string;
-    aa: string;
-    commentLegal: string;
-    codeSepa: string;
-    vergunVerblijf: string;
-    lastUpdateDate: string;
-  };
-  multiPropertiesCollectionMap: Record<string, any>;
-  singlePropertisCollectionMap: Record<string, any>;
-}

package/shared/src/lib/interfaces/index.ts

@@ -1 +0,0 @@
-export * from './OnemRvaCommonCountry.interface';

package/shared/src/lib/pipes/index.ts

@@ -1,2 +0,0 @@
-export * from './onemrva-bce.pipe';
-export * from './onemrva-niss.pipe';

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

@@ -1,18 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'onemrvaBce',
-  standalone: true,
-})
-export class OnemrvaBcePipe implements PipeTransform {
-  transform(value: string): string {
-    const 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/shared/src/lib/pipes/onemrva-niss.pipe.ts

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