@sebgroup/green-angular 6.0.4 → 6.1.0-rc.20250730100346703

package/src/v-angular/input/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

package/src/v-angular/input-mask/config.ts

@@ -0,0 +1,10 @@
+import { InjectionToken } from '@angular/core'
+
+export class InputMaskConfig {
+  isAsync = false
+  inputSelector = 'input'
+}
+
+export const INPUT_MASK_CONFIG = new InjectionToken<InputMaskConfig>(
+  'InputMaskConfig',
+)

package/src/v-angular/input-mask/constants.ts

@@ -0,0 +1,6 @@
+import { InputmaskOptions } from './input-mask.types'
+
+export const createMask = <T>(
+  options: string | InputmaskOptions<T>,
+): InputmaskOptions<T> =>
+  typeof options === 'string' ? { mask: options } : options

package/src/v-angular/input-mask/index.ts

@@ -0,0 +1,5 @@
+export * from './input-mask-format.pipe'
+export * from './input-mask.directive'
+export * from './input-mask.module'
+export * from './input-mask.types'
+export * from './constants'

package/src/v-angular/input-mask/input-mask-format.pipe.spec.ts

@@ -0,0 +1,78 @@
+import { InputMaskFormatPipe } from './input-mask-format.pipe'
+
+describe('[NggvInputMask]', () => {
+  // ----------------------------------------------------------------------------
+  // InputMaskFormatPipe - constructor()
+  // ----------------------------------------------------------------------------
+
+  let pipe: InputMaskFormatPipe
+
+  const dateFormats = [
+    'yyyy-mm-dd',
+    'yyyy/mm/dd',
+    'dd/mm/yyyy',
+    'dd-mm-yyyy',
+    'dd.mm.yyyy',
+    'mm/dd/yyyy',
+    'dd.mm.yyyy.',
+    'yyyy.mm.dd.',
+    'yyyy.mm.dd',
+    'mm.dd.yyyy',
+    'dd/mm yyyy',
+  ]
+
+  const dateMasks = dateFormats.map((format) => ({
+    alias: 'datetime',
+    inputFormat: format,
+  }))
+
+  beforeEach(() => {
+    pipe = new InputMaskFormatPipe()
+  })
+
+  describe('InputMaskFormatPipe - constructor()', () => {
+    it('creates an instance', () => {
+      expect(pipe).toBeTruthy()
+    })
+
+    const numericMask1 = {
+      alias: 'numeric',
+      groupSeparator: ' ',
+      radixPoint: ',',
+      digits: 2,
+      digitsOptional: false,
+    }
+
+    const numericMask2 = {
+      alias: 'numeric',
+      groupSeparator: ',',
+      radixPoint: '.',
+      digits: 2,
+      digitsOptional: false,
+    }
+
+    it.each`
+      value                     | config             | expected
+      ${null}                   | ${dateMasks[0]}    | ${null}
+      ${undefined}              | ${dateMasks[0]}    | ${undefined}
+      ${false}                  | ${dateMasks[0]}    | ${false}
+      ${''}                     | ${dateMasks[0]}    | ${''}
+      ${new Date('2023-08-03')} | ${dateMasks[0]}    | ${'2023-08-03'}
+      ${new Date('2023-08-03')} | ${dateMasks[1]}    | ${'2023/08/03'}
+      ${new Date('2023-08-03')} | ${dateMasks[2]}    | ${'03/08/2023'}
+      ${new Date('2023-08-03')} | ${dateMasks[3]}    | ${'03-08-2023'}
+      ${new Date('2023-08-03')} | ${dateMasks[4]}    | ${'03.08.2023'}
+      ${new Date('2023-08-03')} | ${dateMasks[5]}    | ${'08/03/2023'}
+      ${new Date('2023-08-03')} | ${dateMasks[6]}    | ${'03.08.2023.'}
+      ${new Date('2023-08-03')} | ${dateMasks[7]}    | ${'2023.08.03.'}
+      ${new Date('2023-08-03')} | ${dateMasks[8]}    | ${'2023.08.03'}
+      ${new Date('2023-08-03')} | ${dateMasks[9]}    | ${'08.03.2023'}
+      ${new Date('2023-08-03')} | ${dateMasks[10]}   | ${'03/08 2023'}
+      ${'111111111111'}         | ${{ alias: 'ip' }} | ${'111.111.111.111'}
+      ${100213.95}              | ${numericMask1}    | ${'100 213,95'}
+      ${100213.95}              | ${numericMask2}    | ${'100,213.95'}
+    `(`value '$value' returns: '$expected'`, ({ value, config, expected }) => {
+      expect(pipe.transform(value, config)).toEqual(expected)
+    })
+  })
+})

package/src/v-angular/input-mask/input-mask-format.pipe.ts

@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core'
+import _Inputmask from 'inputmask'
+
+import type Inputmask from 'inputmask'
+
+import type { InputmaskOptions } from './input-mask.types'
+
+const InputmaskStatic =
+  (_Inputmask as unknown as { default?: Inputmask.Static }).default ||
+  _Inputmask
+
+@Pipe({
+  name: 'nggvInputMaskFormat',
+})
+export class InputMaskFormatPipe implements PipeTransform {
+  transform<T = any>(value: any, options: InputmaskOptions<T>): any {
+    if (!value) return value
+    return InputmaskStatic.format(value, options)
+  }
+}

package/src/v-angular/input-mask/input-mask.directive.spec.ts

@@ -0,0 +1,313 @@
+import { CommonModule } from '@angular/common'
+import {
+  ApplicationRef,
+  Component,
+  forwardRef,
+  Input,
+  OnInit,
+  PLATFORM_ID,
+} from '@angular/core'
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'
+import {
+  FormControl,
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms'
+import { BrowserModule } from '@angular/platform-browser'
+
+import { INPUT_MASK_CONFIG, InputMaskConfig } from './config'
+import { createMask } from './constants'
+import { NggvInputMaskDirective } from './input-mask.directive'
+import { NggvInputMaskModule } from './input-mask.module'
+import { InputmaskOptions } from './input-mask.types'
+
+describe('[NggvInputMask] -> InputMaskDirective', () => {
+  @Component({
+    selector: 'nggv-lib-custom-input',
+    template: `
+      <input
+        *ngIf="!isAsync"
+        class="nggv-lib-custom-input"
+        [formControl]="control"
+        [nggvInputMask]="inputMask"
+        [placeholder]="placeholder"
+      />
+    `,
+  })
+  class CustomInputComponent implements OnInit {
+    @Input() control!: FormControl
+    @Input() inputMask!: InputmaskOptions<any>
+    @Input() placeholder: string | undefined
+    @Input() isAsync = false
+    ngOnInit() {
+      if (this.isAsync) {
+        setTimeout(() => {
+          this.isAsync = false
+        }, 1000)
+      }
+    }
+  }
+
+  @Component({
+    template: `
+      <input class="date" [nggvInputMask]="dateMask" [formControl]="dateFC" />
+      <input class="ip" [nggvInputMask]="ipAddressMask" [formControl]="ipFC" />
+      <input
+        class="initDate"
+        [nggvInputMask]="dateMask"
+        [formControl]="initDateFC"
+      />
+      <input
+        class="phone"
+        [nggvInputMask]="phoneMask"
+        [formControl]="phoneFC"
+      />
+      <nggv-lib-custom-input
+        [control]="dateFCCustom"
+        [inputMask]="dateMask"
+        [isAsync]="isAsync"
+        placeholder="Date"
+      ></nggv-lib-custom-input>
+    `,
+  })
+  class TestComponent {
+    dateMask = createMask<Date>({
+      alias: 'datetime',
+      inputFormat: 'dd/mm/yyyy',
+      parser: (value: string) => {
+        const values = value.split('/')
+        const year = +values[2]
+        const month = +values[1] - 1
+        const day = +values[0]
+        return new Date(year, month, day)
+      },
+    })
+    dateFC = new FormControl('', [Validators.required])
+    initDateFC = new FormControl('28/02/1988')
+
+    ipAddressMask = createMask({ alias: 'ip' })
+    ipFC = new FormControl('')
+
+    phoneFC = new FormControl({ value: '', disabled: true })
+    phoneMask = createMask('(999) 999-9999')
+
+    dateFCCustom = new FormControl('')
+    isAsync = false
+  }
+
+  let component: TestComponent
+  let fixture: ComponentFixture<TestComponent>
+
+  const inputField = (selector: string): HTMLInputElement =>
+    fixture.debugElement.nativeElement.querySelector(selector)
+  const updateInput = async (
+    element: HTMLInputElement | string,
+    value: string | null,
+  ) => {
+    if (!element) return
+
+    const target: HTMLInputElement =
+      typeof element === 'string' ? inputField(element) : element
+
+    if (!target) return
+
+    target.dispatchEvent(new Event('focus'))
+    ;(target.value as any) = value
+    target.dispatchEvent(new Event('input'))
+
+    fixture.detectChanges()
+    await fixture.whenStable().then() // await for the promises to finish before asserting
+    fixture.detectChanges()
+
+    target.dispatchEvent(new Event('blur'))
+
+    fixture.detectChanges()
+    await fixture.whenStable().then() // await for the promises to finish before asserting
+    fixture.detectChanges()
+  }
+
+  beforeEach(waitForAsync(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TestComponent, CustomInputComponent],
+      imports: [
+        CommonModule,
+        FormsModule,
+        BrowserModule,
+        ReactiveFormsModule,
+        NggvInputMaskModule.forRoot({ isAsync: true }),
+      ],
+      providers: [
+        InputMaskConfig,
+        { provide: PLATFORM_ID, useValue: 'browser' },
+        {
+          provide: INPUT_MASK_CONFIG,
+          useClass: InputMaskConfig,
+        },
+        {
+          provide: NG_VALUE_ACCESSOR,
+          useExisting: forwardRef(() => NggvInputMaskDirective),
+          multi: true,
+        },
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(TestComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  }))
+
+  it('should get the instance', () => {
+    expect(component).toBeDefined()
+  })
+
+  it('should update the UI value as per mask', () => {
+    const dateInput = inputField('.date')
+    updateInput(dateInput, '28021988')
+    expect(dateInput.value).toEqual('28/02/1988')
+
+    updateInput('.ip', '111111111111')
+    expect(component.ipFC.value).toEqual('111.111.111.111')
+  })
+
+  it('should update the control value as per mask parser', () => {
+    updateInput('.date', '28021988')
+    expect(component.dateFC.value).toEqual(new Date(1988, 1, 28))
+  })
+
+  it('should keep the existing validators', () => {
+    expect(component.dateFC.invalid).toBeTruthy()
+    expect(component.dateFC.errors).toHaveProperty('required')
+    expect(component.dateFC.errors).not.toHaveProperty('invalidformat')
+
+    updateInput('.date', '28')
+    expect(component.dateFC.invalid).toBeTruthy()
+    expect(component.dateFC.errors).not.toHaveProperty('required')
+    expect(component.dateFC.errors).toHaveProperty('invalidformat')
+  })
+
+  it('should make form control invalid for non-compliant value', () => {
+    updateInput('.date', '28')
+    expect(component.dateFC.invalid).toBeTruthy()
+    updateInput('.ip', '1')
+    expect(component.ipFC.invalid).toBeTruthy()
+  })
+
+  it('should render with initial value', () => {
+    const initDateInput = inputField('.initDate')
+    expect(initDateInput.value).toEqual('28/02/1988')
+  })
+
+  it('should update the non-native UI value as per mask', () => {
+    const customInput = inputField('.nggv-lib-custom-input')
+    updateInput(customInput, '28021988')
+    expect(customInput.value).toEqual('28/02/1988')
+  })
+
+  it('should update the non-native control value as per mask parser', () => {
+    updateInput('.nggv-lib-custom-input', '28021988')
+    expect(component.dateFCCustom.value).toEqual(new Date(1988, 1, 28))
+  })
+
+  it('should make non-native form control invalid for non-compliant value', () => {
+    updateInput('.nggv-lib-custom-input', '28')
+    expect(component.dateFCCustom.invalid).toBeTruthy()
+  })
+
+  it('should render non-native with initial value', () => {
+    component.dateFCCustom.setValue('28/02/1988')
+    const input = inputField('.nggv-lib-custom-input')
+    expect(input.value).toEqual('28/02/1988')
+  })
+
+  it('should capture the input asynchronously', async () => {
+    component.isAsync = true
+    fixture.detectChanges()
+
+    let input = inputField('.nggv-lib-custom-input')
+    expect(input).toBeNull()
+
+    component.isAsync = false
+    fixture.detectChanges()
+
+    await new Promise((r) => setTimeout(r, 1000))
+
+    input = inputField('.nggv-lib-custom-input')
+    component.dateFCCustom.setValue('28/02/1988')
+    expect(input.value).toEqual('28/02/1988')
+  })
+
+  it('should disable the input if the disabled property was provided through a FormControl options', () => {
+    expect(inputField('.phone')).toHaveProperty('disabled')
+    component.phoneFC.enable()
+    expect(inputField('.phone').disabled).toStrictEqual(false)
+  })
+})
+
+describe('[NggvInputMask] -> InputMaskDirective -> Change detection', () => {
+  @Component({
+    template: `
+      <input class="ip" [nggvInputMask]="ipAddressMask" [formControl]="ipFC" />
+    `,
+  })
+  class ChangeDetectionTestComponent {
+    ipAddressMask = createMask({ alias: 'ip' })
+    ipFC = new FormControl('')
+  }
+
+  const inputField = (selector: string): HTMLInputElement =>
+    fixture.debugElement.nativeElement.querySelector(selector)
+
+  let component: ChangeDetectionTestComponent
+  let fixture: ComponentFixture<ChangeDetectionTestComponent>
+
+  beforeEach(waitForAsync(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ChangeDetectionTestComponent],
+      imports: [
+        CommonModule,
+        FormsModule,
+        BrowserModule,
+        ReactiveFormsModule,
+        NggvInputMaskModule.forRoot({ isAsync: true }),
+      ],
+      providers: [
+        InputMaskConfig,
+        { provide: PLATFORM_ID, useValue: 'browser' },
+        {
+          provide: INPUT_MASK_CONFIG,
+          useClass: InputMaskConfig,
+        },
+        {
+          provide: NG_VALUE_ACCESSOR,
+          useExisting: forwardRef(() => NggvInputMaskDirective),
+          multi: true,
+        },
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(ChangeDetectionTestComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  }))
+
+  it('should not run change detections when `mouseenter`, `mouseleave` and `click` events are fired on the input', async () => {
+    // Arrange
+    const appRef = TestBed.inject(ApplicationRef)
+    const input = inputField('input')
+
+    appRef.tick = jest.fn(() => {
+      // Empty function
+    })
+
+    // Act
+    // Caretaker note: `spectator.dispatchMouseEvent` is not used here explicitly
+    // since it runs `detectChanges()` internally.
+    input.dispatchEvent(new MouseEvent('mouseenter'))
+    input.dispatchEvent(new MouseEvent('mouseleave'))
+    input.dispatchEvent(new MouseEvent('click'))
+    // Assert
+    expect(appRef.tick).toHaveBeenCalledTimes(0)
+  })
+})

package/src/v-angular/input-mask/input-mask.directive.ts

@@ -0,0 +1,208 @@
+import { isPlatformServer } from '@angular/common'
+import {
+  AfterViewInit,
+  Directive,
+  ElementRef,
+  HostListener,
+  Inject,
+  Input,
+  NgZone,
+  OnDestroy,
+  OnInit,
+  Optional,
+  PLATFORM_ID,
+  Renderer2,
+  Self,
+} from '@angular/core'
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  NgControl,
+  Validator,
+} from '@angular/forms'
+import _Inputmask from 'inputmask'
+
+import type Inputmask from 'inputmask'
+
+import { INPUT_MASK_CONFIG, InputMaskConfig } from './config'
+
+import type { InputmaskOptions } from './input-mask.types'
+
+const InputmaskConstructor =
+  (_Inputmask as unknown as { default?: Inputmask.Static }).default ||
+  _Inputmask
+
+@Directive({
+  selector: '[nggvInputMask]',
+})
+export class NggvInputMaskDirective<T = any>
+  implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor, Validator
+{
+  /** Input settings of directive */
+  @Input() nggvInputMask: InputmaskOptions<T> = {}
+
+  inputMaskPlugin: Inputmask.Instance | undefined
+  nativeInputElement: HTMLInputElement | undefined
+  defaultInputMaskConfig = new InputMaskConfig()
+
+  private mutationObserver: MutationObserver | undefined
+
+  constructor(
+    @Optional() @Self() public ngControl: NgControl,
+    @Inject(INPUT_MASK_CONFIG) config: InputMaskConfig,
+    @Inject(PLATFORM_ID) private platformId: string,
+    private elementRef: ElementRef<HTMLInputElement | any>,
+    private renderer: Renderer2,
+    private ngZone: NgZone,
+  ) {
+    if (this.ngControl) {
+      this.ngControl.valueAccessor = this
+    }
+    this.setNativeInputElement(config)
+  }
+
+  @HostListener('input', ['$event.target.value'])
+  onInput = (_: any) => {
+    // Empty method
+  }
+
+  @HostListener('blur', ['$event.target.value'])
+  onTouched = (_: any) => {
+    // Empty method
+  }
+
+  @HostListener('keyup', ['$event'])
+  onKeyUp(event: KeyboardEvent) {
+    // Trigger "onInput" when pressing delete or backspace, when input is focused
+    if (['Delete', 'Backspace'].includes(event.key)) {
+      this.elementRef.nativeElement.dispatchEvent(
+        new Event('input', {
+          bubbles: true,
+          cancelable: true,
+        }),
+      )
+    }
+  }
+
+  ngOnInit() {
+    if (this.control) {
+      this.control.setValidators(
+        this.control.validator
+          ? [this.control.validator, this.validate]
+          : [this.validate],
+      )
+
+      this.control.updateValueAndValidity()
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.inputMaskPlugin?.remove()
+    this.mutationObserver?.disconnect()
+  }
+
+  initInputMask() {
+    if (
+      isPlatformServer(this.platformId) ||
+      !this.nativeInputElement ||
+      !Object.keys(this.nggvInputMask ?? {}).length
+    ) {
+      return
+    }
+
+    this.inputMaskPlugin = this.ngZone.runOutsideAngular(() =>
+      new InputmaskConstructor(this.inputMaskOptions).mask(
+        this.nativeInputElement as HTMLInputElement,
+      ),
+    )
+
+    if (this.control) {
+      setTimeout(() => {
+        this.control!.updateValueAndValidity()
+      })
+    }
+  }
+
+  ngAfterViewInit() {
+    this.initInputMask()
+  }
+
+  get inputMaskOptions(): Inputmask.Options {
+    const { parser, ...options } = this.nggvInputMask
+    return options
+  }
+
+  writeValue(value: string): void {
+    if (this.nativeInputElement) {
+      this.renderer.setProperty(this.nativeInputElement, 'value', value ?? '')
+    }
+  }
+
+  registerOnChange(fn: (_: T | null) => void): void {
+    // Use injected parser from settings to modify value
+    // of users desire
+    this.onInput = (value) => {
+      const parser = this.nggvInputMask?.parser
+      const newValue = parser && value ? parser(value) : value
+      fn(newValue)
+    }
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn
+  }
+
+  validate = (control: AbstractControl): { [key: string]: any } | null =>
+    !control.value || !this.inputMaskPlugin || this.inputMaskPlugin.isValid()
+      ? null
+      : { invalidformat: true }
+
+  setDisabledState(disabled: boolean): void {
+    if (this.nativeInputElement) {
+      this.renderer.setProperty(this.nativeInputElement, 'disabled', disabled)
+    }
+  }
+
+  private get control(): AbstractControl | null | undefined {
+    return this.ngControl?.control
+  }
+
+  private setNativeInputElement(config: InputMaskConfig) {
+    if (this.elementRef.nativeElement.tagName === 'INPUT') {
+      this.nativeInputElement = this.elementRef.nativeElement
+    } else {
+      this.defaultInputMaskConfig = {
+        ...this.defaultInputMaskConfig,
+        ...config,
+      }
+      if (this.defaultInputMaskConfig.isAsync) {
+        // Create an observer instance linked to the callback function
+        this.mutationObserver = new MutationObserver((mutationsList) => {
+          for (const mutation of mutationsList) {
+            if (mutation.type === 'childList') {
+              const nativeInputElement =
+                this.elementRef.nativeElement.querySelector(
+                  this.defaultInputMaskConfig.inputSelector,
+                )
+              if (nativeInputElement) {
+                this.nativeInputElement = nativeInputElement
+                this.mutationObserver?.disconnect()
+                this.initInputMask()
+              }
+            }
+          }
+        })
+
+        // Start observing the target node for configured mutations
+        this.mutationObserver.observe(this.elementRef.nativeElement, {
+          childList: true,
+          subtree: true,
+        })
+      } else {
+        this.nativeInputElement = this.elementRef.nativeElement.querySelector(
+          this.defaultInputMaskConfig.inputSelector,
+        )
+      }
+    }
+  }
+}

package/src/v-angular/input-mask/input-mask.globals.ts

@@ -0,0 +1,30 @@
+// We must force tsc to interpret this file as a module, resolves
+// "Augmentations for the global scope can only be directly nested in external modules or ambient module declarations."
+export {}
+
+declare global {
+  interface Window {
+    /** Counter for unique identifiers */
+    nggv: {
+      ids: { [namespace: string]: number; default: number }
+      nextId: (namespace?: string) => string
+    }
+  }
+}
+
+;(() => {
+  // Make sure there is an incremental ID each component can use
+  if (typeof window !== 'undefined' && !window.nggv) {
+    window.nggv = {
+      ids: { default: -1 },
+      nextId(namespace = 'default'): string {
+        let id = this.ids[namespace] || 0
+        if (typeof this.ids[namespace] === 'number') id++
+        this.ids[namespace] = id
+        return namespace === 'default'
+          ? `nggv-${id}`
+          : `nggv-${namespace}-${id}`
+      },
+    }
+  }
+})()