@acpaas-ui/ngx-forms 6.1.9 → 6.1.10

package/src/lib/timepicker/classes/timepicker.validators.ts

@@ -0,0 +1,61 @@
+import { AbstractControl, ValidatorFn } from '@angular/forms';
+
+export class TimePickerValidators {
+  // time `hh:mm` 24h format
+  public static minTime(time: string): ValidatorFn {
+    const validator = (control: AbstractControl): { [key: string]: any } => {
+      const splittedControlValue = control.value.split(':');
+      const controlHours = parseInt(splittedControlValue[0], 10);
+      const controlMinutes = parseInt(splittedControlValue[1], 10);
+      const splittedMinTime = time.split(':');
+      const minHours = parseInt(splittedMinTime[0], 10);
+      const minMinutes = parseInt(splittedMinTime[1], 10);
+
+      // Don't throw error --> use Validator.required
+      if (isNaN(controlHours) || isNaN(controlMinutes) || isNaN(minHours) || isNaN(minMinutes)) {
+        return null;
+      }
+
+      if (minHours < controlHours) {
+        return null;
+      }
+
+      if (minHours === controlHours && minMinutes <= controlMinutes) {
+        return null;
+      }
+
+      return { minTime: { value: control.value } };
+    };
+
+    return validator;
+  }
+
+  // time `hh:mm` 24h format
+  public static maxTime(time: string): ValidatorFn {
+    const validator = (control: AbstractControl): { [key: string]: any } => {
+      const splittedControlValue = control.value.split(':');
+      const controlHours = parseInt(splittedControlValue[0], 10);
+      const controlMinutes = parseInt(splittedControlValue[1], 10);
+      const splittedMinTime = time.split(':');
+      const maxHours = parseInt(splittedMinTime[0], 10);
+      const maxMinutes = parseInt(splittedMinTime[1], 10);
+
+      // Don't throw error --> use Validator.required
+      if (isNaN(controlHours) || isNaN(controlMinutes) || isNaN(maxHours) || isNaN(maxMinutes)) {
+        return null;
+      }
+
+      if (maxHours > controlHours) {
+        return null;
+      }
+
+      if (maxHours === controlHours && maxMinutes >= controlMinutes) {
+        return null;
+      }
+
+      return { maxTime: { value: control.value } };
+    };
+
+    return validator;
+  }
+}

package/src/lib/timepicker/components/timepicker/timepicker.component.html

@@ -0,0 +1,37 @@
+<div class="m-timepicker">
+  <div *ngIf="!shouldUseFallback" [class]="'a-input--' + size" [ngClass]="{ 'has-error': hasError }" class="a-input">
+    <label class="a-input__label" for="id" *ngIf="label">{{ label }}</label>
+    <small class="a-input__description" id="id" [ngClass]="{ 'is-error': hasError }" *ngIf="description">
+      <aui-icon *ngIf="hasError" name="ai-alert-triangle"></aui-icon>
+      {{ description }}</small
+    >
+    <input
+      [attr.aria-label]="ariaLabelHours + ':' + ariaLabelMinutes"
+      [formControl]="timeControl"
+      [id]="id"
+      type="time"
+    />
+  </div>
+
+  <div *ngIf="shouldUseFallback" [formGroup]="fallbackForm">
+    <div [class]="'a-input--' + size" [ngClass]="{ 'has-error': hasError }" class="a-input has-icon-right">
+      <div class="a-input__wrapper">
+        <select [attr.aria-label]="ariaLabelHours" [id]="id" formControlName="hours">
+          <option disabled value="null">{{ hoursPlaceholder }}</option>
+          <option *ngFor="let hour of hours" [value]="hour">{{ hour }}</option>
+        </select>
+        <aui-icon name="ai-arrow-down-1"></aui-icon>
+      </div>
+    </div>
+
+    <div [class]="'a-input--' + size" [ngClass]="{ 'has-error': hasError }" class="a-input has-icon-right">
+      <div class="a-input__wrapper">
+        <select [attr.aria-label]="ariaLabelMinutes" formControlName="minutes">
+          <option disabled value="null">{{ minutesPlaceholder }}</option>
+          <option *ngFor="let minute of minutes" [value]="minute">{{ minute }}</option>
+        </select>
+        <aui-icon name="ai-arrow-down-1"></aui-icon>
+      </div>
+    </div>
+  </div>
+</div>

package/src/lib/timepicker/components/timepicker/timepicker.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/src/lib/timepicker/components/timepicker/timepicker.component.spec.ts

@@ -0,0 +1,161 @@
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { IconModule } from '@acpaas-ui/ngx-icon';
+
+import { TimepickerComponent } from './timepicker.component';
+
+describe('The Timepicker Component', () => {
+  let comp: TimepickerComponent;
+  let fixture: ComponentFixture<TimepickerComponent>;
+
+  // waitForAsync beforeEach
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [ReactiveFormsModule, IconModule],
+      declarations: [TimepickerComponent],
+      providers: [],
+    }).compileComponents();
+  }));
+
+  // synchronous beforeEach
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TimepickerComponent);
+    comp = fixture.componentInstance;
+    comp.ngOnInit();
+    comp.registerOnChange((model) => {});
+  });
+
+  describe('init', () => {
+    it('should calc hours and minutes for fallback timepicker', () => {
+      expect(comp.hours).toEqual([
+        '00',
+        '01',
+        '02',
+        '03',
+        '04',
+        '05',
+        '06',
+        '07',
+        '08',
+        '09',
+        '10',
+        '11',
+        '12',
+        '13',
+        '14',
+        '15',
+        '16',
+        '17',
+        '18',
+        '19',
+        '20',
+        '21',
+        '22',
+        '23',
+      ]); // eslint-disable-line max-len
+      expect(comp.minutes).toEqual([
+        '00',
+        '01',
+        '02',
+        '03',
+        '04',
+        '05',
+        '06',
+        '07',
+        '08',
+        '09',
+        '10',
+        '11',
+        '12',
+        '13',
+        '14',
+        '15',
+        '16',
+        '17',
+        '18',
+        '19',
+        '20',
+        '21',
+        '22',
+        '23',
+        '24',
+        '25',
+        '26',
+        '27',
+        '28',
+        '29',
+        '30',
+        '31',
+        '32',
+        '33',
+        '34',
+        '35',
+        '36',
+        '37',
+        '38',
+        '39',
+        '40',
+        '41',
+        '42',
+        '43',
+        '44',
+        '45',
+        '46',
+        '47',
+        '48',
+        '49',
+        '50',
+        '51',
+        '52',
+        '53',
+        '54',
+        '55',
+        '56',
+        '57',
+        '58',
+        '59',
+      ]); // eslint-disable-line max-len
+    });
+  });
+
+  describe('native timepicker', () => {
+    it('should disable native form control', () => {
+      comp.setDisabledState(true);
+      expect(comp.timeControl.disabled).toBeTruthy();
+    });
+
+    it('should enable native form control', () => {
+      comp.setDisabledState(false);
+      expect(comp.timeControl.enabled).toBeTruthy();
+    });
+
+    it('should write value to native form control', () => {
+      comp.writeValue('20:30');
+      expect(comp.timeControl.value).toEqual('20:30');
+    });
+  });
+
+  describe('fallback timepicker', () => {
+    it('should disable fallback control', () => {
+      comp.setDisabledState(true);
+      expect(comp.fallbackForm.disabled).toBeTruthy();
+    });
+
+    it('should enable fallback control', () => {
+      comp.setDisabledState(false);
+      expect(comp.fallbackForm.enabled).toBeTruthy();
+    });
+
+    it('should write value to fallback control', () => {
+      comp.writeValue('20:30');
+      expect(comp.fallbackForm.value).toEqual({ hours: '20', minutes: '30' });
+    });
+
+    it('should update model if value changes', () => {
+      spyOn(comp, 'updateModel');
+      comp.fallbackForm.get('hours').setValue('20');
+      comp.fallbackForm.get('minutes').setValue('30');
+      expect(comp.updateModel).toHaveBeenCalledWith('20:30');
+    });
+  });
+});

package/src/lib/timepicker/components/timepicker/timepicker.component.ts

@@ -0,0 +1,128 @@
+import { ChangeDetectionStrategy, Component, forwardRef, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import {
+  ControlValueAccessor,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
+  NG_VALUE_ACCESSOR,
+} from '@angular/forms';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { DateHelper } from '@acpaas-ui/ngx-utils';
+
+import { TimepickerInputSize } from '../../types/timepicker.types';
+
+@Component({
+  selector: 'aui-timepicker',
+  templateUrl: './timepicker.component.html',
+  styleUrls: ['./timepicker.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TimepickerComponent), // eslint-disable-line @angular-eslint/no-forward-ref
+      multi: true,
+    },
+  ],
+})
+export class TimepickerComponent implements OnInit, OnDestroy, ControlValueAccessor {
+  @Input() public id = 'aui-timepicker-' + Math.random().toString(36).substring(2);
+  @Input() public hoursPlaceholder = 'uu';
+  @Input() public minutesPlaceholder = 'mm';
+  @Input() public hasError = false;
+  @Input() public size: TimepickerInputSize = TimepickerInputSize.Auto;
+  @Input() public ariaLabelHours = 'Uur';
+  @Input() public ariaLabelMinutes = 'Minuten';
+  @Input() public label: string;
+  @Input() public description: string;
+
+  public shouldUseFallback = false;
+  public minutes: string[] = [];
+  public hours: string[] = [];
+  public updateModel: (value: string) => any;
+
+  public timeControl = new UntypedFormControl();
+  public fallbackForm: UntypedFormGroup;
+
+  private componentDestroyed$: Subject<boolean> = new Subject<boolean>();
+
+  constructor(private formBuilder: UntypedFormBuilder, private renderer: Renderer2) {}
+
+  public ngOnInit() {
+    this.shouldUseFallback = this.supportsNativeTimepicker();
+    this.minutes = this.getMinutes();
+    this.hours = this.getHours();
+
+    this.fallbackForm = this.formBuilder.group({
+      hours: null,
+      minutes: null,
+    });
+
+    this.fallbackForm.valueChanges.pipe(takeUntil(this.componentDestroyed$)).subscribe((formData) => {
+      if (formData.hours && formData.minutes) {
+        this.updateModel(`${formData.hours}:${formData.minutes}`);
+      } else {
+        this.updateModel('');
+      }
+    });
+
+    this.timeControl.valueChanges.pipe(takeUntil(this.componentDestroyed$)).subscribe((time) => {
+      this.updateModel(time);
+    });
+  }
+
+  public ngOnDestroy() {
+    this.componentDestroyed$.next(true);
+    this.componentDestroyed$.complete();
+  }
+
+  public writeValue(value: any): void {
+    this.timeControl.setValue(value, { emitEvent: false });
+
+    if (value) {
+      const splitted = value.split(':');
+      this.fallbackForm.get('hours').setValue(splitted[0], { emitEvent: false });
+      this.fallbackForm.get('minutes').setValue(splitted[1], { emitEvent: false });
+    }
+  }
+
+  public registerOnChange(onChange): void {
+    this.updateModel = onChange;
+  }
+
+  public registerOnTouched(): void {}
+
+  public setDisabledState(isDisabled: boolean) {
+    if (isDisabled) {
+      this.timeControl.disable({ emitEvent: false });
+      this.fallbackForm.disable({ emitEvent: false });
+    } else {
+      this.timeControl.enable({ emitEvent: false });
+      this.fallbackForm.enable({ emitEvent: false });
+    }
+  }
+
+  private supportsNativeTimepicker(): boolean {
+    const element = this.renderer.createElement('input');
+    element.type = 'time';
+
+    return element.type === 'text';
+  }
+
+  private getMinutes(): string[] {
+    return Array(60)
+      .fill('')
+      .map((value, index) => {
+        return DateHelper.addLeadingZero(index);
+      });
+  }
+
+  private getHours(): string[] {
+    return Array(24)
+      .fill('')
+      .map((value, index) => {
+        return DateHelper.addLeadingZero(index);
+      });
+  }
+}

package/src/lib/timepicker/public-api.ts

@@ -0,0 +1,4 @@
+export { TimePickerValidators } from './classes/timepicker.validators';
+export { TimepickerComponent } from './components/timepicker/timepicker.component';
+export { TimepickerInputSize } from './types/timepicker.types';
+export { TimepickerModule } from './timepicker.module';

package/src/lib/timepicker/timepicker.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { IconModule } from '@acpaas-ui/ngx-icon';
+import { TimepickerComponent } from './components/timepicker/timepicker.component';
+
+@NgModule({
+  imports: [ReactiveFormsModule, CommonModule, IconModule],
+  declarations: [TimepickerComponent],
+  exports: [TimepickerComponent],
+  providers: [],
+})
+export class TimepickerModule {}

package/src/lib/timepicker/types/timepicker.types.ts

@@ -0,0 +1,5 @@
+export enum TimepickerInputSize {
+  Auto = 'auto',
+  Small = 'small',
+  Large = 'large',
+}