@acpaas-ui/ngx-forms 6.1.9 → 6.1.10

package/src/lib/auto-complete/components/auto-complete/auto-complete.component.ts

@@ -0,0 +1,281 @@
+import {
+  Component,
+  ContentChild,
+  ElementRef,
+  EventEmitter,
+  forwardRef,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { get, isEqual } from 'lodash-es';
+import { FlyoutDirective, FlyoutZoneDirective } from '@acpaas-ui/ngx-flyout';
+import { SearchService } from '../../../shared/services/search.service';
+
+@Component({
+  selector: 'aui-auto-complete',
+  styleUrls: ['./auto-complete.component.scss'],
+  templateUrl: './auto-complete.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => AutoCompleteComponent), // eslint-disable-line
+      multi: true,
+    },
+  ],
+})
+export class AutoCompleteComponent implements ControlValueAccessor, OnInit, OnChanges {
+  @Input() id: string;
+  @Input() placeholder: string;
+  @Input() description: string;
+  @Input() inputLabel: string;
+  @Input() results: any[] = []; // The values for the selectable list
+  @Input() data: any[] = []; // The values to search in when remote search is disabled
+  @Input() remote = false; // Disable or enamble remote search
+  @Input() minCharacters = 0;
+  @Input() clearInvalid = false;
+  @Input() searchIncentiveText: string;
+  @Input() loadingText: string;
+  @Input() noResultsText: string;
+  @Input() showAllByDefault = false;
+  @Input() autoComplete = 'off';
+
+  // specify which label/value props to use
+  @Input() label: string;
+  @Input() value: string;
+
+  // Eventemitter for searchvalue (parent object should update the results with this param)
+  @Output() search: EventEmitter<string> = new EventEmitter();
+  // eslint-disable-next-line @angular-eslint/no-output-native
+  @Output() select: EventEmitter<any> = new EventEmitter();
+
+  @ViewChild(FlyoutDirective, { static: true }) flyout: FlyoutDirective;
+  @ViewChild(FlyoutZoneDirective, { static: true }) flyoutZone: FlyoutZoneDirective;
+
+  @ContentChild(TemplateRef, { static: true }) public template: TemplateRef<any>;
+
+  public query = '';
+  public index = -1; // index for active element in selectable list, by default -1 (so it starts in the input field)
+  public selectedItem: any = null; // keep a backup of the selectedItem
+  public searching = false; // track remote search state
+  public focused = false;
+  public isDisabled = false;
+
+  private remoteValue = false;
+
+  constructor(private ref: ElementRef, private searchService: SearchService) {}
+
+  public updateModel = (_: any) => {};
+
+  // CONTROL_VALUE_ACCESSOR interface
+  public writeValue(value = '') {
+    if (this.value) {
+      const selected = this.data.find((item: any) => item[this.value] === value);
+
+      if (selected) {
+        return (this.query = selected[this.label]);
+      }
+
+      if (this.remote && !!value) {
+        this.remoteValue = true;
+      }
+    }
+
+    this.query = value;
+  }
+
+  // CONTROL_VALUE_ACCESSOR interface
+  public registerOnChange(fn) {
+    this.updateModel = fn;
+  }
+
+  // CONTROL_VALUE_ACCESSOR interface
+  public registerOnTouched() {}
+
+  public setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+  }
+
+  public ngOnInit(): void {
+    if (Array.isArray(this.data) && this.data.length > 0 && !this.query && this.showAllByDefault) {
+      this.results = [...this.data];
+    }
+  }
+
+  // OnChanges interface
+  public ngOnChanges(changes: SimpleChanges): void {
+    if (!changes) {
+      return;
+    }
+
+    const newData = get(changes, 'data.currentValue', []);
+    if (!isEqual(newData, get(changes, 'data.previousValue', []))) {
+      if (this.remote) {
+        this.remoteSearch();
+      } else {
+        this.localSearch();
+      }
+    }
+
+    if (changes.results && changes.results.currentValue) {
+      this.searching = false;
+    }
+  }
+
+  public propagateChange(item: any) {
+    this.query = item !== null ? (this.label ? item[this.label] : item) : '';
+    this.select.emit(item);
+
+    if (!item) {
+      return;
+    }
+
+    const key = this.value ? this.value : this.label ? this.label : null;
+    this.updateModel(key ? item[key] || '' : item);
+    this.selectedItem = item;
+  }
+
+  /**
+   * triggers on input value change
+   */
+  public doSearch(): void {
+    this.index = -1; // reset index
+    this.searching = true;
+
+    if (this.remote) {
+      this.search.emit(this.query); // ask for new remote data
+    } else {
+      this.localSearch();
+    }
+
+    this.openFlyout(); // open the flyout when there is a change
+  }
+
+  /**
+   * triggers on selectable-list:select -> onClick event in selectable-list
+   */
+  public onSelect(item: any): void {
+    this.propagateChange(item);
+    this.closeFlyout(); // Close the flyout manually
+  }
+
+  public onFlyoutClosed(): void {
+    // there is only 1 result, select it
+    if (this.index >= 0 && this.results.length === 1) {
+      return this.onSelect(this.results[0]);
+    }
+
+    // there is no query nor selected item, clear the selected item
+    if (!this.query && this.index < 0) {
+      return this.onSelect(null);
+    }
+
+    // reset the query for an invalid query if clearInvalid is true
+    if (this.clearInvalid && this.query && !this.results.length && this.index < 0) {
+      this.query = this.selectedItem ? (this.label ? this.selectedItem[this.label] : this.selectedItem) : '';
+    }
+  }
+
+  public onKeyArrowDown(): void {
+    if (this.index < this.results.length - 1) {
+      this.scrollList(1);
+    }
+
+    this.openFlyout();
+  }
+
+  public onKeyArrowUp(): void {
+    if (this.index >= 0) {
+      this.scrollList(-1);
+    }
+  }
+
+  public onKeyEnter(event: Event): void {
+    event.preventDefault(); // Do not submit form when selecting an item.
+
+    const query = this.index >= 0 ? this.results[this.index] : this.query;
+
+    this.propagateChange(query);
+    this.closeFlyout();
+  }
+
+  public onKeyEscape(): void {
+    this.closeFlyout();
+  }
+
+  public onFocus(): void {
+    this.focused = true;
+    this.openFlyout();
+  }
+
+  public openFlyout(): void {
+    if (this.flyout) {
+      this.flyout.open();
+    }
+  }
+
+  public closeFlyout(): void {
+    if (this.flyout) {
+      this.flyout.close();
+    }
+
+    this.focused = false;
+  }
+
+  public localSearch(): void {
+    this.results = this.searchService.search(this.data, {
+      minLength: this.minCharacters,
+      key: this.label,
+      query: this.query,
+      showAllByDefault: this.showAllByDefault,
+    });
+
+    if (this.results.length === 1 && this.query === this.results[0][this.label]) {
+      this.index = 0;
+    }
+
+    this.searching = false;
+  }
+
+  public remoteSearch(): void {
+    if (!this.remoteValue || !this.data) {
+      return;
+    }
+
+    const selected = this.data.find((item: any) => {
+      if (this.value) {
+        return item[this.value] === this.query;
+      }
+
+      return item === this.query;
+    });
+
+    if (selected) {
+      this.query = this.label ? selected[this.label] : selected;
+    } else {
+      this.query = '';
+    }
+
+    this.remoteValue = false;
+  }
+
+  public scrollList(factor: number): void {
+    this.index += factor;
+
+    if (!this.flyoutZone) {
+      return;
+    }
+
+    const liItems = this.flyoutZone.element.getElementsByTagName('li');
+    const liHeight = liItems[1] ? liItems[1].offsetHeight : liItems[0].offsetHeight;
+    const zoneHeight = this.flyoutZone.element.offsetHeight;
+    const offset = zoneHeight / liHeight / 2;
+
+    this.flyoutZone.element.scrollTop = this.index * liHeight - offset * liHeight;
+  }
+}

package/src/lib/auto-complete/public-api.ts

@@ -0,0 +1,2 @@
+export { AutoCompleteModule } from './auto-complete.module';
+export { AutoCompleteComponent } from './components/auto-complete/auto-complete.component';

package/src/lib/datepicker/README.md

@@ -0,0 +1,110 @@
+# @acpaas-ui/ngx-forms
+
+The package creates a custom input component allowing the user to select a date either by input or by picking one in the calendar flyout.
+
+## Usage
+
+```typescript
+import { DatepickerModule } from '@acpaas-ui/ngx-forms';
+```
+
+## Documentation
+
+Visit our [documentation site](https://antwerp-ui.digipolis.be/) for full how-to docs and guidelines
+
+### Flyout module
+
+#### API
+
+| Name                             | Default value  | Description                                                                                                                                                                                                     |
+| -------------------------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@Input() id: string;`           | -              | The id to use on the input field.                                                                                                                                                                               |
+| `@Input() name: string;`         | -              | The name to use on the input field.                                                                                                                                                                             |
+| `@Input() label: string;`        | -              | The label to use on the input field.                                                                                                                                                                            |
+| `@Input() description: string;`  | -              | The description to use on the input field.                                                                                                                                                                      |
+| `@Input() placeholder: string;`  | `'dd/mm/yyyy'` | The placeholder to use on the input field.                                                                                                                                                                      |
+| `@Input() autocomplete: string;` | `'off'`        | Turn the browsers autocompletion on or off.                                                                                                                                                                     |
+| `@Input() range: DateRange;`     | -              | A range of dates or weekdays to disable (see the [@acpaas-ui/js-date-utils](https://github.com/digipolisantwerp/antwerp-ui_js/blob/master/packages/date-utils/README.md) package for more info on date ranges). |
+
+#### Example
+
+You can provide custom month and weekday labels as wel as error labels via the `forChild` method.
+
+```typescript
+import { DatepickerModule } from '@acpaas-ui/ngx-forms';
+
+@NgModule({
+  imports: [
+    DatepickerModule.forChild(
+      ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'],
+      [
+        'Januari',
+        'Februari',
+        'Maart',
+        'April',
+        'Mei',
+        'Juni',
+        'Juli',
+        'Augustus',
+        'September',
+        'Oktober',
+        'November',
+        'December',
+      ],
+      {
+        ERRORS_INVALID_DATE: 'Ongeldige datum.',
+        ERRORS_INVALID_RANGE: 'Deze datum kan niet gekozen worden.',
+      }
+    ),
+  ],
+})
+export class AppModule {}
+```
+
+You can use the component in template driven, as well as reactive forms. The value is always an ISO string of the Date.
+In the example below we use a reactive form.
+
+```typescript
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+import { DateRange } from '@acpaas-ui/ngx-utils';
+
+constructor(private fb: FormBuilder) { }
+
+public dateRange: DateRange = [5, 6];
+public dateForm: FormGroup;
+
+this.dateForm = this.fb.group({
+  inputDate: [''],
+});
+```
+
+```html
+<form [formGroup]="dateForm">
+  <div
+    class="a-input has-icon-right"
+    [ngClass]="{'has-error': dateForm.controls.inputDate.dirty && dateForm.controls.inputDate.invalid}"
+  >
+    <label class="a-input__label" for="input-datepicker">Pick a date</label>
+    <aui-datepicker
+      data-id="input-datepicker"
+      name="input-datepicker"
+      autocomplete="off"
+      label="Pick date"
+      description="Description"
+      placeholder="dd/mm/jjjj"
+      formControlName="inputDate"
+      [range]="dateRange"
+    >
+    </aui-datepicker>
+    <div *ngIf="dateForm.controls['inputDate'].errors">
+      <p *ngIf="dateForm.controls['inputDate'].errors.format">{{ dateForm.controls['inputDate'].errors.format }}</p>
+      <p *ngIf="dateForm.controls['inputDate'].errors.range">{{ dateForm.controls['inputDate'].errors.range }}</p>
+    </div>
+  </div>
+</form>
+```
+
+## Contributing
+
+Visit our [Contribution Guidelines](../../../../../CONTRIBUTING.md) for more information on how to contribute.

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

@@ -0,0 +1,47 @@
+<div aria-haspopup="grid" auiFlyout class="aui-datepicker a-input has-icon-right">
+  <label class="a-input__label" for="{{ id }}" *ngIf="label">{{ label }}</label>
+  <small class="a-input__description" *ngIf="description"> {{ description }}</small>
+  <div class="a-input__wrapper">
+    <input
+      (blur)="handleBlur($event)"
+      [attr.disabled]="isDisabled ? true : null"
+      [autocomplete]="autocomplete"
+      [formControl]="formControl"
+      id="{{ id }}"
+      label="Pick date"
+      description="Description"
+      name="{{ name }}"
+      placeholder="{{ placeholder }}"
+      type="text"
+    />
+    <ng-container *ngIf="isDisabled">
+      <aui-icon
+        name="ai-calendar"
+      />
+    </ng-container>
+    <ng-container *ngIf="!isDisabled">
+      <aui-icon
+        auiFlyoutAction
+        [openOnFocus]="false"
+        name="ai-calendar"
+        className="is-clickable"
+        role="button"
+        [attr.aria-label]="ariaOpenDatepickerLabel"
+        tabindex="0"
+      />
+    </ng-container>
+
+    <ng-container *ngIf="!isDisabled">
+      <div auiFlyoutZone class="m-datepicker m-datepicker--fixed" role="dialog">
+        <aui-calendar
+          (selectDate)="selectDateFromCalendar($event)"
+          [range]="range"
+          [selectedDate]="selectedDate"
+          [interval]="interval"
+          [weekdayLabels]="weekdayLabels"
+          [monthLabels]="monthLabels"
+        ></aui-calendar>
+      </div>
+    </ng-container>
+  </div>
+</div>

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

@@ -0,0 +1,13 @@
+:host,
+.aui-datepicker {
+  display: block;
+}
+
+.m-flyout.is-open {
+  .m-datepicker {
+    opacity: 1;
+    transform: translateY(calc(var(--BORDER-WIDTH)*-1));
+    transition-delay: 0s;
+    visibility: visible;
+  }
+}

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

@@ -0,0 +1,204 @@
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, OnInit } from '@angular/core';
+import {
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { DateRange, DateHelper } from '@acpaas-ui/ngx-utils';
+import { CalendarModule } from '@acpaas-ui/ngx-calendar';
+import { FlyoutModule } from '@acpaas-ui/ngx-flyout';
+import { IconModule } from '@acpaas-ui/ngx-icon';
+
+import { DATEPICKER_DEFAULT_ERROR_LABELS, DATEPICKER_ERROR_LABELS } from '../../datepicker.conf';
+import { DatepickerComponent } from './datepicker.component';
+
+@Component({
+  selector: 'aui-test-one',
+  template: `
+    <form #testForm="ngForm" (ngSubmit)="submit(testForm.value)">
+      <aui-datepicker
+        id="test"
+        name="test"
+        placeholder="dd/mm/jjjj"
+        autocomplete="off"
+        [range]="range"
+        [(ngModel)]="dateModel"
+      ></aui-datepicker>
+    </form>
+  `,
+})
+export class TestComponent {
+  public range: DateRange;
+  public dateModel: Date;
+
+  submit(form) {}
+}
+
+@Component({
+  selector: 'aui-test-two',
+  template: `
+    <form [formGroup]="testForm" (ngSubmit)="submit(testForm.value)">
+      <aui-datepicker
+        id="test"
+        name="test"
+        placeholder="dd/mm/jjjj"
+        autocomplete="off"
+        [range]="range"
+        formControlName="date"
+      ></aui-datepicker>
+    </form>
+  `,
+})
+export class ReactiveTestComponent implements OnInit {
+  public range: DateRange;
+  public dateModel: Date;
+  public testForm: UntypedFormGroup;
+
+  constructor(private fb: UntypedFormBuilder) {}
+
+  public ngOnInit() {
+    this.testForm = this.fb.group({
+      date: '',
+    });
+  }
+
+  submit(form) {}
+}
+
+describe('The Datepicker Component', () => {
+  // waitForAsync beforeEach
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [FormsModule, ReactiveFormsModule, FlyoutModule, IconModule, CalendarModule],
+      declarations: [TestComponent, ReactiveTestComponent, DatepickerComponent],
+      providers: [
+        {
+          provide: DATEPICKER_ERROR_LABELS,
+          useValue: DATEPICKER_DEFAULT_ERROR_LABELS,
+        },
+      ],
+    }).compileComponents();
+  }));
+
+  // describe('Template driven', () => {
+  //   let comp: TestComponent;
+  //   let fixture: ComponentFixture<TestComponent>;
+  //   let picker: DatepickerComponent;
+
+  //   // synchronous beforeEach
+  //   beforeEach(() => {
+  //     fixture = TestBed.createComponent(TestComponent);
+
+  //     comp = fixture.componentInstance;
+
+  //     picker = fixture.debugElement.children[0].children[0].componentInstance;
+  //   });
+
+  //   it('should exist', () => {
+  //     fixture.detectChanges();
+  //     expect(picker).toBeDefined();
+  //   });
+  // });
+
+  describe('Reactive', () => {
+    let comp: ReactiveTestComponent;
+    let fixture: ComponentFixture<ReactiveTestComponent>;
+    let picker: DatepickerComponent;
+
+    // synchronous beforeEach
+    beforeEach(() => {
+      fixture = TestBed.createComponent(ReactiveTestComponent);
+
+      comp = fixture.componentInstance;
+
+      picker = fixture.debugElement.children[0].children[0].componentInstance;
+      picker.ngOnInit();
+    });
+
+    describe('writeValue', () => {
+      let accessor;
+
+      beforeEach(() => {
+        accessor = {
+          update: () => {},
+        };
+
+        spyOn(accessor, 'update');
+
+        picker.registerOnChange(accessor.update);
+      });
+
+      it('should update the model if the value is a valid date', () => {
+        const date = new Date('2018-01-10T00:00:00Z');
+
+        picker.writeValue(date.toISOString());
+
+        expect(picker.formControl.value).toBeTruthy();
+      });
+    });
+
+    describe('selectDateFromCalendar', () => {
+      beforeEach(() => {
+        spyOn(picker.formControl, 'setValue').and.stub();
+      });
+
+      it('should update the values', () => {
+        const date = new Date('2018-01-10T00:00:00+01:00');
+        picker.selectDateFromCalendar({
+          date,
+          complete: true,
+        });
+
+        expect(picker.formControl.setValue).toHaveBeenCalledWith('10/01/2018');
+      });
+    });
+
+    describe('validate', () => {
+      it('should return null if the control has no value', () => {
+        const ctrl = new UntypedFormControl();
+
+        expect(picker.validate(ctrl)).toEqual(null);
+      });
+
+      it('should return the invalid date error if the date is invalid', () => {
+        const ctrl = new UntypedFormControl(false);
+
+        expect(picker.validate(ctrl)).toEqual({
+          format: DATEPICKER_DEFAULT_ERROR_LABELS.ERRORS_INVALID_DATE,
+        });
+      });
+
+      it('should return null if the date is valid and no range was set', () => {
+        const ctrl = new UntypedFormControl(new Date());
+
+        expect(picker.validate(ctrl)).toEqual(null);
+      });
+
+      it('should return null if the date is valid and outside of the set range', () => {
+        spyOn(picker.calendarService, 'getRangeForDate').and.callFake(() => []);
+        picker.range = [1];
+
+        const ctrl = new UntypedFormControl(new Date().toISOString());
+
+        expect(picker.validate(ctrl)).toEqual(null);
+      });
+
+      it('should return the invalid range error if the date was valid and in the set range', () => {
+        const testDateISO = new Date('2018-01-15T12:00:00Z').toISOString();
+        const parsedDate = DateHelper.parseDate(testDateISO);
+        const range = [parsedDate.getDate()];
+        spyOn(picker.calendarService, 'getRangeForDate').and.callFake(() => range);
+        picker.range = range;
+
+        const ctrl = new UntypedFormControl(testDateISO);
+
+        expect(picker.validate(ctrl)).toEqual({
+          range: DATEPICKER_DEFAULT_ERROR_LABELS.ERRORS_INVALID_RANGE,
+        });
+      });
+    });
+  });
+});