@acpaas-ui/ngx-forms 6.1.9 → 6.1.10

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

@@ -0,0 +1,251 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  forwardRef,
+  Inject,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import {
+  ControlValueAccessor,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+} from '@angular/forms';
+import { DateHelper, DateRange } from '@acpaas-ui/ngx-utils';
+import { TZDate } from '@date-fns/tz';
+import { FlyoutDirective } from '@acpaas-ui/ngx-flyout';
+import {
+  CALENDAR_DEFAULT_MONTH_LABELS,
+  CALENDAR_DEFAULT_WEEKDAY_LABELS,
+  CALENDAR_MONTH_LABELS,
+  CALENDAR_WEEKDAY_LABELS,
+  CalendarService,
+  DatepickerResult,
+  WeekdayLabelsConfig,
+  MonthLabelsConfig,
+} from '@acpaas-ui/ngx-calendar';
+
+import {
+  DATEPICKER_SEPARATOR_CHAR,
+  DATEPICKER_DEFAULT_ERROR_LABELS,
+  DATEPICKER_ERROR_LABELS,
+} from '../../datepicker.conf';
+import { DatepickerValidationErrors } from '../../types/datepicker.types';
+import { Interval, IntervalBuilder } from '@acpaas-ui/ngx-utils';
+
+@Component({
+  selector: 'aui-datepicker',
+  templateUrl: './datepicker.component.html',
+  styleUrls: ['./datepicker.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DatepickerComponent), // eslint-disable-line @angular-eslint/no-forward-ref
+      multi: true,
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => DatepickerComponent), // eslint-disable-line @angular-eslint/no-forward-ref
+      multi: true,
+    },
+  ],
+})
+export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, ControlValueAccessor {
+  @ViewChild(FlyoutDirective, { static: true }) flyout: FlyoutDirective;
+  @Input() id: string;
+  @Input() name: string;
+  @Input() placeholder = 'dd/mm/yyyy';
+  @Input() label: string;
+  @Input() description: string;
+  @Input() range: DateRange;
+  @Input()
+  min: Date | null;
+  @Input()
+  max: Date | null;
+  @Input() autocomplete: 'off';
+  @Input() weekdayLabels: WeekdayLabelsConfig;
+  @Input() monthLabels: MonthLabelsConfig;
+  @Input() ariaOpenDatepickerLabel = 'Open kalender';
+
+  // eslint-disable-next-line @angular-eslint/no-output-native
+  @Output() blur = new EventEmitter<Event>();
+
+  public formControl: UntypedFormControl;
+  public selectedDate: Date;
+  public isDisabled = false;
+  public interval: Interval.IInterval<Date>;
+
+  private componentDestroyed$: Subject<boolean> = new Subject<boolean>();
+
+  constructor(
+    @Inject(CALENDAR_MONTH_LABELS) private moduleMonthLabels = CALENDAR_DEFAULT_MONTH_LABELS,
+    @Inject(CALENDAR_WEEKDAY_LABELS) private moduleWeekdayLabels = CALENDAR_DEFAULT_WEEKDAY_LABELS,
+    @Inject(DATEPICKER_ERROR_LABELS) private errorLabels = DATEPICKER_DEFAULT_ERROR_LABELS,
+    public calendarService: CalendarService,
+    private formBuilder: UntypedFormBuilder,
+    private ref: ChangeDetectorRef
+  ) {}
+
+  public ngOnInit(): void {
+    this.weekdayLabels = this.weekdayLabels || this.moduleWeekdayLabels;
+    this.monthLabels = this.monthLabels || this.moduleMonthLabels;
+    this.createInterval();
+    this.formControl = this.formBuilder.control({ value: '', disabled: this.isDisabled });
+    this.formControl.valueChanges.pipe(takeUntil(this.componentDestroyed$)).subscribe((value) => {
+      if (value) {
+        const date = DateHelper.parseDate(value, 'dd/MM/yyyy');
+        if (date instanceof Date) {
+          this.selectedDate = date;
+          const brusselsDate = new TZDate(date, 'Europe/Brussels');
+          const year = brusselsDate.getFullYear();
+          const month = brusselsDate.getMonth();
+          const day = brusselsDate.getDate();
+          this.onChange(DateHelper.toUtcMidnightInBrussels(year, month, day));
+        } else if (typeof date === 'string') {
+          this.onChange(value);
+        } else {
+          this.onChange(value);
+        }
+      } else {
+        this.selectedDate = null;
+        this.onChange('');
+      }
+    });
+  }
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    if (changes.min || changes.max) {
+      this.createInterval();
+    }
+  }
+
+  public ngOnDestroy(): void {
+    this.componentDestroyed$.next(true);
+    this.componentDestroyed$.complete();
+  }
+
+  private createInterval() {
+    if (!this.min && !this.max) {
+      return;
+    }
+    // Create an interval if min/max is filled in
+    this.interval = IntervalBuilder.dateInterval(
+      this.min ? new Date(this.min) : null,
+      this.max ? new Date(this.max) : null
+    )
+      .not()
+      .build();
+  }
+
+  public writeValue(value: string | Date): void {
+    if (typeof value === 'string') {
+      if (this.isISODateFormat(value)) {
+        this.selectedDate = DateHelper.parseDate(value) as Date;
+      } else {
+        const parsed = DateHelper.parseDate(value, 'dd/MM/yyyy');
+        this.selectedDate = parsed instanceof Date ? parsed : null;
+      }
+    } else if (value instanceof Date) {
+      this.selectedDate = value;
+    } else {
+      this.selectedDate = null;
+    }
+
+    const dateString = this.selectedDate ? this.formatDate(this.selectedDate) : '';
+    this.formControl.setValue(dateString);
+  }
+
+  public registerOnChange(onChange: (res: any) => void): void {
+    this.onChange = onChange;
+  }
+
+  public registerOnTouched(onTouched: (_: any) => void): void {
+    this.onTouched = onTouched;
+  }
+
+  public setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+
+    if (this.formControl) {
+      if (isDisabled && this.formControl.enabled) {
+        this.formControl.disable();
+      } else if (!isDisabled && this.formControl.disabled) {
+        this.formControl.enable();
+      }
+    }
+
+    this.ref.markForCheck();
+  }
+
+  public selectDateFromCalendar(result: DatepickerResult): void {
+    if (result.complete) {
+      this.formControl.setValue(this.formatDate(result.date));
+      this.flyout.close();
+    }
+  }
+
+  public formatDate(date: Date): string {
+    return DateHelper.formatDate(date, 'DD/MM/YYYY', {
+      leadingZero: true,
+      monthLabels: this.monthLabels,
+      weekdayLabels: this.weekdayLabels,
+    });
+  }
+
+  public validate(ctrl: UntypedFormControl): DatepickerValidationErrors {
+    // no error on empty value (add required validator in app)
+    if (ctrl.value === '' || ctrl.value === null) {
+      return null;
+    }
+
+    // throw format error if no valid date was provided
+    const date = DateHelper.parseDate(ctrl.value);
+    if (!date) {
+      return {
+        format: this.errorLabels.ERRORS_INVALID_DATE,
+      };
+    }
+
+    // no error if valid date an no range provided
+    if (!this.range || !this.range.length) {
+      return null;
+    }
+
+    // throw error when out of range
+    const range = this.calendarService.getRangeForDate(date, this.range);
+
+    return range.indexOf(date.getDate()) >= 0
+      ? {
+          range: this.errorLabels.ERRORS_INVALID_RANGE,
+        }
+      : null;
+  }
+
+  public handleBlur(e: Event): void {
+    this.blur.emit(e);
+    this.onTouched(e);
+  }
+
+  private onChange: (res: any) => void = () => undefined;
+
+  private onTouched: (_: any) => void = () => undefined;
+
+  private isISODateFormat(value: string) {
+    if (typeof value !== 'string') {
+      return false;
+    }
+    return value.match(/\d{4}-\d{2}-\d{2}T.*/);
+  }
+}

package/src/lib/datepicker/datepicker.conf.ts

@@ -0,0 +1,11 @@
+import { InjectionToken } from '@angular/core';
+import { DatepickerErrorLabels } from './types/datepicker.types';
+
+export const DATEPICKER_ERROR_LABELS = new InjectionToken<DatepickerErrorLabels>('errorLabels');
+
+export const DATEPICKER_DEFAULT_ERROR_LABELS = {
+  ERRORS_INVALID_DATE: 'INVALID_DATE',
+  ERRORS_INVALID_RANGE: 'INVALID_RANGE',
+};
+
+export const DATEPICKER_SEPARATOR_CHAR = '/';

package/src/lib/datepicker/datepicker.module.ts

@@ -0,0 +1,50 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+import { FlyoutModule } from '@acpaas-ui/ngx-flyout';
+import {
+  CALENDAR_DEFAULT_MONTH_LABELS,
+  CALENDAR_DEFAULT_WEEKDAY_LABELS,
+  CALENDAR_MONTH_LABELS,
+  CALENDAR_WEEKDAY_LABELS,
+  CalendarModule,
+} from '@acpaas-ui/ngx-calendar';
+import { IconModule } from '@acpaas-ui/ngx-icon';
+
+import { DatepickerComponent } from './components/datepicker/datepicker.component';
+import { DATEPICKER_DEFAULT_ERROR_LABELS, DATEPICKER_ERROR_LABELS } from './datepicker.conf';
+import { DatepickerErrorLabels } from './types/datepicker.types';
+
+@NgModule({
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, CalendarModule, IconModule, FlyoutModule],
+  declarations: [DatepickerComponent],
+  exports: [DatepickerComponent],
+  providers: [
+    {
+      provide: CALENDAR_WEEKDAY_LABELS,
+      useValue: CALENDAR_DEFAULT_WEEKDAY_LABELS,
+    },
+    { provide: CALENDAR_MONTH_LABELS, useValue: CALENDAR_DEFAULT_MONTH_LABELS },
+    {
+      provide: DATEPICKER_ERROR_LABELS,
+      useValue: DATEPICKER_DEFAULT_ERROR_LABELS,
+    },
+  ],
+})
+export class DatepickerModule {
+  static forChild(
+    weekdayLabels: string[],
+    monthLabels: string[],
+    errorLabels: DatepickerErrorLabels
+  ): ModuleWithProviders<DatepickerModule> {
+    return {
+      ngModule: DatepickerModule,
+      providers: [
+        { provide: CALENDAR_WEEKDAY_LABELS, useValue: weekdayLabels },
+        { provide: CALENDAR_MONTH_LABELS, useValue: monthLabels },
+        { provide: DATEPICKER_ERROR_LABELS, useValue: errorLabels },
+      ],
+    };
+  }
+}

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

@@ -0,0 +1,8 @@
+export { DatepickerComponent } from './components/datepicker/datepicker.component';
+export { DatepickerErrorLabels, DatepickerValidationErrors } from './types/datepicker.types';
+export {
+  DATEPICKER_DEFAULT_ERROR_LABELS,
+  DATEPICKER_ERROR_LABELS,
+  DATEPICKER_SEPARATOR_CHAR,
+} from './datepicker.conf';
+export { DatepickerModule } from './datepicker.module';

package/src/lib/datepicker/types/datepicker.types.ts

@@ -0,0 +1,8 @@
+export interface DatepickerValidationErrors {
+  [key: string]: any;
+}
+
+export interface DatepickerErrorLabels {
+  ERRORS_INVALID_DATE?: string;
+  ERRORS_INVALID_RANGE?: string;
+}

package/src/lib/range-slider/README.md

@@ -0,0 +1,56 @@
+# @acpaas-ui/ngx-forms
+
+Use the range slider as stand alone component or in a form.
+
+## Usage
+
+```typescript
+import { RangeSliderModule } from '@acpaas-ui/ngx-forms';
+```
+
+## Documentation
+
+Visit our [documentation site](https://antwerp-ui.digipolis.be/) for full how-to docs and guidelines
+
+### API
+
+| Name                                | Default value | Description                                            |
+| ----------------------------------- | ------------- | ------------------------------------------------------ |
+| `@Input() min: number;`             | `0`           | Minimum value on the slider.                           |
+| `@Input() max: number;`             | `100`         | Maximum value on the slider.                           |
+| `@Input() minimalDistance: number;` | `1`           | The minimum interval between the start and end values. |
+| `@Input() step: number;`            | `0`           | The numeric steps shown on the slider.                 |
+| `@Input() labelBefore: string;`     | `''`          | Label before the text on the slider.                   |
+| `@Input() labelAfter: string;`      | `''`          | Label before the text on the slider.                   |
+
+### Example
+
+```typescript
+import { RangeSliderModule } from '@acpaas-ui/ngx-forms';
+
+@NgModule({
+    imports: [
+        RangeSliderModule,
+    ]
+});
+
+export class AppModule {};
+```
+
+```typescript
+public mySlider = {start: 400, end: 500};
+```
+
+```html
+<div class="example">
+  <aui-range-slider></aui-range-slider>
+
+  <aui-range-slider step="20" labelAfter="%"> </aui-range-slider>
+
+  <aui-range-slider [(ngModel)]="mySlider" min="300" max="600" labelBefore="€"> </aui-range-slider>
+</div>
+```
+
+## Contributing
+
+Visit our [Contribution Guidelines](../../../../../CONTRIBUTING.md) for more information on how to contribute.

package/src/lib/range-slider/components/range-slider/range-slider.component.html

@@ -0,0 +1,46 @@
+<div class="a-range-slider">
+  <div class="a-range-slider__labels">
+    <div class="a-range-slider__label">{{ label }}</div>
+  </div>
+  <div class="a-range-slider__inner">
+    <div class="a-range-slider__tickmarks">
+      <div *ngFor="let step of steps; let i = index" class="a-range-slider__tickmark"></div>
+    </div>
+    <div
+      [style.left]="endPercentage ? startPercentage + '%' : false"
+      [style.width]="endPercentage ? endPercentage - startPercentage + '%' : startPercentage + '%'"
+      class="a-range-slider__bar"
+    ></div>
+    <span
+      (blur)="toggleFocus(false, null, $event)"
+      (dragexit)="onMouseUp($event)"
+      (focus)="toggleFocus(true, 'start', $event)"
+      (mousedown)="onMouseDown('start')"
+      (touchstart)="onMouseDown('start')"
+      [style.left]="startPercentage + '%'"
+      class="a-range-slider__handle"
+      [attr.aria-label]="ariaLabelMin"
+      tabindex="0"
+    >
+    </span>
+
+    <span
+      (blur)="toggleFocus(false, null, $event)"
+      (dragexit)="onMouseUp($event)"
+      (focus)="toggleFocus(true, 'end', $event)"
+      (mousedown)="onMouseDown('end')"
+      (touchstart)="onMouseDown('end')"
+      *ngIf="end"
+      [style.left]="endPercentage + '%'"
+      class="a-range-slider__handle"
+      name="a-range-slider__handle__end"
+      [attr.aria-label]="ariaLabelMax"
+      tabindex="0"
+    >
+    </span>
+  </div>
+  <div class="a-range-slider__descriptions">
+    <div class="a-range-slider__description small">{{ labelBefore }}{{ min }}{{ labelAfter }}</div>
+    <div class="a-range-slider__description small">{{ labelBefore }}{{ max }}{{ labelAfter }}</div>
+  </div>
+</div>

package/src/lib/range-slider/components/range-slider/range-slider.component.scss

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+  position: relative;
+
+  &.is-disabled {
+    cursor: not-allowed;
+
+    .m-range-slider__handle:hover {
+      cursor: not-allowed;
+    }
+  }
+}

package/src/lib/range-slider/components/range-slider/range-slider.component.spec.ts

@@ -0,0 +1,216 @@
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+
+import { RangeSliderComponent } from './range-slider.component';
+
+describe('The RangeSlider Component', () => {
+  let comp: RangeSliderComponent;
+  let fixture: ComponentFixture<RangeSliderComponent>;
+  let de: DebugElement;
+  let el: HTMLElement;
+
+  // waitForAsync beforeEach
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [RangeSliderComponent], // declare the test component
+    }).compileComponents(); // compile template and css
+  }));
+
+  // synchronous beforeEach
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RangeSliderComponent);
+
+    comp = fixture.componentInstance; // BannerComponent test instance
+
+    // query for the title <h1> by CSS element selector
+    de = fixture.debugElement;
+    el = de.nativeElement;
+  });
+
+  it('should exist', () => {
+    fixture.detectChanges();
+    expect(el).not.toBeUndefined();
+  });
+
+  it('should write values', () => {
+    spyOn(comp, 'setStart').and.callThrough();
+    comp.writeValue('');
+    expect(comp.setStart).toHaveBeenCalledWith(0);
+    expect(comp.startPercentage).toEqual(0);
+
+    comp.min = 10;
+    comp.max = 50;
+    fixture.detectChanges();
+    comp.writeValue('');
+    expect(comp.setStart).toHaveBeenCalledWith(10);
+    expect(comp.startPercentage).toEqual(0);
+
+    comp.writeValue(30);
+    expect(comp.start).toEqual(30);
+    expect(comp.startPercentage).toEqual(50);
+
+    comp.writeValue({ start: 20 });
+    expect(comp.start).toEqual(20);
+    expect(comp.startPercentage).toEqual(25);
+
+    comp.writeValue({ start: 20, end: 50 });
+    expect(comp.start).toEqual(20);
+    expect(comp.startPercentage).toEqual(25);
+    expect(comp.end).toEqual(50);
+    expect(comp.endPercentage).toEqual(100);
+  });
+
+  it('should round on mouse up', () => {
+    spyOn(comp, 'setStart');
+    comp.active = 'start';
+    comp.click = true;
+    fixture.detectChanges();
+
+    comp.onMouseUp({});
+    expect(comp.setStart).toHaveBeenCalled();
+    spyOn(comp, 'setEnd');
+    comp.active = 'end';
+    fixture.detectChanges();
+
+    comp.onMouseUp({});
+    expect(comp.setEnd).toHaveBeenCalled();
+  });
+
+  it('should not call updateHandle on mouse move if there is no active handle', () => {
+    spyOn(comp, 'updateHandle');
+    comp.onMouseMove({
+      x: 0,
+      preventDefault: () => {
+        return;
+      },
+    } as any);
+    expect(comp.updateHandle).not.toHaveBeenCalled();
+  });
+
+  it('should call updateHandle on mouse move if there is an active handle', () => {
+    spyOn(comp, 'updateHandle');
+    comp.active = 'target';
+    comp.click = true;
+    comp.onMouseMove({
+      x: 0,
+      preventDefault: () => {
+        return;
+      },
+    } as any);
+    expect(comp.updateHandle).toHaveBeenCalled();
+  });
+
+  it('should calculate new percentage', () => {
+    expect(comp.calcPercentage(10, 100, 0)).toEqual(10);
+    expect(comp.calcPercentage(20, 100, 10)).toEqual(10);
+    expect(comp.calcPercentage(10, 100, 30)).toEqual(0);
+    expect(comp.calcPercentage(140, 100, 30)).toEqual(100);
+    expect(comp.calcPercentage(130, 100, 30)).toEqual(100);
+  });
+
+  it('schould activate handle on mouse down', () => {
+    comp.onMouseDown('start');
+    expect(comp.active).toEqual('start');
+  });
+
+  it('should round numbers', () => {
+    expect(comp.round(47, 20, 0)).toBe(40);
+    expect(comp.round(47, 20, 10)).toBe(50);
+    expect(comp.round(47, 0, 0)).toBe(47);
+
+    expect(comp.round(45, 10, 0)).toBe(50);
+    expect(comp.round(46, 10, 0)).toBe(50);
+    expect(comp.round(44, 10, 0)).toBe(40);
+  });
+
+  it('should calculate startPercentage to start', () => {
+    fixture.detectChanges();
+
+    comp.startPercentage = 50;
+    comp.min = 10;
+    comp.max = 50;
+    fixture.detectChanges();
+
+    expect(comp.percentageToStart()).toBe(30);
+  });
+
+  describe('Example with defined start', () => {
+    it('should calculate startPercentage', () => {
+      comp.start = 10;
+      comp.min = 10;
+      comp.max = 50;
+      fixture.detectChanges();
+
+      expect(comp.startPercentage).toBe(0);
+
+      comp.start = 30;
+      fixture.detectChanges();
+      expect(comp.startToPercentage()).toBe(50);
+    });
+  });
+
+  describe('Example with defined end', () => {
+    it('should calculate startPercentage', () => {
+      comp.end = 40;
+      comp.min = 10;
+      comp.max = 50;
+      fixture.detectChanges();
+
+      expect(comp.endPercentage).toBe(75);
+
+      comp.end = 30;
+      fixture.detectChanges();
+      expect(comp.endToPercentage()).toBe(50);
+    });
+
+    it('should keep minimal distance', () => {
+      comp.start = 20;
+      comp.end = 80;
+      comp.min = 0;
+      comp.max = 100;
+      comp.minimalDistance = 20;
+      comp.active = 'end';
+      fixture.detectChanges();
+
+      comp.updateHandle(30);
+      expect(comp.start).toBe(20);
+      expect(comp.startPercentage).toBe(20);
+      expect(comp.end).toBe(40);
+      expect(comp.endPercentage).toBe(40);
+
+      comp.updateHandle(50);
+      expect(comp.start).toBe(20);
+      expect(comp.startPercentage).toBe(20);
+      expect(comp.end).toBe(50);
+      expect(comp.endPercentage).toBe(50);
+
+      comp.active = 'start';
+      fixture.detectChanges();
+
+      comp.updateHandle(45);
+      expect(comp.start).toBe(30);
+      expect(comp.startPercentage).toBe(30);
+      expect(comp.end).toBe(50);
+      expect(comp.endPercentage).toBe(50);
+
+      comp.updateHandle(10);
+      expect(comp.start).toBe(10);
+      expect(comp.startPercentage).toBe(10);
+      expect(comp.end).toBe(50);
+      expect(comp.endPercentage).toBe(50);
+    });
+  });
+
+  describe('Example with steps', () => {
+    beforeEach(() => {
+      comp.min = 10;
+      comp.max = 50;
+      comp.step = 10;
+      fixture.detectChanges();
+    });
+
+    it('should calculate steps', () => {
+      expect(comp.steps).toEqual([0, 10, 20, 30, 40, 50]);
+    });
+  });
+});